/* rideut — shared design tokens & base. Design language: handoff 1b (blue/teal on white). */
:root {
  --blue: #0B6BCB;
  --teal: #12A594;
  --teal-dark: #0B7A6B;
  --ink: #10233A;
  --ink-2: #37485A;
  --body: #55697A;
  --nav-link: #4A5A6A;
  --placeholder: #47586A;
  --muted: #8496A6;
  --muted-2: #9FB2C4;
  --phone-sub: #7B8A99;
  --col-head: #B0BCC8;
  --step-num: #6FB2FF;
  --bg: #FFFFFF;
  --bg-alt: #F5F8FB;
  --chip: #F0F4F8;
  --map-a: #EEF3F8;
  --map-b: #E3EBF3;
  --phone-screen: #FBFDFF;
  --hair: rgba(20,40,70,0.08);
  --hair-soft: rgba(20,40,70,0.06);
  --grad: linear-gradient(135deg, #0B6BCB, #12A594);
  --wrap: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--blue); text-decoration: none; }
a:hover { opacity: 0.75; }
h1, h2, h3 { font-family: 'Space Grotesk', system-ui, sans-serif; }
button { font-family: inherit; cursor: pointer; }
img, svg { max-width: 100%; }

.wrap { max-width: var(--wrap); margin: 0 auto; }

/* Wordmark */
.brand { display: inline-flex; align-items: center; gap: 1px; }
.brand .word {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  letter-spacing: -0.035em; color: var(--ink); line-height: 1;
}
.brand .word em { color: var(--blue); font-style: normal; }
.brand .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); align-self: flex-end; margin: 0 0 5px 4px; }

/* Pills / buttons */
.pill { border-radius: 999px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; border: none; }
.pill:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: #fff; padding: 13px 24px; font-size: 15px; }
.btn-primary:hover { box-shadow: 0 10px 24px -12px rgba(11,107,203,0.7); }
.btn-dark { background: var(--ink); color: #fff; padding: 13px 24px; font-size: 15px; }
.btn-outline { border: 1.5px solid rgba(20,40,70,0.2); color: var(--ink); background: transparent; padding: 12px 22px; font-size: 15px; }
.btn-white { background: #fff; color: var(--blue); padding: 14px 28px; font-size: 15.5px; }
.btn-ghost-white { border: 1.5px solid rgba(255,255,255,0.5); color: #fff; background: transparent; padding: 13px 26px; font-size: 15.5px; }

.badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding: 6px 13px; border-radius: 999px; }
.badge-teal { background: rgba(18,165,148,0.12); color: var(--teal-dark); font-size: 12.5px; }
.badge-blue { background: rgba(11,107,203,0.1); color: var(--blue); font-size: 12.5px; }
.badge-blue-up { background: rgba(11,107,203,0.1); color: var(--blue); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; }
}