/* ==========================================================================
   ds-bank.css — the 56 single-institution landing pages.

   Requires ds.css (tokens), ds-components.css, ds-site.css, ds-converter.css.
   Scoped under .ds. Replaces the legacy tokens.css + bank.css + brand-motion.css
   trio, which carried the purple palette.

   COMPOSITION
   -----------
   A bank page answers one question: "will this thing read MY statement?" So
   the hero is a claim on the left and, on the right, the answer as a
   specification — the same ruled ledger grammar used everywhere else on the
   site, applied to a format instead of a transaction. That format sheet is
   the page's signature; the homepage has its document-becoming-rows figure and
   /supported-banks has its printed index, and neither is reused here.

   Everything below the converter is ruled rows, never cards. Same law as the
   rest of the system.
   ========================================================================== */

/* ==========================================================================
   HERO — copy left, format sheet right
   ========================================================================== */

.ds .bk-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(32px, 4vw, 56px); }

.ds .bk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.ds .bk-hero h1 {
  font-size: var(--fs-h1); font-weight: var(--fw-strong);
  letter-spacing: var(--tr-display); line-height: var(--lh-head);
  margin: 0 0 var(--s-5); text-wrap: balance;
}
/* The institution name is the one word the visitor searched for, so it is the
   one word that gets the column rule under it. */
.ds .bk-hero h1 em {
  font-style: normal; color: var(--c-green-text);
  box-shadow: inset 0 -2px 0 var(--c-green-line);
}
.ds .bk-lede {
  font-size: var(--fs-body-l); color: var(--c-ink-2);
  margin: 0 0 var(--s-6); max-width: 56ch;
}

.ds .bk-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* One quiet line under the buttons. The numbers all live in the format sheet
   beside it, so repeating them here would be decoration. */
.ds .bk-note {
  margin: var(--s-5) 0 0; font-size: 13px; color: var(--c-ink-3);
}

/* ==========================================================================
   FORMAT SHEET — the signature
   ========================================================================== */

.ds .bk-spec {
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--e-card);
  overflow: hidden;
}

.ds .bk-spec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  border-bottom: 1.5px solid var(--c-line-strong);
  background: var(--c-bg-soft);
}
.ds .bk-spec-head b {
  font-size: 17px; font-weight: var(--fw-strong); letter-spacing: -.015em;
  color: var(--c-ink);
}
.ds .bk-spec-kicker {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-faint);
  flex: none;
}

.ds .bk-spec-rows { margin: 0; padding: 0 var(--s-5); }
.ds .bk-spec-rows > div {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
  align-items: baseline;
}
.ds .bk-spec-rows > div:last-child { border-bottom: 0; }
.ds .bk-spec-rows dt {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3);
}
.ds .bk-spec-rows dd {
  margin: 0; font-size: 14.5px; color: var(--c-ink);
  font-weight: var(--fw-medium);
}
/* A value that came out of a file keeps the mono face — same rule as the
   converter's transaction rows. */
.ds .bk-spec-rows dd.val { font-size: 13.5px; font-weight: 400; color: var(--c-ink-2); }
.ds .bk-spec-rows dd.on { color: var(--c-green-text); }

.ds .bk-spec-foot {
  margin: 0; padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-line);
  background: var(--c-bg-soft);
  font-size: 13px; color: var(--c-ink-2); line-height: 1.5;
  display: flex; gap: var(--s-3); align-items: flex-start;
}
.ds .bk-spec-foot svg { flex: none; margin-top: 2px; color: var(--c-green); }

/* ==========================================================================
   CONVERTER — the homepage widget, on a page whose headings are left aligned.
   ds-converter.css centres it (`margin-inline: auto`) because the homepage
   centres its section head too; here every head is left aligned, so a centred
   panel under a left head reads as a misalignment rather than a choice.
   ========================================================================== */

.ds .bk-conv .dsc { margin-inline: 0; }

/* ==========================================================================
   RULED LISTS — what the extraction does, and how it works
   ========================================================================== */

.ds .bk-rows { border-top: 1px solid var(--c-line-2); }
.ds .bk-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--c-line);
  align-items: baseline;
}
.ds .bk-row-n {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--c-green-text); letter-spacing: .04em;
}
.ds .bk-row h3 {
  margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semi);
  letter-spacing: var(--tr-head); color: var(--c-ink);
}
.ds .bk-row p { margin: 0; color: var(--c-ink-2); line-height: var(--lh-body); }

/* Numbers are for a real sequence. "How it works" is one; a set of three
   independent capabilities or three independent failure modes is not, and
   numbering it would claim an order that does not exist. */
.ds .bk-rows.plain .bk-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.ds .bk-rows.plain .bk-row-n { display: none; }

@media (max-width: 720px) {
  .ds .bk-row { grid-template-columns: 32px minmax(0, 1fr); row-gap: var(--s-3); }
  .ds .bk-row p { grid-column: 2; }
  .ds .bk-rows.plain .bk-row { grid-template-columns: minmax(0, 1fr); }
  .ds .bk-rows.plain .bk-row p { grid-column: 1; }
}

/* ==========================================================================
   OCR PAGE — the before/after that is the whole argument of /bank-statement-ocr

   Generic OCR reads characters left to right and returns the row as one line.
   Showing that line above the same values placed in columns says more than a
   paragraph about it does, and it is plain DOM text: no image, sharp at any
   DPI, and readable by a screen reader.
   ========================================================================== */

.ds .ocr-demo {
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--e-card);
  overflow: hidden;
}
.ds .ocr-panel { padding: var(--s-5); }
.ds .ocr-panel + .ocr-panel { border-top: 1.5px solid var(--c-line-strong); }
.ds .ocr-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-faint);
  margin-bottom: var(--s-4);
}
.ds .ocr-panel.out { background: var(--c-bg-soft); }
.ds .ocr-panel.out .ocr-panel-head { color: var(--c-green-text); }

/* The smeared line. Wraps, because that is what it does in a spreadsheet cell. */
.ds .ocr-raw {
  margin: 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  color: var(--c-ink-3); overflow-wrap: anywhere;
}
.ds .ocr-raw b { color: var(--c-ink-2); font-weight: 500; }

.ds .ocr-grid { display: grid; gap: 0; }
.ds .ocr-tr {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 74px 74px;
  gap: var(--s-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.ds .ocr-tr:last-child { border-bottom: 0; }
.ds .ocr-tr.head {
  border-bottom: 1px solid var(--c-line-strong);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-ink-faint); padding-top: 0;
}
.ds .ocr-tr .r { text-align: right; }
.ds .ocr-tr .dr { color: var(--c-danger); }
.ds .ocr-tr .cr { color: var(--c-green-text); }
.ds .ocr-tr .desc { color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 560px) {
  .ds .ocr-tr { grid-template-columns: 44px minmax(0, 1fr) 62px 62px; font-size: 11px; gap: var(--s-2); }
}

/* ==========================================================================
   TRADEMARK NOTE — a disclosure, so it is set as one: small, quiet, ruled off.
   ========================================================================== */

.ds .bk-tm {
  margin: var(--s-7) 0 0; padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: 12.5px; color: var(--c-ink-3); line-height: 1.6; max-width: 82ch;
}

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */

.ds .bk-cta {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.ds .bk-cta h2 {
  font-size: var(--fs-h2); font-weight: var(--fw-strong);
  letter-spacing: var(--tr-head); line-height: var(--lh-head); margin: 0 0 var(--s-4);
  text-wrap: balance;
}
.ds .bk-cta p { margin: 0; color: var(--c-ink-2); }
.ds .bk-cta-side { display: grid; gap: var(--s-3); justify-items: start; }
.ds .bk-cta-note { font-size: 13px; color: var(--c-ink-3); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {
  .ds .bk-grid { grid-template-columns: 1fr; }
  /* The sheet answers the headline, so on one column it follows it directly
     rather than being pushed below the fold by the buttons and facts. */
  .ds .bk-spec { max-width: 560px; }
}
@media (max-width: 860px) {
  .ds .bk-cta { grid-template-columns: 1fr; }
  .ds .bk-cta-side { justify-items: stretch; }
}
@media (max-width: 520px) {
  .ds .bk-spec-rows > div { grid-template-columns: 1fr; gap: var(--s-1); }
}