/* Car shipping landing — production changes on top of cs-design.css (the
   Claude Design handoff, imported as is). Loads after it.
   - page frame (the design was an artboard), tablet widths the design did not draw
   - the quote card holds our real calculator (BlogCalc national car form):
     its card is flattened into the design's white card
   - the calculator keeps the world it has on the blog: the design's global
     resets are undone inside it with zero-specificity rules */

body.cs{margin:0;background:#172554;font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;color:#101828;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
.cs .wrap{max-width:1440px;margin:0 auto}
.cs h1,.cs h2,.cs h3{font-weight:inherit}
.cs .h1{font-weight:800}
.cs .h2{font-weight:800}
.cs-page{display:block}
.cs [hidden]{display:none!important}
.cs .hero{overflow:hidden}

/* ── the map: reserve its box before the shapes arrive (no layout shift) ── */
.cs .maphost{aspect-ratio:975/610;position:relative}
.cs .maphost .map{margin-top:0;height:100%}
@media (max-width:768px){.cs .maphost{aspect-ratio:954.6/615.6}}
.cs .mapwrap .chips{flex-wrap:nowrap;min-width:0}
.cs .mapwrap .chip .t{overflow:hidden;text-overflow:ellipsis;max-width:220px}
@media (max-width:768px){.cs .mapwrap .chip .t{max-width:118px}}

/* ── tablet: the design drew 1440 and 390 only ── */
@media (min-width:769px) and (max-width:1180px){
  .cs .hgrid{grid-template-columns:minmax(0,1fr) 420px;gap:36px;padding:44px 0}
  .cs .h1{font-size:46px}
  .cs .sub{font-size:17px}
  .cs .qc{width:420px;padding:26px}
}
@media (min-width:769px) and (max-width:980px){
  .cs .hgrid{grid-template-columns:minmax(0,1fr);gap:28px}
  .cs .qc{width:100%;max-width:560px;margin:0 auto}
  .cs .h1{font-size:44px}
}

/* ── the quote card: our calculator inside the design's card ── */
.cs .qc{min-height:0}
.cs .qc>.cs-calc{flex:1 1 auto;display:flex;flex-direction:column;min-height:560px}
@media (max-width:768px){.cs .qc>.cs-calc{min-height:600px}}
.cs .cs-calc[data-mounted]{min-height:0}

:where(.cs-calc *){margin:revert;padding:revert}
:where(.cs-calc) :where(a,a:hover){color:inherit;text-decoration:none}

.cs .qc .bc-card{background:transparent;border:0;box-shadow:none;padding:0;border-radius:0}
.cs .qc .bc-card-header{margin:0 0 18px;padding:0;background:none;border-radius:0;text-align:left;color:inherit;overflow:visible}
.cs .qc .bc-card-header::after{display:none}
.cs .qc .bc-eyebrow{background:none;border:0;padding:0;color:#1E57D6;font:600 12px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.cs .qc .bc-live-dot{width:7px;height:7px;border-radius:50%;background:#C81E1E;box-shadow:none;animation:none}
.cs .qc .bc-title{color:#101828;font-size:26px;font-weight:700;letter-spacing:-.02em;margin:8px 0 0;line-height:1.2}
@media (max-width:768px){.cs .qc .bc-title{font-size:22px}}
.cs .qc .bc-trustline{display:none}
.cs .qc .bc-card-body{gap:16px}

/* vehicle chips (BlogCalc renders them when surface.vehicleChips) */
.bc-vchips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bc-vchip{height:44px;border:1px solid #E4E7EC;border-radius:10px;background:#fff;font:500 13.5px/1.1 Inter,system-ui,sans-serif;color:#344054;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 6px;cursor:pointer;transition:border-color .15s,background .15s}
.bc-vchip:hover{border-color:#B2C6F3}
.bc-vchip.on{border-color:#1E57D6;background:#EEF3FD;color:#1846B0;box-shadow:0 0 0 1px #1E57D6 inset;font-weight:600}
.bc-vchip:focus-visible{outline:2px solid #1E57D6;outline-offset:2px}
@media (max-width:420px){.bc-vchips{grid-template-columns:repeat(3,minmax(0,1fr))}.bc-vchip{font-size:12.5px}}
.bc-vmore{align-self:flex-start;background:none;border:0;padding:6px 0;margin:-4px 0 0;font:600 14px Inter,system-ui,sans-serif;color:#1E57D6;cursor:pointer}
.bc-vmore:hover{text-decoration:underline}

/* the static stand-in shown until the calculator mounts (same size, no jump) */
.cs-skel{display:flex;flex-direction:column;gap:16px;pointer-events:none}
.cs-skel .cs-skh{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:8px;color:#101828}
@media (max-width:768px){.cs-skel .cs-skh{font-size:22px}}
.cs-skel .rbox{margin-top:2px}
.cs-skel .sk-btn{height:56px;border-radius:12px;background:linear-gradient(180deg,#1E57D6,#1846B0);opacity:.92;margin-top:6px}
.cs-calc[data-mounted] .cs-skel{display:none}
.cs-fail{display:flex;flex-direction:column;gap:12px;padding:8px 0}
.cs-fail[hidden]{display:none}
.cs-fail p{font-size:15px;line-height:1.5;color:#344054}
.cs-fail .btn{width:100%}
.cs-fail .btn.ghost{color:#1E57D6;border-color:#C7D5F6}

/* ── footer ── */
.cs-foot{background:#111D47;border-top:1px solid rgba(255,255,255,.08);padding:28px 0 calc(28px + env(safe-area-inset-bottom));color:#9AA9D6}
.cs-foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px}
.cs-foot nav{display:flex;flex-wrap:wrap;gap:6px 24px}
.cs-foot nav a{color:#C6D0EC;font-size:14px;font-weight:500;padding:6px 0}
.cs-foot nav a:hover{color:#fff}
.cs-foot p{font-size:13px}
@media (max-width:768px){.cs-foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}

@media (prefers-reduced-motion:reduce){
  .cs *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}