/*
graphics.css — the Graphics register: layered, illustrative compositions
for systems and process narratives (DataBank Brand System - Guidelines.html,
"Graphics register"). Explicitly separate from components.css — per that
doc and the --graphics-* tokens' own comment in tokens.css, UI components
(icons, cards, buttons) stay flat and shadowless; shadows, glow and gradient
only ever appear here.

First use: the homepage hero's "document stack" illustration — scattered
source-document cards converging into one governed record, per Claude
Design's approved homepage (design-handoff/home.html, 2026-10-07). Built
from that design's exact recipe (positions, rotations, colors, shadows),
simplified from ~15 absolutely-positioned elements down to a representative
set — not every micro-element, but the same visual idea faithfully.
*/

.doc-stack {
  position: relative;
}

/* The rotated perspective grid plane behind the card stack */
.doc-stack__grid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mask-image: radial-gradient(closest-side at 55% 60%, #000 35%, transparent 100%);
  pointer-events: none;
}

.doc-stack__grid-plane {
  position: absolute;
  inset: -40% -30%;
  transform: rotateX(58deg) rotateZ(-28deg);
  background-image:
    linear-gradient(rgba(143, 174, 203, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 174, 203, .16) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* A single source-document card in the stack */
.doc-stack__card {
  position: absolute;
  background-color: var(--color-white);
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: var(--graphics-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.doc-stack__card--elevated {
  border-radius: var(--graphics-node-radius);
  box-shadow: var(--graphics-shadow-md);
}

.doc-stack__card-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.doc-stack__card-title {
  font-size: 10px;
  color: var(--color-navy-base);
}

.doc-stack__card-line {
  display: block;
  height: 3px;
  border-radius: 1px;
  background-color: #D7DEE8;
}

.doc-stack__card-tag {
  align-self: flex-start;
  padding: 2px 5px;
  border: 1.25px solid var(--accent);
  background-color: rgba(66, 125, 255, .06);
  font-size: 9px;
  color: var(--color-navy-base);
  font-variant-numeric: tabular-nums;
}

/* The connecting lines between scattered intake cards and the structured
   record — solid, matching the guide's "solid = automated" connector rule */
.doc-stack__connector {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

/* The gradient stat callout — the one place on this whole site a gradient
   fill is correct, because it's graphics-register, not a UI component */
.doc-stack__callout {
  position: absolute;
  background: var(--graphics-gradient);
  box-shadow: var(--graphics-glow), var(--graphics-shadow-md);
  border-radius: var(--graphics-node-radius);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doc-stack__callout-figure {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--type-stat-md-size);
  line-height: var(--type-stat-line);
  letter-spacing: var(--figure-track);
  font-variant-numeric: tabular-nums;
  color: var(--color-white);
}

.doc-stack__callout-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--type-label-track);
  text-transform: uppercase;
  color: var(--color-navy-base);
}

@media (max-width: 780px) {
  .doc-stack {
    display: none;
  }
}

/*
Second use: Technology Network's hero illustration — scattered partner-
platform cards converging into one "DataBank · integrated stack" status
card, with a dark stat badge. Built from that page's approved export
(design-handoff/technology-network.html, 2026-10-09) using its exact
recipe (positions as %, rotations, colors, cqw-relative sizing so it
scales with its own container rather than the viewport) — same
simplification approach as .doc-stack: a representative set of cards,
not pixel-for-pixel parity with every element.
*/
.tech-network {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 10 / 7.4;
  border-radius: 12px;
  overflow: hidden;
  background: #F4F6FA;
}

.tech-network__grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(0, 38, 61, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 38, 61, .07) 1px, transparent 1px);
  background-size: 5cqw 5cqw;
  transform: perspective(900px) rotateX(52deg) rotateZ(-30deg);
  mask-image: radial-gradient(55% 50% at 30% 55%, #000 30%, transparent 75%);
}

.tech-network__card {
  position: absolute;
  width: 38%;
  padding: 3.2cqw 3.6cqw;
  background-color: var(--color-white);
  border: 1px solid var(--line-hairline);
  border-radius: 2.2cqw;
  box-shadow: var(--graphics-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
}

.tech-network__card--dim {
  opacity: .42;
  filter: blur(1.5px);
  z-index: 1;
}

.tech-network__card--sharp {
  opacity: .88;
  z-index: 2;
}

.tech-network__card-label {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 1.7cqw;
  color: var(--text-tertiary);
}

.tech-network__card-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 3.1cqw;
  letter-spacing: -0.02em;
  color: var(--color-navy-base);
}

.tech-network__card-line {
  display: block;
  height: 1.1cqw;
  background-color: var(--graphics-dull);
  border-radius: 1px;
  opacity: .6;
}

.tech-network__connector {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.tech-network__stack {
  position: absolute;
  z-index: 4;
  width: 46%;
  padding: 3.4cqw 3.6cqw 2.4cqw;
  border-radius: 2.4cqw;
  border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--graphics-gradient) border-box;
  box-shadow: var(--graphics-shadow-lg), var(--graphics-glow);
}

.tech-network__stack-label {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 1.6cqw;
  color: var(--text-link);
  margin-bottom: 1.2cqw;
}

.tech-network__stack-title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 3.6cqw;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-navy-base);
  margin-bottom: 1.4cqw;
}

.tech-network__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 1.7cqw 0;
  border-bottom: 1px solid var(--line-hairline);
}

.tech-network__row:last-child {
  border-bottom: none;
}

.tech-network__row-name {
  display: flex;
  flex-direction: column;
  gap: .5cqw;
  min-width: 0;
}

.tech-network__row-title {
  font-size: 2.5cqw;
  font-weight: 500;
  color: var(--color-navy-base);
  white-space: nowrap;
}

.tech-network__row-tag {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 1.55cqw;
  color: var(--text-tertiary);
}

.tech-network__row-status {
  display: flex;
  align-items: center;
  gap: 1cqw;
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 1.55cqw;
  color: var(--color-navy-base);
  white-space: nowrap;
}

.tech-network__row-dot {
  width: 1.4cqw;
  height: 1.4cqw;
  border-radius: 50%;
}

.tech-network__badge {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 2.2cqw 3.2cqw;
  background-color: var(--color-navy-base);
  border-radius: 2cqw;
  box-shadow: var(--graphics-shadow-md);
}

.tech-network__badge-figure {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 6.4cqw;
  line-height: 1;
  color: var(--color-white);
}

.tech-network__badge-label {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 1.6cqw;
  line-height: 1.5;
  color: #DBE7FF;
  max-width: 20cqw;
}

@media (max-width: 780px) {
  .tech-network {
    display: none;
  }
}

/*
Third use, and the FIRST dark-mode graphics-register composition:
Document Scanning Services' hero illustration (Product/Solution
"secondary" template — technical-project-plan.md's Product/Solution
group, now built as "What We Do" per Scott's 2026-10-19 section plan).
A secondary page's hero is dark per page-depth rules, and every
secondary hero carries a graphic, so the light-only --graphics-* tokens
above can't render here — see tokens.css's --graphics-dark-* family,
added alongside this component. Built from the approved draft's exact
recipe (positions, rotations, the specific card contents), same
simplification approach as .doc-stack/.tech-network: a representative
set of cards, not every micro-element.

The visual idea: archive boxes (back, blurred, literally in the
customer's building) feed into a scan-and-quality-check card (mid), one
torn page is routed out to trained staff rather than blocking the
batch, and the batch lands as a clean, indexed, delivered folder
(front, full white card with the brand gradient border — the one
"finished state" element that gets to look light even inside a dark
hero, same logic as .doc-stack's gradient callout being the one
legitimate gradient fill in an otherwise flat UI). A dark stat badge
anchors the proof point.

Reuse for Refine/Manage/Activate's own secondary-hero graphics: new
illustration, same --graphics-dark-* tokens and the same back/mid/
front/badge layering idea — don't invent a second dark token set.
*/

.intake-capture {
  position: relative;
}

.intake-capture__card {
  position: absolute;
  border: 1px solid var(--graphics-dark-edge);
  border-radius: var(--graphics-node-radius);
  padding: 14px 16px;
}

.intake-capture__card--back {
  background: var(--graphics-dark-surface-back);
  box-shadow: var(--graphics-dark-shadow-sm);
  opacity: .45;
  filter: blur(1.5px);
}

.intake-capture__card--mid {
  background: var(--graphics-dark-surface);
  box-shadow: var(--graphics-dark-shadow-md);
  padding: 16px 18px 10px;
}

.intake-capture__card--front {
  position: absolute;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box,
              var(--graphics-gradient) border-box;
  box-shadow: var(--graphics-dark-shadow-lg), var(--graphics-dark-glow);
  padding: 16px 18px 12px;
  color: var(--color-navy-base);
}

.intake-capture__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--graphics-dark-dull);
}

.intake-capture__label--accent {
  color: var(--text-link);
}

.intake-capture__line {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--graphics-dark-dull);
  margin-top: 14px;
}

.intake-capture__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--graphics-dark-edge);
}

.intake-capture__row-icon {
  width: 20px;
  height: 26px;
  flex: 0 0 auto;
  background: rgba(255,255,255,.88);
  border-radius: 2px;
}

.intake-capture__row-icon--torn {
  clip-path: polygon(0 0, 100% 0, 100% 62%, 70% 78%, 100% 100%, 0 100%);
}

.intake-capture__row-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  color: var(--color-white);
}

.intake-capture__row-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
  color: var(--graphics-dark-ink-2);
  white-space: nowrap;
}

.intake-capture__row-status--alert {
  color: var(--color-accent-energy);
}

.intake-capture__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: var(--color-accent-government);
}

.intake-capture__dot--alert {
  background: var(--color-accent-energy);
}

.intake-capture__spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-top: var(--border-hairline);
  font-size: 13px;
}

.intake-capture__spec-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
  color: var(--text-secondary);
}

.intake-capture__badge {
  position: absolute;
  background: var(--graphics-dark-ground);
  border: 1px solid var(--graphics-dark-edge);
  border-radius: var(--graphics-node-radius);
  box-shadow: var(--graphics-dark-shadow-md);
  padding: 12px 16px;
}

.intake-capture__badge-figure {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 36px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-white);
}

.intake-capture__badge-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  line-height: 1.4;
  color: var(--graphics-dark-ink-2);
  margin-top: 8px;
}

@media (max-width: 780px) {
  .intake-capture {
    display: none;
  }
}

/* .refine-match — Data Refinement Services' hero illustration, second use
   of the dark graphics-register tokens (see .intake-capture above for the
   token rationale). Two conflicting source records (back, blurred) feed a
   match-and-extract card (mid) where one field needs a person, resolving
   to a single current record (front — the one light/gradient-bordered
   card, same logic as .intake-capture's front card). The proof badge is
   dashed, not solid, because unlike Intake's confirmed 100% stat this
   metric is genuinely pending approval — the dashed border is doing real
   work (don't solidify it until a real figure replaces the placeholder
   text it holds). Self-contained like every other composition in this
   file rather than sharing classes with .intake-capture, so future edits
   to one stage's graphic can't accidentally affect another's. */
.refine-match {
  position: relative;
}

.refine-match__card {
  position: absolute;
  border: 1px solid var(--graphics-dark-edge);
  border-radius: var(--graphics-node-radius);
  padding: 14px 16px;
}

.refine-match__card--back {
  background: var(--graphics-dark-surface-back);
  box-shadow: var(--graphics-dark-shadow-sm);
  opacity: .45;
  filter: blur(1.5px);
}

.refine-match__card--mid {
  background: var(--graphics-dark-surface);
  box-shadow: var(--graphics-dark-shadow-md);
  padding: 16px 18px 10px;
}

.refine-match__card--front {
  position: absolute;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box,
              var(--graphics-gradient) border-box;
  box-shadow: var(--graphics-dark-shadow-lg), var(--graphics-dark-glow);
  padding: 16px 18px 12px;
  color: var(--color-navy-base);
}

.refine-match__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--graphics-dark-dull);
}

.refine-match__label--accent {
  color: var(--graphics-dark-ink-2);
}

.refine-match__line {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--graphics-dark-dull);
  margin-top: 14px;
}

.refine-match__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--graphics-dark-edge);
}

.refine-match__row-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  color: var(--color-white);
}

.refine-match__row-status {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
  color: var(--graphics-dark-ink-2);
  white-space: nowrap;
}

.refine-match__row-status--alert {
  color: var(--color-accent-energy);
}

.refine-match__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: var(--color-accent-government);
}

.refine-match__dot--alert {
  background: var(--color-accent-energy);
}

.refine-match__spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-top: var(--border-hairline);
  font-size: 13px;
}

.refine-match__spec-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
  color: var(--text-secondary);
}

.refine-match__badge {
  position: absolute;
  background: var(--graphics-dark-ground);
  border: 1px dashed var(--graphics-dark-edge);
  border-radius: var(--graphics-node-radius);
  box-shadow: var(--graphics-dark-shadow-md);
  padding: 12px 16px;
}

.refine-match__badge-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  line-height: 1.4;
  color: var(--color-white);
}

.refine-match__badge-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  line-height: 1.4;
  color: var(--graphics-dark-ink-2);
  margin-top: 8px;
}

@media (max-width: 780px) {
  .refine-match {
    display: none;
  }
}

/* .manage-registry — Content Management Solutions' hero illustration,
   third dark-graphics composition. Scattered legacy repositories (back,
   blurred) feed a search window where a query returns records with
   mixed status (one current, one superseded, one missing a retention
   rule). The matched current record resolves into a governed record
   card (front, gradient-bordered, same role as the other two stages'
   front cards) alongside a donut-chart proof badge breaking the result
   set down by status — a real SVG chart rather than a text stat, since
   this stage's story is about a distribution, not a single figure.
   Self-contained, same reuse rule as .intake-capture/.refine-match: own
   classes, same --graphics-dark-* tokens. */
.manage-registry {
  position: relative;
}

.manage-registry__stack {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: .42;
  filter: blur(1.5px);
}

.manage-registry__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--graphics-dark-surface-back);
  border: 1px solid var(--graphics-dark-edge);
  border-radius: 10px;
  box-shadow: var(--graphics-dark-shadow-sm);
}

.manage-registry__chip-icon {
  width: 18px;
  height: 13px;
  flex: 0 0 auto;
  border: 1.5px solid var(--graphics-dark-dull);
  border-radius: 2px;
}

.manage-registry__chip-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--graphics-dark-dull);
}

.manage-registry__window {
  position: absolute;
  background: var(--graphics-dark-surface);
  border: 1px solid var(--graphics-dark-edge);
  border-radius: var(--graphics-node-radius);
  box-shadow: var(--graphics-dark-shadow-md);
  overflow: hidden;
}

.manage-registry__window-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--graphics-dark-edge);
}

.manage-registry__search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--graphics-dark-ground);
  border: 1px solid var(--graphics-dark-edge);
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manage-registry__count {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--graphics-dark-ink-2);
  white-space: nowrap;
}

.manage-registry__body {
  display: flex;
}

.manage-registry__nav {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px 12px 14px;
  border-right: 1px solid var(--graphics-dark-edge);
}

.manage-registry__nav-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--graphics-dark-ink-2);
  margin-bottom: 4px;
}

.manage-registry__nav-tag {
  font-size: 12px;
  color: var(--graphics-dark-ink-2);
  padding: 4px 6px;
  border-radius: 4px;
}

.manage-registry__nav-tag--active {
  color: var(--color-white);
  background: rgba(66, 125, 255, .22);
}

.manage-registry__results {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 8px 10px;
}

.manage-registry__result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
}

.manage-registry__result--active {
  background: rgba(66, 125, 255, .22);
}

.manage-registry__result-icon {
  width: 16px;
  height: 20px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .85);
  border-radius: 2px;
}

.manage-registry__result-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.manage-registry__result-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manage-registry__result-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--graphics-dark-ink-2);
  white-space: nowrap;
}

.manage-registry__result-status--muted {
  color: var(--graphics-dark-dull);
}

.manage-registry__result-status--alert {
  color: var(--color-accent-energy);
}

.manage-registry__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--color-accent-government);
}

.manage-registry__dot--muted {
  background: var(--graphics-dark-dull);
}

.manage-registry__dot--alert {
  background: var(--color-accent-energy);
}

.manage-registry__card {
  position: absolute;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box,
              var(--graphics-gradient) border-box;
  box-shadow: var(--graphics-dark-shadow-lg), var(--graphics-dark-glow);
  padding: 16px 18px 12px;
  color: var(--color-navy-base);
}

.manage-registry__card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.manage-registry__card-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 20px;
  letter-spacing: -0.02em;
  margin-top: 6px;
}

.manage-registry__spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-top: var(--border-hairline);
  font-size: 13px;
}

.manage-registry__spec-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
  color: var(--text-secondary);
}

.manage-registry__meter {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--graphics-dark-ground);
  border: 1px solid var(--graphics-dark-edge);
  border-radius: var(--graphics-node-radius);
  box-shadow: var(--graphics-dark-shadow-md);
  padding: 12px 16px;
}

.manage-registry__meter-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.manage-registry__meter-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
  color: var(--graphics-dark-ink-2);
  white-space: nowrap;
}

@media (max-width: 780px) {
  .manage-registry {
    display: none;
  }
}

/* .activate-flow — Data-Driven Workflow and Automation's hero
   illustration, fourth and final dark-graphics composition for the
   "What We Do" stages. Disconnected systems (back, blurred) feed an
   automation builder: a trigger/step/rule flow where complete
   submissions route straight to an action and incomplete ones branch
   to a person, resolving into a running-automation status card and a
   small runs-per-week sparkline. The richest composition of the four —
   this stage's whole story is "connected systems," so the graphic
   needed an explicit node diagram, not just stacked cards. Same reuse
   rule as the other three: own classes, same --graphics-dark-* tokens. */
.activate-flow {
  position: relative;
}

.activate-flow__systems {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  opacity: .42;
  filter: blur(1.5px);
}

.activate-flow__system {
  padding: 10px 12px;
  background: var(--graphics-dark-surface-back);
  border: 1px solid var(--graphics-dark-edge);
  border-radius: 10px;
  box-shadow: var(--graphics-dark-shadow-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--graphics-dark-dull);
  white-space: nowrap;
}

.activate-flow__board {
  position: absolute;
  background: var(--graphics-dark-surface);
  border: 1px solid var(--graphics-dark-edge);
  border-radius: var(--graphics-node-radius);
  box-shadow: var(--graphics-dark-shadow-md);
  overflow: hidden;
  container-type: inline-size;
}

.activate-flow__board-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--graphics-dark-edge);
}

.activate-flow__board-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--graphics-dark-ink-2);
  white-space: nowrap;
}

.activate-flow__board-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--color-white);
  white-space: nowrap;
}

.activate-flow__canvas {
  position: relative;
  aspect-ratio: 100 / 64;
  background-image: radial-gradient(rgba(143, 174, 203, .22) 1px, transparent 1.2px);
  background-size: 14px 14px;
}

.activate-flow__paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.activate-flow__node {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 8px;
  background: var(--graphics-dark-ground);
  border: 1px solid var(--graphics-dark-edge);
  border-radius: 8px;
  overflow: hidden;
}

.activate-flow__node--highlight {
  border-color: var(--accent);
}

.activate-flow__node--pending {
  border: 1px dashed var(--color-accent-energy);
}

.activate-flow__node-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--graphics-dark-ink-2);
  white-space: nowrap;
}

.activate-flow__node--pending .activate-flow__node-label {
  color: var(--color-accent-energy);
}

.activate-flow__node-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(11px, 2.9cqw, 14px);
  line-height: 1.15;
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activate-flow__card {
  position: absolute;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box,
              var(--graphics-gradient) border-box;
  box-shadow: var(--graphics-dark-shadow-lg), var(--graphics-dark-glow);
  padding: 14px 18px 12px;
  color: var(--color-navy-base);
}

.activate-flow__card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.activate-flow__toggle {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: var(--color-blue-base);
}

.activate-flow__toggle-knob {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-white);
}

.activate-flow__card-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 20px;
  letter-spacing: -0.02em;
  margin-top: 6px;
}

.activate-flow__spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-top: var(--border-hairline);
  font-size: 13px;
}

.activate-flow__spec-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
  color: var(--text-secondary);
}

.activate-flow__chart {
  position: absolute;
  background: var(--graphics-dark-ground);
  border: 1px solid var(--graphics-dark-edge);
  border-radius: var(--graphics-node-radius);
  box-shadow: var(--graphics-dark-shadow-md);
  padding: 12px 14px;
}

.activate-flow__chart-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--color-white);
  margin-top: 8px;
  white-space: nowrap;
}

@media (max-width: 780px) {
  .activate-flow {
    display: none;
  }
}

/*
.usecase-diagram — added 2026-10-20 for the first Industry Use Case page
(Eligibility and Benefits Case Documentation, Challenges We Solve →
Industry Challenges → Public Sector tier). Light graphics-register
composition (opaque white cards, the --graphics-shadow and --graphics-dull
tokens — the same family doc-stack/tech-network use, not the dark variant), since
this tier's hero is light regardless of industry. Same scattered-
background-cards-converging-on-one-crisp-foreground-card recipe as
.intake-capture/.tech-network, reused here as a generic "documents
arrive from several channels, assemble into one case record" shape
every future Industry Use Case page can restyle with its own channel/
row content via PHP, not just this one page. Status dots reuse the same
fixed semantic pair already established by .intake-capture:
--color-accent-government for a resolved/validated row,
--color-accent-energy for one still needing a person's review —
independent of the page's own [data-subbrand] industry accent, same as
every prior page that's used this pair.
*/
.usecase-diagram {
  position: relative;
  aspect-ratio: 6 / 5.8;
}

.usecase-diagram__card {
  position: absolute;
  background: var(--color-white);
  border: 1px solid var(--line-hairline);
  border-radius: var(--graphics-node-radius);
  padding: 14px 16px;
}

.usecase-diagram__card--back {
  box-shadow: var(--graphics-shadow-sm);
  opacity: .45;
  filter: blur(1.5px);
}

.usecase-diagram__card--front {
  box-shadow: var(--graphics-shadow-md);
  opacity: .92;
  padding: 16px 18px 10px;
}

.usecase-diagram__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--text-tertiary);
}

.usecase-diagram__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.usecase-diagram__chip {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--text-tertiary);
  border: 1px solid var(--graphics-dull);
  border-radius: 3px;
  padding: 3px 6px;
}

.usecase-diagram__line {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--graphics-dull);
  margin-top: 14px;
}

.usecase-diagram__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line-hairline);
}

.usecase-diagram__row-icon {
  width: 20px;
  height: 26px;
  flex: 0 0 auto;
  background: var(--color-lightblue);
  border-radius: 2px;
}

.usecase-diagram__row-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  white-space: nowrap;
}

.usecase-diagram__row-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--color-accent-government-ink);
}

.usecase-diagram__row-status--alert {
  color: var(--color-accent-energy-ink);
}

.usecase-diagram__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: var(--color-accent-government);
}

.usecase-diagram__dot--alert {
  background: var(--color-accent-energy);
}

@media (max-width: 780px) {
  .usecase-diagram {
    display: none;
  }
}

/* .agency-ops — the Public Sector Industry Challenges hub page's hero
   illustration, fifth dark-graphics composition, built from the real
   recipe in design-handoff/public-sector.html (positions as %,
   rotations, colors, labels — same build philosophy as every prior
   composition, simplified to a representative set rather than
   pixel-for-pixel). Two blurred source documents (back) feed an
   "Agency operations: this week" status card (front, left) showing 3
   real-feeling line items with status chips — two validated (teal,
   government accent), one still in review (amber, energy accent) —
   resolving into the one legitimate gradient-bordered card, "Work
   ready to run" (front, right, same role as every other stage's front
   card across .intake-capture/.refine-match/.manage-registry/
   .activate-flow). A dark stat badge ("180,000+") anchors the real
   State Services Agency proof stat directly in the hero, same pattern
   as .tech-network's "9" badge. Self-contained, same --graphics-dark-*
   tokens as every prior composition. */
.agency-ops {
  position: relative;
  aspect-ratio: 6 / 5.4;
}

.agency-ops__source {
  position: absolute;
  opacity: .42;
  filter: blur(1.5px);
  background: var(--graphics-dark-surface-back);
  border: 1px solid var(--graphics-dark-edge);
  border-radius: 12px;
  box-shadow: var(--graphics-dark-shadow-sm);
  padding: 14px 16px;
}

.agency-ops__source-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--graphics-dark-ink-2);
}

.agency-ops__source-line {
  height: 6px;
  background: var(--graphics-dark-dull);
  border-radius: 3px;
  margin-top: 8px;
}

.agency-ops__status {
  position: absolute;
  background: var(--graphics-dark-surface);
  border: 1px solid var(--graphics-dark-edge);
  border-radius: 12px;
  box-shadow: var(--graphics-dark-shadow-md);
  padding: 16px 18px 10px;
  color: var(--graphics-dark-ink);
}

.agency-ops__status-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--graphics-dark-ink-2);
}

.agency-ops__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--graphics-dark-edge);
}

.agency-ops__row-icon {
  width: 20px;
  height: 26px;
  flex: 0 0 auto;
  background: rgba(143, 174, 203, .28);
  border-radius: 2px;
}

.agency-ops__row-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  white-space: nowrap;
}

.agency-ops__row-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
  white-space: nowrap;
  flex: 0 0 auto;
}

.agency-ops__row-status--done {
  color: var(--color-accent-government);
}

.agency-ops__row-status--review {
  color: var(--color-accent-energy);
}

.agency-ops__row-dot {
  width: 7px;
  height: 7px;
  background: currentColor;
}

.agency-ops__work {
  position: absolute;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--graphics-gradient) border-box;
  box-shadow: var(--graphics-dark-shadow-lg), var(--graphics-dark-glow);
  padding: 16px 18px 12px;
  color: var(--color-navy-base);
}

.agency-ops__work-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--text-link);
}

.agency-ops__work-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 22px;
  letter-spacing: -.02em;
  margin-top: 6px;
}

.agency-ops__work-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line-hairline);
}

.agency-ops__work-row-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
  color: var(--text-tertiary);
  flex: 0 0 auto;
}

.agency-ops__work-row-value {
  font-size: 13px;
  color: var(--text-secondary);
}

.agency-ops__badge {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-navy-base);
  border-radius: 12px;
  box-shadow: var(--graphics-dark-shadow-md);
  padding: 14px 16px;
  color: var(--color-white);
}

.agency-ops__badge-figure {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 28px;
  letter-spacing: -.02em;
}

.agency-ops__badge-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
  color: var(--graphics-dark-ink-2);
  max-width: 14ch;
}

@media (max-width: 780px) {
  .agency-ops {
    display: none;
  }
}

/* .industry-docs — the Industry Challenges SECONDARY page's hero
   illustration (the page one level above the 7 industry hub pages,
   e.g. .agency-ops' own Public Sector page), sixth dark-graphics
   composition. Built from the real recipe in
   design-handoff/industry-challenges.html: 2 blurred, unlabeled
   "incoming" document cards (Education, Healthcare Payers) behind 4
   sharper "in process" cards, each from a different industry, each
   with its own status chip — VALIDATED (government teal) or REVIEW
   (energy amber), the same 2-color semantic status system already
   established in .agency-ops, used here as a generic status indicator
   independent of each card's own industry, not tied to that industry's
   accent color. Same --graphics-dark-* tokens, no new tokens needed. */
.industry-docs {
  position: relative;
  aspect-ratio: 6 / 4.2;
}

.industry-docs__card {
  position: absolute;
  background: var(--graphics-dark-surface);
  border: 1px solid var(--graphics-dark-edge);
  border-radius: 12px;
  box-shadow: var(--graphics-dark-shadow-md);
  padding: 14px 16px 10px;
  color: var(--graphics-dark-ink);
}

.industry-docs__card--incoming {
  opacity: .42;
  filter: blur(1.5px);
  background: var(--graphics-dark-surface-back);
  box-shadow: var(--graphics-dark-shadow-sm);
}

.industry-docs__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.industry-docs__icon {
  width: 20px;
  height: 26px;
  flex: 0 0 auto;
  background: rgba(143, 174, 203, .28);
  border-radius: 2px;
}

.industry-docs__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.industry-docs__industry {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  color: var(--graphics-dark-ink-2);
  white-space: nowrap;
}

.industry-docs__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  white-space: nowrap;
}

.industry-docs__status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--graphics-dark-edge);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
  white-space: nowrap;
}

.industry-docs__status--validated {
  color: var(--color-accent-government);
}

.industry-docs__status--review {
  color: var(--color-accent-energy);
}

.industry-docs__status-dot {
  width: 7px;
  height: 7px;
  background: currentColor;
}

@media (max-width: 780px) {
  .industry-docs {
    display: none;
  }
}