/* A patient journey: small scenes, clear handoffs, one shared story. */
#workflow.mate-story-section{background:var(--white);border-block:1px solid var(--line)}
#workflow.mate-story-section .section-heading{max-width:940px}
#workflow.mate-story-section .section-heading h2{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.3}
#workflow.mate-story-section .section-heading>p:last-child{max-width:780px}
#workflow .mate-story-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:30px;flex-wrap:wrap}
#workflow .mate-story-context{color:var(--muted);font-size:.875rem}
#workflow .mate-playback{display:flex;align-items:center;gap:8px}
#workflow .mate-playback button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--line);border-radius:100px;padding:9px 16px;background:var(--white);color:var(--navy);font-size:.875rem}
#workflow .mate-playback button svg{width:15px;height:15px;flex:none}
#workflow .mate-playback button svg[hidden]{display:none}
#workflow .mate-playback button:disabled{opacity:.4;cursor:default}
#workflow .mate-playback #mate-story-play{min-width:128px;background:var(--pale-blue);border-color:var(--pale-blue)}
#workflow .workflow-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px;border:0}
#workflow .workflow-controls button{position:relative;display:grid;grid-template-columns:25px minmax(0,1fr);gap:2px 10px;align-items:center;text-align:start;min-height:78px;padding:14px 16px;overflow:hidden;background:var(--white);color:var(--muted);border:1px solid var(--line);border-radius:10px;font-size:1rem}
#workflow .workflow-controls .mate-act-number{grid-row:1/3;font-size:.875rem;color:inherit}
#workflow .workflow-controls strong{font-weight:500;line-height:1.5}
#workflow .workflow-controls .mate-act-role{font-size:.75rem;color:inherit;line-height:1.6}
#workflow .workflow-controls button[aria-selected=true]{color:var(--blue);background:var(--pale-blue);border-color:var(--blue)}
#workflow .workflow-controls button::after{content:'';position:absolute;bottom:0;inset-inline-start:0;height:3px;width:calc(var(--mate-progress,0)*100%);background:var(--blue)}
#workflow .mate-stage.flow-detail{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;min-height:0;margin-top:32px;align-items:center}
#workflow .mate-visual{position:relative;min-width:0;padding:28px 22px 18px;background:linear-gradient(165deg,var(--pale-blue),var(--white));border-radius:16px;overflow:hidden}
#workflow .mate-scene{width:100%;aspect-ratio:2/1}
#workflow .mate-scene[hidden]{display:none!important}
#workflow .mate-scene svg{width:100%;height:100%;display:block}
#workflow .mate-beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;min-height:56px}
#workflow .mate-beat{font-size:.8125rem;color:var(--muted);line-height:1.6;text-align:center;padding:10px 5px;border-top:2px solid var(--line);overflow-wrap:anywhere}
#workflow .mate-beat.is-current{color:var(--blue);border-color:var(--blue)}
#workflow .mate-beat.is-done{color:var(--ink);border-color:var(--blue)}
#workflow .flow-role{font-size:.9375rem;color:var(--blue);margin-bottom:12px}
#workflow .flow-story h3{font-size:clamp(1.5rem,2.1vw,1.9rem);line-height:1.45;font-weight:500;letter-spacing:-.025em;max-width:540px}
#workflow .flow-story>p#flow-description{color:var(--muted);font-size:1rem;line-height:1.9;margin-top:16px}
#workflow .flow-handoff{display:none}
#workflow .flow-story .approval-label{display:flex;align-items:start;gap:8px;margin-top:20px;padding:12px 0 0;border:0;border-top:1px solid var(--line);background:transparent;color:var(--navy);font-size:.875rem;line-height:1.7}
#workflow .flow-story .approval-label::before{content:'✓';color:var(--blue);font-weight:600;flex:none}
#workflow .mate-relay{display:grid;grid-template-columns:1fr minmax(24px,.24fr) 1fr minmax(24px,.24fr) 1fr;gap:10px;align-items:center;margin:36px auto 0;max-width:850px}
#workflow .mate-relay-node{display:flex;align-items:center;justify-content:center;gap:11px;padding:14px 10px;border:1px solid var(--line);border-radius:10px;opacity:.55;transition:opacity .25s,border-color .25s,background .25s;min-width:0}
#workflow .mate-relay-node.is-involved{opacity:1;border-color:var(--blue);background:var(--pale-blue)}
#workflow .mate-relay-node svg{width:24px;height:24px;color:var(--blue);flex:none}
#workflow .mate-relay-node strong{display:block;font-weight:500;font-size:1rem;line-height:1.5}
#workflow .mate-relay-node small{display:block;font-size:.75rem;line-height:1.5;color:var(--muted)}
#workflow .mate-relay-path{height:1px;background:var(--line);position:relative;overflow:visible;direction:ltr}
#workflow .mate-relay-path.is-involved{background:var(--blue)}
#workflow .mate-relay-path::before{content:'';position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-top:1px solid var(--blue);border-right:1px solid var(--blue);transform:rotate(45deg);opacity:0}
#workflow .mate-relay-path.is-involved::before{opacity:1}
#workflow .mate-relay-packet{position:absolute;left:0;top:-5px;width:11px;height:11px;border:2px solid var(--white);border-radius:3px;background:var(--blue);opacity:0}
#workflow .mate-relay-path.is-involved .mate-relay-packet{opacity:1}
#workflow[data-motion=running] .mate-relay-path.is-involved .mate-relay-packet{animation:mate-transfer 2.8s ease-in-out infinite}
#workflow[data-story-index="2"] .mate-relay-path.is-involved .mate-relay-packet,#workflow[data-story-index="3"] .mate-relay-path.is-involved .mate-relay-packet{animation-direction:alternate}
#workflow[data-story-index="2"] .mate-relay-path.is-involved::after,#workflow[data-story-index="3"] .mate-relay-path.is-involved::after{content:'';position:absolute;left:0;top:-3px;width:6px;height:6px;border-bottom:1px solid var(--blue);border-left:1px solid var(--blue);transform:rotate(45deg)}
#workflow .mate-relay-caption{margin:18px auto 0;max-width:860px;text-align:center;font-size:.875rem;line-height:1.8;color:var(--navy);min-height:2em;overflow-wrap:anywhere}
#workflow .mate-story-footer{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
#workflow .mate-story-footer .flow-note{font-size:.8125rem;line-height:1.8;max-width:730px;margin:0}
#workflow .mate-story-footer .text-link{flex-shrink:0;font-size:.875rem;line-height:1.8;color:var(--blue);text-decoration:underline;text-underline-offset:5px}
#workflow .mate-recording{max-width:860px;margin:22px auto 0;border-top:1px solid var(--line);padding-top:14px}
#workflow .mate-recording[hidden]{display:none!important}
#workflow .mate-recording summary{color:var(--blue);font-size:.875rem;cursor:pointer;padding:6px 0}
#workflow .mate-recording .flow-output{border:0;border-radius:0;background:transparent;box-shadow:none;padding:16px 0 0;max-width:none}
#workflow .mate-recording #flow-items,#workflow .mate-recording .flow-output-label,#workflow .mate-recording .flow-output-note{display:none!important}
#workflow .mate-recording .inline-player,#workflow .mate-recording #workflow-inline-video{width:min(310px,100%)!important;margin-inline:auto}
#workflow .mate-story-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#workflow[data-motion=running] .mate-scene-signal{animation:mate-listen 2.8s ease-out infinite;transform-origin:center;transform-box:fill-box}
#workflow[data-motion=running] .mate-scene-note{animation:mate-paper 3s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
#workflow[data-motion=running] .mate-scene-feedback{animation:mate-feedback 3.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes mate-transfer{0%,10%{left:0;opacity:0}25%{opacity:1}80%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@keyframes mate-listen{0%,100%{opacity:.3;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes mate-paper{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes mate-feedback{0%,100%{opacity:.45}50%{opacity:1}}
html[dir=rtl] #workflow .mate-relay{direction:ltr}
html[dir=rtl] #workflow .mate-relay-node>div{direction:rtl}
@media(max-width:1000px){#workflow .mate-stage.flow-detail{gap:30px}#workflow .workflow-controls button{padding:12px 10px;gap:2px 6px}#workflow .flow-story h3{font-size:1.5rem}}
@media(max-width:700px){#workflow .mate-story-toolbar{gap:12px;margin-top:24px}#workflow .mate-story-context{font-size:.8125rem}#workflow .mate-playback{width:100%}#workflow .mate-stage.flow-detail{grid-template-columns:1fr;gap:24px;margin-top:22px}#workflow .mate-visual{padding:18px 10px 14px}#workflow .workflow-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}#workflow .workflow-controls button{min-height:74px;font-size:.9375rem}#workflow .flow-story>p#flow-description{font-size:.9375rem;line-height:1.85}#workflow .mate-beats{gap:5px;margin-top:4px;min-height:54px}#workflow .mate-beat{font-size:.75rem;padding:9px 2px}#workflow .mate-relay{gap:5px;grid-template-columns:1fr 12px 1fr 12px 1fr;margin-top:28px}#workflow .mate-relay-node{display:block;text-align:center;padding:12px 2px}#workflow .mate-relay-node svg{margin:0 auto 5px;width:20px;height:20px}#workflow .mate-relay-node strong{font-size:.75rem}#workflow .mate-relay-node small{font-size:.6875rem}#workflow .mate-relay-caption{font-size:.8125rem;margin-top:14px;min-height:3.6em}#workflow .mate-story-footer{display:block;margin-top:22px}#workflow .mate-story-footer .flow-note{margin-top:12px}#workflow .mate-story-section .section-heading h2{font-size:2.1rem}}
@media(prefers-reduced-motion:reduce){#workflow *,#workflow *::before,#workflow *::after{animation:none!important;transition:none!important}}