.workflow-story{--workflow-active: #ff6b4a;position:relative;display:flex;flex-direction:column;justify-content:center;gap:1rem;min-width:0;margin:0;padding:1.5rem 2rem 1.5rem 0}.workflow-stage{position:relative;overflow:hidden}.workflow-stage-caption{position:absolute;top:1rem;left:1.2rem;z-index:1;display:flex;align-items:center;gap:0.5rem;color:var(--ink-soft);font-size:0.875rem;font-weight:500}.workflow-stage-caption>span:first-child{width:6px;height:6px;border-radius:50%;background:var(--workflow-active)}.workflow-map{display:block;width:100%;max-height:calc((100svh - 12rem) / 2)}.workflow-map--mobile{display:none}.workflow-story[data-motion="on"] .workflow-map{max-height:calc(100svh - 9rem)}.workflow-story[data-motion="on"] .workflow-static-solution{display:none}.workflow-static-solution{--workflow-active: #08766d}.workflow-route{fill:none;stroke:var(--workflow-active);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:4 9;opacity:0.45}.workflow-node-box{fill:var(--paper);stroke:var(--line);stroke-width:1.5}.workflow-icon{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.workflow-node-label{fill:var(--ink);font-size:18px;font-weight:600;text-anchor:middle;letter-spacing:-0.4px}.workflow-node-note{fill:var(--ink-soft);font-size:16px;text-anchor:middle;paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}.workflow-halo{fill:var(--workflow-active);fill-opacity:0.1}.workflow-alert{fill:var(--accent);stroke:var(--paper);stroke-width:2}.workflow-alert-mark{fill:var(--ink);font-size:13px;font-weight:700;text-anchor:middle}.workflow-owner-signal{fill:var(--attention);stroke:var(--paper);stroke-width:2}.workflow-tick{fill:none;stroke:var(--white);stroke-width:2;stroke-linecap:round}.workflow-token{fill:var(--workflow-active);stroke:var(--paper);stroke-width:2}.workflow-token-lines{fill:none;stroke:var(--white);stroke-width:1.1;stroke-linecap:round}.workflow-system-event{fill:var(--ink-soft);font-size:15px;font-weight:500;text-anchor:middle}.workflow-story[data-state="connected"]{--workflow-active: #08766d}.workflow-story[data-state="connected"] .workflow-route,.workflow-static-solution .workflow-route{stroke-dasharray:none;opacity:0.6}.workflow-story[data-state="connected"] .workflow-node-box,.workflow-static-solution .workflow-node-box{stroke:var(--attention)}.workflow-story[data-state="connected"] .workflow-system-event,.workflow-static-solution .workflow-system-event{fill:var(--attention)}.hero-pin:has(.workflow-story:not([data-motion="on"])){height:auto;min-height:calc(100svh - 4.7rem)}.hero-pin:has(.workflow-story:not([data-motion="on"])) .hero-message{align-self:start}.workflow-story:not([data-motion="on"]) .workflow-map{max-height:none}@media (max-width: 62rem){.workflow-story{padding:2rem var(--gutter);border-top:1px solid var(--line)}.workflow-map,.workflow-story[data-motion="on"] .workflow-map{max-height:none}}@media (max-width: 40rem){.workflow-story{padding:1.5rem 0.5rem}.workflow-map--desktop{display:none}.workflow-map--mobile{display:block}.workflow-map--mobile .workflow-node-label{font-size:18px}.workflow-map--mobile .workflow-node-note{font-size:15px}}@media (prefers-reduced-motion: reduce){.workflow-story[data-motion="on"] .workflow-static-solution{display:block}.workflow-story[data-motion="on"] .workflow-map{max-height:none}.hero-pin:has(.workflow-story){height:auto}.hero-pin:has(.workflow-story) .hero-message{align-self:start}}
