/* Hero: the headline beside the desktop app and its floating captions. Motion lives in hero.js and only adds to what is already readable. */
.hero-split{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,12fr);align-items:center;gap:56px;padding-block:56px 72px;text-align:left}
.hero-split h1{max-width:none;margin:0;font-size:clamp(32px,3.6vw,48px)}
.hero-split h1 span{display:block}
.hero-split .hero-intro{margin:20px 0 0;max-width:460px;font-size:17px}
.hero-split .hero-actions{justify-content:flex-start;margin-top:30px}
.hero-split .hero-platforms{justify-content:flex-start}
.hs-art{position:relative;padding-bottom:22px}
.hs-shot[hidden]{display:none}
.hs-caption{position:absolute;left:8%;right:8%;bottom:0;display:flex;align-items:baseline;gap:12px;min-height:56px;margin:0;padding:14px 20px;border-radius:14px;background:#202124eb;color:#fff;font-size:15px;line-height:1.45;backdrop-filter:blur(8px)}
.hs-caption-who{flex:none;font:600 10.5px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#7fd1c5}
.hs-caption.is-typing .hs-caption-text::after{content:'';display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-2px;background:#ffffffa0;animation:hs-caret 1s steps(1) infinite}
@keyframes hs-caret{50%{opacity:0}}
@media(prefers-color-scheme:dark){.hs-caption{background:#2c2d31f2;box-shadow:0 1px 2px #00000080,0 18px 44px -10px #000000bf}}

@media(max-width:900px){
 .hero-split{grid-template-columns:1fr;gap:36px}
 .hs-caption{font-size:13px;padding:10px 14px;min-height:0}
}
@media(max-width:600px){
 .hero-split{padding-block:32px 48px}
 .hero-split h1{font-size:34px}
 .hero-split .hero-intro{font-size:16px}
}