/* authentication.css — page overrides layered on solution.css.
   Loaded after solution.css (see pageCss array on the page). Scope is
   .p-solution.p-solution--authentication so these rules win over the
   base .p-solution rules at higher specificity, no !important needed.
   Cloned from the sibling pattern (customer-onboarding.css). */

/* G6 · the three hero PROOF stats stay on ONE row at 1440 AND 1280.
   The base divider (40px gap + 40px padding-left) plus nowrap caps overran
   the copy column at 1280 and dropped the third stat to a second row.
   Tightening the inter-stat spacing (and the shorter caps in the page const)
   lets all three sit on one row inside the copy column at both widths. */
.p-solution.p-solution--authentication .sol-hero__stats {
  gap: 20px 22px;
}
.p-solution.p-solution--authentication .sol-hero__stat + .sol-hero__stat {
  padding-left: 22px;
}

/* The four-step phone motion (capture ring + caption swap, portrait
   glide, success badge pop) lives with the shared component styles in
   solution.css so any solution page rendering Selfie3/FaceMatch1/
   Selfie7 inherits it. Step 1 (screen index 1) reuses the Selfie3
   capture screen statically — the liveness beat needs no extra motion. */

/* Step 2 "Confirm a live person" (screen index 1): resolve the capture to a
   CONFIRMED-LIVE state — just the success-green ring rotating around the
   face. Drop the align silhouette + "align your face / get ready" captions
   so the beat reads as "verified live person", not "aligning". Scoped to
   this page: only authentication renders a Selfie3 at screen 1 (other
   solution pages put an ID-capture screen there). Mauricio 2026-08-17. */
.p-solution.p-solution--authentication svg[data-sol-screen="1"] .s3-silhouette,
.p-solution.p-solution--authentication svg[data-sol-screen="1"] .s3-caption,
.p-solution.p-solution--authentication svg[data-sol-screen="1"] .s3-caption-ready {
  display: none;
}
.p-solution.p-solution--authentication svg[data-sol-screen="1"] .s3-scan-stop {
  stop-color: var(--color-green-500);
}
.p-solution.p-solution--authentication svg[data-sol-screen="1"] .s3-ring-scan {
  display: inline;
  transform-box: fill-box;
  transform-origin: center;
  animation: co-ring-scan 2.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .p-solution.p-solution--authentication svg[data-sol-screen="1"] .s3-ring-scan {
    animation: none;
  }
}

/* ── sol-life (Where it applies) on ink for THIS page (Sofia,
   2026-08-11): moved above customization, matching the
   customer-onboarding treatment. The shared bright recipe stays
   untouched for the other solution pages. ── */
.p-solution.p-solution--authentication .sol-life {
  background: var(--color-rich-black);
  color: var(--color-white);
  border-top: 1px solid var(--color-border-dark);
}
.p-solution.p-solution--authentication .sol-life .kicker { color: rgba(255, 255, 255, 0.5); }
.p-solution.p-solution--authentication .sol-life .section-title { color: var(--color-white); }
.p-solution.p-solution--authentication .sol-life .sol-intro { color: var(--color-grey-on-black); }
.p-solution.p-solution--authentication .sol-life__card {
  border-color: var(--color-border-dark);
  background: var(--color-tint-white-05);
}
.p-solution.p-solution--authentication .sol-life__card:hover { border-color: var(--color-grey-500); }
/* canonical dark-section icon rule (Sofia 2026-08-12): no white square
   on ink — the tile goes transparent and the glyph itself turns white */
.p-solution.p-solution--authentication .sol-life__icon {
  background: transparent;
  border-color: transparent;
  color: var(--color-white);
}
.p-solution.p-solution--authentication .sol-life__name { color: var(--color-white); }
.p-solution.p-solution--authentication .sol-life__line { color: var(--color-grey-on-black); }