:root {
  --paper: #eef2ef;
  --paper-deep: #e2e8e4;
  --ink: #16201d;
  --muted: #5c6863;
  --line: #c5cec9;
  --blue: #1648d8;
  --blue-dark: #0d3199;
  --signal: #d9ff4f;
  --white: #f9fbf9;
  --display: "Space Grotesk", sans-serif;
  --body: "Manrope", sans-serif;
  --mono: "DM Mono", monospace;
  --page: min(1380px, calc(100vw - 72px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
h1, h2, h3, p { margin-top: 0; }
::selection { color: var(--white); background: var(--blue); }

.skip-link {
  position: fixed;
  z-index: 20;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  color: var(--white);
  background: var(--blue);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.eyebrow {
  margin-bottom: 18px;
  color: var(--blue);
  font: 500 11px/1.2 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
kbd {
  padding: 2px 5px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font: 400 10px/1 var(--mono);
}

.wordmark {
  font: 700 19px/1 var(--display);
  letter-spacing: -.06em;
}
.wordmark span { color: var(--blue); }

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