/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Asap Fallback";src:local("Arial");font-weight:400;size-adjust:100.37%;ascent-override:93.06%;descent-override:21.12%;line-gap-override:0.00%}
@font-face{font-family:"Asap Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:92.68%;ascent-override:100.78%;descent-override:22.87%;line-gap-override:0.00%}
@font-face{font-family:"Source Serif 4 Fallback";src:local("Georgia");font-weight:400;size-adjust:108.59%;ascent-override:95.40%;descent-override:30.85%;line-gap-override:0.00%}
@font-face{font-family:"Source Serif 4 Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:95.96%;ascent-override:107.96%;descent-override:34.91%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   BURNTIDE — burntidebalance.com

   Layout and atmosphere taken from memohiive.com, properly this time: product
   on the LEFT of the hero and copy on the right, both on a single pale wash
   rising to white; the jar free-floating under a drop shadow rather than
   inside a card; pill CTAs with a gradient fill and a lift; round filled check
   discs; a star line under the buttons; and below the hero a full-width dark
   band carrying every section heading over a light content ground. Its
   breakpoints (991 / 767 / 575 / 380) are kept as the rhythm.

   Nothing of its palette survives. Colour is re-derived from the Burntide jar:
   an amber label, ember-orange flames, a deep red-brown wordmark and red
   gummies. The reference's ground is a cool blue-grey because its bottles are
   navy; this one is warm ivory because the jar is amber. Where the reference
   sets white on gold (2.4:1) this sets ink on gold (5.3:1).

   Assigned chrome for this build, used nowhere else in the family:
     type      Source Serif 4 (display) + Asap (body)
     header    logo left, boxed phone right, menu on a second line, left-aligned
     footer    index-style: four dense link columns under a full-width NAP card
     ground    warm ivory wash to white       radius 10 / 14 / 18 / pill
     cards     rounded, soft shadow, lift     hero: jar left, rings and a seal
     motion    staggered hero entrance, an ambient ring pulse and a CTA shine
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* cool slate-tinted ground */
  --paper:      #f6f7f9;
  --tint:       #eef0f4;
  --tint2:      #e4e8ee;
  --card:       #ffffff;
  --ink:        #1d2430;
  --ink-dk:     #101722;
  --muted:      #55606f;
  --faint:      #656d7a;
  --line:       #d7dce4;
  --line-soft:  #e7eaf0;

  /* the slate chrome — bars, footer, dark bands */
  --slate:      #2b3644;
  --slate-dk:   #1a2330;
  --slate-lt:   #3e4b5c;

  /* ember, from the flames on the label */
  --ember:      #b94a19;
  --ember-dk:   #ab3f11;
  --ember-dp:   #6f2a12;
  --ember-lt:   #fdf1e8;
  --ember-line: #f0c6a9;

  /* amber, from the label ground and the wordmark trim */
  --amber:      #e3a51d;
  --amber-dk:   #92640a;
  --amber-lt:   #fdf5e2;
  --amber-line: #efdcaa;

  --ease:  cubic-bezier(.2,.7,.3,1);
  --sh-in: inset 0 0 0 1px var(--line);

  /* The reference builds everything on soft rounded cards and 40px pill
     buttons. The 2px square edge was the house skeleton, not this site. */
  --r-s: 10px; --r: 14px; --r-l: 18px; --r-pill: 999px;

  /* the reference's hero is one pale wash rising to white. Re-derived warm
     off the Burntide jar's amber label rather than lifted from its cool blue */
  --ivory:   #faf1dd;
  --ivory-2: #fdf7ec;
  --gold-dp: #c07f0b;

  /* the full-width heading band: Burntide slate carried to the jar's ink */
  --band-a:  #2f3b4b;
  --band-b:  #101722;

  /* soft elevation replaces the flat outlined card */
  --sh-card:   0 6px 18px rgba(24,32,45,.09);
  --sh-card-h: 0 14px 30px rgba(24,32,45,.16);
  --sh-gold:   0 8px 20px rgba(192,127,11,.30);
  --sh-gold-h: 0 12px 26px rgba(192,127,11,.42);
  --sh-prod:   0 22px 42px rgba(24,32,45,.26);

  --display:'Source Serif 4','Source Serif 4 Fallback',Georgia,'Times New Roman',serif;
  --sans:'Asap','Asap Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap: 1160px; --prose: 68ch; --measure: 760px; --measure-wide: 980px;

  /* the slate rule grid behind the hero */
  --rule: rgba(43,54,68,.075);
}

/* ---- 2. RESET / BASE ----------------------------------------------------- */
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:124px}
body{
  margin:0;font-family:var(--sans);font-size:17px;line-height:1.72;
  color:var(--ink);background:var(--paper);overflow-x:clip;max-width:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video,iframe,table,figure{max-width:100%}
img{height:auto;display:block}
a{color:var(--ember-dk);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink-dk);font-weight:700;
  line-height:1.16;letter-spacing:-.006em;margin:0 0 .5em}
h1{font-size:clamp(1.95rem,4.1vw,2.75rem)}
h2{font-size:clamp(1.62rem,3.2vw,2.3rem)}
h3{font-size:1.26rem;line-height:1.3}
h4{font-size:1.03rem}
p{margin:0 0 1.1em}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--amber-lt)}
table{border-collapse:collapse}
section[id]{scroll-margin-top:124px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.prose{max-width:var(--prose)}
.center{text-align:center}
.center .prose{margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--ember-dk);
  padding:10px 16px;border:1px solid var(--line);z-index:2000}
.skip:focus{left:12px;top:12px}

/* ---- 3. SHARED ATOMS ----------------------------------------------------- */
.eyebrow{display:inline-block;font-family:var(--sans);font-weight:700;font-size:0.8438rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ember-dk);margin-bottom:.9rem}
.note{font-size:0.9062rem;color:var(--faint);line-height:1.64}
.lead{font-size:1.16rem;line-height:1.64;color:var(--muted)}

/* soft gold role chip, the reference's badge idiom in the jar's colour */
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--amber-lt);color:var(--ember-dp);border:1px solid var(--amber-line);
  font-family:var(--sans);font-weight:700;font-size:0.8438rem;letter-spacing:.13em;
  text-transform:uppercase;padding:8px 16px;border-radius:var(--r-pill);margin-bottom:18px}

/* Pill buttons with a gradient fill and a lift on hover, the way the
   reference builds them. The gold is the jar's amber, not the reference's;
   the ink label keeps it at 5.3:1 where white would have been 2.4:1. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:700;font-size:1rem;padding:.9em 1.7em;
  border-radius:var(--r-pill);cursor:pointer;border:1px solid transparent;min-height:48px;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .24s var(--ease),transform .24s var(--ease);
  text-decoration:none;line-height:1;text-align:center;letter-spacing:.01em;
  position:relative;isolation:isolate}
.btn:hover{text-decoration:none}
.btn--cta{background:linear-gradient(135deg,var(--amber),var(--gold-dp));color:var(--ink-dk);
  border-color:transparent;box-shadow:var(--sh-gold);overflow:hidden}
.btn--cta:hover,.btn--cta:focus-visible{color:var(--ink-dk);transform:translateY(-2px);box-shadow:var(--sh-gold-h)}
.btn--ghost{background:transparent;color:var(--amber-dk);border-color:var(--amber);border-width:1.5px}
.btn--ghost:hover{background:var(--amber-lt);color:var(--ember-dp);border-color:var(--amber-dk)}
.btn--gold{background:var(--amber);color:var(--ink-dk);border-color:var(--amber-dk)}
.btn--gold:hover{background:var(--gold-dp);color:var(--ink-dk)}
.btn--dark{background:linear-gradient(135deg,var(--band-a),var(--band-b));color:#fff;
  box-shadow:0 8px 20px rgba(16,23,34,.26)}
.btn--dark:hover{background:var(--band-b);color:#fff;transform:translateY(-2px)}
.btn--lg{font-size:1.05rem;padding:1.05em 2em}
.btn--block{display:flex;width:100%}

.sec{padding:60px 0;border-top:1px solid var(--line-soft)}
.sec--tint{background:linear-gradient(180deg,#fdfaf3 0%,#f7f1e4 100%)}
.sec--rose{background:linear-gradient(180deg,#fdf6ef 0%,#fbe9dc 100%);border-top-color:var(--ember-line)}
.sec--tight{padding:46px 0}
.sec__head{max-width:var(--prose);margin-bottom:32px}
.sec--center .sec__head{margin-inline:auto;text-align:center}

/* ---- 3b. THE HEADING BAND ------------------------------------------------
   The reference's defining rhythm: every section is announced by a full-width
   dark band carrying its heading, and the content below it sits on a light
   ground. Navy there, Burntide slate run down to the jar's ink here. */
.titleband{background:linear-gradient(135deg,var(--band-a) 0%,var(--band-b) 100%);
  padding:30px 0 32px;position:relative}
.titleband::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--ember) 0%,var(--amber) 50%,var(--ember) 100%)}
.titleband__e{color:var(--amber);font-family:var(--sans);font-weight:700;font-size:0.8438rem;
  letter-spacing:.22em;text-transform:uppercase;margin:0 0 .6em;text-align:center}
.titleband__t{color:#fff;text-align:center;margin:0;max-width:30ch;margin-inline:auto;
  font-size:clamp(1.34rem,3.1vw,2.05rem);line-height:1.22}
.titleband + .sec{border-top:0}
.titleband + .sec > .wrap > .sec__head{text-align:center}
@media(max-width:767px){.titleband{padding:22px 0 24px}}

/* ---- 4. UTILITY BAR + TWO-ROW NAV ---------------------------------------- */
.util{background:var(--slate-dk);color:#b9c2ce;font-size:0.9062rem}
.util__row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-block:7px;flex-wrap:wrap}
.util__item b{color:#fff;font-weight:600}
.util__tel{color:var(--amber);font-weight:700;white-space:nowrap}
.util__tel:hover{color:#fff;text-decoration:none}
@media(max-width:767px){.util__row{justify-content:center;text-align:center;font-size:0.9062rem;gap:5px 14px;padding-block:6px}
  .util__item:nth-child(2),.util__item:nth-child(3){display:none}}

/* Two rows: the wordmark and a boxed phone block on the first, the menu
   left-aligned on a second. On scroll the whole header compacts to a slim bar —
   the menu row loses its padding and the wordmark drops a size — rather than
   auto-hiding, so the buy route is never off-screen on a desktop. */
.nav{position:sticky;top:0;z-index:60;background:rgba(246,247,249,.97);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease}
.nav--stuck{box-shadow:0 1px 0 var(--line),0 10px 24px -20px rgba(16,23,34,.5)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-block:14px 12px;flex-wrap:nowrap;transition:padding .22s var(--ease)}
.nav--stuck .nav__row{padding-block:8px 6px}
.brand{display:inline-flex;align-items:center;gap:0;font-family:var(--display);
  font-weight:700;font-size:1.5rem;letter-spacing:-.012em;color:var(--ink-dk);
  flex:none;white-space:nowrap;transition:font-size .22s var(--ease)}
.nav--stuck .brand{font-size:1.3rem}
.brand:hover{text-decoration:none}
.brand span{color:var(--ember)}
.brand svg{width:30px;height:30px;flex:none;margin-right:10px}
.nav__cta{display:flex;align-items:center;gap:12px;flex:none}
/* the boxed phone block that sits to the right of the wordmark */
.nav__tel{display:flex;flex-direction:column;border:1px solid var(--line);
  border-left:3px solid var(--ember);padding:6px 14px;line-height:1.25;background:#fff;
  white-space:nowrap}
.nav__tel b{font-size:.98rem;color:var(--ink-dk);font-weight:700}
.nav__tel span{font-size:.7rem;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.nav__tel:hover{text-decoration:none;border-left-color:var(--ember-dk)}
.nav__menu{border-top:1px solid var(--line-soft);transition:max-height .22s var(--ease)}
.menu{display:flex;align-items:center;justify-content:flex-start;gap:26px;list-style:none;
  margin:0;padding:0;flex-wrap:nowrap}
.menu a{font-size:.92rem;font-weight:600;color:var(--muted);display:inline-block;
  padding:11px 0;border-bottom:2px solid transparent;white-space:nowrap;
  transition:padding .22s var(--ease)}
.nav--stuck .menu a{padding:7px 0}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ember-dk);border-bottom-color:var(--ember);
  text-decoration:none}
.burger{display:none;background:none;border:1px solid var(--line);flex-direction:column;
  gap:5px;cursor:pointer;padding:6px 9px;border-radius:var(--r-s)}
.burger span{width:20px;height:2px;background:var(--ink);display:block}
/* the row sheds rather than wraps */
@media(max-width:1180px){.menu{gap:19px}.menu a{font-size:.88rem}}
@media(max-width:1040px){.menu{gap:14px}.menu a{font-size:.85rem}}
@media(max-width:960px){
  .nav__menu{border-top:0}
  .menu{display:none;gap:0}
  .menu.open{display:flex;flex-direction:column;align-items:stretch;
    border-top:1px solid var(--line);padding:2px 0 8px}
  .menu.open li{border-bottom:1px solid var(--line-soft)}
  .menu.open a{display:block;padding:13px 0;min-height:44px;border-bottom:0}
  .burger{display:flex;min-height:44px;min-width:44px;align-items:center;justify-content:center}
}
@media(max-width:620px){.nav__tel{display:none}}
@media(max-width:430px){.nav__cta .btn{display:none}}

/* ---- 5. STICKY BUY BAR --------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--slate-dk);color:#fff;
  transform:translateY(105%);transition:transform .28s var(--ease);
  border-top:3px solid var(--ember)}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--wrap);margin-inline:auto;padding:10px 22px}
.buybar__t{font-size:.94rem;line-height:1.3;color:#c3cbd6}
.buybar__t b{font-family:var(--display);font-size:1.04rem;display:block;color:#fff}
.buybar__t .from{color:var(--amber);font-weight:700}
.buybar .btn{white-space:nowrap}
@media(max-width:575px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:.92rem}}

/* ---- 6. HERO ------------------------------------------------------------- */
/* The reference's arrangement: product on the LEFT, copy on the RIGHT, both
   standing on one pale wash that rises to white. No card, no frame and no
   rule grid — the jar floats on the ground under a deep drop shadow, ringed
   by the motif. The wash is warm here because the Burntide jar is amber; the
   reference's was cool because its bottles are navy. */
.hero{position:relative;overflow-x:clip;overflow-y:visible;
  background:linear-gradient(180deg,var(--ivory) 0%,var(--ivory-2) 46%,#fff 100%)}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 52% at 26% 34%,rgba(227,165,29,.20),rgba(227,165,29,0) 72%)}
.hero > .wrap{position:relative;z-index:1}
.hero__grid{display:grid;grid-template-columns:.96fr 1.04fr;gap:50px;align-items:center;
  padding-block:46px 54px}
.hero h1 span{color:var(--ember-dk);display:block}
.hero h1 small{display:block;margin-top:.36em;font-size:.36em;font-weight:600;
  font-family:var(--sans);letter-spacing:.01em;line-height:1.34;color:var(--muted)}
@media(max-width:575px){.hero h1 small{font-size:.5em}}
.hero__sub{font-size:1.1rem;color:var(--muted);margin:0 0 22px;max-width:52ch}

/* round filled check discs, the reference's tick idiom */
.ticks{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:11px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:500;color:var(--ink-dk)}
.ticks .ck{flex:0 0 26px;height:26px;background:linear-gradient(135deg,var(--amber),var(--gold-dp));
  color:var(--ink-dk);display:grid;place-items:center;font-size:.8rem;margin-top:1px;
  font-weight:700;border-radius:50%;box-shadow:0 3px 8px rgba(192,127,11,.34)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.pay{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.pay img{height:26px;width:auto}
.pay span{font-size:0.9062rem;color:var(--muted);font-weight:600}

/* ---- the product and everything around it ------------------------------- */
.hero__media{position:relative;text-align:center;display:grid;place-items:center;
  min-height:330px;isolation:isolate;width:100%;max-width:470px;margin-inline:auto}
.hero__rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0}
.hero__rings .ring{position:absolute;width:min(82%,340px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(192,127,11,.55);opacity:0;transform:scale(.5)}
.hero__glow{position:absolute;width:min(92%,390px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(227,165,29,.42) 0%,rgba(227,165,29,.12) 48%,rgba(227,165,29,0) 72%);
  z-index:0;pointer-events:none}
.hero__shot{position:relative;z-index:2;width:min(100%,452px)}
.hero__shot img{width:100%;margin:0 auto;filter:drop-shadow(var(--sh-prod))}
.hero__seal{position:absolute;top:2%;right:4%;width:108px;height:108px;z-index:3;
  filter:drop-shadow(0 8px 16px rgba(24,32,45,.22))}
.hero__seal .seal__ring{transform-box:view-box;transform-origin:50% 50%}
.hero__seal .seal__flame{transform-box:fill-box;transform-origin:50% 92%}

/* rating and guarantee cards, built as the reference builds its cards:
   white, rounded, a soft shadow and a hairline — not a bordered box */
.floaty{position:absolute;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r);box-shadow:var(--sh-card);padding:12px 16px;font-family:var(--sans);
  font-weight:700;font-size:0.9062rem;line-height:1.2;color:var(--ink-dk);z-index:4}
.floaty small{display:block;color:var(--amber-dk);font-size:0.9062rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;margin-top:4px}
.floaty--tl{top:4%;left:-10px}
.floaty--br{bottom:6%;right:-10px}
@media(max-width:1080px){.hero__seal{width:88px;height:88px}.floaty{font-size:0.9062rem;padding:10px 13px}}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:22px;padding-block:34px 44px}
  /* the copy column's children become grid items so they can be ordered
     individually: eyebrow, H1, the jar, Quick Answer, then the CTA. DOM order
     is untouched, so the Quick Answer still follows the H1 for parsers. */
  .hero__copy{display:contents}
  .hero__copy > .pill{order:1}
  .hero__copy > h1{order:2}
  .hero__media{order:3}
  .hero__copy > .answer{order:4}
  .hero__copy > .hero__cta{order:5}
  .hero__copy > .ticks{order:7}
  .hero__copy > .pay{order:8}
  .hero__copy > .hero__sub{order:9}
  /* the box shrinks with the jar, so the seal keeps hugging its shoulder
     instead of floating in the empty half of a 470px column */
  .hero__media{min-height:0;margin-block:4px;max-width:300px}
  .hero__shot{width:min(100%,262px)}
  .hero__shot img{max-width:262px}
  .hero__seal{width:76px;height:76px;top:0;right:-4px}
  .floaty{display:none}
}
@media(max-width:575px){.hero__seal{display:none}}

/* ---- 7. QUICK ANSWER (AEO) ----------------------------------------------- */
.answer{background:#fff;border:1px solid var(--line);border-left:4px solid var(--ember);
  padding:20px 24px;margin:22px 0 0}
.answer .tag{display:block;font-family:var(--sans);font-weight:700;font-size:0.8438rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ember-dk);margin-bottom:.55em}
.answer p{margin:0;font-size:1.062rem}

/* In the hero the answer is not a card: the approved layout runs it as two
   flowing paragraphs under the H1. The wrapper stays because it is the
   speakable selector and the AEO block; only the card styling comes off. */
.hero .answer{background:none;border:0;box-shadow:none;padding:0;margin:18px 0 0}
.hero .answer .tag{display:none}
.hero .answer p{font-size:1.062rem;color:var(--muted);margin:0 0 .85em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--ink-dk)}
/* the reference prints its star line directly under the buttons */
.hero__rating{display:flex;align-items:center;gap:9px;margin:18px 0 0;
  font-size:.96rem;color:var(--muted)}
.hero__rating b{color:var(--ink-dk)}
/* .hero__rating is a new child of the copy column and display:contents on
   phones promotes it to a grid item; with no order it defaults to 0 and jumps
   above the eyebrow. 5 ties it to the CTA it follows in the DOM. */
@media(max-width:920px){.hero__copy > .hero__rating{order:5}}

/* ---- 6b. TRUST CARDS ----------------------------------------------------
   The reference answers its hero with a row of white rounded cards, each
   carrying a circular icon disc over a heading. Same construction here, with
   the vendor's own circular emblems as the icons. It sits above the fold, so
   it belongs in the critical block rather than arriving with the async sheet
   and shifting the page. */
.trust{background:transparent;border:0;position:relative;z-index:1;margin-top:-26px}
.trust__row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;
  padding-block:0 6px;align-items:stretch}
.trust__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;
  font-size:0.9062rem;font-weight:600;color:var(--muted);background:#fff;
  border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--sh-card);
  padding:18px 12px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.trust__item:hover{transform:translateY(-5px);box-shadow:var(--sh-card-h)}
.trust__item img{height:52px;width:52px;object-fit:contain;border-radius:50%;padding:6px;
  background:radial-gradient(circle,#fdf7e8 0%,#f7ecd4 100%);border:1px solid var(--amber-line)}
@media(max-width:920px){.trust{margin-top:0}
  .trust__row{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;padding-block:6px}}
@media(max-width:520px){.trust__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* LCP text: paints on frame one */
.hero__copy > .answer{animation-delay:.14s}
.hero__copy > .ticks{animation-delay:.24s}
.hero__copy > .hero__cta{animation-delay:.32s}
.hero__copy > .hero__rating{animation-delay:.40s}
.hero__copy > .pay{animation-delay:.48s}

.hero__rings .ring{animation:btRing 7.2s var(--ease) infinite}
.hero__rings .ring--2{animation-delay:2.4s}
.hero__rings .ring--3{animation-delay:4.8s}
.hero__glow{animation:btGlow 9s ease-in-out infinite}
.hero__seal .seal__ring{animation:btSpin 46s linear infinite}
.hero__seal .seal__flame{animation:btFlicker 3.4s ease-in-out infinite}
.floaty{animation:btSettle .7s var(--ease) both}
.floaty--tl{animation-delay:.58s}
.floaty--br{animation-delay:.72s}

.hero__cta .btn--cta::after,.final .btn--cta::after{content:'';position:absolute;
  top:0;left:0;width:34%;height:100%;pointer-events:none;z-index:-1;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.62) 50%,rgba(255,255,255,0) 100%);
  animation:btShine 7s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  .hero__copy > *,.hero__rings .ring,.hero__glow,.hero__seal .seal__ring,
  .hero__seal .seal__flame,.floaty,.hero__cta .btn--cta::after,
  .final .btn--cta::after{animation:none!important}
  .hero__copy > *,.floaty{opacity:1!important;transform:none!important}
  .hero__rings,.hero__cta .btn--cta::after,.final .btn--cta::after{display:none}
}


/* ---- hero motif -- conic-sweep ---------------------------------------- */
.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:conic-gradient(from 210deg at 78% 28%,#f6f7f9,#f3e8d1 38%,#f0ddb3 68%,#f6f7f9)}.hero__media::before{content:'';position:absolute;inset:-12% -8%;border-radius:50%;background:conic-gradient(from 0deg,rgba(227,165,29,0.52),transparent 32%,rgba(227,165,29,0.50) 62%,transparent);filter:blur(26px);animation:btSweep 22s linear infinite;z-index:1}@keyframes btSweep{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}

/*!SITE-HOME-CRIT-START*/
/* Desktop reading order in the hero. Measured at 1440x900: the buy
   button sat at y=982, 82px under the fold, so the money page opened
   with nothing to click. The evidence list is the only long block
   above it, so it moves below the payment row and the button lands at
   ~726. Order only -- no box is resized. The phone order is composed
   separately with display:contents under 921px and is untouched here,
   which is why this query starts at 921. */
@media(min-width:921px){
  .hero__copy{display:flex;flex-direction:column}
  .hero__copy > .pill{order:1;align-self:flex-start}
  .hero__copy > h1{order:2}
  .hero__copy > .answer{order:3;margin-top:0}
  .hero__copy > .hero__cta{order:4;margin-top:26px}
  .hero__copy > .pay{order:5;margin-top:18px}
  .hero__copy > .ticks{order:6;margin:26px 0 0;padding-top:22px;
    border-top:1px solid rgba(29,36,48,.10)}
}
/* The recommended pack sits proud of the row. NEGATIVE margin-top, not
   transform: .price carries `reveal`, whose settled state is
   transform:none, so a transform raise is wiped the moment the card
   scrolls in. In a stretch row a negative top margin grows the card
   upward and leaves its bottom edge -- and therefore all three Add To
   Cart offsets -- exactly where they were. Not below 861px, where the
   packs are already one column and the card would ride into the
   section heading. */
@media(min-width:861px){
  body:has(#hero) #pricing .price--best{margin-top:-14px}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* the spec table — a rounded definition list under a soft shadow */
.qa{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-l);overflow:hidden;
  max-width:980px;margin:0 auto;box-shadow:var(--sh-card)}
.qa__h{background:linear-gradient(135deg,var(--band-a),var(--band-b));padding:16px 24px;
  font-family:var(--display);font-weight:700;font-size:1.02rem;color:#fff}
.qa dl{margin:0;display:grid;grid-template-columns:34% 1fr}
.qa dt,.qa dd{padding:12px 22px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:600;color:var(--ink-dk);background:var(--tint)}
.qa dd{color:var(--muted)}
.qa dl>:nth-last-child(-n+2){border-bottom:0}
@media(max-width:620px){
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:10px;border-bottom:0}
  .qa dd{padding-top:8px}
}

/* ---- 8. CARDS / GRIDS ---------------------------------------------------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* rounded, soft-shadowed, lifting on hover — the reference's card, in the
   jar's colours. This is what carries the reskin past the fold. */
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:26px 24px;box-shadow:var(--sh-card);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .18s ease}
.card:hover{border-color:var(--amber-line);transform:translateY(-5px);box-shadow:var(--sh-card-h)}
.card .ic{width:60px;height:60px;background:radial-gradient(circle,#fdf7e8 0%,#f7ecd4 100%);
  border:1px solid var(--amber-line);border-radius:50%;
  display:grid;place-items:center;margin-bottom:15px;overflow:hidden}
.card .ic img{height:34px;width:34px;object-fit:contain}
.card h3{margin-bottom:.4em}
.card p{margin:0 0 .8em;color:var(--muted);font-size:1.062rem}
.card p:last-child{margin-bottom:0}
/* the reference's left-accent feature block, squared off */
.card--edge{border-left:4px solid var(--amber)}
.card--num{counter-increment:cn;position:relative;padding-left:66px}
.card--num::before{content:counter(cn,decimal-leading-zero);position:absolute;left:24px;top:22px;
  font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--ember);line-height:1}
.gridnum{counter-reset:cn}

/* ---- 9. SPLIT / STEPS / BAND --------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.split--rev .split__media{order:2}
.split__media img{border:1px solid var(--line-soft);border-radius:var(--r-l);margin:0 auto;
  background:#fff;box-shadow:var(--sh-card)}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:26px}.split--rev .split__media{order:0}}
.chips{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:13px}
.chips li{display:flex;gap:13px;align-items:flex-start}
/* the reference sets each list item behind a filled circular badge */
.chips .ck{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--band-a),var(--band-b));color:#fff;
  font-weight:700;font-size:.92rem;line-height:1;margin-top:1px}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:26px 24px;box-shadow:var(--sh-card);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.step:hover{transform:translateY(-5px);box-shadow:var(--sh-card-h)}
.step__n{counter-increment:s;width:46px;height:46px;
  background:linear-gradient(135deg,var(--band-a),var(--band-b));
  color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;
  margin-bottom:15px;border-radius:50%;box-shadow:0 5px 14px rgba(16,23,34,.22)}
.step__n::before{content:counter(s)}
.step p:last-child{margin-bottom:0}
@media(max-width:880px){.steps{grid-template-columns:1fr}}
.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.steps--4{grid-template-columns:1fr}}

.band{max-width:980px;margin:0 auto;overflow:hidden;border:1px solid var(--line-soft);
  border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-card)}
.band img{width:100%;display:block}
.band--sm{max-width:820px}
.band__cap{padding:15px 22px;font-size:.87rem;color:var(--muted);border-top:1px solid var(--line-soft);
  background:#fdfaf3}

/* ---- 10. SHOTS (image + heading + copy, never a bare grid) --------------- */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.shots figure{margin:0;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-card);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.shots figure:hover{transform:translateY(-5px);box-shadow:var(--sh-card-h)}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tint)}
.shots figcaption{padding:18px 20px}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.05rem;
  color:var(--ink-dk);margin-bottom:.35em}
.shots figcaption span{font-size:.92rem;color:var(--muted)}
.shots--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots--tall img{aspect-ratio:3/4}
@media(max-width:940px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.shots,.shots--2{grid-template-columns:1fr}}

/* ---- 11. INGREDIENTS ----------------------------------------------------- */
.inglist{display:grid;gap:18px}
.ing{background:#fff;border:1px solid var(--line-soft);border-left:4px solid var(--amber);
  border-radius:var(--r);padding:26px 28px;box-shadow:var(--sh-card)}
.ing__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin-bottom:.7em}
.ing__top h3{margin:0}
.ing__dose{font-family:var(--sans);font-weight:700;font-size:0.8438rem;background:var(--amber-lt);
  color:var(--ember-dp);border:1px solid var(--amber-line);border-radius:var(--r-s);padding:4px 11px}
.ing__lat{font-size:0.9062rem;color:var(--faint);font-style:italic}
.ing p{margin:0 0 .8em}
.ing p:last-child{margin-bottom:0}
.ing__cite{font-size:.86rem;color:var(--muted)}

/* ---- 12. PRICING --------------------------------------------------------- */
.prices{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:20px;align-items:stretch;
  padding-top:18px}
.price{background:#fff;border:2px solid var(--line-soft);border-radius:var(--r-l);
  padding:30px 22px 26px;
  text-align:center;position:relative;display:flex;flex-direction:column;
  box-shadow:var(--sh-card);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.price:hover{transform:translateY(-6px);box-shadow:var(--sh-card-h)}
.price--best{border:2px solid var(--amber);padding:36px 24px 30px;background:#fffdf7;
  box-shadow:0 16px 36px rgba(192,127,11,.20)}
.price--ordered{border-color:var(--amber-line)}
.price__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--ember);
  color:#fff;font-family:var(--sans);font-weight:700;font-size:0.9062rem;letter-spacing:.13em;
  text-transform:uppercase;padding:6px 13px;white-space:nowrap;border-radius:var(--r-s)}
.price--ordered .price__badge{background:var(--amber-dk)}
.price img{margin:0 auto 14px;height:auto}
.price h3{margin-bottom:.2em}
.price--best h3{font-size:1.52rem}
.price__supply{font-size:.87rem;color:var(--faint);margin-bottom:.9em}
.price__each{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--ember-dp);
  line-height:1.2}
.price--best .price__each{font-size:1.72rem}
.price__each small{font-size:0.9062rem;font-weight:500;color:var(--muted);display:block;margin-top:6px;
  font-family:var(--sans)}
.price__was{color:var(--faint);font-size:0.9062rem}
.price__tot{font-weight:600;margin:.5em 0 1em;color:var(--muted);font-size:.95rem}
.price__save{display:inline-block;background:#fff;color:var(--ember-dp);border:1px solid var(--ember-line);
  font-family:var(--sans);font-weight:700;font-size:0.8438rem;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--r-s)}
.price .btn--block{margin-top:auto}
.price__ship{font-size:0.9062rem;color:var(--muted);font-weight:600;margin:.8em 0 0}
@media(max-width:1040px){.prices{grid-template-columns:1fr 1.1fr 1fr;gap:13px}
  .price{padding:22px 15px 18px}.price--best{padding:28px 17px 22px}}
@media(max-width:860px){.prices{grid-template-columns:1fr;gap:24px;max-width:430px;
    margin-inline:auto;padding-top:18px}
  .price{padding:26px 22px 22px}
  .price--best{padding:32px 24px 26px;order:1}
  .price--ordered{order:2}
  .price--basic{order:3}}

/* ---- 13. REVIEWS / STATS ------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stat{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:24px 20px;text-align:center;box-shadow:var(--sh-card)}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:2.1rem;
  color:var(--ember-dp);line-height:1.1}
.stat span{font-size:0.9062rem;color:var(--muted)}
@media(max-width:880px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.rbars{display:grid;gap:9px;max-width:460px}
.rbar{display:grid;grid-template-columns:44px 1fr 46px;align-items:center;gap:11px;font-size:.9rem}
.rbar .track{height:10px;background:var(--tint2);border:1px solid var(--line);
  border-radius:var(--r-pill);overflow:hidden}
.rbar .fill{height:100%;background:var(--amber)}
.rev__stars{color:var(--amber-dk);letter-spacing:.08em;white-space:nowrap}

/* ---- 14. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:10px;max-width:880px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r); padding: 0 22px;box-shadow:var(--sh-card)}
.faq details[open]{border-color:var(--amber-line)}
.faq summary{font-family:var(--display);font-weight:700;color:var(--ink-dk);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--amber-dk);font-weight:700;flex:none;font-size:1.25rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .faq__b{padding-top:.9em;color:var(--muted)}
.faq .faq__b p:last-child{margin-bottom:0}

/* ---- 15. CALLOUTS / ALERTS ----------------------------------------------- */
.callout{background:#fdfaf3;border:1px solid var(--line-soft);border-left:4px solid var(--band-a);
  border-radius:var(--r);padding:24px 28px;box-shadow:var(--sh-card)}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--amber-lt);border:1px solid var(--amber-line);border-left:4px solid var(--amber-dk);
  border-radius:var(--r);padding:24px 28px}
.alert p:last-child{margin-bottom:0}
.flag{display:inline-block;font-family:var(--sans);font-weight:700;font-size:0.8438rem;
  letter-spacing:.12em;text-transform:uppercase;background:var(--ember-lt);color:var(--ember-dp);
  border:1px solid var(--ember-line);border-radius:var(--r-pill);padding:6px 13px;margin-bottom:1rem}

/* ---- 16. TABLES ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r);
  background:#fff;box-shadow:var(--sh-card)}
.dtable{width:100%;font-size:1rem;min-width:520px}
.dtable th,.dtable td{padding:12px 17px;text-align:left;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.dtable thead th{background:linear-gradient(135deg,var(--band-a),var(--band-b));font-family:var(--sans);font-weight:700;
  color:#fff;font-size:0.9062rem;letter-spacing:.09em;text-transform:uppercase}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable tbody tr:nth-child(2n){background:#fdfaf3}
.facttab{width:100%;font-size:.95rem}
.facttab th,.facttab td{padding:12px 0;text-align:left;border-bottom:1px solid var(--line-soft)}
.facttab th{width:38%;font-weight:600;color:var(--ink-dk)}

/* ---- 17. FORMS ----------------------------------------------------------- */
.formcard{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-l);
  padding:30px;box-shadow:var(--sh-card)}
.form__row{display:grid;gap:16px;margin-bottom:16px}
@media(min-width:660px){.form__row--2{grid-template-columns:1fr 1fr}}
.form label{display:block;font-weight:600;font-size:0.9062rem;margin-bottom:6px;color:var(--ink-dk)}
.form input,.form select,.form textarea{width:100%;font-family:inherit;font-size:1rem;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);
  color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--ember);
  outline-offset:1px;background:#fff}
.form textarea{min-height:130px;resize:vertical}
.form__hint{font-size:0.9062rem;color:var(--faint);margin-top:6px}
.form__msg{margin-top:14px;padding:12px 16px;background:var(--ember-lt);
  border:1px solid var(--ember-line);font-size:.92rem;display:none}
.form__msg.show{display:block}

/* ---- 18. BADGE WALL -----------------------------------------------------
   .trust lives in the critical block instead, immediately under the hero it
   belongs to -- see section 6b. */
.badgewall{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.badgewall img{height:58px;width:auto}

/* ---- 19. FINAL CTA ------------------------------------------------------- */
.final{background:linear-gradient(135deg,var(--band-a) 0%,var(--band-b) 100%);color:#c8d0dc;
  padding:46px 44px;position:relative;border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 18px 40px rgba(16,23,34,.26)}
.final h2{color:#fff}
.final p{color:#c8d0dc;max-width:56ch;margin:0 auto 1.4em}
.final b,.final strong{color:#fff}
.final--media{display:grid;grid-template-columns:.8fr 1.2fr;gap:38px;align-items:center;text-align:left}
.final--media h2{text-align:left}
.final--media p{margin:0 0 1.3em;max-width:54ch}
.final--media .final__img img{width:100%;max-width:320px;height:auto;margin-inline:auto}
.final__price{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--amber);
  margin:.2em 0 .7em}
@media(max-width:880px){
  .final--media{grid-template-columns:1fr;gap:24px;text-align:center;padding:0}
  .final--media h2{text-align:center}
  .final--media p{margin-inline:auto}
  .final{padding:34px 22px}
}

/* ---- 20. RELATED / BYLINE / REFS ----------------------------------------- */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rel a{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:24px 26px;text-align:left;display:block;color:var(--ink);box-shadow:var(--sh-card);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .18s ease}
.rel a:hover{text-decoration:none;border-color:var(--amber-line);transform:translateY(-5px);
  box-shadow:var(--sh-card-h)}
.rel b{display:block;font-family:var(--display);color:var(--ink-dk);margin-bottom:.35em;font-size:1.08rem}
.rel span{font-size:.92rem;color:var(--muted)}
@media(max-width:880px){.rel{grid-template-columns:1fr}}

.byline{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line-soft);
  border-left:4px solid var(--amber);border-radius:var(--r);padding:22px 26px;margin-top:2.4em;
  box-shadow:var(--sh-card)}
.byline img{flex:0 0 66px;border:1px solid var(--line-soft);border-radius:50%}
.byline b{display:block;font-family:var(--display);color:var(--ink-dk);margin-bottom:.4em;font-size:1.05rem}
.byline p{margin:0;font-size:0.9062rem;color:var(--muted)}

.refs{font-size:.88rem;color:var(--muted)}
.refs ol{padding-left:1.3em;display:grid;gap:.6em}
.refs a{word-break:break-word}

.crumbs{font-size:0.9062rem;color:var(--faint);padding:13px 0 0;margin:0}
.crumbs a{color:var(--muted)}

.article{max-width:var(--prose);margin-inline:auto}
.article h2{margin-top:1.6em;scroll-margin-top:124px}
.article h3{margin-top:1.3em}
.dropcap::first-letter{float:left;font-family:var(--display);font-weight:700;font-size:3.1rem;
  line-height:.86;padding:.06em .11em 0 0;color:var(--ember-dk)}
.pullquote{border-left:4px solid var(--amber);padding-left:20px;margin:1.6em 0;
  font-family:var(--display);font-size:1.16rem;color:var(--ink-dk)}
.pullquote p{margin:0 0 .4em}
.pullquote cite{display:block;font-family:var(--sans);font-style:normal;font-weight:600;
  font-size:.86rem;color:var(--muted);letter-spacing:.02em}

/* ---- 21. FOOTER: NAP card on top, four dense link columns below ---------- */
footer{background:var(--slate-dk);color:#aeb8c5;padding:0 0 28px;font-size:.92rem}
footer h4{color:#fff;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.9em}
footer a{color:#dbe2ea}
footer a:hover{color:#fff}
.fnap{background:var(--slate);border-bottom:1px solid rgba(255,255,255,.1);
  padding:26px 0;margin-bottom:30px}
.fnap .wrap{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:26px;align-items:start}
.fnap h4{margin-bottom:.7em}
.fnap p{margin:0 0 .5em;font-size:1.062rem;line-height:1.7}
.fnap p:last-child{margin-bottom:0}
@media(max-width:880px){.fnap .wrap{grid-template-columns:1fr;gap:18px}}
.fbrand{font-family:var(--display);font-weight:700;font-size:1.4rem;color:#fff;margin-bottom:.4em}
.fbrand span{color:var(--amber)}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-bottom:28px}
@media(max-width:940px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:575px){.fgrid{grid-template-columns:1fr}}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.42em;font-size:.88rem}
.fbadges{display:flex;flex-wrap:wrap;gap:11px;margin-top:14px}
.fbadges img{height:36px;width:auto}
.fpay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 0;
  border-top:1px solid rgba(255,255,255,.12);font-size:0.9062rem}
.fpay img{height:24px;width:auto}
.disc{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;
  font-size:0.9062rem;line-height:1.7;color:#93a0b0}
.disc p{margin-bottom:.9em}
.disc b{color:#dbe2ea}
.copy{color:#7f8c9c}

/* ---- 22. BLOG ------------------------------------------------------------ */
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 1.8em;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:0.9062rem;color:var(--muted)}
.postmeta b{color:var(--ink-dk)}
.postmeta .sep{color:var(--line)}
.postmeta time{white-space:nowrap}

.toc{background:var(--tint);border:1px solid var(--line);border-left:4px solid var(--slate);
  padding:22px 26px;margin:0 0 2.2em}
.toc h2{font-family:var(--sans);font-size:.74rem!important;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ember-dk);margin:0 0 1em}
.toc ol{margin:0;padding-left:1.25em;display:grid;gap:.45em;font-size:.95rem}
.toc a{color:var(--ink)}
.toc a:hover{color:var(--ember-dk)}

.article figure{margin:2em 0}
.article figure img{width:100%;border:1px solid var(--line)}
.article figcaption{margin-top:.7em;font-size:0.9062rem;color:var(--faint);text-align:center}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}

.keypoints{background:var(--ember-lt);border:1px solid var(--ember-line);
  border-left:4px solid var(--ember);padding:22px 26px;margin:0 0 2em}
.keypoints>b{display:block;font-family:var(--sans);font-size:0.8438rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ember-dp);margin-bottom:1em}
.keypoints ul{margin:0;padding-left:1.2em;display:grid;gap:.5em}
.keypoints li b{color:var(--ember-dp)}

/* the closing CTA reused mid-article: same component, narrower column */
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;padding:28px 26px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.55rem;line-height:1.22;margin:0 0 .5em}
.article .final--media .final__price{font-size:1.28rem;margin:.3em 0 .7em}
@media(max-width:620px){
  .article .final--media{grid-template-columns:1fr;text-align:center;padding:28px 20px}
  .article .final--media h2{text-align:center;font-size:1.4rem}
}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--ember);
  overflow:hidden;display:flex;flex-direction:column}
.posts img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 38%;background:var(--tint)}
.posts .pbody{padding:22px 24px;display:flex;flex-direction:column;flex:1}
.posts h3{margin:0 0 .45em;font-size:1.12rem}
.posts h3 a{color:var(--ink-dk)}
.posts h3 a:hover{color:var(--ember-dk)}
.posts p{margin:0 0 1em;color:var(--muted);font-size:1.062rem}
.posts .pmeta{margin-top:auto;font-size:0.9062rem;color:var(--faint)}
@media(max-width:940px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}

/* ---- 23. MOTION: reveal on scroll, and nothing in the hero --------------- */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .card:hover,.rel a:hover,.step:hover,.price:hover,.trust__item:hover,
  .shots figure:hover{transform:none}
}

/* ---- 24. SINGLE-COLUMN MEASURE ------------------------------------------
   px, not ch: `ch` resolves against each element's own font-size, so one token
   produces a different pixel edge on .note than on .lead — which is the ragged
   column this section exists to remove. Multi-column components are excluded by
   not being listed; they keep the full wrap. */
.sec > .wrap > h2,
.sec > .wrap > h3,
.sec > .wrap > h4,
.sec > .wrap > p,
.sec > .wrap > ul,
.sec > .wrap > ol,
.sec > .wrap > .sec__head,
.sec > .wrap > .callout,
.sec > .wrap > .alert,
.sec > .wrap > .byline,
.sec > .wrap > .refs,
.sec > .wrap > .pullquote,
.sec > .wrap > blockquote{max-width:var(--measure);margin-inline:auto}

.sec > .wrap > .tablewrap,
.sec > .wrap > .faq,
.sec > .wrap > .steps,
.sec > .wrap > .inglist{max-width:var(--measure-wide);margin-inline:auto}

.sec > .wrap > [style*="max-width"]{margin-inline:auto}
.sec--center > .wrap > .sec__head{margin-inline:auto}

@media(max-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,
  .sec > .wrap > .tablewrap,.sec > .wrap > .faq,.sec > .wrap > .steps,
  .sec > .wrap > .inglist{max-width:100%}
}

/* ---- 25. REFERENCE BREAKPOINT RHYTHM ------------------------------------ */
@media(max-width:991px){.sec{padding:52px 0}}
@media(max-width:767px){.sec{padding:42px 0}.final{padding:32px 20px}
  .callout,.alert,.keypoints,.toc{padding:16px 18px}}
@media(max-width:575px){.card{padding:20px 17px}.card--num{padding-left:58px}
  .card--num::before{left:18px;font-size:1.3rem}
  .price__each{font-size:1.36rem}.price--best .price__each{font-size:1.55rem}
  .step{padding:20px 18px}.byline{flex-direction:column;gap:12px}
  .article .final--media{padding:22px 18px}}
@media(max-width:380px){.trust__item{font-size:0.9062rem}.trust__item img{height:34px}
  .btn--lg{padding:.9em 1.3em;font-size:.97rem}.badgewall img{height:48px}}


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

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

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

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

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

/* The FAQ click target is <summary>, not <details>. Keeping the
   vertical padding on details made the row LOOK ~56px and respond
   as ~30px, under the 44px minimum. Moving it here changes nothing
   visually and makes the whole row tappable. */
.faq summary{padding:18px 0}

/* --- a card grid nested inside another grid's column --------------------
   `.grid.g3` inside a `.grid.g2`, and `.steps--4` inside a `.split`, have
   about half the page to work with -- but their column counts come from the
   VIEWPORT, so at 1440px the four step cards were 118px wide (one word a
   line, and overflowing their own container) and the three review cards were
   168px. The wider the screen, the more certain the grid was that it had room.

   Nested grids take a count that fits the container instead. Exactly three
   items go to one column rather than 2 + 1, because a lone card in a second
   row is worse than a stack. Scoped above 880px: below that the parent grid
   is already a single column and the existing rules are right. */
@media(min-width:881px){
  .grid .grid,
  .split .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid .grid:has(> :nth-child(3):last-child),
  .split .steps:has(> :nth-child(3):last-child){grid-template-columns:1fr}
}
/* A chemical name with no break opportunity -- "Beta-hydroxybutyrate" -- is
   wider than a narrow card and pushed straight past its edge. */
.step,.card{overflow-wrap:break-word}

/* The footer column link is the thing you tap, and it was 17px tall in
   35px of row pitch -- under the 24px WCAG AA floor. The padding grows the
   hit area to ~33px and the negative margin gives the space straight back,
   so the footer renders identically. inline-block (not block) keeps the
   hover underline the width of the words. See fix_footer_tap.py. */
footer li a{display:inline-block;padding-block:4px;margin-block:-4px}

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{transition:none}}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */
/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */

/*!SITE-HOME-PAINT-START*/
/* ---------------------------------------------------------------------
   HOME PAGE SURFACE + HERO MOTIF.

   Home-only hook. The house note says class="hero" lives on index.html
   alone; on THIS site it is on all 30 pages -- every inner page opens
   with a crumbs/eyebrow/H1 band carrying the same class -- so
   body:has(.hero) would have repainted the whole site. Checked with
   grep: id="hero" is on index.html and nowhere else, so #hero is the
   anchor and body:has(#hero) is the page scope. Confirmed resolving in
   the browser, not assumed.

   Paint only: radius, shadow, colour, gradient, transform, transition
   and two animations. Nothing here resizes a box, so it belongs below
   the critical marker and travels on a restamp.

   Depth is three stops -- contact, mid, wide -- tinted with this
   site's own ink, 29,36,48. Never neutral black.
   --------------------------------------------------------------------- */
:root{
  --bt-rc:28px;   /* panels and cards */
  --bt-rb:18px;   /* buttons and controls */
  --bt-rs:20px;   /* small chips */
  --bt-e1:0 1px 2px rgba(29,36,48,.055),0 6px 14px rgba(29,36,48,.065),0 20px 44px rgba(29,36,48,.07);
  --bt-e2:0 1px 2px rgba(29,36,48,.08),0 6px 14px rgba(29,36,48,.10),0 20px 44px rgba(29,36,48,.16);
  --bt-e3:0 1px 2px rgba(29,36,48,.10),0 6px 14px rgba(192,127,11,.20),0 20px 44px rgba(192,127,11,.24);
}

/* modern_surface.py and footer_type.py re-append their blocks on every
   build and land after this one, so every rule below wins on
   SPECIFICITY -- body:has(#hero) is an id plus an element -- and never
   on source order. */
body:has(#hero) .card,
body:has(#hero) .step,
body:has(#hero) .price,
body:has(#hero) .stat,
body:has(#hero) .callout,
body:has(#hero) .byline,
body:has(#hero) .keypoints,
body:has(#hero) .tablewrap,
body:has(#hero) .rel a,
body:has(#hero) .faq details,
body:has(#hero) .final{border-radius:var(--bt-rc);box-shadow:var(--bt-e1)}

body:has(#hero) .trust__item{border-radius:var(--bt-rs);box-shadow:var(--bt-e1)}
body:has(#hero) .floaty{border-radius:var(--bt-rb);box-shadow:var(--bt-e2);
  border-color:rgba(29,36,48,.07)}

/* Two weights in the pair: the buying control is the only gradient on
   the page, the secondary is a solid white surface with a hairline.
   A ghost outline beside a filled button reads as one-and-a-half
   buttons; two solids read as a choice. */
body:has(#hero) .btn{border-radius:var(--bt-rb);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),
    background-color .18s ease,border-color .18s ease,color .18s ease}
body:has(#hero) .btn--cta{
  background:linear-gradient(135deg,#f2bd42 0%,var(--amber) 44%,var(--gold-dp) 100%);
  box-shadow:var(--bt-e3)}
body:has(#hero) .btn--ghost{background:#fff;color:var(--ember-dk);
  border-color:var(--line);box-shadow:var(--bt-e1)}
body:has(#hero) .btn--ghost:hover{background:#fff;color:var(--ember-dp);
  border-color:var(--amber)}

/* 2px. Enough to register under the pointer, not enough to reflow the
   row beside it. */
body:has(#hero) .btn:hover,
body:has(#hero) .btn:focus-visible{transform:translateY(-2px)}
body:has(#hero) .btn--cta:hover,
body:has(#hero) .btn--cta:focus-visible{
  box-shadow:0 2px 4px rgba(29,36,48,.12),0 10px 22px rgba(192,127,11,.28),
    0 26px 52px rgba(192,127,11,.28)}
body:has(#hero) .btn--ghost:hover,
body:has(#hero) .btn--ghost:focus-visible{box-shadow:var(--bt-e2)}
body:has(#hero) .card:hover,
body:has(#hero) .step:hover,
body:has(#hero) .rel a:hover,
body:has(#hero) .trust__item:hover{transform:translateY(-2px);box-shadow:var(--bt-e2)}
body:has(#hero) .price:hover{transform:translateY(-2px)}

/* Keyboard users get the same affordance the mouse gets. */
body:has(#hero) .btn:focus-visible,
body:has(#hero) .rel a:focus-visible,
body:has(#hero) .faq summary:focus-visible{outline:3px solid var(--ember);
  outline-offset:3px}

/* ---- packs -----------------------------------------------------------
   Slot ribbon: an inset pill sitting on a rule. The rule is the card's
   own top border, which the pill's ring knocks out so the badge reads
   set INTO the edge rather than stuck on top of it. The recommended
   tier changes colour as well as height: a warm surface, an amber
   edge and the warm depth stack, against the neutral one its
   neighbours carry.

   Nothing here touches the vertical engineering. The dashed
   separators are painted as a background hairline on the top edge of
   two rows rather than as a border, because a border is 1px of real
   height and 1px of real height moves every Add To Cart button in the
   row. Offsets measured before and after: 11761 / 11782 / 11761. */
body:has(#hero) #pricing .price{border-radius:var(--bt-rc)}
body:has(#hero) #pricing .price--best{
  background:linear-gradient(180deg,#fffaef 0%,#fff 62%);
  border-color:var(--amber);box-shadow:var(--bt-e3)}
body:has(#hero) #pricing .price__badge{border-radius:999px;padding:7px 17px;
  box-shadow:0 0 0 5px #fdf8ed,0 4px 12px rgba(29,36,48,.16)}
body:has(#hero) #pricing .price__each,
body:has(#hero) #pricing .price__ship{
  background-image:repeating-linear-gradient(90deg,
    var(--amber-line) 0 7px,rgba(0,0,0,0) 7px 13px);
  background-repeat:no-repeat;background-position:0 0;background-size:100% 1px}

/* ---- hero motif: slot "trace" ----------------------------------------
   One line follows the jar's silhouette and lets go. It lives on
   pseudo-elements of the media column and of the card wrapper -- never
   on the <img>, which is the LCP element and is preloaded.

   548px across a 400px product card, so the ring reads OUTSIDE the
   card instead of disappearing behind it. 34 seconds, and it is dark
   for the last third: this is a gummy taken once a day for six weeks,
   not an energy drink.

   Desktop only. Below 981px the media column is only as tall as the
   shot and a ring this size would spill across the copy. The ghost
   ring is sized from the CARD (137% of 400) and the travelling arc
   from the COLUMN, and the two are concentric because the card is
   centred in the column -- measured, both 548. */
@media(min-width:981px){
  #hero .hero__card::before{content:'';position:absolute;left:50%;top:50%;
    width:137%;aspect-ratio:1;translate:-50% -50%;z-index:-1;
    pointer-events:none;border-radius:50%;
    border:1px solid rgba(171,63,17,.14)}
  #hero .hero__media::after{content:'';position:absolute;left:50%;top:50%;
    width:min(124%,548px);aspect-ratio:1;translate:-50% -50%;z-index:1;
    pointer-events:none;border-radius:50%;
    border:1.5px solid rgba(171,63,17,.62);
    -webkit-mask-image:conic-gradient(#000 0deg,#000 9deg,rgba(0,0,0,0) 78deg,rgba(0,0,0,0) 360deg);
    mask-image:conic-gradient(#000 0deg,#000 9deg,rgba(0,0,0,0) 78deg,rgba(0,0,0,0) 360deg);
    animation:btbTrace 34s cubic-bezier(.42,0,.28,1) infinite}
}
@keyframes btbTrace{
  0%{transform:rotate(0deg);opacity:0}
  5%{opacity:1}
  56%{transform:rotate(344deg);opacity:1}
  70%{transform:rotate(360deg);opacity:0}
  100%{transform:rotate(360deg);opacity:0}
}

/* The sheet already reserved a sheen on the buying button and then
   lost the keyframes it named, so the strip sat frozen at the left
   edge of the CTA as a pale static smear. Same element, a real slow
   pass, transform and opacity only. */
body:has(#hero) .hero__cta .btn--cta::after,
body:has(#hero) .final .btn--cta::after{animation:btbSheen 11s ease-in-out infinite}
@keyframes btbSheen{
  0%,70%{transform:translateX(-160%);opacity:0}
  74%{opacity:.8}
  93%{opacity:.8}
  100%{transform:translateX(430%);opacity:0}
}

@media(prefers-reduced-motion:reduce){
  #hero .hero__media::after{animation:none;opacity:0}
  body:has(#hero) .hero__cta .btn--cta::after,
  body:has(#hero) .final .btn--cta::after{animation:none;display:none}
  body:has(#hero) .btn:hover,
  body:has(#hero) .btn:focus-visible,
  body:has(#hero) .card:hover,
  body:has(#hero) .step:hover,
  body:has(#hero) .rel a:hover,
  body:has(#hero) .price:hover,
  body:has(#hero) .trust__item: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{font-size:16px}
footer h4{font-size:15px}
footer ul{font-size:16px}
footer .disc{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 42 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 (29,36,48), 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{
  --r:16px;
  --shadow:0 1px 2px rgba(29,36,48,.06), 0 6px 18px rgba(29,36,48,.07);
  --lift:0 2px 6px rgba(29,36,48,.09), 0 16px 34px rgba(29,36,48,.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,
.toc,
.posts article,
.faq,
.answer,
.article figure{border-radius:var(--r)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.posts h3 a{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.posts h3 a:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.posts h3 a:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}