/* Split-screen landing */
.ob-split {
  display: flex;
  height: 100vh;
}

.ob-split-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 5rem 4.5rem 4.5rem;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: flex .3s cubic-bezier(.4, 0, .2, 1);
}

.ob-split-panel.owner {
  background: var(--navy-dark);
  background-image: radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 14px 14px;
}

.ob-split-panel.req {
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
}

.ob-split-panel:hover { flex: 1.15; }

.ob-split-panel.owner::before {
  content: '';
  position: absolute;
  width: 50vw; aspect-ratio: 1;
  top: -20%; right: -15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 125, 106, .07) 0%, transparent 65%);
  pointer-events: none;
}

.ob-split-eyebrow {
  font-size: .68rem;
  font-weight: var(--weight-bold);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.ob-split-panel.owner .ob-split-eyebrow { color: var(--teal); }
.ob-split-panel.req   .ob-split-eyebrow { color: var(--navy); }

.ob-split-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: var(--weight-normal);
  line-height: var(--leading-tight);
  letter-spacing: -.02em;
  margin-bottom: 1.2rem;
}

.ob-split-panel.owner .ob-split-title { color: #dce8f4; }
.ob-split-panel.req   .ob-split-title { color: var(--color-text); }

.ob-split-title em { font-style: italic; }
.ob-split-panel.owner .ob-split-title em { color: var(--teal); }
.ob-split-panel.req   .ob-split-title em { color: var(--navy); }

.ob-split-desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  max-width: 36ch;
  margin-bottom: 2.5rem;
}

.ob-split-panel.owner .ob-split-desc { color: rgba(220, 232, 244, .55); }
.ob-split-panel.req   .ob-split-desc { color: var(--color-text-muted); }

.ob-split-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  padding: .75rem 1.6rem;
  border-radius: 3px;
  letter-spacing: .01em;
  transition: transform .15s, box-shadow .15s;
  align-self: flex-start;
}

.ob-split-cta::after { content: '→'; transition: transform .2s; }
.ob-split-panel:hover .ob-split-cta { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.ob-split-panel:hover .ob-split-cta::after { transform: translateX(4px); }

.ob-split-panel.owner .ob-split-cta { background: var(--teal); color: #fff; }
.ob-split-panel.req   .ob-split-cta { background: var(--navy); color: #fff; }

/* Onboarding form page */
.ob-form-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: var(--color-bg);
}

.ob-form-page-card {
  width: 100%;
  max-width: 460px;
}

.ob-form-page-logo {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: var(--weight-medium);
  color: var(--navy-dark);
  text-decoration: none;
  letter-spacing: -.01em;
  margin-bottom: 2.5rem;
}

.ob-form-page-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: var(--weight-normal);
  line-height: var(--leading-tight);
  letter-spacing: -.02em;
  color: var(--color-text);
  margin-bottom: .75rem;
}

.ob-form-page-heading em { font-style: italic; }
.ob-form-page.owner     .ob-form-page-heading em { color: var(--teal); }
.ob-form-page.requester .ob-form-page-heading em { color: var(--navy); }

.ob-form-page-sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: 2.5rem;
  max-width: 42ch;
}

.ob-form-page-error {
  font-size: var(--text-sm);
  color: var(--red);
  background: var(--red-light);
  border-radius: 5px;
  padding: .6rem .9rem;
  margin-bottom: 1.5rem;
}

/* Form fields */
.ob-form { display: flex; flex-direction: column; gap: 1.75rem; }

.ob-form-field { display: flex; flex-direction: column; gap: .5rem; }

.ob-form-field label {
  font-size: .7rem;
  font-weight: var(--weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ob-form-field input[type="text"],
.ob-form-field select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: .7rem .9rem;
  font-size: var(--text-md);
  font-family: var(--font-sans);
  color: var(--color-text);
  outline: none;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}

.ob-form-field input[type="text"]::placeholder { color: var(--color-text-faint); }

.ob-form-page.owner     .ob-form-field input:focus,
.ob-form-page.owner     .ob-form-field select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(46, 125, 106, .12);
}

.ob-form-page.requester .ob-form-field input:focus,
.ob-form-page.requester .ob-form-field select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(42, 92, 143, .12);
}

.ob-form-note {
  font-size: .75rem;
  color: var(--color-text-faint);
  line-height: var(--leading-relaxed);
}

.ob-form-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-top: .25rem;
}

.ob-form-submit {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  padding: .8rem 2rem;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  letter-spacing: .01em;
  color: #fff;
  transition: transform .1s, box-shadow .1s;
}

.ob-form-submit:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.ob-form-submit:active { transform: none; box-shadow: none; }

.ob-form-page.owner     .ob-form-submit { background: var(--teal); }
.ob-form-page.requester .ob-form-submit { background: var(--navy); }

.ob-form-back {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.ob-form-back:hover { color: var(--color-text); text-decoration: underline; }