/* ALIZA Stage 2 design system, iteration 6. Every value here is from Stage2_Harvest/tokens.json.
   One family (Geist). Seven type sizes. One accent (fuchsia); orchid is a dark-ground voice, never an accent. Eleven spacing steps.
   Radii 8/16/999 plus the 48 device frame (40 inner). Three shadow forms. One curve, three durations, one stagger step. */
@font-face{font-family:'Geist';src:url("../fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --base:#FFFFFF; --panel:#F7F3EB;   /* warm neutral: hue 40, saturation 0.049, value held at 247 (was #F7F7F4) */ --ink:#121513; --ink2:#4A5049;
  --structure:#1F3D2B; --hair:rgba(31,61,43,.14);
  --accent:#DB2777; --orchid:#D5769F; --plate:#0D110E; --cream:#F3EFE3; --mist:#BAB9A6;
  --font:'Geist','Helvetica Neue',Arial,sans-serif;
  --t1:12px; --t2:16px; --t3:18px; --t4:22px; --t5:40px; --t6:64px; --t7:88px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px;
  --r1:8px; --r2:16px; --r3:999px; --rframe:48px; --rscreen:40px;
  --shadow:0 1px 2px rgba(18,21,19,.06),0 8px 24px rgba(18,21,19,.06);
  --curve:cubic-bezier(.2,.8,.2,1); --fast:240ms; --slow:700ms; --draw:1600ms; --stagger:70ms;
  --max:1200px; --gutter:clamp(20px,5vw,64px);
  --hair-dark:rgba(243,239,227,.14); --panel-dark:#1B1E1B;   /* plate with 6% cream, composited flat so contrast is measurable */
  --glass:rgba(255,255,255,.92);                              /* the sticky nav only; panels over plates are opaque */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}   /* the margin botanicals extend past the frame; clip, never a second scroll container */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--base);color:var(--ink);font:400 var(--t3)/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}

/* ---------- type roles (seven sizes, no others; display is Geist at 500, tracked in) ---------- */
.h1{font:500 var(--t6)/1.0 var(--font);letter-spacing:-.03em;text-wrap:balance}
.h2{font:500 var(--t5)/1.08 var(--font);letter-spacing:-.025em;text-wrap:balance}
.h3{font:500 var(--t4)/1.3 var(--font);letter-spacing:-.01em}
.statement{font:500 var(--t4)/1.25 var(--font);letter-spacing:-.015em;text-wrap:balance}
.lead{font-size:var(--t4);line-height:1.45;color:var(--ink2)}
.body{font-size:var(--t3);line-height:1.6}
.small{font-size:var(--t2);line-height:1.5;color:var(--ink2)}
.data{font-size:var(--t2);line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap}
.label{font:600 var(--t1)/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--structure)}
.em{color:var(--accent)}            /* the accent word: colour alone, no italic, no extra weight */
@media(min-width:900px){.h1{font-size:var(--t7)}.h2{font-size:var(--t6)}.statement{font-size:var(--t5);line-height:1.15}}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--s8) 0}
@media(min-width:900px){.section{padding:var(--s9) 0}}
.grid{display:grid;gap:var(--s5)}
@media(min-width:900px){.grid{gap:var(--s8)}.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-12{grid-template-columns:repeat(12,1fr)}}
.stack>*+*{margin-top:var(--s5)}
.stack-tight>*+*{margin-top:var(--s3)}
.center{text-align:center}
.measure{max-width:38ch}
.measure-wide{max-width:60ch}
.hair{height:1px;background:var(--hair);border:0}
.dark .hair{background:var(--hair-dark)}

/* ---------- surfaces ---------- */
.panel{background:var(--panel);border-radius:var(--r2);padding:var(--s6)}
.card{background:var(--base);border:1px solid var(--hair);border-radius:var(--r2);padding:var(--s6);box-shadow:var(--shadow)}
.dark{background:var(--plate);color:var(--cream)}
.dark .label{color:var(--orchid)}                      /* orchid: the dark-ground voice (6.27:1 on plate, 5.5:1 on panel-dark) */
.dark .lead{color:var(--orchid)}
.dark .small{color:rgba(243,239,227,.78)}
.dark .em{color:var(--accent)}
.dark .panel{background:var(--panel-dark)}
.dark .card{background:var(--panel);color:var(--ink);border-color:transparent}   /* opaque, always */
.dark .card .small{color:var(--ink2)}
.dark .card .label{color:var(--structure)}
.dark a.ul{text-decoration:underline;text-underline-offset:3px;color:var(--cream);display:inline-block;padding:var(--s3) 0;margin:calc(var(--s3) * -1) 0}   /* 44px hit box, line box unchanged */

/* ---------- the plate moments: one full-bleed still (or the one loop) behind an opaque panel. Never type on foliage. ----------
   .ground is oversized and drifts at 0.85x scroll on desktop (JS); the image inside is static. No backdrop-filter, no gradient. */
.plate-sec{position:relative;overflow:hidden;background:var(--plate);color:var(--cream)}
.plate-sec>.ground{position:absolute;left:0;right:0;top:-10%;bottom:-10%;z-index:0;overflow:hidden}   /* 10% over each edge covers the two-speed travel; less oversize, less upscale */
.ground>img,.ground>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate-sec>.wrap{position:relative;z-index:1}
.plate-sec .label{color:var(--orchid)}
.plate-sec .lead{color:var(--orchid)}
.plate-sec .small{color:rgba(243,239,227,.78)}
.plate-sec a.ul{text-decoration:underline;text-underline-offset:3px;color:var(--cream);display:inline-block;padding:var(--s3) 0;margin:calc(var(--s3) * -1) 0}
.pane{background:var(--base);color:var(--ink);border-radius:var(--r2);padding:var(--s6);box-shadow:var(--shadow)}
.pane .label{color:var(--structure)}
.pane .lead,.pane .small{color:var(--ink2)}
.pane .em{color:var(--accent)}
.pane .inner{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--hair)}
.pane.ink{background:var(--panel-dark);color:var(--cream);box-shadow:none}
.pane.ink .label{color:var(--orchid)}
.pane.ink .lead{color:var(--orchid)}
.pane.ink .small{color:rgba(243,239,227,.78)}
.pane.ink .inner{border-top-color:var(--hair-dark)}
@media(min-width:900px){.pane{padding:var(--s7)}}

/* ---------- the one CTA ---------- */
.cta{display:inline-flex;align-items:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border-radius:var(--r3);
  background:var(--accent);color:#fff;font:600 var(--t2)/1 var(--font);letter-spacing:.005em;
  transition:transform var(--fast) var(--curve),box-shadow var(--fast) var(--curve)}
.cta:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.cta:active{transform:translateY(0)}
.cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cta .arrow{transition:transform var(--fast) var(--curve)}
.cta:hover .arrow{transform:translateX(3px)}
.micro{font-size:var(--t1);letter-spacing:.02em;color:var(--ink2);line-height:1.5}
.trust{color:var(--ink)}                                              /* the trust line under the CTA: small scale, full ink */
.dark .micro,.plate-sec .micro{color:var(--orchid)}
.pane .micro{color:var(--ink2)}
.pane.ink .micro{color:var(--orchid)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--glass);border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:var(--s5)}
.wordmark{display:inline-flex;align-items:center;min-height:44px;font:700 var(--t4)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);flex-shrink:0}
.nav-links{display:none;gap:var(--s6)}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t2);color:var(--ink2);transition:color var(--fast) var(--curve)}
.nav-links a:hover{color:var(--ink)}
.nav .cta{min-height:44px;padding:0 var(--s4)}
.nav-actions{display:flex;align-items:center;gap:var(--s5)}
.nav-blog{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t2);color:var(--ink2)}
.nav-blog:hover{color:var(--ink)}
.nav-walk{display:none;color:var(--ink2)}                            /* the invitation to the walk: quiet, beside the CTA, never a second CTA */
.nav .nav-walk svg path{stroke:var(--orchid)}                              /* the drawn mark carries the orchid; the words stay ink2 (orchid on white is 3.03:1, under AA) */
.nav-walk:hover{color:var(--ink)}
@media(min-width:900px){.nav-walk{display:inline-flex}}
@media(min-width:900px){.nav-links{display:flex}.nav-blog{display:none}}

/* ---------- phone (the funded-software signal) ----------
   Frame 300 wide, 8px bezel, 48/40 concentric radii. Status bar carries the island beside the time so no title is ever covered.
   Nav bar, content, tab bar. Data never under 16px; labels and chips at 12px. Inside a screen, fuchsia lands on at most ONE real data point or action. */
.phone{position:relative;width:100%;max-width:300px;border-radius:var(--rframe);background:var(--ink);padding:var(--s2);
  box-shadow:0 1px 2px rgba(18,21,19,.06),0 8px 24px rgba(18,21,19,.06),inset 0 0 0 1px rgba(255,255,255,.08)}
.scr{position:relative;display:flex;flex-direction:column;aspect-ratio:284/604;border-radius:var(--rscreen);overflow:hidden;background:var(--base);color:var(--ink);font-size:var(--t2);line-height:1.4;text-align:left}
.scr::after{content:"";position:absolute;left:50%;bottom:var(--s2);width:96px;height:4px;transform:translateX(-50%);border-radius:var(--r3);background:var(--ink);opacity:.9}
.sb{position:relative;display:flex;justify-content:space-between;align-items:center;height:48px;padding:0 var(--s5);font:600 var(--t1)/1 var(--font);flex:none}
.sb .isl{position:absolute;left:50%;top:var(--s3);width:88px;height:24px;transform:translateX(-50%);background:var(--ink);border-radius:var(--r3)}
.sb .si{display:flex;gap:var(--s1);align-items:center}
.sb .si svg{height:12px;width:auto;fill:currentColor}
.nb{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4) var(--s3);flex:none}
.nb .t{font:600 var(--t4)/1.2 var(--font);letter-spacing:-.01em}
.nb .av{width:32px;height:32px;border-radius:var(--r3);background:var(--structure);color:#fff;font:600 var(--t1)/32px var(--font);text-align:center;flex:none}
.ct{flex:1;min-height:0;padding:0 var(--s4) var(--s4);overflow:hidden}
.ct>*+*{margin-top:var(--s2)}
.ct>.ui-row+.ui-row{margin-top:0}
/* the Protocols screen (03) carries six rows and clipped its last two; on that screen only, the rows sit tighter so every row shows at 1440 and 390. Nothing hidden, nothing reworded. */
.phone[aria-label="App screen: the protocols underneath the plan"] .ct{--fit:1}
.phone[aria-label="App screen: the protocols underneath the plan"] .ct .ui-row{padding:5px 0;line-height:1.25}
.phone[aria-label="App screen: the protocols underneath the plan"] .ct>*+*{margin-top:3px}
.phone[aria-label="App screen: the protocols underneath the plan"] .ct .ui-card{padding:5px 10px}
.phone[aria-label="App screen: the protocols underneath the plan"] .ct .ui-card>*+*{margin-top:3px}
.phone[aria-label="App screen: the protocols underneath the plan"] .ct .ui-row .l small{line-height:1.2}
.phone[aria-label="App screen: the protocols underneath the plan"] .ct .ui-row .l{gap:2px 6px}
.phone[aria-label="App screen: the protocols underneath the plan"] .ct .ui-chip{padding:2px 8px}
.phone[aria-label="App screen: the protocols underneath the plan"] .ct .ui-bar{height:6px}
.tb{display:flex;justify-content:space-around;align-items:flex-start;padding:var(--s2) var(--s2) var(--s5);border-top:1px solid var(--hair);background:var(--base);flex:none;margin-top:auto}
.tb span{display:flex;flex-direction:column;align-items:center;gap:var(--s1);width:48px;font:500 var(--t1)/1 var(--font);color:var(--ink2)}
.tb span.on{color:var(--ink);font-weight:600}
.tb svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tb span.on svg{stroke-width:2.2}
.inp{display:flex;align-items:center;gap:var(--s3);margin:0 var(--s4) var(--s5);padding:var(--s2) var(--s2) var(--s2) var(--s4);border:1px solid var(--hair);border-radius:var(--r3);color:var(--ink2);flex:none;margin-top:auto}
.inp b{margin-left:auto;width:32px;height:32px;border-radius:var(--r3);background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}
.inp b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct .label{font-size:var(--t1)}
.dark .scr .label,.plate-sec .scr .label{color:var(--structure)}
.dark .scr .small,.plate-sec .scr .small{color:var(--ink2)}
.dark .scr .micro,.plate-sec .scr .micro{color:var(--ink2)}
.ct .q{font:500 var(--t3)/1.35 var(--font)}
.ui-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--hair);font-size:var(--t2);line-height:1.3}
.ui-row:last-child{border-bottom:0}
.ui-row .l{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);min-width:0}
.ui-row .l small{flex-basis:100%;font-size:var(--t1);color:var(--ink2);letter-spacing:.02em;line-height:1.4}
.ui-row .r{display:flex;align-items:center;gap:var(--s2);flex:none}
.ui-row .t{font-variant-numeric:tabular-nums;color:var(--ink2);min-width:48px}
.ui-chip{display:inline-block;padding:var(--s1) var(--s3);border-radius:var(--r3);background:var(--panel);font:600 var(--t1)/1.4 var(--font);letter-spacing:.04em;white-space:nowrap}
.ui-chip.on{background:var(--accent);color:#fff}
.ui-chip.ink{background:var(--ink);color:var(--cream)}
.ui-chip.line{background:none;border:1px solid var(--hair)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.ui-bubble{padding:var(--s3) var(--s4);border-radius:var(--r2);background:var(--panel);font-size:var(--t2);line-height:1.45;max-width:92%}
.ui-bubble.me{background:var(--ink);color:var(--cream);margin-left:auto}
.ui-time{font-size:var(--t1);color:var(--ink2);text-align:center;letter-spacing:.04em}
.ui-bar{height:8px;border-radius:var(--r3);background:var(--panel);overflow:hidden}
.ui-bar i{display:block;height:100%;background:var(--structure);border-radius:var(--r3)}
.ui-tick{display:inline-block;width:8px;height:8px;border-radius:var(--r3);background:var(--structure);flex:none}
.ui-tick.flag{background:var(--accent)}
.ui-tick.off{background:var(--hair)}
.ui-card{background:var(--panel);border-radius:var(--r2);padding:var(--s3) var(--s4)}
.ui-card>*+*{margin-top:var(--s2)}
.ui-card .ui-row{border-color:rgba(31,61,43,.1)}
.ui-empty{padding:var(--s4);text-align:center;color:var(--ink2);font-size:var(--t2);border:1px dashed var(--hair);border-radius:var(--r2)}
.ui-error{padding:var(--s3) var(--s4);border-radius:var(--r1);border:1px solid var(--accent);font:600 var(--t1)/1.4 var(--font);letter-spacing:.04em}
.ui-btn{display:flex;justify-content:center;align-items:center;min-height:48px;border-radius:var(--r3);background:var(--accent);color:#fff;font:600 var(--t2)/1 var(--font)}
.ui-btn.off{background:var(--panel);color:var(--ink2)}
.ui-btn.ink{background:var(--ink);color:var(--cream)}
.ck{width:20px;height:20px;border-radius:var(--r3);border:1px solid var(--structure);display:grid;place-items:center;flex:none}
.ck.on{background:var(--structure)}
.ck svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.seg{display:flex;gap:var(--s1);background:var(--panel);border-radius:var(--r3);padding:var(--s1)}
.seg span{flex:1;text-align:center;padding:var(--s1) 0;border-radius:var(--r3);font:500 var(--t1)/1.4 var(--font);color:var(--ink2)}
.seg span.on{background:var(--ink);color:var(--cream);font-weight:600}
.big{font:600 var(--t5)/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.big small{font:400 var(--t2)/1 var(--font);color:var(--ink2);margin-left:var(--s1)}
/* charts: inline SVG, two inks, one accent at most */
.ring{position:relative;width:120px;height:120px;flex:none}
.ring svg{width:100%;height:100%}
.ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.ring .tr{stroke:var(--panel)}
.ring .fg{stroke:var(--structure)}
.ring .v{position:absolute;inset:0;display:grid;place-items:center;font:600 var(--t4)/1 var(--font);font-variant-numeric:tabular-nums}
.ring.sm{width:64px;height:64px}
.ring.sm .v{font-size:var(--t2)}
.rings{display:flex;justify-content:space-between;gap:var(--s2)}
.rings figure{display:flex;flex-direction:column;align-items:center;gap:var(--s1);font-size:var(--t1);color:var(--ink2);line-height:1.3;text-align:center}
.rings figure b{font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:var(--s1)}
.bars{width:100%;height:auto}
.bars rect{fill:var(--structure)}
.bars rect.flag{fill:var(--accent)}
.bars rect.tr{fill:var(--panel)}
.chart{width:100%;height:auto;font:500 var(--t1)/1 var(--font);color:var(--ink2)}
.chart text{fill:currentColor;letter-spacing:.02em}
.chart .band{fill:var(--panel)}
.chart .band.fn{fill:var(--accent);opacity:.18}
.chart .grid{stroke:var(--hair);stroke-width:1}
.chart .line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .pt{fill:var(--ink);stroke:var(--base);stroke-width:2}
.chart .pt.last{r:5}
.chart .cell{fill:var(--structure)}
.chart .cell.o0{opacity:.1}.chart .cell.o1{opacity:.3}.chart .cell.o2{opacity:.55}.chart .cell.o3{opacity:.85}
.chart .acc{fill:var(--accent)}
.feats .chart .acc{fill:var(--structure)}
.range{width:100%;height:auto}
.range .tr{fill:var(--panel)}
.range .std{fill:var(--structure);opacity:.35}
.range .fn{fill:var(--accent)}
.range .mk{fill:var(--ink);stroke:var(--base);stroke-width:2}
.tl{position:relative;padding-left:var(--s5)}
.tl::before{content:"";position:absolute;left:3px;top:var(--s3);bottom:var(--s3);width:1px;background:var(--hair)}
.tl .ui-row{position:relative}
.tl .ui-row::before{content:"";position:absolute;left:calc(-1 * var(--s5));top:50%;width:8px;height:8px;margin-top:-4px;border-radius:var(--r3);background:var(--hair)}
.tl .ui-row.now::before{background:var(--accent)}
.tl .ui-row.done::before{background:var(--structure)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1);text-align:center;font-size:var(--t2);font-variant-numeric:tabular-nums}
.cal span{height:32px;line-height:32px;border-radius:var(--r3)}
.cal .h{font:600 var(--t1)/32px var(--font);color:var(--ink2);letter-spacing:.04em}
.cal .done{background:var(--panel)}
.cal .miss{color:var(--ink2);text-decoration:line-through}
.cal .now{background:var(--accent);color:#fff;font-weight:600}
.cal .mark{box-shadow:inset 0 0 0 1px var(--structure)}
.ui-skel{display:block;height:10px;border-radius:var(--r1);background:var(--hair);margin-top:var(--s2)}
.ui-bubble.pend{display:flex;flex-direction:column;gap:var(--s1)}

/* ---------- screen panels (a phone in a tinted card) ---------- */
.shot{position:relative;background:var(--panel);border-radius:var(--r2);padding:var(--s5)}
.shot .cap{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:var(--s5)}
.shot .phone{margin:0 auto}
.dark .shot,.plate-sec .shot{background:var(--panel-dark)}
@media(min-width:900px){.shot{padding:var(--s7)}}

/* ---------- the rail: on a phone, screens sit in one swipeable row so each is full height and the page stays short ---------- */
@media(max-width:899px){
  .rail.rail{display:flex;gap:var(--s4);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:none;scrollbar-width:none;
    margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter)}
  .rail::-webkit-scrollbar{display:none}
  .rail>*{flex:0 0 92%;scroll-snap-align:start;max-width:360px}
  .rail>.shot{padding:var(--s4)}
  .rail>.feat{padding:var(--s5) var(--s4)}
  .rail-hint{font-size:var(--t1);letter-spacing:.02em;color:var(--ink2);margin-top:var(--s3)}
}
@media(min-width:900px){.rail-hint{display:none}}

/* ---------- feature cards: title, body, outcome, then the screen, clipped by the card edge on desktop; full height in the phone rail ---------- */
.feats{display:grid;gap:var(--s5)}
.feat{display:flex;flex-direction:column;background:var(--panel);border-radius:var(--r2);padding:var(--s5)}
.feat .small{margin-top:var(--s2)}
.feat .outcome{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--hair);color:var(--ink2);font-size:var(--t2);line-height:1.5}
.feat .ph{margin-top:var(--s5)}
.feat .phone{margin:0 auto}
@media(min-width:900px){
  .feats{grid-template-columns:repeat(3,1fr)}
  .feat{padding:var(--s6) var(--s6) 0;overflow:hidden}
  .feat .ph{flex:1 0 540px;min-height:0;overflow:hidden}
}

/* ---------- the margin botanicals (R5): Brie's cut plates, large, cropped by the frame, entering from outside. Never in the content column.
   .bot is placed in its section's margin and drifts at its own rate (JS, desktop only). .bot-b breathes: a 6 to 12 s loop, scale 1 to 1.015 with a
   1.5 degree pivot at the stem end, phase-offset per element. .bot-u carries the one reveal (the fiddlehead uncurls once) or the orchid's colour twin.
   Transform and opacity only. Shown from 1280 up, where a real margin exists; two small static placements on phones. ---------- */
.section{position:relative}
.bot{position:absolute;z-index:0;pointer-events:none;display:none;top:var(--top);width:var(--w);
  --in:min(200px,calc((100vw - 1200px) / 2 + 64px - 12px))}         /* the slice that shows: never past the content column's edge */
.bot.l{left:calc(var(--in) - var(--w))}
.bot.r{right:calc(var(--in) - var(--w))}
.bot img{width:100%;height:auto;display:block}
.bot-b{transform-origin:var(--o);animation:breathe var(--d) var(--curve) var(--ph) infinite alternate both}
@keyframes breathe{from{transform:scale(1) rotate(0deg)}to{transform:scale(1.015) rotate(1.5deg)}}
.bot.near img{filter:blur(1.4px)}                                   /* the one near element, softly out of focus; the rest sit far and sharp */
.bot.fh .bot-u{transform-origin:50% 100%}
.js .bot.fh .bot-u{transform:rotate(-24deg) scale(.9);transition:transform var(--draw) var(--curve)}   /* the fiddlehead uncurls once on entry, by rotation and scale */
.bot.fh.in .bot-u{transform:none}
.bot.fh{transform-origin:50% 100%}
.bot.fh img{transform:rotate(16deg);transform-origin:50% 100%}                 /* the stem enters from the left edge; the spiral leans into the margin */
.bot.orchid .bot-u{position:relative}
.bot.orchid .tint{position:absolute;inset:0;opacity:var(--tint,0)}  /* ghost to colour: the colour twin fades in with scroll progress */
@media(min-width:1280px){.bot{display:block}}
@media(max-width:899px){
  .bot.ph{display:block;--in:112px}
  .who.section{padding-bottom:calc(var(--s8) + 270px)}               /* a seam left empty for the one phone element that enters here */
  .bot.macaw.ph{width:82px;right:12px;top:auto;bottom:var(--s5)}
}
@media(prefers-reduced-motion:reduce){
  .bot-b{animation:none}
  .js .bot.fh .bot-u{transition:none;transform:none}
  .bot.orchid .tint{opacity:1}
}

/* ---------- the wayfinding spine (ported from Stage 1 device 1.3): fixed in the left margin from 1280 up. The stem draws with page progress on
   stroke-dasharray; the active stop's mark inks from hairline to structure green and its vein draws. Steps aside while How it works is on screen. ---------- */
.wayfinder{position:fixed;left:var(--s5);top:50%;transform:translateY(-50%);width:60px;height:384px;z-index:6;display:none;pointer-events:none;
  transition:opacity var(--slow) var(--curve)}
.wayfinder.aside{opacity:0}
.wf-stem{position:absolute;inset:0;width:60px;height:384px;overflow:visible}
.wf-stem .stem{fill:none;stroke:var(--structure);stroke-width:1.4;stroke-linecap:round;opacity:.7;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--fast) var(--curve)}
.s-node{position:absolute;width:40px;height:34px;left:10px;pointer-events:auto;cursor:pointer;padding:0}
.s-node:nth-child(2){top:-9px;left:10px}.s-node:nth-child(3){top:55px;left:20px}.s-node:nth-child(4){top:119px;left:1px}.s-node:nth-child(5){top:183px;left:19px}.s-node:nth-child(6){top:247px;left:3px}.s-node:nth-child(7){top:311px;left:10px}
.s-node svg{width:40px;height:34px;overflow:visible}
.s-node svg use{fill:none;stroke:var(--structure);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.35;transition:opacity var(--slow) var(--curve),transform var(--slow) var(--curve);transform-origin:50% 88%}
.s-node.active svg use{opacity:1;transform:scale(1.18)}                                  /* the one inked stop: the mark unfurls */
.s-node:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r1)}
@media(min-width:1280px){.wayfinder{display:block}}
@media(prefers-reduced-motion:reduce){.wayfinder,.wf-stem .stem,.s-node svg use{transition:none}.wf-stem .stem{stroke-dashoffset:0}}

/* ---------- motion: one curve, staggered reveals (JS sets --i in DOM order) ---------- */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity var(--slow) var(--curve),transform var(--slow) var(--curve);transition-delay:calc(var(--i,0) * var(--stagger))}
.reveal.in{opacity:1;transform:none}
.js .hero .reveal{opacity:1;transform:none;transition:none}          /* the fold paints at rest: LCP is never behind a reveal */

/* ---------- timeline: the vine is one branching path in the left margin; each numbered step is a node the branch reaches, then the step reveals ---------- */
.timeline{display:grid;gap:var(--s6)}
.steps{position:relative;display:grid;gap:var(--s7)}
.step{position:relative;display:grid;grid-template-columns:24px 48px 1fr;gap:var(--s4);align-items:start}
.step .num{grid-column:2;font:500 var(--t5)/1 var(--font);letter-spacing:-.03em;color:var(--structure);font-variant-numeric:tabular-nums}
.step .num+*{grid-column:3}
.step::before{content:"";position:absolute;left:6px;top:14px;width:12px;height:12px;border-radius:var(--r3);background:var(--structure);border:2px solid var(--base);z-index:1}
.js .step{opacity:0;transform:translateY(12px);transition:opacity var(--slow) var(--curve),transform var(--slow) var(--curve)}
.step.in{opacity:1;transform:none}
.spine{position:absolute;left:0;top:0;width:24px;height:100%;overflow:visible;pointer-events:none;z-index:0}      /* phone: the static rail line */
.spine path{fill:none;stroke:var(--structure);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.vtree{position:absolute;top:0;left:0;overflow:visible;pointer-events:none;z-index:0;display:none}             /* desktop: the branching vine in the margin */
.vtree path{fill:none;stroke:var(--structure);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.vtree .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--fast) var(--curve)}       /* JS sets the offset from scroll progress */
.vtree.rebuilt .draw{transition:none}
/* Raster leaves open around source attachment points; the SVG paths remain provisional guides. */
.leaf-open{transform-origin:0 0;transition:transform var(--fast) var(--curve);transition-delay:calc(var(--layer) * var(--stagger))}
.leaf-breathe{transform-origin:50% 72%;animation:leaf-breathe var(--leaf-d,9s) var(--curve) var(--leaf-ph,0s) infinite alternate both;animation-play-state:paused}
.how.vine-in-view .reached.leaf-visible .leaf-open.unfolded .leaf-breathe{animation-play-state:running}
@keyframes leaf-breathe{from{transform:scale(1) rotate(0deg)}to{transform:scale(1.012) rotate(.8deg)}}
.vtree.rebuilt .leaf-open{transition:none}
.bot:not(.in-view) .bot-b{animation-play-state:paused}
@media(max-width:899px){.leaf-open{transition:none}.leaf-breathe{animation:none}.js .reveal,.js .step{opacity:1;transform:none;transition:none}}
@media(prefers-reduced-motion:reduce){.leaf-open{transition:none;transform:none!important}.leaf-breathe{animation:none}}
@media(min-width:900px){
  .timeline{grid-template-columns:7fr 5fr;gap:var(--s8);align-items:start}
  .steps{gap:var(--s8);padding:var(--s5) 0}
  .step{grid-template-columns:24px 96px 1fr;gap:var(--s5)}
  .step .num{font-size:var(--t6)}
  .step::before{top:26px}
  .spine{display:none}
  .vtree{display:block}
  .shots{display:grid;position:sticky;top:var(--s8);align-self:start}
  .shots .shot{grid-area:1/1;opacity:0}
  .shots .shot.on{opacity:1}
}

/* ---------- proof facts ---------- */
.facts{border-top:1px solid var(--hair-dark)}
.fact{display:grid;gap:var(--s2);padding:var(--s5) 0;border-bottom:1px solid var(--hair-dark)}
.fact .body{font-size:var(--t4);line-height:1.45}                     /* the clinical proof reads at lead scale, never the smallest text on the page */
@media(min-width:900px){.fact{grid-template-columns:200px 1fr;gap:var(--s7)}}

/* ---------- goal picker ---------- */
.goals{display:grid;gap:var(--s3)}
.goal{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);border:1px solid var(--hair);border-radius:var(--r2);
  text-align:left;font-size:var(--t3);transition:border-color var(--fast) var(--curve),background var(--fast) var(--curve)}
.goal::before{content:"";width:12px;height:12px;border-radius:var(--r3);border:1px solid var(--structure);flex:none;transition:background var(--fast) var(--curve)}
.goal:hover{border-color:var(--structure)}
.goal[aria-pressed=true]{border-color:var(--structure);background:var(--panel)}
.goal[aria-pressed=true]::before{background:var(--accent);border-color:var(--accent)}
.goal:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- pricing ---------- */
.price{font:500 var(--t7)/1 var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.price .unit{font:400 var(--t4)/1 var(--font);letter-spacing:0;color:var(--ink2);margin-left:var(--s2)}
.included{display:grid;gap:var(--s3)}
.included li{list-style:none;display:flex;gap:var(--s3);align-items:baseline;font-size:var(--t3);padding-bottom:var(--s3);border-bottom:1px solid var(--hair)}
.included li::before{content:"";width:8px;height:8px;border-radius:var(--r3);background:var(--structure);flex:none;transform:translateY(-2px)}
@media(min-width:1000px){.pricing .grid-2{grid-template-columns:1.1fr 1fr .8fr;align-items:start}.pricing .ph .phone{max-width:260px;margin:0 auto}}
@media(max-width:999px){.pricing .ph{display:none}}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s5) 0;font:500 var(--t4)/1.3 var(--font);display:flex;justify-content:space-between;gap:var(--s5)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--structure);font-weight:400;transition:transform var(--fast) var(--curve)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 var(--s5);max-width:60ch;color:var(--ink2)}

/* ---------- footer: legal, links, and the one departure to the cinematic walk (a line with a drawn mark, never a button) ---------- */
.footer{border-top:1px solid var(--hair);padding:var(--s8) 0}
.footer .legal{font-size:var(--t2);line-height:1.6;color:var(--ink2);max-width:80ch}
.footer .links{display:flex;flex-wrap:wrap;gap:var(--s5);font-size:var(--t2)}
.footer .links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink2);transition:color var(--fast) var(--curve)}
.footer .links a:hover{color:var(--ink)}
.walk{display:inline-flex;align-items:center;gap:var(--s3);min-height:44px;font-size:var(--t2);color:var(--ink2);transition:color var(--fast) var(--curve)}
.walk:hover{color:var(--ink)}
.walk svg{width:24px;height:20px;flex:none}
.walk svg path{fill:none;stroke:var(--structure);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- R7: editorial pacing, stateful mechanisms, original assets ---------- */
.nav .nav-walk{color:var(--ink);white-space:nowrap;gap:var(--s2)}
.nav .nav-walk svg{width:32px;height:34px}
.nav .nav-walk:hover{text-decoration:underline;text-decoration-color:var(--orchid);text-underline-offset:6px}
.nav-actions{flex:none}
.wayfinder{width:44px;height:364px;left:var(--s4)}
.wayfinder::before,.wayfinder::after{content:"";position:absolute;left:21px;top:12px;bottom:12px;width:1px;background:var(--hair)}
.wayfinder::after{background:var(--structure);transform:scaleY(var(--progress,0));transform-origin:top;transition:transform var(--fast) var(--curve)}
.wayfinder .wf-stem{display:none}
.wayfinder .s-node{left:0;width:44px;height:44px;z-index:1;background:var(--base);border-radius:var(--r3)}
.wayfinder .s-node:nth-child(2){top:0}.wayfinder .s-node:nth-child(3){top:64px}.wayfinder .s-node:nth-child(4){top:128px}.wayfinder .s-node:nth-child(5){top:192px}.wayfinder .s-node:nth-child(6){top:256px}.wayfinder .s-node:nth-child(7){top:320px}
.s-node svg{margin:auto}
.who.section{padding-top:var(--s11);padding-bottom:var(--s11)}
.who.section .grid-2{grid-template-columns:1fr;gap:var(--s8);max-width:900px}
.who .stack:first-child{display:grid;grid-template-columns:1fr;gap:var(--s7)}
.who .stack:first-child>*{margin:0}
.who .h2{max-width:18ch}
.who .body{max-width:54ch;margin-left:auto!important}
.who .symptoms{grid-template-columns:1fr 1fr;gap:var(--s7) var(--s8);padding:var(--s6) 0}
.who .symptom{border:0;border-radius:0;padding:0 0 0 var(--s5);border-left:1px solid var(--hair);max-width:30ch;font-size:var(--t4);line-height:1.45}
.who .symptom:nth-child(even){margin-top:var(--s7)}
.who .symptom.flag{border-left-color:var(--structure)}
.who .symptoms+p{max-width:48ch;margin-top:var(--s8)}
/* Complete screens, not clipped mockups. Their original UI copy stays intact. */
.phone .scr{aspect-ratio:auto;min-height:604px}
.phone .ct{flex:1 0 auto;overflow:visible;padding-bottom:var(--s5)}
.phone .nb{flex-wrap:wrap}
.phone .ui-row{flex-wrap:wrap}
.phone .ui-row .l{flex:1;min-width:0}
.phone .ui-row .r{max-width:100%}
.phone .inp{margin-top:var(--s3)}
/* Branch grows, lower leaf unfolds, upper leaf unfolds, then the step settles.
   The continuous SVG is explicitly a guide, not a fabricated raster tendril. */
.vtree .draw{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
.vtree .main{opacity:.24}
.vtree .branch-wipe{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:transform var(--fast) var(--curve)}
.vtree .branch-wipe.reached{transform:scaleX(1)}
.vtree.rebuilt .branch-wipe{transition:none}
.vtree .leaf-open{opacity:1;transform:rotate(-24deg) scale(0);transition:transform var(--slow) var(--curve);transition-delay:calc(var(--fast) + var(--layer) * var(--slow))}
.vtree .reached .leaf-open{opacity:1;transform:rotate(0deg) scale(1)}
.how .shots .shot{background:var(--panel);padding:var(--s5);border-radius:var(--r2)}
.how .shots .cap{margin-bottom:var(--s4)}
@media(min-width:900px){
  .how.section{padding-top:var(--s10);padding-bottom:var(--s10)}
  .how .timeline{grid-template-columns:7fr 5fr;gap:var(--s8)}
  .how .steps{gap:0;padding-top:var(--s10);padding-bottom:var(--s8)}
  .how .step{min-height:82vh;grid-template-columns:24px 64px 1fr;gap:var(--s4)}
  .how .step:last-child{min-height:78vh}
  .js .how .step{opacity:1;transform:none;transition:none}
  .how .step .stack-tight{opacity:.7;transform:translateY(12px);transition:opacity var(--slow) var(--curve),transform var(--slow) var(--curve);transition-delay:calc(var(--fast) + 2 * var(--slow))}
  .how .step.in .stack-tight{opacity:1;transform:none}
  .how .step .num{font-size:var(--t5)}
  .how .shots{top:80px}
  .how .shots .shot{transition:opacity var(--slow) var(--curve);pointer-events:none}
  .how .shots .shot.on{pointer-events:auto;z-index:1}
}
/* Three chapters, two intact features each. Opening the paired feature exchanges
   the dominant screen using native, keyboard-operable progressive disclosure. */
.inside .feats{display:block;margin-top:var(--s9)}
.inside .chapter{position:relative;min-height:860px;padding:var(--s8) 0;margin-bottom:var(--s9);border-top:1px solid var(--hair)}
.inside .feat{display:block;width:46%;padding:0;background:none;border:0;border-radius:0;overflow:visible}
.inside .feat>.h3{font-size:var(--t5);line-height:1.15;max-width:16ch}
.inside .feat>.small{font-size:var(--t3);line-height:1.6;margin-top:var(--s5)}
.inside .feat>.outcome{font-size:var(--t3);padding-top:var(--s5);margin-top:var(--s5);border:0;color:var(--structure)}
.inside .feat>.ph{position:absolute;top:var(--s8);right:0;width:44%;margin:0;padding:var(--s5);background:var(--panel);border-radius:var(--r2);overflow:visible;min-height:0}
.inside .paired{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--hair)}
.paired summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:44px;cursor:pointer;list-style:none}
.paired summary::-webkit-details-marker{display:none}
.paired summary::after{content:"+";font-size:var(--t4);color:var(--structure);transition:transform var(--fast) var(--curve)}
.paired[open] summary::after{transform:rotate(45deg)}
.paired summary:focus-visible{outline:2px solid var(--structure);outline-offset:6px}
.inside .chapter:has(.paired[open])>.feat:first-child>.ph{visibility:hidden}
.inside .feat.reveal{transform:none}
/* One in-flow stage sizes to the selected screen without a blank crossfade. */
.inside .chapter.enhanced{display:grid;grid-template-columns:46% 44%;column-gap:10%;grid-template-rows:auto 1fr;min-height:0;align-items:start}
.inside .enhanced>.feat{width:100%;grid-column:1}
.inside .enhanced>.paired{grid-row:2}
.inside .chapter-stage{grid-column:2;grid-row:1/3;padding:var(--s5);background:var(--panel);border-radius:var(--r2)}
.inside .chapter-stage .phone{margin:auto}
.inside .chapter-stage [hidden]{display:none}
.paired summary>.h3{color:var(--structure);text-decoration:underline;text-underline-offset:6px}
.access.section{background:var(--base);color:var(--ink);padding:var(--s11) 0}
.access.section .grid-2{display:block;min-height:0}
.access.section .pane{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);padding:0;margin:0;box-shadow:none;border-radius:0;background:none}
.access .pane .h2{grid-row:1/3;max-width:16ch}
.access .pane .h2 .em{color:var(--structure)}
.access .pane>.stack{margin:0!important}
.access .pane .inner{margin:0;padding-top:var(--s6)}
.access .pane .inner .small{font-size:var(--t3);line-height:1.6}
.access .pane .inner .label{font-size:var(--t2);line-height:1.4;letter-spacing:.04em}
.proof.section{padding:var(--s10) 0;margin-bottom:var(--s10)}
.proof .h2{font-size:var(--t5);max-width:19ch}
.proof .lead-beat .statement{font-size:var(--t4);line-height:1.5;color:var(--orchid);max-width:30ch}
.proof .shot .cap .label{color:var(--cream)}
.proof .facts{display:block;border:0}
.proof .fact{display:grid;grid-template-columns:200px 1fr;gap:var(--s7);padding:var(--s5) 0;border-top:1px solid var(--hair-dark);border-bottom:0}
.proof .fact .label{font-size:var(--t2);line-height:1.4;letter-spacing:0;text-transform:none;color:var(--cream);margin-bottom:var(--s3)}
.proof .fact .body{font-size:var(--t4);line-height:1.45;max-width:42ch}
.proof .facts+p.statement{font-size:var(--t3);font-weight:400;letter-spacing:0;line-height:1.6;max-width:40ch;padding-top:var(--s7)}
.goalpicker.section{padding:var(--s10) 0;background:radial-gradient(ellipse at 65% 55%,var(--panel),var(--base) 72%)}
.goalpicker .grid-2{grid-template-columns:1fr;gap:var(--s8)}
.goalpicker .h2{max-width:13ch}
.goalpicker .goals{gap:var(--s3);max-width:720px;margin-left:auto}
.goalpicker .goal{min-height:64px;border:0;border-radius:0;padding:var(--s4) var(--s5);font-size:var(--t4);line-height:1.45;transition:transform var(--slow) var(--curve),opacity var(--slow) var(--curve)}
.goalpicker .goal:nth-child(even){margin-left:var(--s6)}
.goalpicker .goal::before{width:24px;height:1px;border:0;background:var(--structure)}
.goalpicker .goal[aria-pressed=true]{background:none;transform:translateX(12px);font-weight:600}
.goalpicker .goal[aria-pressed=true]::before{height:3px;background:var(--structure)}
.goalpicker .goals:has([aria-pressed=true]) .goal[aria-pressed=false]{opacity:.8}
.goalpicker .goals+.cta{margin-top:var(--s8)}
.pricing.section{padding:var(--s10) 0}
.pricing.section .grid-2{grid-template-columns:1fr 1fr;gap:var(--s9)}
.pricing .ph{display:none}
.pricing .included{gap:var(--s5)}
.pricing .included li{font-size:var(--t4);line-height:1.45;padding-bottom:var(--s5)}
.pricing .price{color:var(--structure)}
.faqsec.section{padding-top:var(--s8)!important;padding-bottom:var(--s11)}
.faq summary{padding:var(--s6) 0;min-height:88px}
.faq p{padding-bottom:var(--s7);font-size:var(--t3);line-height:1.6;max-width:48ch}
@media(max-width:899px){
  .nav .wrap{gap:var(--s2)}
  .nav .nav-walk{display:none}
  .who.section{padding-top:var(--s9);padding-bottom:calc(var(--s8) + 290px)}
  .who .symptoms{grid-template-columns:1fr;gap:var(--s6)}
  .who .symptom:nth-child(even){margin:0 0 0 var(--s6)}
  .who .symptom{font-size:var(--t3)}
  .who .stack:first-child{gap:var(--s6)}
  .bot-b{animation:none}
  .how .steps{gap:var(--s8)}
  .how .shots .shot{padding:var(--s4)}
  .inside .feats.rail{display:block;overflow:visible;margin:var(--s8) 0 0;padding:0}
  .inside .chapter.enhanced{display:flex;flex-direction:column;gap:0;margin-bottom:var(--s8)}
  .inside .chapter-stage{width:100%;margin-top:var(--s6);padding:var(--s4)}
  .inside .chapter{flex:0 0 100%;max-width:100%;min-height:0;padding:var(--s6) 0;margin:0}
  .inside .feat{width:100%}
  .inside .feat>.ph{position:static;width:100%;margin-top:var(--s6);padding:var(--s4)}
  .inside .chapter:has(.paired[open])>.feat:first-child>.ph{display:none}
  .inside .feat>.h3{font-size:var(--t4)}
  .access.section{padding:var(--s9) 0}
  .access.section .pane{grid-template-columns:1fr;gap:var(--s7)}
  .access .pane .h2{grid-row:auto}
  .proof.section{padding:var(--s8) 0;margin-bottom:var(--s8)}
  .proof .fact{grid-template-columns:1fr;gap:var(--s3)}
  .proof .pane{padding:var(--s5)}
  .goalpicker.section{padding:var(--s8) 0}
  .goalpicker .goal{font-size:var(--t3);padding:var(--s4) 0}
  .goalpicker .goal:nth-child(even){margin-left:var(--s4)}
  .goalpicker .goal[aria-pressed=true]{transform:none}
  .pricing.section .grid-2{grid-template-columns:1fr;gap:var(--s7)}
  .pricing .included li{font-size:var(--t3)}
}
@media(prefers-reduced-motion:reduce){
  .wayfinder::after{transform:none;transition:none}
  .vtree .branch-wipe{transform:none!important;transition:none}
  .vtree .leaf-open{opacity:1;transform:none!important;transition:none}
  .how .step .stack-tight{opacity:1;transform:none;transition:none}
  .how .shots{position:static;display:flex;overflow-x:auto;gap:var(--s5)}
  .how .shots .shot{flex:0 0 100%;opacity:1;transition:none}
  .inside .paired[open]>.ph{animation:none}
  .goalpicker .goal,.paired summary::after{transition:none}
}
/* R8: compact, composed chapters. Space separates ideas; tonal fields anchor them. */
.hero .grid-12>.moat{grid-column:1/-1;max-width:50ch;font-size:var(--t3);color:var(--ink2)}
.nav .cta{background:var(--structure);color:var(--base)}
.phone .ui-btn:not(.off),.phone .ui-chip.on{background:var(--structure);color:var(--base)}
.plate-sec .cta:focus-visible,.final .cta:focus-visible{outline-color:var(--cream)}
.who.section{padding:var(--s8) 0;background:var(--panel)}
.who.section .grid-2{max-width:none;grid-template-columns:1.05fr 1fr;gap:var(--s8);align-items:start}
.who .body{margin-left:0!important;max-width:46ch}
.who .symptoms{grid-template-columns:1fr;gap:0;padding:0}
.who .symptom{max-width:none;padding:var(--s4) 0;border-left:0;border-bottom:1px solid var(--hair);font-size:var(--t3)}
.who .symptom:nth-child(even){margin-top:0}
.who .symptoms+p{margin-top:var(--s5)}
.who .h2{font-size:var(--t5);max-width:18ch}
.inside.section{padding-top:var(--s8);padding-bottom:var(--s7)}
.inside .feats{margin-top:var(--s7)}
.inside .chapter.enhanced{grid-template-columns:42% 50%;column-gap:8%;padding:var(--s7);margin-bottom:var(--s6);background:var(--panel);border:0;border-radius:var(--r2);align-items:center}
.inside .chapter.enhanced:nth-child(2){background:var(--panel-dark);color:var(--cream)}
.inside .chapter.enhanced:nth-child(2) .feat>.small{color:var(--cream)}
.inside .chapter.enhanced:nth-child(2) .feat>.outcome,.inside .chapter.enhanced:nth-child(2) summary>.h3{color:var(--cream)}
.inside .chapter.enhanced:nth-child(2) .paired{border-color:var(--hair-dark)}
.inside .chapter.enhanced:nth-child(2) summary::after{color:var(--cream)}
.inside .chapter.enhanced:nth-child(2) summary:focus-visible{outline-color:var(--cream)}
.inside .chapter-stage{background:none;padding:0}
.inside .chapter-stage .phone{width:100%;max-width:360px;color:var(--ink)}
.inside .enhanced>.paired{align-self:start}
.inside .feat>.h3{max-width:14ch}
.access.section{background:var(--panel);padding:var(--s8) 0;margin:var(--s7) 0}
.access .pane .h2{font-size:var(--t5);max-width:17ch;align-self:center}
.access .pane .inner{padding:var(--s5);background:var(--base);border:0;border-radius:var(--r2)}
.access .pane .inner .label{font-size:var(--t3);text-transform:none;letter-spacing:0;line-height:1.4}
.goalpicker .grid-2{grid-template-columns:1fr 1.15fr;gap:var(--s7);align-items:center}
.goalpicker .goals{margin-left:0}
.goalpicker .goal:nth-child(even){margin-left:0}
.goalpicker .h2 .em{color:var(--ink)}
.pricing.section{padding:var(--s8) 0;background:var(--panel)}
.pricing.section .grid-2{padding:var(--s7);background:var(--base);border-radius:var(--r2);gap:var(--s7)}
.pricing .included{gap:0}
.pricing .included li{padding:var(--s4) 0;font-size:var(--t3)}
.pricing .price{font-size:var(--t7)}
.faqsec.section{padding-bottom:var(--s8)}
@media(min-width:900px){
  .how.section{padding:var(--s8) 0}
  .how .steps{padding-top:var(--s7);padding-bottom:0}
  .how .step{min-height:60vh;padding-bottom:var(--s7)}
  .how .step:last-child{min-height:64vh}
  .how .shots .shot{padding:var(--s5);background:var(--panel)}
}
@media(max-width:899px){
  .hero.section{padding-top:var(--s5);padding-bottom:var(--s6)}
  .hero .h1{font-size:var(--t5);line-height:1.08;max-width:15ch}
  .hero .copy>*+*{margin-top:var(--s4)}
  .hero .copy .moat{font-size:var(--t2)}
  .hero .grid-12{gap:var(--s5)}
  .hero .grid-12>.art{padding-top:0}
  .how .step{grid-template-columns:24px 48px 1fr;gap:var(--s2)}
  .how .step .shot{grid-column:2/-1;padding:var(--s4);margin-top:var(--s5);background:var(--panel);border-radius:var(--r2)}
  .how .step .shot .phone{width:100%}
  .js .how .shots{display:none}
  .who.section{padding:var(--s7) 0 calc(var(--s7) + 290px)}
  .who.section .grid-2{grid-template-columns:1fr;gap:var(--s6)}
  .who .symptom:nth-child(even){margin:0}
  .inside .chapter.enhanced{padding:var(--s5);margin-bottom:var(--s5);gap:var(--s5)}
  .inside .chapter-stage{padding:0;margin-top:var(--s5)}
  .access.section{padding:var(--s7) 0}
  .goalpicker .grid-2{grid-template-columns:1fr}
  .pricing.section .grid-2{padding:var(--s5);gap:var(--s6)}
}
/* Readable default when scripting is unavailable; the rail enhancement is optional. */
html:not(.js) .how .step .stack-tight{opacity:1}
html:not(.js) .how .shots{position:static;display:flex;flex-direction:column;gap:var(--s6)}
html:not(.js) .how .shots .shot{opacity:1;pointer-events:auto}
.footer .links a{min-width:44px}
/* ---------- reduced motion: every final state, no motion ---------- */
@media(prefers-reduced-motion:reduce){
  .js .reveal,.js .step{transition:none;opacity:1;transform:none}
  .vtree .draw,.spine .draw{transition:none;stroke-dashoffset:0}
  .plate-sec>.ground{transform:none!important}
  .bot{transform:none!important}
  .cta,.cta .arrow,.goal,.faq summary::after{transition:none}
}

/* page-specific composition only; all values from the system */
.hero{padding-top:var(--s8)}
.hero .grid-12>.copy{grid-column:1/7;align-self:center}
.hero .grid-12>.art{grid-column:7/13;position:relative;min-height:720px;border-radius:var(--r2);overflow:hidden;background:var(--panel)}
@media(min-width:900px){.hero .grid-12>.art{margin-right:calc(-1 * var(--gutter) - max(0px, 50vw - 600px));border-radius:var(--r2) 0 0 var(--r2)}}
.hero .art .phone{position:absolute;right:var(--s7);top:var(--s7);transform:rotate(-3deg);z-index:2}
.hero .art .phone.two{right:auto;left:var(--s6);top:var(--s10);transform:rotate(3deg);max-width:248px;z-index:1}
@media(max-width:899px){.hero .grid-12>.copy,.hero .grid-12>.art{grid-column:1/-1}.hero .art{min-height:0;padding:var(--s7) var(--s5)}.hero .art .phone{position:relative;right:auto;top:auto;transform:none;margin:0 auto}.hero .art .phone.two{display:none}
  .hero .copy{display:flex;flex-direction:column}.hero .copy .moat{order:9}}   /* phone width: the CTA lands inside the fold; the moat line follows it */
.who .grid-2{align-items:start}
.symptoms{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:600px){.symptoms{grid-template-columns:1fr 1fr}}
.symptom{padding:var(--s4) var(--s5);border:1px solid var(--hair);border-radius:var(--r2);font-size:var(--t3);line-height:1.4}
.symptom.flag{border-color:var(--structure)}
.access .grid-2{align-items:start}
.access .ground>img,.access .ground>video{object-position:100% 0}
@media(min-width:900px){.access>.ground{right:-5%}}                     /* the loop's own right edge holds the cut tail; the ground runs 5% past the section so that edge is clipped and the ocelot's body is the edge */     /* the loop is the heart plate at x 104 to 988 of 1280 (the harvest's crop), light grade: the ocelot on the branch is its right edge, the one subject; the bird of paradise at the plate's left sits under the pane */
@media(max-width:899px){.access .pane{margin-top:var(--s11)}.access .ground>video{object-position:86% 0}}
@media(min-width:900px){.access .grid-2{grid-template-columns:7fr 5fr;min-height:720px}.access .pane{align-self:center;margin-left:calc(-1 * var(--gutter) - max(0px, 50vw - 600px));padding-left:calc(var(--s7) + var(--gutter) + max(0px, 50vw - 600px));border-radius:0 var(--r2) var(--r2) 0}}     /* the pane runs to the left edge, like the hero art runs to the right: the loop shows only on the ocelot side */
.proof .ground>img{object-position:70% 40%}
@media(min-width:900px){.proof .lead-beat{grid-template-columns:7fr 5fr;align-items:start}}
.final .window{position:relative;overflow:hidden;min-height:100%}   /* the plate lives in the left column only, bleeding to the left edge: the fiddleheads and the fern, one subject; the orchid, the bromeliads and the blue mushrooms are outside the window */
.final .window>.ground{position:absolute;left:0;right:0;top:-20%;bottom:-20%;overflow:hidden}
.final .ground>img{object-position:50% 70%}
.proof .lead-beat{align-items:center}
@media(min-width:900px){.faqsec .grid-2{grid-template-columns:1fr 2fr}}
.final .pane{text-align:center}
.final .stack>*{margin-left:auto;margin-right:auto}
.final.section{padding:0}                                                /* the pane is the section's full height and runs to the right edge; the plate window runs to the left edge */
@media(min-width:900px){.final .final-grid{grid-template-columns:4fr 8fr;gap:0}.final .window{margin-left:calc(-1 * var(--gutter) - max(0px, 50vw - 600px))}.final .pane{margin-right:calc(-1 * var(--gutter) - max(0px, 50vw - 600px));padding-right:calc(var(--s7) + var(--gutter) + max(0px, 50vw - 600px));padding-top:var(--s10);padding-bottom:var(--s10);border-radius:0}}
@media(max-width:899px){.final .final-grid{gap:0}.final .window{height:min(72vw,360px);margin:0 calc(-1 * var(--gutter))}.final .ground>img{object-position:50% 60%}.final .pane{border-radius:0;margin:0 calc(-1 * var(--gutter));padding:var(--s9) var(--gutter)}}

/* R12: approved sales clarity; retain the accepted visual composition. */
.mobile-jumps{display:none}
.feature-summary{display:grid;gap:var(--s3)}
.feature-summary .h3{color:var(--structure);text-decoration:underline;text-underline-offset:6px}
.feature-summary .small{font-weight:400;color:var(--ink2)}
.inside .chapter.enhanced:nth-child(2) .feature-summary .h3,
.inside .chapter.enhanced:nth-child(2) .feature-summary .small{color:var(--cream)}
@media(max-width:899px){
 .mobile-jumps{display:flex;justify-content:center;gap:var(--s6);padding:0 var(--gutter);background:var(--panel);border-bottom:1px solid var(--hair)}
 .mobile-jumps a{display:flex;align-items:center;min-height:44px;font-size:var(--t2);color:var(--structure)}
 .mobile-jumps a:focus-visible{outline:2px solid var(--structure);outline-offset:2px}
}

.faq p a{text-decoration:underline;text-underline-offset:3px}

/* R13: genuine lesson preview, independent of the illustrative phone UI. */
.curriculum-preview{background:var(--panel)}
.curriculum-preview .grid{align-items:center}
.lesson-preview{margin:0;min-width:0}
.lesson-media{position:relative;overflow:hidden;border-radius:var(--r2);background:#17130f;aspect-ratio:16/9}
.lesson-preview video{display:block;width:100%;height:100%;object-fit:cover}
.lesson-toggle{position:absolute;right:12px;bottom:12px;min-height:44px;padding:0 16px;border:1px solid rgba(248,248,242,.35);border-radius:999px;background:rgba(17,25,20,.82);color:var(--cream);font-size:var(--t1);backdrop-filter:blur(8px)}
.lesson-toggle:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.lesson-preview figcaption{margin-top:var(--s4);color:var(--ink2)}
@media(prefers-reduced-motion:reduce){.lesson-toggle{display:none}}

/* Correct native Opening v2 source, crop constrained to the fern. */
.final .window>.ground{top:0;bottom:0}
.final .ground>img{object-position:50% 65%;height:100%;width:100%;object-fit:cover}
.final .ground>img{position:absolute;max-width:none;width:auto;height:220%;left:50%;bottom:0;object-fit:contain;transform:translateX(-53%)}
@media(max-width:899px){.final .ground>img{height:380%;bottom:-30%}}
.final .ground>img{top:auto}
.final .ground>img{height:280%;bottom:-40%;transform:translateX(-49%)}
@media(max-width:899px){.final .ground>img{height:440%;bottom:-80%;transform:translateX(-50%)}}
@media(min-width:900px){.final .ground>img{height:320%;bottom:-52%;transform:translateX(-50%)}}
/* Retain enough ground beyond the window for the existing 0.85x depth motion. */
.final .window>.ground{top:-10%;bottom:-10%}
@media(min-width:900px){.final .ground>img{height:266.6667%;bottom:-35%}}
@media(max-width:899px){.final .ground>img{height:366.6667%;bottom:-58.3333%}}

/* R9: two scoped motion scenes. See gauntlet/R9-MOTION-RULING.md. */
.nav{background:#f8f8f2;border-bottom-color:rgba(29,59,43,.12)}
.nav .nav-walk svg{width:32px;height:32px;fill:none;stroke:var(--structure);stroke-width:1.8;stroke-linecap:round}
.hero.section{padding-top:32px;padding-bottom:32px;background:#f8f8f2;overflow:clip}
.hero>.bot{display:none}
.hero .grid-12{gap:24px}
.hero .grid-12>.copy{grid-column:1/6;position:relative;z-index:5;padding-right:16px}
.hero .h1{max-width:12ch;line-height:1.04}
.hero .copy .label{max-width:37ch}
.hero .copy .lead{max-width:29ch}
.hero .copy .trust{max-width:34ch}
.hero .grid-12>.art{grid-column:6/13;min-height:730px;isolation:isolate;margin-right:calc(-1 * var(--gutter) - max(0px,50vw - 600px));border-radius:120px 0 0 16px;background:radial-gradient(ellipse at 55% 25%,#e5e9c9 0,#93aa86 36%,#47674f 66%,#1b382d 100%);overflow:hidden}
.garden-light{position:absolute;inset:-30%;z-index:0;background:radial-gradient(ellipse at 64% 24%,#fcf7d5 0,rgba(252,247,213,.45) 18%,transparent 54%);transform:translateX(-5%);opacity:.65;animation:canopy-light 12s var(--curve) infinite alternate;animation-play-state:paused;pointer-events:none}
.garden-shadow{position:absolute;inset:-15%;z-index:1;background:#07160c;mask:url('../img/bot/heart-right-monstera.webp') left top/70% auto no-repeat;filter:blur(14px);opacity:.09;transform:rotate(-15deg);animation:canopy-shadow 14s var(--curve) infinite alternate;animation-play-state:paused;pointer-events:none}
.garden-leaf{position:absolute;pointer-events:none;z-index:4;max-width:none;transform-origin:var(--attachment);animation:leaf-flex var(--duration,11s) var(--curve) infinite alternate;animation-play-state:paused;will-change:transform}
.leaf-back{width:390px;left:-100px;top:-80px;z-index:1;--attachment:0% 0%;--rest:rotate(38deg);--flex:rotate(41deg);--duration:13s;transform:var(--rest)}
.leaf-side{width:350px;right:-185px;top:90px;z-index:3;--attachment:100% 50%;--rest:rotate(-68deg);--flex:rotate(-65deg);--duration:11s;transform:var(--rest)}
.leaf-front{width:400px;left:-120px;bottom:-130px;--attachment:0% 100%;--rest:rotate(-18deg);--flex:rotate(-15deg);--duration:15s;transform:var(--rest)}
.opening-garden.in-view .garden-light,.opening-garden.in-view .garden-shadow,.opening-garden.in-view .garden-leaf{animation-play-state:running}
.hero .garden-phones{position:relative;z-index:2;height:730px;margin:0 48px 0 56px;display:flex;gap:20px;align-items:center;justify-content:center;perspective:1200px}
.hero .art .phone{position:relative;inset:auto;flex:0 0 280px;max-width:280px;transform:translateY(-28px) rotateY(6deg) rotate(-2deg);box-shadow:0 24px 45px -20px #152d36aa;transition:transform 1100ms var(--curve)}
.hero .art .phone.two{position:relative;inset:auto;flex:0 0 248px;max-width:248px;transform:translateY(52px) rotateY(-6deg) rotate(2deg)}
.hero .art .phone .scr{aspect-ratio:284/650}
.hero .art .phone.two .scr{aspect-ratio:232/565}
.garden-tabs{display:none}
.hero .grid-12>.moat{padding:12px 0 0;max-width:66ch;font-size:var(--t2)}
@keyframes canopy-light{to{transform:translate(7%,4%);opacity:1}}
@keyframes canopy-shadow{to{transform:translate(5%,3%) rotate(-9deg);opacity:.18}}
@keyframes leaf-flex{from{transform:var(--rest)}to{transform:var(--flex)}}
/* No generic section motion: changing surfaces are confined to the product art. */
.how .shots .shot:nth-child(1){background:radial-gradient(ellipse at 25% 20%,#f7f4df,#dce6da)}
.how .shots .shot:nth-child(2){background:radial-gradient(ellipse at 70% 25%,#f5f4e9,#cbded5)}
.how .shots .shot:nth-child(3){background:radial-gradient(ellipse at 25% 80%,#d6e4d4,#f1eddf)}
.how .shots .shot:nth-child(4){background:radial-gradient(ellipse at 70% 20%,#edeada,#c1d5c9)}
.how .shots .shot:nth-child(5){background:radial-gradient(ellipse at 40% 40%,#f4efdf,#dde5d6)}
@media(min-width:900px){.how .step{min-height:44vh;padding-bottom:56px}.how .step:last-child{min-height:48vh}}
.inside .chapter.enhanced:nth-child(1){background:radial-gradient(ellipse at 85% 60%,#d1dfd4,#f4f1e8 70%)}
.inside .chapter.enhanced:nth-child(2){background:radial-gradient(ellipse at 75% 50%,#354b40,#1b241f 70%)}
.inside .chapter.enhanced:nth-child(3){background:radial-gradient(ellipse at 70% 55%,#e2dcc7,#f7f5ed 70%)}
/* The scene holds while ordinary document scroll changes light and carries desires upward. */
.desire-film{--scene:0;position:relative;height:calc(100svh + 2000px);padding:0!important;background:#10261c;isolation:isolate;overflow:visible}
.desire-stage{position:sticky;top:72px;height:calc(100svh - 72px);min-height:640px;overflow:hidden;isolation:isolate;background:#10261c;color:#fff}
.canopy-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 57%;z-index:-4}
.desire-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,25,17,.83),rgba(6,25,17,.58) 50%,rgba(6,25,17,.52));z-index:-3}
.desire-mist{position:absolute;inset:0;background:linear-gradient(135deg,#334d42,#1b3028);opacity:calc(.88 - var(--scene) * .77);z-index:-2;pointer-events:none}
.desire-content{height:100%;width:min(1120px,calc(100% - 128px));margin:auto;display:grid;grid-template-columns: .85fr 1.15fr;grid-template-rows:1fr auto;align-items:center;column-gap:72px;padding:76px 0 62px}
.desire-content .h2{font-size:var(--t6);line-height:1.07;max-width:10ch;color:#fff;align-self:center}
.desire-content .h2 span{color:#fff;font-weight:inherit}
.desire-window{height:340px;overflow:hidden;position:relative;mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.desire-film .goals{display:flex;flex-direction:column;gap:0;margin:0;transform:translate3d(0,var(--desire-y,115px),0);will-change:transform}
.desire-film .goal{flex:none;width:100%;min-height:130px;padding:20px 0!important;margin:0!important;border:0!important;border-radius:0;background:none!important;text-align:left;font-size:var(--t5);line-height:1.15;letter-spacing:-.025em;color:#fff!important;transform:none!important;position:relative;opacity:.68;transition:opacity var(--slow) var(--curve);max-width:22ch}
.desire-film .goal::before{display:none}
.desire-film .goal.is-current{opacity:1}
.desire-film .goal[aria-pressed=true]::after{content:'✓';display:inline-block;font-size:var(--t3);margin-left:12px;color:#fff}
.desire-film .goal:focus-visible{outline:2px solid #fff;outline-offset:-4px;opacity:1}
.desire-bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:32px}
.desire-progress{height:2px;width:180px;background:#ffffff3b;overflow:hidden}
.desire-progress span{display:block;height:100%;width:100%;background:#fff;transform-origin:left;transform:scaleX(var(--scene));}
.desire-film .cta{background:var(--accent);color:#fff}
.motion-toggle{position:absolute;right:24px;bottom:8px;min-height:44px;color:white;font-size:var(--t1);text-decoration:underline;text-underline-offset:4px}
@media(min-width:900px) and (max-width:1199px){.hero .garden-phones{gap:8px;margin:0 16px}.hero .art .phone{flex-basis:248px;max-width:248px}.hero .art .phone.two{flex-basis:220px;max-width:220px}.hero .h1{font-size:var(--t5)}.desire-content{column-gap:40px}}
@media(max-width:899px){
 .hero.section{padding-top:24px}.hero .grid-12>.copy,.hero .grid-12>.art{grid-column:1/-1}.hero .grid-12>.copy{padding:0}.hero .h1{font-size:var(--t5);max-width:15ch}.hero .copy .lead{font-size:var(--t3)}
 .hero .grid-12>.art{margin:0 calc(-1 * var(--gutter));border-radius:56px 0 0 0;min-height:730px;padding:0}
 .hero .garden-phones{height:660px;margin:0;display:block;overflow:hidden}
 .hero .art .phone,.hero .art .phone.two{display:block;position:absolute;left:calc(50% - 140px);top:40px;right:auto;bottom:auto;width:280px;max-width:280px;transform:translateX(0);transition:transform 900ms var(--curve);margin:0}
 .hero .art .phone.two{left:calc(150% - 140px);transform:translateX(0)}
 .hero .art .phone.two .scr{aspect-ratio:284/650}
 .hero .art[data-screen='1'] .phone{transform:translateX(calc(-1 * var(--garden-width,390px)))}
 .garden-tabs{display:flex;position:absolute;z-index:8;bottom:20px;left:50%;transform:translateX(-50%);gap:8px;padding:4px;border-radius:999px;background:#10251ddd}
 .garden-tabs button{min-width:80px;min-height:44px;padding:8px 16px;border-radius:999px;font-size:var(--t2);color:#fff}
 .garden-tabs button[aria-pressed=true]{background:#f3f3e6;color:#183729}
 .leaf-front{width:240px;left:-140px;bottom:40px}.leaf-side{width:250px;right:-155px;top:150px}.leaf-back{width:290px;left:-130px;top:-60px}
 .desire-film{height:calc(100svh + 1600px)}.desire-stage{top:64px;height:calc(100svh - 64px);min-height:640px}
 .desire-content{width:calc(100% - 48px);grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:20px;padding:52px 0 64px}
 .desire-content .h2{font-size:var(--t5);max-width:14ch}.desire-content .h2 br{display:none}
 .desire-window{height:320px}.desire-film .goal{font-size:var(--t5);min-height:160px;max-width:15ch}
 .desire-bottom{grid-column:1;flex-direction:column;align-items:flex-start;gap:24px}.desire-progress{width:100px}
 .canopy-film{object-position:50% 60%}.desire-shade{background:rgba(6,25,17,.68)}
}
@media(prefers-reduced-motion:reduce){
 .garden-light,.garden-shadow,.garden-leaf{animation:none!important}.hero .art .phone{transition:none}
 .desire-film{height:auto}.desire-stage{position:relative;top:auto;height:auto;min-height:0}.desire-mist{opacity:.7}
 .desire-content{display:block;padding:64px 0}.desire-content .h2{max-width:18ch;margin-bottom:40px}
 .desire-window{height:auto;overflow:visible;mask-image:none}.desire-film .goals{transform:none!important}
 .desire-film .goal{font-size:var(--t4);min-height:80px;opacity:1;max-width:none}.desire-bottom{margin-top:40px}.desire-progress,.motion-toggle{display:none}
}
html:not(.js) .desire-film{height:auto}html:not(.js) .desire-stage{position:relative;height:auto;top:auto}html:not(.js) .desire-window{height:auto;mask-image:none}html:not(.js) .desire-film .goals{transform:none}
.hero .h1{font-size:var(--t6)}
@media(max-width:1199px){.hero .h1{font-size:var(--t5)}}
.hero .copy .micro{max-width:38ch}
.hero .art .phone .ct .ui-row:last-child{display:none}
@media(min-width:900px){.hero .grid-12>.art{min-height:730px}.hero .grid-12>.copy{align-self:center}}
.hero .art .phone .scr{aspect-ratio:auto;min-height:0;height:650px}
.hero .art .phone.two .scr{height:580px}
.hero .art .phone .ct{flex:1 1 auto;min-height:0;overflow:auto;padding-bottom:12px;scrollbar-width:none}
.hero .art .phone .ct .ui-row{padding-top:8px;padding-bottom:8px}
.hero .art .phone .ct .ui-row:last-child{display:flex}
.hero .art .phone .ct>.small{line-height:1.35}
@media(max-width:899px){.hero .art .phone .scr,.hero .art .phone.two .scr{height:590px}.hero .garden-phones{height:665px}}
/* Original Opening v2 source; optical crop stays on the fern, no upscaled derivative. */
.leaf-front,.leaf-side{z-index:1}
@media(max-width:899px){html:not(.js) .hero .garden-phones{height:auto;display:grid;gap:28px;padding:40px 0}html:not(.js) .hero .art .phone,html:not(.js) .hero .art .phone.two{position:relative;left:auto;top:auto;transform:none;margin:auto}html:not(.js) .garden-tabs{display:none}}

/* R11: one image-only interval. Scroll-driven lateral depth, with a static floor. */
.botanical-interlude{position:relative;isolation:isolate;overflow:hidden;contain:paint;width:min(calc(100% - 48px),1440px);height:clamp(280px,36vw,520px);margin:var(--s7) auto var(--s9);background:#1b2a21;--lateral:0px;--near-lateral:0px}
.botanical-interlude .interlude-ground{position:absolute;max-width:none;width:calc(100% + 64px);height:100%;left:-32px;top:0;object-fit:cover;object-position:50% 43%;transform:translate3d(var(--lateral),0,0)}
.botanical-interlude .interlude-near{position:absolute;height:auto;max-width:none;width:clamp(190px,25vw,360px);transform:translate3d(var(--near-lateral),0,0);pointer-events:none}
.interlude-left{left:-65px;bottom:-105px;rotate:24deg}.interlude-right{right:-90px;top:-110px;rotate:192deg}
@media(max-width:899px){.botanical-interlude{width:calc(100% - 32px);height:300px;margin-block:var(--s6) var(--s8)}.botanical-interlude .interlude-ground{object-position:58% 43%}.interlude-left{left:-65px;bottom:-65px}.interlude-right{right:-90px;top:-80px}}
@media(prefers-reduced-motion:reduce){.botanical-interlude :is(.interlude-ground,.interlude-near){transform:none!important}}

/* R14: approved compact hero, three text sizes in the copy column. */
.hero .copy .label,.hero .copy .cta,.hero .copy .trust{font-size:var(--t2)}
.hero .copy .label{line-height:1.4;letter-spacing:.04em}
.hero .copy .lead{max-width:38ch}
.hero .copy .trust{max-width:none}
@media(min-width:1200px){.hero .h1{font-size:clamp(40px,4vw,56px);max-width:18ch}}

/* Approved R10 leaves; white fiddlehead and plate motion deliberately untouched. */
.living-branch{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.living-branch-ready .vtree,.living-branch-ready .spine{visibility:hidden}
.botanical-toggle{position:fixed;bottom:12px;left:12px;z-index:20;min-height:44px;padding:10px 14px;border-radius:24px;background:#f8f8f2;color:#1f3d2b;border:1px solid #1f3d2b40;font-size:12px}
.botanical-toggle[hidden]{display:none}
@media(max-width:899px){.hero .grid-12>.copy{padding-right:64px}.hero .copy .cta{font-size:var(--t2);padding-left:14px;padding-right:14px}.botanical-toggle{left:auto;right:10px;font-size:11px}.how .steps .spine{max-width:24px}}
@media(prefers-reduced-motion:reduce){.botanical-toggle{display:none}}

.botanical-paused :is(.garden-light,.garden-shadow,.garden-leaf,.bot-b),.page-hidden :is(.garden-light,.garden-shadow,.garden-leaf,.bot-b){animation-play-state:paused!important}
@media(max-width:899px){.botanical-toggle{top:74px;bottom:auto;right:0;width:44px;height:44px;padding:0;font-size:0}.botanical-toggle[data-zone="how"]{left:0;right:auto}.botanical-toggle::before{content:"Ⅱ";font-size:20px}.botanical-toggle[aria-pressed="true"]::before{content:"▶"}.desire-film .motion-toggle{bottom:calc(24px + env(safe-area-inset-bottom))}}