/* Breakpoints. The layout is intrinsically responsive (clamp() type,
   auto-fit grids), so these rules only handle the switches that cannot
   be expressed intrinsically. Load LAST. */

/* ---------- < 960px : tablet and below ---------- */
@media (max-width: 959.98px) {
  .site-header .nav,
  .site-header .btn--header { display: none; }
  .menu-toggle { display: grid; }
}

/* ---------- >= 960px : desktop ---------- */
@media (min-width: 960px) {
  .mobile-nav { display: none !important; }
}

/* ---------- <= 768px : tablet portrait ---------- */
@media (max-width: 768px) {
  .hero { gap: var(--s-14); }
  .hero__visual { grid-template-columns: auto minmax(0, 220px); max-width: 100%; }
  .cta-band { padding: clamp(32px, 6vw, 56px); }
  .steps-list__item { grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-9); }
  .faq__aside, .legal-aside { position: static; }
  .legal-body { grid-column: auto; }
}

/* ---------- <= 600px : mobile ---------- */
@media (max-width: 600px) {
  .hero__visual { grid-template-columns: 1fr; justify-items: center; gap: var(--s-9); }
  .hero__stack { width: min(100%, 300px); }
  .phone { width: min(70vw, 240px); }
  .feature { min-height: 0; }
  .btn { width: 100%; }
  .row .btn, .cta-band__actions .btn, .hero__copy .btn { flex: 1 1 100%; }
  .footer-grid { gap: var(--s-12); }
  .form { padding: var(--s-9); }
  .form__foot { flex-direction: column; align-items: stretch; gap: var(--s-5); }
  .pkg { padding: var(--s-11); }
  .planner__legend { gap: var(--s-4); }
  .marquee__group { font-size: 17px; gap: var(--s-12); padding-right: var(--s-12); }
}

/* ---------- print ---------- */
@media print {
  .site-header, .mobile-nav, .marquee, .menu-toggle { display: none !important; }
  .site-main { animation: none; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
}