/* ==========================================================================
   RESPONSIVE — mobile-first overrides (base styles are desktop in style.css)
   ========================================================================== */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 480px; margin: 0 auto 20px; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; }
  .parents-split { grid-template-columns: 1fr; }
  .parents-split .parents-visual { order: -1; max-width: 460px; margin: 0 auto; }
  .works-split { grid-template-columns: 1fr; }
  .works-split .works-visual { order: -1; max-width: 420px; margin: 0 auto; }
  .testimonial-scroller { grid-template-columns: repeat(2, 1fr); }
  .payment-layout { grid-template-columns: 1fr; }
  .payment-summary { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .device-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .main-nav { display: none; }
  .header-actions .btn-ghost { display: none; }
  .nav-toggle { display: flex; }

  .main-nav.is-open {
    display: flex;
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(320px, 84vw);
    background: var(--color-ivory);
    z-index: 95;
    padding: 100px 32px 32px;
    box-shadow: -20px 0 60px rgba(0,0,0,0.2);
    transform: translateX(0);
    transition: transform 0.4s var(--ease-out);
  }
  .main-nav ul { flex-direction: column; gap: 26px; }
  .main-nav a { font-size: 1.1rem; }

  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .footer-cta-inner { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 680px) {
  .container { padding: 0 20px; }
  .section { padding: 72px 0; }
  .section--tight { padding: 56px 0; }

  .hero { padding: 60px 0 70px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .hero-trust { gap: 18px; }
  .hero-float-card { display: none; }

  .benefit-grid { grid-template-columns: 1fr; }
  .device-row { grid-template-columns: 1fr 1fr; }
  .testimonial-scroller { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
  .quiz-options { grid-template-columns: 1fr; }
  .quiz-shell { padding: 30px 22px; }
  .form-row-split { grid-template-columns: 1fr; }
  .parents-list { grid-template-columns: 1fr; }
  .topbar-inner { justify-content: center; text-align: center; }
  .topbar-item--right { display: none; }
  .price-card { padding: 32px 26px; }
}