/* ============================================================
   Banking method pages v2 (prefix .bnk-)
   Mockup of record: mockups/banking-v2/concept-e-r2.html

   Loads AFTER tokens + v2-components + casino-v2 + article +
   us-state. The toplist card is us-state.css's Quiet Card, SHARED
   not forked: the only banking difference is that .usst-methods
   (the three direction rows) is replaced by .bnk-verdict +
   .bnk-payline, and .usst-pros is not rendered. See
   inc/us-state-page.php banking mode.
   ============================================================ */

/* ---- shells: article column for prose, breakout for data ---- */
.bnk-col { max-width: calc(49rem + 2 * var(--bji-gutter)); margin-inline: auto; padding-inline: var(--bji-gutter); }

/* ---- section headings ---- */
.bnk-kicker {
  font-size: var(--bji-text-xs); letter-spacing: .06em; text-transform: uppercase;
  font-weight: var(--bji-weight-bold); color: var(--bji-blue-600); margin: 0 0 var(--bji-space-1);
}
.bnk-h2 { font-size: var(--bji-text-2xl); font-weight: var(--bji-weight-black); margin: 0 0 var(--bji-space-2); }
/* NO measure cap. Every .bnk-dek introduces a full-container data block
   (toplist, ineligible table, payout table), so capping it at 44rem left it
   sharing a left edge with the block and diverging on the right: the exact
   "reads as broken rather than as a breakout" failure the provider page was
   rejected for in round 2. A dek is one or two supporting sentences, not
   body prose; body prose lives in .bnk-col at the article measure. */
.bnk-dek { color: var(--bji-text-muted); margin: 0 0 var(--bji-space-4); }

/* ============================================================
   HERO + .bnk-route: the money round trip.
   Nothing in the v2 bank renders a directional path, and this is
   the answer to the biggest unserved intent on the family: 183 of
   654 methods are deposit-only, and that set holds 207,154
   impressions at 0.04% CTR.
   ============================================================ */
.bnk-hero {
  background:
    radial-gradient(90rem 30rem at 85% -20%, rgb(6 152 255 / .25), transparent 60%),
    linear-gradient(160deg, var(--bji-navy-900), var(--bji-navy-800) 70%);
  color: var(--bji-text-inverse);
  padding: var(--bji-space-5) 0 var(--bji-space-6);
}
.bnk-hero .crumbs { font-size: var(--bji-text-xs); color: rgb(255 255 255 / .6); margin-bottom: var(--bji-space-3); }
.bnk-hero .crumbs a { color: rgb(255 255 255 / .6); }
.bnk-hero h1 { font-size: var(--bji-text-3xl); font-weight: var(--bji-weight-black); line-height: 1.15; margin: 0 0 var(--bji-space-2); color: #fff; }
/* No measure cap, same reason as .bnk-dek: the lede sits directly above the
   full-container route block, so a 46rem cap left it sharing a left edge and
   diverging on the right. */
.bnk-hero .lede { font-size: var(--bji-text-lg); color: rgb(255 255 255 / .82); margin: 0 0 var(--bji-space-4); }
/* byline is the shipped .av2-byline from article.css, already styled
   for a dark hero. Do not restyle it here. */

.bnk-mark {
  width: 3.1rem; height: 3.1rem; flex: none; border-radius: 12px; background: #fff;
  border: 1px solid var(--bji-gray-200); display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--bji-weight-black); font-size: .78rem; color: var(--bji-navy-900);
  box-shadow: 0 1px 2px rgb(14 22 56 / .06); overflow: hidden;
}
.bnk-mark img { max-width: 80%; max-height: 80%; display: block; }

.bnk-route {
  display: grid; grid-template-columns: 1fr auto 1.35fr;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .16);
  border-radius: 14px; overflow: hidden;
}
.bnk-lane { padding: 1.15rem 1.35rem; min-width: 0; }
.bnk-lane h2 {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: var(--bji-weight-bold); margin: 0 0 .7rem; color: rgb(255 255 255 / .55);
}
.bnk-lane--in { background: rgb(23 133 70 / .16); }
.bnk-lane--out { background: rgb(6 152 255 / .10); }
.bnk-lane--in h2 { color: #7fe0a8; }
.bnk-lane--out h2 { color: #7cc7ff; }
.bnk-routesep {
  display: flex; align-items: center; justify-content: center; padding: 0 .9rem;
  color: rgb(255 255 255 / .72); font-size: 2rem; line-height: 1; font-weight: var(--bji-weight-bold);
  background: rgb(255 255 255 / .07);
}
.bnk-lane .primary { display: flex; align-items: center; gap: .65rem; margin-bottom: .5rem; }
.bnk-lane .primary .bnk-mark { width: 2.4rem; height: 2.4rem; border-radius: 9px; font-size: .65rem; }
.bnk-lane .primary strong { font-size: var(--bji-text-lg); font-weight: var(--bji-weight-black); color: #fff; }
.bnk-lane .sub { font-size: var(--bji-text-sm); color: rgb(255 255 255 / .72); margin: 0; }
/* the refusal on the deposit side too, so the two lanes carry the
   asymmetry that is the point rather than reading as "here is A, here is B" */
.bnk-lane .flag-no {
  display: inline-flex; align-items: center; gap: .4rem; margin: .9rem 0 0;
  padding: .3rem .75rem; border-radius: var(--bji-radius-pill);
  font-size: var(--bji-text-sm); font-weight: var(--bji-weight-bold);
  background: rgb(220 76 76 / .18); border: 1px solid rgb(255 138 138 / .5); color: #ffb4b4;
}
.bnk-outlist { list-style: none; margin: 0; padding: 0; }
.bnk-outlist li {
  display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; align-items: baseline;
  padding: .3rem 0; border-top: 1px solid rgb(255 255 255 / .10);
  font-size: var(--bji-text-sm); color: rgb(255 255 255 / .9);
}
.bnk-outlist li:first-child { border-top: 0; }
.bnk-outlist .m { font-weight: var(--bji-weight-bold); color: #fff; }
.bnk-outlist .t { color: #7cc7ff; font-weight: var(--bji-weight-semibold); white-space: nowrap; }
.bnk-outlist .c { color: rgb(255 255 255 / .55); font-size: var(--bji-text-xs); white-space: nowrap; }
.bnk-routenote { font-size: var(--bji-text-xs); color: rgb(255 255 255 / .6); margin: .65rem 0 0; }

/* ============================================================
   The deposit-only fact lands three times by design: the lede,
   the IN lane flag above, and this standing marker directly above
   the first casino, for readers who arrive mid-page from a SERP.
   ============================================================ */
.bnk-depositonly {
  display: flex; gap: .7rem; align-items: flex-start;
  border-left: 4px solid var(--bji-amber-500); background: var(--bji-amber-100);
  border-radius: 0 10px 10px 0; padding: .8rem 1.1rem; margin: var(--bji-space-4) 0 var(--bji-space-3);
  font-size: var(--bji-text-base); color: var(--bji-gray-800);
}
.bnk-depositonly .ico { font-size: 1.05rem; line-height: 1.4; flex: none; }
.bnk-depositonly strong { color: var(--bji-navy-900); }

/* ============================================================
   Geo: the statement is the list's own header line, never a
   dismissible banner. A banner competes with the hero for a
   contested fold, gets dismissed unread, and "we have detected
   you are from X" narrates our infrastructure at the reader.
   ============================================================ */
.bnk-geoline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  margin: 0 0 var(--bji-space-3); font-size: var(--bji-text-base); color: var(--bji-text);
}
.bnk-geoline strong { color: var(--bji-text); }
.bnk-country {
  font: inherit; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-bold); cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .22rem .7rem; border-radius: var(--bji-radius-pill);
  border: 1px solid var(--bji-gray-300); background: var(--bji-surface); color: var(--bji-gray-800);
}
.bnk-country:hover { border-color: var(--bji-blue-400); color: var(--bji-blue-700); }
/* dashed = we guessed from the connection; solid = the reader chose. Lets
   the copy stay honest without claiming detection as a fact. */
.bnk-country.guessed { border-style: dashed; }
.bnk-country .code { color: var(--bji-gray-500); font-weight: var(--bji-weight-semibold); }

/* country picker: a popover anchored to the chip, not an inline panel.
   An inline panel reflowed the page and pushed the toplist down on every
   open (round 3 review). */
.bnk-pickerwrap { position: relative; display: inline-block; }
.bnk-picker {
  position: absolute; z-index: 60; top: calc(100% + .4rem); left: 0; width: min(30rem, calc(100vw - 2 * var(--bji-gutter)));
  border: 1px solid var(--bji-gray-200); border-radius: 12px; padding: 1rem 1.1rem;
  background: var(--bji-surface); box-shadow: var(--bji-shadow-lg);
}
.bnk-picker[hidden] { display: none; }
.bnk-picker input[type="search"] {
  font: inherit; font-size: var(--bji-text-base); width: 100%; padding: .5rem .85rem;
  border: 1px solid var(--bji-gray-200); border-radius: 8px; margin-bottom: .75rem;
}
.bnk-countries { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-y: auto; }
.bnk-countries button {
  font: inherit; cursor: pointer; display: inline-flex; align-items: baseline; gap: .4rem;
  font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); color: var(--bji-gray-800);
  border: 1px solid var(--bji-gray-200); border-radius: var(--bji-radius-pill); padding: .28rem .75rem;
  background: var(--bji-surface);
}
.bnk-countries button:hover { border-color: var(--bji-blue-400); }
.bnk-countries button.on { background: var(--bji-navy-900); border-color: var(--bji-navy-900); color: #fff; }
.bnk-countries .n { color: var(--bji-gray-500); font-weight: var(--bji-weight-bold); font-size: var(--bji-text-xs); }
.bnk-countries button.on .n { color: rgb(255 255 255 / .7); }
/* zeroes render explicitly rather than being hidden: a German reader
   finding out here beats finding out after scrolling */
.bnk-countries button.none { color: var(--bji-gray-400); border-style: dashed; }
.bnk-countries button.none .n { color: var(--bji-gray-400); }
.bnk-countries li[hidden] { display: none; }

/* ---- refinement rail ---- */
.bnk-rail {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .85rem 0; margin: 0 0 var(--bji-space-2);
  border-top: 1px solid var(--bji-gray-200); border-bottom: 1px solid var(--bji-gray-200);
}
.bnk-rail[hidden] { display: none; }
.bnk-facet {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .85rem; border-radius: var(--bji-radius-pill);
  font: inherit; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold);
  border: 1px solid var(--bji-gray-200); background: var(--bji-surface);
  color: var(--bji-gray-800); cursor: pointer; white-space: nowrap;
}
.bnk-facet:hover { border-color: var(--bji-blue-400); color: var(--bji-blue-700); }
.bnk-facet.on { background: var(--bji-navy-900); border-color: var(--bji-navy-900); color: #fff; }
/* every facet carries its result count so nobody can click into an empty
   set, which is exactly the failure the legacy country selector produces */
.bnk-facet .n { font-weight: var(--bji-weight-bold); opacity: .65; font-size: var(--bji-text-xs); }
.bnk-facet.on .n { opacity: .75; }
.bnk-rail .spacer { margin-left: auto; }
.bnk-rail select {
  font: inherit; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); color: var(--bji-gray-800);
  padding: .4rem .7rem; border: 1px solid var(--bji-gray-200); border-radius: var(--bji-radius-pill);
  background: var(--bji-surface);
}
/* Hide filtered-out toplist cards. Must target the data-bnk-casino ATTRIBUTE
   (what the rows actually carry) and beat `.usst-casino { display: grid }`,
   which otherwise wins over the UA [hidden] rule and left every rail filter
   silently doing nothing. The old `.bnk-casino[hidden]` matched no element:
   the rows are class="usst-casino" with a data-bnk-casino attribute, never a
   bnk-casino class. Attribute+attribute specificity (0,2,0) beats the class
   display rule (0,1,0). Affects every page with the rail: banking singles,
   the country hubs and the /online-casinos/ cluster root. */
[data-bnk-casino][hidden] { display: none; }

/* ============================================================
   The per-card method line. Rounds 1-3 rendered "Amex in ->
   Bitcoin out", which named ONE route as though it were the only
   one (Bovada pays out six ways, Wild Casino twenty-one) and only
   decoded if you had read the hero. Every chip now states its own
   meaning, fastest is LABELLED as fastest, and the rest is counted.
   ============================================================ */
.usst-det .bnk-verdict {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: var(--bji-space-3) 0 0; padding-top: .75rem;
  border-top: 1px solid var(--bji-gray-100); font-size: var(--bji-text-sm);
}
.bnk-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .6rem; border-radius: var(--bji-radius-pill); font-weight: var(--bji-weight-semibold);
  border: 1px solid var(--bji-gray-200); background: var(--bji-surface); color: var(--bji-gray-800);
  white-space: nowrap;
}
.bnk-chip--in  { border-color: var(--bji-green-500); background: var(--bji-green-100); color: var(--bji-green-700); }
.bnk-chip--out { border-color: var(--bji-blue-400); background: var(--bji-blue-050); color: var(--bji-blue-700); }
.bnk-chip--no  { border-color: var(--bji-red-500); background: var(--bji-red-100); color: var(--bji-red-700); }
.bnk-chip--warn{ border-color: var(--bji-amber-500); background: var(--bji-amber-100); color: var(--bji-amber-700); }

.bnk-payline {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: .45rem 0 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted);
}
.bnk-payline .lbl { font-weight: var(--bji-weight-bold); color: var(--bji-gray-800); }
.bnk-payline .more { color: var(--bji-blue-600); font-weight: var(--bji-weight-semibold); }
.bnk-payline .muted { color: var(--bji-gray-500); }
.usst-det .usst-eligible { margin-top: var(--bji-space-2); }

/* ============================================================
   Ineligible casinos as a table, not cards. A card is a pitch, a
   row is a fact: these cannot be joined from here, so they get no
   stage, no bonus figure and no affiliate CTA. Replaces the legacy
   zero-result fallback that printed a warning and then listed them
   as if they were offers.
   ============================================================ */
.bnk-comparewrap { overflow-x: auto; border: 1px solid var(--bji-gray-200); border-radius: 12px; margin: var(--bji-space-4) 0; }
.bnk-compare { width: 100%; border-collapse: collapse; font-size: var(--bji-text-sm); min-width: 46rem; }
.bnk-compare thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bji-navy-900); color: #fff; text-align: left;
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; font-weight: var(--bji-weight-bold);
  padding: .65rem .85rem; white-space: nowrap;
}
.bnk-compare td { padding: .7rem .85rem; border-top: 1px solid var(--bji-gray-100); vertical-align: middle; }
.bnk-compare tbody tr:hover { background: var(--bji-blue-050); }
.bnk-compare .who { display: flex; align-items: center; gap: .6rem; min-width: 11rem; }
.bnk-compare .who img { width: 2.1rem; height: 2.1rem; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--bji-gray-100); }
.bnk-compare .who a { color: var(--bji-text); font-weight: var(--bji-weight-bold); text-decoration: none; }
.bnk-compare .num { font-weight: var(--bji-weight-bold); }
.bnk-compare .muted { color: var(--bji-gray-500); }

/* ---- method spec sheet ---- */
.bnk-spec {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  border: 1px solid var(--bji-gray-200); border-radius: 12px; overflow: hidden;
  background: var(--bji-surface); margin: var(--bji-space-4) 0;
}
.bnk-spec > div { padding: .85rem 1rem; border-right: 1px solid var(--bji-gray-100); border-bottom: 1px solid var(--bji-gray-100); }
.bnk-spec dt {
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: var(--bji-weight-bold); color: var(--bji-gray-500); margin: 0 0 .25rem;
}
.bnk-spec dd { margin: 0; font-size: var(--bji-text-base); font-weight: var(--bji-weight-bold); color: var(--bji-text); line-height: 1.35; }
.bnk-spec dd small { display: block; font-size: var(--bji-text-xs); font-weight: var(--bji-weight-regular); color: var(--bji-text-muted); }
.bnk-spec .yes dd { color: var(--bji-green-700); }
.bnk-spec .no dd { color: var(--bji-red-700); }
.bnk-spec .yes dd::before { content: "\2713\00a0"; }
.bnk-spec .no dd::before { content: "\2715\00a0"; }

/* ---- cash-out pairing table ---- */
.bnk-payout { border: 1px solid var(--bji-gray-200); border-radius: 12px; overflow: hidden; margin: var(--bji-space-4) 0; }
.bnk-payout table { width: 100%; border-collapse: collapse; font-size: var(--bji-text-base); }
.bnk-payout th, .bnk-payout td { text-align: left; padding: .7rem 1rem; border-top: 1px solid var(--bji-gray-100); }
.bnk-payout thead th { background: var(--bji-gray-050); border-top: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bji-gray-600); }
.bnk-payout td:first-child { font-weight: var(--bji-weight-bold); white-space: nowrap; }
.bnk-payout .fast { color: var(--bji-green-700); font-weight: var(--bji-weight-bold); }
.bnk-payout .slow { color: var(--bji-gray-600); }
.bnk-payout .cnt { color: var(--bji-gray-500); font-size: var(--bji-text-sm); white-space: nowrap; }

.bnk-trap {
  border-left: 4px solid var(--bji-amber-500); background: var(--bji-amber-100);
  border-radius: 0 10px 10px 0; padding: 1rem 1.25rem; margin: var(--bji-space-4) 0;
}
.bnk-trap h3 { margin: 0 0 .35rem; font-size: var(--bji-text-lg); }
.bnk-trap p { margin: .3rem 0; font-size: var(--bji-text-base); }

/* ---- zero state: never a dead end, never an empty list ---- */
.bnk-zero {
  border: 1px solid var(--bji-amber-500); background: var(--bji-amber-100);
  border-radius: 12px; padding: 1.15rem 1.35rem; margin: var(--bji-space-4) 0;
}
.bnk-zero h3 { margin: 0 0 .4rem; font-size: var(--bji-text-lg); }
.bnk-zero p { margin: .35rem 0; font-size: var(--bji-text-base); }
.bnk-zero .paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .9rem; margin-top: 1rem; }
.bnk-zero .path { background: var(--bji-surface); border: 1px solid var(--bji-gray-200); border-radius: 10px; padding: .85rem 1rem; }
.bnk-zero .path h4 { margin: 0 0 .4rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bji-gray-600); }
.bnk-zero .path ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; }
.bnk-zero .path a {
  display: inline-block; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); text-decoration: none;
  color: var(--bji-gray-800); border: 1px solid var(--bji-gray-200); border-radius: var(--bji-radius-pill); padding: .2rem .65rem;
}
.bnk-zero .path a:hover { border-color: var(--bji-blue-400); color: var(--bji-blue-600); }
.bnk-zero .change { margin-top: 1rem; }

/* ---- related methods lattice ---- */
.bnk-related { display: flex; flex-wrap: wrap; gap: .6rem; margin: var(--bji-space-3) 0 0; padding: 0; list-style: none; }
.bnk-related a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border: 1px solid var(--bji-gray-200);
  border-radius: var(--bji-radius-pill); text-decoration: none;
  color: var(--bji-gray-800); font-weight: var(--bji-weight-semibold); font-size: var(--bji-text-sm);
}
.bnk-related a:hover { border-color: var(--bji-blue-400); color: var(--bji-blue-600); }
.bnk-related .n { color: var(--bji-gray-500); font-weight: var(--bji-weight-semibold); font-size: var(--bji-text-xs); }

/* ---- the retained article ---- */
.bnk-article { margin-top: var(--bji-section-gap); }

@media (max-width: 860px) {
  /* Rotate the GLYPH, never the separator box: rotating the box leaves its
     background painted as a vertical band across the whole component. */
  .bnk-route { grid-template-columns: minmax(0, 1fr); }
  .bnk-routesep { padding: .3rem; font-size: 1.5rem; }
  .bnk-routesep span { display: inline-block; transform: rotate(90deg); }
}
@media (max-width: 720px) {
  .bnk-hero h1 { font-size: var(--bji-text-2xl); }
  .bnk-rail .spacer { margin-left: 0; width: 100%; }
  .bnk-picker { position: fixed; inset: auto 0 0 0; width: auto; border-radius: 14px 14px 0 0; max-height: 70vh; overflow-y: auto; }
}

/* ---- fact-check line under the shipped byline (as the US state page) ---- */
.bnk-factcheck { margin: var(--bji-space-2) 0 0; font-size: var(--bji-text-sm); color: #7fe0a8; font-weight: var(--bji-weight-semibold); }

/* ---- country picker: flags + the way back to auto-detection ---- */
.bnk-country .flag, .bnk-countries .flag { font-size: 1rem; line-height: 1; }
.bnk-pickerfoot { margin: .75rem 0 0; padding-top: .6rem; border-top: 1px solid var(--bji-gray-100); }
.bnk-pickerfoot button {
  font: inherit; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold);
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--bji-blue-600);
}
.bnk-pickerfoot button:hover { text-decoration: underline; }

/* ---- More filters panel ---- */
.bnk-morepanel {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .85rem 0 0; margin: 0 0 var(--bji-space-3);
}
.bnk-morepanel[hidden] { display: none; }


/* The zero box is a one-line statement now that the explanatory paragraph
   is gone (the heading says it), so it must not keep paragraph spacing. */
.bnk-zero h3:only-child { margin-bottom: 0; }
.bnk-zero:has(h3:only-child) { padding: .95rem 1.35rem; }

/* .usst-breakout exists to widen a toplist out of the 49rem ARTICLE column
   to 66rem. On this page every data block already sits in .cv2-container
   (72rem), so the breakout only narrowed the toplist by 32px against the
   tables and deks beside it. Neutralise it here rather than forking the
   card: the toplist keeps its vertical rhythm and loses the offset.
   NOTE the transform must go too, not just the width: a transformed
   ancestor traps position:fixed inside it (the .mpg-breakout lesson). */
.bnk-page .usst-breakout {
  position: static;
  left: auto;
  transform: none;
  width: auto;
}
/* "after approval" qualifier: the rail's settlement leg is not the casino's
   payout time, so it never reads at the same weight as a published figure. */
.bnk-outlist .t small { font-weight: var(--bji-weight-regular); color: rgb(255 255 255 / .5); }
.bnk-payout td small { color: var(--bji-gray-500); }

/* ---- More filters: grouped facets (the legacy families, rebuilt) ---- */
.bnk-morepanel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--bji-space-4) var(--bji-space-5);
  padding: var(--bji-space-4); margin: 0 0 var(--bji-space-4);
  border: 1px solid var(--bji-gray-200); border-radius: 12px; background: var(--bji-gray-050);
}
.bnk-fgroup h3 {
  margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: var(--bji-weight-bold); color: var(--bji-gray-600);
}
.bnk-fgroup input[type="search"] {
  font: inherit; font-size: var(--bji-text-sm); width: 100%; padding: .35rem .7rem;
  border: 1px solid var(--bji-gray-200); border-radius: 8px; margin-bottom: .5rem; background: var(--bji-surface);
}
.bnk-fgroup .chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.bnk-fgroup .bnk-facet { font-size: var(--bji-text-xs); padding: .28rem .65rem; }
.bnk-fgroup .bnk-facet[hidden] { display: none; }
.bnk-fmore {
  font: inherit; font-size: var(--bji-text-xs); font-weight: var(--bji-weight-semibold);
  background: none; border: 0; padding: .4rem 0 0; cursor: pointer; color: var(--bji-blue-600);
}
.bnk-fmore[hidden] { display: none; }
.bnk-fclear { grid-column: 1 / -1; margin: 0; }
.bnk-fclear button {
  font: inherit; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold);
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--bji-blue-600);
}
.bnk-facet.has-active { background: var(--bji-blue-050); border-color: var(--bji-blue-400); color: var(--bji-blue-700); }

/* ---- payout routes, named inline (owner call: completeness over a
   disclosure). The sentence lists every route, so it cannot be read as
   naming one exclusively, which is how the previous two versions failed. --- */
.bnk-routes-inline { display: inline; }
.bnk-routes-inline .r + .r::before { content: ", "; color: var(--bji-gray-500); }
.bnk-routes-inline .r[hidden] { display: none; }
/* No resting underline. Each link's rule stopped at the word boundary and
   left the following comma looking detached, so the list read as fragments
   rather than a sentence. Measured: the spans are contiguous, the gap was
   purely the underline terminus. Affordance moves to hover. */
.bnk-routes-inline .r a { color: inherit; text-decoration: none; }
.bnk-routes-inline .r a:hover { color: var(--bji-blue-700); text-decoration: underline; }
.bnk-routes-inline .r em { font-style: normal; color: var(--bji-blue-700); font-weight: var(--bji-weight-semibold); }
.bnk-rmore {
  margin-left: .3rem;
  font: inherit; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold);
  background: none; border: 0; padding: 0 0 0 .3rem; cursor: pointer; color: var(--bji-blue-600);
}
.bnk-rmore[hidden] { display: none; }
.bnk-approval { margin: .25rem 0 0; font-size: var(--bji-text-sm); color: var(--bji-gray-500); }
/* green counterpart to .flag-no: a both-ways method closes its own loop */
.bnk-lane .flag-yes {
  display: inline-flex; align-items: center; gap: .4rem; margin: .9rem 0 0;
  padding: .3rem .75rem; border-radius: var(--bji-radius-pill);
  font-size: var(--bji-text-sm); font-weight: var(--bji-weight-bold);
  background: rgb(23 133 70 / .22); border: 1px solid rgb(127 224 168 / .45); color: #7fe0a8;
}

/* ============================================================
   .bnk-flow: the peer-to-peer trade diagram.
   Built as HTML rather than inline SVG so the text is real text
   (selectable, translatable by TranslatePress, readable by a
   screen reader) and so it reflows at 375px instead of shrinking
   to nothing. Three stages, two actors; the mechanic is identical
   at every casino that carries MatchPay, so one diagram serves
   the whole page and never goes stale when a cashier is redesigned.
   ============================================================ */
.bnk-flow { margin: var(--bji-space-4) 0; }
.bnk-flow-stage {
  border: 1px solid var(--bji-gray-200); border-radius: 12px;
  background: var(--bji-surface); padding: 1rem 1.15rem;
}
.bnk-flow-stage + .bnk-flow-link { margin: 0; }
.bnk-flow-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: .9rem; align-items: stretch; }
.bnk-flow-side { min-width: 0; }
.bnk-flow-side .who {
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: var(--bji-weight-bold); margin: 0 0 .2rem;
}
.bnk-flow-side--you .who { color: var(--bji-green-700); }
.bnk-flow-side--them .who { color: var(--bji-blue-700); }
.bnk-flow-side p { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text); }
.bnk-flow-mid {
  display: flex; align-items: center; justify-content: center;
  color: var(--bji-gray-400); font-size: 1.25rem; font-weight: var(--bji-weight-bold);
}
/* the connector between stages carries the label, so the diagram reads
   as a sequence rather than three unrelated boxes */
/* NOT a flex container. Flex made the <b> and the trailing text separate
   items, so at 375px they wrapped into two ragged columns instead of one
   sentence. Same fault as .bnk-geo .you had. The rule is a border, not a
   pseudo-element flex child. */
.bnk-flow-link {
  margin: 0 0 0 1.5rem; padding: .55rem 0 .55rem 1rem;
  border-left: 2px solid var(--bji-gray-200);
  font-size: var(--bji-text-sm); color: var(--bji-text-muted);
}
.bnk-flow-link b { color: var(--bji-gray-800); font-weight: var(--bji-weight-semibold); }
.bnk-flow-note { margin: .6rem 0 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }

@media (max-width: 560px) {
  /* stack the two sides; the arrow becomes a downward step marker */
  .bnk-flow-sides { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .bnk-flow-mid { justify-content: flex-start; transform: rotate(90deg); width: 1.5rem; }
}

/* ============================================================
   ARTICLE VOCABULARY (the v2 replacement for the legacy classes)

   The 319 banking articles were authored against the v1 stack. Its
   band/column/FAQ classes ARE styled in casino-v2.css, but every rule
   is scoped to .cv2-review-body, so none of them reach an article
   rendered in .av2-prose. Rather than widen those legacy selectors,
   the articles are transformed to the classes below
   (scripts/transform_banking_articles.py) so the legacy vocabulary
   leaves the corpus for good.
   ============================================================ */

/* ---- .bnk-band: the alternating section band -------------------
   Replaces div.full-width-section.gray-container > div.container.
   Full-bleed tint, reading measure preserved: the negative margin
   pushes the tint to the viewport edge, the matching padding pulls
   the text back onto the same measure as the un-banded prose around
   it, so the column never shifts. */
.av2-prose .bnk-band {
  background: var(--bji-surface-sunken);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  margin-block: var(--bji-space-6);
  padding-block: var(--bji-space-5) var(--bji-space-6);
}
/* Consecutive bands read as one block, so drop the doubled gap. */
.av2-prose .bnk-band + .bnk-band { margin-top: calc(var(--bji-space-6) * -1); }
.av2-prose .bnk-band > :first-child { margin-top: 0; }
.av2-prose .bnk-band > :last-child { margin-bottom: 0; }

/* ---- .bnk-row: side-by-side cards ------------------------------
   Replaces div.wpg-inner-row > div.wpg-col. auto-fit rather than a
   fixed 1fr 1fr: these hold 2 or 3 cards depending on the article,
   and they collapse on their own at narrow widths. */
.av2-prose .bnk-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--bji-space-4);
  margin-block: var(--bji-space-4);
}
.av2-prose .bnk-row > * { min-width: 0; margin: 0; }

/* ---- stat strip ------------------------------------------------
   Kept rather than transformed away: a labelled figure is real
   information, and "numbers carry labels" is the house rule. */
.av2-prose .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--bji-space-3);
  margin-block: var(--bji-space-4);
}
.av2-prose .stat-box {
  display: grid;
  gap: var(--bji-space-1);
  padding: var(--bji-space-4);
  background: var(--bji-surface-sunken);
  border-radius: var(--bji-radius-md);
  text-align: center;
}
.av2-prose .stat-value { font-size: var(--bji-text-lg); font-weight: var(--bji-weight-bold); color: var(--bji-navy-900); }
.av2-prose .stat-label { font-size: var(--bji-text-xs); color: var(--bji-text-muted); }

/* ---- inline badges + status words ------------------------------ */
.av2-prose .badge {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: var(--bji-radius-pill);
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  background: var(--bji-gray-100);
  color: var(--bji-gray-800);
}
.av2-prose .badge--green { background: var(--bji-green-100); color: var(--bji-green-700); }
.av2-prose .badge--red { background: var(--bji-red-100); color: var(--bji-red-700); }
.av2-prose .badge--blue { background: var(--bji-blue-100); color: var(--bji-blue-700); }
.av2-prose .badge--orange { background: var(--bji-amber-100); color: var(--bji-amber-700); }
.av2-prose .status-varies { color: var(--bji-text-muted); font-weight: var(--bji-weight-semibold); }

/* ============================================================
   THE /banking/ HUB
   Hero, geoline, picker and section headings are the singles'
   components, reused as-is. Only the method grid and the A-Z
   index are new, because nothing else on the site lists 500+
   links and needs them to stay scannable.
   ============================================================ */

.bnk-hub .bnk-main { padding-block: var(--bji-space-6) var(--bji-space-8); }
.bnk-hub .bnk-checked {
  margin-top: var(--bji-space-7);
  font-size: var(--bji-text-sm);
  color: var(--bji-text-muted);
}
.bnk-hub .bnk-more { margin-top: var(--bji-space-4); font-size: var(--bji-text-sm); }

/* ---- method cards --------------------------------------------
   auto-fit rather than a fixed column count: these groups hold
   anywhere from 4 to 12 items and a fixed grid left orphan rows. */
.bnk-mgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--bji-space-3);
  list-style: none;
  margin: var(--bji-space-4) 0 0;
  padding: 0;
}
.bnk-mcard > a {
  display: flex;
  align-items: center;
  gap: var(--bji-space-3);
  height: 100%;
  padding: var(--bji-space-3) var(--bji-space-4);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  background: var(--bji-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--bji-duration) var(--bji-ease),
              box-shadow var(--bji-duration) var(--bji-ease);
}
.bnk-mcard > a:hover,
.bnk-mcard > a:focus-visible {
  border-color: var(--bji-brand);
  box-shadow: var(--bji-shadow-sm);
}
.bnk-mcard .mk { flex: 0 0 auto; display: grid; place-items: center; }
.bnk-mcard .tx { min-width: 0; display: grid; gap: 2px; }
.bnk-mcard .n {
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-navy-900);
  overflow-wrap: anywhere;
}
.bnk-mcard .f { font-size: var(--bji-text-xs); color: var(--bji-text-muted); }

/* ---- A-Z index -----------------------------------------------
   500 links have to stay scannable, so they are columns of plain
   text rather than cards. Cards at this count read as a wall. */
.bnk-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 2px var(--bji-space-4);
  list-style: none;
  margin: var(--bji-space-4) 0 0;
  padding: 0;
}
.bnk-index > li > a {
  display: flex;
  align-items: baseline;
  gap: var(--bji-space-2);
  padding: 5px 0;
  font-size: var(--bji-text-sm);
  text-decoration: none;
  color: var(--bji-text);
}
.bnk-index > li > a:hover .n,
.bnk-index > li > a:focus-visible .n { text-decoration: underline; color: var(--bji-brand); }
.bnk-index .n { overflow-wrap: anywhere; }

.bnk-tag {
  flex: 0 0 auto;
  padding: 0 .4rem;
  border-radius: var(--bji-radius-pill);
  font-size: 11px;
  font-weight: var(--bji-weight-semibold);
  white-space: nowrap;
}
.bnk-tag--dep { background: var(--bji-amber-100); color: var(--bji-amber-700); }

/* ---- filter --------------------------------------------------
   [hidden] loses to display:flex, so the attribute is honoured
   explicitly. Same trap as the refinement rail on the singles. */
.bnk-indexfilter[hidden],
.bnk-indexempty[hidden] { display: none; }
.bnk-indexfilter {
  display: flex;
  align-items: center;
  gap: var(--bji-space-3);
  margin-top: var(--bji-space-4);
}
.bnk-indexfilter input {
  flex: 1 1 18rem;
  max-width: 24rem;
  padding: var(--bji-space-2) var(--bji-space-3);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  font: inherit;
  font-size: var(--bji-text-sm);
  background: var(--bji-surface);
  color: var(--bji-text);
}
.bnk-indexfilter input:focus-visible { outline: 2px solid var(--bji-brand); outline-offset: 1px; }
.bnk-indexcount { font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.bnk-indexempty { margin-top: var(--bji-space-4); color: var(--bji-text-muted); }

/* Some pages put the geoline in the navy hero (the banking hub, the
   /online-casinos/ cluster hub), whereas the singles put it on a white
   section. --bji-text on navy is unreadable, so the hero scope inverts it.
   Scoped to .bnk-hero rather than to one page class: the condition that
   matters is "sitting on the navy hero", not which template drew it. This
   was originally .bnk-hub-scoped, and the /online-casinos/ hub then rendered
   dark-on-navy text that was invisible until the selector was widened. */
.bnk-hero .bnk-geoline { color: rgb(255 255 255 / 0.82); }
.bnk-hero .bnk-geoline strong { color: #fff; }

/* Keep the grid's left edge straight when a method has no logo. An empty
   spacer, not a placeholder tile: the rhythm is preserved without inventing a
   mark that carries no information. */
.bnk-mcard .mk--empty {
  flex: none;
  width: 3.1rem;
  height: 3.1rem;
}