/* "Watch it work" (film.js): a phone playing a real screen recording of the app. */
.film-stage { display: grid; place-items: center; }
.film-phone { position: relative; width: 320px; height: 660px; border-radius: 48px; padding: 11px; background: #0B0A08; box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .7), inset 0 0 0 2px #2E2B25, 0 0 0 1px rgba(255, 255, 255, .04); }
.film-phone::before { content: ""; position: absolute; top: 20px; left: 50%; width: 88px; height: 24px; border-radius: 14px; background: #0B0A08; transform: translateX(-50%); z-index: 5; }
.film-screen { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: #FFE001; isolation: isolate; }
.film-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 6; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(22, 20, 15, .82); color: #FFF7EE; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); transition: transform .2s; }
.film-toggle:hover { transform: scale(1.08); }
.film-toggle:focus-visible { outline: 3px solid var(--volt, #FFE001); outline-offset: 3px; }
.film-toggle svg { width: 18px; height: 18px; }
.film-toggle .i-play, .film-toggle.is-paused .i-pause { display: none; }
.film-toggle.is-paused .i-play { display: block; }
.film-toggle.is-paused { width: 64px; height: 64px; right: 50%; bottom: 50%; transform: translate(50%, 50%); background: rgba(22, 20, 15, .88); }
.film-toggle.is-paused:hover { transform: translate(50%, 50%) scale(1.06); }
.film-toggle.is-paused svg { width: 26px; height: 26px; }
/* The chapter bar follows the video (film.js), not a timer */
.filmsec .ch-chip.on .bar i { animation: none; }
@media (max-width: 400px) { .film-phone { transform: scale(.9); transform-origin: top center; margin-bottom: -60px; } }