.process{--size-step:32px;--step-ring:4px;--width-vertical-line:4px;--marker-center:calc(var(--size-step)/2);--marker-spacing:clamp(16px,4.2vw,var(--size-step));& .list{counter-reset:step;list-style:none;margin:var(--spacing-compact) auto;padding:var(--content-spacing) 0 0;position:relative;&:before{background:linear-gradient(180deg,#0e4433 84%,transparent);border-radius:16px;bottom:0;content:"";left:calc(var(--marker-center) - var(--width-vertical-line)/2 + 1px);position:absolute;top:4px;width:var(--width-vertical-line)}}& .step{position:relative;& .step-header{align-items:center;display:grid;gap:0 var(--marker-spacing);grid-template-columns:var(--size-step) 1fr}& .step-label{text-box-edge:cap alphabetic;text-box-trim:trim-both}& .step-marker{align-items:center;background:var(--background-color);border-radius:50%;box-shadow:0 0 0 var(--step-ring) #0e4433;color:var(--text-color);counter-increment:step;display:flex;height:var(--size-step);justify-content:center;width:var(--size-step);&:before{content:counter(step);font-feature-settings:"tnum";font-size:var(--font-size-body);font-weight:var(--font-weight-bold)}}& .step-list{gap:8px var(--marker-spacing);grid-template-columns:var(--size-step) 1fr;list-style:none}& .step-list li{--size-dot:12px;align-items:center;background:#fff;border-radius:4px;display:grid;gap:8px;grid-column-start:2;grid-template-columns:var(--size-dot) 1fr;padding:12px 0 12px 8px;position:relative;& p{text-box-edge:cap alphabetic;text-box-trim:trim-both}&:before{background:var(--color-forest-green);border-radius:50%;content:"";display:block;height:var(--size-dot);width:var(--size-dot)}}}}