/*
 * Reset, the type scale, and the global affordances (focus ring, reduced motion).
 * Everything here is an element selector or a single-purpose utility -- no components.
 */

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

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

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

::selection { background: var(--gold); color: var(--bg); }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hover); }

img, svg { max-width: 100%; display: block; }

/* One visible focus ring for the whole product. :focus-visible rather than :focus so a mouse
   click on a button does not leave a ring behind, while keyboard tabbing always shows one.
   Inputs set `outline: none` for their border-colour treatment, so they opt back in below. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-btn);
}

/* Motion here is colour and border only, plus one blinking cursor and one marquee. Someone who
   has asked for less movement gets none of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ------------------------------------------------------------ Typography --- */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 0.5em;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

h1 { font-size: clamp(40px, 6vw, 66px); line-height: 1.0; letter-spacing: -0.035em; }
h2 { font-size: clamp(30px, 4vw, 40px); }
h3 { font-size: 20px; letter-spacing: -0.02em; }
h4 { font-size: 16px; letter-spacing: normal; }

p { margin: 0 0 1em; max-width: var(--measure); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}

.lede { font-size: 19px; color: var(--ink-3); }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }

/* Mono uppercase label: section indices, stat labels, table headers, eyebrows in the app.
   11.5px is small, so it is set in --muted and never below -- this is the text floor. */
/* The display size: the one heading on a page that is allowed to be huge. A class rather than
   an element, because it lands on an h1 on the marketing site and an h1 in the app, and the
   h1 size itself has to stay usable for pages that are not a landing page. */
.display {
  font-size: clamp(38px, 7.2vw, 78px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.center { text-align: center; }


/* ------------------------------------------------------------- Mobile ------ */
@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: clamp(34px, 11vw, 52px); }
  .lede { font-size: 17px; }
}