/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Antonio Fallback";src:local("Arial");font-weight:400;size-adjust:84.95%;ascent-override:135.93%;descent-override:16.38%;line-gap-override:0.00%}
@font-face{font-family:"Antonio Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:81.16%;ascent-override:142.29%;descent-override:17.15%;line-gap-override:0.00%}
@font-face{font-family:"Sarabun Fallback";src:local("Arial");font-weight:400;size-adjust:98.28%;ascent-override:108.67%;descent-override:23.61%;line-gap-override:0.00%}
@font-face{font-family:"Sarabun Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:94.71%;ascent-override:112.77%;descent-override:24.50%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* primalgrowpros.com — Primal Grow Pro, U.S. stocking partner desk.
   Design slot 44 (batch8_assignments.py, ledger row 304): Antonio / Sarabun,
   an AMBER SAND ground carrying OFF-WHITE panels, a header that is mostly
   whitespace, a footer built as an inset panel clear of the page edge with the
   legal text outside it on bare sand, and the root-surge hero motif.

   THE PALETTE IS THE LABEL'S OWN, all three inks.
   Gold #d08c12, deep green #124a30 and crimson #bb2a2f are read off the kente
   band that runs top and bottom of the bottle and off the PRIMAL / GROW / PRO
   wordmark. No other row on the estate is a three-ink warm site on sand: the
   amber desks are amber on white, the green desks are green on stone. So the
   three inks are used as a BAND wherever the page needs an accent -- one gold,
   one green, one crimson strip, in that order, at 3px -- rather than as three
   interchangeable accent colours. That band is this site's signature and it is
   the thing a reader recognises from the bottle.

   Gold is a FILL, never small text: #d08c12 on the off-white panel measures
   2.71:1, well under the 4.5:1 body copy needs. Every gold word on this site is
   set in --gold-d (#8a5a10, 4.82:1 on sand, 5.66:1 on panel) and the bright
   gold is kept for plates, rules, the brand mark and the primary button, where
   it carries near-black type at 6.93:1.

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

/* ---- tokens */
:root{
  --ink:#241c0e;            /* body text, a warm near-black off the wordmark */
  --ink-2:#4a3e28;          /* secondary */
  --ink-3:#6e6144;          /* captions, meta -- 5.02:1 on sand */
  --gold:#d08c12;           /* the kente band's gold. A FILL colour. */
  --gold-l:#e0a52a;         /* the light stop of the button plate */
  --gold-d:#8a5a10;         /* the gold that may be read as text */
  --green:#124a30;          /* the wordmark's deep green */
  --green-d:#0c3520;        /* deeper, for the band gradients */
  --green-2:#1a6742;        /* lighter, for the second gradient stop */
  --crimson:#bb2a2f;        /* the band's crimson -- 4.93:1 on sand */
  --crimson-d:#8f1d21;
  --paper:#f3e7cf;          /* the page: amber sand */
  --panel:#fdfaf3;          /* the panels: off-white */
  --tint:#ecdcbd;           /* a deeper sand, for the tinted sections */
  --wash:#f7eede;           /* the palest sand, for callouts */
  --line:#ddc9a4;
  --line-2:#c9ae80;
  --on-green:#f0e6d0;       /* sand-white, for type on the green bands */
  --on-green-2:#ddd0b4;     /* its secondary -- 6.80:1 on the green */
  --good:#166b41;           /* the tick green -- 5.34:1 on sand */
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:6px;
  --radius-lg:22px;         /* the footer panel's radius, per the slot */
  --shadow:0 1px 2px rgba(36,28,14,.05), 0 10px 30px rgba(36,28,14,.08);
  --shadow-lg:0 22px 60px rgba(18,74,48,.20);
  --navh:112px;
  --kente:linear-gradient(90deg,var(--gold) 0 34%,var(--green) 34% 67%,var(--crimson) 67% 100%);
  --display:"Antonio","Antonio Fallback",Oswald,"Arial Narrow",system-ui,sans-serif;
  --text:"Sarabun","Sarabun 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(--green);text-underline-offset:3px}
a:hover{color:var(--crimson-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--green);font-weight:700;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2.15rem,1.34rem + 2.6vw,3.4rem);letter-spacing:.004em;text-transform:none}
h2{font-size:clamp(1.62rem,1.24rem + 1.4vw,2.42rem);letter-spacing:.006em}
h3{font-size:1.32rem;font-weight:600;letter-spacing:.01em}
h4{font-size:1.1rem;font-weight:600;letter-spacing:.01em}
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(--green);color:var(--on-green);padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--gold-d);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it, over the kente band
   drawn at its smallest possible size: three ticks, gold then green then
   crimson, which is the order they run on the bottle */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:0.875rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold-d);
  margin:0 0 12px;
}
.eyebrow::before{
  content:"";width:26px;height:3px;background:var(--kente);flex:0 0 auto;
}

/* ---- buttons: a flat plate, square-shouldered, the way the label sets type */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--display);font-size:1.06rem;font-weight:600;letter-spacing:.03em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:linear-gradient(176deg,var(--green-2) 0%,var(--green) 100%);color:var(--on-green);
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.14);color:var(--on-green)}
.btn:active{transform:translateY(1px)}
/* The primary plate. Near-black type on bright gold measures 6.93:1 at the
   dark stop and 7.90:1 at the light one; white on that gold is 2.83:1, which
   is why the label on this button is ink and not white. */
.btn--amber{
  background:linear-gradient(176deg,var(--gold-l) 0%,var(--gold) 100%);
  color:var(--ink);box-shadow:inset 0 -3px 0 rgba(138,90,16,.38);
}
.btn--amber:hover{color:var(--ink)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.16rem}
.btn--ghost{background:none;color:var(--green);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--panel);color:var(--green-d)}
.btn--wide{width:100%}

/* ---- header: one off-white plate, brand flush left, the order rail flush
   right, and the middle column deliberately EMPTY. Five destinations run flush
   left in a single row beneath, on the same plate.

   The empty middle is the design rather than an accident of flexbox: the row is
   a three-column grid and the brand and the rail are PLACED in columns 1 and 3,
   so the gap between them is a real column that widens with the page. That is
   what "mostly whitespace" means here, and it is why this masthead carries no
   tint strip, no keyline box and no second background. */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);box-shadow:0 1px 0 var(--line)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:20px 0` would set padding-inline to 0 and wipe the page gutter.
   Invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.nav__top{
  display:grid;grid-template-columns:auto minmax(24px,1fr) auto;
  align-items:center;padding-block:20px;
}
.brand{grid-column:1;display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--green)}
/* Size the mark by ELEMENT, not only by class. brand_marks.py rewrites the
   <svg> inside .brand and does not carry a class onto the replacement, so a
   rule keyed to a class stops applying the moment the tool runs and the glyph
   renders at its intrinsic size -- a masthead two different heights on one
   site, which is pitfall 16. Keying the element makes this immune to whatever
   the tool emits. */
.brand>svg{width:40px;height:40px;flex:0 0 auto}
.brand__glyph{width:40px;height:40px;flex:0 0 auto}

.bw{display:flex;flex-direction:column;line-height:1.06}
.bw b{font-family:var(--display);font-size:1.62rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.bw b em{font-style:normal;color:var(--crimson)}
.bw small{font-size:0.8438rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.nav__rail{grid-column:3;display:flex;align-items:center;gap:20px}
.nav__price{text-align:right;line-height:1.24}
.nav__price b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--green)}
.nav__price span{font-size:.78125rem;font-weight:500;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 22px;font-size:.98rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--green);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the destinations, flush left on the same plate, under a kente hairline */
.nav__menu{padding-block:0 4px;border-top:1px solid var(--line)}
.menu{
  display:flex;flex-wrap:wrap;gap:0 30px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:42px;
}
.menu a{
  display:inline-block;padding:10px 0;font-family:var(--display);
  font-size:1.02rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--green)}
.menu a[aria-current="page"]{color:var(--green);border-bottom-color:var(--gold)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT on bare sand.
   No card and no plate behind the product on purpose. root-surge raises amber
   tendrils behind the bottle and opens a green root spread beneath it, and both
   are drawn on .hero__media's own pseudo-elements -- a box behind the bottle
   would hide the half of the motif that matters. */
.hero{position:relative;background:var(--paper);padding:62px 0 66px;overflow-x:clip}
.hero__grid{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:48px;align-items:center;
  padding-block:0;
}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 20px}
.hero h1 em{font-style:normal;color:var(--crimson-d)}
/* the Quick Answer: an off-white plate under a full-width kente band */
.answer{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px 20px;margin:0 0 20px;
  box-shadow:var(--shadow);overflow:hidden;
}
.answer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--kente)}
.answer p{margin:0 0 .75em;font-size:1.062rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 22px;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 22px;margin:0 0 18px;font-size:0.9688rem;font-weight:500;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.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 20px;padding:0}
.factpills li{
  font-size:0.9062rem;font-weight:500;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 15px;border-radius:999px;
}
.factpills li b{font-family:var(--display);font-size:1.04rem;font-weight:600;color:var(--green)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures>*{min-width:0}
.figures div{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--gold);padding:14px 16px;border-radius:0 0 var(--radius) var(--radius)}
.figures b{display:block;font-family:var(--display);font-size:1.86rem;font-weight:700;color:var(--green);line-height:1.04}
.figures span{display:block;font-size:0.9062rem;font-weight:500;color:var(--ink-3);margin-top:4px}
/* the product sits on the sand, in front of the surge and above the roots */
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px 10px 30px}
.hero__card img{width:100%;max-width:430px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 26px 40px rgba(36,28,14,.34))}
.hero__cap{margin:18px 0 0;font-size:.8438rem;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);text-align:center}

/* ---- inner page head */
.phead{padding:38px 0 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:0.9062rem;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 18px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.16rem;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 NAV does
   not have to carry them, which is what lets the masthead beneath it stay
   mostly whitespace. 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.

   A deep green band, not a gold one: gold is a fill colour on this site and a
   strip of small text on bright gold cannot reach 4.5:1 in any ink. Sand-white
   on the green measures 7.58:1 and the gold figures inside it 4.71:1. */
.util{background:var(--green);color:var(--on-green);font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:9px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--gold);flex:0 0 auto;margin-right:11px}
.util b{color:var(--gold-l);font-weight:600}
.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 a third of a phone's first screen.
     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 -- root-surge ---------------------------------------- */
.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(168deg,#f3e7cf 0%,#ebd3a5 54%,#f3e7cf 100%)}.hero__media::before{content:'';position:absolute;left:50%;bottom:-4%;width:66%;height:118%;translate:-50% 0;background:repeating-linear-gradient(92deg,rgba(208,140,18,0.00) 0 17px,rgba(208,140,18,0.46) 17px 20px,rgba(208,140,18,0.00) 20px 36px);-webkit-mask-image:linear-gradient(0deg,#000 2%,rgba(0,0,0,.42) 44%,transparent 88%);mask-image:linear-gradient(0deg,#000 2%,rgba(0,0,0,.42) 44%,transparent 88%);filter:blur(2px);animation:pgSurge 8.5s ease-in-out infinite;z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;bottom:0;width:150%;height:48%;translate:-50% 0;background:radial-gradient(ellipse at 50% 100%,rgba(18,74,48,0.46) 0%,rgba(18,74,48,0.17) 40%,transparent 72%);filter:blur(12px);animation:pgRoot 9.5s ease-in-out infinite;z-index:0;pointer-events:none}@keyframes pgSurge{0%,100%{transform:translateY(9%);opacity:.30}50%{transform:translateY(-8%);opacity:.92}}@keyframes pgRoot{0%,100%{transform:scaleX(.80);opacity:.32}50%{transform:scaleX(1.08);opacity:.80}}
@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.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media (max-width:980px){
  .hero{padding:44px 0 52px}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .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:7}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 104px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 104px) - 28px); min-height: calc(100svh - var(--navh, 104px) - 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;}
}
/* --- end of the copied hero responsive rules --- */

/*!SITE-HOME-CRIT-START*/
/* Home hero, DESKTOP ONLY: the buy button on the first screen.
   Measured at 1440x900 before this block: the CTA row opened at y=932, 32px
   under the fold, because the roadmap paragraph sat between the Quick Answer
   and the buttons. Desktop reading order becomes eyebrow, headline, answer,
   buttons, payment line, then the evidence. The PHONE order is composed
   separately with display:contents under 980px and is not touched here.
   Above the marker because order and margin move boxes: this is inlined into
   every page, and `.hero__copy` exists only on the home page. */
@media (min-width:981px){
  .hero__copy>*{order:6}
  .hero__copy>.eyebrow{order:1}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:3}
  .hero__copy>.hero__cta{order:4}
  .hero__copy>.hero__sub{order:5}
  .hero__copy>.hero__road{order:6}
  .hero__copy>.factpills{order:7}
  .hero__copy>.figures{order:8}
}
/* The recommended tier is raised with margin, never transform: the reveal
   pass sets transform:none on arrival and would drop it back.

   BOTH margins, and that is the whole point. `.prices` stretches its items,
   so a bare negative margin-top does not raise the card -- it makes it 14px
   TALLER, and the button's offset inside its own card grows by 14px while its
   siblings' does not. That is the exact signature check_pack_baselines.py
   hunts for, and it flagged this at all four widths when the lift was written
   with margin-top alone. Equal and opposite margins leave the used height
   identical to its siblings' and simply translate the box up, which is the
   estate pattern (gomemohive.com, 12px, offsets 645/645/645). Measured after:
   594/594/594.

   Only in the three-column layout; under 760px the featured card is already
   pulled to the front with order:-1 and a lift would just crowd the heading. */
@media (min-width:761px){
  body:has(.hero) .card--pack.featured{margin-top:0;margin-bottom:0}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:64px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec--center .eyebrow{justify-content:center}
.sec__head{max-width:var(--measure);margin:0 0 28px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}

/* one measure, centred; multi-column components keep the full wrap */
@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>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps,.sec>.wrap>.qa{
    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}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
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;font-size:1.02rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--on-green);background:var(--green)}
th a{color:var(--gold-l)}
tbody tr:nth-child(even){background:#f7efdd}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--green)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- 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);padding:22px 24px 22px 74px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:22px;top:20px;width:38px;height:38px;
  display:grid;place-items:center;
  background:linear-gradient(176deg,var(--gold-l),var(--gold));color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:1.2rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: the kente band drawn across the top edge */
.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))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 22px;overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--kente)}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;font-family:var(--display);font-size:1.16rem;font-weight:600;color:var(--green)}
.callout p:last-child{margin:0}
/* the alert takes the band's crimson, which is the only place this site uses
   crimson as a rule rather than as a word */
.alert{background:#fbeee5;border:1px solid #edd3c4;border-left:4px solid var(--crimson);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;font-family:var(--display);font-size:1.16rem;font-weight:600;color:var(--crimson-d)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.52rem;font-weight:500;line-height:1.34;color:var(--green);border-left:4px solid var(--gold);padding:6px 0 6px 24px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;font-weight:400;line-height:1.6;color:var(--ink-3);margin-top:10px}
.keypoints{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 20px;margin:0 0 1.2em;overflow:hidden}
.keypoints::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--kente)}
.keypoints>b{display:block;margin-bottom:8px;font-family:var(--display);font-size:1.16rem;font-weight:600;color:var(--green)}
.keypoints ul{margin:0;padding-left:20px}
.keypoints li:last-child{margin-bottom:0}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;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 the right-hand half of the block is 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 inside the media query. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.14fr 1fr 1fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>div{min-width:0;padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem}
.versus>div:nth-child(3n+1){font-weight:600;background:#f7efdd;color:var(--green)}
.versus__h{background:var(--green)!important;color:var(--on-green)!important;font-family:var(--display);
  font-weight:600;font-size:1rem;letter-spacing:.04em;text-transform:uppercase}
.versus__h a{color:var(--gold-l)}

/* ---- 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 sets that floor, which pushes the column wider than
   the grid box on a phone. 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-left:4px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;padding:24px 26px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top>*{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-family:var(--display);font-size:1rem;font-weight:600;letter-spacing:.03em;
  color:var(--on-green);background:var(--green);padding:4px 14px;border-radius:999px;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}
.card--pack::before{display:none}
/* No lift on the featured card. A negative margin-top raises its box, which
   makes it taller than its siblings and breaks the rule that a pricing row
   shares one height and one button baseline. The card is already unmistakable
   from its gold border, its deeper shadow, its coloured head band and its flag.
   (A transform would move it without changing the box, but the reveal
   animation overwrites transform -- which is why the lift was a margin.) */
.card--pack.featured{border-color:var(--gold);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:15px 22px;display:flex;align-items:center;gap:10px}
.pack__head>*{min-width:0}
.card--pack.featured .pack__head{background:linear-gradient(176deg,var(--green-2),var(--green));border-bottom-color:var(--green)}
.card--pack.featured .pack__head b{color:var(--on-green)}
.card--pack.featured .pack__head span{color:var(--on-green-2)}
.pack__head b{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:.02em;color:var(--green)}
.pack__head span{font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--gold);color:var(--ink);font-family:var(--display);
  font-size:0.875rem;font-weight:700;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:22px 22px 24px}
.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:3rem;font-weight:700;color:var(--green);line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1.1rem;font-weight:600;top:-.78em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:6px 0 14px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:700;color:var(--green)}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.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);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px;border-top:3px solid var(--gold)}
.shots figcaption b{display:block;margin-bottom:5px;font-family:var(--display);font-size:1.14rem;font-weight:600;color:var(--green)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}

/* ---- 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);padding:20px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-family:var(--display);font-size:1.1rem;font-weight:600;margin-bottom:5px;color:var(--green)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:78px minmax(0,1fr) 52px;gap:12px;align-items:center;margin:0 0 9px;font-size:.9375rem}
.meter__row>*{min-width:0}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--green))}

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius);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:18px 50px 18px 22px;cursor:pointer;position:relative;list-style:none;
  font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:.01em;color:var(--green)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--wash)}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;translate:0 -50%;
  font-family:var(--text);font-size:1.38rem;font-weight:400;color:var(--gold-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 22px 20px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- the answer-engine summary block */
.qa{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 26px 12px;margin:0 0 1.2em;overflow:hidden}
.qa::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--kente)}
.qa>p:first-of-type{color:var(--ink-2);font-size:1rem}
.qa .tablewrap{border:0;border-top:1px solid var(--line);border-radius:0;margin-inline:-26px;margin-bottom:0}
.qa table{min-width:480px}

/* ---- 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 that pushes a single <a> past a 390px viewport --
   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:4px solid var(--green);
  border-radius:0 var(--radius) var(--radius) 0;padding:24px 26px;margin:0 0 1.2em}
.byline>*{min-width:0}
.byline__mark{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;
  background:linear-gradient(176deg,var(--gold-l),var(--gold));color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:1.3rem;border-radius:50%}
.byline b{display:block;margin-bottom:6px;font-family:var(--display);font-size:1.16rem;font-weight:600;color:var(--green)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 34px;overflow:hidden}
.final::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--kente)}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center}
.final--media>*{min-width:0}
.final__img img{width:210px}
.final h2{margin:0 0 10px}
.final__price{font-weight:600;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);
  padding:22px 24px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--gold);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.22rem;font-weight:600;color:var(--green);margin-bottom:6px}
.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)}
.form>*{min-width:0}
.field label{display:block;font-weight:600;font-size:.9688rem;margin-bottom:6px;color:var(--green)}
.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:0.9062rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto;padding-block:0}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;padding:22px 26px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;font-family:var(--display);font-size:1.16rem;font-weight:600;color:var(--green)}
.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{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 22px;overflow:hidden}
.posts article::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--kente)}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.062rem;color:var(--ink-2)}
.posts p:last-child{margin:0}
.dtable{min-width:520px}

/* ---- footer: a deep green offer band, then the INSET PANEL, then the legal
   text on bare sand outside it.

   The panel is the slot's whole footer idea. It is an off-white plate with a
   22px radius that stops short of the page edge on all four sides -- the
   gutter comes from .fwrap's .wrap padding-inline and the clearance above and
   below from its padding-block -- and the FDA disclaimer and the twelve-item
   legal list sit OUTSIDE it, directly on the sand, where the page ground shows
   through. Nothing else on the estate ends this way: the other footers are full
   -bleed slabs, ruled bands or spines. */
.fcta{background:linear-gradient(168deg,var(--green-2) 0%,var(--green-d) 100%);color:var(--on-green);padding:54px 0 56px}
.fcta h2,.fcta__h{color:var(--on-green)}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center}
.fcta__box>*{min-width:0}
.fcta__eye{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:.875rem;
  font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-l);margin-bottom:10px}
.fcta__eye::before{content:"";width:26px;height:3px;background:var(--kente);flex:0 0 auto}
.fcta__h{font-family:var(--display);font-size:2rem;font-weight:700;line-height:1.16;letter-spacing:.006em;margin:0 0 12px}
.fcta p{color:var(--on-green-2)}
.fcta__sm{font-size:.9375rem;color:var(--on-green-2);margin:14px 0 0}
.fcta__sm a,.fcta p a{color:var(--gold-l)}
.fcta__img img{width:290px}
footer{background:var(--paper)}
.fwrap{padding-block:40px 30px}
.fpanel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:38px 36px 6px;box-shadow:var(--shadow)}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:28px;padding:0 0 30px}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.92rem;font-weight:700;color:var(--green);letter-spacing:.02em;
  text-transform:uppercase;line-height:1}
.fbrand span{color:var(--crimson)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:10px 0 16px}
.fcard p{font-size:1.062rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--green)}
.fh{font-family:var(--display);font-size:.9375rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-d);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:20px 0;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3);min-width:0}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3);min-width:0}
/* outside the panel, on bare sand */
.disc{padding-block:6px 36px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--green)}
.disc__list{columns:2;column-gap:40px;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:.72em;width:9px;height:3px;background:var(--kente)}
.copy{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line-2);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--green-d);color:var(--on-green);
  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-family:var(--display);font-size:1.12rem;font-weight:600;letter-spacing:.02em}
.buybar__t span{color:var(--on-green-2)}
.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}
}

/* ---- the order hand-off stub, which carries no chrome of its own */
.muted{color:var(--ink-3)}

/* ---- responsive */
@media (max-width:1100px){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:26px}
  .fpanel{padding:34px 30px 6px}
}
@media (max-width:980px){
  :root{--navh:104px}
  .hero{padding:44px 0 52px}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .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:7}
  .factpills{order:8}
  .figures{order:9}
  .nav__price{display:none}
  .nav__top{padding-block:16px}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .burger{display:block}
  .nav__buy{display:none}
  .fcta__box{grid-template-columns:minmax(0,1fr)}
  .fcta__img{display:none}
  .final--media{grid-template-columns:minmax(0,1fr);gap:22px}
  .final__img img{width:180px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 0}
  .grid.g2,.grid.g3{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 sit at the start of 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}
  .fgrid{grid-template-columns:1fr 1fr;gap:24px}
  .fpanel{padding:28px 22px 6px;border-radius:16px}
  .fwrap{padding-block:28px 22px}
  .fcta{padding:42px 0 44px}
  .fcta__h{font-size:1.66rem}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
  .qa{padding:22px 20px 10px}
  .qa .tablewrap{margin-inline:-20px}
  .final{padding:26px 22px}
  .meter__row{grid-template-columns:66px minmax(0,1fr) 46px;gap:9px}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:minmax(0,1fr)}
  .bw b{font-size:1.4rem}
  .brand>svg,.brand__glyph{width:34px;height:34px}
}

/* ---- hero: the product breathes over the root spread ----------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted.

   There is no card on this hero by design, so the bottle needs its own ground:
   a warm elliptical shadow directly beneath it, sized to the product rather
   than to the column, sitting between the amber tendrils and the green roots
   that hero_motifs.py draws on .hero__media. */
.hero__card{isolation:isolate}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:22px;translate:-50% 0;
  width:54%;height:18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(36,28,14,.42),transparent 74%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  /* The float goes on the CARD, never on the <img>. The image is the LCP
     element and is preloaded; animating it is what the house rule rules out. */
  .hero__card{animation:pgFloat 8.5s ease-in-out infinite}
  @keyframes pgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}

/* ---- 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: this masthead is two rows and
   its height changes between breakpoints, so a hardcoded offset tucks the
   bottle under the bar at one width or leaves a gap at the other.

   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.

   Requires .hero NOT to clip on the block axis -- any non-visible overflow on
   an ancestor becomes the scrollport sticky resolves against. */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 104px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 104px) - 28px);
    min-height: calc(100svh - var(--navh, 104px) - 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; }
}

/* --- 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}

/* ==== 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 surface, design slot "settle" ================================
   Paint only -- radius, shadow, gradient, transform, animation -- so this
   sits below the critical marker and needs a restamp, not a rebuild.

   Scope: `body:has(.hero)` matches the home page alone, because `class="hero"`
   is on index.html and nowhere else on this site. The header, the buy bar,
   `.card` and `.card--pack` all appear on inner pages too, so every rule that
   touches them carries that scope rather than being written bare.

   Specificity, not source order: modern_surface.py and footer_type.py
   re-append their own blocks AFTER this one on every build. `body:has(.hero) X`
   scores (0,2,1) against their bare `.card` (0,1,0) and their `.card--pack:hover`
   (0,2,0), so this block wins wherever they overlap -- including the hover
   rules, which have to be restated here or their lift would be overridden by
   this block's resting shadow.

   Depth language for this slot: ONE soft stop, no contact shadow, tinted with
   this site's own inks (36,28,14 ink and 138,90,16 gold-d), never neutral
   black. Card corners 18px, controls 12px. */
body:has(.hero){
  --pgpx-rad-card:18px;
  --pgpx-rad-ctl:12px;
  --pgpx-drop:0 12px 30px rgba(36,28,14,.13);
  --pgpx-drop-up:0 18px 44px rgba(36,28,14,.18);
  --pgpx-drop-gold:0 12px 30px rgba(138,90,16,.30);
  --pgpx-drop-gold-up:0 18px 40px rgba(138,90,16,.38);
  --pgpx-drop-green:0 16px 40px rgba(18,74,48,.26);
  --pgpx-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- panels: one radius, one soft lift */
body:has(.hero) .card,
body:has(.hero) .step,
body:has(.hero) .tablewrap,
body:has(.hero) .faq,
body:has(.hero) .qa,
body:has(.hero) .final,
body:has(.hero) .versus,
body:has(.hero) .answer,
body:has(.hero) .split__img,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .rel a{border-radius:var(--pgpx-rad-card);box-shadow:var(--pgpx-drop)}

/* The left-bar components keep their flat left edge -- the 4px rule IS the
   component. Only the three free corners are rounded. */
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .ingcard,
body:has(.hero) .byline{border-radius:0 var(--pgpx-rad-card) var(--pgpx-rad-card) 0;box-shadow:var(--pgpx-drop)}
/* The hero figures hang off a 3px gold rule: bottom corners only. */
body:has(.hero) .figures div{border-radius:0 0 var(--pgpx-rad-card) var(--pgpx-rad-card);box-shadow:var(--pgpx-drop)}
body:has(.hero) .fpanel{box-shadow:var(--pgpx-drop)}

/* ---- anything clickable answers the pointer: 2px, with a transition */
body:has(.hero) .rel a,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .card--pack{transition:box-shadow .24s ease,transform .24s var(--pgpx-ease),border-color .24s ease}
body:has(.hero) .rel a:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .badgewall figure:hover{transform:translateY(-2px);box-shadow:var(--pgpx-drop-up)}
body:has(.hero) .rel a:hover{border-color:var(--gold)}
body:has(.hero) .rel a:focus-visible{transform:translateY(-2px);box-shadow:var(--pgpx-drop-up)}

/* ---- controls: 12px, and the pair reads as two weights.
   The buying CTA is the only gradient on the page; the secondary is a solid
   panel with a ring. The old primary was a flat plate with a hard 3px inset
   bevel, which is the dated signature this pass exists to remove. */
body:has(.hero) .btn{
  border-radius:var(--pgpx-rad-ctl);
  transition:transform .22s var(--pgpx-ease),box-shadow .22s ease,filter .22s ease,background-color .22s ease;
}
body:has(.hero) .btn--amber{
  background:linear-gradient(135deg,#eab949 0%,var(--gold-l) 38%,var(--gold) 74%,#b57709 100%);
  color:var(--ink);box-shadow:var(--pgpx-drop-gold);
}
body:has(.hero) .btn--amber:hover{transform:translateY(-2px);box-shadow:var(--pgpx-drop-gold-up);color:var(--ink)}
body:has(.hero) .btn--ghost{
  background:var(--panel);color:var(--green);
  box-shadow:inset 0 0 0 1.5px var(--line-2),var(--pgpx-drop);
}
body:has(.hero) .btn--ghost:hover{
  background:var(--wash);color:var(--green-d);
  transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--green-2),var(--pgpx-drop-up);
}
/* The press has to survive the hover lift, which now outranks .btn:active. */
body:has(.hero) .btn:active{transform:translateY(0)}
/* A gold outline on a gold plate is not a focus ring. */
body:has(.hero) .btn:focus-visible{outline:3px solid var(--green);outline-offset:3px}
body:has(.hero) .btn--ghost:focus-visible{outline-color:var(--gold-d)}
body:has(.hero) .burger{border-radius:var(--pgpx-rad-ctl)}

/* ---- chrome */
body:has(.hero) .nav{box-shadow:0 1px 0 var(--line),0 14px 30px rgba(36,28,14,.06)}
body:has(.hero) .buybar{box-shadow:0 -12px 30px rgba(36,28,14,.22)}

/* ---- pricing row, slot ribbon: corner flag.
   The engineering that gives the three Add To Cart buttons one baseline --
   the fixed head, the fixed image box, margin-top:auto on the button and the
   featured card raised with MARGIN -- is left exactly as it is. Everything
   here is surface. */
body:has(.hero) .card--pack{
  border-radius:var(--pgpx-rad-card);
  box-shadow:inset 0 0 0 1px var(--line),var(--pgpx-drop);
}
body:has(.hero) .card--pack:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line-2),var(--pgpx-drop-up)}
body:has(.hero) .card--pack.featured{
  background:linear-gradient(176deg,#ffffff 0%,var(--panel) 34%,#f6efdf 100%);
  box-shadow:var(--pgpx-drop-green);
}
body:has(.hero) .card--pack.featured:hover{box-shadow:0 22px 52px rgba(18,74,48,.32)}
body:has(.hero) .pack__flag{
  background:linear-gradient(135deg,var(--gold-l) 0%,var(--gold) 62%,#b57709 100%);
  border-radius:0 var(--pgpx-rad-card) 0 var(--pgpx-rad-ctl);
  box-shadow:0 8px 18px rgba(138,90,16,.30);
}
body:has(.hero) .card--pack.featured .pack__flag{
  background:linear-gradient(135deg,var(--green-2) 0%,var(--green) 66%,var(--green-d) 100%);
  color:var(--on-green);box-shadow:0 8px 18px rgba(18,74,48,.34);
}
/* Dashed separators between the feature rows, drawn as a background so the
   row heights -- and with them the shared button baseline -- do not move. */
body:has(.hero) .pack__perks li:not(:last-child){
  background-image:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 10px);
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
}

/* ---- hero ground and the "settle" motif ------------------------------
   A soft halo that breathes once and settles: fifteen and nineteen seconds,
   one pass, `both` so the resting state is what the reader sits with. It is
   drawn on .hero__media's own pseudo-elements, never on the <img>, which is
   the preloaded LCP element. Sized at 132% and 150% of a 521px column so it
   reads OUTSIDE the 420px product card rather than behind it.
   Transform and opacity only; the blur is static.
   The doubled class and the descendant `.hero` are specificity, not style:
   the root-surge motif above the critical marker declares these same
   pseudo-elements, and every property it sets is restated here. */
.hero.hero{
  background:
    radial-gradient(86% 64% at 74% 40%,rgba(224,165,42,.20) 0%,rgba(224,165,42,0) 64%),
    linear-gradient(176deg,#f7efdd 0%,#f3e7cf 44%,#ecdcbd 100%);
}
.hero .hero__media::before{
  content:"";position:absolute;left:50%;top:50%;bottom:auto;
  width:132%;height:106%;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(208,140,18,.40) 0%,rgba(208,140,18,.19) 40%,rgba(208,140,18,.06) 64%,rgba(208,140,18,0) 78%);
  -webkit-mask-image:none;mask-image:none;filter:none;
  transform-origin:50% 50%;
  animation:pgpSettle 15s cubic-bezier(.16,.72,.24,1) .25s 1 both;
  z-index:0;pointer-events:none;
}
.hero .hero__media::after{
  content:"";position:absolute;left:50%;top:auto;bottom:4%;
  width:150%;height:44%;translate:-50% 0;
  background:radial-gradient(ellipse at 50% 100%,rgba(18,74,48,.32) 0%,rgba(18,74,48,.11) 44%,rgba(18,74,48,0) 74%);
  -webkit-mask-image:none;mask-image:none;filter:blur(10px);
  transform-origin:50% 100%;
  animation:pgpGround 19s cubic-bezier(.16,.72,.24,1) .1s 1 both;
  z-index:0;pointer-events:none;
}
@keyframes pgpSettle{
  0%{transform:scale(.84);opacity:0}
  36%{opacity:.92}
  62%{transform:scale(1.07);opacity:.84}
  100%{transform:scale(1);opacity:.60}
}
@keyframes pgpGround{
  0%{transform:scaleX(.72);opacity:0}
  44%{opacity:.86}
  100%{transform:scaleX(1);opacity:.62}
}
/* The product breathes more slowly than it did: this slot settles. */
.hero .hero__card{animation-duration:14s}

@media (prefers-reduced-motion:reduce){
  /* The motif block above the marker hides both pseudo-elements outright at
     opacity:0 !important. Here they keep their settled appearance and simply
     do not move -- same specificity rule, one class deeper. */
  .hero .hero__media::before{animation:none!important;opacity:.55!important}
  .hero .hero__media::after{animation:none!important;opacity:.58!important}
  .hero .hero__card{animation:none!important}
  body:has(.hero) .rel a:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .badgewall figure:hover,
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .btn--amber:hover,
  body:has(.hero) .btn--ghost:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== 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 .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 25 box-shadow declaration(s)
   and 0 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 (36,28,14), 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(36,28,14,.06), 0 6px 18px rgba(36,28,14,.07);
  --lift:0 2px 6px rgba(36,28,14,.09), 0 16px 34px rgba(36,28,14,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.split__img,
.answer{box-shadow:var(--shadow)}

/* 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. */
.callout,
.alert,
.toc,
.byline,
.ingcard,
.split__img{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 ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}