/* ============================================================
   In-page cinematic demos for the tabbed section.
   Each panel holds a "stage" authored at
   a fixed 1200×750 canvas, scaled to fit its frame. Inside the
   stage, .demo-cam is the camera (translate + scale, driven by
   GSAP from js/demos.js) and .demo-cursor is a scripted pointer.
   Without JS the stages render their finished state as a still.
   ============================================================ */

/* ---------- Stage / camera chrome ---------- */
.demo-shell { aspect-ratio: 1200 / 750; position: relative; }
.demo-scale {
  position: absolute;
  left: 0; top: 0;
  width: 1200px; height: 750px;
  transform-origin: 0 0;          /* js sets scale = frameWidth / 1200 */
}
.demo-stage {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: "Geist", Arial, sans-serif;
  color: #1b1b1b;
  background: linear-gradient(165deg, #dde6f2 0%, #edf1f7 52%, #e2eaf4 100%);
  cursor: default;
  user-select: none;
}
/* dot grid + soft top light + faint blue atmosphere */
.demo-stage::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 55% at 50% -8%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(50% 60% at 88% 100%, rgba(76,150,247,.14), transparent 70%),
    radial-gradient(rgba(27,27,27,.07) 1px, transparent 1.3px);
  background-size: auto, auto, 24px 24px;
}
/* lens vignette — sits above the UI so zooms feel like a camera, not a scroll */
.demo-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 95% at 50% 45%, transparent 62%, rgba(15,40,90,.1) 100%);
  pointer-events: none;
}
.demo-par { width: 100%; height: 100%; will-change: transform; }   /* real-mouse parallax layer */
.demo-cam { position: relative; width: 100%; height: 100%; will-change: transform; }

/* scripted pointer — lives inside the camera so it zooms like a recording */
.demo-cursor {
  position: absolute; left: 0; top: 0;
  width: 26px;
  z-index: 40;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(10,30,70,.35));
}
.demo-cursor svg { display: block; width: 100%; }

.demo-click {
  position: absolute;
  z-index: 39;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 2.5px solid rgba(5,99,233,.6);
  border-radius: 50%;
  pointer-events: none;
  animation: demoClick .55s ease-out forwards;
}
@keyframes demoClick {
  from { transform: scale(.25); opacity: .9; }
  to   { transform: scale(1.5); opacity: 0; }
}

/* ---------- Shared fake-UI primitives ---------- */
.dui-window {
  position: absolute;
  background: #fff;
  border: 1px solid #e7eaf1;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(15,40,90,.16), 0 4px 14px rgba(15,40,90,.08);
  overflow: hidden;
}
.dui-titlebar {
  display: flex; align-items: center; gap: 7px;
  padding: 14px 20px;
  border-bottom: 1px solid #eef0f5;
  background: #fbfcfe;
  font-size: 13px;
  color: #6f7785;
}
.dui-dot { width: 10px; height: 10px; border-radius: 50%; background: #e3e7ef; flex-shrink: 0; }
.dui-title { font-weight: 600; color: #1b1b1b; font-size: 13.5px; margin-left: 8px; }
.dui-live { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #16a05c; }
.dui-live i { width: 7px; height: 7px; border-radius: 50%; background: #16a05c; animation: duiPulse 1.8s ease-in-out infinite; }
@keyframes duiPulse { 50% { opacity: .35; transform: scale(.8); } }
.dui-label {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #98a0ad;
  font-weight: 600;
}
.dui-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #16a05c;
  position: relative;
  flex-shrink: 0;
}
.dui-check::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 4.5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  /* Centre the rotated tick on the circle's middle. The old fixed left/top
     offsets drifted low/right because the 2px borders grow the box past the
     width/height the offsets were eyeballed against; translate keeps it
     centred at any size (so the bento override only needs new arm lengths). */
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* typed text + blinking caret */
.t { white-space: pre-wrap; }
.t.typing::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1em;
  vertical-align: -2px;
  background: #0563e9;
  margin-left: 2px;
  animation: demoCaret .7s steps(1) infinite;
}
@keyframes demoCaret { 50% { opacity: 0; } }

/* ============================================================
   Scene 1 — AI Audit: process list gets scanned, hours counted,
   priorities stamped, roadmap drawn.
   ============================================================ */
.audit-win { left: 95px; top: 75px; width: 1010px; height: 600px; }
.audit-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 26px;
  padding: 26px;
  height: calc(100% - 49px);
}
.audit-list-head { display: flex; justify-content: space-between; padding: 0 18px 12px; }
.audit-row {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 196px 1fr 78px 118px;
  align-items: center;
  gap: 16px;
  padding: 17px 18px;
  margin-bottom: 11px;
  border: 1px solid #edeff4;
  border-radius: 14px;
  background: #fdfdfe;
}
.audit-name { display: block; font-weight: 600; font-size: 15.5px; }
.audit-dept { display: block; font-size: 12px; color: #98a0ad; margin-top: 2px; }
.audit-meter { height: 8px; border-radius: 6px; background: #eef1f6; overflow: hidden; }
.audit-meter i {
  display: block; height: 100%; width: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #4c96f7, #0563e9);
}
.audit-hours { font-size: 13px; color: #6f7785; white-space: nowrap; }
.audit-hours b { font-size: 19px; font-weight: 600; color: #1b1b1b; font-variant-numeric: tabular-nums; }
.audit-flag {
  justify-self: end;
  font-size: 11.5px; font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(5,99,233,.1);
  color: #0563e9;
  white-space: nowrap;
}
.audit-flag.flag-later { background: #f1f3f7; color: #6f7785; }
/* light sweep while a row is being "analyzed" */
.audit-row.scanning::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(76,150,247,.2) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: auditScan .8s ease-out forwards;
}
@keyframes auditScan { to { transform: translateX(100%); } }

.audit-side {
  border: 1px solid #edeff4;
  border-radius: 14px;
  padding: 22px;
  background: #fbfcfe;
  display: flex; flex-direction: column; gap: 20px;
}
.audit-total { margin-top: 8px; font-family: "Geist", Arial, sans-serif; font-weight: 600; font-size: 62px; line-height: 1; letter-spacing: -.01em; }
.audit-total em {
  font-family: "Geist", Arial, sans-serif;
  font-style: italic; font-weight: 400;
  font-size: 21px; color: #6f7785;
  margin-left: 7px; letter-spacing: 0;
}
.audit-roadmap { display: flex; flex-direction: column; gap: 11px; }
.road-phase { font-size: 12.5px; color: #3c434f; font-weight: 500; }
.road-track {
  display: block;
  height: 7px; margin-top: 6px;
  border-radius: 6px;
  background: #eef1f6;
  overflow: hidden;
}
.road-track i { display: block; height: 100%; width: var(--w, 60%); border-radius: 6px; background: #0563e9; }
.road-2 i { background: #4c96f7; }
.road-3 i { background: #9cc3fb; }
.audit-verdict {
  margin-top: auto;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(22,160,92,.1);
  color: #0e7c46;
  font-weight: 600;
  font-size: 13.5px;
}

/* ============================================================
   Scene 2 — Operational Systems: a document travels through the
   pipeline, fields type themselves, checks pass, CRM updates.
   ============================================================ */
.ops-win { left: 70px; top: 65px; width: 1060px; height: 620px; }
.ops-canvas { position: relative; height: 472px; }
.ops-links { position: absolute; inset: 0; width: 100%; height: 100%; }
.ops-links path {
  fill: none;
  stroke: #c8d4e6;
  stroke-width: 2;
  stroke-dasharray: 5 9;
  stroke-linecap: round;
  animation: opsDash 1.1s linear infinite;
}
@keyframes opsDash { to { stroke-dashoffset: -14; } }

.ops-node {
  position: absolute;
  width: 216px;
  border: 1px solid #e7eaf1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15,40,90,.07);
  padding-bottom: 14px;
}
.ops-node header {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid #eef0f5;
  font-weight: 600; font-size: 14px;
}
.ops-ico { width: 10px; height: 10px; border-radius: 3px; background: #0563e9; flex-shrink: 0; }
.ops-node-inbox    { left: 24px;  top: 150px; }
.ops-node-extract  { left: 290px; top: 112px; }
.ops-node-validate { left: 556px; top: 142px; }
.ops-node-crm      { left: 822px; top: 118px; }
.ops-node-extract .ops-ico  { background: #4c96f7; }
.ops-node-validate .ops-ico { background: #16a05c; }
.ops-node-crm .ops-ico      { background: #8a93a6; }

.ops-chip {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 14px 0;
  padding: 9px 11px;
  border: 1px dashed #dfe5ef;
  border-radius: 9px;
  font-size: 12.5px;
  color: #6f7785;
}
.ops-waiting { display: block; margin: 10px 16px 0; font-size: 11.5px; color: #98a0ad; }

.ops-fields { padding: 10px 16px 0; display: flex; flex-direction: column; gap: 11px; }
.ops-field label {
  display: block;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: #98a0ad;
  margin-bottom: 3px;
}
.ops-field .t {
  display: block;
  min-height: 22px;
  font-size: 14.5px; font-weight: 500;
  border-bottom: 1.5px solid #e7eaf1;
  padding-bottom: 3px;
  font-variant-numeric: tabular-nums;
}

.ops-check {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 16px;
  font-size: 13.5px;
}

.ops-rowline {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 16px;
  font-size: 12.5px;
  color: #3c434f;
  border-bottom: 1px dashed #eef0f5;
  font-variant-numeric: tabular-nums;
}
.ops-rowline b { font-weight: 600; color: #1b1b1b; }
.ops-newrow {
  border-bottom: none;
  border-radius: 8px;
  margin: 2px 8px 0;
  padding: 9px 8px;
  background: rgba(5,99,233,.08);
}

/* the traveling document card */
.ops-doc {
  position: absolute; left: 0; top: 0;
  z-index: 30;
  display: flex; align-items: center; gap: 8px;
  width: 158px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #d6e2f5;
  border-radius: 11px;
  box-shadow: 0 14px 30px rgba(15,40,90,.18);
  font-size: 12.5px; font-weight: 600;
}
.ops-doc svg { flex-shrink: 0; }

.ops-stats {
  display: flex; gap: 30px;
  padding: 17px 24px;
  border-top: 1px solid #eef0f5;
  font-size: 13px;
  color: #6f7785;
}
.ops-stats b {
  color: #1b1b1b;
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Scene 3 — AI Agents: drafted reply, guardrails, human approval,
   audit log.
   ============================================================ */
.agent-win { left: 85px; top: 65px; width: 1030px; height: 620px; }
.agent-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  padding: 24px;
  height: calc(100% - 49px);
}
.agent-thread { display: flex; flex-direction: column; gap: 16px; padding: 6px 4px; }
.msg {
  max-width: 430px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.45;
}
.msg-who {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: .03em;
  color: #98a0ad;
  margin-bottom: 6px;
}
.msg-cust {
  align-self: flex-start;
  background: #f1f4f9;
  border-bottom-left-radius: 4px;
}
.msg-ai {
  align-self: flex-end;
  width: 430px;
  background: #fff;
  border: 1px solid #dbe7fb;
  border-bottom-right-radius: 4px;
  box-shadow: 0 8px 24px rgba(5,99,233,.07);
  transition: border-color .5s ease;
}
.msg-ai.is-sent { border-color: rgba(22,160,92,.45); }
.msg-ai .t { display: block; min-height: 84px; }
.msg-state {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 11px;
  font-size: 11.5px; font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: #fdf3e3;
  color: #b07b1e;
}
.msg-state.ok { background: rgba(22,160,92,.12); color: #0e7c46; }

.agent-typing {
  align-self: flex-end;
  display: flex; gap: 5px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid #e7eaf1;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
}
.agent-typing i { width: 7px; height: 7px; border-radius: 50%; background: #b9c4d6; animation: dotBob 1s ease-in-out infinite; }
.agent-typing i:nth-child(2) { animation-delay: .15s; }
.agent-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dotBob { 40% { transform: translateY(-4px); opacity: .6; } }

.agent-rail {
  border: 1px solid #edeff4;
  border-radius: 14px;
  background: #fbfcfe;
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.guard {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 13px;
  font-size: 13.5px; font-weight: 500;
  background: #fff;
  border: 1px solid #edeff4;
  border-radius: 10px;
}
.guard-approval.pulsing { animation: guardPulse 1.1s ease-in-out 2; }
@keyframes guardPulse {
  50% { box-shadow: 0 0 0 5px rgba(5,99,233,.16); border-color: rgba(5,99,233,.5); }
}
.g-btn {
  font-size: 12.5px; font-weight: 600;
  padding: 8px 15px;
  border-radius: 8px;
  background: #1b1b1b;
  color: #fff;
  transition: background-color .35s ease;
}
.g-btn.is-approved { background: #16a05c; }

.agent-log { margin-top: auto; display: flex; flex-direction: column; gap: 7px; }
.agent-log .dui-label { margin-bottom: 2px; }
.log-line {
  font-size: 12px;
  color: #6f7785;
  font-variant-numeric: tabular-nums;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid #f0f2f6;
  border-radius: 7px;
}
.log-line.log-approve {
  color: #0e7c46;
  background: rgba(22,160,92,.07);
  border-color: rgba(22,160,92,.25);
}

/* ---------- Reduced motion: stages stay as composed stills ---------- */
@media (prefers-reduced-motion: reduce) {
  .demo-cursor, .demo-click { display: none; }
  .ops-links path, .dui-live i, .agent-typing i { animation: none; }
}

/* ============================================================
   Bento card minis — coded stills for the bento cards.
   Each is authored on a fixed 600×300 canvas and
   scaled to its card's width by main.js (cardMinis), the same
   trick the demo stages use. Static apart from the ambient
   pulse/dash/spin loops; no GSAP required.
   ============================================================ */
.card-mini { position: relative; aspect-ratio: 2 / 1; overflow: hidden; }
.cui-canvas {
  position: absolute; left: 0; top: 0;
  width: 600px; height: 300px;
  transform-origin: 0 0;
  transform: scale(.95);          /* no-JS approximation — JS sets the exact fit */
}
/* Transparent stage: the panels float directly on the card's blue
   glass — no opaque backdrop rectangle. Only
   a faint white dot grid, fading out toward the edges. */
.cui-stage {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: "Geist", Arial, sans-serif;
  color: #1b1b1b;
  user-select: none;
}
.cui-stage::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(rgba(255,255,255,.38) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(85% 85% at 50% 45%, #000 35%, transparent 100%);
          mask-image: radial-gradient(85% 85% at 50% 45%, #000 35%, transparent 100%);
}

/* shared mini primitives — smaller cousins of the dui- set above */
.cui-win {
  position: absolute;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(8,40,90,.3), 0 4px 12px rgba(8,40,90,.12);
}
.cui-titlebar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(27,27,27,.07);
  border-radius: 14px 14px 0 0;
  background: rgba(27,27,27,.03);
}
.cui-titlebar .dui-dot { width: 8px; height: 8px; }
.cui-title { font-weight: 600; font-size: 12px; margin-left: 5px; }
.cui-titlebar .dui-live { font-size: 10px; }
.cui-canvas .dui-label { font-size: 9.5px; }
.cui-canvas .dui-check { width: 16px; height: 16px; }
.cui-canvas .dui-check::after { width: 6px; height: 3.5px; }  /* centring inherited from base */
.cui-toast {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 11px;
  box-shadow: 0 16px 40px rgba(8,40,90,.28);
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.cui-links { position: absolute; inset: 0; width: 100%; height: 100%; }
.cui-links path {
  fill: none;
  stroke: rgba(255,255,255,.65);
  stroke-width: 2;
  stroke-dasharray: 5 9;
  stroke-linecap: round;
  animation: opsDash 1.1s linear infinite;
}

/* --- Mini 1 · AI Audit: ranked processes + recoverable-hours tally --- */
.cua-win { left: 24px; top: 26px; width: 404px; }
.cua-rows { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.cua-row {
  display: grid;
  grid-template-columns: 112px 1fr 44px 84px;
  align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid #edeff4;
  border-radius: 10px;
  background: #fdfdfe;
}
.cua-name { display: block; font-weight: 600; font-size: 12px; line-height: 1.2; white-space: nowrap; }
.cua-dept { display: block; font-size: 9.5px; color: #98a0ad; margin-top: 2px; }
.cua-meter { height: 6px; border-radius: 4px; background: #eef1f6; overflow: hidden; }
.cua-meter i {
  display: block; height: 100%; width: var(--w, 60%);
  border-radius: 4px;
  background: linear-gradient(90deg, #4c96f7, #0563e9);
}
.cua-hrs { font-size: 10px; color: #6f7785; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cua-hrs b { font-size: 13px; font-weight: 600; color: #1b1b1b; }
.cua-flag {
  justify-self: end;
  font-size: 9.5px; font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(5,99,233,.1);
  color: #0563e9;
  white-space: nowrap;
}
.cua-flag.is-later { background: #f1f3f7; color: #6f7785; }
.cua-side {
  position: absolute; left: 448px; top: 44px; width: 128px;
  padding: 14px 16px 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(8,40,90,.3);
}
.cua-total { margin-top: 6px; font-family: "Geist", Arial, sans-serif; font-weight: 600; font-size: 42px; line-height: 1; letter-spacing: -.01em; }
.cua-total em {
  font-family: "Geist", Arial, sans-serif;
  font-style: italic; font-weight: 400;
  font-size: 14px; color: #6f7785;
  margin-left: 4px;
}
.cua-verdict {
  margin-top: 10px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(22,160,92,.1);
  color: #0e7c46;
  font-size: 10.5px; font-weight: 600;
}

/* --- Mini 2 · Operational systems: run feed + result toasts --- */
.cuo-win { left: 26px; top: 30px; width: 296px; }
.cuo-steps { padding: 6px 14px 8px; display: flex; flex-direction: column; }
.cuo-step {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px;
  font-size: 12.5px; font-weight: 500;
  border-bottom: 1px dashed #eef0f5;
}
.cuo-step:last-child { border-bottom: none; }
.cuo-when { margin-left: auto; font-size: 10px; color: #98a0ad; font-variant-numeric: tabular-nums; }
.cuo-run {
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(5,99,233,.22);
  border-top-color: #0563e9;
  animation: cuoSpin 1s linear infinite;
}
@keyframes cuoSpin { to { rotate: 360deg; } }
.cuo-t1 { left: 348px; top: 42px; }
.cuo-t2 { left: 374px; top: 96px; }
.cuo-log {
  position: absolute; left: 360px; top: 158px; width: 208px;
  padding: 14px 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(8,40,90,.3);
  display: flex; flex-direction: column; gap: 7px;
}
/* color repeated here: these are <p>s inside .card, whose `.card p`
   white would otherwise outrank the base .log-line gray */
.cuo-log .log-line { font-size: 11px; padding: 6px 9px; color: #6f7785; max-width: none; }
.cuo-log .log-line b { font-weight: 600; color: #1b1b1b; }

/* --- Mini 3 · AI Agents: drafted reply awaiting human approval --- */
.cga-win { left: 24px; top: 26px; width: 372px; }
.cga-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cga-msg {
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 12px; line-height: 1.4;
  max-width: 296px;
}
.cga-who {
  display: block;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .03em;
  color: #98a0ad;
  margin-bottom: 4px;
}
.cga-cust {
  align-self: flex-start;
  background: #f1f4f9;
  border-bottom-left-radius: 4px;
}
.cga-ai {
  align-self: flex-end;
  background: #fff;
  border: 1px solid #dbe7fb;
  border-bottom-right-radius: 4px;
  box-shadow: 0 8px 24px rgba(5,99,233,.07);
}
.cga-state {
  display: inline-flex;
  margin-top: 8px;
  font-size: 9.5px; font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fdf3e3;
  color: #b07b1e;
}
.cga-rail {
  position: absolute; left: 382px; top: 52px; width: 178px;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(8,40,90,.3);
  display: flex; flex-direction: column; gap: 8px;
}
.cga-guard {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px;
  font-size: 11px; font-weight: 500;
  background: #fff;
  border: 1px solid #edeff4;
  border-radius: 9px;
}
.cga-btn {
  font-size: 10px; font-weight: 600;
  padding: 5px 10px;
  border-radius: 7px;
  background: #1b1b1b;
  color: #fff;
}

/* --- Mini 4 · Custom builds: integration node canvas + deploy toast --- */
.cub-node {
  position: absolute;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(8,40,90,.26);
  padding: 12px 14px;
}
.cub-node header { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.cub-sub { display: block; font-size: 10px; color: #98a0ad; margin-top: 3px; white-space: nowrap; }
.cub-ico { width: 9px; height: 9px; border-radius: 3px; background: #8a93a6; flex-shrink: 0; }
.cub-shopify { left: 34px; top: 52px; }
.cub-shopify .cub-ico { background: #16a05c; }
.cub-core { left: 224px; top: 104px; box-shadow: 0 18px 46px rgba(5,99,233,.32); }
.cub-core .cub-ico { background: #0563e9; }
.cub-api { left: 446px; top: 44px; }
.cub-slack { left: 452px; top: 198px; }
.cub-slack .cub-ico { background: #4c96f7; }
.cub-toast { left: 48px; top: 216px; }
.cub-toast .dui-check { background: #16a05c; }

/* The bento minis are decorative product shots, not live dashboards. Their
   always-running keyframes (pulse dot, sync spinner, connector dashes) repaint
   every frame while the cards are onscreen — and you scroll past them with the
   WebGL sky already redrawing at 60fps, so the extra per-frame paint reads as
   laggy text even though the frame rate itself holds. pauseOffscreenAnims only
   stops them while offscreen, the one time they're already idle, so it can't
   help during the scroll-past. Freeze them outright: the static mockups look
   identical at a glance, and this covers reduced-motion users too.
   (dui-live is shared with the big tabbed demos — scope to .cui-canvas so only
   the bento minis freeze and the focal demos keep their motion.) */
.cui-canvas .dui-live i,
.cui-links path,
.cuo-run {
  animation: none;
}