:root { --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }

@media (max-width: 640px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .container { padding: 0 18px; }
  .card { padding: 20px; border-radius: var(--r-md); }
  .btn { width: 100%; }
  .hero-actions .btn, .wizard-nav .btn { width: auto; flex: 1; }
  .nav-inner { padding: 14px 18px; }
  body { padding-bottom: var(--safe-b); }
  .sticky-cta { padding-bottom: calc(16px + var(--safe-b)); }
}

@media (min-width: 641px) {
  .mobile-only { display: none !important; }
}
@media (max-width: 640px) {
  .desktop-only { display: none !important; }
}