/* ==========================================================================
   SodaTide — independent information site (sodatiade.com)

   Design deliberately unrelated to the reference, which runs a dark
   microbiome-themed sales page with green accents, star ratings, a countdown
   timer and stock counters. This site uses a light editorial ground with
   deep indigo and persimmon, Spectral over Karla, 6px radii and a
   rule-and-numeral system. No countdown, no scarcity device, no rating.

   COLOUR AND CONTRAST NOTES (verified by contrast.py at build time)
   Every text/background pairing clears WCAG AA — 4.5:1 body, 3:1 large.
     1. Light surfaces use --ink (#171A26) or --body (#4E5364) on ivory.
     2. Dark surfaces use --on-dark (#F3F4F8) or --on-dark-soft (#B9BECF).
        Do not darken --on-dark-soft, and do not let global strong/.prose
        colours leak into a dark section — explicit overrides exist below.
     3. --numeral and --muted are both verified against every light ground
        actually used (white, ivory, ivory-2, indigo wash, persimmon wash).

   IMAGE-BACKGROUND RULES (load-bearing — this pack runs in BOTH directions)
   1. LIGHT cut-outs: the bottle packs and the guarantee pack shot are WHITE
      bottles on transparency (mean visible luminance ~166, roughly 30% of
      pixels above 215). On a near-white plate their edges disappear, so they
      always sit on a TINTED plate, never on plain white.
   2. DARK cut-outs: the trust badges and the bonus covers run dark (55–64% of
      visible pixels below luminance 80). They go on LIGHT plates only.
   The label strip, the ingredient photographs and the lifestyle photographs
   are opaque rectangles and are safe on any ground.
   Every gradient plate also carries a solid base colour, so the tint survives
   if the gradient fails to paint and so the computed background is never
   transparent. content_block() raises on either violation; imgbg.py verifies
   both in a real browser.

   Benefit blocks use the real Bootstrap grid (row / col-lg-6 / col-md-6 /
   align-items-center) in normal document flow — never absolute positioning,
   never a wide image against a narrow text column.
   Includes the mandatory fixed bottom order bar.
   ========================================================================== */

:root {
  --ink: #171A26;
  --ink-2: #1F2334;
  --ink-3: #333853;

  --indigo: #2B3566;
  --indigo-2: #3A4784;
  --indigo-3: #1E2549;
  --indigo-wash: #E8EAF4;
  --indigo-wash-2: #D6DAEC;

  --persimmon: #C0552C;
  --persimmon-2: #D2683D;
  --persimmon-3: #93401F;
  --persimmon-wash: #FBECE4;

  --text: #171A26;
  --body: #4E5364;
  --muted: #5A5F70;
  --line: #E2DED6;
  --line-2: #EFEBE4;

  --paper: #F8F5EF;
  --paper-2: #F1ECE3;
  --white: #FFFFFF;

  --on-dark: #F3F4F8;
  --on-dark-soft: #B9BECF;
  --line-dark: rgba(243, 244, 248, .16);

  --numeral: #6E7590;

  --f-head: "Spectral", Georgia, "Times New Roman", serif;
  --f-body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad: 112px;
  --bar: 76px;
  --bar-clear: 96px;
  --r-s: 4px;
  --r: 6px;
  --r-l: 10px;
  --sh: 0 26px 56px -34px rgba(23, 26, 38, .44);
  --sh-2: 0 10px 26px -18px rgba(23, 26, 38, .3);
  --sh-ind: 0 14px 32px -14px rgba(43, 53, 102, .5);
}

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

body {
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.78;
  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; }

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 .5em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(36px, 5vw, 57px); letter-spacing: -.02em; }
h2 { font-size: clamp(28px, 3.3vw, 40px); letter-spacing: -.016em; }
h3 { font-size: clamp(21px, 1.9vw, 26px); }
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(--indigo-3); text-underline-offset: 4px; }
a:hover { color: var(--indigo); }
strong { font-weight: 700; color: var(--text); }

::selection { background: var(--indigo); color: #fff; }
:focus-visible { outline: 3px solid var(--indigo-2); outline-offset: 3px; border-radius: 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;
}
.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 10000;
  background: var(--ink); color: #fff; padding: 14px 22px;
  border-radius: var(--r-s); font-weight: 700; font-size: 17px;
}
.skip-link:focus { left: 16px; color: #fff; }

.seo-link {
  color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: rgba(43, 53, 102, .55);
}
.seo-link:hover { color: inherit; text-decoration-color: currentColor; }
.on-ink .seo-link, .on-deep .seo-link { text-decoration-color: rgba(185, 190, 207, .9); }

/* ------------------------------------------------------------------ Layout */

.wrap { width: 100%; max-width: 1250px; margin: 0 auto; padding-inline: 32px; }
.wrap-mid { max-width: 1030px; }
.wrap-narrow { max-width: 800px; }

.sec { padding-block: var(--pad); position: relative; }
.sec-paper { background: var(--paper); }
.sec-paper-2 { background: var(--paper-2); }
.sec-indigo { background: var(--indigo-wash); }
.sec-persimmon { background: var(--persimmon-wash); }
.sec-tight { padding-block: 82px; }

.on-ink { background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; }
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: #fff; }
.on-ink p { color: var(--on-dark-soft); }
.on-ink strong { color: #fff; }
.on-ink > * { position: relative; z-index: 1; }

.on-deep { background: var(--ink-2); color: var(--on-dark); position: relative; overflow: hidden; }
.on-deep h2, .on-deep h3, .on-deep h4 { color: #fff; }
.on-deep p { color: var(--on-dark-soft); }
.on-deep strong { color: #fff; }
.on-deep > * { position: relative; z-index: 1; }

.on-ink .prose > p, .on-deep .prose > p,
.on-ink .prose > ul > li, .on-deep .prose > ul > li,
.on-ink .prose > ol > li, .on-deep .prose > ol > li { color: var(--on-dark-soft); }

.glow {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 82% 18%, rgba(58, 71, 132, .42) 0, transparent 48%),
    radial-gradient(circle at 6% 86%, rgba(192, 85, 44, .24) 0, transparent 44%);
}

/* Signature device: stacked rule + uppercase label */
.eyebrow {
  display: block; font-family: var(--f-body); font-size: 12.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--indigo-3); margin-bottom: 20px;
  padding-top: 16px; position: relative; line-height: 1.6;
}
.eyebrow::before {
  content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 3px;
  background: var(--persimmon);
}
.on-ink .eyebrow, .on-deep .eyebrow, .feature .eyebrow, .lead-post .eyebrow,
.cpanel .eyebrow, .dosebox .eyebrow { color: #A8B3E0; }
.on-ink .eyebrow::before, .on-deep .eyebrow::before, .feature .eyebrow::before,
.lead-post .eyebrow::before, .cpanel .eyebrow::before,
.dosebox .eyebrow::before { background: #E8946B; }

.sec-head { max-width: 820px; margin-bottom: 54px; }
.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(--body); }
.on-ink .sec-head p, .on-deep .sec-head p { color: var(--on-dark-soft); }

/* ----------------------------------------------------------------- Buttons */

.btn-sd {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-body); font-size: 15px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 18px 32px; min-height: 58px;
  border: 2px solid transparent; border-radius: var(--r);
  cursor: pointer; text-decoration: none;
  transition: transform .16s ease, box-shadow .18s ease, background .18s ease,
              border-color .18s ease, color .18s ease;
}
.btn-sd:hover { transform: translateY(-2px); }
.btn-sd:active { transform: translateY(0); }

.btn-indigo { background: var(--indigo); color: #fff; box-shadow: var(--sh-ind); }
.btn-indigo:hover { background: var(--indigo-2); color: #fff; box-shadow: 0 18px 40px -14px rgba(43, 53, 102, .64); }

.btn-persimmon { background: var(--persimmon); color: #fff; }
.btn-persimmon:hover { background: var(--persimmon-2); color: #fff; }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-3); color: #fff; }

.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--indigo-wash); color: var(--indigo-3); }

.btn-line { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-line:hover { color: var(--indigo-3); border-color: var(--indigo); background: var(--indigo-wash); }

.on-ink .btn-line, .on-deep .btn-line, .feature .btn-line, .aside-card.dark .btn-line {
  color: #fff; border-color: rgba(243, 244, 248, .38);
}
.on-ink .btn-line:hover, .on-deep .btn-line:hover, .feature .btn-line:hover,
.aside-card.dark .btn-line:hover {
  color: var(--ink); border-color: #fff; background: #fff;
}

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

/* ------------------------------------------------------------- Top bar */

.topbar {
  background: var(--ink); color: var(--on-dark);
  font-size: 13.5px; 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: 38px; padding-block: 7px;
}
.topbar span {
  font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-dark);
  display: inline-flex; align-items: center; gap: 10px;
}
.topbar span::before { content: ""; width: 14px; height: 3px; background: #E8946B; flex: none; }

/* ------------------------------------------------------------------ Header */

.site-header {
  position: fixed; top: 38px; left: 0; right: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--line-2);
  transition: border-color .28s ease, box-shadow .28s ease;
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, .99);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px -16px rgba(23, 26, 38, .4);
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 76px; transition: min-height .25s ease; }
.site-header.is-stuck .header-inner { min-height: 64px; }

.brand {
  font-family: var(--f-head); font-weight: 600; font-size: 27px;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 11px; flex: none;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 12px; height: 30px; flex: none; border-radius: 2px;
  background: linear-gradient(180deg, var(--indigo-2), var(--indigo-3));
  position: relative;
}
.brand-mark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  border-radius: 0 0 2px 2px; background: var(--persimmon);
}
.brand i { font-style: italic; color: var(--indigo); }

.nav-main { display: flex; align-items: center; gap: 22px; }
.nav-list { display: flex; align-items: center; gap: 17px; list-style: none; margin: 0; padding: 0; }
.nav-list a {
  font-size: 15px; font-weight: 600;
  color: var(--body); 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: 2px;
  background: var(--persimmon);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--ink); }
.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-sd { padding: 13px 22px; min-height: 48px; font-size: 13.5px; }

.nav-toggle {
  display: none; width: 48px; height: 48px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-s); cursor: pointer; padding: 0;
}
.nav-toggle span { display: block; width: 21px; height: 2px; background: var(--ink); position: relative; transition: background .2s ease; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 21px; height: 2px;
  background: var(--ink); transition: transform .24s ease, top .2s ease;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.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); }

/* ==================================================== FIXED BOTTOM ORDER BAR */

.order-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: var(--ink);
  border-top: 3px solid var(--persimmon);
  box-shadow: 0 -6px 28px -14px rgba(23, 26, 38, .85);
  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; letter-spacing: -.015em; flex: none;
}
.ob-mid {
  font-size: 15px; color: var(--on-dark-soft); text-align: center;
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
  justify-content: center; white-space: nowrap; overflow: hidden;
}
.ob-mid strong { color: #fff; font-weight: 600; }
.ob-price {
  font-family: var(--f-body); font-weight: 700; font-size: 15px;
  color: #E8946B; white-space: nowrap; letter-spacing: .05em;
}
.ob-cta {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--persimmon); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 15px; letter-spacing: .07em; text-transform: uppercase;
  min-height: 48px; padding: 12px 28px; border-radius: var(--r);
  transition: background .18s ease, transform .16s ease;
  white-space: nowrap;
}
.ob-cta:hover { background: var(--persimmon-2); color: #fff; transform: translateY(-1px); }
.ob-full { display: inline; }
.ob-short { display: none; }

/* -------------------------------------------------------------------- Hero */

.hero {
  padding-top: 162px; padding-bottom: 92px; position: relative; overflow: hidden;
  background: var(--paper-2)
    linear-gradient(166deg, var(--paper) 0%, var(--paper-2) 58%, var(--indigo-wash) 128%);
  color: var(--text);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 80% 24%, rgba(43, 53, 102, .12) 0, transparent 52%),
    radial-gradient(circle at 4% 86%, rgba(192, 85, 44, .1) 0, transparent 44%);
}
.hero > .wrap { position: relative; z-index: 2; }
.hero h1 { color: var(--ink); }
.hero h1 em { font-style: italic; color: var(--indigo-3); }
.hero-lede { font-size: 20px; line-height: 1.7; color: var(--body); max-width: 33em; }

/* Tinted stage: the bottle is a WHITE cut-out and would wash out on plain white. */
.hero-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--indigo-wash-2)
    linear-gradient(156deg, var(--indigo-wash), var(--indigo-wash-2));
  border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 30px; box-shadow: var(--sh);
}
.hero-stage img { position: relative; z-index: 1; width: 100%; max-width: 370px; }

.hero-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.hero-points li {
  position: relative; padding-left: 34px; font-size: 18px; color: var(--text); font-weight: 500;
}
.hero-points li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 20px; height: 3px;
  background: var(--persimmon);
}

.hero-offer {
  margin-top: 28px; padding: 20px 26px;
  background: #fff; border: 1px solid var(--line);
  border-left: 5px solid var(--persimmon);
  border-radius: var(--r);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  box-shadow: var(--sh-2);
}
.hero-offer .from {
  font-family: var(--f-head); font-weight: 600; font-size: 30px;
  letter-spacing: -.018em; color: var(--ink);
}
.hero-offer .from small { font-family: var(--f-body); font-size: 15px; font-weight: 500; color: var(--indigo-3); letter-spacing: 0; }
.hero-offer .gtee { font-size: 16px; color: var(--body); }

.hero-trust { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-chip {
  font-size: 12.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink);
  border: 1px solid var(--line); background: #fff;
  padding: 8px 16px; border-radius: var(--r-s);
}
.hero-fine { font-size: 15px; color: var(--muted); margin-top: 16px; }

/* Trust strip */
.strip { padding-block: 30px; background: var(--ink); }
.strip-item {
  display: flex; align-items: flex-start; gap: 14px;
  color: #fff; font-weight: 600; font-size: 15.5px;
}
.strip-item::before {
  content: ""; width: 16px; height: 3px; flex: none;
  background: #E8946B; margin-top: 12px;
}
.strip-item small { display: block; font-weight: 400; font-size: 14px; color: var(--on-dark-soft); }

/* --------------------------------------------------------- Quick facts */

.fact {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px; box-shadow: var(--sh-2); height: 100%;
  border-top: 3px solid var(--indigo);
}
.fact dt {
  font-size: 11.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--indigo-3); margin-bottom: 10px;
}
.fact dd { margin: 0; font-family: var(--f-head); font-weight: 600; font-size: 24px; letter-spacing: -.018em; color: var(--ink); }
.fact dd small { display: block; font-family: var(--f-body); font-weight: 400; font-size: 15px; color: var(--body); letter-spacing: 0; margin-top: 6px; line-height: 1.55; }

/* ============================================ CONTENT BLOCKS (Bootstrap grid) */

.cblock { padding-block: 74px; border-bottom: 1px solid var(--line); }
.cblock:last-of-type { border-bottom: 0; }
.cblock.alt { background: var(--paper); }

/* TINTED media plate — required for the white bottle cut-outs. */
.cblock-media {
  background: var(--indigo-wash-2)
    linear-gradient(156deg, var(--indigo-wash), var(--indigo-wash-2));
  border-radius: var(--r-l);
  padding: 34px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; min-height: 300px;
}
.cblock-media img {
  position: relative; z-index: 1; width: 100%; max-width: 330px;
  object-fit: contain;
}
/* LIGHT plate variants — for the DARK cut-outs (badges, bonus covers). */
.cblock-media.pale { background: var(--paper-2); }
.cblock-media.clay { background: var(--persimmon-wash); }

/* Opaque photography: full-bleed rectangle, safe on any ground. */
.cblock-media.photo { padding: 0; background: var(--paper-2); border-radius: var(--r-l); }
.cblock-media.photo img { max-width: 100%; border-radius: var(--r-l); }

.cpanel {
  background: var(--ink);
  border-radius: var(--r-l); padding: 44px; color: var(--on-dark);
  min-height: 300px; display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.cpanel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 84% 20%, rgba(58, 71, 132, .44) 0, transparent 54%);
}
.cpanel > * { position: relative; z-index: 1; }
.cpanel-k {
  font-size: 12px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: #A8B3E0; margin-bottom: 18px;
}
.cpanel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cpanel-list li { position: relative; padding-left: 30px; font-size: 17px; }
.cpanel-list li::before {
  content: ""; position: absolute; left: 0; top: 13px; width: 18px; height: 3px;
  background: #E8946B;
}
.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; }

.cblock-body .c-n {
  font-family: var(--f-head); font-weight: 600; font-size: 46px; line-height: 1;
  color: var(--numeral); display: block; margin-bottom: 10px; letter-spacing: -.025em;
}
.cblock-body h2, .cblock-body h3 { margin-bottom: .55em; }
.cblock-body p { font-size: 17.5px; color: var(--body); }
.cblock-body .c-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.cblock-body .c-list li { position: relative; padding-left: 30px; font-size: 17px; color: var(--body); }
.cblock-body .c-list li::before {
  content: ""; position: absolute; left: 0; top: 13px; width: 18px; height: 3px;
  background: var(--persimmon);
}

/* ------------------------------------------------------ Editorial layouts */

.stage {
  background: var(--indigo-wash-2)
    linear-gradient(156deg, var(--indigo-wash), var(--indigo-wash-2));
  border-radius: var(--r-l);
  padding: 38px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.stage img { position: relative; z-index: 1; width: 100%; max-width: 340px; margin-inline: auto; object-fit: contain; }
.stage.pale { background: var(--paper-2); }

/* Label strip — opaque wide artwork, shown edge to edge. */
.labelstrip {
  border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden;
  background: var(--paper-2);
}
.labelstrip img { width: 100%; }
.labelcap { font-size: 15px; color: var(--muted); margin-top: 14px; }

/* Numbered pathway */
.path { display: grid; gap: 18px; }
.path-item {
  display: grid; grid-template-columns: 62px 1fr; gap: 24px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 30px;
  box-shadow: var(--sh-2);
}
.path-n {
  font-family: var(--f-head); font-weight: 600; font-size: 36px; line-height: 1;
  color: var(--numeral); letter-spacing: -.025em;
}
.path-item h3 { font-size: 22px; margin-bottom: 8px; }
.path-item p { font-size: 17px; color: var(--body); margin: 0; }
.path-item p + p { margin-top: .85em; }
.on-ink .path-item, .on-deep .path-item { background: rgba(255, 255, 255, .06); border-color: var(--line-dark); box-shadow: none; }
.on-ink .path-n, .on-deep .path-n { color: #A8B3E0; }
.on-ink .path-item h3, .on-deep .path-item h3 { color: #fff; }
.on-ink .path-item p, .on-deep .path-item p { color: var(--on-dark-soft); }

.feature {
  background: var(--ink); border-radius: var(--r-l);
  padding: 50px; color: var(--on-dark); position: relative; overflow: hidden;
}
.feature::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 86% 18%, rgba(58, 71, 132, .4) 0, transparent 52%);
}
.feature > * { position: relative; z-index: 1; }
.feature h3 { color: #fff; font-size: clamp(24px, 2.8vw, 33px); }
.feature p { color: var(--on-dark-soft); }
.feature strong { color: #fff; }

/* Ingredient cards */
.ing-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-2);
  height: 100%;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ing-card:hover { box-shadow: var(--sh); transform: translateY(-3px); border-color: var(--indigo); }
.ing-card .ing-photo { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.ing-body { padding: 28px 30px; display: flex; flex-direction: column; flex: 1; }
.ing-num {
  font-family: var(--f-head); font-weight: 600; font-size: 28px; line-height: 1;
  color: var(--numeral); display: block; margin-bottom: 10px; letter-spacing: -.025em;
}
.ing-card h3 { font-size: 22px; margin-bottom: 4px; }
.ing-card .latin { font-size: 15px; color: var(--muted); font-style: italic; display: block; margin-bottom: 12px; }
.ing-dose {
  display: inline-block; font-weight: 700; font-size: 14px;
  color: var(--indigo-3); background: var(--indigo-wash); border-radius: var(--r-s);
  padding: 5px 15px; margin-bottom: 14px; align-self: flex-start;
}
.ing-card p { font-size: 17px; color: var(--body); flex: 1; }
.card-go { font-weight: 700; font-size: 14px; color: var(--indigo-3); text-decoration: none; margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-transform: uppercase; letter-spacing: .07em; }
.card-go:hover { color: var(--persimmon-3); }

/* Notices */
.notice {
  border-left: 5px solid var(--indigo); background: var(--paper);
  padding: 26px 30px; margin: 30px 0; border-radius: 0 var(--r) var(--r) 0;
}
.notice h3 { font-size: 20px; margin-bottom: 10px; }
.notice p { font-size: 17px; color: var(--body); }
.notice p:last-child { margin-bottom: 0; }
.notice ul { margin: 0 0 1em; padding-left: 22px; }
.notice li { font-size: 17px; color: var(--body); margin-bottom: .45em; }
.on-ink .notice, .on-deep .notice {
  background: rgba(255, 255, 255, .07); border-left-color: #A8B3E0;
}
.on-ink .notice h3, .on-deep .notice h3 { color: #fff; }
.on-ink .notice p, .on-deep .notice p,
.on-ink .notice li, .on-deep .notice li { color: var(--on-dark-soft); }

/* Safety callout — amber, pinned so it never inherits dark-context colours. */
.safety {
  background: #FBF0E6; border-left: 5px solid #99551A;
  padding: 26px 30px; margin: 30px 0; border-radius: 0 var(--r) var(--r) 0;
}
.safety h3 { font-size: 20px; margin-bottom: 10px; color: #6B3A0B; }
.safety p { font-size: 17px; color: #5E4028; }
.safety p:last-child { margin-bottom: 0; }
.safety ul { margin: 0 0 1em; padding-left: 22px; }
.safety li { font-size: 17px; color: #5E4028; margin-bottom: .45em; }
.safety strong, .on-ink .safety strong, .on-deep .safety strong { color: #55360A; }
.on-ink .safety p, .on-deep .safety p,
.on-ink .safety li, .on-deep .safety li { color: #5E4028; }
.on-ink .safety h3, .on-deep .safety h3 { color: #6B3A0B; }

/* Dose-disclosure callout */
.dosebox {
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-l); padding: 34px 36px; margin: 30px 0;
  position: relative; overflow: hidden;
}
.dosebox::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 88% 14%, rgba(58, 71, 132, .42) 0, transparent 52%);
}
.dosebox > * { position: relative; z-index: 1; }
.dosebox h3 { color: #fff; font-size: 23px; margin-bottom: 14px; }
.dosebox p { font-size: 17px; color: var(--on-dark-soft); }
.dosebox p:last-child { margin-bottom: 0; }
.dosebox strong { color: #fff; }
.cmp-rows { display: grid; gap: 2px; margin: 24px 0; }
.cmp-row {
  display: grid; grid-template-columns: 1.15fr .8fr 1.1fr; gap: 10px 20px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line-dark);
}
.cmp-row:last-child { border-bottom: 0; }
.cmp-row.hd { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #A8B3E0; }
.cmp-name { font-weight: 700; font-size: 17px; color: #fff; }
.cmp-a { font-size: 16.5px; color: #E8946B; font-weight: 700; }
.cmp-b { font-size: 16.5px; color: var(--on-dark-soft); }

/* Trust cells */
.trust-cell {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 34px;
  box-shadow: var(--sh-2); height: 100%;
  transition: border-color .2s ease, transform .2s ease;
}
.trust-cell:hover { border-color: var(--indigo); transform: translateY(-3px); }
.trust-cell .t-n {
  font-family: var(--f-head); font-weight: 600; font-size: 30px; line-height: 1;
  color: var(--numeral); display: block; margin-bottom: 14px; letter-spacing: -.025em;
}
.trust-cell h3 { font-size: 21px; margin-bottom: 10px; }
.trust-cell p { font-size: 17px; color: var(--body); }
.trust-cell.hot { background: var(--ink); border-color: transparent; color: var(--on-dark); }
.trust-cell.hot h3 { color: #fff; }
.trust-cell.hot p { color: var(--on-dark-soft); }
.trust-cell.hot strong { color: #fff; }
.trust-cell.hot .t-n { color: #A8B3E0; }

/* Badge cards — DARK cut-out badges, so always a light plate. */
.badge-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; text-align: center; height: 100%; box-shadow: var(--sh-2);
}
.badge-card img { width: 100%; max-width: 122px; margin: 0 auto 16px; }
.badge-card h3 { font-size: 19px; margin-bottom: 8px; }
.badge-card p { font-size: 16.5px; color: var(--body); margin: 0; }

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

/* ------------------------------------------------------------ Pricing */

.plan {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 38px 32px; display: flex; flex-direction: column; position: relative;
  box-shadow: var(--sh-2); 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(--indigo); }
.plan-flag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--persimmon); color: #fff;
  font-weight: 700; font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  padding: 9px 20px; border-radius: var(--r-s); white-space: nowrap;
}
.plan-flag.alt { background: var(--indigo); }
.plan-tag { font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
/* TINTED plate: the pack shots are WHITE cut-outs. */
.plan-media {
  height: 210px; display: flex; align-items: center; justify-content: center; margin: 18px 0;
  background: var(--indigo-wash-2)
    linear-gradient(156deg, var(--indigo-wash), var(--indigo-wash-2));
  border-radius: var(--r); padding: 14px;
}
.plan-media img { max-height: 182px; width: auto; object-fit: contain; }
.plan-name { font-family: var(--f-head); font-weight: 600; font-size: 27px; letter-spacing: -.018em; margin: 0 0 4px; color: var(--ink); }
.plan-supply { font-size: 17px; color: var(--muted); }
.plan-fig { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.plan-fig .amt { font-family: var(--f-head); font-weight: 600; font-size: 44px; letter-spacing: -.025em; line-height: 1; color: var(--ink); }
.plan-fig .per { font-size: 17px; color: var(--muted); }
.plan-was { font-size: 16px; color: var(--muted); margin-top: 8px; }
.plan-was s { text-decoration-thickness: 2px; }
.plan-total { font-size: 17px; color: var(--body); margin-top: 6px; }
.plan-total strong { color: var(--persimmon-3); }
.plan-list { list-style: none; padding: 20px 0 0; margin: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; flex: 1; }
.plan-list li { position: relative; padding-left: 30px; font-size: 17px; color: var(--body); }
.plan-list li::before {
  content: ""; position: absolute; left: 0; top: 13px; width: 18px; height: 3px;
  background: var(--persimmon);
}
.plan-list li.off { color: var(--muted); }
.plan-list li.off::before { background: var(--line); }
.plan .btn-sd { width: 100%; margin-top: 22px; }

.plan.lead { border: 2px solid var(--indigo); box-shadow: var(--sh); }
.plan.lead .plan-fig .amt { color: var(--indigo-3); }
.plan.lead .plan-media { background: #C6CDE6 linear-gradient(156deg, var(--indigo-wash-2), #C6CDE6); }

/* --------------------------------------------------------------- Guarantee */
/* Tinted plate: the guarantee pack shot is a WHITE cut-out. */
.promise-seal {
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo-wash-2)
    linear-gradient(156deg, var(--indigo-wash), var(--indigo-wash-2));
  border-radius: var(--r-l); padding: 30px;
}
.promise-seal img { width: 100%; max-width: 340px; object-fit: contain; }

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 30px; font-size: 17px; color: var(--body); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 13px; width: 18px; height: 3px;
  background: var(--persimmon);
}
.on-ink .ticks li, .on-deep .ticks li { color: var(--on-dark-soft); }
.on-ink .ticks li::before, .on-deep .ticks li::before { background: #E8946B; }

/* -------------------------------------------------------------- Bonus cards */

.bonus-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px; height: 100%; box-shadow: var(--sh-2); display: flex; flex-direction: column;
}
/* LIGHT plate: bonus covers are DARK cut-outs. */
.bonus-media {
  background: var(--paper-2); border-radius: var(--r); padding: 22px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  min-height: 230px;
}
.bonus-media img { max-height: 230px; width: auto; object-fit: contain; }
.bonus-k { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--indigo-3); display: block; margin-bottom: 8px; }
.bonus-card h3 { font-size: 21px; margin-bottom: 8px; }
.bonus-val { font-size: 15px; color: var(--muted); margin-bottom: 12px; }
.bonus-card p { font-size: 17px; color: var(--body); }

/* --------------------------------------------------------------------- FAQ */

.qa { display: grid; gap: 12px; }
.qa-item {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.qa-item:has(.faq-q[aria-expanded="true"]) { border-color: var(--indigo); box-shadow: var(--sh); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  padding: 24px 30px; text-align: left;
  font-family: var(--f-head); font-weight: 600; font-size: 21px;
  color: var(--ink); line-height: 1.4; transition: color .18s ease;
}
.faq-q:hover { color: var(--indigo-3); }
.faq-ico {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-s); position: relative;
  background: var(--indigo-wash); transition: background .24s ease;
}
.faq-q[aria-expanded="true"] .faq-ico { background: var(--indigo); }
.faq-ico::before, .faq-ico::after {
  content: ""; position: absolute; background: var(--indigo-3);
  transition: transform .26s ease, opacity .26s ease, background .24s ease;
}
.faq-ico::before { top: 15px; left: 9px; width: 14px; height: 2px; }
.faq-ico::after { left: 15px; top: 9px; width: 2px; height: 14px; }
.faq-q[aria-expanded="true"] .faq-ico::before,
.faq-q[aria-expanded="true"] .faq-ico::after { background: #fff; }
.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 66px 24px 30px; }
.faq-a-inner p { font-size: 17px; color: var(--body); }
.on-ink .qa-item, .on-deep .qa-item { background: rgba(255, 255, 255, .06); border-color: var(--line-dark); }
.on-ink .faq-q, .on-deep .faq-q { color: #fff; }
.on-ink .faq-q:hover, .on-deep .faq-q:hover { color: #A8B3E0; }
.on-ink .faq-ico, .on-deep .faq-ico { background: rgba(58, 71, 132, .55); }
.on-ink .faq-ico::before, .on-ink .faq-ico::after,
.on-deep .faq-ico::before, .on-deep .faq-ico::after { background: #fff; }
.on-ink .faq-a-inner p, .on-deep .faq-a-inner p { color: var(--on-dark-soft); }

/* --------------------------------------------------------------- Final CTA */

.closer { background: var(--paper); position: relative; overflow: hidden; }
.closer::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 74% 40%, rgba(43, 53, 102, .1) 0, transparent 52%),
    radial-gradient(circle at 12% 82%, rgba(192, 85, 44, .1) 0, transparent 44%);
}
.closer > * { position: relative; z-index: 1; }
.closer h2 { color: var(--ink); }
.closer p { color: var(--body); }
.closer .trust-line { font-weight: 700; font-size: 18px; color: var(--indigo-3); margin-top: 22px; }
/* Tinted plate: white bottle cut-out. */
.closer-media {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--indigo-wash-2)
    linear-gradient(156deg, var(--indigo-wash), var(--indigo-wash-2));
  border-radius: var(--r-l); padding: 34px;
}
.closer-media img { position: relative; width: 100%; max-width: 350px; object-fit: contain; }

/* --------------------------------------------- Page head / crumbs / prose */

.crumbs { padding-top: 142px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; font-size: 16px; color: var(--muted); }
.crumbs li { display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { color: var(--body); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--indigo-3); }
.crumbs [aria-current] { color: var(--ink); }

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

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

.spec { border-top: 3px solid var(--ink); margin: 34px 0; }
.spec-row { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 28px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.spec-k { font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--indigo-3); min-width: 0; overflow-wrap: anywhere; }
.spec-v { font-size: 17px; color: var(--body); min-width: 0; overflow-wrap: break-word; }

.aside { position: sticky; top: 128px; display: grid; gap: 18px; }
.aside-card { border: 1px solid var(--line); border-radius: var(--r); padding: 28px; background: #fff; box-shadow: var(--sh-2); }
.aside-card h3 { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; font-family: var(--f-body); font-weight: 700; }
.aside-links { list-style: none; margin: 0; padding: 0; display: grid; }
.aside-links a { font-size: 16.5px; color: var(--body); text-decoration: none; display: flex; align-items: center; min-height: 42px; border-bottom: 1px solid var(--line-2); overflow-wrap: anywhere; }
.aside-links li:last-child a { border-bottom: 0; }
.aside-links a:hover { color: var(--indigo-3); }
.aside-card.dark { background: var(--ink); border-color: transparent; color: var(--on-dark); }
.aside-card.dark h3 { color: #A8B3E0; }
.aside-card.dark p { font-size: 17px; color: var(--on-dark-soft); }
.aside-card.dark strong { color: #fff; }
.aside-card.dark .btn-sd { width: 100%; margin-top: 16px; }

.meta-line { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 16px; color: var(--muted); margin-bottom: 16px; }
.meta-line .m-cat { font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--indigo-3); font-size: 13px; }

.rel { border: 1px solid var(--line); border-radius: var(--r); padding: 30px; text-decoration: none; color: inherit; display: block; background: #fff; box-shadow: var(--sh-2); height: 100%; transition: border-color .2s ease, transform .2s ease; }
.rel:hover { border-color: var(--indigo); transform: translateY(-3px); color: inherit; }
.rel .rel-k { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--indigo-3); display: block; margin-bottom: 12px; }
.rel h3 { font-size: 21px; margin-bottom: 9px; }
.rel p { font-size: 17px; color: var(--body); margin: 0; }

.lead-post { background: var(--ink); border-radius: var(--r-l); padding: 46px; text-decoration: none; color: var(--on-dark); position: relative; overflow: hidden; display: block; }
.lead-post::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 80% 30%, rgba(58, 71, 132, .4) 0, transparent 52%);
}
.lead-post > * { position: relative; z-index: 1; }
.lead-post:hover { color: var(--on-dark); }
.lead-post:hover h3 { color: #A8B3E0; }
.lead-post h3 { color: #fff; font-size: clamp(24px, 2.6vw, 33px); transition: color .2s ease; }
.lead-post p { color: var(--on-dark-soft); font-size: 18px; }
/* Tinted plate inside the dark card: holds a white bottle cut-out. */
.lead-figure {
  background: var(--indigo-wash-2)
    linear-gradient(156deg, var(--indigo-wash), var(--indigo-wash-2));
  border-radius: var(--r);
  padding: 26px; display: flex; align-items: center; justify-content: center;
}
.lead-figure img { max-width: 250px; width: 100%; object-fit: contain; }

.post-list { display: grid; border-top: 3px solid var(--ink); }
.post-row { display: grid; grid-template-columns: 230px 1fr 150px; gap: 32px; padding: 30px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; align-items: start; transition: background .2s ease; }
.post-row:hover { color: inherit; background: var(--paper); }
.post-row:hover h3 { color: var(--indigo-3); }
.post-cat { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--indigo-3); }
.post-row h3 { font-size: 21px; margin-bottom: 8px; transition: color .2s ease; }
.post-row p { font-size: 17px; color: var(--body); margin: 0; }
.post-read { font-size: 16px; color: var(--muted); text-align: right; }

/* ------------------------------------------------------------------ Footer */

.site-footer strong { color: #fff; }
.site-footer .footer-legal a { color: #A8B3E0; }
.site-footer .footer-legal a:hover { color: #fff; }
.site-footer { background: var(--ink); color: var(--on-dark-soft); padding-block: 70px 40px; font-size: 17px; }
.footer-brand .brand { color: #fff; margin-bottom: 16px; }
.footer-brand .brand i { color: #A8B3E0; }
.footer-brand p { font-size: 17px; color: var(--on-dark-soft); max-width: 32em; }
.footer-col h3 { font-family: var(--f-body); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.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: #fff; }
.footer-legal { border-top: 1px solid var(--line-dark); padding-top: 28px; margin-top: 42px; }
.footer-legal p { font-size: 16px; color: var(--on-dark-soft); max-width: 80em; }
.footer-legal .fda { padding: 20px 24px; background: rgba(255, 255, 255, .06); border-radius: var(--r); margin-bottom: 20px; font-size: 17px; }
.footer-meta { display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-dark); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* -------------------------------------------------------------- Responsive */

@media (max-width: 1199.98px) {
  :root { --pad: 88px; }
  .cblock { padding-block: 60px; }
}

@media (max-width: 991.98px) {
  :root { --pad: 78px; }
  .hero { padding-top: 148px; padding-bottom: 70px; }
  .hero-stage { order: -1; margin-bottom: 8px; }
  .aside { position: static; }
  .feature { padding: 36px; }
  .cblock-media, .cpanel { min-height: 0; }
  .cblock-media { padding: 28px; }
  .cblock-media.photo { padding: 0; }
  .cpanel { padding: 34px; }
  .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: 114px 0 auto; z-index: 99;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--sh);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 18px 32px 30px; 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(--line-2); }
  .nav-list a::after { display: none; }
  .header-inner > .nav-cta { display: none; }
  .nav-main > .nav-cta { display: block; margin-top: 18px; }
  .nav-main > .nav-cta .btn-sd { width: 100%; }
  .ob-mid { display: none; }
  .ob-full { display: none; }
  .ob-short { display: inline; }
}

@media (max-width: 767.98px) {
  :root { --pad: 62px; --bar: 70px; --bar-clear: 88px; }
  body { font-size: 17px; }
  .wrap { padding-inline: 20px; }
  /* Bootstrap's g-5 gutter creates -24px row margins, which exceed the 20px
     wrap padding at this width and would push the grid past the viewport. */
  .row { --bs-gutter-x: 2rem; }
  .topbar { font-size: 12px; }
  .topbar-inner { gap: 2px 16px; }
  .hero { padding-top: 140px; padding-bottom: 54px; }
  .hero-lede { font-size: 18px; }
  .hero-offer { padding: 18px 20px; }
  .hero-stage { padding: 20px; }
  .btn-sd { white-space: normal; padding-inline: 22px; }
  .plan, .trust-cell, .rel, .aside-card, .fact, .badge-card, .bonus-card { padding: 26px; min-width: 0; }
  .ing-body { padding: 24px 22px; }
  .feature, .lead-post, .stage, .dosebox, .promise-seal { padding: 26px 22px; }
  .cblock { padding-block: 46px; }
  .cblock-media { padding: 22px; }
  .cblock-media.photo { padding: 0; }
  .cpanel { padding: 28px 24px; }
  .closer-media { padding: 24px; }
  .sec-head { margin-bottom: 34px; }
  .sec-head p { font-size: 18px; }
  .path-item { grid-template-columns: 1fr; gap: 8px; }
  .spec-row { grid-template-columns: 1fr; gap: 5px; }
  .cmp-row { grid-template-columns: 1fr; gap: 4px; }
  .cmp-row.hd { display: none; }
  .faq-q { font-size: 19px; padding: 20px 22px; gap: 14px; }
  .faq-a-inner { padding: 0 22px 22px; }
  .btn-row .btn-sd { width: 100%; }
  .plan-media { height: 176px; }
  .plan-media img { max-height: 148px; }
  .bonus-media { min-height: 190px; }
  .bonus-media img { max-height: 190px; }
  .safety, .notice { padding: 22px 24px; }
  .crumbs { padding-top: 126px; }
  .order-bar-inner { gap: 12px; padding-block: 10px; }
  .ob-brand { font-size: 16px; display: flex; flex-direction: column; line-height: 1.25; }
  .ob-brand .ob-price { font-size: 13.5px; }
  .ob-cta { font-size: 14px; padding: 12px 20px; min-height: 48px; }
}

@media (max-width: 400px) {
  .ob-cta { padding-inline: 15px; font-size: 13px; }
  .ob-brand { font-size: 15px; }
}

@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, .closer, .btn-sd, .aside, .order-bar { display: none !important; }
  body { font-size: 12pt; color: #000; padding-bottom: 0; }
  .sec, .cblock { padding-block: 18pt; }
}