.vista-steps{--step-line:#112646;--step-fill:#112646;--step-accent:#FFD018;position:relative;display:flex;flex-direction:column;gap:56px}
.vista-steps__progress-bg,.vista-steps__progress,.vista-steps__progress-complete{position:absolute;left:34px;top:var(--rail-top,0px);width:4px;border-radius:2px;z-index:0}
.vista-steps__progress-bg{height:var(--rail-height,100%);background:rgba(17,38,70,.0)}
.vista-steps__progress-complete{height:0;background:var(--step-accent)}
.vista-steps__progress{height:0;background:var(--step-line);transition:height .5s cubic-bezier(.22,.61,.36,1);will-change:height}
.vista-step{display:grid;grid-template-columns:72px 1fr;align-items:flex-start;gap:24px;opacity:0;transform:translateY(12px);transition:opacity .4s ease, transform .4s ease}
.vista-step.is-active{opacity:1;transform:none}
.vista-step__rail{position:relative;display:flex;flex-direction:column;align-items:center;z-index:1}
.vista-step__line{display:block;width:4px;background:rgba(17,38,70,.15);opacity:1}
.vista-step__line--top{flex:1 1 auto;transform-origin:top;}
.vista-step__line--bottom{flex:1 1 auto;transform-origin:bottom;}
.vista-step__node{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:8px 0}
.vista-step__ring{position:absolute;inset:0}
.vista-step__ring .ring{fill:none;stroke:var(--step-line);stroke-width:4;stroke-linecap:round;stroke-dasharray:138;stroke-dashoffset:138;}
.vista-step.is-active .vista-step__ring .ring{stroke-dashoffset:0;transition:stroke-dashoffset .8s ease, stroke .2s ease}
.vista-step.is-filled .vista-step__ring .ring{stroke:var(--step-accent)}
.vista-step__number{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#112646;font-weight:700}
.vista-step__number::before,.vista-step__number::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
/* solid yellow disc behind the number */
.vista-step.is-filled .vista-step__number::before{inset:6px;background:var(--step-accent);z-index:-1}
/* outward blue pulse that fades out */
.vista-step.is-filled .vista-step__number::after{inset:0;background:transparent;opacity:0;filter:blur(8px);animation:step-blue-pulse 1.6s ease-out}
@keyframes step-blue-pulse{0%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 rgba(255,208,24,1)}70%{transform:scale(1.9);opacity:0;box-shadow:0 0 36px 22px rgba(255,208,24,.25)}100%{transform:scale(1);opacity:0;box-shadow:none}}
.vista-step.is-filled .vista-step__number{background:var(--step-fill);color:#fff}
.vista-step__content{padding-top:4px}
.vista-step__title{margin:0 0 8px 0}
.vista-step__body{opacity:.9}

/* Animate the vertical line grow when active */
.vista-step .vista-step__line{transform:scaleY(0);transition:transform .8s ease}
.vista-step.is-active .vista-step__line{transform:scaleY(1)}
.vista-step.is-filled .vista-step__line--bottom{background:var(--step-accent)}
.vista-step.is-filled .vista-step__line--top{background:var(--step-accent)}

/* Staggered content entrance */
.vista-step__title,.vista-step__body{opacity:0;transform:translateX(18px);transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1)}
.vista-step.is-active .vista-step__title{opacity:1;transform:none;transition-delay:.06s}
.vista-step.is-active .vista-step__body{opacity:1;transform:none;transition-delay:.18s}

@media (max-width: 800px){
	.vista-step{grid-template-columns:56px 1fr;gap:16px}
}