@media (max-width: 640px) {
  .site-header { padding-inline: 24px; }
  .brand img { width: 112px; }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 118px 24px 90px; }
  .hero-copy, .hero-product { width: 100%; min-width: 0; }
  .hero-copy { text-align: left; }
  .eyebrow { justify-content: flex-start; align-items: flex-start; font-size: 10px; line-height: 1.45; letter-spacing: .055em; }
  .eyebrow span { flex: 0 0 28px; margin-top: 7px; }
  h1 { font-size: clamp(46px, 14vw, 62px); line-height: 1.01; }
  .hero-copy > p { margin-top: 24px; font-size: 16px; line-height: 1.65; }
  .hero-actions, .hero-proof { justify-content: flex-start; }
  .hero-proof { align-items: flex-start; }
}