/* ==========================================================================
   RESPONSIVE — mobile-first overrides, breakpoints top-down from desktop
   Base styles in main.css already work down to ~1024px comfortably.
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --fs-3xl: 3.4rem;
    --fs-2xl: 2.6rem;
  }

  .hero__grid,
  .planner-feature,
  .about-grid,
  .planner-hero__grid,
  .testimonial-featured {
    grid-template-columns: 1fr;
  }

  .hero__media {
    order: -1;
  }

  .grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .compare {
    grid-template-columns: 1fr;
  }

  .offer-box__grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --fs-3xl: 2.6rem;
    --fs-2xl: 2.1rem;
    --fs-xl: 1.9rem;
    --space-2xl: 4rem;
    --space-3xl: 5rem;
  }

  .nav {
    position: fixed;
    inset: 0;
    top: 76px;
    background: var(--color-background);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-lg) var(--space-md);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
  }

  .nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav__list {
    flex-direction: column;
    gap: var(--space-md);
    font-size: var(--fs-md);
  }

  .nav-toggle {
    display: flex;
  }

  .hero__actions,
  .cta-band__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .planner-feature,
  .offer-box,
  .community-section,
  .form-panel {
    padding: var(--space-lg);
  }

  .grid-cards {
    grid-template-columns: 1fr;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .community-grid {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-field--full,
  .form-field {
    grid-column: 1 / -1;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-sm);
  }

  .btn {
    width: 100%;
  }

  .hero__actions .btn,
  .cta-band__actions .btn {
    width: 100%;
  }

  .site-header__inner {
    padding: var(--space-2xs) var(--space-sm);
  }

  .offer-box,
  .planner-feature,
  .community-section,
  .form-panel {
    padding: var(--space-md);
  }
}