/* Approved hero layout: compact desktop notes; unobstructed media on phones. */
.hero .hero-media.hero-media-compact{--hero-frame-height:555px;height:auto;max-width:none;position:relative}
.hero .hero-media-compact .hero-media-frame{position:relative;height:var(--hero-frame-height)}
.hero .hero-media-compact .video-card{inset:0 28px 0 42px!important}
.hero .hero-media-compact .video-card:after{display:none}
.hero .hero-media-compact .hero-information{position:absolute;inset:0 0 auto;height:var(--hero-frame-height);pointer-events:none}
.hero .hero-media-compact .float-card{width:174px;max-width:calc(100% - 24px);min-width:0;padding:11px 13px;border-radius:16px;animation:none;transform:none;box-shadow:0 14px 32px rgba(8,45,52,.08);overflow-wrap:anywhere}
.hero .hero-media-compact .float-card b{font-size:14px;line-height:1.3}
.hero .hero-media-compact .float-card>span{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--muted)}
.hero .hero-media-compact .f1{top:22px;right:0;bottom:auto;left:auto}
.hero .hero-media-compact .f2{top:auto;left:0;bottom:72px;right:auto}
.hero .hero-media-compact .f3{top:auto;right:0;bottom:22px;left:auto}
.hero .hero-media-compact .hero-platforms{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 15px;margin:16px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.hero .hero-media-compact .hero-platforms>span{white-space:nowrap}
.hero .hero-media-compact #videoControl{top:16px;left:16px;right:auto;min-height:44px}
.hero .hero-media-compact .motion-muted{display:none}
@media(min-width:1600px){.hero .hero-media.hero-media-compact{--hero-frame-height:590px}}
@media(min-width:961px) and (max-width:1200px){
 .hero .hero-media.hero-media-compact{--hero-frame-height:510px}
 .hero .hero-media-compact .video-card{inset:0 15px 0 25px!important}
}
@media(max-width:960px){
 .hero .hero-media.hero-media-compact{height:auto;width:100%;max-width:480px;margin:auto}
 .hero .hero-media-compact .hero-media-frame{height:auto;aspect-ratio:4/5}
 .hero .hero-media-compact .video-card{inset:0!important}
 .hero .hero-media-compact .hero-information{position:static;height:auto;margin-top:13px;border-top:1px solid var(--line);pointer-events:auto}
 .hero .hero-media-compact .float-card{position:static;width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);align-items:center;gap:12px;padding:9px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
 .hero .hero-media-compact .float-card b{font-size:13px;line-height:1.45}
 .hero .hero-media-compact .float-card>span{margin:0;font-size:12px;line-height:1.45}
 .hero .hero-media-compact #videoControl{left:16px}
 .hero .hero-media-compact .hero-platforms{gap:8px 12px}
}