/* ============================================================
 * v2 redesign — /connect-only bespoke styles.
 *
 * Loaded by src/app/(v2)/connect/page.tsx and nothing else.
 * Mirrors the redesign-v2-landing.css pattern: page-local
 * expression that isn't reused elsewhere. Shared primitives
 * (.v2-pool, .v2-glass-card--light, .v2-eyebrow-pill) come from
 * redesign-v2.css.
 *
 * Tokens unchanged from designs/v2/connect.html — see the source
 * for the original :root block that the page-level CSS extracts
 * from.
 * ============================================================ */

/* ---- Connect stage --------------------------------------- */
.v2-connect-stage {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(80px, 14vh, 140px) 24px clamp(40px, 8vh, 64px);
  gap: clamp(18px, 2.4vh, 28px);
  text-align: center;
}

/* ---- Card overrides on top of .v2-glass-card--light ------ */
.v2-connect-card {
  width: 100%;
  max-width: 460px;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 3.4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.v2-connect-card__title {
  font-family: var(--font-display), Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.045em;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.05;
  margin: 0 0 4px;
  color: var(--v2-pool-blue-night);
  text-align: center;
}

/* ---- Form fields ----------------------------------------- */
.v2-connect-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.v2-connect-input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(0, 30, 60, 0.08);
  background: rgba(0, 30, 60, 0.045);
  color: var(--v2-pool-blue-night);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 14px;
  outline: none;
  transition:
    border-color var(--v2-motion-fast) ease,
    background var(--v2-motion-fast) ease,
    box-shadow var(--v2-motion-fast) ease;
}
.v2-connect-input::placeholder { color: rgba(0, 30, 60, 0.42); }
.v2-connect-input:focus {
  border-color: var(--v2-pool-blue);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 134, 211, 0.16);
}
/* Invalid-on-submit flash. Class toggled from the client form for
 * 1.4s; mirrors the source's amber outline pulse. */
.v2-connect-input--error,
.v2-connect-input--error:focus {
  border-color: #e89b3a;
  box-shadow: 0 0 0 4px rgba(232, 155, 58, 0.22);
}

.v2-connect-submit {
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    var(--v2-pool-blue) 0%,
    var(--v2-pool-blue-deep) 100%
  );
  color: #ffffff;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 6px 18px rgba(0, 80, 150, 0.30);
  transition:
    transform var(--v2-motion-fast) ease,
    filter var(--v2-motion-fast) ease,
    box-shadow var(--v2-motion-fast) ease;
}
.v2-connect-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 22px rgba(0, 80, 150, 0.38);
}
.v2-connect-submit:active { transform: translateY(0); }
.v2-connect-submit:focus-visible {
  outline: none;
  box-shadow: var(--v2-focus-ring);
}

/* ---- Fine-print TOS line --------------------------------- */
.v2-connect-fine {
  margin: 0 0 clamp(28px, 6vh, 56px);
  max-width: 460px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--v2-ink-faint);
  text-shadow: 0 1px 2px rgba(0, 30, 60, 0.18);
}
.v2-connect-fine a {
  color: var(--v2-ink-faint);
  text-decoration: none;
  transition: color var(--v2-motion-fast) ease;
}
.v2-connect-fine a:hover { color: var(--v2-ink); }
.v2-connect-fine a:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: var(--v2-focus-ring);
}