@font-face{
  font-family:Manrope;
  src:url('../assets/fonts/manrope-regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
@font-face{
  font-family:Unbounded;
  src:url('../assets/fonts/unbounded-medium.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap
}
html{
  background:var(--color-base);
  scrollbar-gutter:stable
}
body{
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:20px;
  line-height:1.5;
  font-weight:400
}
h1,h2,h3{
  font-family:var(--font-heading);
  font-weight:500;
  letter-spacing:0
}
h1{
  font-size:var(--h1);
  line-height:var(--h1-line)
}
h2{
  font-size:40px;
  line-height:48px
}
h3{
  font-size:26px;
  line-height:34px
}
::selection{
  background:var(--color-mark);
  color:var(--color-text)
}
:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:4px
}
.container{
  width:calc(100% - var(--margin)*2);
  max-width:var(--container-max);
  margin-inline:auto
}
.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gutter)
}
.eyebrow,.caption{
  font-size:14px;
  line-height:20px
}
.technical{
  font-size:12px;
  line-height:16px
}
.short{
  font-size:18px;
  line-height:28px
}
.section{
  position:relative;
  padding-block:48px
}
.section::after{
  content:'';
  position:absolute;
  bottom:32px;
  left:0;
  right:0;
  border-bottom:1px solid var(--color-structure)
}
.section-label{
  margin-bottom:32px
}
.split-head{
  grid-column:span 4
}
.split-body{
  grid-column:span 8;
  min-width:0
}
.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;
  top:8px;
  left:8px;
  transform:translateY(-150%);
  z-index:20;
  background:var(--color-base);
  padding:12px
}
.skip-link:focus{
  transform:none
}
a,button{
  touch-action:manipulation
}
.reveal.is-visible{
  animation:appear 240ms ease-out both
}
@keyframes appear{
  from{
    opacity:0;
    transform:translateY(8px)
  }
  to{
    opacity:1;
    transform:none
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}