/* /apply/form (Trusted Network application) and /lenders/scan (Book Scan).

   Loaded after the about kit head and kit-shell.css (both from KitShell), so
   it reuses the kit's tokens: --sans, --x-body-ink, --x-shadow, --tap, the
   x-kf field pill and the x-panel surfaces. Only the pieces these two forms
   need that kit-shell.css does not have live here: a step progress strip,
   choice chips, a yes / no pair, upload rows, agreement rows, a review list,
   the scan's two columns and its report. Black, white and the kit greys only.

   This is not Brandan's file. His files are public/site/<page>/*. */

/* ---------- Shared ---------- */
.x-wrap {
  width: 100%; max-width: 820px; margin-inline: auto;
  padding: clamp(8px, 2vw, 24px) clamp(16px, 5vw, 40px) clamp(88px, 11vw, 144px);
}
.x-wrap--wide { max-width: var(--x-wide); }
.x-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 24px; margin: 0; border-radius: 999px;
  font: 600 15px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, opacity 150ms ease;
}
.x-btn--dark { background: #000000; color: #ffffff; border: 1px solid #000000; }
.x-btn--dark:hover { background: #1d1d1f; }
.x-btn--line { background: #ffffff; color: #000000; border: 1px solid rgb(0 0 0 / 0.14); }
.x-btn--line:hover { border-color: rgb(0 0 0 / 0.32); }
.x-btn--quiet { background: transparent; color: #1d1d1f; border: 1px solid transparent; padding: 0 12px; }
.x-btn--quiet:hover { background: rgb(0 0 0 / 0.04); }
.x-btn--big { min-height: 52px; padding: 0 32px; font-size: 17px; }
.x-btn:disabled { opacity: 0.5; cursor: default; }
.x-btn:focus-visible { outline: 2px solid #000000; outline-offset: 3px; }
.x-alert {
  margin: 0 0 24px; padding: 14px 20px; border-radius: 20px;
  background: #fbf3f2; border: 1px solid rgb(138 58 50 / 0.18);
  font: 500 15px/1.5 var(--sans); color: #8a3a32;
}

/* ---------- Apply form: progress strip ---------- */
.x-af__progress { margin-bottom: 24px; padding: 20px 24px; border-radius: 28px; background: #f5f5f7; }
.x-af__progress-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.x-af__progress-label { margin: 0; font: 600 15px/1.35 var(--sans); letter-spacing: -0.01em; color: #000000; }
.x-af__progress-label span { color: #6e6e73; font-weight: 500; }
.x-af__save { flex: none; }
.x-af__save.is-saved { background: #000000; color: #ffffff; border-color: #000000; }
.x-af__bar { height: 4px; margin-top: 16px; border-radius: 999px; background: rgb(0 0 0 / 0.08); overflow: hidden; }
.x-af__bar i { display: block; height: 100%; border-radius: 999px; background: #000000; transition: width 400ms var(--x-ease); }
.x-af__steps {
  display: flex; gap: 6px; margin: 14px -24px 0; padding: 0 24px 2px; list-style: none;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.x-af__steps::-webkit-scrollbar { display: none; }
.x-af__steps li {
  flex: none; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px;
  font: 500 13px/1 var(--sans); letter-spacing: -0.005em; color: #86868b; white-space: nowrap;
}
.x-af__steps li.is-done { color: #1d1d1f; }
.x-af__steps li.is-now { background: #000000; color: #ffffff; }
@media (max-width: 520px) {
  .x-af__progress { padding: 18px 18px; border-radius: 24px; }
  .x-af__steps { margin-inline: -18px; padding-inline: 18px; }
}

/* ---------- Apply form: the card ---------- */
.x-af__card { border-radius: 28px; background: #ffffff; border: 1px solid rgb(0 0 0 / 0.07); box-shadow: var(--x-shadow); overflow: hidden; }
.x-af__head { padding: clamp(24px, 4vw, 40px) clamp(20px, 5vw, 48px) 0; }
.x-af__head .x-label { margin: 0 0 8px; }
.x-af__head h2 { margin: 0; font: 700 clamp(28px, 3.4vw, 38px)/1.1 var(--sans); letter-spacing: -0.035em; color: #000000; text-wrap: balance; }
.x-af__body { padding: clamp(24px, 4vw, 36px) clamp(20px, 5vw, 48px) clamp(28px, 4vw, 44px); }
.x-af__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 20px clamp(20px, 5vw, 48px); border-top: 1px solid rgb(0 0 0 / 0.08); background: #fbfbfd;
}
.x-af__foot-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px) {
  .x-af__card { border-radius: 24px; }
  .x-af__foot { flex-direction: column-reverse; align-items: stretch; }
  .x-af__foot > div:first-child:empty { display: none; }
  .x-af__foot-r { flex-direction: column-reverse; align-items: stretch; }
  .x-af__foot .x-btn { width: 100%; }
}
.x-af__fine { margin: 20px auto 0; max-width: 52ch; text-align: center; font: 400 14px/1.5 var(--sans); color: #6e6e73; }

/* ---------- Apply form: fields ---------- */
.x-af__field { margin: 0 0 24px; }
.x-af__field .x-kf__label { margin-bottom: 8px; }
.x-af__req { margin-left: 3px; color: #8a3a32; }
.x-af__hint { margin: 8px 0 0 4px; font: 400 14px/1.45 var(--sans); color: #6e6e73; }
.x-af__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.x-af__grid--tight { row-gap: 12px; }
.x-af__grid--tight > .x-af__field { margin-bottom: 4px; }
@media (max-width: 560px) { .x-af__grid { grid-template-columns: minmax(0, 1fr); } }
.x-af__addr { display: grid; gap: 12px; }
.x-af__addr-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 112px; gap: 12px; }
@media (max-width: 560px) {
  .x-af__addr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .x-af__addr-row > :first-child { grid-column: 1 / -1; }
}
.x-af__sub { margin: 8px 0 24px; }
.x-af__sub-h { margin: 0 0 12px; font: 600 15px/1.3 var(--sans); letter-spacing: -0.01em; color: #000000; }
.x-af__lede { margin: 0 0 28px; font: 400 17px/1.6 var(--sans); letter-spacing: -0.005em; color: var(--x-body-ink); text-wrap: pretty; }
.x-af__lede--small { margin-bottom: 20px; font-size: 15px; }
.x-af__copy { margin: 32px 0 24px; padding-top: 28px; border-top: 1px solid rgb(0 0 0 / 0.08); font: 400 16px/1.65 var(--sans); color: var(--x-body-ink); }
.x-af .x-note { margin: 0 0 28px; }
.x-af .x-note p { margin: 0; }
.x-af .x-note strong { font-weight: 600; color: #000000; }
.x-af__invite { margin: 0 0 24px; }

/* A grey group of fields (a project example, a reference). */
.x-af__group { margin: 0 0 16px; padding: clamp(18px, 3vw, 24px); border-radius: 24px; background: #f5f5f7; }
.x-af__group .x-kf__input { background: #ffffff; }
.x-af__group .x-kf__input:focus { border-color: rgb(0 0 0 / 0.2); }
.x-af__group-h { margin: 0 0 16px; font: 600 15px/1.3 var(--sans); letter-spacing: -0.01em; color: #000000; }
.x-af__group .x-af__field:last-child { margin-bottom: 0; }

/* Choice chips: a multi select of short labels. */
.x-af__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.x-af__chip {
  display: inline-flex; align-items: center; min-height: var(--tap); margin: 0; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgb(0 0 0 / 0.1); background: #ffffff; color: #1d1d1f; cursor: pointer;
  font: 500 15px/1.2 var(--sans); letter-spacing: -0.005em; text-align: left;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.x-af__chip:hover { border-color: rgb(0 0 0 / 0.28); }
.x-af__chip.is-on { background: #000000; border-color: #000000; color: #ffffff; }
.x-af__chip:focus-visible { outline: 2px solid #000000; outline-offset: 2px; }

/* A yes / no (or free / paid) pair. */
.x-af__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 360px; }
.x-af__pair button {
  min-height: 48px; margin: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid rgb(0 0 0 / 0.1); background: #ffffff; color: #1d1d1f;
  font: 600 15px/1 var(--sans); letter-spacing: -0.005em;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.x-af__pair button:hover { border-color: rgb(0 0 0 / 0.28); }
.x-af__pair button.is-on { background: #000000; border-color: #000000; color: #ffffff; }
.x-af__pair button:focus-visible { outline: 2px solid #000000; outline-offset: 2px; }

/* Upload rows. */
.x-af__uploads { display: flex; flex-direction: column; gap: 0; margin-bottom: 8px; }
.x-af__upload {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 20px; border-radius: 20px;
  border: 1px dashed rgb(0 0 0 / 0.2); background: #fbfbfd; cursor: pointer;
  font: 400 15px/1.4 var(--sans); color: #424245; transition: border-color 150ms ease, background-color 150ms ease;
}
.x-af__upload:hover { border-color: rgb(0 0 0 / 0.4); }
.x-af__upload.is-done { border-style: solid; border-color: rgb(0 0 0 / 0.14); background: #f5f5f7; color: #000000; font-weight: 500; }
.x-af__upload.is-off { cursor: not-allowed; opacity: 0.7; }
.x-af__upload.is-error { border-color: rgb(138 58 50 / 0.4); color: #8a3a32; }
.x-af__upload:focus-within { outline: 2px solid #000000; outline-offset: 2px; }
.x-af__upload svg { flex: none; }
.x-af__upload span { min-width: 0; overflow-wrap: anywhere; }

/* The save-first panel on the photo step. */
.x-af__gate { margin: 0 0 28px; padding: clamp(20px, 3vw, 28px); border-radius: 24px; background: #f5f5f7; text-align: center; }
.x-af__gate p { margin: 0 0 16px; font: 500 16px/1.5 var(--sans); color: #1d1d1f; }

/* Agreement rows. */
.x-af__agree {
  display: flex; gap: 14px; align-items: flex-start; margin: 0 0 10px; padding: 16px 20px; border-radius: 20px;
  border: 1px solid rgb(0 0 0 / 0.1); background: #ffffff; cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.x-af__agree:hover { border-color: rgb(0 0 0 / 0.24); }
.x-af__agree.is-on { background: #f5f5f7; border-color: rgb(0 0 0 / 0.22); }
.x-af__agree input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: #000000; cursor: pointer; }
.x-af__agree span { font: 400 16px/1.55 var(--sans); color: #1d1d1f; }
.x-af__agree--final { margin-top: 28px; padding: 20px 24px; background: #f5f5f7; border-color: rgb(0 0 0 / 0.14); }
.x-af__agree--final span { font-weight: 500; color: #000000; }

/* Review list. */
.x-af__review { margin: 0 0 16px; border-radius: 20px; border: 1px solid rgb(0 0 0 / 0.08); overflow: hidden; }
.x-af__review-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 20px; background: #f5f5f7; }
.x-af__review-h span { font: 600 15px/1.3 var(--sans); letter-spacing: -0.01em; color: #000000; }
.x-af__review-b { padding: 4px 20px 8px; }
.x-af__row { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgb(0 0 0 / 0.06); }
.x-af__row:last-child { border-bottom: 0; }
.x-af__row-k { flex: none; width: 180px; padding-top: 1px; font: 500 14px/1.45 var(--sans); color: #6e6e73; }
.x-af__row-v { flex: 1; min-width: 0; font: 400 15px/1.55 var(--sans); color: #000000; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .x-af__row { flex-direction: column; gap: 2px; }
  .x-af__row-k { width: auto; }
}

/* ---------- Book Scan ---------- */
.x-scan__cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
@media (max-width: 860px) { .x-scan__cols { grid-template-columns: minmax(0, 1fr); } }
.x-scan h2 { margin: 0; }
.x-scan__h { font: 700 clamp(26px, 3vw, 34px)/1.1 var(--sans); letter-spacing: -0.035em; color: #000000; text-wrap: balance; }
.x-scan__h--sm { font-size: clamp(22px, 2.4vw, 26px); }
.x-scan .x-label { margin: 0 0 10px; }
.x-scan__p { margin: 12px 0 0; font: 400 16px/1.6 var(--sans); color: var(--x-body-ink); text-wrap: pretty; }
.x-scan__p strong { font-weight: 600; color: #000000; }
.x-scan__promise { margin: 16px 0 0; padding: 14px 18px; border-radius: 18px; background: #f5f5f7; font: 500 15px/1.55 var(--sans); color: #1d1d1f; }
.x-scan__drop {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 88px; margin: 24px 0 0; padding: 20px;
  border-radius: 24px; border: 1.5px dashed rgb(0 0 0 / 0.22); background: #fbfbfd; color: #000000; cursor: pointer;
  font: 600 17px/1.2 var(--sans); letter-spacing: -0.01em; transition: border-color 150ms ease, background-color 150ms ease;
}
.x-scan__drop:hover { border-color: rgb(0 0 0 / 0.45); background: #f5f5f7; }
.x-scan__drop:focus-visible { outline: 2px solid #000000; outline-offset: 3px; }
.x-scan__or { margin: 16px 0 12px; text-align: center; font: 400 14px/1.4 var(--sans); color: #6e6e73; }
.x-scan textarea.x-kf__input { min-height: 132px; font-size: 16px; }
.x-scan__after { margin-top: 12px; }
.x-scan__ready { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgb(0 0 0 / 0.08); }
.x-scan__ready-h { margin: 0; font: 600 17px/1.35 var(--sans); letter-spacing: -0.01em; color: #000000; }
.x-scan__gate { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.x-scan__gate .x-kf__input { flex: 1 1 200px; width: auto; }
.x-scan__gate .x-btn { flex: 1 1 100%; }
@media (min-width: 861px) { .x-scan__gate .x-btn { flex: 0 0 auto; } }
.x-scan .x-kf__msg { margin-top: 12px; }
.x-scan__small { margin: 12px 0 0; font: 400 13px/1.5 var(--sans); color: #6e6e73; }
.x-scan__calc { display: grid; gap: 12px; margin-top: 20px; }
.x-scan__calc .x-kf__input { background: #ffffff; }
.x-scan__result { margin: 16px 0 0; padding: 14px 18px; border-radius: 18px; background: #ffffff; border: 1px solid rgb(0 0 0 / 0.07); font: 400 16px/1.6 var(--sans); color: #000000; }
.x-scan__result.is-done { font-weight: 600; }
.x-scan__result.is-error { color: #8a3a32; }

/* Report. */
.x-scan__report { max-width: 860px; margin-inline: auto; }
.x-scan__total { padding: clamp(28px, 4vw, 44px); border-radius: 28px; background: #000000; color: #ffffff; }
.x-scan__total .x-label { color: #a1a1a6; }
.x-scan__total h2 { font: 700 clamp(28px, 3.6vw, 40px)/1.12 var(--sans); letter-spacing: -0.035em; color: #ffffff; text-wrap: balance; }
.x-scan__total p { margin: 14px 0 0; font: 400 17px/1.6 var(--sans); color: #d1d1d6; }
.x-scan__total p strong { font-weight: 600; color: #ffffff; }
.x-scan__total p.x-scan__skip { font-size: 14px; color: #8e8e93; }
.x-scan__group { padding: clamp(32px, 4vw, 44px) 0 8px; border-bottom: 1px solid rgb(0 0 0 / 0.08); }
.x-scan__group-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.x-scan__group-top h2 { font: 700 clamp(24px, 2.6vw, 30px)/1.15 var(--sans); letter-spacing: -0.03em; color: #000000; }
.x-scan__count { font: 600 15px/1 var(--sans); color: #000000; }
.x-scan__count.is-zero { color: #86868b; font-weight: 500; }
.x-scan__blurb { margin: 8px 0 16px; max-width: 60ch; font: 400 16px/1.6 var(--sans); color: var(--x-body-ink); }
.x-scan__none { margin: 0 0 24px; font: 400 15px/1.55 var(--sans); color: #86868b; }
.x-scan__item { padding: 16px 0; border-top: 1px solid rgb(0 0 0 / 0.06); }
.x-scan__item-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.x-scan__item-name { font: 600 17px/1.35 var(--sans); letter-spacing: -0.01em; color: #000000; }
.x-scan__tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px; background: #000000; color: #ffffff; font: 600 13px/1 var(--sans); }
.x-scan__zip { font: 400 14px/1 var(--sans); color: #86868b; }
.x-scan__detail { margin: 6px 0 0; font: 400 15px/1.6 var(--sans); color: var(--x-body-ink); }
.x-scan__foot { margin: 24px 0 0; font: 400 14px/1.6 var(--sans); color: #6e6e73; }
.x-scan__close { margin-top: clamp(40px, 5vw, 56px); padding: clamp(28px, 5vw, 56px); border-radius: 28px; background: #f5f5f7; text-align: center; }
.x-scan__close h2 { font: 700 clamp(28px, 3.4vw, 40px)/1.1 var(--sans); letter-spacing: -0.035em; color: #000000; }
.x-scan__close p { margin: 14px auto 0; max-width: 58ch; font: 400 17px/1.65 var(--sans); color: var(--x-body-ink); text-wrap: pretty; }
.x-scan__close p.x-scan__fair { font-size: 16px; color: #424245; }
.x-scan__close-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
@media (max-width: 520px) {
  .x-scan__total, .x-scan__close { border-radius: 24px; }
  .x-scan__close-btns .x-btn { width: 100%; white-space: normal; text-align: center; }
}

/* The hero's link row. */
.x-hero__links { margin-top: 28px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .x-btn, .x-af__chip, .x-af__pair button, .x-af__upload, .x-af__agree, .x-af__bar i, .x-scan__drop { transition: none; }
}