/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Fredoka Fallback";src:local("Arial");font-weight:400;size-adjust:102.51%;ascent-override:95.01%;descent-override:23.02%;line-gap-override:0.00%}
@font-face{font-family:"Fredoka Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:95.51%;ascent-override:101.98%;descent-override:24.71%;line-gap-override:0.00%}
@font-face{font-family:"Tajawal Fallback";src:local("Arial");font-weight:400;size-adjust:95.59%;ascent-override:67.27%;descent-override:37.35%;line-gap-override:20.92%}
@font-face{font-family:"Tajawal Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:92.24%;ascent-override:69.71%;descent-override:38.70%;line-gap-override:21.68%}
/* ==== end font fallback metrics ==== */
/* theprimalgrowpro.com — Primal Grow Pro, licensed U.S. retail desk.
   Design slot 311 (batch8_assignments.py): Fredoka / Tajawal, a COLD STEEL
   GREY ground carrying near-white panels, a header built as an inset capsule
   that floats clear of the page edges on all sides, a footer that restates the
   pack ladder beside the destination columns, and the vigor-rise hero motif.

   The colour is off the label: the crimson of the PRIMAL GROW PRO wordmark,
   with the kente gold and the leaf green from the same artwork as secondaries.
   None of the three is allowed into the ground. The page is cold and the
   product is the only warm object on it, which is what keeps this desk off its
   sister primalgrowpros.com, whose answer to the same bottle is amber sand.

   The chrome speaks in capsules because the product is one: the header is a
   pill, every button is a pill, and the recurring small mark is a gold
   diamond — the eyebrow lead-in, the topline separators, the card notch and
   the legal bullets are all the same 45-degree square. Fredoka stops at 700,
   so no display rule below asks for 800 and gets a synthesised bold instead.

   Everything above CRITICAL-END is inlined into every page head.

   TWO THINGS IN THIS FILE ARE LOAD-BEARING AND BOTH ARE INVISIBLE.

   1. validate.py reads the declared custom properties from everything before
      the FIRST closing brace in this file, so no comment above the token block
      may contain one, and the token block must stay first.
   2. hero_motifs.second_colour does NOT strip comments before it splits this
      file on the token-block selector. A comment above that block which merely
      SPELLS that selector steals the split, the tool then finds no dark ink to
      mix the hero band toward, and it falls back to a 35%-black mix of the
      accent — which turns a slot that reads "cold steel grey" into a dusty
      rose band behind the bottle. That is what this site shipped before its
      assets were lost: the band measured #dbd0d7, a pink, on a cold-steel
      page. So the selector is never written out in prose above the block. */

/* ---- tokens */
:root{
  --ink:#191d24;            /* body text */
  --ink-2:#4d5665;          /* secondary */
  --ink-3:#737d8d;          /* captions, meta */
  --steel:#2b3542;          /* headings, and the plate the closing CTA sits on */
  --steel-d:#1a212b;        /* the topline strip and the buy bar */
  --steel-2:#39465a;
  --crimson:#c0182f;        /* the label's wordmark */
  --crimson-d:#9a1126;      /* deep, for type on the light ground */
  --gold:#c08a1e;           /* the kente band: every small mark is gold */
  --green:#1f7a4c;          /* the leaf */
  --wash:#fbeef0;           /* the palest crimson that still reads as one */
  --paper:#e6eaef;          /* the page: cold steel grey */
  --panel:#fdfdfe;          /* near-white panels */
  --tint:#dce2ea;
  --line:#ccd4de;
  --line-2:#b2bdca;
  --good:#1f7a4c;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:12px;
  --radius-lg:22px;
  --pill:999px;
  --shadow:0 1px 2px rgba(26,33,43,.05),0 12px 30px rgba(26,33,43,.08);
  --shadow-lg:0 26px 64px rgba(26,33,43,.20);
  --navh:112px;
  --display:"Fredoka","Fredoka Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Tajawal","Tajawal Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.75;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--crimson-d);text-underline-offset:3px}
a:hover{color:var(--crimson)}
h1,h2,h3,h4{font-family:var(--display);color:var(--steel);font-weight:700;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.3rem + 2.2vw,3.05rem);letter-spacing:-.015em}
h2{font-size:clamp(1.48rem,1.16rem + 1.2vw,2.15rem);letter-spacing:-.01em}
h3{font-size:1.21rem;font-weight:600}
h4{font-size:1.04rem;font-weight:600}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--steel-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--crimson);outline-offset:2px}

/* The eyebrow names the JOB of the section beneath it. Its lead-in is the gold
   diamond this site repeats at every scale. --crimson-d rather than --crimson
   because the deep one measures 7.3:1 on the steel ground. */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:.78125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--crimson-d);margin:0 0 11px}
.eyebrow::before{content:"";width:9px;height:9px;flex:0 0 auto;border-radius:2px;background:var(--gold);transform:rotate(45deg)}

/* ---- buttons: a full capsule, never a rectangle */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:15px 34px;font-family:var(--display);font-size:1rem;font-weight:600;letter-spacing:.005em;border:0;border-radius:var(--pill);cursor:pointer;text-decoration:none;background:linear-gradient(135deg,var(--steel) 0%,var(--steel-d) 100%);color:#fff;transition:filter .18s ease,transform .18s ease,box-shadow .18s ease}
.btn:hover{filter:brightness(1.14);color:#fff}
.btn:active{transform:translateY(1px)}
/* The primary CTA. The class name is the estate's; the colour is this label's.
   White at 17px/600 is still "normal" text for WCAG — large starts at 18.66px
   bold — so it needs 4.5:1, and the two gradient stops measure 6.2:1 and
   8.0:1. */
.btn--cyan{background:linear-gradient(135deg,var(--crimson) 0%,var(--crimson-d) 100%);box-shadow:0 8px 20px rgba(192,24,47,.26)}
.btn--cyan:hover{box-shadow:0 10px 26px rgba(192,24,47,.34);color:#fff}
.btn--lg{min-height:62px;padding:17px 40px;font-size:1.08rem}
.btn--ghost{background:none;color:var(--steel);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--panel);color:var(--steel-d)}
.btn--wide{width:100%}

/* ---- header: ONE inset capsule, floating clear of the page on all sides.
   .nav carries the ground so the strip behind the capsule stays the page when
   content scrolls under it, .nav__wrap gives the capsule its clearance above
   and below, and .nav__top IS the capsule. */
.nav{position:sticky;top:0;z-index:100;background:var(--paper)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:12px 0` would set padding-inline to 0 and wipe the page gutter, so
   the capsule would sit hard against both screen edges. Invisible above the
   container max-width, and no overflow test can see it (pitfall 46). */
.nav__wrap{padding-block:12px}
.nav__top{display:flex;align-items:center;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--pill);box-shadow:var(--shadow);padding:9px 10px 9px 20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--steel)}
.brand__glyph{width:36px;height:36px;flex:0 0 auto}
/* Size the mark by ELEMENT, not only by class. brand_marks.py rewrites the
   <svg> inside .brand and the `hex` construction does NOT carry
   class="brand__glyph" onto the replacement, so a rule keyed to that class
   stops applying the moment the tool runs and the glyph renders at its
   intrinsic size — a masthead two different heights on one site (pitfall 16).
   Keying the element as well makes this immune to whatever the tool emits. */
.brand>svg{width:36px;height:36px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:-.015em}
.bw b em{font-style:normal;color:var(--crimson)}
.bw b i{font-style:normal;color:var(--green)}
.bw small{font-size:.73rem;font-weight:500;color:var(--ink-3)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav__price{text-align:right;line-height:1.24}
.nav__price b{display:block;font-family:var(--display);font-size:1.12rem;font-weight:700;color:var(--steel)}
.nav__price span{font-size:.75rem;font-weight:500;color:var(--ink-3)}
.nav__buy{min-height:44px;padding:10px 24px;font-size:.94rem}
.burger{display:none;width:48px;height:44px;background:transparent;border:1px solid var(--line-2);border-radius:var(--pill);cursor:pointer;padding:11px 12px}
.burger span{display:block;height:2px;border-radius:2px;background:var(--steel);margin:0 0 5px}
.burger span:last-child{margin:0}
.menu{display:flex;flex-wrap:wrap;gap:0 22px;list-style:none;margin:0;padding:0;align-items:center;min-width:0}
.menu a{display:inline-block;padding:8px 0;font-family:var(--display);font-size:.925rem;font-weight:500;color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent}
.menu a:hover{color:var(--crimson-d)}
.menu a[aria-current="page"]{color:var(--steel);border-bottom-color:var(--crimson)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT on a near-white panel.
   The panel is opaque and the motif runs PAST it rather than behind it: the
   rungs stand 8% proud of the plate top and bottom and the crest is 128% of
   the column wide, so the climb reads around the product rather than being
   covered by it. */
.hero{position:relative;background:var(--paper);padding:52px 0 62px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:44px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--crimson)}
.answer{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;margin:0 0 18px;box-shadow:var(--shadow)}
.answer p{margin:0 0 .75em;font-size:1.06rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:.925rem;font-weight:500;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px;min-width:0}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:700}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{font-size:.875rem;font-weight:500;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);padding:7px 15px;border-radius:var(--pill);min-width:0}
.factpills li b{color:var(--steel);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);padding:13px 16px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.48rem;font-weight:700;color:var(--crimson-d);line-height:1.12}
.figures span{display:block;font-size:.8125rem;font-weight:500;color:var(--ink-3);margin-top:3px}
.hero__media{position:relative;align-self:center;min-width:0}
.hero__card{position:relative;z-index:2;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:26px 24px 20px}
.hero__card img{width:100%;max-width:340px;height:auto;margin-inline:auto}
.hero__cap{margin:14px 0 0;font-size:.8125rem;font-weight:500;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:.875rem;font-weight:500;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:700}

/* ---- inner page head */
.phead{padding:34px 0 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:.875rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--crimson-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five trust facts, above the navigation.
   Role, lot, dose and count, guarantee, order phone. It exists so the capsule
   header does not have to carry them (hero.md, 18 Sep 2026) — getexitide
   shipped without one, pushed the lot into the menu as a chip, crowded the
   navigation and still left the other four facts off the page. Sits ABOVE
   CRITICAL-END because it is the first thing painted; appended to the end of
   the stylesheet it would load async and flash unstyled at the very top of the
   page. The separators are the same gold diamond as the eyebrow. */
.util{background:var(--steel-d);color:#aab5c4;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.util__item+.util__item::before{content:"";width:5px;height:5px;flex:0 0 auto;background:var(--gold);transform:rotate(45deg);margin-right:11px}
.util b{color:#eef1f6;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat 103px of an 844px screen (hero.md).
     Keep role, guarantee and phone; the lot and the dose are on the pages that
     need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}


/* ---- hero motif -- vigor-rise ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:linear-gradient(178deg,#e6eaef,#cbcfd5 46%,#e6eaef)}.hero__media::before{content:'';position:absolute;left:50%;top:-4%;width:150%;height:108%;translate:-50% 0;transform-origin:50% 100%;background-image:radial-gradient(ellipse 48% 54% at 50% 68%,rgba(192,24,47,0.44),rgba(192,24,47,0.16) 50%,transparent 80%),radial-gradient(ellipse 46% 50% at 50% 60%,rgba(192,24,47,0.40),rgba(192,24,47,0.14) 50%,transparent 80%),radial-gradient(ellipse 36% 42% at 50% 54%,rgba(192,24,47,0.54),rgba(192,24,47,0.15) 58%,transparent 80%),radial-gradient(ellipse 34% 38% at 50% 46%,rgba(192,24,47,0.48),rgba(192,24,47,0.13) 58%,transparent 80%);background-size:16% 100%,15% 100%,3% 84%,2.6% 76%;background-position:13% 0,87% 0,22% 22%,78% 64%;background-repeat:no-repeat;filter:blur(3px);-webkit-mask:linear-gradient(180deg,transparent 0,#000 12%,#000 84%,transparent);mask:linear-gradient(180deg,transparent 0,#000 12%,#000 84%,transparent);animation:pgRise 9s linear infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:50%;width:128%;aspect-ratio:0.95;translate:-50% -50%;background:radial-gradient(ellipse 56% 58% at 50% 56%,rgba(192,24,47,0.26) 0 26%,rgba(192,24,47,0.15) 56%,transparent 86%);filter:blur(16px);animation:pgCrown 6.5s ease-out infinite;z-index:0;pointer-events:none}@keyframes pgRise{0%{transform:translateY(13%) scaleY(.96);opacity:0}6%{opacity:.92}88%{opacity:.62}100%{transform:translateY(-18%) scaleY(1.04);opacity:0}}@keyframes pgCrown{0%{translate:-50% -34%;scale:.9;opacity:0}22%{opacity:.85}100%{translate:-50% -68%;scale:1.06;opacity:0}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (max-width:980px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:24px}
  /* display:contents promotes the copy column's children to grid items so the shot can sit directly after the H1 — a buyer landing from an ad wants the bottle before the 60-word answer, not after it. It also promotes .factpills and .figures, which default to order:0 and would jump above the eyebrow unless given explicit high values (hero.md). */ .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 18px}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:32px 0 42px}
  .hero__card{padding:20px 18px 16px}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}





/*!SITE-HOME-CRIT-START*/
/* ---- home page geometry ------------------------------------------------
   class="hero" is on index.html and on no other page of this site, so every
   selector below is home-only by the .hero it starts from. These rules move
   boxes, which is why they sit ABOVE the critical marker: the block above the
   marker is minified into the <head> of every page at build time, so a
   restamp alone would leave the old geometry inlined in ~30 pages. */
@media (min-width:981px){
  /* The buy button was off the first screen. Measured at 1440x900 before this
     rule: the hero CTA row opened at y=899 and closed at y=1040, so a 900px
     desktop landed on a money page with nothing to click. The copy column is
     a flex column on desktop, so reordering it costs nothing and moves no
     markup: eyebrow, headline, the quick answer, THE BUTTONS, the payment
     line, then the evidence.

     Only the desktop column is touched. Under 981px .hero__copy is
     display:contents and the phone order is composed separately, further up
     this file; nothing here reaches it. Only .hero__cta holds focusable
     elements, so the tab order is unchanged -- the three blocks that move past
     it are prose. */
  .hero__copy>.eyebrow{order:1}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:3}
  .hero__copy>.hero__cta{order:4;margin:2px 0 14px}
  .hero__copy>.hero__sub{order:5;margin:0 0 22px}
  .hero__copy>.hero__road{order:6;margin:0 0 18px}
  .hero__copy>.factpills{order:7}
  .hero__copy>.figures{order:8}
  /* The pair has to sit on ONE row, or the secondary falls off the first
     screen again and the row costs 140px instead of 64px. Measured in the
     589px copy column at 1440: 435 + 12 + 196 = 643, which wraps. The label
     is long and it is copy, so it is not touched -- the button is trimmed
     instead: 26px of side padding and 1rem type give 381 + 12 + 159 = 552,
     with 37px to spare. Both buttons then close at y=833. */
  .hero__cta .btn--lg{padding-inline:26px;font-size:1rem}
}
@media (min-width:761px){
  /* The recommended tier stands 14px proud of its neighbours. margin-top and
     never transform, because the reveal pass sets transform:none and would
     drop the lift the moment the row scrolled into view. A NEGATIVE top margin
     leaves the card's bottom edge exactly where it was -- the grid stretches
     the item to the row height minus its margins, so the card grows upward by
     14px and the Add To Cart buttons keep their single shared baseline. The
     three offsets are measured after the build, not assumed.
     Scoped at 761px because .prices drops to one column below that, where a
     negative margin would only eat the stack gap. */
  .hero~#pricing .card--pack.featured{margin-top:-14px}
}
/* The corner flag gets a strip of its own. It is absolutely positioned at the
   card's top right with z-index:3 and the head band's supply figure sits
   directly under it -- "60-day supply" and "120-day supply" were both covered
   by a flag, measured at 32px tall against a 14px head padding. The flag is
   not moved (the card clips at its radius, so there is nowhere outside to move
   it to); the head opens 40px down instead, which clears a 32px flag by 8px.
   Applied to all three cards, flagged or not, so the row keeps one height and
   the three Add To Cart buttons keep one baseline. */
.hero~#pricing .pack__head{padding-top:40px}

/* A dashed rule between the feature rows. Identical on all three cards -- four
   rows each -- so the row height and the button baseline move together. */
.hero~#pricing .pack__perks li{padding-bottom:7px;margin:0 0 7px;border-bottom:1px dashed var(--line)}
.hero~#pricing .pack__perks li:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:60px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--steel-d);color:#c6cfdb}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark p,.sec--dark li{color:#c6cfdb}
.sec--dark .eyebrow{color:#e5b95f}
.sec--dark a{color:#f3b6bf}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c6cfdb}
/* the blog puts its breadcrumb in a bare .wrap under <main>, with no .phead
   panel around it, so it needs the space the panel would have given it */
main>.wrap>.crumbs{margin-block:20px 0}

/* one measure, centred; multi-column components keep the full wrap.
   responsive.md: three or four concentric edges is a design, seven is an
   accident. Released below 1060px or the column becomes a fixed 760px box on
   a tablet. */
@media (min-width:1060px){
  .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
  .sec>.wrap>.qa,.sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps,.sec>.wrap>.meter,
  .sec>.wrap>.versus{max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- lists */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.sec--dark .ticks li::before{color:#6fd3a4}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);min-width:0}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--display);font-weight:600;color:#fff;background:var(--steel);font-size:.9375rem}
tbody tr:nth-child(even){background:#f5f7fa}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--steel)}
.tnote{font-size:.875rem;color:var(--ink-3);margin:-.4em 0 1.2em}
.dtable{min-width:520px}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.steps>*{min-width:0}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 24px 20px 72px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:22px;top:19px;width:36px;height:36px;display:grid;place-items:center;background:linear-gradient(135deg,var(--crimson),var(--crimson-d));color:#fff;font-family:var(--display);font-weight:600;font-size:1.02rem;border-radius:50%}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: a gold diamond notched into the top edge, the same mark the
   eyebrow and the topline separators use */
.grid{display:grid;gap:18px}
.grid>*{min-width:0}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px 22px}
.card::before{content:"";position:absolute;left:26px;top:-6px;width:11px;height:11px;border-radius:2px;background:var(--gold);transform:rotate(45deg)}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#232c38;border-color:#3a4553}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #f0d8dd;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--crimson-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf6ea;border:1px solid #efdcbc;border-left:5px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.3rem;font-weight:500;line-height:1.5;color:var(--steel);border-left:5px solid var(--gold);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;font-weight:400;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--gold);border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;color:var(--steel)}
.keypoints ul{margin:0;padding-left:20px}
.keypoints li:last-child{margin-bottom:0}

/* ---- the factsheet block, which restates llms.txt line for line */
.qa{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px;margin:0 0 1.2em;min-width:0}
.qa>p{color:var(--ink-2)}
.qa .tablewrap{margin-bottom:0}
.qa .tablewrap table{min-width:440px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. A
   .tablewrap holding a 520px-min table therefore keeps its column 520px wide
   however narrow the grid is, and `1fr` (= minmax(auto,1fr)) reintroduces the
   floor that the desktop minmax(0,1fr) avoids: the right-hand half of the
   block is then clipped away by body{overflow-x:clip} with nothing to scroll
   and nothing to report. min-width:0 is the fix, and it belongs on the items
   at every width rather than only in the media query. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats>*{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.1rem;font-weight:700;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#aab5c4;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr 1fr 1.15fr;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem;min-width:0}
.versus>div:nth-child(3n+1){font-weight:700;background:#f5f7fa}
.versus__h{background:var(--steel)!important;color:#fff;font-family:var(--display);font-weight:600;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix above. .inglist is a grid, .ingcard is a grid
   ITEM, and a grid item's default min-width is auto — so the card cannot
   shrink below its min-content. `.ing__dose` is white-space:nowrap and the
   longest of these labels renders over 200px wide, which sets the floor.
   min-width:0 lets the card shrink; .ingcard__top already wraps, so the chip
   drops onto its own line and fits. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px;min-width:0}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.875rem;font-weight:700;color:#fff;background:var(--crimson-d);padding:4px 14px;border-radius:var(--pill);white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-lg);overflow:hidden;position:relative;padding:0}
.card--pack::before{display:none}
/* No lift on the featured card. A `margin-top:-12px` raises its box, which
   makes it 12px TALLER than its siblings and trips responsive.md's rule that a
   pricing row shares one height and one button baseline. The card is already
   unmistakable from its accent border, its deeper shadow, its coloured head
   band and its flag, so the lift bought nothing and cost the check. (A
   transform would move it without changing the box, but the reveal animation
   overwrites transform — which is why the lift was a margin.) Note the 2px
   trap as well: box-sizing is border-box, so EVERY card carries a 2px
   transparent border and the featured one changes only its colour, or the
   featured card's content box is 2px narrower and its button drops out of
   line. */
.card--pack.featured{border-color:var(--crimson);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px;min-width:0}
.card--pack.featured .pack__head{background:linear-gradient(135deg,var(--crimson),var(--crimson-d));border-bottom-color:var(--crimson-d)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.14rem;font-weight:700}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--steel);color:#fff;font-family:var(--display);font-size:.78125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px;min-width:0}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.3rem;font-weight:700;color:var(--crimson-d);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:600;top:-.7em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;color:var(--ink-3);margin:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:800;color:var(--steel)}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:600}
.pack__perks{list-style:none;margin:0 0 18px;padding:0}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2);font-size:.9375rem}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots>*{min-width:0}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--steel)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.badgewall>*{min-width:0}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:var(--steel)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px minmax(0,1fr) 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;min-width:0;background:var(--line);border-radius:var(--pill);overflow:hidden}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--crimson),var(--gold))}
.stars{color:var(--gold);letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--steel)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-family:var(--text);font-size:1.34rem;font-weight:400;color:var(--crimson-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token. At 390 that pushes a single <a> past the viewport
   on every page carrying one — clipped, unscrollable, and invisible to every
   static check. `anywhere` rather than `break-word` because it also lowers the
   element's MIN-CONTENT, which is what stops the ancestor being sized by the
   longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline>*{min-width:0}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:linear-gradient(135deg,var(--crimson),var(--crimson-d));color:#fff;font-family:var(--display);font-weight:700;font-size:1.06rem;border-radius:var(--pill)}
.byline b{display:block;margin-bottom:6px;color:var(--steel)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--crimson);border-radius:var(--radius);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final--media>*{min-width:0}
.final__img img{width:200px}
.final h2{margin:0 0 10px}
.final__price{font-weight:700;color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel>*{min-width:0}
.rel a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--crimson);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.08rem;font-weight:600;color:var(--steel);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus (pitfall 86). */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:700;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:.875rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.article figure{margin:0 0 1.2em}
.article figure img{width:100%;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)}
.article figcaption{font-size:.9375rem;color:var(--ink-3);margin-top:9px}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--steel)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.062rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts>*{min-width:0}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.062rem;color:var(--ink-2)}
.posts p:last-child{margin-bottom:0}

/* ---- footer: a dark guarantee plate inset from the page on all sides, the
   way the header capsule is, and then the PACK LADDER RESTATED beside the
   destination columns. The ladder is the second column of .fgrid rather than a
   band of its own: a reader who has come all the way down the page and is
   deciding gets the three prices again without scrolling back up to the
   pricing section. */
.fcta{padding:54px 0 4px;background:var(--paper)}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center;background:linear-gradient(135deg,var(--steel) 0%,var(--steel-d) 100%);color:#fff;border-radius:var(--radius-lg);padding:38px 40px;box-shadow:var(--shadow-lg)}
.fcta__box>*{min-width:0}
.fcta h2,.fcta__h{color:#fff}
.fcta__eye{display:inline-block;font-family:var(--display);font-size:.78125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#e5b95f;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.6rem;font-weight:700;line-height:1.24;margin:0 0 10px}
.fcta p{color:#c6cfdb}
.fcta__sm{font-size:.9375rem;color:#aab5c4;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#f3b6bf}
.fcta__txt{min-width:0}
.fcta__img img{width:260px}
footer{background:var(--panel);margin-top:38px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.45fr 1.15fr repeat(4,minmax(0,1fr));gap:24px 26px;padding-block:44px 30px}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.6rem;font-weight:700;color:var(--steel);letter-spacing:-.015em;line-height:1}
.fbrand span{color:var(--crimson)}
.fbrand i{font-style:normal;color:var(--green)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fcard p{font-size:1rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--steel)}
.fladder{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 20px 22px}
.fladder ol{list-style:none;margin:0 0 14px;padding:0}
.fladder li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line-2);font-size:.9688rem}
.fladder li:last-child{border-bottom:0}
.fladder li b{font-family:var(--display);font-weight:600;color:var(--steel)}
.fladder li span{font-family:var(--display);font-weight:700;color:var(--crimson-d);white-space:nowrap}
.fladder .btn{width:100%;min-height:46px;padding:11px 16px;font-size:.94rem}
.fladder small{display:block;margin-top:10px;font-size:.8125rem;line-height:1.55;color:var(--ink-3)}
.fh{font-family:var(--display);font-size:.78125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back
   (pitfall 82). */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--crimson-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:20px;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--steel)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:18px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.66em;width:6px;height:6px;border-radius:1px;background:var(--gold);transform:rotate(45deg)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--steel-d);color:#fff;transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding:12px 22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#aab5c4}
.buybar .btn{margin-left:auto;flex:0 0 auto}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- responsive */
@media (max-width:1180px){
  .fgrid{grid-template-columns:1.4fr 1.1fr repeat(2,minmax(0,1fr))}
}
@media (max-width:1080px){
  .nav__price{display:none}
  .menu{gap:0 18px}
  .bw small{display:none}
}
@media (max-width:980px){
  :root{--navh:96px}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:24px}
  /* display:contents promotes the copy column's children to grid items so the
     shot can sit directly after the H1 — a buyer landing from an ad wants the
     bottle before the 60-word answer, not after it. It also promotes
     .factpills and .figures, which default to order:0 and would jump above the
     eyebrow unless given explicit high values (hero.md). */
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 18px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  /* the capsule keeps its shape and grows downward: the menu opens INSIDE it */
  .nav__top{flex-wrap:wrap;border-radius:28px;padding:10px 12px 10px 18px}
  .menu{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 6px 6px;margin-top:8px;border-top:1px solid var(--line)}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 4px;border-bottom:1px solid var(--line)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .menu li:last-child a{border-bottom:0}
  .burger{display:block}
  .nav__buy{display:none}
  .bw small{display:block}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:minmax(0,1fr);padding:32px 28px}
  .fcta__img{display:none}
  .final--media{grid-template-columns:minmax(0,1fr);gap:20px}
  .versus{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding:32px 0 42px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:minmax(0,1fr)}
  .prices{grid-template-columns:minmax(0,1fr)}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:minmax(0,1fr)}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:minmax(0,1fr)}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it is pushed to the right of a line with no room for it and overhangs
     the card edge. On a phone let it start its own line and wrap its own
     text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:minmax(0,1fr);gap:8px}
  .fcta{padding-top:40px}
  .fcta__box{padding:26px 22px}
  .fcta__h{font-size:1.4rem}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
  .step{padding:18px 20px 18px 64px}
  .final{padding:26px 22px}
  .qa{padding:20px 18px}
  .hero__card{padding:20px 18px 16px}
}
@media (max-width:560px){
  .nav__top{gap:10px;padding:9px 10px 9px 14px}
  .brand__glyph,.brand>svg{width:32px;height:32px}
  .bw b{font-size:1.16rem}
  .fladder .btn{font-size:.9rem;padding-inline:12px}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:minmax(0,1fr)}
  .bw small{display:none}
}

/* ---- hero: the plate breathes -----------------------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md). The float goes
   on the CARD, never on the <img> — the image is preloaded and animating it is
   what hero.md rules out. hero_motifs.py owns the rungs and the crest around
   it, and its own reduced-motion rule cancels this animation. */
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:pgFloat 8.5s ease-in-out infinite}
  @keyframes pgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that have to share their edges, their image
   slot and their button baseline. The vendor product shots are different
   shapes and the blurbs are different lengths, so without these three rules
   the images render at three sizes and the three CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those must
   keep stating each file's true ratio, or fix_img_dims.py rewrites them and
   CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}


/* ---- hero: sticky, centred product column ------------------------------
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past.

   --navh is measured and published by site.js: nav heights run 66-99px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller ones.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it. Without it the box is only as tall as the image and
   `top` merely pins it under the header, which is what the old house rule did.

   Requires .hero NOT to clip on the block axis -- any non-visible overflow on
   an ancestor becomes the scrollport sticky resolves against. See pitfall 65,
   whose first fix got this wrong. */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 88px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 88px) - 28px);
    min-height: calc(100svh - var(--navh, 88px) - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

   `relative` lays out identically to `static` and keeps the containing block.
   `top:0` is not decoration: the rule above sets a top offset of one nav height
   plus 14px, which a relative box would apply for real and push the plate
   ~110px down the page (pitfall 65). Written WITHOUT naming that custom
   property in the usual var() form on purpose -- preflight's undefined-variable
   check reads comments too, so a property named here is a property it believes
   the sheet uses. Measured on 7 sites before and after (pitfall 107). */
@media (prefers-reduced-motion: reduce) {
  .hero__media { position: relative; top: 0; min-height: 0; }
}

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots.s2>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 20px) / 2);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{transition:none}}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */

/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */

/*!SITE-HOME-PAINT-START*/
/* ---- home page paint: slot "trace" -------------------------------------
   Radius, shadow, gradient, transform and transition only. Nothing below moves
   a box, so this belongs under the critical marker and needs a restamp rather
   than a rebuild.

   SCOPE. Every selector carries `body:has(.hero) #main`. .hero is on
   index.html alone, so :has() pins the whole block to the home page, and #main
   keeps it out of the header, the footer and the sticky buy bar -- all three
   are shared with ~30 other pages, and a chrome that changed shape between the
   home page and a subpage would be worse than a dated one.

   SPECIFICITY, not source order. modern_surface.py and footer_type.py
   re-append their own blocks on every build and land after this one. Their
   selectors are a single class (.card, .card--pack, .answer). These carry an
   id and two more compound parts on top of the class, so they win on
   specificity and a rebuild cannot undo them. */
body:has(.hero) #main{
  --pg-r-card:28px;   /* slot radius_card    */
  --pg-r-ctl:18px;    /* slot radius_control */
  /* slot depth: "hard short offset, architectural". A short opaque ledge that
     does not blur, then a wide ambient stop under it. Tinted with this site's
     own ink, 25 29 36 -- never neutral black. The crimson pair is the same
     shape mixed toward the label colour so the buying button casts its own
     light rather than a grey one. */
  --pg-edge:0 2px 0 rgba(25,29,36,.07);
  --pg-d1:0 2px 0 rgba(25,29,36,.07),0 10px 20px rgba(25,29,36,.09);
  --pg-d2:0 3px 0 rgba(25,29,36,.10),0 14px 24px rgba(25,29,36,.13),0 34px 58px rgba(25,29,36,.10);
  --pg-d3:0 3px 0 rgba(25,29,36,.13),0 18px 30px rgba(25,29,36,.17);
  --pg-red:0 3px 0 rgba(154,17,38,.30),0 14px 24px rgba(192,24,47,.26);
  --pg-red-h:0 3px 0 rgba(154,17,38,.36),0 18px 30px rgba(192,24,47,.32);
}

/* -- panels: one curve, one depth language */
body:has(.hero) #main .card,
body:has(.hero) #main .qa,
body:has(.hero) #main .keypoints,
body:has(.hero) #main .callout,
body:has(.hero) #main .faq,
body:has(.hero) #main .ingcard,
body:has(.hero) #main .step,
body:has(.hero) #main .byline,
body:has(.hero) #main .final,
body:has(.hero) #main .split__img,
body:has(.hero) #main .shots figure,
body:has(.hero) #main .badgewall figure,
body:has(.hero) #main .posts article,
body:has(.hero) #main .rel a{border-radius:var(--pg-r-card);box-shadow:var(--pg-d1)}

/* Two exceptions to the 28px, both for the same reason -- a box only 100px
   tall reads as a bubble at the full slot curve, and a box whose content runs
   to its own edge has that content clipped by it. The three hero figures are
   103px tall; .tablewrap scrolls a table on the x axis. Both take the control
   curve instead. */
body:has(.hero) #main .figures div,
body:has(.hero) #main .tablewrap{border-radius:var(--pg-r-ctl);box-shadow:var(--pg-d1)}

/* The two accent panels keep the flat left edge their 5px colour bar sits
   against, and take the slot curve on the free side. */
body:has(.hero) #main .answer,
body:has(.hero) #main .alert{border-radius:8px var(--pg-r-card) var(--pg-r-card) 8px;box-shadow:var(--pg-d1)}

/* The product plate is the one object on the first screen, so it gets the
   deepest of the three stops. */
body:has(.hero) #main .hero__card{border-radius:var(--pg-r-card);box-shadow:var(--pg-d2)}

/* -- controls: the slot's control radius, and two weights.
   The base .btn loses its steel gradient and becomes a flat fill, so the only
   gradient left on the page is the one on the buying CTA. */
body:has(.hero) #main .btn{border-radius:var(--pg-r-ctl);background:var(--steel);box-shadow:var(--pg-edge);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,background-color .2s ease}
body:has(.hero) #main .btn:hover{transform:translateY(-2px);box-shadow:var(--pg-d1)}
body:has(.hero) #main .btn:active{transform:translateY(0)}
body:has(.hero) #main .btn:focus-visible{outline:3px solid var(--steel-d);outline-offset:3px}
/* The buying CTA: the page's only gradient, three stops down the label's own
   crimson. The lightest stop measures 5.4:1 against white, above the 4.5:1
   that 17px/600 white type needs. */
body:has(.hero) #main .btn--cyan{background:linear-gradient(135deg,#cc1a33 0,var(--crimson) 38%,var(--crimson-d) 100%);box-shadow:var(--pg-red)}
body:has(.hero) #main .btn--cyan:hover{transform:translateY(-2px);box-shadow:var(--pg-red-h)}
body:has(.hero) #main .btn--cyan:focus-visible{outline-color:var(--steel-d)}
/* The secondary stays solid and unlit, so the pair reads as two weights
   rather than two colours of the same button. */
body:has(.hero) #main .btn--ghost{background:var(--panel);color:var(--steel);box-shadow:inset 0 0 0 2px var(--line-2),var(--pg-edge)}
body:has(.hero) #main .btn--ghost:hover{background:#fff;color:var(--steel-d);box-shadow:inset 0 0 0 2px var(--steel-2),var(--pg-d1)}

/* -- anything else a reader can click answers the pointer and the keyboard */
body:has(.hero) #main .faq summary,
body:has(.hero) #main .rel a,
body:has(.hero) #main .posts article,
body:has(.hero) #main .shots figure,
body:has(.hero) #main .badgewall figure{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
body:has(.hero) #main .rel a:hover,
body:has(.hero) #main .posts article:hover,
body:has(.hero) #main .shots figure:hover,
body:has(.hero) #main .badgewall figure:hover{transform:translateY(-2px);box-shadow:var(--pg-d3)}
body:has(.hero) #main a:focus-visible,
body:has(.hero) #main summary:focus-visible,
body:has(.hero) #main button:focus-visible{outline:3px solid var(--crimson);outline-offset:3px}

/* -- the pack ladder.
   Geometry is NOT touched here: the fixed head, the fixed image box, the
   per-item stretch and the featured card's margin lift all stay exactly as
   the generator wrote them, and the three Add To Cart offsets are measured
   after the build to prove the shared baseline survived. */
body:has(.hero) #main .card--pack{border-radius:var(--pg-r-card);box-shadow:inset 0 0 0 1px var(--line),var(--pg-d1);transition:transform .2s ease,box-shadow .2s ease}
body:has(.hero) #main .card--pack:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line-2),var(--pg-d3)}
body:has(.hero) #main .card--pack.featured{box-shadow:inset 0 0 0 1px rgba(192,24,47,.38),var(--pg-d2)}
body:has(.hero) #main .card--pack.featured:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(192,24,47,.55),0 3px 0 rgba(154,17,38,.16),0 22px 38px rgba(25,29,36,.20)}
/* slot ribbon: a corner flag. The card clips at 28px, so the flag takes the
   same curve on its outer corner and a hard fold on the inner one. */
body:has(.hero) #main .pack__flag{border-radius:0 var(--pg-r-card) 0 14px;box-shadow:0 2px 0 rgba(25,29,36,.12)}
/* The recommended tier's flag is the one gold object in the row. Crimson on
   the crimson head band disappeared; gold carries the site's secondary mark
   and measures 5.6:1 against the ink it prints in. */
body:has(.hero) #main .card--pack.featured .pack__flag{background:var(--gold);color:var(--ink)}

/* ---- hero motif: trace -------------------------------------------------
   Slot family "trace": a single line that travels the silhouette and lets go.
   One thin ring, 120% of the media column wide -- 628px against a 390px
   product plate, so it clears the plate's corners by 26px and reads OUTSIDE
   it rather than being swallowed by an opaque card. It carries one bright arc
   head with a long tail that fades to nothing: the line traces round the
   bottle and releases.

   It lives on .hero__media::after, the pseudo-element the old crown glow
   used, and never on the <img> -- that is the LCP element and is preloaded.
   The rising columns on ::before are left alone.

   transform only: the element is rotated and its paint never changes, so
   there is no layout and no repaint per frame. 26 seconds for one turn --
   this is a capsule taken once a day for weeks, not an energy drink.

   z-index:-1, not the 0 the old rule used. A positioned element at z-index:0
   paints ABOVE inline text in the same stacking context, and this ring
   overflows the media column by 47px into the copy, which would lay a crimson
   hairline across the headline. -1 puts it behind the type and behind the
   plate while staying above the hero band.

   pgTrace is new to this stylesheet: pgRise, pgCrown and pgFloat are already
   taken and are untouched. */
body:has(.hero) #main .hero__media::after{
  top:50%;left:50%;width:120%;height:auto;aspect-ratio:1;
  translate:-50% -50%;
  background:conic-gradient(from 210deg,rgba(192,24,47,0) 0deg,rgba(192,24,47,0) 168deg,rgba(192,24,47,.08) 236deg,rgba(192,24,47,.44) 318deg,rgba(192,24,47,.92) 353deg,rgba(192,24,47,0) 360deg);
  border-radius:50%;
  -webkit-mask:radial-gradient(closest-side,transparent 0 97.4%,#000 97.8% 99.1%,transparent 99.5%);
  mask:radial-gradient(closest-side,transparent 0 97.4%,#000 97.8% 99.1%,transparent 99.5%);
  filter:none;
  opacity:.9;
  z-index:-1;
  animation:pgTrace 26s linear infinite;
}
@keyframes pgTrace{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  body:has(.hero) #main .hero__media::after{animation:none!important;opacity:0!important}
  body:has(.hero) #main .btn,
  body:has(.hero) #main .faq summary,
  body:has(.hero) #main .rel a,
  body:has(.hero) #main .posts article,
  body:has(.hero) #main .shots figure,
  body:has(.hero) #main .badgewall figure,
  body:has(.hero) #main .card--pack{transition:none}
  body:has(.hero) #main .btn:hover,
  body:has(.hero) #main .btn--cyan:hover,
  body:has(.hero) #main .btn--ghost:hover,
  body:has(.hero) #main .rel a:hover,
  body:has(.hero) #main .posts article:hover,
  body:has(.hero) #main .shots figure:hover,
  body:has(.hero) #main .badgewall figure:hover,
  body:has(.hero) #main .card--pack:hover,
  body:has(.hero) #main .card--pack.featured:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 25 box-shadow declaration(s)
   and 1 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (25,29,36), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --radius:16px;
  --shadow:0 1px 2px rgba(25,29,36,.06), 0 6px 18px rgba(25,29,36,.07);
  --lift:0 2px 6px rgba(25,29,36,.09), 0 16px 34px rgba(25,29,36,.14);
}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.alert,
.byline,
.split__img,
.answer,
.article figure{border-radius:var(--radius)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.badgewall figure{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover{transform:none}
}
/* ==== end modern surface ==== */

/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fh{font-size:15px}
footer .fladder .btn{font-size:16px}
footer .fladder li{font-size:16px}
footer .fladder small{font-size:16px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */