/* Accepted editorial hero. Existing image bytes, content and video JS retained. */
.hero.hero-with-character{display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-areas:'portrait release' 'portrait title' 'portrait description' 'portrait actions' 'portrait footnote' 'media media';column-gap:56px;row-gap:0;align-items:start;min-height:0;max-width:1216px;margin-top:40px;margin-bottom:60px;padding:0 42px;background:none;border-radius:0}
.hero-with-character .hero-copy{display:contents}
.hero-with-character .eyebrow{grid-area:release;margin:0 0 28px;min-width:0;line-height:1.6}
.hero-with-character .release-badge{background:none;padding:0;color:#4c618b;font-size:10px;letter-spacing:.04em;font-weight:650}
.hero-with-character h1{grid-area:title;font-size:clamp(52px,6.3vw,88px);line-height:.99;letter-spacing:-.07em;font-weight:850;margin:0 0 26px;min-width:0}
.hero-with-character h1>span{background:none;-webkit-text-fill-color:currentColor;color:#2959f3}
.hero-with-character .hero-description{grid-area:description;font-size:16px;line-height:1.65;letter-spacing:0;max-width:560px;margin:0 0 24px;color:#4d5b73}
.hero-with-character .hero-actions{grid-area:actions;display:flex;flex-direction:row;align-items:center;gap:22px;margin:0;min-width:0}
.hero-with-character .hero-actions .button{padding:19px 22px;min-height:0;border-radius:12px;font-size:13px;font-weight:750;line-height:1.5;gap:24px;background:#ff801c}
.hero-with-character .hero-price{display:block;font-size:25px;line-height:1.3;font-weight:750;letter-spacing:-.04em;white-space:nowrap}
.hero-with-character .hero-price small{font-size:9px;line-height:1.5;margin-top:5px;font-weight:450}
.hero-with-character .hero-footnote{grid-area:footnote;display:flex;flex-wrap:wrap;gap:5px;font-size:10px;line-height:1.8;color:#778294;margin:18px 0 0;white-space:normal}
.hero-with-character .check-dot{background:none;color:#648379;width:auto;height:auto;font-size:10px}
.hero-with-character .hero-character{grid-area:portrait;align-self:center;justify-self:start;position:relative;width:340px;max-width:100%;margin:0;background:#e1ecff;border-radius:50%;overflow:hidden;aspect-ratio:1;pointer-events:none}
.hero-with-character .hero-character img{display:block;width:100%;height:100%;object-fit:contain}
.hero-with-character .hero-visual{grid-area:media;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-areas:'slogan video' 'caption video';gap:16px 32px;background:#eef3ff;border-radius:24px;margin-top:36px;padding:24px 30px;min-width:0;align-items:start}
.hero-with-character .hero-visual::before{content:none}
.hero-with-character .visual-sticker{grid-area:slogan;position:static;transform:none;background:none;box-shadow:none;padding:0;margin:0;border-radius:0;font-size:32px;line-height:1.1;font-weight:750;letter-spacing:-.05em;color:#2959f3;align-self:start}
.hero-with-character .visual-sticker::first-line{color:#101828;font-weight:400}
.hero-with-character .hero-video-frame{grid-area:video;border:0;border-radius:14px;box-shadow:0 12px 30px #1b3c791c;width:100%;min-width:0}
.hero-with-character .browser-bar{display:none}
.hero-with-character .intro-stage{aspect-ratio:2.3/1}
.hero-with-character .watch-button{left:12px;bottom:12px;padding:7px 10px;gap:8px;font-size:11px;border-radius:10px}
.hero-with-character .watch-button small{font-size:9px}
.hero-with-character .play-circle{width:30px;height:30px}
.hero-with-character .play-circle .icon{width:18px;height:18px}
.hero-with-character .motion-toggle{right:12px;bottom:17px;width:28px;height:28px;font-size:11px}
.hero-with-character .video-caption{grid-area:caption;align-self:end;display:flex;flex-direction:column;gap:10px;font-size:10px;line-height:1.5;margin:0;min-width:0}
@media(max-width:1000px){.hero.hero-with-character{width:calc(100% - 40px);grid-template-columns:minmax(180px,.6fr) minmax(0,1fr);column-gap:25px;padding:0 16px}.hero-with-character .hero-character{width:100%;max-width:240px}.hero-with-character h1{font-size:clamp(38px,7vw,62px)}.hero-with-character .hero-actions{gap:16px}.hero-with-character .hero-actions .button{font-size:12px;padding:16px;gap:16px}.hero-with-character .hero-visual{grid-template-columns:minmax(0,1fr) minmax(0,360px);padding:24px;gap:20px}.hero-with-character .visual-sticker{font-size:28px}}
@media(max-width:700px) and (min-width:601px){.hero-with-character .hero-actions{flex-wrap:wrap}.hero-with-character .hero-visual{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:20px}.hero-with-character .visual-sticker{font-size:24px}}
@media(max-width:600px){.hero.hero-with-character{width:calc(100% - 24px);margin:28px auto 32px;padding:0 12px;grid-template-columns:minmax(0,1fr);grid-template-areas:'release' 'title' 'portrait' 'description' 'actions' 'footnote' 'media';column-gap:0;row-gap:0;text-align:center}.hero-with-character .eyebrow{justify-content:center;margin-bottom:22px}.hero-with-character .release-badge{font-size:8px;letter-spacing:0}.hero-with-character h1{font-size:clamp(38px,12.5vw,51px);margin:0 0 22px;line-height:.99}.hero-with-character .hero-character{width:230px;max-width:85%;justify-self:center;margin:0 0 22px}.hero-with-character .hero-description{font-size:15px;line-height:1.55;text-align:center;margin:0 0 22px;max-width:none}.hero-with-character .hero-actions{justify-content:center;gap:15px}.hero-with-character .hero-actions .button{padding:14px;font-size:11px;gap:14px;min-height:0;border-radius:10px}.hero-with-character .hero-price{font-size:23px;text-align:left}.hero-with-character .hero-price small{font-size:8px}.hero-with-character .hero-footnote{justify-content:center;font-size:8px;gap:4px;margin:15px 0 0}.hero-with-character .hero-visual{grid-template-columns:minmax(0,1fr);grid-template-areas:'slogan' 'video' 'caption';padding:20px;margin-top:25px;gap:15px;text-align:left;border-radius:20px}.hero-with-character .visual-sticker{font-size:25px;line-height:1.1}.hero-with-character .intro-stage{aspect-ratio:16/9}.hero-with-character .video-caption{flex-direction:row;justify-content:space-between;font-size:8px;gap:10px;flex-wrap:wrap}.hero-with-character .watch-button{left:9px;bottom:9px;padding:6px 8px;font-size:9px;gap:6px}.hero-with-character .watch-button small{font-size:8px}.hero-with-character .watch-button .play-circle{width:27px;height:27px}}
@media(max-width:360px){.hero-with-character .hero-actions{gap:10px}.hero-with-character .hero-actions .button{font-size:10px;padding:12px 10px;gap:8px}.hero-with-character .hero-price{font-size:21px}.hero-with-character .hero-price small{font-size:7px}.hero-with-character .hero-visual{padding:16px}.hero-with-character .watch-button small{font-size:7px}}
