@media (max-width: 1100px) {
  .hero-grid, .hero-grid-pro, .fundamentals-layout, .builder-layout, .topology-layout, .analyzer-layout, .quiz-layout { grid-template-columns: 1fr; }
  .hero-grid-pro { align-items: stretch; }
  .sticky-panel { position: static; }
  #hero-terminal.terminal-body { height: 230px; min-height: 230px; }
  .hero-gallery { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .section-head-with-media { grid-template-columns: 1fr; }
  .section-head-with-media .section-media img { height: 220px; }
  .hero-banner-main img { max-height: none; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 280px; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; transform: translateX(-100%);
    transition: transform 220ms ease; box-shadow: 0 20px 40px rgba(2,8,23,0.5); z-index: 40;
  }
  .sidebar.open { transform: translateX(0); }
  #menu-toggle { display: inline-flex !important; }
  .main-wrap { width: 100%; }
  main { padding: 0.75rem; }
  .topbar { padding: 0.6rem 0.75rem; gap: 0.5rem; }
  .library-controls { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero.section { min-height: auto; align-items: stretch; padding: 1rem 0 1.5rem; }
}

@media (max-width: 640px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .option-cards { grid-template-columns: 1fr; }
  .option-cards.compact { grid-template-columns: 1fr 1fr; }
  .library-grid, .cheatsheet-grid, .labs-grid { grid-template-columns: 1fr; }
  .stages-grid { grid-template-columns: 1fr 1fr; }
  .site-footer { flex-direction: column; align-items: flex-start; }
  .search-wrap { max-width: none; }
  .topology-controls { flex-direction: column; align-items: stretch; }
  .analyzer-toolbar { flex-direction: column; align-items: stretch; }
  .modal-dialog { width: calc(100vw - 1rem); margin: 0.5rem auto; }
  .modal-body .kv { grid-template-columns: 1fr; }
  .hero-images img { height: 34px; }
  .hero-highlights { grid-template-columns: 1fr; }
  .hero-gallery { grid-template-columns: 1fr; }
  .hero-gallery img { height: 160px; }
  .section-head-with-media .section-media img { height: 180px; }
  .ref-controls, .ref-target-row { grid-template-columns: 1fr; display: grid; }
}

@media (max-width: 420px) {
  .stages-grid, .option-cards.compact { grid-template-columns: 1fr; }
}