/* ============================================
   KASSY WELLNESS — v4 ADDITIONS
   Loaded after global.css on every page. Only contains
   shapes that don't already exist in global.css.
   ============================================ */

/* --- No italics anywhere: emphasis is carried by color/weight, not slant.
   Catches raw <em>/<i>/<cite>/<blockquote> browser defaults; explicit
   font-style:italic rules were flipped to normal at source. --- */
em, i, cite, blockquote, address, q, figcaption { font-style: normal; }

/* --- White photo frames (matted "framed print" look) — SELECTIVE ---
   Used deliberately on the supporting / section images that sit beside text
   (like the concierge interior). The full-width page HEROES (path-hero,
   founder-hero-portrait, exp-hero) and the overlay/band images (hero-cinema,
   proof-photo) stay unframed for an immersive feel. White mat + the live
   site's white-surface parameters (emerald hairline border + --shadow-2xl,
   measured off the live DOM).

   UNIFORM MAT — the frame must be the same thickness all around, including
   the CORNERS. That requires concentric rounded corners: the mat is only
   even if  outer_radius = inner_radius + padding. We force every framed
   container to one concentric pair (overriding whatever radius each had in
   global.css) and hold it constant across breakpoints:
     padding 1.25rem (20px) · outer 3.25rem (52px) · inner 2rem (32px)
     52 − 20 = 32  → the white ring is exactly 20px on all four edges AND
     at each corner.

   RULE — the mat is only for standalone photos. An image that already sits
   INSIDE a box/card (e.g. .proto-card-full-image, nested in a white
   .proto-card) must NOT be matted: a white frame on a white card just reads
   as a mistake. Those keep their own in-card rounded corners and are left
   out of this set. */
.authority-image,
.concierge-image,
.founder-mission-image,
.founder-excerpt-image,
.phase-image,
.pr-detail-image,
.path-diag-image {
  background: var(--white);
  padding: 1.25rem;
  border-radius: 3.25rem;
  border: 1px solid rgba(var(--emerald-rgb), 0.05);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
.authority-image img,
.concierge-image img,
.founder-mission-image img,
.founder-excerpt-image img,
.phase-image img,
.pr-detail-image img,
.path-diag-image img {
  border-radius: 2rem;
}

/* --- Header nav: trimmed to the core 7 links ---
   v4's full 10-link nav was too wide to sit inline cleanly. The desktop
   nav is trimmed to the live site's set + Approach:
   Approach · Precision Reset · Protocols · Her Path · His Path ·
   The Experience · Founder. The demoted pages (Precision Signal,
   Signal-or-Reset, FAQ, Start) stay reachable via the footer, the
   persistent bottom CTA bar, and contextual in-page links. The FULL list
   still appears in the mobile drawer (burger, <1024px). Desktop uses
   global.css's default inline nav. */
.header-nav--v4 {
  gap: 1.375rem;
}
.header-nav--v4 a {
  font-size: 0.875rem;
}
/* 7 links + logo + CTA need a wide bar to breathe. global.css turns the
   inline nav on at 1024px, which is far too tight (links collide with the
   CTA), so up to 1279px we fall back to the burger drawer; the inline nav
   only appears at >=1280px (the common desktop width), where the nav and
   CTA have comfortable spacing between them. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .header-nav--v4 { display: none; }
  .mobile-menu-btn { display: flex; margin-left: 1.25rem; }
  .header-cta { margin-left: auto; }
}

/* --- "Programs" dropdown (desktop nav) — groups Precision Signal + The
   Precision Reset + Signal or Reset under one top-level item. Pure CSS
   hover/focus-within reveal; the mobile drawer keeps the flat list. --- */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-toggle {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: var(--emerald);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  letter-spacing: -0.01em;
  transition: color var(--transition-base);
}
.nav-dd-toggle:hover,
.nav-dd:hover .nav-dd-toggle,
.nav-dd:focus-within .nav-dd-toggle,
.nav-dd-toggle.active { color: var(--coral); }
.nav-dd-chev { width: 12px; height: 12px; transition: transform var(--transition-base); }
.nav-dd:hover .nav-dd-chev,
.nav-dd:focus-within .nav-dd-chev { transform: rotate(180deg); }
/* invisible bridge so the menu doesn't drop while the cursor crosses the gap */
.nav-dd::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.9rem;
}
.nav-dd-menu {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--white);
  border: 1px solid rgba(var(--emerald-rgb), 0.08);
  border-radius: 1rem;
  box-shadow: var(--shadow-xl);
  padding: 0.5rem;
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: 120;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dd-menu a {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: var(--emerald);
  padding: 0.6rem 0.85rem;
  border-radius: 0.6rem;
  white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
}
.nav-dd-menu a:hover,
.nav-dd-menu a.active { background: rgba(var(--emerald-rgb), 0.05); color: var(--coral); }

/* --- Footer NAP line --- */
.footer-nap {
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--emerald-rgb), 0.06);
}

/* --- Persistent secondary CTA bar (bottom of every page) --- */
body {
  padding-bottom: 4.5rem;
}
.persistent-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255,248,240,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(var(--emerald-rgb), 0.08);
  box-shadow: 0 -8px 30px -15px rgba(var(--emerald-rgb), 0.2);
}
.persistent-cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 2.9rem;          /* comfortable tap target even when text wraps */
  padding: 0.55rem 0.85rem;
  border-radius: 1.25rem;      /* rounded rect so 2-line labels sit cleanly */
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.15;           /* labels WRAP to 2 lines instead of truncating */
}
.persistent-cta-btn--primary {
  background: var(--coral);    /* full-strength coral, no transparency */
  color: var(--white);
}
.persistent-cta-btn--primary:hover { background: var(--coral-dark); }
/* Secondary: stronger fill + border + emerald text so it's legible on the bar. */
.persistent-cta-btn--secondary {
  background: rgba(var(--emerald-rgb), 0.06);
  border: 1.5px solid rgba(var(--emerald-rgb), 0.45);
  color: var(--emerald);
}
.persistent-cta-btn--secondary:hover {
  border-color: var(--emerald);
  background: rgba(var(--emerald-rgb), 0.1);
}

@media (min-width: 640px) {
  .persistent-cta-bar { justify-content: center; padding: 0.875rem 1.5rem; }
  .persistent-cta-btn { flex: none; padding: 0.875rem 2rem; border-radius: 9999px; }
}

/* --- Home: two-beat stat duo --- */
.stat-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: var(--section-padding, 5rem) 0 2rem;
}
@media (min-width: 768px) {
  .stat-duo { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.stat-duo-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.stat-duo-number {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  color: var(--coral);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-duo-caption {
  font-size: 0.9375rem;
  color: rgba(var(--emerald-rgb), 0.6);
  line-height: 1.6;
  max-width: 24rem;
}
.stat-duo-close {
  grid-column: 1 / -1;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  color: var(--emerald);
  line-height: 1.4;
  max-width: 42rem;
  margin-top: 1rem;
}
.stat-duo-close em { color: var(--coral); font-style: normal; }

/* --- Home: two doors, one practice — the site's key decision moment ---
   Signal = the lighter "entry / diagnostic" card; Reset = the emerald
   "flagship" card that carries the eye. Real headings + real buttons +
   an "or" chip between them so the choice reads as a choice, not a list. */
.doors-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 1rem;
}
.doors-subhead {
  font-size: 1.0625rem;
  color: rgba(var(--emerald-rgb), 0.65);
  line-height: 1.6;
  max-width: 40rem;
  margin-top: 1.25rem;
}
.doors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}
@media (min-width: 900px) {
  .doors-grid {
    grid-template-columns: 1fr auto 1fr;
    column-gap: 1.5rem;
  }
}
/* the "or" pivot between the two doors */
.doors-or {
  display: flex;
  align-items: center;
  justify-content: center;
}
.doors-or span {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--white);
  border: 1px solid rgba(var(--emerald-rgb), 0.12);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(var(--emerald-rgb), 0.5);
}

.door-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(var(--emerald-rgb), 0.06);
  border-radius: var(--radius-2xl);
  padding: var(--space-2xl);
  text-decoration: none;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
}
.door-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(var(--emerald-rgb), 0.15);
}
.door-card-tier {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 1rem;
}
.door-card h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  color: var(--emerald);
  margin-bottom: 0.75rem;
  line-height: 1.05;
}
.door-card-tagline {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--emerald);
  line-height: 1.4;
  margin-bottom: 1.5rem;
}
.door-card-features {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.door-card-features li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(var(--emerald-rgb), 0.72);
}
.door-card-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--coral);
}
.door-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Flagship variant — Reset. Emerald fill so it anchors the section. */
.door-card--flagship {
  position: relative;
  background: var(--emerald);
  border-color: transparent;
  box-shadow: var(--shadow-hero-img);
}
.door-card--flagship:hover {
  border-color: transparent;
  box-shadow: 0 40px 90px -20px rgba(var(--emerald-dark-rgb), 0.45);
}
.door-card--flagship .door-card-tier { color: var(--coral-light); }
.door-card--flagship h3 { color: var(--white); }
.door-card--flagship .door-card-tagline { color: var(--white); }
.door-card--flagship .door-card-features li { color: rgba(var(--white-rgb), 0.82); }
.door-card--flagship .door-card-features li::before { background: var(--coral-light); }
.door-card-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emerald-dark);
  background: var(--coral-light);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-full);
}

.doors-help {
  text-align: center;
  font-size: 0.9375rem;
  color: rgba(var(--emerald-rgb), 0.55);
  margin-top: 2.5rem;
}
.doors-help a {
  color: var(--coral);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--coral-rgb), 0.35);
}
.doors-help a:hover { border-color: var(--coral); }

/* --- Home: why people come to us (proof beats) --- */
.proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .proof-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.proof-photo {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  position: relative;
  min-height: 20rem;
}
.proof-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.proof-photo-quote {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(27,67,50,0.9) 0%, rgba(27,67,50,0.55) 55%, transparent 100%);
}
.proof-photo-quote p {
  color: var(--white);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-style: normal;
}
.proof-photo-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  font-style: normal;
}
.proof-text-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* Center the two cards against the taller photo so the column no longer
   floats at the top with an empty gap beneath it. */
@media (min-width: 768px) {
  .proof-text-col { justify-content: center; }
}
.proof-text-card {
  background: var(--white);
  border: 1px solid rgba(var(--emerald-rgb), 0.06);
  border-radius: var(--radius-2xl);
  padding: var(--space-xl);
  transition: box-shadow var(--transition-slow), border-color var(--transition-slow), transform var(--transition-slow);
}
.proof-text-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--emerald-rgb), 0.12);
}
.proof-card-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(var(--emerald-rgb), 0.08);
}
.proof-text-card p {
  font-size: 0.9375rem;
  color: rgba(var(--emerald-rgb), 0.65);
  line-height: 1.8;
}
.proof-text-card p strong {
  color: var(--emerald);
  font-weight: 500;
}

/* --- Signal-or-Reset: comparison table — simple, editorial, one
   quietly-highlighted column (Reset = the flagship). --- */
.compare-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(var(--emerald-rgb), 0.08);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 44rem;
}

/* Header row — each door gets an identity (tier + name), not a flat label. */
.compare-table thead th {
  padding: 1.75rem 1.75rem 1.5rem;
  text-align: left;
  vertical-align: bottom;
  border-bottom: 1px solid rgba(var(--emerald-rgb), 0.12);
}
.compare-col-tier {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 0.5rem;
}
.compare-col-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--emerald);
}

/* Body cells. */
.compare-table tbody th,
.compare-table tbody td {
  padding: 1.125rem 1.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(var(--emerald-rgb), 0.06);
}
.compare-table tbody td {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(var(--emerald-rgb), 0.72);
}
/* Row-label column — quiet mono micro-labels. */
.compare-table tbody th {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--emerald-rgb), 0.45);
  white-space: nowrap;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }

/* The flagship column (Reset, last col) — a faint emerald wash so the eye
   can track it top to bottom. Clipped to the wrap's rounded corners. */
.compare-table th:last-child,
.compare-table td:last-child {
  background: rgba(var(--emerald-rgb), 0.035);
}
.compare-table thead th:last-child {
  border-bottom-color: rgba(var(--emerald-rgb), 0.2);
}

/* Closing "honest read" row — reads as a soft pull-quote. */
.compare-table tbody tr.compare-row-quote td {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--emerald);
}
.compare-table tbody tr.compare-row-quote th {
  color: rgba(var(--coral-rgb), 0.9);
}

/* --- Light ghost button — outline CTA that reads on dark/emerald panels. --- */
.btn-ghost-light {
  background: transparent;
  border: 1px solid rgba(var(--white-rgb), 0.35);
  color: var(--white);
}
.btn-ghost-light:hover {
  border-color: var(--white);
  background: rgba(var(--white-rgb), 0.08);
}

/* --- Pre-footer CTA + footer: two separate rounded cards that EDGE-ALIGN.
   The CTA card's side margins exactly match the footer's side inset at every
   breakpoint (1.5rem mobile/tablet, 3rem desktop) so the two cards line up as a
   tidy vertical stack; the CTA's bottom margin is the gap between them, and the
   footer keeps all four corners. Higher specificity than the global
   `:has(+ .footer)` / `+ .footer` merge rules, so it wins on the home page too.

   Applied ONLY to the dark/emerald CTA sections — a light section must never
   box up against the emerald footer (deliberately excludes approach's .ap-close
   and his-path's white .path-challenges closer). --- */
.section-dark-cta.prefooter-cta,
.ps-cta-section.prefooter-cta,
.pr-cta-section.prefooter-cta,
.proto-cta.prefooter-cta,
.exp-cta.prefooter-cta,
.founder-cta.prefooter-cta,
.faq-closing-cta.prefooter-cta,
.sor-cta-section.prefooter-cta {
  margin: 0 1.5rem 1.5rem;     /* gap BELOW == side inset (even frame) */
  border-radius: 1.5rem;       /* all four corners — its own card */
  background: var(--emerald-dark);
}
/* Footer stays a full four-corner card (override the stock top-corner flatten). */
.section-dark-cta.prefooter-cta + .footer,
.ps-cta-section.prefooter-cta + .footer,
.pr-cta-section.prefooter-cta + .footer,
.proto-cta.prefooter-cta + .footer,
.exp-cta.prefooter-cta + .footer,
.founder-cta.prefooter-cta + .footer,
.faq-closing-cta.prefooter-cta + .footer,
.sor-cta-section.prefooter-cta + .footer {
  border-radius: 36px;
}
@media (min-width: 768px) {
  .section-dark-cta.prefooter-cta,
  .ps-cta-section.prefooter-cta,
  .pr-cta-section.prefooter-cta,
  .proto-cta.prefooter-cta,
  .exp-cta.prefooter-cta,
  .founder-cta.prefooter-cta,
  .faq-closing-cta.prefooter-cta,
  .sor-cta-section.prefooter-cta { margin: 0 1.5rem 1.5rem; border-radius: 2rem; }
  .section-dark-cta.prefooter-cta + .footer,
  .ps-cta-section.prefooter-cta + .footer,
  .pr-cta-section.prefooter-cta + .footer,
  .proto-cta.prefooter-cta + .footer,
  .exp-cta.prefooter-cta + .footer,
  .founder-cta.prefooter-cta + .footer,
  .faq-closing-cta.prefooter-cta + .footer,
  .sor-cta-section.prefooter-cta + .footer { border-radius: 40px; }
}
@media (min-width: 1024px) {
  .section-dark-cta.prefooter-cta,
  .ps-cta-section.prefooter-cta,
  .pr-cta-section.prefooter-cta,
  .proto-cta.prefooter-cta,
  .exp-cta.prefooter-cta,
  .founder-cta.prefooter-cta,
  .faq-closing-cta.prefooter-cta,
  .sor-cta-section.prefooter-cta { margin: 0 3rem 3rem; }
  .section-dark-cta.prefooter-cta + .footer,
  .ps-cta-section.prefooter-cta + .footer,
  .pr-cta-section.prefooter-cta + .footer,
  .proto-cta.prefooter-cta + .footer,
  .exp-cta.prefooter-cta + .footer,
  .founder-cta.prefooter-cta + .footer,
  .faq-closing-cta.prefooter-cta + .footer,
  .sor-cta-section.prefooter-cta + .footer { border-radius: 48px; }
}
/* Signal-or-Reset only: trim the oversized whitespace on this one CTA. */
.sor-cta-section.prefooter-cta { padding: 4.5rem 0; }
@media (min-width: 1024px) { .sor-cta-section.prefooter-cta { padding: 5.5rem 0 5rem; } }
.sor-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* --- Accessibility widget refinements ---
   1) Vertically centered to the persistent CTA bar (bar is ~71px tall at
      bottom:0; the 48px trigger centers at bottom ~11px).
   2) Emerald-filled by default with a white icon (reversed from the stock
      white-circle / emerald-icon), matching the bar.
   3) Hover label is a full pill (was a rounded rectangle). The native browser
      title tooltip is removed in animations.js so only this styled pill shows. */
.a11y-trigger {
  /* Sit ABOVE the persistent CTA bar (~4.5rem tall) so it never covers a
     bar button — the collision seen on mobile. */
  bottom: 5.4rem;
  background: var(--emerald);
  border-color: transparent;
}
.a11y-trigger svg { color: var(--white); }
.a11y-trigger:hover { background: var(--emerald-dark); }
.a11y-trigger:hover svg { color: var(--white); }
.a11y-trigger-tooltip {
  border-radius: var(--radius-full);
  padding: 0.4rem 0.9rem;
}
/* Hide the floating widget while the mobile menu is open so it never overlaps
   the nav links. The trigger is wrapped in a <div class="a11y-widget"> appended
   to <body> after .mobile-menu, so target the wrapper. */
.mobile-menu.is-open ~ .a11y-widget {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- Mobile menu: fit ALL links on one screen (was overflowing so FAQ / Start
   / Apply fell below the fold). Tighter top inset + link rhythm, and a scroll
   fallback so nothing is ever unreachable on short screens. --- */
.mobile-menu {
  padding: 4rem 2rem 1.75rem;
  overflow-y: auto;
}
.mobile-menu-nav a {
  font-size: 1.2rem;
  padding: 0.5rem 0;
}
.mobile-menu-cta { padding-top: 1rem; }
.mobile-menu-contact { margin-top: 0.75rem; padding-top: 0.75rem; }

/* --- Global form rule: every SINGLE-LINE text field is a pill. ---
   Applies site-wide to all forms. Multi-line <textarea> keeps its
   rounded-rectangle shape; radios/checkboxes are untouched. !important so the
   rule holds over per-page field styling (some pages style fields with higher
   specificity, e.g. .st-form input[type="text"]). Pair the fuller radius with
   a touch more horizontal padding so text clears the rounded ends. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="date"],
select {
  border-radius: var(--radius-full) !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ============================================================
   MOBILE READABILITY  (≤ 639px)
   The mono "eyebrow"/label/tier/badge text runs 8–11px with wide tracking —
   too small to read comfortably on a phone. Lift the smallest ones to a ~11.5px
   floor and tighten the letter-spacing. Colours are left as-is (full-strength
   coral already); this is purely a size/tracking fix.
   ============================================================ */
@media (max-width: 639.98px) {
  .footer-nav-label,
  .doors-eyebrow, .door-card-tier, .door-card-badge,
  .hero-stat-label,
  .proof-card-label,
  .section-dark-cta-eyebrow, .section-title-index,
  .ap-eyebrow, .ap-hero-eyebrow, .ap-close-eyebrow, .ap-data-eyebrow,
  .ap-marker-label, .ap-stat-label,
  .ps-cta-eyebrow, .ps-whatis-eyebrow, .ps-eyebrow,
  .pr-value-eyebrow, .pr-detail-eyebrow, .pr-price-card-label, .pr-hero-eyebrow,
  .proto-card-label, .proto-hero-index,
  .exp-eyebrow, .exp-step-label, .exp-progress-label,
  .path-badge, .path-door-label, .path-treat-label,
  .phase-label, .framework-phase-label,
  .apply-hero-meta, .apply-panel-eyebrow, .apply-form-eyebrow, .apply-contact-label,
  .legal-hero-meta, .founder-cred-label, .founder-name,
  .mono-label, .mono-label-sm {
    font-size: 0.72rem !important;     /* ~11.5px floor */
    letter-spacing: 0.14em !important;
  }
  /* Footer brand line ("CONCIERGE PRECISION MEDICINE") — a touch larger. */
  .footer-authority-subtitle {
    font-size: 0.75rem !important;
    letter-spacing: 0.18em !important;
  }
}

/* ============================================================
   FOOTER — medical-attribution as an understated line (not a card)
   The block ships styled for LIGHT backgrounds (emerald text + bordered card +
   a HEART icon). On the dark footer that rendered invisible (dark-on-dark) —
   a dead band that stacked into a big empty gap on mobile. Rather than dress it
   up as a prominent card (the heart + box read as "off" for a fine-print
   authority line), strip the card chrome and the heart icon and render it as a
   clean, muted footer line. Colours suit the dark footer at every breakpoint.
   ============================================================ */
.footer .medical-attribution {
  display: block;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0.5rem 0 0;
}
.footer .medical-attribution-icon { display: none; }   /* hide the heart icon */
.footer .medical-attribution-text {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  line-height: 1.6;
  color: rgba(var(--white-rgb), 0.5);
}
.footer .medical-attribution-text strong { color: rgba(var(--white-rgb), 0.85); }

/* --- Footer MOBILE rhythm: the stacked columns had a 3.5rem grid gap that read
   as large empty bands. Tighten it; keep desktop (≥768px) exactly as-is. --- */
@media (max-width: 767.98px) {
  .footer-main { gap: 2.25rem; padding-bottom: 2.5rem; }
  .footer-authority-desc { margin-bottom: 1.5rem; }
  .footer-trust { margin-bottom: 1.5rem; }
  .footer-geo { margin-bottom: 1rem; }
}

/* ============================================================
   HOME HERO — one clean, left-aligned column
   Replaces the busy headline-left / aside-right split (badge + huge headline
   on the left, a cramped column of paragraph + CTA + two meta lines on the
   right). Now a single sharp hierarchy: badge → headline → high-contrast
   subhead → CTA + quiet secondary → micro note. The subhead copy went from
   emerald @ 50% / weight-300 (washed out) to a legible weight-400 at strong
   contrast.
   ============================================================ */
.hero-top {
  display: block;             /* override the global flex row-split */
  margin-bottom: 2.5rem;
}
.hero-lead { max-width: 54rem; }
.hero-lead .tag { margin-bottom: 1.75rem; }
.hero-sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  color: rgba(var(--emerald-rgb), 0.8);   /* was 0.5 — now readable */
  font-weight: 400;
  line-height: 1.6;
  max-width: 36rem;
  margin: 1.75rem 0 2.5rem;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.hero-actions .btn { white-space: nowrap; }
.hero-actions-alt {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--emerald);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--emerald-rgb), 0.35);
  transition: text-decoration-color var(--transition-base);
}
.hero-actions-alt:hover { text-decoration-color: var(--emerald); }
.hero-note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--emerald-rgb), 0.5);
  margin-top: 1.75rem;
}
@media (min-width: 768px) {
  .hero-top { margin-bottom: 3.5rem; }
}