/* Cargado "connected marketplace" bento: Market Rates, RFP pricing, chat and lanes in the same account.
   Ported from the redesign prototype (home route, section.sec.alt.cm). Everything is scoped under .cg-cm so it cannot leak into the host page.
   Tokens are declared on .cg-cm with the prototype's light values (the live site has no dark mode).
   Heading font follows the site: --f-head reads the Webflow heading variable (Space Grotesk today, Libre Franklin after the switch), and h2/h3 set no
   font-weight so the site's own h2/h3 element rules supply it. Headings use -.03em, which suits both faces. */
.cg-cm{--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;--alt:#F8FAFC;--azul:#345ED1;--azul-800:#2648A6;--ink:#0F172A;--body:#475569;--cap:#64748B;--line:#E2E8F0;--card:#FFFFFF;--link:#345ED1;--gut:clamp(16px,4vw,56px);--max:1200px;--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-cm *,.cg-cm *::before,.cg-cm *::after{box-sizing:border-box}
.cg-cm [hidden]:not([hidden=until-found i]){display:none!important}

/* host reset: the live Webflow CSS gives h2/h3/p/li/small/td margins, weights and sizes */
.cg-cm h2,.cg-cm h3,.cg-cm p{margin:0}
.cg-cm li{margin:0;padding-left:0}
.cg-cm a{color:var(--link)}
.cg-cm table{border-spacing:0}
.cg-cm small{font-size:inherit}
.cg-cm :focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:6px}

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

.cg-cm .bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);gap:20px}
.cg-cm .bn{grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:22px;padding:clamp(22px,2.4vw,28px);border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:var(--sh-card)}
.cg-cm .bn-t{display:grid;gap:10px;align-content:start}
.cg-cm .bn-t h3{font-family:var(--f-head);font-size:clamp(19px,1.6vw,21px);line-height:1.28;letter-spacing:-.01em;color:var(--ink);text-wrap:balance;max-width:34ch}
.cg-cm .bn-go{justify-self:start;margin-top:2px;font-weight:600;font-size:14.5px;color:var(--link);text-decoration:none}
.cg-cm .bn-go:hover{color:var(--azul-800)}
.cg-cm .bn-v{color-scheme:light;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;padding:16px 18px;border-radius:14px;background:#fff;color:var(--ink);border:1px solid #E2E8F0;box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 28px -18px rgba(15,23,42,.25);font-size:13px;line-height:1.4;min-width:0}

/* Market Rates card */
.cg-cm .rt-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.cg-cm .rt-h b{font-size:14px}.cg-cm .rt-h small{font-size:12.5px;color:var(--body)}
.cg-cm .rt-chart{position:relative;height:120px}
.cg-cm .rt-chart svg{display:block;width:100%;height:100%;overflow:visible}
.cg-cm .rt-grid line{stroke:#E2E8F0;stroke-width:1;vector-effect:non-scaling-stroke}
.cg-cm .rt-band{fill:rgba(52,94,209,.14)}
.cg-cm .rt-mid{fill:none;stroke:#345ED1;stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cg-cm .rt-ticks line{stroke:#94A3B8;stroke-width:1;vector-effect:non-scaling-stroke}
.cg-cm .rt-dot{position:absolute;right:-5px;width:10px;height:10px;border-radius:50%;background:#345ED1;border:2px solid #fff;transform:translateY(-50%);box-shadow:0 0 0 1px #345ED1}
.cg-cm .rt-lab{position:absolute;right:8px;transform:translateY(-170%);padding:2px 7px;border-radius:6px;background:#fff;color:#2648A6;font-size:12px;font-weight:600;box-shadow:0 1px 3px rgba(15,23,42,.15);white-space:nowrap}
.cg-cm .rt-ax{display:flex;justify-content:space-between;margin-top:-4px;font-size:11.5px;color:var(--cap)}
.cg-cm .rt-lmh{display:grid;grid-template-columns:repeat(3,1fr);padding-top:10px;border-top:1px solid var(--line)}
.cg-cm .rt-lmh > span{display:grid;gap:1px;padding-left:14px;border-left:1px solid var(--line)}
.cg-cm .rt-lmh > span:first-child{padding-left:0;border-left:0}
.cg-cm .rt-lmh small{font-size:11.5px;color:var(--cap)}.cg-cm .rt-lmh b{font-size:16px;font-variant-numeric:tabular-nums}
.cg-cm .rt-lmh .m b{color:#345ED1}
.cg-cm .rt-x{font-size:12.5px;color:var(--body)}

/* Excel Add-In card */
.cg-cm .xl-bar{display:flex;gap:16px;font-size:12px;color:var(--cap);padding-bottom:8px;border-bottom:1px solid var(--line)}
.cg-cm .xl-bar .on{color:#047857;font-weight:600;box-shadow:inset 0 -2px 0 #10b981;padding-bottom:6px;margin-bottom:-9px}
.cg-cm .xl{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.cg-cm .xl th{text-align:left;font-weight:600;font-size:11.5px;color:var(--cap);padding:6px 8px 6px 0;border-bottom:1px solid var(--line)}
.cg-cm .xl td{padding:9px 8px 9px 0;border-bottom:1px solid var(--line);color:var(--ink);white-space:nowrap}
.cg-cm .xl .m{text-align:right;padding-right:0}
.cg-cm .xl td.m{font-weight:600;color:#2648A6;background:#EEF2FB;padding:9px 8px}
.cg-cm .xl-ft{font-size:12px;color:var(--cap)}

/* chat card */
.cg-cm .ch-h{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cg-cm .ch-av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#DEE5F7;color:#2648A6;font-size:11.5px;font-weight:700}
.cg-cm .ch-h > span:last-child{display:grid;line-height:1.3;min-width:0}.cg-cm .ch-h b{font-size:13px}.cg-cm .ch-h small{font-size:12px;color:var(--cap)}
.cg-cm .ch-in{align-self:flex-start;max-width:88%;padding:10px 12px;border-radius:14px 14px 14px 4px;background:#F1F5F9}
.cg-cm .ch-in p{font-size:14px;color:var(--ink)}
.cg-cm .ch-in small{display:block;margin-top:6px;font-size:12px;line-height:1.4;color:var(--body)}
.cg-cm .ch-in small b{color:#345ED1;font-weight:600}
.cg-cm .ch-out{align-self:flex-end;max-width:80%;padding:9px 12px;border-radius:14px 14px 4px 14px;background:#345ED1;color:#fff}
.cg-cm .ch-out p{font-size:14px}

/* lanes and potentials card */
.cg-cm .ps{display:grid;grid-template-columns:118px minmax(0,1fr);grid-template-areas:"t l" "t d";gap:2px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.cg-cm .ps:first-child{border-top:0;padding-top:2px}
.cg-cm .ps b{grid-area:l;font-size:14px}
.cg-cm .ps small{grid-area:d;font-size:12.5px;color:var(--body)}
.cg-cm .ps-t{grid-area:t;justify-self:start;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px}
.cg-cm .ps-t.t0{color:#854d0e;background:#FEF3C7}
.cg-cm .ps-t.t1{color:#7e22ce;background:#F3E8FF}
.cg-cm .ps-t.t2{color:#2648A6;background:#DEE5F7}

@media (max-width:960px){
  .cg-cm .bento{grid-template-columns:1fr;grid-template-rows:none}
  .cg-cm .bn{grid-row:auto;grid-template-rows:auto auto}
}
@media (max-width:600px){
  .cg-cm .bn-v{padding:14px}
  .cg-cm .ps{grid-template-columns:1fr;grid-template-areas:"t" "l" "d"}
  .cg-cm .xl th:nth-child(3),.cg-cm .xl td:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){.cg-cm *,.cg-cm *::before,.cg-cm *::after{animation:none!important;transition:none!important}}

/* REDESIGN-PORT-06 (Matt 10/7/2026): on English pages (lang en, en-CA) the bento replaces three "Image + Text + Quote Feature Section" rows: market rates, relationships, chat. es-MX and fr-CA keep them; "Match on spot freight" (variant base) stays everywhere. Keyed on each instance's Webflow variant attribute, so it only matches on a page that loads this file. */
html[lang^="en"] section[data-wf--image-text-quote-feature-section--variant="image-left"],
html[lang^="en"] section[data-wf--image-text-quote-feature-section--variant="image-left_image-stick-right"],
html[lang^="en"] section[data-wf--image-text-quote-feature-section--variant="image-right_image-stick-bottom"]{display:none!important}

/* ---- Home review fixes 10/8/2026 (review-2026-10-07/home.md; rulings via Website QB, all reversible) ---- */
/* P1-3 ruling: the site's 1280 container, so the content edge is x=80 at 1440, the same as the nav logo and the live rows */
.cg-cm{--max:calc(1280px + 10vw);--gut:max(16px,5vw)}
/* P2-4: no one-word last lines */
.cg-cm :is(p,li,dd,figcaption){text-wrap:pretty}
/* Example label for the product previews (brief: product example data is marked "Example") */
.cg-cm .bn-note{margin-top:16px;text-align:center;font-size:13px;line-height:1.5;color:var(--cap)}
/* P2-5: 44px hit box on the card links at every width (tap-target rule), no visual change */
.cg-cm .bn-go{position:relative}.cg-cm .bn-go::after{content:"";position:absolute;inset:-12px -4px}
/* P2-2 ruling: on phones the four cards are a manual swipe row (no motion, scroll-snap, the next card peeks) instead of a 2,100px stack */
@media (max-width:900px){
  .cg-cm .cm{overflow-x:clip}
  .cg-cm .bento{grid-template-columns:none;grid-template-rows:none;grid-auto-flow:column;grid-auto-columns:min(86%,420px);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding:0 var(--gut) 8px;scroll-padding-inline:var(--gut);scrollbar-width:thin}
  .cg-cm .bn{scroll-snap-align:start;grid-template-rows:auto 1fr;align-content:start}
  .cg-cm .bento:focus-visible{outline:2px solid var(--azul);outline-offset:-2px;border-radius:12px}
}

/* ---- Review #2 fixes 10/8/2026 (review-2026-10-08/staged-0120.md; all reversible) ----
   P2-6: the swipe row above now runs to 900px (was 600) with cards at min(86%,420px), so 768 shows 1.7 cards instead of a 1,928px stack.
   Revert: set that block back to max-width:600px and grid-auto-columns:86%. */
/* P1-2: in the swipe row the Excel card is ~300 to 420px wide. The Equipment column was already hidden at 600px and below, but the cells
   don't wrap (white-space:nowrap), so the table still ran ~48px past its panel at 390. In the swipe row: hide Equipment (now also 601 to 900px)
   and let the place names wrap; the rate column stays on one line. */
@media (max-width:900px){
  .cg-cm .xl th:nth-child(3),.cg-cm .xl td:nth-child(3){display:none}
  .cg-cm .xl td:not(.m){white-space:normal}
}
@media (max-width:600px){
  /* the phone card's table area is 203-226px wide at 360-390; the longest words ("Guadalajara,", "Chattanooga,") plus the rate need a tighter set */
  .cg-cm .xl{font-size:11.5px}
  .cg-cm .xl th{font-size:11px;padding-right:6px}
  .cg-cm .xl td{padding-right:6px}
  .cg-cm .xl td.m{padding:9px 6px}
}
@media (max-width:400px){.cg-cm .xl{font-size:11px}.cg-cm .xl th{font-size:10.5px}}
/* P2-9: the live "Match on spot freight" row (variant base, kept on every locale) takes the shared h2 size on English pages */
html[lang^="en"] section[data-wf--image-text-quote-feature-section--variant="base"] h2{font-size:clamp(30px,3.3vw,46px);line-height:1.08;letter-spacing:-.03em}