/* ==========================================================================
   Responsive rules
   ========================================================================== */

@media (max-width: 1080px){
  .topic-grid, .practice-grid, .worksheet-grid, .resource-grid{ grid-template-columns: repeat(2, 1fr); }
  .calc-grid{ grid-template-columns: repeat(3, 1fr); }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .stats-band-grid{ grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-5); }
  .hero-stats{ grid-template-columns: repeat(2, 1fr); }
  .hero-inner{ gap: var(--sp-5); }
  .container{ padding: 0 var(--sp-4); }
}

/* ---- Tablets ---- */
@media (max-width: 1024px){
  .hero-inner{ grid-template-columns: 1fr; text-align: left; }
  .hero-visual{ height: 300px; order: -1; margin: 0 auto; max-width: 460px; width: 100%; }
  .contact-grid{ grid-template-columns: 1fr; }
  .faq-columns{ grid-template-columns: 1fr; }
  .legal-wrap{ grid-template-columns: 200px 1fr; gap: var(--sp-5); }

  /* Header: collapse full nav + hide the desktop "Start Practice" CTA, show hamburger */
  .site-nav{ display: none; }
  .header-cta{ display: none; }
  .nav-toggle{ display: flex; }
}

/* Desktop only: the slide-in panel & its backdrop should never occupy space or be reachable */
@media (min-width: 1025px){
  .mobile-nav, .mobile-nav-backdrop{ display: none; }
}

@media (max-width: 860px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .legal-wrap{ grid-template-columns: 1fr; padding: var(--sp-5) 0; }
  .legal-toc{
    position: static; border-left: none; border-bottom: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-bottom: var(--sp-4); margin-bottom: var(--sp-2);
  }
  .legal-toc-label{ display: none; }
  .legal-toc a{
    border: 1px solid var(--line); border-radius: var(--radius-full); padding: 6px 14px; margin-left: 0;
  }
  .legal-toc a:hover, .legal-toc a.active{ background: var(--indigo); color: #fff; border-color: var(--indigo); }
}

/* ---- Mobile: hide hero illustration, lead with heading ---- */
@media (max-width: 760px){
  .container{ padding: 0 var(--sp-4); }
  .section{ padding: var(--sp-7) 0; }

  .footer-logo{ font-size: 17px; gap: 8px; }
  .logo-mark{ width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }

  .header-inner{ height: 64px; }
  .site-logo{ font-size: 17px; }
  .mobile-nav{ width: 100%; padding: 88px var(--sp-4) var(--sp-6); }

  .hero{ padding: var(--sp-6) 0 var(--sp-5); }
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-visual{ display: none; }
  .hero-copy{ text-align: left; }
  .hero-copy h1{ font-size: clamp(28px, 8vw, 36px); }
  .hero-copy p.lede{ max-width: 100%; font-size: 16px; }
  .hero-search{ flex-wrap: wrap; border-radius: var(--radius-m); padding: 6px; }
  .hero-search input{ flex-basis: 100%; padding: 10px 8px; }
  .hero-search button{ width: 100%; justify-content: center; }
  .hero-ctas{ flex-direction: column; }
  .hero-ctas .btn{ width: 100%; }
  .hero-stats{ grid-template-columns: repeat(2, 1fr); }

  .topic-grid, .practice-grid, .worksheet-grid, .resource-grid, .feature-grid, .calc-grid{ grid-template-columns: 1fr 1fr; }
  .stats-band-grid{ grid-template-columns: repeat(2, 1fr); }
  .stats-band{ padding: var(--sp-5) var(--sp-4); }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

  .section-head{ margin-bottom: var(--sp-5); }
  .section-head h2{ font-size: clamp(24px, 6vw, 32px); }

  .quiz-card, .challenge-card{ padding: var(--sp-4); }
  .quiz-footer{ flex-wrap: wrap; gap: var(--sp-3); }
  .quiz-footer .btn{ flex: 1; }

  .faq-controls{ flex-direction: column; align-items: stretch; }
  .faq-search{ max-width: none; }


  .cta-banner{ padding: var(--sp-6) var(--sp-4); }

  .contact-cards{ grid-template-columns: 1fr; }
}

/* ---- Small phones ---- */
@media (max-width: 520px){
  .topic-grid, .practice-grid, .worksheet-grid, .resource-grid, .feature-grid, .calc-grid{ grid-template-columns: 1fr; }
  .stats-band-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; gap: var(--sp-3); text-align: center; }
  .hero-copy h1{ font-size: 30px; }
  .challenge-card, .quiz-card{ padding: var(--sp-4); }
  .hero-search{ flex-wrap: nowrap; }
  .hero-search input{ min-width: 0; flex-basis: auto; }
  .footer-logo{ font-size: 16px; gap: 6px; }
  .logo-mark{ width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
  .btn{ padding: 13px 22px; font-size: 14px; }
  .eyebrow{ font-size: 12px; }
}

/* ---- Very small phones ---- */
@media (max-width: 380px){
  .container{ padding: 0 var(--sp-3); }
  .footer-logo{ font-size: 15px; }
  .hero-copy h1{ font-size: 26px; }
  .hero-stats{ grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .stat-card{ padding: var(--sp-2); }
  .stat-num{ font-size: 20px; }
  .btn{ padding: 12px 18px; font-size: 13.5px; }
}

/* ---- Prevent any section from causing horizontal scroll ---- */
.container, .hero, .section{ max-width: 100%; }
img, svg{ max-width: 100%; height: auto; }