:root {
  --cyc: #d6d7d3;        /* studio sweep */
  --paper: #eeefec;      /* livery sheet */
  --ink: #1c1f24;        /* graphite */
  --ink-2: #5d6168;
  --rule: #c3c5c0;
  --hair: rgba(28,31,36,.16); /* hairline borders */
  --glass: rgba(244,245,242,.82); /* panels over the studio backdrop */
  --cobalt: #2340ff;     /* open spot, primary action */
  --decal: #ffd60a;      /* held, race-number yellow */
  --ok: #0f7b3a;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --gutter: clamp(16px, 3vw, 36px);
  --sheet-w: 288px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cyc); color: var(--ink); font: 15px/1.45 var(--body); }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
button { font: inherit; color: inherit; }

/* ---------- one screen, no page scroll ---------- */
.app { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 42% 46%, #f3f4f1 0%, #e4e5e1 45%, #cdcfca 100%); }
#car { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#car.dragging { cursor: grabbing; }
#callouts, #labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#callouts line { stroke: rgba(28,31,36,.55); stroke-width: 1; }
#callouts circle { fill: var(--ink); }
.loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; color: var(--ink-2); font-size: 14px; }
.loading[hidden] { display: none; }

.tag {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer;
  background: #fff; border: 1px solid var(--hair); border-radius: 3px; box-shadow: 0 2px 8px rgba(28,31,36,.08);
  padding: 3px 8px 4px; font: 500 12px/1.2 var(--body); white-space: nowrap;
  display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: baseline;
  transition: opacity .2s;
}
.tag b { font: 700 15px/1 var(--display); letter-spacing: .01em; }
.tag .p { font-variant-numeric: tabular-nums; }
.tag[data-status="open"] .p { color: var(--cobalt); font-weight: 600; }
.tag[data-status="held"] { background: var(--decal); }
.tag[data-status="claimed"], .tag[data-status="live"] { background: var(--ink); color: var(--paper); }
.tag.sel { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.tag.hidden { opacity: 0; pointer-events: none; visibility: hidden; } /* visibility keeps hidden tags out of the tab order */

.masthead { position: absolute; left: var(--gutter); top: var(--gutter); max-width: min(460px, 40vw); pointer-events: none; }
.masthead h1 { margin: 0; font: 900 clamp(38px, 4.4vw, 68px)/.88 var(--display); letter-spacing: -.005em; text-transform: uppercase; }
.lede { margin: 14px 0 0; max-width: 38ch; color: var(--ink-2); font-size: 15px; line-height: 1.5; }

.topnav { position: absolute; top: var(--gutter); right: calc(var(--sheet-w) + var(--gutter) * 2); display: flex; gap: 4px; }
.topnav button { all: unset; cursor: pointer; padding: 6px 10px; font-weight: 500; font-size: 14px; border-radius: 2px; }
.topnav button:hover { background: rgba(28,31,36,.08); }
.topnav button:focus-visible { outline: 3px solid var(--cobalt); }

.tally { position: absolute; left: var(--gutter); bottom: var(--gutter); width: min(400px, calc(100% - 32px)); }
.tally-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.raised { font: 900 40px/1 var(--display); font-variant-numeric: tabular-nums; }
.of { color: var(--ink-2); }
.bar { height: 6px; background: rgba(28,31,36,.1); border-radius: 3px; margin: 8px 0 6px; position: relative; }
.bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--cobalt); border-radius: 3px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.tally-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.fine { position: absolute; right: calc(var(--sheet-w) + var(--gutter) * 2); bottom: var(--gutter); margin: 0; font-size: 12px; color: var(--ink-2); }

/* ---------- livery sheet: fits the screen, no scrolling ---------- */
.sheet {
  position: absolute; top: var(--gutter); right: var(--gutter); bottom: var(--gutter); width: var(--sheet-w);
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hair); border-radius: 6px; box-shadow: 0 20px 50px rgba(28,31,36,.08);
  display: flex; flex-direction: column; overflow: hidden;
}
.sheet h2 { margin: 0; padding: 16px 18px 12px; font: 800 22px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; border-bottom: 1px solid var(--hair); }
.spot-list { list-style: none; margin: 0; padding: 4px 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; overflow: hidden; }
.spot-list button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 10px; padding: 3px 18px;
}
.spot-list button:hover { background: rgba(35,64,255,.06); }
.spot-list button[aria-current="true"] { background: rgba(35,64,255,.1); box-shadow: inset 2px 0 0 var(--cobalt); }
.spot-list button:focus-visible { outline: 3px solid var(--cobalt); outline-offset: -3px; }
.spot-list .dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--cobalt); }
.spot-list [data-status="open"] .dot { background: transparent; }
.spot-list [data-status="held"] .dot { background: var(--decal); border-color: #8a6d00; }
.spot-list [data-status="claimed"] .dot, .spot-list [data-status="live"] .dot { background: var(--ink); border-color: var(--ink); }
.spot-list .n { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-list .p { font: 600 13.5px/1.1 var(--body); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.spot-list [data-status="claimed"] .p, .spot-list [data-status="live"] .p { text-decoration: line-through; color: var(--ink-2); }
.spot-list .tilesrow { border-top: 1px solid var(--hair); margin-top: 4px; padding-top: 8px; }
.sheet .legend { display: flex; gap: 14px; padding: 10px 18px 12px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--cobalt); margin-right: 5px; vertical-align: 0; }
.legend .h { background: var(--decal); border-color: #8a6d00; }
.legend .s { background: var(--ink); border-color: var(--ink); }

/* ---------- detail card ---------- */
.detail {
  position: absolute; right: calc(var(--sheet-w) + var(--gutter) * 2); bottom: calc(var(--gutter) + 28px); width: 330px;
  max-height: calc(100% - var(--gutter) * 2 - 60px); overflow-y: auto;
  background: rgba(250,250,248,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hair); border-radius: 6px; box-shadow: 0 24px 60px rgba(28,31,36,.16); padding: 20px; z-index: 5;
}
.detail .close, .sheet-dialog .close { all: unset; position: absolute; right: 10px; top: 6px; font-size: 26px; cursor: pointer; line-height: 1; padding: 4px; }
.detail-group { margin: 0; font-size: 13px; color: var(--ink-2); }
.detail h2 { margin: 2px 0 0; font: 800 32px/1 var(--display); text-transform: uppercase; }
.detail-price { margin: 6px 0 0; font: 700 26px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--cobalt); }
.detail-pitch { margin: 8px 0 0; }
.detail-status { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn { all: unset; box-sizing: border-box; cursor: pointer; padding: 10px 16px; font-weight: 600; font-size: 14px; border: 1px solid rgba(28,31,36,.3); border-radius: 4px; text-align: center; }
.btn.primary { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.btn.primary:hover { background: #1730d6; }
.btn.ghost:hover { background: #e2e4e0; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.linkish { all: unset; cursor: pointer; margin-top: 10px; color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; display: inline-block; }
.reserve { margin-top: 14px; border-top: 1px dashed var(--rule); padding-top: 12px; display: grid; gap: 9px; }
.reserve p { margin: 0; font-size: 13px; }
.reserve label { display: grid; gap: 3px; font-size: 13px; color: var(--ink-2); }
.reserve input { font: inherit; color: var(--ink); padding: 9px 10px; border: 1px solid rgba(28,31,36,.3); background: #fff; border-radius: 4px; }
.form-msg { min-height: 1.2em; font-size: 13px; margin: 0; }
.form-msg.err { color: #b3261e; }
.form-msg.good { color: var(--ok); }

/* ---------- overlays ---------- */
.sheet-dialog { width: min(640px, calc(100% - 32px)); max-height: calc(100% - 48px); border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: 24px 28px; box-shadow: 8px 8px 0 var(--ink); }
.sheet-dialog.wide { width: min(980px, calc(100% - 32px)); }
.sheet-dialog::backdrop { background: rgba(214,215,211,.7); backdrop-filter: blur(3px); }
.sheet-dialog h2 { margin: 0 0 12px; font: 900 34px/1 var(--display); text-transform: uppercase; }
.sheet-dialog h2 + p { margin-top: -4px; color: var(--ink-2); }
.steps { margin: 0 0 24px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; }
.steps li::before { content: counter(s); font: 900 28px/1 var(--display); color: var(--cobalt); }
.sheet-dialog dl { margin: 0; display: grid; gap: 4px; }
.sheet-dialog dt { font-weight: 600; margin-top: 8px; }
.sheet-dialog dd { margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); background: #fff; border: 1px solid var(--ink); padding: 8px; }
.tile {
  all: unset; aspect-ratio: 1; cursor: pointer; position: relative;
  outline: 1px dashed var(--rule); outline-offset: -2px; display: grid; place-items: center;
  font-size: 9px; color: var(--ink-2); font-variant-numeric: tabular-nums; overflow: hidden;
}
.tile:hover { background: #dfe3ff; }
.tile:focus-visible { outline: 3px solid var(--cobalt); outline-offset: -3px; }
.tile[data-status="held"] { background: var(--decal); }
.tile[data-status="claimed"] { background: var(--ink); color: var(--paper); }
.tile[data-status="live"] { outline-style: solid; }
.tile img { width: 86%; height: 86%; object-fit: contain; }

/* ---------- phones: car on top, swipe rail of spots at the bottom ---------- */
@media (max-width: 900px) {
  :root { --sheet-w: 0px; --gutter: 16px; }
  .masthead { max-width: calc(100% - 32px); }
  .masthead h1 { font-size: clamp(34px, 10.5vw, 56px); }
  .lede { font-size: 14px; margin-top: 8px; }
  .topnav { top: 8px; right: 6px; left: auto; bottom: auto; }
  .topnav button { font-size: 13px; padding: 6px 8px; }
  .tally { bottom: 112px; width: calc(100% - 32px); }
  .raised { font-size: 34px; }
  .fine { display: none; }
  .sheet { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 92px; border-width: 1px 0 0; border-radius: 0; box-shadow: none; padding-bottom: env(safe-area-inset-bottom); }
  .sheet h2, .sheet .legend { display: none; }
  .spot-list { flex-direction: row; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 10px 12px; gap: 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .spot-list li { flex: 0 0 auto; scroll-snap-align: start; }
  .spot-list button { grid-template-columns: 8px auto; grid-template-rows: auto auto; width: auto; min-width: 124px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 6px; background: #fff; row-gap: 2px; }
  .spot-list .p { grid-column: 2; text-align: left; }
  .spot-list .tilesrow { border: 0; margin: 0; padding: 0; }
  .detail { left: 0; right: 0; bottom: 0; width: auto; max-height: 72%; border-radius: 14px 14px 0 0; box-shadow: 0 -12px 40px rgba(28,31,36,.18); border-width: 1px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .tiles { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .sheet-dialog { padding: 20px; }
  .tag { font-size: 11px; padding: 2px 5px; }
  .tag b { font-size: 14px; }
}
@media (max-height: 640px) and (min-width: 901px) {
  .lede { display: none; }
  .spot-list .n { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- story and trust pieces ---------- */
.wordmark { margin: 0 0 10px; font: 700 18px/1 var(--display); letter-spacing: .02em; color: var(--cobalt); }
.live { margin: 14px 0 0; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: 5px 12px; font-size: 13px; pointer-events: auto; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--decal); box-shadow: 0 0 0 2px #8a6d00 inset; }
.bar .tick { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 1px solid var(--ink); }
.bar .tick b { position: absolute; bottom: 14px; left: -1px; white-space: nowrap; font: 500 11px/1 var(--body); color: var(--ink-2); }
.tally .bar { margin-top: 26px; }
.promise { margin: 8px 0 0; font-size: 13px; color: var(--ink); max-width: 46ch; }
.detail-math { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.story p { margin: 0 0 10px; max-width: 62ch; }
.story .sig { color: var(--ink-2); font-size: 14px; margin-bottom: 22px; }
@media (max-width: 900px) {
  .wordmark { font-size: 15px; margin-bottom: 6px; }
  .lede { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .promise { display: none; }
  .tally { bottom: 108px; }
  .tally .bar { margin-top: 22px; }
}

/* ---------- official copy pieces (2026-10-16 copy pass) ---------- */
.wordmark span { margin-left: 10px; font: 500 12px/1 var(--body); letter-spacing: 0; color: var(--ink-2); }
.proof { margin: 10px 0 0; max-width: 40ch; font-size: 14px; font-weight: 500; color: var(--ink); }
.topnav a { padding: 6px 10px; font-weight: 500; font-size: 14px; text-decoration: none; border-radius: 2px; }
.topnav a:hover { background: rgba(28,31,36,.08); }
.detail-get { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
.detail-get li { position: relative; padding-left: 16px; }
.detail-get li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt); }
.trust { margin: 10px 0 0; font-size: 12px; color: var(--ink-2); }
.invoice { margin: 6px 0 0; font-size: 12px; color: var(--ink-2); }
.kit-lead { margin: -4px 0 14px; max-width: 58ch; color: var(--ink-2); }
.sheet-dialog h3 { margin: 18px 0 8px; font: 700 20px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.sheet-dialog { overflow-y: auto; }
@media (max-width: 900px) {
  .wordmark span { display: none; }
  .proof { display: none; }
  .topnav a { display: none; }
  .detail-get { font-size: 12px; }
}
/* Numbered steps: number in the gutter, text flows as one block (a grid split loose words into cells). */
.sheet-dialog .steps li { display: block; position: relative; padding-left: 34px; }
.sheet-dialog .steps li::before { position: absolute; left: 0; top: -2px; }
@media (max-width: 900px) { .lede { -webkit-line-clamp: 4; } }

/* ---------- review loop round 1 (2026-10-16) ---------- */
.tiles-chip { display: none; }
.site { margin-top: 8px; }
@media (max-width: 900px) {
  /* Trust lines stay visible on phones: the refund promise is the strongest lever with buyers who don't know the seller. */
  .promise { display: block; font-size: 12px; margin-top: 6px; }
  .tally { bottom: 100px; }
  .fine { display: block; left: 16px; right: 16px; bottom: 76px; font-size: 10px; text-align: left; }
  .tiles-chip { display: inline-block; margin-top: 8px; padding: 6px 10px; border: 1px solid var(--cobalt); background: #fff; color: var(--cobalt); font: 600 13px/1 var(--body); border-radius: 2px; pointer-events: auto; cursor: pointer; }
  /* After a try-on the card drops to a peek so the logo on the car stays visible; tap the card to bring it back. */
  .detail.peek { max-height: 30%; overflow: hidden; }
  .detail.peek .detail-get, .detail.peek .detail-math, .detail.peek .detail-pitch, .detail.peek .trust, .detail.peek .invoice { display: none; }
  .tiles { grid-template-columns: repeat(6, minmax(44px, 1fr)); }
}
#d-name:focus:not(:focus-visible) { outline: none; }
@media (max-width: 900px) {
  .tally { bottom: 122px; }
  .fine { bottom: 76px; line-height: 1.35; }
}
@media (max-width: 900px) {
  .fine { bottom: 100px; }
  .tally { bottom: 136px; }
}