/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Fraunces Fallback";src:local("Georgia");font-weight:400;size-adjust:105.95%;ascent-override:92.30%;descent-override:24.07%;line-gap-override:0.00%}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:96.71%;ascent-override:101.13%;descent-override:26.37%;line-gap-override:0.00%}
@font-face{font-family:"Public Sans Fallback";src:local("Arial");font-weight:400;size-adjust:105.60%;ascent-override:89.96%;descent-override:21.31%;line-gap-override:0.00%}
@font-face{font-family:"Public Sans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:99.78%;ascent-override:95.21%;descent-override:22.55%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   BURNTIDEDAILY.COM
   Design slot 14 (batch 3): Fraunces / Public Sans, warm paper ground,
   18px radius, tinted-fill cards with a soft shadow, centred wordmark over a
   full-width menu with a price chip on the right, three-column footer with a
   price-ladder recap, count-up on the price row and no motion in the hero.

   Component system follows the shop-alpharock.com reference: chip rows in the
   hero, a star line under the CTA, a framed product shot, centred price cards
   with a flag ribbon and a per-day line, a stat strip, a dashed guarantee seal,
   numbered process steps and an accordion FAQ. The palette is taken from the
   Burntide jar (amber label, ember flame, deep red-brown wordmark), never from
   the reference, which is a dark "cut stone" site.

   Everything above the CRITICAL-END marker further down this file is inlined
   into the head of every page. Editing this file alone leaves those copies
   stale, so rebuild, or run restamp_assets.py. See pitfalls 47 and 49.

   The marker is deliberately NOT written out here. A CSS comment cannot nest,
   so spelling it in full would close this comment at its own closing slash,
   turn the rest of this header into a stray selector, and swallow the :root
   token block as that selector's body. It did exactly that once: --wrap came
   back empty at runtime, every .wrap lost its gutter, and the split in
   _critical_css() matched this line instead of the real marker, so the inlined
   critical CSS was a comment fragment. Pitfall 44, in a new disguise.
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* ground: warm paper */
  --paper:#fdf8f1;
  --paper-tint:#f7eddf;
  --paper-deep:#f2e4d0;
  --paper-card:#fffdfa;

  /* ink */
  --ink:#241a12;
  --ink-soft:#4a3a2c;
  --muted:#6a5647;
  --faint:#7b6959;
  --line:#e8dcc9;
  --line-soft:#f2e8d9;

  /* accent, from the flame on the jar */
  --ember:#bd4715;
  --ember-dk:#97370f;
  --ember-tint:#fdf1e7;
  --ember-line:#f0d5c0;

  /* secondary, from the amber label ground */
  --amber:#e6a01a;
  --amber-dk:#8f6608;
  --amber-soft:#fdf6e4;
  --amber-line:#f2e2bd;

  /* the dark band */
  --deep:#2a1a10;
  --deep-2:#3a2617;
  --deep-ink:#e9dccd;

  /* type */
  --display:"Fraunces","Fraunces Fallback","Georgia",serif;
  --sans:"Public Sans","Public Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* metrics */
  --wrap:1120px;
  --measure:760px;
  --measure-wide:980px;
  --r:18px;
  --r-sm:12px;
  --r-pill:999px;
  --shadow:0 18px 40px -22px rgba(63,38,18,.42);
  --shadow-sm:0 10px 24px -16px rgba(63,38,18,.38);
  --shadow-lift:0 24px 54px -26px rgba(63,38,18,.5);
  /* --- the night palette, home page only ---------------------------------
     Ground is the Burntide listing scene's own dark base (#240c00) warmed a
     step toward charcoal so it reads mineral rather than brown. Gold is the
     jar label (#fcc054) pulled back off full saturation. Rust is the flame on
     the jar. Nothing here is sampled from the reference site; only the
     temperature of the ramp is.
     Every pair below was measured: the lowest is 5.05:1 and most sit past 8:1. */
  --night:#17100a;
  --night-2:#1e1610;
  --night-3:#2a1e14;
  --night-4:#362618;
  --sand:#f7f0e4;
  --sand-dim:#d8cab4;
  --sand-faint:#bfae95;
  --gold:#f0be62;
  --gold-dk:#c08f33;
  --gold-glow:rgba(240,190,98,.17);
  --rust:#a33c1c;
  --rust-lt:#e0814a;
  --night-line:rgba(240,190,98,.18);
  --night-line-2:rgba(240,190,98,.10);
  /* the faceted corner: one square end, one cut end. The single most
     recognisable shape in the reference's component system. */
  --cut:6px 26px 6px 26px;
  --cut-sm:4px 15px 4px 15px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --navh:118px;
}

/* ---- 2. RESET / BASE ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:128px}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink-soft);
  font-family:var(--sans);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased}
img,svg,video,table{max-width:100%}
img{height:auto;display:block}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:700;
  line-height:1.12;margin:0 0 .5em;letter-spacing:-.008em}
h1{font-size:clamp(2.15rem,5.1vw,3.5rem);line-height:1.06}
h2{font-size:clamp(1.62rem,3.3vw,2.34rem)}
h3{font-size:clamp(1.12rem,1.9vw,1.35rem);line-height:1.22}
h4{font-size:1.02rem;font-family:var(--sans);font-weight:800;letter-spacing:.01em}
p{margin:0 0 1.05em}
a{color:var(--ember-dk);text-underline-offset:3px}
a:hover{color:var(--ember)}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin:0 0 .45em}
b,strong{font-weight:700;color:var(--ink)}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ember);color:#fff;
  padding:11px 18px;z-index:120;font-weight:700;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ---- 3. SHARED ATOMS ----------------------------------------------------- */
.wrap{width:min(var(--wrap),calc(100% - 44px));margin-inline:auto}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-size:0.8438rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ember-dk);margin-bottom:12px}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--ember);flex:none}

.pill{display:inline-block;background:var(--ember-tint);border:1px solid var(--ember-line);
  color:var(--ember-dk);border-radius:var(--r-pill);padding:7px 17px;
  font-size:0.8438rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:800;font-size:1rem;letter-spacing:.012em;
  padding:14px 28px;border-radius:var(--r-pill);border:2px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,
  background .16s ease,color .16s ease}
.btn--cta{background:var(--ember);color:#fff;box-shadow:var(--shadow-sm)}
.btn--cta:hover{background:var(--ember-dk);color:#fff;transform:translateY(-2px);
  box-shadow:var(--shadow)}
.btn--ghost{background:transparent;border-color:var(--ember-line);color:var(--ember-dk)}
.btn--ghost:hover{background:var(--ember-tint);color:var(--ember-dk)}
.btn--gold{background:var(--amber);color:var(--deep);box-shadow:var(--shadow-sm)}
.btn--gold:hover{background:var(--amber-dk);color:#fff}
.btn--lg{padding:17px 34px;font-size:1.06rem}
.btn--block{width:100%}

.ticks{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:10px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-weight:600;font-size:1.062rem}
.ticks .ck{flex:0 0 22px;height:22px;border-radius:50%;background:var(--ember);color:#fff;
  display:grid;place-items:center;font-size:.72rem;margin-top:4px;font-weight:700}

.chips{list-style:none;padding:0;margin:0 0 1.1em;display:grid;gap:9px}
.chips li{display:flex;gap:10px;align-items:flex-start}
.chips .ck{flex:0 0 20px;height:20px;border-radius:5px;background:var(--amber-soft);
  border:1px solid var(--amber-line);color:var(--amber-dk);display:grid;place-items:center;
  font-size:0.8125rem;margin-top:5px;font-weight:700}

/* ---- 4. MASTHEAD: utility strip, centred wordmark, full-width menu -------- */
.util{background:var(--deep);color:var(--deep-ink);font-size:0.9062rem}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding-block:8px}
.util__item{display:inline-flex;gap:6px;white-space:nowrap}
.util__item b{color:#fff;font-weight:700}
.util__tel{margin-left:auto;color:var(--amber);font-weight:800;white-space:nowrap;
  text-decoration:none}
.util__tel:hover{color:#fff}

.nav{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line);transition:box-shadow .2s ease}
.nav.is-stuck{box-shadow:0 10px 26px -20px rgba(63,38,18,.6)}
.nav__band{display:flex;align-items:center;justify-content:center;position:relative;
  padding-block:16px}
.brand{display:inline-flex;align-items:center;gap:0;text-decoration:none;
  font-family:var(--display);font-weight:800;font-size:1.72rem;color:var(--ink);
  letter-spacing:-.02em;line-height:1}
.brand svg{width:34px;height:34px;margin-right:11px;flex:none}
/* The wordmark is one line; the role sub-label is the second. `.brand__stack`
   is a column, so the two halves of the wordmark need their own block or the
   column stacks "Burn" above "tide". */
.brand__name{display:block;line-height:1;white-space:nowrap}
.brand__name span{color:var(--ember)}
.brand small{display:block;font-family:var(--sans);font-size:.6rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.brand__stack{display:flex;flex-direction:column;align-items:center}
.burger{position:absolute;right:0;top:50%;transform:translateY(-50%);display:none;
  width:44px;height:40px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper-card);cursor:pointer;padding:9px 10px}
.burger span{display:block;height:2px;background:var(--ink);margin:3px 0;border-radius:2px}

.nav__bar{background:var(--paper-tint);border-top:1px solid var(--line-soft)}
.nav__row{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;padding-block:0}
.menu{display:flex;flex-wrap:nowrap;gap:22px;list-style:none;margin:0;padding:0;flex:1 1 auto}
.menu a{display:inline-block;padding:13px 0;font-size:.9rem;font-weight:700;
  color:var(--ink-soft);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ember-dk);border-bottom-color:var(--ember)}
.nav__price{flex:none;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:var(--paper-card);border:1px solid var(--ember-line);border-radius:var(--r-pill);
  padding:7px 8px 7px 16px;font-size:.8rem;font-weight:700;color:var(--muted)}
.nav__price b{color:var(--ember-dk);font-weight:800}
.nav__price .btn{padding:8px 17px;font-size:.84rem}
.nav__tel{flex:none;white-space:nowrap;font-size:.8rem;font-weight:800;
  color:var(--ink);text-decoration:none;line-height:1.16}
.nav__tel span{display:block;font-size:.64rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}

/* ---- 5. STICKY BUY BAR --------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--deep);
  color:#fff;transform:translateY(102%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{width:min(var(--wrap),calc(100% - 28px));margin-inline:auto;display:flex;
  align-items:center;gap:14px;padding-block:11px}
.buybar__t{font-size:0.9062rem;color:var(--deep-ink);line-height:1.34}
.buybar__t b{display:block;color:#fff;font-size:.95rem}
.buybar__t .from{color:var(--amber);font-weight:800}
.buybar .btn{margin-left:auto;flex:none;padding:11px 22px;font-size:.92rem}

/* ---- 6. HERO ------------------------------------------------------------- */
/* Warm paper, no entrance animation anywhere: the motion budget on this site
   is spent on the price-row count-up. The H1 is the LCP element on desktop. */
.hero{background:
  radial-gradient(1100px 520px at 88% 4%,rgba(230,160,26,.16),transparent 62%),
  linear-gradient(180deg,var(--paper) 0%,var(--paper-tint) 100%);
  border-bottom:1px solid var(--line)}
.hero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:start;
  padding-block:52px 62px}
.hero h1{margin-bottom:.34em}
.hero h1 span{display:block;color:var(--ember)}
.hero h1 small{display:block;margin-top:.34em;font-size:.33em;font-weight:600;
  font-family:var(--sans);letter-spacing:.005em;line-height:1.36;color:var(--muted)}
@media(max-width:575px){.hero h1 small{font-size:.48em}}
.hero__sub{font-size:1.06rem;color:var(--muted)}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center;margin-top:6px}
.hero__rating{display:flex;align-items:center;gap:9px;margin:15px 0 0;font-size:.94rem;
  color:var(--muted)}
.hero__rating b{color:var(--ink)}
/* Stars are gold by convention, but --amber on the paper ground measures
   2.2:1. The deep amber still reads as gold and clears AA at 4.9:1, so the
   rating is legible rather than decorative. */
.stars{color:var(--amber-dk);letter-spacing:2px}
.pay{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.pay img{height:28px;width:auto}
.pay span{font-size:0.9062rem;color:var(--faint);font-weight:600}

.hero__media{position:relative;text-align:center}
.hero__stick{position:relative;display:inline-block;max-width:100%}
.hero__card{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 26px 30px;box-shadow:var(--shadow);
  display:inline-block;max-width:100%}
.hero__card img{margin:0 auto;width:100%;height:auto}
.hero__tag{display:inline-block;margin-top:13px;font-size:0.9062rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
/* the price card that floats over the shot -- this site's hero signature */
.pricefloat{position:absolute;left:-14px;bottom:26px;z-index:3;text-align:left;
  background:var(--paper-card);border:1px solid var(--ember-line);border-radius:var(--r);
  box-shadow:var(--shadow-lift);padding:15px 20px 16px;min-width:206px}
.pricefloat b{display:block;font-family:var(--display);font-size:2.05rem;line-height:1;
  color:var(--ember-dk)}
.pricefloat i{display:block;font-style:normal;font-size:0.9062rem;font-weight:700;
  color:var(--muted);margin-top:5px}
.pricefloat u{display:block;text-decoration:none;font-size:0.9062rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--amber-dk);margin-top:9px;
  padding-top:9px;border-top:1px solid var(--line-soft)}
.floaty{position:absolute;background:var(--paper-card);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:var(--r-sm);padding:10px 14px;
  font-family:var(--sans);font-weight:800;font-size:0.9062rem;line-height:1.2;
  color:var(--ink);z-index:2;box-shadow:var(--shadow-sm)}
.floaty small{display:block;color:var(--ember-dk);font-size:0.9062rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:800;margin-top:3px}
.floaty--tr{top:6px;right:-10px}

.factpills{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;padding:0;list-style:none}
.factpills li{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:7px 15px;font-size:0.9062rem;color:var(--muted)}
.factpills li b{color:var(--ink)}

.figures{display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0 0;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper-card);
  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(--ember-dk)}
.figures span{display:block;margin-top:5px;font-size:0.9062rem;color:var(--faint)}

@media(min-width:1025px){
  .hero__media{position:sticky;top:132px;align-self:start;height:calc(100vh - 132px);
    min-height:360px;display:flex;align-items:center;justify-content:center}
  .hero__stick{max-height:calc(100vh - 160px)}
  .hero__stick img{max-height:calc(100vh - 340px);min-height:150px;width:auto;
    object-fit:contain}
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:20px;padding-block:34px 44px}
  .hero__copy{display:contents}
  .hero__copy>.pill{order:1}
  .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>.hero__sub{order:8}
  .hero__copy>.pay{order:9}
  .hero__copy>.factpills{order:10}
  .hero__copy>.figures{order:11}
  .hero__card{padding:16px 16px 20px}
  .hero__card img{max-width:330px}
  .floaty{display:none}
  .pricefloat{left:0;bottom:8px;min-width:0;padding:11px 15px}
  .pricefloat b{font-size:1.6rem}
}

/* ---- 7. QUICK ANSWER (AEO) ----------------------------------------------- */
.answer{background:var(--paper-card);border:1px solid var(--amber-line);
  border-radius:var(--r);box-shadow:var(--shadow-sm);padding:20px 24px;margin:22px 0 0}
.answer .qtag{display:block;font-family:var(--sans);font-weight:800;font-size:0.8438rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--amber-dk);margin-bottom:.55em}
.answer p{margin:0;font-size:1.062rem}
/* On the HOME hero the answer is not a card: it runs as two flowing paragraphs
   straight under the headline, which is the current house pattern. Scoped to
   #hero deliberately. Inner pages reuse the .hero wrapper for their head block,
   and there the labelled card is the better signal, because the answer is one
   short paragraph in the middle of a page rather than the opening of one. */
.hero#hero .answer{background:none;border:0;box-shadow:none;padding:0;margin:18px 0 0}
.hero#hero .answer .qtag{display:none}
.hero#hero .answer p{font-size:1.062rem;color:var(--muted);margin:0 0 .85em;max-width:56ch}
.hero#hero .answer p:last-child{margin-bottom:0}
.hero#hero .answer p b{color:var(--ink)}

/* ---- 8. AT A GLANCE ------------------------------------------------------ */
.keyfacts{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--paper-card);margin:0}
.keyfacts div{display:grid;grid-template-columns:230px minmax(0,1fr);
  border-top:1px solid var(--line-soft)}
.keyfacts div:first-child{border-top:0}
.keyfacts dt{padding:13px 20px;font-weight:800;color:var(--ink);font-size:1.062rem;
  background:var(--paper-tint)}
.keyfacts dd{padding:13px 20px;margin:0;font-size:1.062rem;color:var(--muted)}
@media(max-width:640px){.keyfacts div{grid-template-columns:1fr}
  .keyfacts dd{padding-top:0}}

/* The generated motif that used to sit here painted a light warm gradient on
   every .hero on the site. Inner pages still use it. The HOME page is now a
   dark faceted treatment taken from its UI/UX reference, so the old ground is
   scoped away from the home page rather than left to compete with the new one
   -- one treatment per page, never two.
   Inner-page heroes have no .hero__media, so the old ember pseudo-elements
   were dead markup on 31 pages and are gone rather than merely scoped. */
body:not(.home-night) .hero{position:relative;overflow-x:clip;overflow-y:visible;
  background:linear-gradient(178deg,#ffffff,#f2e1d8 46%,#e7caba)}

/*!HOME-CRITICAL-START*/
/* Everything between this marker and HOME-CRITICAL-END is inlined into
   index.html only. It is above-the-fold CSS for the home page, so it has
   to be inline there -- but the other 31 pages never match .home-night and
   were carrying ~13 KB of it for nothing. */
/* ======================================================================
   HOME NIGHT -- the home page reskin
   Ground, type register, component shapes and motion follow the assigned
   UI/UX reference: a dark mineral page, a faceted corner instead of a soft
   radius, small-caps monospace labels, a gold gradient CTA, outlined chips.
   Everything is scoped to body.home-night, which only index.html carries, so
   the other 31 pages are untouched by any rule below.
   ====================================================================== */
body.home-night{
  --paper:#17100a;--paper-tint:#1e1610;--paper-deep:#33241a;--paper-card:#241a11;
  --ink:#f7f0e4;--ink-soft:#ded2bd;--muted:#cdbfa8;--faint:#bfae95;
  --line:rgba(240,190,98,.18);--line-soft:rgba(240,190,98,.10);
  --ember:#a8340f;--ember-dk:#e0814a;--ember-tint:#2e1a10;--ember-line:rgba(224,129,74,.30);
  --amber:#f0be62;--amber-dk:#f0be62;--amber-soft:#2c2013;--amber-line:rgba(240,190,98,.24);
  --deep:#120c07;--deep-2:#1c140c;--deep-ink:#d8cab4;
  --r:6px 26px 6px 26px;--r-sm:4px 15px 4px 15px;
  --shadow:0 26px 60px -26px rgba(0,0,0,.76);
  --shadow-sm:0 16px 34px -20px rgba(0,0,0,.7);
  --shadow-lift:0 30px 70px -28px rgba(0,0,0,.82);
  background:#17100a;color:#ded2bd}
/* .skip composites --r-sm into a 4-value shorthand; a 4-value token there
   would make a 7-value declaration and be dropped. Give it a literal. */
.home-night .skip{border-radius:0 0 15px 0;background:var(--rust);color:#fff}
.home-night :focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.home-night a{color:var(--gold)}
.home-night a:hover{color:var(--sand)}
.home-night b,.home-night strong{color:var(--sand)}

/* ---- masthead ---- */
.home-night .util{background:#100b06;color:var(--sand-dim);
  border-bottom:1px solid var(--night-line-2)}
.home-night .util__item b{color:var(--sand)}
.home-night .util__tel{color:var(--gold)}
.home-night .util__tel:hover{color:var(--sand)}
.home-night .nav{background:rgba(23,16,10,.94);-webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--night-line)}
.home-night .nav.is-stuck{box-shadow:0 14px 34px -24px rgba(0,0,0,.9)}
.home-night .brand{color:var(--sand)}
.home-night .brand__name span{color:var(--gold)}
.home-night .brand small{color:var(--sand-faint)}
.home-night .nav__bar{background:rgba(31,23,16,.92);border-top:1px solid var(--night-line-2)}
.home-night .menu a{color:var(--sand-dim);font-family:var(--mono);font-size:.79rem;
  letter-spacing:.07em;text-transform:uppercase}
.home-night .menu a:hover,.home-night .menu a[aria-current="page"]{color:var(--gold);
  border-bottom-color:var(--gold)}
.home-night .menu li{border-bottom-color:var(--night-line-2)}
.home-night .nav__price{background:rgba(247,240,228,.05);border-color:var(--night-line);
  border-radius:var(--r-pill);color:var(--sand-dim)}
.home-night .nav__price b{color:var(--gold)}
.home-night .nav__tel{color:var(--sand)}
.home-night .nav__tel span{color:var(--sand-faint)}
.home-night .burger{background:var(--night-3);border-color:var(--night-line)}
.home-night .burger span{background:var(--sand)}

/* ---- buttons: faceted corner, gold gradient, no soft pill ---- */
.home-night .btn{border-radius:var(--cut);letter-spacing:.035em}
.home-night .btn--cta{position:relative;overflow:hidden;border-color:transparent;
  background:linear-gradient(135deg,#f0be62 0%,#c08f33 100%);color:#17100a;
  box-shadow:0 16px 34px -16px rgba(240,190,98,.5)}
.home-night .btn--cta:hover{background:linear-gradient(135deg,#f8cd7e 0%,#d3a043 100%);
  color:#17100a;box-shadow:0 20px 42px -14px rgba(240,190,98,.66)}
.home-night .btn--ghost{background:transparent;border-color:var(--gold);color:var(--gold)}
.home-night .btn--ghost:hover{background:var(--gold-glow);color:var(--sand)}
.home-night .btn--gold{background:var(--gold);color:#17100a}
.home-night .btn--gold:hover{background:#f8cd7e;color:#17100a}
.home-night .buybar{background:#100b06;border-top:1px solid var(--night-line)}
.home-night .buybar__t{color:var(--sand-dim)}
.home-night .buybar__t .from{color:var(--gold)}

/* ---- hero ground: near-black, side-lit, with a faint mineral strata ---- */
.home-night .hero{position:relative;overflow-x:clip;overflow-y:visible;border-bottom:0;color:var(--sand-dim);
  background:
    radial-gradient(820px 560px at 86% 6%,rgba(240,190,98,.20),transparent 60%),
    radial-gradient(660px 480px at 4% 98%,rgba(163,60,28,.26),transparent 64%),
    linear-gradient(176deg,#1d1409 0%,#17100a 52%,#120c07 100%)}
.home-night .hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(104deg,rgba(240,190,98,.055) 0 1px,transparent 1px 78px)}
.home-night .hero__grid{grid-template-columns:1.06fr .94fr;gap:54px;
  padding-block:46px 72px;position:relative;z-index:1}

/* ---- hero copy ---- */
/* the eyebrow: small-caps monospace with a short rule, not a filled chip */
.home-night .hero .pill{background:none;border:0;padding:0;color:var(--gold);
  font-family:var(--mono);font-size:0.8438rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;margin-bottom:15px}
.home-night .hero .pill::before{content:"";width:28px;height:1px;background:var(--gold);flex:none}
.home-night .hero h1{color:var(--sand);font-weight:600;letter-spacing:-.014em;
  font-size:clamp(2.25rem,5.3vw,3.75rem);line-height:1.04;margin-bottom:.26em}
.home-night .hero h1 span{color:var(--gold)}
.home-night .hero h1 small{color:var(--sand-dim);font-weight:500}
.home-night .hero#hero .answer{border-left:1px solid var(--night-line);padding-left:20px;
  margin:20px 0 0}
.home-night .hero#hero .answer p{color:var(--sand-dim);font-size:1.062rem;max-width:54ch;
  margin-bottom:.7em}
.home-night .hero#hero .answer p b{color:var(--sand)}
.home-night .hero__sub{color:var(--sand-faint);font-size:1rem;max-width:56ch}
.home-night .hero__rating{color:var(--sand-dim);font-family:var(--mono);font-size:0.9062rem;
  letter-spacing:.04em;margin-top:15px}
.home-night .hero__rating b{color:var(--sand);font-weight:600}
.home-night .stars{color:var(--gold);letter-spacing:3px}
/* the chip row: outlined, small-caps, monospace -- built the way the
   reference builds its trust chips rather than as filled fact pills */
.home-night .hero .factpills{gap:8px;margin-top:20px}
.home-night .hero .factpills li{background:rgba(247,240,228,.045);
  border:1px solid var(--night-line);border-radius:var(--r-pill);padding:7px 15px;
  font-family:var(--mono);font-size:0.9062rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sand-dim)}
.home-night .hero .factpills li b{color:var(--gold);font-weight:600}
.home-night .ticks li{color:var(--sand-dim);font-weight:500}
.home-night .ticks .ck{background:var(--gold-glow);border:1px solid var(--night-line);
  color:var(--gold);font-weight:600}
.home-night .pay span{color:var(--sand-faint);font-family:var(--mono);font-size:0.9062rem;
  letter-spacing:.08em;text-transform:uppercase}
.home-night .pay img{background:rgba(247,240,228,.94);border-radius:6px;padding:3px 7px}
/* the stat row, ruled rather than boxed */
.home-night .figures{background:none;border:0;border-top:1px solid var(--night-line);
  border-radius:0;overflow:visible;margin-top:28px;padding-top:22px}
.home-night .figures div{border-left:1px solid var(--night-line-2);padding:2px 15px}
.home-night .figures div:first-child{padding-left:0}
.home-night .figures b{color:var(--gold);font-weight:600;font-size:1.55rem;
  letter-spacing:-.01em}
.home-night .figures span{font-family:var(--mono);font-size:0.9062rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sand-faint);line-height:1.45;margin-top:7px}

/* ---- hero product: no card. The bottles stand on the dark ground, side-lit,
   inside a slowly turning seal ring with embers rising off the base. ---- */
.home-night .hero__card{background:none;border:0;box-shadow:none;padding:34px 12px 26px;
  position:relative;z-index:3}
.home-night .hero__card img{position:relative;z-index:3;
  filter:drop-shadow(-26px 20px 26px rgba(0,0,0,.55)) drop-shadow(16px -8px 20px rgba(240,190,98,.18))}
/* The seal is an <svg>, not a rotated <span>. A rotated square box reports a
   bounding rect up to 1.41x its width, and at 390 and 768 that pushed a
   decorative hairline past the viewport edge at certain points in the turn.
   Rotating a <circle> inside a fixed viewBox moves nothing but the dashes. */
.home-night .hero__ring{position:absolute;left:50%;top:50%;width:min(500px,116%);
  aspect-ratio:1;transform:translate(-50%,-50%);z-index:0;pointer-events:none;overflow:visible}
.home-night .hero__ring circle{fill:none;stroke-width:1;transform-box:fill-box;
  transform-origin:50% 50%}
/* r is bounded on purpose. getBoundingClientRect on a transformed SVG shape
   returns the rotated bounding BOX of the untransformed one, so a turning
   circle reports up to 1.41x its real width even though the painted circle is
   rotation-invariant. r=70 of a 100 viewBox keeps that reported box inside the
   svg at every angle: 70 * 1.41 = 99. The two outer rings only scale (1.12
   max on r=82) or fade, which cannot grow past the box either. */
.home-night .hero__ring-seal{stroke:rgba(240,190,98,.4);stroke-dasharray:2.4 6.8}
.home-night .hero__ring-p1{stroke:rgba(240,190,98,.2)}
.home-night .hero__ring-p2{stroke:rgba(224,129,74,.22)}
.home-night .hero__ember{position:absolute;left:50%;bottom:5%;width:min(430px,98%);height:150px;
  transform:translateX(-50%);z-index:1;pointer-events:none}
.home-night .hero__ember::before{content:"";position:absolute;inset:0;
  background:radial-gradient(58% 92% at 50% 100%,rgba(224,129,74,.5),rgba(163,60,28,.18) 46%,transparent 72%);
  filter:blur(15px)}
.home-night .hero__ember::after{content:"";position:absolute;left:12%;right:12%;bottom:6%;height:180px;
  background:
    radial-gradient(2.5px 2.5px at 11% 90%,rgba(240,190,98,.9),transparent),
    radial-gradient(2px 2px at 33% 97%,rgba(224,129,74,.85),transparent),
    radial-gradient(3px 3px at 57% 88%,rgba(240,190,98,.75),transparent),
    radial-gradient(2px 2px at 76% 98%,rgba(240,190,98,.8),transparent),
    radial-gradient(2.5px 2.5px at 91% 85%,rgba(224,129,74,.7),transparent)}
.home-night .hero__tag{position:relative;z-index:3;color:var(--sand-faint);
  font-family:var(--mono);font-size:0.9062rem;letter-spacing:.13em}
.home-night .pricefloat{z-index:4;border-radius:var(--cut);border:1px solid var(--night-line);
  background:linear-gradient(160deg,#362618,#1e1610);
  box-shadow:0 26px 52px -22px rgba(0,0,0,.85)}
.home-night .pricefloat b{color:var(--gold);font-weight:600}
.home-night .pricefloat i{color:var(--sand-dim)}
.home-night .pricefloat u{color:var(--gold);border-top-color:var(--night-line-2);
  font-family:var(--mono);font-size:0.9062rem;letter-spacing:.1em}
.home-night .floaty--tr{top:-4px;right:-14px}
.home-night .floaty{z-index:4;border-radius:var(--cut-sm);border:1px solid var(--night-line);
  border-left:2px solid var(--gold);background:linear-gradient(160deg,#362618,#2a1e14);
  color:var(--sand);box-shadow:0 22px 44px -20px rgba(0,0,0,.85)}
.home-night .floaty small{color:var(--gold);font-family:var(--mono);font-size:0.9062rem;
  letter-spacing:.1em}

/* ---- the trust strip, and the faceted seam that ends the hero ---- */
.home-night .trust{background:var(--night-2);border-block:1px solid var(--night-line);
  position:relative}
.home-night .trust::before{content:"";position:absolute;left:0;right:0;top:-25px;height:26px;
  background:var(--night-2);pointer-events:none;
  clip-path:polygon(0 100%,3% 0,6% 100%,9% 0,12% 100%,15% 0,18% 100%,21% 0,24% 100%,27% 0,30% 100%,33% 0,36% 100%,39% 0,42% 100%,45% 0,48% 100%,51% 0,54% 100%,57% 0,60% 100%,63% 0,66% 100%,69% 0,72% 100%,75% 0,78% 100%,81% 0,84% 100%,87% 0,90% 100%,93% 0,96% 100%,99% 0,100% 100%)}
.home-night .trust__row{gap:14px 26px;padding-block:26px}
.home-night .trust__row figure{background:rgba(247,240,228,.04);
  border:1px solid var(--night-line-2);border-radius:var(--r-pill);padding:7px 17px 7px 7px;gap:11px}
.home-night .trust__row img{height:34px;background:rgba(247,240,228,.94);border-radius:50%;padding:3px}
.home-night .trust__row figcaption{font-family:var(--mono);font-size:0.9062rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sand-dim);font-weight:400;max-width:132px;line-height:1.45}

/* ---- MOTION ------------------------------------------------------------
   Three layers: a short entrance stagger down the copy column, an ambient
   loop around the product (ring turning, inner rings pulsing outward, ember
   bloom breathing, sparks rising), and one accent -- a shine crossing the
   CTA. Transform and opacity only. The H1 is excluded from the entrance
   because it is the LCP text, and the <img> is never animated because it is
   the preloaded LCP image on a phone.
   ---------------------------------------------------------------------- */
@keyframes btRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes btFade{from{opacity:0}to{opacity:1}}
@keyframes btSeal{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes btPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:.28}}
@keyframes btGlowRing{0%,100%{opacity:.4}50%{opacity:.95}}
@keyframes btBloom{0%,100%{opacity:.42;transform:scaleY(.94)}50%{opacity:.95;transform:scaleY(1.07)}}
@keyframes btSparks{0%{opacity:0;transform:translateY(14px)}
  20%{opacity:1}100%{opacity:0;transform:translateY(-118px)}}
@keyframes btSettle{0%{opacity:0;transform:translateY(-16px) scale(.9)}
  64%{opacity:1;transform:translateY(3px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes btShine{0%{transform:translateX(0) skewX(-18deg)}
  20%,100%{transform:translateX(640px) skewX(-18deg)}}

.home-night .hero__copy>.pill,.home-night .hero__copy>.answer,
.home-night .hero__copy>.hero__sub,.home-night .hero__copy>.factpills,
.home-night .hero__copy>.hero__rating,.home-night .hero__copy>.hero__cta,
.home-night .hero__copy>.ticks,.home-night .hero__copy>.pay,
.home-night .hero__copy>.figures{animation:btRise .6s cubic-bezier(.22,.8,.3,1) both}
.home-night .hero__copy>.pill{animation-delay:.04s}
.home-night .hero__copy>.answer{animation-delay:.16s}
.home-night .hero__copy>.hero__sub{animation-delay:.24s}
.home-night .hero__copy>.factpills{animation-delay:.32s}
.home-night .hero__copy>.hero__rating{animation-delay:.38s}
.home-night .hero__copy>.hero__cta{animation-delay:.44s}
.home-night .hero__copy>.ticks{animation-delay:.5s}
.home-night .hero__copy>.pay{animation-delay:.56s}
.home-night .hero__copy>.figures{animation-delay:.62s}
.home-night .hero__tag{animation:btRise .6s cubic-bezier(.22,.8,.3,1) .5s both}
.home-night .pricefloat{animation:btRise .66s cubic-bezier(.22,.8,.3,1) .6s both}
.home-night .floaty{animation:btSettle .8s cubic-bezier(.3,1.3,.5,1) .86s both}
.home-night .hero__ring{animation:btFade 1.1s ease-out .3s both}
.home-night .hero__ring-seal{animation:btSeal 54s linear infinite}
.home-night .hero__ring-p1{animation:btGlowRing 7.2s ease-in-out infinite}
.home-night .hero__ring-p2{animation:btPulse 5.6s ease-in-out .9s infinite}
.home-night .hero__ember{animation:btFade 1.4s ease-out .45s both}
.home-night .hero__ember::before{animation:btBloom 6.8s ease-in-out infinite}
.home-night .hero__ember::after{animation:btSparks 7.6s ease-in-out 1.2s infinite}
/* the pair has to sit on one line the way the reference's does. At the
   house .btn--lg size they measured 589px in a 565px column and wrapped. */
.home-night .hero__cta{gap:12px;margin-top:10px}
.home-night .hero__cta .btn--lg{padding:16px 25px;font-size:1rem}
.home-night .hero__cta .btn--cta::after{content:"";position:absolute;top:0;bottom:0;left:-46%;
  width:36%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(0) skewX(-18deg);
  animation:btShine 6.6s cubic-bezier(.4,0,.2,1) 2s infinite}

@media(prefers-reduced-motion:reduce){
  .home-night .hero__copy>.pill,.home-night .hero__copy>.answer,
  .home-night .hero__copy>.hero__sub,.home-night .hero__copy>.factpills,
  .home-night .hero__copy>.hero__rating,.home-night .hero__copy>.hero__cta,
  .home-night .hero__copy>.ticks,.home-night .hero__copy>.pay,
  .home-night .hero__copy>.figures,.home-night .hero__tag,
  .home-night .pricefloat,.home-night .floaty,
  .home-night .hero__ember::before,.home-night .hero__ember::after,
  .home-night .hero__ring circle{
    animation:none!important;opacity:1!important;transform:none!important}
  .home-night .hero__ring{animation:none!important;opacity:1!important;
    transform:translate(-50%,-50%)!important}
  .home-night .hero__ember{animation:none!important;opacity:1!important;
    transform:translateX(-50%)!important}
  .home-night .hero__cta .btn--cta::after{display:none;animation:none!important}
}

@media(max-width:1024px){
  .home-night .hero__grid{gap:38px;padding-block:40px 60px}
}
@media(max-width:920px){
  .home-night .hero__grid{grid-template-columns:1fr;gap:16px;padding-block:24px 44px}
  .home-night .hero__card{padding:12px 8px 10px}
  .home-night .hero__tag{margin-top:8px}
  .home-night .hero__ember{height:112px;width:min(300px,92%);bottom:4%}
  /* over a 326px-wide jar group the floating price card covered a whole
     jar and the lot line behind it, so on a phone it lands under the
     shot as a static faceted card instead. */
  .home-night .pricefloat{position:static;display:inline-block;margin-top:10px;
    min-width:0;padding:11px 17px 12px;animation-delay:.48s}
  .home-night .pricefloat b{font-size:1.7rem}
  .home-night .pricefloat u{margin-top:7px;padding-top:7px}
  .home-night .hero#hero .answer{padding-left:16px}
  .home-night .figures div{padding:2px 12px}
  .home-night .figures b{font-size:1.6rem}
}
@media(max-width:575px){
  .home-night .hero .factpills li{font-size:0.9062rem;padding:6px 12px;letter-spacing:.07em}
  .home-night .trust__row figcaption{max-width:118px}
}

/*!HOME-CRITICAL-END*/


/* ---- hero motif -- ember-rise ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:linear-gradient(178deg,#ffffff,#f2e1d8 46%,#e7caba)}.hero__media::before{content:'';position:absolute;inset:auto 18% 4% 18%;height:58%;background:radial-gradient(60% 100% at 50% 100%,rgba(180,90,40,0.55),transparent 70%);filter:blur(12px);animation:btEmber 6.5s ease-in-out infinite;z-index:1}@keyframes btEmber{0%,100%{opacity:.35;transform:translateY(6px)}50%{opacity:.8;transform:translateY(-10px)}}
@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 hero: the buy button belongs on the first screen ---------------
   Measured at 1440x900 before this block: the hero CTA sat at y=1203, which
   is 303px below the fold, because the H1 ran to SIX lines in a 557px column
   and the four tick rows stood between the quick answer and the buttons.

   Desktop only. The phone order is composed separately at max-width:920 with
   display:contents and is left exactly as it was; this reorders the DESKTOP
   column to eyebrow / headline / quick answer / BUTTONS / rating / payment
   line / evidence.

   .pill needs align-self or the flex column stretches a pill-shaped chip to
   the full column width. Geometry, so it lives above the critical marker and
   the site is rebuilt -- a restamp alone would leave 32 pages with the old
   copy inlined. */
@media(min-width:921px){
  #hero .hero__grid{grid-template-columns:1.18fr .82fr;gap:44px;padding-block:38px 56px}
  #hero .hero__copy{display:flex;flex-direction:column}
  #hero .hero__copy>.pill{order:1;align-self:flex-start}
  #hero .hero__copy>h1{order:2}
  #hero .hero__copy>.answer{order:3;border-left:2px solid var(--ember-line);padding-left:20px}
  #hero .hero__copy>.hero__cta{order:4;margin-top:16px}
  #hero .hero__copy>.hero__rating{order:5}
  #hero .hero__copy>.pay{order:6}
  #hero .hero__copy>.ticks{order:7;margin-top:28px}
  #hero .hero__copy>.factpills{order:8}
  #hero .hero__copy>.figures{order:9}
  #hero h1{font-size:clamp(2.1rem,3.25vw,3rem)}
  /* 34px of side padding put the pair at 647px in a 635px column, so the
     secondary button wrapped under the primary and pushed the payment line
     off the first screen. 26px lands the pair at 615px: one row, two
     weights, and the payment line comes up with it. */
  #hero .hero__cta .btn--lg{padding-left:26px;padding-right:26px}
}
/* The recommended tier carries a full-width ribbon bar across its top edge
   instead of a floating pill, so it needs the room. The raise and the extra
   top padding are equal and opposite: the card's top edge lifts 16px, its
   content starts at the same y as before, and the Add To Cart baseline the
   three cards share is unchanged. Measured after: all three buttons at the
   same offset. */
body:has(#hero) .tier--feature{padding-top:50px}
@media(min-width:921px){body:has(#hero) .tier--feature{margin-top:-16px}}
/* Dashed separators between the feature rows. Every tier has exactly four
   rows, so the 8px this adds per row moves all three cards by the same
   amount and the shared button baseline survives. */
body:has(#hero) .tier__rows li{padding-bottom:7px;border-bottom:1px dashed rgba(36,26,18,.17)}
body:has(#hero) .tier__rows li:last-child{padding-bottom:0;border-bottom:0}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---- 9. SECTIONS --------------------------------------------------------- */
.sec{padding-block:72px}
.sec--tight{padding-block:48px}
.sec--tint{background:var(--paper-tint)}
.sec--deep{background:var(--deep);color:var(--deep-ink)}
.sec--deep h2,.sec--deep h3{color:#fff}
.sec--deep .eyebrow{color:var(--amber)}
.sec--deep .eyebrow::before{background:var(--amber)}
.sec--deep p{color:var(--deep-ink)}
.sec--deep a{color:var(--amber)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec--center .eyebrow{justify-content:center}
.sec__head{margin-bottom:34px;max-width:var(--measure)}
.sec__head h2{margin-bottom:.3em}
.lead{font-size:1.09rem;color:var(--muted);margin:0}
.note{font-size:0.9062rem;color:var(--faint)}

/* ---- 10. 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:920px){.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: tinted fill, soft shadow, generous radius */
.card{background:var(--paper-card);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:26px 26px 22px;box-shadow:var(--shadow-sm)}
.sec--tint .card{background:#fff}
.card h3{margin-bottom:.42em}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card .ic{width:50px;height:50px;border-radius:14px;background:var(--amber-soft);
  border:1px solid var(--amber-line);display:grid;place-items:center;margin-bottom:16px}
.card .ic img{width:30px;height:30px;object-fit:contain}
.card--num{counter-increment:cn;position:relative;padding-top:30px}
.gridnum{counter-reset:cn}
.card--num::before{content:counter(cn,decimal-leading-zero);position:absolute;top:18px;
  right:24px;font-family:var(--display);font-size:2.1rem;line-height:1;color:var(--amber);
  opacity:.65}

/* ---- 11. SPLIT / STEPS / BAND -------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.split--rev{direction:ltr}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:26px}}
.split__media img{width:100%;border-radius:var(--r);border:1px solid var(--line);
  box-shadow:var(--shadow-sm)}
.split h2,.split h3{margin-top:0}

.steps{display:grid;gap:20px;counter-reset:st}
.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps:not(.steps--4){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:920px){.steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.steps,.steps--4{grid-template-columns:1fr}}
.step{counter-increment:st;background:var(--paper-card);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm)}
.step__n{width:42px;height:42px;border-radius:50%;background:var(--ember);color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;
  font-size:1.18rem;margin-bottom:14px}
.step__n::before{content:counter(st)}
.step h3{margin-bottom:.4em}
.step p:last-child{margin-bottom:0}

.band{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.band img{width:100%}
.band__cap{padding:16px 22px;background:var(--paper-card);font-size:.88rem;color:var(--muted)}

/* ---- 12. SHOTS (never a bare image row) ---------------------------------- */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.shots--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.shots--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.shots,.shots--3{grid-template-columns:1fr}}
.shots figure{margin:0;background:var(--paper-card);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.shots img{width:100%}
.shots figcaption{padding:18px 20px 20px;font-size:0.9062rem;color:var(--muted)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.06rem;
  color:var(--ink);margin-bottom:.4em}
.shots--tall img{object-fit:cover;max-height:430px}

/* ---- 13. INGREDIENTS ----------------------------------------------------- */
.ing{display:grid;gap:24px}
.ingcard{background:var(--paper-card);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm)}
.ingcard h3{margin-bottom:.25em}
.ingcard .amt{display:inline-block;background:var(--amber-soft);border:1px solid var(--amber-line);
  color:var(--amber-dk);border-radius:var(--r-pill);padding:4px 13px;font-size:0.9062rem;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px}
.ingcard .src{font-size:0.9062rem;color:var(--faint);margin:0}
.ingthumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:760px){.ingthumbs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ingthumbs figure{margin:0;text-align:center}
.ingthumbs img{width:100%;border-radius:var(--r);border:1px solid var(--line)}
.ingthumbs figcaption{margin-top:10px;font-size:0.9062rem;font-weight:700;color:var(--ink)}
.ingthumbs figcaption span{display:block;font-weight:500;color:var(--faint);font-size:0.9062rem}

/* the label panel */
.facts{border:2px solid var(--ink);border-radius:var(--r-sm);background:#fff;
  padding:20px 22px;font-family:var(--sans);max-width:460px}
.facts h3{font-family:var(--display);font-size:1.7rem;margin:0 0 6px;
  border-bottom:8px solid var(--ink);padding-bottom:6px}
.facts .sv{font-size:.88rem;border-bottom:1px solid var(--ink);padding:4px 0}
.facttab{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:6px}
.facttab th,.facttab td{text-align:left;padding:5px 0;border-bottom:1px solid var(--line)}
.facttab td:last-child,.facttab th:last-child{text-align:right}
.facttab tr.blend td{font-weight:800;border-top:2px solid var(--ink)}
.facts .fn{font-size:0.9062rem;color:var(--muted);margin:10px 0 0}

/* ---- 14. PRICING: this site's signature component ------------------------ */
.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  align-items:start}
.tier{position:relative;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:34px 24px 26px;text-align:center;
  box-shadow:var(--shadow-sm)}
.sec--tint .tier{background:#fff}
.tier--feature{border-color:var(--ember);box-shadow:var(--shadow-lift);
  background:linear-gradient(180deg,var(--ember-tint),var(--paper-card) 46%)}
.tier__flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--ember);color:#fff;border-radius:var(--r-pill);padding:6px 18px;
  font-size:0.8438rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap}
.tier__qty{font-size:0.9062rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ember-dk);margin-bottom:4px}
.tier__supply{font-size:0.8438rem;color:var(--faint);margin-bottom:14px}
.tier__img{max-width:190px;margin:0 auto 14px}
.tier__price{font-family:var(--display);font-size:2.9rem;line-height:1;color:var(--ink)}
.tier__price sup{font-size:.42em;top:-.72em;font-weight:600}
.tier__per{font-size:0.9062rem;color:var(--faint);margin-bottom:12px}
.tier__day{display:inline-block;background:var(--amber-soft);border:1px solid var(--amber-line);
  color:var(--amber-dk);border-radius:var(--r-pill);padding:5px 14px;font-size:0.9062rem;
  font-weight:800;margin-bottom:16px}
.tier__rows{list-style:none;padding:0;margin:0 0 18px;text-align:left;font-size:.88rem}
.tier__rows li{display:flex;gap:9px;align-items:flex-start;margin-bottom:8px;color:var(--muted)}
.tier__rows .y,.tier__rows .n{flex:0 0 19px;height:19px;border-radius:50%;display:grid;
  place-items:center;font-size:.64rem;font-weight:800;margin-top:4px}
.tier__rows .y{background:var(--ember);color:#fff}
.tier__rows .n{background:var(--paper-deep);color:var(--faint)}
.tier__total{border-top:1px solid var(--line-soft);padding-top:14px;margin-bottom:14px;
  font-size:.92rem;color:var(--muted)}
.tier__total .was{text-decoration:line-through;color:var(--faint);margin-right:8px}
.tier__total .now{font-weight:800;color:var(--ink);font-size:1.1rem}
.tier__total .ship{display:block;font-size:0.9062rem;color:var(--faint);margin-top:4px}
@media(max-width:920px){
  .pricing{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  .pricing .tier:nth-child(1){order:3}
  .pricing .tier:nth-child(2){order:1}
  .pricing .tier:nth-child(3){order:2}
  .tier--feature{transform:none}
}

.guarantee{display:grid;grid-template-columns:168px minmax(0,1fr);gap:28px;
  align-items:center;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm)}
@media(max-width:640px){.guarantee{grid-template-columns:1fr;text-align:center;
  justify-items:center}}
.gseal{width:150px;height:150px;border-radius:50%;border:2px dashed var(--ember-line);
  display:grid;place-items:center;padding:12px}
.gseal img{width:100%;height:auto}

/* ---- 15. STATS / REVIEWS ------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stats div b{display:block;font-family:var(--display);font-size:2.5rem;line-height:1;
  color:var(--amber)}
.stats div span{display:block;margin-top:8px;font-size:0.9062rem;color:var(--deep-ink)}
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:860px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.tgrid{grid-template-columns:1fr}}
.tcard{background:var(--paper-card);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow-sm)}
.tcard .rs{color:var(--amber-dk);letter-spacing:2px;font-size:.95rem}
.tcard blockquote{margin:10px 0 12px;font-family:var(--display);font-size:1.1rem;
  color:var(--ink);line-height:1.38}
.tcard cite{font-style:normal;font-size:0.8438rem;color:var(--faint);font-weight:700}
.ratebars{display:grid;gap:8px;margin:0 0 1.1em;padding:0;list-style:none}
.ratebars li{display:grid;grid-template-columns:44px 1fr 46px;gap:12px;align-items:center;
  font-size:1.062rem;color:var(--muted)}
.ratebars .bar{height:10px;border-radius:5px;background:var(--paper-deep);overflow:hidden}
.ratebars .bar i{display:block;height:100%;background:var(--amber)}

/* ---- 16. FAQ ------------------------------------------------------------- */
.faq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--paper-card)}
.faq details{border-top:1px solid var(--line-soft)}
.faq details:first-child{border-top:0}
.faq summary{cursor:pointer;list-style:none;padding:17px 22px;font-weight:800;
  color:var(--ink);font-size:1rem;display:flex;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--ember);font-weight:800;
  font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq__b{padding:0 22px 18px;font-size:.95rem;color:var(--muted)}
.faq__b p:last-child{margin-bottom:0}

/* ---- 17. CALLOUTS / ALERTS / TABLES -------------------------------------- */
.callout{background:var(--amber-soft);border:1px solid var(--amber-line);
  border-left:4px solid var(--amber);border-radius:var(--r-sm);padding:20px 24px;
  margin:0 0 1.2em;font-size:.96rem}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--ember-tint);border:1px solid var(--ember-line);
  border-left:4px solid var(--ember);border-radius:var(--r-sm);padding:20px 24px;
  margin:0 0 1.2em;font-size:.96rem}
.alert p:last-child{margin-bottom:0}
.pullquote{font-family:var(--display);font-size:1.32rem;line-height:1.4;color:var(--ink);
  border-left:4px solid var(--amber);padding:6px 0 6px 22px;margin:0 0 1.3em}
.flag{display:inline-block;background:var(--paper-deep);border-radius:6px;padding:2px 9px;
  font-size:0.8438rem;font-weight:800;color:var(--muted)}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper-card);margin:0 0 1.3em}
table.dtable{width:100%;border-collapse:collapse;font-size:1rem}
.dtable th,.dtable td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.dtable thead th{background:var(--paper-tint);font-weight:800;color:var(--ink);
  font-size:0.9062rem;letter-spacing:.03em;white-space:nowrap}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b{color:var(--ink)}

/* ---- 18. FORMS ----------------------------------------------------------- */
.formcard{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px;box-shadow:var(--shadow-sm)}
.form{display:grid;gap:15px}
.form label{font-size:0.9062rem;font-weight:800;color:var(--ink);display:block;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:1rem;
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink)}
.form textarea{min-height:130px;resize:vertical}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:600px){.form .row2{grid-template-columns:1fr}}

/* ---- 19. TRUST STRIP / SEAL WALL ----------------------------------------- */
.trust{background:var(--paper-tint);border-block:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:16px 38px;padding-block:22px}
.trust__row figure{margin:0;display:flex;align-items:center;gap:11px}
.trust__row img{height:44px;width:auto}
.trust__row figcaption{font-size:0.9062rem;font-weight:700;color:var(--muted);max-width:150px;
  line-height:1.3}
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media(max-width:860px){.badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}}
.badgewall figure{margin:0;text-align:center;background:var(--paper-card);
  border:1px solid var(--line-soft);border-radius:var(--r);padding:20px;
  box-shadow:var(--shadow-sm)}
.badgewall img{margin:0 auto 12px;height:64px;width:auto}
.badgewall figcaption{font-size:0.8438rem;color:var(--muted)}
.badgewall figcaption b{display:block;color:var(--ink);margin-bottom:5px;font-size:.92rem}

/* ---- 20. FINAL CTA ------------------------------------------------------- */
.final{background:var(--deep);color:var(--deep-ink);border-radius:var(--r);
  padding:40px 38px;text-align:center}
.final h2{color:#fff}
.final p{color:var(--deep-ink)}
.final--media{display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;
  text-align:left;align-items:center}
@media(max-width:760px){.final--media{grid-template-columns:1fr;text-align:center;
  padding:30px 24px}}
.final--media .final__img img{width:100%;height:auto;border-radius:var(--r-sm)}
.final__price{font-weight:800;color:#fff;font-size:1.04rem}
.final .btn--cta{background:var(--amber);color:var(--deep)}
.final .btn--cta:hover{background:#fff;color:var(--deep)}

/* ---- 21. RELATED / BYLINE / REFS / CRUMBS -------------------------------- */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;text-align:left}
@media(max-width:820px){.rel{grid-template-columns:1fr}}
.rel a{display:block;background:var(--paper-card);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:22px;text-decoration:none;box-shadow:var(--shadow-sm);
  transition:transform .16s ease,box-shadow .16s ease}
.rel a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rel a b{display:block;font-family:var(--display);font-size:1.1rem;color:var(--ink);
  margin-bottom:.35em}
.rel a span{font-size:.88rem;color:var(--muted)}

.byline{display:grid;grid-template-columns:78px minmax(0,1fr);gap:20px;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;margin-top:30px;box-shadow:var(--shadow-sm)}
@media(max-width:600px){.byline{grid-template-columns:1fr}}
.byline img{width:100%;height:auto;border-radius:var(--r-sm)}
.byline b{font-size:1rem;color:var(--ink);display:block;margin-bottom:.45em}
.byline p{font-size:0.9062rem;color:var(--muted);margin:0}

.refs ol{padding-left:1.3em;font-size:.88rem;color:var(--muted)}
.refs li{margin-bottom:.75em}
.refs a{word-break:break-word}

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

/* ---- 22. FOOTER: three columns plus a price-ladder recap ----------------- */
footer{background:var(--deep);color:var(--deep-ink);padding-block:0 0;margin-top:0}
.fladder{background:var(--deep-2);border-bottom:1px solid rgba(255,255,255,.09)}
.fladder__row{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,150px));
  gap:20px;align-items:center;padding-block:24px}
@media(max-width:860px){.fladder__row{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fladder__row{grid-template-columns:1fr}}
.fladder h4{color:#fff;margin:0 0 4px;font-family:var(--display);font-size:1.15rem}
.fladder p{margin:0;font-size:1.062rem;color:var(--deep-ink)}
.fladder__pk{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-sm);padding:12px 14px;text-align:center}
.fladder__pk b{display:block;color:var(--amber);font-family:var(--display);font-size:1.5rem;
  line-height:1}
.fladder__pk span{display:block;font-size:.72rem;color:var(--deep-ink);margin-top:5px}

.fgrid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:38px;padding-block:44px 30px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr;gap:26px}}
.fgrid h4{color:#fff;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:14px}
.fgrid ul{list-style:none;padding:0;margin:0;columns:2;column-gap:22px}
.fgrid li{margin-bottom:8px;break-inside:avoid}
@media(max-width:560px){.fgrid ul{columns:1}}
.fgrid a{color:var(--deep-ink);text-decoration:none;font-size:.88rem}
.fgrid a:hover{color:var(--amber)}
.fbrand{font-family:var(--display);font-weight:800;font-size:1.6rem;color:#fff;
  margin-bottom:10px;line-height:1}
.fbrand span{color:var(--amber)}
.fgrid p{font-size:1.062rem;color:var(--deep-ink)}
.fbadges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.fbadges img{height:38px;width:auto;background:#fff;border-radius:8px;padding:3px}
.fpay{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.09);padding-block:20px}
.fpay img{height:26px;width:auto}
.fpay span{font-size:0.9062rem;color:var(--deep-ink)}
.disc{border-top:1px solid rgba(255,255,255,.09);padding-block:24px 34px;
  font-size:0.9062rem;color:var(--deep-ink)}
.disc p{font-size:1.062rem;color:var(--deep-ink);margin-bottom:.9em}
.disc b{color:#fff}
.disc .copy{color:var(--deep-ink);opacity:.75;margin-bottom:0}

/* ---- 23. BLOG ------------------------------------------------------------ */
.article{max-width:724px;margin-inline:auto}
.article h2{scroll-margin-top:132px;margin-top:1.5em}
.article h3{margin-top:1.3em}
.article figure{margin:1.6em 0;background:var(--paper-card);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.article figure img{width:100%}
.article figcaption{padding:14px 18px;font-size:0.9062rem;color:var(--muted)}
.article figure.portrait{max-width:var(--figw,440px);margin-inline:auto}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:0.9062rem;color:var(--faint);
  border-block:1px solid var(--line);padding-block:12px;margin-bottom:26px}
.postmeta b{color:var(--ink)}
.toc{background:var(--paper-tint);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 26px;margin-bottom:30px}
.toc>b,.toc h2{display:block;font-family:var(--sans);font-size:.74rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ember-dk);margin:0 0 10px}
.postmeta .sep{opacity:.5}
.toc ol{margin:0;padding-left:1.25em;font-size:.93rem}
.toc li{margin-bottom:.4em}
.keypoints{background:var(--ember-tint);border:1px solid var(--ember-line);
  border-left:4px solid var(--ember);border-radius:var(--r-sm);padding:20px 24px;
  margin-bottom:28px}
.keypoints>b{display:block;font-size:0.8438rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember-dk);margin-bottom:10px}
.keypoints ul{margin:0;padding-left:1.15em;font-size:.94rem}
.keypoints li b{color:var(--ember-dk)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:900px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}
.posts article{background:var(--paper-card);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;
  flex-direction:column}
.posts img{width:100%}
.posts .pb{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1 1 auto}
.posts h3{font-size:1.14rem;margin-bottom:.4em}
.posts h3 a{color:var(--ink);text-decoration:none}
.posts h3 a:hover{color:var(--ember-dk)}
.posts p{font-size:1.062rem;color:var(--muted);flex:1 1 auto}
.posts .pm{font-size:.78rem;color:var(--faint);margin:0}
/* the closing CTA reused mid-article: same component, narrower column */
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;padding:30px 28px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.55rem;line-height:1.22;margin-top:0}
/* The scoped .article rule above is (0,2,0) and the base .final--media stack at
   760px is only (0,1,0), so without this the CTA kept a 168px image column on a
   phone and squeezed the copy into an 83px ribbon 1,028px tall. Pitfall 24. */
@media(max-width:760px){
  .article .final--media{grid-template-columns:1fr;text-align:center;padding:26px 20px;gap:18px}
  .article .final--media .final__img img{max-width:168px;margin-inline:auto}
  .article .final--media h2{font-size:1.32rem}
}
.final p,.article .final p{color:var(--deep-ink)}
.final__price,.article .final .final__price{color:#fff}

/* ---- 24. MOTION: the price-row count-up --------------------------------- */
/* The only motion on this site. Targets read their value from the printed
   number and restore the exact original string when they finish, so the copy
   stays the single source of truth. */
[data-count]{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---- 25. SINGLE-COLUMN MEASURE ------------------------------------------ */
/* One measure for single-column content, centred; multi-column components keep
   the full wrap. px, not ch: ch gives every font size a different edge. */
.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 > .answer,
.sec > .wrap > blockquote{max-width:var(--measure);margin-inline:auto}
.sec > .wrap > .tablewrap,.sec > .wrap > .faq,.sec > .wrap > .steps,
.sec > .wrap > .keyfacts,.sec > .wrap > .guarantee,.sec > .wrap > .formcard{
  max-width:var(--measure-wide);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 > .answer,
  .sec > .wrap > blockquote,.sec > .wrap > .tablewrap,.sec > .wrap > .faq,
  .sec > .wrap > .steps,.sec > .wrap > .keyfacts,.sec > .wrap > .guarantee,
  .sec > .wrap > .formcard{max-width:100%}
}

/* ---- 26. NAV SHEDDING --------------------------------------------------- */
/* The row must shed, never wrap. Measure .nav__row height at 1180/1260/1360/1500;
   it has to be identical at all four. */
@media(max-width:1440px){.menu{gap:18px}.menu a{font-size:.87rem}}
@media(max-width:1320px){.menu{gap:14px}.menu a{font-size:.84rem}}
@media(max-width:1180px){.nav__tel{display:none}}
@media(max-width:1040px){
  .nav__band{justify-content:flex-start;padding-block:13px}
  .burger{display:block}
  .nav__bar{display:none}
  .nav__bar.open{display:block}
  .nav__row{flex-wrap:wrap;padding-block:6px 14px}
  .menu{flex-wrap:wrap;gap:0;width:100%;flex-direction:column}
  .menu li{width:100%;border-bottom:1px solid var(--line-soft)}
  .menu a{display:block;padding:12px 2px;font-size:.95rem;border-bottom:0}
  .nav__price{width:100%;justify-content:space-between;margin-top:12px}
}
@media(max-width:560px){
  .util__item:nth-child(2),.util__item:nth-child(3){display:none}
  .brand{font-size:1.42rem}
}
@media(max-width:430px){
  .buybar__t{font-size:0.9062rem}
  .buybar .btn{padding:10px 15px;font-size:.84rem}
}

/* ---- 27. HOME NIGHT: below the fold -------------------------------------
   The reskin has to survive past the first screen, so the whole home page
   carries the same system: night grounds in three tones, faceted corners,
   small-caps monospace labels, gold numerals, hairline rules instead of soft
   shadows. Scoped to body.home-night; the other 31 pages keep the paper
   treatment. Every colour below was measured against its own ground -- the
   muted/faint tokens are re-pointed on body.home-night above rather than
   left at values chosen for a light page.
   ------------------------------------------------------------------------ */
.home-night .sec{padding-block:84px}
.home-night .sec--tint{background:var(--night-2)}
.home-night .sec--deep{background:linear-gradient(180deg,#1c140c,#100b06);
  border-block:1px solid var(--night-line)}
.home-night .sec--deep p,.home-night .sec--deep li{color:var(--sand-dim)}
.home-night .sec--deep h2,.home-night .sec--deep h3{color:var(--sand)}
.home-night .sec--deep a{color:var(--gold)}
.home-night .sec__head{margin-bottom:40px}
.home-night .sec__head h2,.home-night h2,.home-night h3{color:var(--sand);font-weight:600}
.home-night h4{color:var(--sand)}
.home-night .eyebrow{color:var(--gold);font-family:var(--mono);font-size:0.8438rem;
  font-weight:600;letter-spacing:.2em}
.home-night .eyebrow::before{background:var(--gold);width:28px;height:1px}
.home-night .sec--deep .eyebrow,.home-night .sec--deep .eyebrow::before{color:var(--gold)}
.home-night .lead{color:var(--sand-dim)}
.home-night .note{color:var(--sand-faint)}
.home-night .crumbs{color:var(--sand-faint)}
.home-night .crumbs a{color:var(--sand-dim)}

/* cards, steps, panels: faceted, hairlined, no soft drop shadow */
.home-night .card,.home-night .sec--tint .card,.home-night .step,
.home-night .tcard,.home-night .rel a,.home-night .byline,
.home-night .badgewall figure,.home-night .posts article{
  background:linear-gradient(162deg,#2a1e14,#211811);border:1px solid var(--night-line);
  border-radius:var(--cut);box-shadow:none}
.home-night .card:hover,.home-night .rel a:hover{border-color:var(--gold-dk)}
.home-night .card .ic{background:var(--gold-glow);border:1px solid var(--night-line);
  border-radius:var(--cut-sm)}
.home-night .card--num::before{color:var(--gold);opacity:.55;font-weight:600}
.home-night .step__n{background:var(--gold-glow);border:1px solid var(--night-line);
  color:var(--gold);border-radius:var(--cut-sm);font-weight:600}
.home-night .steps{gap:22px}
.home-night .split__media img{border:1px solid var(--night-line);border-radius:var(--cut);
  box-shadow:none}
.home-night .band{border:1px solid var(--night-line);border-radius:var(--cut)}
.home-night .band__cap{background:var(--night-3);color:var(--sand-dim);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em}
.home-night .shots figure{background:linear-gradient(162deg,#2a1e14,#211811);
  border:1px solid var(--night-line);border-radius:var(--cut);box-shadow:none}
.home-night .shots figcaption{color:var(--sand-dim)}
.home-night .shots figcaption b{color:var(--sand);font-weight:600}
.home-night .keyfacts{background:none;border:1px solid var(--night-line);
  border-radius:var(--cut)}
.home-night .keyfacts dt{background:rgba(247,240,228,.045);color:var(--gold);
  font-family:var(--mono);font-size:1.062rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600}
.home-night .keyfacts dd{color:var(--sand-dim)}
.home-night .keyfacts div{border-top-color:var(--night-line-2)}

/* the price ladder */
.home-night .tier{background:linear-gradient(170deg,#2a1e14,#1d150e);
  border:1px solid var(--night-line);border-radius:var(--cut);box-shadow:none}
.home-night .sec--tint .tier{background:linear-gradient(170deg,#2a1e14,#1d150e)}
.home-night .tier--feature{border-color:var(--gold);
  background:linear-gradient(170deg,#3a2917,#241a11 52%);
  box-shadow:0 30px 70px -30px rgba(240,190,98,.35)}
.home-night .tier__flag{background:var(--rust);color:var(--sand);
  border-radius:var(--r-pill);font-family:var(--mono);font-weight:500;letter-spacing:.1em}
.home-night .tier__qty{color:var(--gold);font-family:var(--mono);letter-spacing:.12em}
.home-night .tier__supply{color:var(--sand-faint);font-family:var(--mono);font-size:0.8438rem;
  letter-spacing:.06em;text-transform:uppercase}
.home-night .tier__price{color:var(--sand);font-weight:600}
.home-night .tier__price sup{color:var(--gold)}
.home-night .tier__per{color:var(--sand-faint)}
.home-night .tier__day{background:var(--gold-glow);border:1px solid var(--night-line);
  color:var(--gold);font-weight:600}
.home-night .tier__rows li{color:var(--sand-dim)}
.home-night .tier__rows .y{background:var(--gold);color:#17100a}
.home-night .tier__rows .n{background:rgba(247,240,228,.08);color:var(--sand-faint)}
.home-night .tier__total{border-top-color:var(--night-line-2);color:var(--sand-dim)}
.home-night .tier__total .was{color:var(--sand-faint)}
.home-night .tier__total .now{color:var(--sand)}
.home-night .tier__total .ship{color:var(--sand-faint)}

/* tables, callouts, FAQ */
.home-night .tablewrap{background:linear-gradient(162deg,#241a11,#1d150e);
  border:1px solid var(--night-line);border-radius:var(--cut)}
.home-night .dtable th,.home-night .dtable td{border-bottom-color:var(--night-line-2);
  color:var(--sand-dim)}
.home-night .dtable thead th{background:rgba(247,240,228,.05);color:var(--gold);
  font-family:var(--mono);font-size:0.9062rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600}
.home-night .dtable td b{color:var(--sand)}
.home-night .callout{background:rgba(240,190,98,.07);border:1px solid var(--night-line);
  border-left:3px solid var(--gold);border-radius:var(--cut-sm);color:var(--sand-dim)}
.home-night .callout p{color:var(--sand-dim)}
.home-night .alert{background:rgba(224,129,74,.09);border:1px solid var(--ember-line);
  border-left:3px solid var(--rust-lt);border-radius:var(--cut-sm)}
.home-night .alert p{color:var(--sand-dim)}
.home-night .pullquote{border-left-color:var(--gold);color:var(--sand)}
.home-night .flag{background:rgba(247,240,228,.08);color:var(--sand-dim);
  font-family:var(--mono);font-size:0.8438rem;letter-spacing:.06em}
.home-night .faq{background:none;border:1px solid var(--night-line);
  border-radius:var(--cut)}
.home-night .faq details{border-top-color:var(--night-line-2);
  background:linear-gradient(162deg,rgba(247,240,228,.03),transparent)}
.home-night .faq summary{color:var(--sand);font-weight:600}
.home-night .faq summary::after{color:var(--gold)}
.home-night .faq__b{color:var(--sand-dim)}

/* reviews and stats */
.home-night .stats div b{color:var(--gold);font-weight:600}
.home-night .stats div span{color:var(--sand-dim);font-family:var(--mono);font-size:0.9062rem;
  letter-spacing:.08em;text-transform:uppercase}
.home-night .tcard .rs{color:var(--gold)}
.home-night .tcard blockquote{color:var(--sand);font-weight:600}
.home-night .tcard cite{color:var(--sand-faint);font-family:var(--mono);font-size:0.8438rem;
  letter-spacing:.05em}
.home-night .ratebars li{color:var(--sand-dim)}
.home-night .ratebars .bar{background:rgba(247,240,228,.09);border-radius:2px}
.home-night .ratebars .bar i{background:var(--gold)}

/* the guarantee seal, built like the reference's dashed medallion */
.home-night .guarantee{background:linear-gradient(162deg,#2a1e14,#211811);
  border:1px solid var(--night-line);border-radius:var(--cut);box-shadow:none}
.home-night .gseal{border:2px dashed rgba(240,190,98,.45);background:var(--gold-glow)}

/* the Supplement Facts panel stays a white specimen card -- that is what a
   label looks like, and on this ground it reads as a lab document. Its own
   colours are re-stated because --ink is cream on this page. */
.home-night .facts{background:#fbf6ea;border:2px solid #17100a;color:#33251a;
  border-radius:var(--cut-sm)}
.home-night .facts h3{color:#17100a;border-bottom-color:#17100a}
.home-night .facts .sv{border-bottom-color:#17100a;color:#33251a}
.home-night .facttab th,.home-night .facttab td{border-bottom-color:#d6c9b2;color:#33251a}
.home-night .facttab tr.blend td{border-top-color:#17100a;color:#17100a}
.home-night .facts .fn{color:#59462f}

/* closing CTA and the related row */
.home-night .final{background:linear-gradient(150deg,#241a11,#120c07);
  border:1px solid var(--night-line);border-radius:var(--cut)}
.home-night .final h2{color:var(--sand)}
.home-night .final p,.home-night .article .final p{color:var(--sand-dim)}
.home-night .final__price,.home-night .article .final .final__price{color:var(--sand)}
.home-night .final .btn--cta{background:linear-gradient(135deg,#f0be62 0%,#c08f33 100%);
  color:#17100a}
.home-night .final .btn--cta:hover{background:linear-gradient(135deg,#f8cd7e 0%,#d3a043 100%);
  color:#17100a}
.home-night .final--media .final__img img{border-radius:var(--cut-sm);
  border:1px solid var(--night-line)}
.home-night .rel a b{color:var(--sand);font-weight:600}
.home-night .rel a span{color:var(--sand-dim)}
.home-night .rel a:hover{box-shadow:0 26px 52px -28px rgba(0,0,0,.9)}
.home-night .byline b{color:var(--sand)}
.home-night .byline p{color:var(--sand-dim)}
.home-night .byline img{border-radius:var(--cut-sm)}
.home-night .refs ol{color:var(--sand-dim)}
.home-night .chips .ck{background:var(--gold-glow);border:1px solid var(--night-line);
  color:var(--gold);border-radius:4px}

/* section images that ship as transparent emblems need a plate to read on a
   near-black ground; photographic scenes do not and are left alone. */
.home-night .shots img[src*="badge"],.home-night .shots img[src*="seal"],
.home-night .shots img[src*="logo"],.home-night .shots img[src*="strip"],
.home-night .shots img[src*="60days"],.home-night .shots img[src*="rgb-gif"]{
  background:#f7f0e4;padding:10px}
/* brand mark: bare construction */
.brand svg.brand__glyph{background:none!important}


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

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that have to share their edges, their image
   slot and their button baseline. The vendor product shots are different
   shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the
   blurbs are different lengths, so without these three rules the images
   render at three sizes and the three CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those
   must keep stating each file's true ratio, or fix_img_dims.py rewrites them
   and CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* 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(102%)}
/* ==== end directional chrome ==== */

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

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

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.badgewall figure,
.tier,
.posts h3 a{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier: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,
.card--pack:hover,
.badgewall figure:hover,
.tier:hover,
.posts h3 a:hover{transform:none}
}
/* ==== end modern surface ==== */

/* ==== 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 SURFACE + ORBIT MOTIF -- burntidedaily.com
   Slot: motif orbit, card radius 20, control radius 14, depth "tight contact
   + wide ambient", ribbon "full-width bar".

   Paint only -- border-radius, box-shadow, background, colour, transform,
   transition, animation. Nothing here moves a box, so this sits below the
   critical marker and needs restamp_assets.py rather than a rebuild.

   Scoped on #hero because .hero is on all 32 pages of this site; #hero and
   .hero__media are on index.html alone. Specificity (1,1,1) beats the
   modern_surface.py block, which re-appends itself AFTER this one on every
   build -- it is beaten on specificity, never on source order.

   The shadow tint is this site's own ink, rgb(36,26,18), never neutral black.
   ========================================================================== */
body:has(#hero){
  --btd-card:20px;
  --btd-ctl:14px;
  --btd-d1:0 1px 2px rgba(36,26,18,.07),0 10px 28px rgba(36,26,18,.10);
  --btd-d2:0 2px 4px rgba(36,26,18,.10),0 18px 40px rgba(36,26,18,.16);
  --btd-d3:0 2px 6px rgba(36,26,18,.12),0 26px 56px rgba(36,26,18,.20);
  --btd-c1:0 1px 2px rgba(151,55,15,.26),0 10px 28px rgba(151,55,15,.26);
  --btd-c2:0 2px 4px rgba(151,55,15,.30),0 18px 40px rgba(151,55,15,.34);
}

/* ---- 1. surfaces: one curve, one depth language ---- */
body:has(#hero) .card,
body:has(#hero) .tier,
body:has(#hero) .step,
body:has(#hero) .keypoints,
body:has(#hero) .callout,
body:has(#hero) .alert,
body:has(#hero) .toc,
body:has(#hero) .faq,
body:has(#hero) .ingcard,
body:has(#hero) .guarantee,
body:has(#hero) .tablewrap,
body:has(#hero) .byline,
body:has(#hero) .posts article,
body:has(#hero) .shots figure,
body:has(#hero) .badgewall figure,
body:has(#hero) .final,
body:has(#hero) .keyfacts,
body:has(#hero) .figures{border-radius:var(--btd-card);box-shadow:var(--btd-d1)}
body:has(#hero) .hero__card{border-radius:26px;box-shadow:var(--btd-d2)}
body:has(#hero) .pricefloat,
body:has(#hero) .floaty{border-radius:var(--btd-ctl);box-shadow:var(--btd-d2)}

/* ---- 2. controls: 14px, one gradient weight and one solid ---- */
body:has(#hero) .btn{border-radius:var(--btd-ctl);
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease}
body:has(#hero) .btn--cta{background-color:#b24011;
  background-image:linear-gradient(135deg,#c44d18 0%,#b24011 54%,#97370f 100%);
  box-shadow:var(--btd-c1);border-color:transparent;color:#fff}
body:has(#hero) .btn--cta:hover{background-color:#bd4715;
  background-image:linear-gradient(135deg,#cf5720 0%,#bd4715 54%,#a33c11 100%);
  box-shadow:var(--btd-c2);transform:translateY(-2px);color:#fff}
body:has(#hero) .btn--ghost{background:var(--paper-card);border-color:var(--ember-line);
  box-shadow:var(--btd-d1)}
body:has(#hero) .btn--ghost:hover{background:var(--ember-tint);box-shadow:var(--btd-d2);
  transform:translateY(-2px)}
/* the closing band is a dark panel: its CTA keeps the amber weight it was
   given for contrast against that ground, as a gradient rather than a flat */
body:has(#hero) .final .btn--cta{background-color:#e6a01a;
  background-image:linear-gradient(135deg,#f3bf4a 0%,#e6a01a 54%,#cf8f12 100%);
  color:var(--deep);box-shadow:0 1px 2px rgba(0,0,0,.30),0 12px 30px rgba(0,0,0,.34)}
body:has(#hero) .final .btn--cta:hover{background-color:#f2b52f;
  background-image:linear-gradient(135deg,#ffd873 0%,#f2b52f 54%,#dd9a16 100%);color:var(--deep)}
body:has(#hero) .btn:focus-visible,
body:has(#hero) a:focus-visible,
body:has(#hero) summary:focus-visible{outline:3px solid var(--ember-dk);outline-offset:3px}

/* ---- 3. a clickable surface answers the pointer ---- */
body:has(#hero) .tier,
body:has(#hero) .rel a,
body:has(#hero) .posts article,
body:has(#hero) .shots figure,
body:has(#hero) .badgewall figure{transition:box-shadow .22s ease,transform .22s ease}
body:has(#hero) .tier:hover,
body:has(#hero) .rel a:hover,
body:has(#hero) .posts article:hover,
body:has(#hero) .shots figure:hover,
body:has(#hero) .badgewall figure:hover{box-shadow:var(--btd-d2);transform:translateY(-2px)}

/* ---- 4. the price row: full-width ribbon bar, warmer recommended tier ---- */
body:has(#hero) .tier--feature{border-color:rgba(189,71,21,.42);box-shadow:var(--btd-d3);
  background:linear-gradient(180deg,#fff3e8 0%,#fffdfa 44%)}
body:has(#hero) .tier--feature:hover{box-shadow:0 2px 6px rgba(36,26,18,.13),
  0 32px 64px rgba(36,26,18,.22)}
body:has(#hero) .tier__flag{top:0;left:0;right:0;transform:none;white-space:normal;
  border-radius:var(--btd-card) var(--btd-card) 0 0;padding:9px 18px;
  background-image:linear-gradient(90deg,#97370f 0%,#c44d18 50%,#97370f 100%);
  box-shadow:0 1px 0 rgba(151,55,15,.35)}
body:has(#hero) .tier__day{box-shadow:0 1px 2px rgba(36,26,18,.06)}

/* ---- 5. the hero motif: orbit -------------------------------------------
   A hairline ring with one bright arc travelling it, one turn every 38
   seconds. It lives on the pseudo-elements of the media COLUMN, never on the
   <img> -- that is the preloaded LCP element. The ring is sized past the
   product card on purpose: a shape sized inside an opaque card renders
   nothing, so this one is 112% of the column and reads as a halo above and
   below the card, with the arc passing behind the jars.
   The arc is ember, not near-white: this hero's ground is cream, so a pale
   "bright" arc measured invisible against it. `from 76deg` puts the arc at
   twelve o'clock at rotation 0, which is the frame a reader with reduced
   motion is left looking at -- at 0deg it sat behind the opaque product card
   and that reader saw no motif at all.
   Transform and opacity only. Keyframe names are new: this sheet already
   owns btBloom, btEmber, btFade, btGlowRing, btPulse, btRise, btSeal,
   btSettle, btShine and btSparks. */
#hero .hero__media::before{content:"";position:absolute;z-index:1;inset:auto;
  left:50%;top:50%;width:min(520px,112%);height:auto;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;filter:none;
  border:1px solid rgba(151,55,15,.18);
  background:radial-gradient(closest-side,rgba(230,160,26,.16),rgba(230,160,26,.05) 60%,transparent 78%);
  animation:btdHalo 16s ease-in-out infinite}
#hero .hero__media::after{content:"";position:absolute;z-index:1;inset:auto;
  left:50%;top:50%;width:min(520px,112%);height:auto;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 76deg,transparent 0 70%,rgba(230,160,26,.35) 74%,
    rgba(189,71,21,.80) 78%,rgba(151,55,15,.55) 81%,transparent 85%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:btdOrbit 38s linear infinite}
@keyframes btdOrbit{from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes btdHalo{0%,100%{opacity:.72}50%{opacity:1}}

@media(prefers-reduced-motion:reduce){
  body:has(#hero) .btn--cta:hover,
  body:has(#hero) .btn--ghost:hover,
  body:has(#hero) .tier:hover,
  body:has(#hero) .rel a:hover,
  body:has(#hero) .posts article:hover,
  body:has(#hero) .shots figure:hover,
  body:has(#hero) .badgewall figure:hover{transform:none}
  #hero .hero__media::before,#hero .hero__media::after{animation:none}
}
/* ==== end home surface + orbit motif ==== */
/*!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 .disc{font-size:16px}
footer .fgrid a{font-size:16px}
footer .fgrid h4{font-size:15px}
footer .fladder__pk span{font-size:16px}
footer .fpay span{font-size:16px}
/* ==== end footer type floor ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}