.hero-payoff { position: absolute; z-index: 2; top: 25%; left: 7%; width: min(940px, 76%); color: #072957; }
.hero-payoff h1 { font-weight: 400; line-height: 1.06; letter-spacing: -.045em; }
.payoff-name { display: block; font-family: Georgia, serif; font-size: clamp(62px, 8.7vw, 138px); margin-bottom: 20px; letter-spacing: -.065em; }
.payoff-line { display: block; font-size: clamp(27px, 3.1vw, 49px); font-weight: 400; line-height: 1.25; letter-spacing: -.055em; }
.payoff-values { display: flex; flex-wrap: wrap; gap: 0 .23em; }
.payoff-values span:last-child { color: #135747; }
.payoff-english { max-width: 630px; margin-top: 27px; color: #193f65; font-size: clamp(13px, 1.15vw, 18px); line-height: 1.7; letter-spacing: .01em; }
.payoff-part { opacity: 0; }
.payoff-revealed .payoff-part { animation: payoff-reveal 650ms cubic-bezier(.22,1,.36,1) both; animation-delay: var(--reveal-delay, 0ms); }
.payoff-line.payoff-part { --reveal-delay: 160ms; }
.payoff-values span:nth-child(1) { --reveal-delay: 300ms; }
.payoff-values span:nth-child(2) { --reveal-delay: 480ms; }
.payoff-values span:nth-child(3) { --reveal-delay: 660ms; }
.payoff-english { --reveal-delay: 830ms; }
.hero-mobile-copy { display: none !important; }
.chroma-scene.hero-visual { inset: 0; height: 100%; max-height: none; }
.edge-wave path { animation-iteration-count: 1; }
@keyframes payoff-reveal { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(7px); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@media (min-width: 701px) and (max-height: 750px) {
  .hero-payoff { top: 21%; }
  .payoff-name { font-size: min(8vw, 94px); margin-bottom: 13px; }
  .payoff-line { font-size: 34px; }
  .payoff-english { margin-top: 16px; }
  .hero-tag { bottom: 136px; }
}
@media (max-width: 700px) {
  .hero { min-height: 560px; height: 100svh; }
  .hero-payoff { top: 25%; left: 7%; width: 87%; }
  .payoff-name { font-size: clamp(48px, 12vw, 81px); margin-bottom: 20px; }
  .payoff-line { font-size: clamp(26px, 6.5vw, 39px); line-height: 1.25; }
  .payoff-english { font-size: 13px; max-width: 350px; margin-top: 22px; }
  .hero-header { top: 22px; }
  .hero-tools { gap: 6px; }
  #watch-film { font-size: 0; gap: 0; width: 44px; padding: 13px; }
  #watch-film svg { width: 17px; height: 17px; }
  .chroma-world { opacity: .72; }
  .home-nav { bottom: max(22px, env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) and (max-height: 670px) {
  .hero-payoff { top: 18%; }
  .payoff-name { font-size: 48px; margin-bottom: 13px; }
  .payoff-line { font-size: 27px; }
  .payoff-english { font-size: 12px; margin-top: 15px; max-width: 280px; }
  .nav-link { min-height: 51px; padding: 12px 13px; }
  .nav-text { font-size: 11px; gap: 9px; }
}
@media (max-height: 480px) and (min-width: 701px) {
  .hero-payoff { top: 22%; }
  .payoff-name { font-size: 57px; margin-bottom: 9px; }
  .payoff-line { font-size: 25px; }
  .payoff-english { margin-top: 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .payoff-part { opacity: 1; clip-path: none; transform: none; }
}
@media (max-height: 560px) {
  body:not(.is-loading) { overflow-y: auto; }
  .hero { min-height: 560px; height: 560px; }
  .hero-payoff { top: 98px; }
}