/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Chivo Fallback";src:local("Arial");font-weight:400;size-adjust:108.03%;ascent-override:87.01%;descent-override:23.14%;line-gap-override:0.00%}
@font-face{font-family:"Chivo Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:101.57%;ascent-override:92.55%;descent-override:24.61%;line-gap-override:0.00%}
@font-face{font-family:"Figtree Fallback";src:local("Arial");font-weight:400;size-adjust:101.52%;ascent-override:93.58%;descent-override:24.63%;line-gap-override:0.00%}
@font-face{font-family:"Figtree Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:96.56%;ascent-override:98.39%;descent-override:25.89%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   BOOSTARO — boostarovitality.com
   Component system taken from the memozhoney.com reference: a clinical record
   sheet. Hairline rules instead of shadows, uppercase micro-labels on wide
   letter-spacing, a section header device with a rule across the top, dense
   key-fact rows, numbered steps with leading-zero counters, flat data tables.
   Nothing amber survives from the reference; colour always comes from the
   bottle.
   Palette re-derived from the Boostaro bottle — white body, oxblood base band,
   wine-red wordmark and floral mark, on a near-white ground.
   Type: Chivo (characterful display) + Figtree (humanist body). Pre-assigned in
   _generators/batch_assignments.py so ten parallel builds cannot converge.
   Chrome for this site: a dark slim bar carrying a rotating trust ticker, then
   logo-left / menu-right; a five-column dense link wall on dark with a payment
   strip beneath; 10px radii; cards that lift on hover; a hero with a hard-edged
   colour block behind the product; ticker scroll and a count-up stat row.
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* near-white ground + ink */
  --paper:      #fbf9f8;
  --tint:       #f5efee;
  --tint2:      #ede1df;
  --card:       #ffffff;
  --ink:        #1e1518;
  --ink-dk:     #120c0e;
  --muted:      #5f5054;
  --faint:      #796a6d;
  --line:       #e6dad8;
  --line-soft:  #f1e9e7;

  /* the wordmark wine — the lead, sampled from the label */
  --wine:       #9c2233;
  --wine-dk:    #7c1828;
  --wine-dp:    #5e1a1d;
  --wine-lt:    #fbeded;
  --wine-line:  #eccdd0;

  /* the oxblood base band, used for dark ground */
  --slab:       #241315;
  --slab-2:     #3a1f20;

  /* a brass signal colour for the guarantee marks */
  --brass:      #a9762f;
  --brass-lt:   #fbf4e8;
  --brass-line: #ecdbba;

  --verify:     #1d6b4a;

  --shadow:     0 18px 38px -26px rgba(30,21,24,.55);
  --shadow-sm:  0 10px 22px -18px rgba(30,21,24,.45);
  --ease:       cubic-bezier(.22,1,.36,1);

  /* the assigned radius: a soft rectangle, never a pill */
  --r-s: 6px; --r: 10px; --r-l: 14px;

  --display:'Chivo','Chivo Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sans:'Figtree','Figtree 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:104px}
body{
  margin:0;font-family:var(--sans);font-size:17px;line-height:1.7;
  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(--wine-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.16;letter-spacing:-.018em;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.02rem}
p{margin:0 0 1.1em}
strong,b{font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--wine-lt)}
table{border-collapse:collapse}
section[id]{scroll-margin-top:104px}
:focus-visible{outline:2px solid var(--wine);outline-offset:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.prose{max-width:var(--prose)}
.center{text-align:center}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--wine-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(--display);font-weight:700;font-size:0.8438rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--wine-dk);margin-bottom:.85rem}
.note{font-size:0.9062rem;color:var(--faint);line-height:1.62}
.lead{font-size:1.16rem;line-height:1.62;color:var(--muted)}

.pill{display:inline-flex;align-items:center;gap:8px;background:var(--slab);color:#f0d6d6;
  font-family:var(--display);font-weight:700;font-size:0.8438rem;letter-spacing:.14em;
  text-transform:uppercase;padding:8px 14px;border-radius:var(--r-s);margin-bottom:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--display);font-weight:700;font-size:.95rem;padding:.92em 1.7em;
  border-radius:var(--r-s);cursor:pointer;border:1px solid transparent;min-height:46px;
  letter-spacing:.03em;
  transition:transform .14s var(--ease),background .2s ease,box-shadow .2s ease;
  text-decoration:none;line-height:1;text-align:center}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--cta{background:var(--wine);color:#fff}
.btn--cta:hover{background:var(--wine-dk);color:#fff;box-shadow:0 12px 24px -14px rgba(156,34,51,.9)}
.btn--ghost{background:#fff;color:var(--wine-dk);border-color:var(--wine-line)}
.btn--ghost:hover{background:var(--wine-lt);color:var(--wine-dp)}
.btn--dark{background:var(--slab);color:#fff}
.btn--dark:hover{background:#000;color:#fff}
.btn--lg{font-size:1.02rem;padding:1.05em 2em}
.btn--block{display:flex;width:100%}

.sec{padding:70px 0;border-top:1px solid var(--line-soft)}
.sec--tint{background:var(--tint)}
.sec--wine{background:linear-gradient(180deg,var(--tint) 0%,var(--tint2) 100%)}
.sec--slab{background:var(--slab);color:#e9d8d8;border-top:0}
.sec--slab h2,.sec--slab h3{color:#fff}
.sec--slab a{color:#f0b9bd}
.sec--tight{padding:48px 0}

/* the reference's record device: a rule across the top of every section head,
   with a short coloured segment at the left and the kicker beneath it */
.sec__head{max-width:var(--prose);margin-bottom:32px;padding-top:16px;
  border-top:2px solid var(--ink-dk);position:relative}
.sec__head::before{content:"";position:absolute;top:-2px;left:0;width:86px;height:2px;
  background:var(--wine)}
.sec--center .sec__head{margin-inline:auto;text-align:center}
.sec--center .sec__head::before{left:50%;transform:translateX(-43px)}
.sec--slab .sec__head{border-top-color:#5a3b3c}
.sec--slab .eyebrow{color:#f0b9bd}

/* ---- 4. TOPLINE (ticker) + NAV ------------------------------------------ */
.topline{background:var(--slab);color:#e4cfcf;font-size:0.9062rem}
.topline__row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:0}
.topline__role{font-weight:700;color:#fff;white-space:nowrap;padding:9px 0}
.tick{height:36px;overflow:hidden;flex:1 1 auto;position:relative}
.tick ul{list-style:none;margin:0;padding:0;animation:tickroll 16s steps(4) infinite}
.tick li{height:36px;display:flex;align-items:center;justify-content:center;
  white-space:nowrap;letter-spacing:.04em}
.tick b{color:#fff}
@keyframes tickroll{0%{transform:translateY(0)}100%{transform:translateY(-144px)}}
.topline__tel{color:#f3b8bc;font-weight:700;white-space:nowrap;padding:9px 0}
.topline__tel:hover{color:#fff;text-decoration:none}
@media(max-width:820px){
  .topline__row{justify-content:center;gap:12px}
  .tick{display:none}
  .topline__role{font-size:0.9062rem}
  .topline__tel{font-size:0.9062rem}
}

.nav{position:sticky;top:0;z-index:60;background:rgba(251,249,248,.96);
  backdrop-filter:saturate(150%) blur(8px);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%)}
}
@media(prefers-reduced-motion:reduce){.nav{transition:none}}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:12px;flex-wrap:nowrap}
.brand{display:inline-flex;align-items:center;gap:0;font-family:var(--display);
  font-weight:700;font-size:1.36rem;letter-spacing:-.025em;color:var(--ink-dk);flex:none;
  white-space:nowrap}
.brand:hover{text-decoration:none}
.brand span{color:var(--wine)}
.brand svg{width:30px;height:30px;flex:none;margin-right:9px}
.menu{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0;
  flex-wrap:nowrap}
.menu a{font-size:.83rem;font-weight:600;color:var(--muted);white-space:nowrap;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 0;
  border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink-dk);text-decoration:none;
  border-bottom-color:var(--wine)}
.nav__cta{display:flex;align-items:center;gap:12px;flex:none}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-s);
  flex-direction:column;gap:4px;cursor:pointer;padding:9px}
.burger span{width:20px;height:2px;background:var(--ink);display:block;border-radius:2px}
@media(max-width:1440px){.menu{gap:18px}}
@media(max-width:1340px){.menu{gap:14px}.menu a{font-size:.79rem}}
@media(max-width:1160px){
  .menu{display:none;gap:0}
  .menu.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--paper);border-bottom:1px solid var(--line);padding:6px 22px;
    box-shadow:var(--shadow);max-height:78vh;overflow:auto}
  .menu.open li{border-top:1px solid var(--line-soft)}
  .menu.open a{display:block;padding:13px 0;min-height:44px;border-bottom:0}
  .burger{display:flex;min-height:44px;min-width:44px;align-items:center;justify-content:center}
}
@media(max-width:430px){.nav__cta .btn{display:none}}

/* ---- 5. STICKY BUY BAR --------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--slab);color:#fff;
  transform:translateY(105%);transition:transform .3s var(--ease);
  box-shadow:0 -6px 24px 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:10px 22px}
.buybar__t{font-size:.92rem;line-height:1.3}
.buybar__t b{font-family:var(--display);font-size:1rem;display:block}
.buybar__t .from{color:#f3b8bc;font-weight:700}
.buybar .btn{white-space:nowrap}
@media(max-width:560px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:0.9062rem}}

/* ---- 6. HERO ------------------------------------------------------------- */
/* Light ground with a hard-edged colour block behind the product: no gradient,
   no glow, a straight oxblood rectangle the bottle stands in front of. */
.hero{background:var(--paper);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:48px;align-items:start;
  padding-block:52px 60px}
.hero h1{margin-bottom:.4em}
.hero h1 span{color:var(--wine-dk)}
.hero h1 small{display:block;margin-top:.35em;font-size:.36em;font-weight:600;
  letter-spacing:0;line-height:1.3;color:var(--muted)}
@media(max-width:560px){.hero h1 small{font-size:.46em}}
.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 24px;display:grid;gap:10px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-weight:500;font-size:1.062rem}
.ticks .ck{flex:0 0 20px;height:20px;border-radius:var(--r-s);background:var(--wine-lt);
  color:var(--wine-dp);display:grid;place-items:center;font-size:.7rem;margin-top:4px;
  font-weight:700;border:1px solid var(--wine-line)}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.pay{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.pay img{height:24px;width:auto}
.pay span{font-size:0.9062rem;color:var(--muted);font-weight:600}

.hero__media{position:relative;text-align:center}
.hero__stick{position:relative;display:inline-block}
/* the hard-edged block: square corners, flat colour, offset behind the bottle */
.hero__stick::before{content:"";position:absolute;left:8%;right:8%;top:16%;bottom:12%;
  background:var(--wine-dp);z-index:0}
.hero__card{position:relative;z-index:1;padding:18px 24px;display:inline-block}
.hero__card img{margin:0 auto;position:relative;z-index:1}
.hero__tag{position:absolute;left:0;right:0;bottom:-14px;z-index:2;
  font-family:var(--display);font-weight:700;font-size:0.9062rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--wine);padding:8px 12px;
  border-radius:var(--r-s);margin:0;display:inline-block;position:relative;bottom:0;
  margin-top:14px}
.factpills{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.factpills li{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);
  padding:7px 12px;font-size:0.9062rem;color:var(--muted)}
.factpills 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}
.figures div{padding:15px 16px;border-left:1px solid var(--line)}
.figures div:first-child{border-left:0}
.figures b{display:block;font-family:var(--display);font-size:1.7rem;line-height:1;
  color:var(--wine-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:16px;padding-block:28px 40px}
  /* the two-column grid collapses, so the copy column's children become grid
     items and are ordered individually. DOM order is untouched: the Quick
     Answer still follows the H1 for parsers and for the speakable selector. */
  .hero__copy{display:contents}
  /* display:contents promotes these to grid items, and a grid item stretches
     by default: the chip has to opt out or it paints as a full-width band */
  .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 > .hero__rating{order:6}
  .hero__copy > .pay{order:7}
  .hero__copy > .ticks{order:8}
  .hero__copy > .factpills{order:9}
  .hero__copy > .figures{order:10}
  .hero__card{padding:12px 14px}
  .hero__card img{max-width:206px}
  .hero__stick::before{top:14%;bottom:10%}
  .answer{padding:16px 18px}
  .hero__tag{margin-top:10px;font-size:0.9062rem;padding:7px 10px}
}

/* ---- 7. QUICK ANSWER (AEO) ----------------------------------------------- */
.answer{background:#fff;border:1px solid var(--line);border-left:4px solid var(--wine);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin:20px 0 0}
.answer .qtag{display:block;font-family:var(--display);font-weight:700;font-size:0.8438rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--wine-dk);margin-bottom:.55em}
.answer p{margin:0;font-size:1.062rem}

/* In the hero the answer is not a card: the approved layout runs it as two
   flowing paragraphs under the H1. The wrapper stays -- 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(--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)}
.hero__stars{color:var(--brass);letter-spacing:.1em}


/* ---- hero motif -- flow-lines ---------------------------------------- */
.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(172deg,#fbf9f8,#ead2d5 64%)}.hero__media::before{content:'';position:absolute;inset:12% 0;background:repeating-linear-gradient(98deg,rgba(156,34,51,0.52) 0 2px,transparent 2px 26px);mask-image:radial-gradient(closest-side,#000,transparent 78%);animation:btLines 9s linear infinite;z-index:1}@keyframes btLines{to{background-position:78px 0}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}

/*!CRITICAL-END*/
/* the reference's key-fact register, as a two-column definition list */
.qa{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;max-width:880px;margin:0 auto}
.qa__h{background:var(--wine-lt);padding:14px 22px;font-family:var(--display);font-weight:700;
  font-size:.96rem;color:var(--ink-dk);border-bottom:1px solid var(--line)}
.qa dl{margin:0;display:grid;grid-template-columns:33% 1fr}
.qa dt,.qa dd{padding:12px 22px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:700;color:var(--ink-dk);font-size:1.062rem;letter-spacing:.1em;
  text-transform:uppercase}
.qa dd{color:var(--muted)}
.qa dl>:nth-last-child(-n+2){border-bottom:0}
@media(max-width:620px){
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
}

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

/* the assigned card: a hairline border, no resting shadow, and a lift on hover */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;transition:transform .18s var(--ease),box-shadow .18s var(--ease),
  border-color .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--wine-line)}
.card .ic{width:52px;height:52px;border-radius:var(--r-s);background:var(--wine-lt);
  display:grid;place-items:center;margin-bottom:14px;overflow:hidden;
  border:1px solid var(--wine-line)}
.card .ic img{height:34px;width:34px;object-fit:contain}
.card h3{margin-bottom:.4em}
.card p{margin:0;color:var(--muted);font-size:1.062rem}
.card .num{font-family:var(--display);font-weight:700;font-size:0.8438rem;color:var(--wine);
  letter-spacing:.1em;display:block;margin-bottom:.6em}

/* ---- 9. SPLIT / STEPS / BAND --------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.split--rev .split__media{order:2}
.split__media img{border-radius:var(--r);border:1px solid var(--line);margin:0 auto}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:26px}.split--rev .split__media{order:0}}
.chips{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.chips li{display:flex;gap:10px}
.chips .ck{color:var(--wine);font-weight:700;flex:none}

/* numbered steps, leading-zero counters from the reference */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.step__n{counter-increment:s;font-family:var(--display);font-weight:700;font-size:1.05rem;
  color:var(--wine);margin-bottom:12px;letter-spacing:.06em;display:block;
  border-bottom:1px solid var(--line);padding-bottom:10px}
.step__n::before{content:counter(s,decimal-leading-zero)}
@media(max-width:880px){.steps{grid-template-columns:1fr}}

.band{max-width:980px;margin:0 auto;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:#fff}
.band img{width:100%;display:block}
.band--sm{max-width:820px}
.band__cap{padding:14px 20px;font-size:.87rem;color:var(--muted);
  border-top:1px solid var(--line-soft);background:var(--tint)}

/* ---- 10. SHOTS (image + heading + copy, never a bare grid) --------------- */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.shots--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.shots figure:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tint)}
.shots figcaption{padding:17px 19px}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.02rem;
  color:var(--ink-dk);margin-bottom:.35em}
.shots figcaption span{font-size:0.9062rem;color:var(--muted)}
@media(max-width:940px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.shots,.shots--wide{grid-template-columns:1fr}}

/* ---- 11. INGREDIENTS ----------------------------------------------------- */
.inglist{display:grid;gap:18px}
.ing{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  border-left:3px solid var(--wine-line)}
.ing__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin-bottom:.7em}
.ing__top h3{margin:0}
.ing__dose{font-family:var(--display);font-weight:700;font-size:0.8438rem;background:var(--wine-lt);
  color:var(--wine-dp);border:1px solid var(--wine-line);border-radius:var(--r-s);
  padding:4px 10px;letter-spacing:.08em;text-transform:uppercase}
.ing__lat{font-size:0.9062rem;color:var(--faint);font-style:italic}
.ing p{margin:0 0 .8em}
.ing__cite{font-size:.85rem;color:var(--muted)}
.ingthumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ingthumbs figure{margin:0;text-align:center}
.ingthumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--line)}
.ingthumbs figcaption{margin-top:.6em;font-size:0.9062rem;color:var(--muted)}
@media(max-width:820px){.ingthumbs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- 12. PRICING --------------------------------------------------------- */
.prices{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:20px;align-items:stretch;
  padding-top:14px}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 22px 24px;text-align:center;position:relative;display:flex;
  flex-direction:column;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.price:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.price--best{border:2px solid var(--wine);padding:32px 24px 28px;background:#fff}
.price__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--wine);color:#fff;font-family:var(--display);font-weight:700;font-size:0.9062rem;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-s);
  white-space:nowrap}
.price--ordered .price__badge{background:var(--slab)}
.price img{margin:0 auto 14px;height:auto}
.price h3{margin-bottom:.2em}
.price__supply{font-size:.86rem;color:var(--faint);margin-bottom:.9em}
.price__each{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--wine-dp);
  line-height:1.2}
.price__each small{font-size:0.9062rem;font-weight:600;color:var(--muted);display:block;
  margin-top:6px;line-height:1.5}
.price__rows{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:.5em;
  font-size:.9rem;color:var(--muted);text-align:left}
.price__rows li{display:flex;gap:9px}
.price__rows .ck{color:var(--wine);font-weight:700;flex:none}
.price .btn--block{margin-top:auto}
.price__ship{font-size:0.9062rem;color:var(--muted);margin-top:.8em;margin-bottom:0}
@media(max-width:1040px){.prices{grid-template-columns:1fr 1.1fr 1fr;gap:14px}
  .price{padding:22px 15px 20px}.price--best{padding:28px 17px 24px}}
@media(max-width:860px){
  .prices{grid-template-columns:1fr;gap:24px;max-width:430px;margin-inline:auto}
  /* stacked, the best-value pack leads and the starter goes last */
  .price--best{order:1}
  .price--ordered{order:2}
  .price--basic{order:3}
}
.guarantee{display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:center;
  background:var(--brass-lt);border:1px solid var(--brass-line);border-radius:var(--r);
  padding:24px 26px}
.guarantee img{margin:0 auto}
@media(max-width:620px){.guarantee{grid-template-columns:1fr;text-align:center}}

/* ---- 13. REVIEWS / STATS ------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r);overflow:hidden}
.stat{padding:24px 20px;text-align:center;border-left:1px solid rgba(255,255,255,.18)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:2.1rem;
  color:#fff;line-height:1}
.stat span{font-size:0.9062rem;color:#dcc2c2}
@media(max-width:880px){.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 rgba(255,255,255,.18)}}
.stats--light{border-color:var(--line);background:#fff}
.stats--light .stat{border-left-color:var(--line)}
.stats--light .stat b{color:var(--wine-dp)}
.stats--light .stat span{color:var(--muted)}

.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:8px;background:var(--tint2);border-radius:var(--r-s);overflow:hidden}
.rbar .fill{height:100%;background:var(--wine)}

.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:820px){.tgrid{grid-template-columns:1fr}}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.tcard__top{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;margin-bottom:.6em}
.tcard__who{font-family:var(--display);font-weight:700;color:var(--ink-dk)}
.tcard__meta{font-size:0.9062rem;color:var(--faint)}
.tcard__stars{color:var(--brass);letter-spacing:.1em}
.tcard p{margin:0;color:var(--muted)}
.tlife{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:820px){.tlife{grid-template-columns:1fr}}

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

/* ---- 15. CALLOUTS / ALERTS ----------------------------------------------- */
.callout{background:var(--tint);border:1px solid var(--line);border-left:4px solid var(--wine);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--brass-lt);border:1px solid var(--brass-line);
  border-left:4px solid var(--brass);border-radius:0 var(--r) var(--r) 0;padding:20px 24px}
.alert p:last-child{margin-bottom:0}
.flag{display:inline-block;font-family:var(--display);font-weight:700;font-size:0.8438rem;
  letter-spacing:.14em;text-transform:uppercase;background:var(--wine-lt);color:var(--wine-dp);
  border:1px solid var(--wine-line);border-radius:var(--r-s);padding:5px 11px;margin-bottom:1rem}

/* ---- 16. TABLES ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.dtable{width:100%;font-size:1rem;min-width:520px}
.dtable th,.dtable td{padding:12px 17px;text-align:left;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.dtable thead th{background:var(--tint);font-family:var(--display);font-weight:700;
  color:var(--ink-dk);font-size:0.9062rem;letter-spacing:.11em;text-transform:uppercase}
.dtable tbody tr:last-child td{border-bottom:0}
.facts{width:100%;font-size:.94rem}
.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;color:var(--ink-dk)}

/* ---- 17. FORMS ----------------------------------------------------------- */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.form__row{display:grid;gap:15px;margin-bottom:15px}
@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(--wine);
  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(--wine-lt);
  border:1px solid var(--wine-line);font-size:.92rem;display:none}
.form__msg.show{display:block}

/* ---- 18. TRUST STRIP ----------------------------------------------------- */
.trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:22px 36px;padding-block:20px}
.trust__item{display:flex;align-items:center;gap:10px;font-size:0.9062rem;font-weight:600;
  color:var(--muted)}
.trust__item img{height:40px;width:auto}
.badgewall{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.badgewall img{height:58px;width:auto}
.promo{background:var(--slab);color:#e9d8d8;padding:20px 0}
.promo__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px}
.promo b{color:#fff}

/* ---- 19. FINAL CTA ------------------------------------------------------- */
.final{background:var(--slab);color:#e9d8d8;border-radius:var(--r);padding:44px 40px;
  position:relative;overflow:hidden}
.final h2{color:#fff}
.final p{color:#dcc2c2;max-width:56ch;margin:0 auto 1.4em}
.final b,.final strong{color:#fff}
.final--media{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:center;
  text-align:left}
.final--media h2{text-align:left}
.final--media p{margin:0 0 1.3em;max-width:54ch}
.final--media .final__img img{width:100%;max-width:300px;height:auto;margin-inline:auto}
.final__price{font-family:var(--display);font-weight:700;font-size:1.32rem;color:#f3b8bc;
  margin:.2em 0 .8em}
@media(max-width:880px){
  .final--media{grid-template-columns:1fr;gap:24px;text-align:center;padding:0}
  .final--media h2{text-align:center}
  .final--media p{margin-inline:auto}
  .final{padding:34px 22px}
}

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

.byline{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px;margin-top:2.2em}
.byline img{flex:0 0 64px;border-radius:var(--r-s);border:1px solid var(--line)}
.byline b{display:block;font-family:var(--display);color:var(--ink-dk);margin-bottom:.4em}
.byline p{margin:0;font-size:0.9062rem;color:var(--muted)}

.refs{font-size:.87rem;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:14px 0 0;margin:0}
.crumbs a{color:var(--muted)}

.article{max-width:var(--prose);margin-inline:auto}
.article h2{margin-top:1.6em;scroll-margin-top:118px}
.article h3{margin-top:1.3em}
.dropcap::first-letter{float:left;font-family:var(--display);font-weight:700;font-size:3rem;
  line-height:.88;padding:.06em .1em 0 0;color:var(--wine-dk)}
.pullquote{border-left:3px solid var(--wine);padding-left:20px;margin:1.6em 0;
  font-family:var(--display);font-size:1.14rem;color:var(--ink-dk)}
.pullquote p{margin:0 0 .4em}
.pullquote cite{display:block;font-family:var(--sans);font-style:normal;font-weight:600;
  font-size:.85rem;color:var(--muted);letter-spacing:.02em}

/* ---- 21. FOOTER: five-column dense link wall, payment strip beneath ------ */
footer{background:var(--slab);color:#cdb3b4;padding:50px 0 26px;font-size:.9rem}
footer h4{color:#fff;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:1em}
footer a{color:#e9c5c7}
footer a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:26px;margin-bottom:30px}
@media(max-width:1060px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.fgrid{grid-template-columns:1fr}}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45em;font-size:.86rem}
.fbrand{font-family:var(--display);font-weight:700;font-size:1.3rem;color:#fff;
  margin-bottom:.5em}
.fbadges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.fbadges img{height:36px;width:auto}
.fnap{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;font-size:0.9062rem;
  line-height:1.75}
.fpay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 0;
  border-top:1px solid rgba(255,255,255,.14);margin-top:20px;font-size:0.9062rem}
.fpay img{height:24px;width:auto}
.disc{border-top:1px solid rgba(255,255,255,.14);margin-top:20px;padding-top:20px;
  font-size:0.9062rem;line-height:1.7;color:#b49a9c}
.disc p{margin-bottom:.9em}
.copy{color:#95797b}

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

.toc{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 24px;margin:0 0 2.2em}
.toc h2{font-family:var(--display);font-size:.74rem!important;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--wine-dk);margin:0 0 1em}
.toc ol{margin:0;padding-left:1.25em;display:grid;gap:.45em;font-size:.94rem}
.toc a{color:var(--ink)}
.toc a:hover{color:var(--wine-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(--wine-lt);border:1px solid var(--wine-line);
  border-left:4px solid var(--wine);border-radius:0 var(--r) var(--r) 0;padding:20px 24px;
  margin:0 0 2em}
.keypoints>b{display:block;font-family:var(--display);font-size:0.8438rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wine-dp);margin-bottom:1em}
.keypoints ul{margin:0;padding-left:1.2em;display:grid;gap:.5em}
.keypoints li b{color:var(--wine-dp)}

.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;padding:28px 26px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.55rem;line-height:1.22;margin:0 0 .5em}
.article .final--media .final__price{font-size:1.15rem;margin:.3em 0 .7em}
@media(max-width:620px){
  .article .final--media{grid-template-columns:1fr;text-align:center;padding:28px 20px}
  .article .final--media h2{text-align:center;font-size:1.4rem}
}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.posts article:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.posts img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 38%;
  background:var(--tint)}
.posts .pbody{padding:22px 24px;display:flex;flex-direction:column;flex:1}
.posts h3{margin:0 0 .45em;font-size:1.1rem}
.posts h3 a{color:var(--ink-dk)}
.posts h3 a:hover{color:var(--wine-dk)}
.posts p{margin:0 0 1em;color:var(--muted);font-size:1.062rem}
.posts .pmeta{margin-top:auto;font-size:0.9062rem;color:var(--faint)}
@media(max-width:940px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}

/* ---- 23. MOTION ---------------------------------------------------------- */
/* Two behaviours only, both assigned: the ticker in the top bar, and a count-up
   on the stat row. Everything else is a plain fade so the page does not jump. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),
  transform .55s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .tick ul{animation:none}
  html{scroll-behavior:auto}
}

/* ---- 24. SINGLE-COLUMN MEASURE ------------------------------------------
   Sections mix full-width components with single-column prose. Without this,
   prose runs the full 1180px wrap while .sec__head and the constrained tables
   sit narrower and hard against the left edge, which shows four different left
   margins in one column on a wide screen. px, not ch: `ch` resolves against
   each element's own font-size, which is right for a character count and wrong
   for a shared edge. */
.sec > .wrap > h2,
.sec > .wrap > h3,
.sec > .wrap > h4,
.sec > .wrap > p,
.sec > .wrap > ul,
.sec > .wrap > ol,
.sec > .wrap > .sec__head,
.sec > .wrap > .callout,
.sec > .wrap > .alert,
.sec > .wrap > .byline,
.sec > .wrap > .refs,
.sec > .wrap > .pullquote,
.sec > .wrap > 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}

/* the top of an inner page: eyebrow, H1, Quick Answer and lede share one edge
   with the breadcrumb and the prose beneath them, rather than the H1 sitting at
   the full wrap while the paragraphs are centred on the measure */
.sec > .wrap > .intro{max-width:var(--measure);margin-inline:auto}

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

@media(max-width:1060px){
  .sec > .wrap > h2,.sec > .wrap > h3,.sec > .wrap > h4,.sec > .wrap > p,
  .sec > .wrap > ul,.sec > .wrap > ol,.sec > .wrap > .sec__head,
  .sec > .wrap > .callout,.sec > .wrap > .alert,.sec > .wrap > .byline,
  .sec > .wrap > .refs,.sec > .wrap > .pullquote,.sec > .wrap > blockquote,
  .sec > .wrap > .tablewrap,.sec > .wrap > .faq,.sec > .wrap > .steps,
  .sec > .wrap > .intro{
    max-width:100%}
}
/* brand mark: bare construction */
.brand svg.brand__glyph{background:none!important}


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

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

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

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

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

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

/* ==== 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% - 48px) / 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: MODERN SURFACE + ORBIT MOTIF  (boostarovitality.com)

   Assigned slot: motif family "orbit", card radius 20, control radius 14,
   depth "deep ambient only, very diffuse", ribbon "tab above the card".

   SCOPE. Every selector below starts at body:has(.hero). class="hero" is on
   index.html and on no other page of this site (checked with grep across all
   34 pages plus blog/ and order/), so the whole block is home-only. The
   doubled selector is also what keeps it alive: modern_surface.py and
   footer_type.py re-append their own blocks at the end of this file on every
   build and land AFTER this one, so this beats them on specificity rather
   than on source order. It also outranks .reveal.in, which sets
   transform:none and would otherwise swallow every hover lift.

   PAINT ONLY. border-radius, box-shadow, background, colour, transform,
   transition and animation. Nothing here moves a box, so it lives below the
   critical marker and a restamp is enough.
   ========================================================================== */

body:has(.hero){
  /* the slot's two radii */
  --bv-rcard:20px;
  --bv-rctl:14px;

  /* the slot's depth: ambient only, no tight contact stop, two very diffuse
     spreads tinted with this site's own ink (30,21,24) rather than black */
  --bv-amb:0 22px 60px rgba(30,21,24,.11), 0 48px 110px rgba(30,21,24,.06);
  --bv-lift:0 30px 72px rgba(30,21,24,.16), 0 60px 132px rgba(30,21,24,.09);
  --bv-amb-deep:0 34px 84px rgba(30,21,24,.19), 0 72px 150px rgba(30,21,24,.10);
  --bv-amb-cta:0 18px 44px rgba(156,34,51,.30);

  /* the orbit diameter. Fixed lengths, never percent: the reduced-motion
     query re-lays the product column and a percentage would resolve against
     a different box there. Stepped down twice so the ring never reaches
     across the gap into the headline column. */
  --bv-orbit:520px;
}
@media(max-width:1180px){body:has(.hero){--bv-orbit:440px}}
@media(max-width:920px){body:has(.hero){--bv-orbit:330px}}

/* ---- 1. the hero ground -------------------------------------------------
   Two soft wine washes over a warm near-white, replacing the single hard
   172deg ramp that ended pink across the whole lower half. */
body:has(.hero) .hero{
  background:
    radial-gradient(1100px 620px at 78% 16%, rgba(156,34,51,.10), rgba(156,34,51,0) 62%),
    radial-gradient(760px 520px at 6% 98%, rgba(94,26,29,.07), rgba(94,26,29,0) 60%),
    linear-gradient(178deg,#fdfbfa 0%,#faf3f2 56%,#f4e7e6 100%);
}

/* ---- 2. the orbit motif -------------------------------------------------
   A thin ring with one bright arc travelling it, slow. Both halves are
   pseudo-elements of the media column, never the <img>: that image is the
   LCP element and is preloaded.

   .hero__media is display:flex above 981px, so a pseudo-element of it would
   become a FLEX ITEM and sit beside the product. position:absolute is what
   keeps both out of flow -- it is load-bearing, not tidying.

   520px against a product card that measures about 378 x 488, so the ring
   reads outside the card on every edge instead of being swallowed by it.

   ::before is the old flow-lines stripe motif this site shipped with. It is
   declared above the critical marker, so it is reset here property by
   property -- inset, mask and animation all have to be cancelled explicitly
   or the stripes stay underneath. */
body:has(.hero) .hero__media::before{
  content:"";
  position:absolute;
  inset:auto;
  left:50%;
  top:50%;
  width:var(--bv-orbit);
  height:var(--bv-orbit);
  translate:-50% -50%;
  box-sizing:border-box;
  border:1.5px solid rgba(156,34,51,.17);
  border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(156,34,51,0) 0 calc(71% - 1.2px),
    rgba(156,34,51,.13) calc(71% - 1.2px) 71%,
    rgba(156,34,51,0) 71%);
  -webkit-mask-image:none;
  mask-image:none;
  animation:none;
  z-index:1;
  pointer-events:none;
}

/* the travelling arc: a conic gradient clipped to a 2.5px annulus on exactly
   the ring's radius, rotated by transform only. 34 seconds a revolution --
   this is a capsule taken daily for three to six weeks, not an energy drink. */
body:has(.hero) .hero__media::after{
  content:"";
  position:absolute;
  inset:auto;
  left:50%;
  top:50%;
  width:var(--bv-orbit);
  height:var(--bv-orbit);
  translate:-50% -50%;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(156,34,51,0) 0 56%,
    rgba(156,34,51,.20) 67%,
    rgba(156,34,51,.72) 75%,
    #9c2233 78.5%,
    rgba(156,34,51,0) 80.5% 100%);
  -webkit-mask-image:radial-gradient(circle closest-side,
    transparent 0 calc(100% - 2.5px), #000 calc(100% - 2.5px) 100%);
  mask-image:radial-gradient(circle closest-side,
    transparent 0 calc(100% - 2.5px), #000 calc(100% - 2.5px) 100%);
  animation:bvOrbitArc 34s linear infinite;
  will-change:transform;
  z-index:1;
  pointer-events:none;
}
/* name checked against this stylesheet: btLines and tickroll were already
   taken, this one is not */
@keyframes bvOrbitArc{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* the oxblood plate the bottle stands in front of. It keeps its job as a
   hard colour block, but it takes the card corner so it stops being the one
   square-cornered object on a page of 20px panels, and a shallow off-axis
   ramp gives it a light source instead of reading as flat fill. */
body:has(.hero) .hero__stick::before{
  border-radius:var(--bv-rcard);
  background:linear-gradient(152deg,#6d1f23 0%,var(--wine-dp) 46%,#4a1417 100%);
}

/* the small chips in the hero copy, one step tighter than a control so the
   row reads as data and not as five more buttons */
body:has(.hero) .factpills li{border-radius:calc(var(--bv-rctl) - 4px)}
body:has(.hero) .ticks .ck{border-radius:calc(var(--bv-rctl) - 6px)}
body:has(.hero) .figures{border-radius:var(--bv-rcard);box-shadow:var(--bv-amb)}

/* ---- 3. panels: the slot's 20px and the diffuse ambient depth ----------- */
body:has(.hero) .sec .card,
body:has(.hero) .sec .step,
body:has(.hero) .sec .price,
body:has(.hero) .sec .tablewrap,
body:has(.hero) .sec .faq details,
body:has(.hero) .sec .callout,
body:has(.hero) .sec .alert,
body:has(.hero) .sec .keypoints,
body:has(.hero) .sec .byline,
body:has(.hero) .sec .qa,
body:has(.hero) .sec .stats,
body:has(.hero) .sec .final,
body:has(.hero) .sec .split__media img{border-radius:var(--bv-rcard)}

body:has(.hero) .sec .card,
body:has(.hero) .sec .step,
body:has(.hero) .sec .price,
body:has(.hero) .sec .tablewrap,
body:has(.hero) .sec .faq details,
body:has(.hero) .sec .callout,
body:has(.hero) .sec .alert,
body:has(.hero) .sec .keypoints,
body:has(.hero) .sec .byline,
body:has(.hero) .sec .qa{box-shadow:var(--bv-amb)}

body:has(.hero) .sec .stats,
body:has(.hero) .sec .final{box-shadow:var(--bv-amb-deep)}

/* the icon tile inside a card, kept one step tighter than the control radius
   so it reads as a chip rather than a second card */
body:has(.hero) .sec .card .ic{border-radius:calc(var(--bv-rctl) - 2px)}

/* ---- 4. hover ----------------------------------------------------------
   A 2px lift. The transition is written with the fade in it because .reveal
   owns the same property on these elements: dropping opacity here would
   land the scroll reveal instantly instead of fading it. */
body:has(.hero) .sec .card,
body:has(.hero) .sec .step,
body:has(.hero) .sec .price{
  transition:opacity .5s var(--ease),
             transform .3s var(--ease),
             box-shadow .3s var(--ease),
             border-color .25s ease;
}
body:has(.hero) .sec .card:hover,
body:has(.hero) .sec .step:hover,
body:has(.hero) .sec .price:hover{
  transform:translateY(-2px);
  box-shadow:var(--bv-lift);
  border-color:var(--wine-line);
}
body:has(.hero) .sec .price--best:hover{box-shadow:var(--bv-amb-deep);border-color:var(--wine)}

body:has(.hero) .sec .faq details{transition:box-shadow .3s var(--ease)}
body:has(.hero) .sec .faq details:hover{box-shadow:var(--bv-lift)}

/* ---- 5. controls: the slot's 14px, and the two weights ------------------
   The buying CTA carries the gradient. The secondary stays solid white, so
   the pair reads as two weights rather than two colours of the same thing. */
body:has(.hero) .btn,
body:has(.hero) .pill,
body:has(.hero) .price__badge,
body:has(.hero) .hero__tag{border-radius:var(--bv-rctl)}

body:has(.hero) .btn{transition:transform .2s var(--ease),
  background-color .22s ease, box-shadow .28s var(--ease), border-color .22s ease}
body:has(.hero) .btn:hover{transform:translateY(-2px)}

body:has(.hero) .btn--cta{
  background-image:linear-gradient(135deg,#b62d40 0%,var(--wine) 44%,var(--wine-dk) 100%);
  box-shadow:var(--bv-amb-cta);
  border-color:transparent;
}
body:has(.hero) .btn--cta:hover{
  background-image:linear-gradient(135deg,var(--wine) 0%,var(--wine-dk) 50%,var(--wine-dp) 100%);
  box-shadow:0 26px 62px rgba(156,34,51,.38);
}
/* the secondary button: solid, no gradient, one weight down */
body:has(.hero) .btn--ghost{
  background-image:none;
  box-shadow:0 10px 26px rgba(30,21,24,.07);
}
body:has(.hero) .btn--ghost:hover{box-shadow:0 16px 36px rgba(30,21,24,.11)}

/* the ring the keyboard sees, one step clearer than the site default */
body:has(.hero) .btn:focus-visible,
body:has(.hero) .burger:focus-visible,
body:has(.hero) .faq summary:focus-visible{
  outline:2px solid var(--wine-dk);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(156,34,51,.14);
}

/* ---- 6. pricing: the slot's ribbon is a tab above the card -------------
   bottom:100% seats the tab on the card's top edge with the top corners
   rounded and the bottom two square, so it reads as a tab and not as a
   floating pill. The badge is already position:absolute, so nothing in the
   card's flow moves and the three Add To Cart buttons keep their shared
   baseline -- measured after the change, all three at the same offset. */
body:has(.hero) .price__badge{
  top:auto;
  bottom:100%;
  border-radius:var(--bv-rctl) var(--bv-rctl) 0 0;
  box-shadow:0 -12px 28px rgba(30,21,24,.13);
}
/* the recommended tier: a different colour and a deeper seat in the page.
   Raised by elevation, never by transform -- the scroll reveal sets
   transform:none on .price, and a translate here would also lift this
   card's button off the baseline the other two sit on. */
body:has(.hero) .sec .price--best{
  background:linear-gradient(180deg,#ffffff 0%,#fffafa 58%,var(--wine-lt) 100%);
  border-color:var(--wine);
  box-shadow:var(--bv-amb-deep);
}
/* the three tabs carry the hierarchy: the starter pack in muted ink, the
   recommended pack in the same gradient as the buying button, the middle
   pack on the site's dark slab */
body:has(.hero) .price--best .price__badge{
  background-image:linear-gradient(135deg,#b62d40 0%,var(--wine-dk) 100%);
  box-shadow:0 -12px 28px rgba(156,34,51,.26);
}
body:has(.hero) .price--basic .price__badge{background:var(--faint)}

/* dashed separators between the feature rows, drawn as a background so the
   rows keep their exact heights. A real border-bottom would add a pixel per
   row and that is geometry, which does not belong below this marker. */
body:has(.hero) .price__rows li{
  background-image:repeating-linear-gradient(to right,
    var(--wine-line) 0 5px, transparent 5px 10px);
  background-repeat:no-repeat;
  background-size:100% 1px;
  background-position:left bottom;
}
body:has(.hero) .price__rows li:last-child{background-image:none}

/* ---- 7. motion off on request ----------------------------------------- */
@media(prefers-reduced-motion:reduce){
  /* the arc goes away entirely rather than freezing mid-orbit: a stopped
     arc parked at some arbitrary angle reads as a rendering fault */
  body:has(.hero) .hero__media::after{display:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .sec .card:hover,
  body:has(.hero) .sec .step:hover,
  body:has(.hero) .sec .price:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer{font-size:16px}
footer h4{font-size:15px}
footer ul{font-size:16px}
footer .disc{font-size:16px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 25 box-shadow declaration(s)
   and 0 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (30,21,24), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --r:16px;
  --shadow:0 1px 2px rgba(30,21,24,.06), 0 6px 18px rgba(30,21,24,.07);
  --lift:0 2px 6px rgba(30,21,24,.09), 0 16px 34px rgba(30,21,24,.14);
}

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

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

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