/* =========================
   STRIP WRAP + FADES
========================= */
.steps-band-strip-wrap{
  position: relative;
  padding: 6px 0;
}

.steps-band-fade{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  pointer-events: none;
  opacity: 0.95;
  z-index: 2;
}

.steps-band-fade.is-left{
  left: 0;
  background: linear-gradient(90deg, rgba(244,230,214,1), rgba(244,230,214,0));
}

.steps-band-fade.is-right{
  right: 0;
  background: linear-gradient(270deg, rgba(244,230,214,1), rgba(244,230,214,0));
}

/* =========================
   STRIP (capsule + gradient + ring)
========================= */
.steps-band-strip{
  position: relative;

  display: flex;
  align-items: center;
  gap: 10px;

  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  padding: 14px 12px;
  border-radius: 999px;

  background: var(--steps-strip-grad);
  border: 1px solid var(--steps-strip-border);

  box-shadow:
    0 10px 22px rgba(0,0,0,0.06),
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 -1px 0 rgba(0,0,0,0.03) inset;
}

.steps-band-strip::-webkit-scrollbar{
  display: none;
}

.steps-band-strip::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  pointer-events: none;
  background: var(--steps-ring-grad);
  opacity: 0.55;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  padding: 1px;
}

.steps-band-strip::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  background: var(--steps-edge-glow);
  opacity: 0.55;
}