/* IDEA Studios + DelFair – one stylesheet for the whole site.
   Colours and type follow the DelFair app ("Retro kassaapparat"): cream thermal paper,
   forest-green ink, one burnt-orange accent. No external requests: the fonts are in /fonts.

   The layout follows Apple's interface guidelines, translated to plain CSS (the site has no
   JavaScript): size-specific tracking and leading, sizes in rem so the reader's text size
   scales the page, a translucent header that content scrolls under, soft depth instead of
   heavy outlines, feedback on press, and calmer fallbacks for reduced motion, reduced
   transparency and more contrast. The brand font stays because it is the app's font. */

@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/PlusJakartaSans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/PlusJakartaSans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/PlusJakartaSans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/PlusJakartaSans-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #F3EDE1;
  --surface: #FDFBF7;
  --surface2: #EFE7D8;
  --text: #10201C;
  --ink: #0F4C43;
  --muted: #4F6F68;
  --line: #E2D9C8;
  --rule: #C9BBA3;
  --brand: #0F4C43;
  --on-brand: #FDFBF7;
  --accent: #FF6B4A;
  --accent-ink: #B8401F;
  --sand: #E9D8A6;
  /* Receipts are cream in both themes, like real paper */
  --paper: #FDFBF7;
  --paper-ink: #0F4C43;
  --paper-muted: #4F6F68;
  /* A thin ring around the dark studio logo, only needed on the dark page */
  --logo-ring: transparent;
  /* Hairlines and depth. Bigger surfaces get a deeper shadow. */
  --hairline: rgba(16, 32, 28, 0.10);
  --shadow-sm: 0 1px 2px rgba(16, 32, 28, 0.06), 0 2px 8px rgba(16, 32, 28, 0.05);
  --shadow-md: 0 1px 2px rgba(16, 32, 28, 0.05), 0 8px 24px rgba(16, 32, 28, 0.07);
  --shadow-lg: 0 2px 4px rgba(16, 32, 28, 0.05), 0 18px 48px rgba(16, 32, 28, 0.10);
  /* The header material: the page colour, see-through */
  --glass: rgba(243, 237, 225, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.5);
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  /* Critically damped (no overshoot): nothing on this page is thrown, so nothing bounces */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1F1B;
    --surface: #12302A;
    --surface2: #183A33;
    --text: #EFE9DC;
    --ink: #EFE9DC;
    --muted: #9DB8B0;
    --line: #1E4A40;
    --rule: #2F5F54;
    --brand: #4FA08D;
    --on-brand: #0B1F1B;
    --accent-ink: #FF8A6E;
    --logo-ring: #3B6E62;
    --hairline: rgba(239, 233, 220, 0.10);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.30), 0 18px 48px rgba(0, 0, 0, 0.35);
    --glass: rgba(11, 31, 27, 0.70);
    --glass-edge: rgba(239, 233, 220, 0.06);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1F1B;
  --surface: #12302A;
  --surface2: #183A33;
  --text: #EFE9DC;
  --ink: #EFE9DC;
  --muted: #9DB8B0;
  --line: #1E4A40;
  --rule: #2F5F54;
  --brand: #4FA08D;
  --on-brand: #0B1F1B;
  --accent-ink: #FF8A6E;
  --logo-ring: #3B6E62;
  --hairline: rgba(239, 233, 220, 0.10);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.30), 0 18px 48px rgba(0, 0, 0, 0.35);
  --glass: rgba(11, 31, 27, 0.70);
  --glass-edge: rgba(239, 233, 220, 0.06);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* 17px body like iOS, in rem so the browser's text size setting scales it */
  font: 400 1.0625rem/1.55 var(--sans);
  letter-spacing: 0;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
p, li { text-wrap: pretty; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
@media (hover: hover) { a:hover { color: var(--accent-ink); text-decoration-color: currentColor; } }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.wrap { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
.narrow { max-width: 46rem; }
@media (min-width: 720px) { .wrap { padding: 0 2rem; } }

.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow-md); z-index: 30; }
.skip:focus { left: 16px; }

/* ---------- header / footer ---------- */
/* A translucent layer that the page scrolls under, instead of an opaque bar */
.site-head {
  position: sticky; top: 0; z-index: 20;
  padding: 0.625rem 0;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 -1px 0 var(--hairline);
}
/* No hard divider: a soft fade where content meets the header */
.site-head::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent), transparent);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--text); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.015em; white-space: nowrap; }
.brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1.5px var(--logo-ring); }
@media (hover: hover) { .brand:hover { color: var(--text); } }
.nav { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.nav a { font: 600 0.9375rem/1 var(--sans); letter-spacing: -0.005em; text-decoration: none; color: var(--muted); padding: 0.5625rem 0.75rem; border-radius: 999px; }
@media (hover: hover) { .nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); } }
.nav a:active { background: color-mix(in srgb, var(--text) 10%, transparent); }
.nav a[aria-current="page"] { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.head-right { display: flex; align-items: center; gap: 4px; }

/* Language menu: a <details> drop-down, works without JavaScript.
   It grows out of its button (top right), not out of thin air. */
.lang { position: relative; }
.lang summary {
  list-style: none; cursor: pointer; user-select: none;
  font: 600 0.875rem/1 var(--sans); letter-spacing: 0.01em; color: var(--text);
  padding: 0.5625rem 1.75rem 0.5625rem 0.75rem; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  position: relative;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: ''; position: absolute; right: 0.75rem; top: 50%; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); }
.lang[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
@media (hover: hover) { .lang summary:hover { background: color-mix(in srgb, var(--text) 10%, transparent); } }
.lang summary:active { background: color-mix(in srgb, var(--text) 14%, transparent); }
.lang ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 25;
  margin: 0; padding: 6px; list-style: none; min-width: 11rem;
  background: var(--surface); border-radius: 16px;
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow-lg);
  transform-origin: top right;
}
.lang li a { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: 10px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 1rem; }
@media (hover: hover) { .lang li a:hover { background: var(--surface2); color: var(--text); } }
.lang li a:active { background: var(--surface2); }
.lang li a[aria-current="true"] { background: var(--surface2); }
.lang .code { font: 600 0.75rem/1 var(--sans); letter-spacing: 0.04em; color: var(--muted); width: 1.5rem; }
/* Small phones: the logo stays on one line; the DelFair link is in the footer and on the front page */
@media (max-width: 520px) { .nav a.opt { display: none; } }
@media (max-width: 370px) { .brand { font-size: 1rem; gap: 8px; } .brand img { width: 28px; height: 28px; } .nav a { padding: 0.5625rem 0.5rem; } }

.site-foot { margin-top: 6rem; padding: 1.75rem 0 2.5rem; box-shadow: inset 0 1px 0 var(--hairline); color: var(--muted); font-size: 0.875rem; letter-spacing: 0.005em; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-foot a { color: var(--muted); text-decoration: none; }
@media (hover: hover) { .site-foot a:hover { color: var(--text); text-decoration: underline; } }
.foot-langs { flex-basis: 100%; margin: 4px 0 0; color: var(--muted); }
.foot-langs [aria-current] { color: var(--text); font-weight: 600; }

/* ---------- type ---------- */
/* Tracking and leading change with size: large text is tighter, small text slightly looser */
.label { font: 600 0.9375rem/1.4 var(--sans); letter-spacing: 0; color: var(--accent-ink); margin: 0 0 0.5rem; }
h1, h2, h3 { margin: 0; color: var(--text); overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 8vw, 4.25rem); font-weight: 800; line-height: 1.03; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 4.2vw, 2.625rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.028em; }
h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.012em; }
.lead { font-size: clamp(1.1875rem, 2.4vw, 1.4375rem); line-height: 1.4; letter-spacing: -0.012em; color: var(--muted); max-width: 32em; margin: 1rem 0 0; }
.accent-word { color: var(--accent-ink); }
.mono { font-family: var(--mono); }

/* ---------- pieces ---------- */
.section { margin-top: clamp(4.5rem, 10vw, 7.5rem); }
.section .label + h2 { margin-bottom: 2rem; }

.card {
  background: var(--surface);
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow-md);
}

/* Buttons: pill shaped, and they answer the moment they are pressed */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 600 1rem/1 var(--sans); letter-spacing: -0.005em;
  color: #10201C; background: var(--accent);
  border: 0; border-radius: 999px;
  padding: 0.875rem 1.375rem; text-decoration: none;
  min-height: 44px;
  box-shadow: var(--shadow-sm);
}
@media (hover: hover) { .btn:hover { color: #10201C; background: color-mix(in srgb, var(--accent) 92%, white); } }
.btn.secondary { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-sm); }
@media (hover: hover) { .btn.secondary:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 94%, var(--text)); } }

.soon {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: 600 0.875rem/1.35 var(--sans); letter-spacing: 0;
  background: var(--sand); color: #10201C;
  border-radius: 999px; padding: 0.5625rem 1rem;
}
.soon::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* Receipt paper: cream, mono, dashed rules and a torn bottom edge. This stays retro on
   purpose: it is the app's own picture of a receipt. */
.receipt {
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.6;
  padding: 1.75rem 1.5rem 2.5rem;
  border-radius: 6px 6px 0 0;
  --tooth: 16px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--tooth) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--tooth) 100%;
}
.product-hero > .receipt { justify-self: center; width: 100%; max-width: 26rem; }
.receipt .r-head { text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.receipt .r-small { font-size: 0.8125rem; margin-bottom: 10px; }
.receipt .r-pay { margin-top: 6px; }
.receipt .r-sub { text-align: center; color: var(--paper-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.receipt hr { border: 0; border-top: 2px dashed #C9BBA3; margin: 16px 0; }
.receipt .r-row { display: flex; gap: 12px; align-items: baseline; }
.receipt .r-row .dots { flex: 1; border-bottom: 2px dotted #C9BBA3; transform: translateY(-5px); }
.receipt .r-row b { font-weight: 700; }
.receipt .r-muted { color: var(--paper-muted); font-size: 0.8125rem; }
.receipt .r-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.25rem; text-transform: uppercase; }

/* ---------- home (studio) ---------- */
.hero { padding: 3.5rem 0 0; }
@media (min-width: 720px) { .hero { padding: 6.5rem 0 0; } }
.hero h1 { max-width: 15em; }

.app-card { display: grid; gap: 1.25rem; align-items: center; text-decoration: none; color: var(--text); }
@media (min-width: 720px) { .app-card { grid-template-columns: auto 1fr auto; gap: 1.75rem; padding: 1.75rem; } }
@media (hover: hover) { .app-card:hover { color: var(--text); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-lg); } }
.app-card:active { transform: scale(0.99); }
.app-card .icon { width: 88px; height: 88px; border-radius: 22%; box-shadow: var(--shadow-sm); }
.app-card p { margin: 6px 0 14px; color: var(--muted); }
.app-card .go { font: 600 1rem/1 var(--sans); color: var(--ink); white-space: nowrap; }

/* ---------- DelFair page ---------- */
.product-hero { display: grid; gap: 2.5rem; padding-top: 2.5rem; }
@media (min-width: 900px) { .product-hero { grid-template-columns: 1.1fr 0.9fr; align-items: center; padding-top: 5rem; } }
.product-hero .icon { width: 96px; height: 96px; border-radius: 22%; margin-bottom: 1.5rem; box-shadow: var(--shadow-md); }
.product-hero .ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; align-items: center; }
.product-hero > div > p:not([class]) { color: var(--muted); max-width: 34em; }

.phones {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 1fr);
  gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 0.5rem 0.5rem 1.5rem; margin: -0.5rem -0.5rem 0;
  scrollbar-width: none;
}
.phones::-webkit-scrollbar { display: none; }
.phones figure { margin: 0; scroll-snap-align: start; }
.phones img { width: 100%; height: auto; aspect-ratio: 520 / 1125; border-radius: 32px; background: #F3EDE1; box-shadow: 0 0 0 1px var(--hairline), var(--shadow-lg); }
.phones figcaption { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
.phones figcaption b { display: block; color: var(--text); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; margin-bottom: 2px; }
@media (min-width: 900px) { .phones { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 2rem; overflow: visible; } }

.grid-3 { display: grid; gap: 1rem; }
@media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.way { border-radius: 24px; padding: 1.75rem 1.5rem; color: #10201C; box-shadow: var(--shadow-sm); }
.way h3 { color: inherit; font: 800 1.375rem/1.15 var(--sans); letter-spacing: -0.02em; }
.way p { margin: 0.625rem 0 0; font-size: 1rem; line-height: 1.5; }
.way.forest { background: #0F4C43; color: #FDFBF7; }
.way.sand { background: var(--sand); }
.way.orange { background: var(--accent); }

.facts { display: grid; gap: 1.5rem 2.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }
.facts li { display: flex; gap: 0.875rem; align-items: flex-start; }
.facts .tick { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font: 700 0.75rem/1 var(--sans); margin-top: 1px; }
.facts b { display: block; font-weight: 700; letter-spacing: -0.01em; }
.facts span { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.facts.one { grid-template-columns: 1fr; gap: 1.25rem; }
.card .note { margin: 1.5rem 0 0; padding-top: 1.25rem; box-shadow: inset 0 1px 0 var(--hairline); color: var(--muted); }

.pro { display: grid; gap: 2rem; }
@media (min-width: 860px) { .pro { grid-template-columns: 0.9fr 1.1fr; align-items: start; } .pro .card { padding: 2rem; } }
.stamp { display: inline-block; font: 700 0.8125rem/1 var(--sans); letter-spacing: 0.02em; background: var(--accent); color: #10201C; border-radius: 999px; padding: 6px 11px; }

.link-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.link-row.spaced { margin-top: 2rem; }
.pro h2 { margin-top: 1rem; }

/* ---------- text pages (privacy, terms, support) ---------- */
.doc-head { padding: 3rem 0 0.5rem; }
@media (min-width: 720px) { .doc-head { padding-top: 4.5rem; } }
.doc-head .updated { font: 400 0.875rem/1.4 var(--sans); color: var(--muted); margin-top: 1rem; }
.summary { margin-top: 2rem; }
.summary h2 { font-size: 1.25rem; letter-spacing: -0.015em; margin-bottom: 0.625rem; }
.summary ul { margin: 0; padding-left: 1.25rem; }
.summary li + li { margin-top: 6px; }

.prose { margin-top: 2.5rem; }
.prose h2 { font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.2; margin: 3rem 0 0.75rem; padding-top: 1.5rem; box-shadow: inset 0 1px 0 var(--hairline); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.75rem 0 0.5rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 0.875rem; }
.prose ul, .prose ol { padding-left: 1.375rem; }
.prose li + li { margin-top: 6px; }
.prose .table { width: 100%; overflow-x: auto; margin: 0 0 1.25rem; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-sm); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 560px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--hairline); }
.prose th { font: 600 0.8125rem/1.3 var(--sans); letter-spacing: 0.01em; color: var(--muted); }
.prose tr:last-child td { border-bottom: 0; }
.todo { background: var(--sand); color: #10201C; border-radius: 6px; padding: 1px 6px; font-family: var(--mono); font-size: 0.9em; }

.lang-switch { font: 600 0.875rem/1 var(--sans); }

/* FAQ: grouped rows like an iOS inset list */
.faq { display: grid; gap: 0.625rem; margin-top: 2rem; }
.faq details { background: var(--surface); border-radius: 18px; box-shadow: 0 0 0 1px var(--hairline), var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; padding: 1.125rem 3.25rem 1.125rem 1.25rem; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.35; position: relative; border-radius: 18px; }
.faq summary::-webkit-details-marker { display: none; }
/* A chevron that turns to point at the answer as it opens */
.faq summary::after { content: ''; position: absolute; right: 1.375rem; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:active { background: color-mix(in srgb, var(--text) 4%, transparent); }
.faq .answer { padding: 0 1.25rem 1.25rem; color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.faq .answer p, .faq .answer ol, .faq .answer ul { margin: 0 0 0.75rem; }
.faq .answer ol, .faq .answer ul { padding-left: 1.375rem; }
.faq .answer > :last-child { margin-bottom: 0; }

.contact { margin-top: 2.5rem; display: grid; gap: 8px; }
.contact .mail { font: 700 clamp(1.25rem, 4.5vw, 1.75rem)/1.3 var(--sans); letter-spacing: -0.02em; word-break: break-word; }
.contact .label { margin: 1.25rem 0 0; }
.contact .note { margin: 6px 0 0; color: var(--muted); }

/* ---------- press feedback and motion ---------- */
/* Feedback lives on the press: buttons and links answer on pointer-down, not on release */
.btn:active, .lang summary:active, .nav a:active { transform: scale(0.97); }

@media (prefers-reduced-motion: no-preference) {
  .btn, .nav a, .lang summary, .faq summary, .app-card, .site-foot a {
    transition: transform 100ms ease-out, background-color 150ms ease-out, box-shadow 200ms ease-out, color 150ms ease-out;
  }
  .lang summary::after, .faq summary::after { transition: transform 300ms var(--ease-out); }

  /* The language menu materialises from its button: scale, blur and fade together */
  .lang ul { transition: opacity 200ms var(--ease-out), transform 300ms var(--ease-out), filter 200ms var(--ease-out); }
  @starting-style {
    .lang[open] ul { opacity: 0; transform: scale(0.94); filter: blur(4px); }
  }

  /* FAQ answers grow open instead of popping in (browsers that support it) */
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: clip; opacity: 0;
    transition: block-size 350ms var(--ease-out), opacity 250ms var(--ease-out), content-visibility 350ms allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
}

/* Reduced motion: no scaling, only the colour change */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .lang summary:active, .nav a:active, .app-card:active { transform: none; }
}

/* Reduced transparency: a solid header */
@media (prefers-reduced-transparency: reduce) {
  .site-head { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-head::after { display: none; }
}

/* More contrast: clear outlines instead of soft shadows */
@media (prefers-contrast: more) {
  :root { --hairline: rgba(16, 32, 28, 0.55); }
  .site-head { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .card, .faq details, .btn.secondary, .prose .table, .lang ul, .phones img { box-shadow: 0 0 0 2px var(--text); }
  .label, .nav a { color: var(--text); }
}