/* css/bank.css — bank.html only: what this solutions page has that platform.html and the
   product pages do not. The skin is css/site.css (loaded first); the product finish — bare
   icons, the connected-context panel and its paper skin — is css/product.css (loaded after
   this sheet, so it wins where the two overlap); the bar is css/nav.css, loaded last. */

/* --- hero: the banking photograph (05 Assets/Photos/WIDTH_Banking_Compliance_02.png, 1672x941): a
   banker at a glass wall at dusk, the skyline beyond, a bank hologram ringed by compliance
   panels and a classical facade at the right. The frame is composed edge to edge, so the
   desktop crop sits on centre and the copy overlays the hologram under the veil; the portrait
   source is the 530x941 window around the figure and the nearest panels (centred at 31%),
   for phones held upright. --- */
.hero--sub .hero-media picture { display: block; width: 100%; height: 100%; }
.hero--bank .hero-media img { object-position: 50% 50%; }

/* --- numbered notes on a white band: css/site.css inks them for night and for .tint, so the
   plain white band restates the paper treatment (the same lines the product pages carry) --- */
section:not(.night):not(.tint) .anno-item { border-top-color: var(--line); }
section:not(.night):not(.tint) .anno-item h3 { color: var(--ink); }
section:not(.night):not(.tint) .anno-item p { color: var(--sub); }

/* --- icon-gutter points three across (the points under the compare device, the teams):
   below 760px the plain .pts--ico rule in css/site.css loses to .pts.c3 on specificity, so
   the single column is restated, as the product pages do --- */
@media (max-width: 760px) { .pts--ico.c3 { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } }

/* --- the connected-context panel with eight sources rather than four: the chips keep their
   four columns and run to two rows on short labels; a little side padding is given back to
   the label so the longest ("Sanctions") stays on one line down to 1024px, where
   css/product.css already takes the grid to two columns at 640px --- */
.sig--bank .sig-src li { padding-left: 4px; padding-right: 4px; }

/* --- the two record grids (#investigate, #picture): css/site.css top-aligns the columns, so
   the panel on the right stopped short of the five-item list beside it. As on the product
   pages, the right column stretches to the row and its panel fills it: the record card's rows
   share the remainder equally with their content centred; the risk-view panel spreads it
   across its body, the flow diagram taking the first 34px (its paths already scale,
   preserveAspectRatio none) and the gaps between its blocks the rest. Under 920px the grid
   is one column, so nothing stretches. The IDs outrank product.css, which loads after this
   file. --- */
#investigate .record-grid, #picture .record-grid { align-items: stretch; }
#investigate .record-grid > :last-child, #picture .record-grid > :last-child { display: flex; flex-direction: column; }
#investigate .record-grid .rec-card { flex: 1 1 auto; display: flex; flex-direction: column; }
#investigate .record-grid .rec-body { flex: 1 1 auto; display: flex; flex-direction: column; }
#investigate .record-grid .rec-row { flex: 1 1 auto; align-content: center; }
#picture .record-grid .sig { flex: 1 1 auto; display: flex; flex-direction: column; }
#picture .record-grid .sig .sig-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
#picture .record-grid .sig .sig-core { width: 100%; }
#picture .record-grid .sig .sig-flow { height: auto; flex: 1 1 84px; min-height: 84px; max-height: 118px; }