/*
  MotoRev brand base: tokens, type, header, buttons, footer. Shared by every
  public page. Landing-only styles live in road.css, content pages in page.css.

  THESIS: MotoRev's landing page is the road itself at night. Every feature is a
  road sign; sections are mile markers. Refuses the floating-phone SaaS layout.
  COLOR ORDER (strict):
    asphalt        the ground, signs are dark reverse plates with white borders
    signal yellow  the one brand accent: CTAs, highlights, lane lines, mile numbers
    protect green  MotoRev Protect only
    emergency red  SOS and alerts only
  MotoRev blue appears inside the app screenshots, not as page chrome.
  FORM: road signage system, grounded list #6, staged as a mile-marker promenade;
  seed b2f3c6f0.
*/

/* Overpass loads with display=swap. Until it arrives, text sets in Arial resized to
   Overpass's width, ascent and descent, so the swap does not move the hero (it was most
   of the 0.18 desktop CLS). Numbers measured from the Overpass v19 latin files. */
@font-face { font-family: "Overpass Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 549; size-adjust: 99.8%; ascent-override: 88.5%; descent-override: 38.4%; line-gap-override: 0%; }
@font-face { font-family: "Overpass Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 849; size-adjust: 97.5%; ascent-override: 90.6%; descent-override: 39.3%; line-gap-override: 0%; }
@font-face { font-family: "Overpass Fallback"; src: local("Arial Black"), local("Arial-Black"); font-weight: 850 1000; size-adjust: 87.3%; ascent-override: 101.2%; descent-override: 43.9%; line-gap-override: 0%; }

:root {
  --asphalt: #0c1014;
  --asphalt-2: #12171c;
  --asphalt-3: #1c232a;
  --shoulder: #2c343d;
  --legend: #f4f3ee;
  --legend-dim: #c9cdd3;
  --legend-mute: #a0a7b0;
  --signal: #f5b900;
  --signal-ink: #111111;
  --protect: #19c987;
  --protect-ink: #06140e;
  --emergency: #f04452;
  --radius-sign: 14px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --font: "Overpass", "Overpass Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--asphalt);
  color: var(--legend);
  font-family: var(--font);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; }

:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--signal); color: var(--signal-ink); padding: 10px 16px; border-radius: 6px;
  font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Sign primitives ---------- */

.sign {
  --sign-bg: var(--asphalt-3);
  --sign-edge: rgba(244,243,238,0.9);
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 20px 12px;
  background: var(--sign-bg);
  color: var(--legend);
  border-radius: var(--radius-sign);
  box-shadow: inset 0 0 0 3px var(--sign-bg), inset 0 0 0 5px var(--sign-edge);
  font-weight: 800;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
}

/* Retroreflective: dim until the headlights reach it */
.reflect { filter: brightness(0.62) saturate(0.8); transition: filter 900ms ease-out; }
.reflect.is-lit { filter: none; }

.diamond {
  --d: 92px;
  position: relative;
  width: var(--d); height: var(--d);
  flex: none;
  display: grid; place-items: center;
}
.diamond::before {
  content: "";
  position: absolute; inset: 14%;
  background: var(--signal);
  border-radius: 10px;
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 3px var(--signal), inset 0 0 0 5px #111;
}
.diamond > * { position: relative; color: #111; }
.diamond.reflect::after { display: none; }
.diamond svg { width: 42%; height: 42%; }

/* Mile marker post: dark plate, yellow number */
.mm {
  display: inline-grid;
  justify-items: center;
  width: 56px;
  padding: 8px 0 7px;
  background: var(--asphalt);
  color: var(--legend);
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--asphalt), inset 0 0 0 3.5px rgba(244,243,238,0.9);
  font-weight: 800;
  line-height: 1;
}
.mm span { font-size: 11px; letter-spacing: 0.1em; }
.mm b { font-size: 27px; margin-top: 3px; color: var(--signal); }

/* ---------- Nav ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background 300ms ease, border-color 300ms ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: rgba(12,16,20,0.92); border-color: var(--asphalt-3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav__inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 21px; letter-spacing: -0.01em; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__links a { text-decoration: none; font-weight: 700; font-size: 16px; padding: 10px 12px; border-radius: 8px; color: var(--legend-dim); }
.nav__links a:hover { color: var(--legend); }
.nav__cta { background: var(--signal); color: var(--signal-ink) !important; padding: 10px 16px !important; margin-left: 8px; }
.nav__cta:hover { background: #ffc61a; }
.nav__toggle { display: none; margin-left: auto; background: none; border: 0; color: var(--legend); width: 44px; height: 44px; border-radius: 8px; cursor: pointer; }
.nav__toggle svg { width: 26px; height: 26px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border-radius: 12px;
  font: 800 18px/1 var(--font); text-decoration: none; cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.btn:active { transform: translateY(1px); }
.btn--store { background: var(--signal); color: var(--signal-ink); }
.btn--store:hover { background: #ffc61a; }
.btn--store svg { width: 24px; height: 24px; }
.btn--store small { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; opacity: 0.75; margin-bottom: 3px; }
.btn--store .btn__stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.btn--ghost { color: var(--legend); box-shadow: inset 0 0 0 2px var(--shoulder); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--legend-dim); }
.btn--xl { min-height: 72px; padding: 0 36px; font-size: 22px; border-radius: 16px; }
.btn--xl.btn--store svg { width: 30px; height: 30px; }
.btn--xl.btn--store small { font-size: 14px; }

/* The official App Store and Google Play badges, trimmed to their artwork and shown at one
   height side by side, as both stores' badge guidelines ask. */
.store-badge { display: inline-flex; height: 56px; border-radius: 9px; transition: transform 160ms ease, opacity 160ms ease; }
.store-badge:hover { opacity: 0.88; }
.store-badge:active { transform: translateY(1px); }
.store-badge:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.store-badge img { height: 100%; width: auto; display: block; }
.store-badge--xl { height: 72px; border-radius: 12px; }
@media (max-width: 760px) {
  .store-badge, .store-badge--xl { height: 52px; }
}

.stars { display: inline-flex; gap: 2px; color: var(--signal); }
.stars svg { width: 17px; height: 17px; }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--asphalt-3); padding: 56px 0 36px; font-size: 16px; color: var(--legend-mute); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(6, minmax(0, 1fr)); gap: 32px 24px; }
.footer a[aria-current] { color: var(--legend); }
.footer h2 { font-size: 15px; font-weight: 800; color: var(--legend); margin-bottom: 14px; letter-spacing: 0.02em; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 10px; }
.footer a { text-decoration: none; color: var(--legend-mute); }
.footer a:hover { color: var(--legend); }
.footer__brand p { max-width: 22rem; margin-top: 14px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid var(--asphalt-3); margin-top: 44px; padding-top: 24px; font-size: 15px; }

/* ---------- Responsive ---------- */

@media (max-width: 1280px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body { font-size: 18px; }
  .nav__links {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--asphalt); border-bottom: 1px solid var(--asphalt-3); padding: 8px var(--gutter) 20px;
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 16px 4px; font-size: 18px; border-bottom: 1px solid var(--asphalt-3); border-radius: 0; }
  .nav__cta { margin: 14px 0 0; text-align: center; border-radius: 10px !important; border-bottom: 0 !important; }
  .nav__toggle { display: inline-grid; place-items: center; }
  .nav.menu-open { background: var(--asphalt); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .btn--xl { min-height: 64px; font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reflect { filter: none; }
}


/* "Or view on the Web": built to sit beside the store badges at their height and shape. */
.store-badge--web {
  align-items: center; gap: 10px; padding: 0 18px 0 14px;
  background: #000; border: 1px solid #a6a6a6; color: #fff; text-decoration: none;
}
.store-badge--web svg { width: 30px; height: 30px; flex: none; }
.store-badge--web span { display: flex; flex-direction: column; font: 600 24px/1 var(--font); letter-spacing: -0.01em; }
.store-badge--web small { font: 500 11px/1.2 var(--font); letter-spacing: 0.01em; margin-bottom: 2px; }
@media (max-width: 760px) {
  .store-badge--web svg { width: 26px; height: 26px; }
  .store-badge--web span { font-size: 22px; }
}