/* Final responsive safeguards for the interactive case. */
@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .sidebar { overflow-y: auto; }
  .hero > *, .system-map { min-width: 0; }
  h1 { overflow-wrap: normal; hyphens: none; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .mobile-head {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 40;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background: #12061f;
    color: #fff;
  }
  .mobile-head .brand { font-size: 19px; }
  .sidebar { display: none; top: 76px; width: 100%; padding: 24px; overflow-y: auto; }
  .sidebar.is-open { display: flex; }
  .sidebar > .brand { display: none; }
  .progress { margin-top: 0; }
  main { margin-left: 0; padding: 0 28px 36px; }
  .topline { height: 68px; margin-bottom: 28px; }
  h1 { font-size: 52px; }
  .hero { min-height: 0; grid-template-columns: 1fr; gap: 24px; }
  .system-map { max-width: none; }
  .cards.two, .cards.three, .split, .checklist { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .page-footer { display: grid; gap: 8px; }
}

@media (max-width: 359px) {
  main { padding-right: 16px; padding-left: 16px; }
  .mobile-head { padding-right: 16px; padding-left: 16px; }
  .mobile-head .brand { font-size: 16px; }
  h1 { font-size: 36px; }
  .topline span:last-child { max-width: 125px; text-align: right; }
  .callout, .checkpoint, .panel, .quest,
  .timeline article, .cards article { padding: 19px; }
  .system-map { padding: 14px; }
}