/* css/product.css — the product-page layer shared by aml-monitoring.html and
   fraud-detection.html. Loaded after the page's own sheet (and before css/nav.css), so
   wherever it and the page sheet overlap this file wins: it is the finish applied on top.

   What it carries: one icon system (bare line marks, drawn as about.html draws its point
   icons: no plate, one colour, in three sizes and a night variant), the capability cards
   that hold them, the compare device's source chips, the connected-context panel, the
   lifecycle chain with a mark at every stage, the icon-led point grids, and the phone rules
   the audit asked for (panel headers at 320px, the graph's labels, the signal chips). */

:root { --p-sky: #7FA9F8; --p-ice: #BFD4FF; --p-mint: #7CE3B1; --p-amber: #F5A94B; }

/* =========================================================
   Icons — bare line marks, as about.html's .pt-ico: no plate, no hairline, no shadow, one
   colour (WIDTH blue on paper, the light blue on night). The wrapper only sizes the mark.
   Every glyph is drawn on a 26-unit box, so the stroke steps down as the mark grows and
   the line weight on screen stays close: 2 at 18px, 1.5 at 30px, 1.2 at 39px (about.css
   pairs 39px with 1.2 the same way).
   ========================================================= */
.ico { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; color: var(--blue);
  transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.ico svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico svg .dot { fill: currentColor; stroke: none; }
.ico--s { width: 39px; height: 39px; }
.ico--s svg { stroke-width: 1.2; }
.ico--xs { width: 18px; height: 18px; }
.ico--xs svg { stroke-width: 2; }
.night .ico, .ico--night { color: var(--p-sky); }

/* =========================================================
   Capability cards (the seven fraud types): a mark opens each card, the surface carries a
   faint paper gradient, and the whole card lifts on approach.
   ========================================================= */
.caps--7 .cap { padding: 28px 26px 30px; border-color: rgba(7,34,89,.10);
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFD 100%); }
.cap > .ico { margin-bottom: 20px; }
.cap:hover { background: linear-gradient(180deg, #FFFFFF 0%, #F1F5FC 100%); border-color: rgba(13,79,211,.22); }
.cap:hover > .ico { transform: translateY(-3px); }
.caps--7 .cap h3 { font-size: 19px; letter-spacing: -0.018em; }
.caps--7 .cap p { color: var(--sub); }
@media (max-width: 620px) {
  .caps--7 .cap { padding: 24px 22px 26px; }
  .cap > .ico { margin-bottom: 18px; }
}

/* =========================================================
   The compare device: the source chips gain a soft drop shadow on paper and the connected
   side's chips a brand-blue hairline. The marks are site.css's bare 18px glyphs, brand
   blue on the tint band.
   ========================================================= */
.tint .cmp__row .node { border-color: rgba(7,34,89,.12); font-weight: 600;
  box-shadow: 0 14px 28px -22px rgba(7,34,89,.6); }
.tint .cmp__pane--b .node { border-color: rgba(13,79,211,.34); }

/* =========================================================
   Connected-context panel, the base skin: the AI Reviewer's night gradient, the source chips,
   the converging flow, the glowing review core and the four next steps that light in turn.
   Shared by aml-monitoring.html, fraud-detection.html and bank.html; moved here from the two
   page sheets on 2026-09-15 when bank.html became the third page to carry it. On a white band
   the markup adds .sig--paper (the paper block at the end of this file). The overrides in the
   next block (dot grid, chip marks, deeper glow) follow it, as they did when it lived upstream.
   ========================================================= */
.sig { background: linear-gradient(180deg, #0B1A38, #081226); border: 1px solid rgba(127,169,248,.22);
  border-radius: 16px; overflow: hidden; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 30px 70px -28px rgba(7,34,89,.45); }
.sig-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; }
.sig-bar .dots { display: flex; gap: 5px; }
.sig-bar .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(157,190,255,.4); }
.sig-bar .tag { margin-left: auto; color: #9DBEFF; letter-spacing: .14em; }
.sig-body { padding: 18px 18px 20px; }
.sig-k { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(157,190,255,.75); }
.sig-src { list-style: none; margin: 12px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sig-src li { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 6px;
  font-size: 11.5px; font-weight: 500; color: #CFE0FF; text-align: center; white-space: nowrap;
  background: rgba(157,190,255,.08); border: 1px solid rgba(157,190,255,.22);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 6px) 100%, 0 100%); }
.sig-src i { width: 6px; height: 6px; flex: none; background: #7FA9F8; transform: rotate(45deg); }
/* the four beams start on the four chips and converge on the review */
.sig-flow { display: block; width: 100%; height: 84px; margin-top: 6px; }
.sig-flow path { fill: none; stroke: rgba(157,190,255,.34); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.sig-flow .beam { stroke: #7FA9F8; stroke-width: 2; stroke-dasharray: 5 9; animation: sigFlow 1.6s linear infinite; }
@keyframes sigFlow { to { stroke-dashoffset: -28; } }
.sig-core { margin: 0 auto; max-width: 320px; padding: 14px 20px 16px; text-align: center;
  border: 1px solid #9DBEFF; border-radius: 12px; background: rgba(13,79,211,.18);
  box-shadow: 0 0 0 4px rgba(126,169,248,.10), 0 0 36px rgba(76,134,245,.32); }
.sig-core .sig-k { color: #BFD4FF; }
.sig-core p { margin-top: 7px; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: #fff; }
.sig-k--out { margin-top: 22px; text-align: center; }
/* the four steps: each lights in turn, so the panel reads as a review being worked */
.sig-acts { list-style: none; margin: 10px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sig-acts li { padding: 10px 6px; text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.16); border-radius: 40px;
  animation: sigAct 8s ease-in-out infinite; }
.sig-acts li:nth-child(2) { animation-delay: 2s; }
.sig-acts li:nth-child(3) { animation-delay: 4s; }
.sig-acts li:nth-child(4) { animation-delay: 6s; }
@keyframes sigAct {
  0%, 25%, 100% { color: rgba(255,255,255,.62); border-color: rgba(255,255,255,.16); background: transparent; }
  4%, 20%       { color: #fff; border-color: #7CE3B1; background: rgba(124,227,177,.10); }
}
@media (max-width: 640px) {
  .sig-src { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sig-src li { white-space: normal; }
  .sig-flow { display: none; }
  .sig-core { margin-top: 16px; }
  .sig-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   Connected-context panel: a faint dot grid on the panel floor, marks on the source
   chips, a deeper glow on the review card.
   ========================================================= */
.sig .sig-body {
  background-image: radial-gradient(rgba(157,190,255,.14) 1px, transparent 1.3px);
  background-size: 18px 18px; background-position: -5px -5px; }
.sig .sig-src { gap: 8px; }
.sig .sig-src li { gap: 8px; padding: 7px 8px 7px 7px; justify-content: flex-start; text-align: left;
  background: rgba(157,190,255,.08); border-color: rgba(157,190,255,.24); }
.sig .sig-src li .ico { color: var(--p-ice); }
.sig .sig-core { background: linear-gradient(180deg, rgba(13,79,211,.28), rgba(13,79,211,.12));
  box-shadow: 0 0 0 4px rgba(126,169,248,.10), 0 0 44px rgba(76,134,245,.36), inset 0 1px 0 rgba(255,255,255,.12); }
@media (max-width: 640px) {
  .sig .sig-src { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sig .sig-src li { white-space: normal; }
}
@media (max-width: 360px) {
  .sig .sig-src { grid-template-columns: minmax(0, 1fr); }
  .sig-bar, .rvw-bar { font-size: 10.5px; letter-spacing: .04em; gap: 8px; padding: 12px 14px; }
  .sig-bar .tag, .rvw-bar .tag { letter-spacing: .08em; white-space: nowrap; }
  .rvw-foot { font-size: 10.5px; letter-spacing: .08em; padding: 10px 12px; }
}

/* =========================================================
   The lifecycle chain — base: six stages on one connected rail across a night band, so the
   continuity the copy describes is visible. Three-up under 1040px, then one stacked flow
   with a vertical rail on a phone. Moved here from css/aml-monitoring.css on 2026-09-16,
   shared with onboarding.html; the overrides below (bare marks, the 8px rail gaps) follow
   it, so the cascade order is unchanged.
   ========================================================= */
.chain { margin-top: clamp(40px, 4.4vw, 60px); display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: clamp(14px, 1.8vw, 26px); }
.chain-step { position: relative; padding-top: 30px; }
/* the rail runs from each node to the next, so the last stage closes the line */
.chain-step::before { content: ""; position: absolute; left: 7px; right: calc(-1 * clamp(14px, 1.8vw, 26px));
  top: 6px; height: 1px; background: rgba(127,169,248,.28); }
.chain-step:last-child::before { display: none; }
.chain-node { position: absolute; left: 0; top: 0; width: 13px; height: 13px;
  background: var(--night); border: 1.5px solid #4C86F5; transform: rotate(45deg); }
.chain-step:first-child .chain-node { background: #4C86F5; }
.chain-k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(157,190,255,.72); }
.chain-step h3 { margin-top: 8px; font-size: 17px; letter-spacing: -0.015em; color: #fff; }
.chain-step p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); }
@media (max-width: 1040px) {
  .chain { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
  .chain-step:nth-child(3)::before { display: none; }
}
@media (max-width: 700px) {
  .chain { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .chain-step { padding: 0 0 26px 26px; }
  .chain-step::before, .chain-step:nth-child(3)::before { display: block;
    left: 6px; right: auto; top: 13px; bottom: -6px; width: 1px; height: auto; }
  .chain-step:last-child::before { display: none; }
  .chain-node { top: 0; }
}

/* =========================================================
   The lifecycle chain: the stage's mark at every node, bare in the light blue like the
   about page's night-band marks, the rail running from each mark to the next and stopping
   8px short of both. One vertical rail on a phone.
   ========================================================= */
.chain-step { padding-top: 50px; }
.chain-step::before { left: 38px; right: calc(8px - clamp(14px, 1.8vw, 26px)); top: 15px; height: 1px;
  background: linear-gradient(90deg, rgba(127,169,248,.5), rgba(127,169,248,.18)); }
.chain-node, .chain-step:first-child .chain-node { top: 0; left: 0; width: 30px; height: 30px; transform: none;
  display: flex; align-items: center; justify-content: center; color: var(--p-sky);
  background: none; border: 0; box-shadow: none; }
.chain-node svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chain-node svg .dot { fill: currentColor; stroke: none; }
.chain-k { margin-top: 2px; }
@media (max-width: 1040px) { .chain-step:nth-child(3)::before { display: none; } }
@media (max-width: 700px) {
  .chain-step { padding: 0 0 30px 46px; }
  .chain-step::before, .chain-step:nth-child(3)::before { display: block; left: 14.5px; right: auto; top: 38px; bottom: 8px;
    width: 1px; height: auto; background: linear-gradient(180deg, rgba(127,169,248,.5), rgba(127,169,248,.18)); }
  .chain-step:last-child::before { display: none; }
  .chain-node { top: 0; }
}

/* =========================================================
   Point grids: the integration points open with a 30px mark; the icon-gutter points
   (fraud: proportionate response, fraud + AML) take about.html's geometry — a 39px mark
   in a 39px gutter, 16px to the title, the mark centred on the title's line.
   ========================================================= */
.pts.c4 .pt > .ico { margin-bottom: 18px; }
.pts.c4 .pt { padding-top: 26px; }
.pts--ico .pt { grid-template-columns: 39px 1fr; column-gap: 16px; }

/* =========================================================
   The fraud-ring graph: the marks stay bare on their halos, as site.css draws them; labels
   are legible on a phone; tags stay off a phone where they would bury the pattern.
   ========================================================= */
#frsvg .gnode .gicon { stroke: rgba(255,255,255,.7); }
#frsvg .glabel { font-size: 10.5px; }
#frsvg .gtag rect { fill: #071A44; }
@media (max-width: 640px) {
  #frsvg .glabel { font-size: 15px; letter-spacing: .06em; }
  #frsvg .gtag { display: none; }
  .graph-grid .gviz { margin: 0 -14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ico, .cap:hover > .ico { transition: none; transform: none; }
}

/* =========================================================
   Paper skin for the product panels on white bands: the connected-context device (.sig)
   under "See the Full Picture" / "See Beyond the Event" and the AI Reviewer panel (.rvw)
   under the AI sections, on both aml-monitoring.html and fraud-detection.html. White
   surface, hairline in --line, ink text, brand-blue keys, marks, flow and beams; confirm
   green deepens for contrast on white; the amber flag keeps its tint under ink text. The
   chained selectors outrank the page sheets' night rules and this file's own .sig rules.
   (Moved here from css/aml-monitoring.css on 2026-09-10 so both pages share one copy.)
   ========================================================= */
.sig.sig--paper, .rvw.rvw--paper { --paper-ok: #178A5C; background: var(--white); border-color: var(--line);
  color: var(--ink); box-shadow: 0 30px 70px -28px rgba(7,34,89,.28); }
.sig.sig--paper .sig-bar, .rvw.rvw--paper .rvw-bar { border-bottom-color: var(--line); color: var(--sub); }
.sig.sig--paper .sig-bar .dots i, .rvw.rvw--paper .rvw-bar .dots i { background: rgba(7,34,89,.18); }
.sig.sig--paper .sig-bar .tag, .rvw.rvw--paper .rvw-bar .tag { color: var(--blue); }
.sig.sig--paper .sig-k, .sig.sig--paper .sig-core .sig-k, .rvw.rvw--paper .rvw-k { color: var(--blue); }
.sig.sig--paper .sig-body { background-image: radial-gradient(rgba(7,34,89,.11) 1px, transparent 1.3px); }
.sig.sig--paper .sig-src li { color: var(--dark); background: rgba(13,79,211,.06); border-color: rgba(13,79,211,.20); }
.sig.sig--paper .sig-src li .ico { color: var(--blue); }
.sig.sig--paper .sig-flow path { stroke: rgba(13,79,211,.22); }
.sig.sig--paper .sig-flow .beam { stroke: var(--blue); }
.sig.sig--paper .sig-core { border-color: var(--blue);
  background: linear-gradient(180deg, rgba(13,79,211,.10), rgba(13,79,211,.04));
  box-shadow: 0 0 0 4px rgba(13,79,211,.07), 0 18px 40px -22px rgba(13,79,211,.5); }
.sig.sig--paper .sig-core p { color: var(--dark); }
.sig.sig--paper .sig-acts li { color: var(--sub); border-color: rgba(7,34,89,.18); animation-name: sigActPaper; }
@keyframes sigActPaper {
  0%, 25%, 100% { color: var(--sub); border-color: rgba(7,34,89,.18); background: transparent; }
  4%, 20%       { color: var(--blue); border-color: var(--blue); background: rgba(13,79,211,.08); }
}
.rvw.rvw--paper .rvw-chips span { color: var(--dark); background: rgba(13,79,211,.06); border-color: rgba(13,79,211,.20); }
.rvw.rvw--paper .rvw-chips .ok { color: var(--paper-ok); background: rgba(23,138,92,.08); border-color: rgba(23,138,92,.30); }
.rvw.rvw--paper .rvw-flag { color: var(--ink); background: rgba(245,169,75,.12); border-color: rgba(245,169,75,.55); }
.rvw.rvw--paper .rvw-lines b { background: rgba(7,34,89,.16); }
.rvw.rvw--paper .rvw-lines b:nth-child(2) { background: rgba(7,34,89,.11); }
.rvw.rvw--paper .rvw-lines b:nth-child(3) { background: rgba(7,34,89,.08); }
.rvw.rvw--paper .rvw-foot { color: var(--paper-ok); background: rgba(23,138,92,.07); border-color: rgba(23,138,92,.32); }
.rvw.rvw--paper .rvw-foot i { background: var(--paper-ok); }
@media (prefers-reduced-motion: reduce) {
  .sig.sig--paper .sig-acts li { animation: none; }
}