/* css/aml-monitoring.css — aml-monitoring.html only.
   css/site.css is the baseline (it carries platform.html's skin: .cmp, .journey, .caps,
   .pts, .record-grid, .anno-item, .irows, .faq, .rec-card). This file adds only what the
   AML monitoring page needs on top: the subpage hero crop, the five-source comparison,
   the connected-context panel, the lifecycle chain, the AI Reviewer panel and the
   supporting straps. Where a rule already exists in site.css, site.css wins. */

/* --- 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; }

/* --- subpage hero: the AML photograph, cropped for this page --- */
.hero--sub .hero-media picture { display: block; width: 100%; height: 100%; }
.hero--aml .hero-media img { object-position: 50% 38%; }
@media (max-width: 760px) { .hero--aml .hero-media img { object-position: 50% 50%; } }

/* --- section heads carry two ledes on this page --- */
.sec-head .lede + .lede { margin-top: 14px; }

/* --- 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 { 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 { 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; }

/* --- the platform page's drag-to-compare device, widened to five: the five places the
   context sits today, held apart or read together. Each separated source carries its own
   avoidable work beneath it, so the five gaps line up under the five chips. --- */
.cmp--5 { --foot: 92px; }
.cmp__k { margin: auto 0 0; padding-bottom: 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #C6B199; }
.cmp__gaps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0; }
.cmp__gaps--5 span { font-size: 12px; line-height: 1.4; }
@media (max-width: 860px) {
  .cmp__k { margin-top: 18px; padding-bottom: 0; }
  .cmp__gaps--5 { grid-template-columns: 1fr; }
}

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

/* --- numbered notes: site.css draws these for a night band, so the paper bands
   need the ink treatment --- */
.anno-item { cursor: default; }
section:not(.night) .anno-item { border-top-color: var(--line); }
section:not(.night) .anno-item h3 { color: var(--ink); }
section:not(.night) .anno-item p { color: var(--sub); }
section:not(.night) .anno-item .n i { background: var(--blue); }

/* --- the connected context panel (.sig): the base skin moved to css/product.css on
   2026-09-15, shared with fraud-detection.html and bank.html; this page's markup adds
   .sig--paper so the panel sits on its white band like the record card. --- */

/* --- the deck's supporting lines, set like the subbar chips: caps with the brand diamond
   between. On a night band the copy is white; on paper it takes WIDTH dark. --- */
.strap { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px;
  margin: clamp(40px, 4.4vw, 56px) 0 0; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1.2; color: rgba(255,255,255,.78); }
.strap span { display: inline-flex; align-items: center; gap: 18px; }
.strap span::after { content: ""; width: 5px; height: 5px; background: #4C86F5; transform: rotate(45deg); }
.strap span:last-child::after { display: none; }
.strap--ink { color: var(--dark); }
.strap--ink span::after { background: var(--blue); }
@media (max-width: 760px) { .strap { gap: 6px 14px; } .strap span { gap: 0; } .strap span::after { display: none; } }

/* --- the journey's step marks, drawn on a loop like platform.html's --- */
.ric .ric-link, .ric .ric-br, .ric .ric-tip, .ric .ric-loop, .ric .ric-arrow,
.ric .ric-stem, .ric .ric-pen { stroke-dasharray: 1; }
.ric--connect .ric-link { animation: icDraw 4s cubic-bezier(.4,0,.2,1) infinite; }
.ric--connect .ric-hub { transform-box: fill-box; transform-origin: 50% 50%; animation: icBeat 4s ease-in-out .5s infinite; }
.ric--route .ric-br { animation: icDraw 3.8s cubic-bezier(.4,0,.2,1) infinite; }
.ric--route .ric-tip { animation: icDraw 3.8s cubic-bezier(.4,0,.2,1) .35s infinite; }
.ric--investigate .ric-stem { animation: icDraw 4s cubic-bezier(.4,0,.2,1) .3s infinite; }
.ric--investigate .ric-lens { transform-box: fill-box; transform-origin: 50% 50%; animation: icBeat 4s ease-in-out infinite; }
.ric--record .ric-pen { animation: icDraw 4.2s cubic-bezier(.4,0,.2,1) infinite; }
.ric--record .ric-mark { transform-box: fill-box; transform-origin: 50% 50%; animation: icBeat 4.2s ease-in-out .9s infinite; }

/* --- six control tiles on the about page's reason tiles: .caps.c3 moved to css/site.css on
   2026-09-15 (beside .caps.c4) when bank.html became the third page to use them. --- */

/* --- the lifecycle chain: the base block (grid, rail, node, labels and both breakpoints)
   moved to css/product.css on 2026-09-16, just before the chain overrides that were already
   there, when onboarding.html became the second page to carry the device. Nothing to copy. --- */

/* --- AI Reviewer panel (from css/ai.css): the night base skin; this page applies
   .rvw--paper (below) so it sits on its white band like the record card --- */
.rvw { background: linear-gradient(180deg,#0B1A38,#081226); border: 1px solid rgba(127,169,248,.22);
  border-radius: 16px; overflow: hidden; padding-bottom: 6px; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 30px 70px -28px rgba(7,34,89,.45); }
.rvw-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid rgba(127,169,248,.16); color: rgba(255,255,255,.85);
  font-weight: 700; letter-spacing: .06em; font-size: 11.5px; text-transform: uppercase; }
.rvw-bar .dots { display: flex; gap: 5px; }
.rvw-bar .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(157,190,255,.4); }
.rvw-bar .tag { margin-left: auto; color: #9DBEFF; letter-spacing: .14em; }
.rvw-sec { padding: 16px 18px 4px; }
.rvw-k { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(157,190,255,.75); }
.rvw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.rvw-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  font-size: 11.5px; font-weight: 500; color: #CFE0FF; background: rgba(157,190,255,.08);
  border: 1px solid rgba(157,190,255,.22); border-radius: 40px; }
.rvw-chips .ok { color: #7CE3B1; }
.rvw-flag { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start;
  margin: 4px 0 12px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: #FFE2BE;
  background: rgba(245,169,75,.10); border: 1px solid rgba(245,169,75,.34); border-radius: 10px; }
.rvw-flag i { width: 7px; height: 7px; margin-top: 5px; background: #F5A94B; transform: rotate(45deg); }
.rvw-lines { padding: 4px 0 10px; }
.rvw-lines b { display: block; height: 6px; border-radius: 3px; background: rgba(157,190,255,.34); margin: 9px 0; }
.rvw-lines b:nth-child(2) { width: 82%; background: rgba(157,190,255,.24); }
.rvw-lines b:nth-child(3) { width: 64%; background: rgba(157,190,255,.18); }
.rvw-foot { margin: 12px 14px 14px; display: flex; align-items: center; justify-content: center;
  gap: 9px; padding: 11px 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.78);
  background: rgba(124,227,177,.08); border: 1px solid rgba(124,227,177,.3); border-radius: 40px; }
.rvw-foot i { width: 7px; height: 7px; border-radius: 50%; background: #7CE3B1; }
.rvw-cap { margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--sub); max-width: 52ch; }

/* --- the paper skin for the two product panels (.sig--paper on #context, .rvw--paper on
   #ai) now lives in css/product.css, shared with fraud-detection.html (moved 2026-09-10). --- */

/* --- icon-gutter points: the :not() selector in ai.css outranks a plain .pts--ico, so
   the phone rule names the c3 variant too, or three tiles stay three-up at 375px --- */
@media (max-width: 760px) { .pts--ico, .pts--ico.c3 { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } }

/* --- industries: each card is the link the deck names, so the linked phrase is marked
   inside the paragraph instead of a separate Explore line --- */
.irow-a { color: var(--blue); font-weight: 500; box-shadow: 0 1px 0 rgba(13,79,211,.32); transition: box-shadow .25s ease; }
.irow:hover .irow-a, .irow:focus-visible .irow-a { box-shadow: 0 1px 0 var(--blue); }

/* --- the two record grids (#context, #prioritise): site.css top-aligns the columns, so the
   panel on the right stopped well short of the four- and six-item lists beside it. Here the
   right column stretches to the row and its panel fills it: the record card's rows share the
   remainder equally (their content stays centred between the rules), and the context panel
   gives any residual to the flow diagram, whose paths already scale (preserveAspectRatio
   none). Under 920px the grid is one column, so nothing stretches there. The IDs outrank
   product.css, which loads after this file. --- */
#context .record-grid, #prioritise .record-grid { align-items: stretch; }
#context .record-grid > :last-child, #prioritise .record-grid > :last-child { display: flex; flex-direction: column; }
#context .record-grid .sig { flex: 1 1 auto; display: flex; flex-direction: column; }
#context .record-grid .sig .sig-body { flex: 1 1 auto; display: flex; flex-direction: column; }
#context .record-grid .sig .sig-core { width: 100%; }
#context .record-grid .sig .sig-flow { height: auto; flex: 1 1 84px; min-height: 84px; }
#prioritise .record-grid .rec-card { flex: 1 1 auto; display: flex; flex-direction: column; }
#prioritise .record-grid .rec-body { flex: 1 1 auto; display: flex; flex-direction: column; }
#prioritise .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; }
}