/* Self-hosted so the pages don't block on a third-party font CDN. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/anton-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plexmono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/plexmono-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/plexmono-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/plexmono-700.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/grotesk-400.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/grotesk-600.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/grotesk-700.woff2') format('woff2');}

/* Form controls don't inherit type from the page by default, and the design's
   mobile variants shipped without a font-family — which is why typed text and
   the post-submit page rendered in the browser's default face. */
input, select, textarea, button, option {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Roboto, Arial, sans-serif;
}
/* and if a webfont ever fails to load, land on a sans — never a serif */
body { font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system,
                    'Segoe UI', Roboto, Arial, sans-serif; }
input:required:invalid, select:required:invalid, textarea:required:invalid { }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #0a0a0a; outline-offset: 1px;
}

/* Fields that still need filling in */
.gx-invalid {
  border: 2px solid #d32f2f !important;
  background: #fff5f5 !important;
  outline: none;
}
input.gx-invalid[type="checkbox"] {
  outline: 2px solid #d32f2f; outline-offset: 2px; border-width: 1px !important;
}
.gx-error {
  display: block;
  margin: 6px 0 0;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.4;
  color: #a8000f;
}