/* Shared standalone preview and homepage animation. */
.qflow-demo { color:#f4f7fb; font-family:Inter,system-ui,sans-serif; line-height:normal; min-width:0; margin-inline:auto; }
.qflow-demo p { max-width:none; letter-spacing:normal; }
.qflow-demo * { box-sizing:border-box; }
.qflow-demo { width:min(100%,580px); }
.qflow-demo .qdo-platform { padding:26px; border:1px solid #ffffff24; border-radius:24px; background:linear-gradient(135deg,#112e4b,#0b223d); box-shadow:0 28px 70px #00000026; }
.qflow-demo .qdo-platform-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:23px; }
.qflow-demo .qdo-platform-heading strong { font-size:13px; font-weight:500; line-height:1.5; color:#cfdae7; }
.qflow-demo .qdo-auto { display:flex; flex-shrink:0; align-items:center; gap:7px; color:#a2e3cb; font-size:11px; }
.qflow-demo .qdo-auto::before { content:""; width:6px; height:6px; border-radius:50%; background:#8ddabb; }
.qflow-demo .qdo-story { display:flex; align-items:center; gap:15px; padding:20px; background:#ffffff06; border:1px solid #ffffff0f; border-radius:16px; }
.qflow-demo .qdo-avatar { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; border-radius:50%; background:#ffad6420; color:#ffb16b; }
.qflow-demo svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.qflow-demo .qdo-story small { display:block; color:#b6c5d7; font-size:12px; margin-bottom:5px; }
.qflow-demo .qdo-story h2 { margin:0; font-size:19px; font-weight:500; letter-spacing:-.5px; }
.qflow-demo .qdo-tasks { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.qflow-demo .qdo-task { display:flex; align-items:center; gap:15px; padding:15px 17px; border:1px solid #ffffff12; border-radius:13px; background:#ffffff03; transition:background .6s,border-color .6s; }
.qflow-demo .qdo-task-icon { color:#a9bdd2; width:27px; flex-shrink:0; transition:color .6s; }
.qflow-demo .qdo-task-copy { flex:1; }
.qflow-demo .qdo-task h3 { margin:0 0 4px; font-size:14px; font-weight:600; }
.qflow-demo .qdo-task p { margin:0; font-size:12px; color:#afc0d3; }
.qflow-demo .qdo-check { display:grid; place-items:center; width:25px; height:25px; border:1px solid #ffffff30; border-radius:50%; color:#8fe0bf; transition:border-color .5s,background .5s; }
.qflow-demo .qdo-check svg { width:15px; height:15px; opacity:0; transform:scale(.5); transition:opacity .35s,transform .45s; }
.qflow-demo .qdo-task.qdo-done { border-color:#87d7b735; background:#87d7b708; }
.qflow-demo .qdo-task.qdo-done .qdo-task-icon { color:#91ddc0; }
.qflow-demo .qdo-task.qdo-done .qdo-check { background:#87d7b714; border-color:#87d7b750; }
.qflow-demo .qdo-task.qdo-done .qdo-check svg { opacity:1; transform:scale(1); }
.qflow-demo .qdo-outcome { min-height:62px; padding-top:24px; display:flex; align-items:center; justify-content:center; gap:9px; text-align:center; }
.qflow-demo .qdo-outcome p { margin:0; font-size:15px; font-weight:500; letter-spacing:-.25px; color:#c8d6e6; }
.qflow-demo .qdo-outcome.qdo-complete p { color:#a6e8cd; }
.qflow-demo .qdo-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:420px) {
.qflow-demo .qdo-platform { padding:18px; border-radius:20px; }
.qflow-demo .qdo-story { padding:16px 13px; gap:12px; }
.qflow-demo .qdo-story h2 { font-size:17px; }
.qflow-demo .qdo-task { padding:14px 12px; gap:12px; }
.qflow-demo .qdo-platform-heading { padding-bottom:19px; }
.qflow-demo .qdo-platform-heading strong { font-size:12px; }
.qflow-demo .qdo-auto { font-size:10px; }
.qflow-demo .qdo-outcome p { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .qflow-demo *, .qflow-demo *::before, .qflow-demo *::after { transition:none!important; } }

.qflow-demo .qdo-brand { margin:0 0 16px; font-size:27px; font-weight:700; line-height:1.1; letter-spacing:-1.2px; color:#f4f7fb; }
.qflow-demo .qdo-brand span { color:#ff9635; }