/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Bricolage Grotesque Fallback";src:local("Arial");font-weight:400;size-adjust:107.03%;ascent-override:86.89%;descent-override:25.23%;line-gap-override:0.00%}
@font-face{font-family:"Bricolage Grotesque Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:102.73%;ascent-override:90.53%;descent-override:26.28%;line-gap-override:0.00%}
@font-face{font-family:"Karla Fallback";src:local("Arial");font-weight:400;size-adjust:103.91%;ascent-override:88.25%;descent-override:24.25%;line-gap-override:0.00%}
@font-face{font-family:"Karla Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:100.22%;ascent-override:91.50%;descent-override:25.14%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   BURNTIDE — burntidecare.com

   Component system taken from the assigned UI/UX reference, erecpower.online:
   a thin full-width topline strip, a two-column hero with the copy left and
   the product right, centred section heads with one accented word, a card grid
   with an icon disc, "actives" blocks whose top panel carries a large disc
   holding the amount, numbered step blocks, and a full-bleed dark CTA band.
   Its breakpoints are kept as the rhythm and widened where this layout needs
   it. Nothing else travels: no copy, no claim, no palette.

   Colour is re-derived from the Burntide jar photographed in /assets: an amber
   label ground, ember flames, and a deep brick-red wordmark. The brick red
   leads here rather than the amber, which is what separates this site from the
   other Burntide domains at a glance.

   Assigned chrome for this build, used nowhere else in the family:
     type      Bricolage Grotesque (display) + Karla (body)
     header    logo left, menu right, a thin lot chip under the bar
     footer    two columns: method statement left, dense link wall right
     ground    cool oat                         radius 3px
     cards     flat, 2px bottom accent rule     hero oat, panel on a tinted block
     motion    none in the hero; fade-up on section entry

   The site's own argument drives one component that exists nowhere else: the
   .actives blocks print an AMOUNT DISC for every named ingredient. Three carry
   a number the panel prints; the two the product is named for read "not
   published", because apple cider vinegar and the BHB salts share one 525 mg
   blend figure. The design states the site's point before a word of copy is
   read.
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* cool oat ground */
  --paper:      #f5f3ed;
  --tint:       #edeae1;
  --tint2:      #e3ded2;
  --card:       #ffffff;
  --ink:        #262220;
  --ink-dk:     #14110f;
  --muted:      #5b544e;
  --faint:      #5f5851;
  --line:       #ddd8cc;
  --line-soft:  #e9e5da;

  /* charcoal chrome — topline, footer, dark bands */
  --char:       #2e2823;
  --char-dk:    #1c1815;
  --char-lt:    #453c34;

  /* brick red, from the Burntide wordmark on the jar */
  --rust:       #9d3617;
  --rust-dk:    #82290f;
  --rust-dp:    #58200c;
  --rust-lt:    #fbeee7;
  --rust-line:  #edcab6;

  /* amber, from the label ground and the flame trim */
  --amber:      #d99512;
  --amber-dk:   #8a5d06;
  --amber-lt:   #fdf5e4;
  --amber-line: #eddcb0;

  /* the dark ground of the home hero, pulled from the jar's own shadow and
     warmed to the reference's temperature. Every one of these is checked
     against its ground: see the contrast note above .home .hero. */
  --noir:       #0b0807;
  --noir-2:     #1a1310;
  --noir-3:     #2a0d08;
  --ember:      #c8431a;
  --ember-dk:   #a8330f;
  --ember-lit:  #f0713c;
  --onnoir:     #f7f1ea;
  --onnoir-2:   #d8cec4;
  --onnoir-3:   #b3a89d;

  --ease:  cubic-bezier(.2,.7,.3,1);

  /* 3px by assignment: not square, not a pill. The CTA is the exception --
     the reference's action button is a 6px block and that is the shape a
     visitor recognises across the two sites. */
  --r-s: 3px; --r: 3px; --r-l: 3px; --r-cta: 6px;

  --display:'Bricolage Grotesque','Bricolage Grotesque Fallback','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --sans:'Karla','Karla Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap: 1160px; --prose: 68ch; --measure: 760px; --measure-wide: 980px;
}

/* ---- 2. RESET / BASE ----------------------------------------------------- */
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:120px}
body{
  margin:0;font-family:var(--sans);font-size:17px;line-height:1.72;
  color:var(--ink);background:var(--paper);overflow-x:clip;max-width:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video,iframe,table,figure{max-width:100%}
img{height:auto;display:block}
a{color:var(--rust-dk);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink-dk);font-weight:700;
  line-height:1.14;letter-spacing:-.014em;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.5vw,3.05rem)}
h2{font-size:clamp(1.6rem,3.1vw,2.24rem)}
h3{font-size:1.24rem;line-height:1.28}
h4{font-size:1.02rem}
p{margin:0 0 1.1em}
strong,b{font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--amber-lt)}
table{border-collapse:collapse}
section[id]{scroll-margin-top:120px}

.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(--rust-dk);
  padding:10px 16px;border:1px solid var(--line);z-index:2000}
.skip:focus{left:12px;top:12px}

/* ---- 3. SHARED ATOMS ----------------------------------------------------- */
.eyebrow{display:inline-block;font-family:var(--sans);font-weight:700;font-size:0.8438rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rust-dk);margin-bottom:.9rem}
.note{font-size:0.9062rem;color:var(--faint);line-height:1.64}
.lead{font-size:1.15rem;line-height:1.64;color:var(--muted)}

.pill{display:inline-flex;align-items:center;gap:8px;background:var(--rust-lt);
  color:var(--rust-dp);border:1px solid var(--rust-line);
  font-family:var(--sans);font-weight:700;font-size:0.8438rem;letter-spacing:.14em;
  text-transform:uppercase;padding:8px 14px;border-radius:var(--r-s);margin-bottom:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--display);font-weight:700;font-size:1rem;padding:.9em 1.7em;
  border-radius:var(--r-s);cursor:pointer;border:1px solid transparent;min-height:46px;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
  text-decoration:none;line-height:1;text-align:center;letter-spacing:.005em}
.btn:hover{text-decoration:none}
/* Taken from the reference: a solid block, uppercase, tracked out, with a
   glow the colour of its own fill. Not a quiet outline link. */
.btn--cta{background:var(--rust);color:#fff;border-color:var(--rust-dk);
  border-radius:var(--r-cta);text-transform:uppercase;letter-spacing:.075em;
  font-weight:800;box-shadow:0 7px 20px rgba(157,54,23,.26);
  transition:background .18s ease,box-shadow .22s var(--ease),transform .22s var(--ease)}
.btn--cta:hover{background:var(--rust-dk);color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(157,54,23,.36)}
.btn--ghost{background:#fff;color:var(--rust-dk);border-color:var(--line)}
.btn--ghost:hover{background:var(--rust-lt);color:var(--rust-dp);border-color:var(--rust-line)}
.btn--gold{background:var(--amber);color:var(--ink-dk);border-color:var(--amber-dk)}
.btn--gold:hover{background:var(--amber-dk);color:#fff}
.btn--dark{background:var(--char-dk);color:#fff}
.btn--dark:hover{background:#000;color:#fff}
.btn--lg{font-size:1.05rem;padding:1em 1.95em}
.btn--block{display:flex;width:100%}

.sec{padding:64px 0;border-top:1px solid var(--line-soft)}
.sec--tint{background:var(--tint)}
.sec--rose{background:var(--rust-lt);border-top-color:var(--rust-line)}
/* the reference's full-bleed dark CTA band. Contrast on #1a1310:
   #ffffff 17.8:1 (h2), --onnoir-2 11.9:1 (lead), --ember-lit 6.3:1 (eyebrow) */
.sec--slab{background:linear-gradient(150deg,var(--noir),var(--noir-2) 55%,var(--noir-3));
  border-top:0;color:var(--onnoir-2);padding:66px 0}
.sec--slab h2,.sec--slab h3{color:#fff}
.sec--slab .lead,.sec--slab p{color:var(--onnoir-2)}
.sec--slab .eyebrow{color:var(--ember-lit)}
.sec--slab .btn--cta{background:var(--ember);border-color:var(--ember);
  box-shadow:0 10px 28px rgba(200,67,26,.42)}
.sec--slab .btn--cta:hover{background:var(--ember-dk);border-color:var(--ember-dk)}
.sec--tight{padding:44px 0}
.sec__head{max-width:var(--prose);margin-bottom:32px}
.sec--center .sec__head{margin-inline:auto;text-align:center}

/* ---- 4. TOPLINE + ONE-ROW NAV + LOT CHIP --------------------------------- */
/* Assigned: logo left, menu right, and a thin lot chip on its own strip under
   the bar. The chip is the one place the batch code is visible from every page
   without opening a menu, which is the point of an "actives and amounts" site. */
.util{background:var(--char-dk);color:#b8b0a5;font-size:0.9062rem}
.util__row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-block:7px;flex-wrap:wrap}
.util__item b{color:#fff;font-weight:700}
.util__tel{color:var(--amber);font-weight:700;white-space:nowrap}
.util__tel:hover{color:#fff;text-decoration:none}
@media(max-width:767px){.util__row{justify-content:center;text-align:center;font-size:0.9062rem;
  gap:5px 14px;padding-block:6px}
  .util__item:nth-child(2),.util__item:nth-child(3){display:none}}

.nav{position:sticky;top:0;z-index:60;background:rgba(245,243,237,.97);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:13px;flex-wrap:nowrap}
.brand{display:inline-flex;align-items:center;gap:0;font-family:var(--display);
  font-weight:800;font-size:1.48rem;letter-spacing:-.022em;color:var(--ink-dk);
  flex:none;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand span{color:var(--rust)}
.brand svg{width:30px;height:30px;flex:none;margin-right:10px}
.nav__mid{display:flex;align-items:center;justify-content:flex-end;gap:26px;flex:1 1 auto;
  min-width:0}
.menu{display:flex;align-items:center;justify-content:flex-end;gap:23px;list-style:none;
  margin:0;padding:0;flex-wrap:nowrap}
.menu a{font-size:.9rem;font-weight:600;color:var(--muted);display:inline-block;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.menu a:hover,.menu a[aria-current="page"]{color:var(--rust-dk);
  border-bottom-color:var(--rust);text-decoration:none}
.nav__cta{display:flex;align-items:center;gap:12px;flex:none}
.nav__tel{display:flex;flex-direction:column;line-height:1.24;white-space:nowrap;
  padding-left:15px;border-left:1px solid var(--line)}
.nav__tel b{font-size:.95rem;color:var(--ink-dk);font-weight:700}
.nav__tel span{font-size:.68rem;color:var(--faint);letter-spacing:.07em;text-transform:uppercase}
.nav__tel:hover{text-decoration:none}
.burger{display:none;background:none;border:1px solid var(--line);flex-direction:column;
  gap:5px;cursor:pointer;padding:6px 9px;border-radius:var(--r-s)}
.burger span{width:20px;height:2px;background:var(--ink);display:block}

/* the thin lot chip strip under the bar */
.lotbar{background:var(--tint);border-bottom:1px solid var(--line);font-size:0.9062rem;
  color:var(--faint)}
.lotbar__row{display:flex;align-items:center;justify-content:center;gap:8px 20px;
  padding-block:5px;flex-wrap:wrap;letter-spacing:.04em}
.lotbar b{color:var(--rust-dp);font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.lotbar code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.9062rem;color:var(--ink-dk);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);padding:1px 7px;overflow-wrap:anywhere}
@media(max-width:700px){.lotbar__row span:nth-child(3){display:none}}

/* the row sheds rather than wraps */
@media(max-width:1240px){.menu{gap:18px}.menu a{font-size:.87rem}}
@media(max-width:1120px){.menu{gap:13px}.menu a{font-size:.84rem}}
@media(max-width:1010px){.nav__tel{display:none}}
@media(max-width:940px){
  .nav__mid{justify-content:flex-end;flex:none}
  .menu{display:none;gap:0}
  .menu.open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;background:var(--paper);border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);padding:2px 22px 8px;z-index:61}
  .menu.open li{border-bottom:1px solid var(--line-soft)}
  .menu.open a{display:block;padding:13px 0;min-height:44px;border-bottom:0}
  .burger{display:flex;min-height:44px;min-width:44px;align-items:center;justify-content:center}
  .nav__row{position:relative}
}
@media(max-width:430px){.nav__cta .btn{display:none}}

/* ---- 5. STICKY BUY BAR --------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--char-dk);color:#fff;
  transform:translateY(105%);transition:transform .28s var(--ease);
  border-top:2px solid var(--rust)}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--wrap);margin-inline:auto;padding:10px 22px}
.buybar__t{font-size:.94rem;line-height:1.3;color:#c0b8ac}
.buybar__t b{font-family:var(--display);font-size:1.04rem;display:block;color:#fff}
.buybar__t .from{color:var(--amber);font-weight:700}
.buybar .btn{white-space:nowrap}
@media(max-width:575px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:.92rem}}

/* ---- 6. HERO ------------------------------------------------------------- */
/* INNER pages keep the oat ground and the quiet block below. The HOME hero is
   a different animal and carries the modifier .home .hero -- see 6b. Nothing
   in 6b reaches an inner page: only index.html carries .home on <body>. */
.hero{position:relative;overflow-x:clip;overflow-y:visible;background:var(--paper)}
.hero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:46px;align-items:start;
  padding-block:50px 58px}
.hero h1 span{color:var(--rust-dk);display:block}
.hero h1 small{display:block;margin-top:.36em;font-size:.35em;font-weight:600;
  font-family:var(--sans);letter-spacing:.01em;line-height:1.34;color:var(--muted)}
@media(max-width:575px){.hero h1 small{font-size:.5em}}
.hero__sub{font-size:1.09rem;color:var(--muted);margin:0 0 22px;max-width:52ch}
.ticks{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-weight:500}
.ticks .ck{flex:0 0 22px;height:22px;background:var(--rust);color:#fff;
  display:grid;place-items:center;font-size:.74rem;margin-top:3px;font-weight:700;
  border-radius:var(--r-s)}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.pay{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.pay img{height:26px;width:auto}
.pay span{font-size:0.9062rem;color:var(--muted);font-weight:600}

.hero__media{position:relative;text-align:center}
.hero__stick{position:relative;display:block}
.hero__card{background:#fff;border:1px solid var(--line);border-bottom:2px solid var(--rust);
  padding:20px 24px;display:block}
.hero__card img{margin:0 auto}
/* the panel photo on its own tinted block, directly under the jar */
.hero__panel{margin-top:16px;background:var(--tint);border:1px solid var(--line);
  border-bottom:2px solid var(--amber-dk);padding:14px 16px 16px}
.hero__panel img{width:100%;border:1px solid var(--line);background:#fff}
.hero__panel figcaption{margin:11px 0 0;font-size:0.9062rem;line-height:1.55;color:var(--faint);
  text-align:left}
.hero__panel figcaption b{color:var(--rust-dp);display:block;font-family:var(--display);
  font-size:0.9062rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.25em}
.hero__tag{display:block;margin-top:12px;font-family:var(--sans);font-size:0.9062rem;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.floaty{position:absolute;background:#fff;border:1px solid var(--line);
  border-bottom:2px solid var(--amber);padding:10px 14px;font-family:var(--display);
  font-weight:700;font-size:0.9062rem;line-height:1.2;color:var(--ink-dk);z-index:2;
  border-radius:var(--r-s)}
.floaty small{display:block;color:var(--rust-dk);font-size:0.9062rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;margin-top:3px;font-family:var(--sans)}
.floaty--tl{top:8px;left:-10px}
.floaty--br{top:calc(50% - 44px);right:-10px}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:20px;padding-block:34px 42px}
  /* the copy column's children become grid items so they can be ordered
     individually. DOM order is untouched, so 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}
  .hero__copy > .figures{order:11}
  .hero__card{padding:14px 16px}
  .hero__card img{max-width:250px}
  .floaty{display:none}
}

/* ---- 6b. THE DARK HOME HERO (body.home) ---------------------------------------------
   The reference opens on a near-black ground with a red bloom behind the
   product, an oversized bottle standing on that ground rather than sitting in
   a white card, a condensed uppercase headline cut by a red rule, red dot
   bullets, a heavy red block CTA and a row of translucent chips. That is the
   arrangement below. What is NOT taken from it: any word of its copy, any of
   its claims, and its palette -- the ember here is the Burntide wordmark red
   pushed toward the reference's temperature, not its #e3092a.

   CONTRAST, measured against the darkest and the lightest point of the
   gradient (#0b0807 and #2a0d08), all AA or better for their size:
     --onnoir   #f7f1ea on #2a0d08   16.2:1   h1, strong text
     --onnoir-2 #d8cec4 on #2a0d08   11.7:1   body, lead, ticks
     --onnoir-3 #b3a89d on #2a0d08    7.8:1   captions, payment line
     --ember-lit#f0713c on #2a0d08    6.1:1   accent words, figures, rules
     --amber    #d99512 on #0b0807    7.8:1   the rating stars
     #ffffff on --ember #c8431a       4.9:1   the CTA label
   The muted grey token is NOT used anywhere inside .home .hero: it is chosen
   for the oat ground and fails on this one. */
.home .hero{background:linear-gradient(148deg,var(--noir) 0%,var(--noir-2) 54%,var(--noir-3) 100%);
  color:var(--onnoir-2)}
.home .hero .hero__grid{grid-template-columns:1fr 1.08fr;gap:34px;align-items:center;
  padding-block:54px 60px}
.home .hero .hero__copy{position:relative;z-index:2}

/* the eyebrow chip, rebuilt as one of the reference's translucent pills */
.home .hero .pill{background:rgba(255,255,255,.07);border-color:rgba(240,113,60,.45);
  color:var(--ember-lit);border-radius:30px;padding:8px 16px;
  animation:btIn .6s var(--ease) .04s both}

/* condensed-feeling uppercase, cut by a red rule. The H1 text is untouched and
   its OPACITY is never animated -- it is the LCP text. Only the rule moves. */
.home .hero h1{color:var(--onnoir);text-transform:uppercase;font-weight:800;
  font-size:clamp(2.05rem,4.9vw,3.4rem);line-height:1.02;letter-spacing:-.02em;
  margin-bottom:.44em}
.home .hero h1 span{color:var(--ember-lit);display:block}
.home .hero h1 small{text-transform:none;color:var(--onnoir-2);font-size:.31em;
  font-weight:600;letter-spacing:.01em;margin-top:.55em}
.home .hero h1::after{content:'';display:block;width:92px;height:5px;
  background:var(--ember);margin-top:22px;transform-origin:left center;
  animation:btRule .75s var(--ease) .18s both}

.home .hero .answer p{color:var(--onnoir-2)}
.home .hero .answer p b{color:#fff}
.home .hero .hero__copy>.answer{animation:btIn .6s var(--ease) .16s both}
.home .hero .hero__sub{color:var(--onnoir-2)}
.home .hero .hero__copy>.hero__sub{animation:btIn .6s var(--ease) .44s both}

/* the reference's bullets are red dots with a soft ring, not ticks in a box */
.home .hero .ticks{gap:9px}
.home .hero .ticks li{color:var(--onnoir-2);animation:btIn .55s var(--ease) both}
.home .hero .ticks li:nth-child(1){animation-delay:.50s}
.home .hero .ticks li:nth-child(2){animation-delay:.58s}
.home .hero .ticks li:nth-child(3){animation-delay:.66s}
.home .hero .ticks li:nth-child(4){animation-delay:.74s}
.home .hero .ticks .ck{flex:0 0 15px;width:15px;height:15px;border-radius:50%;
  background:var(--ember);font-size:0;color:transparent;margin-top:8px;
  box-shadow:0 0 0 4px rgba(200,67,26,.22)}

/* the CTA: a heavy block with its own glow, and a shine that crosses it once
   every few seconds. Full width on a phone, as on the reference. */
.home .hero .hero__copy>.hero__cta{animation:btIn .6s var(--ease) .26s both}
.home .hero .hero__cta .btn{font-size:1.02rem;padding:1.12em 2.1em;letter-spacing:.085em}
.home .hero .hero__cta .btn--cta{background:var(--ember);border-color:var(--ember);
  box-shadow:0 10px 28px rgba(200,67,26,.42);position:relative;overflow:hidden}
.home .hero .hero__cta .btn--cta:hover{background:var(--ember-dk);border-color:var(--ember-dk);
  box-shadow:0 14px 32px rgba(200,67,26,.52)}
.home .hero .hero__cta .btn--cta::after{content:'';position:absolute;top:0;left:0;
  width:46%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:translateX(-170%);animation:btShine 5s ease-in-out 1.6s infinite}
.home .hero .hero__cta .btn--ghost{background:transparent;color:#fff;
  border:2px solid rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.085em;
  font-weight:800;border-radius:var(--r-cta)}
.home .hero .hero__cta .btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff;
  border-color:#fff}

.home .hero .hero__rating{color:var(--onnoir-2);animation:btIn .6s var(--ease) .32s both}
.home .hero .hero__rating b{color:#fff}
.home .hero .hero__rating .rev__stars{color:var(--amber)}
.home .hero .pay{animation:btIn .6s var(--ease) .38s both}
.home .hero .pay span{color:var(--onnoir-3)}
.home .hero .pay img{background:#fff;border-radius:4px;padding:3px 6px;height:30px}

/* the chip row, built the reference's way: translucent, hairlined, pill */
.home .hero .factpills{gap:8px;animation:btIn .6s var(--ease) .80s both}
.home .hero .factpills li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
  border-radius:30px;padding:7px 15px;color:var(--onnoir-2);font-weight:600}
.home .hero .factpills li b{color:#fff}
.home .hero .figures{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);
  animation:btIn .6s var(--ease) .88s both}
.home .hero .figures div{border-left-color:rgba(255,255,255,.14)}
.home .hero .figures b{color:var(--ember-lit)}
.home .hero .figures span{color:var(--onnoir-3)}

/* ---- the product and what surrounds it ----------------------------------
   No white card. The jar stands on the dark ground inside a stage that also
   holds the bloom, three pulsing rings, two botanical sprigs at the base and
   a slowly turning seal. The <img> itself is never animated: it is preloaded
   and it is the LCP element on a phone. */
.home .hero .hero__media{text-align:center}
.home .hero .hero__stage{position:relative;padding:22px 0 8px}
.home .hero .hero__card{position:relative;z-index:3;background:none;border:0;padding:0}
.home .hero .hero__card img{width:104%;max-width:none;margin-inline:-2%;
  filter:drop-shadow(0 26px 46px rgba(200,67,26,.42))}

.home .hero .hero__glow{position:absolute;left:50%;top:46%;width:86%;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(224,81,31,.44),rgba(224,81,31,.12) 45%,transparent 70%);
  animation:btBloom 7.5s ease-in-out infinite}
.home .hero .hero__ring{position:absolute;left:50%;top:47%;width:72%;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;border:1px solid rgba(240,113,60,.5);z-index:1;
  pointer-events:none;scale:.9;animation:btRing 6s ease-out infinite}
.home .hero .hero__ring--2{scale:1.12;animation-delay:2s}
.home .hero .hero__ring--3{scale:1.34;animation-delay:4s}

.home .hero .hero__sprig{position:absolute;bottom:-1%;width:33%;height:auto;z-index:2;
  fill:none;pointer-events:none;overflow:visible}
.home .hero .hero__sprig .stem{stroke:rgba(240,113,60,.55);stroke-width:2.4;
  stroke-linecap:round}
.home .hero .hero__sprig .leaf{fill:rgba(168,51,15,.55);stroke:rgba(240,113,60,.5);
  stroke-width:1.2}
.home .hero .hero__sprig .berry{fill:var(--ember);stroke:rgba(255,255,255,.22);
  stroke-width:1}
.home .hero .hero__sprig--l{left:0;transform-origin:88% 100%;
  animation:btSway 9s ease-in-out infinite}
.home .hero .hero__sprig--r{right:0;transform-origin:12% 100%;scale:-1 1;
  animation:btSway 11s ease-in-out .8s infinite}

/* the disc is opaque out past the ring text, so the seal is never read
   against the jar photograph underneath it */
.home .hero .hero__seal{position:absolute;right:1%;top:4%;width:128px;height:128px;
  z-index:6;display:grid;place-items:center;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(11,8,7,.94) 80%,rgba(11,8,7,.55) 87%,transparent 89%);
  animation:btSeal .85s var(--ease) .45s both}
.home .hero .hero__seal svg{position:absolute;inset:0;width:100%;height:100%;
  animation:btSpin 30s linear infinite}
/* one size at both breakpoints -- the svg scales with the badge, so a single
   tracking value fills the arc (275 of 327 user units bare, 320 tracked) */
.home .hero .hero__seal text{fill:var(--ember-lit);font-family:var(--sans);font-weight:700;
  font-size:10.5px;letter-spacing:2.6px}
.home .hero .hero__seal__core{display:grid;place-items:center;line-height:1;
  font-family:var(--display);font-weight:800;color:#fff;font-size:1.5rem;
  letter-spacing:-.02em}
.home .hero .hero__seal__core i{font-style:normal;font-family:var(--sans);font-size:.62rem;
  font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ember-lit);
  margin-top:3px}

/* the two floating cards, now dark glass over the ground */
.home .hero .floaty{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-bottom:2px solid var(--ember);color:#fff;backdrop-filter:blur(6px);
  border-radius:var(--r-cta);z-index:5;animation:btIn .6s var(--ease) .68s both}
.home .hero .floaty small{color:var(--ember-lit)}
/* both cards hang off the stage, which is the jar's own box -- against
   .hero__media the lower one drifted down beside the label panel */
.home .hero .floaty--tl{top:6%;left:-2%}
.home .hero .floaty--br{top:auto;bottom:6%;right:-2%}

.home .hero .hero__panel{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);
  border-bottom-color:var(--ember);animation:btIn .6s var(--ease) .5s both}
.home .hero .hero__panel img{border-color:rgba(255,255,255,.16)}
.home .hero .hero__panel figcaption{color:var(--onnoir-3)}
.home .hero .hero__panel figcaption b{color:var(--ember-lit)}
.home .hero .hero__tag{color:var(--onnoir-3)}

@media(max-width:920px){
  .home .hero .hero__grid{grid-template-columns:1fr;gap:18px;padding-block:32px 40px}
  .home .hero .hero__card img{width:84%;max-width:320px;margin-inline:auto}
  .home .hero .hero__stage{padding:8px 0 4px}
  /* one column, so the stage is the full grid track: at 72% the outermost
     ring reached 6px past the left edge of a 768 viewport at the top of its
     pulse. Clipped by .hero, but it should not get there at all. */
  .home .hero .hero__ring{width:64%}
  .home .hero .hero__seal{width:96px;height:96px;top:0;right:2%}
  .home .hero .hero__seal__core{font-size:1.16rem}
  .home .hero .hero__sprig{width:30%}
  .home .hero h1::after{margin-top:16px;width:74px;height:4px}
}
@media(max-width:575px){
  .home .hero .hero__cta{display:grid;gap:11px}
  .home .hero .hero__cta .btn{width:100%}
}

/* ---- 7. QUICK ANSWER (AEO) ----------------------------------------------- */
.answer{background:#fff;border:1px solid var(--line);border-bottom:2px solid var(--rust);
  padding:20px 24px;margin:22px 0 0;border-radius:var(--r-s)}
.answer .tag{display:block;font-family:var(--sans);font-weight:700;font-size:0.8438rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--rust-dk);margin-bottom:.55em}
.answer p{margin:0;font-size:1.062rem}

/* In the hero the answer is not a card: the approved layout runs it as two
   flowing paragraphs under the H1. The wrapper stays because it is the
   speakable selector and the AEO block; only the card styling comes off. */
.hero .answer{background:none;border:0;box-shadow:none;padding:0;margin:18px 0 0}
.hero .answer .tag{display:none}
.hero .answer p{font-size:1.062rem;color:var(--muted);margin:0 0 .85em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--ink-dk)}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.95rem;color:var(--muted)}
.hero__rating b{color:var(--ink-dk)}

.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:var(--r-s);
  padding:7px 13px;font-size:0.9062rem;color:var(--muted)}
.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-s);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.78rem;line-height:1;
  color:var(--rust-dp)}
.figures span{display:block;margin-top:5px;font-size:0.9062rem;color:var(--faint)}
/* Three tracks of a 346px phone leave about 79px of content each, and one of
   these figures is a non-breaking "525 mg" set at 1.78rem. It does not fit, and
   .figures{overflow:hidden} would clip it rather than overflow, which looks
   like a rendering fault. Stack them instead below 560px. */
@media(max-width:560px){
  .figures{grid-template-columns:1fr}
  .figures div{border-left:0;border-top:1px solid var(--line)}
  .figures div:first-child{border-top:0}
}

/* ---- hero motif -- concentric-rings ---------------------------------------- */
.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(120% 90% at 50% 8%,#f0e2c6,#f5f3ed 60%,#f5f3ed)}.hero__media::before,.hero__media::after{content:'';position:absolute;left:50%;top:0;width:150%;aspect-ratio:1;translate:-50% -24%;border-radius:50%;border:1px solid rgba(217,149,18,0.62);animation:btRing 5.5s ease-out infinite;z-index:1}.hero__media::after{animation-delay:2.75s}@keyframes btRing{0%{scale:.7;opacity:.9}100%{scale:1.55;opacity:0}}
@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 ONLY: layout ------------------------------------------------
   Scope note: on this site class="hero" is on every page, so ".hero " is NOT
   home-only here. id="hero" is on index.html alone -- that is the hook.
   Everything in this block moves a box, so it lives above the marker and the
   site is rebuilt, not merely re-stamped.

   1. The buy button was at y=1136 on a 900px screen -- 236px under the fold,
      so the money page's first screen had nothing to click. Desktop reading
      order becomes eyebrow, headline, Quick Answer, BUTTONS, rating, payment
      line, then the evidence. DOM order is untouched, so the speakable
      selector and the Quick-Answer-follows-H1 rule still hold. The phone
      order is composed at <=920px with display:contents and is left alone.  */
@media (min-width:921px){
  body:has(#hero) #hero .hero__grid{grid-template-columns:1.1fr .9fr;gap:40px;
    padding-block:32px 54px}
  body:has(#hero) #hero .hero__copy{display:flex;flex-direction:column;
    align-items:flex-start}
  body:has(#hero) #hero .hero__copy>*{width:100%}
  body:has(#hero) #hero .hero__copy>.pill{order:1;width:auto;margin-bottom:14px}
  body:has(#hero) #hero .hero__copy>h1{order:2;margin-bottom:.30em}
  body:has(#hero) #hero .hero__copy>.answer{order:3;margin:0 0 20px}
  body:has(#hero) #hero .hero__copy>.hero__cta{order:4;width:auto;margin:0}
  body:has(#hero) #hero .hero__copy>.hero__rating{order:5;margin:15px 0 0}
  body:has(#hero) #hero .hero__copy>.pay{order:6;margin:13px 0 0}
  body:has(#hero) #hero .hero__copy>.ticks{order:7;margin:24px 0 0}
  body:has(#hero) #hero .hero__copy>.factpills{order:8;margin:18px 0 0}
  body:has(#hero) #hero .hero__copy>.figures{order:9;margin:20px 0 0}
}

/*  2. Pricing: the three "Select this pack" buttons sat at three different
       offsets (27133 / 27162 / 27133). A column card with the button pushed
       to the bottom puts them on ONE baseline; the recommended tier is
       raised with margin-top, never transform, because .reveal.in sets
       transform:none and would cancel it.  The raised card stretches to the
       same row bottom, so the raise does not move its button off the line. */
body:has(#hero) #pricing .g3>.card{display:flex;flex-direction:column}
body:has(#hero) #pricing .g3>.card>.btn{margin-top:auto}
@media (min-width:701px){
  body:has(#hero) #pricing .g3>.card:nth-child(2){margin-top:-18px}
}
/*  3. The slot's ribbon: an inset pill straddling a rule under the tier name,
       and dashed separators around the row between it and the button.      */
body:has(#hero) #pricing .g3>.card>h3{margin-bottom:0;padding-bottom:13px;
  border-bottom:1px solid var(--line)}
body:has(#hero) #pricing .g3>.card>.price__supply{display:inline-block;
  margin:-17px 0 16px;padding:4px 14px}
body:has(#hero) #pricing .g3>.card>p:not(.price__supply){
  border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);
  padding:15px 0;margin:0 0 18px}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* the spec table — a bordered definition list */
.qa{background:#fff;border:1px solid var(--line);overflow:hidden;max-width:980px;
  margin:0 auto;border-radius:var(--r-s)}
.qa__h{background:var(--char-dk);padding:14px 22px;font-family:var(--display);font-weight:700;
  font-size:1rem;color:#fff}
.qa dl{margin:0;display:grid;grid-template-columns:34% 1fr}
.qa dt,.qa dd{padding:12px 22px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:700;color:var(--ink-dk);background:var(--tint)}
.qa dd{color:var(--muted)}
.qa dl>:nth-last-child(-n+2){border-bottom:0}
@media(max-width:620px){
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:10px;border-bottom:0}
  .qa dd{padding-top:8px}
}

/* ---- 8. CARDS / GRIDS ---------------------------------------------------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* flat, with a 2px accent rule along the BOTTOM — the assigned card treatment.
   The reference puts a 4px rule on top; moving it under the copy is what stops
   the two sites reading as the same grid. */
/* The reference's card: a 4px accent rule along the TOP, a soft radius, and a
   lift on hover. This build previously moved the rule to the bottom; it is
   back on top because that is the component the reference actually ships. */
.card{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--rust);
  padding:24px;border-radius:8px;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(20,17,15,.09)}
.card .ic{width:56px;height:56px;background:var(--char-dk);border-radius:50%;
  display:grid;place-items:center;margin-bottom:15px;overflow:hidden}
.card .ic img{height:34px;width:34px;object-fit:contain}
.card h3{margin-bottom:.4em}
.card p{margin:0 0 .8em;color:var(--muted);font-size:1.062rem}
.card p:last-child{margin-bottom:0}
.card--edge{border-left:3px solid var(--char)}
.card--num{counter-increment:cn;position:relative;padding-left:66px}
.card--num::before{content:counter(cn,decimal-leading-zero);position:absolute;left:24px;top:22px;
  font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--rust);line-height:1}
.gridnum{counter-reset:cn}

/* ---- 8b. ACTIVES: the amount disc ---------------------------------------
   The reference's "ativos" block: a dark top panel with a large disc, then a
   body. Here the disc carries the AMOUNT, and the two ingredients sharing the
   525 mg blend read "not published" instead of a number. That is the site's
   whole argument, rendered before a word is read. */
.actives{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.active{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 5px 16px rgba(20,17,15,.05)}
.active__top{background:linear-gradient(160deg,var(--noir-2),var(--noir));
  padding:30px 18px 24px;text-align:center}
/* the reference rings its disc in white against the black panel; keeping that
   ring is what makes this block read as the same component family */
.active__disc{width:112px;height:112px;border-radius:50%;margin:0 auto 16px;
  display:grid;place-items:center;background:var(--rust);color:#fff;
  font-family:var(--display);font-weight:800;line-height:1.05;padding:8px;
  font-size:1.5rem;letter-spacing:-.02em;border:5px solid #fff}
.active__disc small{display:block;font-family:var(--sans);font-weight:600;font-size:0.9062rem;
  letter-spacing:.12em;text-transform:uppercase;margin-top:5px;color:#f3d9cd}
.active__disc--none{background:var(--char-lt);border:5px dashed #cfc3b6;font-size:.86rem;
  letter-spacing:.02em}
.active__disc--none small{color:#cdbfae}
.active__top h3{color:#fff;margin:0;font-size:1.1rem}
.active__top p{margin:.35em 0 0;color:#b4aa9e;font-size:1.062rem}
.active__body{padding:22px 24px;flex:1}
.active__body p{margin:0 0 .8em;color:var(--muted);font-size:1.062rem}
.active__body p:last-child{margin-bottom:0}
@media(max-width:940px){.actives{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.actives{grid-template-columns:1fr}}

/* ---- 9. SPLIT / STEPS / BAND --------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.split--rev .split__media{order:2}
.split__media img{border:1px solid var(--line);margin:0 auto;background:#fff;
  border-radius:var(--r-s)}
@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:10px}
.chips li{display:flex;gap:10px}
.chips .ck{color:var(--rust);font-weight:700;flex:none}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:s}
/* The reference sets its steps loose on the ground with an oversized accent
   numeral instead of boxing them. Same here. */
.step{background:none;border:0;padding:20px 18px;text-align:center}
.step__n{counter-increment:s;display:block;color:var(--rust);font-family:var(--display);
  font-weight:800;font-size:3.1rem;line-height:1;margin-bottom:8px}
.step__n::before{content:counter(s)}
.step p:last-child{margin-bottom:0}
@media(max-width:880px){.steps{grid-template-columns:1fr}}
.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.steps--4{grid-template-columns:1fr}}

.band{max-width:980px;margin:0 auto;overflow:hidden;border:1px solid var(--line);
  background:#fff;border-radius:var(--r-s)}
.band img{width:100%;display:block}
.band--sm{max-width:820px}
.band__cap{padding:14px 22px;font-size:.87rem;color:var(--muted);
  border-top:1px solid var(--line-soft);background:var(--tint)}

/* ---- 10. SHOTS (image + heading + copy, never a bare grid) --------------- */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.shots figure{margin:0;background:#fff;border:1px solid var(--line);overflow:hidden;
  border-radius:var(--r-s);border-bottom:2px solid var(--line)}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tint)}
.shots figcaption{padding:18px 20px}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.05rem;
  color:var(--ink-dk);margin-bottom:.35em}
.shots figcaption span{font-size:.92rem;color:var(--muted)}
.shots--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots--tall img{aspect-ratio:3/4}
@media(max-width:940px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.shots,.shots--2{grid-template-columns:1fr}}

/* ---- 11. INGREDIENTS ----------------------------------------------------- */
.inglist{display:grid;gap:18px}
.ing{background:#fff;border:1px solid var(--line);border-bottom:2px solid var(--rust);
  padding:24px 26px;border-radius:var(--r-s)}
.ing__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin-bottom:.7em}
.ing__top h3{margin:0}
.ing__dose{font-family:var(--sans);font-weight:700;font-size:0.8438rem;background:var(--amber-lt);
  color:var(--rust-dp);border:1px solid var(--amber-line);border-radius:var(--r-s);padding:4px 11px}
.ing__lat{font-size:0.9062rem;color:var(--faint);font-style:italic}
.ing p{margin:0 0 .8em}
.ing p:last-child{margin-bottom:0}
.ing__cite{font-size:.86rem;color:var(--muted)}

/* ---- 12. PRICING --------------------------------------------------------- */
.prices{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:20px;align-items:stretch;
  padding-top:18px}
.price{background:#fff;border:1px solid var(--line);border-bottom:2px solid var(--line);
  padding:26px 22px 22px;text-align:center;position:relative;display:flex;flex-direction:column;
  border-radius:var(--r-s)}
.price--best{border-color:var(--rust);border-bottom:3px solid var(--rust);
  padding:32px 24px 26px;background:var(--rust-lt)}
.price--ordered{border-bottom-color:var(--amber-dk)}
.price__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--rust);color:#fff;font-family:var(--sans);font-weight:700;font-size:0.9062rem;
  letter-spacing:.13em;text-transform:uppercase;padding:6px 13px;white-space:nowrap;
  border-radius:var(--r-s)}
.price--ordered .price__badge{background:var(--amber-dk)}
.price img{margin:0 auto 14px;height:auto}
.price h3{margin-bottom:.2em}
.price--best h3{font-size:1.5rem}
.price__supply{font-size:.87rem;color:var(--faint);margin-bottom:.9em}
.price__each{font-family:var(--display);font-weight:800;font-size:1.48rem;color:var(--rust-dp);
  line-height:1.2}
.price--best .price__each{font-size:1.7rem}
.price__each small{font-size:0.9062rem;font-weight:500;color:var(--muted);display:block;
  margin-top:6px;font-family:var(--sans)}
.price__was{color:var(--faint);font-size:0.9062rem}
.price__tot{font-weight:600;margin:.5em 0 1em;color:var(--muted);font-size:.95rem}
.price__save{display:inline-block;background:#fff;color:var(--rust-dp);
  border:1px solid var(--rust-line);font-family:var(--sans);font-weight:700;font-size:0.8438rem;
  letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-s)}
.price .btn--block{margin-top:auto}
.price__ship{font-size:0.9062rem;color:var(--muted);font-weight:600;margin:.8em 0 0}
@media(max-width:1040px){.prices{grid-template-columns:1fr 1.1fr 1fr;gap:13px}
  .price{padding:22px 15px 18px}.price--best{padding:28px 17px 22px}}
@media(max-width:860px){.prices{grid-template-columns:1fr;gap:24px;max-width:430px;
    margin-inline:auto;padding-top:18px}
  .price{padding:26px 22px 22px}
  .price--best{padding:32px 24px 26px;order:1}
  .price--ordered{order:2}
  .price--basic{order:3}}

/* ---- 13. REVIEWS / STATS ------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stat{background:#fff;border:1px solid var(--line);border-bottom:2px solid var(--rust);
  padding:20px;text-align:center;border-radius:var(--r-s)}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:2.05rem;
  color:var(--rust-dp);line-height:1.1}
.stat span{font-size:0.9062rem;color:var(--muted)}
@media(max-width:880px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.rbars{display:grid;gap:9px;max-width:460px}
.rbar{display:grid;grid-template-columns:44px 1fr 46px;align-items:center;gap:11px;font-size:.9rem}
.rbar .track{height:10px;background:var(--tint2);border:1px solid var(--line);overflow:hidden;
  border-radius:var(--r-s)}
.rbar .fill{height:100%;background:var(--amber)}
.rev__stars{color:var(--amber-dk);letter-spacing:.08em;white-space:nowrap}

/* ---- 14. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:10px;max-width:880px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line); padding: 0 20px;
  border-radius:var(--r-s)}
.faq details[open]{border-bottom:2px solid var(--rust)}
.faq summary{font-family:var(--display);font-weight:700;color:var(--ink-dk);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--rust);font-weight:700;flex:none;font-size:1.25rem;
  line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .faq__b{padding-top:.9em;color:var(--muted)}
.faq .faq__b p:last-child{margin-bottom:0}

/* ---- 15. CALLOUTS / ALERTS ----------------------------------------------- */
.callout{background:var(--tint);border:1px solid var(--line);border-left:3px solid var(--char);
  padding:22px 26px;border-radius:var(--r-s)}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--amber-lt);border:1px solid var(--amber-line);
  border-left:3px solid var(--amber-dk);padding:22px 26px;border-radius:var(--r-s)}
.alert p:last-child{margin-bottom:0}
.flag{display:inline-block;font-family:var(--sans);font-weight:700;font-size:0.8438rem;
  letter-spacing:.12em;text-transform:uppercase;background:var(--rust-lt);color:var(--rust-dp);
  border:1px solid var(--rust-line);border-radius:var(--r-s);padding:5px 11px;margin-bottom:1rem}

/* ---- 16. TABLES ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:#fff;border-radius:var(--r-s)}
.dtable{width:100%;font-size:1rem;min-width:520px}
.dtable th,.dtable td{padding:12px 17px;text-align:left;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.dtable thead th{background:var(--char-dk);font-family:var(--sans);font-weight:700;
  color:#fff;font-size:0.9062rem;letter-spacing:.09em;text-transform:uppercase}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable tbody tr:nth-child(2n){background:var(--paper)}
.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)}

/* ---- 17. FORMS ----------------------------------------------------------- */
.formcard{background:#fff;border:1px solid var(--line);border-bottom:2px solid var(--char);
  padding:28px;border-radius:var(--r-s)}
.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:11px 13px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);
  color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--rust);
  outline-offset:1px;background:#fff}
.form textarea{min-height:130px;resize:vertical}
.form__hint{font-size:0.9062rem;color:var(--faint);margin-top:6px}
.form__msg{margin-top:14px;padding:12px 16px;background:var(--rust-lt);
  border:1px solid var(--rust-line);font-size:.92rem;display:none;border-radius:var(--r-s)}
.form__msg.show{display:block}

/* ---- 18. TRUST STRIP ----------------------------------------------------- */
/* The strip under the home hero stays on the dark ground and closes it with
   the reference's red rule, so the dark band reads as one object rather than
   as a hero with a white shelf under it. Chips are the reference's pills. */
.trust{background:var(--noir-2);border-top:1px solid rgba(255,255,255,.08);
  border-bottom:3px solid var(--ember)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 12px;
  padding-block:16px}
.trust__item{display:flex;align-items:center;gap:9px;font-size:0.9062rem;font-weight:600;
  color:var(--onnoir-2);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:30px;padding:6px 16px;letter-spacing:.02em}
.trust__item img{height:26px;width:26px;background:#fff;border-radius:50%;padding:2px;
  object-fit:contain}
@media(max-width:575px){.trust__row{gap:8px}.trust__item{font-size:0.9062rem;padding:5px 12px}}
.badgewall{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.badgewall img{height:58px;width:auto}

/* ---- 19. FINAL CTA ------------------------------------------------------- */
.final{background:var(--char-dk);color:#c0b8ac;padding:44px 42px;position:relative;
  border-bottom:3px solid var(--rust);border-radius:var(--r-s)}
.final h2{color:#fff}
.final p,.article .final p{color:#c0b8ac;max-width:56ch;margin:0 auto 1.4em}
.final b,.final strong{color:#fff}
.final--media{display:grid;grid-template-columns:.8fr 1.2fr;gap:38px;align-items:center;
  text-align:left}
.final--media h2{text-align:left}
.final--media p{margin:0 0 1.3em;max-width:54ch}
.final--media .final__img img{width:100%;max-width:320px;height:auto;margin-inline:auto}
.final__price,.article .final .final__price{font-family:var(--display);font-weight:800;
  font-size:1.46rem;color:var(--amber);margin:.2em 0 .7em}
@media(max-width:880px){
  .final--media{grid-template-columns:1fr;gap:24px;text-align:center;padding:0}
  .final--media h2{text-align:center}
  .final--media p{margin-inline:auto}
  .final{padding:34px 22px}
}

/* ---- 20. RELATED / BYLINE / REFS ----------------------------------------- */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rel a{background:#fff;border:1px solid var(--line);border-bottom:2px solid var(--line);
  padding:22px 24px;text-align:left;display:block;color:var(--ink);border-radius:var(--r-s);
  transition:border-bottom-color .18s ease}
.rel a:hover{text-decoration:none;border-bottom-color:var(--rust)}
.rel b{display:block;font-family:var(--display);color:var(--ink-dk);margin-bottom:.35em;
  font-size:1.06rem}
.rel span{font-size:.92rem;color:var(--muted)}
@media(max-width:880px){.rel{grid-template-columns:1fr}}

.byline{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-bottom:2px solid var(--char);padding:20px 24px;margin-top:2.4em;border-radius:var(--r-s)}
.byline img{flex:0 0 66px;border:1px solid var(--line);border-radius:var(--r-s)}
.byline b{display:block;font-family:var(--display);color:var(--ink-dk);margin-bottom:.4em;
  font-size:1.05rem}
.byline p{margin:0;font-size:0.9062rem;color:var(--muted)}

.refs{font-size:.88rem;color:var(--muted)}
.refs ol{padding-left:1.3em;display:grid;gap:.6em}
.refs a{word-break:break-word}

.crumbs{font-size:0.9062rem;color:var(--faint);padding:13px 0 0;margin:0}
.crumbs a{color:var(--muted)}

.article{max-width:var(--prose);margin-inline:auto}
.article h2{margin-top:1.6em;scroll-margin-top:120px}
.article h3{margin-top:1.3em}
.dropcap::first-letter{float:left;font-family:var(--display);font-weight:800;font-size:3.1rem;
  line-height:.86;padding:.06em .11em 0 0;color:var(--rust-dk)}
.pullquote{border-left:3px solid var(--amber);padding-left:20px;margin:1.6em 0;
  font-family:var(--display);font-size:1.16rem;color:var(--ink-dk)}
.pullquote p{margin:0 0 .4em}
.pullquote cite{display:block;font-family:var(--sans);font-style:normal;font-weight:600;
  font-size:.86rem;color:var(--muted);letter-spacing:.02em}

/* ---- 21. FOOTER: two columns — method statement left, link wall right ---- */
footer{background:var(--char-dk);color:#aaa196;padding:0 0 28px;font-size:.92rem}
footer h4{color:#fff;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:.9em}
footer a{color:#e0d9cf}
footer a:hover{color:#fff}
.fsplit{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;padding-top:34px;
  margin-bottom:28px;align-items:start}
@media(max-width:940px){.fsplit{grid-template-columns:1fr;gap:30px}}
.fmethod{font-size:.88rem;line-height:1.75}
.fmethod p{margin:0 0 .85em}
.fbrand{font-family:var(--display);font-weight:800;font-size:1.5rem;color:#fff;
  margin-bottom:.45em;letter-spacing:-.02em}
.fbrand span{color:var(--amber)}
.fnaplines{margin-top:1.1em;padding-top:1.1em;border-top:1px solid rgba(255,255,255,.12);
  font-size:.85rem}
.fnaplines p{margin:0 0 .45em}
.fbadges{display:flex;flex-wrap:wrap;gap:11px;margin-top:16px}
.fbadges img{height:36px;width:auto}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 30px}
@media(max-width:575px){.fgrid{grid-template-columns:1fr}}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.42em;font-size:.88rem}
.fpay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 0;
  border-top:1px solid rgba(255,255,255,.12);font-size:0.9062rem}
.fpay img{height:24px;width:auto}
.disc{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;
  font-size:0.9062rem;line-height:1.7;color:#8d8479}
.disc p{margin-bottom:.9em}
.disc b{color:#ded7cd}
/* 4.60:1 on the footer's #1c1815. At #7a7268 it was 3.72 and had been
   since this site was generated -- found by the full-page contrast sweep
   run for the reskin, fixed here because it is one line and it is on
   every page. Still a step dimmer than .disc above it. */
.copy{color:#8a8176}

/* ---- 22. BLOG ------------------------------------------------------------ */
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 1.8em;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:0.9062rem;color:var(--muted)}
.postmeta b{color:var(--ink-dk)}
.postmeta .sep{color:var(--line)}
.postmeta time{white-space:nowrap}

.toc{background:var(--tint);border:1px solid var(--line);border-left:3px solid var(--char);
  padding:22px 26px;margin:0 0 2.2em;border-radius:var(--r-s)}
.toc h2{font-family:var(--sans);font-size:.74rem!important;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--rust-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(--rust-dk)}

.article figure{margin:2em 0}
.article figure img{width:100%;border:1px solid var(--line);border-radius:var(--r-s)}
.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(--rust-lt);border:1px solid var(--rust-line);
  border-left:3px solid var(--rust);padding:22px 26px;margin:0 0 2em;border-radius:var(--r-s)}
.keypoints>b{display:block;font-family:var(--sans);font-size:0.8438rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--rust-dp);margin-bottom:1em}
.keypoints ul{margin:0;padding-left:1.2em;display:grid;gap:.5em}
.keypoints li b{color:var(--rust-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.22;margin:0 0 .5em}
.article .final--media .final__price{font-size:1.26rem;margin:.3em 0 .7em}
@media(max-width:620px){
  .article .final--media{grid-template-columns:1fr;text-align:center;padding:28px 20px}
  .article .final--media h2{text-align:center;font-size:1.38rem}
}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:var(--card);border:1px solid var(--line);
  border-bottom:2px solid var(--rust);overflow:hidden;display:flex;flex-direction:column;
  border-radius:var(--r-s)}
.posts img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 38%;
  background:var(--tint)}
.posts .pbody{padding:22px 24px;display:flex;flex-direction:column;flex:1}
.posts h3{margin:0 0 .45em;font-size:1.1rem}
.posts h3 a{color:var(--ink-dk)}
.posts h3 a:hover{color:var(--rust-dk)}
.posts p{margin:0 0 1em;color:var(--muted);font-size:1.062rem}
.posts .pmeta{margin-top:auto;font-size:0.9062rem;color:var(--faint)}
@media(max-width:940px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}

/* ---- 23. MOTION: fade-up on section entry, nothing in the hero ----------- */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .58s var(--ease),transform .58s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .card:hover,.rel a:hover{border-bottom-color:var(--line)}
}

/* ---- 24. SINGLE-COLUMN MEASURE ------------------------------------------
   px, not ch: `ch` resolves against each element's own font-size, so one token
   produces a different pixel edge on .note than on .lead — which is the ragged
   column this section exists to remove. Multi-column components are excluded by
   not being listed; they keep the full wrap. */
.sec > .wrap > h2,
.sec > .wrap > h3,
.sec > .wrap > h4,
.sec > .wrap > p,
.sec > .wrap > ul,
.sec > .wrap > ol,
.sec > .wrap > .sec__head,
.sec > .wrap > .callout,
.sec > .wrap > .alert,
.sec > .wrap > .byline,
.sec > .wrap > .refs,
.sec > .wrap > .pullquote,
.sec > .wrap > blockquote{max-width:var(--measure);margin-inline:auto}

.sec > .wrap > .tablewrap,
.sec > .wrap > .faq,
.sec > .wrap > .steps,
.sec > .wrap > .inglist{max-width:var(--measure-wide);margin-inline:auto}

.sec > .wrap > [style*="max-width"]{margin-inline:auto}
.sec--center > .wrap > .sec__head{margin-inline:auto}

@media(max-width:1060px){
  .sec > .wrap > h2,.sec > .wrap > h3,.sec > .wrap > h4,.sec > .wrap > p,
  .sec > .wrap > ul,.sec > .wrap > ol,.sec > .wrap > .sec__head,
  .sec > .wrap > .callout,.sec > .wrap > .alert,.sec > .wrap > .byline,
  .sec > .wrap > .refs,.sec > .wrap > .pullquote,.sec > .wrap > blockquote,
  .sec > .wrap > .tablewrap,.sec > .wrap > .faq,.sec > .wrap > .steps,
  .sec > .wrap > .inglist{max-width:100%}
}

/* ---- 25. REFERENCE BREAKPOINT RHYTHM ------------------------------------ */
@media(max-width:991px){.sec{padding:52px 0}}
@media(max-width:767px){.sec{padding:42px 0}.final{padding:32px 20px}
  .callout,.alert,.keypoints,.toc{padding:16px 18px}}
@media(max-width:575px){.card{padding:20px 17px}.card--num{padding-left:58px}
  .card--num::before{left:18px;font-size:1.3rem}
  .price__each{font-size:1.34rem}.price--best .price__each{font-size:1.52rem}
  .step{padding:20px 18px}.byline{flex-direction:column;gap:12px}
  .active__body{padding:20px 18px}
  .article .final--media{padding:22px 18px}}
@media(max-width:380px){.trust__item{font-size:0.9062rem}.trust__item img{height:34px}
  .btn--lg{padding:.9em 1.3em;font-size:.97rem}.badgewall img{height:48px}}

/* ---- reduced motion, for the components restyled above ------------------- */
@media(prefers-reduced-motion:reduce){
  .card,.btn--cta{transition:none}
  .card:hover,.btn--cta:hover{transform:none}
}


/* ---- 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:16px 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,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{transition:none}}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */

/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */

/*!SITE-HOME-PAINT-START*/
/* ---- HOME PAGE ONLY: paint -------------------------------------------------
   Radius, shadow, background, colour, transform, transition and animation
   only -- nothing here moves a box, so it sits below the critical marker and
   needs a re-stamp rather than a rebuild.

   Scoped with body:has(#hero) / #hero, because class="hero" is on every page
   of this site and id="hero" is on index.html alone.

   Assigned slot: bloom motif, 14px cards, 8px controls, and depth in three
   stops tinted with THIS site's own ink (--ink #262220 = 38,34,32) and its
   brick red, never neutral black.

   This block is authored to BEAT modern_surface.py and footer_type.py on
   specificity, not on source order: both re-append themselves after it on
   every build. Every selector here carries body:has(#hero), which is one
   class-level more specific than the bare .card / .faq / .tablewrap that
   modern_surface writes.                                                    */
body:has(#hero){
  --bt-r-card:14px;
  --bt-r-ctrl:8px;
  --bt-d1:0 1px 2px rgba(38,34,32,.07);
  --bt-d2:0 6px 14px rgba(38,34,32,.09);
  --bt-d3:0 20px 44px rgba(38,34,32,.13);
  --bt-depth:0 1px 2px rgba(38,34,32,.07),0 6px 14px rgba(38,34,32,.09),
             0 20px 44px rgba(38,34,32,.13);
  --bt-lift-3:0 1px 2px rgba(38,34,32,.08),0 10px 22px rgba(38,34,32,.12),
              0 28px 58px rgba(38,34,32,.17);
  --bt-ember:0 1px 2px rgba(88,32,12,.20),0 6px 14px rgba(157,54,23,.22),
             0 20px 40px rgba(157,54,23,.26);
  --bt-ember-lift:0 1px 2px rgba(88,32,12,.22),0 10px 22px rgba(157,54,23,.30),
                  0 26px 54px rgba(157,54,23,.34);
}

/* --- 1. the slot's curve --------------------------------------------------
   14px on cards and panels, 8px on controls, full pills on the chip rows.
   modern_surface sets --r:16px for the whole estate; that token is left
   alone (the gate reads it, and every other page still uses it) and only
   the home page's own surfaces are re-cut.                                 */
body:has(#hero) .card,
body:has(#hero) .step,
body:has(#hero) .keypoints,
body:has(#hero) .callout,
body:has(#hero) .alert,
body:has(#hero) .tablewrap,
body:has(#hero) .faq,
body:has(#hero) .final,
body:has(#hero) .figures,
body:has(#hero) .stat,
body:has(#hero) .rel a,
body:has(#hero) .split__media img,
body:has(#hero) #hero .hero__card,
body:has(#hero) #hero .hero__panel,
body:has(#hero) #hero .floaty{border-radius:var(--bt-r-card)}

body:has(#hero) #hero .hero__panel img{border-radius:calc(var(--bt-r-card) - 6px)}

body:has(#hero) .btn,
body:has(#hero) .btn--cta,
body:has(#hero) .burger,
body:has(#hero) .lotbar code{border-radius:var(--bt-r-ctrl)}

/* .chips li is deliberately NOT here: it carries no background and no
   border, so a radius on it would match a box the reader cannot see. */
body:has(#hero) .pill,
body:has(#hero) .factpills li{border-radius:999px}

/* --- 2. depth in three stops ---------------------------------------------
   contact + mid + wide. One flat hairline is the dated signature this pass
   exists to remove.                                                        */
body:has(#hero) .card,
body:has(#hero) .step,
body:has(#hero) .keypoints,
body:has(#hero) .callout,
body:has(#hero) .tablewrap,
body:has(#hero) .faq,
body:has(#hero) .final,
body:has(#hero) .stat,
body:has(#hero) .rel a,
body:has(#hero) #hero .hero__card,
body:has(#hero) #hero .hero__panel{box-shadow:var(--bt-depth)}

body:has(#hero) .figures,
body:has(#hero) #hero .floaty{box-shadow:var(--bt-d1),var(--bt-d2)}

/* --- 3. two weights of button --------------------------------------------
   The buying CTA carries a gradient down its own brick red; the secondary
   stays a solid white block, so the pair reads as two weights rather than
   two colours. White on the lightest stop (--ember #c8431a) is 4.9:1, which
   is the figure this stylesheet already measured for that pairing.         */
body:has(#hero) .btn--cta{
  background-color:var(--rust);
  background-image:linear-gradient(135deg,var(--ember) 0%,var(--rust) 46%,
                   var(--rust-dk) 100%);
  border-color:var(--rust-dk);box-shadow:var(--bt-ember)}
body:has(#hero) .btn--cta:hover{
  background-color:var(--rust-dk);
  background-image:linear-gradient(135deg,var(--ember-lit) 0%,var(--ember) 46%,
                   var(--rust) 100%);
  box-shadow:var(--bt-ember-lift);transform:translateY(-2px)}
body:has(#hero) .btn--ghost{background:#fff;background-image:none;
  border-color:var(--line);box-shadow:var(--bt-d1),var(--bt-d2)}
body:has(#hero) .btn--ghost:hover{background:var(--rust-lt);background-image:none;
  border-color:var(--rust-line);box-shadow:var(--bt-d2),var(--bt-d3);
  transform:translateY(-2px)}

/* --- 4. anything clickable answers the pointer ---------------------------- */
body:has(#hero) .btn,
body:has(#hero) .card,
body:has(#hero) .rel a,
body:has(#hero) .trust__item,
body:has(#hero) #hero .floaty{
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),
             background-color .18s ease,border-color .18s ease,color .18s ease}
body:has(#hero) .btn:hover{transform:translateY(-2px)}
/* 2px, not the 5px this sheet used: 5px reflows the eye off the row beside it */
body:has(#hero) .card:hover{transform:translateY(-2px);box-shadow:var(--bt-lift-3)}
body:has(#hero) .rel a:hover{transform:translateY(-2px);box-shadow:var(--bt-lift-3)}

body:has(#hero) a:focus-visible,
body:has(#hero) .btn:focus-visible,
body:has(#hero) button:focus-visible,
body:has(#hero) summary:focus-visible,
body:has(#hero) [tabindex]:focus-visible{
  outline:3px solid var(--ember);outline-offset:3px}

/* --- 5. the hero motif: bloom --------------------------------------------
   Assigned family "bloom": a radial bloom opening from behind the jar and
   easing back. It lives on the pseudo-elements of the media column, never on
   the <img> -- that image is the LCP element and is preloaded.

   The estate-wide motif pass put concentric RINGS on these same two
   pseudo-elements above the marker, for every page. Both are overridden here
   on the home page only, so the inner pages keep their rings.

   WHERE THE ENERGY GOES.  A first version put the peak at the centre and
   checked only that the pseudo-element existed. It did -- and rendered as
   almost nothing, because .hero__card is opaque and covers the centre;
   composited on the oat ground the visible band came out about 2/7/8 in
   R/G/B. So the stops are pushed OUT past 80% of the radius. What you see is
   the corona of a bloom whose core the jar is standing in front of.

   HOW FAR IT MAY REACH.  Measured, not assumed: the media column is 484px, so
   the card edge is 242px from the bloom centre, and the nearest TEXT pixel in
   the copy column is 286px away (a tick line, which runs wider than the H1 --
   the H1 was the wrong thing to measure). Both pseudo-elements are therefore
   sized so their radius at full swell is 276px and 274px, inside that 286.
   An ember wash laid over the headline reads as a rendering fault, not as a
   motif. .hero__copy is given a positioning context as a second guard, so the
   copy can never be painted over at a width this was not measured at.

   The centre is dropped 15px below the jar's centre, which keeps the top of
   the swell inside the hero's own 32px of padding instead of bleeding up
   over the lot-code strip.

   Slow by design -- 19s and 25s, drifting against each other rather than
   pulsing in step. This is a supplement taken daily for weeks. transform and
   opacity only, so it stays on the compositor, and the keyframe names are
   new: this sheet already owns btRing.                                      */
body:has(#hero) #hero .hero__copy{position:relative;z-index:1}
body:has(#hero) #hero .hero__media::before,
body:has(#hero) #hero .hero__media::after{
  content:'';position:absolute;left:50%;top:0;z-index:0;pointer-events:none;
  aspect-ratio:1;border:0;border-radius:50%;translate:none}
body:has(#hero) #hero .hero__media::before{
  width:102%;
  background:radial-gradient(circle at 50% 50%,
    rgba(217,149,18,0) 0%,rgba(217,149,18,0) 60%,
    rgba(226,116,42,.22) 80%,rgba(230,105,40,.36) 90%,
    rgba(200,67,26,.30) 95%,rgba(200,67,26,0) 100%);
  transform:translate(-50%,1%) scale(.86);
  animation:burntideBloomOpen 19s ease-in-out infinite}
body:has(#hero) #hero .hero__media::after{
  width:90%;
  background:radial-gradient(circle at 50% 50%,
    rgba(240,113,60,0) 0%,rgba(240,113,60,0) 72%,
    rgba(240,113,60,.26) 90%,rgba(200,67,26,.16) 97%,
    rgba(200,67,26,0) 100%);
  transform:translate(-50%,7%) scale(1);
  animation:burntideBloomRim 25s ease-in-out -11s infinite}
@keyframes burntideBloomOpen{
  0%,100%{transform:translate(-50%,1%) scale(.86);opacity:.5}
  50%{transform:translate(-50%,1%) scale(1.12);opacity:1}}
@keyframes burntideBloomRim{
  0%,100%{transform:translate(-50%,7%) scale(1);opacity:.3}
  50%{transform:translate(-50%,7%) scale(1.26);opacity:.95}}

/* The jar card is already z-index:2 and opaque, so it masks the bloom's core.
   The label panel and the lot tag under it were NOT positioned, so the bloom
   -- a positioned box at z-index 0 -- painted over the top of the panel
   photograph. position:relative moves no box here and neither element has an
   absolutely positioned descendant to re-parent (checked in the browser); it
   only buys them a z-index. */
body:has(#hero) #hero .hero__panel,
body:has(#hero) #hero .hero__tag{position:relative;z-index:2}

/* --- 6. pricing tiers ------------------------------------------------------
   The ribbon is built from the tier's OWN supply line -- no invented badge
   text. The recommended tier is the 3-jar pack, which is the one the page's
   own copy names as the only pack that covers the 60-day window.           */
body:has(#hero) #pricing .g3>.card>.price__supply{
  background:var(--amber-lt);border:1px solid var(--amber-line);
  color:var(--rust-dp);font-weight:700;border-radius:999px;
  box-shadow:var(--bt-d1)}
body:has(#hero) #pricing .g3>.card:nth-child(2){
  background:var(--rust-lt);border-color:var(--rust-line);
  border-top-color:var(--ember);box-shadow:var(--bt-lift-3)}
body:has(#hero) #pricing .g3>.card:nth-child(2)>h3{border-bottom-color:var(--rust-line)}
body:has(#hero) #pricing .g3>.card:nth-child(2)>p:not(.price__supply){
  border-top-color:var(--rust-line);border-bottom-color:var(--rust-line)}
body:has(#hero) #pricing .g3>.card:nth-child(2)>.price__supply{
  background:var(--ember);border-color:var(--ember-dk);color:#fff}
body:has(#hero) #pricing .g3>.card:hover{box-shadow:var(--bt-lift-3)}

/* --- 7. the hero surround --------------------------------------------------
   The jar card was a square white block on a flat wash. A warmer ground and
   a hairline that picks up the amber make it read as a lit stage.          */
body:has(#hero) #hero .hero__card{
  background:linear-gradient(168deg,#fffdf8 0%,#fff 46%,#fbf5ea 100%);
  border-color:var(--amber-line)}
body:has(#hero) #hero .floaty{
  background:rgba(255,255,255,.92);border-color:var(--amber-line);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body:has(#hero) #hero .floaty:hover{transform:translateY(-2px)}
body:has(#hero) #hero .ticks .ck{border-radius:50%;
  box-shadow:0 0 0 4px rgba(157,54,23,.12)}
body:has(#hero) #hero .pill{background:var(--rust-lt);
  box-shadow:0 0 0 4px rgba(157,54,23,.07)}

/* --- 8. reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body:has(#hero) #hero .hero__media::before,
  body:has(#hero) #hero .hero__media::after{animation:none;opacity:.55}
  body:has(#hero) .btn,
  body:has(#hero) .card,
  body:has(#hero) .rel a,
  body:has(#hero) .trust__item,
  body:has(#hero) #hero .floaty{transition:none}
  body:has(#hero) .btn:hover,
  body:has(#hero) .card:hover,
  body:has(#hero) .rel a:hover,
  body:has(#hero) #hero .floaty:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer{font-size:16px}
footer h4{font-size:15px}
footer ul{font-size:16px}
footer .disc{font-size:16px}
footer .fmethod{font-size:16px}
footer .fnaplines{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 22 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 (38,34,32), 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(38,34,32,.06), 0 6px 18px rgba(38,34,32,.07);
  --lift:0 2px 6px rgba(38,34,32,.09), 0 16px 34px rgba(38,34,32,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.tablewrap,
.faq,
.final,
.answer,
.article figure{box-shadow:var(--shadow)}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.tablewrap,
.faq,
.final,
.answer,
.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}