/* ============================================================
   BIG WIN CASH DTLA
   Black, brushed gold plates, downtown skyline.
   ============================================================ */

:root{
  --black:#0A0A0C;
  --panel:#141317;
  --panel-2:#1C1A20;
  --edge:rgba(214,175,96,.28);
  --edge-soft:rgba(255,255,255,.09);

  --bone:#F4F1E8;
  --dim:#A39C8E;
  --faint:#6E6A62;

  --gold-1:#F7E3A6;
  --gold-2:#E2BE68;
  --gold-3:#C89A34;
  --gold-4:#9A7020;
  --gold-line:#6E4E11;
  --gold-ink:#1A1206;

  --btc:#F7931A;
  --app:#00D64F;
  --red:#D8342A;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --col:460px;
  --pad:clamp(14px,4.4vw,20px);
  --r:12px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100svh;
  background:
    radial-gradient(120% 60% at 50% 0%, #17151a 0%, var(--black) 62%),
    var(--black);
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
body.locked{overflow:hidden}

img{display:block;max-width:100%}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none}

:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold-2);color:var(--gold-ink);padding:10px 16px;font-weight:700}
.skip:focus{left:0}

/* the column — this is a phone menu, held to width everywhere */
.col{
  width:100%;max-width:var(--col);
  margin-inline:auto;
  padding:clamp(16px,4vw,26px) var(--pad) clamp(34px,8vw,56px);
}

/* ---------------- skyline ---------------- */

.skyline{
  position:fixed;top:0;left:0;right:0;z-index:0;
  height:min(220px,26svh);
  pointer-events:none;
  mask-image:linear-gradient(180deg,#000 40%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 100%);
}
.skyline svg{width:100%;height:100%}
.skyline path{fill:rgba(200,154,52,.16)}

main{position:relative;z-index:1}

/* ---------------- crest ---------------- */

.crest{
  width:min(320px,86%);height:auto;
  margin:clamp(2px,2vw,14px) auto clamp(18px,4.6vw,28px);
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.75));
}
.crest-text{
  margin:8px 0 24px;text-align:center;
  font-family:var(--display);font-weight:800;font-size:44px;
  letter-spacing:-.02em;color:var(--gold-2);
}
.crest-text em{font-style:normal;color:var(--red)}

/* ---------------- gold plates ---------------- */

.stack{display:grid;gap:clamp(9px,2.4vw,12px)}

.plate{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;cursor:pointer;text-align:center;
  padding:clamp(15px,4vw,19px) 20px;
  border-radius:var(--r);
  border:1px solid var(--gold-line);
  background:linear-gradient(180deg,
    #F9E9BC 0%,
    var(--gold-2) 16%,
    var(--gold-3) 50%,
    var(--gold-4) 84%,
    #EBD292 100%);
  color:var(--gold-ink);
  font-family:var(--display);
  font-size:clamp(17px,4.6vw,21px);
  font-weight:700;
  letter-spacing:.005em;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -2px 5px rgba(90,60,8,.42),
    0 3px 0 #6A4B10,
    0 8px 18px rgba(0,0,0,.55);
  transition:transform .1s ease,filter .16s ease,box-shadow .1s ease;
}
/* inner bevel line */
.plate::after{
  content:"";position:absolute;inset:3px;border-radius:calc(var(--r) - 4px);
  border:1px solid rgba(255,255,255,.26);
  pointer-events:none;
}
.plate svg{width:19px;height:19px;flex:0 0 auto}
.plate:hover{filter:brightness(1.05)}
.plate:active{
  transform:translateY(3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 4px rgba(90,60,8,.4),0 0 0 #6A4B10,0 3px 10px rgba(0,0,0,.5);
}
.plate-block{margin-top:6px}

/* ---------------- driver promo ---------------- */

.promo{
  position:relative;isolation:isolate;display:block;overflow:hidden;
  margin-top:clamp(14px,3.6vw,18px);
  border:1px solid var(--edge);
  border-radius:var(--r);
  background:var(--panel);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.promo-shot{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.promo:hover .promo-shot{transform:scale(1.04)}
.promo-wash{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(10,10,12,.94) 4%,rgba(10,10,12,.52) 46%,rgba(10,10,12,.28) 100%);
}

.promo-name{
  position:relative;z-index:2;display:block;
  padding:clamp(26px,8vw,38px) 15px clamp(20px,5.4vw,28px);
  font-family:var(--display);font-weight:800;
  font-size:clamp(32px,9vw,44px);line-height:.98;letter-spacing:-.025em;
  color:#fff;
  text-shadow:0 3px 14px rgba(0,0,0,.95);
}
/* the terms strip is what sells the driver — give it room */
.promo-terms{
  position:relative;z-index:2;display:block;
  padding:14px 15px 15px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-3));
  border-top:1px solid var(--gold-line);
  color:var(--gold-ink);
  font-size:14px;line-height:1.5;
}
.promo-terms b{font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.promo-terms i{font-style:normal;opacity:.82}

/* ---------------- payment rails ---------------- */

.rails{
  list-style:none;display:flex;justify-content:center;gap:clamp(16px,6vw,30px);
  margin:clamp(18px,4.6vw,26px) 0 0;padding:0;
}
/* these route to the fund screen — one destination, so the flow doesn't split */
.rail{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:4px 2px;border-radius:10px;
  transition:transform .16s ease;
}
.rail:hover{transform:translateY(-2px)}
.rail > span{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  transition:color .16s ease;
}
.rail:hover > span{color:var(--dim)}
.rail svg{
  padding:11px;width:45px;height:45px;border-radius:50%;
  border:1px solid var(--edge-soft);
  transition:border-color .16s ease;
}
.rail-cash svg{color:var(--gold-2);background:radial-gradient(circle at 40% 32%,#3a2f14,#17140d);border-color:rgba(226,190,104,.4)}
.rail-btc  svg{color:var(--btc);background:radial-gradient(circle at 40% 32%,#3a2a10,#17120b);border-color:rgba(247,147,26,.4)}
.rail-app  svg{color:var(--app);background:radial-gradient(circle at 40% 32%,#0d3320,#0b170f);border-color:rgba(0,214,79,.4)}
.rail-cash:hover svg{border-color:rgba(226,190,104,.85)}
.rail-btc:hover  svg{border-color:rgba(247,147,26,.85)}
.rail-app:hover  svg{border-color:rgba(0,214,79,.85)}

/* ---------------- fine print ---------------- */

.fineprint{
  margin:clamp(20px,5vw,30px) 0 0;text-align:center;
  font-size:12.5px;line-height:1.65;color:var(--faint);
}

/* ---------------- inner pages ---------------- */

.back{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:16px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.back svg{width:15px;height:15px}
.back:hover{color:var(--bone)}

.title{
  margin:0 0 12px;
  font-family:var(--display);font-weight:800;
  font-size:clamp(30px,8.4vw,40px);line-height:1.02;letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--gold-2);
}

.lede{margin:0 0 22px;color:var(--dim);font-size:15.5px}

.rubric{
  margin:clamp(30px,7vw,42px) 0 14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);font-weight:400;
  padding-bottom:10px;border-bottom:1px solid var(--edge-soft);
}

.aside{margin:24px 0 0;font-size:14.5px;color:var(--dim);text-align:center}
.aside a{color:var(--gold-2);border-bottom:1px solid var(--edge)}

/* ---------------- switch ---------------- */

.switch{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  margin-bottom:16px;padding:5px;
  background:var(--panel);border:1px solid var(--edge-soft);border-radius:999px;
}
.switch button{
  padding:10px 8px;border-radius:999px;cursor:pointer;
  font-family:var(--display);font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  transition:background .16s ease,color .16s ease;
}
.switch button:hover{color:var(--bone)}
.switch button[aria-selected="true"]{
  background:linear-gradient(180deg,var(--gold-2),var(--gold-3));
  color:var(--gold-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}

/* ---------------- options ---------------- */

.options{display:grid;gap:12px}

.option{
  position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  padding:clamp(15px,4vw,19px);
  background:var(--panel);
  border:1px solid var(--edge-soft);border-radius:var(--r);
  transition:border-color .18s ease,background .18s ease;
}
.option:hover{border-color:var(--edge);background:var(--panel-2)}

.option-badge{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--edge-soft);margin-bottom:12px;
}
.option-badge svg{width:20px;height:20px}
.rail-cash.option-badge{color:var(--gold-2);background:radial-gradient(circle at 40% 32%,#3a2f14,#17140d)}
.option-badge svg{background:none;border:0;color:inherit}
.rail-btc.option-badge{color:var(--btc);background:radial-gradient(circle at 40% 32%,#3a2a10,#17120b)}
.rail-app.option-badge{color:var(--app);background:radial-gradient(circle at 40% 32%,#0d3320,#0b170f)}

.option-name{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(21px,5.6vw,25px);line-height:1.05;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--bone);
}
.option-flag{
  display:block;margin-top:4px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-2);
}
.option-say{display:block;margin-top:10px;font-size:14.5px;color:var(--dim)}
.option-say[hidden]{display:none}

.option-go{
  display:flex;align-items:center;gap:7px;margin-top:14px;
  font-family:var(--display);font-size:14px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--gold-2);
}
.option-go svg{width:16px;height:16px}
.option-go span[hidden]{display:none}
.option:hover .option-go{color:var(--gold-1)}

/* rail page: badge + the two ways in and out */
.page-badge{
  display:grid;place-items:center;width:58px;height:58px;margin:6px 0 16px;
  border:1px solid var(--edge);border-radius:16px;color:var(--gold-2);
  background:radial-gradient(circle at 40% 32%,#3a2f14,#17140d);
}
/* the badge itself is the plate, so the icon inside stays bare */
.page-badge svg{width:30px;height:30px;background:none;border:0;color:inherit}
.page-badge.rail-btc{color:var(--btc);background:radial-gradient(circle at 40% 32%,#3a2a10,#17120b);border-color:rgba(247,147,26,.4)}
.page-badge.rail-app{color:var(--app);background:radial-gradient(circle at 40% 32%,#0d3320,#0b170f);border-color:rgba(0,214,79,.4)}

.ways{display:grid;gap:11px;margin-top:22px}
.way{
  position:relative;display:grid;gap:3px;width:100%;
  padding:16px clamp(15px,4vw,19px);
  text-align:left;background:var(--panel);border:1px solid var(--edge);border-radius:14px;
  color:inherit;cursor:pointer;
  transition:border-color .16s ease,background .16s ease;
}
.way:hover{border-color:var(--gold-3);background:#17161b}
.way:active{transform:translateY(1px)}
.way-name{
  font-family:var(--display);font-weight:800;font-size:19px;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--bone);
}
.way-say{font-size:14px;color:var(--dim)}
.way svg{
  position:absolute;right:clamp(15px,4vw,19px);top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--gold-2);
}

/* live driver option */
.option-live{isolation:isolate;overflow:hidden;border-color:var(--edge);padding:0}
.option-shot{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
}
.option-wash{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,12,.62) 0%,rgba(10,10,12,.9) 52%,rgba(10,10,12,.97) 100%);
}
.option-live > *:not(.option-shot):not(.option-wash){position:relative;z-index:2}
.option-first{
  display:block;padding:clamp(15px,4vw,19px) clamp(15px,4vw,19px) 0;text-align:right;
  font-family:var(--display);font-weight:800;font-size:clamp(17px,4.6vw,21px);
  text-transform:uppercase;color:var(--gold-1);
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.option-name-big{padding:0 clamp(15px,4vw,19px);font-size:clamp(26px,7.4vw,34px);color:#fff}
.option-lede{display:block;padding:8px clamp(15px,4vw,19px) 0;font-size:14.5px;color:rgba(244,241,232,.86)}
.option-terms{
  display:grid;gap:5px;padding:14px clamp(15px,4vw,19px) 0;
  font-size:13px;color:var(--dim);
}
.option-terms b{color:var(--gold-2);font-weight:700}
.option-live .option-go{
  margin:14px 0 0;padding:13px clamp(15px,4vw,19px);
  border-top:1px solid var(--edge);
  background:linear-gradient(180deg,var(--gold-2),var(--gold-3));
  color:var(--gold-ink);
}
.option-live:hover .option-go{color:var(--gold-ink);filter:brightness(1.05)}

/* ---------------- driver page ---------------- */

.curb{
  margin:0 0 20px;overflow:hidden;position:relative;
  border:1px solid var(--edge);border-radius:var(--r);
}
.curb img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 42%}
.curb figcaption{
  position:absolute;top:10px;right:12px;
  font-family:var(--display);font-weight:800;font-size:clamp(16px,4.4vw,20px);
  text-transform:uppercase;color:var(--gold-1);
  text-shadow:0 2px 10px rgba(0,0,0,.95);
}

.terms{margin:0 0 26px;display:grid;gap:0}
.terms > div{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;
  padding:13px 0;border-top:1px solid var(--edge-soft);
}
.terms > div:last-child{border-bottom:1px solid var(--edge-soft)}
.terms dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);
  padding-top:2px;
}
.terms dd{margin:0;font-size:14.5px;color:var(--dim)}

/* ---------------- till ---------------- */

.till{
  background:var(--panel);border:1px solid var(--edge-soft);
  border-radius:var(--r);padding:clamp(16px,4vw,20px);
}
.till label{
  display:block;margin-bottom:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.till label span[hidden]{display:none}

.till-amount{
  display:flex;align-items:baseline;gap:8px;
  border-bottom:1px solid var(--edge);
  padding-bottom:8px;margin-bottom:14px;
}
.till-amount:focus-within{border-bottom-color:var(--gold-2)}
.till-sign{font-family:var(--display);font-weight:700;font-size:28px;color:var(--gold-2);line-height:1}
.till-amount input{
  flex:1 1 auto;min-width:0;background:none;border:none;outline:none;color:var(--bone);
  font-family:var(--display);font-weight:800;
  font-size:clamp(36px,10vw,48px);line-height:1.05;letter-spacing:-.03em;padding:0;
}
.till-amount input::placeholder{color:#3E3B36}
.till-amount input::-webkit-outer-spin-button,
.till-amount input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.till-amount input[type=number]{-moz-appearance:textfield}

.till-quick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.till-quick button{
  cursor:pointer;padding:8px 15px;border-radius:999px;
  font-family:var(--mono);font-size:13px;color:var(--dim);
  border:1px solid var(--edge-soft);
  transition:color .16s ease,border-color .16s ease;
}
.till-quick button::before{content:"$"}
.till-quick button:hover{color:var(--bone);border-color:var(--edge)}
.till-quick button[aria-pressed="true"]{color:var(--gold-2);border-color:var(--gold-3);background:rgba(200,154,52,.1)}

.till-msg{margin:14px 0 0;font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--faint)}
.till-msg.error{color:#FF8B80}
.till-msg.ok{color:#6FD79A}

/* ---------------- q & a ---------------- */

.qa{border-top:1px solid var(--edge-soft)}
.qa details{border-bottom:1px solid var(--edge-soft)}
.qa summary{
  list-style:none;cursor:pointer;position:relative;
  padding:16px 40px 16px 0;
  font-size:15.5px;font-weight:500;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:1.5px;background:var(--gold-2)}
.qa summary::before{
  content:"";position:absolute;right:11px;top:50%;margin-top:-5px;
  width:1.5px;height:11px;background:var(--gold-2);transition:opacity .18s ease;
}
.qa details[open] summary::before{opacity:0}
.qa p{margin:0;padding:0 0 18px;font-size:14.5px;color:var(--dim)}
.qa b{color:var(--bone);font-weight:600}

/* ---------------- sheet ---------------- */

.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:end center}
.modal[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(0,0,0,.78)}

.sheet{
  position:relative;width:100%;max-width:var(--col);
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:18px 18px 0 0;
  padding:26px var(--pad) calc(22px + env(safe-area-inset-bottom));
  text-align:center;
  animation:up .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}

.sheet-x{
  position:absolute;top:12px;right:12px;cursor:pointer;
  width:30px;height:30px;display:grid;place-items:center;color:var(--faint);
}
.sheet-x svg{width:15px;height:15px}
.sheet-x:hover{color:var(--bone)}

.sheet-eyebrow{margin:0 0 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.sheet h2{margin:0 0 8px;font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;text-transform:uppercase;color:var(--gold-2)}
.sheet > p{margin:0 0 18px;font-size:14.5px;color:var(--dim)}

.sheet-quote{text-align:left;border-left:2px solid var(--gold-3);padding-left:13px;margin-bottom:18px}
.sheet-quote[hidden]{display:none}
.sheet-quote span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.sheet-quote code{display:block;font-family:var(--mono);font-size:13.5px;color:var(--bone)}

.sheet-fine{margin:13px 0 0;font-size:12px;color:var(--faint)}
.sheet-fine[hidden]{display:none}

/* ---------------- wider screens ---------------- */

@media (min-width:700px){
  :root{--col:520px}
  .skyline{height:min(300px,32svh)}
  .crest{width:min(380px,80%)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}