/* Cargado /carriers "Start getting loads that fit your trucks": three onboarding steps, the SSP Group quote and the Request access card.
   Ported from the redesign prototype (carriers route, section.sec.alt#join, which the prototype paints on paper: main[data-page="carriers"] #join{background:var(--paper)}).
   Everything is scoped under .cg-cj so it cannot leak into the host page. Tokens are declared on .cg-cj 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 the h2
   sets no font-weight so the site's own h2 rule supplies it. The prototype's inline styles on the h2, the quote figure and the card title became classes
   (cj-h2, cj-q, jc-t, jc-free, jc-p). v2 (10/9/2026): step 2 and the badge follow the coordinator's rulings, testimonial resets. */
.cg-cj{--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;--f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--azul:#345ED1;--azul-50:#EEF2FB;--azul-200:#CDD7F4;--azul-800:#2648A6;--ink:#0F172A;--body:#475569;--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-cj *,.cg-cj *::before,.cg-cj *::after{box-sizing:border-box}

/* host reset: the live Webflow CSS gives h2/p/figure/blockquote/ol margins and li a 4px margin and 8px padding-left */
.cg-cj h2,.cg-cj p,.cg-cj figure,.cg-cj blockquote,.cg-cj figcaption,.cg-cj ol{margin:0}
.cg-cj ol{padding:0}
.cg-cj li{margin:0;padding:0}
.cg-cj a{text-decoration:none}
.cg-cj :focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:6px}

.cg-cj .sec{padding-block:clamp(64px,8vw,112px);background:#fff}
.cg-cj .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.cg-cj .k-join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.cg-cj 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-cj .cj-h2{margin-top:12px}
.cg-cj :is(p,li,figcaption){text-wrap:pretty}

.cg-cj .jsteps{list-style:none;margin-top:24px;display:grid;gap:16px}
.cg-cj .jsteps li{display:grid;grid-template-columns:32px 1fr;gap:14px}
.cg-cj .jsteps li::before{content:attr(data-n);font-family:var(--f-mono);font-size:12px;line-height:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--azul);color:#fff;border:1px solid var(--azul);transition:background .3s ease,color .3s ease,border-color .3s ease}
/* Steps light up in order (brief "Self-serve and motion", 10/8). The lit (final) state is the default, so it holds without JS and under prefers-reduced-motion.
   cj.js adds .wait to the list only when it is below the fold at load, which pales every step, then adds .lit to each step 350 ms apart when the list scrolls in, once. */
.cg-cj .jsteps.wait li:not(.lit)::before{background:var(--azul-50);color:var(--azul);border-color:var(--azul-200)}
.cg-cj .jsteps b{display:block;font-weight:700;color:var(--ink)}
.cg-cj .jsteps span{color:var(--body);font-size:15px;line-height:1.5}

.cg-cj .qt{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-cj .cj-q{margin-top:28px}
.cg-cj .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-cj .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-cj .qt figcaption,.cg-cj .qt .by{text-align:left;margin:0;padding:0;font-family:var(--f-body)}
.cg-cj .qt .by{display:grid;gap:2px;font-size:13.5px;line-height:1.5;color:var(--body)}
.cg-cj .qt .by b{color:var(--ink);font-weight:600}

.cg-cj .jform{border:1px solid var(--line);border-radius:20px;padding:24px;display:grid;gap:14px;background:var(--card);box-shadow:var(--sh-card)}
.cg-cj .jc-t{font-family:var(--f-head);font-size:20px;line-height:1.3;font-weight:700;color:var(--ink)}
.cg-cj .jc-free{font-family:var(--f-body);font-size:13px;font-weight:600;color:var(--azul);margin-left:6px;white-space:nowrap}
.cg-cj .jc-p{color:var(--body);font-size:15px;line-height:1.5}
.cg-cj .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-cj .k-btn.pri{background:var(--azul);color:#fff}
.cg-cj .k-btn.pri:hover{background:var(--azul-800);color:#fff}
@media (max-width:860px){.cg-cj .k-join{grid-template-columns:1fr}}


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

/* No English-only row hide in this package. The live page has no "how to join" row; this section is additive and goes between the comparison chart's slot and
   the "Carrier stories" header. The SSP Group quote it carries also appears in a live testimonial near the top of the page (under "A more reliable network");
   that row is left alone here because hiding an element far above this embed's own <link> would land after first paint and shift the page. See the README. */