/* Site video players (assets/video.js): poster + drawn play button, captions on, optional <dialog>. */
.watch { margin-top: 56px; }
.watch h3 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 20px; }
.vids { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.vid { margin: 0; background: #fff; border: 1px solid #E3E8EE; border-radius: 12px; overflow: hidden; }
.player { position: relative; aspect-ratio: 16 / 9; background: #F2F5F8; }
.player video { display: block; width: 100%; height: 100%; }
.player .play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; background: transparent; cursor: pointer; }
.player .play span { width: 72px; height: 72px; border-radius: 50%; background: #2E75B6; display: grid; place-items: center; box-shadow: 0 12px 30px -10px rgba(10,37,64,.5); transition: transform .15s, background .15s; }
.player .play:hover span { transform: scale(1.06); background: #245f95; }
.player .play svg { width: 26px; height: 26px; margin-left: 4px; fill: #fff; }
.player.playing .play { display: none; }
.vid figcaption { padding: 16px 18px 18px; display: grid; gap: 6px; border-top: 1px solid #E3E8EE; }
.vid .k { font: 500 11px "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: #2E75B6; }
.vid .q { font-weight: 700; color: #0A2540; font-size: 17px; line-height: 1.3; }
.vid details { font-size: 14px; color: #586B7D; }
.vid summary { cursor: pointer; font-weight: 600; color: #2E75B6; width: fit-content; }
.vid details p { margin: 8px 0 0; }
.intro { width: min(960px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #000; }
.intro::backdrop { background: rgba(6,25,46,.8); }
.intro .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; background: #0A2540; color: #fff; font-weight: 700; }
.intro .x { border: 0; background: transparent; color: #fff; font-size: 28px; line-height: 1; width: 44px; height: 44px; border-radius: 8px; cursor: pointer; }
.intro .x:hover { background: rgba(255,255,255,.12); }
.intro video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #F2F5F8; }
@media (max-width: 900px) { .vids { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .player .play span { transition: none; } }