*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; color: var(--text-strong); letter-spacing: var(--track-title); text-wrap: pretty }
h1 { font: var(--type-display-2); letter-spacing: var(--track-display) }
h2 { font: var(--type-title-1) }
h3 { font: var(--type-title-3) }
p { margin: 0; text-wrap: pretty }
a { color: var(--text-link); text-decoration: none; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-standard) }
a:hover { color: var(--text-link-hover); text-decoration: underline }
button { font-family: inherit }
img { max-width: 100% }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px }
::selection { background: var(--lime-500); color: var(--ink-900) }
.vyre-eyebrow { font: var(--type-eyebrow); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--text-muted) }
.vyre-wordmark { font-family: var(--font-mark); font-weight: 300; letter-spacing: var(--track-mark); text-transform: uppercase }
.vyre-data { font: var(--type-data); font-variant-numeric: tabular-nums }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important } }