/* ---------------------------------------------------------------------------
   Self-hosted webfonts (2026-07-16).

   These used to load from fonts.googleapis.com / fonts.gstatic.com, which sends
   every visitor's IP address to Google in the US with no consent — the exact
   practice the Munich court ruled against in Jan 2022 (LG München, 3 O
   17493/20). Germany is where that ruling bites hardest, and German visitors
   are precisely who we started sending here on purpose (see middleware.ts).
   Serving the files ourselves removes the exposure, drops two third-party
   connections, and renders text sooner.

   Both families are VARIABLE fonts: one file per subset carries the whole
   400-800 range, so Google's 12 @font-face rules collapse into 4 downloads —
   but the weight must stay a RANGE, or the browser fake-bolds 500-800 instead
   of moving the font's own wght axis.

   Subsets kept:
     - latin      → German ä ö ü ß, French é è ç, English
     - latin-ext  → Romanian ă ș ț  (â and î already live in latin)
   cyrillic-ext and vietnamese are dropped: no language we ship needs them.

   Regenerate with scratchpad/dl-fonts.mjs if the families ever change.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   Lento — landing page
   Emerald design system · glassmorphism · bento · aurora mesh
   Type: Bricolage Grotesque (display) + Hanken Grotesk (body)
   Mobile-first · fully responsive · a11y · prefers-reduced-motion honored

   2026-07-10 optimization pass (founder feedback: nav "looks off / not
   visible", "not responsive", "fonts too big / too small"):
   • Type normalized to ONE fluid modular scale (Utopia-style clamp tokens,
     ratio ~1.2 mobile → ~1.25 desktop, every max ≤ 2.5×min → passes WCAG 1.4.4)
   • Nav: transparent over the dark hero (white links) → cross-fades to a solid
     frosted-LIGHT bar with dark text once you scroll past the hero (AA in both
     states); toggled by an IntersectionObserver on the hero, not a scroll handler
   • Responsive hardening: overflow-x:clip, minmax(0,1fr) grid tracks,
     min-width:0 flex kids, 44px tap targets, em breakpoints, safe-area insets
   Sources are catalogued in the changelog returned with this pass.
   ========================================================================== */

/* ---- Design tokens ---- */
:root {
  /* Grounds */
  --paper: #F6FAF6;        /* mint paper (light sections) */
  --paper-warm: #F3F7F1;   /* warm-tinted light band */
  --forest: #08130E;       /* deep forest near-black (hero + final CTA) */
  --forest-2: #0B1A13;     /* slightly lifted forest */
  --forest-lift: #123A2A;  /* teal-lifted top of the hero ground */
  --forest-deep: #060F0B;  /* deepest sink */

  /* Brand emerald */
  --emerald: #12B981;
  --emerald-deep: #0E9E6E;
  --lime: #B6F04A;         /* energetic secondary */
  --apricot: #FFB27A;      /* the one warm pop (ring leading edge etc.) */
  --teal: #0BE0C4;         /* cool aurora counter-hue */
  --violet: #6D5AE6;       /* faint aurora accent */

  /* Ink / text */
  --ink: #0B2E22;          /* deep forest ink on light */
  --ink-soft: #5B6E63;     /* grey-green secondary text on light */
  --paper-ink: #EAF5EE;    /* near-white text on dark */
  --paper-ink-soft: #B4CEC0; /* muted green-grey on dark (lifted for legibility) */

  /* Glass */
  --glass-light: rgba(255, 255, 255, 0.6);
  --glass-dark: rgba(255, 255, 255, 0.05);
  --hair-light: rgba(11, 46, 34, 0.10);
  --hair-dark: rgba(255, 255, 255, 0.12);

  /* Shadows (emerald-tinted) */
  --shadow-sm: 0 2px 8px rgba(11, 46, 34, 0.06);
  --shadow-md: 0 10px 30px -8px rgba(11, 46, 34, 0.16);
  --shadow-lg: 0 30px 60px -20px rgba(8, 19, 14, 0.45);
  --shadow-dark: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 55px -26px rgba(0, 0, 0, 0.75);
  --glow-emerald: 0 20px 60px -18px rgba(18, 185, 129, 0.45);

  /* Radii */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 26px;
  --r-pill: 999px;

  --maxw: 1120px;
  --nav-h: 56px;

  /* Type */
  --font-display: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ------------------------------------------------------------------
     ONE fluid modular scale — anchored 360px → 1240px, ratio 1.2 → 1.25.
     Every clamp keeps a rem term in the middle (zoom-safe / WCAG 1.4.4)
     and max ≤ 2.5×min. These 7 named steps are the ONLY text sizes on the
     page — see legacy aliases below so every existing rule maps onto them.
     ------------------------------------------------------------------ */
  --fs-caption: clamp(0.75rem, 0.72rem + 0.11vw, 0.8125rem);   /* 12 → 13  legal / labels */
  --fs-sm:      clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);  /* 14 → 15  small / meta    */
  --fs-body:    clamp(1rem, 0.97rem + 0.11vw, 1.0625rem);      /* 16 → 17  BODY           */
  --fs-lead:    clamp(1.125rem, 1.07rem + 0.23vw, 1.25rem);    /* 18 → 20  lead / intro    */
  --fs-h3:      clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);      /* 20 → 24  h3             */
  --fs-h2:      clamp(1.625rem, 1.37rem + 1.14vw, 2.25rem);    /* 26 → 36  h2             */
  --fs-h1:      clamp(2rem, 1.59rem + 1.82vw, 3rem);           /* 32 → 48  hero h1 (restrained: Vercel/Stripe/Apple pocket) */

  /* Legacy step-aliases → the one scale (keeps every existing rule valid) */
  --step--1: var(--fs-caption);
  --step-0:  var(--fs-body);
  --step-1:  var(--fs-lead);
  --step-2:  var(--fs-h3);
  --step-3:  clamp(1.5rem, 1.29rem + 0.91vw, 2rem);   /* 24 → 32  intermediate (small-CTA h2) */
  --step-4:  var(--fs-h2);
  --step-5:  var(--fs-h1);
}

/* ---- Reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 100%;                 /* never hard-pin px → respects user zoom / OS text size */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);  /* anchor jumps clear the sticky bar */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);       /* body ≥ 17px */
  line-height: 1.6;                /* body 1.5–1.65 */
  letter-spacing: 0;               /* body tracking stays normal */
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--forest);       /* dark base so the transparent nav sits on a dark ground */
  /* clip (not hidden) on BODY only kills horizontal scroll without breaking
     position:sticky, and (unlike on <html>) leaves the viewport free to scroll */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Long words / URLs never force a horizontal scroll */
p, li, h1, h2, h3, summary, .bubble, .value-chip span { overflow-wrap: break-word; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;               /* default for headings; per-level below */
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
  margin: 0;
  text-wrap: balance;
}
h2 { line-height: 1.15; letter-spacing: -0.015em; }
h3 { line-height: 1.3;  letter-spacing: -0.012em; }

p { margin: 0; }
body p, .tile p, .step-card p, .faq-a { text-wrap: pretty; }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* ---- Focus visibility ---- */
:focus-visible {
  outline: 3px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-dark :focus-visible { outline-color: var(--lime); }
.nav.scrolled :focus-visible { outline-color: var(--emerald); }

/* ---- Skip link (keyboard / screen-reader) ---- */
.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 300;
  transform: translateY(-160%);
  padding: 12px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
  background: var(--emerald);
  color: #04120B;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); outline-offset: 2px; }

/* ---- Unconfigured-form warning banner (dev safety net) ---- */
.config-warning {
  position: relative;
  z-index: 200;
  padding: 11px 18px;
  background: #FFCC33;
  color: #3A2A00;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-align: center;
}

/* ---- Layout helpers ---- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  /* fluid side gutters; max() keeps clear of the notch in landscape */
  padding-inline: max(clamp(18px, 5vw, 40px), env(safe-area-inset-left), env(safe-area-inset-right));
}

.section {
  position: relative;
  padding-block: clamp(48px, 7vw, 80px);  /* density pass: ~30% tighter */
}

.section.light { background: var(--paper); }

.section.dark {
  background: var(--forest);
  color: var(--paper-ink);
  box-shadow: inset 0 1px 0 rgba(18, 185, 129, 0.16); /* emerald hairline at seam */
}
.section.dark h1, .section.dark h2, .section.dark h3 { color: #fff; }
/* Feather the light → dark seam so sections bleed instead of hard-cutting */
.section.dark::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 120px;
  transform: translateY(-100%);
  background: linear-gradient(to bottom, transparent, var(--forest));
  pointer-events: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;          /* ALL-CAPS label → positive tracking */
  text-transform: uppercase;
  color: var(--emerald-deep);
}
.section.dark .eyebrow { color: var(--lime); }
.eyebrow.apricot { color: #C77A45; }
.section.dark .eyebrow.apricot { color: var(--apricot); }

.section-head { max-width: 42ch; margin-bottom: clamp(20px, 3.5vw, 36px); }
.section-head h2 { font-size: var(--fs-h2); font-weight: 700; margin-top: 10px; }
.section-head p { margin-top: 10px; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.5; max-width: 60ch; }
.section.dark .section-head p { color: var(--paper-ink-soft); }

.grad-text {
  background: linear-gradient(100deg, var(--emerald) 0%, var(--lime) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --btn-h: 42px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.25s ease, background 0.2s ease;
  text-align: center;
  line-height: 1.15;
}
/* Touch devices keep a ≥44px effective target even with the compact visuals */
@media (pointer: coarse) {
  .btn, .capture-submit, .os-chip, .nav-cta { min-height: 44px; }
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  color: #04120B;
  background: linear-gradient(180deg, #2ee0a0 0%, var(--emerald) 55%, var(--emerald-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--glow-emerald);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 24px 70px -16px rgba(18,185,129,0.6); }
/* Sweep of light across the primary on hover */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.34) 50%, transparent 66%);
  transform: translateX(-130%);
  pointer-events: none;
}
@media (hover: hover) {
  .btn-primary:hover::after { animation: btnShine 1.05s cubic-bezier(0.22, 1, 0.36, 1); }
}
@keyframes btnShine { to { transform: translateX(130%); } }

.btn-secondary {
  color: var(--ink);
  background: var(--glass-light);
  border-color: var(--hair-light);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: #fff; }
.on-dark .btn-secondary, .section.dark .btn-secondary {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-color: var(--hair-dark);
}
.on-dark .btn-secondary:hover, .section.dark .btn-secondary:hover { background: rgba(255,255,255,0.14); }

.btn-block { width: 100%; }

/* ==========================================================================
   Aurora / mesh background (dark sections)
   ========================================================================== */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  /* faint violet wash top-left for hue variety */
  background: radial-gradient(52% 55% at 12% 6%, rgba(109, 90, 230, 0.20) 0%, transparent 60%);
}
.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(78px);
  mix-blend-mode: screen;
  will-change: transform;
}
.aurora::before {
  width: 62vw; height: 62vw;
  max-width: 740px; max-height: 740px;
  top: -18%; left: -10%;
  background: radial-gradient(circle at center, var(--emerald) 0%, transparent 68%);
  opacity: 0.62;
  animation: drift1 22s ease-in-out infinite alternate;
}
.aurora::after {
  width: 56vw; height: 56vw;
  max-width: 660px; max-height: 660px;
  bottom: -22%; right: -12%;
  background: radial-gradient(circle at center, var(--teal) 0%, transparent 66%);
  opacity: 0.5;
  animation: drift2 26s ease-in-out infinite alternate;
}
.aurora .blob-lime {
  position: absolute;
  width: 40vw; height: 40vw;
  max-width: 480px; max-height: 480px;
  top: 30%; left: 40%;
  background: radial-gradient(circle at center, rgba(182,240,74,0.55) 0%, transparent 64%);
  filter: blur(80px);
  mix-blend-mode: screen;
  opacity: 0.5;
  border-radius: 50%;
  animation: drift3 30s ease-in-out infinite alternate;
}
.aurora .blob-apricot {
  position: absolute;
  width: 26vw; height: 26vw;
  max-width: 320px; max-height: 320px;
  top: 6%; right: 16%;
  background: radial-gradient(circle at center, rgba(255,178,122,0.45) 0%, transparent 66%);
  filter: blur(80px);
  mix-blend-mode: screen;
  opacity: 0.42;
  border-radius: 50%;
  animation: drift1 28s ease-in-out infinite alternate-reverse;
}

/* subtle grain */
.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes drift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6%, 8%, 0) scale(1.12); } }
@keyframes drift2 { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-7%, -6%, 0) scale(1); } }
@keyframes drift3 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-10%, 4%, 0) scale(1.15); } }

.dark .wrap, .hero .wrap { position: relative; z-index: 2; }

/* ==========================================================================
   Nav
   Transparent over the dark hero (white links) → cross-fades to a solid
   frosted-LIGHT bar with dark text once you scroll past the hero. AA in both
   states. Two pseudo-layers cross-fade on .scrolled so the swap is smooth,
   not a jarring background change.
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);   /* clear the notch on iOS */
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
/* Layer A — faint top scrim: guarantees white-link contrast if a bright aurora
   blob drifts under the transparent bar while scrolling the hero. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom, rgba(4,10,7,0.55), rgba(4,10,7,0));
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
/* Layer B — the frosted-light bar, faded in on scroll */
.nav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(246, 250, 246, 0.82);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 6px 24px -14px rgba(8,19,14,0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.nav .wrap {
  position: relative;
  z-index: 1;                       /* content above both pseudo-layers */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--nav-h);
  transition: min-height 0.3s ease;
}
.nav.scrolled { border-bottom-color: var(--hair-light); }
.nav.scrolled::before { opacity: 0; }
.nav.scrolled::after  { opacity: 1; }
.nav.scrolled .wrap { min-height: 56px; }
/* Frosted fallback where backdrop-filter is unsupported → solid paper */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav::after { background: #F6FAF6; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: -0.02em;
  flex: none;
  transition: color 0.3s ease;
}
.brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: var(--shadow-sm); flex: none; }
.brand span.wordmark { white-space: nowrap; }
.nav.scrolled .brand { color: var(--ink); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  min-width: 0;
}
.nav-links a.link {
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;                  /* ≥16px nav text (NN/G) */
  line-height: 1.1;
  min-height: 44px;                 /* 44px tap target */
  display: inline-flex;
  align-items: center;
  opacity: 0.94;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
  transition: color 0.3s ease, opacity 0.2s ease;
}
.nav-links a.link:hover { opacity: 1; }
.nav.scrolled .nav-links a.link { color: var(--ink); text-shadow: none; opacity: 1; }
.nav.scrolled .nav-links a.link:hover { color: var(--emerald-deep); }
/* Hidden on mobile. Specificity (0,2,1) matches .nav-links a.link so the
   display:inline-flex there (added for the 44px tap target) can't force these
   visible; shown again at the desktop breakpoint below. */
.nav-links a.nav-desktop-only { display: none; }

/* Discreet language control — globe + native select (nav + footer) */
.lang-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  border-radius: 9px;
  border: 1px solid var(--hair-dark);
  background: transparent;
  color: #fff;
  cursor: pointer;
  flex: none;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.2s ease;
}
.lang-wrap:hover { background: rgba(255,255,255,0.07); }
.lang-wrap .globe { flex: none; opacity: 0.75; }
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 0 13px 0 0;             /* room for the chevron */
  min-height: 30px;
  cursor: pointer;
}
.lang-select:focus { outline: none; }
.lang-select option { color: var(--ink); background: #fff; }
.lang-wrap::after {
  content: "▾";
  margin-left: -12px;
  font-size: 0.55rem;
  opacity: 0.6;
  pointer-events: none;
}
.nav.scrolled .lang-wrap { color: var(--ink); border-color: var(--hair-light); }
.nav.scrolled .lang-wrap:hover { background: rgba(11,46,34,0.05); }
.footer .lang-wrap { color: var(--paper-ink); }

/* Compact text-y nav CTA (not chunky) */
.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 9px;
  border: 1px solid rgba(182, 240, 74, 0.5);
  color: var(--lime);
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: nowrap;
  flex: none;
  transition: background 0.2s ease, color 0.3s ease, border-color 0.3s ease;
}
.nav-cta:hover { background: rgba(182, 240, 74, 0.12); }
.nav.scrolled .nav-cta { color: var(--emerald-deep); border-color: rgba(18, 185, 129, 0.45); }
.nav.scrolled .nav-cta:hover { background: rgba(18, 185, 129, 0.08); }

/* very narrow phones: hide the wordmark text, keep the icon */
@media (max-width: 25em) {
  .nav .brand span.wordmark { display: none; }
  .nav-cta { padding: 4px 9px; }
  .lang-wrap { padding: 0 6px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background:
    radial-gradient(130% 115% at 72% -12%, var(--forest-lift) 0%, #0C1E16 42%, var(--forest-deep) 100%);
  color: var(--paper-ink);
  padding-block: clamp(28px, 5vw, 60px) clamp(48px, 7vw, 84px);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero-copy .eyebrow { margin-bottom: 18px; }
.hero h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;         /* display tracking, not over-tight */
  line-height: 1.08;
}
.hero .sub {
  margin-top: 14px;
  max-width: 50ch;                  /* hero sub-headline reads best ~45–55ch */
  color: var(--paper-ink);
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: 0;
}

/* ---- Inline capture bar (hero + beta): email · OS chips · submit ---- */
.capture { margin-top: 24px; max-width: 620px; min-width: 0; }
.capture-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(11, 26, 19, 0.55);
  border: 1px solid var(--hair-dark);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg), 0 0 50px -22px rgba(18, 185, 129, 0.5);
}
.capture-bar[hidden] { display: none; }  /* author display:flex must not beat [hidden] */
.capture-email {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 1rem;                  /* ≥16px → iOS never auto-zooms the field */
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 9px;
}
.capture-email::placeholder { color: rgba(180, 206, 192, 0.7); }
.capture-email:focus { outline: none; background: rgba(0, 0, 0, 0.25); }
.capture-email[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #ff8a7a; }

.os-chips { display: inline-flex; gap: 4px; flex: none; }
.os-chip {
  appearance: none;
  height: 36px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid var(--hair-dark);
  background: rgba(255, 255, 255, 0.06);
  color: var(--paper-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-caption);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.os-chip:hover { border-color: rgba(18, 185, 129, 0.5); }
.os-chip[aria-pressed="true"] {
  background: var(--lime);
  color: #123107;
  border-color: transparent;
}
/* OS-missing: pulse the chips so the fix is obvious */
.capture.os-missing .os-chip {
  border-color: var(--apricot);
  animation: chipPulse 0.65s ease 2;
}
@keyframes chipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 178, 122, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 178, 122, 0.5); }
}

.capture-submit {
  flex: none;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #2ee0a0 0%, var(--emerald) 55%, var(--emerald-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 30px -12px rgba(18, 185, 129, 0.55);
  color: #04120B;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.25s ease;
}
.capture-submit:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 14px 38px -12px rgba(18, 185, 129, 0.7); }
.capture-submit:active { transform: scale(0.98); }

/* <40em: input row on top, chips + submit share the second row */
@media (max-width: 40em) {
  .capture-bar { flex-wrap: wrap; }
  .capture-email { flex: 1 1 100%; }
  .os-chips { flex: 1; }
  .os-chip { flex: 1; }
  .capture-submit { flex: 1.5; padding: 0 10px; }
}

.capture-error {
  margin-top: 6px;
  color: #ffb3a8;
  font-size: var(--fs-caption);
  min-height: 1em;
}
.capture-success {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(18, 185, 129, 0.12);
  border: 1px solid rgba(18, 185, 129, 0.45);
  color: var(--paper-ink);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.capture-success[hidden] { display: none; }
.capture-success .check {
  flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--emerald); color: #04120B;
  font-size: 0.7rem; font-weight: 800;
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.capture-success b { color: #fff; }
.capture-success .mailto-fallback a { color: var(--lime); text-decoration: underline; }

/* Micro trust lines + de-emphasized try link under the bar */
.micro-trust {
  margin-top: 10px;
  font-size: var(--fs-caption);
  color: var(--paper-ink-soft);
}
.micro-trust + .micro-trust { margin-top: 3px; }
/* "Try in browser" promoted from a grey link to a clear co-primary secondary
   button — it's the full no-signup demo, the strongest de-risker. */
.hero-secondary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
/* Demoted to a small, discreet text link (owner: the invite form is the goal —
   browser-trial must not compete with it, just be available for the curious). */
.try-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  white-space: nowrap;
  transition: color 0.18s ease;
}
.try-cta:hover { color: rgba(255, 255, 255, 0.92); text-decoration-color: rgba(255, 255, 255, 0.6); }
.try-cta:active { opacity: 0.8; }
.try-note { font-size: var(--fs-caption); color: var(--paper-ink-soft); }

/* Staggered entrance for the hero copy */
.hero-copy > * { animation: riseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-copy > .eyebrow { animation-delay: 0.05s; }
.hero-copy > h1 { animation-delay: 0.12s; }
.hero-copy > .sub { animation-delay: 0.22s; }
.hero-copy > .capture { animation-delay: 0.30s; }
.hero-copy > .hero-secondary { animation-delay: 0.38s; }
.hero-copy > .micro-trust { animation-delay: 0.44s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Hero visual (2026-07-15, approved mockup M2-V2 "phone + plate merged"):
   ONE object — the phone showing the app's analyze view. The plate photo sits
   INSIDE the screen with the scan-line sweep over it, then the white result
   sheet: meal name, 560 kcal, four macro bars, one-tap Log button. */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
}
.analyze-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Soft emerald pool of light under the phone */
.analyze-wrap::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -6%;
  width: 150%; height: 42%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(18,185,129,0.4) 0%, transparent 70%);
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}
.analyze-phone {
  width: min(272px, 74vw);
  border-radius: 2.7rem;
  padding: 10px;
  background: #0A0F0C;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 90px -24px rgba(0,0,0,0.8), 0 0 80px -30px rgba(18,185,129,0.55), inset 0 1px 0 rgba(255,255,255,0.14);
}
.analyze-screen {
  border-radius: 2.1rem;
  overflow: hidden;
  aspect-ratio: 9 / 18.5;
  display: flex;
  flex-direction: column;
  background: #F5F6F5;
  color: #0A0A0A;
  font-family: var(--font-body);
}
/* The camera shot filling the top of the screen; --scan-dur drives the sweep */
.analyze-shot { position: relative; --scan-dur: 3.6s; }
.analyze-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 13 / 12;
  object-fit: cover;
  border-radius: 0;
}
.shot-status {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 0;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.shot-back {
  position: absolute;
  top: 34px; left: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}
/* White result sheet sliding up over the photo */
.analyze-sheet {
  position: relative;
  margin-top: -20px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 15px 16px 16px;
  box-shadow: 0 -6px 18px rgba(13,75,55,0.10);
}
.conf-pill {
  position: absolute;
  top: -13px; right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: #E1F6EF;
  color: #067A57;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid rgba(6,122,87,0.15);
  white-space: nowrap;
}
.meal-name { font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; }
.meal-kcal {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 4px;
  line-height: 1.1;
}
.meal-kcal span { font-size: 14px; font-weight: 700; color: #5B6166; }
.an-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.an-row .lab {
  flex: 0 0 auto;
  min-width: 52px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.an-row .bar {
  flex: 1;
  min-width: 40px;
  height: 5px;
  border-radius: 3px;
  background: #EDEFEE;
  overflow: hidden;
}
.an-row .bar i { display: block; height: 100%; border-radius: 3px; }
.an-row .val { flex: 0 0 auto; min-width: 32px; text-align: right; font-size: 11.5px; font-weight: 800; }
.log-btn {
  margin-top: 14px;
  text-align: center;
  padding: 12px 0;
  border-radius: 13px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, #14C08F, #0B8A68);
  box-shadow: 0 8px 16px rgba(11,138,104,0.35);
}
.analyze-caption {
  margin-top: 20px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--paper-ink-soft);
  text-align: center;
}
.analyze-caption b { color: var(--lime); font-weight: 800; }

/* Logged chip */
.logged-chip {
  position: absolute;
  z-index: 4;
  top: 8%;
  right: max(4px, 2%);
  max-width: 60%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(11, 26, 19, 0.7);
  border: 1px solid rgba(255, 178, 122, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-sm);
  box-shadow: 0 12px 30px -8px rgba(255, 178, 122, 0.4);
  opacity: 0;
  transform: translateY(10px);
  animation: chipIn 0.6s ease 1.5s forwards;
}
.logged-chip .check {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--emerald); color: #04120B; font-size: 0.7rem; font-weight: 800;
}
@keyframes chipIn { to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   Phone frame
   ========================================================================== */
.phone {
  position: relative;
  border-radius: 2.2rem;
  padding: 8px;
  background: linear-gradient(160deg, #14261c, #060d09);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-lg), 0 0 50px -18px rgba(18,185,129,0.4);
}
.phone::before {
  content: "";
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 32%; max-width: 78px; height: 7px;
  background: #05100b;
  border-radius: 999px;
  z-index: 3;
}
.phone img {
  border-radius: 1.7rem;
  width: 100%;
  display: block;
}
.phone.on-light { box-shadow: var(--shadow-md), 0 24px 50px -20px rgba(18,185,129,0.35); }

/* App-screens slider — lives in "How it works" step 3 (relocated from the
   hero, 2026-07-15). The app screenshots cross-fade on a loop. Slides stack in
   the screen; the first carries `is-active` so it shows statically with JS off. */
.app-slider { max-width: 220px; margin-inline: auto; }
.phone-screen {
  position: relative;
  aspect-ratio: 220 / 476;
  border-radius: 1.7rem;
  overflow: hidden;
}
.phone-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.7rem;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.phone-slide.is-active { opacity: 1; }

/* Dot indicators — hidden with JS off (they'd do nothing); shown once JS runs. */
.phone-dots { display: none; }
body.js .phone-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
}
.phone-dot {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(8, 19, 14, 0.18); /* on the light step card */
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.phone-dot:hover { background: rgba(8, 19, 14, 0.38); }
.phone-dot.is-active {
  background: var(--emerald);
  transform: scale(1.25);
  box-shadow: 0 0 10px rgba(18, 185, 129, 0.7);
}
@media (prefers-reduced-motion: reduce) {
  .phone-slide { transition: none; }
}

/* ==========================================================================
   How it works
   ========================================================================== */
.how-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.step-card {
  position: relative;
  padding: 20px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--hair-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
}
.step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--emerald), var(--emerald-deep));
  box-shadow: var(--glow-emerald);
  margin-bottom: 12px;
}
.step-card h3 { font-size: var(--fs-h3); font-weight: 700; }
.step-card p { margin-top: 8px; color: var(--ink-soft); max-inline-size: 60ch; }
.step-shot { margin-top: 16px; }
.step-shot .phone { max-width: 220px; margin-inline: auto; }

/* ==========================================================================
   Bento grid
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.tile {
  position: relative;
  padding: 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-dark);
  overflow: hidden;
  min-width: 0;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.tile > * { position: relative; z-index: 1; }
.tile:hover {
  transform: translateY(-6px);
  border-color: rgba(18,185,129,0.5);
  box-shadow: 0 0 0 1px rgba(18,185,129,0.35), 0 26px 60px -22px rgba(18,185,129,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
/* Emerald corner accent inside the two big tiles */
.tile-coach::before, .tile-fasting::before {
  content: "";
  position: absolute;
  width: 66%; height: 66%;
  right: -12%; top: -12%;
  background: radial-gradient(circle at center, rgba(18,185,129,0.20) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.tile h3 { font-size: var(--fs-h3); font-weight: 700; color: #fff; }
.tile p { margin-top: 8px; color: var(--paper-ink-soft); font-size: var(--fs-body); max-inline-size: 60ch; }
.tile .tile-shot { margin-top: 14px; max-width: 200px; }
.tile-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(182,240,74,0.12);
  border: 1px solid rgba(182,240,74,0.3);
  color: var(--lime);
  font-weight: 600; font-size: var(--fs-caption);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* Coach hero tile: chat mock */
.tile-coach { display: flex; flex-direction: column; }
.chat-mock {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bubble {
  max-width: 82%;
  padding: 12px 15px;
  border-radius: 18px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
}
.bubble.user {
  align-self: flex-end;
  background: linear-gradient(180deg, var(--emerald), var(--emerald-deep));
  color: #04120B;
  border-bottom-right-radius: 5px;
  font-weight: 500;
}
.bubble.coach {
  align-self: flex-start;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--hair-dark);
  color: var(--paper-ink);
  border-bottom-left-radius: 5px;
}
.coach-tagline {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--lime);
  font-size: var(--fs-body);
}

/* ==========================================================================
   Old way vs Lento
   ========================================================================== */
.versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.vs-col {
  padding: 20px;
  border-radius: var(--r-lg);
  min-width: 0;
}
.vs-old {
  background: #EFEDEB;
  border: 1px solid rgba(11,46,34,0.08);
}
.vs-new {
  background: linear-gradient(165deg, #0E9E6E, #0b7d57);
  color: #fff;
  box-shadow: var(--glow-emerald);
}
.vs-col h3 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 18px; }
.vs-old h3 { color: #6a6a66; }
.vs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.vs-list li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-body); }
.vs-list .ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; margin-top: 2px; }
.vs-old .ic { background: rgba(120,110,105,0.2); color: #7a7570; }
.vs-old li { color: #6e6863; }
.vs-new .ic { background: rgba(255,255,255,0.22); color: #fff; }

/* ==========================================================================
   Beta block — compact single column: story → capture bar → value chips
   ========================================================================== */
.beta-inner { max-width: 680px; min-width: 0; }
.beta-inner .eyebrow { margin-bottom: 12px; }
.beta-inner h2 { font-size: var(--fs-h2); font-weight: 700; }
.beta-body { margin-top: 12px; color: var(--paper-ink-soft); font-size: var(--fs-body); max-width: 60ch; }

.value-chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 22px; }
.value-chip {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hair-dark);
  min-width: 0;
  font-size: var(--fs-sm);
}
.value-chip .vc-ic { flex: none; width: 24px; height: 24px; border-radius: 8px; background: rgba(18,185,129,0.18); color: var(--lime); display: grid; place-items: center; font-weight: 800; font-family: var(--font-display); font-size: 0.8rem; }
.value-chip b { color: #fff; font-weight: 700; }
.value-chip span { color: var(--paper-ink-soft); min-width: 0; }
.beta-note { margin-top: 14px; font-size: var(--fs-sm); color: var(--paper-ink-soft); font-style: italic; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--hair-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--emerald-deep);
  transition: transform 0.25s ease;
  flex: none;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 18px 16px; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.6; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--forest-2);
  color: var(--paper-ink-soft);
  padding-block: 36px;
  border-top: 1px solid var(--hair-dark);
}
.footer .wrap { display: flex; flex-direction: column; gap: 24px; }
.footer-top { display: flex; flex-direction: column; gap: 12px; }
.footer .brand { font-size: 1.15rem; }
.footer-tag { font-size: var(--fs-sm); max-width: 40ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.footer-links a {
  font-size: var(--fs-sm);
  opacity: 0.85;
  min-height: 44px;                 /* comfortable tap target */
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.footer-links a:hover { opacity: 1; color: var(--lime); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  padding-top: 20px; border-top: 1px solid var(--hair-dark);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
/* Progressive enhancement: only hide-before-reveal when JS is running
   (body gets the .js class synchronously). Without JS the content is visible
   by default — the page is never blank. */
body.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1), filter 0.6s ease;
}
body.js .reveal.in { opacity: 1; transform: none; filter: none; }

/* ==========================================================================
   Responsive — mobile-first, em breakpoints (respect user zoom / font-size)
   40em ≈ 640px · 47.5em ≈ 760px · 56.25em ≈ 900px
   Breakpoints are content-driven (where each layout actually needs the room).
   ========================================================================== */

/* Tablet / large-phone: 3-up cards, 2-up lists ---------------------------- */
@media (min-width: 40em) {
  .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .value-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .versus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Inline the primary nav links once there's room for them ------------------ */
@media (min-width: 47.5em) {
  .nav-links a.nav-desktop-only { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Desktop: 2-col hero, and the varied bento ------------------------------- */
@media (min-width: 56.25em) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }

  /* Bento layout — varied spans */
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(180px, auto);
    gap: 20px;
  }
  .tile-coach { grid-column: span 2; grid-row: span 2; }
  .tile-metabolic { grid-column: span 2; }
  .tile-goals { grid-column: span 2; }
  .tile-fasting { grid-column: span 2; grid-row: span 2; }
  .tile-health { grid-column: span 2; }
  .tile-library { grid-column: span 2; }
  .tile-review { grid-column: span 2; }
  .tile-micros { grid-column: span 2; }
}

/* ==========================================================================
   Reduced motion — freeze everything
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .aurora::before, .aurora::after, .aurora .blob-lime, .aurora .blob-apricot { animation: none !important; }
  .logged-chip { animation: none !important; opacity: 1; transform: none; }
  .hero-copy > * { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .tile:hover { transform: none; }
}

/* ----------------------------------------------------------------------------
   Legal pages (terms / privacy / delete-account). These had NO styling, so the
   default dark ink text landed on the dark forest body and was unreadable
   (Marius, 2026-07-13: "terms si policy nu se vad bine"). Give them a readable
   light-on-dark document layout with a comfortable reading column.
---------------------------------------------------------------------------- */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 132px 22px 96px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 16px;
  line-height: 1.72;
}
.legal .back {
  display: inline-block;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
  font-weight: 600;
}
.legal .back:hover { color: #fff; }
.legal h1 {
  margin: 0 0 6px;
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.02em;
}
.legal h2 {
  margin: 34px 0 10px;
  font-size: 20px;
  color: #fff;
  letter-spacing: -0.01em;
}
.legal h3 { margin: 22px 0 8px; font-size: 17px; color: #fff; }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin: 5px 0; }
.legal strong { color: #fff; font-weight: 700; }
.legal a { color: var(--emerald); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--lime); }
.legal .updated {
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14.5px; }
.legal th, .legal td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  vertical-align: top;
}
.legal th { color: #fff; font-weight: 700; }

/* Onboarding "scan-meal" effect (mirrors FrontDoorScreen.tsx): a bright emerald
   line with a soft glow trail sweeps top→bottom over the plate photo inside
   the hero phone's screen (.analyze-shot, which sets --scan-dur). GPU-friendly:
   transform + opacity only. The sweep layer spans the full shot; its bright
   edge (::after) rides the BOTTOM, so translateY(-100%→0%) moves the line from
   the top to the bottom. */
.scan-bar {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  background: linear-gradient(to bottom, transparent 62%, rgba(18,185,129,.22) 100%);
  opacity: 0;
  will-change: transform, opacity;
  animation: scanSweep var(--scan-dur) cubic-bezier(.45,0,.15,1) infinite;
}
.scan-bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #14F0B0, var(--lime), #14F0B0, transparent);
  box-shadow: 0 0 16px 3px rgba(20,240,176,.7), 0 0 42px 10px rgba(18,185,129,.32);
}
@keyframes scanSweep {
  0%   { transform: translateY(-100%); opacity: 0; }
  6%   { opacity: 1; }
  36%  { transform: translateY(0%); opacity: 1; }
  44%  { transform: translateY(0%); opacity: 0; }
  100% { transform: translateY(0%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-bar { animation: none; display: none; }
}

/* Mobile hero (2026-07-15): the single analyze phone, centered, nothing else
   floating and nothing clipped. */
@media (max-width: 47.9375em) {
  .analyze-phone { width: min(232px, 70vw); }
  .analyze-screen { aspect-ratio: auto; }
  .analyze-caption { margin-top: 18px; }
}

/* Discrete share buttons (footer). */
.share-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.share-label { font-size: var(--fs-caption); color: var(--paper-ink-soft); letter-spacing: .02em; }
.share-btns { display: inline-flex; gap: 8px; }
.share-btn {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--hair-dark);
  color: var(--paper-ink); cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
.share-btn:hover { background: rgba(18,185,129,.14); color: #fff; border-color: rgba(18,185,129,.45); }
.share-btn:active { transform: scale(.94); }
.share-btn.copied { color: var(--emerald); border-color: rgba(18,185,129,.6); }

/* ==========================================================================
   Mobile nav — hamburger toggle + dropdown menu (2026-07-14)
   The desktop anchor links are display:none under 760px; this gives them back.
   ========================================================================== */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--hair-dark);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  flex: none;
  transition: background 0.2s ease, border-color 0.3s ease, color 0.3s ease;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.nav.scrolled .nav-toggle { color: var(--ink); border-color: var(--hair-light); }
.nav-toggle-bars { position: relative; width: 18px; height: 12px; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5px; }
.nav-toggle-bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  display: flex; flex-direction: column;
  padding: 6px max(clamp(18px, 5vw, 40px), env(safe-area-inset-left)) 12px;
  background: rgba(246, 250, 246, 0.97);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--hair-light);
  box-shadow: 0 22px 44px -22px rgba(8, 19, 14, 0.55);
  z-index: 90;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-menu { background: #F6FAF6; }
}
.mobile-menu[hidden] { display: none; }
.mm-link {
  display: flex; align-items: center;
  min-height: 48px; padding: 0 6px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body);
  color: var(--ink);
  border-bottom: 1px solid var(--hair-light);
  transition: color 0.2s ease;
}
.mm-link:last-child { border-bottom: 0; }
.mm-link:hover { color: var(--emerald-deep); }

/* Desktop: the inline links return, so the hamburger + dropdown disappear. */
@media (min-width: 47.5em) {
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* ==========================================================================
   Closing CTA (dark) — the final "here's the ask" moment before the footer.
   ========================================================================== */
.final-cta { text-align: center; }
.final-inner { max-width: 640px; margin-inline: auto; min-width: 0; }
.final-inner h2 { font-size: var(--fs-h2); font-weight: 700; }
.final-sub {
  margin-top: 12px;
  color: var(--paper-ink-soft);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.final-cta .capture { margin-inline: auto; margin-top: 24px; }
.final-secondary { justify-content: center; margin-top: 16px; }
.final-trust { text-align: center; margin-top: 12px; }

/* ==========================================================================
   Sticky mobile CTA bar — appears after the hero scrolls away (JS adds
   .visible). Small screens only; slides off-screen otherwise, so no-JS never
   shows a stuck bar.
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: none;
  gap: 10px;
  align-items: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(8, 19, 14, 0.88);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid var(--hair-dark);
  transform: translateY(115%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sticky-cta { background: #0B1A13; }
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta-try {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 14px;
  color: #fff; font-weight: 700; font-size: var(--fs-sm);
  border: 1px solid var(--hair-dark); border-radius: 11px;
  white-space: nowrap;
}
.sticky-cta-try:hover { background: rgba(255, 255, 255, 0.07); }
.sticky-cta-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2ee0a0 0%, var(--emerald) 55%, var(--emerald-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 30px -12px rgba(18, 185, 129, 0.6);
  color: #04120B; font-weight: 700; font-size: var(--fs-sm);
  white-space: nowrap;
}
.sticky-cta-btn:active { transform: scale(0.98); }

@media (max-width: 47.4375em) {
  .sticky-cta { display: flex; }
  /* leave room so the fixed bar never covers the last footer content */
  .footer { padding-bottom: 96px; }
}

/* ==========================================================================
   Language nudge (2026-07-16)
   A slim bar above the hero, shown only when the browser's language list
   disagrees with what we served (see langNudge() in index.html). It sits at
   the very TOP of <body>, static — so it is unmissable at the landing moment,
   the only moment it matters, and then scrolls away for good instead of
   permanently eating a strip of a phone screen. The forest ground lets it
   read as the top edge of the hero rather than a banner bolted on.
   ========================================================================== */
.lang-nudge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--forest-deep);
  border-bottom: 1px solid rgba(18, 185, 129, 0.22);
  color: var(--paper-ink);
  font-size: 0.9rem;
  line-height: 1.35;
  /* Fades in after mount so it never flashes during first paint. */
  opacity: 0;
  transition: opacity 0.35s ease;
}
.lang-nudge.in { opacity: 1; }
.lang-nudge-text { opacity: 0.85; }
.lang-nudge-cta {
  border: 0;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--emerald);
  color: #04120C;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.lang-nudge-cta:hover { background: var(--lime); }
.lang-nudge-close {
  border: 0;
  cursor: pointer;
  background: none;
  color: var(--paper-ink);
  opacity: 0.55;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 6px 8px;
  transition: opacity 0.2s ease;
}
.lang-nudge-close:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lang-nudge { transition: none; opacity: 1; }
}