/* ============================================================
   SERO — sections
   ============================================================ */

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  padding:.85rem 0;
  transition:background .45s var(--ease), border-color .45s var(--ease), padding .45s var(--ease), color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(241,237,230,.78);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);
  border-bottom-color:var(--line);
  padding:.6rem 0;
}
.nav.inv{ color:var(--on-void); }
.nav.inv.stuck{ background:rgba(12,11,10,.55); border-bottom-color:var(--line-void); }
.nav .wrap{ display:flex; align-items:center; gap:1.5rem; }

.logo{ display:flex; align-items:center; gap:.55rem; flex:none; min-height:44px; }
.logo .mark{ width:26px; height:26px; flex:none; }
.logo .wm{ font-family:var(--display); font-size:1.2rem; font-weight:700; letter-spacing:-.04em; }
.logo .wm sup{ font-size:.42em; font-weight:500; letter-spacing:0; top:-.9em; margin-left:.14em; }

.nav-links{ display:flex; gap:.2rem; margin-left:auto; }
.nav-links a{
  padding:.5rem .8rem; border-radius:var(--r-xs);
  font-size:.9rem; font-weight:450; color:var(--ink-2);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav-links a:hover{ color:var(--ink); background:rgba(20,17,13,.05); }
.nav.inv .nav-links a{ color:rgba(243,239,232,.72); }
.nav.inv .nav-links a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.nav.inv .btn.sm{ --bg:var(--on-void); --fg:var(--void); --bd:var(--on-void); }
.nav.inv .btn.sm:hover{ background:var(--ember); border-color:var(--ember); color:#fff; }

.nav-cta{ display:flex; align-items:center; gap:.6rem; flex:none; margin-left:auto; }
.nv-s{ display:none; }

.burger{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  background:var(--paper); border-radius:var(--r-xs); cursor:pointer;
  align-items:center; justify-content:center; padding:0;
}
.burger span{ display:block; width:15px; height:1.5px; background:var(--ink); position:relative; transition:.3s var(--ease); }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:15px; height:1.5px; background:var(--ink); transition:.3s var(--ease);
}
.burger span::before{ top:-5px; } .burger span::after{ top:5px; }
.burger.open span{ background:transparent; }
.burger.open span::before{ top:0; transform:rotate(45deg); }
.burger.open span::after{ top:0; transform:rotate(-45deg); }
.nav.inv .burger{ background:rgba(255,255,255,.1); border-color:var(--line-void); }
.nav.inv .burger span,.nav.inv .burger span::before,.nav.inv .burger span::after{ background:var(--on-void); }

.drawer{
  position:fixed; inset:0; z-index:89;
  background:rgba(241,237,230,.96);
  -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px);
  display:flex; flex-direction:column; justify-content:center; gap:.2rem;
  padding:0 var(--pad);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.drawer.open{ opacity:1; visibility:visible; }
.drawer a{ font-family:var(--display); font-weight:700; font-size:2.1rem; letter-spacing:-.03em; padding:.3rem 0; }
.drawer .btn{ margin-top:1.6rem; align-self:flex-start; }

/* ============================================================
   HERO — full-bleed dawn, copy bottom-left, pinned for a beat
   ============================================================ */
.hero-stage{ position:relative; height:165svh; background:var(--void); z-index:0; }
.hero{
  position:sticky; top:0; height:100svh; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  color:var(--on-void);
}
.hero-media{ position:absolute; inset:0; z-index:-2; background:var(--void); }
.hero-media picture,.hero-media img{ width:100%; height:100%; }
.hero-media img{
  object-fit:cover; object-position:50% 50%;
  transform:scale(calc(1.02 + var(--p,0) * .16)) translate3d(0, calc(var(--p,0) * -2vh), 0);
  will-change:transform;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,11,10,.58) 0%, rgba(12,11,10,.24) 14%, rgba(12,11,10,0) 34%),
    linear-gradient(to top right, rgba(12,11,10,.9) 0%, rgba(12,11,10,.72) 26%, rgba(12,11,10,.34) 50%, rgba(12,11,10,0) 74%);
}

.hero-hud{
  position:absolute; z-index:3; left:0; right:0; top:5.4rem;
  display:flex; justify-content:space-between; align-items:flex-start; gap:2rem;
  padding-inline:var(--pad);
  opacity:calc(1 - clamp(0, (var(--p,0) - .2) / .25, 1));
}
.hero-hud .col{ display:flex; flex-direction:column; gap:.45rem; }
.hero-hud .col.r{ text-align:right; align-items:flex-end; }
.hero-hud .mono{ color:rgba(243,239,232,.6); font-size:.63rem; }
.hero-hud .v{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:rgba(243,239,232,.92); text-transform:uppercase; }

.hero-copy{
  position:relative; z-index:3;
  margin-top:auto;
  max-width:min(1020px, 100%);
  padding:0 var(--pad) clamp(2.4rem,5.5vw,4rem);
  transform:translate3d(0, calc(var(--p,0) * -8vh), 0);
  opacity:calc(1 - clamp(0, (var(--p,0) - .3) / .3, 1));
  will-change:transform, opacity;
}
.hero-copy .hud{ color:rgba(243,239,232,.72); margin-bottom:1.3rem; }
.hero-copy .hud::before{ background:var(--ember-3); }
.hero h1{
  color:#fff; max-width:100%;
  font-size:clamp(2.3rem, 4.4vw, 3.9rem); letter-spacing:-.034em; line-height:1.02;
  text-shadow:0 2px 40px rgba(0,0,0,.4);
}
.hero h1 .fade{ color:rgba(255,255,255,.62); }
.hero .lede{
  color:rgba(243,239,232,.82);
  margin:1.4rem 0 0; max-width:56ch;
  font-size:clamp(1rem, 1.4vw, 1.16rem);
  text-shadow:0 1px 20px rgba(0,0,0,.3);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; align-items:center; }
.hero-copy .from{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(243,239,232,.72); margin:1.1rem 0 0;
}
.hero .btn{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
.hero .btn:hover{ background:#fff; border-color:#fff; color:var(--ember); box-shadow:0 14px 30px -14px rgba(0,0,0,.5); }
.hero .btn.glass-dark{ --bg:rgba(18,16,14,.42); --fg:#fff; --bd:rgba(255,255,255,.4); }

.hero-stats{
  display:flex; gap:clamp(1.6rem,4vw,3rem);
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
  padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero-stats div .v{ font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,2.2vw,1.85rem); letter-spacing:-.035em; display:block; line-height:1; color:#fff; }
.hero-stats div .mono{ display:block; margin-top:.45rem; color:rgba(243,239,232,.6); }

.scroll-cue{
  position:absolute; right:var(--pad); bottom:2rem;
  z-index:3; display:flex; align-items:center; gap:.7rem;
  opacity:calc(1 - clamp(0, var(--p,0) / .2, 1));
}
.scroll-cue .mono{ color:rgba(243,239,232,.6); }
.scroll-cue .bar{ width:34px; height:1px; background:rgba(255,255,255,.3); position:relative; overflow:hidden; }
.scroll-cue .bar::after{
  content:""; position:absolute; inset:0; background:#fff;
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateX(-100%);} 55%,100%{ transform:translateX(100%);} }

/* ============================================================
   PREMISE — slides up over the pinned hero
   ============================================================ */
.premise{
  position:relative; z-index:2;
  margin-top:-65svh;
  background:var(--bone);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -30px 80px -30px rgba(0,0,0,.5);
  overflow:hidden;
}
.premise .aura{ z-index:0; }
.premise .wrap{ position:relative; z-index:1; }

.ticker{ border-bottom:1px solid var(--line); padding:1.05rem 0; overflow:hidden; position:relative; z-index:1; }
.ticker-track{ display:flex; width:max-content; animation:tick 46s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track .g{ display:flex; }
.ticker span{
  display:inline-flex; align-items:center; gap:.7rem;
  padding-inline:1.9rem; white-space:nowrap;
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.ticker span::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--ember); flex:none; }
@keyframes tick{ to{ transform:translateX(-50%); } }

.statement{ padding-block:clamp(4.5rem,10vw,8.5rem) clamp(2.5rem,5vw,4rem); }
.statement .d2{ max-width:16ch; }
.statement-grid{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:1fr; align-items:start;
}
@media(min-width:900px){ .statement-grid{ grid-template-columns:1.15fr .95fr; gap:5rem; } }
.statement-side{ padding-top:.5rem; }
.statement-side p{ font-size:clamp(1.02rem,1.3vw,1.14rem); line-height:1.56; color:var(--ink); }
.statement-side p + .mono{ display:block; margin-top:2rem; }

/* ---------- the bento: four things happening right now ---------- */
.live{
  display:grid; gap:12px; grid-template-columns:1fr;
  margin-top:clamp(2.4rem,5vw,3.4rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
@media(min-width:700px){ .live{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1080px){ .live{ grid-template-columns:repeat(4,1fr); } }
.live-card{
  position:relative; display:flex; flex-direction:column;
  padding:1.3rem 1.35rem 1.4rem;
  border-radius:var(--r-l); border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow-s);
}
.live-card .hud{ color:var(--ink-3); }
.live-card h4{
  font-family:var(--display); font-weight:700;
  font-size:1.15rem; letter-spacing:-.026em; line-height:1.18;
  margin:.75rem 0 auto; padding-bottom:1.3rem;
}
.live-card .lv{ display:flex; align-items:baseline; gap:.4rem; margin-bottom:.85rem; }
.live-card .lv b{ font-family:var(--display); font-weight:700; font-size:1.7rem; letter-spacing:-.04em; line-height:1; }
.live-card .lv span{ font-size:.8rem; color:var(--ink-3); }
.live-card .lv .chip{ margin-left:auto; }

/* ============================================================
   THE EXPAND — a card that grows to fill the page as you scroll
   ------------------------------------------------------------
   --e is the eased slice of --p the growth runs over. A pinned
   stage holds the card still while it opens out; a plain frame
   just opens as it arrives.
   ============================================================ */
[data-scroll]{ --e:clamp(0, (var(--p, 0) - .04) / .34, 1); }

/* ============================================================
   BIOLOGICAL AGE — section 01, near the top
   ============================================================ */
.bioage{ background:var(--bone); }
.bioage-frame{ padding-inline:calc(var(--pad) * (1 - var(--e, 0))); }
.bioage-body{ max-width:calc(var(--max) - var(--pad) * 2); margin-inline:auto; }
.bioage-inner{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:calc(var(--r-xl) * (1 - var(--e, 0)));
  padding:clamp(2.8rem,5.5vw,4.5rem) clamp(1.2rem,4vw,3.5rem) clamp(2.2rem,4vw,3.2rem);
  background:linear-gradient(170deg, var(--paper) 0%, #F4EDE3 46%, #EFE4D6 100%);
  border:1px solid var(--line);
}
.bioage-inner::before{
  content:""; position:absolute; z-index:-1; inset:auto -10% -40% -10%; height:70%;
  background:radial-gradient(ellipse at 50% 100%, rgba(240,168,121,.42), transparent 68%);
  filter:blur(40px);
}
.bioage-head{ text-align:center; max-width:min(700px,100%); margin-inline:auto; }
.bioage-head .mono{ display:block; margin-bottom:1rem; }
.bioage-head .sub{ margin:1.1rem auto 0; }

.ruler-wrap{ position:relative; margin:clamp(2.2rem,4.5vw,3.4rem) auto 0; max-width:920px; }
.ruler{ width:100%; height:auto; overflow:visible; display:block; }
.ruler .tk{ stroke:#14110D; stroke-width:1.2; opacity:.38; }
.ruler .tk.major{ stroke-width:1.5; opacity:.7; }
.ruler .lb{ font-family:var(--mono); font-size:11px; fill:var(--ink-3); letter-spacing:.08em; }
.ruler .m{ transition:transform 1.4s var(--ease-out); }
.ruler .m-line{ stroke-width:2; }
.ruler .m-actual .m-line{ stroke:#14110D; }
.ruler .m-bio .m-line{ stroke:var(--ember); }
.ruler .m-actual circle{ fill:#14110D; }
.ruler .m-bio circle{ fill:var(--ember); }
.ruler .m-bio .halo{ fill:var(--ember); opacity:.24; }
.ruler .m text{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; fill:var(--ink-2); }
.ruler .m-bio text{ fill:var(--ember); }

.bioage-nums{
  display:flex; justify-content:center; align-items:center; gap:clamp(1.6rem,6vw,4.5rem);
  margin-top:clamp(1.2rem,2.5vw,1.8rem);
}
.bioage-nums .mono{ display:block; color:var(--ink-2); font-weight:500; }
.bioage-nums b{
  display:block; margin-top:.35rem;
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.8rem,6vw,4.6rem); letter-spacing:-.05em; line-height:1;
  color:var(--ink);
}
.bioage-nums .b-bio b{ color:var(--ember); }
.bioage-nums .delta .pill{ font-size:.82rem; background:var(--ink); color:var(--on-void); border-color:var(--ink); padding:.55em 1em; }
.bioage-nums .delta .pill .dot{ background:var(--ember-3); }

.bioage-grid{
  display:grid; gap:clamp(1.6rem,3.5vw,3rem); grid-template-columns:1fr;
  margin-top:clamp(2.4rem,4.5vw,3.6rem);
  align-items:start;
}
@media(min-width:960px){ .bioage-grid{ grid-template-columns:.95fr 1.05fr; } }
.bioage-copy h3{ margin-bottom:.9rem; }
.bioage-copy p{ color:var(--ink-2); }
.bioage-copy .inputs{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.3rem; }
.bioage-copy .inputs .pill{ font-size:.74rem; background:rgba(255,255,255,.6); }

.calc{
  border-radius:var(--r-l); padding:clamp(1.2rem,2.2vw,1.7rem);
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-m);
}
.calc-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.calc-head h4{ font-family:var(--display); font-weight:700; font-size:1.2rem; letter-spacing:-.028em; }
.calc-grid{ display:grid; gap:8px; grid-template-columns:repeat(2,1fr); }
@media(min-width:560px){ .calc-grid{ grid-template-columns:repeat(3,1fr); } }
.field{ display:flex; flex-direction:column; gap:.3rem; padding:.65rem .75rem .6rem; border-radius:var(--r-s); background:var(--bone); border:1px solid var(--line-2); }
.field label{ font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); display:flex; justify-content:space-between; gap:.4rem; }
.field label small{ font-size:.54rem; color:var(--ink-4); letter-spacing:.06em; text-transform:none; }
.field input{
  border:0; background:transparent; padding:0; margin:0; width:100%;
  font-family:var(--display); font-size:1.1rem; font-weight:700; letter-spacing:-.03em; color:var(--ink);
  outline:none; font-variant-numeric:tabular-nums;
}
.field input:focus{ color:var(--ember); }
.field.age{ grid-column:1 / -1; background:var(--ink); border-color:var(--ink); }
.field.age label{ color:var(--on-void-2); }
.field.age input{ color:var(--on-void); font-size:1.25rem; }
.calc-foot{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1rem; }
.calc-foot .out{ font-size:.92rem; color:var(--ink-2); }
.calc-foot .out b{ font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-.04em; color:var(--ember); margin-left:.3rem; }
.calc-note{ margin-top:.9rem; font-size:.74rem; line-height:1.5; color:var(--ink-3); }

/* ============================================================
   WHAT WE MEASURE — the body map and the marker cards
   ============================================================ */
.markers{ position:relative; background:var(--bone); }
.markers-grid{
  display:grid; gap:clamp(1.6rem,3.5vw,3rem);
  grid-template-columns:1fr; align-items:start;
}
@media(min-width:1000px){ .markers-grid{ grid-template-columns:minmax(280px,.8fr) 1.9fr; } }

.body-stage{
  position:relative;
  height:clamp(400px, 72vh, 700px);
  border-radius:var(--r-xl);
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(240,168,121,.20), transparent 70%),
    linear-gradient(180deg, var(--paper), #EAE4D9);
  border:1px solid var(--line);
  overflow:hidden; isolation:isolate;
}
@media(min-width:1000px){ .body-stage{ position:sticky; top:11vh; } }
.body-stage canvas{ width:100%; height:100%; display:block; }
.body-stage .hud{ position:absolute; left:1.1rem; top:1.05rem; color:var(--ink-3); }
.body-stage .corner{ position:absolute; right:1.1rem; top:1.05rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); }
.body-label{
  position:absolute; z-index:2;
  left:calc(var(--lx,.5) * 100%); top:calc(var(--ly,.5) * 100%);
  translate:-50% calc(-100% - 14px);
  padding:.45rem .7rem .45rem .62rem;
  border-radius:var(--r-xs);
  background:rgba(20,17,13,.9); color:var(--on-void);
  font-size:.76rem; font-weight:550; letter-spacing:-.008em; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.5rem;
  opacity:0; transition:opacity .3s var(--ease), left .5s var(--ease-out), top .5s var(--ease-out);
  pointer-events:none;
}
.body-label::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--ember-3); flex:none; }
.body-label span{ white-space:nowrap; }
.body-label .mono{ color:var(--on-void-2); font-size:.58rem; margin-left:.2rem; }
.body-label.on{ opacity:1; }
.body-stage .foot{
  position:absolute; left:1.1rem; right:1.1rem; bottom:1rem;
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4);
}

/* ---------- the marker card (Manual readout) ---------- */
.marker-grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(210px,1fr));
}
.mk{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--r-l);
  background:var(--card);
  padding:1.05rem 1.1rem 1.15rem;
  opacity:0; translate:0 16px;
  transition:opacity .8s var(--ease-out), translate .8s var(--ease-out), border-color .3s var(--ease), box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
  transition-delay:var(--d,0ms), var(--d,0ms), 0ms, 0ms, 0ms;
}
.mk.in{ opacity:1; translate:0 0; }
.mk:hover,.mk.lit{ border-color:rgba(47,122,74,.4); box-shadow:var(--shadow-m); transform:translateY(-3px); }
.mk-top{ display:flex; align-items:flex-start; gap:.6rem; }
.mk .n{ font-size:.95rem; font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.mk .chip{ margin-left:auto; flex:none; }
.mk .def{ margin:.4rem 0 0; font-size:.8rem; line-height:1.42; color:var(--ink-3); }
.mk .val{ display:flex; align-items:baseline; gap:.32rem; margin:.9rem 0 .7rem; }
.mk .val b{ font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-.042em; line-height:1; }
.mk .val span{ font-size:.76rem; color:var(--ink-3); }
.mk .rng{ margin-top:auto; }

.marker-more{ display:flex; align-items:center; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }
.marker-key{ display:flex; gap:1.1rem; flex-wrap:wrap; margin-top:1.4rem; }
.marker-key span{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.marker-key i{ width:8px; height:8px; border-radius:50%; display:inline-block; }

/* ============================================================
   STEPS — the sticky process
   ============================================================ */
.steps-wrap{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); grid-template-columns:1fr; }
@media(min-width:1000px){ .steps-wrap{ grid-template-columns:1fr 1fr; gap:5rem; align-items:start; } }

.steps-media{ display:none; }
@media(min-width:1000px){
  .steps-media{
    display:block; position:sticky; top:15vh;
    height:70vh; border-radius:var(--r-xl); overflow:hidden;
    background:var(--void-2); box-shadow:var(--shadow-l);
  }
}
.steps-media figure{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .8s var(--ease), transform 1.2s var(--ease-out); transform:scale(1.04); }
.steps-media figure.on{ opacity:1; transform:none; }
.steps-media img{ width:100%; height:100%; object-fit:cover; }
.steps-media figcaption{
  position:absolute; left:1.2rem; bottom:1.2rem;
  padding:.5rem .85rem; border-radius:var(--r-xs);
  background:rgba(12,11,10,.55);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);
  color:#fff; font-family:var(--mono);
  font-size:.64rem; letter-spacing:.13em; text-transform:uppercase;
}

.step{ padding-block:clamp(2.2rem,5vw,3.4rem); border-top:1px solid var(--line-void); }
.step:first-child{ border-top:0; padding-top:0; }
.step .mono{ display:block; margin-bottom:.9rem; }
.step h3{ margin-bottom:.85rem; }
.step .thumb{ border-radius:var(--r-l); overflow:hidden; margin:1.3rem 0 0; aspect-ratio:3/2; }
.step .thumb img{ width:100%; height:100%; object-fit:cover; }
@media(min-width:1000px){ .step .thumb{ display:none; } }

.chapters{
  position:absolute; z-index:3; left:1.2rem; right:1.2rem; top:1.2rem;
  display:flex; gap:1.35rem;
  padding:.55rem .95rem;
  border-radius:var(--r-xs);
  background:rgba(12,11,10,.45);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14);
  font-family:var(--mono);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
}
.chapters span{ color:rgba(255,255,255,.42); transition:color .45s var(--ease); position:relative; }
.chapters span.on{ color:#fff; }
.chapters span.on::after{
  content:""; position:absolute; left:0; right:0; bottom:-.42rem; height:1.5px;
  background:var(--ember-3); border-radius:2px;
}

/* ============================================================
   WHAT ARRIVES — the box
   ============================================================ */
.kit{ background:var(--paper); border-block:1px solid var(--line); }
.kit-grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr; align-items:center; }
@media(min-width:900px){ .kit-grid{ grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,5vw,4.5rem); } }
.kit-media{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:var(--bone-2); box-shadow:var(--shadow-l);
  aspect-ratio:4/3;
}
.kit-media img{ width:100%; height:100%; object-fit:cover; transform:scale(calc(1.06 - var(--p,0) * .06)); }
.kit-media figcaption{
  position:absolute; left:1.1rem; bottom:1.1rem;
  padding:.5rem .85rem; border-radius:var(--r-xs);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2);
}
.kit-list{ list-style:none; margin:1.8rem 0 0; padding:0; display:flex; flex-direction:column; }
.kit-list li{
  display:flex; align-items:baseline; gap:.9rem;
  padding:.85rem 0; border-top:1px solid var(--line);
  font-size:.95rem; color:var(--ink-2);
}
.kit-list li:last-child{ border-bottom:1px solid var(--line); }
.kit-list li b{ color:var(--ink); font-weight:600; flex:none; min-width:9.5rem; }

/* ============================================================
   THE READING — pinned; the panel grows to full bleed
   ============================================================ */
.bio-stage{ position:relative; height:185vh; }
.bio-pin{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:stretch;
  padding:calc(var(--pad) * (1 - var(--p, 0)));
  will-change:padding;
}
.bio{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; flex:1; min-height:0;
  border-radius:calc(var(--r-xl) * (1 - var(--p, 0)));
  padding:clamp(3rem,6vw,5.5rem) clamp(1.2rem,4vw,3rem) clamp(2rem,3.5vw,3rem);
  text-align:center;
  will-change:border-radius;
}
.bio > picture{ position:absolute; inset:0; z-index:-1; display:block; }
.bio img.bg{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:cover; object-position:50% 33%;
  transform:scale(calc(1.08 - var(--p,0) * .08));
}
.bio::after{
  content:""; position:absolute; inset:auto 0 0 0; height:34%; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg, rgba(255,238,222,.46) 0%, rgba(255,238,222,.16) 42%, rgba(255,238,222,0) 100%);
}
.bio-head{ max-width:min(760px,100%); margin-inline:auto; transform:translate3d(0, calc(var(--p,0) * -1.6vh), 0); }
.bio h2{ color:#14110D; }
.bio .fade{ color:#8D8A82; }
.bio-sub{
  margin:clamp(1rem,2vw,1.4rem) auto 0; max-width:38ch;
  font-size:clamp(1rem,1.4vw,1.14rem); line-height:1.45;
  letter-spacing:-.014em; color:#3E3A32;
}

.arc-wrap{ flex:1; display:grid; place-items:center; padding-block:clamp(1rem,3vw,2.2rem); min-height:0; position:relative; }
.arc-box{ position:relative; width:min(860px,100%); }
.arc{ width:100%; height:auto; overflow:visible; }
.arc{ --sweep:0; }
.arc .curve{ stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--sweep)); opacity:.4; }
.arc .ticks line{ opacity:calc(var(--o) * clamp(0, var(--sweep) * 34 - var(--i) + 1, 1)); transition:stroke .4s var(--ease); }
.arc .ticks line.fl{ stroke:var(--ember); stroke-width:3.2; }
.arc-dot,.arc-halo{ opacity:0; }

.bio-flag{
  position:absolute; z-index:2;
  left:calc(var(--fx) * 1%); top:calc(var(--fy) * 1%);
  translate:-50% 6px;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.42rem .7rem .42rem .58rem; border-radius:var(--r-xs);
  background:rgba(20,17,13,.92); color:var(--on-void);
  font-size:.76rem; font-weight:550; white-space:nowrap;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5);
  opacity:0; transition:opacity .45s var(--ease), translate .6s var(--ease-out);
}
.bio-flag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ember-3); flex:none; }
.bio-flag .mono{ color:var(--on-void-2); font-size:.58rem; letter-spacing:.1em; white-space:nowrap; }
.bio-flag{ white-space:nowrap; }
.bio-flag.on{ opacity:1; translate:-50% -46px; }

.bio-stats{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(2.6rem,9vw,7rem); }
.bio-stats .mono{ color:#3A2312; display:block; font-weight:500; }
.bio-stats b{
  display:block; margin-top:.4rem;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.8rem,3.2vw,2.4rem); letter-spacing:-.045em; color:#16130F;
}

@media (prefers-reduced-motion:reduce){
  .showcase-stage,.cta-stage{ height:auto; }
  .showcase-pin,.cta-pin{ position:static; height:auto; min-height:88vh; padding:var(--pad); }
  .bioage-frame{ padding-inline:var(--pad); }
  .cta-inner .hud,.cta-inner h2,.cta-inner .lede,.cta-actions{ opacity:1; translate:none; }
  .arc .ticks line{ opacity:var(--o); }
  .arc .curve{ stroke-dashoffset:0; }
  .arc-dot{ opacity:1; }
  .bio-flag{ opacity:1; translate:-50% -46px; }
  .bio-stage{ height:auto; }
  .bio-pin{ position:static; height:auto; min-height:88vh; padding:var(--pad); }
}

/* ============================================================
   THE SHOWCASE — the portrait and the readout
   ============================================================ */
.showcase-stage{ position:relative; height:150vh; }
.showcase-pin{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:stretch;
  padding:calc(var(--pad) * (1 - var(--e, 0)));
  will-change:padding;
}
.showcase-inner{
  position:relative; flex:1; min-height:0;
  border-radius:calc(var(--r-xl) * (1 - var(--e, 0))); overflow:hidden;
  display:grid; align-content:space-between;
  padding:clamp(1.6rem,3.2vw,2.6rem);
  padding-bottom:calc(clamp(1.6rem,3.2vw,2.6rem) + 4rem);
  isolation:isolate;
  will-change:border-radius;
}
.showcase-inner > img.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:64% 48%; z-index:-2;
  transform:scale(calc(1.12 - var(--e, 0) * .12));
}
.showcase-inner::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 8% 14%, rgba(30,22,14,.86) 0%, rgba(30,22,14,.5) 38%, rgba(30,22,14,0) 68%),
    linear-gradient(180deg, rgba(30,22,14,.3) 0%, rgba(30,22,14,0) 30%, rgba(30,22,14,.34) 100%);
}
.showcase-head{ position:relative; z-index:2; color:#fff; max-width:30ch; }
.showcase-head .hud{ color:rgba(255,255,255,.7); margin-bottom:1rem; }
.showcase-head .hud::before{ background:var(--ember-3); }
.showcase-head h3{ color:#fff; }
.showcase-head .fade{ color:rgba(255,255,255,.58); }

.readout-group{ position:relative; z-index:2; width:100%; max-width:480px; }
.readout{ display:flex; flex-direction:column; gap:8px; }
.row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem .9rem;
  padding:.85rem 1rem .9rem;
  border-radius:var(--r-m);
  background:rgba(26,14,9,.42);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);
  backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 30px -14px rgba(40,15,5,.5), inset 0 1px 0 rgba(255,255,255,.16);
  color:#fff;
}
.row .dot{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--good-2); }
.row.watch .dot{ background:var(--watch-2); }
.row.high .dot{ background:var(--high-2); }
.row .nm{ font-size:.92rem; font-weight:550; letter-spacing:-.015em; }
.row .val{ display:flex; align-items:center; gap:.7rem; justify-self:end; }
.row .figure{ font-family:var(--mono); font-size:.78rem; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.9); }
.row .rng{ grid-column:2 / 4; }
.row{ --rp:clamp(0, ((var(--p, 0) - .22) * 8) - (var(--n, 0) * .6), 1); }
.row{ opacity:var(--rp); translate:calc((1 - var(--rp)) * -16px) 0; }

.dial-card{
  position:absolute; right:clamp(1.6rem,3.2vw,2.6rem); bottom:calc(clamp(1.6rem,3.2vw,2.6rem) + 4rem);
  z-index:2; display:none;
  padding:1.4rem 1.6rem; border-radius:var(--r-l);
  background:rgba(26,14,9,.42);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 10px 40px -16px rgba(40,15,5,.5), inset 0 1px 0 rgba(255,255,255,.22);
  color:#fff; text-align:center;
}
@media(min-width:900px){ .dial-card{ display:block; } }
.dial{ position:relative; width:124px; height:124px; margin-inline:auto; }
.dial svg{ width:100%; height:100%; transform:rotate(-90deg); }
.dial .tr{ stroke:rgba(255,255,255,.2); }
.dial .pg{ stroke:#fff; stroke-linecap:round; transition:stroke-dashoffset 1.8s var(--ease-out); }
.dial .mid{ position:absolute; inset:0; display:grid; place-content:center; }
.dial .mid b{ display:block; font-family:var(--display); font-weight:700; font-size:2.2rem; letter-spacing:-.05em; line-height:1; }
.dial .mid span{ display:block; font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; margin-top:.3rem; opacity:.7; }
.dial-card .cap{ margin-top:.85rem; font-size:.79rem; color:rgba(255,255,255,.78); max-width:18ch; }

/* ============================================================
   PANELS / PRICING
   ============================================================ */
.panels{ display:grid; gap:12px; grid-template-columns:1fr; align-items:stretch; }
@media(min-width:820px){ .panels{ grid-template-columns:repeat(3,1fr); } }

.panel{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(1.5rem,2.6vw,2rem);
  border-radius:var(--r-l);
  border:1px solid var(--line);
  background:var(--card);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s var(--ease);
}
.panel:hover{ transform:translateY(-4px); box-shadow:var(--shadow-l); }
.panel.feat{ background:var(--void); color:var(--on-void); border-color:var(--void); overflow:hidden; isolation:isolate; }
.panel.feat::before{
  content:""; position:absolute; z-index:-1; width:130%; height:70%; left:-15%; bottom:-32%;
  background:radial-gradient(ellipse at 50% 50%, rgba(185,217,74,.5), transparent 65%);
  filter:blur(50px);
}
.panel.feat .p-name,.panel.feat .p-price{ color:var(--on-void); }
.panel.feat .p-desc,.panel.feat li{ color:var(--on-void-2); }
.panel.feat li strong{ color:var(--on-void); }
.panel.feat .p-list{ border-color:var(--line-void); }
.panel.feat li::before{ background:var(--ember-3); }

.p-flag{
  position:absolute; top:1.1rem; right:1.1rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.34rem .5rem; border-radius:var(--r-xs); background:var(--ember); color:#fff;
}
.p-name{ font-family:var(--display); font-weight:700; font-size:1.35rem; letter-spacing:-.03em; }
.p-markers{ font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-top:.4rem; display:block; }
.panel.feat .p-markers{ color:var(--on-void-2); }
.p-price{ display:flex; align-items:baseline; gap:.35rem; margin:1.2rem 0 .35rem; }
.p-price b{ font-family:var(--display); font-weight:700; font-size:2.9rem; letter-spacing:-.055em; line-height:1; }
.p-price .per{ font-size:.84rem; color:var(--ink-3); }
.panel.feat .p-price .per{ color:var(--on-void-2); }
.p-desc{ font-size:.92rem; color:var(--ink-2); line-height:1.5; margin-top:.5rem; min-height:3em; }
.p-list{ list-style:none; margin:1.3rem 0 0; padding:1.3rem 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.7rem; }
.p-list li{ position:relative; padding-left:1.35rem; font-size:.9rem; line-height:1.45; color:var(--ink-2); }
.p-list li::before{ content:""; position:absolute; left:0; top:.5em; width:6px; height:6px; border-radius:50%; background:var(--ember); }
.panel .p-cta{ margin-top:auto; padding-top:1.5rem; }
.panel-note{ margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.5rem; }

.subscribe{
  margin-top:12px;
  border-radius:var(--r-l);
  border:1px solid var(--ember);
  background:linear-gradient(100deg, var(--ember-soft), rgba(246,229,218,.4));
  padding:clamp(1.5rem,3vw,2.2rem);
  display:grid; gap:1.4rem;
}
@media(min-width:820px){ .subscribe{ grid-template-columns:1fr auto; align-items:center; gap:2.5rem; } }
.subscribe h3{ margin-bottom:.5rem; }

/* ============================================================
   THE RETEST
   ============================================================ */
.loop-sec{ position:relative; isolation:isolate; overflow:hidden; }
.loop-sec > img.bg{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; opacity:.6;
  object-position:50% 30%;
  transform:scale(calc(1.1 - var(--p,0) * .08));
}
.loop-sec::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(12,11,10,.62) 0%, rgba(12,11,10,.82) 46%, var(--void) 100%);
}
.loop-grid{ display:grid; gap:12px; grid-template-columns:1fr; position:relative; z-index:2; }
@media(min-width:760px){ .loop-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1080px){ .loop-grid{ grid-template-columns:repeat(4,1fr); } }
.loop{
  padding:1.4rem 1.4rem 1.6rem;
  border-radius:var(--r-l);
  border:1px solid var(--line-void);
  background:rgba(255,252,247,.06);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  position:relative; overflow:hidden;
}
.loop .idx{ font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; color:var(--ember-3); display:block; margin-bottom:1.5rem; }
.loop h4{ font-family:var(--display); font-weight:700; font-size:1.22rem; letter-spacing:-.028em; margin-bottom:.55rem; }
.loop p{ font-size:.89rem; line-height:1.5; color:var(--on-void-2); }

.trend{
  position:relative; z-index:2;
  margin-top:12px; padding:clamp(1.3rem,2.4vw,1.9rem);
  border-radius:var(--r-l); border:1px solid var(--line-void);
  background:rgba(255,252,247,.05);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  display:grid; gap:1.6rem; grid-template-columns:1fr;
}
@media(min-width:860px){ .trend{ grid-template-columns:minmax(220px,.68fr) 1.6fr; align-items:center; gap:2.5rem; } }
.trend .tl h4{ font-family:var(--display); font-weight:700; font-size:1.35rem; letter-spacing:-.03em; margin:.7rem 0 .5rem; }
.trend .tl p{ font-size:.89rem; color:var(--on-void-2); }
.trend .tl .num{ display:flex; align-items:baseline; gap:.5rem; margin-top:1.1rem; flex-wrap:wrap; }
.trend .tl .num b{ font-family:var(--display); font-weight:700; font-size:1.9rem; letter-spacing:-.045em; }
.trend svg{ width:100%; height:auto; overflow:visible; }
.trend .grid line{ stroke:var(--line-void-2); }
.trend .axis text{ font-family:var(--mono); font-size:10px; fill:var(--on-void-3); letter-spacing:.1em; }
.trend .band{ fill:rgba(127,195,158,.12); }
.trend .band-lb{ font-family:var(--mono); font-size:9.5px; fill:rgba(127,195,158,.75); letter-spacing:.1em; }
.trend .line{
  stroke:var(--ember-3); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:calc(1 - clamp(0, (var(--p,0) - .12) / .22, 1));
}
.trend .pts circle{ fill:var(--void); stroke:var(--ember-3); stroke-width:2; opacity:clamp(0, (var(--p,0) - .13) * 9 - var(--i,0) * .6, 1); }
.trend .pts circle.end{ fill:var(--ember-3); }
.trend .lbl{ font-family:var(--mono); font-size:12px; font-weight:500; fill:#fff; letter-spacing:.06em; opacity:clamp(0, (var(--p,0) - .28) * 10, 1); }
.trend .band{ opacity:clamp(0, (var(--p,0) - .08) * 8, 1); }
.trend .band-lb{ opacity:clamp(0, (var(--p,0) - .1) * 8, 1); }

/* ============================================================
   COMPARE
   ============================================================ */
.cmp-scroll{ overflow-x:auto; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); }
table.cmp{ width:100%; min-width:660px; border-collapse:collapse; }
table.cmp th,table.cmp td{ padding:1rem 1.1rem; text-align:left; vertical-align:middle; }
table.cmp thead th{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; border-bottom:1px solid var(--ink); padding-bottom:.8rem;
}
table.cmp thead th.us{ color:var(--ember); }
table.cmp tbody td{ border-bottom:1px solid var(--line-2); font-size:.92rem; color:var(--ink-2); }
table.cmp tbody td:first-child{ color:var(--ink); font-weight:500; }
table.cmp td.us{
  background:rgba(246,229,218,.75); color:var(--ink); font-weight:550;
  box-shadow:inset 1px 0 0 rgba(47,122,74,.22), inset -1px 0 0 rgba(47,122,74,.22);
}
table.cmp tbody tr:first-child td.us{ box-shadow:inset 1px 0 0 rgba(47,122,74,.22), inset -1px 0 0 rgba(47,122,74,.22), inset 0 1px 0 rgba(47,122,74,.22); }
table.cmp tbody tr:last-child td.us{ box-shadow:inset 1px 0 0 rgba(47,122,74,.22), inset -1px 0 0 rgba(47,122,74,.22), inset 0 -1px 0 rgba(47,122,74,.22); }
table.cmp thead th.us{ border-bottom-color:var(--ember); }
table.cmp tbody tr:last-child td{ border-bottom:0; }

/* ============================================================
   WHO ORDERS ONE
   ============================================================ */
.quotes{ display:grid; gap:12px; grid-template-columns:1fr; }
@media(min-width:800px){ .quotes{ grid-template-columns:repeat(3,1fr); } }
.quote{
  padding:1.6rem; border-radius:var(--r-l);
  border:1px solid var(--line); background:var(--card);
  display:flex; flex-direction:column; gap:1rem;
}
.quote .idx{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ember); }
.quote h3{ font-family:var(--display); font-weight:700; font-size:1.25rem; letter-spacing:-.028em; line-height:1.16; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ max-width:860px; margin-inline:auto; }
.q{ border-bottom:1px solid var(--line); }
.q:first-child{ border-top:1px solid var(--line); }
.q button{
  width:100%; display:flex; align-items:center; gap:1.5rem;
  padding:1.45rem 0; background:none; border:0; cursor:pointer;
  text-align:left; color:var(--ink);
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.05rem,1.6vw,1.25rem); letter-spacing:-.025em; line-height:1.24;
}
.q .ic{
  margin-left:auto; flex:none; width:30px; height:30px; border-radius:var(--r-xs);
  border:1px solid var(--line); display:grid; place-content:center;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease-out);
  position:relative;
}
.q .ic::before,.q .ic::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--ink);
  translate:-50% -50%; transition:.35s var(--ease), background .3s var(--ease);
}
.q .ic::before{ width:11px; height:1.4px; }
.q .ic::after{ width:1.4px; height:11px; }
.q [aria-expanded="true"] .ic{ background:var(--ink); border-color:var(--ink); transform:rotate(135deg); }
.q [aria-expanded="true"] .ic::before,.q [aria-expanded="true"] .ic::after{ background:var(--paper); }
.q [aria-expanded="true"] .ic::after{ opacity:0; }
.q button:hover .ic{ border-color:var(--ink-3); }
.a{ overflow:hidden; height:0; transition:height .5s var(--ease-out); }
.a > div{ padding-bottom:1.5rem; max-width:66ch; color:var(--ink-2); font-size:.97rem; line-height:1.6; }


/* ============================================================
   STICKY ORDER BAR — the price and the button, always to hand
   ============================================================ */
.order-bar{
  position:fixed; inset:auto 0 0 0; z-index:88;
  background:rgba(251,249,245,.9);
  -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5);
  border-top:1px solid var(--line);
  padding:.7rem 0;
  translate:0 110%;
  transition:translate .45s var(--ease-out);
  box-shadow:0 -10px 40px -24px rgba(20,17,13,.4);
}
.order-bar.on{ translate:0 0; }
.order-bar .wrap{ display:flex; align-items:center; gap:1.4rem; }
.order-bar .ob-t b{ display:block; font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.028em; }
.order-bar .ob-t span{ display:block; font-size:.8rem; color:var(--ink-3); }
.order-bar .ob-p{ margin-left:auto; display:flex; align-items:baseline; gap:.35rem; }
.order-bar .ob-p b{ font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-.045em; }
.order-bar .ob-p span{ font-size:.78rem; color:var(--ink-3); }
.order-bar .btn{ min-height:48px; padding:.7rem 1.4rem; }

/* ============================================================
   GUARANTEE — the reasons not to hesitate
   ============================================================ */
.guarantee{
  margin-top:14px; display:grid; gap:1px; grid-template-columns:1fr;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-l); overflow:hidden;
}
@media(min-width:700px){ .guarantee{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){ .guarantee{ grid-template-columns:repeat(4,1fr); } }
.guarantee > div{ background:var(--card); padding:1.1rem 1.2rem 1.2rem; }
.guarantee b{ display:block; font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.026em; }
.guarantee span{ display:block; margin-top:.3rem; font-size:.85rem; color:var(--ink-3); }

/* the retest, in one line each */
.loop-row{ display:grid; gap:12px; grid-template-columns:1fr; position:relative; z-index:2; }
@media(min-width:760px){ .loop-row{ grid-template-columns:repeat(3,1fr); } }
.loop-row > div{
  padding:1.1rem 1.2rem 1.2rem; border-radius:var(--r-l);
  border:1px solid var(--line-void); background:rgba(255,252,247,.06);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
}
.loop-row .idx{ font-family:var(--mono); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ember-3); display:block; margin-bottom:.6rem; }
.loop-row p{ font-size:.92rem; line-height:1.45; color:var(--on-void); }

/* the order button inside the results card */
.showcase-cta{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:1rem 1.2rem; flex-wrap:wrap;
  margin-top:clamp(1.2rem,2.5vw,1.8rem);
}
.showcase-cta .mono{ color:rgba(255,255,255,.72); text-transform:none; letter-spacing:.1em; }

/* ============================================================
   CTA ROW — the order button, repeated down the page
   ============================================================ */
.cta-row{
  display:flex; align-items:center; gap:1rem 1.4rem; flex-wrap:wrap;
  margin-top:clamp(2rem,4vw,3rem);
}
.cta-row .mono{ color:var(--ink-3); text-transform:none; letter-spacing:.1em; }
.cta-row .mono .link{ color:var(--ember); }
.on-void .cta-row .mono,.dark .cta-row .mono{ color:var(--on-void-2); }
.cta-row.center{ justify-content:center; margin-top:clamp(2.4rem,5vw,3.4rem); }

/* ============================================================
   CTA
   ============================================================ */
.cta{ position:relative; }
.cta-stage{ position:relative; height:150vh; }
.cta-pin{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:stretch;
  padding:calc(var(--pad) * (1 - var(--e, 0)));
  will-change:padding;
}
.cta-inner{
  position:relative; flex:1; min-height:0;
  border-radius:calc(var(--r-xl) * (1 - var(--e, 0))); overflow:hidden;
  padding:clamp(3.2rem,7vw,6rem) clamp(1.5rem,5vw,4.5rem) calc(clamp(3.2rem,7vw,6rem) + 2rem);
  isolation:isolate;
  background:var(--void); color:var(--on-void);
  display:flex; flex-direction:column; justify-content:center;
  will-change:border-radius;
}
/* the copy arrives as the frame opens out */
.cta-inner .hud,.cta-inner h2,.cta-inner .lede,.cta-actions{
  opacity:clamp(0, (var(--p, 0) - .08) * 5, 1);
  translate:0 calc((1 - clamp(0, (var(--p, 0) - .08) * 5, 1)) * 14px);
}
.cta-inner img.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:68% 42%; z-index:-2;
  transform:scale(calc(1.14 - var(--e, 0) * .14));
}
.cta-inner::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, rgba(12,11,10,.92) 0%, rgba(12,11,10,.8) 30%, rgba(12,11,10,.46) 54%, rgba(12,11,10,.06) 82%),
    linear-gradient(180deg, rgba(12,11,10,.25), rgba(12,11,10,0) 40%);
}
.cta-inner .grain-layer{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:220px 220px; mix-blend-mode:screen;
}
.cta-inner .hud{ color:rgba(255,255,255,.82); margin-bottom:1.2rem; }
.cta-inner .hud::before{ background:var(--ember-3); }
.cta-inner h2{ max-width:15ch; color:#fff; }
.cta-inner .fade{ color:rgba(255,255,255,.55); }
.cta-inner .lede{ margin:1.3rem 0 0; color:rgba(255,255,255,.76); max-width:42ch; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.cta-inner .btn{ --bg:#fff; --fg:var(--void); --bd:#fff; }
.cta-inner .btn:hover{ background:#fff; border-color:#fff; color:var(--ember); box-shadow:0 14px 30px -14px rgba(0,0,0,.55); }
.cta-inner .btn.glass-dark{ --bg:rgba(18,16,14,.46); --fg:#fff; --bd:rgba(255,255,255,.42); }

/* ============================================================
   FOOTER
   ============================================================ */
footer.ft{ background:var(--void); color:var(--on-void); padding-top:clamp(3.5rem,7vw,5.5rem); }
.ft-top{ display:grid; gap:2.8rem; grid-template-columns:1fr; padding-bottom:3.2rem; }
@media(min-width:820px){ .ft-top{ grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; } }
.ft-brand .logo .wm{ color:var(--on-void); }
.ft-brand p{ margin-top:1.1rem; color:var(--on-void-2); font-size:.92rem; max-width:34ch; }
.ft-col h5{ font-family:var(--mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-void-2); font-weight:500; margin:0 0 1rem; }
.ft-col a{ display:block; padding:.32rem 0; font-size:.92rem; color:var(--on-void); opacity:.78; transition:opacity .25s var(--ease); }
.ft-col a:hover{ opacity:1; }
.ft-bot{ border-top:1px solid var(--line-void); padding:1.5rem 0 2.2rem; display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; }
.ft-bot .tiny{ color:var(--on-void-2); }
.ft-bot .tiny:last-child{ margin-left:auto; }
.ft-legal{ padding-bottom:2.4rem; }
.ft-legal p{ font-size:.76rem; line-height:1.6; color:#847B70; max-width:88ch; }
.ft-legal strong{ color:var(--on-void-2); font-weight:550; }

/* ============================================================
   ORDER
   ------------------------------------------------------------
   One continuous ground from the headline to the summary, so the
   page reads as a single sheet rather than a banner bolted to a form.
   ============================================================ */
.order-page{ position:relative; overflow:hidden; }
.order-page .aura{ z-index:0; }
.order-page .aura i{ opacity:.38; }
.order-page > .wrap{ position:relative; z-index:1; }
.order-head{ padding-top:8.5rem; padding-bottom:clamp(2.2rem,4.5vw,3.4rem); max-width:min(1320px,100%); }
.order-head .mono{ display:block; margin-bottom:1rem; }
.order-head .lede{ margin-top:1.2rem; max-width:60ch; }
.order-trust{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }

.order-grid{ display:grid; gap:clamp(1.6rem,3vw,2.6rem); grid-template-columns:1fr; align-items:start; padding-bottom:var(--sec); }
@media(min-width:1000px){ .order-grid{ grid-template-columns:minmax(0,1fr) minmax(340px,400px); gap:clamp(2rem,4vw,3.5rem); } }

.order-main{ display:flex; flex-direction:column; gap:clamp(2rem,4vw,3rem); min-width:0; }
.ostep-head{ display:flex; align-items:baseline; gap:.9rem; margin-bottom:1.1rem; }
.ostep-head .on{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:var(--ember);
  border:1px solid var(--line); border-radius:var(--r-xs); padding:.3rem .5rem; background:var(--card);
}
.ostep-head h2{ letter-spacing:-.028em; }

.osplit{ display:flex; align-items:center; gap:1rem; margin:1.6rem 0 1rem; }
.osplit::before,.osplit::after{ content:""; height:1px; background:var(--line); flex:1; }
.osplit span{ font-family:var(--mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.opt.sub{ background:linear-gradient(100deg, var(--ember-soft), rgba(246,229,218,.35)); border-color:rgba(47,122,74,.35); }

.sum-kit{ margin:0 0 1.3rem; border-radius:var(--r-m); overflow:hidden; position:relative; aspect-ratio:16/10; background:var(--bone-2); }
.sum-kit img{ width:100%; height:100%; object-fit:cover; }
.sum-kit figcaption{
  position:absolute; left:.7rem; bottom:.7rem; padding:.38rem .6rem; border-radius:var(--r-xs);
  background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
}

.opt-list{ display:flex; flex-direction:column; gap:10px; }
.opt{
  position:relative; display:block; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-l);
  background:var(--card); padding:1.25rem 1.35rem;
  transition:border-color .3s var(--ease), box-shadow .4s var(--ease-out), background .3s var(--ease);
}
.opt:hover{ border-color:var(--ink-4); }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt .head{ display:flex; align-items:flex-start; gap:1rem; }
.opt .tick{
  width:20px; height:20px; border-radius:50%; border:1.5px solid var(--ink-4);
  flex:none; margin-top:.15rem; display:grid; place-content:center;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.opt .tick::after{ content:""; width:8px; height:8px; border-radius:50%; background:#fff; transform:scale(0); transition:transform .3s var(--ease-out); }
.opt input:checked ~ .head .tick{ background:var(--ember); border-color:var(--ember); }
.opt input:checked ~ .head .tick::after{ transform:scale(1); }
.opt:has(input:checked){ border-color:var(--ember); box-shadow:0 0 0 1px var(--ember), var(--shadow-m); }
.opt input:focus-visible ~ .head .tick{ outline:2px solid var(--ember); outline-offset:3px; }
.opt .t{ flex:1; }
.opt .t b{ font-family:var(--display); font-weight:700; font-size:1.2rem; letter-spacing:-.03em; display:block; }
.opt .t .mono{ display:block; margin-top:.28rem; }
.opt .t p{ font-size:.9rem; color:var(--ink-2); margin:.6rem 0 0; line-height:1.45; }
.opt .price{ font-family:var(--display); font-weight:700; font-size:1.4rem; letter-spacing:-.04em; margin-left:auto; white-space:nowrap; }
.opt .price small{ display:block; font-family:var(--sans); font-size:.7rem; font-weight:400; color:var(--ink-3); letter-spacing:0; text-align:right; margin-top:.15rem; }
.opt .flag{
  display:inline-block; margin-left:.55rem; vertical-align:middle;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.11em; text-transform:uppercase;
  padding:.26rem .45rem; border-radius:var(--r-xs); background:var(--ember); color:#fff;
}

.addon{ margin-top:1.6rem; display:flex; flex-direction:column; gap:10px; }
.addon > .mono{ margin-bottom:-.2rem; }
.addon .opt{ padding:1.05rem 1.15rem; }

.summary{ border-radius:var(--r-l); border:1px solid var(--line); background:var(--card); padding:1.5rem; position:relative; overflow:hidden; }
@media(min-width:960px){ .summary{ position:sticky; top:6.5rem; } }
.summary h3{ font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:-.03em; margin-bottom:1.2rem; }
.sum-row{ display:flex; align-items:baseline; gap:1rem; padding:.6rem 0; font-size:.94rem; color:var(--ink-2); }
.sum-row span:last-child{ margin-left:auto; font-variant-numeric:tabular-nums; color:var(--ink); }
.sum-row.total{ border-top:1px solid var(--line); margin-top:.6rem; padding-top:1rem; font-size:1.02rem; color:var(--ink); font-weight:600; }
.sum-row.total span:last-child{ font-family:var(--display); font-weight:700; font-size:1.9rem; letter-spacing:-.045em; }
.summary .btn{ margin-top:1.3rem; }
.sum-trust{ list-style:none; margin:1.3rem 0 0; padding:1.3rem 0 0; border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:.55rem; }
.sum-trust li{ position:relative; padding-left:1.4rem; font-size:.83rem; color:var(--ink-2); }
.sum-trust li::before{ content:"✓"; position:absolute; left:0; color:var(--good); font-size:.8rem; }

.pay-note{ margin-top:1rem; font-size:.76rem; color:var(--ink-3); line-height:1.5; }
.pay-note.err{ color:var(--high); }

/* ============================================================
   LEGAL / PROSE
   ============================================================ */
.prose-hero{ padding-top:9rem; padding-bottom:clamp(2rem,4vw,3rem); }
.prose{ max-width:74ch; padding-bottom:var(--sec); }
.prose h2{ font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,2.4vw,1.85rem); margin:3rem 0 .9rem; letter-spacing:-.03em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.04rem; margin:1.9rem 0 .5rem; }
.prose p,.prose li{ color:var(--ink-2); font-size:.97rem; line-height:1.62; }
.prose ul{ padding-left:1.15rem; margin:0 0 1.05em; }
.prose li{ margin-bottom:.45rem; }
.prose .rule{ margin:2.6rem 0; }
.prose .todo{
  border-left:3px solid var(--watch); background:var(--watch-soft);
  padding:.9rem 1.1rem; border-radius:0 var(--r-s) var(--r-s) 0; margin:1.2rem 0;
}
.prose .todo p{ margin:0; font-size:.88rem; color:#6E4C0C; }
.prose .todo b{ color:#4E360A; }

/* ---------- nav: account ---------- */
.nav-acct{ display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink); transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.nav-acct svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.nav-acct:hover{ background:var(--ember-soft); border-color:var(--ember); color:var(--ember); }
.nav.inv .nav-acct{ background:rgba(255,255,255,.1); border-color:var(--line-void); color:var(--on-void); }
.nav.inv .nav-acct:hover{ background:rgba(255,255,255,.2); color:#fff; }

/* The layout defence sets body copy to `pretty`; this site's copy runs two or
   three lines and reads better balanced, so keep the site's own rule. */
:root p,:root li,:root dd{ text-wrap:balance; }
:root .faq .a div,:root .prose p,:root .prose li,:root .calc-note{ text-wrap:pretty; }
:root .btn{ flex-direction:row; flex-wrap:nowrap; }
.nav-links a{ white-space:nowrap; }
@media (max-width:1240px){ .nav .wrap{ gap:1rem; } .nav-links a{ padding-inline:.6rem; } }