@media (max-width: 520px) {
  body { overflow-x: hidden; }
  .site-header { padding: 0 16px; gap: 14px; }
  .brand { gap: 8px; letter-spacing: .05em; }
  .brand-mark { width: 34px; height: 34px; }
  .text-link { max-width: 110px; text-align: right; line-height: 1.2; }
  .hero { padding-left: 22px; padding-right: 22px; gap: 52px; }
  .eyebrow { font-size: 10px; letter-spacing: .12em; overflow-wrap: anywhere; }
  .hero h1 { font-size: 44px; overflow-wrap: anywhere; }
  .hero h1 em { display: block; }
  .button { padding-left: 12px; padding-right: 12px; }
  .signal-card { min-width: 0; max-width: 100%; box-shadow: 10px 10px 0 #b9ccb9; }
  .card-bar b { max-width: 150px; text-align: right; }
  .score-row, .matrix-row, .source-line { padding-left: 14px; padding-right: 14px; }
  .matrix-row { align-items: flex-start; }
  .matrix-row div { min-width: 0; }
  .matrix-row strong, .matrix-row small, .source-line code { overflow-wrap: anywhere; }
  .source-line { gap: 8px; }
}