/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Alfa Slab One Fallback";src:local("Georgia");font-weight:400;size-adjust:121.85%;ascent-override:85.02%;descent-override:27.33%;line-gap-override:0.00%}
@font-face{font-family:"Trirong Fallback";src:local("Georgia");font-weight:400;size-adjust:108.62%;ascent-override:110.47%;descent-override:49.16%;line-gap-override:0.00%}
@font-face{font-family:"Trirong Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:101.79%;ascent-override:117.89%;descent-override:52.46%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* theglucomild.com — Gluco Mild, USA Authorized Gluco Mild Retailer.
   Design slot, row 335 (batch8_assignments.py): Alfa Slab One / Trirong,
   a honey-tinted white ground, an identity plate that sits proud of a flat
   header band, and a footer that runs offer strip -> five-rank index ->
   seals on a closing rule.

   The colours are the bottle's, not the reference site's: amber glass,
   a near-black navy label, and the one sky blue the label uses for the
   droplet mark and the word MILD. The honey ground is the glass read at
   five per cent.

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

/* ---- tokens */
:root{
  --ink:#1b1d24;            /* body text */
  --ink-2:#4e5361;          /* secondary */
  --ink-3:#6f7585;          /* captions, meta */
  --navy:#1d2740;           /* the label field */
  --navy-d:#121829;         /* deep */
  --navy-2:#2b3a5e;
  --sky:#4fa3d1;            /* the label's droplet and the word MILD */
  --sky-d:#1f6d99;
  --amber:#c0801f;          /* the glass */
  --amber-d:#8a5a11;
  --wash:#e9f2f8;           /* sky wash */
  --paper:#fbf5e9;          /* the page: honey-tinted white */
  --panel:#ffffff;
  --tint:#f4ead6;
  --line:#e6dcc7;
  --line-2:#cdc0a6;
  --good:#1c7a52;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:10px;
  --radius-lg:20px;
  --plate:252px;            /* the identity plate, and the menu's left offset */
  --shadow:0 1px 2px rgba(27,29,36,.05), 0 10px 28px rgba(27,29,36,.07);
  --shadow-lg:0 22px 58px rgba(18,24,41,.20);
  --navh:112px;
  --display:"Alfa Slab One","Alfa Slab One Fallback",Georgia,"Times New Roman",serif;
  --text:"Trirong","Trirong Fallback",Georgia,"Times New Roman",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.78;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sky-d);text-underline-offset:3px}
a:hover{color:var(--amber-d)}
/* Alfa Slab One ships ONE weight. Asking for 800 makes the browser synthesise
   a bolder face, which smears a slab at display size, so the headings are set
   at 400 and the size does the shouting. */
h1,h2,h3,h4{font-family:var(--display);color:var(--navy);font-weight:400;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.95rem,1.25rem + 2.1vw,2.95rem);letter-spacing:-.01em}
h2{font-size:clamp(1.42rem,1.12rem + 1.1vw,2.05rem)}
h3{font-size:1.18rem}
h4{font-size:1.02rem}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
b,strong{font-weight:700}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--text);font-size:.8125rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sky-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:20px;height:6px;border-radius:999px;background:var(--amber);
}

/* ---- buttons: fully rounded, the plate language repeated at control size */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--text);font-size:1rem;font-weight:700;letter-spacing:.01em;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:var(--navy);color:#fff;
  box-shadow:0 8px 20px rgba(18,24,41,.18);
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.14);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--cyan{background:linear-gradient(100deg,var(--amber-d) 0%,var(--amber) 100%)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.06rem}
.btn--ghost{background:none;color:var(--navy);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--tint);color:var(--navy-d)}
.btn--wide{width:100%}

/* ---- header: a flat navy band, with the identity on a rounded white plate
   that sits PROUD of it and overhangs the menu strip below. The menu is
   offset by the plate's width on desktop so the two never collide. */
.nav{position:sticky;top:0;z-index:100;background:var(--navy)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:14px 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:flex;align-items:center;gap:20px;padding-block:14px}
.brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);
  background:var(--panel);border-radius:var(--radius-lg);
  padding:10px 20px;box-shadow:0 12px 26px rgba(0,0,0,.26);
  position:relative;top:11px;z-index:3;max-width:var(--plate);
}
.brand__glyph{width:32px;height:32px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class: brand_marks.py rewrites the
   <svg> inside .brand and does not carry the class onto the replacement, so a
   rule keyed only to the class stops applying the moment the tool runs
   (pitfall 16). */
.brand>svg{width:32px;height:32px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.bw b{font-family:var(--display);font-size:1.26rem;font-weight:400;letter-spacing:-.01em;white-space:nowrap}
.bw b em{font-style:normal;color:var(--sky-d)}
.bw small{font-size:.7rem;font-weight:600;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav__price{text-align:right;line-height:1.25;color:#cfe0ee}
.nav__price b{display:block;font-family:var(--text);font-size:1.02rem;font-weight:700;color:#fff}
.nav__price span{font-size:.78125rem;font-weight:600;color:#9fb4ca}
.nav__buy{min-height:46px;padding:11px 22px;font-size:.95rem;box-shadow:none}
.burger{
  display:none;width:48px;height:46px;background:transparent;
  border:1px solid #3b4a69;border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:#fff;margin:0 0 5px}
.burger span:last-child{margin:0}
/* the strip the plate overhangs */
.nav__strip{background:var(--panel);border-bottom:1px solid var(--line)}
.menu{
  display:flex;flex-wrap:wrap;gap:0 26px;list-style:none;margin:0;padding:0 0 0 var(--plate);
  align-items:center;min-height:50px;
}
.menu a{
  display:inline-block;padding:13px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--navy)}
.menu a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--amber)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT on a honey plate */
.hero{position:relative;background:var(--paper);padding:52px 0 58px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center;padding-block:0}
/* The copy column is positioned and lifted on purpose. The motif's band is
   152% of the MEDIA column and anchored off its left edge, so on a 1440 screen
   it reaches about 90px into this column. A positioned pseudo-element at
   z-index 0 or 1 paints above the background of a non-positioned block, so
   without this the blurred band would sit over the headline rather than behind
   it. Written here rather than in the motif block because hero_motifs.py owns
   that block and rewrites it. */
.hero__copy{display:flex;flex-direction:column;min-width:0;position:relative;z-index:2}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--sky-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:5px solid var(--amber);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.06rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:.925rem;font-weight:600;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 18px;padding:0}
.factpills li{
  font-size:.875rem;font-weight:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 15px;border-radius:999px;
}
.factpills li b{color:var(--navy);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);padding:13px 16px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.34rem;font-weight:400;color:var(--navy);line-height:1.2}
.figures span{display:block;font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-top:4px}
.hero__media{position:relative;align-self:center}
.hero__card{
  position:relative;z-index:2;text-align:center;padding:22px 18px 18px;
  background:linear-gradient(170deg,#fffdf7,#f3e6cd);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
}
.hero__card img{width:100%;max-width:400px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 22px 34px rgba(18,24,41,.30))}
.hero__cap{margin:14px 0 0;font-size:.8125rem;font-weight:600;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:.875rem;font-weight:600;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:700}

/* The motif's ring is sized against the MEDIA COLUMN, which is half the grid at
   1440 and the whole page below 980. `aspect-ratio:1` on a full-width column
   makes it as tall as the page is wide, and it then draws a hairline straight
   across the Quick Answer. Below the breakpoint it gets an explicit height
   instead, so it stays a halo round the bottle.

   Written ABOVE the motif block and with a higher selector weight on purpose:
   hero_motifs.py re-inserts its own block immediately above CRITICAL-END on
   every --write, so a rule that relied on source order would lose the moment
   the tool ran. And it lives above CRITICAL-END so it is inlined with the rest
   of the first screen -- a property that only exists inside a media query still
   has to be rendered inside that query (pitfall 107). */
@media (max-width:980px){
  .hero .hero__media::after{aspect-ratio:auto;width:124%;height:118%;top:-9%}
}

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

/* ---- topline strip: role, lot, dose and count, guarantee, order phone.
   Five facts a buyer wants before reading anything, above the navigation, so
   the NAV does not have to carry them (hero.md). The dose chip carries the
   LABEL's direction, not the marketplace listing's. Sits ABOVE CRITICAL-END
   because it is the first thing painted; loaded async it would flash unstyled
   at the very top of the page. */
.util{background:var(--tint);color:var(--ink-2);font-size:.8125rem;line-height:1.5;border-bottom:1px solid var(--line)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.util__item+.util__item::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--amber);flex:0 0 auto;margin-right:11px}
.util b{color:var(--navy);font-weight:700}
.util a{color:var(--sky-d);text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines on a phone. 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 -- mild-wave ---------------------------------------- */
.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,#fbf5e9,#f0e0c5 52%,#fbf5e9)}.hero__media::before{content:'';position:absolute;left:-26%;top:38%;width:152%;height:26%;translate:0 -50%;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(79,163,209,0.34) 30%,rgba(192,128,31,0.30) 62%,transparent);filter:blur(24px);animation:gmWave 13s ease-in-out infinite;z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:-14%;width:150%;aspect-ratio:1;translate:-50% 0;border-radius:50%;border:1px solid rgba(79,163,209,0.40);animation:gmSwell 11s ease-in-out infinite;z-index:0;pointer-events:none}@keyframes gmWave{0%,100%{transform:translateX(-7%) translateY(-6%);opacity:.42}50%{transform:translateX(7%) translateY(6%);opacity:.88}}@keyframes gmSwell{0%,100%{scale:.97;opacity:.34}50%{scale:1.03;opacity:.72}}
@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__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:34px 0 42px}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 100px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 100px) - 28px); min-height: calc(100svh - var(--navh, 100px) - 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;}
}
@media (max-width:980px){
  .hero .hero__media::before{width:min(175%,620px);height:auto;aspect-ratio:1;top:50%}
  .hero .hero__media::after{width:min(140%,500px);height:auto;aspect-ratio:1;top:50%}
}
/* --- end of the copied hero responsive rules --- */

/*!SITE-HOME-CRIT-START*/
/* ---- home page only: geometry ------------------------------------------
   1. The buy button on the first screen. At 1440x900 the hero CTA sat at
      y=1003 with the fold at 900, so the money page's first screen had
      nothing to click. On DESKTOP the copy column is re-ordered to
      eyebrow / headline / quick answer / BUTTONS / payment line / the
      evidence. The phone order is composed separately with
      display:contents in the max-width:980 block and is left alone.
   2. The pack feature rows sit on a dashed rule.
   3. The recommended tier is raised with margin-top, never transform:
      the reveal pass sets transform:none on [data-reveal].in.
   These move boxes, so they are above the marker and are inlined into
   every page head -- `.hero` and `body:has(.hero)` make them inert
   everywhere except index.html. */
@media (min-width:981px){
  .hero{padding:38px 0 54px}
  .hero__grid{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:40px}
  .hero .eyebrow{order:1}
  .hero h1{order:2;font-size:clamp(1.95rem,1.1rem + 2.1vw,2.68rem);line-height:1.14;margin:0 0 14px}
  .hero .answer{order:3;padding:17px 21px;margin:0 0 16px}
  .hero__cta{order:4;margin:0 0 14px}
  .hero__sub{order:5;margin:0 0 16px}
  .hero__road{order:6;margin:0 0 18px}
  .hero__copy .factpills{order:7}
  .hero__copy .figures{order:8}
}
body:has(.hero) .pack__perks li{padding-bottom:6px;margin:0 0 6px;border-bottom:1px dashed var(--line-2)}
body:has(.hero) .pack__perks li:last-child{border-bottom:0;padding-bottom:0}
body:has(.hero) .card--pack.featured{margin-top:-12px}
body:has(.hero) #pricing .pack__flag{right:auto;left:22px;top:86px;translate:0 -50%}
@media (max-width:760px){
  body:has(.hero) .card--pack.featured{margin-top:0}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:62px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--navy-d);color:#dde5f0}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c4d0e1}
.sec--dark .eyebrow{color:#8ec8e8}
.sec--dark a{color:#9ed3f5}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* the plate language repeated at section scale: a panel with a rounded top */
.sec--wedge{background:var(--panel);border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin-top:-1px}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c4d0e1}

/* 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{
    max-width:var(--measure-wide);margin-inline:auto}
}

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

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
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(--text);font-weight:700;color:#fff;background:var(--navy);font-size:.9375rem}
tbody tr:nth-child(even){background:#fdfaf3}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--navy)}
.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}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 20px 72px;min-width:0}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:38px;height:38px;
  display:grid;place-items:center;
  background:var(--navy);color:#fff;
  font-family:var(--display);font-weight:400;font-size:1rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: a rounded plate with an amber rule across the head */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px 22px;overflow:hidden;min-width:0}
.card::before{
  content:"";position:absolute;left:24px;right:24px;top:0;height:5px;
  border-radius:0 0 999px 999px;background:var(--amber);
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#1a2440;border-color:#2f3f63}

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

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. A
   .tablewrap holding a 520px-min table therefore keeps its column 520px wide
   however narrow the grid is. min-width:0 is the fix, and it belongs on the
   items at every width rather than only inside the media query (pitfall 46's
   sibling, measured at 390 on getprostacyl). */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)}
.split__body p:last-child{margin:0}

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

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

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* .inglist is a grid and .ingcard is a grid ITEM, whose default min-width is
   auto -- so the card cannot shrink below its min-content, and `.ing__dose` is
   white-space:nowrap. min-width:0 lets the card shrink; .ingcard__top already
   wraps, so the chip drops onto its own line and fits. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.875rem;font-weight:700;color:var(--navy);background:var(--tint);border:1px solid var(--line-2);padding:4px 13px;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}
.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;min-width:0}
.card--pack::before{display:none}
/* No lift on the featured card: a negative margin makes it taller than its
   siblings and trips the rule that a pricing row shares one height and one
   button baseline. The border, the shadow, the head band and the flag already
   make it unmistakable. */
.card--pack.featured{border-color:var(--amber);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px;min-width:0}
.card--pack.featured .pack__head{background:var(--navy);border-bottom-color:var(--navy)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.06rem;font-weight:400}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--amber);color:#fff;font-family:var(--text);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px;min-width:0}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:1.5rem;font-weight:400;color:var(--navy);line-height:1.2;text-align:center;margin:0}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;color:var(--ink-3);margin:4px 0 12px}
/* The tier's one-line case for itself. On a site whose price is set at the
   checkout rather than here, this line carries the pack's reason to exist,
   so it is a paragraph rather than the price-and-struck-figure row. */
.pack__tot{display:block;margin:0 0 14px;font-size:.9375rem;color:var(--ink-2)}
.pack__tot b{font-weight:600}
.pack__was{color:var(--ink-3);font-weight:600}
.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.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;min-width:0}
.shots img{width:100%}
.shots figcaption{padding:16px 20px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--navy)}
.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-lg);padding:18px 16px;min-width:0}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:var(--navy)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px 1fr 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__row>span{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(--amber),var(--navy))}
.stars{color:#d79a1f;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

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

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:.9375rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token; at 390 that pushed a single <a> past the viewport
   on eleven pages of another site. `anywhere` rather than `break-word` because
   it also lowers the element's MIN-CONTENT. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--amber);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:var(--navy);color:#fff;font-family:var(--display);font-weight:400;font-size:1rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--navy)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

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

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

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

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--navy)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;min-width:0}
.posts h3{margin:0 0 8px}
.posts p{font-size:1rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: an offer strip, a five-rank index, then the seals on a rule */
.fcta{background:var(--navy);color:#fff;padding:44px 0 46px}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__txt{min-width:0}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#e2b25f;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.5rem;font-weight:400;line-height:1.28;margin:0 0 10px}
.fcta p{color:#c4d0e1}
.fcta__sm{font-size:.9375rem;color:#a2b1c6;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#9ed3f5}
.fcta__img img{width:280px;border-radius:var(--radius-lg)}
footer{background:var(--panel)}
.fcard{padding:34px 0 8px;border-bottom:1px solid var(--line)}
.fcard p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--navy)}
.fbrand{font-family:var(--display);font-size:1.6rem;font-weight:400;color:var(--navy);letter-spacing:-.01em;line-height:1.2}
.fbrand span{color:var(--sky-d)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fmeta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
/* the five-rank index */
.fgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;padding:30px 0 26px}
.fgrid>div{min-width:0}
.fh{font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back
   (pitfall 82). */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--amber-d)}
/* the closing rule */
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;border-top:2px solid var(--amber)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--navy)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:4px;border-radius:999px;background:var(--amber)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem}

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

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

/* ---- responsive */
@media (max-width:1100px){
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .fmeta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--navh:104px;--plate:0px}
  .brand{top:0;max-width:none;box-shadow:0 8px 18px rgba(0,0,0,.24)}
  .menu{padding-left:0}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .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}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 0}
  .hero{padding:34px 0 42px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{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)}
  /* 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. 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:1fr;gap:8px}
  .fgrid{grid-template-columns:1fr 1fr;gap:22px}
  .fmeta{grid-template-columns:1fr}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
}

/* ---- hero: the bottle breathes on its plate --------------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md). The float goes
   on the CARD, never on the <img>. */
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:gmFloat 9s ease-in-out infinite}
  @keyframes gmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}

/* ---- 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 rather than
   hardcoded, because this header is two rows and changes height between
   breakpoints. Requires .hero NOT to clip on the block axis -- any non-visible
   overflow on an ancestor becomes the scrollport sticky resolves against
   (pitfall 65). */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 100px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 100px) - 28px);
    min-height: calc(100svh - var(--navh, 100px) - 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 pack shots are three different
   shapes (1341x1589, 1600x1600 and 1800x1327), so without these 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}

/* brand mark: underline construction */
.brand{position:relative}
.brand::after{content:'';position:absolute;left:20px;right:20px;bottom:6px;height:3px;border-radius:2px;background:#c0801f}

/* ==== 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,header.header{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav,header.header{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 only: the modern surface, to this site's design slot -----
   slot: motif bloom, radius_card 14, radius_control 8, depth three stops,
   ribbon "inset pill on a rule".

   Paint only -- border-radius, box-shadow, background, colour, transform,
   transition, animation -- so it lives below the critical marker and a
   restamp is enough for it.

   Every selector is scoped to the home page, either `.hero ...` (that class
   is on index.html and nowhere else) or `body:has(.hero) ...` for the
   header, the pricing row and the footer, which exist on the other pages
   too. The extra class weight is also what beats modern_surface.py and
   footer_type.py: both STRIP and RE-APPEND their own block at the end of
   this file on every build, so they always land after this one. Never
   rely on source order here. */
:root{
  /* the slot's depth language: contact + mid + wide, tinted with this
     site's own ink #1b1d24 -- rgb(27,29,36) -- and never neutral black. */
  --gm-d1:0 1px 2px rgba(27,29,36,.07);
  --gm-d2:0 6px 14px rgba(27,29,36,.09);
  --gm-d3:0 20px 44px rgba(27,29,36,.13);
  --gm-depth:var(--gm-d1),var(--gm-d2),var(--gm-d3);
  --gm-lift:0 2px 4px rgba(27,29,36,.09),0 10px 22px rgba(27,29,36,.13),0 30px 62px rgba(27,29,36,.17);
  --gm-rc:14px;  /* slot radius_card    */
  --gm-rk:8px;   /* slot radius_control */
}

/* -- panels: one radius, one three-stop depth */
body:has(.hero) .card,
body:has(.hero) .ingcard,
body:has(.hero) .step,
body:has(.hero) .toc,
body:has(.hero) .faq,
body:has(.hero) .tablewrap,
body:has(.hero) .versus,
body:has(.hero) .posts article,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .split__img img,
body:has(.hero) .callout,
body:has(.hero) .figures div,
body:has(.hero) #pricing .card--pack,
.hero .hero__card{border-radius:var(--gm-rc)}

body:has(.hero) .card,
body:has(.hero) .ingcard,
body:has(.hero) .step,
body:has(.hero) .toc,
body:has(.hero) .faq,
body:has(.hero) .tablewrap,
body:has(.hero) .versus,
body:has(.hero) .posts article,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .split__img,
body:has(.hero) .callout,
body:has(.hero) .byline,
body:has(.hero) .keypoints,
body:has(.hero) .alert,
body:has(.hero) .final,
body:has(.hero) .figures div,
body:has(.hero) #pricing .card--pack,
.hero .answer{box-shadow:var(--gm-depth)}

/* the panels that carry a coloured rule on one edge keep the square corners
   on that edge -- the rule is the site's own signature, the radius is the
   slot's. */
.hero .answer{border-radius:0 var(--gm-rc) var(--gm-rc) 0}
body:has(.hero) .alert,
body:has(.hero) .byline{border-radius:0 var(--gm-rc) var(--gm-rc) 0}
body:has(.hero) .keypoints,
body:has(.hero) .final{border-radius:0 0 var(--gm-rc) var(--gm-rc)}

/* the bottle's plate: the same three stops plus a hairline top highlight,
   which is what stops a pale card reading as a flat rectangle. */
.hero .hero__card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),
             var(--gm-d1),var(--gm-d2),0 28px 64px rgba(27,29,36,.19);
}

/* -- controls: 8px, and the pair reads as two weights -------------------- */
body:has(.hero) .btn{
  border-radius:var(--gm-rk);
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}
body:has(.hero) .burger,
body:has(.hero) .field input,
body:has(.hero) .field select,
body:has(.hero) .field textarea{border-radius:var(--gm-rk)}

/* the buying CTA is the only gradient on the page. */
body:has(.hero) .btn--cyan{
  background:linear-gradient(135deg,#e0a63f 0%,var(--amber) 38%,var(--amber-d) 100%);
  box-shadow:0 1px 2px rgba(27,29,36,.10),
             0 6px 14px rgba(138,90,17,.26),
             0 20px 44px rgba(27,29,36,.16);
}
/* the secondary stays solid -- one gradient, one flat, two weights. */
body:has(.hero) .btn--ghost{
  background:var(--panel);color:var(--navy);
  box-shadow:inset 0 0 0 1px var(--line-2),var(--gm-d1),var(--gm-d2);
}
body:has(.hero) .btn--ghost:hover{background:var(--tint);color:var(--navy-d)}

body:has(.hero) .btn:hover{transform:translateY(-2px)}
body:has(.hero) .btn--cyan:hover{
  box-shadow:0 2px 4px rgba(27,29,36,.12),
             0 12px 26px rgba(138,90,17,.32),
             0 30px 62px rgba(27,29,36,.20);
}
body:has(.hero) .btn:active{transform:translateY(0)}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
body:has(.hero) .menu a:focus-visible,
body:has(.hero) .faq summary:focus-visible,
body:has(.hero) footer a:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* -- anything clickable answers the pointer with the same 2px ------------ */
body:has(.hero) .rel a,
body:has(.hero) .posts article,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) #pricing .card--pack{
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;
}
body:has(.hero) .rel a:hover,
body:has(.hero) .posts article:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .badgewall figure:hover,
body:has(.hero) #pricing .card--pack:hover{box-shadow:var(--gm-lift);transform:translateY(-2px)}

/* -- the pricing row: an inset pill sitting on the head rule ------------- */
/* The geometry of the pill -- where on the rule it sits -- is above the
   marker with the rest of the geometry; this is its skin only. */
body:has(.hero) #pricing .pack__flag{
  border-radius:999px;padding:5px 15px;letter-spacing:.09em;
  background:var(--panel);color:var(--amber-d);
  box-shadow:inset 0 0 0 1px var(--line-2),
             0 1px 2px rgba(27,29,36,.08),
             0 6px 14px rgba(27,29,36,.11);
  z-index:4;
}
body:has(.hero) #pricing .card--pack.featured .pack__flag{
  background:linear-gradient(135deg,#e0a63f,var(--amber-d));color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),
             0 1px 2px rgba(27,29,36,.12),
             0 8px 18px rgba(138,90,17,.30);
}
/* the recommended tier reads as the raised one: a warmer field, the amber
   edge already on it, and the deepest of the three stops. */
body:has(.hero) #pricing .card--pack.featured{
  background:linear-gradient(180deg,#fffdf7 0%,var(--panel) 30%);
  box-shadow:var(--gm-lift);
}
body:has(.hero) #pricing .card--pack.featured:hover{
  box-shadow:0 3px 6px rgba(27,29,36,.10),
             0 14px 28px rgba(27,29,36,.14),
             0 36px 72px rgba(27,29,36,.20);
}
body:has(.hero) #pricing .pack__perks li{border-bottom-color:var(--line)}
/* the hairline the three-stop shadow replaced: a white card on a honey ground
   needs one edge or it dissolves into the section. */
body:has(.hero) #pricing .card--pack{
  box-shadow:inset 0 0 0 1px var(--line),var(--gm-depth);
}
body:has(.hero) #pricing .card--pack.featured{
  box-shadow:inset 0 0 0 1px rgba(192,128,31,.34),var(--gm-lift);
}

/* -- the hero motif: bloom ----------------------------------------------
   The slot's brief: a radial bloom opening from behind the bottle and
   easing back. It lives on the two pseudo-elements of the MEDIA column,
   never on the <img> -- that is the LCP element and it is preloaded.
   Both are sized larger than the .hero__card they sit behind (the card is
   ~450x489 at 1440; the bloom is 758 and the halo 537), because a shape
   sized inside an opaque card paints nothing at all.

   These override the mild-wave block that hero_motifs.py writes above the
   marker, so every property that block sets has to be answered here --
   height, filter, border and border-radius included -- or the old value
   survives into the new rule. Two stops of the wave are re-used: nothing
   is added to the DOM and no new request is made.

   Slow on purpose: 26s and 34s. This is a supplement taken daily for
   weeks, not an energy drink. Transform and opacity only. */
.hero .hero__media::before{
  left:50%;top:50%;width:min(158%,820px);height:auto;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;border:0;filter:none;
  background:radial-gradient(circle at 50% 47%,
    rgba(79,163,209,.30) 0%,
    rgba(79,163,209,.17) 33%,
    rgba(192,128,31,.14) 56%,
    rgba(192,128,31,0) 73%);
  animation:gmBloom 26s ease-in-out infinite;
  z-index:-1;
}
.hero .hero__media::after{
  left:50%;top:50%;width:min(112%,560px);height:auto;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;border:0;filter:none;
  background:radial-gradient(circle at 50% 50%,
    rgba(79,163,209,0) 52%,
    rgba(79,163,209,.24) 63%,
    rgba(192,128,31,.16) 74%,
    rgba(192,128,31,0) 87%);
  animation:gmBloomHalo 34s ease-in-out infinite;
  z-index:-1;
}
@keyframes gmBloom{
  0%,100%{transform:scale(.88);opacity:.52}
  50%{transform:scale(1.06);opacity:1}
}
@keyframes gmBloomHalo{
  0%,100%{transform:scale(1.05);opacity:.48}
  50%{transform:scale(.91);opacity:.9}
}
/* Below the breakpoint the card is the full content width, so the only room
   the bloom has is above and below it. Measured, not guessed: at 390 the card
   is 346x375 and the first pair of caps drew a 373px halo -- entirely INSIDE
   the card, which paints nothing at all. These read past it on both axes.
   Both pseudo-elements sit at z-index -1: they join .hero__grid's stacking
   context BELOW the in-flow copy, so the tail of the bloom passes behind the
   headline and the Quick Answer rather than washing over them. On desktop the
   sticky media column is its own stacking context and .hero__copy's z-index:2
   already holds the copy above it. */
@media (max-width:980px){
  .hero .hero__media::before{width:min(175%,620px);height:auto;aspect-ratio:1;top:50%}
  .hero .hero__media::after{width:min(140%,500px);height:auto;aspect-ratio:1;top:50%}
}
@media (prefers-reduced-motion:reduce){
  .hero .hero__media::before,
  .hero .hero__media::after{animation:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .rel a:hover,
  body:has(.hero) .posts article:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .badgewall figure:hover,
  body:has(.hero) #pricing .card--pack: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 .fcard p{font-size:16px}
footer .fh{font-size:15px}
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 21 box-shadow declaration(s)
   and 6 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 (27,29,36), not neutral black.

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

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.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}