/* CheckMoto site — same pit-board tokens as src/theme.js */
:root {
  --asphalt: #0E0E0D;
  --raised: #171715;
  --line: #2A2925;
  --orange: #FF5A1F;
  --acid: #C6F432;
  --tan: #C8B48A;
  --tan-dim: #8A7D61;
  --text: #F2EFE8;
  --text-dim: #9C988E;
  --display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--asphalt);
  color: var(--text);
  font: 17px/1.6 var(--body);
}
a { color: var(--orange); }
a:hover { color: var(--acid); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand:hover { color: var(--text); }
.wordmark { font: 700 26px/1 var(--display); letter-spacing: 1px; }
.wordmark b { color: var(--orange); font-weight: 700; }
.nav { display: flex; gap: 22px; }
.nav a { font: 500 12px/1 var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--tan); text-decoration: none; }
.nav a:hover, .nav a[aria-current] { color: var(--acid); }

/* Checkered flag: pole + 4x3 skewed grid */
.flag { display: flex; align-items: flex-start; }
.flag .pole { width: 3px; height: 30px; background: var(--tan); border-radius: 1px; margin-right: 2px; }
.flag .cloth {
  display: grid; grid-template-columns: repeat(4, 7px); grid-auto-rows: 7px;
  border: 1px solid var(--text); transform: skewY(-8deg); margin-top: 2px;
}
.flag .cloth i:nth-child(odd) { background: var(--text); }
.flag .cloth i:nth-child(even) { background: var(--asphalt); }
.flag .cloth i:nth-child(n+5):nth-child(-n+8):nth-child(odd) { background: var(--asphalt); }
.flag .cloth i:nth-child(n+5):nth-child(-n+8):nth-child(even) { background: var(--text); }

/* ---------- Ticker ---------- */
.ticker { display: flex; align-items: center; height: 42px; background: var(--orange); overflow: hidden; }
.ticker .badge { flex: none; position: relative; z-index: 1; height: 100%; display: flex; align-items: center; padding: 0 14px; background: var(--asphalt); color: var(--acid); font: 500 12px/1 var(--mono); letter-spacing: 2px; }
.ticker .track { display: flex; flex: none; animation: run 45s linear infinite; }
.ticker .run { flex: none; white-space: nowrap; padding-left: 14px; font: 500 16px/1 var(--display); letter-spacing: .6px; color: var(--asphalt); }
.ticker .run span { margin: 0 14px; }
@keyframes run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker .track { animation: none; } }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 40px; }
.kicker { font: 500 12px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--tan); margin: 0 0 18px; }
.hero h1 {
  margin: 0; font: 700 clamp(64px, 13vw, 144px)/0.9 var(--display);
  text-transform: uppercase; letter-spacing: 1px;
}
.hero h1 em { font-style: normal; color: var(--orange); }
.lede { max-width: 560px; color: var(--text-dim); font-size: 19px; margin: 26px 0 30px; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px;
  border: 1px solid var(--line); background: var(--raised); border-radius: 6px;
  font: 500 13px/1 var(--mono); letter-spacing: 1px; color: var(--text);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); }

/* ---------- Number plates ---------- */
/* Same layout as the app's NumberPlate (src/components.js): front-plate shape
   with cut top corners, sides narrowing toward the bottom, rounded bottom with
   a center notch, diagonal stripes; brand tag + status dot on top, big name in
   the middle, number at the bottom. */
.plates { display: flex; gap: 14px; margin-top: 48px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.plates::-webkit-scrollbar { display: none; }
.plate {
  flex: none; width: 150px; height: 196px; padding: 14px 18px 0; position: relative;
  display: flex; flex-direction: column;
  clip-path: path('M14,0 L136,0 L150,14 L138,172 Q135,196 112,196 L84,196 Q84,187 75,187 Q66,187 66,196 L38,196 Q15,196 12,172 L0,14 Z');
  background-image: linear-gradient(118deg,
    rgba(0,0,0,.16) 0 22%, transparent 22% 38%,
    rgba(255,255,255,.10) 38% 48%, transparent 48% 64%,
    color-mix(in srgb, currentColor 22%, transparent) 64% 71%, transparent 71% 78%,
    color-mix(in srgb, currentColor 22%, transparent) 78% 80.5%, transparent 80.5%);
}
.plate .ptop { display: flex; justify-content: space-between; align-items: center; padding: 0 2px; }
.plate .tag { font: 500 10px/1 var(--mono); letter-spacing: 1.5px; opacity: .9; }
.plate .status { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; }
.plate .name { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.plate .first { font: 500 15px/1.15 var(--display); letter-spacing: .8px; text-transform: uppercase; }
.plate .last { font: 700 32px/1.05 var(--display); letter-spacing: .2px; text-transform: uppercase; white-space: nowrap; }
.plate .series { font: 500 9px/1.3 var(--mono); letter-spacing: .5px; opacity: .85; margin-top: 4px; text-transform: uppercase; }
.plate .num { height: 40px; font: 700 28px/1 var(--display); letter-spacing: .5px; }
.p-orange { background-color: var(--orange); color: #111; }
.p-acid { background-color: var(--acid); color: #111; }
.p-white { background-color: #F2F2F2; color: #0E2A6B; }
.p-blue { background-color: #1446A0; color: #fff; }
.p-red { background-color: #D7141A; color: #fff; }

/* ---------- Roost divider ---------- */
.roost { position: relative; height: 22px; margin: 44px 0; }
.roost i { position: absolute; border-radius: 50%; }

/* ---------- Features ---------- */
.section-label { font: 500 12px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--tan); margin: 0 0 22px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.card { background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 22px; }
.card h3 { margin: 0 0 8px; font: 700 26px/1 var(--display); text-transform: uppercase; letter-spacing: .5px; }
.card h3 span { color: var(--orange); font-family: var(--mono); font-size: 13px; letter-spacing: 1px; margin-right: 8px; vertical-align: 4px; }
.card p { margin: 0; color: var(--text-dim); font-size: 15px; }

.racers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.racers .card h3 { font-size: 30px; }
.racers .card.fan h3 { color: var(--acid); }
.racers .card.racer h3 { color: var(--orange); }
@media (max-width: 640px) { .racers { grid-template-columns: 1fr; } }

/* ---------- Text pages (privacy, support) ---------- */
.doc { max-width: 720px; padding: 56px 0 24px; }
.doc h1 { font: 700 clamp(44px, 9vw, 72px)/0.95 var(--display); text-transform: uppercase; margin: 0 0 12px; }
.doc .meta { font: 500 12px/1.4 var(--mono); letter-spacing: 1.5px; color: var(--tan-dim); text-transform: uppercase; margin: 0 0 36px; }
.doc h2 { font: 700 24px/1.1 var(--display); text-transform: uppercase; letter-spacing: .5px; color: var(--tan); margin: 40px 0 10px; }
.doc p, .doc li { color: #D9D5CC; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc strong { color: var(--text); }
.callout { background: var(--raised); border: 1px solid var(--line); border-left: 4px solid var(--acid); border-radius: 8px; padding: 18px 20px; margin: 0 0 8px; }
.callout p { margin: 0; }
.email { display: inline-block; font: 700 clamp(26px, 6vw, 40px)/1.1 var(--display); letter-spacing: .5px; text-decoration: none; word-break: break-all; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); margin-top: 72px; padding: 28px 0 40px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; align-items: center; }
.foot p { margin: 0; font: 500 12px/1.6 var(--mono); color: var(--tan-dim); letter-spacing: .5px; }
.foot nav { display: flex; gap: 20px; }
.foot nav a { font: 500 12px/1 var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--tan); text-decoration: none; }

@media (max-width: 520px) {
  .nav { gap: 14px; }
  .wordmark { font-size: 22px; }
  .hero { padding-top: 48px; }
}