/* ============================================================
   Page: /products/identity-verification/  (.p-identity-verification)
   The hero is the STANDARD product hero (.pr-hero, product.css — Sofia
   2026-07-30: the bespoke device hero is retired); this file styles only
   the page's own body sections (steps, certs, related cards).
   ============================================================ */

/* ---------- hero media: plain solid black placeholder ---------- */
.p-identity-verification .iv-video-poster {
  background: var(--color-black);
}

/* ---------- shared copy blocks ---------- */
.p-identity-verification .iv-title--narrow { max-width: 672px; }
.p-identity-verification .iv-lead {
  margin-top: 16px;
  max-width: 672px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}

/* ---------- steps ---------- */
.p-identity-verification .iv-steps {
  margin-top: 48px;
  display: grid;
  gap: 20px;
}
@media (min-width: 640px) { .p-identity-verification .iv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .p-identity-verification .iv-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-identity-verification .iv-step {
  border-top: 1px solid var(--color-border-light);
  padding-top: 20px;
}
.p-identity-verification .iv-step__num {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-blue);
}
.p-identity-verification .iv-step__title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: var(--fs-xl);
  color: var(--color-black);
}
.p-identity-verification .iv-step__line {
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}
.p-identity-verification .iv-certs {
  margin-top: 48px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--color-grey-on-white);
}

/* ---------- inside a single session — ONE dashboard window ----------
   Restyled to the locked Single Session template (technology/liveness-
   detection's lvw-* deck), rescoped to .p-identity-verification as ivs-*:
   browser chrome → de-emphasised grey nav → header (green Pass + Session
   ID) → persistent round selfie avatar (LEFT) + the real checks as hairline
   label · pill rows grouped on the RIGHT. Static (no scroll-walk). Tokens
   only; #0054FF-family hex only inside SVGs. */
.p-identity-verification .ivs-deck {
  margin-top: 48px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 760px);
  margin-inline: auto;
  border-radius: 14px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  box-shadow: none;
  overflow: hidden;
}
/* browser chrome — 3 grey dots + lock + grey url-bar line */
.p-identity-verification .ivs-chrome {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 12px;
  border-bottom: 1px solid var(--color-grey-100);
  background: var(--color-grey-50);
  flex-shrink: 0;
}
.p-identity-verification .ivs-chrome__dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.p-identity-verification .ivs-chrome__dots i {
  width: 8px; height: 8px; border-radius: 999px; background: var(--color-grey-200);
}
.p-identity-verification .ivs-chrome__url {
  display: flex; align-items: center; gap: 8px;
  flex: 1; height: 20px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--color-grey-100);
  background: var(--color-white); color: var(--color-grey-300);
}
.p-identity-verification .ivs-chrome__lock { flex-shrink: 0; }
.p-identity-verification .ivs-chrome__url-bar {
  height: 6px; width: 46%; border-radius: 999px; background: var(--color-grey-100);
}
/* the dashboard inside the window: grey nav + main */
.p-identity-verification .ivs-app {
  display: flex;
  align-items: stretch;
}
.p-identity-verification .ivs-appnav {
  flex-shrink: 0;
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 18px 12px;
  background: var(--color-grey-50);
  border-right: 1px solid var(--color-grey-100);
}
.p-identity-verification .ivs-appnav__line {
  height: 7px; border-radius: 999px; background: var(--color-grey-200);
}
.p-identity-verification .ivs-appmain {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.p-identity-verification .ivs-apphead {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 20px;
  border-bottom: 1px solid var(--color-grey-100);
  flex-shrink: 0;
}
.p-identity-verification .ivs-apphead__pass {
  padding: 4px 12px; border-radius: 999px;
  background: var(--color-green-100); color: var(--color-green-600);
  font-size: 12px; font-weight: 600;
}
.p-identity-verification .ivs-apphead__sid {
  font-size: 12px; font-weight: 500; color: var(--color-grey-400);
}
.p-identity-verification .ivs-body {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}
/* ---- face capture (left) — the same selfie loop cropped to a round avatar,
   held at the top so it stays visible beside the taller check list ---- */
.p-identity-verification .ivs-face {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 20px;
  border-right: 1px solid var(--color-grey-100);
}
.p-identity-verification .ivs-face__cap {
  position: relative;
  width: 150px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-blue-100);
  border: 1px solid var(--color-grey-100);
}
.p-identity-verification .ivs-face__cam {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* ---- checks (right) — grouped hairline label · pill rows, no boxes ---- */
.p-identity-verification .ivs-screens {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px;
}
.p-identity-verification .ivs-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-identity-verification .ivs-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-grey-on-white);
}
.p-identity-verification .ivs-head .ds-icon { width: 18px; height: 18px; color: var(--color-grey-400); }

/* rows: label · pill, hairline separators, no boxes */
.p-identity-verification .ivs-table { display: flex; flex-direction: column; }
.p-identity-verification .ivs-trow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.p-identity-verification .ivs-trow:last-child { border-bottom: 0; }
.p-identity-verification .ivs-trow__lbl { font-size: 12px; font-weight: 500; color: var(--color-grey-500); }

/* tone pills */
.p-identity-verification .ivs-pill {
  white-space: nowrap;
  justify-self: end;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  padding: 3px 9px;
  border-radius: 999px;
}
.p-identity-verification .ivs-pill--good { background: var(--color-green-100); color: var(--color-green-600); }
.p-identity-verification .ivs-pill--bad { background: var(--color-red-100); color: var(--color-red-600); }
.p-identity-verification .ivs-pill--warn { background: var(--color-amber-100); color: var(--color-amber-600); }

/* per-group verdict chips */
.p-identity-verification .ivs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.p-identity-verification .ivs-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-grey-100);
  color: var(--color-grey-on-white);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.p-identity-verification .ivs-chip--accent {
  background: color-mix(in oklab, var(--color-blue-500) 14%, transparent);
  color: var(--color-blue);
}
/* mobile: the deck no longer reflows — dashFit (site.js, data-dash-fit on
   .ivs-deck) renders the exact 760px desktop layout scaled down to the
   column, so the face stays BESIDE the checks exactly as on desktop */

.p-identity-verification .at-how__deck {
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  box-shadow: none;
}
.p-identity-verification .at-how__screen { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.p-identity-verification .at-how__head {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-grey-on-white);
}
.p-identity-verification .at-how__head .ds-icon { width: 18px; height: 18px; color: var(--color-grey-400); }

.p-identity-verification .at-how__audit { display: flex; flex-direction: column; gap: 7px; }
.p-identity-verification .at-how__audit-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--color-border-light); background: var(--color-white);
}
.p-identity-verification .at-how__audit-row > span {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: var(--fs-xs); font-weight: 500; color: var(--color-grey-600);
}
.p-identity-verification .at-how__audit-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-grey-300); }
.p-identity-verification .at-how__audit-dot--ok { background: var(--color-green-500); }
.p-identity-verification .at-how__audit-dot--warn { background: var(--color-amber-600); }
.p-identity-verification .at-how__audit-dot--flag { background: var(--color-red-500); }
.p-identity-verification .at-how__audit-pill {
  flex: none; padding: 2px 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 600;
  background: var(--color-grey-100); color: var(--color-grey-on-white);
}
.p-identity-verification .at-how__audit-pill--ok { background: color-mix(in oklab, var(--color-green-500) 13%, transparent); color: var(--color-green-600); }
.p-identity-verification .at-how__audit-pill--warn { background: var(--color-amber-100); color: var(--color-amber-600); }
.p-identity-verification .at-how__audit-pill--flag { background: color-mix(in oklab, var(--color-red-400) 15%, transparent); color: var(--color-red-500); }

.p-identity-verification .at-how__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.p-identity-verification .at-how__pill {
  padding: 3px 10px; border-radius: 999px;
  background: var(--color-grey-100); color: var(--color-grey-on-white);
  font-size: var(--fs-xs); font-weight: 600;
}
.p-identity-verification .at-how__pill--accent {
  background: color-mix(in oklab, var(--color-blue-500) 14%, transparent);
  color: var(--color-blue);
}

/* ============================================================
   HOW IT WORKS — BESPOKE SCROLL-PINNED STEP-WALK (2026-08-07).
   Replaces the shared <HowItWorks> for this section so steps 02–04 carry
   illustrations. A sol-how__* rail (base styles from solution.css — the
   section sits in a bare .p-solution scope, like technology/ocr.astro's
   .ocr-how and face-recognition.astro's .frx-tech) + an at-how__* deck whose
   card swaps per step. Driven by the SHARED /js/behaviors/section-walk.js
   ([data-ka-walk] / [data-at-step] / [data-at-screen]). The walk mechanic is
   ported verbatim from ocr.css / face-recognition.css and rescoped to
   .p-identity-verification .iv-how; the extra .iv-how ancestor (0,3,0) beats
   both solution.css's .p-solution .sol-how__* (0,2,0) and this sheet's static
   at-how__deck / at-how__screen (0,2,0, "Inside a single session"). White
   ground so the walk flows with the hero above and the (light) single-session
   section below. Tokens only. */
.p-identity-verification .iv-how {
  background: var(--color-white);
  color: var(--color-foreground);
}

/* rail: jump-free reveal — every description opens to the SAME measured
   height (--at-reveal-h, set by section-walk.js), so the rail's total height
   holds still on step change. Overrides solution.css's 0fr→1fr grid trick. */
.p-identity-verification .iv-how .sol-how__reveal {
  display: block;
  height: 0;
  overflow: hidden;
  transition: height 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-identity-verification .iv-how .sol-how__step.is-active .sol-how__reveal {
  height: var(--at-reveal-h, 56px);
}
.p-identity-verification .iv-how .sol-how__line { padding-top: 10px; }

/* scroll-pin walk (wide + motion): the section grows tall and its inner pins
   for the length of the walk (72svh of scroll per step + one viewport), so
   scroll SELECTS the step. Static fallback (narrow / reduced-motion): normal
   height, pin not sticky. */
.p-identity-verification .iv-how__pin { position: relative; }
.p-identity-verification .iv-how.is-walk {
  height: calc(100svh + 72svh * var(--ka-steps, 4));
}
.p-identity-verification .iv-how.is-walk .iv-how__pin {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* active-step underline. Walk mode: the active bar tracks the in-band scroll
   fraction (--ka-scrub), walked-past steps hold a full bar. Static mode: a
   timed fill matching auto-advance (sol-how-fill keyframes live in
   solution.css). */
.p-identity-verification .iv-how.is-walk .sol-how__step.is-active .sol-how__fill {
  transform: scaleX(var(--ka-scrub, 0));
  transition: transform 0.18s linear;
}
.p-identity-verification .iv-how.is-walk .sol-how__step.is-done .sol-how__fill {
  transform: scaleX(0); /* only the active step keeps its bar (Camila 2026-08-10, site-wide) */
  transition: transform 0.4s ease;
}
.p-identity-verification .iv-how:not(.is-walk) .sol-how__step.is-active .sol-how__fill {
  animation: sol-how-fill var(--sol-hold, 6s) linear forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-identity-verification .iv-how:not(.is-walk) .sol-how__step.is-active .sol-how__fill { animation: none; }
}

/* the deck — a constant-height slot the stage centers, with a card whose
   height morphs to the active screen (top edge holds still). Overrides the
   static at-how__deck / at-how__screen (the single-session cards) WITHIN this
   section only; card border / bg / radius / shadow / overflow carry over from
   the base rule above. */
.p-identity-verification .iv-how .at-how__slot {
  width: min(100%, 420px);
  height: var(--at-slot-h, auto);
}
.p-identity-verification .iv-how .at-how__deck {
  position: relative;
  display: grid;
  width: 100%;
  height: var(--at-screen-h, auto);
  transition: height 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Capture step floats on the gradient stage — strip the deck's white card
   chrome (bg / border / shadow) while the chrome-less capture screen is active */
.p-identity-verification .iv-how .at-how__deck:has(.iv-cap.is-active) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.p-identity-verification .iv-how .at-how__screen {
  grid-area: 1 / 1;
  align-self: start;
  min-height: 236px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.p-identity-verification .iv-how .at-how__screen.is-active {
  opacity: 1;
  transition: opacity 0.35s ease 0.05s;
}
@media (prefers-reduced-motion: reduce) {
  .p-identity-verification .iv-how .at-how__deck,
  .p-identity-verification .iv-how .at-how__screen,
  .p-identity-verification .iv-how .sol-how__reveal { transition: none; }
}

/* -- 01 · capture — the two-phone fan lifted from the
   /use-cases/customer-onboarding hero stack: the document-capture phone
   ("Frame the front of your ID") + the selfie phone ("Align your face within
   the silhouette"), reusing the SAME snapshot assets in place. The bezel
   mirrors solution.css's .sol-stage__frame (white plate, hairline grey ring,
   34px screen radius) rescoped and sized down to seat two fanned phones inside
   the ~420px capture card. The hero's third "Success!" phone is excluded, so
   the composite reads intentional next to the filled Validate/Match/Decide
   cards. Tokens only. -- */
.p-identity-verification .iv-cap__phones {
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 340px;
  padding: 12px 0 4px;
}
.p-identity-verification .iv-cap__phone {
  margin: 0;
  width: 150px;
  padding: 7px;
  border-radius: 28px;
  border: 1px solid var(--color-grey-100);
  background: var(--color-white);
  box-shadow: none;
}
.p-identity-verification .iv-cap__screen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top center;
  border-radius: 22px;
}
/* fan: the document phone tips left and sits behind; the selfie phone tips
   right and sits on top, overlapping like the hero stack. */
.p-identity-verification .iv-cap__phone--doc {
  z-index: 1;
  margin-right: -38px;
  transform: rotate(-6deg) translateY(8px);
}
.p-identity-verification .iv-cap__phone--selfie {
  z-index: 2;
  transform: rotate(6deg) translateY(-8px);
}

/* ---------- related products ----------
   RETIRED 2026-08-13 (Sofia: the section rides the shared FeaturedProducts
   component — components/featured-products.css). No markup emits
   iv-related; rules kept for git archaeology only. */
.p-identity-verification .iv-related {
  margin-top: 48px;
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) { .p-identity-verification .iv-related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-identity-verification .iv-related__card {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 12px;
  border-radius: 16px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  padding: 28px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.p-identity-verification .iv-related__card:hover {
  transform: translateY(-3px);
  box-shadow: none;
}
.p-identity-verification .iv-related__icon {
  display: flex;
  height: 44px;
  width: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 106, 255, 0.2);
  background: rgba(0, 106, 255, 0.06);
  color: var(--color-blue);
}
.p-identity-verification .iv-related__glyph { height: 22px; width: 22px; }
.p-identity-verification .iv-related__name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: var(--fs-xl);
  color: var(--color-black);
}
.p-identity-verification .iv-related__line {
  font-size: var(--fs-sm);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}
.p-identity-verification .iv-related__more {
  margin-top: auto;
  padding-top: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-blue);
}
.p-identity-verification .iv-related__card:hover .iv-related__name { color: var(--color-blue); }


/* hero aurora: the richness-pass trial graduated to the shared product hero
   (product.css .pr-hero__aurora) on sign-off, 2026-08-11 — see that file. */