:root {
  --site-header-top: 12px;
  --site-header-space: 90px;
}

html { scroll-padding-top: var(--site-header-space); }
body { padding-top: var(--site-header-space); }
.skip { z-index: 30; }

.header {
  position: fixed;
  z-index: 20;
  inset: var(--site-header-top) 0 auto;
  pointer-events: none;
}

.header .header-inner {
  min-height: 64px;
  padding-inline: clamp(12px, 2.2vw, 24px);
  border: 1px solid rgba(219, 225, 238, .88);
  border-radius: 999px;
  background: #fafbff;
  box-shadow: 0 7px 22px rgba(17, 25, 45, .09);
  pointer-events: auto;
}

@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .header .header-inner {
    background: rgba(250, 251, 255, .78);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    backdrop-filter: blur(16px) saturate(145%);
  }
}

.header .compact { background: rgba(255, 255, 255, .75); }
.header nav a { padding-block: 8px; }

.site-footer {
  margin: clamp(28px, 4vw, 58px) auto 20px;
  padding: clamp(22px, 4vw, 48px);
  border-radius: 24px;
  background: #171719;
  color: #fff;
}

.footer-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px 32px;
  padding-bottom: clamp(20px, 3vw, 34px);
  border-bottom: 1px solid #3d3e47;
}

.footer-cta .eyebrow { color: #b9ccff; }
.footer-cta h2 {
  margin: 5px 0 6px;
  font-size: clamp(27px, 4.2vw, 54px);
  line-height: 1.04;
  letter-spacing: -.06em;
}

.footer-cta p:not(.eyebrow), .footer-about p {
  max-width: 42ch;
  color: #c7cbd6;
  font-size: 14px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1fr);
  gap: 22px;
  padding-block: clamp(20px, 3vw, 34px);
}

.footer-about p { margin-top: 8px; }
.footer-heading { margin-bottom: 8px; font-size: 13px; font-weight: 750; }
.footer-links { display: grid; justify-items: start; gap: 7px; }
.footer-links a, .footer-bottom a { color: #c7cbd6; font-size: 13px; overflow-wrap: anywhere; }
.footer-links a:hover, .footer-bottom a:hover { color: #fff; text-decoration: underline; }
.site-footer a:focus-visible { outline-color: #b9ccff; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 13px;
  border-top: 1px solid #3d3e47;
  color: #b8bdca;
  font-size: 12px;
}

@media (max-width: 680px) {
  :root { --site-header-top: 8px; --site-header-space: 104px; }
  .header .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 84px;
    padding-block: 8px;
    gap: 1px 8px;
    border-radius: 22px;
  }
  .header .brand { font-size: 19px; }
  .header .brand-symbol { width: 20px; height: 20px; }
  .header nav {
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: 6px;
  }
  .header .compact { padding: 7px 9px; }
  .site-footer { border-radius: 18px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 12px; }
  .footer-about { grid-column: 1 / -1; }
}