/* WellSavvy landing — single stylesheet.
   Brand rules (HARD): branded colors only (app palette); text/icons/illustrations
   solid navy (#0F183F) on light surfaces, cream (#FFFAEE) on dark/saturated ones;
   cards = filled no-outline OR dashed-outline no-fill, 30px radius; thin 1.5px
   lines; 8px grid; NO shadows; soft brand gradients used deliberately (the hero
   — photo-ready —, the angled screen-showcase band, and the FAQ→footer mint
   fade), each blending solid app-palette colors only; one button style. Bolder
   accent blocks use solid app-palette colors; the coloured feature bento + the
   navy "never" block are the saturated statements; the footer is a calm mint band.
   ONE approved exception to navy-only illustrations: the nutrient-engine "tanks"
   use the app's nutrient-status colors (--stat-* tokens) because the app colors
   nutrient status with exactly these. */

@layer reset, tokens, base, layout, components, utilities;

/* ─────────────────── cross-document view transitions ─────────────────── */
/* Opt every same-origin page navigation into a smooth cross-fade. The named
   groups below let the green nav capsule (.topnav__seg.is-active) + its outline
   (.topnav) glide from page to page instead of the old beige-then-green flash
   when switching "overview" ↔ "a closer look". Unsupported browsers (Firefox)
   fall back to a normal instant navigation. Kept OUTSIDE @layer on purpose so it
   isn't subject to layer ordering. */
@view-transition { navigation: auto; }

::view-transition-group(topnav-pill),
::view-transition-group(topnav) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* The base @media(reduce) block zeroes *, *::before, *::after — which does NOT
   match the ::view-transition-* pseudos, so guard them explicitly here. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ───────────────────────── reset ───────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, picture, svg { display: block; max-width: 100%; }
  input, button { font: inherit; }
  body { -webkit-font-smoothing: antialiased; }
}

/* ───────────────────────── tokens ───────────────────────── */
@layer tokens {
  :root {
    /* color — verified app palette */
    --navy: #0F183F;
    --navy-soft: #4C5165;
    --cream: #FFFAEE;
    --cream-card: #F7EFDB;
    --cream-bright: #FFFCF6;
    --cream-deep: #E8DFC5;
    --green: #A3B48D;
    --green-pale: #D8E2CB;
    --green-lime: #D2D692;
    --green-deep: #7E9478;
    --blue-deep: #6D79B6;
    --gray-subtle: #D9D9D9;

    /* accent colors — verbatim app AppColors values (no invented tints) */
    --accent-yellow: #EDD27C;
    --accent-blue: #8A9BCA;
    --accent-lavender: #B39DDB;
    --accent-lavender-light: #D1C4E9;
    --accent-orange: #E2A770;
    --accent-coral: #D4736A;

    /* nutrient-status scale (app AppColors) — used ONLY by the engine's
       "tanks": low=blue, balanced=beige, building=orange, over-limit=coral.
       Deliberate, approved exception to the navy-only illustration rule —
       these echo exactly how the app colors nutrient status. */
    --stat-low: var(--accent-blue);
    --stat-balanced: #E8E4DA;
    --stat-building: var(--accent-orange);
    --stat-over: var(--accent-coral);

    /* semantic */
    --bg: var(--cream);
    --ink: var(--navy);

    /* 8px grid */
    --s-05: 4px;  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;
    --s-4: 32px;  --s-5: 40px;  --s-6: 48px;  --s-8: 64px;
    --s-10: 80px; --s-12: 96px; --s-15: 120px; --s-20: 160px;

    /* shape */
    --r-card: 30px;
    --r-pill: 50px;
    --control-h: 56px;
    --line: 1.5px;

    /* type */
    --f-sans: "Averta PE", system-ui, -apple-system, sans-serif;
    --f-hand: "The Secret Things", "Averta PE", cursive;
    --fs-h1: clamp(1.875rem, 3.6vw + 0.5rem, 3rem);
    --fs-h2: clamp(1.5rem, 2.8vw + 0.5rem, 2.125rem);
    --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --fs-small: 0.9375rem;
    --measure: 42rem;
    --shell: 1140px;
  }
}

/* ───────────────────────── base ───────────────────────── */
@layer base {
  @font-face {
    font-family: "Averta PE";
    src: url("/assets/fonts/AvertaPE-Light.woff2") format("woff2");
    font-weight: 300; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "Averta PE";
    src: url("/assets/fonts/AvertaPE-Regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "Averta PE";
    src: url("/assets/fonts/AvertaPE-Semibold.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
  }
  /* Handwriting accent — used sparingly (hero accent word + footer signature). */
  @font-face {
    font-family: "The Secret Things";
    src: url("/assets/fonts/thesecretthings-webfont.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
  }

  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-sans);
    font-weight: 300;
    font-size: var(--fs-body);
    line-height: 1.65;
  }
  h1, h2, h3 {
    font-weight: 600;
    line-height: 1.18;
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: 1.125rem; }
  a { color: var(--ink); }
  em { font-style: italic; }
  strong { font-weight: 600; }

  :focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .on-dark :focus-visible { outline-color: var(--cream); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
}

/* ───────────────────────── layout ───────────────────────── */
@layer layout {
  .wrap {
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--s-3);
  }
  .prose { max-width: var(--measure); margin-inline: auto; }

  /* Full-bleed color bands */
  .band--card     { background: var(--cream-card); }
  .band--green    { background: var(--green-pale); }
  .band--lime     { background: var(--green-lime); }
  .band--lavender { background: var(--accent-lavender-light); }
  .band--blue     { background: var(--accent-blue); }
  .band--sage     { background: var(--green); }
  .band--deep     { background: var(--cream-deep); }
  .band--navy     { background: var(--navy); color: var(--cream); }

  /* Editorial aside layout (blocks 2 · 4 · 8): illustration + heading pinned
     to the right, the body content pinned to the left. Same .wrap gutters on
     every block — only the inner max-width/justification differs. */
  .aside__head { max-width: 40rem; }
  /* inline-block so the head's text-align controls the illustration too
     (right on desktop, left on mobile) — avoids logical/physical margin clash */
  .aside__head .illus { display: inline-block; margin: 0 0 var(--s-3); }
  .aside__head h2 { margin: 0; }
  .aside__body { max-width: 44rem; margin-top: var(--s-6); }
  @media (min-width: 768px) {
    .aside__head { margin-left: auto; text-align: right; }
    .aside__body { margin-right: auto; margin-top: var(--s-8); }
  }

  /* Split head (blocks 2 & 8): heading left + illustration right on ONE line,
     with the body content in a centered column below. */
  .split-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
  }
  .split-head h2 { margin: 0; text-align: left; flex: 1 1 auto; }
  .split-head .illus { flex: 0 0 auto; margin: 0; width: 84px; height: auto; }
  .center-body { max-width: 44rem; margin: var(--s-10) auto 0; }
  @media (min-width: 768px) {
    .split-head { gap: var(--s-8); }
    .split-head .illus { width: 112px; }
    .center-body { margin-top: var(--s-12); }
  }

  /* Consistent vertical rhythm — every band shares the same padding pair. */
  .see-you, .features, .never, .founders, .join-why, .benefits, .cta-2, .faq {
    padding-block: var(--s-12);
  }
  /* join-why flows straight into the cream perks below — trim the gap between them */
  .join-why { padding-bottom: var(--s-6); }
  .hero-region { padding-block: var(--s-10); }

  @media (min-width: 960px) {
    .see-you, .features, .never, .join-why, .benefits, .cta-2, .faq {
      padding-block: var(--s-15);
    }
    .join-why { padding-bottom: var(--s-8); }
    .hero-region { padding-block: var(--s-8); }
  }

  /* ════ Decorative edge-bleed background illustrations ════
     Big food silhouettes (app/assets/images/solid illustrations) recoloured to a
     flat brand tint via mask-image — one source SVG, any colour, no per-colour
     files — bleeding off the screen edge BEHIND all content. Reuses the hero's
     position:relative + overflow:hidden + z-index:-1 layer trick. Placement is
     per-breakpoint and intentionally asymmetric: features = web-only,
     founders = mobile-only (see the plan's deco table). */
  .see-you, .features, .never, .join-zone {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  /* join-why + benefits share ONE clip zone so the tomato can span both sections */
  /* Big silhouettes that ALWAYS cross a screen edge: pin to the edge (edge:0) and
     push out with translate so a large slice sits off-screen behind the border. */
  .deco {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: clamp(840px, 92vw, 1320px);
    height: clamp(840px, 92vw, 1320px);
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
            mask-repeat: no-repeat;         mask-position: center;         mask-size: contain;
  }
  .deco--hero {              /* table, green-pale D8E2CB (everywhere) — web: left part of screen */
    background-color: var(--green-pale);
    -webkit-mask-image: url(/assets/img/deco/table.svg);
            mask-image: url(/assets/img/deco/table.svg);
    width: clamp(680px, 72vw, 1040px); height: clamp(680px, 72vw, 1040px);
    left: 0; top: 14px; transform: translateX(-40%);   /* lower still; a little to the left */
  }
  .deco--seeyou {             /* web: hidden — mobile-only (leaf, D2D692) */
    display: none;
    background-color: var(--green-lime);
    -webkit-mask-image: url(/assets/img/deco/leaf.svg);
            mask-image: url(/assets/img/deco/leaf.svg);
    right: 0; top: var(--s-2); transform: translateX(44%);
  }
  .deco--features {           /* leaf, green-lime — ON TOP of the beige cards */
    background-color: var(--green-lime);
    -webkit-mask-image: url(/assets/img/deco/leaf.svg);
            mask-image: url(/assets/img/deco/leaf.svg);
    width: clamp(460px, 48vw, 700px); height: clamp(460px, 48vw, 700px);
    right: 0; top: calc(-1 * var(--s-6)); transform: translateX(32%);
    z-index: 1;   /* sits over the cards where it overlaps, not behind — kept clear of the first card's arrow */
  }
  .deco--never {
    background-color: var(--blue-deep);
    -webkit-mask-image: url(/assets/img/deco/pepper.svg);
            mask-image: url(/assets/img/deco/pepper.svg);
    width: clamp(600px, 64vw, 920px); height: clamp(600px, 64vw, 920px);
    left: 0; top: var(--s-15); transform: translateX(-28%);   /* down + right, intersecting the dashed card border */
  }
  .deco--join {              /* tomato, green-lime — spans join-why + benefits (zone) */
    background-color: var(--green-lime);
    -webkit-mask-image: url(/assets/img/deco/tomato.svg);
            mask-image: url(/assets/img/deco/tomato.svg);
    width: clamp(540px, 56vw, 800px); height: clamp(540px, 56vw, 800px);
    left: 0; top: calc(-1 * var(--s-8)); transform: translateX(-44%);   /* smaller; bottom spills into benefits */
  }
  @media (max-width: 639px) {
    .deco { width: clamp(600px, 164vw, 760px); height: clamp(600px, 164vw, 760px); }
    .deco--hero     { width: clamp(600px, 162vw, 760px); height: clamp(600px, 162vw, 760px);
                      left: auto; right: 0; top: -37px; transform: translateX(53%); }   /* on mobile too; noticeably-but-modestly smaller (~18% off the web-proportioned size) */
    .deco--seeyou   { display: block; left: auto; right: 0; width: clamp(420px, 112vw, 520px); height: clamp(420px, 112vw, 520px);
                      top: calc(-1 * var(--s-6)); transform: translateX(40%); }   /* a little to the left */
    .deco--features { display: none; }            /* web-only */
    .deco--never    { left: auto; right: 0; width: clamp(520px, 140vw, 680px); height: clamp(520px, 140vw, 680px);
                      top: calc(-1 * var(--s-15) - var(--s-2)); transform: translateX(40%); }  /* pepper; a little up (between the last two) */
    .deco--join     { width: clamp(380px, 104vw, 480px); height: clamp(380px, 104vw, 480px);
                      left: auto; right: 0; top: calc(-1 * var(--s-8)); transform: translateX(44%); }  /* a little higher */
  }
}

/* ───────────────────────── components ───────────────────────── */
@layer components {

  /* — the one button style (matches app primary button) — */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-h);
    padding-inline: var(--s-4);
    background: var(--green);
    color: var(--navy);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease;
  }
  .btn:hover { outline: var(--line) solid var(--navy); outline-offset: 0; transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn[disabled] { cursor: default; transform: none; outline: none; }

  /* secondary/ghost button — transparent with a thin navy outline (mirrors the
     welcome email's .btn2). Used for the "read along" newsletter opt-in so the
     green .btn stays the clear primary. */
  .btn--ghost {
    background: transparent;
    border: 1px solid var(--navy);
    font-weight: 400;
  }
  .btn--ghost:hover { outline: none; background: var(--cream-deep); }

  /* — inputs: transparent, thin solid navy outline — */
  .waitlist__input {
    height: var(--control-h);
    width: 100%;
    padding-inline: var(--s-3);
    background: transparent;
    color: var(--navy);
    border: var(--line) solid var(--navy);
    border-radius: var(--r-pill);
  }
  .waitlist__input::placeholder { color: var(--navy-soft); opacity: 1; }

  .waitlist { margin-top: var(--s-4); }
  .waitlist__row {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
  }
  @media (min-width: 640px) {
    .waitlist__row { flex-direction: row; }
    .waitlist__input { flex: 1; }
  }
  .waitlist__msg { margin-top: var(--s-1); font-size: var(--fs-small); font-weight: 400; min-height: 1.2em; }
  .waitlist__msg:empty { margin-top: 0; min-height: 0; }

  /* honeypot: off-screen, not display:none (bots skip display:none) */
  .hp {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
  }

  /* — dark form variant (cream on dark/saturated surfaces) — */
  .waitlist--dark .waitlist__input {
    border-color: var(--cream);
    color: var(--cream);
  }
  .waitlist--dark .waitlist__input::placeholder { color: var(--cream); opacity: 1; }
  .waitlist--dark .waitlist__msg { color: var(--cream); }

  /* — cards: filled no-outline — */
  .card {
    background: var(--cream-card);
    border-radius: var(--r-card);
    padding: var(--s-3);
  }
  @media (min-width: 640px) { .card { padding: var(--s-4); } }

  /* — dashed card: 2px round dots / round-rect, like the app's DashedBorderContainer — */
  .card--dashed {
    background: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect style='x:1.5px;y:1.5px;width:calc(100%25 - 3px);height:calc(100%25 - 3px)' rx='30' fill='none' stroke='%230F183F' stroke-width='2' stroke-linecap='round' stroke-dasharray='0.1 5'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    padding: var(--s-5);
  }
  @media (min-width: 640px) { .card--dashed { padding: var(--s-6); } }
  /* cream-dashed variant for the navy "never" block */
  .card--dashed-cream {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect style='x:1.5px;y:1.5px;width:calc(100%25 - 3px);height:calc(100%25 - 3px)' rx='30' fill='none' stroke='%23FFFAEE' stroke-width='2' stroke-linecap='round' stroke-dasharray='0.1 5'/%3E%3C/svg%3E");
  }

  /* — image placeholder (stands in for a photo until it arrives) — */
  .img-ph {
    display: grid;
    place-items: center;
    background: var(--cream);
    border: var(--line) solid var(--navy);
    border-radius: var(--r-card);
    color: var(--navy-soft);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.04em;
  }

  /* — phone frame: thin navy outline, no shadow, no 3D — */
  .phone {
    border: var(--line) solid var(--navy);
    border-radius: 40px;
    padding: 10px;
    background: var(--cream-bright);
    width: min(72vw, 280px);
    margin-inline: auto;
  }
  .phone img { border-radius: 30px; width: 100%; height: auto; }

  /* — captioned phone: frame wraps only the screen, caption sits below it — */
  .phone--captioned {
    border: none;
    padding: 0;
    background: none;
    display: flex;
    flex-direction: column;
  }
  .phone--captioned picture {
    display: block;
    border: var(--line) solid var(--navy);
    border-radius: 34px;
    padding: 6px;
    background: var(--cream-bright);
  }
  .phone__cap {
    margin-top: var(--s-2);
    text-align: center;
    font-weight: 300;
    font-size: 0.9375rem;
    color: var(--navy);
  }

  /* — hand-drawn underlines (assets from the app): sit close under the word
       and span its full width — */
  .u {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: left bottom 0.12em;
    background-size: 100% 0.15em;
    padding-bottom: 0.04em;
    margin-bottom: -0.04em;
  }
  .u--1 { background-image: url("/assets/img/underline-1.svg"); }
  .u--2 { background-image: url("/assets/img/underline-2.svg"); }
  /* u--3 sits a touch higher so it hugs the words it underlines */
  .u--3 { background-image: url("/assets/img/underline-3.svg"); background-position: left bottom 0.16em; }
  /* nudge an underline up closer to its word */
  .u--close { background-position: left bottom 0.12em; }
  /* nudge an underline down, lower under its word */
  .u--down { background-position: left bottom 0.02em; }
  /* a touch lower than the default, but still close to the word */
  .u--mid { background-position: left bottom 0.07em; }

  /* — handwriting accent — */
  .hand {
    font-family: var(--f-hand);
    font-weight: 400;
  }

  /* — illustrations (navy line art) — */
  .illus { margin-inline: auto; }

  /* — bare hand-drawn icon (no badge) — */
  .ico { flex: none; width: 30px; height: 30px; }

  /* ════ Header + Hero region (the single expressive gradient) ════ */
  .hero-region {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  /* Swappable background layer: replace this CSS gradient with a
     <picture>/<img> filling .hero__bg to drop in an editorial photo later. */
  /* Gradient blends solid brand colors only — no alpha. */
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(135% 125% at 14% 2%,
      var(--green-lime) 0%,
      var(--green-pale) 26%,
      var(--cream-bright) 56%,
      var(--cream) 84%,
      var(--green-lime) 114%);
  }
  /* Web hero gradient: soft green-pale up top (sets off the lime table illustration),
     lime in the outer corner (mobile keeps the lime top). */
  @media (min-width: 640px) {
    .hero__bg {
      background: radial-gradient(135% 125% at 14% 2%,
        var(--green-pale) 0%,
        var(--green-pale) 26%,
        var(--cream-bright) 56%,
        var(--cream) 84%,
        var(--green-lime) 114%);
    }
  }
  /* Header is centered. */
  .hero__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-8);
  }
  .hero__logo { height: 36px; width: auto; }

  /* When the bar also holds the top-nav toggle: stack on mobile (logo centred,
     toggle below — they don't fit on one line at 390px), then go inline on web
     with the logo left and the toggle in the top-right corner. */
  .hero__bar:has(.topnav) {
    flex-direction: column;
    gap: var(--s-3);
  }
  @media (min-width: 640px) {
    .hero__bar:has(.topnav) {
      flex-direction: row;
      justify-content: space-between;
      gap: var(--s-3);
    }
  }
  /* Home hero (not the features header — it has no mockup): the bar mirrors
     .hero__main's grid so the toggle sits in the phone column, stretched to
     the phone's width — its edges line up with the mockup frame below. */
  @media (min-width: 860px) {
    .hero-region:not(.feat-hero) .hero__bar:has(.topnav) {
      display: grid;
      grid-template-columns: 1fr minmax(220px, 280px);
      gap: var(--s-10);
    }
    .hero-region:not(.feat-hero) .topnav {
      width: 100%;
      max-width: 270px;      /* = .hero__phone max-width */
      justify-self: center;  /* centered in the column, like the phone */
    }
    .hero-region:not(.feat-hero) .topnav__seg { flex: 1 1 0; justify-content: center; }
  }

  /* top nav — a two-segment pill toggle to switch between the main page
     ("overview") and the features page ("a closer look"). Sits in the header
     bar (top-right on web); the current page's segment is filled, the other is
     an outline. Two short labels, so no hamburger is needed on mobile. */
  .topnav {
    display: flex;
    width: fit-content;
    margin: 0;
    padding: var(--s-05);
    border: var(--line) solid var(--navy);
    border-radius: var(--r-pill);
    background: transparent;
    view-transition-name: topnav;   /* outline glides between pages (unique per page) */
  }
  .topnav__seg {
    display: inline-flex;
    align-items: center;
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-pill);
    color: var(--navy);
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
  }
  /* No background fill on hover — the sliding green capsule is the feedback now;
     hint the target with a green text tint only (no beige pre-fill). */
  .topnav__seg:not(.is-active):hover { color: var(--green-deep); }
  .topnav__seg.is-active {
    background: var(--green);
    font-weight: 600;
    view-transition-name: topnav-pill;   /* the capsule that slides (unique per page) */
  }
  .h1-tail { display: block; }
  .hero__copy { max-width: 46rem; margin-inline: auto; text-align: center; }
  .hero__illus { width: 46px; height: auto; margin: var(--s-4) auto var(--s-5); }
  .hero__sub { margin-top: 0; max-width: 40rem; margin-inline: auto; }
  .sub-lead {
    display: block;
    font-weight: 400;
    margin-bottom: var(--s-2);
  }
  .sub-tail {
    display: inline;
    font-size: 1.7em;
    line-height: 1.12;
  }
  /* web: "And keep it in balance, your way." sits on its own second line */
  @media (min-width: 640px) { .sub-s2 { display: block; } }
  .hero-region .waitlist { margin-top: var(--s-6); }
  /* web: opaque fill so the table silhouette passes BEHIND the field, not
     through it — the exact gradient shade behind the field, sampled at 1440px
     (between the cream-bright 56% and cream 84% stops). Mobile stays unfilled. */
  @media (min-width: 640px) {
    .hero-region .waitlist__input { background: #FFFBF3; }
  }
  /* after joining, the success line replaces the form — give it a bigger lead-in */
  .hero-region .signup-success { margin-top: var(--s-8); }
  /* keep it to two lines so "something worth seeing." sits on its own line */
  .hero-region .signup-success__line { max-width: 26rem; }
  .microline {
    margin-top: var(--s-2);
    font-size: var(--fs-small);
    font-weight: 300;
  }
  .microline-tail { display: block; }
  .h2-tail { display: block; }
  /* smaller hero heading + subtext on phones */
  @media (max-width: 600px) {
    .hero-region h1 { font-size: 1.5rem; line-height: 1.25; }
    .hero__sub { font-size: 0.9375rem; }
  }
  @media (min-width: 960px) {
    .hero__logo { height: 40px; }
  }

  /* — flagship phone: mobile stacks it below the centered copy; web (≥860px)
       puts copy left / phone right. Gradient stays the backdrop either way. — */
  .hero__visual {
    margin-top: var(--s-10);
    display: flex;
    justify-content: center;
  }
  .hero__phone {
    border: var(--line) solid var(--navy);
    border-radius: 40px;
    padding: 10px;
    background: var(--cream-bright);
    width: min(62vw, 230px);
  }
  .hero__phone img { display: block; border-radius: 30px; width: 100%; height: auto; }
  @media (min-width: 640px) { .hero__phone { width: 250px; } }

  /* web: logo stays centered up top; below it two columns — text left, mockup right */
  @media (min-width: 860px) {
    .hero__main {
      display: grid;
      grid-template-columns: 1fr minmax(220px, 280px);
      gap: var(--s-10);
      align-items: stretch;
    }
    /* the whole copy block is vertically centered so its middle lines up with the
       mockup's middle; a generous gap sits under the heading */
    .hero__copy { max-width: 42rem; margin-inline: 0; text-align: left; display: flex; flex-direction: column; justify-content: center; }
    /* gentler heading size so the clause + "your body." stays two lines across web */
    .hero-region h1 { font-size: clamp(2rem, 2.2vw + 0.8rem, 2.75rem); }
    .hero__illus { margin: var(--s-8) 0 var(--s-3); }   /* bigger gap under the heading → heading sits a little higher (centered column) */
    .hero__sub { margin-inline: 0; }
    .hero__visual { margin-top: 0; align-items: flex-start; }
    .hero__phone { width: 100%; max-width: 270px; }
  }

  /* ════ Block 2 · we see you (blue band) ════ */
  .illus--seeyou { width: 112px; height: auto; }
  /* the relatable statements as a 2×2 grid of cream cards on the sage band */
  .see-you__grid {
    list-style: none;
    padding: 0;
    margin: var(--s-10) 0 0;
    display: grid;
    gap: var(--s-3);
  }
  @media (min-width: 640px) {
    /* row-gap s-4, wider column-gap s-8 between the two columns */
    .see-you__grid { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-8); align-items: stretch; }
  }
  @media (min-width: 768px) { .see-you__grid { margin-top: var(--s-12); } }
  .see-you__card {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
  }
  .see-you__card .ico { margin-top: 3px; }
  .see-you__card span { font-weight: 300; }
  /* centered closing statement below the grid */
  .pivot {
    max-width: none;
    margin: var(--s-10) auto 0;
    text-align: center;
    font-weight: 400;
  }
  @media (min-width: 768px) { .pivot { margin-top: var(--s-12); } }
  .pivot-tail { display: block; }

  /* ════ Block 3 · features (head pinned left) ════ */
  .features__head { max-width: 46rem; margin-right: auto; text-align: left; }
  .features__intro { margin-top: var(--s-5); }
  /* only "nutrition" is handwritten, inline */
  .intro-word { font-size: 1.7em; line-height: 1; }
  /* web: break the intro after "everything" onto a second line */
  @media (min-width: 640px) { .intro-line2 { display: block; } }
  .lead-in { font-weight: 600; }
  /* lead-in heading sits on its own line above the body */
  .tile__title {
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--navy);
    margin-bottom: var(--s-2);
  }
  .features__tiles p, .features__cards p { font-weight: 300; font-size: 0.9375rem; }

  /* 4 tiles two-by-two, then the 2 beige cards, then a row of screens */
  /* smaller gaps between cards, roomier padding inside (all cream-card #F7EFDB) */
  .features__tiles { margin-top: var(--s-8); display: grid; gap: var(--s-2); }
  .features__cards { margin-top: var(--s-2); display: grid; gap: var(--s-2); }
  @media (min-width: 640px) {
    /* The small tiles are ALWAYS shown in full on web (no collapse) — there's
       room and a title-only card looks sparse; their toggle is hidden and the
       body is forced open. Only the large engine card stays click-to-expand.
       Collapse stays on mobile (<640). */
    .features__tiles .tile { justify-content: flex-start; }
    .features__tiles .tile:not(.tile--engine) .tile__more { max-height: none; visibility: visible; }
    .features__tiles .tile:not(.tile--engine) .tile__toggle { display: none; }
    .features__tiles .tile:not(.tile--engine) .tile__title { padding-right: 0; }
    .features__cards { grid-template-columns: 1fr 1fr; }

    /* 640–879: 3-in-a-row would be too cramped (titles break to 3 lines), so the
       engine spans the full row and the 5 small tiles flow two-per-row; the last
       one spans the row to avoid a lonely orphan. */
    .features__tiles { grid-template-columns: 1fr 1fr; }
    .features__tiles .tile--engine { grid-column: 1 / -1; }
    .features__tiles .tile--third:last-child { grid-column: 1 / -1; }
  }
  @media (min-width: 880px) {
    /* the requested layout, once there's room: full-width engine, a row of 2
       (span 3 each), then a row of 3 (span 2 each). 6 divides by both 2 & 3. */
    .features__tiles { grid-template-columns: repeat(6, 1fr); }
    .features__tiles .tile--half { grid-column: span 3; }
    .features__tiles .tile--third { grid-column: span 2; }
    .features__tiles .tile--third:last-child { grid-column: span 2; }
  }
  .features__tiles .card, .features__cards .card { padding: var(--s-4); }
  @media (min-width: 640px) {
    .features__tiles .card, .features__cards .card { padding: var(--s-6); }
  }

  /* — collapsible tile body: lead always shown, the rest behind a round toggle.
       Skimmers read the lead; the curious tap to expand. Hidden copy stays in
       the DOM (display kept) so the verbatim-copy gate still sees it. — */
  /* — collapsed shows only the heading; a bare arrow in the top-right corner
       (at the heading's own padding) expands the full body. Hidden copy stays
       in the DOM so the verbatim-copy gate still sees it. — */
  .tile { position: relative; display: flex; flex-direction: column; justify-content: center; }
  /* collapsed: heading centred → equal top/bottom padding. open: content top-aligned. */
  .tile[data-open] { justify-content: flex-start; }
  .tile__title { margin-bottom: 0; padding-right: var(--s-5); }
  /* visibility:hidden keeps collapsed copy out of the a11y tree (matching
     aria-expanded=false); restored when open and on desktop (always-open). */
  .tile__more { overflow: hidden; max-height: 0; visibility: hidden; transition: max-height 0.3s ease, visibility 0.3s; }
  .tile[data-open] .tile__more { max-height: 28rem; visibility: visible; }
  .tile__more p { margin-top: var(--s-2); }
  .tile__toggle {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    padding: var(--s-1);
    background: none;
    border: none;
    cursor: pointer;
    line-height: 0;
  }
  @media (min-width: 640px) {
    .tile__toggle { top: var(--s-5); right: var(--s-5); }
  }
  .tile__chev {
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--navy);
    border-bottom: 2px solid var(--navy);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  .tile[data-open] .tile__chev { transform: rotate(-135deg); }

  /* — engine card: full-width, collapsible on every viewport. Its body is far
       taller than the tiles' max-height (which would clip), so it animates with
       the grid-rows reveal (0fr→1fr) instead. The lead stays always visible. — */
  .tile--engine .tile__lead { margin-top: var(--s-2); font-weight: 400; }
  .tile--engine .tile__more {
    max-height: none;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease, visibility 0.3s;
  }
  .tile--engine .tile__more-inner { overflow: hidden; }
  .tile--engine[data-open] .tile__more { grid-template-rows: 1fr; visibility: visible; max-height: none; }

  .screens-row {
    margin-top: var(--s-10);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-4);
    align-items: start;
  }
  .screens-row .phone { width: 100%; margin: 0; }
  @media (min-width: 768px) {
    /* bigger phones: tighter gap + wider row (still one line, capped by .wrap) */
    .screens-row { gap: var(--s-2); max-width: 72rem; margin-inline: auto; }
  }
  @media (max-width: 767px) {
    /* one swipeable line on smaller screens (5 tiny phones would be unreadable) */
    .screens-row {
      display: flex;
      gap: var(--s-3);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-bottom: var(--s-1);
    }
    .screens-row .phone { width: 62%; flex: none; scroll-snap-align: center; }
  }
  .features__closing-wrap {
    margin-top: var(--s-10);
    text-align: center;
  }
  .illus--closing { width: 66px; height: auto; margin: 0 auto var(--s-3); }
  .features__closing {
    max-width: 40rem;
    margin-inline: auto;
    font-weight: 300;
  }
  /* a single handwritten accent word inside the otherwise-regular closing line */
  .closing-word {
    font-weight: 400;
    font-size: 2em;
    line-height: 1;
  }
  /* mobile: "and you choose where to go." drops to its own second line.
     web: keep "and you" on line one, only the handwritten part wraps below. */
  .closing-line { display: block; }
  @media (min-width: 640px) {
    .closing-line { display: inline; }
    .closing-word { display: block; margin-top: -0.15em; }
  }

  /* ════ Block 3a · the nutrient engine (centerpiece, layered) ════ */
  /* the engine now lives inside the full-width first card; it fills the card
     and sits just below the "long view" bridge line. */
  .engine { max-width: none; margin-top: var(--s-4); }
  .engine__intro { max-width: 44rem; }
  .engine__h {
    font-weight: 600;
    font-size: clamp(1.375rem, 1.6vw + 0.5rem, 1.75rem);
    line-height: 1.2;
  }
  .eng-tail { display: block; }
  .engine__lead { margin-top: var(--s-2); font-weight: 400; }

  /* — Layer 0 · the tank panel (filled cream-card) — */
  /* recessed tray: one shade darker than the cream card it sits inside, so the
     tank panel reads as a distinct well (the same step the panel had against the
     page before it moved into the card). */
  .tanks {
    margin-top: var(--s-5);
    background: var(--cream-deep);
    border-radius: var(--r-card);
    padding: var(--s-4);
    display: grid;
    gap: var(--s-3);
  }
  @media (min-width: 640px) { .tanks { padding: var(--s-5); } }
  /* mobile: name (left) + status (right) on one line, bar below.
     ≥560: name | bar | status on a single line. */
  .tank {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name status" "bar bar";
    column-gap: var(--s-2);
    row-gap: var(--s-1);
    align-items: baseline;
  }
  @media (min-width: 560px) {
    .tank { grid-template-columns: 9rem 1fr 7.5rem; grid-template-areas: "name bar status"; column-gap: var(--s-3); align-items: center; }
  }
  .tank__label { grid-area: name; font-weight: 600; }
  .tank__purpose { font-weight: 300; font-size: var(--fs-small); color: var(--navy-soft); }
  /* zone bar: blue→green→orange scale, mirroring the app's depleting→on-target→
     building gradient (green centre = the app's "on target" colour). The filled
     navy dot is where the nutrient sits today; the hollow ghost ring is where
     tonight's processing leaves it tomorrow (mirrors the app's projection marker). */
  .tank__bar {
    grid-area: bar;
    position: relative;
    display: block;
    height: 12px;
    border: var(--line) solid var(--navy);
    border-radius: var(--r-pill);
  }
  .tank__bar.is-zone {
    background-image: linear-gradient(90deg, var(--stat-low), var(--green) 50%, var(--stat-building));
  }
  .tank__marker, .tank__ghost {
    position: absolute;
    top: 50%;
    width: 12px; height: 12px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
  /* today: filled navy dot with a cream ring so it lifts off the bar */
  .tank__marker { left: var(--lvl); background: var(--navy); border: 2px solid var(--cream-bright); }
  /* tomorrow: hollow navy ring (transparent centre) — the projected level */
  .tank__ghost { left: var(--proj); background: transparent; border: 2px solid var(--navy); }
  /* limit bar: solid track, green fill toward a red ceiling marker. No
     overflow:hidden — it would clip the limit tick to the bar height; the
     fill rounds its own left corners instead. */
  .tank__bar.is-limitbar { background: var(--cream-bright); }
  .tank__fill {
    position: absolute; inset: 0 auto 0 0;
    width: var(--lvl);
    background: var(--green);
    border-radius: var(--r-pill) 0 0 var(--r-pill);
  }
  .tank__limit {
    position: absolute;
    top: -4px; bottom: -4px;
    left: var(--at);
    width: 2px;
    background: var(--stat-over);
  }
  .tank__status { grid-area: status; font-weight: 400; font-size: var(--fs-small); text-align: right; }

  /* legend keying the two zone-bar dots (today vs the projected tomorrow) */
  .tanks__legend { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--navy-soft); }
  .tanks__key {
    box-sizing: border-box;
    display: inline-block;
    width: 11px; height: 11px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
  }
  .tanks__key--now { background: var(--navy); }
  .tanks__key--next { border: 2px solid var(--navy); }

  /* — Layer 1 · the three beats — */
  .beats {
    margin-top: var(--s-5);
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--s-2);
  }
  @media (min-width: 640px) { .beats { display: flex; justify-content: space-between; gap: var(--s-4); } }
  .beat { display: flex; align-items: flex-start; gap: var(--s-1); font-weight: 400; font-size: var(--fs-small); }
  /* dot nudged onto the first line so it stays aligned when the text wraps */
  .beat__dot { flex: none; width: 8px; height: 8px; margin-top: 0.5em; border-radius: 50%; background: var(--navy); }

  /* — Layer 2 + 3 · expandable reveals (mirror the FAQ accordion) — */
  .engine__more-h { margin-top: var(--s-8); font-weight: 600; }
  .reveal-list { margin-top: var(--s-3); }
  .reveal { border-top: 1px solid var(--navy); }
  /* no bottom border on the last math card — "see all 31" below supplies the
     next hairline, so the two don't stack into an empty double-lined band. */
  .reveal__h { margin: 0; font-size: inherit; }
  .reveal__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-3) var(--s-05);
    background: none;
    border: none;
    text-align: left;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--navy);
    cursor: pointer;
  }
  .reveal__icon { position: relative; flex: none; width: 16px; height: 16px; }
  .reveal__icon::before, .reveal__icon::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 0;
    width: 16px; height: 1.5px;
    background: var(--navy);
    transition: transform 0.3s ease;
  }
  .reveal__icon::after { transform: rotate(90deg); }
  .reveal[data-open] .reveal__icon::after { transform: rotate(0deg); }
  .reveal__a {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.3s ease, visibility 0.3s;
  }
  .reveal__a-inner { overflow: hidden; }
  .reveal__a-inner > p { padding: 0 var(--s-05) var(--s-3); max-width: 44rem; font-weight: 400; font-size: 1.0625rem; }
  .reveal[data-open] .reveal__a { grid-template-rows: 1fr; visibility: visible; }

  /* No top margin: the last math card has no bottom border, so this row's
     border-top IS its closing hairline. A gap here would float that hairline
     away from "some reserves…" and leave an empty band under it. */
  .reveal--all { border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); }

  /* — Layer 3 · the 31 nutrient chips — */
  .ngroup { padding: 0 var(--s-05); }
  .ngroup:first-child { margin-top: var(--s-1); }
  .ngroup + .ngroup { margin-top: var(--s-4); }
  .ngroup:last-child { padding-bottom: var(--s-3); }
  .ngroup__h { font-weight: 600; font-size: var(--fs-small); margin-bottom: var(--s-2); }
  .chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border: var(--line) solid var(--navy);
    border-radius: var(--r-pill);
    font-size: var(--fs-small);
    font-weight: 400;
  }
  /* limit nutrients: filled cream-deep pill (no outline) — the page's
     filled-vs-outline card language, so limits read distinct without red text. */
  .chip.is-limit { border-color: transparent; background: var(--cream-deep); }
  .chip__tag { font-weight: 600; font-size: 0.75rem; }

  /* ════ Block 4 · never (bold navy statement) ════ */
  .never { color: var(--cream); }
  .illus--never { width: 88px; height: auto; }
  /* override the shared .split-head .illus width (higher specificity) — web only */
  @media (min-width: 768px) { .split-head .illus--never { width: 96px; } }
  /* intro pinned left close under the heading; the big gap sits above the card */
  .never__intro { max-width: 40rem; margin: var(--s-2) auto 0 0; }
  /* web: drop "So here's what you'll never find:" onto its own line */
  @media (min-width: 640px) { .nf-tail { display: block; } }
  .never__cardwrap { max-width: 44rem; margin: var(--s-10) auto 0; }
  @media (min-width: 768px) {
    .never__cardwrap { margin-top: var(--s-12); }
    /* float the illustration so it doesn't inflate the heading→intro gap
       (so it matches the benefits heading gap) */
    .never .split-head { position: relative; }
    .never .split-head .illus { position: absolute; top: 0; right: 0; }
  }
  .never__list { list-style: none; padding: 0; }
  .never__list li + li { margin-top: var(--s-3); }
  .never__list .li-dash { margin-right: 0.3em; }

  /* ════ Block 5 · founders (green band) ════ */
  .founders__wrap { display: grid; gap: var(--s-6); }
  .founders__photo { width: min(78vw, 300px); margin-inline: auto; }
  /* two founder photos, side by side, each with a name beneath it */
  .founders__imgs { display: flex; gap: var(--s-2); align-items: start; }
  .founders__person { flex: 1; min-width: 0; display: flex; flex-direction: column; margin: 0; }
  .founders__person .img-ph,
  .founders__person picture { aspect-ratio: 1 / 1; width: 100%; }
  .founders__img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card); }
  .founders__names {
    margin-top: var(--s-2);
    text-align: center;
    font-size: var(--fs-small);
    font-weight: 400;
  }
  .founders__text p { font-weight: 300; }
  .founders__text p:first-of-type { font-weight: 400; }
  .founders__text h2 { margin-bottom: var(--s-4); }
  .founders__text p + p { margin-top: var(--s-3); }
  .founders__text .founders-made { font-weight: 400; }   /* standalone "so we made it." line, regular weight */
  .founders-q {
    display: block;
    font-weight: 500;
    margin: 0;
  }
  @media (min-width: 960px) {
    .founders__wrap {
      grid-template-columns: 300px minmax(0, 1fr);
      gap: var(--s-10);
      align-items: start;
      max-width: 980px;
    }
    .founders__photo { margin-top: var(--s-1); }
  }

  /* ════ Block 6 · we'd love you with us (why join — mission + community) ════ */
  /* head uses the shared .split-head (h2 left, illustration right); body left-aligned */
  .join-why__body { max-width: 46rem; margin-top: var(--s-5); }
  .join-why__body p { font-weight: 300; line-height: 1.6; }
  .join-why__body p + p { margin-top: var(--s-3); }
  .join-why__lead { font-weight: 400; }
  /* web: centre the body text under the split-head; mobile stays left */
  @media (min-width: 640px) { .join-why__body { text-align: center; margin-inline: auto; max-width: 38rem; } }
  @media (min-width: 768px) { .join-why__body { margin-top: var(--s-6); } }

  /* ════ Block 7 · benefits (numbered step-cards, head pinned left) ════ */
  .benefits__head { max-width: 46rem; margin-right: auto; text-align: left; }
  .illus--benefits { width: 94px; height: auto; margin: 0 0 var(--s-3); }
  .benefits__head p { margin-top: var(--s-1); line-height: 1.5; }
  .nb-line { display: block; }
  .benefits__grid { margin-top: var(--s-8); display: grid; gap: var(--s-2); }
  @media (min-width: 960px) {
    /* equal-height cards */
    .benefits__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-2); align-items: stretch; }
  }
  .step {
    display: flex;
    flex-direction: column;
    background: var(--cream-deep);
    border-radius: var(--r-card);
    padding: var(--s-5) var(--s-4);
  }
  @media (min-width: 640px) { .step { padding: var(--s-6) var(--s-5); } }
  .step__num {
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--navy);
    margin-bottom: var(--s-2);
  }
  .step__title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--navy);
  }
  .step__rule {
    border: 0;
    height: 2px;
    margin: var(--s-1) 0 var(--s-3);
    /* round navy dots (dotted border can't space them) — 5px period matches
       the founding-circle divider above the invite */
    background-image: radial-gradient(circle, var(--navy) 1px, transparent 1.3px);
    background-size: 5px 2px;
    background-repeat: repeat-x;
    background-position: left center;
  }
  .step__body { font-weight: 300; font-size: 0.9375rem; line-height: 1.5; }

  /* logo symbol + centered closing line */
  .benefits__outro { margin-top: var(--s-12); text-align: center; }
  .benefits__mark { width: 36px; height: auto; margin: 0 auto var(--s-4); }
  .benefits__closing { max-width: 40rem; margin-inline: auto; }
  .closing-tail { display: block; }

  /* ════ Block 7 · second CTA (green band) ════ */
  .cta-2 .waitlist { margin-top: 0; }

  /* ════ Block 8 · FAQ (aside layout) ════ */
  .illus--faq { width: 124px; height: auto; }
  .faq__item { border-top: 1px solid var(--navy); }
  .faq__item:last-child { border-bottom: 1px solid var(--navy); }
  .faq__h { margin: 0; font-size: inherit; }
  .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-3) var(--s-05);
    background: none;
    border: none;
    text-align: left;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--navy);
    cursor: pointer;
  }
  .faq__icon {
    position: relative;
    flex: none;
    width: 16px; height: 16px;
  }
  .faq__icon::before, .faq__icon::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 0;
    width: 16px; height: 1.5px;
    background: var(--navy);
    transition: transform 0.3s ease;
  }
  .faq__icon::after { transform: rotate(90deg); }
  .faq__item[data-open] .faq__icon::after { transform: rotate(0deg); }
  .faq__a {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.3s ease, visibility 0.3s;
  }
  .faq__a-inner { overflow: hidden; }
  .faq__a-inner p { padding: 0 var(--s-05) var(--s-3); max-width: 38rem; font-size: 0.9375rem; }
  .faq__item[data-open] .faq__a { grid-template-rows: 1fr; visibility: visible; }

  /* ════ Block 9 · footer — calm green-pale band, dark text ════ */
  .site-footer {
    background: var(--green-pale);
    color: var(--navy);
    padding-block: var(--s-12) var(--s-10);
    text-align: center;
  }
  .site-footer__inner { display: flex; flex-direction: column; }
  .footer__mark { width: 36px; height: auto; margin: 0 auto var(--s-3); }
  .site-footer a { color: var(--navy); }
  .site-footer__links {
    margin-top: var(--s-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    font-weight: 400;
    font-size: var(--fs-small);
  }
  .signature {
    margin-top: var(--s-8);
    text-align: center;
    font-size: 2.25rem;
    line-height: 0.95;
    color: var(--navy);
  }
  /* both lines handwritten, stacked: "your body," then "in your own words." */
  .signature .sig-line { display: block; }

  /* ════ post-signup state ════ */
  .signup-success__line {
    font-weight: 600;
    font-size: 1.125em;
  }
  .signup-success__line:focus { outline: none; }
  /* the post-signup line reads centered on the mint bands (mid CTA + footer) */
  .cta-2 .signup-success__line,
  .site-footer .signup-success__line { text-align: center; }
  .signup-success__invite { margin-top: var(--s-4); color: var(--navy); }
  .signup-success__invite p { font-weight: 400; }
  .signup-success__actions {
    margin-top: var(--s-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
  }
  .link-quiet {
    background: none;
    border: none;
    padding: var(--s-1);
    color: var(--navy);
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
  }
  .waitlist--dark .signup-success__line { color: var(--cream); }

  /* ── founding-circle inline application form ── */
  .fc-reveal {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.3s ease, visibility 0.3s;
  }
  .fc-reveal.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    margin-top: var(--s-3);
  }
  .fc-reveal__inner { overflow: hidden; }
  .fc-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }
  .fc-field { border: none; margin: 0; padding: 0; min-inline-size: 0; }
  .fc-legend,
  .fc-label {
    padding: 0;
    margin-bottom: var(--s-1);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--navy);
  }
  .fc-label { display: block; }
  .fc-options { display: flex; flex-wrap: wrap; gap: var(--s-1); }
  /* let a pill shrink to the row so a long answer wraps instead of overflowing */
  .fc-option { min-width: 0; max-width: 100%; }
  .fc-option span {
    display: inline-flex;
    align-items: center;
    text-align: left;
    max-width: 100%;
    min-height: var(--control-h);     /* single-line pills match the inputs/dropdowns */
    /* vertical padding so a long answer can wrap to two lines and still breathe */
    padding: var(--s-2) var(--s-3);
    border: var(--line) solid var(--navy);
    border-radius: var(--r-pill);
    font-size: var(--fs-small);
    font-weight: 400;
    color: var(--navy);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .fc-option input:checked + span {
    background: var(--cream-deep);
    border-color: transparent;
    font-weight: 600;
  }
  .fc-option input:focus-visible + span {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
  }
  .fc-select,
  .fc-input {
    height: var(--control-h);
    width: 100%;
    padding-inline: var(--s-3);
    background: transparent;
    color: var(--navy);
    border: var(--line) solid var(--navy);
    border-radius: var(--r-pill);
    font-family: var(--f-sans);
    font-size: var(--fs-small);
  }
  /* reset the native control so the pill border-radius matches .fc-input
     (native selects ignore border-radius); add our own chevron */
  .fc-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F183F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s-3) center;
    padding-right: var(--s-6);
  }
  .fc-input::placeholder { color: var(--navy-soft); opacity: 1; }
  .fc-submit { align-self: flex-start; }

  /* ── dedicated founding-circle page (/founding-circle) ── */
  /* sticky footer: keep the mint footer pinned to the bottom of the screen
     even on the short end states ("maybe later" / thank-you) */
  .fc-body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
  .fc-body main { flex: 1 0 auto; }
  /* terminal states (thank-you / "maybe later"): the lone line is the only
     content. Drop the big gradient (keep just the centered logo on top) so the
     cream field fills the screen, and center the message in it. */
  .fc-body.fc-ended .hero__bg { display: none; }
  /* no bottom padding on the header so the logo→line gap is driven only by the
     1:2 spacers below (otherwise it inflates the "above" gap) */
  .fc-body.fc-ended > header { padding-block: var(--s-6) 0; }
  /* end-state message sits above center: split the free space 1:2 so there's
     twice as much room below the line as above it */
  .fc-body.fc-ended .fc-page {
    display: flex;
    flex-direction: column;
    padding-block: 0;
  }
  .fc-body.fc-ended .fc-page::before { content: ""; flex: 1; }
  /* twice the room below the line as before (was flex:2 → 4× the gap above) */
  .fc-body.fc-ended .fc-page::after { content: ""; flex: 4; }
  /* end-state lines read in a calm regular weight, not semibold */
  .fc-page .fc-done,
  .fc-page .fc-posted { font-weight: 400; }
  /* header holds only the logo here — drop the bar's bottom margin so the
     symmetric header padding centers the logo vertically */
  .fc-body .hero__bar { margin-bottom: 0; }
  /* soften the footer: a subtle warm band instead of the mint, so it sits
     quietly under the calm post-signup states */
  .fc-body .site-footer { background: var(--cream-card); }
  .fc-page { padding-block: var(--s-6) var(--s-8); }
  .fc-page .signup-success { max-width: 40rem; margin-inline: auto; }
  /* handwritten label with a small illustration sitting right beside it —
     width:fit-content packs them together (no space-between spread) */
  .fc-page .split-head {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
    position: relative;
  }
  /* Position the illustration OUT of flow so its height never shifts the heading
     below — otherwise the taller portrait sprout pushed "you're in." further down
     than the other headings. It stays vertically centered on the eyebrow (same
     place it rendered before), so every eyebrow -> heading gap is now equal. */
  .fc-page .split-head .illus {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
  .fc-page .split-head .fc-eyebrow { margin-bottom: 0; }
  .fc-page .split-head .illus--fc-welcome { width: 40px; height: auto; }
  .fc-page .split-head .illus--fc-circle { width: 60px; height: auto; }
  .fc-page .split-head .illus--fc-newsletter { width: 44px; height: auto; }
  /* web: spread the eyebrow + illustration across the column so the
     illustration sits at the right edge (mobile already does this via the
     max-width:639px rule below). The eyebrow grows like .split-head h2 does,
     which pushes the illustration right regardless of source whitespace. */
  @media (min-width: 640px) {
    /* a little more breathing room at the top of the page (web only) */
    .fc-page { padding-top: var(--s-8); }
    .fc-page .split-head { justify-content: space-between; width: 100%; }
    .fc-page .split-head .fc-eyebrow { flex: 1 1 auto; }
    /* nudge the welcome sprout a little lower than the eyebrow centre (web only) */
    .fc-page .split-head .illus--fc-welcome { width: 48px; transform: translateY(calc(-50% + 8px)); }
    .fc-page .split-head .illus--fc-circle { width: 82px; }
    .fc-page .split-head .illus--fc-newsletter { width: 48px; }
  }
  /* mobile: push the illustration to the right edge of the screen */
  @media (max-width: 639px) {
    .fc-page .split-head { width: auto; justify-content: space-between; }
  }
  /* section labels ("welcome" / "the founding circle") in the handwritten accent */
  .fc-page .fc-eyebrow {
    font-family: var(--f-hand);
    font-weight: 400;
    font-size: 1.875rem;
    line-height: 1;
    color: var(--navy);
    margin-bottom: var(--s-2);
  }
  /* one shared size for the three big headings: "you're in." /
     "want a real say…" / "tell us a bit about you." */
  .fc-page .fc-title,
  .fc-page .fc-invite__h,
  .fc-page .fc-heading {
    margin: 0;
    font-size: clamp(1.875rem, 5.5vw, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--navy);
  }
  .fc-page .fc-sub { margin-top: var(--s-2); font-weight: 300; font-size: 1.0625rem; color: var(--navy); }
  /* mobile: match the lead ("We're putting together…") size */
  @media (max-width: 639px) { .fc-page .fc-sub { font-size: var(--fs-small); } }
  /* founding-circle invitation, set off from the confirmation by a dashed
     navy hairline — same round-dot look as the main page's .card--dashed
     (2px navy dots, ~5px period) instead of a solid beige rule */
  .fc-page .signup-success__invite {
    margin-top: var(--s-6);
    padding-top: var(--s-6);
    background-image: radial-gradient(circle, var(--navy) 1px, transparent 1.3px);
    background-size: 5px 2px;
    background-position: left top;
    background-repeat: repeat-x;
  }
  .fc-page .fc-invite__h { margin-bottom: var(--s-2); }
  .fc-page .fc-lead { font-weight: 300; line-height: 1.6; }
  /* the "read along" newsletter block — a lighter second option below the FC
     invite, set off by the same dashed navy hairline as the invite above */
  .fc-page .fc-newsletter {
    margin-top: var(--s-6);
    padding-top: var(--s-6);
    background-image: radial-gradient(circle, var(--navy) 1px, transparent 1.3px);
    background-size: 5px 2px;
    background-position: left top;
    background-repeat: repeat-x;
  }
  .fc-page .fc-newsletter .fc-lead { max-width: 42rem; margin-bottom: var(--s-4); }
  .fc-page .fc-newsletter .fc-newsletter__email { max-width: 26rem; margin-bottom: var(--s-3); }
  .fc-page .fc-newsletter__done { margin: 0; font-weight: 400; color: var(--navy); }
  /* "what you get" perk cards (reuse the landing's .step card look) */
  .fc-page .fc-perks__h {
    margin: var(--s-5) 0 var(--s-2);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0.01em;
    color: var(--navy);
  }
  .fc-page .fc-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
  .fc-page .fc-perks .step { background: var(--cream-card); }
  .fc-page .fc-perks .step__body { color: var(--navy-soft); }
  /* no dashed rule inside these cards — keep a small title→body gap in its place */
  .fc-page .fc-perks .step__title { margin-bottom: var(--s-2); }
  /* stack the choices left-aligned: "maybe later" directly under the apply
     button, sharing the same left edge as the copy + the form below. Bigger
     gap above the apply button, tighter gap down to "maybe later". */
  .fc-page .signup-success__actions {
    flex-direction: column;
    align-items: flex-start;
    margin-top: var(--s-6);
    gap: var(--s-1);
  }
  /* a bit more breathing room between the application's questions */
  .fc-page .fc-form { gap: var(--s-4); }
  /* the form-view heading sizing is shared with .fc-title / .fc-invite__h above */
  .fc-page .fc-heading { margin-bottom: var(--s-5); }
  /* submit + message + "maybe later" as one tight group, so the gap under
     "count me in" matches the gap under "apply to the founding circle" (--s-1).
     margin-top adds to the form gap above it for a bigger lead-in. */
  .fc-page .fc-submit-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: var(--s-2);
    gap: var(--s-1);
  }
  .fc-page .fc-msg { min-height: 0; margin: 0; }
  /* the [hidden] attribute must win over the flex display rules above, else
     JS can't hide the choices / form (apply, "maybe later", post-submit) */
  .fc-page #fc-confirm[hidden],
  .fc-page .signup-success__invite[hidden],
  .fc-page .signup-success__actions[hidden],
  .fc-page .fc-form[hidden] { display: none; }
  /* web: widen the column so the three perk cards sit in one row; keep the
     reading text at a comfortable measure */
  @media (min-width: 900px) {
    .fc-page .wrap.prose { max-width: 56rem; }
    .fc-page .signup-success { max-width: 56rem; }
    .fc-page .fc-perks { grid-template-columns: repeat(3, 1fr); }
    /* .fc-confirm + .split-head span the full 56rem column so the split-head
       illustrations right-align with the perk cards / divider edge; the reading
       text stays at the comfortable 42rem measure */
    .fc-page .fc-sub,
    .fc-page .fc-invite__h,
    .fc-page .fc-lead,
    .fc-page .fc-reveal__inner { max-width: 42rem; }
    /* the lone end-state line reads better centered on wide screens */
    .fc-page .fc-done,
    .fc-page .fc-posted { text-align: center; }
  }

  /* ═══════════════ mobile-only refinements (phones ≤ 639px) ═══════════════ */
  @media (max-width: 639px) {
    /* all body text matches the cream-card text size */
    body { font-size: 0.9375rem; }

    /* — hero: tighter, slightly bigger gap under the heading — */
    .hero-region { padding-block: var(--s-5); }
    .hero__bar { margin-bottom: var(--s-4); }
    .hero__illus { width: 34px; margin-block: var(--s-6) var(--s-2); }
    .hero-region .waitlist { margin-top: var(--s-5); }
    /* "built on care, not rules." drops to a second line on phones */
    .sl-line2 { display: block; }
    /* break after "And connects it" on phones */
    .intro-m2 { display: block; }
    /* the handwritten "balance, your way." drops to its own line on phones */
    .sub-tail { display: block; margin-top: -0.12em; }
    /* phone stacks below the copy; gap above it visually matches the hero's bottom
       padding (the microline's line-box adds ~6px, so trim a step) */
    .hero__visual { margin-top: var(--s-4); }
    .hero__phone { width: min(58vw, 208px); }
    .microline { font-size: 0.8125rem; }
    .microline-tail { display: inline; }      /* flow the closing onto two lines */

    /* — every section: smaller top/bottom padding — */
    .see-you, .features, .never, .founders, .join-why, .benefits, .cta-2, .faq { padding-block: var(--s-6); }
    .join-why { padding-bottom: 0; }   /* gap above "what you get" = the section's top padding alone */
    .site-footer { padding-block: var(--s-6) var(--s-5); }

    /* — split-head blocks (2·4·8): illustration ABOVE the heading, LEFT, smaller — */
    .split-head { flex-direction: column-reverse; align-items: flex-start; gap: var(--s-2); }
    .split-head .illus { width: 52px; margin: 0; }
    .split-head .illus--seeyou { width: 76px; }   /* hand-and-bowl bigger on phones */
    .split-head .illus--never { width: 44px; }    /* shield smaller on phones */
    .split-head .illus--join { width: 68px; }     /* two-hands bigger on phones */

    /* — tighter gaps between elements — */
    .center-body { margin-top: var(--s-5); }   /* a bit more under the FAQ heading (40) */
    .pivot { margin-top: var(--s-4); font-size: 0.875rem; text-align: left; }   /* = gap under the see-you heading */
    .pivot-tail, .closing-tail { display: inline; }   /* let closings flow to two lines */
    .see-you__grid { margin-top: var(--s-4); gap: var(--s-2); }   /* a bit more under the see-you heading (32) */
    .see-you__card .ico { width: 22px; height: 22px; }   /* smaller list icons */
    .features__intro { margin-top: var(--s-3); }
    .features__tiles { margin-top: var(--s-5); gap: var(--s-1); }   /* 8px between cards */
    .tile__title { font-size: 0.9375rem; }           /* card headings = body text size */
    .features__closing-wrap { margin-top: var(--s-6); }
    .features__closing { font-size: 0.875rem; }      /* keep the closing to two lines */
    /* let the scrollable mockups bleed to the right screen edge (no right gutter);
       only the last screen gets a trailing gutter, shown when scrolled to the end */
    .screens-row { margin-top: var(--s-6); margin-right: calc(var(--s-3) * -1); }
    .screens-row .phone:last-child { margin-right: var(--s-3); }
    .never__cardwrap { margin-top: var(--s-6); }
    .founders__wrap { gap: var(--s-4); }
    /* 24px under every top-of-section heading (consistent on phones) */
    .join-why__body { margin-top: var(--s-3); }
    .never__intro { margin-top: var(--s-3); }
    .founders__text h2 { margin-bottom: var(--s-3); }
    /* benefits: smaller gap above "Founding members get:", bigger gap below it */
    .benefits__head p { margin-top: var(--s-2); }
    .benefits__grid { margin-top: var(--s-3); gap: var(--s-1); }    /* 8px between cards */
    /* smaller gaps between paragraphs in the "about us" + "why join" text */
    .founders__text p + p { margin-top: var(--s-2); }
    .join-why__body p + p { margin-top: var(--s-2); }
    .nb-line { display: inline; }                    /* subheading flows onto two lines */
    .benefits__outro { margin-top: var(--s-8); }
    .benefits__closing { font-size: 0.875rem; }

    /* — smaller illustrations — */
    .illus--closing { width: 46px; margin-bottom: var(--s-2); }
    .illus--benefits { width: 68px; margin-bottom: var(--s-2); }

    /* — "what you get" cards: smaller number + title, tighter divider — */
    .step__num { font-size: 1.875rem; }
    .step__title { font-size: 1rem; }
    .step__rule { margin: var(--s-1) 0 var(--s-2); }

    /* — footer: tighter logo + signature gaps, clean two-line signature — */
    .benefits__mark { width: 28px; }
    .footer__mark { width: 28px; margin-bottom: var(--s-1); }
    .signature { font-size: 1.75rem; margin-top: var(--s-5); }
    .signature .sig-line { display: block; }
  }
}

/* ───────────────────────── utilities ───────────────────────── */
@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ═══════════════════ features sub-page ("a closer look") ═══════════════════ */
@layer components {
  /* site header used by privacy + features: logo with a calm gutter */
  .site-header { padding-block: var(--s-4); }

  /* CTA on the home feature cards → the detail page */
  .tile__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--s-1);
    margin-top: var(--s-5);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    border-bottom: var(--line) solid transparent;
    line-height: 1.3;
  }
  .tile__cta::after { content: "\2192"; }          /* → */
  .tile__cta:hover { border-bottom-color: var(--navy); }
  /* web: cards are equal height — push the button to the bottom so they line up,
     but keep a real minimum gap above it even when the body fills the card */
  @media (min-width: 640px) {
    .features__tiles .tile__more { display: flex; flex-direction: column; flex: 1 1 auto; }
    .features__tiles .tile__more > p:last-of-type { margin-bottom: var(--s-4); }
    .features__tiles .tile__cta { margin-top: auto; }
  }

  /* body copy on the page is light, never regular; and avoid widows */
  .feat p, .feat li, .feat-intro p, .feat-cta p { font-weight: 300; text-wrap: pretty; }

  /* — header intro (sits on the home-page gradient, centred) — */
  .feat-intro { text-align: center; max-width: 44rem; margin-inline: auto; }
  .feat-eyebrow { font-family: var(--f-hand); font-weight: 400; font-size: 2.25rem; line-height: 1; color: var(--navy); margin-bottom: var(--s-1); }
  .feat-intro h1 { font-size: var(--fs-h1); }
  .feat-introlead { margin-top: var(--s-4); font-size: 1.1875rem; }

  /* slimmed nutrients teaser card on the landing (engine moved to page 2) */
  .tile--lead .tile__lead { margin-top: var(--s-2); font-weight: 400; }
  .tile--lead .tile__bridge { margin-top: var(--s-2); font-weight: 300; color: var(--navy-soft); }

  /* — a feature block: centred head + a row of real screens + "go deeper" — */
  .feat-block { padding-block: var(--s-10); scroll-margin-top: var(--s-3); }
  .feat-head { max-width: 44rem; margin-inline: auto; text-align: center; }
  .feat-h { font-size: var(--fs-h2); }
  .feat-subh { font-size: 1.25rem; }
  .feat-sub { margin-top: var(--s-05); font-weight: 300; color: var(--navy-soft); }
  .feat-lead { margin-top: var(--s-3); }

  /* real app screens, framed, in a centred wrapping row */
  .feat-screens { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-3); justify-content: center; align-items: flex-start; margin-top: var(--s-6); }
  .feat-screens .phone { width: min(58vw, 196px); margin: 0; }

  /* the "go deeper" accordion — full content width + left-aligned, exactly
     like the nutrients engine's reveal list (the "+" rows and divider lines
     line up across every section) */
  .feat-deep { margin-top: var(--s-8); }
  /* "go deeper" matches the engine's "the smart part, when you want it." */
  .feat-deep-h { font-weight: 600; }
  .feat-deep .reveal-list { margin-top: var(--s-3); }

  /* nutrients engine sits below its head/screens */
  .feat-block .engine { margin-top: var(--s-8); }

  /* the diary section's sub-heads (logging + daily read) — each set off by
     the WellSavvy logo mark, centred above the heading, with matching gaps */
  .feat-sub-block { margin-top: var(--s-12); padding-top: var(--s-3); }
  .feat-mark { display: block; width: 40px; height: auto; margin: 0 auto var(--s-4); }

  /* placeholder frame (kept for any screen not yet shot) */
  .phone--ph { aspect-ratio: 64 / 138; display: grid; place-items: center; text-align: center; }
  .phone--ph span { color: var(--navy-soft); font-style: italic; font-weight: 400; font-size: var(--fs-small); letter-spacing: 0.03em; padding: var(--s-3); }

  /* — closing CTA: like the home page's mid CTA (heading + a line above the
     field), but a tighter gap below the form — */
  .feat-cta { text-align: center; padding-block: var(--s-12) var(--s-1); }
  @media (min-width: 960px) { .feat-cta { padding-top: var(--s-15); } }
  .feat-cta h2 { font-size: var(--fs-h2); }
  .feat-cta__lead { margin-top: var(--s-2); margin-bottom: var(--s-4); max-width: 36rem; margin-inline: auto; }
  .feat-cta .waitlist { margin-top: 0; }
  /* the green CTA flows straight into the green-pale footer — pull the footer
     up so the field doesn't sit in a big empty green gap */
  .feat + .site-footer { padding-top: var(--s-3); }

  /* features header gradient — the home hero (green top, lime corner) but with
     a darker beige centre so the header reads as its own block */
  .feat-hero .hero__bg {
    background: radial-gradient(135% 125% at 14% 2%,
      var(--green-pale) 0%,
      var(--green-pale) 26%,
      var(--cream-card) 56%,
      var(--cream-deep) 84%,
      var(--green-lime) 114%);
  }

  @media (max-width: 639px) {
    /* smaller subheading + tighter gap under the header heading */
    .feat-introlead { margin-top: var(--s-2); font-size: 1rem; }
    .feat-block { padding-block: var(--s-8); }
    .feat-screens { margin-top: var(--s-5); gap: var(--s-3); }
    .feat-screens .phone { width: min(64vw, 200px); }
    /* tighter gap between a screen and its caption */
    .feat .phone__cap { margin-top: var(--s-2); }
    /* all body copy (incl. the "+" list bodies) matches the section lead size */
    .feat .reveal__a-inner > p { font-size: 0.9375rem; }
    .feat-sub-block { margin-top: var(--s-8); padding-top: var(--s-2); }
    .feat-mark { width: 32px; }
    /* the handwritten "a closer look" eyebrow reads a touch smaller on phones */
    .feat-eyebrow { font-size: 1.875rem; }
  }
}

/* ═══════════════════ creative redesign — new components ═══════════════════ */
@layer components {

  /* ════ Header · floating feature capsules (decorative, ≥768px) ════ */
  /* Small solid-fill branded pills that float around the hero phone, echoing the
     app's UI cards. Hidden on phones (the hero sub copy carries the value props).
     Positioned with top/left/right so the idle float can own `transform`. */
  .hero__stage { position: relative; display: inline-block; }
  .cap {
    position: absolute;
    z-index: 3;
    display: none;
    align-items: center;
    gap: var(--s-1);
    width: max-content;
    max-width: 14rem;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--r-pill);
    color: var(--navy);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.25;
  }
  .cap__ico { flex: none; width: 20px; height: 20px; }
  .cap--reserves    { background: var(--green-pale); }
  .cap--connected   { background: var(--accent-yellow); border-radius: 22px; max-width: 12.5rem; padding: var(--s-2) var(--s-3); }
  .cap--conclusions { background: var(--accent-lavender-light); }
  @media (min-width: 768px) {
    .cap { display: inline-flex; animation: cap-float 6s ease-in-out infinite; }
    .cap--reserves    { top: 4%;  left: -24%; animation-delay: -0.6s; }
    .cap--connected   { bottom: 1%; left: -40%; animation-delay: -3s; }
    .cap--conclusions { top: 46%; right: -18%; animation-delay: -1.8s; }
  }
  @keyframes cap-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }

  /* ════ Block 3 · feature bento (colored cards + partly-cut screens) ════ */
  /* Each card: solid branded tint, its copy up top, and an app screen peeking
     from the bottom edge (the card's overflow clips the rest). Two anchor cards
     — blue "diary" (two screens) and coral "savvy" (wide) — carry cream text. */
  .feat-bento { margin-top: var(--s-8); display: grid; gap: var(--s-3); }
  @media (min-width: 760px) {
    .feat-bento { grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: stretch; }
    .fcard--big, .fcard--wide { grid-column: 1 / -1; }
  }
  /* the lime-leaf edge silhouette was tuned for the old beige tiles; over the
     colourful bento it crowds the top-right card, so retire it here */
  .features .deco--features { display: none; }
  /* belt-and-suspenders against any horizontal bleed on small screens */
  body { overflow-x: clip; }

  .fcard {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-card);
    padding: var(--s-5);
    padding-bottom: 168px;             /* reveal zone for the peeking screen */
    background: var(--cream-card);
  }
  @media (min-width: 640px) { .fcard { padding: var(--s-6); padding-bottom: 200px; } }
  .fcard__body { position: relative; z-index: 2; }
  .fcard__body p { font-weight: 300; font-size: 0.9375rem; margin-top: var(--s-2); }
  .fcard .tile__title { margin-bottom: var(--s-2); padding-right: 0; }

  /* branded tints */
  .fcard--mint     { background: var(--green-pale); }
  .fcard--lavender { background: var(--accent-lavender-light); }
  .fcard--yellow   { background: var(--accent-yellow); }
  .fcard--orange   { background: var(--accent-orange); }
  /* Saturated anchor cards keep NAVY text: navy on #8A9BCA / #D4736A clears
     ~5:1, whereas cream on these mid-tones is only ~3:1 (fails AA for body). */
  .fcard--blue     { background: var(--accent-blue); }
  .fcard--coral    { background: var(--accent-coral); }

  /* the peeking screen: pinned to the card bottom, only its top region shows */
  .fcard__screen {
    position: absolute;
    left: 50%;
    bottom: -26px;
    width: min(72%, 246px);
    transform: translateX(-50%);
    margin: 0;
  }
  .fcard__cap {
    margin-bottom: var(--s-1);
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--navy);
  }
  .fcard__device {
    height: 190px;                     /* the reveal window — clips the phone's lower half */
    overflow: hidden;
    border: var(--line) solid var(--navy);
    border-bottom: 0;
    border-radius: 30px 30px 0 0;
    padding: 8px 8px 0;
    background: var(--cream-bright);
  }
  .fcard__device img { width: 100%; height: auto; display: block; border-radius: 22px 22px 0 0; }

  /* big card (diary): text + two staggered screens */
  .fcard__pair { position: relative; }
  @media (max-width: 759px) {
    .fcard--big { padding-bottom: 200px; }
    .fcard--big .fcard__pair { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: flex-end; gap: var(--s-2); }
    .fcard--big .fcard__screen { position: static; transform: none; width: 46%; }
    .fcard--big .fcard__screen .fcard__device { height: 168px; }
  }
  @media (min-width: 760px) {
    .fcard--big {
      display: grid;
      grid-template-columns: 1fr 1.12fr;
      gap: var(--s-6);
      align-items: center;
      padding-bottom: var(--s-6);
      min-height: 430px;
    }
    .fcard--big .fcard__body { grid-column: 1; padding-right: var(--s-3); }
    .fcard--big .fcard__pair { grid-column: 2; align-self: stretch; min-height: 430px; }
    /* both screens cluster in the RIGHT of the pair so neither crosses into the
       body-text column (the earlier left:0 back-screen collided with the copy) */
    .fcard--big .fcard__screen { position: absolute; width: 50%; }
    .fcard--big .fcard__screen .fcard__device { height: 250px; }
    .fcard--big .fcard__screen--top    { right: 26%; bottom: 62px;  z-index: 1; }  /* back, sits higher */
    .fcard--big .fcard__screen--bottom { right: 0;   bottom: -24px; z-index: 2; }  /* front, peeks lower */
    /* the two stacked devices overlap, so their captions would collide — drop
       them on desktop (kept in the DOM for the copy gate; mobile shows them
       side-by-side with captions intact) */
    .fcard--big .fcard__cap { display: none; }
  }

  /* wide card (savvy): text left, one screen peeking bottom-right */
  @media (min-width: 760px) {
    .fcard--wide {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-5);
      align-items: center;
      padding-bottom: var(--s-6);
      min-height: 300px;
    }
    .fcard--wide .fcard__body { grid-column: 1; }
    .fcard--wide .fcard__screen { left: auto; right: 4%; bottom: -30px; transform: none; width: 48%; max-width: 300px; }
    .fcard--wide .fcard__screen .fcard__device { height: 240px; }
  }

  /* ════ Block 3b · showcase — angled fan of screens on a branded gradient ════ */
  .showcase {
    padding-block: var(--s-12) var(--s-15);
    overflow: hidden;
    background: linear-gradient(150deg, var(--green-pale) 0%, var(--accent-lavender-light) 100%);
  }
  .showcase__stage { perspective: 2000px; display: flex; justify-content: center; }
  .showcase__row {
    display: flex;
    align-items: center;
    transform: rotateY(-24deg) rotateX(5deg) rotate(-1.5deg);
  }
  .showcase__phone {
    flex: none;
    width: 176px;
    margin: 0 -12px;
    border: var(--line) solid var(--navy);
    border-radius: 32px;
    padding: 7px;
    background: var(--cream-bright);
  }
  .showcase__phone img { border-radius: 26px; width: 100%; height: auto; display: block; }
  /* centre biggest, edges smaller + splayed — a receding fan */
  .showcase__phone.sp--1 { width: 152px; transform: rotate(-3deg); }
  .showcase__phone.sp--2 { width: 176px; transform: rotate(-1.5deg); }
  .showcase__phone.sp--3 { width: 208px; transform: rotate(0);      z-index: 2; }
  .showcase__phone.sp--4 { width: 176px; transform: rotate(1.5deg); }
  .showcase__phone.sp--5 { width: 152px; transform: rotate(3deg); }
  @media (max-width: 767px) {
    .showcase { padding-block: var(--s-8); }
    .showcase__row { transform: rotateY(-14deg) rotate(-1.5deg); }
    .showcase__phone { margin: 0 -9px; }
    .showcase__phone.sp--3 { width: 128px; }
    .showcase__phone.sp--2, .showcase__phone.sp--4 { width: 108px; }
    .showcase__phone.sp--1, .showcase__phone.sp--5 { display: none; }  /* 3-up on phones */
  }

  /* ════ Block 6 · photo-backed join area ════ */
  .join-zone--photo { position: relative; }
  .join-zone--photo .deco--join { display: none; }
  .join-zone__bg { position: absolute; inset: 0; z-index: -3; }
  /* anchor to the top so any cover-crop trims the BOTTOM of the photo */
  .join-zone__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  /* blend the photo out of the green-pale bands that bracket the zone, and keep
     the middle vivid where the mission card floats (background treatment, not a
     UI surface — the cards themselves stay fully opaque) */
  .join-zone__scrim {
    position: absolute; inset: 0; z-index: -2; pointer-events: none;
    /* an even, gentle green-pale wash calms the busy photo behind the beige
       cards and blends the top/bottom edges into the green-pale bands that
       bracket the zone (a background treatment; the cards stay fully opaque) */
    background: linear-gradient(180deg,
      var(--green-pale) 0%,
      rgba(216, 226, 203, 0.42) 13%,
      rgba(216, 226, 203, 0.42) 87%,
      var(--green-pale) 100%);
  }
  .join-card { max-width: 46rem; margin-inline: auto; }
  @media (min-width: 640px) { .join-card { padding: var(--s-6) var(--s-8); } }
  /* the "what you get" heading sits in its own opaque beige label so it reads
     on the photo at any viewport (a card on the photo, like the others) */
  .join-zone--photo .benefits { text-align: center; }
  .join-zone--photo .benefits__head {
    display: inline-block;
    max-width: min(100%, 40rem);
    margin: 0 auto;
    background: var(--cream-card);
    border-radius: var(--r-card);
    padding: var(--s-3) var(--s-6);
    text-align: center;
  }
  .join-zone--photo .benefits__head p { margin-top: var(--s-1); }
  /* centre each numbered card's content so the short ones (01 / 03) don't leave
     a big empty lower half against the taller "founding price" card */
  @media (min-width: 960px) { .join-zone--photo .step { justify-content: center; } }

  /* ════ Block 5 · founder polaroids ════ */
  .polaroid {
    background: var(--cream-bright);
    border: var(--line) solid var(--navy);
    border-radius: 6px;
    padding: 8px 8px 0;
  }
  .polaroid__photo { aspect-ratio: 1 / 1; width: 100%; border-radius: 3px; overflow: hidden; }
  .polaroid .founders__img { border-radius: 3px; }
  .founders__names.hand {
    font-family: var(--f-hand);
    font-size: 1.5rem;
    line-height: 1;
    padding: var(--s-2) 0;
    margin-top: 0;
    color: var(--navy);
  }
  .polaroid--l { transform: rotate(-2.5deg); }
  .polaroid--r { transform: rotate(2deg); }
  /* a touch more room so the tilted frames don't collide */
  .founders__imgs { gap: var(--s-3); }

  /* ════ Block 8→9 · FAQ fades to mint, flowing into the footer ════ */
  .faq { background: linear-gradient(180deg, var(--cream) 0%, var(--green-pale) 100%); }

  @media (max-width: 639px) {
    .fcard { padding-bottom: 150px; }
    .fcard__device { height: 150px; }
    .fcard--big .fcard__pair { gap: var(--s-1); }
    .founders__names.hand { font-size: 1.375rem; }
  }
}