/* Click-to-load video player: shows a poster until clicked, so no third-party code loads with the page. */
.vid { margin: 0; }
.vid-frame { position: relative; width: 100%; max-width: 340px; aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; border: 1px solid rgba(9, 13, 22, 0.16); border-radius: 18px; background: #0b0d12; box-shadow: 0 30px 60px -36px rgba(9, 13, 22, 0.55); }
.vid-play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.vid-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.vid-play::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 13, 18, 0) 70%, rgba(11, 13, 18, 0.5)); pointer-events: none; }
.vid-btn { position: absolute; z-index: 1; left: 50%; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px 11px 14px; transform: translateX(-50%); border-radius: 999px; background: #fff; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.55); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; color: #0b0d12; transition: transform 0.2s ease; }
.vid-btn svg { width: 18px; height: 18px; fill: #1d4ed8; }
.vid-time { color: #5b6472; font-weight: 500; }
.vid-play:hover .vid-btn, .vid-play:focus-visible .vid-btn { transform: translateX(-50%) scale(1.05); }
.vid-play:focus-visible { outline: 3px solid #60a5fa; outline-offset: -3px; }
.vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid figcaption { max-width: 340px; margin: 14px auto 0; font-size: 13.5px; line-height: 1.55; color: #5b6472; }
.vid figcaption a { color: #1d4ed8; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vid-btn { transition: none; } }