/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Literata Fallback";src:local("Georgia");font-weight:400;size-adjust:108.51%;ascent-override:108.47%;descent-override:28.39%;line-gap-override:0.00%}
@font-face{font-family:"Literata Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:99.53%;ascent-override:118.26%;descent-override:30.95%;line-gap-override:0.00%}
@font-face{font-family:"Source Sans 3 Fallback";src:local("Arial");font-weight:400;size-adjust:94.71%;ascent-override:108.11%;descent-override:42.23%;line-gap-override:0.00%}
@font-face{font-family:"Source Sans 3 Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:92.59%;ascent-override:110.59%;descent-override:43.20%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   BURNTIDE - burntideformula.com
   Design slot 16. Component system taken from the slimtidde.com reference:
   an announcement strip above a plain masthead, a hero of eyebrow chip ->
   headline -> flowing answer -> check list with the product shot floated
   beside it, full-bleed heading bands between sections, small bordered icon
   cards, ingredient cards with the picture on top, benefit rows carrying a
   left accent edge, a two-box pros/cons device, a three-card price ladder
   with the middle one raised, and a docked mobile CTA.
   Nothing purple survives. Colour is re-derived from the jar: the label field
   samples at rgb 224,176,64 amber, the flame graphic at rgb 228,84,36, and
   the wordmark at rgb 128,40,24. Ground is warm ivory.
   Slot rules, applied exactly: warm ivory ground, 6px radius, cards are a
   hairline border with no shadow, the hero ground is flat ivory with no
   gradient, and the only motion is an underline that grows under a nav link
   and a slow fade on images as they arrive.
   Type: Literata (editorial serif) + Source Sans 3 (humanist body).
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* warm ivory ground */
  --paper:      #fcf8f0;
  --tint:       #f7f0e2;
  --tint2:      #f2e7d3;
  --card:       #ffffff;
  --ink:        #2a1a12;
  --ink-dk:     #1c1009;
  --muted:      #64503f;
  --faint:      #6f5a49;
  --line:       #e6dac6;
  --line-soft:  #f0e7d7;

  /* the flame on the label - the lead colour */
  --ember:      #c4441c;
  --ember-dk:   #a8350f;
  --ember-dp:   #7a2413;
  --ember-lt:   #fbeadf;
  --ember-line: #f0cdb8;

  /* the wordmark maroon, for dark bands and the label rule */
  --cocoa:      #4a2317;
  --cocoa-dk:   #33170e;

  /* the label field amber - decorative only, never body text */
  --amber:      #c9890f;
  --amber-dk:   #8a5d06;
  --amber-lt:   #fdf4df;
  --amber-line: #eeddb4;

  --shadow:     0 18px 40px -30px rgba(42,26,18,.42);
  --shadow-sm:  0 8px 20px -18px rgba(42,26,18,.32);
  --ease:       cubic-bezier(.22,1,.36,1);

  /* 6px is the house radius on this site. Cards carry a hairline border and
     no shadow; the lift on this build comes from rules, not from elevation. */
  --r-s: 4px; --r: 6px; --r-l: 10px;

  --display:'Literata','Literata Fallback',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3','Source Sans 3 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:126px}
body{
  margin:0;font-family:var(--sans);font-size:17px;line-height:1.75;
  color:var(--ink);background:var(--paper);overflow-x:clip;max-width:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video,iframe,table,figure{max-width:100%}
img{height:auto;display:block}
a{color:var(--ember-dk);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink-dk);font-weight:600;
  line-height:1.2;letter-spacing:-.008em;margin:0 0 .5em}
h1{font-size:clamp(1.95rem,4.3vw,3rem)}
h2{font-size:clamp(1.55rem,3vw,2.15rem)}
h3{font-size:1.22rem;line-height:1.32}
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(--ember-lt)}
table{border-collapse:collapse}
section[id]{scroll-margin-top:126px}
:focus-visible{outline:2px solid var(--ember-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(--ember-dk);
  padding:10px 16px;border-radius:var(--r);z-index:2000}
.skip:focus{left:12px;top:12px}

/* ---- 3. SHARED ATOMS ----------------------------------------------------- */
/* Small caps carry the editorial register on this build: the eyebrow, the
   footer headings and the table headers all use the same device. */
.eyebrow{display:inline-block;font-family:var(--sans);font-weight:700;font-size:.74rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ember-dk);margin-bottom:.7rem}
.note{font-size:0.9062rem;color:var(--faint);line-height:1.66}
.lead{font-size:1.14rem;line-height:1.66;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(--ember-lt);
  color:var(--ember-dp);border:1px solid var(--ember-line);
  font-family:var(--sans);font-weight:700;font-size:0.8438rem;letter-spacing:.16em;
  text-transform:uppercase;padding:8px 15px;border-radius:var(--r-s);margin-bottom:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:700;font-size:.9rem;letter-spacing:.055em;
  text-transform:uppercase;padding:1.02em 1.8em;
  border-radius:var(--r);cursor:pointer;border:1px solid transparent;min-height:48px;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
  text-decoration:none;line-height:1;text-align:center}
.btn:hover{text-decoration:none}
.btn--cta{background:var(--ember);color:#fff;border-color:var(--ember)}
.btn--cta:hover{background:var(--ember-dp);border-color:var(--ember-dp);color:#fff}
.btn--ghost{background:transparent;color:var(--ember-dp);border-color:var(--ember-line)}
.btn--ghost:hover{background:var(--ember-lt);color:var(--ember-dp)}
.btn--gold{background:var(--amber-dk);color:#fff;border-color:var(--amber-dk)}
.btn--gold:hover{background:#6f4a05;color:#fff;border-color:#6f4a05}
.btn--dark{background:var(--cocoa);color:#fff;border-color:var(--cocoa)}
.btn--dark:hover{background:var(--cocoa-dk);color:#fff;border-color:var(--cocoa-dk)}
.btn--lg{font-size:.97rem;padding:1.08em 2.1em}
.btn--block{display:flex;width:100%}

.sec{padding:72px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--tight{padding:48px 0}
.sec--rule{border-top:1px solid var(--line)}
/* The reference puts a full-width coloured band with a centred heading between
   sections. Here it is an editorial rule device instead: a hairline above, a
   short ember stub over it, the kicker in small caps. */
.sec__head{max-width:var(--prose);margin-bottom:32px;padding-top:20px;
  border-top:1px solid var(--ink-dk);position:relative}
.sec__head::before{content:"";position:absolute;top:-2px;left:0;width:78px;height:3px;
  background:var(--ember)}
.sec--center .sec__head{margin-inline:auto;text-align:center}
.sec--center .sec__head::before{left:50%;transform:translateX(-39px)}

/* the slab: the reference's full-bleed heading bar, on the wordmark maroon */
.sec--slab{background:var(--cocoa);color:#ede0d4}
.sec--slab h2,.sec--slab h3{color:#fff}
.sec--slab .eyebrow{color:#f0c86a}
.sec--slab .sec__head{border-top-color:rgba(255,255,255,.34)}
.sec--slab .sec__head::before{background:#f0c86a}
.sec--slab p,.sec--slab li{color:#e6d5c4}
.sec--slab .lead{color:#e6d5c4}
.sec--slab a{color:#f0c86a}
/* a button inside the slab must keep its own text colour: the generic
   .sec--slab a rule would otherwise paint gold-on-gold at 3.6:1. */
.sec--slab a.btn--cta,.sec--slab a.btn--gold,.sec--slab a.btn--dark{color:#fff}

/* ---- 4. SAFETY STRIP + MASTHEAD ------------------------------------------ */
/* Two rows, as the slot specifies. The top strip is the reference's
   announcement bar, repurposed: on a site whose whole angle is who the product
   suits, the standing line above the masthead is the audience statement, not a
   discount. The masthead beneath carries the wordmark, the menu and the CTA. */
.util{background:var(--cocoa-dk);color:#e6d5c4;font-size:0.9062rem}
.util__row{display:flex;align-items:center;justify-content:center;gap:10px 26px;
  padding-block:9px;flex-wrap:wrap;text-align:center}
.util__item b{color:#fff}
.util__item--warn b{color:#f0c86a}
.util__tel{color:#f0c86a;font-weight:700;white-space:nowrap}
.util__tel:hover{color:#fff;text-decoration:none}
@media(max-width:900px){.util__row{font-size:0.9062rem;gap:4px 16px;padding-block:8px}
  .util__item:nth-child(3),.util__item:nth-child(4){display:none}}

.nav{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line)}
.nav--stuck{border-bottom-color:var(--ember-line)}
@media(max-width:920px){
  .nav{transition:transform .28s var(--ease);will-change:transform}
  .nav--away{transform:translateY(-100%)}
}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:14px;flex-wrap:nowrap}
.brand{display:inline-flex;align-items:center;gap:0;flex:none;min-width:0;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand svg{width:40px;height:40px;flex:none;margin-right:12px}
.brand__t{display:block}
.brand__firm{display:block;font-size:.6rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--faint)}
.brand__prod{display:block;font-family:var(--display);font-weight:600;font-size:1.52rem;
  line-height:1.08;color:var(--ink-dk);letter-spacing:-.02em}
.brand__prod span{color:var(--ember)}
.nav__aside{display:flex;align-items:center;gap:18px;flex:none}
.nav__tel{font-weight:700;font-size:.95rem;color:var(--ink-dk);white-space:nowrap}
.nav__tel small{display:block;font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.nav__tel:hover{color:var(--ember-dk);text-decoration:none}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);
  flex-direction:column;gap:5px;cursor:pointer;padding:11px 10px}
.burger span{width:20px;height:2px;background:var(--ink);display:block;border-radius:2px}

.menu{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0;
  flex-wrap:nowrap;flex:1 1 auto;justify-content:center}
.menu a{display:inline-block;position:relative;padding:6px 0;
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
/* the assigned motion: an underline that grows out of the centre */
.menu a::after{content:"";position:absolute;left:50%;bottom:0;height:2px;width:0;
  background:var(--ember);transition:width .28s var(--ease),left .28s var(--ease)}
.menu a:hover{color:var(--ink-dk);text-decoration:none}
.menu a:hover::after{left:0;width:100%}
.menu a[aria-current="page"]{color:var(--ember-dp)}
.menu a[aria-current="page"]::after{left:0;width:100%}
@media(max-width:1440px){.menu{gap:18px}.menu a{font-size:.75rem}}
@media(max-width:1340px){.menu{gap:14px}.menu a{font-size:.73rem;letter-spacing:.07em}}
@media(max-width:1300px){.nav__tel{display:none}}
@media(max-width:1180px){
  .menu{display:none}
  .menu.open{display:flex;position:absolute;left:0;right:0;top:100%;z-index:59;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);max-height:74vh;overflow:auto;padding:4px 22px}
  .menu.open a{padding:14px 0;border-bottom:1px solid var(--line-soft);min-height:46px}
  .menu.open a::after{display:none}
  .burger{display:flex}
  .nav__tel{display:inline-block}
}
@media(max-width:620px){.nav__tel{display:none}.nav__row{padding-block:12px}
  .brand__prod{font-size:1.34rem}}
@media(max-width:430px){.nav__cta{display:none}.brand svg{width:34px;height:34px;margin-right:9px}
  .brand__prod{font-size:1.24rem}.nav__aside{gap:10px}}

/* ---- 5. STICKY BUY BAR (the reference's docked mobile CTA) --------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--cocoa-dk);color:#fff;
  transform:translateY(105%);transition:transform .3s var(--ease);
  border-top:3px solid var(--amber)}
.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.34;color:#e6d5c4}
.buybar__t b{font-family:var(--display);font-size:1.04rem;display:block;color:#fff}
.buybar__t .from{color:#f0c86a;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 ------------------------------------------------------------- */
/* Built to the slimtidde.com reference and to nothing else on this estate.
   The house skeleton put the jar in a white card on flat ivory; this does what
   the reference does instead -- a high-key wash of the accent across the whole
   band, the product standing free on a lit ellipse with a drawn flame behind
   it, rings breathing outward, a slow seal turning around the shot, and two
   cards floating clear of the bottle: a rating card top-left and a round
   guarantee roundel bottom-right. The CTA is a full pill carrying a cart, and
   the ticks are circular. Nothing is sampled from the reference: the wash, the
   flame and the rings are the jar's own colours -- flame #c4441c, label amber
   #c9890f, wordmark maroon #4a2317 -- lifted to the reference's pale, warm,
   high-key temperature.
   Motion is layered and deliberately small: a short entrance stagger down the
   copy column, an ambient loop on the flame, the rings, the seal and the floor
   glow, and one accent sweep across the CTA. Two rules are absolute -- the H1
   moves on transform only and never on opacity, because it is the LCP text,
   and the <img> is never animated at all, because it is preloaded and is the
   LCP element on mobile. Everything stops under prefers-reduced-motion. */
.hero{
  position:relative;overflow-x:clip;overflow-y:visible;isolation:isolate;
  background:linear-gradient(135deg,#fdf8ee 0%,#fae3d2 58%,#fdf5e7 100%);
}
/* the reference's corner bloom, and its accent rule along the bottom edge */
.hero::before{content:"";position:absolute;top:-170px;right:-150px;width:580px;height:580px;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(196,68,28,.15) 0%,rgba(196,68,28,0) 70%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;z-index:3;
  background:linear-gradient(90deg,#c4441c,#c9890f,#c4441c)}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:start;
  padding-block:52px 72px;position:relative;z-index:1}
.hero h1{margin-bottom:.4em;animation:btRise .62s var(--ease) both;animation-delay:.05s}
.hero h1 span{color:var(--ember-dk);display:block}
.hero h1 small{display:block;margin-top:.32em;font-family:var(--sans);font-size:.33em;
  font-weight:600;letter-spacing:.015em;line-height:1.36;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}

/* the reference's eyebrow: a full pill carrying a star, not a square chip */
.hero .pill{border-radius:999px;background:rgba(196,68,28,.10);
  border:1px solid rgba(196,68,28,.26);color:var(--ember-dp);
  padding:8px 18px;letter-spacing:.13em;animation:btIn .55s var(--ease) both}
.hero .pill svg{width:13px;height:13px;flex:none;fill:var(--ember)}

/* the reference's tick list: circular accent checks, muted copy */
.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:var(--r-s);background:var(--ember);color:#fff;
  display:grid;place-items:center;font-size:.72rem;margin-top:4px;font-weight:700}
.hero .ticks li{color:var(--muted)}
.hero .ticks .ck{border-radius:50%}
.hero .ticks li{animation:btIn .5s var(--ease) both}
.hero .ticks li:nth-child(1){animation-delay:.34s}
.hero .ticks li:nth-child(2){animation-delay:.40s}
.hero .ticks li:nth-child(3){animation-delay:.46s}
.hero .ticks li:nth-child(4){animation-delay:.52s}
.hero .ticks li:nth-child(5){animation-delay:.58s}

.hero__cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center;
  animation:btIn .6s var(--ease) both;animation-delay:.22s}
.hero .btn{border-radius:999px}
.hero .btn--cta{box-shadow:0 10px 30px -10px rgba(196,68,28,.55)}
.hero .btn--cta:hover{box-shadow:0 14px 38px -10px rgba(196,68,28,.6)}
.hero .btn svg{width:17px;height:17px;flex:none;fill:currentColor}
/* the accent: a single light sweep across the buy button */
.btn--shine{position:relative;overflow:hidden}
.btn--shine::after{content:"";position:absolute;top:0;bottom:0;left:-46%;width:34%;
  pointer-events:none;transform:translateX(0) skewX(-18deg);
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 100%);
  animation:btShine 5.2s ease-in-out infinite}

.pay{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap;
  animation:btIn .6s var(--ease) both;animation-delay:.3s}
.pay img{height:26px;width:auto}
.pay span{font-size:0.9062rem;color:var(--ember-dk);font-weight:700}

/* ---- the product stage: flame, rings, turning seal, floor glow ----------- */
.hero__media{position:relative;text-align:center;z-index:1}
.hero__stage{position:relative;display:block;width:min(90%,420px);margin-inline:auto;
  padding-bottom:26px}
/* the heat bloom behind the flame -- the reference's soft halo, in ember */
.hero__stage::before{content:"";position:absolute;left:50%;top:44%;width:150%;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(196,68,28,.20),rgba(196,68,28,0) 70%);
  animation:btBloom 9s ease-in-out infinite}
/* the floor the jar stands on, breathing slowly */
.hero__stage::after{content:"";position:absolute;left:50%;bottom:10px;width:76%;height:40px;
  translate:-50% 0;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(122,36,19,.32),rgba(122,36,19,0) 72%);
  animation:btGlow 6.5s ease-in-out infinite}
.hero__flame{position:absolute;left:50%;top:36%;width:114%;max-width:none;height:auto;translate:-50% -50%;
  z-index:1;pointer-events:none;opacity:.44;transform-origin:50% 88%;
  animation:btFlicker 3.4s ease-in-out infinite}
.hero__ring{position:absolute;left:50%;top:54%;width:74%;aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;border:1.5px solid rgba(196,68,28,.34);z-index:2;pointer-events:none;
  opacity:0;animation:btRing 4.8s var(--ease) infinite}
.hero__ring--2{animation-delay:2.4s}
.hero__seal{position:absolute;left:50%;top:54%;width:110%;aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;overflow:hidden;z-index:2;pointer-events:none}
/* the turning ring lives on the pseudo-element: rotating the box itself would
   hand every geometry check a bounding rect 1.41x its painted circle. */
.hero__seal::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(168,53,15,.6) 0 2.2deg,rgba(168,53,15,0) 2.2deg 13deg);
  -webkit-mask:radial-gradient(closest-side,transparent 90%,#000 92%,#000 97%,transparent 99%);
  mask:radial-gradient(closest-side,transparent 90%,#000 92%,#000 97%,transparent 99%);
  animation:btSpin 46s linear infinite}
.hero__stick{position:relative;z-index:3;display:block}
/* the white card is gone: the reference stands the product on the wash */
.hero__card{background:none;border:0;padding:0;display:block;position:relative;z-index:3}
.hero__card img{margin:0 auto;filter:drop-shadow(0 26px 34px rgba(122,36,19,.32))}
.hero__tag{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  background:var(--cocoa);color:#fff;border-radius:999px;padding:7px 18px;white-space:nowrap;
  font-size:0.9062rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;z-index:4}

/* the reference's floating pair: a rating card and a round guarantee roundel */
.floaty{position:absolute;background:#fff;border:2px solid #f4dcc4;border-radius:16px;
  padding:13px 18px;text-align:center;min-width:134px;z-index:5;
  box-shadow:0 12px 34px -14px rgba(122,36,19,.34);
  animation:btSettle .7s var(--ease) both}
.floaty b{display:block;font-family:var(--display);font-weight:700;font-size:1.6rem;
  line-height:1;color:var(--ember-dp)}
.floaty small{display:block;margin-top:5px;font-size:0.9062rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);line-height:1.3}
.floaty .stars{display:block;margin-top:4px;font-size:0.9062rem;letter-spacing:.08em;
  color:var(--amber-dk)}
.floaty--rate{top:14px;left:-6px;animation-delay:.5s}
.floaty--guar{bottom:44px;right:-6px;min-width:0;width:116px;height:116px;padding:0;
  border-radius:50%;display:grid;place-content:center;animation-delay:.66s}
.floaty--guar b{font-size:2rem}

.factpills{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;padding:0;list-style:none;
  animation:btIn .6s var(--ease) both;animation-delay:.62s}
.factpills li{background:#fff;border:1px solid #f0dcc4;border-radius:999px;
  padding:7px 14px;font-size:0.9062rem;color:var(--muted)}
.factpills li b{color:var(--ink-dk)}

@keyframes btIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* transform only -- the H1 is the LCP text and its opacity is never touched */
@keyframes btRise{from{transform:translateY(14px)}to{transform:none}}
@keyframes btSettle{from{opacity:0;transform:translateY(-12px) scale(.9)}
  to{opacity:1;transform:none}}
@keyframes btFlicker{
  0%,100%{transform:scale(1,1) rotate(0deg);opacity:.42}
  25%{transform:scale(1.035,.955) rotate(-1.2deg);opacity:.52}
  50%{transform:scale(.965,1.05) rotate(.9deg);opacity:.36}
  75%{transform:scale(1.04,.99) rotate(-.5deg);opacity:.49}}
@keyframes btRing{0%{transform:scale(.6);opacity:0}
  20%{opacity:.85}100%{transform:scale(1.48);opacity:0}}
@keyframes btBloom{0%,100%{opacity:.62;transform:scale(.95)}50%{opacity:1;transform:scale(1.06)}}
@keyframes btSpin{to{transform:rotate(360deg)}}
@keyframes btGlow{0%,100%{opacity:.72;transform:scaleX(.94)}
  50%{opacity:1;transform:scaleX(1.06)}}
@keyframes btShine{0%,56%{transform:translateX(0) skewX(-18deg)}
  100%{transform:translateX(430%) skewX(-18deg)}}

@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:22px;padding-block:36px 52px}
  /* 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__media{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__copy > .hero__sub{order:9}
  .hero__copy > .factpills{order:10}
  /* display:contents promotes EVERY child of the copy column, and a promoted
     item with no order defaults to 0 -- which put the figures row above the
     eyebrow on a phone. Explicit, high, last. */
  .hero__copy > .figures{order:11}
}
@media(max-width:700px){
  .floaty{display:none}
  .hero__stage{width:min(90%,320px);padding-bottom:22px}
  .hero__flame{width:118%}
}

/* The hero copy column runs past 1,400px, so a statically placed shot ends up
   near the bottom of it. A sticky rail keeps the jar beside whatever the reader
   is on. Offset by the header, capped by height so it scales rather than
   overflowing on a short laptop screen; never gated on viewport height. */
@media(min-width:1025px){
  .hero__media{position:sticky;top:132px;align-self:start;height:calc(100vh - 156px);
    min-height:360px;display:flex;align-items:center;justify-content:center}
  .hero__stage{max-height:calc(100vh - 196px)}
  .hero__card img{max-height:calc(100vh - 360px);min-height:180px;width:auto;object-fit:contain}
}

/* ---- 7. QUICK ANSWER (AEO) ----------------------------------------------- */
.answer{background:#fff;border:1px solid var(--ember-line);border-radius:var(--r);
  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. The
   wording is untouched. */
.hero .answer{background:none;border:0;box-shadow:none;padding:0;margin:18px 0 0;
  animation:btIn .6s var(--ease) both;animation-delay:.13s}
.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);animation:btIn .6s var(--ease) both;animation-delay:.27s}
.hero__rating b{color:var(--ink-dk)}
.answer .qtag{display:block;font-family:var(--sans);font-weight:700;font-size:0.8438rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ember-dk);margin-bottom:.55em}
.answer p{margin:0;font-size:1.062rem}
/* One treatment only. The earlier spotlight-breathe motif was removed rather
   than layered under this one. */
@media(prefers-reduced-motion:reduce){
  .hero *,.hero::before,.hero::after,.hero__stage::before,.hero__stage::after,
  .hero__seal::before,.btn--shine::after{animation:none!important;transition:none!important}
}

/* ---- hero motif -- spotlight-breathe ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:radial-gradient(80% 60% at 50% 0%,#f3e4c8,#fcf8f0 70%)}.hero__media::before{content:'';position:absolute;left:50%;top:0;width:160%;aspect-ratio:1/.92;translate:-50% -24%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,137,15,0.52),transparent 72%);animation:btBreathe 9s ease-in-out infinite;z-index:1}@keyframes btBreathe{0%,100%{scale:.94;opacity:.55}50%{scale:1.06;opacity:.9}}
@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*/
/* Home page, layout. Slot: radius 24 card / 16 control, "circulate" motif.
   Everything here moves a box, so it lives above the critical marker and the
   site is rebuilt -- the block below the marker arrives async on this build.

   1. The desktop reading order. The buy button was pushed under the fold by
      the evidence list printed between the Quick Answer and the CTA. On
      desktop the copy column becomes a flex column so `order` can lift the
      buttons to just under the answer. The <=920px column is composed with
      display:contents and is NOT touched by any rule here.
   2. .figures had no rule of its own anywhere in the sheet, so it printed as
      three runs of "5Named ingredients". It is in the hero and on no other
      page.
   3. The three price cards share one height and one image box, so the three
      Add To Cart buttons land on one baseline. pack_cards.py never reached
      this site (it tags .card/.tier; these are .price), so there is no
      existing baseline engineering to disturb.
   No copy, markup, DOM order, title, schema or price is touched. */
@media(min-width:921px){
  .hero__grid > .hero__copy{display:flex;flex-direction:column;align-items:stretch}
  /* the eyebrow is an inline-flex chip: stretched it would span the 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}
  .hero__copy > .pay{order:5}
  .hero__copy > .hero__rating{order:6}
  .hero__copy > .ticks{order:7}
  .hero__copy > .factpills{order:8}
  .hero__copy > .figures{order:9}
}
.hero .figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;margin:22px 0 0;padding:0}
.hero .figures b{display:block;font-family:var(--display);font-weight:700;
  font-size:1.65rem;line-height:1.05;color:var(--ember-dp)}
.hero .figures span{display:block;margin-top:3px;font-size:.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);line-height:1.32}
body:has(.hero) .prices{align-items:stretch}
body:has(.hero) .price{padding-top:54px}
/* A DEFINITE height, not max-height. Measured: `max-height:150px;width:auto`
   dropped the presentational width the HTML attribute supplies, so an image
   that had not loaded yet had no intrinsic width and all three rendered 0px
   tall. Same shape as the house rule in pack_cards.py, which never reached
   this site because it tags .card/.tier and these cards are .price. */
body:has(.hero) .price img{width:auto;max-width:100%;height:150px;
  object-fit:contain;margin-inline:auto}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- 8. KEY FACTS TABLE -------------------------------------------------- */
.qa{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;max-width:900px;margin:0 auto}
.qa__h{background:var(--tint);padding:15px 24px;font-family:var(--display);font-weight:600;
  font-size:1.04rem;color:var(--ink-dk);border-bottom:1px solid var(--line)}
.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: hairline border, no shadow */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.card .ic{width:54px;height:54px;border-radius:var(--r-s);background:var(--tint);
  display:grid;place-items:center;margin-bottom:15px;overflow:hidden;
  border:1px solid var(--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}
.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}}
/* the reference's benefit row: a 4px accent edge on the leading side */
.whycard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;border-left:4px solid var(--ember)}
.whycard h3{margin-bottom:.4em}
.whycard p{margin:0;color:var(--muted);font-size:1.062rem}

/* the reference's small icon card, used for the seal wall and the label ticks */
.benicons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.benicons figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:20px 16px;text-align:center}
.benicons img{margin:0 auto 12px;height:64px;width:auto}
.benicons figcaption{font-size:0.9062rem;color:var(--muted);line-height:1.5}
.benicons figcaption b{display:block;color:var(--ink-dk);font-size:.95rem;margin-bottom:.3em}
@media(max-width:940px){.benicons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.benicons{grid-template-columns:1fr}}

/* the reference's pros/cons pair, used for does / does not */
.pcgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media(max-width:820px){.pcgrid{grid-template-columns:1fr}}
.pcbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;
  border-top:4px solid var(--ember)}
.pcbox--no{border-top-color:var(--cocoa)}
.pcbox h3{margin-bottom:.6em}
.pcbox ul{list-style:none;margin:0;padding:0}
.pcbox li{padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:1.062rem;
  color:var(--muted);line-height:1.6}
.pcbox li:last-child{border-bottom:0}
.pcbox li b{color:var(--ink-dk)}

/* ---- 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-radius:var(--r);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(--ember);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-radius:var(--r);padding:26px}
.step__n{counter-increment:s;width:40px;height:40px;border-radius:var(--r-s);
  background:var(--ember-lt);color:var(--ember-dp);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;margin-bottom:14px;border:1px solid var(--ember-line)}
.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;border-radius:var(--r);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(--tint)}

/* ---- 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);border-radius:var(--r);
  overflow:hidden}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tint)}
.shots figcaption{padding:20px 22px}
.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:.92rem;color:var(--muted)}
.shots--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Two variants, both of them defects that would otherwise ship silently. The
   default 4:3 object-fit:cover is right for a photograph and wrong for
   anything whose edges carry meaning: it crops a portrait book cover to a
   band through its middle, removing the title, and crops a wide publisher
   mark to its centre, removing half the logo. */
.shots--tall img{aspect-ratio:3/4;object-fit:contain;background:var(--tint);padding:12px}
/* scale-down, not contain: a 300px logo in a 554px box would otherwise be
   upscaled to 554 and painted soft. scale-down caps it at its natural size. */
.shots--logo img{aspect-ratio:16/7;object-fit:scale-down;background:var(--tint);padding:18px}
@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-radius:var(--r);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-weight:700;font-size:0.8438rem;background:var(--ember-lt);
  color:var(--ember-dp);border:1px solid var(--ember-line);border-radius:var(--r-s);padding:5px 12px}
.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)}
/* the reference's ingredient card: picture on top, body beneath */
.ingthumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:30px}
.ingthumbs figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.ingthumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tint)}
.ingthumbs figcaption{padding:16px 18px;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:center;
  padding-top:18px}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:30px 24px 26px;text-align:center;position:relative;display:flex;flex-direction:column}
.price--best{border:2px solid var(--ember);padding:38px 28px 32px;background:#fff;
  transform:translateY(-10px);z-index:1}
.price--ordered{border-color:var(--ember-line)}
.price__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--ember);color:#fff;font-weight:700;font-size:0.9062rem;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 14px;border-radius:var(--r-s);white-space:nowrap}
.price--ordered .price__badge{background:var(--cocoa)}
.price img{margin:0 auto 14px;height:auto}
.price h3{margin-bottom:.2em}
.price--best h3{font-size:1.5rem}
.price__supply{font-size:.87rem;color:var(--faint);margin-bottom:.9em}
.price__each{font-family:var(--display);font-weight:700;font-size:2.35rem;color:var(--ember-dp);
  line-height:1.05}
.price--best .price__each{font-size:2.85rem}
.price__each small{font-size:0.9062rem;font-weight:600;color:var(--muted);display:block;margin-top:5px;
  font-family:var(--sans)}
.price__was{color:var(--faint);text-decoration:line-through;font-size:.92rem}
.price__tot{font-weight:700;margin:.5em 0 1em}
.price__save{display:inline-block;background:var(--ember-lt);color:var(--ember-dp);
  border:1px solid var(--ember-line);border-radius:var(--r-s);font-weight:700;font-size:0.8438rem;
  letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;margin-left:6px;vertical-align:2px}
.price .btn--block{margin-top:auto}
.price__ship{font-size:0.9062rem;color:var(--ember-dk);font-weight:700;margin:.8em 0 0}
@media(max-width:1040px){.prices{gap:14px}.price{padding:26px 16px 22px}
  .price--best{padding:32px 18px 26px}.price--best .price__each{font-size:2.5rem}}
@media(max-width:860px){.prices{grid-template-columns:1fr;gap:24px;align-items:stretch;
    max-width:430px;margin-inline:auto}
  .price{padding:28px 22px 24px}
  .price--best{transform:none;padding:34px 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:20px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;
  text-align:center}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:2.1rem;
  color:var(--ember-dk);line-height:1.08}
.stat span{font-size:0.9062rem;color:var(--muted)}
.sec--slab .stat{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}
.sec--slab .stat b{color:#f0c86a}
.sec--slab .stat span{color:#e6d5c4}
@media(max-width:880px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rbars{display:grid;gap:9px;max-width:460px}
.rbar{display:grid;grid-template-columns:44px 1fr 46px;align-items:center;gap:11px;font-size:.9rem}
.rbar .track{height:9px;background:var(--tint2);border-radius:var(--r-s);overflow:hidden}
.rbar .fill{height:100%;background:var(--ember);border-radius:var(--r-s)}
.rev__stars{color:var(--amber);letter-spacing:.08em}
.tlife{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@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-radius:var(--r); padding: 0 24px}
.faq summary{font-family:var(--display);font-weight:600;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(--ember);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(--ember-lt);border:1px solid var(--ember-line);
  border-left:4px solid var(--ember);border-radius:0 var(--r) var(--r) 0;padding:22px 26px}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--amber-lt);border:1px solid var(--amber-line);
  border-left:4px solid var(--amber-dk);border-radius:0 var(--r) var(--r) 0;padding:22px 26px}
.alert p:last-child{margin-bottom:0}
.flag{display:inline-block;font-weight:700;font-size:0.8438rem;letter-spacing:.13em;
  text-transform:uppercase;background:var(--ember-lt);color:var(--ember-dp);
  border:1px solid var(--ember-line);border-radius:var(--r-s);padding:5px 12px;margin-bottom:1rem}

/* ---- 17. TABLES ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);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(--cocoa);color:#fff;font-weight:700;font-size:0.9062rem;
  letter-spacing:.11em;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:.95rem}
.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:1px solid var(--line);border-radius:var(--r);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);border-radius:var(--r);background:var(--paper);
  color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--ember);
  outline-offset:1px;background:#fff}
.form textarea{min-height:130px;resize:vertical}
.form__hint{font-size:0.9062rem;color:var(--faint);margin-top:6px}
.form__msg{margin-top:14px;padding:12px 16px;border-radius:var(--r);background:var(--ember-lt);
  border:1px solid var(--ember-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:20px;justify-content:center}
.badgewall img{height:64px;width:auto}
.promo{background:var(--cocoa);color:#e6d5c4;border-radius:var(--r);padding:32px 34px;
  display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
.promo b{color:#fff}
.promo p{margin:0}
.promo a{color:#f0c86a}
@media(max-width:760px){.promo{grid-template-columns:1fr;text-align:center}}

/* ---- 20. FINAL CTA ------------------------------------------------------- */
.final{background:var(--cocoa-dk);color:#e6d5c4;border-radius:var(--r);padding:44px 42px;
  position:relative;overflow:hidden;border-top:4px solid var(--ember)}
.final h2{color:#fff}
.final p,.article .final p{color:#e6d5c4;max-width:56ch;margin:0 auto 1.5em}
.final b,.final strong{color:#fff}
.final a:not(.btn){color:#f0c86a}
.final--media{display:grid;grid-template-columns:.82fr 1.18fr;gap:38px;align-items:center;
  text-align:left}
.final--media h2{text-align:left}
.final--media p,.article .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}
.final__price,.article .final .final__price{font-family:var(--display);font-weight:700;
  font-size:1.85rem;color:#f0c86a;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 24px}
}

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

.byline{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:22px 26px;margin-top:2.4em}
.byline img{flex:0 0 68px;border-radius:var(--r-s);border:1px solid var(--line)}
.byline b{display:block;font-family:var(--display);font-size:1.05rem;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:.9;padding:.06em .1em 0 0;color:var(--ember-dk)}
.pullquote{border-left:4px solid var(--ember);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: editorial two columns, rule separated ------------------- */
/* Light ground rather than a dark link wall: the slot calls for an editorial
   footer, so the rules do the separating and the headings run in small caps. */
footer{background:var(--tint);color:var(--muted);padding:0 0 30px;font-size:.93rem;
  border-top:3px solid var(--cocoa)}
footer h4{color:var(--ink-dk);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  font-family:var(--sans);font-weight:700;margin-bottom:1em;padding-bottom:.6em;
  border-bottom:1px solid var(--line)}
footer a{color:var(--ember-dk)}
footer a:hover{color:var(--ember-dp)}
.fseal{display:flex;align-items:center;gap:22px;padding:32px 0 26px;
  text-align:left;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.fseal img{flex:none}
.fseal__t{max-width:640px}
.fseal__t b{display:block;font-family:var(--display);font-size:1.42rem;color:var(--ink-dk);
  margin-bottom:.25em}
.fseal__t p{margin:0;font-size:1.062rem;color:var(--muted)}
/* two wide editorial columns, divided by a rule */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 30px}
.fgrid > div{padding:30px 0}
.fgrid > div:first-child{padding-right:46px;border-right:1px solid var(--line)}
.fgrid > div:last-child{padding-left:46px}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:30px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr}
  .fgrid > div:first-child{padding-right:0;border-right:0;border-bottom:1px solid var(--line)}
  .fgrid > div:last-child{padding-left:0}}
@media(max-width:520px){.fcols{grid-template-columns:1fr}}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.fbrand{font-family:var(--display);font-weight:700;font-size:1.42rem;color:var(--ink-dk);
  margin-bottom:.4em}
.fbrand span{color:var(--ember)}
.fbadges{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.fbadges img{height:38px;width:auto}
.fnap{border-top:1px solid var(--line);padding-top:24px;font-size:0.9062rem;line-height:1.8}
.fpay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 0;
  border-top:1px solid var(--line);margin-top:22px;font-size:0.9062rem}
.fpay img{height:24px;width:auto}
.disc{border-top:1px solid var(--line);margin-top:22px;padding-top:22px;
  font-size:0.9062rem;line-height:1.74;color:var(--faint)}
.disc p{margin-bottom:.9em}
.disc b{color:var(--ink-dk)}
.copy{color:var(--faint)}

/* ---- 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)}
.postmeta .sep{color:var(--line)}
.postmeta time{white-space:nowrap}

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

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

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

/* the closing CTA reused mid-article: same component, narrower column */
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;padding:28px 26px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.5rem;line-height:1.24;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 22px}
  .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-radius:var(--r);
  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(--ember-dk)}
.posts p{margin:0 0 1em;color:var(--muted);font-size:1.062rem}
.posts .pmeta{margin-top:auto;font-size:0.9062rem;color:var(--faint)}
@media(max-width:940px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}

/* ---- 24. MOTION: nav underline and a slow image fade ---------------------
   The nav underline lives with the menu rules in section 4. The other half of
   the assigned motion is here: images arrive by fading in over most of a
   second rather than appearing. Nothing moves, nothing translates, and the
   hero image is deliberately excluded because it is the LCP element. */
[data-fade]{opacity:0;transition:opacity .85s var(--ease)}
[data-fade].in{opacity:1}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-fade]{opacity:1}
  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%}
}

/* ==========================================================================
   HOME PAGE -- the slimtidde.com reference carried past the fold
   Everything here is scoped to body.home, so the thirty-two sister pages keep
   the editorial 6px skeleton while the home page reads as its own site: soft
   geometry, pill buttons, a coloured flash strip, a four-up figure band under
   the hero and centred section headers with an accent stub over them.
   ========================================================================== */
.home{--r:16px;--r-s:11px;--r-l:22px}
.home .btn{border-radius:999px}
.home .pill{border-radius:999px}

/* the reference's flash strip: the standing safety line, on the ember ground */
.home .util{background:var(--ember-dp)}

/* the reference's trust strip: pale accent ground, chips rather than a bare row */
.home .trust{background:linear-gradient(180deg,#fdf6ea,#fbf1e2);
  border-top:0;border-bottom:1px solid #f0dcc4}
.home .trust__row{gap:14px 18px;padding-block:20px}
.home .trust__item{background:#fff;border:1px solid #f0dcc4;border-radius:999px;
  padding:7px 16px 7px 8px;font-size:0.9062rem;color:var(--muted);
  box-shadow:0 8px 22px -20px rgba(74,35,23,.6)}
.home .trust__item img{height:30px}

/* the reference's stats band, directly under the hero */
.statband{padding-block:46px}
.statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.statcard{background:linear-gradient(180deg,#fdf7ec,#fbefdf);border:2px solid #f2dcc3;
  border-radius:22px;padding:30px 20px;text-align:center}
.statcard b{display:block;font-family:var(--display);font-weight:700;font-size:2.3rem;
  line-height:1;color:var(--ember-dp)}
.statcard span{display:block;margin-top:10px;font-size:.84rem;color:var(--muted);line-height:1.5}
@media(max-width:860px){.statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.statgrid{gap:12px}.statcard{padding:22px 14px;border-radius:18px}
  .statcard b{font-size:1.85rem}.statcard span{font-size:.78rem}}

/* the reference's centred section header with a short accent stub above it */
.home .sec__head{max-width:var(--measure);margin-inline:auto;margin-bottom:38px;
  text-align:center;border-top:0;padding-top:0}
.home .sec__head::before{position:static;display:block;width:56px;height:4px;
  margin:0 auto 18px;border-radius:999px;transform:none;
  background:linear-gradient(90deg,#c4441c,#c9890f)}
.home .sec__head h2{font-size:clamp(1.65rem,3.2vw,2.35rem)}
.home .sec__head h2 span{color:var(--ember-dk)}
.home .sec__head .lead{margin-inline:auto}
.home .sec--slab .sec__head::before{background:linear-gradient(90deg,#f0c86a,#e79f3a)}
.home .sec--slab .sec__head{border-top:0}

/* the reference alternates a white ground with a pale wash of the accent */
.home .sec--tint{background:linear-gradient(180deg,#fdf7ed,#faeedd)}
.home .sec{padding:76px 0}
.home .sec--tight{padding:48px 0}

/* the reference's card: a rounded box with a soft accent border and a low lift */
.home .card,.home .pcbox,.home .step,.home .ing,.home .band,.home .qa,
.home .whycard,.home .benicons figure,.home .shots figure,.home .price,
.home .faq details,.home .revcard{border-color:#f0dcc4;
  box-shadow:0 16px 36px -30px rgba(74,35,23,.75)}
.home .alert{border-width:2px}
.home .split__media img{border-color:#f0dcc4;
  box-shadow:0 20px 44px -34px rgba(74,35,23,.85)}
.home .promo{border-radius:var(--r-l)}


/* ---- 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:17px 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}

/* ==== 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*/
/* =======================================================================
   HOME PAGE SURFACE -- design slot for burntideformula.com
     radius_card 24 / radius_control 16
     depth: one soft lift, no contact stop (0 12px 30px), tinted with this
            site's own ink rgb(42,26,18) -- never neutral black
     motif: "circulate" -- two counter-rotating arcs, the inner one tighter
     ribbon: a full-width bar across the top of a pack card

   Scope: every rule carries `body:has(.hero)`. class="hero" is on index.html
   and on no other page of this site (checked), so nothing here reaches the
   other 31 pages. The prefix also buys specificity: modern_surface.py and
   footer_type.py re-append their blocks AFTER this one on every build, so
   these rules beat them on specificity rather than on source order.

   Paint only: border-radius, box-shadow, background, colour, transform,
   transition and animation. Nothing here moves a box.
   ======================================================================= */

/* The slot's depth language and radii, set as tokens so every panel
   modern_surface.py already reaches picks them up without restating its
   selector list. The token names are this site's own (--r, --r-l, --r-s,
   --shadow, --shadow-sm, --lift); this site has no --accent and none is
   invented here. :root keeps its own values for the other 31 pages. */
body:has(.hero){
  --r:24px;
  --r-l:28px;
  --r-s:8px;
  --shadow:0 12px 30px rgba(42,26,18,.13);
  --shadow-sm:0 8px 20px rgba(42,26,18,.10);
  --lift:0 18px 40px rgba(42,26,18,.18);
  --bt-ctl:16px;
  --bt-cta:0 12px 30px rgba(196,68,28,.30);
  --bt-cta-h:0 18px 40px rgba(196,68,28,.38);
}

/* ---- panels that carry no radius token of their own -------------------- */
body:has(.hero) .stat,
body:has(.hero) .statcard,
body:has(.hero) .pcbox,
body:has(.hero) .whycard,
body:has(.hero) .step,
body:has(.hero) .price{box-shadow:var(--shadow)}
/* .statcard hard-codes 22px of its own; bring it onto the slot's 24. */
body:has(.hero) .statcard{border-radius:var(--r)}
/* the left accent edge stays square against its 4px rule */
body:has(.hero) .callout,
body:has(.hero) .alert{border-radius:0 var(--r) var(--r) 0}

/* ---- controls: 16px, one gradient, one solid --------------------------- */
body:has(.hero) .btn{
  border-radius:var(--bt-ctl);
  transition:background-color .22s var(--ease),background-image .22s var(--ease),
    border-color .22s var(--ease),color .22s var(--ease),
    box-shadow .26s var(--ease),transform .26s var(--ease)}
body:has(.hero) .hero .btn{border-radius:var(--bt-ctl)}
/* the gradient goes on the BUYING button and nowhere else */
body:has(.hero) .btn--cta{
  background-image:linear-gradient(135deg,var(--ember) 0%,var(--ember-dk) 54%,var(--ember-dp) 100%);
  border-color:var(--ember-dk);box-shadow:var(--bt-cta)}
body:has(.hero) .btn--cta:hover,
body:has(.hero) .btn--cta:focus-visible{
  background-image:linear-gradient(135deg,var(--ember-dk) 0%,var(--ember-dp) 62%,#631a0c 100%);
  border-color:var(--ember-dp);box-shadow:var(--bt-cta-h);transform:translateY(-2px)}
/* the secondary stays flat so the pair reads as two weights */
body:has(.hero) .btn--ghost{background-image:none;box-shadow:none}
body:has(.hero) .btn--ghost:hover{
  background-color:var(--ember-lt);border-color:var(--ember);
  transform:translateY(-2px);box-shadow:var(--shadow)}
/* .btn--dark is in the sheet but on no element of this page, so it is not
   listed here -- a rule that matches nothing is not a rule. */
body:has(.hero) .btn--gold:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--ember-dp);outline-offset:3px}
body:has(.hero) .menu a:focus-visible,
body:has(.hero) .faq summary:focus-visible{outline:3px solid var(--ember-dp);outline-offset:3px}
body:has(.hero) .faq summary{transition:color .2s var(--ease)}

/* ---- the pack row: full-width ribbon, raised and re-coloured middle ---- */
body:has(.hero) .price{overflow:hidden;transition:box-shadow .26s var(--ease)}
body:has(.hero) .price:hover{box-shadow:var(--lift)}
body:has(.hero) .price--best{
  background-image:linear-gradient(180deg,#fff5e9 0%,#ffffff 54%);
  border-color:var(--ember);
  box-shadow:0 18px 44px rgba(122,36,19,.22)}
/* .price--best keeps the translateY(-10px) it already had: this site has no
   reveal pass on the home page (0 [data-reveal], 0 .reveal in index.html), so
   nothing resets the transform. Not converted to margin-top for that reason --
   converting it would move a box for no gain. */
body:has(.hero) .price__badge{
  position:absolute;top:0;left:0;right:0;transform:none;border-radius:0;
  padding:9px 14px;font-size:.76rem;line-height:1.25;letter-spacing:.17em;
  background-image:linear-gradient(90deg,var(--ember-dp) 0%,var(--ember) 58%,var(--amber) 100%);
  color:#fff}
body:has(.hero) .price--ordered .price__badge{
  background-image:linear-gradient(90deg,var(--cocoa-dk) 0%,var(--cocoa) 58%,#8a5636 100%)}
/* the un-badged pack gets a hairline bar in the ribbon's place so the three
   heads still read as one row. Decoration, no text. */
body:has(.hero) .price--basic::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background-image:linear-gradient(90deg,var(--ember-line),var(--amber-line))}
/* dashed separators between the feature rows, drawn as a background image so
   that no box grows by the 1px a border would add */
body:has(.hero) .price__supply,
body:has(.hero) .price__tot{
  background-image:repeating-linear-gradient(90deg,var(--ember-line) 0 5px,transparent 5px 11px);
  background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%}

/* ---- hero furniture ---------------------------------------------------- */
body:has(.hero) .floaty{
  border-radius:var(--r);border-color:#f2d9bd;
  box-shadow:0 12px 30px rgba(42,26,18,.16)}
/* .floaty--tl and .floaty--br carried no offsets anywhere in the sheet (the
   stylesheet positions .floaty--rate / .floaty--guar, which this markup does
   not use), so both absolutely-positioned cards resolved to the flex
   container's static position and stacked on the jar. Offsets only -- they
   are out of flow, so nothing else moves. */
body:has(.hero) .floaty--tl{top:4px;left:-6px;animation-delay:.5s}
body:has(.hero) .floaty--br{bottom:30px;right:-6px;animation-delay:.66s}
body:has(.hero) .factpills li{border-radius:999px;box-shadow:var(--shadow-sm)}
body:has(.hero) .hero__tag{box-shadow:0 10px 24px rgba(42,26,18,.24)}

/* ---- the motif: circulate ---------------------------------------------- */
/* Two counter-rotating arcs on the media column's own pseudo-elements. The
   <img> is never touched -- it is the preloaded LCP element. Both circles are
   sized off .hero__media, which is wider than the product card, so each arc
   reads OUTSIDE the jar rather than being hidden behind it. Slow on purpose:
   54s and 38s a turn. The outer one also carries the warm bloom the critical
   block paints, so the first frame and this one agree.
   z-index:-1 keeps both behind the jar on desktop and behind the hero copy on
   a phone, where .hero__media is a grid item in the reading order. */
body:has(.hero) .hero__media::before,
body:has(.hero) .hero__media::after{
  content:"";position:absolute;left:50%;top:50%;
  aspect-ratio:1;border-radius:50%;pointer-events:none;
  translate:-50% -50%;z-index:-1}
body:has(.hero) .hero__media::before{
  width:140%;
  border:2px solid transparent;
  border-top-color:rgba(196,68,28,.30);
  border-right-color:rgba(196,68,28,.12);
  background-image:radial-gradient(closest-side,rgba(201,137,15,.34),rgba(201,137,15,0) 74%);
  animation:btCircTurn 54s linear infinite,btCircBreath 13s ease-in-out infinite}
body:has(.hero) .hero__media::after{
  width:118%;
  border:2px solid transparent;
  border-bottom-color:rgba(122,36,19,.26);
  border-left-color:rgba(201,137,15,.24);
  background-image:none;
  animation:btCircTurn 38s linear infinite reverse}
/* Measured, not assumed. On desktop the jar fills the whole media column
   (511px of 511px at 1440), so a 94%/126% pair put the inner ring BEHIND the
   product where it rendered as nothing. Below 921px the column is full-bleed
   and the jar is only 420px wide, so a percentage that clears it on desktop
   becomes a 1,000px circle across the headline; the cap is what keeps both
   rings just outside the product at every width. */
@media(max-width:920px){
  body:has(.hero) .hero__media::before{width:min(132%,540px)}
  body:has(.hero) .hero__media::after{width:min(112%,470px)}
}
@keyframes btCircTurn{from{rotate:0deg}to{rotate:360deg}}
@keyframes btCircBreath{0%,100%{scale:.97;opacity:.8}50%{scale:1.03;opacity:1}}

@media(prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{
    animation:none!important;rotate:0deg!important;scale:1!important}
  body:has(.hero) .btn{transition:none!important}
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn--cta:focus-visible,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .btn--gold:hover{transform:none!important}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer{font-size:16px}
footer h4{font-size:15px}
footer .disc{font-size:16px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
footer .note{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 19 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 (42,26,18), 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(42,26,18,.06), 0 6px 18px rgba(42,26,18,.07);
  --lift:0 2px 6px rgba(42,26,18,.09), 0 16px 34px rgba(42,26,18,.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. */
.keypoints,
.callout,
.alert,
.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}