/* ============================================================
   Responsive overrides. Mobile is a first-class layout, not a
   shrunk desktop: bottom tab bar, stacked hero, single-column
   grids, larger tap targets.
   ============================================================ */

@media (max-width: 1020px){
  .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .steps{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px){
  .main-nav, .header-cta .phone-desktop{ display:none; }
  .hamburger{ display:block; }
  .hero .wrap{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; max-width: 420px; margin: 0 auto; }
  .two-col{ grid-template-columns: 1fr; gap: 32px; }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  body{ padding-bottom: 70px; } /* room for bottom tab bar */
  .mobile-tabbar{ display:block; }
}

@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
  .field-row, .option-grid{ grid-template-columns: 1fr; }
  .checklist-panel.is-active{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .hero-float{ display:none; }
  .site-header .wrap{ height: 72px; }
  .mobile-nav{ inset: 72px 0 0 0; }
  .hero-trust{ gap: 20px 28px; }
  .form-nav{ flex-wrap:wrap; }
  .btn{ padding: 14px 22px; }
}

/* Comfortable tap targets everywhere on touch */
@media (hover: none){
  .btn, .main-nav a, .card-link, .footer-social a{ min-height: 44px; }
}