/* Сторінки інтеграцій (`САЙТ-ІНТЕГРАЦІЇ`, Р104): сервіс, категорія, хаб. Розмітку дає
 * `tools/integrations-render.mjs`; файл підключається ПІСЛЯ `лендінг.css` лише на сторінках `/<мова>/integrations/…`
 * і бере його токени (`--ba-*`, `--site-*`), шапку, підвал, `.hero`, `.crumbs`, `.btn`, `.faq`, `.section`.
 * Нові величини — токенами `--int-*` нижче. Рейтингів, відгуків і лічильників підключень у шаблоні немає (п. 8).
 * Хто править вигляд (Р108): дрібні правки цього шаблону — ми, з рядком у CHANGELOG; нова сторінка чи перекомпонування —
 * замовлення виконавцю. */

:root {
  --int-logo-lg: 64px;
  --int-logo-sm: 32px;
  --int-badge-h: 28px;
  --int-card-min: 220px;
  --int-scn-min: 320px;
  --int-path-min: 340px;
  --int-tile-min: 280px;
  --int-tile-icon: 40px;
  --int-mono: 22px;
  --int-tile-glyph: 20px;
  --int-aside-w: 360px;
  --int-form-w: 420px;
  --int-lead-w: 62ch;
  --int-dir-w: 48px;
}

/* ── Герой ─────────────────────────────────────────────────────────────── */
.int-hero { padding-bottom: var(--site-sp-64); }
.int-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--site-sp-48); align-items: start; }
.int-hero__grid--form { grid-template-columns: minmax(0, 1fr) minmax(0, var(--int-form-w)); }
.int-hero__text { display: flex; flex-direction: column; align-items: flex-start; }
.int-hero__title { margin-top: 0; text-wrap: balance; max-width: 22ch; }
.int-hero__title.hero__title--long { max-width: 26ch; }
.int-hero__lead { max-width: var(--int-lead-w); text-wrap: pretty; }
.int-hero__logos { display: flex; align-items: center; gap: var(--ba-sp-12); margin-bottom: var(--ba-sp-24); }
.int-hero__plus { color: var(--ba-ink-3); font-size: var(--site-fs-h3); }
.int-hero__mark { display: grid; place-items: center; width: var(--int-logo-lg); height: var(--int-logo-lg); border-radius: var(--ba-radius-card); background: var(--ba-accent); color: var(--ba-on-accent); font: var(--ba-fw-semi) var(--site-fs-h2)/1 var(--ba-font-display); }
.int-hero__status { display: flex; flex-direction: column; gap: var(--ba-sp-12); margin-top: var(--ba-sp-24); }
.int-hero .actions { margin-top: var(--ba-sp-32); }
.int-hero__updated { margin-top: var(--ba-sp-16); }
.int-hero--hub .int-hero__text, .int-hero--category .int-hero__text { max-width: var(--site-w-text); }

.int-logo { flex: none; object-fit: contain; border-radius: var(--ba-radius-card); background: var(--ba-surface); border: 1px solid var(--ba-line-soft); }
.int-logo--lg { width: var(--int-logo-lg); height: var(--int-logo-lg); padding: var(--ba-sp-8); }
.int-logo--sm { width: var(--int-logo-sm); height: var(--int-logo-sm); padding: var(--ba-sp-4); }
.int-logo--xs { width: var(--int-mono); height: var(--int-mono); padding: 2px; border-radius: var(--ba-radius-pill); }

/* ── Бейдж статусу (прийом `.cmp__st` / `.cmp-tip`, 09.10) ─────────────── */
.int-badges { display: flex; flex-wrap: wrap; gap: var(--ba-sp-8); list-style: none; margin: 0; padding: 0; }
.int-badge { position: relative; }
.int-st { display: inline-flex; align-items: center; gap: var(--ba-sp-8); min-height: var(--int-badge-h); padding: 0 var(--ba-sp-12); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-pill); background: var(--ba-surface); color: var(--ba-ink); font-size: var(--site-fs-small); font-weight: var(--ba-fw-medium); line-height: 1.2; }
.int-badge .int-st { cursor: help; }
.int-badge .int-st:focus { outline: none; }
.int-badge .int-st:focus-visible { outline: var(--site-rule) solid var(--ba-accent); outline-offset: var(--ba-sp-4); }
.int-st svg { flex: none; width: var(--ba-sp-16); height: var(--ba-sp-16); }
.int-st--native { border-color: var(--ba-ok-line); background: var(--ba-ok-soft); }
.int-st--native svg { color: var(--ba-ok); }
.int-st--builtin { border-color: var(--ba-accent-soft-2); background: var(--ba-accent-soft); }
.int-st--builtin svg { color: var(--ba-accent-strong); }
.int-st--api { border-color: var(--ba-info-line); background: var(--ba-info-soft); }
.int-st--api svg { color: var(--ba-info); }
.int-st--aggregator { border-color: var(--ba-line-strong); background: var(--ba-warn-soft); }
.int-st--aggregator svg { color: var(--ba-warn); }
.int-st--request { border-style: dashed; border-color: var(--ba-line-strong); color: var(--ba-ink-2); }
.int-st--request svg { color: var(--ba-ink-3); }
.int-st__label { text-decoration: underline dotted var(--ba-line-strong); text-underline-offset: var(--ba-sp-4); }
.int-tip { display: none; position: absolute; z-index: 5; left: 0; top: calc(100% + var(--ba-sp-8)); width: max-content; max-width: var(--site-tip-w); padding: var(--ba-sp-8) var(--ba-sp-12); border-radius: var(--ba-radius); background: var(--ba-ink); color: var(--ba-surface); box-shadow: var(--ba-sh-2); font-size: var(--site-fs-small); font-weight: var(--ba-fw-normal); line-height: var(--ba-lh-base); text-wrap: pretty; }
.int-badge:hover .int-tip, .int-st:focus + .int-tip { display: block; }
.int-badges--compact { gap: var(--ba-sp-4); }
.int-badges--compact .int-st { min-height: 0; padding: var(--ba-sp-4) var(--ba-sp-8); font-size: var(--site-fs-kicker); gap: var(--ba-sp-4); }
.int-badges--compact .int-st svg { width: var(--ba-sp-12); height: var(--ba-sp-12); }

.int-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ba-sp-4) var(--ba-sp-8); font-size: var(--site-fs-small); color: var(--ba-ink-2); }
.int-platforms__label { color: var(--ba-ink-3); margin-right: var(--ba-sp-4); }
.int-platforms__item { padding: 0 var(--ba-sp-8); border-radius: var(--ba-radius); background: var(--ba-surface-sunken); color: var(--ba-ink); font-weight: var(--ba-fw-medium); line-height: 1.8; }

/* ── Блоки ─────────────────────────────────────────────────────────────── */
.int-sec { padding: var(--site-sp-64) 0; }
.int-sec--first { padding-top: var(--site-sp-48); }
.int-sec--tight { padding-top: 0; }
.int-sec__title { margin-bottom: var(--ba-sp-32); }
.int-sec__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ba-sp-16); margin-bottom: var(--ba-sp-32); }
.int-sec__bar .int-sec__title { margin-bottom: 0; }
.int-sec code, .int-hero code { font-family: var(--ba-font-mono); font-size: .9em; padding: 0 var(--ba-sp-4); border-radius: var(--ba-radius); background: var(--ba-surface-sunken); color: var(--ba-ink); overflow-wrap: anywhere; }

.int-scenarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--int-scn-min)), 1fr)); gap: var(--site-gap); }
.int-scn { display: flex; flex-direction: column; gap: var(--ba-sp-8); padding-top: var(--ba-sp-16); border-top: var(--site-rule) solid var(--ba-accent); }
.int-scn__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.int-scn__text { color: var(--ba-ink-2); text-wrap: pretty; }

/* Таблиця потоку: сервіс | стрілка | Krokul | коли. На телефоні — картка на рядок (нижче). */
.int-flow-wrap { border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); background: var(--ba-surface); overflow: hidden; }
.int-flow { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--site-fs-body); }
.int-flow th, .int-flow td { padding: var(--ba-sp-12) var(--ba-sp-16); text-align: left; vertical-align: top; border-bottom: 1px solid var(--ba-line-soft); color: var(--ba-ink-2); text-wrap: pretty; overflow-wrap: break-word; }
.int-flow thead th { font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); color: var(--ba-ink); background: var(--ba-surface-sunken); border-bottom-color: var(--ba-line); }
.int-flow tbody th { font-weight: var(--ba-fw-medium); color: var(--ba-ink); }
.int-flow tbody tr:last-child > * { border-bottom: 0; }
.int-flow thead th:nth-child(1), .int-flow thead th:nth-child(3) { width: 30%; }
.int-flow .int-flow__dir { width: var(--int-dir-w); padding-left: 0; padding-right: 0; text-align: center; color: var(--ba-accent); }
.int-flow__dir svg { width: var(--site-icon); height: var(--site-icon); vertical-align: middle; }
.int-flow__dirtext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.int-flow__when { color: var(--ba-ink-3); }

/* Підключення: шляхи ліворуч, «Для інтеграторів» праворуч. */
.int-connect { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--int-aside-w)); gap: var(--site-gap); align-items: start; }
.int-connect__main { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--int-path-min)), 1fr)); gap: var(--site-gap); }
.int-path__title, .int-ops__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); margin-bottom: var(--ba-sp-12); }
.int-steps { counter-reset: int-step; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ba-sp-12); }
.int-steps li { counter-increment: int-step; position: relative; padding-left: calc(var(--ba-sp-24) + var(--ba-sp-12)); color: var(--ba-ink-2); text-wrap: pretty; }
.int-steps li::before { content: counter(int-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--ba-sp-24); height: var(--ba-sp-24); border-radius: var(--ba-radius-pill); background: var(--ba-accent-soft); color: var(--ba-accent-strong); font: var(--ba-fw-semi) var(--site-fs-small)/1 var(--ba-font); }
.int-ops { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--int-card-min)), 1fr)); gap: var(--site-gap); padding-top: var(--ba-sp-24); border-top: 1px solid var(--ba-line-soft); }
.int-ops__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ba-sp-8); }
.int-ops__list li { padding: var(--ba-sp-4) var(--ba-sp-8); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); font-size: var(--site-fs-small); color: var(--ba-ink); }
.int-integrators { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding: var(--ba-sp-24); border-radius: var(--ba-radius-card); background: var(--ba-surface-sunken); color: var(--ba-ink-2); text-wrap: pretty; }
.int-integrators__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); color: var(--ba-ink); }
.int-integrators__link { font-weight: var(--ba-fw-semi); }

/* Картки сервісів (пов'язані, категорія). Логотипа немає — назва текстом, картка тієї ж висоти. */
.int-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--int-card-min)), 1fr)); gap: var(--ba-sp-16); }
.int-card-li[hidden] { display: none; }
.int-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ba-sp-12); width: 100%; height: 100%; padding: var(--ba-sp-16); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); background: var(--ba-surface); color: var(--ba-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--ba-dur-base) var(--ba-ease-out), background var(--ba-dur-base) var(--ba-ease-out); }
.int-card:hover { color: var(--ba-ink); border-color: var(--ba-accent); background: var(--ba-fill-hover); }
.int-card:focus-visible { outline: var(--site-rule) solid var(--ba-accent); outline-offset: var(--site-rule); }
.int-card__head { display: flex; align-items: center; gap: var(--ba-sp-12); width: 100%; min-width: 0; }
.int-card__name { min-width: 0; font-family: var(--ba-font-display); font-weight: var(--ba-fw-semi); font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); overflow-wrap: break-word; }
.int-card__cat { font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.int-card .int-badges { margin-top: auto; }

.int-chips { display: flex; flex-wrap: wrap; gap: var(--ba-sp-8); }
.int-chip { display: inline-flex; align-items: center; gap: var(--ba-sp-8); min-height: calc(var(--site-btn-h) - var(--ba-sp-12)); padding: 0 var(--ba-sp-12); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-pill); background: var(--ba-surface); color: var(--ba-ink-2); font: var(--ba-fw-medium) var(--site-fs-small)/1 var(--ba-font); cursor: pointer; }
.int-chip svg { width: var(--ba-sp-16); height: var(--ba-sp-16); color: var(--ba-ink-3); }
.int-chip:hover { border-color: var(--ba-line-strong); color: var(--ba-ink); }
.int-chip[aria-pressed="true"] { border-color: var(--ba-ink); background: var(--ba-ink); color: var(--ba-surface); }
.int-chip[aria-pressed="true"] svg { color: currentColor; }
.int-chip:focus-visible { outline: var(--site-rule) solid var(--ba-accent); outline-offset: var(--site-rule); }

/* Хвіст: обмеження, форма, дисклеймер. */
.int-tail { padding-top: 0; }
.int-tail__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--int-form-w)); gap: var(--site-gap); align-items: start; }
.int-tail__grid > .int-trademark { grid-column: 1 / -1; }
.int-limits { display: flex; flex-direction: column; gap: var(--ba-sp-8); max-width: var(--site-w-text); color: var(--ba-ink-2); text-wrap: pretty; }
.int-limits__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); color: var(--ba-ink); }
.int-trademark { padding-top: var(--ba-sp-24); border-top: 1px solid var(--ba-line-soft); font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.int-other__list { list-style: none; margin: var(--ba-sp-8) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ba-sp-8) var(--ba-sp-24); font-weight: var(--ba-fw-medium); }

/* ── Форма «Хочу цю інтеграцію»: стани — data-state секції ──────────────── */
.int-request { display: flex; flex-direction: column; gap: var(--ba-sp-12); padding: var(--ba-sp-24); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); background: var(--ba-surface); box-shadow: var(--site-sh-strip); scroll-margin-top: calc(var(--site-header-h) + var(--ba-sp-16)); }
.int-request__title { font-size: var(--site-fs-h3); line-height: var(--ba-lh-tight); }
.int-request__lead { color: var(--ba-ink-2); text-wrap: pretty; }
.int-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ba-sp-12) var(--ba-sp-16); margin-top: var(--ba-sp-4); }
.int-request--compact .int-form { grid-template-columns: minmax(0, 1fr); }
.int-field { display: flex; flex-direction: column; gap: var(--ba-sp-4); min-width: 0; }
.int-field--what, .int-field--service, .int-form__foot { grid-column: 1 / -1; }
.int-field__label { font-size: var(--site-fs-small); font-weight: var(--ba-fw-medium); color: var(--ba-ink); }
.int-input { width: 100%; min-height: calc(var(--site-btn-h) - var(--ba-sp-8)); padding: 0 var(--ba-sp-12); border: 1px solid var(--ba-line-strong); border-radius: var(--ba-radius); background: var(--ba-surface); font: var(--site-fs-body) var(--ba-font); color: var(--ba-ink); }
textarea.int-input { padding: var(--ba-sp-8) var(--ba-sp-12); line-height: var(--ba-lh-base); resize: vertical; }
.int-input:focus { outline: none; border-color: var(--ba-accent); box-shadow: var(--ba-ring); }
.int-input:user-invalid { border-color: var(--ba-danger); }
.int-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ba-sp-12); }
.int-form__busy, .int-form__error, .int-request__sent { display: none; }
.int-request[data-state="sending"] .int-form__idle { display: none; }
.int-request[data-state="sending"] .int-form__busy { display: inline; }
.int-request[data-state="sending"] .btn { opacity: .7; cursor: progress; }
.int-request[data-state="error"] .int-form__error { display: block; flex-basis: 100%; padding: var(--ba-sp-8) var(--ba-sp-12); border: 1px solid var(--ba-danger-line); border-radius: var(--ba-radius); background: var(--ba-danger-soft); color: var(--ba-ink-2); font-size: var(--site-fs-small); }
.int-request[data-state="sent"] .int-form { display: none; }
.int-request[data-state="sent"] .int-request__sent { display: flex; align-items: flex-start; gap: var(--ba-sp-8); padding: var(--ba-sp-12); border-radius: var(--ba-radius); background: var(--ba-ok-soft); color: var(--ba-ink); }
.int-request__sent svg { flex: none; width: var(--site-icon); height: var(--site-icon); color: var(--ba-ok); }

/* ── Хаб ───────────────────────────────────────────────────────────────── */
.int-search { position: relative; display: flex; width: 100%; max-width: var(--site-w-text); margin-top: var(--ba-sp-32); }
.int-search svg { position: absolute; left: var(--ba-sp-16); top: 50%; translate: 0 -50%; width: var(--site-icon); height: var(--site-icon); color: var(--ba-ink-3); pointer-events: none; }
.int-search__input { flex: 1; min-width: 0; min-height: var(--site-btn-h); padding: 0 var(--ba-sp-16) 0 calc(var(--ba-sp-16) + var(--site-icon) + var(--ba-sp-8)); border: 1px solid var(--ba-line-strong); border-radius: var(--ba-radius); background: var(--ba-surface); font: var(--site-fs-lead) var(--ba-font); color: var(--ba-ink); }
.int-search__input::placeholder { color: var(--ba-ink-3); }
.int-search__input:focus { outline: none; border-color: var(--ba-accent); box-shadow: var(--ba-ring); }
.int-hub { display: flex; flex-direction: column; gap: var(--ba-sp-24); }
.int-hub__filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ba-sp-16) var(--ba-sp-24); }
.int-hub__filters .int-field { width: min(100%, 18rem); }
.int-hub__note { margin-top: var(--ba-sp-12); font-size: var(--site-fs-small); color: var(--ba-ink-3); }
.int-hub__note:empty { display: none; }
.int-hub__empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ba-sp-16); padding: var(--ba-sp-24); border: 1px dashed var(--ba-line-strong); border-radius: var(--ba-radius-card); color: var(--ba-ink-2); }
.int-hub__empty[hidden], .int-hub__results[hidden], .int-hub__tiles[hidden] { display: none; }
.int-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); overflow: hidden; }
.int-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--ba-sp-16); padding: var(--ba-sp-12) var(--ba-sp-16); border-bottom: 1px solid var(--ba-line-soft); }
.int-row:last-child { border-bottom: 0; }
.int-row__name { min-width: 0; font-weight: var(--ba-fw-semi); color: var(--ba-ink); overflow-wrap: break-word; }
.int-row__cat { display: block; font-size: var(--site-fs-small); color: var(--ba-ink-3); font-weight: var(--ba-fw-normal); }
.int-row__go { font: var(--ba-fw-semi) var(--site-fs-small)/1 var(--ba-font); color: var(--ba-accent-strong); background: none; border: 0; padding: var(--ba-sp-8) 0; cursor: pointer; white-space: nowrap; }
.int-row__go:hover { color: var(--ba-accent-press); }
/* Картка категорії (15.10): уся картка веде в категорію (посилання назви розтягнуте `::after`), приклади сервісів і
 * «ще N» лежать над ним (`z-index`) і ведуть кожен на свою сторінку. */
.int-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--int-tile-min)), 1fr)); gap: var(--site-gap); }
.int-tile { position: relative; display: flex; flex-direction: column; gap: var(--ba-sp-16); height: 100%; padding: var(--ba-sp-16) var(--ba-sp-16) var(--ba-sp-12); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-card); background: var(--ba-surface); color: var(--ba-ink); transition: border-color var(--ba-dur-base) var(--ba-ease-out), box-shadow var(--ba-dur-base) var(--ba-ease-out), transform var(--ba-dur-base) var(--ba-ease-out); }
.int-tile:hover { border-color: var(--ba-accent-soft-2); box-shadow: var(--ba-sh-2); transform: translateY(-2px); }
.int-tile:focus-within { border-color: var(--ba-accent); }
.int-tile__top { display: flex; align-items: flex-start; gap: var(--ba-sp-12); }
.int-tile__icon { display: grid; place-items: center; flex: none; width: var(--int-tile-icon); height: var(--int-tile-icon); border-radius: var(--ba-radius-card); background: var(--ba-accent-soft); color: var(--ba-accent-strong); }
.int-tile__icon svg { width: var(--int-tile-glyph); height: var(--int-tile-glyph); }
.int-tile__name { flex: 1; min-width: 0; margin: 0; font-family: var(--ba-font-display); font-size: var(--site-fs-h3); font-weight: var(--ba-fw-semi); line-height: var(--ba-lh-tight); text-wrap: balance; }
.int-tile__link { color: var(--ba-ink); }
.int-tile__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.int-tile:hover .int-tile__link { color: var(--ba-accent-strong); }
.int-tile__link:focus-visible { outline: none; }
.int-tile__count { flex: none; min-width: var(--int-badge-h); padding: var(--ba-sp-4) var(--ba-sp-8); border-radius: var(--ba-radius-pill); background: var(--ba-fill-hover); font-size: var(--site-fs-small); font-weight: var(--ba-fw-medium); line-height: 1.2; text-align: center; color: var(--ba-ink-2); font-variant-numeric: tabular-nums; }
.int-tile__exs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ba-sp-8); }
.int-tile__ex, .int-tile__more { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--ba-sp-8); min-height: var(--int-badge-h); padding: var(--ba-sp-4) var(--ba-sp-12) var(--ba-sp-4) var(--ba-sp-4); border: 1px solid var(--ba-line); border-radius: var(--ba-radius-pill); background: var(--ba-surface); color: var(--ba-ink); font-size: var(--site-fs-small); font-weight: var(--ba-fw-medium); line-height: 1.2; }
a.int-tile__ex:hover { border-color: var(--ba-accent); color: var(--ba-accent-strong); }
.int-tile__more { padding-left: var(--ba-sp-12); border-style: dashed; color: var(--ba-ink-2); }
.int-tile__more:hover { border-color: var(--ba-accent); color: var(--ba-accent-strong); }
.int-mono { display: grid; place-items: center; flex: none; width: var(--int-mono); height: var(--int-mono); border-radius: var(--ba-radius-pill); font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-semi); line-height: 1; }
.int-mono--0 { background: var(--ba-accent-soft); color: var(--ba-accent-strong); }
.int-mono--1 { background: var(--ba-ok-soft); color: var(--ba-ok); }
.int-mono--2 { background: var(--ba-info-soft); color: var(--ba-info); }
.int-mono--3 { background: var(--ba-warn-soft); color: var(--ba-warn); }
.int-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ba-sp-12); margin-top: auto; padding-top: var(--ba-sp-12); border-top: 1px solid var(--ba-line-soft); }
.int-tile__mix { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ba-sp-4) var(--ba-sp-12); }
.int-tile__mix-i { display: inline-flex; align-items: center; gap: var(--ba-sp-4); font-size: var(--site-fs-small); color: var(--ba-ink-3); font-variant-numeric: tabular-nums; }
.int-tile__mix-i b { font-weight: var(--ba-fw-semi); color: var(--ba-ink); }
.int-tile__mix-i svg { width: var(--ba-sp-16); height: var(--ba-sp-16); }
.int-tile__mix-i--native svg { color: var(--ba-ok); }
.int-tile__mix-i--builtin svg { color: var(--ba-accent-strong); }
.int-tile__mix-i--api svg { color: var(--ba-info); }
.int-tile__mix-i--request svg { color: var(--ba-ink-3); }
.int-tile__mix-i--aggregator svg { color: var(--ba-warn); }
.int-tile__go { display: inline-flex; color: var(--ba-ink-3); transition: transform var(--ba-dur-base) var(--ba-ease-out), color var(--ba-dur-base) var(--ba-ease-out); }
.int-tile__go svg { width: var(--ba-sp-16); height: var(--ba-sp-16); }
.int-tile:hover .int-tile__go { color: var(--ba-accent-strong); transform: translateX(var(--ba-sp-4)); }
@media (prefers-reduced-motion: reduce) { .int-tile, .int-tile__go { transition: none; } .int-tile:hover, .int-tile:hover .int-tile__go { transform: none; } }
.int-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--int-card-min)), 1fr)); gap: var(--site-gap); }
.int-legend__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ba-sp-12); }
.int-legend__item dd { margin: 0; color: var(--ba-ink-2); text-wrap: pretty; }
.int-legend__note { margin-top: var(--ba-sp-24); color: var(--ba-ink-3); font-size: var(--site-fs-small); }

/* ── Ширини ────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .int-hero__grid--form, .int-connect, .int-tail__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .int-sec { padding: var(--site-sp-48) 0; }
  .int-form { grid-template-columns: minmax(0, 1fr); }
  .int-hero__title, .int-hero__title.hero__title--long { max-width: none; }
  /* Таблиця потоку — картка на рядок: «Нова пошта → Krokul» словами замість стрілки, «коли» окремим рядком. */
  .int-flow, .int-flow tbody, .int-flow tr, .int-flow th, .int-flow td { display: block; width: auto; }
  .int-flow thead { display: none; }
  .int-flow tr { padding: var(--ba-sp-12) var(--ba-sp-16); border-bottom: 1px solid var(--ba-line-soft); }
  .int-flow tbody tr:last-child { border-bottom: 0; }
  .int-flow th, .int-flow td { padding: var(--ba-sp-4) 0; border-bottom: 0; }
  .int-flow td::before, .int-flow tbody th::before { content: attr(data-label); display: block; font-size: var(--site-fs-kicker); font-weight: var(--ba-fw-medium); color: var(--ba-ink-3); }
  .int-flow .int-flow__dir { width: auto; text-align: left; color: var(--ba-ink-2); }
  .int-flow .int-flow__dir svg { display: none; }
  .int-flow__dirtext { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .int-row { grid-template-columns: minmax(0, 1fr) auto; }
  .int-row .int-badges { grid-column: 1 / -1; grid-row: 2; }
}
/* На дотик пояснення статусу стоїть під бейджем, а не в спливній підказці (як у таблицях порівнянь). */
@media (max-width: 720px), (hover: none) {
  .int-hero .int-badges { flex-direction: column; align-items: flex-start; }
  .int-tip, .int-st:focus + .int-tip { display: block; position: static; width: auto; max-width: var(--int-lead-w); margin-top: var(--ba-sp-4); padding: 0; background: none; color: var(--ba-ink-3); box-shadow: none; }
  .int-st__label { text-decoration: none; }
  .int-badge .int-st { cursor: default; }
}
/* Низьке вікно (1280×680, правило `САЙТ-ГЕРОЇ-680`): герой сервісу вміщає заголовок, лід, бейджі й кнопки. */
@media (min-width: 1024px) and (max-height: 760px) {
  .int-hero { padding-bottom: var(--site-sp-48); }
  .int-hero__status { margin-top: var(--ba-sp-16); }
  .int-hero .actions { margin-top: var(--ba-sp-24); }
  .int-hero__logos { margin-bottom: var(--ba-sp-16); }
}