/* Mobile-only typography guardrails. Desktop presentation is unchanged. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 720px) {
  .section-heading h2,
  .chapter-heading h1 {
    font-size: clamp(28px, 7.5vw, 40px);
    line-height: 1.06;
  }

  .featured-card-content strong,
  .cinematic-copy strong {
    font-size: clamp(26px, 7vw, 38px);
    line-height: 1.06;
  }

  .site-footer button strong {
    font-size: clamp(30px, 8.5vw, 44px);
    line-height: 1.04;
  }

  .hero h1,
  .section-heading h2,
  .chapter-heading h1,
  .chapter-hero-copy h1,
  .course-intro h1,
  .course-intro h2,
  .featured-card-content strong,
  .cinematic-copy strong,
  .site-footer button strong {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
}

@media (max-width: 390px) {
  .section-heading h2,
  .chapter-heading h1 {
    font-size: clamp(26px, 7.4vw, 34px);
  }

  .featured-card-content strong,
  .cinematic-copy strong {
    font-size: clamp(24px, 6.8vw, 34px);
  }

  .site-footer button strong {
    font-size: clamp(28px, 8vw, 40px);
  }
}