/* Integration docs reuse the shared product-shell palette without glass effects. */
body.integrations { overflow-y: auto; }
.integrations #app { min-width: 0; }
.integrations .max-w-7xl { max-width: 1120px; }
.integrations header { background: var(--app-bg); }
.integrations .integration-brand { color: var(--app-green); }
.integrations .integration-brand svg { display: block; width: 38px; height: 38px; }
.integrations h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; letter-spacing: -.045em; color: var(--app-amber); }
.integrations .prose { color: var(--app-copy); }
.integrations .prose h2, .integrations .prose h3, .integrations .prose strong { color: var(--app-text); }
.integrations .prose h2 { margin-top: 0; }
.integrations .prose p, .integrations .prose ul { color: var(--app-copy); }
.integrations code { font-family: inherit; }
.integrations .prose code { color: var(--app-green); background: var(--app-panel-2); border-radius: 2px; }
.integrations .prose pre { min-width: 0; max-width: 100%; overflow-x: auto; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 2px; }
.integrations .prose pre code { background: transparent; color: var(--app-text); }
.integrations a:hover { color: var(--app-amber); }
.integrations a:focus-visible, .integrations button:focus-visible, .integrations [tabindex]:focus-visible { outline: 2px solid var(--app-amber); outline-offset: 2px; }
.integrations button { min-height: 44px; min-width: 44px; cursor: pointer; }
.integrations button[aria-pressed] { border: 1px solid var(--app-line); background: var(--app-panel); color: var(--app-copy); }
.integrations button[aria-pressed]:hover { border-color: var(--app-green); color: var(--app-text); }
.integrations button[aria-pressed="true"] { border-color: var(--app-green); background: var(--app-panel-2); color: var(--app-green); box-shadow: inset 3px 0 var(--app-green); }
.integrations .lang-btn { color: var(--app-copy); border: 1px solid transparent; }
.integrations .lang-btn.active { color: var(--app-green); border-color: var(--app-line); }
.installer-command { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-width: 0; padding: 12px; border: 1px solid var(--app-line); background: var(--app-panel-2); }
.installer-command code { flex: 1 1 320px; padding-block: 8px; color: var(--app-green); }
.installer-command button { padding: 10px 14px; border: 1px solid var(--app-amber); color: var(--app-amber); background: var(--app-bg); font-size: 12px; letter-spacing: .08em; }
@media (max-width: 639px) {
  .integrations .p-6 { padding: 16px; }
  .integrations .prose pre { padding: 12px; }
}