:root {
  --primary: #204297;
  --primary-dark: #173477;
  --primary-soft: #e8eefc;
  --accent: #dec439;
  --accent-dark: #9b8615;
  --ink: #14213d;
  --muted: #626b7e;
  --bg: #f7f9fc;
  --surface: #fff;
  --surface-2: #f0f3f8;
  --border: #dce2ec;
  --success: #138a62;
  --warning: #9b6c0c;
  --danger: #c53f4b;
  --info: #204297;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 8px rgba(32,66,151,.06);
  --shadow: 0 16px 40px rgba(32,66,151,.12);
  --container: 1180px;
  --narrow: 720px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;
  --fast: 160ms ease;
  --font: Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*,*:before,*:after {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing:antialiased
}
h1,h2,h3,p {
  margin-top: 0
}
h1,h2,h3 {
  line-height: 1.12;
  letter-spacing: -.025em
}
h1 {
  font-size: clamp(2.4rem,6vw,4.8rem)
}
h2 {
  font-size: clamp(1.65rem,3vw,2.5rem)
}
h3 {
  font-size: 1.15rem
}
a {
  color: var(--primary-dark);
  text-decoration: none
}
a: hover {
  text-decoration: none;
  color: var(--primary)
}
button,input,textarea,select {
  font: inherit
}
button,a {
  transition: color var(--fast),background var(--fast),border-color var(--fast),transform var(--fast),box-shadow var(--fast)
}
button: focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline: 3px solid color-mix(in srgb,var(--accent) 70%,transparent);
  outline-offset: 3px
}
.container {
  width: min(calc(100% - 2rem),var(--container));
  margin-inline: auto
}
.narrow {
  max-width: var(--narrow)
}
.section {
  padding: var(--space-8) 0
}
.soft-section {
  background: var(--surface-2)
}
.center {
  text-align: center
}
.muted {
  color: var(--muted)
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0
}
.skip-link {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: .7rem 1rem;
  border-radius: 8px
}
.skip-link:focus {
  top: 1rem
}
.eyebrow {
  display: block;
  margin-bottom: .65rem;
  color: var(--primary-dark);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase
}
.pill,.badge,.status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700
}
.pill {
  padding: .5rem .75rem;
  background: var(--primary-soft);
  color: var(--primary-dark)
}
.badge {
  padding: .35rem .65rem;
  background: var(--primary-soft);
  color: var(--primary-dark)
}
.status {
  padding: .35rem .65rem
}
.status i {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: currentColor
}
.status-success {
  background: #e7f7f1;
  color: var(--success)
}
.status-warning {
  background: #fff4d6;
  color: var(--warning)
}
.text-success {
  color: var(--success)
}
.text-danger {
  color: var(--danger)
}
.avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg,var(--accent),#f1e6a4);
  color: var(--primary-dark);
  font-weight: 800;
  overflow: hidden
}
.avatar img {
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(255, 255, 255, .8);
  border-radius: inherit;
  object-fit: cover;
  object-position: center
}
.avatar img[hidden] {
  display: none
}
.avatar-sm {
  width: 36px;
  height: 36px;
  font-size: .8rem
}
.avatar-lg {
  width: 64px;
  height: 64px
}
.avatar-xl {
  width: 92px;
  height: 92px;
  font-size: 1.4rem
}
.card {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm)
}
@media(max-width:600px) {
  .section {
    padding: 3.5rem 0
  }
  .container {
    width: min(calc(100% - 1.25rem),var(--container))
  }
  .card {
    padding: 1.15rem
  }
  h1 {
    font-size: 2.45rem
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior: auto!important;
    transition-duration: .01ms!important;
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important
  }
}