/* ========= Goglycoreset — critical CSS (strip, header, hero) ==============
   Site DNA 14: the missing panel. The hero object is a correctly drawn
   Supplement Facts panel with every value slot empty, because no panel
   appears anywhere in the material supplied for this product. Warm bone
   paper ruled with a faint red grid | headline left, panel right, bottle
   standing on the baseline overlapping its corner | Bodoni Moda display +
   Public Sans body + IBM Plex Mono for every figure | filing-card shapes,
   rounded at the top only | stadium buttons with an inner keyline that
   retracts | sections divided by a hairline double rule with a serif
   number in the margin. */
:root{
  --bg:#FBF7F2; --bg-2:#FFFFFF; --bg-3:#F2EBE2;
  --paper:#FBF7F2; --paper-2:#F2EBE2;
  --ink:#17110F; --ink-2:#4A423E; --ink-3:#6B615C;
  --dark:#1A1210; --deep:#1A1210; --deeper:#0E0A09;
  --on-dark:#F6EFE8; --on-dark-2:#B9ADA5; --on-dark-3:#B9ADA5;
  --accent:#C81E1E; --accent-strong:#9E1414; --accent-bright:#FF6B5E;
  --accent-ink:#9E1414;
  --accent-tint:#F7E9E7; --accent-tint-2:#F0DAD7;
  --accent-line:#E6D6D0;
  --amber:#8A5A06; --amber-bright:#F0B840; --plum:#8A5A06;
  --good:#166534; --warn:#A63A0B;
  --line:#E4DACE; --line-2:#CFC2B3; --line-dark:rgba(246,239,232,.2);
  --glass:#FFFFFF;
  --grad:linear-gradient(96deg,#C81E1E 0%,#9E1414 100%);
  --grad-bright:linear-gradient(90deg,#C81E1E 0%,#E05A2B 100%);
  --radius:0px; --radius-sm:0px; --btn-r:999px;
  --shadow:0 1px 2px rgba(23,17,15,.05), 0 14px 30px rgba(23,17,15,.07);
  --lift:0 6px 14px rgba(23,17,15,.08), 0 28px 56px rgba(23,17,15,.14);
  --ease:cubic-bezier(.22,.74,.2,1); --ui:340ms; --hover:170ms;
  --ff-display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ff-body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ff-ui:var(--ff-body);
  --wrap:1200px; --text:690px; --mid:960px;
  --sp:0;   /* scroll progress, 0-100, written by main.js */
  --f:.18;  /* fill fraction, overridden inline per element */
  --i:0;    /* item index, overridden inline on each ladder rung */
}
/* the dark band is the inverse here: paper is the default, ink is the accent */
.sec--dark{
  --bg:#1A1210; --bg-2:#241A17; --bg-3:#241A17;
  --ink:#F6EFE8; --ink-2:#B9ADA5; --ink-3:#B9ADA5;
  --accent:#FF6B5E; --accent-strong:#FF6B5E; --accent-bright:#FF6B5E;
  --accent-tint:#241A17; --accent-tint-2:#2E211C;
  --accent-line:rgba(246,239,232,.22); --amber:#F0B840;
  --good:#5FD39A; --warn:#FFA06B;
  --line:rgba(246,239,232,.16); --line-2:rgba(246,239,232,.3); --glass:#241A17;
  background:var(--dark);color:var(--on-dark)}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;color:var(--ink-2);font-family:var(--ff-body);font-size:18.4px;
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;line-height:1.04;
  letter-spacing:-.028em;margin:0 0 .46em;color:var(--ink)}
h1{font-size:clamp(2.2rem,1.2rem + 3vw,3.5rem);letter-spacing:-.036em}
h2{font-size:clamp(1.78rem,1.18rem + 2.1vw,2.65rem);letter-spacing:-.03em}
h3{font-size:clamp(1.14rem,1rem + .5vw,1.36rem);line-height:1.2;letter-spacing:-.018em}
p{margin:0 0 1.05em}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--ink);
  padding:12px 18px;z-index:300;font-weight:700}
.skip:focus{left:0}
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:200;transform:scaleX(0);
  transform-origin:0 50%;background:var(--grad)}

/* ------------------------------------------------------------ globals ---- */
body{background-image:
  repeating-linear-gradient(0deg,rgba(200,30,30,.045) 0 1px,transparent 1px 30px),
  repeating-linear-gradient(90deg,rgba(200,30,30,.035) 0 1px,transparent 1px 30px)}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;letter-spacing:-.012em}
h1{font-size:clamp(2.1rem,1.1rem + 3vw,3.3rem);line-height:1.04;letter-spacing:-.018em}
h2{font-size:clamp(1.7rem,1.1rem + 2.1vw,2.5rem);line-height:1.08}
h3{font-family:var(--ff-body);font-weight:700;font-size:clamp(1.08rem,1rem + .4vw,1.26rem);
  letter-spacing:-.012em}

/* ----------------------------------------------------------- top strip ---- */
.strip{background:var(--dark);color:var(--on-dark-2);font-family:var(--ff-mono);
  font-size:12.4px;line-height:1.45;padding:9px 0}
.strip .wrap{display:flex;gap:8px 20px;align-items:center;justify-content:center;flex-wrap:wrap}
.strip b{color:var(--amber-bright);font-weight:600}
.strip a{color:var(--accent-bright);font-weight:600;text-decoration:none}
.strip a:hover{text-decoration:underline}
.strip .sep{opacity:.3;display:inline}
.strip .only-wide{display:inline}

/* -------------------------------------------------------------- header ---- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(251,247,242,.92);
  backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--line);
  transition:transform var(--ui) var(--ease)}
.hdr--hidden{transform:translateY(-110%)}
.hdr .wrap{display:flex;align-items:center;gap:18px;padding:10px 0;min-height:68px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand__mark{width:42px;height:42px;flex:0 0 auto;border-radius:50%}
.brand__name{font-family:var(--ff-display);font-weight:600;font-size:1.2rem;
  letter-spacing:-.02em;display:block;line-height:1.05}
.brand__sub{font-family:var(--ff-mono);font-size:9.8px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);margin-top:3px}
.nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.nav a{font-family:var(--ff-body);color:var(--ink-2);text-decoration:none;font-size:14px;
  font-weight:500;padding:9px 13px;border-radius:999px;position:relative;
  transition:color var(--hover) var(--ease),background var(--hover) var(--ease)}
.nav a:hover{color:var(--accent-strong);background:var(--accent-tint)}
.nav a[aria-current="page"]{color:var(--accent-strong);background:var(--accent-tint);font-weight:700}
.hdr__cta{flex:0 0 auto}
.burger{display:none;margin-left:auto;width:48px;height:48px;border:1px solid var(--line-2);
  background:#fff;border-radius:999px;align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:19px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;
  height:2px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ------------------------------------------------------------- buttons ---- */
/* a stadium with an inner keyline that RETRACTS on hover */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--ff-body);font-weight:700;font-size:1rem;letter-spacing:-.004em;
  text-decoration:none;cursor:pointer;border:0;padding:16px 30px;border-radius:999px;
  position:relative;overflow:hidden;
  transition:transform var(--hover) var(--ease),box-shadow var(--hover) var(--ease),
             background var(--hover) var(--ease),color var(--hover) var(--ease)}
.btn::before{content:"";position:absolute;inset:6px;border-radius:999px;pointer-events:none;
  border:1.5px solid currentColor;opacity:.4;
  transition:inset var(--ui) var(--ease),opacity var(--ui) var(--ease)}
.btn:hover::before{inset:11px;opacity:0}
.btn.btn--primary{background:var(--accent);color:#fff;
  box-shadow:0 10px 26px rgba(200,30,30,.26)}
.btn.btn--primary:hover{transform:translateY(-3px);background:var(--accent-strong);
  box-shadow:0 18px 40px rgba(200,30,30,.34)}
.btn.btn--ghost{background:#fff;color:var(--accent-strong);
  box-shadow:inset 0 0 0 1.5px var(--accent-line)}
.btn.btn--ghost:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1.5px var(--accent),0 12px 26px rgba(200,30,30,.14)}
.btn.btn--light{background:var(--amber-bright);color:var(--ink);
  box-shadow:0 10px 26px rgba(0,0,0,.2)}
.btn.btn--light:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(0,0,0,.28)}
.btn.btn--outline{background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn.btn--outline:hover{transform:translateY(-3px);color:var(--accent-strong);
  box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn.btn--sm{padding:11px 20px;font-size:.92rem}
.btn.btn--sm::before{inset:4px}
.btn--block{width:100%}
.btn__arrow{transition:transform var(--hover) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(5px)}

/* ---------------------------------------------------------------- hero ---- */
.hero{position:relative;background:var(--bg);color:var(--ink);overflow:hidden;
  border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 84% 14%,rgba(200,30,30,.10),transparent 64%),
    radial-gradient(48% 46% at 6% 88%,rgba(200,30,30,.07),transparent 66%)}
.hero::after{content:"";position:absolute;inset:-18% -8%;z-index:0;pointer-events:none;
  background:
    radial-gradient(34% 38% at 26% 26%,rgba(200,30,30,.13),transparent 64%),
    radial-gradient(30% 34% at 80% 72%,rgba(240,184,64,.14),transparent 66%);
  filter:blur(16px);animation:aurora 24s var(--ease) infinite alternate;will-change:transform}
@keyframes aurora{
  0%{transform:translate3d(-2%,-1%,0) scale(1)}
  50%{transform:translate3d(3%,2%,0) scale(1.08)}
  100%{transform:translate3d(-1%,3%,0) scale(1.03)}}
.hero__grid{position:relative;z-index:2;width:min(100% - 40px,var(--wrap));margin-inline:auto;
  padding:34px 0 40px}
.hero__copy{display:block}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-mono);
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-strong);background:#fff;padding:9px 16px;border-radius:999px;
  margin:0 0 18px;box-shadow:inset 0 0 0 1px var(--accent-line);width:fit-content}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--accent);
  animation:blip 2.2s var(--ease) infinite}
@keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.5)}}
.hero h1{margin:0 0 18px;max-width:16ch;color:var(--ink)}
.hero h1 .mark{position:relative;white-space:nowrap;font-style:italic;
  color:var(--accent-strong)}
.hero h1 .mark svg{position:absolute;left:0;right:0;bottom:-.02em;width:100%;height:.18em;
  overflow:visible;pointer-events:none}
.hero h1 .mark svg path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:300;stroke-dashoffset:300;animation:draw 1s var(--ease) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---- the empty Supplement Facts panel, drawn to the real format --------- */
.sfp{position:relative;background:#fff;border:2px solid var(--ink);padding:16px 18px 18px;
  box-shadow:0 18px 44px rgba(23,17,15,.13);font-family:var(--ff-body)}
.sfp__t{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.5rem,1rem + 2vw,2.1rem);
  line-height:1;margin:0 0 8px;color:var(--ink);letter-spacing:-.02em}
.sfp__rule{height:9px;background:var(--ink);margin:6px 0}
.sfp__rule--thin{height:1px;background:var(--ink);margin:5px 0}
.sfp__row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;
  padding:6px 0;border-bottom:1px solid var(--line-2);font-size:14.6px}
.sfp__row:last-of-type{border-bottom:0}
.sfp__k{font-weight:600;color:var(--ink)}
.sfp__v,.sfp__dv{font-family:var(--ff-mono);font-size:13px;color:var(--accent-strong);
  min-width:74px;text-align:right;font-weight:500}
.sfp__dv{min-width:52px}
.sfp__head{display:grid;grid-template-columns:1fr auto auto;gap:12px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:4px}
.sfp__head span:first-child{visibility:hidden}
.sfp__head span:nth-child(2){min-width:74px;text-align:right}
.sfp__head span:nth-child(3){min-width:52px;text-align:right}
.sfp__note{font-family:var(--ff-mono);font-size:11.4px;color:var(--ink-3);margin:9px 0 0;
  line-height:1.5}
.sfp__caret{display:inline-block;width:9px;height:1.05em;background:var(--accent);
  vertical-align:-.16em;margin-left:4px;animation:caret 1.05s steps(1) infinite}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.sfp__stamp{position:absolute;right:-16px;top:-18px;z-index:3;
  font-family:var(--ff-mono);font-size:11.6px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--accent);padding:10px 14px;
  border-radius:999px;box-shadow:0 10px 24px rgba(200,30,30,.34);
  transform:rotate(-7deg) scale(.6);opacity:0;
  animation:stamp .5s var(--ease) 1.1s forwards}
@keyframes stamp{to{transform:rotate(-7deg) scale(1);opacity:1}}
/* The supplied bottle flat has an opaque white background, so it cannot float
   over the panel without cutting a white block through the ingredient rows.
   It is therefore given its own filing card and pushed far enough left that it
   overlaps only the panel's 2px rule and its 18px of padding - never a
   character of text. */
.sfp__bottle{position:absolute;left:-126px;bottom:-34px;z-index:4;width:140px;
  background:#fff;border:2px solid var(--ink);border-radius:18px 18px 0 0;
  padding:8px 8px 0;box-shadow:0 16px 34px rgba(23,17,15,.2);
  animation:rise-b .8s var(--ease) .3s backwards}
@keyframes rise-b{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.sfp__bottle img{width:100%;height:auto}

.answer{background:#fff;padding:20px 22px;margin:0 0 20px;position:relative;
  border-radius:18px 18px 0 0;box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.answer::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--grad)}
.answer__label{display:block;font-family:var(--ff-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:9px}
.answer p{margin:0;font-size:1.02rem;line-height:1.62;color:var(--ink-2)}
.hero__btns{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 22px}
.hero__pills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.pill{font-family:var(--ff-mono);font-size:11.8px;padding:8px 14px;color:var(--ink-2);
  background:#fff;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);
  display:inline-flex;gap:8px;align-items:center;
  transition:transform var(--hover) var(--ease),box-shadow var(--hover) var(--ease)}
.pill b{color:var(--ink);font-weight:600}
.pill:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--accent-line),var(--shadow)}
.hero__ticks{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.hero__ticks li{position:relative;padding-left:27px;font-size:.97rem;color:var(--ink-2);
  line-height:1.5}
.hero__ticks li::before{content:"";position:absolute;left:0;top:.36em;width:15px;height:15px;
  border-radius:50%;background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent-line)}
.hero__ticks li::after{content:"";position:absolute;left:5px;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
.hero__lotwrap{margin:0}
.lotchip{display:inline-flex;gap:8px;align-items:center;font-family:var(--ff-mono);
  font-size:11.8px;color:var(--ink-3);background:#fff;padding:8px 14px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line)}
.lotchip b{color:var(--accent-strong)}
.lotchip a{color:var(--accent);text-decoration:none}
.lotchip a:hover{text-decoration:underline}

.trio{display:grid;gap:16px;margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.trio__cell{display:flex;flex-direction:column;gap:9px}
.trio__cell small{font-family:var(--ff-mono);font-size:11.2px;color:var(--ink-3);line-height:1.55}
.trio__cell small a{color:var(--accent);text-decoration:none}
.trio__cell small a:hover{text-decoration:underline}
.trio__seals{display:flex;gap:9px;align-items:center}
.trio__seals img{width:42px;height:42px;object-fit:contain}
.trio__score{display:flex;align-items:baseline;gap:10px}
.trio__score b{font-family:var(--ff-display);font-size:1.6rem;color:var(--ink);line-height:1}
.trio__score .stars{font-family:var(--ff-mono);font-size:11.4px;color:var(--ink-3)}
.pay{max-width:190px}
.chip-light{background:var(--dark);color:var(--on-dark);font-family:var(--ff-mono);
  padding:7px 13px;font-size:11.4px;border-radius:999px}
.chip-light b{color:var(--amber-bright);font-weight:600}

/* -- the moving fact marquee under the hero ----------------------------- */
.mq{position:relative;overflow:hidden;background:var(--dark);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;
  pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--dark),transparent)}
.mq::after{right:0;background:linear-gradient(270deg,var(--dark),transparent)}
.mq__track{display:flex;width:max-content;animation:mqmove 42s linear infinite;
  will-change:transform}
.mq:hover .mq__track{animation-play-state:paused}
.mq__item{display:inline-flex;align-items:center;gap:10px;padding:0 30px;
  font-family:var(--ff-mono);font-size:13px;color:var(--on-dark-2);white-space:nowrap}
.mq__item b{color:var(--accent-bright);font-weight:600}
.mq__item i{width:5px;height:5px;border-radius:50%;background:var(--amber-bright);
  flex:0 0 auto;font-style:normal}
@keyframes mqmove{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.progress{background:linear-gradient(90deg,#C81E1E,#F0B840,#C81E1E);background-size:200% 100%;
  animation:progslide 4s linear infinite}
@keyframes progslide{to{background-position:200% 0}}

/* ------------------------------------------------------------ desktop ----- */
@media (min-width:1000px){
  .hero__grid{display:grid;grid-template-columns:minmax(0,5.6fr) minmax(0,6.4fr);
    column-gap:62px;align-items:start;padding:52px 0 56px}
  .hero__copy{grid-column:1}
  .hero__stage{grid-column:2;position:sticky;top:98px;align-self:start;padding-left:34px}
  .trio{grid-column:1 / -1;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
}
@media (max-width:999px){
  .hero__grid{display:flex;flex-direction:column}
  .hero__stage{order:2;margin:10px 0 26px;padding-left:44px}
  .eyebrow{order:0}
  .hero h1{order:1;font-size:clamp(1.9rem,1.2rem + 4.2vw,2.5rem)}
  .sfp__bottle{left:auto;right:-10px;bottom:-56px;width:104px}
  .sfp__stamp{right:-8px;top:-14px;font-size:10.6px;padding:8px 12px}
  .hero__btns .btn{width:100%}
  .nav,.hdr__cta{display:none}
  .burger{display:flex}
  .strip .only-wide,.strip .sep{display:none}
  .strip .wrap{gap:4px 14px}
  .trio{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .sfp__stamp{opacity:1;transform:rotate(-7deg)}
}


/* ---------------------------------------------- hero bottle, mid widths --- */
@media (max-width:1180px) and (min-width:861px){
  .sfp__bottle{left:-96px;width:116px}
}
@media (max-width:860px) and (min-width:641px){
  .sfp__bottle{left:auto;right:-14px;bottom:-60px;width:124px}
}

/* ================ Goglycoharmony — site CSS (below the hero) ============== */
main{display:block}
/* ---- section rhythm: a graduated rule with a running mono counter ------- */
.sec{padding:60px 0;position:relative;counter-increment:secn}
.sec::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;
  background-image:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 22px);
  opacity:.75;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0 62%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0 62%,transparent 100%)}
.sec.anchor > .wrap{position:relative}
.sec.anchor > .wrap::before{content:counter(secn,decimal-leading-zero);
  position:absolute;right:0;top:-46px;font-family:var(--ff-mono);font-size:11.4px;
  letter-spacing:.2em;color:var(--ink-3);pointer-events:none}
body{counter-reset:secn}
.sec--tight{padding:42px 0}
.sec--tint{background:var(--bg-3)}
.sec--paper + .sec--paper{padding-top:26px}
.sec--dark{background:#000;color:var(--on-dark)}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark a{color:var(--accent)}
.sec--line{border-top:1px solid var(--line)}
.sec__head{max-width:var(--mid);margin:0 auto 26px}
.sec--w-text .sec__head{max-width:var(--text)}
.sec--w-full .sec__head{max-width:none}
.sec--w-packs .sec__head{max-width:1120px}
.sec--w-full .prose--wide{max-width:var(--text);margin-inline:0}
.sec--w-full .revsum{max-width:none}
.sec--w-full .packs__foot{text-align:left;margin-inline:0}
.sec--w-text .prose--wide{max-width:var(--text)}
.sec__head--center{text-align:center}
.sec__head p{color:var(--ink-2);font-size:17.5px;margin-bottom:0}
.kicker{display:block;font-family:var(--ff-body);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:10px}
.sec--dark .kicker{color:var(--accent-bright)}
.prose{max-width:var(--text);margin-inline:auto}
.prose--wide{max-width:var(--mid)}
.prose p,.prose ul,.prose ol{color:var(--ink-2);font-size:17px}
.prose li{margin-bottom:.45em}
.prose h3{margin-top:1.5em;color:var(--ink)}
.prose strong{color:var(--ink)}
.lede{font-size:19px;color:var(--ink-2)}

/* --- trust strip --- */
.trust{background:var(--bg);border-block:1px solid var(--line);padding:20px 0}
.trust__row{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap}
.trust figure{margin:0;text-align:center;width:104px}
.trust img{width:56px;height:56px;margin:0 auto 6px;object-fit:contain}
.trust figcaption{font-size:11.5px;line-height:1.35;color:var(--ink-3);font-weight:600}

/* --- promo / stats dark bands --- */
.band{display:grid;gap:22px;align-items:center}
@media(min-width:880px){.band{grid-template-columns:1.35fr auto}}
.band__txt h2,.band__txt p{margin-bottom:8px}
.band__txt p{color:var(--ink-2);margin-bottom:0}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;text-align:center}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat b{display:block;font-family:var(--ff-display);font-size:clamp(1.9rem,1.2rem+2vw,2.7rem);color:#fff;line-height:1.05}
.stat span{display:block;font-size:13.5px;color:var(--on-dark);margin-top:6px;line-height:1.35}

/* --- cards --- */
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr 1fr}
@media(min-width:700px){.grid--2{grid-template-columns:1fr 1fr}.grid--3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}
.card{background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;display:flex;flex-direction:column;min-width:200px;
  transition:transform 160ms var(--ease),border-color 160ms var(--ease),background 160ms var(--ease)}
.card:hover{border-color:var(--accent-line);background:var(--bg)}
.card--paper{background:var(--bg);border-color:var(--line)}
.sec--tint .card{border-color:var(--accent-line);background:rgba(255,255,255,.55)}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-2);font-size:15.8px;margin-bottom:0}
.card p + p{margin-top:.8em}
.card__n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-weight:700;font-size:14px;
  font-family:var(--ff-body);margin-bottom:15px;letter-spacing:.02em}
.card--link:hover,a.card:hover{transform:translateY(-2px);box-shadow:var(--lift)}
a.card{text-decoration:none;color:inherit}
a.card h3{color:var(--accent-strong)}
.sec--dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.sec--dark .card p{color:var(--on-dark)}

/* --- image + text split --- */
.split{display:grid;gap:30px;align-items:start}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:46px}
 .split--narrowimg{grid-template-columns:.8fr 1.2fr}}
.split__fig{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);transition:transform 160ms var(--ease),box-shadow 160ms var(--ease)}
.split__fig:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.split__fig img{margin-inline:auto;border-radius:12px}
.split__fig figcaption{font-size:13.5px;color:var(--ink-3);margin-top:12px;line-height:1.5}
.split__fig--dark{background:radial-gradient(120% 90% at 50% 10%,var(--deep),var(--deeper));border-color:var(--deep)}
.split__fig--dark figcaption{color:var(--on-dark)}

/* --- tables --- */
.tablewrap{max-width:var(--mid);margin:0 auto;overflow-x:auto;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg);box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px}
caption{text-align:left;padding:16px 20px 0;font-size:13.5px;color:var(--ink-3)}
th,td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--accent-tint);color:var(--ink);font-weight:700;font-size:13.5px;
  letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--accent-line)}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--bg)}
td b{color:var(--ink)}
.t-good{color:var(--good);font-weight:600}
.t-warn{color:var(--warn);font-weight:600}

/* --- steps --- */
.steps{max-width:var(--mid);margin-inline:auto;list-style:none;padding:0;counter-reset:s;display:grid;gap:14px}
.steps li{counter-increment:s;position:relative;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px 20px 70px;box-shadow:var(--shadow);
  transition:transform 160ms var(--ease),box-shadow 160ms var(--ease)}
.steps li:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.steps li::before{content:counter(s);position:absolute;left:20px;top:20px;width:34px;height:34px;
  border-radius:var(--radius-sm);background:var(--accent);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:14px;font-family:var(--ff-body)}
.steps h3{margin-bottom:5px;font-size:1.12rem}
.steps p{margin-bottom:0;color:var(--ink-2);font-size:15.8px}

/* --- callouts --- */
.callout{max-width:var(--mid);margin:24px auto;background:var(--accent-tint);
  border:1px solid var(--accent-line);border-left:4px solid var(--accent-bright);
  border-radius:var(--radius);padding:22px 24px}
.callout .note__h{display:block;font-family:var(--ff-display);font-weight:700;font-size:1.12rem;margin:0 0 6px;color:var(--accent-strong);line-height:1.2}
.callout p{margin-bottom:0;color:var(--ink-2);font-size:16.2px}
.note{max-width:var(--mid);margin:24px auto;background:var(--bg);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
.note .note__h{display:block;font-family:var(--ff-display);font-weight:700;font-size:1.08rem;margin:0 0 6px;color:var(--ink);line-height:1.2}
.note p:last-child{margin-bottom:0}

/* --- two-column pros/cons --- */
.pc{display:grid;gap:18px;max-width:var(--mid);margin-inline:auto}
@media(min-width:820px){.pc{grid-template-columns:1fr 1fr}}
.pc__col{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.pc__col h3{margin-bottom:12px}
.pc__col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pc__col li{position:relative;padding-left:28px;font-size:15.8px;color:var(--ink-2)}
.pc__col li::before{position:absolute;left:0;top:0;font-weight:700;font-size:17px}
.pc--pro li::before{content:"+";color:var(--good)}
.pc--con li::before{content:"−";color:var(--accent-strong)}

/* --- ingredient thumbs --- */
.ings{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.ings{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1050px){.ings{grid-template-columns:repeat(4,1fr)}}
.ing{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);transition:transform 160ms var(--ease),box-shadow 160ms var(--ease)}
.ing:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.ing__mark{width:46px;height:46px;border-radius:var(--radius);background:var(--accent-tint);
  border:1px solid var(--accent-line);display:grid;place-items:center;margin-bottom:13px}
.ing__mark svg{width:22px;height:22px}
.ing h3{font-size:1.02rem;margin-bottom:5px}
.ing p{font-size:14.6px;color:var(--ink-2);margin-bottom:0}
.ing__amt{display:inline-block;font-size:11.5px;font-weight:700;color:var(--accent-strong);
  background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:var(--radius-sm);
  padding:4px 10px;margin-bottom:10px;font-variant-numeric:tabular-nums;
  text-transform:uppercase;letter-spacing:.06em}

/* --- pack / add-to-cart panel --- */
.packs{display:grid;gap:20px;max-width:1120px;margin-inline:auto;align-items:end}
@media(min-width:900px){.packs{grid-template-columns:repeat(3,1fr)}}
.pack{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform 160ms var(--ease),box-shadow 160ms var(--ease)}
.pack:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.pack__band{background:var(--accent-tint);border-bottom:1px solid var(--accent-line);
  padding:13px 18px;display:flex;align-items:center;gap:10px;justify-content:space-between}
.pack__flag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-strong);background:var(--bg);border:1px solid var(--accent-line);border-radius:999px;padding:4px 11px}
.pack__name{font-family:var(--ff-display);font-weight:700;font-size:1.1rem}
.pack__supply{font-size:12.5px;color:var(--ink-3);font-weight:600}
.pack__shotbox{height:210px;display:grid;place-items:center;padding:16px;background:var(--bg)}
.pack__shotbox img{max-height:178px;width:auto;object-fit:contain}
.pack__body{padding:0 20px 20px;display:flex;flex-direction:column;flex:1}
.pack__per{font-family:var(--ff-display);font-size:2.35rem;font-weight:700;line-height:1;color:var(--ink)}
.pack__per small{font-family:var(--ff-body);font-size:13.5px;font-weight:600;color:var(--ink-3);margin-left:5px}
.pack__tot{margin:8px 0 14px;font-size:15px;color:var(--ink-2)}
.pack__tot del{color:var(--ink-3);margin-left:7px}
.pack__tot b{color:var(--ink)}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.pack__perks li{position:relative;padding-left:24px;font-size:14.6px;color:var(--ink-2)}
.pack__perks li::before{content:"";position:absolute;left:2px;top:7px;width:7px;height:4px;
  border-left:2px solid var(--accent-strong);border-bottom:2px solid var(--accent-strong);transform:rotate(-45deg)}
.pack__cards{margin-top:14px;display:flex;justify-content:center}
.pack__cards img{height:22px;width:auto;opacity:.85}
.pack--best{border-color:var(--accent)}
.pack--best .pack__band{background:linear-gradient(135deg,var(--accent-bright),var(--deep));border-bottom-color:transparent}
.pack--best .pack__flag{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.pack--best .pack__name{color:#fff}
.pack--best .pack__supply{color:var(--accent-line)}
@media(min-width:900px){.pack--best{transform:translateY(-16px)}.pack--best:hover{transform:translateY(-18px)}}
@media(max-width:899px){.pack--best{order:-1}}
.packs__foot{max-width:1120px;margin:22px auto 0;text-align:center;font-size:14.5px;color:var(--ink-3)}
.packs__foot a{color:var(--accent-strong)}

/* --- FAQ --- */
.faq{max-width:var(--mid);margin-inline:auto;display:grid;gap:11px}
.faq details{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 22px;position:relative;
  font-weight:600;font-size:16.5px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:25px;width:9px;height:9px;
  border-right:2px solid var(--accent-strong);border-bottom:2px solid var(--accent-strong);
  transform:rotate(45deg);transition:transform 280ms var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);top:28px}
.faq .faq__a{padding:0 22px 20px;color:var(--ink-2);font-size:16px}
.faq .faq__a p:last-child{margin-bottom:0}
.faqgroup{max-width:var(--mid);margin:0 auto 12px}
.faqgroup h3{margin:30px 0 12px}

/* --- reviews --- */
.revsum{display:grid;gap:22px;max-width:var(--mid);margin:0 auto 26px;align-items:center}
@media(min-width:820px){.revsum{grid-template-columns:auto 1fr}}
.revsum__score{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 30px;text-align:center;box-shadow:var(--shadow)}
.revsum__score b{display:block;font-family:var(--ff-display);font-size:3rem;line-height:1}
.revsum__score span{font-size:13.5px;color:var(--ink-3)}
.bars{display:grid;gap:7px}
.bar{display:grid;grid-template-columns:44px 1fr 44px;gap:10px;align-items:center;font-size:13.5px;color:var(--ink-2)}
.bar__track{display:block;height:10px;background:var(--accent-tint-2);border-radius:999px;overflow:hidden}
.bar__fill{display:block;height:100%;background:linear-gradient(90deg,var(--accent-bright),var(--deep));border-radius:999px}
.rev{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
.rev__top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:8px;flex-wrap:wrap}
.rev__who{font-weight:700;font-size:15.5px}
.rev__meta{font-size:12.5px;color:var(--ink-3)}
.rev p{margin:0;color:var(--ink-2);font-size:15.8px}

/* --- scorecard --- */
.score{max-width:var(--mid);margin-inline:auto;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.score__row{display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:11px 0;border-bottom:1px solid var(--line);align-items:center}
.score__row:last-of-type{border-bottom:0}
.score__row b{font-weight:600;font-size:15.8px}
.score__row > span{font-family:var(--ff-display);font-weight:700;font-size:1.15rem;color:var(--accent-strong)}
.score__row b .muted{display:block;font-family:var(--ff-body);font-weight:400;font-size:14.6px;
  color:var(--ink-3);margin-top:3px;line-height:1.5}
.score__total{margin-top:16px;padding-top:16px;border-top:2px solid var(--accent-line);
  display:flex;justify-content:space-between;align-items:baseline}
.score__total b{font-size:17px}
.score__total span{font-family:var(--ff-display);font-size:2rem;font-weight:700;color:var(--accent-strong)}

/* --- CTA panel --- */
.ctapanel{background:linear-gradient(145deg,var(--deep) 0%,var(--deeper) 100%);
  color:var(--on-dark);border-radius:0;padding:42px 30px;text-align:center;max-width:var(--mid);
  margin-inline:auto;position:relative;overflow:hidden}
.ctapanel h2{color:#fff;margin-bottom:10px}
.ctapanel p{color:var(--on-dark);max-width:58ch;margin:0 auto 20px}
.ctapanel .btn{margin:0 6px 10px}
.ctapanel small{display:block;color:var(--on-dark-2);font-size:13.5px;margin-top:8px}

/* --- byline / references --- */
.byline{max-width:var(--mid);margin-inline:auto;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);display:grid;gap:14px}
@media(min-width:760px){.byline{grid-template-columns:auto 1fr;align-items:start}}
.byline__mark{width:64px;height:64px;border-radius:16px;background:var(--accent-tint);
  border:1px solid var(--accent-line);display:grid;place-items:center}
.byline__mark img{width:40px;height:40px}
.byline p{margin-bottom:.6em;font-size:15.8px;color:var(--ink-2)}
.byline p:last-child{margin-bottom:0}
.refs{max-width:var(--mid);margin-inline:auto;padding-left:22px;font-size:14.8px;color:var(--ink-2)}
.refs li{margin-bottom:9px}
.refs a{word-break:break-word}

/* --- breadcrumb --- */
.crumbs{font-size:13.5px;color:var(--ink-3);padding:14px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.crumbs li::after{content:"/";margin-left:7px;color:var(--line)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--accent-strong);text-decoration:underline}

/* --- page hero (inner) --- */
.phero{background:linear-gradient(180deg,var(--accent-tint) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--accent-line);padding:6px 0 42px}
.phero h1{max-width:20ch;margin-top:14px}
.phero__lede{max-width:64ch;font-size:19px;color:var(--ink-2)}

/* --- keep reading --- */
.keep{display:grid;gap:16px}
@media(min-width:760px){.keep{grid-template-columns:repeat(3,1fr)}}
.keep a{display:block;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;text-decoration:none;box-shadow:var(--shadow);
  transition:transform 160ms var(--ease),box-shadow 160ms var(--ease)}
.keep a:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.keep b{display:block;font-family:var(--ff-display);font-size:1.08rem;color:var(--accent-strong);margin-bottom:5px}
.keep span{font-size:14.6px;color:var(--ink-2)}

/* --- blog --- */
.posts{display:grid;gap:20px}
@media(min-width:800px){.posts{grid-template-columns:repeat(2,1fr)}}
.post{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform 160ms var(--ease),box-shadow 160ms var(--ease)}
.post:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.post__meta{font-size:12.5px;color:var(--ink-3);margin-bottom:9px;letter-spacing:.03em}
.post h2{margin-bottom:8px;font-size:clamp(1.14rem,1.02rem + .5vw,1.4rem);line-height:1.25}
.post h2 a{color:var(--accent-strong);text-decoration:none}
.post p{font-size:15.8px;color:var(--ink-2);flex:1}
.toc{max-width:var(--text);margin:0 auto 30px;background:var(--accent-tint);border:1px solid var(--accent-line);
  border-radius:var(--radius);padding:20px 24px}
.toc b{display:block;font-family:var(--ff-display);margin-bottom:9px}
.toc ol{margin:0;padding-left:20px;font-size:15.5px}
.toc li{margin-bottom:5px}
.toc a{color:var(--accent-strong)}
.artmeta{max-width:var(--text);margin:0 auto 22px;font-size:13.5px;color:var(--ink-3);
  display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center}
.artmeta b{color:var(--ink-2);font-weight:600}

/* --- sticky buy bar --- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:99;background:rgba(253,248,244,.96);
  backdrop-filter:blur(12px) saturate(1.4);border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(22,21,43,.10);padding:10px 0;
  transform:translateY(112%);transition:transform 280ms var(--ease);visibility:hidden}
.buybar--on{transform:translateY(0);visibility:visible}
.buybar__in{display:flex;align-items:center;gap:14px}
.buybar__txt{flex:1;min-width:0}
.buybar__txt b{display:block;font-size:15px;line-height:1.25}
.buybar__txt span{font-size:12.8px;color:var(--ink-3)}
.buybar .btn{flex:0 0 auto}
@media(max-width:560px){.buybar__txt span{display:none}.buybar .btn{padding:13px 18px}}

/* --- footer --- */
.ftr{background:linear-gradient(162deg,var(--deep) 0%,var(--deeper) 100%);
  color:var(--on-dark);padding:54px 0 26px;margin-top:0}
.ftr__top{display:grid;gap:30px;margin-bottom:34px}
@media(min-width:760px){.ftr__top{grid-template-columns:1.45fr repeat(3,1fr)}}
.ftr__brand{display:flex;align-items:center;gap:11px;margin-bottom:14px;text-decoration:none;color:#fff}
.ftr__brand img{width:38px;height:38px;border-radius:10px}
.ftr__brand b{font-family:var(--ff-display);font-size:1.22rem;color:#fff;line-height:1.1;display:block}
.ftr__brand span{font-size:16px;letter-spacing:.01em;color:var(--on-dark);display:block;margin-top:2px}
.ftr p{font-size:16px;color:var(--on-dark);line-height:1.6}
.ftr h2,.ftr h3{font-family:var(--ff-body);font-size:15px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;margin:0 0 14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr a{color:var(--on-dark);text-decoration:none;font-size:16px}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr__contact{font-size:16px;line-height:1.7;color:var(--on-dark)}
.ftr__contact a{display:inline}
.ftr__strip{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;
  padding:22px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.ftr__strip img{height:30px;width:auto}
.ftr__seals{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ftr__seals img{height:46px;width:46px;object-fit:contain}
.ftr__legal{padding-top:22px;font-size:16px;color:var(--on-dark-2);line-height:1.7}
.ftr__legal p{font-size:16px;color:var(--on-dark-2);margin-bottom:.85em}
.ftr__legal strong{color:var(--accent-bright)}
.ftr__legal a{font-size:16px}

/* --- scroll reveal --- */
.js-reveal .reveal{opacity:0;transform:translateY(16px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity 560ms var(--ease),transform 560ms var(--ease)}

/* --- misc --- */
.center{text-align:center}
.mt{margin-top:26px}
.muted{color:var(--ink-3);font-size:14.5px}
.hr{border:0;border-top:1px solid var(--line);max-width:var(--mid);margin:44px auto}
.anchor{scroll-margin-top:96px}
.nowrap{white-space:nowrap}
.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--bg)}
.mobile-menu.is-open{display:block}
.mobile-menu ul{list-style:none;margin:0;padding:12px 0 18px;display:grid;gap:2px}
.mobile-menu a{display:block;padding:12px 4px;color:var(--ink-2);text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--line);font-size:16px}
.mobile-menu a:hover{color:var(--accent-strong)}
.mobile-menu .btn{margin-top:14px}
@media(min-width:1000px){.mobile-menu{display:none !important}}
@media(max-width:1180px) and (min-width:1000px){
  .nav a{padding:8px 7px;font-size:13.8px}
  .strip .only-wide{display:none}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important}
  .card:hover,.pack:hover,.steps li:hover,.ing:hover,.split__fig:hover,.keep a:hover,.post:hover{transform:none}
}

/* ===================== motion layer, below the hero ======================== */
/* staggered reveal: the script adds .is-in, children ride a delay variable */
.js-reveal .reveal{opacity:0;transform:translateY(20px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity 560ms var(--ease),transform 560ms var(--ease)}
.js-reveal .stagger > *{opacity:0;transform:translateY(18px)}
.stagger.is-in > *{opacity:1;transform:none;
  transition:opacity 520ms var(--ease),transform 520ms var(--ease)}
.stagger.is-in > *:nth-child(1){transition-delay:40ms}
.stagger.is-in > *:nth-child(2){transition-delay:110ms}
.stagger.is-in > *:nth-child(3){transition-delay:180ms}
.stagger.is-in > *:nth-child(4){transition-delay:250ms}
.stagger.is-in > *:nth-child(5){transition-delay:320ms}
.stagger.is-in > *:nth-child(6){transition-delay:390ms}
.stagger.is-in > *:nth-child(7){transition-delay:460ms}
.stagger.is-in > *:nth-child(n+8){transition-delay:520ms}

/* kicker rule that grows in */
.kicker{position:relative;padding-left:0}
.kicker::after{content:"";display:block;width:0;height:3px;border-radius:2px;margin-top:9px;
  background:linear-gradient(90deg,var(--accent-bright),var(--accent-bright));
  transition:width 700ms var(--ease) 120ms}
.reveal.is-in .kicker::after{width:54px}
.sec--dark .kicker::after{background:linear-gradient(90deg,var(--accent-bright),var(--accent-bright))}

/* section heads get a soft rise */
.js-reveal .sec__head{opacity:0;transform:translateY(14px)}
.reveal.is-in .sec__head{opacity:1;transform:none;
  transition:opacity 520ms var(--ease),transform 520ms var(--ease)}

/* count-up numbers */
.stat b{font-variant-numeric:tabular-nums}
.score__total span,.revsum__score b{font-variant-numeric:tabular-nums}

/* review bars wipe in */
.bar__fill{transform-origin:0 50%;transform:scaleX(0);
  transition:transform 900ms var(--ease)}
.is-in .bar__fill{transform:scaleX(1)}
.bar:nth-child(2) .bar__fill{transition-delay:90ms}
.bar:nth-child(3) .bar__fill{transition-delay:180ms}
.bar:nth-child(4) .bar__fill{transition-delay:270ms}
.bar:nth-child(5) .bar__fill{transition-delay:360ms}

/* table rows rise in sequence */
.js-reveal tbody tr{opacity:0;transform:translateY(10px)}
.is-in tbody tr{opacity:1;transform:none;
  transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.is-in tbody tr:nth-child(1){transition-delay:60ms}
.is-in tbody tr:nth-child(2){transition-delay:110ms}
.is-in tbody tr:nth-child(3){transition-delay:160ms}
.is-in tbody tr:nth-child(4){transition-delay:210ms}
.is-in tbody tr:nth-child(5){transition-delay:260ms}
.is-in tbody tr:nth-child(6){transition-delay:310ms}
.is-in tbody tr:nth-child(n+7){transition-delay:360ms}
tbody tr{transition:background 160ms var(--ease)}
tbody tr:hover{background:var(--accent-tint)}

/* buttons: arrow slides, sheen sweeps once on hover */
.btn__arrow{display:inline-block;transition:transform 160ms var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn.btn--primary{position:relative;overflow:hidden}
.btn.btn--primary::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);
  transform:translateX(-110%);transition:transform 620ms var(--ease)}
.btn.btn--primary:hover::after{transform:translateX(110%)}

/* numbered cards: the chip pops on hover */
.card__n{transition:transform 200ms var(--ease),box-shadow 200ms var(--ease)}
.card:hover .card__n{transform:translateY(-2px) rotate(-5deg);
  box-shadow:0 6px 16px rgba(58,44,147,.35)}
.card{position:relative;overflow:hidden}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--accent-bright),var(--accent-bright));
  transform:scaleX(0);transform-origin:0 50%;transition:transform 280ms var(--ease)}
.card:hover::after{transform:scaleX(1)}

/* steps: the number chip fills, a rail connects them */
.steps{position:relative}
.steps li{transition:transform 160ms var(--ease),box-shadow 160ms var(--ease),border-color 160ms var(--ease)}
.steps li:hover{border-color:var(--accent-line)}
.steps li::after{content:"";position:absolute;left:36px;bottom:-14px;height:14px;width:2px;
  background:linear-gradient(180deg,var(--accent-line),rgba(218,212,241,0));border-radius:2px}
.steps li:last-child::after{display:none}
.steps li::before{transition:transform 200ms var(--ease),box-shadow 200ms var(--ease)}
.steps li:hover::before{transform:scale(1.08);box-shadow:0 6px 16px rgba(224,168,60,.32)}

/* ingredient tiles: icon draws itself, tile tilts a touch */
.ing{position:relative;overflow:hidden}
.ing__mark svg path,.ing__mark svg circle{stroke-dasharray:90;stroke-dashoffset:90;
  transition:stroke-dashoffset 900ms var(--ease)}
.is-in .ing__mark svg path,.is-in .ing__mark svg circle{stroke-dashoffset:0}
.ing:hover .ing__mark{background:var(--accent);border-color:var(--accent)}
.ing:hover .ing__mark svg path,.ing:hover .ing__mark svg circle{stroke:var(--bg-2)}
.ing__mark{transition:background 200ms var(--ease),border-color 200ms var(--ease)}
.ing__amt{transition:background 200ms var(--ease),color 200ms var(--ease)}
.ing:hover .ing__amt{background:var(--accent-tint);color:var(--accent-strong)}

/* pack cards: best value carries a real gradient border, no mask tricks */
.pack--best{position:relative;border:0;border-radius:var(--radius);
  box-shadow:0 2px 6px rgba(23,17,15,.09),0 24px 48px rgba(23,17,15,.2)}
.pack--best .pack__band{border-radius:calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0}
.pack__flag{position:relative;overflow:hidden}
.pack--best .pack__flag::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-120%);animation:flagshine 5.5s var(--ease) infinite}
@keyframes flagshine{0%,72%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}
.pack__shotbox img{transition:transform 320ms var(--ease)}
.pack:hover .pack__shotbox img{transform:translateY(-6px) scale(1.04)}
.pack__per{transition:color 200ms var(--ease)}
.pack:hover .pack__per{color:var(--accent-strong)}

/* FAQ: smooth height without measuring, plus a soft open tint */
.faq details{transition:box-shadow 200ms var(--ease),border-color 200ms var(--ease)}
.faq details[open]{border-color:var(--accent-line);box-shadow:var(--lift)}
.faq summary{transition:color 160ms var(--ease),background 160ms var(--ease)}
.faq summary:hover{color:var(--accent-strong);background:var(--accent-tint)}
.faq .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms var(--ease)}
.faq details[open] .faq__a{grid-template-rows:1fr}
.faq .faq__a > div{overflow:hidden;min-height:0}

/* reviews: stars settle in, cards lift */
.rev{transition:transform 160ms var(--ease),box-shadow 160ms var(--ease)}
.rev:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.revsum__score b{display:block}

/* scorecard rows sweep a tint as they enter */
.score__row{transition:background 200ms var(--ease),padding-left 200ms var(--ease)}
.score__row:hover{background:var(--accent-tint);padding-left:10px}

/* dark band gets a slow aurora so it is never a flat rectangle */
.sec--dark{position:relative;overflow:hidden}
.sec--dark::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:120%;aspect-ratio:2/1;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(180,69,26,.30),transparent 70%);
  animation:aurora 16s var(--ease) infinite}
.sec--dark::after{content:"";position:absolute;right:-6%;top:-30%;width:46%;aspect-ratio:1;
  pointer-events:none;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(217,154,22,.18),transparent 68%);
  animation:aurora2 21s var(--ease) infinite}
@keyframes aurora{0%,100%{transform:translate(-4%,0) scale(1);opacity:.55}
  50%{transform:translate(6%,-6%) scale(1.14);opacity:.8}}
@keyframes aurora2{0%,100%{transform:translate(0,0) scale(1);opacity:.45}
  50%{transform:translate(-8%,10%) scale(1.2);opacity:.7}}
.sec--dark .wrap{position:relative;z-index:1}

/* stat tiles */
.stat{position:relative;padding:18px 10px;border-radius:var(--radius);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  transition:transform 200ms var(--ease),background 200ms var(--ease)}
.stat:hover{transform:translateY(-3px);background:rgba(255,255,255,.09)}

/* callout and note get a left rail that grows */
.note,.callout{position:relative;overflow:hidden}
.note::after,.callout::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  transform:scaleY(0);transform-origin:50% 0;transition:transform 620ms var(--ease)}
.note::after{background:var(--accent-bright)}
.callout::after{background:var(--accent-bright)}
.reveal.is-in .note::after,.reveal.is-in .callout::after{transform:scaleY(1)}

/* keep-reading cards get a directional arrow */
.keep a{position:relative}
.keep a::after{content:"\2192";position:absolute;right:20px;bottom:18px;color:var(--accent-strong);
  font-size:17px;opacity:0;transform:translateX(-6px);
  transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
.keep a:hover::after{opacity:1;transform:translateX(0)}

/* split figure image breathes on hover */
.split__fig img{transition:transform 420ms var(--ease)}
.split__fig:hover img{transform:scale(1.03)}

/* trust strip seals settle in one after another */
.trust figure{transition:transform 200ms var(--ease)}
.trust figure:hover{transform:translateY(-3px)}
.js-reveal .trust figure{opacity:0;transform:translateY(12px)}
.trust.is-in figure{opacity:1;transform:none;
  transition:opacity 460ms var(--ease),transform 460ms var(--ease)}
.trust.is-in figure:nth-child(1){transition-delay:0ms}
.trust.is-in figure:nth-child(2){transition-delay:70ms}
.trust.is-in figure:nth-child(3){transition-delay:140ms}
.trust.is-in figure:nth-child(4){transition-delay:210ms}
.trust.is-in figure:nth-child(5){transition-delay:280ms}
.trust.is-in figure:nth-child(6){transition-delay:350ms}
.trust.is-in figure:nth-child(7){transition-delay:420ms}

/* back-to-top */
.totop{position:fixed;right:18px;bottom:88px;z-index:98;width:44px;height:44px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);box-shadow:var(--lift);cursor:pointer;
  display:grid;place-items:center;opacity:0;transform:translateY(10px);visibility:hidden;
  transition:opacity 280ms var(--ease),transform 280ms var(--ease),visibility 280ms}
.totop--on{opacity:1;transform:none;visibility:visible}
.totop:hover{background:var(--accent-tint)}
.totop svg{width:17px;height:17px;stroke:var(--accent-strong);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
  .js-reveal .stagger > *,.js-reveal .sec__head,.js-reveal tbody tr,.js-reveal .trust figure{
    opacity:1 !important;transform:none !important}
  .bar__fill{transform:scaleX(1) !important}
  .ing__mark svg path,.ing__mark svg circle{stroke-dashoffset:0 !important}
  .kicker::after{width:54px}
  .sec--dark::before,.sec--dark::after{animation:none !important}
  .pack--best .pack__flag::after{display:none}
  .btn.btn--primary::after{display:none}
  .card:hover::after{transform:scaleX(0)}
  .faq .faq__a{grid-template-rows:1fr}
  .faq details:not([open]) .faq__a{grid-template-rows:0fr}
}

/* ---------------- dose comparison chart (dataviz rules) ------------------- */
.dosechart{margin:0 0 26px;max-width:900px}
.dosechart__in{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 14px;box-shadow:var(--shadow);overflow-x:auto}
.dosechart svg{width:100%;min-width:560px;height:auto;display:block;overflow:visible}
.dc__grid{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.dc__tick{font-family:var(--ff-body);font-size:12px;fill:var(--ink-3);font-variant-numeric:tabular-nums}
.dc__cat{font-family:var(--ff-body);font-size:13.5px;fill:var(--ink-2)}
.dc__val{font-family:var(--ff-body);font-size:13.5px;font-variant-numeric:tabular-nums}
.dc__bar{transform-origin:0 50%;transition:opacity 160ms var(--ease)}
.js-reveal .dc__bar{transform:scaleX(0)}
.is-in .dc__bar{transform:scaleX(1);transition:transform 1000ms var(--ease)}
.is-in .dc__row:nth-child(2) .dc__bar{transition-delay:90ms}
.is-in .dc__row:nth-child(3) .dc__bar{transition-delay:180ms}
.is-in .dc__row:nth-child(4) .dc__bar{transition-delay:270ms}
.is-in .dc__row:nth-child(5) .dc__bar{transition-delay:360ms}
.is-in .dc__row:nth-child(6) .dc__bar{transition-delay:450ms}
.is-in .dc__row:nth-child(7) .dc__bar{transition-delay:540ms}
.is-in .dc__row:nth-child(8) .dc__bar{transition-delay:630ms}
.js-reveal .dc__val{opacity:0}
.is-in .dc__val{opacity:1;transition:opacity 420ms var(--ease) 820ms}
.dc__row:hover .dc__bar{opacity:.82}
.dosechart__in:hover .dc__row:not(:hover) .dc__bar{opacity:.55}
.dc__legend{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin:14px 0 0;
  font-size:13.5px;color:var(--ink-2)}
.dc__legend span{display:inline-flex;align-items:center;gap:8px}
.dc__legend i{width:12px;height:12px;border-radius:3px;display:inline-block;flex:0 0 auto}
.dc__unit{margin-left:auto;color:var(--ink-3);font-size:12.5px}
.dosechart figcaption{font-size:13.5px;color:var(--ink-3);line-height:1.55;margin-top:12px;
  max-width:72ch}
@media (prefers-reduced-motion:reduce){
  .js-reveal .dc__bar{transform:scaleX(1)}
  .js-reveal .dc__val{opacity:1}
}


/* gold rule under section heads, card-led look */
.sec__head h2{position:relative}
.dosechart__in{background:var(--bg)}
.dc__grid{stroke:var(--line)}
.trust{background:transparent;border-block:0;padding:8px 0 26px}
.trust__row{background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:16px 26px;box-shadow:var(--shadow);gap:22px}
@media(max-width:820px){.trust__row{border-radius:24px;padding:18px}}
.split__fig{background:var(--bg)}
.split__fig--dark{background:linear-gradient(150deg,var(--deep),var(--deeper));
  border-color:var(--deep)}
.split__fig--dark figcaption{color:var(--on-dark)}
.phero{background:
  radial-gradient(640px 380px at 86% 0%, rgba(184,18,25,.10), transparent 62%),
  linear-gradient(180deg,var(--accent-tint) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);padding:6px 0 44px}
.answer::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;
  border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--accent-bright),var(--accent))}
.answer{position:relative;border-left:1px solid var(--accent-line)}
.pack__flag{background:var(--bg);border:1px solid var(--accent-line);color:var(--accent-strong)}
.pack__band{background:var(--accent-tint);border-bottom:1px solid var(--accent-line)}
.revsum__score b{color:var(--accent-strong)}
.score__row > span{color:var(--accent-strong)}
.score__total span{color:var(--accent-strong)}
.dc__ref{stroke:var(--accent-strong);stroke-width:1.5;stroke-dasharray:5 4}
.dc__tick--ref{fill:var(--accent-strong);font-weight:700}
.dc__refkey{width:14px;height:0;border-top:2px dashed var(--accent-strong);border-radius:0}

.pack__shotbox{border-radius:14px;overflow:hidden;margin:14px 14px 0;padding:10px;
  background:var(--bg)}
.pack__shotbox img{max-height:170px;border-radius:10px}
.pack--best .pack__shotbox{background:var(--accent-tint)}
/* ===== DNA rows 3, 6, 8: graph-paper page, glass cards, progress rail ===== */
main{counter-reset:chap;display:block;position:relative;z-index:1}
.sec{padding:66px 0;background:transparent;color:var(--ink-2)}
.sec--tight{padding:46px 0}
.sec--paper{background:rgba(255,255,255,.66);backdrop-filter:blur(2px);
  border-block:1px solid var(--line)}
.sec--tint{background:var(--accent-tint);border-block:1px solid var(--accent-line)}
.sec--line{border-top:1px solid var(--line)}
.sec--dark{background:linear-gradient(160deg,var(--deep) 0%,var(--deeper) 100%);color:var(--on-dark)}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark a{color:var(--accent-bright)}
.sec--dark .kicker{color:var(--accent-bright)}
.sec--dark .sec__head p{color:var(--on-dark)}
.sec--dark .muted{color:var(--on-dark-2)}

/* sticky left-edge section progress rail */
.railnav{display:none}
@media(min-width:1280px){
  .railnav{display:block;position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:90}
  .railnav ol{list-style:none;margin:0;padding:0;display:grid;gap:13px}
  .railnav a{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink-3);
    font-size:11.5px;font-weight:500;line-height:1.1}
  .railnav i{width:9px;height:9px;border-radius:999px;background:var(--accent-line);flex:0 0 auto;
    transition:transform 220ms var(--ease),background 220ms var(--ease)}
  .railnav span{opacity:0;transform:translateX(-5px);white-space:nowrap;
    transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
  .railnav a:hover span,.railnav a:focus-visible span{opacity:1;transform:none}
  .railnav a:hover i{background:var(--accent)}
  .railnav a[aria-current="true"] i{background:var(--grad);transform:scale(1.55)}
  .railnav a[aria-current="true"]{color:var(--accent-strong);font-weight:600}
  .railnav a[aria-current="true"] span{opacity:1;transform:none}
}

/* glass cards */
.card{background:var(--glass);backdrop-filter:blur(12px) saturate(1.25);border:0;
  border-radius:var(--radius);padding:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),
  var(--shadow);transition:transform 200ms var(--ease),box-shadow 200ms var(--ease)}
.card::after{display:none}
.card:hover{background:rgba(255,255,255,.88);transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),var(--lift)}
.sec--paper .card,.sec--tint .card{background:rgba(255,255,255,.82)}
.card--paper{background:rgba(255,255,255,.86)}
.card__n{border-radius:12px;background:var(--grad);color:#fff;font-family:var(--ff-display);
  font-weight:700;font-size:.98rem;box-shadow:0 4px 12px rgba(15,118,110,.3)}
.card:hover .card__n{transform:translateY(-2px) rotate(0)}
.sec--dark .card{background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(220,239,238,.16)}
.sec--dark .card p{color:var(--on-dark)}
.sec--dark .card h3{color:#fff}

/* surfaces that follow the same glass language */
.steps li{background:var(--glass);backdrop-filter:blur(12px);border:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow);padding:22px 24px 22px 64px}
.steps li::before{left:20px;top:22px;border-radius:12px;background:var(--grad);color:#fff;
  font-family:var(--ff-display);font-weight:700}
.steps li:hover::before{box-shadow:0 6px 16px rgba(15,118,110,.36)}
.steps li::after{left:36px;background:var(--accent-line)}
.note{background:rgba(255,255,255,.8);backdrop-filter:blur(10px);border:0;
  border-left:4px solid var(--ink);border-radius:var(--radius-sm);box-shadow:var(--shadow);
  padding:22px 24px}
.note::after{display:none}
.callout{background:var(--accent-tint);border:0;border-left:4px solid var(--accent);
  border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:22px 24px}
.callout::after{display:none}
.callout .note__h,.note .note__h{font-family:var(--ff-display);font-weight:700;
  font-size:1.16rem;letter-spacing:-.025em}
.callout .note__h{color:var(--accent-strong)}
.note .note__h{color:var(--ink)}
.pc__col{background:var(--glass);backdrop-filter:blur(12px);border:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow)}
.pc--pro li::before{color:var(--good)}
.pc--con li::before{content:"\2212";color:var(--warn)}
.tablewrap{border:0;border-radius:var(--radius);box-shadow:var(--shadow);background:#fff}
thead th{background:var(--deep);color:var(--accent-bright);border-bottom:0;
  font-family:var(--ff-body);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  font-size:12.2px}
tbody tr:nth-child(even){background:var(--bg)}
.t-good{color:var(--good)}
.t-warn{color:var(--warn)}
.kicker{font-family:var(--ff-body);font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  font-size:11.4px;color:var(--accent-strong)}
.kicker::after{background:var(--grad);height:3px;border-radius:2px}
.sec--dark .kicker::after{background:var(--grad-bright)}
.phero{background:transparent;border-bottom:0;padding:10px 0 34px}
.phero h1{max-width:19ch;margin-top:12px}
.phero__lede{max-width:64ch;font-size:19px;color:var(--ink-2)}
.crumbs{color:var(--ink-3);padding:16px 0 0}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--accent-strong)}
.trust{background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
  border-block:1px solid var(--line);padding:22px 0}
.sec--dark::before{background:radial-gradient(closest-side,rgba(45,212,191,.2),transparent 70%)}
.sec--dark::after{background:radial-gradient(closest-side,rgba(56,189,248,.15),transparent 68%)}
.stat{background:rgba(255,255,255,.07);border:1px solid rgba(220,239,238,.14);
  border-radius:var(--radius-sm)}
.stat:hover{background:rgba(255,255,255,.13)}
.stat b{font-family:var(--ff-display);font-weight:700;
  font-size:clamp(2rem,1.3rem + 2.1vw,2.9rem);letter-spacing:-.035em;color:#fff}
.stat span{color:var(--on-dark)}
.band__txt p{color:var(--ink-2)}
.ctapanel{background:linear-gradient(150deg,var(--deep) 0%,var(--deeper) 100%);
  border-radius:var(--radius);color:var(--on-dark)}
.ctapanel h2{color:#fff}.ctapanel p{color:var(--on-dark)}.ctapanel small{color:var(--on-dark-2)}
.buybar{background:rgba(255,255,255,.93);backdrop-filter:saturate(1.3) blur(14px);
  border-top:1px solid var(--line);color:var(--ink-2)}
.buybar__txt b{color:var(--ink)}
.mobile-menu{background:#fff;border-top:1px solid var(--line)}
.mobile-menu a{color:var(--ink-2)}
.ftr{background:linear-gradient(168deg,var(--deep) 0%,var(--deeper) 100%);
  color:var(--on-dark);padding:54px 0 26px}
.ftr__brand img{border-radius:12px}
.ftr__brand b{font-family:var(--ff-display);font-weight:700;font-size:1.3rem;letter-spacing:-.03em}
.ftr h2,.ftr h3{color:#fff;font-weight:600}
.ftr p,.ftr a,.ftr__contact,.ftr__brand span{color:var(--on-dark)}
.ftr a:hover{color:var(--accent-bright)}
.ftr__strip{border-block:1px solid var(--line-dark)}
.ftr__legal,.ftr__legal p{color:var(--on-dark-2)}
.ftr__legal strong{color:var(--accent-bright)}
.hr{border-top:1px solid var(--line)}
.muted{color:var(--ink-3)}
.split__fig{background:rgba(255,255,255,.8);backdrop-filter:blur(10px);border:0;
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.split__fig--dark{background:linear-gradient(160deg,var(--deep),var(--deeper))}
.split__fig--dark figcaption{color:var(--on-dark)}
.keep a{background:var(--glass);backdrop-filter:blur(10px);border:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow)}
.keep b{font-family:var(--ff-display);font-weight:700;font-size:1.12rem;letter-spacing:-.025em}
.post{background:var(--glass);backdrop-filter:blur(10px);border:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow)}
.toc{background:var(--accent-tint);border:0;border-left:4px solid var(--accent);
  border-radius:var(--radius-sm)}
.toc b{font-family:var(--ff-display);font-weight:700;letter-spacing:-.025em}
.faq details{background:var(--glass);backdrop-filter:blur(10px);border:0;
  border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow)}
.faq details[open]{box-shadow:inset 0 0 0 1px var(--accent-line),var(--lift)}
.faq summary:hover{background:var(--accent-tint);color:var(--accent-strong)}
.rev{background:var(--glass);backdrop-filter:blur(10px);border:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow)}
.revsum__score{background:var(--glass);border:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow)}
.revsum__score b{font-family:var(--ff-display);font-weight:700;font-size:3.1rem;
  letter-spacing:-.04em;color:var(--ink)}
.bar__track{background:var(--accent-tint-2)}
.bar__fill{background:var(--grad)}
.score{background:var(--glass);backdrop-filter:blur(10px);border:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow)}
.score__row > span{font-family:var(--ff-display);font-weight:700;font-size:1.3rem;
  letter-spacing:-.03em;color:var(--accent-strong)}
.score__row b .muted{color:var(--ink-3);font-family:var(--ff-body)}
.score__row:hover{background:var(--accent-tint)}
.score__total{border-top:2px solid var(--accent-line)}
.score__total span{font-family:var(--ff-display);font-weight:700;font-size:2.3rem;
  letter-spacing:-.04em;color:var(--accent-strong)}
.byline{background:var(--glass);backdrop-filter:blur(10px);border:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow)}
.byline__mark{border-radius:16px;background:var(--accent-tint)}
.pack{background:var(--glass);backdrop-filter:blur(12px);border:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow)}
.pack__band{background:var(--accent-tint);border-bottom:1px solid var(--accent-line)}
.pack__flag{background:#fff;border:1px solid var(--accent-line);color:var(--accent-strong);
  border-radius:999px;padding:6px 13px;font-weight:600;letter-spacing:.08em}
.pack__name{font-family:var(--ff-display);font-weight:700;font-size:1.18rem;letter-spacing:-.03em}
.pack__per{font-family:var(--ff-display);font-weight:700;font-size:2.5rem;letter-spacing:-.04em}
.pack__per--noprice{font-family:var(--ff-body);font-size:17px;font-weight:600;line-height:1.5}
.pack__shotbox{background:#fff}
.pack--best{box-shadow:inset 0 0 0 2px var(--accent),var(--lift)}
.pack--best .pack__band{background:var(--grad);border-bottom-color:transparent}
.pack--best .pack__flag{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff}
.pack--best .pack__name{color:#fff}
.pack--best .pack__supply{color:rgba(255,255,255,.84)}
.dosechart{background:#fff;border:0;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px;margin:0}
.dosechart__in{background:transparent;border:0;box-shadow:none;padding:0;overflow-x:auto}
.dc__ref{stroke:var(--warn);stroke-width:2;stroke-dasharray:6 4}
.dc__tick--ref{fill:var(--warn);font-weight:700}
.dc__refkey{width:15px;height:0;border-top:2px dashed var(--warn);border-radius:0}
.dc__tile{background:linear-gradient(160deg,var(--deep),var(--deeper));color:var(--on-dark);
  border-radius:var(--radius);padding:24px;position:relative;overflow:hidden}
.dc__tile::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  border-radius:50%;background:radial-gradient(circle,rgba(45,212,191,.28),transparent 70%)}
.dc__tile-k{position:relative;z-index:1;display:block;font-size:11.4px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-bright)}
.dc__tile-v{position:relative;z-index:1;display:block;font-family:var(--ff-display);font-weight:700;
  font-size:3rem;line-height:1;letter-spacing:-.04em;color:#fff;margin:10px 0 12px}
.dc__tile p{position:relative;z-index:1;margin:0;font-size:15px;color:var(--on-dark);line-height:1.6}
.dosewrap{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);align-items:start;
  max-width:var(--mid);margin-inline:auto}
.dosewrap > *{min-width:0}
@media(min-width:1040px){.dosewrap{grid-template-columns:minmax(0,1fr) 296px}}
.dosewrap .dosechart{margin:0;max-width:none;min-width:0}
.dosechart figcaption{font-size:13.5px;color:var(--ink-3);margin-top:14px;line-height:1.55}
.blendlist{margin:6px 0 14px;padding-left:22px;font-size:15.8px;color:var(--ink-2)}
.blendlist li{margin-bottom:6px}
.blendlist b{color:var(--accent-strong);font-family:var(--ff-display);font-weight:700;
  margin-right:4px}
.sec--bleed{padding:0;background:var(--deep)}
.sec--bleed > .wrap{width:100%;max-width:none;padding:0;margin:0}
.bleed{display:grid;grid-template-columns:1fr;align-items:stretch}
@media(min-width:900px){.bleed{grid-template-columns:1fr 1fr;min-height:520px}
  .bleed--flip .bleed__fig{order:2}}
.bleed__fig{position:relative;overflow:hidden;background:var(--deeper);min-height:320px;margin:0}
.bleed__fig img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;
  transition:transform 620ms var(--ease)}
.sec--bleed:hover .bleed__fig img{transform:scale(1.035)}
.bleed__fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 22px 18px;
  font-size:13.5px;line-height:1.5;color:#EAF6F5;
  background:linear-gradient(to top,rgba(3,25,26,.94),rgba(3,25,26,.8) 48%,transparent)}
.bleed__txt{display:flex;flex-direction:column;justify-content:center;padding:52px 46px;
  background:#fff}
.bleed__txt .prose{max-width:56ch;margin-inline:0}
@media(min-width:1100px){.bleed:not(.bleed--flip) .bleed__txt{padding-left:46px}
  .bleed--flip .bleed__txt{padding-left:118px}}
.bleed__txt h2{margin-bottom:.4em}
@media(max-width:899px){.bleed__txt{padding:34px 20px}.bleed__fig{aspect-ratio:4/3;min-height:0}}
.qsplit{display:grid;gap:28px;align-items:start;max-width:var(--mid);margin:0 auto}
@media(min-width:900px){.qsplit{grid-template-columns:1fr 1fr;gap:34px}}
.qsplit .split__fig{margin:0}
.qsplit__txt{margin:0;max-width:none}
.qsplit__txt h3{margin-top:0}

/* ================= INTERACTION MODULES (DNA-independent) ================== */

/* 1 — ingredient flip cards */
.flips{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  max-width:var(--mid);margin-inline:auto}
.flip{perspective:1400px;background:none;border:0;padding:0;text-align:left;cursor:pointer;
  font:inherit;color:inherit;border-radius:var(--radius);min-height:236px}
.flip:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.flip__in{position:relative;width:100%;height:100%;min-height:236px;
  transition:transform 620ms var(--ease);transform-style:preserve-3d}
.flip[aria-pressed="true"] .flip__in{transform:rotateY(180deg)}
.flip__f,.flip__b{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:22px;border-radius:var(--radius);backface-visibility:hidden;
  -webkit-backface-visibility:hidden;overflow:hidden}
.flip__f{background:var(--glass);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow)}
.flip__b{background:linear-gradient(160deg,var(--deep),var(--deeper));color:var(--on-dark);
  transform:rotateY(180deg);box-shadow:var(--lift)}
.flip__mark{width:44px;height:44px;border-radius:12px;background:var(--accent-tint);
  display:grid;place-items:center;color:var(--accent-strong);margin-bottom:12px;flex:0 0 auto}
.flip__mark svg{width:21px;height:21px}
.flip__f h3{margin:0 0 6px;font-size:1.04rem}
.flip__cat{font-size:11.4px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-strong);margin-bottom:8px}
.flip__amt{margin-top:auto;font-family:var(--ff-display);font-weight:700;font-size:1.34rem;
  letter-spacing:-.03em;color:var(--ink)}
.flip__hint{font-size:11.6px;color:var(--ink-3);margin-top:6px}
.flip__b h3{color:#fff;font-size:1rem;margin:0 0 8px}
.flip__b p{font-size:14.2px;line-height:1.55;color:var(--on-dark);margin:0 0 10px}
.flip__b a{color:var(--accent-bright);font-size:13px;font-weight:600;margin-top:auto}
.flip__back{font-size:11.6px;color:var(--on-dark-2);margin-top:8px}
@media (prefers-reduced-motion:reduce){
  .flip__in{transition:none}
}

/* 2 — annotated label hotspots */
.anno{display:grid;gap:22px;max-width:var(--mid);margin-inline:auto}
@media(min-width:900px){.anno{grid-template-columns:1.25fr 1fr;align-items:start}}
.anno__fig{position:relative;margin:0;background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;overflow:hidden}
.anno__fig img{border-radius:12px}
.anno__dot{position:absolute;width:26px;height:26px;border-radius:999px;border:0;cursor:pointer;
  background:var(--grad);color:#fff;font-family:var(--ff-display);font-weight:700;font-size:12px;
  display:grid;place-items:center;transform:translate(-50%,-50%);z-index:2;
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 4px 12px rgba(12,27,26,.3);
  transition:transform 200ms var(--ease)}
.anno__dot::before{content:"";position:absolute;inset:-6px;border-radius:999px;
  border:2px solid var(--accent-bright);opacity:0;animation:annoping 2.8s var(--ease) infinite}
.anno__dot:nth-of-type(2)::before{animation-delay:.5s}
.anno__dot:nth-of-type(3)::before{animation-delay:1s}
.anno__dot:nth-of-type(4)::before{animation-delay:1.5s}
.anno__dot:nth-of-type(5)::before{animation-delay:2s}
@keyframes annoping{0%{transform:scale(.8);opacity:.9}70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}}
.anno__dot:hover,.anno__dot:focus-visible{transform:translate(-50%,-50%) scale(1.22)}
.anno__dot:focus-visible{outline:3px solid var(--accent-bright);outline-offset:3px}
.anno__dot[aria-expanded="true"]{background:var(--ink);transform:translate(-50%,-50%) scale(1.22)}
.anno__panel{background:var(--glass);backdrop-filter:blur(12px);border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow);padding:24px;
  align-self:start;position:relative;min-height:210px}
.anno__panel h3{margin:0 0 4px;font-size:1.1rem}
.anno__k{font-size:11.4px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-strong);display:block;margin-bottom:10px}
.anno__panel p{font-size:15.4px;line-height:1.6;color:var(--ink-2);margin:0 0 .8em}
.anno__panel p:last-child{margin-bottom:0}
.anno__empty{color:var(--ink-3);font-size:15px}
.anno__body{animation:annofade 320ms var(--ease)}
@keyframes annofade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .anno__dot::before{animation:none}.anno__body{animation:none}
}

/* 3 — label-lens tabs */
.lens{max-width:var(--mid);margin-inline:auto}
.lens__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.lens__tabs button{font:inherit;font-size:13.4px;font-weight:600;cursor:pointer;border:0;
  padding:10px 17px;border-radius:999px;background:#fff;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);transition:all 180ms var(--ease)}
.lens__tabs button:hover{box-shadow:inset 0 0 0 1px var(--accent-line);color:var(--accent-strong)}
.lens__tabs button[aria-selected="true"]{background:var(--grad);color:#fff;box-shadow:none}
.lens__tabs button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.lens__panel{background:var(--glass);backdrop-filter:blur(12px);border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow);padding:26px}
.lens__panel[hidden]{display:none}
.lens__grid{display:grid;gap:18px}
@media(min-width:760px){.lens__grid{grid-template-columns:auto 1fr;gap:24px;align-items:start}}
.lens__amt{font-family:var(--ff-display);font-weight:700;font-size:2.3rem;letter-spacing:-.04em;
  color:var(--accent-strong);line-height:1}
.lens__dv{font-size:13px;color:var(--ink-3);margin-top:4px}
.lens__panel h3{margin:0 0 8px;font-size:1.15rem}
.lens__panel p{font-size:15.6px;line-height:1.62;color:var(--ink-2);margin:0 0 .85em}
.lens__panel p:last-child{margin-bottom:0}

/* 4 — fit-check quiz */
.quiz{max-width:var(--text);margin-inline:auto;background:var(--glass);backdrop-filter:blur(12px);
  border-radius:var(--radius);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow);
  padding:28px}
.quiz__q{border:0;padding:0;margin:0 0 20px;min-width:0}
.quiz__q legend{font-weight:600;font-size:16px;color:var(--ink);padding:0;margin-bottom:10px}
.quiz__opts{display:flex;gap:9px;flex-wrap:wrap}
.quiz__opts label{cursor:pointer}
.quiz__opts input{position:absolute;opacity:0;width:0;height:0}
.quiz__opts span{display:inline-block;padding:9px 20px;border-radius:999px;font-size:14px;
  font-weight:600;background:#fff;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);
  transition:all 170ms var(--ease)}
.quiz__opts label:hover span{box-shadow:inset 0 0 0 1px var(--accent-line)}
.quiz__opts input:checked + span{background:var(--grad);color:#fff;box-shadow:none}
.quiz__opts input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.quiz__out{margin-top:6px;padding:20px 22px;border-radius:var(--radius-sm);
  background:var(--accent-tint);border-left:4px solid var(--accent);
  animation:annofade 340ms var(--ease)}
.quiz__out[hidden]{display:none}
.quiz__out--warn{background:#FDF1E7;border-left-color:var(--warn)}
.quiz__out b{display:block;font-family:var(--ff-display);font-weight:700;font-size:1.1rem;
  letter-spacing:-.025em;margin-bottom:6px;color:var(--ink)}
.quiz__out p{margin:0;font-size:15.4px;line-height:1.6;color:var(--ink-2)}
.quiz__prog{font-size:12.6px;color:var(--ink-3);margin:0 0 18px}

/* 5 — supply planner */
.planner{max-width:var(--mid);margin-inline:auto;background:var(--glass);
  backdrop-filter:blur(12px);border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),var(--shadow);padding:28px}
.planner__row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.planner__row button{font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:0;
  padding:11px 22px;border-radius:999px;background:#fff;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);transition:all 180ms var(--ease)}
.planner__row button:hover{box-shadow:inset 0 0 0 1px var(--accent-line);color:var(--accent-strong)}
.planner__row button[aria-pressed="true"]{background:var(--grad);color:#fff;box-shadow:none}
.planner__row button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.planner__out{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.planner__cell{background:#fff;border-radius:var(--radius-sm);padding:17px 18px;
  box-shadow:inset 0 0 0 1px var(--line)}
.planner__cell b{display:block;font-family:var(--ff-display);font-weight:700;font-size:1.85rem;
  letter-spacing:-.04em;color:var(--accent-strong);line-height:1.05}
.planner__cell span{display:block;font-size:12.6px;color:var(--ink-3);margin-top:5px;line-height:1.4}
.planner__note{margin:18px 0 0;font-size:14.6px;color:var(--ink-2)}
.planner__note b{color:var(--ink)}

/* 6 — supply calendar */
.cal{max-width:var(--mid);margin-inline:auto}
.cal__grid{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;margin-bottom:16px}
@media(max-width:560px){.cal__grid{grid-template-columns:repeat(6,1fr)}}
.cal__d{aspect-ratio:1;display:grid;place-items:center;border-radius:9px;font-size:11.6px;
  font-weight:600;background:#fff;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.cal__d--on{background:var(--accent-tint);color:var(--accent-strong);
  box-shadow:inset 0 0 0 1px var(--accent-line)}
.cal__d--end{background:var(--grad);color:#fff;box-shadow:none}
.cal__key{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:13.2px;color:var(--ink-3)}
.cal__key span{display:inline-flex;align-items:center;gap:7px}
.cal__key i{width:13px;height:13px;border-radius:4px;display:inline-block}

/* 7 — searchable FAQ */
.faqsearch{max-width:var(--mid);margin:0 auto 20px}
.faqsearch__in{position:relative}
.faqsearch input{width:100%;font:inherit;font-size:16px;padding:15px 18px 15px 46px;
  border-radius:999px;border:0;background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.faqsearch input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--accent),var(--shadow)}
.faqsearch input::placeholder{color:var(--ink-3)}
.faqsearch svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:var(--ink-3);pointer-events:none}
.faqsearch__count{margin:10px 2px 0;font-size:13.4px;color:var(--ink-3)}
.faq details[hidden]{display:none}
.faqgroup[hidden]{display:none}
.faq__none{background:var(--accent-tint);border-radius:var(--radius-sm);padding:22px;
  font-size:15.4px;color:var(--ink-2);max-width:var(--mid);margin-inline:auto}
.faq__none[hidden]{display:none}

/* 8 — card carousel */
.carousel{max-width:var(--wrap);margin-inline:auto;position:relative}
.carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 16px;
  scrollbar-width:thin}
@media(min-width:900px){.carousel__track{grid-auto-columns:minmax(300px,calc(33.333% - 11px))}}
.carousel__track > *{scroll-snap-align:start}
.carousel__nav{display:flex;gap:9px;align-items:center;justify-content:flex-end;margin-top:6px}
.carousel__nav button{width:42px;height:42px;border-radius:999px;border:0;cursor:pointer;
  background:#fff;color:var(--accent-strong);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);transition:all 180ms var(--ease)}
.carousel__nav button:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--accent),var(--lift);
  transform:translateY(-2px)}
.carousel__nav button:disabled{opacity:.34;cursor:default}
.carousel__nav button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.carousel__nav svg{width:18px;height:18px}
.carousel__dots{display:flex;gap:6px;margin-right:auto}
.carousel__dots i{width:7px;height:7px;border-radius:999px;background:var(--accent-line);
  transition:all 220ms var(--ease)}
.carousel__dots i.on{background:var(--accent);width:22px}

/* motion layer additions */
.tilt{transition:transform 260ms var(--ease)}
.count{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .tilt{transform:none !important}
  .carousel__track{scroll-behavior:auto}
}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- alternate badge row --------------------------------------------- */
.brow{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.brow__f{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 18px 18px;text-align:center;box-shadow:var(--shadow)}
.brow__f img{width:130px;height:auto;margin:0 auto 14px}
.brow__f figcaption{font-size:14.5px;line-height:1.5;color:var(--ink-3)}
@media(max-width:760px){.brow{grid-template-columns:1fr;gap:16px}}

/* --- annotated label: full-width figure, panel below ------------------- */
.anno{max-width:var(--wrap)}
@media(min-width:900px){
  .anno{grid-template-columns:1fr}
  .anno__fig{padding:16px}
  .anno__panel{min-height:150px}
}
.anno__dot{font-size:14px}
.anno__fig img{width:100%;height:auto}
.anno__fig picture{display:block}

/* --- flip cards: the inner wrapper is a span, so give it a box --------- */
.flip{display:block;width:100%}
.flip__in{display:block}
.flip__f,.flip__b{align-items:flex-start}
.flip__cat,.flip__amt,.flip__hint,.flip__back{display:block}
.flip__mark{display:grid;place-items:center}
.flip,.flip__in{min-height:318px}
.flip__b{overflow-y:auto;padding:20px}
.flip__b p{font-size:13.6px;line-height:1.52;margin-bottom:8px}
@media(max-width:520px){.flip,.flip__in{min-height:360px}}

/* --- annotated label on small screens: scroll it at a readable size ---- */
.anno__scroll{min-width:0}
.anno__swipe{display:none}
@media(max-width:820px){
  .anno__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;scrollbar-width:thin}
  .anno__fig{width:900px}
  .anno__swipe{display:block;margin:10px 0 0;font-size:13.4px;color:var(--ink-3)}
}

/* --- the missing-panel block (Site 8) --------------------------------- */
.nopanel{max-width:var(--mid);margin-inline:auto;background:#fff;padding:30px 30px 26px;
  box-shadow:inset 4px 0 0 var(--warn),0 0 0 1px var(--line),6px 6px 0 var(--accent-tint)}
.nopanel__mark{width:54px;height:54px;color:var(--warn);margin-bottom:16px}
.nopanel__mark svg{width:100%;height:100%}
.nopanel h3{margin:0 0 12px;font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem)}
.nopanel p{color:var(--ink-2);margin:0 0 .95em}
.nopanel p:last-child{margin-bottom:0}
.nopanel__rule{background:var(--accent-tint);padding:14px 16px;font-size:15.4px;
  box-shadow:inset 0 0 0 1px var(--accent-line)}
.nopanel__rule b{color:var(--ink)}
@media(max-width:620px){.nopanel{padding:22px 20px 20px}}

/* --- empty-track dose chart (Site 8) ---------------------------------- */
.dc__track{fill:none;stroke:var(--accent-line);stroke-width:1.5;stroke-dasharray:6 5}
.dc__tick{stroke:var(--accent-strong);stroke-width:2.5;stroke-linecap:round}
.dc__mk{font-family:var(--ff-body);font-size:12px;font-weight:700;fill:var(--accent-strong)}
.dc__none{font-family:var(--ff-body);font-size:12.5px;font-weight:600;fill:var(--warn);
  letter-spacing:.03em}
.dc__tickl{font-family:var(--ff-body);font-size:11.5px;fill:var(--ink-3)}
.dc__trackkey{width:22px;height:0;border-top:2px dashed var(--accent-line);display:inline-block;
  vertical-align:middle}
.dc__tickkey{width:3px;height:16px;background:var(--accent-strong);display:inline-block;
  vertical-align:middle}
.dc__mk--none{fill:var(--ink-3);font-weight:600;font-style:italic}

/* --- ingredient tiles + supplied-assets inventory (Site 8) ------------- */
.tile__h{margin:26px 0 14px;font-size:1.12rem;display:flex;align-items:center;gap:10px}
.tile__h::before{content:"";width:22px;height:3px;background:var(--accent)}
.tile__h--warn::before{background:var(--warn)}
.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.tile{margin:0;background:#fff;box-shadow:0 0 0 1px var(--line),4px 4px 0 var(--accent-tint);
  overflow:hidden}
.tile img{width:100%;height:auto}
.tile figcaption{padding:13px 14px 15px;display:grid;gap:5px}
.tile figcaption b{font-family:var(--ff-display);font-size:1.02rem;line-height:1.2}
.tile__tag{font-size:10.6px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.tile--yes{box-shadow:inset 3px 0 0 var(--accent),0 0 0 1px var(--line),4px 4px 0 var(--accent-tint)}
.tile--yes .tile__tag{color:var(--accent-strong)}
.tile--no{box-shadow:inset 3px 0 0 var(--warn),0 0 0 1px var(--line),4px 4px 0 #F6E4D8}
.tile--no .tile__tag{color:var(--warn)}
.tile__cap{font-size:13px;color:var(--ink-3);line-height:1.45}
.assets{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-bottom:22px}
.asset{margin:0;background:#fff;box-shadow:0 0 0 1px var(--line),4px 4px 0 var(--accent-tint)}
.asset__im{background:var(--accent-tint);display:grid;place-items:center;padding:16px;
  min-height:130px}
.asset__im img{width:100%;height:auto;max-height:130px;object-fit:contain}
.asset figcaption{padding:14px 16px 16px;display:grid;gap:6px}
.asset figcaption b{font-family:var(--ff-display);font-size:1.02rem}
.asset figcaption span{font-size:13.4px;color:var(--ink-3);line-height:1.5}
.wm2{max-width:var(--text);margin-inline:auto;text-align:center;display:grid;gap:18px;
  justify-items:center}
.wm2 img{width:min(360px,80%);height:auto}
.wm2 p{color:var(--ink-2);font-size:16.4px;margin:0}
.planner__lab{margin:0 0 9px;font-size:11.4px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.planner__lab span{text-transform:none;letter-spacing:0;font-weight:500;font-size:12.6px}
.planner__lab--warn{color:var(--warn);margin-top:20px}
.planner__row--dose button[aria-pressed="true"]{background:var(--accent-strong);color:#fff}
.planner__warn{display:block;margin-top:8px;font-size:13.4px;color:var(--warn);font-weight:600}
.dc__track{stroke:#C9D6CC}
.dc__grid{stroke:#E6DFD2;stroke-width:1}

/* --- the annotated panel here is a square graphic, so cap its width ---- */
.anno__fig{max-width:980px;margin-inline:auto}
@media(max-width:820px){.anno__fig{width:auto;max-width:620px}}
.anno__swipe{display:none !important}

/* --- two-bar dose chart (Site 9) -------------------------------------- */
.dc__bar--mine{fill:#1F4FA8}
.dc__bar--ref{fill:#FBBF24}
.dc__val2{font-family:var(--ff-body);font-size:12.4px;font-weight:700;fill:#1F4FA8}
.dc__val3{font-family:var(--ff-body);font-size:12px;font-weight:600;fill:#7A5400}
.dc__val3--none{fill:var(--warn);font-style:italic}
.dc__grid{stroke:#DDE3ED;stroke-width:1}
.dc__tickl{font-family:var(--ff-body);font-size:11.5px;fill:var(--ink-3)}
.dc__cat{font-family:var(--ff-display);font-size:16px;font-weight:700;fill:var(--ink);
  text-transform:uppercase;letter-spacing:.02em}

/* --- marketing gallery (Site 9) --------------------------------------- */
.gal{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.gcell{margin:0;background:#fff;border-radius:var(--radius-sm);overflow:hidden;
  box-shadow:0 0 0 1px var(--line),0 10px 26px rgba(19,26,36,.06)}
.gcell__im{background:var(--accent-tint);display:block;overflow:hidden;aspect-ratio:4/3}
.gcell__im img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.gcell{display:flex;flex-direction:column}
.gcell figcaption{flex:1;align-content:start}
.gcell figcaption{padding:13px 15px 15px;display:grid;gap:5px}
.gcell figcaption b{font-family:var(--ff-display);font-size:1.14rem;line-height:1.1;
  text-transform:uppercase;letter-spacing:.015em}
.gcell figcaption span{font-size:13.4px;color:var(--ink-3);line-height:1.5}
.exclist{margin:14px 0 18px;padding:0;list-style:none;display:grid;gap:6px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));font-size:13.6px;color:var(--ink-3)}
.exclist li{background:var(--accent-tint);padding:8px 12px;border-radius:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.6px}
.nopanel{border-radius:var(--radius)}

/* ------------------------------------------- capsule-count module --------- */
.caps{max-width:var(--mid);margin-inline:auto}
.caps__tabs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.caps__tabs button{font-family:var(--ff-display);font-weight:600;font-size:14.6px;
  padding:11px 20px;border:0;border-radius:999px;cursor:pointer;background:#fff;
  color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);
  transition:background var(--hover) var(--ease),color var(--hover) var(--ease),
  box-shadow var(--hover) var(--ease),transform var(--hover) var(--ease)}
.caps__tabs button:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--accent-line)}
.caps__tabs button[aria-selected="true"]{background:var(--grad);color:#fff;
  box-shadow:0 8px 20px rgba(109,40,168,.26)}
.caps__body{background:var(--deep);color:var(--on-dark);border-radius:var(--radius) 8px var(--radius) 8px;
  padding:34px 34px 30px;box-shadow:var(--lift);position:relative;overflow:hidden}
.caps__body::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 340px at 88% 8%,rgba(109,40,168,.5),transparent 62%)}
.caps__read{position:relative;z-index:1}
.caps__k{display:block;font-family:var(--ff-display);font-size:.82rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:8px}
.caps__v{display:block;font-family:var(--ff-display);font-weight:700;color:#fff;
  font-size:clamp(3.2rem,2rem + 5vw,5.6rem);line-height:.92;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums}
.caps__v--none{font-size:clamp(2.4rem,1.6rem + 3vw,3.8rem)}
.caps__sub{display:block;margin-top:12px;font-size:15.6px;line-height:1.55;
  color:var(--on-dark-2);max-width:60ch}
.caps__sub b{color:#fff}
.caps__vis{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin-top:24px;padding-top:22px;border-top:1px solid var(--line-dark)}
.caps__pill{width:13px;height:26px;border-radius:999px;flex:0 0 auto;
  background:linear-gradient(180deg,#fff 0 50%,var(--accent-bright) 50% 100%);
  animation:capsin .32s var(--ease) backwards}
.caps__pill--ghost{opacity:.42}
@keyframes capsin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.caps__more{font-family:var(--ff-display);font-weight:700;font-size:1.02rem;
  color:var(--accent-bright);margin-left:8px;letter-spacing:-.01em}
.caps__q{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;
  font-family:var(--ff-display);font-weight:700;color:var(--deep);background:var(--accent-bright)}
.caps__foot{max-width:var(--text);margin:18px auto 0;font-size:14.6px;line-height:1.6;
  color:var(--ink-3)}
@media (max-width:719px){
  .caps__body{padding:26px 22px 24px;border-radius:var(--radius-sm) 6px var(--radius-sm) 6px}
  .caps__pill{width:11px;height:22px}
}

/* ------------------------------------------ linear ratio dose chart ------- */
.rt__cat{font-family:var(--ff-display);font-size:14px;font-weight:700;fill:var(--ink);
  letter-spacing:-.01em}
.rt__track{fill:var(--deep)}
.rt__track--none{fill:none;stroke:var(--line-2);stroke-width:2;stroke-dasharray:6 5}
.rt__track--cap{fill:var(--deep)}
.rt__track--cau{fill:var(--accent-tint-2);stroke:var(--amber);stroke-width:1.5;
  stroke-dasharray:5 4}
.rt__mine{fill:var(--accent)}
.rt__mine--cap{fill:var(--accent)}
.rt__mine--cau{fill:var(--amber)}
.rt__edge{fill:#fff;opacity:.6}
.rt__ref{font-family:var(--ff-mono);font-size:11.6px;font-weight:400;fill:var(--ink-3)}
.rt__ref--none{fill:var(--warn);font-style:italic}
.rt__mult{font-family:var(--ff-mono);font-size:12px;fill:var(--ink-2)}
.rt__x{font-weight:700;fill:var(--accent)}
.rt__x--cap{font-weight:700;fill:var(--accent)}
.rt__x--cau{font-weight:700;fill:var(--amber)}
.rt__x--none{font-style:italic;fill:var(--ink-3)}
.rt__row{transform-origin:0 50%}
.rt__row .rt__mine{animation:rtgrow .9s var(--ease) backwards}
@keyframes rtgrow{from{transform:scaleX(0);transform-origin:0 50%}to{transform:none}}

/* ======================================================================== */
/* Site DNA 13 additions: card tabs, the horizontal ingredient rail, the    */
/* pinned label module, and the motion system used by every section.        */
/* ======================================================================== */

/* ---- cards become ruled slabs with a mono tab notched into the top ------ */
.card{position:relative}
.card::before{content:"";position:absolute;left:-1px;top:-1px;width:44px;height:3px;
  background:var(--accent);transition:width var(--ui) var(--ease)}
.card:hover::before{width:96px}

/* ---- the horizontal ingredient rail (structural: not a centred column) -- */
.rail{position:relative;margin-top:6px}
.rail__scroll{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x proximity;
  padding:0 0 18px;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch}
.rail__scroll::-webkit-scrollbar{height:6px}
.rail__scroll::-webkit-scrollbar-thumb{background:var(--line-2)}
.rail__cell{flex:0 0 232px;scroll-snap-align:start;padding:18px 20px 20px;
  border-left:1px solid var(--line);position:relative;
  transition:background var(--hover) var(--ease)}
.rail__cell:last-child{border-right:1px solid var(--line)}
.rail__cell:hover{background:var(--bg-2)}
.rail__n{display:block;font-family:var(--ff-mono);font-size:11px;letter-spacing:.18em;
  color:var(--ink-3);margin-bottom:10px}
.rail__cell h3{font-size:1.02rem;margin:0 0 10px;min-height:2.4em;line-height:1.2}
.rail__cap{display:block;font-family:var(--ff-mono);font-size:1.02rem;font-weight:700;
  color:var(--accent);margin-bottom:6px}
.rail__cell p{font-size:.86rem;line-height:1.5;color:var(--ink-2);margin:0}
.rail__bar{display:block;height:3px;background:var(--line-2);margin:0 0 14px;position:relative}
.rail__bar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease)}
.reveal--in .rail__bar i{transform:scaleX(1)}
.rail__foot{display:flex;align-items:center;gap:14px;margin-top:6px;
  font-family:var(--ff-mono);font-size:11.4px;color:var(--ink-3)}
.rail__foot b{color:var(--accent);font-weight:700}
.rail__hint{margin-left:auto}
@media (max-width:640px){.rail__cell{flex:0 0 200px;padding:16px 16px 18px}}

/* ---- the pinned label: sticky left, annotations scroll past on the right  */
.pin{display:grid;gap:22px}
.pin__fig{margin:0}
.pin__fig img{width:100%}
.pin__cap{font-family:var(--ff-mono);font-size:11.4px;color:var(--ink-3);
  margin-top:10px;line-height:1.55}
.pin__list{display:grid;gap:0}
.pin__item{padding:22px 0;border-top:1px solid var(--line)}
.pin__item:last-child{border-bottom:1px solid var(--line)}
.pin__k{display:block;font-family:var(--ff-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.pin__item h3{margin:0 0 8px;font-size:1.1rem}
.pin__item p{margin:0 0 .7em;font-size:.96rem;color:var(--ink-2)}
.pin__item p:last-child{margin-bottom:0}
@media (min-width:900px){
  .pin{grid-template-columns:minmax(0,5.2fr) minmax(0,6.8fr);gap:44px;align-items:start}
  .pin__fig{position:sticky;top:96px}
}

/* ---- the footer, designed as a specimen card rather than a link table --- */
.ftr{background:#000;border-top:1px solid var(--line)}
.ftr__spec{border:1px solid var(--line-2);padding:0;margin:0 0 34px;
  display:grid;grid-template-columns:1fr}
.ftr__spec-row{display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:13px 18px;border-bottom:1px solid var(--line);align-items:baseline}
.ftr__spec-row:last-child{border-bottom:0}
.ftr__spec-k{font-family:var(--ff-mono);font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-2);min-width:190px}
.ftr__spec-v{font-family:var(--ff-mono);font-size:15px;color:var(--on-dark);line-height:1.6}
.ftr__spec-v b{color:var(--amber);font-weight:700}
@media (max-width:640px){
  .ftr__spec-row{grid-template-columns:1fr;gap:5px}
  .ftr__spec-k{min-width:0}
}

/* ---- the motion system ------------------------------------------------- */
/* entrance: every section rises once, on intersection, transform+opacity    */
/* only. idle: the hero drop and the section rules. interaction: hover lifts */
/* and tab extensions. Nothing animates off-screen; nothing blocks reading.  */
/* Every entrance rule is scoped to .js-reveal, which main.js removes if the */
/* observer is unavailable or the user prefers reduced motion, so content is */
/* never left hidden by CSS alone.                                           */
.js-reveal .sec__head h2{clip-path:inset(0 100% 0 0);
  transition:clip-path .8s var(--ease) .05s}
.js-reveal .is-in .sec__head h2,.js-reveal .sec__head.is-in h2{clip-path:inset(0 0 0 0)}
.js-reveal .rail__bar i{transform:scaleX(0)}
.rail__bar i{transition:transform 1s var(--ease)}
.js-reveal .is-in .rail__bar i{transform:scaleX(1)}
.js-reveal .pin__item{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js-reveal .is-in .pin__item{opacity:1;transform:none}
.js-reveal .is-in .pin__item:nth-child(2){transition-delay:.06s}
.js-reveal .is-in .pin__item:nth-child(3){transition-delay:.12s}
.js-reveal .is-in .pin__item:nth-child(4){transition-delay:.18s}
.js-reveal .is-in .pin__item:nth-child(5){transition-delay:.24s}
.js-reveal .is-in .pin__item:nth-child(n+6){transition-delay:.3s}
.js-reveal .scale__row{opacity:0;transform:translateY(10px);
  animation:scalein .5s var(--ease) forwards}
.js-reveal .scale__row:nth-child(1){animation-delay:.45s}
.js-reveal .scale__row:nth-child(2){animation-delay:.55s}
.js-reveal .scale__row:nth-child(3){animation-delay:.65s}
.js-reveal .scale__row:nth-child(4){animation-delay:.75s}
.js-reveal .scale__row:nth-child(5){animation-delay:.85s}
@keyframes scalein{to{opacity:1;transform:none}}
.js-reveal .scale__bar i{transform:scaleX(0);transform-origin:0 50%;
  animation:barin .9s var(--ease) 1s forwards}
@keyframes barin{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .sec__head h2{clip-path:none!important}
  .rail__bar i,.scale__bar i{transform:none!important;animation:none!important;
    transition:none!important}
  .pin__item,.scale__row{opacity:1!important;transform:none!important;
    animation:none!important;transition:none!important}
}

/* ======================================================================== */
/* RICH LAYER (below the hero) — varied entrances, glow cards, tilt packs.  */
/* ======================================================================== */

/* -- varied section entrances instead of one repeated rise --------------- */
/* variety without horizontal motion: a sideways transform on a full-width
   block can widen the document if the reveal never fires, so every variant
   here moves vertically or scales only */
.js-reveal .sec:nth-of-type(4n+1) .sec__head{transform:translateY(20px)}
.js-reveal .sec:nth-of-type(4n+2) .sec__head{transform:translateY(30px) scale(.985)}
.js-reveal .sec:nth-of-type(4n+3) .sec__head{transform:scale(.955)}
.js-reveal .sec:nth-of-type(4n+4) .sec__head{transform:translateY(12px) scale(1.03)}
.js-reveal .sec.is-in .sec__head{transform:none}
.js-reveal .sec:nth-of-type(2n) .sec__head h2{clip-path:inset(0 0 0 100%)}
.js-reveal .sec:nth-of-type(2n).is-in .sec__head h2{clip-path:inset(0 0 0 0)}

/* -- cards: a gradient edge that lights up, and a lift ------------------- */
.card{transition:transform var(--hover) var(--ease),box-shadow var(--hover) var(--ease),
      border-color var(--hover) var(--ease);position:relative;isolation:isolate}
.card::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,90,71,.16),transparent 55%,rgba(242,180,65,.12));
  transition:opacity var(--ui) var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--lift)}
.card:hover::after{opacity:1}
.sec--paper .card::after{
  background:linear-gradient(140deg,rgba(179,42,28,.09),transparent 55%,rgba(138,90,6,.08))}

/* -- stat tiles count and glow ------------------------------------------ */
.stats{position:relative}
.stats b,.dc__tile-v{background:linear-gradient(96deg,#FF5A47,#F2B441);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(255,90,71,.3))}

/* -- pack cards get a subtle 3D tilt on pointer ------------------------- */
.pack{transition:transform .28s var(--ease),box-shadow .28s var(--ease);
  transform-style:preserve-3d;will-change:transform}
.pack:hover{box-shadow:var(--lift)}
.pack--best{position:relative}
.pack--best::before{content:"";position:absolute;inset:-2px;z-index:1;pointer-events:none;
  border-radius:inherit;padding:2px;
  background:linear-gradient(120deg,var(--accent),var(--accent-bright),var(--accent));
  background-size:220% 100%;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask:linear-gradient(#000,#000) content-box,
    linear-gradient(#000,#000);mask-composite:exclude;
  animation:packedge 5s linear infinite}
@keyframes packedge{to{background-position:220% 0}}

/* -- the rail: drag to scroll, snap, and a lit leading edge -------------- */
.rail__scroll{cursor:grab;scroll-behavior:smooth}
.rail__scroll.is-drag{cursor:grabbing;scroll-behavior:auto;user-select:none}
.rail__cell{position:relative;overflow:hidden}
.rail__cell::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--accent),transparent);transform:scaleY(0);
  transform-origin:0 0;transition:transform var(--ui) var(--ease)}
.rail__cell:hover::after{transform:scaleY(1)}
.rail__bar i{overflow:hidden}
.rail__bar i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-120%);animation:sheen 3.8s var(--ease) infinite}

/* -- the section rule gets a travelling light --------------------------- */
/* the travelling light moves by background-position, never by geometry, so
   it can never widen the document */
.sec::after{content:"";position:absolute;left:0;right:0;top:0;height:9px;
  pointer-events:none;
  background-image:linear-gradient(90deg,transparent 0%,rgba(255,90,71,.9) 5%,transparent 11%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:-60% 0;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 22px);
  mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 22px);
  animation:rulerun 7s linear infinite}
@keyframes rulerun{from{background-position:-60% 0}to{background-position:260% 0}}
.sec--paper::after{
  background-image:linear-gradient(90deg,transparent 0%,rgba(179,42,28,.85) 5%,transparent 11%)}

/* -- the pinned label frame gets a soft red pool behind it -------------- */
/* NOTE: no position rule here - .pin__fig is position:sticky above and a
   position declaration in this later block would silently override it */
.pin__fig::before{content:"";position:absolute;inset:-8% -6%;z-index:-1;
  background:radial-gradient(52% 52% at 50% 46%,rgba(255,90,71,.20),transparent 72%);
  filter:blur(10px);animation:breathe 8s var(--ease) infinite}
.sec--paper .pin__fig::before{
  background:radial-gradient(52% 52% at 50% 46%,rgba(179,42,28,.10),transparent 72%)}

/* -- tables: rows light on hover ---------------------------------------- */
tbody tr{transition:background var(--hover) var(--ease)}
tbody tr:hover{background:rgba(255,90,71,.06)}
.sec--paper tbody tr:hover{background:rgba(179,42,28,.05)}

/* -- the quote/answer box gets an animated left rule -------------------- */
.answer::before{background:linear-gradient(180deg,#FF5A47,#F2B441,#FF5A47);
  background-size:100% 220%;animation:packedge 5s linear infinite}

/* -- links get a drawn underline ---------------------------------------- */
.prose a,.pin__item a,.faq a{background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  text-decoration:none;transition:background-size .32s var(--ease)}
.prose a:hover,.pin__item a:hover,.faq a:hover{background-size:100% 1px}

/* -- back-to-top becomes a progress ring -------------------------------- */
/* NOTE: no position rule here - .totop is position:fixed above, and a
   position declaration in this later block would silently override it,
   dropping the button into the document flow at the foot of the page
   where it overhangs the right edge. position:fixed already establishes
   the containing block the ::before ring needs. */
.totop{overflow:visible}
.totop::before{content:"";position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--sp,0)*1%),rgba(255,255,255,.12) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .sec::after,.pack--best::before,.rail__bar i::after,.pin__fig::before,
  .answer::before{animation:none!important}
  .js-reveal .sec .sec__head{transform:none!important}
  .card:hover,.pack:hover{transform:none}
}

/* ---- the stepped ladder (site 14): meaning carried by the indent -------- */
.ladder{list-style:none;margin:0;padding:0;counter-reset:rung;max-width:none}
.ladder__rung{counter-increment:rung;position:relative;background:#fff;
  border:1px solid var(--line);border-radius:20px 20px 0 0;padding:22px 24px 24px;
  margin-bottom:14px;box-shadow:var(--shadow);
  transition:transform var(--hover) var(--ease),box-shadow var(--hover) var(--ease)}
.ladder__rung:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.ladder__rung::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--grad);border-radius:0 0 2px 2px;transform:scaleX(var(--f,.18));
  transform-origin:0 50%;transition:transform .8s var(--ease)}
.ladder__k{display:block;font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-strong);margin-bottom:9px}
.ladder__rung h3{margin:0 0 8px;font-size:1.14rem}
.ladder__rung p{margin:0;color:var(--ink-2);font-size:.97rem;line-height:1.6}
@media (min-width:860px){
  .ladder__rung{margin-left:calc(var(--i) * 5.2%);
    width:calc(100% - var(--i) * 5.2%)}
  .ladder__rung::after{content:counter(rung,decimal-leading-zero);position:absolute;
    left:-46px;top:26px;font-family:var(--ff-mono);font-size:12px;color:var(--ink-3);
    letter-spacing:.12em}
}
.js-reveal .ladder__rung{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js-reveal .is-in .ladder__rung{opacity:1;transform:none}
.js-reveal .is-in .ladder__rung:nth-child(2){transition-delay:.07s}
.js-reveal .is-in .ladder__rung:nth-child(3){transition-delay:.14s}
.js-reveal .is-in .ladder__rung:nth-child(4){transition-delay:.21s}
.js-reveal .is-in .ladder__rung:nth-child(5){transition-delay:.28s}
.js-reveal .is-in .ladder__rung:nth-child(n+6){transition-delay:.35s}
@media (prefers-reduced-motion:reduce){
  .ladder__rung{opacity:1!important;transform:none!important}
  .ladder__rung::before{transform:scaleX(1)!important;transition:none}
}


/* ------------------------------------------------- the unanswerable row --- */
.rt__q{font-family:var(--ff-mono);font-size:15px;font-weight:700;fill:var(--amber)}
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}

/*!SITE-REFRESH ggr 2026-09-30 (goglycoreset): page record, pre-order check, reading shelf, doctor-first cards, reviewer block, policy toc, motion layer, readability*/
.ggr-sign{padding:clamp(40px,5vw,72px) 0;background:var(--bg-3)}
.ggr-sign__box{max-width:var(--mid);margin:0 auto;background:#fff;border:2px solid var(--ink);padding:clamp(22px,3vw,34px);box-shadow:8px 8px 0 #0B5F58}
.ggr-sign__k{font:600 13px/1 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:#0B5F58;margin:0 0 10px}
.ggr-sign__box h2{font-size:clamp(1.5rem,1.1rem + 1.3vw,2rem);margin:0 0 18px}
.ggr-sign__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ggr-sign__grid>div{padding:14px 16px 14px 0;display:grid;gap:4px;align-content:start}
.ggr-sign__grid>div+div{padding-left:16px;border-left:1px solid var(--line)}
.ggr-sign__grid span{font:600 13px/1.2 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:#5A514C}
.ggr-sign__grid b{font:700 18px/1.3 var(--ff-body);color:var(--ink)}
.ggr-sign__grid b a{color:inherit;text-underline-offset:3px}
.ggr-sign__grid small{font-size:16px;line-height:1.45;color:var(--ink-2)}
@media(max-width:760px){.ggr-sign__grid{grid-template-columns:1fr}.ggr-sign__grid>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
.ggr-sign__ref{margin:18px 0 0;padding:14px 16px;background:#E8F3F1;border-left:4px solid #0B5F58;color:var(--ink);font-size:17px;line-height:1.55}
.ggr-sign__note{margin:14px 0 0;font-size:16px;color:var(--ink-2)}
.ggr-sign__links{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.ggr-sign__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--bg);color:var(--accent-strong);font-weight:700;font-size:15px;text-decoration:none}
.ggr-sign__links a:hover{box-shadow:inset 0 0 0 1px #0B5F58;color:#0B5F58}
.ggr-pre{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ggr-pre__col{background:#fff;border:1px solid var(--line);padding:24px 24px 22px}
.ggr-pre__col h3{margin:0 0 14px}
.ggr-pre__col ol{list-style:none;counter-reset:ggr;margin:0;padding:0;display:grid;gap:12px}
.ggr-pre__col li{counter-increment:ggr;position:relative;padding-left:42px;font-size:17px;line-height:1.55;color:var(--ink-2)}
.ggr-pre__col li::before{content:counter(ggr,decimal-leading-zero);position:absolute;left:0;top:.1em;font:600 15px/1.6 var(--ff-mono);color:#0B5F58}
.ggr-pre__col--doc{border-top:5px solid #0B5F58}.ggr-pre__col--go{border-top:5px solid var(--accent)}
.ggr-pre__col--go li::before{color:var(--accent-strong)}
.ggr-pre__col a{color:var(--accent-strong)}
@media(max-width:860px){.ggr-pre{grid-template-columns:1fr}}
.ggr-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ggr-shelf__item{display:grid;gap:6px;align-content:start;min-width:0;padding:20px 22px;background:#fff;border:1px solid var(--line);color:var(--ink-2);text-decoration:none;border-bottom:4px solid #0B5F58}
.ggr-shelf__item strong{font-family:var(--ff-display);font-size:1.3rem;line-height:1.2;color:var(--ink)}
.ggr-shelf__item span:not(.ggr-shelf__kind){font-size:16px;line-height:1.5}
.ggr-shelf__kind{font:600 13px/1 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:#0B5F58}
.ggr-shelf__item:hover{box-shadow:var(--lift)}
@media(max-width:900px){.ggr-shelf{grid-template-columns:1fr}}
.ggr-doc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ggr-doc__item{background:#fff;border:1px solid var(--line);border-left:5px solid #0B5F58;padding:22px 24px}
.ggr-doc__item h3{margin:0 0 8px}
.ggr-doc__item p{margin:0;font-size:17px;line-height:1.6;color:var(--ink-2)}
.ggr-doc__item a,.ggr-doc__ref a{color:var(--accent-strong)}
.ggr-doc__ref{margin:22px auto 0;max-width:var(--mid);padding:16px 20px;background:#E8F3F1;border:1px solid #BFDCD6;color:var(--ink);font-size:17px;font-weight:600;text-align:center}
@media(max-width:860px){.ggr-doc{grid-template-columns:1fr}}
/* readability (owner, 30 Sep: "text should clear") */
.prose p,.prose li,.card p,.steps p,.faq__a p,.note p,.callout p,.ladder__rung p,.ing p,.lens__panel p,.pc li,.pack__perks li,.refs li,.post p,.keep a span,.ctapanel p,.band__txt p,.qsplit__txt p,.qsplit__txt li,.split__fig figcaption,.gcell figcaption span{font-size:16px!important}
.ftr__legal p,.ftr p,.ftr li,.ftr__spec-v{font-size:16px!important}
.ftr__spec-k,.lens__dv,.pack__supply,.pack__flag,.planner__lab,.planner__cell span,.stat span,.card__n,.ladder__k,.post__meta,.artmeta,.ctapanel small,.packs__foot,.faqsearch__count,.ing__amt{font-size:max(13px,0.82rem)!important}
.ladder__k,.post__meta,.artmeta,.planner__lab,.ftr__spec-k,.lens__dv{font-family:var(--ff-body)!important}
table td,table th{font-size:16px!important}
.pack__tot,.packs__foot{font-size:16px!important}.planner__lab span,.pack__supply{font-size:13px!important}
/* contrast: the best-value band and the footer spec values sat under 4.5:1; the footer spec is sentences, so not monospace */
.pack--best .pack__supply{color:#fff!important}.pack--best .pack__flag{background:rgba(0,0,0,.24)!important;border-color:rgba(255,255,255,.35)!important}
.ftr__spec-v{font-family:var(--ff-body)!important}.ftr__spec-v b{color:#F0B840!important}
.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:no-preference){
.btn--primary{position:relative;overflow:hidden;isolation:isolate}
.btn--primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-140%);pointer-events:none}
.hero .btn--primary::after,.ctapanel .btn--primary::after{animation:ggrSheen 8s ease-in-out 2.6s infinite}
.btn--primary:hover::after{animation:ggrSheen .9s ease-in-out}
@keyframes ggrSheen{0%,78%{transform:translateX(-140%)}100%{transform:translateX(140%)}}
.ggr-rip{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none;z-index:-1;animation:ggrRip .6s ease-out forwards}
@keyframes ggrRip{from{transform:scale(0);opacity:1}to{transform:scale(12);opacity:0}}
.ggr-tilt{transition:transform .3s ease,box-shadow .3s ease}
.ggr-tilt.is-tilting{transform:perspective(900px) rotateX(var(--ggr-rx,0deg)) rotateY(var(--ggr-ry,0deg)) translateY(-3px)}
.ggr-sign__box{transition:box-shadow .3s ease}.ggr-sign__box:hover{box-shadow:12px 12px 0 #0B5F58}
}
/*!END-SITE-REFRESH ggr*/