/* fireroad.app. Static pages, no build step, nothing loaded from elsewhere.
   One family (Hanken Grotesk, self-hosted), one accent (the icon's redline orange), hairlines
   instead of boxes. Night colors follow the visitor's system; the bar's switch pins either.
   Designed at 390px first, with one breakpoint at 900px. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0f0b14;
  --card: #1a1320;
  --card-2: #261d2e;
  --line: #33283d;
  --fg: #fff1de;
  --muted: #bfaebb;
  --dim: #94828f;
  --accent: #ff5a24;
  --accent-text: #ff8a5c;
  --on-accent: #1a0c05;
  --frame: #050307;
  --frame-edge: #3d3245;
  --scrim: 15, 11, 20;
  --font:
    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f7f1e8;
    --card: #fffcf7;
    --card-2: #ede4d8;
    --line: #ddd0c1;
    --fg: #1b1220;
    --muted: #5b4d5c;
    --dim: #76666f;
    --accent-text: #b13a0d;
    --frame: #17111c;
    --frame-edge: #cbbdb0;
    --scrim: 247, 241, 232;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f7f1e8;
  --card: #fffcf7;
  --card-2: #ede4d8;
  --line: #ddd0c1;
  --fg: #1b1220;
  --muted: #5b4d5c;
  --dim: #76666f;
  --accent-text: #b13a0d;
  --frame: #17111c;
  --frame-edge: #cbbdb0;
  --scrim: 247, 241, 232;
  color-scheme: light;
}

/* ---- Base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: 72px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
.num {
  font-variant-numeric: tabular-nums;
}
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
.micro {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
/* The skip link focuses main; no ring around the whole page. */
main:focus {
  outline: none;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 20;
  padding: 10px 14px;
  background: var(--card);
  color: var(--fg);
  border-radius: 8px;
}
.skip:focus {
  top: 10px;
}

/* ---- Bar ----
   Solid with a hairline. On the home page (with scripts) it starts transparent over the dusk art
   and turns solid once the hero scrolls past. */
.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.bar-in {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  min-height: 44px;
  color: var(--fg);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.mark img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 241, 222, 0.12);
}
.nav {
  display: none;
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.12s ease;
}
.nav a:hover {
  color: var(--fg);
}
.theme {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.theme:hover {
  color: var(--fg);
}
.theme svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Show the icon for the theme you'd switch to. */
.theme .moon {
  display: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme .sun {
    display: none;
  }
  :root:not([data-theme="dark"]) .theme .moon {
    display: block;
  }
}
:root[data-theme="light"] .theme .sun {
  display: none;
}
:root[data-theme="light"] .theme .moon {
  display: block;
}

/* ---- Buttons ---- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}
.pill:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}
.pill svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.pill-lg {
  min-height: 52px;
  padding: 0 26px;
  font-size: 16px;
}
.pill-quiet {
  background: var(--card-2);
  color: var(--muted);
  cursor: default;
}
.pill-quiet:hover {
  transform: none;
  box-shadow: none;
}

/* ---- Hero: the dusk scene with only the headline on it, top left in the sky ---- */
.hero {
  position: relative;
  height: 400px;
  overflow: hidden;
  background: #1c1936;
}
/* With scripts the bar floats over the art; without, it sits above it. */
.js .hero {
  margin-top: -61px;
}
.hero-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Taller than the hero so the empty ground under the ridges falls off the bottom. */
  height: calc(100% + 72px);
  max-width: none;
  object-fit: cover;
  object-position: 71% 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(var(--scrim)) 0%,
    rgba(var(--scrim), 0.85) 9%,
    rgba(var(--scrim), 0) 30%
  );
}
.hero .wrap {
  position: relative;
  z-index: 1;
  padding-top: 40px;
}
.js .hero .wrap {
  padding-top: 101px;
}
.hero h1 {
  color: #fff1de;
  font-size: clamp(52px, 9vw, 108px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
  text-shadow: 0 4px 30px rgba(28, 25, 54, 0.45);
}

/* ---- Under the hero: the pitch, big, and the button ---- */
.intro {
  padding-top: 8px;
}
.intro-lede {
  max-width: 30ch;
  font-size: clamp(23px, 3.3vw, 36px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--muted);
}
.intro-lede strong {
  color: var(--fg);
  font-weight: 700;
}
.intro-get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 28px;
}

/* ---- Sections ---- */
.sec {
  padding-top: 64px;
}
.sec-h {
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 18ch;
}
.sec-h-wide {
  max-width: none;
}
.sec-k {
  margin-bottom: 14px;
}
.sec-p {
  max-width: 52ch;
  margin-top: 14px;
  font-size: 17px;
  color: var(--muted);
}

/* ---- The ride screen demo ---- */
.demo {
  container-type: inline-size;
  display: grid;
  gap: 28px;
  margin-top: 32px;
}
.phone {
  /* iPhone proportions, from the phone's own width: the frame's corner is about 6.6% of it, the bezel
     about 1.3%, and the screen's corner is the frame's minus the bezel so the two curves stay parallel. */
  --bezel: 1.3cqi;
  --corner: 6.6cqi;
  position: relative;
  width: 100%;
  padding: var(--bezel);
  border-radius: var(--corner);
  background: var(--frame);
  box-shadow:
    inset 0 0 0 1px var(--frame-edge),
    0 30px 70px -24px rgba(0, 0, 0, 0.55);
}
.screen {
  /* The renders' own proportions, so they fill the screen edge to edge with no bands. */
  position: relative;
  aspect-ratio: 852 / 393;
  overflow: hidden;
  /* Drag anywhere on the screen: sideways moves the divider, up and down still scrolls the page. */
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  border-radius: calc(var(--corner) - var(--bezel));
  background: #000;
  --split: 50%;
}
.screen img {
  -webkit-user-drag: none;
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Each side is clipped at the divider, so the white day render never sits under the night side's
   smoothed edge and shows through as a hairline. */
.screen .day {
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}
.screen .night {
  clip-path: inset(0 0 0 var(--split));
}
.screen [hidden] {
  display: none;
}
.split-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.split-knob {
  position: absolute;
  /* In the empty bottom-middle slot, clear of the speed and MAX. */
  top: 88%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow:
    0 0 0 3px #fff,
    0 4px 14px rgba(0, 0, 0, 0.4);
}
/* A soft pulse until someone drags. */
.split-knob::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--accent);
  animation: knob-pulse 1.8s ease-out infinite;
}
.touched .split-knob::after {
  animation: none;
  opacity: 0;
}
@keyframes knob-pulse {
  from {
    transform: scale(1);
    opacity: 0.8;
  }
  to {
    transform: scale(1.7);
    opacity: 0;
  }
}
.split-knob svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Day and Night ride either side of the knob: dark on the day side, light on the night side. */
.split-chip {
  position: absolute;
  top: 88%;
  transform: translateY(-50%);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.split-day {
  right: 34px;
  background: #16101c;
  color: #fff;
}
.split-night {
  left: 34px;
  background: #fff;
  color: #16101c;
}
/* The range input is for the keyboard only (arrow keys); pointers drag the screen itself. */
.split {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.split:focus-visible + .split-line .split-knob {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.styles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.style {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 44px;
  padding: 14px 0 6px;
  border: 0;
  border-top: 2px solid var(--line);
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.style-n {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.style-d {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.style[aria-selected="true"] {
  border-top-color: var(--accent);
}
.style[aria-selected="false"] .style-n {
  color: var(--muted);
}
.style:hover .style-n {
  color: var(--fg);
}

/* ---- Ledger rows ---- */
.rows {
  margin-top: 28px;
  border-top: 1px solid var(--line);
}
.row {
  display: grid;
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.row-k {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-text);
}
.row-t {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.row-p {
  font-size: 15px;
  color: var(--muted);
  max-width: 62ch;
}

/* ---- Closing: the dusk art again, as a card ---- */
.close {
  padding-top: 80px;
}
.close-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #0f0b14;
  isolation: isolate;
}
.close-art {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 71% 62%;
  /* Phones: the art fills the top, the text sits below it on the card's dark. */
  height: 250px;
}
/* Darkens the left side so the text reads over the sky. */
.close-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, #0f0b14 0%, #0f0b14 45%, rgba(15, 11, 20, 0) 75%);
}
.close-in {
  padding: 200px 24px 28px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.close-h {
  color: #fff1de;
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
  text-shadow: 0 4px 30px rgba(28, 25, 54, 0.45);
}
.close-get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  /* Keeps the heading where it sat when a price line was under it. */
  margin-top: 58px;
}
.close-note {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 241, 222, 0.7);
}

/* ---- Footer ---- */
.foot {
  margin-top: 40px;
  padding: 20px 0 32px;
  font-size: 14px;
  color: var(--dim);
}
.foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}
.foot-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--fg);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.foot-mark img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}
.foot-links a:hover {
  color: var(--fg);
}

/* ---- Documents: privacy, support, terms, 404 ---- */
.doc {
  max-width: 68ch;
  padding-top: 56px;
}
.doc h1 {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.doc .updated {
  display: block;
  margin-top: 14px;
}
.doc .lede {
  margin-top: 18px;
  font-size: 19px;
  line-height: 1.45;
  color: var(--muted);
}
.doc h2 {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 22px;
}
.doc h3 {
  margin-top: 26px;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.doc p,
.doc li {
  margin-top: 12px;
  font-size: 16px;
  color: var(--muted);
}
.doc p strong {
  color: var(--fg);
  font-weight: 600;
}
.doc ul {
  margin: 0;
  padding-left: 20px;
}
.doc li::marker {
  color: var(--dim);
}
.callout {
  margin-top: 16px;
  padding: 4px 18px 16px;
  border-left: 3px solid var(--accent);
  background: var(--card);
  border-radius: 0 10px 10px 0;
}
.callout p {
  color: var(--fg);
}

/* ---- Bar over the hero art (home page) ---- */
.bar .pill {
  min-height: 38px;
  padding: 0 16px;
  font-size: 13.5px;
}
/* Home page with scripts: clear over the art until the script marks it solid, so the first paint
   is already clear. Over the art the text is always the night colors, since the art is always dusk. */
.js .bar-home:not(.solid) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.js .bar-home:not(.solid) .mark {
  color: #fff1de;
}
.js .bar-home:not(.solid) .nav a,
.js .bar-home:not(.solid) .theme {
  color: rgba(255, 241, 222, 0.78);
}
.js .bar-home:not(.solid) .nav a:hover,
.js .bar-home:not(.solid) .theme:hover {
  color: #fff1de;
}

/* ---- Desktop ---- */
@media (min-width: 900px) {
  .wrap {
    padding: 0 32px;
  }
  .nav {
    display: flex;
    margin-right: 4px;
  }
  .sec {
    padding-top: 104px;
  }
  .intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 64px;
  }
  .intro-lede {
    max-width: 32ch;
  }
  .intro-get {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-top: 0;
  }
  .demo {
    gap: 32px;
    margin-top: 44px;
  }
  .styles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 28px;
  }
  .hero {
    height: 480px;
  }
  .hero-art {
    height: 100%;
    object-position: 50% 58%;
  }
  .side {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: 64px;
    align-items: start;
  }
  .side > :first-child {
    position: sticky;
    top: 96px;
  }
  .side .rows {
    margin-top: 0;
  }
  .row {
    grid-template-columns: 160px minmax(0, 1fr);
    column-gap: 32px;
    padding: 22px 0;
  }
  .row-k {
    padding-top: 3px;
  }
  .row-p {
    grid-column: 2;
  }
  .close {
    padding-top: 112px;
  }
  .close-in {
    min-height: 420px;
    padding: 56px 56px 48px;
  }
  .close-art {
    height: 100%;
    object-position: 50% 62%;
  }
  .close-card::after {
    background: linear-gradient(to top, rgba(15, 11, 20, 0.7), rgba(15, 11, 20, 0) 60%);
  }
}

/* ---- Theme switch: cross-fade (see the switch's script) ---- */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: ease;
}
.theme-fade,
.theme-fade *,
.theme-fade *::before,
.theme-fade *::after {
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .pill {
    transition: none;
  }
  .split-knob::after {
    animation: none;
  }
}