/* css/fraud-detection.css — only what fraud-detection.html has that platform.html does not.
   Loaded after css/site.css, which is the skin and wins wherever the two overlap. A few rules
   are repeated from css/ai.css on purpose (skip link, the AI Reviewer panel, the light
   re-inks): every inner page carries its own sheet, and this one has no reason to load ai.css. */

/* skip link — platform has none */
.skip { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--blue);
  color: #fff; padding: 12px 18px; font-weight: 700; font-size: 13px; text-decoration: none; transition: top .25s; }
.skip:focus { top: 16px; }

/* --- hero: the deck's two short paragraphs. The second follows the first at reading
   distance, a step smaller and quieter, so the H1 keeps the hierarchy. The photograph is
   ai.html's analyst at her screens, cropped a little higher so the monitors sit under the
   copy rather than behind it. --- */
.hero--sub .hero-media picture { display: block; width: 100%; height: 100%; }
.hero--fraud .hero-media img { object-position: 50% 42%; }
.hero-sub--2 { margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.74); max-width: 60ch; }
@media (max-width: 640px) { .hero-sub--2 { font-size: 15px; } }
@media (max-width: 760px) { .hero--fraud .hero-media img { object-position: 50% 50%; } }

/* --- a head that carries two paragraphs: the second follows the first at reading
   distance (about.css does the same) --- */
.sec-head .lede + .lede { margin-top: 14px; }

/* --- inline links inside running copy: WIDTH blue over a hairline, never an underline —
   the skin's own treatment for .faq .ans a --- */
.lede a, .anno-item p a, .pt p a, .cap p a { font-weight: 500; text-decoration: none;
  box-shadow: 0 1px 0 rgba(13,79,211,.32); transition: opacity .2s ease; }
.lede a:hover, .anno-item p a:hover, .pt p a:hover, .cap p a:hover { opacity: .8; }
section.night .lede a, section.night .anno-item p a, section.night .j-body p a { color: #BFD4FF;
  font-weight: 500; text-decoration: none; box-shadow: 0 1px 0 rgba(157,190,255,.5); transition: opacity .2s ease; }
section.night .lede a:hover, section.night .anno-item p a:hover, section.night .j-body p a:hover { opacity: .8; }

/* --- the comparison, five signals: each separated signal carries its own blind spot, so
   the cost band has five columns and a heading. The band deepens to hold them and the
   blue base deepens with it (both read --foot), so the red rules and the top of the box
   still share one line across the divider. --- */
.cmp--5 { --foot: 92px; }
.cmp__k { margin: auto 0 0; padding-bottom: 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; line-height: 1.3; color: #77614D; text-wrap: initial; }
.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--5 .cmp__k { margin-top: 18px; padding-bottom: 8px; }
  .cmp__gaps--5 { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 0; }
}

/* --- the section's resolution, set as a centred statement after the visual --- */
.closing { margin: clamp(40px, 4.4vw, 56px) auto 0; max-width: 62ch; text-align: center;
  font-size: clamp(17px, 1.7vw, 20px); font-weight: 500; letter-spacing: -.015em; line-height: 1.5; color: var(--ink); }

/* --- annotations on paper: the component was drawn for a night band; the skin re-inks it
   for .tint, this page also runs it on white. No hover interaction here, so no pointer. --- */
.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 fraud context panel (.sig): the base skin moved to css/product.css on
   2026-09-15, shared with aml-monitoring.html and bank.html; this page's markup adds
   .sig--paper so the panel sits on its white band. --- */

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

/* --- lifecycle icons for the three stages the platform page does not draw: signals
   converge on a hub, an event routes to one of three actions, outcomes loop back --- */
.ric .ric-link, .ric .ric-br, .ric .ric-tip, .ric .ric-loop, .ric .ric-arrow { 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--refine .ric-loop { animation: icDraw 4.2s cubic-bezier(.4,0,.2,1) infinite; }
.ric--refine .ric-arrow { animation: icDraw 4.2s cubic-bezier(.4,0,.2,1) .55s infinite; }
.ric--refine .ric-mark { transform-box: fill-box; transform-origin: 50% 50%; animation: icBeat 4.2s ease-in-out 1s infinite; }

/* --- seven fraud types: four across, three centred beneath. An eight-column grid with
   every card spanning two, and the second row starting one column in, so its three cards
   sit centred under the four above. Each card opens with a 30px mark (product.css's bare
   .ico); the title sits at the foot of a two-line box, so every body starts on the same
   line however many lines the title takes. --- */
.caps--7 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 22px); }
.caps--7 .cap { grid-column: span 2; padding: 26px 24px 28px; }
.caps--7 .cap:nth-child(5) { grid-column: 2 / span 2; }
.caps--7 .cap h3 { margin: 0; font-size: 19px; line-height: 1.3; min-height: 2.6em; display: flex; align-items: flex-end; }
.caps--7 .cap p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; }
@media (max-width: 1100px) {
  .caps--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .caps--7 .cap:nth-child(5) { grid-column: span 2; }
  .caps--7 .cap:nth-child(7) { grid-column: 2 / span 2; }
}
@media (max-width: 620px) {
  .caps--7 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .caps--7 .cap, .caps--7 .cap:nth-child(5), .caps--7 .cap:nth-child(7) { grid-column: auto; padding: 22px 22px 24px; }
  .caps--7 .cap h3 { min-height: 0; }
}

/* --- AI Reviewer panel (from css/ai.css): a product surface, so it stays night wherever
   the band around it is paper --- */
.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;
  background: rgba(157,190,255,.08); border: 1px solid rgba(157,190,255,.22); color: #CFE0FF;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 6px) 100%, 0 100%); }
.rvw-chips .ok { color: #7CE3B1; }
.rvw-flag { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start;
  padding: 11px 13px; margin: 10px 0; background: rgba(245,169,75,.07);
  border: 1px solid rgba(245,169,75,.3); color: #F3D9B4; }
.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; border: 1px solid #9DBEFF; color: #CFE0FF; padding: 11px; font-weight: 700;
  letter-spacing: .14em; font-size: 10.5px; text-transform: uppercase; border-radius: 40px; }
.rvw-foot i { width: 7px; height: 7px; border-radius: 50%; background: #7CE3B1; }
/* the caption under the panel is the deck's accountability line, so it carries more
   weight than a footnote */
.rvw-cap { margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--sub); max-width: 52ch; }

/* --- proportionate response: the four actions the workflow can return, laid along the
   risk they answer. A rule that deepens from paper-blue to WIDTH dark, a diamond at each
   action, the two ends named. --- */
.prop { margin: clamp(40px, 4.4vw, 56px) auto 0; max-width: 980px; }
.prop-ends { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sub); }
.prop-bar { position: relative; margin-top: 12px; height: 8px;
  background: linear-gradient(90deg, rgba(13,79,211,.14), var(--blue) 55%, var(--dark)); }
.prop-bar i { position: absolute; top: 50%; width: 11px; height: 11px; background: var(--white);
  border: 2px solid var(--blue); transform: translate(-50%, -50%) rotate(45deg); }
.prop-bar i:nth-child(1) { left: 12.5%; }
.prop-bar i:nth-child(2) { left: 37.5%; }
.prop-bar i:nth-child(3) { left: 62.5%; border-color: var(--dark); }
.prop-bar i:nth-child(4) { left: 87.5%; border-color: var(--dark); }
.prop-acts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prop-acts li { position: relative; padding: 12px 8px 0; text-align: center; font-size: 14.5px; font-weight: 500;
  letter-spacing: -.01em; line-height: 1.4; color: var(--ink); }
.prop-acts li::before { content: ""; position: absolute; left: 50%; top: -14px; width: 1px; height: 12px; background: var(--line); }
@media (max-width: 640px) {
  .prop-ends { font-size: 10px; letter-spacing: .12em; }
  .prop-acts li { font-size: 12.5px; padding: 10px 4px 0; }
}

/* --- 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, #explainable): site.css top-aligns the columns, so the
   list outgrows the visual and the right panel stops short. Same fix as aml-monitoring.css:
   the right column stretches to the row and its panel fills it — the context device's
   .sig-flow absorbs the residual (paths already preserveAspectRatio="none"), the record
   card's rows share it with their content centred. Under 920px the grid is one column, so
   nothing stretches there. --- */
#context .record-grid, #explainable .record-grid { align-items: stretch; }
#context .record-grid > :last-child, #explainable .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; }
#explainable .record-grid .rec-card { flex: 1 1 auto; display: flex; flex-direction: column; }
#explainable .record-grid .rec-body { flex: 1 1 auto; display: flex; flex-direction: column; }
#explainable .record-grid .rec-row { flex: 1 1 auto; align-content: center; }

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