/* Public, unauthenticated /integrations reference page (integrations_public.html).
   Built on the legal.css document shell (same as /about, /docs, /contact) —
   this file only adds the handful of things that shell doesn't already cover:
   a code sample, the "coming soon" mini-cards, an FAQ accordion, and the
   closing CTA band. */

/* ── Script-tag sample ───────────────────────────────────────────────────── */
.ipx-code {
  overflow-x: auto;
  background: var(--well);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0 18px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--accent);
  white-space: pre;
}
.ipx-code code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }

/* ── Coming soon mini-cards ───────────────────────────────────────────────── */
.ipx-soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ipx-soon-card {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--well);
  border: 1px dashed var(--glass-border);
}
.ipx-soon-name { font-size: 12.5px; font-weight: 650; color: var(--heading); }
.ipx-soon-tag { font-size: 11px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }

/* ── FAQ accordion ────────────────────────────────────────────────────────
   Native <details>/<summary> on purpose: the answer text sits in the DOM
   before any interaction, so it's there for a crawler and for in-page find,
   and it needs no JS to open, close or be keyboard-operable. */
.ipx-faq { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ipx-faq-item {
  border-radius: 11px;
  background: var(--well);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
.ipx-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  font-size: 13px; font-weight: 600; color: var(--heading);
  cursor: pointer; list-style: none;
}
.ipx-faq-item summary::-webkit-details-marker { display: none; }
.ipx-faq-ic {
  flex-shrink: 0; width: 16px; height: 16px; position: relative;
}
.ipx-faq-ic::before, .ipx-faq-ic::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: var(--text-muted); transition: transform .2s;
}
.ipx-faq-ic::before { width: 10px; height: 2px; transform: translate(-50%, -50%); }
.ipx-faq-ic::after { width: 2px; height: 10px; transform: translate(-50%, -50%); }
.ipx-faq-item[open] .ipx-faq-ic::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
.ipx-faq-item[open] summary { color: var(--accent); }
.ipx-faq-a { padding: 0 16px 15px; }
.ipx-faq-a p {
  margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.6;
}

/* ── Closing CTA band ─────────────────────────────────────────────────────── */
.ipx-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--accent-tint-08);
  border: 1px solid var(--accent-tint-30);
}
.ipx-cta-title { font-size: 15px; font-weight: 650; color: var(--heading); }
.ipx-cta-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.ipx-cta .btn-primary { flex-shrink: 0; }

@media (max-width: 640px) {
  .ipx-cta { flex-direction: column; align-items: flex-start; }
}