/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* Brand greens (deep sage) */
  --color-cypress: #14342B;
  --color-cypress-dark: #0E2A22;
  --color-moss: #4B6B57;
  --color-sage: #8FAF9A;

  /* Neutrals */
  --color-warm-cream: #FAF9F6;
  --color-stone: #E7E3DC;
  --color-surface: #FFFFFF;

  /* Accents */
  --color-citron: #DDE6C7;
  --color-gold: #C8A96E;
  --color-gold-soft: #E0CDA0;

  /* Text roles */
  --color-text-primary: #14342B;
  --color-text-secondary: #4B6B57;
  --color-text-muted: rgba(20, 52, 43, 0.55);
  --color-text-placeholder: rgba(20, 52, 43, 0.45);
  --color-text-on-dark: #FAF9F6;
  --color-text-on-dark-muted: rgba(250, 249, 246, 0.7);

  /* Borders & dividers */
  --color-border: rgba(20, 52, 43, 0.14);
  --color-border-soft: rgba(20, 52, 43, 0.08);
  --color-border-strong: rgba(20, 52, 43, 0.24);

  /* Surfaces (alpha forms used in components) */
  --tint-cypress-06: rgba(20, 52, 43, 0.06);
  --tint-cypress-10: rgba(20, 52, 43, 0.10);
  --tint-sage-22: rgba(143, 175, 154, 0.22);
  --tint-citron-42: rgba(221, 230, 199, 0.42);
  --tint-gold-22: rgba(200, 169, 110, 0.22);
  --tint-gold-12: rgba(200, 169, 110, 0.12);

  /* Type */
  --font-display: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  --font-body: 'Outfit', 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;

  /* Radii */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 18px 50px rgba(20, 53, 36, 0.08);
  --shadow-card: 0 8px 32px rgba(20, 53, 36, 0.06);

  /* Status */
  --color-error: #B91C1C;

  /* Brand wordmark (PNG embedded as data URI to keep single-file) */
  --logo-cypress: url("cypress-logo.png");

  /* Gradients */
  --gradient-soft-green: linear-gradient(135deg, var(--tint-sage-22), var(--tint-citron-42));
  --gradient-dark-green: linear-gradient(135deg, #143524 0%, #2F5140 100%);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* When users click an anchor link (e.g. "How Vitality care works"
     in the nav drawer), the browser would otherwise put the target's
     top edge under the fixed header. scroll-padding-top reserves space
     equal to the nav height so the section title lands just below the
     header. Adjust per breakpoint to match nav heights. */
  scroll-padding-top: calc(120px + var(--banner-height, 0px));
}
@media (max-width: 900px) { html { scroll-padding-top: calc(96px + var(--banner-height, 0px)); } }
@media (max-width: 600px) { html { scroll-padding-top: calc(88px + var(--banner-height, 0px)); } }

/* Lock horizontal scrolling. The mobile drawer is position:fixed,
   parked offscreen via transform: translateX(100%); some mobile browsers
   include that translated rect in the document's scrollable width, which
   lets the user "swipe right" and reveal the drawer. overflow-x: hidden
   on the root + body prevents any horizontal scroll site-wide. */
html, body { overflow-x: hidden; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text-primary);
  background: var(--color-warm-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--color-citron); color: var(--color-cypress); }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { max-width: 1200px; margin: 0 auto; }

section { padding: 75px 32px; }

.section-alt { background: var(--color-surface); }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.section-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-moss);
  margin-bottom: 18px;
}

.section-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.008em;
  margin-bottom: 16px;
  color: var(--color-cypress);
}

.section-sub {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 560px;
}

/* ============================================================
   NAV
   ============================================================ */
nav {
  position: fixed;
  top: var(--banner-height, 0px); left: 0; right: 0;
  z-index: 100;
  padding: 14px 0;
  background: var(--color-warm-cream);
  border-bottom: 1px solid var(--color-border-soft);
}

/* ============================================================
   SECTION SCRUBBER — mobile-only right-edge quick navigator.
   Appears when the user touches a hot-zone on the right edge,
   lets them drag up/down to jump to a major section, then
   fades out on touchend. Built dynamically by enhancements.js.
   ============================================================ */
.section-scrubber-hotzone {
  position: fixed;
  top: 30%;
  bottom: 18%;
  right: 0;
  width: 44px;
  z-index: 94;
  display: none;
}
.section-scrubber {
  position: fixed;
  right: 0;
  left: auto;
  top: 50%;
  width: auto;
  transform: translateY(-50%);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 10px;
  background: rgba(20, 53, 36, 0.94);
  border-radius: 22px 0 0 22px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s;
  pointer-events: none;
  box-shadow: -6px 8px 24px rgba(20, 53, 36, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.section-scrubber.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.section-scrubber-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(246, 244, 238, 0.50);
  transition: background 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}
.section-scrubber-dot.is-current {
  background: var(--color-citron);
  transform: scale(1.5);
}
.section-scrubber-label {
  position: fixed;
  left: auto;
  z-index: 96;
  background: var(--color-cypress);
  color: var(--color-warm-cream);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 999px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s;
  transform: translateY(-50%);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(20, 53, 36, 0.2);
}
.section-scrubber-label.is-active {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 900px) {
  .section-scrubber-hotzone { display: block; }
}
@media (min-width: 901px) {
  .section-scrubber, .section-scrubber-label, .section-scrubber-hotzone {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-scrubber { transition: opacity 0.1s, visibility 0.1s; transform: translateY(-50%); }
}

/* ============================================================
   IMAGE REEL — horizontal scrolling photo strip used between the
   "How it works" section and the FAQ on the homepage. Same
   seamless-loop pattern as the top banner: content is duplicated
   so the loop has no visible seam.
   ============================================================ */
.reel-section {
  background: var(--color-warm-cream);
  padding: 42px 0;
  overflow: hidden;
}
.reel-marquee {
  display: flex;
  animation: reel-scroll 12s linear infinite;
  will-change: transform;
}
.reel-track {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
  padding-right: 16px;
}
.reel-track img {
  height: 280px;
  width: auto;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  flex-shrink: 0;
}
@keyframes reel-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.reel-section:hover .reel-marquee { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .reel-marquee { animation: none; }
}
@media (max-width: 900px) {
  .reel-section { padding: 40px 0; }
  .reel-track img { height: 220px; border-radius: 10px; }
  .reel-track { gap: 12px; padding-right: 12px; }
  /* Compensate for the narrower mobile track width so visual scroll
     speed (pixels/sec) matches desktop. Mobile track ≈ 0.78× desktop,
     so we shorten the duration by the same ratio. */
  .reel-marquee { animation-duration: 6s !important; }
}

/* ============================================================
   TOP MARQUEE BANNER — sits above the fixed nav on every page.
   CSS-driven horizontal scroll (right-to-left). The content track
   is duplicated so the loop is seamless: when the first copy
   reaches -50%, the second copy is in the original starting
   position, then animation restarts.
   ============================================================ */
:root { --banner-height: 36px; }
@media (max-width: 600px) { :root { --banner-height: 32px; } }
.top-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  height: var(--banner-height);
  background: var(--color-cypress);
  color: var(--color-warm-cream);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.top-banner-marquee {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: top-banner-marquee 40s linear infinite;
  will-change: transform;
}
.top-banner-track {
  display: flex;
  align-items: center;
  gap: 36px;
  padding-right: 36px;
  flex-shrink: 0;
}
.top-banner-msg {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}
.top-banner-sep {
  font-size: 12px;
  opacity: 0.55;
  user-select: none;
}
@keyframes top-banner-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.top-banner:hover .top-banner-marquee {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .top-banner-marquee { animation: none; }
}
@media (max-width: 600px) {
  .top-banner-msg, .top-banner-sep { font-size: 11px; letter-spacing: 0.08em; }
  .top-banner-track { gap: 28px; padding-right: 28px; }
  .top-banner-marquee { animation-duration: 32s; }
}

.nav-inner {
  max-width: none;
  padding: 0 40px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 28px;
}

.nav-logo {
  display: inline-block;
  width: 293px;
  height: 85px;
  margin-left: 27px;
  background: var(--logo-cypress) left center / contain no-repeat;
  font-size: 0;
  color: transparent;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
  justify-self: start;
}

/* ============================================================
   NAV TABS + DROPDOWNS
   ============================================================ */
.nav-tabs {
  display: flex;
  gap: 32px;
  justify-self: center;
  align-items: center;
}

.nav-tab {
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  color: var(--color-cypress);
  cursor: pointer;
  padding: 10px 4px;
  position: relative;
  transition: color 0.2s;
  letter-spacing: -0.005em;
  text-decoration: none;
}
.nav-tab:hover { color: var(--color-moss); }
.nav-tab.active { color: var(--color-cypress); }
.nav-tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-cypress);
  border-radius: 1px;
}

.nav-cta {
  font-size: 14px;
  padding: 12px 24px;
  justify-self: end;
}

/* Login text-link to portal.mycypress.co. Sits right of the primary CTA
   on desktop and to the left of the hamburger on mobile. Less weight than
   the CTA so it doesn't compete for attention. */
.nav-login {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: var(--color-moss);
  padding: 8px 4px 8px 16px;
  transition: color 0.15s ease;
  white-space: nowrap;
}
.nav-login:hover { color: var(--color-cypress); }

.nav-dropdown {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--color-warm-cream);
  border-bottom: 1px solid var(--color-border-soft);
  box-shadow: 0 16px 32px rgba(20, 53, 36, 0.06);
  padding: 44px 0 48px;
  animation: dropdownFade 0.18s ease;
}
.nav-dropdown.active { display: block; }

@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.nav-dropdown-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 240px 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.nav-dropdown-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-cypress);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.nav-dropdown-col h3 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-moss);
  margin-bottom: 18px;
}

.nav-dropdown-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown-col li { padding: 0; }

.nav-dropdown-col a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-cypress);
  text-decoration: none;
  padding: 8px 10px;
  margin-left: -10px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.nav-dropdown-col a::after {
  content: '\2192';
  font-size: 14px;
  color: var(--color-sage);
  transition: transform 0.18s ease, color 0.18s ease;
}
.nav-dropdown-col a:hover {
  color: var(--color-cypress);
  background: var(--color-warm-cream);
}
.nav-dropdown-col a:hover::after {
  transform: translateX(3px);
  color: var(--color-cypress);
}
.nav-dropdown-col a small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 2px;
}

@media (max-width: 1024px) {
  .nav-tabs { gap: 22px; }
  .nav-tab { font-size: 14px; }
  .nav-dropdown-inner { grid-template-columns: 200px 1fr 1fr; gap: 36px; }
}

@media (max-width: 900px) {
  .nav-tabs { display: none; }
  .nav-dropdown { display: none !important; }
}

/* ============================================================
   MOBILE DRAWER (≤900px)
   ============================================================ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-left: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-cypress);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.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); }

.nav-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 52, 43, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 998;
}
.nav-mobile-overlay.active { opacity: 1; visibility: visible; }

.nav-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(86vw, 420px);
  background: var(--color-warm-cream);
  box-shadow: -10px 0 40px rgba(20, 52, 43, 0.12);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nav-mobile-drawer.active { transform: translateX(0); }

.nav-mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-stone);
  flex: 0 0 auto;
}
.nav-mobile-logo {
  display: inline-block;
  width: 140px;
  height: 40px;
  background: var(--logo-cypress) left center / contain no-repeat;
  font-size: 0;
  color: transparent;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: 0;
  flex-shrink: 0;
}
.nav-mobile-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-cypress);
  padding: 0;
}
.nav-mobile-close svg { width: 22px; height: 22px; }

.nav-mobile-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 22px 16px;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile-section { margin-bottom: 14px; }
.nav-mobile-section-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-cypress);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.nav-mobile-section-title a {
  color: inherit;
  text-decoration: none;
}
.nav-mobile-section-title a:hover,
.nav-mobile-section-title a:focus {
  color: var(--color-moss);
}
.nav-mobile-section-sub {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-moss);
  margin: 9px 0 2px;
}
.nav-mobile-section ul { list-style: none; padding: 0; margin: 0 0 4px; }
.nav-mobile-section li { border-bottom: 1px solid rgba(143, 175, 154, 0.20); }
.nav-mobile-section li:last-child { border-bottom: 0; }
.nav-mobile-section li a {
  display: block;
  position: relative;
  padding: 12px 24px 12px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-cypress);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.nav-mobile-section li a::after {
  content: '\2192';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--color-sage);
  transition: transform 0.18s ease, color 0.18s ease;
}
.nav-mobile-section li a:hover::after,
.nav-mobile-section li a:active::after {
  transform: translateY(-50%) translateX(3px);
  color: var(--color-cypress);
}
.nav-mobile-section li a:hover,
.nav-mobile-section li a:active {
  color: var(--color-moss);
  transform: translateX(2px);
}
.nav-mobile-section li sup {
  font-size: 10px;
  color: var(--color-moss);
  font-weight: 500;
  margin-left: 3px;
}
.nav-mobile-cta {
  display: flex;
  width: 100%;
  margin-top: 6px;
  justify-content: center;
}

body.nav-mobile-open { overflow: hidden; }

@media (min-width: 901px) {
  .nav-mobile-overlay,
  .nav-mobile-drawer { display: none; }
}
@media (max-width: 900px) {
  .nav-hamburger { display: flex; }
  /* Mobile nav layout: switch to flex so logo + nav-cta + hamburger lay out
     cleanly when nav-tabs is hidden. nav-cta stays visible at all viewports;
     header-shrink-on-scroll (.is-shrunk) hides it after scroll past hero. */
  .nav-inner {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .nav-logo { margin-right: auto; }
  .nav-cta { font-size: 13px; padding: 12px 16px; }
  /* Tighten the login link so it fits in the mobile header to the left of
     the hamburger. Smaller font + tighter padding than desktop. */
  .nav-login { font-size: 16px; padding: 8px 6px; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--color-cypress);
  color: var(--color-warm-cream);
  border: 1px solid var(--color-cypress);
  padding: 15px 31px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1.2;
}

.btn:hover {
  background: var(--color-cypress-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 53, 36, 0.18);
}

/* ============================================================
   CTA SUBTLE PULSE — gentle box-shadow ring on all primary
   buttons + sticky bottom CTA. Pauses on hover so the user can
   read/click without distraction. Disabled for prefers-reduced-motion.
   ============================================================ */
@keyframes cta-subtle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20, 52, 43, 0.32); }
  60%      { box-shadow: 0 0 0 8px rgba(20, 52, 43, 0); }
}
.btn,
.cta-sticky-bottom-btn {
  animation: cta-subtle-pulse 2.6s ease-in-out infinite;
}
.btn:hover,
.cta-sticky-bottom-btn:hover,
.btn:focus-visible,
.cta-sticky-bottom-btn:focus-visible {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .btn,
  .cta-sticky-bottom-btn { animation: none; }
}

.btn:focus-visible {
  outline: 2px solid var(--color-cypress);
  outline-offset: 3px;
}

.btn-lg { font-size: 15px; padding: 17px 40px; }
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 140px 0 90px;
  background: var(--color-warm-cream);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, var(--hero-text-width, 560px)) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.hero-text {
  padding-left: 70px;
  padding-right: 0;
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--color-cypress);
  margin-bottom: 22px;
}

.hero-sub {
  font-size: 18px;
  color: var(--color-moss);
  line-height: 1.6;
  max-width: 460px;
  margin-bottom: 32px;
}

.hero-funnel {
  margin-top: 18px;
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.005em;
}

.hero-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1448 / 1086;
  border-radius: 24px 0 0 24px;
  overflow: hidden;
  background: var(--tint-sage-22);
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 900px) {
  .hero { padding: 140px 0 80px; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 24px;
  }
  .hero-text {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
  }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-image {
    margin: 0;
    border-radius: 24px;
    aspect-ratio: 4 / 3;
  }
}
.how-section .section-label { color: var(--color-citron); }
.how-section .section-headline { color: var(--color-warm-cream); letter-spacing: -0.008em; }

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

.how-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 22px;
  row-gap: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: 30px 30px 32px;
  color: var(--color-cypress);
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.how-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-border);
}

.how-card:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -29px;
  width: 28px;
  border-top: 1.5px dashed var(--color-sage);
  z-index: 1;
}

.how-card-num {
  grid-row: 1;
  grid-column: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-stone);
  color: var(--color-moss);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}

.how-card-body {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.how-card-icon {
  grid-row: 2;
  grid-column: 1;
  align-self: end;
  justify-self: start;
  margin-top: 14px;
  margin-left: -8px;
}
.how-card-icon img {
  display: block;
  width: 84px;
  height: 84px;
}

.how-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--color-cypress);
  letter-spacing: -0.008em;
}

.how-card-desc {
  font-size: 14px;
  color: var(--color-moss);
  line-height: 1.6;
}

/* ============================================================
   TRUST BAR  (cream, hairline-bordered)
   ============================================================ */
.trust-bar {
  background: var(--color-surface);
  padding: 36px 32px;
  text-align: center;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.trust-bar-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-moss);
  margin-bottom: 24px;
}

.trust-bar-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}

.trust-bar-item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--color-cypress);
  letter-spacing: -0.008em;
}

.trust-bar-item span {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  display: block;
  color: var(--color-moss);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing-section .container { max-width: 1200px; }

.pricing-panel {
  position: relative;
  background: var(--color-warm-cream);
  border: 1px solid var(--color-border-soft);
  border-radius: 22px;
  padding: 44px 56px 120px;
  overflow: hidden;
}
.pricing-leaf {
  position: absolute;
  top: 50%;
  right: -150px;
  width: 400px;
  height: auto;
  transform: translateY(calc(-50% - 20px)) rotate(-15deg);
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.pricing-header {
  position: relative;
  z-index: 1;
  margin-bottom: 36px;
  max-width: 760px;
}
.pricing-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-moss);
  margin: 0 0 14px;
}
.pricing-headline {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-cypress);
  margin: 0;
}
.pricing-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 32px;
  align-items: center;
}
.pricing-anchor {
  border-right: 1px solid var(--color-border);
  padding-right: 32px;
}
.pricing-anchor-label {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0 0 4px;
  font-weight: 500;
}
.pricing-anchor-amount {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-cypress);
  margin: 0;
  display: flex;
  align-items: baseline;
}
.pricing-anchor-currency {
  font-size: 38px;
  margin-right: 2px;
  font-weight: 500;
}
.pricing-anchor-period {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 6px;
  letter-spacing: 0;
}
.pricing-copy { max-width: 280px; }
.pricing-copy-lead {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-primary);
  margin: 0 0 10px;
}
.pricing-copy-fine {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}
.pricing-features {
  display: flex;
  gap: 10px;
}
.pricing-feature {
  background: var(--color-surface);
  border-radius: 14px;
  padding: 14px 12px 12px;
  width: 92px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pricing-feature-icon {
  width: 48px;
  height: 48px;
  background: var(--color-citron);
  border-radius: 50%;
  color: var(--color-cypress);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pricing-feature-icon svg { width: 24px; height: 24px; }
.pricing-feature-icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}
.pricing-feature-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-cypress);
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.005em;
}
.pricing-cta {
  align-self: center;
  white-space: nowrap;
  padding: 16px 26px;
}

@media (max-width: 1100px) {
  .pricing-panel { padding: 40px 40px 100px; }
  .pricing-leaf { width: 320px; right: -160px; }
  .pricing-row {
    grid-template-columns: auto 1fr;
    row-gap: 28px;
    column-gap: 28px;
  }
  .pricing-features { grid-column: 1 / -1; }
  .pricing-cta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 760px) {
  .pricing-panel { padding: 32px 22px 28px; border-radius: 18px; }
  .pricing-leaf { width: 220px; right: -110px; opacity: 0.85; }
  .pricing-row { grid-template-columns: 1fr; gap: 24px; }
  .pricing-anchor { border-right: none; padding-right: 0; }
  .pricing-anchor-amount { font-size: 52px; }
  .pricing-anchor-currency { font-size: 32px; }
  .pricing-features { width: 100%; justify-content: space-between; gap: 8px; }
  .pricing-feature { flex: 1; max-width: none; width: auto; }
  .pricing-cta { width: auto; align-self: flex-start; }
}

/* ============================================================
   WHY CYPRESS  (light 3-column layout)
   ============================================================ */
.why-section {
  background: var(--color-surface);
}

.why-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 80px;
  align-items: center;
}

.why-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.35vw, 2.1875rem);
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--color-cypress);
  margin: 10px 0 36px;
}

.why-signals {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  margin-left: -17px;
}

.why-signal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.why-signal-icon {
  width: 92px;
  height: 92px;
  display: block;
  flex-shrink: 0;
}

.why-signal span {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-cypress);
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-left: -5px;
}

.why-body-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-secondary);
  align-self: flex-start;
  flex: 1 1 0;
  min-width: 0;
  text-wrap: balance;
}

.why-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.why-right-photo {
  flex-shrink: 0;
  align-self: center;
  width: 220px;
  height: 260px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-section { background: var(--color-warm-cream); }

.faq-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 80px;
  align-items: start;
}

.faq-intro { position: sticky; top: 120px; }

.faq-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-moss);
  margin: 0 0 18px;
}

.faq-headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.2vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-cypress);
  margin: 0 0 36px;
}

.faq-illustration {
  width: 360px;
  height: 360px;
  margin-top: 12px;
  margin-left: -24px;
}
.faq-illustration img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  clip-path: circle(40% at 50% 50%);
}

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

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.faq-item:hover { border-color: var(--color-border); }
.faq-item.open { border-color: var(--color-border); }

.faq-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 26px;
}

.faq-text { flex: 1; min-width: 0; }

.faq-q {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-cypress);
  line-height: 1.35;
  margin-bottom: 6px;
}

.faq-preview {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--color-moss);
  line-height: 1.55;
}

.faq-chevron {
  width: 20px;
  height: 20px;
  color: var(--color-moss);
  flex-shrink: 0;
  margin-top: 4px;
  transition: transform 0.25s;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--color-cypress); }

.faq-a {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--color-moss);
  line-height: 1.75;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s, padding 0.3s;
  padding: 0 26px;
}

.faq-item.open .faq-a { max-height: 500px; padding: 4px 26px 22px; }

@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .faq-intro { position: static; text-align: left; }
  .faq-illustration { width: 260px; height: 260px; margin-top: 4px; margin-left: -16px; }
  .faq-row { padding: 18px 20px; gap: 14px; }
  .faq-q { font-size: 16px; }
  .faq-preview { font-size: 14px; }
  .faq-item.open .faq-a { padding: 4px 20px 18px; }
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  background: var(--color-warm-cream);
  border-top: 1px solid var(--color-border-soft);
}
.final-cta .container {
  padding-top: 54px;
  padding-bottom: 54px;
}
.final-cta-pill {
  background: var(--color-stone);
  border-radius: 28px;
  padding: 32px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 1px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.final-cta-headline {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-cypress);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}
.final-cta-divider {
  width: 1px;
  height: 64px;
  background: var(--color-border-soft);
  justify-self: center;
}
.final-cta-sub {
  color: var(--color-moss);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  max-width: 22em;
}
.final-cta-pill .btn { white-space: nowrap; }
.final-cta-decoration {
  width: 144px;
  height: 144px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
@media (max-width: 900px) {
  .final-cta .container { padding-top: 56px; padding-bottom: 56px; }
  .final-cta-pill {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 36px 28px 28px;
    text-align: left;
  }
  .final-cta-divider { display: none; }
  .final-cta-sub { max-width: none; }
  .final-cta-pill .btn { justify-self: start; }
  .final-cta-decoration {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 96px;
    height: 96px;
    opacity: 0.9;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--color-surface);
  color: var(--color-moss);
  padding: 48px 32px 32px;
  font-size: 13px;
  line-height: 1.8;
  border-top: 1px solid var(--color-border-soft);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.legitscript-seal { display: inline-block; line-height: 0; }
.legitscript-seal img { display: block; width: 73px; height: 79px; }

.footer-links a {
  margin-left: 24px;
  color: var(--color-moss);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--color-cypress); }

.footer-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.footer-socials {
  display: flex;
  gap: 6px;
  align-items: center;
}
.footer-socials a {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-moss);
  border-radius: 50%;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.footer-socials a:hover,
.footer-socials a:focus-visible {
  color: var(--color-cypress);
  background: rgba(20, 53, 36, 0.06);
  transform: translateY(-2px);
}
.footer-socials a:active { transform: translateY(0); }
.footer-socials svg {
  width: 16px;
  height: 16px;
  display: block;
}
@media (max-width: 768px) {
  .footer-end { align-items: center; gap: 12px; }
  .footer-socials { gap: 4px; }
}

.footer-disclaimer {
  max-width: 1200px;
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-soft);
  font-size: 11px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.disclaimer-sm {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-top: 16px;
}




/* How it works — header layout + per-card CTA */
.how-header {
  margin-bottom: 56px;
}
.how-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.how-header .section-headline {
  margin: 0;
}
.how-header .section-headline em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-moss);
}
.how-header-cta-group {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.how-header-cta-meta {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .how-header-row { flex-direction: column; align-items: flex-start; gap: 56px; }
  .how-header-cta-group { width: 100%; }
  .how-header-cta-group .btn { width: 100%; }
  .how-header-cta-meta { left: 0; transform: none; }
}


/* ============================================================
   GOAL MODAL
   ============================================================ */
.goal-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 53, 36, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 24px;
  align-items: center;
  justify-content: center;
  animation: goalFade 0.2s ease;
}
.goal-modal-overlay.active { display: flex; }

@keyframes goalFade { from { opacity: 0; } to { opacity: 1; } }

.goal-modal {
  background: var(--color-surface);
  border-radius: 22px;
  width: 100%;
  max-width: 520px;
  padding: 30px 30px 28px;
  box-shadow: 0 24px 60px rgba(20, 53, 36, 0.28);
  animation: goalRise 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes goalRise {
  from { transform: translateY(16px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.goal-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.goal-modal-header h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-cypress);
  letter-spacing: -0.02em;
  margin: 0;
}
.goal-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--color-moss);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.goal-modal-close:hover {
  background: var(--color-stone);
  color: var(--color-cypress);
}

.goal-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.goal-option {
  display: flex;
  align-items: center;
  background: var(--color-warm-cream);
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-cypress);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  text-align: left;
  width: 100%;
}
.goal-option:hover {
  border-color: var(--color-cypress);
  background: #F2EEE5;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .goal-modal { padding: 24px 22px 22px; border-radius: 18px; }
  .goal-modal-header h2 { font-size: 19px; }
  .goal-option { font-size: 15px; padding: 16px 18px; }
}

.faq-a, .disclaimer-sm, .footer-disclaimer {
  font-family: var(--font-serif);
}
.faq-a { font-size: 15px; line-height: 1.75; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-headline,
.hero-sub,
.hero-funnel,
.hero-image {
  animation: fadeUp 0.7s ease both;
}
.hero-headline { animation-delay: 0s; }
.hero-sub { animation-delay: 0.08s; }
.hero-funnel { animation-delay: 0.20s; }
.hero-image { animation-delay: 0.12s; animation-duration: 1s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .how-cards { grid-template-columns: 1fr; }
  .how-card:not(:last-child)::after { display: none; }
}

@media (max-width: 768px) {
  section { padding: 80px 24px; }
  .nav-inner { padding: 0 20px; }
  .trust-bar-logos { gap: 32px; }
  .hero { padding: 150px 24px 80px; min-height: 88vh; }
  .nav-logo { width: 213px; height: 62px; margin-left: 0; }

  /* =========================================================
     MOBILE FOOTER — redesigned for clarity, rhythm, and touch.
     Distinct Stone background to separate from page content;
     all elements center-aligned in a single column with hairline
     section dividers; tap targets sized to HIG (≥44px); legal
     links inline with dot separators; disclaimer slightly larger.
     ========================================================= */
  footer {
    background: var(--color-stone);
    padding: 40px 24px 28px;
    text-align: center;
  }
  .footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .footer-brand {
    align-items: center;
    text-align: center;
    gap: 18px;
    width: 100%;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-sage);
  }
  .footer-brand > div:first-child {
    font-weight: 500;
    color: var(--color-cypress);
  }
  .footer-brand .legitscript-seal { display: inline-block; }
  .footer-end {
    width: 100%;
    align-items: center;
    gap: 24px;
    padding-top: 24px;
  }
  .footer-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
  .footer-links a {
    margin: 0;
    padding: 14px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-moss);
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(143, 175, 154, 0.4);
  }
  .footer-links a:first-child { border-top: 1px solid rgba(143, 175, 154, 0.4); }
  .footer-links a:last-child { border-bottom: none; }
  .footer-links a + a::before { display: none; }
  .footer-socials {
    gap: 8px;
    justify-content: center;
    padding-top: 4px;
    border-top: 1px solid var(--color-sage);
    padding-top: 24px;
    width: 100%;
  }
  .footer-socials a {
    width: 44px;
    height: 44px;
  }
  .footer-socials svg { width: 18px; height: 18px; }

  .footer-disclaimer {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-sage);
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-moss);
    text-align: center;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 600px) {
  section { padding: 64px 20px; }
  .how-cards { grid-template-columns: 1fr; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .trust-bar { padding: 36px 20px; }
  .trust-bar-logos { gap: 24px; }
  .hero { padding: 140px 0 80px; }
  .hero-headline { font-size: clamp(2.2rem, 4.5vw, 3.3rem); }
  .hero-sub { font-size: 16px; }
  .nav-inner { padding: 0 16px; }
  .nav-logo { width: 160px; height: 47px; }
  .assess-nav .nav-logo { width: 107px; height: 31px; }
  /* Mobile button sizing — ≥44px tap targets, larger primary at btn-lg */
  .btn { padding: 14px 22px; font-size: 14px; min-height: 44px; }
  .btn-lg { padding: 16px 28px; font-size: 15px; min-height: 50px; }
  .assess-content { padding: 40px 20px 140px; }
  .assess-headline { font-size: 1.6rem; }
  footer { padding: 36px 20px 24px; }
  /* How-it-works cards — restack to single column on mobile */
  .how-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0;
    row-gap: 12px;
    padding: 24px 22px 26px;
  }
  .how-card-num {
    grid-row: 1; grid-column: 1;
  }
  .how-card-icon {
    grid-row: 2; grid-column: 1;
    margin: 4px 0 0;
    justify-self: start;
    align-self: auto;
  }
  .how-card-icon img { width: 64px; height: 64px; }
  .how-card-body {
    grid-row: 3; grid-column: 1;
  }
}

@media (max-width: 380px) {
  .hero-headline { font-size: 2.2rem; }
  .section-headline { font-size: 1.75rem; }
  .pricing-anchor-amount { font-size: 44px; }
  .trust-bar-logos { gap: 20px; }
  .trust-bar-item { font-size: 16px; }
}

/* ============================================================
   PHASE 8 — THREE-PILLAR DESIGN SYSTEM
   ============================================================ */

/* Tune headline weights for Cormorant Garamond (max 700) */
.hero-headline,
.section-headline,
.why-headline,
.faq-headline,
.pricing-headline,
.final-cta-headline,
.goal-modal-header h2 {
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.08;
}

/* Italic emphasis = gold accent */
.hero-headline em,
.section-headline em,
.why-headline em,
.final-cta-headline em,
.faq-headline em {
  font-style: italic;
  color: var(--color-gold);
  font-weight: 400;
}

.btn { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.06em; }

/* Hero eyebrow (above headline) */
.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 18px;
}

/* Section lead / intro paragraph */
.section-lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-moss);
  max-width: 640px;
  margin: 18px auto 0;
}

/* ===== PILLARS SECTION (homepage three-card row) ===== */
.pillars-section {
  background: var(--color-warm-cream);
  padding: 72px 0 75px;
}
.pillars-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.pillars-header .section-label { color: var(--color-gold); }
.pillars-header .section-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  color: var(--color-cypress);
  margin-bottom: 6px;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 18px;
  padding: 38px 32px 32px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}
.pillar-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: var(--color-border);
}
.pillar-card:hover::before { transform: scaleX(1); }
.pillar-card-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.pillar-card-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--color-cypress);
  margin: 4px 0 6px;
}
.pillar-card-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-moss);
  margin-bottom: 6px;
}
.pillar-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-cypress);
}
.pillar-card-cta svg {
  transition: transform 0.25s ease;
}
.pillar-card:hover .pillar-card-cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
  .pillars-section { padding: 72px 0 80px; }
  .pillars-grid { grid-template-columns: 1fr; gap: 16px; }
  .pillar-card { padding: 30px 26px; }
}

/* ===== TESTIMONIALS ===== */
.testimonials-section {
  padding: 96px 0;
}
.testimonials-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.testimonials-header .section-label { color: var(--color-gold); }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 16px;
  padding: 36px 32px 30px;
  position: relative;
  margin: 0;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 8px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 1;
  color: var(--color-gold);
  opacity: 0.5;
}
.testimonial-card blockquote {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-cypress);
  margin: 14px 0 22px;
  font-style: italic;
}
.testimonial-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--color-border-soft);
  padding-top: 16px;
}
.testimonial-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-cypress);
}
.testimonial-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
}
.testimonials-disclaimer {
  text-align: center;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 36px;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .testimonials-section { padding: 72px 0; }
  .testimonials-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ===== GOAL MODAL (rich) ===== */
.goal-modal { max-width: 540px; }
.goal-modal-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  margin: -6px 0 18px;
  line-height: 1.55;
}
.goal-option--rich {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  text-align: left;
  background: var(--color-warm-cream);
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  width: 100%;
  font-family: var(--font-body);
}
.goal-option--rich:hover {
  border-color: var(--color-gold);
  background: var(--color-surface);
  transform: translateY(-1px);
}
.goal-option-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tint-gold-12);
  color: var(--color-gold);
}
.goal-option-text { display: flex; flex-direction: column; gap: 2px; }
.goal-option-text strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-cypress);
}
.goal-option-text em {
  font-style: normal;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.goal-option--secondary { background: transparent; border-style: dashed; }
.goal-option--secondary .goal-option-text strong { color: var(--color-moss); }

/* ===== UTILITY: align Why section's two-paragraph body =====
   Mobile stacks vertically (gap via margin-top); desktop is a flex row
   where both paras sit side-by-side at the same top. */
.why-right .why-body-text + .why-body-text { margin-top: 14px; }
@media (min-width: 901px) {
  .why-right .why-body-text + .why-body-text { margin-top: 0; }
}

/* ===== Smooth nav-cta gold variant for landing pages ===== */
.btn--gold {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-cypress);
}
.btn--gold:hover {
  background: var(--color-gold-soft);
  border-color: var(--color-gold-soft);
}

/* ===== PHASE 8 PAGE FRAMES (PDP, category, quiz) ===== */
.page-wrap { padding-top: calc(92px + var(--banner-height, 0px)); }

/* Category-page hero (used by weight-loss, menopause, vitality) */
.cat-hero {
  background: var(--color-warm-cream);
  padding: 80px 0 54px;
  border-bottom: 1px solid var(--color-border-soft);
}
.cat-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.cat-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 14px;
}
.cat-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.3rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--color-cypress);
  margin-bottom: 18px;
}
.cat-hero-title em { font-style: italic; color: var(--color-gold); font-weight: 400; }
.cat-hero-sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-moss);
  margin-bottom: 28px;
}
.cat-hero-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.005em;
  line-height: 1.65;
  margin-top: 22px;
  max-width: 460px;
}
.cat-hero-art {
  background: var(--tint-sage-22);
  border-radius: 24px;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-moss);
  font-size: 18px;
  position: relative;
  overflow: hidden;
}
.cat-hero-art::after {
  content: 'photography';
  position: absolute;
  bottom: 18px;
  right: 22px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cat-hero-art--photo {
  aspect-ratio: 4 / 5;
  background: transparent;
}
.cat-hero-art--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cat-hero-art--photo::after { content: none; }
@media (max-width: 900px) {
  .cat-hero-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* Generic page section spacing */
.page-section { padding: 66px 0; }
.page-section--alt { background: var(--color-warm-cream); }
.page-section-header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.page-section-header .section-label { color: var(--color-gold); }
.page-section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--color-cypress);
  line-height: 1.1;
}
.page-section-header h2 em { font-style: italic; color: var(--color-gold); font-weight: 400; }
.page-section-header p {
  font-size: 16px;
  color: var(--color-moss);
  margin-top: 14px;
  line-height: 1.6;
}

/* ===== Product carousel (weight-loss landing) ===== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  padding: 22px 22px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  position: relative;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-border);
}
.product-card-image {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-warm-cream);
  border-radius: 10px;
  margin: -8px -8px 8px;
  padding: 18px 12px;
  min-height: 200px;
}
.product-card-image img {
  max-width: 100%;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(20,52,43,0.14));
}
.product-card-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.product-card-tag--branded { color: var(--color-moss); }
.product-card-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-cypress);
  line-height: 1.15;
}
.product-card-form {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
}
.product-card-price {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-moss);
}
.product-card-price strong {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-cypress);
  line-height: 1.1;
}
.product-card-cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cypress);
}
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .product-grid { grid-template-columns: 1fr; }
}
.product-grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .product-grid--three { grid-template-columns: 1fr; max-width: 420px; }
}

/* ===== Pricing grid (weight-loss product buckets) ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}
.price-tier {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 16px;
  padding: 36px 28px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.price-tier-icon {
  width: 106px;
  height: 106px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: transparent;
}
.price-tier-icon img {
  width: 106px;
  height: 106px;
  display: block;
  border-radius: 50%;
}
.price-tier-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--color-cypress);
  line-height: 1.15;
  margin-bottom: 4px;
}
.price-tier-subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.price-tier-divider {
  width: 100%;
  height: 1px;
  background: var(--color-border-soft);
  margin-bottom: 20px;
}
.price-tier-from {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-cypress);
  font-weight: 700;
  min-height: 14px;
  margin-bottom: 6px;
}
.price-tier-amount {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  color: var(--color-cypress);
  line-height: 1;
  margin-bottom: 0;
}
.price-tier-amount sup {
  font-size: 22px;
  vertical-align: super;
  font-weight: 400;
}
.price-tier-period-inline {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 2px;
}
.price-tier-amount--text {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cypress);
  padding-top: 12px;
}
.price-tier-pill {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 16px;
  background: #F5F6F0;
  color: var(--color-cypress);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pricing-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 40px auto 0;
}
.pricing-cta .btn { min-width: 280px; }
.pricing-cta-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-moss);
}
.pricing-cta-note img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ===== PDP (Product Detail Page) ===== */
.pdp-nav {
  position: sticky;
  top: 0;
  background: var(--color-warm-cream);
  border-bottom: 1px solid var(--color-border-soft);
  padding: 14px 0;
  z-index: 100;
}
.pdp-nav-inner {
  max-width: none;
  margin: 0;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pdp-nav-logo {
  display: inline-block;
  width: 293px;
  height: 85px;
  margin-left: 27px;
  background: var(--logo-cypress) left center / contain no-repeat;
  font-size: 0;
  color: transparent;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}
@media (max-width: 1100px) { .pdp-nav-logo { width: 213px; height: 62px; } }
@media (max-width: 720px) { .pdp-nav-logo { width: 160px; height: 47px; margin-left: 0; } }
.pdp-nav-trust {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.pdp-hero {
  padding: 60px 0 60px;
  background: var(--color-warm-cream);
}
.pdp-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
.pdp-hero-inner--with-product {
  grid-template-columns: 1.05fr 220px 1fr;
  gap: 28px;
  align-items: center;
}
.pdp-hero-product-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 400px;
  isolation: isolate;
}
.pdp-hero-product-stage::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 6%;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(20,52,43,0.28) 0%, rgba(20,52,43,0.14) 38%, rgba(20,52,43,0) 72%);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.7s ease, filter 0.7s ease;
}
.pdp-hero-product-img {
  max-width: 100%;
  max-height: 380px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 36px rgba(20,52,43,0.20)) drop-shadow(0 8px 14px rgba(20,52,43,0.10));
  font-size: 0;
  color: transparent;
  transform-origin: 50% 92%;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.7s ease;
  will-change: transform;
}
.pdp-hero-product-stage:hover .pdp-hero-product-img {
  transform: translateY(-22px) scale(1.04) rotate(-1.2deg);
  filter: drop-shadow(0 44px 48px rgba(20,52,43,0.22)) drop-shadow(0 12px 20px rgba(20,52,43,0.12));
}
.pdp-hero-product-stage:hover::before {
  transform: scaleX(1.18) scaleY(0.6);
  opacity: 0.7;
  filter: blur(14px);
}
.pdp-hero-product-img:not([src]),
.pdp-hero-product-img[src=""] { display: none; }
@media (max-width: 1100px) {
  .pdp-hero-inner--with-product { grid-template-columns: 1fr 180px 0.95fr; gap: 20px; }
  .pdp-hero-product-stage { min-height: 340px; }
  .pdp-hero-product-img { max-height: 340px; }
}
@media (max-width: 980px) {
  .pdp-hero-inner--with-product { grid-template-columns: 1fr; gap: 28px; }
  .pdp-hero-product-stage { min-height: 360px; order: -1; }
  .pdp-hero-product-img { max-height: 380px; }
}
/* On mobile portrait, shrink the vial + tighten spacing so the
   product name + vial both fit above the fold in Safari with the
   URL bar visible (~600px usable viewport on most iPhones). */
@media (max-width: 600px) {
  .pdp-hero { padding-top: 16px !important; padding-bottom: 32px !important; }
  .pdp-hero-inner--with-product { gap: 14px; }
  .pdp-hero-product-stage { min-height: 220px; padding: 0; }
  .pdp-hero-product-img { max-height: 220px; }
}
@media (max-width: 380px) {
  .pdp-hero-product-stage { min-height: 200px; }
  .pdp-hero-product-img { max-height: 200px; }
}
.pdp-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 14px;
}
.pdp-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-cypress);
  margin-bottom: 14px;
}
.pdp-hero-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--color-gold);
  margin-bottom: 22px;
}
.pdp-hero-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-moss);
  margin-bottom: 24px;
}
.pdp-bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.pdp-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--color-cypress);
  line-height: 1.5;
}
.pdp-bullet-list li::before {
  content: '';
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tint-gold-22);
  position: relative;
  top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A96E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.pdp-buybox {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 18px;
  padding: 32px 28px;
  position: sticky;
  top: 110px;
}
.pdp-mobile-price-banner {
  display: none;
}
@media (max-width: 980px) {
  .pdp-mobile-price-banner {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    order: -2;
    padding: 7px 20px;
    background: var(--color-gold);
    color: #FFFFFF;
    border-radius: 0;
    white-space: nowrap;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease;
    /* Break out of the parent container padding so the band spans
       the full viewport width on mobile. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    animation: pdp-mobile-banner-blink 1.6s ease-in-out infinite;
  }
  @keyframes pdp-mobile-banner-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.62; }
  }
  .pdp-mobile-price-banner:hover,
  .pdp-mobile-price-banner:focus-visible {
    filter: brightness(0.95);
    animation-play-state: paused;
    opacity: 1;
  }
  .pdp-mobile-price-banner-from {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: #FFFFFF;
  }
  .pdp-mobile-price-banner-amount {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    color: #FFFFFF;
    letter-spacing: -0.005em;
  }
  .pdp-mobile-price-banner-amount sup {
    font-size: 11px;
    vertical-align: super;
    line-height: 0;
  }
  .pdp-mobile-price-banner-period {
    font-family: var(--font-body);
    font-size: 12px;
    color: #FFFFFF;
    font-weight: 500;
    margin-left: 2px;
    letter-spacing: 0;
    opacity: 0.92;
  }
}
.pdp-buybox-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
/* Product name displayed above the IN STOCK row in the standalone
   buybox. Shown on both mobile and desktop. */
.pdp-buybox--standalone .pdp-buybox-product-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-cypress);
  text-align: center;
  margin: 0 0 14px;
}
/* Center the IN STOCK + FIRST MONTH DISCOUNT eyebrow row on both
   mobile and desktop in the standalone pricing buybox. */
.pdp-buybox--standalone .pdp-buybox-status-row { justify-content: center; }
.pdp-buybox-status-row .pdp-buybox-stock,
.pdp-buybox-status-row .pdp-buybox-savings-eyebrow { margin-bottom: 0; }
.pdp-buybox-stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--color-cypress);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.pdp-buybox-stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3F8F5C;
  box-shadow: 0 0 0 3px rgba(63, 143, 92, 0.18);
  flex-shrink: 0;
  animation: pdp-stock-blink 1.4s ease-in-out infinite;
}
@keyframes pdp-stock-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(63, 143, 92, 0.22); }
  50%      { opacity: 0.25; box-shadow: 0 0 0 1px rgba(63, 143, 92, 0.05); }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-buybox-stock-dot { animation: none; }
}
.pdp-buybox-savings-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-cypress);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  line-height: 1;
}
.pdp-buybox-savings-eyebrow svg {
  flex-shrink: 0;
  color: var(--color-gold);
  width: 11px;
  height: 11px;
  display: block;
}
.pdp-buybox-stock-dot { display: block; }
.pdp-buybox-price-label {
  font-size: 18px;
  color: var(--color-cypress);
  font-weight: 600;
  font-family: var(--font-body);
  margin-left: 6px;
  letter-spacing: 0.01em;
}
.pdp-buybox-promo-code {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--color-warm-cream);
  border: 1px dashed var(--color-sage);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-moss);
  text-align: center;
  letter-spacing: 0.03em;
}
.pdp-buybox-promo-code strong {
  color: var(--color-cypress);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 13px;
  margin: 0 2px;
}
.pdp-buybox-price {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  color: var(--color-cypress);
  line-height: 1;
}
.pdp-buybox-price sup { font-size: 20px; }
.pdp-buybox-period { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.pdp-buybox-ongoing { font-size: 14px; color: var(--color-moss); margin-top: 8px; line-height: 1.5; }
.pdp-buybox hr { border: none; border-top: 1px solid var(--color-border-soft); margin: 22px 0; }
.pdp-buybox-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.pdp-buybox-option {
  border: 1.5px solid var(--color-border-soft);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-family: var(--font-body);
  /* 2-row grid: name + price share row 1; detail spans both columns on row 2. */
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: baseline;
}
.pdp-buybox-option-name { grid-column: 1; grid-row: 1; }
.pdp-buybox-option-price { grid-column: 2; grid-row: 1; }
.pdp-buybox-option-detail { grid-column: 1 / -1; grid-row: 2; }
.pdp-buybox-option:hover { border-color: var(--color-border-strong); }
.pdp-buybox-option.selected {
  border-color: var(--color-gold);
  background: var(--tint-gold-12);
}
.pdp-buybox-option-name { font-size: 14px; font-weight: 600; color: var(--color-cypress); }
.pdp-buybox-option-detail { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.pdp-buybox-option-price { font-size: 14px; font-weight: 600; color: var(--color-cypress); white-space: nowrap; }
.pdp-buybox-option-price-original { font-weight: 400; color: var(--color-text-muted); text-decoration: line-through; margin-left: 4px; }
.pdp-buybox-disclaimer { font-size: 11px; color: var(--color-text-muted); margin-top: 20px; line-height: 1.65; text-align: center; }

@media (max-width: 900px) {
  .pdp-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .pdp-buybox { position: static; }
}

/* PDP info sections */
.pdp-section { padding: 80px 0; }
.pdp-section--alt { background: var(--color-warm-cream); }
.pdp-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 64px;
  align-items: start;
}
.pdp-section-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 12px;
}
.pdp-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--color-cypress);
  line-height: 1.1;
}
.pdp-section-title em { font-style: italic; color: var(--color-gold); font-weight: 400; }
.pdp-section-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-moss);
}
.pdp-section-body p + p { margin-top: 16px; }
@media (max-width: 900px) {
  .pdp-section-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* PDP step cards
   ----------------------------------------------------------------
   Layout: [ num ][ title ] in row 1, body fills row 2 spanning both
   columns. The previous markup put num and title as siblings without
   a wrapper, so they stacked vertically — the grid here lets them
   share a line without an HTML change. */
.pdp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pdp-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  padding: 28px 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
}
.pdp-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tint-gold-22);
  color: var(--color-cypress);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  grid-row: 1;
  grid-column: 1;
}
.pdp-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.pdp-step-header .pdp-step-num { margin-bottom: 0; }
.pdp-step-header .pdp-step-title { margin-bottom: 0; }
.pdp-step-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--color-cypress);
  margin-bottom: 0;
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  line-height: 1.2;
}
.pdp-step-body {
  font-size: 14px;
  color: var(--color-moss);
  line-height: 1.55;
  grid-row: 2;
  grid-column: 1 / -1;
}
@media (max-width: 900px) { .pdp-steps { grid-template-columns: 1fr; } }

/* Compliance / disclosure box */
.disclosure-box {
  background: var(--tint-gold-12);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
  margin: 28px 0;
}
.disclosure-box-title {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-cypress);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.disclosure-box-body {
  font-size: 14px;
  color: var(--color-moss);
  line-height: 1.6;
}

/* PDP final CTA strip */
.pdp-final-cta {
  background: var(--gradient-dark-green);
  color: var(--color-text-on-dark);
  padding: 80px 0;
  text-align: center;
}
.pdp-final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 14px;
  color: var(--color-text-on-dark);
}
.pdp-final-cta h2 em { font-style: italic; color: var(--color-gold); font-weight: 400; }
.pdp-final-cta p {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text-on-dark-muted);
  max-width: 580px;
  margin: 0 auto 28px;
  line-height: 1.6;
}
.pdp-final-cta .btn {
  background: var(--color-gold);
  color: var(--color-cypress);
  border-color: var(--color-gold);
}
.pdp-final-cta .btn:hover { background: var(--color-gold-soft); border-color: var(--color-gold-soft); }

/* Symptoms grid (HRT page) */
.symptoms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.symptom-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  padding: 26px 22px;
  text-align: left;
}
.symptom-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tint-gold-22);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.symptom-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--color-cypress);
  margin-bottom: 6px;
}
.symptom-card p {
  font-size: 13px;
  color: var(--color-moss);
  line-height: 1.55;
}
@media (max-width: 900px) {
  .symptoms-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .symptoms-grid { grid-template-columns: 1fr; }
}

/* Formulary list (HRT page — links to per-medication detail pages) */
.formulary-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 880px;
  margin: 0 auto;
}
.formulary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  padding: 18px 22px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
a.formulary-item:hover {
  border-color: var(--color-border);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
a.formulary-item:hover .formulary-item-name { color: var(--color-cypress-dark, var(--color-cypress)); }
.formulary-item-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-cypress);
}
.formulary-item-form {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media (max-width: 700px) { .formulary-list { grid-template-columns: 1fr; } }

/* Quiz layout (per-pillar simple intake) */
.quiz-shell {
  min-height: 100vh;
  background: var(--color-warm-cream);
  display: flex;
  flex-direction: column;
}
.quiz-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  border-bottom: 1px solid var(--color-border-soft);
}
.quiz-topbar-logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-cypress);
  text-decoration: none;
}
.quiz-topbar-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
}
.quiz-progress-bar {
  width: 120px;
  height: 4px;
  background: var(--color-border-soft);
  border-radius: 2px;
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  background: var(--color-gold);
  transition: width 0.3s ease;
}
.quiz-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 32px;
}
.quiz-card {
  width: 100%;
  max-width: 580px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 18px;
  padding: 48px 44px;
}
.quiz-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 14px;
}
.quiz-headline {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--color-cypress);
  line-height: 1.15;
  margin-bottom: 12px;
}
.quiz-headline em { font-style: italic; color: var(--color-gold); font-weight: 400; }
.quiz-sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-moss);
  margin-bottom: 28px;
  line-height: 1.55;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.quiz-option {
  background: var(--color-warm-cream);
  border: 1.5px solid var(--color-border-soft);
  border-radius: 10px;
  padding: 16px 20px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-cypress);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.quiz-option:hover { border-color: var(--color-gold); transform: translateY(-1px); }
.quiz-option.selected { border-color: var(--color-gold); background: var(--tint-gold-12); }
.quiz-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.quiz-back {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 0.05em;
}
.quiz-back:hover { color: var(--color-cypress); }
.quiz-input {
  width: 100%;
  background: var(--color-warm-cream);
  border: 1.5px solid var(--color-border-soft);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-cypress);
  margin-bottom: 12px;
  transition: border-color 0.2s;
}
.quiz-input:focus { outline: none; border-color: var(--color-gold); }
@media (max-width: 700px) {
  .quiz-card { padding: 32px 24px; border-radius: 12px; }
  .quiz-headline { font-size: 26px; }
}

/* Reduce em underline in <em> Cormorant — it's italic enough */
em { font-style: italic; }


/* Quiz step visibility — only active step is rendered */
.quiz-step { display: none; }
.quiz-step.active { display: block; }

/* PDP section photo (editorial: photo on left, title + body stacked on right) */
.pdp-section-grid:has(> .pdp-section-photo) {
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "photo title"
    "photo body";
  column-gap: 64px;
  row-gap: 28px;
  align-items: start;
}
.pdp-section-grid > .pdp-section-photo {
  grid-area: photo;
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0;
  border-radius: 18px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.pdp-section-grid:has(> .pdp-section-photo) > div:not(.pdp-section-body) {
  grid-area: title;
  align-self: end;
}
.pdp-section-grid:has(> .pdp-section-photo) > .pdp-section-body {
  grid-area: body;
}
@media (max-width: 900px) {
  .pdp-section-grid:has(> .pdp-section-photo) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "title"
      "photo"
      "body";
    column-gap: 0;
    row-gap: 24px;
  }
  .pdp-section-grid > .pdp-section-photo {
    max-width: 100%;
    /* Source photos are 1122×1402 (4:5 portrait). Match the native aspect
       so faces aren't cropped — was 5/4 landscape, which forced a
       top/bottom crop with object-fit: cover and cut off heads. */
    aspect-ratio: 4 / 5;
    object-position: center top;
  }
}

/* ============================================================
   LANDING — "WHAT YOU CAN RELY ON" AUTHORITY BLOCKS
   ============================================================ */
.rely-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.rely-block {
  background: var(--color-surface);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-md);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rely-block-icon {
  width: 110px;
  height: 110px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.rely-block-icon img {
  display: block;
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  object-fit: contain;
  clip-path: circle(42% at 50% 50%);
}
.rely-block-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-cypress);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.rely-block-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0;
}
.rely-cite {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: super;
  margin-left: 1px;
}
.rely-cite a {
  color: var(--color-moss);
  text-decoration: none;
  font-weight: 600;
}
.rely-cite a:hover { color: var(--color-cypress); text-decoration: underline; }
.references-section {
  padding: 40px 0 24px;
  background: var(--color-warm-cream);
  border-top: 1px solid var(--color-stone);
}
.references-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold, var(--color-moss));
  margin: 0 0 14px;
}
.rely-footnotes {
  margin: 0;
  padding: 0 0 0 4px;
  list-style: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.rely-footnotes li {
  margin: 0 0 10px;
  padding-left: 4px;
}
.rely-footnotes li:last-child { margin-bottom: 0; }
.rely-footnotes sup {
  font-weight: 600;
  color: var(--color-cypress);
  margin-right: 4px;
}
.rely-footnotes em { font-style: italic; }
.rely-footnotes a {
  color: var(--color-moss);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.rely-footnotes a:hover { color: var(--color-cypress); }
@media (max-width: 900px) {
  .rely-grid { grid-template-columns: 1fr; gap: 16px; }
  .rely-block { padding: 24px 20px; }
  .rely-block-icon { width: 92px; height: 92px; margin-bottom: 16px; }
  .rely-block-icon img { width: 92px; height: 92px; }
  .references-section { padding: 28px 0 18px; }
  .rely-footnotes { font-size: 12px; }
}

/* ============================================================
   LANDING — TRUST SIGNAL ROW
   ============================================================ */
.trust-row-section {
  padding: 56px 0 24px;
  background: var(--color-warm-cream);
}
.trust-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
.trust-signal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.trust-signal-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-citron);
  color: var(--color-cypress);
  flex: 0 0 48px;
}
.trust-signal-icon svg { width: 22px; height: 22px; }
.trust-signal-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-cypress);
  line-height: 1.35;
  max-width: 160px;
}
@media (max-width: 900px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .trust-signal-label { max-width: none; }
}

/* ============================================================
   PDP — CLINICAL EVIDENCE PULL QUOTE
   ============================================================ */
.pdp-evidence-section {
  background: var(--color-warm-cream);
  padding: 24px 0 48px;
}
.pdp-evidence {
  max-width: 880px;
  margin: 0 auto;
  padding: 22px 28px;
  background: var(--color-citron);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-gold);
}
.pdp-evidence-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 8px;
}
.pdp-evidence-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-cypress);
  margin: 0;
}
.pdp-evidence-disclaimer {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-moss);
  font-style: italic;
}
@media (max-width: 720px) {
  .pdp-evidence { padding: 18px 22px; }
}

/* ============================================================
   FOOTER — paragraph spacing for split disclaimer
   ============================================================ */
.footer-disclaimer p {
  margin: 0 0 10px;
}
.footer-disclaimer p:last-child {
  margin-bottom: 0;
}

/* ===== Phase 2 (soft launch) — center reduced grids =====
   Active only when <body class="phase-soft-launch">. Remove this block (or the
   class attribute in HTML) when phase-1 hidden cards are restored. */
body.phase-soft-launch .pillars-grid,
body.phase-soft-launch .testimonials-grid {
  grid-template-columns: repeat(2, minmax(0, 380px));
  justify-content: center;
}
body.phase-soft-launch .product-grid {
  grid-template-columns: repeat(2, minmax(0, 290px));
  justify-content: center;
}
body.phase-soft-launch .product-grid--three {
  grid-template-columns: minmax(0, 320px);
}
body.phase-soft-launch .pricing-grid {
  grid-template-columns: repeat(2, minmax(0, 320px));
  justify-content: center;
}
body.phase-soft-launch .pricing-grid--single {
  grid-template-columns: minmax(0, 320px);
}
body.phase-soft-launch .price-tier-icon,
body.phase-soft-launch .price-tier-icon img {
  width: 140px;
  height: 140px;
}
body.phase-soft-launch .price-tier-icon img {
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}
a.price-tier {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
a.price-tier:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 53, 36, 0.08);
  border-color: var(--color-cypress);
}
@media (max-width: 720px) {
  body.phase-soft-launch .pillars-grid,
  body.phase-soft-launch .testimonials-grid,
  body.phase-soft-launch .product-grid,
  body.phase-soft-launch .pricing-grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}
/* ===== End phase 2 layout adjustments ===== */

/* ===== Mobile fixes ===== */
@media (max-width: 900px) {
  /* Why Cypress section — stack columns vertically (was 2-col grid with no mobile rule) */
  .why-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: stretch;
  }
  .why-signals {
    flex-wrap: wrap;
    margin-left: 0;
    gap: 12px 8px;
    justify-content: flex-start;
  }
  .why-signal {
    flex: 0 0 calc(50% - 4px);
  }
  .why-right {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .why-right-photo {
    width: 100%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 4 / 5;
    align-self: center;
  }
  /* Homepage (no hamburger) — compact nav CTA so it doesn't get clipped on narrow viewports */
  #nav:not(:has(.nav-hamburger)) .nav-cta {
    font-size: 13px;
    padding: 10px 16px;
  }
}
@media (max-width: 720px) {
  /* PDP nav: hide trust line on narrow viewports — it's redundant with trust bar elsewhere
     and was wrapping awkwardly next to the logo. */
  .pdp-nav-trust { display: none; }
  /* PDP hero product photo: keep small enough that the vial + product
     title both fit above the fold on Safari mobile with URL bar visible
     (~600px usable on most iPhones). */
  .pdp-hero-product-stage { min-height: 220px !important; }
  .pdp-hero-product-img { max-height: 220px !important; }
}
@media (max-width: 380px) {
  .pdp-hero-product-stage { min-height: 200px !important; }
  .pdp-hero-product-img { max-height: 200px !important; }
}
@media (max-width: 480px) {
  .why-signal { flex: 0 0 100%; }
  .why-signal-icon { width: 64px; height: 64px; }
}
/* ===== End mobile fixes ===== */

/* ===== Legal pages (Privacy Policy, Terms, etc.) ===== */
.legal-body { background: var(--color-warm-cream); }
.legal-hero {
  background: var(--color-warm-cream);
  padding: 64px 0 32px;
  border-bottom: 1px solid var(--color-border-soft);
}
.legal-hero .container { max-width: 880px; }
.legal-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 12px;
}
.legal-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--color-cypress);
  line-height: 1.05;
  margin: 0 0 14px;
}
.legal-hero-meta {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-moss);
  margin: 0;
}
.legal-content-section {
  background: var(--color-surface);
  padding: 64px 0 96px;
}
.legal-content-section .container { max-width: 880px; }
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-moss);
}
.legal-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-cypress);
  line-height: 1.2;
  margin: 56px 0 16px;
  scroll-margin-top: 24px;
}
.legal-content h3 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-cypress);
  margin: 32px 0 12px;
  letter-spacing: -0.005em;
  scroll-margin-top: 24px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin: 0 0 16px; }
.legal-content p strong { color: var(--color-cypress); font-weight: 600; }
.legal-content ul,
.legal-content ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.legal-content li { margin: 0 0 8px; }
.legal-content a {
  color: var(--color-cypress);
  text-decoration: underline;
  text-decoration-color: var(--color-sage);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}
.legal-content a:hover {
  text-decoration-color: var(--color-cypress);
}
.legal-emphasis {
  background: var(--color-citron);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 24px 0 28px;
  font-weight: 500;
  color: var(--color-cypress);
  border-left: 3px solid var(--color-cypress);
}
.legal-toc {
  background: var(--color-warm-cream);
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  padding: 22px 28px 22px 50px;
  margin: 24px 0 32px;
}
.legal-toc li {
  margin: 0 0 6px;
  font-size: 15px;
}
.legal-toc a { text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; text-decoration-color: var(--color-cypress); }
.legal-table-wrap {
  margin: 16px 0 28px;
  overflow-x: auto;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}
.legal-table th,
.legal-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-soft);
}
.legal-table th {
  background: var(--color-warm-cream);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cypress);
}
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table td:first-child {
  font-weight: 500;
  color: var(--color-cypress);
  width: 42%;
}
.legal-contact {
  font-style: normal;
  background: var(--color-warm-cream);
  border-radius: 12px;
  padding: 18px 22px;
  display: inline-block;
  margin-top: 8px;
  line-height: 1.7;
}
@media (max-width: 720px) {
  .legal-hero { padding: 48px 0 28px; }
  .legal-content-section { padding: 40px 0 64px; }
  .legal-toc { padding: 18px 22px 18px 40px; }
  .legal-table th,
  .legal-table td { padding: 12px 14px; font-size: 13px; }
}
/* ===== End legal pages ===== */

.faq-a a {
  color: var(--color-cypress);
  text-decoration: underline;
  text-decoration-color: var(--color-sage);
  text-underline-offset: 3px;
}
.faq-a a:hover { text-decoration-color: var(--color-cypress); }

/* ============================================================
   PHASE 15 — MOBILE OPTIMIZATION
   ============================================================
   Adds: legal-page mobile padding, header shrink-on-scroll,
   bottom-sticky CTA component. Keep at end of file so these
   override earlier rules where intended.
   ============================================================ */

/* Legal pages — add horizontal gutter at mobile so long-form
   legal content doesn't hug the viewport edge. */
@media (max-width: 720px) {
  .legal-hero .container,
  .legal-content-section .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Header shrink-on-scroll
   ----------------------------------------------------------------
   The .is-shrunk class is added/removed by enhancements.js when
   window.scrollY crosses ~200px. In the shrunk state the nav is
   compact and the in-header CTA is hidden — the bottom-sticky CTA
   takes over the persistent-action role. */
nav#nav {
  transition: padding 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
nav#nav .nav-logo,
nav#nav .nav-cta {
  transition: width 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.18s ease,
              transform 0.18s ease;
}
nav#nav.is-shrunk { padding: 8px 0; }
nav#nav.is-shrunk .nav-logo {
  width: 120px;
  height: 36px;
}
@media (max-width: 600px) {
  nav#nav.is-shrunk .nav-logo {
    width: 110px;
    height: 32px;
  }
}
nav#nav.is-shrunk .nav-cta {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  visibility: hidden;
  width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* Bottom-sticky CTA
   ----------------------------------------------------------------
   Markup pattern (see enhancements.js for visibility logic):

     <div class="cta-sticky-bottom" data-sticky-cta hidden>
       <a class="cta-sticky-bottom-btn" href="quiz-glp1.html">
         Start your assessment
       </a>
     </div>

   The bar is hidden by default (the [hidden] attribute). JS removes
   [hidden] once it's wired up, then toggles .is-visible based on:
     - scroll past hero
     - no inline [data-primary-cta] currently in viewport
     - no form input has focus
   Bar always renders below page content; pages get a runtime
   padding-bottom equal to bar height so the footer isn't covered. */
.cta-sticky-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--color-cypress);
  padding: 14px 16px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(20, 53, 36, 0.18);
  box-shadow: 0 -8px 24px rgba(20, 53, 36, 0.10);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.cta-sticky-bottom.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.cta-sticky-bottom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  min-height: 50px;
  padding: 14px 24px;
  background: var(--color-gold);
  color: var(--color-cypress);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  line-height: 1.2;
  transition: background 0.18s ease, transform 0.18s ease;
}
.cta-sticky-bottom-btn:hover,
.cta-sticky-bottom-btn:active {
  background: var(--color-gold-soft);
  transform: translateY(-1px);
}

/* Override the site-wide subtle CTA pulse with a gold-tinted ring so
   the sticky bottom CTA reads against its dark cypress backing strip. */
.cta-sticky-bottom-btn {
  animation: sticky-cta-pulse 2.4s ease-in-out infinite;
}
@keyframes sticky-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246, 244, 238, 0.55); }
  60%      { box-shadow: 0 0 0 8px rgba(246, 244, 238, 0); }
}
.cta-sticky-bottom-btn:hover,
.cta-sticky-bottom-btn:focus-visible { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .cta-sticky-bottom-btn { animation: none; }
}
@media (min-width: 901px) {
  /* Sticky CTA is mobile/tablet only — desktop has the always-visible
     in-header CTA. */
  .cta-sticky-bottom { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-sticky-bottom,
  nav#nav,
  nav#nav .nav-logo,
  nav#nav .nav-cta { transition: none; }
}

/* ============================================================
   PHASE 15 — MOBILE POLISH (round 2)
   ============================================================
   Cleanups requested after first review:
     1. Hide top-nav CTA on mobile entirely (drawer + bottom-sticky
        own the conversion path on phones).
     2. Add a uniform horizontal gutter to every section that previously
        let content hug the viewport edge.
     3. Center headers / subheaders / body in marketing & PDP sections
        on mobile (legal long-form prose stays left-aligned for
        readability).
   ============================================================ */

@media (max-width: 900px) {
  /* (1) No top-nav CTA on mobile — was previously visible */
  .nav-cta { display: none; }
}

@media (max-width: 768px) {
  /* (2) Horizontal gutter for sections that lack their own padding.
     These all use a .container child, but .container has no padding —
     so we apply the buffer at the section level. 20px matches the
     existing `<section> { padding: ... 20px }` mobile rule at ≤600. */
  .cat-hero,
  .pdp-hero,
  .pdp-section,
  .page-section,
  .pdp-final-cta,
  .legal-hero,
  .legal-content-section,
  .testimonials-section,
  .pillars-section,
  .pricing-section,
  .references-section,
  .trust-row-section,
  .pdp-evidence-section {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* The pdp-evidence-section already had its own mobile padding; preserve
     its inner element's reduced padding. */
  .pdp-evidence { padding: 18px 20px; }

  /* (3) Center text in marketing-style sections on mobile.
     Legal long-form prose (.legal-content) intentionally stays left-aligned
     because long copy at narrow column widths reads better left-aligned. */
  .cat-hero-eyebrow,
  .cat-hero-title,
  .cat-hero-sub,
  .cat-hero-meta,
  .pdp-hero-eyebrow,
  .pdp-hero-title,
  .pdp-hero-subtitle,
  .pdp-hero-body,
  .pdp-section-eyebrow,
  .pdp-section-title,
  .pdp-section-body,
  .why-headline,
  .why-body-text,
  .legal-hero-eyebrow,
  .legal-hero-title,
  .legal-hero-meta {
    text-align: center;
  }
  /* Bullet lists should remain left-aligned internally so the bullets stay
     visually anchored. Center the *block* horizontally instead. */
  .pdp-bullet-list {
    display: inline-block;
    text-align: left;
  }
  /* Wrap bullet lists in a centered container alignment by giving their
     parent text-align: center (already done above for .pdp-hero-body and
     .pdp-section-body). The list itself shows up centered as an inline
     block within that. */

  /* The why-section right column was a flex row (photo + paragraphs side
     by side at desktop). On mobile it stacks; with text now centered,
     center the photo too. */
  .why-right-photo {
    align-self: center;
  }

  /* CTAs in centered hero text — make sure inline links/buttons stay
     centered as inline-flex elements. Hero text wrapper is already
     text-align: center on mobile via .hero-text rule. The cat-hero and
     pdp-hero use the same approach now. */
  .cat-hero a.btn,
  .pdp-hero-inner a.btn,
  .pdp-hero-inner button.btn {
    margin-left: auto;
    margin-right: auto;
  }

  /* Re-center pdp-section photos that now sit in a centered text block —
     the photo should hug center-stage, not float left. */
  .pdp-section-photo {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
  }
}

/* ============================================================
   PHASE 15 — MOBILE POLISH (round 3)
   ============================================================
   Refinements after second review:
     1. Compliance disclosures (compounded-medication notice, evidence
        disclaimer, footer disclaimer) stay left-aligned even when
        sitting inside centered parent sections — dense factual text
        reads worse when centered.
     2. Body paragraphs in centered marketing/PDP sections switch from
        text-align:center to text-align:justify so both edges align.
        Headings (eyebrow, title, subtitle, meta) keep center alignment
        because justify on a short single-line element is no-op and on a
        2-line headline it creates broken whitespace.
     3. Display headings break onto a new line when font style changes
        regular→italic (or back). Implemented via `display: block` on
        `<em>` inside h1/h2 at mobile.
   ============================================================ */

@media (max-width: 768px) {
  /* (1) Left-align footer disclaimer only — disclosure-box and
     pdp-evidence are now justified per round-4 feedback (see below). */
  .footer-disclaimer,
  .footer-disclaimer p {
    text-align: left;
  }

  /* (2) Body paragraphs → justified.
     Excludes `.section-label` because that's a short (often single-word)
     eyebrow inside .page-section-header that needs to inherit the
     header's center alignment. Justify on a single word renders as
     left-align (no whitespace to distribute), which broke the
     "Treatments" eyebrow on the weight-loss page. */
  .cat-hero-sub,
  .pdp-hero-body,
  .pdp-section-body,
  .pdp-section-body p,
  .why-body-text,
  .section-lead,
  .page-section-header > p:not(.section-label),
  .disclosure-box-body,
  .pdp-evidence-body,
  .pdp-evidence-disclaimer,
  .rely-block-body {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    /* Reduce visual rivers on narrow viewports */
    word-spacing: -0.01em;
  }

  /* (3) Italic emphasis breaks to its own line in display headings.
     Targets the marketing-style titles only — leaves footer/legal
     prose alone. */
  .hero-headline em,
  .cat-hero-title em,
  .pdp-hero-title em,
  .pdp-section-title em,
  .section-headline em,
  .why-headline em,
  .faq-headline em,
  .pricing-headline em,
  .final-cta-headline em,
  .pdp-final-cta h2 em,
  .page-section-header h2 em {
    display: block;
  }
}

/* ============================================================
   PHASE 15 — MOBILE POLISH (round 4)
   ============================================================
   Per-page review of weight-loss landing on real mobile:
     1. Halve mobile section spacing (cat-hero → next section gap was
        ~152px; now ~80px). Apply to all marketing-style sections.
     2. Center the cat-hero CTA (was inheriting "start" alignment from
        its wrapper div; the parent inherits center now).
     3. Restyle .cat-hero-meta to match .pricing-cta-note (13px moss),
        and let the inline <br> in markup put "100% confidential" on
        its own line.
     4–8. FAQ intro stack (.faq-intro / .faq-eyebrow / .faq-headline /
        .faq-illustration) center on mobile — was left-aligned at ≤860.
   ============================================================ */

@media (max-width: 768px) {
  /* (1) Tighter section spacing on mobile.
     Approximately halves the prior values so adjacent sections feel
     intentionally separated rather than padded apart. */
  section { padding-top: 40px; padding-bottom: 40px; }
  .cat-hero { padding-top: 32px; padding-bottom: 40px; }
  .pdp-hero { padding-top: 32px; padding-bottom: 40px; }
  .pdp-section { padding-top: 40px; padding-bottom: 40px; }
  .page-section { padding-top: 40px; padding-bottom: 40px; }
  .pdp-final-cta { padding-top: 40px; padding-bottom: 40px; }
  .pillars-section { padding-top: 40px; padding-bottom: 40px; }
  .testimonials-section { padding-top: 40px; padding-bottom: 40px; }
  .pricing-section { padding-top: 40px; padding-bottom: 40px; }
  .references-section { padding-top: 32px; padding-bottom: 28px; }
  .trust-row-section { padding-top: 32px; padding-bottom: 16px; }
  .pdp-evidence-section { padding-top: 16px; padding-bottom: 28px; }
  .legal-hero { padding-top: 32px; padding-bottom: 24px; }
  .legal-content-section { padding-top: 32px; padding-bottom: 48px; }

  /* Trim the page-wrap top buffer too (was 92px to clear desktop nav). */
  .page-wrap { padding-top: calc(76px + var(--banner-height, 0px)); }

  /* (2) Center the CTA inside .cat-hero by giving the wrapper text-align:
     center. The button is display: inline-flex, so text-align on its
     parent does center it. */
  .cat-hero,
  .cat-hero-inner,
  .cat-hero-inner > div {
    text-align: center;
  }

  /* (3) cat-hero-meta visual match to .pricing-cta-note */
  .cat-hero-meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-moss);
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.55;
    max-width: none;
    text-align: center;
  }

  /* (4–8) FAQ section header centers on mobile, including illustration. */
  .faq-intro {
    text-align: center;
  }
  .faq-eyebrow,
  .faq-headline {
    text-align: center;
  }
  .faq-illustration {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   PHASE 15 — MOBILE POLISH (round 5)
   ============================================================
   PDP-specific feedback applied globally where the same patterns
   exist on other pages.
   ============================================================ */

/* Mobile-only line break utility — used in markup as
   <br class="break-mobile-only"> to force a break on phones without
   affecting desktop wrapping. */
br.break-mobile-only { display: none; }
@media (max-width: 768px) {
  br.break-mobile-only { display: initial; }
}

/* Desktop-only line break utility — opposite of break-mobile-only.
   Forces a break only above the mobile breakpoint. */
br.break-desktop-only { display: initial; }
@media (max-width: 768px) {
  br.break-desktop-only { display: none; }
}

@media (max-width: 768px) {
  /* (2) Center the first inline CTA on PDP heroes. The text content
     lives in the first child div of .pdp-hero-inner; centering its
     text-align cascades to inline-flex buttons. We avoid setting
     text-align on the buybox aside to preserve its internal layout. */
  .pdp-hero-inner > div:first-child {
    text-align: center;
  }

  /* (4) The buybox disclaimer ("You won't be charged today...") was
     previously text-align: center; switch to justify to match the rest
     of the centered/justified mobile body text rhythm. */
  .pdp-buybox-disclaimer {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-spacing: -0.01em;
  }

  /* (5) PDP step cards (Weeks 1-4 / Weeks 5+ / Ongoing) — body text
     justified. */
  .pdp-step-body {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-spacing: -0.01em;
  }

  /* (6) FAQ answers justified. Questions stay left-aligned (they're
     short headings — justify on a one-line phrase looks broken). */
  .faq-a {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-spacing: -0.01em;
  }

  /* (7) Final-CTA section paragraph ("The 3-minute medical screener…")
     justified. */
  .pdp-final-cta p,
  .final-cta-sub {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-spacing: -0.01em;
  }
}

/* ============================================================
   PHASE 15 — MOBILE POLISH (round 8)
   ============================================================
   Homepage-driven feedback applied globally where applicable.
   ============================================================ */

@media (max-width: 768px) {
  /* (2,4) Center .section-label everywhere on mobile (Why Cypress,
     How it works, Treatments, etc.). The previous .section-label rule
     had no text-align so labels inherited from various left-aligned
     parents. */
  .section-label { text-align: center; }

  /* (2) Why Cypress headline + .why-left wrapper center alignment */
  .why-left { text-align: center; }

  /* (3) Why-signal stack centered horizontally on mobile + each signal
     centers its icon-and-text row internally. */
  .why-signals {
    justify-content: center;
  }
  .why-signal {
    justify-content: center;
  }

  /* (4) How-it-works section header center alignment + the CTA group
     stays full width but the meta text underneath is centered. */
  .how-header,
  .how-header-row {
    text-align: center;
    align-items: center;
  }
  .how-header-cta-meta {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* (7) Final-CTA pill centered on mobile (was text-align: left,
     button justify-self: start). */
  .final-cta-pill {
    text-align: center;
  }
  .final-cta-pill .btn {
    justify-self: center;
  }
  .final-cta-decoration {
    /* Decoration was top-right; on a centered layout it competes —
       keep it but de-emphasize. */
    opacity: 0.6;
  }
}

/* (6) How-it-works cards reflow: icon at top (centered), then num+title
   on one row, then body justified. .how-card-body { display: contents }
   lets its children participate in the parent grid alongside the
   sibling .how-card-num and .how-card-icon. */
@media (max-width: 600px) {
  .how-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 12px;
    padding: 26px 22px 28px;
  }
  .how-card-body { display: contents; }
  .how-card-icon {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
    align-self: auto;
    margin: 0;
  }
  .how-card-icon img { width: 84px; height: 84px; }
  .how-card-num {
    grid-row: 2;
    grid-column: 1;
    align-self: center;
    margin-bottom: 0;
  }
  .how-card-title {
    grid-row: 2;
    grid-column: 2;
    align-self: center;
    margin-bottom: 0;
    line-height: 1.2;
  }
  .how-card-desc {
    grid-row: 3;
    grid-column: 1 / -1;
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-spacing: -0.01em;
  }
}


/* IG/Meta WebView is now handled entirely in enhancements.js via an
   Android intent:// click hijack — no visible fallback markup needed. */


/* ==========================================================================
   PDP Variant B — customer-first (perimenopausal 40-55) hero
   Scoped to .pdp-hero--variant-b so the legacy hero on other PDPs is
   untouched until/unless we propagate this variant to tirz and NAD+.
   ========================================================================== */

/* Hero gets explicit horizontal padding on desktop so content doesn't
   sit flush against the viewport edges at sub-1264px widths (where the
   1200-px container's auto-margins are <32px). Scales 40px–72px. */
.pdp-hero--variant-b {
  padding-left: clamp(40px, 5vw, 72px);
  padding-right: clamp(40px, 5vw, 72px);
}
/* Social-proof patient count. Two placements — one centered above the
   hero grid on desktop, one italic under the H1 on mobile. */
.pdp-hero-patient-count { margin: 0; }
.pdp-hero-patient-count strong { color: var(--color-cypress); font-weight: 600; }
.pdp-hero-patient-count--desktop {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-moss);
  text-align: center;
  margin: 0 0 24px;
}
.pdp-hero-patient-count--mobile {
  display: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--color-gold);
  text-align: center;
  margin: 6px 0 0;
}
.pdp-hero-patient-count--mobile strong {
  font-weight: 600;
  font-style: italic;
}
@media (max-width: 980px) {
  .pdp-hero-patient-count--desktop { display: none; }
  .pdp-hero--variant-b .pdp-hero-patient-count--mobile { display: block; }
}
/* --- Desktop hero grid: text + details stack on left, product center,
       simplified assessment card on right --- */
.pdp-hero--variant-b .pdp-hero-inner--with-product {
  display: grid;
  grid-template-columns: 1.05fr 200px 1fr;
  grid-template-areas:
    "text     product  card"
    "details  product  card";
  grid-template-rows: auto 1fr;
  gap: 32px;
  align-items: start;
}
.pdp-hero--variant-b .pdp-hero-text          { grid-area: text; }
.pdp-hero--variant-b .pdp-hero-details       { grid-area: details; margin: 8px 0 0; }
.pdp-hero--variant-b .pdp-hero-product-stage { grid-area: product; align-self: center; min-height: 320px; }
.pdp-hero--variant-b .pdp-hero-product-img   { max-height: 320px; }
.pdp-hero--variant-b .pdp-assessment-card    { grid-area: card; }
.pdp-hero--variant-b .pdp-mobile-trust-strip { display: none; }
.pdp-hero--variant-b .pdp-hero-trust-chips   { display: none; }

/* Headline + supporting copy */
.pdp-hero--variant-b .pdp-hero-title {
  font-size: clamp(2.05rem, 3.4vw, 2.75rem);
  line-height: 1.08;
  margin-bottom: 18px;
}
.pdp-hero--variant-b .pdp-hero-title em {
  font-style: italic;
  color: var(--color-gold);
  font-weight: 500;
}
.pdp-hero-subhead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-moss);
  margin: 0 0 26px;
}
/* Variant B: the hero-text wrapper splits into -top (eyebrow + headline)
   and -bottom (CTA + microcopy). On desktop they flow naturally inside
   the grid "text" cell; on mobile the wrapper goes display:contents so
   the children can be reordered around chips + product image. */
.pdp-hero--variant-b .pdp-hero-text-bottom { margin-top: 26px; }
.pdp-hero-microcopy {
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.pdp-hero-microcopy-sep {
  color: var(--color-gold);
  font-weight: 600;
  opacity: 0.85;
}

/* Tablet narrowing */
@media (max-width: 1100px) {
  .pdp-hero--variant-b .pdp-hero-inner--with-product {
    grid-template-columns: 1fr 170px 0.95fr;
    gap: 22px;
  }
  .pdp-hero--variant-b .pdp-hero-product-stage { min-height: 280px; }
  .pdp-hero--variant-b .pdp-hero-product-img { max-height: 280px; }
}

/* Mobile: single-column flex stack with explicit order so the
   customer-first headline + CTA appear before the product image. */
@media (max-width: 980px) {
  /* On mobile the legacy hero padding (20px container) is fine — reset
     the desktop horizontal padding so the gold $194 banner can full-bleed. */
  .pdp-hero--variant-b { padding-left: 0; padding-right: 0; }
  .pdp-hero--variant-b .pdp-hero-inner--with-product {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
  }
  .pdp-hero--variant-b .pdp-mobile-trust-strip { display: flex; order: 1; }
  /* Collapse the .pdp-hero-text wrapper so its -top/-bottom children
     become direct flex children of the hero stack, allowing us to slot
     chips + product image between the headline and the CTA on mobile. */
  .pdp-hero--variant-b .pdp-hero-text          { display: contents; }
  .pdp-hero--variant-b .pdp-hero-text-top      { order: 2; text-align: center; }
  /* Tagline is desktop-only; on mobile the H1 product name speaks for itself. */
  .pdp-hero--variant-b .pdp-hero-subtitle      { display: none; }
  .pdp-hero--variant-b .pdp-hero-trust-chips   { display: flex; order: 3; }
  .pdp-hero--variant-b .pdp-hero-product-stage { order: 4; min-height: 0; align-self: stretch; }
  .pdp-hero--variant-b .pdp-hero-text-bottom   { order: 5; text-align: center; }
  .pdp-hero--variant-b .pdp-assessment-card    { order: 6; }
  /* Product detail bullets are desktop-only on Variant B; the START HERE
     card on mobile already covers the key points. */
  .pdp-hero--variant-b .pdp-hero-details       { display: none; }
  .pdp-hero--variant-b .pdp-hero-microcopy     { justify-content: center; }
  /* Center the $80 promo block in the standalone pricing buybox on mobile */
  .pdp-buybox--standalone .pdp-buybox-price,
  .pdp-buybox--standalone .pdp-buybox-period { text-align: center; }
  /* Mobile: keep promo row stacked (price then code). */
  .pdp-buybox--standalone .pdp-buybox-promo-row { display: block; }
  /* Shrink the hero eyebrow so "Compounded · GLP-1 Care for Women 40+"
     fits on a single line at narrow viewports. */
  .pdp-hero--variant-b .pdp-hero-eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }
  /* Reduce hero vial dominance on mobile (~30% smaller than legacy 220px) */
  .pdp-hero--variant-b .pdp-hero-product-stage { min-height: 150px !important; }
  .pdp-hero--variant-b .pdp-hero-product-img   { max-height: 150px !important; }
}
@media (max-width: 380px) {
  .pdp-hero--variant-b .pdp-hero-product-stage { min-height: 135px !important; }
  .pdp-hero--variant-b .pdp-hero-product-img   { max-height: 135px !important; }
}

/* --- Mobile trust strip (replaces former gold $194/mo banner) --- */
.pdp-mobile-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--color-cypress);
  color: var(--color-warm-cream);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}
.pdp-mobile-trust-strip-sep {
  color: var(--color-gold);
  font-weight: 600;
}
@media (max-width: 380px) {
  .pdp-mobile-trust-strip { gap: 6px; padding: 10px 10px; font-size: 11px; letter-spacing: 0.03em; }
}

/* --- Mobile trust chips --- */
.pdp-hero-trust-chips {
  list-style: none;
  padding: 0;
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.pdp-hero-trust-chips li {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-cypress);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 12px;
  line-height: 1;
  white-space: nowrap;
}

/* --- Simplified clinical assessment card (replaces buybox in hero) --- */
.pdp-assessment-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 18px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pdp-assessment-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0;
}
.pdp-assessment-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--color-cypress);
  margin: -6px 0 0;
}
.pdp-assessment-body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-moss);
  margin: 0;
}
.pdp-assessment-reassure {
  border-top: 1px solid var(--color-border-soft);
  padding-top: 14px;
}
.pdp-assessment-reassure-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-cypress);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdp-assessment-reassure-title::before {
  content: '';
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--tint-gold-22, rgba(200,169,110,0.22));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A96E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 9px;
  background-position: center;
  background-repeat: no-repeat;
}
.pdp-assessment-reassure-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-left: 22px;
}
.pdp-assessment-card .btn {
  width: 100%;
  margin-top: 4px;
  min-height: 50px;
}
/* First-order discount highlight inside the assessment card.
   Re-uses the .pdp-buybox-* typography classes; this wrapper just
   provides the gold-tinted backdrop and tighter sizing so the
   discount block fits the smaller card context. */
.pdp-assessment-promo {
  background: rgba(200, 169, 110, 0.10);
  border: 1px solid rgba(200, 169, 110, 0.28);
  border-radius: 14px;
  padding: 16px 16px 14px;
  margin-top: 4px;
  text-align: center;
}
.pdp-assessment-promo .pdp-buybox-savings-eyebrow {
  display: inline-flex;
  margin-bottom: 6px;
}
.pdp-assessment-promo .pdp-buybox-price {
  font-size: 34px;
  line-height: 1;
  margin: 2px 0 0;
}
.pdp-assessment-promo .pdp-buybox-price sup { font-size: 16px; }
.pdp-assessment-promo .pdp-buybox-price-label {
  font-size: 13px;
  margin-left: 6px;
}
.pdp-assessment-promo .pdp-buybox-period {
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.5;
}
.pdp-assessment-promo .pdp-buybox-promo-code {
  margin-top: 10px;
  font-size: 12px;
  padding: 6px 10px;
}
.pdp-assessment-footnote {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.55;
  margin: 0;
}
/* Assessment card content — pricing-card style applied at every viewport
   (was originally mobile-only; desktop now mirrors the mobile layout). */
.pdp-assessment-price-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  /* Equal visible padding above + below the price row — the inner
     padding compensates for the headline's superscript $ raising the
     perceived top edge inside the line-box. */
  margin: 0;
  padding: 6px 0 10px;
}
.pdp-assessment-price-headline {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  color: var(--color-cypress);
  line-height: 1;
  letter-spacing: -0.01em;
}
.pdp-assessment-price-headline sup {
  font-size: 22px;
  vertical-align: super;
  line-height: 0;
  margin-right: 2px;
}
.pdp-assessment-price-period {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-cypress);
  margin-left: 2px;
}
.pdp-assessment-hsa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-moss);
}
.pdp-assessment-check-svg {
  width: 18px;
  height: 18px;
  color: var(--color-gold);
  flex-shrink: 0;
}
.pdp-assessment-bullets-mobile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pdp-assessment-bullets-mobile li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-moss);
}
.pdp-assessment-bullets-mobile li::before {
  content: '';
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: rgba(200, 169, 110, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A96E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 2px;
}
.pdp-assessment-bullets-mobile strong {
  color: var(--color-cypress);
  font-weight: 600;
}
/* Mobile: shrink font + nowrap so each bullet fits on a single line.
   Card and icon paddings are also tightened to claim back horizontal
   space at narrow viewports. */
@media (max-width: 980px) {
  .pdp-assessment-card { padding: 24px 18px; }
  .pdp-assessment-bullets-mobile { gap: 12px; }
  .pdp-assessment-bullets-mobile li {
    gap: 10px;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .pdp-assessment-bullets-mobile li::before {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background-size: 11px;
  }
}
/* START NOW CTA — inherits .btn shape + pulse from base styles. */
.pdp-assessment-cta-mobile {
  display: inline-flex;
  margin-top: 18px;
  gap: 10px;
}
.pdp-assessment-cta-mobile svg {
  width: 20px;
  height: 20px;
  color: var(--color-gold);
  flex-shrink: 0;
}

/* --- Pricing section (formerly inline hero buybox, now below trust bar) --- */
.pdp-pricing-section {
  padding: 56px 0 48px;
  background: var(--color-warm-cream);
}
.pdp-pricing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.pdp-pricing-header { text-align: center; max-width: 600px; }
.pdp-pricing-header .pdp-section-eyebrow { margin: 0 0 8px; }
.pdp-pricing-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.8vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-cypress);
  margin: 0 0 10px;
}
.pdp-pricing-sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-moss);
  margin: 0;
}
.pdp-buybox--standalone {
  position: static;
  top: auto;
  width: 100%;
  max-width: 560px;
}
/* Desktop: 2-col grid putting the buybox on the left and an
   aspirational lifestyle image on the right to balance the card.
   The image renders at its natural aspect (no forced crop) so its
   warm cream backdrop bleeds into the section's cream background
   for a seamless blend rather than a hard card edge. */
.pdp-pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 460px);
  gap: 40px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.pdp-pricing-grid .pdp-buybox--standalone {
  max-width: 520px;
  justify-self: end;
}
.pdp-pricing-aspirational {
  justify-self: start;
  width: 100%;
}
.pdp-pricing-aspirational img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 1100px) {
  .pdp-pricing-grid {
    grid-template-columns: minmax(0, 480px) minmax(0, 380px);
    gap: 36px;
  }
}
/* Below 980px the aspirational image steps aside; the buybox centers
   on its own (per user request, image is desktop-only for now). */
@media (max-width: 980px) {
  .pdp-pricing-grid {
    grid-template-columns: 1fr;
    gap: 0;
    justify-items: center;
  }
  .pdp-pricing-grid .pdp-buybox--standalone { justify-self: center; max-width: 560px; }
  .pdp-pricing-aspirational { display: none; }
}
@media (max-width: 600px) {
  .pdp-pricing-section { padding: 40px 0 32px; }
}
/* Desktop: place "Use code Cypress-80" to the right of the $80 headline. */
@media (min-width: 981px) {
  .pdp-buybox--standalone .pdp-buybox-promo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* Visually center the promo box against the perceived center of the
       $80 numerals (which sit lower in the price box thanks to the sup $). */
    min-height: 56px;
  }
  .pdp-buybox--standalone .pdp-buybox-promo-row .pdp-buybox-price {
    align-self: center;
    line-height: 1;
  }
  .pdp-buybox--standalone .pdp-buybox-promo-row .pdp-buybox-promo-code {
    align-self: center;
  }
  .pdp-buybox--standalone .pdp-buybox-promo-row .pdp-buybox-price {
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .pdp-buybox--standalone .pdp-buybox-promo-row .pdp-buybox-promo-code {
    margin-top: 0;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* --- Sticky bottom CTA: stack microcopy above gold pill --- */
.cta-sticky-bottom {
  flex-direction: column;
  gap: 6px;
}
.cta-sticky-bottom-microcopy {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-warm-cream);
  opacity: 0.78;
  line-height: 1;
}