/* The workflow scene is explanatory artwork, not a product screenshot or client result. */
.v-flow{--v-cobalt:#8ea4ff;--v-ice:#c8d9ff;--v-phase-progress:0;position:relative;isolation:isolate;color:#fff;border:1px solid rgba(215,229,255,.27);border-radius:22px;background:linear-gradient(148deg,rgba(15,28,53,.82),rgba(15,28,53,.44) 60%,rgba(34,54,78,.8));box-shadow:0 35px 80px -35px rgba(2,10,28,.64);overflow:hidden;max-width:660px;text-align:left}
.v-flow::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(205,222,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(205,222,255,.045) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(transparent,#000 30%,#000 75%,transparent);pointer-events:none}
.v-flow__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 24px;border-bottom:1px solid rgba(215,229,255,.16);font-size:13px;letter-spacing:.015em;font-weight:500}
.v-flow__bar>span{display:inline-flex;align-items:center;gap:9px}
.v-flow__live{display:inline-block;width:6px;height:6px;border-radius:50%;background:#b0c2ff;box-shadow:0 0 0 5px rgba(176,194,255,.10)}
.v-flow__pause{display:inline-flex;align-items:center;gap:10px;color:#d9e4ff;background:rgba(255,255,255,.04);border:1px solid rgba(215,229,255,.25);border-radius:30px;min-height:34px;min-width:82px;padding:4px 12px;font:inherit;font-size:11px;cursor:pointer}
.v-flow__pause[hidden]{display:none}
.v-flow__pause:hover{color:#fff;background:rgba(255,255,255,.11)}
.v-flow__pause:focus-visible{outline:2px solid #fff;outline-offset:4px}
.v-flow__map{position:relative;width:100%;min-width:0;aspect-ratio:600/450;min-height:320px;max-height:470px}
.v-flow__routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.v-flow__route{stroke:rgba(205,222,255,.28);stroke-width:1.5}
.v-flow__trace{stroke:#adc2ff;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.25s cubic-bezier(.22,1,.36,1)}
.v-flow[data-phase="read"] .v-flow__trace--one,.v-flow[data-phase="review"] .v-flow__trace--one,.v-flow[data-phase="connect"] .v-flow__trace{stroke-dashoffset:0}
.v-flow[data-phase="review"] .v-flow__trace--two{stroke-dashoffset:0;stroke:#efc28c}
.v-flow__packet{fill:#fff;opacity:0;filter:drop-shadow(0 0 5px #8da7ff)}
.v-flow__packet--two{fill:#f6d7ac;filter:drop-shadow(0 0 5px #daa96c)}
.v-flow__node{position:absolute;border:1px solid rgba(197,217,255,.38);border-radius:12px;background:linear-gradient(135deg,rgba(27,43,68,.96),rgba(18,33,56,.95));box-shadow:0 12px 25px -10px rgba(0,0,0,.5);display:flex;flex-direction:column;transition:border-color .5s ease,box-shadow .5s ease,background .5s ease;overflow:hidden}
.v-flow__input{left:6%;top:14%;width:34%;height:24%;min-height:100px;padding:13px 15px;gap:7px}
.v-flow__eyebrow{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:400;letter-spacing:.06em;color:#becdeb;text-transform:uppercase}
.v-flow__node strong{font-size:14px;line-height:1.22;font-weight:500;letter-spacing:-.015em;color:#fff}
.v-flow__document{display:grid;gap:5px;width:78%;margin-top:auto}
.v-flow__document i{display:block;height:2px;background:rgba(196,215,250,.28);border-radius:3px}
.v-flow__document i:nth-child(2){width:83%}.v-flow__document i:nth-child(3){width:55%}
.v-flow__scan{position:absolute;inset:8px 0 auto;height:1px;background:linear-gradient(90deg,transparent,#bdd0ff,transparent);box-shadow:0 0 18px 7px rgba(123,159,255,.24);opacity:0;pointer-events:none;animation:v-scan 2.2s linear infinite paused}
.v-flow__core{left:43%;top:37%;width:25%;height:24%;min-height:100px;align-items:center;justify-content:center;gap:5px;border-color:rgba(175,190,255,.9);background:linear-gradient(140deg,rgba(78,96,208,.94),rgba(44,63,154,.97));box-shadow:0 0 45px -10px rgba(115,143,255,.55),inset 0 0 25px rgba(183,200,255,.13);overflow:visible}
.v-flow__core>span:last-child{font-size:8px;letter-spacing:.01em;color:#d5defa;white-space:nowrap}
.v-flow__spark{font-size:30px;line-height:1;color:#ebf0ff;display:block;animation:v-spark 18s linear infinite paused}
.v-flow__orbit{position:absolute;inset:-13px;border:1px solid rgba(150,174,255,.2);border-radius:20px;pointer-events:none;animation:v-orbit 3.8s ease-in-out infinite paused}
.v-flow__output{left:65%;top:68%;width:29%;height:23%;min-height:106px;padding:12px 13px;gap:8px}
.v-flow__outcome{font-size:8px;line-height:1.45;color:#d0ddf6;display:flex;gap:5px;align-items:flex-start}
.v-flow__outcome i{display:block;flex-shrink:0;margin-top:3px;width:4px;height:4px;border-radius:50%;background:#dfb17a}
.v-flow__context{position:absolute;left:42%;top:65%;font:8px/1.4 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.07em;color:#b7c7e2}
.v-flow[data-phase="receive"] .v-flow__input{border-color:#c1d0ff;box-shadow:0 0 28px -6px rgba(162,187,255,.22)}
.v-flow[data-phase="read"] .v-flow__scan{opacity:1}
.v-flow[data-phase="read"] .v-flow__core{box-shadow:0 0 55px -7px rgba(153,176,255,.75),inset 0 0 25px rgba(183,200,255,.2)}
.v-flow[data-phase="review"] .v-flow__output{border-color:#e4b47c;box-shadow:0 0 30px -8px rgba(236,182,117,.26)}
.v-flow[data-phase="connect"] .v-flow__output{border-color:#afdccf;box-shadow:0 0 30px -8px rgba(153,222,204,.22)}
.v-flow[data-phase="connect"] .v-flow__outcome i{background:#a7dece}
.v-flow.is-running .v-flow__spark,.v-flow.is-running .v-flow__orbit,.v-flow.is-running .v-flow__scan{animation-play-state:running}
.v-flow__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 24px;font-size:10px;line-height:1.4;color:#b8c8e8}
.v-flow__steps>span{position:relative;padding-top:12px;padding-bottom:4px}
.v-flow__steps>span::before,.v-flow__steps>span::after{content:"";position:absolute;inset:0 0 auto;height:2px;border-radius:2px;background:rgba(201,220,255,.23)}
.v-flow__steps>span::after{transform:scaleX(0);transform-origin:left;background:#d3dfff}
.v-flow[data-phase="receive"] [data-v-step="receive"],.v-flow[data-phase="read"] [data-v-step="read"],.v-flow[data-phase="review"] [data-v-step="review"],.v-flow[data-phase="connect"] [data-v-step="connect"]{color:#fff}
.v-flow.is-enhanced[data-phase="receive"] [data-v-step="receive"]::after,.v-flow.is-enhanced[data-phase="read"] [data-v-step="read"]::after,.v-flow.is-enhanced[data-phase="review"] [data-v-step="review"]::after,.v-flow.is-enhanced[data-phase="connect"] [data-v-step="connect"]::after{transform:scaleX(var(--v-phase-progress))}
.v-flow__caption{padding:0 24px;margin:20px 0 22px!important;font-size:10px!important;line-height:1.65!important;max-width:490px;color:#c3d0e6!important}
.v-reveal{transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1);transition-delay:var(--v-delay,0ms)}
.v-reveal-pending{opacity:0;transform:translateY(22px)}
@keyframes v-scan{0%{transform:translateY(0)}100%{transform:translateY(110px)}}
@keyframes v-spark{to{transform:rotate(360deg)}}
@keyframes v-orbit{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.035);opacity:1}}
@media(max-width:600px){.v-flow{border-radius:16px}.v-flow__bar{padding:17px 18px;font-size:12px}.v-flow__input{padding:10px 11px;gap:5px;min-height:86px}.v-flow__node strong{font-size:12px}.v-flow__eyebrow{font-size:7px}.v-flow__core{gap:4px;min-height:88px}.v-flow__spark{font-size:24px}.v-flow__core>span:last-child{font-size:6px}.v-flow__output{padding:9px 10px;gap:5px;min-height:94px}.v-flow__outcome{font-size:7px}.v-flow__context{font-size:6px}.v-flow__steps{padding:0 18px;gap:8px;font-size:9px}.v-flow__caption{padding:0 18px;margin-top:16px!important;font-size:9px!important}}
@media(prefers-reduced-motion:reduce){.v-flow *, .v-flow *::before,.v-flow *::after{animation:none!important;transition:none!important}.v-flow__scan,.v-flow__packet{display:none}.v-flow__trace{stroke-dashoffset:0}.v-reveal,.v-reveal-pending{opacity:1;transform:none;transition:none}.v-flow__pause{display:none}}
@media print{.v-reveal,.v-reveal-pending{opacity:1;transform:none;transition:none}.v-flow__pause{display:none}.v-flow__packet,.v-flow__scan{display:none}}

/* The artwork itself moves; the same Pause control governs photograph and diagram. */
.v-hero-visual>.v-hero-visual__image{transform-origin:48% 45%;animation:v-picture-drift 18s ease-in-out infinite alternate paused;will-change:auto}
.v-hero-visual[data-v-running="true"]>.v-hero-visual__image{animation-play-state:running;will-change:transform}
@keyframes v-picture-drift{from{transform:scale(1.015) translate3d(-.3%,.15%,0)}to{transform:scale(1.045) translate3d(.65%,-.55%,0)}}
@media(prefers-reduced-motion:reduce){.v-hero-visual>.v-hero-visual__image{animation:none!important;transform:none!important;will-change:auto}}
@media print{.v-hero-visual>.v-hero-visual__image{animation:none!important;transform:none!important}}