/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Zilla Slab Fallback";src:local("Georgia");font-weight:400;size-adjust:98.16%;ascent-override:96.17%;descent-override:26.08%;line-gap-override:0.00%}
@font-face{font-family:"Zilla Slab Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:85.95%;ascent-override:109.83%;descent-override:29.78%;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 ==== */
/* glproformula.com - GLPro, licensed U.S. retail desk.
   Design slot row 35 (_generators/batch7_assignments.py):
   Zilla Slab over Sarabun; pale wheat ground with a deep pine band behind the
   product; header one row with the wordmark centred between a left fact list
   and a right phone block; footer a single wide pine slab with its links in
   four rows reading across; band-settle hero motif; shield-and-wave mark.

   COLOUR IS READ OFF THE BOTTLE, not off the reference site.
   The label is white with a deep teal band (sampled #005463 to #00606d) and a
   thin gold hairline under it (sampled around #c8bb7f). The seller's own
   listing artwork sits on near-black pine. So: teal is the accent, gold is the
   metal, pine is the dark ground and wheat is the page.

   ONE NOTE ON WHICH TOKEN THE SHARED TOOLS PICK UP.
   hero_motifs.py and brand_marks.py both take the MOST SATURATED token in the
   root block between 0.15 and 0.72 lightness. That is --gold by design. The
   band-settle motion has to land on the pine inside the arch, and teal on pine
   is mud; gold on pine reads as a level line, which is the whole motif.

   TWO STRINGS THIS COMMENT MUST NEVER CONTAIN, because two shared tools split
   the file on them: the root selector spelled out, and a close brace. Both
   tools take the text after the FIRST occurrence of the selector and stop at
   the first brace, so a mention up here hands them an empty token list and
   they fall back to a default palette in silence. The first run of
   hero_motifs.py on this site emitted a terracotta band on white for exactly
   that reason.

   Everything above CRITICAL-END is inlined into every page head: the topline,
   the header, the hero and the motif - the whole first screen. */

/* ---- tokens */
:root{
  /* the ground: pale wheat */
  --paper:#f7f1e2;
  --panel:#fffdf7;
  --tint:#efe7d1;
  /* ink, warm to match the ground */
  --ink:#211c12;
  --ink-2:#4e4738;
  --ink-3:#6f6754;
  /* the pine band behind the product, and the footer slab */
  --pine:#0d3a33;
  --pine-2:#154940;
  --pine-3:#061f1b;
  --on-pine:#e7ece2;
  --on-pine-2:#b6c3b5;
  /* accent: the teal band on the bottle label */
  --accent:#0a5663;
  --accent-d:#063f49;
  --accent-l:#e3eef0;
  /* metal: the gold hairline on the label. The most saturated token here, on
     purpose - see the note at the top of this file. */
  --gold:#b08d32;
  --gold-d:#8a6d22;
  --gold-l:#f2e8ca;
  /* hairlines and states */
  --line:#e2d9c2;
  --line-2:#c9bc9e;
  --good:#1e6b45;
  --warn:#8a5f1c;
  /* metrics */
  --wrap:1180px;
  --measure:760px;
  --measure-wide:980px;
  --radius:6px;
  --radius-lg:14px;
  --arch:52% 52% 9px 9px / 34% 34% 3% 3%;
  --shadow:0 1px 2px rgba(33,28,18,.05),0 10px 28px rgba(33,28,18,.07);
  --shadow-lg:0 22px 54px rgba(13,58,51,.16);
  --navh:96px;
  --serif:"Zilla Slab","Zilla Slab Fallback",Georgia,"Times New Roman",serif;
  --sans:"Sarabun","Sarabun Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
*{min-width:0}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--navh) + 16px)}
body{
  overflow-x:clip;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,svg,table{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-d)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:700;line-height:1.16;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,1.3rem + 2.3vw,3.1rem);letter-spacing:-.015em}
h2{font-size:clamp(1.55rem,1.2rem + 1.2vw,2.2rem);letter-spacing:-.01em}
h3{font-size:1.22rem}
h4{font-size:1.05rem}
p,li,dd,dt,blockquote{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--pine);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* The eyebrow names the JOB of the section beneath it. Every section has one.
   Two gold rules beneath a short slab-serif label: the arch motif in miniature. */
.eyebrow{
  display:inline-block;font-family:var(--serif);font-size:.875rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);
  margin:0 0 12px;padding:0 0 7px;position:relative;
}
.eyebrow::after{
  content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--gold);
}

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:13px 28px;border:2px solid transparent;border-radius:var(--radius);
  font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  background:var(--pine);color:#fff;
  transition:background .18s ease,transform .18s ease,border-color .18s ease;
}
.btn:hover{background:var(--pine-2);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold);color:#22190a;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.btn--gold:hover{background:var(--gold-d);color:#fff}
.btn--ghost{background:transparent;color:var(--pine);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--panel);color:var(--pine);border-color:var(--pine)}
.btn--lg{min-height:58px;padding:15px 32px;font-size:1.05rem}
.btn--wide{width:100%}

/* ---- 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 any of them - 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 entirely (hero.md).
   It lives above CRITICAL-END because it is the first thing painted; appended
   to the end of this file it would load async and flash unstyled. */
.util{background:var(--pine-3);color:var(--on-pine-2);font-size:.9375rem;line-height:1.42}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 11px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{
  content:"";width:5px;height:5px;flex:0 0 auto;margin-right:6px;
  background:var(--gold);transform:rotate(45deg);opacity:.75;
}
.util b{color:var(--on-pine);font-weight:600}
.util a{color:inherit;text-decoration:none}
.util a:hover{color:var(--gold-l);text-decoration:underline}

/* ---- header: ONE row. A fact list left, the wordmark centred with the menu
   directly beneath it, the order-support phone and the CTA right.
   Nothing in the row may wrap; it sheds instead (pitfall 16). */
.nav{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--line)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:linear-gradient(90deg,transparent,rgba(176,141,50,.5) 28%,rgba(176,141,50,.5) 72%,transparent)}
/* The whole header is 92px, and the number matters: it and the topline sit
   above the hero on every page, so every pixel here is a pixel the H1 and the
   Quick Answer lose off the first screen. */
.nav__row{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding-block:10px;
}
.nav__facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
  font-size:.9375rem;color:var(--ink-3);white-space:nowrap}
.nav__facts b{color:var(--ink);font-weight:700}
.nav__mid{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand>svg{width:34px;height:34px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.05}
.bw b{font-family:var(--serif);font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.bw b em{font-style:normal;color:var(--accent)}
.bw small{font-size:0.9062rem;font-weight:500;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.menu{display:flex;flex-wrap:nowrap;gap:0 18px;list-style:none;margin:0;padding:0;
  justify-content:center;line-height:1.3}
.menu a{
  display:inline-block;padding:2px 0 3px;font-size:.9rem;font-weight:600;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--accent)}
.menu a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--gold)}
/* The phone block is a 2x2 grid rather than a stack, so the row's height comes
   from the wordmark and the menu rather than from label + number + button in a
   column. Stacked, this cell measured ~85px and took the whole header past
   110; laid out this way it is ~44 and the header lands at ~92. The fold is
   the reason: the H1 has to be above it at 1440x900 (hero.md). */
/* min-width:max-content, NOT the global min-width:0. A `1fr` grid track is
   minmax(auto,1fr) and its floor is the item's min-content width; the global
   `*{min-width:0}` sets that floor to zero, so the track collapsed under a
   nowrap phone number and the CTA printed straight through it. Measured at
   1440 before this line. */
.nav__tel{display:grid;grid-template-columns:auto auto;align-items:center;
  column-gap:14px;justify-content:end;min-width:max-content}
.nav__tel__l{grid-column:1;grid-row:1;font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.nav__tel__n{grid-column:1;grid-row:2;font-family:var(--serif);font-size:1.12rem;
  font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav__tel__n:hover{color:var(--accent)}
.nav__buy{grid-column:2;grid-row:1/span 2;min-height:44px;padding:9px 16px;font-size:.9375rem}
.burger{
  display:none;width:46px;height:44px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:11px 10px;
}
.burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: copy LEFT on wheat, the product RIGHT standing in a tall arched
   recess cut into the pine band.

   The pine band is .hero::after, a full-height slab down the right of the
   section. The recess is .hero__arch, darker than the slab, with an inner
   shadow at its crown and a gold rim at its opening, so it reads as cut IN
   rather than laid ON. The bottles stand on the arch floor and throw their
   shadow onto it (.hero__card::after).

   The motion is the band-settle motif on .hero__media's pseudo-elements: a
   gold band rises, overshoots and settles to a level line across the arch
   floor. Nothing here animates the <img> - it is the LCP element and it is
   preloaded - and nothing animates the H1. */
/* 44px, not 52. The hero CTA measured y=903 against a 900px fold at 1440 --
   three pixels below it, which is the same as being off it. Every value in
   this column between the eyebrow and the CTA was trimmed once for that. */
.hero{position:relative;overflow-x:clip;background:var(--paper);padding:44px 0 56px;
  border-bottom:1px solid var(--line)}
.hero::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:47%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--pine-2),var(--pine) 38%,var(--pine-3));
  border-left:1px solid rgba(176,141,50,.35);
}
.hero__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:46px;align-items:start;
}
.hero__copy{display:flex;flex-direction:column;min-width:0}
/* The hero H1 is sized DOWN from the global h1, and capped in px rather than
   ch: a ch measure resolves against each element's own font-size, so one token
   gives every heading a different edge (pitfall 40). At 1440 this lands the
   headline on three lines inside a ~600px column, which keeps the Quick Answer
   and the CTA on the first screen. */
.hero h1{margin:0 0 18px;max-width:560px;font-size:clamp(1.95rem,1.25rem + 2vw,2.75rem)}
.hero h1 em{font-style:normal;color:var(--accent)}

/* The Quick Answer sits on its own opaque card, so it is never on the pine. */
.answer{
  background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;padding:19px 24px;margin:0 0 16px;
  box-shadow:var(--shadow);
}
.qtag{
  display:inline-block;font-family:var(--serif);font-size:.875rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);margin:0 0 6px;
}
.answer p{margin:0;font-size:1.0625rem}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 16px;max-width:620px}
.ticks{list-style:none;margin:0 0 18px;padding:0}
.ticks li{position:relative;padding-left:30px;margin:0 0 .5em;font-size:1rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.52em;width:13px;height:7px;
  border-left:2.5px solid var(--good);border-bottom:2.5px solid var(--good);
  transform:rotate(-45deg);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 20px;
  font-size:.9375rem;color:var(--ink-3)}
.pay img{width:212px;height:auto}
.hero__sub{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;
  font-size:1rem;font-weight:600;color:var(--ink-2);
}
.hero__sub span{display:inline-flex;align-items:center;gap:8px}
.hero__sub span::before{content:"";width:8px;height:8px;flex:0 0 auto;
  background:var(--gold);transform:rotate(45deg)}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.9375rem;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:6px 15px;
}
.factpills li b{color:var(--ink);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);border-top:3px solid var(--gold);
  border-radius:var(--radius);padding:14px 16px}
.figures b{display:block;font-family:var(--serif);font-size:1.7rem;font-weight:700;
  color:var(--pine);line-height:1.05}
.figures span{display:block;font-size:.9375rem;color:var(--ink-3);margin-top:2px}

/* the product column */
.hero__media{position:relative;align-self:start}
.hero__stick{position:relative;width:100%;max-width:470px;margin-inline:auto}
.hero__arch{
  position:absolute;left:0;right:0;top:0;bottom:38px;z-index:0;pointer-events:none;
  border-radius:var(--arch);
  background:
    radial-gradient(120% 60% at 50% 100%,rgba(176,141,50,.16),transparent 62%),
    linear-gradient(180deg,var(--pine-3),#0a3029 52%,#0e3b33);
  box-shadow:
    inset 0 26px 46px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(176,141,50,.5),
    0 0 0 1px rgba(176,141,50,.34),
    0 28px 54px rgba(6,31,27,.3);
}
.hero__card{
  position:relative;z-index:2;margin:0;
  padding:clamp(58px,11vh,124px) 34px 76px;
}
.hero__card img{width:100%;height:auto;margin-inline:auto}
/* the bottles' own shadow, falling on the arch floor */
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:62px;width:72%;height:26px;
  translate:-50% 0;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent 78%);
  filter:blur(5px);
}
.hero__tag{
  position:absolute;left:50%;bottom:0;translate:-50% 0;z-index:3;white-space:nowrap;
  background:var(--panel);border:1px solid var(--line-2);border-radius:999px;
  padding:7px 17px;font-size:.9375rem;color:var(--ink-2);box-shadow:var(--shadow);
}

/* ---- inner page head */
.phead{padding:34px 0 10px;background:var(--paper);border-bottom:1px solid var(--line)}
.crumbs{font-size:.9375rem;color:var(--ink-3);margin:0 0 16px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.phead h1{margin:0 0 18px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.15rem;color:var(--ink-2);max-width:var(--measure)}


/* ---- hero motif -- band-settle ---------------------------------------- */
.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(176deg,#e0d1aa,#f7f1e2 58%,#f7f1e2)}.hero__media::before{content:'';position:absolute;left:50%;bottom:14%;width:148%;height:34%;translate:-50% 0;border-radius:44% 44% 30% 30%/60% 60% 40% 40%;background:linear-gradient(180deg,rgba(176,141,50,0.42),transparent 76%);filter:blur(14px);animation:gfSettle 12s cubic-bezier(.33,1.2,.4,1) infinite;z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;bottom:21%;width:126%;height:2px;translate:-50% 0;background:linear-gradient(90deg,transparent,rgba(176,141,50,0.60) 24%,rgba(176,141,50,0.60) 76%,transparent);animation:gfLevel 12s cubic-bezier(.33,1.2,.4,1) infinite;z-index:1;pointer-events:none}@keyframes gfSettle{0%{transform:translateY(16%) scaleY(.7);opacity:.25}44%{transform:translateY(-6%) scaleY(1.12);opacity:.75}70%,100%{transform:translateY(0) scaleY(1);opacity:.5}}@keyframes gfLevel{0%{transform:translateY(20%);opacity:.2}44%{transform:translateY(-8%);opacity:.8}70%,100%{transform:translateY(0);opacity:.55}}
@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 (min-width:981px)` for the
   sticky product column, and a stacked hero whose media column is still
   position:sticky with min-height:100vh puts a full screen of empty space
   between the H1 and the Quick Answer. Change one breakpoint and you must
   change the other, or check what the tool emits first. */
@media (max-width:980px){
  /* The pine slab is a right-hand band and there is no right hand any more, so it goes; the arch stays, free-standing on the wheat. */ .hero::after{display:none}
  .hero{padding-top:34px}
  .hero__grid{grid-template-columns:1fr;gap:30px}
  .hero__stick{max-width:420px}
  /* display:contents promotes the copy column's children to grid items so each one can be ordered individually. The naive collapse is wrong in both directions: order:-1 on the media puts a 390px image above everything and pushes the H1 to y~700, and leaving DOM order alone drops the product three screens down (hero.md). */ .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2;max-width:none}
  .hero__media{order:3;margin-bottom:8px}
  /* The CTA comes BEFORE the roadmap line on a phone. hero.md's mobile order is eyebrow, H1, shot, Quick Answer, CTA, sub, ticks, payment, and the roadmap sentence is a later addition with no place in it. Left at order 5 it pushed the CTA to y=1437 on a 390 screen, against a target of ~1100. */ .hero__cta{order:5}
  .hero__road{order:6}
  .hero__sub{order:8}
  .hero__grid{gap:22px}
}
@media (max-width:760px){
  .hero{padding-bottom:40px}
  /* The vault above the bottle is the arch's whole character on a wide screen. On a phone it is 430px of hero the Quick Answer has to fall behind, so the recess tightens around the product instead of framing it. */ .hero__card{padding:clamp(28px,5vh,52px) 22px 54px}
  .hero__card::after{bottom:44px}
}
@media (max-width:430px){
  /* The lot chip is one unbreakable line at 370px against a 350px column. */ .hero__tag{white-space:normal;text-align:center;max-width:calc(100% - 8px)}
}
@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 layout, glproformula.com -------------------------------
   Everything here MOVES A BOX, which is why it sits above CRITICAL-END and
   why the site has to be rebuilt after it changes: this block is inlined
   into the head of every page at build time and a restamp alone would leave
   the old copy in ~30 files.

   SCOPE. class="hero" is on index.html and on no other page of this site, so
   `.hero ` and `.hero ~ ` are home-only by construction. Both `.hero` and
   `#pricing` are children of main#main, so the sibling combinator reaches the
   price row without reaching pricing.html's copy of it.

   DESKTOP ONLY, on purpose. Below 981px .hero__copy is display:contents and
   its children carry a composed phone order; nothing here touches that. */
@media (min-width:981px){
  /* THE FOLD. In DOM order the buy button follows the roadmap line and the
     four evidence ticks, which put it at the very edge of a 900px screen at
     1440 wide -- this file's own note records y=903 against a 900px fold.
     Reordering the copy column reads eyebrow, headline, Quick Answer, the
     buttons, the payment line, then the evidence, and lifts the button
     roughly 280px up the page. Order only: no value in the column changes. */
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero .answer{order:3}
  .hero .hero__cta{order:4}
  .hero .pay{order:5}
  .hero .hero__road{order:6}
  .hero .ticks{order:7}
  .hero .hero__sub{order:8}
  .hero .factpills{order:9}
  .hero .figures{order:10}

  /* THE RECOMMENDED TIER, RAISED AS A TAB.
     The raise is margin on the two OTHER cards, never a transform on this
     one: the reveal pass sets transform:none and would drop it.
     The featured head then takes exactly the same number of pixels back as
     padding, so every card's image, price and button still start at the same
     y and the three Add To Cart buttons keep their shared baseline. Change
     one number here and you must change the other. */
  .hero ~ #pricing .card--pack:not(.card--best){margin-top:26px}
  .hero ~ #pricing .card--pack.card--best .pack__head{padding-top:39px}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---- sections. Flat bands in four grounds: wheat, tint, panel, pine.
   Band edges are hairlines rather than shadows; the only shadows on this site
   are under the product and under the cards that hold a price. */
.sec{padding:62px 0;position:relative}
.sec--tint{background:var(--tint);border-block:1px solid var(--line)}
.sec--panel{background:var(--panel);border-block:1px solid var(--line)}
.sec--pine{background:var(--pine);color:var(--on-pine);border-block:1px solid var(--pine-3)}
.sec--pine h2,.sec--pine h3,.sec--pine h4{color:#fff}
.sec--pine p,.sec--pine li,.sec--pine dd,.sec--pine dt{color:var(--on-pine)}
.sec--pine .eyebrow{color:var(--gold-l)}
.sec--pine .lead{color:var(--on-pine-2)}
.sec--pine a{color:var(--gold-l)}
.sec__head{max-width:var(--measure);margin:0 0 28px}
.sec__head h2{margin:0 0 10px}
.sec__head .lead{margin:0}

/* One measure, centred. Single-column content takes --measure; multi-column
   components keep the full wrap. Released below 1060px or a tablet gets a
   fixed 760px box (responsive.md). */
@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>.keypoints,.sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps,.sec>.wrap>.versus{
    max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- 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}
caption{text-align:left;padding:14px 18px 0;font-size:.9375rem;color:var(--ink-3)}
th,td{padding:13px 17px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--sans);font-weight:700;color:var(--ink);background:var(--tint);font-size:.9375rem}
td{font-size:1rem}
tbody tr:last-child td{border-bottom:0}
.tnote,.note{font-size:.9375rem;color:var(--ink-3);margin:-.3em 0 1.2em}
.dtable{min-width:520px}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 24px 20px 70px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:34px;height:34px;display:grid;place-items:center;
  background:var(--pine);color:var(--gold-l);font-family:var(--serif);font-weight:700;
  border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: flat, hairline, with a gold arch notch at the top-left corner */
.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);padding:24px}
.card::before{content:"";position:absolute;left:24px;top:-1px;width:38px;height:3px;
  background:var(--gold);border-radius:0 0 3px 3px}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--pine .card{background:var(--pine-2);border-color:#22584d}
.sec--pine .card h3{color:#fff}
.sec--pine .card p{color:var(--on-pine)}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--accent-l);border:1px solid #c9dde1;border-radius:var(--radius);
  padding:20px 24px;margin:0 0 1.2em}
.callout>b{display:block;margin-bottom:6px;color:var(--accent-d)}
.callout p:last-child,.callout ul:last-child{margin:0}
.alert{background:var(--gold-l);border:1px solid #e2d19a;border-left:4px solid var(--warn);
  border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;margin:0 0 1.2em}
.alert>b{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--serif);font-size:1.35rem;line-height:1.48;color:var(--ink);
  border-left:4px solid var(--gold);padding:2px 0 2px 24px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--sans);font-size:.9375rem;font-style:normal;
  color:var(--ink-3);margin-top:10px}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:0 0 var(--radius) var(--radius);padding:22px 24px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:10px;font-family:var(--serif);font-size:1.12rem;
  letter-spacing:.01em}
.keypoints ul{margin:0;padding-left:20px}
.keypoints li{margin:0 0 .5em}
.cautions{list-style:none;margin:0;padding:0}
.cautions li{position:relative;padding-left:22px;margin:0 0 .45em;font-size:1.062rem}
.cautions li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;
  background:var(--accent)}

/* ---- 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__img,.split__body{min-width:0}
.split--flip .split__img{order:-1}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- stat band, used inside .sec--pine */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;text-align:center}
.stats div b{display:block;font-family:var(--serif);font-size:2.3rem;font-weight:700;
  color:var(--gold-l);line-height:1.08}
.stats div span{display:block;font-size:.9375rem;color:var(--on-pine-2);margin-top:4px}

/* ---- three columns: what the seller says / what the bottle says / what a
   buyer can check for themselves. The third column is the site's whole angle. */
.versus{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 17px;border-bottom:1px solid var(--line);font-size:1rem}
.versus__h{background:var(--tint);font-weight:700;font-size:.9375rem}

/* ---- captioned images. There is no bare image row on this site. */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.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 20px}
.shots figcaption b{display:block;margin-bottom:5px}
.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 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-size:1rem;margin-bottom:6px}
/* The seal and its name are centred; the sentence under them is not. Thirty
   words of ragged-both-edges is the hardest thing on the page to read, and
   these sentences are the whole reason the wall is here. */
.badgewall span{display:block;text-align:left;font-size:.9375rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:72px 1fr 52px;gap:12px;align-items:center;
  margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--gold)}

/* ---- complaints, each with a fair reply */
.cmps{display:grid;gap:16px;margin:0 0 1.2em}
.cmp{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--warn);
  border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px}
.cmp__q{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:6px}
.cmp p:last-child{margin:0}

/* ---- who it is for */
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.forlist{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--good);
  border-radius:var(--radius);padding:22px 24px}
.forlist--no{border-top-color:var(--warn)}
.forlist h3{margin:0 0 10px}
.forlist ul{margin:0;padding-left:20px}
.forlist li{margin:0 0 .5em}

/* ---- the editorial score */
.facts{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin:0 0 1.2em}
.facts__h{background:var(--pine);color:var(--gold-l);font-family:var(--serif);font-weight:700;
  padding:13px 18px}
.facttab{width:100%;min-width:0;border-collapse:collapse}
.facttab th{background:transparent;font-weight:600;width:62%}
.facttab td{text-align:right;font-weight:700}

/* ---- the add-to-cart panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  align-items:stretch;margin:0 0 22px}
.card--pack{
  display:flex;flex-direction:column;position:relative;background:var(--panel);
  border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
}
/* box-sizing is border-box, so every card carries the 2px border and only the
   recommended one colours it in. Give the border to one card alone and it
   steals 2px of content box and drops its button out of line (responsive.md). */
.card--pack.card--best{border-color:var(--gold);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:13px 20px;
  display:flex;align-items:baseline;gap:10px}
.card--pack.card--best .pack__head{background:var(--pine);border-bottom-color:var(--pine)}
.card--pack.card--best .pack__head b{color:#fff}
.card--pack.card--best .pack__head span{color:var(--gold-l)}
.pack__head b{font-family:var(--serif);font-size:1.2rem;font-weight:700}
.pack__head span{font-size:.875rem;font-weight:700;color:var(--ink-3);margin-left:auto;
  letter-spacing:.06em;text-transform:uppercase}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 24px;font-size:1rem}
.pack__flag{display:block;width:fit-content;margin:0 auto 12px;background:var(--accent);
  color:#fff;font-size:0.8438rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 13px;border-radius:999px}
.card--pack.card--best .pack__flag{background:var(--gold-d)}
.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(--serif);font-size:2.6rem;font-weight:700;color:var(--pine);
  line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1.05rem;font-weight:700;top:-.75em}
.pack__unit{display:block;text-align:center;font-size:.9375rem;font-weight:700;
  color:var(--ink-3);margin:5px 0 14px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 16px;
  font-size:1rem}
.pack__tot b{font-weight:700}
.pack__tot s{color:var(--ink-3);font-weight:500}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:1rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2);
  font-size:inherit}
.pack__perks li::before{content:"";position:absolute;left:1px;top:.55em;width:11px;height:6px;
  border-left:2.5px solid var(--good);border-bottom:2.5px solid var(--good);
  transform:rotate(-45deg)}
/* The auto gap sits between the variable-length blurb and the button, so the
   three CTAs share one baseline however long the three blurbs are. Everything
   below the gap is a fixed number of lines (responsive.md proof 3). */
.card--pack .btn{margin-top:auto}
.pack__marks{text-align:center;font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}
.pack__why{font-size:.9375rem;color:var(--ink-2);margin:12px 0 18px;padding-top:12px;
  border-top:1px solid var(--line)}
.buy__pay{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 14px}
.buy__pay img{width:318px;height:auto}
.buy__pay span{font-size:.9375rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);margin:0}

/* ---- FAQ. The padding lives on <summary>, which is the click target: on
   <details> the row measures ~30px against the 44px minimum (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 48px 18px 22px;cursor:pointer;position:relative;list-style:none;
  font-family:var(--serif);font-weight:600;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;
  font-family:var(--sans);font-size:1.4rem;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}

/* ---- 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}
/* A reference list prints each source's URL as the link text, and a URL is one
   unbreakable token: at 390 that pushed a single <a> past the viewport on
   eleven pages of another site, clipped and unscrollable. `anywhere` 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(--gold);border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:52px;height:52px;display:block}
.byline__mark svg{width:52px;height:52px}
.byline b{display:block;margin-bottom:6px}
.byline p{font-size:.9375rem;color:var(--ink-2);margin:0}

/* ---- closing CTA, on the pine band */
.final{display:block}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:center}
.final__img img{width:320px}
.final h2{margin:0 0 10px;color:#fff}
.final p{color:var(--on-pine)}
.final__price{font-weight:700;color:var(--gold-l)}
.final__sm{font-size:.9375rem;color:var(--on-pine-2);margin:14px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rel a{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);
  transition:border-color .18s ease}
.rel a:hover{border-color:var(--gold)}
.rel b{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum on every control, or iOS Safari zooms the page on
   focus and never zooms back (pitfall 86). */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:700;font-size:1rem;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);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:.9375rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.article h2{scroll-margin-top:calc(var(--navh) + 20px)}
.postmeta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.9375rem;color:var(--ink-3);
  margin:0 0 22px;padding:12px 0;border-block:1px solid var(--line)}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.062rem}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden}
.posts img{width:100%}
.posts .pbody{padding:20px 22px}
.posts h3{margin:0 0 8px;font-size:1.12rem}
.posts p{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
.posts .pmeta{font-size:.9375rem;color:var(--ink-3)}

/* ---- footer: ONE wide pine slab. The links run in FOUR ROWS reading across,
   each labelled at its left edge, rather than four columns reading down. The
   desk block, the seals, the payment strip and the disclaimers sit on the same
   slab, so the footer is a single object rather than a stack of bands. */
footer{background:var(--pine);color:var(--on-pine);border-top:4px solid var(--gold)}
footer a{color:var(--on-pine);text-decoration:none}
footer a:hover{color:var(--gold-l);text-decoration:underline}
.fmast{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:32px;
  padding:42px 0 30px;border-bottom:1px solid #235a4f}
.fbrand{font-family:var(--serif);font-size:2.4rem;font-weight:700;letter-spacing:-.02em;
  line-height:1;color:#fff}
.fbrand span{color:var(--gold)}
.frole{font-size:.9375rem;color:var(--on-pine-2);margin:10px 0 0}
.fdesk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fdesk__i b{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.fdesk__i p{font-size:1.062rem;color:var(--on-pine-2);margin:0}
.fmap{padding:10px 0 6px}
.frow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid #1d5148}
.frow:last-child{border-bottom:0}
.frow__l{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold)}
.frow__links{display:flex;flex-wrap:wrap;gap:2px 22px;list-style:none;margin:0;padding:0}
/* inline-block, not block: the box still shrink-wraps to the text so the hover
   underline stays the width of the words, and the negative margin gives the
   row its height back (pitfall 82). */
footer li a{display:inline-block;padding-block:6px;margin-block:-6px;font-size:1rem;
  color:var(--on-pine)}
.fbits{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;
  padding:22px 0;border-top:1px solid #235a4f;border-bottom:1px solid #235a4f}
.fseals,.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.fseals img{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:50%;padding:3px}
.fseals span,.fpay span{font-size:.9375rem;color:var(--on-pine-2);max-width:34ch}
.fpay img{width:265px;height:auto;background:#fff;border-radius:var(--radius);padding:5px 8px}
.fnap{padding:22px 0 0}
.fnap p{font-size:.9375rem;color:var(--on-pine-2);margin:0}
.fnap strong{color:#fff}
.disc{padding:22px 0 34px}
/* The slab is 1,140px wide and these are the longest paragraphs on the site;
   left to the full wrap they run about 150 characters a line. The legal block
   is still text somebody has to read. */
.disc p{font-size:.9375rem;color:var(--on-pine-2);margin:0 0 .8em;max-width:var(--measure-wide)}
.disc b{color:#fff}
.disc a{color:var(--gold-l)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid #235a4f}

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

/* ---- 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.
   The header row sheds rather than wraps: the fact list goes first, then the
   phone block, then the whole row collapses to a wordmark and a burger. */
/* 1240 is where the three-cell row stops balancing, and the arithmetic is
   worth keeping: the wrap gives 1,140px of content, the two 1fr side tracks
   are sized by the WIDER of them (the phone block, ~290px) and the menu needs
   ~510 in the middle. 290 + 510 + 290 + 40 of gaps = 1,130. Below that the
   fact list is the first thing to go and the row stops centring the wordmark,
   which is the right order: a fact list is the most replaceable thing in the
   header and every one of its facts is also in the topline. */
@media (max-width:1240px){
  .nav__facts{display:none}
  .nav__row{grid-template-columns:auto 1fr auto}
  .nav__mid{align-items:flex-start}
  .menu{justify-content:flex-start;gap:0 16px}
}
@media (max-width:1020px){
  :root{--navh:78px}
  .nav__row{grid-template-columns:1fr auto;gap:14px;padding-block:11px}
  .nav__mid{flex-direction:row;align-items:center;gap:0}
  .nav__tel{display:none}
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--panel);border-bottom:1px solid var(--line);
    padding:8px 20px 14px;box-shadow:var(--shadow-lg);
  }
  .menu.open{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid var(--line)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .burger{display:block}

  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Ten seals in four columns measured 169px a card at 768 -- under the 200px
     floor, with the captions wrapping to one word a line (responsive.md
     proof 2). Three columns holds 230 there. */
  .badgewall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fmast{grid-template-columns:1fr;gap:26px}
  .fdesk{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frow{grid-template-columns:1fr;gap:6px}
  .final--media{grid-template-columns:1fr;gap:20px}
  .final__img img{width:260px}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The hero stacks at 980, NOT at the 1020 the header collapses at. That number
   is not a preference: hero_sticky.py writes `@media (min-width:981px)` for the
   sticky product column, and a stacked hero whose media column is still
   position:sticky with min-height:100vh puts a full screen of empty space
   between the H1 and the Quick Answer. Change one breakpoint and you must
   change the other, or check what the tool emits first. */
@media (max-width:980px){
  /* The pine slab is a right-hand band and there is no right hand any more, so
     it goes; the arch stays, free-standing on the wheat. */
  .hero::after{display:none}
  .hero{padding-top:34px}
  .hero__grid{grid-template-columns:1fr;gap:30px}
  .hero__stick{max-width:420px}
  /* display:contents promotes the copy column's children to grid items so each
     one can be ordered individually. The naive collapse is wrong in both
     directions: order:-1 on the media puts a 390px image above everything and
     pushes the H1 to y~700, and leaving DOM order alone drops the product
     three screens down (hero.md). */
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2;max-width:none}
  .hero__media{order:3;margin-bottom:8px}
  .answer{order:4}
  /* The CTA comes BEFORE the roadmap line on a phone. hero.md's mobile order
     is eyebrow, H1, shot, Quick Answer, CTA, sub, ticks, payment, and the
     roadmap sentence is a later addition with no place in it. Left at order 5
     it pushed the CTA to y=1437 on a 390 screen, against a target of ~1100. */
  .hero__cta{order:5}
  .hero__road{order:6}
  .ticks{order:7}
  .hero__sub{order:8}
  .pay{order:9}
  .factpills{order:10}
  .figures{order:11}
  .hero__grid{gap:22px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding-bottom:40px}
  /* The vault above the bottle is the arch's whole character on a wide screen.
     On a phone it is 430px of hero the Quick Answer has to fall behind, so the
     recess tightens around the product instead of framing it. */
  .hero__card{padding:clamp(28px,5vh,52px) 22px 54px}
  .hero__card::after{bottom:44px}
  /* Five items wrap to three lines and eat 103px of an 844px screen (hero.md).
     Keep the role, the guarantee and the phone; the lot and the dose are on
     the pages that need them. */
  .util{font-size:.90625rem;line-height:1.4}
  .util__item--trim{display:none}
  /* The Quick Answer is the tallest block on a phone hero, so its padding is
     where the CTA's y position is won or lost. */
  .answer{padding:16px 18px;margin-bottom:16px}
  .util__row{gap:3px 13px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  /* Stacked, the ladder must not lead with the smallest order. */
  .card--pack.card--best{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  .whofor{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr;gap:8px}
  .meter__row{grid-template-columns:62px 1fr 46px}
  .fdesk{grid-template-columns:1fr}
  .fbits{gap:18px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:430px){
  .nav__buy{display:none}
  /* The lot chip is one unbreakable line at 370px against a 350px column. */
  .hero__tag{white-space:normal;text-align:center;max-width:calc(100% - 8px)}
  .badgewall{grid-template-columns:1fr}
  .buy__pay img{width:100%}
}


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

/* --- 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 (one site shipped 200x243, 200x105 and 200x65 side by side) 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>figure:only-child{grid-column:1/-1;max-width:calc((100% - 40px) / 3);margin-inline:auto}
.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 surface, glproformula.com ------------------------------
   Slot: 16px cards, 10px controls, one very diffuse ambient shadow, a
   rise motif in the arch, and the recommended tier capped with a tab.

   PAINT ONLY. Radius, shadow, background, colour, transform, transition and
   animation move no box, so this block lives below CRITICAL-END and needs a
   restamp rather than a rebuild.

   SPECIFICITY, NOT SOURCE ORDER. modern_surface.py and footer_type.py strip
   and re-append their own blocks on every build and land after this one, so
   every rule below out-specifies theirs instead of relying on coming last.
   modern_surface also re-declares --radius on :root, which is why the radii
   below are their own tokens rather than a redefinition of that one.

   SCOPE. `.hero ` and `.hero ~ ` are home-only (see the layout block). The
   header and the sticky buy bar sit outside main#main where no combinator
   from .hero reaches, so those two use body:has(.hero). */
:root{
  --gp-card:16px;                               /* slot radius_card */
  --gp-ctl:10px;                                /* slot radius_control */
  /* Deep ambient only, very diffuse -- no tight contact stop. Tinted with
     this site's own ink, 33,28,18, rather than neutral black. */
  --gp-amb:0 22px 60px rgba(33,28,18,.13);
  --gp-amb-hi:0 26px 72px rgba(33,28,18,.19);
}

/* ---- controls: 10px, and every one of them answers the pointer */
.hero .btn,
.hero ~ * .btn,
body:has(.hero) .nav .btn,
body:has(.hero) .buybar .btn{
  border-radius:var(--gp-ctl);
  transition:background .2s ease,box-shadow .2s ease,transform .2s ease,
             border-color .2s ease,color .2s ease;
}
.hero .btn:hover,
.hero ~ * .btn:hover,
body:has(.hero) .nav .btn:hover,
body:has(.hero) .buybar .btn:hover{transform:translateY(-2px)}
.hero .btn:active,
.hero ~ * .btn:active,
body:has(.hero) .nav .btn:active,
body:has(.hero) .buybar .btn:active{transform:translateY(0)}
/* Gold on gold is not a focus ring. */
.hero .btn:focus-visible,
.hero ~ * .btn:focus-visible,
body:has(.hero) .nav .btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
body:has(.hero) .buybar .btn:focus-visible{outline:3px solid var(--gold-l);outline-offset:3px}
body:has(.hero) .burger{border-radius:var(--gp-ctl)}

/* The BUYING button is the only gradient on the page; the secondary button
   stays solid, so the pair reads as two weights rather than two buttons. */
.hero .btn--gold,
.hero ~ * .btn--gold{
  background:linear-gradient(180deg,#cfa945,var(--gold) 48%,var(--gold-d));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),var(--gp-amb);
}
.hero .btn--gold:hover,
.hero ~ * .btn--gold:hover{
  background:linear-gradient(180deg,#dcb752,#bb9736 52%,var(--gold-d));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--gp-amb-hi);
}
.hero .btn--ghost,
.hero ~ * .btn--ghost{background:var(--panel);border-color:var(--line-2)}
.hero .btn--ghost:hover,
.hero ~ * .btn--ghost:hover{background:var(--panel);border-color:var(--pine);box-shadow:var(--gp-amb)}

/* ---- surfaces: 16px, and one diffuse ambient where a surface is raised.
   This site's note reserves shadow for the product and for the cards that
   hold a price; that restraint is kept and only the depth language changes. */
.hero .answer,
.hero .figures div,
.hero ~ * .card,
.hero ~ * .callout,
.hero ~ * .alert,
.hero ~ * .split__img,
.hero ~ * .shots figure,
.hero ~ #pricing .card--pack{border-radius:var(--gp-card)}
.hero .answer{box-shadow:var(--gp-amb)}
.hero .hero__tag{box-shadow:var(--gp-amb)}
.hero ~ * .shots figure:hover,
.hero ~ * .rel a:hover,
.hero ~ * .posts article:hover{box-shadow:var(--gp-amb-hi);transform:translateY(-2px)}

/* ---- the price row.
   .card--pack draws its own hairline with an INSET shadow, because its 2px
   border is transparent on every card but the recommended one. Overwrite
   box-shadow without carrying that inset stop and the hairline disappears. */
.hero ~ #pricing .card--pack{box-shadow:inset 0 0 0 1px var(--line),var(--gp-amb)}
.hero ~ #pricing .card--pack:hover{
  box-shadow:inset 0 0 0 1px var(--line-2),var(--gp-amb-hi);transform:translateY(-2px);
}
.hero ~ #pricing .card--pack.card--best{box-shadow:var(--gp-amb-hi)}
.hero ~ #pricing .card--pack.card--best:hover{
  box-shadow:0 30px 78px rgba(33,28,18,.24);transform:translateY(-2px);
}
/* The tab: the recommended card's head is capped in pale gold and stands 26px
   proud of the other two (the raise is in the layout block). Ink on pale gold
   rather than white on deep gold -- the sub-label is 14px and needs 4.5:1. */
.hero ~ #pricing .card--pack.card--best .pack__head{
  background:linear-gradient(180deg,#f0e2b4,#dcc072);
  border-bottom-color:var(--gold-d);
}
.hero ~ #pricing .card--pack.card--best .pack__head b{color:var(--ink)}
.hero ~ #pricing .card--pack.card--best .pack__head span{color:var(--ink-2)}
.hero ~ #pricing .card--pack.card--best .pack__flag{background:var(--pine)}
/* Dashed rules BETWEEN the feature rows, drawn on a pseudo-element so not one
   pixel of card height changes and the three buttons stay on one baseline. */
.hero ~ #pricing .pack__perks li+li::after{
  content:"";position:absolute;left:0;right:0;top:-3px;
  border-top:1px dashed var(--line-2);pointer-events:none;
}

/* ---- hero motif: RISE -------------------------------------------------
   Warmth rising off the base of the bottle, drifting up the vault and fading
   out. It lives on the pseudo-elements of the arch -- .hero__media's two are
   already spent on the band-settle line at the floor -- and the arch clips it
   to its own opening, so the plume can be half again as wide as the product
   card and still read as light inside the recess rather than a blob on the
   page. Nothing here touches the <img>: it is the LCP element and preloaded.
   Transform and opacity only, 26s and 34s: this is a capsule taken daily for
   weeks, not an energy drink. gpRise does not collide with gfSettle or
   gfLevel, the two names already in this file. */
.hero .hero__arch{overflow:hidden}
.hero .hero__arch::before,
.hero .hero__arch::after{
  content:"";position:absolute;left:50%;bottom:-8%;translate:-50% 0;
  border-radius:50%;pointer-events:none;
  animation:gpRise 26s ease-out infinite;
}
.hero .hero__arch::before{
  width:152%;height:76%;
  background:radial-gradient(ellipse at 50% 100%,
    rgba(176,141,50,.44),rgba(176,141,50,.17) 44%,rgba(176,141,50,0) 72%);
}
.hero .hero__arch::after{
  width:104%;height:54%;
  background:radial-gradient(ellipse at 50% 100%,
    rgba(242,232,202,.30),rgba(176,141,50,.10) 46%,rgba(176,141,50,0) 74%);
  animation-duration:34s;animation-delay:-15s;
}
@keyframes gpRise{
  0%{transform:translateY(13%) scale(.82);opacity:0}
  17%{opacity:.62}
  60%{opacity:.34}
  100%{transform:translateY(-52%) scale(1.3);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hero .hero__arch::before,
  .hero .hero__arch::after{animation:none;transform:none;opacity:.3}
  .hero .btn:hover,
  .hero ~ * .btn:hover,
  body:has(.hero) .nav .btn:hover,
  body:has(.hero) .buybar .btn:hover,
  .hero ~ * .shots figure:hover,
  .hero ~ * .rel a:hover,
  .hero ~ * .posts article:hover,
  .hero ~ #pricing .card--pack:hover,
  .hero ~ #pricing .card--pack.card--best: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 .disc p{font-size:16px}
footer .fdesk__i b{font-size:16px}
footer .fnap p{font-size:16px}
footer .fpay span{font-size:16px}
footer .frow__l{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 17 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 (33,28,18), 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(33,28,18,.06), 0 6px 18px rgba(33,28,18,.07);
  --lift:0 2px 6px rgba(33,28,18,.09), 0 16px 34px rgba(33,28,18,.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. */
.keypoints,
.alert,
.byline,
.final,
.split__img,
.answer{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}