/* ============================================================
   SERO — base
   A confident grotesk, clinical monospace labels, and a
   data language of range bars and status chips.
   ============================================================ */

:root{
  /* --- surface --- */
  --bone:      #F1EDE6;
  --bone-2:    #E8E3DA;
  --paper:     #FBF9F5;
  --card:      #FFFFFF;
  --void:      #0C0B0A;
  --void-2:    #16140F;
  --void-3:    #201D18;

  /* --- ink --- */
  --ink:       #14110D;
  --ink-2:     #5D564E;
  --ink-3:     #8B8278;
  --ink-4:     #B4ABA0;
  --on-void:   #F3EFE8;
  --on-void-2: #A29A8F;
  --on-void-3: #6E665D;

  /* --- accent --- */
  --ember:     #2F7A4A;
  --ember-2:   #3E9A5C;
  --ember-3:   #D9E86A;
  --ember-soft:#EEF4D8;

  /* --- signal --- */
  --good:      #2C6B4E;
  --good-2:    #7FC39E;
  --good-soft: #E2EDE6;
  --watch:     #8A5D12;
  --watch-2:   #E8B65A;
  --watch-soft:#F6E9D4;
  --high:      #A33A28;
  --high-2:    #F08A7A;
  --high-soft: #F7E2DD;

  /* --- structure --- */
  --line:      rgba(20,17,13,.11);
  --line-2:    rgba(20,17,13,.06);
  --line-void: rgba(243,239,232,.15);
  --line-void-2: rgba(243,239,232,.08);

  --glass:     rgba(255,253,250,.62);
  --glass-void:rgba(255,252,247,.07);

  --shadow-s:  0 1px 2px rgba(20,17,13,.04), 0 4px 12px -6px rgba(20,17,13,.09);
  --shadow-m:  0 2px 4px rgba(20,17,13,.04), 0 16px 40px -22px rgba(20,17,13,.20);
  --shadow-l:  0 4px 8px rgba(20,17,13,.05), 0 40px 90px -40px rgba(20,17,13,.32);

  /* --- type --- */
  --display: "Cabinet Grotesk","Switzer","Helvetica Neue",Arial,sans-serif;
  --sans:    "Switzer","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:    "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* --- rhythm --- */
  --r-xs: 6px;
  --r-s:  8px;
  --r-m:  12px;
  --r-l:  18px;
  --r-xl: 24px;

  --pad:   clamp(1.25rem, 5vw, 4.5rem);
  --sec:   clamp(4.5rem, 10vw, 9rem);
  --max:   1320px;
  --measure: 60ch;

  --ease:  cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Anchor clicks land instantly. On a page this tall a smooth scroll turns a
   menu click into a long ride past everything in between. */
html{ -webkit-text-size-adjust:100%; }

/* the fixed nav sits over the top of whatever you jump to */
section[id]{ scroll-margin-top:76px; }
.hero-stage,.bio-stage,#results{ scroll-margin-top:0; }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

body.is-locked{ overflow:hidden; }
img,svg,video,canvas{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
img{ height:auto; }
::selection{ background:var(--ember); color:#fff; }

/* ============================================================
   TYPE
   ------------------------------------------------------------
   Nothing anywhere is allowed to end on an orphan: every run of
   copy balances its lines, and long-form uses `pretty` so the
   last line never strands a single word.
   ============================================================ */

h1,h2,h3,h4,h5,
p,li,dt,dd,blockquote,figcaption,summary,label,
.lede,.sub,.small,.tiny,.cap,.def,.mono{ text-wrap:balance; }
.faq .a div,.prose p,.prose li,.ft-legal p,.calc-note{ text-wrap:pretty; }

h1,h2,h3,h4{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.02;
}

.d1{ font-size:clamp(2.6rem, 5.4vw, 4.6rem); line-height:1.0; letter-spacing:-.035em; }
.d2{ font-size:clamp(2rem, 4.2vw, 3.5rem); line-height:1.03; letter-spacing:-.032em; }
.d3{ font-size:clamp(1.5rem, 2.7vw, 2.25rem); line-height:1.08; letter-spacing:-.028em; }
.d4{ font-size:clamp(1.18rem, 1.8vw, 1.45rem); letter-spacing:-.022em; line-height:1.2; }

/* the two-tone headline: a solid line, then a quieter one */
.fade{ color:#8C8275; }
.on-void .fade,.dark .fade{ color:#8B8378; }

p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.lede{
  font-size:clamp(1.04rem, 1.6vw, 1.22rem);
  line-height:1.5;
  color:var(--ink-2);
  letter-spacing:-.014em;
  max-width:var(--measure);
}

.sub{ color:var(--ink-2); max-width:var(--measure); }
.small{ font-size:.92rem; line-height:1.5; color:var(--ink-2); }
.tiny{ font-size:.82rem; line-height:1.45; color:var(--ink-3); }
strong{ font-weight:600; color:var(--ink); }

/* monospace micro-label — the clinical signature */
.mono{
  font-family:var(--mono);
  font-size:.688rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:450;
  color:var(--ink-3);
}
.mono.em{ color:var(--ember); }
.on-void .mono,.dark .mono{ color:var(--on-void-2); }
.on-void .mono.em,.dark .mono.em{ color:var(--ember-3); }

/* a live label: a dot, then the label */
.hud{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}
.hud::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--ember); flex:none; }
.on-void .hud,.dark .hud,.on-dark .hud{ color:var(--on-void-2); }
.on-void .hud::before,.dark .hud::before{ background:var(--ember-3); }

.num{ font-variant-numeric:tabular-nums; letter-spacing:-.03em; }

a{ color:inherit; text-decoration:none; }
a.link{
  color:var(--ember);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb, var(--ember) 35%, transparent);
  transition:text-decoration-color .25s var(--ease);
}
a.link:hover{ text-decoration-color:var(--ember); }

:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:4px; }

/* ============================================================
   LAYOUT
   ============================================================ */

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.wrap-n{ max-width:1060px; }
section{ position:relative; }
.sec{ padding-block:var(--sec); }
.sec-t{ padding-top:var(--sec); }
.sec-b{ padding-bottom:var(--sec); }

.on-void,.dark{ background:var(--void); color:var(--on-void); }
.on-void .sub,.on-void .lede,.on-void .small,
.dark .sub,.dark .lede,.dark .small{ color:var(--on-void-2); }
.on-void strong,.dark strong{ color:var(--on-void); }

.shead{ max-width:min(780px,100%); margin-bottom:clamp(2.4rem,5vw,3.6rem); }
.shead .mono{ display:block; margin-bottom:1.1rem; }
.shead .sub{ margin-top:1.1rem; }
.shead.wide{ max-width:min(1000px,100%); }
.shead.center{ margin-inline:auto; text-align:center; }
.shead.center .sub{ margin-inline:auto; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.on-void .rule,.dark .rule{ background:var(--line-void); }

/* ============================================================
   GLASS + GRAIN
   ============================================================ */

.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--shadow-m), inset 0 1px 0 rgba(255,255,255,.6);
}
.glass-void{
  background:var(--glass-void);
  -webkit-backdrop-filter:blur(26px) saturate(1.3);
  backdrop-filter:blur(26px) saturate(1.3);
  border:1px solid var(--line-void);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.grain{ position:relative; }
.grain::after{
  content:""; 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;
}

/* ============================================================
   LUMINOUS FIELD
   ============================================================ */

.aura{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aura i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(70px); opacity:.5; will-change:transform;
}
.aura .a1{ width:52vw; height:52vw; left:-14vw; top:-16vw;
  background:radial-gradient(circle at 34% 34%, var(--ember-3), transparent 68%); }
.aura .a2{ width:44vw; height:44vw; right:-12vw; top:14vw;
  background:radial-gradient(circle at 62% 40%, #E9C79A, transparent 66%); opacity:.45; }
.aura .a3{ width:38vw; height:38vw; left:26vw; bottom:-14vw;
  background:radial-gradient(circle at 50% 50%, #C9D6C4, transparent 68%); opacity:.4; }
.on-void .aura i,.dark .aura i{ opacity:.24; filter:blur(90px); }

/* ============================================================
   BUTTONS — squared, not pills
   ============================================================ */

.btn{
  --bg:var(--ink); --fg:var(--paper); --bd:var(--ink);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.65em;
  min-height:56px;
  padding:1rem 1.9rem;
  border-radius:var(--r-s);
  border:1px solid var(--bd);
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:.97rem;
  font-weight:550;
  letter-spacing:-.008em;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease-out), box-shadow .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{
  background:var(--ember); border-color:var(--ember); color:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 24px -12px rgba(47,122,74,.55);
}
.btn:active{ transform:translateY(0) scale(.99); }
.btn .arw{ transition:transform .35s var(--ease-out); }
.btn:hover .arw{ transform:translateX(4px); }

.btn.ember{ --bg:var(--ember); --bd:var(--ember); --fg:#fff; }
.btn.ember:hover{ background:var(--ember-2); border-color:var(--ember-2); color:#fff; }

.btn.ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line); }
.btn.ghost:hover{
  background:var(--ember-soft); border-color:var(--ember); color:var(--ember);
  box-shadow:0 10px 24px -14px rgba(47,122,74,.45);
}

.btn.light{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
.btn.light:hover{ background:#fff; border-color:#fff; color:var(--ember); box-shadow:0 12px 28px -14px rgba(0,0,0,.5); }

.btn.glass-dark{
  --bg:rgba(18,16,14,.42); --fg:#fff; --bd:rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
}
.btn.glass-dark:hover{ background:rgba(255,252,247,.22); border-color:#fff; color:#fff; box-shadow:0 12px 28px -16px rgba(0,0,0,.6); }

.on-void .btn,.dark .btn{ --bg:var(--on-void); --fg:var(--void); --bd:var(--on-void); }
.on-void .btn:hover,.dark .btn:hover{ background:#fff; border-color:#fff; color:var(--ember); box-shadow:0 12px 28px -14px rgba(0,0,0,.55); }
.on-void .btn.ghost,.dark .btn.ghost{ --bg:transparent; --fg:var(--on-void); --bd:var(--line-void); }
.on-void .btn.ghost:hover,.dark .btn.ghost:hover{
  background:rgba(240,168,121,.14); border-color:var(--ember-3); color:var(--ember-3); box-shadow:none;
}

.btn.sm{ min-height:44px; padding:.6rem 1.15rem; font-size:.88rem; border-radius:var(--r-xs); }
.btn.lg{ min-height:60px; padding:1.1rem 2.1rem; font-size:1rem; }
.btn.block{ display:flex; width:100%; }
.arw{ display:inline-block; }

/* ============================================================
   PILLS / CHIPS
   ============================================================ */

.pill{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.46em .8em;
  border-radius:var(--r-xs);
  border:1px solid var(--line);
  background:var(--paper);
  font-size:.78rem; font-weight:500; letter-spacing:-.005em;
  color:var(--ink-2);
  white-space:nowrap;
}
.pill .dot{ width:5px; height:5px; border-radius:50%; background:var(--ember); flex:none; }
.on-void .pill,.dark .pill{ background:var(--glass-void); border-color:var(--line-void); color:var(--on-void-2); }

/* status chip — the Manual readout */
.chip{
  display:inline-block;
  padding:.26em .5em;
  border-radius:var(--r-xs);
  font-family:var(--sans);
  font-size:.7rem; font-weight:600; letter-spacing:-.005em;
  white-space:nowrap;
  background:var(--good-soft); color:var(--good);
}
.chip.low{ background:var(--watch-soft); color:var(--watch); }
.chip.high{ background:var(--high-soft); color:var(--high); }
.on-dark .chip{ background:rgba(127,195,158,.18); color:#A9DCC1; }
.on-dark .chip.low{ background:rgba(232,182,90,.18); color:var(--watch-2); }
.on-dark .chip.high{ background:rgba(240,138,122,.18); color:var(--high-2); }

/* ============================================================
   RANGE BAR — where a value sits inside its range
   ------------------------------------------------------------
   --a  where the healthy band starts (0–100)
   --b  how wide the healthy band is
   --x  where the value sits
   ============================================================ */
.rng{
  --track:rgba(20,17,13,.09);
  --band:var(--good-2);
  --pt:var(--ink);
  --ring:var(--card);
  display:block; position:relative; height:6px; width:100%;
  border-radius:99px; background:var(--track);
}
.rng i{ display:block; position:absolute; }
.rng .band{
  top:0; bottom:0; left:calc(var(--a,30) * 1%); width:calc(var(--b,40) * 1%);
  border-radius:99px; background:var(--band); opacity:.55;
  transform:scaleX(var(--gp,1)); transform-origin:left center;
  transition:transform .8s var(--ease-out);
}
.rng .pt{
  top:50%; left:calc(var(--x,50) * 1%);
  width:11px; height:11px; border-radius:50%; background:var(--pt);
  translate:-50% -50%;
  box-shadow:0 0 0 2.5px var(--ring), 0 1px 3px rgba(20,17,13,.25);
  transform:scale(var(--gp,1));
  transition:transform .6s var(--ease-out);
}
.rng.low{ --pt:var(--watch); --band:var(--watch-2); }
.rng.high{ --pt:var(--high); --band:var(--high-2); }
.on-dark .rng{ --track:rgba(255,255,255,.18); --band:var(--good-2); --pt:#fff; --ring:rgba(26,16,11,.85); }
.on-dark .rng.low{ --pt:var(--watch-2); }
.on-dark .rng.high{ --pt:var(--high-2); }

/* the scale under a bar */
.scale{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  color:var(--ink-4); margin-top:.5rem;
}
.on-dark .scale{ color:rgba(255,255,255,.5); }

/* ============================================================
   REVEAL
   ============================================================ */

[data-rv]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-rv].in{ opacity:1; transform:none; }
[data-rv="fade"]{ transform:none; }

.rline{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.rline > span{
  display:block; text-wrap:balance; transform:translateY(105%);
  transition:transform 1s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.in .rline > span, .rline.in > span{ transform:none; }

/* word-by-word reveal, driven by --p on the block */
[data-words]{ --k:clamp(0, (var(--p, 0) - .18) / .5, 1); }
[data-words] .w{
  display:inline-block;
  opacity:calc(.18 + .82 * clamp(0, (var(--k) * var(--n, 1) - var(--i, 0)) , 1));
  transition:opacity .12s linear;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .rline > span{ transform:none !important; }
  [data-words] .w{ opacity:1 !important; }
  .rng .band,.rng .pt{ transform:none !important; }
}

/* ---------- Sero Health wordmark: lowercase sero, lime dot over the e ---------- */
.wm2{ display:inline-flex; align-items:baseline; gap:.32em; font-family:var(--display); line-height:1; color:#0F3B2E; white-space:nowrap; }
.w-s{ font-weight:700; font-size:1.55rem; letter-spacing:-.05em; }
.w-e{ position:relative; display:inline-block; }
.w-e i{ position:absolute; left:50%; top:-.12em; width:.24em; height:.24em; margin-left:-.12em; border-radius:50%; background:#B9D94A; }
.w-h{ font-weight:500; font-size:1.05rem; letter-spacing:-.02em; color:#2F7A4A; }
.ft .wm2,.on-void .wm2{ color:#fff; }
.ft .w-h,.on-void .w-h{ color:#E4F46B; }
.ft .w-e i{ background:#E4F46B; }