/*
  GetPepD 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: #f5faf7;
  --gp-stone: #e6f0eb;
  --gp-stone-strong: #c5d9d0;
  --gp-ice: #dbeaf0;
  --gp-mint: #9fe0c2;
  --gp-moss: #477866;
  --gp-teal: #0f6f68;
  --gp-teal-dark: #083f3b;
  --gp-evergreen: #0f6f68;
  --gp-ink: #102321;
  --gp-text: #243835;
  --gp-muted: #5d706b;
  --gp-line: #b8ccc4;
  --gp-line-strong: #8ea89e;
  --gp-shadow: 0 20px 50px rgba(20, 35, 33, 0.16);
  --gp-shadow-soft: 0 10px 26px rgba(20, 35, 33, 0.1);

  --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-ice);
  --stroke: rgba(16, 35, 33, 0.16);

  --gold: var(--gp-teal);
  --gold-light: var(--gp-moss);
  --gold-bg: rgba(169, 217, 194, 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(20, 35, 33, 0.08);
}

.logo,
.quiz-logo,
.brand,
.ft-brand,
.footer-wm,
.ft-wm-text {
  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;
}

.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(14, 77, 73, 0.34) !important;
  color: var(--gp-surface) !important;
  box-shadow: 0 14px 32px rgba(14, 77, 73, 0.24) !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: 0 18px 42px rgba(14, 77, 73, 0.3) !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(20, 35, 33, 0.07);
}

.btn-ghost:hover,
.btn-o:hover,
.secondary-btn:hover,
.btn-secondary:hover {
  border-color: rgba(23, 106, 101, 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(14, 77, 73, 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 #f3f8f4, cc-sub to rgba(231,244,238,.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;
    padding: 11px 16px !important;
    font-size: 13px !important;
    border-radius: 24px !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(20, 35, 33, 0.07);
}

.hsc:hover,
.hsc-testosterone:hover,
.hsc-hair:hover,
.hsc-sexual:hover {
  background: linear-gradient(135deg, #176a65, #0e4d49) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(14, 77, 73, 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(14, 77, 73, 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(20, 35, 33, 0.07) !important;
}

.quiz-option:hover,
.choice:hover,
.answer-option:hover {
  border-color: rgba(23, 106, 101, 0.42) !important;
  background: #edf4ef !important;
  box-shadow: 0 10px 26px rgba(14, 77, 73, 0.13) !important;
}

.quiz-option.selected,
.choice.selected,
.answer-option.selected,
.product-card.selected {
  background:
    linear-gradient(90deg, rgba(14, 77, 73, 0.08), rgba(169, 217, 194, 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(23, 106, 101, 0.16),
    0 12px 30px rgba(14, 77, 73, 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(169, 217, 194, 0.36) !important;
  outline: none !important;
}

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

.product-card:hover,
.result-card:hover,
.card:hover {
  border-color: rgba(23, 106, 101, 0.34) !important;
  box-shadow: var(--gp-shadow) !important;
}

.product-card-badge,
.product-badge,
.badge,
.pill,
.tag,
.trust-label {
  background: #e8f0eb !important;
  color: var(--gp-teal-dark) !important;
  border-color: rgba(23, 106, 101, 0.16) !important;
}

.product-card.highlighted,
.recommended,
.featured {
  border-color: rgba(23, 106, 101, 0.48) !important;
  background: linear-gradient(180deg, #ffffff, #edf4ef) !important;
}

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

.trust,
.footer,
#footer,
footer,
.site-footer {
  background: linear-gradient(180deg, #142321, #0e2e2b) !important;
  color: #dce8e2 !important;
}

.footer p,
#footer p,
footer p,
.site-footer p,
.footer li,
#footer li,
footer li,
.site-footer li {
  color: rgba(220, 232, 226, 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(220, 232, 226, 0.78) !important;
}

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

#footer::before {
  opacity: 0.18 !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(20, 35, 33, 0.1) !important;
}

.legal-hero,
.policy-hero,
.doc-hero {
  background:
    linear-gradient(106deg, var(--gp-stone) 0%, #d5e2dc 54%, #b9cfc8 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(23, 106, 101, 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(23, 106, 101, 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(20, 35, 33, 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(20, 35, 33, 0.48) 0%, rgba(20, 35, 33, 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(20, 35, 33, 0.28) !important;
}

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

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

.hsc {
  border-color: #b4c6be !important;
  box-shadow: 0 10px 24px rgba(20, 35, 33, 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: #b7c9c1 !important;
}

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

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

.quiz-option,
.choice,
.answer-option {
  border-color: #aebfb8 !important;
  box-shadow: 0 7px 18px rgba(20, 35, 33, 0.1) !important;
}

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

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

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

#trust .trust-card {
  background: linear-gradient(180deg, rgba(14, 77, 73, 0.94), rgba(20, 35, 33, 0.94)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 44px rgba(20, 35, 33, 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: 0 12px 30px rgba(14, 77, 73, 0.22) !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(20, 35, 33, 0.18) !important;
}

.cond .btn-w:hover,
.bg-longevity .btn-w:hover {
  background: #f4f7f5 !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;
}

.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 #6fcf86 group (c-eyebrow / c-headline em /
   cc-title em / cc-cta) and the #b6c9bf 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(231,244,238,.78)). c-headline and cc-title remain;
   they are the live winners (id specificity beats the later .cond rules). */
#consult .c-headline {
  color: #f3f8f4 !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, #176a65, #0e4d49) !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(14, 77, 73, 0.18) !important;
  min-height: 104px !important;
}

.hsc-start:hover,
.hsc-start:focus-visible,
.hsc-start:active {
  background: #ffffff !important;
  border: 1px solid rgba(23, 106, 101, 0.28) !important;
  box-shadow: 0 16px 32px rgba(20, 35, 33, 0.16) !important;
}

.hsc-start:focus-visible {
  outline: 2px solid rgba(143, 214, 170, 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: #8fd6aa !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: #176a65 !important;
  border-color: #176a65 !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%, #f5faf7 100%) !important;
}

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

/* Real Get Pep'd 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;
}

.ft-brand img {
  content: url(/assets/getpepd-wordmark-white.svg) !important;
  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(15, 111, 104, 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,
.sec-title em,
.lead-title em,
.eyebrow,
.lead-eyebrow,
.faq-section-label {
  color: var(--gp-teal) !important;
}

.pc-a {
  background:
    radial-gradient(circle at 62% 38%, rgba(159, 224, 194, 0.45), transparent 32rem),
    linear-gradient(135deg, #083f3b 0%, #0f6f68 58%, #59b899 100%) !important;
}

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

.pc {
  box-shadow: 0 20px 48px rgba(8, 63, 59, 0.22) !important;
}

.hsc:not(.hsc-start) {
  background: #f7fbf8 !important;
  border: 1px solid rgba(15, 111, 104, 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(15, 111, 104, 0.28) !important;
}

.hims-bg-grad {
  background:
    radial-gradient(circle at 72% 34%, rgba(159, 224, 194, 0.54), transparent 28rem),
    linear-gradient(135deg, #ffffff 0%, #edf7f1 55%, #d5eadf 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(159, 224, 194, 0.28), transparent 28rem),
    linear-gradient(135deg, #102321 0%, #184842 52%, #0f6f68 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, #17342f 0%, #477866 55%, #9fe0c2 100%) !important;
}

#hair .cond-bg-fill,
#hair.bg-sage .cond-bg-fill {
  background:
    radial-gradient(circle at 70% 36%, rgba(159, 224, 194, 0.2), transparent 26rem),
    linear-gradient(135deg, #1b2827 0%, #315c55 52%, #6aa88f 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, #162724 0%, #6a705e 54%, #b7d6bf 100%) !important;
}

#consult .cond-bg-fill,
.bg-blue .cond-bg-fill {
  background:
    radial-gradient(circle at 70% 36%, rgba(159, 224, 194, 0.24), transparent 28rem),
    linear-gradient(135deg, #083f3b 0%, #0f6f68 58%, #102321 100%) !important;
}

.cond {
  box-shadow: 0 22px 56px rgba(8, 63, 59, 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(231, 244, 238, 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(--gp-teal) !important;
}

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

#trust .trust-card {
  background: linear-gradient(180deg, #0f6f68, #083f3b) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 18px 42px rgba(8, 63, 59, 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(231, 244, 238, 0.78) !important;
}

#transformations {
  background: #f5faf7 !important;
}

.lead {
  background: linear-gradient(135deg, #102321, #083f3b) !important;
}

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