/*
 * Early Access behavior and state-specific presentation.
 * The marketing/form layout remains in early-access.html.
 */

.early-access-page {
  min-height: 100vh;
}

.early-access-page form label > span {
  color: var(--muted);
}

.early-access-page .consent input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 2px 0 0;
  accent-color: var(--green);
}

.early-access-page #submit-button {
  width: 100%;
}

.early-access-page button:disabled {
  cursor: wait;
  opacity: .55;
}

.early-access-page .early-access-status {
  display: block;
  min-height: 24px;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--danger);
  line-height: 1.4;
  text-align: left;
}

.early-access-page .result-view:not([hidden]) {
  display: grid;
}

.early-access-page[data-early-access-state="email-sent"] .main,
.early-access-page[data-early-access-state="verified"] .main {
  display: grid;
  min-height: calc(100vh - 170px);
  align-content: center;
  padding-block: clamp(42px, 7vw, 84px);
}

.early-access-page[data-early-access-state="email-sent"] .main > :not(.hero),
.early-access-page[data-early-access-state="verified"] .main > :not(.hero) {
  display: none;
}

.early-access-page[data-early-access-state="email-sent"] .hero,
.early-access-page[data-early-access-state="verified"] .hero {
  display: block;
}

.early-access-page[data-early-access-state="email-sent"] .copy,
.early-access-page[data-early-access-state="verified"] .copy {
  display: none;
}

.early-access-page[data-early-access-state="email-sent"] .formcard,
.early-access-page[data-early-access-state="verified"] .formcard {
  position: static;
  width: min(100%, 720px);
  margin-inline: auto;
  padding: clamp(30px, 5vw, 54px);
  border-color: rgba(101, 212, 79, .34);
  background:
    radial-gradient(circle at 50% 0%, rgba(101, 212, 79, .12), transparent 21rem),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent),
    var(--panel);
  box-shadow: 0 30px 90px rgba(0,0,0,.48);
}

.early-access-page[data-early-access-state="email-sent"] .result-view,
.early-access-page[data-early-access-state="verified"] .result-view {
  min-height: auto;
  place-content: initial;
  justify-items: stretch;
  text-align: left;
}

.early-access-page[data-early-access-state="email-sent"] .result-icon,
.early-access-page[data-early-access-state="verified"] .result-icon {
  width: 68px;
  height: 68px;
  margin: 0 0 22px;
  border-color: rgba(101, 212, 79, .62);
  background: rgba(101, 212, 79, .08);
  color: var(--green);
}

.early-access-page[data-early-access-state="email-sent"] .result-view h2,
.early-access-page[data-early-access-state="verified"] .result-view h2 {
  max-width: 14ch;
  margin: 10px 0 14px;
  font-size: clamp(2.35rem, 6vw, 4.2rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.early-access-page[data-early-access-state="email-sent"] .result-view p,
.early-access-page[data-early-access-state="verified"] .result-view p {
  max-width: 60ch;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.early-access-page .verification-email {
  margin: 2px 0 20px !important;
  padding: 14px 16px;
  border: 1px solid rgba(101, 212, 79, .28);
  background: rgba(101, 212, 79, .055);
  color: var(--text) !important;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.early-access-page .verification-steps {
  display: grid;
  gap: 12px;
  margin: 12px 0 26px;
  padding: 0;
  list-style: none;
  counter-reset: verification-step;
}

.early-access-page .verification-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--muted);
  line-height: 1.55;
}

.early-access-page .verification-steps li::before {
  counter-increment: verification-step;
  content: counter(verification-step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(101, 212, 79, .48);
  color: var(--green);
  font-weight: 900;
}

.early-access-page .result-actions {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

.early-access-page .result-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 18px;
  border: 1px solid var(--green);
  border-radius: 0;
  background: var(--green);
  color: #071006;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
}

.early-access-page .result-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.early-access-page .result-link {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.early-access-page .result-status {
  min-height: 24px;
  margin: 4px 0 0 !important;
  color: var(--muted) !important;
}

.early-access-page .verified-actions {
  margin-top: 18px;
}

@media (max-width: 680px) {
  .early-access-page .topbar {
    flex-wrap: wrap;
    gap: 12px;
    padding-block: 14px;
  }

  .early-access-page .brand,
  .early-access-page .actions,
  .early-access-page .copy,
  .early-access-page .formcard {
    min-width: 0;
  }

  .early-access-page .actions {
    width: 100%;
    justify-content: flex-start;
  }

  .early-access-page .login {
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .early-access-page #early-access-form input:not([type="checkbox"]),
  .early-access-page #early-access-form select {
    min-width: 0;
  }

  .early-access-page[data-early-access-state="email-sent"] .main,
  .early-access-page[data-early-access-state="verified"] .main {
    min-height: auto;
    padding-block: 28px 42px;
  }

  .early-access-page[data-early-access-state="email-sent"] .formcard,
  .early-access-page[data-early-access-state="verified"] .formcard {
    width: 100%;
    padding: 24px 18px;
  }

  .early-access-page[data-early-access-state="email-sent"] .result-view h2,
  .early-access-page[data-early-access-state="verified"] .result-view h2 {
    font-size: clamp(2.1rem, 11vw, 3.1rem);
  }

  .early-access-page .result-links {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  .early-access-page * {
    scroll-behavior: auto !important;
  }
}