@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

#rca-root *,
#rca-root *::before,
#rca-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#rca-root button:focus { outline: none; }
#rca-root button:focus-visible { outline: 2px solid var(--rca-primary); outline-offset: 2px; }

#rca-root {
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rca-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Without this, mobile browsers auto-"boost" font sizes in text-dense
     narrow blocks (their heuristic for readability) - the declared rem
     sizes stop meaning anything and rows like the talon review cards can
     render 2-3x larger than every other screen in the form. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#rca-root h1,
#rca-root h2,
#rca-root h3,
#rca-root h4 {
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  line-height: 1.2;
}

#rca-root input,
#rca-root select,
#rca-root textarea,
#rca-root button {
  font-family: inherit;
  font-size: inherit;
}

#rca-root a {
  color: var(--rca-primary);
  text-decoration: none;
}