/* ============================================================================
   bangladeshibank.com
   Identity: Delta. Data language: Ledger.

   Delta is the brand: deep water green, silt ground, brass for pointing. Inside
   anything made of digits it gives way to Ledger's discipline, which is tabular
   figures, hairline rules and one accent reserved for the check digit.

   Every colour is a token declared in the bare :root. The dark values are
   redefined twice, once for prefers-color-scheme and once for an explicit
   data-theme, so the un-stamped default renders correctly either way.
   No build step: the server has no Node and a reference site does not need one.
   ============================================================================ */

:root{
  color-scheme: light;

  /* --- Delta, light: silt, paper, deep water ------------------------------ */
  --ground:      #e9ebe5;
  --surface:     #f8f9f5;
  --surface-2:   #eef0e9;
  --sunk:        #e0e4da;

  --ink:         #16211d;
  --ink-2:       #46534d;
  --ink-3:       #5f6d67;
  --ink-4:       #7d8a84;

  --rule:        #ccd2c8;
  --rule-2:      #b4bdb2;

  --brand:       #12564c;
  --brand-2:     #0d4239;
  --brand-soft:  #dae8e2;
  --brand-ink:   #f4f7f3;

  --accent:      #96681f;          /* brass. Pointing, never decoration. */
  --accent-soft: #f3e9d7;

  --ok:          #12564c;
  --warn:        #8a6212;
  --bad:         #9c3a26;          /* the check digit, and only that */

  --shadow-1: 0 1px 2px rgba(22,33,29,.05), 0 1px 3px rgba(22,33,29,.04);
  --shadow-2: 0 2px 6px rgba(22,33,29,.06), 0 10px 26px rgba(22,33,29,.06);

  /* --- type -------------------------------------------------------------- */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bn-display: "Tiro Bangla", "Noto Serif Bengali", serif;
  --bn-sans:    "Anek Bangla", "Noto Sans Bengali", sans-serif;

  --wrap: 1140px;
  --r-sm: 4px;
  --r:    7px;
  --r-lg: 12px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:      #0d1412;
    --surface:     #141d1a;
    --surface-2:   #1a2420;
    --sunk:        #202b26;
    --ink:         #e8ede9;
    --ink-2:       #b0bdb7;
    --ink-3:       #93a09a;
    --ink-4:       #75837c;
    --rule:        #243029;
    --rule-2:      #324037;
    --brand:       #57c2a6;
    --brand-2:     #74d3ba;
    --brand-soft:  #14302a;
    --brand-ink:   #07130f;
    --accent:      #d3a05a;
    --accent-soft: #2c2416;
    --ok:          #57c2a6;
    --warn:        #d9a441;
    --bad:         #e0765c;
    --shadow-1: 0 1px 2px rgba(0,0,0,.42);
    --shadow-2: 0 2px 8px rgba(0,0,0,.46), 0 14px 40px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:      #0d1412;
  --surface:     #141d1a;
  --surface-2:   #1a2420;
  --sunk:        #202b26;
  --ink:         #e8ede9;
  --ink-2:       #b0bdb7;
  --ink-3:       #93a09a;
  --ink-4:       #75837c;
  --rule:        #243029;
  --rule-2:      #324037;
  --brand:       #57c2a6;
  --brand-2:     #74d3ba;
  --brand-soft:  #14302a;
  --brand-ink:   #07130f;
  --accent:      #d3a05a;
  --accent-soft: #2c2416;
  --ok:          #57c2a6;
  --warn:        #d9a441;
  --bad:         #e0765c;
  --shadow-1: 0 1px 2px rgba(0,0,0,.42);
  --shadow-2: 0 2px 8px rgba(0,0,0,.46), 0 14px 40px rgba(0,0,0,.5);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[lang="bn"] body{ font-family:var(--bn-sans); line-height:1.72 }

a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline; text-underline-offset:2px }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:2px }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important } }

h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.2; color:var(--ink) }
h1{
  font:400 clamp(1.9rem,1.2rem+2.4vw,2.85rem)/1.12 var(--display);
  letter-spacing:-.018em; text-wrap:balance;
}
html[lang="bn"] h1{ font-family:var(--bn-display); line-height:1.32 }
h2{ font:500 clamp(1.24rem,1.05rem+.8vw,1.6rem)/1.22 var(--display); letter-spacing:-.012em }
html[lang="bn"] h2{ font-family:var(--bn-display) }
h3{ font:600 1.06rem/1.35 var(--sans); letter-spacing:-.008em }
p{ margin:0 0 1em }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px }
.wrap--narrow{ max-width:800px }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ---------------------------------------------------------------- header -- */

.skip{ position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brand); color:var(--brand-ink); padding:10px 16px;
  border-radius:0 0 var(--r-sm) 0; font-weight:600 }
.skip:focus{ left:0; text-decoration:none }

.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule);
}
.site-head__in{ display:flex; align-items:center; gap:14px; height:64px }

.brand{ display:flex; align-items:center; gap:10px; color:var(--brand); flex:none }
.brand:hover{ text-decoration:none }
.brand__mark{ width:30px; height:30px; flex:none; display:block }
.brand__word{ font:400 1.14rem/1 var(--display); letter-spacing:-.022em;
  white-space:nowrap; color:var(--ink) }
.brand__word b{ font-weight:500 }
.brand__word span{ color:var(--ink-3) }
html[lang="bn"] .brand__word{ font-family:var(--bn-display) }

/* Search on every page. Someone lands on one branch and immediately wants a
   different number; making them go home first is the main navigation failure
   a reference site can have. */
.head-search{ position:relative; flex:1 1 auto; max-width:340px; min-width:0 }
.head-search input{
  width:100%; height:38px; padding:0 12px 0 36px;
  font:400 .92rem/1 var(--sans); color:var(--ink);
  background:var(--surface); border:1px solid var(--rule-2);
  border-radius:var(--r-sm); outline:none;
}
.head-search input::placeholder{ color:var(--ink-4) }
.head-search input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft) }
.head-search__icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--ink-4); pointer-events:none }

.nav{ display:flex; gap:2px; margin-left:auto; align-items:center; flex:none }
.nav a{
  color:var(--ink-2); padding:9px 11px; border-radius:var(--r-sm);
  font-size:.92rem; font-weight:500; white-space:nowrap;
}
.nav a:hover{ background:var(--surface-2); color:var(--ink); text-decoration:none }
.nav a[aria-current]{ color:var(--brand); background:var(--brand-soft) }
.nav__tools{ display:flex; align-items:center; gap:6px; margin-left:8px;
  padding-left:10px; border-left:1px solid var(--rule) }

.theme-toggle,.lang-switch{
  height:36px; flex:none; border:1px solid var(--rule-2); background:var(--surface);
  color:var(--ink-2); border-radius:var(--r-sm); cursor:pointer;
  display:inline-grid; place-items:center; padding:0;
}
.theme-toggle{ width:36px }
.lang-switch{ padding:0 12px; font:600 .82rem/1 var(--sans) }
.theme-toggle:hover,.lang-switch:hover{ border-color:var(--brand); color:var(--brand);
  background:var(--brand-soft); text-decoration:none }
.theme-toggle svg{ width:16px; height:16px }
.theme-toggle .i-sun{ display:none }
:root[data-theme="dark"] .theme-toggle .i-sun{ display:block }
:root[data-theme="dark"] .theme-toggle .i-moon{ display:none }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{ display:block }
  :root:not([data-theme="light"]) .theme-toggle .i-moon{ display:none }
}
/* dark is on because the device asked, not because the reader did */
.theme-toggle.is-system{
  border-color:var(--accent); color:var(--accent); background:var(--accent-soft);
}

.theme-note{ border-top:1px solid var(--rule); background:var(--accent-soft) }
.theme-note__in{ display:flex; align-items:center; gap:12px; padding:9px 20px;
  font-size:.88rem; color:var(--ink-2); flex-wrap:wrap }
.theme-note__go{
  border:1px solid var(--accent); background:transparent; color:var(--accent);
  font:600 .84rem/1 var(--sans); padding:6px 12px; border-radius:var(--r-sm); cursor:pointer;
}
.theme-note__go:hover{ background:var(--accent); color:var(--ground) }
.theme-note__x{ margin-left:auto; border:0; background:none; color:var(--ink-3);
  font-size:1.25rem; line-height:1; cursor:pointer; padding:2px 6px; border-radius:4px }
.theme-note__x:hover{ color:var(--ink); background:var(--surface-2) }

.nav-toggle{ display:none; width:38px; height:36px; flex:none;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink-2);
  border-radius:var(--r-sm); cursor:pointer }

@media (max-width:1000px){
  .site-head__in{ flex-wrap:wrap; height:auto; padding-top:11px; padding-bottom:11px; gap:10px }
  .head-search{ order:3; flex:1 1 100%; max-width:none }
  .nav-toggle{ display:grid; place-items:center; margin-left:auto }
  .nav{
    order:4; flex:1 1 100%; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border:1px solid var(--rule);
    border-radius:var(--r); padding:6px;
  }
  .nav:not(.is-open){ display:none }
  .nav a{ padding:12px }
  .nav__tools{ margin:6px 0 0; padding:8px 0 0; border-left:0; border-top:1px solid var(--rule) }
  .theme-toggle,.lang-switch{ flex:1 }
}

/* ---------------------------------------------------------------- search -- */

.searchbar{ position:relative }
.searchbar input{
  width:100%; font:400 1.05rem/1.4 var(--sans); color:var(--ink);
  background:var(--surface); border:1px solid var(--rule-2);
  border-radius:var(--r); padding:15px 116px 15px 46px;
  box-shadow:var(--shadow-1); outline:none;
}
.searchbar input::placeholder{ color:var(--ink-4) }
.searchbar input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft) }
.searchbar__icon{ position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--ink-4); pointer-events:none }
.searchbar__go{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:var(--brand); color:var(--brand-ink);
  padding:10px 17px; border-radius:var(--r-sm); font:600 .9rem var(--sans); cursor:pointer;
}
.searchbar__go:hover{ background:var(--brand-2) }

/* ------------------------------------------------------------------ hero -- */

.hero{ padding:52px 0 26px; text-align:center }
.hero h1{ margin-bottom:.28em }
.hero__sub{ color:var(--ink-2); font-size:1.05rem; max-width:56ch; margin:0 auto 24px }
.hero .searchbar{ max-width:600px; margin:0 auto }
.hero__hints{ margin-top:13px; color:var(--ink-3); font-size:.88rem }
.hero__hints a{ color:var(--ink-2); border-bottom:1px solid var(--rule-2) }
.hero__hints a:hover{ color:var(--brand); border-color:var(--brand); text-decoration:none }

/* ----------------------------------------------------------------- stats -- */

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:var(--r);
  overflow:hidden; margin:30px 0 6px }
.stat{ background:var(--surface); padding:18px 14px; text-align:center }
.stat__n{ font:500 clamp(1.45rem,1.1rem+1.3vw,1.95rem)/1 var(--mono);
  color:var(--brand); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
html[lang="bn"] .stat__n{ font-family:var(--bn-sans); letter-spacing:0 }
.stat__l{ color:var(--ink-3); font-size:.8rem; margin-top:7px;
  text-transform:uppercase; letter-spacing:.07em; font-weight:500 }
html[lang="bn"] .stat__l{ text-transform:none; letter-spacing:0 }
@media (max-width:640px){ .stats{ grid-template-columns:repeat(2,1fr) } }

/* -------------------------------------------------------------- sections -- */

.section{ padding:38px 0 }
.section__head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:16px }
.section__head h2{ margin:0 }
.section__more{ font-size:.9rem; font-weight:500; white-space:nowrap }
.section__lead{ color:var(--ink-2); margin:-6px 0 18px; max-width:66ch }

/* ----------------------------------------------------------------- cards -- */

.grid{ display:grid; gap:10px }
.grid--2{ grid-template-columns:repeat(2,1fr) }
.grid--3{ grid-template-columns:repeat(3,1fr) }
.grid--4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:960px){ .grid--4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:780px){ .grid--3{ grid-template-columns:repeat(2,1fr) } .grid--2{ grid-template-columns:1fr } }
@media (max-width:520px){ .grid--3,.grid--4{ grid-template-columns:1fr } }

.card{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  padding:16px; display:block; color:inherit;
  transition:border-color .14s, box-shadow .14s;
}
a.card:hover{ text-decoration:none; border-color:var(--brand); box-shadow:var(--shadow-2) }
.card__title{ font-weight:600; color:var(--ink); margin-bottom:3px; line-height:1.35 }
.card__meta{ color:var(--ink-3); font-size:.87rem }
.card__row{ display:flex; align-items:center; gap:12px }

.bank-logo{
  width:44px; height:44px; flex:none; border-radius:var(--r-sm);
  background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font:600 .74rem/1 var(--mono); letter-spacing:-.01em;
}
/* A bank's own logo. Nearly all of them are drawn for a white ground, so the
   tile stays white in both themes rather than tinting somebody's trademark. */
.bank-logo--img{
  object-fit:contain; background:#fff; padding:5px;
  border:1px solid var(--rule); display:block;
}
.bank-logo--lg{ width:64px; height:64px; border-radius:var(--r); font-size:.92rem }
.bank-logo--lg.bank-logo--img{ padding:8px }

/* ------------------------------------------------------------ pills/chips -- */

.pill{ display:inline-block; padding:4px 10px; border-radius:99px;
  font-size:.76rem; font-weight:600; letter-spacing:.02em;
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--rule) }
.pill--brand{ background:var(--brand-soft); color:var(--brand); border-color:transparent }
.pill--accent{ background:var(--accent-soft); color:var(--accent); border-color:transparent }

.chips{ display:flex; flex-wrap:wrap; gap:6px }
.chip{ padding:7px 12px; border-radius:var(--r-sm); background:var(--surface);
  border:1px solid var(--rule); color:var(--ink-2); font-size:.88rem; font-weight:500 }
.chip:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft);
  text-decoration:none }
.chip[aria-current]{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink) }
.chip small{ color:var(--ink-4); font-weight:400; font-family:var(--mono); font-size:.82em }
.chip:hover small,.chip[aria-current] small{ color:inherit; opacity:.8 }

/* ------------------------------------------------------------ page chrome -- */

.crumbs{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; color:var(--ink-4);
  font-size:.86rem; padding:18px 0 0 }
.crumbs a{ color:var(--ink-3) }
.crumbs a:hover{ color:var(--brand) }
.crumbs span[aria-hidden]{ color:var(--rule-2) }

.page-head{ padding:14px 0 6px }
.page-head h1{ margin-bottom:.22em }
.page-head__sub{ color:var(--ink-2); font-size:1.01rem; max-width:68ch }
.page-head__facts{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px }

.checked{ display:inline-flex; align-items:center; gap:6px; margin:12px 0 0;
  color:var(--ink-3); font-size:.85rem }
.checked svg{ width:14px; height:14px; flex:none; color:var(--ink-4) }

/* ------------------------------------------------------- Ledger: the data -- */

.table-wrap{ overflow-x:auto; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--surface) }
table.data{ width:100%; border-collapse:collapse; font-size:.92rem }
table.data th,table.data td{ text-align:left; padding:10px 14px;
  border-bottom:1px solid var(--rule); vertical-align:top }
table.data thead th{
  background:var(--sunk); color:var(--ink-3); font-weight:600;
  font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap;
  position:sticky; top:0;
}
html[lang="bn"] table.data thead th{ text-transform:none; letter-spacing:0; font-size:.82rem }
table.data tbody tr:last-child td{ border-bottom:0 }
table.data tbody tr:hover td{ background:var(--surface-2) }
table.data td.num,table.data th.num{
  font-family:var(--mono); font-size:.87rem; white-space:nowrap;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}

.copy{ border:0; background:none; color:var(--ink-4); cursor:pointer; padding:2px 4px;
  border-radius:3px; font:inherit; line-height:1 }
.copy:hover{ color:var(--brand); background:var(--brand-soft) }
.copy svg{ width:13px; height:13px; vertical-align:-2px }

.rows{ border:1px solid var(--rule); border-radius:var(--r); background:var(--surface);
  overflow:hidden }
.row{ display:flex; gap:14px; align-items:flex-start; padding:14px 16px;
  border-bottom:1px solid var(--rule); color:inherit }
.row:last-child{ border-bottom:0 }
.row:hover{ background:var(--surface-2); text-decoration:none }
.row__main{ min-width:0; flex:1 }
.row__title{ font-weight:600; color:var(--ink); margin-bottom:2px; display:block }
.row__sub{ color:var(--ink-3); font-size:.88rem; display:block }
.row__side{ text-align:right; color:var(--ink-2); font-size:.84rem; white-space:nowrap;
  font-family:var(--mono); font-variant-numeric:tabular-nums }
@media (max-width:560px){ .row{ flex-wrap:wrap } .row__side{ text-align:left; width:100% } }

.kv{ display:grid; grid-template-columns:160px 1fr; border:1px solid var(--rule);
  border-radius:var(--r); overflow:hidden; background:var(--surface) }
.kv dt{ padding:11px 14px; background:var(--surface-2); color:var(--ink-3);
  font-size:.85rem; font-weight:600; border-bottom:1px solid var(--rule) }
.kv dd{ padding:11px 14px; margin:0; border-bottom:1px solid var(--rule); word-break:break-word }
.kv dt:last-of-type,.kv dd:last-of-type{ border-bottom:0 }
@media (max-width:560px){
  .kv{ grid-template-columns:1fr }
  .kv dt{ border-bottom:0; padding-bottom:2px; background:none }
  .kv dd{ padding-top:2px }
}

/* --------------------------------------------------------------- buttons -- */

.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 17px;
  border-radius:var(--r-sm); font-weight:600; font-size:.93rem; cursor:pointer;
  border:1px solid transparent; background:var(--brand); color:var(--brand-ink) }
.btn:hover{ background:var(--brand-2); text-decoration:none }
.btn--ghost{ background:var(--surface); border-color:var(--rule-2); color:var(--ink) }
.btn--ghost:hover{ background:var(--surface-2); border-color:var(--brand); color:var(--brand) }

.notice{ border:1px solid var(--rule); border-left:3px solid var(--accent);
  background:var(--surface); border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:14px 16px; color:var(--ink-2); font-size:.92rem }
.notice strong{ color:var(--ink) }

.empty{ text-align:center; padding:56px 20px; color:var(--ink-2) }
.empty h2{ color:var(--ink) }

/* ------------------------------------------------------------ pagination -- */

.pager{ display:flex; gap:5px; justify-content:center; align-items:center;
  margin:26px 0; flex-wrap:wrap }
.pager a,.pager span{ min-width:36px; height:36px; padding:0 11px;
  border-radius:var(--r-sm); display:inline-grid; place-items:center;
  font-size:.89rem; font-weight:500; font-variant-numeric:tabular-nums;
  border:1px solid var(--rule); background:var(--surface); color:var(--ink-2) }
.pager a:hover{ border-color:var(--brand); color:var(--brand); text-decoration:none }
.pager .is-active{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink) }
.pager .is-disabled{ opacity:.4 }

/* ---------------------------------------------------------------- footer -- */

.site-foot{ border-top:1px solid var(--rule); background:var(--surface);
  margin-top:56px; padding:40px 0 26px }
.foot-grid{ display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:28px }
@media (max-width:780px){ .foot-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:480px){ .foot-grid{ grid-template-columns:1fr } }
.foot-grid h4{ font-size:.74rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-4); margin-bottom:10px; font-weight:600 }
html[lang="bn"] .foot-grid h4{ text-transform:none; letter-spacing:0; font-size:.84rem }
.foot-grid ul{ list-style:none; margin:0; padding:0 }
.foot-grid li{ margin-bottom:7px }
.foot-grid a{ color:var(--ink-2); font-size:.91rem }
.foot-grid a:hover{ color:var(--brand) }
.foot-note{ margin-top:30px; padding-top:18px; border-top:1px solid var(--rule);
  color:var(--ink-3); font-size:.84rem; display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap }

/* ------------------------------------------------- Ledger: the answer -----
   The screen the whole product exists for. The number is the page: set large,
   monospaced and tabular, with its four parts tinted so the structure of a
   Bangladeshi routing number is visible without reading a word of explanation.
   -------------------------------------------------------------------------- */

.answer{
  border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--surface);
  padding:26px 24px 22px; margin:18px 0 0; box-shadow:var(--shadow-1);
}
.answer__tag{
  font:600 .72rem/1 var(--sans); letter-spacing:.11em; text-transform:uppercase;
  color:var(--brand); margin:0 0 14px;
}
html[lang="bn"] .answer__tag{ text-transform:none; letter-spacing:.02em; font-size:.86rem }

.answer__code{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0 10px; margin:0 0 6px;
  font:500 clamp(2rem,1.3rem+3.4vw,3.1rem)/1 var(--mono);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--ink);
}
html[lang="bn"] .answer__code{ font-family:var(--bn-sans); letter-spacing:0 }
.answer__code .seg{ display:inline }
.answer__code .seg--bank{ color:var(--ink) }
.answer__code .seg--district{ color:var(--brand) }
.answer__code .seg--branch{ color:var(--ink) }
.answer__code .seg--check{ color:var(--bad) }

.answer__copy{
  border:1px solid var(--rule-2); background:var(--surface-2); color:var(--ink-2);
  font:600 .74rem/1 var(--sans); letter-spacing:.04em; text-transform:uppercase;
  padding:7px 12px; border-radius:99px; cursor:pointer; align-self:center;
}
.answer__copy:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft) }
.answer__copy[data-done]{ border-color:var(--ok); color:var(--ok) }
html[lang="bn"] .answer__copy{ text-transform:none; letter-spacing:0; font-size:.82rem }

.answer__where{ margin:0; color:var(--ink-2); font-size:1.04rem }
.answer__where strong{ color:var(--ink) }

/* the four parts, named. Ledger's whole argument in one strip. */
.parts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:20px 0 0;
  background:var(--rule); border:1px solid var(--rule); border-radius:var(--r);
  overflow:hidden;
}
@media (max-width:520px){ .parts{ grid-template-columns:repeat(2,1fr) } }
.part{ background:var(--surface-2); padding:11px 12px }
.part b{ display:block; font:500 1.06rem/1.2 var(--mono); font-variant-numeric:tabular-nums;
  color:var(--ink); letter-spacing:-.01em }
html[lang="bn"] .part b{ font-family:var(--bn-sans) }
.part span{ display:block; font-size:.74rem; color:var(--ink-3); margin-top:3px;
  text-transform:uppercase; letter-spacing:.06em; font-weight:500 }
html[lang="bn"] .part span{ text-transform:none; letter-spacing:0; font-size:.82rem }
.part--check b{ color:var(--bad) }
.part--district b{ color:var(--brand) }