/* css/payments.css — payments.html only: what this Solutions page has that platform.html and
   the other sub pages do not. The skin is css/site.css (loaded first, and it carries
   platform.html's devices: .cmp, .caps, .nums, .record-grid, .anno-item, .rec-card, .chips,
   .faq); the product finish — bare icons, the connected-context panel and the lifecycle
   chain — is css/product.css (loaded after this sheet, so it wins where the two overlap);
   the bar is css/nav.css, loaded last. */

/* --- skip link (site.css styles the nav, not this) --- */
.skip { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--blue);
  color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
  text-decoration: none; transition: top .2s ease; }
.skip:focus { top: 16px; }

/* --- hero: the payments photograph (05 Assets/Photos/Transaction Monitoring 02.png, 1672x941):
   payment rails drawn as light trails sweeping past screening panels toward a networked globe
   over a harbour skyline at dusk. The frame is composed edge to edge, so the desktop crop sits
   on centre and the copy overlays the globe under the veil; the portrait source is the 530x941
   window centred at 58%, around the globe and the nearest panel, for phones held upright. --- */
.hero--sub .hero-media picture { display: block; width: 100%; height: 100%; }
.hero--payments .hero-media img { object-position: 50% 50%; }

/* --- inline links inside body copy: weight and a hairline rule, never a browser underline.
   On a night band they lift to the light blue. --- */
.lede a, .anno-item p a, .pt p a, .cap p a, .chain-step p a, .closing a { font-weight: 500; text-decoration: none;
  color: var(--blue); box-shadow: 0 1px 0 rgba(13,79,211,.34); transition: box-shadow .25s ease, opacity .25s ease; }
.lede a:hover, .anno-item p a:hover, .pt p a:hover, .cap p a:hover, .chain-step p a:hover, .closing a:hover { opacity: .8; }
section.night .lede a, section.night .anno-item p a, section.night .j-body p a,
section.night .chain-step p a { color: #BFD4FF; box-shadow: 0 1px 0 rgba(191,212,255,.4); }
section.night .lede a:hover, section.night .anno-item p a:hover, section.night .j-body p a:hover,
section.night .chain-step p a:hover { opacity: .8; }

/* --- numbered notes and the record caption on a plain white band: css/site.css inks them for
   night and for .tint, so the white band restates the paper treatment (the same lines the
   other sub pages carry) --- */
.anno-item { cursor: default; }
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); }
section:not(.night):not(.tint) .rec-cap { color: var(--sub); }

/* --- the paragraph that closes a narrative band, centred under the visual --- */
.closing { margin: clamp(40px, 4.4vw, 56px) auto 0; max-width: 62ch; text-align: center;
  font-size: clamp(16px, 1.7vw, 18.5px); line-height: 1.6; color: var(--sub); }

/* --- the four payment figures: the platform skin's .nums as about.html sets them on a light
   band — centred, the value in brand blue, no top rule — with a supporting line under each
   label that carries the rail, the regulation or the mechanism behind the number. The
   text value ("FATF R.16") steps down so the four figures share one baseline row. --- */
#realtime .nums { margin-top: clamp(36px, 4vw, 52px); gap: clamp(28px, 3vw, 40px) clamp(20px, 2.6vw, 32px); }
#realtime .num { border-top: 0; padding-top: 0; text-align: center; }
#realtime .num .v { color: var(--blue); font-size: clamp(38px, 3.4vw, 46px); }
#realtime .num .v small { font-size: .5em; color: var(--blue); opacity: .75; }
#realtime .num .v.v--word { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.024em; padding-top: 6px; }
#realtime .num .l { margin-top: 10px; font-size: 15.5px; color: var(--ink); }
#realtime .num .a { margin: 8px auto 0; max-width: 30ch; }

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

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

@media (prefers-reduced-motion: reduce) {
  .sig-flow .beam { animation: none; }
  .sig-acts li, .sig.sig--paper .sig-acts li { animation: none; }
}