/* qa-film.css (the FILM step, final assembly, CAPTAIN Oct 15 6:30 PM §1): the home film card, the first section after the hero.
   site.css (= THEME/theme.css) tokens only; site.css is unchanged (p7.css gets the §7 card's button spot). The play button's spot is a setting per
   poster (the lead trade's block, film.play), written on .qa-film-wrap as --qa-px / --qa-py (0-1 of the poster's width / height).
   The button is 68 px on phones and 72 px from 700 px wide. When it sits low enough to hang under the card (v2's poster: y 1, its
   centre on the bottom edge), the "Watch it work · m:ss" line under the card moves down by exactly the part that hangs out. */
.qa-film-home{padding:56px 16px 0;background:#fff}
.qa-film-wrap{max-width:780px;margin:0 auto;container-type:inline-size;--qa-play:68px}
@media (min-width:700px){.qa-film-wrap{--qa-play:72px}}
.qa-film-home .qa-film-box{position:relative;aspect-ratio:16/9;border-radius:24px;background:var(--ink);box-shadow:0 2px 0 rgba(13,18,51,.04),0 30px 70px -30px rgba(13,18,51,.55)}
.qa-film-home .qa-film-box video{display:block;width:100%;height:100%;object-fit:contain;border-radius:24px;background:var(--ink)}
.qa-film-home .qa-film-cover{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:24px;background:var(--ink);overflow:visible;cursor:pointer;-webkit-tap-highlight-color:transparent}
.qa-film-home .qa-film-cover[hidden]{display:none}
.qa-film-home .qa-film-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:24px}
.qa-film-home .qa-film-play{position:absolute;left:calc(var(--qa-px) * 100%);top:calc(var(--qa-py) * 100%);width:var(--qa-play);height:var(--qa-play);transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line),0 14px 30px -12px rgba(13,18,51,.55);transition:transform .15s ease}
.qa-film-home .qa-film-play svg{width:42%;height:42%;margin-left:7%}
.qa-film-home .qa-film-cover:hover .qa-film-play{transform:translate(-50%,-50%) scale(1.05)}
.qa-film-home .qa-film-cover:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.qa-film-home .qa-film-box video:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.qa-film-home .qa-film-k{margin:calc(16px + max(0px, (var(--qa-py) - 1) * 56.25cqw + var(--qa-play) / 2)) 0 0}
@media (prefers-reduced-motion:reduce){.qa-film-home .qa-film-play{transition:none}}