/* =========================================================
   ZYNDHUX RESPONSIVE.CSS (typo fixed: was resonsive.css)
   ========================================================= */

@media (max-width: 768px) {
  .header-inner { flex-wrap: wrap; height: auto; padding: var(--space-3) 0; gap: var(--space-3); }
  .nav { display: none; }
  .hero-claims h1 { font-size: var(--text-2xl); }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; gap: var(--space-2); text-align: center; }
  .stepper-indicator { flex-direction: row; }
  .step-dot label { display: none; }
  .steps-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
}

@media (max-width: 480px) {
  .container { padding: 0 var(--space-4); }
  .panel { padding: var(--space-4); }
  .form-grid { grid-template-columns: 1fr; }
  .step-actions { flex-direction: column-reverse; gap: var(--space-3); }
  .step-actions .btn { width: 100%; justify-content: center; }
  .input-with-btn { flex-direction: column; }
  .success-actions { flex-direction: column; }
  .track-header { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}