@media (max-width: 1100px) {
  .jolly-nav,
  .jolly-header__actions {
    display: none;
  }

  .mobile-menu-toggle {
    display: grid;
  }

  .benefit-grid,
  .courses-grid,
  .testimonials-grid,
  .approach-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .path-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .path-line {
    display: none;
  }

  .characters-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .work-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .jolly-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .home-hero__grid,
  .about-hero__grid,
  .dashboard-preview__grid,
  .faq-layout,
  .contact-grid,
  .legal-grid {
    grid-template-columns: 1fr;
  }

  .home-hero__grid {
    padding-block: 2rem 4rem;
  }

  .hero-world {
    min-height: 440px;
  }

  .legal-toc {
    position: static;
  }

  .teacher-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .section-pad {
    padding-block: 3.5rem;
  }

  .container-x {
    padding-inline: 1rem;
  }

  .home-hero h1,
  .about-hero h1,
  .page-hero h1 {
    font-size: 2.35rem;
  }

  .home-hero p,
  .about-hero p,
  .page-hero p {
    font-size: 1rem;
  }

  .benefit-grid,
  .courses-grid,
  .testimonials-grid,
  .approach-grid,
  .three-grid,
  .path-grid,
  .characters-grid,
  .work-grid,
  .stats-row,
  .teacher-details,
  .contact-form,
  .jolly-footer__grid {
    grid-template-columns: 1fr;
  }

  .path-step:nth-child(even) {
    transform: none;
  }

  .hero-world {
    min-height: 360px;
    border-radius: 2rem;
  }

  .hero-mascot--aya {
    width: 10rem;
    height: 10rem;
  }

  .hero-mascot--jojo,
  .hero-mascot--lolly {
    width: 4.5rem;
    height: 4.5rem;
  }

  .hero-mascot--bubbles {
    width: 4rem;
    height: 4rem;
  }

  .sound-wave {
    display: none;
  }

  .final-cta,
  .mini-cta {
    border-radius: 2rem;
    padding: 3rem 1.25rem;
  }

  .final-cta__mascot {
    opacity: .45;
  }

  .sample-label {
    right: 1rem;
    left: 1rem;
    text-align: center;
  }

  .sample-free {
    display: none;
  }

  .next-lesson {
    grid-template-columns: 1fr;
  }

  .next-lesson a {
    grid-column: 1;
    grid-row: auto;
    margin-top: .75rem;
  }

  .jolly-footer__bottom {
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .btn-primary,
  .btn-secondary,
  .btn-light,
  .btn-outline-light {
    width: 100%;
  }

  .hero-actions,
  .final-cta__content > div {
    display: grid;
  }

  .jolly-logo__text {
    font-size: .9rem;
  }

  .mobile-drawer__panel {
    inset-inline: .75rem;
  }
}