/* =========================================================================
UAE Banks Directory — Design System
A deliberately non-cliché fintech-directory look: deep navy ink, a trust
teal primary (not default bank-blue), and a restrained warm-amber accent.
Type is a refined system stack (no render-blocking web fonts); swap in a
self-hosted Inter/Fraunces pair later without touching component CSS.
========================================================================= */
:root{
/* ==========================================================================
* STITCH CANONICAL TOKENS — F.1
*
* Authority order: the Stitch project, then its designMd, then design/v2.
* These names are the ones the design system speaks in; the legacy
* `--uabd-accent` / `--uabd-ink` names below are kept as aliases so the 460
* rules already written against them keep working and simply render in the
* approved palette. F.1 changes values, not structure.
* ========================================================================== */
--uabd-navy:#0B1F3A;
/* F.2, both from design/v2/uabd-v2.css: the brand-mark gradient's second
stop, and the utility bar's text on navy (8.4:1). Additive — no F.1 value
changes. */
--uabd-navy-700:#12325C;
--uabd-utility-text:#A9BAD2;
--uabd-blue:#1463FF;
--uabd-blue-700:#0E52D6;
--uabd-green:#087F5B;
--uabd-green-700:#066649;
--uabd-gold:#C99A35;
--uabd-text:#162033;
--uabd-text-secondary:#667085;
/* Supporting copy. NOT the Stitch `muted` #98A2B3, which is ~2.8:1 on
white and below AA; that value lives on --uabd-muted-chrome. */
--uabd-muted:#667085;
--uabd-border:#E2E8F0;
--uabd-border-strong:#CBD5E1;
--uabd-bg-blue:#F3F7FC;
--uabd-bg-green:#F2F8F5;
--uabd-bg-neutral:#F8FAFC;
--uabd-white:#FFFFFF;
/* Type */
--uabd-font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--uabd-font-head:var(--uabd-font-sans);
--uabd-font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
/* Shape and elevation — one-pixel borders, restrained shadow */
--uabd-radius:8px; /* cards and card-like surfaces */
--uabd-radius-sm:6px; /* controls, inputs, buttons */
--uabd-radius-badge:4px;
--uabd-shadow-sm:0 1px 2px rgba(11,31,58,.05);
--uabd-shadow:0 4px 14px -4px rgba(11,31,58,.10);
/* Layout */
--uabd-maxw:1200px;
--uabd-section-y:56px;
--uabd-section-y-mobile:36px;
/* Focus */
--uabd-focus-ring:0 0 0 3px rgba(20,99,255,.14);
/* Table tokens. F.1 defines them; the .uabd-table implementation is a
* later phase and deliberately not written here. */
--uabd-table-head-bg:#F8FAFC;
--uabd-table-head-text:#667085;
--uabd-table-border:#E2E8F0;
--uabd-table-row-hover:#F8FAFC;
/* Badge tokens */
--uabd-badge-green-bg:#F2F8F5;
--uabd-badge-green-text:#087F5B;
--uabd-badge-blue-bg:#F3F7FC;
--uabd-badge-blue-text:#1463FF;
--uabd-badge-gold-bg:#FDF9F0;
--uabd-badge-gold-text:#C99A35;
/* ---- Legacy aliases ----------------------------------------------------
* `--uabd-muted` deliberately maps to text-secondary #667085, NOT to the
* Stitch `muted` #98A2B3. It carries supporting body copy across the theme,
* and #98A2B3 on white is about 2.8:1 — below WCAG AA. Stitch reserves that
* value for de-emphasised chrome such as the ADVERTISEMENT label, which is
* what --uabd-muted-chrome is for.
* `--uabd-accent2` was amber #b45309. Stitch has no amber, and gold is an
* editorial accent that may never be a button or a background, so the
* secondary emphasis role maps to green. */
--uabd-ink:var(--uabd-text);
--uabd-ink-soft:var(--uabd-text-secondary);
--uabd-muted-chrome:#98A2B3;
--uabd-accent:var(--uabd-blue);
--uabd-accent-dark:var(--uabd-blue-700);
--uabd-accent2:var(--uabd-green);
--uabd-accent2-dark:var(--uabd-green-700);
--uabd-surface:var(--uabd-white);
--uabd-bg:var(--uabd-bg-neutral);
--uabd-bg-2:var(--uabd-bg-blue);
--uabd-line:var(--uabd-border);
--uabd-ok:var(--uabd-green);
}
body{color:var(--uabd-ink);font-family:var(--uabd-font-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.uabd-h{font-family:var(--uabd-font-head);letter-spacing:-.02em;color:var(--uabd-navy);line-height:1.2;font-weight:700}
/* Stitch fixes H1 at 34px desktop / 26px mobile and says never larger. That
overrides design/v2's 2.65rem, per the F.1 authority order. */
h1,.uabd-h1{font-size:34px}
h2,.uabd-h2{font-size:1.85rem}
h3,.uabd-h3{font-size:1.05rem}
h4{font-size:1rem}
/* Tabular figures everywhere numerals appear, so fee columns line up. */
body{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}
/* Mono is for data values only — never body copy. */
.mono,.uabd-code,.uabd-num,.uabd-mono{font-family:var(--uabd-font-mono);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}
a{color:var(--uabd-accent)}
/* Layout helpers */
/*
* Container gutter — F.2R (P2-86).
*
* The frozen value, from `design/v2/uabd-v2.css:73`: a flat 24px, dropping to
* 16px at the 760px boundary (`uabd-v2.css:498`). It was `clamp(16px,4vw,40px)`
* here, which resolved to 40px a side from 1000px up and so took 32px off every
* full-width row — enough that the ten-item primary menu no longer fitted on
* one line at the frozen 1080 breakpoint. Both the gutter and the nav padding
* that had been trimmed to work around it are back on the frozen values.
*/
.uabd-wrap{max-width:var(--uabd-maxw);margin-inline:auto;padding-inline:24px}
.uabd-section{padding-block:var(--uabd-section-y)}
.uabd-section--wash{background:var(--uabd-bg)}
.uabd-section--ink{background:var(--uabd-ink);color:#fff}
.uabd-section--ink h1,.uabd-section--ink h2,.uabd-section--ink h3{color:#fff}
.uabd-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--uabd-accent)}
.uabd-section-head{max-width:640px;margin-bottom:1.8rem}
.uabd-section-head h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:.4rem 0 .5rem}
.uabd-section-head p{color:var(--uabd-muted);margin:0;font-size:1.02rem}
/* Buttons */
.uabd-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.25rem;border-radius:var(--uabd-radius-sm);
font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.15s ease;font-size:.98rem;line-height:1}
.uabd-btn--primary{background:var(--uabd-accent);color:#fff}
.uabd-btn--primary:hover{background:var(--uabd-accent-dark);color:#fff}
.uabd-btn--amber{background:var(--uabd-accent2);color:#fff}
.uabd-btn--amber:hover{background:var(--uabd-accent2-dark);color:#fff}
.uabd-btn--ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.uabd-btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.uabd-btn--outline{background:var(--uabd-white);border-color:var(--uabd-border-strong);color:var(--uabd-navy)}
.uabd-btn--outline:hover{border-color:var(--uabd-blue);color:var(--uabd-blue)}
/* Tertiary: defined here so later phases have it; no markup changes in F.1. */
.uabd-btn--tertiary{background:transparent;border-color:transparent;color:var(--uabd-text-secondary)}
.uabd-btn--tertiary:hover{color:var(--uabd-text-secondary);text-decoration:underline}
/* Chips */
.uabd-chip{display:inline-block;padding:.28rem .7rem;margin:0 .35rem .35rem 0;border-radius:999px;
background:var(--uabd-bg-2);color:var(--uabd-ink-soft);font-size:.8rem;font-weight:600;text-decoration:none;border:1px solid transparent}
.uabd-chip:hover{border-color:var(--uabd-accent);color:var(--uabd-accent)}
.uabd-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.25rem .5rem;border-radius:var(--uabd-radius-badge)}
.uabd-badge--licensed,.uabd-badge--verified,.uabd-badge--green{background:var(--uabd-badge-green-bg);color:var(--uabd-badge-green-text)}
.uabd-badge--blue{background:var(--uabd-badge-blue-bg);color:var(--uabd-badge-blue-text)}
.uabd-badge--gold{background:var(--uabd-badge-gold-bg);color:var(--uabd-badge-gold-text)}
/* ==========================================================================
HOMEPAGE — F.3, directory-first.
The hero this replaces was `.uabd-hero`: a full-bleed navy gradient with
`padding-block: clamp(3rem,8vw,5.5rem)`, a promotional headline and a stat
band — around 560px before any directory content. It is gone rather than
restyled, because the problem was the structure, not the colour.
Geometry from `design/v2/uabd-v2-home.css:13-84`. Every colour is an F.1
token. The frozen `2.375rem` H1 is NOT adopted: F.1 fixes the scale at
34px/26px and says never larger, and F.3 is structure, not type.
========================================================================== */
.uabd-hero2{
background:
radial-gradient(900px 400px at 88% 0%,rgba(20,99,255,.09),transparent 60%),
radial-gradient(700px 380px at 0% 100%,rgba(8,127,91,.06),transparent 60%),
var(--uabd-bg-blue);
border-bottom:1px solid var(--uabd-border);
padding-block:44px 38px
}
.uabd-hero2__inner{max-width:820px}
.uabd-hero2 h1{margin:0;line-height:1.15;letter-spacing:-.024em}
.uabd-hero2__lede{color:var(--uabd-text-secondary);font-size:1.0625rem;line-height:1.6;margin:12px 0 0}
/* Directory search — larger than the header's, same core backend. */
.uabd-usearch{
display:flex;align-items:center;gap:10px;background:#fff;
border:1px solid var(--uabd-border-strong);border-radius:var(--uabd-radius);
padding:8px 8px 8px 16px;margin-top:24px;box-shadow:var(--uabd-shadow-sm);
transition:border-color .15s,box-shadow .15s
}
.uabd-usearch:focus-within{border-color:var(--uabd-blue);box-shadow:var(--uabd-focus-ring)}
.uabd-usearch>.material-symbols-outlined{font-size:21px;color:var(--uabd-text-secondary);flex:none}
/* Same reason as `.uabd-hsearch` (F.2): a flex item's automatic minimum size is
content-based, and an brings roughly 209px of intrinsic width with it. */
.uabd-usearch__input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:1rem;color:var(--uabd-text);padding:6px 0}
.uabd-usearch__input::placeholder{color:var(--uabd-muted-chrome)}
.uabd-usearch__input:focus-visible{outline:0;box-shadow:none}
.uabd-usearch__go{flex:none;padding:.72rem 1.1rem}
/* Quick tasks — navigation, not promotion. 44px minimum target. */
.uabd-tasks{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.uabd-task{
display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;
background:#fff;border:1px solid var(--uabd-border-strong);border-radius:var(--uabd-radius-sm);
font-size:.875rem;font-weight:600;color:var(--uabd-navy);text-decoration:none;
transition:border-color .15s,color .15s,box-shadow .15s
}
.uabd-task:hover{border-color:var(--uabd-blue);color:var(--uabd-blue);box-shadow:var(--uabd-shadow-sm)}
.uabd-task .material-symbols-outlined{font-size:18px;color:var(--uabd-blue)}
/* Section head with an optional "see all" on the right. */
.uabd-shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:1.6rem}
.uabd-shead__text{max-width:640px}
.uabd-shead__text h2{font-size:1.85rem;margin:.35rem 0 0}
.uabd-shead__text p{color:var(--uabd-text-secondary);margin:.5rem 0 0;font-size:1.02rem}
.uabd-seeall{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:600;font-size:.9rem;color:var(--uabd-blue);text-decoration:none;flex:none}
.uabd-seeall:hover{text-decoration:underline}
.uabd-seeall .material-symbols-outlined{font-size:18px}
/* Category shortcuts. */
.uabd-cattiles{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.uabd-cattile{
display:flex;flex-direction:column;background:var(--uabd-white);
border:1px solid var(--uabd-border);border-radius:var(--uabd-radius);
padding:1.25rem 1.35rem;text-decoration:none;color:inherit;
transition:border-color .15s,box-shadow .15s
}
.uabd-cattile:hover{border-color:var(--uabd-border-strong);box-shadow:var(--uabd-shadow)}
.uabd-cattile__ic{width:40px;height:40px;border-radius:var(--uabd-radius-sm);display:grid;place-items:center;background:var(--uabd-bg-blue);color:var(--uabd-blue);margin-bottom:.9rem}
.uabd-cattile__ic .material-symbols-outlined{font-size:22px}
.uabd-cattile__t{font-weight:700;font-size:1.05rem;color:var(--uabd-navy)}
.uabd-cattile__s{color:var(--uabd-text-secondary);font-size:.9rem;line-height:1.55;margin:.3rem 0 .9rem}
.uabd-cattile__n{margin-top:auto;font-family:var(--uabd-font-mono);font-size:.78rem;font-weight:600;color:var(--uabd-text-secondary);letter-spacing:.01em}
/* Finder entry. */
.uabd-finderbox{
display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:center;
background:var(--uabd-white);border:1px solid var(--uabd-border);
border-radius:var(--uabd-radius);padding:1.8rem
}
.uabd-finderbox__text h2{margin:.35rem 0 0;font-size:1.85rem}
.uabd-finderbox__text p{color:var(--uabd-text-secondary);margin:.6rem 0 0;font-size:1.02rem}
.uabd-finderbox__links{display:grid;gap:10px}
.uabd-findercta{
display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;
border:1px solid var(--uabd-border-strong);border-radius:var(--uabd-radius-sm);
text-decoration:none;color:var(--uabd-navy);background:var(--uabd-white);
transition:border-color .15s,box-shadow .15s
}
.uabd-findercta:hover{border-color:var(--uabd-blue);box-shadow:var(--uabd-shadow-sm)}
.uabd-findercta .material-symbols-outlined{font-size:22px;color:var(--uabd-blue);flex:none}
.uabd-findercta__t{display:block;font-weight:600;font-size:.95rem}
.uabd-findercta__n{display:block;font-family:var(--uabd-font-mono);font-size:.78rem;font-weight:600;color:var(--uabd-text-secondary)}
/* How this information is checked. */
.uabd-verify{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1.1rem}
.uabd-verifystep{background:var(--uabd-white);border:1px solid var(--uabd-border);border-radius:var(--uabd-radius);padding:1.2rem 1.3rem}
.uabd-verifystep__t{display:block;font-size:.9375rem;font-weight:700;color:var(--uabd-navy)}
.uabd-verifystep__s{display:block;font-size:.8125rem;color:var(--uabd-text-secondary);line-height:1.55;margin-top:.4rem}
.uabd-verify__note{margin-top:1.4rem}
/* Surfaces. Used sparingly — the page alternates white, wash, green, blue. */
.uabd-section--green{background:var(--uabd-bg-green)}
.uabd-section--blue{background:var(--uabd-bg-blue)}
/* A thin full-width band: the trust strip and the ad slot, neither of which is
a section in its own right. */
.uabd-section--strip{padding-block:1.2rem}
@media (max-width:1080px){
.uabd-finderbox{grid-template-columns:1fr;gap:24px;align-items:stretch}
}
@media (max-width:760px){
.uabd-hero2{padding-block:26px 28px}
.uabd-hero2__lede{font-size:.9375rem}
.uabd-usearch{margin-top:16px;padding:6px 6px 6px 12px}
.uabd-usearch__input{font-size:.9375rem}
.uabd-usearch__go{padding:.72rem .85rem}
/* Quick tasks stay tappable: two per row, 48px minimum. */
.uabd-tasks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.uabd-task{min-height:48px;padding:10px 12px;font-size:.8125rem}
.uabd-shead{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:1.2rem}
.uabd-shead__text h2{font-size:1.4rem}
.uabd-finderbox{padding:1.2rem}
.uabd-finderbox__text h2{font-size:1.4rem}
}
/* ---------- Cards / directory grid ---------- */
.uabd-grid{display:grid;gap:1.1rem}
/*
* P2-45. `repeat(auto-fit, minmax(300px, 1fr))` cannot produce a track narrower
* than 300px. Inside `.uabd-wrap`, whose content box is 273px at a 320px viewport,
* the track stays 300px and pushes the document past the viewport. The homepage
* free-tools grid did the same with a 320px minimum and overflowed by 16px.
*
* `min(300px, 100%)` is the fix, and it is a no-op everywhere the design already
* works: whenever the container is at least 300px wide, min() returns 300px and
* the tracks are byte-for-byte what they were. Only the narrow case changes, and
* there the track collapses to the container instead of escaping it.
*
* NOT `overflow-x:hidden`, which would hide the symptom and clip real content.
*/
.uabd-grid--3{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.uabd-grid--4{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
.uabd-card{display:flex;flex-direction:column;background:var(--uabd-surface);border:1px solid var(--uabd-line);
border-radius:var(--uabd-radius);padding:1.2rem;text-decoration:none;color:inherit;transition:.16s ease;box-shadow:var(--uabd-shadow-sm)}
.uabd-card:hover{border-color:var(--uabd-border-strong);box-shadow:var(--uabd-shadow)}
.uabd-card__logo{width:56px;height:56px;border-radius:var(--uabd-radius);object-fit:contain;background:#fff;border:1px solid var(--uabd-line);padding:6px;margin-bottom:.8rem}
.uabd-card__logo--ph{display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--uabd-accent);font-size:1.2rem;background:var(--uabd-bg)}
.uabd-card__name{font-weight:700;font-size:1.08rem;margin:0 0 .2rem}
.uabd-card__cta{color:var(--uabd-accent);font-weight:600;font-size:.86rem}
/* ---------- Single (bank/product) ---------- */
.uabd-single-hero{background:var(--uabd-ink);color:#fff;padding-block:clamp(2rem,5vw,3rem)}
.uabd-single-hero .uabd-breadcrumbs a,.uabd-single-hero .uabd-breadcrumbs{color:#a9bacb;font-size:.85rem;text-decoration:none}
.uabd-single-hero__row{display:flex;gap:1.2rem;align-items:center;margin-top:.8rem;flex-wrap:wrap}
.uabd-single-hero__logo{width:76px;height:76px;border-radius:var(--uabd-radius);background:#fff;object-fit:contain;padding:8px;flex:0 0 auto}
/* F.8: size removed — the finder's H1 now takes the site scale, 34px / 26px ≤760. It computed 38.4px at 1440. */
.uabd-single-hero h1{color:#fff;margin:0}
.uabd-single-hero__sub{color:#a9bacb;margin:.3rem 0 0}
.uabd-single-hero .uabd-chip{background:rgba(255,255,255,.12);color:#e6eef6}
.uabd-single-hero .uabd-chip:hover{background:rgba(255,255,255,.2);color:#fff}
.uabd-layout{display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:start}
.uabd-layout__main{min-width:0}
.uabd-layout__aside{position:sticky;top:90px;display:grid;gap:1.2rem}
.uabd-prose{font-size:1.03rem;line-height:1.7;color:var(--uabd-ink-soft)}
.uabd-prose h2{font-size:1.5rem;margin:2rem 0 .7rem}
.uabd-prose h3{font-size:1.2rem;margin:1.5rem 0 .5rem}
.uabd-prose>*:first-child{margin-top:0}
/* Footer refinements */
.uabd-footnote{font-size:.82rem;color:var(--uabd-muted);border-top:1px solid var(--uabd-line);margin-top:2rem;padding-top:1rem}
/* Trust strip */
.uabd-trust-strip{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;align-items:center;color:var(--uabd-muted);font-size:.9rem}
.uabd-trust-strip span{display:inline-flex;align-items:center;gap:.45rem}
.uabd-trust-strip .dot{width:6px;height:6px;border-radius:50%;background:var(--uabd-accent)}
/* Disclaimer band */
.uabd-disclaimer{background:var(--uabd-bg);border:1px solid var(--uabd-line);border-radius:var(--uabd-radius);
padding:1rem 1.2rem;font-size:.86rem;color:var(--uabd-muted);line-height:1.6;margin:1.5rem 0}
/* Responsive */
@media (max-width:900px){
.uabd-layout{grid-template-columns:1fr}
.uabd-layout__aside{position:static}
}
/* =========================================================================
STITCH PARITY — header, footer, and richer components ported from the
generated Stitch homepage so the running site matches the mockup.
========================================================================= */
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;
font-size:1.35em;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;
word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle}
/* Kadence chrome off (we render our own header/footer for parity) */
.uabd-body #wrapper>#masthead,.uabd-body #wrapper>#colophon,
.uabd-body .site-header,.uabd-body .site-footer{display:none!important}
.uabd-body{margin:0}
/* ==========================================================================
HEADER — F.2, Stitch three-tier information architecture.
Tier 1 navy utility bar design/v2/uabd-v2.css:127-136
Tier 2 white primary row (72px) design/v2/uabd-v2.css:138-163
Tier 3 navigation row design/v2/uabd-v2.css:165-172
Mobile design/v2/uabd-v2.css:495-508
Geometry is the frozen design's. Every colour is an F.1 token; none of the
frozen file's own variable names survive into this stylesheet.
========================================================================== */
/* Skip link. Off-screen until focused, then it lands over the utility bar. */
.uabd-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--uabd-navy);color:#fff;padding:10px 16px;font-weight:600;border-radius:0 0 var(--uabd-radius-sm) 0}
.uabd-skip:focus{left:0}
.uabd-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/*
* TIER 1 — utility bar.
*
* It sits outside `.uabd-header`, exactly as in `design/v2/_chrome.js`, so it
* scrolls away and the sticky element stays the white header alone. That is
* what keeps the persistent chrome to 72px + the nav row rather than 34px more.
*
* The left-hand line is a fixed coverage statement. There is no geolocation on
* this site and nothing here may imply one.
*/
.uabd-utility{background:var(--uabd-navy);color:var(--uabd-utility-text);font-size:.75rem;border-bottom:1px solid rgba(255,255,255,.08)}
.uabd-utility__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px}
.uabd-utility__loc{display:inline-flex;align-items:center;gap:6px}
/*
* The frozen file tints this glyph emerald. On navy that is about 1.2:1 — the
* icon is effectively invisible rather than subtle, so it takes the utility
* bar's own text colour (8.4:1 on navy) instead. Decorative, aria-hidden.
*/
.uabd-utility__loc .material-symbols-outlined{font-size:15px;color:var(--uabd-utility-text)}
.uabd-utility__links{display:flex;gap:18px}
.uabd-utility a{color:var(--uabd-utility-text);text-decoration:none}
.uabd-utility a:hover{color:#fff;text-decoration:underline}
/* TIER 2 — primary row: brand, global search, Compare, mobile toggle. */
.uabd-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--uabd-border);transition:box-shadow .2s}
.uabd-header.is-scrolled{box-shadow:var(--uabd-shadow-sm)}
.uabd-header__top{display:flex;align-items:center;gap:24px;min-height:72px}
.uabd-brand{display:inline-flex;align-items:center;gap:10px;color:var(--uabd-navy);text-decoration:none;flex:none}
.uabd-brand__mark{width:36px;height:36px;flex:none;border-radius:var(--uabd-radius);display:grid;place-items:center;background:linear-gradient(145deg,var(--uabd-navy),var(--uabd-navy-700));color:#fff}
.uabd-brand__mark .material-symbols-outlined{font-size:21px}
.uabd-brand__text{display:block;min-width:0}
.uabd-brand__name{display:block;font-weight:700;font-size:1.02rem;letter-spacing:-.02em;line-height:1.15}
.uabd-brand__sub{display:block;font-size:.625rem;font-weight:600;letter-spacing:.1em;color:var(--uabd-text-secondary);text-transform:uppercase}
/*
* Global search. A plain GET form; the pill is the styled control and the input
* inside it is borderless, so the ring belongs to the pill, not the input.
*/
/*
* `min-width:0` is load-bearing, not tidiness. A flex item's automatic minimum
* size is content-based, and this item is itself a flex container holding an
* , whose UA-default intrinsic width (~209px) sets that floor. Without
* it the pill refuses to shrink below 333px and pushes the document sideways at
* 320px — measured, on every route. The inner `min-width:0` on the input governs
* the inner layout only and does not reach this.
*/
.uabd-hsearch{flex:1;min-width:0;max-width:460px;display:flex;align-items:center;gap:8px;height:42px;padding:0 6px 0 12px;border:1px solid var(--uabd-border-strong);border-radius:var(--uabd-radius-sm);background:var(--uabd-bg-neutral);transition:border-color .15s,box-shadow .15s,background .15s}
.uabd-hsearch:focus-within{background:#fff;border-color:var(--uabd-blue);box-shadow:var(--uabd-focus-ring)}
.uabd-hsearch .material-symbols-outlined{font-size:20px;color:var(--uabd-text-secondary);flex:none}
.uabd-hsearch__input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:.875rem;color:var(--uabd-text);outline:0}
.uabd-hsearch__input::placeholder{color:var(--uabd-text-secondary)}
.uabd-hsearch__input:focus-visible{outline:0;box-shadow:none}
.uabd-hsearch__input::-webkit-search-cancel-button{cursor:pointer}
.uabd-hsearch__go{height:30px;padding:0 14px;border-radius:5px;font-size:.8125rem;flex:none}
.uabd-header__actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.uabd-header__compare{display:inline-flex;align-items:center;height:38px;padding:0 16px;font-size:.875rem}
.uabd-navtoggle{display:none;width:42px;height:42px;padding:0;background:#fff;border:1px solid var(--uabd-border-strong);border-radius:var(--uabd-radius-sm);color:var(--uabd-navy);cursor:pointer}
.uabd-navtoggle .material-symbols-outlined{font-size:1.5rem}
/*
* TIER 3 — primary navigation.
*
* `flex-wrap:wrap` is a deliberate divergence from the frozen file, which
* scrolls the list inside itself below 1080px. In the mockup that rule is a
* dormant safety net — eight short items on a full-width row never reach it.
* Here it was load-bearing concealment (P2-42): items scrolled out of reach
* inside a box with no visible scrollbar and every document-level sweep
* reported the header clean. Wrapping keeps every item visible; scrolling did
* not.
*
* Link padding is the frozen `13px 14px`. F.2 had trimmed it to 12px, and to
* 10px at <=1080, because the menu fell to two lines below ~1094px — past the
* frozen 1080 breakpoint. That was never the menu's fault: the container gutter
* was `clamp(16px,4vw,40px)` against the frozen flat 24px, which left the row
* 985px at 1080 where the frozen design gives it 1032px. F.2R fixed the gutter
* (P2-86), so the workaround is removed rather than kept — a workaround outlives
* its cause only by accident.
*/
.uabd-nav{border-top:1px solid var(--uabd-border)}
.uabd-nav__list{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;list-style:none;margin:0;padding:0}
.uabd-nav__list a{display:block;padding:13px 14px;font-size:.875rem;font-weight:600;color:var(--uabd-text);text-decoration:none;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.uabd-nav__list a:hover{color:var(--uabd-blue);border-bottom-color:var(--uabd-blue)}
.uabd-nav__list .is-active>a,
.uabd-nav__list .current-menu-item>a,
.uabd-nav__list a[aria-current]{color:var(--uabd-blue);border-bottom-color:var(--uabd-blue)}
/* Mobile panel — primary menu plus the utility links the navy bar hides. */
.uabd-mobilenav{border-top:1px solid var(--uabd-border);background:#fff}
.uabd-mobilenav .uabd-wrap{padding-block:4px 12px}
.uabd-mobilenav__list{list-style:none;margin:0;padding:0}
.uabd-mobilenav__list li{border-bottom:1px solid var(--uabd-border)}
.uabd-mobilenav__list a{display:block;padding:.9rem .2rem;color:var(--uabd-text);text-decoration:none;font-weight:600}
.uabd-mobilenav__list a:hover{color:var(--uabd-blue)}
.uabd-mobilenav__list .is-active>a,
.uabd-mobilenav__list .current-menu-item>a,
.uabd-mobilenav__list a[aria-current]{color:var(--uabd-blue)}
.uabd-mobilenav__list--utility a{font-weight:500;color:var(--uabd-text-secondary)}
.uabd-mobilenav__list--utility li:last-child{border-bottom:0}
/*
* Keyboard focus must stay visible — a closure condition carried over from
* P2-42. Kadence ships `hide-focus-outline` on and strips it with JS on
* the first Tab; its rule is wrapped in `:where()` and so carries no
* specificity, which means a ring of our own wins and does not depend on that
* script running at all.
*/
.uabd-header a:focus-visible,.uabd-header button:focus-visible,
.uabd-utility a:focus-visible,
.uabd-mobilenav a:focus-visible{outline:2px solid var(--uabd-blue);outline-offset:2px;border-radius:3px}
.uabd-utility a:focus-visible{outline-color:#fff}
/*
* F.2R (P2-86). There is no <=1080px header block any more. F.2 had one — a
* 16px row gap and a 340px cap on the search field — added to buy room back
* from the 40px gutter. The frozen file has no such rule, the gutter is fixed,
* and the primary row measures 1017px of usable width at 1080 against roughly
* 790px of content, so the cap only shortened the search field for nothing.
* Removed rather than kept: see the nav-padding note above.
*/
/*
* Frozen (uabd-v2.css:495-508): utility links hidden, top row 60px, search
* hidden, Compare hidden, toggle shown, nav hidden.
*
* One divergence, and it is the search. The frozen file hides `.uabd-hsearch`
* outright under the comment "search moves under it", because those mockups
* carry a fixed bottom `.uabd-mobilebar` whose fifth entry is Search. This
* theme has no mobile bar, so hiding the field would leave the mobile header
* with no search at all. The frozen comment's stated intent is implemented
* instead: the field moves to its own full-width line beneath the brand. It is
* always present, so it needs no JavaScript to reach.
*/
@media (max-width:760px){
.uabd-utility__links{display:none}
.uabd-utility__loc{font-size:.6875rem}
.uabd-header__top{flex-wrap:wrap;gap:10px;min-height:60px;padding-block:9px}
.uabd-brand__sub{display:none}
.uabd-brand__name{font-size:.95rem}
.uabd-hsearch{order:3;flex-basis:100%;max-width:none}
.uabd-hsearch__go{padding:0 12px}
.uabd-header__compare{display:none}
.uabd-navtoggle{display:grid;place-items:center}
.uabd-nav{display:none}
}
/* Trust strip with icons */
.uabd-trust-strip .material-symbols-outlined{font-size:1.2rem}
.uabd-trust-strip .ic-ok{color:var(--uabd-ok);font-variation-settings:'FILL' 1}
.uabd-trust-strip .ic-teal{color:var(--uabd-accent)}
/* Section rhythm is a single token now; the mobile step is set at 760px. */
/* Product cards with image top + category badge */
.uabd-pcard{background:var(--uabd-white);border:1px solid var(--uabd-border);border-radius:var(--uabd-radius);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:box-shadow .18s}
.uabd-pcard:hover{border-color:var(--uabd-border-strong);box-shadow:var(--uabd-shadow)}
.uabd-pcard__media{height:180px;background:linear-gradient(135deg,var(--uabd-navy),var(--uabd-blue));position:relative;display:flex;align-items:center;justify-content:center}
.uabd-pcard__media .material-symbols-outlined{color:rgba(255,255,255,.85);font-size:3rem}
.uabd-pcard__badge{position:absolute;top:1rem;left:1rem;color:#fff;padding:.2rem .6rem;border-radius:6px;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.uabd-pcard__badge--teal{background:var(--uabd-accent)}
.uabd-pcard__badge--amber{background:var(--uabd-accent2)}
.uabd-pcard__badge--indigo{background:#4f46e5}
.uabd-pcard__body{padding:1.25rem 1.4rem}
.uabd-pcard__bank{color:var(--uabd-muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:0 0 .35rem}
.uabd-pcard__name{font-size:1.1rem;font-weight:700;margin:0 0 1rem}
.uabd-pcard__foot{display:flex;justify-content:space-between;align-items:center;padding-top:.9rem;border-top:1px solid var(--uabd-line)}
/* F.9 accessibility pass: #94a3b8 on the card's #f8fafc foot measured 2.45:1
(the area line on every cash-machine card). The muted token is 4.76:1. */
.uabd-pcard__fee small{display:block;color:var(--uabd-muted);font-size:.7rem}
.uabd-pcard__fee b{font-size:.9rem}
.uabd-pcard__link{color:var(--uabd-accent);font-weight:700;font-size:.85rem}
/* Bank card: chip top-right + view row (align with Stitch) */
.uabd-card__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}
.uabd-chip--type{background:#f1f5f9;color:#475569;text-transform:uppercase;letter-spacing:.04em;font-size:.68rem;margin:0}
.uabd-chip--islamic{background:#ecfdf5;color:#047857}
/* Tool cards with icon circle */
.uabd-toolcard{background:#fff;border:1px solid var(--uabd-line);border-radius:var(--uabd-radius);padding:1.6rem 1.7rem;box-shadow:var(--uabd-shadow-sm)}
.uabd-toolcard__head{display:flex;align-items:center;gap:.85rem;margin-bottom:1.25rem}
.uabd-toolcard__ic{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.uabd-toolcard__ic--teal{background:var(--uabd-bg-blue);color:var(--uabd-accent)}
.uabd-toolcard__ic--amber{background:var(--uabd-bg-green);color:var(--uabd-accent2)}
.uabd-toolcard__ic .material-symbols-outlined{font-size:1.5rem}
.uabd-toolcard__head h3{margin:0;font-size:1.15rem}
.uabd-toolcard__head p{margin:.1rem 0 0;color:var(--uabd-muted);font-size:.85rem}
/* Guide cards with aspect-video media */
.uabd-guide{display:block;text-decoration:none;color:inherit;group:hover}
.uabd-guide__media{aspect-ratio:16/9;border-radius:var(--uabd-radius);overflow:hidden;background:linear-gradient(135deg,var(--uabd-navy),var(--uabd-blue));margin-bottom:1.1rem;display:flex;align-items:center;justify-content:center}
.uabd-guide__media .material-symbols-outlined{color:rgba(255,255,255,.7);font-size:2.6rem}
.uabd-guide__title{font-size:1.2rem;font-weight:700;line-height:1.3;margin:0 0 .5rem;transition:color .15s}
.uabd-guide:hover .uabd-guide__title{color:var(--uabd-accent)}
.uabd-guide__excerpt{color:var(--uabd-muted);margin:0}
/* EMI result box (navy) */
.uabd-emi__result{background:var(--uabd-ink);color:#fff;padding:1.3rem;border-radius:var(--uabd-radius);text-align:center;margin-top:.4rem}
.uabd-emi__result .k{color:#94a3b8;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.25rem}
.uabd-emi__result .v{font-size:1.9rem;font-weight:800}
/* Footer (Stitch dark) */
/* Footer — F.7. The navy token, light text measured for AA on it (#94A3B8 is
6.4:1 on #0B1F3A; the old #64748B tag line was 3.3:1 and now uses the
utility-text token), H3 group titles under a visually hidden H2 (P2-88). */
.uabd-footer{background:var(--uabd-navy);color:#cbd5e1;padding:56px 0 28px;margin-top:0}
.uabd-footer__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,4fr);gap:48px}
.uabd-footer__name{display:flex;align-items:center;gap:.5rem;color:#fff;font-weight:800;font-size:1.15rem;margin:0 0 .9rem}
.uabd-footer__brand p{max-width:36ch;line-height:1.7;color:#94a3b8;font-size:.9rem;margin:0}
.uabd-footer__nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.uabd-footer__h{color:#fff;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 .9rem;line-height:1.3}
.uabd-footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.uabd-footer__col a{display:inline-block;padding:5px 0;color:#94a3b8;text-decoration:none;font-size:.9rem;line-height:1.45}
.uabd-footer__col a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.uabd-footer a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:3px;color:#fff}
.uabd-footer__base{border-top:1px solid #24344d;margin-top:40px;padding-top:24px;text-align:center}
.uabd-footer__tag{color:var(--uabd-utility-text);font-size:.6875rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin:0 0 .6rem}
.uabd-footer__copy{color:#94a3b8;font-size:.8rem;line-height:1.6;margin:0;max-width:70ch;margin-inline:auto}
@media (max-width:1080px){
.uabd-footer__grid{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:760px){.uabd-footer{padding:40px 0 24px}.uabd-footer__nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}.uabd-footer__col a{padding:8px 0}}
/* ---------- Bank/product single detail sections (Stitch parity) ---------- */
.uabd-block{margin:0 0 2.2rem}
.uabd-block__h{display:flex;align-items:center;gap:.5rem;font-size:1.35rem;font-weight:700;margin:0 0 1rem}
.uabd-block__h .material-symbols-outlined{color:var(--uabd-accent);font-size:1.4rem}
/* Info table (SWIFT, hours) */
.uabd-itable{width:100%;border-collapse:collapse;border:1px solid var(--uabd-line);border-radius:var(--uabd-radius);overflow:hidden;font-size:.95rem}
.uabd-itable th,.uabd-itable td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--uabd-line)}
.uabd-itable thead th{background:#f7f9fc;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--uabd-muted)}
.uabd-itable tbody tr:last-child td{border-bottom:0}
/* F.4R (P2-95). The theme itself hard-coded the stack here, at higher specificity
(0,2,0) than the F.1 `.mono` rule, so every data cell of every info table —
the SWIFT directory included — escaped the data face. F.1 missed it because its
token test read declarations, not the computed font. */
.uabd-itable .mono{font-family:var(--uabd-font-mono);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;font-weight:600;color:var(--uabd-ink)}
.uabd-itable .muted{color:var(--uabd-muted)}
/* Stacked row cards below 760px — scoped to tables that opt in with --stack.
Mirrors the frozen .uabd-ftable rule in design/v2/uabd-v2-carddetail.css:
the header is hidden and each cell names itself from data-l, so a four-column
directory reads as a list of cards instead of running off the viewport.
Deliberately NOT applied to .uabd-itable generally: the bank-detail SWIFT,
hours and holidays tables are two and three columns and already fit. */
@media (max-width:760px){
.uabd-itable--stack,
.uabd-itable--stack tbody,
.uabd-itable--stack tr,
.uabd-itable--stack td{display:block;width:100%}
.uabd-itable--stack thead{display:none}
.uabd-itable--stack tr{border-bottom:1px solid var(--uabd-line);padding:.85rem 1rem}
.uabd-itable--stack tbody tr:last-child{border-bottom:0}
.uabd-itable--stack td{border:0;padding:0}
.uabd-itable--stack td+td{margin-top:.45rem}
.uabd-itable--stack td::before{
content:attr(data-l);display:block;font-size:.5625rem;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;color:var(--uabd-muted);margin-bottom:2px
}
/* Long codes and status sentences wrap rather than push the row wider. */
.uabd-itable--stack td,
.uabd-itable--stack .mono{overflow-wrap:anywhere}
}
.uabd-note{font-size:.85rem;color:var(--uabd-accent2);margin:.6rem 0 0;display:flex;align-items:center;gap:.4rem}
/* Numbered steps */
.uabd-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;list-style:none;margin:0;padding:0;counter-reset:s}
.uabd-steps li{background:#fff;border:1px solid var(--uabd-line);border-radius:var(--uabd-radius);padding:1.1rem;position:relative}
.uabd-steps li::before{counter-increment:s;content:counter(s);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--uabd-bg-blue);color:var(--uabd-accent);font-weight:800;font-size:.85rem;margin-bottom:.6rem}
.uabd-steps b{display:block;margin-bottom:.2rem}
.uabd-steps span{color:var(--uabd-muted);font-size:.88rem}
/* Sidebar assistance card */
.uabd-help-card{background:var(--uabd-ink);color:#fff;border-radius:var(--uabd-radius);padding:1.2rem 1.3rem}
.uabd-help-card h4{color:#fff;margin:0 0 .3rem;font-size:1.05rem}
.uabd-help-card p{color:#94a3b8;font-size:.85rem;margin:0 0 .9rem}
.uabd-help-card a{display:flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none;padding:.5rem 0;border-top:1px solid #24344d;font-weight:600}
.uabd-help-card a .material-symbols-outlined{color:var(--uabd-accent);font-size:1.2rem}
/* Benefits checklist */
.uabd-checklist{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.uabd-checklist li{display:flex;gap:.6rem;align-items:flex-start}
.uabd-checklist .material-symbols-outlined{color:var(--uabd-accent);font-variation-settings:'FILL' 1;font-size:1.25rem;flex:0 0 auto}
.uabd-verified-line{display:flex;align-items:center;gap:.35rem;color:var(--uabd-muted);font-size:.78rem;margin-top:.6rem}
.uabd-verified-line .material-symbols-outlined{color:var(--uabd-ok);font-size:1rem;font-variation-settings:'FILL' 1}
/* Share/compare hero buttons */
.uabd-hero-actions{display:flex;gap:.6rem;margin-top:1rem}
.uabd-hero-actions .uabd-btn{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}
.uabd-hero-actions .uabd-btn:hover{background:rgba(255,255,255,.2)}
/* Ad slots — F.7 (P2-103). A slot whose zone rendered nothing (no ad code, not
previewing) takes no space: the wrapper collapses, and so does the homepage's
ad band around it. A filled zone keeps its reserved height (uabd-ad.css). */
.uabd-ad-slot{width:100%}
.uabd-ad-slot:empty{display:none}
.uabd-section--strip:has(> .uabd-ad-slot:empty){display:none}
.uabd-ad-slot--footer{padding-bottom:1.5rem}
.uabd-ad-slot--identity .uabd-ad{margin-block:20px 0}
/* Skip link target (F.7). The header is sticky, so a jump to put the
breadcrumb or H1 underneath it: 113px tall at ≤760, 175px at 761–1079 where
the navigation wraps, 124px above. The margin clears it at each size. */
#uabd-content{scroll-margin-top:132px}
@media (max-width:1079px){#uabd-content{scroll-margin-top:184px}}
@media (max-width:760px){#uabd-content{scroll-margin-top:121px}}
/* ==========================================================================
Branch finder — D.9B
Ported from the approved design/v2/uabd-v2-locations.css `.uabd-finder2`
block, with design/v2's token names mapped onto the production ones
(--border-2 -> --uabd-line, --text-2 -> --uabd-muted, --blue -> --uabd-accent,
--r -> --uabd-radius, --r-sm -> --uabd-radius-sm). No geometry, no spacing and
no breakpoint was changed; design/v2 itself is untouched.
========================================================================== */
.uabd-finder2{background:var(--uabd-surface);border:1px solid var(--uabd-line);border-radius:var(--uabd-radius);
padding:16px 18px;box-shadow:var(--uabd-shadow);margin-top:22px;text-align:left}
.uabd-finder2__grid{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr auto;gap:10px;align-items:end}
.uabd-finder2 .uabd-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.uabd-finder2 .uabd-field label{color:var(--uabd-muted);font-size:.78rem;font-weight:600;letter-spacing:.01em}
.uabd-finder2 .uabd-field select,
.uabd-finder2 .uabd-field input{width:100%;max-width:100%;font:inherit;font-size:.875rem;color:var(--uabd-ink);
background:var(--uabd-surface);border:1px solid var(--uabd-line);border-radius:var(--uabd-radius-sm);padding:10px 12px}
.uabd-finder2 .uabd-field select{appearance:none;padding-right:30px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235f6b7a'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 9px center;background-size:17px}
.uabd-finder2 .uabd-field select:disabled{background-color:var(--uabd-bg-2);color:var(--uabd-muted);cursor:not-allowed}
.uabd-finder2 .uabd-field select:focus-visible,
.uabd-finder2 .uabd-field input:focus-visible{outline:3px solid var(--uabd-accent);outline-offset:1px}
.uabd-field__note{font-weight:500;color:var(--uabd-muted)}
/* The Area note lives on the label line, not under the control: the grid is
align-items:end, so a note below would bottom-align that one field and lift
its select out of line with the other three. */
/* The size the approved design gives the finder's submit button
(design/v2/uabd-v2.css:111). Ported verbatim. */
.uabd-btn--lg{padding:14px 24px;font-size:.95rem}
.uabd-finder2__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;
border-top:1px solid var(--uabd-line)}
.uabd-clear{font-size:.8125rem;font-weight:600;color:var(--uabd-accent);text-decoration:none}
.uabd-clear:hover{text-decoration:underline}
.uabd-discover{margin-top:18px;text-align:left}
/* F.9 accessibility pass: the label sits on the finder's dark hero (#162033),
where the muted token measured 3.27:1. #cbd5e1 there is well above 4.5:1. */
.uabd-discover__label{font-size:.78rem;font-weight:700;color:#cbd5e1;margin-right:.5rem}
.uabd-chip.is-active{background:var(--uabd-accent);color:#fff;border-color:var(--uabd-accent)}
.uabd-rtoolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--uabd-line)}
.uabd-rtoolbar__count{font-size:.875rem;font-weight:600;color:var(--uabd-ink-soft)}
/* The approved design collapses to two columns at 1080 and one at 760 — the
project's two existing breakpoints. No third layout is introduced. */
@media (max-width:1080px){.uabd-finder2__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
.uabd-finder2{padding:14px;margin-top:16px}
.uabd-finder2__grid{grid-template-columns:1fr}
.uabd-finder2__grid .uabd-btn{width:100%;justify-content:center}
}
/* The hero is navy: the finder sits on it as a white card, so its own text must
not inherit the hero's white. */
.uabd-single-hero .uabd-finder2,
.uabd-single-hero .uabd-finder2 .uabd-field label{color:var(--uabd-ink)}
.uabd-single-hero .uabd-finder2 .uabd-field label{color:var(--uabd-muted)}
/* A self-service result — D.11.
Same card, deliberately not a link: there is no ATM page to go to. The hover
lift is removed so it never invites a click it cannot answer, and the tint
separates it at a glance from a branch card, which IS a destination. */
.uabd-pcard--static{cursor:default;background:var(--uabd-bg)}
.uabd-pcard--static:hover{box-shadow:none}
.uabd-pcard--static .uabd-pcard__foot .uabd-chip{margin:0}
/* Official product artwork — D.12.
Reuses the approved `uabd-pcard__media` block. `contain` keeps the card whole:
`cover` would crop a payment card's edges, which is the one thing artwork must
not do. The container height is fixed so the grid does not shift as images
arrive, and the gradient only shows where a bank publishes no artwork. */
.uabd-pcard__media--art{height:170px;background:var(--uabd-bg-2);display:flex;align-items:center;justify-content:center;padding:1rem}
.uabd-pcard__art{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.uabd-single-art{margin:0 0 1.5rem;padding:1.25rem;background:var(--uabd-bg-2);border:1px solid var(--uabd-line);
border-radius:var(--uabd-radius);display:flex;align-items:center;justify-content:center}
.uabd-single-art__img{max-width:min(420px,100%);height:auto;object-fit:contain;display:block}
/* A bank logo is a wordmark in a square slot: never stretch it to fill. */
.uabd-card__logo,.uabd-single-hero__logo{object-fit:contain}
/* ==========================================================================
* Focus — F.1
*
* A real outline AND the Stitch ring. The ring alone disappears in Windows
* high-contrast / forced-colors mode, where box-shadow is dropped but outline
* survives, so the outline is the accessible floor and the ring is the brand
* treatment on top. Native focus is never removed without this replacement.
* ========================================================================== */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
outline:2px solid var(--uabd-blue);outline-offset:2px;box-shadow:var(--uabd-focus-ring)
}
/* Mobile section rhythm and gutter, on the established 760px boundary. */
@media (max-width:760px){
/* Frozen: design/v2/uabd-v2.css:498. F.2R (P2-86). */
.uabd-wrap{padding-inline:16px}
.uabd-section{padding-block:var(--uabd-section-y-mobile)}
h1,.uabd-h1,.uabd-hero2 h1{font-size:26px}
}
/* ==========================================================================
* DIRECTORY ARCHIVES — F.4
*
* One grammar for /banks/, /credit-cards/, /bank-accounts/, /loans-finance/
* (and, by inheritance, /offers/ and the /finance-type/ filter pages):
*
* compact header -> result bar -> [real filter] -> card grid -> pagination
*
* and one card anatomy, taken from the Stitch archive screens:
*
* visual well -> issuer + tag -> name -> label/value pairs -> checked + CTA
*
* Labels are small, upper-case and muted; figures are prominent and set in the
* F.1 mono with tabular numerals; states such as "To verify" are set in the UI
* face so they never read as a number. Every colour, radius and shadow is an
* F.1 token. Nothing here depends on a record having more data than it has:
* an absent pair is simply not drawn, and the grid does not reserve space for it.
* ========================================================================== */
/* Header — replaces the full-bleed navy band on the directory archives. */
.uabd-arch-head{background:var(--uabd-bg-blue);border-bottom:1px solid var(--uabd-border);padding-block:36px 30px}
.uabd-arch-head h1{margin:.35rem 0 0;line-height:1.15}
.uabd-arch-head__lede{color:var(--uabd-text-secondary);font-size:1.02rem;line-height:1.6;margin:.6rem 0 0;max-width:720px}
.uabd-section.uabd-arch{padding-top:28px}
/* Result bar: live count on the left, the fixed order stated in words on the right. */
.uabd-arch-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem 1.25rem;
padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--uabd-border)}
.uabd-arch-bar p{margin:0}
.uabd-arch-bar__count{font-weight:600;font-size:.95rem;color:var(--uabd-navy)}
.uabd-arch-bar__order{font-size:.85rem;color:var(--uabd-text-secondary)}
/* The one real filter (finance type). The current option is marked by
aria-current AND a heavier border, so its state is not carried by colour. */
.uabd-arch-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.uabd-arch-filter__opt{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 14px;
border:1px solid var(--uabd-border-strong);border-radius:var(--uabd-radius-sm);background:#fff;
color:var(--uabd-navy);font-size:.875rem;font-weight:600;text-decoration:none;transition:border-color .15s,color .15s}
.uabd-arch-filter__opt .uabd-num{font-size:.78rem;color:var(--uabd-text-secondary);font-weight:500}
.uabd-arch-filter__opt:hover{border-color:var(--uabd-blue);color:var(--uabd-blue)}
.uabd-arch-filter__opt[aria-current]{background:var(--uabd-bg-blue);border-color:var(--uabd-blue);color:var(--uabd-blue);box-shadow:inset 0 0 0 1px var(--uabd-blue)}
/* Grid: the shared clamped track (P2-43 — see test-archives.php). Cards in a
row share a height; the footer is pushed to the bottom so CTAs align. */
.uabd-arch__grid{align-items:stretch}
.uabd-arch__ad{margin-top:1.5rem}
/* ---------- Product card (cards, accounts, finance; offers and branches inherit) */
.uabd-pcard__body{display:flex;flex-direction:column;flex:1;padding:1.15rem 1.3rem 1.1rem}
.uabd-pcard__top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.35rem .6rem;margin:0 0 .35rem}
.uabd-pcard__top .uabd-pcard__bank{margin:0}
.uabd-pcard__tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.4;
padding:.12rem .5rem;border-radius:var(--uabd-radius-badge);background:var(--uabd-bg-blue);color:var(--uabd-blue)}
.uabd-pcard__name{font-size:1.05rem;line-height:1.3;margin:0 0 .9rem;overflow-wrap:anywhere}
.uabd-pcard__media--art{height:150px}
/* Label / value pairs — shared by the product and bank cards. */
.uabd-pcard__facts,.uabd-card__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(128px,100%),1fr));gap:.8rem 1rem;margin:0 0 1rem}
.uabd-pcard__fact,.uabd-card__fact{min-width:0}
.uabd-pcard__fact dt,.uabd-card__fact dt{margin:0 0 .2rem;font-size:11px;font-weight:600;line-height:1.35;
text-transform:uppercase;letter-spacing:.04em;color:var(--uabd-text-secondary)}
.uabd-pcard__fact dd,.uabd-card__fact dd{margin:0}
.uabd-pcard__figure{font-size:1rem;font-weight:700;line-height:1.3;color:var(--uabd-navy);overflow-wrap:anywhere}
/* The amount never breaks mid-figure; the VAT qualifier is prose, so it is set
in the UI face and may wrap to the next line on its own. */
.uabd-pcard__amount{white-space:nowrap}
.uabd-pcard__qual{font-family:var(--uabd-font-sans);font-size:.75rem;font-weight:500;color:var(--uabd-text-secondary)}
/* A state is a sentence, not a number: UI face, lighter, clamped on the card
(the full wording is on the detail page, and screen readers get all of it). */
.uabd-pcard__figure--state,.uabd-card__state{font-family:var(--uabd-font-sans);font-size:.875rem;font-weight:600;
color:var(--uabd-text-secondary);line-height:1.4;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.uabd-pcard__note{margin:.2rem 0 0;font-size:.75rem;line-height:1.4;color:var(--uabd-text-secondary);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Footer: checked date and CTA, pinned to the bottom of the card. */
.uabd-pcard__foot{margin-top:auto;flex-wrap:wrap;gap:.5rem 1rem}
.uabd-pcard__checked{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;color:var(--uabd-text-secondary)}
.uabd-pcard__checked .material-symbols-outlined{font-size:1rem;color:var(--uabd-green);font-variation-settings:'FILL' 1}
.uabd-pcard__link{white-space:nowrap}
/* ---------- Bank card: institution first, no figures, one fact. */
.uabd-bankcard{padding:1.15rem 1.3rem 1.1rem}
.uabd-bankcard .uabd-card__top{margin-bottom:.85rem}
.uabd-bankcard .uabd-card__logo{margin-bottom:0}
.uabd-bankcard .uabd-card__name{margin:0 0 .85rem;overflow-wrap:anywhere}
.uabd-card__fact .uabd-code{font-family:var(--uabd-font-mono);font-size:.95rem;font-weight:700;color:var(--uabd-navy);
background:none;padding:0;letter-spacing:.01em}
.uabd-card__foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;
padding-top:.8rem;border-top:1px solid var(--uabd-border)}
.uabd-card__foot .uabd-verified-line{margin:0}
.uabd-card__cta{white-space:nowrap}
/* ---------- Pagination: restyled only; URLs, page size and canonicals untouched. */
.uabd-pages{margin-top:2rem}
.uabd-pages .nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.uabd-pages .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;
border:1px solid var(--uabd-border-strong);border-radius:var(--uabd-radius-sm);background:#fff;
color:var(--uabd-navy);font-weight:600;font-size:.9rem;text-decoration:none;line-height:1}
.uabd-pages .page-numbers:not(.prev):not(.next):not(.dots){font-family:var(--uabd-font-mono);font-variant-numeric:tabular-nums}
.uabd-pages a.page-numbers:hover{border-color:var(--uabd-blue);color:var(--uabd-blue)}
.uabd-pages .page-numbers.current{background:var(--uabd-navy);border-color:var(--uabd-navy);color:#fff}
.uabd-pages .page-numbers.dots{border-color:transparent;background:none;min-width:24px}
@media (max-width:760px){
.uabd-arch-head{padding-block:24px 22px}
.uabd-arch-head__lede{font-size:.95rem}
.uabd-section.uabd-arch{padding-top:20px}
.uabd-pcard__body,.uabd-bankcard{padding:1rem 1.05rem}
.uabd-pcard__media--art{height:120px}
.uabd-pages .page-numbers{min-width:44px;padding:0 10px}
}
/* ==========================================================================
ENTITY DETAIL PAGES — F.5
Bank, card, account, finance, offer and branch singles share one shell:
breadcrumb strip, identity panel, detail cards, the table system, the
source block. Built from the Stitch detail screens (card, account, finance,
bank profile) and the F.1 tokens. New classes only, so the /branches/
finder's .uabd-single-hero and the archive cards are untouched.
========================================================================== */
/* ---------- Breadcrumb strip: its own band under the header, never inside a hero. */
.uabd-crumbs{background:var(--uabd-bg-neutral);border-bottom:1px solid var(--uabd-border)}
.uabd-crumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;list-style:none;margin:0;padding:10px 0;
font-size:12px;line-height:1.5;color:var(--uabd-text-secondary)}
.uabd-crumbs__item{display:inline-flex;align-items:center;gap:8px;min-width:0}
.uabd-crumbs__item+.uabd-crumbs__item::before{content:"/";content:"/" / "";color:var(--uabd-muted-chrome)}
.uabd-crumbs__list a{color:var(--uabd-text-secondary);text-decoration:none}
.uabd-crumbs__list a:hover{color:var(--uabd-navy);text-decoration:underline}
.uabd-crumbs__current{color:var(--uabd-text);font-weight:600;overflow-wrap:anywhere}
/* ---------- Identity panel */
.uabd-dhead{padding-top:24px}
.uabd-dhead__panel{background:var(--uabd-bg-blue);border:1px solid var(--uabd-border);border-radius:var(--uabd-radius);
box-shadow:var(--uabd-shadow-sm);padding:28px 32px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.uabd-dhead__panel--art{grid-template-columns:280px minmax(0,1fr)}
.uabd-dhead__panel--bank{grid-template-columns:84px minmax(0,1fr);gap:24px}
.uabd-dhead__art{margin:0;aspect-ratio:1.586/1;background:#fff;border:1px solid var(--uabd-border);border-radius:var(--uabd-radius);
display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}
.uabd-dhead__art-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.uabd-dhead__logo{width:84px;height:84px;border-radius:var(--uabd-radius);background:#fff;border:1px solid var(--uabd-border);
object-fit:contain;padding:8px;display:block}
.uabd-dhead__logo--on-dark,.uabd-card__logo--on-dark{background:var(--uabd-navy);border-color:var(--uabd-navy)}
.uabd-dhead__logo--ph{display:flex;align-items:center;justify-content:center;border-style:dashed;border-color:var(--uabd-border-strong);
color:var(--uabd-navy);font-weight:800;font-size:1.4rem;letter-spacing:.02em}
.uabd-dhead__body{min-width:0}
.uabd-dhead__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;font-size:11px;line-height:1.4}
.uabd-dhead__issuer{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--uabd-blue);text-decoration:none}
.uabd-dhead__issuer:hover{text-decoration:underline}
.uabd-dhead__kind{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--uabd-radius-badge);font-weight:700;
text-transform:uppercase;letter-spacing:.03em;background:#fff;color:var(--uabd-navy);border:1px solid var(--uabd-border-strong)}
.uabd-dhead__checked{display:inline-flex;align-items:center;gap:4px;margin-left:auto;color:var(--uabd-green);font-weight:600}
.uabd-dhead__checked .material-symbols-outlined{font-size:15px;font-variation-settings:"FILL" 1}
.uabd-dhead__h1{margin:0 0 16px;line-height:1.15;overflow-wrap:anywhere}
/* Key figures. The figure is data (mono); a state is a sentence (UI face). */
.uabd-kfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0}
.uabd-kfact{background:#fff;border:1px solid var(--uabd-border);border-radius:var(--uabd-radius-sm);padding:14px;box-shadow:var(--uabd-shadow-sm);min-width:0}
.uabd-kfact__l{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--uabd-text-secondary);margin:0 0 4px}
.uabd-kfact__v{margin:0;color:var(--uabd-navy);font-size:1.3rem;font-weight:700;line-height:1.25}
.uabd-kfact__v .uabd-num,.uabd-kfact__v .uabd-code{font-family:var(--uabd-font-mono);white-space:nowrap;color:var(--uabd-navy);text-decoration:none;
background:none;padding:0;font-size:inherit;font-weight:700}
.uabd-kfact__v--state,.uabd-kfact__v--text{font-size:.95rem;font-weight:600}
.uabd-kfact__v--text a{overflow-wrap:anywhere}
.uabd-kfact__q{font-family:var(--uabd-font-sans);font-size:12px;font-weight:600;color:var(--uabd-text-secondary)}
.uabd-kfact__note{margin:4px 0 0;font-size:11.5px;line-height:1.4;color:var(--uabd-text-secondary)}
/* ---------- Detail body and cards */
.uabd-section.uabd-dbody{padding-block:28px 48px}
.uabd-dcard{background:#fff;border:1px solid var(--uabd-border);border-radius:var(--uabd-radius);box-shadow:var(--uabd-shadow-sm);
padding:24px;margin:0 0 24px;min-width:0}
.uabd-dcard__head{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--uabd-border)}
.uabd-dcard__h{font-size:1.125rem;font-weight:700;color:var(--uabd-navy);margin:0;line-height:1.3}
.uabd-dcard__sub{font-size:12.5px;color:var(--uabd-text-secondary);margin:4px 0 0;line-height:1.5}
.uabd-dcard__foot{font-size:12.5px;color:var(--uabd-text-secondary);margin:14px 0 0}
.uabd-dcard .uabd-note{margin-top:12px}
.uabd-outlink{margin:0 0 24px;font-weight:600}
/* The reading face for anything that is a state rather than a figure — even
inside a data cell, so "Not published by the bank" never reads as a code. */
.uabd-state{font-family:var(--uabd-font-sans);font-weight:500;font-style:normal;color:var(--uabd-text-secondary);
letter-spacing:normal;white-space:normal}
.uabd-itable .mono .uabd-state{font-weight:500;color:var(--uabd-text-secondary)}
.uabd-swift-state{margin:0;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.uabd-swift-state .uabd-state{font-weight:700;color:var(--uabd-text)}
.uabd-swift-state__note{font-size:13px;color:var(--uabd-text-secondary)}
/* ---------- Table system (P2-44)
.uabd-table had no CSS at all until F.5. A table cannot be narrower than its
widest unbreakable content, and with nothing containing it that width becomes
the page's: +19px at 320 in D.5C (the 3-column sources table), and +227px
today for any fact cell holding a long URL. Two rules close it:
1. every table sits in .uabd-table-wrap, which scrolls on its own, so the
page never widens — the containment;
2. text cells break long tokens, so the scroll is rarely needed at all.
Figures and codes keep nowrap: they are short, and a split SWIFT code or
a figure broken across lines is a misreading waiting to happen. */
.uabd-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
border:1px solid var(--uabd-table-border);border-radius:var(--uabd-radius);background:#fff}
.uabd-table-wrap:focus-visible{outline:2px solid var(--uabd-blue);outline-offset:2px}
.uabd-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.5;color:var(--uabd-text);margin:0}
.uabd-table th,.uabd-table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--uabd-table-border);
overflow-wrap:anywhere;background:#fff}
.uabd-table thead th{background:var(--uabd-table-head-bg);color:var(--uabd-table-head-text);font-size:11px;font-weight:700;
letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid var(--uabd-table-border);white-space:nowrap}
.uabd-table tbody th{font-weight:600;color:var(--uabd-navy)}
.uabd-table tbody tr:last-child>*{border-bottom:0}
.uabd-table tbody tr:hover>*{background:var(--uabd-table-row-hover)}
.uabd-table .uabd-num,.uabd-table .uabd-code{font-family:var(--uabd-font-mono);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;
font-weight:600;color:var(--uabd-navy);white-space:nowrap;background:none;padding:0}
.uabd-table td.is-num{text-align:right}
/* Label / value tables (published details, hours). */
.uabd-table--kv tbody th{width:38%;background:var(--uabd-bg-neutral)}
.uabd-table--kv tbody tr:hover th{background:var(--uabd-bg-neutral)}
.uabd-fig__q{color:var(--uabd-text-secondary);font-size:13px}
.uabd-fig__note{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--uabd-text-secondary)}
/* Several-column tables keep their shape and scroll inside the wrapper on a
narrow screen, with the row's name pinned so a reader never loses which row
a figure belongs to. */
.uabd-table--sticky{min-width:520px}
.uabd-table--sticky thead th:first-child,.uabd-table--sticky tbody th[scope="row"]{position:sticky;left:0;z-index:1;
box-shadow:1px 0 0 var(--uabd-table-border)}
.uabd-table--sticky thead th:first-child{z-index:2}
/* ---------- Source and verification */
.uabd-trust__facts{display:grid;gap:10px;margin:0}
.uabd-trust__row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;align-items:baseline}
.uabd-trust__row dt{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--uabd-text-secondary)}
.uabd-trust__row dd{margin:0;font-size:14px;overflow-wrap:anywhere}
.uabd-trust__h{font-size:.95rem;font-weight:700;color:var(--uabd-navy);margin:20px 0 10px}
.uabd-trust__note{font-size:12.5px;color:var(--uabd-text-secondary);margin:14px 0 0}
/* ---------- Sidebar: who publishes it, and real next steps only */
.uabd-dside{padding:20px}
.uabd-dside__h{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--uabd-text-secondary);margin:0 0 6px}
.uabd-dside__bank{margin:0 0 12px;font-size:1.05rem;font-weight:700}
.uabd-dside__bank a{color:var(--uabd-navy);text-decoration:none}
.uabd-dside__bank a:hover{color:var(--uabd-blue);text-decoration:underline}
.uabd-dnav{list-style:none;margin:0;padding:0}
.uabd-dnav li{border-top:1px solid var(--uabd-border)}
.uabd-dnav a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;font-size:14px;font-weight:600;
color:var(--uabd-blue);text-decoration:none}
.uabd-dnav a::after{content:"\2192";content:"\2192" / ""}
.uabd-dnav a:hover{text-decoration:underline}
.uabd-help-card__h{color:#fff;margin:0 0 .3rem;font-size:1.05rem}
/* ---------- Bank page: what the directory publishes for this bank */
.uabd-listed__h{font-size:.95rem;font-weight:700;color:var(--uabd-navy);margin:18px 0 8px}
.uabd-dcard__head+.uabd-listed__h{margin-top:0}
.uabd-listed__n{font-family:var(--uabd-font-mono);font-weight:600;color:var(--uabd-text-secondary)}
.uabd-listed{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 20px}
.uabd-listed a{display:block;padding:7px 0;font-size:14px;line-height:1.4;text-decoration:none;overflow-wrap:anywhere}
.uabd-listed a:hover{text-decoration:underline}
@media (max-width:1080px){
.uabd-dhead__panel--art{grid-template-columns:220px minmax(0,1fr)}
}
@media (max-width:760px){
.uabd-dhead{padding-top:16px}
.uabd-dhead__panel,.uabd-dhead__panel--art{grid-template-columns:minmax(0,1fr);padding:18px 16px;gap:18px}
.uabd-dhead__panel--bank{grid-template-columns:56px minmax(0,1fr);gap:14px}
.uabd-dhead__logo{width:56px;height:56px;padding:5px}
.uabd-dhead__logo--ph{font-size:1.05rem}
.uabd-dhead__art{max-width:320px;width:100%}
.uabd-dhead__checked{margin-left:0}
.uabd-kfacts{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.uabd-kfact{padding:12px}
.uabd-kfact__v{font-size:1.1rem}
.uabd-section.uabd-dbody{padding-block:20px 36px}
.uabd-dcard{padding:18px 16px;margin-bottom:18px}
.uabd-table{font-size:13.5px}
.uabd-table th,.uabd-table td{padding:10px 12px}
.uabd-table--kv tbody th{width:42%}
.uabd-trust__row{grid-template-columns:minmax(0,1fr);gap:2px}
.uabd-listed{grid-template-columns:minmax(0,1fr)}
.uabd-listed a{min-height:44px;display:flex;align-items:center;padding:4px 0}
}
/* ==========================================================================
SHARED PAGES — F.8
Plain pages, search, the guides index, leftover archives and the 404 use
the F.4 compact header, the F.5 breadcrumb strip and these few pieces.
========================================================================== */
/* A searched phrase is reader input of any length: it wraps rather than widening the page. */
.uabd-arch-head h1{overflow-wrap:anywhere}
.uabd-section.uabd-page{padding-block:32px 56px}
/* One reading column: ~70 characters for policy text, room for tool widgets and the SWIFT table. */
.uabd-page__body{max-width:760px}
.uabd-page__body>*:last-child{margin-bottom:0}
.uabd-page__body h2{font-size:1.35rem;margin:2rem 0 .6rem}
.uabd-page__body h3{font-size:1.05rem;margin:1.5rem 0 .4rem}
.uabd-page__body ul,.uabd-page__body ol{padding-left:1.25rem}
.uabd-page__body li+li{margin-top:.35rem}
.uabd-page__body .uabd-notice__links,.uabd-page__body .uabd-empty__links{padding-left:0}
.uabd-page__body .uabd-notice__links li+li,.uabd-page__body .uabd-empty__links li+li{margin-top:0}
.uabd-page__body .uabd-table-wrap{margin:1rem 0}
/* Result rows — search, guides, leftover archives. */
.uabd-results{list-style:none;margin:0;padding:0;border:1px solid var(--uabd-border);border-radius:var(--uabd-radius);background:#fff}
.uabd-result{padding:14px 16px;border-bottom:1px solid var(--uabd-border)}
.uabd-result:last-child{border-bottom:0}
.uabd-result__kind{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--uabd-text-secondary);margin-bottom:2px}
.uabd-result__name{font-size:1rem;font-weight:700;margin:0;line-height:1.35}
.uabd-result__name a{color:var(--uabd-navy);text-decoration:none;overflow-wrap:anywhere}
.uabd-result__name a:hover{color:var(--uabd-blue);text-decoration:underline}
.uabd-result__meta{margin:2px 0 0;font-size:13px;color:var(--uabd-text-secondary)}
.uabd-arch__more{margin:0 0 16px;font-weight:600}
/* Factual empty state. */
.uabd-empty{border:1px solid var(--uabd-border);border-radius:var(--uabd-radius);background:var(--uabd-bg-neutral);padding:20px}
.uabd-empty__msg{margin:0 0 10px;color:var(--uabd-text);overflow-wrap:anywhere}
.uabd-empty__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.uabd-empty__links a{display:inline-block;padding:6px 0;font-weight:600}
/* Search box inside a page (the header keeps its own). */
.uabd-psearch{margin:0 0 20px;max-width:560px}
.uabd-psearch__label{display:block;font-size:13px;font-weight:600;color:var(--uabd-text);margin-bottom:6px}
.uabd-psearch__row{display:flex;gap:8px}
.uabd-psearch__input{flex:1 1 auto;min-width:0;height:44px;padding:0 12px;border:1px solid var(--uabd-border-strong);border-radius:var(--uabd-radius-sm);font:inherit;background:#fff}
.uabd-psearch__input:focus-visible{outline:2px solid var(--uabd-blue);outline-offset:1px}
.uabd-psearch .uabd-btn{height:44px;flex:0 0 auto}
/* Notice — restrained, used only where a page must qualify what it offers. */
.uabd-notice{border:1px solid var(--uabd-border);border-left:3px solid var(--uabd-blue);border-radius:var(--uabd-radius-sm);background:var(--uabd-bg-blue);padding:14px 16px;margin:1rem 0}
.uabd-notice p{margin:0 0 8px}
.uabd-notice__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.uabd-notice__links a{display:inline-block;padding:6px 0;font-weight:600}
.uabd-tool__noscript{font-size:13px;color:var(--uabd-text-secondary);margin:8px 0 0}
.uabd-emi__submit{margin-top:12px}
@media (max-width:760px){
.uabd-section.uabd-page{padding-block:20px 36px}
.uabd-result{padding:12px 14px}
.uabd-psearch__row{flex-wrap:wrap}
.uabd-psearch .uabd-btn{width:100%}
}