/* Ledger & Ink: an editorial workflow illustration, not a live client dashboard. */
.motion-jump{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:var(--ink);font-size:14px;text-decoration:underline;text-underline-offset:5px}
.motion-jump svg{color:var(--teal);transition:transform .25s ease}.motion-jump:hover svg{transform:translateX(4px)}
.flow-figure{position:relative;margin:0 0 44px;border:1px solid #31506a;border-radius:20px;background:#10213f;color:#edf1f3;overflow:hidden;isolation:isolate;contain:layout paint}
.flow-figure::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 49.8%,#263a53 50%,transparent 50.2%),linear-gradient(transparent 49.8%,#263a53 50%,transparent 50.2%);background-size:52px 52px;opacity:.3;pointer-events:none}
.flow-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 28px;border-bottom:1px solid #34475f}
.flow-top p{margin:0;font:500 12px/1.6 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#b6c7d8}
.flow-top strong{font:400 23px/1.2 var(--serif);color:#fff}
.flow-scene{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:36px 22px 26px;gap:18px}
.flow-route{position:absolute;top:90px;left:calc(12.5% + 11px);right:calc(12.5% + 11px);height:2px;background:#445970;z-index:0;overflow:hidden}
.flow-route i{display:block;height:100%;background:#89d4d5;transform-origin:left;transform:scaleX(1)}
.flow-stage{position:relative;text-align:center;min-width:0;--delay:calc(var(--stage) * .85s)}
.flow-orbit{position:relative;display:grid;place-items:center;width:110px;height:110px;margin:0 auto 20px;border:1px solid #527183;border-radius:26px;background:#162e49;box-shadow:0 8px 28px #07142655;transform-origin:center}
.flow-orbit::after{content:"";position:absolute;inset:-7px;border:1px solid #81cccd;border-radius:32px;opacity:0;pointer-events:none}
.flow-icon{width:64px;height:64px;fill:none;stroke:#b5e5df;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.flow-icon .paper{fill:#203e58;stroke:#8fb8c9}.flow-icon .accent{stroke:#e9b88b}.flow-icon .wash{stroke:none;fill:#2f6671}
.flow-stage .flow-no{display:block;font:500 10px/1.5 var(--mono);color:#a1c7d0;letter-spacing:.12em;margin-bottom:7px}
.flow-stage h3{font:400 22px/1.2 var(--serif);color:#fff;margin:0 0 8px}
.flow-stage p{font:400 13px/1.6 var(--sans);color:#c5d1dd;margin:0 auto;max-width:185px}
.flow-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;min-height:78px;padding:18px 28px;border-top:1px solid #34475f}
.flow-bottom figcaption{font-size:12px;line-height:1.6;color:#b6c7d8;max-width:460px}
.flow-controls{display:flex;gap:8px;flex-wrap:wrap}.flow-controls[hidden]{display:none}
.flow-controls button{font:500 12px/1.3 var(--sans);color:#eef6f5;background:#1f3c55;padding:10px 14px;border:1px solid #69899a;border-radius:999px;cursor:pointer;min-height:38px}
.flow-controls button:hover:not(:disabled){background:#315c6c}.flow-controls button:focus-visible,.motion-jump:focus-visible{outline:3px solid #e9b88b;outline-offset:4px}.flow-controls button:disabled{cursor:default;color:#b7c7ce;background:transparent}
.motion-playing{animation:fc-flow-clock 4.7s linear both}
.motion-playing .flow-route i{animation:fc-flow-progress 4.7s cubic-bezier(.3,.05,.3,1) both}
.motion-playing .flow-orbit{animation:fc-flow-arrive .75s var(--delay) cubic-bezier(.2,.75,.2,1) both}
.motion-playing .flow-orbit::after{animation:fc-flow-ring 1s calc(var(--delay) + .25s) ease-out both}
.motion-playing .flow-icon .ink{stroke-dasharray:100;stroke-dashoffset:0;animation:fc-flow-ink 1s calc(var(--delay) + .3s) ease both}
.motion-playing .flow-icon .sheet{transform-box:fill-box;transform-origin:center;animation:fc-flow-sheet .9s calc(var(--delay) + .15s) ease both}
.motion-paused,.motion-paused *,.motion-paused *::after{animation-play-state:paused!important}
.motion-still,.motion-still *,.motion-still *::after{animation:none!important}
@keyframes fc-flow-clock{from{opacity:1}to{opacity:1}}
@keyframes fc-flow-progress{0%{transform:scaleX(0)}85%,100%{transform:scaleX(1)}}
@keyframes fc-flow-arrive{from{transform:translateY(12px) scale(.92);opacity:.55}to{transform:none;opacity:1}}
@keyframes fc-flow-ring{from{transform:scale(.94);opacity:.65}to{transform:scale(1.14);opacity:0}}
@keyframes fc-flow-ink{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes fc-flow-sheet{from{transform:translateY(6px) rotate(-5deg)}to{transform:none}}
@media(max-width:700px){.flow-top,.flow-bottom{padding:20px}.flow-scene{grid-template-columns:1fr 1fr;padding:28px 16px;gap:30px 14px}.flow-route{top:0;bottom:0;left:50%;right:auto;width:1px;height:auto;background:#34475f}.flow-route i{display:none}.flow-orbit{width:88px;height:88px;border-radius:22px;margin-bottom:16px}.flow-icon{width:53px;height:53px}.flow-stage h3{font-size:20px}.flow-stage p{font-size:12px}.flow-bottom{min-height:136px}.flow-top strong{font-size:22px}.motion-playing .flow-route i{animation:none}}
@media(prefers-reduced-motion:reduce){.flow-figure,.flow-figure *,.flow-figure *::after,.motion-jump svg{animation:none!important;transition:none!important}}
@media print{.flow-controls,.motion-jump{display:none!important}.flow-figure *,.flow-figure *::after{animation:none!important}.flow-figure{break-inside:avoid}}