/* KariAdel integration explainers: only /telegram.html and /api-for-agents.html. */
.integration-page{background:#f6f5f0;color:#223c30}
.integration-page main{padding-bottom:26px}
.integration-page .topbar{min-height:76px}
.integration-shell{max-width:1160px;margin:0 auto;padding:26px clamp(20px,4vw,55px) 46px}
.integration-breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:11px;color:#788475;margin-bottom:16px}
.integration-breadcrumbs a:hover{text-decoration:underline}
.integration-intro{background:#fffefa;border:1px solid #dee4d6;border-radius:20px;padding:27px 32px 24px;box-shadow:0 8px 35px #203a2d05}
.integration-intro-head{display:flex;align-items:center;gap:9px;color:#58744a;font-size:11px;font-weight:650;letter-spacing:.9px;text-transform:uppercase}
.integration-intro-head img{width:22px;height:22px}
.integration-intro h1{font-size:clamp(24px,2.8vw,35px);line-height:1.24;font-weight:650;letter-spacing:-.8px;margin:12px 0 10px}
.integration-intro>p{color:#647461;font-size:14px;line-height:1.7;max-width:850px}
.integration-flow{display:flex;align-items:center;flex-wrap:wrap;gap:9px 12px;padding:19px 0 2px}
.integration-flow .step{display:inline-flex;gap:7px;align-items:center;padding:9px 13px;background:#eaf0e2;border:1px solid #d5dfcc;border-radius:9px;color:#34563f;font-size:12px;font-weight:650}
.integration-flow .step.final{background:#23523f;border-color:#23523f;color:#fff}
.integration-flow .arrow{font-size:19px;color:#a1b09a}
.integration-small{font-size:11px!important;color:#899482!important;margin-top:12px}
.integration-section{margin-top:20px}
.integration-section-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:11px;margin:0 0 13px}
.integration-section-heading h2{font-size:19px;line-height:1.35;font-weight:650;letter-spacing:-.25px}
.integration-section-heading p{font-size:12px;color:#7e8b7a}
.integration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.integration-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.integration-card{border:1px solid #dfe5d8;background:#fff;border-radius:13px;padding:19px 21px;min-width:0}
.integration-card .integration-card-label{display:inline-block;font-size:10px;line-height:1.4;color:#597451;background:#edf3e7;border-radius:5px;padding:4px 7px;font-weight:650;margin-bottom:10px}
.integration-card h3{font-size:15px;line-height:1.45;margin:0 0 7px;font-weight:650}
.integration-card p,.integration-card li{font-size:12px;line-height:1.8;color:#637565}
.integration-card p+p{margin-top:8px}
.integration-card a,.integration-step-list a,.integration-panel a:not(.button){color:#255e46;text-decoration:underline;text-underline-offset:3px}
.integration-card code,.integration-panel code,.integration-step-list code{font-family:Consolas,monospace;font-size:11px;background:#edf2ea;padding:2px 5px;border-radius:4px;overflow-wrap:anywhere}
.integration-panel{background:#fff;border:1px solid #dee5d7;border-radius:13px;padding:22px 26px}
.integration-panel>h2{font-size:19px;margin-bottom:13px}
.integration-panel p,.integration-panel li{font-size:13px;line-height:1.8;color:#637565}
.integration-panel p+p{margin-top:12px}
.integration-panel .strong{font-weight:650;color:#284a37}
.integration-step-list{counter-reset:integration-step;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;list-style:none;padding:0;margin:0}
.integration-step-list li{counter-increment:integration-step;padding:17px 18px 16px 53px;background:#fff;border:1px solid #dee5d7;border-radius:12px;position:relative;min-width:0}
.integration-step-list li::before{content:counter(integration-step, decimal-leading-zero);position:absolute;top:17px;left:16px;font-size:12px;line-height:1.3;font-weight:750;color:#54704a}
.integration-step-list strong{display:block;font-size:13px;line-height:1.5;margin:0 0 5px;color:#2c4c39}
.integration-step-list p{font-size:12px;line-height:1.7;color:#657565}
.integration-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px}
.integration-warning{border-left:3px solid #76925e;background:#edf2e7;padding:15px 18px;border-radius:0 10px 10px 0}
.integration-warning strong{font-size:12px}
.integration-warning p{font-size:12px;line-height:1.75;margin-top:4px;color:#536a52}
.integration-code{overflow-x:auto;max-width:100%;background:#1e352b;color:#e9f3e7;border-radius:12px;padding:19px 22px;margin-top:15px;font:12px/1.75 Consolas,monospace;white-space:pre;-webkit-overflow-scrolling:touch}
.integration-inline-links{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}
.integration-inline-links .button{font-size:12px;min-height:38px;padding:9px 14px}
.integration-inline-links .secondary{background:transparent}
.integration-footer{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:20px;border-top:1px solid #dce2d4;padding:18px 3px 0;font-size:11px;color:#879484}
.integration-footer nav{display:flex;gap:13px;flex-wrap:wrap}
.integration-footer a:hover{text-decoration:underline}
@media(max-width:800px){.integration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.integration-shell{padding-top:22px}.integration-intro{padding:23px}.integration-pair{grid-template-columns:1fr}}
@media(max-width:600px){.integration-shell{padding:19px 17px 28px}.integration-intro{padding:18px;border-radius:14px}.integration-intro h1{font-size:24px;margin:10px 0}.integration-intro>p{font-size:12px}.integration-intro-head{font-size:9px}.integration-flow{gap:6px 7px;padding-top:13px}.integration-flow .step{padding:7px 9px;font-size:10px}.integration-flow .arrow{font-size:13px}.integration-section{margin-top:18px}.integration-section-heading h2{font-size:17px}.integration-grid,.integration-grid.two,.integration-step-list{grid-template-columns:1fr;gap:9px}.integration-card{padding:16px}.integration-panel{padding:18px}.integration-panel>h2{font-size:17px}.integration-code{font-size:10px;padding:14px}.integration-footer{margin-top:20px}}

/* Keep the code example scrolling inside its grid card, including 320px phones. */
.integration-pair,.integration-pair>.integration-panel{min-width:0}
.integration-code{display:block;width:100%;min-width:0;max-width:100%;overflow-x:auto}
.integration-code code{display:block;min-width:max-content;width:max-content;white-space:pre}