.vexo-hidden {
  display: none;
}

.vexo-auth-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.vexo-auth-card {
  padding: 1.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
}

.vexo-auth-subtitle {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.vexo-auth-footer {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.vexo-auth-optional {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Honeypot: visually hidden (the standard "sr-only" clip pattern) rather
   than display:none/visibility:hidden, since some bots specifically skip
   fields hidden that way. A 1px box clipped to nothing, not pushed off
   -screen with a large negative offset, which would otherwise risk adding
   invisible scrollable area to the page. Invisible and unreachable by tab
   or mouse for a sighted human. */
.vexo-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 768px) {
  .vexo-auth-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .vexo-auth-card {
    padding: 2.25rem;
  }
}