/* ============================================================
   Decisioning & results — page-specific additions on top of the
   shared capability template (/styles/pages/capability.css).
   Loaded AFTER capability.css, so these rules override/extend it.
   Every selector is scoped to .p-capability--decisioning (E12).

   RONDA 2 (2026-08-01): the page shows the product.
   1. built dashboard-mock kit (white wireframe windows: grey skeletons,
      hairlines, one blue accent + small semantic status dots). Each stays
      greppable via data-ph + a discreet "Mockup" corner chip.
   2. the "in the dashboard" showcase band (concrete decision + signals);
   3. the JOURNEY of a decision — an animated signals → score → route flow
      (behavior: decisioning-journey.js), G13 illustration style;
   4. the rule editor + thresholds as a 16:9 dashboard (dec-rules);
   5. the walk-media left/right alternation.
   Tokens only — no raw hex.
   ============================================================ */

/* ---------- built dashboard-mock kit ---------- */
/* window frame — replaces the yellow .ph-visual tile in the same slot */
.p-capability--decisioning .dec-mock {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: var(--ph-ar, 16 / 9);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
  box-shadow: none;
}
/* discreet identifier — keeps the built mock greppable & obviously not final */
.p-capability--decisioning .dec-mock__chip {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-placeholder-yellow);
  color: var(--color-black);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 600;
}

/* window chrome bar */
.p-capability--decisioning .dec-mock__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-grey-50);
}
.p-capability--decisioning .dec-mock__dots {
  display: inline-flex;
  gap: 5px;
}
.p-capability--decisioning .dec-mock__dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-capability--decisioning .dec-mock__title {
  width: 132px;
  max-width: 40%;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-capability--decisioning .dec-mock__bar .dm-tag {
  margin-left: auto;
}

/* body canvas */
.p-capability--decisioning .dec-mock__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--color-grey-50);
}

/* skeleton primitives */
.p-capability--decisioning .dm-line {
  display: block;
  height: 8px;
  width: var(--w, 100%);
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--decisioning .dm-line--sm {
  height: 6px;
}
.p-capability--decisioning .dm-line--dark {
  background: var(--color-grey-200);
}

.p-capability--decisioning .dm-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
.p-capability--decisioning .dm-card__label {
  font-size: 11px;
  letter-spacing: var(--track-wide);
  color: var(--color-grey-400);
  line-height: 1;
}

.p-capability--decisioning .dm-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-grey-500);
  white-space: nowrap;
}
.p-capability--decisioning .dm-verdict {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: 20px;
  line-height: 1;
  color: var(--color-blue-500);
}

.p-capability--decisioning .dm-track {
  display: block;
  height: 7px;
  width: 100%;
  border-radius: 999px;
  background: var(--color-grey-100);
  overflow: hidden;
}
.p-capability--decisioning .dm-track__fill {
  display: block;
  height: 100%;
  width: var(--w, 60%);
  border-radius: 999px;
  background: var(--color-blue-500);
}
.p-capability--decisioning .dm-track__fill--soft {
  background: var(--color-grey-300);
}

/* v1 · showcase home — sidebar rail + decision / signals */
.p-capability--decisioning .dm-rail {
  flex: none;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 12px 0;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
.p-capability--decisioning .dm-rail__logo {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--color-grey-300);
  margin-bottom: 4px;
}
.p-capability--decisioning .dm-rail__i {
  width: 20px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--decisioning .dm-rail__i.is-active {
  background: var(--color-grey-300);
}

.p-capability--decisioning .dm-home__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p-capability--decisioning .dm-home__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.p-capability--decisioning .dm-home__head .dm-line {
  flex: 1 1 auto;
}
.p-capability--decisioning .dm-home__grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 12px;
}
.p-capability--decisioning .dm-decision {
  justify-content: center;
}
.p-capability--decisioning .dm-signals {
  justify-content: center;
  gap: 14px;
}
.p-capability--decisioning .dm-sig {
  display: grid;
  gap: 7px;
}
.p-capability--decisioning .dm-sig__name {
  font-size: 11px;
  color: var(--color-grey-500);
  line-height: 1;
}

/* v3 · module scores (walk row 1) */
.p-capability--decisioning .dm-scores {
  flex: 1 1 auto;
  justify-content: space-evenly;
  gap: 14px;
}
.p-capability--decisioning .dm-score {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  align-items: center;
  gap: 12px;
}
.p-capability--decisioning .dm-score__name {
  font-size: 11px;
  color: var(--color-grey-500);
  line-height: 1.2;
}

/* v5 · results — rejection reasons + false-positive trend (walk row 2) */
.p-capability--decisioning .dm-reasons {
  flex: 1.1 1 0;
}
.p-capability--decisioning .dm-reason {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 12px;
}
.p-capability--decisioning .dm-chart {
  flex: 0.9 1 0;
}
.p-capability--decisioning .dm-spark {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 62px;
}
.p-capability--decisioning .dm-spark__grid {
  stroke: var(--color-grey-100);
  stroke-width: 1;
}
.p-capability--decisioning .dm-spark__area {
  fill: color-mix(in oklab, var(--color-blue-500) 12%, transparent);
}
.p-capability--decisioning .dm-spark__line {
  fill: none;
  stroke: var(--color-blue-500);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- semantic status dots (journey + rules legend) ----------
   The canvas stays grey + one blue accent (G13); these small 8px dots
   carry the decision states the way a real decisioning dashboard does. */
.p-capability--decisioning .dj-dot--pass,
.p-capability--decisioning .dj-dot--approve {
  background: var(--color-green-600);
}
.p-capability--decisioning .dj-dot--warn {
  background: var(--color-yellow-500);
}
.p-capability--decisioning .dj-dot--review {
  background: var(--color-blue-500);
}
.p-capability--decisioning .dj-dot--fail {
  background: var(--color-red-500);
}

/* ---------- 1.5 · "in the dashboard" showcase band ---------- */
.p-capability--decisioning .cap-showcase {
  background: var(--color-grey-50);
  border-bottom: 1px solid var(--color-border-light);
}
.p-capability--decisioning .cap-showcase .dec-mock {
  margin-top: 40px;
  margin-inline: auto;
  max-width: 960px;
}
.p-capability--decisioning .cap-showcase .dm-verdict {
  font-size: 30px;
}

/* ============================================================
   2 · THE JOURNEY OF A DECISION (dj3) — signals in, a clear decision out.
       Left: a vertical stepper (Signals · Score · Decision). Right: three
       archetype columns (legit 95 / borderline 72 / fraud 10), each a stack
       of signals → score → decision joined by hairlines. The section PINS
       while you scroll and scroll progress scrubs three phases: signals fill
       (blue-lit) → score counts up + bar sweeps → decision chip pops, and it
       reverses on scroll-up. behavior: decisioning-journey.js
       Poster (reduced-motion / mobile / no-JS) = the complete final frame.
   ============================================================ */
.p-capability--decisioning .dj3 {
  border-top: 1px solid var(--color-border-light);
  background: var(--color-background);
}
.p-capability--decisioning .dj3__track {
  position: relative;
}
.p-capability--decisioning .dj3__pin {
  padding: 72px 0;
}

.p-capability--decisioning .dj3__head {
  margin-bottom: 34px;
}

/* the big container */
.p-capability--decisioning .dj3__card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 22px;
  padding: 40px 44px 44px;
  box-shadow: none;
}
.p-capability--decisioning .dj3__grid {
  display: grid;
  gap: 44px;
  align-items: start;
}
@media (min-width: 900px) {
  .p-capability--decisioning .dj3__grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 56px;
  }
}

/* ---------- left · vertical stepper ---------- */
.p-capability--decisioning .dj3__steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.p-capability--decisioning .dj3__step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.p-capability--decisioning .dj3__step-n {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blue-100);
  color: var(--color-blue-500);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
  transition:
    background 0.4s ease,
    color 0.4s ease,
    transform 0.4s ease;
}
.p-capability--decisioning .dj3__step-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.15;
  color: var(--color-grey-600);
}
.p-capability--decisioning .dj3__step-caption {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-grey-400);
}
/* scrub: steps arrive one at a time; active step's number goes solid blue */
.p-capability--decisioning .dj3.is-anim .dj3__step {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.p-capability--decisioning .dj3.is-anim .dj3__step.is-shown {
  opacity: 1;
  transform: none;
}
.p-capability--decisioning .dj3__step.is-active .dj3__step-n {
  background: var(--color-blue-500);
  color: var(--color-white);
}

/* ---------- right · three archetype columns ---------- */
.p-capability--decisioning .dj3__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.p-capability--decisioning .dj3__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* per-scenario label — only shown when the columns stack on mobile (below);
   above, the left stepper carries the meaning and this stays hidden */
.p-capability--decisioning .dj3__col-head {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.1;
  color: var(--color-grey-600);
}
.p-capability--decisioning .dj3__col-head::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--color-grey-300);
}
.p-capability--decisioning .dj3__col-head--legit::before {
  background: var(--color-green-500);
}
.p-capability--decisioning .dj3__col-head--review::before {
  background: var(--color-blue-500);
}
.p-capability--decisioning .dj3__col-head--fraud::before {
  background: var(--color-red-600);
}
/* connector hairlines between the cards — always neutral grey.
   Under the animation they start empty and draw themselves top→bottom once
   the previous step has finished, reaching down to the next container. */
.p-capability--decisioning .dj3__link {
  width: 1px;
  height: 26px;
  align-self: center;
  background: var(--color-border-light);
}
.p-capability--decisioning .dj3.is-anim .dj3__link {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.p-capability--decisioning .dj3.is-anim .dj3__link.is-drawn {
  transform: scaleY(1);
}

/* the focus box that travels signals → score → decision — neutral, no colour:
   a slightly darker grey edge + a very soft grey shadow marks what's in focus */
.p-capability--decisioning .dj3__sig,
.p-capability--decisioning .dj3__score {
  transition:
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.p-capability--decisioning .dj3__sig.is-lit,
.p-capability--decisioning .dj3__score.is-lit {
  border-color: var(--color-grey-300);
  box-shadow: none;
  transform: translateY(-2px);
}

/* signals card */
.p-capability--decisioning .dj3__sig {
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-white);
}
.p-capability--decisioning .dj3__sigrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  line-height: 1.1;
  color: var(--color-grey-600);
}
.p-capability--decisioning .dj3__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.p-capability--decisioning .dj3__dot--pass {
  background: var(--color-green-500);
}
.p-capability--decisioning .dj3__dot--warn {
  background: var(--color-yellow-500);
}
.p-capability--decisioning .dj3__dot--fail {
  background: var(--color-red-600);
}

/* score card */
.p-capability--decisioning .dj3__score {
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  padding: 16px;
  background: var(--color-white);
}
.p-capability--decisioning .dj3__score-num {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.p-capability--decisioning .dj3__score-num b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-grey-600);
}
.p-capability--decisioning .dj3__score-num i {
  font-style: normal;
  font-size: 14px;
  color: var(--color-grey-300);
}
.p-capability--decisioning .dj3__score-bar {
  display: block;
  height: 6px;
  margin: 12px 0 12px;
  border-radius: 999px;
  background: var(--color-grey-100);
  overflow: hidden;
}
.p-capability--decisioning .dj3__score-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-grey-300);
}
.p-capability--decisioning .dj3__score-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-grey-100);
  color: var(--color-grey-500);
}
/* score tones */
.p-capability--decisioning .dj3__score.tone-approve .dj3__score-num b {
  color: var(--color-green-600);
}
.p-capability--decisioning .dj3__score.tone-approve .dj3__score-bar i {
  background: var(--color-green-500);
}
.p-capability--decisioning .dj3__score.tone-approve .dj3__score-pill {
  background: var(--color-green-100);
  color: var(--color-green-600);
}
.p-capability--decisioning .dj3__score.tone-review .dj3__score-num b {
  color: var(--color-blue-500);
}
.p-capability--decisioning .dj3__score.tone-review .dj3__score-bar i {
  background: var(--color-blue-500);
}
.p-capability--decisioning .dj3__score.tone-review .dj3__score-pill {
  background: var(--color-blue-100);
  color: var(--color-blue-500);
}
.p-capability--decisioning .dj3__score.tone-fail .dj3__score-num b {
  color: var(--color-red-600);
}
.p-capability--decisioning .dj3__score.tone-fail .dj3__score-bar i {
  background: var(--color-red-600);
}
.p-capability--decisioning .dj3__score.tone-fail .dj3__score-pill {
  background: var(--color-red-100);
  color: var(--color-red-600);
}

/* decision chip */
.p-capability--decisioning .dj3__dec {
  box-sizing: border-box;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border-light);
  background: var(--color-white);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}
.p-capability--decisioning .dj3__dec-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-blue-500);
}
.p-capability--decisioning .dj3__dec-badge {
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.p-capability--decisioning .dj3__dec-badge svg {
  width: 100%;
  height: 100%;
}
/* the container stays neutral (white + grey border, like the other cards) —
   only the word and the verdict icon carry the tone colour */
.p-capability--decisioning .dj3__dec.tone-approve {
  color: var(--color-green-600);
}
.p-capability--decisioning .dj3__dec.tone-review {
  color: var(--color-blue-500);
}
.p-capability--decisioning .dj3__dec.tone-fail {
  color: var(--color-red-600);
}

/* ---------- scrub · empty-skeleton start states ---------- */
/* signal rows hidden until they fill */
.p-capability--decisioning .dj3.is-anim .dj3__sigrow {
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.p-capability--decisioning .dj3.is-anim .dj3__sigrow.is-in {
  opacity: 1;
  transform: none;
}
/* the whole score container stays hidden until its step — it appears only when
   needed, so nothing empty sits below the signals while they're filling */
.p-capability--decisioning .dj3.is-anim .dj3__score {
  opacity: 0;
  transition:
    opacity 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.p-capability--decisioning .dj3.is-anim .dj3__score.is-in {
  opacity: 1;
}
/* score content hidden until the band opens (JS drives the number + bar width) */
.p-capability--decisioning .dj3.is-anim .dj3__score-num,
.p-capability--decisioning .dj3.is-anim .dj3__score-pill {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.p-capability--decisioning .dj3.is-anim .dj3__score.is-in .dj3__score-num,
.p-capability--decisioning .dj3.is-anim .dj3__score.is-in .dj3__score-pill {
  opacity: 1;
}
.p-capability--decisioning .dj3.is-anim .dj3__score-bar i {
  width: 0;
}
/* decision chip: a solid-tone circle fades in, then grows into the pill and
   the word appears. No focus/hover — the reveal itself is the emphasis. */
.p-capability--decisioning .dj3.is-anim .dj3__dec {
  overflow: hidden;
  max-width: 260px;
  transition:
    opacity 0.4s ease,
    max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s,
    background 0.45s ease 0.5s,
    border-color 0.45s ease 0.5s,
    color 0.3s ease 0.66s;
}
/* armed: an invisible, neutral (grey/white) circle — same as the final
   container. It just expands; the colour lives only in the word + icon. */
.p-capability--decisioning .dj3.is-anim .dj3__dec:not(.is-in) {
  opacity: 0;
  max-width: 38px;
  color: transparent;
}
/* the word + badge fade in once the pill has grown */
.p-capability--decisioning .dj3.is-anim .dj3__dec .dj3__dec-label,
.p-capability--decisioning .dj3.is-anim .dj3__dec .dj3__dec-dot,
.p-capability--decisioning .dj3.is-anim .dj3__dec .dj3__dec-badge {
  transition: opacity 0.3s ease;
}
.p-capability--decisioning .dj3.is-anim .dj3__dec:not(.is-in) .dj3__dec-label,
.p-capability--decisioning .dj3.is-anim .dj3__dec:not(.is-in) .dj3__dec-dot,
.p-capability--decisioning .dj3.is-anim .dj3__dec:not(.is-in) .dj3__dec-badge {
  opacity: 0;
}
.p-capability--decisioning .dj3.is-anim .dj3__dec.is-in .dj3__dec-label,
.p-capability--decisioning .dj3.is-anim .dj3__dec.is-in .dj3__dec-dot {
  transition: opacity 0.3s ease 0.78s;
}
.p-capability--decisioning .dj3.is-anim .dj3__dec.is-in .dj3__dec-badge {
  transition: opacity 0.3s ease 0.9s;
}

/* ---------- responsive ---------- */
@media (max-width: 899px) {
  .p-capability--decisioning .dj3__card {
    padding: 28px 22px 32px;
  }
  .p-capability--decisioning .dj3__cols {
    gap: 14px;
  }
  .p-capability--decisioning .dj3__score-num b {
    font-size: 28px;
  }
}
@media (max-width: 560px) {
  .p-capability--decisioning .dj3__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  /* the stacked scenarios need a label to say which is which */
  .p-capability--decisioning .dj3__col-head {
    display: flex;
  }
}

/* reduced motion: rest on the complete poster; force all content visible even
   if the animation class is present (JS also bails to the settled frame) */
@media (prefers-reduced-motion: reduce) {
  .p-capability--decisioning .dj3.is-anim .dj3__sigrow,
  .p-capability--decisioning .dj3.is-anim .dj3__score-num,
  .p-capability--decisioning .dj3.is-anim .dj3__score-pill,
  .p-capability--decisioning .dj3.is-anim .dj3__step,
  .p-capability--decisioning .dj3.is-anim .dj3__dec > * {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   4 · rule editor + thresholds — 16:9 dashboard (Nacim ronda 2, G11)
   ============================================================ */
.p-capability--decisioning .dec-rules {
  border-top: 1px solid var(--color-border-light);
  background: var(--color-grey-50);
}

/* ============================================================
   4b · the live DECISION POLICY (drx) — a session-score histogram cut by
        two thresholds into fail / review / approve, if-then override rules,
        and a live tally that ticks. behavior: decisioning-rules.js
   ============================================================ */
.p-capability--decisioning .drx-wrap {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 940px) {
  .p-capability--decisioning .drx-wrap {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 60px;
  }
}

/* LEFT · copy + points */
.p-capability--decisioning .drx-copy {
  min-width: 0;
}
.p-capability--decisioning .drx-points {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.p-capability--decisioning .drx-point {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  padding: 13px 14px 13px 10px;
  border-radius: var(--radius-md);
}
.p-capability--decisioning .drx-point__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--color-blue-100);
  color: var(--color-blue-500);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.p-capability--decisioning .drx-point__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.p-capability--decisioning .drx-point__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1;
  color: var(--color-heading, var(--color-grey-600));
}
.p-capability--decisioning .drx-point__cap {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-grey-500);
}

/* RIGHT · the policy card */
.p-capability--decisioning .drx {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 620px;
  padding: 22px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 22px;
  box-shadow: none;
}
.p-capability--decisioning .drx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.p-capability--decisioning .drx-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-heading, var(--color-grey-600));
}
.p-capability--decisioning .drx-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-grey-400);
}
.p-capability--decisioning .drx-live i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-green-600);
}
@media (prefers-reduced-motion: no-preference) {
  .p-capability--decisioning .drx-live i {
    animation: dj2-livedot 2.2s ease-in-out infinite;
  }
}

/* score distribution */
.p-capability--decisioning .drx-dist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-capability--decisioning .drx-dist__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.p-capability--decisioning .drx-dist__lbl {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-grey-400);
}
.p-capability--decisioning .drx-dist__ax {
  font-size: 11px;
  color: var(--color-grey-300);
  font-variant-numeric: tabular-nums;
}
.p-capability--decisioning .drx-hist {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 130px;
}
.p-capability--decisioning .drx-bar {
  flex: 1 1 0;
  min-width: 0;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: var(--color-grey-200);
  transition:
    height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.5s ease;
}
.p-capability--decisioning .drx.is-anim .drx-bar {
  height: 0;
}
.p-capability--decisioning .drx.is-anim .drx-bar.is-in {
  height: var(--h);
}
.p-capability--decisioning .drx-bar.is-fail {
  background: var(--color-red-600);
}
.p-capability--decisioning .drx-bar.is-review {
  background: var(--color-blue-500);
}
.p-capability--decisioning .drx-bar.is-approve {
  background: var(--color-green-600);
}
/* threshold knobs */
.p-capability--decisioning .drx-cut {
  position: absolute;
  top: -6px;
  bottom: 0;
  width: 0;
  border-left: 2px dashed
    color-mix(in oklab, var(--color-grey-400) 65%, transparent);
  transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}
.p-capability--decisioning .drx-cut__knob {
  position: absolute;
  top: -9px;
  left: -8px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--color-white);
  border: 2px solid var(--color-grey-400);
  box-shadow: none;
}
.p-capability--decisioning .drx-bands {
  display: flex;
}
.p-capability--decisioning .drx-band {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  padding-top: 8px;
  border-top: 2px solid;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
  overflow: hidden;
}
.p-capability--decisioning .drx-band--fail {
  color: var(--color-red-600);
  border-color: var(--color-red-600);
}
.p-capability--decisioning .drx-band--review {
  color: var(--color-blue-500);
  border-color: var(--color-blue-500);
}
.p-capability--decisioning .drx-band--approve {
  color: var(--color-green-600);
  border-color: var(--color-green-600);
}

/* override rules */
.p-capability--decisioning .drx-rules {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  border: 1px solid var(--color-border-light);
  border-radius: 14px;
  background: var(--color-grey-50);
}
.p-capability--decisioning .drx-rule {
  display: flex;
  align-items: center;
  gap: 10px;
}
.p-capability--decisioning .drx-rule__cond {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--color-grey-500);
}
.p-capability--decisioning .drx-rule__arr {
  color: var(--color-grey-300);
  font-size: 13px;
}
.p-capability--decisioning .drx-tag {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.p-capability--decisioning .drx-tag--fail {
  background: color-mix(in oklab, var(--color-red-600) 12%, transparent);
  color: var(--color-red-600);
}
.p-capability--decisioning .drx-tag--review {
  background: var(--color-blue-100);
  color: var(--color-blue-500);
}
.p-capability--decisioning .drx-tag--approve {
  background: var(--color-green-100);
  color: var(--color-green-600);
}
.p-capability--decisioning .drx-rule__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-blue-500);
}
.p-capability--decisioning .drx-rule__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--color-blue-100);
  color: var(--color-blue-500);
  font-size: 13px;
  line-height: 1;
}

/* live outcome tally */
.p-capability--decisioning .drx-tally {
  display: flex;
  gap: 10px;
}
.p-capability--decisioning .drx-tally__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-light);
  border-radius: 14px;
  background: var(--color-white);
}
.p-capability--decisioning .drx-tally__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.p-capability--decisioning .drx-tally--fail .drx-tally__dot {
  background: var(--color-red-600);
}
.p-capability--decisioning .drx-tally--review .drx-tally__dot {
  background: var(--color-blue-500);
}
.p-capability--decisioning .drx-tally--approve .drx-tally__dot {
  background: var(--color-green-600);
}
.p-capability--decisioning .drx-tally__item b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--color-heading, var(--color-grey-600));
  font-variant-numeric: tabular-nums;
}
.p-capability--decisioning .drx-tally__nm {
  font-size: 11px;
  color: var(--color-grey-400);
}

@media (prefers-reduced-motion: reduce) {
  .p-capability--decisioning .drx.is-anim .drx-bar {
    height: var(--h);
  }
}

/* ============================================================
   5 · walk media alternation (base template only wires .cap-tile)
   ============================================================ */
@media (min-width: 768px) {
  .p-capability--decisioning .cap-walk__row:nth-child(even) .cap-walk__copy {
    order: 2;
  }
  .p-capability--decisioning .cap-walk__row:nth-child(even) .dec-tile {
    order: 1;
  }
}

/* ============================================================
   HERO VISUAL — split hero (copy | decision card). Family split-hero
   precedent (uicb-hero / wfbh-hero). The right card shows the session's
   decision beside the module scores that drove it. Tokens only.
   ============================================================ */
/* Split hero geometry MATCHES the sibling wfbh-hero exactly (Sofia
   2026-08-17: "same layout as the rest of the platform pages, uniform on
   all tabs"). Only the grid + gap + alignment live here; padding, margin,
   max-width and the rail anchor stay owned by the shared .cap-hero__inner
   (140/20/120 → 120/40/120/48 at >=1280), so the kicker/title/sub/actions
   land at the same x and top as every other capability page. The old
   bespoke max-width:1200 + margin:auto + 900px breakpoint pulled the copy
   24px left and 18px low. */
.p-capability--decisioning .dech-hero {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1024px) {
  .p-capability--decisioning .dech-hero {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    column-gap: 48px;
  }
  .p-capability--decisioning .dech-copy .cap-hero__sub { max-width: 100%; }
}
.p-capability--decisioning .dech-copy {
  min-width: 0;
}
.p-capability--decisioning .dech-vis {
  min-width: 0;
  /* the canon /platform/ hero box placement (Sofia 2026-08-17): 500 wide,
     seated right with the 28px ease — the bento carries the frame itself */
  max-width: 500px;
  width: 100%;
  justify-self: end;
  margin-inline: 0 28px;
}
.p-capability--decisioning .dech-card {
  width: min(100%, 440px);
  margin-inline: auto;
  border-radius: 16px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  box-shadow: none;
  overflow: hidden;
}
.p-capability--decisioning .dech-card__bar {
  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);
}
.p-capability--decisioning .dech-dots {
  display: inline-flex;
  gap: 6px;
}
.p-capability--decisioning .dech-dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-capability--decisioning .dech-url {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--decisioning .dech-card__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.p-capability--decisioning .dech-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
}
.p-capability--decisioning .dech-verdict__k {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-grey-500);
}
.p-capability--decisioning .dech-verdict__pill {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-green-100);
  color: var(--color-green-600);
  font-size: 12px;
  font-weight: 600;
}
.p-capability--decisioning .dech-verdict__score {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--color-black);
}
.p-capability--decisioning .dech-verdict__den {
  font-size: 13px;
  color: var(--color-grey-400);
  font-weight: 500;
}
.p-capability--decisioning .dech-mods {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p-capability--decisioning .dech-mod {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
  align-items: center;
  gap: 12px;
}
.p-capability--decisioning .dech-mod__n {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-grey-500);
}
.p-capability--decisioning .dech-bar {
  height: 7px;
  border-radius: 999px;
  background: var(--color-grey-100);
  overflow: hidden;
}
.p-capability--decisioning .dech-bar__f {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--color-blue-500);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-capability--decisioning .dech-bar__f--soft {
  background: var(--color-grey-300);
}
.p-capability--decisioning .dech-vis.is-revealed .dech-bar__f {
  width: var(--w);
}
.p-capability--decisioning .dech-mod__v {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-black);
  min-width: 24px;
  text-align: right;
}
.p-capability--decisioning .dech-mod__v--muted {
  color: var(--color-grey-400);
}
.p-capability--decisioning .dech-foot {
  display: flex;
  gap: 8px;
}
.p-capability--decisioning .dech-chip {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-grey-100);
  color: var(--color-grey-500);
}
.p-capability--decisioning .dech-chip--ok {
  background: color-mix(in oklab, var(--color-blue-500) 12%, transparent);
  color: var(--color-blue);
}

/* --- hero bento: a single session abstracted in the brand-studio grid —
   a big capture tile (left) + Score / Age / verdict cards; Trustworthy spans
   the bottom, matching Bryant's Paper design. --- */
.p-capability--decisioning .dech-bento {
  width: min(100%, 560px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.02fr 1fr 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "photo score age"
    "photo real  legit"
    "below trust trust";
  gap: 12px;
  /* the canon /platform/ hero box frame (22/16/444 — Sofia 2026-08-17) */
  min-height: 444px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid var(--color-border-light);
  /* off-white ground like every /platform/ hero box (Sofia 2026-08-17) */
  background: var(--color-grey-50);
  box-shadow: none;
}
.p-capability--decisioning .dech-photo {
  grid-area: photo;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-grey-200);
  min-height: 260px;
}
.p-capability--decisioning .dech-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
  display: block;
}

/* shared cell */
.p-capability--decisioning .dech-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--color-grey-100);
  border-radius: 16px;
  background: var(--color-white);
}
.p-capability--decisioning .dech-cell__lbl {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-grey-400);
}

/* score */
.p-capability--decisioning .dech-cell--score {
  grid-area: score;
  gap: 8px;
}
.p-capability--decisioning .dech-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.p-capability--decisioning .dech-score__n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-green-500);
  font-variant-numeric: tabular-nums;
}
.p-capability--decisioning .dech-score__den {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-grey-400);
}
.p-capability--decisioning .dech-scorebar {
  margin-top: auto;
  height: 5px;
  border-radius: 999px;
  background: var(--color-grey-100);
  overflow: hidden;
}
.p-capability--decisioning .dech-scorebar__f {
  display: block;
  height: 100%;
  width: var(--dech-fill, 95%);
  border-radius: 999px;
  background: var(--color-green-500);
}

/* age (its own card now — From/flag removed) */
.p-capability--decisioning .dech-cell--age {
  grid-area: age;
  gap: 7px;
}
.p-capability--decisioning .dech-age {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--color-black);
}

/* card below the photo → a grayscale location map with a soft, pulsing
   broad-area ping (approximate location from IP/device, not a precise pin) */
.p-capability--decisioning .dech-cell--below {
  grid-area: below;
  min-height: 100px;
}
.p-capability--decisioning .dech-cell--map {
  position: relative;
  overflow: hidden;
  padding: 0;
}
.p-capability--decisioning .dech-cell--map .dech-cell__lbl {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 3;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-white) 78%, transparent);
  backdrop-filter: blur(4px);
}
.p-capability--decisioning .dech-map {
  position: absolute;
  inset: 0;
}
.p-capability--decisioning .dech-map__svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(1);
}
.p-capability--decisioning .dech-map__ping {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 2;
}
.p-capability--decisioning .dech-map__area {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(58, 62, 75, 0.18),
    rgba(58, 62, 75, 0) 70%
  );
}
.p-capability--decisioning .dech-map__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 999px;
  border: 2px solid rgba(58, 62, 75, 0.45);
  opacity: 0;
}
.p-capability--decisioning .dech-map__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 999px;
  background: var(--color-grey-500);
  box-shadow: 0 0 0 3px var(--color-white);
}
@keyframes dech-ping {
  0% {
    transform: scale(0.5);
    opacity: 0.65;
  }
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .p-capability--decisioning .dech-map__ring {
    animation: dech-ping 2.6s ease-out infinite;
  }
  .p-capability--decisioning .dech-map__ring--2 {
    animation-delay: 1.3s;
  }
}

/* verdict cards (big editorial type, check badge top-left) */
.p-capability--decisioning .dech-cell--real {
  grid-area: real;
}
.p-capability--decisioning .dech-cell--legit {
  grid-area: legit;
}
.p-capability--decisioning .dech-cell--trust {
  grid-area: trust;
}
.p-capability--decisioning .dech-check {
  width: 22px;
  height: 22px;
  display: inline-flex;
}
.p-capability--decisioning .dech-check svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.p-capability--decisioning .dech-vcard__body {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
}
.p-capability--decisioning .dech-vcard__t {
  font-family: var(--font-display);
  /* stepped down 27/700 → 19/600 (Sofia 2026-08-17: the three card
     titles read too big inside the hero mock) */
  font-weight: 600;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-black);
}
.p-capability--decisioning .dech-vcard__m {
  font-size: 13px;
  color: var(--color-grey-400);
}
.p-capability--decisioning .dech-cell--trust .dech-vcard__body {
  gap: 6px;
}

/* entrance choreography — JS toggles .is-in on the active bento, so the whole
   sequence REPLAYS on every variant switch (cards stack, score bar fills,
   every verdict badge pops, green checks draw). Shown at rest under reduced
   motion. Per-variant score fill via --dech-fill. */
.p-capability--decisioning .dech-bento--legit {
  --dech-fill: 95%;
}
.p-capability--decisioning .dech-bento--underage {
  --dech-fill: 34%;
}
.p-capability--decisioning .dech-bento--fraud {
  --dech-fill: 9%;
}
@media (prefers-reduced-motion: no-preference) {
  /* hidden until the active bento plays */
  .p-capability--decisioning .dech-bento .dech-photo,
  .p-capability--decisioning .dech-bento .dech-cell {
    opacity: 0;
  }
  .p-capability--decisioning .dech-scorebar__f {
    width: 0;
  }
  .p-capability--decisioning .dech-ck-badge {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
  }
  .p-capability--decisioning .dech-ck-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .p-capability--decisioning .dech-check--warn,
  .p-capability--decisioning .dech-check--unknown,
  .p-capability--decisioning .dech-check--bad {
    transform: scale(0);
    transform-origin: center;
  }
  /* play */
  .p-capability--decisioning .dech-bento.is-in .dech-photo {
    animation: dech-photo-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .p-capability--decisioning .dech-bento.is-in .dech-cell {
    animation: dech-cell-in 0.5s ease both;
  }
  .p-capability--decisioning .dech-bento.is-in .dech-cell--score {
    animation-delay: 0.14s;
  }
  .p-capability--decisioning .dech-bento.is-in .dech-cell--age {
    animation-delay: 0.24s;
  }
  .p-capability--decisioning .dech-bento.is-in .dech-cell--real {
    animation-delay: 0.4s;
  }
  .p-capability--decisioning .dech-bento.is-in .dech-cell--legit {
    animation-delay: 0.52s;
  }
  .p-capability--decisioning .dech-bento.is-in .dech-cell--below {
    animation-delay: 0.64s;
  }
  .p-capability--decisioning .dech-bento.is-in .dech-cell--trust {
    animation-delay: 0.7s;
  }
  .p-capability--decisioning .dech-bento.is-in .dech-scorebar__f {
    width: var(--dech-fill, 95%);
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }
  /* every verdict badge pops (green circle / amber / grey / red), staggered */
  .p-capability--decisioning .dech-bento.is-in .dech-cell--real .dech-ck-badge,
  .p-capability--decisioning
    .dech-bento.is-in
    .dech-cell--real
    .dech-check--warn,
  .p-capability--decisioning
    .dech-bento.is-in
    .dech-cell--real
    .dech-check--unknown,
  .p-capability--decisioning
    .dech-bento.is-in
    .dech-cell--real
    .dech-check--bad {
    animation: dsx-badge-in 0.6s cubic-bezier(0, 0.75, 0.25, 1) 0.6s both;
  }
  .p-capability--decisioning .dech-bento.is-in .dech-cell--legit .dech-ck-badge,
  .p-capability--decisioning
    .dech-bento.is-in
    .dech-cell--legit
    .dech-check--warn,
  .p-capability--decisioning
    .dech-bento.is-in
    .dech-cell--legit
    .dech-check--unknown,
  .p-capability--decisioning
    .dech-bento.is-in
    .dech-cell--legit
    .dech-check--bad {
    animation: dsx-badge-in 0.6s cubic-bezier(0, 0.75, 0.25, 1) 0.72s both;
  }
  .p-capability--decisioning .dech-bento.is-in .dech-cell--trust .dech-ck-badge,
  .p-capability--decisioning
    .dech-bento.is-in
    .dech-cell--trust
    .dech-check--warn,
  .p-capability--decisioning
    .dech-bento.is-in
    .dech-cell--trust
    .dech-check--unknown,
  .p-capability--decisioning
    .dech-bento.is-in
    .dech-cell--trust
    .dech-check--bad {
    animation: dsx-badge-in 0.6s cubic-bezier(0, 0.75, 0.25, 1) 0.84s both;
  }
  /* green check draws on */
  .p-capability--decisioning .dech-bento.is-in .dech-cell--real .dech-ck-draw {
    animation: dsx-check-draw 0.3s ease-out 0.85s both;
  }
  .p-capability--decisioning .dech-bento.is-in .dech-cell--legit .dech-ck-draw {
    animation: dsx-check-draw 0.3s ease-out 0.97s both;
  }
  .p-capability--decisioning .dech-bento.is-in .dech-cell--trust .dech-ck-draw {
    animation: dsx-check-draw 0.3s ease-out 1.09s both;
  }
}
@keyframes dech-cell-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes dech-photo-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- pass / fail review deck + switch (Bryant, temp) --- */
.p-capability--decisioning .dech-vis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* the carousel nav hangs BELOW the box instead of joining the grid child's
   height — with it in the centering math the box sat 27px above the family
   baseline and the page read misaligned against the platform rail
   (Sofia 2026-08-17) */
@media (min-width: 1024px) {
  .p-capability--decisioning .dech-vis { position: relative; }
  .p-capability--decisioning .dech-nav {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 14px;
  }
}
.p-capability--decisioning .dech-deck {
  position: relative;
  width: 100%;
}
.p-capability--decisioning .dech-deck .dech-bento {
  display: none;
}
.p-capability--decisioning .dech-deck .dech-bento.is-active {
  display: grid;
}

/* auto-cycle intro — a simple "New verification received" beat (green check draws
   on) that replays over the empty card before each archetype's data stacks in */
.p-capability--decisioning .dech-intro {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}
.p-capability--decisioning .dech-intro.is-on {
  opacity: 1;
  visibility: visible;
}
.p-capability--decisioning .dech-intro__check {
  width: 56px;
  height: 56px;
  display: inline-flex;
  transform: scale(0);
}
.p-capability--decisioning .dech-intro__check svg {
  width: 100%;
  height: 100%;
  display: block;
}
.p-capability--decisioning .dech-intro__draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.p-capability--decisioning .dech-intro__label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .p-capability--decisioning .dech-intro.is-on .dech-intro__check {
    animation: dsx-badge-in 0.5s cubic-bezier(0, 0.75, 0.25, 1) both;
  }
  .p-capability--decisioning .dech-intro.is-on .dech-intro__draw {
    animation: dsx-check-draw 0.32s ease-out 0.3s both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-capability--decisioning .dech-intro__check {
    transform: none;
  }
  .p-capability--decisioning .dech-intro__draw {
    stroke-dashoffset: 0;
  }
}

/* manual browse arrows + progress dots — subtle, sits under the card */
.p-capability--decisioning .dech-nav {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
.p-capability--decisioning .dech-nav__arrow {
  appearance: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--color-grey-200);
  background: var(--color-white);
  color: var(--color-grey-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    border-color 0.2s,
    color 0.2s,
    background-color 0.2s;
}
.p-capability--decisioning .dech-nav__arrow:hover {
  border-color: color-mix(in oklab, var(--color-blue-500) 45%, transparent);
  color: var(--color-blue);
}
.p-capability--decisioning .dech-nav__arrow:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--color-blue-500) 55%, transparent);
  outline-offset: 2px;
}
.p-capability--decisioning .dech-nav__arrow svg {
  width: 18px;
  height: 18px;
}
.p-capability--decisioning .dech-nav__dots {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.p-capability--decisioning .dech-nav__dots i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-grey-200);
  transition:
    background-color 0.3s ease,
    width 0.3s ease;
}
.p-capability--decisioning .dech-nav__dots i.is-on {
  width: 20px;
  background: var(--color-blue-500);
}
.p-capability--decisioning .dech-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
/* same toggle, in the dashboard section copy — lets the reader open a session (and interrupt the tour) */
.p-capability--decisioning .dsq-switch {
  margin-top: 24px;
  flex-wrap: wrap;
}
.p-capability--decisioning .dech-pick {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-grey-500);
  padding: 7px 16px;
  border-radius: 999px;
  background: transparent;
}
.p-capability--decisioning .dech-pick.is-active {
  background: var(--color-white);
  color: var(--color-foreground);
  box-shadow: none;
}
.p-capability--decisioning .dech-pick i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.p-capability--decisioning .dech-pick--legit i {
  background: var(--color-green-500);
}
.p-capability--decisioning .dech-pick--underage i {
  background: var(--color-amber-600);
}
.p-capability--decisioning .dech-pick--fraud i {
  background: var(--color-red-600);
}
.p-capability--decisioning .dech-pick:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--color-blue-500) 55%, transparent);
  outline-offset: 2px;
}

/* --- underage + fraud share: red score, grayed map, warning chips --- */
.p-capability--decisioning .dech-bento--underage .dech-score__n,
.p-capability--decisioning .dech-bento--fraud .dech-score__n {
  color: var(--color-red-600);
}
.p-capability--decisioning .dech-bento--underage .dech-scorebar__f,
.p-capability--decisioning .dech-bento--fraud .dech-scorebar__f {
  background: var(--color-red-600);
}
.p-capability--decisioning .dech-cell--map-fail .dech-map__svg {
  opacity: 0.5;
}
.p-capability--decisioning .dech-map__warn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-white) 84%, transparent);
  backdrop-filter: blur(4px);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-grey-500);
  white-space: nowrap;
  box-shadow: none;
}
.p-capability--decisioning .dech-map__warn--bad {
  color: var(--color-red-600);
}
.p-capability--decisioning .dech-map__warnicon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* age warning pill — amber for the underage flag, red for a fraud mismatch */
.p-capability--decisioning .dech-age-warn {
  align-self: flex-start;
  margin-top: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-amber-600) 16%, transparent);
  color: var(--color-amber-600);
  font-size: 11px;
  font-weight: 600;
}
.p-capability--decisioning .dech-age-warn--bad {
  background: color-mix(in oklab, var(--color-red-600) 12%, transparent);
  color: var(--color-red-600);
}

/* underage: compliant "no photo stored" empty state (we don't retain it) */
.p-capability--decisioning .dech-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-grey-50);
  border: 1px dashed var(--color-grey-200);
}
.p-capability--decisioning .dech-noimg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
}
.p-capability--decisioning .dech-noimg__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-grey-400);
  box-shadow: none;
}
.p-capability--decisioning .dech-noimg__ico svg {
  width: 22px;
  height: 22px;
}
.p-capability--decisioning .dech-noimg__t {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-grey-500);
}
.p-capability--decisioning .dech-noimg__m {
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-grey-400);
  max-width: 16ch;
}

/* fraud: spoofed capture treatment (red scrim + deepfake flag) */
.p-capability--decisioning .dech-photo--spoof {
  position: relative;
}
.p-capability--decisioning .dech-photo--spoof .dech-photo__img {
  filter: grayscale(0.55) contrast(1.05);
}
.p-capability--decisioning .dech-photo__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(217, 31, 38, 0.3),
    rgba(217, 31, 38, 0.05) 55%,
    rgba(0, 0, 0, 0.3)
  );
}
.p-capability--decisioning .dech-photo__alert {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-red-600);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
}
.p-capability--decisioning .dech-photo__alertico {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* ── mobile: the hero bento was authored as a fixed 3-column desktop grid with
   no narrow-viewport rule, so on a phone the three ~100px columns overflowed
   and the nowrap status pills clipped. Center the visual and reflow to two
   columns — the photo keeps its portrait crop (spanning score+age), and every
   card gets real width so nothing cuts. Nacim 2026-08-18. ── */
@media (max-width: 1023px) {
  .p-capability--decisioning .dech-vis {
    justify-self: center;
    margin-inline: auto;
  }
}
@media (max-width: 767px) {
  .p-capability--decisioning .dech-bento {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "photo score"
      "photo age"
      "real  legit"
      "below trust";
    gap: 10px;
    min-height: 0;
    padding: 12px;
  }
  /* let the photo track the height of the score + age stack beside it */
  .p-capability--decisioning .dech-photo {
    min-height: 0;
  }
  /* type steps down one notch so the two-up cards stay balanced */
  .p-capability--decisioning .dech-score__n,
  .p-capability--decisioning .dech-age {
    font-size: 26px;
  }
  .p-capability--decisioning .dech-vcard__t {
    font-size: 17px;
  }
}

/* ============================================================
   INTERACTIVE SINGLE SESSION MOCKUP (.dsx) — behavior: decisioning-session.js.
   A workable mini browser: Overview / Detail toggle + tab strip; clicking a
   tab scrolls the body to that section's checks. Tokens only.
   ============================================================ */
.p-capability--decisioning .dsx {
  width: min(100%, 620px);
  margin-inline: auto;
  border-radius: 16px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  box-shadow: none;
  overflow: hidden;
}
.p-capability--decisioning .dsx__bar {
  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);
}
.p-capability--decisioning .dsx__dots {
  display: inline-flex;
  gap: 6px;
}
.p-capability--decisioning .dsx__dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-capability--decisioning .dsx__url {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--decisioning .dsx__app {
  display: flex;
  align-items: stretch;
}
.p-capability--decisioning .dsx__rail {
  flex-shrink: 0;
  width: 52px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 12px;
  background: var(--color-grey-50);
  border-right: 1px solid var(--color-grey-100);
}
.p-capability--decisioning .dsx__logo {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--color-grey-300);
}
.p-capability--decisioning .dsx__ri {
  height: 7px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-capability--decisioning .dsx__ri.is-active {
  background: var(--color-grey-300);
}
.p-capability--decisioning .dsx__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 387px;
}
.p-capability--decisioning .dsx__head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px;
  border-bottom: 1px solid var(--color-grey-100);
}
.p-capability--decisioning .dsx__sid {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-grey-500);
}
.p-capability--decisioning .dsx__verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-green-100);
  color: var(--color-green-600);
  font-size: 11px;
  font-weight: 600;
}
.p-capability--decisioning .dsx__views {
  margin-left: auto;
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--decisioning .dsx__view {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-grey-500);
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
}
.p-capability--decisioning .dsx__view.is-active {
  background: var(--color-white);
  color: var(--color-blue);
  box-shadow: none;
}
.p-capability--decisioning .dsx__tabs {
  display: flex;
  gap: 4px;
  padding: 0 14px;
  border-bottom: 1px solid var(--color-grey-100);
}
/* Overview has no tabs. The window keeps a fixed height regardless: .dsx__main
   is a fixed-height flex column and .dsx__scroll flexes to fill, so dropping
   the tab row in Overview just gives the scroll area that space back. */
.p-capability--decisioning .dsx.is-overview .dsx__tabs {
  display: none;
}
.p-capability--decisioning .dsx__tab {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-grey-500);
  padding: 12px 10px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.p-capability--decisioning .dsx__tab.is-active {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue-500);
}
.p-capability--decisioning .dsx__scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 14px 18px 44px;
}
.p-capability--decisioning .dsx__overview {
  display: none;
}
.p-capability--decisioning .dsx.is-overview .dsx__overview {
  display: block;
}
.p-capability--decisioning .dsx.is-overview .dsx__detail {
  display: none;
}
.p-capability--decisioning .dsx__sec {
  padding: 4px 0 14px;
}
.p-capability--decisioning .dsx__sec + .dsx__sec {
  border-top: 1px solid var(--color-grey-100);
  padding-top: 14px;
}
.p-capability--decisioning .dsx__sec-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-grey-on-white);
}
.p-capability--decisioning .dsx__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-300);
}
.p-capability--decisioning .dsx__dot--ok {
  background: var(--color-green-600);
  box-shadow: 0 0 0 3px
    color-mix(in oklab, var(--color-green-600) 18%, transparent);
}
.p-capability--decisioning .dsx__rows {
  display: flex;
  flex-direction: column;
}
.p-capability--decisioning .dsx__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-grey-100);
  font-size: 12px;
  color: var(--color-grey-500);
}
.p-capability--decisioning .dsx__row:last-child {
  border-bottom: 0;
}
.p-capability--decisioning .dsx__row span {
  font-weight: 500;
  color: var(--color-foreground);
}
.p-capability--decisioning .dsx__pill {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-green-100);
  color: var(--color-green-600);
}
.p-capability--decisioning .dsx__pill--bad {
  background: var(--color-red-100);
  color: var(--color-red-600);
}
/* overview = captured-signals verdict (real person / legit docs / low risk) */
.p-capability--decisioning .dsx__ov-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.p-capability--decisioning .dsx__ov-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-foreground);
}
.p-capability--decisioning .dsx__ov-verdictpill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-green-100);
  color: var(--color-green-600);
  font-size: 12px;
  font-weight: 600;
}
.p-capability--decisioning .dsx__ov-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 620px) {
  .p-capability--decisioning .dsx__ov-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.p-capability--decisioning .dsx__ov-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--color-grey-100);
  border-radius: 12px;
  background: var(--color-white);
}
.p-capability--decisioning .dsx__ov-q {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-grey-400);
}
.p-capability--decisioning .dsx__ov-a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-foreground);
}
.p-capability--decisioning .dsx__ov-meta {
  font-size: 11px;
  color: var(--color-grey-500);
}
/* section pill + media-beside-checks layout (Biometrics + Document) */
.p-capability--decisioning .dsx__sec-pill {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
  color: var(--color-blue);
  font-size: 11px;
  font-weight: 600;
}
.p-capability--decisioning .dsx__secbody--media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 560px) {
  .p-capability--decisioning .dsx__secbody--media {
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: start;
  }
}
.p-capability--decisioning .dsx__media {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* fixed-aspect frame wraps the media so the portrait selfie mp4 can't blow out
   the tile (face = square, biased to the face; doc = ID-card ratio) */
.p-capability--decisioning .dsx__media-frame {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--color-grey-100);
  background: var(--color-grey-50);
}
.p-capability--decisioning .dsx__media--face .dsx__media-frame {
  aspect-ratio: 1 / 1;
}
/* The ID asset is stored rotated (a landscape licence saved on its side in a
   293×460 portrait canvas). Frame is landscape; the image is rotated −90° and
   scaled to fill it so the licence reads upright. scale = long/short = 460/293. */
.p-capability--decisioning .dsx__media--doc .dsx__media-frame {
  aspect-ratio: 460 / 293;
  max-width: 190px;
  position: relative;
}
.p-capability--decisioning .dsx__media--doc .dsx__media-img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  transform: translate(-50%, -50%) rotate(-90deg) scale(1.5703);
  transform-origin: center center;
}
.p-capability--decisioning .dsx__media-vid,
.p-capability--decisioning .dsx__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.p-capability--decisioning .dsx__media--face .dsx__media-vid {
  object-position: 50% 30%;
}
.p-capability--decisioning .dsx__media-cap {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-grey-500);
}
/* tab status dot */
.p-capability--decisioning .dsx__tab {
  display: inline-flex;
  align-items: center;
}
.p-capability--decisioning .dsx__tdot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-green-600);
  flex: 0 0 auto;
  margin-right: 7px;
}

/* ============================================================
   R2 (Bryant review) — section split (text left · mockup right), a more
   screen-like mockup size, greyer chrome, and the overview as a
   photo+name header beside the stacked verdict cards.
   ============================================================ */
.p-capability--decisioning .dec-sc {
  display: grid;
  gap: 32px;
  align-items: center;
}
.p-capability--decisioning .dec-sc__copy {
  min-width: 0;
}
@media (min-width: 900px) {
  .p-capability--decisioning .dec-sc {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 56px;
  }
  .p-capability--decisioning .dec-sc__copy {
    text-align: left;
  }
  .p-capability--decisioning .dec-sc__copy .cap-intro {
    margin-inline: 0;
    max-width: 42ch;
  }
}

/* a touch taller so it reads like a screen, not a wide strip */
/* height now comes from the fixed .dsx__main + flexing .dsx__scroll (above) */
/* slightly wider evidence tile beside the checks */
@media (min-width: 560px) {
  .p-capability--decisioning .dsx__secbody--media {
    grid-template-columns: 150px minmax(0, 1fr);
  }
}

/* no blue focus box on the mock buttons (keyboard ring only) */
.p-capability--decisioning .dsx__tab:focus,
.p-capability--decisioning .dsx__view:focus {
  outline: none;
}
.p-capability--decisioning .dsx__tab:focus-visible,
.p-capability--decisioning .dsx__view:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--color-blue-500) 55%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* overview = photo + name (left) · stacked verdict cards (right) */
.p-capability--decisioning .dsx__ov-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 460px) {
  .p-capability--decisioning .dsx__ov-grid {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }
}
.p-capability--decisioning .dsx__ov-who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.p-capability--decisioning .dsx__ov-photo {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-grey-100);
  background: var(--color-grey-50);
}
.p-capability--decisioning .dsx__ov-vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
.p-capability--decisioning .dsx__ov-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-foreground);
}
.p-capability--decisioning .dsx__ov-who .dsx__ov-verdictpill {
  margin-left: 0;
}
/* cards stack now that they sit in the narrower right column */
.p-capability--decisioning .dsx__ov-grid .dsx__ov-cards {
  grid-template-columns: 1fr;
  gap: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────
   R3 refinements: circular selfie + liveness arc, country/age pills,
   a rejected (fraud) session variant, and the legit/fraud deck switch.
   ───────────────────────────────────────────────────────────────────────── */

/* Circular selfie (Biometrics detail + Overview) with a liveness capture arc.
   The media is clipped to a circle; the arc lives on a ::after that sits
   OUTSIDE the media, so the frame must not clip it (overflow visible). */
.p-capability--decisioning .dsx__media--face .dsx__media-frame,
.p-capability--decisioning .dsx__ov-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: visible;
  border: 0;
  background: transparent;
  max-width: 132px;
}
.p-capability--decisioning .dsx__media--face .dsx__media-vid,
.p-capability--decisioning .dsx__ov-vid {
  border-radius: 50%;
  object-position: 50% 28%;
  box-shadow: 0 0 0 1px var(--color-grey-100);
}
/* (blue/red liveness arc removed — the photo is a clean circle) */

/* country / age pills under the name (replaces the redundant verdict pill) */
.p-capability--decisioning .dsx__ov-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.p-capability--decisioning .dsx__ov-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-grey-100);
  color: var(--color-grey-500);
  font-size: 11px;
  font-weight: 600;
}

/* rejected-session colour variants */
.p-capability--decisioning .dsx__verdict--bad {
  background: var(--color-red-100);
  color: var(--color-red-600);
}
.p-capability--decisioning .dsx__dot--bad {
  background: var(--color-red-600);
  box-shadow: 0 0 0 3px
    color-mix(in oklab, var(--color-red-600) 18%, transparent);
}
.p-capability--decisioning .dsx__tdot--bad {
  background: var(--color-red-600);
}
.p-capability--decisioning .dsx__sec-pill--bad {
  background: color-mix(in oklab, var(--color-red-600) 10%, transparent);
  color: var(--color-red-600);
}

/* the deck: switch + two mockups, one visible at a time */
.p-capability--decisioning .dsx-deck {
  width: min(100%, 620px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.p-capability--decisioning .dsx-deck__cap {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-grey-500);
}
/* the switch now sits under the copy (left column) */
.p-capability--decisioning .dsx-deck__switch {
  display: inline-flex;
  margin-top: 28px;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--color-grey-100);
  vertical-align: top;
}
.p-capability--decisioning .dsx-deck__pick {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-grey-500);
  padding: 7px 14px;
  border-radius: 999px;
  background: transparent;
}
.p-capability--decisioning .dsx-deck__pick.is-active {
  background: var(--color-white);
  color: var(--color-foreground);
  box-shadow: none;
}
.p-capability--decisioning .dsx-deck__pick i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.p-capability--decisioning .dsx-deck__pick--legit i {
  background: var(--color-green-600);
}
.p-capability--decisioning .dsx-deck__pick--fraud i {
  background: var(--color-red-600);
}
.p-capability--decisioning .dsx-deck__pick:focus {
  outline: none;
}
.p-capability--decisioning .dsx-deck__pick:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--color-blue-500) 55%, transparent);
  outline-offset: 2px;
}
.p-capability--decisioning .dsx-deck .dsx {
  width: 100%;
  display: none;
}
.p-capability--decisioning .dsx-deck .dsx.dsx--active {
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   R4 — "look inside a single session" rework (Bryant):
   no header/segmented toggle; the tab bar (Overview + sections) is the nav;
   detail sections become outlined cards whose checks load in (skeleton → filled)
   as you scroll; the overview verdicts check in. Animation is progressive:
   with no JS / reduced-motion everything is simply shown.
   ───────────────────────────────────────────────────────────────────────── */

/* taller body now that the header row is gone */
.p-capability--decisioning .dsx__main {
  height: 452px;
}

/* one continuous scroll — the overview section, then the section cards,
   separated by a consistent gap (no view swap, so no page jump) */
.p-capability--decisioning .dsx__scroll {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 32px;
}
.p-capability--decisioning .dsx__ovsec {
  padding: 2px 2px 4px;
}

/* the Overview tab carries no status dot */
.p-capability--decisioning .dsx__tab--ov {
  color: var(--color-grey-on-white);
}

/* ── Overview: an identity, not a checklist ─────────────────────────────── */
.p-capability--decisioning .dsx__ov-who {
  align-items: center;
  text-align: center;
  gap: 10px;
}
.p-capability--decisioning .dsx__ov-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-grey-100);
}
.p-capability--decisioning .dsx__ov-photo {
  max-width: 128px;
}
.p-capability--decisioning .dsx__ov-approve {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--color-green-100);
  color: var(--color-success-strong, var(--color-green-600));
  font-size: 11px;
  font-weight: 600;
}
.p-capability--decisioning .dsx__ov-approve--bad {
  background: var(--color-red-100);
  color: var(--color-red-600);
}
.p-capability--decisioning .dsx__ov-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-foreground);
}
.p-capability--decisioning .dsx__ov-tags {
  justify-content: center;
}
.p-capability--decisioning .dsx__ov-tag {
  padding: 3px 9px;
  font-size: 11px;
}
/* verdict icon = the real site "Success" badge (solid circle + white check) */
.p-capability--decisioning .dsx__ov-a {
  gap: 10px;
}
.p-capability--decisioning .dsx__ov-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
}
.p-capability--decisioning .dsx__ov-check svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ── Detail: outlined section cards ─────────────────────────────────────── */
/* the title + pill live in the content column beside the media (photo is
   vertically centred against title + checks), which reads tighter than a
   full-width header row. */
.p-capability--decisioning .dsx__card {
  border: 1px solid var(--color-grey-100);
  border-radius: 16px;
  background: var(--color-white);
}
.p-capability--decisioning .dsx__card-body {
  padding: 20px 22px;
}
.p-capability--decisioning .dsx__card-body--media {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 520px) {
  .p-capability--decisioning .dsx__card-body--media {
    flex-direction: row;
    align-items: center;
    gap: 26px;
  }
  .p-capability--decisioning .dsx__card-body--media .dsx__media {
    width: 152px;
    flex: 0 0 152px;
  }
  .p-capability--decisioning
    .dsx__card-body--media
    .dsx__media--face
    .dsx__media-frame,
  .p-capability--decisioning
    .dsx__card-body--media
    .dsx__media--doc
    .dsx__media-frame {
    max-width: none;
  }
}
.p-capability--decisioning .dsx__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.p-capability--decisioning .dsx__card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-grey-100);
}
.p-capability--decisioning .dsx__card-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-heading, var(--color-grey-600));
}
.p-capability--decisioning .dsx__card-pill {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
  color: var(--color-blue);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.p-capability--decisioning .dsx__card-pill--bad {
  background: color-mix(in oklab, var(--color-red-600) 10%, transparent);
  color: var(--color-red-600);
}

/* ── check rows + skeletons ─────────────────────────────────────────────── */
.p-capability--decisioning .dsx__row {
  position: relative;
  border-bottom: 1px solid var(--color-grey-100);
}
.p-capability--decisioning .dsx__row:last-child {
  border-bottom: 0;
}
.p-capability--decisioning .dsx__rowc {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.p-capability--decisioning .dsx__row-l {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-foreground);
}
/* skeleton placeholder — a label bar + a pill block, shimmering */
.p-capability--decisioning .dsx__skel {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.p-capability--decisioning .dsx__skel::before,
.p-capability--decisioning .dsx__skel::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    var(--color-grey-100) 25%,
    var(--color-grey-50) 37%,
    var(--color-grey-100) 63%
  );
  background-size: 400% 100%;
  animation: dsx-shimmer 1.5s ease-in-out infinite;
}
.p-capability--decisioning .dsx__skel::before {
  left: 0;
  width: 46%;
  height: 13px;
  border-radius: 7px;
}
.p-capability--decisioning .dsx__skel::after {
  right: 0;
  width: 52px;
  height: 20px;
  border-radius: 999px;
}
/* media skeleton fills the frame instead */
.p-capability--decisioning .dsx__media-frame .dsx__skel {
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--color-grey-100) 25%,
    var(--color-grey-50) 37%,
    var(--color-grey-100) 63%
  );
  background-size: 400% 100%;
  animation: dsx-shimmer 1.5s ease-in-out infinite;
}
.p-capability--decisioning .dsx__media--face .dsx__media-frame .dsx__skel {
  border-radius: 50%;
}
.p-capability--decisioning .dsx__media-frame .dsx__skel::before,
.p-capability--decisioning .dsx__media-frame .dsx__skel::after {
  display: none;
}
@keyframes dsx-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* ── animation states — only when JS opts in (progressive enhancement) ──── */
/* the sequence: a container stacks in → its rows show grey skeletons → the
   checks populate one by one → the next container stacks in. */

/* rows: grey skeleton until the row is populated */
.p-capability--decisioning .dsx.is-anim .dsx__skel {
  display: block;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.p-capability--decisioning .dsx.is-anim .dsx__row .dsx__rowc {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.p-capability--decisioning .dsx.is-anim .dsx__row.is-in .dsx__rowc {
  opacity: 1;
}
.p-capability--decisioning .dsx.is-anim .dsx__row.is-in .dsx__skel {
  opacity: 0;
}
.p-capability--decisioning
  .dsx.is-anim
  .dsx__card.is-loaded
  .dsx__media-frame
  .dsx__skel {
  opacity: 0;
}

/* containers stack in — section cards + the overview verdict cards */
.p-capability--decisioning .dsx.is-anim .dsx__card,
.p-capability--decisioning .dsx.is-anim .dsx__ov-card {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}
.p-capability--decisioning .dsx.is-anim .dsx__card.is-shown,
.p-capability--decisioning .dsx.is-anim .dsx__ov-card.is-in {
  opacity: 1;
  transform: none;
}

/* the verdict badge pops in with overshoot + the check draws on — matched to
   the site's "Success" screen (solution.css co-badge-in / co-check-draw) */
.p-capability--decisioning .dsx.is-anim .dsx__ck-badge {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}
.p-capability--decisioning .dsx.is-anim .dsx__ck-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.p-capability--decisioning .dsx.is-anim .dsx__ov-card.is-in .dsx__ck-badge {
  animation: dsx-badge-in 0.6s cubic-bezier(0, 0.75, 0.25, 1) 0.15s both;
}
.p-capability--decisioning .dsx.is-anim .dsx__ov-card.is-in .dsx__ck-draw {
  animation: dsx-check-draw 0.3s ease-out 0.45s both;
}
@keyframes dsx-badge-in {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes dsx-check-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-capability--decisioning .dsx__skel {
    display: none !important;
  }
  .p-capability--decisioning .dsx .dsx__rowc,
  .p-capability--decisioning .dsx .dsx__card,
  .p-capability--decisioning .dsx .dsx__ov-card {
    opacity: 1 !important;
    transform: none !important;
  }
  .p-capability--decisioning .dsx .dsx__ck-badge {
    transform: none !important;
  }
  .p-capability--decisioning .dsx .dsx__ck-draw {
    stroke-dashoffset: 0 !important;
  }
}

/* ============================================================
   REVIEW-QUEUE MOCKUP (.dsq) — behavior: decisioning-queue.js.
   Sessions table → click a row → bento overview + checks → back. A cursor
   auto-tours the three. First pass; detail table intentionally simple.
   ============================================================ */
.p-capability--decisioning .dsq {
  position: relative;
  width: min(100%, 620px);
  margin-inline: auto;
  border: 1px solid var(--color-grey-100);
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: none;
}

/* table */
.p-capability--decisioning .dsq__table {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 20px;
  gap: 14px;
}
.p-capability--decisioning .dsq__thead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.p-capability--decisioning .dsq__ttitle {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-heading, var(--color-grey-600));
}
/* contextual line — how many verifications landed recently (not a queue count) */
.p-capability--decisioning .dsq__sub {
  font-size: 12px;
  color: var(--color-grey-400);
}
/* rows stack with margin-top (not gap) so a new arrival can collapse to nothing and push the standing list down */
.p-capability--decisioning .dsq__rows {
  display: flex;
  flex-direction: column;
}
/* queue rows — the Case management row anatomy: status dot · person · who · decision chip */
.p-capability--decisioning .dsq__row {
  position: relative;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--color-grey-100);
  border-radius: 12px;
  background: var(--color-white);
  cursor: pointer;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  text-align: left;
  box-shadow: none;
  transition:
    height 0.55s cubic-bezier(0.25, 1, 0.5, 1),
    margin-top 0.55s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.4s ease,
    border-color 0.2s,
    box-shadow 0.2s;
}
.p-capability--decisioning .dsq__row:first-child {
  margin-top: 0;
}
.p-capability--decisioning .dsq__row--rest {
  cursor: default;
  pointer-events: none;
}
.p-capability--decisioning .dsq__row:hover,
.p-capability--decisioning .dsq__row.is-active {
  border-color: color-mix(in oklab, var(--color-blue-500) 34%, transparent);
  box-shadow: none;
}
.p-capability--decisioning .dsq__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-grey-300);
}
.p-capability--decisioning .dsq__row--ok .dsq__dot {
  background: var(--color-green-500);
}
.p-capability--decisioning .dsq__row--warn .dsq__dot {
  background: var(--color-amber-600);
}
.p-capability--decisioning .dsq__row--bad .dsq__dot {
  background: var(--color-red-600);
}
.p-capability--decisioning .dsq__row--rest .dsq__dot {
  background: var(--color-grey-200);
}
.p-capability--decisioning .dsq__ava {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.p-capability--decisioning .dsq__ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.p-capability--decisioning .dsq__ava--empty {
  border-style: dashed;
  border-color: var(--color-grey-200);
  background: var(--color-grey-50);
  color: var(--color-grey-400);
}
.p-capability--decisioning .dsq__ava--empty svg {
  width: 15px;
  height: 15px;
}
.p-capability--decisioning .dsq__ava--bad {
  border-color: color-mix(
    in oklab,
    var(--color-red-600) 38%,
    var(--color-grey-100)
  );
}
.p-capability--decisioning .dsq__ava--bad img {
  filter: grayscale(0.4);
}
.p-capability--decisioning .dsq__ava--rest {
  background: var(--color-grey-100);
}
.p-capability--decisioning .dsq__who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.p-capability--decisioning .dsq__who b {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-foreground);
}
.p-capability--decisioning .dsq__who span {
  font-size: 11px;
  line-height: 1.1;
  color: var(--color-grey-400);
}
/* redacted name — the minor / untrusted identity is shown as a grey line, age still surfaced */
.p-capability--decisioning .dsq__redact {
  width: 74px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
/* grey skeleton bits for the standing (past) sessions already in the list */
.p-capability--decisioning .dsq__rsk {
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--decisioning .dsq__rsk--w50 {
  width: 30%;
}
.p-capability--decisioning .dsq__rsk--w60 {
  width: 38%;
}
.p-capability--decisioning .dsq__rsk--w70 {
  width: 46%;
}
.p-capability--decisioning .dsq__rsk--trail {
  margin-left: auto;
  flex: 0 0 auto;
  width: 58px;
}
.p-capability--decisioning .dsq__status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.p-capability--decisioning .dsq__status--pass {
  background: var(--color-green-100);
  color: var(--color-success-strong, var(--color-green-600));
}
.p-capability--decisioning .dsq__status--review {
  background: color-mix(in oklab, var(--color-amber-600) 16%, transparent);
  color: var(--color-amber-600);
}
.p-capability--decisioning .dsq__status--bad {
  background: var(--color-red-100);
  color: var(--color-red-600);
}
/* new sessions stack in on TOP of the standing list: each starts collapsed, then expands and pushes the grey rows down, with a brief blue ring on land */
.p-capability--decisioning .dsq.is-anim .dsq__row--new {
  height: 0;
  margin-top: 0;
  opacity: 0;
  border-color: transparent;
  box-shadow: none;
}
.p-capability--decisioning .dsq.is-anim .dsq__row--new.is-in {
  height: 52px;
  opacity: 1;
  border-color: var(--color-grey-100);
  box-shadow: none;
}
.p-capability--decisioning .dsq.is-anim .dsq__row--new.is-in:not(:first-child) {
  margin-top: 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .p-capability--decisioning .dsq.is-anim .dsq__row--new.is-in {
    animation: dsq-land 0.7s ease-out;
  }
}
@keyframes dsq-land {
  0% {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-blue-500) 26%, transparent);
  }
  100% {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-blue-500) 0%, transparent);
  }
}

/* session */
.p-capability--decisioning .dsq__session {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.p-capability--decisioning .dsq__shead {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-grey-100);
  flex: 0 0 auto;
}
.p-capability--decisioning .dsq__back {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: -4px;
  border-radius: 999px;
  color: var(--color-blue);
  padding: 0;
  transition: background-color 0.2s;
}
.p-capability--decisioning .dsq__back:hover {
  background: var(--color-blue-100);
}
.p-capability--decisioning .dsq__back svg {
  width: 18px;
  height: 18px;
}
.p-capability--decisioning .dsq__sid {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-grey-500);
}
.p-capability--decisioning .dsq__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

/* compact bento */
.p-capability--decisioning .dsqb {
  display: flex;
  gap: 10px;
}
.p-capability--decisioning .dsqb__c1 {
  flex: 0 0 132px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-capability--decisioning .dsqb__c2 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-capability--decisioning .dsqb__top {
  display: flex;
  gap: 8px;
}
.p-capability--decisioning .dsqb__cell {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-grey-100);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.p-capability--decisioning .dsqb__lbl {
  font-size: 11px;
  color: var(--color-grey-400);
  font-weight: 500;
}
.p-capability--decisioning .dsqb__snum {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.p-capability--decisioning .dsqb__snum b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--color-green-500);
}
.p-capability--decisioning .dsqb__score--bad .dsqb__snum b {
  color: var(--color-red-600);
}
.p-capability--decisioning .dsqb__snum i {
  font-size: 11px;
  font-style: normal;
  color: var(--color-grey-400);
}
.p-capability--decisioning .dsqb__scorebar {
  margin-top: auto;
  height: 4px;
  border-radius: 999px;
  background: var(--color-grey-100);
  overflow: hidden;
}
.p-capability--decisioning .dsqb__scorebar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-green-500);
}
.p-capability--decisioning .dsqb__score--bad .dsqb__scorebar i {
  background: var(--color-red-600);
}
.p-capability--decisioning .dsqb__age {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.p-capability--decisioning .dsqb__age .dsqb__lbl {
  width: 100%;
}
.p-capability--decisioning .dsqb__agev {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--color-black);
}
.p-capability--decisioning .dsqb__agewarn {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-amber-600) 16%, transparent);
  color: var(--color-amber-600);
  font-size: 10px;
  font-weight: 600;
}
.p-capability--decisioning .dsqb__agewarn--bad {
  background: color-mix(in oklab, var(--color-red-600) 12%, transparent);
  color: var(--color-red-600);
}
.p-capability--decisioning .dsqb__v {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  border: 1px solid var(--color-grey-100);
  border-radius: 12px;
  padding: 9px 12px;
  background: var(--color-white);
}
.p-capability--decisioning .dsqb__badge {
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  display: inline-flex;
}
.p-capability--decisioning .dsqb__badge svg {
  width: 100%;
  height: 100%;
  display: block;
}
.p-capability--decisioning .dsqb__vt {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--color-black);
}
.p-capability--decisioning .dsqb__vm {
  grid-column: 2;
  font-size: 11px;
  color: var(--color-grey-400);
}

/* compact photo + map */
.p-capability--decisioning .dsqb__photo {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-grey-200);
}
.p-capability--decisioning .dsqb__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
  display: block;
}
.p-capability--decisioning .dsqb__photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-grey-50);
  border: 1px dashed var(--color-grey-200);
}
.p-capability--decisioning .dsqb__noimg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px;
  text-align: center;
}
.p-capability--decisioning .dsqb__noimgico {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-grey-400);
  box-shadow: none;
}
.p-capability--decisioning .dsqb__noimgico svg {
  width: 17px;
  height: 17px;
}
.p-capability--decisioning .dsqb__noimg b {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-grey-500);
}
.p-capability--decisioning .dsqb__noimg span {
  font-size: 9.5px;
  color: var(--color-grey-400);
  line-height: 1.3;
}
.p-capability--decisioning .dsqb__photo--spoof img {
  filter: grayscale(0.5) contrast(1.05);
}
.p-capability--decisioning .dsqb__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(217, 31, 38, 0.32),
    rgba(217, 31, 38, 0.06) 55%,
    rgba(0, 0, 0, 0.3)
  );
}
.p-capability--decisioning .dsqb__alert {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-red-600);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none;
}
.p-capability--decisioning .dsqb__map {
  position: relative;
  flex: 1;
  min-height: 76px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-grey-100);
}
.p-capability--decisioning .dsqb__mapsvg {
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(1);
}
.p-capability--decisioning .dsqb__map--off .dsqb__mapsvg {
  opacity: 0.5;
}
.p-capability--decisioning .dsqb__ping {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.p-capability--decisioning .dsqb__ping i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 999px;
  border: 2px solid rgba(58, 62, 75, 0.45);
  opacity: 0;
}
.p-capability--decisioning .dsqb__ping b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 999px;
  background: var(--color-grey-500);
  box-shadow: 0 0 0 3px var(--color-white);
}
.p-capability--decisioning .dsqb__warn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-white) 84%, transparent);
  backdrop-filter: blur(3px);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-grey-500);
  white-space: nowrap;
  box-shadow: none;
}
.p-capability--decisioning .dsqb__warn--bad {
  color: var(--color-red-600);
}
@media (prefers-reduced-motion: no-preference) {
  .p-capability--decisioning .dsqb__ping i {
    animation: dech-ping 2.6s ease-out infinite;
  }
  .p-capability--decisioning .dsqb__ping i:nth-child(2) {
    animation-delay: 1.3s;
  }
}

/* ── mobile: the "In the dashboard" window (.dsx/.dsq) was wider than the phone
   — the decorative left rail ate the width, so inside the session the "/100",
   the Age "Underage"/"Mismatch" tag and the verdict cards were clipped by the
   window's overflow:hidden. Drop the rail and tighten the session bento so the
   score + age + tags sit fully inside their cards. Nacim 2026-08-18. ── */
@media (max-width: 767px) {
  .p-capability--decisioning .dsx__rail { display: none; }
  .p-capability--decisioning .dsq__scroll { padding: 10px; }
  .p-capability--decisioning .dsqb { gap: 8px; }
  .p-capability--decisioning .dsqb__c1 { flex-basis: 112px; }
  .p-capability--decisioning .dsqb__cell { padding: 10px; }
  .p-capability--decisioning .dsqb__snum b,
  .p-capability--decisioning .dsqb__agev { font-size: 18px; }
}

/* detail cards (simple — Bryant redraws) */
.p-capability--decisioning .dsq__dcard {
  border: 1px solid var(--color-grey-100);
  border-radius: 12px;
  background: var(--color-white);
}
.p-capability--decisioning .dsq__dhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-grey-100);
}
.p-capability--decisioning .dsq__dhead h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-heading, var(--color-grey-600));
}
.p-capability--decisioning .dsq__dtag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
  color: var(--color-blue);
  white-space: nowrap;
}
.p-capability--decisioning .dsq__dtag--warn {
  background: color-mix(in oklab, var(--color-amber-600) 14%, transparent);
  color: var(--color-amber-600);
}
.p-capability--decisioning .dsq__dtag--bad {
  background: color-mix(in oklab, var(--color-red-600) 10%, transparent);
  color: var(--color-red-600);
}
.p-capability--decisioning .dsq__drows {
  padding: 4px 14px 8px;
}
.p-capability--decisioning .dsq__drow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-grey-100);
}
.p-capability--decisioning .dsq__drow:last-child {
  border-bottom: 0;
}
.p-capability--decisioning .dsq__drow span {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-foreground);
}
.p-capability--decisioning .dsq__dpill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.p-capability--decisioning .dsq__dpill--ok {
  background: var(--color-green-100);
  color: var(--color-success-strong, var(--color-green-600));
}
.p-capability--decisioning .dsq__dpill--warn {
  background: color-mix(in oklab, var(--color-amber-600) 16%, transparent);
  color: var(--color-amber-600);
}
.p-capability--decisioning .dsq__dpill--bad {
  background: var(--color-red-100);
  color: var(--color-red-600);
}

/* cursor */
.p-capability--decisioning .dsq__cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -2px 0 0 -2px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: translate(-100px, -100px);
  transition:
    transform 0.6s cubic-bezier(0.5, 0, 0.2, 1),
    opacity 0.3s ease;
}
.p-capability--decisioning .dsq__cursor.is-on {
  opacity: 1;
}
.p-capability--decisioning .dsq__cursor svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: none;
}
.p-capability--decisioning .dsq__cursor::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 999px;
  border: 2px solid var(--color-blue-500);
  opacity: 0;
}
.p-capability--decisioning .dsq__cursor.is-click::after {
  animation: dsq-click 0.45s ease-out;
}
@keyframes dsq-click {
  0% {
    opacity: 0.7;
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
    transform: scale(3.2);
  }
}