/* Brand My Escalade */

:root{
  --ink:#101013;
  --ink2:#5a5a63;
  --ink3:#93939c;
  --line:#e6e6ea;
  --line2:#f0f0f3;
  --bg:#ffffff;
  --surface:#f4f4f6;
  --dark:#121215;
  --blue:#1f6feb;
  --green:#16a34a;
  --maxw:1120px;
  --col:820px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}

h1,h2,h3{margin:0;font-weight:640;letter-spacing:-.035em;line-height:1.05}
h1{font-size:clamp(38px,6.2vw,66px)}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:17px;letter-spacing:-.02em;line-height:1.3}
p{margin:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.col{max-width:var(--col);margin:0 auto;padding:0 24px}
.muted{color:var(--ink2)}
.dim{color:var(--ink3)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.hdr.stuck{border-bottom-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:24px;height:56px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.022em;text-decoration:none;flex:none;white-space:nowrap}
.brand svg{flex:none}
.nav{display:flex;gap:18px;font-size:13.5px;color:var(--ink2);white-space:nowrap}
.nav a{text-decoration:none}
.nav a:hover{color:var(--ink)}
.hdr .spacer{flex:1}

.btn{
  display:inline-flex;align-items:center;gap:7px;
  border-radius:999px;border:1px solid transparent;
  padding:8px 16px;font-size:13.5px;font-weight:540;
  text-decoration:none;white-space:nowrap;
  transition:transform .12s ease,background .15s ease,opacity .15s ease;
}
.btn:active{transform:scale(.97)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2b2b31}
.btn-ghost{border-color:var(--line);background:#fff}
.btn-ghost:hover{background:var(--surface)}
.btn-lg{padding:12px 22px;font-size:15px}

/* ---------- hero ---------- */
.hero{padding:54px 0 0;text-align:center}
.live{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--ink2);margin-bottom:26px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}
  70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}
}
.hero .sub{margin:16px auto 0;max-width:560px;color:var(--ink2);font-size:16px}

.raise{max-width:460px;margin:34px auto 0}
.raise-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.raise-amt{font-size:26px;font-weight:640;letter-spacing:-.03em;color:var(--green)}
.raise-amt span{font-size:13px;font-weight:450;color:var(--ink2);letter-spacing:0;margin-left:6px}
.raise-pct{font-size:13px;color:var(--ink2)}
.raise-pct b{color:var(--ink);font-weight:600}
.bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--green);width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.raise-foot{margin-top:10px;font-size:12.5px;color:var(--ink3)}

.ticker{margin-top:22px;font-size:12.5px;color:var(--ink3);height:18px;overflow:hidden}
.ticker b{color:var(--ink2);font-weight:560}

/* ---------- truck canvas ---------- */
.stage{
  margin:38px auto 0;max-width:1000px;
  background:var(--surface);border-radius:22px;padding:18px;
}
.canvas{position:relative;width:100%;aspect-ratio:2340/968;border-radius:14px;overflow:hidden}
.canvas .truckimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.canvas.hide{display:none}

.spot{
  position:absolute;border-radius:4px;
  border:1px solid transparent;
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;text-align:center;line-height:1;
  transition:background .14s ease,border-color .14s ease,transform .12s ease;
}
/* --k is the canvas scale (canvas width / 1000), set by app.js, so every
   label scales in lockstep with the drawing and never truncates. */
.spot .mark{
  font-weight:700;letter-spacing:.01em;color:#f4f4f7;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  font-size:calc(var(--k,.6) * 13px);
}
.spot.xl .mark{font-size:calc(var(--k,.6) * 44px);letter-spacing:.07em}
.spot.l  .mark{font-size:calc(var(--k,.6) * 14px)}
.spot.m  .mark{font-size:calc(var(--k,.6) * 12px)}
.spot.s  .mark{font-size:calc(var(--k,.6) * 9.5px)}
.spot:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.6);transform:scale(1.04);z-index:5}
.spot.open{border:1px dashed rgba(125,178,255,.65);background:rgba(90,150,255,.15)}
.spot.open .mark{color:#c7ddff;font-weight:600;font-size:calc(var(--k,.6) * 11px)}
.spot.open:hover{background:rgba(90,150,255,.28);border-color:#9cc2ff}
.spot .price{display:block;font-weight:500;opacity:.85;margin-top:calc(var(--k,.6) * 2px);
  font-size:calc(var(--k,.6) * 9px)}
.spot.s .price{display:none}


.toggle{display:flex;justify-content:center;margin-top:20px}
.seg{display:inline-flex;background:var(--surface);border-radius:999px;padding:3px;gap:2px}
.seg button{
  border:0;background:transparent;border-radius:999px;
  padding:6px 15px;font-size:13px;font-weight:520;color:var(--ink2);
  transition:background .15s ease,color .15s ease;
}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.07)}
.stage-note{text-align:center;margin-top:11px;font-size:12.5px;color:var(--ink3)}

.hero-cta{display:flex;gap:12px;justify-content:center;margin:38px 0 0;flex-wrap:wrap}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.scrub{color:var(--line);transition:color .05s linear}
.scrub .w{color:inherit;transition:color .25s ease}
.scrub .w.on{color:var(--ink)}
.dark .scrub .w.on{color:#fff}

/* ---------- statement band ---------- */
.band{background:var(--dark);color:#fff;padding:150px 0;margin-top:110px}
.band h2{font-size:clamp(30px,4.4vw,52px);text-align:center;max-width:900px;margin:0 auto}
.band .scrub{color:#3a3a41}

/* ---------- sections ---------- */
section{scroll-margin-top:74px}
.sec{padding:110px 0}
.sec.alt{background:var(--surface)}
.eyebrow{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink2);margin-bottom:14px}
.sec-lead{margin-top:12px;color:var(--ink2);max-width:520px}
.sec-lead.small{font-size:13.5px;margin-top:14px;color:var(--ink3)}

/* ---------- auction table ---------- */
.tabs{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;margin:22px 0 18px}
.sec.alt .tabs{background:#fff}
.tabs button{border:0;background:transparent;border-radius:999px;padding:6px 15px;font-size:13px;font-weight:520;color:var(--ink2)}
.tabs button.on{background:var(--ink);color:#fff}

.tbl{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.trow{
  display:grid;grid-template-columns:1fr 118px 150px 118px 96px;
  align-items:center;gap:14px;padding:14px 18px;
  border-top:1px solid var(--line2);
}
.trow:first-child{border-top:0}
.thead{
  font-size:11.5px;color:var(--ink3);text-transform:none;
  padding-top:13px;padding-bottom:13px;background:#fff;
  border-bottom:1px solid var(--line);
}
.tname{display:flex;align-items:center;gap:11px;min-width:0}
.num{
  flex:none;width:22px;height:22px;border-radius:7px;background:var(--surface);
  display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--ink2);
}
.tname .t{min-width:0}
.tname .t b{display:block;font-weight:540;letter-spacing:-.01em}
.tname .t small{display:block;color:var(--ink3);font-size:11.5px;line-height:1.35}
.size{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2)}
.chip{
  flex:none;display:grid;place-items:center;min-width:22px;height:19px;padding:0 6px;
  border-radius:6px;background:var(--surface);font-size:10.5px;font-weight:640;color:var(--ink2);
}
.holder{font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:8px;min-width:0}
.holder .av{flex:none;width:22px;height:22px;border-radius:6px;background:var(--surface);display:grid;place-items:center;font-size:10px;font-weight:640;color:var(--ink2)}
.holder span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.holder.open{color:var(--ink3)}
.bidcell{text-align:right}
.bidcell b{display:block;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bidcell small{display:block;color:var(--ink3);font-size:11.5px}
.outbid{
  justify-self:end;border:1px solid rgba(31,111,235,.4);color:var(--blue);
  background:#fff;border-radius:999px;padding:6px 15px;font-size:12.5px;font-weight:540;
  transition:background .15s ease;
}
.outbid:hover{background:rgba(31,111,235,.07)}
.outbid.take{border-color:var(--ink);color:#fff;background:var(--ink)}
.outbid.take:hover{background:#2b2b31}

.hist{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.hrow{display:flex;align-items:center;gap:12px;padding:13px 18px;border-top:1px solid var(--line2);font-size:13px}
.hrow:first-child{border-top:0}
.hrow .hb{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.hrow .ht{color:var(--ink3);font-size:12px;width:56px;text-align:right}

/* ---------- steps ---------- */
.steps{margin-top:40px;display:grid;gap:34px;max-width:560px}
.step{display:flex;gap:18px}
.sdot{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:600}
.step p{color:var(--ink2);margin-top:5px}

/* ---------- spec ---------- */
.spec{margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;max-width:600px}
.spec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px;border-bottom:1px solid var(--line)}
.spec-hd b{font-weight:600;letter-spacing:-.02em}
.spec-hd .pr{font-weight:640;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.srow{display:flex;gap:16px;padding:12px 18px;border-top:1px solid var(--line2);font-size:13.5px}
.srow .k{width:110px;flex:none;color:var(--ink3)}
.srow .v{color:var(--ink2)}

/* ---------- faq ---------- */
.faq{margin-top:30px;max-width:600px}
.q{border-top:1px solid var(--line)}
.q:last-child{border-bottom:1px solid var(--line)}
.q button{
  width:100%;display:flex;align-items:center;gap:16px;justify-content:space-between;
  background:none;border:0;padding:18px 0;text-align:left;font-size:15px;font-weight:520;letter-spacing:-.012em;
}
.q .pm{flex:none;width:14px;height:14px;position:relative;opacity:.55}
.q .pm::before,.q .pm::after{content:"";position:absolute;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .22s ease}
.q .pm::before{left:0;top:6px;width:14px;height:1.6px}
.q .pm::after{top:0;left:6px;width:1.6px;height:14px}
.q.open .pm::after{transform:rotate(90deg);opacity:0}
.q .a{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.2,.7,.2,1)}
.q .a p{color:var(--ink2);padding-bottom:20px;max-width:56ch}

/* ---------- about ---------- */
.about{
  max-width:600px;margin-top:0;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:26px;
}
.about .who{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.about .who img{width:46px;height:46px;border-radius:50%;background:var(--surface)}
.about .who b{display:block;font-weight:600;letter-spacing:-.015em}
.about .who small{color:var(--ink3)}
.about p{color:var(--ink2)}
.about p + p{margin-top:12px}

/* ---------- footer ---------- */
.ft{border-top:1px solid var(--line);padding:34px 0;font-size:12.5px;color:var(--ink3)}
.ft .row{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.ft a{text-decoration:none}
.ft a:hover{color:var(--ink2)}
.ft .legal{margin-top:16px;max-width:640px;line-height:1.6}

/* ---------- modal ---------- */
.mask{
  position:fixed;inset:0;z-index:100;background:rgba(16,16,19,.4);
  backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.mask.on{opacity:1;pointer-events:auto}
.modal{
  width:100%;max-width:420px;background:#fff;border-radius:20px;padding:24px;
  transform:translateY(10px) scale(.98);transition:transform .22s cubic-bezier(.2,.7,.2,1);
  max-height:90vh;overflow:auto;
}
.mask.on .modal{transform:none}
.modal h3{font-size:19px;letter-spacing:-.025em}
.modal .mn{color:var(--ink3);font-size:12.5px;margin-top:5px}
.field{margin-top:14px}
.field label{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:6px}
.field input{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font:inherit;font-size:14px;background:#fff;outline:0;
}
.field input:focus{border-color:var(--ink)}
.mrow{display:flex;gap:10px;margin-top:20px}
.mrow .btn{flex:1;justify-content:center}
.mfine{margin-top:13px;font-size:11.5px;color:var(--ink3);line-height:1.5}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .nav{display:none}
  .sec{padding:78px 0}
  .band{padding:110px 0;margin-top:80px}
  .trow{grid-template-columns:1fr auto;gap:8px 12px;padding:14px 16px}
  .trow .size{grid-column:1;font-size:12px}
  .trow .holder{grid-column:1;order:5}
  .trow .bidcell{grid-column:2;grid-row:1;text-align:right}
  .trow .outbid{grid-column:2;order:6}
  .thead{display:none}
  .stage{padding:12px;border-radius:16px}
  .spot{font-size:8px;border-width:1px;border-radius:4px}
  .spot .sp{display:none}
  .hero{padding:34px 0 0}
}

/* ---------- sponsor wall ---------- */
.wall{
  max-width:1000px;margin:38px auto 0;padding:0 24px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.wtile{
  display:flex;align-items:center;gap:11px;
  border:1px solid var(--line);border-radius:14px;padding:14px 15px;
  background:#fff;text-decoration:none;min-width:0;
  transition:border-color .15s ease,transform .12s ease;
}
.wtile:hover{border-color:var(--ink);transform:translateY(-2px)}
.wtile img{
  width:30px;height:30px;flex:none;border-radius:7px;object-fit:contain;
  background:var(--surface);padding:3px;
}
.wtile .wt{min-width:0}
.wtile .wt b{display:block;font-weight:560;letter-spacing:-.012em;font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wtile .wt small{display:block;color:var(--ink3);font-size:11.5px;font-variant-numeric:tabular-nums}
@media (max-width:900px){ .wall{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .wall{grid-template-columns:repeat(2,1fr);gap:9px} .wtile{padding:11px 12px} }

/* ---------- table logo avatar ---------- */
.holder .av img{width:100%;height:100%;object-fit:contain;border-radius:5px}
.holder .av{overflow:hidden;background:var(--surface);padding:2px}

/* ---------- modal states ---------- */
.modal.done #mform{display:none}
.mfine.err{color:#c0392b}
.mfine.ok{color:var(--green)}
#apinote{margin-top:14px}

/* ---------- the post: stat row ---------- */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  max-width:560px;margin-top:26px;
}
.stat{border:1px solid var(--line);border-radius:14px;padding:16px 17px;background:#fff}
.stat b{display:block;font-size:26px;font-weight:640;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.stat small{display:block;color:var(--ink3);font-size:12px;margin-top:2px}
.sec.alt .stat{background:#fff}
@media (max-width:640px){ .stats{grid-template-columns:repeat(3,1fr);gap:8px} .stat{padding:12px} .stat b{font-size:19px} }

.wempty{
  grid-column:1/-1;border:1px dashed var(--line);border-radius:14px;
  padding:26px;text-align:center;color:var(--ink3);font-size:13.5px;background:#fff;
}

/* ---------- card step ---------- */
.deposit{
  border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin-top:16px;
  background:var(--surface);font-size:12.5px;color:var(--ink2);line-height:1.5;
}
.deposit b{color:var(--ink);font-weight:600}
#pay-el{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff}
.modal.done #mcard{display:none}

/* ---------- new hero copy ---------- */
.sub.lede{font-size:17px;line-height:1.65;color:var(--ink2);max-width:560px}
.sub.lede b{color:var(--ink);font-weight:600}
.sub.small{font-size:14.5px;margin-top:18px;max-width:520px;color:var(--ink3)}

/* ---------- four-up stat row ---------- */
.stats.four{grid-template-columns:repeat(4,1fr);max-width:660px}
@media (max-width:640px){ .stats.four{grid-template-columns:repeat(2,1fr)} }

/* ---------- who can advertise ---------- */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 26px;max-width:640px}
.tags span{
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-size:13px;color:var(--ink2);background:#fff;
}

/* ---------- closing band ---------- */
.band.closing{margin-top:0;padding:120px 0}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#e9e9ee}

@media (max-width:1180px){ .nav a[href="#post"]{display:none} }
@media (max-width:1080px){ .nav a[href="#sponsors"]{display:none} }
@media (max-width:980px){  .nav a[href="#buying"]{display:none} }

/* ---------- spin viewer ---------- */
.spinwrap{
  position:relative;width:100%;aspect-ratio:1000/563;border-radius:14px;overflow:hidden;
  background:#ececed;cursor:grab;touch-action:pan-y;user-select:none;
}
.spinwrap.dragging{cursor:grabbing}
.spinwrap.hide{display:none}
.spinwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.spinspots{position:absolute;inset:0;pointer-events:none}
.sspot{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;cursor:pointer;border-radius:3px;
  border:1px solid transparent;transition:background .12s ease,border-color .12s ease;
}
.sspot:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}
.sspot span{
  font-weight:700;color:#f4f4f7;white-space:nowrap;letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.55);line-height:1;
}
.sspot.open span{color:#c7ddff;font-weight:600}
.spinhint,.spinload{
  position:absolute;left:50%;transform:translateX(-50%);
  font-size:12px;color:var(--ink3);background:rgba(255,255,255,.82);
  padding:6px 13px;border-radius:999px;pointer-events:none;
}
.spinhint{bottom:14px;transition:opacity .3s ease}
.spinhint.gone{opacity:0}
.spinload{top:50%;transform:translate(-50%,-50%)}
.spinload.gone{display:none}

/* ---------- try your logo on ---------- */
.tryon{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.tryon-note{font-size:12px;color:var(--ink3);max-width:340px;text-align:left}
.tryon label{cursor:pointer}
.spot img, .sspot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.spot.mine, .sspot.mine{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.5);padding:2px}

/* plane badge in the auction table */
.pl{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:600;
  background:var(--surface);color:var(--ink2);margin-right:2px}
.pl.front{background:#e6f8ea;color:#1d7a37}
.pl.rear{background:#fdf0e2;color:#9a5a12}
.pl.roof{background:#eef0fb;color:#3a4a9a}