/* browsertransport.com
   Hand-written, no build step: three pages deploy to Cloudflare Pages exactly as they sit on
   disk. Palette and shapes are lifted from the game itself (dark slate, amber, the same truck
   art), so the site and the thing it is selling look like one product. */

:root {
  --bg: #14181c;
  --bg-deep: #0f1317;
  --panel: #1b2026;
  --panel-2: #232a31;
  --line: #2c333a;
  --line-bright: #3a424b;
  --text: #e9edf1;
  --muted: #8b959f;
  --amber: #f0a202;
  --amber-dim: #b57d02;
  --green: #6fcf97;
  --radius: 8px;
  --max: 1080px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--amber);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 24, 28, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: auto;
  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

.brand svg {
  width: 30px;
  height: 30px;
  flex: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15px;
}

.nav a {
  color: var(--muted);
  white-space: nowrap;
}

.nav a:hover,
.nav a[aria-current='page'] {
  color: var(--text);
  text-decoration: none;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 6px;
  border: 1px solid var(--line-bright);
  background: var(--panel-2);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.btn:hover {
  background: #2b333c;
  text-decoration: none;
}

.btn-primary {
  background: var(--amber-dim);
  border-color: var(--amber);
  color: #17190f;
}

.btn-primary:hover {
  background: var(--amber);
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(120% 90% at 70% 10%, #1d242b 0%, var(--bg-deep) 62%);
}

/* A faint street grid behind the hero, drawn in CSS rather than shipped as an image. It is
   suggestion, not a map: a real basemap here would compete with the illustration. */
.hero::before {
  content: '';
  position: absolute;
  inset: -10%;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 74px 74px;
  opacity: 0.35;
  transform: perspective(700px) rotateX(52deg) scale(1.6);
  transform-origin: 50% 0;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 72%);
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  padding: 84px 24px 76px;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(240, 162, 2, 0.35);
  background: rgba(240, 162, 2, 0.08);
  border-radius: 100px;
  padding: 4px 12px;
  margin-bottom: 22px;
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 800;
  max-width: 15ch;
}

h1 .accent {
  color: var(--amber);
}

.lede {
  margin: 0 0 32px;
  font-size: clamp(18px, 2.2vw, 21px);
  color: #b9c2cb;
  max-width: 56ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero-note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted);
}

.hero-art {
  margin-top: 54px;
  width: 100%;
  max-width: 940px;
}

.hero-art svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------------------------------------------------------------- sections */

section {
  padding: 74px 0;
  border-bottom: 1px solid var(--line);
}

h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.section-lede {
  margin: 0 0 40px;
  color: var(--muted);
  max-width: 62ch;
  font-size: 18px;
}

.cards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}

.card {
  background: var(--panel);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  padding: 24px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.card .glyph {
  display: block;
  font-size: 24px;
  margin-bottom: 14px;
  line-height: 1;
}

/* Numbered walkthrough of a job. */
.steps {
  counter-reset: step;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line-bright);
}

.step {
  counter-increment: step;
  background: var(--panel);
  padding: 22px 24px 22px 68px;
  position: relative;
}

.step::before {
  content: counter(step);
  position: absolute;
  left: 24px;
  top: 22px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(240, 162, 2, 0.14);
  border: 1px solid rgba(240, 162, 2, 0.4);
  color: var(--amber);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.step h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.step p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* A ledger-styled strip, echoing the game's Finances panel. */
.ledger {
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.ledger-head {
  padding: 12px 20px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-bright);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ledger-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}

.ledger-row:last-child {
  border-bottom: none;
}

.ledger-row .amount {
  font-weight: 700;
}

.amount.in {
  color: var(--green);
}

.amount.out {
  color: #eb7a72;
}

.ledger-note {
  padding: 14px 20px;
  color: var(--muted);
  font-size: 14px;
  background: var(--bg-deep);
}

/* ---------------------------------------------------------------- forms */

.signup {
  background: var(--panel);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 560px;
}

.signup h2 {
  font-size: 24px;
  margin-bottom: 6px;
}

.field-row {
  display: flex;
  gap: 10px;
  margin: 18px 0 12px;
  flex-wrap: wrap;
}

input[type='email'] {
  flex: 1 1 240px;
  min-width: 0;
  background: var(--bg-deep);
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  color: var(--text);
  padding: 11px 13px;
  font-size: 16px;
  font-family: inherit;
}

input[type='email']:focus {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

/* Bot bait. Never shown, never focusable; a submission that fills it is discarded. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.form-status {
  margin: 14px 0 0;
  font-size: 15px;
  padding: 11px 13px;
  border-radius: 6px;
  display: none;
}

.form-status.show {
  display: block;
}

.form-status.ok {
  background: rgba(111, 207, 151, 0.12);
  border: 1px solid rgba(111, 207, 151, 0.4);
  color: #a8e4c2;
}

.form-status.err {
  background: rgba(235, 87, 87, 0.1);
  border: 1px solid rgba(235, 87, 87, 0.35);
  color: #f0b6b0;
}

/* ---------------------------------------------------------------- misc */

/* Utility classes rather than style attributes: the Content-Security-Policy in `_headers` sets
   style-src 'self', which blocks inline style attributes as well as inline <style> blocks. */
.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.page-title {
  margin-top: 22px;
}

.footer-name {
  color: var(--text);
}

.section-divided {
  border-top: 1px solid var(--line);
  margin-top: 34px;
}


.prose p {
  color: #b9c2cb;
  max-width: 68ch;
}

.prose ul {
  color: #b9c2cb;
  max-width: 68ch;
  padding-left: 22px;
}

.prose li {
  margin-bottom: 8px;
}

.callout {
  border-left: 3px solid var(--amber);
  background: rgba(240, 162, 2, 0.07);
  padding: 16px 20px;
  border-radius: 0 6px 6px 0;
  margin: 26px 0;
  color: #e0d2ae;
  max-width: 68ch;
}

.callout p {
  margin: 0;
  color: inherit;
}

.status-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--muted);
  border: 1px solid var(--line-bright);
  background: var(--panel);
  border-radius: 100px;
  padding: 6px 14px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(240, 162, 2, 0.16);
}

.page-head {
  padding: 62px 0 8px;
}

/* Text-led pages read as a document, so the intro column is narrower than the full grid the
   landing page uses. Without this the copy hugs the left edge of a wide window. */
.wrap.page-head {
  max-width: 820px;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  padding: 44px 0 60px;
  color: var(--muted);
  font-size: 14px;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.site-footer a {
  color: var(--muted);
}

.site-footer a:hover {
  color: var(--text);
}

.attribution {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  max-width: 70ch;
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .hero .wrap {
    padding: 56px 24px 52px;
  }

  section {
    padding: 54px 0;
  }

  .nav {
    gap: 16px;
    font-size: 14px;
  }

  /* On a phone the header has room for the brand and the two links that go somewhere. "How it
     works" is an in-page anchor, so dropping it costs a visitor nothing: the section is directly
     below them either way. Without this the brand wraps to two lines and the header doubles in
     height. */
  .nav-optional {
    display: none;
  }

  .brand {
    font-size: 15px;
  }

  .brand svg {
    width: 26px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}