/* Application form — riverbankcap.com
   Palette and type are taken from the marketing site so the form does not feel
   like a different company. Deliberately light-only: the parent site commits to
   a bone ground, and a form that flipped to dark would not match it. */

:root {
  --ground:   #F7F6F3;
  --surface:  #FFFFFF;
  --alt:      #EDEBE5;
  --ink:      #2A3238;
  --ink-soft: #56687F;
  --ink-faint:#8A9299;
  --line:     #D8D4CB;
  --line-soft:#E6E2D9;
  --sage:     #7E8C6F;
  --sage-dk:  #667359;
  --sage-tint:#EDF0E8;
  --clay:     #9C4A35;
  --clay-tint:#F9EBE6;
  --focus:    #56687F;
  --radius:   5px;
  --shadow:   0 1px 2px rgba(42,50,56,.05), 0 10px 30px rgba(42,50,56,.06);
}

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

/* A class that sets `display` out-specifies the `hidden` attribute, which is
   how a hidden overlay ends up covering the page. Make `hidden` win. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Karla, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:where(a) { color: var(--ink); text-decoration-color: var(--sage); text-underline-offset: 3px; }
:where(a):hover { color: var(--ink-soft); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-head {
  background: rgba(247,246,243,.96);
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(6px);
  display: flex; align-items: center; gap: 20px;
  padding: 0 clamp(18px, 4vw, 40px);
  height: 64px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark { display: block; width: 30px; height: 34px; overflow: hidden; position: relative; flex: none; }
.brand-mark img { position: absolute; width: 85px; left: -27px; top: -16px; mix-blend-mode: multiply; }
.brand-word { font-size: 12.5px; font-weight: 600; letter-spacing: .24em; }
.head-note { margin: 0 0 0 auto; font-size: 13.5px; color: var(--ink-soft); }
@media (max-width: 620px) { .head-note { display: none; } }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(18px, 4vw, 40px) 100px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 940px) {
  .wrap { grid-template-columns: minmax(0, 1fr); }
  .col-side { order: -1; }
}

.intro { margin-bottom: 34px; }
.eyebrow {
  margin: 0 0 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sage);
}
h1 {
  font-family: "Bricolage Grotesque", Helvetica, sans-serif;
  font-weight: 650; letter-spacing: -.02em;
  font-size: clamp(30px, 4.6vw, 44px); line-height: 1.06;
  text-wrap: balance; margin: 0 0 14px;
}
.lede { margin: 0; font-size: 17px; color: var(--ink-soft); max-width: 54ch; }

/* Who the merchant is applying with, stated in the main column rather than only
   in the sidebar card -- on a phone the sidebar is reordered above the form, but
   on desktop it sits off to the side where it reads as decoration. Attribution
   is the one thing that should not depend on which column the eye lands in. */
.applying-with {
  display: flex; align-items: baseline; gap: 9px;
  margin: 18px 0 0; padding: 11px 14px;
  background: var(--sage-tint); border-left: 3px solid var(--sage);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 54ch;
}
.applying-with strong { font-weight: 700; }
.applying-with a { color: var(--sage-dk); text-decoration: underline; text-underline-offset: 2px; }
.aw-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sage); transform: translateY(-1px);
}

/* ── Groups ──────────────────────────────────────────────────────────────── */
.group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 26px clamp(18px, 3vw, 28px) 28px;
  margin: 0 0 22px;
}
/* A <legend> is laid out on the fieldset's top border by default, which makes
   a two-line legend straddle the frame. Floating it takes it out of that
   special layout and back into normal flow inside the box. */
.group > legend {
  float: left; width: 100%;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.group::after { content: ""; display: table; clear: both; }
.grid, .dropzone, .cert, .sigwrap, .consent, .filelist { clear: both; }
.group-title {
  font-family: "Bricolage Grotesque", Helvetica, sans-serif;
  font-size: 19px; font-weight: 600; letter-spacing: -.01em;
}
.group-blurb { font-size: 14px; color: var(--ink-soft); font-weight: 400; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 16px; padding-top: 22px; }
.w-full    { grid-column: span 4; }
.w-half    { grid-column: span 2; }
.w-quarter { grid-column: span 1; }
@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .w-full, .w-half { grid-column: span 2; }
  .w-quarter { grid-column: span 1; }
}

/* ── Fields ──────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 13.5px; font-weight: 600; }
.opt { font-weight: 400; color: var(--ink-faint); font-size: 12.5px; }
.hint { margin: 0; font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; }

.field input, .field select {
  width: 100%;
  font: inherit; font-size: 15.5px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 32px;
}
.field input:hover, .field select:hover { border-color: var(--ink-faint); }
.field input:focus, .field select:focus {
  outline: none; border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(86,104,127,.14);
}
.field[data-invalid="true"] input, .field[data-invalid="true"] select { border-color: var(--clay); }
.field .err { margin: 0; font-size: 12.5px; color: var(--clay); font-weight: 600; }

.money { position: relative; display: flex; align-items: center; }
.money-sign { position: absolute; left: 12px; color: var(--ink-faint); font-size: 15.5px; pointer-events: none; }
.money input { padding-left: 26px; }

/* Honeypot — visible to bots that fill everything, not to people. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Uploads ─────────────────────────────────────────────────────────────── */
.dropzone {
  margin-top: 22px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--alt);
  padding: 30px 20px; text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone.is-over { border-color: var(--sage); background: var(--sage-tint); }
.dz-main { margin: 0 0 4px; font-size: 15px; }
.dz-sub { margin: 0; font-size: 13px; color: var(--ink-faint); }
.linkish {
  font: inherit; color: var(--sage-dk); background: none; border: none; padding: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600;
}
.linkish:hover { color: var(--ink-soft); }

.filelist { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.filelist li {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line-soft); border-radius: 4px;
  background: var(--surface); padding: 9px 12px; font-size: 14px;
}
.filelist .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist .fsize { color: var(--ink-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.filelist .fdrop { font: inherit; font-size: 13px; color: var(--clay); background: none; border: none; cursor: pointer; padding: 2px 4px; }
.filelist li[data-bad="true"] { border-color: var(--clay); background: var(--clay-tint); }

/* ── Signature ───────────────────────────────────────────────────────────── */
.cert {
  margin-top: 22px;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-soft);
  background: var(--alt); border: 1px solid var(--line-soft);
  border-radius: 4px; padding: 14px 16px;
  max-height: 132px; overflow-y: auto;
}
.sigwrap { margin-top: 18px; }
.siglabel { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.siglabel span { font-size: 13.5px; font-weight: 600; }
#sigpad {
  display: block; width: 100%; height: 150px;
  background: var(--surface);
  border: 1px solid var(--line); border-bottom: 2px solid var(--ink-soft);
  border-radius: 4px; touch-action: none; cursor: crosshair;
}
.sig-fallback { margin: 10px 0 0; font-size: 13px; color: var(--ink-faint); }
.sig-fallback input {
  font: inherit; font-size: 14.5px; margin-left: 6px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 4px; min-width: 200px; color: var(--ink);
}

.consent { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; font-size: 14px; line-height: 1.5; }
.consent input { margin: 3px 0 0; width: 17px; height: 17px; flex: none; accent-color: var(--sage); }

/* ── Submit ──────────────────────────────────────────────────────────────── */
.submit-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.btn-primary {
  font: inherit; font-size: 16px; font-weight: 700;
  background: var(--ink); color: var(--ground);
  border: none; border-radius: 4px; padding: 14px 30px;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background .14s ease;
}
.btn-primary:hover { background: var(--sage); }
.btn-primary[disabled] { background: var(--ink-faint); cursor: progress; }
.submit-note { margin: 0; font-size: 13.5px; color: var(--ink-faint); }
.form-error {
  margin: 16px 0 0; padding: 13px 16px; font-size: 14.5px; font-weight: 600;
  color: var(--clay); background: var(--clay-tint);
  border: 1px solid var(--clay); border-radius: 4px;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.col-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }
@media (max-width: 940px) { .col-side { position: static; } }
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 20px 22px; box-shadow: var(--shadow);
}
.rep-head { display: flex; gap: 14px; align-items: center; }
.rep-photo { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex: none; }
.mono-avatar {
  display: grid; place-items: center;
  background: var(--sage-tint); color: var(--sage-dk);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 20px;
  letter-spacing: .02em;
}
.rep-name {
  font-family: "Bricolage Grotesque", Helvetica, sans-serif;
  font-size: 19px; font-weight: 600; margin: 0; letter-spacing: -.01em; text-wrap: balance;
}
.rep-title { margin: 1px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.rep-bio { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }
.rep-contact {
  margin: 12px 0 0; font-size: 14.5px; display: flex; gap: 10px; align-items: baseline;
  border-top: 1px solid var(--line-soft); padding-top: 10px;
}
.rep-contact span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); flex: none; }
.rep-contact a { font-variant-numeric: tabular-nums; word-break: break-all; }
.rep-card.generic .rep-name { font-size: 17px; }

.facts dl { margin: 0; display: flex; flex-direction: column; }
.facts dl > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.facts dl > div:last-child { border-bottom: none; }
.facts dt { font-size: 14px; color: var(--ink-soft); }
.facts dd { margin: 0; font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.secure p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

/* ── Confirmation ────────────────────────────────────────────────────────── */
.done {
  position: fixed; inset: 0; z-index: 60;
  background: var(--ground);
  display: grid; place-items: center; padding: 24px;
}
.done-card { max-width: 480px; text-align: center; }
.done-mark {
  width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--sage); color: var(--surface);
  display: grid; place-items: center; font-size: 28px; line-height: 1;
}
.done-card h2 {
  font-family: "Bricolage Grotesque", Helvetica, sans-serif;
  font-size: 30px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 12px;
}
.done-card p { margin: 0 0 10px; color: var(--ink-soft); }
.done-ref { font-size: 13.5px; color: var(--ink-faint); margin-bottom: 26px; }
.mono { font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Test mode banner ────────────────────────────────────────────────────── */
/* Amber rather than the site's sage: this is a warning, and it must not read
   as part of the normal page furniture. */
.testbar {
  background: #F6EFDB;
  border-bottom: 1px solid #D8C79A;
  color: #6A551E;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px clamp(18px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
}
.testbar strong { color: #55440F; }
.testbar code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  background: #EFE3C4;
  border-radius: 3px;
  padding: 1px 5px;
}
.testbar a { color: #55440F; margin-left: auto; white-space: nowrap; }