@media (max-width: 700px) {
  .site-header,
  main,
  footer { width: min(calc(100% - 24px), 1180px); }
  .site-header { gap: 8px; padding-block: 8px; }
  .brand { font-size: 13px; }
  .site-header nav { border-top: 1px solid var(--line); padding-top: 6px; font-size:14px; }
  .site-header nav a { padding: 2px 4px; }
  .units button,
  .chart-tabs button { min-height: 32px; padding:4px 8px; }
  .hero { padding: 38px 0 24px; }
  .hero h1 { font-size: clamp(42px, 13vw, 62px); }
  .metrics { grid-template-columns: 1fr; margin: 10px 0 18px; }
  .metric,
  .metric:first-child,
  .metric:nth-child(2),
  .metric:nth-child(3) { border-left: 0; }
  .metric:nth-child(2),
  .metric:nth-child(3) { border-top: 1px solid var(--line); }
  .metric {
    grid-template-rows: 1.15rem 4rem 1.15rem auto;
    padding: 12px 18px;
  }
  .metric.primary { grid-column: auto; }
  .metric > strong,
  .metric.primary > strong {
    font-size: clamp(38px, 11vw, 46px);
    margin: 0;
  }
  .panel { padding: 18px; }
  .chart-tabs { width: 100%; justify-content: space-between; }
  .chart { height: 320px; margin-top: 12px; }
  .chart .label { font-size: 13px; font-weight: 600; }
  .table-wrap { margin-inline: -18px; padding-inline: 18px; }
  .table-wrap table { min-width: 620px; }
  .pager { font-size: 13px; gap: 8px; }
  .chart-tooltip { min-width: 170px; }
  .range-form { width: 100%; justify-content: space-between; }
  .range-form select { min-height: 42px; }
  footer { gap: 18px; flex-wrap: wrap; padding-bottom: 32px; }
}