@media (min-width: 821px) {
  .bottom-nav {
    display: none;
  }
}

@media (max-width: 900px) {
  .home-hero,
  .content-grid,
  .progress-layout {
    grid-template-columns: 1fr;
  }

  .hero-orbit {
    justify-content: start;
  }

  .dashboard-grid,
  .achievement-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  :root {
    --header-height: 68px;
  }

  .site-header {
    padding: 12px 16px;
  }

  .top-nav {
    display: none;
  }

  .brand span {
    font-size: 0.95rem;
  }

  .page-shell {
    width: min(100% - 24px, 1120px);
    padding-top: 22px;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  .home-hero {
    min-height: auto;
    padding: 28px 22px;
    border-radius: 22px;
  }

  .hero-actions {
    display: grid;
  }

  .progress-bloom,
  .progress-ring {
    width: 178px;
  }

  .metric-card {
    min-height: 118px;
  }

  .exercise-details {
    grid-template-columns: 1fr;
  }

  .calendar-day {
    min-height: 40px;
    border-radius: 11px;
    font-size: 0.86rem;
  }

  .video-placeholder {
    min-height: auto;
  }

  .site-footer {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 420px) {
  .brand img {
    width: 36px;
    height: 36px;
  }

  .bottom-nav .nav-link span {
    font-size: 0.66rem;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .calendar-weekdays,
  .calendar-grid {
    gap: 5px;
  }

  .calendar-day {
    min-height: 36px;
    font-size: 0.8rem;
  }
}