/* ============================================
   RESPONSIVE - Breakpoints
   ============================================ */

/* ── Tablet (<=1024px) ── */
@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
    text-align: center;
  }
  .hero__content { display: flex; flex-direction: column; align-items: center; }
  .hero__desc { max-width: 600px; }
  .hero__ctas { justify-content: center; }
  .hero__visual { max-width: 400px; margin: 0 auto; }
  .hero__float-card--payroll { left: -2%; top: 5%; }
  .hero__float-card--compliance { right: -2%; }
  .hero__float-card--hiring { left: 15%; }

  .problem__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .solution__grid { grid-template-columns: 1fr; gap: var(--sp-10); }

  .how-it-works__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-8);
  }
  .how-it-works__steps::before { display: none; }

  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .why-us__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }

  .navbar__links { display: none; }
  .navbar__actions { display: none; }
  .navbar__toggle { display: flex; }
}

/* ── Mobile (<=640px) ── */
@media (max-width: 640px) {
  .section { padding: var(--sp-16) 0; }
  .container { padding: 0 var(--sp-5); }

  .hero { min-height: auto; padding-top: calc(var(--nav-height) + var(--sp-10)); padding-bottom: var(--sp-12); }
  .hero__visual-main { max-width: 300px; }
  .hero__float-card { display: none; }

  .solution__checklist { grid-template-columns: 1fr; }

  .how-it-works__steps { grid-template-columns: 1fr; }

  .services__grid { grid-template-columns: 1fr; }
  .why-us__grid { grid-template-columns: 1fr; }

  .industries__grid { gap: var(--sp-3); }
  .industry-pill { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-caption); }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer__bottom { flex-direction: column; gap: var(--sp-3); text-align: center; }

  .final-cta { padding: var(--sp-16) 0; }
  .final-cta .btn--primary { width: 100%; }
}

/* ── New Component Breakpoints ── */
@media (max-width: 1024px) {
  .pricing-tier-grid { grid-template-columns: 1fr !important; max-width: 500px; margin: 0 auto; }
  .leadership-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .sample-preview-card { grid-template-columns: 1fr !important; gap: var(--sp-8) !important; }
  .client-badges__grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--sp-4) !important; }
}

@media (max-width: 640px) {
  .leadership-grid { grid-template-columns: 1fr !important; }
  .client-badges__grid { grid-template-columns: 1fr !important; }
  .security-badge-bar { flex-direction: column !important; align-items: center !important; gap: var(--sp-3) !important; text-align: center; }
  .comparison-table-wrapper { margin: 0 calc(-1 * var(--sp-5)); padding: 0 var(--sp-5); }
  .comparison-table th, .comparison-table td { padding: var(--sp-3) var(--sp-4) !important; font-size: var(--fs-caption) !important; }
}