/* ==========================================================================
   base.css — the document frame, ours.

   The previous build took these from a compiled framework stylesheet: a reset, the centred container
   every section sits in, and a handful of utilities. This file replaces that dependency. It is deliberately
   small — it holds the frame and nothing else, because every visual decision already lives in
   tokens.css and the section stylesheets.

   The container's numbers are the ones the whole build was measured against: a 1360 column with a 40
   gutter, giving the 1280 content width that Figma's 1920 frame resolves to (see nav.css). They are
   not new values; they are the ones already in force.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--cx-page);
  color: var(--cx-ink);
  font-family: var(--cx-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* headings carry no type of their own: every size and weight on this site comes from a role in tokens.css or
   from the section's own stylesheet, so the UA's bold-and-bigger defaults are cleared. The previous
   build had this in its reset; without it the grid's h3 rendered at 700 where the design is 400. */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
/* …and no block carries the UA's em-based margins either: spacing on this site is set by the component that
   owns it, never inherited from the browser. The previous build had this too; without it /compare's ten
   body paragraphs each took a 16px margin the design never asked for, and the page grew 160px. */
p, blockquote, figure, pre, dl, dd, fieldset { margin: 0; }

img, svg, video { display: block; max-width: 100%; }
/* an image sized by CSS keeps its ratio rather than its height ATTRIBUTE. Without this the ask section's
   16×16 icons, drawn at width 8, rendered 8×16 (measured). */
img, video { height: auto; }
/* lists are layout here as often as they are prose, so markers are off by default and the components that
   want them say so — legal.css asks for `disc`, and does it on the element rather than by inheritance. */
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
/* links carry no underline by default and the components that want one say so (legal.css, the footnote).
   The previous build had this in its reset; without it every nav button and card link was underlined. */
a { color: inherit; text-decoration: none; }

/* the column every section is measured in */
.container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media (max-width: 1023px) { .container { padding-inline: 20px; } }

/* screen-reader-only, for the labels a visual design leaves implicit */
.cx-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}