/* 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}