/* Responsive breakpoints. Mobile-first overrides at wider widths are
   handled by the base layout being flexible; this file mainly collapses
   the sidebar and adjusts spacing/typography for small screens. */

@media (max-width: 960px) {
  .sidebar {
    position: fixed;
    inset: var(--topbar-height) 0 0 0;
    width: 100%;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    z-index: 80;
    overflow-y: auto;
  }
  .sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }

  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 70;
  }
  .sidebar-backdrop.is-open { display: block; }

  .main-content { padding: var(--space-5) var(--space-4); }
}

@media (min-width: 961px) {
  .mobile-nav-toggle { display: none; }
  .sidebar-backdrop { display: none; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-content h1, .hero-content .lead { text-align: center; }
  .hero-actions-left { justify-content: center; }
  .hero-badges { justify-content: center; }
  .hero-visual { margin-top: var(--space-6); min-height: 0; }
  .hero-doc { display: none; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stat { justify-content: center; text-align: left; }
}

@media (max-width: 720px) {
  /* .hero h1 is fluid (clamp()) and already scales down appropriately at
     this width on its own - no override needed. */
  .hero .lead { font-size: var(--font-size-base); }
  .field-row { grid-template-columns: 1fr; }
  .review-summary dl { grid-template-columns: 1fr; }
  table { min-width: 480px; }

  /* Marketing nav collapses behind the hamburger */
  .public-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .public-header .container { flex-wrap: wrap; }
  .public-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--space-3);
  }
  .public-nav.is-open { display: flex; }
  .public-nav a:not(.btn) {
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .public-nav .btn { margin-top: var(--space-3); }
}

@media (max-width: 480px) {
  .container { padding: 0 var(--space-4); }
  .card-grid { grid-template-columns: 1fr; }
  .dashboard-header { flex-direction: column; align-items: stretch; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }

  .topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  .account-menu-trigger .account-name { display: none; }
  .account-menu-trigger { padding: var(--space-2); }
  .credit-pill { padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); }
}