/* ShyftMD shared styles for product and comparison pages */

/* Promo-yellow marker-pen highlighter — apply on one payoff word per heading.
   Uses the same #F3F0E9 as the nav "Find my protocol" pill so emphasis reads as branded.
   The yellow runs as a half-height stripe behind the word (Hims/Ro pattern), not a
   solid filled box, so it reads as a marker-pen swipe rather than a colored chip.
   Use sparingly: one .hl per visible viewport. */
.hl {
  background: linear-gradient(180deg,
    transparent 0,
    transparent 52%,
    #F3F0E9 52%,
    #F3F0E9 92%,
    transparent 92%);
  padding: 0 0.10em;
  margin: 0 -0.02em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: inherit;
  font-style: inherit;
  font-weight: inherit;
}
/* When used on a dark hero (TRT, microdose, etc.) the marker-pen reads better
   if the swipe is slightly more saturated. Heroes with .prod-hero or .trt-hero
   apply this automatically. */
.prod-hero .hl,
.trt-hero .hl,
.md-hero .hl,
[data-dark-section] .hl {
  background: linear-gradient(180deg,
    transparent 0,
    transparent 52%,
    rgba(243,240,233,0.92) 52%,
    rgba(243,240,233,0.92) 92%,
    transparent 92%);
  color: #fff;
}

:root {
  --white: #FFFFFF;
  --bg: #FFFFFF;
  --bg-secondary: #FDFDF7;
  --bg-tertiary: #F3F0E9;
  --text-primary: #0A0A0A;
  --text-secondary: #5C5750;
  --text-muted: #6E6A64;
  --border: #E6E2D9;
  --border-dark: #D9D4C8;
  --navy: #0A0A0A;
  --green: #0A0A0A;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* The display face. This token was defined as Inter, so every heading declaring
     var(--jakarta) rendered in Inter while Plus Jakarta Sans loaded on 609 of 611
     pages and went unused. Ryan's call 2026-09-04: Jakarta everywhere. */
  --jakarta: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); color:var(--text-primary); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }

.container { max-width:1280px; margin:0 auto; padding:0 24px; }
@media(min-width:768px) { .container { padding:0 40px; } }
@media(min-width:1024px) { .container { padding:0 64px; } }

/* Nav */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; background:var(--white); border-bottom:1px solid var(--border); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; max-width:1280px; margin:0 auto; padding:0 24px; }
@media(min-width:768px) { .nav-inner { padding:0 40px; } }
.logo { font-family:var(--serif); font-size:34px; color:var(--text-primary); letter-spacing:-0.5px; }
.nav-links { display:flex; align-items:center; gap:32px; list-style:none; }
.nav-links a { font-size:15px; color:var(--text-secondary); cursor:pointer; }
.nav-links a:hover { color:var(--text-primary); }
.nav-cta { background:var(--text-primary) !important; color:var(--white) !important; padding:10px 24px !important; border-radius:var(--radius-pill); font-size:14px !important; font-weight:600 !important; }
.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px; }
.burger span { width:22px; height:2px; background:var(--text-primary); border-radius:2px; }
@media(max-width:900px) {
  .burger { display:flex; }
  .nav-links { position:fixed; top:64px; left:0; right:0; background:var(--white); flex-direction:column; padding:24px; gap:20px; border-bottom:1px solid var(--border); transform:translateY(-120%); opacity:0; pointer-events:none; transition:all .3s; }
  .nav-links.open { transform:translateY(0); opacity:1; pointer-events:all; }
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:var(--radius-pill);
  font-family: var(--jakarta);
  font-size:15px; font-weight:700; letter-spacing:-0.2px;
  text-decoration:none; border:none; cursor:pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .15s ease;
  white-space:nowrap;
}
.btn-primary {
  background: var(--text-primary); color: var(--white);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 10px 24px rgba(10,10,10,0.18),
    0 0 28px rgba(243,240,233,0.22);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 14px 32px rgba(10,10,10,0.24),
    0 0 40px rgba(243,240,233,0.36);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: var(--white); color: var(--text-primary);
  border: 1.5px solid rgba(10,10,10,0.14);
}
.btn-secondary:hover {
  background: var(--bg-secondary);
  border-color: rgba(10,10,10,0.28);
}
.btn-white {
  background: var(--white); color: var(--text-primary);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04) inset,
    0 12px 28px rgba(0,0,0,0.20),
    0 0 32px rgba(243,240,233,0.30);
}
.btn-white:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04) inset,
    0 16px 36px rgba(0,0,0,0.26),
    0 0 44px rgba(243,240,233,0.42);
}

/* Physician-Prescribed seal — mortar & pestle stamp pinned to upper-right of every product hero.
   White asset on transparent bg; uses drop-shadow for depth on light/dark backgrounds. */
.prod-hero { position: relative; }
.prod-hero-seal {
  position: absolute;
  top: 48px;
  right: 24px;
  width: 132px;
  height: 132px;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.30));
}
.prod-hero-seal.dark { filter: drop-shadow(0 4px 16px rgba(0,0,0,0.50)); }
@media (max-width: 900px) {
  .prod-hero-seal { top: 24px; right: 14px; width: 116px; height: 116px; }
}
@media (max-width: 600px) {
  .prod-hero-seal { top: 18px; right: 12px; width: 108px; height: 108px; }
}

/* Hero */
.prod-hero { padding:120px 0 60px; background:var(--bg); }
.prod-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media(max-width:900px) { .prod-hero-grid { grid-template-columns:1fr; gap:40px; } }
.prod-eyebrow { display:inline-block; background:var(--bg-secondary); color:var(--text-primary); font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; padding:6px 14px; border-radius:var(--radius-pill); margin-bottom:20px; }
.prod-hero h1 { font-family:var(--jakarta); font-size:clamp(36px, 5vw, 56px); font-weight:700; letter-spacing:-1.5px; line-height:1.05; margin-bottom:20px; }
.prod-hero .lead { font-size:18px; color:var(--text-secondary); line-height:1.65; margin-bottom:28px; max-width:520px; }
.prod-trust-row { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:28px; }
.prod-trust-row li { list-style:none; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-secondary); }
.prod-trust-row li::before { content:"✓"; color:var(--green); font-weight:700; }
.prod-hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; margin-bottom:16px; }

/* Slider calculator card */
.calc-card { background:var(--white); border-radius:var(--radius-xl); padding:32px; box-shadow:var(--shadow-lg); border:1px solid var(--border); }
.calc-card h3 { font-family:var(--jakarta); font-size:22px; font-weight:700; margin-bottom:6px; }
.calc-card-sub { font-size:14px; color:var(--text-muted); margin-bottom:24px; }
.calc-weight-display { display:flex; align-items:baseline; gap:6px; margin-bottom:16px; }
.calc-weight-num { font-family:var(--jakarta); font-size:56px; font-weight:700; letter-spacing:-2px; }
.calc-weight-unit { font-size:18px; color:var(--text-muted); font-weight:500; }
.calc-slider { width:100%; height:6px; border-radius:3px; background:var(--bg-tertiary); outline:none; -webkit-appearance:none; cursor:pointer; }
.calc-slider::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--text-primary); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.2); }
.calc-slider::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:var(--text-primary); cursor:pointer; border:none; }
/* Weight-loss variant — gold (matches sitewide premium accent) */
.calc-slider.calc-slider--wl { background:#F3F0E9; }
.calc-slider.calc-slider--wl::-webkit-slider-thumb { background:#0A0A0A; box-shadow:0 2px 8px rgba(10,10,10,0.35); }
.calc-slider.calc-slider--wl::-moz-range-thumb { background:#0A0A0A; }
.calc-labels { display:flex; justify-content:space-between; margin-top:8px; font-size:12px; color:var(--text-muted); }
.calc-results { margin-top:28px; padding-top:24px; border-top:1px solid var(--border); }
.calc-results-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; text-align:center; margin-bottom:20px; }
.calc-col { padding:16px 8px; background:var(--bg-secondary); border-radius:var(--radius-md); }
.calc-col-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.calc-col-val { font-family:var(--jakarta); font-size:22px; font-weight:700; color:var(--text-primary); }
.calc-col-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* Sections */
.section { padding:80px 0; }
.section-alt { background:var(--bg-secondary); }
.section-header { text-align:center; max-width:720px; margin:0 auto 48px; }
.section-header h2 { font-family:var(--jakarta); font-size:clamp(28px, 3.6vw, 40px); font-weight:700; letter-spacing:-1px; line-height:1.15; margin-bottom:14px; }
.section-header p { font-size:17px; color:var(--text-secondary); line-height:1.6; }

/* How it works */
/* Step cards — premium pattern (matches TRT 12-week timeline rhythm) */
.steps-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
@media(max-width:900px) { .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media(max-width:500px) { .steps-grid { grid-template-columns: 1fr; } }
.step-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFDF7 100%);
  padding: 26px 24px 22px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 14px 32px -22px rgba(10,10,10,0.10);
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.step-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #F3F0E9 0%, #8A867D 100%);
}
.step-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 22px 44px -22px rgba(10,10,10,0.18);
}
.step-num {
  display: inline-block;
  font-family: var(--jakarta);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #282421;
  background: #F3F0E9;
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 14px;
  border: 1px solid rgba(138,134,125,0.30);
}
.step-card h3,
.step-card h4 {
  font-family: var(--jakarta);
  font-size: 17.5px; font-weight: 800;
  letter-spacing: -0.3px; line-height: 1.22;
  color: #0A0A0A;
  margin: 0 0 8px;
}
.step-card p {
  font-family: var(--jakarta);
  font-size: 14px; font-weight: 500;
  color: rgba(0,0,0,0.62);
  line-height: 1.55;
  margin: 0;
}
.step-card p strong { color: #0A0A0A; font-weight: 700; }

/* Trial data */
.trial-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFDF7 100%);
  border-radius: 24px;
  padding: 40px 36px;
  border: 1px solid rgba(0,0,0,0.08);
  max-width: 880px; margin: 0 auto;
  box-shadow: 0 22px 44px -28px rgba(10,10,10,0.16);
}
.trial-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-bottom: 24px;
}
@media(max-width:600px) { .trial-stats { grid-template-columns: 1fr; gap: 12px; } }
.trial-stat {
  text-align: center;
  padding: 26px 20px 22px;
  background: linear-gradient(180deg, #FDFDF7 0%, #FFFFFF 100%);
  border: 1px solid rgba(243,240,233,0.55);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 14px 32px -18px rgba(10,10,10,0.14);
  position: relative;
  overflow: hidden;
}
.trial-stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #F3F0E9 0%, #8A867D 100%);
}
.trial-stat-num {
  font-family: var(--jakarta);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 800; letter-spacing: -1.6px; line-height: 1;
  color: #0A0A0A;
}
.trial-stat-label {
  font-family:'Inter', -apple-system, sans-serif;
  font-size: 13px; line-height: 1.45;
  color: rgba(0,0,0,0.62);
  margin-top: 8px;
  font-weight: 500;
}
.trial-source { font-size:12px; color:var(--text-muted); text-align:center; margin-top:16px; }

/* Testimonials */
.testimonial-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
@media(max-width:900px) { .testimonial-grid { grid-template-columns:1fr; } }
.testimonial-card { background:var(--white); padding:32px; border-radius:var(--radius-lg); border:1px solid var(--border); }
.testimonial-stars { color:#0A0A0A; margin-bottom:16px; font-size:14px; letter-spacing:2px; }
.testimonial-quote { font-size:16px; line-height:1.7; color:var(--text-primary); margin-bottom:20px; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg, #E6E2D9, #D9D4C8); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--white); font-size:15px; }
.testimonial-name { font-weight:600; font-size:14px; }
.testimonial-meta { font-size:12px; color:var(--text-muted); }

/* ShyftMD compare table — Ro-style lavender pattern, clean two-column comparison */
.opt-compare-wrap {
  max-width: 880px; margin: 0 auto;
  background: transparent;
  border: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: none;
}
.opt-compare {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-family: var(--jakarta);
  font-size: 14.5px;
  letter-spacing: -0.1px;
  background: #F3F0E9;
  border-radius: 18px;
  overflow: hidden;
}
.opt-compare thead tr { background: transparent; }
.opt-compare th {
  padding: 22px 14px 18px;
  font-family: var(--jakarta);
  font-size: 16px; font-weight: 800;
  letter-spacing: -0.4px;
  text-align: center;
  color: #0A0A0A;
  background: #F3F0E9;
  vertical-align: bottom;
  border-bottom: 1px solid rgba(10,10,10,0.10);
}
.opt-compare th:first-child {
  text-align: left;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(10,10,10,0.45);
  background: #E6E2D9;
  border-bottom: 1px solid rgba(10,10,10,0.10);
  padding: 22px 18px 18px;
}
/* ShyftMD column gets the brand yellow but as a subtle tint, not a loud chip */
.opt-compare th.opt-compare-us,
.opt-compare th:nth-child(2) {
  background: #F3F0E9;
  color: #0A0A0A;
  font-weight: 900;
}
.opt-compare tbody tr { background: transparent; }
.opt-compare tbody tr + tr td { border-top: 1px solid rgba(10,10,10,0.07); }
.opt-compare td {
  padding: 16px 14px;
  text-align: center;
  color: rgba(10,10,10,0.78);
  background: #F3F0E9;
  font-weight: 600;
  letter-spacing: -0.1px;
}
.opt-compare td:first-child {
  text-align: left;
  font-weight: 700;
  color: #0A0A0A;
  background: #E6E2D9;
  font-size: 14px;
  padding: 16px 18px;
  width: 32%;
}
.opt-compare td.opt-compare-us,
.opt-compare td:nth-child(2) {
  background: #F3F0E9;
  color: #0A0A0A;
  font-weight: 800;
}
.opt-compare td.opt-na { color: rgba(10,10,10,0.36); font-weight: 500; }
.opt-compare .opt-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(10,10,10,0.14);
  color: #0A0A0A;
  font-weight: 800; font-size: 13px;
}
.opt-compare td.opt-compare-us .opt-check,
.opt-compare td:nth-child(2) .opt-check {
  background: rgba(10,10,10,0.10);
  color: #0A0A0A;
}
/* Hide the mobile chart on desktop (it's only built dynamically by JS) */
.opt-compare-mobile { display: none; }

/* Mobile: swap to the 2-column "ShyftMD vs Other clinics" chart (Ro pattern).
   The original 5-column chart hides; the dynamically-built 2-column shows. */
@media (max-width: 700px) {
  .opt-compare-wrap > .opt-compare { display: none; }
  .opt-compare-mobile { display: block; }
  .opt-compare-m {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: #F3F0E9;
    border-radius: 18px;
    overflow: hidden;
    font-family: var(--jakarta);
    font-size: 13px;
  }
  .opt-compare-m thead tr { background: transparent; }
  .opt-compare-m th {
    padding: 18px 12px 14px;
    font-family: var(--jakarta);
    font-size: 13px; font-weight: 800;
    text-align: center;
    color: #0A0A0A;
    background: #F3F0E9;
    border-bottom: 1px solid rgba(10,10,10,0.10);
    letter-spacing: -0.2px;
  }
  .opt-compare-m th:first-child {
    text-align: left;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(10,10,10,0.45);
    background: #E6E2D9;
  }
  .opt-compare-m th.opt-compare-m-us {
    background: #F3F0E9;
    color: #0A0A0A;
    font-weight: 900;
    font-size: 13.5px;
  }
  .opt-compare-m tbody tr + tr td { border-top: 1px solid rgba(10,10,10,0.07); }
  .opt-compare-m td {
    padding: 14px 10px;
    text-align: center;
    color: rgba(10,10,10,0.78);
    background: #F3F0E9;
    font-weight: 600;
    line-height: 1.35;
    vertical-align: middle;
    font-size: 12.5px;
  }
  .opt-compare-m td:first-child {
    text-align: left;
    font-weight: 700;
    color: #0A0A0A;
    background: #E6E2D9;
    padding: 14px 12px;
    width: 36%;
    font-size: 12.5px;
  }
  .opt-compare-m td.opt-compare-m-us {
    background: #F3F0E9;
    color: #0A0A0A;
    font-weight: 800;
    font-size: 13px;
  }
  /* "Other clinics" stacked summary inside a single cell */
  .opt-compare-m-stack {
    display: flex; flex-direction: column; gap: 4px;
    text-align: left;
  }
  .opt-compare-m-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px;
    font-size: 11px; line-height: 1.35;
  }
  .opt-compare-m-rowlabel {
    color: rgba(10,10,10,0.45);
    font-weight: 700;
    flex-shrink: 0;
    font-size: 9.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .opt-compare-m-rowval {
    color: rgba(10,10,10,0.72);
    font-weight: 600;
    text-align: right;
  }
  .opt-compare-m .opt-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(10,10,10,0.14);
    color: #0A0A0A;
    font-weight: 800; font-size: 13px;
  }
  .opt-compare-m .opt-check--neutral {
    background: rgba(10,10,10,0.08);
    color: rgba(10,10,10,0.50);
  }
  .opt-compare-m td.opt-compare-m-us .opt-check {
    background: rgba(10,10,10,0.10);
    color: #0A0A0A;
  }
  .opt-compare-m .opt-na {
    color: rgba(10,10,10,0.40);
    font-weight: 500;
    font-size: 11.5px;
  }
}

/* Pricing — premium card system with prominent featured tier */
.pricing-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; max-width:960px; margin:0 auto; align-items:stretch; }
@media(max-width:800px) { .pricing-grid { grid-template-columns:1fr; gap:18px; } }
.pricing-card {
  background: linear-gradient(180deg, #FDFDF7 0%, #FFFFFF 60%);
  padding: 36px 26px 28px;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.08);
  display: flex; flex-direction: column;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 0 rgba(0,0,0,0.03),
    0 22px 44px -24px rgba(10,10,10,0.16);
  transition: transform .22s ease, box-shadow .25s ease, border-color .22s ease;
  /* No overflow:hidden — the "Most Popular" badge sits above the card edge and was being clipped */
  overflow: visible;
}
.pricing-card::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px;
  background: linear-gradient(180deg, rgba(243,240,233,0.4) 0%, rgba(138,134,125,0.4) 100%);
  opacity: 0.7;
  border-radius: 0 4px 4px 0;
}
.pricing-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 0 rgba(0,0,0,0.03),
    0 30px 56px -24px rgba(10,10,10,0.24);
}
.pricing-card.featured {
  border: 1.5px solid #0A0A0A;
  background: linear-gradient(180deg, #F3F0E9 0%, #FFFFFF 70%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 0 rgba(0,0,0,0.04),
    0 28px 52px -22px rgba(10,10,10,0.24),
    0 0 0 6px rgba(243,240,233,0.25);
  transform: translateY(-6px);
}
.pricing-card.featured::before {
  background: linear-gradient(180deg, #F3F0E9 0%, #8A867D 100%);
  opacity: 1;
  width: 5px;
  top: 14px;
  bottom: 14px;
}
.pricing-card.featured:hover { transform: translateY(-8px); }
.pricing-badge {
  position:absolute; top:-13px; right:20px;
  background:#0A0A0A; color:#fff;
  font-family:var(--jakarta);
  font-size:10.5px; font-weight:800;
  padding:6px 13px; border-radius:100px;
  letter-spacing:0.10em; text-transform:uppercase;
  box-shadow: 0 6px 18px rgba(10,10,10,0.30);
}
.pricing-card.featured .pricing-badge {
  background: #F3F0E9; color:#0A0A0A;
  box-shadow: 0 6px 18px rgba(243,240,233,0.50), 0 0 0 1px rgba(10,10,10,0.05);
}
.pricing-title {
  display: inline-block;
  font-family: var(--jakarta);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: #282421;
  background: rgba(243,240,233,0.55);
  border: 1px solid rgba(138,134,125,0.30);
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.pricing-card.featured .pricing-title {
  background: #F3F0E9;
  border-color: rgba(138,134,125,0.50);
}
.pricing-price {
  font-family: var(--jakarta);
  font-size: 56px; font-weight: 800; letter-spacing: -2.4px;
  color: #0A0A0A; line-height: 0.95;
}
.pricing-price-unit {
  font-size: 15px; color: rgba(0,0,0,0.50);
  font-weight: 700; margin-left: 4px; letter-spacing: -0.2px;
}
.pricing-sub {
  font-family: var(--jakarta);
  font-size: 13.5px; color: rgba(0,0,0,0.62);
  margin: 10px 0 22px; line-height: 1.5;
  font-weight: 500;
}
.pricing-features { list-style: none; padding: 0; margin: 0 0 24px; }
.pricing-features li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-family: var(--jakarta);
  font-size: 14.5px;
  color: #0A0A0A;
  display: flex; gap: 11px; align-items: flex-start;
  font-weight: 500;
  letter-spacing: -0.1px;
}
.pricing-features li::before {
  content: ""; flex-shrink: 0;
  width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 6.2L5 8.2L9 4' stroke='%231F6B47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat,
    rgba(31,107,71,0.14);
}
.pricing-features li:last-child { border-bottom: none; }

/* FAQ */
.faq-wrap { max-width:760px; margin:0 auto; }
.faq { display:block; }
/* FAQ wrap — premium container that visually anchors the Q&A as one block */
.faq-wrap {
  max-width: 760px; margin: 0 auto;
  background:
    radial-gradient(800px 320px at 50% -10%, rgba(243,240,233,0.18) 0%, rgba(243,240,233,0) 60%),
    linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 60%, #0A0A0A 100%);
  border-radius: 24px;
  padding: 22px 22px 18px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 30px 70px -28px rgba(0,0,0,0.40);
  position: relative;
  overflow: hidden;
}
.faq-wrap::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, #F3F0E9 0%, #8A867D 50%, #F3F0E9 100%);
  pointer-events: none;
}
.faq-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease;
}
.faq-item:last-child { margin-bottom: 0; }
.faq-item:hover {
  border-color: rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.07);
}
.faq-item.open, details.faq-item[open] {
  background: rgba(243,240,233,0.10);
  border-color: rgba(243,240,233,0.50);
}
.faq-wrap .faq-q,
.faq-wrap details.faq-item summary {
  color: #fff;
  font-family: var(--jakarta);
  font-weight: 700;
  letter-spacing: -0.2px;
}
.faq-wrap .faq-q::after,
.faq-wrap details.faq-item summary::after {
  color: rgba(255,255,255,0.55);
}
.faq-wrap .faq-item.open .faq-q,
.faq-wrap details.faq-item[open] summary {
  color: #F3F0E9;
}
.faq-wrap .faq-a,
.faq-wrap details.faq-item .faq-a {
  color: rgba(255,255,255,0.78);
  font-family: var(--jakarta);
  font-weight: 500;
}
.faq-wrap .faq-a strong,
.faq-wrap details.faq-item .faq-a strong { color: #fff; }
.faq-wrap .faq-a a,
.faq-wrap details.faq-item .faq-a a {
  color: #F3F0E9;
  border-bottom: 1px solid rgba(243,240,233,0.4);
}
/* button-style trigger (legacy pages) */
.faq-q { width:100%; background:none; border:none; padding:20px 24px; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--font); font-size:16px; font-weight:600; color:var(--text-primary); cursor:pointer; }
.faq-q::after { content:"+"; font-size:22px; font-weight:300; color:var(--text-muted); flex-shrink:0; }
.faq-item.open .faq-q::after { content:"−"; }
.faq-a { display:none; padding:0 24px 22px; font-size:15px; color:var(--text-secondary); line-height:1.7; }
.faq-item.open .faq-a { display:block; }
/* native <details>/<summary> trigger (newer pages) */
details.faq-item { padding:0; }
details.faq-item summary { list-style:none; cursor:pointer; padding:20px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--font); font-size:16px; font-weight:600; color:var(--text-primary); }
details.faq-item summary::-webkit-details-marker { display:none; }
details.faq-item summary::after { content:"+"; font-size:22px; font-weight:300; color:var(--text-muted); flex-shrink:0; transition:transform 200ms ease; }
details.faq-item[open] summary::after { content:"−"; }
details.faq-item .faq-a { display:block; padding:0 24px 22px; font-size:15px; color:var(--text-secondary); line-height:1.7; }
details.faq-item .faq-a p { margin:0 0 12px; }
details.faq-item .faq-a p:last-child { margin-bottom:0; }
details.faq-item .faq-a a { color:var(--text-primary); font-weight:600; border-bottom:1px solid currentColor; }

/* Content eyebrow — small label above section H2 */
.content-eyebrow { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:#0A0A0A; margin-bottom:14px; }

/* Info grid (benefits / "why X" cards) */
.info-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; max-width:1100px; margin:0 auto; }
@media(max-width:900px) { .info-grid { grid-template-columns:repeat(2, 1fr); } }
@media(max-width:560px) { .info-grid { grid-template-columns:1fr; } }
.info-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 26px; transition:border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.info-card:hover { border-color:var(--border-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.section-alt .info-card { background:var(--white); }
.info-card-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:var(--text-primary); color:var(--white); font-family:var(--jakarta); font-weight:700; font-size:13px; letter-spacing:0.5px; margin-bottom:14px; }
.info-card h4 { font-family:var(--jakarta); font-size:17px; font-weight:700; letter-spacing:-0.3px; margin-bottom:8px; color:var(--text-primary); }
.info-card p { font-size:14.5px; color:var(--text-secondary); line-height:1.6; margin:0; }

/* Hero visual — image card on prod-hero right */
.prod-hero-visual { position:relative; }
.prod-hero-visual img { width:100%; height:auto; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); display:block; }

/* ============================================================
   STANDARDIZED FOOTER (all pages — matches index.html)
   ============================================================ */
.shyftmd-footer { background:#000; color:rgba(255,255,255,0.5); padding:72px 0 0; overflow:hidden; }
.shyftmd-footer .container { max-width:1280px; margin:0 auto; padding:0 24px; }
@media(min-width:768px) { .shyftmd-footer .container { padding:0 40px; } }
@media(min-width:1024px) { .shyftmd-footer .container { padding:0 64px; } }
.shyftmd-footer-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:48px; margin-bottom:56px; }
@media(max-width:900px) { .shyftmd-footer-grid { grid-template-columns:1fr 1fr; gap:32px; } }
@media(max-width:520px) { .shyftmd-footer-grid { grid-template-columns:1fr; gap:28px; } }
.shyftmd-footer-grid h4 { font-family:var(--font); font-size:13px; font-weight:500; letter-spacing:-0.01em; text-transform:none; color:rgba(255,255,255,0.72); margin:0 0 22px; }
.shyftmd-footer-grid ul { list-style:none; margin:0; padding:0; }
.shyftmd-footer-grid li { margin:0 0 14px; padding:0; }
.shyftmd-footer-grid li::before { content:none !important; }
.shyftmd-footer-grid a { font-family:var(--font); color:#fff; text-decoration:none; font-size:18px; font-weight:500; line-height:1.25; letter-spacing:-0.025em; transition:opacity 200ms ease; }
.shyftmd-footer-grid a:hover { opacity:0.7; }
@media(max-width:768px) { .shyftmd-footer-grid a { font-size:16px; } }
.shyftmd-footer-legal { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding:24px 0 22px; border-top:1px solid rgba(255,255,255,0.08); }
.shyftmd-footer-legitscript { display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:rgba(255,255,255,0.55); }
.shyftmd-footer-legitscript:hover { color:#fff; }
.shyftmd-footer-legitscript img { width:80px; height:auto; display:block; flex-shrink:0; }
.shyftmd-footer-legitscript span { font-size:12px; line-height:1.4; }
.shyftmd-footer-legal-links { display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.shyftmd-footer-legal-links a { color:rgba(255,255,255,0.72); font-size:13px; text-decoration:none; }
.shyftmd-footer-legal-links a:hover { color:#fff; }
.shyftmd-footer-legal-links .clinician-link { color:#F3F0E9; font-weight:600; }
.shyftmd-footer-wordmark { display:block; width:100%; max-width:2200px; height:auto; margin:-12px auto 0; padding:0 4px; filter:brightness(0) invert(1); opacity:0.14; user-select:none; pointer-events:none; }
@media(max-width:600px) { .shyftmd-footer-legal { flex-direction:column; align-items:flex-start; gap:16px; } }

/* CTA section — premium authority treatment, compressed */
.cta-section {
  position:relative; overflow:hidden;
  background:
    radial-gradient(800px 480px at 18% -10%, rgba(10,10,10,0.10) 0%, rgba(10,10,10,0) 60%),
    radial-gradient(800px 520px at 82% 110%, rgba(10,10,10,0.08) 0%, rgba(10,10,10,0) 60%),
    linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 60%, #0A0A0A 100%);
  color:var(--white); padding:48px 24px 44px; text-align:center;
  border-radius:var(--radius-xl); margin:32px 16px;
  border:1px solid rgba(255,255,255,0.06);
}
@media(max-width:600px) {
  .cta-section { padding: 36px 22px 32px; margin: 24px 14px; }
}
/* Iridescent warm hairline border (matches the rest of the site's premium cards) */
.cta-section::before {
  content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(10,10,10,0.45), rgba(255,255,255,0.30) 35%, rgba(10,10,10,0.40) 65%, rgba(10,10,10,0.40));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0.55;
}
/* Top warm sheen */
.cta-section::after {
  content:""; position:absolute; left:0; right:0; top:0; height:140px; pointer-events:none;
  background:radial-gradient(ellipse at 50% -40%, rgba(230,226,217,0.18), rgba(255,255,255,0) 60%);
}
.cta-section > * { position:relative; z-index:1; }

.cta-section h2 {
  font-family:var(--jakarta); font-size:clamp(24px, 3.2vw, 34px); font-weight:800;
  letter-spacing:-0.8px; line-height: 1.12;
  margin:0 auto 10px; max-width: 22ch; color:var(--white);
}
.cta-section p {
  font-size:14.5px; color:rgba(255,255,255,0.68);
  margin:0 auto 18px; max-width: 44ch; line-height:1.5;
}

/* Inline LegitScript badge — small, refined, sits in the trust row */
.cta-section .legit-row[data-legit-bottom] {
  display:inline-flex !important; align-items:center; gap:10px;
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  border-radius:100px; padding:7px 14px 7px 8px !important;
  margin:0 !important; text-decoration:none;
  transition:background .2s ease, border-color .2s ease;
}
.cta-section .legit-row[data-legit-bottom]:hover {
  background:rgba(255,255,255,0.07) !important; border-color:rgba(255,255,255,0.16) !important;
}
.cta-section .legit-row[data-legit-bottom] img {
  width:22px !important; height:24px !important; display:block;
}
.cta-section .legit-row[data-legit-bottom] .legit-text {
  display:flex; flex-direction:column; align-items:flex-start; line-height:1.1;
}
.cta-section .legit-row[data-legit-bottom] .legit-text strong {
  font-size:11px; font-weight:700; letter-spacing:0.06em; color:rgba(255,255,255,0.92); text-transform:uppercase;
}
.cta-section .legit-row[data-legit-bottom] .legit-text em {
  font-size:10px; font-style:normal; color:rgba(255,255,255,0.5); letter-spacing:0.04em; margin-top:1px;
}

/* Trust strip — refined chips, fit ALL 4 on 2 lines max on mobile */
.cta-section .trust-strip[data-bottom] {
  background:transparent !important; border:0 !important; padding:0 !important;
  display:flex !important; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px !important; max-width:340px !important; margin:0 auto !important;
  font-size:10.5px !important; letter-spacing:0.04em; text-transform:uppercase;
  font-weight:700;
}
.cta-section .trust-strip[data-bottom] span {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  padding:5px 10px !important; border-radius:100px;
  white-space: nowrap;
  color:rgba(255,255,255,0.78) !important;
}
.cta-section .trust-strip[data-bottom] span::before {
  content:""; width:14px; height:14px; border-radius:50%;
  background:rgba(10,10,10,0.18); flex-shrink:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 6.2L5 8.2L9 4' stroke='%2395E5B0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:center;
}

/* Wrap LegitScript + trust strip on one row when possible — tighter spacing in compressed card */
.cta-section .legit-row[data-legit-bottom],
.cta-section .trust-strip[data-bottom] { vertical-align:middle; }
.cta-section .legit-row[data-legit-bottom] { margin:0 6px 18px 0 !important; }
.cta-section .trust-strip[data-bottom] { margin:0 0 22px 6px !important; }

.cta-section .btn-white {
  padding:18px 38px; font-size:15.5px; font-weight:800; letter-spacing:-0.2px;
  font-family: var(--jakarta);
  border-radius: 100px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 14px 32px rgba(0,0,0,0.30),
    0 0 36px rgba(243,240,233,0.42);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cta-section .btn-white:hover {
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 18px 44px rgba(0,0,0,0.36),
    0 0 48px rgba(243,240,233,0.55);
}
/* Subtle outer halo around the entire CTA card to make it feel intentional */
.cta-section {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 30px 70px -28px rgba(243,240,233,0.20),
    0 30px 70px -28px rgba(0,0,0,0.40);
}

/* Guarantee strip */
.guarantee-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:18px 32px; padding:20px 24px; background:var(--bg-secondary); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.guarantee-item { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-secondary); font-weight:500; }
.guarantee-item svg { flex-shrink:0; color:var(--green); }

/* Footer */
.footer { background:var(--text-primary); padding:60px 0 24px; color:rgba(255,255,255,0.5); }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
@media(max-width:800px) { .footer-grid { grid-template-columns:1fr 1fr; } }
.footer-brand { font-family:var(--serif); font-size:28px; color:var(--white); margin-bottom:12px; }
.footer-desc { font-size:14px; line-height:1.65; color:rgba(255,255,255,0.55); max-width:300px; }
.footer h4 { color:var(--white); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:16px; }
.footer ul { list-style:none; }
.footer ul li { margin-bottom:10px; }
.footer ul a { font-size:14px; color:rgba(255,255,255,0.55); }
.footer ul a:hover { color:var(--white); }
.footer-bottom { padding-top:24px; border-top:1px solid rgba(255,255,255,0.1); display:flex; justify-content:space-between; font-size:12px; flex-wrap:wrap; gap:12px; }
.footer-disclaimer { font-size:11px; color:rgba(255,255,255,0.25); margin-top:16px; line-height:1.6; max-width:900px; }

/* Urgency banner */
.offer-banner { background: var(--text-primary); color: var(--white); text-align: center; padding: 10px 24px; font-size: 13.5px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.offer-banner strong { font-weight: 700; }
.offer-banner-code { background: rgba(255,255,255,0.15); padding: 2px 10px; border-radius: var(--radius-pill); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; letter-spacing: 0.5px; }
.offer-banner a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.offer-timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; background: rgba(255,255,255,0.12); padding: 3px 10px; border-radius: var(--radius-pill); }
@media(max-width:600px) { .offer-banner { font-size: 12.5px; gap: 10px; padding: 9px 14px; } }

/* Rating pill */
.rating-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 13.5px; color: var(--text-secondary); margin-bottom: 20px; box-shadow: var(--shadow-md); }
.rating-stars { color: #0A0A0A; letter-spacing: 1.5px; font-size: 13px; }
.rating-pill strong { color: var(--text-primary); }

/* Sticky pricing panel */
.sticky-price-wrap { position: sticky; top: 88px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow-md); }
.sticky-price-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; }
.sticky-price-num { font-family: var(--jakarta); font-size: 34px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.sticky-price-num small { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.sticky-price-first { font-size: 14px; color: var(--green-dark, #0A0A0A); font-weight: 600; margin: 8px 0 14px; }
.sticky-price-btn { display: block; width: 100%; padding: 14px 24px; background: var(--text-primary); color: var(--white); text-align: center; border-radius: var(--radius-pill); font-weight: 600; font-size: 15px; text-decoration: none; margin-bottom: 12px; transition: all 200ms ease; }
.sticky-price-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sticky-price-sub { font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.5; }
@media(max-width:900px) { .sticky-price-wrap { position: static; } }

/* Transformation gallery */
.transform-section { padding: 80px 0; background: var(--bg-secondary); }
.transform-track { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.transform-track::-webkit-scrollbar { height: 4px; }
.transform-track::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 2px; }
.transform-card { flex: 0 0 340px; background: var(--white); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); scroll-snap-align: start; }
.transform-media { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 3/2; background: var(--bg-tertiary); position: relative; }
.transform-side { background: var(--bg-tertiary); display: flex; align-items: flex-end; justify-content: center; padding: 12px; color: var(--text-muted); font-family: var(--jakarta); font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.transform-side.before { background: linear-gradient(135deg, #E6E2D9, #D9D4C8); }
.transform-side.after { background: linear-gradient(135deg, #E6E2D9, #D9D4C8); }
.transform-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--white); opacity: 0.8; }
.transform-body { padding: 20px 22px; }
.transform-stat { font-family: var(--jakarta); font-size: 22px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 4px; }
.transform-stat span { color: var(--green-dark, #0A0A0A); }
.transform-quote { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin-top: 8px; }
.transform-meta { font-size: 12px; color: var(--text-muted); margin-top: 10px; }

/* Care team */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media(max-width:900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:500px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { background: var(--white); border-radius: var(--radius-lg); padding: 28px 24px; text-align: center; border: 1px solid var(--border); }
.team-photo { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 16px; background: linear-gradient(135deg, #E6E2D9, #D9D4C8); display: flex; align-items: center; justify-content: center; font-family: var(--jakarta); font-size: 28px; font-weight: 700; color: var(--white); }
.team-name { font-family: var(--jakarta); font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.team-creds { font-size: 12.5px; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; }
.team-bio { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }

/* Trust badges row (SSL, HIPAA, pharmacy) */
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; padding: 20px; }
.trust-badge { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.trust-badge svg { color: var(--text-muted); flex-shrink: 0; }

/* Comparison table */
.compare-table { width:100%; max-width:1040px; margin:0 auto; background:var(--white); border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--border); border-collapse:collapse; }
.compare-table th, .compare-table td { padding:18px 20px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--border); vertical-align:top; }
.compare-table th { background:var(--bg-secondary); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--text-primary); }
.compare-table th.brand-shyftmd { background:var(--text-primary); color:var(--white); }
.compare-table td.feature { font-weight:600; color:var(--text-primary); }
.compare-table td.check { color:var(--green); font-weight:700; }
.compare-table td.x { color:#CD2A2A; font-weight:700; }
.compare-table tr:last-child td { border-bottom:none; }
@media(max-width:700px) {
  .compare-table th, .compare-table td { padding:12px 10px; font-size:13px; }
}

/* ======================================================
   CTA BRIDGE — calculator → product handoff
   ====================================================== */
.cta-bridge-wrap { padding: 24px 24px 64px; }
.cta-bridge { background: linear-gradient(135deg, #0A0A0A 0%, #0A0A0A 100%); color: #fff; border-radius: 28px; padding: 56px 56px 52px; max-width: 1100px; margin: 0 auto; position: relative; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.18); }
.cta-bridge::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 60%); pointer-events:none; }
.cta-bridge-eyebrow { position:relative; z-index:1; font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 14px; }
.cta-bridge h2 { position:relative; z-index:1; font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.8px; line-height: 1.1; margin: 0 0 18px; color: #fff; }
.cta-bridge h2 strong { color: #FFFFFF; font-weight: 700; background: linear-gradient(135deg,#FFFFFF 0%,rgba(255,255,255,0.7) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent; }
.cta-bridge p { position:relative; z-index:1; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.82); margin: 0 0 28px; max-width: 720px; }
.cta-bridge-actions { position:relative; z-index:1; display:flex; gap: 14px; flex-wrap: wrap; }
.cta-bridge-btn { display:inline-flex; align-items:center; gap: 10px; padding: 16px 28px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration:none; transition: transform .15s ease, box-shadow .15s ease; }
.cta-bridge-btn.primary { background: #FFFFFF; color: #0A0A0A; box-shadow: 0 12px 32px rgba(255,255,255,0.18); }
.cta-bridge-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255,255,255,0.24); }
.cta-bridge-btn.secondary { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.22); }
.cta-bridge-btn.secondary:hover { background: rgba(255,255,255,0.16); }
.cta-bridge-btn svg { width: 18px; height: 18px; }
.cta-bridge-trust { position:relative; z-index:1; margin-top: 24px; font-size: 13px; color: rgba(255,255,255,0.55); display:flex; gap: 18px; flex-wrap: wrap; }
.cta-bridge-trust span { display: inline-flex; align-items: center; }
.cta-bridge-trust span::before { content: "✓"; color: #F3F0E9; font-weight: 700; margin-right: 6px; }
@media(max-width:640px) { .cta-bridge { padding: 40px 28px 36px; border-radius: 20px; } .cta-bridge-trust { gap: 12px; } }

/* ======================================================
   PRODUCT-PAGE COMPONENTS — trust row, what's in the box,
   competitor link, eligibility micro-quiz
   ====================================================== */

/* "As seen in" press marquee — global, drop the markup on any page.
   Auto-tints to the page background; pages can override with .press-strip[data-tone="warm"] etc. */
.press-strip { padding: 14px 0; background: #FFFFFF; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 18px; overflow: hidden; position: relative; }
.press-strip[data-tone="warm"]  { background: #F3F0E9; }
.press-strip[data-tone="sage"]  { background: #F3F0E9; }
.press-strip[data-tone="sky"]   { background: #F3F0E9; }
.press-strip[data-tone="cream"] { background: #FDFDF7; }
.press-eye { flex-shrink: 0; padding-left: 20px; font-family: var(--inter,'Inter','-apple-system',sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0,0,0,0.40); position: relative; z-index: 2; background: linear-gradient(90deg, currentColor 70%, transparent); padding-right: 18px; color: rgba(0,0,0,0.40); }
.press-strip[data-tone="warm"]  .press-eye { background: linear-gradient(90deg, #F3F0E9 70%, transparent); }
.press-strip[data-tone="sage"]  .press-eye { background: linear-gradient(90deg, #F3F0E9 70%, transparent); }
.press-strip[data-tone="sky"]   .press-eye { background: linear-gradient(90deg, #F3F0E9 70%, transparent); }
.press-strip[data-tone="cream"] .press-eye { background: linear-gradient(90deg, #FDFDF7 70%, transparent); }
.press-strip:not([data-tone]) .press-eye { background: linear-gradient(90deg, #fff 70%, transparent); }
.press-marquee { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); display: flex; }
.press-marquee .press-logos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 56px; flex-shrink: 0; padding-right: 56px; animation: pressMarqueeGlobal 32s linear infinite; }
@keyframes pressMarqueeGlobal { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.press-strip:hover .press-logos { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .press-marquee .press-logos { animation: none; } }
.press-logo { color: #D8D4CE; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; filter: grayscale(1); opacity: 0.85; }
.press-forbes { font-family: 'Times New Roman', Georgia, serif; font-weight: 900; font-style: italic; font-size: 22px; letter-spacing: -0.5px; }
.press-bloomberg { font-family: 'Helvetica Neue', 'Arial Black', Arial, sans-serif; font-weight: 900; font-size: 19px; letter-spacing: -0.7px; }
.press-mh { font-family: 'Helvetica Neue', 'Arial Black', Arial, sans-serif; line-height: 0.95; display: inline-flex; align-items: baseline; gap: 0; }
.press-mh .mh-mens { font-style: italic; font-weight: 900; font-size: 17px; letter-spacing: -0.4px; line-height: 1; }
.press-mh .mh-health { font-weight: 900; font-size: 17px; letter-spacing: -0.4px; line-height: 1; text-transform: capitalize; margin-left: -1px; }
.press-bi { font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 900; font-size: 11.5px; letter-spacing: 0.5px; line-height: 1; display: inline-flex; flex-direction: column; align-items: flex-start; }
.press-bi .bi-line1 { line-height: 1; }
.press-bi .bi-line2 { line-height: 1; margin-top: 2px; }
.press-healthline { font-family: 'Georgia', 'Times New Roman', serif; font-weight: 400; font-style: italic; font-size: 21px; letter-spacing: -0.3px; }
.press-gq { font-family: 'Bodoni 72', 'Didot', 'Times New Roman', serif; font-weight: 900; font-size: 25px; letter-spacing: -0.4px; line-height: 1; }
@media(max-width:760px) {
  .press-strip { padding: 12px 0; gap: 12px; }
  .press-eye { padding-left: 16px; padding-right: 14px; font-size: 10.5px; letter-spacing: 0.16em; }
  .press-marquee .press-logos { gap: 38px; padding-right: 38px; animation-duration: 26s; }
  .press-forbes { font-size: 19px; }
  .press-bloomberg { font-size: 16px; }
  .press-mh .mh-mens, .press-mh .mh-health { font-size: 15px; }
  .press-bi { font-size: 10px; }
  .press-healthline { font-size: 18px; }
  .press-gq { font-size: 21px; }
}

/* Sticky scroll-nav strip (mobile only) — small jump links that follow scroll. */
.opt-sticky-nav { position: sticky; top: 0; z-index: 40; background:#FDFDF7; border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); padding: 12px 0; display: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.opt-sticky-nav-inner { display: flex; gap: 28px; padding: 0 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; justify-content: center; }
.opt-sticky-nav-inner::-webkit-scrollbar { display: none; }
.opt-sticky-nav a { font-family: var(--jakarta,'Plus Jakarta Sans',sans-serif); font-size: 13.5px; font-weight: 700; letter-spacing:-0.1px; color:#0A0A0A; text-decoration: none; white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent; transition: border-color .15s ease; }
.opt-sticky-nav a:hover { border-bottom-color: #0A0A0A; }
@media (max-width: 768px) { .opt-sticky-nav { display: block; } }

/* Trust strip — single line of checkmarks above CTAs */
.trust-strip { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; align-items: center; padding: 14px 18px; margin: 0 auto 18px; max-width: 760px; font-size: 12.5px; font-weight: 600; color: rgba(0,0,0,0.62); border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); background: rgba(255,255,255,0.4); border-radius: 4px; }
.trust-strip span { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.01em; }
.trust-strip span::before { content: "\2713"; color: #0A0A0A; font-weight: 700; font-size: 13px; }
.trust-strip.dark { color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); }
.trust-strip.dark span::before { color: #F3F0E9; }
.trust-strip.tight { padding: 10px 14px; margin: 0 auto 12px; font-size: 12px; gap: 6px 18px; }

/* Compared-to link — tiny pill in product hero */
.compared-to { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; color: rgba(0,0,0,0.55); text-decoration: none; padding: 6px 12px; border-radius: 100px; background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08); transition: background .15s, color .15s; }
.compared-to:hover { background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.85); }
.compared-to svg { width: 13px; height: 13px; }
.compared-to strong { color: rgba(0,0,0,0.78); font-weight: 700; margin-right: 2px; }

/* "What's in the box" section */
.witb-section { padding: 56px 0 48px; background: #FDFDF7; border-top: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05); }
.witb-eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.5); text-align: center; margin-bottom: 10px; }
.witb-h2 { font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.6px; text-align: center; margin: 0 auto 6px; max-width: 720px; color: #0A0A0A; }
.witb-sub { text-align: center; font-size: 15px; color: rgba(0,0,0,0.55); max-width: 600px; margin: 0 auto 36px; line-height: 1.55; }
.witb-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media(max-width:920px) { .witb-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media(max-width:480px) { .witb-grid { grid-template-columns: 1fr 1fr; } }
.witb-item { background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: 18px; padding: 24px 20px; text-align: center; transition: transform .15s, box-shadow .15s; }
.witb-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.witb-icon { width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 14px; background: linear-gradient(135deg, #F3F0E9, #F3F0E9); display: inline-flex; align-items: center; justify-content: center; color: #0A0A0A; }
.witb-icon svg { width: 24px; height: 24px; }
.witb-title { font-size: 14.5px; font-weight: 700; letter-spacing: -0.2px; margin-bottom: 4px; color: #0A0A0A; }
.witb-desc { font-size: 12.5px; color: rgba(0,0,0,0.55); line-height: 1.45; }

/* Eligibility micro-quiz (TRT / enclomiphene) */
.elig-section { padding: 56px 0 56px; background: #FDFDF7; border-top: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05); }
.elig-card { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 24px; padding: 36px 36px 32px; box-shadow: 0 12px 32px rgba(0,0,0,0.04); }
@media(max-width:560px) { .elig-card { padding: 28px 22px 24px; border-radius: 18px; } }
.elig-eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #5C5750; margin-bottom: 8px; }
.elig-card h2 { font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: clamp(22px, 3vw, 28px); font-weight: 700; letter-spacing: -0.5px; margin: 0 0 8px; color: #0A0A0A; }
.elig-card .elig-sub { font-size: 14px; color: rgba(0,0,0,0.6); margin: 0 0 22px; }
.elig-q { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(0,0,0,0.06); }
.elig-q:first-of-type { border-top: none; padding-top: 4px; }
.elig-q-text { flex: 1; font-size: 15px; color: #0A0A0A; font-weight: 500; line-height: 1.4; }
.elig-q-yn { display: flex; gap: 8px; flex-shrink: 0; }
.elig-q-btn { padding: 8px 18px; border-radius: 100px; border: 1.5px solid rgba(0,0,0,0.12); background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 600; color: rgba(0,0,0,0.7); cursor: pointer; transition: all .15s; }
.elig-q-btn:hover { background: rgba(0,0,0,0.04); }
.elig-q-btn.selected { border-color: #0A0A0A; background: #0A0A0A; color: #fff; }
.elig-result { margin-top: 22px; padding: 22px 24px; border-radius: 16px; background: linear-gradient(135deg, #F3F0E9, #F3F0E9); border: 1px solid rgba(10,10,10,0.2); display: none; }
.elig-result.show { display: block; }
.elig-result h3 { font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 6px; color: #0A0A0A; }
.elig-result p { font-size: 14px; color: rgba(0,0,0,0.7); margin: 0 0 16px; line-height: 1.5; }
.elig-result a.elig-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; background: #0A0A0A; color: #fff; border-radius: 100px; font-weight: 700; font-size: 14.5px; text-decoration: none; box-shadow: 0 8px 22px rgba(10,10,10,0.26); transition: transform .15s; }
.elig-result a.elig-cta:hover { transform: translateY(-1px); }
.elig-result a.elig-cta svg { width: 14px; height: 14px; }
.elig-score { font-size: 12.5px; color: rgba(0,0,0,0.5); margin-top: 12px; }

/* Testimonial stat strip — start → current weight */
.testimonial-stat-strip { display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(10,10,10,0.08); border: 1px solid rgba(10,10,10,0.18); border-radius: 10px; margin-bottom: 14px; font-size: 12.5px; font-weight: 600; color: #0A0A0A; }
.testimonial-stat-strip .from { color: rgba(0,0,0,0.5); text-decoration: line-through; font-weight: 500; }
.testimonial-stat-strip .arrow { color: rgba(0,0,0,0.3); }
.testimonial-stat-strip .to { color: #0A0A0A; font-weight: 700; }
.testimonial-stat-strip .week { margin-left: auto; font-size: 11.5px; color: rgba(0,0,0,0.5); font-weight: 500; }

/* ======================================================
   QUICK ANSWER box — AEO / LLM-citation block
   ====================================================== */
.quick-answer { max-width: 760px; margin: 0 auto 20px; padding: 14px 18px; background: #FDFDF7; border: 1px solid #E6E2D9; border-left: 3px solid #0A0A0A; border-radius: 10px; }
.quick-answer-eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #0A0A0A; margin-bottom: 5px; }
.quick-answer p { font-size: 13.5px; line-height: 1.55; color: rgba(0,0,0,0.78); margin: 0; font-weight: 400; }
.quick-answer p strong { color: #0A0A0A; font-weight: 600; }
.quick-answer cite { font-size: 11.5px; color: rgba(0,0,0,0.5); display: block; margin-top: 6px; font-style: normal; }
@media(max-width:640px) { .quick-answer { padding: 12px 14px; border-radius: 8px; } .quick-answer p { font-size: 13px; } }

/* ======================================================
   LEGITSCRIPT BADGE — reusable trust signal component
   ====================================================== */
.legit-row { display:inline-flex; align-items:center; gap:14px; padding:10px 14px 10px 10px; background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:12px; text-decoration:none; transition: all .15s; }
.legit-row:hover { border-color:rgba(0,0,0,0.18); box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.legit-row img { width:48px; height:auto; flex-shrink:0; display:block; }
.legit-row .legit-text { display:flex; flex-direction:column; line-height:1.2; }
.legit-row .legit-text strong { font-size:12.5px; font-weight:700; color:#0A0A0A; letter-spacing:-0.1px; }
.legit-row .legit-text em { font-style:normal; font-size:10.5px; font-weight:600; color:rgba(0,0,0,0.55); letter-spacing:0.08em; text-transform:uppercase; margin-top:1px; }

/* Dark variant — for dark-background sections */
.legit-row.dark { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.14); }
.legit-row.dark .legit-text strong { color:#fff; }
.legit-row.dark .legit-text em { color:rgba(255,255,255,0.6); }

/* Stack of trust badges (used in hero / checkout) */
.trust-badge-stack { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0 0; }
.trust-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:100px; font-size:12.5px; font-weight:600; color:rgba(0,0,0,0.7); text-decoration:none; }
.trust-badge.dark { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.16); color:rgba(255,255,255,0.85); }
.trust-badge img { width:20px; height:auto; flex-shrink:0; }
.trust-badge svg { width:14px; height:14px; flex-shrink:0; color:#0A0A0A; }
.trust-badge.dark svg { color:#F3F0E9; }

/* Mini inline shield for compact contexts */
.legit-mini { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:rgba(0,0,0,0.7); text-decoration:none; }
.legit-mini img { width:22px; height:auto; flex-shrink:0; }
.legit-mini.dark { color:rgba(255,255,255,0.85); }

/* =====================================================================
   Sitewide footer — giant brand wordmark at the bottom of every page.
   The wordmark <img class="footer-wordmark"> sits right before </footer>.
   Forced with !important so it survives per-page footer overrides.
   ===================================================================== */
.footer { overflow: hidden !important; padding-bottom: 0 !important; }
.footer-wordmark {
  display: block !important;
  width: 100% !important;
  max-width: 2200px !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: -16px !important;
  margin-bottom: 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  /* Grey, not white. invert(1) rendered a pure-white wordmark. */
  filter: brightness(0) invert(1) !important;
  opacity: 0.30 !important;
  user-select: none;
  pointer-events: none;
  vertical-align: bottom !important;
}
@media (max-width: 600px) {
  .footer-wordmark {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: -6px !important;
    padding: 0 14px !important;
  }
}

/* =====================================================================
   Free-tool / Calculator pages — unify typography with home page hero.
   Home hero uses Inter @ weight 500, letter-spacing -0.04em.
   Force every heading on calculator pages onto the same family so the
   pages no longer mix Plus Jakarta Sans + Inter.
   ===================================================================== */
.calc-hero h1, .calc-info h1,
.calc-hero h2, .calc-hero h3,
.result-headline, .result-value, .result-category,
.ideal-big, .pep-name, .date-value, .stat-num,
.content-inner h2, .content-inner h3, .content-inner h4,
.tolose-h, .summary .big,
.cta-bridge h2,
.faq-item summary {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}
.calc-hero h1, .calc-info h1 {
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.15 !important;
  font-size: clamp(34px, 5vw, 56px) !important;
}
/* Section headlines inherit the same family but keep their semantic sizing */
.content-inner h2, .cta-bridge h2 {
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
}
/* Result numbers stay heavy for visual weight, but in the same family */
.result-value, .ideal-big, .date-value {
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
}

/* ===== HIGHLIGHT SYSTEM — sitewide visual emphasis ===== */
/* Yellow marker swipe. HARD RULE: never a solid full-height block behind a
   word. The band covers roughly the lower half of the text so clear space is
   left above and below, the way a real highlighter reads. This rule used to be
   a solid fill and, sitting later in the file than the correct .hl at the top,
   it silently won on every page that did not redefine .hl inline. */
.hl {
  background: linear-gradient(180deg,
    transparent 0,
    transparent 52%,
    #F3F0E9 52%,
    #F3F0E9 92%,
    transparent 92%);
  color: #0A0A0A;
  padding: 0 4px;
  border-radius: 0;
  font-weight: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: none;
}
/* Solid yellow chip — for emphasized words inside copy */
.hl-pill {
  display: inline-block;
  background: #F3F0E9;
  color: #0A0A0A;
  padding: 2px 10px;
  border-radius: 6px;
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Black on yellow — strongest emphasis (badges, "first of its kind", etc.) */
.hl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F3F0E9;
  color: #0A0A0A;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  vertical-align: middle;
}
.hl-badge .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #0A0A0A;
}
/* Inverse: yellow text on black pill — for premium "only on ShyftMD" moments */
.hl-badge-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0A0A0A;
  color: #F3F0E9;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  vertical-align: middle;
}
/* Ambient yellow glow — wrap a card to make it visually pop */
.hl-glow {
  position: relative;
}
.hl-glow::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(60% 70% at 50% 50%, rgba(243,240,233,0.25), transparent 70%);
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}
/* Black underline swipe — alternative emphasis when yellow doesn't fit */
.hl-under {
  background: linear-gradient(180deg, transparent calc(100% - 5px), rgba(10,10,10,0.85) calc(100% - 5px), rgba(10,10,10,0.85) calc(100% - 1px), transparent calc(100% - 1px));
  padding: 0 2px 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* === COMPACT CARE-TEAM TRUST STRIP === */
.opt-team-strip {
  display: flex; align-items: center; gap: 18px;
  max-width: 720px; margin: 56px auto;
  padding: 16px 22px;
  background: #fff; border: 1px solid rgba(0,0,0,0.08);
  border-radius: 100px;
  text-decoration: none; color: #0A0A0A;
  box-shadow: 0 6px 22px -12px rgba(0,0,0,0.10);
  transition: transform .15s ease, box-shadow .15s ease;
}
.opt-team-strip:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -14px rgba(0,0,0,0.14); }
.opt-team-strip-avatars { display: flex; flex-shrink: 0; }
.opt-team-strip-avatars img {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; object-position: center 22%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.20);
  display: block;
}
.opt-team-strip-avatars img + img { margin-left: -12px; }
.opt-team-strip-text { flex: 1; min-width: 0; }
.opt-team-strip-headline {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 700;
  color: #0A0A0A; margin: 0 0 2px;
  line-height: 1.35;
}
.opt-team-strip-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px; font-weight: 500;
  color: rgba(0,0,0,0.55); margin: 0;
  line-height: 1.4;
}
.opt-team-strip-sub strong { color: #0A0A0A; font-weight: 700; }
.opt-team-strip-arrow {
  flex-shrink: 0; font-size: 18px; color: #0A0A0A;
  margin-left: 8px; font-weight: 700;
}
@media (max-width: 600px) {
  .opt-team-strip {
    flex-direction: column; text-align: center;
    gap: 14px; border-radius: 20px; padding: 22px 18px;
    margin: 40px 20px;
  }
  .opt-team-strip-arrow { display: none; }
}

/* ============================================================
   Protocols dropdown — sitewide desktop nav extension
   Hover-intent: dropdown stays visible 1s after pointer leaves the
   parent <li>, so users have time to move down to the menu items.
   A transparent ::after pseudo-element bridges the 8px gap between
   the nav item and the dropdown so :hover stays active across it.
   Sibling-collision: hovering one dropdown instantly closes any
   other still in its 1s grace period.
   Click toggle (.open class) still works independently.
   ============================================================ */
.nav-links li.nav-protocols { position: relative; }
.nav-links li.nav-protocols > a { cursor: pointer; }
.nav-links li.nav-protocols::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 16px;
  background: transparent;
  pointer-events: none;
}
.nav-links li.nav-protocols:hover::after { pointer-events: auto; }
.nav-protocols-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 100%; left: 0;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 22px 44px -20px rgba(10,10,10,0.18);
  min-width: 230px;
  z-index: 1001;
  list-style: none;
  margin: 8px 0 0;
  transition: opacity 0.2s ease 1s, visibility 0s linear 1s;
}
.nav-links li.nav-protocols:hover > .nav-protocols-menu,
.nav-links li.nav-protocols:focus-within > .nav-protocols-menu,
.nav-links li.nav-protocols.open > .nav-protocols-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease 0s, visibility 0s linear 0s;
}
/* Sibling-collision: when one nav-protocols is being hovered/focused,
   any other nav-protocols in the same .nav-links should immediately
   close its menu (no 1s grace period). Prevents two dropdowns
   overlapping during a quick mouse traversal across the nav. */
.nav-links:has(li.nav-protocols:hover) li.nav-protocols:not(:hover) > .nav-protocols-menu,
.nav-links:has(li.nav-protocols:focus-within) li.nav-protocols:not(:focus-within):not(:hover) > .nav-protocols-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.1s ease 0s, visibility 0s linear 0.1s !important;
}
.nav-protocols-menu li { margin: 0 !important; }
.nav-protocols-menu a {
  display: block;
  padding: 10px 14px !important;
  text-decoration: none;
  color: #0A0A0A !important;
  font-weight: 600;
  font-size: 14px !important;
  border-radius: 8px;
  letter-spacing: -0.1px;
  background: transparent !important;
}
.nav-protocols-menu a .lab {
  display: block;
  font-size: 11.5px;
  color: rgba(0,0,0,0.55);
  font-weight: 500;
  margin-top: 1px;
}
.nav-protocols-menu a:hover { background: rgba(243,240,233,0.45) !important; }

/* ============================================================
   Treatments dropdown — combined Treatments + Protocols menu
   Sitewide desktop + mobile nav extension. Matches the hover-delay +
   hover-bridge pattern from the block above.
   ============================================================ */
.nav-links li.nav-protocols { position: relative; }
.nav-links li.nav-protocols > a { cursor: pointer; }
.nav-protocols-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 100%; left: 0;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 22px 44px -20px rgba(10,10,10,0.18);
  min-width: 270px;
  z-index: 1001;
  list-style: none;
  margin: 8px 0 0;
  transition: opacity 0.15s ease 0.6s, visibility 0s linear 0.75s;
}
.nav-links li.nav-protocols:hover .nav-protocols-menu,
.nav-links li.nav-protocols:focus-within .nav-protocols-menu,
.nav-links li.nav-protocols.open .nav-protocols-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.15s ease 0s, visibility 0s linear 0s;
}
.nav-protocols-menu li { margin: 0 !important; list-style: none !important; }
.nav-protocols-menu li::before { content: none !important; }
.nav-protocols-menu a {
  display: block;
  padding: 9px 14px !important;
  text-decoration: none;
  color: #0A0A0A !important;
  font-weight: 600;
  font-size: 14px !important;
  border-radius: 8px;
  letter-spacing: -0.1px;
  background: transparent !important;
}
.nav-protocols-menu a:hover { background: rgba(243,240,233,0.45) !important; }

/* Section headers inside the dropdown */
.nav-protocols-menu .nav-section-head {
  padding: 10px 14px 6px !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
  pointer-events: none;
  background: transparent !important;
}
.nav-protocols-menu .nav-section-head.nav-section-protocols {
  color: #8A867D;
  margin-top: 6px;
  border-top: 1px solid rgba(138,134,125,0.20);
  padding-top: 12px !important;
}

/* Protocol items styled to stand out — warm cream pill block */
.nav-protocols-menu li.nav-protocol-item { padding: 0 4px; }
.nav-protocols-menu li.nav-protocol-item a {
  background: linear-gradient(180deg, #F3F0E9, #F3F0E9) !important;
  color: #0A0A0A !important;
  margin: 3px 0;
  border: 1px solid rgba(138,134,125,0.25);
  padding: 11px 14px !important;
}
.nav-protocols-menu li.nav-protocol-item a:hover {
  background: linear-gradient(180deg, #F3F0E9, #E6E2D9) !important;
  border-color: rgba(138,134,125,0.45);
}
.nav-protocols-menu li.nav-protocol-item a .lab {
  display: block;
  font-size: 11.5px;
  color: rgba(0,0,0,0.55);
  font-weight: 500;
  margin-top: 2px;
}

/* Apex Panel — Flagship section + item, dark luxe variant of nav-protocol-item */
.nav-protocols-menu .nav-section-head.nav-section-apex {
  color: #8A867D;
  margin-top: 6px;
  border-top: 1px solid rgba(138,134,125,0.20);
  padding-top: 12px !important;
}
.nav-protocols-menu li.nav-apex-item { padding: 0 4px; }
.nav-protocols-menu li.nav-apex-item a {
  background: linear-gradient(160deg, #0A0A0A 0%, #0A0A0A 100%) !important;
  color: #F3F0E9 !important;
  margin: 3px 0;
  border: 1px solid rgba(138,134,125,0.32);
  padding: 11px 14px !important;
}
.nav-protocols-menu li.nav-apex-item a:hover {
  background: linear-gradient(160deg, #0A0A0A 0%, #0A0A0A 100%) !important;
  border-color: rgba(138,134,125,0.55);
  color: #F3F0E9 !important;
}
.nav-protocols-menu li.nav-apex-item a .lab {
  display: block;
  font-size: 11.5px;
  color: rgba(250,246,239,0.70);
  font-weight: 500;
  margin-top: 2px;
}

/* Mobile: dropdown stacks inline when the burger menu is open */
@media (max-width: 900px) {
  .nav-links li.nav-protocols > a { display: block; }
  .nav-protocols-menu {
    position: static;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 6px 0 0;
    min-width: auto;
  }
  .nav-protocols-menu a { padding: 12px 18px !important; }
  .nav-protocols-menu li.nav-protocol-item { padding: 0; }
  .nav-protocols-menu li.nav-protocol-item a { margin: 4px 12px; }
  .nav-protocols-menu li.nav-apex-item { padding: 0; }
  .nav-protocols-menu li.nav-apex-item a { margin: 4px 12px; }
}

/* =====================================================================
   NAV PRIMARY ACTION — brand-yellow pill (matches the homepage sitewide)
   #F3F0E9 only ever sits under DARK text, per the highlighter rule.
   !important is required: the nav link carries inline color/font-weight.
   In the mobile burger drawer the pill hugs its text via align-self so it
   does not stretch the full drawer width.
   ===================================================================== */
.nav-links .nav-find-protocol {
  background: #F3F0E9 !important;
  color: #0A0A0A !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
  border-radius: 100px !important;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.nav-links .nav-find-protocol:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.35);
  color: #0A0A0A !important;
}
@media (max-width: 768px) {
  .nav-links .nav-find-protocol {
    align-self: flex-start;
    width: auto !important;
    margin: 4px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links .nav-find-protocol { transition: none; }
  .nav-links .nav-find-protocol:hover { transform: none; box-shadow: none; }
}

/* == OW-SWITCH START == */
/* == OW-VT START == */
/* --- cross-document dissolve between the two worlds ---
   The incoming document sits underneath at full opacity; the outgoing one
   dissolves off the top of it. That ordering is load-bearing: shyftmd-topbar.js
   injects the announcement bar at DOMContentLoaded as body.firstChild and
   pushes the page down, so an incoming page revealed too early visibly jumps.
   Held behind the outgoing page, that reflow happens out of sight.
   Curve is a true ease-in-out, so it eases out of one world and into the next.
   Both documents must declare it, which is why it lives in the shared block. */
@view-transition{navigation:auto;}
::view-transition-image-pair(root){isolation:auto;}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation:none;}
::view-transition-new(root){opacity:1;z-index:0;}
::view-transition-old(root){opacity:1;z-index:1;animation:owDissolve 1.15s cubic-bezier(.65,0,.35,1) both;}
@keyframes owDissolve{from{opacity:1;}to{opacity:0;}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root){animation-duration:.01ms;}}
/* == OW-VT END == */

/* --- ShyftMD Black footer mark: wordmark + BLACK pill, echoing the page's own lockup.
   Footers are #000, so the wordmark is inverted to read white. --- */
.ob-mark{display:inline-flex;align-items:center;gap:7px;text-decoration:none;vertical-align:middle;}
.ob-mark img{height:15px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.92;transition:opacity .18s;}
.ob-mark span{font-family:'Inter',sans-serif;font-size:8.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#0A0A0A;background:#fff;border-radius:3px;padding:3px 6px 2px;line-height:1;}
.ob-mark:hover img{opacity:1;}
/* the canonical footer column is a vertical list, so the mark takes its own row.
   the method mini-footer is a horizontal dot-separated row, so it stays inline. */
.shyftmd-footer-grid .ob-mark,.of-grid .ob-mark,.footer-grid .ob-mark{display:flex;align-items:center;gap:9px;}
/* sits in a column of 18px links, so 17px read undersized. */
/* logo-shyftmd.svg carries 7.25% transparent padding on its left edge, so the
   ink sat ~5px right of the column. Pull it back by that inset so the
   wordmark aligns with the text links above it. */
.shyftmd-footer-grid .ob-mark img,.of-grid .ob-mark img,.footer-grid .ob-mark img{height:33px;margin-left:-4.8px;}
.shyftmd-footer-grid .ob-mark span,.of-grid .ob-mark span,.footer-grid .ob-mark span{font-size:10px;letter-spacing:.2em;padding:5px 8px 4px;}

/* --- world switch: segmented in the bar (desktop), full width in the drawer (phone) --- */
.ow-switch{display:inline-flex;align-items:center;background:rgba(0,0,0,.055);border-radius:100px;padding:3px;gap:2px;flex-shrink:0;vertical-align:middle;}
.ow-bar{margin-left:18px;}
.ow-seg{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:12.5px;font-weight:700;line-height:1;padding:8px 15px;border-radius:100px;color:rgba(0,0,0,.55);text-decoration:none;white-space:nowrap;transition:background .18s,color .18s,box-shadow .18s;}
.ow-seg:hover{color:#0A0A0A;}
.ow-seg.ow-on{background:#fff;color:#0A0A0A;box-shadow:0 1px 3px rgba(0,0,0,.12);}
.nav-inner > .logo{flex-shrink:0;}
.ow-switch ~ .nav-links{gap:22px;}
.ow-switch ~ .nav-links > li > a{white-space:nowrap;}
@media(max-width:1180px){.ow-switch ~ .nav-links{gap:16px;}.ow-bar{margin-left:12px;}.ow-seg{font-size:11.5px;padding:7px 12px;}}
@media(max-width:1000px){
  .ow-switch ~ .nav-links{gap:9px;}
  .ow-switch ~ .nav-links > li > a{font-size:13px;}
  .ow-bar{margin-left:10px;}
  .ow-seg{font-size:11px;padding:6px 10px;}
  .nav-inner > .logo img{height:44px!important;}
}
@media(min-width:901px){.ow-search-label{display:none;}.ow-talk-li{display:none;}.nav-search-btn{gap:0!important;}}
.ow-short{display:none;}
@media(max-width:1080px){.ow-full{display:none;}.ow-short{display:inline;}}
.ow-drawer-li{display:none;}
@media(max-width:900px){
  .ow-bar{display:none;}
  .ow-drawer-li{display:block;width:100%;margin-bottom:6px;}
  .ow-drawer{display:flex;width:100%;padding:4px;}
  .ow-drawer .ow-seg{flex:1;text-align:center!important;padding:11px 0;font-size:13px;display:block;}
  .ow-drawer .ow-full{display:inline;}
  .ow-drawer .ow-short{display:none;}
}
/* == OW-SWITCH END == */

/* ── States directory (states.html + per-state cross-links) ───────────── */
.oa-st-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px 70px; }
.oa-st-region { margin: 0 0 42px; }
.oa-st-region-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:0 0 14px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.oa-st-region-head h2 { font-family: var(--jakarta); font-size:22px; font-weight:700; letter-spacing:-0.5px; margin:0; }
.oa-st-region-head span { font-size:12px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:rgba(0,0,0,0.42); }
.oa-st-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(212px, 1fr)); gap:12px; }
.oa-st-card { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:15px 17px; text-decoration:none; color:inherit; transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.oa-st-card:hover { transform:translateY(-2px); border-color:#0A0A0A; box-shadow:0 12px 30px -18px rgba(0,0,0,0.28); }
.oa-st-card b { font-family: var(--jakarta); font-size:15.5px; font-weight:700; letter-spacing:-0.2px; }
.oa-st-card i { font-style:normal; font-size:15px; color:rgba(0,0,0,0.34); }
.oa-st-card:hover i { color:#0A0A0A; }

/* Per-state page cross-link strip */
.oa-st-near { max-width:980px; margin:0 auto; padding:44px 24px 8px; }
.oa-st-near-inner { background:#FDFDF7; border:1px solid var(--border); border-radius:18px; padding:26px 28px; }
.oa-st-near h2 { font-family: var(--jakarta); font-size:19px; font-weight:700; letter-spacing:-0.4px; margin:0 0 6px; }
.oa-st-near p { font-size:14.5px; color:var(--text-secondary); line-height:1.6; margin:0 0 16px; }
.oa-st-near ul { list-style:none; display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; }
.oa-st-near li { margin:0; }
.oa-st-near a { display:inline-block; background:#fff; border:1px solid var(--border); border-radius:100px; padding:8px 15px; font-size:13.5px; font-weight:600; color:#0A0A0A; text-decoration:none; transition:border-color 160ms ease, background 160ms ease; }
.oa-st-near a:hover { border-color:#0A0A0A; background:#F3F0E9; }
.oa-st-near a.oa-st-all { background:#0A0A0A; color:#fff; border-color:#0A0A0A; }
.oa-st-near a.oa-st-all:hover { background:#0A0A0A; color:#F3F0E9; }
@media (max-width: 560px) {
  .oa-st-near-inner { padding:22px 18px; }
  .oa-st-grid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Biomarker A–Z static directory */
.oa-bm-az { max-width:1120px; margin:0 auto; padding:10px 24px 70px; }
.oa-bm-az h2 { font-family: var(--jakarta); font-size:clamp(24px,3vw,32px); font-weight:700; letter-spacing:-0.8px; margin:0 0 8px; text-align:center; }
.oa-bm-az .oa-bm-sub { text-align:center; font-size:15.5px; color:rgba(246,241,231,0.62); line-height:1.6; max-width:620px; margin:0 auto 26px; }
.oa-bm-az-list { columns: 4 220px; column-gap:26px; }
/* The biomarker hub is a near-black page — these must be light-on-dark. */
.oa-bm-az-list a { display:block; break-inside:avoid; font-size:14px; line-height:1.55; padding:5px 0; color:rgba(246,241,231,0.66); text-decoration:none; border-bottom:1px solid transparent; }
.oa-bm-az-list a:hover { color:#F3F0E9; border-bottom-color:rgba(243,240,233,0.55); }

/* Pillar-guide comparison tables must scroll, not clip.
   Measured at 390px: the HRT protocol table ran 409px wide inside a 390px
   parent with overflow:visible, so the third column was simply unreachable.
   Hold a min-width and scroll — never shrink the type. */
/* Applies to EVERY comparison table, not just the pillar guides. 130 of the 261
   articles carry one, and at 390px they measured 450-513px wide inside a 390px
   viewport — which does not just clip, it expands the layout viewport and makes
   the whole article render zoomed out on a phone. The pillar-scoped version of
   this rule missed all of them. */
/* 2026-09-30: thead and tbody used to be two separate display:table boxes, so
   their columns didn't line up and the sideways scroll had no visible cue.
   Now the rows share one table inside the scroll box, cells keep a readable
   minimum width, and edge shadows show when there is more to scroll. */
@media (max-width: 720px) {
  table.comparison-table {
    display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
    background:
      linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left center / 40px 100% no-repeat local,
      linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.16),transparent) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.16),transparent) right center / 12px 100% no-repeat scroll;
  }
  table.comparison-table th,
  table.comparison-table td { min-width:112px; }
}

/* == NAV CATEGORY HEADS START == */
/* Group labels use the gold small caps + warm hairline the PROTOCOLS label
   already used, so every section header in this menu is one system. Also
   carries the Apex block and Flagship label, which live only here and so
   never reached index.html, lab-panels.html or blog.html. */
.nav-links li.nav-protocols > ul.nav-protocols-menu > li > a.nav-section-head{pointer-events:auto!important;display:flex!important;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;cursor:pointer;margin-top:10px!important;padding:14px 14px 8px!important;border-top:1px solid rgba(138,134,125,0.20)!important;background:transparent!important;}
.nav-links li.nav-protocols > ul.nav-protocols-menu > li:first-child > a.nav-section-head{border-top:0!important;margin-top:0!important;padding-top:12px!important;}
.nav-links li.nav-protocols > ul.nav-protocols-menu > li > a.nav-section-head:hover{background:transparent!important;}
.nav-links li.nav-protocols > ul.nav-protocols-menu > li > a.nav-section-head .hublabel{background:none!important;border:0!important;padding:0!important;font-size:10px!important;font-weight:800!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:#8A867D!important;line-height:1.1;transition:color .15s ease;}
.nav-links li.nav-protocols > ul.nav-protocols-menu > li > a.nav-section-head:hover .hublabel{color:#0A0A0A!important;}
.nav-links li.nav-protocols > ul.nav-protocols-menu > li > a.nav-section-head .hubarrow{opacity:0;font-size:11px;letter-spacing:0;color:#8A867D;transition:opacity .15s ease,transform .15s ease;}
.nav-links li.nav-protocols > ul.nav-protocols-menu > li > a.nav-section-head:hover .hubarrow{opacity:.9;transform:translateX(2px);}
.nav-links li.nav-protocols > ul.nav-protocols-menu > li.nav-section-head.nav-section-apex{color:#8A867D!important;margin-top:6px;border-top:1px solid rgba(138,134,125,0.20);padding-top:12px!important;}
.nav-links li.nav-protocols > ul.nav-protocols-menu > li.nav-apex-item{padding:0 4px;}
.nav-links li.nav-protocols > ul.nav-protocols-menu > li.nav-apex-item > a{background:linear-gradient(160deg,#0A0A0A 0%,#0A0A0A 100%)!important;color:#F3F0E9!important;margin:3px 0;border:1px solid rgba(138,134,125,0.32);padding:11px 14px!important;}
.nav-links li.nav-protocols > ul.nav-protocols-menu > li.nav-apex-item > a:hover{background:linear-gradient(160deg,#0A0A0A 0%,#0A0A0A 100%)!important;border-color:rgba(138,134,125,0.55);color:#F3F0E9!important;}
.nav-links li.nav-protocols > ul.nav-protocols-menu > li.nav-apex-item > a .lab{display:block;font-size:11.5px;color:rgba(250,246,239,0.70)!important;font-weight:500;margin-top:2px;}

/* == NAV CATEGORY HEADS END == */