/* One screen, one event. Soft azure surfaces and Velocia blue mark completion. */
.vd-demo{--vd-blue:#0066ff;--vd-ink:#142d54;--vd-muted:#687384;--vd-line:#e8ebef;width:100%;min-width:0;margin:0;color:var(--vd-ink);font-family:Inter,Arial,sans-serif;font-size:14px;line-height:1.5;text-align:left}
.vd-demo *{box-sizing:border-box}.vd-demo svg{flex-shrink:0}.vd-demo p,.vd-demo h2{margin:0}.vd-demo button{font-family:inherit}
.vd-browser{min-width:0;overflow:hidden;background:#fff;border:1px solid #cbdcf6;border-radius:18px;box-shadow:0 20px 55px -35px #0066ff40}
.vd-browser-bar{height:42px;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:12px;padding:0 17px;background:#e7f0ff;border-bottom:1px solid #d4e3fa;color:#315a91;font-size:11px;font-weight:500;text-align:center}
.vd-window-dots{display:flex;gap:5px}.vd-window-dots i{width:6px;height:6px;border-radius:50%;background:#a6c8ff}.vd-window-dots i:first-child{background:#0066ff}.vd-window-dots i:nth-child(2){background:#6ba5ff}
.vd-document{padding:37px 38px 31px;background:linear-gradient(145deg,#eef5ff 0%,#fff 58%)}.vd-demo .vd-document-heading h2{font:600 25px/1.25 Inter,Arial,sans-serif;letter-spacing:-.04em;color:var(--vd-ink)}.vd-document-heading p{margin-top:7px;color:var(--vd-muted);font-size:12px}
.vd-signing{position:relative;margin-top:55px;padding-bottom:14px}.vd-signing>span:first-child{display:block;font-size:12px;color:var(--vd-muted)}.vd-signature{display:block;width:205px;max-width:90%;height:72px;margin:18px 0 8px}.vd-signature path{stroke:var(--vd-blue);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.45s cubic-bezier(.33,0,.2,1)}.vd-demo[data-step="1"] .vd-signature path{stroke-dashoffset:.45}.vd-demo:is([data-step="2"],[data-step="3"]) .vd-signature path{stroke-dashoffset:0}.vd-signature-baseline{display:block;position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--vd-line)}
.vd-result{display:flex;align-items:center;gap:12px;margin-top:27px;min-height:30px;font-size:15px;font-weight:500;letter-spacing:-.015em}.vd-result-mark{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;border:1px solid #bfd6fa;border-radius:50%;color:var(--vd-blue);transition:background .4s,border-color .4s,color .4s}.vd-result-mark svg{opacity:0;transition:opacity .4s}.vd-demo:is([data-step="2"],[data-step="3"]) .vd-result-mark{background:var(--vd-blue);border-color:var(--vd-blue);color:#fff}.vd-demo:is([data-step="2"],[data-step="3"]) .vd-result-mark svg{opacity:1}
.vd-stage-text{display:grid;min-width:0}.vd-stage-text>[data-at-step]{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .35s}.vd-demo[data-step="0"] [data-at-step="0"],.vd-demo[data-step="1"] [data-at-step="1"],.vd-demo[data-step="2"] [data-at-step="2"],.vd-demo[data-step="3"] [data-at-step="3"]{visibility:visible;opacity:1}
.vd-caption{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:8px 3px 0;color:var(--vd-muted);font-size:11px;line-height:1.5}.vd-control{visibility:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;min-height:44px;min-width:72px;padding:8px 0 8px 8px;border:0;background:transparent;color:var(--vd-muted);font-size:11px;font-weight:400;cursor:pointer}.vd-ready .vd-control{visibility:visible}.vd-demo[data-motion="static"] .vd-control{visibility:hidden}.vd-control:hover{color:var(--vd-blue)}.vd-control:focus-visible{outline:2px solid var(--vd-blue);outline-offset:3px;border-radius:3px}.vd-control>span{display:none;align-items:center;gap:5px}.vd-demo[data-motion="running"] .vd-control-running,.vd-demo[data-motion="paused"] .vd-control-paused,.vd-demo[data-motion="done"] .vd-control-done{display:flex}
.vd-sequence-body{padding:29px 30px 22px}.vd-sequence-heading{margin-bottom:21px}.vd-sequence-heading>strong{display:block;font-size:20px;font-weight:600;letter-spacing:-.035em}.vd-sequence-heading>span{display:block;font-size:11px;margin-top:5px;color:var(--vd-muted)}.vd-sequence{list-style:none;margin:0;padding:0}.vd-sequence li{display:flex;align-items:center;gap:15px;min-height:57px;border-bottom:1px solid var(--vd-line);font-size:13px;line-height:1.5}.vd-sequence li:last-child{border:0}.vd-sequence-number{flex:0 0 16px;color:#929aa7;font-size:11px;font-weight:400}.vd-sequence li>span:nth-child(2){flex:1;min-width:0}.vd-step-check{color:var(--vd-blue);opacity:0;transition:opacity .4s}.vd-demo[data-step="0"] [data-node="0"] .vd-step-check,.vd-demo[data-step="1"] :is([data-node="0"],[data-node="1"]) .vd-step-check,.vd-demo[data-step="2"] :is([data-node="0"],[data-node="1"],[data-node="2"]) .vd-step-check,.vd-demo[data-step="3"] .vd-step-check{opacity:1}
@media(min-width:761px) and (max-width:1100px){.vd-document{padding:30px 27px 27px}.vd-demo .vd-document-heading h2{font-size:23px}.vd-sequence-body{padding:24px}.vd-caption{font-size:10px}}
@media(max-width:760px){.vd-product{max-width:560px;margin-inline:auto}.vd-document{padding:30px 29px 27px}.vd-signing{margin-top:46px}.vd-sequence-body{padding:25px}.vd-sequence li{font-size:13px}}
@media(max-width:400px){.vd-browser{border-radius:15px}.vd-browser-bar{grid-template-columns:34px minmax(0,1fr) 34px;padding-inline:14px;gap:8px;height:38px;font-size:10px}.vd-document{padding:28px 23px 25px}.vd-demo .vd-document-heading h2{font-size:23px}.vd-signing{margin-top:42px}.vd-result{font-size:14px;gap:10px}.vd-sequence-body{padding:23px 20px 17px}.vd-sequence li{gap:10px;font-size:12px;min-height:55px}.vd-sequence-heading>strong{font-size:19px}.vd-caption{font-size:10px;gap:8px}.vd-control{min-width:66px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.vd-demo *,.vd-demo *:before,.vd-demo *:after{animation:none!important;transition:none!important}}
