/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Petrona Fallback";src:local("Georgia");font-weight:400;size-adjust:98.06%;ascent-override:87.50%;descent-override:27.53%;line-gap-override:0.00%}
@font-face{font-family:"Petrona Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:89.12%;ascent-override:96.28%;descent-override:30.30%;line-gap-override:0.00%}
@font-face{font-family:"Barlow Fallback";src:local("Arial");font-weight:400;size-adjust:97.50%;ascent-override:102.56%;descent-override:20.51%;line-gap-override:0.00%}
@font-face{font-family:"Barlow Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:92.85%;ascent-override:107.70%;descent-override:21.54%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   BOOSTER XT - boosterxts.com
   Component system taken from memozhoney.com (the assigned UI/UX reference):
   a clinical record sheet. Hairline rules instead of shadows, a section header
   that sits under a 2px rule with a short accent stub, key-facts rows as a
   two-column definition list, numbered items counted 01, 02, 03, dark slab
   bands, tables with a dark header and zebra rows, badge pills, and a left-edge
   callout. None of its palette survives.

   Colour is re-derived from the bottle in assets/: matte black body, an antique
   gold band and wordmark, a white brush "XT", and a deep wine strip reading
   MALE ENHANCEMENT. Ground is warm sand, per the assigned design slot.

   Assigned slot (from _generators/batch_assignments.py, row boosterxts.com):
     display Petrona / body Barlow
     header  logo left with a vertical divider, inline menu, ghost CTA
     footer  2-column: brand and method statement left, all links right
     ground  warm sand      radius 4px
     card    flat with a coloured top edge
     hero    sand, bottle on a tinted disc
     motion  slide-in from the right on alternating sections
   ========================================================================== */

/* ---- 1. TOKENS ----------------------------------------------------------
   Every custom property is declared here, in the first rule block. validate.py
   reads only that block when it checks that each var() resolves. */
:root{
  /* ground: warm sand */
  --paper:#f7f2e8;
  --paper-2:#f1e9d9;
  --paper-3:#e9dfc9;
  --card:#fffdf7;

  /* ink, from the bottle body */
  --ink:#1c1a16;
  --ink-2:#4b453b;
  --ink-3:#756d5f;
  --line:#ddd1b8;
  --line-2:#c9b998;
  --line-soft:#ece3d0;

  /* the dark slab, also from the bottle */
  --slab:#1a1815;
  --slab-2:#272420;
  --slab-line:#3b372f;
  --slab-ink:#e4ded0;
  --slab-ink-2:#a9a293;

  /* accent: the antique gold band and wordmark */
  --gold:#866423;
  --gold-dp:#7f5d1b;
  --gold-br:#d8b25e;
  --gold-lt:#f7edd6;
  --gold-line:#e2cd9c;

  /* secondary: the wine strip that reads MALE ENHANCEMENT */
  --wine:#7c2438;
  --wine-dk:#5a1526;
  --wine-lt:#f8e8ea;
  --wine-line:#e7c5cc;

  /* a calm confirmation colour for verification blocks */
  --verify:#2f6b46;
  --verify-lt:#e8f1ea;

  /* metrics */
  --wrap:1180px;
  --prose:70ch;
  --measure:760px;
  --measure-wide:980px;
  --radius:4px;
  --radius-sm:3px;
  --figw:440px;
  --shadow:0 14px 30px -26px rgba(28,26,22,.55);
  --ease:cubic-bezier(.22,1,.36,1);

  --serif:'Petrona','Petrona Fallback',Georgia,'Times New Roman',serif;
  --sans:'Barlow','Barlow Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---- 2. BASE ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:104px}
body{margin:0;background:var(--paper);color:var(--ink);overflow-x:clip;max-width:100%;
  font-family:var(--sans);font-size:17px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased}
img,svg,video,iframe,table,figure{max-width:100%}
img{height:auto;display:block}
a{color:var(--gold-dp);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--gold-dp);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:700;
  line-height:1.16;letter-spacing:-.005em;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.6vw,3.15rem)}
h2{font-size:clamp(1.6rem,3.1vw,2.3rem)}
h3{font-size:1.26rem;line-height:1.3}
h4{font-size:1.03rem}
p{margin:0 0 1.05em}
strong,b{font-weight:700}
table{border-collapse:collapse}
::selection{background:var(--gold-lt)}
section[id]{scroll-margin-top:104px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;z-index:2000;padding:10px 16px;
  background:var(--slab);color:#fff;font-size:.9rem;border-radius:var(--radius)}
.skip:focus{left:10px;top:10px}

/* ---- 3. ATOMS ----------------------------------------------------------- */
.eyebrow{display:inline-block;font-family:var(--sans);font-weight:700;font-size:0.8438rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dp)}
.lead{font-size:1.12rem;line-height:1.6;color:var(--ink-2)}
.note{font-size:0.9062rem;line-height:1.62;color:var(--ink-3)}
.meta{font-size:0.9062rem;letter-spacing:.05em;color:var(--ink-3)}

.pill{display:inline-flex;align-items:center;gap:8px;background:var(--slab);color:var(--gold-br);
  font-weight:700;font-size:0.8438rem;letter-spacing:.18em;text-transform:uppercase;
  padding:7px 13px;border-radius:var(--radius-sm);margin-bottom:16px}
.flag{display:inline-block;font-weight:700;font-size:0.8438rem;letter-spacing:.14em;
  text-transform:uppercase;background:var(--gold-lt);color:var(--gold-dp);
  border:1px solid var(--gold-line);border-radius:var(--radius-sm);padding:5px 11px;margin-bottom:1rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:700;font-size:.97rem;letter-spacing:.02em;
  padding:.88em 1.55em;border:1px solid transparent;border-radius:var(--radius);
  min-height:46px;cursor:pointer;line-height:1.15;text-align:center;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{text-decoration:none}
.btn--cta{background:var(--wine);color:#fff;border-color:var(--wine)}
.btn--cta:hover{background:var(--wine-dk);border-color:var(--wine-dk);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--paper-2);border-color:var(--ink-3);color:var(--ink)}
.btn--gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-dp);border-color:var(--gold-dp);color:#fff}
.btn--lg{font-size:1.03rem;padding:1em 1.9em}
.btn--block{display:flex;width:100%}

/* ---- 4. SECTION SHELL + RECORD-SHEET HEAD -------------------------------
   The reference's most recognisable device: a 2px rule across the top of the
   header block with a short accent stub over its left end. */
.sec{padding:62px 0;border-top:1px solid var(--line)}
.sec--tint{background:var(--paper-2);border-top-color:var(--line)}
.sec--sand{background:var(--paper-3)}
/* --ink-3 is tuned for the white and pale grounds. On the sand it is 3.86:1
   at 14.5px, under the 4.5:1 that size needs, so notes drop a step darker. */
.sec--sand .note{color:var(--ink-2)}
.sec--slab{background:var(--slab);color:var(--slab-ink);border-top:0}
.sec--slab h2,.sec--slab h3,.sec--slab h4{color:#fff}
.sec--slab a{color:var(--gold-br)}
.sec--slab .lead{color:var(--slab-ink)}
.sec--slab .note{color:var(--slab-ink-2)}
.sec--tight{padding:42px 0}

.sec__head{position:relative;margin-bottom:30px;padding-top:16px;border-top:2px solid var(--ink)}
.sec__head::before{content:"";position:absolute;top:-2px;left:0;width:92px;height:2px;background:var(--gold)}
.sec__head h2,.sec__head h1,.sec__head h3{margin:6px 0 .4em}
.sec--slab .sec__head{border-top-color:var(--slab-line)}
.sec--slab .sec__head::before{background:var(--gold-br)}
.sec--center .sec__head{text-align:center}
.sec--center .sec__head::before{left:50%;transform:translateX(-50%)}

/* ---- 5. TOP LINE + HEADER ----------------------------------------------- */
.util{background:var(--slab);color:var(--slab-ink-2);font-size:0.9062rem}
.util__row{display:flex;align-items:center;justify-content:space-between;gap:10px 22px;
  padding-block:8px;flex-wrap:wrap}
.util__item b{color:#fff;font-weight:600}
.util__tel{color:var(--gold-br);font-weight:700;white-space:nowrap}
.util__tel:hover{color:#fff;text-decoration:none}
@media(max-width:760px){
  .util__row{justify-content:center;text-align:center;font-size:0.9062rem;gap:3px 14px;padding-block:5px}
  .util__item:nth-child(2),.util__item:nth-child(3){display:none}
}
@media(max-width:470px){.util__item:nth-child(4){display:none}}

/* logo left with a vertical divider, inline menu, ghost CTA */
.nav{position:sticky;top:0;z-index:60;background:rgba(247,242,232,.96);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.nav--stuck{border-bottom-color:var(--line-2)}
@media(max-width:920px){
  .nav{transition:transform .26s var(--ease);will-change:transform}
  .nav--away{transform:translateY(-100%)}
}
.nav__row{display:flex;align-items:center;gap:20px;padding-block:12px;flex-wrap:nowrap}
.brand{display:inline-flex;align-items:center;gap:0;flex:none;white-space:nowrap;
  font-family:var(--serif);font-weight:700;font-size:1.4rem;letter-spacing:-.01em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{width:28px;height:28px;flex:none;margin-right:9px}
.brand span{color:var(--gold-dp)}
.brand small{display:block;font-family:var(--sans);font-size:.55rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:1px}
.nav__div{flex:none;width:1px;align-self:stretch;background:var(--line-2);margin:2px 0}
.menu{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.menu a{font-size:.9rem;font-weight:500;color:var(--ink-2);white-space:nowrap}
.menu a:hover,.menu a[aria-current="page"]{color:var(--gold-dp);text-decoration:none}
.nav__cta{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.nav__tel{font-weight:700;font-size:.88rem;color:var(--ink);white-space:nowrap}
.burger{display:none;width:44px;height:44px;padding:11px 9px;background:none;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);cursor:pointer}
.burger span{display:block;height:2px;margin:3px 0;background:var(--ink)}
@media(max-width:1440px){.menu{gap:18px}.menu a{font-size:.88rem}}
@media(max-width:1340px){.menu{gap:14px}.menu a{font-size:.85rem}}
@media(max-width:1300px){.nav__tel{display:none}}
@media(max-width:1180px){
  .menu{display:none}
  .nav__div{display:none}
  .menu.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);
    padding:4px 22px;max-height:76vh;overflow:auto;box-shadow:var(--shadow)}
  .menu.open li{border-top:1px solid var(--line-soft)}
  .menu.open a{display:block;padding:13px 0;min-height:44px}
  .burger{display:block}
  .nav__row{position:relative}
}
@media(max-width:430px){.nav__cta .btn{display:none}}

/* ---- 6. HERO: sand ground, bottle on a tinted disc ----------------------- */
.hero{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  position:relative;overflow-x:clip;overflow-y:visible;border-bottom:1px solid var(--line)}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:start;
  padding-block:34px 48px}
.hero h1{margin:0 0 12px;max-width:19ch}
.hero h1 span{display:block;color:var(--gold-dp)}
.hero h1 small{display:block;margin-top:.3em;font-family:var(--sans);font-size:.31em;
  font-weight:600;letter-spacing:.02em;line-height:1.35;color:var(--ink-2)}
@media(max-width:600px){.hero h1 small{font-size:.42em}}
.hero__sub{font-size:1.05rem;color:var(--ink-2);margin:14px 0 0;max-width:54ch}
.ticks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:7px}
.ticks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;align-items:start;
  font-size:1.062rem}
.ticks .ck{color:var(--gold-dp);font-weight:700;line-height:1.5}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}
.pay{display:flex;align-items:center;gap:13px;margin-top:18px;flex-wrap:wrap}
.pay img{height:22px;width:auto}
.pay span{font-size:0.9062rem;color:var(--ink-3);letter-spacing:.04em}

.hero__media{position:relative;display:flex;justify-content:center}
.hero__stick{position:relative;display:inline-block;padding:16px 22px}
.hero__stick::before{content:"";position:absolute;left:50%;top:50%;
  width:min(410px,92%);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 46%,var(--paper-3) 0%,var(--paper-3) 58%,rgba(233,223,201,0) 72%);
  border-radius:50%;z-index:0}
.hero__card{position:relative;z-index:1}
.hero__card img{margin:0 auto;max-width:100%}
.hero__tag{position:relative;z-index:2;margin:14px 0 0;text-align:center;
  font-size:0.9062rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.floaty{position:absolute;z-index:2;background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--gold);border-radius:var(--radius);padding:9px 13px;
  font-weight:700;font-size:0.9062rem;line-height:1.2;color:var(--ink)}
.floaty small{display:block;margin-top:2px;font-size:0.9062rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-dp)}
.floaty--tl{top:6px;left:-8px}
.floaty--br{bottom:38px;right:-8px}
@media(min-width:1025px){
  .hero__media{position:sticky;top:104px;align-self:start;height:calc(100vh - 104px);
    min-height:380px;align-items:center}
  .hero__stick{max-height:calc(100vh - 130px)}
  .hero__stick img{max-height:calc(100vh - 300px);min-height:180px;width:auto;object-fit:contain}
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:16px;padding-block:26px 38px}
  /* display:contents promotes the copy column's children to grid items so the
     product shot can sit between the Quick Answer and the CTA without moving
     anything in the DOM. Source order still runs H1 -> Quick Answer. */
  .hero__copy{display:contents}
  .hero__copy>.pill{order:1}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:4}
  .hero__media{order:3}
  .hero__copy>.hero__cta{order:5}
  .hero__copy>.hero__rating{order:6}
  .hero__copy>.ticks{order:7}
  .hero__copy>.pay{order:8}
  .hero__stick{padding:8px 10px}
  .hero__stick img{max-width:198px;margin-inline:auto}
  .hero__tag{margin-top:10px;font-size:0.9062rem}
  .floaty{display:none}

  .hero .factpills{order:10}
  .hero .figures{order:11}
  /* Without an order these default to 0 and sort above the H1.
     See fix_hero_order.py, ensure_restored_blocks. */
}

/* ---- 7. QUICK ANSWER ----------------------------------------------------- */
.answer{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:16px 20px;margin:16px 0 0}
.answer .qtag{display:block;margin-bottom:.45em;font-size:0.8438rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dp)}
.answer p{margin:0;font-size:1.062rem;line-height:1.62}

/* In the hero the answer is not a card: the approved layout runs it as two
   flowing paragraphs under the H1. The wrapper stays -- it is the speakable
   selector and the AEO block -- but the card styling and the label come off.
   display:contents promotes .hero__rating to a grid item on mobile, so it
   carries an explicit order above or it lands at 0 and jumps the eyebrow. */
.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(--ink-2);margin:0 0 .85em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--ink)}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.95rem;color:var(--ink-2)}
.hero__rating b{color:var(--ink)}
.hero__rating .rev__stars{color:var(--gold);letter-spacing:.06em}


/* ---- hero motif -- double-halo ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:radial-gradient(90% 70% at 50% 10%,#f1e6cf,#f7f2e8 66%,#f7f2e8)}.hero__media::before{content:'';position:absolute;left:50%;top:0;width:140%;aspect-ratio:1;translate:-50% -22%;border-radius:50%;box-shadow:0 0 0 1px rgba(216,178,94,0.50),0 0 0 14px rgba(216,178,94,0.20);animation:btHalo 6s ease-in-out infinite;z-index:1}@keyframes btHalo{0%,100%{scale:.96;opacity:.7}50%{scale:1.04;opacity:1}}
@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.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@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;}
}
/* --- end of the copied hero responsive rules --- */

/*!SITE-HOME-CRIT-START*/
/* ---- home hero: desktop reading order --------------------------------
   Measured at 1440x900: the hero CTA sat at y=901, one pixel under the
   fold, so the money page's first screen had nothing to click. Above
   920px the copy column becomes a flex column and the buttons move up
   under the Quick Answer -- eyebrow, headline, quick answer, BUTTONS,
   payment line, then the evidence. The phone order is composed
   separately with display:contents at <=920px and is not touched.
   Layout, so it sits above the marker and is inlined into every page. */
@media(min-width:921px){
  .hero .hero__copy{display:flex;flex-direction:column}
  .hero .hero__copy>*{order:20}
  .hero .hero__copy>.pill{order:1;align-self:flex-start}
  .hero .hero__copy>h1{order:2}
  .hero .hero__copy>.hero__sub{order:3}
  .hero .hero__copy>.answer{order:4}
  .hero .hero__copy>.hero__cta{order:5}
  .hero .hero__copy>.pay{order:6}
  .hero .hero__copy>.hero__rating{order:7}
  .hero .hero__copy>.ticks{order:8}
  .hero .hero__copy>.factpills{order:9}
  .hero .hero__copy>.figures{order:10}
}
/* The recommended tier is raised with margin-top, never transform: the
   reveal pass settles every revealed block at transform:none and would
   drop a transform raise. The row bottom does not move, and the three
   Add To Cart buttons keep the offsets they had. .prices is a single
   column at <=980px, where a raise would only look like a stray gap. */
@media(min-width:981px){
  body:has(.hero) .price--best{margin-top:-14px}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---- 8. KEY FACTS (the reference's record rows) -------------------------- */
.qa{margin:0;border-top:2px solid var(--ink)}
.qa__row{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.qa dt{font-size:1.062rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.qa dd{margin:0}
.qa dd b{color:var(--ink)}
@media(max-width:640px){.qa__row{grid-template-columns:1fr;gap:2px}}

.factpills{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.factpills li{padding:6px 11px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:0.9062rem;color:var(--ink-2)}
.factpills li b{color:var(--ink)}

.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.figures div{padding:15px 17px;border-left:1px solid var(--line)}
.figures div:first-child{border-left:0}
.figures b{display:block;font-family:var(--serif);font-size:1.75rem;font-weight:700;line-height:1}
.figures span{display:block;margin-top:4px;font-size:0.9062rem;color:var(--ink-3)}

/* ---- 9. GRIDS AND CARDS (flat, coloured top edge) ----------------------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:var(--radius);padding:22px 24px}
.card--wine{border-top-color:var(--wine)}
.card--slab{border-top-color:var(--slab)}
.card h3{margin-bottom:.4em}
.card p{margin:0 0 .8em;color:var(--ink-2);font-size:1.062rem}
.card p:last-child{margin-bottom:0}
.card .ic{width:46px;height:46px;margin-bottom:13px;display:grid;place-items:center;
  background:var(--gold-lt);border-radius:var(--radius-sm);overflow:hidden}
.card .ic img{width:32px;height:32px;object-fit:contain}
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:940px){.whygrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.whygrid{grid-template-columns:1fr}}

/* ---- 10. SPLIT, CHIPS, STEPS, BAND -------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.split--rev .split__media{order:2}
.split__media img{border:1px solid var(--line);border-radius:var(--radius);margin:0 auto}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:26px}.split--rev .split__media{order:0}}

.chips{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px}
.chips li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start}
.chips .ck{color:var(--gold-dp);font-weight:700;line-height:1.55}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:s}
.step{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:var(--radius);padding:22px 24px}
.step__n{counter-increment:s;font-family:var(--serif);font-weight:700;font-size:1.5rem;
  color:var(--gold-dp);line-height:1;margin-bottom:10px;display:block}
.step__n::before{content:counter(s,decimal-leading-zero)}
.step h3{margin-bottom:.35em}
.step p{margin:0;color:var(--ink-2);font-size:1.062rem}
@media(max-width:900px){.steps{grid-template-columns:1fr}}

.usesteps{list-style:none;margin:0;padding:0;counter-reset:u}
.usesteps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;
  padding:15px 0;border-bottom:1px dashed var(--line)}
.usesteps li::before{counter-increment:u;content:counter(u,decimal-leading-zero);
  font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--gold-dp)}
.usesteps b{display:block;margin-bottom:.2em}

.band{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  overflow:hidden;margin-inline:auto;max-width:var(--measure-wide)}
.band img{width:100%;display:block}
.band__cap{padding:13px 20px;border-top:1px solid var(--line);background:var(--paper-2);
  font-size:.86rem;color:var(--ink-2)}

/* ---- 11. SHOTS ----------------------------------------------------------- */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.shots figure{margin:0;background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--gold);border-radius:var(--radius);overflow:hidden}
.shots img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--paper-2)}
.shots--wide img{aspect-ratio:4/3}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:.3em;font-family:var(--serif);font-size:1.05rem;color:var(--ink)}
.shots figcaption span{font-size:0.9062rem;color:var(--ink-2)}
@media(max-width:940px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.shots{grid-template-columns:1fr}}

/* ---- 12. INGREDIENT ROWS ------------------------------------------------- */
.inglist{display:grid;gap:0;border-top:2px solid var(--ink)}
.ing{padding:24px 0;border-bottom:1px solid var(--line)}
.ing__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:.6em}
.ing__top h3{margin:0}
.ing__dose{font-weight:700;font-size:0.8438rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--gold-lt);color:var(--gold-dp);border:1px solid var(--gold-line);
  border-radius:var(--radius-sm);padding:4px 10px}
.ing__lat{font-size:0.9062rem;color:var(--ink-3);font-style:italic}
.ing p{margin:0 0 .7em}
.ing p:last-child{margin-bottom:0}
.ingthumbs{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 26px;padding:0;list-style:none}
.ingthumbs li{width:120px;text-align:center;font-size:1.062rem;color:var(--ink-2)}
.ingthumbs img{border:1px solid var(--line);border-radius:var(--radius);margin:0 auto .5em}

/* ---- 13. PRICING --------------------------------------------------------- */
.prices{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:20px;align-items:stretch}
.price{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--gold);border-radius:var(--radius);padding:24px 22px;
  text-align:center;position:relative}
.price--best{border:1px solid var(--wine-line);border-top:3px solid var(--wine);
  background:var(--card);padding:30px 24px}
.price--ordered{border-top-color:var(--slab)}
.price__badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--wine);color:#fff;font-weight:700;font-size:0.9062rem;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 12px;border-radius:var(--radius-sm);white-space:nowrap}
.price--ordered .price__badge{background:var(--slab)}
.price img{margin:0 auto 12px;height:auto}
.price h3{margin-bottom:.15em}
.price__supply{font-size:0.8438rem;color:var(--ink-3);margin-bottom:.8em}
.price__each{font-family:var(--serif);font-weight:700;font-size:2.4rem;line-height:1;color:var(--wine)}
.price--best .price__each{font-size:2.9rem}
.price__each small{display:block;margin-top:4px;font-family:var(--sans);font-size:0.9062rem;
  font-weight:600;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.price__was{color:var(--ink-3);text-decoration:line-through;font-size:0.9062rem;margin:.4em 0 0}
.price__tot{font-weight:700;margin:.35em 0 1em}
.price__save{display:inline-block;margin-left:6px;padding:3px 9px;background:var(--gold-lt);
  border:1px solid var(--gold-line);border-radius:var(--radius-sm);color:var(--gold-dp);
  font-size:0.8438rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.price .btn--block{margin-top:auto}
.price__ship{margin:.75em 0 0;font-size:0.9062rem;color:var(--ink-3)}
@media(max-width:980px){
  .prices{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  .price:nth-child(1){order:3}
  .price:nth-child(2){order:1}
  .price:nth-child(3){order:2}
}

/* ---- 14. STATS, TRUST, BADGES, PROMO ------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.stat{padding:20px 18px;border-left:1px solid var(--line);text-align:center}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--serif);font-size:2rem;font-weight:700;line-height:1;color:var(--wine)}
.stat span{display:block;margin-top:5px;font-size:0.9062rem;color:var(--ink-3)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}}

.trust{background:var(--card);border-bottom:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:18px 34px;padding-block:18px}
.trust__item{display:flex;align-items:center;gap:9px;font-size:0.9062rem;font-weight:600;color:var(--ink-2)}
.trust__item img{height:38px;width:auto}
.badgewall{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}
.badgewall img{height:58px;width:auto}

.promo{background:var(--slab);color:var(--slab-ink);padding:26px 0}
.promo__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.promo b{color:#fff}
/* A link here inherits the global a{color:var(--gold-dp)}, which is the dark
   gold meant for the light grounds: #7f5d1b on the near-black slab measures
   2.94:1 and reads as absent. The bright gold is the slab's own accent.
   :not(.btn) matters -- without it this rule outranks .btn--gold's own
   color:#fff (both 0,1,1, and this one is later), repainting the button's
   label bright gold on the gold ground at 2.71:1. Measured, not guessed. */
.promo a:not(.btn){color:var(--gold-br)}
.promo .btn{flex:none}

.rbars{display:grid;gap:8px;max-width:440px}
.rbar{display:grid;grid-template-columns:42px 1fr 46px;align-items:center;gap:10px;font-size:.88rem}
.rbar .track{height:8px;background:var(--paper-3);border-radius:var(--radius-sm);overflow:hidden}
.rbar .fill{height:100%;background:var(--gold);border-radius:var(--radius-sm)}
.rev__stars{color:var(--gold);letter-spacing:.06em}

/* ---- 15. CALLOUTS -------------------------------------------------------- */
.callout{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:20px 24px}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--wine-lt);border:1px solid var(--wine-line);border-left:3px solid var(--wine);
  border-radius:var(--radius);padding:20px 24px}
.alert p:last-child{margin-bottom:0}
.verify{background:var(--verify-lt);border:1px solid #c7ddcd;border-left:3px solid var(--verify);
  border-radius:var(--radius);padding:20px 24px}
.verify p:last-child{margin-bottom:0}

/* ---- 16. TABLES ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.dtable{width:100%;font-size:1rem;min-width:520px}
.dtable th,.dtable td{padding:11px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
.dtable thead th{background:var(--slab);color:#fff;border-bottom:0;font-family:var(--sans);
  font-size:0.9062rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.dtable tbody tr:nth-child(even){background:var(--paper-2)}
.dtable tbody tr:last-child td{border-bottom:0}
.facttab{width:100%;font-size:.94rem}
.facttab th,.facttab td{padding:11px 0;text-align:left;border-bottom:1px solid var(--line-soft)}
.facttab th{width:38%;font-weight:700}

/* ---- 17. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:0;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line); padding: 0 0}
.faq summary{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--ink);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;color:var(--gold-dp);font-weight:700;font-size:1.2rem;line-height:1.2}
.faq details[open] summary::after{content:"\2212"}
.faq__b{padding-top:.8em;color:var(--ink-2)}
.faq__b p:last-child{margin-bottom:0}

/* ---- 18. FORMS ----------------------------------------------------------- */
.formcard{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:var(--radius);padding:26px}
.form__row{display:grid;gap:15px;margin-bottom:15px}
@media(min-width:680px){.form__row--2{grid-template-columns:1fr 1fr}}
.form label{display:block;margin-bottom:5px;font-size:0.9062rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.form input,.form select,.form textarea{width:100%;font-family:inherit;font-size:1rem;
  padding:11px 13px;background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--gold-dp);
  outline-offset:1px;background:#fff}
.form textarea{min-height:130px;resize:vertical}
.form__hint{margin-top:6px;font-size:0.9062rem;color:var(--ink-3)}
.form__msg{display:none;margin-top:14px;padding:12px 15px;background:var(--gold-lt);
  border:1px solid var(--gold-line);border-radius:var(--radius-sm);font-size:.92rem}
.form__msg.show{display:block}

/* ---- 19. FINAL CTA ------------------------------------------------------- */
.final{background:var(--slab);color:var(--slab-ink);border-radius:var(--radius);padding:38px 36px}
.final h2{color:#fff;margin-top:0}
.final p{color:var(--slab-ink)}
.final b,.final strong{color:#fff}
.final a{color:var(--gold-br)}
.final .btn--cta{color:#fff}
.final--media{display:grid;grid-template-columns:.78fr 1.22fr;gap:34px;align-items:center}
.final--media .final__img img{width:100%;max-width:300px;height:auto;margin-inline:auto}
.final__price{font-family:var(--serif);font-size:1.75rem;font-weight:700;color:var(--gold-br);margin:.2em 0 .7em}
.final__note{margin:1.1em 0 0;font-size:0.9062rem;color:var(--slab-ink-2)}
@media(max-width:880px){
  .final--media{grid-template-columns:1fr;gap:22px;text-align:center}
  .final--media .final__img img{max-width:210px}
  .final{padding:30px 22px}
}

/* ---- 20. RELATED / BYLINE / REFS / CRUMBS -------------------------------- */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rel a{display:block;background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--gold);border-radius:var(--radius);padding:20px 22px;color:var(--ink)}
.rel a:hover{text-decoration:none;border-color:var(--line-2);border-top-color:var(--wine)}
.rel b{display:block;margin-bottom:.3em;font-family:var(--serif);font-size:1.08rem}
.rel span{font-size:.9rem;color:var(--ink-2)}
@media(max-width:880px){.rel{grid-template-columns:1fr}}

.byline{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:start;
  margin-top:2.2em;padding:18px 22px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:var(--radius)}
.byline img{border:1px solid var(--line);border-radius:var(--radius-sm)}
.byline b{display:block;margin-bottom:.35em;font-family:var(--serif);font-size:1.05rem}
.byline p{margin:0;font-size:0.9062rem;color:var(--ink-2)}
@media(max-width:600px){.byline{grid-template-columns:1fr}}

.refs{font-size:.87rem;color:var(--ink-2)}
.refs ol{padding-left:1.3em;display:grid;gap:.55em;margin:0}
.refs a{word-break:break-word}
.crumbs{margin:0;padding:12px 0 0;font-size:0.9062rem;color:var(--ink-3)}
.crumbs a{color:var(--ink-2)}
.legal p{max-width:var(--measure)}
.pullquote{margin:1.5em 0;padding-left:18px;border-left:3px solid var(--gold);
  font-family:var(--serif);font-size:1.14rem;color:var(--ink)}
.pullquote p{margin:0 0 .35em}
.pullquote cite{display:block;font-family:var(--sans);font-style:normal;font-weight:600;
  font-size:0.8438rem;color:var(--ink-3)}
.dropcap::first-letter{float:left;font-family:var(--serif);font-weight:700;font-size:3rem;
  line-height:.86;padding:.06em .1em 0 0;color:var(--gold-dp)}

/* ---- 21. STICKY DOCK ----------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--slab);color:#fff;
  border-top:2px solid var(--gold);transform:translateY(105%);transition:transform .28s var(--ease)}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--wrap);margin-inline:auto;padding:10px 22px}
.buybar__t{font-size:0.9062rem;line-height:1.32;color:var(--slab-ink)}
.buybar__t b{display:block;font-family:var(--serif);font-size:1.02rem;color:#fff}
.buybar__t .from{color:var(--gold-br);font-weight:700}
.buybar .btn{white-space:nowrap}
@media(max-width:600px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:0.9062rem}}

/* ---- 22. FOOTER: brand and method left, all links right ------------------ */
footer{background:var(--slab);color:var(--slab-ink-2);padding:48px 0 26px;font-size:.92rem}
footer h4{margin-bottom:.9em;color:#fff;font-family:var(--sans);font-size:.72rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase}
footer a{color:var(--slab-ink)}
footer a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:1.05fr 1.45fr;gap:44px;
  padding-bottom:30px;border-bottom:1px solid var(--slab-line)}
.flinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5em}
.fbrand{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:#fff;margin-bottom:.3em}
.fbrand span{color:var(--gold-br)}
.fmethod{font-size:.86rem;line-height:1.7;color:var(--slab-ink-2)}
.fbadges{display:flex;flex-wrap:wrap;gap:11px;margin-top:16px}
.fbadges img{height:36px;width:auto}
.fnap{padding-top:22px;font-size:0.9062rem;line-height:1.75;border-bottom:1px solid var(--slab-line);
  padding-bottom:20px}
.fpay{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:18px 0;
  border-bottom:1px solid var(--slab-line);font-size:0.9062rem}
.fpay img{height:22px;width:auto}
.disc{padding-top:20px;font-size:0.9062rem;line-height:1.68;color:var(--slab-ink-2)}
.disc p{margin-bottom:.85em}
.disc b{color:var(--slab-ink)}
.copy{color:#8d8677}
@media(max-width:940px){.fgrid{grid-template-columns:1fr;gap:30px}}
@media(max-width:640px){.flinks{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.flinks{grid-template-columns:1fr}}

/* ---- 23. BLOG ------------------------------------------------------------ */
.article{max-width:var(--prose);margin-inline:auto}
.article h2{margin-top:1.7em;scroll-margin-top:110px}
.article h3{margin-top:1.35em}
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:7px 15px;margin:0 0 1.7em;
  padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:0.9062rem;color:var(--ink-3)}
.postmeta b{color:var(--ink)}
.postmeta .sep{color:var(--line-2)}
.toc{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:20px 24px;margin:0 0 2em}
.toc h2{margin:0 0 .9em!important;font-family:var(--sans);font-size:.72rem!important;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dp)}
.toc ol{margin:0;padding-left:1.2em;display:grid;gap:.4em;font-size:.94rem}
.toc a{color:var(--ink)}
.keypoints{background:var(--gold-lt);border:1px solid var(--gold-line);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:20px 24px;margin:0 0 1.9em}
.keypoints>b{display:block;margin-bottom:.9em;font-size:0.8438rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dp)}
.keypoints ul{margin:0;padding-left:1.15em;display:grid;gap:.45em}
.keypoints li b{color:var(--gold-dp)}
.article figure{margin:2em 0}
.article figure img{width:100%;border:1px solid var(--line);border-radius:var(--radius)}
.article figcaption{margin-top:.6em;font-size:0.9062rem;color:var(--ink-3);text-align:center}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;padding:28px 26px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{margin:0 0 .45em;font-size:1.55rem;line-height:1.22}
.article .final--media .final__price{font-size:1.35rem;margin:.25em 0 .65em}
@media(max-width:620px){
  .article .final--media{grid-template-columns:1fr;text-align:center;padding:26px 20px}
  .article .final--media h2{font-size:1.4rem}
}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--radius);overflow:hidden}
.posts img{width:100%;object-fit:cover;background:var(--paper-2)}
.posts .pbody{display:flex;flex-direction:column;flex:1;padding:20px 22px}
.posts h3{margin:0 0 .4em;font-size:1.1rem}
.posts h3 a{color:var(--ink)}
.posts p{margin:0 0 .9em;font-size:1.062rem;color:var(--ink-2)}
.posts .pmeta{margin-top:auto;font-size:0.9062rem;color:var(--ink-3)}
@media(max-width:940px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}

/* ---- 24. MOTION: slide in from the right --------------------------------- */
[data-reveal]{opacity:0;transform:translateX(30px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
.anim{opacity:0;animation:slideLeft .58s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes slideLeft{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  .anim{opacity:1;animation:none}
  html{scroll-behavior:auto}
}

/* ---- 25. SINGLE-COLUMN MEASURE ------------------------------------------
   Single-column content takes a measure and is centred; multi-column
   components are excluded by not being listed, so they keep the full wrap.
   px, not ch: ch resolves against each element's own font-size and would give
   .note and .lead different left edges from the same token. */
.sec > .wrap > h2,
.sec > .wrap > h3,
.sec > .wrap > h4,
.sec > .wrap > p,
.sec > .wrap > ul,
.sec > .wrap > ol,
.sec > .wrap > dl,
.sec > .wrap > .sec__head,
.sec > .wrap > .callout,
.sec > .wrap > .alert,
.sec > .wrap > .verify,
.sec > .wrap > .byline,
.sec > .wrap > .refs,
.sec > .wrap > .pullquote,
.sec > .wrap > blockquote{max-width:var(--measure);margin-inline:auto}
.sec > .wrap > .tablewrap,
.sec > .wrap > .faq,
.sec > .wrap > .steps,
.sec > .wrap > .usesteps,
.sec > .wrap > .qa{max-width:var(--measure-wide);margin-inline:auto}
.sec--center > .wrap > .sec__head{margin-inline:auto}
@media(max-width:1060px){
  .sec > .wrap > h2,.sec > .wrap > h3,.sec > .wrap > h4,.sec > .wrap > p,
  .sec > .wrap > ul,.sec > .wrap > ol,.sec > .wrap > dl,.sec > .wrap > .sec__head,
  .sec > .wrap > .callout,.sec > .wrap > .alert,.sec > .wrap > .verify,
  .sec > .wrap > .byline,.sec > .wrap > .refs,.sec > .wrap > .pullquote,
  .sec > .wrap > blockquote,.sec > .wrap > .tablewrap,.sec > .wrap > .faq,
  .sec > .wrap > .steps,.sec > .wrap > .usesteps,.sec > .wrap > .qa{max-width:100%}
}
/* brand mark: bracket construction */
.brand{position:relative;padding-inline:14px}.brand::before,.brand::after{content:'';position:absolute;top:2px;bottom:2px;width:8px;border:2px solid #d8b25e}.brand::before{left:0;border-right:0}.brand::after{right:0;border-left:0}


/* ---- hero: sticky, centred product column ------------------------------
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past.

   --navh is measured and published by site.js: nav heights run 66-99px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller ones.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it. Without it the box is only as tall as the image and
   `top` merely pins it under the header, which is what the old house rule did.

   Requires .hero NOT to clip on the block axis -- any non-visible overflow on
   an ancestor becomes the scrollport sticky resolves against. See pitfall 65,
   whose first fix got this wrong. */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 88px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 88px) - 28px);
    min-height: calc(100svh - var(--navh, 88px) - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

   `relative` lays out identically to `static` and keeps the containing block.
   `top:0` is not decoration: the rule above sets a top offset of one nav height
   plus 14px, which a relative box would apply for real and push the plate
   ~110px down the page (pitfall 65). Written WITHOUT naming that custom
   property in the usual var() form on purpose -- preflight's undefined-variable
   check reads comments too, so a property named here is a property it believes
   the sheet uses. Measured on 7 sites before and after (pitfall 107). */
@media (prefers-reduced-motion: reduce) {
  .hero__media { position: relative; top: 0; min-height: 0; }
}

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

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

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav--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 + hero motif ----------------------------------
   Assigned slot: radius_card 16 / radius_control 10, depth "deep ambient
   only, very diffuse", motif family "rise", ribbon "tab above the card".

   The tokens below carry their own --bx- names on purpose. modern_surface.py
   re-declares :root{--radius,--shadow,--lift} and footer_type.py re-appends
   its block on every build, and both land AFTER this one -- so nothing here
   may depend on being last. Every rule beats them on specificity instead.

   Scoped to the home page. .card, .price, .btn, the header and the footer
   all appear on other pages, so everything that is not already inside .hero
   is scoped body:has(.hero), which resolves on index.html alone.

   Paint only -- radius, shadow, background, colour, transform, transition
   and animation move no box, so this belongs below the marker and needs a
   restamp rather than a rebuild. */
:root{
  --bx-rc:16px;                 /* slot radius_card    */
  --bx-rk:10px;                 /* slot radius_control */
  /* One wide, very diffuse ambient stop -- no tight contact shadow. Tinted
     with this site's own ink (28,26,22), never neutral black. */
  --bx-amb:0 22px 60px -26px rgba(28,26,22,.36);
  --bx-amb-hi:0 30px 74px -26px rgba(28,26,22,.46);
  --bx-amb-wine:0 24px 64px -24px rgba(92,23,39,.40);
  --bx-amb-wine-hi:0 32px 78px -24px rgba(92,23,39,.50);
  /* The buying CTA is the only gradient on the page: the wine strip on the
     label, lit from the top left. The ghost button stays flat, so the pair
     reads as two weights rather than two buttons. */
  --bx-cta:linear-gradient(135deg,#8d2c42 0%,#7c2438 52%,#5c1727 100%);
  --bx-cta-hi:linear-gradient(135deg,#9b3149 0%,#8a2a40 52%,#6b1b2e 100%);
  --bx-ease:cubic-bezier(.22,1,.36,1);
}

/* ---- controls -------------------------------------------------------- */
/* box-shadow is deliberately NOT in any resting transition list. This sheet
   is loaded async (preload -> rel=stylesheet), so when it lands box-shadow
   changes from `none` to a real value; with a transition on it that counts
   as an animation, and an element still below the fold never ticks it -- the
   shadow parks at fully transparent and simply never appears. Measured:
   .card and .price--best both computed rgba(0,0,0,0) 0 0 0 0 with the
   transition in place and the correct value the instant it was removed.
   The shadow's own transition is declared inside :hover, where the
   before-change style is real and the element is by definition on screen. */
body:has(.hero) .btn{border-radius:var(--bx-rk);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,
             transform .26s var(--bx-ease)}
body:has(.hero) .btn--cta{background-image:var(--bx-cta);box-shadow:var(--bx-amb-wine)}
body:has(.hero) .btn--cta:hover{background-image:var(--bx-cta-hi);
  background-color:var(--wine-dk);
  box-shadow:var(--bx-amb-wine-hi);transform:translateY(-2px);
  transition:background-color .2s ease,box-shadow .26s var(--bx-ease),
             transform .26s var(--bx-ease)}
body:has(.hero) .btn--ghost:hover,
body:has(.hero) .btn--gold:hover{box-shadow:var(--bx-amb);transform:translateY(-2px);
  transition:background-color .2s ease,border-color .2s ease,
             box-shadow .26s var(--bx-ease),transform .26s var(--bx-ease)}
body:has(.hero) .btn:focus-visible{outline:2px solid var(--gold-dp);outline-offset:3px;
  box-shadow:0 0 0 5px rgba(216,178,94,.34)}
body:has(.hero) .burger{border-radius:var(--bx-rk)}
/* The sticky bottom CTA is the same control, so it gets the same weight.
   .buybar transitions transform only, so a shadow on it is safe. */
body:has(.hero) .buybar{box-shadow:0 -18px 48px -26px rgba(28,26,22,.70)}

/* ---- panels ---------------------------------------------------------- */
/* These carried border-radius but box-shadow:none, so every panel read flat
   however generous the radius was -- the dated signature this pass exists to
   remove. modern_surface.py styles .faq and .article figure only, and it is
   left alone. */
body:has(.hero) .card,
body:has(.hero) .stats,
body:has(.hero) .band,
body:has(.hero) .shots figure,
body:has(.hero) .promo{border-radius:var(--bx-rc);box-shadow:var(--bx-amb)}
body:has(.hero) .card{transition:transform .28s var(--bx-ease)}
body:has(.hero) .card:hover{box-shadow:var(--bx-amb-hi);transform:translateY(-2px);
  transition:box-shadow .28s var(--bx-ease),transform .28s var(--bx-ease)}
body:has(.hero) .band{overflow:hidden}

/* ---- pricing --------------------------------------------------------- */
body:has(.hero) .price{border-radius:var(--bx-rc);box-shadow:var(--bx-amb)}
body:has(.hero) .price:hover{box-shadow:var(--bx-amb-hi);
  transition:box-shadow .28s var(--bx-ease)}
/* The recommended tier is the one with a different ground and a wine-tinted
   depth; the raise itself is the margin-top above the marker. */
body:has(.hero) .price--best{
  background:linear-gradient(180deg,#fff8ee 0%,var(--card) 46%);
  box-shadow:var(--bx-amb-wine)}
body:has(.hero) .price--best:hover{box-shadow:var(--bx-amb-wine-hi)}
/* Slot ribbon: a tab standing on the card's top edge rather than a pill
   floating over it. Absolutely positioned, so none of this moves a box. */
body:has(.hero) .price__badge{top:auto;bottom:100%;margin-bottom:-1px;
  border-radius:var(--bx-rk) var(--bx-rk) 0 0;padding:6px 15px 7px;
  box-shadow:0 -12px 28px -16px rgba(28,26,22,.55)}
body:has(.hero) .price--basic .price__badge{background:var(--gold-dp)}
/* Dashed separators between the feature rows, drawn on pseudo-elements that
   are out of flow -- a real border-top would add a pixel to the box and walk
   the three Add To Cart buttons off their shared offset. */
body:has(.hero) .price__each,
body:has(.hero) .price__ship{position:relative}
body:has(.hero) .price__each::before,
body:has(.hero) .price__ship::before{content:"";position:absolute;
  left:2px;right:2px;top:-7px;border-top:1px dashed var(--line-2)}

/* ---- hero motif: "rise" ---------------------------------------------- */
/* Warmth rising from the base of the bottle, drifting up and fading. It
   lives on a pseudo-element of the media column, never on the <img> -- that
   is the LCP element and it is preloaded. ::before is already the halo from
   an earlier pass, so this is ::after. Sized at 136% of a 513px column, it
   is wider than the 408px product card and reads outside it. transform and
   opacity only; 19s, because this is a capsule taken daily for weeks. */
body:has(.hero) .hero__media::after{content:"";position:absolute;z-index:0;
  left:50%;bottom:2%;width:136%;height:80%;pointer-events:none;
  background:
    radial-gradient(40% 44% at 50% 100%,rgba(216,178,94,.54),rgba(216,178,94,0) 72%),
    radial-gradient(22% 62% at 50% 82%,rgba(190,146,66,.26),rgba(190,146,66,0) 74%),
    radial-gradient(12% 74% at 50% 62%,rgba(216,178,94,.20),rgba(216,178,94,0) 78%);
  transform:translate(-50%,6%) scale(.93);
  animation:bxRiseWarm 19s var(--bx-ease) infinite}
@keyframes bxRiseWarm{
  0%,100%{transform:translate(-50%,6%) scale(.93);opacity:.42}
  50%{transform:translate(-50%,-6%) scale(1.08);opacity:.96}
}
/* The halo keeps its keyframe and its place -- it is another pass's work --
   but a 6s pulse is an energy-drink tempo. Softened and slowed to match. */
body:has(.hero) .hero__media::before{
  box-shadow:0 0 0 1px rgba(216,178,94,.34),0 0 0 22px rgba(216,178,94,.09);
  animation-duration:24s}

/* The .anim delays are written inline on the markup in source order. The
   desktop column now reads quick answer -> buttons -> payment -> evidence,
   so the delays are re-dealt to match. !important is the only thing that
   outranks an inline custom property. */
@media(min-width:921px){
  .hero .hero__copy>.hero__cta{--d:230ms!important}
  .hero .hero__copy>.pay{--d:290ms!important}
  .hero .hero__copy>.ticks{--d:350ms!important}
}

@media(prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::after,
  body:has(.hero) .hero__media::before{animation:none!important}
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .btn--gold:hover,
  body:has(.hero) .card:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer{font-size:16px}
footer h4{font-size:15px}
footer .disc{font-size:16px}
footer .fmethod{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 16 box-shadow declaration(s)
   and 2 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (28,26,22), 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{
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(28,26,22,.06), 0 6px 18px rgba(28,26,22,.07);
  --lift:0 2px 6px rgba(28,26,22,.09), 0 16px 34px rgba(28,26,22,.14);
}

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

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