/* Scoped to the product film; the landing page's type and spacing stay intact. */
.film-section{scroll-margin-top:76px}
.film-player{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;background:#f5f5f7;
  border:1px solid var(--hair,rgba(0,0,0,.08));box-shadow:0 28px 64px -30px rgba(29,29,31,.28)}
.film-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.film-player [hidden]{display:none!important}
.film-player button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.film-launch{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:16px;padding:15px 27px 15px 15px;border:1px solid rgba(255,255,255,.18);
  border-radius:100px;background:rgba(29,29,31,.93);color:white;white-space:nowrap;text-align:left;
  box-shadow:0 18px 44px rgba(0,0,0,.22);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:background .2s,box-shadow .2s}
.film-launch:hover{background:#151517;box-shadow:0 20px 52px rgba(0,0,0,.3)}
.film-launch-icon{display:grid;place-items:center;width:62px;height:62px;flex:none;background:white;color:#1d1d1f;border-radius:50%}
.film-launch-icon svg{margin-left:2px}
.film-launch-copy{display:grid;gap:2px}
.film-launch-copy strong{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.film-launch-copy>span{font-size:14px;color:#c5c5c9;letter-spacing:.015em}
.film-controls{position:absolute;inset:auto 0 0;display:grid;grid-template-columns:44px minmax(40px,1fr) auto repeat(3,44px);
  align-items:center;gap:8px;padding:40px 18px 12px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.72));transition:opacity .2s;opacity:1}
.film-player.is-idle .film-controls{opacity:0;pointer-events:none}
.film-player.is-idle:focus-within .film-controls{opacity:1;pointer-events:auto}
.film-control{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:white}
.film-control:hover{background:rgba(255,255,255,.16)}
.film-control[aria-pressed="true"]{color:#8ac6ff;background:rgba(0,113,227,.25)}
.film-control:disabled{opacity:.4;cursor:default}
.film-player button:focus-visible,.film-seek:focus-visible{outline:3px solid #80bfff;outline-offset:3px}
.film-time{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:80px;text-align:center}
.film-seek{--played:0%;appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;height:28px;margin:0;cursor:pointer;background:transparent;border-radius:4px}
.film-seek::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,#2997ff var(--played),rgba(255,255,255,.4) var(--played))}
.film-seek::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(to right,#2997ff var(--played),rgba(255,255,255,.4) var(--played))}
.film-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border:0;border-radius:50%;margin-top:-5px;background:white;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.film-seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:white;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.film-seek:disabled{opacity:.5;cursor:default}
.film-video::cue{background:rgba(20,20,23,.88);color:#fff;font:500 clamp(13px,1.8vw,24px)/1.4 -apple-system,BlinkMacSystemFont,sans-serif}
.film-description{display:flex;justify-content:space-between;gap:12px;margin:20px 2px 0;color:var(--muted,#6e6e73);font-size:13px;line-height:1.5}
.film-status{margin:14px 2px 0;color:var(--muted,#6e6e73);font-size:14px}
.film-status a{color:var(--blue,#0071e3);text-decoration:underline}
.film-player:is(:fullscreen,:-webkit-full-screen){width:100%;height:100%;border:0;border-radius:0;background:#000;display:flex;align-items:center;justify-content:center}
.film-player:is(:fullscreen,:-webkit-full-screen) .film-video{width:100%;height:100%;object-fit:contain}
@media(max-width:640px){
  .film-player{border-radius:16px}
  .film-launch{gap:12px;padding:10px 19px 10px 10px}
  .film-launch-icon{width:48px;height:48px}
  .film-launch-icon svg{width:20px;height:20px}
  .film-launch-copy strong{font-size:17px}
  .film-launch-copy>span{font-size:12px}
  .film-controls{grid-template-columns:44px minmax(60px,1fr) repeat(3,44px);gap:0 3px;padding:24px 8px 4px}
  .film-seek{grid-column:1/-1;grid-row:1;height:24px}
  .film-time{text-align:left;font-size:11px;min-width:0}
  .film-description{flex-wrap:wrap;gap:4px;margin-top:14px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.film-launch,.film-controls{transition:none}}