/* MCP integration: the hero diagram (AI tools -> governed MCP layer -> systems) */
.mcp-diagram { margin: 0; }
.mcp-diagram svg { width: 100%; height: auto; display: block; font-family: inherit; }
.mcp-hint { display: none; margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--burgundy); }
.mcp-diagram figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
/* On phones keep the labels readable: the diagram holds a minimum width and scrolls sideways in its own box */
@media (max-width: 600px) {
  .mcp-diagram .mcp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -8px; padding: 0 8px 8px; }
  .mcp-diagram svg { min-width: 500px; }
  .mcp-hint { display: block; }
}
.mcp-links path { fill: none; stroke: var(--burgundy); stroke-opacity: 0.35; stroke-width: 2; }
.mcp-col { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--muted); }
.mcp-node rect { fill: #FFFFFF; stroke: var(--line); stroke-width: 1.5; }
.mcp-node text { font-size: 15px; font-weight: 600; fill: var(--ink); }
.mcp-sys rect { fill: var(--light); }
.mcp-sys text { font-size: 14px; font-weight: 500; }
.mcp-hub rect { fill: var(--burgundy); }
.mcp-hub text { font-size: 14px; fill: #FFFFFF; }
.mcp-hub .mcp-hub-title { font-size: 22px; font-weight: 700; letter-spacing: 0.04em; }