/* TD5//TUNE — terminal UI. Black canvas, monospace, muted greys, blinking cursors. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap');

:root{
  --bg:#1A301E; --ink:#D2AA8E; --bright:#F8CD41;
  --dim:#B78355; --dimmer:#7a5a3c; --line:#2b472f; --err:#e0795a;
  --tile-bg:#122415;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:15px;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;
  letter-spacing:.01em}
a{color:inherit;text-decoration:none}

.screen{max-width:720px;margin:0 auto;padding:60px 28px 100px}
.site-head{margin:0 0 34px}
.brand,.top-brand{display:inline-flex;align-items:center;gap:9px;color:var(--bright);font-weight:800;font-size:16px}
.brand:hover,.top-brand:hover{color:var(--ink)}
.brand-mark{display:block;width:22px;height:26px;object-fit:contain;flex:0 0 auto;
  transform:rotate(-58deg);transform-origin:center}
.prompt{color:var(--dim)}                 /* > and // and └─ glyphs */
.bright{color:var(--bright)}
.dim{color:var(--dim)}
.dimmer{color:var(--dimmer)}
.cursor::after{content:"_";animation:blink 1.1s step-end infinite;color:var(--ink)}
@keyframes blink{50%{opacity:0}}

.top{color:var(--bright);font-weight:500;margin-bottom:8px}
.intro{color:var(--dim);margin-bottom:48px}

.step{margin:0 0 40px}
.step-label{color:var(--dim);margin-bottom:14px}
.step-label b{color:var(--ink);font-weight:500}

/* selectable option rows (radios) */
.opt{display:block;cursor:pointer;padding:3px 0;color:var(--ink)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .mark{color:var(--dimmer);margin-right:4px}     /* // */
.opt .tag{color:var(--dim)}
.opt .sub{color:var(--dim);padding-left:26px;display:block}
.opt:hover{color:var(--bright)}
.opt:hover .mark{color:var(--dim)}
.opt.disabled{cursor:not-allowed;color:var(--dimmer)}
.opt.disabled:hover{color:var(--dimmer)}
.opt.disabled .sub,.opt.disabled .tag{color:var(--dimmer)}
.opt input:checked ~ .row{color:var(--bright)}
.opt input:checked ~ .row .mark{color:var(--bright)}
.opt input:checked ~ .row .mark::before{content:"\25b8 ";color:var(--bright)} /* ▸ */
.opt .row{transition:color .12s}

/* vehicle row with small thumb */
.vehicle{display:flex;gap:16px;align-items:flex-start}
.thumb{width:104px;height:70px;object-fit:cover;filter:grayscale(.55) contrast(1.05) brightness(.9);
  border:1px solid var(--line);flex:0 0 auto;margin-top:2px}

/* file upload */
.file label{cursor:pointer;color:var(--ink)}
.file label:hover{color:var(--bright)}
.file input{position:absolute;opacity:0;width:0;height:0}
.file .box{display:inline-block;border:1px solid var(--dimmer);padding:8px 16px;color:var(--ink)}
.file label:hover .box{border-color:var(--dim);color:var(--bright)}
.file .fname{color:var(--dim);margin-left:12px}
.file .fname.set{color:var(--bright)}

/* pay button */
.pay{display:inline-block;border:1px solid var(--dim);background:transparent;color:var(--bright);
  font:inherit;cursor:pointer;padding:12px 22px;transition:all .15s}
.pay:hover{border-color:var(--bright);background:var(--bright);color:var(--bg)}
.pay:disabled,.pay.disabled{color:var(--dimmer);border-color:var(--line);cursor:not-allowed;
  background:transparent;pointer-events:none;text-decoration:none}

.foot{color:var(--dimmer);margin-top:56px;border-top:1px solid var(--line);padding-top:22px;font-size:13px}
.err{color:var(--err)}
.ok{color:var(--bright)}
.link{color:var(--dim);border-bottom:1px solid var(--dimmer)}
.link:hover{color:var(--bright);border-color:var(--dim)}
ol{padding-left:20px;color:var(--dim)}ol li{margin:.35em 0}
.blk{margin:18px 0}
.screen > p.dim,.blk.prompt + p.dim{margin-left:3ch;max-width:58ch}

/* ---------- stepper nav ---------- */
.stepper{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:36px;font-size:13px}
.stepper .s{color:var(--dimmer)}
.stepper .s.done{color:var(--dim)}
.stepper .s.active{color:var(--bright)}
.stepper .sep{color:var(--dimmer)}
.step-h{color:var(--dim);margin-bottom:8px;font-size:20px;font-weight:700;letter-spacing:-.01em}
.step-h b{color:var(--ink);font-weight:800}
.step-sub{color:var(--dim);margin-bottom:26px}

/* value-prop hero */
.hero{margin:4px 0 46px;max-width:660px}
.hero h1{font-weight:800;font-size:clamp(25px,3.6vw,36px);line-height:1.16;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 16px}
.hero h1 .gl{color:var(--bright)}
.hero h1 .pre{color:var(--dimmer);font-weight:700}
.hero p{color:var(--dim);font-size:16px;margin:0;max-width:56ch}
.hero .nanocom-qualifier{margin-top:14px;color:var(--bright);font-size:14px}

/* ---------- selector tiles ---------- */
.tiles{display:flex;flex-wrap:wrap;gap:20px;margin:6px 0 30px}
.tile{width:200px;background:none;border:1px solid var(--line);padding:0;margin:0;cursor:pointer;
  font:inherit;color:var(--ink);text-align:left;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--bright);transform:translateY(-2px)}
.tile.sel{border-color:var(--bright)}
.tile .art{display:flex;align-items:center;justify-content:center;height:160px;background:var(--tile-bg);
  overflow:hidden;border-bottom:1px solid var(--line);position:relative}
.tile .art img.car{width:100%;height:100%;object-fit:contain;padding:8px;filter:grayscale(.5) brightness(.9)}
.tile.sel .art img.car{filter:none}
.tile .cap{display:block;padding:12px 14px;line-height:1.4}
.tile .cap .name{color:var(--ink)}
.tile.sel .cap .name{color:var(--bright)}
.tile .cap .meta{color:var(--dim);font-size:12px}
.tile .cap .price{color:var(--bright)}

/* chillies */
.chillies{display:flex;gap:3px;align-items:center;justify-content:center;padding:16px}
img.chilli{height:64px;width:auto;display:block;transform:rotate(-58deg);transform-origin:center}
.tile.soon img.chilli{filter:grayscale(1) brightness(.6);opacity:.6}

/* coming soon (dashed + overlay) */
.tile.soon{border-style:dashed;border-color:var(--dimmer);cursor:not-allowed}
.tile.soon:hover{transform:none;border-color:var(--dimmer)}
.tile.soon .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(18,36,21,.62);color:var(--bright);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.tile.soon{cursor:default}
.tile.soon .cap .name{color:var(--dimmer)}
.tile.soon .cap .meta{color:var(--dimmer)}
/* request-a-vehicle tile */
.tile.req{border-style:dashed;border-color:var(--dimmer);text-decoration:none}
.tile.req:hover{border-color:var(--bright)}
.tile.req .cap .name{color:var(--dim)}
.tile.req:hover .cap .name{color:var(--bright)}
.req-plus{font-size:48px;font-weight:300;color:var(--dimmer);line-height:1}
.tile.req:hover .req-plus{color:var(--bright)}

/* request-a-vehicle form */
.rq label{display:block;color:var(--dim);margin:16px 0 6px}
.rq input,.rq textarea{width:100%;max-width:460px;background:var(--tile-bg);border:1px solid var(--line);
  color:var(--ink);font:inherit;padding:10px 12px}
.rq input:focus,.rq textarea:focus{outline:none;border-color:var(--bright)}
.rq textarea{min-height:80px;resize:vertical}
.rq .check{display:flex;gap:10px;align-items:flex-start;margin-top:22px;max-width:520px;
  color:var(--dim);cursor:pointer;font-weight:400}
.rq .check input{width:16px;height:16px;flex:0 0 auto;margin-top:3px;accent-color:var(--bright);cursor:pointer}
.rq .check:hover{color:var(--ink)}

/* tune summary brief */
.tune-brief{border:1px solid var(--line);background:var(--tile-bg);padding:24px 26px;margin:0 0 30px;max-width:520px}
.tb-head{color:var(--dim);font-size:14px;font-weight:700;margin-bottom:14px}
.tb-head b{color:var(--ink);font-weight:800}
.tb-body p{color:var(--dim);margin:0 0 14px;font-size:13px;line-height:1.55}
.tb-points{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.tb-item{color:var(--ink);font-size:13px}
.tb-label{display:inline-block;width:68px;color:var(--dimmer);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.06em}
.tb-feel{color:var(--dim);font-size:13px;border-top:1px solid var(--line);padding-top:14px;margin-bottom:0}
.tune-brief .pay{margin-top:20px;width:100%}
details summary{cursor:pointer;width:fit-content}
details summary::marker{color:var(--dimmer)}
.notify-form{margin-top:-12px;margin-bottom:30px}

.backlink{display:block;margin-top:16px;color:var(--dim);border-bottom:1px solid var(--dimmer);
  font-size:13px;width:fit-content}
.backlink:hover{color:var(--bright);border-color:var(--dim)}

/* how-to guide */
.guide{margin-top:56px;border-top:1px solid var(--line);padding-top:34px}
.guide-h{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:6px}
.guide-h .p{color:var(--dimmer);font-weight:700}
.guide-sub{color:var(--dim);margin-bottom:26px}
.guide-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.gcol{border:1px solid var(--line);background:var(--tile-bg);padding:22px 24px}
.gcol h3{font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--bright);
  text-transform:none;margin:0 0 16px}
.gstep{display:grid;grid-template-columns:30px 1fr;gap:8px;margin:0 0 13px;color:var(--ink)}
.gstep .gn{color:var(--dim);font-weight:700}
.gstep b{color:var(--ink);font-weight:700}
.gstep .path{color:var(--dim)}
.gnote{margin-top:18px;color:var(--dim);border-left:2px solid var(--bright);padding-left:12px;font-size:13px}
/* ---------- mobile (≤640px) ---------- */
@media(max-width:640px){

  /* --- layout & spacing --- */
  .screen{padding:28px 16px 56px}
  .site-head{margin-bottom:24px}
  .intro{margin-bottom:28px}
  .step{margin-bottom:28px}
  .step-sub{margin-bottom:18px}
  .blk{margin:14px 0}

  /* --- typography --- */
  .step-h{font-size:18px;margin-bottom:6px}
  .tb-label{font-size:12px}
  .foot{margin-top:36px;padding-top:16px;font-size:13px;line-height:1.6}

  /* --- stepper nav --- */
  .stepper{font-size:11px;gap:4px 6px;margin-bottom:22px}

  /* --- hero --- */
  .hero{margin-bottom:32px}
  .hero p{font-size:15px}

  /* --- tiles: stack full-width --- */
  .tiles{flex-direction:column;gap:14px;margin-bottom:22px}
  .tile{width:100%}
  .tile .art{height:140px}
  .tile .cap{padding:14px 16px}                    /* slightly roomier text area */
  img.chilli{height:52px}

  /* --- tune summary brief: full-width --- */
  .tune-brief{max-width:100%;padding:20px 16px;margin-bottom:22px}

  /* --- guide --- */
  .guide{margin-top:36px;padding-top:24px}
  .guide-cols{grid-template-columns:1fr}           /* stack the two columns */
  .gcol{padding:18px 16px}
  .gstep{gap:6px}
  .gnote{font-size:12px;margin-top:14px}

  /* --- vehicle radio rows: bigger tap targets --- */
  .opt{padding:10px 0}                             /* ≥44px with line-height */
  .vehicle{gap:10px}
  .thumb{width:80px;height:54px}

  /* --- file upload: bigger tap target --- */
  .file .box{padding:14px 20px;display:block;text-align:center}

  /* --- form inputs: full-width on mobile --- */
  .rq input,.rq textarea{max-width:100%}
  .rq .check{max-width:100%}
  .rq label{margin:14px 0 5px}

  /* --- buttons: full-width, touch-friendly --- */
  .pay{padding:16px 22px;width:100%;text-align:center;min-height:48px}
  a.pay{display:block}

  /* --- backlink --- */
  .backlink{margin-top:14px;padding:6px 0}
}