/* ===========================================================
   PrescriberNow HealthPass — Design System
   Brand: Deep Trust Blue #001B72 · Med Blue #2A7DE2 · Sky Blue #8BC6E8
          Soft Blue #DCE3EC · Deep Purple #310070
   Type: Fahkwang (primary) · Source Serif 4 italic (Chaparral Pro sub)
   =========================================================== */

:root {
  --deep-trust-blue: #001B72;
  --med-blue: #2A7DE2;
  --sky-blue: #8BC6E8;
  --soft-blue: #DCE3EC;
  --deep-purple: #310070;

  --ink: #10173A;
  --ink-soft: #4A5578;
  --white: #FFFFFF;
  --bg: #FFFFFF;
  --bg-alt: #F6F8FC;
  --border: #E3E8F2;

  --success: #1E9E6B;

  --grad-hero: linear-gradient(135deg, #001B72 0%, #2A50A8 45%, #2A7DE2 100%);
  --grad-purple: linear-gradient(135deg, #310070 0%, #4A1C8C 60%, #2A7DE2 130%);
  --grad-sky: linear-gradient(135deg, #EAF3FB 0%, #DCE3EC 100%);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(16, 23, 58, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 23, 58, 0.10);
  --shadow-lg: 0 20px 48px rgba(16, 23, 58, 0.16);

  --container: 1200px;
  --font-body: "Fahkwang", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; color: var(--deep-trust-blue); }
p { margin: 0 0 1em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.bg-alt { background: var(--bg-alt); }
.bg-navy { background: var(--grad-hero); color: var(--white); }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: var(--white); }
.bg-purple { background: var(--grad-purple); color: var(--white); }
.bg-purple h1, .bg-purple h2, .bg-purple h3 { color: var(--white); }
.hero h1, .hero h2, .hero h3 { color: var(--white); }

/* ---------- Hero atmosphere ----------
   Dark panels were flat gradient fills. These layers add depth without a single
   image request: two soft color blooms, a fine grid that fades out, and a
   light sweep across the top edge. All decorative and pointer-events:none, so
   nothing interferes with the content sitting above them.                    */
.hero, .page-hero, .bg-navy, .bg-purple { position: relative; isolation: isolate; overflow: hidden; }
.hero > *, .page-hero > *, .bg-navy > *, .bg-purple > * { position: relative; z-index: 2; }

.hero::before, .page-hero::before, .bg-navy::before, .bg-purple::before {
  content: "";
  position: absolute;
  /* inset:0, never negative — a pseudo-element that extends past its parent can
     widen the document if any ancestor's overflow clip is bypassed. The blooms
     get their spread from the gradient radii instead. */
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 58% at 78% 8%,  rgba(139,198,232,.34) 0%, rgba(139,198,232,0) 62%),
    radial-gradient(52% 62% at 6% 96%,  rgba(49,0,112,.46)   0%, rgba(49,0,112,0)   60%),
    radial-gradient(38% 46% at 42% 108%, rgba(42,125,226,.30) 0%, rgba(42,125,226,0) 66%);
  animation: heroDrift 26s ease-in-out infinite alternate;
}

/* Fine grid, strongest at the top and dissolving downward. */
.hero::after, .page-hero::after, .bg-navy::after, .bg-purple::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 72%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 72%);
}

/* A single bright seam along the top edge — reads as light catching an edge. */
.hero, .page-hero, .bg-navy, .bg-purple {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

@keyframes heroDrift {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1.03); }
  to   { transform: translate3d(2.5%,  1.5%, 0) scale(1.09); }
}

/* The light sections use the same idea at a whisper, so the page feels related
   rather than "dark bits are styled, light bits are blank". */
.bg-alt { position: relative; isolation: isolate; overflow: hidden; }
.bg-alt > * { position: relative; z-index: 2; }
.bg-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 52% at 88% 4%,  rgba(42,125,226,.10) 0%, rgba(42,125,226,0) 64%),
    radial-gradient(44% 56% at 4% 100%, rgba(49,0,112,.07)   0%, rgba(49,0,112,0)   62%);
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .page-hero::before, .bg-navy::before, .bg-purple::before { animation: none; }
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--med-blue);
  background: rgba(42, 125, 226, .1);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.bg-navy .eyebrow, .bg-purple .eyebrow, .hero .eyebrow {
  color: var(--white);
  background: rgba(255, 255, 255, .15);
}

h1 { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -.01em; }
h2 { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.01em; }
h3 { font-size: 21px; }
.lede { font-size: 19px; color: var(--ink-soft); font-weight: 300; max-width: 640px; }
.bg-navy .lede, .bg-purple .lede { color: rgba(255,255,255,.85); }
.serif-quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head p { margin-left: auto; margin-right: auto; }
.section-head.left p { margin-left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--med-blue);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--deep-trust-blue); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary {
  background: transparent;
  color: var(--deep-trust-blue);
  border-color: var(--deep-trust-blue);
}
.btn-secondary:hover { background: var(--deep-trust-blue); color: var(--white); transform: translateY(-1px); }
.bg-navy .btn-secondary, .bg-purple .btn-secondary, .page-hero .btn-secondary, .hero .btn-secondary { color: var(--white); border-color: rgba(255,255,255,.6); }
.bg-navy .btn-secondary:hover, .bg-purple .btn-secondary:hover, .page-hero .btn-secondary:hover, .hero .btn-secondary:hover { background: var(--white); color: var(--deep-trust-blue); }
.btn-white { background: var(--white); color: var(--deep-trust-blue); }
.btn-white:hover { background: var(--soft-blue); transform: translateY(-1px); }
.btn-purple { background: var(--deep-purple); color: var(--white); }
.btn-purple:hover { background: #24004f; transform: translateY(-1px); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 34px; font-size: 16px; }
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  /* Wider than --container (1200px) on purpose: the bar carries six nav labels
     plus two CTAs, which needs ~1400px. Capping it at the body container made
     the row overflow its own box and widened the whole page. */
  max-width: 1440px;
  margin: 0 auto;
  gap: 20px;
  min-width: 0;
}
.logo-link { display: flex; align-items: center; flex-shrink: 0; }
.logo-link img { height: 34px; width: auto; }
/* Gap flexes with the viewport so the bar tightens before anything wraps. */
.main-nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 26px); min-width: 0; }
.nav-mobile-ctas { display: none; }
.main-nav a {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
  /* A nav label must never break mid-phrase — "How It Works" stacking into
     three lines was the original defect this header shipped with. */
  white-space: nowrap;
}
.main-nav a:hover { color: var(--med-blue); }
.header-ctas { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Never in the bar: 7 nav links + two buttons exceed the 1440px container at every width (measured 2026-08-12). Drawer + footer keep it reachable. */
.header-ctas .btn-secondary { display: none; }
.header-ctas .btn { white-space: nowrap; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--deep-trust-blue);
  margin: 5px 0;
  transition: transform .2s ease, opacity .2s ease;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--deep-trust-blue);
  color: rgba(255,255,255,.75);
  padding: 72px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-logo img { height: 32px; width: 32px; }
.footer-logo span { font-family: var(--font-body); font-weight: 600; font-size: 15.5px; line-height: 1.25; color: var(--white); }
.footer-brand p { max-width: 320px; color: rgba(255,255,255,.6); font-size: 14px; }
.footer-col h4 { color: var(--white); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,.75); font-size: 14px; }
.footer-col a:hover { color: var(--sky-blue); }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: rgba(255,255,255,.1); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-top: 32px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.footer-disclaimer { max-width: 820px; color: rgba(255,255,255,.5); line-height: 1.7; }
.footer-disclaimer p { margin-bottom: 10px; }
.footer-copyright { color: rgba(255,255,255,.5); white-space: nowrap; }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--soft-blue);
  color: var(--deep-trust-blue);
  margin-bottom: 20px;
}
.card-icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); margin-bottom: 0; font-size: 15px; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* ---------- Hero ---------- */
.hero {
  background: var(--grad-hero);
  color: var(--white);
  overflow: hidden;
  position: relative;
  padding: 76px 0 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(139,198,232,.25), transparent 55%);
  pointer-events: none;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-copy p.lede { color: rgba(255,255,255,.85); }
.hero-price {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  margin: 22px 0 26px;
  font-size: 15px;
}
.hero-price { margin-bottom: 10px; }
.hero-price strong { font-size: 26px; font-weight: 700; }
/* Sits directly under the price pill so the "as low as" figure always carries
   its qualifier in the same eyeline. */
.hero-pricenote {
  margin: 0 0 26px;
  font-size: 13.5px;
  color: rgba(255,255,255,.72);
  max-width: 34em;
}
.hero-pricenote a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.hero-trust {
  margin-top: 28px;
  font-size: 14px;
  color: rgba(255,255,255,.65);
  display: flex;
  gap: 10px;
  align-items: center;
}
.hero-visual { position: relative; }
.hero-visual img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero-badge {
  position: absolute;
  bottom: -22px;
  left: -22px;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 240px;
}
.hero-badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.hero-badge strong { display: block; font-size: 14px; color: var(--ink); }
.hero-badge span { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: var(--grad-hero);
  color: var(--white);
  padding: 64px 0 72px;
}
.page-hero.purple { background: var(--grad-purple); }
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero h1, .page-hero h2, .page-hero h3 { color: var(--white); }
.page-hero h1 { max-width: 780px; }
.page-hero .lede { color: rgba(255,255,255,.85); max-width: 640px; }
.breadcrumb { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 18px; }
.breadcrumb a { color: rgba(255,255,255,.8); }

/* ---------- Logo / org strip ---------- */
.org-strip { padding: 72px 0; }
.org-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.org-card { text-align: left; padding: 26px 22px; }
.org-card .card-icon { margin-bottom: 16px; }
.org-card h3 { font-size: 17px; }
.org-card p { font-size: 14px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step-num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--grad-hero);
  color: var(--white);
  font-weight: 700;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: 15px; }

/* ---------- Split section ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.check-list svg { flex-shrink: 0; margin-top: 3px; color: var(--med-blue); }
.bg-navy .check-list, .bg-purple .check-list { color: rgba(255,255,255,.9); }
.bg-navy .check-list li, .bg-purple .check-list li { color: rgba(255,255,255,.9); }

/* ---------- Pricing ---------- */
.pricing-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 56px;
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  border: 1px solid var(--border);
}
.pricing-from { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.pricing-amount { font-size: clamp(56px, 9vw, 88px); font-weight: 700; color: var(--deep-trust-blue); line-height: 1; }
.pricing-amount sup { font-size: 28px; top: -.6em; }
.pricing-amount .amt-decimal { font-size: .55em; }
.pricing-note { color: var(--ink-soft); margin: 18px auto 30px; max-width: 440px; }
.pricing-fine { font-size: 13.5px; color: var(--ink-soft); margin-top: 24px; }

/* Group price ladder — shows the real tier table instead of a bare "from" price. */
.pricing-ladder { width: 100%; border-collapse: collapse; margin: 20px 0 4px; text-align: left; }
.pricing-ladder th, .pricing-ladder td { padding: 13px 4px; border-bottom: 1px solid var(--border); font-weight: 400; }
.pricing-ladder th { color: var(--ink-soft); font-size: 15px; }
.pricing-ladder td { text-align: right; font-size: 22px; font-weight: 600; color: var(--deep-trust-blue); }
.pricing-ladder tr:last-child th, .pricing-ladder tr:last-child td { border-bottom: none; }
.pricing-ladder tr.best th { color: var(--deep-trust-blue); font-weight: 600; }
.pricing-ladder tr.best td { color: var(--med-blue); }
@media (max-width: 480px) {
  .pricing-ladder th { font-size: 14px; }
  .pricing-ladder td { font-size: 19px; }
}

/* ---------- Benefit tiers ---------- */
.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tier-card { border-radius: var(--radius-lg); padding: 40px; }
.tier-card.acute { background: var(--bg-alt); border: 1px solid var(--border); }
.tier-card.wellness { background: var(--grad-hero); color: var(--white); }
.tier-card.wellness h3, .tier-card.wellness .tier-label { color: var(--white); }
.tier-label {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--med-blue);
  margin-bottom: 14px;
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: none;
  text-align: left;
  padding: 24px 4px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}
.faq-q .plus { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.faq-q .plus::before, .faq-q .plus::after {
  content: "";
  position: absolute;
  background: var(--med-blue);
  transition: transform .2s ease;
}
.faq-q .plus::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq-q .plus::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.faq-item.open .plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  color: var(--ink-soft);
  font-size: 15.5px;
  padding: 0 4px;
}
.faq-item.open .faq-a { padding-bottom: 22px; }

/* ---------- Forms ---------- */
.form-shell {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--shadow-md);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 20px; display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.field .req { color: var(--med-blue); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--med-blue);
  background: var(--white);
}
.field textarea { resize: vertical; min-height: 100px; }
.form-consent { font-size: 12.5px; color: var(--ink-soft); margin-top: 18px; line-height: 1.7; }
.form-consent a { color: var(--med-blue); text-decoration: underline; }
.form-success {
  display: none;
  text-align: center;
  padding: 40px 10px;
}
.form-success .check-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(30,158,107,.12);
  color: var(--success);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.form-shell.submitted .form-fields { display: none; }
.form-shell.submitted .form-success { display: block; }

/* ---------- Stat strip ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-strip .stat-num { font-size: 34px; font-weight: 700; color: var(--deep-trust-blue); }
.bg-navy .stat-strip .stat-num, .bg-purple .stat-strip .stat-num { color: var(--white); }
.stat-strip .stat-label { font-size: 14px; color: var(--ink-soft); }
.bg-navy .stat-strip .stat-label, .bg-purple .stat-strip .stat-label { color: rgba(255,255,255,.7); }

/* ---------- Final CTA ---------- */
.final-cta { text-align: center; }
.final-cta h2 { color: var(--white); max-width: 760px; margin-left: auto; margin-right: auto; }
.final-cta .cta-row { justify-content: center; margin-top: 30px; }

/* ---------- Badge chip (territory ads style) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(139,198,232,.16);
  border: 1px solid rgba(139,198,232,.4);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--deep-trust-blue); color: #fff;
  padding: 12px 20px; z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Legal pages ---------- */
.legal-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(42,125,226,.08);
  border: 1px solid rgba(42,125,226,.25);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 40px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.legal-notice svg { flex-shrink: 0; color: var(--med-blue); margin-top: 2px; }
.legal-notice strong { color: var(--ink); }
.legal-body { max-width: 760px; margin: 0 auto; }
.legal-body h2 { font-size: 20px; margin-top: 40px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--ink-soft); font-size: 15.5px; }
.legal-body ul { margin: 0 0 1em; }
.legal-body ul li { list-style: disc; margin-left: 1.4em; margin-bottom: 8px; }
.legal-updated { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.reverse { direction: ltr; }
  .split .hero-visual, .split img { order: -1; }
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .org-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .tier-grid { grid-template-columns: 1fr; }
}
/* ---------- Header responsive ladder ----------
   Six nav labels plus two CTA buttons need roughly 1250px. Below that the bar
   degrades in stages rather than wrapping labels into stacks:
     1240px  drop the secondary CTA, tighten type
     1080px  collapse the whole nav into the hamburger drawer
   Previously the desktop nav stayed visible down to 760px, which is why
   "How It Works" rendered as three stacked lines.                            */
/* Measured, not guessed. With both CTAs the row needs ~1400px; with only the
   primary CTA it needs ~1100px. Earlier thresholds (1240/1080) were set from
   eyeballing and still overflowed at 1265px, which pushed the whole document
   wider than the viewport and produced a horizontal scrollbar. */
/* With SEVEN nav links + both header buttons the row needs ~1450px of content
   box, and .header-inner caps at 1440 — so both buttons only coexist on very
   wide screens. Hide the secondary from 1680px down (it stays in the drawer
   and footer); Logan's 1500px screenshot showed "Employer Login" running under
   the Territory Manager button in the old 1400–1600 gap. */
@media (max-width: 1680px) {
  .header-ctas .btn-secondary { display: none; }
  .main-nav a { font-size: 14.5px; }
  .header-inner { gap: 18px; }
}
/* Collapse to the drawer at 1240px, not 1120px. This breakpoint was measured
   when the bar carried SIX nav links; adding "Employer Login" made the row
   ~50px wider, and at 1180px the last link's text ran 7px underneath the
   "Enroll Your Company" button. Re-measure this number if a nav item is ever
   added again — the flex containers still report a positive gap while the text
   inside them collides, so it does not show up as an overflow. */
@media (max-width: 1240px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; flex-shrink: 0; }
  .nav-mobile-ctas { display: none; }
  .header-ctas { min-width: 0; }

  /* Nav drawer */
  .site-header.nav-open .main-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    padding: 12px 24px 24px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
  .site-header.nav-open .main-nav a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--border); }
  .site-header.nav-open .main-nav .nav-mobile-ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 14px;
  }
  .nav-mobile-ctas .btn { width: 100%; }
}

@media (max-width: 760px) {
  section { padding: 60px 0; }
  .header-inner { gap: 10px; padding: 12px 16px; }
  .logo-link img { height: 26px; }
  .header-ctas .btn-primary {
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
  }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .org-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form-shell { padding: 28px; }
  .pricing-card { padding: 36px 24px; }
  .hero-badge { position: static; margin-top: -40px; margin-left: 20px; margin-right: 20px; }

  /* Mobile nav drawer */
  .site-header.nav-open .main-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    padding: 12px 24px 24px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
  .site-header.nav-open .main-nav a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--border); }
  .site-header.nav-open .main-nav .nav-mobile-ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 14px;
  }
  .nav-mobile-ctas .btn { width: 100%; }
}