/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Playfair Display Fallback";src:local("Georgia");font-weight:400;size-adjust:102.36%;ascent-override:105.71%;descent-override:24.52%;line-gap-override:0.00%}
@font-face{font-family:"Playfair Display Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:89.63%;ascent-override:120.71%;descent-override:28.00%;line-gap-override:0.00%}
@font-face{font-family:"Nunito Sans Fallback";src:local("Arial");font-weight:400;size-adjust:101.87%;ascent-override:99.24%;descent-override:34.65%;line-gap-override:0.00%}
@font-face{font-family:"Nunito Sans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:97.82%;ascent-override:103.36%;descent-override:36.09%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   BURN GUMMY - burngummydaily.com
   Component system taken from the memozhoney.com reference: a two-part
   masthead (firm label above the wordmark, contact block opposite) with the
   menu on its own full-width strip beneath it, a record-sheet section header
   with a kicker and a rule, key-fact rows, flat data tables, a bottom dock.
   Nothing amber survives: colour is re-derived from the bottle, whose label
   band samples at rgb 184,37,82 with a pale rose field above it and deep red
   gummies behind the glass.
   Ground is blush cream rather than the reference's cool ash. Radii are
   generous, cards are tinted, edges between sections are curved, and the only
   motion on the site is a curve reveal as a section enters. The hero does not
   animate at all: its headline is the LCP element.
   Type: Playfair Display (editorial serif) + Nunito Sans (humanist body).
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* blush cream ground */
  --paper:      #fffaf5;
  --tint:       #fdf1ec;
  --tint2:      #fbe6e6;
  --card:       #ffffff;
  --ink:        #2c1a20;
  --ink-dk:     #1d0f14;
  --muted:      #6f5760;
  --faint:      #7c6b73;
  --line:       #f2ddd9;
  --line-soft:  #f9ece7;

  /* the label band - the lead colour */
  --berry:      #c62d60;
  --berry-dk:   #a11d4a;
  --berry-dp:   #7b1237;
  --berry-lt:   #fce7ee;
  --berry-line: #f1c2d3;

  /* the gummies behind the glass, for dark bands and the footer */
  --wine:       #6d1327;
  --wine-dk:    #470a19;

  /* the money-back roundel, for guarantees and safety notes */
  --gold:       #9b6a21;
  --gold-lt:    #fdf4e4;
  --gold-line:  #eedcb6;

  --shadow:     0 22px 48px -26px rgba(44,26,32,.40);
  --shadow-sm:  0 10px 26px -18px rgba(44,26,32,.32);
  --ease:       cubic-bezier(.22,1,.36,1);

  /* 24px is the house radius on this site; the curve tokens are larger */
  --r-s: 14px; --r: 24px; --r-l: 34px; --r-xl: 56px;

  --display:'Playfair Display','Playfair Display Fallback',Georgia,'Times New Roman',serif;
  --sans:'Nunito Sans','Nunito Sans Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap: 1180px; --prose: 68ch; --measure: 760px; --measure-wide: 980px;
}

/* ---- 2. RESET / BASE ----------------------------------------------------- */
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:132px}
body{
  margin:0;font-family:var(--sans);font-size:17px;line-height:1.74;
  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(--berry-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.18;letter-spacing:-.005em;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.6vw,3.2rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.26rem;line-height:1.3}
h4{font-size:1.04rem}
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(--berry-lt)}
table{border-collapse:collapse}
section[id]{scroll-margin-top:132px}
:focus-visible{outline:2px solid var(--berry-dk);outline-offset:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.prose{max-width:var(--prose)}
.center{text-align:center}
.center .prose{margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--berry-dk);
  padding:10px 16px;border-radius:var(--r-s);z-index:2000}
.skip:focus{left:12px;top:12px}

/* ---- 3. SHARED ATOMS ----------------------------------------------------- */
.eyebrow{display:inline-block;font-family:var(--sans);font-weight:800;font-size:0.8438rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--berry-dk);margin-bottom:.8rem}
.note{font-size:0.9062rem;color:var(--faint);line-height:1.64}
.lead{font-size:1.16rem;line-height:1.64;color:var(--muted)}
.meta{font-size:0.9062rem;color:var(--faint);letter-spacing:.04em}

.pill{display:inline-flex;align-items:center;gap:8px;background:var(--berry-lt);
  color:var(--berry-dp);border:1px solid var(--berry-line);
  font-family:var(--sans);font-weight:800;font-size:0.8438rem;letter-spacing:.14em;
  text-transform:uppercase;padding:9px 16px;border-radius:999px;margin-bottom:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:800;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;padding:1.04em 1.8em;
  border-radius:var(--r-s);cursor:pointer;border:1px solid transparent;min-height:48px;
  transition:background .2s ease,box-shadow .2s ease,color .2s ease;
  text-decoration:none;line-height:1;text-align:center}
.btn:hover{text-decoration:none}
.btn--cta{background:var(--berry);color:#fff;box-shadow:0 12px 26px -14px rgba(161,29,74,.8)}
.btn--cta:hover{background:var(--berry-dk);color:#fff}
.btn--ghost{background:transparent;color:var(--berry-dp);border-color:var(--berry-line)}
.btn--ghost:hover{background:var(--berry-lt);color:var(--berry-dp)}
.btn--gold{background:var(--gold);color:#241603}
.btn--gold:hover{background:#b3781f;color:#241603}
.btn--dark{background:var(--wine);color:#fff}
.btn--dark:hover{background:var(--wine-dk);color:#fff}
.btn--lg{font-size:.98rem;padding:1.1em 2.1em}
.btn--block{display:flex;width:100%}

.sec{padding:76px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--rose{background:linear-gradient(168deg,var(--tint) 0%,var(--tint2) 100%)}
.sec--tight{padding:52px 0}
.sec__head{max-width:var(--prose);margin-bottom:34px;padding-top:18px;
  border-top:2px solid var(--ink-dk);position:relative}
.sec__head::before{content:"";position:absolute;top:-2px;left:0;width:96px;height:2px;
  background:var(--berry)}
.sec--center .sec__head{margin-inline:auto;text-align:center}
.sec--center .sec__head::before{left:50%;transform:translateX(-48px)}

/* the curved edge between grounds - the site's structural signature */
.sec--curve{border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:-40px;padding-top:98px;z-index:1}
.sec--curve-b{border-radius:0 0 var(--r-xl) var(--r-xl);padding-bottom:98px}
@media(max-width:700px){.sec--curve{border-radius:var(--r-l) var(--r-l) 0 0;margin-top:-26px;padding-top:70px}
  .sec--curve-b{border-radius:0 0 var(--r-l) var(--r-l);padding-bottom:70px}}

/* ---- 4. BRAND BAND + MENU STRIP ------------------------------------------ */
/* The masthead is two full-width bands: the brand band carries the wordmark
   and the order desk, the strip beneath carries the menu. Taking the menu off
   the brand row is what stops a seven-link nav wrapping between 1100 and 1300px
   (pitfalls #16) without having to shed anything. */
.util{background:var(--wine-dk);color:#f0d3da;font-size:.76rem}
.util__row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-block:8px;flex-wrap:wrap}
.util__item b{color:#fff}
.util__tel{color:#f7bccd;font-weight:800;white-space:nowrap}
.util__tel:hover{color:#fff;text-decoration:none}
@media(max-width:900px){.util__row{justify-content:center;text-align:center;font-size:0.9062rem;
    gap:5px 14px;padding-block:7px}
  .util__item:nth-child(2),.util__item:nth-child(3){display:none}}

.nav{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line);transition:box-shadow .3s ease}
.nav--stuck{box-shadow:var(--shadow-sm)}
@media(max-width:920px){
  .nav{transition:transform .28s var(--ease),box-shadow .3s ease;will-change:transform}
  .nav--away{transform:translateY(-100%)}
}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-block:15px;flex-wrap:nowrap}
.brand{display:inline-flex;align-items:center;gap:0;flex:0 1 auto;min-width:0;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand svg{width:40px;height:40px;flex:none;margin-right:12px}
.brand__t{display:block}
.brand__firm{display:block;font-size:.62rem;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint)}
.brand__prod{display:block;font-family:var(--display);font-weight:800;font-size:1.6rem;
  line-height:1.05;color:var(--ink-dk);letter-spacing:-.02em}
.brand__prod span{color:var(--berry)}
.nav__aside{display:flex;align-items:center;gap:20px;flex:none}
.nav__note{max-width:220px;font-size:.71rem;line-height:1.38;color:var(--faint)}
.nav__tel{font-weight:800;font-size:.96rem;color:var(--ink-dk);white-space:nowrap}
.nav__tel:hover{color:var(--berry-dk);text-decoration:none}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-s);
  flex-direction:column;gap:5px;cursor:pointer;padding:11px 10px}
.burger span{width:20px;height:2px;background:var(--ink);display:block;border-radius:2px}

.navstrip{background:var(--tint);border-top:1px solid var(--line-soft)}
.menu{display:flex;align-items:stretch;gap:0;list-style:none;margin:0;padding:0;
  flex-wrap:nowrap}
.menu a{display:block;padding:12px 17px 10px;border-bottom:3px solid transparent;
  font-size:.75rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.menu a:hover{color:var(--ink-dk);border-bottom-color:var(--berry-line);text-decoration:none}
.menu a[aria-current="page"]{color:var(--berry-dp);border-bottom-color:var(--berry)}
@media(max-width:1180px){.menu a{padding:12px 13px 10px;font-size:.72rem;letter-spacing:.08em}}
@media(max-width:1020px){.nav__note{display:none}}
@media(max-width:880px){
  .navstrip{display:none}
  .navstrip.open{display:block;position:absolute;left:0;right:0;top:100%;z-index:59;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);max-height:74vh;overflow:auto}
  .navstrip.open .menu{flex-direction:column;padding:6px 22px}
  .navstrip.open .menu a{padding:14px 0;border-bottom:1px solid var(--line-soft);
    border-left:3px solid transparent;min-height:46px}
  .burger{display:flex}
  .nav{position:sticky}
  .nav__row{padding-block:12px}
  .brand__prod{font-size:1.36rem}
}
@media(max-width:620px){.nav__tel{display:none}}
@media(max-width:430px){.nav__cta{display:none}.brand svg{width:34px;height:34px;margin-right:9px}
  .brand__prod{font-size:1.24rem}.nav__aside{gap:10px}}

/* ---- 5. STICKY BUY BAR (the reference's dock) ---------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--wine-dk);color:#fff;
  transform:translateY(105%);transition:transform .3s var(--ease);
  box-shadow:0 -6px 26px rgba(0,0,0,.24)}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--wrap);margin-inline:auto;padding:11px 22px}
.buybar__t{font-size:.94rem;line-height:1.32}
.buybar__t b{font-family:var(--display);font-size:1.06rem;display:block}
.buybar__t .from{color:#f7bccd;font-weight:800}
.buybar .btn{white-space:nowrap}
@media(max-width:560px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:.92rem}}

/* ---- 6. HERO ------------------------------------------------------------- */
/* Cream ground, curved bottom edge, and no entrance animation of any kind.
   The assigned motion for this site is the curve reveal between sections, and
   the H1 is the LCP element: .anim would start it at opacity 0. */
.hero{background:linear-gradient(176deg,#fffdfa 0%,var(--tint) 100%);position:relative;
  border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl);
  overflow-x:clip}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:start;
  padding-block:54px 76px}
.hero h1{margin-bottom:.4em}
.hero h1 span{color:var(--berry-dk);display:block}
.hero h1 small{display:block;margin-top:.3em;font-family:var(--sans);font-size:.34em;
  font-weight:700;letter-spacing:.02em;line-height:1.35;color:var(--muted)}
@media(max-width:560px){.hero h1 small{font-size:.44em}}
.hero__sub{font-size:1.1rem;color:var(--muted);margin:0 0 20px;max-width:54ch}
.ticks{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-weight:600;font-size:1.062rem}
.ticks .ck{flex:0 0 22px;height:22px;border-radius:50%;background:var(--berry);color:#fff;
  display:grid;place-items:center;font-size:.74rem;margin-top:4px;font-weight:700}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.pay{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.pay img{height:26px;width:auto}
.pay span{font-size:0.9062rem;color:var(--berry-dk);font-weight:700}

.hero__media{position:relative;text-align:center}
.hero__stick{position:relative;display:inline-block}
.hero__card{background:#fff;border:1px solid var(--line);
  border-radius:var(--r-l);padding:22px 26px;box-shadow:var(--shadow);display:inline-block}
.hero__card img{margin:0 auto;filter:drop-shadow(0 20px 28px rgba(123,18,55,.20))}
.hero__tag{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);
  background:var(--wine);color:#fff;border-radius:999px;padding:8px 18px;white-space:nowrap;
  font-size:0.9062rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:var(--shadow-sm)}
.floaty{position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);
  padding:10px 14px;box-shadow:var(--shadow);font-weight:800;font-size:0.9062rem;line-height:1.2;
  color:var(--ink-dk);z-index:2}
.floaty small{display:block;color:var(--berry-dk);font-size:0.9062rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:800;margin-top:3px}
.floaty--tl{top:6px;left:-10px}
.floaty--br{bottom:36px;right:-10px}

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

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

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

/* ---- 7. QUICK ANSWER (AEO) ----------------------------------------------- */
.answer{background:#fff;border:1px solid var(--berry-line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:20px 24px;margin:22px 0 0}
/* In the hero the answer is not a card: the reference layout runs it as two
   flowing paragraphs under the H1. The wrapper stays because it is the
   speakable selector and the AEO block, but the card styling comes off. */
.hero .answer{background:none;border:0;box-shadow:none;padding:0;margin:18px 0 0}
.hero .answer .qtag{display:none}
.hero .answer p{font-size:1.062rem;color:var(--muted);margin:0 0 .85em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--ink-dk)}
.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)}
.ticks--gone{display:none}
.answer .qtag{display:block;font-family:var(--sans);font-weight:800;font-size:0.8438rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--berry-dk);margin-bottom:.55em}
.answer p{margin:0;font-size:1.062rem}


/* ---- hero motif -- warm-bloom ---------------------------------------- */
.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(168deg,#fffaf5,#f5d5da 58%,#fffaf5)}.hero__media::before{content:'';position:absolute;inset:6% 10%;border-radius:46% 54% 48% 52%;background:radial-gradient(closest-side,rgba(198,45,96,0.50),transparent 74%);filter:blur(10px);animation:btBloom 11s ease-in-out infinite;z-index:1}@keyframes btBloom{0%,100%{border-radius:46% 54% 48% 52%;scale:.97}50%{border-radius:56% 44% 52% 48%;scale:1.04}}
@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 on the first screen ----------------------
   Measured at 1440x900 before this block: the primary CTA sat at y=1061,
   161px below the fold, with the four evidence ticks standing between the
   Quick Answer and the buttons. The reading order the money page wants is
   eyebrow, headline, Quick Answer, BUTTONS, payment line, then the evidence.

   Done with flex `order` on the copy column, so the DOM is untouched: the
   Quick Answer still follows the H1 for parsers and for the speakable
   selector. Desktop only -- below 921px the copy column is display:contents
   and its phone order is composed separately, and this must not reach it.

   The margins are restated because a flex column does not collapse adjacent
   sibling margins the way the block flow it replaces did; left alone they
   would sum and give back the height this block is reclaiming. Layout, so it
   lives above the critical marker and the site is rebuilt after it. */
@media(min-width:921px){
  .hero .hero__grid{padding-block:30px 68px}
  .hero .hero__copy{display:flex;flex-direction:column;align-items:stretch}
  .hero .hero__copy > .pill{order:1;align-self:flex-start;margin-bottom:10px}
  .hero .hero__copy > h1{order:2;margin-bottom:12px}
  .hero .hero__copy > .answer{order:3;margin:0}
  .hero .hero__copy > .hero__cta{order:4;margin:16px 0 0}
  .hero .hero__copy > .pay{order:5;margin:16px 0 0}
  .hero .hero__copy > .ticks{order:6;margin:26px 0 0}
  .hero .hero__copy > .factpills{order:7;margin:18px 0 0}
  .hero .hero__copy > .figures{order:8;margin:22px 0 0}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- 8. KEY FACTS TABLE (the reference's record rows) -------------------- */
.qa{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden;max-width:900px;margin:0 auto}
.qa__h{background:var(--berry-lt);padding:16px 24px;font-family:var(--display);font-weight:700;
  font-size:1.06rem;color:var(--ink-dk);border-bottom:1px solid var(--line)}
.qa dl{margin:0;display:grid;grid-template-columns:34% 1fr}
.qa dt,.qa dd{padding:13px 24px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:800;color:var(--ink-dk);font-size:1.062rem;letter-spacing:.09em;
  text-transform:uppercase}
.qa dd{color:var(--muted)}
.qa dl>:nth-last-child(-n+2){border-bottom:0}
@media(max-width:620px){
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
}

/* ---- 9. CARDS / GRIDS ---------------------------------------------------- */
.grid{display:grid;gap:24px}
.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}}

/* tinted fill, soft shadow, generous radius - the assigned card treatment */
.card{background:var(--tint);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:28px;box-shadow:var(--shadow-sm)}
.card .ic{width:56px;height:56px;border-radius:var(--r-s);background:#fff;
  display:grid;place-items:center;margin-bottom:15px;overflow:hidden;
  border:1px solid var(--line)}
.card .ic img{height:38px;width:38px;object-fit:contain}
.card h3{margin-bottom:.4em}
.card p{margin:0;color:var(--muted);font-size:1.062rem}
.card p+p{margin-top:.8em}
.sec--tint .card{background:#fff}
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:940px){.whygrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.whygrid{grid-template-columns:1fr}}
.whycard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow-sm);border-top:4px solid var(--berry)}
.whycard h3{margin-bottom:.4em}
.whycard p{margin:0;color:var(--muted);font-size:1.062rem}

/* ---- 10. SPLIT / STEPS / BAND -------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.split--rev .split__media{order:2}
.split__media img{border-radius:var(--r);box-shadow:var(--shadow);margin:0 auto}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:28px}.split--rev .split__media{order:0}}
.chips{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:11px}
.chips li{display:flex;gap:11px}
.chips .ck{color:var(--berry);font-weight:800;flex:none}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:28px 26px}
.step__n{counter-increment:s;width:42px;height:42px;border-radius:50%;background:var(--berry-lt);
  color:var(--berry-dp);display:grid;place-items:center;font-family:var(--display);
  font-weight:800;margin-bottom:14px;border:1px solid var(--berry-line)}
.step__n::before{content:counter(s,decimal-leading-zero)}
@media(max-width:880px){.steps{grid-template-columns:1fr}}

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

/* ---- 11. SHOTS (image + heading + copy, never a bare grid) --------------- */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.shots figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tint)}
.shots figcaption{padding:20px 22px}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.06rem;
  color:var(--ink-dk);margin-bottom:.4em}
.shots figcaption span{font-size:.92rem;color:var(--muted)}
.shots--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:940px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.shots,.shots--wide{grid-template-columns:1fr}}

/* ---- 12. INGREDIENTS ----------------------------------------------------- */
.inglist{display:grid;gap:22px}
.ing{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;
  box-shadow:var(--shadow-sm)}
.ing__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin-bottom:.7em}
.ing__top h3{margin:0}
.ing__dose{font-weight:800;font-size:0.8438rem;background:var(--berry-lt);
  color:var(--berry-dp);border:1px solid var(--berry-line);border-radius:999px;padding:5px 13px}
.ing__lat{font-size:0.9062rem;color:var(--faint);font-style:italic}
.ing p{margin:0 0 .8em}
.ing p:last-child{margin-bottom:0}
.ing__cite{font-size:.86rem;color:var(--muted)}
.ingthumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:30px}
.ingthumbs figure{margin:0}
.ingthumbs img{width:100%;border-radius:var(--r);border:1px solid var(--line);
  box-shadow:var(--shadow-sm)}
.ingthumbs figcaption{margin-top:.7em;font-size:0.9062rem;color:var(--muted)}
@media(max-width:880px){.ingthumbs{grid-template-columns:1fr}}

/* ---- 13. PRICING --------------------------------------------------------- */
.prices{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:22px;align-items:center;
  padding-top:18px}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:30px 24px 26px;text-align:center;box-shadow:var(--shadow-sm);position:relative;
  display:flex;flex-direction:column}
.price--best{border:2px solid var(--berry);padding:38px 28px 32px;
  background:linear-gradient(180deg,#fff 0%,var(--tint) 100%);
  box-shadow:0 32px 64px -28px rgba(198,45,96,.58);transform:translateY(-10px);z-index:1}
.price--ordered{border-color:var(--berry-line)}
.price__badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--berry);color:#fff;font-weight:800;font-size:0.9062rem;letter-spacing:.13em;
  text-transform:uppercase;padding:7px 15px;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 18px -8px rgba(123,18,55,.7)}
.price--ordered .price__badge{background:var(--wine);box-shadow:none}
.price img{margin:0 auto 14px;height:auto}
.price h3{margin-bottom:.2em}
.price--best h3{font-size:1.56rem}
.price__supply{font-size:.87rem;color:var(--faint);margin-bottom:.9em}
.price__each{font-family:var(--display);font-weight:800;font-size:2.5rem;color:var(--berry-dp);
  line-height:1}
.price--best .price__each{font-size:3.05rem}
.price__each small{font-size:0.9062rem;font-weight:600;color:var(--muted);display:block;margin-top:5px;
  font-family:var(--sans)}
.price__was{color:var(--faint);text-decoration:line-through;font-size:.92rem}
.price__tot{font-weight:700;margin:.5em 0 1em}
.price__save{display:inline-block;background:var(--berry-lt);color:var(--berry-dp);
  border:1px solid var(--berry-line);border-radius:999px;font-weight:800;font-size:0.8438rem;
  letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;margin-left:6px;vertical-align:2px}
.price--best .price__save{background:#fff}
.price .btn--block{margin-top:auto}
.price__ship{font-size:0.9062rem;color:var(--berry-dk);font-weight:700;margin:.8em 0 0}
@media(max-width:1040px){.prices{grid-template-columns:1fr 1.1fr 1fr;gap:14px}
  .price{padding:26px 16px 22px}
  .price--best{padding:32px 18px 26px}
  .price--best .price__each{font-size:2.6rem}}
@media(max-width:860px){.prices{grid-template-columns:1fr;gap:26px;align-items:stretch;
    max-width:430px;margin-inline:auto}
  .price{padding:28px 22px 24px}
  .price--best{transform:none;padding:34px 24px 28px;order:1}
  .price--ordered{order:2}
  .price--basic{order:3}}

/* ---- 14. REVIEWS / STATS ------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;
  text-align:center;box-shadow:var(--shadow-sm)}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:2.2rem;
  color:var(--berry-dk);line-height: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-radius:999px;overflow:hidden}
.rbar .fill{height:100%;background:var(--berry);border-radius:999px}
.rev__stars{color:var(--gold);letter-spacing:.08em}
.tlife{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:880px){.tlife{grid-template-columns:1fr}}

/* ---- 15. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:12px;max-width:880px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r); padding: 0 24px;box-shadow:var(--shadow-sm)}
.faq summary{font-family:var(--display);font-weight:700;font-size:1.06rem;color:var(--ink-dk);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;
  align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--berry);font-weight:800;flex:none;font-size:1.3rem;
  line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .faq__b{padding-top:.9em;color:var(--muted)}
.faq .faq__b p:last-child{margin-bottom:0}

/* ---- 16. CALLOUTS / ALERTS ----------------------------------------------- */
.callout{background:var(--berry-lt);border:1px solid var(--berry-line);
  border-left:4px solid var(--berry);border-radius:0 var(--r) var(--r) 0;padding:24px 28px}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--gold-lt);border:1px solid var(--gold-line);border-left:4px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:24px 28px}
.alert p:last-child{margin-bottom:0}
.flag{display:inline-block;font-weight:800;font-size:0.8438rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--berry-lt);color:var(--berry-dp);
  border:1px solid var(--berry-line);border-radius:999px;padding:5px 13px;margin-bottom:1rem}

/* ---- 17. TABLES ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  box-shadow:var(--shadow-sm)}
.dtable{width:100%;font-size:1rem;min-width:520px}
.dtable th,.dtable td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.dtable thead th{background:var(--wine);color:#fff;font-weight:800;font-size:0.9062rem;
  letter-spacing:.09em;text-transform:uppercase}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable caption{caption-side:top;padding:14px 18px 0;font-size:1rem;color:var(--faint);
  text-align:left}
.facttab{width:100%;font-size:.95rem}
.facttab th,.facttab td{padding:12px 0;text-align:left;border-bottom:1px solid var(--line-soft)}
.facttab th{width:38%;font-weight:700;color:var(--ink-dk)}

/* ---- 18. FORMS ----------------------------------------------------------- */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:32px;
  box-shadow:var(--shadow-sm)}
.form__row{display:grid;gap:16px;margin-bottom:16px}
@media(min-width:660px){.form__row--2{grid-template-columns:1fr 1fr}}
.form label{display:block;font-weight:700;font-size:0.9062rem;margin-bottom:6px;color:var(--ink-dk)}
.form input,.form select,.form textarea{width:100%;font-family:inherit;font-size:1rem;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);
  color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--berry);
  outline-offset:1px;background:#fff}
.form textarea{min-height:130px;resize:vertical}
.form__hint{font-size:0.9062rem;color:var(--faint);margin-top:6px}
.form__msg{margin-top:14px;padding:12px 16px;border-radius:var(--r-s);background:var(--berry-lt);
  border:1px solid var(--berry-line);font-size:.92rem;display:none}
.form__msg.show{display:block}

/* ---- 19. TRUST STRIP / SEAL WALL ----------------------------------------- */
.trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px 38px;
  padding-block:24px}
.trust__item{display:flex;align-items:center;gap:10px;font-size:0.9062rem;font-weight:700;
  color:var(--muted)}
.trust__item img{height:42px;width:auto}
.badgewall{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.badgewall img{height:64px;width:auto}
.promo{background:var(--wine);color:#f6d9e1;border-radius:var(--r-l);padding:34px 36px;
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.promo b{color:#fff}
.promo p{margin:0}
@media(max-width:760px){.promo{grid-template-columns:1fr;text-align:center}}

/* ---- 20. FINAL CTA ------------------------------------------------------- */
.final{background:linear-gradient(158deg,var(--wine) 0%,var(--wine-dk) 100%);color:#f6d9e1;
  border-radius:var(--r-l);padding:48px 44px;position:relative;overflow:hidden}
.final h2{color:#fff}
.final p{color:#eec3ce;max-width:56ch;margin:0 auto 1.5em}
.final b,.final strong{color:#fff}
.final--media{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;align-items:center;
  text-align:left}
.final--media h2{text-align:left}
.final--media p{margin:0 0 1.4em;max-width:54ch}
.final--media .final__img img{width:100%;max-width:320px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.44))}
.final__price{font-family:var(--display);font-weight:800;font-size:1.95rem;color:#ffd6e3;
  margin:.2em 0 .7em}
@media(max-width:880px){
  .final--media{grid-template-columns:1fr;gap:26px;text-align:center;padding:0}
  .final--media h2{text-align:center}
  .final--media p{margin-inline:auto}
  .final{padding:36px 24px}
}

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

.byline{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:22px 26px;margin-top:2.4em;box-shadow:var(--shadow-sm)}
.byline img{flex:0 0 68px;border-radius:50%;border:1px solid var(--line)}
.byline b{display:block;font-family:var(--display);font-size:1.06rem;color:var(--ink-dk);
  margin-bottom:.4em}
.byline p{margin:0;font-size:0.9062rem;color:var(--muted)}

.refs{font-size:.88rem;color:var(--muted)}
.refs ol{padding-left:1.3em;display:grid;gap:.6em}
.refs a{word-break:break-word}

.crumbs{font-size:0.9062rem;color:var(--faint);padding:16px 0 0;margin:0;letter-spacing:.03em}
.crumbs a{color:var(--muted)}
.legal p{max-width:var(--measure)}

.article{max-width:var(--prose);margin-inline:auto}
.article h2{margin-top:1.7em}
.article h3{margin-top:1.35em}
.dropcap::first-letter{float:left;font-family:var(--display);font-weight:800;font-size:3.2rem;
  line-height:.86;padding:.06em .1em 0 0;color:var(--berry-dk)}
.pullquote{border-left:4px solid var(--berry);padding-left:22px;margin:1.6em 0;
  font-family:var(--display);font-size:1.18rem;color:var(--ink-dk)}
.pullquote p{margin:0 0 .4em}
.pullquote cite{display:block;font-family:var(--sans);font-style:normal;font-weight:700;
  font-size:.85rem;color:var(--muted);letter-spacing:.02em}

/* ---- 22. FOOTER: three columns and a guarantee seal ---------------------- */
footer{background:var(--wine-dk);color:#e3c4cd;padding:0 0 30px;font-size:.92rem;
  border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:0}
footer h4{color:#fff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:1.1em}
footer a{color:#f4c9d6}
footer a:hover{color:#fff}
.fseal{display:flex;align-items:center;justify-content:center;gap:22px;padding:34px 0 8px;
  text-align:left;flex-wrap:wrap}
.fseal img{flex:none}
.fseal__t{max-width:520px}
.fseal__t b{display:block;font-family:var(--display);font-size:1.5rem;color:#fff;
  margin-bottom:.25em}
.fseal__t p{margin:0;font-size:1.062rem;color:#dcb9c4}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px;margin:34px 0;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.14)}
@media(max-width:880px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.fgrid{grid-template-columns:1fr}.fseal{justify-content:flex-start}}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.62em}
.fbrand{font-family:var(--display);font-weight:800;font-size:1.44rem;color:#fff;margin-bottom:.4em}
.fbrand span{color:#f7a9c0}
.fbadges{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.fbadges img{height:38px;width:auto}
.fnap{border-top:1px solid rgba(255,255,255,.14);padding-top:24px;font-size:0.9062rem;line-height:1.78}
.fpay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 0;
  border-top:1px solid rgba(255,255,255,.14);margin-top:22px;font-size:0.9062rem}
.fpay img{height:24px;width:auto}
.disc{border-top:1px solid rgba(255,255,255,.14);margin-top:22px;padding-top:22px;
  font-size:0.9062rem;line-height:1.72;color:#c8a5b0}
.disc p{margin-bottom:.9em}
.copy{color:#a98996}

/* ---- 23. BLOG ------------------------------------------------------------ */
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 1.8em;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:0.9062rem;color:var(--muted)}
.postmeta b{color:var(--ink-dk)}
.postmeta .sep{color:var(--line)}
.postmeta time{white-space:nowrap}

.toc{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 28px;margin:0 0 2.2em}
.toc h2{font-family:var(--sans);font-size:.75rem!important;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--berry-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(--berry-dk)}

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

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

/* 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:0 0 .5em}
.article .final--media .final__price{font-size:1.35rem;margin:.3em 0 .7em}
@media(max-width:620px){
  .article .final--media{grid-template-columns:1fr;text-align:center;padding:30px 22px}
  .article .final--media h2{text-align:center;font-size:1.4rem}
}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.posts article{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.posts img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 40%;
  background:var(--tint)}
.posts .pbody{padding:26px 28px;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(--berry-dk)}
.posts p{margin:0 0 1em;color:var(--muted);font-size:1.062rem}
.posts .pmeta{margin-top:auto;font-size:0.9062rem;color:var(--faint)}
@media(max-width:940px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}

/* ---- 24. MOTION: the curve reveal ---------------------------------------
   The only motion on this site. A section with a curved edge arrives by
   unrolling that curve: the radius relaxes from a deep arc to its resting
   value while the content settles up. Nothing in the hero animates, because
   the headline there is the Largest Contentful Paint element. */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
.sec--curve[data-reveal]{border-top-left-radius:50% 90px;border-top-right-radius:50% 90px;
  transition:opacity .62s var(--ease),transform .62s var(--ease),
             border-radius .9s var(--ease)}
.sec--curve[data-reveal].in{border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl)}
.curveline{display:block;height:3px;width:0;background:var(--berry);border-radius:999px;
  margin:0 auto 26px;transition:width .9s var(--ease)}
[data-reveal].in .curveline{width:120px}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  .sec--curve[data-reveal]{border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl)}
  .curveline{width:120px}
  html{scroll-behavior:auto}
}

/* ---- 25. SINGLE-COLUMN MEASURE ------------------------------------------
   --measure is px, not ch: `ch` resolves against each element's own font size,
   so one token would give .note and .lead different pixel widths and the
   column would stay ragged. These sections needed a shared edge. */
.sec > .wrap > h1,
.sec > .wrap > h2,
.sec > .wrap > h3,
.sec > .wrap > h4,
.sec > .wrap > p,
.sec > .wrap > ul,
.sec > .wrap > ol,
.sec > .wrap > .sec__head,
.sec > .wrap > .callout,
.sec > .wrap > .answer,
.sec > .wrap > .alert,
.sec > .wrap > .byline,
.sec > .wrap > .refs,
.sec > .wrap > .pullquote,
.sec > .wrap > blockquote{max-width:var(--measure);margin-inline:auto}

.sec > .wrap > .tablewrap,
.sec > .wrap > .faq,
.sec > .wrap > .steps{max-width:var(--measure-wide);margin-inline:auto}

.sec > .wrap > [style*="max-width"]{margin-inline:auto}
.sec--center > .wrap > .sec__head{margin-inline:auto}

@media(max-width:1060px){
  .sec > .wrap > h1,.sec > .wrap > h2,.sec > .wrap > h3,.sec > .wrap > h4,
  .sec > .wrap > p,
  .sec > .wrap > ul,.sec > .wrap > ol,.sec > .wrap > .sec__head,
  .sec > .wrap > .callout,.sec > .wrap > .answer,
  .sec > .wrap > .alert,.sec > .wrap > .byline,
  .sec > .wrap > .refs,.sec > .wrap > .pullquote,.sec > .wrap > blockquote,
  .sec > .wrap > .tablewrap,.sec > .wrap > .faq,.sec > .wrap > .steps{
    max-width:100%}
}
/* brand mark: stack construction */
.brand{flex-direction:column;align-items:center;gap:4px;text-align:center}.brand svg{width:26px;height:26px;margin-right:0!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; }
}

/* The FAQ click target is <summary>, not <details>. Keeping the
   vertical padding on details made the row LOOK ~56px and respond
   as ~30px, under the 44px minimum. Moving it here changes nothing
   visually and makes the whole row tappable. */
.faq summary{padding:18px 0}

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

/* A <small> inside a table cell that no rule reaches inherits the browser
   default of ~0.83em = 13.3px, under the 14.5px caption floor, and
   type_floor.py cannot see it because there is no rule to raise.
   See pitfalls.md #97. */
td small,.dtable small{font-size:0.9062rem}

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots>figure:only-child{grid-column:1/-1;max-width:calc((100% - 52px) / 3);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */

/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */
/*!SITE-HOME-PAINT-START*/
/* ==========================================================================
   HOME PAGE SURFACE -- slot: radius 18/12, two tight crisp stops, inset pill
   on a rule, motif family "settle".

   Paint only: radius, shadow, background, colour, transform, transition and
   animation. Nothing here changes a box's size or position -- the two dashed
   separators are drawn on absolutely positioned pseudo-elements precisely so
   the pricing cards' measured geometry is untouched.

   Scoped to the home page with body:has(.hero). class="hero" is on
   index.html and nowhere else on this site, so every rule below resolves on
   the home page only; the header, the footer, #pricing and .btn all exist on
   the other ~30 pages and are deliberately left alone there.

   Specificity, not source order: modern_surface.py and footer_type.py
   re-append their own blocks on every build and land after this one.
   body:has(.hero) .card is (0,2,1) against their (0,1,0), so it wins wherever
   they overlap. The :root tokens they write are likewise outranked by the
   body-scoped ones below, on this page only.
   ========================================================================== */

/* ---- NOT a design choice: a rule this block has to carry ----------------
   modern_surface.py writes its panel shadow only when `need_shade` is true,
   and `need_shade = not layered` is measured over the WHOLE stylesheet. The
   moment this block added layered shadows, that test went false and the next
   build dropped

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

   from its block -- which took the shadow off .keypoints, .callout, .alert,
   .toc, .byline, .final, .whycard and .article figure on all thirty-one
   pages, measured in the browser as box-shadow:none. That is the other
   thirty pages, which this pass does not own.

   So the rule is restored here verbatim, unscoped, exactly as that tool
   emitted it. It is deliberately the lowest-specificity rule in this block:
   (0,1,0), so every home-scoped rule below still outranks it, and on the
   home page var(--shadow) resolves to the crisp value set just underneath.
   If this block is ever removed, `need_shade` goes true again and
   modern_surface.py re-emits its own copy on the next build. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.tablewrap,
.faq,
.final,
.answer,
.whycard,
.article figure{box-shadow:var(--shadow)}

/* The slot's radii and depth language, scoped to the home page. The :root
   values are left as they are -- they are the other thirty pages, and
   modern_surface.py reads :root to decide whether the floor is met. */
body:has(.hero){
  --r:18px;
  --r-s:12px;
  --r-l:22px;
  --shadow:0 1px 1px rgba(44,26,32,.11),0 4px 10px rgba(44,26,32,.13);
  --shadow-sm:0 1px 1px rgba(44,26,32,.07),0 4px 10px rgba(44,26,32,.09);
  --lift:0 1px 1px rgba(44,26,32,.13),0 10px 22px rgba(44,26,32,.17);
}

/* The two big cards take the slot's card radius outright rather than the
   large-panel token, because they are the cards the reader actually reads. */
body:has(.hero) .hero__card{border-radius:18px;
  box-shadow:0 1px 1px rgba(44,26,32,.12),0 6px 16px rgba(44,26,32,.14)}
body:has(.hero) .price{border-radius:18px}

/* ---- controls -----------------------------------------------------------
   12px, and the pair reads as two weights: the buying CTA carries the only
   gradient on the page, the secondary stays a solid fill on a hairline. */
body:has(.hero) .btn{border-radius:12px;
  transition:background .22s var(--ease),box-shadow .22s var(--ease),
             transform .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease)}
body:has(.hero) .btn--cta{
  background:linear-gradient(180deg,#d8386e 0%,#c62d60 46%,#a81f4e 100%);
  box-shadow:0 1px 1px rgba(44,26,32,.14),0 4px 10px rgba(161,29,74,.30)}
body:has(.hero) .btn--cta:hover{
  background:linear-gradient(180deg,#c62d60 0%,#a81f4e 46%,#8b1640 100%);
  box-shadow:0 1px 1px rgba(44,26,32,.16),0 8px 18px rgba(161,29,74,.36);
  transform:translateY(-2px)}
body:has(.hero) .btn--ghost{background:var(--paper);border-color:var(--berry-line);
  box-shadow:0 1px 1px rgba(44,26,32,.06)}
body:has(.hero) .btn--ghost:hover{background:var(--berry-lt);
  border-color:var(--berry);
  box-shadow:0 1px 1px rgba(44,26,32,.08),0 6px 14px rgba(44,26,32,.11);
  transform:translateY(-2px)}
body:has(.hero) .btn:focus-visible{outline:2px solid var(--berry-dp);
  outline-offset:3px}

/* ---- a surface a reader can click answers the pointer ------------------- */
body:has(.hero) .card,
body:has(.hero) .stat,
body:has(.hero) .step,
body:has(.hero) .price{transition:box-shadow .25s var(--ease),
  transform .25s var(--ease)}
/* border-color is deliberately NOT in that list. The pricing rules live
   below the critical marker, so the featured card has no border at all
   until the async sheet lands; transitioning the colour animated it from
   currentColor -- this site's ink -- to berry, a quarter second of a dark
   border on a pink card. Nothing here changes a border colour on hover. */
body:has(.hero) .card:hover,
body:has(.hero) .stat:hover,
body:has(.hero) .step:hover,
body:has(.hero) .price:hover{box-shadow:var(--lift);transform:translateY(-2px)}
/* The featured tier is raised with margin-free translateY(-10px) in the
   pricing block and nothing here may flatten it, so its hover keeps the
   raise and adds the 2px on top. Same specificity as the rule above, so it
   is placed after it deliberately. */
body:has(.hero) .price--best:hover{transform:translateY(-12px);
  box-shadow:0 1px 1px rgba(44,26,32,.12),0 20px 40px -12px rgba(161,29,74,.42)}
body:has(.hero) .floaty{box-shadow:0 1px 1px rgba(44,26,32,.10),
  0 4px 10px rgba(44,26,32,.12)}

/* ---- pricing: the ribbon as an inset pill on the card's top rule --------
   The card's own top border is the rule. The pill is ringed in the section
   ground so the rule reads as cut rather than merely covered, and the inset
   highlight is what makes it read recessed rather than stuck on. */
body:has(.hero) .price__badge{
  padding:7px 16px;
  background:linear-gradient(180deg,#d8386e,#a11d4a);
  box-shadow:0 0 0 5px var(--tint),0 1px 1px rgba(44,26,32,.18),
             inset 0 1px 0 rgba(255,255,255,.30)}
body:has(.hero) .price--ordered .price__badge{
  background:linear-gradient(180deg,#7e2038,#5c0f22);
  box-shadow:0 0 0 5px var(--tint),0 1px 1px rgba(44,26,32,.16),
             inset 0 1px 0 rgba(255,255,255,.18)}

/* The recommended tier, raised and in its own colour. */
body:has(.hero) .price--best{border-color:var(--berry);
  background:linear-gradient(180deg,#ffffff 0%,#fdf1ec 56%,#fbe3ea 100%);
  box-shadow:0 1px 1px rgba(44,26,32,.11),0 14px 30px -10px rgba(161,29,74,.36)}
body:has(.hero) .price--ordered{
  background:linear-gradient(180deg,#ffffff 0%,#fffaf5 100%)}

/* Dashed separators between the rows. Drawn on absolutely positioned
   pseudo-elements: a border on the rows themselves would add a pixel to each
   card and move three Add To Cart buttons that were measured before this. */
body:has(.hero) .price__each,
body:has(.hero) .price__tot{position:relative}
body:has(.hero) .price__each::before,
body:has(.hero) .price__tot::before{content:"";position:absolute;
  left:2px;right:2px;top:-8px;border-top:1px dashed var(--berry-line);
  pointer-events:none}
body:has(.hero) .price--best .price__each::before,
body:has(.hero) .price--best .price__tot::before{border-top-color:var(--berry)}

/* ---- hero motif -- "settle" ---------------------------------------------
   A soft halo that breathes once and settles. Two radial layers on the media
   column's own pseudo-elements, never on the <img>: that image is the LCP
   element and is preloaded. Both are sized wider than the product card --
   .hero__card is opaque and sits at z-index 2, so a shape sized inside it
   renders nothing at all. transform and opacity only, one pass, no repeat,
   and the whole thing is off under prefers-reduced-motion.

   Sizes are measured, not guessed. At 1440 the media column is 511px and the
   product card inside it is 511x600, so the halo is 150% (767px) and the ring
   140% (716px) -- both clear the card on every side. The ring stops at 140%
   because its painted band has to stay out of the copy column: at 154% the
   arc crossed behind the Quick Answer paragraph.

   These outrank the earlier warm-bloom block above the critical marker on
   specificity -- (0,2,1) against (0,1,1) -- rather than replacing it in
   place, so nothing else that block sets is disturbed. btBloom is left
   unreferenced; the two keyframe names here are new to this stylesheet. */
body:has(.hero) .hero{
  background:linear-gradient(172deg,#fffdfb 0%,#fdf1ec 44%,#fae2e4 100%)}
.hero .hero__media::before{content:"";position:absolute;z-index:1;
  pointer-events:none;inset:auto;left:50%;top:50%;
  width:150%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(198,45,96,.24) 0%,
    rgba(198,45,96,.13) 46%,rgba(198,45,96,.04) 76%,rgba(198,45,96,0) 100%);
  filter:blur(10px);opacity:.9;
  transform:translate(-50%,-50%) scale(1);
  animation:bgHaloSettle 7.5s cubic-bezier(.22,1,.36,1) both}
.hero .hero__media::after{content:"";position:absolute;z-index:1;
  pointer-events:none;inset:auto;left:50%;top:50%;
  width:140%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(161,29,74,0) 60%,
    rgba(161,29,74,.16) 76%,rgba(161,29,74,0) 94%);
  opacity:.62;transform:translate(-50%,-50%) scale(1);
  animation:bgRingSettle 9.4s cubic-bezier(.22,1,.36,1) both}
@keyframes bgHaloSettle{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.80)}
  46%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:.9;transform:translate(-50%,-50%) scale(1)}}
@keyframes bgRingSettle{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.74)}
  54%{opacity:.95;transform:translate(-50%,-50%) scale(1.05)}
  100%{opacity:.62;transform:translate(-50%,-50%) scale(1)}}
/* The stylesheet already carries a global reduce rule, but the motif states
   its own so it cannot be lost if that one moves. The declared values ARE
   the settled frame, so switching the animation off leaves the finished
   picture rather than a half-drawn one. */
@media(prefers-reduced-motion:reduce){
  .hero .hero__media::before,
  .hero .hero__media::after{animation: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 .disc{font-size:16px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

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

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.keypoints,
.callout,
.alert,
.faq,
.article figure{border-radius:var(--r)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.posts h3 a{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.posts h3 a:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.posts h3 a:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}