/* /start Use Cases section + the light hero card (Oct 28, Amar's role use-case guide and ui-reference.png).
   Brand locked: ink, gold (small areas), gold 300, lavender (small chips only), mist, slate, white; Cabinet Grotesk + Manrope;
   4px scale, 24px outer corners, pill buttons. Markup: views/v2/start/use-cases.ejs, uc-assets.ejs, hero-lite.ejs.
   Behaviour: public/v2/start/use-cases.js. Tokens come from .sr (start.css). */

/* ---------- section ---------- */
.uc { background: var(--mist); }
.uc__box { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 24px; align-items: start; }
.uc__list { display: flex; flex-direction: column; gap: 4px; }
.uc__tab { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 12px 8px 16px;
  border: 0; border-radius: 16px; background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  font: 700 15px/20px Manrope, Arial, sans-serif; transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .16s var(--ease); }
.uc__nm { min-width: 0; text-wrap: balance; }
.uc__tg { font: 600 12px/16px Manrope, Arial, sans-serif; color: var(--slate); white-space: nowrap; }
.uc__tab svg { color: var(--ink); opacity: 0; transform: translateX(-4px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.uc__tab[aria-selected="true"] { background: #fff; box-shadow: var(--sh-sm), inset 0 0 0 1px var(--line); }
.uc__tab[aria-selected="true"] svg { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .uc__tab:not([aria-selected="true"]):hover { background: rgba(255,255,255,.7); } }
.uc__tab:active { transform: scale(.98); }
.uc__tab:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

.uc__panels { display: grid; min-width: 0; }
.uc__p { min-width: 0; padding: 24px; border-radius: 24px; background: #fff; box-shadow: var(--sh-sm), 0 0 0 1px var(--line); }
.uc__p + .uc__p { margin-top: 16px; } /* no JS: every use case, one under the other */
.uc--js .uc__p { grid-area: 1 / 1; margin-top: 0; visibility: hidden; opacity: 0; }
.uc--js .uc__p.is-on { visibility: visible; opacity: 1; }
/* cross-fade only after the first selection has settled (no flash of stacked panels on load) */
.uc--ready .uc__p { transition: opacity .22s var(--ease), visibility 0s linear .22s; }
.uc--ready .uc__p.is-on { transition: opacity .22s var(--ease), visibility 0s; }
.uc__p:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.uc__hd h3 { margin: 0; font: 700 24px/30px var(--disp); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.uc__hd p { margin: 4px 0 0; max-width: 62ch; font: 400 16px/24px Manrope, Arial, sans-serif; color: var(--slate); }
.uc__bd { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 24px; margin-top: 16px; align-items: stretch; }
.uc__stage { container-type: inline-size; position: relative; display: grid; place-items: center; min-width: 0; padding: 16px 12px; border-radius: 16px; background: var(--mist); overflow: hidden; }
/* Nov 1: the prompt box is gone, so the products column fills the stage's height: bigger marks and type, hairline dividers, the group centred (no strip of empty space under it) */
.uc__side { display: grid; align-content: center; min-width: 0; }
.uc__prods { list-style: none; margin: 0; padding: 0; display: grid; }
.uc__prods li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; padding: 20px 0; }
.uc__prods li + li { border-top: 1px solid var(--lav); }
.uc__prods img { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; }
.uc__prods a { display: inline-block; font: 800 17px/24px Manrope, Arial, sans-serif; color: var(--ink); text-decoration: none; }
@media (hover: hover) { .uc__prods a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.uc__prods small { display: block; margin-top: 2px; font: 500 15px/22px Manrope, Arial, sans-serif; color: var(--slate); text-wrap: pretty; }

/* ---------- asset scene: 400 x 324, scaled to its stage (container queries; zoom keeps the layout box in step) ---------- */
.ux-fig { position: relative; margin: 0; display: grid; place-items: center; width: 100%; }
.ux { position: relative; flex: none; width: 400px; height: 324px; font: 600 13px/18px Manrope, Arial, sans-serif; color: var(--ink); text-align: left; }
@container (min-width: 500px) { .uc__stage .ux { zoom: 1.12; } }
@container (min-width: 600px) { .uc__stage .ux { zoom: 1.25; } }
@container (max-width: 399px) { .uc__stage .ux { zoom: .9; } }
@container (max-width: 359px) { .uc__stage .ux { zoom: .82; } }
@container (max-width: 327px) { .uc__stage .ux { zoom: .75; } }
@container (max-width: 299px) { .uc__stage .ux { zoom: .69; } }
@container (max-width: 275px) { .uc__stage .ux { zoom: .63; } }
.ux :where(p, ul, ol, li, dl, dd, dt) { margin: 0; padding: 0; list-style: none; }
.ux em { font-style: normal; }
.ux b { font-weight: 800; }
.ux img { display: block; }
.ux-pz { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(17,10,51,.82); color: #fff; cursor: pointer; transition: transform .16s var(--ease), opacity .2s var(--ease); }
.ux-pz::after { content: ""; position: absolute; inset: -8px; } /* 44px hit area */
.ux-pz[hidden] { display: none; }
.ux-pz:active { transform: scale(.94); }
.ux-pz:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.ux-pz svg { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.ux-pz .i-play { display: none; fill: currentColor; stroke-width: 1.6; }
.ux-pz[aria-pressed="true"] .i-play { display: block; }
.ux-pz[aria-pressed="true"] .i-pause { display: none; }
.uc__stage .ux-pz { right: -2px; bottom: -6px; }

/* windows */
.ux-w { position: absolute; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: var(--sh-md), 0 0 0 1px var(--line); overflow: hidden; }
.ux-wh { flex: none; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
.ux-wh > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 6px; }
.ux-wh .m { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--slate); }
.ux-wb { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.ux-ap { flex: none; border-radius: 4px; object-fit: contain; }
.ux-bot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--lav); }

/* text and rows */
.ux-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ux-tx { display: grid; min-width: 0; flex: 1; }
.ux-tx b, .ux-tx span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-tx span { font-size: 11px; line-height: 15px; font-weight: 600; color: var(--slate); }
.ux-s { font-size: 11px; line-height: 15px; color: var(--slate); white-space: nowrap; }
.ux-lab { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 16px; font-weight: 800; color: var(--slate); }
.ux-lab svg { color: var(--ink); }
.ux-big .ux-tx b { font-size: 14px; line-height: 19px; }
.ux-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--mist); }
.ux-right { display: flex; justify-content: flex-end; margin-top: auto; }
.ux-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 11px; line-height: 16px; color: var(--slate); }
.ux-foot b { color: var(--ink); }
.ux-more { font-size: 11px; color: var(--slate); }

/* avatars, company marks */
.ux-av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lav); color: var(--ink); font: 800 10px/1 Manrope, Arial, sans-serif; letter-spacing: .02em; }
.ux-av.s { width: 24px; height: 24px; font-size: 9px; }
.ux-av.xs { width: 18px; height: 18px; font-size: 7px; }
.ux-av.l { width: 36px; height: 36px; font-size: 12px; }
.ux-av.g { background: var(--gold); }
.ux-av.m { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ux-co { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ux-wm { flex: none; width: auto; max-width: 112px; object-fit: contain; object-position: left center; }
.ux-co-n { flex: none; display: flex; align-items: center; min-width: 0; }
.ux-txtlogo { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--ink); color: #fff; font: 800 9px/1 Manrope, Arial, sans-serif; }

/* bars (never raw scores) */
.ux-bar { flex: 1; display: block; min-width: 24px; height: 6px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1px rgba(17,10,51,.06); overflow: hidden; }
.ux-bar > i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--ink); transform-origin: left center; }
.ux-bar.g > i { background: var(--gold); }
.ux-bar.v > i { background: var(--lav); box-shadow: inset 0 0 0 1px rgba(52,29,153,.25); }
.ux-bar.r > i { margin-left: auto; transform-origin: right center; }
.ux-trait { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 16px; }
.ux-trait > span:first-child { flex: none; width: 64px; color: var(--slate); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-trait--wide > span:first-child { width: 72px; }
.ux-trait > b { flex: none; font-size: 11px; }

/* chips and buttons */
.ux-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ux-c { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 700 11px/16px Manrope, Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-c.g { background: var(--gold-3); }
.ux-c.o { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ux-c.sm { padding: 1px 6px; font-size: 10px; line-height: 14px; }
.ux-b { flex: none; position: relative; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--ink); color: #fff; font: 800 11px/1 Manrope, Arial, sans-serif; white-space: nowrap; }
.ux-b > span { display: inline-flex; align-items: center; gap: 5px; }
.ux-b .b { display: none; }
.ux-b.l { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.ux-b.sel { box-shadow: inset 0 0 0 1px var(--ink); }
.ux-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ux-btns--col { flex-direction: column; align-items: stretch; margin-top: auto; }
.ux-btns--col .ux-b { justify-content: center; }
/* a pressed button shows its done state: on the finished frame, and once its step lands */
.uc-anim:not(.is-armed) .ux-b[data-fx="press"] .a, .ux-b[data-fx="press"].is-on .a { display: none; }
.uc-anim:not(.is-armed) .ux-b[data-fx="press"] .b, .ux-b[data-fx="press"].is-on .b { display: inline-flex; }
.uc-anim:not(.is-armed) .ux-b[data-fx="press"]:not(.l), .ux-b[data-fx="press"].is-on:not(.l) { background: var(--gold); color: var(--ink); }
.uc-anim:not(.is-armed) .ux-b.sel, .ux-b.sel.is-on { background: var(--ink) !important; color: #fff !important; }
.ux-ok { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.ux-done { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--gold); font-size: 11px; font-weight: 800; }

/* shared pieces */
.ux-cols { display: grid; grid-template-columns: var(--c); gap: 12px; flex: 1; min-height: 0; }
.ux-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ux-pane { padding: 10px; border-radius: 12px; background: var(--mist); }
.ux-list { display: grid; gap: 6px; }
.ux-list > li { padding: 2px 0; }
.ux-list--tight { gap: 4px; }
.ux-sig { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--mist); font-size: 12px; }
.ux-sig > span { margin-left: auto; font-size: 11px; color: var(--slate); }
.ux-steps { display: grid; gap: 8px; }
.ux-steps > li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ux-steps i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 800 10px/1 Manrope, Arial, sans-serif; }
.ux-steps--row { display: flex; gap: 8px; }
.ux-steps--row > li { flex: 1; padding: 8px; border-radius: 10px; background: var(--mist); font-size: 11px; }
.ux-okr { display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 15px; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-okr--row { gap: 6px; }
.ux-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ux-card.is-added { box-shadow: inset 0 0 0 1px var(--ink); }
.ux-card .ux-b { position: absolute; right: 8px; top: 8px; height: 22px; padding: 0 8px; }
.ux-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ux-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ux-grid3 .ux-card { align-items: flex-start; }
.ux-tabs { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--slate); }
.ux-tabs > span { padding: 4px 8px; border-radius: 8px; }
.ux-tabs > span.on { background: var(--mist); color: var(--ink); }
.ux-tabs .ux-b { margin-left: auto; height: 24px; }
.ux-seg { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--slate); }
.ux-seg > span { padding: 4px 8px; }
.ux-vs { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ux-vs > .ux-r { flex: none; }
.ux-mirror { display: grid; gap: 8px; padding: 4px 0; }
.ux-mirror li { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; gap: 8px; }
.ux-mirror li > b { text-align: center; font-size: 11px; }
.ux-mirror li > span { display: flex; }
.ux-guide { display: grid; gap: 6px; }
.ux-guide li { display: grid; grid-template-columns: 24px 72px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--mist); font-size: 12px; }
.ux-guide li > span { color: var(--slate); font-size: 11px; font-weight: 700; }
.ux-guide li > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #fff; }
.ux-guide li.is-so { background: var(--gold-3); }
.ux-guide--3 li { grid-template-columns: 24px minmax(0, 1fr); }
.ux-quote { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 8px; padding: 8px 10px; border-radius: 10px; background: var(--mist); }
.ux-quote > span { font-weight: 700; font-size: 12px; }
.ux-quote > small { grid-column: 2; font-size: 11px; color: var(--slate); }
.ux-neg { display: grid; gap: 6px; }
.ux-neg li { display: grid; grid-template-columns: 24px 72px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; }
.ux-neg li > span { color: var(--slate); font-size: 11px; font-weight: 700; }
.ux-neg li > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--mist); }
.ux-neg li > i.c { background: var(--gold); }
.ux-msg { display: grid; gap: 6px; }
.ux-mh { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.ux-mh img { border-radius: 6px; }
.ux-mh > span { font-size: 11px; color: var(--slate); font-weight: 600; }
.ux-app { padding: 0 4px; border-radius: 4px; background: var(--mist); font-size: 9px; line-height: 14px; font-weight: 800; color: var(--slate); }
.ux-att { display: grid; gap: 8px; margin-left: 30px; padding: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.ux-int b { flex: none; font-size: 12px; }
.ux-mail { display: flex; flex-direction: column; gap: 8px; }
.ux-ask { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--gold-3); font-size: 12px; }
.ux-ask > span { color: var(--ink); font-weight: 600; }
.ux-peek { position: absolute; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #fff; box-shadow: var(--sh-md), 0 0 0 1px var(--line); font-size: 11px; font-weight: 800; }
.ux-tool { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--mist); font-size: 11px; font-weight: 700; }
.ux-ask-u { align-self: flex-end; max-width: 300px; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--mist); font-size: 12px; line-height: 17px; }
.ux-ans { font-size: 12px; font-weight: 600; }
.ux-own { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--mist); }
.ux-own > .ux-r { flex: 1; }
.ux-files { display: grid; gap: 6px; }
.ux-files > li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.ux-files--row { display: flex; gap: 6px; }
.ux-files--row > li { flex: 1; font-size: 11px; }
.ux-facts { display: grid; gap: 6px; }
.ux-facts li { display: grid; grid-template-columns: 24px 56px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; }
.ux-facts li > span { font-size: 11px; color: var(--slate); font-weight: 700; }
.ux-facts li > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-facts--sm li { grid-template-columns: 16px 52px minmax(0, 1fr); padding: 4px 8px; border-radius: 8px; background: var(--mist); }
.ux-task { display: flex; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--mist); font-size: 12px; }
.ux-old { font-size: 12px; color: var(--slate); text-decoration: line-through; text-decoration-color: rgba(91,100,120,.6); }
.ux-new { padding: 6px 10px; border-radius: 10px; background: var(--gold-3); font-size: 12px; font-weight: 700; }
.ux-fields { display: grid; gap: 0; }
.ux-fields > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.ux-fields dt { font-size: 11px; color: var(--slate); font-weight: 700; }
.ux-fields dd { font-size: 12px; font-weight: 700; border-radius: 6px; padding: 0 4px; margin: 0 -4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-fields--sm > div { border: 0; padding: 0 4px; }
.ux-routed { position: absolute; display: flex; align-items: center; gap: 8px; width: 160px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: var(--sh-md), 0 0 0 1px var(--line); }
.ux-src { position: absolute; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--slate); font-weight: 700; }
.ux-wb > .ux-src, .ux-flow .ux-src { position: static; margin-top: auto; }
.ux-flow { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.ux-flow > .ux-w { position: relative; }
.ux-signal { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: var(--sh-md), 0 0 0 1px var(--gold); }
.ux-signal .ux-tx b { font-size: 13px; }
.ux--outreach .ux-signal, .ux--abm-campaign .ux-signal { position: absolute; left: 0; top: 0; width: 400px; }
.ux-conn { display: block; width: 2px; height: 14px; margin: 0 auto; background: var(--lav); transform-origin: top; }
.ux-rule { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--slate); }
.ux-steps-row { display: flex; gap: 6px; }
.ux-steps-row > span { flex: 1; display: grid; padding: 6px 8px; border-radius: 10px; background: var(--mist); font-size: 11px; }
.ux-flow .ux-done { align-self: center; margin-top: 10px; }
.ux-subj { display: flex; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 12px; }
.ux-subj > span { color: var(--slate); font-weight: 700; }
.ux-lines { display: grid; gap: 8px; }
.ux-lines li { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 17px; }
.ux-lines li > span { flex: 1; min-width: 0; }
.ux-match { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--slate); }
.ux-pages { gap: 4px; }
.ux-reply { display: flex; align-items: center; gap: 8px; margin-left: 30px; padding: 8px 10px; border-radius: 12px; background: var(--gold-3); font-size: 11px; font-weight: 700; }
.ux-reply > span { flex: 1; }
.ux-do { display: grid; gap: 6px; margin-top: 4px; }
.ux-do li { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; }
.ux-do li svg { flex: none; padding: 2px; border-radius: 50%; background: var(--gold); box-sizing: content-box; }
.ux-do li.no svg { background: var(--mist); }
.ux-ticks { display: grid; gap: 6px; }
.ux-ticks li { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.ux-ticks li svg { flex: none; color: var(--ink); }
.ux-prog { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--slate); }
.ux-prog > span { flex: none; }
.ux-phone { padding: 12px; gap: 10px; }
.ux-search { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; background: var(--mist); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.ux-timer { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--gold); font-size: 11px; font-weight: 800; }
.ux-prof { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ux-prof > b { font-size: 13px; }
.ux-prof > span { font-size: 11px; color: var(--slate); }
.ux-prof .ux-trait { align-self: stretch; text-align: left; }
.ux-prof .ux-okr { align-self: stretch; justify-content: center; margin-top: 4px; padding: 6px; border-radius: 10px; background: var(--gold-3); white-space: normal; }
.ux-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.ux-drop > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #fff; }
.ux-drop > .ux-bar { flex-basis: 100%; }
.ux-rank { display: grid; gap: 4px; }
.ux-rank li { display: grid; grid-template-columns: 16px 104px minmax(0, 1fr) 104px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; }
.ux-rank li.is-pick { background: var(--mist); }
.ux-rank li > .ux-c { justify-self: start; }
.ux-box { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ux-box > b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--ink); color: #fff; }
.ux-map { position: relative; height: 216px; }
.ux-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ux-wires path { fill: none; stroke: var(--lav); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ux-wires path.g { stroke: var(--gold); stroke-width: 3; }
.ux-side { position: absolute; top: 0; display: grid; }
.ux-side li { height: 54px; }
.ux-side--l { left: 0; width: 140px; }
.ux-side--r { right: 0; width: 140px; }
.ux-side--r .ux-bar { flex: none; width: 28px; min-width: 28px; }
.ux-funnel { display: grid; gap: 6px; justify-items: center; }
.ux-funnel li { display: grid; width: calc(var(--w) * 100%); padding: 6px 8px; border-radius: 10px; background: var(--mist); text-align: center; transform-origin: top center; }
.ux-funnel li:first-child { background: var(--gold-3); }
.ux-funnel li > b { font-size: 11px; color: var(--slate); }
.ux-funnel li > span { font-size: 12px; font-weight: 800; }
.ux-rap { display: grid; gap: 4px; padding: 8px; border-radius: 10px; background: var(--mist); font-size: 11px; line-height: 15px; }
.ux-rap > p:last-child { font-weight: 700; }
.ux-deal { display: grid; gap: 8px; padding: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.ux-deal .ux-r > .ux-c { margin-left: auto; }
.ux-deal.is-weak { background: var(--mist); box-shadow: none; }
.ux-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.ux-checks li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 11px; font-weight: 700; }
.ux-checks li.no { color: var(--slate); text-decoration: line-through; text-decoration-color: rgba(91,100,120,.5); }
.ux-terr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 1; }
.ux-tcol { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 12px; background: var(--mist); }
.ux-acc { display: grid; gap: 6px; padding: 6px; border-radius: 8px; background: #fff; }
.ux-acc.is-hot { box-shadow: inset 0 0 0 1.5px var(--gold); }
.ux-cc { display: grid; gap: 6px; }
.ux-cc li { display: grid; grid-template-columns: 112px auto auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.ux-cc li > .ux-c { justify-self: end; }
.ux-okk { display: inline-flex; align-items: center; gap: 2px; }
.ux-layer { display: flex; flex-wrap: wrap; gap: 6px; }
.ux-layer > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--gold-3); font-size: 11px; font-weight: 800; }
.ux-layer.is-pub > span { background: var(--mist); color: var(--slate); }
.ux-insight { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.ux-sum { display: grid; gap: 8px; }
.ux-sum > p { display: flex; align-items: center; gap: 6px; }
.ux-sum > p > b { width: 76px; flex: none; font-size: 11px; color: var(--slate); }
.ux-stack { display: flex; }
.ux-stack > .ux-av + .ux-av { margin-left: -6px; box-shadow: 0 0 0 2px #fff; }
.ux-slides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ux-slides > div { position: relative; display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: var(--mist); font-size: 11px; }
.ux-slides .ux-av { position: absolute; right: 6px; top: 6px; }
.ux-mini { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.ux-mini i { width: 8px; border-radius: 2px; background: var(--lav); }
.ux-mini i:nth-child(1) { height: 40%; } .ux-mini i:nth-child(2) { height: 70%; } .ux-mini i:nth-child(3) { height: 100%; background: var(--gold); }
.ux-cols8 { display: flex; align-items: flex-end; gap: 6px; height: 72px; padding: 4px 0; }
.ux-cols8 i { flex: 1; height: calc(var(--h) * 100%); border-radius: 4px 4px 2px 2px; background: var(--lav); transform-origin: bottom; }
.ux-cols8 i.is-down { background: var(--gold); }
.ux-mails { position: absolute; left: 0; top: 78px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 400px; }
.ux-mini-mail { position: relative; display: grid; gap: 8px; padding: 10px; }
.ux-mm { font-size: 12px; font-weight: 700; line-height: 16px; min-height: 48px; }
.ux-sync { position: absolute; left: 0; top: 224px; display: flex; align-items: center; gap: 12px; width: 400px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: var(--sh-sm), 0 0 0 1px var(--line); font-size: 11px; font-weight: 800; }
.ux-sync > span:first-child { color: var(--slate); }
.ux-sync .ux-r { gap: 4px; flex: none; }
.ux-eng { display: grid; gap: 6px; }
.ux-eng li { display: grid; grid-template-columns: 112px 88px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.ux-pp { display: flex; gap: 4px; overflow: hidden; }
.ux-toc { display: grid; gap: 2px; }
.ux-toc li { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.ux-toc li.on { background: var(--gold-3); }
.ux-vis .ux-c { margin-left: auto; }
.ux-dest { position: absolute; display: flex; align-items: center; gap: 8px; width: 168px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: var(--sh-md), 0 0 0 1px var(--line); }
.ux-togs { display: grid; gap: 6px; }
.ux-togs li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--mist); font-size: 12px; }
.ux-tog { margin-left: auto; position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--lav); }
.ux-tog > i { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); transition: transform .3s var(--ease); }
.uc-anim:not(.is-armed) .ux-tog, .ux-tog.is-on { background: var(--ink); }
.uc-anim:not(.is-armed) .ux-tog > i, .ux-tog.is-on > i { transform: translateX(12px); }
.ux-aud { display: grid; gap: 6px; }
.ux-aud li { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.ux-feed { display: grid; gap: 6px; }
.ux-feed li { padding: 6px; border-radius: 10px; background: var(--mist); font-size: 12px; }
.ux-feed li .ux-s { margin-left: auto; }
.ux-wh2 { position: absolute; display: grid; justify-items: center; gap: 4px; width: 138px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: var(--sh-md), 0 0 0 1px var(--line); text-align: center; }
.ux-wh2 > span { font-size: 11px; color: var(--slate); }
.ux-arrow { position: absolute; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ux-time { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ux-time li { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border-radius: 10px; background: var(--mist); text-align: center; font-size: 11px; }
.ux-time li > i { width: 10px; height: 10px; border-radius: 50%; background: var(--lav); }
.ux-time li > span { color: var(--slate); font-size: 10px; line-height: 14px; }
.ux-time li.is-hot { background: var(--gold-3); }
.ux-time li.is-hot > i { background: var(--gold); box-shadow: 0 0 0 3px #fff; }
.ux-time li.is-hot > span { color: var(--ink); font-weight: 700; }
.ux-th, .ux-table li { display: grid; grid-template-columns: 92px 72px minmax(0, 1fr); gap: 8px; align-items: center; }
.ux-th { font-size: 11px; color: var(--slate); font-weight: 800; }
.ux-table { display: grid; gap: 4px; }
.ux-table li { padding: 5px 6px; border-radius: 8px; background: var(--mist); font-size: 11px; }
.ux-table li > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ux-llm { position: absolute; left: 0; right: 0; top: 116px; width: max-content; margin: 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.ux-personas { position: absolute; left: 0; top: 160px; width: 400px; }
.ux-pc { position: relative; display: grid; gap: 6px; padding: 12px; }
.ux-pc > span { font-size: 11px; color: var(--slate); line-height: 15px; min-height: 30px; }
.ux-chips--wrap { gap: 6px; }

/* ---------- the light hero card ---------- */
.sr-hv--lite { container-type: inline-size; display: grid; place-items: center; }
.ux--hero { width: 440px; height: 300px; font-size: 13px; }
@container (max-width: 459px) { .sr-hv--lite .ux--hero { zoom: .9; } }
@container (max-width: 409px) { .sr-hv--lite .ux--hero { zoom: .82; } }
@container (max-width: 369px) { .sr-hv--lite .ux--hero { zoom: .74; } }
@container (max-width: 329px) { .sr-hv--lite .ux--hero { zoom: .68; } }
@container (min-width: 540px) { .sr-hv--lite .ux--hero { zoom: 1.12; } }
.ux--hero .ux-w { border-radius: 24px; box-shadow: var(--sh-lg), 0 0 0 1px var(--line); }
.ux--hero .ux-wh { height: 48px; padding: 0 16px; font-size: 14px; }
.ux-hb { gap: 10px; padding: 16px; justify-content: center; }
.ux-hrow { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 16px; background: var(--mist); }
.ux-hl { flex: none; width: 76px; font-size: 12px; font-weight: 800; color: var(--slate); }
.ux-hrow--ctx .ux-hl { width: 132px; color: var(--ink); }
.ux-hrow--acc, .ux-hrow--deal { min-height: 44px; }
.ux-hrow--acc .ux-co-n, .ux-hrow--deal .ux-co-n { width: 112px; }
.ux-hrow--acc .ux-c { flex: none; }
.ux-hrow--health { min-height: 88px; }
.ux-hrow--health .ux-cols8 { flex: 1; height: 64px; }
.ux-hppl { display: flex; gap: 10px; flex: 1; }
.ux-hppl > span { flex: 1; display: grid; justify-items: center; gap: 6px; }
.ux-hppl .ux-bar { width: 100%; }
.ux-hrow .ux-sig { flex: 1; background: #fff; }
.ux-hrun { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--gold-3); align-self: center; font-size: 12px; }
.ux-hhost { display: inline-flex; gap: 4px; margin-left: 4px; }
.ux-hkey { display: flex; gap: 12px; font-size: 11px; font-weight: 700; color: var(--slate); }
.ux-hkey > span { display: inline-flex; align-items: center; gap: 4px; }
.ux-hkey i { display: block; width: 10px; height: 10px; border-radius: 3px; }
.ux-hkey .ux-bar { width: 24px; flex: none; min-width: 24px; }
.ux-stk { flex: 1; display: flex; gap: 2px; height: 10px; }
.ux-stk i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 3px; transform-origin: left center; }
.k1 { background: var(--gold); } .k2 { background: var(--violet); } .k3 { background: var(--lav); box-shadow: inset 0 0 0 1px rgba(52,29,153,.25); }
.ux-hkey i.k1, .ux-hkey i.k2, .ux-hkey i.k3 { display: inline-block; }

/* ---------- motion (use-cases.js): only transform, opacity, clip-path, stroke offset and one background flash ---------- */
@media (prefers-reduced-motion: no-preference) {
  .uc-anim [data-at] { transition: opacity .32s var(--ease), transform .42s var(--ease), clip-path .7s cubic-bezier(.35,.2,.2,1), stroke-dashoffset .8s var(--ease); transition-delay: calc(var(--k, 0) * 80ms); }
  .uc-anim .ux-bar > i[data-at] { transition: transform .8s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--k, 0) * 80ms + 80ms); }
  .uc-anim.is-snap, .uc-anim.is-snap *, .uc-anim.is-snap *::after { transition: none !important; animation: none !important; }
  .uc-anim.is-armed [data-at]:not(.is-on) { opacity: 0; transform: translateY(8px); }
  .uc-anim.is-armed [data-fx="fade"]:not(.is-on) { transform: none; }
  .uc-anim.is-armed [data-fx="x"]:not(.is-on) { transform: translateX(-10px); }
  .uc-anim.is-armed [data-fx="down"]:not(.is-on) { transform: translateY(-12px); }
  .uc-anim.is-armed [data-fx="pop"]:not(.is-on) { transform: scale(.94); }
  .uc-anim.is-armed [data-fx="slide"]:not(.is-on) { transform: translateX(24px); }
  .uc-anim.is-armed [data-fx="write"]:not(.is-on) { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
  .uc-anim.is-armed [data-fx="write"].is-on { clip-path: inset(0 -4px 0 0); }
  .uc-anim.is-armed [data-fx="bar"]:not(.is-on) { opacity: 1; transform: scaleX(0); }
  .uc-anim.is-armed [data-fx="grow"]:not(.is-on) { opacity: 1; transform: scaleY(0); }
  .uc-anim.is-armed [data-fx="line"]:not(.is-on) { opacity: 1; transform: none; stroke-dashoffset: 1; }
  .uc-anim.is-armed [data-fx="press"]:not(.is-on), .uc-anim.is-armed [data-fx="flash"]:not(.is-on) { opacity: 1; transform: none; }
  .uc-anim.is-armed [data-fx="flash"]:not(.is-on) { color: transparent; }
  .uc-anim.is-armed [data-fx="press"].is-on { animation: ux-press .42s var(--ease); }
  .uc-anim.is-armed [data-fx="flash"].is-on { animation: ux-flash 1.4s var(--ease) both; }
  .uc-anim.is-armed .ux-tog[data-fx="press"]:not(.is-on) { background: var(--lav); }
  .uc-anim.is-out .ux { opacity: 0; transition: opacity .24s var(--ease); }
  .uc-anim .ux { transition: opacity .24s var(--ease); }
  @keyframes ux-press { 0% { transform: scale(1); } 40% { transform: scale(.94); } 100% { transform: scale(1); } }
  @keyframes ux-flash { from { background-color: var(--gold-3); } to { background-color: transparent; } }
}

/* ---------- responsive ---------- */
/* sized by the section's own width (the role rail takes the left column on desktops), not the viewport */
.uc > .sr-wrap { container: ucw / inline-size; }
@container ucw (max-width: 1059px) {
  .uc__box { grid-template-columns: 232px minmax(0, 1fr); }
  .uc__tab { grid-template-columns: minmax(0, 1fr) 16px; }
  .uc__tab .uc__tg { display: none; }
  .uc__bd { grid-template-columns: minmax(0, 1fr) 264px; gap: 20px; }
  .uc__prods li { gap: 14px; padding: 16px 0; }
}
@container ucw (max-width: 899px) {
  .uc__bd { grid-template-columns: minmax(0, 1fr); }
  .uc__prods { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 24px; }
  .uc__prods li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 4px 0; }
  .uc__prods li + li { border-top: 0; }
  .uc__prods img { width: 40px; height: 40px; border-radius: 10px; }
  /* Nov 2 leftovers: an odd number of products (3) sat 2+1 here (lone Buyer Signals at 768): one even column instead. */
  .uc__prods:has(> li:nth-child(odd):last-child) { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
}
@container ucw (max-width: 759px) {
  .uc__box { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .uc__list { flex-direction: row; gap: 8px; margin: 0 calc(-1 * clamp(16px, 4vw, 48px)); padding: 2px clamp(16px, 4vw, 48px) 6px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 24px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); }
  .uc__list::-webkit-scrollbar { display: none; }
  .uc__tab { flex: none; width: auto; grid-template-columns: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; white-space: nowrap; }
  .uc__tab .uc__tg, .uc__tab svg { display: none; }
  .uc__tab[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: var(--sh-sm); }
  .uc__p { padding: 20px; }
}
@container ucw (max-width: 599px) {
  .uc__prods { gap: 12px; }
  .uc__prods a { font-size: 16px; line-height: 22px; }
  .uc__prods small { font-size: 14px; line-height: 20px; }
  .uc__p { padding: 16px; border-radius: 20px; }
  .uc__hd h3 { font-size: 21px; line-height: 26px; }
  .uc__hd p { font-size: 15px; line-height: 22px; }
  .uc__stage { margin: 0 -16px; padding: 12px 0; border-radius: 0; }
  .uc__stage .ux-pz { right: 12px; bottom: 6px; }
}

/* fixes after the first read (Oct 28) */
.ux-behind { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 11px; font-weight: 700; color: var(--slate); }
.ux-behind .ux-peek { position: static; color: var(--ink); padding: 4px 10px 4px 6px; box-shadow: var(--sh-sm), 0 0 0 1px var(--line); }
.ux-b.sm { height: 22px; padding: 0 8px; font-size: 10px; }
.ux-card .ux-trait .ux-b { position: static; }
.ux-att--flat { margin-left: 0; }
.ux-int .ux-bar { flex: 1; }
.ux--hero { height: auto; }
.ux--hero .ux-w { position: relative; }
.ux-co-n { gap: 6px; }
.ux-cn { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-pc > span.ux-bar { min-height: 0; }
.ux-cols8--sm { height: 56px; }
.ux--renewal .ux-cols8 i { flex: 0 0 28px; }

/* ---------- Oct 28 rework (AK: long names wrapped badly, list and panel out of balance) ----------
   Compact rows: the name wraps cleanly to at most 2 lines (balanced), the stage tag sits on the right in one line, 44px minimum.
   The list lives in its own grid cell (.uc__lw): the open panel alone sets the row height and the list fills it; a list longer than
   the panel scrolls inside its cell with a soft fade at the bottom edge. Phones keep the chip row (one line, scrolls sideways). */
.uc__box { grid-template-columns: 256px minmax(0, 1fr); align-items: stretch; }
.uc__lw { position: relative; min-width: 0; }
/* name on top (up to 2 lines, never cut), the stage tag under it in small slate type: the same row pattern as the role picker */
.uc__tab { grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "n c" "t c"; column-gap: 8px; row-gap: 1px; min-height: 44px; padding: 7px 10px 7px 14px; font-size: 15px; line-height: 20px; }
.uc__nm { grid-area: n; text-wrap: balance; }
.uc__tg { grid-area: t; font: 600 12px/16px Manrope, Arial, sans-serif; }
.uc__tab svg { grid-area: c; }
.uc--js .uc__lw .uc__list { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--lav) transparent; padding: 2px; margin: -2px; }
.uc--js .uc__lw.is-long .uc__list { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent); padding-bottom: 32px; }
@container ucw (max-width: 1059px) {
  .uc__box { grid-template-columns: 224px minmax(0, 1fr); }
  .uc__tab { grid-template-columns: minmax(0, 1fr) 16px; padding-left: 12px; }
  .uc__tab .uc__tg { display: block; }
}
@container ucw (max-width: 759px) {
  .uc__box { grid-template-columns: minmax(0, 1fr); }
  .uc--js .uc__lw .uc__list { position: static; inset: auto; overflow-y: visible; overflow-x: auto; padding: 2px clamp(16px, 4vw, 48px) 6px; margin: 0 calc(-1 * clamp(16px, 4vw, 48px)); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); }
  .uc__tab { grid-template-areas: none; }
  .uc__tab .uc__tg { display: none; }
}
/* AK Oct 28: Visitor ID in the AE assets (deal monitoring: the account on your pricing page; pre-meeting prep: pages read this week) */
.ux-att--two { gap: 8px; }
.ux-att--two > .ux-r:nth-child(2) { padding-top: 8px; border-top: 1px solid var(--line); }
.ux-att--two .ux-int b { flex: none; }
.ux-c--vis { gap: 5px; padding-left: 5px; }
.ux-c--vis .ux-ap { border-radius: 3px; }

/* ---------- Oct 28 review fixes (R1-3, R2-4/5/6, R4-3/4; backup 04-build/backups/oct28-review-fixes) ----------
   Phones: the chip row had ~60px of dead space on the left (the name kept its "n" grid area while the areas were reset, so it fell into
   an implicit third column); chips are now plain inline-flex pills that snap. 600-759px (a 768 tablet): the chips wrap instead of scrolling.
   320: the asset scales down a step so the open panel stays near one screen. */
.uc__prods a { padding: 6px 0; margin: -6px 0; }
.uc__end { margin: 24px 0 0; text-align: center; font: 700 15px/20px Manrope, Arial, sans-serif; }
.uc__end a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .uc__end a:hover { text-decoration-thickness: 2px; } }
.uc__end a:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 8px; }
@container ucw (max-width: 759px) {
  .uc__tab { display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; scroll-snap-align: start; }
  .uc__tab .uc__nm { grid-area: auto; }
  .uc--js .uc__lw .uc__list { scroll-snap-type: x proximity; scroll-padding-inline: clamp(16px, 4vw, 48px); }
}
@container ucw (min-width: 600px) and (max-width: 759px) {
  .uc--js .uc__lw .uc__list { flex-wrap: wrap; justify-content: center; overflow: visible; margin: 0; padding: 2px; -webkit-mask-image: none; mask-image: none; }
}
@container ucw (max-width: 359px) {
  .uc__p { padding: 14px; }
  .uc__hd h3 { font-size: 19px; line-height: 24px; }
  .uc__hd p { font-size: 14px; line-height: 20px; }
  .uc__bd { margin-top: 10px; gap: 12px; }
  .uc__stage { margin: 0 -14px; padding: 8px 0; }
  .uc__prods { gap: 8px; }
  .uc__prods li { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  .uc__prods img { width: 36px; height: 36px; border-radius: 10px; }
  .uc__prods a { font-size: 15px; line-height: 20px; }
  .uc__prods small { font-size: 13px; line-height: 18px; }
}
@container (max-width: 299px) { .uc__stage .ux { zoom: .5; } }
.uc--in > div { container: ucw / inline-size; }   /* AK Nov 5: the bare use-case box inside "Every Role On Your Team, Covered" sizes from its own width too (phones stack) */

/* ---------- Nov 5: Pre-sales use cases (Amar, Slack Oct 29; ps-* scenes in views/v2/start/uc-assets.ejs) ----------
   Same 400 x 324 scene language as the AE assets; only the few pieces those scenes do not have. Brand tokens only. */
.ux--ps-account .ux-facts--sm li { grid-template-columns: 16px 60px minmax(0, 1fr); }
.ux--ps-account .ux-facts--sm li > svg { color: var(--ink); }
.ps-fit { display: grid; gap: 6px; }
.ps-fit .ux-lab { color: var(--ink); }
.ps-kept { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 1px 8px 1px 2px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 10px; line-height: 16px; }
.ps-eval { gap: 4px; }
.ps-eval > li { padding: 4px 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.ps-eval .ux-c { flex: none; }
.ux--ps-people .ux-guide { gap: 4px; }
.ux--ps-people .ux-guide li { grid-template-columns: 24px 40px minmax(0, 1fr); padding: 4px 8px; }
.ps-themes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 12px; background: var(--mist); }
.ps-themes > .ux-lab { margin-right: 4px; color: var(--ink); }
.ps-rq { display: grid; gap: 0; }
.ps-rq > li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 2px; border-bottom: 1px solid var(--line); }
.ps-rq > li > i:first-child { flex: none; display: grid; place-items: center; width: 28px; height: 20px; border-radius: 6px; background: var(--mist); font: 800 10px/1 Manrope, Arial, sans-serif; }
.ps-rq .ux-tx b { font-size: 12px; line-height: 17px; }
.ps-rq > li > .ux-bar { flex: none; width: 40px; }
.ps-rfoot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.ps-rfoot > .ux-prog { flex: 1; min-width: 0; }
.ps-rfoot > .ux-prog > .ux-bar { flex: 1; }
.ps-seller { gap: 6px; }
.ps-seller > .ps-k { padding: 0 2px 0 0; }
.ps-seller > .ps-opt { gap: 6px; height: 26px; padding: 0 10px 0 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.ps-rival { color: var(--slate); background: var(--mist); box-shadow: none; }
.ps-mirror li { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); }
.ux--ps-compete .ux-guide li > i img { border-radius: 4px; }

/* Nov 5 hero fix (role pages, /start/*): the hero figure was the full column width (536px at 1440) while the card is 440px, so the
   pause disc floated 10px off the card's right edge, detached from it. The figure now wraps the card and the disc sits on the card's
   bottom-right corner, where every other V2 animation keeps its pause control. */
.sr-hv--lite > .ux-fig--hero { width: auto; max-width: 100%; justify-self: center; }
.sr-hv--lite > .ux-fig--hero > .ux-pz { right: -10px; bottom: -10px; box-shadow: 0 0 0 3px #fff; }
@media (max-width: 767px) { .sr-hv--lite > .ux-fig--hero > .ux-pz { right: -6px; bottom: -6px; } }

/* AK Nov 5 (second round): the use-case visual is a screenshot tour of the real product (views/partials/hx-tour.ejs, public/v2/shared/tour.css).
   The tour fills the stage cell (its box keeps the 1200 x 640 screen ratio, so nothing shifts as it loads or plays). */
.uc__stage--tour { display: block; padding: 14px; }
.uc__stage--tour .hxt { width: 100%; }
@container ucw (max-width: 599px) { .uc__stage--tour { padding: 12px; } }
@container ucw (max-width: 359px) { .uc__stage--tour { padding: 10px 8px; } }
/* a little more room for the tour than the old mock had: the product list column narrows (its lines still fit in 3 to 4 lines) */
.uc__bd:has(> .uc__stage--tour) { grid-template-columns: minmax(0, 1fr) 248px; gap: 20px; }
@container ucw (max-width: 1059px) { .uc__bd:has(> .uc__stage--tour) { grid-template-columns: minmax(0, 1fr) 232px; } }
@container ucw (max-width: 899px) { .uc__bd:has(> .uc__stage--tour) { grid-template-columns: minmax(0, 1fr); } }
/* r3: the tour sits in the middle of its cell when a taller sibling panel sets the row height (no empty strip under it); one-role team
   sections (GTM Engineering, Product and AI) hide the picker */
.uc__stage--tour { display: grid; align-content: center; }
.uct__pick[hidden] { display: none !important; }

/* r3 (AK: no empty bands, everything clean on 390/320): when the jobs are a swipe row (one column), the open job's panel takes only
   its own height (the stacked panels made every job as tall as the tallest one: up to ~150px of empty card on phones). Switching is
   always a tap, so the height change follows the user's own action. */
@container ucw (max-width: 759px) {
  .uc--js .uc__p:not(.is-on) { display: none; }
}
/* r3: a 4-role picker (Sales: AEs, BDRs, Account Managers, GTM Engineers) sits 2 x 2 on phones instead of 3 + 1 lone tab */
@media (max-width: 599px) {
  .uct__pick:has(> .uct__b:nth-child(4):last-child) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; box-sizing: border-box; }
  .uct__pick:has(> .uct__b:nth-child(4):last-child) .uct__b { padding: 0 8px; }
}