/* Styles for /integrations. Reuses styles.css's tokens (Inter, #242428 text,
   #85858c secondary, #a1a1a8 borders, 7px radius) so the page matches
   the rest of the site without touching styles.css. */

.mcp-cover { position: relative; width: 100%; }
.mcp-cover img { display: block; width: 100%; height: auto; }
.mcp-shell { max-width: 640px; margin: 0 auto; padding: 40px 22px 60px; }
.mcp-back { position: absolute; top: 20px; left: 22px; padding: 8px 11px; border-radius: 7px; background: rgba(255,255,255,.85); color: #071d5d; font-size: 13px; text-decoration: none; }
.mcp-back:hover { background: #fff; }
.mcp-back:focus-visible { outline: 2px solid #071d5d; outline-offset: 2px; }
.mcp-lede { max-width: 460px; margin-top: 0; font-size: 13px; }
.mcp-github-button { display: inline-block; width: auto; margin-top: 18px; padding: 9px 16px; border: 1px solid #a1a1a8; border-radius: 7px; text-decoration: none; color: #242428; }
.mcp-github-button:hover { border-color: #46464d; color: #111; }

.mcp-section { margin-top: 40px; }
.mcp-section h2 { font-size: 14px; font-weight: 500; margin: 0 0 12px; color: #242428; }
.mcp-body { font-size: 13px; color: #55555c; line-height: 1.5; margin: 0 0 10px; }
.mcp-body code { font-size: 12px; }
.mcp-client-label { margin-top: 18px; }

.mcp-code { margin: 0; padding: 16px 18px; border: 1px solid #a1a1a8; border-radius: 7px; background: #fafafa; overflow-x: auto; }
.mcp-code code { font-family: "SF Mono", "Menlo", "Consolas", monospace; font-size: 12.5px; line-height: 1.6; color: #242428; }

.mcp-tool-list { font-size: 13px; }
.mcp-tool-list dt { font-weight: 500; margin-top: 14px; }
.mcp-tool-list dt code { font-size: 13px; }
.mcp-tool-list dd { margin: 4px 0 0; color: #55555c; line-height: 1.5; }

.mcp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mcp-table th, .mcp-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e4e4e7; }
.mcp-table th { color: #85858c; font-weight: 500; }

.mcp-demo { width: min(960px, calc(100% - 44px)); margin: 28px auto 0; }
.mcp-demo-video { display: block; width: 100%; height: auto; border: 1px solid #a1a1a8; border-radius: 7px; background: #000; }

.mcp-footer { margin-top: 60px; justify-self: start; }

@media (max-width: 600px) { .mcp-back { top: auto; left: auto; right: 12px; bottom: 12px; padding: 10px 12px; font-size: 12px; } }
@media (max-width: 460px) { .mcp-demo { width: calc(100% - 36px); margin-top: 18px; } .mcp-shell { padding: 28px 18px 48px; } }