/**
 * Responsive — mobile-first breakpoints
 */

html {
  overflow-x: hidden;
}

body {
  -webkit-text-size-adjust: 100%;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Mobile (< 768px)
   ========================================================================== */

@media (max-width: 767px) {
  .site-header__nav {
    display: none;
  }

  .site-header__actions .btn--primary,
  .site-header__actions .btn--secondary {
    display: none;
  }

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

  /* Hero */
  .hero {
    min-height: auto;
    padding-top: calc(64px + var(--space-5));
    padding-bottom: var(--space-6);
  }

  .hero__headline {
    font-size: var(--text-4xl);
  }

  .hero__sub {
    font-size: var(--text-base);
  }

  .hero__actions .btn {
    width: 100%;
  }

  .waveform {
    height: 80px;
  }

  /* Features */
  .feature-row {
    flex-direction: column;
    gap: var(--space-2);
  }

  .feature-row__number {
    font-size: var(--text-xl);
  }

  /* Steps */
  .step {
    gap: var(--space-3);
  }

  .step__marker {
    width: 36px;
    height: 36px;
    font-size: var(--text-sm);
  }

  /* Editions */
  .editions {
    grid-template-columns: 1fr;
  }

  .edition--featured {
    order: -1;
  }

  .pricing__amount {
    font-size: var(--text-4xl);
  }

  /* Footer */
  .site-footer__inner {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  .site-footer__links {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Section spacing */
  .section {
    padding: var(--space-6) 0;
  }

  /* Touch targets */
  .btn, .nav-link, button, a {
    min-height: 44px;
  }
}

/* Very small screens */
@media (max-width: 374px) {
  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .site-header {
    padding: 0 var(--space-3);
  }

  .hero__headline {
    font-size: var(--text-3xl);
  }
}

/* ==========================================================================
   Tablet+ (768px+)
   ========================================================================== */

@media (min-width: 768px) {
  .mobile-menu-toggle {
    display: none;
  }

  .mobile-menu {
    display: none !important;
  }

  .site-header__nav {
    display: flex;
  }

  .site-header__actions .btn--primary,
  .site-header__actions .btn--secondary {
    display: inline-flex;
  }
}

/* ==========================================================================
   Desktop (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
  .hero {
    min-height: calc(100vh - 64px);
  }

  .hero__headline {
    font-size: var(--text-6xl);
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .hamburger-line {
    transition: none;
  }
}

@media print {
  .mobile-menu-toggle,
  .mobile-menu {
    display: none !important;
  }

  .site-header__nav {
    display: flex !important;
  }
}