/* Films: a recording in the site's video player, no heading of its own. The app tour loop sits under the homepage
   hero (--loop); the slides and docs recording closes the features page (--features) with a chapter pill under it.
   Surfaces as in the deck showcase: 1px border, 12px corners, no shadow. The pill is the site's label-fitted toggle
   (a light copy of the labels revealed with clip-path), as on the connections map. */
.demo-film{padding:0 24px 96px;background:#111;color:#fff;font-family:'Eshlon Sans',sans-serif}
.demo-film-wrap{max-width:1100px;margin:auto}

/* Features page: a showcase like the others there, with the page's two-column heading and its 1200px column
   (features-wrap adds the 28px gutters), spaced like the live data section above it. */
.demo-film--features{padding:100px 0 110px}
.demo-film--features .demo-film-wrap{max-width:1256px}

.demo-film-stage{position:relative;overflow:hidden;border:1px solid var(--interactive-border,#262626);border-radius:12px;background:#0b0b0b}
.demo-film-stage video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#0b0b0b}
.demo-film .demo-film-fallback{margin:16px 0 0;text-align:center;font-size:14px;color:#9e9e9e}
.demo-film-fallback[hidden]{display:none}
.demo-film-fallback a{color:#fff;text-decoration:underline}

/* Chapter pill. Each chapter shows its start time in a quieter tone. */
.demo-film-controls{display:flex;justify-content:center;margin-top:22px}
.demo-film-chapters{position:relative;display:inline-flex;align-items:center;max-width:100%;padding:4px;border:1px solid #262626;border-radius:999px;background:#1a1a1a}
.demo-film-chapters:empty{display:none}
.demo-film-chapters button,.demo-film-overlay b{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;border:0;border-radius:999px;background:transparent;font:500 13.5px/1 "Eshlon Sans",Arial,sans-serif;letter-spacing:.01em;white-space:nowrap}
.demo-film-chapters small,.demo-film-overlay small{font:inherit;font-variant-numeric:tabular-nums}
.demo-film-chapters button{color:#9e9e9e;cursor:pointer;transition:color 150ms ease}
.demo-film-chapters button small{color:#6f6f6f}
.demo-film-chapters button:hover:not([aria-pressed=true]){color:#fff}
.demo-film-chapters button:focus-visible{outline:2px solid #8a8a8a;outline-offset:3px}
.demo-film-overlay{position:absolute;inset:0;display:flex;align-items:center;padding:4px;border-radius:999px;background:#fff;color:#000;pointer-events:none;opacity:0;clip-path:inset(0 100% 0 0 round 999px);transition:clip-path 280ms cubic-bezier(.2,.7,.2,1)}
.demo-film-overlay small{color:#6b6b6b}
.demo-film-overlay.is-on{opacity:1}
.demo-film-overlay.is-still{transition:none}

/* The app tour loop, right under the hero: its own section with the site's divider, as wide as the deck and
   connections sections. Light backing so nothing dark flashes before the poster of the white interface arrives. */
.demo-film--loop{padding:90px 24px 80px;border-top:1px solid #272727}
.demo-film--loop .demo-film-wrap{max-width:1200px}
.demo-film--loop .demo-film-stage,.demo-film--loop .demo-film-stage video{background:#f2f2f2}

@media(max-width:760px){
 .demo-film{padding-bottom:64px}
 .demo-film--loop{padding:56px 24px 56px}
 .demo-film--features{padding:60px 0 70px}
 .demo-film-stage{border-radius:10px}
}
/* On a phone the chapter names carry it; the times stay in the player's scrubber. */
@media(max-width:560px){
 .demo-film-chapters button,.demo-film-overlay b{padding:0 13px;font-size:13px}
 .demo-film-chapters small,.demo-film-overlay small{display:none}
}
@media(prefers-reduced-motion:reduce){.demo-film-chapters button,.demo-film-overlay{transition:none}}