/* Phase 4B: positioning only. All approved artwork untouched. */
@media (min-width:901px){
  .hero-inner{transform:translateY(-2px)} /* 18px above Phase 4A */
  .watch{margin-top:-16px} /* 7px closer to swoosh */
}
@media (min-width:701px) and (max-width:900px){
  .hero-inner{transform:translateY(0)}
}
/* Mobile is deliberately stacked, with wordmark first and clear CTA. */
@media (max-width:700px){
  .hero{min-height:calc(100svh - 45px)}
  .hero-inner{gap:0;padding-top:26px;padding-bottom:22px}
  .wordmark{max-width:440px}
  .tagline{margin-top:-7%;width:94%}
  .watch{margin-top:-5px}
  .character-wrap{margin-top:10px}
  .character{width:min(86%,355px)}
}
@media (max-width:390px){.hero-inner{padding-top:20px;padding-bottom:18px}.character{width:min(82%,320px)}}