@media (max-width: 1100px) {
  .hero--home,
  .page-hero,
  .quick-grid,
  .boundary-split,
  .status-split {
    grid-template-columns: 1fr;
  }

  .confirmation-grid,
  .security-matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .backup-chain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .backup-step:not(:last-child)::after {
    display: none;
  }

  .grid--four,
  .links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .nav-shell {
    min-height: 68px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: fixed;
    left: 20px;
    right: 20px;
    top: 78px;
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(7, 11, 18, .98);
    box-shadow: var(--shadow);
    transform: translateY(-16px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }

  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav a {
    justify-content: flex-start;
    min-height: 44px;
  }

  h1,
  .page-hero h1 {
    font-size: 46px;
    line-height: 1.04;
  }

  .hero,
  .page-hero {
    padding: 62px 0 40px;
  }

  .grid--two,
  .grid--three,
  .grid--four {
    grid-template-columns: 1fr;
  }

  .topology-map,
  .zone-map,
  .arch-row,
  .arch-row--short,
  .monitor-rail {
    grid-template-columns: 1fr;
  }

  .map-arrow,
  .flow-arrow {
    min-height: 28px;
    transform: rotate(90deg);
  }

  .zone-lane {
    min-height: auto;
  }
}

@media (max-width: 680px) {
  .page,
  .nav-shell,
  .footer__inner {
    width: min(100% - 28px, var(--max));
  }

  h1,
  .page-hero h1 {
    font-size: 38px;
  }

  h2 {
    font-size: 22px;
  }

  .lead,
  .page-hero__text {
    font-size: 17px;
  }

  .hero,
  .page-hero {
    padding: 46px 0 30px;
  }

  .section {
    padding: 24px 0 38px;
  }

  .surface-card,
  .table-panel,
  .node-card,
  .note-panel,
  .status-panel,
  .control-card,
  .monitor-panel,
  .ops-frame,
  .zone-board,
  .security-wall,
  .error-panel {
    padding: 16px;
  }

  .confirmation-grid,
  .security-matrix,
  .blocked-grid,
  .backup-chain,
  .links-grid {
    grid-template-columns: 1fr;
  }

  .spec-list li,
  .check-list li,
  .link-facts li,
  .expectation-row {
    grid-template-columns: 1fr;
  }

  .button,
  .button-row .button,
  .hero__actions .button {
    width: 100%;
  }

  .hero__actions,
  .button-row {
    flex-direction: column;
  }

  .terminal pre {
    padding: 14px;
  }

  table {
    min-width: 520px;
  }

  .error-code {
    font-size: 82px;
  }

  .error-panel h1 {
    font-size: 34px;
  }
}

@media (max-width: 430px) {
  .brand__sub {
    display: none;
  }

  h1,
  .page-hero h1 {
    font-size: 34px;
  }

  .map-node h3 {
    font-size: 21px;
  }

  .meta-strip span,
  .tag-row span,
  .path-grid code,
  .route-chip {
    width: 100%;
  }
}