/* The finder's search box: the first thing to reach for on the page. Ink, like the garage it opens. */
.fbar { display: flex; align-items: center; gap: 4px; width: 100%; max-width: 680px; height: 76px; margin-top: 30px; padding: 6px 6px 6px 8px; border-radius: 999px; background: var(--ink); color: var(--bone); box-shadow: 0 24px 50px -30px rgba(10,10,9,.6); }
.fbar:focus-within { box-shadow: 0 0 0 3px var(--bone), 0 0 0 4px var(--ink), 0 24px 50px -30px rgba(10,10,9,.6); }
.fbar-ring { flex: none; width: 64px; height: 64px; padding: 0; border: 0; background: none; color: var(--bone); cursor: pointer; border-radius: 999px; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.fbar-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fbar-ring .fx-ring { transition: stroke-width .3s var(--ease); }
.fbar-ring:hover .fx-ring, .fbar-ring:focus-visible .fx-ring { stroke-width: 4; }
.fbar-ring:focus-visible { outline: 2px solid var(--bone); outline-offset: -2px; }
/* The gray words: the rest of the request, offered but not yours until you take it */
.fbar-field { position: relative; flex: 1 1 auto; width: 0; min-width: 0; height: 100%; display: flex; align-items: center; overflow: hidden; }
.fbar-ghost { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 10px; white-space: pre; pointer-events: none; font-family: var(--display); font-weight: 300; font-size: 21px; letter-spacing: -.015em; }
.fbar-ghost[hidden] { display: none; }
.fbar-ghost-typed { color: transparent; }
.fbar-ghost-add { color: rgba(244,242,238,.38); pointer-events: auto; cursor: pointer; border-radius: 4px; padding-right: 6px; transition: color .2s var(--ease); }
.fbar-ghost-add:empty { display: none; }
.fbar-ghost-add::after { content: "tab"; display: inline-block; margin-left: 8px; padding: 2px 6px 3px; border: 1px solid rgba(244,242,238,.3); border-radius: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; vertical-align: 3px; color: rgba(244,242,238,.55); }
.fbar-ghost-add:hover { color: rgba(244,242,238,.62); }
@media (hover: none) { .fbar-ghost-add::after { content: "+ tap"; } }
.fbar-hint-text b.n { font-variant-numeric: tabular-nums; }
.fbar-input { flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; border: 0; border-radius: 0; background: transparent; color: var(--bone); font-family: var(--display); font-weight: 300; font-size: 21px; letter-spacing: -.015em; padding: 0 10px; outline: none; -webkit-appearance: none; appearance: none; }
.fbar-input::placeholder { color: rgba(244,242,238,.55); opacity: 1; }
.fbar-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.fbar-go { flex: none; height: 100%; display: inline-flex; align-items: center; gap: 12px; padding: 0 26px 0 28px; border: 0; border-radius: 999px; background: var(--bone); color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.fbar-go span { font-family: var(--display); font-size: 18px; letter-spacing: 0; transition: transform .3s var(--ease); }
.fbar-go:hover span { transform: translateX(3px); }
.fbar-go:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.fbar-hint { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; max-width: 680px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.fbar-hint b { font-weight: 500; color: var(--ink); }
.fbar-dot { flex: none; width: 7px; height: 7px; border-radius: 999px; background: var(--ink); transform: translateY(-1px); animation: fx-point 2.6s var(--ease) infinite; }
@media (max-width: 760px) {
  .fbar { height: 64px; margin-top: 22px; padding: 5px 5px 5px 6px; }
  .fbar-ring { width: 54px; height: 54px; }
  .fbar-input { font-size: 17px; padding: 0 6px; }
  .fbar-ghost { font-size: 17px; padding: 0 6px; }
  .fbar-go { padding: 0 18px 0 20px; gap: 8px; }
  .fbar-hint { font-size: 12.5px; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .fbar-dot { animation: none; } }

/* The finder: a dark concrete garage, a white sheet on the back wall, and every live car as a plate of light.
   This is the one place the site goes dark. Monochrome stays the rule; the only colour is the cars' own paint. */
html.finder-open, html.finder-open body { overflow: hidden; }
.finder { position: fixed; inset: 0; z-index: 300; background: #0a0a09; color: var(--bone); opacity: 0; transition: opacity .26s var(--ease); overflow: hidden; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.finder.is-open { opacity: 1; }
.finder[hidden] { display: none; }
.fx-floor { position: absolute; inset: 0; display: block; }

/* Top: the live count and the chips that made it */
.fx-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 36px; align-items: start; padding: 28px var(--gut) 0; pointer-events: none; }
.fx-top > * { pointer-events: auto; }
.fx-count { min-width: 190px; }
.fx-n { display: block; font-family: var(--display); font-weight: 200; font-size: clamp(56px, 7.2vw, 108px); line-height: .9; letter-spacing: -.055em; font-variant-numeric: tabular-nums lining-nums; }
.fx-l { display: block; margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--co-silver); }
.fx-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; padding-top: 10px; }
.fx-chips li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 13px; border: 1px solid rgba(244,242,238,.3); border-radius: 999px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); background: rgba(10,10,9,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fx-chip .5s var(--ease) both; }
.fx-chip-n { color: var(--co-silver); font-variant-numeric: tabular-nums; }
.fx-chips .fx-chip-ai { border-style: dashed; color: var(--co-silver); }
@keyframes fx-chip { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
.fx-close { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone); background: rgba(10,10,9,.5); border: 1px solid rgba(244,242,238,.3); border-radius: 999px; padding: 11px 16px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.fx-close:hover { border-color: var(--bone); }
.fx-close span { font-size: 15px; line-height: 1; }

/* Stage: the last few, as prints pinned in front of the sheet */
.fx-stage { position: absolute; z-index: 2; left: 0; right: 0; top: 30%; bottom: 236px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 12px; padding: 0 var(--gut); pointer-events: none; }
.fx-stage.is-few, .fx-stage.is-final { pointer-events: auto; }
/* One row that scrolls sideways when it must; centred when it fits. Cards size to the stage's height. */
.fx-stage { container-type: size; flex-wrap: nowrap; justify-content: flex-start; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fx-stage::-webkit-scrollbar { display: none; }
.fx-stage > .fx-card { flex: none; scroll-snap-align: center; }
.fx-stage > .fx-card:first-child { margin-left: auto; }
.fx-stage > .fx-card:last-child { margin-right: auto; }
.fx-card { position: relative; display: flex; flex-direction: column; width: clamp(120px, min(13vw, calc(160cqh - 150px)), 188px); background: #F4F2EE; color: var(--ink); text-decoration: none; box-shadow: 0 34px 60px -32px rgba(0,0,0,.9), 0 0 0 1px rgba(244,242,238,.08); transition: transform .6s var(--ease), opacity .45s var(--ease), width .6s var(--ease); }
.fx-card.is-in { opacity: 0; transform: translateY(26px) scale(.94); }
.fx-card.is-out { opacity: 0; transform: translateY(34px) scale(.9); pointer-events: none; }
.fx-card:hover { transform: translateY(-3px); }
.fx-card:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.fx-ph { position: relative; aspect-ratio: 16 / 10; background: #1d1d1b; overflow: hidden; }
.fx-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-ph > span:not(.fx-stock):not(.fx-deal) { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--co-silver); }
.fx-stock, .fx-deal { position: absolute; font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 7px; line-height: 1; }
.fx-stock { right: 8px; bottom: 8px; background: rgba(19,19,18,.75); color: var(--bone); }
.fx-deal { left: 8px; top: 8px; background: #F4F2EE; color: var(--ink); }
.fx-meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.fx-name { font-family: var(--display); font-size: 13px; font-weight: 400; line-height: 1.25; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fx-price { font-family: var(--display); font-weight: 300; font-size: 18px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fx-mi { font-family: var(--mono); font-size: 10px; color: var(--ink-2); white-space: nowrap; }
.fx-where, .fx-facts { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-where { display: none; }
.fx-facts { display: none; }
.is-final .fx-card { width: clamp(190px, min(26vw, calc(160cqh - 290px)), 360px); }
.is-final .fx-meta { padding: 16px 18px 18px; gap: 6px; }
.is-final .fx-name { font-size: 17px; }
.is-final .fx-price { font-size: 26px; }
.is-final .fx-mi { font-size: 11px; }
.is-final .fx-where, .is-final .fx-facts { display: block; font-size: 9.5px; }
.is-final .fx-facts { color: var(--ink-2); }

/* Nothing fits: say what each spec costs, and offer a person */
.fx-empty { position: absolute; z-index: 3; left: 50%; top: 47%; transform: translate(-50%, -50%); width: min(620px, calc(100% - 2 * var(--gut))); text-align: center; }
.fx-empty[hidden] { display: none; }
.fx-empty-h { font-family: var(--display); font-weight: 200; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.035em; margin-bottom: 22px; }
.fx-relax { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fx-pill { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone); background: transparent; border: 1px solid rgba(244,242,238,.35); border-radius: 999px; padding: 11px 16px; cursor: pointer; }
.fx-pill:hover { background: var(--bone); color: var(--ink); }
.fx-find { margin-top: 26px; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--co-silver); }
.fx-find .btn { background: var(--bone); color: var(--ink); border-color: var(--bone); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 13px 18px; border-radius: 999px; }

/* Bottom: what we heard, the ring, the typed fallback */
.fx-bottom { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 70px var(--gut) 18px; display: grid; justify-items: center; gap: 12px; text-align: center; background: linear-gradient(to top, rgba(10,10,9,.96) 46%, rgba(10,10,9,0)); }
.fx-said { font-family: var(--display); font-weight: 300; font-size: clamp(19px, 2.2vw, 30px); line-height: 1.25; letter-spacing: -.02em; max-width: 38ch; min-height: 1.25em; }
.fx-said .old { color: rgba(244,242,238,.42); }
.fx-said .now { color: var(--bone); }
.fx-controls { display: grid; justify-items: center; gap: 8px; }
.fx-mic { position: relative; width: 108px; height: 108px; padding: 0; border: 0; background: none; color: var(--bone); cursor: pointer; border-radius: 999px; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.fx-mic svg { width: 100%; height: 100%; overflow: visible; display: block; }
.fx-mic::after { content: ""; position: absolute; left: 14px; top: 14px; width: 68px; height: 68px; border-radius: 999px; pointer-events: none; }
.fx-mic:hover .fx-ring { stroke-width: 3.5; }
.fx-mic:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }
.fx-ring { transition: stroke-width .3s var(--ease); transform-origin: 56px 56px; }
.fx-point { transform-origin: 104px 100px; animation: fx-point 2.6s var(--ease) infinite; }
.fx-mic-l { position: absolute; left: 14px; top: 14px; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--bone); pointer-events: none; }
.is-listening .fx-ring { animation: fx-spin 1.6s linear infinite; stroke-width: 3.5; }
.is-listening .fx-mic::after { animation: fx-wave 1.3s var(--ease) infinite; }
.is-listening .fx-mic-l::before { content: "Listening"; }
.is-listening .fx-mic-l { font-size: 0; }
.is-listening .fx-mic-l::before { font-size: 8.5px; letter-spacing: .18em; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-wave { 0% { box-shadow: 0 0 0 0 rgba(244,242,238,.32); } 100% { box-shadow: 0 0 0 26px rgba(244,242,238,0); } }
@keyframes fx-point { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .7; } }
.fx-hint { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--co-silver); }
.fx-example { font-family: var(--display); font-weight: 300; font-size: 15px; color: rgba(244,242,238,.5); max-width: 46ch; }
.has-specs .fx-example, .has-specs .fx-hint { display: none; }
.has-specs .fx-mic { transform: scale(.78); margin: -12px 0; }
/* The way out: the same cars, as a page */
.fx-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 2px; padding: 15px 22px 15px 26px; border-radius: 999px; background: var(--bone); color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 300; font-size: 18px; letter-spacing: -.015em; box-shadow: 0 18px 44px -18px rgba(244,242,238,.5); transition: transform .25s var(--ease), box-shadow .25s var(--ease); animation: fx-chip .45s var(--ease) both; }
.fx-go[hidden] { display: none; }
/* Phones: the countdown to the results, filling the button from the left */
.fx-go { position: relative; overflow: hidden; isolation: isolate; }
.fx-go::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10,10,9,.14); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.is-auto .fx-hint { display: block; animation: fx-chip .4s var(--ease) both; }
.fx-go b { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.fx-go i { font-style: normal; font-family: var(--mono); font-size: 15px; margin-left: 4px; transition: transform .25s var(--ease); }
.fx-go:hover { transform: translateY(-2px); box-shadow: 0 26px 52px -18px rgba(244,242,238,.6); }
.fx-go:hover i { transform: translateX(4px); }
.fx-go:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }
.has-specs .fx-stage { bottom: 264px; }
/* A photo plate under the pointer */
.fx-tip { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; display: flex; flex-direction: column; gap: 4px; max-width: 250px; padding: 10px 12px 11px; background: var(--bone); color: var(--ink); box-shadow: 0 18px 40px -20px rgba(0,0,0,.95); }
.fx-tip[hidden] { display: none; }
.fx-tip b { font-family: var(--display); font-weight: 400; font-size: 13px; line-height: 1.25; }
.fx-tip span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
/* Leaving: the UI steps back, the cars lift, the lights come up to paper */
.fx-top, .fx-bottom, .fx-stage, .fx-empty { transition: opacity .24s var(--ease); }
.is-leaving .fx-top, .is-leaving .fx-bottom, .is-leaving .fx-stage, .is-leaving .fx-empty { opacity: 0; pointer-events: none; }
.fx-wash { position: absolute; inset: 0; z-index: 6; background: var(--bone); opacity: 0; pointer-events: none; transition: opacity .34s var(--ease); }
.is-washing .fx-wash { opacity: 1; }
/* Home ↔ results: a short cross-fade between documents where the browser supports it */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
.fx-type { width: min(520px, 100%); }
.fx-type input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(244,242,238,.22); color: var(--bone); font-family: var(--mono); font-size: 13px; letter-spacing: .02em; padding: 10px 4px; text-align: center; outline: none; -webkit-user-select: text; user-select: text; border-radius: 0; }
.fx-type input::placeholder { color: rgba(244,242,238,.4); }
.fx-type input:focus { border-bottom-color: var(--bone); }
.fx-foot { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,242,238,.45); }
.fx-links { display: flex; gap: 18px; align-items: center; }
.fx-reset { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--bone); background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: none; border-bottom: 1px solid rgba(244,242,238,.35); }
.no-voice .fx-mic, .no-voice .fx-hint { display: none; }
html.no-voice .fbar-ring { display: none; }
html.no-voice .fbar { padding-left: 18px; }
/* The microphone is blocked: what's off, where to turn it on, and typing one tap away */
.fx-micoff { position: absolute; z-index: 4; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 2 * var(--gut))); padding: 26px 26px 24px; background: rgba(10,10,9,.88); border: 1px solid rgba(244,242,238,.24); text-align: left; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.fx-micoff[hidden] { display: none; }
.fx-micoff-h { font-family: var(--display); font-weight: 300; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; line-height: 1.1; }
.fx-micoff-how { margin: 14px 0 20px; font-size: 14.5px; line-height: 1.55; color: rgba(244,242,238,.78); }
.fx-micoff-how b { color: var(--bone); font-weight: 500; }
.mic-off .fx-stage, .mic-off .fx-empty { visibility: hidden; }
.no-voice .fx-type input { font-size: 15px; border-bottom-color: var(--bone); }

@media (max-width: 760px) {
  .fx-top { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-top: 18px; }
  .fx-count { min-width: 0; }
  .fx-n { font-size: 58px; }
  .fx-l { margin-top: 8px; font-size: 9px; }
  .fx-chips { grid-column: 1 / -1; grid-row: 2; padding: 0 var(--gut); margin: 0 calc(-1 * var(--gut)); gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gut), #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 var(--gut), #000 calc(100% - 24px), transparent); }
  .fx-chips::-webkit-scrollbar { display: none; }
  .fx-chips li { flex: none; padding: 7px 10px; font-size: 9.5px; letter-spacing: .1em; gap: 7px; }
  .fx-close { padding: 9px 12px; font-size: 9.5px; }
  .fx-card { width: min(46vw, calc(160cqh - 150px)); }
  .is-final .fx-card { width: min(64vw, calc(178cqh - 260px)); }
  .fx-bottom { padding-top: 56px; gap: 10px; }
  .fx-said { font-size: 19px; }
  .fx-mic { width: 96px; height: 96px; }
  .fx-example { font-size: 13px; }
  .fx-go { width: min(340px, calc(100vw - 2 * var(--gut))); font-size: 17px; padding: 14px 20px; }
  .has-specs .fx-asof { display: none; }
  .has-specs .fx-bottom { gap: 8px; }
  .is-final .fx-ph { aspect-ratio: 16 / 9; }
  .is-final .fx-meta { padding: 12px 14px 14px; gap: 4px; }
  .is-final .fx-name { font-size: 15px; }
  .is-final .fx-price { font-size: 22px; }
  .fx-foot { flex-direction: column; gap: 6px; font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-point, .is-listening .fx-ring, .is-listening .fx-mic::after, .fx-go { animation: none; }
}