/* Product film on / and /beta. The 16:9 box is reserved by aspect-ratio, so the poster, the film and the form below never shift. */
.film{margin:1.75rem 0 0}
.film-frame{position:relative;aspect-ratio:16/9;border-radius:.6rem;overflow:hidden;background:var(--ink-2);box-shadow:0 0 0 1px var(--line)}
.film video{display:block;width:100%;height:100%;object-fit:contain;background:var(--ink-2)}
.film video p{padding:1rem;margin:0}
.film video::cue{font:500 1rem/1.35 var(--sans);background:rgba(14,16,19,.82);color:var(--paper)}
.film-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.25rem;margin-top:.75rem}
.film-sound{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .9rem .5rem .75rem;border:0;border-radius:999px;background:var(--amber);color:var(--amber-ink);font:600 .9375rem/1.2 var(--sans);cursor:pointer;transition:background-color .15s ease-out,transform .1s ease-out}
.film-sound[hidden]{display:none}
.film-sound:hover{background:#FFC04D}
.film-sound:active{transform:scale(.97)}
.film-sound:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.film-sound .off{display:inline}.film-sound .on{display:none}
.film-sound[aria-pressed=true] .off{display:none}.film-sound[aria-pressed=true] .on{display:inline}
.film-skip{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;color:var(--muted)}
.film-skip:hover{color:var(--paper)}
.film-bar+.form{margin-top:.5rem}
.hero .film{margin:1.5rem 0 1.25rem;text-align:left}