/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Space Grotesk Fallback";src:local("Arial");font-weight:400;size-adjust:111.32%;ascent-override:88.39%;descent-override:26.23%;line-gap-override:0.00%}
@font-face{font-family:"Space Grotesk Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:102.72%;ascent-override:95.79%;descent-override:28.43%;line-gap-override:0.00%}
@font-face{font-family:"Barlow Fallback";src:local("Arial");font-weight:400;size-adjust:97.50%;ascent-override:102.56%;descent-override:20.51%;line-gap-override:0.00%}
@font-face{font-family:"Barlow Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:92.85%;ascent-override:107.70%;descent-override:21.54%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   BURN XT - burnxts.com
   Component system taken from the alkattide.com reference: a single compact
   masthead row with the wordmark hard left, the menu inline beside it and a
   boxed contact block at the right end, flat full-bleed tint bands separated
   by hairlines, square edges everywhere, and a bottom dock.
   Nothing of the reference's colour survives. Colour is re-derived from the
   bottle in assets/: a matte graphite body and cap with a wide orange label
   band that samples at rgb 226,86,31, white display type over it.
   Ground is a graphite-tinted white rather than the reference's warm sand.
   Radius is zero on every surface. Cards are flat with a coloured left edge.
   The hero sits on plain white with a hard-edged orange block behind the
   bottle. The only motion is a slide-in from the right on alternating
   sections; the hero never animates, because its headline is the LCP element.
   Type: Space Grotesk (characterful display) + Barlow (neutral body).
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* graphite-tinted white ground */
  --paper:      #f6f6f8;
  --tint:       #eeeef1;
  --tint2:      #e6e6ea;
  --card:       #ffffff;
  --ink:        #24242a;
  --ink-dk:     #121216;
  --muted:      #4f4f5a;
  --faint:      #5d5d69;
  --line:       #dcdce3;
  --line-soft:  #e9e9ef;

  /* the label band - the lead colour, fills and rules only */
  --accent:     #e2561f;
  --accent-dk:  #ab3a0c;
  --accent-dp:  #7e2a07;
  --accent-lt:  #fdece4;
  --accent-line:#f4c9b4;

  /* the bottle body and cap, for dark bands, tables and the footer */
  --graphite:   #1f1f25;
  --graphite-dk:#141418;
  --on-dark:    #c9c9d2;
  --on-dark-2:  #a9a9b6;
  --on-dark-3:  #ff8a4d;

  /* the guarantee roundel, for safety notes and star rows */
  --gold:       #8a6410;
  --gold-lt:    #fbf3e2;
  --gold-line:  #e8d7ae;

  --shadow:     0 24px 44px -30px rgba(18,18,22,.52);
  --shadow-sm:  0 12px 26px -20px rgba(18,18,22,.40);
  --ease:       cubic-bezier(.2,.8,.2,1);

  /* square is the house treatment on this site: every radius token is 0 */
  --r-s: 0px; --r: 0px; --r-l: 0px; --r-xl: 0px;

  --display:'Space Grotesk','Space Grotesk Fallback',ui-sans-serif,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sans:'Barlow','Barlow Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap: 1180px; --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:118px}
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(--accent-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.14;letter-spacing:-.018em;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.5vw,3.05rem)}
h2{font-size:clamp(1.58rem,3.1vw,2.2rem)}
h3{font-size:1.24rem;line-height:1.28}
h4{font-size:1.02rem}
p{margin:0 0 1.1em}
strong,b{font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--accent-lt)}
table{border-collapse:collapse}
section[id]{scroll-margin-top:118px}
:focus-visible{outline:2px solid var(--accent-dk);outline-offset:2px}

.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(--accent-dk);
  padding:10px 16px;z-index:2000;border:1px solid var(--line)}
.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:.22em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:.7rem}
.note{font-size:0.9062rem;color:var(--faint);line-height:1.62}
.lead{font-size:1.14rem;line-height:1.62;color:var(--muted)}
.meta{font-size:0.9062rem;color:var(--faint);letter-spacing:.04em}

.pill{display:inline-flex;align-items:center;gap:8px;background:var(--graphite);
  color:#fff;border:0;
  font-family:var(--sans);font-weight:700;font-size:0.8438rem;letter-spacing:.18em;
  text-transform:uppercase;padding:9px 16px;margin-bottom:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--display);font-weight:700;font-size:.88rem;letter-spacing:.07em;
  text-transform:uppercase;padding:1.02em 1.8em;
  cursor:pointer;border:2px solid transparent;min-height:48px;border-radius:0;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
  text-decoration:none;line-height:1;text-align:center}
.btn:hover{text-decoration:none}
.btn--cta{background:var(--accent-dk);color:#fff;border-color:var(--accent-dk)}
.btn--cta:hover{background:var(--accent-dp);border-color:var(--accent-dp);color:#fff}
.btn--ghost{background:transparent;color:var(--ink-dk);border-color:var(--ink-dk)}
.btn--ghost:hover{background:var(--ink-dk);color:#fff}
.btn--gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn--gold:hover{background:#6f4f08;border-color:#6f4f08;color:#fff}
.btn--dark{background:var(--graphite);color:#fff;border-color:var(--graphite)}
.btn--dark:hover{background:var(--graphite-dk);border-color:var(--graphite-dk);color:#fff}
.btn--lg{font-size:.96rem;padding:1.1em 2.1em}
.btn--block{display:flex;width:100%}

.sec{padding:72px 0;position:relative}
.sec--tint{background:var(--tint);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.sec--slab{background:var(--graphite);color:var(--on-dark)}
.sec--slab h2,.sec--slab h3,.sec--slab b{color:#fff}
.sec--slab .eyebrow{color:var(--on-dark-3)}
.sec--tight{padding:48px 0}
/* the section header device: a heavy accent bar above a hairline rule */
.sec__head{max-width:var(--prose);margin-bottom:32px;padding-top:16px;
  border-top:1px solid var(--ink-dk);position:relative}
.sec__head::before{content:"";position:absolute;top:-4px;left:0;width:72px;height:7px;
  background:var(--accent)}
.sec--center .sec__head{margin-inline:auto;text-align:center}
.sec--center .sec__head::before{left:50%;transform:translateX(-36px)}
.sec--slab .sec__head{border-top-color:rgba(255,255,255,.28)}

/* ---- 4. MASTHEAD: one compact row, menu inline, boxed phone right -------- */
/* The assigned chrome for this site is a single row: a small square mark and
   wordmark hard left, the menu inline immediately after it, and the order
   desk in a bordered box at the right end. Nothing in the row may wrap -- it
   sheds instead, tightening the menu, then dropping the phone box, then
   collapsing to the burger (pitfalls #16). */
.util{background:var(--graphite-dk);color:var(--on-dark);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:var(--on-dark-3);font-weight:700;white-space:nowrap}
.util__tel:hover{color:#fff;text-decoration:none}
@media(max-width:900px){.util__row{justify-content:center;text-align:center;font-size:0.9062rem;
    gap:4px 14px;padding-block:7px}
  .util__item:nth-child(2),.util__item:nth-child(3){display:none}}

.nav{position:sticky;top:0;z-index:60;background:var(--card);
  border-bottom:2px solid var(--ink-dk);transition:box-shadow .3s ease}
.nav--stuck{box-shadow:var(--shadow-sm)}
@media(max-width:920px){
  .nav{transition:transform .28s var(--ease),box-shadow .3s ease;will-change:transform}
  .nav--away{transform:translateY(-100%)}
}
.nav__row{display:flex;align-items:center;gap:24px;padding-block:12px;flex-wrap:nowrap}
.brand{display:inline-flex;align-items:center;gap:0;flex:none;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand svg{width:34px;height:34px;flex:none;margin-right:10px}
.brand__t{display:block}
.brand__firm{display:block;font-size:.58rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--faint)}
.brand__prod{display:block;font-family:var(--display);font-weight:700;font-size:1.42rem;
  line-height:1.04;color:var(--ink-dk);letter-spacing:-.03em}
.brand__prod span{color:var(--accent-dk)}
.nav__aside{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}
.nav__tel{display:flex;flex-direction:column;border:2px solid var(--ink-dk);
  padding:6px 13px;line-height:1.2;white-space:nowrap}
.nav__tel b{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink-dk)}
.nav__tel small{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.nav__tel:hover{text-decoration:none;background:var(--accent-lt)}
.burger{display:none;background:none;border:2px solid var(--ink-dk);
  flex-direction:column;gap:5px;cursor:pointer;padding:10px 9px}
.burger span{width:20px;height:2px;background:var(--ink-dk);display:block}

.menu{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;
  flex-wrap:nowrap}
.menu a{display:block;padding:9px 13px;border-bottom:3px solid transparent;
  font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.menu a:hover{color:var(--ink-dk);border-bottom-color:var(--accent-line);text-decoration:none}
.menu a[aria-current="page"]{color:var(--accent-dp);border-bottom-color:var(--accent)}
@media(max-width:1400px){.menu a{padding:9px 10px;font-size:.75rem;letter-spacing:.03em}
  .nav__row{gap:16px}}
@media(max-width:1260px){.menu a{padding:9px 8px;font-size:.72rem}}
@media(max-width:1150px){.nav__tel{display:none}}
@media(max-width:1000px){
  .navstrip{display:none}
  .navstrip.open{display:block;position:absolute;left:0;right:0;top:100%;z-index:59;
    background:var(--card);border-bottom:2px solid var(--ink-dk);box-shadow:var(--shadow);
    max-height:74vh;overflow:auto}
  .navstrip.open .menu{flex-direction:column;align-items:stretch;padding:6px 22px}
  .navstrip.open .menu a{padding:14px 0;border-bottom:1px solid var(--line-soft);
    border-left:3px solid transparent;min-height:46px}
  .burger{display:flex}
  .nav__tel{display:flex}
}
@media(max-width:700px){.nav__tel{display:none}}
@media(max-width:430px){.nav__cta{display:none}.brand__prod{font-size:1.24rem}}

/* ---- 5. STICKY BUY BAR --------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--graphite-dk);
  color:#fff;transform:translateY(105%);transition:transform .3s var(--ease);
  border-top:4px solid var(--accent)}
.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:.93rem;line-height:1.3;color:var(--on-dark)}
.buybar__t b{font-family:var(--display);font-size:1.04rem;display:block;color:#fff}
.buybar__t .from{color:var(--on-dark-3);font-weight:700}
.buybar .btn{white-space:nowrap}
@media(max-width:560px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:0.9062rem}}

/* ---- 6. HERO ------------------------------------------------------------- */
/* Plain white ground with a hard-edged orange block sitting behind the
   bottle, squared off at every corner. No entrance animation anywhere in
   here: the H1 is the Largest Contentful Paint element on desktop. */
.hero{background:#fff;position:relative;overflow-x:clip;
  border-bottom:1px solid var(--line)}
.hero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:46px;align-items:start;
  padding-block:50px 72px}
.hero h1{margin-bottom:.38em}
.hero h1 span{color:var(--accent-dk);display:block}
.hero h1 small{display:block;margin-top:.32em;font-family:var(--sans);font-size:.33em;
  font-weight:600;letter-spacing:.01em;line-height:1.34;color:var(--muted)}
@media(max-width:560px){.hero h1 small{font-size:.44em}}
.hero__sub{font-size:1.08rem;color:var(--muted);margin:0 0 20px;max-width:54ch}
.ticks{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-weight:600;font-size:1.062rem}
/* --accent behind white text is 3.8:1, which fails AA for a glyph this small.
   The deep shade is 6.3:1 and reads as the same colour at 22px. */
.ticks .ck{flex:0 0 22px;height:22px;background:var(--accent-dk);color:#fff;
  display:grid;place-items:center;font-size:0.9062rem;margin-top:4px;font-weight:700}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.pay{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.pay img{height:26px;width:auto}
.pay span{font-size:0.9062rem;color:var(--accent-dk);font-weight:700}

.hero__media{position:relative;text-align:center}
.hero__stick{position:relative;display:inline-block}
/* the hard-edged colour block: a square orange plate behind the bottle, offset
   so two of its edges show. No radius, no gradient, no shadow on the plate. */
.hero__card{position:relative;display:inline-block;padding:26px 30px}
.hero__card::before{content:"";position:absolute;inset:34px 0 0 0;background:var(--accent);
  z-index:0}
.hero__card img{position:relative;z-index:1;margin:0 auto;
  filter:drop-shadow(0 22px 26px rgba(18,18,22,.30))}
.hero__tag{position:absolute;left:0;bottom:-14px;background:var(--graphite);color:#fff;
  padding:8px 16px;white-space:nowrap;font-family:var(--display);
  font-size:0.9062rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;z-index:2}
.floaty{position:absolute;background:#fff;border:2px solid var(--ink-dk);
  padding:10px 14px;font-weight:700;font-size:0.9062rem;line-height:1.2;
  color:var(--ink-dk);z-index:3}
.floaty small{display:block;color:var(--accent-dk);font-size:0.9062rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;margin-top:3px}
.floaty--tl{top:0;left:-14px}
.floaty--br{bottom:28px;right:-14px}

.factpills{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;padding:0;list-style:none}
.factpills li{background:var(--paper);border:1px solid var(--line);
  padding:7px 14px;font-size:0.9062rem;color:var(--muted)}
.factpills li b{color:var(--ink-dk)}
.figures{display:grid;grid-template-columns:repeat(3,1fr);margin:26px 0 0;
  border:2px solid var(--ink-dk);background:#fff;overflow:hidden}
.figures div{padding:16px 18px;border-left:1px solid var(--line)}
.figures div:first-child{border-left:0}
.figures b{display:block;font-family:var(--display);font-size:1.76rem;line-height:1;
  color:var(--accent-dp)}
.figures span{display:block;margin-top:5px;font-size:0.9062rem;color:var(--faint)}

@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:17px;padding-block:26px 50px}
  /* display:contents promotes the copy column's children to grid items so the
     phone order can be set individually. DOM order is untouched: the Quick
     Answer still follows the H1 for parsers and for the speakable selector. */
  .hero__copy{display:contents}
  .hero__copy > .pill{order:1;justify-self:start}
  .hero__copy > h1{order:2}
  .hero__copy > .answer{order:4}
  .hero__media{order:3}
  .hero__copy > .ticks{order:5}
  .hero__copy > .hero__cta{order:6}
  .hero__copy > .hero__rating{order:7}
  .hero__copy > .pay{order:8}
  .hero__copy > .hero__sub{order:9}
  .hero__copy > .factpills{order:10}
  .hero__copy > .figures{order:11}
  .hero__card{padding:14px 16px}
  .hero__card img{max-width:186px}
  .floaty{display:none}
}

/* The hero copy column runs well past 1,400px, so a statically placed shot
   ends up near the bottom of it. A sticky rail keeps the bottle beside
   whatever the reader is on. Offset by the header, capped by height so it
   scales rather than overflowing on a short laptop screen (pitfalls #15). */
@media(min-width:1025px){
  .hero__media{position:sticky;top:124px;align-self:start;height:calc(100vh - 136px);
    min-height:340px;display:flex;align-items:center;justify-content:center}
  .hero__stick{max-height:calc(100vh - 170px)}
  .hero__stick img{max-height:calc(100vh - 320px);min-height:170px;width:auto;object-fit:contain}
}

/* ---- 7. QUICK ANSWER (AEO) ----------------------------------------------- */
.answer{background:#fff;border:1px solid var(--line);border-left:5px solid var(--accent);
  padding:20px 24px;margin:22px 0 0}
/* In the hero the answer is not a card: the reference layout runs it as two
   flowing paragraphs under the H1. The wrapper stays because it is the
   speakable selector and the AEO block, but the card styling comes off. */
.hero .answer{background:none;border:0;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:.94rem;color:var(--muted)}
.hero__rating b{color:var(--ink-dk)}
.answer .qtag{display:block;font-family:var(--display);font-weight:700;font-size:0.8438rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:.55em}
.answer p{margin:0;font-size:1.062rem}


/* ---- hero motif -- angled-shear ---------------------------------------- */
.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(112deg,#f6f6f8 0 46%,#f2d9d1 46% 100%)}.hero__media::before{content:'';position:absolute;inset:10% 6% 6%;background:linear-gradient(112deg,rgba(226,86,31,0.46),transparent 62%);clip-path:polygon(0 12%,100% 0,100% 88%,0 100%);animation:btShear 10s ease-in-out infinite;z-index:1}@keyframes btShear{0%,100%{transform:translateX(-2%)}50%{transform:translateX(3%)}}
@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*/
/* burnxts.com home page -- layout + the paint that must be right on the FIRST
   frame. Everything above the critical marker is inlined into every page, so
   each rule here is gated on .hero, which exists on index.html alone.
   Slot: settle, card 18px, control 12px, one soft lift at 0 12px 30px. */

/* 1. The buy button on the first screen. In DOM order the hero CTA follows
   three Quick Answer paragraphs and a four-item tick list, which measured at
   1440x900 put its top edge at y=1011 -- 111px below the fold, so the money
   page's first screen had nothing to click. On desktop the copy column becomes
   a flex column and the CTA is ordered above the evidence. The phone order is
   composed separately with display:contents at <=920px and is untouched. */
@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}
  .hero__copy > .hero__cta{order:4;margin-top:26px}
  .hero__copy > .pay{order:5;margin-top:15px}
  .hero__copy > .hero__rating{order:6;margin-top:14px}
  .hero__copy > .ticks{order:7;margin:24px 0 0}
  .hero__copy > .factpills{order:8}
  .hero__copy > .figures{order:9}
  .hero__copy > .hero__sub{order:10}
}

/* 2. The featured pack sits proud of the row it shares. Margin, never
   transform: the reveal pass resets transform on arrival. Bottom edges still
   line up, so the three Add-To-Cart buttons keep their one baseline. */
@media (min-width:861px){
  .hero ~ #pricing .price--best{margin-top:-16px}
}

/* 3. Hero motif -- settle. A soft halo that breathes once, very slowly, and
   stays where it lands. It lives on the media column's pseudo-elements, never
   on the <img> (the LCP element), and it is sized well past the product plate
   so it reads outside it rather than disappearing behind an opaque card.
   The base style IS the settled state, so a reader with reduced motion, or a
   browser that drops the animation, sees the finished frame and not frame 0. */
#hero{background:linear-gradient(166deg,#ffffff 0%,#f8f8fa 48%,#fdf1ea 100%)}
#hero .hero__media::before{content:"";position:absolute;left:50%;top:50%;
  width:min(150%,760px);aspect-ratio:1;border-radius:50%;
  clip-path:none;animation:none;transform:translate(-50%,-50%);
  inset:auto;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(226,86,31,.20),rgba(226,86,31,.07) 58%,rgba(226,86,31,0) 75%)}
#hero .hero__media::after{content:"";position:absolute;left:50%;top:50%;
  width:min(124%,620px);aspect-ratio:1;border-radius:50%;
  z-index:1;pointer-events:none;opacity:.85;
  transform:translate(-50%,-50%) scale(1);
  background:radial-gradient(closest-side,rgba(226,86,31,0) 50%,rgba(226,86,31,.24) 67%,rgba(226,86,31,.07) 80%,rgba(226,86,31,0) 88%);
  animation:bxSettle 6.4s cubic-bezier(.22,.7,.2,1) both}
@keyframes bxSettle{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.82)}
  58%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}
  100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}
}
@media (max-width:920px){
  #hero .hero__media::before{width:min(118%,420px)}
  #hero .hero__media::after{width:min(104%,330px)}
}
@media (prefers-reduced-motion:reduce){
  #hero .hero__media::after{animation:none;opacity:.85;transform:translate(-50%,-50%) scale(1)}
}

/* 4. First-screen corners and the CTA fill. These four elements are painted
   from the inlined block, so the rounding has to be inlined with them or the
   first screen renders square and re-rounds when the async sheet lands. */
.hero .pill{border-radius:999px}
.hero .ticks .ck{border-radius:12px}
.hero .floaty{border-radius:12px}
.hero .figures{border-radius:18px}
.hero .factpills li{border-radius:999px}
.hero__card::before{border-radius:18px}
.hero__tag{border-radius:12px}
body:has(.hero) .btn{border-radius:12px}
body:has(.hero) .btn--cta{background-image:linear-gradient(135deg,#c04510 0%,var(--accent-dk) 48%,var(--accent-dp) 100%)}
/*!SITE-HOME-CRIT-END*/
/*!CRITICAL-END*/
/* ---- 8. KEY FACTS TABLE -------------------------------------------------- */
/* One measure with the tables and the FAQ, not a fourth edge of its own:
   `--measure-wide` is what every other multi-column block on the page uses,
   and a single stray width is how a column ends up with seven left edges
   (pitfalls #40). */
.qa{background:#fff;border:2px solid var(--ink-dk);overflow:hidden;
  max-width:var(--measure-wide);margin:0 auto}
.qa__h{background:var(--graphite);padding:16px 24px;font-family:var(--display);font-weight:700;
  font-size:1.05rem;color:#fff}
.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);font-size:1.062rem;letter-spacing:.1em;
  text-transform:uppercase}
.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: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}}

/* the assigned card treatment: flat, hairline box, coloured left edge */
.card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);
  padding:26px 28px}
.card .ic{width:54px;height:54px;background:var(--accent-lt);
  display:grid;place-items:center;margin-bottom:15px;overflow:hidden;
  border:1px solid var(--accent-line)}
.card .ic img{height:36px;width:36px;object-fit:contain}
.card h3{margin-bottom:.4em}
.card p{margin:0;color:var(--muted);font-size:1.062rem}
.card p+p{margin-top:.8em}
.sec--tint .card{background:#fff}
.sec--slab .card{background:var(--graphite-dk);border-color:rgba(255,255,255,.16);
  border-left-color:var(--accent)}
.sec--slab .card p,.sec--slab .card{color:var(--on-dark)}
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:940px){.whygrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.whygrid{grid-template-columns:1fr}}
.whycard{background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--accent);padding:26px}
.whycard h3{margin-bottom:.4em}
.whycard p{margin:0;color:var(--muted);font-size:1.062rem}

/* ---- 10. SPLIT / STEPS / BAND -------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split--rev .split__media{order:2}
.split__media img{border:1px solid var(--line);margin:0 auto}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:26px}.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(--accent-dk);font-weight:700;flex:none}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-top:4px solid var(--ink-dk);
  padding:26px 24px}
.step__n{counter-increment:s;width:42px;height:42px;background:var(--ink-dk);
  color:#fff;display:grid;place-items:center;font-family:var(--display);
  font-weight:700;margin-bottom:14px}
.step__n::before{content:counter(s,decimal-leading-zero)}
@media(max-width:880px){.steps{grid-template-columns:1fr}}

.band{max-width:900px;margin:0 auto;overflow:hidden;border:1px solid var(--line);
  background:#fff}
.band img{width:100%;display:block}
.band--sm{max-width:760px}
.band__cap{padding:16px 24px;font-size:.88rem;color:var(--muted);
  border-top:1px solid var(--line-soft);background:var(--paper)}

/* ---- 11. 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);overflow:hidden}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tint)}
.shots figcaption{padding:20px 22px;border-top:4px solid var(--accent)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.04rem;
  color:var(--ink-dk);margin-bottom:.4em}
.shots figcaption span{font-size:.91rem;color:var(--muted)}
.shots--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:940px){.shots{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:1px solid var(--line);border-left:4px solid var(--accent);
  padding:26px 28px}
.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:700;font-size:0.8438rem;
  background:var(--graphite);color:#fff;padding:5px 12px;letter-spacing:.05em}
.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:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:28px}
.ingthumbs figure{margin:0}
.ingthumbs img{width:100%;border:1px solid var(--line)}
.ingthumbs figcaption{margin-top:.7em;font-size:0.9062rem;color:var(--muted)}
@media(max-width:880px){.ingthumbs{grid-template-columns:1fr}}

/* ---- 13. PRICING --------------------------------------------------------- */
.prices{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:20px;align-items:stretch;
  padding-top:16px}
.price{background:#fff;border:1px solid var(--line);border-top:6px solid var(--line);
  padding:30px 24px 26px;text-align:center;position:relative;
  display:flex;flex-direction:column}
.price--best{border:2px solid var(--ink-dk);border-top:6px solid var(--accent);
  padding:36px 26px 30px}
.price--ordered{border-top-color:var(--graphite)}
.price__badge{position:absolute;top:-1px;left:0;
  background:var(--accent-dk);color:#fff;font-family:var(--display);font-weight:700;
  font-size:0.9062rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 13px;
  white-space:nowrap}
.price--ordered .price__badge{background:var(--graphite)}
.price img{margin:0 auto 14px;height:auto}
.price h3{margin-bottom:.2em}
.price--best h3{font-size:1.5rem}
.price__supply{font-size:.86rem;color:var(--faint);margin-bottom:.9em}
.price__each{font-family:var(--display);font-weight:700;font-size:1.86rem;color:var(--ink-dk);
  line-height:1.12}
.price--best .price__each{font-size:2.05rem}
.price__each small{font-size:0.9062rem;font-weight:600;color:var(--muted);display:block;margin-top:6px;
  font-family:var(--sans);letter-spacing:0;text-transform:none}
.price__was{color:var(--faint);font-size:.92rem}
.price__tot{font-weight:600;margin:.5em 0 1em;color:var(--muted);font-size:.93rem}
.price__save{display:inline-block;background:var(--accent-lt);color:var(--accent-dp);
  border:1px solid var(--accent-line);font-family:var(--display);font-weight:700;
  font-size:0.8438rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;
  margin-top:6px}
.price .btn--block{margin-top:auto}
.price__ship{font-size:0.9062rem;color:var(--accent-dk);font-weight:700;margin:.8em 0 0}
@media(max-width:1040px){.prices{grid-template-columns:1fr 1.08fr 1fr;gap:12px}
  .price{padding:26px 16px 22px}
  .price--best{padding:30px 18px 26px}}
@media(max-width:860px){.prices{grid-template-columns:1fr;gap:22px;
    max-width:430px;margin-inline:auto}
  .price{padding:28px 22px 24px}
  .price--best{padding:32px 24px 28px;order:1}
  .price--ordered{order:2}
  .price--basic{order:3}}

/* ---- 14. REVIEWS / STATS ------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stat{background:#fff;border:1px solid var(--line);border-bottom:4px solid var(--accent);
  padding:24px;text-align:center}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:2.1rem;
  color:var(--ink-dk);line-height:1}
.stat span{font-size:0.9062rem;color:var(--muted)}
.sec--slab .stat{background:var(--graphite-dk);border-color:rgba(255,255,255,.16);
  border-bottom-color:var(--accent)}
.sec--slab .stat b{color:#fff}
.sec--slab .stat span{color:var(--on-dark)}
@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);overflow:hidden}
.rbar .fill{height:100%;background:var(--accent)}
.rev__stars{color:var(--gold);letter-spacing:.08em}
.tlife{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:880px){.tlife{grid-template-columns:1fr}}

/* ---- 15. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:10px;max-width:880px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent); padding: 0 24px}
.faq summary{font-family:var(--display);font-weight:700;font-size:1.04rem;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(--accent-dk);font-weight:700;flex:none;font-size:1.3rem;
  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(--accent-lt);border:1px solid var(--accent-line);
  border-left:5px solid var(--accent);padding:24px 28px}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--gold-lt);border:1px solid var(--gold-line);
  border-left:5px solid var(--gold);padding:24px 28px}
.alert p:last-child{margin-bottom:0}
.flag{display:inline-block;font-family:var(--display);font-weight:700;font-size:0.8438rem;
  letter-spacing:.14em;text-transform:uppercase;background:var(--graphite);color:#fff;
  padding:5px 13px;margin-bottom:1rem}

/* A light block dropped inside a dark section inherits the dark section's text
   colour and repaints itself unreadable. Both of these are light cards that
   can legitimately appear inside .sec--slab, so each re-asserts its own ink
   with the container as an ancestor (pitfalls #57). */
.sec--slab .callout,.sec--slab .callout p,
.sec--slab .alert,.sec--slab .alert p{color:var(--ink)}
.sec--slab .callout b,.sec--slab .alert b{color:var(--ink-dk)}
.sec--slab .callout a,.sec--slab .alert a{color:var(--accent-dk)}
/* An accent-coloured link on graphite is 2.6:1. The light accent is 7.3:1 and
   is the only link colour used on a dark ground anywhere on this site. */
.sec--slab a,.promo a,.final a:not(.btn){color:var(--on-dark-3)}
.sec--slab a:hover,.promo a:hover,.final a:not(.btn):hover{color:#fff}

/* ---- 17. TABLES ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:#fff}
.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(--graphite);color:#fff;font-family:var(--display);
  font-weight:700;font-size:0.9062rem;letter-spacing:.09em;text-transform:uppercase}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable caption{caption-side:top;padding:14px 18px 0;font-size:1rem;color:var(--faint);
  text-align:left}
.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:2px solid var(--ink-dk);padding:30px}
.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)}
.form input,.form select,.form textarea{width:100%;font-family:inherit;font-size:1rem;
  padding:12px 14px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink);border-radius:0}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent-dk);
  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(--accent-lt);
  border:1px solid var(--accent-line);font-size:.92rem;display:none}
.form__msg.show{display:block}

/* ---- 19. TRUST STRIP / SEAL WALL ----------------------------------------- */
.trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 36px;
  padding-block:22px}
.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:18px;justify-content:center}
.badgewall img{height:64px;width:auto}
.promo{background:var(--graphite);color:var(--on-dark);padding:32px 34px;
  display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;
  border-left:6px solid var(--accent)}
.promo b{color:#fff}
.promo p{margin:0}
@media(max-width:760px){.promo{grid-template-columns:1fr;text-align:center}}

/* ---- 20. FINAL CTA ------------------------------------------------------- */
.final{background:var(--graphite-dk);color:var(--on-dark);padding:46px 42px;
  position:relative;overflow:hidden;border-left:8px solid var(--accent)}
.final h2{color:#fff}
.final p,.article .final p{color:var(--on-dark);max-width:56ch;margin:0 auto 1.5em}
.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.4em;max-width:54ch}
.final--media .final__img img{width:100%;max-width:320px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.final__price,.article .final .final__price{font-family:var(--display);font-weight:700;
  font-size:1.6rem;color:#fff;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}
}

/* ---- 21. RELATED / BYLINE / REFS / CRUMBS -------------------------------- */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rel a{background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);
  padding:24px 26px;text-align:left;display:block;color:var(--ink)}
.rel a:hover{text-decoration:none;border-color:var(--ink-dk);border-left-color:var(--accent)}
.rel b{display:block;font-family:var(--display);font-size:1.06rem;color:var(--ink-dk);
  margin-bottom:.35em}
.rel span{font-size:.91rem;color:var(--muted)}
@media(max-width:880px){.rel{grid-template-columns:1fr}}

.byline{display:flex;gap:18px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-top:4px solid var(--ink-dk);
  padding:22px 26px;margin-top:2.4em}
.byline img{flex:0 0 66px;border:1px solid var(--line)}
.byline b{display:block;font-family:var(--display);font-size:1.04rem;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:16px 0 0;margin:0;letter-spacing:.03em}
.crumbs a{color:var(--muted)}
.legal p{max-width:var(--measure)}

.article{max-width:var(--prose);margin-inline:auto}
.article h2{margin-top:1.7em}
.article h3{margin-top:1.35em}
.dropcap::first-letter{float:left;font-family:var(--display);font-weight:700;font-size:3.1rem;
  line-height:.88;padding:.06em .12em 0 0;color:var(--accent-dk)}
.pullquote{border-left:5px solid var(--accent);padding-left:22px;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:700;
  font-size:.85rem;color:var(--muted);letter-spacing:.02em}

/* ---- 22. FOOTER: one centred column, seals row beneath ------------------- */
footer{background:var(--graphite-dk);color:var(--on-dark);padding:0 0 28px;font-size:.92rem;
  border-top:6px solid var(--accent)}
.flabel{color:#fff;font-family:var(--display);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 .8em;font-weight:700}
footer a{color:var(--on-dark-3)}
footer a:hover{color:#fff}
.fmain{max-width:760px;margin-inline:auto;text-align:center;padding-block:44px 6px}
.fbrand{font-family:var(--display);font-weight:700;font-size:1.72rem;color:#fff;
  margin-bottom:.3em;letter-spacing:-.02em}
.fbrand span{color:var(--on-dark-3)}
.frole{font-size:.9rem;color:var(--on-dark-2);margin:0 0 1.6em}
.flinks{list-style:none;margin:0 0 1.5em;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:.5em 1.3em;font-size:.9rem}
.fgroup{margin:0 0 1.9em}
.fcta{border:1px solid rgba(255,255,255,.18);border-left:5px solid var(--accent);
  padding:26px 28px;margin:0 0 2.2em;text-align:center}
.fcta__h{font-family:var(--display);font-weight:700;font-size:1.32rem;color:#fff;
  margin:0 0 .5em}
.fcta p{color:var(--on-dark-2);font-size:1.062rem;margin:0 0 1.2em}
.fseals{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 22px;
  padding:26px 0;margin-top:26px;border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14)}
.fseals img{height:46px;width:auto}
.fnap{padding-top:24px;font-size:0.9062rem;line-height:1.76;text-align:center;
  max-width:760px;margin-inline:auto}
.fpay{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:18px 0;border-top:1px solid rgba(255,255,255,.14);margin-top:20px;font-size:0.9062rem}
.fpay img{height:24px;width:auto}
.disc{border-top:1px solid rgba(255,255,255,.14);margin-top:20px;padding-top:20px;
  font-size:0.9062rem;line-height:1.7;color:var(--on-dark-2)}
.disc p{margin-bottom:.9em}
.copy{color:var(--on-dark-2)}

/* ---- 23. 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)}
/* --line is a hairline grey and fails AA as a text node. These separators are
   punctuation rather than decoration in the accessibility tree, so they take a
   readable colour rather than the rule colour. */
.postmeta .sep{color:var(--faint)}
.postmeta time{white-space:nowrap}

.toc{background:var(--tint);border:1px solid var(--line);border-left:4px solid var(--ink-dk);
  padding:24px 28px;margin:0 0 2.2em}
.toc h2{font-family:var(--display);font-size:.74rem!important;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-dk);margin:0 0 1em}
.toc ol{margin:0;padding-left:1.25em;display:grid;gap:.45em;font-size:.94rem}
.toc a{color:var(--ink)}
.toc a:hover{color:var(--accent-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(--accent-lt);border:1px solid var(--accent-line);
  border-left:5px solid var(--accent);padding:24px 28px;margin:0 0 2em}
.keypoints>b{display:block;font-family:var(--display);font-size:0.8438rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dp);margin-bottom:1em}
.keypoints ul{margin:0;padding-left:1.2em;display:grid;gap:.5em}
.keypoints li b{color:var(--accent-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.5rem;line-height:1.2;margin:0 0 .5em}
.article .final--media .final__price{font-size:1.3rem;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.36rem}
}

.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:5px solid var(--accent);overflow:hidden;display:flex;flex-direction:column}
.posts img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 40%;
  background:var(--tint)}
.posts .pbody{padding:24px 26px;display:flex;flex-direction:column;flex:1}
.posts h3{margin:0 0 .45em;font-size:1.08rem}
.posts h3 a{color:var(--ink-dk)}
.posts h3 a:hover{color:var(--accent-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}}

/* ---- 24. MOTION: slide-in from the right, alternating -------------------
   The assigned motion for this site. Sections arrive from the right, and the
   alternate ones from slightly further, so the page reads as a stack being
   dealt rather than a single fade. Nothing in the hero animates: the H1 is
   the Largest Contentful Paint element and must paint on the first frame. */
[data-reveal]{opacity:0;transform:translateX(34px);
  transition:opacity .58s var(--ease),transform .58s var(--ease)}
[data-reveal="alt"]{transform:translateX(64px)}
[data-reveal].in{opacity:1;transform:none}
.sec__head::before{transition:width .7s var(--ease)}
[data-reveal] .sec__head::before{width:0}
[data-reveal].in .sec__head::before{width:72px}
.sec--center [data-reveal].in .sec__head::before{width:72px}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal],[data-reveal="alt"]{opacity:1;transform:none}
  [data-reveal] .sec__head::before{width:72px}
  html{scroll-behavior:auto}
}

/* ---- 25. SINGLE-COLUMN MEASURE ------------------------------------------
   --measure is px, not ch: `ch` resolves against each element's own font size,
   so one token would give .note and .lead different pixel widths and the
   column would stay ragged. These sections needed a shared edge. */
.sec > .wrap > h1,
.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 > .answer,
.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 > h1,.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 > .answer,
  .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%}
}
/* brand mark: bracket construction */
.brand{position:relative;padding-inline:14px}.brand::before,.brand::after{content:'';position:absolute;top:2px;bottom:2px;width:8px;border:2px solid #e2561f}.brand::before{left:0;border-right:0}.brand::after{right:0;border-left:0}


/* ---- 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--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*/
/* burnxts.com home page -- surface. PAINT ONLY: radius, shadow, background,
   colour, transform, transition. No box moves in this block, so it needs a
   restamp rather than a rebuild.

   Home only. Every selector is descended from .hero, a sibling of .hero
   (#pricing and .hero are both children of main#main), or gated on
   body:has(.hero) -- which resolves on index.html and nowhere else.

   Specificity, not source order: modern_surface.py and footer_type.py
   re-append their own blocks AFTER this one on every build. Their card rules
   are (0,1,0); body:has(.hero) .card is (0,2,1) and wins wherever it lands.

   Depth is this slot's single soft lift -- 0 12px 30px, no contact stop --
   tinted with this site's own ink, rgb(36,36,42), never neutral black. */

body:has(.hero){
  --hs-1:0 12px 30px rgba(36,36,42,.12);
  --hs-2:0 18px 44px rgba(36,36,42,.18);
  --hs-cta:0 12px 30px rgba(126,42,7,.28);
}

/* --- panels: slot radius 18, one soft lift ------------------------------- */
body:has(.hero) .card,
body:has(.hero) .stat,
body:has(.hero) .callout,
body:has(.hero) .qa,
body:has(.hero) .tablewrap,
body:has(.hero) .faq,
body:has(.hero) .keypoints,
body:has(.hero) .alert,
body:has(.hero) .byline,
body:has(.hero) .final,
body:has(.hero) .step,
body:has(.hero) .promo,
body:has(.hero) .price{border-radius:18px;box-shadow:var(--hs-1)}

body:has(.hero) .shots figure,
body:has(.hero) .ingthumbs img,
body:has(.hero) .split__media img,
body:has(.hero) .final__img img{border-radius:18px}
body:has(.hero) .step__n{border-radius:12px}
body:has(.hero) .rbar .track,
body:has(.hero) .rbar .fill{border-radius:999px}
body:has(.hero) .trust__item img{border-radius:10px}

/* The Quick Answer is reset to bare text inside the hero -- no background and
   no border -- but it still inherits a panel shadow from the surface pass, so
   a rectangle of shade floats behind the paragraphs with nothing casting it. */
.hero .answer{box-shadow:none}

/* --- controls: slot radius 12, two weights ------------------------------- */
/* The buying CTA carries the gradient. The secondary stays a solid outline,
   so the pair reads as two weights rather than two buttons. */
body:has(.hero) .btn{
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),
    background-color .18s ease,color .18s ease,border-color .18s ease}
body:has(.hero) .btn--cta{box-shadow:var(--hs-cta)}
body:has(.hero) .btn--cta:hover{
  background-image:linear-gradient(135deg,#ab3a0c 0%,#93310a 48%,#6c2406 100%);
  box-shadow:0 16px 38px rgba(126,42,7,.36)}
body:has(.hero) .btn:hover{transform:translateY(-2px)}
body:has(.hero) .btn--ghost:hover{box-shadow:var(--hs-2)}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--accent-dp);outline-offset:3px}
body:has(.hero) .btn--ghost:focus-visible{outline-color:var(--ink-dk)}

/* Anything else a reader can click answers the pointer the same way. */
body:has(.hero) .card,
body:has(.hero) .stat,
body:has(.hero) .shots figure,
body:has(.hero) .price{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
body:has(.hero) .card:hover,
body:has(.hero) .stat:hover,
body:has(.hero) .shots figure:hover{transform:translateY(-2px);box-shadow:var(--hs-2)}

@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn:hover,
  body:has(.hero) .card:hover,
  body:has(.hero) .stat:hover,
  body:has(.hero) .shots figure:hover,
  .hero ~ #pricing .price:hover{transform:none}
}

/* --- hero surface -------------------------------------------------------- */
.hero .floaty{box-shadow:var(--hs-1)}
.hero__tag{box-shadow:var(--hs-1)}
.hero .figures{box-shadow:var(--hs-1)}

/* --- pricing: corner flag, a raised and re-coloured recommended tier, and
   dashed rules between the feature rows -----------------------------------
   The dashes are drawn as a background image, not a border: a border would
   add a pixel to every row and walk the Add-To-Cart buttons off their shared
   baseline. Nothing here changes a box. */
/* The flag hangs off the top edge rather than sitting inside the card: at
   top:20px it crossed the pack photo on the 1-bottle and 3-bottle cards,
   whose images start at the 30px pad. `top`, `left` and the badge's own
   padding size and place an absolutely positioned decoration and reflow
   nothing, which is why they are here and not above the marker. */
.hero ~ #pricing .price__badge{
  top:-13px;left:-10px;border-radius:3px;padding:7px 24px 7px 14px;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%);
  background:
    linear-gradient(135deg,rgba(0,0,0,.34) 0 9px,rgba(0,0,0,0) 9px) left bottom/11px 11px no-repeat,
    linear-gradient(180deg,var(--accent-dk) 0%,var(--accent-dp) 100%);
  box-shadow:0 12px 30px rgba(36,36,42,.26)}
.hero ~ #pricing .price--ordered .price__badge{
  background:
    linear-gradient(135deg,rgba(0,0,0,.34) 0 9px,rgba(0,0,0,0) 9px) left bottom/11px 11px no-repeat,
    linear-gradient(180deg,var(--graphite) 0%,#0c0c10 100%)}

.hero ~ #pricing .price--best{
  background:linear-gradient(180deg,#ffffff 0%,#fff7f2 58%,var(--accent-lt) 100%);
  border-color:var(--accent-dk);border-top-color:var(--accent);
  box-shadow:var(--hs-2)}

.hero ~ #pricing .price .chips li{
  background-image:repeating-linear-gradient(90deg,var(--line) 0 5px,rgba(0,0,0,0) 5px 11px);
  background-repeat:no-repeat;background-position:left bottom;background-size:100% 1px}
.hero ~ #pricing .price .chips li:last-child{background-image:none}
.hero ~ #pricing .price--best .chips li{
  background-image:repeating-linear-gradient(90deg,var(--accent-line) 0 5px,rgba(0,0,0,0) 5px 11px)}
.hero ~ #pricing .price--best .chips li:last-child{background-image:none}

.hero ~ #pricing .price:hover{transform:translateY(-2px);box-shadow:var(--hs-2)}
.hero ~ #pricing .price--best:hover{box-shadow:0 22px 52px rgba(36,36,42,.22)}
/*!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 .btn{font-size:16px}
footer .disc{font-size:16px}
footer .flabel{font-size:15px}
footer .flinks{font-size:16px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
footer .frole{font-size:15px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 15 box-shadow declaration(s)
   and 0 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 (36,36,42), 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(36,36,42,.06), 0 6px 18px rgba(36,36,42,.07);
  --lift:0 2px 6px rgba(36,36,42,.09), 0 16px 34px rgba(36,36,42,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.tablewrap,
.faq,
.final,
.answer,
.whycard,
.article figure{box-shadow:var(--shadow)}

/* 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. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.tablewrap,
.faq,
.final,
.answer,
.whycard,
.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}