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

@font-face {
  font-family: "Pocket Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-variable.woff2") format("woff2");
}

:root {
  --font-pocket-body: "Pocket Inter", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-pocket-display: "Pocket Space Grotesk", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-suisse-intl: var(--font-pocket-body);
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-pocket-body);
}

.hero__title,
.section-intro h2,
.play-mode__caption h3,
.try-play__copy h2,
.try-play__number-guide h3,
.portable__copy h2,
.appearance__copy h2,
.faq__heading,
.contact h2,
.closing-cta__title,
.footer__headline,
.wl-modal__title,
.wl-survey__title {
  font-family: var(--font-pocket-display);
  font-optical-sizing: auto;
}

.hero__title,
.section-intro h2,
.try-play__copy h2,
.portable__copy h2,
.appearance__copy h2,
.faq__heading,
.contact h2,
.closing-cta__title {
  letter-spacing: -.045em;
}

.hero__sub,
.try-play__copy p,
.portable__copy p,
.appearance__copy p,
.contact p,
.faq__a p {
  letter-spacing: -.012em;
}