/* Monax — responsive.css (mobile-first: base is mobile, rules add up) */

@media (min-width: 576px) {
  .mini-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding: 3rem 2.5rem; }
}

@media (min-width: 768px) {
  .section { padding: 6rem 0; }
  .hero { padding: 4.5rem 0 5rem; }
  .form-mx { padding: 2.2rem; }
  .road { grid-template-columns: repeat(2, 1fr); padding-inline-start: 0; padding-top: 2.4rem; gap: 1.4rem; }
  .road::before { inset-block: 11px auto; inset-inline: 0; border-inline-start: 0; border-top: 3px dashed var(--ink); height: 0; }
  .phase::before { inset-inline-start: 1.2rem; top: -2.4rem; }
  .phase.more { grid-column: 1 / -1; }
}

@media (min-width: 992px) {
  .mx-nav .navbar-collapse { align-items: center; }
  .mx-nav .navbar-nav { margin-inline: auto; gap: .1rem; }
  .mx-nav .navbar-collapse.show, .mx-nav .navbar-collapse.collapsing { padding: 0; }
  .mini-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .road { grid-template-columns: repeat(4, 1fr); }
  .phase.more { grid-column: auto; }
  .hero h1 { line-height: 1.3; }
  .sticky-lg { position: sticky; top: 100px; }
}

@media (max-width: 991.98px) {
  .mx-nav .navbar-collapse { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-sk); margin-top: .7rem; padding: .8rem 1rem !important; }
  .mx-nav .nav-link { padding: .6rem .3rem !important; border-bottom: 1.5px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
  .mx-nav .nav-link::after { display: none; }
  .nav-actions { padding-top: .8rem; display: flex; gap: .8rem; align-items: center; }
}

@media (max-width: 575.98px) {
  .container { padding-inline: 16px; }
  .hero-cta .btn-mx, .hero-cta .btn-mx-ghost { width: 100%; }
  .brick { font-size: .92rem; }
  .brick:nth-child(n) { margin-inline-start: 0; }
  .mig-row .from { min-width: 4.6rem; font-size: .9rem; }
  .cta-band .btn-mx-hl, .cta-band .btn-mx-ghost { width: 100%; }
  .device-bar .sep { display: none; }
  .code-card pre { font-size: .76rem; }
}