/* =========================================================
   Global responsive — BINARY breakpoint at 720px.
   Desktop is the default (every other CSS file).
   Mobile = everything below 720px wide.
   No intermediate states. No clamp() between breakpoints.
   ========================================================= */

@media (max-width: 720px) {
  /* Container + nav + hero */
  .container { width: min(100% - 28px, var(--container)); }
  .nav__inner { min-height: 66px; }
  .hero { padding: 48px 0 50px; }
  .hero__inner { max-width: none; }

  /* Section spacing (was 980px override at 76px) */
  .section { padding: 64px 0; }

  /* Typography — step values, no fluid scaling */
  h1 { font-size: 2.75rem; line-height: 1.06; }
  h2 { font-size: 2.05rem; line-height: 1.08; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }
  .btn { width: 100%; white-space: normal; text-align: center; }
  .nav__links .btn { width: auto; }

  /* Trust + footer + journey tabs */
  .trust__line { font-size: 11px; }
  .footer__top { align-items: flex-start; flex-direction: column; }
  .journey-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .journey-tabs::-webkit-scrollbar { display: none; }
  .journey-tab { font-size: 13px; padding: 0 12px; white-space: nowrap; }

  /* Eyebrows and kickers wrap better on narrow */
  .eyebrow, .kicker { max-width: 100%; line-height: 1.3; }

  /* Self-learn CTA */
  .selflearn-cta__content { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}