.hw{position:relative;isolation:isolate} 
.dv-steps{position:relative;margin:0;padding:0 0 0 96px;list-style:none}
.dv-steps::before,.dv-steps::after{content:"";position:absolute;z-index:-1;left:27px;top:var(--a0,0);width:2px;height:var(--full,0);border-radius:1px;background:#d2d2d7}
.dv-steps::after{height:var(--len,0);background:linear-gradient(180deg,#FF9459,var(--neu) 120px)}
.hw-tip{position:absolute;z-index:-1;left:22px;top:calc(var(--a0,0px) + var(--len,0px) - 6px);width:12px;height:12px;border-radius:50%;background:var(--neu);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--neu) 18%,transparent),0 0 16px 2px color-mix(in srgb,var(--neu) 55%,transparent);opacity:0;transition:opacity .3s var(--ease)}
.hw-tip.on{opacity:1}

.dv-steps li{position:relative;display:grid;grid-template-columns:auto minmax(0,1.25fr) minmax(0,1fr);gap:var(--s-24) var(--s-40);align-items:start;padding:var(--s-40);
  border-radius:var(--r-card);background:#fff;box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .5s var(--ease),translate .5s var(--ease)}
.dv-steps li+li{margin-top:var(--s-20)}
.dv-steps li.cur{box-shadow:0 18px 48px rgba(0,0,0,.08);translate:0 -2px}
html.js-rv .dv-steps li.rv-item{transition:opacity var(--reveal-fade) var(--ease-reveal),transform var(--reveal-move) var(--ease-reveal),box-shadow .5s var(--ease),translate .5s var(--ease);
  transition-delay:var(--d,0ms),var(--d,0ms),0ms,0ms}

.hw-n{position:absolute;z-index:1;left:-96px;top:var(--s-40);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #d2d2d7;
  color:var(--ink2);font:600 20px/1 var(--font-sans);font-variant-numeric:tabular-nums;transition:background-color .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease)}
.hw-n::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--neu);opacity:0;pointer-events:none}
li.on .hw-n{background:var(--neu);box-shadow:inset 0 0 0 2px var(--neu),0 8px 20px color-mix(in srgb,var(--neu) 35%,transparent);color:#fff;animation:hw-pop .55s cubic-bezier(.3,1.7,.5,1)}
li.on .hw-n::after{animation:hw-wave .9s cubic-bezier(.2,.7,.3,1)}
@keyframes hw-pop{0%{scale:1}35%{scale:1.16}100%{scale:1}}
@keyframes hw-wave{from{opacity:.6;scale:1}to{opacity:0;scale:1.7}}

.hw-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--neu) 10%,#fff);color:var(--neu);
  transition:background-color .4s var(--ease),color .4s var(--ease)}
.hw-ic svg{width:26px;height:26px}
li.cur .hw-ic{background:var(--neu);color:#fff}
li.cur .hw-ic svg{animation:hw-nod .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes hw-nod{0%{scale:.6;rotate:-12deg}100%{scale:1;rotate:0deg}}

.dv-st{display:flex;flex-direction:column;gap:var(--s-8)}
.dv-st h3{font:var(--text-title2);letter-spacing:var(--track-title2)}
.dv-st p{font:var(--text-body);letter-spacing:var(--track-body);color:var(--ink2);text-wrap:pretty}
.dv-meta{display:grid;gap:var(--s-20);margin:0;padding-left:var(--s-40);border-left:1px solid #e8e8ed}
.dv-meta dt{display:flex;align-items:center;gap:6px;font:400 13px/18px var(--font-sans);color:var(--ink2)}
.hw-dt{flex:none;width:16px;height:16px;color:var(--neu)}
.dv-meta dd{margin:6px 0 0;font:600 17px/22px var(--font-sans);letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}

@media (max-width:1068px){
  .dv-steps li{grid-template-columns:auto minmax(0,1fr)}
  .dv-meta{grid-column:2;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-card);padding:var(--s-20) 0 0;border-left:0;border-top:1px solid #e8e8ed}
}
@media (max-width:734px){
  .dv-steps{padding-left:52px}
  .dv-steps::before,.dv-steps::after{left:17px}
  .hw-tip{left:12px}
  .dv-steps li{grid-template-columns:minmax(0,1fr);gap:var(--s-16);padding:var(--s-24)}
  .dv-steps li+li{margin-top:var(--s-12)}
  .hw-n{left:-52px;top:var(--s-24);width:36px;height:36px;font-size:15px}
  .hw-ic{width:40px;height:40px;border-radius:12px}
  .hw-ic svg{width:22px;height:22px}
  .dv-meta{grid-column:auto;grid-template-columns:minmax(0,1fr);gap:var(--s-16)}
  .dv-st h3{font-size:21px;line-height:26px}
}
@media (prefers-reduced-motion:reduce){
  .dv-steps li,.hw-n,.hw-ic,.hw-tip{transition:none}
  li.on .hw-n,li.on .hw-n::after,li.cur .hw-ic svg{animation:none}
  .dv-steps li.cur{translate:none}
}
