/* ============================================================
   INTEGRATIONS — the /integrations/ hub and /integrations/<slug>/ pages.
   The pages and the hub's cards are generated by gen-integrations.mjs from
   integrations/*.json. Colour comes only from the tokens in /styles.css, so
   both themes work unchanged, and every graphic is a themed diagram.

   The deliberate difference from the technical pages: headings are
   sentence-case IBM Plex Sans (`.display-soft` in styles.css), the same
   softer voice /pricing/ uses. Uppercase mono is kept for the small eyebrow
   labels, diagram labels and step numbers. No terminal windows, no code
   blocks, no window chrome, no vendor logos or brand colours — the names of
   other products appear as plain text, and the template renders the
   trademark notice.
   ============================================================ */

/* ---------- breadcrumb ---------- */
.ix-crumbs { margin-bottom: 20px; }
.ix-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 6px;
                font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-2); }
.ix-crumbs li + li::before { content: '›'; margin: 0 10px; color: var(--ink-2); }
.ix-crumbs a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.ix-crumbs a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ix-crumbs [aria-current] { color: var(--ink); }

/* ---------- hero ---------- */
.ix-hero h1 { max-width: 16ch; }
.ix-hero .lede { max-width: 48ch; }
.ix-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.ix-verified { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-2); }

/* the status chip extends .s-status from styles.css with the third state */
.s-status.planned { color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--rule-strong); padding: 2px 8px; }
[data-theme="dark"] .s-status.planned { color: var(--ink-2); }

/* ---------- the lifecycle graphic ---------- */
.ix-graphic { margin-top: 44px; }
.ix-graphic .g-narrow { max-width: 300px; }
.ix-caption {
  margin: clamp(10px, 1.6vw, 18px) 0 4px; padding-left: 16px; border-left: 2px solid var(--accent);
  max-width: 76ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-2);
}
.ix-caption b { color: var(--ink); font-weight: 600; }

/* ---------- capabilities: a card each, small line icon ---------- */
.ix-caps { list-style: none; margin: 44px 0 0; padding: 0;
           display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ix-cap { border: 1px solid var(--rule); background: var(--surface); border-radius: 12px;
          padding: 24px 24px 26px; min-width: 0; display: grid; align-content: start; gap: 10px; }
.ix-cap .ico-tile { width: 42px; height: 42px; border-radius: 11px; }
.ix-cap .ico-tile svg { width: 21px; height: 21px; }
.ix-cap h3 { margin: 8px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.ix-cap p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 1000px) { .ix-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 640px) { .ix-caps { grid-template-columns: 1fr; margin-top: 32px; } }

/* ---------- "not available yet" (status: planned) ---------- */
.ix-planned { border: 1px dashed var(--rule-strong); background: var(--surface); border-radius: 12px;
              padding: clamp(26px, 4vw, 48px); max-width: 68ch; }
.ix-planned h2 { margin-top: 14px; }
.ix-planned p { margin-top: 18px; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
.ix-planned-cta { margin-top: 26px; }

/* ---------- about the tool ---------- */
.ix-prose { margin-top: 26px; color: var(--ink-2); font-size: 17px; line-height: 1.65; max-width: 68ch; }

/* ---------- how it connects: a clean numbered list, never a terminal ---------- */
.ix-steps { list-style: none; margin: 44px 0 0; padding: 0; border-top: 1px solid var(--ink); max-width: 84ch; counter-reset: ix; }
.ix-steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 24px;
               padding: 24px 0 26px; border-bottom: 1px solid var(--rule); }
.ix-step-n { grid-row: span 2; font-family: var(--font-mono); font-size: 26px; font-weight: 600;
             letter-spacing: -.03em; color: var(--ink-3); line-height: 1.1; }
.ix-steps h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.ix-steps p:not(.ix-step-n) { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 560px) {
  .ix-steps { margin-top: 32px; }
  .ix-steps li { grid-template-columns: 1fr; padding: 20px 0 22px; }
  .ix-step-n { grid-row: auto; font-size: 20px; margin-bottom: 4px; }
}

/* ---------- scope: honest caveats, shown plainly, never hidden ---------- */
.ix-notes { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; max-width: 76ch; }
.ix-notes li { position: relative; padding: 16px 20px 16px 46px; border: 1px solid var(--rule);
               border-radius: 10px; background: var(--surface); color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.ix-notes li::before { content: ''; position: absolute; left: 20px; top: 1.55em; width: 12px; height: 0;
                       border-top: 1.8px solid var(--ink-3); }
.ix-notes b { color: var(--ink); font-weight: 600; }

/* ---------- cards: the hub grid and the related row ---------- */
.ix-cards { list-style: none; margin: 0; padding: 0;
            display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ix-card { border: 1px solid var(--rule); background: var(--surface); border-radius: 12px;
           padding: 20px 22px 22px; min-width: 0; display: flex; flex-direction: column; gap: 10px;
           transition: border-color .15s ease; }
.ix-card:hover { border-color: var(--accent); }
.ix-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ix-card-cat { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ix-card-name { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.018em; line-height: 1.2; }
.ix-card-name a { text-decoration: none; color: var(--ink); }
/* the whole card is the hit area; the link keeps the accessible name */
.ix-card-name a::after { content: ''; position: absolute; inset: 0; }
.ix-card { position: relative; }
.ix-card:hover .ix-card-name a { color: var(--accent-hover); }
.ix-card-tag { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.ix-card-go { margin-top: auto; padding-top: 6px; font-family: var(--font-mono); font-size: 12px;
              font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 1200px) { .ix-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ix-cards { grid-template-columns: 1fr; } }
/* inside a stage row the cards have ~900px, so two up reads better than three */
.ix-stage .ix-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .ix-stage .ix-cards { grid-template-columns: 1fr; } }

.ix-cards-rel { margin-top: 44px; }
.ix-all { margin-top: 28px; }

/* ---------- hub: one block per lifecycle stage ----------
   Heading, its one line and the count sit in a column beside the cards. That is
   what keeps a stage with a single integration looking deliberate instead of like
   a three-up grid with two holes in it — the copy column carries the row. */
.ix-stage { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 56px);
            align-items: start; border-top: 1px solid var(--ink); padding: 28px 0 0; margin-top: 40px; }
.ix-stage:first-of-type { margin-top: 44px; }
.ix-stage-head { position: sticky; top: 90px; }
.ix-stage-n { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
              text-transform: uppercase; color: var(--accent-hover); }
.ix-stage-h { margin: 8px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.ix-stage-intro { margin-top: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 34ch; }
.ix-stage-count { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
                  text-transform: uppercase; color: var(--ink-2); }
.ix-empty { margin-top: 32px; color: var(--ink-2); font-size: 16px; }
@media (max-width: 900px) {
  .ix-stage { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; margin-top: 30px; }
  .ix-stage-head { position: static; }
  .ix-stage-intro { max-width: 52ch; }
}

/* ---------- the numbered stage chips on an integration page ---------- */
.ix-stage-chips { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ix-stage-chip { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
                 font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em;
                 text-transform: uppercase; color: var(--accent-hover);
                 background: var(--accent-soft); border: 1px solid transparent; border-radius: 99px; padding: 5px 12px; }
.ix-stage-chip span { color: var(--accent); opacity: .75; }
.ix-stage-chip:hover { border-color: var(--accent); }
.ix-stage-chip.under { color: var(--ink-2); background: none; border-color: var(--rule-strong); }
.ix-stage-chip.under:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- hub: "don't see yours?" band ---------- */
.ix-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 72px);
           align-items: center; border: 1px solid var(--rule); background: var(--surface); border-radius: 12px;
           padding: clamp(24px, 4vw, 48px); margin-top: clamp(44px, 5vw, 64px); }
.ix-band h2 { margin-top: 14px; }
.ix-band p { color: var(--ink-2); font-size: 16.5px; max-width: 46ch; }
.ix-band-cta { margin-top: 24px; }
@media (max-width: 820px) { .ix-band { grid-template-columns: 1fr; } }

/* ---------- closing band: the brand dark surface, as on /pricing/ ---------- */
.ix-closer { background: var(--panel); color: var(--panel-ink); padding: clamp(56px, 7vw, 92px) 0 clamp(28px, 3vw, 40px); }
.ix-closer-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: end; }
.ix-closer .tag { color: var(--panel-ink-2); }
.ix-closer h2 { color: var(--panel-ink); margin-top: 16px; max-width: 18ch; }
.ix-closer p { color: var(--panel-ink-2); font-size: 16.5px; margin-top: 18px; max-width: 54ch; }
.ix-closer .btn-ghost { color: var(--panel-ink); border-color: var(--panel-rule); }
.ix-closer .btn-ghost:hover { color: var(--violet-300); border-color: var(--violet-300); }
.ix-tm { padding-top: clamp(28px, 4vw, 44px); }
.ix-tm p { border-top: 1px solid var(--panel-rule); padding-top: 18px; font-family: var(--font-mono);
           font-size: 11.5px; letter-spacing: .04em; line-height: 1.6; color: var(--panel-ink-3); }
@media (max-width: 900px) { .ix-closer-in { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 420px) { .ix-closer .btn, .ix-hero .btn { white-space: normal; } }

/* ---------- hub hero ---------- */
.ix-hub-hero h1 { max-width: 20ch; }
.ix-hub-hero .lede { max-width: 52ch; }
.ix-map { margin-top: 44px; }
.ix-map .g-narrow { max-width: 300px; }
.ix-map-note { margin: clamp(10px, 1.6vw, 18px) 0 4px; padding-left: 16px; border-left: 2px solid var(--rule-strong);
               max-width: 82ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ix-map-note b { color: var(--ink); font-weight: 600; }