/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .feature-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .section {
    padding: 64px 0;
  }
  .feature-grid,
  .feature-grid--3,
  .feature-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .split__image {
    height: 260px;
  }
  /* .btn defaults to white-space:nowrap (components/buttons.css) so long
     labels (prices, arrows, em-dashes) can overflow their container on
     narrow screens -- body{overflow-x:hidden} (base.css) hides that as a
     silent clip rather than a visible scrollbar. Same treatment already
     proven for the homepage hero buttons (pages/home.css), applied sitewide. */
  .btn {
    white-space: normal;
    max-width: 100%;
    text-align: center;
  }
  .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .card-grid,
  .card-grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .process-flow {
    flex-direction: column;
  }
  .process-flow::before {
    display: none;
  }
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .nav__menu,
  .nav__actions {
    display: none;
  }
  .nav__hamburger {
    display: flex;
  }
  .cta-block {
    padding: 2.5rem 1.5rem;
  }
}