/* Connectors occupy their own layout cells; labels never sit on an edge. */
.flow-arrow { display:block; width:48px; height:24px; flex-shrink:0; color:#63517e; overflow:visible; }
.incident-flow { grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) 42px minmax(0,1fr) 42px minmax(0,1fr); gap:10px; padding:28px 24px; }
.incident-flow li:not(:last-child):after { content:none; }
.incident-flow .incident-edge { display:flex; align-items:center; justify-content:center; padding-top:4px; }
.incident-edge .flow-arrow { width:36px; }
.incident-flow strong { line-height:1.5; }
.diagram { grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr) 72px minmax(0,1fr); }
.connector { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; align-self:center; margin-top:-23px; }
.connector span { position:static; transform:none; font-size:10px; white-space:normal; text-align:center; line-height:1.4; color:#526078; }
.connector .flow-arrow { width:48px; }
.node strong { line-height:1.4; }
.agent-concept { grid-template-columns:minmax(0,1fr) 112px minmax(0,1.15fr); }
.agent-exchange { gap:21px; padding:0 8px; }
.agent-exchange>div { display:flex; flex-direction:column; align-items:center; gap:8px; }
.agent-exchange span { font-size:10px; line-height:1.5; color:#526078; }
.agent-exchange .flow-arrow { width:68px; height:24px; }
.tool-bridge { display:flex; justify-content:center; gap:50px; padding:22px 10px; }
.tool-bridge>div { display:flex; align-items:center; gap:12px; text-align:left; }
.tool-bridge .flow-arrow { width:24px; height:40px; }
.tool-bridge span { font-size:11px; line-height:1.5; color:#526078; }
.hero .recovery-path p { display:grid; grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1.2fr); gap:12px; text-align:center; }
.recovery-path .flow-arrow { width:30px; height:24px; }
@media(min-width:851px) and (max-width:1100px) {
 .diagram { grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1fr); }
 .connector .flow-arrow { width:36px; }
 .connector span { font-size:9px; }
 .agent-concept { grid-template-columns:minmax(0,1fr) 98px minmax(0,1fr); }
 .concept-card { padding:15px; }
}
@media(max-width:600px) {
 .incident-flow { display:flex; flex-direction:column; gap:0; padding:23px; }
 .incident-flow>li:not(.incident-edge) { display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto auto; gap:4px 15px; align-items:center; width:100%; }
 .incident-flow>li>img,.incident-flow .incident-alert { grid-row:1/3; }
 .incident-flow strong { font-size:13px; }
 .incident-flow small { font-size:11px; grid-column:2; }
 .incident-flow .incident-edge { height:44px; width:36px; padding:0; }
 .incident-edge .flow-arrow { transform:rotate(90deg); width:30px; }
 .incident-flow li:nth-child(2):after,.incident-flow li:nth-child(3):after { content:none; }
 .hero .recovery-path p { grid-template-columns:1fr; justify-items:start; text-align:left; gap:7px; padding-left:3px; font-size:11px; }
 .recovery-path .flow-arrow { width:25px; height:24px; transform:rotate(90deg); }
 .diagram { display:flex; flex-direction:column; gap:0; margin-top:22px; }
 .diagram>.flow-label { display:none; }
 .diagram>.node { width:100%; height:auto; min-height:135px; padding:19px; }
 .diagram>.node strong { font-size:14px; }
 .diagram>.node small { font-size:11px; }
 .diagram>.node .node-tag { font-size:9px; margin-top:10px; }
 .diagram>.connector { height:76px; width:100%; margin:0; flex-direction:row; gap:15px; }
 .connector .flow-arrow { order:-1; transform:rotate(90deg); width:40px; }
 .connector span { display:block; font-size:11px; }
 .collab-nodes { width:100%; grid-template-columns:1fr 1fr; gap:12px; }
 .collab-nodes .compact { height:94px; padding:12px; }
 .compact strong { font-size:12px; }.compact small { font-size:9px; }
 .evidence { width:100%; margin-top:25px; }.evidence-label { font-size:8px; line-height:1.7; }
 .agent-concept { grid-template-columns:1fr; gap:0; }
 .agent-exchange { display:grid; grid-template-columns:1fr 1fr; padding:15px 0; gap:24px; }
 .agent-exchange>div { flex-direction:row; justify-content:center; gap:12px; }
 .agent-exchange>div:first-child .flow-arrow { transform:rotate(90deg); }
 .agent-exchange>div:last-child .flow-arrow { transform:rotate(90deg); }
 .agent-exchange .flow-arrow { width:35px; height:24px; }
 .agent-exchange span { font-size:10px; }
 .tool-bridge { gap:30px; }.tool-bridge span { font-size:10px; }
}
/* Hero flow: a fixed icon rail with identical, centered columns. */
.incident-flow{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr);gap:12px;padding:32px 28px;align-items:start}
.incident-flow>li:not(.incident-edge){display:grid;grid-template-columns:1fr;grid-template-rows:48px 38px auto;justify-items:center;align-items:center;gap:8px;text-align:center}
.incident-flow>li>img,.incident-flow .incident-alert{width:38px;height:38px;grid-row:1;grid-column:1;margin:0}
.incident-flow strong{grid-row:2;line-height:1.5;font-size:12px;align-self:center}
.incident-flow small{grid-row:3;align-self:start;font-size:10px;line-height:1.8;max-width:145px}
.incident-flow .incident-edge{height:48px;align-self:start;display:flex;justify-content:center;align-items:center;padding:0;margin:0}
.incident-flow .incident-edge .flow-arrow{width:32px;height:32px;opacity:.65}
.hero .recovery-path p{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr);align-items:center}
.recovery-path img.flow-arrow{width:28px;height:28px;opacity:.65}
@media(max-width:700px){
 .incident-flow{display:flex;flex-direction:column;gap:0;padding:26px}
 .incident-flow>li:not(.incident-edge){width:100%;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;column-gap:20px;row-gap:4px;justify-items:start;text-align:left;min-height:62px}
 .incident-flow>li>img,.incident-flow .incident-alert{grid-column:1;grid-row:1/3;justify-self:center}
 .incident-flow strong{grid-column:2;grid-row:1;font-size:13px}
 .incident-flow small{grid-column:2;grid-row:2;max-width:none;font-size:11px}
 .incident-flow .incident-edge{width:48px;height:42px;margin:4px 0}
 .incident-flow .incident-edge .flow-arrow{width:27px;height:27px;transform:rotate(90deg)}
 .recovery-path{display:block}
 .hero .recovery-path p{grid-template-columns:1fr;justify-items:start;gap:9px;margin-top:15px;text-align:left}
 .recovery-path img.flow-arrow{width:24px;height:24px;transform:rotate(90deg)}
}
/* Agent anatomy is a relationship, not another directional process diagram. */
.agent-concept{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.agent-relationship{margin:20px 0 22px;padding:14px 17px;border-left:3px solid #a390bd;background:#f7f4fb;color:#505366;font-size:12px;line-height:1.8;border-radius:0 6px 6px 0}
@media(max-width:600px){.agent-concept{grid-template-columns:1fr;gap:14px}.agent-relationship{font-size:11px;padding:12px 14px}}
/* The use-case connectors are custom image assets, visually paired with its surfaces. */
.incident-flow{grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr) 58px minmax(0,1fr) 58px minmax(0,1fr)}
.incident-flow .incident-edge .flow-arrow{width:58px;height:32px;opacity:1}
.hero .recovery-path p{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr)}
.recovery-path img.flow-arrow{width:48px;height:28px;opacity:1}
@media(max-width:700px){
 .incident-flow .incident-edge{height:54px}
 .incident-flow .incident-edge .flow-arrow{width:46px;height:25px}
 .hero .recovery-path p{grid-template-columns:1fr}
 .recovery-path img.flow-arrow{width:38px;height:25px;margin:6px 0}
}

/* Shared capsule connector across the architecture and use-case diagrams. */
.connector img.flow-arrow { width:58px; height:26px; }
@media(min-width:851px) and (max-width:1100px) {
 .connector img.flow-arrow { width:46px; height:21px; }
}
@media(max-width:600px) {
 .connector img.flow-arrow { width:46px; height:21px; }
}