.roadmap-animation, .roadmap-concepts { padding:1rem 0; }
.roadmap-animation-frame { margin:1rem 0; }
.roadmap-animation-frame video, .roadmap-animation-still {
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius);
}
.roadmap-animation-frame[data-motion="video"] .roadmap-animation-still { display:none; }
.roadmap-animation-frame[data-motion="static"] video { display:none; }
.roadmap-concept-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(2,minmax(0,1fr)); margin:1.5rem 0 0; }
.roadmap-concept { margin:0; min-width:0; }
.roadmap-concept h4 { margin:.3rem 0 .8rem; }
/* Matches the page's eyebrow treatment, and stays in sentence case so a printed
   copy carries the concept label exactly as the contract words it. */
.roadmap-concept-label { margin:0; font-size:.85rem; font-weight:700; letter-spacing:.03em; color:var(--muted); }
.roadmap-concept-frame {
  display:grid; place-items:center; aspect-ratio:1/1; padding:.5rem;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius);
}
.roadmap-concept-image { display:none; width:100%; height:auto; border-radius:calc(var(--radius) / 2); }
.roadmap-concept-frame[data-state="ready"] .roadmap-concept-image { display:block; }
.roadmap-concept-frame[data-state="ready"] .roadmap-concept-status { display:none; }
.roadmap-concept-status { margin:0; padding:1rem; text-align:center; }
.roadmap-concept .btn { margin-top:.8rem; cursor:pointer; min-height:48px; font:inherit; }
.roadmap-viewer {
  /* The site-wide `* { margin:0 }` reset removes the UA's centring margin from dialogs. */
  margin:auto; width:min(96vw,1200px); max-height:92vh; padding:1rem; overflow:auto;
  background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius);
}
.roadmap-viewer::backdrop { background:rgba(0,0,0,.72); }
.roadmap-viewer-bar { display:flex; gap:1rem; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.roadmap-viewer-title { margin:0; font-weight:700; }
.roadmap-viewer-bar .btn { cursor:pointer; min-height:48px; font:inherit; }
.roadmap-viewer-image { display:block; width:100%; height:auto; }
@media (max-width:720px) {
  .roadmap-concept-grid { grid-template-columns:minmax(0,1fr); }
  .roadmap-concept .btn, .roadmap-viewer-bar .btn { width:100%; }
  .roadmap-viewer-bar { flex-direction:column; align-items:stretch; }
}
@media print {
  /* An exported copy carries the poster and the explanation, never a video. */
  .roadmap-animation-frame video { display:none !important; }
  .roadmap-animation-frame .roadmap-animation-still { display:block !important; }
  .roadmap-animation-frame[data-motion="video"] .roadmap-animation-still { display:block !important; }
  .roadmap-animation-note, .roadmap-concept .btn, .roadmap-viewer { display:none !important; }
  .roadmap-animation, .roadmap-concepts { break-inside:avoid; }
  .roadmap-animation-frame video, .roadmap-animation-still, .roadmap-concept-frame {
    background:white; border-color:#bbb;
  }
  .roadmap-animation-still { max-height:70mm; width:auto; }
  .roadmap-concept-grid { display:block; }
  .roadmap-concept { break-inside:avoid; margin-bottom:1rem; }
  .roadmap-concept-frame { aspect-ratio:auto; padding:0; border:0; justify-items:start; }
  .roadmap-concept-image { max-height:90mm; width:auto; }
}