/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Archivo Black Fallback";src:local("Arial");font-weight:400;size-adjust:125.00%;ascent-override:70.24%;descent-override:16.80%;line-gap-override:0.00%}
@font-face{font-family:"Inter Tight Fallback";src:local("Arial");font-weight:400;size-adjust:96.95%;ascent-override:99.92%;descent-override:24.88%;line-gap-override:0.00%}
@font-face{font-family:"Inter Tight Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:95.83%;ascent-override:101.09%;descent-override:25.17%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* =============================================================================
   burntidefit.com -- Burntide, reviews and results
   -----------------------------------------------------------------------------
   Component system taken from the assigned UI/UX reference (kerafirmmpro.com):
   generous 80px section rhythm, pill buttons with a gradient fill, cards that
   lift and change border colour on hover, a four-up stat box row, a sticky
   translucent nav. Look only -- no copy, no content, no claims came from it.

   Colour is derived from the Burntide jar itself: the flame that runs across
   the label is the accent, the amber label ground is the secondary ramp. The
   already-built sister site burntidebalance.com leads on the amber; this one
   leads on the flame, over a near-white ground with a cool cast.

   Design slot for this domain (batch3_assignments.py row 15):
     display Archivo Black / body Inter Tight
     dark slim bar carrying a rating ticker, then logo-left / menu-right
     four-column footer on dark with a review-stats strip beneath
     near-white cool ground, 12px radius, cards with a border plus hover lift
     hero: light, star row and rating card beside the product shot
     motion: ticker scroll, staggered fade on the review cards
   ============================================================================= */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* ground: near-white with a cool cast */
  --paper:      #f7f8fa;
  --tint:       #eef1f5;
  --tint2:      #e3e8ee;
  --card:       #ffffff;

  --ink:        #1b2027;
  --ink-dk:     #0e1319;
  --muted:      #4d5663;
  --faint:      #5c6573;
  --line:       #dde2e9;
  --line-soft:  #eceff4;

  /* flame, from the fire that runs across the Burntide label */
  --flame:      #c8461a;
  --flame-dk:   #a8380f;
  --flame-dp:   #6d2409;
  --flame-lt:   #fdf0e9;
  --flame-line: #f2c8b2;

  /* amber, from the label ground and the wordmark trim */
  --amber:      #d99a12;
  --amber-dk:   #8a6008;
  --amber-lt:   #fdf6e6;
  --amber-line: #eedcae;

  /* carbon, the dark chrome: ticker bar, dark bands, footer */
  --carbon:     #171c24;
  --carbon-2:   #232a34;
  --carbon-lt:  #39424f;
  --carbon-ink: #b8c0cc;

  --star:       #f0b429;

  /* slate, the clinical ink the home page is rebuilt on. Taken from the near
     black of the Burntide jar body (#212121 off the photograph) and pulled
     cool, which is the temperature the assigned reference works at. Nothing
     here is sampled from the reference itself. Every pair below is AA or
     better against the ground it is used on -- checked, not assumed. */
  --slate:      #16303f;   /* 13.7:1 on #fff, 12.9:1 on --paper */
  --slate-2:    #234b61;   /* 9.3:1 behind white text */
  --slate-mid:  #4a5b68;   /* 7.0:1 on #fff -- body copy on the light ground */
  --slate-soft: #56656f;   /* 6.0:1 on #fff -- captions */
  --slate-ink:  #c9d5dd;   /* 9.2:1 on --slate -- body copy on the dark card */
  --slate-tint: rgba(22,48,63,.07);
  --slate-tint2:rgba(22,48,63,.13);
  --slate-line: #d7dfe5;
  --slate-wash: #f2f6f8;

  --ease:  cubic-bezier(.2,.7,.3,1);
  --shadow:    0 6px 24px rgba(23,28,36,.09);
  --shadow-sm: 0 2px 10px rgba(23,28,36,.06);
  --shadow-lg: 0 18px 46px rgba(23,28,36,.16);

  /* 12px by assignment */
  --r-s: 8px; --r: 12px; --r-l: 18px;

  --display:'Archivo Black','Archivo Black Fallback','Arial Black',Impact,system-ui,sans-serif;
  --sans:'Inter Tight','Inter Tight Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --wrap: 1180px; --measure: 760px; --measure-wide: 980px;
}

/* ---- 2. RESET / BASE ----------------------------------------------------- */
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;
  overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);overflow-x:clip;
  font-family:var(--sans);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased}
img,svg,video,iframe,table,figure{max-width:100%}
img{height:auto;display:block}
a{color:var(--flame-dk);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink-dk);line-height:1.16;
  margin:0 0 .5em;font-weight:400;letter-spacing:-.005em}
h1{font-size:clamp(2rem,4.4vw,3.1rem)}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
h3{font-size:1.14rem;line-height:1.3}
h4{font-size:1rem;font-family:var(--sans);font-weight:700}
p{margin:0 0 1.05em}
strong,b{font-weight:700;color:var(--ink-dk)}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}
::selection{background:var(--flame);color:#fff}
table{border-collapse:collapse}
section[id]{scroll-margin-top:100px}

/* The gutter comes from a width constraint, never from padding, so no
   component class sharing an element with .wrap can wipe it (pitfall 46). */
.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}
.center{text-align:center}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:9999;background:var(--flame);color:#fff;
  padding:10px 16px;border-radius:var(--r-s)}

/* ---- 3. SHARED ATOMS ----------------------------------------------------- */
.eyebrow{display:inline-block;font-size:0.8438rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--flame-dk);background:var(--flame-lt);
  border:1px solid var(--flame-line);border-radius:999px;padding:6px 15px;
  margin-bottom:14px}
.lead{font-size:1.1rem;color:var(--muted)}
.note{font-size:0.9062rem;color:var(--faint)}
.pill{display:inline-block;font-size:0.8438rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--carbon);background:var(--amber-lt);
  border:1px solid var(--amber-line);border-radius:999px;padding:7px 16px}

.btn{display:inline-block;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-weight:800;font-size:.95rem;letter-spacing:.02em;
  padding:14px 30px;text-align:center;transition:transform .2s var(--ease),
  box-shadow .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--cta{background:linear-gradient(135deg,var(--flame) 0%,var(--flame-dk) 100%);
  color:#fff;box-shadow:0 8px 22px rgba(200,70,26,.30)}
.btn--cta:hover{box-shadow:0 12px 30px rgba(200,70,26,.40);color:#fff}
.btn--ghost{background:transparent;color:var(--carbon);
  box-shadow:inset 0 0 0 2px var(--carbon)}
.btn--ghost:hover{background:var(--carbon);color:#fff}
.btn--gold{background:var(--amber);color:var(--carbon);
  box-shadow:0 8px 22px rgba(217,154,18,.28)}
.btn--gold:hover{background:var(--amber-dk);color:#fff}
.btn--dark{background:var(--carbon);color:#fff}
.btn--dark:hover{background:var(--carbon-2);color:#fff}
.btn--lg{padding:17px 38px;font-size:1.02rem}
.btn--block{display:block;width:100%}

.sec{padding:76px 0}
.sec--tint{background:var(--tint)}
.sec--flame{background:var(--flame-lt)}
.sec--tight{padding:44px 0}
.sec__head{margin-bottom:34px}
.sec__head h2{margin-bottom:.35em}
.sec--center .sec__head{text-align:center}

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

/* ---- 4. TICKER BAR + LOGO-LEFT / MENU-RIGHT NAV -------------------------- */
/* The slim bar is dark and carries a scrolling rating ticker, which is this
   site's whole angle stated before anything else loads. */
.util{background:var(--carbon);color:var(--carbon-ink);overflow:hidden;
  border-bottom:1px solid var(--carbon-2)}
.util__row{display:flex;align-items:center;gap:18px;padding-block:0;
  height:38px;font-size:0.9062rem}
.ticker{flex:1 1 auto;overflow:hidden;position:relative;height:38px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ticker__track{display:flex;align-items:center;gap:34px;height:38px;
  white-space:nowrap;width:max-content;
  animation:tick 46s linear infinite}
.ticker__track span{display:inline-flex;align-items:center;gap:8px}
.ticker__track b{color:#fff;font-weight:800}
.ticker__track .st{color:var(--star);letter-spacing:1px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.util__tel{flex:0 0 auto;color:#fff;font-weight:800;font-size:0.9062rem;
  white-space:nowrap}
.util__tel:hover{color:var(--star);text-decoration:none}

.nav{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);transition:box-shadow .2s var(--ease)}
.nav--stuck{box-shadow:0 2px 14px rgba(23,28,36,.07)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding-block:13px;flex-wrap:nowrap}
.brand{display:inline-flex;align-items:center;gap:0;flex:none;white-space:nowrap;
  font-family:var(--display);font-size:1.42rem;color:var(--ink-dk);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand span{color:var(--flame)}
.brand svg{width:31px;height:31px;margin-right:10px;flex:none}
.menu{display:flex;align-items:center;gap:23px;list-style:none;margin:0;padding:0;
  flex-wrap:nowrap}
.menu a{color:var(--carbon);font-size:.92rem;font-weight:600;white-space:nowrap;
  padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--flame-dk);
  border-bottom-color:var(--flame);text-decoration:none}
.nav__cta{display:flex;align-items:center;gap:14px;flex:none}
.nav__tel{display:flex;flex-direction:column;line-height:1.15;text-align:right;
  white-space:nowrap}
.nav__tel b{font-size:.92rem;color:var(--ink-dk)}
.nav__tel span{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.nav__tel:hover{text-decoration:none}
.burger{display:none;background:none;border:1px solid var(--line);
  border-radius:var(--r-s);width:42px;height:38px;cursor:pointer;padding:9px 10px}
.burger span{display:block;height:2px;background:var(--carbon);margin:0 0 5px;
  border-radius:2px}
.burger span:last-child{margin-bottom:0}

/* ---- 5. STICKY BUY BAR --------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:880;background:var(--carbon);
  color:#fff;transform:translateY(105%);transition:transform .3s var(--ease)}
.buybar.show{transform:translateY(0)}
.buybar__in{width:min(var(--wrap),100% - 32px);margin-inline:auto;display:flex;
  align-items:center;justify-content:space-between;gap:18px;padding-block:11px}
.buybar__t{font-size:0.9062rem;color:var(--carbon-ink)}
.buybar__t b{display:block;color:#fff;font-size:.96rem}
.buybar__t .from{color:var(--star);font-weight:800}
.buybar .btn{padding:11px 24px;font-size:.88rem;flex:none}

/* ---- 6. HERO ------------------------------------------------------------- */
/* Light ground, no entrance animation anywhere near the H1: it is the Largest
   Contentful Paint element and .anim would start it at opacity 0. The motion
   budget for this site is the ticker and the staggered review cards. */
.hero{background:
  radial-gradient(70% 90% at 82% 18%,var(--flame-lt) 0%,transparent 62%),
  linear-gradient(178deg,#fff 0%,var(--paper) 100%);
  position:relative;overflow-x:clip;border-bottom:1px solid var(--line)}
.hero__grid{display:grid;grid-template-columns:1.16fr .84fr;gap:54px;
  align-items:start;padding-block:52px 62px}
.hero h1{margin-bottom:.34em}
.hero h1 span{color:var(--flame);display:block}
.hero h1 small{display:block;margin-top:.34em;font-family:var(--sans);
  font-size:.40em;font-weight:700;letter-spacing:.01em;line-height:1.32;
  color:var(--muted)}
.hero__sub{font-size:1.02rem;color:var(--muted)}
.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}
.ticks .ck{flex:0 0 22px;height:22px;border-radius:50%;background:var(--flame);
  color:#fff;display:grid;place-items:center;font-size:.72rem;margin-top:4px;
  font-weight:700}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:6px}
.hero__rating{display:flex;align-items:center;gap:10px;margin:17px 0 0;
  font-size:.94rem;color:var(--muted)}
.hero__rating b{color:var(--ink-dk)}
.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(--flame-dk);font-weight:700}
.factpills{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;padding:0;
  list-style:none}
.factpills li{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:0.9062rem;color:var(--faint)}
.factpills li b{color:var(--ink-dk)}
.figures{display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0 0;
  border:1px solid var(--line);border-radius:var(--r);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.7rem;line-height:1;
  color:var(--flame-dk)}
.figures span{display:block;margin-top:5px;font-size:0.9062rem;color:var(--faint)}

.hero__media{position:relative}
.hero__stick{position:relative}
.hero__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:24px;box-shadow:var(--shadow);display:grid;place-items:center}
.hero__card img{width:100%;height:auto;max-width:330px}
.hero__tag{display:block;margin-top:12px;text-align:center;font-size:0.9062rem;
  font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}

/* The rating card beside the shot: this site's angle, stated in the hero. */
.ratecard{margin-top:18px;background:var(--carbon);color:#fff;
  border-radius:var(--r-l);padding:20px 22px}
.ratecard__top{display:flex;align-items:baseline;gap:10px}
.ratecard__score{font-family:var(--display);font-size:2.4rem;line-height:1;
  color:#fff}
.ratecard__of{font-size:0.9062rem;color:var(--carbon-ink)}
.ratecard .st{color:var(--star);letter-spacing:2px;font-size:1.05rem;
  display:block;margin:6px 0 2px}
.ratecard p{margin:8px 0 0;font-size:1.062rem;color:var(--carbon-ink);line-height:1.6}
.ratecard p b{color:#fff}
.floaty{position:absolute;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);padding:10px 14px;box-shadow:var(--shadow);
  font-weight:800;font-size:0.9062rem;line-height:1.2;color:var(--ink-dk);z-index:2}
.floaty small{display:block;color:var(--flame-dk);font-size:0.9062rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:800;margin-top:3px}
.floaty--tl{top:-12px;left:-14px}
.floaty--br{bottom:-14px;right:-14px}

/* ---- 7. QUICK ANSWER (AEO) ----------------------------------------------- */
.answer{background:#fff;border:1px solid var(--flame-line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:20px 24px;margin:22px 0 0}
.answer .qtag{display:block;font-family:var(--sans);font-weight:800;font-size:0.8438rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--flame-dk);
  margin-bottom:.55em}
.answer p{margin:0;font-size:1.062rem}
/* In the hero the answer is not a card: it runs as two flowing paragraphs
   under the H1. The wrapper stays -- it is the speakable selector. */
.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)}

.qa{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px}
.qa__h{font-family:var(--display);font-size:1.1rem;color:var(--ink-dk);
  margin:0 0 14px}
.qa dl{display:grid;grid-template-columns:minmax(170px,auto) 1fr;margin:0;
  column-gap:22px}
.qa dt,.qa dd{padding:11px 0;border-bottom:1px solid var(--line-soft)}
.qa dt{font-weight:700;color:var(--carbon);font-size:1.062rem}
.qa dd{margin:0;color:var(--muted);font-size:1.062rem}
.qa dl>:nth-last-child(-n+2){border-bottom:0}

/* =============================================================================
   THE HOME HERO -- one treatment, replacing the old dashed-orbit motif.

   Rebuilt on the assigned UI/UX reference: a white clinical ground, the copy
   left and the jar right standing on open air rather than inside a white card,
   ringed by thin concentric circles that pulse outward like sonar. A pill CTA
   in uppercase, a flat tick row instead of boxed chips, separated stat boxes.
   Layout and atmosphere only -- no copy, no claim, no colour came from it.
   Colour is the jar's own amber and flame over --slate, the jar's near-black
   cooled to the reference's temperature.

   Three motion rules this block obeys:
     * the <img> never animates, and neither does any ANCESTOR of it. It is the
       LCP element on the phone and it is preloaded; putting .hero__stick in
       the entrance would start the preloaded shot at opacity 0.
     * the H1 never animates its opacity. It is the LCP element on the desktop,
       so it rises on transform alone and paints on the first frame.
     * no rule ever sets opacity:0 at rest. The hidden state lives only inside
       a keyframe, so killing the animation -- reduced motion, or the external
       sheet landing mid-cycle -- leaves visible content rather than a blank
       hero.
   Everything is scoped to body.home so the other 31 pages keep the shared hero.
   ========================================================================== *//* One column means the product must not sit a screen and a half below the
     H1. The shared sheet only reorders under 760px; on the home page the same
     order -- eyebrow, H1, product, Quick Answer, CTA -- starts as soon as the
     grid stacks. display:contents promotes both columns' children to grid
     items, so every one of them needs an explicit order or it defaults to 0
     and jumps above the eyebrow. */
  .home .hero__copy,.home .hero__media{display:contents}
  /* A promoted grid item stretches, and an eyebrow stretched to the column is
     a bar, not a pill. */
  .home .hero__copy>.pill{order:1;justify-self:start}
  .home .hero__copy>h1{order:2}
  .home .hero__media>.hero__stick{order:3}
  .home .hero__copy>.answer{order:4}
  .home .hero__copy>.ticks{order:5}
  .home .hero__copy>.hero__cta{order:6}
  .home .hero__copy>.hero__rating{order:7}
  .home .hero__copy>.pay{order:8}
  .home .hero__media>.ratecard{order:9}
  .home .hero__copy>.hero__sub{order:10}
  .home .hero__copy>.factpills{order:11}
  .home .hero__copy>.figures{order:12}
}
@media(max-width:760px){
  .home .hero__grid{padding-block:30px 44px}
  .home .hero__card img{max-width:232px}
  .home .hero__stick{padding-block:28px 4px}
  .sonar span,.sonar::before,.sonar::after{width:min(86%,300px);top:42%}
  .seal{width:78px;height:78px;right:4px;top:6px}
  .seal i{inset:5px}
  .seal b{font-size:1.1rem}
  .seal em{font-size:.42rem;letter-spacing:.03em;max-width:54px}
  .home .hero__cta .btn{padding:16px 24px;font-size:.8rem}
  .home .ratecard{margin-top:20px}
  .home .hero .answer{padding-left:16px}
}
@media(prefers-reduced-motion:reduce){
  .home .hero__copy>*,.home .sonar,.home .sonar span,.home .seal,.home .seal i,
  .home .hero__tag,.home .ratecard,.home .floaty,
  .home .hero__cta .btn--cta::after,
  .hero__card,.hero__media::before,.hero__media::after{animation:none!important}
}


/* ---- hero motif -- dashed-orbit ---------------------------------------- */
.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:radial-gradient(95% 70% at 74% 18%,#eddab0,#f2e7d0 55%,#f7f8fa)}.hero__media::before{content:'';position:absolute;left:50%;top:0;width:158%;aspect-ratio:1;translate:-50% -26%;border-radius:50%;border:2px dashed rgba(217,154,18,0.65);animation:btOrbit 34s linear infinite;z-index:1}@keyframes btOrbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (max-width:1060px){
  .hero__grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:760px){
  /* Mobile hero order: eyebrow, H1, product shot, Quick Answer, CTA. display:contents promotes the copy column's children to grid items so each one can be ordered; everything promoted needs an explicit order or it defaults to 0 and jumps above the eyebrow. */ .hero__copy,.hero__media{display:contents}
  .hero__copy > .pill{order:1}
  .hero__copy > h1{order:2}
  .hero__media > .hero__stick{order:3}
  .hero__copy > .answer{order:4}
  .hero__copy > .ticks{order:5}
  .hero__copy > .hero__cta{order:6}
  .hero__copy > .hero__rating{order:7}
  .hero__copy > .pay{order:8}
  .hero__media > .ratecard{order:9}
  .hero__copy > .hero__sub{order:10}
  .hero__copy > .factpills{order:11}
  .hero__copy > .figures{order:12}
  .hero__card{padding:16px}
  .hero__card img{max-width:250px}
}
@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*/
/* ---------------------------------------------------------------------------
   burntidefit.com -- HOME PAGE GEOMETRY.  Layout only, so it belongs above the
   critical marker and is inlined into every page by tpl._critical_css().

   Gated on #hero, not .hero: 25 of the 31 pages carry a .hero band of their
   own, and their copy column holds a `.lead` that has no order of its own.
   Reordering .hero__copy site-wide would default that paragraph to order:0
   and fling it above the eyebrow on 24 pages.  #hero is index.html alone.
   --------------------------------------------------------------------------- */

/* 1. The buy buttons were at y=953 on a 1440x900 screen -- 53px below the fold,
      so the money page's first screen had nothing to click. Flex order on the
      copy column lifts them: eyebrow, headline, quick answer, BUTTONS, payment
      line, then the evidence.  Desktop only: below 761px the phone order is
      composed with display:contents and is left exactly as it was. */
@media (min-width:761px){
  #hero .hero__copy{display:flex;flex-direction:column}
  #hero .hero__copy>.pill{order:1;align-self:flex-start}
  #hero .hero__copy>h1{order:2}
  #hero .hero__copy>.answer{order:3}
  #hero .hero__copy>.hero__cta{order:4}
  #hero .hero__copy>.pay{order:5}
  #hero .hero__copy>.hero__rating{order:6}
  #hero .hero__copy>.ticks{order:7}
  #hero .hero__copy>.factpills{order:8}
  #hero .hero__copy>.figures{order:9}
}

/* 2. Pricing geometry.  The three pack shots are 209/116/103px tall, which
      staggered the three Add-To-Cart buttons by 93px.  A fixed image box plus
      margin-top:auto on the button puts all three on ONE baseline.  The lead
      tier is raised with margin-top -- the reveal pass sets transform:none on
      .price, so a transform would simply be discarded -- and is given the
      16px straight back as padding, so its button keeps the same baseline.
      The extra top padding is the room the full-width ribbon sits in. */
#hero ~ #pricing .prices{align-items:stretch}
#hero ~ #pricing .price{display:flex;flex-direction:column;padding-top:52px}
#hero ~ #pricing .price img{width:100%;height:200px;object-fit:contain}
#hero ~ #pricing .price>ul{list-style:none;padding:0;margin:16px 0 18px;
  text-align:left}
#hero ~ #pricing .price>ul li{padding:10px 0}
#hero ~ #pricing .price>ul li+li{border-top:1px dashed #cfd9e0}
#hero ~ #pricing .price .btn--block{margin-top:auto}
#hero ~ #pricing .price--best{margin-top:-16px;padding-top:68px}
/* Below 900px the three packs stack and the lead tier is re-ordered to the
   top of the stack, so there is nothing left for it to stand proud of: the
   raise would only steal 16px from the section head above it. */
@media (max-width:900px){
  #hero ~ #pricing .price--best{margin-top:0;padding-top:52px}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---- 8. CARDS / GRIDS ---------------------------------------------------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* Assigned card treatment: a real border, and a lift plus a colour change on
   hover. No shadow at rest. */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;transition:transform .22s var(--ease),
  border-color .22s var(--ease),box-shadow .22s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:var(--flame);
  box-shadow:var(--shadow-lg)}
.card .ic{width:44px;height:44px;border-radius:var(--r-s);background:var(--flame-lt);
  border:1px solid var(--flame-line);display:grid;place-items:center;
  margin-bottom:14px}
.card .ic img{width:26px;height:26px;object-fit:contain}
.card h3{margin-bottom:.45em}
.card p{margin:0 0 .8em;font-size:1.062rem;color:var(--muted)}
.card p:last-child{margin-bottom:0}
.card--edge{border-left:4px solid var(--flame)}
.card--num{position:relative;padding-top:34px;counter-increment:cardnum}
.card--num::before{content:counter(cardnum,decimal-leading-zero);
  position:absolute;top:18px;left:24px;font-family:var(--display);
  font-size:.95rem;color:var(--flame);letter-spacing:.04em}
.gridnum{counter-reset:cardnum}

/* ---- 9. SPLIT / STEPS / BAND --------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split--rev .split__media{order:-1}
.split__media img{width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--line);background:#fff}
.chips{list-style:none;padding:0;margin:0 0 1.05em;display:grid;gap:10px}
.chips li{display:flex;gap:11px;align-items:flex-start;font-size:0.9688rem;
  color:var(--muted)}
.chips .ck{flex:0 0 20px;height:20px;border-radius:50%;background:var(--flame-lt);
  color:var(--flame-dk);border:1px solid var(--flame-line);display:grid;
  place-items:center;font-size:0.8125rem;margin-top:4px;font-weight:800}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  counter-reset:stepnum}
.steps--4{grid-template-columns:repeat(4,1fr)}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;counter-increment:stepnum;transition:transform .22s var(--ease),
  border-color .22s var(--ease)}
.step:hover{transform:translateY(-4px);border-color:var(--flame)}
.step__n{width:38px;height:38px;border-radius:50%;background:var(--flame);
  color:#fff;display:grid;place-items:center;font-family:var(--display);
  font-size:.92rem;margin-bottom:14px}
.step__n::before{content:counter(stepnum)}
.step p{font-size:1.062rem;color:var(--muted)}
.step p:last-child{margin-bottom:0}
.band{position:relative;border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--line);background:#fff}
.band img{width:100%;height:auto}
.band--sm img{max-height:340px;object-fit:cover}
.band__cap{padding:16px 22px;font-size:.88rem;color:var(--muted);
  background:var(--tint);border-top:1px solid var(--line)}

/* ---- 10. SHOTS (image + heading + copy, never a bare grid) ---------------- */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.shots--2{grid-template-columns:repeat(2,1fr)}
.shots figure{margin:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:transform .22s var(--ease),
  border-color .22s var(--ease)}
.shots figure:hover{transform:translateY(-4px);border-color:var(--flame)}
.shots img{width:100%;height:auto;display:block}
.shots--tall img{max-height:420px;object-fit:cover;object-position:center}
.shots figcaption{padding:18px 20px 22px}
.shots figcaption b{display:block;font-family:var(--display);font-size:1rem;
  color:var(--ink-dk);margin-bottom:.4em}
.shots figcaption span{display:block;font-size:0.9062rem;color:var(--muted);
  line-height:1.65}

/* ---- 11. INGREDIENTS ----------------------------------------------------- */
.inglist{display:grid;gap:18px}
.ing{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;border-left:4px solid var(--amber)}
.ing__top{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:.5em}
.ing__top h3{margin:0}
.ing__dose{font-family:var(--display);font-size:.95rem;color:var(--flame-dk);
  white-space:nowrap}
.ing__lat{display:block;font-size:0.9062rem;font-style:italic;color:var(--faint);
  font-family:var(--sans);font-weight:400}
.ing p{font-size:1.062rem;color:var(--muted)}
.ing p:last-child{margin-bottom:0}
.ing__cite{font-size:.82rem;color:var(--faint)}

/* ---- 12. PRICING --------------------------------------------------------- */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  align-items:start}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:28px 24px 26px;text-align:center;position:relative;
  transition:transform .22s var(--ease),border-color .22s var(--ease),
  box-shadow .22s var(--ease)}
.price:hover{transform:translateY(-4px);border-color:var(--flame);
  box-shadow:var(--shadow-lg)}
.price--best{border-color:var(--flame);box-shadow:var(--shadow)}
.price__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--flame);color:#fff;font-size:0.9062rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;padding:6px 16px;
  border-radius:999px;white-space:nowrap}
.price--ordered .price__badge{background:var(--carbon)}
.price img{margin:8px auto 14px;max-width:210px;height:auto}
.price h3{margin-bottom:.25em;font-size:1.22rem}
.price__supply{display:block;font-size:0.8438rem;color:var(--faint);
  margin-bottom:14px}
.price__each{font-family:var(--display);font-size:1.5rem;color:var(--carbon);
  line-height:1.15}
.price--best .price__each{color:var(--flame-dk)}
.price__each small{display:block;font-family:var(--sans);font-size:0.9062rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-top:5px}
.price__tot{font-size:.88rem;color:var(--muted);margin:10px 0 4px}
.price__save{display:inline-block;background:var(--amber-lt);
  border:1px solid var(--amber-line);color:var(--amber-dk);font-size:0.8438rem;
  font-weight:800;border-radius:999px;padding:5px 13px;margin-bottom:16px}
.price .btn--block{margin-top:6px}
.price__ship{display:block;margin-top:11px;font-size:0.9062rem;color:var(--faint)}

/* ---- 13. REVIEWS / STATS ------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px 20px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:1.85rem;line-height:1;
  color:var(--flame-dk);margin-bottom:7px}
.stat span{display:block;font-size:0.9062rem;color:var(--faint);line-height:1.5}
.sec--dark .stat{background:var(--carbon-2);border-color:var(--carbon-lt)}
.sec--dark .stat b{color:var(--star)}
.sec--dark .stat span{color:var(--carbon-ink)}

.rbars{display:grid;gap:11px;max-width:520px}
.rbar{display:grid;grid-template-columns:58px 1fr 46px;align-items:center;
  gap:12px;font-size:.85rem;color:var(--muted)}
.rbar .track{height:11px;border-radius:999px;background:var(--tint2);
  overflow:hidden}
.rbar .fill{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--amber) 0%,var(--flame) 100%)}
.rev__stars{color:var(--star);letter-spacing:2px}

.sec--dark{background:var(--carbon);color:var(--carbon-ink)}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:var(--carbon-ink)}
.sec--dark .eyebrow{background:rgba(255,255,255,.08);border-color:var(--carbon-lt);
  color:var(--star)}
.sec--dark .lead{color:var(--carbon-ink)}

.promo{background:var(--carbon);color:#fff;border-radius:var(--r-l);
  padding:30px 34px;display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap}
.promo p{margin:0;color:var(--carbon-ink);font-size:1.062rem}
.promo b{color:#fff}
.promo .st{color:var(--star);letter-spacing:2px}

/* ---- 14. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.faq details[open]{border-color:var(--flame-line)}
.faq summary{cursor:pointer;list-style:none;padding:17px 52px 17px 22px;
  font-weight:700;color:var(--ink-dk);position:relative;font-size:.99rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:15px;
  font-family:var(--display);font-size:1.15rem;color:var(--flame)}
.faq details[open] summary::after{content:"\2212"}
.faq .faq__b{padding:0 22px 20px;color:var(--muted);font-size:.95rem}
.faq .faq__b p:last-child{margin-bottom:0}

/* ---- 15. CALLOUTS / ALERTS ----------------------------------------------- */
.callout{background:var(--amber-lt);border:1px solid var(--amber-line);
  border-left:4px solid var(--amber);border-radius:var(--r);padding:20px 24px;
  margin:26px 0;font-size:.95rem;color:var(--muted)}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--flame-lt);border:1px solid var(--flame-line);
  border-left:4px solid var(--flame);border-radius:var(--r);padding:20px 24px;
  margin:26px 0;font-size:.95rem;color:var(--muted)}
.alert p:last-child{margin-bottom:0}
.flag{display:inline-block;font-size:0.8438rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;background:var(--carbon);color:#fff;border-radius:999px;
  padding:4px 12px}

/* ---- 16. TABLES ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;margin:0 0 1.05em}
.dtable{width:100%;font-size:1rem}
.dtable th,.dtable td{padding:12px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
.dtable thead th{background:var(--tint);color:var(--carbon);font-weight:800;
  font-size:0.9062rem;letter-spacing:.07em;text-transform:uppercase;
  border-bottom:1px solid var(--line);white-space:nowrap}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable tbody tr:nth-child(2n){background:#fbfcfd}
.facttab{width:100%;font-size:.92rem;background:#fff}
.facttab th,.facttab td{padding:11px 16px;border-bottom:1px solid var(--line-soft);
  text-align:left}
.facttab th{font-weight:700;color:var(--carbon);width:58%}

/* ---- 17. FORMS ----------------------------------------------------------- */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px}
.form__row{margin-bottom:16px}
.form__row--2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:block;font-size:0.9062rem;font-weight:700;color:var(--carbon);
  margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;font-family:var(--sans);
  font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);padding:11px 14px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid
  var(--flame);outline-offset:1px;border-color:var(--flame)}
.form textarea{min-height:130px;resize:vertical}
.form__hint{font-size:0.9062rem;color:var(--faint);margin:6px 0 0}
.form__msg{display:none;margin-top:14px;background:var(--flame-lt);
  border:1px solid var(--flame-line);border-radius:var(--r-s);padding:13px 16px;
  font-size:.9rem;color:var(--flame-dp)}
.form__msg.show{display:block}

/* ---- 18. TRUST STRIP ----------------------------------------------------- */
.trust{background:#fff;border-block:1px solid var(--line)}
.trust__row{display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;padding-block:22px}
.trust__item{display:flex;align-items:center;gap:11px;font-size:0.9062rem;
  font-weight:700;color:var(--muted)}
.trust__item img{width:42px;height:42px;object-fit:contain;flex:none}
.badgewall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:20px;align-items:center}
.badgewall img{width:100%;max-width:110px;height:auto;margin-inline:auto}

/* ---- 19. FINAL CTA ------------------------------------------------------- */
.final{background:var(--carbon);color:#fff;border-radius:var(--r-l);
  padding:44px 46px;text-align:center}
.final h2{color:#fff}
.final p,.article .final p{color:var(--carbon-ink)}
.final b,.final strong{color:#fff}
.final--media{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;
  align-items:center;text-align:left}
.final--media h2{font-size:1.85rem}
.final--media p{margin-bottom:.9em}
.final--media .final__img img{width:100%;height:auto;max-width:300px}
.final__price,.article .final .final__price{display:block;color:#fff;
  font-weight:800;margin-bottom:1em;font-size:.95rem}

/* ---- 20. RELATED / BYLINE / REFS ----------------------------------------- */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.rel a{display:block;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:22px 22px;color:var(--ink);
  transition:transform .22s var(--ease),border-color .22s var(--ease)}
.rel a:hover{transform:translateY(-4px);border-color:var(--flame);
  text-decoration:none}
.rel b{display:block;font-family:var(--display);font-size:1.02rem;
  color:var(--ink-dk);margin-bottom:.35em}
.rel span{display:block;font-size:.88rem;color:var(--muted);line-height:1.6}
.byline{display:flex;gap:20px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;
  margin-top:28px}
.byline img{width:66px;height:66px;flex:none;object-fit:contain}
.byline b{display:block;font-family:var(--display);font-weight:400;
  font-size:1.02rem;color:var(--ink-dk);margin-bottom:.4em}
.byline p{margin:0;font-size:0.9062rem;color:var(--muted);line-height:1.7}
.refs{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px}
.refs ol{margin:0;padding-left:20px;font-size:.85rem;color:var(--muted);
  line-height:1.7}
.refs a{word-break:break-word}

/* ---- 21. ARTICLE PROSE --------------------------------------------------- */
.article h2{margin-top:1.6em;scroll-margin-top:110px}
.article h3{margin-top:1.4em}
.article p{color:var(--ink)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.2rem;
  line-height:.86;padding:4px 10px 0 0;color:var(--flame)}
.pullquote{border-left:4px solid var(--flame);padding:4px 0 4px 22px;
  margin:28px 0}
.pullquote p{font-family:var(--display);font-size:1.18rem;line-height:1.45;
  color:var(--ink-dk);margin:0 0 .4em}
.pullquote cite{font-style:normal;font-size:0.8438rem;color:var(--faint)}

/* ---- 22. FOOTER: four dense columns on dark, review stats beneath -------- */
footer{background:var(--carbon);color:var(--carbon-ink);margin-top:0}
footer h4{color:#fff;font-size:.8rem;font-family:var(--sans);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px}
footer a{color:var(--carbon-ink)}
footer a:hover{color:var(--star)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:38px;
  padding-block:54px 34px}
.fbrand{font-family:var(--display);font-size:1.5rem;color:#fff;
  margin-bottom:10px;letter-spacing:-.02em}
.fbrand span{color:var(--flame)}
.fgrid p{font-size:1.062rem;line-height:1.7;margin:0 0 .8em}
footer ul{list-style:none;margin:0;padding:0}
footer ul li{padding:4px 0;font-size:.86rem}
.fbadges{display:flex;gap:11px;flex-wrap:wrap;margin-top:14px}
.fbadges img{width:36px;height:36px;object-fit:contain}
/* The review-stats strip beneath the columns, per the design slot. */
.fstats{border-top:1px solid var(--carbon-2);border-bottom:1px solid var(--carbon-2);
  background:var(--carbon-2)}
.fstats__row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  padding-block:22px;text-align:center}
.fstats__row div b{display:block;font-family:var(--display);font-size:1.4rem;
  color:var(--star);line-height:1}
.fstats__row div span{display:block;margin-top:5px;font-size:.74rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--carbon-ink)}
.fpay{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-block:22px;border-bottom:1px solid var(--carbon-2);font-size:0.9062rem}
.fpay img{height:30px;width:auto}
.disc{padding-block:26px 34px}
.disc p{font-size:1.062rem;line-height:1.7;color:var(--carbon-ink);
  margin:0 0 .9em}
.disc b{color:#fff}
.copy{font-size:.76rem;color:var(--carbon-ink)}

/* ---- 23. BLOG ------------------------------------------------------------ */
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:0.9062rem;
  color:var(--faint);border-block:1px solid var(--line);padding-block:12px;
  margin:0 0 26px}
.postmeta b{color:var(--ink-dk)}
/* The middot separators are text nodes, so they have to clear AA like any other
   text. At --line they measured 1.23:1 against the article ground. */
.postmeta .sep{color:var(--faint)}
.toc{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 26px;margin:0 0 30px}
.toc h2{font-size:.82rem;font-family:var(--sans);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--carbon);
  margin:0 0 12px}
.toc ol{margin:0;padding-left:20px;font-size:.92rem;line-height:1.8}
.toc a{color:var(--carbon)}
.toc a:hover{color:var(--flame-dk)}
.article figure{margin:30px 0}
.article figure img{width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--line)}
.article figcaption{margin-top:10px;font-size:0.9062rem;color:var(--faint);
  line-height:1.65}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);
  margin-inline:auto}
.keypoints{background:var(--flame-lt);border:1px solid var(--flame-line);
  border-left:4px solid var(--flame);border-radius:var(--r);padding:22px 26px;
  margin:0 0 30px}
.keypoints>b{display:block;font-family:var(--display);font-weight:400;
  font-size:1rem;color:var(--ink-dk);margin-bottom:.5em}
.keypoints ul{margin:0;padding-left:20px;font-size:.94rem;color:var(--muted);
  line-height:1.75}
.keypoints li b{color:var(--flame-dp)}
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;
  padding:30px 28px;margin:34px 0}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.6rem;line-height:1.22;margin-top:0}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.posts article{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:transform .22s var(--ease),
  border-color .22s var(--ease)}
.posts article:hover{transform:translateY(-4px);border-color:var(--flame)}
.posts img{width:100%;height:auto;display:block}
.posts .pbody{padding:20px 22px 24px}
.posts h3{font-size:1.06rem;margin-bottom:.45em}
.posts h3 a{color:var(--ink-dk)}
.posts h3 a:hover{color:var(--flame-dk);text-decoration:none}
.posts p{font-size:1.062rem;color:var(--muted);margin-bottom:.7em}
.posts .pmeta{font-size:0.9062rem;color:var(--faint)}

/* ---- 24. MOTION: the ticker, and a staggered fade on the review cards ----- */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:0ms}
.stagger.in>*:nth-child(2){transition-delay:90ms}
.stagger.in>*:nth-child(3){transition-delay:180ms}
.stagger.in>*:nth-child(4){transition-delay:270ms}
.stagger.in>*:nth-child(5){transition-delay:360ms}
.stagger.in>*:nth-child(6){transition-delay:450ms}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.stagger>*{opacity:1;transform:none}
  .ticker__track{animation:none}
}

/* ---- 25. SINGLE-COLUMN MEASURE ------------------------------------------- */
/* px, not ch: ch is the width of the 0 glyph in each element's own font, so one
   token would give every font-size a different left edge (pitfall 40). */
@media(min-width:1061px){
  .sec > .wrap > h2,.sec > .wrap > h3,.sec > .wrap > h4,.sec > .wrap > p,
  .sec > .wrap > ul,.sec > .wrap > ol,.sec > .wrap > .sec__head,
  .sec > .wrap > .callout,.sec > .wrap > .alert,.sec > .wrap > .byline,
  .sec > .wrap > .refs,.sec > .wrap > .pullquote,.sec > .wrap > blockquote{
    max-width:var(--measure);margin-inline:auto}
  .sec > .wrap > .tablewrap,.sec > .wrap > .faq,.sec > .wrap > .steps,
  .sec > .wrap > .inglist,.sec > .wrap > .qa{
    max-width:var(--measure-wide);margin-inline:auto}
  .sec--center > .wrap > .sec__head{max-width:var(--measure);margin-inline:auto}

  /* The article column's own blocks. Without these four the blog ran five
     concentric edges instead of three: prose and refs at 760, tables at 980,
     and the table of contents, the key points box, the mid-article CTA and
     every figure at the full 1180 wrap. */
  .article > .toc,.article > .keypoints,.article > .final--media{
    max-width:var(--measure);margin-inline:auto}
  .article > figure{max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- 26. BREAKPOINTS ----------------------------------------------------- */
/* The nav row sheds; it never wraps. Measured at 1180/1260/1360/1500. */
@media(max-width:1440px){.menu{gap:19px}.menu a{font-size:.89rem}}
@media(max-width:1340px){.menu{gap:15px}.menu a{font-size:.86rem}}
@media(max-width:1300px){.nav__tel{display:none}}

@media(max-width:1180px){
  .nav__menu{position:static}
  .burger{display:block}
  .menu{position:absolute;left:0;right:0;top:100%;display:none;
    flex-direction:column;align-items:stretch;gap:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:8px 0}
  .menu.open{display:flex}
  .menu.open li{width:100%}
  .menu.open a{display:block;padding:12px 24px;border-bottom:0;
    width:min(var(--wrap),100% - 32px);margin-inline:auto}
  .nav__row{position:relative}
}

@media(max-width:1060px){
  .hero__grid{grid-template-columns:1fr;gap:36px}
  .split{grid-template-columns:1fr;gap:28px}
  .split--rev .split__media{order:0}
  .final--media{grid-template-columns:1fr;text-align:center;gap:26px}
  .final--media .final__img img{margin-inline:auto;max-width:240px}
  .fgrid{grid-template-columns:1fr 1fr;gap:30px}
  .rel{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:repeat(2,1fr)}
  .floaty{display:none}
}

@media(max-width:900px){
  .sec{padding:56px 0}
  .g3,.steps,.shots{grid-template-columns:repeat(2,1fr)}
  .steps--4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .prices{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  /* Desktop shows the ladder in value order with the best pack in the middle.
     Stacked, that would lead with the starter, so the order is reversed. */
  .prices .price:nth-child(1){order:3}
  .prices .price:nth-child(2){order:1}
  .prices .price:nth-child(3){order:2}
  .price--best{transform:none}
  .price--best:hover{transform:translateY(-4px)}
}

@media(max-width:760px){
  body{font-size:16px}
  .util__row{gap:12px}
  /* Five items in the bar wrap to three lines and eat 100px of an 844px
     screen. On a phone the ticker carries the rating and the phone stays. */
  .hero__grid{padding-block:32px 44px}
  .g2,.g3,.g4,.steps,.steps--4,.shots,.shots--2,.rel,.posts,.stats{
    grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr;gap:26px;padding-block:40px 26px}
  .fstats__row{grid-template-columns:repeat(2,1fr)}
  .figures{grid-template-columns:1fr}
  .figures div{border-left:0;border-top:1px solid var(--line)}
  .figures div:first-child{border-top:0}
  .qa dl{grid-template-columns:1fr;column-gap:0}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
  .final{padding:32px 24px}
  .promo{padding:24px 22px}
  .byline{flex-direction:column;gap:14px}
  .form__row--2{grid-template-columns:1fr}
  .article .final--media{grid-template-columns:1fr;padding:24px 22px}
  .article .final--media .final__img img{max-width:150px;margin-inline:auto}

  /* Mobile hero order: eyebrow, H1, product shot, Quick Answer, CTA.
     display:contents promotes the copy column's children to grid items so each
     one can be ordered; everything promoted needs an explicit order or it
     defaults to 0 and jumps above the eyebrow. */
  .hero__copy,.hero__media{display:contents}
  .hero__copy > .pill{order:1}
  .hero__copy > h1{order:2}
  .hero__media > .hero__stick{order:3}
  .hero__copy > .answer{order:4}
  .hero__copy > .ticks{order:5}
  .hero__copy > .hero__cta{order:6}
  .hero__copy > .hero__rating{order:7}
  .hero__copy > .pay{order:8}
  .hero__media > .ratecard{order:9}
  .hero__copy > .hero__sub{order:10}
  .hero__copy > .factpills{order:11}
  .hero__copy > .figures{order:12}
  .hero__card{padding:16px}
  .hero__card img{max-width:250px}
  .ratecard{padding:17px 19px}
}

@media(max-width:430px){
  .nav__cta .btn{display:none}
  .btn--lg{padding:14px 24px;font-size:.94rem}
  .trust__item img{width:34px;height:34px}
  .badgewall img{max-width:86px}
}

/* =============================================================================
   27. THE HOME PAGE BELOW THE HERO
   -----------------------------------------------------------------------------
   The reskin has to survive past the fold, so the section rhythm is rebuilt on
   the same reference the hero came from: white and pale-wash grounds alternating
   instead of one flat paper, centred section heads led by a tinted pill, cards
   that carry a coloured top edge and sit on a soft shadow rather than a hard
   border, separated stat boxes, circular tick discs, and a dark slate band for
   the mid-page CTA.

   Everything is scoped to body.home. The other 31 pages keep the shared
   component set untouched, which is also why none of this needs to be in the
   critical block.

   Ink: --slate on white is 13.7:1, --slate-mid 7.0:1, --slate-soft 6.0:1,
   --slate-ink on --slate 9.2:1. Nothing below drops under AA.
   ========================================================================== */

/* ---- grounds: white, pale wash, warm wash -------------------------------- */
.home .sec{padding:84px 0;background:#fff}
.home .sec--tint{background:var(--slate-wash)}
.home .sec--tight{padding:46px 0}

/* ---- heads: a tinted pill, then the heading, centred for the first run --- */
.home h2,.home h3{color:var(--slate)}
.home .lead{color:var(--slate-mid)}
.home .note{color:var(--slate-soft)}
.home .eyebrow{background:var(--slate-tint);border:1px solid transparent;
  color:var(--slate);letter-spacing:.15em;font-size:0.8438rem;padding:8px 18px;
  margin-bottom:16px}
.home .sec--tint .eyebrow{background:var(--slate-tint2)}
.home .sec__head{margin-bottom:40px}
.home #rating .sec__head,.home #voices .sec__head,.home #roster .sec__head,
.home #results .sec__head{text-align:center}

/* ---- buttons: the reference's uppercase pill, everywhere on this page ---- */
.home .btn{text-transform:uppercase;letter-spacing:.06em}
.home .btn--ghost{box-shadow:inset 0 0 0 2px var(--slate);color:var(--slate)}
.home .btn--ghost:hover{background:var(--slate);color:#fff}

/* ---- the trust strip: hairline rules, micro caps ------------------------- */
/* Six items on one row, as a grid rather than space-between: flex-wrap drops
   the sixth onto a line of its own and the row stops reading as a strip. */
.home .trust{background:#fff;border-block:1px solid var(--slate-line)}
.home .trust__row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
  padding-block:24px}
.home .trust__item{gap:9px;color:var(--slate-mid);font-size:0.9062rem;
  font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1.3}
.home .trust__item img{width:34px;height:34px}
@media(max-width:1060px){.home .trust__row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.home .trust__row{grid-template-columns:repeat(2,1fr)}}

/* ---- four stat boxes read as 2x2 inside half a split, never 4x1 --------- */
.home .split .stats{grid-template-columns:repeat(2,1fr)}

/* ---- cards: a coloured top edge on a soft shadow, no hard border --------- */
.home .card{border:1px solid var(--slate-line);border-top:4px solid var(--slate);
  border-radius:var(--r-l);box-shadow:var(--shadow);padding:28px 26px}
.home .card:hover{transform:translateY(-6px);border-color:var(--slate-line);
  border-top-color:var(--flame);box-shadow:var(--shadow-lg)}
.home .card h3{color:var(--slate)}
.home .card p{color:var(--slate-mid)}
.home .card--edge{border-left:1px solid var(--slate-line)}
.home .card .ic{background:var(--slate-tint);border-color:transparent;
  border-radius:50%;width:48px;height:48px}

/* ---- steps and shots take the same radius and lift ---------------------- */
.home .step,.home .shots figure,.home .band,.home .price,.home .ing,
.home .faq details,.home .qa,.home .tablewrap{border-color:var(--slate-line);
  border-radius:var(--r-l)}
.home .step{box-shadow:var(--shadow)}
.home .step:hover,.home .shots figure:hover{transform:translateY(-6px);
  border-color:var(--slate-line);box-shadow:var(--shadow-lg)}
.home .step__n{background:var(--slate);border-radius:50%}
.home .step p,.home .shots figcaption span{color:var(--slate-mid)}
.home .shots figcaption b{color:var(--slate)}
.home .ing{border-left:4px solid var(--amber)}
.home .ing__dose{color:var(--flame-dk)}
.home .band__cap{background:var(--slate-wash);border-top-color:var(--slate-line);
  color:var(--slate-mid)}
.home .split__media img{border-color:var(--slate-line);border-radius:var(--r-l)}

/* ---- tick discs, the reference's circular check ------------------------- */
.home .chips li{color:var(--slate-mid)}
.home .chips .ck{background:var(--amber);border-color:var(--amber);
  color:var(--carbon);font-weight:800}

/* ---- stats: separated boxes on a pale ground --------------------------- */
.home .stat{background:var(--slate-wash);border:1px solid var(--slate-line);
  border-radius:var(--r);padding:24px 18px}
.home .sec--tint .stat{background:#fff}
.home .stat b{color:var(--slate);font-size:1.9rem}
.home .stat span{color:var(--slate-soft)}
.home .rbar{color:var(--slate-mid)}
.home .rbar .track{background:#e1e8ed}

/* ---- quotes, callouts, tables ------------------------------------------ */
.home .pullquote{border-left:4px solid var(--amber)}
.home .pullquote p{color:var(--slate)}
.home .pullquote cite{color:var(--slate-soft)}
.home .callout{border-radius:var(--r);color:var(--slate-mid)}
.home .alert{border-radius:var(--r);color:var(--slate-mid)}
.home .dtable thead th{background:var(--slate);color:#fff;border-bottom:0}
.home .dtable td{color:var(--slate-mid)}
.home .dtable th,.home .dtable td{border-bottom-color:var(--slate-line)}

/* ---- FAQ ---------------------------------------------------------------- */
.home .faq summary{color:var(--slate)}
.home .faq summary::after{color:var(--flame)}
.home .faq .faq__b{color:var(--slate-mid)}

/* ---- the dark bands: slate, not carbon, so they sit in the same family -- */
.home .promo{background:var(--slate);border-radius:var(--r-l);padding:34px 38px}
.home .promo p{color:var(--slate-ink)}
.home .final{background:var(--slate);border-radius:var(--r-l)}
.home .final p,.home .article .final p{color:var(--slate-ink)}
/* The heading colour above is set on `.home h2` and would otherwise paint
   --slate on --slate inside these bands -- an invisible H2 at 1:1, which is
   exactly what a blanket ink change costs you if you do not chase it into
   every dark ground on the page. */
.home .final h2,.home .final h3,.home .promo h2,.home .promo h3,
.home .sec--dark h2,.home .sec--dark h3{color:#fff}
.home .sec--dark p,.home .sec--dark li,.home .sec--dark .lead{color:var(--carbon-ink)}

/* ---- pricing ------------------------------------------------------------ */
.home .price__each{color:var(--slate)}
.home .price--best .price__each{color:var(--flame-dk)}
.home .price__supply,.home .price__ship{color:var(--slate-soft)}
.home .price__tot{color:var(--slate-mid)}
.home .price:hover{border-color:var(--flame);box-shadow:var(--shadow-lg)}

@media(max-width:900px){
  .home .sec{padding:60px 0}
  .home .sec__head{margin-bottom:30px}
}


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

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

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

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

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{transition:none}}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */

/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */
/*!SITE-HOME-PAINT-START*/
/* ===========================================================================
   burntidefit.com -- HOME PAGE SURFACE + HERO MOTIF
   ---------------------------------------------------------------------------
   Paint only: radius, shadow, background, colour, transform, transition and
   animation.  Nothing here moves a box, so it sits below the critical marker
   and a restamp is enough for it on its own.

   Assigned slot: radius 16 card / 10 control, depth "tight contact + wide
   ambient", motif family "rise", ribbon "full-width bar".

   Scope: #hero, which g_home.py writes on index.html and no other page has,
   and `#hero ~ ` for the sections that follow it inside main#main.  .hero is
   deliberately NOT used: 25 pages carry one.  The header, the sticky buy bar
   and the footer are shared furniture on 31 pages and are left alone.

   Specificity, not source order: modern_surface.py and footer_type.py
   re-append their blocks after this one on every build.  An id beats their
   single class wherever the two overlap, whoever lands last.
   =========================================================================== */

:root{
  /* Two stops -- a tight contact shadow and a wide ambient one -- tinted with
     this site's own slate ink (22,48,63), never neutral black. */
  --bt-d1:0 1px 2px rgba(22,48,63,.07), 0 10px 28px rgba(22,48,63,.10);
  --bt-d2:0 2px 6px rgba(22,48,63,.10), 0 18px 44px rgba(22,48,63,.17);
}

/* ---- surfaces: the slot's 16px card corner and layered depth ------------- */
#hero .hero__card,#hero .ratecard,#hero .figures,#hero .answer,
#hero ~ * .card,#hero ~ * .step,#hero ~ * .stat,#hero ~ * .price,
#hero ~ * .callout,#hero ~ * .alert,#hero ~ * .tablewrap,
#hero ~ * .shots figure,#hero ~ * .band,
#hero ~ * .faq details{border-radius:16px}
#hero .hero__card,#hero .ratecard,
#hero ~ * .card,#hero ~ * .step,#hero ~ * .price,
#hero ~ * .shots figure{box-shadow:var(--bt-d1)}
#hero .floaty{border-radius:12px;box-shadow:var(--bt-d1)}
#hero .answer{box-shadow:var(--bt-d1)}
#hero ~ * .stat{box-shadow:0 1px 2px rgba(22,48,63,.06)}

/* ---- controls: the slot's 10px corner, on the page body only ------------- */
#hero .btn,#hero ~ * .btn{border-radius:10px}
/* The gradient is on the BUYING button and nowhere else.  The secondary is
   left solid, so the pair reads as two weights rather than two colours. */
#hero .btn--cta,#hero ~ * .btn--cta{
  background:linear-gradient(140deg,#e2591f 0%,var(--flame) 45%,var(--flame-dk) 100%);
  box-shadow:0 1px 2px rgba(109,36,9,.24), 0 10px 26px rgba(200,70,26,.28)}
#hero .btn--cta:hover,#hero ~ * .btn--cta:hover{
  background:linear-gradient(140deg,#ec6528 0%,#cf4a1c 45%,var(--flame-dk) 100%);
  box-shadow:0 2px 5px rgba(109,36,9,.28), 0 16px 34px rgba(200,70,26,.34);
  transform:translateY(-2px)}
#hero .btn--ghost,#hero ~ * .btn--ghost{background:#fff;color:var(--slate);
  box-shadow:inset 0 0 0 1px var(--slate-line), var(--bt-d1)}
#hero .btn--ghost:hover,#hero ~ * .btn--ghost:hover{background:var(--slate);
  color:#fff;box-shadow:inset 0 0 0 1px var(--slate), var(--bt-d2);
  transform:translateY(-2px)}

/* A 2px lift on anything clickable, and a focus ring that is visible on the
   pale ground.  `.reveal.in{transform:none}` is two classes and lands later
   in the file, which is why the hover lift these cards already declared never
   fired; an id outranks it, so it fires. */
#hero ~ * .card,#hero ~ * .step,#hero ~ * .price,
#hero ~ * .shots figure,#hero ~ * .rel a{
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),
  border-color .22s var(--ease)}
#hero ~ * .card:hover,#hero ~ * .step:hover,
#hero ~ * .shots figure:hover,#hero ~ * .rel a:hover{
  transform:translateY(-2px);box-shadow:var(--bt-d2)}
#hero a:focus-visible,#hero button:focus-visible,
#hero ~ * a:focus-visible,#hero ~ * button:focus-visible,
#hero ~ * summary:focus-visible{outline:3px solid var(--flame);outline-offset:3px}

/* ---- pricing: a full-width ribbon and a re-coloured lead tier ------------ */
#hero ~ #pricing .price{overflow:hidden}
#hero ~ #pricing .price__badge{top:0;left:0;right:0;transform:none;
  border-radius:0;background:var(--slate);color:#fff;font-size:.8rem;
  letter-spacing:.13em;line-height:1.35}
#hero ~ #pricing .price--best{border-color:transparent;
  background:linear-gradient(180deg,#fff8f3 0%,#fff 46%);
  box-shadow:inset 0 0 0 2px var(--flame), var(--bt-d2)}
#hero ~ #pricing .price--best .price__badge{
  background:linear-gradient(90deg,var(--flame) 0%,var(--amber) 100%)}
#hero ~ #pricing .price--best h3{color:var(--flame-dk)}
#hero ~ #pricing .price:hover{transform:translateY(-2px);
  box-shadow:var(--bt-d2);border-color:var(--flame-line)}
#hero ~ #pricing .price--best:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 2px var(--flame), var(--bt-d2)}
#hero ~ #pricing .price__verdict{color:var(--slate-mid)}

/* ---- hero motif: "rise" -------------------------------------------------- */
/* Warmth lifting off the base of the jar, drifting up and fading out.  Both
   shapes are pseudo-elements of the MEDIA COLUMN, sized well wider than the
   380px product card so they read outside it rather than disappearing behind
   an opaque panel, and they sit at z-index 0 behind the card (2) and its
   image (3).  The jar is never animated: it is the LCP element and preloaded.
   Slow on purpose -- 21s and 27s.  This is a daily supplement, not an energy
   drink.  Transform and opacity only.

   Under #hero this replaces the dashed-orbit ring an earlier motif pass left
   above the critical marker, and every property that rule declared is
   re-declared here.  The other 24 pages keep the orbit they already had: this
   pass is the home page's, and nothing else's.
   Keyframe names are new: the sheet already owns `tick` and `btOrbit`. */
/* The warm pool in the ground sits BEHIND THE JAR rather than up in the top
   corner, so the plume rises out of it into cooler paper instead of into a
   second warm patch. */
#hero{background:
  radial-gradient(46% 34% at 76% 38%,#f8e1c3 0%,rgba(248,225,195,0) 70%),
  radial-gradient(56% 38% at 14% 4%,#fdf4ec 0%,rgba(253,244,236,0) 72%),
  linear-gradient(180deg,#fffdfb 0%,#f6f7f9 100%)}
#hero .hero__media::before,#hero .hero__media::after{
  content:'';position:absolute;left:50%;z-index:0;pointer-events:none;
  border:0;border-radius:0;aspect-ratio:auto}
#hero .hero__media::before{top:59%;width:min(720px,170%);height:270px;
  translate:-50% -46%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(217,154,18,.48) 0%,
    rgba(200,70,26,.22) 44%,rgba(200,70,26,0) 74%);
  animation:btHearth 21s cubic-bezier(.4,0,.5,1) infinite}
/* The two lobes are pushed to 15%/85% of a 660px box -- 231px either side of
   the centre line -- so they clear the 380px card instead of hiding under it.
   A shape sized inside an opaque card renders nothing at all. */
#hero .hero__media::after{top:59%;width:min(660px,156%);height:440px;
  translate:-50% -92%;
  background:
    radial-gradient(28% 56% at 15% 100%,rgba(200,70,26,.36) 0%,
      rgba(200,70,26,0) 74%),
    radial-gradient(28% 60% at 85% 100%,rgba(217,154,18,.36) 0%,
      rgba(217,154,18,0) 74%),
    radial-gradient(44% 44% at 50% 98%,rgba(226,89,31,.18) 0%,
      rgba(226,89,31,0) 78%);
  animation:btUpdraft 27s cubic-bezier(.35,0,.4,1) infinite}
@keyframes btHearth{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}}
@keyframes btUpdraft{
  0%{opacity:0;transform:translateY(34px) scale(.93)}
  26%{opacity:1}
  66%{opacity:.68}
  100%{opacity:0;transform:translateY(-96px) scale(1.16)}}
@media(prefers-reduced-motion:reduce){
  #hero .hero__media::before,#hero .hero__media::after{animation:none}
  #hero .hero__media::after{opacity:.9;transform:none}}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer h4{font-size:15px}
footer ul li{font-size:16px}
footer .copy{font-size:16px}
footer .fpay{font-size:16px}
footer .fstats__row div span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 31 box-shadow declaration(s)
   and 2 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (27,32,39), 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(27,32,39,.06), 0 6px 18px rgba(27,32,39,.07);
  --lift:0 2px 6px rgba(27,32,39,.09), 0 16px 34px rgba(27,32,39,.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. */
.faq,
.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}