/* responsive.css -- mobile-first media queries & motion preferences */

@media (max-width: 992px) {
  .hero__inner { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .cols-3, .pricing, .team { grid-template-columns:repeat(2,1fr); }
  .calc { grid-template-columns:1fr; }
  .scenario-feature { grid-template-columns:1fr; }
  .pipeline, .pipeline.cols-4 { grid-template-columns:repeat(2,1fr); }
  .pipeline .step::after { display:none; }

  /* image-map <area> coords are fixed to the 760px source; below that the map
     would mis-scale, so hide it and let the legend (always shown) stand alone. */
  .coverage-grid { grid-template-columns:1fr; }
  .coverage-map { display:none; }
}

@media (max-width: 768px) {
  /* collapse the primary nav into a drawer */
  .nav__toggle { display:inline-flex; align-items:center; justify-content:center; }
  .nav__links { display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--c-surface); border-bottom:1px solid var(--c-border); padding:var(--sp-3);
    box-shadow:var(--shadow-2); }
  .nav.open .nav__links { display:flex; }
  .nav__links a { padding:.85rem; }
  .nav__links a[aria-current="page"]::after { left:.85rem; right:auto; width:18px; }
  .nav { position:sticky; }
  .nav__inner { position:relative; }
  .nav__cta .btn-primary { display:none; }       /* keep the toggle + REC clear on small screens */

  .feeds { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 640px) {
  .stats, .cols-2, .cols-3, .pricing, .team, .calc__out { grid-template-columns:1fr; }
  .pipeline, .pipeline.cols-4 { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:1fr; }
  .hero__cta { flex-direction:column; align-items:stretch; }
  .hero__cta .btn { width:100%; }
  .transport { flex-direction:column; }
  .transport a { justify-content:center; }
  .calc__out { grid-template-columns:1fr 1fr; }   /* keep the readout compact, not a single column */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}