.integration-message { display: flex; align-items: flex-start; gap: 18px; margin-bottom: var(--space-7); padding: 28px 30px; border: 1px solid #c9e2df; border-radius: var(--radius-xl); background: linear-gradient(105deg, #eaf8f6 0%, #f7fbfb 70%); }
.integration-message__icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: var(--radius-md); background: var(--color-navy-900); color: var(--color-yellow-500); }
.integration-message__eyebrow { color: var(--color-teal-700); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.integration-message h2 { margin-top: 8px; font-size: clamp(22px, 3vw, 34px); line-height: 1.12; }
.integration-message h2 span { color: var(--color-teal-700); }
.integration-message p { max-width: 780px; margin-top: 11px; font-size: 12px; }
.integration-flow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: var(--space-6); }
.integration-flow__node { display: flex; min-width: 135px; align-items: center; gap: 9px; padding: 13px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-gray-600); }
.integration-flow__node svg { width: 19px; height: 19px; color: var(--color-teal-700); }
.integration-flow__node strong { color: var(--color-navy-950); font-size: 10px; line-height: 1.3; }
.integration-flow__node--active { border-color: var(--color-teal-600); background: var(--color-teal-100); }
.integration-flow__line { width: 30px; height: 1px; background: var(--color-border-strong); }
.integration-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: var(--space-6); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-border); }
.integration-summary > div { padding: 15px; background: var(--color-white); }
.integration-summary strong { display: block; color: var(--color-navy-950); font-size: 20px; }
.integration-summary span { color: var(--color-gray-500); font-size: 10px; }
@media (max-width: 760px) { .integration-flow { align-items: stretch; flex-direction: column; } .integration-flow__node { width: 100%; } .integration-flow__line { width: 1px; height: 18px; align-self: center; } .integration-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }