/*
  Responsive rules shared by both pages.
  The goal is no horizontal scrolling and readable controls on small screens.
*/
@media (max-width: 1180px) {
  :root {
    --section-space: 82px;
  }

  .hero-grid,
  .split-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 820px;
  }

  .dashboard-preview {
    max-width: 900px;
  }

  .pricing-grid,
  .report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .developer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .hamburger {
    display: inline-grid;
    place-items: center;
  }

  .nav-links {
    position: fixed;
    inset: 76px 16px auto 16px;
    display: none;
    max-height: calc(100vh - 96px);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    background: var(--white);
    box-shadow: var(--shadow-lg);
  }

  .nav-open .nav-links {
    display: grid;
  }

  .nav-links a {
    border-radius: var(--radius-sm);
    padding: 14px;
  }

  .nav-actions .btn {
    display: none;
  }

  .benefit-grid,
  .feature-grid,
  .metric-grid,
  .compact-grid,
  .accounting-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tabs-shell,
  .module-shell,
  .tab-content-grid,
  .module-content-grid,
  .dashboard-main-grid,
  .two-column,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .tab-list,
  .module-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .dashboard-sidebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .dashboard-sidebar strong {
    margin: 0 12px 0 0;
  }
}

@media (max-width: 768px) {
  .container {
    width: min(100% - 28px, var(--container));
  }

  .hero {
    padding-top: 72px;
  }

  .brand img {
    width: 124px;
  }

  .hero-actions,
  .screenshot-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .badge-row {
    gap: 8px;
  }

  .badge {
    max-width: 100%;
  }

  .kpi-grid,
  .benefit-grid,
  .feature-grid,
  .metric-grid,
  .pricing-grid,
  .report-grid,
  .developer-grid,
  .compact-grid,
  .accounting-card-grid,
  .tenant-children,
  .form-grid,
  .tab-list,
  .module-list {
    grid-template-columns: 1fr;
  }

  .tab-content-grid,
  .module-content-grid,
  .dashboard-content,
  .modal-body {
    padding: 16px;
  }

  .floating-note {
    position: static;
    margin-top: 12px;
  }

  .dashboard-preview,
  .browser-frame {
    border-radius: var(--radius-md);
  }

  .chart-card canvas {
    height: 210px !important;
  }

  .inventory-visual .mini-table-row {
    grid-template-columns: 1fr;
  }

  .cta-band {
    padding: 30px 22px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  h1 {
    font-size: 2.35rem;
  }

  h2 {
    font-size: 1.9rem;
  }

  .section-head {
    margin-bottom: 28px;
  }

  .dashboard-topline {
    align-items: flex-start;
    flex-direction: column;
  }
}