/* ==========================================================================
   Integrations & API
   Only what is specific to this page. The hero, sections, and cards reuse the
   shared site.css components (mbc-hero__*, site-section*, feature-card*), so
   weights stay inside the 400-700 range the variable font faces declare.
   ========================================================================== */

.int-hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 4rem;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(180deg, var(--surface) 0, var(--app-bg) 100%);
}

.int-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 46% at 100% 0, rgba(30, 64, 175, .09) 0, transparent 56%),
    radial-gradient(ellipse 48% 40% at 0 100%, rgba(14, 158, 110, .07) 0, transparent 58%);
}

.int-hero > .container { position: relative; z-index: 1; }

/* State colours on top of .mbc-hero__trust */
.int-status-strip .is-live i { color: var(--accent-emerald); }
.int-status-strip .is-enterprise i { color: var(--accent-amber); }
.int-status-strip .is-unavailable i { color: var(--steel-300); }

/* Data-movement diagram */
.int-flow {
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.int-flow__grid {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr auto 1fr;
  align-items: center;
  gap: .65rem;
}

.int-flow__group {
  display: grid;
  gap: .6rem;
}

.int-flow__label {
  margin-bottom: .1rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.int-flow__node {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem .75rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
}

.int-flow__node i { color: var(--accent-primary); }

.int-flow__core {
  padding: 1.2rem .8rem;
  border-radius: var(--radius-lg);
  background: var(--navy-dark);
  color: #fff;
  text-align: center;
}

.int-flow__core img {
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 auto .65rem;
}

.int-flow__core-title { font-weight: 700; }
.int-flow__core-text { margin-top: .25rem; color: rgba(255, 255, 255, .7); font-size: 0.75rem; line-height: 1.45; }
.int-flow__arrow { color: var(--steel-300); font-size: 1.1rem; }

.int-flow__boundary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: .9rem;
  padding: .65rem .75rem;
  border-radius: var(--radius-md);
  background: var(--app-bg);
  color: var(--steel-400);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

/* Check lists inside cards */
.int-list {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.int-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: var(--text-secondary);
  font-size: 0.97rem;
  line-height: 1.6;
}

.int-list i { flex: 0 0 auto; margin-top: .22rem; color: var(--accent-emerald); }

/* Availability table */
.int-availability {
  overflow: hidden;
  margin-top: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.int-availability__row {
  display: grid;
  grid-template-columns: minmax(180px, 1.05fr) minmax(135px, .65fr) 1.7fr;
  gap: 1rem;
  align-items: center;
  padding: 1.05rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
}

.int-availability__row:last-child { border-bottom: 0; }
.int-availability__row--head { background: var(--app-bg); color: var(--text); font-size: 0.9rem; font-weight: 700; }
.int-availability__name { color: var(--text); font-weight: 600; }
.int-availability__scope { color: var(--text-secondary); font-size: 0.97rem; line-height: 1.6; }

.int-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: .35rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.int-badge--live { background: rgba(14, 158, 110, .12); color: #0b7a55; }
.int-badge--enterprise { background: var(--accent-amber-soft); color: #8a5c10; }
.int-badge--unavailable { background: var(--border); color: var(--steel-400); }

/* Migration sources */
.int-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.5rem;
}

.int-source {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.int-source__name { color: var(--text); font-weight: 600; }
.int-source__method { margin-top: .25rem; color: var(--text-secondary); font-size: 0.88rem; }

.int-callout {
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(30, 64, 175, .07), rgba(14, 158, 110, .05));
}

.int-callout__title { margin-bottom: .55rem; color: var(--text); font-size: 1.06rem; font-weight: 700; }
.int-callout p { margin-bottom: 0; color: var(--text-secondary); font-size: 0.97rem; line-height: 1.6; }

/* Public API status panel */
.int-api-box {
  padding: 2.25rem;
  border: 1px solid var(--navy-light);
  border-radius: var(--radius-xl);
  background: var(--navy-dark);
  box-shadow: var(--shadow-md);
}

.int-api-box__label { color: #7dd3fc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }

.int-api-box__title {
  margin: .7rem 0 .55rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.int-api-box__text { margin: 0; color: rgba(255, 255, 255, .75); font-size: 0.97rem; line-height: 1.6; }

.int-faq .accordion-item {
  overflow: hidden;
  margin-bottom: .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.int-faq .accordion-button { color: var(--text); font-weight: 600; }
.int-faq .accordion-button:not(.collapsed) { background: var(--accent-soft); color: var(--accent-primary); }
.int-faq .accordion-body { color: var(--text-secondary); line-height: 1.6; }

@media (max-width: 991.98px) {
  .int-hero { padding: 4rem 0 3.5rem; }
  .int-flow__grid { grid-template-columns: 1fr; }
  .int-flow__arrow { transform: rotate(90deg); text-align: center; }
  .int-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .int-availability__row { grid-template-columns: 1fr; gap: .45rem; }
  .int-availability__row--head { display: none; }
  .int-source-grid { grid-template-columns: 1fr; }
  .int-api-box { padding: 1.5rem; }
}