*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  margin:0;
  color:var(--ink);
  letter-spacing:-.01em;
}

p{margin:0}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
img,svg{display:block;max-width:100%}

.container{max-width:var(--maxw);margin:0 auto;padding:0 32px}

em{font-style:italic;color:var(--teal-deep);font-family:var(--font-display);font-weight:500}

.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.eyebrow .num{color:var(--teal);font-weight:700}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

:focus-visible{outline:2px solid var(--teal);outline-offset:2px}