/* Showroom explainer videos: the reel (showroom + homepage) and the platform page player. */
.cd-reel-section { background:#101218; color:#fff; }
.cd-reel-section h2 { color:#fff; }
.cd-reel-section .cd-eyebrow { color:var(--home-lime, #d8ff36); }
.cd-reel-section .cd-lead, .cd-reel-section .cd-fine-print { color:#c9c8d3; }
.cd-reel-heading { max-width:760px; margin-bottom:44px; }
.cd-reel-stage { display:grid; grid-template-columns:minmax(0, 1.75fr) minmax(260px, 1fr); gap:28px; align-items:start; }
.cd-reel-player { margin:0; border:1px solid #33343d; background:#0b0c10; }
.cd-reel-player video { display:block; width:100%; aspect-ratio:16 / 9; background:#0b0c10; border-bottom:4px solid var(--demo-accent, var(--home-lime, #d8ff36)); transition:border-color .3s ease; }
.cd-reel-player figcaption { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:12px 20px; font-size:14px; color:#d6d5de; }
.cd-reel-player figcaption .cd-link { color:#fff; padding-block:6px; }
.cd-reel-player figcaption .cd-link:hover { color:var(--home-lime, #d8ff36); }
.cd-reel-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.cd-reel-item { position:relative; display:grid; grid-template-columns:96px minmax(0, 1fr); gap:16px; align-items:center; width:100%; padding:10px 14px 10px 10px; border:1px solid #33343d; background:transparent; color:#fff; text-align:left; cursor:pointer; overflow:hidden; transition:border-color .2s ease, background-color .2s ease; }
.cd-reel-item img { display:block; width:96px; height:54px; object-fit:cover; border-radius:2px; }
.cd-reel-item strong { display:block; font-size:16px; font-weight:600; line-height:1.3; }
.cd-reel-item small { display:flex; align-items:center; gap:8px; margin-top:4px; font-size:13px; color:#b4b3bf; }
.cd-reel-item small::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--demo-accent); flex:none; }
.cd-reel-item:hover { border-color:#5b5c68; background:#17181f; }
.cd-reel-item:focus-visible { outline:2px solid var(--home-lime, #d8ff36); outline-offset:2px; }
.cd-reel-item[aria-pressed="true"] { border-color:var(--demo-accent); background:#17181f; }
.cd-reel-progress { position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--demo-accent); transform:scaleX(var(--reel-progress, 0)); transform-origin:left; }
.cd-reel-item[aria-pressed="false"] .cd-reel-progress { display:none; }
.cd-reel-hint { margin-top:22px; }
/* Homepage: the reel sits inside the dark showroom section, below the cards. */
.cd-reel-embedded { margin-top:56px; padding-top:44px; border-top:1px solid #33343d; }
.cd-reel-kicker { margin:0 0 22px; font-size:15px; color:#d6d5de; }
.cd-reel-kicker span { color:var(--home-lime, #d8ff36); font-weight:600; margin-right:10px; }
/* Platform page: a single player under the hero. */
.cd-platform-video { background:#101218; color:#fff; }
.cd-platform-video h2 { color:#fff; }
.cd-platform-video .cd-eyebrow { color:var(--home-lime, #d8ff36); }
.cd-platform-video .cd-lead { color:#c9c8d3; }
.cd-platform-video-heading { max-width:760px; margin-bottom:36px; }
.cd-reel-solo { max-width:1100px; }
.cd-reel-solo video { border-bottom-color:var(--demo-accent, var(--home-lime, #d8ff36)); }
@media (max-width:991px) {
  .cd-reel-stage { grid-template-columns:1fr; }
  .cd-reel-list { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:575px) {
  .cd-reel-list { grid-template-columns:1fr; }
  .cd-reel-item { grid-template-columns:80px minmax(0, 1fr); }
  .cd-reel-item img { width:80px; height:45px; }
}
@media (prefers-reduced-motion:reduce) { .cd-reel-player video, .cd-reel-item { transition:none; } }