/* product-deepsight.css — deepsight-only additions over product.css.
   Loaded after product.css (pageCss array). Scope .p-product--deepsight.

   HERO (Mike, 2026-08-07): the media column carries the Deepsight film
   from the live platform page (Vimeo background mode — autoplay, muted,
   loop, chromeless) and the three proof stats move INTO the left copy as
   an inline ledger between the sub and the Request-a-demo CTA. */

/* spacing pass (Mike, 2026-08-07 r2): everything rides ~15px higher
   (inner top padding 148 → 133), the film centers on the copy block and
   sits 5px higher still, and the title→sub gap opens up */
.p-product--deepsight .pr-hero__inner { padding-top: 133px; }
.p-product--deepsight .pr-hero__sub { margin-top: 20px; }
@media (min-width: 1024px) {
  .p-product--deepsight .pr-hero__grid { align-items: center; }
  .p-product--deepsight .pr-hero__media { margin-top: -5px; }
}

/* the three proof blocks — a hairline ledger row under the sub */
.p-product--deepsight .dsh-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.p-product--deepsight .dsh-proof__item {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 14px;
}
.p-product--deepsight .dsh-proof__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  color: var(--color-white);
}
.p-product--deepsight .dsh-proof__cap {
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.64);
}
.p-product--deepsight .pr-hero__copy .pr-hero__actions { margin-top: 32px; }

/* the film card — same recipe as the site's ambient Vimeo tiles:
   16:9 rounded media card, hairline ring, iframe fills */
.p-product--deepsight .dsh-film {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-black);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.p-product--deepsight .dsh-film iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* the ambient embed is chromeless; the button owns hover + click */
  pointer-events: none;
}
/* the play rides the running film exactly as on govfacematch (Mike,
   2026-08-08: same button, always visible; hover scales it via the shared
   pr-hero__videobtn rules in product.css) */
/* the triangle glyph is right-biased inside its own viewBox (+1.8px at
   18px; the flat left edge starts at x=8, the tip lands at ~20.9). This
   rule OVERRIDES product.css's margin-left 3px (higher specificity), and
   flex centering only moves the box by half the margin — so -1px still
   left the tip crowding the right of the circle (Mike 2026-08-08,
   screenshot). -2px puts the triangle's optical anchor (~42% of glyph
   width from the flat edge) on the circle's center. */
.p-product--deepsight .dsh-filmbtn .pr-hero__play svg { margin-left: -2px; }

@media (max-width: 1023px) {
  .p-product--deepsight .pr-hero__media { margin-top: 36px; }
}
@media (max-width: 639px) {
  .p-product--deepsight .dsh-proof { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- how it works: the four detection layers as WHITE dashboard cards
   (Mike, 2026-08-07 r6) — the kyc-aml screening-console language (score
   bars + tone pills + lanes) on the stage's light gradient panel. One
   card per step, crossfaded by the standalone scroll-walk; bars fill and
   pills pop each time a step activates. ---- */
/* r8 (Mike 2026-08-10): ONE console window instead of four floating
   cards — browser chrome, product nav down the left, the session in the
   main column. Wide, not tall (≈1.4:1), so the stage panel gives it more
   width than the shared 80%. */
.p-product--deepsight .sol-how__stage {
  width: 96%;
  padding: 30px 18px;
}
.p-product--deepsight .dsw-win {
  width: min(100%, 580px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  overflow: hidden;
  box-shadow: none;
}
/* bespoke chrome retired — the deck now uses the canonical <BrowserChrome /> */
.p-product--deepsight .dsw-win__body { display: flex; align-items: stretch; }

/* the product nav */
.p-product--deepsight .dsw-side {
  flex: 0 0 118px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 10px;
  border-right: 1px solid var(--color-border-light);
}
.p-product--deepsight .dsw-side__logo { width: 62px; height: auto; margin-left: 6px; }
.p-product--deepsight .dsw-side__nav { display: flex; flex-direction: column; gap: 2px; }
.p-product--deepsight .dsw-side__item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--color-grey-400);
}
.p-product--deepsight .dsw-side__item--on {
  background: var(--color-blue-100);
  color: var(--color-blue);
  font-weight: 500;
}
.p-product--deepsight .dsw-side__ico { width: 13px; height: 13px; flex: 0 0 auto; }

/* the main column: session header + the crossfading layers */
.p-product--deepsight .dsw-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
}
.p-product--deepsight .dsw-main__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-black);
}
.p-product--deepsight .dsw-main__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-green-600);
}
.p-product--deepsight .dsw-deck {
  position: relative;
  display: grid;
  flex: 1;
}
.p-product--deepsight .dsw-screen {
  grid-area: 1 / 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 236px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.p-product--deepsight .dsw-screen.is-active {
  opacity: 1;
  transition: opacity 0.35s ease 0.05s;
}
/* r7 (Mike 2026-08-10, Bryant's card as the reference): each layer opens
   with the real product screen it reads — the live session, the device,
   the camera feed, the biometric match — bleeding to the card edge above
   the table. Real screens, no overlay: the face mesh was ruled out on
   this site ("too ai gen", Sofia 2026-08-06). */
.p-product--deepsight .dsw-screen:has(.dsw-media) {
  flex-direction: row;
  align-items: stretch;
  gap: 30px;
  height: 100%;
}
.p-product--deepsight .dsw-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* the readout starts a touch below the device's top edge */
  padding-top: 14px;
}
/* the device rides at its own aspect and centers in the column, so the
   frame hugs the screen instead of boxing empty space around it */
.p-product--deepsight .dsw-media {
  flex: 0 0 108px;
  align-self: center;
  aspect-ratio: 390 / 844;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
}
/* 04 · the perception layer reads the face itself, so its media is the
   live capture in a round frame (the treatment Bryant used on
   /technology/liveness-detection/) instead of a device screen */
.p-product--deepsight .dsw-media--face {
  flex: 0 0 132px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--color-blue-100);
}
.p-product--deepsight .dsw-media__cam {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* contain, not cover: these are phone screens — cropping them sideways
   cuts the copy off both edges */
.p-product--deepsight .dsw-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}
/* the narrower content column: labels and lane copy hold one line */
/* one notch down across the readout so it reads as UI, not as copy */
.p-product--deepsight .dsw-body .dsw-head { font-size: 12px; }
.p-product--deepsight .dsw-body .dsw-head .ds-icon { width: 15px; height: 15px; }
.p-product--deepsight .dsw-body .dsw-trow__lbl { font-size: 10px; }
.p-product--deepsight .dsw-body .dsw-lane-label { font-size: 10px; }
.p-product--deepsight .dsw-body .dsw-pill { font-size: 8px; padding: 4px 7px; }
.p-product--deepsight .dsw-body .dsw-chip { font-size: 9px; padding: 5px 9px; }
.p-product--deepsight .dsw-body .dsw-trow { padding: 9px 0; }
.p-product--deepsight .dsw-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-grey-on-white);
}
.p-product--deepsight .dsw-head .ds-icon { width: 18px; height: 18px; color: var(--color-grey-400); }

/* score table rows (label · fill bar · tone pill) */
.p-product--deepsight .dsw-table { display: flex; flex-direction: column; }
.p-product--deepsight .dsw-trow {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.7fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.p-product--deepsight .dsw-trow:last-child { border-bottom: 0; }
.p-product--deepsight .dsw-trow__lbl { font-size: 12px; font-weight: 500; color: var(--color-grey-500); }
.p-product--deepsight .dsw-score {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: var(--color-grey-100);
  overflow: hidden;
}
.p-product--deepsight .dsw-score__fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--color-blue);
  transform-origin: left center;
  transform: scaleX(var(--v, 0));
}
.p-product--deepsight .dsw-score__fill--bad { background: var(--color-red-500); }

/* tone pills */
.p-product--deepsight .dsw-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  justify-self: end;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
}
.p-product--deepsight .dsw-pill--good { background: var(--color-green-100); color: var(--color-green-600); }
.p-product--deepsight .dsw-pill--bad { background: var(--color-red-100); color: var(--color-red-600); }

/* lanes (glyph · label · pill) */
.p-product--deepsight .dsw-lane {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
  background: var(--color-grey-50);
}
.p-product--deepsight .dsw-lane--flag {
  border-color: color-mix(in oklab, var(--color-blue) 40%, transparent);
  background: var(--color-blue-100);
}
.p-product--deepsight .dsw-lane--bad {
  border-color: color-mix(in oklab, var(--color-red-500) 35%, transparent);
  background: var(--color-red-100);
}
.p-product--deepsight .dsw-lane-glyph {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  color: var(--color-grey-500);
}
.p-product--deepsight .dsw-lane--flag .dsw-lane-glyph {
  border-color: color-mix(in oklab, var(--color-blue) 30%, transparent);
  color: var(--color-blue);
}
.p-product--deepsight .dsw-lane--bad .dsw-lane-glyph {
  border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
  color: var(--color-red-600);
}
.p-product--deepsight .dsw-lane-glyph .ds-icon { width: 12px; height: 12px; }
.p-product--deepsight .dsw-lane-label {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-foreground);
}

/* footer chips */
.p-product--deepsight .dsw-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.p-product--deepsight .dsw-chip {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-grey-100);
  color: var(--color-grey-on-white);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.p-product--deepsight .dsw-chip--accent {
  background: color-mix(in oklab, var(--color-blue-500) 14%, transparent);
  color: var(--color-blue);
}

/* mobile: solution-hero.js step-pairing CLONES the whole .dsw-win console per
   step (frozen to that step's panel) and hides the shared stage; site.js
   dashFit scales each clone to fill the column. The clone keeps the normal
   crossfade (only the frozen .dsw-screen.is-active shows), so no per-panel
   revive is needed here — this replaces the old narrow-reflow rules (hide nav,
   shrink device), now retired. */

/* choreography — bars fill, pills pop, lanes rise on each activation */
.p-product--deepsight .dsw-screen .dsw-score__fill { transform: scaleX(0); }
.p-product--deepsight .dsw-screen.is-active .dsw-score__fill {
  animation: dsw-fill 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0s);
}
.p-product--deepsight .dsw-screen .dsw-pill { opacity: 0; transform: translateY(3px) scale(0.9); }
.p-product--deepsight .dsw-screen.is-active .dsw-pill {
  animation: dsw-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0s);
}
.p-product--deepsight .dsw-screen .dsw-lane { opacity: 0; transform: translateY(8px); }
.p-product--deepsight .dsw-screen.is-active .dsw-lane {
  animation: dsw-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0s);
}
@keyframes dsw-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(var(--v, 0)); }
}
@keyframes dsw-pop {
  from { opacity: 0; transform: translateY(3px) scale(0.9); }
  to { opacity: 1; transform: none; }
}
@keyframes dsw-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .p-product--deepsight .dsw-screen { transition: none; }
  .p-product--deepsight .dsw-screen .dsw-score__fill,
  .p-product--deepsight .dsw-screen .dsw-pill,
  .p-product--deepsight .dsw-screen .dsw-lane {
    animation: none !important;
    opacity: 1;
    transform: scaleX(var(--v, 1));
  }
  .p-product--deepsight .dsw-screen .dsw-pill,
  .p-product--deepsight .dsw-screen .dsw-lane { transform: none; }
}