/* Cargado /platform/integrations "What syncs between your TMS and Cargado" table. Ported from the redesign prototype (route integrations,
   section.sec.alt#syncs). Scoped under .cg-itgs; 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-itgs{--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;--ink:#0F172A;--body:#475569;--cap:#64748B;--line:#E2E8F0;--paper:#FFFFFF;--alt:#F8FAFC;--link:#345ED1;--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-itgs *,.cg-itgs *::before,.cg-itgs *::after{box-sizing:border-box}
.cg-itgs [hidden]{display:none!important}

/* host reset: the live Webflow CSS gives h2/p margins, table cells padding and b/strong weight 700 */
.cg-itgs h2,.cg-itgs p{margin:0}
.cg-itgs table{border-collapse:collapse;border-spacing:0;margin:0}
.cg-itgs th,.cg-itgs td{padding:0;text-align:start}
.cg-itgs a{color:var(--link)}
.cg-itgs :focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:6px}
.cg-itgs :is(p,td,th){text-wrap:pretty}

.cg-itgs .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
/* scroll-margin 16px: the live page sets html{scroll-padding-top:80px} for its sticky nav, so a direct #cg-itgs-syncs link lands 96px down */
.cg-itgs .sec{padding-block:clamp(64px,8vw,112px);scroll-margin-top:16px}
.cg-itgs .sec.alt{background:var(--alt)}
.cg-itgs .sec-head{display:grid;gap:16px;max-width:760px;margin-bottom:clamp(44px,5vw,60px)}
.cg-itgs .sec-head h2 + .lede{margin-top:10px}
.cg-itgs .sec-head .lede{text-wrap:balance}
.cg-itgs 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-itgs .lede{font-size:clamp(17px,1.5vw,19px);color:var(--body);max-width:60ch}

.cg-itgs .sy-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.cg-itgs .sy-tbl{width:100%;border-collapse:collapse;font-size:15px;color:var(--body)}
.cg-itgs .sy-tbl th,.cg-itgs .sy-tbl td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.cg-itgs .sy-tbl thead th{font-size:13.5px;font-weight:600;color:var(--cap);background:var(--alt)}
.cg-itgs .sy-tbl tbody th{font-weight:600;color:var(--ink);border-right:1px solid var(--line)}
.cg-itgs .sy-tbl td b{color:var(--ink);font-weight:600}
.cg-itgs .sy-tbl tbody:last-child tr:last-child td{border-bottom:0}
.cg-itgs .sy-tbl .st{white-space:nowrap;font-weight:500}
.cg-itgs .sy-tbl .st.lv{color:#047857}
.cg-itgs .sy-tbl .st.ro{color:var(--azul)}
.cg-itgs .sy-tbl .st.rm{color:var(--cap)}
.cg-itgs .sy-note{margin-top:18px;font-size:14px;color:var(--cap)}

@media (max-width:640px){
  /* column headers leave the layout but stay in the accessibility tree (sr-only pattern, no display:none) */
  .cg-itgs .sy-tbl thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
  .cg-itgs .sy-tbl,.cg-itgs .sy-tbl tbody,.cg-itgs .sy-tbl tr,.cg-itgs .sy-tbl th,.cg-itgs .sy-tbl td{display:block}
  .cg-itgs .sy-tbl tbody th{border-right:0;background:var(--alt);padding:10px 14px}
  .cg-itgs .sy-tbl td{border-bottom:0;padding:2px 14px}
  .cg-itgs .sy-tbl tr{border-bottom:1px solid var(--line);padding-bottom:10px}
  .cg-itgs .sy-tbl td:first-of-type{padding-top:10px}
}

/* scroll-in reveal (PACKAGE-BRIEF "Self-serve and motion"): itgs.js adds .rv only to rows below the fold at load, and .in when they
   scroll into view. Transform and opacity only, 350 ms, once. Nothing here applies without the script, so the table is always visible. */
.cg-itgs .rv{opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.cg-itgs .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .cg-itgs *,.cg-itgs *::before,.cg-itgs *::after{animation:none!important;transition:none!important}
  .cg-itgs .rv{opacity:1;transform:none}
}

/* English-only slot hide (PACKAGE-BRIEF "English-only row hide"): on English pages (lang en, en-CA) this table replaces the live
   "How it works" walkthrough (section.ti-flow-sec#syncs: "Your reps cover freight. The connection does the posting.", the TMS picker and
   the four-step scene). es-MX and fr-CA keep it; the embed hides itself there by its locale guard. The live deep dive (#tech) and the
   IT section (#it) are not touched. */
html[lang^="en"] section.ti-flow-sec#syncs{display:none!important}