/* Screen Studio: centered copy, one unobstructed film, quiet controls. */
.film{--film-blend:clamp(56px,8svh,80px);--film-exit:clamp(128px,18svh,192px);position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--header-height));padding:84px 0 104px;background:linear-gradient(to bottom,var(--film-approach,var(--paper)) 0,var(--film-surface,var(--brand)) var(--film-blend),var(--film-surface,var(--brand)) calc(100% - var(--film-exit)),color-mix(in srgb,var(--film-surface,var(--brand)) 85%,#fff) calc(100% - var(--film-exit)*.75),color-mix(in srgb,var(--film-surface,var(--brand)) 50%,#fff) calc(100% - var(--film-exit)*.5),color-mix(in srgb,var(--film-surface,var(--brand)) 15%,#fff) calc(100% - var(--film-exit)*.25),#fff 100%);color:var(--film-ink,#fff)}
.film-motion #product,.film-motion .story{background:var(--film-approach,var(--paper))}
/* The page already reserves the navigation stack in scroll-padding. The film's
   own inset clears the chapter bar; do not reserve that stack a second time. */
#film{scroll-margin-top:calc(var(--header-height) - var(--journey-offset) - 13px)}
.film::before{position:absolute;z-index:-1;inset:0;content:"";pointer-events:none;background:linear-gradient(115deg,var(--brand) 0%,var(--brand-deep) 28%,var(--brand) 52%,color-mix(in srgb,var(--brand) 96%,#fff) 76%,var(--brand) 100%);background-size:320% 200%;opacity:var(--film-glow,1);animation:film-color-flow 12s ease-in-out infinite alternate;animation-play-state:paused}
/* Both layers meet the exact neighboring color at the boundary. Fade only the
   moving color layer, leaving content and its existing spacing untouched. */
.film::before{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--film-blend),#000 calc(100% - var(--film-exit)),rgba(0,0,0,.85) calc(100% - var(--film-exit)*.75),rgba(0,0,0,.5) calc(100% - var(--film-exit)*.5),rgba(0,0,0,.15) calc(100% - var(--film-exit)*.25),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--film-blend),#000 calc(100% - var(--film-exit)),rgba(0,0,0,.85) calc(100% - var(--film-exit)*.75),rgba(0,0,0,.5) calc(100% - var(--film-exit)*.5),rgba(0,0,0,.15) calc(100% - var(--film-exit)*.25),transparent 100%)}
.film.is-gradient-active::before{animation-play-state:running}
@keyframes film-color-flow{from{background-position:0% 30%}to{background-position:100% 70%}}
.film-motion .site-header.on-dark.scrolled,.film-motion .chapter-nav.on-dark{background:var(--brand)}
.film::after{content:none}
.film-head{text-align:center}
.film .kicker{color:var(--film-muted,#fff);font-size:14px;letter-spacing:.025em}
.film h2{margin:16px auto 0;font-size:clamp(36px,3.9vw,58px);font-weight:600;line-height:1.16;letter-spacing:-.045em}
.film h2 span{display:inline-block}
.film-note{max-width:700px;margin:20px auto 0;color:var(--film-muted,#fff);font-size:16px;line-height:1.7;letter-spacing:-.012em;text-wrap:pretty}
.film-stage{position:relative;width:min(1080px,calc(100% - 48px),max(680px,calc((100svh - var(--journey-offset) - 288px) * 1.77778)));margin:34px auto 0;overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:#050608;box-shadow:0 14px 36px -20px rgba(53,66,206,.24)}
.film-stage video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#050608}
.film-play{position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;width:72px;height:72px;padding:0;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(14,15,20,.78);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer;transition:background .18s,border-color .18s}
.film-play[hidden]{display:none}
.film-play:hover{background:rgba(14,15,20,.94);border-color:rgba(255,255,255,.65)}
.film-play:focus-visible{outline:3px solid #b4baff;outline-offset:5px}
.film-play svg{grid-area:1/1;width:28px;height:28px}
.film-play-icon{fill:currentColor}
.film-replay-icon{display:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.film-stage.is-ended .film-play-icon{display:none}
.film-stage.is-ended .film-replay-icon{display:block}
.film-stage video:fullscreen{object-fit:contain;border-radius:0}
@media(max-width:960px){.film h2{max-width:760px}.film-note{max-width:640px}}
@media(max-width:760px){
  .film-motion .site-header.on-dark .nav-links{background:var(--brand)}
  #film{scroll-margin-top:calc(var(--header-height) - var(--journey-offset) - 9px)}
  .film{padding:70px 0 80px}
  .film{min-height:calc(100svh - var(--header-height))}
  .film-head{width:calc(100% - 40px)}
  .film h2{font-size:clamp(31px,6.7vw,44px);line-height:1.2;letter-spacing:-.045em}
  .film-note{max-width:500px;margin-top:18px;font-size:16px;line-height:1.7}
  .film-stage{width:calc(100% - 28px);margin-top:28px;border-radius:10px}
  .film-play{width:56px;height:56px}
  .film-play svg{width:24px;height:24px}
}
@media(prefers-reduced-motion:reduce){.film-play{transition:none}.film::before{opacity:.65;animation:none;background-position:45% 50%}}