.split { display: flex; min-height: 100vh }

.split__image { flex: 1.1; margin: 0; display: none; }
.split__image .placeholder {
  height: 100%; width: 100%;
  background: var(--color-navy-light);
  background-image: repeating-linear-gradient(135deg, rgba(246,242,232,.06) 0 2px, transparent 2px 14px);
  display: flex; align-items: center; justify-content: center; padding: 40px;
}
.split__image .placeholder span {
  font-family: ui-monospace, monospace; font-size: 13px; color: var(--text-70);
  text-align: center; line-height: 1.9; max-width: 32ch;
}

.split__form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px }
.form-card { width: 100%; max-width: 380px }

.brand { display: flex; justify-content: center; margin-bottom: 34px }
.brand img { height: 46px; width: auto }

.tabs { display: flex; gap: 6px; background: var(--color-navy-dark); border-radius: 12px; padding: 4px; margin-bottom: 22px }
.tab-btn {
  flex: 1; background: none; border: 0; border-radius: 9px; color: var(--text-70);
  font-family: inherit; font-size: 13.5px; font-weight: 700; padding: 9px 6px; cursor: pointer;
}
.tab-btn[aria-selected="true"] { background: var(--color-oxblood); color: var(--color-cream) }

.tab-panel { display: none }
.tab-panel.active { display: block }

.otp-hint { font-size: 12.5px; color: var(--color-slate); margin: -6px 0 14px }
.field-required { color: var(--color-oxblood-light, #a04452) }
.field-optional { font-size: 12px; color: var(--text-70); font-weight: 400 }
.field-error input { border-color: var(--color-oxblood-light, #a04452) !important }
.field-error-msg { font-size: 12px; color: var(--color-oxblood-light, #a04452); margin: 2px 0 0 }

@media (min-width: 861px) { .split__image { display: block } }

.terms-modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,14,24,.72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.terms-modal {
  background: var(--color-navy-light); border-radius: 14px; padding: 28px 26px;
  max-width: 360px; width: 100%; position: relative;
  text-align: start;
}
.terms-modal h3 { font-family: var(--font-heading); font-size: 18px; margin: 0 0 14px }
.email-verify-close { position: absolute; top: 14px; inset-inline-start: 14px; font-size: 14px }
.email-verify-phone { font-family: ui-monospace, monospace; direction: ltr; unicode-bidi: isolate; display: block; margin: -6px 0 14px; color: var(--color-slate) }