/* ============================================================
   Business verification (KYB) — page overrides on top of the
   shared solution template (/styles/pages/solution.css). This
   sheet loads AFTER solution.css. Everything is scoped under the
   page modifier .p-solution--know-your-business.

   KYB has no real product screenshots in /product-snapshots/, so
   every media slot on this page ships as a BUILT wireframe mockup
   (the kit below): white ground, light-grey skeleton shapes, thin
   hairlines, a single blue accent (green/amber only where a KYB
   status is the point). Each mockup keeps its data-ph id and wears
   a small "Mockup" corner chip so it stays greppable and a
   designer knows to swap it for final art.

   Surface classification: HYBRID — the representative's mobile
   onboarding flow (end-user phone screens: enter → screen → map →
   verified) plus the reviewer's Business tab (dashboard money-shot
   in the foundation section).
   ============================================================ */

/* ---- the "Mockup" corner chip (discreet, 11px, greppable) ---- */
.p-solution--know-your-business .kyb-chip {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-placeholder-yellow);
  color: var(--color-black);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  pointer-events: none;
}

/* =========================================================
   PHONE SCREEN MOCKUPS (end-user KYB flow)
   Rendered inside the template's .sol-stage__screen slots, so
   aspect-ratio (390/844) + the deck cross-fade come for free.
   ========================================================= */
.p-solution--know-your-business .kyb-screen {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background: var(--color-white);
}
/* Asset-backed screens (steps 1/3/4): drop the trimmed SVG (390:844,
   viewBox already cropped to phone content) straight into the slot. */
.p-solution--know-your-business .kyb-screen--asset {
  background: var(--color-white);
}
.p-solution--know-your-business .kyb-screen__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Two-phase screen (step 1): the base image (form filled + enabled
   Continue) shows first, then the loading image (form disabled + button
   loader) cross-fades in on top after a beat — so it reads as the user
   just tapped Continue. Both SVGs share the same phone chrome, so the
   fade is imperceptible except at the fields + button. */
.p-solution--know-your-business .kyb-screen--load2 {
  position: relative;
}
.p-solution--know-your-business .kyb-screen__img--phase2 {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.p-solution--know-your-business
  .sol-stage__screen.kyb-screen--load2.is-active
  .kyb-screen__img--phase2 {
  animation: kyb-load2-in 0.45s ease 1.4s both;
}
@keyframes kyb-load2-in {
  to {
    opacity: 1;
  }
}

/* Continue-button loading overlay (step 3 only): sits exactly on top of
   the "Continue" button baked into ubo-filled.svg so it looks like the
   user just tapped Continue and the app is now loading. Blue button
   geometry mirrors the SVG button; spinner replaces the label (design-
   system button loading state). Fades in on step activate with a short
   beat so the untouched state is briefly visible first. */
.p-solution--know-your-business .kyb-screen--action {
  position: relative;
}
.p-solution--know-your-business .kyb-btnload {
  position: absolute;
  z-index: 2;
  /* Matches the pill button baked into bdetails.svg / ubo-filled.svg:
     x=54→396 of 30→420 (viewport 390 wide) → 6.15%–93.85%.
     y=707→763 of 15→859 (viewport 844 tall) → 82.0%–88.6%.
     Border radius = height/2 (fully rounded end caps). */
  left: 6.15%;
  right: 6.15%;
  top: 82%;
  height: 6.65%;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-blue-500);
  opacity: 0;
}
.p-solution--know-your-business .kyb-btnload__spin {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: var(--color-white);
  animation: kyb-back-spin 0.9s linear infinite;
}
.p-solution--know-your-business
  .sol-stage__screen.kyb-screen--action.is-active
  .kyb-btnload {
  animation: kyb-btnload-in 0.4s ease 1.4s both;
}
@keyframes kyb-btnload-in {
  to {
    opacity: 1;
  }
}

/* Success screen (step 4) — the image itself is STATIC (no whole-screen
   pop). The green icon interaction mirrors customer-onboarding exactly:
   the badge scales in with slight overshoot (co-badge-in curve) and a
   check-mark twin draws itself via stroke-dashoffset (co-check-draw).
   Rendered as an overlay positioned over the badge baked into success.svg:
   center at 50% × 51.7% of the phone slot, diameter 13% of phone width
   (from the SVG's circle at cx=225 cy=451.5 r=25.33 in viewport 30 15 390 844).
   A white cover hides the SVG's static badge so our overlay owns the
   visual — otherwise the SVG's badge would be visible during the pop's
   scale(0) frames. */
.p-solution--know-your-business .kyb-success {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 51.7%;
  width: 13%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.p-solution--know-your-business .kyb-success__cover {
  position: absolute;
  inset: -10%;
  border-radius: 999px;
  background: var(--color-white);
}
.p-solution--know-your-business .kyb-success__badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-green-500);
  color: var(--color-white);
  transform-origin: center;
}
.p-solution--know-your-business .kyb-success__check {
  /* viewBox spans the s7 badge circle bbox, so filling the badge renders
     the customer-onboarding check at its exact proportions */
  width: 100%;
  height: 100%;
}
.p-solution--know-your-business .kyb-success__check-draw {
  display: none;
}

/* Active: badge pops in, static check is hidden, draw-on check traces
   itself. Same pop + draw as the homepage success (x3.css wspUxBadge /
   wspUxCheckDraw), and — like the homepage — it LOOPS: a scroll-walk can
   land on step 4 mid-momentum and blow past a one-shot pop, so the badge
   re-pops on a 5s cycle (empty → pop → check draws → hold ~3.4s → shrink
   out → repeat) so the animation is never missed. */
.p-solution--know-your-business
  .sol-stage__screen.kyb-screen--success.is-active
  .kyb-success__badge {
  animation: kyb-badge-loop 5s linear infinite;
}
.p-solution--know-your-business
  .sol-stage__screen.kyb-screen--success.is-active
  .kyb-success__check-static {
  opacity: 0;
}
.p-solution--know-your-business
  .sol-stage__screen.kyb-screen--success.is-active
  .kyb-success__check-draw {
  display: inline;
  stroke-dasharray: 1;
  animation: kyb-check-loop 5s linear infinite;
}
/* badge: hold empty (0.4s) → pop 0→1.06→1 on incode-settle → hold the
   check visible (~3.4s) → shrink away on incode-impact → loop */
@keyframes kyb-badge-loop {
  0%,
  8% {
    transform: scale(0);
    animation-timing-function: cubic-bezier(0, 0.75, 0.25, 1);
  }
  18% {
    transform: scale(1.06);
    animation-timing-function: cubic-bezier(0, 0.75, 0.25, 1);
  }
  20% {
    transform: scale(1);
  }
  88% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 0.3);
  }
  96%,
  100% {
    transform: scale(0);
  }
}
/* check draws itself on over the back half of the pop, then holds drawn
   (it shrinks away with the badge on reset, so no visible un-draw) */
@keyframes kyb-check-loop {
  0%,
  14% {
    stroke-dashoffset: 1;
    animation-timing-function: ease-out;
  }
  20%,
  100% {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-solution--know-your-business .kyb-btnload__spin {
    animation: none;
  }
  .p-solution--know-your-business
    .sol-stage__screen.kyb-screen--action.is-active
    .kyb-btnload {
    animation: none;
    opacity: 1;
  }
  .p-solution--know-your-business
    .sol-stage__screen.kyb-screen--load2.is-active
    .kyb-screen__img--phase2 {
    animation: none;
    opacity: 1;
  }
  .p-solution--know-your-business
    .sol-stage__screen.kyb-screen--success.is-active
    .kyb-success__badge {
    animation: none;
  }
  .p-solution--know-your-business
    .sol-stage__screen.kyb-screen--success.is-active
    .kyb-success__check-static {
    opacity: 1;
  }
  .p-solution--know-your-business
    .sol-stage__screen.kyb-screen--success.is-active
    .kyb-success__check-draw {
    display: none;
  }
}

.p-solution--know-your-business .kyb-scr {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 14px;
  font-family: var(--font-sans);
  color: var(--color-grey-500);
}

/* status bar + app header (chrome) */
.p-solution--know-your-business .kyb-scr__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px 4px;
}
.p-solution--know-your-business .kyb-scr__notch {
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-solution--know-your-business .kyb-scr__dots {
  display: inline-flex;
  gap: 3px;
}
.p-solution--know-your-business .kyb-scr__dots i {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-solution--know-your-business .kyb-scr__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px 12px;
  border-bottom: 1px solid var(--color-grey-100);
}
.p-solution--know-your-business .kyb-scr__brand {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--color-blue-500);
}
.p-solution--know-your-business .kyb-scr__app {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-grey-400);
}

.p-solution--know-your-business .kyb-scr__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 14px 16px 0;
}
.p-solution--know-your-business .kyb-scr__body--ok {
  align-items: center;
  text-align: center;
}
.p-solution--know-your-business .kyb-scr__title {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  color: var(--color-grey-500);
}
.p-solution--know-your-business .kyb-scr__title--lg {
  font-size: var(--fs-sm);
}

/* skeleton bar */
.p-solution--know-your-business .kyb-sk {
  display: inline-block;
  width: var(--w, 100%);
  height: 7px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-solution--know-your-business .kyb-sk--title {
  height: 11px;
  background: var(--color-grey-200);
}

/* green verification tick */
.p-solution--know-your-business .kyb-tick {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--color-green-100);
  border: 1px solid var(--color-green-200);
}
.p-solution--know-your-business .kyb-tick::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 3px;
  width: 4px;
  height: 7px;
  border: solid var(--color-green-600);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

/* status pills */
.p-solution--know-your-business .kyb-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
}
.p-solution--know-your-business .kyb-pill--ok {
  background: var(--color-green-100);
  color: var(--color-green-600);
}
.p-solution--know-your-business .kyb-pill--lg {
  padding: 3px 10px;
  font-size: var(--fs-xs);
}
.p-solution--know-your-business .kyb-pill--ghost {
  width: 30px;
  height: 14px;
  background: var(--color-grey-100);
}

/* the verified badge (summary screen) */
.p-solution--know-your-business .kyb-scr__badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--color-green-500);
  color: var(--color-white);
}
.p-solution--know-your-business .kyb-scr__badge .kyb-ic {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

/* entity summary card */
.p-solution--know-your-business .kyb-scr__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--color-grey-100);
  border-radius: var(--radius-lg);
  background: var(--color-grey-50);
  text-align: left;
}
.p-solution--know-your-business .kyb-scr__ent {
  margin-bottom: 2px;
}
.p-solution--know-your-business .kyb-scr__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.p-solution--know-your-business .kyb-scr__lab2 {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-grey-400);
}

/* four-check list */
.p-solution--know-your-business .kyb-scr__checks {
  width: 100%;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.p-solution--know-your-business .kyb-scr__checks li {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* form fields (step 1) */
.p-solution--know-your-business .kyb-scr__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.p-solution--know-your-business .kyb-scr__lab {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-grey-400);
}
.p-solution--know-your-business .kyb-scr__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
.p-solution--know-your-business .kyb-scr__chev {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--color-grey-300);
  border-bottom: 1.5px solid var(--color-grey-300);
  transform: rotate(45deg);
}
.p-solution--know-your-business .kyb-scr__foot {
  padding: 12px 16px 0;
}
.p-solution--know-your-business .kyb-scr__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--color-blue-500);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* screening progress (step 2) */
.p-solution--know-your-business .kyb-scr__prog {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--color-grey-100);
  overflow: hidden;
}
.p-solution--know-your-business .kyb-scr__prog-fill {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: 999px;
  background: var(--color-blue-500);
}
.p-solution--know-your-business .kyb-scr__rows {
  width: 100%;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-solution--know-your-business .kyb-scr__srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--color-grey-100);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
.p-solution--know-your-business .kyb-scr__srow.is-wait {
  opacity: 0.55;
}
.p-solution--know-your-business .kyb-scr__spin {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--color-blue-100);
  border-top-color: var(--color-blue-500);
}
.p-solution--know-your-business .kyb-scr__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1.5px solid var(--color-grey-300);
}

/* ---------- step 2 · phone (watchlist-processing.svg) + overlay ----------
   The phone screen shows "Processing…"; the loader card floats on top of
   it, listing the backend checks running right now (OFAC · Global ·
   Adverse media · PEP). Each row's status circle cross-fades between a
   blue spinner (scanning) and a solid green check (clear). */
/* Overlay host: the .kyb-screen slot needs children stacked, phone
   image below and loader card on top. */
.p-solution--know-your-business .kyb-screen--overlay {
  position: relative;
}
.p-solution--know-your-business .kyb-screen--overlay .kyb-screen__img {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Loader card positioned inside the phone slot, floating in the middle
   band above the phone's built-in spinner. On desktop the reference
   composition sat the card to the LEFT of the phone; here the phone
   slot is narrow so we center-overlay it instead. */
.p-solution--know-your-business .kyb-back {
  position: relative;
  font-family: var(--font-sans);
}
.p-solution--know-your-business .kyb-back--overlay {
  position: absolute;
  z-index: 2;
  left: 8%;
  right: 8%;
  top: 38%;
}
.p-solution--know-your-business .kyb-back__card {
  position: relative;
  padding: 12px;
  border-radius: 14px;
  background: var(--color-white);
}
.p-solution--know-your-business .kyb-back__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-solution--know-your-business .kyb-back-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--color-grey-100);
  border-radius: 999px;
  background: var(--color-white);
}
.p-solution--know-your-business .kyb-back-row__k {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-grey-500);
}

/* the state circle: 22px, solid fill, cross-fades between blue-loading
   (spinner ring inside a light blue disc) and green-done (solid green
   disc with a white checkmark). Sits in a fixed slot so the row
   doesn't shift when it flips. */
.p-solution--know-your-business .kyb-back-state {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
}
.p-solution--know-your-business .kyb-back-state__load,
.p-solution--know-your-business .kyb-back-state__done {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  transition: opacity 0.35s ease;
}
.p-solution--know-your-business .kyb-back-state__load {
  background: var(--color-blue-100);
  opacity: 1;
}
.p-solution--know-your-business .kyb-back-state__done {
  background: var(--color-green-500);
  color: var(--color-white);
  opacity: 0;
}
.p-solution--know-your-business .kyb-back-state__done svg {
  width: 12px;
  height: 12px;
}
.p-solution--know-your-business .kyb-back-spin {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1.8px solid var(--color-blue-200);
  border-top-color: var(--color-blue-500);
  animation: kyb-back-spin 0.9s linear infinite;
}
@keyframes kyb-back-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Active-state motion: each row's state cross-fades on a staggered
   timer. Cycle ~6s: 4 rows resolve one after another, then a hold on
   Clear before restarting. */
.p-solution--know-your-business
  .sol-stage__screen.kyb-screen--overlay.is-active
  .kyb-back-row
  .kyb-back-state__load {
  animation: kyb-back-fade-out 6s ease calc(0.6s + var(--i) * 0.9s) infinite
    both;
}
.p-solution--know-your-business
  .sol-stage__screen.kyb-screen--overlay.is-active
  .kyb-back-row
  .kyb-back-state__done {
  animation: kyb-back-fade-in 6s ease calc(0.6s + var(--i) * 0.9s) infinite both;
}
@keyframes kyb-back-fade-out {
  0%,
  100% {
    opacity: 1;
  }
  6%,
  68% {
    opacity: 0;
  }
}
@keyframes kyb-back-fade-in {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.85);
  }
  6% {
    opacity: 1;
    transform: scale(1);
  }
  68% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-solution--know-your-business .kyb-back-spin {
    animation: none;
  }
  .p-solution--know-your-business
    .sol-stage__screen.kyb-screen--overlay.is-active
    .kyb-back-row
    .kyb-back-state__load {
    animation: none;
    opacity: 0;
  }
  .p-solution--know-your-business
    .sol-stage__screen.kyb-screen--overlay.is-active
    .kyb-back-row
    .kyb-back-state__done {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* owners mapped (step 3) */
.p-solution--know-your-business .kyb-scr__graph {
  width: 100%;
  padding: 8px 6px;
  border: 1px solid var(--color-grey-100);
  border-radius: var(--radius-lg);
  background: var(--color-grey-50);
}
.p-solution--know-your-business .kyb-scr__graph .kyb-net {
  display: block;
  width: 100%;
  height: auto;
}
.p-solution--know-your-business .kyb-scr__owners {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-solution--know-your-business .kyb-scr__owners li {
  display: flex;
  align-items: center;
  gap: 9px;
}
.p-solution--know-your-business .kyb-scr__ava {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--color-grey-100);
  color: var(--color-grey-400);
}
.p-solution--know-your-business .kyb-scr__owners li .kyb-pill--ghost {
  margin-left: auto;
}

/* the ownership network glyph (shared by phone + dashboard) */
.p-solution--know-your-business .kyb-net__link {
  stroke: var(--color-grey-200);
  stroke-width: 1.5;
  fill: none;
}
.p-solution--know-your-business .kyb-net__co {
  fill: var(--color-blue-500);
}
.p-solution--know-your-business .kyb-net__own {
  fill: var(--color-grey-50);
  stroke: var(--color-grey-200);
  stroke-width: 1.5;
}
.p-solution--know-your-business .kyb-net__leaf {
  fill: var(--color-grey-100);
  stroke: var(--color-grey-200);
  stroke-width: 1.5;
}

/* =========================================================
   DASHBOARD MOCKUP (reviewer's Business tab — the money-shot)
   ========================================================= */
.p-solution--know-your-business .kyb-dash {
  margin: 44px auto 8px;
  max-width: 1000px;
}
.p-solution--know-your-business .kyb-fill {
  position: relative;
  aspect-ratio: var(--ph-ar, 1200 / 720);
  border-radius: 16px;
}
.p-solution--know-your-business .kyb-win {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-grey-100);
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: none;
  font-family: var(--font-sans);
}
.p-solution--know-your-business .kyb-win__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--color-grey-100);
  background: var(--color-grey-50);
}
.p-solution--know-your-business .kyb-win__dots {
  display: inline-flex;
  gap: 6px;
}
.p-solution--know-your-business .kyb-win__dots i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-solution--know-your-business .kyb-win__url {
  flex: 1;
  max-width: 260px;
  height: 18px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-solution--know-your-business .kyb-win__body {
  flex: 1;
  display: grid;
  grid-template-columns: 158px 1fr;
  min-height: 0;
}

/* sidebar */
.p-solution--know-your-business .kyb-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 12px;
  border-right: 1px solid var(--color-grey-100);
  background: var(--color-grey-50);
}
.p-solution--know-your-business .kyb-side__logo {
  width: 26px;
  height: 26px;
  margin: 2px 4px 12px;
  border-radius: 7px;
  background: var(--color-blue-500);
}
.p-solution--know-your-business .kyb-side__item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-grey-400);
}
.p-solution--know-your-business .kyb-side__item::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 9px;
  border-radius: 4px;
  border: 1.5px solid var(--color-grey-200);
}
.p-solution--know-your-business .kyb-side__item.is-active {
  background: var(--color-blue-100);
  color: var(--color-blue-500);
  font-weight: 600;
}
.p-solution--know-your-business .kyb-side__item.is-active::before {
  border-color: var(--color-blue-500);
  background: var(--color-blue-500);
}

/* main column */
.p-solution--know-your-business .kyb-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 20px;
}
.p-solution--know-your-business .kyb-main__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-grey-100);
}
.p-solution--know-your-business .kyb-main__ent {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.p-solution--know-your-business .kyb-main__ava {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--color-grey-100);
}
.p-solution--know-your-business .kyb-main__tabs {
  display: inline-flex;
  gap: 4px;
  flex: none;
}
.p-solution--know-your-business .kyb-main__tabs span {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-grey-400);
}
.p-solution--know-your-business .kyb-main__tabs .is-active {
  background: var(--color-grey-100);
  color: var(--color-grey-500);
  font-weight: 600;
}
.p-solution--know-your-business .kyb-main__grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 16px;
  min-height: 0;
}

/* panels */
.p-solution--know-your-business .kyb-panel {
  display: flex;
  flex-direction: column;
  padding: 14px;
  border: 1px solid var(--color-grey-100);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  min-width: 0;
}
.p-solution--know-your-business .kyb-panel--wide {
  grid-column: 1 / -1;
}
.p-solution--know-your-business .kyb-panel__h {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--color-grey-400);
}

/* entity record */
.p-solution--know-your-business .kyb-rec {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.p-solution--know-your-business .kyb-rec__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.p-solution--know-your-business .kyb-rec__k {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-grey-400);
}
.p-solution--know-your-business .kyb-rec__row .kyb-sk {
  max-width: 130px;
}

/* ownership graph panel */
.p-solution--know-your-business .kyb-graph {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 6px;
}
.p-solution--know-your-business .kyb-graph .kyb-net--dash {
  display: block;
  width: 100%;
  height: auto;
}

/* screening results */
.p-solution--know-your-business .kyb-scrn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-solution--know-your-business .kyb-scrn__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-grey-100);
  border-radius: var(--radius-md);
  background: var(--color-grey-50);
}
.p-solution--know-your-business .kyb-scrn__k {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-grey-500);
}
.p-solution--know-your-business .kyb-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
}
.p-solution--know-your-business .kyb-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.p-solution--know-your-business .kyb-tag--ok {
  background: var(--color-green-100);
  color: var(--color-green-600);
}
.p-solution--know-your-business .kyb-tag--warn {
  background: var(--color-amber-100);
  color: var(--color-amber-600);
}

/* =========================================================
   THE REVIEWER'S VIEW (sol-view) — the Business tab promoted to
   its own dark product section (G14) with a calm blue accent and
   interactive Overview / Owners / Screening tabs (data-tabs).
   ========================================================= */
.p-solution--know-your-business .sol-view {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(
      58% 78% at 84% -10%,
      color-mix(in oklab, var(--color-blue-500) 12%, transparent),
      transparent 62%
    ),
    var(--color-black);
  color: var(--color-white);
}
/* the feature window is a touch wider than the inline dashboard */
.p-solution--know-your-business .kyb-dash--feature {
  max-width: 1080px;
  margin: 44px auto 0;
}

/* interactive tabs (buttons drive data-tabs) — same look as the old
   decorative pills, now real controls */
.p-solution--know-your-business .kyb-main__tabs button {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 5px 11px;
  border-radius: 999px;
  background: none;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-grey-400);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.p-solution--know-your-business .kyb-main__tabs button:hover {
  color: var(--color-grey-500);
}
.p-solution--know-your-business .kyb-main__tabs button.is-active {
  background: var(--color-grey-100);
  color: var(--color-grey-500);
  font-weight: 600;
}

/* the panel area fills the aspect-locked window height; only the
   active panel shows, crossfading in place */
.p-solution--know-your-business .kyb-tabwrap {
  position: relative;
  flex: 1;
  min-height: 0;
  padding-top: 16px;
}
.p-solution--know-your-business .kyb-tabpanel {
  display: none;
  height: 100%;
  min-height: 0;
}
.p-solution--know-your-business .kyb-tabpanel.is-active {
  display: grid;
  animation: kyb-fade 0.3s ease;
}
@keyframes kyb-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-solution--know-your-business .kyb-tabpanel.is-active {
    animation: none;
  }
}
.p-solution--know-your-business .kyb-tabpanel--overview {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
}
.p-solution--know-your-business .kyb-tabpanel--owners {
  grid-template-columns: 1.35fr 1fr;
  gap: 14px;
}
.p-solution--know-your-business .kyb-tabpanel--screening {
  grid-template-columns: 1fr;
}
/* a focused single-column screening list on its own tab */
.p-solution--know-your-business .kyb-scrn--full {
  grid-template-columns: 1fr;
  gap: 8px;
  align-content: start;
}

/* beneficial-owner list (Owners tab) */
.p-solution--know-your-business .kyb-ubo-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-solution--know-your-business .kyb-ubo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-grey-100);
}
.p-solution--know-your-business .kyb-ubo:last-child {
  border-bottom: 0;
}
.p-solution--know-your-business .kyb-ubo__ava {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--color-grey-100);
  color: var(--color-grey-400);
}

/* ronda-3 avatar pass: the canonical site user glyph, centered in the light
   circular chip — the one approved "person" treatment, wherever a beneficial
   owner appears (phone owners list + dashboard UBO list) */
.p-solution--know-your-business .kyb-ava-ic {
  width: 62%;
  height: 62%;
  display: block;
}
.p-solution--know-your-business .kyb-ubo .kyb-pill--ghost {
  margin-left: auto;
}

/* narrow screens: the dashboard grid stacks so nothing crushes, and the
   aspect lock releases so a single stacked panel is never clipped */
@media (max-width: 560px) {
  .p-solution--know-your-business .kyb-win__body {
    grid-template-columns: 1fr;
  }
  .p-solution--know-your-business .kyb-side {
    display: none;
  }
  .p-solution--know-your-business .kyb-main__grid {
    grid-template-columns: 1fr;
  }
  .p-solution--know-your-business .kyb-scrn {
    grid-template-columns: 1fr;
  }
  .p-solution--know-your-business .kyb-fill {
    aspect-ratio: auto;
  }
  .p-solution--know-your-business .kyb-dash--feature .kyb-win {
    position: static;
  }
  .p-solution--know-your-business .kyb-main__top {
    flex-wrap: wrap;
  }
  .p-solution--know-your-business .kyb-tabpanel--overview,
  .p-solution--know-your-business .kyb-tabpanel--owners {
    grid-template-columns: 1fr;
  }
}

/* ======================================================================
   BUSINESS-VERIFICATION STEPPER (kyb-review § "Every check on one business
   record"). Same scroll-pin walk as the KYC-AML screening section: the shared
   sol-how__* rail (solution.css) drives it. The deck is restyled to the locked
   Single Session dashboard template (kyd-* — mirrors technology/liveness-
   detection.css .lvw-*). Driven by section-walk.js ([data-ka-walk]).
   ====================================================================== */
.p-solution--know-your-business .kyb-review {
  background: var(--color-white);
  color: var(--color-foreground);
  border-top: 1px solid var(--color-border-light);
}

/* scroll-pin walk (wide + motion): the section grows tall and its inner
   content pins for the length of the walk, so scroll SELECTS the step. */
.p-solution--know-your-business .kyb-review__pin {
  position: relative;
}
.p-solution--know-your-business .kyb-review.is-walk {
  height: calc(100svh + 72svh * var(--ka-steps, 4));
}
.p-solution--know-your-business .kyb-review.is-walk .kyb-review__pin {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* active-step underline. Walk: tracks in-band scroll fraction (--ka-scrub);
   walked-past steps hold a full bar. Static: a timed fill (sol-how-fill
   keyframes live in solution.css). */
.p-solution--know-your-business
  .kyb-review.is-walk
  .sol-how__step.is-active
  .sol-how__fill {
  transform: scaleX(var(--ka-scrub, 0));
  transition: transform 0.18s linear;
}
.p-solution--know-your-business
  .kyb-review.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-solution--know-your-business
  .kyb-review: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-solution--know-your-business
    .kyb-review:not(.is-walk)
    .sol-how__step.is-active
    .sol-how__fill {
    animation: none;
  }
}

/* jump-free rail: every description opens to the SAME measured height
   (--at-reveal-h, set by section-walk.js). Scoped to the walk section so the
   hero how-it-works reveal is untouched. */
.p-solution--know-your-business .kyb-review .sol-how__reveal {
  display: block;
  height: 0;
  overflow: hidden;
  transition: height 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-solution--know-your-business
  .kyb-review
  .sol-how__step.is-active
  .sol-how__reveal {
  height: var(--at-reveal-h, 78px);
}
.p-solution--know-your-business .kyb-review .sol-how__line {
  padding-top: 10px;
}

/* ---- the deck restyled to the locked Single Session dashboard template
   (mirrors technology/liveness-detection.css .lvw-*, prefixed kyd-, scoped
   here): a light browser window → grey nav → green "Pass" header → a
   persistent business tile on the left + hairline label·pill rows on the
   right that crossfade per step. The walk mechanic is unchanged — the JS
   still toggles is-active on the [data-at-screen] screens. ---- */

/* give THIS section's stage more room so the in-window dashboard breathes;
   scoped to .kyb-review so the hero how-it-works walk keeps the shared
   1.05/0.95 balance (two walks on this page — only widen this one). */
@media (min-width: 1024px) {
  .p-solution--know-your-business .kyb-review .sol-how__inner {
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
    gap: 56px;
  }
}

.p-solution--know-your-business .kyd-deck {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 560px);
  margin-inline: auto;
  border-radius: 14px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  box-shadow: none;
  overflow: hidden;
}

/* browser chrome is now the canonical <BrowserChrome /> (.brchrome,
   browser-chrome.css) — the bespoke .kyd-chrome* rules were removed with the
   markup. */

/* the dashboard inside the window: de-emphasised nav + main */
.p-solution--know-your-business .kyd-app {
  display: flex;
  align-items: stretch;
  min-height: 300px;
}
.p-solution--know-your-business .kyd-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--know-your-business .kyd-appnav__line {
  height: 7px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-solution--know-your-business .kyd-appmain {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.p-solution--know-your-business .kyd-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--know-your-business .kyd-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--know-your-business .kyd-apphead__sid {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-grey-400);
}
.p-solution--know-your-business .kyd-body {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}

/* ---- persistent business tile (left) — a rounded light card with a
   building glyph over two record lines; top-aligned, stays put across steps ---- */
.p-solution--know-your-business .kyd-biz {
  flex-shrink: 0;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 20px 18px;
  border-right: 1px solid var(--color-grey-100);
}
.p-solution--know-your-business .kyd-biz__glyph {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--color-blue-100);
  color: var(--color-blue-500);
}
.p-solution--know-your-business .kyd-biz__glyph svg {
  width: 30px;
  height: 30px;
}
.p-solution--know-your-business .kyd-biz__line {
  height: 7px;
  width: 72%;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-solution--know-your-business .kyd-biz__line--wide {
  width: 92%;
  background: var(--color-grey-300);
}

/* the checks (right) — screens stack in one grid cell and crossfade */
.p-solution--know-your-business .kyd-screens {
  position: relative;
  display: grid;
  flex: 1;
  min-width: 0;
  align-self: stretch;
}
.p-solution--know-your-business .kyd-screen {
  grid-area: 1 / 1;
  align-self: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 236px;
  padding: 18px 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.p-solution--know-your-business .kyd-screen.is-active {
  opacity: 1;
  transition: opacity 0.35s ease 0.05s;
}
@media (prefers-reduced-motion: reduce) {
  .p-solution--know-your-business .kyd-screen,
  .p-solution--know-your-business .kyb-review .sol-how__reveal {
    transition: none;
  }
}

/* screen head (icon + title) */
.p-solution--know-your-business .kyd-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-grey-on-white);
}
.p-solution--know-your-business .kyd-head .ds-icon {
  width: 18px;
  height: 18px;
  color: var(--color-grey-400);
}

/* hairline label · pill rows (no boxes, separators only) */
.p-solution--know-your-business .kyd-table {
  display: flex;
  flex-direction: column;
}
.p-solution--know-your-business .kyd-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-solution--know-your-business .kyd-trow:last-child {
  border-bottom: 0;
}
.p-solution--know-your-business .kyd-trow__lbl {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-grey-500);
}

/* tone pills: neutral base + good / warn / bad + accent */
.p-solution--know-your-business .kyd-pill {
  white-space: nowrap;
  justify-self: end;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-grey-100);
  color: var(--color-grey-on-white);
}
.p-solution--know-your-business .kyd-pill--good {
  background: var(--color-green-100);
  color: var(--color-green-600);
}
.p-solution--know-your-business .kyd-pill--warn {
  background: var(--color-amber-100);
  color: var(--color-amber-600);
}
.p-solution--know-your-business .kyd-pill--bad {
  background: var(--color-red-100);
  color: var(--color-red-600);
}
.p-solution--know-your-business .kyd-pill--accent {
  background: color-mix(in oklab, var(--color-blue-500) 14%, transparent);
  color: var(--color-blue);
}

/* footer accent chip */
.p-solution--know-your-business .kyd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.p-solution--know-your-business .kyd-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--know-your-business .kyd-chip--accent {
  background: color-mix(in oklab, var(--color-blue-500) 14%, transparent);
  color: var(--color-blue);
}

/* choreography — pills pop in when a step activates */
.p-solution--know-your-business .kyd-screen .kyd-pill {
  opacity: 0;
  transform: translateY(3px) scale(0.9);
}
.p-solution--know-your-business .kyd-screen.is-active .kyd-pill {
  animation: kyd-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.p-solution--know-your-business
  .kyd-screen.is-active
  .kyd-trow:nth-child(2)
  .kyd-pill {
  animation-delay: 0.08s;
}
.p-solution--know-your-business
  .kyd-screen.is-active
  .kyd-trow:nth-child(3)
  .kyd-pill {
  animation-delay: 0.16s;
}
@keyframes kyd-pop {
  from {
    opacity: 0;
    transform: translateY(3px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-solution--know-your-business .kyd-screen .kyd-pill {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* narrow: the deck no longer reflows — dashFit (site.js, data-dash-fit on
   .kyd-deck) renders the EXACT desktop window (business tile beside the checks)
   scaled down to fill the column, so the layout never changes, it just shrinks. */

/* ======================================================================
   BUSINESS VERIFICATION — MOBILE (≤1023px)
   Mirror the how-it-works mobile pattern: every step opens and carries its
   OWN dashboard beneath it (content → dashboard → content → dashboard).
   kyb-review-mobile.js clones the dashboard under each step and transform-
   scales the whole window down, so it keeps its EXACT desktop proportions
   (never the narrow reflow above).
   ====================================================================== */
@media (max-width: 1023px) {
  /* every step description stays open, like the hero how-it-works; the
     scrubbing bar is a desktop-walk affordance only, and the step is no
     longer a control (its dashboard is always visible below it) */
  .p-solution--know-your-business .kyb-review .sol-how__reveal {
    height: auto;
    overflow: visible;
  }
  /* beat the higher-specificity desktop is-active height so the walk's
     auto-advance (which still toggles is-active under the hood) can never
     clip a description on mobile */
  .p-solution--know-your-business
    .kyb-review
    .sol-how__step.is-active
    .sol-how__reveal {
    height: auto;
  }
  .p-solution--know-your-business .kyb-review .sol-how__bar {
    display: none;
  }
  .p-solution--know-your-business .kyb-review .sol-how__name {
    color: var(--color-black);
  }
  .p-solution--know-your-business .kyb-review .sol-how__num {
    color: var(--color-blue);
  }
  .p-solution--know-your-business .kyb-review .sol-how__step {
    cursor: default;
  }

  /* paired: the shared single dashboard hides; each step owns a copy */
  .p-solution--know-your-business .kyb-review.is-kyd-paired .sol-how__stage {
    display: none;
  }
  /* each step's cloned dashboard: a plain block that fills the column. The
     clone carries data-dash-fit, so site.js dashFit renders it at its 560px
     desktop width and zooms the whole box down to the column — the exact
     desktop layout, just smaller. */
  .p-solution--know-your-business .kyd-shot {
    display: block;
    margin: 18px 0 6px;
  }
  .p-solution--know-your-business .kyd-shot .kyd-deck {
    margin-inline: 0;
  }
}