/* Lendmax Capital — Investor Start journey
   Mobile-first. No framework, no build step. */

:root {
  --navy: #162238;
  --navy-700: #223350;
  --navy-500: #3a5378;
  --sky: #73c2fb;
  --sky-600: #1a72bb;
  --sky-050: #eef7ff;
  --red: #d8232a;
  --ink: #16202f;
  --ink-600: #4a5768;
  --ink-400: #616d7a;
  --line: #dfe4ec;
  --line-strong: #c3ccd9;
  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --ok: #12805c;
  --err: #c0242b;
  --err-bg: #fdf2f2;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(22, 34, 56, .06), 0 8px 24px rgba(22, 34, 56, .06);
  --focus: 0 0 0 3px rgba(26, 114, 187, .35);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-soft);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Header ---------- */

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header__logo img { display: block; height: 30px; width: auto; }

.site-header__help {
  font-size: .8125rem;
  color: var(--ink-400);
  text-align: right;
  line-height: 1.35;
}
.site-header__help a { color: var(--sky-600); text-decoration: none; font-weight: 600; white-space: nowrap; }
.site-header__help a:hover { text-decoration: underline; }
.site-header__help span { display: block; }

@media (max-width: 460px) {
  .site-header__inner { padding: 10px 16px; }
  .site-header__logo img { height: 22px; }
  .site-header__help { font-size: .8125rem; }
  .site-header__help span { display: none; }
}

/* ---------- Shell ---------- */

.shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 140px;
}

@media (max-width: 460px) { .shell { padding: 0 16px 150px; } }

.intro { padding: 26px 0 18px; }
@media (max-width: 460px) { .intro { padding: 20px 0 14px; } .intro h1 { font-size: 1.5rem; } }
.intro h1 {
  margin: 0 0 8px;
  font-size: 1.65rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}
.intro p { margin: 0; color: var(--ink-600); font-size: .95rem; max-width: 56ch; }
.intro__meta {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: .8125rem;
  color: var(--ink-400);
}
.intro__meta > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.intro__meta svg { flex: none; }

@media (min-width: 600px) { .intro h1 { font-size: 2rem; } }

/* ---------- Progress ---------- */

.progress {
  position: sticky;
  top: var(--header-h, 60px);
  z-index: 15;
  background: var(--bg-soft);
  /* full-bleed band so scrolling content cannot show through at the edges */
  margin: 0 -20px;
  padding: 10px 20px 12px;
  box-shadow: 0 10px 10px -10px rgba(22, 34, 56, .13);
}
@media (max-width: 460px) { .progress { margin: 0 -16px; padding: 8px 16px 10px; } }

.progress__bar {
  height: 5px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 20%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--sky-600) 100%);
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

.progress__steps {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  gap: 4px;
}
.progress__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 46px;
  font-size: .6875rem;
  color: var(--ink-400);
  text-align: center;
  background: none;
  border: 0;
  padding: 5px 2px;
  font-family: inherit;
  cursor: default;
  border-radius: 8px;
}
.progress__step:focus-visible { outline: none; box-shadow: var(--focus); }
.progress__step[data-clickable="true"] { cursor: pointer; }
.progress__dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line-strong);
  display: grid; place-items: center;
  font-size: .6875rem; font-weight: 700; color: var(--ink-400);
  transition: background .2s, border-color .2s, color .2s;
}
.progress__step--done .progress__dot { background: var(--navy); border-color: var(--navy); color: #fff; }
.progress__step--current .progress__dot { background: #fff; border-color: var(--sky-600); color: var(--sky-600); box-shadow: 0 0 0 3px rgba(26, 114, 187, .18); }
.progress__step--current { color: var(--navy); font-weight: 650; }
.progress__step--done { color: var(--ink-600); }
.progress__label { line-height: 1.2; }

@media (max-width: 520px) {
  .progress__label { display: none; }
  .progress__steps { justify-content: center; gap: 4px; }
  .progress__step { flex: none; min-width: 46px; }
}

.progress__count {
  display: none;
  font-size: .75rem;
  color: var(--ink-400);
  margin-top: 8px;
  text-align: center;
}
@media (max-width: 520px) { .progress__count { display: block; } }

/* ---------- Card / steps ---------- */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px 20px;
  margin-top: 6px;
}
@media (min-width: 600px) { .card { padding: 28px 30px; } }

.step[hidden] { display: none; }

.step__head { margin-bottom: 20px; }
.step__eyebrow {
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sky-600);
  margin: 0 0 6px;
}
.step__head h2 { margin: 0 0 6px; font-size: 1.25rem; color: var(--navy); letter-spacing: -.01em; }
.step__head p { margin: 0; color: var(--ink-600); font-size: .9rem; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

[tabindex="-1"]:focus { outline: none; }

/* ---------- Fields ---------- */

.grid { display: grid; gap: 16px; }
@media (min-width: 600px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--2 .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--hidden { display: none; }

.field > label, .field__legend {
  font-size: .875rem;
  font-weight: 650;
  color: var(--navy);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.opt { font-weight: 500; color: var(--ink-400); font-size: .8125rem; }
.req { color: var(--red); font-weight: 700; }

.hint { font-size: .8125rem; color: var(--ink-400); margin: 0; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], select, textarea {
  font: inherit;
  font-size: 16px; /* prevents iOS zoom on focus */
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s;
  appearance: none;
  -webkit-appearance: none;
}
textarea { min-height: 108px; resize: vertical; line-height: 1.5; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234a5768' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--sky-600);
  box-shadow: var(--focus);
}

input:disabled, select:disabled, textarea:disabled {
  background: #f1f3f7;
  color: var(--ink-400);
  border-color: var(--line);
  cursor: not-allowed;
}

.field--disabled > label { color: var(--ink-400); }

.money { position: relative; }
.money input { padding-left: 30px; }
.money::before {
  content: "$";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-400);
  font-weight: 600;
  pointer-events: none;
}

/* validation */
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: var(--err);
  background: var(--err-bg);
}
.error {
  font-size: .8125rem;
  color: var(--err);
  font-weight: 600;
  display: none;
  align-items: center;
  gap: 5px;
}
.field[data-invalid="true"] .error { display: flex; }

/* ---------- Choice cards (radio) ---------- */

.choices { display: grid; gap: 10px; }
@media (min-width: 600px) { .choices--2 { grid-template-columns: 1fr 1fr; } }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  min-height: 48px;
}
.choice:hover { border-color: var(--navy-500); }
.choice input, .seg input, .check input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.choice__mark {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: #fff;
  display: grid; place-items: center;
  transition: border-color .15s;
}
.choice__mark::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--sky-600);
  transform: scale(0);
  transition: transform .15s cubic-bezier(.4, 0, .2, 1);
}
.choice__body { min-width: 0; }
.choice__title { font-weight: 650; font-size: .9375rem; color: var(--navy); display: block; }
.choice__desc { font-size: .8125rem; color: var(--ink-400); display: block; margin-top: 2px; }
.choice input:checked ~ .choice__mark { border-color: var(--sky-600); }
.choice input:checked ~ .choice__mark::after { transform: scale(1); }
.choice:has(input:checked) { border-color: var(--sky-600); background: var(--sky-050); }
.choice:has(input:focus-visible) { box-shadow: var(--focus); border-color: var(--sky-600); }

/* segmented radio for short scales */
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.segmented--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .segmented--4 { grid-template-columns: repeat(4, 1fr); } }
.seg {
  position: relative;
  display: grid; place-items: center;
  text-align: center;
  padding: 11px 8px;
  min-height: 48px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-600);
  cursor: pointer;
  transition: all .15s;
  line-height: 1.25;
}
.seg:has(input:checked) { border-color: var(--sky-600); background: var(--sky-050); color: var(--navy); }
.seg:has(input:focus-visible) { box-shadow: var(--focus); }

/* ---------- Checkbox ---------- */

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ink-600);
  transition: border-color .15s, background .15s;
}
.check__mark {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid var(--line-strong);
  background: #fff;
  display: grid; place-items: center;
  transition: all .15s;
}
.check__mark svg { opacity: 0; transition: opacity .12s; }
.check:has(input:checked) { border-color: var(--sky-600); background: var(--sky-050); }
.check:has(input:checked) .check__mark { background: var(--sky-600); border-color: var(--sky-600); }
.check:has(input:checked) .check__mark svg { opacity: 1; }
.check:has(input:focus-visible) { box-shadow: var(--focus); border-color: var(--sky-600); }
.field[data-invalid="true"] .check { border-color: var(--err); background: var(--err-bg); }

/* ---------- Disclosure ---------- */

details.disclose {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 0;
  margin-top: 2px;
}
details.disclose summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 14px;
  font-size: .8125rem;
  font-weight: 650;
  color: var(--sky-600);
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
}
details.disclose summary::-webkit-details-marker { display: none; }
details.disclose summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s;
  margin-left: auto;
}
details.disclose[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
details.disclose .disclose__body {
  padding: 0 14px 14px;
  font-size: .8125rem;
  color: var(--ink-600);
  line-height: 1.6;
}
details.disclose .disclose__body p { margin: 0 0 8px; }
details.disclose .disclose__body ul { margin: 0; padding-left: 18px; }
details.disclose .disclose__body li { margin-bottom: 5px; }

/* ---------- Callout ---------- */

.callout {
  display: flex;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--radius);
  background: var(--sky-050);
  border: 1px solid #cfe6fb;
  font-size: .8125rem;
  color: var(--navy-700);
  line-height: 1.55;
  margin-top: 16px;
}
.callout svg { flex: none; margin-top: 2px; }
.callout strong { color: var(--navy); }

/* ---------- Review ---------- */

.review__group { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.review__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 15px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.review__head h3 { margin: 0; font-size: .875rem; color: var(--navy); }
.review__edit {
  background: none; border: 0; padding: 6px 8px; margin: -6px -8px -6px 0;
  font: inherit; font-size: .8125rem; font-weight: 650;
  color: var(--sky-600); cursor: pointer; border-radius: 6px;
}
.review__edit:hover { background: #fff; text-decoration: underline; }
.review__edit:focus-visible { outline: none; box-shadow: var(--focus); }
.review__list { margin: 0; padding: 6px 15px 12px; }
.review__row {
  display: grid;
  gap: 1px 14px;
  padding: 7px 0;
  border-bottom: 1px solid #f0f2f6;
  font-size: .875rem;
}
.review__row:last-child { border-bottom: 0; }
@media (min-width: 520px) { .review__row { grid-template-columns: 44% 1fr; } }
.review__row dt { color: var(--ink-400); font-size: .8125rem; }
.review__row dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.review__row dd.empty { color: var(--ink-400); font-weight: 500; font-style: italic; }

/* ---------- Footer nav ---------- */

.formnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.6) blur(8px);
  border-top: 1px solid var(--line);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  z-index: 25;
}
.formnav__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (max-width: 460px) { .formnav { padding-left: 16px; padding-right: 16px; } }

.btn {
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  border-radius: var(--radius);
  padding: 13px 22px;
  min-height: 50px;
  border: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, border-color .15s, color .15s, transform .06s;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn--primary { background: var(--navy); color: #fff; flex: 1; }
.btn--primary:hover { background: var(--navy-700); }
.btn--primary:disabled { background: var(--navy-500); opacity: .6; cursor: progress; }
.btn--ghost { background: #fff; color: var(--navy); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--navy-500); }
.btn--link { background: none; color: var(--sky-600); border: 0; padding: 8px; min-height: 44px; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
.btn.is-busy .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Error summary ---------- */

.errsum {
  border: 1.5px solid var(--err);
  background: var(--err-bg);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.errsum[hidden] { display: none; }
.errsum h2 { margin: 0 0 8px; font-size: .9375rem; color: var(--err); display: flex; align-items: center; gap: 8px; }
.errsum ul { margin: 0; padding-left: 20px; font-size: .875rem; }
.errsum li { margin-bottom: 4px; }
.errsum a { color: var(--err); font-weight: 600; }

/* ---------- Done ---------- */

.done { text-align: center; padding: 20px 4px 8px; }
.done__icon {
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #e9f7f1;
  display: grid; place-items: center;
}
.done h2 { margin: 0 0 8px; font-size: 1.4rem; color: var(--navy); }
.done > p { margin: 0 auto 20px; color: var(--ink-600); font-size: .9375rem; max-width: 46ch; }
.done__ref {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--navy);
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 9px 16px;
  margin-bottom: 22px;
}
.done__next {
  text-align: left;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 4px;
}
.done__next h3 { margin: 0 0 12px; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); }
.done__next ol { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.done__next li {
  counter-increment: s;
  display: flex; gap: 12px;
  padding: 9px 0;
  font-size: .875rem;
  color: var(--ink-600);
}
.done__next li::before {
  content: counter(s);
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: .75rem; font-weight: 700;
  display: grid; place-items: center;
}

/* ---------- Page footer ---------- */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 20px 0;
  font-size: .75rem;
  color: var(--ink-400);
  line-height: 1.6;
}
.legal p { margin: 0 0 8px; }
.legal a { color: var(--ink-600); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Added for the full KYC application ---------- */

.note {
  font-size: .8125rem;
  color: var(--navy-700);
  background: var(--bg-soft);
  border-left: 3px solid var(--sky-600);
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  margin: 2px 0 0;
}

.checkgroup { display: grid; gap: 8px; }
@media (min-width: 600px) { .checkgroup { grid-template-columns: 1fr 1fr; } }
.check--compact { padding: 11px 14px; font-size: .875rem; }

.suffixed { position: relative; }
.suffixed input { padding-right: 62px; }
.suffixed::after {
  content: attr(data-suffix);
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-400);
  font-size: .875rem;
  font-weight: 600;
  pointer-events: none;
}

/* Running total for the investment allocation */
.alloc {
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--line-strong);
  background: var(--bg-soft);
}
.alloc__label { font-size: .875rem; font-weight: 650; color: var(--navy); }
.alloc__value { font-size: 1.125rem; font-weight: 800; margin-left: auto; font-variant-numeric: tabular-nums; }
.alloc__note { font-size: .8125rem; color: var(--ink-400); width: 100%; }
.alloc--ok { border-color: var(--ok); background: #f0faf6; }
.alloc--ok .alloc__value { color: var(--ok); }
.alloc--off .alloc__value { color: var(--ink-400); }

/* Confirmation download */
.done__download { margin: 0 0 22px; }
.btn--download { width: 100%; max-width: 340px; margin: 0 auto; }
.done__download .hint { margin-top: 10px; max-width: 42ch; margin-left: auto; margin-right: auto; }

/* Eight steps do not fit as dots on a phone — the bar and the caption carry it. */
@media (max-width: 640px) {
  .progress__steps { display: none; }
  .progress__count { display: block; margin-top: 6px; font-weight: 600; color: var(--navy); }
}