/* Cash For Junk Cars Columbus: quote and offer flow */
.tl-page { background: var(--paper); }
.tl-bar .lg-wrap { min-height: 70px; }
.tl-call { margin-left: auto; }
.tl-call[hidden] { display: none; }
.tl-main { padding: 34px 20px 72px; min-height: 62vh; }
.tl-locked { overflow: hidden; }

/* ------------------------------------------------------------------ card + stage */
.tl-card { max-width: 640px; margin: 0 auto; background: var(--card); border: 2px solid var(--ink); border-radius: 18px; padding: 26px 32px 30px; position: relative; overflow: visible; }
.tl-stage.tl-in-fwd { animation: tlFwd .22s ease-out; }
.tl-stage.tl-in-back { animation: tlBack .22s ease-out; }
@keyframes tlFwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes tlBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.tl-boot { text-align: center; color: var(--ink-soft); }

.tl-meter { position: absolute; left: 22px; right: 22px; top: -1px; height: 5px; background: var(--lilac); border-radius: 0 0 4px 4px; overflow: hidden; }
.tl-meter span { display: block; height: 100%; background: var(--ink); border-radius: 0 4px 4px 0; transition: width .3s ease; }
.tl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; }
.tl-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px 6px 4px; margin-left: -4px; border: 0; background: none;
  font: 600 15.5px/1 var(--text); color: var(--ink); cursor: pointer; border-radius: 8px;
}
.tl-back:hover { background: var(--lilac-2); }
.tl-back svg { width: 20px; height: 20px; }
.tl-car { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 14.5px/1.2 var(--text); color: var(--ink-2); background: var(--lilac-2); padding: 6px 12px 6px 8px; border-radius: 999px; }
.tl-car svg { width: 30px; height: 24px; }

.tl-q { font: 800 clamp(26px, 3.4vw, 34px)/1.12 var(--display); letter-spacing: -.012em; margin: 0 0 8px; }
.tl-q:focus { outline: none; }
.tl-help-text { margin: 0 0 18px; color: var(--ink-soft); font-size: 16.5px; }
.tl-choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.tl-legend { padding: 0; float: left; width: 100%; }
.tl-legend + * { clear: both; }
.tl-choice .tl-help-text, .tl-choice .tl-lock { clear: both; }

/* ------------------------------------------------------------------ answers */
.tl-opts { display: grid; gap: 10px; margin: 10px 0 0; clear: both; }
.tl-opt {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 14px 16px; border: 1.8px solid #b8aabd; border-radius: 12px;
  background: #fff; cursor: pointer; font: 600 17px/1.3 var(--text); transition: border-color .12s, background .12s, transform .12s;
}
.tl-opt:hover { border-color: var(--ink); }
.tl-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tl-opt:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.tl-opt-key {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid #b8aabd; display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px/1 var(--text); color: var(--ink-soft);
}
.tl-opt-t { flex: 1; }
.tl-opt-tick { width: 24px; height: 24px; opacity: 0; color: var(--ink); flex-shrink: 0; }
.tl-opt.is-on { border-color: var(--ink); background: var(--lime); box-shadow: 3px 3px 0 var(--ink); }
.tl-opt.is-on .tl-opt-key { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.tl-opt.is-on .tl-opt-tick { opacity: 1; }
.tl-opt.is-off { cursor: not-allowed; border-style: dashed; background: #f4f1f5; color: #6f6175; box-shadow: none; }
.tl-opt.is-off:hover { border-color: #b8aabd; }
.tl-opt-tag { font: 600 13px/1 var(--text); color: #6f6175; text-transform: lowercase; }
.tl-lock { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; padding: 12px 14px; background: var(--lilac-2); border-radius: 10px; font-size: 15.5px; color: var(--ink-2); }
.tl-lock svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }

/* four-corner areas */
.tl-areas { border: 1.5px dashed #a596ab; border-radius: 14px; margin: 16px 0 0; padding: 14px 14px 16px; }
.tl-areas legend { font: 700 16px/1.3 var(--text); padding: 0 6px; }
.tl-areas legend span { font-weight: 500; color: var(--ink-soft); }
.tl-areas-grid { display: grid; grid-template-columns: 1fr 86px 1fr; grid-template-rows: auto 1fr 1fr auto; gap: 10px 12px; align-items: center; }
.tl-areas-end { grid-column: 1 / -1; text-align: center; font: 400 21px/1 var(--hand); color: var(--pencil); }
.tl-areas-end--rear { grid-row: 4; }
.tl-topcar { grid-column: 2; grid-row: 2 / 4; width: 86px; height: 150px; }
.tl-corner {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 64px; padding: 10px; border: 1.8px solid #b8aabd; border-radius: 12px;
  background: #fff; cursor: pointer; font: 600 15.5px/1.2 var(--text); position: relative;
}
.tl-corner input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tl-corner:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.tl-corner.is-on { background: var(--lime); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.tl-corner.is-on span::before { content: "✓ "; }
.tl-corner--drv-f { grid-column: 1; grid-row: 2; }
.tl-corner--pas-f { grid-column: 3; grid-row: 2; }
.tl-corner--drv-r { grid-column: 1; grid-row: 3; }
.tl-corner--pas-r { grid-column: 3; grid-row: 3; }

/* fields */
.tl-field { margin: 0 0 14px; }
.tl-field > label, .tl-label-row label { display: block; font: 600 15px/1.2 var(--text); margin: 0 0 6px; }
.tl-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tl-zipin { max-width: 220px; font-size: 22px !important; letter-spacing: .08em; }
.tl-vin { text-transform: uppercase; letter-spacing: .06em; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace !important; }
.tl-hint { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
.tl-check { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 4px 0 6px; cursor: pointer; font-weight: 600; }
.tl-check input { width: 22px; height: 22px; accent-color: var(--ink); }
.tl-matched { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 12px; background: var(--lime); border-radius: 10px; font-size: 15.5px; }
.tl-matched svg { width: 20px; height: 20px; }
.tl-help, .tl-inline {
  border: 0; background: none; padding: 2px 0; font: 600 15px/1.3 var(--text); color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime-deep);
  text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; min-height: 32px;
}
.tl-help:hover, .tl-inline:hover { text-decoration-color: var(--ink); }

.tl-seg { display: inline-grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); border-radius: 12px; padding: 3px; margin: 8px 0 20px; background: #fff; width: 100%; max-width: 420px; }
.tl-seg button { min-height: 44px; border: 0; border-radius: 9px; background: none; font: 600 15.5px/1.1 var(--text); color: var(--ink); cursor: pointer; padding: 8px 10px; }
.tl-seg button[aria-checked="true"] { background: var(--ink); color: #fff; }

.tl-alert { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: #fbeceb; color: #7d1a14; border-left: 4px solid var(--error); font-size: 15.5px; }
.tl-alert[hidden] { display: none; }
.tl-alert--zip { background: #fff7d6; color: var(--ink); border-left-color: var(--ink); margin: 0 0 16px; }

.tl-act { display: flex; justify-content: flex-end; margin-top: 22px; }
.tl-act[hidden] { display: none; }
.tl-act .lg-go { width: auto; min-width: 220px; }
.tl-act--left { justify-content: flex-start; }
.tl-next {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 22px; border: 2px solid var(--ink); border-radius: 12px; background: #fff;
  font: 700 17px/1 var(--text); color: var(--ink); cursor: pointer;
}
.tl-next:hover { background: var(--lilac-2); }
.tl-next svg, .tl-act .lg-go svg { width: 22px; height: 22px; }
.tl-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; display: inline-block; animation: tlSpin .7s linear infinite; }
@keyframes tlSpin { to { transform: rotate(360deg); } }

/* loading */
.tl-loading { text-align: center; padding: 40px 32px; }
.tl-pulse { width: 74px; height: 74px; margin: 0 auto 18px; animation: tlPulse 1.4s ease-in-out infinite; }
.tl-pulse svg { width: 100%; height: 100%; }
@keyframes tlPulse { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.06); } }
.tl-check-list { list-style: none; padding: 0; margin: 18px auto 0; max-width: 320px; text-align: left; }
.tl-check-list li { position: relative; padding: 10px 0 10px 36px; color: var(--ink-soft); border-bottom: 1px dashed var(--line); }
.tl-check-list li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 20px; height: 20px; border: 2px solid #b8aabd; border-radius: 50%; }
.tl-check-list li.is-done { color: var(--ink); font-weight: 600; }
.tl-check-list li.is-done::before { background: var(--lime); border-color: var(--ink); }
.tl-check-list li.is-done::after { content: "✓"; position: absolute; left: 7px; top: 10px; font-size: 14px; font-weight: 800; }
.tl-slow { margin-top: 16px; color: var(--ink-soft); }

/* ------------------------------------------------------------------ offer page */
.tl-offer { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
.tl-rail { grid-column: 2; grid-row: 1; position: sticky; top: 24px; }
.tl-sheet { grid-column: 1; grid-row: 1; background: #fff; border: 2px solid var(--ink); border-radius: 18px; padding: 22px 32px 30px; }
.tl-offer-h { font: 800 clamp(28px, 3.3vw, 38px)/1.12 var(--display); letter-spacing: -.015em; margin: 0 0 8px; }
.tl-offer-h:focus { outline: none; }
.tl-amt { position: relative; z-index: 0; white-space: nowrap; }
.tl-amt::after { content: ""; position: absolute; z-index: -1; left: -4px; right: -4px; bottom: 2px; height: 42%; background: var(--lime); border-radius: 3px; transform: rotate(-1deg); }
.tl-offer-sub { margin: 0 0 8px; color: var(--ink-soft); }
.tl-sec { border-top: 1.5px dashed var(--line); padding: 22px 0 6px; margin-top: 18px; }
.tl-sec h2 { display: flex; align-items: center; gap: 10px; font: 800 21px/1.2 var(--display); margin: 0 0 14px; }
.tl-sec h2 em { font: 500 15px/1 var(--text); color: var(--ink-soft); font-style: normal; }
.tl-sec-n svg { width: 30px; height: 30px; display: block; }
.tl-sec-sub { margin: -6px 0 14px; color: var(--ink-soft); font-size: 15.5px; }
.tl-sec--quiet { padding-bottom: 14px; }
.tl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.tl-grid2--zip { grid-template-columns: 160px 1fr; }
.tl-summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--lilac-2); border-radius: 12px; }
.tl-summary > svg { width: 26px; height: 26px; flex-shrink: 0; background: var(--lime); border-radius: 50%; padding: 3px; border: 1.5px solid var(--ink); }
.tl-summary div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-summary span { color: var(--ink-soft); font-size: 15px; overflow-wrap: anywhere; }
.tl-disclose { margin: 10px 0 0; padding: 12px 14px; border-left: 3px solid var(--lime-deep); background: #fbfdf2; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.tl-disclose .tl-inline { font-size: 14.5px; min-height: 0; }
.tl-final { border-top: 1.5px dashed var(--line); margin-top: 18px; padding-top: 20px; }
.tl-final .tl-alert { margin: 0 0 14px; }
.tl-final .tl-disclose { margin: 0 0 16px; }
.tl-cta { margin-top: 4px; }
.tl-after { margin: 14px 0 0; color: var(--ink-soft); font-size: 15.5px; text-align: center; }
.tl-legal { margin: 6px 0 0; text-align: center; font-size: 14.5px; color: var(--ink-soft); }
.tl-legal .tl-inline { font-size: 14.5px; }

/* rail ticket */
.tl-ticket { background: var(--ink); color: #f3eef6; border-radius: 18px; padding: 24px 24px 22px; position: relative; }
.tl-ticket-k { margin: 0; font: 400 24px/1 var(--hand); color: var(--lime); }
.tl-ticket-amt { margin: 6px 0 2px; font: 800 52px/1 var(--display); letter-spacing: -.02em; color: #fff; }
.tl-ticket-car { margin: 0; color: #d9cde0; font-weight: 600; }
.tl-speed { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 8px 10px; background: rgba(200, 240, 60, .14); border-radius: 8px; color: var(--lime); font-weight: 600; font-size: 15px; }
.tl-speed svg { width: 22px; height: 22px; filter: invert(1) hue-rotate(180deg); }
.tl-ticket-tear { display: block; width: 100%; height: 10px; margin: 18px 0 14px; }
.tl-howto-h { font: 400 23px/1.1 var(--hand); color: var(--lime); margin: 0 0 10px; }
.tl-howto { margin: 0; padding: 0; list-style: none; counter-reset: how; }
.tl-howto li { counter-increment: how; position: relative; padding: 0 0 12px 36px; font-size: 15.5px; line-height: 1.45; }
.tl-howto li::before {
  content: counter(how); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--lime);
  color: var(--lime); font: 700 13px/21px var(--text); text-align: center;
}

/* pickup */
.tl-slot {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; text-align: left; padding: 14px 16px; min-height: 64px; border: 1.8px solid #b8aabd;
  border-radius: 12px; background: #fff; cursor: pointer; color: var(--ink); font-family: var(--text);
}
.tl-slot:hover { border-color: var(--ink); }
.tl-slot-k { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.tl-slot-v { grid-column: 1; font-size: 17px; font-weight: 700; }
.tl-free { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 400 22px/1 var(--hand); color: var(--pencil); }
.tl-slot.is-on { background: var(--lime); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.tl-slot.is-on .tl-slot-k, .tl-slot.is-on .tl-free { color: var(--ink); }
.tl-linkbtn {
  border: 0; background: none; padding: 10px 2px; min-height: 44px; font: 600 15.5px/1.2 var(--text); color: var(--ink); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--lime-deep); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.tl-days { margin-top: 4px; }
.tl-daystrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.tl-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; min-height: 70px; border: 1.5px solid #b8aabd; border-radius: 10px; background: #fff;
  font: 500 12.5px/1.1 var(--text); color: var(--ink); cursor: pointer;
}
.tl-day strong { font: 800 20px/1.1 var(--display); }
.tl-day.is-wkend { background: #f4f1f5; }
.tl-day.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tl-wins { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tl-win { min-height: 48px; padding: 10px 16px; border: 1.8px solid #b8aabd; border-radius: 10px; background: #fff; font: 600 15.5px/1 var(--text); color: var(--ink); cursor: pointer; }
.tl-win.is-on { background: var(--lime); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.tl-picked { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 14px; background: var(--lilac-2); border-radius: 10px; font-size: 15.5px; }
.tl-picked svg { width: 20px; height: 20px; flex-shrink: 0; }
.tl-picked span { flex: 1; }
.tl-loading-line { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); margin: 0; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--lime-deep); animation: tlPulse 1s ease-in-out infinite; }

/* ------------------------------------------------------------------ end screens */
.tl-end { text-align: center; padding: 36px 32px; }
.tl-end h1 { font: 800 clamp(26px, 3.2vw, 34px)/1.15 var(--display); margin: 6px 0 12px; letter-spacing: -.01em; }
.tl-end h1:focus { outline: none; }
.tl-end p { margin: 0 auto 14px; max-width: 480px; }
.tl-end-icon { width: 64px; height: 56px; margin: 0 auto 8px; }
.tl-end-icon svg { width: 100%; height: 100%; color: var(--ink); }
.tl-end-k { font: 400 26px/1 var(--hand) !important; color: var(--pencil); }
.tl-end-act { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 20px; }
.tl-end-act .lg-go { width: auto; min-width: 240px; }
.tl-req { display: inline-block; padding: 12px 16px; background: var(--lime); border: 2px solid var(--ink); border-radius: 12px; }
.tl-howto--end { text-align: left; max-width: 400px; margin: 20px auto 22px; background: var(--ink); color: #f3eef6; border-radius: 14px; padding: 18px 18px 6px; }
.tl-end--win { border-width: 2.5px; box-shadow: 6px 6px 0 var(--lime); }

/* ------------------------------------------------------------------ dialogs */
.tl-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(36, 19, 41, .55); display: flex; align-items: center; justify-content: center; padding: 20px; animation: tlFade .16s ease-out; }
@keyframes tlFade { from { opacity: 0; } to { opacity: 1; } }
.tl-dlg { position: relative; background: #fff; border: 2px solid var(--ink); border-radius: 18px; padding: 28px 28px 22px; width: min(540px, 100%); max-height: calc(100vh - 40px); overflow: auto; box-shadow: 6px 6px 0 var(--lime); }
.tl-dlg h2 { font: 800 25px/1.15 var(--display); margin: 0 36px 12px 0; }
.tl-dlg h3 { font: 700 16px/1.2 var(--text); margin: 0 0 6px; }
.tl-dlg ul { margin: 0; padding-left: 18px; }
.tl-dlg p { margin: 0 0 12px; }
.tl-x { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 10px; }
.tl-x:hover { background: var(--lilac-2); }
.tl-x svg { width: 22px; height: 22px; }
.tl-dlg-act { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 18px; }
.tl-was { color: #6f6175; font-size: 15px; margin: 0 0 4px !important; }
.tl-dlg-amt span { white-space: nowrap; background: var(--lime); padding: 0 6px; border-radius: 4px; }
.tl-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.tl-vin-ex code, .tl-end code { background: var(--lilac-2); padding: 2px 6px; border-radius: 4px; font-size: 15px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1023px) {
  .tl-offer { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tl-rail { grid-column: 1; grid-row: 2; position: static; }
  .tl-sheet { grid-row: 1; }
}
@media (max-width: 767px) {
  .tl-main { padding: 12px 16px 48px; }
  .tl-card { border: 0; background: transparent; padding: 12px 0 20px; border-radius: 0; }
  .tl-meter { left: 0; right: 0; top: -6px; border-radius: 4px; }
  .tl-sheet { border: 0; padding: 4px 0 12px; background: transparent; }
  .tl-grid2, .tl-grid2--zip { grid-template-columns: minmax(0, 1fr); }
  .tl-act .lg-go, .tl-next { width: 100%; }
  .tl-act .tl-next { justify-content: center; }
  .tl-daystrip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .tl-day { flex: 0 0 64px; scroll-snap-align: start; }
  .tl-areas-grid { grid-template-columns: 1fr 64px 1fr; gap: 8px; }
  .tl-topcar { width: 64px; height: 120px; }
  .tl-corner { font-size: 14.5px; min-height: 58px; padding: 8px 6px; }
  .tl-twocol { grid-template-columns: 1fr; }
  .tl-ticket-amt { font-size: 44px; }
  .tl-end { padding: 24px 0; }
  .tl-dlg { padding: 24px 18px 18px; }
  .tl-scrim { align-items: flex-end; padding: 0; }
  .tl-dlg { border-radius: 18px 18px 0 0; max-height: 88vh; box-shadow: none; }
  .tl-opt-key { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-stage, .tl-pulse, .tl-dot, .tl-scrim { animation: none !important; }
}