/* ============================================================
   Employee and candidate verification — per-page additions on top
   of the shared solution template (/styles/pages/solution.css).
   Loaded AFTER solution.css so these rules win. Every selector is
   scoped to .p-solution--candidate-verification (the page modifier)
   and uses tokens only — no raw hex.

   Review pass (Nacim, 2026-07-31): candidate verification also happens
   on desktop (remote interviews), so the hero + how-it-works travel a
   rectangular BROWSER-WINDOW mockup instead of a phone. The shared
   traveling-phone mechanic (solution-hero.js, data-sol-* contract) is
   untouched — only the frame shape and screen content change here.
   ============================================================ */

/* ---- placeholder kit (kept for greppability; the yellow tile is now
   replaced by constructed fakes that carry a small .cv-mock chip) ---- */
.p-solution--candidate-verification .ph-visual { position: relative; display: grid; place-items: center; width: 100%;
  aspect-ratio: var(--ph-ar, 16 / 9); border: 2px dashed var(--color-black); border-radius: 16px;
  background: repeating-linear-gradient(-45deg,
    color-mix(in oklab, var(--color-placeholder-yellow) 45%, transparent) 0 14px,
    transparent 14px 28px); overflow: hidden; }
.p-solution--candidate-verification .ph-visual__tag { max-width: 85%; padding: 6px 12px; border-radius: 6px;
  background: var(--color-placeholder-yellow); color: var(--color-black);
  font-size: var(--fs-sm); font-weight: 600; line-height: var(--leading-snug); text-align: center; }
.p-solution--candidate-verification .ph-claim { padding: 1px 5px; border-radius: 4px;
  background: var(--color-placeholder-yellow); color: var(--color-black);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* small, discreet "Mockup" corner chip — marks every constructed fake so it
   stays identifiable + greppable while Nacim finalizes the real assets */
.p-solution--candidate-verification .cv-mock {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-placeholder-yellow);
  color: var(--color-black);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--track-tight);
  pointer-events: none;
}

/* ============================================================
   Browser-window mockup frame (hero + how + traveling column)
   Scoped to .cv-web so the DEPLOY section's phone frame stays a phone.
   ============================================================ */

/* the traveling frame is a phone in the template — widen it into a
   ~16:10 desktop browser window on this page */
.p-solution--candidate-verification .sol-hero__phone,
.p-solution--candidate-verification .sol-how__phone,
.p-solution--candidate-verification .sol-phonecol__phone {
  width: min(100%, 440px);
}
@media (min-width: 1024px) {
  .p-solution--candidate-verification .sol-hero__phone,
  .p-solution--candidate-verification .sol-how__phone,
  .p-solution--candidate-verification .sol-phonecol__phone {
    width: clamp(360px, 38vw, 500px);
  }
}

/* ---- MOBILE UNIFICATION (Nacim, 2026-08-18) --------------------------
   These consoles are BROWSER WINDOWS, not phones. On mobile the shared
   solution template (a) hides the hero stage entirely and (b) re-pairs each
   how-it-works step's screen into a portrait phone bezel. Both read wrong for
   a wide desktop console. Instead: show the hero console and let dashFit
   (data-dash-fit / data-dash-base on .cv-web) render the EXACT desktop layout
   scaled uniformly to fill the column. Desktop (≥1024) is untouched. */
@media (max-width: 767px) {
  /* the base template drops the hero visual on phones — keep it: it's the
     scaled console, the same image the desktop shows */
  .p-solution--candidate-verification .sol-hero__stage {
    display: flex;
    min-height: 0;
    padding-block: 24px;
  }
}
@media (max-width: 1023px) {
  /* the JS mobile step-pairing wraps each moved dashboard screen in a
     .sol-how__shot-phone (a portrait phone bezel min 58vw). These are
     browser windows — drop the bezel, render them full-column as clean
     bordered windows so they read like the hero console, not a phone. */
  .p-solution--candidate-verification .sol-how__shot-phone {
    width: 100%;
    padding: 0;
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
}

/* the hero backing frame + ghost phones don't belong behind a browser
   window. The frame div stays in the DOM (the JS reads its geometry for
   the handoff) but is made invisible; the ghosts are gone from markup. */
.p-solution--candidate-verification .sol-hero__frame { opacity: 0; }

/* the how-it-works landing card is sized for a slim phone (80%); widen it
   so the ~16:10 browser window lands inside it without overflowing */
.p-solution--candidate-verification .sol-how__stage { width: 100%; }

/* frame chrome: browser body — override the phone bezel (radius/padding) */
.p-solution--candidate-verification .cv-web {
  padding: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-grey-200);
  background: var(--color-white);
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* the browser title bar is now the canonical <BrowserChrome /> component
   (.brchrome, components/browser-chrome.css, loaded site-wide) — the bespoke
   .cv-web__chrome / __dots / __url block was removed (Nacim, 2026-08-18: one
   chrome everywhere). dashFit scales it down with the rest of the console. */

/* the swapping screen: browser CONTENT area, 16:10, white */
.p-solution--candidate-verification .cv-web__deck { display: grid; }
.p-solution--candidate-verification .cv-web__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  background: var(--color-white);
  overflow: hidden;
}
.p-solution--candidate-verification .sol-stage__deck .cv-web__screen { grid-area: 1 / 1; }

/* the workforce-dashboard hero vector fills the 16:10 screen box */
.p-solution--candidate-verification .cv-wf-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* the hero pair: a shrink-wrap anchor for the browser window + the mobile
   final screen. Carries the SAME width rules as the window so the phone's
   percentages track the window box; the window inside resolves to 100%. */
.p-solution--candidate-verification .cv-wf-pair {
  position: relative;
  z-index: 2;
  width: min(100%, 440px);
}
@media (min-width: 1024px) {
  .p-solution--candidate-verification .cv-wf-pair {
    width: clamp(360px, 38vw, 500px);
  }
}
/* the hero's second image: the candidate's mobile final screen (green
   verification check), floated OUTSIDE the browser window over its
   bottom-right corner */
.p-solution--candidate-verification .cv-wf-phone {
  position: absolute;
  z-index: 3;
  right: -6%;
  bottom: -9%;
  width: 28%;
  aspect-ratio: 120 / 244;
  border-radius: 18px;
  background: var(--color-white);
  /* outline removed per Mike 2026-08-07 — the shadow alone seats the frame */
  box-shadow: none;
  overflow: hidden;
}
.p-solution--candidate-verification .cv-wf-phone-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- animated product states (Mike 2026-08-07, round 3: human-paced) ----
   8s loop, played like a person driving it: rest → click opens the
   dropdown (slides in, first item highlighted by default) → the hover
   moves to the SECOND item (John Doe) → selected + the link radio →
   the button presses (dark flash) → the link sends (green toast +
   PENDING row). Base opacities equal the FINAL state, so reduced-motion
   (animation: none) shows the sent state. */
.p-solution--candidate-verification .cvh-l0 { opacity: 0; animation: cvh-l0 8s ease infinite; }
.p-solution--candidate-verification .cvh-l1 {
  opacity: 0;
  transform-box: fill-box;
  transform: translateY(-6px);
  animation: cvh-l1 8s ease infinite;
}
.p-solution--candidate-verification .cvh-l1a { opacity: 0; animation: cvh-l1a 8s ease infinite; }
.p-solution--candidate-verification .cvh-l1b { opacity: 0; animation: cvh-l1b 8s ease infinite; }
.p-solution--candidate-verification .cvh-lbc { opacity: 1; animation: cvh-lbc 8s ease infinite; }
.p-solution--candidate-verification .cvh-lp { opacity: 0; animation: cvh-lp 8s ease infinite; }
.p-solution--candidate-verification .cvh-lc { opacity: 1; animation: cvh-lc 8s ease infinite; }
@keyframes cvh-l0 {
  0%, 41% { opacity: 1; }
  45%, 100% { opacity: 0; }
}
@keyframes cvh-l1 {
  0%, 18% { opacity: 0; transform: translateY(-6px); }
  22%, 40% { opacity: 1; transform: translateY(0); }
  44%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes cvh-l1a {
  0%, 20% { opacity: 0; }
  22%, 30% { opacity: 1; }
  34%, 100% { opacity: 0; }
}
@keyframes cvh-l1b {
  0%, 31% { opacity: 0; }
  35%, 42% { opacity: 1; }
  45%, 100% { opacity: 0; }
}
@keyframes cvh-lbc {
  0%, 43% { opacity: 0; }
  47%, 100% { opacity: 1; }
}
@keyframes cvh-lp {
  0%, 58% { opacity: 0; }
  60%, 63% { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@keyframes cvh-lc {
  0%, 65% { opacity: 0; }
  69%, 96% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .p-solution--candidate-verification .cvh-l0,
  .p-solution--candidate-verification .cvh-l1,
  .p-solution--candidate-verification .cvh-l1a,
  .p-solution--candidate-verification .cvh-l1b,
  .p-solution--candidate-verification .cvh-lbc,
  .p-solution--candidate-verification .cvh-lp,
  .p-solution--candidate-verification .cvh-lc {
    animation: none !important;
  }
}
/* the meeting tile photo — CSS-clipped (no SVG clipPath: duplicate ids
   across the two deck copies break Chrome's url() resolution) */
.p-solution--candidate-verification .cv-vid-img { clip-path: inset(0 round 12px); }
/* float mode: the inline hero pair hides with its window (the phonecol
   clone takes over); the clone's companion phone fades out the moment the
   scroll starts, so the pair reads only at the hero rest position */
.p-solution--candidate-verification .sol-flow-wrap.is-float .sol-hero__stage .cv-wf-phone { visibility: hidden; }
.p-solution--candidate-verification .cv-wf-phone {
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* the phone glides ~12px right as it fades, so the exit reads as a move,
   not a cut (Mike 2026-08-03) */
.p-solution--candidate-verification .sol-flow-wrap.is-scrolled .sol-phonecol .cv-wf-phone {
  opacity: 0;
  transform: translateX(12px);
}

/* the screen content sits absolutely inside the 16:10 box */
.p-solution--candidate-verification .cv-scr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
}
.p-solution--candidate-verification .cv-scr--center {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

/* ---- screen primitives (schematic skeleton UI) ---- */
.p-solution--candidate-verification .cv-b {
  display: block;
  height: 8px;
  width: var(--cv-w, 60%);
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-solution--candidate-verification .cv-b--dim { background: var(--color-grey-50); border: 1px solid var(--color-grey-100); }
.p-solution--candidate-verification .cv-scr--center .cv-b { margin-inline: auto; }

.p-solution--candidate-verification .cv-scr__bar {
  display: flex; align-items: center; gap: 10px;
}
.p-solution--candidate-verification .cv-dot {
  width: 18px; height: 18px; border-radius: var(--radius-sm);
  background: var(--color-blue-100); flex-shrink: 0;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-blue-500) 22%, transparent);
}
.p-solution--candidate-verification .cv-scr__bar .cv-b { flex: 0 1 auto; }

.p-solution--candidate-verification .cv-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 12px;
  min-height: 0;
}
.p-solution--candidate-verification .cv-split--mid { grid-template-columns: 1fr 0.9fr; align-items: center; }

/* camera / webcam tile with a face-oval guide */
.p-solution--candidate-verification .cv-cam {
  position: relative;
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--color-blue-100) 70%, transparent), transparent 70%),
    var(--color-grey-50);
  border: 1px solid var(--color-grey-100);
  overflow: hidden;
  min-height: 96px;
}
.p-solution--candidate-verification .cv-cam--sm { min-height: 80px; }
.p-solution--candidate-verification .cv-cam__oval {
  position: absolute;
  left: 50%; top: 50%;
  width: 46%; aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dashed color-mix(in oklab, var(--color-blue-500) 60%, transparent);
}
.p-solution--candidate-verification .cv-cam__oval--tight { width: 34%; border-style: solid; }
.p-solution--candidate-verification .cv-cam__scan {
  position: absolute;
  left: 12%; right: 12%; top: 50%;
  height: 2px; border-radius: 999px;
  background: color-mix(in oklab, var(--color-blue-500) 70%, transparent);
}
/* the canonical person glyph inside the face-capture oval — same clean user
   icon used for every avatar on the page (RONDA 3 · avatar rule) */
.p-solution--candidate-verification .cv-cam__person {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--color-grey-300);
}
.p-solution--candidate-verification .cv-cam__person svg { display: block; width: 52%; height: auto; }
.p-solution--candidate-verification .cv-cam--sm .cv-cam__person svg { width: 58%; }

/* checklist column */
.p-solution--candidate-verification .cv-list { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.p-solution--candidate-verification .cv-list__row { display: flex; align-items: center; gap: 8px; color: var(--color-grey-300); }
.p-solution--candidate-verification .cv-list__row.is-ok { color: var(--color-green-600); }
.p-solution--candidate-verification .cv-list__row svg { flex-shrink: 0; }
.p-solution--candidate-verification .cv-ring {
  width: 14px; height: 14px; border-radius: 999px; flex-shrink: 0;
  border: 2px solid var(--color-grey-200);
}

/* primary CTA block */
.p-solution--candidate-verification .cv-btn {
  margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 12px; border-radius: var(--radius-sm);
  background: var(--color-blue-500); color: var(--color-white);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-tight);
  align-self: flex-start;
}
.p-solution--candidate-verification .cv-scr--center .cv-btn { align-self: center; }

/* application panel: avatar + signal chips + risk meter */
.p-solution--candidate-verification .cv-panel {
  flex: 1;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border-radius: var(--radius-md);
  border: 1px solid var(--color-grey-100); background: var(--color-grey-50);
  min-height: 0;
}
.p-solution--candidate-verification .cv-row { display: flex; align-items: center; gap: 10px; }
/* person avatar — the canonical treatment (RONDA 3 · avatar rule): the site's
   own user glyph (public/icons/user.svg, uniform stroke) masked in grey inside
   a light circular chip. One rule drives every list/queue avatar on the page,
   so people read the same clean way everywhere (no line-drawn silhouette bust). */
.p-solution--candidate-verification .cv-avatar {
  position: relative;
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  overflow: hidden;
  background: var(--color-grey-100);
  box-shadow: inset 0 0 0 1px var(--color-grey-200);
}
.p-solution--candidate-verification .cv-avatar::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--color-grey-400);
  -webkit-mask: url("/icons/user.svg") no-repeat center / 84%;
  mask: url("/icons/user.svg") no-repeat center / 84%;
}
.p-solution--candidate-verification .cv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.p-solution--candidate-verification .cv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--color-grey-100); background: var(--color-white);
}
.p-solution--candidate-verification .cv-chip i {
  width: 6px; height: 6px; border-radius: 999px; background: var(--color-blue-500); flex-shrink: 0;
}
.p-solution--candidate-verification .cv-chip .cv-b { width: var(--cv-w, 56%); min-width: 26px; }
.p-solution--candidate-verification .cv-chip--tag { padding: 6px 12px; }
.p-solution--candidate-verification .cv-chip--tag i { background: var(--color-green-600); }

.p-solution--candidate-verification .cv-meter {
  margin-top: auto;
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--color-grey-100);
}
.p-solution--candidate-verification .cv-meter__fill {
  display: block; height: 100%; width: var(--cv-w, 24%);
  border-radius: 999px; background: var(--color-green-600);
}

/* ID document outline */
.p-solution--candidate-verification .cv-id {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: var(--radius-md);
  border: 1px solid var(--color-grey-100); background: var(--color-grey-50);
}
.p-solution--candidate-verification .cv-id__photo {
  width: 34px; height: 40px; border-radius: var(--radius-sm); margin-bottom: 2px;
  background: color-mix(in oklab, var(--color-blue-500) 12%, var(--color-white));
  box-shadow: inset 0 0 0 1px var(--color-grey-100);
}

/* status pills */
.p-solution--candidate-verification .cv-pill {
  margin-left: auto;
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-tight);
  white-space: nowrap;
}
.p-solution--candidate-verification .cv-pill--ok {
  color: var(--color-green-600);
  background: color-mix(in oklab, var(--color-green-600) 12%, var(--color-white));
}
.p-solution--candidate-verification .cv-pill--warn {
  color: var(--color-grey-500);
  background: color-mix(in oklab, var(--color-placeholder-yellow) 46%, var(--color-white));
}
.p-solution--candidate-verification .cv-pill--bad {
  color: var(--color-red-600);
  background: color-mix(in oklab, var(--color-red-600) 12%, var(--color-white));
}

/* video-interview join gate */
.p-solution--candidate-verification .cv-video {
  position: relative; flex: 1; min-height: 120px;
  border-radius: var(--radius-md); overflow: hidden;
  background:
    radial-gradient(120% 120% at 30% 10%, color-mix(in oklab, var(--color-grey-300) 40%, transparent), transparent 60%),
    var(--color-grey-500);
}
.p-solution--candidate-verification .cv-video__self {
  position: absolute; right: 10px; bottom: 10px;
  width: 30%; aspect-ratio: 16 / 10; border-radius: var(--radius-sm);
  background: var(--color-grey-600);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-white) 20%, transparent);
}
.p-solution--candidate-verification .cv-video__gate {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.p-solution--candidate-verification .cv-video__gate .cv-cam__oval--tight {
  position: static; transform: none; width: 42px;
  border-color: var(--color-white);
}

/* Day-1 success badge */
.p-solution--candidate-verification .cv-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  color: var(--color-white); background: var(--color-green-600);
}
.p-solution--candidate-verification .cv-badge svg { width: 22px; height: 22px; }

/* ============================================================
   5b · the hiring stack — the customer-onboarding SPLIT component
   (Sofia 2026-08-12): section on ink, copy + connector logo groups in
   the left half, inset divider rule at the column-aligned seam, the
   dashboard window bright in the right half. Stacks below 1024.
   ============================================================ */
.p-solution--candidate-verification .sol-stack.cv-split {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-rich-black);
  color: var(--color-white);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .p-solution--candidate-verification .sol-stack.cv-split {
    /* the cut lands on the template's column seam (the sol-caps feed
       border): offset + 24px gutter + rail share + 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;
  }
}
.p-solution--candidate-verification .cv-split__copy {
  display: flex;
  align-items: center;
}
.p-solution--candidate-verification .cv-split__copy-inner {
  padding: 80px 20px;
}
@media (min-width: 1024px) {
  .p-solution--candidate-verification .cv-split__copy-inner {
    padding: 96px 48px 96px max(24px, calc((100vw - var(--container-large)) / 2 + 24px));
  }
}
.p-solution--candidate-verification .cv-split__lead { color: var(--color-grey-on-black); }
.p-solution--candidate-verification .cv-split__visual {
  position: relative;
  display: flex;
  align-items: center;
  padding: 48px 20px 72px;
}
@media (min-width: 1024px) {
  .p-solution--candidate-verification .cv-split__visual {
    padding: 88px max(24px, calc((100vw - var(--container-large)) / 2 + 24px)) 88px 48px;
  }
}
.p-solution--candidate-verification .cv-split__visual .sol-stack__visual { width: 100%; }
/* the divider: an inset rule, never full-bleed — horizontal with side
   margins while stacked, vertical with top/bottom margins on the wide layout */
.p-solution--candidate-verification .cv-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--candidate-verification .cv-split__visual::before {
    top: 72px;
    bottom: 72px;
    left: 0;
    right: auto;
    width: 1px;
    height: auto;
  }
}
.p-solution--candidate-verification .sol-stack__groups {
  display: grid;
  gap: 28px;
  margin-top: 40px;
}
.p-solution--candidate-verification .sol-stack__group-label {
  margin-bottom: 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
.p-solution--candidate-verification .sol-stack__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-solution--candidate-verification .sol-stack__logo-item { display: inline-flex; align-items: center; }
.p-solution--candidate-verification .cv-logo {
  display: block;
  height: 22px;
  width: auto;
  max-width: 118px;
  object-fit: contain;
  /* on the ink half the marks knock to white — muted at rest, full on hover */
  filter: brightness(0) invert(1);
  opacity: 0.65;
  transition: opacity 0.25s ease;
}
.p-solution--candidate-verification .cv-logo:hover { opacity: 1; }
/* a couple of marks read very small at 22px — nudge them up */
.p-solution--candidate-verification .cv-logo[src*="okta"],
.p-solution--candidate-verification .cv-logo[src*="microsoft"] { height: 19px; }
.p-solution--candidate-verification .cv-logo[src*="Ashby"],
.p-solution--candidate-verification .cv-logo[src*="lever"],
.p-solution--candidate-verification .cv-logo[src*="servicenow"] { height: 20px; }
/* integrations without an official mark stay text chips (dark register) */
.p-solution--candidate-verification .cv-logo-chip {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--color-border-dark); background: var(--color-tint-white-05);
  font-size: var(--fs-sm); font-weight: 500; color: rgba(255, 255, 255, 0.75);
}

/* the dashboard-queue window mock */
.p-solution--candidate-verification .sol-stack__visual { position: relative; }
.p-solution--candidate-verification .cv-dash {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-grey-200);
  background: var(--color-white);
  overflow: hidden;
  /* the legacy soft drop converted on touch (site rule: hard shadows or
     none) — on ink the bright window carries its own contrast */
}
.p-solution--candidate-verification .cv-dash__body { padding: 18px 20px 20px; }
/* the workforce-dashboard stack vector: relative box the absolute svg fills */
.p-solution--candidate-verification .cv-dash__stage {
  position: relative;
  aspect-ratio: 560 / 350;
}
.p-solution--candidate-verification .cv-dash__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--color-grey-100);
}
.p-solution--candidate-verification .cv-dash__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--track-tight);
  color: var(--color-grey-600);
}
.p-solution--candidate-verification .cv-dash__tabs { display: inline-flex; gap: 6px; }
.p-solution--candidate-verification .cv-dash__tabs i {
  width: 18px; height: 6px; border-radius: 999px; background: var(--color-grey-100);
}
.p-solution--candidate-verification .cv-dash__tabs i.is-on { width: 26px; background: var(--color-blue-500); }
.p-solution--candidate-verification .cv-dash__row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--color-grey-50);
}
.p-solution--candidate-verification .cv-dash__row:last-child { border-bottom: 0; }
.p-solution--candidate-verification .cv-dash__row .cv-avatar { width: 26px; height: 26px; }

/* ============================================================
   6 · beyond the hire — each KYE lifecycle card carries a compact
   product moment (NEW · G14 · round-1 "potentiate the checks").
   Workflow-builder illustration language (G13). The three strips are
   the same fixed height and bottom-aligned so the cards stay equal
   (G12). Pure shapes — no numbers/claims.
   ============================================================ */
.p-solution--candidate-verification .sol-life__card {
  display: flex;
  flex-direction: column;
}
/* a guaranteed gap below the copy, then the strip pins to the card bottom
   (margin-top:auto) so all three strips align regardless of copy length */
.p-solution--candidate-verification .sol-life__line { margin-bottom: 22px; }
.p-solution--candidate-verification .sol-life__vis {
  margin-top: auto;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
}

/* selfie oval + green success badge (cards 1 & 2) */
.p-solution--candidate-verification .cvl__figure {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
}
.p-solution--candidate-verification .cvl__oval {
  position: relative;
  width: 30px;
  aspect-ratio: 3 / 4;
  border-radius: 50%;
  border: 2px dashed color-mix(in oklab, var(--color-blue-500) 58%, transparent);
}
.p-solution--candidate-verification .cvl__oval--sm {
  width: 26px;
  border-style: solid;
  border-width: 1.5px;
}
.p-solution--candidate-verification .cvl__ok {
  position: absolute;
  right: -6px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--color-green-600);
  color: var(--color-white);
  box-shadow: 0 0 0 2px var(--color-white);
}
.p-solution--candidate-verification .cvl__ok svg { width: 10px; height: 10px; }

/* account lock chip (card 2) */
.p-solution--candidate-verification .cvl__lock {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-blue-100);
  color: var(--color-blue-500);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-blue-500) 22%, transparent);
}
.p-solution--candidate-verification .cvl__lock svg { width: 15px; height: 15px; }

/* skeleton copy column (cards 1 & 2) */
.p-solution--candidate-verification .cvl__lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

/* selfie gate box on the reset (card 2) */
.p-solution--candidate-verification .cvl__gate {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-grey-50);
  border: 1px solid var(--color-grey-100);
}

/* continuous-monitoring activity strip (card 3) */
.p-solution--candidate-verification .cvl--2 { gap: 14px; }
.p-solution--candidate-verification .cvl__bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 32px;
}
.p-solution--candidate-verification .cvl__bars i {
  flex: 1;
  height: 42%;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-solution--candidate-verification .cvl__bars i:nth-child(2) { height: 72%; }
.p-solution--candidate-verification .cvl__bars i:nth-child(4) { height: 58%; }
.p-solution--candidate-verification .cvl__bars i:nth-child(6) { height: 50%; }
.p-solution--candidate-verification .cvl__bars i:nth-child(7) { height: 68%; }
.p-solution--candidate-verification .cvl__bars i:nth-child(8) { height: 44%; }
.p-solution--candidate-verification .cvl__bars i.is-hi { height: 100%; background: var(--color-blue-500); }
.p-solution--candidate-verification .cvl__bars i.is-flag {
  height: 80%;
  background: color-mix(in oklab, var(--color-red-600) 55%, var(--color-grey-100));
}
.p-solution--candidate-verification .cvl__pulse {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-green-600) 12%, var(--color-white));
}
.p-solution--candidate-verification .cvl__pulse i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-green-600);
}
/* a quiet "live" heartbeat — motion only when the visitor allows it */
@media (prefers-reduced-motion: no-preference) {
  .p-solution--candidate-verification .cvl__pulse i {
    animation: cv-life-pulse 2.4s ease-in-out infinite;
  }
}
@keyframes cv-life-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.66); }
}

/* ============================================================
   5 · Customization (sol-deploy) — schematic "Take a selfie" phone
   Replaces the old product-snapshot selfie image (G1) and its disliked
   grey silhouette-bust avatar (RONDA 3 pt.2 · G13). Same workflow-builder
   illustration language as the rest of the page: white ground, grey
   skeleton, dashed face-oval + the canonical person glyph, ONE brand
   accent (--cv-brand). Two stacked copies (base blue + branded purple)
   preserve the shared color-flip choreography (.sol-deploy.is-c2 fades the
   branded copy in over the base — see solution.css).
   ============================================================ */
.p-solution--candidate-verification .cvsf-screen {
  --cv-brand: var(--color-blue-500);
  position: relative;
  overflow: hidden;
  background: var(--color-white);
}
/* the branded copy re-themes the single accent blue → purple */
.p-solution--candidate-verification .sol-deploy__screen-branded.cvsf-screen {
  --cv-brand: var(--color-purple-500);
}
/* the phone's top-right is where the "Your logo" Studio float lands once the
   choreography arrives — keep this mock's chip in the clear top-left corner */
.p-solution--candidate-verification .cvsf-phone .cv-mock { right: auto; left: 10px; }
.p-solution--candidate-verification .cvsf {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 34px 20px 22px;
}
/* top brand row — the Loop logo-swap patch (is-c4) lands over this */
.p-solution--candidate-verification .cvsf__brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.p-solution--candidate-verification .cvsf__mark {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  background: var(--cv-brand);
}
.p-solution--candidate-verification .cvsf__word {
  width: 48px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
/* heading skeleton (title + subtitle), centered */
.p-solution--candidate-verification .cvsf__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.p-solution--candidate-verification .cvsf__head .cv-b { margin-inline: auto; }
.p-solution--candidate-verification .cvsf__head .cv-b:first-child { height: 10px; }
/* camera tile — soft brand wash, dashed face-oval, canonical person glyph */
.p-solution--candidate-verification .cvsf__cam {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-grey-100);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--cv-brand) 16%, transparent), transparent 68%),
    var(--color-grey-50);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.p-solution--candidate-verification .cvsf__oval {
  width: 52%;
  aspect-ratio: 3 / 4;
  border-radius: 50%;
  border: 2px dashed color-mix(in oklab, var(--cv-brand) 60%, transparent);
  display: grid;
  place-items: center;
}
.p-solution--candidate-verification .cvsf__person {
  width: 60%;
  color: var(--color-grey-300);
  display: grid;
  place-items: center;
}
.p-solution--candidate-verification .cvsf__person svg {
  display: block;
  width: 100%;
  height: auto;
}
/* success hints */
.p-solution--candidate-verification .cvsf__hints {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.p-solution--candidate-verification .cvsf__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-green-600);
}
.p-solution--candidate-verification .cvsf__hint svg { flex-shrink: 0; }
/* the capture CTA — the "Take selfie" button the Corner-radius control cites */
.p-solution--candidate-verification .cvsf__cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--cv-brand);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--track-tight);
}

/* ── landing restructure (Sofia 2026-08-18) ─────────────────────────── */
/* the hero foot stats retired with the landing copy — neutralize the
   template's twin-auto-margin (the authentication-page lesson: a lone
   auto margin drops the copy to the hero's foot) */
@media (min-width: 1024px) {
  .p-solution.p-solution--candidate-verification .sol-hero__id { margin-top: 0; }
}
/* the caps cards carry the landing's category labels as plain kickers */
.p-solution--candidate-verification .sol-cap__tag {
  margin-bottom: 6px;
  color: var(--color-blue);
}
/* methods ledger (the identity stack) — hairline rows on the ink split */
.p-solution--candidate-verification .cv-methods {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
}
.p-solution--candidate-verification .cv-method {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
}
.p-solution--candidate-verification .cv-method__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--color-white);
}
.p-solution--candidate-verification .cv-method__name svg {
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.p-solution--candidate-verification .cv-method:hover .cv-method__name svg {
  opacity: 1;
  transform: translate(2px, -2px);
}
.p-solution--candidate-verification .cv-method__line {
  font-size: var(--fs-sm);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.65);
}

/* § story-quote source row — the G2 logo + stars under the quote inside
   the industries ind-story band (canonical G2 treatment: logo h28 + 5
   filled stars + plain "Customer review" attribution) */
.p-solution .cv-story__source {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.p-solution .cv-story__logo {
  display: block;
  height: var(--logo-h, 28px);
  width: auto;
}
.p-solution .cv-story__stars {
  display: inline-flex;
  gap: 3px;
  color: var(--color-black);
}
.p-solution .cv-story__star {
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.p-solution .cv-story__star svg {
  width: 100%;
  height: 100%;
}

/* § fold guard RETIRED (Nacim, 2026-08-19) — same reason as the shared one in
   solution.css: the first section now CLEARS the hero (no -32px overlap), so
   the +100px that pushed the card past the fold is obsolete and cut the card
   off. The hero fits as a one-screen card with its four gutters. */