/* kosh-integrations.css — the integrations page (/integrations/): the logo
   cards, their banners and badges. Everything else on that page comes from
   kosh-home.css and kosh-industries.css, linked before this file. */
/* Integration cards — colored banner with an overlapping circular logo
   badge, name and a unique one-line description per vendor. */
.kh-int-grid{display:grid;gap:1.75rem;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:991px){.kh-int-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.kh-int-grid{grid-template-columns:1fr}}
.kh-int-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:20px;border:1px solid #eceef1;box-shadow:0 6px 24px -8px rgba(26,31,43,.12);transition:transform .2s ease,box-shadow .2s ease}
.kh-int-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px -10px rgba(26,31,43,.2)}
.kh-int-banner{position:relative;height:104px;border-radius:20px 20px 0 0;overflow:visible}
.kh-int-banner-decor{position:absolute;inset:0;overflow:hidden;border-radius:20px 20px 0 0;pointer-events:none}
.kh-int-banner-decor::before,.kh-int-banner-decor::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.3)}
.kh-int-banner-decor::before{width:150px;height:150px;right:-45px;top:-65px}
.kh-int-banner-decor::after{width:100px;height:100px;left:-30px;bottom:-55px}
.kh-int-badge{position:absolute;z-index:3;left:28px;bottom:-30px;width:68px;height:68px;border-radius:50%;background:#fff;box-shadow:0 8px 18px -4px rgba(26,31,43,.22);display:flex;align-items:center;justify-content:center;padding:12px}
.kh-int-badge img{max-width:100%;max-height:100%;object-fit:contain}
.kh-int-body{position:relative;z-index:1;flex:1;padding:42px 1.5rem 1.6rem;background:#fff;border-radius:0 0 20px 20px}
.kh-int-body h3{margin:0 0 .6rem;font-size:1.15rem;font-weight:700;line-height:1.3;color:#1e1e1e}
.kh-int-body p{margin:0;font-size:.92rem;line-height:1.55;color:#4a4f57}