/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
  .hero h1 { font-size: var(--fs-4xl); }
  .wizard-layout { grid-template-columns: 1fr 400px; }
}

@media (max-width: 1024px) {
  /* Landing */
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-16); }
  .hero-visual { max-width: 560px; }
  .split { grid-template-columns: 1fr; gap: var(--space-8); }
  .split.reverse .split-media { order: 0; }
  .feature-grid, .testi-grid, .tpl-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .step-line { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats-band { grid-template-columns: repeat(2,1fr); }

  /* Portal: wizard preview below */
  .wizard-layout { grid-template-columns: 1fr; }
  .receipt-preview-wrap { position: static; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid, .dash-grid-3 { grid-template-columns: 1fr; }
  .cust-grid, .tpl-grid { grid-template-columns: repeat(2, 1fr); }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
  .settings-nav .sn-link { white-space: nowrap; }
}

@media (max-width: 860px) {
  /* Sidebar becomes off-canvas */
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-xl); }
  .app.nav-open .sidebar { transform: translateX(0); }
  .app.nav-open .sidebar-overlay { display: block; opacity: 1; }
  .main { margin-left: 0 !important; }
  .app.collapsed .sidebar { width: var(--sidebar-w); }
  .app.collapsed .sidebar .lbl,
  .app.collapsed .sidebar-brand span,
  .app.collapsed .nav-group-label,
  .app.collapsed .sidebar-foot { display: block; }
  .menu-toggle { display: grid; }
  .page { padding: var(--space-5); }
  .topbar { padding: 0 var(--space-5); }
  .topbar-search { display: none; }

  /* Auth split -> single */
  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-card .mobile-logo { display: flex; align-items: center; gap: 10px; }
  .auth-card .mobile-logo img { width: 34px; height: 34px; }
  .auth-card .mobile-logo span { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.03em; }
}

@media (max-width: 720px) {
  /* Landing nav mobile */
  .nav-menu { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: grid; }
  .mobile-nav { display: flex; }

  .section { padding: var(--space-16) 0; }
  .section-head h2, .split-copy h2, .cta-band h2 { font-size: var(--fs-2xl); }
  .hero h1 { font-size: var(--fs-3xl); }
  .hero .lead { font-size: var(--fs-md); }
  .mock-phone { display: none; }
  .feature-grid, .testi-grid, .tpl-preview-grid, .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .cta-band { padding: var(--space-8); text-align: center; justify-content: center; }
  .cta-band .ill { display: none; }
  .stats-band { grid-template-columns: 1fr 1fr; }

  /* Portal */
  .stat-grid { grid-template-columns: 1fr; }
  .cust-grid, .tpl-grid { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .profile-chip .meta { display: none; }
  .page-head-row { flex-direction: column; }
  .wizard-steps { gap: 6px; }
  .wstep .wlbl { display: none; }
  .wstep-sep { width: 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .container { padding: 0 var(--space-4); }
  .hero h1 { font-size: 2.1rem; }
  .modal { max-width: 100%; }
  .btn { padding: 11px 16px; }
}