.game-card:hover .game-copy,
.game-card:focus-within .game-copy { z-index: 5; }
.game-card:hover .game-copy small,
.game-card:hover .game-copy h3,
.game-card:focus-within .game-copy small,
.game-card:focus-within .game-copy h3 { opacity: 0; }
.game-card:hover .demo-button,
.game-card:focus-within .demo-button { position: relative; z-index: 6; }

@media (max-width: 620px) {
  .site-header { gap: 6px; padding-inline: 7px; }
  .brand .wordmark { font-size: 17px; letter-spacing: -1px; gap: 2px; }
  .brand .wordmark i { width: 18px; height: 12px; }
  .menu-toggle { width: 38px; height: 40px; flex: 0 0 38px; }
  .header-cta { min-height: 40px; padding: 6px 8px; font-size: 11px; white-space: nowrap; }
  .hero-card { width: 100%; }
  .hero h1 { font-size: clamp(32px, 9.5vw, 37px); overflow-wrap: anywhere; }
  .section-head h2 { overflow-wrap: anywhere; }
}