/* Cargado /platform/integrations "Three ways to connect" (TMS, API, Excel). Ported from the redesign prototype (route integrations, the
   section.sec with .integ). Scoped under .cg-itgw; tokens on the wrapper with the prototype's light values. The h2 follows the site's
   heading font (--f-head reads the Webflow heading variable), sets no font-weight and uses -.03em. */
.cg-itgw{--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-200:#CDD7F4;--azul-800:#2648A6;--ink:#0F172A;--body:#475569;--cap:#64748B;--line:#E2E8F0;--card:#FFFFFF;--link:#345ED1;--sh-card:0 1px 2px rgba(15,23,42,.05),0 16px 36px -18px rgba(20,38,92,.22);--ease-out:cubic-bezier(.2,.8,.2,1);--gut:max(16px,5vw);--max:calc(1280px + 10vw);box-sizing:border-box;color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;text-align:start;-webkit-font-smoothing:antialiased}
.cg-itgw *,.cg-itgw *::before,.cg-itgw *::after{box-sizing:border-box}

/* host reset: the live Webflow CSS gives h2/p margins and b/strong weight 700 */
.cg-itgw h2,.cg-itgw p{margin:0}
.cg-itgw a{color:var(--link)}
.cg-itgw :focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:6px}
.cg-itgw p{text-wrap:pretty}

.cg-itgw .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.cg-itgw .sec{padding-block:clamp(64px,8vw,112px)}
.cg-itgw .sec-head{display:grid;gap:16px;max-width:760px;margin-bottom:clamp(44px,5vw,60px)}
.cg-itgw h2{font-family:var(--f-head);letter-spacing:-.03em;line-height:1.08;text-wrap:balance;font-size:clamp(30px,3.3vw,46px);color:var(--ink)}

.cg-itgw .integ{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cg-itgw .k-ft{position:relative;border:1px solid var(--line);border-radius:20px;padding:24px;display:grid;gap:10px;background:var(--card);box-shadow:var(--sh-card);align-content:start;transition:border-color .2s ease}
.cg-itgw .k-ft:hover{border-color:var(--azul-200)}
.cg-itgw .k-ft p{color:var(--body);font-size:15px}
.cg-itgw .integ .k-ft b{font-family:var(--f-head);font-size:18px;font-weight:600;line-height:1.3;color:var(--ink)}
/* the card title is the link; its hit area is the whole card (self-serve: every card leads somewhere) */
.cg-itgw .k-ft b a{color:inherit;text-decoration:none}
.cg-itgw .k-ft b a::after{content:"";position:absolute;inset:0;border-radius:20px}
.cg-itgw .k-ft b a:focus-visible{outline:none}
.cg-itgw .k-ft:has(a:focus-visible){outline:2px solid var(--azul);outline-offset:2px}
.cg-itgw .k-ft:hover b a{color:var(--azul-800)}
.cg-itgw .k-go{font-size:14.5px;font-weight:600;color:var(--link)}
.cg-itgw .k-ft:hover .k-go{color:var(--azul-800)}

@media (max-width:860px){.cg-itgw .integ{grid-template-columns:1fr;gap:12px}.cg-itgw .k-ft{padding:18px 20px;gap:6px}.cg-itgw .sec-head{margin-bottom:28px}}

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