/*
  Reference build Clinical Performance theme
  Design intent:
  - More contrast and structure than the soft Glacier pass.
  - Health cues come from controlled greens, not pastel washes.
  - Deep evergreen owns action, progress, and emphasis.
  - Dark tones are used to ground the interface without turning the whole site dark.
*/

:root {
  --gp-canvas: #ffffff;
  --gp-surface: #ffffff;
  --gp-surface-strong: #FFFFFF;
  --gp-stone: #F0F2EC;
  --gp-stone-strong: #D3D9CE;
  --gp-ice: #F0F2EC;
  --gp-mint: #D3D9CE;
  --gp-moss: #556454;
  /* Sept 28 accent decision (Bryan): Faded Copper for light-section
     headline accents, kept separate from --gp-teal/--gp-evergreen so those
     stay free for headings, borders and gradients. */
  --accent-light: #556454;
  --gp-teal: #28332D;
  --gp-teal-dark: #28332D;
  --gp-evergreen: #28332D;
  --gp-ink: #28332D;
  --gp-text: #202723;
  --gp-muted: #67716A;
  --gp-line: #D3D9CE;
  --gp-line-strong: #556454;
  /* Semantic error role. The brand has no red anywhere else, so form
     validation had been inventing its own. Promoted here from the branded
     intake preview so every surface reads validation the same way. */
  --gp-error: #a9342c;
  --gp-error-wash: #fff1ef;
  --gp-shadow: 0 20px 50px rgba(40,51,45, 0.16);
  --gp-shadow-soft: 0 10px 26px rgba(40,51,45, 0.1);
  --gp-treatment-max: 1180px;
  --gp-treatment-gutter: clamp(20px, 4rem, 56px);
  --gp-treatment-section-radius: 24px;
  --gp-treatment-card-radius: 18px;
  --gp-treatment-pill: 999px;
  --gp-treatment-panel: color-mix(in srgb, var(--gp-surface) 88%, var(--gp-stone) 12%);
  --gp-treatment-panel-strong: color-mix(in srgb, var(--gp-surface) 72%, var(--gp-ice) 28%);
  --gp-treatment-deep: color-mix(in srgb, var(--gp-ink) 88%, var(--gp-teal-dark) 12%);
  --gp-treatment-shadow-lift: 0 30px 80px rgba(40,51,45, 0.18);
  --gp-treatment-shadow-crisp: 0 14px 34px rgba(40,51,45, 0.11);
  --gp-treatment-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gp-treatment-reveal-duration: 720ms;
  --gp-treatment-delay-1: 90ms;
  --gp-treatment-delay-2: 180ms;
  --gp-treatment-delay-3: 270ms;

  --fern: var(--gp-teal);
  --sage: var(--gp-mint);
  --dark: var(--gp-ink);
  --dark-mid: var(--gp-teal-dark);
  --body: var(--gp-text);
  --muted: var(--gp-muted);
  --white: var(--gp-surface);
  --cream: var(--gp-canvas);
  --sky: var(--gp-surface-strong);
  --stroke: rgba(40,51,45, 0.16);

  --gold: var(--gp-teal);
  --gold-light: var(--gp-moss);
  --gold-bg: rgba(199,200,172, 0.34);
  --navy: var(--gp-ink);
  --navy-mid: var(--gp-teal);
  --cream-dark: var(--gp-stone);
}

html {
  background: #ffffff;
}

body {
  background: #ffffff !important;
  color: var(--gp-text) !important;
}

body,
button,
input,
select,
textarea {
  color: var(--gp-text);
}

h1,
h2,
h3,
h4,
.fixed-line,
.quiz-question,
.quiz-signup-title,
.section-title,
.lead-title,
.product-card-name,
.product-name,
.product-card-title,
.result-card-desc,
.card h2,
.card h3 {
  color: var(--gp-ink) !important;
}

p,
li,
.muted,
.quiz-subtext,
.quiz-note,
.product-card-desc,
.product-desc,
.lead-text,
.page-sub,
.pc-sub,
.hsc-label,
.card p,
.doc-meta,
.tiny {
  color: var(--gp-muted);
}

a {
  color: var(--gp-teal);
}

nav,
.quiz-header,
.mobile-menu {
  background: rgba(255,255,255, 0.94) !important;
  border-color: var(--gp-line) !important;
  box-shadow: 0 10px 30px rgba(40,51,45, 0.08);
}

body > nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;
  height: 64px !important;
  padding: 0 var(--g) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(255,255,255, 0.94) !important;
  border-bottom: 1px solid var(--gp-line) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

body > nav .nav-r {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.nav-hamburger {
  display: none !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

.nav-hamburger span {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--gp-ink) !important;
}

.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 299;
  background: rgba(0,0,0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.open {
  display: block;
  opacity: 1;
}

.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  right: -100% !important;
  z-index: 300 !important;
  width: 85% !important;
  max-width: 360px !important;
  height: 100dvh !important;
  padding: 20px 24px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: -8px 0 32px rgba(0,0,0, 0.15) !important;
}

.mobile-menu.open {
  right: 0 !important;
}

.mobile-menu-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 32px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--gp-line) !important;
}

.mobile-menu-close {
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--gp-ink) !important;
  cursor: pointer !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

.mobile-menu-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.mobile-menu-links a {
  display: block !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--gp-line) !important;
  color: var(--gp-ink) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.mobile-menu-btns {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: auto !important;
}

.logo,
.quiz-logo,
.brand,
.ft-brand,
.footer-wm {
  color: var(--gp-ink) !important;
}

.logo img,
.quiz-logo img {
  filter: none;
}

.nav-links a,
.mobile-menu a,
.quiz-header-link {
  color: var(--gp-muted) !important;
}

.nav-links a:hover,
.mobile-menu a:hover,
.quiz-header-link:hover {
  color: var(--gp-ink) !important;
}

.nav-links a::after {
  background: var(--gp-teal) !important;
}

@media (max-width: 1100px) {
  body > nav,
  .next-home-shell > nav {
    height: 56px !important;
    padding: 0 16px !important;
  }

  body > nav .nav-links,
  .next-home-shell > nav .nav-links {
    display: none !important;
  }

  body > nav .nav-cta-desktop,
  .next-home-shell > nav .nav-cta-desktop {
    display: none !important;
  }

  body > nav .nav-hamburger,
  .next-home-shell > nav .nav-hamburger {
    display: flex !important;
  }
}

.btn-navy,
.quiz-continue,
.next-btn,
.products-continue,
button[type="submit"],
.submit-btn,
.primary-btn,
.btn-primary {
  background: var(--gp-teal-dark) !important;
  border: 1px solid rgba(85,100,84, 0.34) !important;
  color: var(--gp-surface) !important;
  box-shadow: none !important;
}

.btn-navy:hover,
.quiz-continue:hover,
.next-btn:hover,
.products-continue:hover,
button[type="submit"]:hover,
.submit-btn:hover,
.primary-btn:hover,
.btn-primary:hover {
  background: var(--gp-ink) !important;
  box-shadow: none !important;
}

.btn-ghost,
.btn-o,
.secondary-btn,
.btn-secondary {
  background: rgba(255,255,255, 0.88) !important;
  border: 1px solid var(--gp-line-strong) !important;
  color: var(--gp-ink) !important;
  box-shadow: 0 8px 20px rgba(40,51,45, 0.07);
}

.btn-ghost:hover,
.btn-o:hover,
.secondary-btn:hover,
.btn-secondary:hover {
  border-color: rgba(85,100,84, 0.46) !important;
  background: var(--gp-stone) !important;
}

#hero {
  background: #ffffff !important;
}

.rotating span,
.fixed-line em,
.c-headline em,
.cc-title em,
.lead-title em,
.hsc-start .hsc-name em {
  color: var(--gp-teal) !important;
}

/* Hero product-card (.pc) base styling.
   NOTE (consolidation 2026-06): the duplicate .pc / .pc-a / .pc-b / .pc::before /
   .pc-title|label|sub|price and .pc-arrow svg blocks that used to sit here were
   removed because every property they set is overridden later at equal-or-higher
   specificity with !important:
     - .pc border/outline/box-shadow -> Contrast pass (.pc ~L790) + identity pass box-shadow (~L1325)
     - .pc-a / .pc-b / .pc::before backgrounds -> identity pass (~L1313)
     - .pc-title|label|sub|price color/text-shadow -> Contrast pass (~L815)
     - .pc-arrow svg stroke -> later identical rule (~L1044)
   Only the still-winning .pc-arrow rule is kept. */
.pc-arrow {
  background: rgba(255,255,255, 0.82) !important;
  border-color: rgba(85,100,84, 0.24) !important;
}

/* NOTE (consolidation 2026-06): three superseded "failed color pass" mobile
   @media (max-width:640px) blocks were removed here. Their #consult color
   declarations never won — the later non-media rules ".consult hierarchy"
   (~L1010) and the identity pass (~L1314/L1319) override every consult color
   at all widths (verified by computed-style: c-eyebrow resolves to
   var(--gp-mint), c-headline to #F0F2EC, cc-sub to rgba(240,242,236,.78)).
   Their #trust .trust-grid / nth-child(3) rules were byte-identical duplicates
   of the surviving copy kept below (~L950). */

/* Mobile consult section: match the other condition sections. */
@media (max-width: 640px) {
  #consult.cond {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    padding-bottom: 0 !important;
  }

  #consult .cond-text {
    display: contents !important;
  }

  #consult .c-eyebrow {
    order: 1 !important;
    padding: 24px 16px 0 !important;
    position: relative !important;
    z-index: 6 !important;
  }

  #consult .c-headline {
    order: 1 !important;
    padding: 0 16px !important;
    font-size: clamp(32px, 9vw, 48px) !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 6 !important;
  }

  #consult .c-btns {
    order: 3 !important;
    position: relative !important;
    z-index: 7 !important;
    margin-top: -56px !important;
    margin-bottom: 10px !important;
    padding: 0 16px !important;
    gap: 8px !important;
    display: flex !important;
    width: 100% !important;
  }

  #consult .btn-w,
  #consult .btn-o {
    flex: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  #consult .consult-img-wrap {
    order: 2 !important;
    position: relative !important;
    width: 100% !important;
    height: 55vh !important;
    min-height: auto !important;
    overflow: hidden !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, black 55%, transparent 100%) !important;
  }

  #consult .consult-img-wrap-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
    left: 0 !important;
    bottom: 0 !important;
    display: block !important;
    opacity: 1 !important;
    filter: none !important;
  }

  #consult .consult-img-wrap::before {
    display: none !important;
  }

  #consult .cond-cards {
    order: 4 !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 4px 16px 16px !important;
    z-index: 6 !important;
  }

  #consult .cc {
    padding: 16px 18px !important;
  }

  #consult .cond-path {
    display: none !important;
  }

  #consult .cond-bg {
    order: 0 !important;
    z-index: 0 !important;
  }
}

.hsc {
  background: rgba(255,255,255, 0.9) !important;
  border: 1px solid var(--gp-line) !important;
  box-shadow: 0 8px 22px rgba(40,51,45, 0.07);
}

.hsc:hover,
.hsc-testosterone:hover,
.hsc-hair:hover,
.hsc-sexual:hover {
  background: linear-gradient(135deg, #28332D, #28332D) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(85,100,84, 0.2) !important;
}

.hsc:hover .hsc-label,
.hsc:hover .hsc-name,
.hsc-testosterone:hover .hsc-label,
.hsc-testosterone:hover .hsc-name,
.hsc-hair:hover .hsc-label,
.hsc-hair:hover .hsc-name,
.hsc-sexual:hover .hsc-label,
.hsc-sexual:hover .hsc-name {
  color: #ffffff !important;
}

.hsc-arrow,
.hsc:hover .hsc-arrow {
  stroke: var(--gp-teal) !important;
}

.hsc:hover .hsc-arrow {
  stroke: #ffffff !important;
}

section,
.sec,
.lead,
.legal-hero,
.policy-hero,
.quiz-page {
  background-color: transparent;
}

.card,
.card-in,
.toc,
.doc-card,
.service-card,
.product-card,
.result-card,
.quote-card,
.metric,
.trust-card,
.quiz-card,
.plan-card,
.path-card,
.placeholder-inner {
  background: rgba(255,255,255, 0.92) !important;
  border-color: var(--gp-line) !important;
  box-shadow: var(--gp-shadow-soft) !important;
}

.quiz-page {
  background:
    linear-gradient(180deg, var(--gp-canvas) 0%, var(--gp-stone) 100%) !important;
}

.quiz-progress-bar,
.progress,
.progress-bar {
  background: var(--gp-stone-strong) !important;
}

.quiz-progress-fill,
.progress-fill,
.progress div {
  background: var(--gp-teal-dark) !important;
}

.quiz-avatar {
  box-shadow: 0 0 0 4px var(--gp-stone), 0 8px 22px rgba(85,100,84, 0.18) !important;
}

.quiz-option,
.choice,
.answer-option {
  background: rgba(255,255,255, 0.96) !important;
  border-color: var(--gp-line) !important;
  color: var(--gp-text) !important;
  box-shadow: 0 6px 16px rgba(40,51,45, 0.07) !important;
}

/* 2026-10-02 CTA layout hotfix: a <button> centers wrapped text by default; option labels start on the tile's left padding whether they wrap or not. */
.quiz-option { text-align: left; }

.quiz-option:hover,
.choice:hover,
.answer-option:hover {
  border-color: rgba(85,100,84, 0.42) !important;
  background: #F0F2EC !important;
  box-shadow: 0 10px 26px rgba(85,100,84, 0.13) !important;
}

.quiz-option.selected,
.choice.selected,
.answer-option.selected,
.product-card.selected {
  background:
    linear-gradient(90deg, rgba(85,100,84, 0.08), rgba(199,200,172, 0.34)),
    var(--gp-surface) !important;
  border-color: var(--gp-teal) !important;
  box-shadow:
    inset 4px 0 0 var(--gp-teal),
    0 0 0 1px rgba(85,100,84, 0.16),
    0 12px 30px rgba(85,100,84, 0.16) !important;
}

.quiz-option.selected::after,
.product-check,
.check,
.selection-dot {
  background: var(--gp-teal-dark) !important;
  border-color: var(--gp-teal-dark) !important;
}

input,
select,
textarea {
  background: rgba(255,255,255, 0.96) !important;
  border-color: var(--gp-line) !important;
  color: var(--gp-ink) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gp-teal) !important;
  box-shadow: 0 0 0 4px rgba(199,200,172, 0.36) !important;
  outline: none !important;
}

.product-card {
  color: var(--gp-text) !important;
}

.product-card:hover,
.result-card:hover,
.card:hover {
  border-color: rgba(85,100,84, 0.34) !important;
  box-shadow: var(--gp-shadow) !important;
}

.product-card-badge,
.product-badge,
.badge,
.pill,
.tag,
.trust-label {
  background: #F0F2EC !important;
  color: var(--gp-teal-dark) !important;
  border-color: rgba(85,100,84, 0.16) !important;
}

.product-card.highlighted,
.recommended,
.featured {
  border-color: rgba(85,100,84, 0.48) !important;
  background: linear-gradient(180deg, #ffffff, #F0F2EC) !important;
}

.stat,
.trust-num,
.metric b,
.stat-number {
  color: var(--gp-teal) !important;
}

.trust {
  background: linear-gradient(180deg, #28332D, #28332D) !important;
  color: #fff5f1 !important;
}

.footer,
#footer,
footer,
.site-footer {
  background:
    linear-gradient(145deg, #28332D 0%, #28332D 56%, #28332D 100%) !important;
  color: #FFFFFF !important;
}

.footer p,
#footer p,
footer p,
.site-footer p,
.footer li,
#footer li,
footer li,
.site-footer li {
  color: rgba(240,242,236, 0.78) !important;
}

.footer h2,
.footer h3,
#footer h2,
#footer h3,
footer h2,
footer h3,
.site-footer h2,
.site-footer h3,
.ft-brand {
  color: #ffffff !important;
}

.ft-wm,
.ft-wm-text {
  color: rgba(255,255,255, 0.08) !important;
}

.ft-link,
.footer a,
#footer a,
footer a {
  color: rgba(240,242,236, 0.8) !important;
}

.ft-link:hover,
.footer a:hover,
#footer a:hover,
footer a:hover {
  color: #ffffff !important;
}

#footer::before {
  opacity: 1 !important;
}

.doc-av,
.tc-av,
.icon,
.service-icon {
  background: linear-gradient(135deg, var(--gp-teal-dark), var(--gp-teal)) !important;
  color: var(--gp-surface) !important;
}

hr,
.divider {
  border-color: var(--gp-line) !important;
}

::selection {
  background: var(--gp-teal);
  color: var(--gp-surface);
}

.quiz-content,
.quiz-step,
.quiz-step.active {
  opacity: 1 !important;
}

.quiz-question,
.quiz-signup-title,
.quiz-results-title,
.product-selection-title {
  color: var(--gp-ink) !important;
  opacity: 1 !important;
}

.quiz-option,
.quiz-option span,
.quiz-option div {
  color: var(--gp-text) !important;
  opacity: 1 !important;
}

.quiz-option:not(.selected) {
  background: rgba(255,255,255, 0.98) !important;
}

.quiz-header {
  box-shadow: 0 12px 34px rgba(40,51,45, 0.1) !important;
}

.legal-hero,
.policy-hero,
.doc-hero {
  background:
    linear-gradient(106deg, var(--gp-stone) 0%, #FFFFFF 54%, #D3D9CE 100%) !important;
  color: var(--gp-text) !important;
  border-bottom: 1px solid var(--gp-line-strong);
}

.legal-hero::before,
.policy-hero::before,
.doc-hero::before {
  opacity: 0.16 !important;
  filter: none !important;
}

.legal-hero .crumb,
.legal-hero .crumb a,
.policy-hero .crumb,
.policy-hero .crumb a,
.doc-hero .crumb,
.doc-hero .crumb a {
  color: var(--gp-muted) !important;
  border-color: rgba(85,100,84, 0.32) !important;
}

.legal-title,
.policy-title,
.doc-title {
  color: var(--gp-ink) !important;
}

.legal-sub,
.policy-sub,
.doc-sub,
.legal-hero .legal-sub,
.legal-hero .legal-sub[style],
.policy-hero .policy-sub,
.policy-hero .policy-sub[style],
.doc-hero .doc-sub,
.doc-hero .doc-sub[style] {
  color: var(--gp-text) !important;
}

.legal-meta .pill,
.legal-hero .pill,
.policy-hero .pill,
.doc-hero .pill {
  background: rgba(255,255,255, 0.82) !important;
  border: 1px solid rgba(85,100,84, 0.24) !important;
  color: var(--gp-text) !important;
}

.legal-meta .pill strong,
.legal-hero .pill strong,
.policy-hero .pill strong,
.doc-hero .pill strong {
  color: var(--gp-teal-dark) !important;
}

.icon.on-dark,
.legal-hero svg,
.policy-hero svg,
.doc-hero svg {
  color: var(--gp-teal-dark) !important;
  stroke: var(--gp-teal-dark) !important;
}

@media (max-width: 720px) {
  .pc-title,
  .pc-label,
  .pc-sub,
  .pc-price {
    color: var(--gp-ink) !important;
  }
}

/* Contrast pass: white canvas, original hero structure, borderless hero cards. */
body {
  background: #ffffff !important;
}

#hero {
  background: #ffffff !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.pc {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 18px 42px rgba(40,51,45, 0.16) !important;
}

/* NOTE (consolidation 2026-06): dead .pc-a / .pc-b background rules removed here
   — overridden by the identity-pass .pc-a / .pc-b gradients (~L1170/L1176).
   .pc::before below has no later override, so it stays. */
.pc::before {
  background:
    linear-gradient(90deg, rgba(40,51,45, 0.48) 0%, rgba(40,51,45, 0.2) 38%, transparent 66%),
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255, 0.16) 0%, rgba(255,255,255, 0.04) 50%, transparent 75%) !important;
}

.pc-title,
.pc-label,
.pc-sub,
.pc-price {
  color: #ffffff !important;
  text-shadow: 0 1px 18px rgba(40,51,45, 0.28) !important;
}

.pc-label {
  color: rgba(255,255,255, 0.72) !important;
}

.pc-sub {
  color: rgba(255,255,255, 0.95) !important;
}

.pc-price {
  color: rgba(255,255,255, 0.92) !important;
}

.pc-sub,
.pc-price {
  text-shadow: 0 1px 4px rgba(0,0,0, 0.35) !important;
}

.hsc {
  border-color: #D3D9CE !important;
  box-shadow: 0 10px 24px rgba(40,51,45, 0.09) !important;
}

.card,
.card-in,
.toc,
.doc-card,
.service-card,
.product-card,
.result-card,
.quote-card,
.metric,
.trust-card,
.quiz-card,
.plan-card,
.path-card,
.placeholder-inner {
  border-color: #D3D9CE !important;
}

.quiz-page {
  background: linear-gradient(180deg, #ffffff 0%, #F0F2EC 100%) !important;
}

.quiz-progress-bar,
.progress,
.progress-bar {
  background: #D3D9CE !important;
}

.quiz-option,
.choice,
.answer-option {
  border-color: #D3D9CE !important;
  box-shadow: 0 7px 18px rgba(40,51,45, 0.1) !important;
}

.quiz-option:not(.selected) {
  background: #ffffff !important;
}

.quiz-option:hover,
.choice:hover,
.answer-option:hover {
  background: #F0F2EC !important;
  border-color: var(--gp-teal) !important;
}

.legal-hero,
.policy-hero,
.doc-hero {
  background:
    linear-gradient(106deg, #FFFFFF 0%, #F0F2EC 54%, #D3D9CE 100%) !important;
}

#trust .trust-card {
  background: linear-gradient(180deg, rgba(85,100,84, 0.94), rgba(40,51,45, 0.94)) !important;
  border-color: rgba(255,255,255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 44px rgba(40,51,45, 0.22) !important;
}

#trust .trust-number,
#trust .trust-number span {
  color: #ffffff !important;
}

#trust .trust-label {
  background: transparent !important;
  color: var(--gp-mint) !important;
}

#trust .trust-desc {
  color: rgba(255,255,255, 0.72) !important;
}

@media (max-width: 720px) {
  #hero {
    background: #ffffff !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .pc {
    border: 0 !important;
    outline: 0 !important;
  }

  .pc-title,
  .pc-label,
  .pc-sub,
  .pc-price {
    color: #ffffff !important;
  }
}

/* Color correction: no blue CTA system; colored sections use white copy. */
:root {
  --navy-mid: var(--gp-teal);
}

.btn-navy,
.quiz-continue,
.next-btn,
.products-continue,
button[type="submit"],
.submit-btn,
.primary-btn,
.btn-primary,
.btn-gold,
.hims-btn-solid,
.himscard-btn {
  background: var(--gp-teal-dark) !important;
  border-color: var(--gp-teal-dark) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn-navy:hover,
.quiz-continue:hover,
.next-btn:hover,
.products-continue:hover,
button[type="submit"]:hover,
.submit-btn:hover,
.primary-btn:hover,
.btn-primary:hover,
.btn-gold:hover,
.hims-btn-solid:hover,
.himscard-btn:hover {
  background: var(--gp-ink) !important;
  border-color: var(--gp-ink) !important;
}

.cond .btn-w,
.bg-longevity .btn-w {
  background: #ffffff !important;
  border: 0 !important;
  color: var(--gp-ink) !important;
  box-shadow: 0 10px 28px rgba(40,51,45, 0.18) !important;
}

.cond .btn-w:hover,
.bg-longevity .btn-w:hover {
  background: #F0F2EC !important;
  color: var(--gp-ink) !important;
}

.cond .btn-o,
.bg-longevity .btn-o {
  background: transparent !important;
  border-color: rgba(255,255,255, 0.64) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.cond .btn-o:hover,
.bg-longevity .btn-o:hover {
  background: rgba(255,255,255, 0.12) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.cond .c-eyebrow,
.cond .c-headline,
.cond .c-headline em,
.cond .cc-title,
.cond .cc-title em,
.cond .cc-sub,
.cond .cc-cta,
.cond p,
.cond .muted,
#trust .eyebrow,
#trust .sec-title,
#trust .sec-title em,
#trust .sec-sub,
#trust .trust-label,
#trust .trust-desc,
.lead-form-card h3,
.lead-form-card p,
.lead-disc,
.lead-disc a,
#footer .ft-tag,
#footer .ft-col-title,
#footer .ft-links a,
#footer .ft-contact,
#footer .ft-contact a,
#footer .ft-legal,
#footer .ft-disc {
  color: #ffffff !important;
}

#footer .ft-tag,
#footer .ft-contact,
#footer .ft-contact a {
  color: rgba(240,242,236, 0.9) !important;
}

#footer .ft-col-title,
#footer .ft-links a {
  color: rgba(240,242,236, 0.84) !important;
}

#footer .ft-legal,
#footer .ft-disc {
  color: rgba(240,242,236, 0.72) !important;
}

.cond .cc {
  background: rgba(255,255,255, 0.15) !important;
  border-color: rgba(255,255,255, 0.28) !important;
}

.quiz-progress-fill,
.progress-fill,
.progress div {
  background: var(--gp-teal-dark) !important;
}

/* NOTE (consolidation 2026-06): dead .pc-b background rule removed here —
   overridden by the identity-pass .pc-b gradient (~L1167). */
.pc-arrow svg {
  stroke: var(--gp-teal-dark) !important;
}

/* Mobile trust-grid layout (surviving copy — winning #trust grid rule for
   max-width:640px). The consult-color declarations that used to accompany this
   block, plus an "Absolute final mobile consult override" block, were removed
   in the 2026-06 consolidation: dead, overridden by the non-media consult-color
   rules below and the identity pass. */
@media (max-width: 640px) {
  #trust .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #trust .trust-card:nth-child(3) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc((100% - 10px) / 2) !important;
    max-width: 190px !important;
  }
}

/* Consult section hierarchy across all viewports.
   NOTE (consolidation 2026-06): the #C7C8AC group (c-eyebrow / c-headline em /
   cc-title em / cc-cta) and the #C7C8AC cc-sub rule that used to live here were
   removed — both are overridden by the identity-pass #consult color rules below
   (var(--gp-mint) and rgba(240,242,236,.78)). c-headline and cc-title remain;
   they are the live winners (id specificity beats the later .cond rules). */
#consult .c-headline {
  color: #F0F2EC !important;
}

#consult .cc-title {
  color: #ffffff !important;
}

/* Hero Start Here card must stay dark so all copy is readable. */
.hsc-start {
  background: linear-gradient(135deg, #28332D, #28332D) !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(85,100,84, 0.18) !important;
  min-height: 104px !important;
}

.hsc-start:hover,
.hsc-start:focus-visible,
.hsc-start:active {
  background: #ffffff !important;
  border: 1px solid rgba(85,100,84, 0.28) !important;
  box-shadow: 0 16px 32px rgba(40,51,45, 0.16) !important;
}

.hsc-start:focus-visible {
  outline: 2px solid rgba(211,217,206, 0.72) !important;
  outline-offset: 3px !important;
}

.hsc-start .hsc-label {
  color: rgba(255,255,255, 0.74) !important;
}

.hsc-start .hsc-name {
  color: #ffffff !important;
}

.hsc-start .hsc-name em {
  color: #C7C8AC !important;
}

.hsc-start:hover .hsc-label,
.hsc-start:focus-visible .hsc-label,
.hsc-start:active .hsc-label {
  color: var(--gp-muted) !important;
}

.hsc-start:hover .hsc-name,
.hsc-start:focus-visible .hsc-name,
.hsc-start:active .hsc-name {
  color: var(--gp-ink) !important;
}

.hsc-start:hover .hsc-name em,
.hsc-start:focus-visible .hsc-name em,
.hsc-start:active .hsc-name em {
  color: var(--gp-teal) !important;
}

.hsc-start .hsc-plus {
  background: rgba(255,255,255, 0.18) !important;
  border-color: rgba(255,255,255, 0.36) !important;
  color: #ffffff !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.hsc-start:hover .hsc-plus,
.hsc-start:focus-visible .hsc-plus,
.hsc-start:active .hsc-plus {
  background: #28332D !important;
  border-color: #28332D !important;
  color: #ffffff !important;
  transform: rotate(90deg) scale(1.04) !important;
}

@media (max-width: 640px) {
  .hsc-start {
    min-height: 82px !important;
    align-items: center !important;
    padding: 18px 16px !important;
  }

  .hsc-start .hsc-text {
    gap: 1px !important;
  }

  .hsc-start .hsc-name {
    line-height: 1.2 !important;
  }
}

body {
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 28%, #FFFFFF 100%) !important;
}

.logo,
.quiz-logo,
.ft-brand {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  text-decoration: none !important;
}

/* Real EvolvdRX wordmark: swap the legacy logo.png img content for the
   brand SVG per surface. Header/quiz use the dark wordmark on the light
   header; the footer uses the white wordmark on its dark background. */
.logo img,
.quiz-logo img {
  display: inline-block !important;
  height: 32px !important;
  width: auto !important;
}

nav,
.mobile-menu,
.quiz-header {
  background: rgba(255,255,255, 0.96) !important;
  border-bottom: 1px solid rgba(40,51,45, 0.18) !important;
}

.btn-navy,
.btn-gold,
.hims-btn-solid,
.btn-w,
.quiz-continue,
.next-btn,
.products-continue,
button[type="submit"] {
  background: var(--gp-teal-dark) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.btn-navy:hover,
.btn-gold:hover,
.hims-btn-solid:hover,
.btn-w:hover,
.quiz-continue:hover,
.next-btn:hover,
.products-continue:hover,
button[type="submit"]:hover {
  background: var(--gp-ink) !important;
}

.rotating span,
.fixed-line em,
.eyebrow,
.lead-eyebrow {
  color: var(--gp-teal) !important;
}

/* Sept 28 accent decision: .sec-title em / .lead-title em / .faq-section-label
   were forced to var(--gp-teal), the same Evergreen the heading itself uses,
   so the two-tone accent disappeared on light sections such as #faq. */
.sec-title em,
.lead-title em,
.faq-section-label {
  color: var(--accent-light) !important;
}

/* Sept 29 fix: the sitewide rule above beats the non-important
   `.sys-dark .sec-title em { color: var(--sage) }` added in c515ab3
   (app/legacy-home.css / app/legacy-home-style.ts) for the dark #system
   band, so "works." rendered Faded Copper instead of Khaki Beige. Dark
   sections keep Khaki Beige per the Sept 28 accent decision; scope this
   override to .sys-dark only so the light-section rule above is unchanged
   for #hormone-health and #faq. */
.sys-dark .sec-title em {
  color: var(--gp-mint) !important;
}

.pc-a {
  background:
    radial-gradient(circle at 62% 38%, rgba(211,217,206, 0.45), transparent 32rem),
    linear-gradient(135deg, #28332D 0%, #28332D 58%, #C7C8AC 100%) !important;
}

.pc-b {
  background:
    radial-gradient(circle at 62% 38%, rgba(255,255,255, 0.16), transparent 32rem),
    linear-gradient(135deg, #28332D 0%, #28332D 56%, #C7C8AC 100%) !important;
}

.pc {
  box-shadow: 0 20px 48px rgba(40,51,45, 0.22) !important;
}

.hsc:not(.hsc-start) {
  background: #f7fbf8 !important;
  border: 1px solid rgba(40,51,45, 0.2) !important;
}

.hsc:not(.hsc-start):hover {
  background: linear-gradient(135deg, var(--gp-teal), var(--gp-teal-dark)) !important;
  border-color: transparent !important;
}

.hsc-start {
  background: linear-gradient(135deg, var(--gp-teal), var(--gp-teal-dark)) !important;
}

.hsc-start:hover,
.hsc-start:focus-visible,
.hsc-start:active {
  background: #ffffff !important;
  border: 1px solid rgba(40,51,45, 0.28) !important;
}

.hims-bg-grad {
  background:
    radial-gradient(circle at 72% 34%, rgba(211,217,206, 0.54), transparent 28rem),
    linear-gradient(135deg, #ffffff 0%, #FFFFFF 55%, #FFFFFF 100%) !important;
}

#hormones .cond-bg-fill,
#hormones.hormone-grayblue .cond-bg-fill,
#menopause .cond-bg-fill,
#menopause.hormone-grayblue .cond-bg-fill {
  background:
    radial-gradient(circle at 70% 36%, rgba(211,217,206, 0.28), transparent 28rem),
    linear-gradient(135deg, #28332D 0%, #28332D 52%, #28332D 100%) !important;
}

#longevity .cond-bg-fill,
#longevity.bg-longevity .cond-bg-fill,
.bg-longevity .cond-bg-fill {
  background:
    radial-gradient(circle at 70% 36%, rgba(255,255,255, 0.18), transparent 26rem),
    linear-gradient(135deg, #28332D 0%, #556454 55%, #C7C8AC 100%) !important;
}

#hair .cond-bg-fill,
#hair.bg-sage .cond-bg-fill {
  background:
    radial-gradient(circle at 70% 36%, rgba(211,217,206, 0.2), transparent 26rem),
    linear-gradient(135deg, #28332D 0%, #28332D 52%, #C7C8AC 100%) !important;
}

#sexual-health .cond-bg-fill,
#sexual-health.bg-warm .cond-bg-fill {
  background:
    radial-gradient(circle at 70% 36%, rgba(255,255,255, 0.14), transparent 26rem),
    linear-gradient(135deg, #28332D 0%, #6a705e 54%, #C7C8AC 100%) !important;
}

#consult .cond-bg-fill,
.bg-blue .cond-bg-fill {
  background:
    radial-gradient(circle at 70% 36%, rgba(211,217,206, 0.24), transparent 28rem),
    linear-gradient(135deg, #28332D 0%, #28332D 58%, #28332D 100%) !important;
}

.cond {
  box-shadow: 0 22px 56px rgba(40,51,45, 0.16) !important;
}

.cond .c-eyebrow,
.cond .c-headline,
.cond .c-headline em,
.cond .cc-title,
.cond .cc-title em {
  color: #ffffff !important;
}

.cond .c-headline em,
.cond .cc-title em,
.cond .c-eyebrow,
.cond .cc-cta,
#consult .c-eyebrow,
#consult .c-headline em,
#consult .cc-title em,
#consult .cc-cta {
  color: var(--gp-mint) !important;
}

.cond .cc-sub,
#consult .cc-sub {
  color: rgba(240,242,236, 0.78) !important;
}

#trust {
  background: #ffffff !important;
  color: var(--gp-text) !important;
}

#trust .eyebrow {
  color: var(--gp-teal) !important;
}

#trust .sec-title {
  color: var(--gp-ink) !important;
}

#trust .sec-title em {
  color: var(--accent-light) !important;
}

#trust .sec-sub {
  color: var(--gp-muted) !important;
}

#trust .trust-card {
  background: linear-gradient(180deg, #28332D, #28332D) !important;
  border-color: rgba(255,255,255, 0.16) !important;
  box-shadow: 0 18px 42px rgba(40,51,45, 0.22) !important;
  color: #ffffff !important;
}

#trust .trust-number,
#trust .trust-number span {
  color: #ffffff !important;
}

#trust .trust-label {
  background: transparent !important;
  color: var(--gp-mint) !important;
}

#trust .trust-desc {
  color: rgba(240,242,236, 0.78) !important;
}

#transformations {
  background: #FFFFFF !important;
}

.lead {
  background: linear-gradient(135deg, #28332D, #28332D) !important;
}

.treatment-card h3 {
  color: #ffffff !important;
}

/* Shared universal footer for legacy static pages.
   Keep this aligned with app/site-chrome-style.ts and SiteFooter. */
#footer {
  width: 100%;
  margin: 16px 0 0;
  border-radius: var(--r-section);
  overflow: hidden;
  background:
    linear-gradient(145deg, #28332D 0%, #28332D 56%, #28332D 100%);
  position: relative;
  isolation: isolate;
  color: #ffffff;
  padding: 0;
}

#footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(240,242,236, 0.08), rgba(240,242,236, 0) 34%, rgba(40,51,45, 0.26) 100%),
    linear-gradient(90deg, rgba(40,51,45, 0.28), rgba(40,51,45, 0) 48%, rgba(40,51,45, 0.18));
}

#footer .ft-wm {
  text-align: center;
  padding: clamp(40px, 5vw, 60px) var(--g) 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#footer .ft-wm-text {
  font-family: "Geist", sans-serif;
  font-size: 14vw;
  font-weight: 600;
  color: rgba(240,242,236, 0.11);
  letter-spacing: -0.04em;
  line-height: 0.85;
  user-select: none;
  text-align: center;
}

#footer .ft-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 36px var(--g) clamp(32px, 4vw, 48px);
  display: grid;
  /* 2026-10-02 type-pass: minmax floor on the Support column so it can
     hold "Support details coming soon" on one line at 1920 and 1147
     without the other columns losing more than a few px. */
  grid-template-columns: 1.4fr 1fr 1.1fr 1.1fr minmax(220px, 1.2fr);
  gap: 32px;
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(240,242,236, 0.16);
}

#footer .ft-tag {
  font-size: 13px;
  color: rgba(255,255,255, 0.76);
  line-height: 1.6;
  font-weight: 450;
  max-width: 220px;
}

#footer .ft-col-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255, 0.78);
  margin-bottom: 14px;
}

#footer .ft-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  margin: 0;
}

#footer .ft-links a {
  font-size: 13px;
  color: rgba(255,255,255, 0.84);
  text-decoration: none;
  transition: color 0.2s;
  font-weight: 500;
  position: relative;
  display: inline-block;
}

#footer .ft-links a::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(211,217,206, 0.86);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

#footer .ft-links a:hover {
  color: #ffffff;
}

#footer .ft-links a:hover::after {
  transform: scaleX(1);
}

#footer .ft-contact {
  font-size: 13px;
  color: rgba(255,255,255, 0.76);
  line-height: 1.7;
  font-weight: 450;
}

#footer .ft-contact a {
  color: rgba(255,255,255, 0.88);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
  /* 2026-10-02 type-pass: normal, not break-all - break-all let the
     browser split "soon" mid-word ("soo"/"n") once weight 500 widened
     this link; normal only wraps at the space. */
  word-break: normal;
}

#footer .ft-contact a:hover {
  color: #ffffff;
}

#footer .ft-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

#footer .ft-contact-row svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 3px;
  opacity: 0.55;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#footer .ft-pay {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--g) 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

#footer .ft-pay-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255, 0.62);
}

#footer .ft-pay-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#footer .ft-pay-logo {
  height: 26px;
  width: 40px;
  object-fit: contain;
  display: block;
  background: #ffffff;
  padding: 2px 4px;
  box-shadow: 0 1px 2px rgba(0,0,0, 0.15);
}

#footer .ft-bot {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--g) 32px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  border-top: 0;
}

#footer .ft-legal {
  font-size: 12px;
  color: rgba(255,255,255, 0.70);
  font-weight: 450;
  flex-shrink: 0;
}

#footer .ft-disc {
  font-size: 12px;
  color: rgba(255,255,255, 0.68);
  text-align: right;
  line-height: 1.5;
  font-weight: 450;
  max-width: 560px;
}

@media (max-width: 1024px) {
  #footer .ft-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
  }
}

@media (max-width: 640px) {
  #footer {
    margin-top: 12px;
  }

  #footer .ft-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 16px;
  }

  #footer .ft-bot {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 0 16px 24px;
  }

  #footer .ft-pay {
    padding: 0 16px 20px;
    justify-content: center;
  }

  #footer .ft-disc {
    text-align: center;
    max-width: 100%;
  }

  #footer .ft-wm-text {
    font-size: clamp(40px, 11vw, 160px);
  }
}