/* /integrations only: way chips, flow list, small cards, code blocks, safety list. Tokens from site.css (BRAND); no shadows or gradients. */
.ig-ways { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.ig-ways li { padding: 6px 14px; border: 1px solid var(--mk-line); border-radius: 999px; background: var(--kz-paper); color: var(--kz-plum); font-size: 14px; font-weight: 700; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin: 0; padding: 0; list-style: none; }
.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.card3 { display: flex; flex-direction: column; padding: clamp(20px, 2vw, 28px); background: var(--kz-milk); border: 1px solid var(--mk-line); border-radius: 24px; }
.sheet.milk .card3 { background: var(--kz-paper); }
.card3 h3 { font-size: clamp(19px, 1.7vw, 22px); }
.card3 p { margin-top: 10px; color: var(--kz-mauve); font-size: 15px; line-height: 1.8; }
.card3 .arrow { margin-top: auto; padding-top: 12px; }
.ig-flow { display: grid; gap: 16px; max-width: 880px; margin: 0 auto; padding: 0; list-style: none; }
.ig-flow > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: clamp(18px, 2vw, 28px); background: var(--kz-paper); border: 1px solid var(--mk-line); border-radius: 24px; }
.ig-flow .num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--kz-rose); color: #fff; font-size: 18px; font-weight: 700; }
.ig-flow h3 { font-size: clamp(18px, 1.7vw, 22px); }
.ig-flow p { margin-top: 8px; color: var(--kz-mauve); font-size: 15px; line-height: 1.8; }
.ig-code { max-width: 100%; margin: 14px 0 0; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--mk-line); border-radius: 14px; background: var(--kz-plum); color: #fff; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.ig-code code { font: inherit; }
.ig-ex { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ig-ex li { padding: 8px 14px; border-radius: 14px; background: var(--kz-blush); color: var(--kz-plum); font-size: 15px; font-weight: 700; }
.ig-flow .ig-n, .ig-cli .ig-n { margin-top: 14px; font-size: 14px; }
.ig-sp { max-width: 880px; margin: clamp(32px, 4vw, 56px) auto 0; }
.ig-sp-h { margin-bottom: 18px; font-size: clamp(20px, 2vw, 26px); text-align: center; }
.ig-get { margin-top: 18px; text-align: center; color: var(--kz-mauve); font-size: 15px; }
.ig-cli { max-width: 880px; margin: 0 auto; }
.ig-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 16px; }
@media (max-width: 960px) { .cards3, .cards2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .ig-flow > li { grid-template-columns: minmax(0, 1fr); gap: 12px; } }