@font-face {
  font-family:Geist;
  src:url('/assets/geist-latin.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap
}
@font-face {
  font-family:Manrope;
  src:url('/assets/manrope-latin.woff2') format('woff2');
  font-weight:200 800;
  font-display:swap
}
:root {
  --paper:#fbfbfa;
  --ink:#37352f;
  --muted:#78776f;
  --line:#e5e4de;
  --accent:#385a8a;
  --blue-paper:#eef2f7;
  --font:Geist,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--font);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased
}
button,input,textarea {
  font:inherit
}
button,a,input,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a {
  color:var(--accent);
  text-underline-offset:4px
}
button {
  color:inherit
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px
}
button:hover,a:hover {
  color:#213d64
}
button:disabled {
  cursor:default
}
::selection {
  background:#dce5f2
}
[hidden] {
  display:none!important
}
.wrap {
  width:min(760px,calc(100% - 48px));
  margin-inline:auto
}
.skip-link {
  position:fixed;
  z-index:10;
  left:20px;
  top:-80px;
  background:var(--paper);
  padding:10px
}
.skip-link:focus {
  top:10px
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:31px 0;
  border-bottom:1px solid var(--line)
}
.brand {
  font-family:Manrope,var(--font);
  font-size:25px;
  font-weight:800;
  letter-spacing:-1.2px;
  color:var(--ink);
  text-decoration:none;
  line-height:1
}
.brand span,.demo-brand span {
  color:var(--accent)
}
.text-button {
  display:inline-block;
  border:0;
  padding:0;
  background:transparent;
  font-weight:500;
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px
}
.site-header .text-button {
  font-size:14px;
  text-decoration:none
}
.intro {
  padding:66px 0 43px;
  max-width:610px
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  font-family:Manrope,var(--font);
  font-weight:650
}
h1 {
  font-size:34px;
  line-height:1.32;
  letter-spacing:-1.1px;
  margin-bottom:23px
}
p {
  color:#69685f
}
p+p {
  margin-top:17px
}
.intro>p {
  font-size:17px;
  line-height:1.75;
  max-width:578px
}
.intro-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:25px
}
.powered {
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--muted);
  text-decoration:none
}
.powered img {
  object-fit:contain;
  margin-left:2px
}
.powered strong {
  color:#68665f;
  font-size:12px;
  font-weight:500
}
.how-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 205px;
  gap:38px;
  align-items:center;
}
.how-copy p {
  font-size:15px;
  line-height:1.8;
}
.context-figure {
  margin:0;
}
#context-illustration {
  width:100%;
  aspect-ratio:5/4;
  --hairline-plate:#fbfbfa;
  --hairline-hi:#385a8a;
  --hairline-edge:#8596a6;
  --hairline-mid:#a8b4bb;
  --hairline-lo:#d2d9d6;
  --hairline-stroke:.85;
}
.context-figure figcaption {
  font-size:10px;
  text-align:center;
  color:#929b89;
  margin-top:-8px;
}
.text-section {
  border-top:1px solid var(--line);
  padding:36px 0 40px
}
.text-section h2 {
  font-size:18px;
  letter-spacing:-.35px;
  line-height:1.5;
  margin-bottom:20px
}
.text-section>p {
  max-width:655px;
  line-height:1.8;
  font-size:15px
}
.use-list {
  margin:0
}
.use-list>div {
  display:grid;
  grid-template-columns:154px 1fr;
  gap:20px;
  margin-top:18px;
  font-size:14px;
  line-height:1.75
}
.use-list dt {
  color:var(--ink);
  font-weight:450
}
.use-list dd {
  margin:0;
  color:#797a70
}
.questions>div+div {
  margin-top:24px
}
.questions h3 {
  font-family:var(--font);
  font-size:14px;
  line-height:1.7;
  font-weight:550;
  margin-bottom:6px
}
.questions p {
  font-size:14px;
  line-height:1.8;
  max-width:650px
}
.closing {
  padding-bottom:58px
}
.closing h2 {
  margin-bottom:10px
}
.closing .text-button {
  margin-top:22px;
  font-size:15px
}
.site-footer {
  border-top:1px solid var(--line);
  padding:25px 0 36px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:11px;
  color:#92958b
}
.site-footer a {
  color:#7c8175;
  text-decoration:none
}
.site-footer a:hover {
  text-decoration:underline
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:3px;
  color:#fff;
  background:var(--accent);
  font-size:13px;
  font-weight:500;
  padding:10px 15px;
  text-decoration:none
}
.button:hover {
  background:#29486f;
  color:#fff
}
@media(max-width:600px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .site-header {
    padding:25px 0
  }
  .intro {
    padding:43px 0 32px
  }
  h1 {
    font-size:29px;
    letter-spacing:-.8px
  }
  .intro>p {
    font-size:16px
  }
  .intro-actions {
    gap:20px;
    flex-wrap:wrap;
    margin-top:21px
  }
  .intro-actions>.text-button {
    font-size:15px
  }
  .how-layout {
    grid-template-columns:1fr;
    gap:10px;
  }
  .how-copy p {
    font-size:14px;
  }
  .context-figure {
    width:170px;
    justify-self:center;
  }
  .text-section {
    padding:29px 0 32px
  }
  .use-list>div {
    grid-template-columns:1fr;
    gap:3px;
    margin-top:19px
  }
  .text-section h2 {
    font-size:17px;
    margin-bottom:18px
  }
  .text-section>p {
    font-size:14px
  }
  .use-list dd {
    font-size:14px
  }
  .closing {
    padding-bottom:40px
  }
  .site-footer {
    font-size:10px;
    gap:15px
  }
  .questions>div+div {
    margin-top:22px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}