/* WarmInfoFrame — SINGLE SOURCE (2026-09-09, owner brief). tools/_warm_frame.py writes this into every consumer's region:
   the bank template (tools/build-bank-detail.py — the readiness checklist and the operating-details strip) and the setup-cost
   inclusions panel on the three route pages (tools/build-cost-anatomy.py). ONE contained warm surface — the theme's tinted
   paper, a hairline border, restrained radius, 18/22px padding — with the quiet mono label 9px above its content and a
   marker-led list: a fixed 15px marker column, 8px to the text, 6px between rows, continuation lines under the text.
   Markers are decorative glyphs on the theme's --marker-* tokens (a green check = included / a strength; a muted-orange
   outlined diamond = a factor that varies the outcome, informational, never a warning). The frame never styles what sits
   inside it beyond these primitives; consumers add their own layout (columns, media) with their own class names. */
.warm-frame { padding: 18px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-tinted); }
.warm-frame-label { margin: 0 0 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: var(--faint); }
.warm-frame-list { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 6px; }
.warm-frame-list li { display: grid; grid-template-columns: 15px minmax(0, 1fr); column-gap: 8px; align-items: start; color: var(--text); font-size: 15px; line-height: 1.5; min-width: 0; }
.warm-frame-mark { width: 15px; height: 15px; margin-top: 4px; display: block; }
.warm-frame-mark svg { width: 15px; height: 15px; display: block; }
.warm-frame-mark--win { color: var(--marker-win-glyph); }   /* the shared positive glyph token; the heavier 2.4 stroke carries the visibility */
.warm-frame-mark--alt { color: var(--marker-alt-glyph); }   /* the shared alternative / variable token (muted orange) */
/* EditorialTopImageCard — SINGLE SOURCE (2026-09-09, owner brief). One framed card: a compact editorial image strip across the top
   (16:7, cover, focal point from the consumer's data as --ec-pos / --ec-pos-m), the title and one short description below in
   normal flow. Consumers keep their own semantic classes and typography beside these: the free-zone ActivityCard
   (tools/build-freezone-detail.py) and the BankCapabilityCard (tools/build-bank-detail.py) share this geometry — never copy it. */
.editorial-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 0; }
.editorial-card__media { margin: 0; aspect-ratio: 16 / 7; overflow: hidden; background: var(--surface-tinted, rgba(230,224,210,.035)); }
.editorial-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--ec-pos, 50% 50%); filter: none; }
@media (max-width: 760px) { .editorial-card__media img { object-position: var(--ec-pos-m, var(--ec-pos, 50% 50%)); } }
.editorial-card__body { padding: 22px 24px 26px; min-width: 0; }
.editorial-card__body > :first-child { margin-top: 0; }
.editorial-card__body > :last-child { margin-bottom: 0; }
/* compact variant (2026-09-09, owner brief — directory-style activity cards): a small landscape thumbnail on the left, the title and
   one supporting line on the right, natural height; the same frame, surface and radius. */
.editorial-card--compact { flex-direction: row; align-items: flex-start; gap: 18px; padding: 16px; }
.editorial-card--compact .editorial-card__media { flex: 0 0 112px; width: 112px; aspect-ratio: 4 / 3; border-radius: 8px; }
.editorial-card--compact .editorial-card__body { padding: 2px 0 0; flex: 1 1 auto; }
@media (max-width: 480px) { .editorial-card--compact { gap: 14px; padding: 14px; } .editorial-card--compact .editorial-card__media { flex-basis: 96px; width: 96px; } }
/* Bank detail template — SINGLE SOURCE. tools/build-bank-detail.py writes this into the hero
   region of every bank-*.html. Two components:
     .bk-hero-grid / .bk-hero-panel   the bank-profile hero: copy left, a declared right column
                                      (contained media, a structured facts panel, or nothing)
     .bk-facts                        one unified "Minimum balance, fees and opening timeline"
                                      panel with two internal columns and one containment
   Everything resolves through the theme tokens (surface-raised, line, text roles), so both
   themes and the stacked layout come from the same rules. No literals, no filters. */
.bk-hero { position: relative; overflow: hidden; }   /* stacking context for the photograph layer (hero-media.css) */
.bk-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 4vw, 60px); align-items: center; }
.bk-hero[data-hero-state="noMedia"] .bk-hero-grid { grid-template-columns: minmax(0, 1fr); }
.bk-hero-copy { max-width: 660px; min-width: 0; }
.bk-hero-mark { margin: 0 0 22px; }   /* BankIdentity hero mode: the official mark above the h1 (2026-09-07) */
/* The hero heading, restored as real text 2026-09-11 (owner): the h1 had held only the mark, so every bank
   page shipped a heading with no words in it. Same scale as the other hero families (.svc-hero h1) so the
   bank pages read as part of the set rather than a variant. */
.bk-hero-head { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -.025em; font-weight: 500;
                color: var(--text); margin: 0 0 16px; max-width: 20ch; }
.bk-hero-copy .bk-lede { margin: 0 0 26px; }

.bk-hero-panel { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; box-shadow: var(--shadow); min-width: 0; }
.bk-hero-panel-title { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin: 0 0 16px; }
.bk-hero-facts { margin: 0; display: grid; gap: 0; }
.bk-hero-facts > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; padding: 13px 0; border-top: 1px solid var(--line-soft); }
.bk-hero-facts > div:first-child { border-top: 0; padding-top: 0; }
.bk-hero-facts > div:last-child { padding-bottom: 0; }
.bk-hero-facts dt { color: var(--mineral); font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.bk-hero-facts dd { margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.5; }

.bk-hero-media { position: relative; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.bk-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.bk-facts { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.bk-facts-col { padding: 28px 30px; min-width: 0; }
.bk-facts-col + .bk-facts-col { border-left: 1px solid var(--line-soft); }
.bk-facts h3 { font-size: 14px; font-weight: 500; color: var(--mineral); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 14px; }
.bk-facts .bk-tier-list { margin: 0; }
.bk-facts .bk-data-dl { margin: 0 0 16px; }
.bk-facts .bk-data-note { margin: 0; }

@media (max-width: 900px) {
  .bk-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bk-hero-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bk-facts { grid-template-columns: 1fr; }
  .bk-facts-col + .bk-facts-col { border-left: 0; border-top: 1px solid var(--line-soft); }
  .bk-facts-col { padding: 24px 22px; }
  .bk-hero-panel { padding: 22px 22px; }
}

/* ---- BankReadiness (2026-09-08, owner brief; composition reverted 2026-09-09) — rendered by build-bank-detail.py from
   banks[].detail.readiness. ONE contained warm callout (the fit signal: label + a single sentence) · the numbered, counted
   document accordions on the native <details> primitive — the section's only interaction · the operating details as three
   static informational columns (label + description; no marks, no counts, no control, no cell frames). ---- */
.bk-readiness .sec-head--tight { margin-bottom: 36px; }
.bk-readiness-lede { margin: 12px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 62ch; }
.bk-readiness-note { margin: 8px 0 0; color: var(--faint); font-size: 13.5px; line-height: 1.55; max-width: 62ch; }
.bk-readiness-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 28px; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--line); }
.bk-readiness-facts > div { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.bk-readiness-facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 4px; }
.bk-readiness-facts dd { margin: 0; color: var(--text); font-size: 15px; line-height: 1.5; }
.bk-readiness-h3 { margin: 0 0 14px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--text); }
.bk-readiness-h3--primary { margin: 0 0 16px; font-size: 20px; letter-spacing: -.015em; }   /* the section's action */
.bk-readiness-h3--label { margin: 0 0 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: var(--faint); }
/* WarmInfoFrame (2026-09-09): ONE contained warm surface — the theme's tinted paper, a subtle border, restrained radius, 18/22px
   padding, the quiet mono label 9px above its content. Shared by the fit checklist and the operating-details block; the frame
   never styles what sits inside it. */
/* the shell itself is the shared WarmInfoFrame primitive (.warm-frame, _shared/warm-frame.css — extracted 2026-09-09 for the
   setup-cost panel); the bank classes stay as hooks for the bank-only layout below */
.bk-readiness-frame > .bk-readiness-h3--label { margin-bottom: 9px; }
.bk-readiness-fit { margin: 0 0 36px; }
/* the callout body: EITHER one sentence (prose acceptance note) OR the checklist — a 2 × 2 grid of short criteria (row-major), a thin
   check in the semantic-positive glyph token, no tile; one column under 42rem */
.bk-readiness-fit p { margin: 0; color: var(--text); font-size: 15px; line-height: 1.55; }
.bk-readiness-fit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }   /* 2 × 2 on the warm-frame list (row, marker column and glyphs are the primitive's) */
@media (max-width: 42rem) { .bk-readiness-fit-list { grid-template-columns: minmax(0, 1fr); } }
.bk-readiness-block + .bk-readiness-block { margin-top: 40px; }
.bk-readiness-groups { border-top: 1px solid var(--line); margin: 0; }
.bk-readiness-group { border-bottom: 1px solid var(--line); }
.bk-readiness-group > summary { list-style: none; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 26px; align-items: center; gap: 14px; padding: 20px 0; cursor: pointer; color: var(--text); }
.bk-readiness-group > summary::-webkit-details-marker { display: none; }
.bk-readiness-group > summary:focus-visible { outline: 2px solid var(--focus-ring, var(--mineral)); outline-offset: 3px; border-radius: 6px; }
.bk-readiness-idx { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--faint); }
.bk-readiness-title { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.bk-readiness-count { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--faint); white-space: nowrap; }
.bk-readiness-plus { grid-column: 4; position: relative; width: 26px; height: 26px; border: 1px solid var(--line-soft); border-radius: 50%; }
.bk-readiness-plus::before, .bk-readiness-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 1px; background: var(--muted); transform: translate(-50%, -50%); transition: transform .18s var(--ease, ease); }
.bk-readiness-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.bk-readiness-group[open] > summary .bk-readiness-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.bk-readiness-group > ul { list-style: none; margin: 0; padding: 0 0 22px 54px; display: grid; gap: 10px; }   /* items start under the row title */
.bk-readiness-group > ul li { position: relative; padding-left: 18px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.bk-readiness-group > ul li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--faint); }
@media (max-width: 860px) {
  .bk-readiness-group > summary { grid-template-columns: 34px minmax(0, 1fr) 26px; }
  .bk-readiness-count { grid-column: 2; grid-row: 2; }
  .bk-readiness-group > ul { padding-left: 48px; }
}
@media (max-width: 480px) { .bk-readiness-group > ul { padding-left: 0; } }

/* ---- BankReadiness media column (2026-09-08, owner brief): the header spans the section; the body is content stack |
   one contained image that runs from the stack's top to its last row and grows with any open row (grid stretch; the image
   is absolute inside its frame so it never sets the row height — the trust section's pattern). Absent media → one column. ---- */
.bk-readiness-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.bk-readiness--media .bk-readiness-body { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr); column-gap: clamp(40px, 6vw, 88px); align-items: stretch; }
.bk-readiness-content { min-width: 0; }
.bk-readiness-media { position: relative; margin: 0; min-height: 0; align-self: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-tinted, rgba(230,224,210,.035)); }
.bk-readiness-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--bk-readiness-pos, center center); }
@media (max-width: 1100px) { .bk-readiness--media .bk-readiness-body { grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); column-gap: 32px; } .bk-readiness-media img { object-position: var(--bk-readiness-pos-tablet, var(--bk-readiness-pos, center center)); } }
@media (max-width: 860px) { .bk-readiness--media .bk-readiness-body { grid-template-columns: 1fr; gap: 0; } .bk-readiness--media .bk-readiness-media { margin-top: 36px; aspect-ratio: 16 / 10; align-self: auto; } .bk-readiness-media img { object-position: var(--bk-readiness-pos-mobile, var(--bk-readiness-pos, center center)); } }   /* stacked: content first (DOM order), then the image at a shorter ratio */

/* ---- hero without the At-a-glance card (2026-09-08, owner): the mark is the h1 ---- */
.bk-hero-mark { margin: 0 0 22px; line-height: 0; font-size: 0; }   /* an h1 that holds only the mark: no line box of its own */
.bk-hero[data-hero-state="noMedia"] .bk-hero-copy { max-width: 720px; }

/* ---- BankUseCaseMap — 'What [Bank] is good for' (owner, 2026-09-09, third pass — the text-led grouped list restored): the
   section title, ONE restrained divider, then each category as a plain heading followed by its capabilities in a two-column
   grid. A capability is a BankBenefitItem: a compact 4:3 thumbnail on the left (132px; 104px on phones), the approved title
   and description on the right as the primary content, inside a subtle frame (hairline, warm surface, 14px radius, 16px
   padding — restored on the owner's fourth pass for scanning rhythm). Categories are separated by vertical whitespace only
   (no divider after a group); the one rule on the section is beneath the heading block. The bands sit in a two-column
   category-block grid: bands[].layout 'wide' spans it, 'column' takes one column, so adjacent one-capability categories
   share a row instead of leaving a blank half-row (owner, 2026-09-09 fifth pass). Both card passes of 2026-09-09 (16:9
   photo-topped mini cards in a count-driven grid; bordered thumbnail cards with a rule after every band) are retired. */
.bk-usecase-bands { list-style: none; margin: 0; padding: 36px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; align-items: start; border-top: 1px solid var(--line); }   /* the category-block grid (owner, 2026-09-09): the one divider beneath the heading block; bands are the layout units */
.bk-usecase-band[data-layout="wide"] { grid-column: 1 / -1; }   /* a category with two or more capabilities spans both columns */
.bk-usecase-band[data-layout="column"] .bk-benefit-grid { grid-template-columns: minmax(0, 1fr); }   /* a one-capability category takes one column; the next column block sits beside it, heading above its own item */
.bk-usecase-band { padding: 0; border: 0; }
.bk-usecase-title { margin: 0 0 24px; font-size: 20px; font-weight: 500; letter-spacing: -.015em; color: var(--text); line-height: 1.3; }
.bk-benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }   /* a single item sits in the first column at its natural width */
.bk-benefit-item .bk-benefit-body h4 { margin: 0 0 8px; font-size: 18px; font-weight: 500; color: var(--text); line-height: 1.3; letter-spacing: -.01em; }   /* the card itself is the shared EditorialTopImageCard (owner, 2026-09-09: the same top-image treatment as the free-zone activity cards) */
.bk-benefit-item .bk-benefit-body p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 900px) { .bk-usecase-bands { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 30px; } .bk-usecase-band[data-layout="wide"] { grid-column: auto; } .bk-benefit-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }   /* one category block and one compact card per row before the card's text column compresses (shared collapse, restored 2026-09-09 after the EditorialTopImageCard pass dropped it) */

/* ---- BankReadiness media column (2026-09-08, owner brief): the header spans the section; the body is content stack |
   one contained image that runs from the stack's top to its last row and grows with any open row (grid stretch; the image
   is absolute inside its frame so it never sets the row height — the trust section's pattern). Absent media → one column. ---- */
.bk-readiness-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.bk-readiness--media .bk-readiness-body { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr); column-gap: clamp(40px, 6vw, 88px); align-items: stretch; }
.bk-readiness-content { min-width: 0; }
.bk-readiness-media { position: relative; margin: 0; min-height: 0; align-self: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-tinted, rgba(230,224,210,.035)); }
.bk-readiness-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--bk-readiness-pos, center center); }
@media (max-width: 1100px) { .bk-readiness--media .bk-readiness-body { grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); column-gap: 32px; } .bk-readiness-media img { object-position: var(--bk-readiness-pos-tablet, var(--bk-readiness-pos, center center)); } }
@media (max-width: 860px) { .bk-readiness--media .bk-readiness-body { grid-template-columns: 1fr; gap: 0; } .bk-readiness--media .bk-readiness-media { margin-top: 36px; aspect-ratio: 16 / 10; align-self: auto; } .bk-readiness-media img { object-position: var(--bk-readiness-pos-mobile, var(--bk-readiness-pos, center center)); } }   /* stacked: content first (DOM order), then the image at a shorter ratio */

/* ---- hero without the At-a-glance card (2026-09-08, owner): the mark is the h1 ---- */
.bk-hero-mark { margin: 0 0 22px; line-height: 0; font-size: 0; }   /* an h1 that holds only the mark: no line box of its own */
.bk-hero[data-hero-state="noMedia"] .bk-hero-copy { max-width: 720px; }

/* ---- BankAccountConsiderations (2026-09-08; final composition 2026-09-09, owner brief): the thresholds panel — balance ladder left,
   one image-only column right filling its height (the frame owns background, border, radius, clipping) — then the three operating
   details in one row inside their own WarmInfoFrame strip below (icon | heading + description, no heading of their own). ---- */
/* both frames sit on the page's shared content column (.wrap) — no width of their own (owner, 2026-09-09: the 80 % measure was reverted) */
.bk-considerations-panel { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: 16px; background: var(--surface-tinted, rgba(230,224,210,.035)); overflow: hidden; }
.bk-considerations-panel--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* 50 / 50 at every density; the image column takes the ladder's height (data-media-density="compact" for 1–3 rows) — the ladder is never stretched (owner, 2026-09-09, final) */
.bk-considerations-content { padding: 28px 32px 30px; min-width: 0; }
/* the ladder's label reads like the operating-detail headings below it (owner, 2026-09-09): same face, size, weight and ink, with its
   own line icon in the same 18px column */
.bk-considerations-label { margin: 0 0 14px; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: start; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--text); letter-spacing: -.005em; }
.bk-considerations-tiers { margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.bk-considerations-tiers > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.bk-considerations-tiers dt { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 14.5px; line-height: 1.4; }
.bk-considerations-tiers dd { flex: 0 1 auto; margin: 0; min-width: min-content; max-width: 65%; text-align: right; color: var(--text); font-size: 17px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }   /* the value wraps, right-aligned, instead of nowrap clipping a long qualifier at the column edge (2026-09-09) */
/* explicit unavailable-data state (owner, 2026-09-09): a neutral label, distinct from a confirmed value, with the source note beneath */
.bk-fact-state { display: block; color: var(--muted); font-weight: 500; }
.bk-fact-note { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--muted); }
.bk-ops-content p.bk-fact-state { color: var(--text); font-weight: 500; }
/* the operating-details strip: the WarmInfoFrame shell (.bk-readiness-frame) directly under the thresholds panel, one three-column
   row inside it — the grid folds by measure (3 → 2 → 1), never by page */
.bk-considerations-strip { margin-top: 24px; padding: 22px 28px 24px; }   /* a little more room than the shell's 18/22 — the strip carries three feature summaries, not a note */
.bk-ops-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }   /* three equal thirds; one column under 760px */
.bk-ops-grid li { min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: start; }   /* icon column | content column */
.bk-ops-icon { width: 20px; height: 20px; margin-top: 1px; color: var(--muted); display: block; }
.bk-ops-icon svg { width: 20px; height: 20px; display: block; }
.bk-ops-content { min-width: 0; }
.bk-ops-content h4 { margin: 0 0 6px; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--text); letter-spacing: -.005em; }
.bk-ops-content p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }   /* one <p> per deliberate line; no gap between lines beyond the line height */
/* the photograph never sets the row (2026-09-09, owner): an in-flow img with height:100% resolved to its natural height in an
   auto-height grid row, so a 4:3 asset beside a three-tier ladder stretched the ladder's panel ~180px past its last row on 12
   pages. The figure is the positioned frame and the image fills it absolutely — the readiness media column's pattern — so the
   row is the ladder's own height and the image crops to it. */
.bk-considerations-visual { position: relative; margin: 0; min-width: 0; min-height: 0; }
.bk-considerations-visual img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: var(--bk-considerations-pos, center center); }
/* under the tablet breakpoint the left column can no longer carry the ladder and three descriptions beside a portrait image:
   the panel stacks inside the same frame — content first, then one wide image (16:9) under a hairline */
@media (max-width: 1000px) { .bk-considerations-content { padding: 24px 24px 26px; } .bk-considerations-panel--media { grid-template-columns: 1fr; } .bk-considerations-visual { aspect-ratio: 21 / 9; border-top: 1px solid var(--line-soft); }   /* stacked: a short strip under a short ladder, not a standalone photograph */ .bk-considerations-visual img { object-position: var(--bk-considerations-pos-tablet, var(--bk-considerations-pos, center center)); } }
@media (max-width: 760px) { .bk-ops-grid { grid-template-columns: minmax(0, 1fr); } .bk-considerations-tiers > div { flex-direction: column; align-items: flex-start; gap: 4px; } .bk-considerations-tiers dd { text-align: left; max-width: none; }   /* phones: the value sits under its label at full row width (2026-09-09) */ .bk-considerations-visual { aspect-ratio: 16 / 9; } .bk-considerations-visual img { object-position: var(--bk-considerations-pos-mobile, var(--bk-considerations-pos, center center)); } }   /* phones: a slightly deeper standalone ratio */

/* ---- BankAlternatives (2026-09-08): head + lede, a quiet current-route line, then the shared route cards ---- */
.bk-alternatives-head { margin-bottom: 32px; }
.bk-alternatives-lede { margin: 12px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 60ch; }
.bk-alternatives-context { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.bk-alternatives-context-mark { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; }