/* ─────────────────────────────────────────────────────────────────────
   Mobile responsiveness sweep — final pass.
   Three breakpoints: 1024 (tablet), 720 (phone landscape / small tablet),
   480 (phone portrait). Targets the gaps left by the per-component CSS.
   ───────────────────────────────────────────────────────────────────── */

/* ── 1024px — Tablet ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Section padding tightens on tablet */
  .section { padding: 64px 32px; }
  .section-deep { padding: 80px 32px; }

  /* Headlines scale down */
  .serif { letter-spacing: -0.02em; }

  /* Multi-column grids collapse */
  .practice-grid { grid-template-columns: 1fr !important; gap: 40px; }
  .care-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .heard-grid { grid-template-columns: 1fr !important; }

  /* Footer gets columnar */
  .footer-cols { grid-template-columns: 1fr 1fr !important; gap: 32px; }
}

/* ── 720px — Phone landscape ──────────────────────────────────────── */
@media (max-width: 720px) {
  /* Container padding pulls in */
  .section { padding: 48px 20px !important; }
  .section-deep { padding: 64px 20px !important; }
  .page-header { padding: 56px 20px 24px !important; }

  /* Top-level type scale */
  .page-h { font-size: clamp(34px, 8vw, 48px) !important; line-height: 1.04; }
  .section-eyebrow { font-size: 10px; letter-spacing: 0.18em; }
  .section-lede { font-size: 16px; line-height: 1.55; }

  /* Buttons are touch targets */
  .btn { min-height: 48px; padding: 14px 20px; font-size: 15px; }
  .btn-lg { min-height: 56px; padding: 18px 24px; font-size: 16px; }
  .btn-sm { min-height: 40px; }

  /* Nav */
  .nav-row { padding: 14px 20px !important; }
  .nav-cta { padding: 10px 14px !important; font-size: 12px !important; }
  .brand { font-size: 22px !important; }

  /* Hero */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-actions .btn-ghost { width: 100%; justify-content: center; }

  /* FAQ */
  .faq-item { padding: 20px 0; }
  .faq-q { font-size: 17px; gap: 12px; }
  .faq-a { font-size: 15px; }

  /* Manifesto / philo */
  .manifesto { grid-template-columns: 1fr !important; gap: 40px; }
  .philosophy-video { max-width: 480px; margin: 0 auto; }
  .manifesto-row { grid-template-columns: 40px 1fr !important; gap: 16px; }
  .manifesto-num { font-size: 14px; }
  .manifesto-row h3 { font-size: 22px; }
  .manifesto-row p { font-size: 15px; }

  /* Categories */
  .categories-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .cat-card { padding: 24px 18px; }
  .cat-card h3 { font-size: 22px; }
  .cat-card p { font-size: 13px; }

  /* Tracks */
  .tracks { grid-template-columns: 1fr !important; gap: 8px; }
  .track { padding: 24px 20px !important; }

  /* Dashboard */
  .dash-hero { grid-template-columns: 1fr !important; gap: 32px; }
  .dash-grid { grid-template-columns: 1fr !important; }
  .dash-card { padding: 24px 20px; }

  /* Paywall */
  .paywall-grid { grid-template-columns: 1fr !important; }
  .paywall-summary { position: static !important; padding: 28px 24px; }

  /* Questionnaire */
  .q-shell { padding: 0 !important; }
  .q-stage { padding: 32px 20px !important; }
  .q-h1 { font-size: clamp(28px, 8vw, 40px) !important; }
  .q-options { gap: 8px; }
  .q-option { padding: 16px 18px; font-size: 15px; }
  .q-upload { border-radius: 28px; padding: 16px 18px; }
  .q-form-grid { grid-template-columns: 1fr !important; }

  /* We heard you */
  .heard-journey-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .heard-step { padding: 18px 14px !important; }

  /* Footer */
  .footer-cols { grid-template-columns: 1fr !important; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; font-size: 11px; }
  .footer-badges { gap: 10px; margin-top: 16px; }
  .footer-badge-img { width: 64px; height: 64px; }

  /* Trust strip */
  .hero-trust-strip {
    margin-top: 32px !important;
    padding: 16px 0 !important;
    overflow: hidden;
  }
  .hero-trust-track { animation-duration: 30s !important; }

  /* Care */
  .care-tiers { grid-template-columns: 1fr !important; }
  .care-asks { grid-template-columns: 1fr !important; }
  .care-cta { padding: 32px 24px !important; }

  /* Catalog */
  .catalog-filters { gap: 6px; flex-wrap: wrap; }
  .chip { padding: 8px 12px; font-size: 11px; }

  /* PDP */
  .pdp-hero { grid-template-columns: 1fr !important; gap: 24px; }
  .pdp-gallery { position: static !important; }
  .pdp-rail { padding: 12px 20px !important; flex-direction: column; align-items: flex-start !important; gap: 8px; }

  /* Book */
  .book-page-inner { grid-template-columns: 1fr !important; gap: 40px !important; padding: 40px 20px !important; }
  .book-page-cover { max-width: 320px; margin: 0 auto; }
  .book-author { grid-template-columns: 1fr !important; gap: 28px; }

  /* Login */
  .login-shell { grid-template-columns: 1fr !important; }
  .login-dark { padding: 32px 24px !important; min-height: 220px; }
  .login-light { padding: 40px 24px !important; }
}

/* ── 480px — Phone portrait ───────────────────────────────────────── */
@media (max-width: 480px) {
  .section { padding: 40px 16px !important; }
  .section-deep { padding: 56px 16px !important; }
  .page-header { padding: 48px 16px 20px !important; }

  /* Hero typography clamp tighter */
  .hero-video-content h1,
  .page-h { font-size: clamp(30px, 9.5vw, 42px) !important; }
  .section h2.serif { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.05; }

  /* Categories collapse to single column for portrait */
  .categories-grid { grid-template-columns: 1fr !important; }

  /* Heard-step grid */
  .heard-journey-grid { grid-template-columns: 1fr !important; }

  /* Nav burger margin tightens */
  .nav-row { padding: 12px 16px !important; }
  .brand { font-size: 20px !important; }
  .nav-cta { font-size: 11px !important; padding: 8px 12px !important; }

  /* FAQ */
  .faq-q { font-size: 16px; }

  /* Trust strip */
  .hero-trust-strip { margin-top: 24px !important; }

  /* Vials selector */
  .vial-select { grid-template-columns: 1fr !important; gap: 12px; }

  /* Paywall summary */
  .paywall-summary-row { font-size: 14px; }
}

/* ── Universal touch sanity ───────────────────────────────────────── */
@media (max-width: 720px) {
  /* No element should ever scroll horizontally */
  body, html { overflow-x: hidden; }

  /* Anything with role=button or a true button gets a min hit area */
  button:not([disabled]), a.btn, .chip { min-height: 44px; }

  /* Tap highlight tint */
  a, button { -webkit-tap-highlight-color: rgba(193,123,75,0.18); }

  /* Forms */
  input, select, textarea {
    font-size: 16px !important; /* prevent iOS zoom */
  }
}