/* 0.10.49: Integrations directory inherits the established KePixel production tokens. */
.kpx-integration-landing .kpx-collection-hero.kpx-detail-hero{padding:64px 0 68px;min-height:0;text-align:start;background:linear-gradient(115deg,#fbfdff,#eef5ff);border-bottom:1px solid #dbe7f7}
.kpx-integration-landing .kpx-collection-hero-inner{width:min(1132px,calc(100% - 48px));max-width:1132px;margin-inline:auto;padding:0;text-align:start}
.kpx-integration-landing .kpx-collection-hero h1{font-size:clamp(2.8rem,5.1vw,4.1rem);line-height:1.08;letter-spacing:-.045em;margin:16px 0;color:#111d32;text-align:start}
.kpx-integration-landing .kpx-collection-hero .kpx-home-lede{font-size:1.13rem;line-height:1.7;max-width:760px;margin:0;text-align:start}
.kpx-integration-landing .kpx-collection-hero .kpx-eyebrow{text-align:start;color:#2268e6}
.kpx-integration-landing .kpx-collection-hero .kpx-breadcrumbs{text-align:start;margin-bottom:17px}
.kpx-integration-landing .kpx-integration-content{background:#fff}
.kpx-integration-landing .kpx-integration-content>.kpx-section{padding:54px 0}
.kpx-integration-landing .kpx-integration-content>.kpx-section:first-child{padding:40px 0 12px;background:#fff}
.kpx-integration-landing .kpx-integration-content>.kpx-section:first-child .section-head{margin-bottom:0;max-width:none;text-align:start}
.kpx-integration-landing .kpx-integration-content>.kpx-section:first-child h2{font-size:clamp(1.5rem,2.5vw,2.25rem);text-align:start;margin-bottom:10px}
.kpx-integration-landing .kpx-integration-content .section-head{max-width:100%;margin-bottom:24px;text-align:start}
.kpx-integration-landing .kpx-integration-content .section-head h2{text-align:start;font-size:clamp(1.6rem,2.6vw,2.3rem);letter-spacing:-.025em}
.kpx-integration-landing .kpx-integration-content .section-head p{text-align:start;color:#5b718e;line-height:1.7}
.kpx-integration-landing .kpx-integration-content .container{width:min(1132px,calc(100% - 48px));margin-inline:auto}
.kpx-integration-landing .kpx-connection-map{width:min(1132px,calc(100% - 48px));margin:14px auto 24px;min-height:165px;display:flex;align-items:center;justify-content:center;gap:0;padding:25px;background:#0b1c33;border:1px solid #244b7a;border-radius:20px;color:white;box-shadow:0 12px 28px #16487513;overflow:hidden}
.kpx-integration-landing .kpx-connection-map span{display:grid;place-items:center;flex:1;min-width:0;min-height:86px;padding:14px 10px;border:1px solid #355a88;border-radius:12px;background:#142c4b;color:#f4f8ff;font-size:clamp(.8rem,1.2vw,1.04rem);font-weight:800;text-align:center}
.kpx-integration-landing .kpx-connection-map span:nth-of-type(2){background:#1b4b92;border-color:#67b9ff}
.kpx-integration-landing .kpx-connection-map i{display:block;flex:0 0 72px;text-align:center;font-style:normal;font-size:0;position:relative;height:2px;background:linear-gradient(90deg,#32608f,#7bd6ff,#32608f)}
.kpx-integration-landing .kpx-connection-map i:after{content:"";position:absolute;top:-3px;left:3px;width:8px;height:8px;border-radius:50%;background:#b8f5ff;box-shadow:0 0 7px #65caff;animation:kpx-listing-packet 2.6s linear infinite}
.kpx-integration-landing .kpx-connection-map i:nth-of-type(2):after{animation-delay:1s}
@keyframes kpx-listing-packet{from{left:0;opacity:0}25%{opacity:1}85%{opacity:1}to{left:calc(100% - 8px);opacity:0}}
.kpx-integration-landing .kpx-integration-content .kpx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kpx-integration-landing .kpx-integration-content .kpx-card{min-width:0;min-height:180px;background:#fff;border:1px solid #d5e2f1;border-radius:17px;padding:24px;text-align:start;box-shadow:0 10px 22px #254d7810;display:flex;flex-direction:column;gap:0;text-decoration:none!important}
.kpx-integration-landing .kpx-integration-content .kpx-card h3{text-align:start;font-size:1.15rem;line-height:1.3;color:#14223d;margin:0 0 13px}
.kpx-integration-landing .kpx-integration-content .kpx-card p{font-size:.94rem;line-height:1.57;text-align:start;color:#5c7490;margin:0 0 10px}
.kpx-integration-landing .kpx-integration-content .kpx-card p:last-child{margin-bottom:0}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.kpx-integration-landing .kpx-integration-content .kpx-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.kpx-integration-landing .kpx-integration-content .kpx-card:hover{transform:translateY(-3px);box-shadow:0 17px 32px #254d7820;border-color:#a6c9f8}}
@media(max-width:980px){.kpx-integration-landing .kpx-integration-content .kpx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.kpx-integration-landing .kpx-collection-hero.kpx-detail-hero{padding:38px 0 46px}.kpx-integration-landing .kpx-collection-hero-inner,.kpx-integration-landing .kpx-integration-content .container{width:calc(100% - 34px)}.kpx-integration-landing .kpx-integration-content>.kpx-section{padding:35px 0}.kpx-integration-landing .kpx-integration-content>.kpx-section:first-child{padding:29px 0 8px}.kpx-integration-landing .kpx-integration-content .kpx-grid{grid-template-columns:1fr;gap:13px}.kpx-integration-landing .kpx-integration-content .kpx-card{min-height:0;padding:21px}.kpx-integration-landing .kpx-connection-map{width:calc(100% - 34px);padding:13px 9px;min-height:115px;border-radius:15px;margin:10px auto 19px}.kpx-integration-landing .kpx-connection-map span{font-size:.7rem;min-height:72px;padding:8px 4px}.kpx-integration-landing .kpx-connection-map i{flex-basis:23px}}
@media(prefers-reduced-motion:reduce){.kpx-integration-landing .kpx-connection-map i:after{animation:none;left:50%}.kpx-integration-landing .kpx-integration-content .kpx-card{transition:none!important}}