body.landing-shell {
  background: linear-gradient(145deg, #edf2f8 0%, #f8fafc 48%, #eef3f9 100%);
}

body.landing-shell::before {
  opacity: 0.34;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px;
}

body.landing-shell .site-header {
  display: none;
}

body.landing-shell .page {
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.landing-shell .flash-wrap {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  z-index: 2;
  width: min(calc(100% - 3rem), 460px);
  transform: translateX(-50%);
}

.landing-page {
  width: 100%;
  max-width: none;
  min-height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-page .auth-portal {
  align-items: center;
}

.landing-page .auth-portal-card {
  animation: landing-rise 0.45s ease both;
}

@keyframes landing-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  body.landing-shell .page {
    padding: 1rem;
  }

  body.landing-shell .flash-wrap {
    top: 1rem;
    width: calc(100% - 2rem);
  }

  .landing-page {
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .auth-portal-card {
    animation: none;
  }
}
