/* ==========================================================================
   Inflamagone V5 — "warm clinical"
   Audience: women 45–65, high scepticism, large-type requirement.
   Not the pale editorial V4. Substantial, warm, high contrast, readable.
   ========================================================================== */

@font-face{font-family:Lora;src:url(assets/lora.ttf) format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:InterV;src:url(assets/inter0.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:InterV;src:url(assets/inter1.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:InterV;src:url(assets/inter2.ttf) format('truetype');font-weight:700;font-display:swap}

:root{
  /* --- surfaces ---
     The old ground was #FAF6EF: a generic warm cream, the most over-used body
     colour in AI-generated brand work. These are tinted toward the brand's own
     green instead of toward warmth-by-default, and the greens run deeper so the
     dark sections read as destinations rather than dividers. */
  --bone:#F4F1E9;
  --bone-2:#EAE4D7;
  --paper:#FFFFFF;
  --forest:#1B3623;
  --forest-2:#122418;
  --forest-3:#0C1A11;

  /* --- ink. All three clear 4.5:1 on bone and paper. --- */
  --ink:#1A1613;
  --ink-2:#544C44;
  --ink-3:#6B6259;

  /* --- brand --- */
  --brick:#A93A25;      /* CTA fill, 4.6:1 on bone for text use */
  --brick-2:#8A2E1C;
  --turmeric:#C68617;    /* decorative fills only — bars, rules, accents */
  --gold-ink:#8A5D0C;    /* gold dark enough to read as text on bone/paper */
  --gold-on-dark:#E9B44C;/* gold light enough to read as text on forest, 6:1 */
  --line:#E5DDD0;
  --line-2:rgba(255,255,255,.2);

  /* --- ink on forest. Lowest step is 5.9:1 on #22402A. --- */
  --on-forest:rgba(255,255,255,.94);
  --on-forest-2:rgba(255,255,255,.80);
  --on-forest-3:rgba(255,255,255,.68);

  --serif:Lora,Georgia,'Times New Roman',serif;
  --sans:InterV,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* --- type scale. 8 steps, no near-duplicates. --- */
  --t-xs:0.8125rem;   /* 13 — timestamps only */
  --t-sm:0.9375rem;   /* 15 — meta, captions */
  --t-md:1.0625rem;   /* 17 — secondary body */
  --t-base:1.125rem;  /* 18 — body */
  --t-lg:1.3125rem;   /* 21 — lead */
  --t-xl:1.625rem;    /* 26 — h3 */
  --t-2xl:3.25rem;    /* 52 — h2 */
  --t-3xl:3.5rem;     /* 56 — big numerals */
  --t-display:4.75rem;  /* 76 — hero h1 only; sized so the CTA clears a 1000px fold */

  /* --- spacing. 4pt rhythm, one scale for the whole page. --- */
  --s-1:4px;   --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-5:24px;  --s-6:32px;  --s-7:48px;  --s-8:64px;
  --s-9:96px;  --s-10:128px;

  --wrap:1180px;
  --r:14px;
  /* Warm-tinted, multi-stop shadows. Flat grey shadows are what make a page
     read as a template; real depth is layered and takes the ground's hue. */
  --shadow:0 1px 2px rgba(40,28,14,.05),0 4px 10px rgba(40,28,14,.045),0 12px 32px rgba(40,28,14,.055);
  --shadow-lg:0 2px 4px rgba(40,28,14,.06),0 10px 24px rgba(40,28,14,.07),0 32px 72px rgba(40,28,14,.11);

  /* --- motion. One shared system so the whole page moves in the same hand. --- */
  --ease-out-quint:cubic-bezier(.22,1,.36,1);   /* entrances */
  --ease-out-quart:cubic-bezier(.25,1,.5,1);    /* state changes */
  --dur-press:120ms;   /* instant feedback */
  --dur-state:240ms;   /* hover, toggle */
  --dur-reveal:640ms;  /* entrances */
  --stagger:70ms;      /* one step in a sequence */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.06;letter-spacing:-.028em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,6vw,var(--t-display))}
h2{font-size:clamp(2.1rem,4.4vw,var(--t-2xl));line-height:1.08}
h3{font-size:clamp(1.35rem,2vw,var(--t-xl));line-height:1.25}
h4{font-size:var(--t-md);line-height:1.3}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-5)}
.center{text-align:center}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}

:where(a,button,summary,details>summary):focus-visible{outline:3px solid var(--turmeric);outline-offset:3px;border-radius:4px}

/* ==========================================================================
   MOTION
   Content is visible by default. The hidden start state is opted into only
   when JS is running AND the visitor hasn't asked for reduced motion, so a
   headless render, a JS failure or a reduce-motion setting all ship the page
   fully readable rather than blank.

   Deliberately NOT a fade-up on every section — that's the tell. Motion is
   spent where the content is genuinely a sequence: the daily-frictions list,
   the comparison being drawn, the 90-day timeline, the rating bars measuring.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js-anim [data-reveal]{
    opacity:0;
    transform:translateY(14px);
    transition:opacity var(--dur-reveal) var(--ease-out-quint),
               transform var(--dur-reveal) var(--ease-out-quint);
    transition-delay:calc(var(--i,0) * var(--stagger));
  }
  .js-anim [data-reveal].is-in{opacity:1;transform:none}

  /* Sequence items lead with a horizontal push — they read as a list being
     laid down, not another block fading up. */
  .js-anim [data-reveal='seq']{transform:translateX(-12px)}

  /* The hero photo resolves rather than slides: scale and blur settling. */
  .js-anim .hero-media img{
    opacity:0;transform:scale(1.03);filter:blur(8px);
    transition:opacity 900ms var(--ease-out-quint),
               transform 1100ms var(--ease-out-quint),
               filter 900ms var(--ease-out-quint);
  }
  .js-anim .hero-media img.is-in{opacity:1;transform:none;filter:none}

  /* Rating bars measure out from the left. scaleX keeps it off the layout. */
  .js-anim .sbar-t i{transform:scaleX(0);transform-origin:left;
    transition:transform 900ms var(--ease-out-quint);
    transition-delay:calc(var(--i,0) * 90ms);}
  .js-anim .sbar-t i.is-in{transform:scaleX(1)}
}

/* ---------- micro-interactions ---------- */
.btn:active{transform:scale(.985)}
.rnav:active:not(:disabled){transform:scale(.94)}
.eyebrow-rating{transition:border-color var(--dur-state) var(--ease-out-quart),
                           transform var(--dur-state) var(--ease-out-quart)}
.eyebrow-rating:hover{transform:translateY(-1px)}
.rcard,.ugc-item,.plan{transition:transform var(--dur-state) var(--ease-out-quart),
                                  box-shadow var(--dur-state) var(--ease-out-quart)}
.rcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.nav a{transition:color var(--dur-state) var(--ease-out-quart),
                  border-color var(--dur-state) var(--ease-out-quart)}
.qa summary{transition:color var(--dur-state) var(--ease-out-quart)}

/* A closed <details> renders nothing, so there's no height to transition.
   Animate the content as it appears instead; closing stays instant, which is
   the right asymmetry anyway (exits are faster than entrances). */
@media (prefers-reduced-motion:no-preference){
  .qa[open] .qa-body,.qa[open] .formula-body{animation:qa-in 320ms var(--ease-out-quart) both}
}
@keyframes qa-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}


/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--brick);color:#fff;text-decoration:none;
  font-family:var(--sans);font-weight:700;font-size:var(--t-md);letter-spacing:.005em;
  padding:1.05rem 1.9rem;border-radius:999px;border:1px solid var(--brick);
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 18px rgba(180,64,42,.22);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
  min-height:56px;
}
.btn:hover{background:var(--brick-2);border-color:var(--brick-2);transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.1),0 10px 26px rgba(180,64,42,.28)}
.btn:active{transform:translateY(0)}
.btn-lg{font-size:var(--t-base);padding:1.2rem 2.3rem;min-height:62px}
.btn-sm{font-size:var(--t-md);padding:.72rem 1.35rem;min-height:46px}
.btn-block{display:flex;width:100%}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42);box-shadow:none}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;box-shadow:none}

.link-down{
  font-weight:600;font-size:var(--t-md);color:var(--ink-2);text-decoration:none;
  border-bottom:1.5px solid var(--line);padding-bottom:3px;
}
.link-down:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- ticker ---------- */
.ticker{background:var(--forest-2);color:var(--on-forest-2);overflow:hidden;font-size:var(--t-xs)}
.ticker-track{display:flex;align-items:center;gap:0;white-space:nowrap;padding:9px 0;animation:slide 44s linear infinite;width:max-content}
.ticker-track span{padding:0 1.4rem;letter-spacing:.05em;font-weight:600}
.ticker-track i{width:4px;height:4px;border-radius:50%;background:var(--turmeric);flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(250,246,239,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:2rem;padding-block:14px}
.brand{flex:none;display:inline-flex;align-items:center;min-height:44px}
.brand img{width:150px;height:auto}
.nav{display:flex;gap:var(--s-6);margin-left:auto;font-size:var(--t-md);font-weight:600}
.nav a{text-decoration:none;color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-color:var(--brick)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(var(--s-6),4vw,var(--s-8)) clamp(var(--s-7),6vw,var(--s-8));background:linear-gradient(180deg,var(--bone) 0%,var(--bone-2) 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(var(--s-6),5vw,var(--s-8));align-items:stretch}

/* The H1 already carries typographic quote marks — no decorative glyph on top. */
.hero-quote{margin:0 0 var(--s-5)}
.hero-quote h1{position:relative}
.hero-quote h1::before{content:'\201C'}
.hero-quote h1::after{content:'\201D'}
.hero-quote cite{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;font-style:normal;margin-top:1.15rem}
.cite-name{font-weight:700;font-size:var(--t-md)}
.cite-meta{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--t-sm);color:var(--ink-3)}
.tick{width:17px;height:17px;fill:#2E7D46;flex:none}

/* Purpose first, composition second — the lead used to open on ingredients. */
.lead{font-size:var(--t-md);color:var(--ink-2);max-width:34em;margin-bottom:var(--s-4);font-weight:400}
.lead-sub{font-size:var(--t-md);color:var(--ink-2);max-width:34em;margin-bottom:var(--s-5)}
.hero .cta-row{margin-bottom:var(--s-4)}
.lead em,.lead-sub em{font-style:italic}

.stars{color:var(--gold-ink);letter-spacing:.1em;font-size:1.05rem}

/* Rating replaces the brand eyebrow — social proof is the first thing read. */
.eyebrow-rating{
  display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  text-decoration:none;color:var(--ink-2);font-size:var(--t-sm);font-weight:600;
  margin:0 0 var(--s-4);padding:var(--s-3) var(--s-4) var(--s-3) var(--s-3);min-height:44px;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
}
.eyebrow-rating strong{color:var(--ink);font-size:var(--t-md)}
.eyebrow-rating:hover{border-color:var(--turmeric)}

.cta-row{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-bottom:1.8rem}

.risk-strip{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;list-style:none;margin:0;padding:0;font-size:.92rem;color:var(--ink-2);font-weight:600}
.risk-strip li{display:flex;align-items:center;gap:.55rem}
.risk-strip svg{flex:none;width:21px;height:21px;color:var(--brick)}

.hero-media{margin:0;position:relative;display:flex;min-height:clamp(380px,46vw,660px)}
.hero-media img{border-radius:var(--r);box-shadow:var(--shadow-lg);width:100%;height:100%;object-fit:cover;object-position:center}

/* The opening narrative reads at a 38rem measure, which left the right half of
   a 1130px wrap empty for its full height. Move the pullout — the section's turn
   — into that column, anchored to the foot of the prose. Desktop only. */
/* The opening narrative carries its own pain image: beside the headline and the
   first paragraph on desktop (filling the column to the text's height), directly
   under the headline on mobile. */
.now-figure{margin:var(--s-5) 0 var(--s-6)}
.now-figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 40%;border-radius:var(--r);box-shadow:var(--shadow)}
@media (min-width:1001px){
  #now .prose{display:grid;grid-template-columns:38rem minmax(0,1fr);column-gap:var(--s-8);align-items:start}
  #now .prose h2{grid-area:1/1}
  #now .prose p:nth-of-type(1){grid-area:2/1}
  #now .prose p:nth-of-type(2){grid-area:3/1;margin-bottom:0}
  #now .prose .now-figure{grid-area:1/2/3/3;align-self:stretch;margin:0 0 var(--s-5);max-width:none}
  #now .prose .now-figure img{height:100%;aspect-ratio:auto}
  #now .prose .pullout{
    grid-area:3/2/4/3;align-self:center;max-width:none;
    margin-top:0!important;padding-top:0;border-top:none;
    padding-left:var(--s-6);border-left:2px solid var(--gold-ink);
  }
}

/* ---------- hero review bullets ---------- */
.hero-shift{list-style:none;margin:0 0 var(--s-3);padding:0;display:flex;flex-direction:column;gap:.55rem;max-width:34em}
.hero-shift li{display:grid;grid-template-columns:1.15rem 1fr;align-items:baseline;gap:.65rem}
.shift-arrow{color:var(--brick);font-weight:700}
.shift-to{font-family:var(--serif);font-size:var(--t-lg);line-height:1.35;color:var(--ink);font-weight:600}
.hero-shift-fine{font-size:var(--t-xs);line-height:1.45;color:var(--ink-3);margin:var(--s-4) 0 0;max-width:34em}

/* ---------- hero video ----------
   The headline lives on the film; the rest of the hero copy sits beneath it.
   16:9 from tablet up, square on a phone (JS swaps in the square encode and
   poster). Reduced motion or no JS: the poster frame stands in for the film. */
.hero-video{
  position:relative;margin:0;display:block;min-height:0;
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);
  background:var(--forest-3);aspect-ratio:16/9;
}
.hero-video video{width:100%;height:100%;object-fit:cover;display:block}
.hero-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(1.4rem,3.6vw,3.2rem);pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,26,17,.5) 0%,rgba(12,26,17,.22) 40%,rgba(12,26,17,0) 65%),
    linear-gradient(100deg,rgba(12,26,17,.5) 0%,rgba(12,26,17,.18) 42%,rgba(12,26,17,0) 68%);
}
.hero-overlay .hero-quote{margin:0;max-width:62%}
.hero-overlay h1{color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);font-size:clamp(2rem,3.7vw,3.4rem);line-height:1.05;max-width:12ch;text-wrap:pretty}
.hero-overlay cite{margin-top:.9rem}
.hero-overlay .cite-name{color:#fff}
.hero-overlay .cite-meta{color:rgba(255,255,255,.82)}
.hero-overlay .tick{fill:var(--gold-on-dark)}
.hero-copy-below{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-5) var(--s-8);
  align-items:start;margin-top:clamp(var(--s-6),4vw,var(--s-7));
}
.hero-copy-below .eyebrow-rating{grid-column:1;margin-bottom:0}
.hero-copy-below .lead{grid-column:1;margin-bottom:0}
.hero-copy-below .hero-shift{grid-column:1;margin-bottom:0}
.hero-copy-below .cta-row{grid-column:2;grid-row:1/4;align-self:center;justify-self:end;flex-direction:column;align-items:stretch;margin:0}
.hero-copy-below .cta-row .btn{min-width:18rem}
.hero-copy-below .risk-strip{grid-column:2;grid-row:4;justify-self:end}
.hero-copy-below .hero-shift-fine{grid-column:1;grid-row:4;margin-top:0}
@media (prefers-reduced-motion:no-preference){
  .js-anim .hero-video{opacity:0;transform:scale(1.015);transition:opacity 900ms var(--ease-out-quint),transform 1200ms var(--ease-out-quint)}
  .js-anim .hero-video.is-in{opacity:1;transform:none}
}
@media (max-width:1000px){
  .hero-copy-below{grid-template-columns:1fr;gap:var(--s-4)}
  .hero-copy-below > *{grid-column:1!important;grid-row:auto!important;justify-self:stretch!important}
  .hero-copy-below .cta-row{margin-top:var(--s-2)}
  .hero-copy-below .cta-row .btn{min-width:0;width:100%}
  .hero-copy-below .hero-shift{max-width:none}
}
@media (max-width:760px){
  /* On a phone the film is a full block: edge to edge, flush to the top under the
     ticker, no radius, no card. The copy beneath keeps its gutter. */
  .hero.hero-has-video{padding-top:0;overflow:hidden}
  /* Bleed by the wrap's gutter (24px, 20px under 640) rather than 100vw, which
     counts a scrollbar where there is one. */
  .hero-video{aspect-ratio:1/1;width:calc(100% + 2 * var(--s-5));margin-inline:calc(-1 * var(--s-5));border-radius:0;box-shadow:none}
  .hero-overlay{padding:1.2rem 1.25rem}
  .hero-overlay h1{font-size:clamp(1.8rem,8vw,2.3rem);max-width:11ch}
  .hero-overlay .hero-quote{max-width:86%}
}

/* ---------- what's inside ---------- */
.inside-grid{display:grid;grid-template-columns:1fr minmax(240px,340px) 1fr;gap:var(--s-6);align-items:center;margin-top:var(--s-6)}
.ins-col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ins-item{display:grid;grid-template-columns:76px 1fr;gap:var(--s-4);align-items:center;padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.ins-item:last-child{border-bottom:none}
.ins-item img,.ins-carrier img{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid var(--paper);box-shadow:0 2px 10px rgba(40,28,14,.16)}
.ins-name{font-family:var(--serif);font-size:var(--t-lg);font-weight:600;line-height:1.2;color:var(--ink);margin:0}
.ins-spec{font-size:var(--t-xs);color:var(--ink-3);margin:.15rem 0 .3rem}
.ins-benefit{font-size:var(--t-md);line-height:1.45;color:var(--ink-2);margin:0}
.inside-bottle{margin:0;display:flex;justify-content:center}
.inside-bottle img{width:100%;max-width:280px;height:auto}
.ins-carrier{display:grid;grid-template-columns:76px 1fr;gap:var(--s-4);align-items:center;max-width:34rem;margin:var(--s-6) auto 0;
  padding:var(--s-4) var(--s-5);background:var(--bone);border:1px solid var(--line);border-radius:var(--r)}
.center-fine{margin-inline:auto;text-align:center}
@media (max-width:760px){
  .inside-grid{grid-template-columns:1fr;gap:0;margin-top:var(--s-4)}
  .inside-bottle{order:-1;margin-bottom:var(--s-3)}
  .inside-bottle img{max-width:190px}
  .ins-col + .inside-bottle + .ins-col .ins-item:first-child{border-top:1px solid var(--line)}
  .ins-col:first-child .ins-item:last-child{border-bottom:1px solid var(--line)}
  .ins-item,.ins-carrier{grid-template-columns:62px 1fr;gap:var(--s-3)}
  .ins-item img,.ins-carrier img{width:62px;height:62px}
  .center-fine{text-align:left}
}

/* ---------- bands ---------- */
.band{padding-block:clamp(var(--s-7),7vw,var(--s-9))}
.band-paper{background:var(--paper)}
.band-bone{background:var(--bone)}
.band-forest{background:var(--forest);color:#fff}
#offer.band-forest{background:var(--forest-2)}
.band-forest h2,.band-forest h3{color:#fff}
.band-close{background:var(--bone-2);padding-block:clamp(var(--s-7),7vw,var(--s-9))}

.band-head{max-width:44rem;margin-bottom:clamp(var(--s-6),4vw,var(--s-7))}
.band-head.center{margin-inline:auto;text-align:center}
.band-sub{font-size:var(--t-lg);color:var(--ink-2);margin-top:var(--s-4)}
.band-forest .band-sub{color:var(--on-forest-2)}

/* One left edge for the whole page. The measure is capped on the children so
   the wrapper keeps the shared gutter instead of centring itself and drifting. */
.prose>*{max-width:38rem}
.prose p{font-size:var(--t-lg);color:var(--ink-2)}
.prose h2{margin-bottom:clamp(var(--s-5),3vw,var(--s-6));color:var(--ink)}
.prose-wide>*{max-width:52rem}

.pullout{
  font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.05rem);line-height:1.3;
  color:var(--ink)!important;font-weight:600;
  margin-top:var(--s-6)!important;padding-top:var(--s-6);border-top:1px solid var(--line);
}

.fine{font-size:var(--t-sm);color:var(--ink-3);max-width:44rem;margin-top:2rem;line-height:1.55}
.band-forest .fine{color:var(--on-forest-3)}

/* ---------- 3 cards ---------- */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-bottom:var(--s-7)}
.card{background:rgba(255,255,255,.07);border:1px solid var(--line-2);border-radius:var(--r);padding:2rem 1.75rem}
.card h3{margin-bottom:.7rem}
.card p{color:var(--on-forest-2);font-size:var(--t-md);margin:0}
.card strong{color:#fff}


/* ---------- quote strip (on forest) ---------- */
.quote-strip{border-top:1px solid var(--line-2);padding-top:2.5rem}
.quote-strip-label{font-family:var(--serif);font-size:var(--t-xl);font-weight:600;line-height:1.2;color:var(--on-forest);margin:0 0 var(--s-5)}
.quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5) var(--s-7)}
.quote-grid blockquote{margin:0;padding:0}
.quote-grid p{font-family:var(--serif);font-size:1.14rem;line-height:1.45;color:var(--on-forest);margin-bottom:.6rem}
.quote-grid cite{font-style:normal;font-size:var(--t-sm);font-weight:700;color:var(--on-forest-3)}

/* ---------- timeline ----------
   A vertical rail on the left at every width. The gold line is tied to the
   scroll position (JS sets --tl from where the reading line sits between the
   first and last node), each numbered node fills as the line reaches it, and
   the card the reader is on lifts. --rail-top/--rail-h are the node centres,
   measured by JS so the line runs exactly node to node. */
.timeline{
  --rail:72px;--node:44px;--node-off:38px;
  list-style:none;position:relative;counter-reset:tl;isolation:isolate;
  max-width:46rem;margin:0 auto var(--s-7);padding:0 0 0 var(--rail);
  display:flex;flex-direction:column;gap:var(--s-5);
}
/* The rail lives at the bottom of the timeline's own stacking context, so it
   is always beneath every node, halo and card, whatever else is layered. */
.timeline::before,.timeline::after{
  content:'';position:absolute;left:calc(var(--node) / 2 - 1.5px);width:3px;border-radius:3px;z-index:-1;
  top:var(--rail-top,var(--node-off));height:var(--rail-h,calc(100% - 2 * var(--node-off)));
  background:var(--line);
}
.timeline::after{
  background:linear-gradient(180deg,var(--gold-ink),var(--turmeric));
  transform-origin:top;transform:scaleY(var(--tl,0));transition:transform 120ms linear;will-change:transform;
}
.timeline li{
  position:relative;counter-increment:tl;
  background:var(--paper);border:1px solid rgba(40,28,14,.09);border-radius:var(--r);
  padding:var(--s-6);box-shadow:var(--shadow);
  transition:transform 520ms var(--ease-out-quint),box-shadow 520ms var(--ease-out-quint),border-color 520ms var(--ease-out-quint);
}
/* The node sits over the rail (z-index) and its halo is opaque, so the line
   never shows through the ring. */
.timeline li::before{
  content:counter(tl);position:absolute;z-index:2;left:calc(-1 * var(--rail));top:calc(var(--node-off) - var(--node) / 2);
  width:var(--node);height:var(--node);border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--ink-3);
  background:var(--bone);border:2px solid var(--line);box-shadow:0 0 0 6px var(--bone);
  transition:background 360ms var(--ease-out-quart),border-color 360ms var(--ease-out-quart),color 360ms var(--ease-out-quart),box-shadow 360ms var(--ease-out-quart),transform 360ms var(--ease-out-quart);
}
.timeline li.is-lit::before,.timeline li.is-done::before{background:var(--gold-ink);border-color:var(--gold-ink);color:#fff;opacity:1}
.timeline li.is-active::before{transform:scale(1.08);box-shadow:0 0 0 6px var(--bone),0 0 0 11px #E9D9BC}
/* The active card lifts with shadow, border and glow only. It must not move:
   the node is drawn relative to the card, and any translate slides it off the rail. */
.timeline li.is-active{box-shadow:var(--shadow-lg);border-color:rgba(138,93,12,.32)}
.timeline li.is-done{box-shadow:var(--shadow)}

/* Reach effects. A light passes over a card as it becomes the active step, a
   tick lands on the day pill once the step is behind you, and the Day 98 card
   turns to dark glass: frosted ground, gold gradient edge, an inner glow that
   switches on, and a ping from its node. */
.tl-fx{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.tl-fx::before{
  content:'';position:absolute;top:-30%;bottom:-30%;left:-35%;width:28%;opacity:0;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-18deg);
}
.timeline li.is-active .tl-fx::before{animation:tl-sheen 1300ms var(--ease-out-quart) 160ms forwards}
@keyframes tl-sheen{0%{left:-35%;opacity:1}100%{left:135%;opacity:0}}
.tl-fx::after{
  content:'';position:absolute;inset:-25%;opacity:0;transition:opacity 1000ms var(--ease-out-quint);
  background:radial-gradient(55% 45% at 16% 10%,rgba(233,180,76,.38),rgba(233,180,76,0) 62%);
}
.timeline li > :not(.tl-fx):not(.tl-ring){position:relative;z-index:1}
.timeline li.is-done .tl-mark::after{
  content:'';display:inline-block;width:8px;height:5px;margin-left:9px;vertical-align:2px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);
  animation:tl-pop 420ms var(--ease-out-quint) both;
}
@keyframes tl-pop{from{transform:rotate(-45deg) scale(0)}to{transform:rotate(-45deg) scale(1)}}

.timeline li.tl-answer{
  background:linear-gradient(135deg,rgba(27,54,35,.9),rgba(12,26,17,.95));
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  border-color:rgba(233,180,76,.14);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.07);
}
.timeline li.tl-answer .tl-fx::before{background:linear-gradient(100deg,rgba(233,180,76,0),rgba(233,180,76,.35),rgba(233,180,76,0))}
.timeline li.tl-answer.is-lit .tl-fx::after{opacity:1}
.tl-ring{
  position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:0;opacity:0;
  background:linear-gradient(135deg,rgba(233,180,76,.85),rgba(233,180,76,.08) 45%,rgba(233,180,76,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity 800ms var(--ease-out-quint);
}
.timeline li.tl-answer.is-lit .tl-ring{opacity:1}
.timeline li.tl-answer.is-lit{box-shadow:0 2px 4px rgba(0,0,0,.12),0 18px 44px rgba(12,26,17,.28),inset 0 1px 0 rgba(255,255,255,.1)}
.timeline li.tl-answer.is-active{border-color:rgba(233,180,76,.5)}
.timeline li.tl-answer.is-lit::before{animation:tl-ping 1500ms var(--ease-out-quart) 1}
@keyframes tl-ping{
  0%{box-shadow:0 0 0 6px var(--bone),0 0 0 8px rgba(198,134,23,.7)}
  100%{box-shadow:0 0 0 6px var(--bone),0 0 0 30px rgba(198,134,23,0)}
}
.tl-mark{
  display:inline-block;font-size:var(--t-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brick);background:#FBEDE9;padding:5px 12px;border-radius:999px;margin-bottom:1rem;
}
.timeline h3{margin-bottom:.6rem}
.timeline p{color:var(--ink-2);font-size:var(--t-md);margin:0;max-width:34rem}
.timeline li.tl-answer{background:var(--forest);border-color:var(--forest)}
.timeline li.tl-answer h3{color:#fff}
.timeline li.tl-answer p{color:var(--on-forest-2)}
.timeline li.tl-answer .tl-mark{background:var(--turmeric);color:#2A1D06}
.timeline li.tl-answer.is-lit::before{background:var(--turmeric);border-color:var(--turmeric);color:#2A1D06}
.timeline li.tl-answer.is-active{border-color:rgba(233,180,76,.5)}
@media (max-width:640px){
  .timeline{--rail:50px;--node:34px;--node-off:30px;gap:var(--s-4);margin-bottom:var(--s-6)}
  .timeline li{padding:var(--s-5)}
  .timeline li::before{font-size:.95rem;box-shadow:0 0 0 4px var(--bone)}
  .timeline li.is-active::before{box-shadow:0 0 0 4px var(--bone),0 0 0 8px #E9D9BC}
}

.test-note{
  font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.4;
  text-align:center;max-width:34rem;margin:0 auto clamp(2.5rem,5vw,4rem);color:var(--ink);
}

/* ---------- testimonial feature ---------- */
.testimonial-feature{border-top:1px solid var(--line);padding-top:2.6rem}
.tf-label{font-family:var(--serif);font-size:var(--t-xl);font-weight:600;line-height:1.2;color:var(--ink);margin:0 0 var(--s-5);text-align:center}
.tf-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--s-6)}
.tf-main{
  margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s-6);box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.tf-main p{font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.44rem);line-height:1.44;margin-bottom:1.3rem;flex:1}
.tf-main strong{color:var(--brick)}
.tf-main cite{font-style:normal;display:flex;flex-direction:column;gap:.15rem}
.tf-side{display:flex;flex-direction:column;gap:1.1rem}
.tf-side blockquote{margin:0;padding:1.3rem 1.5rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.tf-side p{font-size:var(--t-md);line-height:1.5;color:var(--ink-2);margin-bottom:.55rem}
.tf-side cite{font-style:normal;font-weight:700;font-size:var(--t-sm);color:var(--ink-3)}

/* ---------- review groups ---------- */
.rev-group{margin-bottom:var(--s-7)}
.rev-head{
  display:flex;align-items:baseline;gap:var(--s-3);font-family:var(--serif);font-size:var(--t-xl);
  font-weight:600;color:var(--ink);
  padding-bottom:var(--s-4);margin-bottom:var(--s-5);border-bottom:1px solid var(--line);
}
.rev-head::before{content:'';flex:none;width:18px;height:2px;background:var(--gold-ink);align-self:center}
.rev-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s-5)}
.rev{
  margin:0;background:var(--bone);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.7rem;
  display:flex;flex-direction:column;
}
.rev p{font-size:var(--t-md);line-height:1.55;margin-bottom:1rem;flex:1}
.rev strong{color:var(--brick)}
.rev cite{font-style:normal;font-weight:700;font-size:var(--t-sm);color:var(--ink-3)}
.rev-wide{grid-column:span 2;grid-row:span 2;background:var(--forest);border-color:var(--forest)}
.rev-wide p{color:#fff;font-family:var(--serif);font-size:clamp(1.15rem,2.6vw,1.85rem);line-height:1.4}
.rev-wide strong{color:var(--gold-on-dark)}
.rev-wide cite{color:var(--on-forest-3)}

/* Mornings: Victor's own square image, shown whole. Image left, quotes stacked
   right on desktop so neither face nor bottle is cropped by the banner ratio. */
.rev-group-split .rev-figure img{aspect-ratio:1/1;object-position:center}
@media (min-width:761px){
  /* The photo takes the narrower column so its square height stays close to the
     height of the two quotes; the quotes centre their text so a short one does
     not sit at the top of an empty card. */
  .rev-group-split{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);column-gap:var(--s-5);align-items:stretch}
  .rev-group-split .rev-head{grid-column:1/-1}
  .rev-group-split .rev-figure{margin:0}
  .rev-group-split .rev-figure img{aspect-ratio:auto;height:100%;object-fit:cover;object-position:center 58%}
  .rev-group-split .rev-cards{grid-template-columns:1fr;grid-auto-rows:1fr}
  .rev-group-split .rev{justify-content:center}
  .rev-group-split .rev p{flex:0 0 auto}
}

/* ---------- score ---------- */
.score-block{
  margin:0 0 var(--s-6);background:var(--bone);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s-6);display:grid;grid-template-columns:auto 1fr;gap:var(--s-7);align-items:center;
}
.score-num{font-family:var(--serif);line-height:1;text-align:center}
.score-num strong{display:block;font-size:var(--t-3xl);font-weight:600;line-height:1}
.score-num span{font-size:1rem;color:var(--ink-3)}
.score-bars{display:flex;flex-direction:column;gap:.5rem}
.sbar{display:grid;grid-template-columns:2.8rem 1fr 2.5rem;align-items:center;gap:.9rem;font-size:.88rem;color:var(--ink-2)}
.sbar-t{height:9px;background:var(--line);border-radius:999px;overflow:hidden}
.sbar-t i{display:block;height:100%;background:var(--turmeric);border-radius:999px}
.sbar-n{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.score-note{grid-column:1/-1;font-size:var(--t-sm);color:var(--ink-3);margin:0}

/* ---------- what it's for ---------- */
/* Recognition on the left, structure/function on the right. Deliberately NOT
   paired one-to-one — pairing a symptom to a claim implies it treats it. */
.for-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(var(--s-6),5vw,var(--s-8))}
/* Sentence-case subhead, not another tracked-caps kicker. */
.for-label{
  font-family:var(--serif);font-size:var(--t-xl);font-weight:600;line-height:1.2;
  color:var(--ink);margin:0 0 var(--s-5);padding-bottom:var(--s-4);border-bottom:1px solid var(--line);
}
.for-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-4)}
.for-moments li{
  font-family:var(--serif);font-size:var(--t-lg);line-height:1.35;color:var(--ink);
  padding-left:var(--s-5);position:relative;
}
.for-moments li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--brick)}
.for-supports{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-6);align-self:start}
.for-supports li{
  font-size:var(--t-md);color:var(--ink-2);padding-left:var(--s-6);position:relative;font-weight:600;
}
.for-supports li::before{
  content:'';position:absolute;left:0;top:.34em;width:11px;height:6px;
  border-left:2.5px solid #2E7D46;border-bottom:2.5px solid #2E7D46;transform:rotate(-45deg);
}
.for-supports .fine{margin-top:var(--s-5)}

/* ---------- symptom recognition list ---------- */
.sym-list{gap:0!important}
.sym-list li{
  display:flex;align-items:center;gap:var(--s-5);
  padding:var(--s-4) 0;border-bottom:1px solid var(--line);
  font-size:var(--t-lg);line-height:1.3;color:var(--ink);
}
.sym-list li:first-child{padding-top:0}
.sym-list li:last-child{border-bottom:none}
.sym-list li::before{display:none}
.sym-icon{
  flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:rgba(169,58,37,.09);color:var(--brick);
}
.sym-icon svg{width:30px;height:30px;display:block}
.for-moments .fine{margin-top:var(--s-5)}

@media (max-width:640px){
  .sym-list li{font-size:var(--t-md);gap:var(--s-4);padding:.85rem 0}
  .sym-icon{width:42px;height:42px}
  .sym-icon svg{width:25px;height:25px}
}

/* ---------- us vs them ---------- */
.vs{margin:0 0 var(--s-7);background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.vs .fine{margin:0;padding:var(--s-5) var(--s-6) var(--s-6)}
.vs-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-4);padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--line-2)}
.vs-head .vs-col{font-family:var(--serif);font-size:var(--t-xl);margin:0}
.vs-head .vs-them{color:var(--on-forest-3)}
.vs-head .vs-us{color:#fff;text-align:right}
.vs-mark{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#2A1D06;background:var(--gold-on-dark);border-radius:999px;padding:4px 11px;margin:0;
}
.vs-rows{list-style:none;margin:0;padding:0}
.vs-rows li{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);padding:var(--s-4) var(--s-6);border-bottom:1px solid var(--line-2)}
.vs-rows li:last-child{border-bottom:none}
.vs-rows span{display:flex;align-items:flex-start;gap:var(--s-3);font-size:var(--t-md);line-height:1.45}
.vs-rows .vs-them{color:var(--on-forest-3)}
.vs-rows .vs-us{color:#fff;font-weight:600}
.vs-x,.vs-check{flex:none;width:18px;height:18px;margin-top:2px;position:relative}
.vs-x::before,.vs-x::after{content:'';position:absolute;left:2px;top:8px;width:14px;height:2px;background:#D97066}
.vs-x::before{transform:rotate(45deg)}
.vs-x::after{transform:rotate(-45deg)}
.vs-check::before{content:'';position:absolute;left:3px;top:4px;width:11px;height:6px;border-left:2.5px solid var(--gold-on-dark);border-bottom:2.5px solid var(--gold-on-dark);transform:rotate(-45deg)}
.vs+.quote-strip{border-top:1px solid var(--line-2)}

/* ---------- customer photos ---------- */
.ugc{margin-top:var(--s-7)}
.ugc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
.ugc-item{margin:0;background:var(--bone);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ugc-item img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ugc-item figcaption{padding:var(--s-5)}
.ugc-item p{font-family:var(--serif);font-size:var(--t-md);line-height:1.45;color:var(--ink);margin:0 0 var(--s-3)}
.ugc-item cite{font-style:normal;font-size:var(--t-sm);font-weight:700;color:var(--ink-3)}

.plan-was{color:var(--ink-3);font-size:.55em;font-weight:400;margin-right:.25em;text-decoration-thickness:2px}

/* ---------- CTA arrow ---------- */
.btn-arrow{display:inline-block;transition:transform .18s ease}
.btn:hover .btn-arrow{transform:translateX(3px)}

/* ---------- mid-page CTA ---------- */
/* The offer sits far down a long page; this is the conversion moment. */
.mid-cta{
  margin-top:var(--s-7);padding-top:var(--s-7);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;
}
.mid-cta p{
  font-family:var(--serif);font-size:var(--t-lg);line-height:1.4;color:var(--ink);
  max-width:30rem;margin:0;
}
/* On the forest bands the statement has to invert, or it reads as black on green. */
.band-forest .mid-cta p{color:var(--on-forest)}
.band-forest .mid-cta{border-top-color:var(--line-2)}

/* ---------- full-formula disclosure ---------- */
/* It is the last row of the FAQ, not a section of its own — it carries .qa for
   the row chrome and only styles its own body. */
.formula-body{padding:0 3rem var(--s-5) 0}
.formula-list{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4) var(--s-7)}
.formula-list li{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.formula-list b{font-size:var(--t-md)}
.formula-list span{font-size:var(--t-sm);color:var(--ink-3)}
.formula-list i{font-style:italic}

/* ---------- section imagery ---------- */
/* Full-bleed band image: the empty-kitchen beat under the opening copy.
   band-flush drops the section's own bottom padding so the photo ends the band. */
.band-flush{padding-bottom:0}
.band-figure{margin:clamp(2.5rem,5vw,4rem) 0 0;max-height:clamp(240px,32vw,420px);overflow:hidden}
.band-figure img{width:100%;height:100%;object-fit:cover;object-position:center 62%}

/* Inset variant: sits inside the wrap with the section's own rounding, rather
   than bleeding to the viewport edge like the flush band figures. The crop lives
   on the image so the figure still sizes to image + caption. */
.band-figure-inset{
  margin:clamp(2rem,4vw,3rem) 0;max-height:none;overflow:visible;
}
.band-figure-inset img{
  width:100%;height:clamp(220px,26vw,340px);object-fit:cover;object-position:center 42%;
  border-radius:var(--r);display:block;
}
.band-figure-inset figcaption{
  margin-top:.9rem;font-size:var(--t-sm);line-height:1.5;color:var(--ink-3);max-width:42rem;
}
.band-forest .band-figure-inset figcaption{color:var(--on-forest-3)}

/* Closing payoff image sits above the final quote, flush to the band top —
   the band's own top padding is cancelled so there is no bone gap above it. */
.band-close:has(.band-figure-top){padding-top:0}
.band-figure-top{margin:0 0 clamp(2.5rem,5vw,3.5rem);max-height:clamp(260px,30vw,420px)}
.band-figure-top img{object-position:center 62%}

/* The botanicals flat-lay film on the dark green band. Phone: portrait, full
   width, stacked above the comparison quotes. Desktop: a portrait panel beside
   them. The film loads and plays only while it is on screen (JS, .lazy-film). */
.math-figure{margin:0 0 3rem}
.math-figure img{width:100%;border-radius:var(--r);display:block}
.math-figure figcaption{margin-top:.9rem;font-size:.87rem;line-height:1.5;color:var(--on-forest-3);max-width:42rem}
.flat-film{margin:0}
.flat-film video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r);background:var(--forest-3);box-shadow:var(--shadow-lg)}
.why-media{display:grid;gap:var(--s-6);margin-bottom:var(--s-7)}
.why-media .quote-strip{border-top:1px solid var(--line-2);padding-top:2.5rem}
@media (min-width:1001px){
  .why-media{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--s-8);align-items:center}
  .flat-film video{aspect-ratio:4/5;max-height:660px;margin-inline:auto}
  .why-media .quote-strip{border-top:none;padding-top:0}
  .why-media .quote-grid{grid-template-columns:1fr;gap:var(--s-5)}
}

/* Hands, inside the Hands review group. */
.rev-figure{margin:0 0 1.3rem}
.rev-figure img{width:100%;aspect-ratio:3/1.15;object-fit:cover;object-position:center 45%;border-radius:var(--r);display:block}
/* 2.6:1 is a banner on a 1130px column and a letterbox sliver on a 335px one. */
@media (max-width:760px){.rev-figure img{aspect-ratio:3/2}}

/* ---------- all-reviews slider ---------- */
.rslider{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center}
/* One slide = one row of --per-slide cards, every slide the same fixed height.
   Without that the flex track reserves space for the single tallest review out
   of 115, leaving a hole under every short slide. JS reads --per-slide. */
.rtrack{
  --per-slide:3;
  --slide-h:330px;
  display:flex;gap:var(--s-5);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;padding:4px 2px var(--s-4);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.rslide{
  flex:0 0 100%;scroll-snap-align:start;height:var(--slide-h);
  display:grid;grid-template-columns:repeat(var(--per-slide),1fr);gap:var(--s-5);
}
.rtrack::-webkit-scrollbar{height:8px}
.rtrack::-webkit-scrollbar-track{background:transparent}
.rtrack::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.rtrack-empty{color:var(--ink-3);padding:2rem}

.rcard{
  height:100%;display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s-5);box-shadow:var(--shadow);
}
.rcard-low{background:#FDFAF5;border-color:#E8DCC6}
.rcard-stars{color:var(--gold-ink);letter-spacing:.09em;font-size:var(--t-md);margin:0 0 .55rem}
/* Clamped so a long title can't blow out the grid row height. */
.rcard-title{font-size:var(--t-md);line-height:1.3;margin:0 0 .55rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard-body{flex:1;min-height:0;position:relative;margin-bottom:var(--s-3);overflow:hidden}
/* .is-cut is set by JS only on bodies that actually overflow, so a short
   review never appears to fade out mid-sentence. */
.rcard-body.is-cut::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--paper));pointer-events:none}
.rcard-low .rcard-body.is-cut::after{background:linear-gradient(to bottom,rgba(253,250,245,0),#FDFAF5)}
.rcard-body p{font-size:var(--t-md);line-height:1.55;color:var(--ink-2);margin:0}



.rcard-foot{
  flex:none;padding-top:var(--s-3);border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
}
.rcard-name{font-weight:700;font-size:var(--t-sm)}
.rcard-date{font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap}

.rnav{
  flex:none;width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);color:var(--ink);
  display:grid;place-items:center;box-shadow:var(--shadow);transition:background .18s,color .18s,opacity .18s;
}
.rnav svg{width:22px;height:22px}
.rnav:hover:not(:disabled){background:var(--forest);border-color:var(--forest);color:#fff}
.rnav:disabled{opacity:.32;cursor:default}

.rslider-foot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-3)}
.rcount{font-weight:700;font-size:var(--t-sm);margin:0;font-variant-numeric:tabular-nums}
.rsource{font-size:var(--t-sm);color:var(--ink-3);margin:0}

/* ---------- ingredients ---------- */
.__removed-ing-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5);margin-bottom:var(--s-5)}
.ing{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.ing img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ing-body{padding:1.75rem}
.ing-body h3{margin-bottom:.35rem}
.ing-spec{font-size:var(--t-sm);color:var(--ink-3);font-weight:600;margin-bottom:1rem}
.ing-body p{font-family:var(--serif);font-size:1.08rem;line-height:1.5;color:var(--ink-2)}
.ing-attr{font-family:var(--sans)!important;font-size:.87rem!important;font-weight:700;color:var(--ink-3)!important;margin:0!important}

.ing-rest{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.ir{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.45rem}
.ir h4{margin-bottom:.3rem}
.ir .ing-spec{margin:0}
.ir-wide{grid-column:span 4;display:grid;grid-template-columns:auto 1fr;gap:.4rem 2rem;align-items:baseline}
.ir-note{font-family:var(--serif);font-size:1.05rem;color:var(--ink-2);grid-column:1/-1;margin:.7rem 0 0}
.tag{
  display:inline-block;font-family:var(--sans);font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#2A1D06;background:var(--turmeric);padding:3px 9px;border-radius:4px;
  vertical-align:middle;margin-left:.5rem;
}

/* ---------- founder ---------- */
.founder-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(var(--s-6),5vw,var(--s-8));align-items:center}
.founder-media{margin:0;position:relative}
.founder-media img{border-radius:var(--r);box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 12%}
.founder-copy h2{margin-bottom:1.4rem}
.founder-copy p{font-size:var(--t-md);color:var(--ink-2)}
.founder-quote{
  margin:var(--s-6) 0 0;padding:var(--s-5) 0 0;border-top:1px solid var(--line);
}
.founder-quote p{font-family:var(--serif);font-size:1.28rem;line-height:1.4;color:var(--ink);margin-bottom:.6rem}
.founder-quote cite{font-style:normal;font-weight:700;font-size:.9rem;color:var(--ink-3)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.34rem);font-weight:600;line-height:1.3;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:'';position:absolute;right:.4rem;top:50%;width:15px;height:15px;
  border-right:2.5px solid var(--brick);border-bottom:2.5px solid var(--brick);
  transform:translateY(-65%) rotate(45deg);transition:transform .22s ease;
}
.qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.qa summary:hover{color:var(--brick)}
.qa-body{padding:0 3rem 1.7rem 0}
.qa-body p{font-size:var(--t-md);color:var(--ink-2)}

/* ---------- plans ---------- */
.plans{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--s-5);align-items:stretch}
.plans-2{grid-template-columns:1fr 1fr;max-width:940px;margin-inline:auto}
.plan-flag-quiet{background:transparent;border:1px solid var(--line-2);color:var(--on-forest-2)}
.plan{
  background:rgba(255,255,255,.07);border:1px solid var(--line-2);border-radius:var(--r);
  padding:2rem 1.8rem;display:flex;flex-direction:column;
}
.plan-hero{background:var(--paper);border-color:var(--paper);color:var(--ink);box-shadow:var(--shadow-lg)}
.plan-hero h3{color:var(--ink)}
.plan-flag{
  display:inline-block;align-self:flex-start;font-size:var(--t-xs);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;background:var(--brick);color:#fff;padding:6px 12px;border-radius:999px;margin:0 0 var(--s-4);
}
.plan h3{margin-bottom:.9rem}
.plan-price{font-family:var(--serif);font-size:2.7rem;line-height:1;margin:0 0 .4rem}
.plan-unit{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink-3)}
.plan:not(.plan-hero) .plan-unit{color:var(--on-forest-3)}
.plan-per{font-size:var(--t-sm);color:var(--ink-3);margin-bottom:1.4rem}
.plan:not(.plan-hero) .plan-per{color:var(--on-forest-3)}
.plan-list{list-style:none;margin:0 0 1.75rem;padding:0;font-size:.98rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.plan-list li{position:relative;padding-left:1.6rem;color:var(--ink-2)}
.plan:not(.plan-hero) .plan-list li{color:var(--on-forest-2)}
.plan-list li::before{
  content:'';position:absolute;left:0;top:.45em;width:9px;height:5px;
  border-left:2px solid var(--turmeric);border-bottom:2px solid var(--turmeric);transform:rotate(-45deg);
}
.plan-note{font-size:var(--t-xs);color:var(--ink-3);margin:var(--s-3) 0 0;line-height:1.45}
.plan:not(.plan-hero) .plan-note{color:var(--on-forest-3)}

/* Only claims we can actually evidence. No invented certifications — anything
   needing client substantiation stays out until Charlotte supplies it. */
.trust-row{
  list-style:none;margin:var(--s-7) 0 var(--s-5);padding:var(--s-5) 0 0;
  border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-5);
}
.trust-row li{display:flex;flex-direction:column;gap:3px}
.trust-row b{font-size:var(--t-sm);color:#fff}
.trust-row span{font-size:var(--t-xs);color:var(--on-forest-3);line-height:1.45}

.offer-fine{text-align:center;font-size:var(--t-sm);color:var(--on-forest-3);margin:var(--s-5) 0 0}
.offer-close{
  text-align:center;font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.75rem);
  color:#fff;margin:2.4rem auto 0;max-width:30rem;line-height:1.35;
}

/* ---------- close ---------- */
.close-quote{margin:0 0 2.2rem}
.close-quote h2{margin-bottom:.9rem}
.close-quote cite{font-style:normal;font-size:.95rem;font-weight:700;color:var(--ink-3)}

/* ---------- footer ---------- */
.site-footer{background:var(--forest-2);color:var(--on-forest-3);padding-block:var(--s-7);font-size:var(--t-sm)}
.site-footer .wrap{max-width:52rem;text-align:center}
.foot-logo{width:150px;margin:0 auto var(--s-4);background:var(--paper);padding:var(--s-3) var(--s-4);border-radius:8px}
.foot-tag{font-family:var(--serif);font-size:var(--t-lg);color:var(--on-forest);margin-bottom:1.8rem}
.disclaimer{font-size:var(--t-xs);line-height:1.6;color:var(--on-forest-3);margin-bottom:1.4rem}
.foot-meta{font-size:var(--t-xs);color:var(--on-forest-3);margin:0}

/* ---------- sticky cta ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--paper);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(26,22,19,.1);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .28s ease;
}
.sticky-cta.is-in{transform:translateY(0)}
.sticky-inner{display:flex;align-items:center;gap:1rem;max-width:var(--wrap);margin-inline:auto}
.sticky-text{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.sticky-text strong{font-size:1rem}
.sticky-text span{font-size:.85rem;color:var(--ink-3)}

/* ---------- build-only markers ---------- */
[data-pending]:not(.pending-inline){background:#FFF3D6;border:1px dashed #C68617;border-radius:6px;padding:.6rem .8rem;display:block;color:#6B4E0C!important;font-size:.85rem!important;font-weight:600}
.pending-inline{background:#FFF3D6;border:1px dashed #C68617;border-radius:8px;padding:0 .6rem;display:inline-block;color:#6B4E0C!important;font-size:inherit;font-family:inherit}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  /* No header on a phone: the nav is already hidden here, so it was only a logo
     competing with a button. The ticker carries the trust line, the hero carries
     the brand, and the sticky bar carries the CTA. */
  .site-header{display:none}
  .hero-media{min-height:0}
  .hero-quote::before{font-size:7rem;top:-2rem}
  .cards-3{grid-template-columns:1fr;gap:1.1rem}
  .tf-grid{grid-template-columns:1fr}
  .rev-cards{grid-template-columns:1fr 1fr}
  .rev-wide{grid-column:span 2;grid-row:auto}
  .ing-rest{grid-template-columns:1fr 1fr}
  .ir-wide{grid-column:span 2}
  .rtrack{--per-slide:2}
  .for-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .ugc-grid{grid-template-columns:1fr}
  .founder-grid{grid-template-columns:1fr;gap:2.2rem}
  .founder-media{max-width:26rem}
  .plans{grid-template-columns:1fr;gap:1.2rem}
  .plans-2{max-width:34rem}
  .trust-row{grid-template-columns:repeat(2,1fr);max-width:34rem;margin-inline:auto}
  .trust-row li:last-child:nth-child(odd){grid-column:1/-1}
  .nav{display:none}
}

@media (max-width:640px){
  body{font-size:17px}
  .wrap{padding-inline:20px}
  .band{padding-block:3rem}
  .hero{padding-block:2.5rem 3rem}
  .hero.hero-has-video{padding-top:0}
  .hero-video{width:calc(100% + 40px);margin-inline:-20px}
  h1{font-size:clamp(2.1rem,9vw,2.9rem)}
  h2{font-size:clamp(1.7rem,7vw,2.2rem)}
  .hero-quote::before{font-size:5rem;top:-1.4rem;left:-.3rem}
  .cta-row{flex-direction:column;align-items:stretch;gap:1rem}
  .cta-row .btn{width:100%}
  .link-down{text-align:center;border:none}
  .quote-grid{grid-template-columns:1fr;gap:1.5rem}
  .rev-cards{grid-template-columns:1fr}
  .rev-wide{grid-column:span 1}
  .__removed-ing-list{grid-template-columns:1fr}
  .ing-rest{grid-template-columns:1fr}
  .ir-wide{grid-column:span 1;grid-template-columns:1fr}
  .score-block{grid-template-columns:1fr;gap:1.5rem;padding:1.7rem}
  .score-num{text-align:left;display:flex;align-items:baseline;gap:.5rem}
  .score-num strong{font-size:3.2rem}
  .qa summary{font-size:1.12rem;padding-right:2.4rem}
  .qa-body{padding-right:0}
  .pullout{font-size:1.35rem}

  /* ---- mobile: strip card chrome ----
     Every multi-column grid collapses to one column on a phone, so a 3-up of
     cards becomes a tower of identical boxes. #reviews alone was 4,503px of
     them. Without the box, the same quotes read as a list at a third the
     height, and the group headings do the structural work instead. */
  .rev,.tf-side blockquote,.tf-main{
    background:none;border:none;border-radius:0;box-shadow:none;padding:0;
  }
  .rev-cards{gap:0}
  /* One quote per theme on a phone. The full 115 sit in the slider directly
     below, so 11 stacked quotes here is the same proof twice at double the
     scroll. Desktop keeps all three across. */
  .rev-cards .rev:nth-child(n+2){display:none}
  .rev{padding:var(--s-5) 0;border-top:1px solid var(--line)}
  .rev-cards .rev:first-child{border-top:none;padding-top:0}
  .tf-side blockquote:first-child{border-top:none}
  .rev p{font-size:var(--t-md);margin-bottom:var(--s-2)}
  .rev-wide{background:none;border:none;padding:var(--s-5) 0}
  .rev-wide p{color:var(--ink);font-size:var(--t-lg)}
  .rev-wide strong{color:var(--gold-ink)}
  .rev-wide cite{color:var(--ink-3)}
  .tf-grid{gap:0}
  .tf-side{gap:0}
  .tf-side blockquote{padding:var(--s-5) 0;border-top:1px solid var(--line)}
  .tf-main{padding-bottom:var(--s-5)}
  .for-supports{background:none;border:none;padding:0}
  /* The comparison stacks: each row becomes them-then-us, still paired. */
  .vs-head{grid-template-columns:1fr;text-align:center;gap:var(--s-2);padding:var(--s-5)}
  .vs-head .vs-us{text-align:center}
  .vs-mark{justify-self:center}
  .vs-rows li{grid-template-columns:1fr;gap:var(--s-2);padding:var(--s-4) var(--s-5)}
  .for-moments li{font-size:var(--t-md)}
  .header-inner{padding-block:11px;gap:var(--s-3)}
  .brand img{width:138px}
  /* The label must not wrap in the header — it makes the bar tall and cramped. */
  .btn{white-space:nowrap}
  /* The header button was 1.5x the logo's width. Drop the decorative arrow here
     rather than shrinking the label — this audience needs the text legible, and
     every other CTA on the page still carries the arrow. */
  .site-header .btn-sm{font-size:var(--t-sm);padding:.6rem .95rem;min-height:42px}
  .site-header .btn-sm .btn-arrow{display:none}
  /* Touch users swipe the track; the arrows only take up room. */
  .rslider{grid-template-columns:1fr}
  .rnav{display:none}
  /* Arrows move under the track — side arrows would eat the card width — and
     the slide stops short of full width so the next card peeks and the
     thing reads as swipeable rather than as a single static card. */
  .rslider{
    grid-template-columns:52px 52px 1fr;
    grid-template-areas:"track track track" "prev next .";
    gap:var(--s-4) var(--s-3);
  }
  .rtrack{grid-area:track;--per-slide:1;--slide-h:300px;gap:var(--s-3)}
  .rslide{flex:0 0 84%}
  .rnav{display:grid;grid-area:prev;width:52px;height:52px}
  .rnav-next{grid-area:next}
  .rslider-foot{margin-top:0}
  .score-block{margin-bottom:var(--s-5)}
  .formula-list{grid-template-columns:1fr;gap:var(--s-4)}
  .mid-cta{flex-direction:column;align-items:stretch;text-align:left}
  .mid-cta .btn{width:100%}
}

/* ==========================================================================
   MATERIALITY
   A perfectly flat colour field is the single clearest tell of a generated
   page. Real printed and photographed surfaces have grain. This is a tiny
   inline SVG turbulence, fixed to the viewport so it never scrolls with
   content, kept under 4% opacity so it is felt rather than seen.
   ========================================================================== */
body::before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Dark bands take the grain as light, not shadow, or it turns to mud. */
.band-forest::after,.site-footer::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band-forest,.site-footer{position:relative}
.band-forest>*,.site-footer>*{position:relative;z-index:1}

/* The dark bands earn their weight: a deep vertical gradient rather than one
   flat fill, so they read as a lit space instead of a coloured rectangle. */
.band-forest{background:linear-gradient(170deg,var(--forest) 0%,var(--forest-2) 62%,var(--forest-3) 100%)}
#offer.band-forest{background:linear-gradient(200deg,var(--forest-2) 0%,var(--forest-3) 70%,#08130C 100%)}
.site-footer{background:var(--forest-3)}

/* A hairline of brand gold where light meets dark. One pixel, but it stops the
   sections butting together like stacked divs. */
.band-forest{border-top:1px solid rgba(233,180,76,.22);border-bottom:1px solid rgba(233,180,76,.14)}

/* ---------- hero: asymmetry and bleed ---------- */
/* The photo breaks its column and runs to the viewport edge. Everything on the
   page sat politely inside 1180px; one deliberate break gives the fold scale. */
@media (min-width:1001px){
  .hero{overflow:hidden}
  /* The copy is the payload — it gets the larger column. The photo keeps a
     half-width bleed for scale without competing with the headline. */
  .hero-grid{grid-template-columns:1.22fr .78fr;align-items:center}
  /* A partial bleed stopped ~85px short of the edge and read as a mistake.
     The asymmetric column split now carries the composition; the photo sits
     on the grid and keeps all four corners. */
  .hero-media{min-height:clamp(400px,34vw,560px)}
  .hero-media img{border-radius:var(--r)}
  /* A warm bloom behind the headline, picking up the light in the photograph. */
  .hero::before{
    content:'';position:absolute;top:-18%;left:-12%;width:58%;height:110%;pointer-events:none;
    background:radial-gradient(ellipse at 35% 45%, rgba(233,180,76,.13), rgba(233,180,76,0) 62%);
  }
  .hero{position:relative}
  .hero-grid{position:relative;z-index:1}
}

/* ---------- photographic treatment ---------- */
/* Every image gets the same faint warm lift so the AI-generated set and the two
   real customer photos read as one shoot rather than a stock mixture. */
.hero-media img,.band-figure img,.math-figure img,.rev-figure img,
.ugc-item img,.founder-media img{
  filter:saturate(1.04) contrast(1.03);
}

/* ---------- surface refinement ---------- */
.for-supports,.rcard,.timeline li,.ugc-item,.plan-hero{
  border-color:rgba(40,28,14,.09);
}
.plan-hero{box-shadow:0 2px 4px rgba(0,0,0,.08),0 18px 40px rgba(0,0,0,.22),0 48px 90px rgba(0,0,0,.18)}

/* The pullout is the page's turn — give it the weight of a pull quote. */
.pullout{
  font-size:clamp(1.7rem,3.4vw,2.4rem)!important;
  letter-spacing:-.025em;
}

/* Buttons: a subtle inner light so they read as an object, not a filled rect. */
.btn{
  background-image:linear-gradient(175deg,rgba(255,255,255,.13),rgba(255,255,255,0) 55%);
  box-shadow:0 1px 2px rgba(70,20,10,.18),0 8px 20px rgba(169,58,37,.26),inset 0 1px 0 rgba(255,255,255,.16);
}
.btn:hover{box-shadow:0 2px 5px rgba(70,20,10,.22),0 14px 32px rgba(169,58,37,.32),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-ghost{background-image:none;box-shadow:none}

/* ==========================================================================
   ELEVATION PASS
   An editorial spine (numbered kickers with a rule that draws in), masked
   word-by-word headline reveals, framed photographs that wipe in and drift
   with the scroll, a progress line on the 90-day timeline, ghost numerals on
   the dark cards, a slow gold sweep round the recommended plan, and a
   full-bleed cinematic close. Everything degrades to the static page without
   JS or under reduced motion.
   ========================================================================== */

/* ---------- kickers ---------- */
.kicker{
  display:flex;align-items:center;gap:.75rem;margin:0 0 var(--s-4);
  font-family:var(--sans);font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.kicker-n{font-family:var(--serif);font-size:1.05rem;font-weight:600;letter-spacing:0;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.kicker::after{content:'';flex:0 0 44px;height:1px;background:var(--gold-ink);transform-origin:left}
.kicker-center{justify-content:center}
.band-forest .kicker{color:var(--on-forest-3)}
.band-forest .kicker-n{color:var(--gold-on-dark)}
.band-forest .kicker::after{background:var(--gold-on-dark)}
#now .prose .kicker{max-width:none}
/* The kicker takes the first row of the opening grid; everything else moves down one. */
@media (min-width:1001px){
  #now .prose .kicker{grid-area:1/1;margin-bottom:0}
  #now .prose h2{grid-area:2/1}
  #now .prose p:nth-of-type(1){grid-area:3/1}
  #now .prose p:nth-of-type(2){grid-area:4/1}
  #now .prose .now-figure{grid-area:1/2/4/3}
  #now .prose .pullout{grid-area:4/2/5/3}
}

/* ---------- masked word reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .js-anim .kicker::after{transform:scaleX(0);transition:transform 800ms var(--ease-out-quint) 180ms}
  .js-anim .kicker.is-in::after{transform:scaleX(1)}
  .js-anim .hw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
  .js-anim .hw>span{display:inline-block;transform:translateY(108%);transition:transform 760ms var(--ease-out-quint);transition-delay:calc(var(--w,0) * 42ms)}
  .js-anim .is-in>.hw>span{transform:none}
}

/* ---------- framed photographs: wipe in, drift on scroll ---------- */
.px-frame{position:relative;overflow:hidden;border-radius:var(--r);box-shadow:var(--shadow);min-height:0}
.px-frame img{border-radius:0!important;box-shadow:none!important;transform:translate3d(0,var(--py,0),0) scale(1.09);will-change:transform}
.founder-media .px-frame{box-shadow:var(--shadow-lg)}
#now .prose .now-figure .px-frame,.rev-group-split .rev-figure .px-frame{height:100%}
@media (prefers-reduced-motion:no-preference){
  .js-anim .px-frame{clip-path:inset(0 0 100% 0);transition:clip-path 1000ms var(--ease-out-quint)}
  .js-anim .px-frame.is-in{clip-path:inset(0)}
  .js-anim .px-frame img{transition:transform 120ms linear}
}

/* Wide figure straight under a section headline (#for). */
.band-figure-wide{margin-top:0}
.band-figure-wide img{height:clamp(220px,30vw,400px);object-position:center 50%}
.band-head + .band-figure-wide{margin-top:calc(-1 * clamp(var(--s-4),2vw,var(--s-5)))}

/* Captions ride on the photograph from tablet up; stay beneath it on a phone,
   where a three-line chip would cover a third of the frame. */
@media (min-width:761px){
  .band-figure-inset{position:relative}
  .band-figure-inset figcaption{
    position:absolute;left:var(--s-4);bottom:var(--s-4);margin:0;z-index:2;
    max-width:min(30rem,calc(100% - 2 * var(--s-4)));
    background:rgba(244,241,233,.94);color:var(--ink-2);padding:.6rem .95rem;border-radius:8px;
    font-size:var(--t-sm);line-height:1.45;box-shadow:var(--shadow);backdrop-filter:blur(6px);
  }
  .band-forest .band-figure-inset figcaption{color:var(--ink-2)}
}

/* ---------- 90-day test: the last-three photograph beside Cindy's quote ---------- */
.tf-figure{margin:0}
.tf-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 55%;display:block}
.tf-figure figcaption{margin-top:.8rem;font-size:var(--t-sm);color:var(--ink-3);line-height:1.45}
@media (min-width:1001px){
  .tf-grid{grid-template-columns:.95fr 1.05fr;grid-template-areas:"fig main" "side side";align-items:stretch}
  .tf-figure{grid-area:fig;display:flex;flex-direction:column}
  .tf-figure .px-frame{flex:1}
  .tf-figure .px-frame img,.tf-figure > img{height:100%;aspect-ratio:auto}
  .tf-main{grid-area:main}
  .tf-side{grid-area:side;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);align-items:start}
}
@media (max-width:640px){.tf-figure{margin-bottom:var(--s-5)}}

/* ---------- the first 90 days ----------
   A day counter runs 0 → 90 with the scroll (JS sets --jp from where the
   reading line sits inside the three stages). Desktop: a horizontal rail with
   a chip riding the fill and three columns beneath. Phone: a vertical rail on
   the left, the chip pinned to the top of the screen, stages stacked. One real
   bottle appears per 30 days — three by the test. */
.band-journey{background:linear-gradient(180deg,var(--bone-2) 0%,var(--bone) 42%,var(--bone) 100%)}
.journey{--jp:0;position:relative;max-width:64rem;margin:0 auto}
/* The rail, the chip and the stages share one box, so the rail ends with the
   last card and the chip lets go there instead of riding into the closing copy. */
.journey-body{position:relative;padding-top:60px}
.journey-track{position:relative;margin:0 0 var(--s-6)}
.journey-rail{position:relative;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.journey-fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--jp));background:linear-gradient(90deg,var(--gold-ink),var(--turmeric));transition:transform 120ms linear}
.journey-marks{list-style:none;margin:.7rem 0 0;padding:0;display:flex;justify-content:space-between;font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.journey-marks li{position:relative;flex:0 0 auto}
.journey-marks li::before{content:'';position:absolute;top:calc(-.7rem - 8px);left:50%;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--line);transform:translateX(-50%);transition:background 300ms,border-color 300ms}
.journey-marks li:first-child::before{left:0;transform:none}
.journey-marks li:last-child::before{left:auto;right:0;transform:none}
.journey-marks li.is-lit::before{background:var(--gold-ink);border-color:var(--gold-ink)}
.journey-chip{
  position:absolute;top:0;left:clamp(64px,calc(var(--jp) * 100%),calc(100% - 64px));transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
  background:var(--forest);color:#fff;border-radius:999px;padding:.4rem .85rem;
  font-size:var(--t-sm);font-weight:600;box-shadow:var(--shadow);transition:left 120ms linear;
}
.journey-chip::after{content:'';position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:var(--forest);transform:translateX(-50%) rotate(45deg)}
.journey-chip b{font-variant-numeric:tabular-nums}
.journey-bottle{color:var(--gold-on-dark);font-weight:700}
.journey-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.jstage{
  position:relative;background:var(--paper);border:1px solid rgba(40,28,14,.09);border-radius:var(--r);padding:var(--s-6) var(--s-5);box-shadow:var(--shadow);
  transition:transform 520ms var(--ease-out-quint),box-shadow 520ms var(--ease-out-quint),border-color 520ms var(--ease-out-quint);
}
.jstage.is-active{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(138,93,12,.32)}
/* Bottles stay in full colour; they settle onto the card as the stage is reached. */
.jstage-bottles{display:flex;align-items:flex-end;gap:6px;height:64px;margin-bottom:var(--s-4)}
.jstage-bottles img{width:auto;height:64px;opacity:.55;transition:opacity 500ms var(--ease-out-quart),transform 500ms var(--ease-out-quint);transform:translateY(6px)}
.jstage.is-lit .jstage-bottles img{opacity:1;transform:none}
.jstage.is-lit .jstage-bottles img:nth-child(2){transition-delay:120ms}
.jstage.is-lit .jstage-bottles img:nth-child(3){transition-delay:240ms}
/* The test card carries a still of three bottles with capsules instead of cutouts. */
.jstage-test .jstage-bottles{height:auto;margin-bottom:var(--s-4)}
.jstage-test .jstage-bottles img{height:auto;width:100%;max-width:260px;opacity:.85;filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}
.jstage-test.is-lit .jstage-bottles img{opacity:1}
.journey-fill{transition:none}
.journey-chip{transition:none}
.jstage-days{font-size:var(--t-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .5rem}
.jstage h3{margin-bottom:.6rem}
.jstage > p:not(.jstage-days){color:var(--ink-2);font-size:var(--t-md);margin-bottom:var(--s-4)}
.jstage blockquote{margin:0 0 var(--s-3);padding:var(--s-4);background:var(--bone);border:1px solid var(--line);border-radius:10px}
.jstage blockquote p{font-family:var(--serif);font-size:1.02rem;line-height:1.45;color:var(--ink);margin:0 0 .45rem}
.jstage blockquote cite{font-style:normal;font-size:var(--t-xs);font-weight:700;color:var(--ink-3)}
.jstage .jq-quiet p{color:var(--ink-2)}
.jstage-test{background:var(--forest);border-color:var(--forest)}
.jstage-test h3{color:#fff}
.jstage-test > p:not(.jstage-days){color:var(--on-forest-2)}
.jstage-test .jstage-days{color:var(--gold-on-dark)}
.jstage-test blockquote{background:rgba(255,255,255,.07);border-color:var(--line-2)}
.jstage-test blockquote p{color:var(--on-forest)}
.jstage-test blockquote cite{color:var(--on-forest-3)}
.jstage-test.is-active{border-color:rgba(233,180,76,.5)}

/* Aura on the test card: a breathing golden glow that emanates outward from the
   card edge (masked to the outside so the card itself stays crisp) and a slow
   gold light circling the border. Both switch on when Day 61–90 is reached. */
@property --aura{syntax:'<angle>';inherits:false;initial-value:0deg}
/* The halo lives on its own element (`.jstage-aura`), not a pseudo: on phones
   `.jstage::before` is the rail dot, and sharing the pseudo turned the aura into a
   corner smudge and then into a pulsing dot. A box-shadow on a transparent box
   sized to the card is even on every side at every width. */
.jstage-aura{
  position:absolute;inset:-2px;border-radius:calc(var(--r) + 2px);pointer-events:none;opacity:0;
  box-shadow:0 0 26px 8px rgba(233,180,76,.5),0 0 64px 20px rgba(233,180,76,.26);
  transition:opacity 900ms var(--ease-out-quint);
}
.jstage-test.is-lit .jstage-aura{opacity:1;animation:aura-breathe 4.4s ease-in-out infinite}
@keyframes aura-breathe{0%,100%{opacity:.55;transform:scale(.995)}50%{opacity:1;transform:scale(1.012)}}
.jstage-test::after{
  content:'';position:absolute;inset:-2px;border-radius:calc(var(--r) + 2px);padding:2px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--aura),rgba(233,180,76,0) 0 56%,rgba(233,180,76,.95) 72%,rgba(233,180,76,0) 88% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity 800ms var(--ease-out-quint);
}
.jstage-test.is-lit::after{opacity:1;animation:aura-spin 9s linear infinite}
@keyframes aura-spin{to{--aura:360deg}}
.jstage-test > :not(.jstage-aura){position:relative}
.journey-honest{
  margin:var(--s-7) auto 0;max-width:40rem;text-align:center;
  padding:var(--s-6) 0 0;border-top:1px solid var(--line);
}
.journey-honest-lead{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.4;color:var(--ink);margin-bottom:var(--s-4)}
.journey-honest-rule{font-size:var(--t-md);color:var(--ink-2);margin-bottom:var(--s-5)}
#journey .center-fine{margin-top:var(--s-6)}
@media (max-width:1000px){
  .journey{--jrail:44px}
  .journey-body{padding-top:0}
  .journey-track{position:absolute;left:0;top:0;bottom:0;width:var(--jrail);margin:0}
  .journey-rail{position:absolute;left:12px;top:18px;bottom:calc(var(--s-5) + 6px);width:3px;height:auto}
  .journey-fill{transform-origin:top;transform:scaleY(var(--jp))}
  .journey-marks{display:none}
  /* On a phone the chip caps the rail: it sits at the top of the timeline, over
     the rail's start, with the first card directly beneath. Not sticky — a chip
     floating alone above the cards, or hovering over their text, reads as lost. */
  .journey-chip{position:relative;top:auto;left:auto;transform:none;margin:0 0 var(--s-4) 2px;z-index:2;transition:none}
  .journey-chip::after{display:none}
  .journey-rail{top:18px}
  .journey-stages{grid-template-columns:1fr;gap:var(--s-4);padding-left:var(--jrail)}
  .jstage{padding:var(--s-5)}
  .jstage::before{content:'';position:absolute;left:calc(-1 * var(--jrail) + 7px);top:var(--s-5);width:13px;height:13px;border-radius:50%;background:var(--bone);border:2px solid var(--line);box-shadow:0 0 0 3px var(--bone);transition:background 300ms,border-color 300ms}
  .jstage.is-lit::before{background:var(--gold-ink);border-color:var(--gold-ink)}
  .jstage.is-active{transform:none}
}

/* ---------- ghost numerals on the dark cards ---------- */
.cards-3{counter-reset:card}
.card{position:relative;overflow:hidden;counter-increment:card}
.card::before{
  content:counter(card,decimal-leading-zero);position:absolute;top:-.12em;right:.3em;
  font-family:var(--serif);font-size:5.4rem;font-weight:600;line-height:1;color:rgba(233,180,76,.13);pointer-events:none;
}
.card h3,.card p{position:relative}

/* ---------- the recommended plan: a slow gold light sweeping the edge ---------- */
@property --halo{syntax:'<angle>';inherits:false;initial-value:0deg}
.plan-hero{position:relative}
.plan-hero::before{
  content:'';position:absolute;inset:-3px;border-radius:calc(var(--r) + 3px);padding:3px;pointer-events:none;
  background:conic-gradient(from var(--halo),rgba(233,180,76,0) 0 58%,rgba(233,180,76,.95) 76%,rgba(233,180,76,0) 90% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
@media (prefers-reduced-motion:no-preference){.plan-hero::before{animation:halo 11s linear infinite}}
@keyframes halo{to{--halo:360deg}}

/* ---------- formula ---------- */
/* The centre of the formula grid is the botanicals-around-the-joint watercolour,
   not the bottle (Victor, 12 Sep 2026). Nothing sits behind it: a radial tint
   under the earlier cutout read as a dirty disc on the white band. */
.inside-joint img{max-width:340px;filter:drop-shadow(0 18px 30px rgba(40,28,14,.16))}
@media (max-width:760px){.inside-joint img{max-width:250px}.inside-joint{margin-bottom:var(--s-4)}}

/* ---------- pull-quote marks ---------- */
.tf-main,.rev-wide{position:relative}
.tf-main::before,.rev-wide::before{
  content:'\201C';position:absolute;top:-.08em;left:.35rem;pointer-events:none;
  font-family:var(--serif);font-size:6.4rem;line-height:1;color:rgba(198,134,23,.18);
}
.rev-wide::before{color:rgba(233,180,76,.22)}
.tf-main p,.rev-wide p{position:relative}
@media (max-width:640px){.tf-main::before,.rev-wide::before{display:none}}

/* ---------- buttons: a light passes over on hover ---------- */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:'';position:absolute;top:-30%;bottom:-30%;left:-45%;width:30%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.3),rgba(255,255,255,0));transform:skewX(-18deg);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.btn:hover::after{animation:shine 720ms var(--ease-out-quart) forwards}}
@keyframes shine{from{left:-45%;opacity:1}to{left:125%;opacity:1}}
.btn-ghost::after{display:none}

/* The phone-only backing card that once sat behind the hero photograph is gone:
   it painted over the film (the image carried z-index:1, the video did not) and
   phones saw a bone square with a sliver of film for three releases. */
.hero-video video{position:relative;z-index:1}
.hero-overlay{z-index:2}

/* ---------- cinematic close ---------- */
.band-close{
  position:relative;overflow:hidden;padding:0!important;min-height:min(78vh,720px);
  display:grid;align-items:end;background:var(--forest-3);
}
.band-close .band-figure-top{position:absolute;inset:0;margin:0;max-height:none;overflow:hidden}
.band-close .px-frame{height:100%;border-radius:0;box-shadow:none}
.band-close .band-figure-top img,.band-close .band-figure-top video{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
.band-close .close-film{background:var(--forest-3)}
.band-close::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,26,17,.04) 0%,rgba(12,26,17,.16) 40%,rgba(12,26,17,.80) 76%,rgba(12,26,17,.94) 100%);
}
.band-close .wrap{position:relative;z-index:2;padding-block:clamp(4rem,10vw,7rem) clamp(3rem,8vw,5rem)}
.band-close .close-quote h2{color:#fff;text-shadow:0 2px 28px rgba(0,0,0,.4)}
.band-close .close-quote cite{color:rgba(255,255,255,.8)}