@media (max-width: 560px) {
  .header-status { display: none; }
  .hero { display: flex; flex-direction: column; padding-inline: 20px; padding-top: 96px; gap: 18px; align-items: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; }
  .hero-copy .eyebrow { margin-bottom: 11px; }
  .hero h1 { width: 100%; max-width: 350px; font-size: clamp(2rem, 10.8vw, 3.05rem); text-align: center; }
  .hero .lede { max-width: 325px; margin: 0 auto; }
  .cabinet-stage { width: min(78vw, 330px); min-width: 0; }
  .hero-actions { margin: 8px 0 18px; }
  .hero-readout { gap: 18px; margin-bottom: 4px; }
}