/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Urbanist Fallback";src:local("Arial");font-weight:400;size-adjust:100.23%;ascent-override:94.78%;descent-override:24.94%;line-gap-override:0.00%}
@font-face{font-family:"Urbanist Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:96.01%;ascent-override:98.95%;descent-override:26.04%;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 ==== */
/* ==========================================================================
   BOOST SURGE X - boostsurgexs.com

   Component system taken from the alkatidde.com reference: bordered content
   cards with generous radii, a sticky product rail, fact chips as pills, a
   left-ruled Quick Answer, numbered step rows, plan cards with an overhead
   ribbon, a rule-separated FAQ.

   Chrome is this site's own, per its assigned slot, and nothing below is
   shared with another build in this family:
     header   compact wordmark, a hamburger that is always there, CTA pill right
     panel    the menu slides in from the right at every width
     footer   centred and stacked, with an oversized CTA band above it
     ground   white
     radius   999px on buttons, 16px on cards
     cards    heavy shadow, no border
     hero     white ground, one strong drop shadow under the bottle
     motion   panel slide, and the hero bottle drifts against the scroll

   Palette is re-derived from the product, not from the reference. The bottle is
   matte black with a crimson wordmark and a crimson base band; the favicon is
   solid #bb0d0e. Nothing rose or magenta survives from alkatidde.com.
   Type: Urbanist (geometric display) and Source Serif 4 (body).
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* ground: white, per the assigned slot */
  --paper:      #ffffff;
  --tint:       #f6f7f9;
  --tint2:      #eef0f3;
  --card:       #ffffff;
  --ink:        #15181d;
  --ink-dk:     #0a0c10;
  --muted:      #545c67;
  --faint:      #686e77;
  --line:       #e3e6eb;
  --line-soft:  #f0f2f5;

  /* the crimson off the label and the favicon: the lead */
  --surge:      #c2121f;
  --surge-dk:   #9c0c18;
  --surge-dp:   #6d0710;
  --surge-lt:   #fdeef0;
  --surge-line: #f2c9cd;

  /* the matte black of the bottle, used for bands and the footer */
  --coal:       #16181c;
  --coal-dk:    #0c0e11;

  /* the brushed silver of the label type, for seals and secondary marks */
  --steel:      #7c8697;
  --steel-lt:   #f2f4f7;
  --steel-line: #dfe3ea;

  /* heavy shadow, no border: this site's card signature */
  --shadow:    0 26px 54px -26px rgba(12,14,17,.46);
  --shadow-sm: 0 14px 30px -18px rgba(12,14,17,.38);
  --shadow-xs: 0 6px 18px -12px rgba(12,14,17,.34);
  --ease:      cubic-bezier(.22,1,.36,1);

  --r-s: 10px; --r: 16px; --r-l: 22px;
  --figw: 440px;
  /* written from JS by the hero parallax; declared so it always resolves */
  --par: 0px;

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

/* ---- 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:96px}
body{
  margin:0;font-family:var(--sans);font-size:17.5px;line-height:1.74;
  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(--surge-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:800;
  line-height:1.14;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,4.9vw,3.3rem)}
h2{font-size:clamp(1.62rem,3.3vw,2.34rem)}
h3{font-size:1.26rem;line-height:1.3;font-weight:700}
h4{font-size:1.02rem;font-weight:700}
p{margin:0 0 1.12em}
strong,b{font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--surge-lt)}
table{border-collapse:collapse}
section[id]{scroll-margin-top:96px}

.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(--surge-dk);
  padding:10px 16px;border-radius:var(--r-s);z-index:2000}
.skip:focus{left:12px;top:12px}

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

.pill{display:inline-flex;align-items:center;gap:9px;background:var(--coal);color:#f4d7d9;
  font-family:var(--display);font-weight:800;font-size:0.8438rem;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 18px;border-radius:999px;margin-bottom:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--display);font-weight:800;font-size:1rem;padding:.94em 1.8em;
  border-radius:999px;cursor:pointer;border:1px solid transparent;min-height:48px;
  transition:transform .14s var(--ease),background .2s ease,box-shadow .2s ease;
  text-decoration:none;line-height:1;text-align:center;letter-spacing:.01em}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--cta{background:var(--surge);color:#fff;box-shadow:0 14px 30px -14px rgba(194,18,31,.78)}
.btn--cta:hover{background:var(--surge-dk);color:#fff}
.btn--ghost{background:#fff;color:var(--ink-dk);box-shadow:inset 0 0 0 1.5px var(--line),var(--shadow-xs)}
.btn--ghost:hover{color:var(--surge-dk);box-shadow:inset 0 0 0 1.5px var(--surge-line),var(--shadow-sm)}
.btn--gold{background:var(--coal);color:#fff}
.btn--gold:hover{background:var(--coal-dk);color:#fff}
.btn--lg{font-size:1.06rem;padding:1.04em 2.1em}
.btn--block{display:flex;width:100%}

.sec{padding:76px 0}
.sec--tint{background:var(--tint)}
.sec--rule{border-top:1px solid var(--line-soft)}
.sec--dark{background:var(--coal);color:#d7dae0}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark .eyebrow{color:#f1a8ad}
.sec--dark .lead,.sec--dark p{color:#c3c8d1}
.sec--tight{padding:52px 0}
.sec__head{max-width:var(--prose);margin-bottom:36px}
.sec--center .sec__head{margin-inline:auto;text-align:center}

/* ---- 4. UTILITY BAR + HEADER -------------------------------------------- */
.util{background:var(--coal-dk);color:#b9bfc9;font-size:0.9062rem}
.util__row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-block:8px;flex-wrap:wrap}
.util__item b{color:#fff}
.util__tel{color:#f1a8ad;font-weight:700;white-space:nowrap}
.util__tel:hover{color:#fff;text-decoration:none}
/* Five items wrap to three lines on a phone and eat a tenth of the screen. Keep
   the guarantee and the telephone number; the role chip is repeated as the hero
   pill twenty pixels further down, so showing it twice costs a line for nothing. */
@media(max-width:760px){
  .util__row{justify-content:center;text-align:center;font-size:0.9062rem;gap:5px 16px;padding-block:6px}
  .util__item:nth-child(1),.util__item:nth-child(2),.util__item:nth-child(3){display:none}
}

/* A compact bar: wordmark left, CTA pill and a burger right. The burger is
   present at EVERY width, so the row never has to shed links and can never
   wrap. Navigation lives in the slide-in panel and, in full, in the footer. */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);box-shadow:0 1px 0 var(--line);
  transition:box-shadow .3s ease}
.nav--stuck{box-shadow:var(--shadow-sm)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:12px;flex-wrap:nowrap}
.brand{display:inline-flex;align-items:center;gap:0;font-family:var(--display);
  font-weight:800;font-size:1.3rem;letter-spacing:-.035em;color:var(--ink-dk);
  white-space:nowrap;flex:none}
.brand:hover{text-decoration:none}
/* one flex item for the whole wordmark, so a flex gap can never fall between
   "Boost Surge" and the "X" and split it into two words */
.brand .bw{display:inline-block;white-space:nowrap}
.brand .bw i{font-style:normal;color:var(--surge)}
.brand svg{width:32px;height:32px;flex:none;margin-right:10px}
.nav__cta{display:flex;align-items:center;gap:10px;flex:none}
.nav__cta .btn{font-size:.9rem;padding:.72em 1.4em;min-height:42px}
.burger{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);border:0;border-radius:999px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  cursor:pointer;width:46px;height:46px;flex:none}
.burger span{width:18px;height:2px;background:var(--ink-dk);display:block;border-radius:2px;
  transition:transform .22s var(--ease),opacity .18s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:430px){.nav__cta .btn{display:none}}

/* the panel itself: off-canvas right, slides in */
.panel{position:fixed;top:0;right:0;bottom:0;width:min(370px,86vw);z-index:120;
  background:#fff;box-shadow:-24px 0 60px -30px rgba(12,14,17,.6);
  transform:translateX(102%);transition:transform .32s var(--ease);
  padding:26px 26px 40px;overflow-y:auto;visibility:hidden}
.panel.open{transform:translateX(0);visibility:visible}
.panel__top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:22px}
.panel__ttl{font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--surge-dk)}
.panel__x{background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;
  color:var(--ink-dk);padding:4px 8px}
.menu{list-style:none;margin:0;padding:0;display:grid;gap:0}
.menu li + li{border-top:1px solid var(--line-soft)}
.menu a{display:block;padding:14px 2px;font-family:var(--display);font-weight:700;
  font-size:1.02rem;color:var(--ink-dk);min-height:46px}
.menu a:hover,.menu a[aria-current="page"]{color:var(--surge-dk);text-decoration:none}
.panel__foot{margin-top:24px;font-size:.88rem;color:var(--muted)}
.panel__foot a{font-weight:700}
.scrim{position:fixed;inset:0;background:rgba(10,12,16,.42);z-index:110;opacity:0;
  visibility:hidden;transition:opacity .28s ease,visibility .28s ease}
.scrim.open{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.panel,.scrim{transition:none}}

/* ---- 5. STICKY BUY BAR --------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--coal-dk);color:#fff;
  transform:translateY(105%);transition:transform .3s var(--ease);box-shadow:0 -6px 24px rgba(0,0,0,.28)}
.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:11px 22px}
.buybar__t{font-size:.95rem;line-height:1.32}
.buybar__t b{font-family:var(--display);font-size:1.02rem;display:block}
.buybar__t .from{color:#f1a8ad;font-weight:700}
.buybar .btn{white-space:nowrap}
@media(max-width:560px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:.92rem}}

/* ---- 6. HERO ------------------------------------------------------------- */
.hero{background:var(--paper);position:relative;overflow-x:clip;overflow-y:visible}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:48px;
  align-items:start;padding-block:56px 70px}
.hero h1 span{color:var(--surge)}
.hero h1 small{display:block;margin-top:.36em;font-size:.36em;font-weight:600;
  letter-spacing:-.005em;line-height:1.3;color:var(--muted);font-family:var(--display)}
@media(max-width:560px){.hero h1 small{font-size:.44em}}
.hero__sub{font-size:1.1rem;color:var(--muted);margin:0 0 22px;max-width:52ch}
.ticks{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:11px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.ticks .ck{flex:0 0 22px;height:22px;border-radius:50%;background:var(--surge);color:#fff;
  display:grid;place-items:center;font-size:.74rem;margin-top:4px;font-weight:700;
  font-family:var(--display)}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.pay{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.pay img{height:24px;width:auto}
.pay span{font-size:0.9062rem;color:var(--muted);font-weight:700}

.hero__media{position:relative;text-align:center}
.hero__stick{position:relative;display:inline-block}
/* white ground, one strong drop shadow: no card, no border, no tinted disc */
.hero__card{display:inline-block;padding:6px}
.hero__card img{margin:0 auto;filter:drop-shadow(0 38px 42px rgba(12,14,17,.34))
  drop-shadow(0 4px 10px rgba(12,14,17,.18))}
.hero__tag{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  background:var(--coal);color:#fff;font-family:var(--display);font-weight:800;
  font-size:0.9062rem;letter-spacing:.11em;text-transform:uppercase;padding:8px 16px;
  border-radius:999px;white-space:nowrap;box-shadow:var(--shadow-sm)}
.floaty{position:absolute;background:#fff;border-radius:var(--r);padding:11px 15px;
  box-shadow:var(--shadow);font-family:var(--display);font-weight:800;font-size:0.9062rem;
  line-height:1.2;color:var(--ink-dk);z-index:2}
.floaty small{display:block;color:var(--surge-dk);font-size:0.9062rem;letter-spacing:.07em;
  text-transform:uppercase;font-weight:800;margin-top:3px}
.floaty--tl{top:8px;left:-14px}
.floaty--br{bottom:52px;right:-14px}

.factpills{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0 0 20px;padding:0}
.factpills li{background:#fff;border-radius:999px;padding:8px 16px;font-size:0.9062rem;
  font-weight:600;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.factpills li b{color:var(--ink-dk)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 24px}
.figures div{background:#fff;border-radius:var(--r-s);padding:15px 8px;text-align:center;
  box-shadow:var(--shadow-xs),inset 0 0 0 1px var(--line-soft)}
.figures b{display:block;font-family:var(--display);font-weight:800;font-size:1.36rem;
  color:var(--surge-dk);line-height:1.1}
.figures span{font-size:0.9062rem;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em}
.trust__row--hero{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:0.9062rem;font-weight:700;
  color:var(--muted);margin-top:4px}

@media(min-width:1025px){
  .hero__media{position:sticky;top:96px;align-self:start;height:calc(100vh - 96px);
    min-height:360px;display:flex;align-items:center;justify-content:center}
  .hero__stick{max-height:calc(100vh - 130px)}
  /* a px cap equal to the authored width attribute, so the reserved box and the
     painted box are the same number. width:auto would use the file's intrinsic
     width instead, which is unpredictable once the optimizer has run. */
  .hero__stick img{max-height:calc(100vh - 300px);min-height:180px;
    max-width:min(100%,420px);object-fit:contain}
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:20px;padding-block:40px 52px}
  /* the left column's children become grid items so they can be ordered one by
     one: eyebrow, H1, Quick Answer, bottle, CTA, then the supporting copy.
     DOM order is untouched, so the Quick Answer still follows the H1. */
  .hero__copy{display:contents}
  .hero__copy > .pill{order:1}
  .hero__copy > h1{order:2}
  .hero__copy > .answer{order:4}
  .hero__media{order:3}
  .hero__copy > .hero__cta{order:5}
  .hero__copy > .pay{order:6}
  .hero__copy > .hero__sub{order:7}
  .hero__copy > .factpills{order:8}
  .hero__copy > .ticks{order:9}
  .hero__copy > .figures{order:10}
  .hero__copy > .trust__row--hero{order:11}
  .hero__card img{max-width:250px}
  .floaty{display:none}
}

/* ---- 7. QUICK ANSWER (AEO) ----------------------------------------------- */
.answer{background:#fff;border-left:5px solid var(--surge);border-radius:0 var(--r) var(--r) 0;
  box-shadow:var(--shadow-sm);padding:21px 25px;margin:22px 0 0}
.answer .qtag{display:block;font-family:var(--display);font-weight:800;font-size:0.8438rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--surge-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 .qtag{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)}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.95rem;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}}

/* ---- hero motif -- surge-beam ---------------------------------------- */
.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,#ffffff,#f4d4d7 44%,#ffffff)}.hero__media::before{content:'';position:absolute;left:50%;top:-8%;width:34%;height:120%;translate:-50% 0;background:linear-gradient(180deg,rgba(194,18,31,0.55),transparent 76%);filter:blur(20px);animation:btBeam 5.5s ease-in-out infinite;z-index:1}@keyframes btBeam{0%,100%{opacity:.35;transform:translate(-50%,0) scaleY(1)}50%{opacity:.75;transform:translate(-50%,0) scaleY(1.07)}}
@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.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@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;}
}
/* --- end of the copied hero responsive rules --- */

/*!SITE-HOME-CRIT-START*/
/* HOME PAGE, DESKTOP ONLY -- the buy button on the first screen.
   Measured at 1440x900 before this block: the hero CTA sat at y=1053, 153px
   below the fold, so the first screen of the money page had nothing to click.
   The copy column becomes a flex column above 921px and the buttons are
   ordered up behind the Quick Answer; the evidence follows them. Below 921px
   the column is display:contents and its phone order is composed elsewhere --
   this block does not apply there and must not.
   This MOVES boxes, so it lives above the critical marker and is inlined into
   every page at build time; it matches nothing on a page without .hero. */
@media (min-width:921px){
  .hero__copy{display:flex;flex-direction:column;align-items:flex-start}
  .hero__copy>*{width:100%}
  .hero__copy>.pill{width:auto;order:1}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:3}
  .hero__copy>.hero__cta{order:4;margin-top:22px}
  .hero__copy>.pay{order:5}
  .hero__copy>.ticks{order:6}
  .hero__copy>.hero__sub{order:7}
  .hero__copy>.factpills{order:8}
  .hero__copy>.figures{order:9}
  .hero__copy>.trust__row--hero{order:10}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- 8. QUICK FACTS TABLE ------------------------------------------------ */
.qa{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;
  max-width:840px;margin:0 auto}
.qa__h{background:var(--coal);color:#fff;padding:16px 24px;font-family:var(--display);
  font-weight:800;font-size:1rem}
.qa dl{margin:0;display:grid;grid-template-columns:34% 1fr}
.qa dt,.qa dd{padding:13px 24px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:700;color:var(--ink-dk)}
.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:0;border-bottom:0}
  .qa dd{padding-top:4px}
}

/* ---- 9. CARDS / GRIDS ---------------------------------------------------- */
.grid{display:grid;gap:24px}
.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}}

/* heavy shadow, no border: the card signature for this site */
.card{background:var(--card);border-radius:var(--r);padding:28px 26px;box-shadow:var(--shadow-sm)}
.card:hover{box-shadow:var(--shadow)}
.card .ic{width:54px;height:54px;border-radius:var(--r-s);background:var(--surge-lt);
  display:grid;place-items:center;margin-bottom:16px;overflow:hidden;
  font-family:var(--display);font-weight:800;color:var(--surge-dk);font-size:1.1rem}
.card .ic img{height:38px;width:38px;object-fit:contain}
.card h3{margin-bottom:.42em}
.card p{margin:0;color:var(--muted);font-size:1.062rem}
.card p + p{margin-top:.8em}
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:940px){.whygrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.whygrid{grid-template-columns:1fr}}

/* ---- 10. SPLIT / STEPS / BAND -------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:46px;align-items:center}
.split--rev .split__media{order:2}
.split__media img{border-radius:var(--r);box-shadow:var(--shadow);margin:0 auto}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:28px}
  .split--rev .split__media{order:0}}
.chips{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:11px}
.chips li{display:flex;gap:11px}
.chips .ck{color:var(--surge);font-weight:800;flex:none;font-family:var(--display)}

.steps{display:grid;gap:15px}
.step{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-sm);padding:24px 26px;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;
  counter-increment:s}
.steps{counter-reset:s}
.step__n{width:38px;height:38px;border-radius:var(--r-s);background:var(--surge-lt);
  color:var(--surge-dp);display:grid;place-items:center;font-family:var(--display);
  font-weight:800;font-size:.98rem}
.step__n::before{content:counter(s)}
.step h3{margin-bottom:.35em}
.step p{margin:0;color:var(--muted);font-size:1.062rem}
.step p + p{margin-top:.7em}

.band{max-width:980px;margin:0 auto;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--shadow);background:#fff}
.band img{width:100%;display:block}
.band__cap{padding:15px 24px;font-size:.88rem;color:var(--muted);background:var(--tint)}

/* ---- 11. SHOTS (image + heading + copy, never a bare grid) --------------- */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots figure{margin:0;background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-sm)}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 42%;
  background:var(--tint)}
.shots figcaption{padding:19px 22px}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.04rem;
  color:var(--ink-dk);margin-bottom:.38em}
.shots figcaption span{font-size:.92rem;color:var(--muted)}
@media(max-width:940px){.shots--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.shots,.shots--wide{grid-template-columns:1fr}}

/* ---- 12. INGREDIENTS ----------------------------------------------------- */
.inglist{display:grid;gap:20px}
.ing{background:#fff;border-radius:var(--r);padding:26px 28px;box-shadow:var(--shadow-sm)}
.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(--display);font-weight:800;font-size:0.8438rem;background:var(--surge-lt);
  color:var(--surge-dp);border-radius:999px;padding:5px 13px}
.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)}
.ingthumbs{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:28px}
.ingthumbs figure{margin:0;width:min(200px,42vw);text-align:center}
.ingthumbs img{border-radius:var(--r-s);box-shadow:var(--shadow-sm)}
.ingthumbs figcaption{font-size:0.9062rem;color:var(--muted);margin-top:.5em}

/* ---- 13. PRICING --------------------------------------------------------- */
.prices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);
  gap:24px;align-items:stretch;padding-top:18px}
.price{background:#fff;border-radius:var(--r-l);padding:30px 24px 26px;text-align:center;
  box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column}
.price--best{padding:38px 26px 30px;box-shadow:0 34px 66px -28px rgba(194,18,31,.55),
  inset 0 0 0 2px var(--surge)}
.price--ordered{box-shadow:var(--shadow),inset 0 0 0 1px var(--steel-line)}
.price__badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--surge);color:#fff;font-family:var(--display);font-weight:800;
  font-size:0.9062rem;letter-spacing:.12em;text-transform:uppercase;padding:7px 16px;
  border-radius:999px;white-space:nowrap;box-shadow:0 10px 20px -10px rgba(109,7,16,.8)}
.price--ordered .price__badge{background:var(--coal)}
.price img{margin:0 auto 14px;height:auto}
.price h3{margin-bottom:.2em}
.price--best h3{font-size:1.56rem}
.price__supply{font-size:.87rem;color:var(--faint);margin-bottom:.9em}
.price__each{font-family:var(--display);font-weight:800;font-size:2.45rem;color:var(--surge-dp);
  line-height:1}
.price--best .price__each{font-size:3rem}
.price__each small{font-size:0.9062rem;font-weight:700;color:var(--muted);display:block;margin-top:5px;
  font-family:var(--display)}
.price__was{color:var(--faint);text-decoration:line-through;font-size:.92rem;margin:.4em 0 0}
.price__tot{font-weight:700;margin:.45em 0 1em}
.price__save{display:inline-block;background:var(--surge-lt);color:var(--surge-dp);
  border-radius:999px;font-family:var(--display);font-weight:800;font-size:0.8438rem;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;margin-left:6px;vertical-align:2px}
.price .btn--block{margin-top:auto}
.price__ship{font-size:0.9062rem;color:var(--muted);font-weight:700;margin:.8em 0 0}
@media(max-width:1040px){.prices{gap:16px}.price{padding:26px 18px 22px}
  .price--best{padding:32px 20px 26px}.price--best .price__each{font-size:2.5rem}}
@media(max-width:880px){
  .prices{grid-template-columns:1fr;gap:26px;max-width:430px;margin-inline:auto;padding-top:20px}
  .price--best{order:1}.price--ordered{order:2}.price--basic{order:3}
}

.guarantee{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;
  background:#fff;border-radius:var(--r-l);padding:36px;box-shadow:var(--shadow)}
.guarantee img{margin:0 auto}
.guarantee p{color:var(--muted)}
.guarantee p:last-child{margin-bottom:0}
@media(max-width:820px){.guarantee{grid-template-columns:1fr;gap:24px;text-align:center;
  padding:28px 22px}}

/* ---- 14. STATS / REVIEWS ------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stat{background:#fff;border-radius:var(--r);padding:24px;text-align:center;box-shadow:var(--shadow-sm)}
.sec--dark .stat{background:rgba(255,255,255,.07);box-shadow:none}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:2.15rem;
  color:var(--surge-dk);line-height:1}
.sec--dark .stat b{color:#f1a8ad}
.stat span{font-size:0.9062rem;color:var(--muted)}
.sec--dark .stat span{color:#c3c8d1}
@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:9px;background:var(--tint2);border-radius:999px;overflow:hidden}
.rbar .fill{height:100%;background:var(--surge);border-radius:999px}
.rev__stars{color:var(--surge);letter-spacing:.09em}

/* ---- 15. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:12px;max-width:880px;margin-inline:auto}
.faq details{background:#fff;border-radius:var(--r); padding: 0 24px;box-shadow:var(--shadow-sm)}
.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}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--surge);font-weight:800;flex:none;font-size:1.2rem;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}

/* ---- 16. CALLOUTS / ALERTS ----------------------------------------------- */
.callout{background:var(--tint);border-left:5px solid var(--surge);border-radius:0 var(--r) var(--r) 0;
  padding:22px 26px;box-shadow:var(--shadow-xs)}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--steel-lt);border-left:5px solid var(--steel);
  border-radius:0 var(--r) var(--r) 0;padding:22px 26px;box-shadow:var(--shadow-xs)}
.alert p:last-child{margin-bottom:0}
.flag{display:inline-block;font-family:var(--display);font-weight:800;font-size:0.8438rem;
  letter-spacing:.11em;text-transform:uppercase;background:var(--surge-lt);color:var(--surge-dp);
  border-radius:999px;padding:5px 13px;margin-bottom:1rem}

/* ---- 17. TABLES ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;border-radius:var(--r);background:#fff;box-shadow:var(--shadow-sm)}
.dtable{width:100%;font-size:1rem;min-width:520px}
.dtable th,.dtable td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.dtable thead th{background:var(--coal);color:#fff;font-family:var(--display);font-weight:700;
  font-size:0.9062rem;letter-spacing:.07em;text-transform:uppercase}
.dtable tbody tr:last-child td{border-bottom:0}
.facttab{width:100%;font-size:.94rem}
.facttab th,.facttab td{padding:12px 0;text-align:left;border-bottom:1px solid var(--line-soft)}
.facttab th{width:38%;font-weight:700;color:var(--ink-dk)}

/* ---- 18. FORMS ----------------------------------------------------------- */
.formcard{background:#fff;border-radius:var(--r-l);padding:32px;box-shadow:var(--shadow)}
.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:700;font-size:0.9062rem;margin-bottom:6px;color:var(--ink-dk);
  font-family:var(--display)}
.form input,.form select,.form textarea{width:100%;font-family:inherit;font-size:1rem;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--tint);
  color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--surge);
  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:13px 16px;border-radius:var(--r-s);background:var(--surge-lt);
  font-size:.92rem;display:none}
.form__msg.show{display:block}

/* ---- 19. TRUST STRIP / SEAL WALL ---------------------------------------- */
.trust{background:var(--tint);border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 40px;
  padding-block:24px}
.trust__item{display:flex;align-items:center;gap:10px;font-size:0.9062rem;font-weight:700;
  color:var(--muted)}
.trust__item img{height:42px;width:auto}
.badgewall{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.badgewall figure{margin:0;width:min(150px,40vw);text-align:center}
.badgewall img{height:74px;width:auto;margin:0 auto}
.badgewall figcaption{font-size:0.8438rem;color:var(--muted);margin-top:.6em}

/* ---- 20. PROMO BAND ------------------------------------------------------ */
.promo{background:var(--coal);color:#d7dae0;border-radius:var(--r-l);padding:32px 36px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.promo b{color:#fff;font-family:var(--display);font-size:1.2rem;display:block;margin-bottom:.35em}
.promo p{margin:0;font-size:1.062rem;color:#c3c8d1}
@media(max-width:780px){.promo{grid-template-columns:1fr;text-align:center}}

/* ---- 21. FINAL CTA ------------------------------------------------------- */
.final{background:linear-gradient(152deg,var(--coal) 0%,var(--coal-dk) 100%);color:#d7dae0;
  border-radius:var(--r-l);padding:48px 44px;position:relative;overflow:hidden}
.final h2{color:#fff}
.final p{color:#c3c8d1;max-width:56ch;margin:0 auto 1.5em}
.final b,.final strong{color:#fff}
.final--media{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:40px;
  align-items:center;text-align:left}
.final--media h2{text-align:left}
.final--media p{margin:0 0 1.4em;max-width:54ch}
.final--media .final__img img{width:100%;max-width:320px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.5))}
.final__price{font-family:var(--display);font-weight:800;font-size:1.95rem;color:#f1a8ad;
  margin:.2em 0 .7em}
@media(max-width:880px){
  .final--media{grid-template-columns:1fr;gap:26px;text-align:center;padding:0}
  .final--media h2{text-align:center}
  .final--media p{margin-inline:auto}
  .final{padding:38px 24px}
}

/* ---- 22. RELATED / BYLINE / REFS ----------------------------------------- */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rel a{background:#fff;border-radius:var(--r);padding:23px 25px;box-shadow:var(--shadow-sm);
  text-align:left;display:block;color:var(--ink)}
.rel a:hover{text-decoration:none;box-shadow:var(--shadow);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);color:var(--ink-dk);margin-bottom:.35em}
.rel span{font-size:.92rem;color:var(--muted)}
@media(max-width:880px){.rel{grid-template-columns:1fr}}

.byline{display:flex;gap:18px;align-items:flex-start;background:#fff;border-radius:var(--r);
  padding:22px 26px;margin-top:2.4em;box-shadow:var(--shadow-sm)}
.byline img{flex:0 0 66px;border-radius:50%}
.byline b{display:block;font-family:var(--display);color:var(--ink-dk);margin-bottom:.4em}
.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:14px 0 0;margin:0}
.crumbs a{color:var(--muted)}
.meta{font-size:0.9062rem;color:var(--faint)}

.article{max-width:var(--prose);margin-inline:auto}
.article h2{margin-top:1.6em;scroll-margin-top:110px}
.article h3{margin-top:1.3em}
.dropcap::first-letter{float:left;font-family:var(--display);font-weight:800;font-size:3.1rem;
  line-height:.84;padding:.06em .1em 0 0;color:var(--surge-dk)}
.pullquote{border-left:5px solid var(--surge);padding-left:22px;margin:1.6em 0;
  font-family:var(--display);font-size:1.16rem;color:var(--ink-dk);font-weight:600}
.pullquote p{margin:0 0 .4em}
.pullquote cite{display:block;font-family:var(--sans);font-style:normal;font-weight:700;
  font-size:.85rem;color:var(--muted);letter-spacing:.01em}

/* ---- 23. FOOTER: centred and stacked, oversized CTA above it ------------- */
.fcta{background:var(--surge);color:#fff;text-align:center;padding:52px 0}
.fcta__h{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3.2vw,2.3rem);
  line-height:1.14;letter-spacing:-.02em;margin:0 0 .5em;color:#fff}
.fcta p{max-width:58ch;margin:0 auto 1.5em;color:#ffe2e4;font-size:1.062rem}
.fcta .btn--ghost{background:#fff;color:var(--surge-dp);box-shadow:0 16px 34px -18px rgba(0,0,0,.5)}
.fcta .btn--ghost:hover{background:#fff;color:var(--surge-dp)}
.fcta__sm{font-size:.85rem;color:#ffd2d5;margin:1.2em 0 0}

footer{background:var(--coal-dk);color:#aab1bd;padding:56px 0 30px;font-size:.92rem;
  text-align:center}
footer h4{color:#fff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:1em}
footer a{color:#e3c3c6}
footer a:hover{color:#fff}
.fbrand{font-family:var(--display);font-weight:800;font-size:1.5rem;color:#fff;margin-bottom:.4em}
.fbrand span{color:#f1a8ad}
.fbadges{display:flex;flex-wrap:wrap;gap:14px;margin:18px auto 0;justify-content:center}
.fbadges img{height:38px;width:auto}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin:38px 0;
  text-align:left}
@media(max-width:940px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.fgrid{grid-template-columns:1fr;text-align:center}}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.fnap{border-top:1px solid rgba(255,255,255,.13);padding-top:26px;font-size:0.9062rem;
  line-height:1.78;max-width:760px;margin-inline:auto}
.fpay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  padding:20px 0;border-top:1px solid rgba(255,255,255,.13);margin-top:24px;font-size:0.9062rem}
.fpay img{height:24px;width:auto}
.disc{border-top:1px solid rgba(255,255,255,.13);margin-top:22px;padding-top:24px;
  font-size:0.9062rem;line-height:1.72;color:#939ba8;text-align:left;max-width:900px;
  margin-inline:auto}
.disc p{margin-bottom:.9em}
.copy{color:#7d858f;text-align:center}
.legal{font-size:0.9062rem}

/* ---- 24. 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-radius:var(--r);padding:22px 26px;margin:0 0 2.2em;
  box-shadow:var(--shadow-xs)}
.toc h2{font-family:var(--display);font-size:.75rem !important;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--surge-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(--surge-dk)}

.article figure{margin:2em 0}
.article figure img{width:100%;border-radius:var(--r);box-shadow:var(--shadow-sm)}
.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(--surge-lt);border-left:5px solid var(--surge);
  border-radius:0 var(--r) var(--r) 0;padding:22px 26px;margin:0 0 2em}
.keypoints>b{display:block;font-family:var(--display);font-size:0.8438rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--surge-dp);margin-bottom:1em}
.keypoints ul{margin:0;padding-left:1.2em;display:grid;gap:.5em}
.keypoints li b{color:var(--surge-dp)}

.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;padding:30px 28px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.58rem;line-height:1.22;margin:0 0 .5em}
.article .final--media .final__price{font-size:1.35rem;margin:.3em 0 .7em}
@media(max-width:620px){
  .article .final--media{grid-template-columns:1fr;text-align:center;padding:30px 22px}
  .article .final--media h2{text-align:center;font-size:1.42rem}
}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.posts article{background:var(--card);border-radius:var(--r-l);overflow:hidden;display:flex;
  flex-direction:column;box-shadow:var(--shadow-sm)}
.posts article:hover{box-shadow:var(--shadow)}
.posts img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 38%;
  background:var(--tint)}
.posts .pbody{padding:24px 26px;display:flex;flex-direction:column;flex:1}
.posts h3{margin:0 0 .45em;font-size:1.1rem}
.posts h3 a{color:var(--ink-dk)}
.posts h3 a:hover{color:var(--surge-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}}

/* ---- 25. MOTION ---------------------------------------------------------- */
/* Two behaviours only, both assigned: the panel slides (section 4), and the
   hero bottle drifts against the scroll. Section reveals are a quiet fade so
   the page does not sit still, and everything stops under reduced motion. */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.reveal.in{opacity:1;transform:none}
.anim{opacity:0;animation:riseIn .6s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* The parallax offset is written to this variable from one rAF-throttled
   scroll listener. Transform only, so it never triggers layout. */
.hero__card{transform:translate3d(0,var(--par,0px),0);will-change:transform}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .reveal,.anim{opacity:1;transform:none}
  .hero__card{transform:none}
  html{scroll-behavior:auto}
}
@media(max-width:920px){.hero__card{transform:none;will-change:auto}}

/* ---- 26. SINGLE-COLUMN MEASURE ------------------------------------------
   Single-column content gets one measure and is centred; multi-column
   components keep the full wrap by not being listed here. px, not ch: a ch
   token resolves against each element's own font-size and produces a
   different left edge for every type size. */
.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}

.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{max-width:100%}
}


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

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

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

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

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

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

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

/* A <small> inside a table cell that no rule reaches inherits the browser
   default of ~0.83em = 13.3px, under the 14.5px caption floor, and
   type_floor.py cannot see it because there is no rule to raise.
   See pitfalls.md #97. */
td small,.dtable small{font-size:0.9062rem}

/* ==== 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 -- assigned slot: motif "circulate", crisp two-stop depth,
   24px cards, 16px controls, ribbon as a tab above the card.

   PAINT ONLY. Radius, shadow, background, colour, transform, transition and
   animation move no box, so this sits below the critical marker and needs a
   restamp, not a rebuild.

   SCOPE. class="hero" is on index.html and on no other page of this site, so
   every selector below is either a descendant of .hero or is prefixed with
   body:has(.hero). Nothing here can reach pricing.html, the legal pages or
   the blog, all of which carry the same .card/.price/.btn markup.

   ORDER. modern_surface.py and footer_type.py re-append their blocks after
   this one on every build, so nothing here relies on being last: the token
   overrides sit on body:has(.hero) (0,1,1) to outrank their :root (0,1,0),
   and every component rule carries the same prefix to outrank their bare
   class selectors.
   ========================================================================== */

/* ---- 1. DEPTH -- two tight stops, crisp, tinted with this site's own ink
   (21,24,29). Never neutral black. Redefined on the home scope rather than
   per component so every surface that already reads var(--shadow) picks the
   slot's depth language up. --r-l is this site's card radius token. */
body:has(.hero){
  --shadow:    0 1px 1px rgba(21,24,29,.07), 0 4px 10px rgba(21,24,29,.11);
  --shadow-sm: 0 1px 1px rgba(21,24,29,.06), 0 3px 8px rgba(21,24,29,.09);
  --shadow-xs: 0 1px 1px rgba(21,24,29,.05), 0 2px 6px rgba(21,24,29,.07);
  --lift:      0 2px 3px rgba(21,24,29,.10), 0 12px 26px rgba(21,24,29,.16);
  --r-l: 24px;
}

/* ---- 2. CARD RADIUS -- the slot's 24px. The left-ruled callout and alert
   keep their square left edge, which is what the rule is for. */
body:has(.hero) .card,
body:has(.hero) .qa,
body:has(.hero) .step,
body:has(.hero) .stat,
body:has(.hero) .rel a,
body:has(.hero) .tablewrap,
body:has(.hero) .final,
body:has(.hero) .faq details,
body:has(.hero) .shots figure{border-radius:24px}
body:has(.hero) .callout,
body:has(.hero) .alert{border-radius:0 24px 24px 0}
/* small inner tiles follow the card, one step down */
body:has(.hero) .card .ic,
body:has(.hero) .step__n,
body:has(.hero) .figures div{border-radius:14px}

/* ---- 3. CONTROLS -- 16px, the slot's control radius, against this site's
   999px pill. The buying CTA carries a gradient; the secondary button stays
   solid, so the pair reads as two weights rather than two colours. */
body:has(.hero) .btn{
  border-radius:16px;
  transition:transform .18s var(--ease), box-shadow .22s ease,
             background-color .22s ease, color .22s ease;
}
body:has(.hero) .btn--cta{
  background-image:linear-gradient(177deg,#d8202d 0%,var(--surge) 46%,var(--surge-dk) 100%);
  box-shadow:0 1px 1px rgba(109,7,16,.20), 0 4px 10px rgba(194,18,31,.30);
}
body:has(.hero) .btn--cta:hover{
  background-image:linear-gradient(177deg,var(--surge) 0%,var(--surge-dk) 52%,var(--surge-dp) 100%);
  box-shadow:0 2px 3px rgba(109,7,16,.24), 0 12px 26px rgba(194,18,31,.36);
}
body:has(.hero) .btn--ghost{
  box-shadow:inset 0 0 0 1.5px var(--line), 0 1px 1px rgba(21,24,29,.05);
}
body:has(.hero) .btn--ghost:hover{
  box-shadow:inset 0 0 0 1.5px var(--surge-line),
             0 2px 3px rgba(21,24,29,.08), 0 12px 26px rgba(21,24,29,.14);
}
/* the 2px lift, on anything a reader can click */
body:has(.hero) .btn:hover,
body:has(.hero) .rel a:hover,
body:has(.hero) .shots figure:hover{transform:translateY(-2px)}
body:has(.hero) .btn:focus-visible,
body:has(.hero) .rel a:focus-visible,
body:has(.hero) .faq summary:focus-visible,
body:has(.hero) .nav a:focus-visible{
  outline:3px solid var(--surge);outline-offset:3px;border-radius:16px;
}

/* ---- 4. HERO MOTIF -- slot family "circulate": two counter-rotating arcs,
   the inner one tighter. Both live on pseudo-elements of the media column,
   never on the <img>, which is the LCP element and is preloaded.
   Sized LARGER than the 432px product card (596px and 466px) so they read
   outside it instead of disappearing behind it, and sat BEHIND it (z-index 0
   against the card's 2). Transform only -- the `rotate` property, which this
   sheet already relies on for `translate`. 54s and 38s: this is a capsule
   taken daily for weeks, not an energy drink.
   This overrides the blurred surge-beam that was on ::before above the
   critical marker, including its filter, background and size. */
body:has(.hero) .hero__media::before,
body:has(.hero) .hero__media::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  height:auto;
  aspect-ratio:1;
  translate:-50% -50%;
  background:none;
  filter:none;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
body:has(.hero) .hero__media::before{
  width:min(596px,118%);
  border:2px solid transparent;
  border-top-color:rgba(194,18,31,.34);
  border-right-color:rgba(194,18,31,.15);
  border-left-color:rgba(21,24,29,.07);
  animation:sxArcWide 54s linear infinite;
}
body:has(.hero) .hero__media::after{
  width:min(466px,92%);
  border:1.5px solid transparent;
  border-bottom-color:rgba(21,24,29,.20);
  border-left-color:rgba(194,18,31,.28);
  animation:sxArcTight 38s linear infinite reverse;
}
@keyframes sxArcWide{from{rotate:0deg}to{rotate:360deg}}
@keyframes sxArcTight{from{rotate:0deg}to{rotate:360deg}}

/* the product shot's own shadow, retuned to the slot's two crisp stops */
body:has(.hero) .hero__card img{
  filter:drop-shadow(0 2px 3px rgba(21,24,29,.10))
         drop-shadow(0 18px 26px rgba(21,24,29,.22));
}

/* ---- 5. PRICING -- ribbon as a tab above the card, a recommended tier that
   is raised in DEPTH and colour, and dashed separators between the rows.

   The three Add To Cart buttons share one baseline: the grid stretches the
   cards, .price is a flex column and .price .btn--block has margin-top:auto.
   Nothing below changes a padding, a margin, a height or a border on those
   cards, and nothing translates .price itself, so that baseline is untouched.
   The separators are drawn on pseudo-elements, which are out of flow. */
body:has(.hero) .price{border-radius:24px}
body:has(.hero) .price:hover{box-shadow:var(--lift)}
body:has(.hero) .price--best{
  background-image:linear-gradient(180deg,#ffffff 0%,#fff7f7 58%,var(--surge-lt) 100%);
  box-shadow:0 2px 4px rgba(109,7,16,.16), 0 18px 40px rgba(194,18,31,.24),
             inset 0 0 0 2px var(--surge);
}
body:has(.hero) .price--best:hover{
  box-shadow:0 3px 6px rgba(109,7,16,.20), 0 24px 52px rgba(194,18,31,.30),
             inset 0 0 0 2px var(--surge);
}
body:has(.hero) .price--ordered{
  box-shadow:var(--shadow), inset 0 0 0 1px var(--steel-line);
}
/* the ribbon: a tab that sits ON the top edge of the card, square-bottomed,
   rather than a pill floating across it. transform only -- the badge is
   absolutely positioned, so this moves no box. */
body:has(.hero) .price__badge{
  border-radius:12px 12px 0 0;
  transform:translate(-50%,calc(-100% + 14px));
  box-shadow:0 1px 1px rgba(109,7,16,.22), 0 6px 14px rgba(109,7,16,.26);
}
body:has(.hero) .price--best .price__badge{
  background-image:linear-gradient(177deg,#d8202d,var(--surge-dk));
}
/* dashed separators between the rows of a pack. Drawn on ::before, which is
   out of flow, so the row heights and the button baseline do not move. */
body:has(.hero) .price__each,
body:has(.hero) .price__ship{position:relative}
body:has(.hero) .price__each::before,
body:has(.hero) .price__ship::before{
  content:'';position:absolute;left:0;right:0;
  border-top:1px dashed var(--steel-line);
}
body:has(.hero) .price__each::before{top:-9px}
body:has(.hero) .price__ship::before{top:-7px}

/* ---- 6. REDUCED MOTION. The sheet already carries a blanket
   `*{animation:none!important;transition:none!important}`; this adds the
   hover transforms introduced above, which that rule cannot reach. */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn:hover,
  body:has(.hero) .rel a:hover,
  body:has(.hero) .shots figure:hover{transform:none}
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{animation: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 .disc{font-size:16px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 52 box-shadow declaration(s)
   and 6 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (21,24,29), 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{
  --shadow:0 1px 2px rgba(21,24,29,.06), 0 6px 18px rgba(21,24,29,.07);
  --lift:0 2px 6px rgba(21,24,29,.09), 0 16px 34px rgba(21,24,29,.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,
.badgewall figure,
.faq,
.answer,
.article figure,
.panel{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,
.badgewall figure,
.posts h3 a{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.badgewall 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,
.badgewall 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}