/* cg-bq v3 (brokers-quote-1009, QB: QUOTE-V3, 10/9/2026). /brokers "Quote from real carrier bids".
   Matt, 10/9: "It should always be the full app but start on where you want them to start or an interactive excel add-in."
   "Look up a lane" = the full Cargado app window (the Home hero's dv2 window and engine, opened on Market Rates);
   "Price a bid file" = the interactive Excel add-in (cg-xl, the staged /platform/excel-add-in window).
   Every rule is scoped under .cg-bq3. The window itself is styled by the page's own dv2-dv2-v12.css and dv2-mobile-v1.css
   (the same rules that style the hero window); this file only adds the section chrome, the toggle, the pane stack and a
   dark-band frame for this window, all under .cg-bq3, so nothing here can reach the hero (.dv2) or cover (.bcdv) windows. */
.cg-bq3{--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;--ink:#0F172A;--sky-100:#E0F2FE;--sky-400:#38BDF8;--azul:#345ED1;--azul-950:#0F204B;--azul-900:#1E3A85;--azul-800:#2648A6;--on-b1:rgba(255,255,255,.88);--line-dk:rgba(255,255,255,.2);--sh-pw-dk:0 32px 64px -24px rgba(4,10,30,.6),0 10px 24px -10px rgba(4,10,30,.35);--max:calc(1280px + 10vw);--gut:max(16px,5vw);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}
/* en-CA, es-MX and fr-CA keep their live rows (Matt, 10/7/2026, /brokers ruling): CSS backstop for the path guard */
html:not([lang="en"]) .cg-bq3{display:none!important}

/* section chrome (same values as v2.1: dark azul stage, 1280 container, 46px h2, 10px heading-to-lede, 28px to the toggle) */
.cg-bq3 .bq3-stage{display:block;color:#fff;background-color:var(--azul-950);background-image:linear-gradient(180deg,var(--azul-950),var(--azul-900) 60%,var(--azul-800));padding:clamp(36px,5vw,64px) 0 clamp(40px,6vw,80px)}
.cg-bq3 .bq3-wrap{box-sizing:border-box;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.cg-bq3 .bq3-chapter{display:grid;gap:10px;margin:0 0 28px;max-width:760px;color:#fff}
.cg-bq3 .bq3-chapter h2{margin:0;padding:0;color:inherit;font-family:var(--f-head);font-size:clamp(30px,3.3vw,46px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.cg-bq3 .bq3-chapter p{margin:0;padding:0;font-size:clamp(17px,1.5vw,19px);line-height:1.5;color:var(--on-b1);max-width:60ch;text-wrap:pretty}

/* the toggle: same shape and strings as the engine's shipper-mode .pwv (role=group "Product view", aria-pressed buttons), 44px targets */
.cg-bq3 .bq3-pwv{display:flex;width:fit-content;max-width:100%;margin:0 auto 16px;padding:4px;gap:4px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(4,10,30,.2)}
.cg-bq3 .bq3-pwv button{-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:44px;margin:0;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--azul-900);font:500 15px/1.2 var(--f-body);cursor:pointer;white-space:nowrap}
.cg-bq3 .bq3-pwv button[aria-pressed="true"]{background:var(--azul);color:#fff}
.cg-bq3 .bq3-pwv button[aria-pressed="false"]:hover{background:var(--sky-100)}
.cg-bq3 .bq3-pwv button:focus-visible{outline:2px solid var(--sky-400);outline-offset:2px}
@media (max-width:389.98px){.cg-bq3 .bq3-pwv button{padding:0 12px;font-size:14px}}

/* the two panes share one grid cell, so the section keeps the taller pane's height and nothing below moves on a switch.
   The app pane is hidden with visibility (it keeps its width, so dv2-mobile never sees a 0px window and the engine keeps its scale);
   the Excel pane is display:none until first shown, so the add-in's one demo pass plays when the visitor opens it, not unseen. */
.cg-bq3 .bq3-stack{display:grid;grid-template-columns:minmax(0,1fr)}
.cg-bq3 .bq3-pane{grid-area:1/1;min-width:0}
.cg-bq3 .bq3-xl{display:none}
.cg-bq3[data-bq3-view="xl"] .bq3-xl{display:block}
.cg-bq3 .bq3-xl{box-sizing:border-box;width:100%;margin-inline:auto}
.cg-bq3[data-bq3-view="xl"] .bq3-app{visibility:hidden}

/* the window on the dark band: the hero window's markup (.dv2 > section.pwx.blue) without the hero page's own background */
.cg-bq3 .bq3-app .dv2{background:none}
.cg-bq3 .bq3-app .dv2 .pw-pan{box-shadow:var(--sh-pw-dk)}
/* hint height: the site head's DV2-HOLD-1008 holds every dv2 hint at two lines (2lh) from 640px until the engine sizes the window, which is
   also this window's own reserve there (its longest hint, with Start over, wraps to two lines at the hint's 64ch). When the window starts
   while the visitor is already looking at it (a deep link, a slow script), the engine defers its reserve to the first click and the hint
   would drop to one line, moving the window 19px. Pin the two-line hold for this window so the start moves nothing. */
@media (min-width:640px){.cg-bq3 .bq3-app .dv2 .pwx>.hint{min-height:2lh!important}}
/* "Example lanes and figures." is static here (the engine skips its own note when one follows the window), one per pane */
.cg-bq3 .pwnote{box-sizing:border-box;width:fit-content;max-width:100%;margin:12px auto 0;padding:0 10px;font:400 13px/20px var(--f-body);text-align:center;color:#D6E3FF}

/* the Excel add-in pane: the staged cg-xl window (cg-xl-v2.css styles it); mount height reserved like the Excel page embed
   (500/556/668px), so mounting shifts nothing; top-aligned with the app window's frame */
.cg-bq3 .bq3-xl .cg-xl{color:var(--ink)}
.cg-bq3 .bq3-xl .cg-xl .xm-mount{height:520px}
@media (min-width:600px){.cg-bq3 .bq3-xl .cg-xl .xm-mount{height:556px}}
@media (min-width:1100px){.cg-bq3 .bq3-xl .cg-xl .xm-mount{height:500px}}
@media (max-width:599px){.cg-bq3 .bq3-xl .cg-xl .xm-mount{height:668px}}

/* the section's primary button (v2.1, unchanged): prototype .k-btn, 48px tall */
.cg-bq3 .k-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cg-bq3 .bq-cta{justify-content:center;margin-top:28px}
.cg-bq3 .k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;font:600 15px/1 var(--f-body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease}
.cg-bq3 .k-btn.white{background:#fff;color:var(--azul-900)}
.cg-bq3 .k-btn.white:hover{background:var(--sky-100)}
.cg-bq3 .k-btn:focus-visible{outline:2px solid var(--sky-400);outline-offset:2px}

/* scroll-in reveal (brief "Self-serve and motion"): JS adds .cg-rv only to blocks below the fold at load, .cg-rv-in once in view;
   opacity and transform only; reduced motion gets neither class */
.cg-bq3 .cg-rv{opacity:0;transform:translateY(14px)}
.cg-bq3 .cg-rv.cg-rv-in{opacity:1;transform:none;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.cg-bq3 .bq3-pwv button,.cg-bq3 .k-btn,.cg-bq3 .cg-rv{transition:none!important}.cg-bq3 .cg-rv{opacity:1;transform:none}}