/* ==========================================================================
   VigorAxe — Male Enhancement Dietary Supplement (DTC Landing)
   Design system + section styles. GRAY approach: light Ivory base,
   VigorAxe Magenta accents, Deep Navy anchors (header/science band/footer).

   Structure:
   1. Design tokens (CSS custom properties)
   2. Reset & base typography
   3. Layout primitives (container, utility)
   4. Navbar (navy)
   5. Hero (light)
   6. Claim strip (magenta)
   7. Pricing (white cards, golden buttons)
   8. Guarantee
   9. Bonus (lavender)
   10. Shipping strip
   11. Science (navy band + editorial blocks)
   12. Product intro
   13. Ingredients
   14. Benefits
   15. FAQ
   16. Label panel
   17. References
   18. Footer (navy)
   19. Responsive breakpoints
   ========================================================================== */


/* ---------- 1. DESIGN TOKENS ---------- */
/* Palette derived from the product art: matte BLACK/charcoal bottles, white
   smoke, and warm GOLD capsules + gold ebook accents. Gold is the single
   accent (realce); charcoal anchors header / bands / footer. The magenta-*
   variable NAMES are kept (repurposed to gold) so the swap propagates
   site-wide without rewriting every rule. */
:root {
  /* warm light surface stack (no blue tint) */
  --bg-page:    #F7F5F0;   /* warm ivory — dominant page background */
  --bg-white:   #FFFFFF;   /* pure white — cards, product surfaces */
  --bg-alt:     #ECE7DC;   /* warm sand — alternated sections, FAQ, ingredient bg */
  --bg-alt-2:   #F3EFE7;   /* soft sand — subtle blocks */
  --line:       #E4DDCF;   /* hairline borders on light */
  --line-soft:  #EFE9DE;

  /* charcoal — sparing dark anchors (header, bands, footer). Neutral, no blue. */
  --navy:       #17151A;
  --navy-2:     #232027;
  --navy-line:  #3a3540;

  /* GOLD accent (repurposing the magenta-* slots) — deep enough to read on light */
  --magenta:      #9A7322;   /* primary accent: icons, borders, eyebrows, links */
  --magenta-deep: #715318;   /* deeper bronze — hovers, strong text */
  --magenta-soft: rgba(154, 115, 34, 0.12);
  --magenta-line: rgba(154, 115, 34, 0.34);
  --magenta-glow: rgba(206, 162, 74, 0.30);

  /* bright gold for accents over dark surfaces + metallic fills */
  --gold-bright:  #E6C067;
  --gold-accent:  #CDA24A;
  --gold-band:    linear-gradient(100deg, #b88a2f 0%, #e7c873 46%, #b88a2f 100%);

  /* text (warm neutrals) */
  --text:        #25221E;    /* near-black warm — body copy, headlines on light */
  --text-mute:   #5E574C;
  --text-faint:  #9A9285;
  --on-dark:     #F6F2EA;    /* text over charcoal */
  --on-dark-mute:#C2BAA9;

  /* golden CTA (pricing buttons — per brief) */
  --gold-hi:   #f5d56b;
  --gold-mid:  #d4a84b;
  --gold-lo:   #a8821f;
  --gold-ink:  #4a3508;

  /* layout */
  --container:   1200px;
  --radius:      8px;
  --radius-lg:   14px;

  /* type */
  --display:     'Inter', system-ui, sans-serif;
  --headline:    'Oswald', 'Anton', sans-serif;
  --body:        'Inter', system-ui, sans-serif;
}


/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* keep anchored sections clear of the fixed navbar */
  overflow-x: hidden;
}

body {
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }


/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.accent { color: var(--magenta); }
.hl { color: var(--magenta); }


/* Shared section eyebrow / heading vocabulary ---------------------------- */
.section-eyebrow {
  font-family: var(--headline);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--magenta);
  text-align: center;
  margin-bottom: 14px;
  position: relative;
  display: inline-block;
  width: 100%;
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin: 0 14px;
  opacity: 0.45;
}

.section-heading {
  font-family: var(--headline);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  color: var(--navy);
  margin-bottom: 18px;
}

.section-sub {
  text-align: center;
  color: var(--text-mute);
  font-size: 16px;
  max-width: 720px;
  margin: 0 auto 40px;
}


/* ---------- 4. NAVBAR (glass, fixed) ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  /* glass: nearly clear at the top so the hero image reads through the bar */
  background: rgba(20, 18, 24, 0.08);
  backdrop-filter: blur(6px) saturate(135%);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background .35s ease, backdrop-filter .35s ease,
              border-color .35s ease, box-shadow .35s ease;
}
/* on scroll: gain density (more opaque, deeper blur, drop shadow) */
.navbar.scrolled {
  background: rgba(18, 16, 21, 0.88);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border-bottom-color: var(--navy-line);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 32px;
}

/* Brand wordmark — full "VigorAxe" smoke logo image */
.nav-logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.nav-logo-img {
  height: 64px;
  width: auto;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
}
.nav-links a {
  position: relative;
  font-family: var(--headline);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  text-decoration: none;
  padding-bottom: 6px;
  transition: color .2s;
}
.nav-links a:hover { color: #fff; }

.nav-links a.is-active {
  color: #fff;
}
.nav-links a.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold-bright);
  border-radius: 1px;
}

/* Primary CTA — pill button with metallic gold fill */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-mid) 52%, var(--gold-lo) 100%);
  color: var(--gold-ink);
  font-family: var(--headline);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 28px;
  border-radius: 999px;
  border: 1px solid var(--gold-hi);
  text-shadow: 0 1px 0 rgba(255, 240, 190, 0.45);
  box-shadow:
    0 8px 22px rgba(168, 130, 31, 0.45),
    inset 0 1px 0 rgba(255, 240, 190, 0.55);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.nav-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 12px 28px rgba(168, 130, 31, 0.58),
    inset 0 1px 0 rgba(255, 240, 190, 0.65);
}
.nav-cta svg { width: 16px; height: 16px; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-hamburger span {
  width: 24px; height: 2px;
  background: #fff;
  transition: all .3s;
}


/* ---------- 5. HERO (full-bleed smoke image) ---------- */
.hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  padding: 118px 0 64px; /* top clearance for the fixed glass navbar */
  overflow: hidden;
  isolation: isolate;
  /* bottom-anchored: keeps the dense smoke in frame; the darker top is what
     gets cropped, blending seamlessly into the black base color. */
  background: #08070d url('../images/hero-bg.webp') center bottom / cover no-repeat;
}

/* Legibility + cohesion overlay over the full-bleed image */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(8,7,13,0.93) 0%, rgba(8,7,13,0.66) 36%, rgba(8,7,13,0.30) 60%, rgba(8,7,13,0.72) 100%),
    radial-gradient(ellipse 60% 50% at 50% 108%, rgba(206,162,74,0.20), transparent 70%);
}

/* ----- Content over image: copy left, offer card right ----- */
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.92fr;
  gap: 48px;
  align-items: center;
}
.hero-copy { max-width: 580px; position: relative; z-index: 1; }

.hero-title {
  font-family: var(--headline);
  font-weight: 800;
  font-size: clamp(38px, 5.6vw, 70px);
  line-height: 1.0;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
}
.hero-title .accent { color: var(--gold-bright); }

.hero-subtitle {
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  color: rgba(244, 245, 252, 0.82);
  max-width: 520px;
  margin-bottom: 28px;
}

/* Trust badges row (under product image) */
.hero-badges {
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  margin-top: 20px;
}
.hero-badges li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
}
.hero-badges li:first-child { padding-left: 0; }
.hero-badges li:last-child { border-right: none; }
.hero-badges svg { width: 22px; height: 22px; color: var(--gold-bright); flex-shrink: 0; }
.hero-badges span { font-family: var(--body); font-size: 12.5px; line-height: 1.35; color: rgba(244, 245, 252, 0.7); }
.hero-badges strong { font-weight: 700; color: #fff; }

/* Offer card (right 40%) */
.hero-offer {
  background: transparent;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-accent);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.30);
}
.hero-offer-title {
  font-family: var(--headline);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 14px;
}
.hero-offer-img {
  max-width: 380px;
  width: 100%;
  margin: 0 auto 14px;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.30));
}
.hero-offer-label {
  display: block;
  background: var(--magenta-soft);
  color: var(--magenta-deep);
  font-family: var(--headline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--magenta-line);
  margin-bottom: 14px;
}
.hero-offer-bonuses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.hero-offer-bonus { position: relative; }
.hero-offer-bonus img {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(26, 26, 46, 0.14);
}
.hero-offer-bonus .free-tag {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--magenta);
  color: #fff;
  font-family: var(--headline);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 3px;
}
.hero-offer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-mid) 52%, var(--gold-lo) 100%);
  color: var(--gold-ink);
  font-family: var(--headline);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 15px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--gold-hi);
  text-shadow: 0 1px 0 rgba(255, 240, 190, 0.45);
  box-shadow: 0 12px 26px rgba(168, 130, 31, 0.40), inset 0 1px 0 rgba(255, 240, 190, 0.55);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.hero-offer-cta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 32px rgba(168, 130, 31, 0.52), inset 0 1px 0 rgba(255, 240, 190, 0.65); }
.hero-offer-cta svg { width: 16px; height: 16px; }
.hero-offer-trust {
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 12px;
  letter-spacing: 0.3px;
  text-align: center;
  text-wrap: balance;
}

/* generic hero CTA (kept for compatibility) */
.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: 12px;
  font-family: var(--headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-mid) 52%, var(--gold-lo) 100%);
  color: var(--gold-ink);
  border: 1px solid var(--gold-hi);
  text-shadow: 0 1px 0 rgba(255, 240, 190, 0.45);
  box-shadow: 0 12px 28px rgba(168, 130, 31, 0.40), inset 0 1px 0 rgba(255, 240, 190, 0.55);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.hero-cta-primary:hover { transform: translateY(-2px); filter: brightness(1.05); }
.hero-cta-primary svg { width: 16px; height: 16px; }


/* ---------- 6. CLAIM STRIP (metallic gold band) ---------- */
.claim-strip {
  background: var(--gold-band);
  padding: 34px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 244, 214, 0.5);
  border-bottom: 1px solid rgba(90, 62, 8, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.45);
}
.claim-strip h2 {
  font-family: var(--headline);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #2b1f06;
  text-shadow: 0 1px 0 rgba(255, 240, 190, 0.4);
  margin-bottom: 4px;
}
.claim-strip p {
  font-size: 15px;
  color: #4a3508;
  opacity: 0.95;
  font-style: italic;
}


/* ---------- 7. PRICING ---------- */
.packages-section {
  padding: 60px 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, var(--magenta-soft), transparent 60%),
    var(--bg-page);
}

.packages-grid {
  display: grid;
  grid-template-columns: 1fr 1.24fr 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 88px;
}

.pkg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all .25s;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(26, 26, 46, 0.06);
}
.pkg-card:hover {
  transform: translateY(-4px);
  border-color: var(--magenta-line);
  box-shadow: 0 22px 44px rgba(26, 26, 46, 0.12);
}

.pkg-card.featured {
  overflow: visible;
  border: 1.5px solid var(--gold-accent);
  transform: scale(1.06);
  z-index: 2;
  animation: featured-glow 2.8s ease-in-out infinite;
}
@keyframes featured-glow {
  0%, 100% { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16), 0 0 0 rgba(206, 162, 74, 0); }
  28%      { box-shadow: 0 26px 54px rgba(0, 0, 0, 0.18), 0 0 34px rgba(206, 162, 74, 0.50); }
  60%      { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16), 0 0 0 rgba(206, 162, 74, 0); }
}
.pkg-card.featured:hover {
  transform: scale(1.06) translateY(-4px);
}
/* round the head top corners since featured overflows for the floating tag */
.pkg-card.featured .pkg-head {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding-top: 22px;
}

/* "BEST VALUE" — floating metallic-gold tag that bobs + glows in sync with the CTA */
.pkg-ribbon {
  position: absolute;
  top: -30px;
  left: 50%;
  z-index: 5;
  background: var(--gold-band);
  color: #2b1f06;
  font-family: var(--headline);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 22px;
  border-radius: 999px;
  border: 1px solid #f3d985;
  text-shadow: 0 1px 0 rgba(255, 244, 214, 0.5);
  white-space: nowrap;
  transform-origin: 50% 50%;
  /* seesaw rock — same 2.8s cycle as the buy-now shine, rocking only while
     the highlight sweeps across the buttons (0–60%), resting after. */
  animation: tag-seesaw 2.8s ease-in-out infinite;
}
@keyframes tag-seesaw {
  0% {
    transform: translateX(-50%) rotate(0deg);
    box-shadow: 0 6px 16px rgba(168, 130, 31, 0.40), 0 0 0 rgba(230, 192, 103, 0);
  }
  18% {
    transform: translateX(-50%) rotate(-2.5deg);
    box-shadow: 0 11px 22px rgba(168, 130, 31, 0.48), 0 0 20px rgba(230, 192, 103, 0.55);
  }
  38% {
    transform: translateX(-50%) rotate(2.5deg);
    box-shadow: 0 11px 22px rgba(168, 130, 31, 0.48), 0 0 20px rgba(230, 192, 103, 0.55);
  }
  52% {
    transform: translateX(-50%) rotate(-1.5deg);
    box-shadow: 0 9px 19px rgba(168, 130, 31, 0.44), 0 0 14px rgba(230, 192, 103, 0.40);
  }
  64%, 100% {
    transform: translateX(-50%) rotate(0deg);
    box-shadow: 0 6px 16px rgba(168, 130, 31, 0.40), 0 0 0 rgba(230, 192, 103, 0);
  }
}

.pkg-head {
  background: var(--navy);
  border-bottom: 1px solid var(--navy-line);
  padding: 14px;
  text-align: center;
}
.pkg-head h4 {
  font-family: var(--headline);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}

.pkg-body {
  padding: 20px 18px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.pkg-qty {
  font-family: var(--headline);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}
.pkg-supply {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mute);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}
.pkg-supply::before,
.pkg-supply::after {
  content: '◆';
  margin: 0 8px;
  color: var(--magenta);
  font-size: 8px;
  vertical-align: middle;
}

.pkg-img-wrap,
.pkg-img-wrap6 {
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.pkg-img-wrap img {
  max-width: 108%;
  max-height: 215px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.24));
}
.pkg-img-wrap6 img {
  max-width: 134%;
  max-height: 285px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.26));
}

/* The multi-bottle artworks pack the bottles smaller, so grow the 3-bottle
   (3rd card) and 6-bottle (featured) images WITHOUT touching the single
   bottle on the 1st card (which already reads large). */
.pkg-card:nth-child(3) .pkg-img-wrap { min-height: 238px; }
.pkg-card:nth-child(3) .pkg-img-wrap img { max-height: 290px; max-width: 126%; }
.pkg-bonus-tag {
  position: absolute;
  bottom: 10px;
  right: 0;
  background: var(--magenta);
  color: #fff;
  font-family: var(--headline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 9px;
  border-radius: 3px;
  transform: rotate(-4deg);
  box-shadow: 0 4px 12px rgba(168, 130, 31, 0.35);
}

.pkg-price {
  font-family: var(--headline);
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--navy);
  margin-bottom: 2px;
}
.pkg-price-per {
  font-family: var(--headline);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 12px;
}

.pkg-feats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  margin-bottom: 12px;
}
.pkg-feats li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  padding: 3px 0;
  justify-content: center;
  text-align: center;
}
.pkg-feats li svg { width: 16px; height: 16px; flex-shrink: 0; }
.pkg-feats li.yes { color: var(--text); }
.pkg-feats li.yes svg {
  fill: var(--magenta);
  stroke: var(--magenta);
  stroke-width: 1.1;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.pkg-feats li.no { color: var(--text-faint); text-decoration: line-through; }
.pkg-feats li.no svg { fill: var(--text-faint); }

.pkg-save {
  display: inline-block;
  background: var(--magenta-soft);
  color: var(--magenta-deep);
  font-family: var(--headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--magenta-line);
  margin: 0 auto 8px;
}

.pkg-total {
  margin-bottom: 12px;
  font-family: var(--headline);
}
.pkg-total .was {
  color: var(--text-faint);
  text-decoration: line-through;
  font-size: 15px;
  margin-right: 8px;
}
.pkg-total .now {
  color: var(--navy);
  font-size: 22px;
  font-weight: 700;
}
.pkg-total .ship {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mute);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Golden CTA button (per brief — golden button on every offer) */
.pkg-btn {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--gold-mid);
  background-image:
    linear-gradient(100deg,
      rgba(255,255,255,0) 35%,
      rgba(255,255,255,0.55) 50%,
      rgba(255,255,255,0) 65%),
    linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-mid) 50%, var(--gold-lo) 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 200% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  color: var(--gold-ink);
  font-family: var(--headline);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--gold-hi);
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 235, 180, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 190, 0.6),
    inset 0 -2px 0 rgba(120, 80, 0, 0.2),
    0 6px 16px rgba(168, 130, 31, 0.3);
  margin-bottom: 8px;
  transition: transform .2s, box-shadow .2s;
  animation: pkg-btn-shine 2.8s ease-in-out infinite;
}
@keyframes pkg-btn-shine {
  0%       { background-position: 200% 0, 0 0; }
  60%, 100%{ background-position: -120% 0, 0 0; }
}
.pkg-btn svg { width: 16px; height: 16px; }
.pkg-card:hover .pkg-btn {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 190, 0.7),
    inset 0 -2px 0 rgba(120, 80, 0, 0.2),
    0 8px 18px rgba(168, 130, 31, 0.4);
}

.pkg-card.featured .pkg-btn {
  font-size: 18px;
  padding: 16px 16px;
  border-color: #ffe28a;
  animation: pkg-btn-shine 2.8s ease-in-out infinite,
             featured-btn-glow 2.8s ease-in-out infinite;
}
@keyframes featured-btn-glow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 240, 190, 0.6),
      inset 0 -2px 0 rgba(120, 80, 0, 0.2),
      0 6px 16px rgba(168, 130, 31, 0.30),
      0 0 0 rgba(230, 192, 103, 0);
  }
  28% {
    box-shadow:
      inset 0 1px 0 rgba(255, 240, 190, 0.7),
      inset 0 -2px 0 rgba(120, 80, 0, 0.2),
      0 10px 22px rgba(168, 130, 31, 0.45),
      0 0 26px rgba(230, 192, 103, 0.62);
  }
  60% {
    box-shadow:
      inset 0 1px 0 rgba(255, 240, 190, 0.6),
      inset 0 -2px 0 rgba(120, 80, 0, 0.2),
      0 6px 16px rgba(168, 130, 31, 0.30),
      0 0 0 rgba(230, 192, 103, 0);
  }
}

/* ----- featured (6 bottles): slightly bigger numbers ----- */
.pkg-card.featured .pkg-qty { font-size: 40px; }
.pkg-card.featured .pkg-supply { font-size: 14px; margin-bottom: 12px; }
.pkg-card.featured .pkg-img-wrap6 { min-height: 270px; margin-bottom: 14px; }
.pkg-card.featured .pkg-img-wrap6 img { max-height: 320px; max-width: 140%; }
.pkg-card.featured .pkg-price { font-size: 68px; }
.pkg-card.featured .pkg-price-per { font-size: 12px; margin-bottom: 14px; }
.pkg-card.featured .pkg-feats { padding: 12px 0; margin-bottom: 14px; }
.pkg-card.featured .pkg-feats li { font-size: 14.5px; }
.pkg-card.featured .pkg-save { font-size: 14px; padding: 7px 16px; margin-bottom: 10px; }
.pkg-card.featured .pkg-total { margin-bottom: 14px; }
.pkg-card.featured .pkg-total .now { font-size: 26px; }
.pkg-card.featured .pkg-total .was { font-size: 16px; }

.pkg-hand {
  position: absolute;
  right: 6px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 60px;
  height: 70px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
  animation: pkg-hand-tap 1.4s ease-in-out infinite;
  pointer-events: none;
}
.pkg-hand img,
.pkg-hand svg { width: 100%; height: 100%; display: block; object-fit: contain; }
@keyframes pkg-hand-tap {
  0%, 100% { transform: rotate(-15deg) translate(0, 0); }
  50%      { transform: rotate(-15deg) translate(-3px, -3px) scale(0.94); }
}

.pkg-pay {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
}
.pkg-pay img {
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
  opacity: 0.95;
}


/* ---------- 8. GUARANTEE ---------- */
.guarantee-section {
  padding: 80px 0;
  background: var(--bg-white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.guarantee-inner { text-align: center; }

.guarantee-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: center;
  max-width: 900px;
  margin: 30px auto;
  text-align: left;
}
.guarantee-seal {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  filter: drop-shadow(0 10px 26px rgba(168, 130, 31, 0.18));
}
.guarantee-seal img { display: block; width: 100%; height: 100%; object-fit: contain; }
.guarantee-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}

.trust-strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin: 30px auto 16px;
  max-width: 1140px;
}
.trust-strip li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.trust-strip img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.guarantee-made {
  font-size: 13px;
  color: var(--text-faint);
  font-style: italic;
}


/* ---------- 9. BONUS (lavender) ---------- */
.bonus-section {
  padding: 90px 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(168, 130, 31, 0.06), transparent 60%),
    var(--bg-alt);
}

.bonus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 30px;
}

.bonus-card {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  transition: all .25s;
  position: relative;
  box-shadow: 0 10px 30px rgba(26, 26, 46, 0.06);
}
.bonus-card:hover { transform: translateY(-4px); border-color: var(--magenta-line); box-shadow: 0 20px 40px rgba(26, 26, 46, 0.1); }

.bonus-card-img {
  position: relative;
  margin-bottom: 22px;
  display: flex;
  justify-content: center;
}
.bonus-card-img img {
  max-width: 220px;
  width: 75%;
  box-shadow: 0 18px 36px rgba(26, 26, 46, 0.22);
  border-radius: 4px;
}
.free-badge {
  position: absolute;
  top: -8px;
  right: 50%;
  transform: translateX(140%) rotate(8deg);
  background: var(--magenta);
  color: #fff;
  font-family: var(--headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 12px;
  border-radius: 3px;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(168, 130, 31, 0.5);
}

.bonus-num {
  font-family: var(--headline);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 10px;
}
.bonus-name {
  font-family: var(--headline);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.5px;
  color: var(--navy);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.bonus-name .price {
  display: block;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--magenta);
  margin-top: 8px;
  text-transform: none;
}
.bonus-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mute);
  margin-bottom: 18px;
}
.bonus-dl {
  font-family: var(--headline);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--magenta);
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}


/* ---------- 10. SHIPPING STRIP ---------- */
.shipping-strip {
  position: relative;
  z-index: 1;
  background: var(--gold-band);
  padding: 30px 24px;
  text-align: center;
  border-top: 1px solid rgba(255, 244, 214, 0.5);
  border-bottom: 2px solid rgba(70, 48, 6, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.45);
}
.shipping-title {
  font-family: var(--headline);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #2b1f06;
  text-shadow: 0 1px 0 rgba(255, 240, 190, 0.4);
  margin-bottom: 6px;
}
.shipping-title::before {
  content: '★';
  color: #2b1f06;
  margin-right: 8px;
}
.shipping-sub {
  font-size: 14px;
  color: #4a3508;
}
.shipping-sub em { color: #2b1f06; font-style: italic; font-weight: 700; }


/* ---------- 11. SCIENCE (navy band + editorial blocks) ---------- */
.science-band {
  background: var(--navy);
  padding: 70px 0 50px;
  text-align: center;
  border-bottom: 1px solid var(--navy-line);
}
.science-band .date-label {
  font-family: var(--headline);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 20px;
}
.science-band h2 {
  font-family: var(--headline);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 14px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.science-band h2 .accent { color: var(--gold-bright); }
.science-band .subtitle {
  font-style: italic;
  color: var(--on-dark-mute);
  font-size: 16px;
  max-width: 700px;
  margin: 0 auto;
}

.science-section {
  background: var(--bg-page);
  padding: 60px 0;
}

.science-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 50px;
}
.science-block.media-left .science-media { order: -1; }

.science-copy p { margin-bottom: 14px; color: var(--text); }
.science-copy p:last-child { margin-bottom: 0; }
.science-copy h3 {
  font-family: var(--headline);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.2;
}
.science-copy b { color: var(--magenta); font-weight: 700; }

.science-highlight {
  background: var(--bg-alt);
  border-left: 3px solid var(--magenta);
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin-top: 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.science-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 44px rgba(26, 26, 46, 0.18);
}

.quote-callout {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-top: 3px solid var(--magenta);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 26px 30px;
  margin: 30px auto;
  max-width: 900px;
}
.quote-callout .q {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
}
.quote-callout .q::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -10px;
  font-family: var(--display);
  font-size: 56px;
  font-weight: 900;
  color: var(--magenta);
  line-height: 1;
  opacity: 0.7;
}
.quote-callout .ref {
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.6;
}
.quote-callout .ref a { color: var(--magenta); text-decoration: underline; }


/* ---------- 12. PRODUCT INTRO — dark smoke statement panel ---------- */
.product-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 94px 0;
  background: #0e0c12 url('../images/hero-bg.webp') center / cover no-repeat;
}
.product-smoke {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 64% 72% at 24% 52%, rgba(206, 162, 74, 0.20), transparent 62%),
    linear-gradient(180deg, rgba(14, 12, 18, 0.88) 0%, rgba(14, 12, 18, 0.60) 42%, rgba(14, 12, 18, 0.92) 100%);
}
.product-section .container { position: relative; z-index: 1; }

.product-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 54px;
  align-items: center;
}

/* visual — bottle floats on a gold halo */
.product-visual { position: relative; display: flex; justify-content: center; }
.product-halo {
  position: absolute;
  width: 80%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(206, 162, 74, 0.36) 0%, rgba(206, 162, 74, 0.10) 38%, transparent 66%);
  filter: blur(16px);
  z-index: 0;
}
.product-shot {
  position: relative;
  z-index: 1;
  max-width: 540px;
  width: 100%;
  filter: drop-shadow(0 34px 54px rgba(0, 0, 0, 0.62));
  animation: product-float 6.5s ease-in-out infinite;
}
@keyframes product-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(-0.6deg); }
}

/* content */
.product-content { max-width: 540px; }
.product-kicker {
  font-family: var(--headline);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 4px;
}
.product-word {
  font-family: var(--display);
  font-size: clamp(58px, 7.6vw, 96px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.9;
  text-transform: uppercase;
  color: #F6F2EA;
  text-shadow:
    0 1px 0 rgba(230, 192, 103, 0.45),
    0 0 34px rgba(206, 162, 74, 0.28),
    0 6px 40px rgba(0, 0, 0, 0.5);
}
.product-rule {
  display: block;
  width: 132px;
  height: 2px;
  margin: 18px 0 20px;
  background: linear-gradient(90deg, var(--gold-accent), rgba(206, 162, 74, 0));
  position: relative;
}
.product-rule::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-1px, -50%) rotate(45deg);
  background: var(--gold-bright);
}
.product-lead {
  font-size: 18px;
  line-height: 1.55;
  color: #F1ECE2;
  font-weight: 500;
  margin-bottom: 16px;
  max-width: 32em;
}
.product-body {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(242, 238, 230, 0.74);
  margin-bottom: 22px;
  max-width: 34em;
}
.product-body b { color: var(--gold-bright); font-weight: 700; }

/* ingredient chips replace the wall of text */
.product-ingredients { margin-bottom: 22px; }
.ing-label {
  display: block;
  font-family: var(--headline);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 12px;
}
.ing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ing-chips li {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #F1ECE2;
  padding: 7px 14px;
  border: 1px solid rgba(206, 162, 74, 0.45);
  border-radius: 999px;
  background: rgba(206, 162, 74, 0.08);
  transition: border-color .2s, background .2s, transform .2s;
}
.ing-chips li:hover {
  border-color: var(--gold-bright);
  background: rgba(206, 162, 74, 0.16);
  transform: translateY(-1px);
}
.product-foot {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(242, 238, 230, 0.6);
  max-width: 36em;
}

@media (prefers-reduced-motion: reduce) {
  .product-shot { animation: none; }
}


/* ---------- 13. INGREDIENTS ---------- */
.ingredients-section {
  padding: 80px 0;
  background: var(--bg-alt);
}

.ingredients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.ingredient-card {
  background: var(--bg-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all .25s;
  box-shadow: 0 8px 22px rgba(26, 26, 46, 0.05);
}
.ingredient-card:hover {
  transform: translateY(-3px);
  border-color: var(--magenta-line);
  box-shadow: 0 16px 32px rgba(26, 26, 46, 0.12);
}

.ingredient-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}
.ingredient-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(26, 26, 46, 0.28) 100%);
}
.ingredient-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ingredient-name {
  font-family: var(--headline);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--navy);
  padding: 16px 16px 4px;
  line-height: 1.2;
}
.ingredient-sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mute);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2px;
}
.ingredient-role {
  font-family: var(--body);
  font-size: 13px;
  font-style: italic;
  color: var(--magenta);
  padding: 0 16px 10px;
}
.ingredient-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-mute);
  padding: 0 16px 20px;
}


/* ---------- 14. BENEFITS ---------- */
.benefits-section {
  padding: 84px 0;
  background:
    radial-gradient(ellipse 72% 58% at 50% 0%, var(--magenta-soft), transparent 64%),
    var(--bg-page);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 30px;
}

.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 14px 24px;
  background: var(--bg-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 8px 22px rgba(26, 26, 46, 0.05);
}
.benefit-item:hover {
  border-color: var(--magenta-line);
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(26, 26, 46, 0.12);
}
.benefit-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  flex: 0 0 auto;
  color: var(--magenta);
  background: radial-gradient(circle at 50% 36%, #fbf6ea, var(--bg-alt));
  border-radius: 50%;
  border: 1px solid var(--magenta-line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.benefit-item:hover .benefit-icon {
  border-color: var(--gold-accent);
  box-shadow: 0 0 0 4px var(--magenta-soft);
}
.benefit-icon svg { width: 30px; height: 30px; }
.benefit-label {
  font-family: var(--headline);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--navy);
  min-height: calc(1.35em * 3);
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ---------- 15. FAQ ---------- */
.faq-section {
  padding: 80px 0;
  background: var(--bg-alt);
}
.faq-inner {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 60px;
  align-items: center;
}

.faq-aside {
  text-align: center;
  position: sticky;
  top: 100px;
}
.faq-aside-jar {
  position: relative;
  margin-bottom: 8px;
}
.faq-aside-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse, var(--magenta-glow), transparent 60%);
  filter: blur(40px);
  z-index: 0;
}
.faq-aside-jar img {
  position: relative;
  z-index: 1;
  max-width: 340px;
  width: 100%;
  margin: 0 auto;
  filter: drop-shadow(0 24px 36px rgba(26, 26, 46, 0.24));
}

.faq-aside-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-mid) 52%, var(--gold-lo) 100%);
  color: var(--gold-ink);
  font-family: var(--headline);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--gold-hi);
  text-shadow: 0 1px 0 rgba(255, 240, 190, 0.45);
  box-shadow: 0 8px 22px rgba(168, 130, 31, 0.40), inset 0 1px 0 rgba(255, 240, 190, 0.55);
  transition: all .2s;
  margin-right: 34px; /* nudge under the bottle (left of the cap) */
}
.faq-aside-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.faq-aside-cta svg { width: 16px; height: 16px; }

.faq-content .section-eyebrow { text-align: left; }
.faq-content .section-eyebrow::before,
.faq-content .section-eyebrow::after { display: none; }
.faq-content .section-heading { text-align: left; margin-bottom: 28px; }

.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq-item {
  background: var(--bg-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(26, 26, 46, 0.04);
}
.faq-item[open] { border-color: var(--magenta-line); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  gap: 16px;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q h3 {
  font-family: var(--headline);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}
.faq-item[open] .faq-q h3 { color: var(--magenta); }

.faq-arrow {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--text-mute);
  border-bottom: 2px solid var(--text-mute);
  transform: rotate(45deg);
  transition: transform .25s;
  margin-bottom: 4px;
}
.faq-item[open] .faq-arrow {
  transform: rotate(-135deg);
  border-color: var(--magenta);
  margin-bottom: 0;
  margin-top: 4px;
}

.faq-a {
  padding: 0 22px 22px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-mute);
}


/* ---------- 16. LABEL (flat artwork) ---------- */
.label-section {
  padding: 70px 0;
  background: var(--bg-white);
  border-top: 1px solid var(--line);
}
.label-section .section-heading { margin-bottom: 30px; }

.product-label-figure {
  margin: 30px auto 0;
  max-width: 1100px;
  background: var(--navy);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 24px 50px rgba(26, 26, 46, 0.18);
}
.product-label-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-lg) - 6px);
}


/* ---------- 17. REFERENCES ---------- */
.references-section {
  background: var(--bg-page);
  padding: 60px 0;
  border-top: 1px solid var(--line);
}
.references-label {
  font-family: var(--headline);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--magenta);
  text-align: center;
  margin-bottom: 20px;
}
.references-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 36px;
  margin-bottom: 14px;
}
.references-logos img { max-height: 34px; width: auto; opacity: 0.6; filter: grayscale(1); }

.references-disclaimer {
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
  margin-bottom: 30px;
}
.references-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.references-cols p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-mute);
  margin-bottom: 12px;
}
.references-cols b { color: var(--text); }


/* ---------- 18. FOOTER (navy) ---------- */
.bg-footer {
  background: var(--navy);
  border-top: 3px solid var(--magenta);
  padding: 40px 0 50px;
  text-align: center;
}
.bg-footer-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}
.bg-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 22px;
}
.bg-footer-links a {
  font-family: var(--headline);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  transition: color .2s;
}
.bg-footer-links a:hover { color: var(--gold-bright); }
.bg-footer-disclaimer {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--on-dark-mute);
  opacity: 0.8;
  max-width: 720px;
  margin: 0 auto 20px;
}
#disclaimer {
  display: block;
  font-size: 11px;
  color: var(--on-dark-mute);
  line-height: 1.6;
  margin-top: 10px;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
.bg-footer #disclaimer, .bg-footer #disclaimer * { color: var(--on-dark-mute) !important; }

/* BuyGoods injects this disclaimer at runtime with fixed pixel widths.
   Force everything to fit the viewport and blend into the dark footer. */
#disclaimer * {
  max-width: 100% !important;
  width: auto !important;
  box-sizing: border-box !important;
  float: none !important;
  background: transparent !important;
  overflow-wrap: break-word;
  word-break: break-word;
}
#disclaimer img {
  max-width: 150px !important;
  height: auto !important;
  display: block;
  margin: 0 auto !important;
}
/* injected layout is a flex row [logo | text] with a fixed 200px logo basis;
   allow it to wrap so the row can never exceed the viewport width */
#disclaimer > div > div { flex-wrap: wrap !important; row-gap: 12px; }


/* ==========================================================================
   19. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1080px) {
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 28px; max-width: 480px; margin: 0 auto; text-align: center; }
  .hero-copy { max-width: 100%; }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-badges {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-badges li {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 0 10px;
  }
  .hero-badges li:first-child { padding-left: 10px; }
  .hero-badges svg { width: 26px; height: 26px; }

  /* PRICING — stacked on tablet/mobile, order 6 → 3 → 1 (best deal first). */
  .packages-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    gap: 24px;
  }
  .pkg-card:nth-child(1) { order: 3; }
  .pkg-card.featured     { order: 1; transform: none; }
  .pkg-card:nth-child(3) { order: 2; }
  .pkg-card.featured:hover { transform: translateY(-4px); }

  .ingredients-grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-grid { grid-template-columns: repeat(3, 1fr); }
  .bonus-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .science-block,
  .science-block.media-left { grid-template-columns: 1fr; gap: 28px; }
  .science-block.media-left .science-media { order: 0; }
  /* mobile order: kicker + VIGORAXE title, THEN the image, THEN the rest of the copy */
  .product-grid { display: flex; flex-direction: column; gap: 0; max-width: 540px; margin: 0 auto; text-align: center; }
  .product-content { display: contents; }
  .product-kicker { order: 1; }
  .product-word { order: 2; }
  .product-rule { order: 3; }
  .product-visual { order: 4; margin: 14px auto 18px; max-width: 340px; }
  .product-lead { order: 5; }
  .product-body { order: 6; }
  .product-ingredients { order: 7; }
  .product-foot { order: 8; }
  .product-rule,
  .product-lead, .product-body, .product-foot { margin-left: auto; margin-right: auto; }
  .ing-chips { justify-content: center; }

  .faq-inner { grid-template-columns: 1fr; gap: 30px; }
  .faq-content { order: 1; } /* questions first */
  .faq-aside { position: static; order: 2; max-width: 340px; margin: 0 auto; } /* image + button after */
  .faq-aside-jar img { max-width: 250px; }
  .faq-aside-cta { margin-right: 24px; }

  .references-cols { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-inner { height: 64px; }
  .nav-logo-img { height: 52px; }
  .nav-cta { display: none; }
  .nav-links {
    position: fixed;
    top: 64px;
    right: 0;
    flex-direction: column;
    background: var(--navy);
    border: 1px solid var(--navy-line);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    padding: 24px 30px;
    gap: 16px;
    transform: translateX(100%);
    transition: transform .3s;
    box-shadow: -10px 10px 40px rgba(0, 0, 0, 0.35);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-hamburger { display: flex; }
  .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .guarantee-body { grid-template-columns: 1fr; text-align: center; }
  .guarantee-seal { margin: 0 auto; }
  .guarantee-text { text-align: left; }

  .ingredients-grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }

  .hero { padding: 92px 0 50px; } /* clear the fixed 64px navbar */
  .hero-visual-img { max-width: 320px; }
  .hero-title-brand,
  .hero-title-line { font-size: clamp(34px, 11vw, 54px); }
  .hero-subtitle { font-size: 15px; margin-bottom: 28px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta-primary,
  .hero-cta-secondary { width: 100%; padding: 16px 20px; }
  .hero-badges { max-width: 360px; }
  .hero-badges li { padding: 0 8px; }
  .hero-badges li:first-child { padding-left: 8px; }
  .hero-badges svg { width: 24px; height: 24px; }
  .hero-badges span { font-size: 11px; }

  /* trust badges: 2-col showcase of seal cards (seal on top, label below) */
  .trust-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 360px;
    margin: 26px auto 16px;
  }
  .trust-strip li {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    width: auto;
    padding: 18px 10px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 16px;
    font-size: 11.5px;
    line-height: 1.3;
    box-shadow: 0 4px 14px rgba(26, 26, 46, 0.05);
  }
  .trust-strip li:last-child { grid-column: 1 / -1; } /* 5th centered, full width */
  .trust-strip img { width: 48px; height: 48px; }

  /* BuyGoods disclaimer: stack logo over text, kill gappy justify on mobile */
  #disclaimer > div { text-align: center !important; }
  #disclaimer > div > div { flex-direction: column !important; align-items: center !important; }
  #disclaimer > div > div > div {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 0 !important;
  }
}

@media (max-width: 460px) {
  .ingredients-grid { grid-template-columns: 1fr; max-width: 300px; margin-left: auto; margin-right: auto; }
  .benefits-grid { grid-template-columns: 1fr; max-width: 280px; margin-left: auto; margin-right: auto; }
  .pkg-body { padding: 22px 18px 22px; }
}


/* ---------- Accessibility & motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 2px;
}