:root {
  /* The Up to Speed palette. Paper is the page, Ink is the type and the dark
     surfaces, Apricot is the one accent. Sage is reserved for "done" and
     "on track" states, never for brand furniture, and nothing here is red. */
  --bg: #FBF7F1;            /* Paper */
  --surface: #FFFFFF;
  --ink: #1F2A44;           /* Ink */
  --ink-soft: #3D4763;      /* Ink, softened, for leads and nav */
  --muted: #6B6257;         /* secondary text */
  --muted-2: #8A7F72;       /* muted, for large or decorative type only */
  --border: #EAE2D6;
  --border-strong: #D8CDBB;
  --accent: #C9713F;        /* Apricot */
  --accent-dark: #A85A2E;   /* Apricot, hover and dark variant */
  --accent-ink: #8E4C22;    /* Apricot darkened for small type on the tint */
  --accent-tint: #F5E6D8;
  --good: #3F8F8A;          /* Sage: done and on track */
  --warn: #C9713F;
  --shadow-sm: 0 1px 2px rgba(31, 42, 68, 0.04), 0 1px 3px rgba(31, 42, 68, 0.06);
  --shadow-md: 0 4px 12px rgba(31, 42, 68, 0.06), 0 2px 4px rgba(31, 42, 68, 0.04);
  --radius: 10px;
  --radius-sm: 6px;
  --container: 1080px;
  --reading: 720px;
  /* Bricolage Grotesque carries the wordmark, headings, eyebrows, nav and
     buttons. Newsreader carries everything you read at length. */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-dark); text-decoration: none; border-bottom: 1px solid rgba(168, 90, 46, 0.25); transition: border-color 120ms ease; }
a:hover { border-bottom-color: var(--accent-dark); }
a.plain { border: 0; }
a.plain:hover { color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  line-height: 1.2;
}
h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); letter-spacing: -0.022em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-top: 2.4em; }
h3 { font-size: 1.2rem; margin-top: 1.8em; font-weight: 600; letter-spacing: -0.005em; }
h4 { font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 1.6em; }

p { margin: 0 0 1.1em; }
p.lead { font-size: 1.18rem; color: var(--ink-soft); line-height: 1.55; }
small { color: var(--muted); font-size: 0.86rem; }

ul, ol { padding-left: 1.3em; margin: 0 0 1.2em; }
li { margin: 0.35em 0; }

hr { border: 0; border-top: 1px solid var(--border); margin: 3em 0; }

code, kbd { font-family: var(--font-mono); font-size: 0.9em; background: var(--accent-tint); padding: 0.1em 0.4em; border-radius: 4px; color: var(--accent-ink); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.reading { max-width: var(--reading); margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 247, 241, 0.88);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--accent-dark); }
.brand svg { display: block; }
/* The wordmark is set lowercase, and the leading letters of "up" and
   "speed" carry the accent. */
.brand .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  white-space: nowrap;
}
.brand .wordmark .mark { color: var(--accent); }
.brand:hover .wordmark .mark { color: var(--accent-dark); }
/* The line that sits under the wordmark in the footer. */
.brand-tagline { font-family: var(--font-display); font-weight: 500; color: var(--ink); margin: 10px 0 0; }

nav.primary { display: flex; gap: 26px; align-items: center; font-family: var(--font-display); }
nav.primary a { color: var(--ink-soft); border: 0; font-size: 0.95rem; }
nav.primary a:hover { color: var(--accent-dark); }
nav.primary a.cta {
  background: var(--accent-dark);
  font-weight: 600;
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
}
nav.primary a.cta:hover { background: var(--ink); color: #fff; }
@media (max-width: 640px) {
  nav.primary { gap: 12px; }
  nav.primary .hide-sm { display: none; }
  nav.primary a.cta { padding: 7px 12px; font-size: 0.84rem; white-space: nowrap; }
}
@media (max-width: 420px) {
  nav.primary .hide-xs { display: none; }
}

/* Hero */
.hero {
  padding: 80px 0 56px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(201, 113, 63, 0.07), transparent 60%),
    var(--bg);
}
.hero .container { max-width: 880px; text-align: center; }
.hero .eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-tint);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero h1 { margin-bottom: 0.5em; }
.hero p.lead { max-width: 620px; margin: 0 auto 2em; }
.cta-row { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 100ms ease, background 120ms ease, border-color 120ms ease;
}
.btn-primary { background: var(--accent-dark); color: #fff; border: 0; }
.btn-primary:hover { background: var(--ink); color: #fff; border-bottom: 0; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
/* The quiet line that sits under a call to action. */
.cta-note { font-size: 0.9rem; color: var(--muted); margin: 18px 0 0; }

/* Section primitive */
section.band { padding: 72px 0; border-bottom: 1px solid var(--border); }
section.band.tight { padding: 48px 0; }
section.band.alt { background: var(--surface); }
section.band h2 { margin-top: 0; }
section.band .intro { max-width: 640px; margin: 0 auto 48px; text-align: center; color: var(--muted); }
section.band .intro h2 { margin-bottom: 0.4em; color: var(--ink); }

/* Feature grid */
.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-top: 0; }
.card p { color: var(--muted); margin-bottom: 0; font-size: 0.96rem; }
.card .icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--accent-dark);
}

/* Steps */
.steps { counter-reset: step; display: grid; gap: 20px; max-width: 760px; margin: 0 auto; }
.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  align-items: start;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-family: var(--font-display);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.step h3 { margin: 0 0 6px; }
.step p { color: var(--muted); margin: 0; }

/* Data table */
.spec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.spec table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.spec th, .spec td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.spec th { background: var(--accent-tint); color: var(--accent-ink); font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.spec tr:last-child td { border-bottom: 0; }
.spec td:first-child { font-weight: 500; color: var(--ink); width: 35%; }
.spec td:nth-child(2) { color: var(--muted); }

/* Doc layout (privacy/terms/security) */
.doc {
  padding: 56px 0 80px;
}
.doc .reading h1 { font-size: 2.2rem; }
.doc .reading h2 { margin-top: 2em; font-size: 1.5rem; }
.doc .reading h3 { font-size: 1.05rem; }
.doc .meta {
  font-size: 0.86rem;
  color: var(--muted);
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--border);
}
.doc .toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 0 0 2.4em;
  font-size: 0.94rem;
}
.doc .toc h4 { margin-top: 0; margin-bottom: 0.6em; }
.doc .toc ol { margin: 0; padding-left: 1.3em; }
.doc .toc a { color: var(--ink-soft); border: 0; }
.doc .toc a:hover { color: var(--accent-dark); }

.callout {
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 1.6em 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
}
.callout strong { color: var(--ink); }

/* Footer */
.site-footer {
  padding: 48px 0 56px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--muted);
}
.site-footer .row {
  display: grid;
  gap: 36px;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
}
@media (max-width: 720px) {
  .site-footer .row { grid-template-columns: 1fr 1fr; }
}
.site-footer h5 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0.4em 0; }
.site-footer a { color: var(--muted); border: 0; }
.site-footer a:hover { color: var(--accent-dark); }
.site-footer .legal { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid var(--border); margin-top: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }