/* First Arrival: every stage is static, semantic, and readable before JS. */
#idea .split{display:block}
#idea .journey-path{display:block;border:0;margin:36px 0 0}
#idea .journey-path li{--offset:0%;display:grid;grid-template-columns:36px minmax(0,1fr);gap:20px;position:relative;border:0!important;background:none;color:var(--text);padding:24px 0 28px calc(32px + var(--offset))!important}
#idea .journey-path li:nth-child(2){--offset:8%}
#idea .journey-path li:nth-child(3){--offset:16%}
#idea .journey-path li:nth-child(4){--offset:24%}
#idea .journey-path li::before,#idea .journey-path li::after{content:'';position:absolute;left:0;right:auto;top:0;bottom:0;width:2px;height:auto;background:var(--line);pointer-events:none}
#idea .journey-path li::after{background:var(--purple);transform:scaleY(var(--arrival-path,0));transform-origin:top;display:block}
#idea .journey-path .journey-branch{position:absolute;left:0;top:39px;width:calc(20px + var(--offset));height:1px;background:var(--purple);opacity:calc(.25 + var(--arrival-emphasis,0)*.6);pointer-events:none}
#idea .journey-path li>span{font:20px/1.5 'Courier New',monospace;margin:0;color:var(--purple);opacity:1;transform:scale(calc(1 + var(--arrival-emphasis,0)*.08));transform-origin:left center}
#idea .journey-path h3{font-size:clamp(22px,2.2vw,30px);font-weight:500;line-height:1.25;margin:0 0 12px;letter-spacing:-.035em}
#idea .journey-path p{font-size:16px;line-height:1.7;color:var(--muted);max-width:55ch;margin:0}
#idea .journey-path li>div{border-left:2px solid transparent;padding-left:12px;border-color:rgb(163 91 255 / calc(var(--arrival-emphasis,0)*.45))}
#idea .journey-path .arrive>div{border-color:rgb(163 91 255 / calc(.12 + var(--arrival-emphasis,0)*.55))}
@media(max-width:650px){
 #idea .journey-path{margin-top:28px}
 #idea .journey-path li{--offset:0%!important;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:20px 0 24px 20px!important}
 #idea .journey-path .journey-branch{width:12px;top:35px}
 #idea .journey-path li>span{font-size:17px}
 #idea .journey-path li>div{padding-left:8px}
 #idea .journey-path h3{font-size:22px;margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){
 #idea .journey-path li>span{transform:none}
 #idea .journey-path li::after{transform:none;opacity:.4}
 #idea .journey-path .journey-branch{opacity:.5}
}

/* Only the boundary from principles to practical options: retain components. */
#approach.section{padding-bottom:clamp(44px,4.6vw,64px)}
#approach + #builds.section{padding-top:clamp(44px,4.6vw,64px)}
#approach + #builds>.eyebrow{margin-bottom:24px}