.workflow-demo{background:#f7f8fc;box-shadow:9px 9px 0 #e8edfd}
.wf-intro{padding:22px 24px 0}.workflow-demo h2{font-size:1.65rem;margin-bottom:18px}
.wf-routes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:#e9edf6;padding:4px;border-radius:7px}
.wf-routes button{border:0;border-radius:4px;background:transparent;color:var(--muted);padding:9px 3px;font-size:.75rem;font-weight:600;min-height:42px;transition:background .2s,color .2s,box-shadow .2s}
.wf-routes button[aria-pressed=true]{background:#fff;color:var(--blue);box-shadow:0 2px 5px #11193612}
.wf-map{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:25px 20px;padding:24px 28px;margin:0 12px;background-image:radial-gradient(#c7d0e055 .8px,transparent .8px);background-size:14px 14px}
.wf-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;pointer-events:none}
.wf-wire{fill:none;stroke:#b4bfd3;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.wf-wire.lit{stroke:var(--blue);stroke-width:2}
.wf-node{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:5px;min-width:0;padding:11px 12px;text-align:left;border:1px solid #d2d9e8;border-radius:6px;background:#fff;box-shadow:0 2px 4px #11193604;color:var(--navy);transition:border-color .3s,background .3s,box-shadow .3s}
.wf-node strong{font-size:.78rem;font-weight:650;line-height:1.35}.wf-kind{font-size:.58rem;font-weight:700;letter-spacing:.075em;color:var(--muted)}.wf-node small{font-size:.63rem;line-height:1.4;color:var(--muted);margin-top:2px}
.wf-node[data-node=draft]{grid-column:1/-1;justify-self:center;width:74%;min-height:56px}
.wf-branch{background:#eef1f9;min-height:49px}.wf-branch>span{font-size:.65rem;color:var(--muted)}
.wf-end{border-style:dashed;background:#f1f4f9}
.wf-node.visited{border-color:#90a5ec}.wf-node.current{border-color:var(--blue);background:#edf2ff;box-shadow:0 0 0 3px #173ee80e}
.wf-node.current .wf-kind,.wf-node.current small{color:var(--blue)}
.wf-node[data-node=finish].current,.wf-node[data-node=follow].current{background:#eaf6ef;border-color:#418564}.wf-node[data-node=wait].current{background:#fff6e5;border-color:#c69942}
.wf-story{margin:0 24px;background:#fff;border:1px solid #d6ddeb;border-radius:6px;min-height:194px;padding:17px 19px;position:relative}
.wf-story-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.wf-story-tag{color:var(--blue);font-size:.65rem;font-weight:700;letter-spacing:.07em}.wf-story-time{font-size:.7rem;color:var(--muted)}
.wf-story h3{font-size:1.05rem;letter-spacing:-.02em;margin:0 0 8px;line-height:1.35}.wf-story p{font-size:.83rem;color:var(--muted);line-height:1.55;margin:0}.wf-story blockquote{font-size:.86rem;line-height:1.5;margin:9px 0 0;padding:9px 12px;background:#f0f3ff;border-left:2px solid #8097ed;color:var(--navy)}
.wf-slots{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}.wf-slots span{padding:4px 7px;background:#eaf6ef;color:#296545;border-radius:3px;font-size:.69rem}.wf-slots .busy{background:#f3eae9;color:#8a4540;text-decoration:line-through}
.workflow-demo button:focus-visible{outline:3px solid #728bff;outline-offset:3px}.wf-node:hover{border-color:#8097ed}.wf-fallback{padding:20px}
@media(max-width:560px){.wf-intro{padding:20px 16px 0}.wf-map{margin:0 3px;padding:22px 16px;gap:22px 13px}.wf-node{padding:9px 8px}.wf-node strong{font-size:.73rem}.wf-kind{font-size:.54rem}.wf-node small{font-size:.61rem}.wf-story{margin-inline:16px;padding:15px;min-height:215px}.wf-routes button{font-size:.68rem}.wf-node[data-node=draft]{width:82%}}

/* Tighten the surrounding copy while preserving the diagram's arrow clearance. */
.wf-intro{padding-top:16px}
.workflow-demo h2{font-size:1.35rem;line-height:1.3;margin-bottom:8px;text-wrap:initial}
.wf-summary{font-size:.875rem;line-height:1.5;color:var(--muted);margin:0 0 16px}
.wf-story{min-height:180px;padding-block:14px;margin-bottom:16px}
@media(min-width:801px){.hero{padding-block:48px 64px}.hero-copy{padding-top:12px}}
@media(max-width:560px){.wf-story{min-height:215px}.wf-routes button{min-height:44px}}