/* The landing film's frame and rail (#build). The stage itself is styled inside its shadow root (reel-stage.css).
   The frame reserves its height before the film is built: iOS Safari has no scroll anchoring. */
.reel { margin-top: clamp(20px, 3vw, 34px); }
.reel__frame {
  position: relative; width: 100%; aspect-ratio: var(--W, 1280) / var(--H, 720); overflow: hidden; border-radius: 28px; isolation: isolate; contain: layout paint;
  background: radial-gradient(70% 60% at 62% 58%, #17365f 0%, rgba(23, 54, 95, 0) 70%), linear-gradient(180deg, #060b13 0%, #0b1424 55%, #101b2e 100%);
  box-shadow: 0 2px 0 rgba(70, 55, 25, .05), 0 30px 60px -28px rgba(40, 30, 10, .55), 0 0 0 1px rgba(40, 30, 10, .08);
}
.reel__host { position: absolute; inset: 0; }
.reel__rail { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.reel__play { flex: none; position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sc-ink); cursor: pointer; }
.reel__play::before, .reel__play::after { content: ''; position: absolute; top: 15px; width: 4px; height: 14px; border-radius: 2px; background: #fff; }
.reel__play::before { left: 16px; } .reel__play::after { left: 24px; }
.reel__play[data-state="paused"]::before { left: 17px; top: 14px; width: 0; height: 0; border-radius: 0; background: none; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.reel__play[data-state="paused"]::after, .reel__play[data-state="ended"]::after { display: none; }
.reel__play[data-state="ended"]::before { content: '↻'; left: 0; top: 0; width: 100%; height: 100%; background: none; color: #fff; font: 700 21px/44px var(--sc-font-text); text-align: center; }
.reel__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; flex: 1; min-width: 0; }
.reel__steps button { width: 100%; border: 0; background: none; padding: 6px 0; text-align: left; cursor: pointer; font: 600 13.5px/1.2 var(--sc-font-text); color: var(--sc-ink-soft); }
.reel__steps em { position: relative; display: block; height: 4px; margin-bottom: 9px; overflow: hidden; border-radius: 4px; background: var(--rule-2); }
.reel__steps em::after { content: ''; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--green); }
.reel__steps button[aria-current="true"] { color: var(--sc-ink); }
.reel__cta { flex: none; }
@media (max-width: 700px) {
  .reel__frame { --W: 720; --H: 1080; border-radius: 22px; }
  .reel__rail { flex-wrap: wrap; gap: 12px; }
  .reel__steps { gap: 5px; }
  .reel__steps span { display: none; }
  .reel__cta { order: 3; width: 100%; justify-content: center; }
}