/* One four-step graph from first paint through loading, 3D and fallback. */
.client-workflow{margin-top:48px;padding-top:36px;border-top:1px solid #17122044;position:relative}
.workflow-heading{display:block;margin-bottom:20px}
.workflow-heading h3{font-size:clamp(50px,5.3vw,76px);line-height:.94;letter-spacing:-.025em}
.workflow-viewport{--workflow-portrait:0;position:relative;isolation:isolate;min-width:0;height:360px;overflow:hidden;outline-offset:5px;touch-action:pan-y pinch-zoom}
.workflow-viewport:focus-visible{outline:2px solid var(--purple)}
.workflow-viewport[data-workflow-ready=true]{cursor:grab}
.workflow-viewport[data-workflow-dragging=true],.workflow-viewport[data-workflow-dragging=true] .workflow-node{cursor:grabbing}
#workflow-canvas,#workflow-fallback{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y pinch-zoom}
#workflow-canvas{opacity:0;transition:opacity .18s ease}
#workflow-fallback{pointer-events:none;opacity:1;transition:opacity .18s ease}
#workflow-fallback path{fill:none;stroke:#73528d;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.65}
.workflow-route-mobile{display:none}
.workflow-viewport[data-workflow-ready=true] #workflow-canvas{opacity:1}
.workflow-viewport[data-workflow-ready=true] #workflow-fallback{opacity:0}
#workflow-labels{position:absolute;inset:0;pointer-events:none}
.workflow-node{--node-x:var(--node-desktop-x);--node-y:var(--node-desktop-y);position:absolute;left:var(--node-x);top:var(--node-y);transform:translate(-50%,-50%);width:clamp(136px,15vw,180px);min-height:76px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;background:#171220f5;border:1px solid #775694;border-radius:5px;color:var(--bone);text-align:left;line-height:1.3;pointer-events:auto;touch-action:pan-y pinch-zoom;box-shadow:2px 5px 10px #1712201c;transform-origin:center}
.workflow-node-step{font:500 9px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.02em;color:#c6b1df}
.workflow-node-name{font-size:14px;line-height:1.25;font-weight:600}
.workflow-node-meta{font-size:10px;line-height:1.4;color:#ded0e9}
.workflow-node[data-node=creativity]{background:#4f2babf5;border-color:var(--gold)}
.workflow-node[data-node=creativity] .workflow-node-step{color:#f0ce8a}
.workflow-node[data-node=creativity] .workflow-node-name{font-size:16px}
.workflow-node[data-node=learn] .workflow-node-name{font-size:21px;font-variant-numeric:tabular-nums}
.workflow-node[data-node=fee] .workflow-node-name{font-size:23px;font-variant-numeric:tabular-nums;color:#f0ce8a}
.workflow-node[aria-pressed=true]{border-color:var(--gold);outline:1px solid var(--gold);outline-offset:3px}
.workflow-node:hover{border-color:var(--gold)}
.workflow-node:focus-visible{outline:3px solid var(--gold);outline-offset:4px;z-index:100!important}
.workflow-close{display:flex;justify-content:flex-start;margin-top:20px}
.workflow-close .pill{width:auto;min-height:52px;font-size:14px;gap:22px;margin-top:0}
@media(max-width:1000px){.workflow-heading h3{font-size:58px}.workflow-viewport{height:330px}}
@media(max-width:700px){.client-workflow{margin-top:38px;padding-top:30px}.workflow-heading{margin-bottom:14px}.workflow-heading h3{font-size:clamp(46px,13.5vw,68px);line-height:.98}.workflow-viewport{--workflow-portrait:1;height:430px}.workflow-route-desktop{display:none}.workflow-route-mobile{display:block}.workflow-node{--node-x:var(--node-mobile-x);--node-y:var(--node-mobile-y);width:clamp(120px,36vw,142px);min-height:72px;padding:9px 10px;gap:3px}.workflow-node-step{font-size:8px}.workflow-node-name{font-size:12px}.workflow-node-meta{font-size:9px}.workflow-node[data-node=creativity] .workflow-node-name{font-size:14px}.workflow-node[data-node=learn] .workflow-node-name{font-size:20px}.workflow-node[data-node=fee] .workflow-node-name{font-size:22px}.workflow-close .pill{width:100%;margin-top:0}}
@media(max-width:350px){.workflow-heading h3{font-size:44px}.workflow-viewport{height:410px}.workflow-node{padding-inline:8px}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){.workflow-heading h3{font-size:50px}.workflow-viewport{height:330px}}
@media(prefers-reduced-motion:reduce){#workflow-canvas,#workflow-fallback{transition:none}}
@media(forced-colors:active){.workflow-node,.workflow-node[data-node=creativity]{background:Canvas;color:CanvasText;border-color:CanvasText}.workflow-node-step,.workflow-node-meta,.workflow-node[data-node=fee] .workflow-node-name,.workflow-node[data-node=creativity] .workflow-node-step{color:CanvasText}.workflow-node[aria-pressed=true],.workflow-node:focus-visible{outline-color:Highlight;border-color:Highlight}#workflow-fallback path{stroke:CanvasText}}
