/* Roadbuds — public site.
   Single, deliberate dark theme: the app's identity lives in its dark mode, and the site is the
   same product. Every colour is painted explicitly so nothing inherits from the host. */

:root {
  --ground: #14171d;
  --sunken: #0f1216;
  --raised: #1e232b;
  --line: #2a2f39;
  --line-strong: #3d4552;

  --ink: #f3f4f6;
  --ink-dim: #9aa1ac;

  --accent: #e8590c;
  --accent-hot: #ff7a1a;
  --accent-surface: #3a2415;

  --tier-drip: #38bdf8;
  --tier-sleeper: #a78bfa;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --measure: 66ch;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

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

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

@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;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

a {
  color: var(--accent-hot);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--accent-hot);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Keyboard users land on the nav on every page load; this lets them jump straight to the content
   instead of tabbing through it each time. Off-screen until focused, so it never shows for anyone
   using a mouse. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--raised);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 0 0 6px 0;
  font-family: var(--body);
  font-size: 0.95rem;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Road markings. A dashed rule is the one decorative device on the site, and it comes from the
   subject rather than from a stylesheet default. */
.lane {
  height: 2px;
  border: 0;
  margin: 0;
  background: repeating-linear-gradient(
    to right,
    var(--line-strong) 0 22px,
    transparent 22px 40px
  );
  opacity: 0.7;
}

/* ---------- header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
}

.mark {
  display: flex;
  align-items: center;
}

.mark img {
  display: block;
  height: 24px;
  width: auto;
}

/* On a 412px phone the brand plus four nav items came to 10px wider than the screen, so every
   page that uses this header scrolled sideways. Below 600px the header wraps and the nav takes its
   own row, which is what the home page's own header already does. */
@media (max-width: 600px) {
  .site-head .wrap {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding-block: 0.5rem;
    min-height: 0;
  }
  .site-head .wrap > :first-child {
    flex: 1 0 100%;
  }
  .site-nav {
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 1.75rem);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-nav a {
  color: var(--ink-dim);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--ink);
}

/* ---------- hero ---------- */

.hero {
  padding-block: clamp(4rem, 12vw, 8rem) clamp(3rem, 8vw, 5rem);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--accent-surface) 0%, transparent 60%),
    var(--ground);
}

.hero-mark {
  width: min(420px, 78vw);
  height: auto;
  display: block;
  margin-bottom: 2rem;
}

.hero h1 {
  font-size: clamp(2.1rem, 6.2vw, 3.9rem);
  line-height: 1.04;
  max-width: 19ch;
  margin-bottom: 1.25rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent-hot);
}

.hero p {
  color: var(--ink-dim);
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  max-width: 54ch;
  margin: 0 0 2rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
}

.status-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-hot);
}

/* ---------- sections ---------- */

.section {
  padding-block: clamp(3.5rem, 9vw, 6rem);
}

.section-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-hot);
  margin: 0 0 0.9rem;
}

.section h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  max-width: 24ch;
  margin-bottom: 1rem;
}

.section > .wrap > p {
  color: var(--ink-dim);
  max-width: var(--measure);
}

/* ---------- the loop: a real sequence, so it is really numbered ---------- */

.steps {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

@media (min-width: 800px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.steps li {
  background: var(--raised);
  padding: 1.75rem;
}

.steps .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent-hot);
  display: block;
  margin-bottom: 0.85rem;
}

.steps h3 {
  font-size: 1.16rem;
  margin-bottom: 0.5rem;
}

.steps p {
  color: var(--ink-dim);
  font-size: 0.95rem;
  margin: 0;
}

/* ---------- privacy facts ---------- */

.facts {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 720px) {
  .facts {
    grid-template-columns: 1fr 1fr;
  }
}

.facts li {
  border-left: 2px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.15rem;
}

.facts strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.facts span {
  color: var(--ink-dim);
  font-size: 0.95rem;
}

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  background: var(--sunken);
  padding-block: 3rem 2.5rem;
  font-size: 0.92rem;
}

.foot-grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 720px) {
  .foot-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.foot-grid h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 0.9rem;
  font-weight: 500;
}

.foot-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.foot-grid a {
  color: var(--ink);
  text-decoration: none;
}

.foot-grid a:hover {
  color: var(--accent-hot);
}

.foot-blurb {
  color: var(--ink-dim);
  max-width: 40ch;
  margin: 0;
}

.foot-legal {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

/* ---------- long-form documents ---------- */

.doc {
  padding-block: clamp(2.5rem, 7vw, 4rem) clamp(3rem, 8vw, 5rem);
}

.doc-head {
  max-width: var(--measure);
  margin-bottom: 2.5rem;
}

.doc-head h1 {
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  margin-bottom: 1rem;
}

.doc-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.doc-body {
  max-width: var(--measure);
}

.doc-body h2 {
  font-size: 1.32rem;
  margin: 3rem 0 0.85rem;
  scroll-margin-top: 90px;
}

.doc-body h2 .n {
  font-family: var(--mono);
  font-size: 0.78em;
  font-weight: 500;
  color: var(--accent-hot);
  margin-right: 0.6rem;
}

.doc-body h3 {
  font-size: 1.03rem;
  margin: 1.85rem 0 0.5rem;
}

.doc-body p,
.doc-body li {
  color: #dfe2e7;
}

.doc-body ul {
  padding-left: 1.15rem;
  display: grid;
  gap: 0.5rem;
}

.doc-body li::marker {
  color: var(--accent);
}

/* A plain-language aside beside the operative text. Legal pages are read by people trying to work
   out what actually happens to them, and the summary is what answers that. */
.plain {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--tier-drip);
  border-radius: 0 10px 10px 0;
  background: var(--raised);
  padding: 1.1rem 1.35rem;
  margin: 1.5rem 0;
}

.plain b {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tier-drip);
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 500;
}

.plain p {
  margin: 0;
  font-size: 0.95rem;
}

.toc {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
  padding: 1.35rem 1.5rem;
  margin-bottom: 3rem;
}

.toc h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 0.85rem;
  font-weight: 500;
}

.toc ol {
  margin: 0;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.4rem;
  font-size: 0.94rem;
}

.toc a {
  color: var(--ink);
  text-decoration: none;
}

.toc a:hover {
  color: var(--accent-hot);
}

/* ---------- contact / support ---------- */

.contact-card {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--raised);
  padding: 1.75rem;
  margin: 2rem 0;
  max-width: var(--measure);
}

.contact-card h2 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.contact-card p {
  color: var(--ink-dim);
  margin: 0 0 1rem;
}

.contact-card .addr {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink);
}

.faq {
  max-width: var(--measure);
  margin-top: 2.5rem;
}

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
}

.faq summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.03rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--accent-hot);
  flex: none;
}

.faq details[open] summary::after {
  content: '−';
}

.faq details p {
  color: var(--ink-dim);
  font-size: 0.96rem;
  margin: 0.75rem 0 0;
}

/* Hidden from sight, still read aloud. For labels that a sighted user infers from placeholder text
   or position, but which a screen reader needs stated — clip rather than display:none, because
   display:none removes it from the accessibility tree entirely. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}