/* Stages: icon circles joined by a line that draws in when the list enters (.is-in from the core reveal).
   The line runs sand → wine: earlier entry, lower operating cost. Phones: vertical. */
.sdo-w--steps .sdo-sp{position:relative;list-style:none;margin:clamp(36px,6vw,64px) 0 0;padding:0;display:grid;gap:clamp(30px,6vw,44px)}
.sdo-w--steps .sdo-sp__line{position:absolute;inset-inline-start:39px;top:40px;bottom:var(--sp-tail,40px);width:2px;background:var(--sdo-line)}
.sdo-w--steps .sdo-sp__line i{position:absolute;inset:0;background:linear-gradient(180deg,var(--sdo-sand),var(--sdo-accent));transform:scaleY(0);transform-origin:top;transition:transform 1.8s var(--sdo-ease) .3s}
.sdo-w--steps .sdo-sp.is-in .sdo-sp__line i{transform:scaleY(1)}
.sdo-w--steps .sdo-sp__s{position:relative;display:grid;grid-template-columns:80px minmax(0,1fr);gap:22px;align-items:start;opacity:0;transform:translate3d(0,18px,0);transition:opacity .9s var(--sdo-ease),transform 1s var(--sdo-ease);transition-delay:calc(.25s + var(--k) * .35s)}
.sdo-w--steps .sdo-sp.is-in .sdo-sp__s{opacity:1;transform:none}
.sdo-w--steps .sdo-sp__c{position:relative;z-index:1;display:grid;place-items:center;width:80px;height:80px;border-radius:50%;font-size:32px;color:var(--sdo-accent);background:var(--sdo-surface);border:1px solid color-mix(in srgb,var(--sdo-sand) 55%,transparent);box-shadow:0 0 0 8px var(--sdo-surface),0 18px 40px -24px color-mix(in srgb,var(--sdo-wine) 60%,transparent);transition:background .8s var(--sdo-ease),color .8s var(--sdo-ease)}
.sdo-w--steps .sdo-sp__s:hover .sdo-sp__c{background:var(--sdo-accent);color:var(--sdo-accent-ink)}
.sdo-w--steps .sdo-sp__b{padding-top:8px}
.sdo-w--steps .sdo-sp__n{display:block;font-size:.82rem;letter-spacing:.12em;color:var(--sdo-sand-deep);font-variant-numeric:tabular-nums}
.sdo-tone--dark.sdo-w--steps .sdo-sp__n{color:var(--sdo-sand)}
.sdo-w--steps .sdo-sp__en{display:block;margin-top:2px;font-size:.66rem;letter-spacing:.22em;color:var(--sdo-sand-deep)}
.sdo-tone--dark.sdo-w--steps .sdo-sp__en{color:var(--sdo-sand)}
.sdo-w--steps .sdo-sp__b h3{margin:.25em 0 .35em;font-family:var(--sdo-head-ff);font-size:clamp(1.45rem,3vw,2rem);font-weight:700;line-height:1.3;color:var(--sdo-ink)}
.sdo-w--steps .sdo-sp__b p{margin:0;max-width:26em;line-height:1.95;color:var(--sdo-muted);text-wrap:pretty}
.sdo-w--steps .sdo-sp__more{margin-top:clamp(32px,5vw,52px)}
@media(min-width:900px){
	.sdo-w--steps .sdo-sp{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(28px,4vw,56px)}
	.sdo-w--steps .sdo-sp__line{inset-inline:calc(100% / var(--n,3) / 2);top:52px;bottom:auto;width:auto;height:2px}
	.sdo-w--steps .sdo-sp__line i{background:linear-gradient(90deg,var(--sdo-accent),var(--sdo-sand));transform:scaleX(0);transform-origin:right center}
	html:not([dir=rtl]) .sdo-w--steps .sdo-sp__line i{background:linear-gradient(90deg,var(--sdo-sand),var(--sdo-accent));transform-origin:left center}
	.sdo-w--steps .sdo-sp.is-in .sdo-sp__line i{transform:scaleX(1)}
	.sdo-w--steps .sdo-sp__s{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px}
	.sdo-w--steps .sdo-sp__c{width:104px;height:104px;font-size:40px}
	.sdo-w--steps .sdo-sp__b p{margin-inline:auto}
	.sdo-w--steps.sdo-al--start .sdo-sp__more{text-align:start}
}
.sdo-al--center .sdo-sp__more{text-align:center}
.sdo-editor .sdo-w--steps .sdo-sp__s{opacity:1;transform:none}
.sdo-editor .sdo-w--steps .sdo-sp__line i{transform:none}
@media (prefers-reduced-motion:reduce){.sdo-w--steps .sdo-sp__s{opacity:1;transform:none;transition:none}.sdo-w--steps .sdo-sp__line i{transform:none;transition:none}}