/* Payrollify — responsive layouts */

@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid,
  .footer-grid-rich { grid-template-columns: 1.2fr 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid-banner { grid-template-columns: 1fr; }
  .device-stage {
    max-width: 520px;
    margin: 1rem auto 0;
    aspect-ratio: 16 / 12;
  }
}

@media (max-width: 960px) {
  .nav-desktop { display: none; }
  .menu-toggle { display: inline-flex; }
  .hero-grid,
  .split,
  .two-col-feature,
  .calculator,
  .sales-cta-card { grid-template-columns: 1fr; }
  .calculator-inputs { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .hero .mockup { transform: none; }
  .mockup-body { grid-template-columns: 1fr; }
  .mockup-side { display: none; }
  .footer-grid,
  .footer-grid-rich { grid-template-columns: 1fr 1fr; }
  .compliance-grid { grid-template-columns: 1fr 1fr; }
  .topbar-left .topbar-sep { display: none; }
  .topbar-left { gap: 0.65rem; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  :root { --header-h: 68px; --topbar-h: 38px; }
  .brand img { height: 38px; }
  .topbar-link { font-size: 0.75rem; }
  .topbar-inner { min-height: var(--topbar-h); padding-block: 0.35rem; }
  .grid-2,
  .grid-3,
  .grid-4,
  .pricing-grid,
  .form-grid,
  .resource-grid,
  .stat-row,
  .compliance-grid,
  .footer-grid,
  .footer-grid-rich { grid-template-columns: 1fr; }
  .mockup-stats { grid-template-columns: 1fr; }
  .mockup-table .thead,
  .mockup-table .trow {
    grid-template-columns: 1.2fr 0.8fr;
  }
  .mockup-table .thead span:nth-child(3),
  .mockup-table .thead span:nth-child(4),
  .mockup-table .trow span:nth-child(3),
  .mockup-table .trow span:nth-child(4) {
    display: none;
  }
  .workflow { justify-content: flex-start; }
  .cta-row .btn { width: 100%; }
  .container { width: min(100%, var(--container)); padding-inline: 16px; }
  .section { padding: 3rem 0; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .billing-toggle { width: 100%; justify-content: stretch; }
  .billing-toggle button { flex: 1; }
  .page-hero,
  .hero { padding-top: 2.25rem; }
  .compare-table { display: block; overflow-x: auto; }
  .device-phone { width: 34%; max-width: 140px; }
  .sales-phone { font-size: 1.45rem; }
}

@media (min-width: 961px) {
  .mobile-nav { display: none !important; }
}

@media (max-width: 400px) {
  .btn { padding-inline: 1.1rem; }
  h1 { font-size: 1.9rem; }
  .topbar-left a[href^="mailto"] { display: none; }
}