@media (max-width: 980px) {
  .main-nav { display: none; }
  .hero { min-height: auto; padding-top: 125px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-lead { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-note { width: max-content; max-width: 100%; margin-inline: auto; text-align: left; }
  .hero-visual { width: min(650px, 100%); margin: 0 auto; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 0; }
  .episode-card { grid-template-columns: 1fr; gap: 42px; }
  .episode-copy { padding: 0 15px 15px; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-inner > * { justify-self: center; }
  .footer-inner p:last-child { text-align: center; }
}

@media (max-width: 640px) {
  .container { width: min(100% - 26px, 1180px); }
  .site-header { padding-top: 15px; }
  .brand { font-size: 21px; }
  .brand-mark { width: 36px; height: 36px; }
  .button-small { display: none; }
  .hero { padding-top: 100px; padding-bottom: 85px; }
  h1 { font-size: 55px; line-height: .98; letter-spacing: -2.7px; }
  .hero-lead { font-size: 17px; line-height: 1.55; }
  .hero-actions { flex-direction: column; gap: 20px; }
  .hero-actions .button { width: 100%; }
  .hero-visual { min-height: 430px; margin-top: 20px; }
  .sun { width: 330px; height: 330px; right: calc(50% - 165px); top: 50px; }
  .orbit-one { width: 390px; height: 390px; right: calc(50% - 195px); top: 20px; }
  .orbit-two { display: none; }
  .character-lemon { width: 205px; left: -10px; bottom: 12px; }
  .character-orange { width: 195px; right: -8px; bottom: 7px; }
  .speech-bubble { top: 24px; left: 8px; width: 190px; padding: 13px 16px 15px; }
  .speech-bubble span { margin-bottom: 4px; font-size: 8px; letter-spacing: 1px; }
  .speech-bubble strong { font-size: 24px; }
  .question-one { right: 10px; top: 90px; }
  .question-two { left: 55%; top: 10px; }
  .star-one { right: 8px; top: 30px; }
  .section { padding: 75px 0; }
  .section-heading { margin-bottom: 36px; }
  .section-heading h2, .episode-copy h2, .cta h2 { font-size: 42px; }
  .section-heading > p { font-size: 16px; }
  .feature-card { padding: 27px; }
  .episode { padding-top: 20px; }
  .episode-card { padding: 13px; border-radius: 28px; }
  .episode-poster { min-height: 455px; border-radius: 22px; }
  .poster-title { top: 77px; left: 20px; font-size: 36px; }
  .poster-lemon { width: 205px; left: -18px; }
  .poster-orange { width: 185px; right: -18px; }
  .play-button { width: 70px; height: 70px; }
  .play-button svg { width: 32px; height: 32px; }
  .episode-copy { padding: 8px 13px 22px; }
  .episode-copy .button { width: 100%; min-height: 62px; text-align: center; }
  .cta-inner { padding: 42px 28px; }
  .cta-inner .button { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .character-lemon { animation: float-left 4.8s ease-in-out infinite; }
  .character-orange { animation: float-right 5.2s ease-in-out infinite; }
  .star-one, .question-two { animation: twinkle 3s ease-in-out infinite; }
  @keyframes float-left { 0%,100% { translate: 0 0; } 50% { translate: 0 -11px; } }
  @keyframes float-right { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
  @keyframes twinkle { 0%,100% { opacity: .55; scale: .85; } 50% { opacity: 1; scale: 1.1; } }
}