/* Cargado /carriers "Cargado compared with legacy load boards": a six-row comparison table.
   Ported from the redesign prototype (carriers route, section.sec.alt with table.k-cmp). Everything is scoped under .cg-cc so it cannot leak into the host page.
   Tokens are declared on .cg-cc with the prototype's light values. Container and h2 size follow the 10/8 Website QB rulings used by the live home packages and the prototype's final v46 rhythm block (index.html:2215, --h2-sec clamp(30px,3.3vw,46px)).
   Heading font follows the site: --f-head reads the Webflow heading variable and the h2 sets no font-weight so the site's own h2 rule supplies it.
   Under 641px the table stacks (the prototype's phone rule): the header row is visually hidden (still read by screen readers), each cell is prefixed with its
   column name, and the Cargado-column stripe is off. v2 (10/9/2026, review fixes). */
.cg-cc{--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;--alt:#F8FAFC;--card:#FFFFFF;--r:14px;--gut:max(16px,5vw);--max:calc(1280px + 10vw);--sh-card:0 1px 2px rgba(15,23,42,.05),0 16px 36px -18px rgba(20,38,92,.22);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-cc *,.cg-cc *::before,.cg-cc *::after{box-sizing:border-box}

/* host reset: the live Webflow CSS gives h2 margins and table/th/td its own padding and alignment */
.cg-cc h2,.cg-cc p{margin:0}
.cg-cc table{border-spacing:0}
.cg-cc th,.cg-cc td{font-weight:400}
.cg-cc :focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:6px}

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

.cg-cc .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--sh-card)}
.cg-cc .k-cmp{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;min-width:560px}
.cg-cc .k-cmp th,.cg-cc .k-cmp td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)}
.cg-cc .k-cmp thead th{font-family:var(--f-head);font-weight:600;font-size:17px;line-height:1.5}
.cg-cc .k-cmp thead th:last-child{color:var(--azul)}
.cg-cc .k-cmp tbody th{font-weight:600;width:22%}
.cg-cc .k-cmp tbody td:nth-child(2){color:var(--body)}
.cg-cc .k-cmp tbody td:last-child{font-weight:600;background:rgba(52,94,209,.06)}
.cg-cc .k-cmp tbody tr:last-child th,.cg-cc .k-cmp tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){
  .cg-cc .k-cmp{min-width:0}
  .cg-cc .k-cmp thead{display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* visually hidden, still in the accessibility tree */
  .cg-cc .k-cmp,.cg-cc .k-cmp tbody,.cg-cc .k-cmp tr,.cg-cc .k-cmp th,.cg-cc .k-cmp td{display:block;width:auto}
  .cg-cc .k-cmp tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .cg-cc .k-cmp tr:last-child{border-bottom:0}
  .cg-cc .k-cmp th,.cg-cc .k-cmp td{border:0;padding:3px 16px;white-space:normal}
  .cg-cc .k-cmp tbody tr td:last-child,.cg-cc .k-cmp tbody tr td{background:none} /* outranks the desktop tbody td:last-child stripe */
  .cg-cc .k-cmp tbody th{padding-bottom:6px}
  .cg-cc .k-cmp tbody td:nth-child(2)::before{content:"Legacy load boards: ";font-weight:600;color:var(--cap)}
  .cg-cc .k-cmp tbody td:nth-child(3)::before{content:"Cargado: ";font-weight:600;color:var(--azul)}
}


/* Scroll-in reveal (brief "Self-serve and motion", 10/8): cc.js adds .rv only to elements below the fold at load and .rv-in when they scroll in; both classes
   come off after the transition, so nothing stays transformed. Transform and opacity only, 350-400 ms, once. Without JS, and under prefers-reduced-motion, the
   content is simply visible. */
.cg-cc .rv{opacity:0;transform:translateY(16px)}
.cg-cc .rv.rv-in{opacity:1;transform:none;transition:opacity .35s ease-out var(--d,0ms),transform .4s ease-out var(--d,0ms)}
@media (prefers-reduced-motion:reduce){.cg-cc .rv{opacity:1;transform:none}.cg-cc *,.cg-cc *::before,.cg-cc *::after{animation:none!important;transition:none!important}}

/* English-only row hide (per the package brief): on English /carriers (lang en, en-CA) this table replaces the live comparison chart ("Stop paying to find loads",
   shared "Comparison Chart" component; its variant attribute appears once on the page) and the 1px divider that sits right above it. es-MX and fr-CA keep the
   legacy chart (the embed is hidden there by its locale guard), so the CARRIERS-320-ESFR-1008 page-head patch, which is keyed on lang es-MX / fr-CA and the
   same variant attribute, keeps working there. Nothing is deleted or edited. cc.js applies the divider hide in browsers without :has(). */
html[lang^="en"] section[data-wf--comparison-chart--variant]{display:none!important}
/* Separate rule on purpose: a browser without :has() drops a whole selector list that contains it, and the chart hide above must survive in those browsers. */
html[lang^="en"] div.divider-horizontal:has(~ section[data-wf--comparison-chart--variant]){display:none!important}