.cta-steps { position: relative; }


@media (min-width: 761px) {
  .cta-steps { border-top-color: transparent; }
}


.cta-steps::before {
  content: ''; position: absolute; top: 0; left: 0;
  height: 2px; width: var(--cs-fill, 0%); border-radius: 2px;
  background: linear-gradient(90deg, rgba(216,176,102,0), var(--ember));
  box-shadow: 0 0 10px rgba(216,176,102,.7);
  opacity: var(--cs-on, 0);
  transition: width 1s cubic-bezier(.65,0,.35,1), opacity .45s ease;
  pointer-events: none;
}

.cta-steps::after {
  content: ''; position: absolute; top: 0; left: var(--cs-fill, 0%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ember); transform: translate(-50%,-50%);
  box-shadow: 0 0 14px 3px rgba(216,176,102,.75);
  opacity: var(--cs-on, 0);
  transition: left 1s cubic-bezier(.65,0,.35,1), opacity .45s ease;
  pointer-events: none;
}

.cta-steps.cs-snap::before,
.cta-steps.cs-snap::after { transition: opacity .45s ease; }


.cta-step-num {
  position: relative; overflow: visible;
  transition: border-color .4s, box-shadow .4s, color .4s, transform .4s;
}
.cta-step h3 { transition: color .4s; }
.cta-step.is-active .cta-step-num {
  transform: scale(1.08);
  border-color: var(--ember); color: var(--ember);
  box-shadow: 0 0 18px -2px rgba(216,176,102,.7);
}
.cta-step.is-active h3 { color: var(--ember); }
.cta-step.is-done .cta-step-num { border-color: var(--ember); color: var(--ember); }


.cta-step[data-step="2"] .cs-plane {
  position: absolute; left: 50%; top: 50%; width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px; color: var(--ember); opacity: 0; pointer-events: none;
}
.cta-step[data-step="2"].is-active .cs-plane { animation: cs-plane 1.5s ease-in forwards; }
@keyframes cs-plane {
  0%   { transform: translate(0,0) scale(.5); opacity: 0; }
  22%  { opacity: 1; }
  100% { transform: translate(30px,-26px) scale(1); opacity: 0; }
}


.cta-step[data-step="3"] .cs-num { transition: opacity .35s, transform .35s; }
.cta-step[data-step="3"].is-active .cs-num,
.cta-step[data-step="3"].is-done   .cs-num { opacity: 0; transform: scale(.3); }
.cta-step[data-step="3"] .cs-check {
  position: absolute; inset: 0; margin: auto; width: 1.15rem; height: 1.15rem;
  color: var(--ember); opacity: 0; transition: opacity .3s;
}
.cta-step[data-step="3"].is-active .cs-check,
.cta-step[data-step="3"].is-done   .cs-check { opacity: 1; }
.cta-step[data-step="3"] .cs-check path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.cta-step[data-step="3"].is-active .cs-check path { animation: cs-check .55s .12s ease forwards; }
.cta-step[data-step="3"].is-done   .cs-check path { stroke-dashoffset: 0; }
@keyframes cs-check { to { stroke-dashoffset: 0; } }


@media (max-width: 760px) {
  .cta-steps::before, .cta-steps::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  
  .cta-steps::before, .cta-steps::after,
  .cta-step-num, .cta-step h3, .cta-step .cs-num, .cta-step .cs-check { transition: none; }
  .cta-step .cs-plane { display: none; }
}