/* Cargado home closing call to action: "Get started on Cargado".
   Ported from the redesign prototype (home route, section.cta.dark.home-cta). Everything is scoped under .cg-cta so it cannot leak into the host page.
   Tokens are declared on .cg-cta 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 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. */
.cg-cta{--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-900:#1E3A85;--azul-950:#0F204B;--sky-100:#E0F2FE;--sky-400:#38BDF8;--on-b1:rgba(255,255,255,.88);--on-b2:#BFD3FF;--line-dk:rgba(255,255,255,.2);--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:#fff;font-family:var(--f-body);font-size:16px;line-height:1.5;text-align:start;-webkit-font-smoothing:antialiased}
.cg-cta *,.cg-cta *::before,.cg-cta *::after{box-sizing:border-box}

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

.cg-cta .cta{background:linear-gradient(180deg,var(--azul-950),var(--azul-900));color:#fff;text-align:center}
.cg-cta .wrap{display:grid;gap:18px;justify-items:center;max-width:var(--max);margin:0 auto;padding-inline:var(--gut);padding-block:var(--sec-pad)}
.cg-cta h2{font-family:var(--f-head);font-size:var(--h2-sec);line-height:1.08;letter-spacing:-.03em;text-wrap:balance;color:#fff}
.cg-cta .lede{max-width:60ch;margin:6px auto 0;font-size:clamp(17px,1.5vw,19px);line-height:1.5;color:var(--on-b1);text-align:center}

.cg-cta .k-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
.cg-cta .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-cta .k-btn.white{background:#fff;color:var(--azul-900)}
.cg-cta .k-btn.white:hover{background:var(--sky-100);color:var(--azul-900)}
.cg-cta .k-tl{font-family:var(--f-body);font-weight:600;font-size:15px;line-height:1.5;color:var(--on-b1);text-decoration:none;border-bottom:1px solid var(--line-dk);padding-bottom:2px;transition:color .15s ease,border-color .15s ease}
.cg-cta .k-tl:hover{color:#fff;border-color:var(--sky-400)}
/* Carrier line (Matt 10/7/2026): quiet secondary link under the buttons, color-only hover; -6px pulls it to 12px under the buttons (the button row's own gap) so it reads with them; nowrap so it never breaks mid-phrase (about 240px at 390) */
.cg-cta .cta-carrier{margin-top:-6px;font-size:14px;line-height:1.5}
.cg-cta .cta-carrier a{font-family:var(--f-body);font-weight:500;color:var(--on-b2);text-decoration:none;white-space:nowrap;transition:color .15s ease}
.cg-cta .cta-carrier a:hover{color:#fff}
.cg-cta .cta-terms{margin:22px auto 0;font-size:14px;line-height:1.5;color:var(--on-b2)}

@media (prefers-reduced-motion:reduce){.cg-cta *,.cg-cta *::before,.cg-cta *::after{animation:none!important;transition:none!important}}

/* REDESIGN-10: on English pages (lang en, en-CA) this section replaces the "get-started-cards" component instance (broker card and carrier card).
   es-MX and fr-CA keep it (the embed is hidden there by its locale guard). Nothing is deleted.
   The instance 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.
   That suffix appears only on home (scan of 285 English pages, 10/7/2026); /get-started and /platform/marketplace use layout361 classes with other ids.
   cta.css loads only on pages that carry this embed, so the selector cannot reach other pages anyway. cta.js hides the same wrapper in browsers without :has(). */
html[lang^="en"] .padding-global.padding-section-medium:has(> .layout361_component [id$="-5f712863"]){display:none!important}

/* REDESIGN-10 (Matt 10/7/2026): on English home, this section is the closing CTA, so the footer's "Join Cargado today" block is hidden there.
   Three scopes: html[lang^="en"] (en, en-CA); html:has(.cg-cta), so it only fires on a page that carries this embed even if cta.css were loaded elsewhere;
   and the block's own class inside the footer component. The block has no data-wf variant or node id; footer2_component > ... > .home_cta_component is
   identical on /, /en-ca, /es-mx and /fr-ca (checked 10/7/2026). The spacer-xxlarge right after it (its next sibling inside container-large, checked in the DOM on all four locales) is hidden too (Website QB, 10/7/2026); the rest of the footer (logo, links, legal) is untouched. cta.js mirrors this without :has(). */
html[lang^="en"]:has(.cg-cta) footer.footer2_component .home_cta_component,
html[lang^="en"]:has(.cg-cta) footer.footer2_component .home_cta_component + .spacer-xxlarge{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 (the section is centered; this keeps its wrap on the same token as the other sections) */
.cg-cta{--max:calc(1280px + 10vw);--gut:max(16px,5vw)}
/* P2-9: lede measure 52ch (about 68 characters of Inter; was 60ch) */
.cg-cta .lede{max-width:52ch}
/* P2-4 */
.cg-cta :is(p,li,dd,figcaption){text-wrap:pretty}
.cg-cta .cta-terms{text-wrap:balance}
/* P2-5: 44px hit boxes at every width (tap-target rule), no visual change */
.cg-cta .k-tl,.cg-cta .cta-carrier a{position:relative;display:inline-block}.cg-cta .k-tl::after,.cg-cta .cta-carrier a::after{content:"";position:absolute;inset:-12px -4px}

/* ---- v3, option B "two paths" (Matt picked B, 10/9/2026). Replaces the centered single-button layout. ----
   Left: heading, lede, "Book a demo" as the secondary link. Right: two whole-card links, brokers and 3PLs (/get-started) and trucking companies
   (request access), then the reply-time note. Copy comes from live pages: price, users and commission from /pricing; "No call required" and the
   one-business-day reply from /broker-tour; the carrier line from /pricing. */
.cg-cta .home-cta{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(70% 90% at 50% -10%,rgba(56,189,248,.16),rgba(56,189,248,0) 60%),linear-gradient(180deg,var(--azul-950),var(--azul-900))}
.cg-cta .home-cta .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center;justify-items:stretch;text-align:left;padding-block:clamp(56px,6.5vw,96px)}
.cg-cta .cta-copy{display:grid;gap:16px;align-content:center}
.cg-cta h2{font-size:clamp(32px,3.6vw,52px)}
.cg-cta .lede{margin:0;max-width:34ch;text-align:left}
.cg-cta .cta-demo{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:15px;line-height:1.5;color:var(--on-b2)}
/* "Book a demo": one underline under text and arrow, on a 48px line so it centers with the sentence */
.cg-cta .k-tl{display:inline-block;line-height:48px;min-height:48px;padding:0;border:0;text-decoration:underline;text-decoration-color:var(--line-dk);text-decoration-thickness:1px;text-underline-offset:7px}
.cg-cta .k-tl:hover{text-decoration-color:var(--sky-400)}
.cg-cta .paths{display:grid;gap:12px;container-type:inline-size}
.cg-cta .path{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h go" "p go";gap:6px 24px;align-items:center;padding:24px 26px;border-radius:18px;text-decoration:none;transition:transform .2s ease,background .2s ease,border-color .2s ease}
.cg-cta .path h3{grid-area:h;margin:0;font-family:var(--f-head);font-size:21px;line-height:1.2;letter-spacing:-.02em}
.cg-cta .path p{grid-area:p;margin:0;font-size:15px;line-height:1.45;max-width:44ch}
.cg-cta .path .go{grid-area:go;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 18px;border-radius:999px;font-family:var(--f-body);font-weight:600;font-size:15px;white-space:nowrap;transition:background .2s ease,border-color .2s ease}
.cg-cta .path.primary{background:#fff;color:var(--azul-950);box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}
.cg-cta .path.primary h3{color:var(--azul-950)}
.cg-cta .path.primary p{color:#475569}
.cg-cta .path.primary .go{background:var(--azul);color:#fff}
.cg-cta .path.primary:hover .go{background:var(--azul-900)}
.cg-cta .path.sec{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff}
.cg-cta .path.sec h3{color:#fff}
.cg-cta .path.sec p{color:var(--on-b2)}
.cg-cta .path.sec .go{border:1px solid rgba(255,255,255,.35);color:#fff}
.cg-cta .path.sec:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.cg-cta .path.sec:hover .go{border-color:#fff}
.cg-cta .path:hover{transform:translateY(-2px)}
.cg-cta .path:focus-visible{outline:2px solid var(--sky-400);outline-offset:3px;border-radius:18px}
.cg-cta .paths-note{margin:4px 2px 0;font-size:13.5px;line-height:1.45;color:var(--on-b2)}
/* Below 1060px the copy stacks over the cards (side by side, the cards wrapped to five lines at 922) */
@media (max-width:1060px){.cg-cta .home-cta .wrap{grid-template-columns:minmax(0,1fr)}.cg-cta h2{font-size:var(--h2-sec)}.cg-cta .lede{max-width:46ch}}
/* Narrow cards: button moves under the text */
@container (max-width:520px){.cg-cta .path{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "p" "go";padding:20px}.cg-cta .path .go{justify-self:start;margin-top:8px}}
@supports not (container-type:inline-size){@media (max-width:600px){.cg-cta .path{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "p" "go";padding:20px}.cg-cta .path .go{justify-self:start;margin-top:8px}}}
/* Scroll-in reveal (cta.js adds .rv only to items below the fold at load; opacity and transform only; plays once) */
.cg-cta .rv{opacity:0;transform:translateY(14px)}
.cg-cta .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-cta .path:hover{transform:none}.cg-cta .rv{opacity:1;transform:none}}
/* Locale guard without JS (Codex review, 10/9/2026): the inline script hides this on /es-mx and /fr-ca; this covers a visitor with JS off. Live lang values: es-MX, fr-CA. */
html[lang^="es"] .cg-cta,html[lang^="fr"] .cg-cta{display:none!important}
/* ---- v3.1 depth (Matt 10/9/2026: "more depth off the background") ----
   Four layers behind the content, all inside the section (isolation on .home-cta keeps them under .wrap):
   1. a sky glow behind the heading and an azul glow behind the cards, over a deeper navy base;
   2. a faint dot grid that fades out toward the edges (::before);
   3. dashed lane arcs with crossing dots behind the cards, echoing the network map (::after);
   4. a soft vignette at the bottom edge. No images, no motion. */
.cg-cta .home-cta{background:
  radial-gradient(48% 70% at 18% 30%,rgba(56,189,248,.20),rgba(56,189,248,0) 70%),
  radial-gradient(55% 80% at 82% 62%,rgba(76,110,230,.42),rgba(76,110,230,0) 70%),
  radial-gradient(120% 60% at 50% 115%,rgba(6,14,38,.55),rgba(6,14,38,0) 60%),
  linear-gradient(180deg,#0B1838 0%,var(--azul-950) 35%,#17307A 100%)}
.cg-cta .home-cta::before,.cg-cta .home-cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.cg-cta .home-cta::before{background-image:radial-gradient(rgba(191,211,255,.22) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(75% 85% at 50% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(75% 85% at 50% 45%,#000 20%,transparent 75%)}
.cg-cta .home-cta::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500' fill='none'%3E%3Cg stroke='%2393B4FF' stroke-width='1.4' stroke-dasharray='5 7' stroke-linecap='round'%3E%3Cpath d='M40 430C210 250 420 210 760 90'/%3E%3Cpath d='M110 470C300 360 500 330 780 300'/%3E%3Cpath d='M20 300C220 190 380 120 640 30'/%3E%3Cpath d='M240 480C380 380 560 250 700 200'/%3E%3C/g%3E%3Cg fill='%237DD3FC'%3E%3Ccircle cx='40' cy='430' r='4'/%3E%3Ccircle cx='760' cy='90' r='4'/%3E%3Ccircle cx='780' cy='300' r='4'/%3E%3Ccircle cx='640' cy='30' r='4'/%3E%3Ccircle cx='700' cy='200' r='4'/%3E%3Ccircle cx='452' cy='214' r='3'/%3E%3C/g%3E%3Cg fill='%237DD3FC' fill-opacity='.25'%3E%3Ccircle cx='760' cy='90' r='12'/%3E%3Ccircle cx='700' cy='200' r='12'/%3E%3Ccircle cx='452' cy='214' r='10'/%3E%3C/g%3E%3C/svg%3E") right 2% center/min(860px,62%) auto no-repeat;opacity:.3;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 70%);mask-image:linear-gradient(90deg,transparent 30%,#000 70%)}
.cg-cta .home-cta .wrap{position:relative}
/* the white card sits higher off the background */
.cg-cta .path.primary{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 24px 50px -20px rgba(2,8,30,.75),0 8px 18px -10px rgba(2,8,30,.5)}
.cg-cta .path.sec{background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
@media (max-width:1060px){.cg-cta .home-cta::after{background-position:right -60px bottom 40px;background-size:min(720px,110%) auto;-webkit-mask-image:linear-gradient(180deg,transparent 35%,#000 80%);mask-image:linear-gradient(180deg,transparent 35%,#000 80%)}}