/* Cargado /platform/integrations closing band "See it with your TMS". Ported from the redesign prototype (route integrations,
   section.cta.dark). Scoped under .cg-itgc; tokens on the wrapper with the prototype's light values (the band itself is always navy).
   The h2 follows the site's heading font (--f-head reads the Webflow heading variable), sets no font-weight and uses -.03em. */
.cg-itgc{--f-head:var(--_typography---font-styles--heading,"Libre Franklin","Helvetica Neue",Helvetica,Arial,sans-serif);--f-body:Inter,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;--azul:#345ED1;--azul-900:#1E3A85;--sky-100:#E0F2FE;--sky-400:#38BDF8;--on-b1:rgba(255,255,255,.88);--line-dk:rgba(255,255,255,.2);--ease-out:cubic-bezier(.2,.8,.2,1);--gut:max(16px,5vw);--max:calc(1280px + 10vw);box-sizing:border-box;color:#fff;font-family:var(--f-body);font-size:16px;line-height:1.5;text-align:start;-webkit-font-smoothing:antialiased}
.cg-itgc *,.cg-itgc *::before,.cg-itgc *::after{box-sizing:border-box}

/* host reset: the live Webflow CSS gives h2/p margins */
.cg-itgc h2,.cg-itgc p{margin:0}
.cg-itgc :focus-visible{outline:2px solid var(--sky-400);outline-offset:2px;border-radius:6px}
.cg-itgc p{text-wrap:pretty}

.cg-itgc .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.cg-itgc h2{font-family:var(--f-head);letter-spacing:-.03em;line-height:1.08;text-wrap:balance;font-size:clamp(30px,3.3vw,46px);color:#fff}
.cg-itgc .lede{font-size:clamp(17px,1.5vw,19px);color:var(--on-b1);max-width:60ch}
.cg-itgc .k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease}
.cg-itgc .k-btn.white{background:#fff;color:var(--azul-900)}
.cg-itgc .k-btn.white:hover{background:var(--sky-100)}
.cg-itgc .k-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
.cg-itgc .k-tl{color:var(--on-b1);font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid var(--line-dk);padding-bottom:2px;transition:color .15s ease,border-color .15s ease}
.cg-itgc .k-tl:hover{color:#fff;border-color:var(--sky-400)}
/* 44px tap target on the text link at every width, no visual change */
.cg-itgc .k-tl{position:relative}
.cg-itgc .k-tl::after{content:"";position:absolute;inset:-12px -6px}

.cg-itgc .cta{background:var(--azul-900) center/cover no-repeat;color:#fff;text-align:center}
.cg-itgc .cta .wrap{display:grid;gap:18px;justify-items:center;padding-block:clamp(72px,9vw,120px)}
.cg-itgc .cta .lede{text-align:center;margin:0 auto}

/* scroll-in reveal (PACKAGE-BRIEF "Self-serve and motion"): itgc.js adds .rv to the heading, lede and button row when they are below the
   fold at load, and .in on scroll-in. Transform and opacity only, 400 ms, once. Without the script the band is simply visible. */
.cg-itgc .rv{opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.cg-itgc .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .cg-itgc *,.cg-itgc *::before,.cg-itgc *::after{animation:none!important;transition:none!important}
  .cg-itgc .rv{opacity:1;transform:none}
}

/* English-only hide of the live footer's "Join Cargado today" block (footer.footer2_component .home_cta_component, CMS-driven, on every
   page) and the spacer-xxlarge right after it, on pages that carry this embed. Same rule and scope as closing-cta/cta.css (Website QB,
   10/7/2026): next to this band it is a second Get started CTA. The block has no data-wf variant or node id; the structure is identical on
   /, /en-ca, /es-mx and /fr-ca, only the copy is localized. The rest of the footer (logo, links, legal) is untouched. itgc.js mirrors this
   without :has(). Nothing else on the live integrations page is hidden by this package. */
html[lang^="en"]:has(.cg-itgc) footer.footer2_component .home_cta_component,
html[lang^="en"]:has(.cg-itgc) footer.footer2_component .home_cta_component + .spacer-xxlarge{display:none!important}