/* Cargado home "For carriers" band: "Find freight that fits your trucks".
   Ported from the redesign prototype (home route, section.sec.fc#forcarriers). Everything is scoped under .cg-fc so it cannot leak into the host page.
   Tokens are declared on .cg-fc 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 (Libre Franklin on the live page CSS fetched 10/8/2026; Space Grotesk before
   the switch), and the h2 sets no font-weight so the site's own h2 rule supplies it. -.03em is the prototype's own value for this heading (.fc-head h2). */
.cg-fc{--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-800:#2648A6;--ink:#0F172A;--body:#475569;--line-2:#CBD5E1;--paper:#FFFFFF;--gut:clamp(16px,4vw,56px);--max:1200px;--sec-pad:clamp(64px,8vw,112px);--h2-sec:clamp(30px,3.3vw,46px);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-fc *,.cg-fc *::before,.cg-fc *::after{box-sizing:border-box}

/* host reset: the live Webflow CSS gives h2 and p margins, strong 700, and a background on links */
.cg-fc h2,.cg-fc p{margin:0}
.cg-fc a{background-color:transparent}
.cg-fc :focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:6px}

.cg-fc .sec{padding-block:var(--sec-pad)}
.cg-fc .fc{background:var(--paper)}
.cg-fc .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

/* copy left, four plain points right (prototype .fc-in; align-items:center is the v46 rhythm override) */
.cg-fc .fc-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.cg-fc .fc-head{display:grid;gap:16px}
.cg-fc .fc-k{font:600 16px/1.3 var(--f-body);color:var(--azul)}
.cg-fc h2{font-family:var(--f-head);font-size:var(--h2-sec);line-height:1.08;letter-spacing:-.03em;text-wrap:balance;color:var(--ink)}
.cg-fc .lede{font-size:clamp(17px,1.5vw,19px);line-height:1.5;color:var(--body);max-width:60ch}
.cg-fc h2 + .lede{margin-top:8px}
.cg-fc .fc-head .k-row{margin-top:16px}

.cg-fc .k-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cg-fc .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;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.cg-fc .k-btn.pri{background:var(--azul);color:#fff}
.cg-fc .k-btn.pri:hover{background:var(--azul-800);color:#fff}
/* .k-tl.dk: the dark-on-light text link (prototype line 471 shape, line 2171 colors) */
.cg-fc .k-tl{font-family:var(--f-body);font-weight:600;font-size:15px;line-height:1.5;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:color .15s ease,border-color .15s ease}
.cg-fc .k-tl:hover{color:var(--azul);border-color:var(--azul)}

.cg-fc .fc-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px;padding-top:6px}
.cg-fc .fc-grid > div{display:grid;gap:6px;align-content:start}
.cg-fc .fc-grid b{font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.3}
.cg-fc .fc-grid p{font-size:15px;line-height:1.5;color:var(--body)}

@media (max-width:900px){.cg-fc .fc-in{grid-template-columns:1fr;gap:26px}}
@media (max-width:600px){
  .cg-fc h2 + .lede{margin-top:0}
  .cg-fc .fc-head .k-row{margin-top:8px}
}
@media (max-width:560px){.cg-fc .fc-grid{grid-template-columns:1fr;gap:20px}}
/* Scroll-in reveal (brief "Self-serve and motion", 10/8; the prototype's .k-rv entrance on .fc-head > * and .fc-grid > *): fc.js adds .rv only to
   elements below the fold at load and .rv-in when they scroll in, 80 ms apart; both classes come off after the transition. Transform and opacity only,
   so nothing shifts. Without JS nothing is hidden. Reduced motion: final state, no transition. */
.cg-fc .rv{opacity:0;transform:translateY(16px)}
.cg-fc .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-fc .rv{opacity:1;transform:none}.cg-fc *,.cg-fc *::before,.cg-fc *::after{animation:none!important;transition:none!important}}

/* ---- Home review rulings 10/8/2026, pre-applied as in cm.css and cta.css (review-2026-10-07/home.md; Website QB; all reversible) ---- */
/* P1-3: the site's 1280 container, so the content edge is x=80 at 1440, the same as the nav logo and the neighboring sections */
.cg-fc{--max:calc(1280px + 10vw);--gut:max(16px,5vw)}
/* P2-4: no one-word last lines */
.cg-fc :is(p,li,dd,figcaption){text-wrap:pretty}
/* P2-5: 44px hit box on the text link at every width (tap-target rule), no visual change */
.cg-fc .k-tl{position:relative;display:inline-block}.cg-fc .k-tl::after{content:"";position:absolute;inset:-12px -4px}

/* REDESIGN-PORT-08 (Matt 10/8/2026): on English pages (lang en, en-CA) this band takes the slot of the "get-started-cards" component instance
   ("Build your network..." with the "For Brokers, Forwarders, 3PLs" and "For Trucking Companies" / "I'm a Carrier" cards). es-MX and fr-CA keep it
   (the embed is hidden there by its locale guard). Nothing is deleted. The instance is not a <section> and has no data-wf variant attribute, so the
   hook is its outer wrapper (.padding-global.padding-section-medium, which holds the section padding) when it directly contains .layout361_component
   with a Webflow node id ending in the component's suffix -5f712863 (home only; /get-started and /platform/marketplace use layout361 with other ids).
   This is the same rule cta.css (cg-cta-v2.css, in production since 10/7/2026) already applies, character for character, so the two can never
   disagree; it is repeated here so this package stands on its own if the closing CTA is ever reworked. fc.js hides the same wrapper without :has(). */
html[lang^="en"] .padding-global.padding-section-medium:has(> .layout361_component [id$="-5f712863"]){display:none!important}