/* Ролик в блоке «Как это работает» (01.10): шаги слева, беззвучная петля справа,
   активный шаг подсвечивается в такт ролику (promo-video.js). Только главная. */
.how-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }

.reel-glow { position: relative; }
/* Свечение — внутри своей колонки (бока 0): с отрицательными боками оно выходило
   за край экрана и давало горизонтальную прокрутку 1–3 px на 1024–1100 и 360–390 px. */
.reel-glow::before {
  content: ""; position: absolute; inset: 8% 0 -4%; z-index: -1; border-radius: 40px;
  background: radial-gradient(closest-side, rgba(122, 98, 240, 0.35), rgba(214, 110, 190, 0.18) 60%, transparent);
  filter: blur(24px);
}
.reel {
  position: relative; margin: 0 auto; width: 320px; max-width: 100%; aspect-ratio: 9 / 16;
  border-radius: 28px; overflow: hidden; background: var(--accent);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(90, 69, 214, 0.12);
}
.reel video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Пауза для петли: ролик стартует сам и длится дольше 5 с — остановить его
   должно быть можно и пальцем, и с клавиатуры. */
.reel-pause {
  position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(23, 15, 58, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.reel-pause[hidden] { display: none; }
.reel-pause:hover { background: rgba(23, 15, 58, 0.7); }
.reel-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.reel-pause svg { width: 18px; height: 18px; }
.reel-pause .i-play { display: none; }
.reel-pause.is-paused .i-play { display: block; }
.reel-pause.is-paused .i-pause { display: none; }

.steps-v { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
.steps-v li { border-top: 0; border-left: 3px solid var(--line); padding: 14px 0 14px 20px; transition: border-color .4s var(--ease); }
.steps-v.synced li h3 { color: var(--ink-2); transition: color .4s var(--ease); }
.steps-v.synced li p { color: var(--ink-3); transition: color .4s var(--ease); }
.steps-v.synced li.on { border-left-color: var(--accent); }
.steps-v.synced li.on h3 { color: var(--ink); }
.steps-v.synced li.on p { color: var(--ink-2); }
.steps-v .num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; flex: none;
                background: var(--accent-soft); color: var(--accent-deep); font-size: 15px; font-weight: 700; }
.steps-v li.on .num { background: var(--accent); color: #fff; }

/* Телефон: ролик сразу под заголовком, шаги — под роликом. */
@media (max-width: 900px) {
  .how-split { grid-template-columns: 1fr; gap: 32px; }
  .how-split > .reel-glow { order: -1; }
  .how-split > div:first-child { display: contents; }
  .how-split h2 { order: -3; }
  .how-split .sec-lead { order: -2; margin-top: -18px; }
}
@media (max-width: 640px) {
  .reel { width: 240px; }
}