@media (max-width: 900px) {
  .hero h1,
  .section-intro h2,
  .knowledge-title h2,
  .closing h2 {
    line-height: .96;
    padding-block: .04em .1em;
    overflow: visible;
  }

  .stage-copy h3 {
    line-height: 1;
    padding-bottom: .08em;
    overflow: visible;
  }

  .mobile-menu {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(48px, env(safe-area-inset-bottom));
  }

  .mobile-menu a {
    min-height: 48px;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .site-header .brand,
  .footer-brand,
  .menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
  }

  .tab {
    min-height: 44px;
    padding: 12px 15px;
  }

  .table-status button {
    min-width: 84px;
    min-height: 44px;
    padding: 10px 12px;
  }

  .footer-links a {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-block: 8px;
  }

  .ticker span,
  .ticker small,
  .machine-meta,
  .coordinate,
  .metric-head,
  .eyebrow,
  .kicker,
  .freshness,
  .data-row.header,
  .footer-links span,
  .footer-bottom {
    font-size: 10px;
  }

  .protocol-card > span,
  .stage-copy > span,
  .tab,
  .table-status button,
  summary span {
    font-size: 10px;
  }

  .ticker article {
    gap: 8px;
  }

  summary {
    padding-inline: 2px;
  }
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: clamp(56px, 20vw, 69px);
  }

  .section-intro h2,
  .knowledge-title h2 {
    font-size: clamp(42px, 13vw, 50px);
  }

  .closing h2 {
    font-size: clamp(54px, 17vw, 70px);
  }

  .mobile-menu {
    gap: 12px;
    padding-top: 100px;
  }

  .mobile-menu a {
    font-size: clamp(30px, 10vw, 36px);
  }

  .tabs {
    width: 100%;
  }

  .tab {
    flex: 1 1 auto;
  }

  .table-status {
    gap: 12px;
  }

  .footer-links {
    column-gap: 24px;
    row-gap: 26px;
  }

  .footer-links > div {
    gap: 0;
  }
}