/* Cargado /carriers closing band: "Find your next cross-border load".
   v2 (10/9/2026, review fixes). Ported from the redesign prototype (carriers route, section.cta.dark). Everything is scoped under .cg-cx so it cannot leak into the host page.
   Tokens are declared on .cg-cx with the prototype's light values (the band is solid Azul 900, the prototype's computed background). 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. */
.cg-cx{--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-900:#1E3A85;--sky-100:#E0F2FE;--sky-400:#38BDF8;--on-b1:rgba(255,255,255,.88);--gut:max(16px,5vw);--max:calc(1280px + 10vw);box-sizing:border-box;color:#fff;font-family:var(--f-body);font-size:16px;line-height:1.5;text-align:start;-webkit-font-smoothing:antialiased}
.cg-cx *,.cg-cx *::before,.cg-cx *::after{box-sizing:border-box}

/* host reset: the live Webflow CSS gives h2 and p margins */
.cg-cx h2,.cg-cx p{margin:0}
.cg-cx a{text-decoration:none}
.cg-cx :focus-visible{outline:2px solid var(--sky-400);outline-offset:2px;border-radius:6px}

.cg-cx .cta{background:var(--azul-900);color:#fff;text-align:center}
.cg-cx .wrap{display:grid;gap:18px;justify-items:center;max-width:var(--max);margin:0 auto;padding-inline:var(--gut);padding-block:clamp(72px,9vw,120px)}
.cg-cx h2{font-family:var(--f-head);font-size:clamp(30px,3.3vw,46px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance;color:#fff}
.cg-cx .lede{max-width:60ch;margin:0 auto;font-size:clamp(17px,1.5vw,19px);line-height:1.5;color:var(--on-b1);text-align:center;text-wrap:balance}
.cg-cx .lede.sub{margin-top:-8px;font-size:clamp(15px,1.2vw,17px);color:rgba(255,255,255,.78)} /* the next step after the cost line (review 10/9) */
.cg-cx .k-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
.cg-cx .k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;font-family:var(--f-body);font-weight:600;font-size:15px;line-height:1.5;white-space:nowrap;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.cg-cx .k-btn.white{background:#fff;color:var(--azul-900)}
.cg-cx .k-btn.white:hover{background:var(--sky-100);color:var(--azul-900)}


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

/* English-only row hide (per the package brief): on English /carriers (lang en, en-CA) this band replaces the live closing section "Find Mexico and Canada freight
   this week". That section has no class and no Webflow variant attribute; it is a direct child of main.main-wrapper and the only one whose button row carries
   the class ac-btnrow (checked on /, /en-ca, /es-mx and /fr-ca copies of /carriers, 10/8/2026). Scoped to the /carriers page id (review 10/9) so the rule
   can never match another page. es-MX and fr-CA keep it (the embed is hidden there by its locale
   guard). Nothing is deleted or edited. cx.js applies the same hide in browsers without :has(). */
html[lang^="en"][data-wf-page="68f6b319f63bb9cb97f4038e"] main.main-wrapper > section:not([class]):has(.ac-btnrow){display:none!important}

/* Footer CTA band hide, English /carriers only (coordinator, 10/9/2026). The shared Footer component (instance ba314cf0, component 33d3e022) carries a generic
   "Join Cargado today" band ("One subscription for brokers. No-cost marketplace access for carriers.", button to /get-started) right above the footer logo. On
   /carriers it would sit directly under this carrier band as a second, broker-first CTA. Scoped to the /carriers page id and English, so every other page and
   the es-MX and fr-CA /carriers keep it. The footer's "Hide CTA on this page?" prop is not used (it does not behave as named, and the footer is shared).
   footer.footer2_component div.home_cta_component matches exactly one element on every /carriers locale copy (checked 10/9/2026). The 80px (48px phone) .spacer-xxlarge that
   immediately follows the band is hidden with it, so the gap between the help strip and the footer logo stays close to what it is today (82px) instead of
   doubling. No :has(), so no JS fallback is needed. */
html[lang^="en"][data-wf-page="68f6b319f63bb9cb97f4038e"] footer.footer2_component div.home_cta_component,
html[lang^="en"][data-wf-page="68f6b319f63bb9cb97f4038e"] footer.footer2_component div.home_cta_component + .spacer-xxlarge{display:none!important}