/* Typography */

.hero-text {
  line-height: 90%;
  font-style: normal;
  font-weight: normal;
  letter-spacing: -0.02em;
  padding-bottom: 50px;
}
h1,
.h1 {
  text-align: center;
  font-size: 6.5rem;
  /* font-family: var(--font-serif); */
  font-weight: 600;
  line-height: calc(48em / 42);
  letter-spacing: -0.02em;

  /* padding-top: 4rem;
  padding-bottom: 8rem; */
}

h2,
.h2 {
  font-size: 2.4rem;
  line-height: 1em;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding-bottom: var(--pad-s);
}

.h2-sub {
  font-size: 1.2rem;
  font-family: var(--font-serif);
  line-height: 1.5rem;
  padding-bottom: 3rem;
  letter-spacing: -0em;
  font-family: var(--font-sans);
}

.sub-center {
  text-align: center;
  margin: auto;
}
.sub-left {
  text-align: left;
}
p,
.p {
  font-size: 1.6rem;
  line-height: 1.9rem;

  font-family: var(--font-sans);
}

/* .use-case-heading {
  letter-spacing: -0.024em;
  color: var(--text-gray);
  font-size: 1.5rem;
  line-height: 1.8rem;
  font-family: var(--font-serif);
  font-weight: 600;
  padding-bottom: 1.6rem;
} */

.use-case-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: calc(4em / 3);
  letter-spacing: -0em;
  color: var(--text-white-transparent);
}

.use-case-caption a {
  color: var(--text-white-transparent);
}

.use-case-caption a:hover {
  color: white;
}

.use-case-caption a:visited {
  color: var(--text-white-transparent);
}

h3,
.h3 {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1em;
  padding-bottom: var(--pad-s);
}

.h3-sub {
  letter-spacing: -0.01em;
  padding-bottom: var(--pad-s);
}
.h4-sub {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  padding-bottom: var(--pad-s);
}

.h4 {
  font-size: 1.5rem;
  line-height: 1em;
  padding-bottom: 1rem;
}

.h5 {
  font-size: 1.25rem;
}

.footnote {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  line-height: calc(4em / 2.8);
  color: var(--text-black-transparent);
  letter-spacing: 0.01em;
}

aside.footnote {
  max-width: 40ch;
  margin-bottom: var(--pad-s);
}

.footnote strong {
  font-weight: 600;
}

.bg-grey-dark .footnote {
  color: var(--text-white-transparent);
}

@media only screen and (min-width: 480px) {
  h1,
  .h1 {
    /* font-size: 4.5rem; */
  }
  h2,
  .h2 {
    font-size: 3.2rem;
  }

  /* .use-case-heading {
    letter-spacing: -0.024em;
    font-size: 2rem;
    line-height: 2.2rem;
    font-weight: 600;
    padding-bottom: 2.4rem;
  } */

  .use-case-caption {
    font-weight: 500;
    font-size: 1rem;
    line-height: calc(4em / 2.8);
    letter-spacing: -0em;
  }

  .h2-sub {
    font-size: 1.5rem;
    line-height: 2rem;
    padding-bottom: 3rem;
    letter-spacing: -0em;
    font-family: var(--font-sans);
  }

  h3,
  .h3 {
    font-size: 2.4rem;
  }

  .h4 {
    font-size: 2rem;
  }
}