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

/* 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--customer-onboarding .sol-hero__stats {
  gap: 20px 22px;
}
.p-solution.p-solution--customer-onboarding .sol-hero__stat + .sol-hero__stat {
  padding-left: 22px;
}

/* The four-step phone motion (capture ring + caption swap, card
   ride-up + frame confirm, portrait glide, success badge pop) lives
   with the shared component styles in solution.css so any solution
   page rendering Selfie3/IdCapture3/FaceMatch1/Selfie7 inherits it. */

/* ---------- Inside a single session — ONE Single Session dashboard window ----------
   The locked "Single Session dashboard" template (cos-* page-scoped), ported
   from the liveness-detection lvw-* deck: a light browser window (chrome +
   de-emphasised grey nav + Pass/Session-ID header) framing a persistent round
   selfie-capture face (left) beside the review checks as hairline label·pill
   rows (right). The three flow steps read as stacked groups inside the one
   session; static (no scroll-walk). Every check label + the Pass / Warn status
   vocabulary is real, verbatim from the dashboard single session. The section
   is bright — it flows out of the bright sol-caps foundation above and into the
   bright sol-deploy below. */
.p-solution.p-solution--customer-onboarding .sol-sessions {
  background: var(--color-background);
  color: var(--color-foreground);
}
.p-solution.p-solution--customer-onboarding .iv-title--narrow {
  max-width: 672px;
}
.p-solution.p-solution--customer-onboarding .iv-lead {
  margin-top: 16px;
  max-width: 672px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}

/* the browser window */
.p-solution.p-solution--customer-onboarding .cos-stage {
  margin-top: 48px;
}
.p-solution.p-solution--customer-onboarding .cos-deck {
  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: three grey dots + lock + grey url-bar line */
.p-solution.p-solution--customer-onboarding .cos-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-solution.p-solution--customer-onboarding .cos-chrome__dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.p-solution.p-solution--customer-onboarding .cos-chrome__dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-solution.p-solution--customer-onboarding .cos-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-solution.p-solution--customer-onboarding .cos-chrome__lock {
  flex-shrink: 0;
}
.p-solution.p-solution--customer-onboarding .cos-chrome__url-bar {
  height: 6px;
  width: 46%;
  border-radius: 999px;
  background: var(--color-grey-100);
}
/* the dashboard inside the window: de-emphasised nav + main */
.p-solution.p-solution--customer-onboarding .cos-app {
  display: flex;
  align-items: stretch;
  min-height: 300px;
}
.p-solution.p-solution--customer-onboarding .cos-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-solution.p-solution--customer-onboarding .cos-appnav__line {
  height: 7px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-solution.p-solution--customer-onboarding .cos-appmain {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.p-solution.p-solution--customer-onboarding .cos-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-solution.p-solution--customer-onboarding .cos-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-solution.p-solution--customer-onboarding .cos-apphead__sid {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-grey-400);
}
.p-solution.p-solution--customer-onboarding .cos-body {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}
/* face capture (left) — the selfie loop cropped to a round avatar, persistent
   for the whole session */
.p-solution.p-solution--customer-onboarding .cos-face {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 20px;
  border-right: 1px solid var(--color-grey-100);
}
.p-solution.p-solution--customer-onboarding .cos-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-solution.p-solution--customer-onboarding .cos-face__cam {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* checks (right) — stacked step groups */
.p-solution.p-solution--customer-onboarding .cos-checks {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 18px 20px;
}
.p-solution.p-solution--customer-onboarding .cos-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-solution.p-solution--customer-onboarding .cos-group__tag {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  color: var(--color-blue);
}
.p-solution.p-solution--customer-onboarding .cos-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-grey-on-white);
}
.p-solution.p-solution--customer-onboarding .cos-head .ds-icon {
  width: 18px;
  height: 18px;
  color: var(--color-grey-400);
}

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

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

/* footer chips */
.p-solution.p-solution--customer-onboarding .cos-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.p-solution.p-solution--customer-onboarding .cos-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-solution.p-solution--customer-onboarding .cos-chip--accent {
  background: color-mix(in oklab, var(--color-blue-500) 14%, transparent);
  color: var(--color-blue);
}
/* Mobile: don't reflow the dashboard — render the EXACT desktop layout at
   its natural 760px width (face beside checks, full-width nav) and scale the
   whole window down proportionally. zoom is the honest lever (same as the
   /platform/ hero visuals): it shrinks the layout box too, so the deck stays
   pixel-identical to desktop, just smaller. The cos-mock-fit behavior refines
   the zoom to fill the column edge-to-edge on any viewport; the static value
   here is the no-JS fallback (safe from ~360px up). */
@media (max-width: 640px) {
  .p-solution.p-solution--customer-onboarding .cos-deck {
    width: 760px;
    max-width: none;
    zoom: 0.42;
  }
  /* keep the face beside the checks exactly as on desktop (undo any stack) */
  .p-solution.p-solution--customer-onboarding .cos-body {
    flex-direction: row;
  }
  .p-solution.p-solution--customer-onboarding .cos-face {
    border-right: 1px solid var(--color-grey-100);
    border-bottom: 0;
  }
}

/* the product screens' baked iOS status bar retires page-wide — the
   phone frames carry the .sol-skelbar pills instead (solution.css) */
.p-solution--customer-onboarding .s3-status,
.p-solution--customer-onboarding .idc-status,
.p-solution--customer-onboarding .fm-status,
.p-solution--customer-onboarding .s7-status {
  display: none;
}

/* ── sol-sessions as a half/half split (Sofia 2026-08-11, Quantic ref):
   the copy half on ink, the dashboard half on the bright ground, the
   seam blended through a short oklab gradient so the hand-off reads
   smooth. Stacks below 1024 (copy over visual, gradient turns vertical). */
/* the whole section on ink (Sofia, 2026-08-11) — only the dashboard
   window stays bright; a thin rule keeps the two-box division where the
   column-aligned seam sits */
.p-solution.p-solution--customer-onboarding .sol-sessions.cos-split {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-rich-black);
  color: var(--color-white);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .p-solution.p-solution--customer-onboarding .sol-sessions.cos-split {
    /* the cut lands EXACTLY on the section-above's visible hairline (the
       feed column's border-left): container offset + 24px gutter + the
       rail's 0.85/2.15 share of (content - 64px gap) + the 64px gap.
       0.3953 ≈ 0.85/2.15; 112px = 48px gutters + 64px gap. */
    grid-template-columns:
      calc(max(0px, (100vw - var(--container-large)) / 2) + 88px + (min(100vw, var(--container-large)) - 112px) * 0.3953)
      minmax(0, 1fr);
    align-items: stretch;
  }
}
/* hard division, two boxes side by side — the gradient seam retired
   (Sofia, 2026-08-11) */
.p-solution.p-solution--customer-onboarding .cos-split__copy {
  display: flex;
  align-items: center;
  color: var(--color-white);
  background: var(--color-rich-black);
}
.p-solution.p-solution--customer-onboarding .cos-split__copy-inner {
  padding: 80px 20px;
}
@media (min-width: 1024px) {
  .p-solution.p-solution--customer-onboarding .cos-split__copy-inner {
    /* outer edge aligns with the site container; inner edge clears the seam */
    padding: 112px 48px 112px max(24px, calc((100vw - var(--container-large)) / 2 + 24px));
  }
}
/* the lead breaks before "the real fields" on the wide layout only */
.p-solution.p-solution--customer-onboarding .cos-split__br { display: none; }
@media (min-width: 1024px) {
  .p-solution.p-solution--customer-onboarding .cos-split__br { display: inline; }
}
.p-solution.p-solution--customer-onboarding .cos-split__lead {
  color: var(--color-grey-on-black);
}
.p-solution.p-solution--customer-onboarding .cos-split__visual {
  position: relative;
  display: flex;
  align-items: center;
  padding: 48px 20px 72px;
}
/* the divider: an inset rule, never full-bleed (Sofia, 2026-08-11) —
   horizontal with side margins while stacked, vertical with top/bottom
   margins on the wide layout */
.p-solution.p-solution--customer-onboarding .cos-split__visual::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--color-border-dark);
}
@media (min-width: 1024px) {
  .p-solution.p-solution--customer-onboarding .cos-split__visual {
    padding: 88px max(24px, calc((100vw - var(--container-large)) / 2 + 24px)) 88px 48px;
  }
  .p-solution.p-solution--customer-onboarding .cos-split__visual::before {
    top: 72px;
    bottom: 72px;
    left: 0;
    right: auto;
    width: 1px;
    height: auto;
  }
}
.p-solution.p-solution--customer-onboarding .cos-split .cos-stage {
  margin-top: 0;
  width: 100%;
}
/* the deck's legacy soft drop converts on touch (site rule: hard shadows
   or none) — the hairline border carries the elevation */
.p-solution.p-solution--customer-onboarding .cos-split .cos-deck {
  box-shadow: none;
}

/* ── sol-life (Beyond onboarding) on ink for THIS page (Sofia,
   2026-08-11): moved above customization, extending the dark
   single-session chapter. The shared bright recipe stays untouched for
   the other 13 solution pages. ── */
.p-solution.p-solution--customer-onboarding .sol-life {
  background: var(--color-rich-black);
  color: var(--color-white);
  border-top: 1px solid var(--color-border-dark);
}
.p-solution.p-solution--customer-onboarding .sol-life .kicker { color: rgba(255, 255, 255, 0.5); }
.p-solution.p-solution--customer-onboarding .sol-life .section-title { color: var(--color-white); }
.p-solution.p-solution--customer-onboarding .sol-life .sol-intro { color: var(--color-grey-on-black); }
.p-solution.p-solution--customer-onboarding .sol-life__card {
  border-color: var(--color-border-dark);
  background: var(--color-tint-white-05);
}
.p-solution.p-solution--customer-onboarding .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--customer-onboarding .sol-life__icon {
  background: transparent;
  border-color: transparent;
  color: var(--color-white);
}
.p-solution.p-solution--customer-onboarding .sol-life__name { color: var(--color-white); }
.p-solution.p-solution--customer-onboarding .sol-life__line { color: var(--color-grey-on-black); }