/*
 * Welcome — launch-screen.html
 * Figma: Fjwp2LpKcYRD1xkBAnaVHB (Launch screen 263:86443 / 263:86530 / 263:86604)
 */

.launch {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: 0 max(var(--page-inline), env(safe-area-inset-right, 0px)) var(--space-40)
    max(var(--page-inline), env(safe-area-inset-left, 0px));
  background: var(--color-bg-mobile);
}

.launch__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content-mobile);
  min-height: 100dvh;
}

.launch__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  width: 100%;
  margin-top: auto;
}

.launch__logo {
  width: 220px;
  height: 220px;
  object-fit: contain;
  flex-shrink: 0;
}

.launch__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
}

.launch__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  text-align: center;
}

.launch__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

.launch__subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  max-width: 100%;
}

.launch__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
}

.launch__signin {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

.launch__signin-link {
  font-weight: 600;
}

.launch__signin-link:hover {
  color: var(--color-button);
}

.launch__guest-link {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 768px) {
  body,
  .launch {
    background: var(--color-bg-tablet);
  }

  .launch {
    align-items: center;
    justify-content: center;
    padding: var(--space-40) var(--space-16);
  }

  .launch__inner {
    min-height: auto;
    max-width: 768px;
    padding-top: 0;
    justify-content: center;
  }

  .launch__body {
    margin-top: 0;
    gap: var(--space-40);
  }

  .launch__content {
    padding-inline: var(--space-16);
  }
}

@media (min-width: 1280px) {
  body,
  .launch {
    background: var(--color-bg-desktop);
  }

  .launch__inner {
    max-width: var(--content-desktop);
  }

  .launch__body {
    gap: var(--space-24);
  }

  .launch__content {
    padding-inline: var(--space-16);
  }
}