@font-face{
  font-family:Inter;
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/InterVariable-latin.woff2") format("woff2");
}

:root{
  --brand-blue:#0044FF;
  --brand-pink:#E7417E;
  --brand-orange:#E27333;
  --brand-coral:#E54D6A;
  --brand-gradient:linear-gradient(90deg,var(--brand-blue) 0%,var(--brand-pink) 40%,var(--brand-orange) 72%,var(--brand-coral) 100%);
  --white:#FFFFFF;
  --black:#000000;
  --gray:#666666;
  --hairline:#E5E5E5;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(16px,5vw,48px);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
  background:var(--white);
  color:var(--black);
  font-family:var(--font);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--brand-blue)}
a:focus-visible{outline:2px solid var(--brand-blue);outline-offset:3px}

.site-header{
  padding:24px var(--gutter);
  border-bottom:2px solid transparent;
  border-image:var(--brand-gradient) 1;
}
.site-header .brand{display:inline-block;line-height:0}
.site-header .brand img{height:30px;width:auto}

.hero{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:64px var(--gutter);
}

.eyebrow{
  margin:0 0 16px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gray);
}

h1{
  margin:0 0 24px;
  max-width:16ch;
  font-size:clamp(36px,7vw,64px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
}

.gradient-text{
  background:var(--brand-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lede{
  margin:0 0 32px;
  max-width:36em;
}

.btn{
  display:inline-block;
  padding:12px 28px;
  border-radius:999px;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
}
.btn-secondary{
  background:var(--white);
  border:1.5px solid var(--brand-blue);
  color:var(--black);
}
.btn-secondary:hover{background:var(--brand-blue);color:var(--white)}

.site-footer{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  justify-content:space-between;
  padding:24px var(--gutter);
  border-top:1px solid var(--hairline);
  font-size:13px;
  color:var(--gray);
}
.site-footer a{color:var(--gray)}