/* ============================================================================
   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) }

/* ==========================================================================
   Design pass, 2026-09-13. The owner's note was that the site read as plain.
   The answer is presence, not decoration: a real hero band, bank logos given
   room, counts shown as figures, and every card saying what is behind it.
   ========================================================================== */

.ic{ width:18px; height:18px; flex:none; display:inline-block; vertical-align:-3px }
.ic--sm{ width:15px; height:15px; vertical-align:-2px }

/* ---- logo tile: wide enough that a wordmark is legible ----------------- */
.bank-logo{ width:72px; height:46px }
.bank-logo--lg{ width:132px; height:80px }

/* ---- hero band ---------------------------------------------------------- */
.hero2{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--brand); color:#eef5f1;
  padding:54px 0 0; margin-bottom:8px;
}
/* The rhythm of a routing number as texture: groups of 3, 2, 3 and 1 bars.
   Faint, and only on the band. */
.hero2::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.09;
  background-image:
    repeating-linear-gradient(90deg,
      #fff 0 3px, transparent 3px 9px, #fff 9px 12px, transparent 12px 18px, #fff 18px 21px, transparent 21px 33px,
      #fff 33px 36px, transparent 36px 42px, #fff 42px 45px, transparent 45px 57px,
      #fff 57px 60px, transparent 60px 66px, #fff 66px 69px, transparent 69px 75px, #fff 75px 78px, transparent 78px 90px,
      #fff 90px 96px, transparent 96px 120px);
  mask-image:linear-gradient(180deg, transparent 0, #000 55%, #000 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 55%, #000 100%);
}
.hero2::after{
  content:""; position:absolute; z-index:-1; right:-160px; top:-220px;
  width:620px; height:620px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(211,160,90,.22), transparent 70%);
}
:root[data-theme="dark"] .hero2{ background:#0f2a24 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero2{ background:#0f2a24 } }

.hero2__in{ max-width:860px; text-align:center }
.hero2__kicker{
  display:inline-block; margin:0 0 18px; padding:6px 13px; border-radius:99px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  font:500 .8rem/1 var(--sans); letter-spacing:.04em; color:#d9ebe3;
}
.hero2__title{
  color:#fff; margin:0 0 14px;
  font:400 clamp(2.2rem,1.3rem + 3.6vw,3.9rem)/1.05 var(--display); letter-spacing:-.025em;
}
html[lang="bn"] .hero2__title{ font-family:var(--bn-display); line-height:1.25 }
.hero2__sub{ color:#c8ddd4; font-size:clamp(1rem,.95rem + .3vw,1.14rem); max-width:56ch; margin:0 auto 28px }

.hero2__search{
  position:relative; display:flex; align-items:center; gap:10px;
  max-width:680px; margin:0 auto; padding:7px 7px 7px 18px;
  background:#fff; border-radius:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 18px 40px rgba(4,24,18,.35);
}
.hero2__search .ic{ color:#7d8a84 }
.hero2__search input{
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  font:400 1.06rem/1.4 var(--sans); color:#16211d; padding:11px 0;
}
.hero2__search input::placeholder{ color:#8a958f }
.hero2__search button{
  flex:none; border:0; cursor:pointer; border-radius:9px; padding:13px 22px;
  background:var(--accent); color:#fff; font:600 .95rem var(--sans);
}
.hero2__search button:hover{ filter:brightness(1.08) }
.hero2__search:focus-within{ box-shadow:0 0 0 3px rgba(211,160,90,.55), 0 18px 40px rgba(4,24,18,.35) }

.hero2__quick{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:18px 0 40px }
.hero2__quick a{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:99px;
  color:#e8f2ed; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  font-size:.9rem; font-weight:500;
}
.hero2__quick a:hover{ background:rgba(255,255,255,.16); text-decoration:none }
.hero2__quick .ic{ width:16px; height:16px; opacity:.85 }

.hero2__stats{
  display:grid; grid-template-columns:repeat(4,1fr); margin:0;
  border-top:1px solid rgba(255,255,255,.16);
}
.hero2__stats > div{ padding:22px 10px 24px; text-align:center }
.hero2__stats > div + div{ border-left:1px solid rgba(255,255,255,.12) }
.hero2__stats dt{ font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:#b6cfc4; margin-top:8px; order:2 }
.hero2__stats dd{ margin:0; font:500 clamp(1.5rem,1.1rem + 1.5vw,2.25rem)/1 var(--mono); color:#fff; letter-spacing:-.03em }
.hero2__stats > div{ display:flex; flex-direction:column-reverse }
html[lang="bn"] .hero2__stats dt{ text-transform:none; letter-spacing:0; font-size:.86rem }
html[lang="bn"] .hero2__stats dd{ font-family:var(--bn-sans) }
@media (max-width:640px){
  .hero2{ padding-top:38px }
  .hero2__stats{ grid-template-columns:repeat(2,1fr) }
  .hero2__stats > div:nth-child(3){ border-left:0 }
  .hero2__stats > div:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.12) }
  .hero2__search{ padding-left:14px }
  .hero2__search button{ padding:12px 16px }
}

/* ---- sections ----------------------------------------------------------- */
.section--tint{ background:var(--surface-2); border-block:1px solid var(--rule) }
.section__head .section__lead{ margin:6px 0 0 }
.section__more{ display:inline-flex; align-items:center; gap:6px }

/* ---- bank cards --------------------------------------------------------- */
.bankgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
@media (max-width:960px){ .bankgrid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .bankgrid{ grid-template-columns:1fr } }
.bankcard{
  display:flex; gap:14px; align-items:center; padding:14px;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  color:inherit; transition:border-color .15s, box-shadow .15s, transform .15s;
}
.bankcard:hover{ text-decoration:none; border-color:var(--brand); box-shadow:var(--shadow-2); transform:translateY(-2px) }
.bankcard__logo{ flex:none }
.bankcard__body{ min-width:0; display:flex; flex-direction:column; gap:2px }
.bankcard__name{ font-weight:600; color:var(--ink); line-height:1.3 }
.bankcard__type{ font-size:.8rem; color:var(--ink-3) }
.bankcard__nums{ display:flex; gap:14px; margin-top:5px; font:500 .84rem/1 var(--mono); color:var(--ink-2); font-variant-numeric:tabular-nums }
.bankcard__nums span{ display:inline-flex; align-items:center; gap:5px }
.bankcard__nums .ic{ width:15px; height:15px; color:var(--brand) }
html[lang="bn"] .bankcard__nums{ font-family:var(--bn-sans) }

/* ---- bank types ------------------------------------------------------------ */
.typegrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px }
@media (max-width:1000px){ .typegrid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:620px){ .typegrid{ grid-template-columns:repeat(2,1fr) } }
.typecard{
  --t:var(--brand); position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:4px; padding:18px 16px 16px;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); color:inherit;
}
.typecard::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--t) }
.typecard:hover{ text-decoration:none; border-color:var(--t); box-shadow:var(--shadow-2) }
.typecard__n{ font:500 2rem/1 var(--mono); color:var(--t); letter-spacing:-.03em }
html[lang="bn"] .typecard__n{ font-family:var(--bn-sans) }
.typecard__label{ font-weight:600; color:var(--ink); line-height:1.3; margin-top:4px }
.typecard__meta{ font-size:.82rem; color:var(--ink-3) }
.typecard--state-owned{ --t:#1d6b4f }
.typecard--specialized{ --t:#7a5a14 }
.typecard--islami{ --t:#1f6f7a }
.typecard--private{ --t:#3a4f8f }
.typecard--foreign{ --t:#8a3d5c }
:root[data-theme="dark"] .typecard--state-owned{ --t:#57c2a6 }
:root[data-theme="dark"] .typecard--specialized{ --t:#d3a05a }
:root[data-theme="dark"] .typecard--islami{ --t:#5cc2cf }
:root[data-theme="dark"] .typecard--private{ --t:#8fa3e8 }
:root[data-theme="dark"] .typecard--foreign{ --t:#e08aad }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .typecard--state-owned{ --t:#57c2a6 }
  :root:not([data-theme="light"]) .typecard--specialized{ --t:#d3a05a }
  :root:not([data-theme="light"]) .typecard--islami{ --t:#5cc2cf }
  :root:not([data-theme="light"]) .typecard--private{ --t:#8fa3e8 }
  :root:not([data-theme="light"]) .typecard--foreign{ --t:#e08aad }
}

/* ---- districts ----------------------------------------------------------- */
.distgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
@media (max-width:960px){ .distgrid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:620px){ .distgrid{ grid-template-columns:repeat(2,1fr) } }
.distcard{
  display:flex; flex-direction:column; gap:2px; padding:14px 15px;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); color:inherit;
}
.distcard:hover{ text-decoration:none; border-color:var(--brand); background:var(--brand-soft) }
.distcard__name{ font:500 1.12rem/1.2 var(--display); color:var(--ink) }
html[lang="bn"] .distcard__name{ font-family:var(--bn-display) }
.distcard__div{ font-size:.78rem; color:var(--ink-3) }
.distcard__nums{ display:flex; gap:12px; margin-top:8px; font:500 .82rem/1 var(--mono); color:var(--ink-2) }
.distcard__nums span{ display:inline-flex; align-items:center; gap:4px }
.distcard__nums .ic{ width:14px; height:14px; color:var(--brand) }
html[lang="bn"] .distcard__nums{ font-family:var(--bn-sans) }

/* ---- tools ------------------------------------------------------------ */
.toolgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
@media (max-width:720px){ .toolgrid{ grid-template-columns:1fr } }
.toolcard{
  display:flex; flex-direction:column; gap:6px; padding:22px 22px 20px;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); color:inherit;
}
.toolcard:hover{ text-decoration:none; border-color:var(--brand); box-shadow:var(--shadow-2) }
.toolcard__icon{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); margin-bottom:6px }
.toolcard__icon .ic{ width:21px; height:21px }
.toolcard__title{ font:500 1.25rem/1.25 var(--display); color:var(--ink) }
html[lang="bn"] .toolcard__title{ font-family:var(--bn-display) }
.toolcard__text{ color:var(--ink-2); font-size:.93rem; max-width:48ch }
.toolcard__code{
  margin-top:10px; align-self:flex-start; padding:10px 14px; border-radius:var(--r);
  background:var(--sunk); font:500 1.5rem/1 var(--mono); letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.toolcard__code b{ font-weight:500; color:var(--ink) }
.toolcard__code i{ font-style:normal; color:var(--brand) }
.toolcard__code em{ font-style:normal; color:var(--bad) }
.toolcard__legend{ font-size:.78rem; color:var(--ink-3) }

/* ---- trust strip ---------------------------------------------------------- */
.truststrip{ display:flex; gap:16px; align-items:flex-start; padding:20px 22px;
  border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--surface) }
.truststrip__icon{ flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent) }
.truststrip__icon .ic{ width:22px; height:22px }
.truststrip p{ margin:0; color:var(--ink-2); max-width:none }
.truststrip strong{ color:var(--ink) }

/* ---- bank hub header ---------------------------------------------------- */
.bankhead{ background:var(--surface-2); border-bottom:1px solid var(--rule); margin-bottom:6px }
.bankhead__in{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; padding:26px 0 28px }
@media (max-width:620px){ .bankhead__in{ grid-template-columns:1fr; gap:14px } }
.bankhead h1{ margin:0 0 8px }
.bankhead__meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.bankhead__site{ display:inline-flex; align-items:center; gap:5px; font-size:.9rem; font-weight:500 }
.bankhead__lede{ margin:12px 0 0; color:var(--ink-2); max-width:70ch }
.bankstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:22px 0 0;
  background:var(--rule); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden }
@media (max-width:620px){ .bankstats{ grid-template-columns:repeat(2,1fr) } }
.bankstats > div{ background:var(--surface); padding:14px 16px }
.bankstats dt{ font-size:.76rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em }
html[lang="bn"] .bankstats dt{ text-transform:none; letter-spacing:0; font-size:.84rem }
.bankstats dd{ margin:4px 0 0; font:500 1.5rem/1 var(--mono); color:var(--ink); letter-spacing:-.02em }
html[lang="bn"] .bankstats dd{ font-family:var(--bn-sans) }

.routegrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:24px 0 8px }
@media (max-width:960px){ .routegrid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:480px){ .routegrid{ grid-template-columns:1fr } }
.routecard{ display:flex; flex-direction:column; gap:4px; padding:18px 16px;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); color:inherit }
.routecard:hover{ text-decoration:none; border-color:var(--brand); box-shadow:var(--shadow-2) }
.routecard .toolcard__icon{ margin-bottom:8px }
.routecard__title{ font-weight:600; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:8px }
.routecard__title .ic{ color:var(--ink-4) }
.routecard:hover .routecard__title .ic{ color:var(--brand) }
.routecard__meta{ font-size:.86rem; color:var(--ink-3) }

/* ---- interest rates ------------------------------------------------------ */
.rategrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:24px }
@media (max-width:960px){ .rategrid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:480px){ .rategrid{ grid-template-columns:1fr } }
.ratecard{ display:flex; flex-direction:column; gap:4px; padding:18px 16px;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); color:inherit;
  border-top:4px solid var(--brand) }
.ratecard--deposit{ border-top-color:var(--accent) }
.ratecard:hover{ text-decoration:none; box-shadow:var(--shadow-2); border-color:var(--brand) }
.ratecard__kind{ font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600 }
html[lang="bn"] .ratecard__kind{ text-transform:none; letter-spacing:0; font-size:.84rem }
.ratecard__title{ font:500 1.18rem/1.25 var(--display); color:var(--ink) }
html[lang="bn"] .ratecard__title{ font-family:var(--bn-display) }
.ratecard__range{ font:500 1.15rem/1.2 var(--mono); color:var(--brand); margin-top:6px; letter-spacing:-.02em }
.ratecard--deposit .ratecard__range{ color:var(--accent) }
html[lang="bn"] .ratecard__range{ font-family:var(--bn-sans) }
.ratecard__meta{ font-size:.82rem; color:var(--ink-3) }

.ratetable td{ vertical-align:middle }
.ratetable__bank{ display:flex; align-items:center; gap:12px; color:var(--ink); font-weight:500 }
.ratetable__bank .bank-logo{ width:58px; height:36px }
.ratetable__none{ color:var(--ink-4); font-family:var(--sans); font-size:.82rem }

.bankrates{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:var(--r); overflow:hidden }
@media (max-width:720px){ .bankrates{ grid-template-columns:repeat(2,1fr) } }
.bankrate{ display:flex; flex-direction:column; gap:4px; padding:14px 16px; background:var(--surface); color:inherit }
.bankrate:hover{ background:var(--brand-soft); text-decoration:none }
.bankrate__label{ font-size:.84rem; color:var(--ink-3) }
.bankrate__value{ font:500 1.08rem/1.2 var(--mono); color:var(--ink) }
html[lang="bn"] .bankrate__value{ font-family:var(--bn-sans) }

/* ---- calculators, 2026-09-14 ------------------------------------------------
   Inputs on the left, the answer on the right, set as large as the routing
   number on its own page: the figure is what the reader came for. */
.calc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; margin-top:22px; align-items:start }
@media (max-width:820px){ .calc{ grid-template-columns:1fr } }
.calc__form,.calc__result{ background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:22px 22px 20px }
.calc__result{ position:sticky; top:16px; box-shadow:var(--shadow-1) }
@media (max-width:820px){ .calc__result{ position:static } }

.field{ margin-bottom:18px }
.field__label{ display:block; font-weight:600; font-size:.9rem; color:var(--ink-2); margin-bottom:6px }
.field__box{ display:flex; align-items:center; border:1px solid var(--rule-2); border-radius:var(--r-sm);
  background:var(--ground); overflow:hidden }
.field__box:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft) }
.field__input{ flex:1; min-width:0; border:0; background:transparent; color:var(--ink);
  font:500 1.12rem/1 var(--mono); font-variant-numeric:tabular-nums; padding:11px 12px; outline:none }
.field__unit{ padding:0 12px; color:var(--ink-3); font-size:.88rem; white-space:nowrap }
.field__unit--pre{ padding-right:0; font:500 1.05rem/1 var(--mono); color:var(--ink-2) }
.field__select{ width:100%; border:1px solid var(--rule-2); border-radius:var(--r-sm); background:var(--ground);
  color:var(--ink); font:inherit; padding:10px 12px }
.field__select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft) }
.field__range{ width:100%; margin:10px 0 0; accent-color:var(--brand) }

.calc__hint{ margin:4px 0 0; font-size:.86rem; color:var(--ink-3) }
.calc__tag{ margin:0 0 6px; font:600 .72rem/1 var(--sans); letter-spacing:.11em; text-transform:uppercase; color:var(--brand) }
html[lang="bn"] .calc__tag{ text-transform:none; letter-spacing:.02em; font-size:.88rem }
.calc__big{ margin:0; font:500 clamp(2.1rem, 1.5rem + 2.6vw, 3rem)/1.05 var(--mono);
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; color:var(--ink); overflow-wrap:anywhere }
html[lang="bn"] .calc__big{ font-family:var(--bn-sans); letter-spacing:0 }
.calc__bar{ display:flex; height:10px; border-radius:99px; overflow:hidden; margin:18px 0 14px; background:var(--accent) }
.calc__bar-a{ background:var(--brand); transition:width .2s }
.calc__bar-b{ flex:1 }
.calc__sums{ margin:0 }
.calc__sums > div{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--rule) }
.calc__sums dt{ color:var(--ink-2); font-size:.93rem; display:flex; align-items:center; gap:8px }
.calc__sums dd{ margin:0; font:500 1rem/1.3 var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap }
html[lang="bn"] .calc__sums dd{ font-family:var(--bn-sans) }
.calc__sums-total{ border-bottom:0 !important }
.calc__sums-total dt{ color:var(--ink); font-weight:600 }
.calc__sums-total dd{ font-weight:600 }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; flex:none }
.dot--a{ background:var(--brand) }
.dot--b{ background:var(--accent) }
.calc__share{ margin-top:14px; width:100%; justify-content:center }

.calc__notes{ margin-top:34px; max-width:72ch }
.calc__notes h2{ margin-top:1.4em }
.calc__formula{ font:500 1.02rem/1.5 var(--mono); background:var(--sunk); border-radius:var(--r);
  padding:12px 16px; overflow-x:auto; white-space:nowrap; color:var(--ink) }

.calcgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px }
@media (max-width:900px){ .calcgrid{ grid-template-columns:1fr } }
.calccard{ display:flex; flex-direction:column; gap:6px; padding:22px; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-lg); border-top:4px solid var(--brand); color:inherit }
.calccard:hover{ text-decoration:none; border-color:var(--brand); box-shadow:var(--shadow-2) }
.calccard__title{ font:500 1.25rem/1.25 var(--display); color:var(--ink) }
html[lang="bn"] .calccard__title{ font-family:var(--bn-display) }
.calccard__text{ color:var(--ink-2); font-size:.93rem }
.calccard__eg{ margin-top:auto; padding-top:12px; font-size:.84rem; color:var(--ink-3) }
.calccard__eg b{ display:block; margin-top:3px; font:500 1.35rem/1.1 var(--mono); color:var(--brand); letter-spacing:-.02em }
html[lang="bn"] .calccard__eg b{ font-family:var(--bn-sans) }

/* ---- mobile pass, 2026-09-14 ----------------------------------------------
   A row of seven chips wrapped into a full phone screen of buttons before the
   first rate. On a phone they become one row that scrolls sideways. On a
   phone the calculator's answer sits above its inputs, so changing a figure
   never hides the result. */
@media (max-width:620px){
  .page-head .chips{ flex-wrap:nowrap; overflow-x:auto; margin-inline:-20px; padding:0 20px 6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .page-head .chips::-webkit-scrollbar{ display:none }
  .page-head .chip{ white-space:nowrap; flex:none }
}
@media (max-width:820px){
  .calc__result{ order:-1 }
}
.notice--merge{ border-left-color:var(--bad); margin:14px 0 4px }

/* ---- search, 2026-09-15 --------------------------------------------------- */
.search-read{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:16px 0 4px; color:var(--ink-3); font-size:.9rem }
.search-answer{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:14px 0 4px }
@media (max-width:620px){ .search-answer{ grid-template-columns:1fr } }
.search-count{ font:500 .8rem/1 var(--mono); color:var(--ink-4); margin-left:6px; vertical-align:middle }