/* One shared stage, with a persistent named switcher below the artwork. */
.workflow-demos{position:relative;z-index:2;padding:48px 0;margin:10px 0 60px}
.wf-heading h2{margin:0}.wf-heading{margin-bottom:10px}
.wf-panel{margin:0}.wf-panel[hidden]{display:none}
.wf-stage{position:relative;aspect-ratio:1;max-width:590px;width:100%;margin:0 auto;background:transparent;overflow:hidden}
.wf-poster{display:block;width:100%;height:100%;object-fit:contain}
.wf-stage hyperframes-player{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;opacity:0;background:transparent}
.wf-stage.is-ready hyperframes-player{opacity:1}.wf-stage.is-ready .wf-poster{visibility:hidden}
.wf-description{max-width:620px;min-height:3.2em;text-align:center;margin:4px auto 22px;font-size:1rem;line-height:1.6}
.wf-dock{display:flex;align-items:center;justify-content:center;gap:12px}.wf-dock[hidden]{display:none}
.wf-tabs{display:flex;padding:5px;background:var(--paper);border:1px solid var(--ink-16);border-radius:32px;gap:3px}
.wf-tabs button{border:0;border-radius:24px;padding:13px 20px;font:600 .92rem/1.2 var(--serif);background:transparent;color:var(--ink-72);cursor:pointer;white-space:nowrap}
.wf-tabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.wf-motion{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--ink-16);background:var(--paper);color:var(--ink);font-size:18px;cursor:pointer}
.wf-dock button:focus-visible{outline:3px solid var(--orange-deep);outline-offset:4px}.wf-tabs button:hover{color:var(--ink)}.wf-tabs button[aria-selected=true]:hover{color:var(--paper)}
.wf-note{text-align:center;font-size:.78rem;color:var(--ink-72);margin:16px 0 0}
@media(max-width:700px){.workflow-demos{padding:30px 0}.wf-heading h2{font-size:1.9rem}.wf-description{font-size:.95rem;min-height:4.8em;margin-bottom:16px}.wf-dock{gap:7px}.wf-tabs{border-radius:24px;flex:1;gap:0;padding:4px}.wf-tabs button{white-space:normal;padding:10px 8px;flex:1;font-size:.78rem;min-height:46px}.wf-motion{width:36px;height:36px}.wf-stage{max-width:520px}}

.workflow-demos .wf-note{max-width:none;width:100%;text-align:center;margin:16px auto 0}

/* The title anchors the left column; choices sit directly above the shared stage. */
.workflow-demos{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);column-gap:40px;align-items:start}
.wf-heading{grid-column:1;grid-row:1 / span 3;padding-top:12px}.wf-heading h2{font-size:clamp(2rem,3.4vw,3rem);line-height:1.12;max-width:8em}
.wf-dock{grid-column:2;grid-row:1;margin-bottom:12px;justify-content:center}
.wf-gallery{grid-column:2;grid-row:2;min-width:0}.workflow-demos .wf-note{grid-column:2;grid-row:3;margin-top:0}
.wf-tabs{min-width:0;flex:1}.wf-tabs button{flex:1;padding:12px 10px;font-size:.84rem;white-space:normal}.wf-motion{width:38px;height:38px}
.wf-description{margin-bottom:14px;min-height:4.8em}
@media(max-width:800px){.workflow-demos{display:block}.wf-heading{padding:0;margin-bottom:24px}.wf-heading h2{max-width:none;font-size:1.9rem}.wf-dock{margin-bottom:14px}.wf-tabs button{font-size:.78rem;padding:10px 8px}.wf-description{min-height:4.8em}}