/* ============================================================
   UI customization — page additions on top of capability.css.
   Only additions/overrides for /platform/ui-customization/;
   everything scoped to the page modifier so it never bleeds to
   the sibling /platform/ routes that share capability.css.

   Load order (Layout.astro pageCss array):
     capability.css → ui-customization-studio.css → THIS sheet.

   The cap-walk media slots hold REAL inline mockups (built here
   in CSS, tokens only) in place of the old yellow placeholder
   tiles — Nacim review 2026-07-31 (G1: mockups, not product; G2:
   yellow placeholders → built fake visuals). Each mock reads as
   a clean wireframe: white ground, light-grey skeleton shapes,
   thin hairlines, one restrained blue accent. Every mock keeps
   its data-ph id and a small yellow "Mockup" chip so it stays
   greppable until the final marketing art lands (see
   .context/website-fanout/ui-customization.md → Visuals needed).
   ============================================================ */

/* pin the media to the row's vertical centre, like the old tiles did */
.p-capability--ui-customization .cap-walk__row { align-items: center; }

/* ---------- shared mock frame ---------- */
.p-capability--ui-customization .uic-mock {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ph-ar, 16 / 11);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  background: var(--color-white);
  overflow: hidden;
}
.p-capability--ui-customization .cap-walk__row:hover .uic-mock {
  border-color: color-mix(in oklab, var(--color-blue) 25%, transparent);
}

/* the discreet "Mockup" corner chip (11px, per Nacim's G2 spec) */
.p-capability--ui-customization .uic-mock__chip {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  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;
  letter-spacing: var(--track-wide);
}

/* skeleton bar vocabulary shared across mocks */
.p-capability--ui-customization .uic-bar {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--ui-customization .uic-bar--sm { height: 7px; }
.p-capability--ui-customization .uic-bar--w60 { width: 60%; }
.p-capability--ui-customization .uic-bar--w75 { width: 75%; }
.p-capability--ui-customization .uic-bar--w90 { width: 90%; }

/* ---------- browser / dashboard window chrome (v1, v3, v4) ---------- */
.p-capability--ui-customization .uic-win {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.p-capability--ui-customization .uic-win__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-grey-50);
}
.p-capability--ui-customization .uic-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-capability--ui-customization .uic-win__addr {
  margin-left: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  font-size: var(--fs-xs);
  color: var(--color-grey-400);
  letter-spacing: var(--track-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-capability--ui-customization .uic-win__body {
  flex: 1;
  min-height: 0;
  padding: 22px;
}

/* v1 · config: nav rail + org-name panel */
.p-capability--ui-customization .uic-cfg {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 20px;
}
.p-capability--ui-customization .uic-rail {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-right: 18px;
  border-right: 1px solid var(--color-border-light);
}
.p-capability--ui-customization .uic-rail__item {
  height: 10px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--ui-customization .uic-rail__item.is-active {
  width: 84%;
  background: color-mix(in oklab, var(--color-blue) 24%, var(--color-grey-100));
}
.p-capability--ui-customization .uic-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.p-capability--ui-customization .uic-panel__title {
  width: 44%;
  height: 12px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-capability--ui-customization .uic-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-capability--ui-customization .uic-label {
  font-size: var(--fs-xs);
  color: var(--color-grey-400);
}
.p-capability--ui-customization .uic-input {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-blue-200);
  background: var(--color-white);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-blue) 12%, transparent);
}
.p-capability--ui-customization .uic-input__val {
  font-size: var(--fs-sm);
  color: var(--color-grey-500);
}
.p-capability--ui-customization .uic-caret {
  width: 2px;
  height: 18px;
  background: var(--color-blue);
}
.p-capability--ui-customization .uic-url {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-grey-200);
  background: var(--color-grey-50);
  font-size: var(--fs-sm);
  color: var(--color-grey-400);
}
.p-capability--ui-customization .uic-url__brand {
  color: var(--color-blue);
  font-weight: 600;
}

/* v2 · end-user stage: two branded phones on a dotted console canvas */
.p-capability--ui-customization .uic-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  height: 100%;
  padding: 24px;
  background-color: var(--color-grey-50);
  background-image: radial-gradient(color-mix(in oklab, var(--color-grey-200) 55%, transparent) 1px, transparent 1px);
  background-size: 16px 16px;
}
.p-capability--ui-customization .uic-phone {
  display: flex;
  flex-direction: column;
  width: 42%;
  max-width: 172px;
  aspect-ratio: 172 / 358;
  padding: 12px 12px 14px;
  border-radius: 24px;
  border: 1px solid var(--color-grey-200);
  background: var(--color-white);
}
.p-capability--ui-customization .uic-phone__notch {
  align-self: center;
  width: 34%;
  height: 5px;
  border-radius: 999px;
  background: var(--color-grey-200);
  margin-bottom: 12px;
}
.p-capability--ui-customization .uic-phone__screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-height: 0;
}
.p-capability--ui-customization .uic-logo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}
.p-capability--ui-customization .uic-logo__mark {
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: var(--color-blue);
}
.p-capability--ui-customization .uic-logo__mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  border: 1.5px solid var(--color-white);
}
.p-capability--ui-customization .uic-logo__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--track-tight);
  color: var(--color-grey-600);
}
.p-capability--ui-customization .uic-idcard {
  width: 82%;
  aspect-ratio: 16 / 10;
  margin-top: 2px;
  border-radius: 10px;
  border: 1px solid var(--color-grey-200);
  background:
    radial-gradient(circle at 22% 34%, color-mix(in oklab, var(--color-grey-200) 70%, transparent) 0 12%, transparent 13%),
    linear-gradient(color-mix(in oklab, var(--color-grey-100) 65%, var(--color-white)), color-mix(in oklab, var(--color-grey-100) 65%, var(--color-white)));
}
.p-capability--ui-customization .uic-oval {
  width: 56%;
  aspect-ratio: 3 / 4;
  margin-top: 4px;
  border-radius: 999px;
  border: 2px solid var(--color-blue-200);
  background: color-mix(in oklab, var(--color-grey-100) 55%, var(--color-white));
}
.p-capability--ui-customization .uic-cta {
  margin-top: auto;
  width: 82%;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-blue);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 600;
}
.p-capability--ui-customization .uic-foot {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.p-capability--ui-customization .uic-foot__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-blue) 45%, var(--color-grey-200));
}
.p-capability--ui-customization .uic-foot__bar {
  width: 44px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-grey-100);
}

/* v3 + v4 · split: a control column beside a live preview card */
.p-capability--ui-customization .uic-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.p-capability--ui-customization .uic-ctrl {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p-capability--ui-customization .uic-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  background: var(--color-grey-50);
}
.p-capability--ui-customization .uic-preview__tag {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--color-grey-300);
}
.p-capability--ui-customization .uic-preview__btn {
  margin-top: 4px;
  align-self: flex-start;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--color-blue);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 600;
}

/* v3 · colour control */
.p-capability--ui-customization .uic-hex {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
}
.p-capability--ui-customization .uic-hex__swatch {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--color-blue);
}
.p-capability--ui-customization .uic-palette {
  display: flex;
  gap: 8px;
}
.p-capability--ui-customization .uic-sw {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--color-border-light);
  background: var(--color-grey-100);
}
.p-capability--ui-customization .uic-sw--on {
  background: var(--color-blue);
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-blue) 22%, transparent);
}
.p-capability--ui-customization .uic-prog {
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-100);
  overflow: hidden;
}
.p-capability--ui-customization .uic-prog__fill {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: 999px;
  background: var(--color-blue);
}

/* v4 · type + shape control */
.p-capability--ui-customization .uic-font {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
}
.p-capability--ui-customization .uic-font__aa {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  letter-spacing: var(--track-tight);
  color: var(--color-grey-600);
}
.p-capability--ui-customization .uic-slider {
  position: relative;
  display: flex;
  align-items: center;
  height: 22px;
}
.p-capability--ui-customization .uic-slider__track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--color-grey-100);
  overflow: hidden;
}
.p-capability--ui-customization .uic-slider__fill {
  display: block;
  width: 58%;
  height: 100%;
  background: color-mix(in oklab, var(--color-blue) 55%, var(--color-grey-200));
}
.p-capability--ui-customization .uic-slider__knob {
  position: absolute;
  left: 54%;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--color-blue);
  background: var(--color-white);
}
.p-capability--ui-customization .uic-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
}
.p-capability--ui-customization .uic-aa {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  color: var(--color-grey-500);
}

/* ============================================================
   WALK MOCK — fill-to-base pass (Nacim G11 · 2026-08-01). The
   three dashboard windows (v1/v3/v4) were ~55-65% empty: content
   packed into the top ~40% of a 16/11 frame. Fix: the frames drop
   to a canonical 16/9 (per-row `ar`, phones stay taller) AND each
   window body now carries real dashboard structure down to its
   base — a nav-rail account foot + a Save-changes bar (v1), a
   derived-token ramp + a fuller live preview (v3), a Buttons
   control + a two-button preview (v4). Same G13 wireframe
   vocabulary, tokens only.
   ============================================================ */

/* v1 · make the config grid + panel fill their (now shorter) frame */
.p-capability--ui-customization .uic-cfg { height: 100%; }
.p-capability--ui-customization .uic-panel { flex: 1; min-height: 0; }

/* nav-rail account foot, pinned to the rail base */
.p-capability--ui-customization .uic-rail__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-light);
}
/* nav-rail account avatar — canonical site user glyph in a light circular
   chip (round-3 avatar pass: no line-drawn bust; the icon-set user glyph,
   uniform stroke, on grey-100) */
.p-capability--ui-customization .uic-rail__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--color-grey-100);
  color: var(--color-grey-400);
}
.p-capability--ui-customization .uic-rail__avatar svg {
  width: 13px;
  height: 13px;
}
.p-capability--ui-customization .uic-rail__item--wide {
  flex: 1;
  height: 8px;
}

/* helper caption under the portal URL */
.p-capability--ui-customization .uic-hint {
  display: block;
  width: 62%;
  height: 7px;
  border-radius: 999px;
  background: var(--color-grey-100);
}

/* v1 save bar, pinned to the panel base */
.p-capability--ui-customization .uic-savebar {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-light);
}
.p-capability--ui-customization .uic-btn {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.p-capability--ui-customization .uic-btn--primary {
  background: var(--color-blue);
  color: var(--color-white);
}
.p-capability--ui-customization .uic-btn--ghost {
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  color: var(--color-grey-400);
}

/* v3/v4 · control column spreads its groups over the full height */
.p-capability--ui-customization .uic-split .uic-ctrl { justify-content: space-between; }
.p-capability--ui-customization .uic-ctrl__grp {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* v3 · derived-token ramp (one brand color → derived tints) */
.p-capability--ui-customization .uic-ramp {
  display: flex;
  gap: 6px;
}
.p-capability--ui-customization .uic-ramp__sw {
  flex: 1;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--color-border-light);
}
.p-capability--ui-customization .uic-ramp__sw--1 { background: var(--color-blue); border-color: var(--color-blue); }
.p-capability--ui-customization .uic-ramp__sw--2 { background: color-mix(in oklab, var(--color-blue) 72%, var(--color-white)); }
.p-capability--ui-customization .uic-ramp__sw--3 { background: color-mix(in oklab, var(--color-blue) 48%, var(--color-white)); }
.p-capability--ui-customization .uic-ramp__sw--4 { background: color-mix(in oklab, var(--color-blue) 26%, var(--color-white)); }
.p-capability--ui-customization .uic-ramp__sw--5 { background: color-mix(in oklab, var(--color-blue) 12%, var(--color-white)); }

/* v3 · "applies to" toggle rows (color flows to accents/borders) */
.p-capability--ui-customization .uic-applies {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-capability--ui-customization .uic-applies__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.p-capability--ui-customization .uic-applies__dot {
  position: relative;
  flex: none;
  width: 28px;
  height: 15px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-blue) 30%, var(--color-grey-100));
}
.p-capability--ui-customization .uic-applies__dot::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--color-white);
}

/* v3/v4 · the live preview screen fills the panel: content group at the
   top (right under the tag), actions group at the base */
.p-capability--ui-customization .uic-preview__scr {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.p-capability--ui-customization .uic-preview__top,
.p-capability--ui-customization .uic-preview__bot {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.p-capability--ui-customization .uic-preview__scr .uic-idcard {
  width: 52%;
  margin-top: 0;
  border-color: var(--color-blue-200);
}
.p-capability--ui-customization .uic-preview__scr .uic-prog { width: 84%; }
.p-capability--ui-customization .uic-preview__scr .uic-preview__btn {
  margin-top: 0;
  align-self: center;
}
.p-capability--ui-customization .uic-preview__scr .uic-card { width: 100%; }

/* v4 · themed input + rounded chips in the preview (shape on every component) */
.p-capability--ui-customization .uic-fieldsk {
  width: 100%;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
}
.p-capability--ui-customization .uic-pillrow {
  width: 100%;
  display: flex;
  gap: 8px;
}
.p-capability--ui-customization .uic-pillsk {
  flex: 1;
  height: 22px;
  border-radius: var(--radius-md);
  background: var(--color-grey-100);
}

/* v4 · two-button preview row + ghost button */
.p-capability--ui-customization .uic-btnrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-capability--ui-customization .uic-preview__btn--ghost {
  background: var(--color-white);
  color: var(--color-grey-400);
  border: 1px solid var(--color-border-light);
}

/* v4 · button-style control (fill vs outline) */
.p-capability--ui-customization .uic-btnstyles {
  display: flex;
  gap: 10px;
}
.p-capability--ui-customization .uic-btnsk {
  flex: 1;
  height: 30px;
  border-radius: var(--radius-md);
}
.p-capability--ui-customization .uic-btnsk--fill { background: var(--color-blue); }
.p-capability--ui-customization .uic-btnsk--outline {
  background: var(--color-white);
  border: 1.5px solid var(--color-blue-200);
}

/* mobile · a 16/9 window is far too short for a stacked dashboard once the
   row collapses to one column, so let the dashboard windows grow to fit
   their content (the phone stage keeps its fixed ratio) and stack the
   split control/preview vertically */
@media (max-width: 767.98px) {
  .p-capability--ui-customization .uic-mock--win { aspect-ratio: auto; }
  .p-capability--ui-customization .uic-mock--win .uic-win__body { min-height: 0; }
  .p-capability--ui-customization .uic-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 16px;
  }
  .p-capability--ui-customization .uic-split .uic-ctrl { justify-content: flex-start; gap: 12px; }
  .p-capability--ui-customization .uic-preview__scr { justify-content: flex-start; gap: 12px; }
}

/* ============================================================
   HERO — BENTO showcase (Nacim ronda 2). The family cap-hero
   chrome stays (glyph + kicker + display title + sub + actions,
   blue foot-wash, bright nav); the STAGE becomes a split — copy
   left, a live bento right. Every branding ingredient lights up
   in turn and lands on the end-user preview; the accent, corner
   radius and font ride CSS custom properties on .uicb-bento so
   the whole composition stays in sync as the behavior swaps
   brands. Pure G13 wireframe style: white ground, subtle dot
   grid, grey skeleton, ONE accent. Behavior:
   /js/behaviors/ui-customization-hero.js.
   ============================================================ */

/* --- split the family hero: copy left · bento right (>=768) --- */
.p-capability--ui-customization .cap-hero--bento { text-align: left; }
.p-capability--ui-customization .uicb-hero {
  max-width: 1200px;
  padding: 128px 20px 72px;
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 768px) {
  .p-capability--ui-customization .uicb-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 48px;
    padding: 132px 24px 96px;
  }
}
@media (min-width: 1024px) {
  .p-capability--ui-customization .uicb-hero {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    gap: 64px;
    padding-inline: 32px;
  }
}
/* the platform rail rides the hero at ≥1280 (capability.css § cap-rail):
   the bento hero widens to the full container, clears the rail on the
   left like the family hero, and the bento shrinks a step so copy +
   visual fit the remaining column without overlapping the menu
   (Sofia 2026-08-06: "make the visual smaller, but don't do overlaps") */
/* ≥1280 the hero is the console split (capability.css): the sidebar is
   grid column one, so the bento hero only needs its own two columns in
   the remaining stage — copy-favoring at the tight range so the sub
   holds two lines (gate @1280), roomier from 1440 up */
@media (min-width: 1280px) {
  .p-capability--ui-customization .uicb-hero {
    max-width: none;
    padding-inline: 48px 32px;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 48px;
  }
  /* the copy column is narrower beside the sidebar: the 42ch sub clamp
     would force three lines here (gate), so the sub takes the column */
  .p-capability--ui-customization .uicb-copy .cap-hero__sub {
    max-width: 100%;
  }
  /* .uicb-hero prefix outranks the base .uicb-bento rule below */
  .p-capability--ui-customization .uicb-hero .uicb-bento {
    max-width: 500px;
    min-height: 444px; /* the canon box floor (all /platform/ heroes share it) */
    /* right edge rides the stage inset like every /platform/ hero visual,
       eased a step off it (Sofia 2026-08-17: "a little bit to the left") */
    justify-self: end;
    margin-inline: 0 28px;
  }
}
@media (min-width: 1440px) {
  .p-capability--ui-customization .uicb-hero {
    /* the shared platform stage inset (capability.css) */
    padding-inline: 48px 40px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}
.p-capability--ui-customization .uicb-copy { min-width: 0; }
@media (min-width: 768px) {
  .p-capability--ui-customization .uicb-copy .cap-hero__title { max-width: 100%; }
  .p-capability--ui-customization .uicb-copy .cap-hero__sub { max-width: 42ch; }
  .p-capability--ui-customization .uicb-copy .cap-hero__actions { justify-content: flex-start; }
}
@media (max-width: 767.98px) {
  .p-capability--ui-customization .cap-hero--bento { text-align: center; }
  .p-capability--ui-customization .uicb-copy .cap-hero__actions { justify-content: center; }
}

/* --- the bento canvas --- */
.p-capability--ui-customization .uicb-bento {
  --uicb-accent: var(--color-blue-500);
  --uicb-accent-soft: var(--color-blue-100);
  --uicb-radius: 14px;
  --uicb-font: var(--font-display);
  position: relative;
  width: 100%;
  max-width: 640px;
  justify-self: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "prev  prev"
    "logo  color"
    "type  shape";
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--color-border-light);
  /* off-white ground like every /platform/ hero box (Sofia 2026-08-17) */
  background-color: var(--color-grey-50);
}
@media (min-width: 768px) {
  .p-capability--ui-customization .uicb-bento {
    grid-template-columns: 1.42fr 1fr 1fr;
    grid-template-rows: 1fr 1fr auto;
    grid-template-areas:
      "prev  logo   color"
      "prev  type   shape"
      "prev  theme  theme";
    height: 410px;
    gap: 14px;
    padding: 16px;
  }
}
@media (min-width: 1024px) {
  .p-capability--ui-customization .uicb-bento { height: 444px; }
}

/* --- shared tile --- */
.p-capability--ui-customization .uicb-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  overflow: hidden;
}
.p-capability--ui-customization .uicb-tile__lbl {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--color-grey-400);
}
.p-capability--ui-customization .uicb-ctrl {
  appearance: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}
.p-capability--ui-customization .uicb-ctrl:hover { transform: translateY(-2px); }
.p-capability--ui-customization .uicb-ctrl:focus-visible {
  outline: 2px solid var(--color-blue-500);
  outline-offset: 2px;
}
.p-capability--ui-customization .uicb-ctrl.is-active {
  border-color: color-mix(in oklab, var(--color-blue-500) 45%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-blue-500) 9%, transparent);
}

/* --- preview (the end-user phone) --- */
.p-capability--ui-customization .uicb-preview {
  grid-area: prev;
  container-type: size;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background:
    radial-gradient(color-mix(in oklab, var(--color-grey-200) 42%, transparent) 1px, transparent 1px) 0 0 / 14px 14px,
    var(--color-grey-50);
}
.p-capability--ui-customization .uicb-preview .uicb-tile__lbl {
  position: absolute;
  top: 12px;
  left: 14px;
}
.p-capability--ui-customization .uicb-phone {
  --pw: min(74cqw, 40cqh);
  width: var(--pw);
  aspect-ratio: 200 / 424;
  display: flex;
  flex-direction: column;
  padding: calc(var(--pw) * 0.055) calc(var(--pw) * 0.055) calc(var(--pw) * 0.065);
  border-radius: calc(var(--pw) * 0.13);
  border: 1px solid var(--color-grey-200);
  background: var(--color-white);
}
.p-capability--ui-customization .uicb-phone__notch {
  align-self: center;
  width: 30%;
  height: calc(var(--pw) * 0.025);
  border-radius: 999px;
  background: var(--color-grey-200);
  margin-bottom: calc(var(--pw) * 0.05);
}
.p-capability--ui-customization .uicb-phone__screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pw) * 0.04);
  text-align: center;
}
.p-capability--ui-customization .uicb-brand {
  margin-top: calc(var(--pw) * 0.06);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pw) * 0.03);
}
.p-capability--ui-customization .uicb-phone .uicb-mark {
  width: calc(var(--pw) * 0.1);
  height: calc(var(--pw) * 0.1);
  border-radius: calc(var(--pw) * 0.03);
}
.p-capability--ui-customization .uicb-phone .uicb-mark svg {
  width: calc(var(--pw) * 0.065);
  height: calc(var(--pw) * 0.065);
}
.p-capability--ui-customization .uicb-mark {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--uicb-accent);
  transition: background-color 0.45s var(--ease-out-expo);
}
.p-capability--ui-customization .uicb-mark svg { width: 13px; height: 13px; }
.p-capability--ui-customization .uicb-mark--sm { width: 24px; height: 24px; }
.p-capability--ui-customization .uicb-mark--sm svg { width: 15px; height: 15px; }
.p-capability--ui-customization .uicb-brand__word {
  font-family: var(--uicb-font);
  font-weight: 600;
  font-size: calc(var(--pw) * 0.07);
  letter-spacing: var(--track-tight);
  color: var(--color-grey-600);
}
.p-capability--ui-customization .uicb-phone__title {
  margin-top: calc(var(--pw) * 0.01);
  font-family: var(--uicb-font);
  font-weight: 600;
  font-size: calc(var(--pw) * 0.07);
  letter-spacing: var(--track-tight);
  color: var(--color-grey-600);
}
.p-capability--ui-customization .uicb-bar {
  display: block;
  height: calc(var(--pw) * 0.04);
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--ui-customization .uicb-bar--sm { height: calc(var(--pw) * 0.03); }
.p-capability--ui-customization .uicb-bar--w55 { width: 55%; }
.p-capability--ui-customization .uicb-bar--w80 { width: 80%; }
/* Studio's real SelfieIllustration, inlined in the phone. The ring
   gradient + disc + t-shirt ride the brand vars; silhouette stays neutral.
   Ring spins like the Studio original (paused under reduced motion). */
.p-capability--ui-customization .uicb-selfie {
  width: 72%;
  margin-block: auto;
  line-height: 0;
}
.p-capability--ui-customization .uicb-selfie svg {
  width: 100%;
  height: auto;
  display: block;
}
.p-capability--ui-customization .uicb-selfie__ring {
  animation: uicb-spin 3s linear infinite;
  transform-origin: 148px 148px;
}
@keyframes uicb-spin {
  to { transform: rotate(360deg); }
}
.p-capability--ui-customization .uicb-cta {
  margin-top: auto;
  width: 100%;
  padding: calc(var(--pw) * 0.04) 0;
  display: grid;
  place-items: center;
  border-radius: var(--uicb-radius);
  background: var(--uicb-accent);
  color: var(--color-white);
  font-size: calc(var(--pw) * 0.055);
  font-weight: 600;
  transition: background-color 0.45s var(--ease-out-expo), border-radius 0.45s var(--ease-out-expo);
}

/* --- logo tile --- */
.p-capability--ui-customization .uicb-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "mark  check"
    "name  name"
    "track track";
  align-items: center;
  justify-items: start;
  column-gap: 8px;
  row-gap: 6px;
  margin-top: auto;
  padding: 8px;
  border-radius: 10px;
  border: 1.5px dashed var(--color-grey-300);
  background: var(--color-grey-50);
}
.p-capability--ui-customization .uicb-upload .uicb-mark { grid-area: mark; width: 20px; height: 20px; }
.p-capability--ui-customization .uicb-upload .uicb-mark svg { width: 13px; height: 13px; }
.p-capability--ui-customization .uicb-upload__name span { text-transform: lowercase; }
.p-capability--ui-customization .uicb-upload__name {
  grid-area: name;
  font-size: var(--fs-xs);
  color: var(--color-grey-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-capability--ui-customization .uicb-upload__track {
  grid-area: track;
  height: 4px;
  border-radius: 999px;
  background: var(--color-grey-200);
  overflow: hidden;
}
.p-capability--ui-customization .uicb-upload__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--color-blue-500);
}
.p-capability--ui-customization .uicb-upload__check {
  grid-area: check;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--color-green-500);
}
.p-capability--ui-customization .uicb-upload__check svg { width: 10px; height: 10px; }

/* --- colors tile --- */
.p-capability--ui-customization .uicb-brandrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
}
.p-capability--ui-customization .uicb-brandsw {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--uicb-accent);
  transition: background-color 0.45s var(--ease-out-expo);
}
.p-capability--ui-customization .uicb-hex {
  font-size: var(--fs-xs);
  color: var(--color-grey-400);
  font-variant-numeric: tabular-nums;
}

/* --- type tile --- */
.p-capability--ui-customization .uicb-aa {
  margin-top: auto;
  font-family: var(--uicb-font);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  color: var(--color-grey-600);
}
.p-capability--ui-customization .uicb-fontname {
  font-size: var(--fs-xs);
  color: var(--color-grey-400);
}

/* --- shape tile --- */
.p-capability--ui-customization .uicb-shape {
  width: 34px;
  height: 34px;
  margin-top: auto;
  border-radius: var(--uicb-radius);
  border: 1.5px solid color-mix(in oklab, var(--color-blue-500) 50%, transparent);
  background: color-mix(in oklab, var(--color-blue-500) 12%, var(--color-grey-100));
  transition: border-radius 0.45s var(--ease-out-expo);
}
.p-capability--ui-customization .uicb-slider {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--ui-customization .uicb-slider__fill {
  display: block;
  width: 52%;
  height: 100%;
  border-radius: 999px;
  background: var(--color-blue-500);
  transition: width 0.45s var(--ease-out-expo);
}
.p-capability--ui-customization .uicb-slider__knob {
  position: absolute;
  top: 50%;
  left: 52%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--color-white);
  border: 2px solid var(--color-blue-500);
  transition: left 0.45s var(--ease-out-expo), border-color 0.45s var(--ease-out-expo);
}

/* --- color ramp (the accent's derived primitive stops, Studio color panel) --- */
.p-capability--ui-customization .uicb-ramp {
  display: flex;
  gap: 5px;
  height: 14px;
}
.p-capability--ui-customization .uicb-ramp > span {
  flex: 1;
  border-radius: 5px;
  transition: background-color 0.45s var(--ease-out-expo);
}
.p-capability--ui-customization .uicb-ramp > span:nth-child(1) { background: color-mix(in oklab, var(--uicb-accent) 12%, var(--color-white)); }
.p-capability--ui-customization .uicb-ramp > span:nth-child(2) { background: color-mix(in oklab, var(--uicb-accent) 30%, var(--color-white)); }
.p-capability--ui-customization .uicb-ramp > span:nth-child(3) { background: color-mix(in oklab, var(--uicb-accent) 58%, var(--color-white)); }
.p-capability--ui-customization .uicb-ramp > span:nth-child(4) { background: var(--uicb-accent); }
.p-capability--ui-customization .uicb-ramp > span:nth-child(5) { background: color-mix(in oklab, var(--uicb-accent) 72%, var(--color-black)); }
.p-capability--ui-customization .uicb-ramp > span:nth-child(6) { background: color-mix(in oklab, var(--uicb-accent) 45%, var(--color-black)); }

/* --- shared small value label (Light / Default / Center …) --- */
.p-capability--ui-customization .uicb-valname {
  font-size: var(--fs-xs);
  color: var(--color-grey-400);
}

/* --- theme tile (Studio Appearance: light / dark mode thumbs).
   Row layout: label left · thumbs in the right corner, each captioned
   below (Camila, agentation 2026-08-04). --- */
.p-capability--ui-customization .uicb--theme {
  flex-direction: row;
  align-items: center;
}
.p-capability--ui-customization .uicb--theme .uicb-tile__lbl {
  margin-right: auto;
  align-self: flex-start;
}
.p-capability--ui-customization .uicb-modes {
  display: flex;
  gap: 12px;
}
.p-capability--ui-customization .uicb-modeopt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.p-capability--ui-customization .uicb-modeopt .uicb-valname { color: var(--color-grey-400); }
.p-capability--ui-customization .uicb-modeopt .uicb-modethumb.is-on + .uicb-valname { color: var(--color-grey-600); }
.p-capability--ui-customization .uicb-modethumb {
  width: 54px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
  transition: box-shadow 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}
.p-capability--ui-customization .uicb-modethumb--light { background: var(--color-white); }
.p-capability--ui-customization .uicb-modethumb--dark { background: var(--color-off-black); border-color: var(--color-off-black); }
.p-capability--ui-customization .uicb-modethumb.is-on {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-blue-500) 30%, transparent);
}
.p-capability--ui-customization .uicb-modethumb__bar {
  width: 70%;
  height: 5px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--ui-customization .uicb-modethumb--dark .uicb-modethumb__bar { background: var(--color-grey-600); }
.p-capability--ui-customization .uicb-modethumb__btn {
  width: 45%;
  height: 8px;
  border-radius: 999px;
  background: var(--color-blue-500);
}


.p-capability--ui-customization .uicb-bento.is-dark .uicb-phone {
  background: var(--color-off-black);
  border-color: var(--color-off-black);
}
.p-capability--ui-customization .uicb-bento.is-dark .uicb-phone__notch { background: var(--color-grey-600); }
.p-capability--ui-customization .uicb-bento.is-dark .uicb-brand__word,
.p-capability--ui-customization .uicb-bento.is-dark .uicb-phone__title { color: var(--color-white); }
.p-capability--ui-customization .uicb-bento.is-dark .uicb-bar { background: var(--color-grey-600); }
.p-capability--ui-customization .uicb-phone,
.p-capability--ui-customization .uicb-phone__notch,
.p-capability--ui-customization .uicb-brand__word,
.p-capability--ui-customization .uicb-phone__title,
.p-capability--ui-customization .uicb-bar {
  transition-property: background-color, border-color, color;
  transition-duration: 0.45s;
  transition-timing-function: var(--ease-out-expo);
}

/* --- grid placement --- */
.p-capability--ui-customization .uicb--logo { grid-area: logo; }
.p-capability--ui-customization .uicb--color { grid-area: color; }
.p-capability--ui-customization .uicb--type { grid-area: type; }
.p-capability--ui-customization .uicb--shape { grid-area: shape; }
.p-capability--ui-customization .uicb--theme { grid-area: theme; }

/* --- narrow canvas: the screen leads, theme/layout configs step aside; the
   phone keeps its exact 200/424 aspect ratio at every size --- */
@media (max-width: 767.98px) {
  .p-capability--ui-customization .uicb--theme { display: none; }
  .p-capability--ui-customization .uicb-preview { padding: 20px; height: 340px; }
}

/* reduced motion: no transitions, the SSR brand stays put */
@media (prefers-reduced-motion: reduce) {
  .p-capability--ui-customization .uicb-bento,
  .p-capability--ui-customization .uicb-bento * {
    transition: none !important;
    animation: none !important;
  }
  .p-capability--ui-customization .uicb-ctrl:hover { transform: none; }
}

/* ============================================================
   ONE BRAND, EVERY SURFACE (G14 — show more product). The same
   sample brand rendered across the three surfaces Incode ships:
   native mobile · web · embedded. Three EQUAL-dimension G13
   frames (white/grey ground, dot-grid canvas, grey skeleton,
   ONE blue accent), so the page's most-repeated promise (F2) is
   shown, not just stated. Scoped to the page modifier; tokens
   only. G12: identical frame dims + one-line text zones.
   ============================================================ */
.p-capability--ui-customization .uics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .p-capability--ui-customization .uics-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}

.p-capability--ui-customization .uics-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* the equal-size frame — identical dims across all three (G12) */
.p-capability--ui-customization .uics-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 22px;
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  background-color: var(--color-grey-50);
  background-image: radial-gradient(color-mix(in oklab, var(--color-grey-200) 46%, transparent) 1px, transparent 1px);
  background-size: 15px 15px;
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}
.p-capability--ui-customization .uics-card:hover .uics-frame {
  border-color: color-mix(in oklab, var(--color-blue) 25%, transparent);
}

.p-capability--ui-customization .uics-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--color-grey-600);
}
.p-capability--ui-customization .uics-card__line {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--color-grey-500);
}

/* shared skeleton bars for the surface mocks */
.p-capability--ui-customization .uics-bar {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--ui-customization .uics-bar--sm { height: 5px; }
.p-capability--ui-customization .uics-bar--w40 { width: 40%; }
.p-capability--ui-customization .uics-bar--w50 { width: 50%; }
.p-capability--ui-customization .uics-bar--w55 { width: 55%; }
.p-capability--ui-customization .uics-bar--w60 { width: 60%; }
.p-capability--ui-customization .uics-bar--w70 { width: 70%; }

/* shared brand token (mark + word) — the one thing that stays the
   same across every surface */
.p-capability--ui-customization .uics-brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.p-capability--ui-customization .uics-mark {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--color-blue);
}
.p-capability--ui-customization .uics-mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  border: 1.5px solid var(--color-white);
}
.p-capability--ui-customization .uics-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--track-tight);
  color: var(--color-grey-600);
}
.p-capability--ui-customization .uics-cta {
  width: 82%;
  padding: 7px 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--color-blue);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 600;
}
.p-capability--ui-customization .uics-oval {
  width: 46%;
  aspect-ratio: 3 / 4;
  border-radius: 999px;
  border: 2px solid var(--color-blue-200);
  background: color-mix(in oklab, var(--color-blue-100) 60%, var(--color-white));
}
.p-capability--ui-customization .uics-idcard {
  width: 80%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  border: 1px solid var(--color-grey-200);
  background:
    radial-gradient(circle at 22% 32%, color-mix(in oklab, var(--color-grey-200) 70%, transparent) 0 14%, transparent 15%),
    linear-gradient(color-mix(in oklab, var(--color-grey-100) 60%, var(--color-white)), color-mix(in oklab, var(--color-grey-100) 60%, var(--color-white)));
}

/* mobile — the branded flow inside a phone */
.p-capability--ui-customization .uics-phone {
  height: 94%;
  max-height: 244px;
  aspect-ratio: 200 / 424;
  display: flex;
  flex-direction: column;
  padding: 9px 9px 11px;
  border-radius: 22px;
  border: 1px solid var(--color-grey-200);
  background: var(--color-white);
}
.p-capability--ui-customization .uics-phone__notch {
  align-self: center;
  width: 30%;
  height: 4px;
  border-radius: 999px;
  background: var(--color-grey-200);
  margin-bottom: 9px;
}
.p-capability--ui-customization .uics-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.p-capability--ui-customization .uics-screen .uics-oval { margin-top: 2px; }
.p-capability--ui-customization .uics-screen .uics-cta { margin-top: auto; }

/* web — the same brand on a browser verification page */
.p-capability--ui-customization .uics-browser {
  width: 100%;
  max-width: 296px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-grey-200);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-white);
}
.p-capability--ui-customization .uics-browser__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-grey-50);
}
.p-capability--ui-customization .uics-tl {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-capability--ui-customization .uics-browser__addr {
  margin-left: 6px;
  flex: 1;
  max-width: 62%;
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
}
.p-capability--ui-customization .uics-browser__body {
  padding: 18px 16px 20px;
  display: grid;
  place-items: center;
  background: var(--color-grey-50);
}
.p-capability--ui-customization .uics-webcard {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 15px 14px;
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  background: var(--color-white);
}

/* embedded — the branded widget dropped into a host product */
.p-capability--ui-customization .uics-host {
  position: relative;
  width: 100%;
  max-width: 296px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-grey-200);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-white);
}
.p-capability--ui-customization .uics-host__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-grey-50);
}
.p-capability--ui-customization .uics-host__logo {
  width: 34px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-capability--ui-customization .uics-host__links {
  display: flex;
  gap: 8px;
}
.p-capability--ui-customization .uics-host__links i {
  width: 20px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--ui-customization .uics-host__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 14px;
}
.p-capability--ui-customization .uics-widget {
  position: absolute;
  right: 13px;
  bottom: 13px;
  width: 56%;
  max-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 13px 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--color-blue-200);
  background: var(--color-white);
}
.p-capability--ui-customization .uics-widget .uics-cta { width: 100%; }

/* ============================================================
   TOKENIZATION — the schematic TOKEN GRAPH (round-3 · Nacim:
   "una visualización del token graph un poco interactiva, que
   la gente vea cómo se manejan los tokens dentro de Incode").
   A few brand inputs (primary color · brand font · corner
   radius) become DERIVED design tokens that paint every themed
   component. Generic role token names only. FINAL ART (Camila
   2026-08-04): the graph rides the same Figma canvas as the walk
   cards (grey-50 ground + blue-100 radial from the top edge,
   grey-100 hairline, radius 24) and every node is a flat white
   hairline card floating on it — no dot-grid, no dashed borders,
   no heavy shadow. A little interactive: it auto-steps through
   the three lanes, and hovering/focusing an input lights just
   that path (JS toggles .is-lit / .is-dim). Tokens only; scoped
   to the page modifier.
   Behavior: /js/behaviors/ui-customization-tokens.js.
   ============================================================ */
.p-capability--ui-customization .cap-tokens {
  border-top: 1px solid var(--color-border-light);
  background: var(--color-background);
}

.p-capability--ui-customization .uict {
  --uict-accent: var(--color-blue-500);
  --uict-rail: var(--color-grey-200);
  position: relative;
  margin-top: 40px;
  padding: 26px;
  border: 1px solid var(--color-grey-100);
  border-radius: 24px;
  background:
    radial-gradient(142% 100% at 50% 0%, color-mix(in oklab, var(--color-blue-100) 80%, transparent), transparent 100%),
    var(--color-grey-50);
}
@media (min-width: 768px) {
  .p-capability--ui-customization .uict { padding: 34px 40px; }
}

/* --- the switching graph (Camila 2026-08-05, playground variant C1):
   one source value, drawn bezier edges with a flowing current, four chip
   slots, the Incode-default phone. HTML nodes are %-positioned in the
   same space as the 1000×380 viewBox (preserveAspectRatio=none). --- */
.p-capability--ui-customization .uict-g {
  position: relative;
  aspect-ratio: 1000 / 380;
}
.p-capability--ui-customization .uict-g__edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.p-capability--ui-customization .uict-g__edges path {
  fill: none;
  stroke: var(--uict-rail);
  stroke-width: 1.5;
}
.p-capability--ui-customization .uict-g__edges g {
  transition: opacity 0.28s ease;
}
.p-capability--ui-customization .uict-g__flow {
  stroke: var(--uict-accent);
  stroke-dasharray: 3 130;
  stroke-linecap: round;
  animation: uict-flow 2.6s linear infinite;
}
@keyframes uict-flow {
  to { stroke-dashoffset: -133; }
}
.p-capability--ui-customization .uict-g[data-rows="4"] .uict-g__rows3,
.p-capability--ui-customization .uict-g[data-rows="3"] .uict-g__rows4 { opacity: 0; }

.p-capability--ui-customization .uict-g__node {
  position: absolute;
  transform: translate(-50%, -50%);
}

/* the source value card (button — click advances the lane) */
.p-capability--ui-customization .uict-g__src {
  left: 13.5%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--color-grey-100);
  border-radius: 14px;
  background: var(--color-white);
  appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.28s ease, box-shadow 0.3s var(--ease-out-expo);
}
.p-capability--ui-customization .uict-g__src:hover {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--uict-accent) 10%, transparent);
}
.p-capability--ui-customization .uict-g__src:focus-visible {
  outline: 2px solid var(--uict-accent);
  outline-offset: 2px;
}
.p-capability--ui-customization .uict-g__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--color-grey-600);
  white-space: nowrap;
}
.p-capability--ui-customization .uict-g__glyph--swatch {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--uict-accent);
}
.p-capability--ui-customization .uict-g__glyph--aa {
  width: 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1;
  text-align: center;
  color: var(--color-grey-600);
}
.p-capability--ui-customization .uict-g__glyph--shape {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 2px solid color-mix(in oklab, var(--uict-accent) 55%, var(--color-grey-200));
  background: color-mix(in oklab, var(--uict-accent) 12%, var(--color-grey-100));
}

/* token chips — four slots; tops are data-rows-driven so a 3-token lane
   re-seats rows 1-3 and hides the 4th */
.p-capability--ui-customization .uict-g__tok {
  left: 50.8%;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--color-grey-100);
  background: var(--color-white);
  font-size: var(--fs-xs);
  color: var(--color-grey-500);
  white-space: nowrap;
  transition: opacity 0.28s ease, top 0.28s ease;
}
.p-capability--ui-customization .uict-g__tok--1 { top: 25.2%; }
.p-capability--ui-customization .uict-g__tok--2 { top: 41.8%; }
.p-capability--ui-customization .uict-g__tok--3 { top: 58.4%; }
.p-capability--ui-customization .uict-g__tok--4 { top: 75%; }
.p-capability--ui-customization .uict-g[data-rows="3"] .uict-g__tok--1 { top: 30.5%; }
.p-capability--ui-customization .uict-g[data-rows="3"] .uict-g__tok--2 { top: 50%; }
.p-capability--ui-customization .uict-g[data-rows="3"] .uict-g__tok--3 { top: 69.5%; }
.p-capability--ui-customization .uict-g[data-rows="3"] .uict-g__tok--4 { opacity: 0; visibility: hidden; }

/* the lane-swap fade (JS toggles .is-swap around the content switch) */
.p-capability--ui-customization .uict-g.is-swap .uict-g__src,
.p-capability--ui-customization .uict-g.is-swap .uict-g__tok { opacity: 0; }

/* the phone node */
.p-capability--ui-customization .uict-g__phone {
  left: 86%;
  top: 50%;
  width: 13.2%;
  min-width: 96px;
}

/* --- the screen every token lands on ---
   The 5th-bullet native phone (tokens-phone.svg — surf-native re-themed
   to the Incode default: blue + Incode logo, backdrop stripped). It scales
   with the graph but ALWAYS keeps the 187/403 viewBox ratio; drop-shadow
   follows the device's rounded alpha. Highlight rings (.uict-pv__hl) sit
   at the SVG's measured getBBox coords ÷ 187×403, and light with the lane
   that repaints that part. */
.p-capability--ui-customization .uict-pv__img {
  display: block;
  width: 100%;
  height: auto;
}
.p-capability--ui-customization .uict-pv__hl {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  border-radius: 8px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--uict-accent) 40%, transparent);
  transition: opacity 0.4s var(--ease-out-expo);
}
.p-capability--ui-customization .uict-pv__hl--title { left: 9%; top: 14.4%; width: 81.5%; height: 8.9%; }
.p-capability--ui-customization .uict-pv__hl--disc  { left: 15.5%; top: 36.3%; width: 68.5%; height: 31.8%; border-radius: 50%; }
.p-capability--ui-customization .uict-pv__hl--cta   { left: 6.1%; top: 88.4%; width: 87.3%; height: 6.6%; border-radius: 6px; }

.p-capability--ui-customization .uict-pv__hl.is-lit { opacity: 1; }

/* --- mobile: no room for the graph — stack value card → chips → phone;
   the drawn edges disappear, the switching keeps working --- */
@media (max-width: 767.98px) {
  .p-capability--ui-customization .uict { padding: 20px; }
  .p-capability--ui-customization .uict-g {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .p-capability--ui-customization .uict-g__edges { display: none; }
  .p-capability--ui-customization .uict-g__node {
    position: static;
    transform: none;
  }
  .p-capability--ui-customization .uict-g[data-rows="3"] .uict-g__tok--4 { display: none; }
  .p-capability--ui-customization .uict-g__phone {
    width: min(58%, 220px);
    min-width: 0;
    margin-top: 8px;
    /* stays positioned for the rings, but the desktop 86%/50% offsets
       must not apply as relative shifts */
    position: relative;
    left: auto;
    top: auto;
  }
}

/* reduced motion: no autoplay (JS), no transitions, no flowing current —
   the graph rests at the SSR color lane */
@media (prefers-reduced-motion: reduce) {
  .p-capability--ui-customization .uict,
  .p-capability--ui-customization .uict * { transition: none !important; }
  .p-capability--ui-customization .uict-g__flow { animation: none !important; }
}

/* --- scene wrapper: the agent-built illustration components mount bare
   (they carry their own canvas chrome); wrapper only reserves the slot --- */
.p-capability--ui-customization .uic-scene { min-width: 0; }
.p-capability--ui-customization .uic-scene__art {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   WALK — sol-how port overrides. The section rides solution.css
   verbatim inside the .p-solution wrapper; these rules cover ONLY
   the two structural deviations vs customer-onboarding:
   1. no traveling phone → the stage never waits for is-how-near
   2. the stage holds the Figma cards (own canvas baked into the
      SVGs) → the sol stage card chrome comes off, deck fills
   Plus: 3 steps instead of 4 → the pinned corridor shortens
   proportionally (380vh × 3/4 ≈ 285vh).
   ============================================================ */
.p-solution .uicw-flow { background: var(--color-white); }
.p-solution .uicw-flow.sol-flow-wrap.is-float .sol-how { height: 475vh; }
.p-solution .uicw-flow .sol-how__stage {
  padding: 0;
  border: 0;
  background: none;
  min-height: 0;
  width: 100%;
}
.p-solution .uicw-flow.sol-flow-wrap.is-float .sol-how__stage,
.p-solution .uicw-flow.sol-flow-wrap.is-float.is-how-near .sol-how__stage {
  opacity: 1;
  transform: translateY(24px);
  transition: opacity 0.6s ease;
}
.p-solution .uicw-flow .uicw-deck { width: 100%; }
/* the frame card: canvas + phone + panel as separate layers so each step's
   entrance choreographs — the phone settles from a slight zoom to full
   size, THEN the floating panel rises in (Camila, 2026-08-04). Canvas is
   the Figma card recipe verbatim: grey-50 ground, blue-100 radial from the
   top edge at 80%, grey-100 hairline, radius 24. Layer positions are the
   Figma coordinates as percentages of the 542×459 card. */
.p-solution .uicw-flow .uicw-card {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 542 / 459;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--color-grey-100);
  background:
    radial-gradient(142% 100% at 50% 0%, color-mix(in oklab, var(--color-blue-100) 80%, transparent), transparent 100%),
    var(--color-grey-50);
  object-fit: initial;
}
.p-solution .uicw-flow .uicw-card__phone,
.p-solution .uicw-flow .uicw-card__panel {
  position: absolute;
  height: auto;
}
/* per-scene placement: Figma node coords minus each export's shadow-padding
   offset (extracted from the SVG), ÷ the 542×459 card. Exports are context-
   stripped (no backdrop/canvas rects) so layers sit transparent. */
.p-solution .uicw-flow .uicw-card--logo .uicw-card__phone { left: 22.35%; top: 23.75%; width: 55.35%; }
.p-solution .uicw-flow .uicw-card--logo .uicw-card__panel { left: 8.49%; top: 61.44%; width: 51.85%; }
.p-solution .uicw-flow .uicw-card--colors .uicw-card__phone { left: 32.84%; top: 5.88%; width: 34.50%; }
.p-solution .uicw-flow .uicw-card--colors .uicw-card__panel { left: 53.69%; top: 30.72%; width: 42.80%; }
.p-solution .uicw-flow .uicw-card--type .uicw-card__phone { left: 55.28%; top: 5.88%; width: 34.50%; }
.p-solution .uicw-flow .uicw-card--type .uicw-card__panel { left: 7.56%; top: 22.49%; width: 53.14%; }

/* choreography: zoom-out settle for the phone, delayed rise for the panel */
.p-solution .uicw-flow .uicw-card__phone {
  opacity: 0;
  transform: scale(1.16);
  transform-origin: 50% 30%;
  transition:
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease;
}
.p-solution .uicw-flow .uicw-card.is-active .uicw-card__phone {
  opacity: 1;
  transform: scale(1);
}
.p-solution .uicw-flow .uicw-card__panel {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-solution .uicw-flow .uicw-card.is-active .uicw-card__panel {
  opacity: 1;
  transform: none;
  transition-delay: 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .p-solution .uicw-flow .uicw-card__phone,
  .p-solution .uicw-flow .uicw-card__panel {
    transition: none !important;
    transform: none !important;
  }
}

/* --- step 03 live-type overlays: the SVG's font-name row text and the
   phone title were removed from the exports; these HTML twins sit at the
   exact Figma coordinates and cycle through real webfonts (JS), so the
   selected face visibly lands on the screen beside it. Sizes ride cqw
   (card width / 100) so they scale with the art. --- */
.p-solution .uicw-flow .uicw-type-row {
  position: absolute;
  left: 13.53%;
  top: 33.82%;
  width: 41.21%;
  height: 7.84%;
  display: flex;
  align-items: center;
  padding-left: 1.78cqw;
  gap: 1.35cqw;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.p-solution .uicw-flow .uicw-card.is-active .uicw-type-row {
  opacity: 1;
  transition-delay: 0.5s;
}
.p-solution .uicw-flow .uicw-type-aa {
  font-size: 2.4cqw;
  font-weight: 500;
  line-height: 1;
  color: var(--color-off-black);
}
.p-solution .uicw-flow .uicw-type-name {
  font-size: 2.58cqw;
  font-weight: 500;
  line-height: 1;
  color: var(--color-off-black);
}
.p-solution .uicw-flow .uicw-type-title {
  position: absolute;
  left: 57.46%;
  top: 19.2%;
  width: 30.13%;
  text-align: center;
  font-size: 2.21cqw;
  line-height: 1.25;
  font-weight: 600;
  color: var(--color-off-black);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.p-solution .uicw-flow .uicw-card.is-active .uicw-type-title {
  opacity: 1;
  transition-delay: 0.55s;
}
@media (prefers-reduced-motion: reduce) {
  .p-solution .uicw-flow .uicw-type-row,
  .p-solution .uicw-flow .uicw-type-title { transition: none !important; opacity: 1; }
}

/* --- coming-soon chip (step 04) + placeholder stage note --- */
.p-solution .uicw-flow .uicw-soon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--color-blue-500) 35%, transparent);
  background: color-mix(in oklab, var(--color-blue-100) 55%, var(--color-white));
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--color-blue-500);
  white-space: nowrap;
}
.p-solution .uicw-flow .uicw-soon--stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* --- step 03: the document-card texts cycle with the typeface too --- */
.p-solution .uicw-flow .uicw-type-doc {
  position: absolute;
  width: 16.56%;
  display: flex;
  flex-direction: column;
  gap: 0.35cqw;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.p-solution .uicw-flow .uicw-card.is-active .uicw-type-doc {
  opacity: 1;
  transition-delay: 0.55s;
}
.p-solution .uicw-flow .uicw-type-doc--id { left: 68.92%; top: 57.6%; }
.p-solution .uicw-flow .uicw-type-doc--pass { left: 68.92%; top: 72.85%; }
.p-solution .uicw-flow .uicw-type-doc b {
  font-weight: 700;
  font-size: 1.5cqw;
  line-height: 1.2;
  color: var(--color-off-black);
}
.p-solution .uicw-flow .uicw-type-doc span {
  font-size: 1.3cqw;
  line-height: 1.3;
  color: var(--color-grey-500);
}
@media (prefers-reduced-motion: reduce) {
  .p-solution .uicw-flow .uicw-type-doc { transition: none !important; opacity: 1; }
}

/* --- step 04 "Make it feel like yours": copy-override choreography.
   Default = the phone alone. Then each editor card (+ its connector) rises
   in, its status icon spins while the copy rewrites (mirrored live on the
   phone), and settles into a check. States are classes the stepper JS
   walks: is-p1 → is-p1-done → is-p2 → is-p2-done. Positions are Figma
   coords ÷ 542×458 minus export shadow offsets. --- */
.p-solution .uicw-flow .uicw-card--polish .uicw-card__phone { left: 32.77%; top: 5.9%; width: 34.5%; }
.p-solution .uicw-flow .uicw-polish__vec,
.p-solution .uicw-flow .uicw-polish__editor,
.p-solution .uicw-flow .uicw-polish__text,
.p-solution .uicw-flow .uicw-polish__status {
  position: absolute;
  height: auto;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-solution .uicw-flow .uicw-polish__editor { transform: translateY(10px); }
.p-solution .uicw-flow .uicw-polish__editor--title { left: 3.69%; top: 26.86%; width: 42.80%; }
.p-solution .uicw-flow .uicw-polish__editor--btn { left: 60.52%; top: 72.05%; width: 35.98%; }
.p-solution .uicw-flow .uicw-polish__vec--title { left: 25.05%; top: 21.0%; width: 18.08%; }
.p-solution .uicw-flow .uicw-polish__vec--btn { left: 50.41%; top: 84.17%; width: 12.92%; }
.p-solution .uicw-flow .uicw-polish__text {
  display: flex;
  align-items: center;
  height: 7.86%;
  font-size: 2.58cqw;
  font-weight: 500;
  color: var(--color-off-black);
  white-space: nowrap;
}
.p-solution .uicw-flow .uicw-polish__text--title { left: 11.43%; top: 36.75%; }
.p-solution .uicw-flow .uicw-polish__text--btn { left: 68.26%; top: 81.94%; }
.p-solution .uicw-flow .uicw-polish__status {
  width: 2.95cqw;
  height: 2.95cqw;
}
.p-solution .uicw-flow .uicw-polish__status--title { left: 35.80%; top: 38.93%; }
.p-solution .uicw-flow .uicw-polish__status--btn { left: 85.80%; top: 84.13%; }
.p-solution .uicw-flow .uicw-polish__status svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.p-solution .uicw-flow .uicw-polish__loader {
  animation: uicw-polish-spin 0.9s linear infinite;
  opacity: 0;
}
.p-solution .uicw-flow .uicw-polish__check {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes uicw-polish-spin { to { transform: rotate(360deg); } }

/* phase 1: title editor in, loader running */
.p-solution .uicw-flow .uicw-card--polish.is-p1 .uicw-polish__editor--title,
.p-solution .uicw-flow .uicw-card--polish.is-p1 .uicw-polish__vec--title,
.p-solution .uicw-flow .uicw-card--polish.is-p1 .uicw-polish__text--title,
.p-solution .uicw-flow .uicw-card--polish.is-p1 .uicw-polish__status--title {
  opacity: 1;
  transform: none;
}
.p-solution .uicw-flow .uicw-card--polish.is-p1:not(.is-p1-done) .uicw-polish__status--title .uicw-polish__loader { opacity: 1; }
.p-solution .uicw-flow .uicw-card--polish.is-p1-done .uicw-polish__status--title .uicw-polish__check { opacity: 1; transform: scale(1); }

/* phase 2: button editor */
.p-solution .uicw-flow .uicw-card--polish.is-p2 .uicw-polish__editor--btn,
.p-solution .uicw-flow .uicw-card--polish.is-p2 .uicw-polish__vec--btn,
.p-solution .uicw-flow .uicw-card--polish.is-p2 .uicw-polish__text--btn,
.p-solution .uicw-flow .uicw-card--polish.is-p2 .uicw-polish__status--btn {
  opacity: 1;
  transform: none;
}
.p-solution .uicw-flow .uicw-card--polish.is-p2:not(.is-p2-done) .uicw-polish__status--btn .uicw-polish__loader { opacity: 1; }
.p-solution .uicw-flow .uicw-card--polish.is-p2-done .uicw-polish__status--btn .uicw-polish__check { opacity: 1; transform: scale(1); }

/* the phone's live texts (always present — they ARE the screen copy) */
.p-solution .uicw-flow .uicw-polish__ptitle {
  position: absolute;
  left: 34.96%;
  top: 19.3%;
  width: 30.13%;
  text-align: center;
  font-size: 2.3cqw;
  font-weight: 600;
  color: var(--color-off-black);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.p-solution .uicw-flow .uicw-polish__pbtn {
  position: absolute;
  left: 34.96%;
  top: 78.46%;
  width: 30.13%;
  height: 5.84%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2cqw;
  font-weight: 600;
  color: var(--color-white);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.p-solution .uicw-flow .uicw-card--polish.is-active .uicw-polish__ptitle,
.p-solution .uicw-flow .uicw-card--polish.is-active .uicw-polish__pbtn {
  opacity: 1;
  transition-delay: 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .p-solution .uicw-flow .uicw-polish__vec,
  .p-solution .uicw-flow .uicw-polish__editor,
  .p-solution .uicw-flow .uicw-polish__text,
  .p-solution .uicw-flow .uicw-polish__status,
  .p-solution .uicw-flow .uicw-polish__ptitle,
  .p-solution .uicw-flow .uicw-polish__pbtn { transition: none !important; }
  .p-solution .uicw-flow .uicw-polish__loader { animation: none !important; }
}

/* --- step 05 "Live on every surface": ONE persistent frame, the content
   moves (Camila). 1→2: the phone never moves — the mobile browser wipes up
   from the bottom edge inside the same frame (clip-path). 2→3 SMART-ANIMATE,
   matched to Camila's Figma prototype recording (2026-08-05, node 39-886):
   the page CONTENT never scales — both browser SVGs render it at the exact
   same size (0.1845 cqw/svg-unit in each) — only the solid white stage
   morphs in width while the layers crossfade. The content sits lower in the
   desktop layer (taller top chrome: logo +5.2 / disc +7.1 / CTA +8.3 cqw),
   so both layers tween a shared 7cqw vertical delta in lockstep (mobile
   0 → +7 fading out, desktop −7 → 0 fading in) and the matching elements
   travel together; the crossfade absorbs the ±1.3cqw residual. Timing
   matches the prototype's snap (~0.65s frame morph, ≤0.32s fades). States
   accumulate: is-s1 → +is-s2 → +is-s3. Widths in cqw (card units) so
   layers keep their true size while the stage stretches around them. --- */
.p-solution .uicw-flow .uicw-surf-stage {
  position: absolute;
  left: 32.82%;
  top: 5.9%;
  width: 34.5%;
  height: 87.99%;
  overflow: hidden;
  border-radius: 5.2cqw;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-solution .uicw-flow .uicw-card--surfaces.is-s1 .uicw-surf-stage {
  opacity: 1;
  transform: none;
}
.p-solution .uicw-flow .uicw-card--surfaces.is-s3 .uicw-surf-stage {
  left: 2.21%;
  top: 6.44%;
  width: 95.57%;
  border-radius: 1.8cqw;
}
/* solid ground for the crossfade (round 4) — but inset to hug the window
   art (4.43cqw corners, slightly shorter than the stage: 0.17cqw at
   mobile, 0.9cqw at desktop), so no white ever peeks past the screens
   (Camila round 6). It sits behind the layers and only shows mid-morph. */
.p-solution .uicw-flow .uicw-surf-stage::before {
  content: "";
  position: absolute;
  inset: 0 0.3cqw 0.5cqw;
  border-radius: 4.2cqw;
  background: var(--color-white);
  transition: inset 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-solution .uicw-flow .uicw-card--surfaces.is-s3 .uicw-surf-stage::before {
  inset: 0 0.2cqw 1.2cqw;
}
.p-solution .uicw-flow .uicw-surf {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  /* the layers keep their true size while the stage stretches around them
     (base.css img { max-width: 100% } would cap them to the morphing stage) */
  max-width: none;
}
.p-solution .uicw-flow .uicw-surf--native { width: 34.5cqw; }
/* fully covered by the mobile browser when s3 fires — drop it instantly so
   it never ghosts through the crossfade */
.p-solution .uicw-flow .uicw-card--surfaces.is-s3 .uicw-surf--native { visibility: hidden; }
.p-solution .uicw-flow .uicw-surf--mweb {
  width: 34.5cqw;
  clip-path: inset(100% 0 0 0);
  transition:
    clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    /* dissolve = 0.3s linear, straight from the prototype's exported keyframes */
    opacity 0.3s linear;
}
.p-solution .uicw-flow .uicw-card--surfaces.is-s2 .uicw-surf--mweb { clip-path: inset(0 0 0 0); }
.p-solution .uicw-flow .uicw-card--surfaces.is-s3 .uicw-surf--mweb {
  transform: translate(-50%, 7cqw);
  opacity: 0;
}
.p-solution .uicw-flow .uicw-surf--desktop {
  width: 95.57cqw;
  transform: translate(-50%, -7cqw);
  opacity: 0;
  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s linear;
}
.p-solution .uicw-flow .uicw-card--surfaces.is-s3 .uicw-surf--desktop {
  transform: translate(-50%, 0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .p-solution .uicw-flow .uicw-surf,
  .p-solution .uicw-flow .uicw-surf-stage,
  .p-solution .uicw-flow .uicw-surf-stage::before { transition: none !important; }
}