html {
  scroll-padding-top:140px
}

body {
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  color:var(--color-text);
  background:var(--color-background)
}

h1,h2,h3 {
  line-height:1.25;
  color:var(--color-dark);
  font-weight:700
}

h1 {
  font-size:36px;
  letter-spacing:-1.1px
}

h2 {
  font-size:23px;
  letter-spacing:-.5px
}

h3 {
  font-size:15px
}

p {
  color:var(--color-text-muted)
}

button {
  background:none
}

a,button {
  transition:color .15s,background .15s,border-color .15s
}

a:hover {
  color:var(--color-primary)
}

button:disabled {
  cursor:not-allowed;
  opacity:.5
}

:focus-visible {
  outline:3px solid #668fd0;
  outline-offset:3px
}

input,select,textarea {
  border:1px solid #d5dbe3;
  border-radius:var(--radius-sm);
  background:#fff;
  min-width:0;
  padding:11px 12px;
  max-width:100%
}

input:focus,textarea:focus,select:focus {
  outline:2px solid #91aed9;
  outline-offset:1px
}

input[type=checkbox],input[type=radio] {
  accent-color:var(--color-primary);
  width:16px;
  height:16px;
  flex:none
}

textarea {
  resize:vertical
}

summary {
  cursor:pointer
}

small,.small {
  font-size:12px
}

.muted {
  color:var(--color-text-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
}

.icon {
  width:20px;
  height:20px;
  flex-shrink:0;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}

.skip-link {
  position:fixed;
  top:-80px;
  left:16px;
  padding:12px 20px;
  background:var(--color-primary);
  color:white;
  z-index:200
}

.skip-link:focus {
  top:10px
}

.eyebrow {
  font-size:10px;
  letter-spacing:1.35px;
  font-weight:700;
  color:var(--color-primary);
  display:block
}

.button {
  min-height:43px;
  padding:10px 19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:13px;
  text-align:center;
  border:1px solid transparent
}

.primary {
  background:var(--color-primary);
  color:#fff
}

.primary:hover {
  background:var(--color-primary-dark);
  color:#fff
}

.secondary {
  background:#fff;
  border-color:var(--color-border)
}

.secondary:hover {
  border-color:var(--color-primary);
  background:var(--color-primary-light)
}

.light {
  background:white;
  color:var(--color-primary)
}

.light:hover {
  background:#e9f0fa
}

.text-button {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 0;
  font-size:12px
}

.text-button:hover {
  color:var(--color-primary)
}

.icon-button {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:6px
}

.icon-button:hover {
  background:var(--color-primary-light)
}

.button-row {
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap
}

.panel {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:28px
}

.panel>h2,.panel>h3 {
  margin-bottom:14px
}

.panel>p {
  margin-bottom:18px
}

.panel>p:last-child {
  margin-bottom:0
}

.info-note {
  padding:17px 20px;
  background:var(--color-primary-light);
  color:#43556e;
  border-radius:var(--radius-sm);
  margin:24px 0;
  font-size:13px
}

.no-script {
  padding:16px;
  text-align:center;
  background:#fff1d1
}

.prose {
  max-width:850px;
  margin:0 auto
}

.prose h1 {
  margin-bottom:25px
}

.prose h2 {
  margin:28px 0 12px
}

.prose p {
  line-height:1.8;
  margin-bottom:16px
}

.prose>a:not(.button) {
  color:var(--color-primary);
  font-weight:600
}

.prose details {
  border-bottom:1px solid var(--color-border);
  padding:18px 0
}

.prose summary {
  font-weight:600
}

.prose details p {
  margin:12px 0 0
}

.full-width {
  grid-column:1/-1
}