/* spaces-intro.css: the Spaces intro banner (js/spaces-intro.js, R12-SPACES-INTRO, R12-SPACES-FUNNEL).
 * App-shell tokens only. Sits at the top of the main column, never over it.
 * A short muted loop of Film 1 on the left (on top on a phone), one plain line, one button,
 * a close cross. Large, plain text for 50+ coaches. Phone first. */
.spi-bar {
  display: flex; align-items: center; gap: 14px 18px;
  margin: 0 0 18px; padding: 12px 48px 12px 12px; position: relative;
  background: var(--accent-softer); border: 1px solid var(--accent-soft);
  border-radius: var(--radius-lg, 18px); color: var(--text);
}
.spi-bar[hidden] { display: none !important; }
.spi-media {
  flex: 0 0 200px; aspect-ratio: 16 / 9; position: relative; overflow: hidden; cursor: pointer;
  border-radius: 12px; background: #1F1E24;
}
.spi-media img, .spi-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.spi-body { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.spi-text { margin: 0; flex: 1 1 260px; min-width: 0; font-size: 17px; line-height: 1.45; color: var(--text); }
.spi-bar .btn.spi-go { flex: 0 0 auto; min-height: 44px; font-size: 16px; padding: 0 20px; white-space: nowrap; }
.spi-close {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-2); font-size: 24px; line-height: 1; cursor: pointer;
}
.spi-close:hover, .spi-close:focus-visible { background: var(--accent-soft); color: var(--text); }
@media (max-width: 640px) {
  .spi-bar { flex-direction: column; align-items: stretch; padding: 12px; }
  .spi-media { flex: none; width: 100%; }
  .spi-close { top: 16px; right: 16px; background: rgba(31, 30, 36, 0.55); color: #fff; }
  .spi-close:hover, .spi-close:focus-visible { background: rgba(31, 30, 36, 0.8); color: #fff; }
  .spi-bar .btn.spi-go { width: 100%; }
}