/* =========================================================================
   Whisper Walk — landing page
   Design language "Abendlicht" (evening light), led by the dark "Abend" world.
   Palette + fonts mirror the shipped app so the page reads as the same product.
   ========================================================================= */

/* ---- Fonts: the exact variable fonts the app bundles, self-hosted -------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2");
  font-weight: 100 700;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  /* Abend (evening) — the page's primary world */
  --bg:          #1c1712;   /* deep espresso, a touch below the app surface for depth */
  --surface:     #241d17;   /* raised panels */
  --surface-2:   #2c241d;   /* warm anthracite, app "surface raised" */
  --hairline:    #3a2f25;   /* dividers */
  --hairline-2:  #4a3d30;

  --ink:         #f3eadb;   /* candle-white */
  --ink-2:       #c3b59b;   /* warm grey, AA on bg */
  --ink-3:       #9a8b76;   /* tertiary / captions */

  --ember:       #e89a72;   /* glow-orange accent (links, highlights on dark) */
  --terracotta:  #c96f4a;   /* solid accent, the app's play colour */
  --terracotta-deep: #b35f3c;
  --gold:        #d9b25f;   /* "heard / erlebt" candle-gold */
  --sage:        #93a284;   /* calm / privacy hue */

  --on-accent:   #fff6ec;   /* text on terracotta */

  /* Nachmittag (afternoon) — the single bright band */
  --paper:        #f7f1e6;
  --paper-raised: #fffbf2;
  --paper-ink:    #3a2e25;
  --paper-ink-2:  #6f6051;
  --paper-accent: #a95d3e;
  --paper-hairline:#e6dcc8;

  /* Type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --container: 1140px;
  --measure: 64ch;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --section-y: clamp(3rem, 6vw, 5.5rem);
  --radius: 14px;
  --radius-lg: 22px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);          /* ease-out-quint-ish */
  --ease-soft: cubic-bezier(0.33, 0.9, 0.4, 1);

  /* Z-scale (semantic, never arbitrary) */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 200;

  color-scheme: dark;
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--ember); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: #f1b694; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
:focus-visible { outline: 2.5px solid var(--ember); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Icons --------------------------------------------------------------- */
/* The sprite is referenced with <use>; stroke/fill are inherited properties,
   so setting them on the <svg class="ic"> crosses the use shadow boundary.
   (Attributes on the wrapping <g> inside <defs> do not.) */
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-play, .ic--solid { fill: currentColor; stroke: none; }

/* ---- Language toggle visibility ----------------------------------------- */
[data-lang="de"] [data-l="en"] { display: none; }
[data-lang="en"] [data-l="de"] { display: none; }

/* ---- Typography ---------------------------------------------------------- */
.display, h1, h2, h3 {
  font-family: var(--display);
  font-weight: 560;
  line-height: 1.05;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-variation-settings: "opsz" 144, "wght" 540, "SOFT" 50; }
h2 { font-variation-settings: "opsz" 72,  "wght" 560, "SOFT" 44; }
h3 { font-variation-settings: "opsz" 36,  "wght" 600, "SOFT" 40; }

.eyebrow {                 /* used once, deliberately, not as section grammar */
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.lede { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); color: var(--ink-2); max-width: 46ch; }
p { max-width: var(--measure); text-wrap: pretty; }
strong { font-weight: 700; color: var(--ink); }

/* ---- Layout primitives --------------------------------------------------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
/* own stacking context so the page-wide ambient lights can sit at z-index -1
   behind every section while the opaque daylight band still paints over them */
#main { position: relative; z-index: 0; }
.section { padding-block: var(--section-y); position: relative; }
:where(section[id], [id].section) { scroll-margin-top: 86px; }
.stack > * + * { margin-top: 1rem; }
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: var(--z-overlay);
  background: var(--terracotta); color: var(--on-accent); padding: 0.6rem 1rem;
  border-radius: 8px; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-weight: 700; font-size: 1rem; line-height: 1;
  padding: 0.95em 1.5em; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
  min-height: 48px;
}
.btn--primary {
  background: linear-gradient(180deg, var(--terracotta), var(--terracotta-deep));
  color: var(--on-accent);
  box-shadow: 0 8px 26px -10px rgba(201, 111, 74, 0.7);
}
.btn--primary:hover { color: var(--on-accent); transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(201,111,74,0.85); }
.btn--ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--hairline-2);
}
.btn--ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ember); transform: translateY(-2px); }
.btn--small { padding: 0.6em 1.05em; font-size: 0.92rem; min-height: 40px; }

/* Google Play badge (text-based, crisp at any size, accessible) */
.play-badge {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: #100d0a; color: #fff;
  padding: 0.7rem 1.25rem 0.7rem 1.1rem; border-radius: 14px;
  box-shadow: inset 0 0 0 1px #ffffff1f;
  text-decoration: none; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.play-badge:hover { color: #fff; transform: translateY(-2px); box-shadow: inset 0 0 0 1px #ffffff33, 0 12px 30px -16px #000; }
.play-badge svg { width: 26px; height: 28px; flex: none; }
.play-badge .pb-small { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; line-height: 1; }
.play-badge .pb-large { font-size: 1.22rem; font-weight: 700; line-height: 1.15; font-family: var(--sans); }

/* ---- Header / nav -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--hairline); }
.nav { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand:hover { color: var(--ink); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand b { font-family: var(--display); font-weight: 600; font-size: 1.18rem; font-variation-settings: "opsz" 40, "SOFT" 40; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 1.6rem; margin-right: 0.5rem; }
.nav-links a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.96rem; }
.nav-links a:hover { color: var(--ink); }
.nav-tools { display: flex; align-items: center; gap: 0.75rem; }

.lang-toggle {
  display: inline-flex; align-items: center; padding: 3px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--hairline-2); font-size: 0.82rem; font-weight: 700;
}
.lang-toggle a { padding: 0.32em 0.7em; border-radius: 999px; color: var(--ink-3); text-decoration: none; transition: color 0.2s, background 0.2s; }
.lang-toggle a:hover { color: var(--ink); }
.lang-toggle a[aria-current="page"] { background: var(--terracotta); color: var(--on-accent); }

@media (max-width: 800px) {
  .nav-links { display: none; }
}

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad) var(--section-y); overflow: clip; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; position: relative; z-index: var(--z-raised);
  max-width: var(--container); margin-inline: auto;
}
/* wide enough that the CTA row and all four trust bullets stay on one line in
   both DE and EN; the prose itself is held narrower by its own measures below */
.hero-copy { max-width: 46ch; }
.hero h1 {
  font-size: clamp(2.6rem, 1.7rem + 4.4vw, 4.6rem);
  line-height: 1.0;
}
.hero h1 .glow { color: var(--gold); }
/* Unified hero accent: gold carries the headline word + trust dots, the sub-line
   sits in the calm ink ramp so there is one accent hue, not two (live: V3). */
.hero-sub { margin-top: 1rem; font-weight: 700; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); color: var(--ink-2); letter-spacing: -0.01em; max-width: 30ch; }
.hero .lede { margin-top: 1rem; }
.maker { margin-top: 1rem; font-size: 0.95rem; color: var(--ink-2); }
/* nowrap so "So funktioniert's" / "How it works" always sits right of the badge */
.hero-cta { display: flex; flex-wrap: nowrap; align-items: center; gap: 1rem; margin-top: 2rem; }
/* grid, not wrapping flex, so the four bullets form one deterministic row that is
   identical in every language (no text-length-driven wrap differences) */
.hero-trust { margin-top: 1.6rem; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 0.5rem 0.9rem; color: var(--ink-3); font-size: 0.9rem; font-weight: 600; }
.hero-trust span { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.hero-trust .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }

/* the evening "map of lights" field, one continuous layer behind the whole page
   (child of #main, z-index -1) so the glow never stops at a section edge */
.lights { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lights::before {  /* warm evening vignette, concentrated in the hero and fading down */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(46% 20% at 72% 7%, rgba(224,138,95,0.17), transparent 72%),
    radial-gradient(54% 24% at 18% 13%, rgba(217,178,95,0.07), transparent 72%);
}
.light { position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, var(--ember) 0%, rgba(232,154,114,0.35) 40%, transparent 72%);
  filter: blur(0.3px); opacity: 0.7; transform: translate(-50%, -50%);
  animation: breathe 6s var(--ease-soft) infinite;
}
/* desync the larger field so a page of dots breathes like embers, not in lockstep */
.light:nth-child(4n+1) { animation-delay: -0.5s; }
.light:nth-child(4n+2) { animation-delay: -2.2s; }
.light:nth-child(4n+3) { animation-delay: -3.6s; }
.light:nth-child(4n)   { animation-delay: -5.1s; }
.light--gold { background: radial-gradient(circle, var(--gold) 0%, rgba(217,178,95,0.4) 42%, transparent 74%); width: 18px; height: 18px; }
.light--big { width: 26px; height: 26px; opacity: 0.55; }
@keyframes breathe { 0%,100% { opacity: 0.28; transform: translate(-50%,-50%) scale(0.85); } 50% { opacity: 0.85; transform: translate(-50%,-50%) scale(1.12); } }

/* hero device */
.hero-device { justify-self: center; position: relative; }
.hero-device .halo {
  position: absolute; inset: -14% -18%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(224,138,95,0.22), rgba(217,178,95,0.06) 55%, transparent 72%);
  filter: blur(8px);
}

/* phone frame */
.phone {
  width: min(300px, 78vw); aspect-ratio: 9 / 19.5; position: relative;
  background: #0c0a08; border-radius: 38px; padding: 9px;
  box-shadow: 0 2px 2px #ffffff14 inset, 0 40px 80px -32px rgba(0,0,0,0.75), 0 12px 30px -18px rgba(0,0,0,0.8);
}
.phone::after { /* speaker pill */
  content: ""; position: absolute; top: 17px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 6px; border-radius: 3px; background: #00000066; z-index: 2;
}
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 30px; }
.phone--floppy { transform: rotate(-2deg); }

/* ---- Section heading block ---------------------------------------------- */
.sec-head { max-width: 30ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.sec-head.center { margin-inline: auto; text-align: center; max-width: 34ch; }
.sec-head h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
.sec-head p { margin-top: 1rem; color: var(--ink-2); }
.sec-head.center p { margin-inline: auto; }

/* ---- The core loop ------------------------------------------------------- */
.loop { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; }
.loop-step {
  flex: 1 1 160px; background: var(--surface); border-radius: var(--radius);
  padding: 1.4rem 1.3rem; box-shadow: inset 0 0 0 1px var(--hairline);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.loop-step .ic { width: 30px; height: 30px; color: var(--ember); }
.loop-step h3 { font-size: 1.18rem; }
.loop-step p { font-size: 0.95rem; color: var(--ink-2); margin: 0; }
.loop-arrow { align-self: center; color: var(--hairline-2); flex: none; font-size: 1.4rem; }
@media (max-width: 760px) { .loop-arrow { transform: rotate(90deg); } }

/* ---- Feature rows (image + text, alternating) --------------------------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.feature + .feature { margin-top: clamp(2.75rem, 6vw, 4.5rem); }
.feature:nth-child(even) .feature-media { order: 2; }
.feature-text { max-width: 40ch; }
.feature-text h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
.feature-text p { margin-top: 1rem; color: var(--ink-2); }
.feature-list { list-style: none; padding: 0; margin-top: 1.3rem; display: grid; gap: 0.7rem; }
.feature-list li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--ink-2); }
.feature-list .ic { width: 20px; height: 20px; color: var(--gold); flex: none; margin-top: 0.18em; }

.feature-media { display: flex; justify-content: center; position: relative; }
.feature-media .glow-floor {
  position: absolute; bottom: -6%; left: 50%; transform: translateX(-50%);
  width: 70%; height: 40%; background: radial-gradient(ellipse, rgba(224,138,95,0.18), transparent 70%);
  filter: blur(12px); z-index: -1;
}

/* ---- Daylight band (Nachmittag) ----------------------------------------- */
.band--day {
  background: var(--paper); color: var(--paper-ink);
  --ink: var(--paper-ink); --ink-2: var(--paper-ink-2); --ink-3: var(--paper-ink-2);
  --hairline: var(--paper-hairline); --surface: var(--paper-raised);
  position: relative;
}
.band--day h2, .band--day h3 { color: var(--paper-ink); }
.band--day .eyebrow { color: var(--paper-accent); }
.band--day a { color: var(--paper-accent); }
/* warm seam so the flip reads as dusk→day, not a hard switch */
.band--day::before, .band--day::after {
  content: ""; position: absolute; left: 0; right: 0; height: 90px; pointer-events: none;
}
.band--day::before { top: 0; background: linear-gradient(var(--bg), transparent); }
.band--day::after { bottom: 0; background: linear-gradient(transparent, var(--bg)); }

.palette-row { display: flex; flex-wrap: wrap; gap: 1.1rem 1rem; margin-top: 1.4rem; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 62px; }
.swatch .chip {
  width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 6px 16px -8px rgba(58,46,37,0.5), inset 0 0 0 1px rgba(58,46,37,0.08);
}
.swatch small { font-size: 0.78rem; color: var(--paper-ink-2); font-weight: 600; text-align: center; line-height: 1.2; }
.day-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.lang-count { font-family: var(--display); font-variation-settings: "opsz" 90, "wght" 600, "SOFT" 50; font-size: clamp(3rem, 2rem + 5vw, 5.5rem); color: var(--paper-accent); line-height: 1; }

@media (max-width: 820px) { .day-grid { grid-template-columns: 1fr; } }

/* ---- FAQ ----------------------------------------------------------------- */
.faq { max-width: 800px; margin-inline: auto; }
.faq details {
  border-top: 1px solid var(--hairline); padding: 0.35rem 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0; position: relative;
  font-family: var(--display); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); font-weight: 560;
  font-variation-settings: "opsz" 40, "SOFT" 40; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.2rem; top: 50%; width: 13px; height: 13px;
  border-right: 2px solid var(--ember); border-bottom: 2px solid var(--ember);
  transform: translateY(-60%) rotate(45deg); transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { padding: 0 0 1.4rem; color: var(--ink-2); }
.faq .answer p { max-width: 70ch; }
.faq .answer p + p { margin-top: 0.7rem; }

/* ---- Download / closing CTA --------------------------------------------- */
.cta-band { position: relative; overflow: clip; padding-inline: var(--pad); }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(50% 70% at 50% 0%, rgba(224,138,95,0.16), transparent 72%);
}
.cta-card {
  position: relative; z-index: 1; max-width: var(--container); margin-inline: auto;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--hairline);
  padding: clamp(2.2rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.cta-card h2 { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.2rem); }
.cta-card p { color: var(--ink-2); margin-top: 1rem; }
.cta-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.qr { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; justify-self: center; }
.qr img { width: 168px; height: 168px; border-radius: 16px; box-shadow: 0 16px 36px -18px rgba(0,0,0,0.7); }
.qr small { color: var(--ink-3); font-weight: 600; max-width: 18ch; text-align: center; }
@media (max-width: 760px) { .cta-card { grid-template-columns: 1fr; } .qr { order: -1; } }
/* On a phone you cannot scan a QR shown on that same phone — hide it, keep the badge. */
@media (max-width: 600px) { .qr { display: none; } }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { background: #16110d; border-top: 1px solid var(--hairline); padding-block: clamp(3rem, 6vw, 5rem) 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; }
.footer-brand .brand { margin-bottom: 1rem; }
.footer-brand p { color: var(--ink-3); font-size: 0.95rem; max-width: 34ch; }
.footer-col h4 { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; font-weight: 800; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.footer-col a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.footer-col a:hover { color: var(--ember); }
.footer-bottom { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center; justify-content: space-between; color: var(--ink-3); font-size: 0.85rem; }
.attrib { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- Legal pages --------------------------------------------------------- */
.legal { max-width: 720px; margin-inline: auto; }
.legal h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.legal .updated { color: var(--ink-3); font-size: 0.9rem; margin-top: 0.5rem; }
.legal h2 { font-size: 1.6rem; margin-top: 3rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--hairline); }
.legal h3 { font-size: 1.12rem; margin-top: 1.8rem; }
.legal p, .legal li { color: var(--ink-2); max-width: none; }
.legal p, .legal ul { margin-top: 0.7rem; }
.legal ul { padding-left: 1.2rem; display: grid; gap: 0.7rem; }
.legal .addr { color: var(--ink); }
.legal hr { border: none; border-top: 1px solid var(--hairline); margin: 3.5rem 0; }

/* ---- Responsive collapses ----------------------------------------------- */
/* The one-row trust strip is ~460px wide, so the two-column hero only has room
   for it once the left track clears that. Collapse to one column below 1080px
   (single column gives copy the full width) rather than squeezing the strip. */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: clamp(2rem, 8vw, 3rem); }
  .hero-copy { max-width: 100%; }
  .hero h1 { font-size: clamp(2.5rem, 1.4rem + 7vw, 3.6rem); }
  .phone { width: min(270px, 66vw); }
}
@media (max-width: 900px) {
  .feature, .feature:nth-child(even) .feature-media { grid-template-columns: 1fr; }
  .feature-media { order: -1 !important; }
  .day-grid { grid-template-columns: 1fr; }
}
/* Phones: stack the two CTAs and drop the trust strip to a 2x2 grid. Still
   deterministic and identical across both languages. */
@media (max-width: 600px) {
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .hero-trust { grid-auto-flow: row; grid-template-columns: repeat(2, max-content); }
}

/* ---- Reveal-on-scroll (progressive, never gates visibility) ------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  html.js .reveal.in { opacity: 1; transform: none; }
  html.js .reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
  html.js .reveal-stagger.in > * { opacity: 1; transform: none; }
  html.js .reveal-stagger.in > *:nth-child(2) { transition-delay: 0.08s; }
  html.js .reveal-stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
  html.js .reveal-stagger.in > *:nth-child(4) { transition-delay: 0.24s; }
  html.js .reveal-stagger.in > *:nth-child(5) { transition-delay: 0.32s; }
  /* The loop row has 7 children (4 steps + 3 arrows); cover them all so the
     last step trails the cascade instead of popping in with delay 0. */
  html.js .reveal-stagger.in > *:nth-child(6) { transition-delay: 0.40s; }
  html.js .reveal-stagger.in > *:nth-child(7) { transition-delay: 0.48s; }
  html.js .reveal-stagger.in > *:nth-child(8) { transition-delay: 0.56s; }
}

@media (prefers-reduced-motion: reduce) {
  .light { animation: none; opacity: 0.6; }
  * { scroll-behavior: auto !important; }
}