/* R4B Parcel — Responsive rules
   Breakpoints: mobile < 640 · tablet 640–1023 · desktop ≥ 1024 · large ≥ 1440
   Mobile-first layout primitives live above; these adjust at larger sizes.
*/

/* ── Tablet (640–1023px) ───────────────────────────────────────── */
@media (max-width: 1023.98px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-visual { min-height: 420px; max-width: 560px; margin-inline: auto; }

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

  .address-grid, .tracking-grid, .runner-grid { grid-template-columns: 1fr; gap: 3rem; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }

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

/* ── Below desktop — collapse the header nav ───────────────────── */
@media (max-width: 991.98px) {
  .site-header .navbar { min-height: 64px; }
  .site-nav { margin-inline: 0; margin-top: .5rem; }
  .site-nav .nav-link { padding: .6rem .5rem; }
  .site-actions {
    padding-block: .75rem;
    border-top: 1px solid var(--border);
    margin-top: .5rem;
    flex-wrap: wrap;
  }
  .header-user { margin-right: auto; }
}

/* ── Mobile (< 640px) ──────────────────────────────────────────── */
@media (max-width: 639.98px) {
  .benefit-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .steps-grid   { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .why-grid     { grid-template-columns: 1fr; }
  .footer-grid  { grid-template-columns: 1fr; gap: 1.75rem; }

  .hero-title { letter-spacing: -0.02em; }
  .hero-ctas .btn { width: 100%; }
  .hero-visual { min-height: 0; }
  .journey-card, .parcel-card { position: static; width: 100%; margin-bottom: 1rem; }
  .hv-chip { display: none; }

  .footer-bottom { flex-direction: column; text-align: center; }
  .site-actions .btn { flex: 1; }

  /* WhatsApp chat button — compact on phones, label hidden */
  .whatsapp-fab { right: 16px; bottom: 16px; }
  .wa-btn { width: 52px; height: 52px; font-size: 1.4rem; }
  .wa-label { display: none; }
}

/* ── Large desktop (≥ 1440px) — never stretch infinitely ──────── */
@media (min-width: 1440px) {
  .page-container { max-width: 1440px; }
}