.flow{border-top:1px solid var(--rule);--pad:clamp(36px, 5vh, 52px);--node:14px;--node-top:9px;padding:0;list-style:none}.flow li{padding:var(--pad) 0;border-bottom:1px solid var(--rule);--glow:color-mix(in srgb, var(--c) 60%, transparent);--glow-shadow:0 0 10px 2px var(--glow), 0 0 32px 6px var(--glow);--focus-delay:calc(var(--n) * .35s + .6s + var(--i) * 1s);grid-template-columns:56px 1fr 1.7fr;align-items:start;gap:20px clamp(24px,3vw,40px);display:grid;position:relative}.flow .node{width:var(--node);height:var(--node);margin-top:var(--node-top);z-index:1;background:var(--c);transition:transform .3s steps(3) calc(var(--i) * .35s), scale .45s ease, box-shadow .45s ease;display:block;position:relative;transform:scale(0)}.flow.in .node{animation:node-focus calc(var(--n) * 1s) ease-in-out var(--focus-delay) infinite;transform:scale(1)}@keyframes node-focus{0%,24%,to{scale:1;box-shadow:0 0 #0000}10%{box-shadow:var(--glow-shadow);scale:1.6}}.flow .node:before,.flow .node:after{content:"";border:2px solid var(--c);opacity:0;pointer-events:none;position:absolute;inset:0}.flow.in .node:before,.flow.in .node:after{animation:node-ripple calc(var(--n) * 1s) steps(1) var(--focus-delay) infinite}.flow.in .node:after{animation-delay:calc(var(--focus-delay) + .2s)}@keyframes node-ripple{0%{opacity:.9;animation-timing-function:steps(6,end);scale:1}24%,to{opacity:0;scale:3.4}}@media (hover:hover){.flow:hover .node,.flow:hover .node:before,.flow:hover .node:after{animation:none}.flow li:hover .node{box-shadow:var(--glow-shadow);scale:1.6}.flow li:hover .node:before,.flow li:hover .node:after{animation:1.2s steps(6,end) infinite node-ripple-loop}.flow li:hover .node:after{animation-delay:.4s}}@media (hover:none){.flow:has(.tapped) .node,.flow:has(.tapped) .node:before,.flow:has(.tapped) .node:after{animation:none}.flow li.tapped .node{box-shadow:var(--glow-shadow);scale:1.6}.flow li.tapped .node:before,.flow li.tapped .node:after{animation:1.2s steps(6,end) infinite node-ripple-loop}.flow li.tapped .node:after{animation-delay:.4s}}@keyframes node-ripple-loop{0%{opacity:.9;scale:1}to{opacity:0;scale:3.4}}.flow li:not(:last-child):after{content:"";left:calc(var(--node) / 2 - 1px);top:calc(var(--pad) + var(--node-top) + var(--node));width:2px;height:calc(100% - var(--node));background:color-mix(in srgb, var(--ink) 35%, transparent);transform-origin:top;transition:transform .3s steps(6) calc(var(--i) * .35s + .2s);position:absolute;transform:scaleY(0)}.flow.in li:after{transform:scaleY(1)}.flow h3{letter-spacing:.04em;font-size:clamp(18px,1.8vw,22px);font-weight:700;line-height:1.6}.flow p{letter-spacing:.03em;opacity:.72;font-size:16px;line-height:2}@media (width<=760px){.flow li{grid-template-columns:44px 1fr}.flow p{grid-column:2}}@media (prefers-reduced-motion:reduce){.flow .node,.flow .node:before,.flow .node:after,.flow li:after{transition:none;transform:none;animation:none!important}}