/* Hero product demo (D-LANDING-HERO-DEMO).
 * The "Product demo" button sits next to the waitlist CTA. On click the hero's
 * texts and labels slide out to the nearest screen edge (macOS "show desktop"),
 * and the tour film grows out of the button into the stage, with sound.
 * The film is fetched only on click; hero-demo.js owns all motion. */

main .hero-stage .hero-content .demo-play{display:inline-flex;align-items:center;align-self:stretch;gap:11px;min-height:48px;padding:0 21px 0 14px;border:1px solid #ffffff59;border-radius:5px;background:#ffffff1f;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font:inherit;font-size:14px;font-weight:500;letter-spacing:-.035em;line-height:1;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
main .hero-stage .hero-content .demo-play:hover{background:#ffffff33;border-color:#ffffff8c;transform:translateY(-2px)}
main .hero-stage .hero-content .demo-play:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.demo-play-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:#1f5fa8;flex-shrink:0}
.demo-play-icon svg{width:10px;height:10px;margin-left:2px}
.demo-play-time{font-size:12px;letter-spacing:0;font-weight:400;opacity:.7;margin-left:-2px}
/* Phones: the demo button adds a row under the waitlist CTA, so the hero copy sits a little higher to keep clear of the capability strip. */
@media(max-width:640px){main .hero-stage .hero-content{top:calc(51% - 94px)}main .hero-stage .hero-content .demo-play{font-size:13px;padding:0 17px 0 12px;gap:9px}.demo-play-icon{width:22px;height:22px}.demo-play-time{font-size:11px}}

/* The stage that replaces the hero. Hidden until opened. */
.hero-demo{position:absolute;inset:0;z-index:6;container-type:size;display:grid;place-items:center}
.hero-demo[hidden]{display:none}
.hero-demo-backdrop{position:absolute;inset:0;background:#070b12d1;-webkit-backdrop-filter:blur(22px) saturate(.8);backdrop-filter:blur(22px) saturate(.8)}
.hero-demo-player{position:relative;width:min(100cqw - 96px,(100cqh - 196px) * 16 / 9);display:flex;flex-direction:column;gap:14px;margin-top:20px}
.hero-demo-frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 30px 80px #0008,0 0 0 1px #ffffff14;transform-origin:0 0}
.hero-demo-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;cursor:pointer}
.hero-demo-loader{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid #20202226;border-top-color:#202022;animation:hero-demo-spin .8s linear infinite;opacity:0;transition:opacity .2s;pointer-events:none}
.hero-demo.is-loading .hero-demo-loader{opacity:1}
@keyframes hero-demo-spin{to{transform:rotate(360deg)}}

/* Sound fallback when a browser refuses audio on start. */
.hero-demo-unmute{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:none;align-items:center;gap:10px;padding:11px 18px;border:0;border-radius:999px;background:#202022;color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;box-shadow:0 8px 24px #0004}
.hero-demo.is-muted-start .hero-demo-unmute{display:inline-flex}
.hero-demo-unmute svg{width:18px;height:18px}

/* Controls: quiet at rest, white on the dark stage. */
.hero-demo-bar{display:flex;align-items:center;gap:6px;color:#fff}
.hero-demo-btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;transition:background .15s}
.hero-demo-btn:hover{background:#ffffff1a}
.hero-demo-btn:focus-visible,.hero-demo-seek:focus-visible,.hero-demo-close:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.hero-demo-btn svg{width:20px;height:20px}
.hero-demo-btn .when-paused,.hero-demo-btn .when-muted{display:none}
.hero-demo.is-paused .hero-demo-btn .when-playing,.hero-demo.is-muted .hero-demo-btn .when-sound{display:none}
.hero-demo.is-paused .hero-demo-btn .when-paused,.hero-demo.is-muted .hero-demo-btn .when-muted{display:block}
.hero-demo-seek{position:relative;flex:1;height:40px;margin:0 10px;cursor:pointer;touch-action:none;border-radius:4px}
.hero-demo-seek::before,.hero-demo-seek i{content:'';position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;transition:height .15s,margin .15s}
.hero-demo-seek::before{right:0;background:#ffffff38}
.hero-demo-seek i{width:100%;background:var(--lime);transform:scaleX(var(--demo-progress,0));transform-origin:left}
.hero-demo-seek:hover::before,.hero-demo-seek:hover i,.hero-demo-seek.is-dragging::before,.hero-demo-seek.is-dragging i{height:6px;margin-top:-3px}
.hero-demo-time{min-width:86px;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.01em;opacity:.8;text-align:right;margin-right:6px}

/* Close sits where the header's waitlist button was. */
.hero-demo-close{position:absolute;top:24px;right:max(56px,calc((100% - var(--wrap)) / 2));display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 16px;border:1px solid #ffffff40;border-radius:5px;background:transparent;color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s;z-index:2}
.hero-demo-close:hover{background:#ffffff1a;border-color:#ffffff73}
.hero-demo-close svg{width:16px;height:16px}

/* While the demo is open the hero's own layer must not catch clicks. */
.hero-stage.demo-active .hero-content,.hero-stage.demo-active .header,.hero-stage.demo-active .capabilities{pointer-events:none}

@media(max-width:1150px){.hero-demo-close{right:36px}}
@media(max-width:850px){.hero-demo-player{width:min(100cqw - 40px,(100cqh - 196px) * 16 / 9)}}
@media(max-width:640px){.hero-demo-player{width:100cqw;gap:8px}.hero-demo-frame{border-radius:0}.hero-demo-bar{padding:0 8px}.hero-demo-time{min-width:0;font-size:11px}.hero-demo-close{top:17px;right:20px;font-size:13px}}