/* ============================================================
   Login / Sign-in page
   ============================================================ */

/* Outer card — constrained width */
.login-wrapper {
  max-width: 860px;
}

/* Inner layout — header row + two-column grid */
.login-layout {
  display: grid;
  gap: 22px;
}

.login-hero {
  display: grid;
  gap: 10px;
}

.login-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
}

/* Two-column grid (handled in extra_head for responsiveness) */
.login-cols {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  align-items: start;
}

@media (max-width: 639px) {
  .login-cols {
    grid-template-columns: 1fr;
  }
}

/* Page title margin override */
.login-title {
  margin-bottom: var(--space-2);
}

.login-tagline {
  max-width: 720px;
}

.login-proof-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.login-proof-row span {
  font-size: 0.74rem;
  color: var(--muted);
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.65);
}

/* Panel card — used for both "Account access" and "Why sign up?" */
.login-card {
  padding: 20px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.72);
}

/* "Why sign up?" card has a warm gradient instead of flat white */
.login-card--features {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(250,246,240,.92));
}

/* Section label: "Account access", "Why sign up?" */
.login-section-label {
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Intro paragraph below label */
.login-intro {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  line-height: 1.55;
}

.login-intro--aside {
  margin-bottom: 14px;
}

/* Inline error (security check failed, etc.) */
.login-error {
  color: var(--color-error);
  margin: 0 0 var(--space-3);
}

/* Form element */
.login-form {
  margin-top: 14px;
}

.login-field-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

/* Email input */
.login-email-input {
  width: 100%;
  padding: var(--space-3) 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,.12);
  box-sizing: border-box;
}

/* Hint below the email field */
.login-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .92rem;
}

/* Turnstile widget spacing (third-party container) */
.login-form .cf-turnstile {
  margin-top: var(--space-3);
}

/* Submit button */
.login-submit {
  margin-top: var(--space-3);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  width: 100%;
}

.login-flow {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.login-flow-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.login-flow-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.login-flow-steps span {
  font-size: 0.76rem;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
}

/* Aside (right column) */
.login-aside {
  display: grid;
  gap: var(--space-3);
}

/* Feature cards grid */
.login-features {
  display: grid;
  gap: 10px;
}

/* Individual feature card */
.login-feature-card {
  padding: var(--space-3) 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}

/* Feature card title */
.login-feature-title {
  display: block;
  margin-bottom: 4px;
}

/* Feature card body text */
.login-feature-text {
  color: var(--muted);
  line-height: 1.5;
}