/* style.css — a dark studio for the car, a clean sheet for the money. */

:root{
  --bg:#FCFCF9; --bg2:#F3F1EC; --ink:#0E0E0E; --muted:#6B6B6B; --line:#E6E3DD;
  --accent:#E8FF4A; --green:#0E9F6E; --stage:#0B0E14;
  --max:1140px; --radius:16px;
  --t-XXL:#111827; --t-XL:#1F3A8A; --t-L:#0E7490; --t-M:#4D7C0F; --t-S:#7C4A0F;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.55;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:"Space Grotesk",Inter,system-ui,sans-serif;letter-spacing:-.03em;margin:0}
.tabular{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:12px}
.center{text-align:center}
.kicker{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:0}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(252,252,249,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:10px 16px;display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.wordmark{display:flex;align-items:center;gap:10px;font-weight:800;font-size:14px;text-decoration:none;letter-spacing:-.02em}
.wordmark i{display:grid;place-items:center;width:34px;height:26px;border-radius:7px;background:var(--ink);
  color:#fff;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em}
.nav-links{display:none;gap:18px;font-size:13px;color:var(--muted)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--ink)}
@media(min-width:900px){.nav-links{display:flex}}
.nav-actions{display:flex;align-items:center;gap:8px}
.curr{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:#fff}
.curr button{border:0;background:transparent;border-radius:999px;padding:4px 10px;font:700 12px Inter,sans-serif;cursor:pointer}
.curr button.active{background:var(--ink);color:#fff}
.btn{display:inline-block;border:0;border-radius:999px;padding:10px 18px;font:700 13px Inter,sans-serif;
  cursor:pointer;text-decoration:none;transition:transform .12s,opacity .12s}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-ghost{border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn.wide{width:100%;margin-top:14px}

/* hero */
.hero{max-width:var(--max);margin:0 auto;padding:26px 16px 8px}
.hero h1{font-size:clamp(38px,8.5vw,76px);line-height:.94;margin:10px 0 12px}
.finish-line{font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(17px,2.6vw,24px);
  font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
.hero .lede{max-width:52ch;font-size:clamp(16px,2.2vw,20px);line-height:1.4;margin:0 0 18px;color:var(--ink)}
.hero .sub{max-width:64ch;color:var(--muted);font-size:15px;margin:0}

/* The pitch, under the car: one line of what this is, one of where it goes, then the ask.
   Centred and given room, because it is the only place on the page asking for a decision. */
.pitch{max-width:var(--max);margin:0 auto;padding:44px 16px 8px;text-align:center}
.pitch-lead{font-size:clamp(19px,3vw,30px);line-height:1.3;letter-spacing:-.01em;
  max-width:26ch;margin:0 auto 18px}
.pitch-sub{font-size:clamp(15px,2vw,19px);color:var(--muted);max-width:38ch;margin:0 auto 18px}
.pitch .finish-line{margin:0 0 18px}
.pitch .hero-cta{justify-content:center}

/* The reason the car matters, kept below the ask rather than in front of it. Width and
   height are on the tag so the page does not jump when it loads. */
.dream{margin:40px auto 0;max-width:560px}
.dream img{display:block;width:100%;height:auto;aspect-ratio:1448/1086;border-radius:var(--radius);
  border:1px solid var(--line);background:#f2f2f4}
.dream figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.meter{margin-top:18px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:14px}
.meter-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
.meter-top b{font-size:20px;font-variant-numeric:tabular-nums}
.over{color:var(--green);font-weight:800}
.bar{height:12px;margin-top:10px;padding:2px;background:var(--bg2);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--ink);transition:width .8s cubic-bezier(.22,1,.36,1)}
.bar i.over{background:var(--green)}
.meter-bottom{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:12px;color:var(--muted)}

/* stage */
.stage-wrap{max-width:var(--max);margin:0 auto;padding:12px 16px}
.stage{position:relative;height:min(74vh,720px);min-height:360px;overflow:hidden;border-radius:22px;
  border:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 12%,#ffffff 0%,#f7f6f2 46%,#eceae4 100%)}
@media(max-width:640px){.stage{height:min(62vh,520px);min-height:320px;border-radius:18px}}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}
.viewbar{position:absolute;left:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 24px)}
.viewbar button{border:1px solid var(--line);background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  color:var(--ink);border-radius:999px;padding:7px 12px;font:700 11px Inter,sans-serif;cursor:pointer}
.viewbar button:hover{border-color:var(--ink)}
.viewbar button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:640px){.viewbar{gap:4px}.viewbar button{padding:6px 9px;font-size:10px}}
.stage-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);max-width:calc(100% - 24px);
  background:rgba(255,255,255,.9);border:1px solid var(--line);color:var(--muted);font-size:11px;
  padding:7px 13px;border-radius:999px;pointer-events:none;text-align:center}
.model-status{position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.9);color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-size:11px;pointer-events:none}
@media(max-width:640px){.stage-hint{font-size:10px;padding:6px 10px;bottom:8px}}
.model-status:empty{display:none}
.error-banner{max-width:var(--max);margin:8px auto 0;padding:10px 14px;background:#FEF2F2;border:1px solid #FECACA;
  border-radius:12px;color:#991B1B;font-size:12px}

/* board */
.section{max-width:var(--max);margin:0 auto;padding:22px 16px}
.section h2{font-size:clamp(26px,4vw,34px)}
.table-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:flex-end}
.table-head p{margin:4px 0 0;font-size:13px}
.sticky-summary{position:sticky;top:52px;z-index:6;display:flex;justify-content:space-between;gap:12px;
  margin-top:12px;padding:9px 16px;border-radius:999px;background:var(--ink);color:#fff;font:700 12px Inter,sans-serif}
.pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:6px 11px;font:600 11px Inter,sans-serif;cursor:pointer;color:var(--ink)}
.pill i{font-style:normal;font-size:10px;font-weight:700;color:var(--muted);background:var(--bg2);
  border-radius:999px;padding:1px 6px}
.pill:hover{border-color:var(--ink)}
.pill.active{background:var(--ink);border-color:var(--ink);color:#fff}
.pill.active i{background:rgba(255,255,255,.18);color:#fff}

.table{margin-top:14px;display:grid;gap:10px}
.panel-group{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.panel-group>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;
  padding:11px 14px;background:var(--bg2);font-weight:700;font-size:13px;list-style:none}
.panel-group>summary::-webkit-details-marker{display:none}
.panel-group>summary::after{content:'▾';font-size:11px;color:var(--muted)}
.panel-group[open]>summary::after{content:'▴'}
.pg-sum{font-size:11px;color:var(--muted);font-weight:600;margin-left:auto}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:11px 14px;border-top:1px solid var(--line);
  cursor:pointer;transition:background .12s}
.row:hover,.row.hot{background:#FAFBF6}
.row.hot{box-shadow:inset 3px 0 0 var(--accent)}
@media(min-width:760px){.row{grid-template-columns:2fr 1.2fr 1fr 120px;align-items:center}}
.spot{display:flex;gap:10px;align-items:center;min-width:0}
.chip{flex:0 0 auto;display:grid;place-items:center;min-width:34px;height:26px;padding:0 6px;border-radius:7px;
  background:var(--ink);color:#fff;font:800 11px Inter,sans-serif}
.chip.t-XXL{background:var(--t-XXL)} .chip.t-XL{background:var(--t-XL)} .chip.t-L{background:var(--t-L)}
.chip.t-M{background:var(--t-M)} .chip.t-S{background:var(--t-S)}
.spot b{font-size:13px}
.rowsub{font-size:11px;color:var(--muted)}
.held{display:flex;align-items:center;gap:8px;font-size:12px;min-width:0}
.held span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.held img{width:26px;height:26px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px}
.bid{font-variant-numeric:tabular-nums}
.bid b{font-size:14px}
.bid small{display:block;color:var(--muted);font-size:11px}
@media(min-width:760px){.bid{text-align:right}.rowact{text-align:right}}
.btn-out{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:7px 14px;
  font:700 12px Inter,sans-serif;cursor:pointer}
.btn-out:hover{border-color:var(--ink)}
.btn-out.has-bid{background:var(--ink);color:#fff;border-color:var(--ink)}
.empty{padding:22px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed var(--line);border-radius:14px}

/* sections */
.how{max-width:var(--max);margin:0 auto;padding:8px 16px;display:grid;gap:12px}
@media(min-width:820px){.how{grid-template-columns:repeat(3,1fr)}}
.how-card{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:16px}
.how-card .step{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);
  color:#fff;font:700 12px Inter,sans-serif}
.how-card h3{margin:10px 0 6px;font-size:15px}
.how-card p{margin:0;color:var(--muted);font-size:13px}
.object{max-width:var(--max);margin:0 auto;padding:16px;display:grid;gap:14px}
@media(min-width:820px){.object{grid-template-columns:1.25fr .75fr}}
.obj-card{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:18px}
.obj-card.alt{background:var(--bg2)}
.obj-card h3{margin:0 0 8px;font-size:17px}
.obj-card p{margin:0 0 10px;color:var(--muted);font-size:13.5px;line-height:1.7}
.obj-card p:last-child{margin-bottom:0}
.faq{max-width:var(--max);margin:0 auto;padding:16px}
.faq h2{font-size:26px}
.faq details{border:1px solid var(--line);background:#fff;border-radius:13px;padding:14px;margin-top:9px}
.faq summary{display:flex;justify-content:space-between;gap:12px;font-weight:700;font-size:14px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary span{transform:rotate(45deg)}
.faq summary span{display:inline-block;transition:transform .18s;color:var(--muted)}
.faq p{margin:9px 0 0;color:var(--muted);font-size:13.5px;line-height:1.7}

.footer{max-width:var(--max);margin:24px auto 0;padding:18px 16px 40px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12px}
.founder{display:flex;gap:14px;align-items:center;border:1px solid var(--line);background:#fff;
  border-radius:var(--radius);padding:14px;margin-bottom:14px;color:var(--ink);font-size:13px}
.avatar{flex:0 0 auto;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,#E8E6E1,#DCE3D8);font-size:20px}

/* modal */
.modal{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:16px}
.modal.open{display:grid}
.modal-bg{position:absolute;inset:0;background:rgba(10,12,16,.55);backdrop-filter:blur(6px)}
.modal-card{position:relative;width:100%;max-width:520px;max-height:92vh;overflow:auto;background:#fff;
  border-radius:18px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.modal-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.modal-head b{font-size:17px;font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.02em}
.modal-min{font-weight:700;font-size:13px;margin-top:6px}
.x{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer}
.form-grid{display:grid;gap:10px}
@media(min-width:500px){.form-grid{grid-template-columns:1fr 1fr}}
.modal-card label{display:block;margin-top:10px;font-size:12px;font-weight:600}
.modal-card input{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px}
.modal-card input:focus{outline:2px solid var(--ink);outline-offset:1px}
.money{display:flex;align-items:center;gap:6px;margin-top:6px;border:1px solid var(--line);border-radius:10px;padding:0 10px}
.money input{border:0;margin:0;padding:10px 0}
.money input:focus{outline:none}
.preview{display:grid;place-items:center;min-height:66px;margin-top:10px;padding:10px;background:var(--bg2);
  border:1px dashed var(--line);border-radius:12px}
.preview img{max-height:58px;max-width:100%;object-fit:contain}
.err{margin-top:10px;padding:9px 11px;background:#FEF2F2;border:1px solid #FECACA;border-radius:10px;
  color:#991B1B;font-size:12px}

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

/* ── buy states ────────────────────────────────────────────────────────────── */
.btn-buy{border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:999px;
  padding:8px 20px;font:800 12px Inter,sans-serif;cursor:pointer;letter-spacing:.01em}
.btn-buy:hover{background:#000;transform:translateY(-1px)}
.tag-sold,.tag-held{display:inline-block;border-radius:999px;padding:5px 12px;
  font:700 11px Inter,sans-serif;letter-spacing:.03em}
.tag-sold{background:var(--green);color:#fff}
.tag-held{background:var(--bg2);color:var(--muted);border:1px solid var(--line)}
.row.is-sold{background:#F6FBF8}
.row.is-sold .bid b{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.row.is-held{opacity:.72}
.error-banner.good{background:#ECFDF5;border-color:#A7F3D0;color:#065F46}
.error-banner.warn{background:#FFFBEB;border-color:#FDE68A;color:#92400E}
.held a.owner{display:flex;align-items:center;gap:8px;text-decoration:none;min-width:0}
.held a.owner:hover span{text-decoration:underline}

/* ── phone: the car is the product, so it has to be on the first screen ─────── */
@media(max-width:640px){
  .hero{padding:14px 16px 4px}
  .hero h1{font-size:clamp(30px,10vw,40px);margin:6px 0 8px}
  .finish-line{font-size:16px;margin:0 0 8px}
  .hero .lede{font-size:15px;margin:0 0 10px}
  .pitch{padding:28px 16px 4px}
  .pitch-lead{font-size:19px;margin-bottom:12px}
  .pitch-sub{font-size:15px;margin-bottom:12px}
  .dream{margin-top:26px}
  .dream figcaption{font-size:13px;margin-top:8px}
  /* three lines of the pitch, then the car. The rest is still there for anyone who scrolls. */
  .hero .sub{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px}
  .meter{margin-top:12px;padding:11px}
  .meter-top b{font-size:17px}
  .hero-cta{margin-top:10px;gap:8px}
  .hero-cta .btn{padding:9px 14px;font-size:12px}
  .stage-wrap{padding:8px 12px}
  .visitor{display:none}
}