/* Resets and globals. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--mp-page);
  color: var(--mp-ink);
  font-family: var(--mp-font-sans);
  font-size: var(--mp-text-body);
  line-height: var(--mp-lh-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

/* Money is data: tabular, slashed-zero figures everywhere mono appears. */
code, kbd, samp, pre, .mp-mono { font-family: var(--mp-font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "zero" 1; }

h1, h2, h3, h4 { margin: 0; font-weight: var(--mp-w-bold); }
h1 { font-size: var(--mp-text-h1); line-height: var(--mp-lh-h1); letter-spacing: var(--mp-track-h1); }
h2 { font-size: var(--mp-text-h2); }
h3 { font-size: var(--mp-text-h3); }
p  { margin: 0; }

/* Always define both — users add links later and an undefined link renders browser blue. */
a { color: var(--mp-primary); }
a:hover { color: var(--mp-secondary-ink); }

input, button, select, textarea { font: inherit; color: inherit; }
input[type="range"] { accent-color: var(--mp-accent); height: var(--mp-h-slider); cursor: pointer; width: 100%; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--mp-focus);
  outline-offset: var(--mp-focus-offset);
}

/* Vertical scroll only. */
html, body { overflow-x: hidden; }
img, svg { max-width: 100%; }

@media print {
  body { background: #fff; }
  .mp-ad, .mp-header nav, .mp-footer, .mp-rollup__toggle { display: none !important; }
  .mp-rollup__body { display: block !important; }
  .mp-card { box-shadow: none; break-inside: avoid; }
}