/* Junk Car Calculator v1.2.1
 * Theme it by overriding these variables in your theme's CSS, e.g.
 * .jcc { --jcc-accent: #c2410c; --jcc-panel: #1c1917; }
 */
.jcc {
  --jcc-accent: #008000;
  --jcc-accent-hi: color-mix(in srgb, var(--jcc-accent) 78%, #fff);
  --jcc-accent-soft: color-mix(in srgb, var(--jcc-accent) 9%, #fff);
  --jcc-accent-deep: color-mix(in srgb, var(--jcc-accent) 82%, #000);
  --jcc-accent-glow: color-mix(in srgb, var(--jcc-accent) 45%, #9dffb5);
  --jcc-accent-ink: #ffffff;
  --jcc-gold: #fcd402;
  --jcc-ink: #0f172a;
  --jcc-muted: #5b6475;
  --jcc-line: #e1e5ec;
  --jcc-bg: #ffffff;
  --jcc-soft: #f4f6f9;
  --jcc-ok: #15803d;
  --jcc-warn: #b45309;
  --jcc-err: #b42318;
  --jcc-panel: #00233d;
  --jcc-panel-2: #00345c;
  --jcc-on-panel: #ffffff;
  --jcc-on-panel-muted: rgba(255, 255, 255, .7);
  --jcc-panel-line: rgba(255, 255, 255, .13);
  --jcc-seg-1: #93a7bf;
  --jcc-seg-2: var(--jcc-gold);
  --jcc-seg-3: #38bdf8;
  --jcc-seg-4: var(--jcc-accent-glow);
  --jcc-radius: 14px;
  --jcc-sticky-top: 24px;
  --jcc-font: inherit;

  container-type: inline-size;
  container-name: jcc;
  font-family: var(--jcc-font);
  font-size: 16px;
  color: var(--jcc-ink);
  line-height: 1.45;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  max-width: 1120px;
  margin: 0 auto;
}
.jcc *, .jcc *::before, .jcc *::after { box-sizing: inherit; }
.jcc [hidden] { display: none !important; }
.jcc h2, .jcc h3, .jcc h4, .jcc p, .jcc ul, .jcc ol, .jcc li {
  margin: 0; padding: 0; font-family: inherit; text-transform: none; letter-spacing: normal;
}
.jcc ul, .jcc ol { list-style: none; }
.jcc svg { width: 1.1em; height: 1.1em; flex: none; }
.jcc button, .jcc input, .jcc select { font-family: inherit; }
.jcc button { cursor: pointer; text-transform: none; letter-spacing: normal; }
.jcc button:disabled { cursor: not-allowed; }
.jcc :focus-visible { outline: 2px solid var(--jcc-accent); outline-offset: 2px; }
.jcc-panel :focus-visible { outline-color: var(--jcc-gold); }
.jcc-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.jcc-shell { display: grid; gap: 20px; align-items: start; }
.jcc-form {
  background: var(--jcc-bg);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 18px 44px -18px rgba(15, 23, 42, .28);
  padding: 22px 18px 8px;
  min-width: 0;
}
.jcc-panel {
  background:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--jcc-accent) 38%, transparent) 0%, transparent 62%),
    linear-gradient(165deg, var(--jcc-panel-2) 0%, var(--jcc-panel) 58%);
  color: var(--jcc-on-panel);
  border-radius: 24px;
  box-shadow: 0 24px 50px -20px rgba(11, 22, 38, .6);
  min-width: 0;
  scroll-margin-top: 16px;
}
.jcc-panel-in { container-type: inline-size; padding: 26px 20px 24px; }

@container jcc (min-width: 560px) {
  .jcc-form { padding: 32px 32px 14px; }
  .jcc-panel-in { padding: 30px 28px 26px; }
}
@container jcc (min-width: 940px) {
  .jcc-shell { grid-template-columns: minmax(0, 1fr) 392px; gap: 24px; }
  .jcc-panel {
    position: sticky; top: var(--jcc-sticky-top);
    max-height: calc(100vh - var(--jcc-sticky-top) - 16px);
    overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
  }
}

/* ---------- Heading ---------- */
.jcc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em !important; text-transform: uppercase !important;
  color: var(--jcc-accent-deep);
}
.jcc-eyebrow-light { color: var(--jcc-accent-glow); }
.jcc-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
.jcc .jcc-title {
  font-size: clamp(1.6rem, 1.1rem + 3cqi, 2.35rem); line-height: 1.08; font-weight: 800;
  letter-spacing: -.025em; color: var(--jcc-ink); margin: 10px 0 8px;
}
.jcc .jcc-sub { color: var(--jcc-muted); font-size: 1.02rem; max-width: 52ch; }

/* ---------- Sections ---------- */
.jcc-sec { padding: 26px 0 24px; border-top: 1px solid var(--jcc-line); margin-top: 24px; }
.jcc .jcc-sec-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; color: var(--jcc-ink); margin-bottom: 18px;
}
.jcc-num {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--jcc-ink); color: #fff; font-size: .9rem; font-weight: 700;
}
.jcc .jcc-q { font-size: .95rem; font-weight: 700; color: var(--jcc-ink); margin: 0 0 8px; display: block; }
.jcc-opts + .jcc-q, .jcc-grid3 + .jcc-q { margin-top: 22px; }
.jcc .jcc-help { font-size: .86rem; color: var(--jcc-muted); margin: -4px 0 10px; }
.jcc .jcc-assume {
  font-size: .88rem; color: var(--jcc-muted); background: var(--jcc-soft);
  border-radius: 12px; padding: 11px 14px; margin: 24px 0 18px;
}
.jcc .jcc-tip {
  font-size: .9rem; color: var(--jcc-accent-deep); background: var(--jcc-accent-soft);
  border-radius: 12px; padding: 12px 14px; margin-top: 16px;
}
/* Holds the model dropdown: it must paint above the vehicle-type cards that follow it. */
.jcc-grid3 { display: grid; gap: 12px; position: relative; z-index: 3; }
.jcc-grid2 { display: grid; gap: 20px 24px; }
.jcc-grid-top { margin-top: 24px; }
.jcc-item { min-width: 0; border-radius: 12px; }
@container jcc (min-width: 520px) {
  .jcc-grid3 { grid-template-columns: 1fr 1.3fr 1.3fr; }
  .jcc-grid2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Fields ---------- */
.jcc-field { position: relative; min-width: 0; }
.jcc .jcc-field label { display: block; font-size: .86rem; font-weight: 700; color: var(--jcc-ink); margin: 0 0 6px; }
.jcc .jcc-field input, .jcc .jcc-field select {
  display: block; width: 100%; height: 52px; margin: 0;
  border: 1.5px solid var(--jcc-line); border-radius: var(--jcc-radius);
  background: var(--jcc-bg); color: var(--jcc-ink);
  font-size: 1rem; font-weight: 500; line-height: 1.2; padding: 0 14px;
  box-shadow: none; transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.jcc .jcc-field select { padding-right: 38px; cursor: pointer; }
.jcc .jcc-field input::placeholder { color: #9aa3b2; font-weight: 400; opacity: 1; }
.jcc .jcc-field input:hover, .jcc .jcc-field select:hover { border-color: #c5cbd6; }
.jcc .jcc-field input:focus, .jcc .jcc-field select:focus {
  outline: none; border-color: var(--jcc-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jcc-accent) 16%, transparent);
}
.jcc-select > svg { position: absolute; right: 14px; bottom: 17px; pointer-events: none; color: var(--jcc-muted); }
.jcc .jcc-field.has-error input { border-color: var(--jcc-err); }
.jcc .jcc-field input:disabled { background: var(--jcc-soft); color: var(--jcc-muted); cursor: not-allowed; }

/* ---------- Year-make-model or VIN ---------- */
.jcc-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 380px;
  background: var(--jcc-soft); border-radius: 999px; padding: 4px; margin-bottom: 18px;
}
.jcc .jcc-tabs button {
  margin: 0; padding: 10px 12px; border: 0; border-radius: 999px; background: transparent;
  color: var(--jcc-muted); font-size: .92rem; font-weight: 700; line-height: 1.2;
  transition: background .15s, color .15s, box-shadow .15s;
}
.jcc .jcc-tabs button:hover, .jcc .jcc-tabs button:focus { background: transparent; color: var(--jcc-ink); }
.jcc .jcc-tabs button[aria-pressed="true"] { background: var(--jcc-bg); color: var(--jcc-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .16); }
.jcc-vin { margin-bottom: 18px; }
.jcc .jcc-vin input { padding-right: 64px; font-variant-numeric: tabular-nums; letter-spacing: .04em; text-transform: uppercase; }
.jcc .jcc-vin input::placeholder { letter-spacing: 0; text-transform: none; }
.jcc-count { position: absolute; right: 14px; bottom: 17px; font-size: .78rem; font-weight: 700; color: var(--jcc-muted); font-variant-numeric: tabular-nums; }
.jcc-count.is-ok { color: var(--jcc-ok); }
.jcc .jcc-help-below { margin: 8px 0 0; }
.jcc .jcc-vin-msg { display: flex; align-items: flex-start; gap: 6px; font-size: .9rem; font-weight: 600; margin-top: 10px; color: var(--jcc-muted); }
.jcc .jcc-vin-msg svg { margin-top: 2px; }
.jcc .jcc-vin-msg.is-ok { color: var(--jcc-ok); }
.jcc .jcc-vin-msg.is-error { color: var(--jcc-warn); }

/* ---------- Model dropdown ---------- */
.jcc .jcc-combo input { padding-right: 44px; text-overflow: ellipsis; }
.jcc .jcc-combo-btn {
  position: absolute; right: 5px; bottom: 6px; width: 40px; height: 40px; padding: 0; margin: 0;
  display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--jcc-muted);
}
.jcc .jcc-combo-btn:hover, .jcc .jcc-combo-btn:focus { background: transparent; color: var(--jcc-ink); }
.jcc-combo-btn svg { transition: transform .15s; }
.jcc-combo.is-open .jcc-combo-btn svg { transform: rotate(180deg); }
.jcc-combo.is-disabled .jcc-combo-btn { opacity: .45; cursor: not-allowed; }
.jcc .jcc-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  background: var(--jcc-bg); border: 1px solid var(--jcc-line); border-radius: var(--jcc-radius);
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .32);
  max-height: 272px; overflow-y: auto; overscroll-behavior: contain;
}
.jcc .jcc-list li { padding: 10px 12px; border-radius: 9px; font-size: .97rem; color: var(--jcc-ink); cursor: pointer; }
.jcc .jcc-list li[aria-selected="true"], .jcc .jcc-list li[data-i]:hover { background: var(--jcc-soft); }
.jcc .jcc-list li.is-current { font-weight: 700; color: var(--jcc-accent-deep); }
.jcc .jcc-list li.jcc-list-note { font-size: .84rem; color: var(--jcc-muted); cursor: default; border-top: 1px solid var(--jcc-line); border-radius: 0; margin-top: 4px; padding-top: 10px; }
.jcc .jcc-list li.jcc-list-note:first-child { border-top: 0; margin-top: 0; padding-top: 10px; }

.jcc .jcc-zip-msg { display: flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; margin-top: 8px; min-height: 1.3em; }
.jcc-zip-msg:empty { display: none; }
.jcc .jcc-zip-msg.is-ok { color: var(--jcc-ok); }
.jcc .jcc-zip-msg.is-hint { color: var(--jcc-muted); font-weight: 400; align-items: flex-start; }
.jcc .jcc-zip-msg.is-hint svg { margin-top: 2px; color: var(--jcc-accent); }
.jcc .jcc-zip-msg.is-warn { color: var(--jcc-warn); }

/* ---------- Option cards ---------- */
.jcc-opts { display: grid; gap: 10px; }
.jcc .jcc-opt { position: relative; display: block; margin: 0; cursor: pointer; min-width: 0; }
.jcc .jcc-opt input {
  position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; z-index: 1;
}
.jcc-opt-body {
  position: relative; display: flex; align-items: center; gap: 12px; height: 100%;
  border: 1.5px solid var(--jcc-line); border-radius: var(--jcc-radius);
  background: var(--jcc-bg); color: var(--jcc-ink);
  padding: 14px 40px 14px 16px;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.jcc-opt-text { display: grid; gap: 2px; min-width: 0; }
.jcc-opt-text strong { font-size: .96rem; font-weight: 700; line-height: 1.25; }
.jcc-opt-text small { font-size: .82rem; color: var(--jcc-muted); line-height: 1.3; }
.jcc-tick {
  position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--jcc-accent); color: var(--jcc-accent-ink);
  transform: scale(0); transition: transform .18s cubic-bezier(.3, 1.6, .6, 1);
}
.jcc .jcc-tick svg { width: 12px; height: 12px; }
.jcc-opt:hover .jcc-opt-body { border-color: #c5cbd6; }
.jcc-opt input:checked + .jcc-opt-body {
  border-color: var(--jcc-accent); background: var(--jcc-accent-soft); box-shadow: 0 0 0 1px var(--jcc-accent);
}
.jcc-opt input:checked + .jcc-opt-body .jcc-tick { transform: scale(1); }
.jcc-opt input:focus-visible + .jcc-opt-body { outline: 2px solid var(--jcc-accent); outline-offset: 2px; }

@container jcc (min-width: 520px) {
  .jcc-opts-3 { grid-template-columns: repeat(3, 1fr); }
  .jcc-opts-3 .jcc-opt-body { align-items: flex-start; padding: 16px 38px 16px 16px; }
}

/* Vehicle type */
.jcc-opts-body { grid-template-columns: repeat(2, 1fr); }
@container jcc (min-width: 440px) { .jcc-opts-body { grid-template-columns: repeat(3, 1fr); } }
@container jcc (min-width: 700px) { .jcc-opts-body { grid-template-columns: repeat(4, 1fr); } }
.jcc-opts-body .jcc-opt-body {
  flex-direction: column; justify-content: flex-start; text-align: center; gap: 6px; padding: 14px 8px 12px;
}
.jcc-opts-body .jcc-opt-text strong { font-size: .84rem; font-weight: 600; }
.jcc .jcc-sil { width: 64px; height: 30px; color: #7b8698; transition: color .15s; }
.jcc-opts-body input:checked + .jcc-opt-body .jcc-sil { color: var(--jcc-accent); }
.jcc-opts-body .jcc-tick { top: 6px; right: 6px; width: 18px; height: 18px; }

/* Pills */
.jcc-opts-pill { display: flex; flex-wrap: wrap; gap: 8px; }
.jcc-opts-pill .jcc-opt-body {
  padding: 9px 15px; border-radius: 999px; gap: 0; min-height: 42px;
}
.jcc-opts-pill .jcc-opt-text strong { font-size: .9rem; font-weight: 600; }
.jcc-opts-pill .jcc-tick {
  position: static; order: -1; width: 0; height: 16px; background: none; color: var(--jcc-accent);
  transform: none; overflow: hidden; transition: width .15s, margin .15s;
}
.jcc .jcc-opts-pill .jcc-tick svg { width: 15px; height: 15px; }
.jcc-opts-pill input:checked + .jcc-opt-body { color: var(--jcc-accent-deep); box-shadow: none; }
.jcc-opts-pill input:checked + .jcc-opt-body .jcc-tick { width: 16px; margin-right: 6px; transform: none; }

/* Edit highlight */
.jcc .is-flash { animation: jcc-flash 1.4s ease-out; }
@keyframes jcc-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--jcc-gold) 0%, transparent); }
  25% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--jcc-gold) 38%, transparent); }
  100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--jcc-gold) 0%, transparent); }
}

/* ---------- Mileage ---------- */
.jcc-miles { margin-top: 22px; border-radius: 12px; }
.jcc-miles-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jcc .jcc-miles-top .jcc-q { margin: 0; }
.jcc-miles-val {
  display: flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--jcc-line); border-radius: 12px; padding: 0 12px; background: var(--jcc-bg);
  transition: border-color .15s, box-shadow .15s;
}
.jcc-miles-val:focus-within { border-color: var(--jcc-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jcc-accent) 16%, transparent); }
.jcc .jcc-miles-val input {
  width: 92px; height: 42px; border: 0; background: transparent; padding: 0; margin: 0; box-shadow: none;
  font-size: 1.05rem; font-weight: 700; color: var(--jcc-ink); text-align: right; font-variant-numeric: tabular-nums;
}
.jcc .jcc-miles-val input:focus { outline: none; box-shadow: none; }
.jcc .jcc-miles-val input:disabled { color: var(--jcc-muted); }
.jcc-miles-val span { color: var(--jcc-muted); font-size: .9rem; }
.jcc-miles-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 4px; }
.jcc .jcc-miles-foot .jcc-help { margin: 0; }
.jcc .jcc-check { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--jcc-ink); white-space: nowrap; cursor: pointer; margin: 0; }
.jcc .jcc-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--jcc-accent); cursor: pointer; }

.jcc .jcc-range {
  --p: 0%;
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 10px 0 4px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
}
.jcc .jcc-range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--jcc-accent) var(--p), var(--jcc-line) var(--p));
}
.jcc .jcc-range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--jcc-line); }
.jcc .jcc-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--jcc-accent); }
.jcc .jcc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%;
  background: #fff; border: 3px solid var(--jcc-accent); box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
}
.jcc .jcc-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--jcc-accent); box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
}
.jcc .jcc-range.is-assumed::-webkit-slider-runnable-track { background: linear-gradient(90deg, #aab3c2 var(--p), var(--jcc-line) var(--p)); }
.jcc .jcc-range.is-assumed::-webkit-slider-thumb { border-color: #aab3c2; }
.jcc .jcc-range.is-assumed::-moz-range-progress { background: #aab3c2; }
.jcc .jcc-range.is-assumed::-moz-range-thumb { border-color: #aab3c2; }
.jcc .jcc-range:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Buttons ---------- */
.jcc .jcc-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 56px; padding: 12px 22px; margin: 0;
  border: 0; border-radius: 999px;
  font-size: 1.04rem; font-weight: 800; line-height: 1.15; text-decoration: none; text-align: center;
  transition: transform .15s, filter .15s, background .15s, box-shadow .15s;
}
.jcc .jcc-btn-primary, .jcc a.jcc-btn-primary:visited {
  background: linear-gradient(180deg, var(--jcc-accent-hi) 0%, var(--jcc-accent) 100%);
  color: var(--jcc-accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 22px -8px color-mix(in srgb, var(--jcc-accent) 80%, #000);
}
.jcc .jcc-btn-primary:hover, .jcc .jcc-btn-primary:focus {
  background: linear-gradient(180deg, var(--jcc-accent-hi) 0%, var(--jcc-accent) 100%);
  color: var(--jcc-accent-ink); filter: brightness(1.08); transform: translateY(-1px);
}
.jcc .jcc-btn-primary:active { transform: translateY(0); filter: brightness(.96); }
.jcc .jcc-btn-primary:disabled { filter: saturate(.5) brightness(.9); transform: none; }
.jcc .jcc-btn-ghost, .jcc a.jcc-btn-ghost:visited {
  background: transparent; color: var(--jcc-on-panel); border: 1.5px solid rgba(255, 255, 255, .3); min-height: 52px;
}
.jcc .jcc-btn-ghost:hover, .jcc .jcc-btn-ghost:focus { background: rgba(255, 255, 255, .09); color: var(--jcc-on-panel); border-color: rgba(255, 255, 255, .5); }

/* ---------- Panel: empty ---------- */
.jcc-empty { text-align: center; padding: 12px 0 6px; }
.jcc-ring { position: relative; width: 104px; height: 104px; margin: 0 auto 18px; }
.jcc .jcc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.jcc-ring circle { fill: none; stroke-width: 6; }
.jcc-ring-bg { stroke: rgba(255, 255, 255, .14); }
.jcc-ring-fg { stroke: var(--jcc-accent-glow); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .4s ease; }
.jcc-ring-n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.jcc .jcc-empty-title { font-size: 1.3rem; font-weight: 800; color: var(--jcc-on-panel); letter-spacing: -.01em; }
.jcc .jcc-empty-text { color: var(--jcc-on-panel-muted); font-size: .95rem; margin: 6px auto 20px; max-width: 30ch; }
.jcc .jcc-todo { display: grid; gap: 8px; text-align: left; max-width: 250px; margin: 0 auto; }
.jcc .jcc-todo li { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--jcc-on-panel-muted); }
.jcc .jcc-todo li.is-done { color: var(--jcc-on-panel); }
.jcc-todo-mark {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .3); color: var(--jcc-panel);
}
.jcc .jcc-todo-mark svg { width: 13px; height: 13px; }
.is-done .jcc-todo-mark { background: var(--jcc-accent-glow); border-color: var(--jcc-accent-glow); }

/* ---------- Panel: result ---------- */
.jcc-car { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--jcc-panel-line); }
.jcc .jcc-car-year { font-size: .95rem; font-weight: 700; color: var(--jcc-on-panel-muted); line-height: 1.2; }
.jcc .jcc-car-name { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--jcc-on-panel); overflow-wrap: anywhere; }
.jcc .jcc-car-loc { display: flex; align-items: center; gap: 5px; font-size: .88rem; color: var(--jcc-on-panel-muted); margin-top: 4px; }
.jcc .jcc-car-loc:empty { display: none; }
.jcc .jcc-amount {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .28em;
  font-size: clamp(1.9rem, 10.4cqi, 2.85rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--jcc-on-panel); margin: 8px 0 16px;
  transition: filter .3s;
}
.jcc .jcc-amount-sm { font-size: clamp(1.6rem, 8.5cqi, 2.2rem); margin: 0 0 14px; }
.jcc-dash { color: var(--jcc-gold); font-weight: 600; }
.jcc-amount.is-single .jcc-dash, .jcc-amount.is-single [data-role="high"] { display: none; }
.jcc.is-locked .jcc-amount { filter: blur(9px); user-select: none; }
.jcc-notes { display: grid; gap: 8px; margin-bottom: 16px; }
.jcc-notes:empty { display: none; }
.jcc .jcc-notes p {
  font-size: .88rem; color: var(--jcc-on-panel); background: rgba(255, 255, 255, .08);
  border-left: 3px solid var(--jcc-gold); border-radius: 4px 10px 10px 4px; padding: 10px 12px;
}
.jcc-result .jcc-btn + .jcc-btn { margin-top: 10px; }

/* Pickup fee, "call us", and the range meter */
.jcc .jcc-amount small { flex: 1 1 100%; font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--jcc-on-panel-muted); margin-top: 2px; }
.jcc .jcc-amount small:empty { display: none; }
.jcc .jcc-callus {
  font-size: clamp(1.5rem, 7.5cqi, 2rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
  color: var(--jcc-on-panel); margin: 8px 0 16px;
}
.jcc .jcc-callus-sm { font-size: 1.3rem; margin: 0 0 14px; }
.jcc-actions { display: grid; gap: 10px; }
.jcc-actions.is-phone-first { grid-template-areas: 'call' 'lead'; }
.jcc-actions.is-phone-first [data-act="call"] { grid-area: call; }
.jcc-actions.is-phone-first [data-act="lead"] { grid-area: lead; }
.jcc .jcc-rule { font-size: .84rem; color: var(--jcc-on-panel-muted); margin: 0 0 10px; }
.jcc-meter { margin-bottom: 16px; }
.jcc-meter-track { position: relative; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.jcc-meter-track span {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--jcc-accent-glow), var(--jcc-gold));
  transition: left .45s cubic-bezier(.2, .8, .2, 1), width .45s cubic-bezier(.2, .8, .2, 1);
}
.jcc-meter-ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: .78rem; color: var(--jcc-on-panel-muted); font-variant-numeric: tabular-nums; }
.jcc-meter-ends span:first-child, .jcc-meter-ends span:last-child { color: var(--jcc-on-panel); font-weight: 700; }
.jcc .jcc-break li.is-up .jcc-break-val { color: var(--jcc-accent-glow); }
.jcc .jcc-break li.is-down .jcc-break-val { color: #fca5a5; }
.jcc .jcc-break li.is-flat .jcc-break-val, .jcc .jcc-break li.is-none .jcc-break-val { color: var(--jcc-on-panel-muted); font-weight: 600; }
.jcc .jcc-break li.is-up .jcc-key { background: var(--jcc-accent-glow); }
.jcc .jcc-break li.is-down .jcc-key { background: #fca5a5; }
.jcc .jcc-break li.is-flat .jcc-key { background: rgba(255, 255, 255, .35); }
.jcc .jcc-break li.is-none .jcc-key { background: transparent; }
.jcc-run { margin: 18px 0 4px; }
.jcc-run .jcc-item + .jcc-item { margin-top: 18px; }

/* Folds */
.jcc-fold { border-top: 1px solid var(--jcc-panel-line); margin-top: 18px; }
.jcc-fold + .jcc-fold { margin-top: 0; }
.jcc .jcc-fold summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 0; font-size: .95rem; font-weight: 700; color: var(--jcc-on-panel); cursor: pointer; list-style: none;
}
.jcc-fold summary::-webkit-details-marker { display: none; }
.jcc-fold summary svg { color: var(--jcc-on-panel-muted); transition: transform .2s; }
.jcc-fold[open] summary svg { transform: rotate(180deg); }
.jcc-fold > :last-child { margin-bottom: 18px; }

.jcc-stack { display: flex; gap: 3px; height: 10px; margin-bottom: 14px; }
.jcc-stack span { flex: 1 1 0; min-width: 6px; border-radius: 999px; transition: flex-grow .45s cubic-bezier(.2, .8, .2, 1); }
.jcc .jcc-break { display: grid; gap: 10px; }
.jcc .jcc-break li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: var(--jcc-on-panel); }
.jcc-key { flex: none; width: 10px; height: 10px; border-radius: 3px; margin-top: 6px; }
.jcc-break-label { flex: 1; min-width: 0; }
.jcc-break-label small { display: block; font-size: .8rem; color: var(--jcc-on-panel-muted); }
.jcc-break-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jcc .jcc-break li.is-neg .jcc-break-val { color: #fca5a5; }
.jcc .jcc-break li.is-zero { color: var(--jcc-on-panel-muted); }
.jcc .jcc-break li.is-free .jcc-break-val { color: var(--jcc-accent-glow); }
.jcc .jcc-break li.is-free { padding-top: 10px; border-top: 1px dashed var(--jcc-panel-line); }

/* Answers */
.jcc-answers { display: grid; gap: 18px; }
.jcc .jcc-answers h4 { font-size: .95rem; font-weight: 800; color: var(--jcc-accent-glow); margin-bottom: 2px; }
.jcc .jcc-answers li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--jcc-panel-line);
}
.jcc-answers li > div { min-width: 0; }
.jcc-answers strong { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .92rem; font-weight: 700; color: var(--jcc-on-panel); }
.jcc-answers em {
  font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--jcc-on-panel-muted); border: 1px solid var(--jcc-panel-line); border-radius: 999px; padding: 1px 7px;
}
.jcc-answers li span { display: block; font-size: .84rem; color: var(--jcc-on-panel-muted); overflow-wrap: anywhere; }
.jcc .jcc-edit {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--jcc-on-panel-muted); transition: background .15s, color .15s;
}
.jcc .jcc-edit:hover, .jcc .jcc-edit:focus { background: rgba(255, 255, 255, .1); color: var(--jcc-on-panel); }
.jcc .jcc-edit svg { width: 18px; height: 18px; }
.jcc .jcc-where { font-size: .86rem; color: var(--jcc-on-panel-muted); margin: 10px 0 0; }
.jcc .jcc-where strong { color: var(--jcc-on-panel); }
.jcc .jcc-startover {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; margin: 0;
  border: 1.5px solid var(--jcc-line); border-radius: 999px; background: transparent; color: var(--jcc-muted);
  font-size: .86rem; font-weight: 700; line-height: 1.2; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.jcc .jcc-startover:hover, .jcc .jcc-startover:focus { background: var(--jcc-soft); color: var(--jcc-ink); border-color: #c5cbd6; }
.jcc .jcc-startover svg { width: 15px; height: 15px; }
.jcc .jcc-startover.is-armed { background: var(--jcc-err); border-color: var(--jcc-err); color: #fff; }
.jcc .jcc-startover.is-armed span::after { content: '? Click again'; }
.jcc .jcc-startover-panel { float: right; margin: -4px 0 0 12px; border-color: var(--jcc-panel-line); color: var(--jcc-on-panel-muted); }
.jcc .jcc-startover-panel:hover, .jcc .jcc-startover-panel:focus { background: rgba(255, 255, 255, .1); color: var(--jcc-on-panel); border-color: rgba(255, 255, 255, .4); }
.jcc .jcc-startover-panel.is-armed { background: var(--jcc-err); border-color: var(--jcc-err); color: #fff; }
.jcc-car::after { content: ''; display: block; clear: both; }
@container jcc (max-width: 519px) {
  .jcc .jcc-nav .jcc-startover span { display: none; }
  .jcc .jcc-nav .jcc-startover.is-armed span { display: inline; }
}
.jcc .jcc-reset {
  display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 10px 18px;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--jcc-on-panel);
  font-size: .9rem; font-weight: 700; line-height: 1.2; transition: background .15s;
}
.jcc .jcc-reset:hover, .jcc .jcc-reset:focus { background: rgba(255, 255, 255, .18); color: var(--jcc-on-panel); }

/* Perks + fine print */
.jcc .jcc-perks { display: grid; gap: 10px; padding: 18px 0 0; border-top: 1px solid var(--jcc-panel-line); }
.jcc .jcc-perks li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--jcc-on-panel); }
.jcc .jcc-perks svg { width: 20px; height: 20px; color: var(--jcc-accent-glow); }
.jcc .jcc-fine { font-size: .78rem; line-height: 1.45; color: var(--jcc-on-panel-muted); margin-top: 14px; }
.jcc .jcc-fine-lock { display: flex; gap: 8px; }
.jcc .jcc-fine-lock svg { width: 15px; height: 15px; margin-top: 1px; }

/* ---------- Panel: lead form ---------- */
.jcc-lead { display: grid; gap: 14px; margin: 0; }
.jcc .jcc-back {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 6px 10px 6px 0; margin: 0;
  border: 0; background: transparent; color: var(--jcc-on-panel-muted); font-size: .88rem; font-weight: 600;
}
.jcc .jcc-back:hover, .jcc .jcc-back:focus { color: var(--jcc-on-panel); background: transparent; }
.jcc .jcc-lead-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--jcc-on-panel); font-variant-numeric: tabular-nums; }
.jcc .jcc-lead-title:focus { outline: none; }
.jcc .jcc-lead-sub { font-size: .92rem; color: var(--jcc-on-panel-muted); margin-top: -8px; }
.jcc .jcc-field-dark label { color: var(--jcc-on-panel); }
.jcc-opt-note { font-weight: 400; color: var(--jcc-on-panel-muted); }
.jcc .jcc-field-dark input { border-color: transparent; }
.jcc .jcc-field-dark input:focus { border-color: var(--jcc-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jcc-gold) 30%, transparent); }
.jcc .jcc-field-dark.has-error input { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, .3); }
.jcc-pref { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 4px; }
.jcc .jcc-pref label { position: relative; display: block; margin: 0; cursor: pointer; }
.jcc .jcc-pref input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.jcc-pref span {
  display: block; text-align: center; padding: 10px 8px; border-radius: 999px;
  font-size: .9rem; font-weight: 700; color: var(--jcc-on-panel-muted); transition: background .15s, color .15s;
}
.jcc-pref input:checked + span { background: #fff; color: var(--jcc-ink); }
.jcc-pref input:focus-visible + span { outline: 2px solid var(--jcc-gold); outline-offset: 2px; }
.jcc-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jcc .jcc-error {
  font-size: .9rem; font-weight: 600; color: #fecaca; background: rgba(180, 35, 24, .35);
  border-radius: 10px; padding: 10px 12px;
}

/* ---------- Panel: done ---------- */
.jcc-done-icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 16px;
  background: linear-gradient(180deg, var(--jcc-accent-hi), var(--jcc-accent)); color: #fff;
  animation: jcc-pop .45s cubic-bezier(.3, 1.6, .6, 1);
}
.jcc .jcc-done-icon svg { width: 28px; height: 28px; }
@keyframes jcc-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.jcc .jcc-done-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--jcc-on-panel); margin-bottom: 18px; }
.jcc .jcc-done-title:focus { outline: none; }
.jcc .jcc-ref {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255, 255, 255, .1); border-radius: 12px; padding: 6px 8px 6px 16px; margin-bottom: 16px;
  font-size: .92rem; color: var(--jcc-on-panel-muted);
}
.jcc-ref strong { color: var(--jcc-on-panel); font-variant-numeric: tabular-nums; }
.jcc .jcc-ref button {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; margin: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--jcc-on-panel);
}
.jcc .jcc-ref button:hover, .jcc .jcc-ref button:focus { background: rgba(255, 255, 255, .12); color: var(--jcc-on-panel); }
.jcc .jcc-ref button svg { width: 18px; height: 18px; }
.jcc-ref button svg + svg, .jcc-ref button.is-copied svg { display: none; }
.jcc-ref button.is-copied svg + svg { display: block; color: var(--jcc-accent-glow); }
.jcc .jcc-done-text { font-size: .95rem; color: var(--jcc-on-panel-muted); margin-bottom: 18px; overflow-wrap: anywhere; }
.jcc .jcc-steps { display: grid; gap: 14px; counter-reset: jcc-step; margin-bottom: 20px; }
.jcc .jcc-steps li { position: relative; padding-left: 40px; counter-increment: jcc-step; }
.jcc-steps li::before {
  content: counter(jcc-step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: var(--jcc-on-panel); font-size: .85rem; font-weight: 700;
}
.jcc-steps strong { display: block; font-size: .95rem; color: var(--jcc-on-panel); }
.jcc-steps span { font-size: .86rem; color: var(--jcc-on-panel-muted); }
.jcc .jcc-biz {
  display: grid; gap: 8px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--jcc-panel-line);
  font-style: normal; font-size: .9rem; color: var(--jcc-on-panel-muted);
}
.jcc .jcc-biz strong { color: var(--jcc-on-panel); font-size: .98rem; }
.jcc .jcc-biz span { display: flex; align-items: flex-start; gap: 8px; overflow-wrap: anywhere; }
.jcc .jcc-biz svg { width: 17px; height: 17px; margin-top: 2px; color: var(--jcc-gold); }
.jcc .jcc-biz a, .jcc .jcc-biz a:visited { color: var(--jcc-on-panel-muted); font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.jcc .jcc-biz a:hover, .jcc .jcc-biz a:focus { color: var(--jcc-on-panel); }
.jcc-done .jcc-fine { text-align: center; }
.jcc-done .jcc-reset { display: flex; margin-inline: auto; }

/* ---------- Mobile estimate bar ---------- */
.jcc .jcc-bar {
  /* A compact floating button, halfway down the screen on one side, so it never covers the site's own
     call / text / schedule buttons at the bottom. */
  position: fixed; z-index: 9990; top: calc(50% - var(--jcc-bar-offset, 0px)); transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px; width: auto; max-width: min(72vw, 260px); margin: 0;
  padding: 8px 12px 8px 14px; border: 1px solid var(--jcc-panel-line); border-radius: 999px;
  background: var(--jcc-panel); color: var(--jcc-on-panel); font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(11, 22, 38, .75);
  animation: jcc-slide-in .3s ease-out;
}
.jcc .jcc-bar.is-right { right: 10px; }
.jcc .jcc-bar.is-left { left: 10px; flex-direction: row-reverse; }
.jcc .jcc-bar.is-left svg { transform: rotate(180deg); }
.jcc .jcc-bar:hover, .jcc .jcc-bar:focus { background: var(--jcc-panel-hi, var(--jcc-panel)); outline: none; filter: brightness(1.12); }
.jcc .jcc-bar svg { width: 18px; height: 18px; flex: none; color: var(--jcc-gold); }
@keyframes jcc-slide-in { from { opacity: 0; transform: translateY(-50%) translateX(12px); } to { opacity: 1; transform: translateY(-50%); } }
.jcc-bar-text { display: grid; min-width: 0; line-height: 1.15; }
.jcc-bar-text small { font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--jcc-on-panel-muted); }
.jcc-bar-text strong { font-size: .98rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--jcc-gold); }

/* ---------- Step by step ---------- */
.jcc-stepper { margin-top: 20px; }
.jcc .jcc-stepper ol { display: flex; gap: 4px; justify-content: space-between; }
.jcc .jcc-stepper li { flex: 1 1 0; min-width: 0; }
.jcc .jcc-stepper button {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 6px 4px;
  border: 0; border-radius: 10px; background: transparent; color: var(--jcc-muted);
  font-size: .86rem; font-weight: 700; line-height: 1.2; text-align: left;
  transition: color .2s;
}
.jcc .jcc-stepper button:hover, .jcc .jcc-stepper button:focus { background: transparent; color: var(--jcc-ink); }
.jcc .jcc-stepper button:disabled { color: #a3abb9; cursor: default; }
.jcc .jcc-stepper button[aria-current="step"] { color: var(--jcc-ink); }
.jcc-step-dot {
  position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--jcc-soft); color: var(--jcc-muted); font-size: .82rem;
  transition: background .25s, color .25s, box-shadow .25s, transform .25s;
}
.jcc-step-dot b { font-weight: 700; transition: opacity .2s, transform .2s; }
.jcc .jcc-step-dot svg { position: absolute; width: 14px; height: 14px; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .6, 1); }
.jcc-stepper button[aria-current="step"] .jcc-step-dot { background: var(--jcc-ink); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--jcc-ink) 14%, transparent); transform: scale(1.06); }
.jcc-stepper button.is-done .jcc-step-dot { background: var(--jcc-accent); color: var(--jcc-accent-ink); }
.jcc-stepper button.is-done .jcc-step-dot b { opacity: 0; transform: scale(.4); }
.jcc-stepper button.is-done .jcc-step-dot svg { opacity: 1; transform: scale(1); }
.jcc-step-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jcc-progress { height: 4px; border-radius: 999px; background: var(--jcc-soft); margin-top: 10px; overflow: hidden; }
.jcc-progress span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--jcc-accent), var(--jcc-accent-hi));
  transition: width .5s cubic-bezier(.2, .8, .2, 1);
}
@container jcc (max-width: 519px) {
  .jcc-step-name { display: none; }
  .jcc-stepper button[aria-current="step"] .jcc-step-name { display: block; }
  .jcc .jcc-stepper li { flex: 0 1 auto; }
  .jcc .jcc-stepper li:has([aria-current="step"]) { flex: 1 1 auto; }
}

.jcc.is-steps .jcc-form { padding-bottom: 0; }
.jcc.is-steps .jcc-stage { overflow-x: clip; }
/* Once a step has slid in, drop the animation so it can't trap the dropdown in a stacking layer. */
.jcc-sec.is-settled > * { animation: none !important; }
.jcc.is-steps .jcc-sec { border-top: 0; margin-top: 0; padding: 26px 0 8px; }
.jcc.is-steps .jcc-sec-title { font-size: clamp(1.3rem, 1.05rem + 1.2cqi, 1.75rem); letter-spacing: -.02em; margin-bottom: 22px; }
.jcc .jcc-sec-title:focus { outline: none; }
.jcc.is-steps .jcc-sec-title .jcc-num { background: var(--jcc-accent); }
.jcc-nav {
  display: flex; align-items: center; gap: 14px; padding: 18px 0 22px; margin-top: 18px; border-top: 1px solid var(--jcc-line);
}
.jcc .jcc-nav .jcc-btn { width: auto; min-width: 150px; }
.jcc .jcc-btn-next { margin-left: auto; }
.jcc .jcc-btn-back, .jcc .jcc-btn-back:visited { min-width: 0; padding: 12px 20px 12px 14px; background: transparent; color: var(--jcc-muted); border: 1.5px solid var(--jcc-line); }
.jcc .jcc-btn-back:hover, .jcc .jcc-btn-back:focus { background: var(--jcc-soft); color: var(--jcc-ink); border-color: #c5cbd6; }
.jcc .jcc-btn-next svg { transition: transform .2s; }
.jcc .jcc-btn-next:hover svg { transform: translateX(4px); }
.jcc .jcc-nav-msg { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; color: var(--jcc-err); text-align: right; animation: jcc-shake .4s; }
@container jcc (max-width: 519px) {
  .jcc-nav { flex-wrap: wrap; }
  .jcc .jcc-nav-msg { order: -1; flex: 1 1 100%; text-align: left; }
  .jcc .jcc-nav .jcc-btn-next { flex: 1; }
}

/* Motion between steps: the old step slides out, the new one comes in piece by piece. */
.jcc-sec.is-out-fwd { animation: jcc-out-fwd .17s ease-in both; }
.jcc-sec.is-out-back { animation: jcc-out-back .17s ease-in both; }
.jcc-sec.is-in-fwd > * { animation: jcc-in-fwd .46s cubic-bezier(.2, .8, .2, 1) both; }
.jcc-sec.is-in-back > * { animation: jcc-in-back .46s cubic-bezier(.2, .8, .2, 1) both; }
.jcc-sec[class*="is-in-"] > :nth-child(2) { animation-delay: .04s; }
.jcc-sec[class*="is-in-"] > :nth-child(3) { animation-delay: .08s; }
.jcc-sec[class*="is-in-"] > :nth-child(4) { animation-delay: .12s; }
.jcc-sec[class*="is-in-"] > :nth-child(5) { animation-delay: .16s; }
.jcc-sec[class*="is-in-"] > :nth-child(6) { animation-delay: .2s; }
.jcc-sec[class*="is-in-"] > :nth-child(n+7) { animation-delay: .24s; }
@keyframes jcc-out-fwd { to { opacity: 0; transform: translateX(-32px); } }
@keyframes jcc-out-back { to { opacity: 0; transform: translateX(32px); } }
@keyframes jcc-in-fwd { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes jcc-in-back { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
@keyframes jcc-shake { 20% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 80% { transform: translateX(-2px); } }
@keyframes jcc-view-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Showing a panel view restarts its animation, so every change of view eases in. */
.jcc-panel [data-view] { animation: jcc-view-in .42s cubic-bezier(.2, .8, .2, 1) both; }
.jcc-opt-body:active { transform: scale(.985); }

/* ---------- Desktop: full screen ---------- */
.jcc.is-stage { max-width: none; margin: 0; }
.jcc.is-stage .jcc-shell {
  grid-template-columns: minmax(0, 1fr) clamp(380px, 31vw, 520px); gap: 0; align-items: stretch;
  min-height: var(--jcc-h, 100vh); background: var(--jcc-bg);
}
.jcc.is-stage .jcc-form {
  display: grid; grid-template-rows: auto 1fr auto; min-height: var(--jcc-h, 100vh);
  padding: 0; border-radius: 0; box-shadow: none;
}
.jcc.is-stage .jcc-top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  padding: 26px clamp(28px, 4.5vw, 88px) 18px; border-bottom: 1px solid var(--jcc-line);
}
.jcc.is-stage .jcc-head { min-width: 0; }
.jcc.is-stage .jcc-title { font-size: clamp(1.5rem, 1rem + 1.1vw, 2.1rem); margin: 8px 0 0; }
.jcc.is-stage .jcc-sub { display: none; }
.jcc.is-stage .jcc-stepper { flex: 0 1 520px; margin: 0; }
.jcc.is-stage .jcc-stage { overflow: visible; padding: 10px clamp(28px, 4.5vw, 88px) 24px; }
.jcc.is-stage .jcc-sec { max-width: 1040px; margin: 0 auto; padding-top: clamp(16px, 3vh, 40px); }
/* The buttons stay in reach while a tall step scrolls with the page. */
.jcc.is-stage .jcc-nav {
  position: sticky; bottom: 0; z-index: 3; margin: 0; padding: 16px clamp(28px, 4.5vw, 88px);
  background: var(--jcc-bg); box-shadow: 0 -10px 24px -18px rgba(15, 23, 42, .35);
}
.jcc.is-stage .jcc-nav > * { position: relative; }
.jcc.is-stage .jcc-nav .jcc-btn { min-width: 190px; }
.jcc.is-stage .jcc-opts-body { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.jcc.is-stage .jcc-grid3 { grid-template-columns: 1fr 1.3fr 1.3fr; max-width: 820px; }
.jcc.is-stage .jcc-opts-3 { grid-template-columns: repeat(3, 1fr); }
.jcc.is-stage .jcc-miles { max-width: 820px; }
@media (min-width: 1500px) { .jcc.is-stage .jcc-grid-wide { grid-template-columns: repeat(3, 1fr); } }
/* The navy column runs the full height. Its content follows the visitor down the page. */
.jcc.is-stage .jcc-panel {
  position: static; height: auto; max-height: none; overflow: visible;
  border-radius: 0; box-shadow: none;
}
.jcc.is-stage .jcc-panel-in {
  position: sticky; top: var(--jcc-top, 0px); height: var(--jcc-h, 100vh); overflow-y: auto;
  padding: clamp(28px, 4vh, 48px) clamp(26px, 2.6vw, 44px);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.jcc.is-stage .jcc-panel[data-state="empty"] .jcc-panel-in { display: grid; align-content: center; }
.jcc.is-stage .jcc-bar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .jcc *, .jcc *::before, .jcc *::after { animation: none !important; transition: none !important; }
}
@media print {
  .jcc-bar { display: none !important; }
  .jcc-panel { position: static; max-height: none; }
}

/* ---------- Live offer: waiting, the offer, check back ---------- */
.jcc .jcc-link {
  display: inline; margin: 0 0 0 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600;
  color: var(--jcc-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.jcc .jcc-link:hover, .jcc .jcc-link:focus { color: var(--jcc-accent-hi); outline: none; }
.jcc .jcc-resume { margin: 10px 0 0; font-size: .92rem; color: var(--jcc-muted); }
.jcc-wait-ring {
  --jcc-p: 0; position: relative; display: grid; place-items: center; width: 108px; height: 108px; margin: 0 auto 18px; border-radius: 50%;
  background: conic-gradient(var(--jcc-gold) calc(var(--jcc-p) * 100%), rgba(255, 255, 255, .14) 0);
  font-size: 1.55rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--jcc-on-panel);
  animation: jcc-pop .45s cubic-bezier(.3, 1.6, .6, 1);
}
.jcc-wait-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--jcc-panel); }
.jcc-wait-ring::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--jcc-gold); opacity: .5;
  animation: jcc-pulse 1.6s ease-out infinite;
}
.jcc-wait-ring span { position: relative; }
@keyframes jcc-pulse { 0% { transform: scale(.94); opacity: .6; } 100% { transform: scale(1.12); opacity: 0; } }
.jcc-done { text-align: center; }
.jcc-done .jcc-done-icon { margin-inline: auto; }
.jcc-done .jcc-steps { text-align: left; }
.jcc .jcc-wait-est {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 12px 16px;
  border-radius: 12px; background: rgba(255, 255, 255, .08); color: var(--jcc-on-panel-muted); font-size: .9rem;
}
.jcc .jcc-wait-est strong { color: var(--jcc-on-panel); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.jcc .jcc-steps-live li { opacity: .55; transition: opacity .3s; }
.jcc .jcc-steps-live li.is-done, .jcc .jcc-steps-live li.is-now { opacity: 1; }
.jcc .jcc-steps-live li.is-done::before { content: "✓"; background: var(--jcc-accent); color: #fff; }
.jcc .jcc-steps-live li.is-now::before { background: var(--jcc-gold); color: #1d2327; animation: jcc-pulse-bg 1.4s ease-in-out infinite; }
@keyframes jcc-pulse-bg { 50% { box-shadow: 0 0 0 6px rgba(252, 212, 2, .25); } }
.jcc .jcc-offer-amount {
  margin: 4px 0 6px; font-size: clamp(2.6rem, 2rem + 3vw, 3.6rem); font-weight: 900; letter-spacing: -.03em; line-height: 1;
  color: var(--jcc-gold); font-variant-numeric: tabular-nums; animation: jcc-pop .5s cubic-bezier(.3, 1.6, .6, 1);
}
.jcc .jcc-offer-sub { margin: 0 0 16px; font-size: .95rem; color: var(--jcc-on-panel-muted); }
.jcc .jcc-done-icon-soft { background: rgba(255, 255, 255, .14); color: var(--jcc-gold); }
.jcc .jcc-lookup { display: grid; gap: 12px; text-align: left; }
.jcc .jcc-lookup .jcc-field label { color: var(--jcc-on-panel); }
.jcc .jcc-lookup .jcc-reset { margin-inline: auto; }
.jcc .jcc-btn-secondary { background: rgba(255, 255, 255, .12); color: var(--jcc-on-panel); margin-bottom: 10px; }
.jcc .jcc-btn-secondary:hover, .jcc .jcc-btn-secondary:focus { background: rgba(255, 255, 255, .2); }

/* ---------- Offer ID: comes toward the viewer, then keeps a gentle bounce ---------- */
.jcc-done .jcc-ref {
  background: rgba(252, 212, 2, .14); border: 1px solid rgba(252, 212, 2, .45); padding: 10px 10px 10px 18px;
  animation: jcc-toward .9s cubic-bezier(.22, 1.4, .36, 1) both; animation-delay: .25s;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8);
}
.jcc-done .jcc-ref strong {
  display: inline-block; font-size: 1.28rem; letter-spacing: .04em; color: var(--jcc-gold);
  animation: jcc-bob 1.8s ease-in-out infinite; animation-delay: 1.2s;
}
@keyframes jcc-toward {
  0% { transform: scale(.4) translateY(28px); opacity: 0; }
  55% { transform: scale(1.14) translateY(-6px); opacity: 1; }
  75% { transform: scale(.97) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes jcc-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .jcc-done .jcc-ref, .jcc-done .jcc-ref strong { animation: none; }
}

/* ---------- Save / share the offer number ---------- */
.jcc .jcc-save { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -4px 0 8px; }
.jcc .jcc-save button, .jcc .jcc-save a, .jcc .jcc-save a:visited {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 16px; margin: 0;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .1);
  color: var(--jcc-on-panel); font: inherit; font-size: .9rem; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background .15s, transform .15s;
}
.jcc .jcc-save button:hover, .jcc .jcc-save a:hover, .jcc .jcc-save button:focus, .jcc .jcc-save a:focus { background: rgba(255, 255, 255, .2); color: var(--jcc-on-panel); transform: translateY(-1px); outline: none; }
.jcc .jcc-save svg { width: 18px; height: 18px; }
.jcc .jcc-save button[data-act=copy] svg + svg, .jcc .jcc-save button.is-copied svg:first-child { display: none; }
.jcc .jcc-save button.is-copied svg + svg { display: block; color: var(--jcc-accent-glow); }
.jcc .jcc-save-hint { margin: 0 0 18px; font-size: .84rem; color: var(--jcc-on-panel-muted); }

/* ---------- Developer credit ---------- */
.jcc .jcc-credit { margin: 10px 16px 0; text-align: right; font-size: .72rem; color: var(--jcc-muted); opacity: .75; }
.jcc .jcc-credit a, .jcc .jcc-credit a:visited { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.jcc .jcc-credit a:hover, .jcc .jcc-credit a:focus { color: var(--jcc-ink); }
.jcc.is-stage .jcc-credit { position: absolute; right: 16px; bottom: 8px; margin: 0; }
.jcc .jcc-zip-msg.is-tow { color: #9a6700; }

/* Call now / Text now, side by side */
.jcc .jcc-now { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.jcc .jcc-now .jcc-btn { min-width: 0; padding-inline: 10px; }
@media (max-width: 360px) { .jcc .jcc-now { grid-template-columns: 1fr; } }