@layer utilities {
  @media (max-width: 900px) {
    .principles-grid, .pricing-preview-grid, .journey-steps { grid-template-columns: 1fr; }
    .site-header nav > a.desktop-nav-link, .site-header nav > a.sign-in-link, .site-header nav > form { display: none; }
    .mobile-nav { display: block; }
    .site-header nav .button { flex-shrink: 0; white-space: nowrap; }
    .site-header nav { gap: 0; }
    .site-header-inner { justify-content: space-between; }
    .split { align-items: stretch; flex-direction: column; }
    .document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-copy { margin-left: 0; }
  }

  @media (max-width: 560px) {
    .site-header { padding-inline: 0.75rem; }
    .site-header-inner { gap: 0.5rem; padding: 0.5rem 0.6rem; }
    .site-header nav { gap: 0.25rem; }
    .site-header nav .button { min-height: 2.75rem; padding-inline: 0.9rem; font-size: 0.8rem; white-space: nowrap; }
    .cover-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .course-setup-card { padding: 1.25rem; }
    .document-grid { grid-template-columns: 1fr; }
    .chat-form { align-items: stretch; flex-direction: column; }
    .message { max-width: 95%; }
    .site-footer-inner { flex-direction: column; align-items: flex-start; }
  }

  @media (max-width: 380px) {
    .site-header .brand span { display: none; }
  }
}