.guide{
  --guide-w: 540px;
  --guide-img-h: clamp(300px, 50vh, 430px);
  --guide-dur: .45s;
  --guide-ease: cubic-bezier(.4, 0, .2, 1); 

  max-width: var(--guide-w);
  margin: 32px auto;
}
.guide-slide{margin:0}
.guide-slide img{
  display:block;
  width:auto;
  max-width:100%;
  height:var(--guide-img-h);
  margin:0 auto;
  object-fit:contain;
  object-position:center;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:12px;
}
.guide-slide figcaption{padding:14px 2px 0;font-size:14px;line-height:1.65;color:var(--text-muted)}
.guide-slide figcaption b{display:block;color:var(--text-strong);font-weight:600;font-size:15px;margin-bottom:2px}

.guide--ready{background:var(--bg-card);border:1px solid var(--border);border-radius:10px}
.guide--ready .guide-slides{position:relative;overflow:hidden;transition:height var(--guide-dur) var(--guide-ease)}

.guide--ready .guide-slide{
  position:absolute;top:0;left:0;right:0;padding:0 20px;
  opacity:0;visibility:hidden;transform:translateX(0);z-index:1;
  will-change:transform;
  transition:
    transform var(--guide-dur) var(--guide-ease),
    opacity calc(var(--guide-dur) * .8) ease calc(var(--guide-dur) * .15),
    visibility 0s linear var(--guide-dur);
}
.guide--ready .guide-slide.is-active{
  opacity:1;visibility:visible;transform:none;z-index:2;
  transition:transform var(--guide-dur) var(--guide-ease),visibility 0s;
}
.guide--ready .guide-slide.is-enter-left,
.guide--ready .guide-slide.is-enter-right{visibility:visible;opacity:1;transition:none}
.guide--ready .guide-slide.is-enter-left{transform:translateX(-100%)}
.guide--ready .guide-slide.is-enter-right{transform:translateX(100%)}
.guide--ready .guide-slide.is-exit-left,
.guide--ready .guide-slide.is-exit-right{visibility:visible;opacity:0}
.guide--ready .guide-slide.is-exit-left{transform:translateX(-30%)}
.guide--ready .guide-slide.is-exit-right{transform:translateX(30%)}
.guide--ready .guide-slide figcaption{padding:14px 2px 20px}

.guide-dots{display:flex;align-items:center;padding:16px 20px 12px}
.guide-dot{
  appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;
  cursor:pointer;flex:none;border-radius:50%;
  font:inherit;
}
.guide-dot-inner{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:999px;
  background:var(--bg-subtle);border:1px solid var(--border-strong);
  color:var(--text-muted);
  font-size:14px;
  font-weight:300;
  font-variant-numeric:tabular-nums;
  transition:background .25s,border-color .25s,color .25s;
}
.guide-dot:hover .guide-dot-inner{border-color:var(--primary);color:var(--primary)}
.guide-dot.is-current .guide-dot-inner{background:var(--primary);border-color:var(--primary);color:#fff}
.guide-dot-pulse{display:none;width:7px;height:7px;border-radius:999px;background:#fff}
.guide-dot.is-current .guide-dot-num{display:none}
.guide-dot.is-current .guide-dot-pulse{display:block}
.guide-check{display:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.guide-dot.is-complete .guide-dot-inner{background:var(--primary);border-color:var(--primary);color:#fff}
.guide-dot.is-complete .guide-dot-num,
.guide-dot.is-complete .guide-dot-pulse{display:none}
.guide-dot.is-complete .guide-check{display:block}

.guide-connector{position:relative;flex:1;min-width:10px;height:2px;margin:0 6px;border-radius:2px;background:var(--border);overflow:hidden}
.guide-connector-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--primary);transition:width var(--guide-dur) var(--guide-ease)}
.guide-connector.is-complete .guide-connector-fill{width:100%}

.guide-footer{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--border)}
.guide-counter{flex:1;text-align:center;font-size:13px;color:var(--text-faint);min-width:0;font-variant-numeric:tabular-nums}
.guide-btn{appearance:none;font:inherit;font-size:14px;font-weight:500;cursor:pointer;border-radius:8px;padding:8px 16px;transition:background .15s,border-color .15s,color .15s}
.guide-btn--back{background:none;border:0;color:var(--text-muted);padding-left:4px}
.guide-btn--back:hover{color:var(--text-strong)}
.guide-btn--next{background:var(--primary);border:1px solid var(--primary);color:#fff;min-width:118px}
.guide-btn--next:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.guide-btn--next:active{transform:translateY(1px)}
.guide-btn:focus-visible,.guide-dot:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.guide-final{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 12px 4px}
.guide-final-icon{width:56px;height:56px;border-radius:999px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex:none}
.guide-final-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.guide-final b{font-size:17px;font-weight:600;color:var(--text-strong);margin-bottom:6px}
.guide-final p{margin:0;font-size:14px;line-height:1.65;color:var(--text-muted);max-width:46ch}

.guide-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:640px){
  .guide{--guide-img-h:clamp(280px,46vh,380px)}
  .guide-dots{padding:14px 14px 10px}
  .guide--ready .guide-slide{padding:0 14px}
  .guide--ready .guide-slide figcaption{padding:12px 2px 16px}
  .guide-footer{padding:12px 14px;gap:8px}
  .guide-dot-inner{width:26px;height:26px;font-size:13px}
  .guide-connector{margin:0 4px;min-width:6px}
  .guide-btn--next{min-width:104px}
}

/* Узкие телефоны (≤480px): чтобы 9 шагов (wallet-guide) помещались.
   9 кружков × 22px + 8 коннекторов × 7px = 198 + 56 = 254px
   помещается в ~300px доступной ширины с запасом. */
@media (max-width:480px){
  .guide-dots{padding:10px 8px 8px}
  .guide-dot-inner{width:22px;height:22px;font-size:11px}
  .guide-connector{margin:0 2px;min-width:3px}
  .guide-dot-pulse{width:6px;height:6px}
  .guide-check{width:11px;height:11px}
}

@media (max-width:420px){
  .guide-counter{display:none}
  .guide-footer{justify-content:space-between}
  .guide-btn--next{flex:1;max-width:180px}
  /* На совсем узких экранах уменьшаем ещё, чтобы 9 шагов гарантированно влезли */
  .guide-dots{padding:8px 6px 6px}
  .guide-dot-inner{width:20px;height:20px;font-size:10px}
  .guide-connector{margin:0 1px;min-width:2px}
  .guide-dot-pulse{width:5px;height:5px}
  .guide-check{width:10px;height:10px}
}
@media (prefers-reduced-motion:reduce){
  .guide--ready .guide-slides,
  .guide--ready .guide-slide,
  .guide-connector-fill,
  .guide-dot-inner{transition:none}
}