/* Selected direction 1. Keep navigation, downloads and below-fold product evidence. */
:root{--motion-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.nav .wrap{max-width:1200px;padding-inline:clamp(22px,6.1vw,72px);height:80px;gap:36px}
.nav .logo{font-family:var(--motion-font);font-size:24px;letter-spacing:-1px;gap:12px}
.nav .logo img{width:38px;height:38px;border-radius:10px}
.nav .links{margin-left:auto;gap:38px;font-size:14px}
.nav .btn-sm{border-radius:19px;min-height:42px;padding:10px 22px;font-size:14px;white-space:nowrap}
.hero .motion-actions{display:flex;align-items:center;flex-direction:column;gap:18px;margin:24px 0 0}
.hero .motion-download{font-family:var(--motion-font);font-weight:600;font-size:16px;border-radius:21px;min-height:56px;padding:15px 30px;gap:12px;max-width:100%;text-align:center;line-height:1.35}
.hero .motion-download svg{width:22px;height:22px;flex-shrink:0}
.hero .motion-demo{font-size:16px;font-weight:500;text-decoration:underline;text-underline-offset:5px;line-height:1.5}
.hero .motion-sub{font-family:var(--motion-font);font-size:clamp(18px,1.8vw,23px);line-height:1.35;font-weight:400;margin:18px auto 0;max-width:570px;letter-spacing:-.025em}
.recorded-section .wrap{max-width:880px}
.recorded-section{padding-block:80px}
.recorded-section .demo-panel{max-width:none}
.hero a:focus-visible,.motion-toggle:focus-visible,.nav a:focus-visible,.nav summary:focus-visible{outline:3px solid currentColor;outline-offset:5px}
body:has(.cinematic-hero) .nav{position:absolute;inset:0 0 auto;z-index:10;background:transparent;border:0;backdrop-filter:none;color:white}
body:has(.cinematic-hero) .nav .links a{color:#fff;text-shadow:0 1px 8px #174a74}
body:has(.cinematic-hero) .nav .btn{background:#fff;color:#0b1420}
.cinematic-hero{position:relative;isolation:isolate;overflow:hidden;height:max(658px,56.3vw);max-height:900px;min-height:658px;padding:0;border:0;background:#438bc7;color:#fff}
.cinematic-hero .hero-scene{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-landscape{position:absolute;inset:-6%;will-change:transform}
.landscape-video{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.70) saturate(1.12)}
.hero-foreground{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform}
.cinematic-hero .cinematic-copy{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;top:24%;max-width:700px;gap:0}
.cinematic-hero h1{font-family:var(--motion-font);font-size:clamp(54px,5.5vw,82px);font-weight:600;line-height:1.01;letter-spacing:-.055em;margin:0;color:white;text-shadow:0 1px 12px #22568222}
.cinematic-hero .motion-sub{color:#fff;text-shadow:0 1px 10px #17508244}
.cinematic-hero .motion-demo{color:white;text-shadow:0 1px 8px #174a74}
.cinematic-hero .motion-proof{position:absolute;bottom:32px;left:20px;right:20px;text-align:center;font-size:13px;font-weight:500;letter-spacing:.08em;color:#fff;text-shadow:0 1px 6px #173c67;margin:0}
.motion-toggle{position:absolute;right:24px;bottom:24px;min-height:36px;border:1px solid #ffffff88;border-radius:18px;background:#163951b3;color:#fff;padding:7px 13px;font:500 12px var(--motion-font);cursor:pointer}
.motion-toggle:hover{background:#163951}
body:has(.calm-hero) .nav{position:relative;background:#fff;border:0;backdrop-filter:none}
body:has(.calm-hero){font-family:var(--motion-font)}
.calm-hero{padding:10px 0 0;border:0;text-align:center;background:#fff}
.calm-hero .wrap{display:block;max-width:1000px}
.calm-hero .hero-app-icon{display:block;width:112px;height:112px;border-radius:27px;box-shadow:0 12px 34px #267bdd26;margin:0 auto 23px;animation:calm-enter .8s both}
.calm-hero h1{font-family:var(--motion-font);font-size:clamp(48px,7.3vw,88px);font-weight:700;line-height:1.08;letter-spacing:-.065em;margin:0;animation:calm-enter .8s .08s both}
.calm-hero h1 span{color:#087cf5}
.calm-hero .motion-sub{font-size:clamp(18px,2vw,24px);color:#5c6270;font-weight:500;animation:calm-enter .8s .14s both}
.calm-hero .motion-actions{margin-top:30px;gap:14px;animation:calm-enter .8s .2s both}
.calm-hero .motion-download{background:#0d121e;border-radius:30px;min-height:54px;padding-inline:38px}
.calm-hero .motion-demo{color:#202636}
.calm-hero .motion-req{font-size:14px;color:#667080;margin:21px 0 0}
.calm-apps{padding:40px 0 48px;border:0;background:#fff}
.calm-apps .app-list{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.calm-apps .app-list span{padding:12px 22px;border-radius:28px;background:#f5f6f8;color:#4e5667;font-size:15px;white-space:nowrap}
@keyframes calm-enter{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.cinematic-hero .cinematic-copy{top:24%}}
@media(max-width:820px){.nav .wrap{height:72px;gap:18px}.nav .links{display:none}.nav .logo{font-size:21px}.nav .logo img{width:32px;height:32px}.nav .btn-sm{padding:9px 16px;font-size:13px}.cinematic-hero{height:760px;min-height:0;max-height:none}.cinematic-hero .cinematic-copy{top:23%}.hero-foreground{object-fit:cover;object-position:57% center;opacity:.7}.cinematic-hero h1{font-size:62px}.cinematic-hero .motion-proof{bottom:72px}.motion-toggle{bottom:20px;right:20px}.calm-hero{padding-top:30px}.calm-apps{padding-top:36px}.calm-apps .app-list span{padding:10px 16px;font-size:14px}.nav .mobile-menu nav{color:var(--ink,var(--fg));text-shadow:none}.recorded-section{padding-block:56px}}
@media(max-width:540px){.nav .wrap{padding-inline:20px;gap:16px}.nav .btn-sm{display:none}.nav .mobile-menu{margin-left:auto}.cinematic-hero{height:720px}.cinematic-hero .cinematic-copy{top:24%;padding-inline:22px}.cinematic-hero h1{font-size:clamp(44px,11.5vw,60px)}.hero-foreground{object-fit:contain;object-position:50% 100%;opacity:1;transform:none!important}.hero-landscape{inset:-3% -30%;}.hero .motion-sub{font-size:18px;max-width:340px}.hero .motion-download{font-size:15px;min-height:52px;padding:14px 25px}.cinematic-hero .motion-proof{bottom:40px}.motion-toggle{bottom:9px;right:10px;min-height:28px;padding:4px 10px;font-size:10px}.calm-hero .hero-app-icon{width:96px;height:96px;margin-bottom:26px;border-radius:23px}.calm-hero h1{font-size:clamp(40px,11.2vw,60px);white-space:nowrap}.calm-hero .motion-sub{font-size:18px;line-height:1.45}.calm-hero .motion-req{font-size:12px}.calm-apps{padding:34px 10px 38px}.calm-apps .app-list{gap:9px}.calm-apps .app-list span{padding:9px 13px;font-size:12px}.recorded-section .wrap{padding-inline:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.hero-landscape,.hero-foreground{will-change:auto;transform:none!important}}

/* QA: remove inherited left-column width and auto navigation margins. */
.nav .links{margin-right:0}
.calm-hero h1{max-width:none;margin-inline:auto;letter-spacing:-.055em}
.cinematic-hero h1{letter-spacing:-.04em;font-weight:600}
.cinematic-hero .motion-download{background:#fff}
.calm-hero .motion-sub{margin-top:14px}
.calm-hero .motion-actions{margin-top:28px}

/* Keep the portrait's cropped upper edge outside the narrow composition. */
@media(max-width:540px){.hero-foreground{display:none}.cinematic-hero{height:680px}.cinematic-hero .motion-proof{bottom:56px}}

.cinematic-hero .motion-proof{width:max-content;max-width:calc(100% - 40px);margin-inline:auto;padding:6px 12px;border-radius:16px;background:#163951b3}

.hero-waveform{position:absolute;width:80px;height:58px;object-fit:contain;bottom:87px;left:calc(50% - 40px);filter:invert(1);opacity:.7}
.hero .motion-download{height:auto;white-space:normal}
@media(max-width:820px){.hero-waveform{bottom:120px}}
@media(max-width:540px){.hero-waveform{bottom:110px;width:60px;height:44px;left:calc(50% - 30px)}}

.cinematic-hero .motion-sub,.cinematic-hero .motion-demo,body:has(.cinematic-hero) .nav .links a{ text-shadow:0 1px 2px #163951,0 0 4px #163951}