.ef-product-page .product-connect{background:linear-gradient(118deg,#f8f7fc 10%,#efedfc 100%);border:1px solid #e6e2f2;border-radius:30px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:64px;margin-top:48px;padding:44px 48px;display:grid;overflow:hidden}.product-connect__copy{min-width:0}.ef-product-page .product-connect h2{max-width:450px;color:var(--product-ink);letter-spacing:-.04em;font-size:clamp(30px,2.8vw,40px);font-weight:600;line-height:1.13}.ef-product-page .product-connect__lead{max-width:450px;color:var(--product-muted);margin:22px 0 28px;font-size:15px;line-height:1.75}.ef-product-page .integration-example{background:#ffffffde;border:1px solid #e5e0f0;border-radius:22px;min-width:0;padding:20px;box-shadow:0 18px 38px -30px #51458266}.integration-example__head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px;display:flex}.integration-example__label{color:#39344e;align-items:center;gap:9px;font-size:12px;font-weight:500;display:flex}.integration-example__label>span{color:#786d9c;background:#f6f3fd;border:1px solid #e4dff5;border-radius:20px;padding:4px 7px;font-size:9px}.integration-example__inputs{grid-template-columns:1fr 1fr;gap:12px;display:grid}.integration-example__input{background:#fff;border:1px solid #e7e2f0;border-radius:12px;align-items:center;gap:10px;min-width:0;padding:14px 10px;display:flex}.integration-example__icon{color:#7c70a3;background:#f5f3f9;border-radius:8px;flex:none;place-items:center;width:32px;height:32px;display:grid}.integration-example__input--position .integration-example__icon{color:#7561df;background:#f0edfd}.integration-example__input strong{color:#3d354e;font-size:11px;font-weight:500;line-height:1.4;display:block}.integration-example__input div>span{color:#8b829b;margin-top:3px;font-size:9px;line-height:1.5;display:block}.integration-example__connections{width:100%;height:38px;display:block}.integration-example__transfer{opacity:0}.integration-example__result{background:#fff;border:1px solid #e3ddef;border-radius:15px;padding:13px}.integration-example__result-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.integration-example__result-head img{width:80px;height:auto;display:block}.integration-example__result-head>span{color:#75668c;background:#f4f0fb;border-radius:6px;padding:5px 8px;font-size:9px}.integration-example__map{border:1px solid #eeebf5;border-radius:11px;width:100%;height:auto;display:block}.integration-example__context{color:#6f647f;justify-content:center;align-items:center;gap:9px;padding-top:12px;font-size:10px;display:flex}.integration-example__context i{color:#b3a6c7;font-size:12px;font-style:normal}.integration-example figcaption{text-align:center;color:#8a819a;margin-top:13px;font-size:10px;line-height:1.5}.integration-example[data-ready=true] .integration-example__input{animation:7s infinite integration-input}.integration-example[data-ready=true] .integration-example__input--position{animation-delay:.15s}.integration-example[data-ready=true] .integration-example__transfer{animation:7s infinite integration-transfer}.integration-example[data-ready=true] .integration-example__transfer path{stroke-dasharray:.18 .82;animation:7s infinite integration-data}.integration-example[data-ready=true] .integration-example__route{stroke-dasharray:1;animation:7s infinite integration-route}.integration-example[data-ready=true] .integration-example__arrival{transform-box:fill-box;transform-origin:50%;animation:7s infinite integration-arrival}.integration-example[data-ready=true] .integration-example__result{animation:7s infinite integration-result}.integration-example[data-ready=true][data-paused=true] *,.integration-example[data-ready=true][data-paused=true] .integration-example__transfer path{animation-play-state:paused}@keyframes integration-input{0%,24%,to{border-color:#e7e2f0}10%,16%{border-color:#b5a6ef}}@keyframes integration-data{0%,7%{stroke-dashoffset:1px}21%,to{stroke-dashoffset:0}}@keyframes integration-transfer{0%,5%,23%,to{opacity:0}9%,18%{opacity:1}}@keyframes integration-route{0%,18%{stroke-dashoffset:1px;opacity:0}21%{stroke-dashoffset:1px;opacity:1}57%,86%{stroke-dashoffset:0;opacity:1}98%,to{stroke-dashoffset:0;opacity:0}}@keyframes integration-arrival{0%,52%,to{opacity:0;transform:scale(.4)}63%{opacity:.28;transform:scale(1.15)}72%,86%{opacity:.13;transform:scale(1)}}@keyframes integration-result{0%,25%,to{box-shadow:none;border-color:#e3ddef}60%,80%{border-color:#a89ae9;box-shadow:0 0 0 4px #cfc4fa35}}@media (width<=1099px){.ef-product-page .product-connect{gap:32px;padding:32px}.integration-example__input{gap:6px;padding:11px 8px}.integration-example__icon{width:26px;height:30px}.integration-example__input strong{font-size:10px}.integration-example__input div>span{font-size:8px}}@media (width<=820px){.ef-product-page .product-connect{grid-template-columns:1fr;gap:30px}.product-connect__copy{max-width:540px}.ef-product-page .product-connect h2{max-width:none}.integration-example{justify-self:center;width:min(100%,540px)}.integration-example__input{gap:10px;padding:14px}.integration-example__input strong{font-size:12px}.integration-example__input div>span{font-size:10px}}@media (width<=480px){.ef-product-page .product-connect{border-radius:24px;gap:26px;margin-top:28px;padding:28px 22px}.ef-product-page .product-connect h2{font-size:30px}.ef-product-page .product-connect__lead{margin:18px 0 24px;font-size:14px}.ef-product-page .integration-example{border-radius:16px;padding:14px}.integration-example__inputs{gap:8px}.integration-example__input{padding:10px;display:block}.integration-example__icon{margin-bottom:8px}.integration-example__input strong{font-size:11px}.integration-example__input div>span{font-size:9px}.integration-example__head{flex-wrap:wrap;gap:2px;margin-bottom:12px}.integration-example__label{gap:6px;font-size:10px}.integration-example__result{padding:9px}.integration-example__result-head{gap:8px}.integration-example__result-head img{width:65px}.integration-example__result-head>span{padding:4px;font-size:9px}.integration-example__context{gap:6px;font-size:9px}.integration-example figcaption{font-size:10px}}@media (prefers-reduced-motion:reduce){.integration-example[data-ready=true] *{animation:none!important}}
