/* Shared mobile + accessibility fixes (Oct 2026 audit). Loaded last on every page
   so it wins over the per-page inline styles. Keep this file small and specific. */

/* 1. Dark hero surfaces: sage green (#2d6b4d) on navy fails contrast (~1.7-2.1:1).
      Use a light mint accent on dark backgrounds only; light surfaces keep sage. */
.hero .hero-eyebrow, .page-hero .hero-eyebrow,
.hero h1 .accent, .page-hero h1 .accent,
.cta-band h2 .accent {
  color: #9fe0c1 !important;              /* ~9:1 on #1A3550 */
}
.hero .hero-line, .page-hero .hero-line { background: #9fe0c1 !important; }
.hero .hero-eyebrow, .page-hero .hero-eyebrow { font-size: 12px !important; letter-spacing: 2px !important; }
.hero-sub { color: rgba(255,255,255,.86) !important; }
.friction span { color: rgba(255,255,255,.8) !important; }

/* 2. Treatment / peptide / pricing cards: never two columns on a phone.
      Per-page breakpoints disagree (480 vs 720); 600px is the shared cutoff. */
@media (max-width: 600px) {
  .grid-3, .grid-2, .pricing-grid, .peptide-grid, .treatment-grid, .areas-grid {
    grid-template-columns: 1fr !important;
  }
  .grid-3 > *, .grid-2 > *, .pricing-grid > * { min-width: 0; }
}

/* 3. Homepage founder/stat card: 64px numerals forced the 2-col stat grid
      past the viewport at 320/390/430px. */
.why-grid > *, .why-stat-row > *, .why-visual-wrap, .why-main-card { min-width: 0; max-width: 100%; }
@media (max-width: 480px) {
  html body section.why-section .why-grid .why-stat-row .why-stat-box strong,
  html body .why-stat-box strong[style] { font-size: 40px !important; letter-spacing: -1px !important; margin-bottom: 10px !important; }
  html body .why-stat-box { padding: 22px 10px !important; }
  html body .why-main-card { padding: 28px 22px !important; }
}
@media (max-width: 360px) {
  html body section.why-section .why-grid .why-stat-row .why-stat-box strong,
  html body .why-stat-box strong[style] { font-size: 34px !important; }
}

/* 4. Reserve space for the hero pills so font swap doesn't shift the hero (CLS). */
.hero-pills { min-height: 36px; }

/* 5. Belt-and-braces: nothing may widen the document on phones. */
@media (max-width: 480px) {
  html, body { overflow-x: hidden; }
}

/* 6. Footer text: rgba(255,255,255,.45) on the ink background measures ~4.3:1.
      Lift to pass AA (4.5:1) for 13px text. */
.site-footer .footer-desc, .site-footer .footer-links a, .site-footer .footer-links li,
.site-footer .footer-bottom, .site-footer .footer-legal a, .site-footer .footer-col p { color: rgba(255,255,255,.68) !important; }
.site-footer .footer-links a:hover, .site-footer .footer-legal a:hover { color: #a8d4bf !important; }

/* 7. Closed drawer: take it out of the tab order and the accessibility tree
      (links inside an aria-hidden container were still focusable). */
.mobile-drawer:not(.open) { visibility: hidden; }
.mobile-drawer.open { visibility: visible; }

/* 8. Footer fine print and legal links were 30-48% white on the ink background. */
.site-footer .footer-disclaimer, .site-footer .footer-disclaimer strong, .site-footer .footer-disclaimer a,
.site-footer .footer-bottom, .site-footer .footer-bottom span, .site-footer .footer-legal-links a,
.site-footer .footer-legal a { color: rgba(255,255,255,.72) !important; }
.site-footer .footer-disclaimer strong { color: rgba(255,255,255,.9) !important; }
/* footer column headings were <h4> opened / </h3> closed; now real <h3>s — keep the old h4 look */
.site-footer h3.footer-h, footer h3.footer-h { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.92); margin-bottom: 16px; font-family: inherit; line-height: 1.4; }