.roadmap{--rd:28px;--rg:14px;list-style:none;margin:0;padding:0 0 0 40px;display:grid;gap:var(--rg)}
.rung{position:relative;padding:20px 22px;background:var(--surface-lit);border:1px solid var(--stroke);
  border-top-color:var(--stroke-top);border-radius:var(--r-card)}

.rung::before{content:"";position:absolute;left:-28px;top:var(--rd);bottom:calc(-1 * var(--rg) - var(--rd));
  width:2px;background:var(--blue);opacity:.6;transform-origin:top}
.rung:last-child::before{display:none}

.rung-k{font:500 var(--fs-12)/16px var(--mono);letter-spacing:var(--track-label-13);color:var(--blue-text);
  position:static}
.rung-k::before{content:"";position:absolute;z-index:1;left:-34px;top:calc(var(--rd) - 7px);width:14px;height:14px;
  border-radius:50%;border:2px solid var(--blue);background:var(--bg0)}
.rung::after{content:"";position:absolute;z-index:2;left:-30px;top:calc(var(--rd) - 3px);width:6px;height:6px;
  border-radius:50%;background:var(--blue-text)}
.rung-t{margin:6px 0 0;font-size:1.55rem}
.rung-dl{display:grid;gap:10px;margin:14px 0 0}
.rung-dl dt{font:400 var(--fs-11)/1.5 var(--mono);letter-spacing:var(--track-label-11);text-transform:uppercase;color:var(--faint)}
.rung-dl dd{margin:2px 0 0;font-size:var(--fs-15);line-height:1.55;color:var(--mute);max-width:62ch}
.rung-cost dd{color:var(--text)}
.rung-why{position:relative;margin:14px 0 0;padding-bottom:10px;font-size:var(--fs-14);line-height:1.55;color:var(--mute)}
.rung-why b{color:var(--text);font-weight:600}
.rung-why::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:1px;background:var(--blue);transform-origin:left}
@media (min-width:900px){
  .rung{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:32px;padding:22px 28px}
  .roadmap{--rd:30px}
  .rung-k,.rung-t{grid-column:1}
  .rung-dl{grid-column:2;grid-row:1 / span 3;margin:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
  .rung-why{grid-column:2;margin-top:16px}
}
@media (max-width:560px){
  .roadmap{padding-left:30px}
  .rung{padding:18px 16px}
  .rung::before{left:-22px}
  .rung-k::before{left:-28px}
  .rung::after{left:-24px}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rung{view-timeline:--rung block;view-timeline-inset:0}
    .rung::before{animation:rm-draw linear both;animation-timeline:--rung;
      animation-range:cover calc(50vh + var(--rd)) cover calc(100% - 50vh + var(--rd) + var(--rg))}
    .rung::after{animation:rm-fill linear both;animation-timeline:--rung;
      animation-range:cover calc(50vh + var(--rd) - 3vh) cover calc(50vh + var(--rd))}
    .rung-why::after{animation:rm-rule linear both;animation-timeline:--rung;
      animation-range:cover calc(50vh + var(--rd)) cover calc(50vh + var(--rd) + 24vh)}
  }
}
@keyframes rm-draw{from{transform:scaleY(0)}to{transform:none}}
@keyframes rm-fill{from{transform:scale(0)}to{transform:none}}
@keyframes rm-rule{from{transform:scaleX(0)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .rung::before,.rung::after,.rung-why::after{animation:none}
}
@media print{.rung::before,.rung::after,.rung-k::before,.rung-why::after{display:none}.roadmap{padding-left:0}}