/* Post-build corrections for version C. */

/* The explainer caption is taller than the 16:9 box on a phone, so it covered
   the play button. Below 768px it sits under the video instead of over it. */
@media (max-width: 767px) {
  .explainer__caption { display: none; }
}
.explainer__caption--below {
  padding: 1rem 0 0;
  color: inherit;
  max-width: none;
}
.explainer__caption--below h2 { color: var(--color-ink, #1b2430); }
.explainer__caption--below p { color: var(--color-ink-muted, #4a5561); }
.explainer__caption--below p:first-child { color: var(--color-accent-700, #a94e0f); }

/* Scroll progress. The strip was a static decorative gradient; it now reports
   how far down the page you are. */
.top-strip {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: 0 50%;
  z-index: 200;
  will-change: transform;
}

/* Dots are one per scrollable page, so the last one is always reachable. */
.rail-dot[data-active="true"] { background: var(--color-accent-500, #ea6923); }