/* Cargado /carriers "Set your lanes once and get alerts for loads that fit": three hairline-topped columns (alerts, bid your way, chat) and the Rover Carrier quote.
   v2 (10/9/2026, review fixes: no example alert, chat line per ruling, h3 -.03em, testimonial resets).
   Ported from the redesign prototype (carriers route, the section.sec after the logo wall; the prototype hides the icon boxes, .feat3 .ico{display:none}, so they
   are not in the markup). Everything is scoped under .cg-cf so it cannot leak into the host page. Tokens are declared on .cg-cf 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 h2/h3 set no font-weight so the site's own h2/h3 rules supply it. */
.cg-cf{--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;--ink:#0F172A;--body:#475569;--cap:#64748B;--line:#E2E8F0;--card:#FFFFFF;--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-cf *,.cg-cf *::before,.cg-cf *::after{box-sizing:border-box}

/* host reset: the live Webflow CSS gives h2/h3/p/figure/blockquote margins */
.cg-cf h2,.cg-cf h3,.cg-cf p,.cg-cf figure,.cg-cf blockquote,.cg-cf figcaption{margin:0}
.cg-cf :focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:6px}

.cg-cf .sec{padding-block:clamp(64px,8vw,112px);background:#fff}
.cg-cf .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.cg-cf .sec-head{display:grid;gap:16px;max-width:760px;margin-bottom:clamp(44px,5vw,60px)}
.cg-cf 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-cf :is(p,li,figcaption){text-wrap:pretty}

.cg-cf .feat3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.cg-cf .feat3 > div{display:grid;gap:10px;align-content:start;border-top:1px solid var(--line);padding-top:20px}
.cg-cf h3{font-family:var(--f-head);font-size:20px;line-height:1.3;letter-spacing:-.03em;text-wrap:balance;color:var(--ink)}
.cg-cf .feat3 p{color:var(--body);font-size:15px;line-height:1.5}
@media (max-width:860px){.cg-cf .feat3{grid-template-columns:1fr}}

.cg-cf .qt{margin-top:40px;border:1px solid var(--line);border-radius:20px;padding:24px;display:grid;gap:18px;align-content:space-between;background:var(--card);box-shadow:var(--sh-card);transition:border-color .2s ease}
.cg-cf .qt:hover{border-color:var(--azul-200)}
/* Testimonial resets (review 10/9): the live Webflow CSS gives blockquote a black left border, padding, margins and its own font, and centers figcaption text. */
.cg-cf .qt blockquote{border:0;padding:0;margin:0;font-family:var(--f-body);font-size:16.5px;font-weight:400;font-style:normal;line-height:1.5;letter-spacing:0;color:var(--ink);text-align:left;background:none}
.cg-cf .qt figcaption,.cg-cf .qt .by{text-align:left;margin:0;padding:0;font-family:var(--f-body)}
.cg-cf .qt .by{display:grid;gap:2px;font-size:13.5px;line-height:1.5;color:var(--body)}
.cg-cf .qt .by b{color:var(--ink);font-weight:600}

/* Scroll-in reveal (brief "Self-serve and motion", 10/8): cf.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-cf .rv{opacity:0;transform:translateY(16px)}
.cg-cf .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-cf .rv{opacity:1;transform:none}.cg-cf *,.cg-cf *::before,.cg-cf *::after{animation:none!important;transition:none!important}}

/* English-only row hide (per the package brief): on English /carriers (lang en, en-CA) this section replaces the live "Set it once and let the freight come to you"
   row (shared "Image + Text Feature Section 2" component; its variant value float-light appears once on the page on every locale) and the Rover Carrier
   testimonial right under it (shared "Testimonial" component, hooked by Aman Sekhon's photo 6a17456e6a10ed608c25792b), whose quote this section carries.
   v2 (10/9): the row hook is the variant attribute, not the image asset id. On /en-ca/carriers the site's cargado-locale-swap-v13.js replaces that row's image
   with an en-CA asset (6a32ff87930ec27facc3d778) at runtime, so an image-id hook misses there; the route-served locale test caught it. The two rules are
   separate on purpose: a browser without :has() drops a whole selector list that contains it, and the row hide must survive in those browsers.
   es-MX and fr-CA keep both rows (the embed is hidden there by its locale guard). Nothing is deleted or edited. cf.js applies the testimonial hide in
   browsers without :has(); the row hide needs no fallback. */
html[lang^="en"] section.section_image-text-feature_v2[data-wf--image-text-feature-section-2--variant="float-light"]{display:none!important}
html[lang^="en"] section.section_testimonial1:has(img[src*="6a17456e6a10ed608c25792b"]){display:none!important}