/* VA20Four7 v11.8 — homepage animated step-number legibility fix
   Scope: homepage "Start focused" process only. No content/markup changes. */

body.home .home840-start-steps{
  --va118-step-size:56px;
  --va118-step-radius:17px;
  --va118-step-ink:#17314f;
  --va118-step-muted:#60748d;
  --va118-step-border:#d8e1ec;
  --va118-step-fill:#f8fafe;
  --va118-step-active:#0d2d4d;
}

/* Keep the progress rule behind the numbered controls and exactly centred. */
body.home .home840-start-steps .home840-progress-line{
  left:calc(var(--va118-step-size) / 2 - 1px)!important;
  top:calc(var(--va118-step-size) / 2)!important;
  bottom:calc(var(--va118-step-size) / 2)!important;
  width:2px!important;
  z-index:0!important;
  background:#dfe7f1!important;
  border-radius:999px!important;
  overflow:hidden!important;
}
body.home .home840-start-steps .home840-progress-line>i{
  width:100%!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#527df1 0%,#7069ea 100%)!important;
  box-shadow:none!important;
}

body.home .home840-start-steps article{
  grid-template-columns:var(--va118-step-size) minmax(0,1fr)!important;
  gap:22px!important;
  align-items:start!important;
}

/* Inactive numbers must still look intentional and fully readable. */
body.home .home840-start-steps article>span{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:var(--va118-step-size)!important;
  min-width:var(--va118-step-size)!important;
  height:var(--va118-step-size)!important;
  min-height:var(--va118-step-size)!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  border:1px solid var(--va118-step-border)!important;
  border-radius:var(--va118-step-radius)!important;
  background:var(--va118-step-fill)!important;
  color:var(--va118-step-muted)!important;
  -webkit-text-fill-color:var(--va118-step-muted)!important;
  font-family:var(--va-type-family,"Manrope",sans-serif)!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
  opacity:1!important;
  box-shadow:0 1px 2px rgba(13,45,77,.025)!important;
  transform:none!important;
  transition:
    background-color .24s cubic-bezier(.22,1,.36,1),
    border-color .24s cubic-bezier(.22,1,.36,1),
    color .24s cubic-bezier(.22,1,.36,1),
    box-shadow .24s cubic-bezier(.22,1,.36,1)!important;
}

/* Active state changes colour only — no size jump or layout shift. */
body.home .home840-start-steps article.is-active>span{
  background:var(--va118-step-active)!important;
  border-color:var(--va118-step-active)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 7px 18px rgba(13,45,77,.14)!important;
  opacity:1!important;
  transform:none!important;
}

/* Prevent inherited reveal/opacity rules from making a number look disabled. */
body.home .home840-start-steps article>span[style]{
  visibility:visible!important;
}

@media (max-width:767px){
  body.home .home840-start-steps{
    --va118-step-size:48px;
    --va118-step-radius:15px;
  }
  body.home .home840-start-steps article{
    gap:15px!important;
  }
  body.home .home840-start-steps article>span{
    font-size:12px!important;
  }
}

@media (max-width:420px){
  body.home .home840-start-steps{
    --va118-step-size:44px;
    --va118-step-radius:14px;
  }
  body.home .home840-start-steps article{
    gap:13px!important;
  }
}