.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:clamp(2rem,3.5vw,2.8rem); }
.step{ position:relative; padding:0 clamp(1.1rem,2vw,1.8rem) 0 0; }
.step__bar{ position:relative; height:1px; background:var(--paper-3); margin-bottom:1.6rem; }
.step__bar::before{
  content:""; position:absolute; left:0; top:0; height:1px; width:0; background:var(--gold);
  transition:width .9s var(--ease-out);
}
.step.is-in .step__bar::before{ width:100%; }
.step__dot{
  position:absolute; left:0; top:-3.5px; width:8px; height:8px; border-radius:50%;
  background:var(--paper); border:1px solid var(--paper-3);
  transition:background .5s var(--ease) .3s, border-color .5s var(--ease) .3s, transform .5s var(--ease-out) .3s;
}
.step.is-in .step__dot{ background:var(--gold); border-color:var(--gold); transform:scale(1.15); }
.step__n{ font-size:.7rem; font-weight:700; letter-spacing:.18em; color:var(--gold); }
.step h3{ font-family:var(--font-display); font-size:var(--step-2); margin-top:.9rem; }
.step p{ margin-top:.85rem; color:var(--text-2); font-size:.92rem; line-height:1.62; }

@media (max-width:1080px){
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:1.5rem; }
}
@media (max-width:640px){
  .steps{ grid-template-columns:1fr; }
  .step{ padding-right:0; }
}