/* Splash page styles. Colors match the marketing site. */
body {
  background-color: #080808;
  background-image: radial-gradient(
    ellipse 85% 65% at 50% 0%,
    #151044 0%,
    transparent 75%
  );
}

.banner {
  border-radius: 4px;
  background: rgba(255, 180, 84, 0.045);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 0 48px;
}

main h1 {
  max-width: 100%;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.16;
  letter-spacing: -0.035em;
  margin-bottom: 32px;
  text-wrap: balance;
}

html[lang='ko-KR'] main h1 {
  word-break: keep-all;
}

html[lang='ko-KR'] main h1 u {
  white-space: nowrap;
}

/* Echoes the logomark: a short red stroke and a long blue one, split by a small gap. */
main h1 u {
  display: inline;
  border: 0;
  color: inherit;
  text-decoration: none;
  padding-bottom: 6px;
  background-image: linear-gradient(
    110deg,
    #ff5936 0%,
    #bd2918 calc(30% - 1.5px),
    transparent calc(30% - 1.5px),
    transparent calc(30% + 1.5px),
    #3020b8 calc(30% + 1.5px),
    #6950ff 100%
  );
  background-position: left bottom 0;
  background-size: 100% 3px;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: underline-draw 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

/* Draws the stroke left to right on load. `both` holds the zero-width first frame through the
   delay, so the bar is absent until the word itself has settled. */
@keyframes underline-draw {
  from {
    background-size: 0 3px;
  }
  to {
    background-size: 100% 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  main h1 u {
    animation: none;
  }
}

main p {
  width: 100%;
  max-width: 520px;
  margin: 0;
  color: #a6adba;
  font-size: 15px;
  line-height: 1.7;
  text-wrap: pretty;
}

main .funds-note {
  max-width: 560px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: #cfcfcf;
  font-size: 15px;
}

main .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  max-width: 100%;
  margin-top: 28px;
  padding: 16px 24px;
  border-radius: 4px;
  background: #fff;
  color: #080808;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  transition: background-color 0.2s ease;
}

main .cta:hover {
  background: #eaecef;
  color: #080808;
}

main .cta:focus-visible,
main a:focus-visible {
  outline: 2px solid #cfcfcf;
  outline-offset: 5px;
}

main .splash-help {
  max-width: 560px;
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.7;
}

main .closure-note {
  max-width: 620px;
  font-size: 15px;
  line-height: 1.8;
  text-align: justify;
}

main .closure-date {
  max-width: 620px;
  margin-top: 16px;
  font-size: 14px;
  text-align: justify;
}

main .splash-help a,
main .closure-note a {
  color: #cbd0d7;
  border-bottom-color: #5a6b80;
}

main .splash-help a:hover,
main .closure-note a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

@media (max-width: 640px) {
  main {
    padding: 40px 0 32px;
  }

  main h1 {
    font-size: 44px;
    margin-bottom: 28px;
  }

  html[lang='en-US'] main h1 {
    font-size: 36px;
  }

  html[lang='ru-RU'] main h1 {
    font-size: clamp(30px, 8.5vw, 36px);
  }

  html[lang='ko-KR'] main h1 {
    font-size: 36px;
  }

  main p {
    font-size: 14px;
  }

  main .cta {
    width: 100%;
    margin-top: 24px;
    padding: 10px 16px;
  }

  main .closure-note {
    font-size: 14px;
  }
}