/* ============================================
   Get Started — minimal email capture page
   Reuses landing tokens + nav from styles.css.
   ============================================ */

[x-cloak] { display: none !important; }

.gs {
  min-height: calc(100vh - 3.5rem - var(--footer-clearance, 80px));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-3xl) var(--space-md) var(--space-2xl);
}

.gs__panel {
  width: 100%;
  max-width: 520px;
}

.gs__eyebrow {
  font-family: var(--font-display);
  font-weight: var(--text-hero-eyebrow-weight);
  font-size: var(--text-hero-eyebrow-size);
  text-transform: var(--text-hero-eyebrow-transform);
  letter-spacing: var(--text-hero-eyebrow-tracking);
  color: var(--color-volt);
  margin-bottom: var(--space-md);
}

.gs__headline {
  font-family: var(--font-display);
  font-weight: var(--text-cta-heading-weight);
  font-size: var(--text-cta-heading-size);
  text-transform: var(--text-cta-heading-transform);
  line-height: var(--text-cta-heading-line-height);
  color: var(--color-warm-white);
  margin-bottom: var(--space-md);
}

.gs__sub {
  font-family: var(--font-body);
  font-size: var(--text-hero-sub-size);
  line-height: var(--text-hero-sub-line-height);
  color: var(--color-mid-gray);
  margin-bottom: var(--space-xl);
}

/* --- Form --- */
.gs__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.gs__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border: 0;
  padding: 0;
  margin: 0;
}

.gs__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-warm-white);
  margin-bottom: 0.25rem;
}

.gs__input {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-warm-white);
  background-color: var(--color-surface);
  border: 1px solid var(--color-surface);
  border-bottom: 2px solid var(--color-mid-gray);
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color var(--transition-base);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.gs__input:focus {
  outline: none;
  border-bottom-color: var(--color-volt);
}

/* --- Role chips --- */
.gs__roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.gs__role {
  position: relative;
  cursor: pointer;
  display: block;
}

.gs__role-input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}

.gs__role-input:focus-visible + .gs__role-label {
  outline: var(--border-outline-volt);
  outline-offset: 2px;
}

.gs__role-label {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-warm-white);
  background-color: var(--color-surface);
  border: 1px solid var(--color-surface);
  padding: 0.85rem 0.5rem;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
}

.gs__role:hover .gs__role-label {
  border-color: var(--color-mid-gray);
}

.gs__role.is-selected .gs__role-label {
  background-color: var(--color-volt);
  color: var(--color-base);
  border-color: var(--color-volt);
}

/* --- Submit --- */
.gs__submit {
  font-family: var(--font-display);
  font-weight: var(--text-cta-btn-weight);
  font-size: var(--text-cta-btn-size);
  text-transform: var(--text-cta-btn-transform);
  letter-spacing: var(--text-cta-btn-tracking);
  color: var(--color-base);
  background-color: var(--color-volt);
  padding: var(--btn-padding);
  border: none;
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    transform var(--transition-fast),
    opacity var(--transition-base);
  margin-top: var(--space-xs);
}

.gs__submit:hover:not(:disabled) {
  background-color: var(--color-volt-hover);
  transform: translateY(-1px);
}

.gs__submit:active:not(:disabled) {
  transform: translateY(0);
}

.gs__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* --- Error --- */
.gs__error {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #ff6b6b;
  margin: 0;
}

/* --- Legal / opt-in --- */
.gs__legal {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-mid-gray);
  margin: 0;
}

/* --- Invite code entry point --- */
.gs__invite {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-surface);
}

.gs__invite-toggle {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-mid-gray);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-base);
}

.gs__invite-toggle:hover,
.gs__invite-toggle:focus-visible {
  color: var(--color-warm-white);
  outline: none;
}

.gs__invite.is-open .gs__invite-toggle {
  color: var(--color-warm-white);
}

.gs__invite-panel {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.gs__invite-help {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-mid-gray);
  margin: 0;
}

.gs__invite-form {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}

.gs__invite-input {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gs__invite-submit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-warm-white);
  background-color: transparent;
  border: 1px solid var(--color-mid-gray);
  padding: 0 var(--space-lg);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
  white-space: nowrap;
}

.gs__invite-submit:hover:not(:disabled),
.gs__invite-submit:focus-visible {
  border-color: var(--color-volt);
  color: var(--color-volt);
  outline: none;
}

.gs__invite-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 480px) {
  .gs__invite-form {
    flex-direction: column;
  }
  .gs__invite-submit {
    padding: var(--space-sm) var(--space-lg);
  }
}

/* --- Success state --- */
.gs__success-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.gs__success-back {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-mid-gray);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gs__success-back:hover {
  color: var(--color-warm-white);
}

/* --- Small phones --- */
@media (max-width: 390px) {
  .gs__roles {
    gap: var(--space-xs);
  }
  .gs__role-label {
    font-size: 0.9rem;
    padding: 0.75rem 0.25rem;
  }
}