@media (max-width: 720px) {
  .hero { padding-top: 32px; }
  .nav-cta { display: none; }
  .hero h1 { font-size: clamp(40px, 9vw, 56px); }
  .hero-lede { font-size: 16px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; width: 100%; }
  .hero-stats { gap: 18px; flex-wrap: wrap; margin-top: 36px; }
  .hero-stats .stat { flex: 1 1 30%; min-width: 0; }
  .hero-art {
    aspect-ratio: 4/3;
    max-width: 360px;
  }
  .hero-art .photo-a {
    inset: 0 22% 22% 0;
    border-radius: 18px;
  }
  .hero-art .photo-b {
    width: 52%;
    bottom: 0;
    right: 0;
    border-radius: 14px;
  }
  .hero-art .badge {
    width: 92px; height: 92px;
    top: 6%;
    left: auto;
    right: -2%;
    outline-width: 5px;
    border-width: 1.5px;
  }
  .hero-art .badge-num { font-size: 26px; }
  .hero-art .badge-label { font-size: 8.5px; letter-spacing: 0.12em; }
  .hero-art .note { display: none; }
  .features-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .section-head h2, .block h2 { font-size: clamp(30px, 7vw, 40px); }
  .container { padding-inline: 20px; }
  .block { padding: 64px 0; }
  .courses-head-row { gap: 18px; margin-bottom: 36px; }
  .marquee-row { font-size: 14px; }
  .reviews-summary { flex-direction: column; gap: 14px; }
  .rev-sum-block + .rev-sum-block { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--rule); padding-top: 14px !important; }
  .cta-card { padding: 40px 22px !important; border-radius: 22px; }
  .cta-grid { gap: 28px; }
  .map-card { aspect-ratio: 4/3; }
  .teacher-art { max-width: 100% !important; }
  .nav { padding-block: 14px; }
  .brand-name { font-size: 18px; }
  .lead-card { width: calc(100% - 16px); }
  .scroll-progress { height: 2px; }
}
@media (max-width: 460px) {
  .features-grid { grid-template-columns: 1fr; }
  .hero-stats .stat { flex: 1 1 100%; }
  .hero-stats { gap: 14px; }
  .hero-art .badge { width: 78px; height: 78px; top: 4%; left: auto; right: -2%; outline-width: 4px; }
  .hero-art .badge-num { font-size: 22px; }
  .hero-art .badge-label { font-size: 7.5px; }
  .hero-pill { font-size: 11px; }
  .nav-cta { padding: 9px 14px; font-size: 13px; }
  .brand-mark { width: 38px; height: 38px; }
  .courses-grid .course { padding: 22px 20px 22px; }
  .course-name { font-size: 21px; }
  .lead-head h3 { font-size: 20px; }
  .mb-btn { font-size: 12.5px; padding: 11px 6px; }
  .mb-btn span { font-size: 12.5px; }
}