/* ==========================================================================
   Black Sugar Protect — blacksugarrprotect.com
   Premium editorial wellness: white / soft gray / black / warm gold.

   1. Variables    6. Hero          11. Reviews    16. Footer
   2. Base         7. Gold strip    12. Pricing    17. Fixed CTA
   3. Typography   8. Editorial     13. Bonuses    18. Responsive
   4. Header       9. Benefits      14. Guarantee  19. Accessibility
   5. Buttons     10. Ingredients   15. FAQ        20. Reduced motion

   IMAGE SHARPNESS (a hard requirement of this build)
   Product images are never upscaled past their native size, never given a
   fixed height with object-fit:cover, and never blurred, tinted or overlaid.
   The bottle asset is 604x821, so .product-image caps at 604px wide and the
   hero figure caps below that. No CSS filter, transform scale or backdrop
   filter is applied to any <img>. Everything uses height:auto and
   object-fit:contain.

   IMAGE PLATES
   The bottle and badge cut-outs are DARK artwork on transparency (52–61% of
   visible pixels below luminance 80), so they always sit on white, soft-gray
   or champagne plates — never on the black sections.
   ========================================================================== */

/* ------------------------------------------------------------ 1. Variables */

:root {
  --black: #171717;
  --deep-black: #0D0D0D;
  --charcoal: #292929;
  --gold: #B58A3A;
  --gold-dark: #8E6825;
  --gold-light: #D8BD82;
  --champagne: #EEE4D0;
  --soft-gray: #F5F5F3;
  --warm-gray: #EAE7E0;
  --text: #242424;
  --muted: #6E6E6E;
  --white: #FFFFFF;
  --border: #DDD9D0;

  --on-dark: #F4F1EA;
  --on-dark-soft: #BDB8AC;
  --line-dark: rgba(244, 241, 234, .16);

  --f-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad: 116px;
  --bar: 74px;
  --bar-clear: 94px;
  --r-s: 2px;
  --r: 4px;
  --r-l: 6px;
  --sh: 0 30px 60px -38px rgba(23, 23, 23, .34);
  --sh-2: 0 12px 28px -20px rgba(23, 23, 23, .24);
}

/* ----------------------------------------------------------------- 2. Base */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 126px; }

body {
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: var(--bar-clear);
}

img { max-width: 100%; height: auto; display: block; }

/* ----------------------------------------------------------- 3. Typography */

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--black);
  margin: 0 0 .5em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(38px, 5vw, 66px); letter-spacing: -.02em; }
h2 { font-size: clamp(29px, 3.4vw, 46px); letter-spacing: -.016em; }
h3 { font-size: clamp(21px, 2vw, 28px); }
h4 { font-size: 20px; }

p, li, dd, dt, td, th, figcaption, a, span, button { overflow-wrap: break-word; }
p { margin: 0 0 1.3em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-dark); text-underline-offset: 4px; }
a:hover { color: var(--black); }
strong { font-weight: 700; color: var(--black); }

::selection { background: var(--gold); color: #fff; }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: 34px; }
.wrap-mid { max-width: 1040px; }
.wrap-narrow { max-width: 800px; }

.sec { padding-block: var(--pad); position: relative; }
.sec-gray { background: var(--soft-gray); }
.sec-warm { background: var(--warm-gray); }
.sec-cream { background: var(--champagne); }
.sec-tight { padding-block: 84px; }

.on-black { background: var(--black); color: var(--on-dark); position: relative; overflow: hidden; }
.on-black h1, .on-black h2, .on-black h3, .on-black h4 { color: #fff; }
.on-black p { color: var(--on-dark-soft); }
.on-black strong { color: #fff; }
.on-black > * { position: relative; z-index: 1; }
.on-black .prose > p, .on-black .prose > ul > li, .on-black .prose > ol > li { color: var(--on-dark-soft); }
.on-black a:not(.btn-bsp) { color: var(--gold-light); }
.on-black a:not(.btn-bsp):hover { color: #fff; }

.on-deep { background: var(--deep-black); color: var(--on-dark); position: relative; overflow: hidden; }
.on-deep h2, .on-deep h3 { color: #fff; }
.on-deep p { color: var(--on-dark-soft); }
.on-deep strong { color: #fff; }
.on-deep > * { position: relative; z-index: 1; }
.on-deep a:not(.btn-bsp) { color: var(--gold-light); }

/* Editorial label: hairline rule + letterspaced caps */
.eyebrow {
  display: block; font-family: var(--f-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-dark); margin-bottom: 22px;
  padding-top: 16px; position: relative; line-height: 1.7;
}
.eyebrow::before {
  content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 1px;
  background: var(--gold);
}
.on-black .eyebrow, .on-deep .eyebrow, .feature .eyebrow, .lead-post .eyebrow { color: var(--gold-light); }
.on-black .eyebrow::before, .on-deep .eyebrow::before, .feature .eyebrow::before,
.lead-post .eyebrow::before { background: var(--gold-light); }

.sec-head { max-width: 840px; margin-bottom: 56px; }
.sec-head.mid { margin-inline: auto; text-align: center; }
.sec-head.mid .eyebrow::before { left: 50%; transform: translateX(-50%); }
.sec-head p { font-size: 19px; color: var(--muted); }
.on-black .sec-head p, .on-deep .sec-head p { color: var(--on-dark-soft); }

/* -------------------------------------------------------------- 5. Buttons */

.btn-bsp {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  font-family: var(--f-body); font-size: 13px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 20px 36px; min-height: 58px;
  border: 1px solid transparent; border-radius: var(--r-s);
  cursor: pointer; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .16s ease;
}
.btn-bsp:hover { transform: translateY(-2px); }

.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-dark); color: #fff; }

.btn-black { background: var(--black); color: #fff; }
.btn-black:hover { background: var(--charcoal); color: #fff; }

.btn-white { background: #fff; color: var(--black); }
.btn-white:hover { background: var(--champagne); color: var(--black); }

.btn-line { background: transparent; color: var(--black); border-color: var(--border); }
.btn-line:hover { color: var(--gold-dark); border-color: var(--gold); background: var(--soft-gray); }

.on-black .btn-line, .on-deep .btn-line, .feature .btn-line, .aside-card.dark .btn-line {
  color: #fff; border-color: rgba(244, 241, 234, .34);
}
.on-black .btn-line:hover, .on-deep .btn-line:hover, .feature .btn-line:hover,
.aside-card.dark .btn-line:hover { color: var(--black); border-color: #fff; background: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.arw { transition: transform .18s ease; }
.btn-bsp:hover .arw { transform: translateX(4px); }

/* ---------------------------------------------------------------- 4. Header */

.topbar { background: var(--black); color: var(--on-dark); font-size: 12px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 101; }
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 34px; min-height: 36px; padding-block: 6px; }
.topbar span { font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-dark); display: inline-flex; align-items: center; gap: 10px; }
.topbar span::before { content: ""; width: 4px; height: 4px; background: var(--gold);
  flex: none; transform: rotate(45deg); }

.site-header {
  position: fixed; top: 36px; left: 0; right: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background .28s ease, box-shadow .28s ease;
}
.site-header.is-stuck { background: rgba(255, 255, 255, .995);
  box-shadow: 0 6px 22px -18px rgba(23, 23, 23, .5); }
.header-inner { display: flex; align-items: center; justify-content: space-between;
  gap: 22px; min-height: 80px; transition: min-height .25s ease; }
.site-header.is-stuck .header-inner { min-height: 66px; }

/* Logo shown at half its native 775x307 so it stays crisp. */
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand img { width: 100%; max-width: 210px; height: auto; object-fit: contain; }
.site-footer .brand img { max-width: 200px; }

.nav-main { display: flex; align-items: center; gap: 24px; }
.nav-list { display: flex; align-items: center; gap: 19px; list-style: none; margin: 0; padding: 0; }
.nav-list a { font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--text);
  text-decoration: none; padding: 9px 0; position: relative; white-space: nowrap; }
.nav-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease; }
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--black); }
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { transform: scaleX(1); }

.nav-cta { flex: none; }
.nav-main > .nav-cta { display: none; }
.header-inner > .nav-cta .btn-bsp { padding: 13px 24px; min-height: 48px; font-size: 11.5px; }

.nav-toggle { display: none; width: 48px; height: 48px; flex: none; align-items: center;
  justify-content: center; background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-s); cursor: pointer; padding: 0; }
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--black);
  position: relative; transition: background .2s ease; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0;
  width: 20px; height: 1.5px; background: var(--black); transition: transform .24s ease, top .2s ease; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 10000;
  background: var(--black); color: #fff; padding: 14px 22px; border-radius: var(--r-s);
  font-weight: 600; font-size: 17px; }
.skip-link:focus { left: 16px; color: #fff; }

/* ------------------------------------------------------------- 17. Fixed CTA */

.order-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: var(--deep-black); border-top: 1px solid var(--gold);
  box-shadow: 0 -8px 30px -18px rgba(13, 13, 13, .9);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.order-bar-inner { display: flex; align-items: center; justify-content: space-between;
  gap: 22px; min-height: var(--bar); padding-block: 12px; }
.ob-brand { font-family: var(--f-head); font-weight: 600; font-size: 19px; color: #fff;
  flex: none; letter-spacing: -.01em; }
.ob-brand small { display: block; font-family: var(--f-body); font-size: 12.5px;
  font-weight: 400; color: var(--gold-light); letter-spacing: .06em; text-transform: uppercase; }
.ob-mid { font-size: 14px; color: var(--on-dark-soft); display: flex; align-items: center;
  gap: 16px; white-space: nowrap; overflow: hidden; justify-content: center; }
.ob-mid strong { color: #fff; font-weight: 500; }
.ob-cta { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--gold); color: #fff; text-decoration: none; font-weight: 600; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; min-height: 48px; padding: 13px 30px;
  border-radius: var(--r-s); transition: background .18s ease, transform .16s ease;
  white-space: nowrap; }
.ob-cta:hover { background: var(--gold-dark); color: #fff; transform: translateY(-1px); }
.ob-full { display: inline; }
.ob-short { display: none; }

/* ----------------------------------------------------------------- 6. Hero */

.hero { padding-top: 166px; padding-bottom: 0; position: relative; overflow: hidden;
  background: var(--white); }
.hero-inner { padding-bottom: 90px; }
.hero h1 em { font-style: italic; color: var(--gold-dark); }
.hero-lede { font-size: 19px; line-height: 1.7; color: var(--muted); max-width: 34em; }

/* Product stage. The bottle is 604x821 native; it is never rendered wider
   than that, never cropped, and carries no filter or overlay. */
.hero-stage { position: relative; display: flex; align-items: center; justify-content: center;
  padding: 20px; }
.hero-stage::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 78%; padding-bottom: 78%; border-radius: 50%;
  background: var(--soft-gray); z-index: 0;
}
.hero-stage::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 92%; padding-bottom: 92%; border-radius: 50%;
  border: 1px solid var(--warm-gray); z-index: 0;
}
.product-image {
  width: 100%; max-width: 604px; height: auto; object-fit: contain; display: block;
  position: relative; z-index: 1;
}
.hero-stage .product-image { max-width: 400px; }

.hero-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.hero-points li { position: relative; padding-left: 30px; font-size: 17px; color: var(--text); }
.hero-points li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px;
  height: 1px; background: var(--gold); }

.hero-trust { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; }
.hero-trust span { font-size: 11.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center;
  gap: 10px; }
.hero-trust span::before { content: ""; width: 4px; height: 4px; background: var(--gold);
  transform: rotate(45deg); }
.hero-fine { font-size: 15px; color: var(--muted); margin-top: 20px; }

/* ----------------------------------------------------- 7. Gold benefit strip */

.gold-strip { background: var(--gold); color: #fff; padding-block: 44px; }
.gold-item { display: flex; align-items: flex-start; gap: 14px; color: #fff; }
.gold-item .tick { flex: none; width: 20px; height: 20px; margin-top: 3px; position: relative; }
.gold-item .tick::before, .gold-item .tick::after { content: ""; position: absolute;
  background: #fff; }
.gold-item .tick::before { width: 2px; height: 9px; left: 5px; top: 8px; transform: rotate(-45deg); }
.gold-item .tick::after { width: 2px; height: 16px; left: 11px; top: 2px; transform: rotate(35deg); }
.gold-item h3 { color: #fff; font-family: var(--f-body); font-size: 15px; font-weight: 600;
  letter-spacing: .06em; margin: 0; line-height: 1.5; }

/* ---------------------------------------------------------- 8. Editorial */

.ed-lead { font-family: var(--f-head); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.42;
  color: var(--black); }

.feature { background: var(--black); color: var(--on-dark); padding: 54px; position: relative;
  overflow: hidden; }
.feature h3 { color: #fff; font-size: clamp(23px, 2.6vw, 32px); }
.feature p { color: var(--on-dark-soft); }
.feature strong { color: #fff; }

.panel { background: #fff; border: 1px solid var(--border); padding: 38px; height: 100%; }
.panel .p-n { font-family: var(--f-head); font-size: 14px; letter-spacing: .16em;
  color: var(--gold-dark); display: block; margin-bottom: 14px; }
.panel h3 { font-size: 23px; margin-bottom: 12px; }
.panel p { font-size: 17px; color: var(--muted); }

.cpanel { background: var(--black); padding: 46px; color: var(--on-dark); min-height: 300px;
  display: flex; flex-direction: column; justify-content: center; }
.cpanel h3 { color: #fff; }
.cpanel-k { font-size: 11.5px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 22px; }
.cpanel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.cpanel-list li { position: relative; padding-left: 28px; font-size: 17px; }
.cpanel-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 12px;
  height: 1px; background: var(--gold-light); }
.cpanel-list li strong { color: #fff; display: block; font-family: var(--f-head);
  font-weight: 600; font-size: 19px; }
.cpanel-list li span { color: var(--on-dark-soft); font-size: 16px; }

/* ------------------------------------------------------------- 9. Benefits */

.cblock { padding-block: 86px; border-bottom: 1px solid var(--border); }
.cblock:last-of-type { border-bottom: 0; }
.cblock.alt { background: var(--soft-gray); }

/* Media plate. Cut-out artwork is dark, so plates stay light. No filters. */
.cblock-media { background: var(--soft-gray); padding: 44px; display: flex; align-items: center;
  justify-content: center; position: relative; min-height: 300px; }
.cblock-media.cream { background: var(--champagne); }
.cblock-media.white { background: var(--white); border: 1px solid var(--border); }
.cblock-media img { position: relative; z-index: 1; width: 100%; max-width: 420px;
  height: auto; object-fit: contain; }
.cblock-media.wide img { max-width: 100%; }

.cblock-body .c-n { font-family: var(--f-head); font-size: 14px; letter-spacing: .16em;
  color: var(--gold-dark); display: block; margin-bottom: 16px; }
.cblock-body h2, .cblock-body h3 { margin-bottom: .5em; }
.cblock-body p { font-size: 17.5px; color: var(--text); }
.cblock-body .c-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.cblock-body .c-list li { position: relative; padding-left: 28px; font-size: 17px; }
.cblock-body .c-list li::before { content: ""; position: absolute; left: 0; top: 12px;
  width: 12px; height: 1px; background: var(--gold); }
.c-label { font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-top: 28px; display: block; }

/* --------------------------------------------------------- 10. Ingredients */

.ing-card { background: #fff; border: 1px solid var(--border); padding: 34px; height: 100%;
  display: flex; flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ing-card:hover { border-color: var(--gold); box-shadow: var(--sh-2); transform: translateY(-3px); }
.ing-num { font-family: var(--f-head); font-size: 13px; letter-spacing: .18em;
  color: var(--gold-dark); display: block; margin-bottom: 14px; }
.ing-card h3 { font-size: 23px; margin-bottom: 6px; }
.ing-card .latin { font-size: 14.5px; color: var(--muted); font-style: italic; display: block;
  margin-bottom: 14px; }
.ing-card p { font-size: 17px; color: var(--muted); flex: 1; }
.card-go { font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-dark); text-decoration: none; margin-top: 22px; display: inline-flex;
  align-items: center; gap: 9px; min-height: 44px; }
.card-go:hover { color: var(--black); }

.notice { border-left: 2px solid var(--gold); background: var(--soft-gray); padding: 28px 32px;
  margin: 32px 0; }
.notice h3 { font-size: 20px; margin-bottom: 12px; }
.notice p, .notice li { font-size: 17px; color: var(--text); }
.notice ul { margin: 0 0 1em; padding-left: 22px; }
.notice li { margin-bottom: .45em; }
.on-black .notice, .on-deep .notice { background: rgba(255, 255, 255, .06);
  border-left-color: var(--gold-light); }
.on-black .notice h3, .on-deep .notice h3 { color: #fff; }
.on-black .notice p, .on-black .notice li,
.on-deep .notice p, .on-deep .notice li { color: var(--on-dark-soft); }

/* Medical caution — pinned colours so it never inherits a dark context. */
.caution { background: #FBF0E4; border-left: 3px solid #9A5A12; padding: 28px 32px; margin: 32px 0; }
.caution h3 { font-size: 20px; margin-bottom: 12px; color: #6B3D06; }
.caution p, .caution li { font-size: 17px; color: #5B4023; }
.caution ul { margin: 0 0 1em; padding-left: 22px; }
.caution li { margin-bottom: .45em; }
.caution strong, .on-black .caution strong, .on-deep .caution strong { color: #4F3406; }
.on-black .caution p, .on-black .caution li,
.on-deep .caution p, .on-deep .caution li { color: #5B4023; }
.on-black .caution h3, .on-deep .caution h3 { color: #6B3D06; }

/* --------------------------------------------------------------- 11. Reviews */

.rev-lead { background: var(--champagne); padding: 52px; position: relative; }
.rev-lead p { font-family: var(--f-head); font-size: clamp(21px, 2.1vw, 27px); line-height: 1.46;
  color: var(--black); }

/* --------------------------------------------------------------- 12. Pricing */

.plan { background: #fff; border: 1px solid var(--border); padding: 40px 34px; display: flex;
  flex-direction: column; position: relative; height: 100%;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--gold); }
.plan.lead { border: 1px solid var(--gold); box-shadow: var(--sh-2); }
.plan-flag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--gold); color: #fff; font-weight: 600; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; padding: 9px 22px; white-space: nowrap; }
.plan-tag { font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); }
/* Light plate for the dark bottle cut-outs. The plate is a fixed height so the 1-, 3- and
   6-bottle pack shots — which have different aspect ratios — sit on a common baseline. */
.plan-media { display: flex; align-items: center; justify-content: center; margin: 22px 0;
  background: var(--soft-gray); padding: 22px; height: 300px; }
.plan-media img { max-width: 190px; max-height: 100%; width: auto; height: auto;
  object-fit: contain; }
.plan-count { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-dark); margin-top: 14px; }
.plan-name { font-family: var(--f-head); font-weight: 600; font-size: 28px; margin: 0 0 4px;
  color: var(--black); }
.plan-supply { font-size: 16.5px; color: var(--muted); }
.plan-fig { display: flex; align-items: baseline; gap: 9px; margin-top: 20px; }
.plan-fig .amt { font-family: var(--f-head); font-weight: 600; font-size: 46px; line-height: 1;
  color: var(--black); }
.plan-fig .per { font-size: 16px; color: var(--muted); }
.plan-total { font-size: 17px; color: var(--text); margin-top: 10px; }
.plan-total strong { color: var(--gold-dark); }
.plan-list { list-style: none; padding: 22px 0 0; margin: 22px 0 0; border-top: 1px solid var(--border);
  display: grid; gap: 10px; flex: 1; }
.plan-list li { position: relative; padding-left: 28px; font-size: 16.5px; color: var(--text); }
.plan-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px;
  height: 1px; background: var(--gold); }
.plan-list li.off { color: var(--muted); }
.plan-list li.off::before { background: var(--border); }
.plan .btn-bsp { width: 100%; margin-top: 26px; }

/* -------------------------------------------------------------- 13. Bonuses */

.bonus-card { background: #fff; border: 1px solid var(--border); padding: 34px; height: 100%;
  display: flex; flex-direction: column; }
.bonus-media { background: var(--soft-gray); padding: 26px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 24px; min-height: 260px; }
.bonus-media img { max-width: 280px; width: 100%; height: auto; object-fit: contain; }
.bonus-k { font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-dark); display: block; margin-bottom: 10px; }
.bonus-card h3 { font-size: 23px; margin-bottom: 10px; }
.bonus-card p { font-size: 17px; color: var(--muted); }

/* ------------------------------------------------------------ 14. Guarantee */

.promise-seal { display: flex; align-items: center; justify-content: center;
  background: var(--soft-gray); padding: 46px; }
.promise-seal img { width: 100%; max-width: 330px; height: auto; object-fit: contain; }

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }
.ticks li { position: relative; padding-left: 28px; font-size: 17px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 12px; width: 12px; height: 1px;
  background: var(--gold); }
.on-black .ticks li { color: var(--on-dark-soft); }
.on-black .ticks li::before { background: var(--gold-light); }

/* Certification strip: wide opaque artwork, shown at native ratio. */
.certs { background: #fff; border: 1px solid var(--border); padding: 34px 40px; }
.certs img { width: 100%; max-width: 900px; height: auto; margin-inline: auto;
  object-fit: contain; }
.badge-card { background: #fff; border: 1px solid var(--border); padding: 30px; text-align: center;
  height: 100%; }
.badge-card img { width: 100%; max-width: 110px; height: auto; margin: 0 auto 18px;
  object-fit: contain; }
.badge-card h3 { font-size: 19px; margin-bottom: 9px; }
.badge-card p { font-size: 16.5px; color: var(--muted); margin: 0; }

.photo-cap { font-size: 15px; color: var(--muted); margin-top: 16px; }
.on-black .photo-cap, .on-deep .photo-cap { color: var(--on-dark-soft); }

/* ------------------------------------------------------------------ 15. FAQ */

.qa { display: grid; gap: 0; border-top: 1px solid var(--border); }
.qa-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; background: none; border: 0; cursor: pointer; display: flex;
  align-items: flex-start; justify-content: space-between; gap: 26px; padding: 30px 0;
  text-align: left; font-family: var(--f-head); font-weight: 600; font-size: 22px;
  color: var(--black); line-height: 1.36; transition: color .18s ease; }
.faq-q:hover { color: var(--gold-dark); }
.faq-ico { flex: none; width: 22px; height: 22px; position: relative; margin-top: 6px; }
.faq-ico::before, .faq-ico::after { content: ""; position: absolute; background: var(--gold);
  transition: transform .26s ease, opacity .26s ease; }
.faq-ico::before { top: 10px; left: 0; width: 22px; height: 1.5px; }
.faq-ico::after { left: 10px; top: 0; width: 1.5px; height: 22px; }
.faq-q[aria-expanded="true"] .faq-ico::after { transform: rotate(90deg); opacity: 0; }
.faq-a { overflow: hidden; height: 0; transition: height .3s ease; }
.faq-a-inner { padding: 0 60px 30px 0; }
.faq-a-inner p { font-size: 17px; color: var(--muted); }
.on-black .qa, .on-black .qa-item { border-color: var(--line-dark); }
.on-black .faq-q { color: #fff; }
.on-black .faq-q:hover { color: var(--gold-light); }
.on-black .faq-ico::before, .on-black .faq-ico::after { background: var(--gold-light); }
.on-black .faq-a-inner p { color: var(--on-dark-soft); }

/* ----------------------------------------------------------------- 17. Blog */

.lead-post { background: var(--black); padding: 50px; text-decoration: none; color: var(--on-dark);
  position: relative; overflow: hidden; display: block; }
.lead-post:hover { color: var(--on-dark); }
.lead-post:hover h3 { color: var(--gold-light); }
.lead-post h3 { color: #fff; font-size: clamp(25px, 2.7vw, 35px); transition: color .2s ease; }
.lead-post p { color: var(--on-dark-soft); font-size: 18px; }

.post-list { display: grid; border-top: 1px solid var(--black); }
.post-row { display: grid; grid-template-columns: 210px 1fr 130px; gap: 32px; padding: 32px 0;
  border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; align-items: start;
  transition: background .2s ease; }
.post-row:hover { color: inherit; background: var(--soft-gray); }
.post-row:hover h3 { color: var(--gold-dark); }
.post-cat { font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-dark); }
.post-row h3 { font-size: 22px; margin-bottom: 9px; transition: color .2s ease; }
.post-row p { font-size: 17px; color: var(--muted); margin: 0; }
.post-read { font-size: 15.5px; color: var(--muted); text-align: right; }

.rel { border: 1px solid var(--border); padding: 32px; text-decoration: none; color: inherit;
  display: block; background: #fff; height: 100%;
  transition: border-color .2s ease, transform .2s ease; }
.rel:hover { border-color: var(--gold); transform: translateY(-3px); color: inherit; }
.rel .rel-k { font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-dark); display: block; margin-bottom: 14px; }
.rel h3 { font-size: 21px; margin-bottom: 10px; }
.rel p { font-size: 17px; color: var(--muted); margin: 0; }

/* Page furniture */
.crumbs { padding-top: 142px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 11px; margin: 0; padding: 0;
  font-size: 15px; color: var(--muted); }
.crumbs li { display: flex; align-items: center; gap: 11px; }
.crumbs li + li::before { content: "\203A"; color: var(--gold); }
.crumbs a { color: var(--text); text-decoration: none; min-height: 44px; display: inline-flex;
  align-items: center; }
.crumbs a:hover { color: var(--gold-dark); }
.crumbs [aria-current] { color: var(--black); }

.lede { font-size: 20px; color: var(--muted); max-width: 42em; margin-top: 14px; }

.prose { max-width: 780px; }
.prose h2 { margin-top: 58px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 38px; font-size: 24px; }
.prose ul, .prose ol { padding-left: 24px; margin: 0 0 1.3em; }
.prose li { margin-bottom: .65em; }
.prose > p, .prose > ul > li, .prose > ol > li { color: var(--text); }

.spec { border-top: 1px solid var(--black); margin: 36px 0; }
.spec-row { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 30px;
  padding: 18px 0; border-bottom: 1px solid var(--border); }
.spec-k { font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-dark); min-width: 0; overflow-wrap: anywhere; }
.spec-v { font-size: 17px; min-width: 0; overflow-wrap: break-word; }

.aside { position: sticky; top: 130px; display: grid; gap: 18px; }
.aside-card { border: 1px solid var(--border); padding: 30px; background: #fff; }
.aside-card h3 { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px; font-family: var(--f-body); font-weight: 600; }
.aside-links { list-style: none; margin: 0; padding: 0; display: grid; }
.aside-links a { font-size: 16.5px; color: var(--text); text-decoration: none; display: flex;
  align-items: center; min-height: 42px; border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere; }
.aside-links li:last-child a { border-bottom: 0; }
.aside-links a:hover { color: var(--gold-dark); }
.aside-card.dark { background: var(--black); border-color: transparent; color: var(--on-dark); }
.aside-card.dark h3 { color: var(--gold-light); }
.aside-card.dark p { font-size: 17px; color: var(--on-dark-soft); }
.aside-card.dark strong { color: #fff; }
.aside-card.dark .btn-bsp { width: 100%; margin-top: 18px; }

.meta-line { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; font-size: 15.5px;
  color: var(--muted); margin-bottom: 18px; }
.meta-line .m-cat { font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-dark); font-size: 11.5px; }

/* --------------------------------------------------------------- 16. Footer */

.site-footer { background: var(--deep-black); color: var(--on-dark-soft); padding-block: 76px 42px;
  font-size: 17px; }
.site-footer strong { color: #fff; }
.footer-brand p { font-size: 17px; color: var(--on-dark-soft); max-width: 32em; margin-top: 20px; }
.footer-col h3 { font-family: var(--f-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a { color: var(--on-dark-soft); text-decoration: none; font-size: 17px; display: flex;
  align-items: center; min-height: 40px; overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--gold-light); }
.footer-legal { border-top: 1px solid var(--line-dark); padding-top: 30px; margin-top: 46px; }
.footer-legal p { font-size: 15.5px; color: var(--on-dark-soft); max-width: 80em; }
.footer-legal a { color: var(--gold-light); }
.footer-legal a:hover { color: #fff; }
.footer-legal .fda { padding: 22px 26px; background: rgba(255, 255, 255, .05); margin-bottom: 22px;
  font-size: 16.5px; }
.footer-meta { display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-dark); }

/* ------------------------------------------------------- 19. Accessibility */

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.reveal { opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------- 18. Responsive */

@media (max-width: 1199.98px) {
  :root { --pad: 92px; }
  .cblock { padding-block: 68px; }
  .feature { padding: 40px; }
}

@media (max-width: 991.98px) {
  :root { --pad: 80px; }
  .hero { padding-top: 150px; }
  .hero-inner { padding-bottom: 70px; }
  .hero-stage { order: -1; margin-bottom: 12px; }
  .hero-stage .product-image { max-width: 320px; }
  .aside { position: static; }
  .cblock-media, .cpanel { min-height: 0; }
  .cblock-media { padding: 32px; }
  .cpanel { padding: 36px; }
  .spec-row { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 18px; }
  .post-row { grid-template-columns: 1fr; gap: 11px; }
  .post-read { text-align: left; }
  .nav-toggle { display: flex; }
  .nav-main { position: fixed; inset: 116px 0 auto; z-index: 99; background: #fff;
    border-bottom: 1px solid var(--border); box-shadow: var(--sh); flex-direction: column;
    align-items: stretch; gap: 0; padding: 20px 34px 32px; max-height: calc(100vh - 190px);
    overflow-y: auto; display: none; }
  .nav-main.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a { padding: 15px 0; font-size: 18px; min-height: 54px; display: flex;
    align-items: center; border-bottom: 1px solid var(--border); }
  .nav-list a::after { display: none; }
  .header-inner > .nav-cta { display: none; }
  .nav-main > .nav-cta { display: block; margin-top: 20px; }
  .nav-main > .nav-cta .btn-bsp { width: 100%; }
  .ob-mid { display: none; }
  .ob-full { display: none; }
  .ob-short { display: inline; }
}

@media (max-width: 767.98px) {
  :root { --pad: 64px; --bar: 68px; --bar-clear: 86px; }
  body { font-size: 17px; }
  .wrap { padding-inline: 20px; }
  /* Bootstrap's g-5 gutter creates -24px row margins, which exceed the 20px
     wrap padding here and would push the grid past the viewport. */
  .row { --bs-gutter-x: 2rem; }
  .topbar { font-size: 10.5px; }
  .topbar-inner { gap: 2px 16px; }
  .hero { padding-top: 138px; }
  .hero-inner { padding-bottom: 52px; }
  .hero-lede { font-size: 17.5px; }
  .hero-stage { padding: 8px; }
  .hero-stage .product-image { max-width: 260px; }
  .btn-bsp { white-space: normal; padding-inline: 24px; }
  .plan, .panel, .rel, .aside-card, .badge-card, .bonus-card { padding: 26px; min-width: 0; }
  .ing-card { padding: 26px; }
  .feature, .lead-post, .rev-lead, .promise-seal, .certs { padding: 28px 24px; }
  .cblock { padding-block: 50px; }
  .cblock-media { padding: 26px; }
  .cpanel { padding: 30px 24px; }
  .sec-head { margin-bottom: 36px; }
  .sec-head p { font-size: 18px; }
  .spec-row { grid-template-columns: 1fr; gap: 5px; }
  .faq-q { font-size: 19px; padding: 24px 0; gap: 16px; }
  .faq-a-inner { padding: 0 0 24px; }
  .btn-row .btn-bsp { width: 100%; }
  .plan-media { height: 250px; padding: 16px; }
  .plan-media img { max-width: 150px; }
  .bonus-media { min-height: 210px; }
  .notice, .caution { padding: 24px 24px; }
  .crumbs { padding-top: 126px; }
  .order-bar-inner { gap: 12px; padding-block: 10px; }
  .ob-brand { font-size: 16px; }
  .ob-brand small { font-size: 11px; }
  .ob-cta { font-size: 12px; padding: 12px 20px; min-height: 48px; letter-spacing: .12em; }
}

@media (max-width: 400px) {
  .ob-cta { padding-inline: 14px; font-size: 11px; letter-spacing: .08em; min-height: 48px; }
  .ob-brand { font-size: 15px; }
  .brand img { max-width: 160px; }
}

/* ------------------------------------------------------- 20. Reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .topbar, .nav-toggle, .btn-bsp, .aside, .order-bar { display: none !important; }
  body { font-size: 12pt; color: #000; padding-bottom: 0; }
  .sec, .cblock { padding-block: 18pt; }
}

/* ------------------------------------------- Contrast corrections (AA) */
/* Measured failures against the specified palette, corrected minimally:
   - white on --gold (#B58A3A) measured 3.15:1; small white text now sits on
     --gold-dark (#8E6825, 5.05:1). The large gold benefit strip keeps the
     brighter gold, where its 15px semibold type still reads clearly.
   - --muted (#6E6E6E) measured 4.04:1 on champagne; raised to #615F5C,
     which clears 5.04:1 on every ground used.
   - the gold eyebrow measured 4.00:1 on champagne; darkened to #7A591C. */

:root {
  --muted: #615F5C;
  --gold-ink: #7A591C;
}

.eyebrow { color: var(--gold-ink); }
.sec-head p, .plan-supply, .plan-tag, .photo-cap, .post-read, .post-row p,
.rel p, .ing-card p, .panel p, .badge-card p, .bonus-card p, .lede,
.meta-line, .crumbs ol, .faq-a-inner p, .hero-lede, .hero-fine,
.aside-card h3, .prose > p { color: var(--muted); }

.plan-flag { background: var(--gold-dark); }
.ob-cta { background: var(--gold-dark); }
.ob-cta:hover { background: #7D5B20; }
.btn-gold { background: var(--gold-dark); }
.btn-gold:hover { background: #7D5B20; }
.ing-num, .bonus-k, .post-cat, .rel .rel-k, .spec-k, .card-go, .panel .p-n,
.cblock-body .c-n, .m-cat { color: var(--gold-ink); }
.card-go:hover { color: var(--black); }
.ob-brand small { color: var(--gold-light); }

/* The gold benefit strip keeps the brief's specified #B58A3A. White on it
   measures 3.15:1, which passes the 3:1 large-text threshold but not the
   4.5:1 small-text one — so the type is raised to 19px/700, which qualifies
   as large text. The specified colour is preserved rather than darkened. */
.gold-item h3 { font-size: 19px; font-weight: 700; letter-spacing: .02em; }
@media (max-width: 767.98px) { .gold-item h3 { font-size: 19px; } }