@font-face {
  font-family: "SF Pro Display";
  src: url("../assets/fonts/SFProDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("../assets/fonts/SFProDisplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("../assets/fonts/SFProDisplay-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue-50: #F1F6FD;
  --blue-100: #E3EEFB;
  --blue-200: #C2D8F7;
  --blue-300: #8EB6F0;
  --blue-400: #5A93E6;
  --blue-500: #2E74DB;
  --blue-600: #1B5BC0;
  --blue-700: #0F4AA3;
  --blue-800: #003F87;
  --blue-900: #0A2A5C;
  --blue-950: #061B3A;
  --sky-100: #E0F1FB;
  --sky-300: #8FCBEC;
  --sky-500: #3FA0DC;
  --sky-600: #2A86C0;
  --grey-0: #FFFFFF;
  --grey-50: #F7F9FC;
  --grey-100: #EEF2F7;
  --grey-200: #DFE5EE;
  --grey-300: #C5CEDB;
  --grey-400: #9AA6B8;
  --grey-500: #6B7689;
  --grey-600: #4F5868;
  --grey-700: #3A414E;
  --grey-800: #252A34;
  --grey-900: #15181F;
  --green-100: #DDF5E7;
  --green-600: #1B8F4E;
  --green-700: #146E3C;
  --amber-100: #FEF1D6;
  --amber-600: #C97A06;
  --amber-700: #9A5D03;
  --red-100: #FDE3E3;
  --red-600: #D0342C;
  --red-700: #A8271F;

  --brand: var(--blue-800);
  --brand-strong: var(--blue-900);
  --brand-accent: var(--sky-500);
  --text-heading: var(--grey-900);
  --text-body: var(--grey-700);
  --text-muted: var(--grey-500);
  --text-disabled: var(--grey-400);
  --text-on-brand: var(--grey-0);
  --surface-page: var(--grey-0);
  --surface-subtle: var(--grey-50);
  --surface-inverse: var(--blue-950);
  --border-subtle: var(--grey-100);
  --border-default: var(--grey-200);
  --border-focus: var(--blue-500);
  --border-inverse: rgba(255, 255, 255, 0.14);
  --action-primary: var(--blue-800);
  --action-primary-hover: var(--blue-900);
  --action-primary-active: var(--blue-950);
  --status-danger: var(--red-600);

  --font-display: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --type-body: 400 15px/1.55 var(--font-body);
  --type-small: 400 13px/1.5 var(--font-body);
  --type-caption: 500 12px/1.5 var(--font-body);
  --tracking-caps: 0.12em;

  --radius-md: 6px;
  --radius-full: 999px;
  --shadow-md: 0 4px 12px rgba(6, 27, 58, 0.08), 0 1px 3px rgba(6, 27, 58, 0.05);
  --ring-focus: 0 0 0 3px rgba(46, 116, 219, 0.35);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --gradient-photo: linear-gradient(160deg, var(--blue-950), var(--blue-800) 60%, var(--blue-600));

  --container: 1280px;
  --gutter: 40px;
  --nav-height: 76px;
  --section: 128px;
  --section-sm: 96px;
  --section-xs: 72px;
  --grid-gap: 64px;
}

@media (max-width: 1024px) {
  :root {
    --section: 96px;
    --section-sm: 72px;
    --section-xs: 56px;
    --grid-gap: 48px;
  }
}

@media (max-width: 768px) {
  :root {
    --gutter: 24px;
    --section: 64px;
    --section-sm: 56px;
    --section-xs: 40px;
    --grid-gap: 40px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-body);
  background: var(--surface-page);
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--text-heading);
  text-wrap: balance;
}

h1:focus {
  outline: none;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--blue-200);
  color: var(--blue-950);
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-md);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.overline {
  font: 500 12px/1 var(--font-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.overline.inverse {
  color: rgba(255, 255, 255, 0.6);
}

.h2 {
  font: 500 clamp(34px, 3.6vw, 48px)/1.08 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--text-heading);
  margin-top: 20px;
}

.h2.inverse {
  color: #fff;
}

.lead {
  font: 400 18px/1.6 var(--font-body);
  color: var(--text-muted);
  margin-top: 20px;
}

.lead.inverse {
  color: rgba(255, 255, 255, 0.72);
}

.rule {
  border-top: 1px solid var(--border-default);
}

.rule.inverse {
  border-top-color: var(--border-inverse);
}

.index {
  font: 500 12px var(--font-mono);
  color: var(--text-muted);
}

.index.inverse {
  color: rgba(255, 255, 255, 0.55);
}

.split {
  display: grid;
  gap: var(--grid-gap);
}

.split.wide {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.split.narrow {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.split.even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.split.end {
  align-items: end;
}

.split.center {
  align-items: center;
}

.order-first {
  order: 1;
}

.order-last {
  order: 2;
}

@media (max-width: 1024px) {
  .split.wide,
  .split.narrow,
  .split.even {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-first {
    order: 2;
  }

  .order-last {
    order: 1;
  }
}

#blazor-error-ui {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}