/* The explainer video player (player.js), on the video pages and the home page. This is its shape, its look and
   our play button; each page sets the player's width, and the tokens it uses (--r, --border, --shadow-lg,
   --navy-mid, --teal) are the page's own. */

/* The player keeps the video's 16:9 shape, on the video's own off-white so nothing flashes before the poster
   arrives. */
.player{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#F5F4F2;box-shadow:0 0 0 1px var(--border),var(--shadow-lg)}
.player video{display:block;width:100%;height:100%;border-radius:inherit}

/* Our play button sits where share.jpg has it (600, 530, 112 across: 81.9% down and 9.33% of the width on the
   1920x1080 frame), because the browser's own sits over "session,". The button is the whole picture, so a tap
   anywhere starts the video; the circle is drawn on it. player.js shows it, and hides it once the video plays. */
.play{position:absolute;top:0;left:0;width:100%;height:100%;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.play[hidden]{display:none}
.play::before,.play::after{content:'';position:absolute;left:50%;top:81.9%;width:9.33%;aspect-ratio:1;transform:translate(-50%,-50%)}
.play::before{border-radius:50%;background:rgba(61,59,112,.96);box-shadow:0 3px 12px rgba(20,18,40,.27);transition:background .2s ease}
.play::after{background:#fff;clip-path:polygon(37% 29%,37% 71%,73% 50%)}
.play:hover::before{background:var(--navy-mid)}
.play:focus-visible{outline:none}
.play:focus-visible::before{outline:3px solid var(--teal);outline-offset:3px}