/* The guide follows the same image → camera movement → film sequence as the studio. */
.video-stage-scroll { display: flex; flex-direction: column; }
.video-guide--cinema {
  --guide-background: #101112;
  --guide-muted: #8d9093;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-height: 100%;
  padding: 0;
  background: var(--guide-background);
}
.video-guide-content { padding: clamp(32px, 6vh, 72px) clamp(24px, 3vw, 46px) 56px; }
.video-guide--cinema .video-guide-heading { margin-bottom: 28px; }
.video-guide--cinema .video-guide-heading h1 {
  max-width: 100%;
  margin: 0 0 12px;
  font-size: clamp(26px, 2.15vw, 38px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.35px;
  text-transform: uppercase;
  text-wrap: balance;
}
.video-guide--cinema .video-guide-heading > p { margin: 0; color: var(--guide-muted); font-size: 12px; line-height: 1.7; }
.video-guide--cinema .video-guide-steps { gap: clamp(18px, 2.3vw, 40px); }
.video-guide-panel {
  display: block;
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1.31;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #0d0e0f;
  text-align: center;
  color: #f5f5f5;
  pointer-events: none;
  user-select: none;
}
.video-guide--cinema .video-step > h2 { margin: 18px 0 0; font-size: clamp(13px, 1.12vw, 19px); font-weight: 750; line-height: 1.3; letter-spacing: -.65px; text-transform: uppercase; }
.video-guide--cinema .video-step > p { margin: 10px 0 0; color: var(--guide-muted); font-size: clamp(10px, .88vw, 14px); line-height: 1.65; }
.video-guide-footer { display: flex; flex-shrink: 0; justify-content: center; align-items: center; gap: 22px; position: relative; width: 100%; min-height: 82px; margin-top: auto; padding: 15px 32px; overflow: hidden; text-align: left; border: 0; border-top: 1px solid #ffffff03; background: #151719; }
.video-guide-footer-copy { display: flex; flex-direction: column; gap: 6px; }
.video-guide-footer-copy strong { color: #f4f4f4; font-size: 13px; font-weight: 600; line-height: 1.4; }
.video-guide-footer-copy > span { color: var(--guide-muted); font-size: 10px; line-height: 1.5; }
.video-guide-footer > .v-icon { width: 16px; height: 16px; margin-left: 8px; color: #94979a; transition: transform 160ms, color 160ms; }
.video-guide-footer:hover > .v-icon { transform: translateX(3px); color: #fff; }
.video-guide-footer:focus-visible { outline-offset: -4px; }
.video-guide-fan { position: relative; flex: 0 0 135px; align-self: stretch; margin-block: -15px; }
.video-guide-fan img { position: absolute; bottom: -18px; width: 61px; height: 83px; object-fit: cover; border: 1px solid #393c3f; border-radius: 9px; }
.video-guide-fan img:nth-child(1) { left: 0; bottom: -25px; transform: rotate(-14deg); }
.video-guide-fan img:nth-child(2) { left: 37px; z-index: 1; }
.video-guide-fan img:nth-child(3) { left: 74px; bottom: -25px; transform: rotate(14deg); }
.video-guide--cinema[data-guide-paused="true"] *, .video-guide--cinema[data-guide-paused="true"] *::before, .video-guide--cinema[data-guide-paused="true"] *::after { animation-play-state: paused !important; }
@media (min-width: 901px) and (max-height: 800px) {
  .video-guide-content { padding-top: 28px; padding-bottom: 36px; }
  .video-guide--cinema .video-guide-heading { margin-bottom: 24px; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .video-guide-content { padding-inline: 23px; }
  .video-guide--cinema .video-guide-steps { gap: 14px; }
  .video-guide--cinema .video-guide-heading h1 { font-size: 28px; }
  .video-guide--cinema .video-guide-heading > p { font-size: 11px; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .video-guide-content { padding: 34px 24px 42px; }
  .video-guide--cinema .video-guide-steps { gap: 16px; }
}
@media (max-width: 680px) {
  .video-guide--cinema .video-guide-steps { grid-template-columns: 1fr; gap: 30px; }
  .video-guide-panel { aspect-ratio: 1.31; }
  .video-guide--cinema .video-step > h2 { font-size: 16px; margin-top: 16px; }
  .video-guide--cinema .video-step > p { font-size: 12px; margin-top: 7px; }
}
@media (max-width: 560px) {
  .video-guide--cinema { min-height: 0; border-radius: 0 0 16px 16px; overflow: hidden; }
  .video-guide-content { padding: 28px 20px 36px; }
  .video-guide--cinema .video-guide-heading h1 { font-size: 27px; letter-spacing: -1px; }
  .video-guide--cinema .video-guide-heading > p { font-size: 11px; }
  .video-guide-footer { min-height: 90px; gap: 16px; padding: 18px 20px; }
  .video-guide-fan { flex-basis: 77px; margin-left: -35px; margin-block: -18px; }
  .video-guide-fan img { width: 47px; height: 71px; }
  .video-guide-fan img:nth-child(2) { left: 24px; }
  .video-guide-fan img:nth-child(3) { left: 48px; }
  .video-guide-footer-copy strong { font-size: 12px; }
  .video-guide-footer-copy > span { font-size: 10px; }
  .video-guide-footer > .v-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .video-guide--cinema *, .video-guide--cinema *::before, .video-guide--cinema *::after { animation: none !important; transition: none !important; }
}

/* Each panel plays a complete, original authored motion; the page supplies its action. */
.video-guide-motion-panel { background-position: center; background-size: cover; }
.video-guide-loop { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-guide-motion-panel[data-guide-step="1"] { background-image: url('/assets/video-guide/original-step-1.webp?v=en-20261025-1'); }
.video-guide-motion-panel[data-guide-step="2"] { background-image: url('/assets/video-guide/original-step-2.webp?v=en-20261025-1'); }
.video-guide-motion-panel[data-guide-step="3"] { background-image: url('/assets/video-guide/original-step-3.webp?v=en-20261025-1'); }