/* ============================================================
   Non-Document Verification — page-scoped styles.
   Today this is ONLY the How-it-works phone overlays (ndvh1–4):
   per-step animated stories over the shared HowItWorks stage
   (pattern precedent: digital-id.css § dgid-faceid / dgid-verify).
   Steps 1–2 ride the real product screen (Camila's Figma export,
   Website-visuals 208-3761: field boxes at x=24 w=342, rows top
   206/300/394/488/582, 22px label band + 56px box); steps 3–4 ride
   real captures. All sizes in cqw against the 390-wide screen
   (px ÷ 3.9); animations key off .is-active and play once per
   activation; reduced motion rests on the finished state.
   ============================================================ */

/* ---- shared stage scaffold ----
   The rich screens size their overlays in cqw against the phone
   screen (intrinsic 390×844): 1cqw = rendered-width / 100. */
.p-product--non-document-verification .sol-stage__screen--rich {
  container-type: inline-size;
}

/* floating annotations (all four steps) escape the phone edge — the
   cards poke past the bezel like the kyc-aml hero diagram. */
.p-product--non-document-verification .sol-stage__screen--rich {
  overflow: visible;
}

/* no bezel on this page's walk phone — the screen IS the phone
   (Camila 2026-08-10: "remove the white border, leave only the full
   screen"). The screens keep their own 34px radius. */
.p-product--non-document-verification .sol-how__phone {
  padding: 0;
  border: 0;
  background: transparent;
}

/* (the active-bullet-only walk bar this page pioneered is now the
   site-wide behavior — the bar itself is retired in solution.css and
   solution-hero.js stamps .is-done; no page override needed.) */

/* ---- ndvh1 · Unified data access ---- */
/* The review screen carries the data (baked); the four sources confirm
   in a floating card off the phone's right edge (Camila 2026-08-10:
   same annotation family as the ndvh3 signals card — the bottom-sheet
   take is retired). */

.p-product--non-document-verification .ndvh1 {
  position: absolute;
  inset: 0;
  z-index: 2;
  font-family: var(--font-sans);
  pointer-events: none;
}
.p-product--non-document-verification .ndvh1-card {
  position: absolute;
  right: -96px;
  top: 52cqw; /* below the screen title, over the top field rows */
  width: 208px;
  padding: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-100);
  border-radius: 14px;
  opacity: 0;
  transform: translateY(2.051cqw);
}
.p-product--non-document-verification .ndvh1-card__head {
  margin: 0 0 8px;
  font-size: 10px;
  line-height: 1;
  color: var(--color-grey-400);
}
.p-product--non-document-verification .ndvh1-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
}
.p-product--non-document-verification .ndvh1-row:last-child { margin-bottom: 0; }
.p-product--non-document-verification .ndvh1-row__disc {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--color-grey-200);
}
.p-product--non-document-verification .ndvh1-row__check {
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: var(--color-blue-500);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.4);
}
.p-product--non-document-verification .ndvh1-row__check svg {
  width: 60%;
  height: 60%;
}
.p-product--non-document-verification .ndvh1-row__label {
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  color: var(--color-grey-500);
}

/* card 0.1s -> sources confirm 0.6/1.0/1.4/1.8s */
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh1-card {
  animation: ndvh2-card-in 0.45s ease 0.1s forwards;
}
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh1-row__check {
  animation: ndvh1-check-pop 0.28s ease forwards;
}
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh1-row--1 .ndvh1-row__check { animation-delay: 0.6s; }
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh1-row--2 .ndvh1-row__check { animation-delay: 1.0s; }
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh1-row--3 .ndvh1-row__check { animation-delay: 1.4s; }
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh1-row--4 .ndvh1-row__check { animation-delay: 1.8s; }

@keyframes ndvh1-check-pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .p-product--non-document-verification .ndvh1-card,
  .p-product--non-document-verification .ndvh1-row__check {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---- ndvh2 · Proprietary fuzzy matching ---- */
/* The Last name box (x=24 y=322 w=342 h=56) rings blue; a dotted wire
   drops to a floating match card — input "Johsnon" vs registry
   "Johnson" — that pokes off the phone's left edge (kyc-aml hero
   language); the match line confirms with a blue check. */

.p-product--non-document-verification .ndvh2 {
  position: absolute;
  inset: 0;
  z-index: 2;
  font-family: var(--font-sans);
  pointer-events: none;
}
.p-product--non-document-verification .ndvh2-ring {
  position: absolute;
  left: 5.641cqw;
  top: 82.051cqw;
  width: 88.718cqw;
  height: 15.385cqw;
  border: 0.513cqw solid var(--color-blue-500);
  border-radius: 3.077cqw;
  opacity: 0;
}
.p-product--non-document-verification .ndvh2-wire {
  position: absolute;
  left: 15.385cqw;
  top: 97.949cqw;
  height: 11.795cqw;
  border-left: 1px dotted var(--color-grey-300);
  transform: scaleY(0);
  transform-origin: top center;
}
.p-product--non-document-verification .ndvh2-card {
  position: absolute;
  left: -120px;
  top: 108.718cqw;
  width: 200px;
  padding: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-100);
  border-radius: 14px;
  opacity: 0;
  transform: translateY(2.051cqw);
}
.p-product--non-document-verification .ndvh2-card__head {
  margin: 0 0 8px;
  font-size: 10px;
  line-height: 1;
  color: var(--color-grey-400);
}
.p-product--non-document-verification .ndvh2-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 5px;
}
.p-product--non-document-verification .ndvh2-row__label {
  flex: none;
  width: 52px;
  font-size: 10px;
  color: var(--color-grey-400);
}
.p-product--non-document-verification .ndvh2-row__value {
  font-size: 13px;
  line-height: 1.2;
  color: var(--color-grey-500);
}
.p-product--non-document-verification .ndvh2-row__value--typo {
  text-decoration: underline dotted var(--color-grey-300);
  text-underline-offset: 3px;
}
.p-product--non-document-verification .ndvh2-row__value--match {
  font-weight: 600;
  color: var(--color-grey-600);
}
.p-product--non-document-verification .ndvh2-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--color-grey-100);
}
.p-product--non-document-verification .ndvh2-foot__disc {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-blue-500);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.4);
}
.p-product--non-document-verification .ndvh2-foot__disc svg {
  width: 60%;
  height: 60%;
}
.p-product--non-document-verification .ndvh2-foot__text {
  margin: 0;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  color: var(--color-grey-500);
}

/* ring 0.05s → wire draws 0.45s → card rises 0.6s → match confirms 1.6s */
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh2-ring {
  animation: ndvh2-fade-in 0.3s ease 0.05s forwards;
}
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh2-wire {
  animation: ndvh2-wire-draw 0.25s ease 0.45s forwards;
}
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh2-card {
  animation: ndvh2-card-in 0.45s ease 0.6s forwards;
}
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh2-foot__disc {
  animation: ndvh1-check-pop 0.3s ease 1.6s forwards;
}

@keyframes ndvh2-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ndvh2-wire-draw {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes ndvh2-card-in {
  from { opacity: 0; transform: translateY(2.051cqw); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .p-product--non-document-verification .ndvh2-ring,
  .p-product--non-document-verification .ndvh2-card,
  .p-product--non-document-verification .ndvh2-foot__disc {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .p-product--non-document-verification .ndvh2-wire {
    animation: none;
    transform: none;
  }
}

/* ---- ndvh3 · Dynamic risk logic ---- */
/* A floating card off the phone's right edge (Camila 2026-08-10:
   checks in a floating container, not inside the screen): four signal
   rows confirm in sequence, then the risk dot glides down the track
   and settles on Low. Base: the real verifying capture. */

.p-product--non-document-verification .ndvh3 {
  position: absolute;
  inset: 0;
  z-index: 2;
  font-family: var(--font-sans);
  pointer-events: none;
}
.p-product--non-document-verification .ndvh3-card {
  position: absolute;
  right: -96px;
  top: 24.615cqw;
  width: 208px;
  padding: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-100);
  border-radius: 14px;
  opacity: 0;
  transform: translateY(2.051cqw);
}
.p-product--non-document-verification .ndvh3-card__head {
  margin: 0 0 8px;
  font-size: 10px;
  line-height: 1;
  color: var(--color-grey-400);
}
.p-product--non-document-verification .ndvh3-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
}
.p-product--non-document-verification .ndvh3-row__disc {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--color-grey-200);
}
.p-product--non-document-verification .ndvh3-row__check {
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: var(--color-blue-500);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.4);
}
.p-product--non-document-verification .ndvh3-row__check svg {
  width: 60%;
  height: 60%;
}
.p-product--non-document-verification .ndvh3-row__label {
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  color: var(--color-grey-500);
}
.p-product--non-document-verification .ndvh3-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-grey-100);
}
.p-product--non-document-verification .ndvh3-foot__label {
  flex: none;
  font-size: 10px;
  color: var(--color-grey-400);
}
.p-product--non-document-verification .ndvh3-foot__track {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-product--non-document-verification .ndvh3-foot__dot {
  position: absolute;
  top: 50%;
  left: 86%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-blue-500);
  transform: translate(-50%, -50%);
}
.p-product--non-document-verification .ndvh3-foot__read {
  flex: none;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  color: var(--color-blue-500);
  opacity: 0;
}

/* the screen's frozen spinner comes alive — the site spinner recipe
   (face-recognition's frxh-x-spinner: blue-100 track + blue-500 arc,
   dasharray 26/74) over the baked one (pixel-measured: 48px circle at
   195,408; the white plate hides the frozen art). Rotation reuses the
   co-ring-scan keyframe from solution.css. */
.p-product--non-document-verification .ndvh3-spin {
  position: absolute;
  left: 50%;
  top: 48.34%;
  width: 14.87cqw;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: var(--color-white);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.p-product--non-document-verification .ndvh3-spin__svg {
  width: 12.31cqw;
  height: 12.31cqw;
  animation: co-ring-scan 0.9s linear infinite;
}
.p-product--non-document-verification .ndvh3-spin circle {
  fill: none;
  stroke-width: 5.5;
}
.p-product--non-document-verification .ndvh3-spin__track { stroke: var(--color-blue-100); }
.p-product--non-document-verification .ndvh3-spin__arc {
  stroke: var(--color-blue-500);
  stroke-linecap: round;
  stroke-dasharray: 26 74;
}

/* card 0.1s → signals 0.6/1.0/1.4/1.8s → dot glides to Low 2.0–2.45s */
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh3-card {
  animation: ndvh2-card-in 0.45s ease 0.1s forwards;
}
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh3-row__check {
  animation: ndvh1-check-pop 0.28s ease forwards;
}
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh3-row--1 .ndvh3-row__check { animation-delay: 0.6s; }
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh3-row--2 .ndvh3-row__check { animation-delay: 1.0s; }
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh3-row--3 .ndvh3-row__check { animation-delay: 1.4s; }
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh3-row--4 .ndvh3-row__check { animation-delay: 1.8s; }
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh3-foot__dot {
  animation: ndvh3-dot-settle 0.45s ease 2.0s forwards;
}
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh3-foot__read {
  animation: ndvh2-fade-in 0.3s ease 2.3s forwards;
}

@keyframes ndvh3-dot-settle {
  from { left: 86%; }
  to   { left: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  .p-product--non-document-verification .ndvh3-card,
  .p-product--non-document-verification .ndvh3-row__check,
  .p-product--non-document-verification .ndvh3-foot__read {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .p-product--non-document-verification .ndvh3-row__check { transform: scale(1); }
  .p-product--non-document-verification .ndvh3-foot__dot {
    animation: none;
    left: 6%;
  }
  .p-product--non-document-verification .ndvh3-spin__svg { animation: none; }
}

/* ---- ndvh4 · Automated step-up ---- */
/* Camila 2026-08-10 round 5: the step-up screen IS face-recognition's
   Detect visual, reused wholesale — the Selfie3Screen vector twin decked
   via HowItWorks' screen-3 slot, its OWN blue gradient capture ring
   (.s3-ring-scan) revealed and spun (solution.css hides it by default
   and ships the co-ring-scan keyframe, reused here). The chip keeps
   frxh-detect's anatomy but wears THIS page's annotation-card skin
   (hairline, no shadow, sans, blue accent) per Camila 2026-08-10. */

.p-product--non-document-verification .ndvh4 {
  pointer-events: none;
}
.p-product--non-document-verification .ndvh4 .ndvh4-svg {
  display: block;
  width: 100%;
  height: auto;
}
.p-product--non-document-verification .ndvh4 .s3-ring-scan {
  display: block;
  transform-box: fill-box;
  transform-origin: center;
  animation: co-ring-scan 2.4s linear infinite;
}

/* chip — frxh-detect__chip geometry verbatim (face-recognition.css),
   overhanging the ring's right edge */
.p-product--non-document-verification .ndvh4-chip {
  position: absolute;
  top: 30%;
  left: calc(100% - 26px);
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  padding: 9px 13px;
  border-radius: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-100);
  opacity: 0;
  transform: translateY(8px);
}
.p-product--non-document-verification .ndvh4-chip__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-blue-500);
}
.p-product--non-document-verification .ndvh4-chip__icon svg {
  width: 12px;
  height: 12px;
}
.p-product--non-document-verification .ndvh4-chip__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.p-product--non-document-verification .ndvh4-chip__label {
  font-size: 10px;
  color: var(--color-grey-400);
  margin-bottom: 3px;
}
.p-product--non-document-verification .ndvh4-chip__stat {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-grey-600);
}

/* the chip lands once the walk reaches the step */
.p-product--non-document-verification .sol-stage__screen--rich.is-active .ndvh4-chip {
  animation: ndvh2-card-in 0.45s ease 0.9s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .p-product--non-document-verification .ndvh4 .s3-ring-scan {
    animation: none;
  }
  .p-product--non-document-verification .ndvh4-chip {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* narrow viewports: the stacked walk phone sits closer to the page
   edge — pull the floating annotations back in so nothing overflows */
@media (max-width: 720px) {
  .p-product--non-document-verification .ndvh1-card { right: -16px; }
  .p-product--non-document-verification .ndvh2-card { left: -16px; }
  .p-product--non-document-verification .ndvh3-card { right: -16px; }
  .p-product--non-document-verification .ndvh4-chip { left: auto; right: -12px; }
}