/* Demo videos: the homepage reel (published 2026-10-16) and the walkthrough library (owner, 2026-10-14: buyer pain in order). */
.theme-depth .reel-layout { max-width:1280px; grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr); gap:64px; }
.reel { margin:0; }
.reel video, .video-card video { display:block; width:100%; height:auto; aspect-ratio:16 / 9; border-radius:14px; background:#0d1b2c; box-shadow:0 20px 70px rgb(0 0 0 / .3); }
.reel figcaption, .video-card figcaption { margin-top:12px; font-size:13px; line-height:1.55; color:#96a4b4; }
.reel-toggle { margin-top:10px; padding:6px 0; border:0; background:none; font:inherit; font-size:13px; color:#b6dfda; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.reel-toggle:focus-visible { outline:2px solid #85c6c2; outline-offset:3px; border-radius:4px; }

.video-library .video-group { padding-block:44px; border-top:1px solid var(--line); }
.video-library .video-group:first-of-type { border-top:0; padding-top:12px; }
.video-group-head { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; max-width:760px; margin-bottom:24px; }
.video-group-head .place-role { margin:0; }
.video-group-head h3 { font-size:clamp(24px,2.4vw,32px); letter-spacing:-.03em; line-height:1.15; margin:0; }
.video-group-head p:not(.place-role) { margin:0; color:var(--muted); }
.video-feature { max-width:960px; }
.video-card { margin:0; }
.video-card figcaption b { display:block; margin-bottom:2px; font-size:15px; font-weight:600; color:var(--text, #e8edf4); }
.video-more { margin-top:28px; max-width:960px; }
.video-more > summary { cursor:pointer; color:#b6dfda; }
.video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 28px; margin-top:8px; }
.video-group .more-link { display:inline-block; margin-top:12px; }

@media (max-width: 900px) {
  .theme-depth .reel-layout { display:flex; flex-direction:column; align-items:stretch; gap:32px; }
  .video-grid { grid-template-columns:1fr; }
  .video-library .video-group { padding-block:32px; }
}

/* Video pages (2026-10-18): one page per walkthrough video at /videos/<slug>, and the /videos list. */
.video-card figcaption b a { color:inherit; text-decoration:none; }
.video-card figcaption b a:hover, .video-card figcaption b a:focus-visible { text-decoration:underline; text-underline-offset:3px; }
.video-watch { max-width:960px; margin:28px 0 8px; }
.video-length { color:#96a4b4; white-space:nowrap; font-variant-numeric:tabular-nums; }
.video-captions ol { padding-left:1.4em; }
.video-captions li { margin:.4em 0; }
.video-related ul { padding-left:1.2em; }
.video-related li { margin:.35em 0; }
.video-hub-group { padding-block:28px; border-top:1px solid var(--line); }
.video-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 20px; margin-top:16px; }
.video-tile { display:grid; gap:6px; align-content:start; color:inherit; text-decoration:none; }
.video-tile img { display:block; width:100%; height:auto; aspect-ratio:16 / 9; border-radius:12px; background:#0d1b2c; box-shadow:0 14px 44px rgb(0 0 0 / .28); }
.video-tile b { font-size:15px; font-weight:600; color:var(--text, #e8edf4); }
.video-tile:hover b, .video-tile:focus-visible b { text-decoration:underline; text-underline-offset:3px; }
.video-tile:focus-visible { outline:2px solid #85c6c2; outline-offset:4px; border-radius:12px; }
.video-tile > span { font-size:13px; line-height:1.55; color:#96a4b4; }
@media (max-width: 900px) { .video-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .video-tiles { grid-template-columns:1fr; } }