/* -----------------------------------------------------------------------------
/* @font-face
/* -------------------------------------------------------------------------- */

@font-face {
  font-display: swap;
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/GilroyRegular.woff2") format("woff2"),
    url("/fonts/GilroyRegular.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/GilroySemiBold.woff2") format("woff2"),
    url("/fonts/GilroySemiBold.woff") format("woff");
}

/* -----------------------------------------------------------------------------
/* *
/* -------------------------------------------------------------------------- */

* {
  all: unset;
  cursor: revert;
  display: revert;
}

/* -----------------------------------------------------------------------------
/* body
/* -------------------------------------------------------------------------- */

body {
  font-size: 0.875rem;
}

/* -----------------------------------------------------------------------------
/* html
/* -------------------------------------------------------------------------- */

html {
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --line-height: 1.4;
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  color: var(--slate-800);
  font-family: Gilroy, sans-serif;
  line-height: var(--line-height);
}

/* -----------------------------------------------------------------------------
/* .alert
/* -------------------------------------------------------------------------- */

.alert {
  align-items: center;
  background-color: var(--red-100);
  border-radius: 0.5rem;
  color: var(--red-800);
  column-gap: 1rem;
  display: flex;
  padding: 1rem;
  white-space: pre-line;
}

.alert::before {
  aspect-ratio: 1;
  background-color: currentColor;
  content: "";
  height: calc(var(--line-height) * 1em);
  -webkit-mask-image: url(/icons/triangle-exclamation.svg);
  mask-image: url(/icons/triangle-exclamation.svg);
}

/* -----------------------------------------------------------------------------
/* .anchor
/* -------------------------------------------------------------------------- */

.anchor {
  column-gap: 0.5rem;
  color: var(--blue-700);
  cursor: pointer;
  display: inline-flex;
}

/* -----------------------------------------------------------------------------
/* .button
/* -------------------------------------------------------------------------- */

.button {
  background-color: var(--blue-700);
  border-radius: 0.5rem;
  color: white;
  column-gap: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 0.75rem;
  transition-duration: 150ms;
  transition-property: background-color;
  transition-timing-function: ease-in-out;
}

.button:hover {
  background-color: var(--blue-800);
}

/* -----------------------------------------------------------------------------
/* .field
/* -------------------------------------------------------------------------- */

.field {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

/* -----------------------------------------------------------------------------
/* .field__input
/* -------------------------------------------------------------------------- */

.field__input {
  align-self: stretch;
  background-color: var(--slate-100);
  border-color: var(--slate-100);
  border-radius: 0.5rem;
  border-style: solid;
  border-width: 0.0625rem;
  padding: 0.6875rem;
  transition-duration: 150ms;
  transition-property: border-color;
  transition-timing-function: ease-in-out;
}

.field__input:focus-visible {
  border-color: var(--blue-700);
}

/* -----------------------------------------------------------------------------
/* .field__label
/* -------------------------------------------------------------------------- */

.field__label {
  color: var(--slate-500);
}

/* -----------------------------------------------------------------------------
/* .fieldset
/* -------------------------------------------------------------------------- */

.fieldset {
  column-gap: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1rem;
}

/* -----------------------------------------------------------------------------
/* .icon
/* -------------------------------------------------------------------------- */

.icon::before {
  aspect-ratio: 1;
  background-color: currentColor;
  content: "";
  height: calc(var(--line-height) * 1em);
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* -----------------------------------------------------------------------------
/* .issue
/* -------------------------------------------------------------------------- */

.issue {
  color: var(--red-700);
  white-space: pre-line;
}

/* -----------------------------------------------------------------------------
/* .item
/* -------------------------------------------------------------------------- */

.item {
  border-color: var(--slate-200);
  border-radius: 0.5rem;
  border-style: solid;
  border-width: 0.0625rem;
  padding: 1.5rem;
}

/* -----------------------------------------------------------------------------
/* .section
/* -------------------------------------------------------------------------- */

.section:not(:last-child) {
  margin-bottom: 4rem;
}

/* -----------------------------------------------------------------------------
/* .section__title
/* -------------------------------------------------------------------------- */

.section__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 2rem;
  margin-top: 4rem;
}