/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Roboto Slab Fallback";src:local("Georgia");font-weight:400;size-adjust:107.97%;ascent-override:97.05%;descent-override:25.10%;line-gap-override:0.00%}
@font-face{font-family:"Roboto Slab Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:93.48%;ascent-override:112.10%;descent-override:28.99%;line-gap-override:0.00%}
@font-face{font-family:"Karla Fallback";src:local("Arial");font-weight:400;size-adjust:103.91%;ascent-override:88.25%;descent-override:24.25%;line-gap-override:0.00%}
@font-face{font-family:"Karla Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:100.22%;ascent-override:91.50%;descent-override:25.14%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* goretraburn.com - RetraBurn, U.S. stocking partner desk.
   Design slot, batch10_assignments.py: Roboto Slab / Karla, a char-grey ground
   carrying a copper accent and ivory cards, a header whose wordmark stands
   left of a copper vertical rule with the destinations ranged right of it, and
   a footer that opens on a char slab with the guarantee restated wide across
   its head.

   This is a DARK-FIRST site. The page is char, the reading surfaces are ivory
   slabs laid on it, and the copper is taken off the amber glass of the bottle
   rather than off any reference page. Two copper stops exist on purpose: the
   bright one carries text on char, the deep one carries text on ivory, and the
   middle one is a fill only. Measured against the darkest stop the hero
   gradient reaches, not just against the flat ground.

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

/* ---- tokens */
:root{
  --paper:#201e1c;          /* the page: char grey */
  --paper-2:#292624;        /* a lifted char band */
  --dark:#1b1917;           /* the deepest char: hero, footer slab, buy bar */
  --card:#f7f3ec;           /* the ivory slab every reading surface sits on */
  --card-2:#efe8dc;         /* ivory, one step down */
  --ink:#211f1c;            /* text on ivory */
  --ink-2:#4a443c;          /* secondary on ivory */
  --ink-3:#6e675c;          /* captions and meta on ivory */
  --on-dark:#f5efe4;        /* text on char */
  --on-dark-2:#cbc2b3;      /* secondary on char */
  --copper:#c47c31;         /* the accent: fills, rules, buttons, the mark */
  --copper-lite:#e0a05c;    /* copper that carries text on char */
  --copper-deep:#8a4e16;    /* copper that carries text on ivory */
  --line:#3a352f;           /* hairline on char */
  --line-2:#4d4740;
  --line-card:#ddd3c2;      /* hairline on ivory */
  --good:#7fbf5e;           /* a tick on char */
  --good-d:#3f7a2e;         /* a tick on ivory */
  --warn:#8a5a10;
  --wrap:1180px;
  --measure:760px;
  --measure-wide:980px;
  --radius:3px;
  --radius-lg:8px;
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 14px 34px rgba(0,0,0,.28);
  --shadow-lg:0 26px 60px rgba(0,0,0,.46);
  --navh:96px;
  --pack-img:168px;
  --figw:320px;
  --display:"Roboto Slab","Roboto Slab Fallback",Georgia,"Times New Roman",serif;
  --text:"Karla","Karla Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--on-dark);
  font-family:var(--text);font-size:17px;line-height:1.74;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--copper-lite);text-underline-offset:3px}
a:hover{color:#f0bc82}
h1,h2,h3,h4{font-family:var(--display);color:var(--on-dark);font-weight:700;line-height:1.16;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,1.2rem + 2.2vw,2.95rem);letter-spacing:-.02em}
h2{font-size:clamp(1.42rem,1.12rem + 1.2vw,2.1rem);letter-spacing:-.014em}
h3{font-size:1.16rem;font-weight:700}
h4{font-size:1.02rem;font-weight:700}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--copper);color:var(--dark);padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--copper-lite);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it. On char it takes the
   bright copper; the deep copper would read at 3.2:1 against the darkest stop
   of the hero gradient and this element sits inside it. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:.78125rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--copper-lite);
  margin:0 0 11px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--copper);flex:0 0 auto}

/* ---- buttons: a square copper slab with a hairline keyline, no drop shadow */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 30px;
  font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:.005em;
  border:2px solid var(--copper);border-radius:var(--radius);cursor:pointer;
  text-decoration:none;background:var(--copper);color:var(--dark);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{background:#d8903f;border-color:#d8903f;color:var(--dark)}
.btn--amber{background:var(--copper);border-color:var(--copper);color:var(--dark)}
.btn--amber:hover{background:#d8903f;border-color:#d8903f}
.btn--lg{min-height:62px;padding:17px 34px;font-size:1.06rem}
.btn--ghost{background:none;color:var(--on-dark);border-color:var(--line-2)}
.btn--ghost:hover{background:none;color:var(--copper-lite);border-color:var(--copper)}
.btn--wide{width:100%}
.btn--block{width:100%}

/* ---- topline strip: role, lot, dose and count, guarantee, order phone. Five
   facts a buyer wants before reading anything, above the navigation, so the
   menu does not have to carry them (hero.md). Above CRITICAL-END because it is
   the first thing painted. */
.util{background:#141210;color:var(--on-dark-2);font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.util__item+.util__item::before{content:"";width:8px;height:1px;background:var(--copper);
  flex:0 0 auto;margin-right:11px}
.util b{color:var(--on-dark);font-weight:700}
.util a{color:var(--copper-lite);text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat a third of the first screen on a
     phone (hero.md). Keep role, guarantee and phone. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}

/* ---- header: the wordmark left, a copper vertical rule, destinations right */
.nav{position:sticky;top:0;z-index:100;background:var(--paper-2);box-shadow:0 1px 0 var(--line)}
/* 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__row{display:flex;align-items:center;gap:20px;padding-block:13px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--on-dark);flex:none;white-space:nowrap}
.brand__glyph{width:38px;height:38px;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 always carry class="brand__glyph" onto the
   replacement, so a rule keyed only to that class stops applying the moment
   the tool runs and the glyph renders at its intrinsic size (pitfall 16). */
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.08}
.bw b{font-family:var(--display);font-size:1.38rem;font-weight:700;letter-spacing:-.024em}
.bw b em{font-style:normal;color:var(--copper-lite)}
.bw small{font-size:.75rem;font-weight:700;color:var(--on-dark-2);letter-spacing:.02em}
/* the copper vertical rule the destinations stand to the right of */
.nav__rule{flex:0 0 auto;width:3px;align-self:stretch;min-height:44px;background:var(--copper);border-radius:2px}
.menu{display:flex;flex-wrap:nowrap;gap:0 22px;list-style:none;margin:0;padding:0;align-items:center;min-width:0}
.menu a{
  display:inline-block;padding:9px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:700;color:var(--on-dark-2);text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.menu a:hover{color:var(--on-dark)}
.menu a[aria-current="page"]{color:var(--copper-lite);border-bottom-color:var(--copper)}
/* The row carries five destinations and the copper rule. The remaining nine are a
   PHONE-only rank: they live in the same <ul id="menu"> because the burger toggles
   that list and every shared tool keys off it, and they are hidden until the list
   becomes a stack. Without this the row renders fourteen links, sheds nothing and
   runs off the right edge at every width from 1024 up -- measured, because no
   static check can see it. */
.menu__more{display:none}
.menu__break{display:none}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
.nav__tel{text-align:right;line-height:1.2}
.nav__tel b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:700;color:var(--on-dark)}
.nav__tel span{font-size:.75rem;font-weight:700;color:var(--on-dark-2)}
.nav__buy{min-height:46px;padding:11px 20px;font-size:.94rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--copper);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the row SHEDS, never wraps (design-system.md) */
@media (max-width:1400px){.menu{gap:0 17px}.menu a{font-size:.9rem}}
@media (max-width:1290px){.nav__tel{display:none}}

/* ---- hero: the bottles LEFT on the breathing coal, the copy RIGHT */
.hero{position:relative;background:var(--dark);color:var(--on-dark);padding-block:50px 56px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:42px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 18px;color:var(--on-dark)}
.hero h1 em{font-style:normal;color:var(--copper-lite)}
/* the Quick Answer is the first ivory slab on the page */
.answer{
  background:var(--card);color:var(--ink);border:1px solid var(--line-card);
  border-left:6px solid var(--copper);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;color:var(--ink)}
.answer p:last-child{margin:0}
.answer b{color:var(--ink)}
.hero__road{font-size:1rem;color:var(--on-dark-2);margin:0 0 20px;max-width:58ch}
.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:700;color:var(--on-dark-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:700;color:var(--on-dark-2);background:var(--paper-2);
  border:1px solid var(--line-2);padding:7px 14px;border-radius:2px;
}
.factpills li b{color:var(--copper-lite);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--card);border-bottom:4px solid var(--copper);padding:13px 15px;
  border-radius:var(--radius) var(--radius) 0 0;min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.42rem;font-weight:700;color:var(--ink);line-height:1.1}
.figures span{display:block;font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-top:3px}
/* No plate behind the bottles. The coal-breathe motif swells on
   .hero__media's pseudo-elements and an opaque card would hide all of it
   (design-system.md, rule 6). */
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px}
.hero__card img{width:auto;height:clamp(300px,42vh,460px);max-width:100%;margin-inline:auto;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.55))}
.hero__cap{display:inline-block;margin:14px 0 0;padding:6px 14px;background:var(--card);
  color:var(--ink-2);font-size:.8125rem;font-weight:700;border-radius:2px}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:.875rem;font-weight:700;color:var(--on-dark-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:700}

/* ---- inner page head */
.phead{padding-block:32px 14px;background:var(--dark);border-bottom:1px solid var(--line)}
.crumbs{font-size:.875rem;color:var(--on-dark-2);margin:0 0 14px}
.crumbs a{color:var(--on-dark-2);text-decoration:none}
.crumbs a:hover{color:var(--copper-lite)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.13rem;color:var(--on-dark-2);max-width:var(--measure)}

/* --- 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:2px 0 10px}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  /* The roadmap line is useful and it is not what a buyer needs before the button. hero.md's stacked order is eyebrow, H1, shot, Quick Answer, CTA, then everything else, so this moves below the CTA on a phone. */ .hero__road{order:7;margin-top:2px}
}
@media (max-width:760px){
  .hero__card img{height:clamp(212px,31vh,272px)}
  .hero__card{padding:4px}
  .hero__cap{margin-top:9px;padding:5px 11px;font-size:.78rem}
  .hero h1{font-size:clamp(1.62rem,1.02rem + 2.6vw,2.1rem);margin-bottom:13px}
  .hero__cta{gap:9px;margin-bottom:16px}
  .hero__cta .btn{width:100%}
}
@media (min-width:981px){
  .hero__media{order:-1}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 96px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 96px) - 28px); min-height: calc(100svh - var(--navh, 96px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}
/* --- end of the copied hero responsive rules --- */

/* ---- hero motif -- coal-breathe ---------------------------------------- */
.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(200deg,#51391f,#1b1917 50%,#1b1917)}.hero__media::before{content:'';position:absolute;left:50%;top:52%;width:92%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(196,124,49,0.30),transparent 68%);animation:grbCoal 12s ease-in-out infinite}.hero__media::after{content:'';position:absolute;left:50%;top:52%;width:44%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(196,124,49,0.38),transparent 62%);animation:grbCoal 12s ease-in-out infinite;animation-delay:2s}@keyframes grbCoal{0%,100%{opacity:.3;transform:scale(.93)}50%{opacity:.78;transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!SITE-HOME-CRIT-START*/
/* ---- home-page layout, design pass (slot: orbit, card 20 / control 14) -----
   Scoped so it cannot reach another page. `.hero` is on index.html and on no
   other page here, so `.hero__copy` is home by construction and
   `body:has(.hero)` carries the rest. Everything in this block moves a box, or
   sizes the decorative ring, so it lives above CRITICAL-END and is inlined.

   1. THE BUY BUTTON ON THE FIRST SCREEN. Measured at 1440x900 before this
   pass, the hero CTA ran 814-882: on screen by 18px, with the payment line and
   every figure below the fold. The roadmap sentence is 131px of prose sitting
   between the Quick Answer and the pair of buttons. This is the desktop half
   of the order hero.md already composes on a phone -- eyebrow, headline, Quick
   Answer, BUTTONS, payment line, then the evidence. The phone stack is built
   separately with display:contents at <=980px and is not touched. */
@media (min-width:981px){
  .hero__copy>.eyebrow{order:1}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:3}
  .hero__copy>.hero__cta{order:4}
  .hero__copy>.hero__sub{order:5}
  .hero__copy>.hero__road{order:6;margin:2px 0 18px}
  .hero__copy>.factpills{order:7}
  .hero__copy>.figures{order:8}
}

/* 2. THE PRICING ROW, home only. The ribbon becomes a full-width bar across
   the top of the card, so every card in the row needs the same strip above its
   head or the three heads stop sharing a line. The card without a badge gets
   the strip filled in the head's own ivory (below), not left as a gap.

   The featured card is raised with MARGIN, never transform: the reveal pass
   sets transform:none the moment the row scrolls in and would drop it back.
   The 12px it rises is taken straight back out of its bottom padding, so all
   three Add To Cart buttons keep one baseline -- measured after, at 16079px on
   all three, not assumed. Heights stay equal because a stretched grid item
   resolves to the row minus its own margins, and each card carries 12px. */
body:has(.hero) .prices .card--pack{padding-top:42px}
body:has(.hero) .prices .pack__flag{left:0;right:0;top:0;padding:7px 16px;
  font-size:.74rem;line-height:1.3;text-align:center}
body:has(.hero) .prices .card--pack:not(:has(.pack__flag))::before{
  content:"";position:absolute;left:0;right:0;top:0;height:29px;z-index:3;
  background:var(--card-2);border-bottom:1px solid var(--line-card)}
body:has(.hero) .prices .pack__perks li{padding-bottom:7px;margin-bottom:5px}
@media (min-width:761px){
  body:has(.hero) .prices .card--pack{margin-top:12px}
  body:has(.hero) .prices .card--pack.featured{margin-top:0;margin-bottom:12px;
    padding-bottom:9px}
}

/* 3. THE HERO MOTIF -- orbit: a thin ring with one bright arc travelling it.
   On .hero__media's pseudo-elements, never on the <img>, which is the LCP
   element and is preloaded. 560px across against a 378px bottle, so the ring
   reads outside the product rather than inside it. One turn takes 28 seconds:
   this is a supplement taken daily for weeks, not an energy drink. Only
   transform and opacity animate.

   This sits above the marker, with the coal motif it replaces, on purpose. The
   motif that paints first comes from the inlined copy; below the marker the
   hero would paint the old glow and swap to the ring when the async sheet
   landed, on the one screen where that is most visible.

   grbOrbitHalo / grbOrbitArc: the sheet already owns grbCoal, so neither name
   collides. */
body:has(.hero) .hero__media::before{
  width:min(116%,560px);top:47%;
  border:1px solid rgba(224,160,92,.30);
  background:radial-gradient(closest-side,rgba(196,124,49,.22),
    rgba(196,124,49,.08) 56%,rgba(196,124,49,0) 74%);
  animation:grbOrbitHalo 17s ease-in-out infinite}
body:has(.hero) .hero__media::after{
  width:min(116%,560px);top:47%;border-radius:50%;opacity:.95;
  background:conic-gradient(from 0deg,rgba(224,160,92,0) 0deg,
    rgba(224,160,92,0) 292deg,rgba(196,124,49,.50) 328deg,
    rgba(242,208,154,.95) 353deg,rgba(224,160,92,0) 360deg);
  -webkit-mask:radial-gradient(closest-side,rgba(0,0,0,0) calc(100% - 3px),
    #000 calc(100% - 2px));
  mask:radial-gradient(closest-side,rgba(0,0,0,0) calc(100% - 3px),
    #000 calc(100% - 2px));
  animation:grbOrbitArc 28s linear infinite}
@keyframes grbOrbitHalo{0%,100%{opacity:.52}50%{opacity:.86}}
@keyframes grbOrbitArc{to{transform:rotate(360deg)}}
/* The ring is sized off the media column's WIDTH, which is the right measure
   only while the hero is two columns. Stacked, that column is the whole page
   and the ring is taller than the shot it circles: measured at 390 it stood
   401px against a 310px box and the arc travelled across the last line of the
   H1 -- the exact failure pitfall 65 records. Off the HEIGHT it cannot reach
   the copy, and at 96% it is still wider than the bottle (298 against 190 at
   390, 479 against 430 at 768). Between 981 and 1180 the two-column ring
   reached 10px past the left edge of the window, where overflow-x:clip cut a
   135px flat chord out of it; 106% keeps the circle whole. */
@media (max-width:980px){
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{width:auto;height:96%;top:50%}
}
@media (min-width:981px) and (max-width:1180px){
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{width:min(106%,560px)}
}
/* The block above the coal motif's own reduced-motion rule hides both
   pseudo-elements outright. The ring is not motion, so it stays, still: only
   the travelling arc and the breath stop. Higher specificity AND !important,
   because that rule carries !important too. */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::before{animation:none!important;opacity:.62!important}
  body:has(.hero) .hero__media::after{animation:none!important;opacity:.85!important}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding-block:58px;position:relative}
.sec--tint{background:var(--paper-2)}
.sec--dark{background:var(--dark)}
.sec--ember{background:linear-gradient(180deg,#2a221b,#201e1c)}
/* the full-bleed ivory band: the one place the ground inverts */
.sec--panel{background:var(--card);color:var(--ink)}
.sec--panel h2,.sec--panel h3,.sec--panel h4{color:var(--ink)}
.sec--panel p,.sec--panel li{color:var(--ink-2)}
.sec--panel .eyebrow{color:var(--copper-deep)}
.sec--panel a{color:var(--copper-deep)}
.sec--panel a:hover{color:#6e3c10}
.sec--panel .card{background:var(--card-2);border-color:var(--line-card)}
.sec--panel .tablewrap{border-color:var(--line-card)}
.sec--panel .ticks li::before{color:var(--good-d)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--on-dark-2);margin:0}
.sec--panel .sec__head p{color:var(--ink-2)}

/* 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}
.card .ticks li::before{color:var(--good-d)}
.sec>.wrap>ul li,.sec>.wrap>ol li{margin:0 0 .5em}

/* ---- tables: an ivory slab with a deep-copper head */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line-card);border-radius:var(--radius);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem;color:var(--ink-2)}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-card);vertical-align:top}
th{font-family:var(--display);font-weight:700;color:var(--card);background:var(--copper-deep);font-size:.9375rem}
tbody tr:nth-child(even){background:var(--card-2)}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ink)}
.tnote{font-size:.9375rem;color:var(--on-dark-2);margin:-.4em 0 1.2em}
.sec--panel .tnote{color:var(--ink-3)}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--card);color:var(--ink-2);border-radius:var(--radius);padding:20px 22px 20px 70px;min-width:0}
.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(--copper-deep);color:var(--card);
  font-family:var(--display);font-weight:700;font-size:1rem;border-radius:2px;
}
.step h3{margin:0 0 6px;color:var(--ink)}
.step p{color:var(--ink-2)}
.step p:last-child{margin:0}

/* ---- cards: ivory slabs with a copper foot rule */
.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))}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT, so a
   card holding a table or a nowrap chip refuses to shrink below it and the
   right-hand edge is clipped away by body{overflow-x:clip} with nothing to
   scroll and nothing to report. */
.grid>*{min-width:0}
.card{position:relative;background:var(--card);color:var(--ink-2);border:1px solid transparent;
  border-bottom:4px solid var(--copper);border-radius:var(--radius);padding:23px 22px 21px;min-width:0}
.card h3{margin:0 0 8px;color:var(--ink)}
.card p,.card li{color:var(--ink-2)}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card a{color:var(--copper-deep)}
/* ...but not a button, the same guard .final already carries below. .card a
   is (0,1,1) and beat .btn--amber's own (0,1,0) colour, so the three pack
   buttons rendered --copper-deep (#8a4e16) on the copper fill at 1.97:1
   against a 4.5 floor. The identical button outside a card is --dark at
   5.24:1. Text colour only; --copper is read off the bottle and stays. */
.card .btn{color:var(--dark)}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--card);color:var(--ink-2);border:1px solid var(--line-card);border-top:4px solid var(--copper);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--ink)}
.callout p{color:var(--ink-2)}
.callout p:last-child{margin:0}
.callout a{color:var(--copper-deep)}
.alert{background:#fbf3e4;color:var(--ink-2);border:1px solid #e6d3ae;border-left:6px 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{color:var(--ink-2)}
.alert p:last-child{margin:0}
.alert a{color:var(--copper-deep)}
.pullquote{font-family:var(--display);font-size:1.24rem;font-weight:600;line-height:1.54;color:var(--on-dark);border-left:6px solid var(--copper);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(--on-dark-2);margin-top:8px}
.sec--panel .pullquote{color:var(--ink)}
.sec--panel .pullquote cite{color:var(--ink-3)}
.keypoints{background:var(--card);color:var(--ink-2);border-left:6px solid var(--copper);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;color:var(--ink)}
.keypoints ul{margin:0;padding-left:20px}
.keypoints li{color:var(--ink-2)}

/* ---- 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}
/* Same family as .grid above: `1fr` is minmax(auto,1fr) and reintroduces the
   min-content floor a .tablewrap would set at 520px. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line-2);border-radius:var(--radius)}
.split--tall .split__img img{width:auto;height:420px;margin-inline:auto;border:0;background:none;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.5))}
.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;border-top:3px solid var(--copper);padding-top:14px}
.stats div b{display:block;font-family:var(--display);font-size:2.05rem;font-weight:700;color:var(--on-dark);line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:var(--on-dark-2);margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr .8fr 1.35fr;border-radius:var(--radius);overflow:hidden;background:var(--card);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line-card);font-size:.98rem;min-width:0;color:var(--ink-2)}
.versus>div:nth-child(3n+1){font-weight:700;background:var(--card-2);color:var(--ink)}
.versus__h{background:var(--copper-deep)!important;color:var(--card)!important;font-family:var(--display);font-weight:700;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:14px}
/* `.ing__dose` is white-space:nowrap and the longest of these chips renders
   well over 200px, which sets the card's min-content floor. */
.inglist>*{min-width:0}
.ingcard{background:var(--card);color:var(--ink-2);border-left:6px solid var(--copper);border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;min-width:0}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0;color:var(--ink)}
.ingcard p{color:var(--ink-2)}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:700;color:var(--card);background:var(--copper-deep);padding:4px 12px;border-radius:2px;white-space:nowrap}
.ingcard a{color:var(--copper-deep)}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--card);color:var(--ink-2);
  border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line-card);
  border-radius:var(--radius-lg);overflow:hidden;position:relative}
/* No lift on the featured card. A negative margin raises its box, which makes
   it taller than its siblings and trips responsive.md's rule that a pricing
   row shares one height and one button baseline. */
.card--pack.featured{border-color:var(--copper);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--card-2);border-bottom:1px solid var(--line-card);padding:14px 20px;display:flex;align-items:center;gap:10px;min-width:0}
.card--pack.featured .pack__head{background:var(--copper-deep);border-bottom-color:var(--copper-deep)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:var(--card)}
.pack__head b{font-family:var(--display);font-size:1.1rem;font-weight:700;color:var(--ink)}
.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(--copper);color:var(--dark);font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.07em;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}
.pack__per{font-family:var(--display);font-size:2.25rem;font-weight:700;color:var(--ink);line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1rem;font-weight:700;top:-.72em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;color:var(--ink-3);margin:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem;flex-wrap:wrap;color:var(--ink)}
.pack__tot b{font-weight:700;color:var(--ink)}
.pack__was{color:var(--ink-3);text-decoration:line-through;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-d);font-weight:700}
.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(--on-dark-2);text-align:center;margin:0}
.sec--panel .buy__note{color:var(--ink-3)}

/* ---- 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.s1{grid-template-columns:minmax(0,1fr)}
.shots>*{min-width:0}
.shots figure{margin:0;background:var(--card);border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--ink)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

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

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

/* ---- FAQ. Padding on <summary>, which is the click target. */
.faq{border-radius:var(--radius);overflow:hidden;background:var(--card);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line-card)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-weight:700;font-size:1.04rem;color:var(--ink)}
.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(--copper-deep)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px;color:var(--ink-2)}
.faq__body p,.faq__body li{color:var(--ink-2)}
.faq__body a{color:var(--copper-deep)}
.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(--on-dark-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token that pushed a single <a> past the viewport on
   eleven pages of a sister build. `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}
.sec--panel .refs li{color:var(--ink-2)}
.byline{display:flex;gap:18px;background:var(--card);color:var(--ink-2);border-left:6px solid var(--copper);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(--copper-deep);color:var(--card);font-family:var(--display);font-weight:700;font-size:1.04rem;border-radius:2px}
.byline b{display:block;margin-bottom:6px;color:var(--ink)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}
.byline a{color:var(--copper-deep)}
.byline>div{min-width:0}

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

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

/* ---- forms. 16px minimum or iOS Safari zooms on focus. */
.form{display:grid;gap:16px;max-width:var(--measure)}
.formcard{background:var(--card);color:var(--ink-2);border-radius:var(--radius);padding:26px 26px 28px;margin:0 0 1.2em}
.formcard h3{color:var(--ink)}
.formcard p{color:var(--ink-2)}
/* .btn--ghost is written for the char ground (--on-dark, #f5efe4). The site
   form's submit sits on the ivory .formcard instead, where that put
   near-white on near-white at 1.03:1 -- the button was invisible. Same
   container-specificity guard as .card and .final. */
.formcard .btn{color:var(--dark)}
.field label{display:block;font-weight:700;font-size:.9688rem;margin-bottom:6px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:13px 14px;border:1px solid var(--line-card);border-radius:var(--radius);background:#fffdf9;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{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.9375rem;color:var(--on-dark-2);margin:0 0 20px;padding-block:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.toc{background:var(--card);color:var(--ink-2);border-left:6px solid var(--copper);border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--ink)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1rem;color:var(--ink-2)}
.toc a{color:var(--copper-deep)}
.article h2{scroll-margin-top:120px}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts>*{min-width:0}
.posts article{background:var(--card);color:var(--ink-2);border-bottom:4px solid var(--copper);border-radius:var(--radius);overflow:hidden}
.posts article>div{padding:22px 24px}
.posts h3{margin:0 0 8px;color:var(--ink)}
.posts p{font-size:1rem;color:var(--ink-2)}
.posts a{color:var(--copper-deep)}
.posts .meta{font-size:.875rem;color:var(--ink-3)}
.dtable{min-width:520px}

/* ---- footer: a char slab with the guarantee restated wide across its head */
.fcta{position:relative;background:var(--dark);color:var(--on-dark);padding-block:0 52px;
  border-top:3px solid var(--copper)}
.fslab{background:var(--paper-2);margin:0 0 40px;padding-block:30px}
.fslab__h{font-family:var(--display);font-weight:700;color:var(--on-dark);
  font-size:clamp(1.3rem,.72rem + 1.9vw,2.4rem);line-height:1.15;letter-spacing:-.018em;margin:0}
.fslab__h em{font-style:normal;color:var(--copper-lite)}
.fcta h2,.fcta__h{color:var(--on-dark)}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__eye{display:inline-block;font-family:var(--display);font-size:.78125rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--copper-lite);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.55rem;font-weight:700;line-height:1.24;margin:0 0 10px}
.fcta p{color:var(--on-dark-2)}
.fcta__sm{font-size:.9375rem;color:var(--on-dark-2);margin:12px 0 0}
.fcta__sm a,.fcta p a{color:var(--copper-lite)}
.fcta__img img{width:auto;height:200px}
footer{background:var(--paper)}
.fribbon{padding-block:36px 26px;border-bottom:1px solid var(--line)}
.fribbon__h{display:block;font-family:var(--display);font-size:.78125rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark-2);margin:0 0 14px}
.fribbon ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px;list-style:none;margin:0;padding:0}
.fribbon li{min-width: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. */
footer li a{display:inline-block;padding-block:6px;margin-block:-6px;font-size:.9688rem;color:var(--on-dark-2);text-decoration:none}
footer li a:hover{color:var(--copper-lite)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:20px;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--on-dark-2)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--on-dark-2)}
.disc{background:#161412;border-top:1px solid var(--line);padding-block:30px 34px}
.disc p,.disc li{font-size:.9375rem;color:var(--on-dark-2)}
.disc b{color:var(--on-dark)}
.disc a{color:var(--copper-lite)}
.fdesk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:0 0 22px;padding:0 0 22px;border-bottom:1px solid var(--line-2)}
.fdesk>div{min-width:0}
.fbrand{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--on-dark);letter-spacing:-.024em;line-height:1}
.fbrand span{color:var(--copper-lite)}
.frole{font-size:.9375rem;color:var(--on-dark-2);margin:8px 0 0}
.fdesk p{margin:0 0 .7em}
.fdesk p:last-child{margin:0}
.fh{font-family:var(--display);font-size:.8125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--copper-lite);margin:0 0 10px}
.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:.66em;width:8px;height:2px;background:var(--copper)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#141210;color:var(--on-dark);
  border-top:2px solid var(--copper);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;color:var(--on-dark)}
.buybar__t span{color:var(--on-dark-2)}
.buybar .btn{margin-left:auto;flex:0 0 auto}

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

/* ---- responsive */
@media (max-width:1180px){
  .fribbon ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .badgewall--icons{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .fdesk{grid-template-columns:1fr 1fr;gap:22px}
}
@media (max-width:980px){
  :root{--navh:88px}
  .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:2px 0 10px}
  .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}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px;flex-wrap:wrap}
  .menu.open{display:flex}
  .menu__more{display:block}
  /* The roadmap line is useful and it is not what a buyer needs before the
     button. hero.md's stacked order is eyebrow, H1, shot, Quick Answer, CTA,
     then everything else, so this moves below the CTA on a phone. */
  .hero__road{order:7;margin-top:2px}
  .nav__rule{display:none}
  .nav__row{flex-wrap:wrap}
  .menu{order:3;flex-basis:100%}
  .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}
  .fribbon ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding-block:44px}
  .hero{padding-block:16px 36px}
  .hero__card img{height:clamp(212px,31vh,272px)}
  .hero__card{padding:4px}
  .hero__cap{margin-top:9px;padding:5px 11px;font-size:.78rem}
  .hero h1{font-size:clamp(1.62rem,1.02rem + 2.6vw,2.1rem);margin-bottom:13px}
  /* A 75-word answer in a 24px-padded card rendered 423px tall at 390 and put
     the CTA at y=1493. Same words, tighter box. */
  .answer{padding:15px 17px;margin-bottom:11px}
  .answer p{font-size:1rem;margin-bottom:.6em}
  .hero__cta{gap:9px;margin-bottom:16px}
  .hero__cta .btn{width:100%}
  .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,.badgewall--icons{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:3px solid var(--copper)}
  /* 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. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .fdesk,.fribbon ul{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){
  .badgewall,.badgewall--icons{grid-template-columns:1fr}
  .nav__buy{display:none}
}

/* ---- the hero product column sits on the LEFT at desktop ------------------
   DOM order stays copy-then-media so the H1 is early in the source for an
   answer engine and for LCP; the arrangement is done with `order`, and the
   mobile stack in the query above overrides it. */
@media (min-width:981px){
  .hero__media{order:-1}
}

/* ---- 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, 96px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 96px) - 28px);
    min-height: calc(100svh - var(--navh, 96px) - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

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

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

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

/* ==== 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 surface, design pass -----------------------------------
   Paint only: radius, shadow, background, transition. Nothing here moves a
   box, so it sits below CRITICAL-END and a restamp is enough for it.

   Scoped `body:has(.hero)`, which is index.html alone. Specificity is (0,2,1)
   or better everywhere, because modern_surface.py and footer_type.py append
   their blocks AFTER this one on every build and would win on source order.

   Slot: cards and panels 20px, buttons and chips 14px, depth read as a tight
   contact shadow plus a wide ambient one. The tint is this site's own ink
   (33,31,28) and its char (27,25,23) -- never neutral black. The estate's
   default here was a single flat 6% hairline, which is invisible under an
   ivory slab on a char ground. */
body:has(.hero){
  --grb-rc:20px;
  --grb-rctl:14px;
  --grb-sh:0 1px 2px rgba(33,31,28,.30),0 10px 28px rgba(27,25,23,.34);
  --grb-sh-lift:0 2px 4px rgba(33,31,28,.34),0 18px 40px rgba(27,25,23,.44);
  --grb-sh-cta:0 1px 2px rgba(27,25,23,.42),0 10px 24px rgba(138,78,22,.36);
}

/* the reading surfaces */
body:has(.hero) .card,
body:has(.hero) .step,
body:has(.hero) .byline,
body:has(.hero) .faq,
body:has(.hero) .final,
body:has(.hero) .tablewrap,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .split__img img,
body:has(.hero) .answer{border-radius:var(--grb-rc);box-shadow:var(--grb-sh)}
/* these two keep their designed flat cap -- a 4px copper top edge and a 6px
   copper left edge are the components' whole signature */
body:has(.hero) .callout{border-radius:0 0 var(--grb-rc) var(--grb-rc);
  box-shadow:var(--grb-sh)}
body:has(.hero) .alert{border-radius:0 var(--grb-rc) var(--grb-rc) 0;
  box-shadow:var(--grb-sh)}
/* chips and the figure strip take the control radius */
body:has(.hero) .factpills li{border-radius:999px}
body:has(.hero) .figures div{border-radius:var(--grb-rctl) var(--grb-rctl) 0 0}
body:has(.hero) .hero__cap{border-radius:999px}

/* ---- the two button weights. The buying CTA is the only gradient on the
   page; the secondary stays a flat outline, so the pair reads as two weights
   rather than two colours. Every stop is at or above --copper (#c47c31), the
   colour the palette note measured at 5.24:1 against --dark: a gradient that
   ran darker would quietly drop the label under 4.5:1 at its foot. The
   background-COLOR is untouched, so the fallback is exactly what shipped. */
body:has(.hero) .btn{border-radius:var(--grb-rctl);
  transition:transform .18s ease,box-shadow .18s ease,background-color .15s ease,
    border-color .15s ease,color .15s ease}
body:has(.hero) .btn--amber{
  background-image:linear-gradient(180deg,#e2a05c 0%,#d0872f 48%,#c47c31 100%);
  box-shadow:var(--grb-sh-cta)}
body:has(.hero) .btn--ghost{background-image:none;box-shadow:none}
body:has(.hero) .btn:hover{transform:translateY(-2px)}
body:has(.hero) .btn--amber:hover{
  background-image:linear-gradient(180deg,#f0bb7d 0%,#e09a45 48%,#d8903f 100%);
  box-shadow:var(--grb-sh-lift)}
body:has(.hero) .btn--ghost:hover{border-color:var(--copper);
  box-shadow:0 8px 20px rgba(27,25,23,.34)}
body:has(.hero) .btn:active{transform:translateY(0)}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--copper-lite);
  outline-offset:3px}

/* ---- the pricing row. The ribbon is a full-width bar: copper under the
   recommended tier, char under the quieter one, so the row has one badge that
   sells and one that informs. The raise itself is margin, above the marker. */
body:has(.hero) .prices .card--pack{border-radius:var(--grb-rc);
  box-shadow:var(--grb-sh);transition:box-shadow .2s ease,transform .2s ease}
body:has(.hero) .prices .card--pack.featured{
  background-image:linear-gradient(180deg,#fffdf7,#f7f3ec 46%);
  box-shadow:0 2px 6px rgba(33,31,28,.36),0 22px 52px rgba(27,25,23,.52)}
body:has(.hero) .prices .pack__flag{border-radius:0;
  background-image:linear-gradient(90deg,#3a352f,#4d4740 60%,#5b544b);
  background-color:#3a352f;color:var(--on-dark)}
body:has(.hero) .prices .featured .pack__flag{
  background-image:linear-gradient(90deg,#c47c31,#d89143 55%,#e0a05c);
  background-color:var(--copper);color:var(--dark)}
/* dashed separators between the feature rows, drawn as a background so the
   rows keep the height they were engineered with */
body:has(.hero) .prices .pack__perks li{
  background-image:repeating-linear-gradient(90deg,var(--line-card) 0 5px,
    rgba(0,0,0,0) 5px 11px);
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}
body:has(.hero) .prices .pack__perks li:last-child{background-image:none}
body:has(.hero) .prices .card--pack:hover{box-shadow:var(--grb-sh-lift);
  transform:translateY(-2px)}
body:has(.hero) .prices .card--pack.featured:hover{
  box-shadow:0 2px 6px rgba(33,31,28,.36),0 26px 60px rgba(27,25,23,.58);
  transform:translateY(-2px)}

/* ---- the other clickable surfaces answer the pointer the same way */
body:has(.hero) .rel a,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure{transition:box-shadow .2s ease,transform .2s ease}
body:has(.hero) .rel a:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .badgewall figure:hover{box-shadow:var(--grb-sh-lift);
  transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn,
  body:has(.hero) .prices .card--pack,
  body:has(.hero) .rel a,
  body:has(.hero) .shots figure,
  body:has(.hero) .badgewall figure{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn:active,
  body:has(.hero) .prices .card--pack:hover,
  body:has(.hero) .prices .card--pack.featured:hover,
  body:has(.hero) .rel a:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .badgewall figure: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 .fh{font-size:15px}
footer .fpay span{font-size:16px}
footer .fribbon__h{font-size:15px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */

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