/* Base: the reset the mockups assume, the page, headings, links, the focus ring and reduced motion. Values from tokens.css only. */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--font-body);
}

h1, h2, h3, h4, p { margin: 0; }
h1 { font: 600 var(--fs-h1) var(--font-head); letter-spacing: -0.01em; }
h2 { font: 600 var(--fs-h2) var(--font-head); letter-spacing: -0.015em; }
h3 { font: 600 var(--fs-h3) var(--font-head); }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { margin: 0; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Figures that line up: money, counts, dates. */
.num { font-variant-numeric: tabular-nums; }

/* Read by a screen reader, not shown. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* A class that sets display must not undo the hidden attribute. */
[hidden] { display: none !important; }

/* Reduced motion: every animation and transition is off, pseudo-elements included (the tile sheen is one, the dialog scrim is another). A drawn tick stays drawn. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, *::backdrop { animation: none !important; transition: none !important; }
  .draw { stroke-dashoffset: 0 !important; } /* !important: components.css loads after this file and sets the hidden start */
}