/* Bank discounts section: comparison tool, city/bank pages. Built on the Sprig Journal tokens from blog.css. */
body{--faint:#736C61}  /* darker than the journal's faint grey: small text here must pass WCAG AA */
.bd-more[hidden],.bd-loaded[hidden],.bd-pick[hidden],.bd-table tr[hidden]{display:none}
.bd-jump{margin:-6px 0 28px;font:600 15px var(--sans)}
.bd-jump a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(15,122,99,.35)}
.bd-jump a:hover{border-bottom-color:var(--green)}
.bd-source{font:400 14px/1.55 var(--sans);color:var(--muted);margin:16px 0 0;max-width:var(--measure)}
.bd-pick{background:var(--paper);border:1px dashed var(--sand-2);border-radius:18px;padding:22px 22px 14px}
.bd-pick p{margin:0 0 12px;font:400 16px/1.5 var(--sans);color:var(--muted)}
.bd-cityline{font:400 14px/1.5 var(--sans);color:var(--muted);margin:0 0 12px}
.bd-cityline a{color:var(--green)}
.bd-national td.chips{display:flex;flex-wrap:wrap;gap:6px}
.bd-national a.chip{display:inline-flex;gap:5px;align-items:baseline;border:1px solid var(--sand-2);border-radius:999px;padding:5px 10px;font:500 13px/1.3 var(--sans);color:var(--ink);text-decoration:none;background:var(--paper)}
.bd-national a.chip b{font:500 13px var(--mono)}
.bd-national a.chip.best{background:var(--green);border-color:var(--green);color:#fff}
.bd-national a.chip:hover{box-shadow:0 0 0 1px var(--ink) inset}
.bd-head{max-width:900px}
.bd-tool{margin:6px 0 64px;scroll-margin-top:90px}
.bd-toolhead{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;justify-content:space-between;margin:0 0 18px}
.bd-toolhead h2{font:400 clamp(28px,3.4vw,40px)/1.1 var(--serif);letter-spacing:-.012em;margin:0;text-wrap:balance}
.bd-city{display:inline-flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none;background:var(--sand);border-radius:999px;padding:4px;gap:4px}
.bd-city::-webkit-scrollbar{display:none}
.bd-city button,.bd-city a{flex:none;border:0;background:transparent;color:var(--ink);font:600 14px/1 var(--sans);padding:11px 16px;border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap}
.bd-city button[aria-pressed="true"],.bd-city a[aria-current="page"]{background:var(--green);color:#fff}
.bd-city button:hover:not([aria-pressed="true"]),.bd-city a:hover:not([aria-current="page"]){background:rgba(15,122,99,.1)}
.bd-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 20px}
.bd-bank{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:8px;cursor:pointer;text-align:left;color:var(--ink);font:inherit}
.bd-bank:hover{border-color:var(--sand-2)}
.bd-bank[aria-pressed="true"]{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
.bd-bank .top{display:flex;align-items:center;gap:8px;min-width:0}
.bd-bank .nm{font:600 14px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-bank .stats{display:flex;gap:12px;font:400 12px/1.3 var(--sans);color:var(--muted)}
.bd-bank .stats b{display:block;font:500 17px/1.2 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.bd-ico{width:28px;height:28px;border-radius:7px;flex:none;display:inline-grid;place-items:center;color:#fff;font:700 10px/1 var(--sans);overflow:hidden;background:var(--c)}
.bd-ico img{width:100%;height:100%;object-fit:contain;background:#fff}
.bd-ico[data-b]::before{content:attr(data-b)}
.bd-ico.sm{width:22px;height:22px;border-radius:6px;font-size:8px}
.bd-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px}
.bd-search{flex:1 1 240px;min-width:0;max-width:380px;background:var(--paper);border:1px solid var(--sand-2);border-radius:12px;padding:11px 14px;font:400 16px var(--sans);color:var(--ink)}
.bd-chips{display:flex;flex-wrap:wrap;gap:6px}
.bd-chips button{border:1px solid var(--sand-2);background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 13px;font:500 14px/1 var(--sans);cursor:pointer}
.bd-chips button[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.bd-chips button span{color:var(--faint);font:500 11px var(--mono);margin-left:5px}
.bd-chips button[aria-pressed="true"] span{color:inherit;opacity:.7}
.bd-opts{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font:400 14px/1.4 var(--sans);color:var(--muted);margin:0 0 14px}
.bd-opts label{display:flex;gap:6px;align-items:center;cursor:pointer}
.bd-sortw{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.bd-opts select{font:400 14px var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--sand-2);border-radius:8px;padding:6px 8px}
.bd-count{font:400 13px var(--sans);color:var(--muted)}
.bd-loading{opacity:.45;pointer-events:none;transition:opacity .15s}
/* comparison table */
.bd-tablebox{overflow:auto;max-height:78vh;border:1px solid var(--line);border-radius:18px;background:var(--paper);scroll-behavior:auto}
.bd-table{border-collapse:separate;border-spacing:0;width:100%;min-width:900px;font-family:var(--sans)}
.bd-table th,.bd-table td{border-bottom:1px solid var(--line);padding:0}
.bd-table thead th{position:sticky;top:0;z-index:2;background:var(--paper);font:600 12px/1.2 var(--sans);border-bottom:2px solid var(--ink)}
.bd-table thead button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;width:100%;box-sizing:border-box}
.bd-table thead .s{color:var(--green);font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;min-height:12px}
.bd-table .mcol{position:sticky;left:0;z-index:1;background:var(--paper);text-align:left;min-width:230px;max-width:280px;border-right:1px solid var(--line)}
.bd-table thead .mcol{z-index:3;padding:10px 14px;vertical-align:bottom}
.bd-table .m{display:flex;align-items:center;gap:10px;padding:8px 14px;min-width:0}
.bd-table .m img,.bd-table .m .ph,.bd-list .m img,.bd-list .m .ph{width:40px;height:40px;border-radius:9px;object-fit:cover;flex:none;background:var(--sand);border:1px solid var(--line)}
.bd-table .m .ph,.bd-list .m .ph{display:grid;place-items:center;font:400 18px var(--serif);color:var(--muted)}
.bd-table .m .t,.bd-list .m .t{min-width:0}
.bd-table .m .n,.bd-list .m .n{font:600 14px/1.25 var(--sans);overflow-wrap:anywhere}
.bd-table .m .c,.bd-list .m .c{font:400 11px/1.4 var(--sans);color:var(--faint);letter-spacing:.03em;text-transform:uppercase}
.bd-table td.v{text-align:center;font:500 15px/1.2 var(--mono);font-variant-numeric:tabular-nums;min-width:64px}
.bd-table td.v .in{display:grid;place-items:center;margin:5px;border-radius:9px;padding:6px 4px;min-height:40px;background:color-mix(in srgb,var(--green) var(--h,0%),transparent)}
.bd-table td.v .u{display:block;font:500 10px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:inherit}
.bd-table td.v.best .in{background:var(--green);color:#fff}
.bd-table td.v.best .u{color:inherit;opacity:1}
.bd-table td.v.none{color:var(--sand-2)}
.bd-table td.v .of{font:500 11px var(--sans)}
.bd-table tbody tr:hover td,.bd-table tbody tr:hover .mcol{background:#FDFCF9}
.bd-table td.v a.in{color:inherit;text-decoration:none;cursor:pointer;transition:box-shadow .12s}
.bd-table td.v a.in:hover{box-shadow:0 0 0 2px var(--ink) inset}
.bd-table td.v a.in:focus-visible,a.bc:focus-visible,.bd-list a.pct:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.bd-empty{padding:40px;text-align:center;color:var(--muted)}
.bd-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font:400 13px/1.5 var(--sans);color:var(--muted);margin:12px 0 0}
.bd-sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-3px;margin-right:5px}
/* phone cards */
.bd-cards{display:none}
.bd-more{display:block;margin:14px auto 0;border:0;background:none;color:var(--muted);padding:8px 14px;font:500 14px var(--sans);cursor:pointer}
.bd-more::before{content:'';display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;border:2px solid var(--sand-2);border-top-color:var(--green);border-radius:50%;animation:bd-spin 1s linear infinite}
@keyframes bd-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bd-more::before{animation:none}}
a.bc{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a.bc:active{transform:scale(.96)}
/* bank-in-city list */
.bd-list{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--sans);background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.bd-list th,.bd-list td{border-bottom:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:middle}
.bd-list thead th{font:600 12px/1.3 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;background:var(--paper)}
.bd-list tbody tr:last-child td,.bd-list tbody tr:last-child th{border-bottom:0}
.bd-list .m{display:flex;align-items:center;gap:10px;min-width:0}
.bd-list a.pct{display:inline-grid;place-items:center;min-width:74px;padding:7px 10px;border-radius:10px;font:500 16px/1.15 var(--mono);color:inherit;text-decoration:none;background:color-mix(in srgb,var(--green) var(--h,0%),transparent)}
.bd-list a.pct.best{background:var(--green);color:#fff}
.bd-list a.pct small{display:block;font:500 10px/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase}
.bd-list a.pct:hover{box-shadow:0 0 0 2px var(--ink) inset}
.bd-list .oth{font:400 14px/1.35 var(--sans);color:var(--muted)}
.bd-list .oth b{font:500 14px var(--mono);color:var(--ink)}
.bd-list .oth.beats b{color:var(--red)}
.bd-list .nb{font:500 14px var(--mono);color:var(--muted);text-align:center}
.bd-list tr[hidden]{display:none}
.bd-list .bn-s{display:none}
.bd-list .oth b{white-space:nowrap}
/* browse grids */
.bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:0 0 12px}
.bd-tile{display:grid;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;color:var(--ink);text-decoration:none;transition:border-color .12s,transform .12s}
.bd-tile:hover{border-color:var(--green);transform:translateY(-1px)}
.bd-tile .tt{display:flex;align-items:center;gap:10px;font:600 17px/1.25 var(--sans)}
.bd-tile .ts{font:400 14px/1.45 var(--sans);color:var(--muted)}
.bd-tile .ts b{color:var(--ink);font-weight:600}
.bd-tile .go{font:600 14px var(--sans);color:var(--green)}
.bd-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0;list-style:none}
.bd-links a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--sand-2);background:var(--paper);border-radius:999px;padding:8px 14px;font:500 14px var(--sans);color:var(--ink);text-decoration:none}
.bd-links a:hover{border-color:var(--green);color:var(--green)}
/* sections */
.bd-section{max-width:980px;margin:0 0 56px}
.bd-section.wide{max-width:none}
.bd-section h2{font:400 clamp(28px,3.4vw,38px)/1.12 var(--serif);letter-spacing:-.012em;margin:0 0 14px;text-wrap:balance}
.bd-section h3{font:600 19px/1.35 var(--sans);margin:28px 0 10px}
.bd-section p{max-width:var(--measure);margin:0 0 16px}
.bd-muted{color:var(--faint)}
.bd-bankcell{display:inline-flex;align-items:center;gap:8px}
.bd-band{background:var(--ink);color:#FBF8F3;border-radius:26px;padding:40px;display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center;margin:0 0 72px}
.bd-band h2,.bd-band .h2{font:400 clamp(28px,3.6vw,40px)/1.1 var(--serif);margin:10px 0;color:#FBF8F3}
.bd-band p{color:rgba(251,248,243,.75);margin:0}
.bd-band .eyebrow{color:#7FD1B9}
.bd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.bd-chips button,.bd-bank,.bd-list a,.bd-national a.chip,.tbl td a{position:relative}  /* keep screen-reader text inside its scroller */
.bd-city button:focus-visible,.bd-city a:focus-visible,.bd-chips button:focus-visible,.bd-bank:focus-visible,.bd-table thead button:focus-visible,.bd-tile:focus-visible,.bd-more:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media (prefers-reduced-motion:reduce){a.bc:active{transform:none}.bd-table td.v a.in,.bd-tile{transition:none}.bd-tile:hover{transform:none}}
@media (max-width:1180px){.bd-table .mcol{min-width:190px;max-width:240px}.bd-table td.v{min-width:54px;font-size:14px}.bd-table td.v .in{margin:4px 3px}}
@media (max-width:900px) and (orientation:portrait),(max-width:560px){
.bd-ready .bd-tablebox{display:none}
.bd-ready .bd-cards{display:grid;gap:12px}
.bd-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px}
.bd-chead{display:flex;align-items:center;gap:12px;margin:0 0 12px;min-width:0}
.bd-chead img,.bd-chead .ph{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;background:var(--sand);border:1px solid var(--line)}
.bd-chead .ph{display:grid;place-items:center;font:400 20px var(--serif);color:var(--muted)}
.bd-chead .t{flex:1;min-width:0}
.bd-chead .n{font:600 16px/1.25 var(--sans);margin:0;overflow-wrap:anywhere}
.bd-chead .c{font:400 11px/1.4 var(--sans);color:var(--faint);letter-spacing:.03em;text-transform:uppercase}
.bd-cbest{flex:none;text-align:right;display:grid;gap:2px}
.bd-cbest b{font:500 20px/1 var(--mono);color:var(--green)}
.bd-cbest small{font:600 9px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.bd-cbest span{font:600 11px/1.2 var(--sans);color:var(--muted);max-width:120px}
.bd-cgrid{display:grid;grid-template-columns:repeat(var(--n,11),minmax(0,1fr));gap:6px}
.bc{border-radius:10px;padding:7px 4px 8px;text-align:center;background:color-mix(in srgb,var(--green) var(--h,0%),var(--cream));border:1px solid var(--line);display:grid;gap:3px;min-width:0}
.bc .bk{font:600 11px/1.2 var(--sans);letter-spacing:.01em;color:var(--ink);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc .bk i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:1px}
.bc .pc{font:500 16px/1.1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.bc .pc small{display:block;font:500 10px/1.2 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:inherit}
.bc .pc.of{font:600 12px/1.6 var(--sans)}
.bc.best{background:var(--green);border-color:var(--green)}
.bc.best .bk,.bc.best .pc,.bc.best .pc small{color:#fff;opacity:1}
.bc.none{background:transparent;border-style:dashed}
.bc.none .pc{color:var(--sand-2)}
.bc.sel{outline:2px solid var(--ink);outline-offset:1px}
.bd-toolhead{align-items:stretch}
.bd-city{width:100%;flex-wrap:wrap;border-radius:16px}
.bd-city button,.bd-city a{flex:1 0 auto;text-align:center;padding:10px 12px}
.bd-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:-20px;padding:2px 20px 6px}
.bd-chips::-webkit-scrollbar{display:none}
.bd-chips button{flex:none}
.bd-search{max-width:none;flex-basis:100%}
}
@media (max-width:700px) and (orientation:portrait),(max-width:560px){
.bd-cgrid{grid-template-columns:repeat(var(--nh,6),minmax(0,1fr));gap:5px}
.bc{padding:6px 2px 7px}
.bc .bk{font-size:10.5px}
.bc .bk i{display:none}
.bc .pc{font-size:15px}
}
@media (max-width:640px){
.bd-list th,.bd-list td{padding:7px 8px}
.bd-list .colnb{display:none}
.bd-list .m img,.bd-list .m .ph{width:32px;height:32px}
.bd-list a.pct{min-width:60px;font-size:15px}
.bd-list .oth{font-size:13px}
.bd-list .bn-l{display:none}
.bd-list .bn-s{display:inline}
.bd-list .oth a{display:block}
.bd-list th:nth-child(3),.bd-list td:nth-child(3){width:96px}
}
@media (max-width:560px){
.bd-board{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:20px;gap:8px;margin-inline:-20px;padding:2px 20px 6px}
.bd-board::-webkit-scrollbar{display:none}
.bd-bank{flex:0 0 172px;padding:10px;scroll-snap-align:start}
.bd-bank .stats{gap:8px;font-size:11px}
.bd-bank .stats b{font-size:15px}
.bd-band{grid-template-columns:1fr;padding:28px 22px}
.bd-grid{grid-template-columns:1fr 1fr;gap:8px}
.bd-tile{padding:12px}
.bd-tile .tt{font-size:15px}
.bd-tile .ts{font-size:13px}
}
@media (orientation:landscape) and (max-height:520px){
.nav{position:relative}
.bd-tool{scroll-margin-top:8px}
.bd-board{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.bd-bank{padding:8px;gap:4px}
.bd-bank .nm{font-size:12px}
.bd-bank .stats{gap:6px;font-size:10px}
.bd-bank .stats b{font-size:13px}
.bd-ico{width:22px;height:22px;border-radius:5px;font-size:8px}
.bd-tablebox{max-height:calc(100vh - 16px);border-radius:12px}
.bd-table{min-width:0;table-layout:fixed}
.bd-table .mcol{width:22%;min-width:0;max-width:none}
.bd-table thead .mcol{padding:6px 8px;font-size:11px}
.bd-table .m{padding:3px 8px;gap:6px}
.bd-table .m img,.bd-table .m .ph{width:24px;height:24px;border-radius:6px}
.bd-table .m .n{font-size:12px;line-height:1.2}
.bd-table .m .c{font-size:9px;line-height:1.3}
.bd-table thead button{padding:5px 1px;gap:2px}
.bd-table thead .bd-ico{width:18px;height:18px}
.bd-table thead button>span:not(.bd-ico){font-size:10px}
.bd-table thead .s{display:none}
.bd-table td.v{min-width:0;font-size:12px}
.bd-table td.v .in{margin:2px;padding:2px 1px;min-height:28px;border-radius:6px}
.bd-table td.v .u{font-size:9px;letter-spacing:.02em}
.bd-legend{font-size:11px}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:760px){
.bd-table .mcol{width:24%}
.bd-table .m .c{display:none}
.bd-table .m .n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px}
.bd-table .m img,.bd-table .m .ph{width:22px;height:22px}
}
@media (max-width:380px){.bd-chips,.bd-board{margin-inline:-16px;padding-inline:16px}.bd-card{padding:12px}.bc .pc{font-size:15px}}
/* skip link past the comparison table */
.bd-skipt{position:absolute;left:-9999px}
.bd-skipt:focus{position:static;display:inline-block;margin:0 0 10px;padding:8px 14px;background:var(--ink);color:#fff;border-radius:8px}
/* wide screens: the table scrolls with the page (no scroll box inside the page) and its header sticks under the site menu */
/* the comparison is its own scroll box: with the pointer over it the wheel scrolls the table (header row stays on top),
   anywhere else it scrolls the page. On mouse screens it never hands the scroll over to the page at its ends. */
@media (min-height:521px){.bd-tablebox{max-height:calc(100vh - var(--bd-navh,110px) - 28px)}}
.bd-tablebox{overscroll-behavior:contain}
@media (hover:none),(pointer:coarse){.bd-tablebox{overscroll-behavior:auto}}   /* touch: let a swipe continue to the page */
.bd-list td>.bd-muted{font:400 14px/1.35 var(--sans)}
/* JazzCash deals only for its Women Debit Card, and wallet caps */
.wc{display:block;font:600 9px/1.2 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:#9b1c5a}
.best .wc,.bc.best .wc,a.pct.best+.wc{color:inherit}
.bd-list td .wc{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;background:#fbe7f0;color:#9b1c5a}
.bd-list .cap{display:block;font:400 11px/1.3 var(--sans);color:var(--muted);margin-top:3px}
@media (max-width:640px){.bd-list td .wc{display:table;margin:4px 0 0;font-size:8.5px;padding:2px 5px}.bd-list .cap{font-size:10.5px}}