/* RallyRoads website · "Warm Night Rally" */
/* WOFF2 subsets (website/build.py --fonts); build.py adds a content hash to each url() */
@font-face { font-family: "Unbounded"; src: url("/fonts/Unbounded-ExtraBold.6e0af6ed82.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("/fonts/BricolageGrotesque-Regular.291844d742.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("/fonts/BricolageGrotesque-SemiBold.7e7c3a97c2.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("/fonts/BricolageGrotesque-ExtraBold.3ed74ba016.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Plex"; src: url("/fonts/IBMPlexMono-SemiBold.b9a8b96783.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* Metric-matched fallbacks: local Arial scaled to the web font's average letter
   width and line metrics, so the swap to the web font does not move the layout.
   Measured from the TTFs against Arial (letter-frequency weighted, capsize method). */
@font-face { font-family: "Unbounded Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 800; size-adjust: 134.38%; ascent-override: 74.04%; descent-override: 18.23%; line-gap-override: 0%; }
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400 500; size-adjust: 106.84%; ascent-override: 87.05%; descent-override: 25.27%; line-gap-override: 0%; }
@font-face { font-family: "Bricolage Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 900; size-adjust: 103.75%; ascent-override: 89.64%; descent-override: 26.02%; line-gap-override: 0%; }

:root {
  --asphalt: #15110E;
  --tarmac: #231D19;
  --bone: #F3EADA;
  --paper: #FBF5EA;
  --pink: #FF3F8E;
  --pink-soft: #FF6FA9;
  --ember: #F2A33A;
  --sage: #8FA389;
  --muted: rgba(243, 234, 218, 0.66);
  --line: rgba(243, 234, 218, 0.14);
  --ink: #2A211B;
  --ink-muted: #6E6158;
  --radius: 16px;
  --gutter: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--asphalt);
  color: var(--bone);
  font: 400 17px/1.55 "Bricolage", "Bricolage Fallback", system-ui, sans-serif;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--pink); text-underline-offset: 3px; }
a:hover { color: var(--pink); }
h1, h2, h3 { margin: 0 0 0.5em; line-height: 1.1; }
h1 { font: 800 clamp(34px, 7vw, 68px)/1.04 "Unbounded", "Unbounded Fallback", sans-serif; letter-spacing: -0.02em; }
h2 { font: 800 clamp(26px, 4.5vw, 42px)/1.1 "Bricolage", "Bricolage Fallback", sans-serif; letter-spacing: -0.01em; }
h3 { font: 800 19px/1.2 "Bricolage", "Bricolage Fallback", sans-serif; }
p { margin: 0 0 1em; }

/* keyboard: ember on the night background, ink on paper */
:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }
.paper :focus-visible, .rb-card :focus-visible { outline-color: var(--ink); }
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 30;
  padding: 12px 16px; border-radius: 12px;
  background: var(--bone); color: var(--asphalt); font-weight: 800; text-decoration: none;
}
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* anchors land below the sticky header */
section[id], #main, .cta[id] { scroll-margin-top: 76px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.lead { font-size: clamp(17px, 2.2vw, 21px); color: var(--muted); max-width: 640px; }
.kicker { font: 600 12px/1 "Plex", monospace; letter-spacing: 0.22em; color: var(--pink); margin-bottom: 18px; }

/* header: section links from 880 px, below that a <details> menu (no JavaScript) */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 12px var(--gutter);
  background: rgba(21, 17, 14, 0.86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 18px "Unbounded", "Unbounded Fallback", sans-serif; }
.brand img { border-radius: 9px; }
.links { display: none; gap: 22px; margin-left: 12px; font-weight: 600; font-size: 15px; }
.links a { text-decoration: none; color: var(--muted); white-space: nowrap; }
.lang { margin-left: auto; display: flex; gap: 2px; font: 600 12px "Plex", monospace; }
.lang a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px;
  padding: 6px 7px; border-radius: 6px; text-decoration: none; color: var(--muted);
}
.lang a[aria-current] { color: var(--asphalt); background: var(--bone); }
.menu summary {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 12px; color: var(--bone); cursor: pointer; list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--tarmac); }
.menu nav {
  position: absolute; top: 100%; left: 0; right: 0; display: grid;
  padding: 4px var(--gutter) 12px; background: var(--asphalt);
  border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
}
.menu nav a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); font-weight: 600; text-decoration: none; white-space: nowrap; }
.menu nav a:last-child { border-bottom: 0; }
/* asphalt on pink: 5.7:1 (white was 3.3:1) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 14px 22px; border: 0; border-radius: 12px;
  background: var(--pink); color: var(--asphalt); font: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
}
.btn:hover { color: var(--asphalt); background: var(--pink-soft); }
.btn.small { padding: 9px 14px; font-size: 14px; white-space: nowrap; }
/* the long label only where it fits next to everything else */
.top .btn .long { display: none; }

/* hero: the copy, then the roadbook card as the product. The night landscape is
   a <picture> in the markup (found early, fetchpriority high), the shade on top. */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0; background: var(--asphalt); }
.hero-bg img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 30%;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(21,17,14,0.2) 0%, rgba(21,17,14,0.75) 55%, var(--asphalt) 100%);
}
.hero-in { position: relative; display: grid; gap: 40px; align-items: center; }
.hero .lead { color: rgba(243, 234, 218, 0.86); }
.free-note { margin: 4px 0 0; font-weight: 600; color: var(--ember); }

.rb { margin: 0; width: 100%; max-width: 440px; justify-self: center; }
.rb-card {
  background: var(--paper); color: var(--ink);
  border-top: 6px solid var(--pink); border-radius: 20px;
  padding: 14px 18px 20px; box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5);
}
.rb-top { display: flex; justify-content: space-between; margin: 0 0 12px; font: 600 12px/1 "Plex", monospace; letter-spacing: 0.2em; color: var(--ink-muted); }
.rb-row { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; }
.rb-tulip { width: 120px; height: 120px; background: #fff; border: 1px solid rgba(42, 33, 27, 0.12); border-radius: 14px; }
.rb-road { fill: none; stroke: var(--ink-muted); stroke-width: 4; stroke-linecap: round; opacity: 0.55; }
.rb-mark { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rb-path { fill: none; stroke: var(--pink); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.rb-head, .rb-dot { fill: var(--pink); }
.rb-text { display: flex; flex-direction: column; gap: 6px; margin: 0; font-family: "Plex", monospace; font-weight: 600; }
.rb-at { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.rb-do { font-size: clamp(21px, 3vw, 28px); line-height: 1.1; }
.rb-dist { font-size: clamp(34px, 5vw, 46px); line-height: 1; }
.rb figcaption { margin-top: 10px; text-align: center; }

/* call to action: mailto until the waitlist form is switched on */
.cta { margin: 26px 0 8px; max-width: 560px; }
.cta > .btn { margin-bottom: 12px; }
.wl label, .wl legend { font-weight: 600; font-size: 15px; }
.wl-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.wl input[type=email], .wl select {
  min-height: 48px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(243, 234, 218, 0.4); background: var(--tarmac); color: var(--bone); font: inherit;
}
.wl input[type=email] { flex: 1 1 240px; }
.wl select { min-height: 44px; padding: 8px 12px; margin-left: 8px; }
.wl-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-bottom: 8px; }
.wl-more p { margin: 0; }
.wl fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; border: 0; margin: 0; padding: 0; }
.wl legend { float: left; margin-right: 4px; padding: 0; }
.wl fieldset label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 400; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px auto 0; max-width: 440px; }
.stats div { border-top: 2px solid var(--pink); padding-top: 10px; }
.stats b { display: block; font: 800 clamp(22px, 4vw, 30px) "Unbounded", "Unbounded Fallback", sans-serif; }
.stats span { font-size: 13px; color: var(--muted); }

section { padding: 64px 0; }
.paper { background: var(--paper); color: var(--ink); }
.paper .lead, .paper .muted { color: var(--ink-muted); }
.paper a { color: var(--ink); }

/* how */
.how { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
.how li { background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: 0 1px 0 rgba(42,33,27,0.06); position: relative; }
.how img { margin-bottom: 14px; }
.how .step { position: absolute; top: 22px; right: 22px; font: 600 12px "Plex", monospace; color: var(--ink-muted); }
.how p { color: var(--ink-muted); margin: 0; }

/* worlds */
.worlds { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.worlds li { background: var(--tarmac); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.worlds img { width: 36px; height: 36px; margin-bottom: 6px; opacity: 0.95; }
.worlds b { font-size: 17px; }
.worlds span { font-size: 13px; color: var(--muted); line-height: 1.35; }
.worlds li { border-left: 3px solid var(--pink); }
.w-us_cars { border-left-color: #E2483D !important; } .w-jdm { border-left-color: #FF3F8E !important; }
.w-oldtimer { border-left-color: #C9A46A !important; } .w-freizeit { border-left-color: #8FA389 !important; }
.w-euro { border-left-color: #4C8BF5 !important; } .w-supercars { border-left-color: #F2A33A !important; }
.w-offroad { border-left-color: #A9784A !important; } .w-ev { border-left-color: #3CC6A4 !important; }
.w-youngtimer { border-left-color: #B06CFF !important; }

/* screenshots: a keyboard-scrollable strip; the fade says there is more */
.screens { padding-bottom: 48px; }
.shots {
  display: flex; gap: 14px; overflow-x: auto; padding: 8px 64px 18px var(--gutter); scroll-snap-type: x mandatory;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), transparent);
}
.shots:focus-visible { outline-offset: -3px; }
.shots > picture, .shots > img { flex: 0 0 auto; scroll-snap-align: start; }
.shots img { width: 240px; border-radius: 22px; border: 1px solid var(--line); }

/* features */
.feats { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 22px; grid-template-columns: 1fr; }
.feats img { margin-bottom: 10px; }
.feats p { color: var(--ink-muted); margin: 0; }

/* pro: the billed price is the biggest figure */
.plans { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 28px 0 14px; }
.plan { background: var(--tarmac); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.plan.hot { border: 2px solid var(--pink); }
.plan .price { margin: 4px 0 8px; font: 800 clamp(34px, 5vw, 44px)/1 "Unbounded", "Unbounded Fallback", sans-serif; letter-spacing: -0.02em; }
.plan .price span { font: 600 15px "Bricolage", "Bricolage Fallback", sans-serif; letter-spacing: 0; color: var(--muted); }
.price-terms { margin: 0 0 6px; font-weight: 600; }
.price-alt { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.plan ul { margin: 0 0 12px; padding-left: 20px; }
.plan li { margin: 6px 0; }

/* faq */
#faq details { border-bottom: 1px solid rgba(42,33,27,0.14); padding: 16px 0; }
#faq summary { cursor: pointer; font-weight: 800; font-size: 18px; list-style: none; }
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after { content: "+"; content: "+" / ""; float: right; color: var(--pink); font-weight: 800; }
#faq details[open] summary::after { content: "–"; content: "–" / ""; }
#faq details p { margin: 10px 0 0; color: var(--ink-muted); }

/* documents */
.doc { padding-top: 48px; padding-bottom: 64px; }
.doc h1 { font-size: clamp(30px, 6vw, 48px); }
.doc h2 { font-size: 20px; margin-top: 30px; }
.doc p { color: var(--muted); }
.draft { font: 600 12px/1.5 "Plex", monospace; color: var(--ember) !important; border: 1px dashed var(--ember); border-radius: 10px; padding: 10px 12px; }

/* shared-link fallback (/r/..., /i/...) */
.open-mark { border-radius: 16px; margin-bottom: 20px; }
.open { padding: 0 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.open:last-child { border-bottom: 0; margin-bottom: 0; }
.open h2 { font-size: clamp(24px, 4vw, 32px); margin-top: 0; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 40px 0 28px; }
.foot-in { display: grid; gap: 22px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 600; }
.foot nav a { text-decoration: none; color: var(--muted); }

@media (max-width: 559px) {
  .top { gap: 8px; }
  .lang a { padding: 6px 4px; }
  /* the Horizon R mark stays; the wordmark makes room for the CTA and the menu */
  .top .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cta > .btn, .wl .btn { width: 100%; }
  .rb-row { grid-template-columns: 96px 1fr; gap: 14px; }
  .rb-tulip { width: 96px; height: 96px; }
}
@media (min-width: 720px) {
  :root { --gutter: 28px; }
  .hero { padding: 96px 0 88px; }
  .how { grid-template-columns: repeat(2, 1fr); }
  .worlds { grid-template-columns: repeat(3, 1fr); }
  .feats { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr 1fr; }
  .foot-in { grid-template-columns: 1.2fr 2fr; }
  .shots { padding-left: max(var(--gutter), calc((100vw - 1120px) / 2 + var(--gutter))); }
}
@media (min-width: 720px) and (max-width: 879px), (min-width: 1040px) {
  .top .btn .long { display: inline; }
  .top .btn .short { display: none; }
}
@media (min-width: 880px) {
  .links { display: flex; }
  .menu { display: none; }
}
@media (min-width: 960px) {
  .hero-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; }
  .hero h1 { font-size: clamp(40px, 4.8vw, 56px); }
}
@media (min-width: 1040px) {
  .how { grid-template-columns: repeat(4, 1fr); }
  .feats { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }