/* How it works: lo-fi product visuals for the three rows on the home page.
   Each scene is authored at 600x400 and scaled to its stage width (--hv-k, set in how-visuals.js).
   Every animated property is driven by one timeline in JS, so there are no CSS transitions here. */
.hv-stage { --hv-k: 1; position: relative; width: 100%; aspect-ratio: 3 / 2; background: oklch(0.96 0.018 245); border-radius: 8px; }
.hv-scene {
  position: absolute; left: 0; top: 0; width: 600px; height: 400px;
  transform: scale(var(--hv-k)); transform-origin: 0 0;
  font-family: var(--font-body); color: #16191D; line-height: 1.2;
  -webkit-font-smoothing: antialiased; user-select: none; pointer-events: none;
}
.hv-scene svg { display: block; max-width: none; overflow: visible; }
.hv-a { will-change: transform, opacity; }

/* ---------- window + top bar ---------- */
.hv-win {
  position: absolute; left: 36px; top: 30px; width: 528px; height: 300px; overflow: hidden;
  background: #fff; border: 1px solid #D3DBE4; border-radius: 6px;
  box-shadow: 0 18px 48px -20px rgba(15, 20, 24, 0.22);
}
.hv-top { position: absolute; left: 0; right: 0; top: 0; height: 24px; background: #fff; border-bottom: 1px solid #2B7BF3; }
.hv-bar { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 3px; padding: 0 8px 0 9px; }
.hv-logo { display: flex; align-items: flex-end; gap: 1px; margin-right: 6px; }
.hv-logo img { width: auto; height: 9px; }
.hv-logo i { display: none; width: 4px; height: 1.2px; margin-bottom: 0.4px; background: #16191D; }
.hv-tab { display: inline-flex; align-items: center; height: 14px; padding: 0 10px; border-radius: 2px; font-size: 7px; }
.hv-tab--e { background: #ECE4F8; }
.hv-tab--d { background: #2B7BF3; color: #fff; }
.hv-tab--c { background: #DCF0E6; }
.hv-title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 5px; font-size: 8.5px; white-space: nowrap;
}
.hv-title > span { color: #A3ADB7; }
.hv-title em { font-style: normal; font-size: 7.5px; }
.hv-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.hv-avs { display: flex; padding-left: 2px; }
.hv-avs span {
  width: 11px; height: 11px; margin-left: -2px; display: inline-flex; align-items: center; justify-content: center;
  border: 0.8px solid #16191D; border-radius: 50%; background: #fff; font-size: 5.5px;
}
.hv-ic { width: 10px; height: 10px; }
.hv-ic6 { width: 6px; height: 6px; }

/* ---------- body: canvas, side panel, analysis drawer ---------- */
.hv-body { position: absolute; left: 0; right: 0; top: 24px; bottom: 0; }
.hv-canvas { position: absolute; left: 0; top: 0; bottom: 0; width: 378px; overflow: hidden; background: #E9EEF6; }
.hv-layer { position: absolute; left: 0; top: 0; width: 378px; height: 274px; }
.hv-grid, .hv-lines { position: absolute; left: 0; top: 0; }
.hv-fold {
  position: absolute; right: 6px; top: 6px; width: 12px; height: 12px;
  display: flex; align-items: center; justify-content: center; border-radius: 1px; background: #D3DEEE;
}
.hv-fold svg { width: 7px; height: 7px; }
.hv-an { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; background: #F4F7FB; border-top: 1px solid #D6DEE8; transform: translateY(66px); }
.hv-an__handle { position: absolute; left: 50%; top: 2px; width: 22px; height: 2px; margin-left: -11px; border-radius: 1px; background: #B9C3CE; }
.hv-an__row { position: absolute; left: 8px; right: 8px; top: 6px; height: 11px; display: flex; align-items: center; gap: 9px; }
.hv-an__row > b { font-size: 8px; font-weight: 400; }
.hv-tabs { position: relative; width: 150px; height: 11px; overflow: hidden; border-radius: 2px; background: #DCE5F1; }
.hv-tabs__row { position: absolute; left: 0; top: 0; width: 150px; height: 11px; display: grid; grid-template-columns: repeat(3, 1fr); }
.hv-tabs__row span { display: flex; align-items: center; justify-content: center; font-size: 5.5px; white-space: nowrap; color: #26303A; }
.hv-tabs__ind { position: absolute; left: 0; top: 0; width: 50px; height: 11px; overflow: hidden; border-radius: 2px; background: #2B7BF3; }
.hv-tabs__ind .hv-tabs__row span { color: #fff; }

.hv-panel { position: absolute; left: 378px; right: 0; top: 0; bottom: 0; overflow: hidden; background: #F8FAFC; border-left: 1px solid #D6DEE8; }
.hv-p { position: absolute; left: 0; right: 0; top: 0; padding: 9px 10px; font-size: 7px; }
.hv-row { display: flex; align-items: center; justify-content: space-between; }
.hv-h { font-size: 8.5px; font-weight: 600; }
.hv-chip { padding: 2px 5px; border-radius: 2px; background: #E2F5EA; color: #117A43; font-size: 6px; }
.hv-lab { margin: 8px 0 3px; font-size: 6.5px; color: #3D4953; }
.hv-lab--0 { margin-top: 0; }
.hv-num { margin-bottom: 3px; font-size: 7px; color: #3D4953; }
.hv-box { padding: 4px 5px; background: #fff; border: 1px solid #DCE3EA; font-size: 8px; line-height: 1.25; }
.hv-box--sm { font-size: 6.5px; line-height: 1.4; color: #2B3238; }
.hv-kv { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; font-size: 7px; }
.hv-kv b { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv-kv--sm { margin-top: 3px; font-size: 6px; color: #6B7884; }
.hv-kv--hl { margin: 6px -10px 0; padding: 4px 10px; background: #E6EEF9; }
.hv-info {
  display: inline-flex; align-items: center; justify-content: center; width: 6px; height: 6px; margin-left: 2px;
  border: 0.6px solid #16191D; border-radius: 50%; font-size: 4.5px; font-style: normal; vertical-align: 0.5px;
}
.hv-link { color: #2B7BF3; }
.hv-rule { height: 1px; margin: 6px -10px; background: #DCE3EA; }
.hv-cap { font-family: var(--font-mono); font-size: 5.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6B7884; }
.hv-dur { display: grid; grid-template-columns: 30px 1fr 1fr; gap: 4px; align-items: center; margin-top: 6px; }
.hv-dur span { padding: 2px 4px; background: #fff; border: 1px solid #DCE3EA; text-align: right; font-size: 6.5px; }
.hv-dur .k { padding: 0; border: 0; background: none; text-align: left; font-size: 7px; }
.hv-res { margin-top: 6px; }
.hv-res > div { display: flex; align-items: center; justify-content: space-between; height: 12px; border-bottom: 1px solid #EDF1F5; font-size: 7px; }
.hv-res em { font-style: normal; font-size: 6.5px; color: #2B7BF3; }

/* ---------- canvas nodes ---------- */
.hv-node { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.hv-node > svg { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; }
.hv-node__lbl {
  position: absolute; left: -36px; bottom: 24px; width: 72px;
  text-align: center; font-size: 7.5px; line-height: 1.2; text-wrap: balance;
}

/* ---------- floating cards (outside the window) ---------- */
.hv-over { position: absolute; left: 0; top: 0; }
.hv-card {
  position: absolute; opacity: 0; background: #fff; border: 1px solid #DCE3EA; border-radius: 6px;
  box-shadow: 0 14px 34px -14px rgba(15, 20, 24, 0.30);
}

/* ---------- row 1: crowdsource ---------- */
.cr-card { top: 304px; width: 190px; padding: 10px 12px 11px; }
.cr-card--a { left: 40px; }
.cr-card--b { left: 246px; }
.cr-card__who {
  display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 7.5px; line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase; color: #485A66;
}
.cr-card__q { margin-top: 6px; font-size: 8px; color: #5C7280; }
.cr-card__a { margin: 3px 0 0; font-size: 11px; line-height: 1.38; text-wrap: pretty; }
.cr-feed { position: relative; height: 69px; margin-top: 5px; overflow: hidden; }
.cr-item { position: absolute; left: 0; right: 0; top: 0; height: 23px; opacity: 0; }
.cr-item b { display: block; font-size: 7px; font-weight: 600; }
.cr-item span { display: block; margin-top: 2px; font-size: 6.5px; color: #3D4953; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-prov { display: grid; gap: 4px; margin-top: 5px; }
.cr-prov > div { display: flex; align-items: center; justify-content: space-between; font-size: 7px; opacity: 0; }
.cr-prov em { padding: 1.5px 4px; border: 1px solid #DCE3EA; border-radius: 2px; background: #fff; font-style: normal; font-size: 6px; color: #485A66; }
.cr-note { margin-top: 5px; font-size: 6px; color: #6B7884; opacity: 0; }

/* ---------- row 2: analysis + Smart Signal ---------- */
.sg-stats { position: absolute; left: 0; right: 0; top: 24px; bottom: 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-top: 1px solid #DCE3EA; background: #fff; }
.sg-stats > div { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; }
.sg-stats > div:first-child { border-right: 1px solid #DCE3EA; }
.sg-stats span { font-size: 7px; }
.sg-stats b { font-size: 12px; font-weight: 400; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sg-stats .sg-cost { font-size: 16px; font-weight: 600; color: #12A150; }
.sg-av { opacity: 0; }
.sg-mini { margin-top: 8px; background: #FFF8EE; border: 1px solid #F6D3B0; }
.sg-mini__band { height: 4px; background: repeating-linear-gradient(-45deg, #F78E3E 0 1.6px, #FFF8EE 1.6px 3.2px); border-bottom: 1px solid #F78E3E; }
.sg-mini__b { padding: 4px 5px 5px; font-size: 6px; line-height: 1.45; }
.sg-mini__b b { display: block; font-size: 7px; font-weight: 600; }
.sg-card { left: 384px; top: 258px; width: 192px; overflow: hidden; background: #FFF8EE; border-color: #F6D3B0; }
.sg-card__band { height: 7px; background: repeating-linear-gradient(-45deg, #F78E3E 0 2.4px, #FFF8EE 2.4px 4.8px); border-bottom: 1px solid #F78E3E; }
.sg-card__b { display: grid; gap: 5px; padding: 9px 11px 8px; font-size: 8.5px; line-height: 1.3; color: #2A2E33; }
.sg-card__b strong { font-weight: 600; }
.sg-card__t { font-size: 10.5px; font-weight: 600; color: #16191D; }
.sg-card__f { display: flex; align-items: center; justify-content: space-between; padding: 6px 11px 8px; border-top: 1px solid #F6D3B0; font-size: 8px; }
.sg-card__f u { text-underline-offset: 2px; }
.sg-card__f span { padding: 3px 8px; border: 1px solid #F78E3E; border-radius: 3px; background: #FFCDA3; }

/* ---------- row 3: sub-event + Blueprint ---------- */
.bp-topb, .bp-bview { opacity: 0; }
.bp-dview, .bp-bview { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.bp-chip {
  position: absolute; left: 262px; top: 13px; height: 14px; padding: 0 5px;
  display: flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #C9D3DE;
  font-size: 7px; white-space: nowrap; opacity: 0;
}
.bp-chip svg { width: 8px; height: 8px; }
.bp-print { display: inline-flex; align-items: center; gap: 3px; height: 15px; padding: 0 7px; border-radius: 2px; background: #2B7BF3; color: #fff; font-size: 7px; }
.bp-print svg { width: 7px; height: 7px; }
.bp-gen { left: 404px; top: 15px; height: 30px; padding: 0 14px 0 11px; display: flex; align-items: center; gap: 8px; overflow: hidden; font-size: 11px; font-weight: 600; white-space: nowrap; color: #16191D; }
.bp-gen svg { flex: none; width: 17px; height: 17px; }
.bp-gen__on { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 0 14px 0 11px; display: flex; align-items: center; gap: 8px; background: #2B7BF3; color: #fff; opacity: 0; }
.bp-cursor { position: absolute; left: 0; top: 0; width: 16px; height: 18px; opacity: 0; }

.bp-cust { position: absolute; left: 0; top: 0; bottom: 0; width: 118px; padding: 9px; background: #F8FAFC; border-right: 1px solid #D6DEE8; font-size: 6.5px; }
.bp-cust__h { margin-bottom: 7px; font-size: 8.5px; font-weight: 600; }
.bp-sec { display: flex; align-items: center; justify-content: space-between; margin: 0 -9px; padding: 3px 9px; background: #E3EBF6; font-size: 7px; }
.bp-sec svg { width: 6px; height: 6px; }
.bp-sec--gap { margin-top: 8px; }
.bp-q { margin: 6px 0 2px; font-weight: 600; }
.bp-o { display: flex; align-items: center; gap: 4px; height: 10px; }
.bp-o i { flex: none; width: 6px; height: 6px; border: 0.8px solid #7B8794; border-radius: 50%; background: #fff; }
.bp-o i.on { border: 1.8px solid #2B7BF3; }
.bp-o i.ck { position: relative; border: 0; border-radius: 1px; background: #2B7BF3; }
.bp-o i.ck::after {
  content: ""; position: absolute; left: 2.1px; top: 0.9px; width: 1.5px; height: 3px;
  border: solid #fff; border-width: 0 0.9px 0.9px 0; transform: rotate(45deg);
}
.bp-prev { position: absolute; left: 118px; right: 0; top: 0; bottom: 0; overflow: hidden; background: #E9EEF6; }
.bp-page { position: absolute; left: 10px; top: 10px; width: 388px; height: 300px; background: #fff; box-shadow: 0 1px 0 #D6DEE8; }
.bp-cols { position: absolute; left: 122px; top: 0; bottom: 0; width: 260px; display: grid; grid-template-columns: repeat(4, 1fr); }
.bp-cols i { border-left: 1px solid #E3E8EC; }
.bp-ttl { position: absolute; left: 12px; top: 13px; width: 100px; font-size: 12px; line-height: 1.05; font-weight: 900; letter-spacing: -0.02em; }
.bp-date { position: absolute; left: 12px; top: 43px; font-size: 6.5px; font-weight: 600; white-space: nowrap; }
.bp-desc { position: absolute; left: 12px; top: 54px; width: 100px; margin: 0; font-size: 6px; line-height: 1.45; color: #485A66; }
.bp-sub {
  position: absolute; left: 187px; top: 9px; width: 195px; height: 13px; padding-left: 4px;
  display: flex; align-items: center; gap: 3px; border: 1px solid #C9D3DE; background: #F1F5FB; font-size: 5.5px; opacity: 0;
}
.bp-sub svg { width: 6px; height: 6px; }
.bp-flow { position: absolute; left: 122px; top: 0; }
.bp-wm { position: absolute; left: 126px; top: 68px; font-family: var(--font-mono); font-size: 4.5px; letter-spacing: 0.14em; color: #9DA9B2; opacity: 0; }
.bp-hd { position: absolute; left: 122px; top: 80px; width: 260px; display: grid; grid-template-columns: repeat(4, 1fr); }
.bp-hd > div { padding: 0 5px; font-size: 6.5px; line-height: 1.2; font-weight: 600; opacity: 0; }
.bp-hd span { display: block; margin-bottom: 2px; font-size: 5px; font-weight: 400; color: #6B7884; }
.bp-sw {
  position: absolute; left: 12px; top: 114px; width: 370px;
  display: grid; grid-template-columns: 110px repeat(4, 1fr); grid-auto-rows: 12px; gap: 1px;
  font-size: 6px;
}
.bp-sw span { display: flex; align-items: center; color: #3D4953; opacity: 0; }
.bp-sw .bp-sw__h { font-family: var(--font-mono); font-size: 5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6B7884; }
.bp-sw b { display: flex; align-items: center; justify-content: center; font-size: 6px; font-weight: 600; opacity: 0; }
.bp-sw .r { background: #F4C2EE; }
.bp-sw .a { background: #F6CFAE; }
.bp-sw .c { background: #BDEBD5; }
.bp-sw .i { background: #CBD2F6; }
.bp-key {
  position: absolute; left: 12px; top: 186px; width: 100px; padding: 5px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 4px; border: 0.8px solid #C7CFD5; font-size: 5.5px; opacity: 0;
}
.bp-key__h { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 4.5px; letter-spacing: 0.12em; color: #6B7884; }
.bp-key b { margin-right: 2px; font-weight: 600; }
.bp-foot {
  position: absolute; left: 12px; top: 234px; font-family: var(--font-mono); font-size: 4.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #6B7884; opacity: 0;
}


/* ---------- use case: Transformation 1 ---------- */
.tx-p { bottom: 0; display: flex; flex-direction: column; }
.tx-ask { margin-top: 6px; }
.tx-feed { position: relative; flex: 1; min-height: 0; margin-top: 1px; overflow: hidden; }
.tx-q { position: absolute; left: 0; right: 0; top: 0; padding: 4px 5px 5px; background: #fff; border: 1px solid #DCE3EA; border-radius: 2px; opacity: 0; }
.tx-q span { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 5px; letter-spacing: 0.1em; text-transform: uppercase; color: #485A66; }
.tx-q em { font-style: normal; color: #8A96A3; }
.tx-q p { margin: 2px 0 0; font-size: 6.5px; line-height: 1.35; color: #16191D; text-wrap: pretty; }
.tx-btn { position: relative; flex: none; height: 20px; margin-top: 6px; border-radius: 2px; overflow: hidden; background: #2B7BF3; color: #fff; font-size: 7px; font-weight: 600; display: flex; align-items: center; justify-content: center; opacity: 0; }
.tx-btn i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #1C5FC4; }
.tx-btn span { position: relative; }
.tx-btn.is-ready, .tx-btn.is-ready i { background: #1DB45A; }
#tx1-stage, #ex1-stage, #rc1-stage { overflow: hidden; }
.tx-fly { position: absolute; left: 0; top: 0; width: 130px; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; box-shadow: 0 10px 24px -8px rgba(22,25,29,0.22); }
.tx-cursor { position: absolute; left: 0; top: 0; width: 16px; height: 18px; opacity: 0; }
/* ---------- use case: Process excellence 1 (new scenario) ---------- */
#pe1-stage .hv-node__lbl { left: -28px; width: 56px; }
.pe1-an { transform: none; }
.pe1-seg { display: flex; height: 11px; border-radius: 2px; overflow: hidden; background: #DCE5F1; }
.pe1-seg span { display: flex; align-items: center; padding: 0 7px; font-size: 5.5px; color: #26303A; }
.pe1-seg .on { background: #2B7BF3; color: #fff; }
.pe1-hl { margin-left: auto; padding: 1.5px 5px; border: 1px solid #F7B23B; border-radius: 2px; background: #FFF6DE; font-style: normal; font-size: 5.5px; color: #6B4600; white-space: nowrap; opacity: 0; }
.pe1-rows { position: absolute; left: 0; right: 0; top: 22px; bottom: 0; background: #fff; border-top: 1px solid #DCE3EA; }
.pe1-r { display: grid; grid-template-columns: 16px 34px 38px 1fr; align-items: center; gap: 4px; height: 15px; padding: 0 6px; font-size: 6px; border-top: 1px solid #EDF1F5; }
.pe1-r > span:nth-child(-n+3) { text-align: right; font-variant-numeric: tabular-nums; color: #3D4953; }
.pe1-r > span:first-child { text-align: center; }
.pe1-rh { border-top: 0; font-size: 5px; color: #6B7884; }
.pe1-rh > span:nth-child(-n+3) { color: #6B7884; }
.pe1-bd { display: flex; align-items: center; gap: 3px; overflow: hidden; white-space: nowrap; }
.pe1-bd b { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 9px; padding: 0 3px; border: 0.6px solid #C9D3DE; border-radius: 4.5px; background: #fff; font-size: 5px; font-weight: 400; color: #485A66; }
.pe1-bd b i { width: 4px; height: 2.8px; background: #9DB3CC; }
.pe1-bd b i.d { width: 2.8px; height: 2.8px; transform: rotate(45deg); }
.pe1-r--new { opacity: 0; background: #FFF6DE; box-shadow: inset 0 0 0 1px #F7B23B; }
.pe1-bd b.y { border-color: #F7B23B; color: #16191D; }
.pe1-bd b.y i { background: #5A8FE0; }
.pe1-bd b.nw { background: #FFE2A0; }
.pe1-sc { padding: 0 3px; border-radius: 2px; }
.pe1-sc.is-new { background: #FFE2A0; }
.pe1-card { left: 0; top: 0; width: 200px; padding: 10px 12px 11px; transform-origin: 50% 50%; }
.pe1-card .cr-card__who span { white-space: nowrap; }

/* ---------- use case: Transformation 3 (Blueprint customization) ---------- */
.tx3-lane { position: absolute; left: 12px; top: 181px; width: 370px; display: grid; grid-template-columns: 110px repeat(4, 1fr); grid-auto-rows: 12px; gap: 1px; font-size: 6px; opacity: 0; }
.tx3-lane span { display: flex; align-items: center; color: #3D4953; }
.tx3-lane .h { font-family: var(--font-mono); font-size: 5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6B7884; }
.tx3-lane b { display: block; opacity: 0; }
.tx3-lane b.u { background: #BDEBD5; }
.tx3-lane b.p { background: #CBD2F6; }
.tx3-lane b.m { background: #E6DCCB; }
#bp-stage[data-bp-mode="custom"] .bp-key, #bp-stage[data-bp-mode="custom"] .bp-foot, #bp-stage[data-bp-mode="signals"] .bp-key, #bp-stage[data-bp-mode="signals"] .bp-foot, #bp-stage-ex[data-bp-mode="custom"] .bp-key, #bp-stage-ex[data-bp-mode="custom"] .bp-foot, #bp-stage-ex[data-bp-mode="signals"] .bp-key, #bp-stage-ex[data-bp-mode="signals"] .bp-foot, #bp-stage-ma[data-bp-mode="custom"] .bp-key, #bp-stage-ma[data-bp-mode="custom"] .bp-foot, #bp-stage-ma[data-bp-mode="signals"] .bp-key, #bp-stage-ma[data-bp-mode="signals"] .bp-foot { display: none; }
#bp-stage[data-bp-mode="signals"] .bp-cust, #bp-stage-ex[data-bp-mode="signals"] .bp-cust, #bp-stage-ma[data-bp-mode="signals"] .bp-cust { padding-top: 7px; }
#bp-stage[data-bp-mode="signals"] .bp-cust .bp-o, #bp-stage-ex[data-bp-mode="signals"] .bp-cust .bp-o, #bp-stage-ma[data-bp-mode="signals"] .bp-cust .bp-o { height: 9px; }
.bp-sglane { position: absolute; left: 12px; top: 181px; width: 370px; display: grid; grid-template-columns: 110px repeat(4, 1fr); grid-auto-rows: 12px; gap: 1px; font-size: 6px; opacity: 0; }
.bp-sglane span { display: flex; align-items: center; color: #3D4953; }
.bp-sglane .h { font-family: var(--font-mono); font-size: 5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6B7884; }
.bp-sglane b { display: block; opacity: 0; }
.bp-sglane b.s { background: repeating-linear-gradient(-45deg, #F78E3E 0 1.6px, #FFF8EE 1.6px 3.2px); box-shadow: inset 0 0 0 0.8px #F78E3E; }
.bp-sgdot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: repeating-linear-gradient(-45deg, #F78E3E 0 1.3px, #FFF8EE 1.3px 2.6px); box-shadow: 0 0 0 0.8px #F78E3E; opacity: 0; }
#bp-stage[data-bp-mode="custom"] .bp-page, #bp-stage-ex[data-bp-mode="custom"] .bp-page, #bp-stage-ma[data-bp-mode="custom"] .bp-page { height: 420px; }
.bp-print { transform-origin: 50% 50%; white-space: nowrap; }

/* ---------- use case: Transformation 2 ---------- */
#tx2-stage, #pe2-stage, #rc2-stage, #ma2-stage { overflow: hidden; }
.tx2-an .sg-stats b { font-size: 12px; }
.tx2-an .sg-stats .sg-cost { font-size: 16px; color: #16191D; }
.tx2-card { left: 346px; top: 92px; width: 232px; overflow: hidden; transform-origin: 0 50%; }
.tx2-card--o { background: #FFF8EE; border-color: #F6D3B0; }
.tx2-card--r { background: #FFF3F2; border-color: #F4C3BE; }
.tx2-card__band { height: 8px; border-bottom: 1px solid; }
.tx2-card--o .tx2-card__band { background: repeating-linear-gradient(-45deg, #F78E3E 0 2.6px, #FFF8EE 2.6px 5.2px); border-color: #F78E3E; }
.tx2-card--r .tx2-card__band { background: repeating-linear-gradient(-45deg, #EE4B3F 0 2.6px, #FFF3F2 2.6px 5.2px); border-color: #EE4B3F; }
.tx2-card__b { display: grid; gap: 6px; padding: 11px 13px 10px; font-size: 10px; line-height: 1.35; color: #2A2E33; }
.tx2-card__b strong { font-weight: 600; }
.tx2-card__act { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase; color: #5C7280; }
.tx2-card__t { font-size: 13px; font-weight: 600; color: #16191D; }
.tx2-card__m { display: flex; gap: 10px; white-space: nowrap; font-size: 8.5px; color: #485A66; }
.tx2-card__f { display: flex; align-items: center; justify-content: space-between; padding: 7px 13px 9px; border-top: 1px solid; font-size: 9px; }
.tx2-card--o .tx2-card__f { border-color: #F6D3B0; }
.tx2-card--r .tx2-card__f { border-color: #F4C3BE; }
.tx2-card__f u { text-underline-offset: 2px; }
.tx2-card__f span { padding: 3px 9px; border: 1px solid; border-radius: 3px; }
.tx2-card--o .tx2-card__f span { border-color: #F78E3E; background: #FFCDA3; }
.tx2-card--r .tx2-card__f span { border-color: #EE4B3F; background: #FFC9C4; }
.tx2-cur { position: absolute; left: 0; top: 0; opacity: 0; z-index: 3; }
.tx2-cur svg { display: block; margin: -2px 0 0 -2.5px; filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.25)); }
.tx2-cur span { position: absolute; left: 17.3px; top: 8.3px; height: 15px; padding: 0 7px; display: flex; align-items: center; border: 1px solid #E6E6E6; border-radius: 7.5px; color: #fff; font-size: 8px; line-height: 1; white-space: nowrap; }
.uc-steps__media .frame:has(.hv-stage) { display: flex; align-items: center; }
.uc-steps__media .frame .hv-stage { width: 100%; }

/* ---------- use case: AI strategy 1 (crowdsourcing conversation builds the process) ---------- */
#ai1-stage, #ma1-stage { overflow: hidden; }
#ai1-stage .hv-canvas, #ma1-stage .hv-canvas { width: 100%; }
#ai1-stage .hv-layer, #ma1-stage .hv-layer { width: 528px; }
#ai1-stage .hv-node__lbl, #ma1-stage .hv-node__lbl { left: -28px; width: 56px; }
/* chat sits on the left, styled after the Zenda crowdsourcing chat; the process shifts right to clear it */
#ai1-stage .hv-layer, #ma1-stage .hv-layer { left: 124px; }
.ai1-chat { left: 14px; top: 90px; width: 150px; height: 280px; display: flex; flex-direction: column; overflow: hidden; border-color: #D9DFE4; border-radius: 8px;
  background: radial-gradient(ellipse 120% 38% at 0% 100%, rgba(254, 88, 206, 0.22), rgba(254, 88, 206, 0) 70%), radial-gradient(ellipse 80% 24% at 100% 0%, rgba(238, 186, 235, 0.45), rgba(238, 186, 235, 0) 70%), #EEF1F3; }
.ai1-chat__hd { flex: none; display: flex; align-items: center; justify-content: center; height: 26px; }
.ai1-chat__hd img { width: auto; height: 7px; }
.ai1-feed { position: relative; flex: 1; min-height: 0; margin: 0 9px; overflow: hidden; }
.ai1-m { position: absolute; top: 0; border-radius: 6px; opacity: 0; overflow: hidden; }
.ai1-m--z { left: 0; background: none; }
.ai1-m--c { left: 0; right: 0; width: auto !important; background: rgba(238, 186, 235, 0.38); }
.ai1-bars { position: absolute; left: 7px; top: 6px; display: flex; flex-direction: column; gap: 3px; }
.ai1-m--z .ai1-bars { left: 0; }
.ai1-bars i { display: block; height: 3.5px; border-radius: 2px; background: #6B7680; }
.ai1-m--c .ai1-bars i { background: #9AA3AC; }
.ai1-dots { position: absolute; left: 7px; top: 6px; display: flex; gap: 2.5px; }
.ai1-dots b { width: 3.5px; height: 3.5px; border-radius: 50%; background: #6B7680; }
.ai1-in { flex: none; display: flex; align-items: center; height: 18px; margin: 6px 9px 0; padding: 0 3px 0 6px; background: #fff; border: 1px solid #DCE3EA; border-radius: 4px; }
.ai1-in i { display: block; width: 52px; height: 3px; border-radius: 2px; background: #C9D1D8; }
.ai1-in svg { margin-left: auto; width: 12px; height: 12px; }
.ai1-disc { flex: none; display: flex; justify-content: center; padding: 5px 0 7px; }
.ai1-disc i { display: block; width: 46px; height: 2.5px; border-radius: 2px; background: #9AA3AC; }
#ai1-stage .ai1-card, #ma1-stage .ai1-card { left: 366px; top: 256px; width: 212px; transform-origin: 50% 0; }

/* ---------- use case: AI strategy 2 (dark mode Smart Signals) ---------- */
#ai2-stage, #ex2-stage, #pe1-stage, #bp-stage-rc, #sg-stage { overflow: hidden; background: #0D1114; }
#ai2-stage .hv-scene, #ex2-stage .hv-scene, #pe1-stage .hv-scene, #bp-stage-rc .hv-scene, #sg-stage .hv-scene { color: #F2F4F6; }
#ai2-stage .hv-win, #ex2-stage .hv-win, #pe1-stage .hv-win, #bp-stage-rc .hv-win, #sg-stage .hv-win { background: #1B212B; border-color: #25303D; box-shadow: 0 18px 48px -20px rgba(0, 0, 0, 0.7); }
#ai2-stage .hv-top, #ex2-stage .hv-top, #pe1-stage .hv-top, #bp-stage-rc .hv-top, #sg-stage .hv-top { background: #000; border-bottom-color: #0E69F2; }
#ai2-stage .hv-logo img, #ex2-stage .hv-logo img, #pe1-stage .hv-logo img, #bp-stage-rc .hv-logo img, #sg-stage .hv-logo img { filter: invert(1); }
#ai2-stage .hv-tab, #ex2-stage .hv-tab, #pe1-stage .hv-tab, #bp-stage-rc .hv-tab, #sg-stage .hv-tab { color: #fff; }
#ai2-stage .hv-tab--e, #ex2-stage .hv-tab--e, #pe1-stage .hv-tab--e, #bp-stage-rc .hv-tab--e, #sg-stage .hv-tab--e { background: #31157F; }
#ai2-stage .hv-tab--d, #ex2-stage .hv-tab--d, #pe1-stage .hv-tab--d, #bp-stage-rc .hv-tab--d, #sg-stage .hv-tab--d { background: #0E69F2; }
#ai2-stage .hv-tab--c, #ex2-stage .hv-tab--c, #pe1-stage .hv-tab--c, #bp-stage-rc .hv-tab--c, #sg-stage .hv-tab--c { background: #044521; }
#ai2-stage .hv-title > span, #ex2-stage .hv-title > span, #pe1-stage .hv-title > span, #bp-stage-rc .hv-title > span, #sg-stage .hv-title > span { color: #959596; }
#ai2-stage .hv-avs span, #ex2-stage .hv-avs span, #pe1-stage .hv-avs span, #bp-stage-rc .hv-avs span, #sg-stage .hv-avs span { background: #000; border-color: #B3B3B3; }
#ai2-stage .hv-ic circle, #ex2-stage .hv-ic circle, #pe1-stage .hv-ic circle, #bp-stage-rc .hv-ic circle, #sg-stage .hv-ic circle { stroke: #B3B3B3; }
#ai2-stage .hv-canvas, #ex2-stage .hv-canvas, #pe1-stage .hv-canvas, #bp-stage-rc .hv-canvas, #sg-stage .hv-canvas { background: #1D252F; }
#ai2-stage .hv-grid path, #ex2-stage .hv-grid path, #pe1-stage .hv-grid path, #bp-stage-rc .hv-grid path, #sg-stage .hv-grid path { stroke: #303640; }
#ai2-stage .hv-grid circle, #ex2-stage .hv-grid circle, #pe1-stage .hv-grid circle, #bp-stage-rc .hv-grid circle, #sg-stage .hv-grid circle { fill: #303640; }
#ai2-stage .hv-node__lbl, #ex2-stage .hv-node__lbl, #pe1-stage .hv-node__lbl, #bp-stage-rc .hv-node__lbl, #sg-stage .hv-node__lbl { color: #D9DCE0; }
#ai2-stage svg [fill="#fff"], #ex2-stage svg [fill="#fff"], #pe1-stage svg [fill="#fff"], #bp-stage-rc svg [fill="#fff"], #sg-stage svg [fill="#fff"] { fill: #000; }
#ai2-stage svg [stroke="#fff"], #ex2-stage svg [stroke="#fff"], #pe1-stage svg [stroke="#fff"], #bp-stage-rc svg [stroke="#fff"], #sg-stage svg [stroke="#fff"] { stroke: #1D252F; }
#ai2-stage svg [fill="#CFDDF1"], #ex2-stage svg [fill="#CFDDF1"], #pe1-stage svg [fill="#CFDDF1"], #bp-stage-rc svg [fill="#CFDDF1"], #sg-stage svg [fill="#CFDDF1"] { fill: #25303D; }
#ai2-stage svg [fill="#6A9BEF"], #ex2-stage svg [fill="#6A9BEF"], #pe1-stage svg [fill="#6A9BEF"], #bp-stage-rc svg [fill="#6A9BEF"], #sg-stage svg [fill="#6A9BEF"] { fill: #324B6E; }
#ai2-stage svg [fill="#1B1F24"], #ex2-stage svg [fill="#1B1F24"], #pe1-stage svg [fill="#1B1F24"], #bp-stage-rc svg [fill="#1B1F24"], #sg-stage svg [fill="#1B1F24"] { fill: #B3B3B3; }
#ai2-stage svg [stroke="#1B1F24"], #ex2-stage svg [stroke="#1B1F24"], #pe1-stage svg [stroke="#1B1F24"], #bp-stage-rc svg [stroke="#1B1F24"], #sg-stage svg [stroke="#1B1F24"] { stroke: #959698; }
#ai2-stage .hv-an, #ex2-stage .hv-an, #pe1-stage .hv-an, #bp-stage-rc .hv-an, #sg-stage .hv-an { background: #000; border-top-color: #0E69F2; }
#ai2-stage .hv-an__handle, #ex2-stage .hv-an__handle, #pe1-stage .hv-an__handle, #bp-stage-rc .hv-an__handle, #sg-stage .hv-an__handle { background: #4A5564; }
#ai2-stage .hv-tabs, #ex2-stage .hv-tabs, #pe1-stage .hv-tabs, #bp-stage-rc .hv-tabs, #sg-stage .hv-tabs { background: #25303D; }
#ai2-stage .hv-tabs__row span, #ex2-stage .hv-tabs__row span, #pe1-stage .hv-tabs__row span, #bp-stage-rc .hv-tabs__row span, #sg-stage .hv-tabs__row span { color: #D9DCE0; }
#ai2-stage .hv-tabs__ind, #ex2-stage .hv-tabs__ind, #pe1-stage .hv-tabs__ind, #bp-stage-rc .hv-tabs__ind, #sg-stage .hv-tabs__ind { background: #566E8D; }
#ai2-stage .hv-tabs__ind .hv-tabs__row span, #ex2-stage .hv-tabs__ind .hv-tabs__row span, #pe1-stage .hv-tabs__ind .hv-tabs__row span, #bp-stage-rc .hv-tabs__ind .hv-tabs__row span, #sg-stage .hv-tabs__ind .hv-tabs__row span { color: #fff; }
#ai2-stage .sg-stats, #ex2-stage .sg-stats, #pe1-stage .sg-stats, #bp-stage-rc .sg-stats, #sg-stage .sg-stats { background: #0D1114; border-top-color: #25303D; }
#ai2-stage .sg-stats > div:first-child, #ex2-stage .sg-stats > div:first-child, #pe1-stage .sg-stats > div:first-child, #bp-stage-rc .sg-stats > div:first-child, #sg-stage .sg-stats > div:first-child { border-right-color: #25303D; }
#ai2-stage .sg-stats span, #ex2-stage .sg-stats span, #pe1-stage .sg-stats span, #bp-stage-rc .sg-stats span, #sg-stage .sg-stats span { color: #959596; }
#ai2-stage .tx2-an .sg-stats .sg-cost, #ex2-stage .tx2-an .sg-stats .sg-cost, #pe1-stage .tx2-an .sg-stats .sg-cost, #bp-stage-rc .tx2-an .sg-stats .sg-cost, #sg-stage .tx2-an .sg-stats .sg-cost { color: #fff; }
#ai2-stage .hv-panel, #ex2-stage .hv-panel, #pe1-stage .hv-panel, #bp-stage-rc .hv-panel, #sg-stage .hv-panel { background: #1B212B; border-left-color: #0E69F2; }
#ai2-stage .hv-lab, #ex2-stage .hv-lab, #pe1-stage .hv-lab, #bp-stage-rc .hv-lab, #sg-stage .hv-lab { color: #959596; }
#ai2-stage .hv-box, #ex2-stage .hv-box, #pe1-stage .hv-box, #bp-stage-rc .hv-box, #sg-stage .hv-box { background: #151B22; border-color: #25303D; }
#ai2-stage .hv-box--sm, #ex2-stage .hv-box--sm, #pe1-stage .hv-box--sm, #bp-stage-rc .hv-box--sm, #sg-stage .hv-box--sm { color: #D9DCE0; }
#ai2-stage .hv-kv--hl, #ex2-stage .hv-kv--hl, #pe1-stage .hv-kv--hl, #bp-stage-rc .hv-kv--hl, #sg-stage .hv-kv--hl { background: #25303D; }
#ai2-stage .hv-info, #ex2-stage .hv-info, #pe1-stage .hv-info, #bp-stage-rc .hv-info, #sg-stage .hv-info { border-color: #B3B3B3; }
#pe1-stage .hv-card { background: #1B212B; border-color: #25303D; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.8); color: #F2F4F6; }
#pe1-stage .cr-card__who, #pe1-stage .cr-card__q { color: #959596; }
#pe1-stage .pe1-seg { background: #25303D; }
#pe1-stage .pe1-seg span { color: #D9DCE0; }
#pe1-stage .pe1-seg .on { background: #566E8D; color: #fff; }
#pe1-stage .pe1-hl { background: #3A2E14; color: #FFD98A; }
#pe1-stage .pe1-rows { background: #0E1216; border-top-color: #25303D; }
#pe1-stage .pe1-r { border-top-color: #25303D; color: #CBD5E2; }
#pe1-stage .pe1-r > span:nth-child(-n+3) { color: #CBD5E2; }
#pe1-stage .pe1-rh, #pe1-stage .pe1-rh > span:nth-child(-n+3) { color: #959596; }
#pe1-stage .pe1-bd b { border-color: #303D4E; background: #151B22; color: #D9DCE0; }
#pe1-stage .pe1-bd b i { background: #566E8D; }
#pe1-stage .pe1-r--new { background: #2E2512; }
#pe1-stage .pe1-bd b.y { border-color: #F7B23B; color: #F2F4F6; }
#pe1-stage .pe1-bd b.y i { background: #5A8FE0; }
#pe1-stage .pe1-bd b.nw, #pe1-stage .pe1-sc.is-new { background: #5A4210; color: #fff; }
#bp-stage-rc .bp-page { color: #16191D; }
#bp-stage-rc .bp-page svg [fill="#fff"] { fill: #fff; }
#bp-stage-rc .bp-page svg [stroke="#fff"] { stroke: #fff; }
#bp-stage-rc .bp-page svg [fill="#CFDDF1"] { fill: #CFDDF1; }
#bp-stage-rc .bp-page svg [fill="#6A9BEF"] { fill: #6A9BEF; }
#bp-stage-rc .bp-page svg [fill="#1B1F24"] { fill: #1B1F24; }
#bp-stage-rc .bp-page svg [stroke="#1B1F24"] { stroke: #1B1F24; }
#bp-stage-rc .hv-ic { color: #D9DCE0 !important; }
#bp-stage-rc .hv-top svg [stroke="#16191D"], #bp-stage-rc .bp-cust svg [stroke="#16191D"] { stroke: #D9DCE0; }
#bp-stage-rc .bp-print svg path { stroke: #fff; }
#bp-stage-rc .bp-cursor path { fill: #fff; stroke: #16191D; }
#bp-stage-rc .hv-fold { background: #25303D; }
#bp-stage-rc .hv-fold svg path { stroke: #D9DCE0; }
#bp-stage-rc .bp-chip { background: #1B212B; border-color: #303D4E; color: #D9DCE0; }
#bp-stage-rc .bp-gen { background: #1B212B; border-color: #25303D; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.8); color: #F2F4F6; }
#bp-stage-rc .bp-cust { background: #1B212B; border-right-color: #25303D; color: #D9DCE0; }
#bp-stage-rc .bp-sec { background: #25303D; }
#bp-stage-rc .bp-o i { background: #0E1216; border-color: #6B7884; }
#bp-stage-rc .bp-o i.on { border-color: #2B7BF3; }
#bp-stage-rc .bp-o i.ck { background: #2B7BF3; }
#bp-stage-rc .bp-prev { background: #0D1114; }
#bp-stage-rc .bp-page { box-shadow: none; }
#ai2-stage .tx2-card, #ex2-stage .tx2-card { background: #3A2A1E; border-color: #8A5428; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.8); }
#ai2-stage .tx2-card__band, #ex2-stage .tx2-card__band { background: repeating-linear-gradient(-45deg, #F78E3E 0 2.6px, #3A2A1E 2.6px 5.2px); border-color: #F78E3E; }
#ai2-stage .tx2-card__b, #ex2-stage .tx2-card__b { color: #D9DCE0; }
#ai2-stage .tx2-card__t, #ex2-stage .tx2-card__t { color: #fff; }
#ai2-stage .tx2-card__act, #ai2-stage .tx2-card__m, #ex2-stage .tx2-card__act, #ex2-stage .tx2-card__m { color: #C2AE9E; }
#ai2-stage .tx2-card__f, #ex2-stage .tx2-card__f { border-color: #5A3A22; color: #F2F4F6; }
#ai2-stage .tx2-card__f span, #ex2-stage .tx2-card__f span { border-color: #F78E3E; background: #5A3518; }
#ai2-stage .tx2-cur span, #ex2-stage .tx2-cur span { border-color: #25303D; }

#ai2-stage .hv-layer, #ex2-stage .hv-layer { top: -22px; }
#ai2-stage .ai2-an, #ex2-stage .ai2-an { height: 114px; background: #000; }
.ai2-tb { position: absolute; left: 6px; top: -25px; height: 18px; display: flex; align-items: center; gap: 2px; padding: 0 3px; background: #161D25; border-radius: 3px; }
.ai2-tb > span { width: 13px; height: 13px; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.ai2-tb > span.on { background: #0A4AA9; }
.ai2-tb > span svg { width: 9px; height: 9px; }
.ai2-tb > i { width: 1px; height: 10px; margin: 0 2px; background: #25303D; }
.ai2-tb em { display: flex; align-items: center; gap: 6px; height: 11px; padding: 0 3px 0 4px; border: 1px solid #303D4E; border-radius: 2px; font-style: normal; font-size: 5.5px; color: #CBD5E2; }
.ai2-tb em svg { width: 5px; height: 5px; }
.ai2-tabs, .ai2-tabs .hv-tabs__row { width: 150px; }
.ai2-tabs .hv-tabs__row { grid-template-columns: repeat(3, 1fr); }
.ai2-tabs .hv-tabs__ind { width: 50px; }
.ai2-cats { position: absolute; left: 0; right: 0; top: 21px; height: 13px; display: flex; align-items: center; padding: 0 6px; background: #141A21; font-size: 5.5px; color: #CBD5E2; }
.ai2-cats span { width: 42px; height: 100%; display: flex; align-items: center; justify-content: center; }
.ai2-cats span.on { color: #fff; box-shadow: inset 0 -1px 0 #CBD5E2; }
.ai2-cats em { margin-left: auto; padding: 1px 4px; border: 1px solid #CBD5E2; border-radius: 2px; font-style: normal; }
.ai2-tbl { position: absolute; left: 0; right: 0; top: 34px; }
.ai2-th, .ai2-r { position: relative; display: grid; grid-template-columns: 62px 36px 36px 30px minmax(0, 1fr); align-items: center; }
.ai2-th { height: 11px; background: #25303D; font-size: 5px; color: #999; }
.ai2-th span:nth-child(4) { height: 100%; display: flex; align-items: center; background: #303D4E; color: #fff; }
.ai2-th span, .ai2-r > span { padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai2-r { height: 13px; background: #0E1216; border-bottom: 1px solid #25303D; font-size: 6px; color: #CBD5E2; }
.ai2-r > span { position: relative; }
.ai2-r > span:nth-of-type(n+2) { text-align: right; }
.ai2-r > span:nth-of-type(4) { height: 100%; display: flex; align-items: center; justify-content: flex-end; background: #25303D; }
.ai2-hl { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #000; box-shadow: inset 2px 0 0 #EB9D20; opacity: 0; }
.ai2-lane { position: relative; height: 100%; }
.ai2-bar { position: absolute; left: 5px; top: 3px; height: 7px; display: flex; }
.ai2-bar b { height: 100%; display: flex; align-items: center; padding-left: 2px; overflow: hidden; white-space: nowrap; border-right: 0.5px solid rgba(0, 0, 0, 0.3); font-weight: 400; font-size: 4.5px; color: #fff; }
.ai2-bar .R { background: #C476C4; }
.ai2-bar .C { background: #69C793; }
.ai2-bar .I { background: #7B8CC7; }
.ai2-bar .A { background: #BD8B5C; }
.ai2-bar--o { opacity: 0; }
.ai2-bar--o b, .ai2-bar--o .R, .ai2-bar--o .C, .ai2-bar--o .I { background: #EB9D20; }
.ai2-bar--o .A { background: #BC7E1A; }

/* ---------- use case: AI strategy 3 (Blueprint: AI opportunities, people, tools, data lineage) ---------- */
#ai3-stage, #ma3-stage { overflow: hidden; }
#ai3-stage .bp-topb, #ai3-stage .bp-bview, #ma3-stage .bp-topb, #ma3-stage .bp-bview { opacity: 1; }
#ai3-stage .bp-page, #ma3-stage .bp-page { top: 4px; height: 268px; }
#ai3-stage .bp-hd, #ma3-stage .bp-hd { top: 74px; }
#ai3-stage .bp-wm, #ma3-stage .bp-wm { top: 63px; }
#ai3-stage .bp-cust .bp-o, #ma3-stage .bp-cust .bp-o { height: 10px; }
.ai3-lane { position: absolute; left: 12px; width: 370px; display: grid; grid-template-columns: 110px repeat(4, 1fr); grid-auto-rows: 11px; gap: 1px; font-size: 6px; }
.ai3-lane span { display: flex; align-items: center; color: #3D4953; opacity: 0; }
.ai3-lane .h { font-family: var(--font-mono); font-size: 5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6B7884; }
.ai3-lane b { position: relative; display: flex; align-items: center; justify-content: center; font-size: 6px; font-weight: 600; opacity: 0; }
.ai3-lane .r { background: #F4C2EE; }
.ai3-lane .a { background: #F6CFAE; }
.ai3-lane .c { background: #BDEBD5; }
.ai3-lane .i { background: #CBD2F6; }
.ai3-lane .t { background: #CBD5E2; }
.ai3-lane .d { margin: 1.5px 6px; border-radius: 2px; font-size: 5px; font-weight: 400; color: #16191D; box-shadow: inset 0 0 0 0.6px rgba(22, 25, 29, 0.18); }
.ai3-lane .cr { background: #BDEBD5; }
.ai3-lane .vw { background: #EEF2F6; }
.ai3-lane .up { background: #CBD2F6; }
.ai3-ln { position: absolute; height: 0.8px; background: #7B8794; transform-origin: 0 50%; transform: scaleX(0); }

/* Smart Signal note: orange box under the step name in the Blueprint header */
.bp-sgnote { position: absolute; top: 98px; width: 61px; overflow: hidden; background: #FFF6EC; border: 0.6px solid #F6C9A0; font-family: var(--font-mono); font-size: 3.6px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: #C95A14; white-space: nowrap; padding-bottom: 2.5px; opacity: 0; }
.bp-sgnote i { display: block; height: 2.4px; margin-bottom: 2px; background: repeating-linear-gradient(-45deg, #F78E3E 0 1px, #FFF6EC 1px 2px); }
.bp-sgnote { text-indent: 3px; }
[data-bp-mode="signals"] .bp-sgnote { top: 104px; }
[data-bp-mode="signals"] .bp-sw { top: 120px; }

.bp-sgdot { width: 16px; height: 16px; background: repeating-linear-gradient(-45deg, #F78E3E 0 1.1px, #FFF3E6 1.1px 2.3px); box-shadow: 0 0 0 0.7px #F78E3E; -webkit-mask: radial-gradient(circle, transparent 4.4px, #000 4.8px); mask: radial-gradient(circle, transparent 4.4px, #000 4.8px); }

/* ---------- use case: Experience 1 (Execution Intelligence modal over Design, then 3 flows) ---------- */
#ex1-stage { overflow: hidden; }
#ex1-stage .hv-canvas { width: 100%; }
#ex1-stage .hv-layer { width: 660px; height: 345px; transform: scale(0.8); transform-origin: 0 0; }
#ex1-stage .hv-node__lbl { left: -32px; width: 64px; }
.ex1-lane { position: absolute; left: 24px; font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.1em; text-transform: uppercase; color: #485A66; white-space: nowrap; opacity: 0; }
.ex1-modal { left: 66px; top: 64px; width: 468px; height: 250px; overflow: hidden; border-radius: 8px; transform-origin: 50% 50%; box-shadow: 0 22px 50px -18px rgba(15, 20, 24, 0.35); }
.ex1-hd { position: absolute; left: 12px; right: 12px; top: 10px; height: 26px; display: flex; align-items: center; gap: 14px; }
.ex1-t { display: flex; flex-direction: column; gap: 3px; margin-right: auto; }
.ex1-t b { font-size: 10px; font-weight: 600; }
.ex1-t span { font-family: var(--font-mono); font-size: 5px; letter-spacing: 0.1em; text-transform: uppercase; color: #485A66; }
.ex1-st { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ex1-st span { font-size: 5.5px; color: #485A66; }
.ex1-st b { font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ex1-btn { width: 88px; margin-top: 0; }
.ex1-tbl { position: absolute; left: 12px; right: 12px; top: 46px; background: #fff; border: 1px solid #DCE3EA; border-radius: 4px; overflow: hidden; }
.ex1-th, .ex1-r { display: grid; grid-template-columns: 54px minmax(0, 1fr) 58px 56px 56px; align-items: center; column-gap: 7px; padding: 0 8px; }
.ex1-th { height: 16px; background: #EEF2F6; font-family: var(--font-mono); font-size: 4.8px; letter-spacing: 0.1em; text-transform: uppercase; color: #485A66; }
.ex1-r { height: 30px; border-top: 1px solid #E3E8EC; font-size: 6px; color: #16191D; opacity: 0; }
.ex1-r > span:first-child { font-weight: 600; }
.ex1-q { line-height: 1.35; color: #2B3238; text-wrap: pretty; }
.ex1-pc { display: flex; align-items: center; gap: 4px; }
.ex1-pc b { width: 18px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.ex1-pc i { flex: 1; height: 3px; border-radius: 2px; background: #E3E8EC; overflow: hidden; }
.ex1-pc u { display: block; width: 0; height: 100%; background: #2B7BF3; }
.ex1-pc--hi u { background: #1DB45A; }
.ex1-pc--mid u { background: #F29B0E; }
.ex1-pc--lo u { background: #EE4B3F; }

/* ---------- use case: Risk and compliance 2 (Evidence search, laid out like the product) ---------- */
#rc2-stage { overflow: hidden; }
#rc2-stage .hv-canvas { width: 100%; }
#rc2-stage .hv-layer { width: 528px; }
#rc2-stage .rc2-an { height: 178px; background: #fff; }
.rc2-draft { margin-left: auto; padding: 2px 7px; border-radius: 2px; background: #F29B0E; color: #16191D; font-size: 6px; }
.rc2-bar { position: absolute; left: 8px; right: 8px; top: 22px; height: 15px; display: flex; align-items: center; gap: 8px; }
.rc2-back { display: flex; align-items: center; gap: 2px; font-size: 6.5px; }
.rc2-back svg { width: 6px; height: 6px; }
.rc2-search { flex: 1; height: 15px; display: flex; align-items: center; gap: 5px; padding: 0 2px 0 6px; background: #fff; border: 1px solid #8A96A3; border-radius: 2px; font-size: 6.5px; }
.rc2-search > svg { flex: none; width: 7px; height: 7px; }
.rc2-caret { width: 0.8px; height: 8px; margin-left: -4px; background: #2B7BF3; }
.rc2-go { margin-left: auto; width: 11px; height: 11px; display: flex; align-items: center; justify-content: center; border-radius: 2px; background: #2B7BF3; }
.rc2-go svg { width: 8px; height: 8px; }
.rc2-dl { width: 8px; height: 8px; }
.rc2-res { position: absolute; left: 0; right: 0; top: 42px; bottom: 0; display: grid; grid-template-columns: 138px minmax(0, 1fr); grid-template-rows: 1fr 1fr; border-top: 1px solid #DCE3EA; }
.rc2-ans { grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; padding: 7px 9px 8px; border-right: 1px solid #DCE3EA; opacity: 0; }
.rc2-ans p { margin: 0; font-size: 7px; line-height: 1.42; color: #16191D; text-wrap: pretty; }
.rc2-cnt { font-size: 5px; color: #485A66; }
.rc2-f { display: grid; grid-template-columns: 118px minmax(0, 1fr); border-bottom: 1px solid #DCE3EA; opacity: 0; }
.rc2-fx { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-right: 1px solid #DCE3EA; }
.rc2-fx p { margin: 0; font-size: 6px; line-height: 1.38; color: #16191D; text-wrap: pretty; }
.rc2-fx span { font-size: 5px; color: #485A66; }
.rc2-qs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px 6px; align-items: start; }
.rc2-qc { display: flex; flex-direction: column; gap: 4px; padding: 4px 6px 5px; background: #F4F7FB; border-left: 1px solid #8A96A3; opacity: 0; }
.rc2-qc p { margin: 0; font-size: 5.8px; line-height: 1.38; font-style: italic; color: #16191D; text-wrap: pretty; }
.rc2-qc span { display: flex; align-items: center; justify-content: space-between; font-size: 4.8px; color: #485A66; }
.rc2-qc span svg { width: 5px; height: 5px; }
/* ---------- use case: Experience 3 (right-click subevent, Blueprint for just that) ---------- */
.bp-ctx { left: 0; top: 0; width: 96px; padding: 3px; display: flex; flex-direction: column; font-size: 6.5px; border-radius: 4px; transform-origin: 0 0; z-index: 2; }
.bp-ctx span { padding: 4px 6px; border-radius: 2px; }
.bp-ctx span.on { background: #E6EEFB; color: #1C5FC4; }
#bp-stage-ex .bp-sub { display: none; }

/* Static fallback: set UC_ANIMATED = false in redesign-runtime.js (or add ?static=1) to show the original images */
.uc-steps__media .frame > img.uc-static { display: none; }
html.uc-static .uc-steps__media .frame > img.uc-static { display: block; }
html.uc-static .uc-steps__media .frame .hv-stage { display: none; }
/* How it works: Smart Signals stage in dark mode */
#sg-stage .hv-num, #sg-stage .hv-dur .k { color: #959596; }
#sg-stage .hv-dur span:not(.k) { background: #151B22; border-color: #25303D; color: #D9DCE0; }
#sg-stage .hv-res > div { border-bottom-color: #25303D; }
#sg-stage .hv-res em { color: #5A9BFF; }
#sg-stage .hv-fold { background: #25303D; }
#sg-stage .hv-fold svg path { stroke: #D9DCE0; }
#sg-stage .hv-top svg [stroke="#16191D"] { stroke: #B3B3B3; }
#sg-stage .sg-stats .sg-cost { color: #3DDC84; }
#sg-stage .sg-mini { background: #2A1F14; border-color: #6B4520; }
#sg-stage .sg-mini__band { background: repeating-linear-gradient(-45deg, #F78E3E 0 1.6px, #2A1F14 1.6px 3.2px); }
#sg-stage .sg-card { background: #2A1F14; border-color: #6B4520; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.8); }
#sg-stage .sg-card__band { background: repeating-linear-gradient(-45deg, #F78E3E 0 2.4px, #2A1F14 2.4px 4.8px); }
#sg-stage .sg-card__b { color: #D9DCE0; }
#sg-stage .sg-card__t { color: #fff; }
#sg-stage .sg-card__f { border-top-color: #6B4520; color: #D9DCE0; }
#sg-stage .sg-card__f span { background: #5A3514; color: #FFD9B8; }