/* desktop-first; larger widths need nothing beyond the fluid tokens */

@media (max-width: 768px) {
  .page-shell { padding-block: var(--space-8) var(--space-6); }
  .hero .hero-logo { width: 180px; }
}

@media (max-width: 480px) {
  .hero-lead { font-size: var(--fs-body); }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
}