@media (max-width: 768px) {
  :root { --container-pad: 20px; }
  .small-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --container-pad: 16px; }
  .hero-card, .hero-aside, .content-card, .plan, .form-card, .admin-card { padding: 18px; }
  .hero { padding-top: 40px; }
  .hero h1 { font-size: 2.2rem; }
  .cta-banner { flex-direction: column; align-items: flex-start; }
}