/* The onboarding video (api/web_video.py for the landing page and the help centre, app/js/views/video.js for the first-day page).
   Tokens from base.css only; no image, no web font, no inline style (CSP style-src 'self'). Nothing here moves: the video starts
   when the visitor presses play, so reduced motion needs no exception. */
.video-band { padding: var(--sec-y, clamp(64px, 9vw, 112px)) var(--gutter, 20px); background: var(--fog); color: var(--ink); }
.video-band.on-night { background: var(--night); color: var(--on-night); }
/* Not laid out until it is about to scroll in: the player's controls and the transcript are built then, so the band costs the first
   seconds of the page nothing (measured: the landing page's simulated LCP is the same with and without it; 6 more requests and a
   longer first layout when it is rendered at once). The placeholder height is the real one (measured: 1146 px at 1440, 894 at 900,
   706 at 375), so nothing below it jumps when it is built. Find-in-page, the accessibility tree and Tab still reach everything in it. */
.video-band { content-visibility: auto; contain-intrinsic-size: auto 1146px; }
@media (max-width: 1100px) { .video-band { contain-intrinsic-size: auto 900px; } }
@media (max-width: 640px) { .video-band { contain-intrinsic-size: auto 706px; } }
/* The heading block is the site's own `.section-head` (site.css): the size, width and spacing of every other section head. The
   band spends the section spacing token `--sec-y` (from the retired marketing.css; on the v2 landing its fallback applies) and the width of the product screenshots
   above it (65rem = 1040 px), so the three bands share their left edge. */
.video-in { max-width: 65rem; margin: 0 auto; }
.video-band h2 { color: inherit; }

.video-frame { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--night); box-shadow: var(--shadow-lift); }
/* elevation is declared once: a shadow on the light band, a hairline on the night band (a shadow does not show on night, and a hairline
   under a wide shadow is a ghost card), the colour of the frame of the product screenshots of the v1 pages */
.video-band.on-night .video-frame { box-shadow: 0 0 0 1px rgba(185, 205, 216, 0.22); }
@media (forced-colors: active) { .video-frame { outline: 1px solid CanvasText; } }
/* the frame clips what is outside it, which cut the site's focus ring (3 px, offset 2 px, base.css) to a sliver: draw it inside the picture */
.video-frame video:focus-visible { outline-offset: -3px; }
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--night); }
.video-frame figcaption { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: 1.5; color: var(--on-night-2); background: var(--night-2); }
/* the band spans the frame, its words keep the reading line: the padding on the right takes what the measure leaves */
.video-frame figcaption { max-width: none; padding-inline-end: max(var(--space-4), calc(100% - var(--measure) - var(--space-4))); }
.video-frame video p { padding: var(--space-4); color: var(--on-night); }
.video-frame video a { color: var(--lamp-soft); }

.video-transcript { margin-top: var(--space-4); max-width: var(--measure); }
.video-transcript-wait { color: var(--ink-2); }
.on-night .video-transcript-wait { color: var(--on-night-2); }
.video-transcript summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 650; color: var(--link); }
/* a chevron says it opens (the default marker is gone with the flex box); drawn with two borders, no image */
.video-transcript summary::after { content: ""; width: 0.5em; height: 0.5em; margin-left: 0.6em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.12em) rotate(45deg); }
.video-transcript[open] summary::after { transform: translateY(0.12em) rotate(-135deg); }
.on-night .video-transcript summary { color: var(--lamp-soft); }
.video-transcript summary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.video-transcript-body p { margin: 0 0 var(--space-3); font-size: var(--text-md); line-height: 1.55; color: var(--ink-2); }
.on-night .video-transcript-body p { color: var(--on-night-2); }
.video-transcript-body b { color: var(--ink); }
.on-night .video-transcript-body b { color: var(--on-night); }

/* inside the app (the first-day page): a plain card under a disclosure */
.vid-card { max-width: 52rem; margin: var(--space-4) 0 0; }
.vid-card .video-frame { margin-top: var(--space-3); }
.vid-card .video-transcript-body p { color: var(--ink-2); }