/* ========= Memoahoney — critical CSS (strip, header, hero) ================
   Site 15, second pass. The first pass was a dark ledger; this one keeps the
   ledger as the hero object and rebuilds everything around it as a bright,
   premium, modern product page: warm off-white ground, generous air, large
   soft-cornered white cards on layered shadows, gradient pill buttons, one
   honey accent with a deep ink counterpart, and ink bands used sparingly for
   emphasis rather than as the ground. */
:root{
  /* ---- surfaces -------------------------------------------------------- */
  --bg:#F8F8FD; --bg-2:#FFFFFF; --bg-3:#EFEFFA;
  --paper:#F8F8FD; --paper-2:#EFEFFA;
  --dark:#14142B; --deep:#1E1E3C; --deeper:#0D0D1E;
  --glass:#FFFFFF;
  /* ---- ink ------------------------------------------------------------- */
  --ink:#12121C; --ink-2:#474760; --ink-3:#6B6B87;
  --on-dark:#EFEFFA; --on-dark-2:#A9A9C8; --on-dark-3:#A9A9C8;
  /* ---- accent ---------------------------------------------------------- */
  --accent:#4B3FBF; --accent-strong:#4B3FBF; --accent-bright:#6A5CF0;
  --accent-ink:#4B3FBF;
  --accent-tint:#EDEBFD; --accent-tint-2:#DEDAFA;
  --accent-line:#D8D3F7;
  --amber:#4B3FBF; --amber-bright:#6A5CF0; --plum:#0A6478; --teal:#0A6478;
  --good:#0D6E4E; --warn:#A6400F;
  /* ---- lines ----------------------------------------------------------- */
  --line:#E7E7F4; --line-2:#D4D4EA; --line-dark:rgba(239,239,250,.18);
  /* ---- gradients ------------------------------------------------------- */
  --grad:linear-gradient(120deg,#5A4ACF 0%,#4B3FBF 100%);
  --grad-bright:linear-gradient(120deg,#4B3FBF 0%,#0A6478 100%);
  --grad-warm:linear-gradient(140deg,#EFEFFA 0%,#F8F8FD 55%,#EEF8FB 100%);
  /* ---- shape ----------------------------------------------------------- */
  --radius:20px; --radius-sm:14px; --btn-r:999px; --chamfer:0px;
  /* ---- depth: layered, soft, warm -------------------------------------- */
  --shadow:0 1px 2px rgba(24,24,60,.05),0 8px 20px -6px rgba(24,24,60,.1),
           0 22px 48px -16px rgba(24,24,60,.14);
  --lift:0 2px 6px rgba(24,24,60,.08),0 16px 34px -8px rgba(24,24,60,.16),
         0 40px 70px -22px rgba(24,24,60,.24);
  --glow:0 10px 24px -6px rgba(75,63,191,.42);
  --ease:cubic-bezier(.22,.68,.24,1); --ui:340ms; --hover:180ms;
  /* ---- type ------------------------------------------------------------ */
  --ff-display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ff-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-ui:var(--ff-body);
  --wrap:1180px; --text:700px; --mid:980px;
  --sp:0; --f:.18; --i:0;
}
/* the ink band: the same token names flipped, so every component built for the
   light ground renders correctly on a dark section without a second stylesheet */
.sec--dark,.sec--ink{
  --bg:#14142B; --bg-2:#1E1E3C; --bg-3:#1E1E3C;
  --ink:#FFFFFF; --ink-2:#EFEFFA; --ink-3:#A9A9C8;
  --accent:#A99BFF; --accent-strong:#A99BFF; --accent-bright:#A99BFF;
  --accent-tint:rgba(169,155,255,.15); --accent-tint-2:rgba(169,155,255,.22);
  --accent-line:rgba(169,155,255,.36);
  --amber:#A99BFF; --teal:#4FD0E8; --good:#5AD9A4; --warn:#FFA875;
  --line:rgba(239,239,250,.15); --line-2:rgba(239,239,250,.28);
  --glass:#1E1E3C;
  --grad:linear-gradient(120deg,#A99BFF 0%,#8A78F0 100%);
  --shadow:0 2px 8px rgba(0,0,0,.34),0 20px 44px -12px rgba(0,0,0,.5);
  background:var(--dark);color:var(--ink-2)}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4,
.sec--ink h1,.sec--ink h2,.sec--ink h3,.sec--ink h4{color:#fff}
/* .sec--paper is now just a warmer tint of the same light ground */
.sec--paper{background:var(--bg-3);color:var(--ink-2)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;color:var(--ink-2);font-family:var(--ff-body);font-size:17.6px;
  line-height:1.7;-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:600;line-height:1.1;
  letter-spacing:-.025em;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2.25rem,1.1rem + 3.4vw,3.6rem);line-height:1.03;letter-spacing:-.038em}
h2{font-size:clamp(1.78rem,1.1rem + 2.3vw,2.7rem);line-height:1.08;letter-spacing:-.032em}
h3{font-family:var(--ff-display);font-weight:600;
  font-size:clamp(1.14rem,1rem + .55vw,1.38rem);letter-spacing:-.02em;color:var(--ink)}
p{margin:0 0 1.1em}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:12px 18px;z-index:300;font-weight:700;border-radius:0 0 12px 0}
.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 ---- */
/* a soft warm wash instead of a printed texture - light, not busy */
body{background-image:
  radial-gradient(58rem 40rem at 86% -8%,rgba(106,92,240,.1),transparent 60%),
  radial-gradient(50rem 36rem at -8% 26%,rgba(10,100,120,.06),transparent 62%),
  radial-gradient(44rem 34rem at 48% 108%,rgba(106,92,240,.07),transparent 60%);
  background-attachment:fixed}

/* ----------------------------------------------------------- top strip ---- */
.strip{background:var(--dark);color:var(--on-dark-2);font-family:var(--ff-mono);
  font-size:12.2px;line-height:1.45;padding:10px 0}
.strip .wrap{display:flex;gap:8px 20px;align-items:center;justify-content:center;flex-wrap:wrap}
.strip b{color:#A99BFF;font-weight:600}
.strip a{color:#4FD0E8;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(248,248,253,.82);
  backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--line);
  transition:transform var(--ui) var(--ease),box-shadow var(--ui) var(--ease)}
.hdr--hidden{transform:translateY(-110%)}
.hdr .wrap{display:flex;align-items:center;gap:18px;padding:11px 0;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand img{border-radius:11px;box-shadow:0 4px 12px -2px rgba(24,24,60,.24)}
.brand__name{font-family:var(--ff-display);font-weight:600;font-size:1.22rem;
  letter-spacing:-.032em;display:block;line-height:1.05;color:var(--ink)}
.brand__sub{font-family:var(--ff-mono);font-size:9.6px;font-weight:500;letter-spacing:.17em;
  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:14.4px;
  font-weight:600;padding:10px 15px;border-radius:999px;position:relative;
  transition:color var(--hover) var(--ease),background var(--hover) var(--ease)}
.nav a:hover{color:var(--accent);background:var(--accent-tint)}
.nav a[aria-current="page"]{color:var(--accent);background:var(--accent-tint)}
.hdr__cta{flex:0 0 auto}
.burger{display:none;margin-left:auto;width:50px;height:50px;border:1px solid var(--line-2);
  background:var(--bg-2);border-radius:16px;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--shadow)}
.burger span{display:block;width:19px;height:2px;background:var(--ink);position:relative;
  border-radius:2px}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;
  height:2px;background:var(--ink);border-radius:2px}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ------------------------------------------------------------- buttons ---- */
/* soft gradient pills that lift and glow - the single most "modern" signal on
   a page like this, so they are worth getting exactly right */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ff-body);font-weight:700;font-size:1rem;letter-spacing:-.012em;
  text-decoration:none;cursor:pointer;border:0;padding:16px 30px;border-radius:999px;
  position:relative;overflow:hidden;isolation:isolate;line-height:1.2;
  transition:transform var(--hover) var(--ease),box-shadow var(--hover) var(--ease),
             color var(--hover) var(--ease),background var(--hover) var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.26),rgba(255,255,255,0) 58%);
  opacity:0;transition:opacity var(--ui) var(--ease)}
.btn:hover::before{opacity:1}
.btn.btn--primary{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.btn.btn--primary:hover{transform:translateY(-3px);
  box-shadow:0 18px 38px -8px rgba(75,63,191,.5)}
.btn.btn--ghost{background:var(--bg-2);color:var(--accent);
  box-shadow:inset 0 0 0 1.5px var(--accent-line),var(--shadow)}
.btn.btn--ghost:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1.5px var(--accent),var(--lift)}
.btn.btn--light{background:var(--bg-2);color:var(--ink);box-shadow:var(--shadow)}
.btn.btn--light:hover{transform:translateY(-3px);box-shadow:var(--lift);color:var(--accent)}
.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);
  box-shadow:inset 0 0 0 1.5px var(--accent-line),var(--shadow)}
.btn.btn--sm{padding:11px 20px;font-size:.93rem}
.btn--block{width:100%}
.btn__arrow{transition:transform var(--hover) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(5px)}
.sec--dark .btn.btn--primary,.sec--ink .btn.btn--primary{background:var(--grad);color:#14142B;
  box-shadow:0 10px 26px -6px rgba(169,155,255,.42)}
.sec--dark .btn.btn--light,.sec--ink .btn.btn--light{background:#fff;color:#14142B}
.sec--dark .btn.btn--ghost,.sec--ink .btn.btn--ghost{background:transparent;color:#A99BFF;
  box-shadow:inset 0 0 0 1.5px rgba(169,155,255,.42)}

/* ---------------------------------------------------------------- hero ---- */
.hero{position:relative;background:transparent;color:var(--ink-2);overflow:clip}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(48rem 34rem at 78% 4%,rgba(106,92,240,.16),transparent 62%),
    radial-gradient(38rem 28rem at 2% 84%,rgba(10,100,120,.1),transparent 64%)}
.hero::after{content:"";position:absolute;right:-14%;top:-22%;width:52rem;height:52rem;
  z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(169,155,255,.24),transparent 62%);
  filter:blur(34px);animation:aurora 26s var(--ease) infinite alternate;will-change:transform}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-5%,6%,0) scale(1.12)}}
.hero__grid{position:relative;z-index:2;width:min(100% - 40px,var(--wrap));margin-inline:auto;
  padding:38px 0 46px}
.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:.15em;text-transform:uppercase;
  color:var(--accent);background:var(--bg-2);padding:10px 18px;border-radius:999px;
  margin:0 0 20px;box-shadow:inset 0 0 0 1px var(--accent-line),var(--shadow);width:fit-content}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:999px;
  background:var(--accent-bright);box-shadow:0 0 0 4px rgba(106,92,240,.2);
  animation:blip 2.4s var(--ease) infinite}
@keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.35)}}
/* The highlighted phrase is held on one line, so the h1 has to be sized to
   fit that line inside the copy column rather than to a character count:
   at 3.6rem the last line ran under the product shot on the stage. */
.hero h1{margin:0 0 20px;max-width:16ch;color:var(--ink);
  font-size:clamp(2.25rem,1.1rem + 3.4vw,3.25rem)}
.hero h1 .mark{position:relative;white-space:nowrap;
  background:linear-gradient(104deg,#6A5CF0 0%,#4B3FBF 46%,#0A6478 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .mark svg{position:absolute;left:0;right:0;bottom:-.04em;width:100%;height:.2em;
  overflow:visible;pointer-events:none}
.hero h1 .mark svg path{fill:none;stroke:var(--accent-bright);stroke-width:5;
  stroke-linecap:round;opacity:.42;
  stroke-dasharray:300;stroke-dashoffset:300;animation:draw 1.1s var(--ease) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* The highlighted phrase is held on one line so the drawn underline tracks it.
   On a phone that pushed the last letter past the right edge, so below 620px
   it wraps and the underline is dropped rather than stretched across the
   break. */
@media(max-width:620px){
  .hero h1 .mark{white-space:normal}
  .hero h1 .mark svg{display:none}
}

/* ---- the two-label ledger --------------------------------------------- *
 * Site DNA 16. This product arrived with TWO Supplement Facts panels under
 * one name, so the hero is not a ledger but a SEAM: two columns of the same
 * shape, a labelled gap down the middle, and the two tag colours taken from
 * the wraps themselves. The seam is the finding, so it is drawn rather than
 * described.                                                               */
.twoled{position:relative;background:var(--bg-2);padding:30px 26px 24px;
  border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--line),var(--lift);
  font-family:var(--ff-body)}
.twoled::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(239,239,250,.92),transparent 42%)}
.twoled > *{position:relative;z-index:1}
.twoled__t{font-family:var(--ff-mono);font-size:.66rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.twoled__sub{font-family:var(--ff-body);font-size:13.6px;line-height:1.55;color:var(--ink-3);
  margin:0 0 20px;max-width:46ch}
/* The two panels stack rather than sitting side by side. Side by side looked
   like the obvious choice and was wrong: it squeezed every ingredient name
   into two or three wrapped lines, which is exactly the illegibility this
   site exists to complain about. Stacked, each panel gets the full width of
   the stage and the seam between them becomes a horizontal rule that reads
   as a statement. */
.twoled__pair{display:grid;gap:0}
.twoled__col{min-width:0}
.twoled__tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-mono);
  font-size:10.4px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;margin:0 0 14px}
.twoled__col--a .twoled__tag{color:#0A6478;background:#DFF1F6;
  box-shadow:inset 0 0 0 1px #B8DEE8}
.twoled__col--b .twoled__tag{color:var(--accent);background:var(--accent-tint);
  box-shadow:inset 0 0 0 1px var(--accent-line)}
.twoled__row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:baseline;
  padding:8px 0;font-size:14.2px;border-bottom:1px solid var(--line);
  transition:background var(--hover) var(--ease)}
.twoled__row:hover{background:var(--accent-tint)}
.twoled__row--blend{border-bottom:0;margin-top:2px}
.twoled__k{color:var(--ink);font-weight:600;letter-spacing:-.012em;min-width:0;
  overflow-wrap:break-word}
.twoled__k small{display:block;font-family:var(--ff-mono);font-size:10px;font-weight:400;
  color:var(--ink-3);letter-spacing:.02em;margin-top:2px;line-height:1.4}
.twoled__v{font-family:var(--ff-mono);font-size:13.2px;font-weight:600;color:var(--accent);
  min-width:70px;text-align:right;font-variant-numeric:tabular-nums}
.twoled__col--a .twoled__v{color:#0A6478}
.twoled__dv{font-family:var(--ff-mono);font-size:11.4px;color:var(--ink-3);
  min-width:48px;text-align:right;font-variant-numeric:tabular-nums}
.twoled__dv--bad{color:var(--warn);font-weight:700}
.twoled__blend{list-style:none;margin:10px 0 0;padding:12px 14px;counter-reset:bl;
  background:var(--bg-3);border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 1px var(--line)}
.twoled__blend li{counter-increment:bl;display:grid;
  grid-template-columns:18px minmax(0,1fr) auto;
  gap:8px;align-items:baseline;font-size:12.4px;color:var(--ink-2);padding:4px 0;
  line-height:1.4}
.twoled__blend li::before{content:counter(bl);font-family:var(--ff-mono);font-size:10px;
  font-weight:700;color:var(--ink-3)}
.twoled__blend li b{font-family:var(--ff-mono);font-size:11.6px;font-weight:600;
  color:#0A6478;white-space:nowrap;font-variant-numeric:tabular-nums}
.twoled__tot{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;
  margin-top:14px;padding-top:12px;border-top:2px solid var(--ink)}
.twoled__tot-k{font-family:var(--ff-mono);font-size:10.4px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.twoled__tot-v{font-family:var(--ff-display);font-size:clamp(1.4rem,.9rem + 1.6vw,1.9rem);
  font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  background:linear-gradient(104deg,#6A5CF0,#4B3FBF 60%,#0A6478);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.twoled__foot{font-family:var(--ff-body);font-size:11.6px;color:var(--ink-3);
  margin:14px 0 0;line-height:1.58}
.twoled__seam{position:relative;height:1px;background:var(--line-2);margin:22px 0}
.twoled__seam span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--ff-mono);font-size:9.6px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--warn);background:var(--bg-2);
  padding:4px 14px;border-radius:999px;white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--line-2)}
.twoled__note{font-family:var(--ff-body);font-size:12.6px;color:var(--ink-3);margin:20px 0 0;
  line-height:1.6;padding-top:14px;border-top:1px solid var(--line)}
.twoled__stamp{position:absolute;right:-12px;top:-16px;z-index:3;
  font-family:var(--ff-mono);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--grad);padding:11px 17px;
  border-radius:999px;box-shadow:0 12px 26px -6px rgba(75,63,191,.52);
  transform:rotate(-4deg) scale(.6);opacity:0;
  animation:stamp .55s var(--ease) 1.1s forwards}
@keyframes stamp{to{transform:rotate(-4deg) scale(1);opacity:1}}
/* The bottle sits at the TOP of the card, not the bottom. Inherited from the
   single-panel ledger, where the card was short enough that bottom-left was
   still on screen; this card is two panels tall, so bottom-left put the
   product shot 1,400px down the page and out of the hero entirely. */
.twoled__bottle{position:absolute;left:-120px;top:40px;z-index:4;width:132px;
  background:var(--bg-2);padding:12px 12px 6px;border-radius:22px;
  box-shadow:inset 0 0 0 1px var(--line),var(--lift);
  animation:rise-b .9s var(--ease) .3s backwards}
@keyframes rise-b{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.twoled__bottle img{width:100%;height:auto}

.answer{background:var(--bg-2);padding:24px 26px;margin:0 0 24px;position:relative;
  border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.answer::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;
  border-radius:0 4px 4px 0;background:var(--grad)}
.answer__label{display:block;font-family:var(--ff-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.answer p{margin:0;font-size:1.02rem;line-height:1.68;color:var(--ink-2)}
.hero__btns{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 24px}
.hero__pills{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 22px}
.pill{font-family:var(--ff-mono);font-size:11.6px;padding:9px 15px;color:var(--ink-3);
  background:var(--bg-2);border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line),0 2px 6px rgba(24,24,60,.05);
  display:inline-flex;gap:8px;align-items:center;
  transition:transform var(--hover) var(--ease),box-shadow var(--hover) var(--ease)}
.pill b{color:var(--accent);font-weight:700}
.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 24px;padding:0;display:grid;gap:11px}
.hero__ticks li{position:relative;padding-left:32px;font-size:.98rem;color:var(--ink-2);
  line-height:1.56}
.hero__ticks li::before{content:"";position:absolute;left:0;top:.2em;width:21px;height:21px;
  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:7px;top:.5em;width:7px;height:7px;
  border-radius:50%;background:var(--accent-bright)}
.hero__lotwrap{margin:0}
.lotchip{display:inline-flex;gap:9px;align-items:center;font-family:var(--ff-mono);
  font-size:11.6px;color:var(--ink-3);background:var(--bg-2);padding:9px 16px;
  border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.lotchip b{color:var(--accent)}
.lotchip a{color:var(--teal);text-decoration:none;font-weight:600}
.lotchip a:hover{text-decoration:underline}

.trio{display:grid;gap:18px;margin:38px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.trio__cell{display:flex;flex-direction:column;gap:10px}
.trio__cell small{font-family:var(--ff-body);font-size:12.4px;color:var(--ink-3);line-height:1.55}
.trio__cell small a{color:var(--teal);text-decoration:none;font-weight:600}
.trio__cell small a:hover{text-decoration:underline}
.trio__seals{display:flex;gap:10px;align-items:center}
.trio__seals img{width:44px;height:44px;object-fit:contain}
.trio__score{display:flex;align-items:baseline;gap:10px}
.trio__score b{font-family:var(--ff-display);font-size:1.75rem;color:var(--ink);line-height:1;
  letter-spacing:-.035em}
.trio__score .stars{font-family:var(--ff-body);font-size:12.4px;color:var(--ink-3)}
.pay{max-width:196px}
.chip-light{background:var(--accent-tint);color:var(--ink-2);font-family:var(--ff-mono);
  padding:8px 14px;font-size:11.4px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--accent-line)}
.chip-light b{color:var(--accent);font-weight:700}

/* -- the moving fact marquee under the hero ----------------------------- */
.mq{position:relative;overflow:hidden;background:var(--dark);padding:15px 0}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:100px;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 46s linear infinite;
  will-change:transform}
.mq:hover .mq__track{animation-play-state:paused}
.mq__item{display:inline-flex;align-items:center;gap:11px;padding:0 30px;
  font-family:var(--ff-mono);font-size:12.8px;color:#A9A9C8;white-space:nowrap}
.mq__item b{color:#A99BFF;font-weight:600}
.mq__item i{width:6px;height:6px;border-radius:50%;background:#4FD0E8;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,#4B3FBF,#6A5CF0,#0A6478);background-size:200% 100%;
  animation:progslide 5s linear infinite}
@keyframes progslide{to{background-position:200% 0}}

/* ------------------------------------------------------------ desktop ----- */
@media (min-width:1000px){
  .hero__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
    column-gap:70px;align-items:start;padding:60px 0 66px}
  .hero__copy{grid-column:1}
  .hero__stage{grid-column:2;position:sticky;top:104px;align-self:start;padding-left:26px}
  .trio{grid-column:1 / -1;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:44px}
}
@media (max-width:1180px) and (min-width:1000px){
  .twoled__bottle{left:-92px;top:34px;width:112px}
}
@media (max-width:999px){
  .hero__grid{display:flex;flex-direction:column;padding:26px 0 34px}
  .hero__stage{order:2;margin:12px 0 44px;padding-left:0}
  .eyebrow{order:0}
  .hero h1{order:1;font-size:clamp(2rem,1.2rem + 4.4vw,2.7rem);max-width:none}
  /* Stacked hero: the bottle is centred on the card's top edge and the card
     opens a gutter for it, so nothing sits behind the product shot. The
     stamp leaves its absolute corner and flows underneath, which is the only
     arrangement at this width where the two do not land on each other. */
  .twoled{padding:104px 20px 22px}
  .twoled__bottle{left:50%;right:auto;top:-40px;width:104px;padding:10px 10px 5px;
    transform:translateX(-50%);animation:none}
  .twoled__stamp{position:static;transform:none;opacity:1;animation:none;
    display:inline-block;right:auto;top:auto;margin:0 0 16px;
    font-size:10.2px;padding:9px 14px}
  .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}
  .led__stamp{opacity:1;transform:rotate(-4deg)}
}

/* ================ 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:var(--bg-2)}
.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:var(--paper);
  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 var(--line),
  var(--shadow);transition:transform 200ms var(--ease),box-shadow 200ms var(--ease)}
.card::after{display:none}
.card:hover{background:var(--bg-2);transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px var(--line-2),var(--lift)}
.sec--paper .card,.sec--tint .card{background:var(--bg-2)}
.card--paper{background:var(--bg-2)}
.card__n{border-radius:12px;background:var(--grad);color:#1A1305;font-family:var(--ff-display);
  font-weight:700;font-size:.98rem;box-shadow:0 4px 12px rgba(233,167,44,.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 var(--line),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 var(--line),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:var(--bg-2)}
thead th{background:var(--deep);color:#FFC55A;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:var(--bg-2);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:var(--deep);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 var(--line),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 var(--line),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 var(--line),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 var(--line),var(--shadow)}
.revsum__score{background:var(--glass);border:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px var(--line),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 var(--line),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 var(--line),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 var(--line),var(--shadow)}
.pack__band{background:var(--accent-tint);border-bottom:1px solid var(--accent-line)}
.pack__flag{background:var(--bg-2);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:var(--bg-2)}
.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:var(--bg-2);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:var(--bg-2)}
.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 var(--line),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:var(--bg-2);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:0;overflow:hidden}
.anno__fig img{border-radius:var(--radius)}
.anno__dot{position:absolute;width:26px;height:26px;border-radius:999px;border:0;cursor:pointer;
  background:var(--grad);color:#1A1305;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(12,9,6,.85),0 4px 12px rgba(0,0,0,.45);
  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 var(--line),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:var(--bg-2);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:#1A1305;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 var(--line),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 var(--line),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:var(--bg-2);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 var(--line),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:var(--bg-2);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:#1A1305;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:var(--bg-2);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:var(--bg-2);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:#1A1305;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:var(--bg-2);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:var(--bg-2);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:var(--bg-2);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:0}
  .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:var(--bg-2);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:var(--bg-2);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:var(--bg-2);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:#1A1305}
.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:var(--bg-2);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:var(--bg-2);
  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,#FFC55A,#E9A72C 55%,#3EC7B4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(233,167,44,.28))}

/* -- 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:var(--bg-2);
  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)}


/* ------------------------------------------- the rail nav, on both grounds --
   The rail is position:fixed, so it sits OUTSIDE whichever section is behind
   it and cannot inherit .sec--paper's token overrides. It therefore carries
   its own chip: a dark pill that reads correctly over the comb ground and
   over a cream island alike. */
@media (min-width:1280px){
  .railnav a{color:var(--on-dark-2)}
  .railnav span{background:rgba(12,9,6,.92);color:#F4EDE1;padding:5px 10px;
    box-shadow:inset 0 0 0 1px rgba(233,167,44,.34);
    clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
  .railnav i{box-shadow:0 0 0 3px rgba(12,9,6,.6)}
  .railnav a[aria-current="true"]{color:#F4EDE1}
  .railnav a[aria-current="true"] span{color:#FFC55A}
}


/* ============================================================== the stack ===
   Site DNA 15's structural module. One capsule is what the label says to take;
   the row of glyphs is how many it would take to reach the dose our sources
   record. The FIRST glyph is solid - that is the real one - and the rest are
   outlines, so the eye reads the ratio before the text explains it. */
/* --- the seam: two Supplement Facts panels read against each other ------- *
 * Site DNA 16. Three columns on a wide screen: the row label, the teal
 * label's answer, the purple label's answer. The rows that AGREE are drawn
 * quietly; the rows that differ carry a warm rule down their left edge, so
 * the shape of the disagreement is visible before a word is read.          */
.twin__score{display:grid;gap:12px;max-width:var(--mid);margin:0 auto 24px}
@media(min-width:620px){.twin__score{grid-template-columns:repeat(3,1fr)}}
.twin__scoreitem{background:var(--bg-2);border-radius:var(--radius-sm);padding:18px 20px;
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.twin__scoreitem b{display:block;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(1.7rem,1.2rem + 1.6vw,2.3rem);line-height:1;letter-spacing:-.04em;
  color:var(--good);margin-bottom:6px}
.twin__scoreitem--warn b{color:var(--warn)}
.twin__scoreitem span{display:block;font-size:13.6px;color:var(--ink-3);line-height:1.5}
.twin{max-width:var(--mid);margin-inline:auto;background:var(--bg-2);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.twin__head{display:none}
@media(min-width:880px){
  .twin__head{display:grid;grid-template-columns:200px 1fr 1fr;gap:0;
    border-bottom:1px solid var(--line-2);background:var(--bg-3)}
  .twin__hl{font-family:var(--ff-mono);font-size:10.2px;font-weight:700;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-3);padding:14px 18px}
  .twin__hl:first-of-type{color:#0A6478;box-shadow:inset 1px 0 0 var(--line-2)}
  .twin__hl:last-of-type{color:var(--accent);box-shadow:inset 1px 0 0 var(--line-2)}
}
.twin__row{display:grid;gap:2px 0;padding:16px 18px;border-bottom:1px solid var(--line);
  position:relative;transition:background var(--hover) var(--ease)}
.twin__row:last-child{border-bottom:0}
.twin__row:hover{background:var(--bg-3)}
@media(min-width:880px){
  .twin__row{grid-template-columns:200px 1fr 1fr;padding:0;gap:0;align-items:stretch}
  .twin__row > *{padding:15px 18px}
  .twin__row > .twin__a{box-shadow:inset 1px 0 0 var(--line)}
  .twin__row > .twin__b{box-shadow:inset 1px 0 0 var(--line)}
}
.twin__row--diff::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--warn)}
.twin__row--same::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--good)}
.twin__k{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 9px;
  align-items:baseline;font-family:var(--ff-display);font-weight:600;font-size:15px;
  color:var(--ink);letter-spacing:-.02em}
.twin__n{grid-row:1;grid-column:1;font-family:var(--ff-mono);font-size:10px;font-weight:700;
  color:var(--ink-3)}
.twin__t{grid-row:1;grid-column:2}
.twin__flag{font-family:var(--ff-mono);font-size:9.6px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;
  /* on its own line always: inline, the chip jumped up and down the column
     depending on how long each row label happened to be */
  /* its own row in the grid, sized to its own text: as a wrapped flex item it
     stretched to the full column width and read as a banner */
  grid-row:2;grid-column:2;justify-self:start}
.twin__row--same .twin__flag{color:var(--good);background:#E1F4EB}
.twin__row--diff .twin__flag{color:var(--warn);background:#FCEBE0}
.twin__lab{display:block;font-family:var(--ff-mono);font-size:9.6px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
@media(min-width:880px){.twin__lab{display:none}}
.twin__a p,.twin__b p{margin:0;font-size:14.6px;line-height:1.55;color:var(--ink-2)}
.twin__a p b,.twin__b p b{color:var(--ink);font-weight:700}
.twin__foot{max-width:var(--mid);margin:18px auto 0;font-size:13.6px;color:var(--ink-3);
  line-height:1.62}
@media (max-width:560px){
  .stack__row{padding:18px 18px 16px}
  .stack__caps i{width:12px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  .stack__caps i{animation:none}
}

/* the .sec--paper island redefines the tokens, so the stack needs nothing
   extra to work there - but the solid first glyph wants a little more weight
   against cream than against the comb ground */
.sec--paper .stack__caps i:first-child{box-shadow:0 0 0 1.5px var(--accent),
  0 4px 12px rgba(75,63,191,.24)}

/* the glyph outlines need more weight on cream than on the comb ground */
.sec--paper .stack__caps i{box-shadow:inset 0 0 0 1.5px rgba(75,63,191,.5)}


/* ------------------------------------------- the cream island's buttons ----
   .sec--paper redefines --accent to the dark gold that reads on cream, so a
   primary button inside an island is dark gold and needs light ink - the
   opposite of the same button on the comb ground. */
.sec--paper .btn.btn--primary{color:#fff}
.sec--paper .btn.btn--primary:hover,
.sec--paper .btn.btn--ghost:hover,
.sec--paper .btn.btn--outline:hover,
.sec--paper .btn.btn--light:hover{color:#fff}
.sec--paper .btn::before{background:linear-gradient(90deg,#7A5307 0%,#0A6B5E 100%)}
.sec--paper .card__n,
.sec--paper .anno__dot,
.sec--paper .planner__row button[aria-pressed="true"],
.sec--paper .lens__tabs button[aria-selected="true"]{color:#fff}
.sec--paper .anno__dot{box-shadow:0 0 0 3px rgba(251,246,236,.9),0 4px 12px rgba(22,18,12,.3)}


/* --------------------------------------------- the stats band on cream -----
   The stat tiles were built for a dark ground, where a white wash and light
   ink are right. This site places them on a .sec--paper island on the home
   page, so both have to flip with the island. */
.sec--paper .stat{background:var(--bg-2);border-color:var(--line)}
.sec--paper .stat:hover{background:var(--bg-2)}
.sec--paper .stat span{color:var(--ink-2)}
.sec--paper .stats b,.sec--paper .dc__tile-v{
  background:linear-gradient(96deg,#7A5307,#9C4408 60%,#0A6B5E);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 12px rgba(75,63,191,.2))}
/* the dc__tile keeps its own dark gradient ground on either band, so its
   numeral keeps the honey ramp */
.sec--paper .dc__tile-v{background:linear-gradient(96deg,#FFC55A,#E9A72C 55%,#3EC7B4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(233,167,44,.28))}
.sec--paper .planner__row--dose button[aria-pressed="true"]{color:#fff}


/* ==========================================================================
   MODERN LAYER — site 15, second pass
   Everything below restyles the shared components for the bright premium
   look: generous section rhythm, large soft-cornered cards on layered
   shadows, pill controls, and ink bands used as accents. It is appended
   last so it wins over the earlier passes without deleting their structure.
   ========================================================================== */

/* -- section rhythm and headings ---------------------------------------- */
.sec{padding:76px 0;background:transparent;color:var(--ink-2);position:relative}
.sec::before,.sec::after{display:none}
.sec--tight{padding:44px 0}
.sec--paper{background:var(--bg-3);border-block:1px solid var(--line)}
.sec--paper + .sec--paper{border-top:0;padding-top:22px}
.sec--line{border-top:1px solid var(--line)}
.sec__head{max-width:var(--mid);margin:0 auto 38px}
.sec__head h2{margin:0 0 .4em}
.sec__head p{font-size:1.06rem;color:var(--ink-3);margin:0;max-width:62ch;line-height:1.66}
.sec__after{max-width:var(--mid);margin:30px auto 0;font-size:1rem;color:var(--ink-2);
  background:var(--bg-2);border-radius:var(--radius-sm);padding:22px 26px;
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.sec--dark .sec__after,.sec--ink .sec__after{background:var(--bg-2)}
.kicker{display:inline-flex;align-items:center;font-family:var(--ff-mono);font-size:.68rem;
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
  background:var(--accent-tint);padding:8px 15px;border-radius:999px;margin:0 0 16px;
  box-shadow:inset 0 0 0 1px var(--accent-line)}
.prose{max-width:var(--text)}
.prose--wide{max-width:var(--mid)}
.prose p{font-size:1.04rem;line-height:1.76}
.prose b,.prose strong{color:var(--ink);font-weight:700}
.mt{margin-top:30px}
.center{text-align:center}

/* -- cards --------------------------------------------------------------- */
.card,.card--paper,.ing,.note,.callout,.keep a,.guidecards a{
  background:var(--bg-2);border:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);
  transition:transform var(--ui) var(--ease),box-shadow var(--ui) var(--ease)}
.card{padding:28px}
.card:hover,.ing:hover,.keep a:hover,.guidecards a:hover{
  transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--accent-line),var(--lift)}
.card h3,.ing h3{color:var(--ink)}
.card p,.ing p{color:var(--ink-2);font-size:.98rem;line-height:1.66}
.grid{display:grid;gap:22px}
@media(min-width:760px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.card__n{border-radius:14px;background:var(--grad);color:#fff;
  box-shadow:0 6px 16px -4px rgba(75,63,191,.4)}

/* -- the note / callout blocks ------------------------------------------- */
.note,.callout{padding:26px 28px;position:relative;overflow:hidden}
.note::before,.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--grad)}
.note__h{display:block;font-family:var(--ff-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin:0 0 9px}
.note p,.callout p{margin:0 0 .8em;color:var(--ink-2);font-size:1rem;line-height:1.68}
.note p:last-child,.callout p:last-child{margin:0}
.callout{margin-top:26px;background:var(--accent-tint);
  box-shadow:inset 0 0 0 1px var(--accent-line)}

/* -- tables -------------------------------------------------------------- */
.tablewrap{max-width:var(--mid);margin-inline:auto;overflow-x:auto;border:0;
  border-radius:var(--radius);background:var(--bg-2);
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15.2px}
caption{text-align:left;padding:22px 26px 6px;font-size:13.2px;color:var(--ink-3);
  line-height:1.6}
thead th{background:transparent;color:var(--accent);border-bottom:2px solid var(--accent-line);
  font-family:var(--ff-mono);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  font-size:11.4px;padding:16px 22px;text-align:left}
tbody th,tbody td{padding:16px 22px;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.6}
tbody th{text-align:left;font-weight:700;color:var(--ink);width:30%}
tbody td{color:var(--ink-2)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(239,239,250,.55)}
tbody tr:hover{background:var(--accent-tint)}
.t-good{color:var(--good);font-weight:600}
.t-warn{color:var(--warn);font-weight:600}
.ing__tot th,.ing__tot td{background:var(--accent-tint);font-weight:700;color:var(--ink)}

/* -- the ink bands: stats, cta, tiles ------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;text-align:left;
  max-width:var(--wrap);margin-inline:auto}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--bg-2);border:0;border-radius:var(--radius);padding:28px 26px;
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);
  transition:transform var(--ui) var(--ease),box-shadow var(--ui) var(--ease)}
.stat:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--accent-line),var(--lift)}
.stats b{display:block;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(2rem,1.2rem + 2.4vw,2.9rem);line-height:1;letter-spacing:-.045em;
  background:linear-gradient(104deg,#6A5CF0,#4B3FBF 58%,#0A6478);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:none}
.stat span{display:block;font-size:13.6px;color:var(--ink-3);margin-top:10px;line-height:1.45}

.ctapanel{background:linear-gradient(145deg,#1E1E3C 0%,#0D0D1E 100%);color:#EFEFFA;
  border-radius:var(--radius);padding:52px 40px;text-align:center;max-width:var(--mid);
  margin-inline:auto;position:relative;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(20,20,43,.5)}
.ctapanel::after{content:"";position:absolute;right:-12%;top:-42%;width:34rem;height:34rem;
  border-radius:50%;background:radial-gradient(circle,rgba(169,155,255,.22),transparent 64%);
  pointer-events:none}
.ctapanel > *{position:relative;z-index:1}
.ctapanel h2{color:#fff;margin-bottom:14px}
.ctapanel p{color:#EFEFFA;max-width:58ch;margin:0 auto 24px;font-size:1.04rem}
.ctapanel .btn{margin:0 6px 10px}
.ctapanel .btn--primary{background:linear-gradient(120deg,#A99BFF,#8A78F0);color:#14142B;
  box-shadow:0 12px 30px -8px rgba(169,155,255,.46)}
.ctapanel .btn--light{background:rgba(239,239,250,.12);color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(239,239,250,.3)}
.ctapanel .btn--light:hover{background:rgba(239,239,250,.2);color:#fff}
.ctapanel small{display:block;color:#A9A9C8;font-size:13.2px;margin-top:12px}

.dc__tile{background:linear-gradient(150deg,#1E1E3C,#0D0D1E);color:#EFEFFA;
  border-radius:var(--radius);padding:30px;position:relative;overflow:hidden;
  box-shadow:0 24px 48px -18px rgba(20,20,43,.5)}
.dc__tile::after{content:"";position:absolute;right:-40px;top:-46px;width:170px;height:170px;
  border-radius:50%;background:radial-gradient(circle,rgba(79,208,232,.26),transparent 68%)}
.dc__tile-k{color:#A99BFF}
.dc__tile-v{background:linear-gradient(104deg,#A99BFF,#8A78F0 55%,#4FD0E8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-family:var(--ff-display);font-weight:600;letter-spacing:-.045em;filter:none}
.dc__tile p{color:#EFEFFA}
.dc__tile p b{color:#A99BFF}

/* -- the trust strip ----------------------------------------------------- */
.trust{background:var(--bg-2);border-radius:var(--radius);padding:30px 26px;
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);max-width:var(--wrap);
  margin-inline:auto}

/* -- the buy bar and mobile menu ----------------------------------------- */
.buybar{background:rgba(255,252,246,.92);backdrop-filter:saturate(1.5) blur(18px);
  border-top:1px solid var(--line);color:var(--ink-2)}
.mobile-menu{background:var(--bg-2);border-top:1px solid var(--line)}

/* -- figures ------------------------------------------------------------- */
.split__fig,.anno__fig,.bleed__fig,.gal figure,.dosechart{
  background:var(--bg-2);border:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);overflow:hidden}
.split__fig img,.bleed__fig img,.gal figure img{border-radius:0}
figcaption{font-size:13px;color:var(--ink-3);line-height:1.6;padding:18px 22px}

/* -- the lens tabs ------------------------------------------------------- */
.lens__tabs button{background:var(--bg-2);color:var(--ink-2);border-radius:999px;
  padding:11px 20px;font-size:13.6px;font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line),0 2px 6px rgba(24,24,60,.05)}
.lens__tabs button:hover{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}
.lens__tabs button[aria-selected="true"]{background:var(--grad);color:#fff;
  box-shadow:var(--glow)}
.lens__panel{background:var(--bg-2);border-radius:var(--radius);padding:32px;
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);backdrop-filter:none}

/* -- the planner and quiz ------------------------------------------------ */
.planner,.quiz{background:var(--bg-2);border-radius:var(--radius);padding:32px;
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);max-width:var(--mid);
  margin-inline:auto}
.planner__row button,.quiz__opt{background:var(--bg-3);color:var(--ink-2);border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line);font-weight:600}
.planner__row button[aria-pressed="true"],
.planner__row--dose button[aria-pressed="true"]{background:var(--grad);color:#fff;
  box-shadow:var(--glow)}
.planner__cell{background:var(--bg-3);border-radius:var(--radius-sm);padding:20px;
  box-shadow:inset 0 0 0 1px var(--line)}
.planner__cell b{font-family:var(--ff-display);color:var(--ink);letter-spacing:-.035em}
.planner__cell span{color:var(--ink-3)}

/* -- the faq ------------------------------------------------------------- */
.faq details,.faq__q{background:var(--bg-2);border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 1px var(--line),0 2px 8px rgba(24,24,60,.05);
  margin-bottom:12px;overflow:hidden;transition:box-shadow var(--ui) var(--ease)}
.faq details[open]{box-shadow:inset 0 0 0 1px var(--accent-line),var(--shadow)}
.faq summary{padding:20px 26px;font-weight:700;color:var(--ink);cursor:pointer;
  font-size:1rem;line-height:1.5;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq__a{padding:0 26px 22px}
.faq__a p{color:var(--ink-2);margin:0 0 .8em;font-size:.99rem;line-height:1.7}
.faq__a p:last-child{margin:0}
.faqsearch__in{background:var(--bg-2);border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}

/* -- the packs ----------------------------------------------------------- */
.pack{background:var(--bg-2);border:0;border-radius:var(--radius);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);backdrop-filter:none}
.pack:hover{box-shadow:inset 0 0 0 1px var(--accent-line),var(--lift)}
.pack__band{background:var(--bg-3);border-bottom:1px solid var(--line);padding:22px 24px}
.pack__name{font-family:var(--ff-display);color:var(--ink);letter-spacing:-.03em}
.pack__supply{color:var(--ink-3)}
.pack__flag{background:var(--bg-2);border:1px solid var(--accent-line);color:var(--accent);
  border-radius:999px}
.pack__shotbox{background:var(--bg-2)}
.pack--best{box-shadow:inset 0 0 0 2px var(--accent-bright),var(--lift)}
.pack--best .pack__band{background:var(--grad);border-bottom-color:transparent}
.pack--best .pack__name{color:#fff}
.pack--best .pack__supply{color:rgba(255,255,255,.86)}
.pack--best .pack__flag{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.44);
  color:#fff}
.pack--best::before{display:none}

/* -- the rail nav -------------------------------------------------------- */
@media (min-width:1280px){
  .railnav a{color:var(--ink-3)}
  .railnav i{width:9px;height:9px;border-radius:999px;background:var(--line-2);
    box-shadow:none}
  .railnav a:hover i{background:var(--accent-bright)}
  .railnav a[aria-current="true"] i{background:var(--grad);transform:scale(1.6)}
  .railnav a[aria-current="true"]{color:var(--accent)}
  .railnav span{background:var(--bg-2);color:var(--ink);padding:6px 12px;border-radius:999px;
    box-shadow:inset 0 0 0 1px var(--line),var(--shadow);font-weight:600}
  .railnav a[aria-current="true"] span{color:var(--accent)}
}

/* -- the stack module ---------------------------------------------------- */
/* the seam, modern layer: let the two columns breathe and give the whole
   table a card of its own rather than running it edge to edge */
.twin{border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.twin__row{transition:background var(--hover) var(--ease)}
.twin__scoreitem{transition:transform var(--hover) var(--ease),box-shadow var(--hover) var(--ease)}
.twin__scoreitem:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px var(--accent-line),var(--shadow)}
@media(min-width:880px){.twin__row{grid-template-columns:230px 1fr 1fr}
  .twin__head{grid-template-columns:230px 1fr 1fr}}

/* -- the dose chart ------------------------------------------------------ */
.dosechart{padding:30px}
.rt__cat{fill:var(--ink);font-family:var(--ff-display);font-weight:600;letter-spacing:-.02em}
.rt__ref{fill:var(--ink-3)}
.rt__mult{fill:var(--ink-2)}
.rt__x{fill:var(--accent);font-weight:700}
.rt__x--good{fill:var(--good);font-weight:700}
.rt__track,.rt__track--cap{fill:#E7E7F4}
.rt__mine,.rt__mine--cap{fill:#4B3FBF}
.rt__mine--good{fill:#0D6E4E}
.dc__legend i{border-radius:4px}

/* -- misc ---------------------------------------------------------------- */
.totop{background:var(--bg-2);border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line),var(--lift)}
.totop svg{stroke:var(--accent)}
.totop:hover{background:var(--accent-tint)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--accent)}
.phero{padding:46px 0 10px}
.phero h1{max-width:20ch}
.phero__lede{font-size:1.14rem;color:var(--ink-3);max-width:60ch;line-height:1.62}
.ftr{background:linear-gradient(170deg,#1E1E3C,#0D0D1E);color:#EFEFFA;
  padding:66px 0 30px;margin-top:0}
.ftr h3{color:#fff}
.ftr a:hover{color:#A99BFF}
.ftr__spec{border-block:1px solid rgba(239,239,250,.14)}
.ftr__spec-k{color:#A9A9C8}
.ftr__spec-v{color:#EFEFFA}
.ftr__brand img{border-radius:12px}


/* the trust strip is now one card: the inner pill it used to sit inside reads
   as a stray blob against a white surface */
.trust__row{background:transparent;border:0;border-radius:0;padding:0;
  box-shadow:none;gap:22px 30px}
@media(max-width:820px){.trust__row{border-radius:0;padding:0}}
.trust figure{width:112px}
.trust figcaption{padding:0;font-size:11.6px;line-height:1.4;color:var(--ink-3);
  font-weight:600}


/* the bare section counters read as stray artifacts against an airy light
   page, so the section rhythm is carried by space and cards instead */
.sec::after,.sec::before{content:none!important;display:none!important}

/* the promo band becomes a real card */
.band{background:var(--bg-2);border-radius:var(--radius);padding:40px 44px;
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);max-width:var(--wrap);
  margin-inline:auto;position:relative;overflow:hidden;align-items:center}
.band::after{content:"";position:absolute;right:-8%;top:-60%;width:26rem;height:26rem;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(106,92,240,.14),transparent 66%)}
.band > *{position:relative;z-index:1}
.band__txt h2{margin:0 0 10px}
.band__txt p{color:var(--ink-2);margin:0;font-size:1.02rem;max-width:62ch}
@media(min-width:880px){.band{grid-template-columns:1.4fr auto;gap:34px}}
@media(max-width:600px){.band{padding:30px 24px}}

/* keep-reading cards */
.keep{display:grid;gap:18px}
@media(min-width:820px){.keep{grid-template-columns:repeat(3,1fr)}}
.keep a{display:block;padding:24px 26px;text-decoration:none}
.keep a b{display:block;font-family:var(--ff-display);font-size:1.1rem;color:var(--ink);
  margin-bottom:6px;letter-spacing:-.022em}
.keep a span{color:var(--ink-3);font-size:.95rem}

/* the guide cards */
.guidecards{display:grid;gap:20px}
@media(min-width:900px){.guidecards{grid-template-columns:repeat(3,1fr)}}
.guidecards a{display:block;padding:28px;text-decoration:none}
.guidecards a h3{margin:0 0 10px}
.guidecards a p{color:var(--ink-2);font-size:.97rem;margin:0}

/* the reveal system: keep it, but make it gentler and vertical only */
.reveal .sec__head,.reveal .prose,.reveal .card,.reveal .stat,.reveal .stack__row{
  will-change:opacity,transform}

.sec__after{position:relative;overflow:hidden}
.sec__after::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--grad)}
.sec__after-k{display:block;font-family:var(--ff-mono);font-size:.64rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.sec__after p{margin:0;color:var(--ink-2);line-height:1.7}

/* the section counter lived on .sec > .wrap::before, not on .sec itself */
.sec > .wrap::before,.sec > .wrap::after{content:none!important;display:none!important}