/* ══════════════════════════════
   RESPONSIVE — mobile first overrides
══════════════════════════════ */

/* ── Tablet ≤ 960px ── */
@media (max-width: 960px) {
  .how__grid {
    grid-template-columns: 1fr;
  }
  .scoring__grid {
    grid-template-columns: 1fr;
  }
  .modes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .screens__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats {
    gap: 2.5rem;
  }
}

/* ── Mobile ≤ 640px ── */
@media (max-width: 640px) {
  .section {
    padding: 4rem 0;
  }

  .hero {
    padding: calc(var(--nav-h) + 2rem) 1.2rem 3rem;
  }

  .stats {
    gap: 1.8rem;
    padding: 1.5rem 1rem;
  }
  .stats__num {
    font-size: 1.7rem;
  }

  .modes__grid {
    grid-template-columns: 1fr;
  }
  .screens__grid {
    grid-template-columns: 1fr;
  }

  .hero__cta {
    flex-direction: column;
    align-items: center;
  }
  .hero__cta .btn {
    width: 100%;
    max-width: 320px;
  }

  .hero__logo-img {
    width: 150px;
    height: 150px;
    max-width: 150px;
  }

  .legal-body {
    padding: 1.5rem 1.2rem 5rem;
  }
  .legal-hero {
    padding: calc(var(--nav-h) + 2.5rem) 1.2rem 2.5rem;
  }
}