/* ClearCar: frosted-glass UI. No external fonts or assets. */

:root {
  --bg: #060a14;
  --bg-2: #0b1224;
  --text: #eef2ff;
  --text-2: rgba(226, 232, 255, 0.72);
  --text-3: rgba(226, 232, 255, 0.5);
  --glass: rgba(255, 255, 255, 0.065);
  --glass-2: rgba(255, 255, 255, 0.025);
  --glass-strong: rgba(255, 255, 255, 0.11);
  --stroke: rgba(255, 255, 255, 0.13);
  --stroke-2: rgba(255, 255, 255, 0.07);
  --highlight: rgba(255, 255, 255, 0.16);
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.65), 0 10px 24px -12px rgba(0, 0, 0, 0.4);
  --accent: #7cf3ff;
  --accent-2: #a78bfa;
  --accent-3: #f472b6;
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #fb7185;
  --info: #7dd3fc;
  --blob-1: #3b5bfd;
  --blob-2: #00d4ff;
  --blob-3: #b14bff;
  --blob-4: #ff5fa2;
  --blob-opacity: 0.55;
  --radius: 26px;
  --radius-sm: 16px;
  --blur: 26px;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --score-color: var(--accent);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #eef1fb;
    --bg-2: #e3e8f7;
    --text: #0d1330;
    --text-2: rgba(13, 19, 48, 0.72);
    --text-3: rgba(13, 19, 48, 0.5);
    --glass: rgba(255, 255, 255, 0.55);
    --glass-2: rgba(255, 255, 255, 0.32);
    --glass-strong: rgba(255, 255, 255, 0.75);
    --stroke: rgba(255, 255, 255, 0.85);
    --stroke-2: rgba(13, 19, 48, 0.08);
    --highlight: rgba(255, 255, 255, 0.95);
    --shadow: 0 30px 60px -30px rgba(40, 52, 110, 0.35), 0 10px 24px -12px rgba(40, 52, 110, 0.18);
    --accent: #0891b2;
    --accent-2: #7c3aed;
    --accent-3: #db2777;
    --good: #059669;
    --warn: #b45309;
    --bad: #e11d48;
    --info: #0369a1;
    --blob-1: #8aa2ff;
    --blob-2: #6ee7f9;
    --blob-3: #d8b4fe;
    --blob-4: #fda4cf;
    --blob-opacity: 0.7;
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: radial-gradient(1200px 800px at 80% -10%, var(--bg-2), transparent 60%), var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Fine film grain over everything for a tactile glass feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--text-3); }
.small-text { font-size: 0.8125rem; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

/* ---------- Aurora background ---------- */

.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob {
  position: absolute;
  width: 46vmax; height: 46vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--blob-opacity);
  mix-blend-mode: screen;
  will-change: transform;
}
@media (prefers-color-scheme: light) { .blob { mix-blend-mode: multiply; } }
.b1 { background: var(--blob-1); top: -18vmax; left: -12vmax; animation: drift1 26s ease-in-out infinite alternate; }
.b2 { background: var(--blob-2); top: 8vmax; right: -16vmax; width: 38vmax; height: 38vmax; animation: drift2 31s ease-in-out infinite alternate; opacity: calc(var(--blob-opacity) * 0.75); }
.b3 { background: var(--blob-3); bottom: -22vmax; left: 18vmax; animation: drift3 35s ease-in-out infinite alternate; }
.b4 { background: var(--blob-4); bottom: 12vmax; right: 12vmax; width: 24vmax; height: 24vmax; animation: drift1 29s ease-in-out infinite alternate-reverse; opacity: calc(var(--blob-opacity) * 0.55); }

@keyframes drift1 { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-12vmax, 14vmax, 0) scale(0.9); } }
@keyframes drift3 { to { transform: translate3d(-10vmax, -14vmax, 0) scale(1.1); } }

/* ---------- Glass ---------- */

.glass {
  position: relative;
  background: linear-gradient(145deg, var(--glass-strong), var(--glass) 40%, var(--glass-2));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
  backdrop-filter: blur(var(--blur)) saturate(170%);
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--highlight), var(--shadow);
  isolation: isolate;
}
/* Gradient hairline border */
.glass::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--stroke), transparent 35%, transparent 65%, var(--stroke-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  z-index: -1;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: color-mix(in srgb, var(--bg-2) 88%, white 4%); }
}

/* ---------- Layout ---------- */

.topbar {
  position: sticky;
  top: 12px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1160px;
  margin: 12px auto 0;
  padding: 10px 14px 10px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--stroke-2);
  box-shadow: inset 0 1px 0 var(--highlight);
  width: calc(100% - 32px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; font-size: 1.05rem; }
.brand-mark { width: 28px; height: 28px; }
.topnav { display: flex; gap: 6px; }
.topnav a { text-decoration: none; color: var(--text-2); font-size: 0.875rem; padding: 7px 12px; border-radius: 999px; transition: background .2s, color .2s; }
.topnav a:hover { background: var(--glass-strong); color: var(--text); }

main { max-width: 1160px; margin: 0 auto; padding: 0 16px 40px; }

/* ---------- Hero ---------- */

.hero { text-align: center; padding: clamp(48px, 9vw, 104px) 0 28px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 22px;
  padding: 6px 14px;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text-2);
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--stroke-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 22%, transparent); }
h1 {
  margin: 0 auto;
  max-width: 14ch;
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 750;
  text-wrap: balance;
}
.grad {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent-3) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.lede { max-width: 60ch; margin: 22px auto 34px; color: var(--text-2); font-size: clamp(1rem, 1.6vw, 1.125rem); text-wrap: pretty; }

/* ---------- Paste field ---------- */

.paste {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 780px;
  margin: 0 auto;
  padding: 8px 8px 8px 18px;
  border-radius: 22px;
  transition: box-shadow .25s, transform .25s;
}
.paste:focus-within { box-shadow: inset 0 1px 0 var(--highlight), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow); }
.paste.invalid { box-shadow: inset 0 1px 0 var(--highlight), 0 0 0 4px color-mix(in srgb, var(--bad) 25%, transparent), var(--shadow); }
.paste-icon { width: 22px; height: 22px; flex: none; color: var(--text-3); }
.paste input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 6px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.paste input::placeholder { color: var(--text-3); }
.paste input:focus-visible { outline: none; }

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: 15px;
  border: 1px solid var(--stroke-2);
  font: inherit; font-weight: 600; font-size: 0.9375rem;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, background .2s, box-shadow .2s, opacity .2s;
}
.btn:active { transform: scale(0.97); }
.btn.ghost { background: var(--glass); }
.btn.ghost:hover { background: var(--glass-strong); }
.btn.primary {
  color: #050816;
  border: 0;
  background: linear-gradient(110deg, var(--accent), color-mix(in srgb, var(--accent-2) 75%, var(--accent)));
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
@media (prefers-color-scheme: light) { .btn.primary { color: #fff; } }
.btn.primary:hover { box-shadow: 0 14px 36px -10px color-mix(in srgb, var(--accent) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.5); }
.btn.small { height: 38px; padding: 0 14px; font-size: 0.875rem; border-radius: 12px; }
.btn[disabled] { opacity: .6; cursor: progress; }
.spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.btn.busy .spinner { display: inline-block; }
.btn.busy .btn-label { opacity: .75; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-msg { min-height: 1.5em; margin: 14px auto 0; max-width: 780px; font-size: 0.9rem; color: var(--bad); }
.form-msg.ok { color: var(--text-3); }

.sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  color: var(--text-2);
  border-radius: 999px;
  background: var(--glass-2);
  border: 1px solid var(--stroke-2);
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; }
.c1 { background: var(--accent); } .c2 { background: var(--accent-2); } .c3 { background: var(--good); }

/* ---------- Loading ---------- */

.loading { display: flex; justify-content: center; padding: 24px 0 8px; }
.load-card { display: flex; align-items: center; gap: 26px; padding: 26px 34px; }
.load-ring {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: conic-gradient(from 0deg, transparent 0 25%, var(--accent) 60%, var(--accent-2));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation: spin 1.1s linear infinite;
}
.load-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.load-steps li { color: var(--text-3); transition: color .3s; padding-left: 22px; position: relative; font-size: 0.95rem; }
.load-steps li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; }
.load-steps li.active { color: var(--text); }
.load-steps li.active::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent); }
.load-steps li.done { color: var(--text-2); }
.load-steps li.done::before { background: var(--good); border-color: var(--good); }

/* ---------- Notice (mobile.de) ---------- */

.notice { display: flex; gap: 18px; padding: 24px 26px; margin: 18px auto 0; max-width: 780px; }
.notice h2 { margin: 0 0 6px; font-size: 1.15rem; letter-spacing: -0.01em; }
.notice p { margin: 0 0 12px; color: var(--text-2); }
.notice-icon { flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #1b1300; background: var(--warn); }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text-2); }
.steps strong { color: var(--text); }
.ext { color: var(--accent); text-underline-offset: 3px; }

.bookmarklet-link {
  display: inline-flex; align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color: #050816;
  background: linear-gradient(110deg, var(--accent), var(--accent-2));
  cursor: grab;
  box-shadow: 0 6px 18px -8px var(--accent);
}
@media (prefers-color-scheme: light) { .bookmarklet-link { color: #fff; } }
.bookmarklet-link.big { padding: 10px 20px; font-size: 1.05rem; }
.bookmarklet-link.nudge { animation: nudge .5s ease 2; }
@keyframes nudge { 25% { transform: translateX(-4px) rotate(-2deg); } 75% { transform: translateX(4px) rotate(2deg); } }
.bm-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bm-phone { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--stroke-2); }
.bm-phone summary { cursor: pointer; font-weight: 650; color: var(--text); }
.bm-phone h3 { margin: 14px 0 6px; font-size: .95rem; }
.bm-phone-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 4px 28px; }
.bm-code {
  display: block; width: 100%; margin: 4px 0 8px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid var(--stroke-2); background: var(--glass-2); color: var(--text);
  font: 1rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; word-break: break-all;   /* 16 px: no iOS zoom */
}

/* ---------- Result ---------- */

.result { display: grid; gap: 18px; margin-top: 26px; outline: none; }
.result.reveal > * { animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
.result.reveal > *:nth-child(2) { animation-delay: .08s; }
.result.reveal > *:nth-child(3) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.985); } }

.result-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; }
.result-bottom { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }

.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h2, .card-head h3 { margin: 0; letter-spacing: -0.015em; }
.card-head h3 { font-size: 1.05rem; }

/* Car card */
.car-card { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); overflow: hidden; }
.car-media { position: relative; min-height: 240px; background: linear-gradient(135deg, var(--glass-strong), transparent); }
.car-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.car-media-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); }
.car-media-fallback svg { width: 42%; }
.car-media img:not([hidden]) + .car-media-fallback { display: none; }
.source-badge {
  position: absolute; left: 14px; top: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: .02em;
  color: #fff;
  background: rgba(8, 12, 28, 0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
}
.car-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.car-title { margin: 0; font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.car-price { margin: 0; font-size: 1.6rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.car-price .muted { font-size: .85rem; font-weight: 500; letter-spacing: 0; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0; }
.fact { padding: 8px 11px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--stroke-2); min-width: 0; }
.fact dt { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.fact dd { margin: 1px 0 0; font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.35; }
.seller { margin: 0; color: var(--text-2); font-size: 0.875rem; }
.car-body .btn { align-self: flex-start; margin-top: auto; }

/* Score card */
.score-card { padding: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.gauge { position: relative; width: min(220px, 62vw); aspect-ratio: 1; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.gauge-track { fill: none; stroke: var(--stroke-2); stroke-width: 14; }
.gauge-value {
  fill: none;
  stroke: url(#gauge-grad);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 527.79;
  stroke-dashoffset: 527.79;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--score-color) 55%, transparent));
  transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1);
}
.g-stop-a { stop-color: var(--score-color); }
.g-stop-b { stop-color: color-mix(in srgb, var(--score-color) 55%, var(--accent-2)); }
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-num { font-size: clamp(3rem, 9vw, 4.2rem); font-weight: 780; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.score-of { color: var(--text-3); font-size: .85rem; margin-top: 4px; }
.grade-row { display: flex; align-items: center; gap: 10px; }
.grade {
  display: inline-grid; place-items: center;
  min-width: 46px; height: 34px; padding: 0 10px;
  border-radius: 11px;
  font-weight: 800; letter-spacing: -0.02em;
  color: #06101a;
  background: var(--score-color);
  box-shadow: 0 8px 22px -8px var(--score-color);
}
.grade-label { font-weight: 650; font-size: 1.05rem; }
.verdict { margin: 0; color: var(--text-2); max-width: 36ch; text-wrap: pretty; }
.cap-note { margin: 0; font-size: .8125rem; color: var(--bad); }
.confidence { width: 100%; margin-top: 6px; }
.confidence-head { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--text-3); margin-bottom: 6px; }
.meter { height: 6px; border-radius: 99px; background: var(--stroke-2); overflow: hidden; }
.meter span { display: block; height: 100%; width: calc(var(--v, 0) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.import-note { margin: 4px 0 0; font-size: .75rem; color: var(--text-3); }

/* Price card */
.price-card { padding: 22px 24px 20px; }
.price-summary { margin: -4px 0 26px; color: var(--text-2); }
.price-scale { position: relative; height: 54px; margin: 0 6px; }
.price-bands { position: absolute; left: 0; right: 0; top: 22px; height: 12px; display: flex; gap: 3px; }
.price-bands span { flex: 1; border-radius: 4px; opacity: .85; }
.price-bands span:first-child { border-radius: 99px 4px 4px 99px; }
.price-bands span:last-child { border-radius: 4px 99px 99px 4px; }
.price-median, .price-marker { position: absolute; top: 0; left: calc(var(--x, 50) * 1%); transform: translateX(-50%); transition: left 1.2s cubic-bezier(.2,.8,.2,1); }
.price-median { top: 16px; width: 2px; height: 24px; background: var(--text-2); border-radius: 2px; }
.price-median span { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); font-size: .6875rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.price-marker { width: 20px; height: 20px; top: 18px; border-radius: 50%; background: var(--text); border: 4px solid var(--bg); box-shadow: 0 0 0 2px var(--text), 0 4px 14px rgba(0,0,0,.4); }
.price-marker span { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .75rem; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: var(--glass-strong); border: 1px solid var(--stroke-2); }
.price-legend { display: flex; justify-content: space-between; font-size: .75rem; color: var(--text-3); margin: 6px 6px 0; }

/* Breakdown */
.breakdown, .flags-card { padding: 22px 20px 16px; }
.metrics { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.metric-head {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px minmax(72px, auto) 18px;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s;
}
.metric-head:hover, .metric-head[aria-expanded="true"] { background: var(--glass-2); }
.metric-name { font-weight: 600; font-size: .9375rem; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.metric-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.metric-meter i { height: 8px; border-radius: 3px; background: var(--stroke-2); transition: background .4s ease, box-shadow .4s ease; }
.metric-meter i:first-child { border-radius: 99px 3px 3px 99px; }
.metric-meter i:last-child { border-radius: 3px 99px 99px 3px; }
.metric-meter i.on { background: var(--c, var(--accent)); box-shadow: 0 0 10px -3px var(--c, var(--accent)); }
.metric-meter i:nth-child(2) { transition-delay: .06s; } .metric-meter i:nth-child(3) { transition-delay: .12s; }
.metric-meter i:nth-child(4) { transition-delay: .18s; } .metric-meter i:nth-child(5) { transition-delay: .24s; }
.metric-score { font-weight: 650; font-size: .875rem; text-align: right; white-space: nowrap; }
.metric.na .metric-score { color: var(--text-3); font-weight: 500; font-size: .8rem; }
.chev { width: 18px; height: 18px; color: var(--text-3); transition: transform .25s; }
.metric-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.metric-body { padding: 2px 10px 12px; }
.metric-summary { margin: 0 0 6px; color: var(--text); font-size: .9rem; }
.metric-details { margin: 0; padding-left: 18px; color: var(--text-2); font-size: .85rem; display: grid; gap: 2px; }

/* Flags */
.flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flag { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--stroke-2); font-size: .875rem; overflow-wrap: anywhere; }
.flag-icon { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: .8rem; color: #0a0f1f; }
.flag.red .flag-icon { background: var(--bad); }
.flag.amber .flag-icon { background: var(--warn); }
.flag.green .flag-icon { background: var(--good); }
.flag.info .flag-icon { background: var(--info); }
.flag.red { border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.checklist { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--stroke-2); }
.checklist h4 { margin: 0 0 6px; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.checklist ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: .85rem; display: grid; gap: 3px; }

/* ---------- Methodology ---------- */

.method { padding: 26px 26px 24px; margin-top: 40px; }
.method + .method { margin-top: 18px; }
.method p { color: var(--text-2); }
.method-intro { margin: 0 0 18px; max-width: 80ch; }
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--stroke-2); }
.matrix { width: 100%; border-collapse: collapse; font-size: .9rem; }
.matrix th, .matrix td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--stroke-2); }
.matrix tr:last-child td { border-bottom: 0; }
.matrix th { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); font-weight: 600; background: var(--glass-2); }
.matrix td:first-child { font-weight: 600; white-space: nowrap; }
.matrix td:last-child { color: var(--text-2); }
.grades { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.g { padding: 4px 12px 4px 5px; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: #07101c; display: inline-flex; align-items: center; gap: 7px; }
.g b { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 99px; background: rgba(7, 16, 28, .16); font-weight: 800; }
.gA { background: var(--good); } .gB { background: #a3e635; } .gC { background: var(--warn); } .gD { background: #fb923c; } .gE { background: var(--bad); }

.footer { max-width: 1160px; margin: 0 auto; padding: 8px 16px 48px; color: var(--text-3); font-size: .8125rem; text-align: center; }
.footer p { max-width: 80ch; margin: 0 auto; }
.footer p + p { margin-top: 8px; }
.footer-operator { font-size: .75rem; }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .result-top, .result-bottom { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .car-card { grid-template-columns: minmax(0, 1fr); }
  .car-media { min-height: 210px; }
  .paste { flex-wrap: wrap; padding: 10px; }
  .paste-icon { display: none; }
  .paste input { flex-basis: 100%; height: 44px; padding: 0 8px; }
  .paste .btn { flex: 1; }
  .metric-head { grid-template-columns: minmax(0, 1fr) 60px auto 16px; gap: 8px; padding: 10px 6px; }
  .load-card { padding: 20px 22px; gap: 18px; }
  .notice { flex-direction: column; }
  .method, .price-card { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 420px) {
  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .metric-head { grid-template-columns: minmax(0, 1fr) 48px auto 16px; }
  .metric-score { font-size: .8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Price bands: tier 0 = cheapest relative to market, tier 6 = most expensive */
.t0 { background: #10b981; } .t1 { background: #34d399; } .t2 { background: #a3e635; }
.t3 { background: #facc15; } .t4 { background: #fb923c; } .t5 { background: #f87171; } .t6 { background: #e11d48; }

/* Language switcher */
.topbar-right { display: flex; align-items: center; gap: 10px; }
.langnav {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--glass-2);
  border: 1px solid var(--stroke-2);
}
.langnav a {
  min-width: 36px;
  padding: 5px 9px;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: .04em;
  color: var(--text-3);
  transition: background .2s, color .2s;
}
.langnav a:hover { color: var(--text); }
.langnav a[aria-current="page"] {
  color: var(--text);
  background: var(--glass-strong);
  box-shadow: inset 0 1px 0 var(--highlight);
}
@media (max-width: 720px) {
  .topnav { display: none; }
}

/* ---------- Compare ---------- */

.compare { padding: 26px; margin-top: 40px; }
.cmp-intro { margin: 0 0 18px; max-width: 80ch; color: var(--text-2); }
.cmp-slots { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: start; }
.cmp-slot { display: grid; gap: 8px; min-width: 0; }
.cmp-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.cmp-badge {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 8px;
  font-weight: 800; font-size: .8rem;
  color: #050816;
  background: linear-gradient(110deg, var(--accent), var(--accent-2));
}
@media (prefers-color-scheme: light) { .cmp-badge { color: #fff; } }
.cmp-field {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;                   /* let the grid shrink it below the input's intrinsic width (WebKit) */
  overflow: hidden;               /* nothing escapes the rounded box */
  min-height: 52px;
  padding: 0 8px 0 14px;
  border-radius: 16px;
  background: var(--glass);
  border: 1px solid var(--stroke-2);
  box-shadow: inset 0 1px 0 var(--highlight);
  transition: box-shadow .2s;
}
.cmp-field:focus-within { box-shadow: inset 0 1px 0 var(--highlight), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.cmp-field input {
  flex: 1 1 0; width: 100%; min-width: 0; height: 48px;
  border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 1rem;           /* below 16 px iOS Safari zooms the page on focus */
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
/* Long links fade out at the edge while the field isn't being edited. */
.cmp-field input:not(:focus) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
.cmp-source {
  flex: none; max-width: 40%;
  padding: 3px 9px; border-radius: 999px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .7rem; font-weight: 700; color: var(--text-2);
  background: var(--glass-strong); border: 1px solid var(--stroke-2);
}
.cmp-field input::placeholder { color: var(--text-3); }
.cmp-field input:focus-visible { outline: none; }
.cmp-picked { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cmp-picked-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .9rem; }
.cmp-unpick { flex: none; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--glass-strong); color: var(--text); font-size: 1.1rem; cursor: pointer; }
.cmp-slot-msg { min-height: 1.2em; margin: 0; font-size: .8125rem; color: var(--bad); }
.cmp-swap {
  align-self: start; margin-top: 38px;
  width: 40px; height: 40px;
  border-radius: 12px; border: 1px solid var(--stroke-2);
  background: var(--glass); color: var(--text-2);
  font-size: 1.05rem; cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.cmp-swap:hover { background: var(--glass-strong); color: var(--text); }
.cmp-swap:active { transform: scale(.94); }
.cmp-recent { margin-top: 10px; }
.cmp-recent-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.linklike { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: .8125rem; text-transform: none; letter-spacing: 0; cursor: pointer; }
.cmp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-chips > li { min-width: 0; max-width: 100%; }
.cmp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: min(340px, 100%);
  padding: 5px 12px 5px 5px;
  border-radius: 999px; border: 1px solid var(--stroke-2);
  background: var(--glass-2); color: var(--text);
  font: inherit; font-size: .8125rem;
  cursor: pointer;
  transition: background .2s;
}
.cmp-chip:hover { background: var(--glass-strong); }
.cmp-chip-src { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--glass-strong); font-size: .7rem; font-weight: 700; color: var(--text-2); }
.cmp-chip-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.cmp-actions .form-msg { min-height: 0; margin: 0; max-width: none; }

.cmp-result { margin-top: 24px; outline: none; }
.cmp-result.reveal { animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
.cmp-summary { margin-bottom: 18px; padding: 14px 16px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--stroke-2); }
.cmp-summary p { margin: 0; color: var(--text-2); }
.cmp-summary p + p { margin-top: 4px; }
.cmp-summary p:first-child { color: var(--text); font-weight: 650; font-size: 1.05rem; }
.cmp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
.cmp-head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; min-width: 0; }
.cmp-photo { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--glass-strong), transparent); }
.cmp-photo img { width: 100%; height: 100%; object-fit: cover; }
.cmp-photo .source-badge { left: 10px; top: 10px; }
.cmp-badge-photo { position: absolute; right: 10px; top: 10px; }
.cmp-head-title { margin: 0; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.cmp-row-label { grid-column: 1 / -1; padding: 12px 4px 4px; border-top: 1px solid var(--stroke-2); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.cmp-cell { min-width: 0; margin-bottom: 6px; padding: 6px 10px 8px; border-radius: 12px; font-size: .9rem; overflow-wrap: anywhere; }
.cmp-cell.win { background: color-mix(in srgb, var(--good) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 35%, transparent); }
.cmp-overall { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cmp-score { font-size: 2rem; font-weight: 780; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.cmp-overall .grade { min-width: 38px; height: 28px; font-size: .9rem; }
.cmp-grade-label { font-weight: 600; font-size: .9rem; }
.cmp-level { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.cmp-level .metric-meter { width: 84px; }
.cmp-level-label { font-weight: 600; font-size: .875rem; }
.cmp-flags { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 3px; font-size: .8125rem; color: var(--text-2); }

@media (max-width: 720px) {
  .compare { padding: 20px 16px; }
  .cmp-slots { grid-template-columns: minmax(0, 1fr); }
  .cmp-swap { margin: -4px auto; transform: rotate(90deg); }
  .cmp-swap:active { transform: rotate(90deg) scale(.94); }
  .cmp-grid { column-gap: 8px; }
  .cmp-cell { padding: 6px 6px 8px; font-size: .85rem; }
  .cmp-score { font-size: 1.6rem; }
  .cmp-level .metric-meter { width: 64px; }
}

/* ---------- Remember switch (Recently rated) ---------- */

.cmp-remember { margin-top: 12px; display: grid; gap: 4px; }
.cmp-remember p { margin: 0; }
.cmp-remember a, .footer a { color: var(--text-2); text-underline-offset: 2px; }
.cmp-remember a:hover, .footer a:hover { color: var(--text); }
.switch { display: inline-flex; align-items: center; gap: 10px; width: fit-content; cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--text); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  position: relative; flex: none;
  width: 38px; height: 22px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--stroke-2);
  transition: background .2s, border-color .2s;
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-2); box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s, background .2s;
}
.switch input:checked + .switch-track { background: color-mix(in srgb, var(--accent) 40%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.switch input:checked + .switch-track::after { transform: translateX(16px); background: var(--text); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---------- Privacy page ---------- */

.doc { max-width: 860px; margin: 28px auto 0; }
.doc h1 { max-width: none; font-size: clamp(1.8rem, 4vw, 2.6rem); text-align: left; margin: 4px 0 6px; }
.doc h2 { margin: 34px 0 10px; font-size: 1.25rem; letter-spacing: -0.015em; scroll-margin-top: 90px; }
.doc h3 { margin: 20px 0 6px; font-size: 1rem; }
.doc p { max-width: 75ch; line-height: 1.6; }
.doc-eyebrow { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 600; }
.doc-intro { font-size: 1.05rem; color: var(--text) !important; }
.doc-table { min-width: 720px; }
.doc-table td:first-child { white-space: nowrap; }

/* Phones: tables become stacked cards (label above value) instead of scrolling sideways. */
@media (max-width: 720px) {
  .doc-table { min-width: 0; }
  .doc-table thead { display: none; }
  .doc-table tr, .doc-table td { display: block; }
  .doc-table td { padding: 10px 14px; border-bottom: 1px solid var(--stroke-2); }
  .doc-table td:first-child { white-space: normal; }
  .doc-table td::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3);
  }
}
@media (max-width: 560px) {
  .matrix thead { display: none; }
  .matrix tr, .matrix td { display: block; }
  .matrix tr { padding: 11px 14px; border-bottom: 1px solid var(--stroke-2); }
  .matrix tr:last-child { border-bottom: 0; }
  .matrix td { padding: 0; border: 0; }
  .matrix td:first-child { white-space: normal; margin-bottom: 3px; }
}
.doc-table code { font-size: .85em; }
.doc-operator { color: var(--text) !important; }
.doc-operator a { color: var(--accent); }
.doc-missing { padding: 10px 14px; border-radius: var(--radius-sm); border: 1px dashed color-mix(in srgb, var(--warn) 60%, transparent); color: var(--text) !important; }