/* ============================================================
   Someday — shared mobile responsive overrides
   Covers all pages. Breakpoints: 768px (tablet), 480px (phone)
   ============================================================ */

@media (max-width: 768px) {

  /* ── NAV ── */
  nav, .sd-nav, .topnav {
    padding: 0 1.25rem !important;
    height: 3rem !important;
    min-height: 3rem !important;
  }
  .nav-links, .sd-nav-links { display: none !important; }
  .nav-right { gap: 0.5rem !important; }
  .wordmark, .sd-wordmark { font-size: 1.375rem !important; }

  /* ── HERO (homepage) ── */
  .hero {
    padding: 100px 24px 56px !important;
    min-height: auto !important;
  }
  .hero-headline { font-size: clamp(2.2rem, 8vw, 3.2rem) !important; max-width: 100% !important; }
  .hero-sub { max-width: 100% !important; font-size: 0.9rem !important; }

  /* ── SECTIONS ── */
  section { padding: 56px 24px !important; }
  .section-headline { font-size: clamp(1.8rem, 6vw, 2.8rem) !important; }
  .section-sub { max-width: 100% !important; }

  /* ── PLANS GRID ── */
  .plans-grid { grid-template-columns: 1fr !important; max-width: 480px; margin: 0 auto; }
  .plan-card.featured { order: -1; }

  /* ── HOW IT WORKS ── */
  .how-inner { flex-direction: column !important; gap: 2rem !important; }
  .how-left { padding-right: 0 !important; border-right: none !important; border-bottom: 1px solid rgba(48,49,79,0.1); padding-bottom: 2rem; }
  .how-steps { padding-left: 0 !important; }
  .how-step { grid-template-columns: 2rem 1fr !important; }

  /* ── PREMIUM / FEATURES ── */
  .premium-grid, .features-grid { grid-template-columns: 1fr !important; }
  .bespoke-inner { grid-template-columns: 1fr !important; gap: 2rem !important; }

  /* ── ADDON TIERS ── */
  .addon-tiers { flex-direction: column !important; }
  .addon-tier { width: 100% !important; }

  /* ── FOOTER ── */
  footer { padding: 40px 24px 32px !important; }
  .footer-top { flex-direction: column !important; gap: 2rem !important; }
  .footer-columns { gap: 2rem !important; }
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem !important; }

  /* ── DASHBOARD (v24) ── */
  .hero-zone { grid-template-columns: 1fr !important; }
  .hero-band { padding: 0 1rem 1.5rem !important; }
  .main { padding: 0 1rem !important; }
  .card { margin-bottom: 1rem; }
  .card-header { flex-wrap: wrap; gap: 0.75rem; }
  .people-section .person-hub { min-width: 120px !important; }
  .self-section .self-inner { grid-template-columns: 1fr 1fr !important; }
  .dates-inner { flex-direction: column !important; }

  /* ── YOUR PEOPLE PAGE ── */
  .page-header, .filter-bar, .page-body { padding-left: 20px !important; padding-right: 20px !important; }
  .header-row { flex-direction: column !important; align-items: flex-start !important; }
  .people-grid { grid-template-columns: 1fr !important; }
  .slide-panel { width: 100% !important; }
  .filter-pills { gap: 5px !important; }

  /* ── MODALS ── */
  .modal-overlay, .am-overlay, .cm-overlay, .dp-overlay { padding: 1rem !important; }
  .gift-modal, .am-modal, .cm-modal { max-height: 90vh !important; }
  .cm-left { display: none !important; }
  .gm-thread { padding: 1rem !important; }

  /* ── AUTH / FUNNEL PAGES ── */
  .login-card, .card { padding: 28px 22px !important; }
  main { padding: 32px 16px !important; }
  .tiers, .plans { grid-template-columns: 1fr !important; max-width: 420px; margin: 0 auto; }
  .tier, .plan { padding: 24px 20px !important; }

  /* ── CHECKOUT ── */
  main:has(.summary) { grid-template-columns: 1fr !important; }
  .summary, .pay { padding: 28px 22px !important; }

  /* ── CAPSULE / TRADITIONS ── */
  .sd-cards, .sd-card-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .sd-main { padding: 1rem !important; }

  /* ── DATES PAGE ── */
  .d-row { flex-wrap: wrap; }
  .d-actions { width: 100%; justify-content: flex-start; padding-left: 3.5rem; margin-top: 4px; }

  /* ── ONBOARDING CHAT ── */
  .app-body { flex-direction: column !important; }
  .sidebar { width: 100% !important; max-height: 220px !important; overflow-y: auto !important; border-right: none !important; border-bottom: 1px solid rgba(48,49,79,0.1); }
  .chat-main { min-height: 0; flex: 1; }

  /* ── INSPIRATION ── */
  .grid-wrap { padding: 32px 20px 60px !important; }
  .ideas-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }

  /* ── PRICING TABLE ── */
  .pricing-table { overflow-x: auto !important; }
  .pricing-plans { min-width: 560px; }

  /* ── BESPOKE ── */
  .bespoke-examples { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .hero-headline { font-size: clamp(1.8rem, 9vw, 2.4rem) !important; }
  .section-headline { font-size: clamp(1.5rem, 7vw, 2rem) !important; }
  .ideas-grid { grid-template-columns: 1fr !important; }
  .self-section .self-inner { grid-template-columns: 1fr !important; }
  nav, .sd-nav { padding: 0 1rem !important; }
  section { padding: 40px 16px !important; }
  footer { padding: 32px 16px 24px !important; }
  .hero { padding: 80px 16px 40px !important; }
  .gm-thread { padding: 0.75rem !important; }
  .gm-cats { gap: 0.75rem !important; }
}