/* css/case-management.css — case-management.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, .graph-grid, .lens); css/product.css
   (loaded after this sheet) carries the product finish — bare icons, the connected-context
   panel and the paper skin for the product panels. This file adds only what the case
   management page needs on top: the subpage hero crop, the five-source comparison, the
   supporting straps, the audit chain, the AI Reviewer panel, the reporting note and the
   two record grids that have to end level. 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 case photograph (05 Assets/Photos/Solutions_01.png, 1672x941) — an
   investigator at a glass wall at dusk, the skyline and river beyond, reaching into a row of
   floating panels (an identity card, a relationship graph, a shield, a chart). The desktop
   crop sits a little above centre so the head clears the top edge and the panels stay behind
   the headline under the veil; the portrait source is the 530x941 window centred on the
   figure and the first two panels. --- */
.hero--sub .hero-media picture { display: block; width: 100%; height: 100%; }
.hero--case .hero-media img { object-position: 50% 44%; }
@media (max-width: 760px) { .hero--case .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
   evidence sits before an investigation starts, 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 record card's caption: site.css inks it for night and .tint only, so the plain
   white band under #workflow would otherwise print it in white on white --- */
section:not(.night):not(.tint) .rec-cap { color: var(--sub); }

/* --- 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. The sign-off mark is
   new to this page: a shield whose tick is drawn on the same cycle as the other stems. --- */
.ric .ric-link, .ric .ric-br, .ric .ric-tip, .ric .ric-stem,
.ric .ric-pen, .ric .ric-tick { 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; }
.ric--signoff .ric-tick { animation: icDraw 4.2s cubic-bezier(.4,0,.2,1) .4s infinite; }

/* --- the audit chain: six stages of the case record on one connected rail across the night
   band, so the history the copy describes reads as a sequence. Three-up under 1040px, then
   one stacked flow with a vertical rail on a phone. (The 30px marks and their spacing come
   from css/product.css, which loads after this sheet.) --- */
.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; }
}

/* --- AI Reviewer panel (from css/ai.css): the night base skin; this page applies
   .rvw--paper (css/product.css) 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 reporting note: the jurisdiction caveat the copy carries under the SAR and STR
   points, set as an aside against a brand rule rather than a block quote --- */
.note { margin: clamp(34px, 3.6vw, 48px) auto 0; max-width: 78ch; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--blue); font-size: 14.5px; line-height: 1.65; color: var(--sub); }
section.night .note { border-left-color: #4C86F5; color: rgba(255,255,255,.7); }

/* --- icon-gutter points: the phone rule in site.css is a single class, so .pts.c3 and
   .pts.c4 outrank it and the tiles stay multi-column at 375px unless they are named --- */
@media (max-width: 760px) { .pts--ico, .pts--ico.c3, .pts--ico.c4 { 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 (#workflow, #ai): site.css top-aligns the columns, so the panel
   stops short of the list beside it. Here the panel's column stretches to the row and the
   panel fills it — the record card's seven rows share the remainder equally (their content
   stays centred between the rules), and the AI Reviewer's sections do the same, its summary
   block taking any residual. Under 920px the grid is one column, so nothing stretches. The
   IDs outrank product.css, which loads after this file. --- */
#workflow .record-grid, #ai .record-grid { align-items: stretch; }
#workflow .record-grid > :last-child, #ai .record-grid > :first-child { display: flex; flex-direction: column; }
#workflow .record-grid .rec-card { flex: 1 1 auto; display: flex; flex-direction: column; }
#workflow .record-grid .rec-body { flex: 1 1 auto; display: flex; flex-direction: column; }
#workflow .record-grid .rec-row { flex: 1 1 auto; align-content: center; }
#ai .record-grid .rvw { flex: 1 1 auto; display: flex; flex-direction: column; }
#ai .record-grid .rvw-sec:nth-of-type(3) { flex: 1 1 auto; display: flex; flex-direction: column; }
#ai .record-grid .rvw-lines { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
/* the AI Reviewer panel is the taller column here, so it is the notes beside it that take
   the remainder: four notes share it equally with their copy centred between the rules */
#ai .record-grid > :last-child { display: flex; flex-direction: column; }
#ai .record-grid > :last-child .anno-item { flex: 1 1 auto; align-content: center; }
@media (max-width: 920px) { #ai .record-grid > :last-child .anno-item { flex: 0 0 auto; } }

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