/* Body+ v4 — main: layout, components, states, responsive, dark surface-fixes.
   Consolidated in load order bodyplus -> v4 -> v5 -> v6 -> dark, source order preserved
   (phase 2). Tokens/colours live in tokens.css; zero literal hex in this file. */

/* ============================ from bodyplus.css ============================ */
/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}

section{padding-block:clamp(56px,7vw,104px);}
.band{background:var(--paper-alt);border-block:1px solid var(--line);}
.band-ink{background:var(--ink);color:var(--paper);border-block:none;}
.band-ink .lead,.band-ink .eyebrow{color:rgba(247,247,243,.62);}

.head{max-width:60ch;margin-bottom:clamp(32px,4vw,52px);}
.head .eyebrow{display:block;margin-bottom:14px;}
.head h2{margin-bottom:14px;}

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */

.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(247,247,243,.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:16px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.wordmark{font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:.01em;}
.wordmark span{color:var(--flag);}
.navlinks{display:flex;gap:30px;font-size:14px;color:var(--muted);}
.navlinks a:hover{color:var(--ink);}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.btn{
  display:inline-block;font-family:var(--f-data);font-size:13px;letter-spacing:.03em;
  padding:14px 24px;border:1px solid var(--ink);cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:transparent;color:var(--ink);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-sm{padding:10px 16px;font-size:12px;}
.band-ink .btn-primary{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.band-ink .btn-primary:hover{background:transparent;color:var(--paper);}
.band-ink .btn-ghost{color:var(--paper);border-color:rgba(247,247,243,.34);}
.band-ink .btn-ghost:hover{border-color:var(--paper);}

.btn:disabled{opacity:.32;cursor:not-allowed;}

/* --------------------------------------------------------------------------
   SIGNATURE: the lab panel + reference-range strip
   Each row shows the clinical reference band and a tick at the measured value.
   The tick slides from the band edge to its true position when revealed.
   -------------------------------------------------------------------------- */

.panel{background:var(--white);border:1px solid var(--line);}

.panel-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--line);
  font-family:var(--f-data);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}

.marker{
  padding:16px 18px;border-bottom:1px solid var(--line-soft);
  display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline;
}
.marker:last-of-type{border-bottom:none;}
.marker-name{font-size:14px;}
.marker-val{font-family:var(--f-data);font-size:14px;white-space:nowrap;}
.marker-val em{font-style:normal;color:var(--muted);font-size:11.5px;}

/* the range strip */
.strip{grid-column:1 / -1;margin-top:11px;}
.strip-track{
  position:relative;height:3px;background:var(--line);
}
.strip-band{
  position:absolute;top:0;height:3px;background:var(--optimal);opacity:.34;
}
.strip-tick{
  position:absolute;top:-4px;width:2px;height:11px;background:var(--ink);
  left:var(--at,50%);
  transform:translateX(-1px);
  transition:left 1.1s cubic-bezier(.22,1,.36,1);
}
.marker.is-low .strip-tick,
.marker.is-high .strip-tick{background:var(--flag);width:3px;}

.strip-scale{
  display:flex;justify-content:space-between;
  font-family:var(--f-data);font-size:10px;color:var(--muted);margin-top:7px;
}
.strip-scale .ref{color:var(--optimal);}

/* before reveal, every tick sits at the left edge of the track */
.panel[data-reveal] .strip-tick{left:0;}
.panel[data-reveal].revealed .strip-tick{left:var(--at);}

.tag{
  font-family:var(--f-data);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;white-space:nowrap;
}
.tag-low,.tag-high{background:rgba(193,67,46,.1);color:var(--flag);}
.tag-ok{background:rgba(63,107,79,.1);color:var(--optimal);}

.panel-foot{
  padding:14px 18px;border-top:1px dashed var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:12.5px;color:var(--muted);
}
.panel-foot b{color:var(--ink);font-weight:500;}

/* --------------------------------------------------------------------------
   FORMULA READOUT — what the flagged markers resolve into
   -------------------------------------------------------------------------- */

.formula{border:1px solid var(--line);background:var(--white);}
.formula-row{
  display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--line-soft);
}
.formula-row:last-child{border-bottom:none;}
.formula-row .dose{font-family:var(--f-data);font-size:13.5px;}
.formula-row .why{grid-column:1 / -1;font-size:12.5px;color:var(--muted);line-height:1.5;}

/* --------------------------------------------------------------------------
   CARD GRIDS
   -------------------------------------------------------------------------- */

.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.card{
  background:var(--white);padding:26px 24px;
  display:flex;flex-direction:column;gap:10px;
  transition:background .16s ease;
}
a.card:hover{background:var(--paper-alt);}
.card-role{font-family:var(--f-display);font-size:20px;font-weight:500;}
.card-driver{font-size:13.5px;color:var(--muted);line-height:1.55;flex-grow:1;}
.card-flags{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  font-family:var(--f-data);font-size:10.5px;padding:3px 7px;
  border:1px solid var(--line);color:var(--muted);
}
.card-go{font-family:var(--f-data);font-size:12.5px;color:var(--flag);}

/* --------------------------------------------------------------------------
   COMPARISON TABLE
   -------------------------------------------------------------------------- */

.compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.compare-col{background:var(--white);padding:0;}
.compare-col.ours{background:var(--paper-alt);}
.compare-h{
  padding:18px 22px;border-bottom:1px solid var(--line);
  font-family:var(--f-data);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.compare-col.ours .compare-h{color:var(--ink);}
.compare-item{
  padding:16px 22px;border-bottom:1px solid var(--line-soft);
  font-size:14px;line-height:1.5;display:flex;gap:11px;
}
.compare-item:last-child{border-bottom:none;}
.compare-item .mk{font-family:var(--f-data);font-size:12px;color:var(--muted);flex-shrink:0;}
.compare-col.ours .compare-item .mk{color:var(--flag);}

/* --------------------------------------------------------------------------
   CHAT MOCKUP
   -------------------------------------------------------------------------- */

.chat{background:var(--white);border:1px solid var(--line);}
.chat-body{padding:22px;display:flex;flex-direction:column;gap:13px;}
.bubble{max-width:82%;padding:12px 15px;font-size:13.5px;line-height:1.55;}
.bubble.user{align-self:flex-end;background:var(--ink);color:var(--paper);}
.bubble.ai{align-self:flex-start;background:var(--paper-alt);border:1px solid var(--line);}
.bubble.ai .who{
  display:block;font-family:var(--f-data);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}

/* --------------------------------------------------------------------------
   EVIDENCE STATS — honest framing, every number carries its own caveat
   -------------------------------------------------------------------------- */

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.stat{background:var(--white);padding:24px 22px;}
.stat b{
  display:block;font-family:var(--f-display);font-size:32px;font-weight:500;
  line-height:1;margin-bottom:8px;
}
.stat span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5;}
.stat .caveat{
  display:block;font-family:var(--f-data);font-size:10.5px;color:var(--muted);
  margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);
}

/* --------------------------------------------------------------------------
   PLACEHOLDER BLOCKS — sections that need real assets before launch
   -------------------------------------------------------------------------- */

.todo{
  border:1px dashed var(--line);background:transparent;padding:22px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--f-data);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);min-height:64px;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

footer{border-top:1px solid var(--line);padding-block:44px;}
.foot-in{
  display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start;
}
.disclaimer{font-size:12px;color:var(--muted);max-width:56ch;line-height:1.65;}
.foot-links{display:flex;gap:24px;font-size:13px;color:var(--muted);}
.foot-links a:hover{color:var(--ink);}

/* --------------------------------------------------------------------------
   REVEAL
   -------------------------------------------------------------------------- */

[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);}
[data-reveal].revealed{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  [data-reveal]{opacity:1;transform:none;}
  .panel[data-reveal] .strip-tick{left:var(--at);}
}

/* --------------------------------------------------------------------------
   RESPONSIVE — 1440 / 768 / 375
   Data-dense blocks stack rather than compress.
   -------------------------------------------------------------------------- */

@media (max-width:920px){
  .navlinks{display:none;}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .compare{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;}
  .bubble{max-width:92%;}
  .foot-in{flex-direction:column;}
}

/* ============================== from bodyplus-v4.css ============================== */
/* ==========================================================================
   BIO LAYER — where the electricity actually lands.
   Deliberately concentrated: brand marks, ink surfaces, motion, focus. The lab
   panel itself stays untouched, because its colours mean something.
   ========================================================================== */

/* The + is the logo. Make it glow. */
.wordmark span{color:var(--bio);text-shadow:0 0 12px rgba(10,127,90,.28);}

/* Eyebrows were red. Red is now data-only. */
.eyebrow-flag{color:var(--bio);}
.band-ink .eyebrow,
.band-ink .eyebrow-flag{color:var(--bio-lift);}

/* Card arrows were red too. */
.card-go{color:var(--bio);}
a.card:hover .ibox{background:var(--bio-wash);border-color:var(--bio);color:var(--bio);}

/* Focus ring: was flag. Now bio — and far more visible. */
:focus-visible{outline:2px solid var(--bio);outline-offset:3px;}

/* Primary buttons pick up a charge on hover. */
.btn-primary:hover{box-shadow:var(--glow);border-color:var(--bio);}
.band-ink .btn-primary{background:var(--bio-lift);color:var(--ink-on-bio);border-color:var(--bio-lift);}
.band-ink .btn-primary:hover{background:transparent;color:var(--bio-lift);border-color:var(--bio-lift);}

/* Ink surfaces are the stage for fluo — on dark, it sings and it's legible. */
.band-ink{
  background:
    radial-gradient(1100px 460px at 82% -12%, rgba(53,201,142,.13), transparent 62%),
    radial-gradient(760px 420px at 8% 108%, rgba(53,201,142,.06), transparent 60%),
    var(--ink);
}
.band-ink .ibox{
  background:rgba(53,201,142,.10);
  border-color:rgba(53,201,142,.34);
  color:var(--bio-lift);
}
.model4-k{color:var(--bio-lift);}
.model4{border-top:2px solid transparent;transition:background .2s ease,border-color .2s ease;}
.model4:hover{background:var(--ink-hover);border-top-color:var(--bio-lift);}
.model4:hover .ibox{background:var(--bio-lift);color:var(--ink-on-bio);border-color:var(--bio-lift);}

/* A living pulse. One on the page, on the thing that is actually alive. */
.pulse{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bio);
}
.pulse i{
  width:7px;height:7px;border-radius:50%;background:var(--bio);
  box-shadow:0 0 0 0 rgba(53,201,142,.7);
  animation:pulse 2s cubic-bezier(.66,0,0,1) infinite;
}
@keyframes pulse{
  to{box-shadow:0 0 0 12px rgba(53,201,142,0);}
}

/* The headline's turn: a fluo highlighter swipe, drawn on. Reads as energy
   without asking a fluo colour to carry small text on a light background. */
.hero4 h1 .turn{color:var(--ink);font-style:italic;}
.hero4 h1 .turn::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:.06em;
  height:.34em;background:var(--bio);opacity:.5;z-index:-1;
  border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  animation:swipe .85s cubic-bezier(.22,1,.36,1) .55s forwards;
}
.hero4 h1 .turn{position:relative;z-index:0;}
@keyframes swipe{to{transform:scaleX(1);}}

/* Chips wake up on hover. */
a.card:hover .chip{border-color:var(--bio);color:var(--bio);}

/* Step 4 of the loop is styled in the LOOP block further down this file, NOT
   here. It used to be styled in both places: this block turned the text white for
   an ink card, while the later block quietly kept the card pale green — white text
   on a pale green card, unreadable. One element, one home. */

/* --------------------------------------------------------------------------
   ICON SYSTEM
   One sprite, <use>-referenced. Stroke 1.5, round caps, currentColor — the
   same gestural weight as the line illustrations, so icons and drawings read
   as one hand.
   -------------------------------------------------------------------------- */

.i{
  width:20px;height:20px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:middle;
}
.i-lg{width:26px;height:26px;}
.i-xl{width:34px;height:34px;stroke-width:1.35;}

/* An icon in a bezel — used at the head of each step / model / vertical. */
.ibox{
  width:46px;height:46px;border-radius:var(--r);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--paper-alt);border:1px solid var(--line);
  color:var(--ink);flex:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.ibox-warm{background:var(--bio-wash);border-color:rgba(10,127,90,.30);color:var(--bio);}
.ibox-optimal{background:var(--optimal-soft);border-color:var(--optimal-line);color:var(--optimal);}
.band-ink .ibox{
  background:rgba(247,247,243,.07);border-color:rgba(247,247,243,.18);color:var(--paper);
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero4{
  display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(32px,5vw,72px);align-items:center;
  padding-block:clamp(44px,5.5vw,86px) clamp(52px,6.5vw,96px);
}
.hero4 h1{margin-bottom:20px;}
.hero4 .lead{margin-bottom:28px;}

/* The one moment of real delight in the type: the headline's turn.
   The fluo swipe itself is defined in the BIO layer at the top of this file —
   it is deliberately NOT restated here, because a duplicate rule further down
   the cascade silently beat it once already. */
.hero4 h1 .turn{
  font-style:italic;
  position:relative;white-space:nowrap;
}

.hero4-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;}
.btn .i{margin-right:8px;margin-top:-2px;width:16px;height:16px;}

/* Reassurance row under the CTAs — the "you can't lose here" line. */
.assure{
  display:flex;gap:18px;flex-wrap:wrap;
  font-family:var(--f-data);font-size:11.5px;color:var(--muted);
}
.assure span{display:inline-flex;align-items:center;gap:6px;}
.assure .i{width:14px;height:14px;color:var(--optimal);}

/* Buttons get a little lift. Restrained — 1px, not a bounce. */
.btn{border-radius:var(--r);}
.btn-primary{box-shadow:var(--shadow);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift);}
.btn{transition:background .16s ease,color .16s ease,border-color .16s ease,
                transform .16s ease,box-shadow .16s ease;}

/* --------------------------------------------------------------------------
   HERO VISUAL — panel and capsule, side by side.
   The argument of the page in one image: markers on the left resolve into
   doses on the right.
   -------------------------------------------------------------------------- */

.hero-vis{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:start;}
.hero-vis .panel{box-shadow:var(--shadow);border-radius:var(--r);overflow:hidden;}

/* --------------------------------------------------------------------------
   THE CAPSULE — made-to-measure motif
   Layered segments, one per ingredient, each labelled with its own dose.
   The segments fill in sequence on reveal: the formula is *built*, not shown.
   -------------------------------------------------------------------------- */

.capsule-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;
}
.capsule-card .panel-head{background:var(--ink);color:rgba(247,247,243,.72);border-bottom:none;}
.capsule-card .panel-head b{color:var(--paper);font-weight:500;}

.capsule-stage{
  padding:22px 18px;display:flex;gap:16px;align-items:center;
  background:
    linear-gradient(var(--line-soft),var(--line-soft)) 50% 0/1px 100% no-repeat,
    var(--white);
  background-position:center;
  flex:1;
}
.capsule-stage{background:var(--white);}

.capsule-svg{width:74px;flex:none;}

/* Each ingredient band inside the capsule. transform-box:fill-box makes the
   origin the rect's own box rather than the SVG viewport — without it every
   band scales from the wrong point and the capsule fills as one blob. */
.cap-seg{
  transform:scaleY(0);
  transform-box:fill-box;transform-origin:center bottom;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.revealed .cap-seg{transform:scaleY(1);}
.revealed .cap-seg:nth-of-type(1){transition-delay:.15s;}
.revealed .cap-seg:nth-of-type(2){transition-delay:.30s;}
.revealed .cap-seg:nth-of-type(3){transition-delay:.45s;}
.revealed .cap-seg:nth-of-type(4){transition-delay:.60s;}

.cap-doses{display:flex;flex-direction:column;gap:11px;flex:1;min-width:0;}
.cap-dose{
  display:flex;align-items:center;gap:9px;
  opacity:0;transform:translateX(-6px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);
}
.revealed .cap-dose{opacity:1;transform:none;}
.revealed .cap-dose:nth-of-type(1){transition-delay:.25s;}
.revealed .cap-dose:nth-of-type(2){transition-delay:.40s;}
.revealed .cap-dose:nth-of-type(3){transition-delay:.55s;}
.revealed .cap-dose:nth-of-type(4){transition-delay:.70s;}

/* Name and dose stack rather than sharing a row — at hero widths they collided,
   which is a bad look on the one visual that is meant to prove precision. */
.cap-dose{display:grid;grid-template-columns:auto 1fr;gap:1px 9px;align-items:start;}
.cap-swatch{width:9px;height:9px;border-radius:1px;flex:none;margin-top:4px;}
.cap-dose .nm{font-size:12.5px;line-height:1.3;min-width:0;}
.cap-dose .dz{
  grid-column:2;font-family:var(--f-data);font-size:12px;
  color:var(--muted);white-space:nowrap;
}

.capsule-card .panel-foot{
  border-top:1px dashed var(--line);
  font-family:var(--f-data);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   STEPS — how it works, with icons
   -------------------------------------------------------------------------- */

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
       border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.step{background:var(--white);padding:28px 26px;display:flex;flex-direction:column;gap:13px;}
.step-n{font-family:var(--f-data);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.step p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6;}

/* --------------------------------------------------------------------------
   PATHS — the two ways in
   -------------------------------------------------------------------------- */

.paths4{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
        border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.path4{background:var(--white);padding:30px 28px;display:flex;flex-direction:column;gap:13px;
       transition:background .18s ease;}
.path4:hover{background:var(--paper-alt);}
.path4:hover .ibox{transform:translateY(-2px);}
.path4.upgrade{background:var(--paper-alt);}
.path4.upgrade:hover{background:var(--paper-alt-hover);}
.path4-k{font-family:var(--f-data);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.path4 p{margin:0;font-size:14px;color:var(--muted);line-height:1.6;}
.path4 .btn{align-self:flex-start;margin-top:8px;}
.path4 .top{display:flex;align-items:center;gap:14px;}

/* --------------------------------------------------------------------------
   MODELS — four philosophies, each with a glyph
   -------------------------------------------------------------------------- */

.models4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
         background:rgba(247,247,243,.16);border:1px solid rgba(247,247,243,.16);
         border-radius:var(--r);overflow:hidden;}
.model4{background:var(--ink);padding:28px 24px;display:flex;flex-direction:column;gap:13px;
        transition:background .2s ease;}
.model4:hover{background:var(--ink-hover);}
.model4:hover .ibox{transform:translateY(-2px);}
.model4-k{font-family:var(--f-data);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
          color:rgba(247,247,243,.5);}
.model4 h3{color:var(--paper);}
.model4 p{margin:0;font-size:13.5px;line-height:1.6;color:rgba(247,247,243,.66);}
.model4 .pending{
  font-family:var(--f-data);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(247,247,243,.42);border-top:1px dashed rgba(247,247,243,.24);
  padding-top:12px;margin-top:auto;
}

/* --------------------------------------------------------------------------
   VERTICALS — identity cards, each with its own drawing
   -------------------------------------------------------------------------- */

.grid{border-radius:var(--r);overflow:hidden;}
.card{gap:12px;}
.card .ibox{margin-bottom:2px;}
a.card:hover .ibox{transform:translateY(-2px);}
.card-go{display:inline-flex;align-items:center;gap:6px;transition:gap .18s ease;}
a.card:hover .card-go{gap:10px;}
.card-go .i{width:14px;height:14px;}

/* --------------------------------------------------------------------------
   AUTHORISED-CLAIMS FOOTNOTE
   Sits under the verticals grid and resolves every <sup>*</sup> in the three
   regulated cards (skin, longevity, sexual health). Styled to be readable rather
   than hidden — the whole point is that the claims are checkable.
   -------------------------------------------------------------------------- */

.claims{
  margin-top:20px;padding:22px 24px;
  background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--r);
}
.claims-k{
  display:block;font-family:var(--f-data);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.claims p{margin:0 0 10px;font-size:12.5px;line-height:1.7;color:var(--muted);max-width:92ch;}
.claims p:last-child{margin-bottom:0;}
.claims b{color:var(--ink);font-weight:500;}

.card-driver sup{font-size:9px;color:var(--muted);}

/* --------------------------------------------------------------------------
   CASES — research case studies, with a figure drawing each
   -------------------------------------------------------------------------- */

.cases4{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
        border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.case4{background:var(--white);padding:28px 26px;display:flex;gap:20px;}
.case4-fig{width:64px;flex:none;color:var(--ink);opacity:.9;}
.case4-fig svg{width:100%;height:auto;}
.case4-k{font-family:var(--f-data);font-size:11px;color:var(--muted);margin-bottom:10px;}
.case4 h3{margin-bottom:10px;}
.case4 p{margin:0 0 16px;font-size:13.5px;color:var(--muted);line-height:1.6;}
.case4-out{display:flex;gap:6px;flex-wrap:wrap;}
.chip-dose{border-color:var(--optimal-line);background:var(--optimal-soft);color:var(--optimal);}

/* --------------------------------------------------------------------------
   EVIDENCE — the honest numbers. The failure gets the same visual weight as
   the wins; that IS the credibility move, so it must not look like an
   apology tucked in a corner.
   -------------------------------------------------------------------------- */

.stats{border-radius:var(--r);overflow:hidden;}
.stat{position:relative;}
.stat .i{color:var(--muted);width:17px;height:17px;margin-bottom:10px;display:block;}
.stat.win b{color:var(--optimal);}
.stat.miss b{color:var(--flag);}
.stat.miss .i{color:var(--flag);}
.stat.win .i{color:var(--optimal);}

/* count-up: number swaps in rather than just sitting there */
.stat b{transition:opacity .4s ease;}

/* The named thesis — a checkable anchor, so it gets real weight rather than
   sitting in a footnote. */
.thesis{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;box-shadow:var(--shadow);
}
.thesis-k{
  display:block;font-family:var(--f-data);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px;
}
.thesis h3{margin-bottom:8px;max-width:62ch;line-height:1.35;}
.thesis p{margin:0;font-size:13px;color:var(--muted);}

@media (max-width:640px){
  .thesis{flex-direction:column;gap:14px;}
}

/* --------------------------------------------------------------------------
   THE LOOP — the backbone model's feedback cycle.
   Step 4 carries a return arrow back to step 1: the point of the whole section
   is that it closes. On mobile the arrow rotates to point down the stack.
   -------------------------------------------------------------------------- */

.loop{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
}
.loop-step{
  background:var(--white);padding:28px 24px;
  display:flex;flex-direction:column;gap:12px;position:relative;
}
.loop-n{
  font-family:var(--f-data);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.loop-step p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6;}

/* Step 4 hands back to step 1 — the ↺ is the whole point of the section.
   Styled ONLY here. An earlier pass styled it in two places: one block made the
   card ink and the text white, the other kept the card pale green. Later rule won
   the background, earlier rule won the text — white text on pale green, which is
   what shipped and what was unreadable. Keep this in one place. */
.loop-step.is-return{
  background:var(--ink);
  background-image:radial-gradient(420px 220px at 88% -20%, rgba(53,201,142,.16), transparent 65%);
}
.loop-step.is-return h3{color:var(--paper);}
.loop-step.is-return p{color:rgba(247,247,243,.74);}
.loop-step.is-return .loop-n{color:var(--bio-lift);}
.loop-step.is-return .ibox{
  background:var(--bio-lift);border-color:var(--bio-lift);color:var(--ink-on-bio);
}
.loop-step.is-return::after{
  content:"↺";
  position:absolute;top:22px;right:22px;
  font-size:17px;color:var(--bio-lift);line-height:1;
}

/* Honest-status block. Deliberately as prominent as the loop itself — it is the
   reason the loop is allowed to make this claim at all. */
.loop-status{
  margin-top:22px;display:flex;gap:18px;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--bio);
  border-radius:var(--r);padding:24px 26px;
}
.loop-status h3{margin-bottom:8px;}
.loop-status p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.7;max-width:78ch;}

@media (max-width:920px){
  .loop{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .loop{grid-template-columns:1fr;}
  .loop-status{flex-direction:column;gap:14px;}
}

/* --------------------------------------------------------------------------
   CHAT
   -------------------------------------------------------------------------- */

.chat{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);}
.bubble{border-radius:var(--r);}
.bubble.ai .who{display:flex;align-items:center;gap:5px;}
.bubble.ai .who .i{width:12px;height:12px;color:var(--optimal);}

/* typing dots on the last, unfinished turn */
.typing{display:inline-flex;gap:4px;align-items:center;padding:4px 0;}
.typing i{
  width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.4;
  animation:blink 1.3s ease-in-out infinite;
}
.typing i:nth-child(2){animation-delay:.18s;}
.typing i:nth-child(3){animation-delay:.36s;}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0);}30%{opacity:.9;transform:translateY(-2px);}}

/* --------------------------------------------------------------------------
   MOCKUP MODAL — required by CLAUDE.md: this is a prototype, say so first.
   -------------------------------------------------------------------------- */

.modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(20,33,61,.55);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.modal.open{opacity:1;visibility:visible;}
.modal-box{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  max-width:470px;width:100%;padding:32px 30px;box-shadow:var(--shadow-lift);
  transform:translateY(10px);transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.modal.open .modal-box{transform:none;}
.modal-box h2{font-size:26px;margin-bottom:12px;}
.modal-box p{font-size:14px;color:var(--muted);line-height:1.65;margin:0 0 14px;}
.modal-box .when{
  font-family:var(--f-data);font-size:12px;color:var(--ink);
  background:var(--bio-wash);border:1px solid rgba(10,127,90,.28);border-radius:var(--r);
  padding:11px 13px;display:flex;align-items:center;gap:9px;margin-bottom:20px;
}
.modal-box .when .i{color:var(--warm-ink);width:16px;height:16px;}

/* --------------------------------------------------------------------------
   RESPONSIVE
   Data-dense blocks stack; they never compress into unreadable columns.
   -------------------------------------------------------------------------- */

@media (max-width:1080px){
  .models4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:920px){
  .hero4{grid-template-columns:1fr;}
  .hero-vis{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr;}
  .cases4{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .hero4 h1 .turn{white-space:normal;}
  .hero-vis{grid-template-columns:1fr;}
  .paths4,.models4{grid-template-columns:1fr;}
  .capsule-stage{gap:18px;}
  .case4{flex-direction:column;gap:14px;}
  .case4-fig{width:52px;}
  .assure{gap:10px 16px;}
  .hero4-ctas .btn{width:100%;text-align:center;}
}

@media (prefers-reduced-motion:reduce){
  .cap-seg{transform:scaleY(1);}
  .cap-dose{opacity:1;transform:none;}
  .hero4 h1 .turn::after{animation:none;transform:scaleX(1);}
  .typing i{animation:none;}
  .btn-primary:hover{transform:none;}
}

/* --------------------------------------------------------------------------
   BRAND MARK
   The logo art has the "BODY+" wordmark baked in, so the <img> fully replaces
   the old text lockup — no duplicate text beside it.

   Sized by HEIGHT, never width: the art is ~4.15:1, so constraining width makes
   its height unpredictable across breakpoints and shoves the nav around. Height
   is the stable dimension in a nav bar.

   Header and footer are deliberately the SAME height at every breakpoint — one
   value, set once, so they cannot drift apart again. If you change the mark size,
   change it here and both move together.
   -------------------------------------------------------------------------- */


.wordmark{display:inline-flex;align-items:center;line-height:0;}
.wordmark img,
.foot-mark img{
  height:var(--mark-h);width:auto;max-width:none;
  display:block;
}
.nav-in{padding-block:14px;}

/* At 375 the nav is just mark + CTA. 30px keeps ~55px of clearance between them;
   anything taller starts crowding the button. Verified, not guessed. */

/* --------------------------------------------------------------------------
   EVIDENCE — the claim, and the institution it points at
   Two columns on desktop, stacked on mobile. The mark sits at a fixed max-width
   rather than a share of the grid, so it never balloons on a wide viewport — an
   institutional logo that dominates the headline reads as borrowed authority.
   -------------------------------------------------------------------------- */

.evi-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,5vw,64px);align-items:center;
  max-width:none;margin-bottom:clamp(32px,4vw,52px);
}
.evi-head > div{max-width:60ch;}
.evi-head .eyebrow{display:block;margin-bottom:14px;}
.evi-head h2{margin-bottom:14px;}

/* Bare crest — no card, no caption. Sized to sit beside the headline without
   competing with it. */
.evi-inst{
  width:100%;max-width:230px;height:auto;display:block;
}

@media (max-width:920px){
  .evi-head{grid-template-columns:1fr;}
  .evi-inst{max-width:200px;}
}

/* --------------------------------------------------------------------------
   FOOTER — links, with the certification marks beneath them
   -------------------------------------------------------------------------- */

.foot-right{
  display:flex;flex-direction:column;align-items:flex-end;gap:22px;
}
.foot-cert img{
  width:100%;max-width:315px;height:auto;display:block;
}

@media (max-width:640px){
  .foot-right{align-items:flex-start;}
}


/* ============================== from bodyplus-v5.css ============================== */
/* A framed figure — the house frame for any raster image. */
.frame{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);background:var(--paper-alt);
  position:relative;
}
.frame img{width:100%;height:100%;object-fit:cover;display:block;}

/* --------------------------------------------------------------------------
   IDENTITY GALLERY — a wall of activity tiles, each a doorway into the quiz.
   On the ink stage, where colour sings. Every tile is a link.
   -------------------------------------------------------------------------- */
.idband .head{max-width:64ch;}
.figgrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
a.tile{
  position:relative;display:block;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);background:var(--paper-alt);
}
.tile-img{aspect-ratio:3/4;overflow:hidden;}
.tile-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
a.tile:hover .tile-img img{transform:scale(1.05);}
a.tile:focus-visible{outline:2px solid var(--bio-lift);outline-offset:3px;}
.tile figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:16px 14px 13px;
  background:linear-gradient(transparent, rgba(20,33,61,.85));
}
.tile .r{
  display:block;font-family:var(--f-display);font-size:18px;font-weight:500;
  line-height:1.1;color:var(--paper);
}
.tile .go{
  display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  font-family:var(--f-data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bio-lift);opacity:0;transform:translateY(4px);
  transition:opacity .2s ease,transform .2s ease;
}
.tile .go .i{width:13px;height:13px;}
a.tile:hover .go{opacity:1;transform:none;}

/* The "more" tile — no photo, an invitation into the full profile set. Sits in
   the grid like a card but reads as a doorway, using the one accent. */
a.tile-more{
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:3/4;box-shadow:none;
  background:rgba(53,201,142,.07);
  border:1px solid rgba(53,201,142,.34);
  transition:background .18s ease,border-color .18s ease;
}
a.tile-more:hover{background:rgba(53,201,142,.15);border-color:var(--bio-lift);}
.tile-more .more-in{
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;
}
.tile-more .r{color:var(--paper);}
.tile-more .go{
  opacity:1;transform:none;color:var(--bio-lift);margin-top:0;transition:gap .18s ease;
}
.tile-more .go .i{width:13px;height:13px;}
a.tile-more:hover .go{gap:8px;}

/* --------------------------------------------------------------------------
   SCIENCE MEDIA — the scientist figure beside the evidence numbers.
   -------------------------------------------------------------------------- */
.sci-grid{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(24px,4vw,48px);
  align-items:center;
}
.sci-grid .frame{aspect-ratio:3/2;}

/* --------------------------------------------------------------------------
   WHAT YOU GET — formula readout beside a line of intent.
   -------------------------------------------------------------------------- */
.get-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center;
}

/* How-it-works as four steps, ending on the rebuild. */
.steps-4{grid-template-columns:repeat(4,1fr);}

@media (max-width:1080px){
  .steps-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:920px){
  .sci-grid,.get-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .figgrid{grid-template-columns:repeat(2,1fr);gap:10px;}
}


/* ============================== from bodyplus-v6.css ============================== */
a.tile-pending{
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:3/4;box-shadow:none;
  background:
    repeating-linear-gradient(-45deg, rgba(247,247,243,.030) 0 12px, transparent 12px 24px),
    rgba(247,247,243,.035);
  border:1px dashed rgba(247,247,243,.22);
  transition:background .18s ease,border-color .18s ease;
}
a.tile-pending:hover{border-color:rgba(53,201,142,.55);background:
    repeating-linear-gradient(-45deg, rgba(247,247,243,.045) 0 12px, transparent 12px 24px),
    rgba(247,247,243,.05);}
.tile-pending .pending-in{
  display:flex;flex-direction:column;align-items:center;gap:11px;padding:22px;
}
.tile-pending .pending-tag{
  font-family:var(--f-data);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(247,247,243,.55);
  border:1px solid rgba(247,247,243,.24);border-radius:2px;padding:3px 8px;
}
.tile-pending .r{color:rgba(247,247,243,.92);}
.tile-pending .go{
  opacity:.6;transform:none;color:var(--bio-lift);margin-top:2px;transition:opacity .18s ease;
}
a.tile-pending:hover .go{opacity:1;}

/* ===================== from bodyplus-dark.css (dark surface fixes) ===================== */
/* ── surface fixes + image swaps ─────────────────────────────────────────────
   Only the surfaces the token flip cannot fix on its own. Written once per
   activation context (system / explicit) so a future light-system toggle works.

   · .nav — hard-codes a light rgba background.
   · .band-ink / .model4 / .loop-step.is-return / .capsule-card .panel-head —
     use --ink as a *background* (would flip light) and --paper as *text*.
   · .tile .r / .model4 h3 / band h2 (inline) — text hard-codes var(--paper);
     these sit on always-dark surfaces so must stay light in BOTH themes.
   · .bubble.user — --ink surface + --paper text; recoloured to the accent.
   · wordmark + UZH crest — raster logos swapped to the supplied dark artwork. */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .nav{ background:rgba(15,20,27,.82); }

  :root:not([data-theme="light"]) .band-ink{
    background:
      radial-gradient(1100px 460px at 82% -12%, rgba(53,201,142,.10), transparent 62%),
      radial-gradient(760px 420px at 8% 108%, rgba(53,201,142,.05), transparent 60%),
      var(--d-band);
    color:var(--on-dark);
  }
  :root:not([data-theme="light"]) .band-ink h2{ color:var(--on-dark) !important; }
  :root:not([data-theme="light"]) .tile .r,
  :root:not([data-theme="light"]) .tile-more .r{ color:var(--on-dark); }

  :root:not([data-theme="light"]) .model4{ background:var(--d-surface); }
  :root:not([data-theme="light"]) .model4 h3{ color:var(--on-dark); }

  :root:not([data-theme="light"]) .loop-step.is-return{ background:var(--d-surface); }
  :root:not([data-theme="light"]) .loop-step.is-return h3{ color:var(--on-dark); }

  :root:not([data-theme="light"]) .capsule-card .panel-head{ background:var(--d-surface-deep); }
  :root:not([data-theme="light"]) .capsule-card .panel-head b{ color:var(--on-dark); }

  :root:not([data-theme="light"]) .bubble.user{ background:var(--d-bio); color:var(--d-on-accent); }

  :root:not([data-theme="light"]) .wordmark img{ content:url("../img/brand/bodyplus-dark-corrected.png"); }
  :root:not([data-theme="light"]) .evi-inst{ content:url("../img/brand/logo_unizh_dark.png"); }
}

:root[data-theme="dark"] .nav{ background:rgba(15,20,27,.82); }
:root[data-theme="dark"] .band-ink{
  background:
    radial-gradient(1100px 460px at 82% -12%, rgba(53,201,142,.10), transparent 62%),
    radial-gradient(760px 420px at 8% 108%, rgba(53,201,142,.05), transparent 60%),
    var(--d-band);
  color:var(--on-dark);
}
:root[data-theme="dark"] .band-ink h2{ color:var(--on-dark) !important; }
:root[data-theme="dark"] .tile .r,
:root[data-theme="dark"] .tile-more .r{ color:var(--on-dark); }
:root[data-theme="dark"] .model4{ background:var(--d-surface); }
:root[data-theme="dark"] .model4 h3{ color:var(--on-dark); }
:root[data-theme="dark"] .loop-step.is-return{ background:var(--d-surface); }
:root[data-theme="dark"] .loop-step.is-return h3{ color:var(--on-dark); }
:root[data-theme="dark"] .capsule-card .panel-head{ background:var(--d-surface-deep); }
:root[data-theme="dark"] .capsule-card .panel-head b{ color:var(--on-dark); }
:root[data-theme="dark"] .bubble.user{ background:var(--d-bio); color:var(--d-on-accent); }
:root[data-theme="dark"] .wordmark img{ content:url("../img/brand/bodyplus-dark-corrected.png"); }
:root[data-theme="dark"] .evi-inst{ content:url("../img/brand/logo_unizh_dark.png"); }

}

/* ── prose block (about page) ──────────────────────────────────────────────
   Same rules the lifestyle page carries in its own head_extra. Promoted to the
   shared sheet the moment a second page needed it — one definition, not two. */
.prose{ max-width:66ch; }
.prose h3{ margin:32px 0 12px; }
.prose p{ font-size:15px; line-height:1.75; color:var(--muted); margin:0 0 16px; }
.prose p strong, .prose p b{ color:var(--ink); font-weight:500; }
.prose a{ color:var(--ink); }

/* ==========================================================================
   HEADER MENU — the 2026-07-30 nav rebuild.
   Tokens only, no literal hex. Dark mode is free everywhere the surface is a
   token (--paper/--white/--line/--ink are remapped in tokens.css); the two
   places that needed a value of their own — the scrim, and the sticky-bar
   height the mobile panel hangs from — are tokens too.
   ========================================================================== */

/* ── the bar ─────────────────────────────────────────────────────────────── */
.nav-in{ gap:16px; }

.navlinks{ display:flex; align-items:center; gap:0; }
.navgroup{
  position:relative; background:none; border:none; cursor:pointer;
  font-family:var(--f-data); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding:8px 15px; transition:color .16s ease;
}
.navgroup:hover, .navgroup[aria-expanded="true"]{ color:var(--ink); }
.navgroup[aria-expanded="true"]::after{
  content:""; position:absolute; left:15px; right:15px; bottom:0; height:1px; background:var(--bio);
}
/* separators — a drawn dot, not a text node, so no screen reader reads "middot" */
.navgroup:not(:first-child)::before{
  content:""; position:absolute; left:0; top:50%; width:3px; height:3px; border-radius:50%;
  background:var(--muted); opacity:.5; transform:translate(-50%,-50%);
}
.navgroup:focus-visible, .util-btn:focus-visible, .menu-toggle:focus-visible,
.market-list a:focus-visible{
  outline:2px solid var(--bio); outline-offset:2px;
}

.nav-util{ display:flex; align-items:center; gap:10px; }

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.nav-cta{ display:inline-flex; align-items:center; white-space:nowrap; }
.nav-cta .i{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5;
             stroke-linecap:round; stroke-linejoin:round; margin:0 8px 0 0; }

/* ── hamburger (mobile only) ─────────────────────────────────────────────── */
.menu-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer; padding:0; width:42px; height:42px; place-items:center; color:var(--ink);
}
.menu-toggle .i{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5;
                 stroke-linecap:round; }

/* ── panel ───────────────────────────────────────────────────────────────── */
.menu-scrim{ position:fixed; inset:0; z-index:40; background:var(--scrim); }
/* FIXED at both breakpoints, and a SIBLING of .nav — see the note at the top of
   includes/header.php. .nav has backdrop-filter, which makes it the containing block for
   any fixed descendant; as a child, "top:var(--nav-h); bottom:0" resolved against the
   74px bar and the mobile menu collapsed to a 1px scroll box that DOM queries still
   called visible. --nav-h is a token; menu.js measures the bar and corrects it. */
.menu-panel, .market-panel{
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:55;
  max-height:calc(100vh - var(--nav-h)); overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--menu-surface); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-lift);
}
.menu-panel:focus{ outline:none; }
.menu-in{
  max-width:var(--maxw); margin:0 auto; padding:clamp(24px,3vw,38px) var(--gut);
  display:flex; flex-wrap:wrap; gap:clamp(26px,4vw,64px);
}
.menu-col{ min-width:170px; }
.menu-h{
  font-family:var(--f-data); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:400; margin:0 0 14px;
}
.menu-list{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:9px; }
.menu-list a{ font-size:14.5px; color:var(--ink); }
.menu-list a:hover{ color:var(--bio); }
.menu-all{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-data); font-size:11.5px; letter-spacing:.07em; color:var(--bio);
}
.menu-all .i{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5; }

/* one group open -> only that column */
.menu-panel[data-open="move"]  .menu-col:not([data-col="move"]),
.menu-panel[data-open="think"] .menu-col:not([data-col="think"]),
.menu-panel[data-open="live"]  .menu-col:not([data-col="live"]),
.menu-panel[data-open="about"] .menu-col:not([data-col="about"]){ display:none; }

/* Where menu.js parks the utility cluster below the breakpoint. Empty on desktop, so it
   collapses to nothing and draws no rule across the panel. */
.menu-util:empty{ display:none; }
.menu-util{
  flex-basis:100%; border-top:1px solid var(--line); padding-top:18px; margin-top:4px;
}

/* ── utility cluster: globe · chat · theme · login ───────────────────────────
   One DOM node, relocated by menu.js between the header row and the menu panel — never
   duplicated, because theme.js owns #themeToggle by id and a second copy would be dead. */
.util-cluster{ display:flex; align-items:center; gap:2px; }
.util-btn{
  display:grid; place-items:center; width:38px; height:38px; padding:0;
  background:none; border:none; border-radius:var(--r); cursor:pointer; color:var(--muted);
  transition:color .16s ease, background-color .16s ease;
}
.util-btn svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.5;
               stroke-linecap:round; stroke-linejoin:round; }
.util-btn:hover, .util-btn[aria-expanded="true"]{ color:var(--ink); background:var(--paper-alt); }
/* aria-disabled, not [disabled]: still focusable, still announced, just inert */
.util-btn.is-unavailable{ opacity:.45; cursor:default; }
.util-btn.is-unavailable:hover{ color:var(--muted); background:none; }

/* theme toggle — the same button as before, wearing the icon shape the header row needs.
   Sun in light, moon in dark; the state is expressed twice, matching tokens.css: the
   explicit attribute, and the OS query when no explicit LIGHT choice overrides it. */
.theme-toggle .ic-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .ic-moon{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .ic-sun { display:none; }
  :root:not([data-theme="light"]) .theme-toggle .ic-moon{ display:block; }
  :root[data-theme="light"] .theme-toggle .ic-sun { display:block; }
  :root[data-theme="light"] .theme-toggle .ic-moon{ display:none; }
}

/* ── market picker ───────────────────────────────────────────────────────────
   Same geometry as the menu panel (fixed, sibling of .nav) so the two behave alike and
   the backdrop-filter trap cannot catch this one either. One step above it: below the
   breakpoint the globe lives inside the menu panel, so the picker opens ON TOP of it
   rather than replacing it (menu.js explains why). */
.market-panel{ z-index:56; }
.market-in{
  max-width:var(--maxw); margin:0 auto; padding:clamp(24px,3vw,38px) var(--gut);
  display:flex; flex-wrap:wrap; gap:clamp(26px,4vw,64px);
}
.market-col{ min-width:190px; }
.market-h{
  font-family:var(--f-data); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:400; margin:0 0 14px;
}
.market-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.market-list a{ font-size:14.5px; color:var(--ink); display:inline-block; }
.market-list a:hover{ color:var(--bio); }
.market-ccy{ color:var(--muted); font-family:var(--f-data); font-size:11.5px; }
.market-list a.is-current{ color:var(--bio); font-weight:500; }
.market-list a.is-current::before{
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--bio); margin-right:8px; vertical-align:middle;
}
.market-list a.is-current .market-ccy{ color:var(--bio); }

/* ── breakpoint ──────────────────────────────────────────────────────────── */
@media (max-width:920px){
  .navlinks{ display:none; }
  .menu-toggle{ display:grid; }
  .nav-util{ gap:8px; }

  /* icon-only CTA — only the formula builder collapses; an override like the quiz's
     "Back to site" keeps its words, because a flask would be a lie about where it goes */
  .nav-cta-build .nav-cta-label{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .nav-cta-build{ padding:0; width:42px; height:42px; justify-content:center; }
  .nav-cta-build .i{ margin:0; width:17px; height:17px; }

  .menu-panel, .market-panel{ bottom:0; max-height:none; border-bottom:none; }
  .util-cluster{ gap:10px; }
  .util-btn{ width:44px; height:44px; border:1px solid var(--line); }
  .util-btn svg{ width:20px; height:20px; }
  .menu-in, .market-in{ flex-direction:column; gap:26px; padding-bottom:40px; }
  .menu-col{ width:100%; }
  body.menu-open{ overflow:hidden; }
}

@media (prefers-reduced-motion: reduce){
  .navgroup, .util-btn, .menu-list a, .market-list a{ transition-duration:.01ms !important; }
}