@media (max-width: 720px) {
  header {
    gap: 12px;
  }

  .brand,
  .add-top {
    flex: 0 0 auto;
  }

  .nav-btn,
  .import-top {
    white-space: nowrap;
  }

  .header-actions {
    min-width: max-content;
  }

  .import-top {
    padding-inline: 6px;
    font-size: 12px;
  }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 12px;
    align-items: end;
  }

  .hero h1 {
    font-size: 36px;
  }

  .subtitle {
    max-width: none;
  }

  .today-ring {
    width: 84px;
    height: 84px;
  }

  .today-ring strong {
    font-size: 34px;
  }
}