/* UnifiedFlow */

.c-unified-flow {
  display: grid;
  gap: 32px;
}
/* grid children never expand the track past the viewport — without this the
   820px+ flow diagrams blow the page wide on phones instead of panning
   inside their overflow-x frame */
.c-unified-flow > * { min-width: 0; }
@media (min-width: 1024px) {
  .c-unified-flow {
    grid-template-columns: 260px 1fr;
    gap: 48px;
  }
}

.c-unified-flow__aside { display: none; }
@media (min-width: 1024px) {
  .c-unified-flow__aside {
    display: block;
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

.c-unified-flow__nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-unified-flow__nav-link {
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-dark);
  background: var(--color-black);
  padding: 10px 16px;
  font-size: var(--fs-sm);
  line-height: 20px;
  font-weight: 500;
  color: var(--color-grey-on-black);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.c-unified-flow__nav-link:hover { color: var(--color-white); }

/* the unified offering wears its blue identity permanently, selected or not */
.c-unified-flow__nav-link--emphasized {
  border-color: color-mix(in srgb, var(--color-blue) 40%, transparent);
  background: linear-gradient(120deg, var(--color-blue) 0%, var(--color-grey-600) 100%);
  color: var(--color-white);
}

/* selection signal = white outline, on any tab (unified stays blue under it) */
.c-unified-flow__nav-link.is-active {
  border-color: rgba(255, 255, 255, 0.92);
  color: var(--color-white);
}

.c-unified-flow__articles {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.c-unified-flow__article {
  scroll-margin-top: 96px;
  border-radius: 16px;
  border: 1px solid var(--color-border-dark);
  background: var(--color-black);
  padding: 24px;
}
@media (min-width: 1024px) {
  .c-unified-flow__article { padding: 32px; }
}

.c-unified-flow__flag {
  font-size: var(--fs-xs);
  line-height: 16px;
  font-weight: 500;
  color: var(--color-blue-200);
}
@media (min-width: 1024px) {
  .c-unified-flow__flag { display: none; }
}

.c-unified-flow__title {
  font-size: 24px;
  line-height: 32px;
  color: var(--color-white);
}
@media (min-width: 768px) {
  .c-unified-flow__title { font-size: 30px; line-height: 36px; }
}
.c-unified-flow__article--emphasized .c-unified-flow__title { margin-top: 4px; }
@media (min-width: 1024px) {
  .c-unified-flow__article--emphasized .c-unified-flow__title { margin-top: 0; }
}

.c-unified-flow__body {
  margin-top: 8px;
  max-width: 768px;
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--color-grey-on-black);
}
.c-unified-flow__body p + p { margin-top: 4px; }

.c-unified-flow__diagram {
  margin-top: 24px;
  width: 100%;
  /* Pannable on narrow screens, but never show a scrollbar — the flows
     reserve their full height via .c-flow padding, so nothing clips. */
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 16px;
  border: 1px solid var(--color-border-dark);
  background: var(--color-black);
  padding: 24px;
}
.c-unified-flow__diagram::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .c-unified-flow__diagram { padding: 32px; }
}

/* ---- Flow diagrams (HTML rebuild) ----
   Art tiles are crops of the original v2 diagram PNGs (public/flow-tiles/);
   labels, pills, and checklists are real text. Greys are color-mixed to the
   values sampled from the art (line #323232, pill #373737, card #494949) so
   the HTML pieces match the baked tile colors. */

.c-flow {
  --flow-tile: 88px;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 640px;
}
.c-flow--govmatch {
  min-width: 820px;
  padding-block: 88px 140px;
}
/* Block padding reserves room for the absolutely-positioned labels and the
   straddling boxes, so the frames show every flow complete — no clipping. */
.c-flow--govfacematch { padding: 24px 0 100px; }
.c-flow--govdatamatch { padding-bottom: 60px; }
@media (max-width: 767px) {
  .c-flow { --flow-tile: 72px; }
}

.c-flow__node {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.c-flow__tile {
  display: block;
  height: var(--flow-tile);
  width: auto;
  flex: none;
}

.c-flow__tilewrap {
  position: relative;
  display: block;
  flex: none;
}

.c-flow__line {
  flex: 1 1 24px;
  min-width: 20px;
  height: 2px;
  background: color-mix(in srgb, var(--color-grey-50) 20%, var(--color-black));
}
.c-flow__line--short {
  flex: none;
  width: 20px;
}
.c-flow__line--env {
  flex: none;
  width: 116px;
}

/* Label pill: green dot + text. Floats under its node by default so it
   doesn't disturb the vertical centering of the flow axis. */
.c-flow__label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-grey-50) 22%, var(--color-black));
  padding: 6px 12px;
  font-size: var(--fs-xs);
  line-height: 16px;
  font-weight: 500;
  color: var(--color-white);
}
.c-flow__label::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-green-flow);
}
.c-flow__label--inflow {
  position: static;
  transform: none;
  margin-top: 14px;
}
@media (max-width: 767px) {
  .c-flow__label { font-size: var(--fs-xs); line-height: 14px; padding: 4px 10px; }
}

/* Field checklist card (data attributes / real-time result). */
.c-flow__card {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-grey-50) 29%, var(--color-black));
  padding: 14px 16px;
}
.c-flow__card--result {
  border: 1.5px solid var(--color-green-flow);
}

.c-flow__field {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: var(--fs-xs);
  line-height: 15px;
  color: var(--color-grey-on-black);
}
.c-flow__field svg {
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--color-grey-300);
}
.c-flow__field--check svg { color: var(--color-green-flow); }
@media (max-width: 767px) {
  .c-flow__field { font-size: var(--fs-xs); gap: 6px; }
  .c-flow__card { padding: 11px 12px; gap: 6px; }
}

/* Check badge on the flow axis (HTML twin of the one baked into the art). */
.c-flow__badge {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(45%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--color-green-flow);
  border: 4px solid color-mix(in srgb, var(--color-grey-50) 10%, var(--color-black));
  color: var(--color-white);
}

/* GovMatch branch: the loop rectangle with GovFaceMatch straddling the top
   edge and GovDataMatch straddling the bottom edge. The row's block padding
   (.c-flow--govmatch) reserves room for the overflow. */
/* Height = the straddling halves of both nodes (65px portrait group above,
   100px checklist below) + ~55px of clear air between them, so the two
   never overlap — matching the original art's vertical rhythm. */
.c-flow__branch {
  position: relative;
  flex: none;
  width: 232px;
  height: 220px;
  border: 2px solid color-mix(in srgb, var(--color-grey-50) 20%, var(--color-black));
  border-radius: 16px;
}
.c-flow__branch-node {
  position: absolute;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.c-flow__branch-node--top {
  top: 0;
  transform: translate(-50%, -50%);
}
.c-flow__branch-node--bottom {
  bottom: 0;
  transform: translate(-50%, 50%);
}
/* Mask the branch border behind the straddling tile's transparent corners. */
.c-flow__branch-node .c-flow__tile {
  background-color: var(--color-black);
  border-radius: 8px;
}
@media (max-width: 767px) {
  .c-flow__branch { width: 190px; height: 180px; }
  .c-flow--govmatch { padding-block: 76px 124px; }
}

/* GovFaceMatch DMV-environment box: blue border, gradient tag straddling the
   top edge. Labels float under their tiles (same 18px offset as the rest of
   the flow, so all four labels share one baseline per the 2026-07-21 SVG);
   the bottom padding keeps them inside the box, which extends below the
   label row like the design. The negative bottom margin re-centers the flow
   axis on the tiles. */
.c-flow__env {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 36px 60px 118px;
  margin-bottom: -82px;
  border: 1.5px solid color-mix(in srgb, var(--color-blue) 55%, transparent);
  border-radius: 16px;
}
/* faint captions under the env labels + the note riding the connector
   (per the GovFaceMatch reference, 2026-07-24) */
.c-flow__note {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 62px;
  width: 200px;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-grey-50) 55%, transparent);
}
.c-flow__envmid {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
}
.c-flow__linenote {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  /* wide enough for "against live data" on one line (2-line note) */
  width: 116px;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-grey-50) 55%, transparent);
}
.c-flow__env-node {
  position: relative;
  flex: none;
}
.c-flow__env-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-blue-500) 45%, var(--color-black)),
    var(--color-blue-500)
  );
  padding: 7px 16px;
  font-size: var(--fs-sm);
  line-height: 16px;
  font-weight: 500;
  color: var(--color-white);
}
@media (max-width: 767px) {
  .c-flow__env-tag { font-size: var(--fs-xs); line-height: 14px; padding: 5px 12px; }
}

/* ---------- completion-flow animation (Sofia, 2026-07-24) ----------
   Applied only under .c-flow--anim (added by JS), so no-JS renders the
   diagrams complete. Stages are the flow's direct children: they pop on
   left to right, connector lines draw, and the result checklist ticks
   in one field at a time. .is-played toggles per viewport entry. */
.c-flow--anim > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s var(--ease-out-expo), transform 0.55s var(--ease-out-expo);
}
.c-flow--anim > .c-flow__line {
  transform: scaleX(0);
  transform-origin: left center;
}
.c-flow--anim.is-played > * {
  opacity: 1;
  transform: none;
}
/* left-to-right stage stagger (widest flow has 7 direct children) */
.c-flow--anim.is-played > :nth-child(1) { transition-delay: 0s; }
.c-flow--anim.is-played > :nth-child(2) { transition-delay: 0.4s; }
.c-flow--anim.is-played > :nth-child(3) { transition-delay: 0.65s; }
.c-flow--anim.is-played > :nth-child(4) { transition-delay: 1.05s; }
.c-flow--anim.is-played > :nth-child(5) { transition-delay: 1.45s; }
.c-flow--anim.is-played > :nth-child(6) { transition-delay: 1.7s; }
.c-flow--anim.is-played > :nth-child(7) { transition-delay: 2.1s; }
/* the DMV Environment box lands as a frame, then its two inner steps play
   in sequence: Face Match Engine → connector → DMV Image Database */
.c-flow--anim .c-flow__env > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}
.c-flow--anim .c-flow__envmid .c-flow__line--env {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-out-expo);
}
.c-flow--anim.is-played .c-flow__envmid .c-flow__line--env {
  transform: none;
  transition-delay: 1.3s;
}
.c-flow--anim.is-played .c-flow__env > * {
  opacity: 1;
  transform: none;
}
/* the environment tag straddles the frame's top border via a centering
   translate — the animation's transform reset must not strip it */
.c-flow--anim .c-flow__env > .c-flow__env-tag {
  transform: translate(-50%, calc(-50% + 8px));
}
.c-flow--anim.is-played .c-flow__env > .c-flow__env-tag {
  transform: translate(-50%, -50%);
}
.c-flow--anim.is-played .c-flow__env > :nth-child(1) { transition-delay: 0.65s; }
.c-flow--anim.is-played .c-flow__env > :nth-child(2) { transition-delay: 0.9s; }
.c-flow--anim.is-played .c-flow__env > :nth-child(3) { transition-delay: 1.3s; }
.c-flow--anim.is-played .c-flow__env > :nth-child(4) { transition-delay: 1.55s; }
/* GovFaceMatch's stages after the environment wait for its inner sequence */
.c-flow--anim.is-played.c-flow--govfacematch > :nth-child(4) { transition-delay: 2s; }
.c-flow--anim.is-played.c-flow--govfacematch > :nth-child(5) { transition-delay: 2.3s; }

/* the result checklist completes field by field after its stage lands */
.c-flow--anim .c-flow__card--result .c-flow__field {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.c-flow--anim.is-played .c-flow__card--result .c-flow__field:nth-child(1) { opacity: 1; transition-delay: 2.25s; }
.c-flow--anim.is-played .c-flow__card--result .c-flow__field:nth-child(2) { opacity: 1; transition-delay: 2.4s; }
.c-flow--anim.is-played .c-flow__card--result .c-flow__field:nth-child(3) { opacity: 1; transition-delay: 2.55s; }
.c-flow--anim.is-played .c-flow__card--result .c-flow__field:nth-child(4) { opacity: 1; transition-delay: 2.7s; }
.c-flow--anim.is-played .c-flow__card--result .c-flow__field:nth-child(5) { opacity: 1; transition-delay: 2.85s; }
.c-flow--anim.is-played .c-flow__card--result .c-flow__field:nth-child(6) { opacity: 1; transition-delay: 3s; }
/* the closing badge lands last */
.c-flow--anim .c-flow__card--result .c-flow__badge,
.c-flow--anim .c-flow__tilewrap .c-flow__badge {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
}
.c-flow--anim.is-played .c-flow__card--result .c-flow__badge,
.c-flow--anim.is-played .c-flow__tilewrap .c-flow__badge {
  opacity: 1;
  transform: none;
  transition-delay: 3.2s;
}

/* ---------- Mobile reflow (≤767px): rotate each flow to a vertical stack ----------
   Desktop keeps the wide left-to-right flows (min-width 640–820px). On a phone
   those used to sit inside a hidden-scrollbar overflow-x frame, so the reader saw
   a tall black box and had to blind-pan sideways to find anything. Here the same
   nodes, labels, pills and checklists (composition unchanged) reflow top-to-bottom
   so the whole diagram fits the viewport and reads with the page's own scroll.
   Only layout/positioning is touched — the reveal-animation opacity stages are
   left alone, so the completion animation still plays as each flow scrolls in. */
@media (max-width: 767px) {
  .c-flow,
  .c-flow--govmatch,
  .c-flow--govfacematch,
  .c-flow--govdatamatch {
    min-width: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
  }

  /* One vertical rhythm for every station: a single 12px flex gap sets the
     space between stacked tiles, between a tile and its pill, and between a
     pill and its caption — so the tile→pill spacing is identical in the plain
     nodes, the branch routes, and the DMV-environment nodes (no pill ever
     touches its image). */
  .c-flow__node {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  /* connectors run vertically between stations */
  .c-flow__line {
    flex: none;
    width: 2px;
    min-width: 0;
    height: 28px;
  }
  .c-flow__line--short { width: 2px; height: 16px; }

  /* labels drop straight under their tile instead of floating absolutely; the
     station's flex gap (12px) owns the spacing, so every margin is cleared —
     including the inflow variant's desktop margin-top — to keep it uniform */
  .c-flow__label {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    margin-top: 0;
    white-space: normal;
    text-align: center;
  }
  .c-flow__label--inflow { margin-top: 0; }

  /* GovMatch branch: the loop rectangle becomes a bordered card holding the
     two routes stacked (GovFaceMatch above, GovDataMatch below). display:flex
     is required — the base rule is display:block (its nodes are absolutely
     positioned on desktop), so without this the gap below is a no-op and the
     GovFaceMatch pill sits flush on the checklist card. */
  .c-flow__branch {
    position: static;
    display: flex;
    width: 100%;
    max-width: 300px;
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    margin: 0 auto;
    padding: 28px 16px;
  }
  .c-flow__branch-node,
  .c-flow__branch-node--top,
  .c-flow__branch-node--bottom {
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    transform: none;
    gap: 12px;
  }

  /* GovFaceMatch DMV-environment box: stack the engine + database nodes with a
     vertical connector between them; the tag still straddles the top edge */
  .c-flow__env {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 44px 16px 24px;
  }
  .c-flow__env-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .c-flow__envmid {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .c-flow__line--env { width: 2px; height: 40px; }
  .c-flow__linenote {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    width: auto;
    margin-top: 0;
  }
  .c-flow__note {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: 240px;
    margin-top: 0;
  }
}