/* Phase 4C: mobile-only composition; desktop CSS and assets untouched. */
@media (max-width:700px){
  .hero{min-height:calc(100svh - 45px);overflow:hidden}
  .hero-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;max-width:520px;padding:20px 22px 24px;transform:none}
  .identity{display:contents}
  .wordmark{order:1;width:100%;max-width:440px;flex-shrink:0}
  .tagline{order:2;width:94%;max-width:420px;margin-top:-6%;flex-shrink:0}
  .character-wrap{order:3;width:100%;margin-top:6px;flex-shrink:0}
  .character{width:min(78%,305px);max-width:100%;height:auto}
  .watch{order:4;margin-top:5px;min-height:54px;padding:10px 24px;font-size:18px;flex-shrink:0}
}
@media (max-width:390px){
  .hero-inner{padding:16px 17px 20px}
  .character{width:min(76%,275px)}
  .watch{min-height:50px;font-size:17px}
}

/* Phase 4D: final mobile optical-spacing pass only.
   Desktop rules, original image files, and desktop composition are untouched. */
@media (max-width:700px){
  .hero-inner{
    transform:translateY(-22px);
  }
  .character-wrap{
    margin-top:-9px;
  }
  .watch{
    margin-top:0;
  }
  .footer{
    font-size:11px;
    line-height:1.35;
    letter-spacing:0;
  }
}
@media (max-width:390px){
  .hero-inner{transform:translateY(-18px)}
  .character-wrap{margin-top:-8px}
}
@media (max-width:700px) and (max-height:680px){
  .hero-inner{transform:none}
}