/* ==========================================================================
   EDITORIAL / TRUST-FIRST TEMPLATE  —  reusable magazine stylesheet
   Built for HormoneFlux (Women's Hormonal Support). Token-driven: recolour by editing the
   --accent / --gold ramp only. Serif display + clean sans body, paper ground,
   hairline rules, wide readable prose column. No framework, no build step.
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* paper + ink */
  --paper:      #faf8f3;   /* page ground: warm off-white */
  --paper-tint: #f3eee4;   /* alternating section wash     */
  --paper-card: #fffdf9;   /* raised card surface          */
  --ink:        #1b1a17;   /* body / headline ink          */
  --ink-soft:   #55504733; /* (unused placeholder)         */
  --muted:      #5c574e;   /* secondary prose              */
  --faint:      #8a8477;   /* captions, notes              */
  --line:       #e6ddcc;   /* hairline rules               */
  --line-soft:  #efe8da;   /* lighter hairline             */

  /* niche accent — derived from the HormoneFlux dusty-rose bottle */
  --accent:      #9a5a5f;  /* primary navy                 */
  --accent-deep: #6f3d44;  /* darker navy (hovers/ink)     */
  --accent-tint: #f6edef;  /* pale navy wash for cards     */
  --accent-line: #e6ced3;  /* navy hairline                */

  /* warm gold — reserved for the "best value" tier + small flourishes */
  --gold:      #b0842f;
  --gold-deep: #8a651f;
  --gold-soft: #e6d3a4;
  --gold-line: #dcc487;

  /* type */
  --serif: 'Fraunces','Playfair Display',Georgia,'Times New Roman',serif;
  --sans:  'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* metrics */
  --wrap:  1120px;
  --prose: 68ch;
  --radius: 4px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(20,18,12,.05), 0 8px 30px rgba(20,18,12,.06);
  --shadow-soft: 0 1px 24px rgba(20,18,12,.05);
}

/* ---- 2. RESET / BASE ----------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:18px;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.35rem,5.4vw,4rem);font-weight:600}
h2{font-size:clamp(1.85rem,3.6vw,2.7rem)}
h3{font-size:1.3rem;line-height:1.25}
p{margin:0 0 1.1em}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--gold-soft)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.prose{max-width:var(--prose)}
.center{text-align:center}
.center .prose{margin-inline:auto}

/* ---- 3. SHARED ATOMS ----------------------------------------------------- */
.eyebrow{
  display:inline-block;font-family:var(--sans);font-weight:600;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
}
.eyebrow--gold{color:var(--gold-deep)}
.note{font-size:.86rem;color:var(--faint);line-height:1.6}
.lead{font-size:1.24rem;line-height:1.6;color:var(--muted)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:600;font-size:1rem;
  padding:.85em 1.6em;border-radius:var(--radius);cursor:pointer;
  border:1px solid transparent;transition:transform .12s ease,background .18s ease,box-shadow .18s ease;
  text-decoration:none;line-height:1;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--cta{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(154,90,95,.24)}
.btn--cta:hover{background:var(--accent-deep);color:#fff}
.btn--ghost{background:transparent;color:var(--accent);border-color:var(--accent-line)}
.btn--ghost:hover{background:var(--accent-tint);color:var(--accent-deep)}
.btn--lg{font-size:1.08rem;padding:1em 1.9em}
.btn--block{display:flex;width:100%}
.btn--gold{background:var(--gold);color:#fff;box-shadow:0 6px 18px rgba(176,132,47,.24)}
.btn--gold:hover{background:var(--gold-deep);color:#fff}

/* section rhythm — hairline between every band */
.section{padding:72px 0;border-top:1px solid var(--line)}
.section--tint{background:var(--paper-tint)}
.section--tight{padding:52px 0}
.section__head{max-width:var(--prose);margin-bottom:34px}
.section--center .section__head{margin-inline:auto;text-align:center}

/* ---- 4. TOP EYEBROW BAR + NAV ------------------------------------------- */
.topline{
  background:var(--accent-deep);color:#efdfe0;
  font-size:.76rem;letter-spacing:.02em;text-align:center;
  padding:7px 16px;
}
.topline b{color:#fff;font-weight:600}
.topline span{opacity:.5;margin:0 .5em}

.nav{position:sticky;top:0;z-index:60;background:rgba(250,248,243,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:18px;height:66px}
.brand{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand span{color:var(--accent)}
.menu{list-style:none;display:flex;gap:26px;margin:0;padding:0}
.menu a{font-family:var(--sans);font-size:.94rem;font-weight:500;color:var(--muted)}
.menu a:hover{color:var(--accent);text-decoration:none}
.nav__cta{display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--ink);display:block}

/* ---- 5. STICKY BUY-BAR (reveals on scroll) ------------------------------ */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--accent-deep);color:#fff;
  transform:translateY(105%);transition:transform .28s ease;
  box-shadow:0 -6px 24px rgba(0,0,0,.18);
}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--wrap);margin-inline:auto;padding:11px 24px}
.buybar__t{font-size:.98rem;line-height:1.3}
.buybar__t b{font-family:var(--serif);font-size:1.06rem}
.buybar__t .from{color:var(--gold-soft);font-weight:600}
.buybar .btn{white-space:nowrap}

/* ---- 6. HERO ------------------------------------------------------------- */
.hero{padding:60px 0 68px}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{margin-top:.1em}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero__lede{font-size:1.24rem;line-height:1.62;color:var(--muted);max-width:52ch;margin-top:1.1rem}
.hero__lede::first-letter{
  float:left;font-family:var(--serif);font-weight:600;
  font-size:3.4em;line-height:.72;padding:.06em .12em 0 0;color:var(--accent);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.8rem}
.hero__sub{margin-top:1.4rem;font-size:.9rem;color:var(--faint);display:flex;align-items:center;gap:.55em}
.hero__media{position:relative}
/* colour-match card — tinted to the bottle navy, image keeps its own bg */
.pcard{
  background:linear-gradient(170deg,#faf3f4,#f1e2e5);
  border:1px solid var(--accent-line);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--shadow);
}
.pcard img{margin-inline:auto}
.hero__tag{
  position:absolute;left:-10px;bottom:22px;background:var(--paper-card);
  border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:10px 14px;box-shadow:var(--shadow);
  font-size:.82rem;line-height:1.3;max-width:180px;
}
.hero__tag b{font-family:var(--serif);display:block;font-size:1rem}

/* ---- 7. TRUST STRIP ------------------------------------------------------ */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-card)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;padding:20px 24px}
.trust__item{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:500;color:var(--muted)}
.trust__item img{width:38px;height:38px;object-fit:contain}
.trust__item svg{width:22px;height:22px;color:var(--accent);flex:none}

/* ---- 8. PROSE / LEDE ("the problem") ------------------------------------ */
.article{max-width:var(--prose);margin-inline:auto}
.article p{color:#2b2822}
.dropcap::first-letter{
  float:left;font-family:var(--serif);font-weight:600;font-size:3.9em;
  line-height:.7;padding:.02em .1em 0 0;color:var(--accent);
}
.pullquote{
  font-family:var(--serif);font-size:1.5rem;line-height:1.35;color:var(--ink);
  border-left:3px solid var(--gold);padding:.2em 0 .2em 1.1rem;margin:1.6em 0;
}

/* ---- 9. SPLIT (image + text) -------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split--rev .split__media{order:2}
.split__media img{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.chips{list-style:none;margin:1.2em 0 0;padding:0;display:grid;gap:.7em}
.chips li{position:relative;padding-left:1.8em;color:#2b2822}
.chips .ck{position:absolute;left:0;top:.02em;color:var(--accent);font-weight:700}

/* ---- 10. MECHANISM STEPS ------------------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.step{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px 28px}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--serif);font-size:2.1rem;color:var(--accent);display:block;margin-bottom:.2em;font-weight:600}
.step h3{margin-bottom:.35em}
.step p{margin:0;color:var(--muted);font-size:.98rem}

/* ---- 11. INGREDIENTS ----------------------------------------------------- */
.ingfig{max-width:940px;margin:0 auto 34px;border-radius:var(--radius-lg);
  border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow-soft)}
.inglist{max-width:var(--prose);margin-inline:auto;display:grid;gap:0}
.ing{padding:26px 0;border-top:1px solid var(--line)}
.ing:first-child{border-top:0}
.ing__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ing h3{margin:0}
.ing__dose{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-deep);white-space:nowrap}
.ing p{margin:.55em 0 0;color:#2b2822}
.ing__cite{font-size:.85rem}
.ing__cite a{border-bottom:1px solid var(--accent-line)}

/* ---- 12. SUPPLEMENT FACTS ------------------------------------------------ */
.facts{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:start}
.facts__img{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-soft)}
.facttab{width:100%;border-collapse:collapse;font-size:.95rem;margin-top:.4em}
.facttab th,.facttab td{text-align:left;padding:.62em .2em;border-bottom:1px solid var(--line)}
.facttab thead th{font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.facttab td:last-child,.facttab th:last-child{text-align:right;white-space:nowrap;color:var(--muted)}
.facttab .blend td{font-weight:600}

/* ---- 13. BENEFITS -------------------------------------------------------- */
.benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 40px;max-width:900px;margin-inline:auto}
.benefits li{display:flex;gap:.8em;padding:16px 0;border-top:1px solid var(--line);color:#2b2822}
.benefits .ck{color:var(--accent);font-weight:700;flex:none;margin-top:.1em}

/* ---- 14. REFERENCES ------------------------------------------------------ */
.refs{max-width:var(--prose);margin-inline:auto;font-size:.92rem;color:var(--muted)}
.refs ol{margin:0;padding-left:1.4em;display:grid;gap:.6em}
.refs li{padding-left:.2em}
.refs a{word-break:break-word}

/* ---- 15. REVIEWER BYLINE (E-E-A-T) -------------------------------------- */
.byline{display:flex;gap:22px;align-items:center;max-width:var(--prose);margin-inline:auto;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px}
.byline img{width:78px;height:78px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--accent-line)}
.byline b{font-family:var(--serif);font-size:1.15rem}
.byline p{margin:.3em 0 0;font-size:.92rem;color:var(--muted)}

/* ---- 16. TESTIMONIALS ---------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.tcard{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;position:relative}
.tcard .qm{font-family:var(--serif);font-size:3rem;line-height:.4;color:var(--gold-soft);display:block;height:.5em}
.tcard h3{font-size:1.08rem;margin:.2em 0 .4em}
.tcard p{color:var(--muted);font-size:.96rem;margin:0}
.tcard .who{margin-top:1em;font-size:.86rem;color:var(--ink);font-weight:600}
.tcard .who span{color:var(--faint);font-weight:500}
.tpoladroid{max-width:640px;margin:0 auto 30px;border-radius:var(--radius-lg);overflow:hidden}

/* ---- 17. PRICING LADDER -------------------------------------------------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:end}
.tier{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 24px 30px;text-align:center;position:relative}
.tier--pop{border-color:var(--accent-line);box-shadow:var(--shadow)}
.tier--best{border:1px solid var(--gold-line);box-shadow:0 0 0 1px var(--gold-line),var(--shadow)}
.tier__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:5px 14px;border-radius:100px;white-space:nowrap}
.tier--pop .tier__flag{background:var(--accent);color:#fff}
.tier--best .tier__flag{background:var(--gold);color:#fff}
.tier h3{margin:.2em 0 .1em;font-size:1.3rem}
.tier__supply{font-size:.84rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.tier__img{height:150px;width:auto;margin:16px auto 8px;object-fit:contain}
.tier__price{font-family:var(--serif);font-size:2.9rem;font-weight:600;color:var(--ink);line-height:1}
.tier__price small{font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--faint);display:block;letter-spacing:.02em}
.tier__ship{font-size:.85rem;color:var(--muted);margin:.5em 0 1.1em}
.tier--best .tier__ship{color:var(--gold-deep);font-weight:600}
.tier .note{margin-top:.9em}

.guarantee{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:center;
  max-width:860px;margin:40px auto 0;background:var(--accent-tint);
  border:1px solid var(--accent-line);border-radius:var(--radius-lg);padding:26px 30px}
.guarantee img{width:120px;height:auto;flex:none}
.guarantee h3{margin:0 0 .3em}
.guarantee p{margin:0;color:var(--muted);font-size:.96rem}
.pay{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px}
.pay img{height:30px;width:auto}
.pay span{font-size:.82rem;color:var(--faint)}

/* ---- 18. FAQ ------------------------------------------------------------- */
.faq{max-width:var(--prose);margin-inline:auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 2px;
  font-family:var(--serif);font-size:1.15rem;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:1.5rem;color:var(--accent);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq__b{padding:0 2px 22px;color:var(--muted)}
.faq__b p{margin:0}

/* ---- 19. FINAL CTA ------------------------------------------------------- */
.final{background:var(--accent-deep);color:#eef2fa;border-radius:var(--radius-lg);
  padding:60px 40px;text-align:center;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% -20%,rgba(176,132,47,.22),transparent 60%);pointer-events:none}
.final h2{color:#fff;position:relative}
.final p{color:#e6d2d4;max-width:56ch;margin:0 auto 1.6em;position:relative}
.final .btn{position:relative}

/* ---- 20. FOOTER ---------------------------------------------------------- */
footer{background:var(--paper-card);border-top:1px solid var(--line);padding:56px 0 78px;font-size:.92rem}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.fbrand{font-family:var(--serif);font-size:1.5rem;color:var(--ink);margin-bottom:.5em}
.fbrand span{color:var(--accent)}
footer h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 1em}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55em}
footer ul a{color:var(--muted)}
footer ul a:hover{color:var(--accent)}
footer .fintro{color:var(--muted);max-width:38ch}
.disc{border-top:1px solid var(--line);margin-top:40px;padding-top:26px;display:grid;gap:.8em}
.disc p{margin:0;font-size:.82rem;color:var(--faint);line-height:1.6;max-width:none}
.disc .copy{margin-top:.6em;color:var(--muted)}

/* ---- 21. LEGAL / ARTICLE PAGES ------------------------------------------ */
.legal{max-width:var(--prose);margin-inline:auto}
.legal h1{margin-bottom:.4em}
.legal h2{font-size:1.5rem;margin-top:1.6em}
.legal h3{font-size:1.15rem;margin-top:1.3em}
.legal p,.legal li{color:#2b2822}
.legal ul{padding-left:1.3em;display:grid;gap:.4em}
.crumbs{font-size:.82rem;color:var(--faint);margin-bottom:1.2em}
.crumbs a{color:var(--muted)}

/* ---- 22. RESPONSIVE ------------------------------------------------------ */
@media(max-width:920px){
  .menu{display:none}
  .menu.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 24px}
  .menu.open li{border-top:1px solid var(--line-soft)}
  .menu.open a{display:block;padding:13px 0}
  .burger{display:flex}
  .hero__grid{grid-template-columns:1fr;gap:36px}
  .hero__media{max-width:440px;margin-inline:auto}
  .split,.facts{grid-template-columns:1fr;gap:30px}
  .split--rev .split__media{order:0}
  .steps,.pricing,.tgrid{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:560px){
  body{font-size:17px}
  .section{padding:52px 0}
  .fgrid{grid-template-columns:1fr}
  .buybar__t{font-size:.86rem}
  .hero__tag{display:none}
}

/* ==========================================================================
   24. EXTENDED EDITORIAL COMPONENTS  (full 22-section money page)
   ========================================================================== */

/* -- 24.1 PROMO / VALUE STRIP (dark) -------------------------------------- */
.promo{background:var(--accent-deep);color:#f6ecec}
.promo__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:22px 40px;padding:26px 24px}
.promo__item{display:flex;align-items:center;gap:12px;font-size:.94rem;font-weight:500;color:#ecd9da}
.promo__item img{width:52px;height:52px;object-fit:contain;flex:none;
  background:#fff;border-radius:50%;padding:5px}
.promo__item b{color:#fff;font-weight:600;font-family:var(--serif);font-size:1.02rem;display:block;line-height:1.2}
.promo__item span{font-size:.8rem;color:#cbb0b2}

/* -- 24.2 DOCTOR-FORMULATED REASSURANCE BAND ------------------------------ */
.docband{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:0;overflow:hidden}
.docband__media{align-self:stretch;min-height:100%}
.docband__media img{width:100%;height:100%;object-fit:cover;border-radius:0}
.docband__body{padding:34px 40px 34px 8px}
.docband h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.docband p{color:var(--muted)}

/* -- 24.3 QUICK ANSWER (AEO) ---------------------------------------------- */
.qa{max-width:900px;margin-inline:auto;background:var(--paper-card);
  border:1px solid var(--accent-line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);overflow:hidden}
.qa__head{background:var(--accent-tint);border-bottom:1px solid var(--accent-line);
  padding:18px 26px}
.qa__head b{font-family:var(--serif);font-size:1.2rem;color:var(--ink)}
.qa__head p{margin:.2em 0 0;font-size:.9rem;color:var(--muted)}
.qa dl{margin:0;display:grid;grid-template-columns:auto 1fr}
.qa dt,.qa dd{margin:0;padding:14px 26px;border-top:1px solid var(--line);font-size:.98rem}
.qa dt{font-weight:600;color:var(--accent);white-space:nowrap;background:#fbfaf6}
.qa dd{color:#2b2822}
.qa dl>div{display:contents}

/* -- 24.4 TRUST-BADGE WALL ------------------------------------------------ */
.badgewall{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:900px;margin-inline:auto}
.badgewall figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.badgewall img{width:92px;height:92px;object-fit:contain}
.badgewall figcaption{font-size:.78rem;color:var(--muted);font-weight:500;line-height:1.3}

/* -- 24.5 STAT TILES (dark) ----------------------------------------------- */
.stats{background:var(--accent-deep);color:#fff}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);overflow:hidden}
.stat{padding:34px 26px;text-align:center;border-right:1px solid rgba(255,255,255,.12)}
.stat:last-child{border-right:0}
.stat b{font-family:var(--serif);font-size:clamp(2.2rem,4.4vw,3rem);font-weight:600;color:#fff;display:block;line-height:1}
.stat span{display:block;margin-top:.5em;font-size:.86rem;color:#d9c1c3;letter-spacing:.02em}
.stat .gold{color:var(--gold-soft)}

/* -- 24.6 WHY CHOOSE ------------------------------------------------------ */
.why{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.why__media img{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.whygrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.whycard{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 20px;display:flex;gap:14px;align-items:flex-start}
.whycard img{width:52px;height:52px;object-fit:contain;flex:none}
.whycard h3{font-size:1.02rem;margin:0 0 .25em}
.whycard p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.5}

/* -- 24.7 WHO-IT'S-FOR + LIFESTYLE GALLERY -------------------------------- */
.whofor{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.whofor__media img{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.forlist{list-style:none;margin:1.2em 0 0;padding:0;display:grid;gap:.7em}
.forlist li{position:relative;padding-left:1.8em;color:#2b2822}
.forlist .ck{position:absolute;left:0;top:.02em;color:var(--accent);font-weight:700}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.gallery figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-soft);aspect-ratio:1/1;background:#eee}
.gallery img{width:100%;height:100%;object-fit:cover}

/* -- 24.8 BENEFIT ICON ROW ------------------------------------------------ */
.benicons{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:960px;margin:0 auto 40px}
.benicon{text-align:center}
.benicon img{width:78px;height:78px;object-fit:contain;margin:0 auto .7em}
.benicon b{font-family:var(--serif);font-size:1rem;display:block;color:var(--ink);line-height:1.2}
.benicon span{font-size:.84rem;color:var(--muted);display:block;margin-top:.3em;line-height:1.45}

/* -- 24.9 HOW TO USE ------------------------------------------------------ */
.howuse{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.howuse__media img{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow)}
.usesteps{list-style:none;margin:1.3em 0 0;padding:0;counter-reset:u;display:grid;gap:18px}
.usesteps li{position:relative;padding-left:3.2em;min-height:2.2em}
.usesteps li::before{counter-increment:u;content:counter(u);position:absolute;left:0;top:-.1em;
  width:2.2em;height:2.2em;border-radius:50%;background:var(--accent);color:#fff;
  font-family:var(--serif);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.usesteps b{display:block;font-family:var(--serif);font-size:1.1rem;color:var(--ink)}
.usesteps p{margin:.15em 0 0;color:var(--muted);font-size:.96rem}

/* -- 24.10 BONUSES -------------------------------------------------------- */
.bonuses{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bonus{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px;text-align:center;display:flex;flex-direction:column}
.bonus img{width:auto;height:190px;object-fit:contain;margin:0 auto 16px;
  filter:drop-shadow(0 10px 22px rgba(20,18,12,.18))}
.bonus .tag{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.bonus h3{font-size:1.1rem;margin:.3em 0 .35em}
.bonus p{font-size:.9rem;color:var(--muted);margin:0}
.bonus__note{max-width:640px;margin:30px auto 0}

/* -- 24.11 INGREDIENT CIRCULAR THUMBS ------------------------------------- */
.ingthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:820px;margin:0 auto 8px}
.ingthumb{text-align:center}
.ingthumb img{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto .7em;
  border:2px solid var(--accent-line);background:#fff}
.ingthumb b{font-family:var(--serif);font-size:.98rem;display:block;color:var(--ink);line-height:1.2}
.ingthumb span{font-size:.8rem;color:var(--faint);display:block}

/* -- 24.12 MEDIA / AS-SEEN-IN BAR ----------------------------------------- */
.mediabar{text-align:center;max-width:900px;margin-inline:auto}
.mediabar span{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-bottom:18px}
.mediabar img{max-width:760px;width:100%;margin-inline:auto;opacity:.78;
  mix-blend-mode:multiply}

/* -- 24.13 PRICING PACKAGE LINEUP ----------------------------------------- */
.lineup{max-width:560px;margin:0 auto 40px;border-radius:var(--radius-lg);
  border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow-soft);background:#fff}
.tier__ribbon{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 4px}
.tier__ribbon img{width:38px;height:38px}
.tier__ribbon span{font-size:.78rem;color:var(--gold-deep);font-weight:600}

/* -- 24.14 TESTIMONIAL LIFESTYLE TRIO ------------------------------------- */
.tlife{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}
.tlife figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-soft);aspect-ratio:1/1;background:#eee}
.tlife img{width:100%;height:100%;object-fit:cover}
.only-mobile{display:none}

/* -- 24.15 RESPONSIVE FOR EXTENDED COMPONENTS ----------------------------- */
@media(max-width:920px){
  .docband,.why,.whofor,.howuse{grid-template-columns:1fr;gap:30px}
  .docband__body{padding:8px 28px 32px}
  .docband__media img{max-height:360px}
  .badgewall{grid-template-columns:repeat(3,1fr);gap:22px}
  .stats__grid{grid-template-columns:1fr 1fr}
  .stat{border-bottom:1px solid rgba(255,255,255,.12)}
  .stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.12)}
  .stat:nth-child(even){border-right:0}
  .whygrid{grid-template-columns:1fr 1fr}
  .benicons{grid-template-columns:repeat(3,1fr);gap:26px 16px}
  .bonuses{grid-template-columns:repeat(2,1fr)}
  .ingthumbs{grid-template-columns:repeat(4,1fr);gap:14px}
  .ingthumb img{width:88px;height:88px}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .tlife{grid-template-columns:1fr}
  .only-mobile{display:block}
  .only-desktop{display:none}
}
@media(max-width:560px){
  .promo__row{gap:16px 26px}
  .badgewall{grid-template-columns:repeat(2,1fr)}
  .qa dl{grid-template-columns:1fr}
  .qa dt{border-top:1px solid var(--line)}
  .qa dd{padding-top:0;border-top:0}
  .whygrid,.bonuses,.benicons,.gallery{grid-template-columns:1fr 1fr}
  .benicons{gap:22px 14px}
  .ingthumbs{grid-template-columns:repeat(2,1fr);gap:18px}
  .ingthumb img{width:104px;height:104px}
  .gallery figure:last-child{display:none}
}

/* ---- 25. DARK MODE (page commits to the light editorial look; explicit
   backgrounds keep it stable under a forced dark UA) --------------------- */
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}

/* ==========================================================================
   26. REVISION LAYER — expanded glance card, featured 6-bottle pricing,
   mobile hero-first, final-CTA pack image, responsive polish
   ========================================================================== */

/* in-page anchors clear the sticky header (Change 2) */
section[id]{scroll-margin-top:86px}

/* accessible tap targets on every device (Change 5) */
.btn{min-height:44px}

/* -- Change 1: bigger, fuller "at a glance" card ------------------------- */
.qa--lg{max-width:1000px}
.qa--lg .qa__head{padding:26px 34px}
.qa--lg .qa__head b{font-size:1.65rem;line-height:1.15;display:block}
.qa--lg .qa__head p{font-size:.98rem;margin-top:.5em}
.qa--lg dl{grid-template-columns:minmax(160px,auto) 1fr}
.qa--lg dt,.qa--lg dd{padding:18px 34px;font-size:1.02rem;line-height:1.62}
.qa--lg dt{font-size:.95rem}

/* -- Change 3: 6-bottle bundle featured in the middle -------------------- */
.pricing{align-items:center}
.tier--feature{
  border:2px solid var(--gold);
  box-shadow:0 0 0 1px var(--gold),0 20px 44px rgba(176,132,47,.20);
  background:var(--paper-card);transform:scale(1.05);z-index:2;padding-top:34px;
}
.tier--feature .tier__flag{background:var(--gold);color:#fff;white-space:nowrap}
.tier--feature .tier__img{height:172px}
.tier--feature .tier__price{font-size:3.3rem}
.tier--feature .tier__ship{color:var(--gold-deep);font-weight:600}

/* -- Change 6: final CTA with a product pack image ----------------------- */
.final--media{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;
  align-items:center;text-align:left;padding:52px 46px}
.final--media .final__img{position:relative}
.final--media .final__img img{max-width:340px;margin-inline:auto;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.38))}
.final--media .final__body{position:relative}
.final--media .final__body h2{text-align:left}
.final--media .final__body p{margin:0 0 1.6em;max-width:54ch}

/* -- Change 5: header collapses to a burger early enough that the 8-item
   nav never crowds or overlaps the logo/Order button --------------------- */
@media(max-width:1024px){
  .menu{display:none;gap:0}
  .menu.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 24px;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:flex;min-height:44px;min-width:44px;align-items:center;justify-content:center}
}

/* -- Change 4 + 5: responsive behaviour --------------------------------- */
@media(max-width:920px){
  .tier--feature{transform:none}      /* no scale when cards stack -> no overflow */
}
@media(max-width:768px){
  /* hero: bottle image first, immediately under the header (Change 4) */
  .hero__grid{display:flex;flex-direction:column}
  .hero__media{order:-1;margin-bottom:6px}
  /* final CTA: pack image above the copy, centred (Change 6) */
  .final--media{grid-template-columns:1fr;gap:26px;text-align:center;padding:40px 26px}
  .final--media .final__body h2{text-align:center}
  .final--media .final__body p{margin-left:auto;margin-right:auto}
  .final--media .final__img img{max-width:260px}
}
@media(max-width:560px){
  .qa--lg .qa__head{padding:20px 22px}
  .qa--lg .qa__head b{font-size:1.4rem}
  .qa--lg dl{grid-template-columns:1fr}
  .qa--lg dt,.qa--lg dd{padding:13px 22px}
  .qa--lg dt{white-space:normal;padding-bottom:2px}
  .qa--lg dd{padding-top:2px;border-top:0}
}

/* ==========================================================================
   27. BLOG INDEX + ARTICLE (editorial)
   ========================================================================== */
.bloggrid{display:grid;grid-template-columns:1.35fr .92fr;gap:34px;align-items:start}
.postcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft)}
.postcard--feat{display:flex;flex-direction:column}
.postcard__media{display:block}
.postcard__media img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform .4s ease}
.postcard__media:hover img{transform:scale(1.03)}
.postcard__body{padding:26px 28px 30px}
.postcard__tag{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:700}
.postcard--feat h2{font-size:1.7rem;line-height:1.15;margin:.35em 0 .4em}
.postcard--feat h2 a,.postcard--sm h3 a{color:var(--ink)}
.postcard--feat h2 a:hover,.postcard--sm h3 a:hover{color:var(--accent);text-decoration:none}
.postcard p{color:var(--muted);margin:0 0 1em}
.postcard__meta{font-size:.82rem;color:var(--faint);margin:.1em 0 1.2em}
.postcard .btn{margin-top:.2em}
.bloggrid__side{display:grid;gap:20px}
.postcard--sm .postcard__body{padding:22px 24px 24px}
.postcard--sm h3{font-size:1.14rem;margin:.35em 0 .4em;line-height:1.2}
.postcard__link{font-weight:600;font-size:.9rem;color:var(--accent);
  border-bottom:1px solid var(--accent-line)}
.postcard__link:hover{text-decoration:none;color:var(--accent-deep)}

/* --- single post ------------------------------------------------------- */
.post{max-width:760px;margin-inline:auto}
.post .eyebrow{margin-bottom:.6rem}
.post h1{margin:.1em 0 .5em}
.post__lead{font-size:1.24rem;line-height:1.62;color:var(--muted);margin-bottom:1.2em}
.post h2{font-size:clamp(1.5rem,2.6vw,1.9rem);margin-top:1.7em}
.post h3{font-size:1.22rem;margin-top:1.4em}
.post p,.post li{color:#2b2822}
.post ul,.post ol{padding-left:1.3em;display:grid;gap:.5em;margin:0 0 1.3em}
.post figure{margin:1.6em 0}
.post figure img{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.post figcaption{font-size:.82rem;color:var(--faint);margin-top:.6em;text-align:center}
.post table{width:100%;border-collapse:collapse;margin:1.2em 0 1.6em;font-size:.95rem}
.post table th,.post table td{text-align:left;padding:.62em .7em;border-bottom:1px solid var(--line);vertical-align:top}
.post table thead th{font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);background:var(--accent-tint)}
.tablewrap{overflow-x:auto}
.postcta{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  background:var(--accent-tint);border:1px solid var(--accent-line);
  border-radius:var(--radius-lg);padding:26px 30px;margin:2em 0}
.postcta img{width:180px;height:auto;flex:none;filter:drop-shadow(0 10px 24px rgba(20,18,12,.16))}
.postcta h3{margin:0 0 .3em;font-size:1.3rem}
.postcta p{margin:0 0 1em;color:var(--muted);font-size:.96rem}
.postcta .btn{margin:0}

@media(max-width:920px){
  .bloggrid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .postcta{grid-template-columns:1fr;text-align:center;padding:24px 22px}
  .postcta img{width:150px;margin:0 auto}
  .postcta .btn{width:100%}
}

/* ==========================================================================
   28. MOBILE OVERFLOW SAFETY NET (Change B)
   Root cause of the "right side fluctuating" was broken pricing/CTA <img>
   references (missing image files) rendering as
   oversized broken-image placeholders whose long alt text did not wrap and
   pushed the pricing cards past the right edge on phones. Those srcs are now
   repointed to the real product bottle image files. The rules below
   are the belt-and-braces net so nothing can ever exceed the viewport again.
   overflow-x:clip (not hidden) contains horizontal bleed WITHOUT creating a
   scroll container, so the sticky header and hide-on-scroll still work.
   ========================================================================== */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
*{min-width:0}
img,svg,video,iframe,table,figure{max-width:100%}
table{border-collapse:collapse}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.post table,.facttab{width:100%}

/* ==========================================================================
   29. HEADER HIDE-ON-SCROLL (Change C)
   The sticky header slides up out of view on scroll-down (past ~120px) and
   slides back down on scroll-up, so it never nags the reader. Driven by a
   small vanilla-JS handler that toggles .nav--hidden. It never hides while the
   mobile menu is open (see the inline script), keeping the burger usable, and
   it leaves the sticky buy-bar and #pricing scroll-margin-top untouched.
   ========================================================================== */
.nav{transition:transform .32s cubic-bezier(.4,0,.2,1),box-shadow .3s ease,background .3s ease}
.nav--hidden{transform:translateY(-100%)}