:root {
  --marketing-font-body: "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --marketing-font-display: "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --marketing-font-accent: Futura, "Century Gothic", "Avenir Next", "Trebuchet MS", var(--marketing-font-display);
  --marketing-font-editorial: var(--marketing-font-display);
  --marketing-font-signal: "SFMono-Regular", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --marketing-focus: #b8d4ff;
  --marketing-accent-from: #8ab7ff;
  --marketing-accent-to: #79ead1;
  --marketing-accent-solid: #b8d4ff;
  --marketing-accent-halo: rgba(123, 181, 255, 0.3);
}

html {
  font-family: var(--marketing-font-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
.brand-wordmark {
  font-family: var(--marketing-font-display);
}

.brand-wordmark {
  font-weight: 700;
}

.brand-wordmark-3d {
  font-weight: 700;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--marketing-focus);
  outline-offset: 4px;
}

.type-accent {
  color: var(--marketing-accent-solid);
  font-family: var(--marketing-font-accent);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.022em;
  background: none;
  text-decoration: none;
}

.type-accent--blue {
  --marketing-accent-solid: #b8d4ff;
  --marketing-accent-halo: rgba(112, 168, 255, 0.32);
}

.type-accent--mint {
  --marketing-accent-solid: #b9e8df;
  --marketing-accent-halo: rgba(103, 234, 205, 0.3);
}

.type-accent--cyan {
  --marketing-accent-solid: #b7e2e7;
  --marketing-accent-halo: rgba(105, 219, 231, 0.3);
}

.type-accent--violet {
  --marketing-accent-solid: #cec7ff;
  --marketing-accent-halo: rgba(177, 152, 255, 0.3);
}

.type-accent--warm {
  --marketing-accent-solid: #f0d2b7;
  --marketing-accent-halo: rgba(244, 181, 126, 0.28);
}

@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .type-accent--reveal {
      display: inline-block;
      color: var(--marketing-accent-solid);
      background-color: var(--marketing-accent-solid);
      background-image:
        linear-gradient(
          106deg,
          transparent 0%,
          transparent 40%,
          rgba(255, 255, 255, 0.08) 44%,
          rgba(226, 246, 255, 0.58) 47.5%,
          rgba(255, 255, 255, 0.98) 50%,
          rgba(207, 235, 255, 0.52) 52.5%,
          rgba(255, 255, 255, 0.06) 56%,
          transparent 60%,
          transparent 100%
        ),
        linear-gradient(
          106deg,
          transparent 0%,
          transparent 30%,
          var(--marketing-accent-halo) 45%,
          rgba(255, 255, 255, 0.18) 52%,
          var(--marketing-accent-halo) 59%,
          transparent 72%,
          transparent 100%
        ),
        linear-gradient(var(--marketing-accent-solid), var(--marketing-accent-solid));
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-position: 118% 0, 124% 0, 0 0;
      background-size: 235% 100%, 185% 100%, 100% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: marketing-accent-text-sweep 6.8s linear 0.6s infinite;
      vertical-align: baseline;
    }
  }
}

@keyframes marketing-accent-text-sweep {
  0%,
  8% {
    background-position: 118% 0, 124% 0, 0 0;
  }

  34%,
  42% {
    background-position: -18% 0, -12% 0, 0 0;
  }

  43%,
  52% {
    background-position: 118% 0, -12% 0, 0 0;
  }

  67%,
  100% {
    background-position: -18% 0, -12% 0, 0 0;
  }
}

.type-versus {
  display: inline-flex;
  margin-inline: 0.08em;
  color: #8192b2;
  font-family: var(--marketing-font-signal);
  font-size: 0.34em;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-0.32em);
}

.type-note {
  font-family: var(--marketing-font-signal);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .type-accent {
    background: none;
    color: currentColor;
    -webkit-text-fill-color: currentColor;
    animation: none;
  }

  :where(a, button, input, select, textarea, summary):focus-visible {
    outline-color: Highlight;
  }
}