/* ============================================================
   universal-hero · module CSS
   ------------------------------------------------------------
   Visual presets (dashboard / iot_map / visual_evidence) are
   concatenated below from partials/visuals/*.css. The original
   partial files are kept alongside as canonical sources for
   easier per-preset diffing. HubSpot doesn't reliably resolve
   @import url() with relative paths, so we ship a single bundle.
   Legacy .oc-callout styles (floating callouts over the
   dashboard preset) live at the bottom.
   ============================================================ */

/* =============================================================================
   universal-hero · preset partial CSS — dashboard
   ---------------------------------------------------------------------------
   PORT-READY. Drop this file straight into the universal-hero module — no
   selector renames required.

   Suggested location:
     ocapii-hubspot-theme/modules/universal-hero.module/partials/visuals/dashboard.css

   Source (visual reference — DO NOT also ship the source):
     prototype/universal-hero-presets.css (lines 212-490)

   Root selector: .u-hero__visual--dashboard
   HubL partial: partials/visuals/dashboard.html (mirror prototype/universal-hero-presets-dashboard.jsx) — note: replaces the current nested {% module "hero_dash" path="../dashboard-showcase" %} block.

   Tokens consumed from ocapii-hubspot-theme/css/variables.css:
     --jade, --jade-bright, --intel, --intel-bright, --amber, --ember, --slate,
     --bg-0..4, --line, --line-strong, --text, --text-mute, --text-dim, --white,
     --radius, --radius-lg, --font-display.
============================================================================= */

/* =============================================================================
   PRESET: dashboard — Live dashboard mock
   Self-contained — does not reuse existing prototype CSS.
============================================================================= */
.u-hero__visual--dashboard {
  position: relative;
  width: 100%; max-width: 640px;
}
.u-hero__visual--dashboard__card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-2) 0%, #0f1419 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
}

/* Chrome */
.u-hero__visual--dashboard__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11.5px; letter-spacing: .08em;
  color: var(--text-mute);
  background: rgba(0,0,0,.18);
  white-space: nowrap;
}
.u-hero__visual--dashboard__dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--bg-4); border: 1px solid var(--line-strong);
}
.u-hero__visual--dashboard__dot:nth-child(1) { background: #C0392B; opacity: .85; }
.u-hero__visual--dashboard__dot:nth-child(2) { background: #D4860A; opacity: .85; }
.u-hero__visual--dashboard__dot:nth-child(3) { background: #42B655; opacity: .85; }
.u-hero__visual--dashboard__label {
  margin-left: 8px; text-transform: uppercase; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.u-hero__visual--dashboard__live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--jade);
  letter-spacing: .14em;
  padding: 3px 9px;
  border: 1px solid rgba(66,182,85,.45);
  border-radius: 999px;
  background: rgba(66,182,85,.08);
}
.u-hero__visual--dashboard__pulse {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--jade);
  box-shadow: 0 0 10px var(--jade);
  animation: livePulse 1.6s ease-in-out infinite;
}

/* Body */
.u-hero__visual--dashboard__body {
  position: relative;
  padding: 22px 22px 18px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 18px;
}

/* Scanning line */
.u-hero__visual--dashboard__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(66,182,85,.16) 50%, transparent 100%);
  width: 50%;
  animation: scanSweep 6s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes scanSweep {
  0%, 100% { transform: translateX(-30%); }
  50%      { transform: translateX(160%); }
}

/* KPI strip */
.u-hero__visual--dashboard__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.u-hero__visual--dashboard__kpi {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.u-hero__visual--dashboard__kpilbl {
  font-size: 10.5px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.u-hero__visual--dashboard__kpival {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--white);
  letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 6px;
}
.u-hero__visual--dashboard__kpival sup {
  font-size: 11px;
  font-weight: 600;
  color: var(--jade);
}
.u-hero__visual--dashboard__kpi--down .u-hero__visual--dashboard__kpival sup { color: var(--ember); }
.u-hero__visual--dashboard__kpitrend {
  margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
}
.u-hero__visual--dashboard__bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--bg-4);
  position: relative;
  overflow: hidden;
}
.u-hero__visual--dashboard__bar i {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  background: var(--jade);
  animation: barGrow 4s ease-in-out infinite alternate;
}
.u-hero__visual--dashboard__kpi:nth-child(2) .u-hero__visual--dashboard__bar i { background: var(--intel); animation-delay: .6s; }
.u-hero__visual--dashboard__kpi:nth-child(3) .u-hero__visual--dashboard__bar i { background: var(--amber); animation-delay: 1.2s; }
@keyframes barGrow {
  from { width: 35%; }
  to   { width: 82%; }
}

/* Trend chart */
.u-hero__visual--dashboard__chart {
  position: relative;
  height: 132px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(43,108,176,.06) 0%, transparent 60%),
    var(--bg-1);
  padding: 10px 12px 12px;
  overflow: hidden;
}
.u-hero__visual--dashboard__chartHdr {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  letter-spacing: .08em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.u-hero__visual--dashboard__chartHdr em {
  font-style: normal;
  color: var(--jade);
}
.u-hero__visual--dashboard__chartSvg {
  width: 100%; height: 90px;
  display: block;
}
.u-hero__visual--dashboard__chartSvg path.line {
  fill: none;
  stroke: var(--intel-bright);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 6px rgba(43,108,176,.6));
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: lineDraw 3.6s ease forwards;
}
@keyframes lineDraw { to { stroke-dashoffset: 0; } }
.u-hero__visual--dashboard__chartSvg path.area {
  fill: url(#u-hero-dashboard-area);
  opacity: 0;
  animation: areaFade .8s ease 1.4s forwards;
}
@keyframes areaFade { to { opacity: 1; } }
.u-hero__visual--dashboard__chartSvg circle.dot {
  fill: var(--jade);
  filter: drop-shadow(0 0 8px var(--jade));
  animation: livePulse 1.6s ease-in-out infinite;
}
.u-hero__visual--dashboard__chartGrid line {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

/* Ticker rows */
.u-hero__visual--dashboard__ticker {
  display: flex; flex-direction: column;
  gap: 6px;
  max-height: 96px;
  overflow: hidden;
}
.u-hero__visual--dashboard__tickerRow {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--jade);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text);
}
.u-hero__visual--dashboard__tickerRow:nth-child(2) { border-left-color: var(--intel); }
.u-hero__visual--dashboard__tickerRow:nth-child(3) { border-left-color: var(--amber); }
.u-hero__visual--dashboard__tickerTime {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  color: var(--text-dim);
}
.u-hero__visual--dashboard__tickerBody { color: var(--text); }
.u-hero__visual--dashboard__tickerSite {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  color: var(--text-dim);
}

/* Floating callout cards (use existing oc-callout style if needed; here we
   define a local variant scoped to this preset) */
.u-hero__visual--dashboard__callout {
  position: absolute;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: rgba(11,14,17,.85);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 36px -16px rgba(0,0,0,.7);
  font-size: 12.5px;
  color: var(--text);
  max-width: calc(100% - 32px);
  z-index: 2;
}
.u-hero__visual--dashboard__callout strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--white);
  margin-bottom: 2px;
}
.u-hero__visual--dashboard__callout small {
  font-size: 11px;
  color: var(--text-mute);
}
/* Slot positions - float clearly outside the frame edges. */
.u-hero__visual--dashboard__callout--tl { top:    -32px; left:  -36px; animation: oc-callout-bob      6s   ease-in-out  .8s infinite; }
.u-hero__visual--dashboard__callout--tr { top:     30%;  right: -36px; animation: oc-callout-bob-slow 6.5s ease-in-out 1.1s infinite; }
.u-hero__visual--dashboard__callout--br { bottom: -32px; right: -36px; animation: oc-callout-bob      7s   ease-in-out 1.3s infinite; }
.u-hero__visual--dashboard__callout--bl { bottom: -32px; left:  -36px; animation: oc-callout-bob-slow 7s   ease-in-out 1s   infinite; }
@media (prefers-reduced-motion: reduce) {
  .u-hero__visual--dashboard__callout--tl,
  .u-hero__visual--dashboard__callout--tr,
  .u-hero__visual--dashboard__callout--bl,
  .u-hero__visual--dashboard__callout--br {
    animation: none !important;
  }
}
@keyframes floatA {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes floatB {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(7px); }
}
.u-hero__visual--dashboard__calloutIcon {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(66,182,85,.16);
  color: var(--jade);
  display: grid;
  place-items: center; place-content: center;
  border: 1px solid rgba(66,182,85,.4);
  font-size: 0;
  line-height: 0;
}
.u-hero__visual--dashboard__calloutIcon svg {
  display: block;
  width: 18px;
  height: 18px;
  grid-area: 1 / 1;
}
.u-hero__visual--dashboard__callout--intel .u-hero__visual--dashboard__calloutIcon { background: rgba(43,108,176,.16); color: var(--intel-bright); border-color: rgba(43,108,176,.4); }
.u-hero__visual--dashboard__callout--amber .u-hero__visual--dashboard__calloutIcon { background: rgba(212,134,10,.16); color: var(--amber); border-color: rgba(212,134,10,.45); }
/* =============================================================================
   universal-hero · preset partial CSS — iot_map
   ---------------------------------------------------------------------------
   PORT-READY. Drop this file straight into the universal-hero module — no
   selector renames required.

   Suggested location:
     ocapii-hubspot-theme/modules/universal-hero.module/partials/visuals/iot_map.css

   Source (visual reference — DO NOT also ship the source):
     prototype/temperature-monitoring-page.css (lines 88-254)

   Root selector: .u-hero__visual--iot_map
   HubL partial: partials/visuals/iot_map.html (mirror prototype/universal-hero-presets-scene.jsx)

   Tokens consumed from ocapii-hubspot-theme/css/variables.css:
     --jade, --jade-bright, --intel, --intel-bright, --amber, --ember, --slate,
     --bg-0..4, --line, --line-strong, --text, --text-mute, --text-dim, --white,
     --radius, --radius-lg, --font-display.

   Animated IoT map (simplified mock — visual fidelity to module)
============================================================================= */
.u-hero__visual--iot_map {
  width: 100%;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: visible;          /* allow callouts to float over the chrome edge */
  position: relative;
}
.u-hero__visual--iot_map__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; color: var(--text-dim);
}
.u-hero__visual--iot_map__dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--line-strong);
}
.u-hero__visual--iot_map__dot:nth-child(1) { background: #ff5f57; }
.u-hero__visual--iot_map__dot:nth-child(2) { background: #febc2e; }
.u-hero__visual--iot_map__dot:nth-child(3) { background: #28c840; }
.u-hero__visual--iot_map__label { margin-left: 8px; }
.u-hero__visual--iot_map__live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--jade); font-weight: 700; letter-spacing: .08em;
}
.u-hero__visual--iot_map__pulse {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--jade); box-shadow: 0 0 10px var(--jade);
  animation: iot-pulse 1.6s ease-in-out infinite;
}
@keyframes iot-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .35; transform: scale(.7); }
}

.u-hero__visual--iot_map__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;           /* clip grid + scan + streams to the stage rect */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background:
    radial-gradient(700px 400px at 30% 20%, rgba(66,182,85,.10), transparent 60%),
    radial-gradient(700px 400px at 80% 80%, rgba(43,108,176,.10), transparent 60%),
    #0a0d11;
}
.u-hero__visual--iot_map__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at center, #000 50%, transparent 90%);
}
.u-hero__visual--iot_map__scan {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(66,182,85,.08), transparent);
  height: 25%;
  animation: iot-scan 5s linear infinite;
  pointer-events: none;
}
@keyframes iot-scan {
  0%   { transform: translateY(-30%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(120%); opacity: 0; }
}
.u-hero__visual--iot_map__streams {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .65;
}
.u-hero__visual--iot_map__streams path { animation: iot-dash 6s linear infinite; }
@keyframes iot-dash {
  to { stroke-dashoffset: -40; }
}

.u-hero__visual--iot_map__zone {
  position: absolute;
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.015);
}
.u-hero__visual--iot_map__zone span {
  position: absolute; top: 6px; left: 10px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .04em; color: var(--text-dim);
  text-transform: uppercase;
}

.u-hero__visual--iot_map__pin {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  animation: iot-pinin .6s both ease-out;
}
@keyframes iot-pinin {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}
.u-hero__visual--iot_map__pin--ok    { background: rgba(66,182,85,.18);  color: var(--jade); border: 1px solid rgba(66,182,85,.5); }
.u-hero__visual--iot_map__pin--warn  { background: rgba(212,134,10,.18); color: var(--amber); border: 1px solid rgba(212,134,10,.5); }
.u-hero__visual--iot_map__pin--err   { background: rgba(192,57,43,.22);  color: var(--ember); border: 1px solid rgba(192,57,43,.6); }
.u-hero__visual--iot_map__pin--intel { background: rgba(43,108,176,.18); color: var(--intel); border: 1px solid rgba(43,108,176,.5); }
.u-hero__visual--iot_map__pinpulse {
  position: absolute; inset: -8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: 0;
  animation: iot-pinpulse 2.4s ease-out infinite;
}
.u-hero__visual--iot_map__pin--err  .u-hero__visual--iot_map__pinpulse { animation-duration: 1.4s; }
.u-hero__visual--iot_map__pin--warn .u-hero__visual--iot_map__pinpulse { animation-duration: 1.9s; }
@keyframes iot-pinpulse {
  0%   { transform: scale(.4); opacity: .8; }
  100% { transform: scale(2.2); opacity: 0; }
}
.u-hero__visual--iot_map__pinicon { display: inline-flex; }
.u-hero__visual--iot_map__pinlabel {
  position: absolute; top: 130%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 10px;
  white-space: nowrap;
  padding: 4px 8px; background: rgba(0,0,0,.85); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s;
}
.u-hero__visual--iot_map__pin:hover .u-hero__visual--iot_map__pinlabel { opacity: 1; }

.u-hero__visual--iot_map__callout {
  position: absolute;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(11,14,17,.85);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-family: var(--font-display);
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 240px;
  z-index: 3;
}
/* Slot positions - float clearly outside the frame edges so they don't
   cover any data inside. Offsets are tuned to keep callouts inside the
   column gutter (HubSpot's default is ~24-48px) so the section edge
   never clips them. */
.u-hero__visual--iot_map__callout--tl {
  top: -32px; left: -36px;
  animation: iot-fadein .8s both ease-out, oc-callout-bob 6s ease-in-out .8s infinite;
}
.u-hero__visual--iot_map__callout--tr {
  top: -32px; right: -36px;
  animation: iot-fadein .8s both ease-out, oc-callout-bob-slow 7s ease-in-out 1.1s infinite;
}
.u-hero__visual--iot_map__callout--bl {
  bottom: -32px; left: -36px;
  animation: iot-fadein .8s both ease-out, oc-callout-bob-slow 7s ease-in-out 1s infinite;
}
.u-hero__visual--iot_map__callout--br {
  bottom: -32px; right: -36px;
  animation: iot-fadein .8s both ease-out, oc-callout-bob 6.5s ease-in-out 1.3s infinite;
}

/* Floating bob animations - subtle Y-axis lift to feel alive without distracting. */
@keyframes oc-callout-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes oc-callout-bob-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .u-hero__visual--iot_map__callout,
  .u-hero__visual--iot_map__callout--tl,
  .u-hero__visual--iot_map__callout--tr,
  .u-hero__visual--iot_map__callout--bl,
  .u-hero__visual--iot_map__callout--br {
    animation: iot-fadein .8s both ease-out !important;
  }
}
.u-hero__visual--iot_map__callout strong { display: block; font-size: 12px; color: var(--white); font-weight: 700; line-height: 1.2; }
.u-hero__visual--iot_map__callout span   { display: block; font-size: 11px; color: var(--text-mute); margin-top: 2px; }
.u-hero__visual--iot_map__callout--jade  .u-hero__visual--iot_map__cglyph { color: var(--jade); }
.u-hero__visual--iot_map__callout--ember .u-hero__visual--iot_map__cglyph { color: var(--ember); }
.u-hero__visual--iot_map__callout--intel .u-hero__visual--iot_map__cglyph { color: var(--intel); }
.u-hero__visual--iot_map__cglyph {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center; place-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  font-size: 0;
  line-height: 0;
}
.u-hero__visual--iot_map__cglyph svg {
  display: block;
  width: 18px;
  height: 18px;
  grid-area: 1 / 1;
}
.u-hero__visual--iot_map__callout > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
@keyframes iot-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* =============================================================================
   universal-hero · preset partial CSS — visual_evidence
   ---------------------------------------------------------------------------
   PORT-READY. Drop this file straight into the universal-hero module — no
   selector renames required.

   Suggested location:
     ocapii-hubspot-theme/modules/universal-hero.module/partials/visuals/visual_evidence.css

   Source (visual reference — DO NOT also ship the source):
     prototype/security-page.css (lines 8-286)

   Root selector: .u-hero__visual--visual_evidence (root) + .u-hero__visual--visual_evidence__tile (per tile)
   HubL partial: partials/visuals/visual_evidence.html (mirror prototype/universal-hero-presets-evidence.jsx)

   Tokens consumed from ocapii-hubspot-theme/css/variables.css:
     --jade, --jade-bright, --intel, --intel-bright, --amber, --ember, --slate,
     --bg-0..4, --line, --line-strong, --text, --text-mute, --text-dim, --white,
     --radius, --radius-lg, --font-display.
============================================================================= */

/* ---------- Hero visual: video wall (provider-neutral) ---------------------- */
.u-hero__visual--visual_evidence {
  width: 100%;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
  position: relative;
}
.u-hero__visual--visual_evidence__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11.5px; letter-spacing: .08em;
  color: var(--text-mute);
  background: rgba(0,0,0,.18);
  white-space: nowrap;
  overflow: hidden;
}
.u-hero__visual--visual_evidence__chrome > .u-hero__visual--visual_evidence__label {
  overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.u-hero__visual--visual_evidence__dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--bg-4); border: 1px solid var(--line-strong);
}
.u-hero__visual--visual_evidence__dot:nth-child(1) { background: #C0392B; opacity: .85; }
.u-hero__visual--visual_evidence__dot:nth-child(2) { background: #D4860A; opacity: .85; }
.u-hero__visual--visual_evidence__dot:nth-child(3) { background: #42B655; opacity: .85; }
.u-hero__visual--visual_evidence__label {
  margin-left: 8px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.u-hero__visual--visual_evidence__live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--ember);
  letter-spacing: .14em;
  padding: 3px 9px;
  border: 1px solid rgba(192,57,43,.55);
  border-radius: 999px;
  background: rgba(192,57,43,.08);
}
.u-hero__visual--visual_evidence__pulse {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--ember);
  box-shadow: 0 0 10px var(--ember);
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.4); }
}

/* ---------- Tile grid (2 × 2) ----------------------------------------------- */
.u-hero__visual--visual_evidence__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  padding: 1px;
}
.u-hero__visual--visual_evidence__tile {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0a0d10;
  overflow: hidden;
}

/* Provider-neutral "camera still" — gradient + scan lines + glyph */
.u-hero__visual--visual_evidence__tile__feed {
  position: absolute; inset: 0;
  background:
    radial-gradient(140% 60% at 50% 110%, rgba(43,108,176,.18), transparent 60%),
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, #1a232b 0%, #0f1419 100%);
}
.u-hero__visual--visual_evidence__tile__feed::before {
  /* scan-line filter */
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.04) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}
.u-hero__visual--visual_evidence__tile__feed::after {
  /* slow ambient drift glow */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 80%; height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(43,108,176,.22), transparent 70%);
  filter: blur(20px);
  animation: vidGlow 7s ease-in-out infinite;
}
@keyframes vidGlow {
  0%, 100% { opacity: .55; transform: translate(-52%, -48%); }
  50%      { opacity: .9;  transform: translate(-48%, -52%); }
}

/* Camera vignette + corner crosshair */
.u-hero__visual--visual_evidence__tile__vignette {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 80px 10px rgba(0,0,0,.55);
  pointer-events: none;
}
.u-hero__visual--visual_evidence__tile__crosshair {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
}
.u-hero__visual--visual_evidence__tile__crosshair span {
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid rgba(255,255,255,.4);
}
.u-hero__visual--visual_evidence__tile__crosshair span:nth-child(1) { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.u-hero__visual--visual_evidence__tile__crosshair span:nth-child(2) { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.u-hero__visual--visual_evidence__tile__crosshair span:nth-child(3) { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.u-hero__visual--visual_evidence__tile__crosshair span:nth-child(4) { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* Subject suggestion (geometric placeholder, never figurative) */
.u-hero__visual--visual_evidence__tile__subject {
  position: absolute;
  left: 18%; right: 18%; bottom: 18%;
  height: 36%;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 4px;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.04) 0 6px,
      transparent 6px 12px);
}

/* Live readout strip */
.u-hero__visual--visual_evidence__tile__readout {
  position: absolute;
  top: 10px; left: 12px; right: 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px; letter-spacing: .08em;
  color: rgba(255,255,255,.7);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.u-hero__visual--visual_evidence__tile__rec {
  display: inline-flex; align-items: center; gap: 6px;
}
.u-hero__visual--visual_evidence__tile__rec::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--ember); box-shadow: 0 0 8px var(--ember);
  animation: livePulse 1.4s ease-in-out infinite;
}

/* Caption pill bottom-left */
.u-hero__visual--visual_evidence__tile__caption {
  position: absolute;
  left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px 6px 9px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--text);
  background: rgba(11,14,17,.85);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: calc(100% - 28px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u-hero__visual--visual_evidence__tile__captiondot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--text-mute);
}
.u-hero__visual--visual_evidence__tile--intel .u-hero__visual--visual_evidence__tile__captiondot   { background: var(--intel);  box-shadow: 0 0 8px var(--intel); }
.u-hero__visual--visual_evidence__tile--amber .u-hero__visual--visual_evidence__tile__captiondot   { background: var(--amber);  box-shadow: 0 0 8px var(--amber); }
.u-hero__visual--visual_evidence__tile--jade  .u-hero__visual--visual_evidence__tile__captiondot   { background: var(--jade);   box-shadow: 0 0 8px var(--jade); }
.u-hero__visual--visual_evidence__tile--ember .u-hero__visual--visual_evidence__tile__captiondot   { background: var(--ember);  box-shadow: 0 0 8px var(--ember); }
.u-hero__visual--visual_evidence__tile__site {
  color: var(--text-dim);
  font-weight: 500;
}

/* Duration pill bottom-right */
.u-hero__visual--visual_evidence__tile__duration {
  position: absolute;
  right: 14px; bottom: 14px;
  padding: 4px 9px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px; letter-spacing: .06em;
  color: var(--text-mute);
  background: rgba(11,14,17,.7);
  border: 1px solid var(--line);
  border-radius: 4px;
  white-space: nowrap;
}

/* Play affordance (provider-neutral) */
.u-hero__visual--visual_evidence__tile__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 999px;
  background: rgba(11,14,17,.6);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  transition: transform .2s ease, background .2s ease;
  cursor: pointer;
}
.u-hero__visual--visual_evidence__tile__play::after {
  content: "";
  display: block;
  width: 0; height: 0;
  border-left: 11px solid var(--white);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}
.u-hero__visual--visual_evidence__tile:hover .u-hero__visual--visual_evidence__tile__play { background: var(--jade); transform: translate(-50%, -50%) scale(1.06); }
.u-hero__visual--visual_evidence__tile:hover .u-hero__visual--visual_evidence__tile__play::after { border-left-color: var(--on-jade); }

/* Alert badge (positioned below the top readout strip so it doesn't clip
   the right-side CAM/site label) */
.u-hero__visual--visual_evidence__tile__alert {
  position: absolute;
  top: 36px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(192,57,43,.85);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 18px -6px rgba(192,57,43,.7);
}
.u-hero__visual--visual_evidence__tile__alert::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: #fff; animation: livePulse 1.4s ease-in-out infinite;
}

/* Tile-state ring (subtle) */
.u-hero__visual--visual_evidence__tile--amber .u-hero__visual--visual_evidence__tile__vignette { box-shadow: inset 0 0 80px 10px rgba(192,57,43,.4); }

/* ---------- Footer strip (live counters) ------------------------------------ */
.u-hero__visual--visual_evidence__strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11.5px; letter-spacing: .04em;
  color: var(--text-mute);
  background: rgba(0,0,0,.16);
  gap: 18px;
  flex-wrap: wrap;
}
.u-hero__visual--visual_evidence__stat strong {
  color: var(--text);
  margin-right: 8px;
  font-weight: 700;
}
.u-hero__visual--visual_evidence__stat--jade  strong { color: var(--jade); }
.u-hero__visual--visual_evidence__stat--amber strong { color: var(--amber); }
.u-hero__visual--visual_evidence__stat--ember strong { color: var(--ember); }
/* Floating hero callouts */
.oc-callout {
  position: absolute;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(13,17,21,.85);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.85);
  font-size: 12.5px;
  z-index: 3;
  min-width: 220px;
  transition: transform .3s var(--ease-premium, ease);
}
.oc-callout strong { display: block; color: #fff; font-size: 13.5px; font-weight: 700; }
.oc-callout span  { color: rgba(255,255,255,.6); }
.oc-callout__icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(66,182,85,.16); color: var(--jade);
  display: grid; place-items: center; place-content: center; font-size: 16px; flex: 0 0 32px;
}
.oc-callout--intel .oc-callout__icon { background: rgba(43,108,176,.16); color: var(--intel-bright); }
.oc-callout--amber .oc-callout__icon { background: rgba(212,134,10,.16); color: var(--amber); }
.oc-callout--ember .oc-callout__icon { background: rgba(192,57,43,.16);  color: var(--ember); }
.oc-callout__dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--jade);
  box-shadow: 0 0 12px var(--jade);
  position: absolute; top: 8px; right: 8px;
}
.oc-callout--tl { top: 8%;  left: -6%; }
.oc-callout--tr { top: 8%;  right: -6%; }
.oc-callout--bl { bottom: 10%; left: -6%; }
.oc-callout--br { bottom: 10%; right: -6%; animation-delay: -3s; }

[data-theme="light"] .oc-callout {
  background: rgba(255,255,255,.96);
  border-color: rgba(15,20,26,.08);
  box-shadow: 0 30px 60px -28px rgba(15,20,26,.22);
}
[data-theme="light"] .oc-callout strong { color: var(--text); }
[data-theme="light"] .oc-callout span   { color: var(--text-mute); }

@media (max-width: 768px) {
  .oc-callout { display: none; }
}

/* ===================================================================
   Mobile: hide hero-preset floating callout labels
   -------------------------------------------------------------------
   These cards are absolutely positioned with negative offsets so they
   "float" just outside their frame edges (e.g. top/left: -36px). Once
   the hero grid stacks the visual to full width (<=1024px), those
   offsets push the labels past the viewport and they get clipped. The
   core visual (dashboard chrome / map / mesh) stays; only the decorative
   floating labels are removed on small screens so nothing is cut off.
   (operations_network's .u-hero__cobj is already hidden at <=1100px.)
   =================================================================== */
@media (max-width: 1024px) {
  .u-hero__visual--dashboard__callout,
  .u-hero__visual--iot_map__callout,
  .u-hero__visual--integration_mesh__callout {
    display: none !important;
  }
}

/* ===================================================================
   compliance_checklist preset
   Ported from prototype/risk-assessments-page.css .rachk* selectors.
   =================================================================== */
.u-hero__visual--compliance_checklist {
  width: 100%;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
  position: relative;
}
.u-hero__visual--compliance_checklist__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; color: var(--text-dim);
}
.u-hero__visual--compliance_checklist__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--line-strong); }
.u-hero__visual--compliance_checklist__dot:nth-child(1) { background: #ff5f57; }
.u-hero__visual--compliance_checklist__dot:nth-child(2) { background: #febc2e; }
.u-hero__visual--compliance_checklist__dot:nth-child(3) { background: #28c840; }
.u-hero__visual--compliance_checklist__label { margin-left: 8px; text-transform: lowercase; }
.u-hero__visual--compliance_checklist__live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--jade); font-weight: 700; letter-spacing: .08em;
  font-size: 10px;
}
.u-hero__visual--compliance_checklist__livedot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--jade); box-shadow: 0 0 10px var(--jade);
  animation: u-hero-chk-pulse 1.6s ease-in-out infinite;
}
@keyframes u-hero-chk-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .35; transform: scale(.7); }
}

.u-hero__visual--compliance_checklist__stage {
  position: relative;
  padding: 22px 22px 22px;
  background:
    radial-gradient(700px 320px at 20% 0%, rgba(66,182,85,.10), transparent 60%),
    radial-gradient(600px 300px at 90% 100%, rgba(43,108,176,.10), transparent 60%),
    #0a0d11;
}
.u-hero__visual--compliance_checklist__glow {
  position: absolute; inset: -40% -40% auto auto;
  width: 70%; height: 70%;
  background: radial-gradient(closest-side, rgba(66,182,85,.16), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: u-hero-chk-drift 10s ease-in-out infinite alternate;
}
@keyframes u-hero-chk-drift {
  from { transform: translate(0,0); }
  to   { transform: translate(-30px, 24px); }
}

.u-hero__visual--compliance_checklist__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.u-hero__visual--compliance_checklist__heyebrow {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
}
.u-hero__visual--compliance_checklist__htitle {
  color: var(--white); font-weight: 700; font-size: 18px; margin-top: 2px;
}
.u-hero__visual--compliance_checklist__scorepill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
  color: var(--text-mute);
  transition: color .3s, background .3s, border-color .3s;
}
.u-hero__visual--compliance_checklist__scorepill--neutral  { color: var(--text-mute); }
.u-hero__visual--compliance_checklist__scorepill--progress { color: var(--intel-bright, var(--intel)); background: rgba(43,108,176,.10); border-color: rgba(43,108,176,.35); }
.u-hero__visual--compliance_checklist__scorepill--warn     { color: var(--amber);                       background: rgba(212,134,10,.12); border-color: rgba(212,134,10,.4); }

.u-hero__visual--compliance_checklist__sub {
  color: var(--text-mute); font-size: 12px;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.u-hero__visual--compliance_checklist__sub strong { color: var(--white); font-weight: 700; }
.u-hero__visual--compliance_checklist__progressbar {
  flex: 1; height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.06);
}
.u-hero__visual--compliance_checklist__progressfill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--jade), #6bdc7d);
  transition: width .55s cubic-bezier(.4,.2,.2,1);
  box-shadow: 0 0 12px rgba(66,182,85,.45);
}

.u-hero__visual--compliance_checklist__list {
  display: flex; flex-direction: column; gap: 8px;
  position: relative; z-index: 1;
}
.u-hero__visual--compliance_checklist__q {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  opacity: .55;
  transition: opacity .35s, border-color .35s, background .35s, transform .35s;
}
.u-hero__visual--compliance_checklist__q.is-active {
  opacity: 1;
  border-color: rgba(66,182,85,.35);
  background: linear-gradient(180deg, rgba(66,182,85,.05), rgba(255,255,255,0)) , var(--bg-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -16px rgba(0,0,0,.6);
}
.u-hero__visual--compliance_checklist__q.is-answered { opacity: 1; }

.u-hero__visual--compliance_checklist__qrow { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: flex-start; }
.u-hero__visual--compliance_checklist__qnum {
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3); border: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; color: var(--text-mute);
}
.u-hero__visual--compliance_checklist__qbody { min-width: 0; }
.u-hero__visual--compliance_checklist__qtext {
  color: var(--white); font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.u-hero__visual--compliance_checklist__qhint  { color: var(--text-mute); font-size: 12px; margin-top: 2px; }
.u-hero__visual--compliance_checklist__badge {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px; letter-spacing: .12em; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(192,57,43,.16); color: var(--ember);
  border: 1px solid rgba(192,57,43,.4);
}
.u-hero__visual--compliance_checklist__badge--req { margin-left: auto; }

.u-hero__visual--compliance_checklist__choices { display: flex; gap: 8px; margin-top: 8px; }
.u-hero__visual--compliance_checklist__choice {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--text-mute); font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  cursor: default;
  transition: background .25s, color .25s, border-color .25s, transform .15s;
}
.u-hero__visual--compliance_checklist__choice.is-on {
  animation: u-hero-chk-bump .4s ease-out;
}
.u-hero__visual--compliance_checklist__choice--yes.is-on {
  background: rgba(66,182,85,.16); color: var(--jade); border-color: rgba(66,182,85,.5);
  box-shadow: 0 0 0 3px rgba(66,182,85,.10);
}
.u-hero__visual--compliance_checklist__choice--no.is-on  {
  background: rgba(192,57,43,.18); color: var(--ember); border-color: rgba(192,57,43,.55);
  box-shadow: 0 0 0 3px rgba(192,57,43,.10);
}
@keyframes u-hero-chk-bump {
  0%   { transform: scale(.92); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.u-hero__visual--compliance_checklist__textinput {
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-display); font-size: 13px;
  color: var(--text); min-height: 1.2em;
}
.u-hero__visual--compliance_checklist__textinput.is-placeholder { color: var(--text-dim); font-style: italic; }
.u-hero__visual--compliance_checklist__caret {
  display: inline-block;
  width: 1px; height: 1em;
  background: var(--jade);
  margin-left: 2px; vertical-align: -2px;
  animation: u-hero-chk-caret 1s steps(1) infinite;
}
@keyframes u-hero-chk-caret { 50% { opacity: 0; } }

/* Corrective action panel */
.u-hero__visual--compliance_checklist__corr {
  margin-top: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(192,57,43,.08), rgba(192,57,43,0) 70%);
  border: 1px dashed rgba(192,57,43,.45);
  border-radius: var(--radius);
  animation: u-hero-chk-expand .4s ease-out;
}
@keyframes u-hero-chk-expand {
  from { opacity: 0; transform: scaleY(.85); transform-origin: top; }
  to   { opacity: 1; transform: scaleY(1); }
}
.u-hero__visual--compliance_checklist__corrhead {
  display: flex; align-items: center; gap: 8px;
  color: var(--ember); font-weight: 700; font-size: 12px;
  margin-bottom: 8px;
}
.u-hero__visual--compliance_checklist__corrlbl {
  font-size: 11px; color: var(--text-mute); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 6px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
.u-hero__visual--compliance_checklist__corrarea {
  padding: 8px 12px;
  background: rgba(0,0,0,.25); border: 1px solid var(--line);
  border-radius: 8px; font-size: 12.5px; line-height: 1.4;
  color: var(--text);
}
.u-hero__visual--compliance_checklist__corrarea.is-placeholder { color: var(--text-dim); font-style: italic; }
.u-hero__visual--compliance_checklist__corrrow {
  display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;
}
.u-hero__visual--compliance_checklist__corrinput {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  font-size: 11px; color: var(--text-mute);
  font-family: var(--font-display);
}

.u-hero__visual--compliance_checklist__signoff {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(66,182,85,.10); border: 1px solid rgba(66,182,85,.4);
  border-radius: var(--radius);
  animation: u-hero-chk-fadein .5s ease-out;
}
.u-hero__visual--compliance_checklist__signglyph {
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--jade); color: #062b10;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 16px rgba(66,182,85,.55);
}
.u-hero__visual--compliance_checklist__signoff strong { display: block; color: var(--white); font-size: 13px; font-weight: 700; }
.u-hero__visual--compliance_checklist__signoff span   { display: block; color: var(--text-mute); font-size: 12px; margin-top: 2px; }
@keyframes u-hero-chk-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===================================================================
   order_board preset
   Ported from prototype/order-management-page.css .omboard* selectors.
   =================================================================== */
/* =============================================================================
   01 Hero · animated-ops-board preview (order queue board)
   ============================================================================= */
.u-hero__visual--order_board {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
}
.u-hero__visual--order_board__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; color: var(--text-dim);
  position: relative; z-index: 1;
}
.u-hero__visual--order_board__dot { width: 10px; height: 10px; border-radius: 999px; }
.u-hero__visual--order_board__dot:nth-child(1) { background: #ff5f57; }
.u-hero__visual--order_board__dot:nth-child(2) { background: #febc2e; }
.u-hero__visual--order_board__dot:nth-child(3) { background: #28c840; }
.u-hero__visual--order_board__url { margin-left: 8px; }
.u-hero__visual--order_board__live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--jade); font-weight: 700; letter-spacing: .08em; font-size: 10px;
}
.u-hero__visual--order_board__livedot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--jade); box-shadow: 0 0 10px var(--jade);
  animation: u-hero-ob-pulse 1.6s ease-in-out infinite;
}
@keyframes u-hero-ob-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .35; transform: scale(.7); }
}

.u-hero__visual--order_board__stage {
  position: relative;
  padding: 20px 20px 22px;
  background:
    radial-gradient(680px 300px at 18% 0%, rgba(43,108,176,.12), transparent 60%),
    radial-gradient(560px 300px at 92% 100%, rgba(66,182,85,.10), transparent 60%),
    #0a0d11;
}
.u-hero__visual--order_board__stage::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at center, #000 45%, transparent 92%);
  pointer-events: none; opacity: .3;
}

.u-hero__visual--order_board__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative; z-index: 1; margin-bottom: 14px;
}
.u-hero__visual--order_board__heyebrow {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
}
.u-hero__visual--order_board__htitle { color: var(--white); font-weight: 700; font-size: 17px; margin-top: 3px; }

/* Stage pipeline ----------------------------------------------------------- */
.u-hero__visual--order_board__pipe {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  position: relative; z-index: 1; margin-bottom: 16px;
}
.u-hero__visual--order_board__pipestep {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line);
  font-size: 11px; font-weight: 600; color: var(--text-mute);
  transition: color .35s, background .35s, border-color .35s;
}
.u-hero__visual--order_board__pipestep .n {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px; color: var(--text-dim);
}
.u-hero__visual--order_board__pipestep.is-on {
  color: var(--intel-bright); background: rgba(43,108,176,.12); border-color: rgba(43,108,176,.4);
}
.u-hero__visual--order_board__pipestep.is-on .n { color: var(--intel-bright); }
.u-hero__visual--order_board__pipearrow { color: var(--text-dim); display: inline-flex; }

/* KPI tiles ---------------------------------------------------------------- */
.u-hero__visual--order_board__kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  position: relative; z-index: 1; margin-bottom: 14px;
}
@media (max-width: 720px) { .u-hero__visual--order_board__kpis { grid-template-columns: repeat(2, 1fr); } }
.u-hero__visual--order_board__kpi {
  padding: 12px 13px 11px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.u-hero__visual--order_board__kpival {
  font-family: var(--font-display);
  font-size: 23px; font-weight: 800; letter-spacing: -.01em; color: var(--white);
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.u-hero__visual--order_board__kpilbl {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim);
  margin-top: 4px;
}
.u-hero__visual--order_board__kpi--intel  { border-color: rgba(43,108,176,.4);  background: linear-gradient(180deg, rgba(43,108,176,.10), var(--bg-3)); }
.u-hero__visual--order_board__kpi--intel  .u-hero__visual--order_board__kpival { color: var(--intel-bright); }
.u-hero__visual--order_board__kpi--amber  { border-color: rgba(212,134,10,.4);  background: linear-gradient(180deg, rgba(212,134,10,.10), var(--bg-3)); }
.u-hero__visual--order_board__kpi--amber  .u-hero__visual--order_board__kpival { color: var(--amber); }
.u-hero__visual--order_board__kpi--jade   { border-color: rgba(66,182,85,.35);  background: linear-gradient(180deg, rgba(66,182,85,.10), var(--bg-3)); }
.u-hero__visual--order_board__kpi--jade   .u-hero__visual--order_board__kpival { color: var(--jade); }

/* Order queue -------------------------------------------------------------- */
.u-hero__visual--order_board__queuehd {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1; margin-bottom: 8px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
}
.u-hero__visual--order_board__queue {
  display: flex; flex-direction: column; gap: 8px;
  position: relative; z-index: 1;
}
.u-hero__visual--order_board__order {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
  padding: 11px 13px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius);
  animation: om-orderin .5s cubic-bezier(.4,.2,.2,1) both;
}
@keyframes om-orderin {
  from { opacity: 0; transform: translateY(-8px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.u-hero__visual--order_board__oid {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 600; color: var(--text-mute);
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 4px 8px; border-radius: 7px; white-space: nowrap;
}
.u-hero__visual--order_board__omain { min-width: 0; }
.u-hero__visual--order_board__otitle { color: var(--white); font-weight: 600; font-size: 13.5px; line-height: 1.2; }
.u-hero__visual--order_board__ometa  {
  color: var(--text-mute); font-size: 11px; margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.u-hero__visual--order_board__opill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .1em; font-weight: 700;
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-dim);
  transition: background .4s, color .4s, border-color .4s;
}
.u-hero__visual--order_board__opill .pdot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.u-hero__visual--order_board__opill--intel { background: rgba(43,108,176,.15); color: var(--intel-bright); border-color: rgba(43,108,176,.4); }
.u-hero__visual--order_board__opill--amber { background: rgba(212,134,10,.15); color: var(--amber);        border-color: rgba(212,134,10,.4); }
.u-hero__visual--order_board__opill--jade  { background: rgba(66,182,85,.15);  color: var(--jade);         border-color: rgba(66,182,85,.4); }
.u-hero__visual--order_board__opill--ember { background: rgba(192,57,43,.18);  color: var(--ember);        border-color: rgba(192,57,43,.5); }
.u-hero__visual--order_board__opill--ember .pdot { animation: u-hero-ob-pulse 1.4s ease-in-out infinite; }

/* Floating "order received" toast + "fulfilled" badge --------------------- */
.u-hero__visual--order_board__toast {
  position: absolute; top: 64px; right: 16px; z-index: 4;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 13px;
  background: rgba(11,14,17,.94);
  border: 1px solid rgba(43,108,176,.45);
  border-radius: 12px;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  max-width: 250px;
  animation: u-hero-ob-toastin .5s ease-out both;
}
@keyframes u-hero-ob-toastin {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.u-hero__visual--order_board__toastico {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(43,108,176,.18); color: var(--intel-bright);
  border: 1px solid rgba(43,108,176,.45);
}
.u-hero__visual--order_board__toasttitle { color: var(--white); font-weight: 700; font-size: 12px; line-height: 1.2; }
.u-hero__visual--order_board__toastmeta  {
  color: var(--text-mute); font-size: 10.5px; margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

.u-hero__visual--order_board__signoff {
  margin-top: 14px; position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  background: rgba(66,182,85,.10); border: 1px solid rgba(66,182,85,.4);
  border-radius: var(--radius);
  animation: u-hero-ob-fadein .5s ease-out;
}
.u-hero__visual--order_board__signglyph {
  width: 28px; height: 28px; border-radius: 999px; flex: none;
  background: var(--jade); color: #062b10;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px rgba(66,182,85,.55);
}
.u-hero__visual--order_board__signoff strong { display: block; color: var(--white); font-size: 12.5px; font-weight: 700; }
.u-hero__visual--order_board__signoff span   { display: block; color: var(--text-mute); font-size: 11px; margin-top: 2px;
                           font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
@keyframes u-hero-ob-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ===================================================================
   audit_dashboard preset — purpose-built, no external module CSS
   Mirrors the Claude Design mock: chrome + LIVE badge + 4 KPI tiles
   in a single row + 2 charts (bar + area) underneath.
   =================================================================== */
.u-hero__visual--audit_dashboard {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #11161B, #0B0F14);
  border: 1px solid #232B33;
  border-radius: 22px;
  box-shadow:
    0 50px 100px -40px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.02) inset;
  overflow: hidden;
  color: #E8ECEF;
  font-family: var(--font-display, 'Montserrat','Helvetica Neue',Arial,sans-serif);
}

/* Chrome bar */
.u-hero__visual--audit_dashboard__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: rgba(0,0,0,.30);
  border-bottom: 1px solid #1E252D;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #99A4AE;
}
.u-hero__visual--audit_dashboard__dot {
  width: 11px; height: 11px; border-radius: 999px;
  background: #2A323A;
}
.u-hero__visual--audit_dashboard__dot:nth-child(1) { background: #ff5f57; }
.u-hero__visual--audit_dashboard__dot:nth-child(2) { background: #febc2e; }
.u-hero__visual--audit_dashboard__dot:nth-child(3) { background: #28c840; }
.u-hero__visual--audit_dashboard__url {
  flex: 1 1 auto; text-align: center;
  letter-spacing: .02em;
}
.u-hero__visual--audit_dashboard__live {
  display: inline-flex; align-items: center; gap: 7px;
  color: #5BD06F; font-weight: 700; font-size: 11px; letter-spacing: .14em;
}
.u-hero__visual--audit_dashboard__livedot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #5BD06F; box-shadow: 0 0 12px #5BD06F;
  animation: u-hero-ad-pulse 1.6s ease-in-out infinite;
}
@keyframes u-hero-ad-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* Stage */
.u-hero__visual--audit_dashboard__stage {
  position: relative;
  padding: 28px;
}
.u-hero__visual--audit_dashboard__grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  z-index: 0;
}

.u-hero__visual--audit_dashboard__head { position: relative; z-index: 1; margin-bottom: 22px; }
.u-hero__visual--audit_dashboard__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: #5BD06F;
  margin-bottom: 6px;
}
.u-hero__visual--audit_dashboard__title {
  margin: 0;
  font-size: 22px; font-weight: 800; line-height: 1.2;
  color: #fff; letter-spacing: -.01em;
}

/* KPI tiles — 4 in one row */
.u-hero__visual--audit_dashboard__kpis {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.u-hero__visual--audit_dashboard__kpi {
  background: linear-gradient(180deg, rgba(66,182,85,.06), rgba(255,255,255,0) 60%), #161C22;
  border: 1px solid #232B33;
  border-radius: 16px;
  padding: 16px 16px 18px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.u-hero__visual--audit_dashboard__kpi-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
  gap: 6px;
}
.u-hero__visual--audit_dashboard__kpi-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  display: grid; place-items: center; place-content: center;
  color: #99A4AE;
  flex-shrink: 0;
}
.u-hero__visual--audit_dashboard__kpi-icon svg { width: 16px; height: 16px; }
.u-hero__visual--audit_dashboard__kpi-delta {
  display: inline-flex; align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
.u-hero__visual--audit_dashboard__kpi-delta--up {
  background: rgba(66,182,85,.14); color: #5BD06F; border: 1px solid rgba(66,182,85,.35);
}
.u-hero__visual--audit_dashboard__kpi-delta--down {
  background: rgba(226,106,91,.14); color: #E26A5B; border: 1px solid rgba(226,106,91,.35);
}
.u-hero__visual--audit_dashboard__kpi-value {
  font-size: 36px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em;
  margin-bottom: 8px;
}
.u-hero__visual--audit_dashboard__kpi-label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #6B7682;
}

/* Charts — two cards side by side */
.u-hero__visual--audit_dashboard__charts {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.u-hero__visual--audit_dashboard__chart {
  background: #161C22;
  border: 1px solid #232B33;
  border-radius: 16px;
  padding: 16px 18px 14px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.u-hero__visual--audit_dashboard__chart-head {
  margin-bottom: 12px;
}
.u-hero__visual--audit_dashboard__chart-title {
  color: #fff; font-weight: 700; font-size: 14px; line-height: 1.2;
}
.u-hero__visual--audit_dashboard__chart-meta {
  margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #6B7682;
}
.u-hero__visual--audit_dashboard__chart-body {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}

/* Bar chart */
.u-hero__visual--audit_dashboard__bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: flex-end;
  height: 140px;
}
.u-hero__visual--audit_dashboard__bar {
  position: relative;
  height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
}
.u-hero__visual--audit_dashboard__bar span {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #6FB5F0 0%, #2B6CB0 100%);
  border-radius: 7px 7px 4px 4px;
  transition: height 0.9s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 0 12px rgba(43,108,176,.25);
}
.u-hero__visual--audit_dashboard.is-active .u-hero__visual--audit_dashboard__bar span {
  height: var(--bar-h, 0);
}

/* Area chart */
.u-hero__visual--audit_dashboard__area-svg {
  width: 100%; height: 140px;
  display: block;
}
.u-hero__visual--audit_dashboard__area-line {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,.2,.2,1);
}
.u-hero__visual--audit_dashboard__area-fill {
  opacity: 0;
  transition: opacity .8s ease-in 1s;
}
.u-hero__visual--audit_dashboard__area-dots circle {
  opacity: 0;
  transition: opacity .35s ease-out;
}
.u-hero__visual--audit_dashboard.is-active .u-hero__visual--audit_dashboard__area-line { stroke-dashoffset: 0; }
.u-hero__visual--audit_dashboard.is-active .u-hero__visual--audit_dashboard__area-fill { opacity: 1; }
.u-hero__visual--audit_dashboard.is-active .u-hero__visual--audit_dashboard__area-dots circle { opacity: 1; }
.u-hero__visual--audit_dashboard.is-active .u-hero__visual--audit_dashboard__area-dots circle:nth-child(1) { transition-delay: 1.0s; }
.u-hero__visual--audit_dashboard.is-active .u-hero__visual--audit_dashboard__area-dots circle:nth-child(2) { transition-delay: 1.15s; }
.u-hero__visual--audit_dashboard.is-active .u-hero__visual--audit_dashboard__area-dots circle:nth-child(3) { transition-delay: 1.3s; }
.u-hero__visual--audit_dashboard.is-active .u-hero__visual--audit_dashboard__area-dots circle:nth-child(4) { transition-delay: 1.45s; }
.u-hero__visual--audit_dashboard.is-active .u-hero__visual--audit_dashboard__area-dots circle:nth-child(5) { transition-delay: 1.6s; }
.u-hero__visual--audit_dashboard.is-active .u-hero__visual--audit_dashboard__area-dots circle:nth-child(6) { transition-delay: 1.75s; }

/* X-axis labels (shared between bar + area) */
.u-hero__visual--audit_dashboard__xlabels {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .08em;
  color: #99A4AE;
}
.u-hero__visual--audit_dashboard__xlabels span {
  flex: 1; text-align: center;
}

/* Responsive — under 900px, drop the 4 KPIs to 2x2 and stack charts */
@media (max-width: 900px) {
  .u-hero__visual--audit_dashboard__kpis { grid-template-columns: repeat(2, 1fr); }
  .u-hero__visual--audit_dashboard__charts { grid-template-columns: 1fr; }
}

/* Reduced motion — render final state, no animation */
@media (prefers-reduced-motion: reduce) {
  .u-hero__visual--audit_dashboard__bar span { height: var(--bar-h, 0) !important; transition: none !important; }
  .u-hero__visual--audit_dashboard__area-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .u-hero__visual--audit_dashboard__area-fill { opacity: 1 !important; transition: none !important; }
  .u-hero__visual--audit_dashboard__area-dots circle { opacity: 1 !important; transition: none !important; }
  .u-hero__visual--audit_dashboard__livedot { animation: none !important; }
}


/* ===================================================================
   footfall_dashboard preset — purpose-built, no external module CSS
   Mirrors audit_dashboard's structural grammar (chrome + LIVE badge +
   4 KPI tiles + 2 charts) but for footfall/occupancy content. Adds a
   --warn amber delta pill variant (used by "Near"/"Live" status flags).
   Privacy: aggregated counts only — no individual identification copy.
   =================================================================== */
.u-hero__visual--footfall_dashboard {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #11161B, #0B0F14);
  border: 1px solid #232B33;
  border-radius: 22px;
  box-shadow:
    0 50px 100px -40px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.02) inset;
  overflow: hidden;
  color: #E8ECEF;
  font-family: var(--font-display, 'Montserrat','Helvetica Neue',Arial,sans-serif);
}

/* Chrome bar */
.u-hero__visual--footfall_dashboard__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: rgba(0,0,0,.30);
  border-bottom: 1px solid #1E252D;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #99A4AE;
}
.u-hero__visual--footfall_dashboard__dot {
  width: 11px; height: 11px; border-radius: 999px;
  background: #2A323A;
}
.u-hero__visual--footfall_dashboard__dot:nth-child(1) { background: #ff5f57; }
.u-hero__visual--footfall_dashboard__dot:nth-child(2) { background: #febc2e; }
.u-hero__visual--footfall_dashboard__dot:nth-child(3) { background: #28c840; }
.u-hero__visual--footfall_dashboard__url {
  flex: 1 1 auto; text-align: center;
  letter-spacing: .02em;
}
.u-hero__visual--footfall_dashboard__live {
  display: inline-flex; align-items: center; gap: 7px;
  color: #5BD06F; font-weight: 700; font-size: 11px; letter-spacing: .14em;
}
.u-hero__visual--footfall_dashboard__livedot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #5BD06F; box-shadow: 0 0 12px #5BD06F;
  animation: u-hero-fd-pulse 1.6s ease-in-out infinite;
}
@keyframes u-hero-fd-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* Stage */
.u-hero__visual--footfall_dashboard__stage {
  position: relative;
  padding: 28px;
}
.u-hero__visual--footfall_dashboard__grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  z-index: 0;
}

.u-hero__visual--footfall_dashboard__head { position: relative; z-index: 1; margin-bottom: 22px; }
.u-hero__visual--footfall_dashboard__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: #5BD06F;
  margin-bottom: 6px;
}
.u-hero__visual--footfall_dashboard__title {
  margin: 0;
  font-size: 22px; font-weight: 800; line-height: 1.2;
  color: #fff; letter-spacing: -.01em;
}

/* KPI tiles — 4 in one row */
.u-hero__visual--footfall_dashboard__kpis {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.u-hero__visual--footfall_dashboard__kpi {
  background: linear-gradient(180deg, rgba(43,108,176,.06), rgba(255,255,255,0) 60%), #161C22;
  border: 1px solid #232B33;
  border-radius: 16px;
  padding: 16px 16px 18px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.u-hero__visual--footfall_dashboard__kpi-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
  gap: 6px;
}
.u-hero__visual--footfall_dashboard__kpi-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  display: grid; place-items: center; place-content: center;
  color: #99A4AE;
  flex-shrink: 0;
}
.u-hero__visual--footfall_dashboard__kpi-icon svg { width: 16px; height: 16px; }
.u-hero__visual--footfall_dashboard__kpi-delta {
  display: inline-flex; align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
.u-hero__visual--footfall_dashboard__kpi-delta--up {
  background: rgba(66,182,85,.14); color: #5BD06F; border: 1px solid rgba(66,182,85,.35);
}
.u-hero__visual--footfall_dashboard__kpi-delta--down {
  background: rgba(226,106,91,.14); color: #E26A5B; border: 1px solid rgba(226,106,91,.35);
}
.u-hero__visual--footfall_dashboard__kpi-delta--warn {
  background: rgba(212,134,10,.14); color: #E0AC3A; border: 1px solid rgba(212,134,10,.40);
}
.u-hero__visual--footfall_dashboard__kpi-value {
  font-size: 36px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em;
  margin-bottom: 8px;
}
.u-hero__visual--footfall_dashboard__kpi-label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #6B7682;
}

/* Charts — two cards side by side */
.u-hero__visual--footfall_dashboard__charts {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.u-hero__visual--footfall_dashboard__chart {
  background: #161C22;
  border: 1px solid #232B33;
  border-radius: 16px;
  padding: 16px 18px 14px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.u-hero__visual--footfall_dashboard__chart-head {
  margin-bottom: 12px;
}
.u-hero__visual--footfall_dashboard__chart-title {
  color: #fff; font-weight: 700; font-size: 14px; line-height: 1.2;
}
.u-hero__visual--footfall_dashboard__chart-meta {
  margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #6B7682;
}
.u-hero__visual--footfall_dashboard__chart-body {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}

/* Bar chart — Footfall by zone (intel blue, 5 bars) */
.u-hero__visual--footfall_dashboard__bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: flex-end;
  height: 140px;
}
.u-hero__visual--footfall_dashboard__bar {
  position: relative;
  height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
}
.u-hero__visual--footfall_dashboard__bar span {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #6FB5F0 0%, #2B6CB0 100%);
  border-radius: 7px 7px 4px 4px;
  transition: height 0.9s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 0 12px rgba(43,108,176,.25);
}
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__bar span {
  height: var(--bar-h, 0);
}

/* Stagger bar reveals so the bars rise sequentially, not all at once */
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__bar:nth-child(1) span { transition-delay: 0s; }
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__bar:nth-child(2) span { transition-delay: .1s; }
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__bar:nth-child(3) span { transition-delay: .2s; }
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__bar:nth-child(4) span { transition-delay: .3s; }
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__bar:nth-child(5) span { transition-delay: .4s; }

/* Area chart — Occupancy through the day (jade) */
.u-hero__visual--footfall_dashboard__area-svg {
  width: 100%; height: 140px;
  display: block;
}
.u-hero__visual--footfall_dashboard__area-line {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,.2,.2,1);
}
.u-hero__visual--footfall_dashboard__area-fill {
  opacity: 0;
  transition: opacity .8s ease-in 1s;
}
.u-hero__visual--footfall_dashboard__area-dots circle {
  opacity: 0;
  transition: opacity .35s ease-out;
}
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__area-line { stroke-dashoffset: 0; }
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__area-fill { opacity: 1; }
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__area-dots circle { opacity: 1; }
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__area-dots circle:nth-child(1) { transition-delay: 1.0s; }
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__area-dots circle:nth-child(2) { transition-delay: 1.15s; }
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__area-dots circle:nth-child(3) { transition-delay: 1.3s; }
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__area-dots circle:nth-child(4) { transition-delay: 1.45s; }
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__area-dots circle:nth-child(5) { transition-delay: 1.6s; }
.u-hero__visual--footfall_dashboard.is-active .u-hero__visual--footfall_dashboard__area-dots circle:nth-child(6) { transition-delay: 1.75s; }

/* X-axis labels (shared between bar + area) */
.u-hero__visual--footfall_dashboard__xlabels {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .08em;
  color: #99A4AE;
}
.u-hero__visual--footfall_dashboard__xlabels span {
  flex: 1; text-align: center;
}

/* Responsive — under 900px, drop the 4 KPIs to 2x2 and stack charts */
@media (max-width: 900px) {
  .u-hero__visual--footfall_dashboard__kpis { grid-template-columns: repeat(2, 1fr); }
  .u-hero__visual--footfall_dashboard__charts { grid-template-columns: 1fr; }
}

/* Reduced motion — render final state, no animation */
@media (prefers-reduced-motion: reduce) {
  .u-hero__visual--footfall_dashboard__bar span { height: var(--bar-h, 0) !important; transition: none !important; }
  .u-hero__visual--footfall_dashboard__area-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .u-hero__visual--footfall_dashboard__area-fill { opacity: 1 !important; transition: none !important; }
  .u-hero__visual--footfall_dashboard__area-dots circle { opacity: 1 !important; transition: none !important; }
  .u-hero__visual--footfall_dashboard__livedot { animation: none !important; }
}


/* ===================================================================
   inventory preset — purpose-built, no external module CSS
   Live inventory dashboard: chrome + LIVE badge + 4 KPI tiles
   (Items in stock / Expiring / Low-stock / Waste) + 2 charts
   (Stock by location bar, one amber low-stock bar; falling
   Waste-value area, jade). Adds two variants beyond the shared
   KPI-dashboard grammar: --warn bar (amber low-stock) and --good
   delta (jade falling-is-positive). Colour grammar per
   page-specs/use-case-inventory-management.md §3.4 #2.
   =================================================================== */
.u-hero__visual--inventory {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #11161B, #0B0F14);
  border: 1px solid #232B33;
  border-radius: 22px;
  box-shadow:
    0 50px 100px -40px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.02) inset;
  overflow: hidden;
  color: #E8ECEF;
  font-family: var(--font-display, 'Montserrat','Helvetica Neue',Arial,sans-serif);
}

/* Chrome bar */
.u-hero__visual--inventory__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: rgba(0,0,0,.30);
  border-bottom: 1px solid #1E252D;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #99A4AE;
}
.u-hero__visual--inventory__dot {
  width: 11px; height: 11px; border-radius: 999px;
  background: #2A323A;
}
.u-hero__visual--inventory__dot:nth-child(1) { background: #ff5f57; }
.u-hero__visual--inventory__dot:nth-child(2) { background: #febc2e; }
.u-hero__visual--inventory__dot:nth-child(3) { background: #28c840; }
.u-hero__visual--inventory__url {
  flex: 1 1 auto; text-align: center;
  letter-spacing: .02em;
}
.u-hero__visual--inventory__live {
  display: inline-flex; align-items: center; gap: 7px;
  color: #5BD06F; font-weight: 700; font-size: 11px; letter-spacing: .14em;
}
.u-hero__visual--inventory__livedot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #5BD06F; box-shadow: 0 0 12px #5BD06F;
  animation: u-hero-inv-pulse 1.6s ease-in-out infinite;
}
@keyframes u-hero-inv-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* Stage */
.u-hero__visual--inventory__stage {
  position: relative;
  padding: 28px;
}
.u-hero__visual--inventory__grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  z-index: 0;
}

.u-hero__visual--inventory__head { position: relative; z-index: 1; margin-bottom: 22px; }
.u-hero__visual--inventory__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: #5BD06F;
  margin-bottom: 6px;
}
.u-hero__visual--inventory__title {
  margin: 0;
  font-size: 22px; font-weight: 800; line-height: 1.2;
  color: #fff; letter-spacing: -.01em;
}

/* KPI tiles — 4 in one row */
.u-hero__visual--inventory__kpis {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.u-hero__visual--inventory__kpi {
  background: linear-gradient(180deg, rgba(43,108,176,.06), rgba(255,255,255,0) 60%), #161C22;
  border: 1px solid #232B33;
  border-radius: 16px;
  padding: 16px 16px 18px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.u-hero__visual--inventory__kpi-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
  gap: 6px;
}
.u-hero__visual--inventory__kpi-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  display: grid; place-items: center; place-content: center;
  color: #99A4AE;
  flex-shrink: 0;
}
.u-hero__visual--inventory__kpi-icon svg { width: 16px; height: 16px; }
.u-hero__visual--inventory__kpi-delta {
  display: inline-flex; align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
.u-hero__visual--inventory__kpi-delta--up {
  background: rgba(66,182,85,.14); color: #5BD06F; border: 1px solid rgba(66,182,85,.35);
}
.u-hero__visual--inventory__kpi-delta--down {
  background: rgba(226,106,91,.14); color: #E26A5B; border: 1px solid rgba(226,106,91,.35);
}
.u-hero__visual--inventory__kpi-delta--warn {
  background: rgba(212,134,10,.14); color: #E0AC3A; border: 1px solid rgba(212,134,10,.40);
}
/* --good: a falling number that is a positive (waste down). Jade, like --up,
   but semantically distinct so the markup self-documents. Copy carries the
   "−9%" + "Waste this week" meaning; colour is not the only signal (§6.3). */
.u-hero__visual--inventory__kpi-delta--good {
  background: rgba(66,182,85,.14); color: #5BD06F; border: 1px solid rgba(66,182,85,.35);
}
.u-hero__visual--inventory__kpi-value {
  font-size: 36px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em;
  margin-bottom: 8px;
}
.u-hero__visual--inventory__kpi-label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #6B7682;
}

/* Charts — two cards side by side */
.u-hero__visual--inventory__charts {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.u-hero__visual--inventory__chart {
  background: #161C22;
  border: 1px solid #232B33;
  border-radius: 16px;
  padding: 16px 18px 14px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.u-hero__visual--inventory__chart-head {
  margin-bottom: 12px;
}
.u-hero__visual--inventory__chart-title {
  color: #fff; font-weight: 700; font-size: 14px; line-height: 1.2;
}
.u-hero__visual--inventory__chart-meta {
  margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #6B7682;
}
.u-hero__visual--inventory__chart-body {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}

/* Bar chart — Stock by location (intel blue; one amber low-stock bar) */
.u-hero__visual--inventory__bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: flex-end;
  height: 140px;
}
.u-hero__visual--inventory__bar {
  position: relative;
  height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
}
.u-hero__visual--inventory__bar span {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #6FB5F0 0%, #2B6CB0 100%);
  border-radius: 7px 7px 4px 4px;
  transition: height 0.9s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 0 12px rgba(43,108,176,.25);
}
/* Amber low-stock bar — "Bar" location below par */
.u-hero__visual--inventory__bar--warn span {
  background: linear-gradient(180deg, #E0AC3A 0%, #D4860A 100%);
  box-shadow: 0 0 14px rgba(212,134,10,.35);
}
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__bar span {
  height: var(--bar-h, 0);
}
/* Stagger bar reveals so the bars rise sequentially, not all at once */
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__bar:nth-child(1) span { transition-delay: 0s; }
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__bar:nth-child(2) span { transition-delay: .1s; }
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__bar:nth-child(3) span { transition-delay: .2s; }
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__bar:nth-child(4) span { transition-delay: .3s; }
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__bar:nth-child(5) span { transition-delay: .4s; }

/* Area chart — Waste value, last 6 weeks (jade, falling = good) */
.u-hero__visual--inventory__area-svg {
  width: 100%; height: 140px;
  display: block;
}
.u-hero__visual--inventory__area-line {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,.2,.2,1);
}
.u-hero__visual--inventory__area-fill {
  opacity: 0;
  transition: opacity .8s ease-in 1s;
}
.u-hero__visual--inventory__area-dots circle {
  opacity: 0;
  transition: opacity .35s ease-out;
}
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__area-line { stroke-dashoffset: 0; }
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__area-fill { opacity: 1; }
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__area-dots circle { opacity: 1; }
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__area-dots circle:nth-child(1) { transition-delay: 1.0s; }
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__area-dots circle:nth-child(2) { transition-delay: 1.15s; }
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__area-dots circle:nth-child(3) { transition-delay: 1.3s; }
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__area-dots circle:nth-child(4) { transition-delay: 1.45s; }
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__area-dots circle:nth-child(5) { transition-delay: 1.6s; }
.u-hero__visual--inventory.is-active .u-hero__visual--inventory__area-dots circle:nth-child(6) { transition-delay: 1.75s; }

/* X-axis labels (shared between bar + area) */
.u-hero__visual--inventory__xlabels {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .08em;
  color: #99A4AE;
}
.u-hero__visual--inventory__xlabels span {
  flex: 1; text-align: center;
}

/* Responsive — under 900px, drop the 4 KPIs to 2x2 and stack charts */
@media (max-width: 900px) {
  .u-hero__visual--inventory__kpis { grid-template-columns: repeat(2, 1fr); }
  .u-hero__visual--inventory__charts { grid-template-columns: 1fr; }
}

/* Reduced motion — render final state, no animation */
@media (prefers-reduced-motion: reduce) {
  .u-hero__visual--inventory__bar span { height: var(--bar-h, 0) !important; transition: none !important; }
  .u-hero__visual--inventory__area-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .u-hero__visual--inventory__area-fill { opacity: 1 !important; transition: none !important; }
  .u-hero__visual--inventory__area-dots circle { opacity: 1 !important; transition: none !important; }
  .u-hero__visual--inventory__livedot { animation: none !important; }
}


/* ===================================================================
   incident_capa preset — purpose-built, no external module CSS
   Live incident & CAPA command dashboard: chrome + LIVE badge + 4 KPI
   tiles (Open incidents / Critical / CAPAs in progress / Closure rate)
   + 2 charts (Open-incidents-by-type bar, one amber bar; rising
   Action-closure-rate area, jade). Delta tones beyond the shared
   grammar: --crit (ember, "Review" critical), --down (intel,
   informational "Tracked"), --good (jade, rising-is-positive).
   Colour grammar per page-specs/use-case-incident-capa-management.md
   §3.4 #2 — ember for critical/serious ONLY.
   =================================================================== */
.u-hero__visual--incident_capa {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #11161B, #0B0F14);
  border: 1px solid #232B33;
  border-radius: 22px;
  box-shadow:
    0 50px 100px -40px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.02) inset;
  overflow: hidden;
  color: #E8ECEF;
  font-family: var(--font-display, 'Montserrat','Helvetica Neue',Arial,sans-serif);
}

/* Chrome bar */
.u-hero__visual--incident_capa__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: rgba(0,0,0,.30);
  border-bottom: 1px solid #1E252D;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #99A4AE;
}
.u-hero__visual--incident_capa__dot {
  width: 11px; height: 11px; border-radius: 999px;
  background: #2A323A;
}
.u-hero__visual--incident_capa__dot:nth-child(1) { background: #ff5f57; }
.u-hero__visual--incident_capa__dot:nth-child(2) { background: #febc2e; }
.u-hero__visual--incident_capa__dot:nth-child(3) { background: #28c840; }
.u-hero__visual--incident_capa__url {
  flex: 1 1 auto; text-align: center;
  letter-spacing: .02em;
}
.u-hero__visual--incident_capa__live {
  display: inline-flex; align-items: center; gap: 7px;
  color: #5BD06F; font-weight: 700; font-size: 11px; letter-spacing: .14em;
}
.u-hero__visual--incident_capa__livedot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #5BD06F; box-shadow: 0 0 12px #5BD06F;
  animation: u-hero-ic-pulse 1.6s ease-in-out infinite;
}
@keyframes u-hero-ic-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* Stage */
.u-hero__visual--incident_capa__stage {
  position: relative;
  padding: 28px;
}
.u-hero__visual--incident_capa__grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  z-index: 0;
}

.u-hero__visual--incident_capa__head { position: relative; z-index: 1; margin-bottom: 22px; }
.u-hero__visual--incident_capa__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: #5BD06F;
  margin-bottom: 6px;
}
.u-hero__visual--incident_capa__title {
  margin: 0;
  font-size: 22px; font-weight: 800; line-height: 1.2;
  color: #fff; letter-spacing: -.01em;
}

/* KPI tiles — 4 in one row */
.u-hero__visual--incident_capa__kpis {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.u-hero__visual--incident_capa__kpi {
  background: linear-gradient(180deg, rgba(43,108,176,.06), rgba(255,255,255,0) 60%), #161C22;
  border: 1px solid #232B33;
  border-radius: 16px;
  padding: 16px 16px 18px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.u-hero__visual--incident_capa__kpi-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
  gap: 6px;
}
.u-hero__visual--incident_capa__kpi-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  display: grid; place-items: center; place-content: center;
  color: #99A4AE;
  flex-shrink: 0;
}
.u-hero__visual--incident_capa__kpi-icon svg { width: 16px; height: 16px; }
.u-hero__visual--incident_capa__kpi-delta {
  display: inline-flex; align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
.u-hero__visual--incident_capa__kpi-delta--up {
  background: rgba(66,182,85,.14); color: #5BD06F; border: 1px solid rgba(66,182,85,.35);
}
/* --down: informational here ("Tracked"), so intel blue — not a negative.
   Matches the prototype base .adw__kpidelta--down (intel), not a red down-arrow. */
.u-hero__visual--incident_capa__kpi-delta--down {
  background: rgba(43,108,176,.16); color: #6FB5F0; border: 1px solid rgba(43,108,176,.40);
}
.u-hero__visual--incident_capa__kpi-delta--warn {
  background: rgba(212,134,10,.14); color: #E0AC3A; border: 1px solid rgba(212,134,10,.40);
}
/* --crit: critical / serious — ember, used sparingly (critical risk only) */
.u-hero__visual--incident_capa__kpi-delta--crit {
  background: rgba(192,57,43,.18); color: #E26A5B; border: 1px solid rgba(192,57,43,.45);
}
/* --good: rising closure rate that is a positive (a number going up). Jade. */
.u-hero__visual--incident_capa__kpi-delta--good {
  background: rgba(66,182,85,.14); color: #5BD06F; border: 1px solid rgba(66,182,85,.35);
}
.u-hero__visual--incident_capa__kpi-value {
  font-size: 36px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em;
  margin-bottom: 8px;
}
.u-hero__visual--incident_capa__kpi-label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #6B7682;
}

/* Charts — two cards side by side */
.u-hero__visual--incident_capa__charts {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.u-hero__visual--incident_capa__chart {
  background: #161C22;
  border: 1px solid #232B33;
  border-radius: 16px;
  padding: 16px 18px 14px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.u-hero__visual--incident_capa__chart-head {
  margin-bottom: 12px;
}
.u-hero__visual--incident_capa__chart-title {
  color: #fff; font-weight: 700; font-size: 14px; line-height: 1.2;
}
.u-hero__visual--incident_capa__chart-meta {
  margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #6B7682;
}
.u-hero__visual--incident_capa__chart-body {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}

/* Bar chart — Open incidents by type (intel blue; one amber "watch" bar) */
.u-hero__visual--incident_capa__bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: flex-end;
  height: 140px;
}
.u-hero__visual--incident_capa__bar {
  position: relative;
  height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
}
.u-hero__visual--incident_capa__bar span {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #6FB5F0 0%, #2B6CB0 100%);
  border-radius: 7px 7px 4px 4px;
  transition: height 0.9s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 0 12px rgba(43,108,176,.25);
}
/* Amber "watch" bar */
.u-hero__visual--incident_capa__bar--warn span {
  background: linear-gradient(180deg, #E0AC3A 0%, #D4860A 100%);
  box-shadow: 0 0 14px rgba(212,134,10,.35);
}
/* Ember "critical" bar — defined for completeness (critical risk only) */
.u-hero__visual--incident_capa__bar--crit span {
  background: linear-gradient(180deg, #E26A5B 0%, #C0392B 100%);
  box-shadow: 0 0 14px rgba(192,57,43,.35);
}
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__bar span {
  height: var(--bar-h, 0);
}
/* Stagger bar reveals so the bars rise sequentially, not all at once */
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__bar:nth-child(1) span { transition-delay: 0s; }
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__bar:nth-child(2) span { transition-delay: .1s; }
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__bar:nth-child(3) span { transition-delay: .2s; }
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__bar:nth-child(4) span { transition-delay: .3s; }
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__bar:nth-child(5) span { transition-delay: .4s; }

/* Area chart — Action closure rate, last 6 weeks (jade, rising = good) */
.u-hero__visual--incident_capa__area-svg {
  width: 100%; height: 140px;
  display: block;
}
.u-hero__visual--incident_capa__area-line {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,.2,.2,1);
}
.u-hero__visual--incident_capa__area-fill {
  opacity: 0;
  transition: opacity .8s ease-in 1s;
}
.u-hero__visual--incident_capa__area-dots circle {
  opacity: 0;
  transition: opacity .35s ease-out;
}
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__area-line { stroke-dashoffset: 0; }
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__area-fill { opacity: 1; }
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__area-dots circle { opacity: 1; }
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__area-dots circle:nth-child(1) { transition-delay: 1.0s; }
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__area-dots circle:nth-child(2) { transition-delay: 1.15s; }
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__area-dots circle:nth-child(3) { transition-delay: 1.3s; }
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__area-dots circle:nth-child(4) { transition-delay: 1.45s; }
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__area-dots circle:nth-child(5) { transition-delay: 1.6s; }
.u-hero__visual--incident_capa.is-active .u-hero__visual--incident_capa__area-dots circle:nth-child(6) { transition-delay: 1.75s; }

/* X-axis labels (shared between bar + area) */
.u-hero__visual--incident_capa__xlabels {
  /* Equal columns that auto-fit the number of labels (5 bars / 6 weeks)
     and line up with the bars above (which use the same 8px gutter).
     Using grid instead of flex space-between stops wide words touching. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  align-items: start;
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px; letter-spacing: .02em;
  color: #99A4AE;
}
.u-hero__visual--incident_capa__xlabels span {
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  hyphens: auto;
}

/* Responsive — under 900px, drop the 4 KPIs to 2x2 and stack charts */
@media (max-width: 900px) {
  .u-hero__visual--incident_capa__kpis { grid-template-columns: repeat(2, 1fr); }
  .u-hero__visual--incident_capa__charts { grid-template-columns: 1fr; }
}

/* Reduced motion — render final state, no animation */
@media (prefers-reduced-motion: reduce) {
  .u-hero__visual--incident_capa__bar span { height: var(--bar-h, 0) !important; transition: none !important; }
  .u-hero__visual--incident_capa__area-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .u-hero__visual--incident_capa__area-fill { opacity: 1 !important; transition: none !important; }
  .u-hero__visual--incident_capa__area-dots circle { opacity: 1 !important; transition: none !important; }
  .u-hero__visual--incident_capa__livedot { animation: none !important; }
}


/* ===================================================================
   faq_knowledge preset — purpose-built conversational knowledge surface
   Ported from prototype .faqchat (theme tokens only). A scripted loop
   driven by startFaqKnowledge(): one scene active at a time, revealed
   step-by-step via state classes (is-thinking / is-answered /
   is-sourced / is-routed). Colour grammar per
   page-specs/use-case-faq-knowledge.md §3.4 #2 — intel = AI/knowledge,
   jade = answered/routed/resolved, amber = review, ember = escalation.
   =================================================================== */
.u-hero__visual--faq_knowledge {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-display, 'Montserrat','Helvetica Neue',Arial,sans-serif);
}

/* Chrome bar */
.u-hero__visual--faq_knowledge__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; color: var(--text-dim);
}
.u-hero__visual--faq_knowledge__dot { width: 10px; height: 10px; border-radius: 999px; background: #2A323A; }
.u-hero__visual--faq_knowledge__dot:nth-child(1) { background: #ff5f57; }
.u-hero__visual--faq_knowledge__dot:nth-child(2) { background: #febc2e; }
.u-hero__visual--faq_knowledge__dot:nth-child(3) { background: #28c840; }
.u-hero__visual--faq_knowledge__url { margin-left: 8px; }
.u-hero__visual--faq_knowledge__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--jade); font-weight: 700; letter-spacing: .1em; font-size: 10px;
}
.u-hero__visual--faq_knowledge__livedot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--jade); box-shadow: 0 0 10px var(--jade);
  animation: u-hero-fq-pulse 1.6s ease-in-out infinite;
}
@keyframes u-hero-fq-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.u-hero__visual--faq_knowledge__stage {
  position: relative;
  padding: 18px;
  background:
    radial-gradient(560px 280px at 88% -5%, rgba(43,108,176,.12), transparent 60%),
    #0a0d11;
}

/* Top bar — assistant identity */
.u-hero__visual--faq_knowledge__topbar { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.u-hero__visual--faq_knowledge__avatar {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(43,108,176,.16); color: var(--intel-bright);
  border: 1px solid rgba(43,108,176,.4);
}
.u-hero__visual--faq_knowledge__who { display: flex; flex-direction: column; line-height: 1.25; }
.u-hero__visual--faq_knowledge__whoname { color: var(--white); font-weight: 700; font-size: 14px; }
.u-hero__visual--faq_knowledge__whosub {
  color: var(--text-dim); font-size: 10.5px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* Knowledge-base strip */
.u-hero__visual--faq_knowledge__kb {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; margin-bottom: 14px;
  background: rgba(43,108,176,.07);
  border: 1px solid rgba(43,108,176,.22);
  border-radius: 10px;
  color: var(--text-mute); font-size: 11.5px;
}
.u-hero__visual--faq_knowledge__kbico { color: var(--intel-bright); display: inline-flex; }
.u-hero__visual--faq_knowledge__kb strong { color: var(--text); font-weight: 600; }
.u-hero__visual--faq_knowledge__kbtag {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--jade);
  background: rgba(66,182,85,.12); border: 1px solid rgba(66,182,85,.32);
  border-radius: 999px; padding: 3px 8px;
}

/* Conversation feed — one scene visible at a time */
.u-hero__visual--faq_knowledge__feed { position: relative; min-height: 348px; }
.u-hero__visual--faq_knowledge__scene { display: none; flex-direction: column; gap: 11px; }
.u-hero__visual--faq_knowledge__scene.is-active { display: flex; }

.u-hero__visual--faq_knowledge__msg { display: flex; gap: 10px; max-width: 92%; }
.u-hero__visual--faq_knowledge__msg--user { align-self: flex-end; flex-direction: row-reverse; }
.u-hero__visual--faq_knowledge__msg--ai { align-self: flex-start; }
.u-hero__visual--faq_knowledge__msgico {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
}
.u-hero__visual--faq_knowledge__msg--user .u-hero__visual--faq_knowledge__msgico {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-mute);
}
.u-hero__visual--faq_knowledge__msg--ai .u-hero__visual--faq_knowledge__msgico {
  background: rgba(43,108,176,.16); border: 1px solid rgba(43,108,176,.4); color: var(--intel-bright);
}
.u-hero__visual--faq_knowledge__bubble {
  padding: 11px 13px; border-radius: 13px;
  font-size: 13px; line-height: 1.5;
}
.u-hero__visual--faq_knowledge__msg--user .u-hero__visual--faq_knowledge__bubble {
  background: rgba(43,108,176,.14); border: 1px solid rgba(43,108,176,.32);
  color: var(--text); border-bottom-right-radius: 5px;
}
.u-hero__visual--faq_knowledge__msg--ai .u-hero__visual--faq_knowledge__bubble {
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text-mute); border-bottom-left-radius: 5px;
}
.u-hero__visual--faq_knowledge__msg--ai .u-hero__visual--faq_knowledge__bubble strong { color: var(--text); font-weight: 600; }

/* Thinking dots — shown only during is-thinking */
.u-hero__visual--faq_knowledge__think { display: none; }
.u-hero__visual--faq_knowledge__scene.is-thinking .u-hero__visual--faq_knowledge__think { display: flex; }
.u-hero__visual--faq_knowledge__thinking {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 11px 14px; border-radius: 13px; border-bottom-left-radius: 5px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.u-hero__visual--faq_knowledge__thinking > span:not(.u-hero__visual--faq_knowledge__thinklbl) {
  width: 6px; height: 6px; border-radius: 999px; background: var(--intel-bright);
  animation: u-hero-fq-dot 1.1s ease-in-out infinite;
}
.u-hero__visual--faq_knowledge__thinking > span:nth-child(2) { animation-delay: .18s; }
.u-hero__visual--faq_knowledge__thinking > span:nth-child(3) { animation-delay: .36s; }
@keyframes u-hero-fq-dot { 0%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.u-hero__visual--faq_knowledge__thinklbl {
  margin-left: 4px; color: var(--text-dim); font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* Answer message — revealed at is-answered */
.u-hero__visual--faq_knowledge__ai {
  opacity: 0; transform: translateY(8px);
  transition: opacity .42s cubic-bezier(.4,.2,.2,1), transform .42s cubic-bezier(.4,.2,.2,1);
}
.u-hero__visual--faq_knowledge__scene.is-answered .u-hero__visual--faq_knowledge__ai { opacity: 1; transform: none; }

/* Source pills — revealed at is-sourced */
.u-hero__visual--faq_knowledge__sources {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px;
  opacity: 0; transition: opacity .42s ease;
}
.u-hero__visual--faq_knowledge__scene.is-sourced .u-hero__visual--faq_knowledge__sources { opacity: 1; }
.u-hero__visual--faq_knowledge__source {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(43,108,176,.1); border: 1px solid rgba(43,108,176,.28);
  color: var(--intel-bright);
}
.u-hero__visual--faq_knowledge__source svg { width: 11px; height: 11px; }

/* Routed-action chip — revealed at is-routed */
.u-hero__visual--faq_knowledge__routed {
  display: inline-flex; align-items: center; gap: 9px;
  align-self: flex-start; margin-top: 2px;
  padding: 9px 12px; border-radius: 11px;
  background: rgba(66,182,85,.1); border: 1px solid rgba(66,182,85,.34);
  opacity: 0; transform: translateX(-10px) scale(.96);
  transition: opacity .5s cubic-bezier(.34,1.4,.5,1), transform .5s cubic-bezier(.34,1.4,.5,1);
}
.u-hero__visual--faq_knowledge__scene.is-routed .u-hero__visual--faq_knowledge__routed { opacity: 1; transform: none; }
.u-hero__visual--faq_knowledge__routedico {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(66,182,85,.18); color: var(--jade); border: 1px solid rgba(66,182,85,.4);
}
.u-hero__visual--faq_knowledge__routedlbl { color: var(--white); font-weight: 700; font-size: 12.5px; line-height: 1.3; }
.u-hero__visual--faq_knowledge__routedmeta {
  color: var(--text-dim); font-size: 10px; margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* Input bar (decorative) */
.u-hero__visual--faq_knowledge__input {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 10px 12px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px;
}
.u-hero__visual--faq_knowledge__inputtext { color: var(--text-dim); font-size: 12.5px; flex: 1; }
.u-hero__visual--faq_knowledge__caret {
  display: inline-block; width: 1.5px; height: 14px; margin-left: 1px;
  background: var(--intel-bright); vertical-align: middle;
  animation: u-hero-fq-caret 1s step-end infinite;
}
@keyframes u-hero-fq-caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.u-hero__visual--faq_knowledge__send {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--intel); color: #fff; border: none;
}

/* Reduced motion — freeze to a complete, fully-revealed first scene */
@media (prefers-reduced-motion: reduce) {
  .u-hero__visual--faq_knowledge__livedot,
  .u-hero__visual--faq_knowledge__caret,
  .u-hero__visual--faq_knowledge__thinking > span { animation: none !important; }
  .u-hero__visual--faq_knowledge__ai,
  .u-hero__visual--faq_knowledge__sources,
  .u-hero__visual--faq_knowledge__routed { transition: none !important; opacity: 1 !important; transform: none !important; }
}


/* ===================================================================
   facilities_ppm preset — purpose-built, no external module CSS
   Live facilities & PPM dashboard: chrome + LIVE badge + 4 KPI tiles
   (PPM due / Open defects / Overdue tasks / Completion rate) + 2 charts
   (Open-work-by-type bar, one amber "Reactive" bar; rising PPM-
   completion-rate area, jade). Delta tones: --info (intel,
   reporting/visibility), --warn (amber, overdue/watch), --good (jade,
   rising completion). Colour grammar per
   page-specs/use-case-facilities-ppm.md §3.4 #2 — ember reserved for
   critical only (not used on this dashboard).
   =================================================================== */
.u-hero__visual--facilities_ppm {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #11161B, #0B0F14);
  border: 1px solid #232B33;
  border-radius: 22px;
  box-shadow:
    0 50px 100px -40px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.02) inset;
  overflow: hidden;
  color: #E8ECEF;
  font-family: var(--font-display, 'Montserrat','Helvetica Neue',Arial,sans-serif);
}

/* Chrome bar */
.u-hero__visual--facilities_ppm__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: rgba(0,0,0,.30);
  border-bottom: 1px solid #1E252D;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #99A4AE;
}
.u-hero__visual--facilities_ppm__dot {
  width: 11px; height: 11px; border-radius: 999px;
  background: #2A323A;
}
.u-hero__visual--facilities_ppm__dot:nth-child(1) { background: #ff5f57; }
.u-hero__visual--facilities_ppm__dot:nth-child(2) { background: #febc2e; }
.u-hero__visual--facilities_ppm__dot:nth-child(3) { background: #28c840; }
.u-hero__visual--facilities_ppm__url {
  flex: 1 1 auto; text-align: center;
  letter-spacing: .02em;
}
.u-hero__visual--facilities_ppm__live {
  display: inline-flex; align-items: center; gap: 7px;
  color: #5BD06F; font-weight: 700; font-size: 11px; letter-spacing: .14em;
}
.u-hero__visual--facilities_ppm__livedot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #5BD06F; box-shadow: 0 0 12px #5BD06F;
  animation: u-hero-fp-pulse 1.6s ease-in-out infinite;
}
@keyframes u-hero-fp-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* Stage */
.u-hero__visual--facilities_ppm__stage {
  position: relative;
  padding: 28px;
}
.u-hero__visual--facilities_ppm__grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  z-index: 0;
}

.u-hero__visual--facilities_ppm__head { position: relative; z-index: 1; margin-bottom: 22px; }
.u-hero__visual--facilities_ppm__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: #5BD06F;
  margin-bottom: 6px;
}
.u-hero__visual--facilities_ppm__title {
  margin: 0;
  font-size: 22px; font-weight: 800; line-height: 1.2;
  color: #fff; letter-spacing: -.01em;
}

/* KPI tiles — 4 in one row */
.u-hero__visual--facilities_ppm__kpis {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.u-hero__visual--facilities_ppm__kpi {
  background: linear-gradient(180deg, rgba(43,108,176,.06), rgba(255,255,255,0) 60%), #161C22;
  border: 1px solid #232B33;
  border-radius: 16px;
  padding: 16px 16px 18px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.u-hero__visual--facilities_ppm__kpi-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
  gap: 6px;
}
.u-hero__visual--facilities_ppm__kpi-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  display: grid; place-items: center; place-content: center;
  color: #99A4AE;
  flex-shrink: 0;
}
.u-hero__visual--facilities_ppm__kpi-icon svg { width: 16px; height: 16px; }
.u-hero__visual--facilities_ppm__kpi-delta {
  display: inline-flex; align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
/* --info: reporting / visibility — intel blue (informational, not negative) */
.u-hero__visual--facilities_ppm__kpi-delta--info {
  background: rgba(43,108,176,.16); color: #6FB5F0; border: 1px solid rgba(43,108,176,.40);
}
.u-hero__visual--facilities_ppm__kpi-delta--warn {
  background: rgba(212,134,10,.14); color: #E0AC3A; border: 1px solid rgba(212,134,10,.40);
}
/* --good: rising completion rate that is a positive */
.u-hero__visual--facilities_ppm__kpi-delta--good {
  background: rgba(66,182,85,.14); color: #5BD06F; border: 1px solid rgba(66,182,85,.35);
}
/* --crit: critical facilities risk — ember (reserved; not used on this dashboard) */
.u-hero__visual--facilities_ppm__kpi-delta--crit {
  background: rgba(192,57,43,.18); color: #E26A5B; border: 1px solid rgba(192,57,43,.45);
}
.u-hero__visual--facilities_ppm__kpi-value {
  font-size: 36px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em;
  margin-bottom: 8px;
}
.u-hero__visual--facilities_ppm__kpi-label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #6B7682;
}

/* Charts — two cards side by side */
.u-hero__visual--facilities_ppm__charts {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.u-hero__visual--facilities_ppm__chart {
  background: #161C22;
  border: 1px solid #232B33;
  border-radius: 16px;
  padding: 16px 18px 14px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.u-hero__visual--facilities_ppm__chart-head {
  margin-bottom: 12px;
}
.u-hero__visual--facilities_ppm__chart-title {
  color: #fff; font-weight: 700; font-size: 14px; line-height: 1.2;
}
.u-hero__visual--facilities_ppm__chart-meta {
  margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #6B7682;
}
.u-hero__visual--facilities_ppm__chart-body {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}

/* Bar chart — Open work by type (intel blue; one amber "Reactive" bar) */
.u-hero__visual--facilities_ppm__bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: flex-end;
  height: 140px;
}
.u-hero__visual--facilities_ppm__bar {
  position: relative;
  height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
}
.u-hero__visual--facilities_ppm__bar span {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #6FB5F0 0%, #2B6CB0 100%);
  border-radius: 7px 7px 4px 4px;
  transition: height 0.9s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 0 12px rgba(43,108,176,.25);
}
/* Amber "Reactive" bar */
.u-hero__visual--facilities_ppm__bar--warn span {
  background: linear-gradient(180deg, #E0AC3A 0%, #D4860A 100%);
  box-shadow: 0 0 14px rgba(212,134,10,.35);
}
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__bar span {
  height: var(--bar-h, 0);
}
/* Stagger bar reveals so the bars rise sequentially, not all at once */
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__bar:nth-child(1) span { transition-delay: 0s; }
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__bar:nth-child(2) span { transition-delay: .1s; }
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__bar:nth-child(3) span { transition-delay: .2s; }
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__bar:nth-child(4) span { transition-delay: .3s; }
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__bar:nth-child(5) span { transition-delay: .4s; }

/* Area chart — PPM completion rate, last 6 weeks (jade, rising = good) */
.u-hero__visual--facilities_ppm__area-svg {
  width: 100%; height: 140px;
  display: block;
}
.u-hero__visual--facilities_ppm__area-line {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,.2,.2,1);
}
.u-hero__visual--facilities_ppm__area-fill {
  opacity: 0;
  transition: opacity .8s ease-in 1s;
}
.u-hero__visual--facilities_ppm__area-dots circle {
  opacity: 0;
  transition: opacity .35s ease-out;
}
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__area-line { stroke-dashoffset: 0; }
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__area-fill { opacity: 1; }
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__area-dots circle { opacity: 1; }
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__area-dots circle:nth-child(1) { transition-delay: 1.0s; }
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__area-dots circle:nth-child(2) { transition-delay: 1.15s; }
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__area-dots circle:nth-child(3) { transition-delay: 1.3s; }
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__area-dots circle:nth-child(4) { transition-delay: 1.45s; }
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__area-dots circle:nth-child(5) { transition-delay: 1.6s; }
.u-hero__visual--facilities_ppm.is-active .u-hero__visual--facilities_ppm__area-dots circle:nth-child(6) { transition-delay: 1.75s; }

/* X-axis labels (shared between bar + area) */
.u-hero__visual--facilities_ppm__xlabels {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .06em;
  color: #99A4AE;
}
.u-hero__visual--facilities_ppm__xlabels span {
  flex: 1; text-align: center;
}

/* Responsive — under 900px, drop the 4 KPIs to 2x2 and stack charts */
@media (max-width: 900px) {
  .u-hero__visual--facilities_ppm__kpis { grid-template-columns: repeat(2, 1fr); }
  .u-hero__visual--facilities_ppm__charts { grid-template-columns: 1fr; }
}

/* Reduced motion — render final state, no animation */
@media (prefers-reduced-motion: reduce) {
  .u-hero__visual--facilities_ppm__bar span { height: var(--bar-h, 0) !important; transition: none !important; }
  .u-hero__visual--facilities_ppm__area-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .u-hero__visual--facilities_ppm__area-fill { opacity: 1 !important; transition: none !important; }
  .u-hero__visual--facilities_ppm__area-dots circle { opacity: 1 !important; transition: none !important; }
  .u-hero__visual--facilities_ppm__livedot { animation: none !important; }
}


/* ===================================================================
   energy_monitoring preset — purpose-built, no external module CSS
   Live energy dashboard: chrome + LIVE badge + 4 KPI tiles (Live
   demand / Out-of-hours / Meters reporting / Waste this week) + 2
   charts (Consumption-by-site bar, one amber over-baseline bar;
   falling Avoidable-waste area, jade). Delta tones: --good (jade,
   demand/waste down), --warn (amber, out-of-hours watch), --up
   (jade, live/healthy). Same grammar as inventory/facilities_ppm.
   =================================================================== */
.u-hero__visual--energy_monitoring {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #11161B, #0B0F14);
  border: 1px solid #232B33;
  border-radius: 22px;
  box-shadow:
    0 50px 100px -40px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.02) inset;
  overflow: hidden;
  color: #E8ECEF;
  font-family: var(--font-display, 'Montserrat','Helvetica Neue',Arial,sans-serif);
}

/* Chrome bar */
.u-hero__visual--energy_monitoring__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: rgba(0,0,0,.30);
  border-bottom: 1px solid #1E252D;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #99A4AE;
}
.u-hero__visual--energy_monitoring__dot {
  width: 11px; height: 11px; border-radius: 999px;
  background: #2A323A;
}
.u-hero__visual--energy_monitoring__dot:nth-child(1) { background: #ff5f57; }
.u-hero__visual--energy_monitoring__dot:nth-child(2) { background: #febc2e; }
.u-hero__visual--energy_monitoring__dot:nth-child(3) { background: #28c840; }
.u-hero__visual--energy_monitoring__url {
  flex: 1 1 auto; text-align: center;
  letter-spacing: .02em;
}
.u-hero__visual--energy_monitoring__live {
  display: inline-flex; align-items: center; gap: 7px;
  color: #5BD06F; font-weight: 700; font-size: 11px; letter-spacing: .14em;
}
.u-hero__visual--energy_monitoring__livedot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #5BD06F; box-shadow: 0 0 12px #5BD06F;
  animation: u-hero-en-pulse 1.6s ease-in-out infinite;
}
@keyframes u-hero-en-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* Stage */
.u-hero__visual--energy_monitoring__stage {
  position: relative;
  padding: 28px;
}
.u-hero__visual--energy_monitoring__grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  z-index: 0;
}

.u-hero__visual--energy_monitoring__head { position: relative; z-index: 1; margin-bottom: 22px; }
.u-hero__visual--energy_monitoring__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: #5BD06F;
  margin-bottom: 6px;
}
.u-hero__visual--energy_monitoring__title {
  margin: 0;
  font-size: 22px; font-weight: 800; line-height: 1.2;
  color: #fff; letter-spacing: -.01em;
}

/* KPI tiles — 4 in one row */
.u-hero__visual--energy_monitoring__kpis {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.u-hero__visual--energy_monitoring__kpi {
  background: linear-gradient(180deg, rgba(43,108,176,.06), rgba(255,255,255,0) 60%), #161C22;
  border: 1px solid #232B33;
  border-radius: 16px;
  padding: 16px 16px 18px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.u-hero__visual--energy_monitoring__kpi-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
  gap: 6px;
}
.u-hero__visual--energy_monitoring__kpi-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  display: grid; place-items: center; place-content: center;
  color: #99A4AE;
  flex-shrink: 0;
}
.u-hero__visual--energy_monitoring__kpi-icon svg { width: 16px; height: 16px; }
.u-hero__visual--energy_monitoring__kpi-delta {
  display: inline-flex; align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
/* --up: live / healthy — jade */
.u-hero__visual--energy_monitoring__kpi-delta--up {
  background: rgba(66,182,85,.14); color: #5BD06F; border: 1px solid rgba(66,182,85,.35);
}
.u-hero__visual--energy_monitoring__kpi-delta--warn {
  background: rgba(212,134,10,.14); color: #E0AC3A; border: 1px solid rgba(212,134,10,.40);
}
/* --good: a falling number that is a positive (demand / waste down) — jade */
.u-hero__visual--energy_monitoring__kpi-delta--good {
  background: rgba(66,182,85,.14); color: #5BD06F; border: 1px solid rgba(66,182,85,.35);
}
.u-hero__visual--energy_monitoring__kpi-value {
  font-size: 36px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em;
  margin-bottom: 8px;
}
.u-hero__visual--energy_monitoring__kpi-label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #6B7682;
}

/* Charts — two cards side by side */
.u-hero__visual--energy_monitoring__charts {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.u-hero__visual--energy_monitoring__chart {
  background: #161C22;
  border: 1px solid #232B33;
  border-radius: 16px;
  padding: 16px 18px 14px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.u-hero__visual--energy_monitoring__chart-head {
  margin-bottom: 12px;
}
.u-hero__visual--energy_monitoring__chart-title {
  color: #fff; font-weight: 700; font-size: 14px; line-height: 1.2;
}
.u-hero__visual--energy_monitoring__chart-meta {
  margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #6B7682;
}
.u-hero__visual--energy_monitoring__chart-body {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}

/* Bar chart — Consumption by site (intel blue; one amber over-baseline bar) */
.u-hero__visual--energy_monitoring__bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: flex-end;
  height: 140px;
}
.u-hero__visual--energy_monitoring__bar {
  position: relative;
  height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
}
.u-hero__visual--energy_monitoring__bar span {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #6FB5F0 0%, #2B6CB0 100%);
  border-radius: 7px 7px 4px 4px;
  transition: height 0.9s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 0 12px rgba(43,108,176,.25);
}
/* Amber over-baseline bar */
.u-hero__visual--energy_monitoring__bar--warn span {
  background: linear-gradient(180deg, #E0AC3A 0%, #D4860A 100%);
  box-shadow: 0 0 14px rgba(212,134,10,.35);
}
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__bar span {
  height: var(--bar-h, 0);
}
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__bar:nth-child(1) span { transition-delay: 0s; }
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__bar:nth-child(2) span { transition-delay: .1s; }
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__bar:nth-child(3) span { transition-delay: .2s; }
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__bar:nth-child(4) span { transition-delay: .3s; }
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__bar:nth-child(5) span { transition-delay: .4s; }

/* Area chart — Avoidable waste, last 6 weeks (jade, falling = good) */
.u-hero__visual--energy_monitoring__area-svg {
  width: 100%; height: 140px;
  display: block;
}
.u-hero__visual--energy_monitoring__area-line {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,.2,.2,1);
}
.u-hero__visual--energy_monitoring__area-fill {
  opacity: 0;
  transition: opacity .8s ease-in 1s;
}
.u-hero__visual--energy_monitoring__area-dots circle {
  opacity: 0;
  transition: opacity .35s ease-out;
}
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__area-line { stroke-dashoffset: 0; }
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__area-fill { opacity: 1; }
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__area-dots circle { opacity: 1; }
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__area-dots circle:nth-child(1) { transition-delay: 1.0s; }
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__area-dots circle:nth-child(2) { transition-delay: 1.15s; }
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__area-dots circle:nth-child(3) { transition-delay: 1.3s; }
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__area-dots circle:nth-child(4) { transition-delay: 1.45s; }
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__area-dots circle:nth-child(5) { transition-delay: 1.6s; }
.u-hero__visual--energy_monitoring.is-active .u-hero__visual--energy_monitoring__area-dots circle:nth-child(6) { transition-delay: 1.75s; }

/* X-axis labels (shared between bar + area) */
.u-hero__visual--energy_monitoring__xlabels {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .06em;
  color: #99A4AE;
}
.u-hero__visual--energy_monitoring__xlabels span {
  flex: 1; text-align: center;
}

/* Responsive — under 900px, drop the 4 KPIs to 2x2 and stack charts */
@media (max-width: 900px) {
  .u-hero__visual--energy_monitoring__kpis { grid-template-columns: repeat(2, 1fr); }
  .u-hero__visual--energy_monitoring__charts { grid-template-columns: 1fr; }
}

/* Reduced motion — render final state, no animation */
@media (prefers-reduced-motion: reduce) {
  .u-hero__visual--energy_monitoring__bar span { height: var(--bar-h, 0) !important; transition: none !important; }
  .u-hero__visual--energy_monitoring__area-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .u-hero__visual--energy_monitoring__area-fill { opacity: 1 !important; transition: none !important; }
  .u-hero__visual--energy_monitoring__area-dots circle { opacity: 1 !important; transition: none !important; }
  .u-hero__visual--energy_monitoring__livedot { animation: none !important; }
}


/* ===================================================================
   booking_board preset — live booking + readiness board (ported from
   the prototype .bkboard, scoped, theme tokens only). The order_board
   pattern: chrome + LIVE + pipeline + 4 KPI tiles + booking queue +
   floating "new booking" toast + "ready" sign-off badge. JS
   (startBookingBoard) drives the state loop; toast/signoff start
   display:none and are revealed by JS.
   =================================================================== */
.u-hero__visual--booking_board {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-display, 'Montserrat','Helvetica Neue',Arial,sans-serif);
}
.u-hero__visual--booking_board__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; color: var(--text-dim);
  position: relative; z-index: 1;
}
.u-hero__visual--booking_board__dot { width: 10px; height: 10px; border-radius: 999px; background: #2A323A; }
.u-hero__visual--booking_board__dot:nth-child(1) { background: #ff5f57; }
.u-hero__visual--booking_board__dot:nth-child(2) { background: #febc2e; }
.u-hero__visual--booking_board__dot:nth-child(3) { background: #28c840; }
.u-hero__visual--booking_board__url { margin-left: 8px; }
.u-hero__visual--booking_board__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--jade); font-weight: 700; letter-spacing: .08em; font-size: 10px;
}
.u-hero__visual--booking_board__livedot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--jade); box-shadow: 0 0 10px var(--jade);
  animation: u-hero-bk-pulse 1.6s ease-in-out infinite;
}
@keyframes u-hero-bk-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.u-hero__visual--booking_board__stage {
  position: relative;
  padding: 20px 20px 22px;
  background:
    radial-gradient(680px 300px at 18% 0%, rgba(43,108,176,.12), transparent 60%),
    radial-gradient(560px 300px at 92% 100%, rgba(66,182,85,.10), transparent 60%),
    #0a0d11;
}
.u-hero__visual--booking_board__stage::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at center, #000 45%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 92%);
  pointer-events: none; opacity: .3;
}

.u-hero__visual--booking_board__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative; z-index: 1; margin-bottom: 14px;
}
.u-hero__visual--booking_board__heyebrow {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
}
.u-hero__visual--booking_board__htitle { color: var(--white); font-weight: 700; font-size: 17px; margin-top: 3px; }
.u-hero__visual--booking_board__hdate {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px; color: var(--text-dim); text-align: right; line-height: 1.5;
}
.u-hero__visual--booking_board__hdate strong { display: block; color: var(--text-mute); font-size: 12px; }

/* Pipeline */
.u-hero__visual--booking_board__pipe {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  position: relative; z-index: 1; margin-bottom: 16px;
}
.u-hero__visual--booking_board__pipestep {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line);
  font-size: 11px; font-weight: 600; color: var(--text-mute);
  transition: color .35s, background .35s, border-color .35s;
}
.u-hero__visual--booking_board__pipestep .n {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px; color: var(--text-dim);
}
.u-hero__visual--booking_board__pipestep.is-on {
  color: var(--intel-bright); background: rgba(43,108,176,.12); border-color: rgba(43,108,176,.4);
}
.u-hero__visual--booking_board__pipestep.is-on .n { color: var(--intel-bright); }
.u-hero__visual--booking_board__pipearrow { color: var(--text-dim); display: inline-flex; }

/* KPI tiles */
.u-hero__visual--booking_board__kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  position: relative; z-index: 1; margin-bottom: 14px;
}
.u-hero__visual--booking_board__kpi {
  padding: 12px 13px 11px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.u-hero__visual--booking_board__kpival {
  font-family: var(--font-display);
  font-size: 23px; font-weight: 800; letter-spacing: -.01em; color: var(--white);
  font-variant-numeric: tabular-nums; transition: color .3s;
}
.u-hero__visual--booking_board__kpilbl {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim);
  margin-top: 4px;
}
.u-hero__visual--booking_board__kpi--intel { border-color: rgba(43,108,176,.4); background: linear-gradient(180deg, rgba(43,108,176,.10), var(--bg-3)); }
.u-hero__visual--booking_board__kpi--intel .u-hero__visual--booking_board__kpival { color: var(--intel-bright); }
.u-hero__visual--booking_board__kpi--amber { border-color: rgba(212,134,10,.4); background: linear-gradient(180deg, rgba(212,134,10,.10), var(--bg-3)); }
.u-hero__visual--booking_board__kpi--amber .u-hero__visual--booking_board__kpival { color: var(--amber); }
.u-hero__visual--booking_board__kpi--jade { border-color: rgba(66,182,85,.35); background: linear-gradient(180deg, rgba(66,182,85,.10), var(--bg-3)); }
.u-hero__visual--booking_board__kpi--jade .u-hero__visual--booking_board__kpival { color: var(--jade); }

/* Booking queue */
.u-hero__visual--booking_board__queuehd {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1; margin-bottom: 8px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
}
.u-hero__visual--booking_board__queue {
  display: flex; flex-direction: column; gap: 8px;
  position: relative; z-index: 1;
}
.u-hero__visual--booking_board__order {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 11px 13px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius);
  animation: u-hero-bk-orderin .5s cubic-bezier(.4,.2,.2,1) both;
}
@keyframes u-hero-bk-orderin {
  from { opacity: 0; transform: translateY(-8px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.u-hero__visual--booking_board__time {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 600; color: var(--text-mute);
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 4px 8px; border-radius: 7px; white-space: nowrap; text-align: center; min-width: 52px;
}
.u-hero__visual--booking_board__omain { min-width: 0; }
.u-hero__visual--booking_board__otitle { color: var(--white); font-weight: 600; font-size: 13.5px; line-height: 1.2; }
.u-hero__visual--booking_board__ometa {
  color: var(--text-mute); font-size: 11px; margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.u-hero__visual--booking_board__opill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .1em; font-weight: 700;
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-dim);
  transition: background .4s, color .4s, border-color .4s;
}
.u-hero__visual--booking_board__opill .pdot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.u-hero__visual--booking_board__opill--intel { background: rgba(43,108,176,.15); color: var(--intel-bright); border-color: rgba(43,108,176,.4); }
.u-hero__visual--booking_board__opill--amber { background: rgba(212,134,10,.15); color: var(--amber); border-color: rgba(212,134,10,.4); }
.u-hero__visual--booking_board__opill--jade  { background: rgba(66,182,85,.15); color: var(--jade); border-color: rgba(66,182,85,.4); }
.u-hero__visual--booking_board__opill--ember { background: rgba(192,57,43,.18); color: var(--ember); border-color: rgba(192,57,43,.5); }

/* Floating "new booking" toast + "ready" sign-off badge */
.u-hero__visual--booking_board__toast {
  position: absolute; top: 64px; right: 16px; z-index: 4;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 13px;
  background: rgba(11,14,17,.94);
  border: 1px solid rgba(43,108,176,.45);
  border-radius: 12px;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  max-width: 252px;
  animation: u-hero-bk-toastin .5s ease-out both;
}
@keyframes u-hero-bk-toastin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.u-hero__visual--booking_board__toastico {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(43,108,176,.18); color: var(--intel-bright);
  border: 1px solid rgba(43,108,176,.45);
}
.u-hero__visual--booking_board__toasttitle { color: var(--white); font-weight: 700; font-size: 12px; line-height: 1.2; }
.u-hero__visual--booking_board__toastmeta {
  color: var(--text-mute); font-size: 10.5px; margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
.u-hero__visual--booking_board__signoff {
  margin-top: 14px; position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  background: rgba(66,182,85,.10); border: 1px solid rgba(66,182,85,.4);
  border-radius: var(--radius);
  animation: u-hero-bk-fadein .5s ease-out;
}
.u-hero__visual--booking_board__signglyph {
  width: 28px; height: 28px; border-radius: 999px; flex: none;
  background: var(--jade); color: #062b10;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px rgba(66,182,85,.55);
}
.u-hero__visual--booking_board__signoff strong { display: block; color: var(--white); font-size: 12.5px; font-weight: 700; }
.u-hero__visual--booking_board__signoff span {
  display: block; color: var(--text-mute); font-size: 11px; margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
@keyframes u-hero-bk-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 720px) { .u-hero__visual--booking_board__kpis { grid-template-columns: repeat(2, 1fr); } }

/* Reduced motion — JS holds the initial state; kill the looping bits */
@media (prefers-reduced-motion: reduce) {
  .u-hero__visual--booking_board__livedot,
  .u-hero__visual--booking_board__order,
  .u-hero__visual--booking_board__signoff { animation: none !important; }
}


/* ===================================================================
   rollout_board preset — implementation rollout board (ported from
   the prototype .rboard, scoped, theme tokens only). Phase tracker +
   workstream progress bars + KPIs + foot. JS (startRolloutBoard)
   cycles the active phase; stream fills grow from 0 on load.
   =================================================================== */
.u-hero__visual--rollout_board {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-display, 'Montserrat','Helvetica Neue',Arial,sans-serif);
}
.u-hero__visual--rollout_board__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; color: var(--text-dim);
}
.u-hero__visual--rollout_board__dot { width: 10px; height: 10px; border-radius: 999px; background: #2A323A; }
.u-hero__visual--rollout_board__dot:nth-child(1) { background: #ff5f57; }
.u-hero__visual--rollout_board__dot:nth-child(2) { background: #febc2e; }
.u-hero__visual--rollout_board__dot:nth-child(3) { background: #28c840; }
.u-hero__visual--rollout_board__url { margin-left: 8px; }
.u-hero__visual--rollout_board__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--intel-bright); font-weight: 700; letter-spacing: .08em; font-size: 10px;
}
.u-hero__visual--rollout_board__livedot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--intel-bright); box-shadow: 0 0 10px var(--intel-bright);
  animation: u-hero-rb-pulse 1.6s ease-in-out infinite;
}
@keyframes u-hero-rb-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.u-hero__visual--rollout_board__stage {
  padding: 18px 18px 20px;
  background:
    radial-gradient(520px 300px at 80% 0%, rgba(43,108,176,.12), transparent 62%),
    radial-gradient(460px 280px at 0% 100%, rgba(66,182,85,.08), transparent 60%),
    #0a0d11;
}
.u-hero__visual--rollout_board__head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.u-hero__visual--rollout_board__heyebrow {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
}
.u-hero__visual--rollout_board__htitle { color: var(--white); font-weight: 700; font-size: 14.5px; margin-top: 2px; }
.u-hero__visual--rollout_board__hpill {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px; letter-spacing: .08em; font-weight: 700;
  color: var(--intel-bright); padding: 4px 9px; border-radius: 999px;
  background: rgba(43,108,176,.12); border: 1px solid rgba(43,108,176,.4); white-space: nowrap;
}

/* phase tracker */
.u-hero__visual--rollout_board__phases { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; }
.u-hero__visual--rollout_board__phase {
  flex: 1; text-align: center;
  padding: 8px 4px; border-radius: 9px;
  background: var(--bg-3); border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 10.5px;
  color: var(--text-mute); white-space: nowrap;
  transition: all .3s;
}
.u-hero__visual--rollout_board__phase .pn {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 8.5px; color: var(--text-dim); margin-bottom: 3px;
}
.u-hero__visual--rollout_board__phase.is-done { color: var(--jade); background: rgba(66,182,85,.1); border-color: rgba(66,182,85,.32); }
.u-hero__visual--rollout_board__phase.is-done .pn { color: var(--jade); }
.u-hero__visual--rollout_board__phase.is-on { color: var(--white); background: rgba(43,108,176,.14); border-color: rgba(43,108,176,.45); box-shadow: 0 0 0 3px rgba(43,108,176,.08); }
.u-hero__visual--rollout_board__phase.is-on .pn { color: var(--intel-bright); }

/* workstream progress bars */
.u-hero__visual--rollout_board__streams { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.u-hero__visual--rollout_board__stream { display: grid; grid-template-columns: 1fr; gap: 6px; }
.u-hero__visual--rollout_board__streamtop {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--text);
}
.u-hero__visual--rollout_board__streamtop .v {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 700; color: var(--text-mute);
}
.u-hero__visual--rollout_board__track { height: 7px; border-radius: 999px; background: rgba(255,255,255,.05); overflow: hidden; }
.u-hero__visual--rollout_board__fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--intel), var(--intel-bright));
  animation: u-hero-rb-grow 1.1s both cubic-bezier(.2,.7,.2,1);
}
.u-hero__visual--rollout_board__fill--jade { background: linear-gradient(90deg, #2A7A38, var(--jade)); }
.u-hero__visual--rollout_board__fill--amber { background: linear-gradient(90deg, #9c6207, var(--amber)); }
@keyframes u-hero-rb-grow { from { width: 0 !important; } }

/* kpis */
.u-hero__visual--rollout_board__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.u-hero__visual--rollout_board__kpi { padding: 10px 11px; border-radius: 11px; background: var(--bg-3); border: 1px solid var(--line); }
.u-hero__visual--rollout_board__kpival {
  font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--white);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.u-hero__visual--rollout_board__kpilbl {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 8px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); margin-top: 5px;
}
.u-hero__visual--rollout_board__kpi--intel .u-hero__visual--rollout_board__kpival { color: var(--intel-bright); }
.u-hero__visual--rollout_board__kpi--jade .u-hero__visual--rollout_board__kpival { color: var(--jade); }
.u-hero__visual--rollout_board__foot {
  margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .04em; color: var(--text-dim);
}
.u-hero__visual--rollout_board__foot .g { color: var(--jade); display: inline-flex; }
@media (max-width: 1000px) {
  .u-hero__visual--rollout_board__phase { font-size: 9.5px; }
  .u-hero__visual--rollout_board__kpival { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .u-hero__visual--rollout_board__livedot,
  .u-hero__visual--rollout_board__fill { animation: none !important; }
}


/* ===================================================================
   support_flow preset — live support queue (ported from the prototype
   .sflow, scoped, theme tokens only). Pipeline (Raise → Communicate)
   + counters + live request feed + foot. JS (startSupportFlow) cycles
   the active stage; feed items animate in on load.
   =================================================================== */
.u-hero__visual--support_flow {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-display, 'Montserrat','Helvetica Neue',Arial,sans-serif);
}
.u-hero__visual--support_flow__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; color: var(--text-dim);
}
.u-hero__visual--support_flow__dot { width: 10px; height: 10px; border-radius: 999px; background: #2A323A; }
.u-hero__visual--support_flow__dot:nth-child(1) { background: #ff5f57; }
.u-hero__visual--support_flow__dot:nth-child(2) { background: #febc2e; }
.u-hero__visual--support_flow__dot:nth-child(3) { background: #28c840; }
.u-hero__visual--support_flow__url { margin-left: 8px; }
.u-hero__visual--support_flow__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--jade); font-weight: 700; letter-spacing: .08em; font-size: 10px;
}
.u-hero__visual--support_flow__livedot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--jade); box-shadow: 0 0 10px var(--jade);
  animation: u-hero-sf-pulse 1.6s ease-in-out infinite;
}
@keyframes u-hero-sf-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.u-hero__visual--support_flow__stage {
  padding: 18px 18px 20px;
  background:
    radial-gradient(520px 300px at 80% 0%, rgba(43,108,176,.12), transparent 62%),
    radial-gradient(460px 280px at 0% 100%, rgba(66,182,85,.07), transparent 60%),
    #0a0d11;
}

/* pipeline */
.u-hero__visual--support_flow__pipe { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; }
.u-hero__visual--support_flow__pipestep {
  flex: 1;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 10px; border-radius: 10px;
  background: var(--bg-3); border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  color: var(--text-mute); white-space: nowrap;
  transition: border-color .3s, color .3s, background .3s;
}
.u-hero__visual--support_flow__pipestep .n {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; color: var(--text-dim);
}
.u-hero__visual--support_flow__pipestep.is-on {
  color: var(--white); background: rgba(43,108,176,.14); border-color: rgba(43,108,176,.45);
  box-shadow: 0 0 0 3px rgba(43,108,176,.08);
}
.u-hero__visual--support_flow__pipestep.is-on .n { color: var(--intel-bright); }
.u-hero__visual--support_flow__pipearrow { color: var(--line-strong, var(--line)); flex: none; display: inline-flex; }

/* counters */
.u-hero__visual--support_flow__counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.u-hero__visual--support_flow__count { padding: 11px 12px; border-radius: 11px; background: var(--bg-3); border: 1px solid var(--line); }
.u-hero__visual--support_flow__countval {
  font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--white); font-variant-numeric: tabular-nums;
}
.u-hero__visual--support_flow__countlbl {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px;
}
.u-hero__visual--support_flow__count--jade .u-hero__visual--support_flow__countval { color: var(--jade); }
.u-hero__visual--support_flow__count--amber .u-hero__visual--support_flow__countval { color: var(--amber); }
.u-hero__visual--support_flow__count--intel .u-hero__visual--support_flow__countval { color: var(--intel-bright); }

/* feed */
.u-hero__visual--support_flow__feedhd {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 9px;
}
.u-hero__visual--support_flow__feed { display: flex; flex-direction: column; gap: 8px; }
.u-hero__visual--support_flow__item {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 11px; align-items: center;
  padding: 10px 12px; border-radius: 11px;
  background: var(--bg-3); border: 1px solid var(--line);
  animation: u-hero-sf-in .5s both ease-out;
}
.u-hero__visual--support_flow__iglyph {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--text-mute);
}
.u-hero__visual--support_flow__item--amber .u-hero__visual--support_flow__iglyph { color: var(--amber); background: rgba(212,134,10,.12); border-color: rgba(212,134,10,.34); }
.u-hero__visual--support_flow__item--intel .u-hero__visual--support_flow__iglyph { color: var(--intel-bright); background: rgba(43,108,176,.12); border-color: rgba(43,108,176,.34); }
.u-hero__visual--support_flow__item--jade .u-hero__visual--support_flow__iglyph { color: var(--jade); background: rgba(66,182,85,.12); border-color: rgba(66,182,85,.34); }
.u-hero__visual--support_flow__ititle { color: var(--text); font-weight: 600; font-size: 12.5px; }
.u-hero__visual--support_flow__imeta {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; color: var(--text-dim); margin-top: 2px;
}
.u-hero__visual--support_flow__stagepill {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 8.5px; letter-spacing: .07em; font-weight: 700;
  padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.u-hero__visual--support_flow__stagepill .pdot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.u-hero__visual--support_flow__stagepill--jade { color: var(--jade); background: rgba(66,182,85,.12); border: 1px solid rgba(66,182,85,.3); }
.u-hero__visual--support_flow__stagepill--intel { color: var(--intel-bright); background: rgba(43,108,176,.12); border: 1px solid rgba(43,108,176,.3); }
.u-hero__visual--support_flow__stagepill--amber { color: var(--amber); background: rgba(212,134,10,.12); border: 1px solid rgba(212,134,10,.3); }
@keyframes u-hero-sf-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.u-hero__visual--support_flow__foot {
  margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .04em; color: var(--text-dim);
}
.u-hero__visual--support_flow__foot .g { color: var(--jade); display: inline-flex; }
@media (max-width: 1000px) {
  .u-hero__visual--support_flow__pipestep { font-size: 10.5px; padding: 8px; }
  .u-hero__visual--support_flow__countval { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .u-hero__visual--support_flow__livedot,
  .u-hero__visual--support_flow__item { animation: none !important; }
}


/* ===================================================================
   integration_mesh preset — API / system map (ported from the
   prototype .mesh, scoped, theme tokens only). 6 external systems
   stream into a central ocapii core. Pure-CSS animation (stream
   dash, node fade-in, core ring pulse) — no JS.
   =================================================================== */
.u-hero__visual--integration_mesh {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-display, 'Montserrat','Helvetica Neue',Arial,sans-serif);
}
.u-hero__visual--integration_mesh__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; color: var(--text-dim);
}
.u-hero__visual--integration_mesh__dot { width: 10px; height: 10px; border-radius: 999px; background: #2A323A; }
.u-hero__visual--integration_mesh__dot:nth-child(1) { background: #ff5f57; }
.u-hero__visual--integration_mesh__dot:nth-child(2) { background: #febc2e; }
.u-hero__visual--integration_mesh__dot:nth-child(3) { background: #28c840; }
.u-hero__visual--integration_mesh__label { margin-left: 8px; }
.u-hero__visual--integration_mesh__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--intel-bright); font-weight: 700; letter-spacing: .08em; font-size: 10px;
}
.u-hero__visual--integration_mesh__pulse {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--intel-bright); box-shadow: 0 0 10px var(--intel-bright);
  animation: u-hero-mesh-pulse 1.6s ease-in-out infinite;
}
@keyframes u-hero-mesh-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.u-hero__visual--integration_mesh__stage {
  position: relative;
  aspect-ratio: 16 / 11;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(640px 420px at 50% 50%, rgba(43,108,176,.14), transparent 62%),
    radial-gradient(540px 360px at 80% 88%, rgba(66,182,85,.08), transparent 60%),
    #0a0d11;
}
.u-hero__visual--integration_mesh__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at center, #000 45%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 88%);
}
.u-hero__visual--integration_mesh__streams { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .7; }
.u-hero__visual--integration_mesh__streams path {
  stroke-dasharray: 2 3;
  animation: u-hero-mesh-dash 5.5s linear infinite;
}
@keyframes u-hero-mesh-dash { to { stroke-dashoffset: -50; } }

/* central ocapii core */
.u-hero__visual--integration_mesh__core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 132px; height: 132px; border-radius: 50%;
  display: grid; place-items: center; place-content: center; text-align: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(43,108,176,.4), rgba(43,108,176,.06) 70%),
    var(--bg-2);
  border: 1px solid rgba(76,143,216,.55);
  box-shadow: 0 0 44px -6px rgba(43,108,176,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  z-index: 3;
}
.u-hero__visual--integration_mesh__corebrand {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .03em; color: var(--white); font-size: 15px;
}
.u-hero__visual--integration_mesh__corelbl {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--intel-bright); margin-top: 3px;
}
.u-hero__visual--integration_mesh__corering {
  position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(76,143,216,.4);
  animation: u-hero-mesh-ring 3s ease-out infinite;
}
@keyframes u-hero-mesh-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }

/* system nodes */
.u-hero__visual--integration_mesh__node {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 12px;
  background: rgba(11,14,17,.82);
  border: 1px solid var(--line-strong, var(--line));
  box-shadow: 0 10px 28px -12px rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  color: var(--text); white-space: nowrap; z-index: 2;
  animation: u-hero-mesh-nodein .7s both ease-out;
}
@keyframes u-hero-mesh-nodein {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(7px); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.u-hero__visual--integration_mesh__nodeglyph {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(43,108,176,.16); color: var(--intel-bright); border: 1px solid rgba(43,108,176,.4);
}
.u-hero__visual--integration_mesh__node--jade .u-hero__visual--integration_mesh__nodeglyph { background: rgba(66,182,85,.16); color: var(--jade); border-color: rgba(66,182,85,.42); }
.u-hero__visual--integration_mesh__node--amber .u-hero__visual--integration_mesh__nodeglyph { background: rgba(212,134,10,.16); color: var(--amber); border-color: rgba(212,134,10,.42); }
.u-hero__visual--integration_mesh__node--teal .u-hero__visual--integration_mesh__nodeglyph { background: rgba(45,158,143,.16); color: var(--teal, #2D9E8F); border-color: rgba(45,158,143,.42); }
.u-hero__visual--integration_mesh__nodesub {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px; letter-spacing: .04em; color: var(--text-dim); display: block; margin-top: 1px; font-weight: 500;
}

/* callouts */
.u-hero__visual--integration_mesh__callout {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 13px;
  background: rgba(11,14,17,.92);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  animation: u-hero-mesh-nodein .8s both ease-out; animation-delay: .5s; z-index: 4;
}
.u-hero__visual--integration_mesh__callout strong { display: block; font-size: 12px; color: var(--white); font-weight: 700; line-height: 1.2; }
.u-hero__visual--integration_mesh__callout span {
  display: block; font-size: 10.5px; color: var(--text-mute); margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
.u-hero__visual--integration_mesh__cglyph {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
}
.u-hero__visual--integration_mesh__callout--jade .u-hero__visual--integration_mesh__cglyph { color: var(--jade); }
.u-hero__visual--integration_mesh__callout--intel .u-hero__visual--integration_mesh__cglyph { color: var(--intel-bright); }
.u-hero__visual--integration_mesh__callout--amber .u-hero__visual--integration_mesh__cglyph { color: var(--amber); }

@media (max-width: 1000px) {
  .u-hero__visual--integration_mesh__stage { aspect-ratio: 16 / 13; }
  .u-hero__visual--integration_mesh__node { font-size: 11px; padding: 6px 9px; }
  .u-hero__visual--integration_mesh__core { width: 108px; height: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  .u-hero__visual--integration_mesh__pulse,
  .u-hero__visual--integration_mesh__streams path,
  .u-hero__visual--integration_mesh__corering,
  .u-hero__visual--integration_mesh__node,
  .u-hero__visual--integration_mesh__callout { animation: none !important; }
  .u-hero__visual--integration_mesh__node,
  .u-hero__visual--integration_mesh__callout { opacity: 1; }
}

/* ============================================================
   preset · sensing_layer  (Devices platform hero)
   Ported verbatim from prototype/devices-platform-page.css .sense*.
   Device tiles are STATUS CARDS (provider-neutral), never camera
   frames. Theme tokens; pure-CSS pulse; honours reduced-motion.
   Scoped under the unique `.sense*` BEM namespace (no collisions).
   ============================================================ */
.sense {
  width: 100%;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
  position: relative;
}
.sense__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11.5px; letter-spacing: .08em; color: var(--text-dim);
  white-space: nowrap; overflow: hidden;
}
.sense__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--bg-4); border: 1px solid var(--line-strong); }
.sense__dot:nth-child(1) { background: #C0392B; opacity: .85; }
.sense__dot:nth-child(2) { background: #D4860A; opacity: .85; }
.sense__dot:nth-child(3) { background: #42B655; opacity: .85; }
.sense__label { margin-left: 8px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sense__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--jade); letter-spacing: .14em;
  padding: 3px 9px; border: 1px solid rgba(66,182,85,.5); border-radius: 999px;
  background: rgba(66,182,85,.08);
}
.sense__pulse {
  width: 6px; height: 6px; border-radius: 999px; background: var(--jade);
  box-shadow: 0 0 10px var(--jade); animation: sensePulse 1.6s ease-in-out infinite;
}
@keyframes sensePulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }

.sense__body { display: grid; grid-template-columns: 1.55fr .95fr; gap: 1px; background: var(--line); }
@media (max-width: 1180px) {
  .sense__body { grid-template-columns: 1fr; }
  .sense__rail { border-top: 1px solid var(--line); }
  .sense__layer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sense__gov { margin-top: 6px; }
}
@media (max-width: 560px) { .sense__layer { grid-template-columns: 1fr; } }

.sense__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: var(--line); }
.sensetile {
  position: relative; min-height: 132px;
  padding: 13px 14px 12px;
  background: linear-gradient(180deg, #18222b 0%, #0f1419 100%);
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
}
.sensetile::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(43,108,176,.12), transparent 55%);
  pointer-events: none;
}
.sensetile--jade::before  { background: radial-gradient(120% 90% at 100% 0%, rgba(66,182,85,.12), transparent 55%); }
.sensetile--amber::before { background: radial-gradient(120% 90% at 100% 0%, rgba(212,134,10,.12), transparent 55%); }
.sensetile__top {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .04em; color: var(--text-dim);
}
.sensetile__sig {
  font-weight: 700; font-size: 8.5px; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
  background: rgba(43,108,176,.16); color: var(--intel-bright); border: 1px solid rgba(43,108,176,.34);
}
.sensetile--jade  .sensetile__sig { background: rgba(66,182,85,.16);  color: var(--jade);  border-color: rgba(66,182,85,.4); }
.sensetile--amber .sensetile__sig { background: rgba(212,134,10,.16); color: var(--amber); border-color: rgba(212,134,10,.4); }
.sensetile__main { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; margin-top: 2px; }
.sensetile__glyph {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(43,108,176,.14); color: var(--intel-bright); border: 1px solid rgba(43,108,176,.4);
}
.sensetile--jade  .sensetile__glyph { background: rgba(66,182,85,.16);  color: var(--jade);  border-color: rgba(66,182,85,.4); }
.sensetile--amber .sensetile__glyph { background: rgba(212,134,10,.16); color: var(--amber); border-color: rgba(212,134,10,.4); }
.sensetile__read { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--white); line-height: 1.04; letter-spacing: -.01em; white-space: nowrap; }
.sensetile__read--word { font-size: 17px; }
.sensetile__read small { font-size: 12px; font-weight: 700; color: var(--text-mute); margin-left: 3px; }
.sensetile__name { position: relative; z-index: 1; margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--text); }
.sensetile__statusdot { width: 7px; height: 7px; border-radius: 999px; background: var(--intel-bright); box-shadow: 0 0 8px var(--intel-bright); }
.sensetile--jade  .sensetile__statusdot { background: var(--jade);  box-shadow: 0 0 8px var(--jade); }
.sensetile--amber .sensetile__statusdot { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: sensePulse 1.4s ease-in-out infinite; }
.sensetile__sub { position: relative; z-index: 1; font-size: 10.5px; color: var(--text-dim); }

.sense__rail { background: linear-gradient(180deg, var(--bg-2), #10151b); padding: 14px 15px; display: flex; flex-direction: column; gap: 12px; }
.sense__railhead {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 7px;
}
.sense__railhead::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--jade); box-shadow: 0 0 8px var(--jade); }
.sense__layer { display: flex; flex-direction: column; gap: 8px; }
.sense__lrow {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center;
  padding: 9px 10px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line);
}
.sense__lglyph {
  width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(43,108,176,.14); color: var(--intel-bright); border: 1px solid rgba(43,108,176,.4);
}
.sense__lname { font-size: 12.5px; font-weight: 600; color: var(--text); }
.sense__lsub  { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }
.sense__lstat {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700;
  white-space: nowrap; flex: none;
  color: var(--intel-bright); padding: 3px 8px; border-radius: 999px;
  background: rgba(43,108,176,.1); border: 1px solid rgba(43,108,176,.3);
}
.sense__gov {
  margin-top: auto; padding: 11px 12px; border-radius: 10px;
  background: rgba(66,182,85,.06); border: 1px solid rgba(66,182,85,.22);
  font-size: 11px; color: var(--text-mute); line-height: 1.45;
}
.sense__gov strong { color: var(--jade); font-weight: 700; }

.sense__strip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line); background: rgba(0,0,0,.16);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .04em; color: var(--text-mute);
}
.sense__sstat strong { color: var(--text); margin-right: 7px; font-weight: 700; }
.sense__sstat--intel strong { color: var(--intel-bright); }
.sense__sstat--amber strong { color: var(--amber); }
.sense__sstat--jade  strong { color: var(--jade); }

@media (prefers-reduced-motion: reduce) {
  .sense__pulse, .sensetile--amber .sensetile__statusdot { animation: none; }
}

/* ============================================================
   preset · visual_intelligence  (Visual AI platform hero)
   Detection console — geometric markers ONLY (never figurative,
   no facial / biometric overlays), provider-neutral. Same console
   family as `sensing_layer`. Theme tokens; pure-CSS scan + pulse;
   honours reduced-motion. Scoped under the `.viz*` namespace.
   Colour grammar: intel = visual data / review, jade = verified,
   amber = needs review, ember = critical only.
   ============================================================ */
.viz {
  width: 100%;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
  position: relative;
}
.viz__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11.5px; letter-spacing: .08em; color: var(--text-dim);
  white-space: nowrap; overflow: hidden;
}
.viz__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--bg-4); border: 1px solid var(--line-strong); }
.viz__dot:nth-child(1) { background: #C0392B; opacity: .85; }
.viz__dot:nth-child(2) { background: #D4860A; opacity: .85; }
.viz__dot:nth-child(3) { background: #42B655; opacity: .85; }
.viz__label { margin-left: 8px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.viz__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--jade); letter-spacing: .14em;
  padding: 3px 9px; border: 1px solid rgba(66,182,85,.5); border-radius: 999px;
  background: rgba(66,182,85,.08);
}
.viz__pulse {
  width: 6px; height: 6px; border-radius: 999px; background: var(--jade);
  box-shadow: 0 0 10px var(--jade); animation: vizPulse 1.6s ease-in-out infinite;
}
@keyframes vizPulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }

.viz__body { display: grid; grid-template-columns: 1.55fr .95fr; gap: 1px; background: var(--line); }
@media (max-width: 1180px) {
  .viz__body { grid-template-columns: 1fr; }
  .viz__rail { border-top: 1px solid var(--line); }
  .viz__layer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .viz__gov { margin-top: 6px; }
}
@media (max-width: 560px) { .viz__layer { grid-template-columns: 1fr; } }

/* ---- 2×2 detection-feed grid ---- */
.viz__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: var(--line); }
.viztile { position: relative; min-height: 152px; overflow: hidden; background: #0c1014; }
.viztile__feed {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(43,108,176,.05) 0 1px, transparent 1px 4px),
    radial-gradient(120% 100% at 50% 0%, rgba(43,108,176,.10), transparent 60%),
    linear-gradient(180deg, #141d26 0%, #0b0f14 100%);
}
.viztile--jade  .viztile__feed { background:
  repeating-linear-gradient(0deg, rgba(66,182,85,.05) 0 1px, transparent 1px 4px),
  radial-gradient(120% 100% at 50% 0%, rgba(66,182,85,.10), transparent 60%),
  linear-gradient(180deg, #141d26 0%, #0b0f14 100%); }
.viztile--amber .viztile__feed { background:
  repeating-linear-gradient(0deg, rgba(212,134,10,.06) 0 1px, transparent 1px 4px),
  radial-gradient(120% 100% at 50% 0%, rgba(212,134,10,.12), transparent 60%),
  linear-gradient(180deg, #1d1812 0%, #0b0f14 100%); }
/* moving scan line */
.viztile__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--intel-bright), transparent);
  opacity: .55; box-shadow: 0 0 10px var(--intel-bright);
  animation: vizScan 3.4s cubic-bezier(.6,0,.4,1) infinite;
}
.viztile--jade  .viztile__scan { background: linear-gradient(90deg, transparent, var(--jade), transparent);  box-shadow: 0 0 10px var(--jade); }
.viztile--amber .viztile__scan { background: linear-gradient(90deg, transparent, var(--amber), transparent); box-shadow: 0 0 10px var(--amber); }
.viz__grid .viztile:nth-child(2) .viztile__scan { animation-delay: .8s; }
.viz__grid .viztile:nth-child(3) .viztile__scan { animation-delay: 1.6s; }
.viz__grid .viztile:nth-child(4) .viztile__scan { animation-delay: 2.4s; }
@keyframes vizScan { 0% { top: -2%; opacity: 0; } 12% { opacity: .55; } 88% { opacity: .55; } 100% { top: 100%; opacity: 0; } }

/* top readout: CAM-N + confidence badge */
.viztile__readout {
  position: absolute; top: 8px; left: 9px; right: 9px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
.viztile__cam { font-size: 9.5px; letter-spacing: .06em; color: var(--text-dim); }
.viztile__cam::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 999px;
  margin-right: 5px; vertical-align: middle; background: #C0392B; box-shadow: 0 0 6px #C0392B;
  animation: vizPulse 1.4s ease-in-out infinite;
}
.viztile__conf {
  font-size: 8.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
  background: rgba(43,108,176,.18); color: var(--intel-bright); border: 1px solid rgba(43,108,176,.36);
}
.viztile--jade  .viztile__conf { background: rgba(66,182,85,.18);  color: var(--jade);  border-color: rgba(66,182,85,.42); }
.viztile--amber .viztile__conf { background: rgba(212,134,10,.18); color: var(--amber); border-color: rgba(212,134,10,.42); }

/* geometric detection bounding box + corner tag */
.viztile__box {
  position: absolute; z-index: 2; border: 1.5px solid var(--intel-bright); border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 14px -2px var(--intel-bright);
  animation: vizBox 2.8s ease-in-out infinite;
}
.viztile--jade  .viztile__box { border-color: var(--jade);  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 14px -2px var(--jade); }
.viztile--amber .viztile__box { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 14px -2px var(--amber); }
.viztile__box--a { top: 30%; left: 11%; width: 46%; height: 42%; }
.viztile__box--b { top: 24%; left: 39%; width: 44%; height: 40%; }
.viztile__box--c { top: 33%; left: 18%; width: 42%; height: 40%; }
.viztile__box--d { top: 27%; left: 33%; width: 45%; height: 42%; }
.viztile__tag {
  position: absolute; top: -9px; left: -1px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 8px; font-weight: 700; letter-spacing: .06em; line-height: 1;
  padding: 2px 5px; border-radius: 3px; white-space: nowrap;
  background: var(--intel-bright); color: #07101c;
}
.viztile--jade  .viztile__tag { background: var(--jade);  color: var(--on-jade, #06140a); }
.viztile--amber .viztile__tag { background: var(--amber); color: #1c1303; }
@keyframes vizBox { 0%,100% { opacity: .72; } 50% { opacity: 1; } }

/* caption pill */
.viztile__caption {
  position: absolute; bottom: 8px; left: 9px; right: 9px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600; color: var(--text);
  background: rgba(8,12,16,.66); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 9px; backdrop-filter: blur(2px); width: max-content; max-width: 100%;
}
.viztile__capdot { width: 6px; height: 6px; border-radius: 999px; flex: none; background: var(--intel-bright); box-shadow: 0 0 8px var(--intel-bright); }
.viztile--jade  .viztile__capdot { background: var(--jade);  box-shadow: 0 0 8px var(--jade); }
.viztile--amber .viztile__capdot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }

/* ---- detection-layer rail (mirrors .sense__rail) ---- */
.viz__rail { background: linear-gradient(180deg, var(--bg-2), #10151b); padding: 14px 15px; display: flex; flex-direction: column; gap: 12px; }
.viz__railhead {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 7px;
}
.viz__railhead::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--intel-bright); box-shadow: 0 0 8px var(--intel-bright); }
.viz__layer { display: flex; flex-direction: column; gap: 8px; }
.viz__lrow {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center;
  padding: 9px 10px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line);
}
.viz__lglyph {
  width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(43,108,176,.14); color: var(--intel-bright); border: 1px solid rgba(43,108,176,.4);
}
.viz__lname { font-size: 12.5px; font-weight: 600; color: var(--text); }
.viz__lsub  { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }
.viz__lstat {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700;
  white-space: nowrap; flex: none;
  color: var(--intel-bright); padding: 3px 8px; border-radius: 999px;
  background: rgba(43,108,176,.1); border: 1px solid rgba(43,108,176,.3);
}
.viz__gov {
  margin-top: auto; padding: 11px 12px; border-radius: 10px;
  background: rgba(66,182,85,.06); border: 1px solid rgba(66,182,85,.22);
  font-size: 11px; color: var(--text-mute); line-height: 1.45;
}
.viz__gov strong { color: var(--jade); font-weight: 700; }

/* ---- bottom stat strip ---- */
.viz__strip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line); background: rgba(0,0,0,.16);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .04em; color: var(--text-mute);
}
.viz__sstat strong { color: var(--text); margin-right: 7px; font-weight: 700; }
.viz__sstat--intel strong { color: var(--intel-bright); }
.viz__sstat--amber strong { color: var(--amber); }
.viz__sstat--jade  strong { color: var(--jade); }

@media (prefers-reduced-motion: reduce) {
  .viztile__scan { animation: none; opacity: 0; }
  .viztile__box { animation: none; opacity: 1; }
  .viz__pulse, .viztile__cam::before { animation: none; }
}

/* ============================================================
   preset · conversational  (Conversational AI platform hero)
   Dual-mode conversation console — a customer turn + an internal
   VOICE turn, each resolving into a jade routed chip; a typing
   indicator; a conversation-layer rail + governance note + stat
   strip. Illustrative copy only (no real customers / recordings /
   vendor names); never implies autonomous decisions. Same console
   family as `visual_intelligence` / `sensing_layer`. Theme tokens;
   pure-CSS pulse + waveform + typing; honours reduced-motion.
   Scoped under the `.cvz*` namespace. Colour grammar: intel = AI /
   conversation, jade = answered / routed, amber = review + live
   voice channel, ember = sensitive escalation only.
   ============================================================ */
.cvz {
  width: 100%;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
  position: relative;
}
.cvz__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11.5px; letter-spacing: .08em; color: var(--text-dim);
  white-space: nowrap; overflow: hidden;
}
.cvz__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--bg-4); border: 1px solid var(--line-strong); }
.cvz__dot:nth-child(1) { background: #C0392B; opacity: .85; }
.cvz__dot:nth-child(2) { background: #D4860A; opacity: .85; }
.cvz__dot:nth-child(3) { background: #42B655; opacity: .85; }
.cvz__label { margin-left: 8px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cvz__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--jade); letter-spacing: .14em;
  padding: 3px 9px; border: 1px solid rgba(66,182,85,.5); border-radius: 999px;
  background: rgba(66,182,85,.08);
}
.cvz__pulse {
  width: 6px; height: 6px; border-radius: 999px; background: var(--jade);
  box-shadow: 0 0 10px var(--jade); animation: cvzPulse 1.6s ease-in-out infinite;
}
@keyframes cvzPulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }

.cvz__body { display: grid; grid-template-columns: 1.55fr .95fr; gap: 1px; background: var(--line); }
@media (max-width: 1180px) {
  .cvz__body { grid-template-columns: 1fr; }
  .cvz__rail { border-top: 1px solid var(--line); }
  .cvz__layer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cvz__gov { margin-top: 6px; }
}
@media (max-width: 560px) { .cvz__layer { grid-template-columns: 1fr; } }

/* ---- conversation thread ---- */
.cvz__thread { background: linear-gradient(180deg, #131b23, #0c1116); padding: 14px 15px; display: flex; flex-direction: column; gap: 11px; overflow: hidden; }
.cvz__turn { display: flex; gap: 9px; align-items: flex-start; }
.cvz__av {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3); color: var(--text-mute); border: 1px solid var(--line);
}
.cvz__av--ai    { background: rgba(43,108,176,.16); color: var(--intel-bright); border-color: rgba(43,108,176,.42); }
.cvz__av--voice { background: rgba(212,134,10,.16); color: var(--amber); border-color: rgba(212,134,10,.42); animation: cvzPulse 1.8s ease-in-out infinite; }
.cvz__msg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cvz__who {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 8px;
}
.cvz__who--amber { color: var(--amber); }
.cvz__bubble {
  font-size: 12px; line-height: 1.42; color: var(--text);
  padding: 8px 11px; border-radius: 12px 12px 12px 4px;
  background: var(--bg-3); border: 1px solid var(--line); max-width: 100%;
}
.cvz__bubble--ai    { background: rgba(43,108,176,.10); border-color: rgba(43,108,176,.3); }
.cvz__bubble--voice { background: rgba(212,134,10,.09); border-color: rgba(212,134,10,.28); font-style: italic; }
.cvz__chip {
  display: inline-flex; align-items: center; gap: 7px; width: max-content; max-width: 100%;
  font-size: 10px; font-weight: 700; letter-spacing: .01em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(66,182,85,.1); color: var(--jade); border: 1px solid rgba(66,182,85,.34);
}
.cvz__chipdot { width: 6px; height: 6px; border-radius: 999px; flex: none; background: var(--jade); box-shadow: 0 0 8px var(--jade); }
/* mini voice waveform */
.cvz__wave { display: inline-flex; align-items: center; gap: 2px; height: 11px; }
.cvz__wave i { width: 2px; height: 100%; border-radius: 2px; background: var(--amber); transform-origin: center; animation: cvzWave 1s ease-in-out infinite; }
.cvz__wave i:nth-child(2) { animation-delay: .15s; }
.cvz__wave i:nth-child(3) { animation-delay: .3s; }
.cvz__wave i:nth-child(4) { animation-delay: .45s; }
.cvz__wave i:nth-child(5) { animation-delay: .6s; }
@keyframes cvzWave { 0%,100% { transform: scaleY(.35); opacity: .6; } 50% { transform: scaleY(1); opacity: 1; } }
/* typing indicator */
.cvz__typing { display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px; border-radius: 12px 12px 12px 4px; background: rgba(43,108,176,.10); border: 1px solid rgba(43,108,176,.3); width: max-content; }
.cvz__typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--intel-bright); opacity: .5; animation: cvzType 1.2s ease-in-out infinite; }
.cvz__typing i:nth-child(2) { animation-delay: .2s; }
.cvz__typing i:nth-child(3) { animation-delay: .4s; }
@keyframes cvzType { 0%,100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* ---- conversation-layer rail (mirrors .sense__rail) ---- */
.cvz__rail { background: linear-gradient(180deg, var(--bg-2), #10151b); padding: 14px 15px; display: flex; flex-direction: column; gap: 12px; }
.cvz__railhead {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 7px;
}
.cvz__railhead::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--intel-bright); box-shadow: 0 0 8px var(--intel-bright); }
.cvz__layer { display: flex; flex-direction: column; gap: 8px; }
.cvz__lrow {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center;
  padding: 9px 10px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line);
}
.cvz__lglyph {
  width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(43,108,176,.14); color: var(--intel-bright); border: 1px solid rgba(43,108,176,.4);
}
.cvz__lrow--amber .cvz__lglyph { background: rgba(212,134,10,.16); color: var(--amber); border-color: rgba(212,134,10,.4); }
.cvz__lrow--jade  .cvz__lglyph { background: rgba(66,182,85,.16);  color: var(--jade);  border-color: rgba(66,182,85,.4); }
.cvz__lname { font-size: 12.5px; font-weight: 600; color: var(--text); }
.cvz__lsub  { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }
.cvz__lstat {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700;
  white-space: nowrap; flex: none;
  color: var(--intel-bright); padding: 3px 8px; border-radius: 999px;
  background: rgba(43,108,176,.1); border: 1px solid rgba(43,108,176,.3);
}
.cvz__lrow--amber .cvz__lstat { color: var(--amber); background: rgba(212,134,10,.1); border-color: rgba(212,134,10,.3); }
.cvz__lrow--jade  .cvz__lstat { color: var(--jade);  background: rgba(66,182,85,.1);  border-color: rgba(66,182,85,.3); }
.cvz__gov {
  margin-top: auto; padding: 11px 12px; border-radius: 10px;
  background: rgba(66,182,85,.06); border: 1px solid rgba(66,182,85,.22);
  font-size: 11px; color: var(--text-mute); line-height: 1.45;
}
.cvz__gov strong { color: var(--jade); font-weight: 700; }

/* ---- bottom stat strip ---- */
.cvz__strip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line); background: rgba(0,0,0,.16);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .04em; color: var(--text-mute);
}
.cvz__sstat strong { color: var(--text); margin-right: 7px; font-weight: 700; }
.cvz__sstat--intel strong { color: var(--intel-bright); }
.cvz__sstat--amber strong { color: var(--amber); }
.cvz__sstat--jade  strong { color: var(--jade); }

@media (prefers-reduced-motion: reduce) {
  .cvz__pulse, .cvz__av--voice, .cvz__wave i, .cvz__typing i { animation: none; }
  .cvz__wave i { transform: scaleY(.7); }
}

/* =====================================================================
   operations_network preset — cinematic full-bleed WebGL hero (Home).
   Section-level layers rendered by the universal-hero "is_cine" branch.
   Ported from prototype home-page.css .hero-cine*. Stays dark in any theme
   mode (dark tokens redeclared on the root). Tokens only.
   ===================================================================== */
/* Always-dark stage: override the hero-band wrapper's light-mode gradient +
   glows and the base ".dnd-section:has(.hero) .hero" transparent/padding rules
   (all out-specify a single preset class), so the cinematic hero stays dark in
   light OR dark theme — consistent with the theme's always-dark .dash stages. */
.dnd-section:has(.u-hero--cine) { background: #0B0E11 !important; }
.dnd-section:has(.u-hero--cine)::before,
.dnd-section:has(.u-hero--cine)::after { display: none !important; }
.u-hero--cine {
  --bg-0: #0B0E11; --bg-2: #161C22; --line: #232B33; --line-strong: #2E3842;
  --text: #C7CFD6; --text-mute: #99A4AE; --text-dim: #6B7682; --white: #FFFFFF;
  position: relative;
  min-height: min(880px, 92vh);
  display: flex; align-items: center;
  overflow: hidden;
  background: #0B0E11 !important;
  border-bottom: 1px solid var(--line);
  padding: 0 !important;
}
.u-hero__cine { position: absolute; inset: 0; z-index: 0; }
.u-hero__cine-canvas { position: absolute; inset: 0; z-index: 0; }
.u-hero__cine-canvas canvas { display: block; width: 100%; height: 100%; }

.u-hero__cine-glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%; right: 14%; width: 620px; height: 620px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(66,182,85,.22), rgba(66,182,85,.06) 42%, transparent 68%);
  filter: blur(14px);
  animation: ucine-glow 9s ease-in-out infinite;
}
@keyframes ucine-glow { 0%,100% { opacity: .7; transform: translateY(-50%) scale(1); } 50% { opacity: 1; transform: translateY(-54%) scale(1.06); } }

.u-hero__cine-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(135% 95% at 72% 50%, transparent 34%, rgba(11,14,17,.66) 100%),
    linear-gradient(90deg, #0B0E11 3%, rgba(11,14,17,.74) 36%, rgba(11,14,17,0) 64%);
}

/* hoist the hero copy above the canvas + veil */
.u-hero--cine .hero__inner { position: relative; z-index: 2; width: 100%; }
.u-hero--cine .hero__grid { align-items: center; }
.u-hero--cine .hero__copy { max-width: 660px; padding: 56px 0; }
.u-hero--cine .hero__title { color: #FFFFFF; font-size: clamp(48px, 6.4vw, 92px); line-height: .96; letter-spacing: -.02em; }
.u-hero--cine .hero__sub { color: var(--text-mute); max-width: 52ch; }

/* live badge — repurpose the eyebrow as a jade "live" pill */
.u-hero--cine .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(66,182,85,.08); border: 1px solid rgba(66,182,85,.3);
  color: var(--jade);
}
.u-hero--cine .eyebrow .dot { box-shadow: 0 0 12px var(--jade); animation: ucine-pulse 1.6s ease-in-out infinite; }
@keyframes ucine-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

/* floating product callouts over the network */
.u-hero__cine-callouts { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.u-hero__cobj {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 15px; border-radius: 12px;
  background: rgba(17,22,27,.72); border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 26px 60px -32px rgba(0,0,0,.92);
  animation: ucine-float 7s ease-in-out infinite;
}
.u-hero__cobj-ic {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px;
  position: relative;
  background: rgba(66,182,85,.14); color: var(--jade); border: 1px solid rgba(66,182,85,.3);
}
.u-hero__cobj-ic > svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px;
}
.u-hero__cobj strong { display: block; font-size: 13px; color: #FFFFFF; font-weight: 700; }
.u-hero__cobj span { display: block; font-size: 11.5px; color: var(--text-mute); margin-top: 1px; }
.u-hero__cobj--intel .u-hero__cobj-ic { background: rgba(43,108,176,.16); color: var(--intel-bright); border-color: rgba(43,108,176,.32); }
.u-hero__cobj--amber .u-hero__cobj-ic { background: rgba(212,134,10,.16); color: var(--amber); border-color: rgba(212,134,10,.34); }
.u-hero__cobj--a { top: 24%; right: 5%;  animation-duration: 7s; }
.u-hero__cobj--b { top: 70%; right: 11%; animation-name: ucine-drift; animation-duration: 8.5s; animation-delay: -3s; }
.u-hero__cobj--c { top: 15%; right: 26%; animation-name: ucine-drift; animation-duration: 9.5s; animation-delay: -1.4s; }
.u-hero__cobj--d { top: 50%; right: 3%;  animation-duration: 8s; animation-delay: -5s; }
.u-hero__cobj--e { top: 85%; right: 24%; animation-duration: 7.6s; animation-delay: -2.2s; }
@keyframes ucine-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ucine-drift { 0%,100% { transform: translate(0,0); } 33% { transform: translate(-9px,-11px); } 66% { transform: translate(7px,-4px); } }

/* scroll cue */
.u-hero__cine-scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim);
  pointer-events: none;
}
.u-hero__cine-scroll span { width: 1px; height: 28px; background: linear-gradient(var(--jade), transparent); animation: ucine-scroll 1.9s ease-in-out infinite; }
@keyframes ucine-scroll { 0%,100% { opacity: .3; transform: scaleY(.55); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

@media (max-width: 1100px) { .u-hero__cobj { display: none; } }
@media (max-width: 680px) {
  .u-hero--cine { min-height: 86vh; }
  .u-hero__cine-veil { background: linear-gradient(180deg, rgba(11,14,17,.35), #0B0E11 92%); }
  .u-hero--cine .hero__copy { padding: 28px 0 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .u-hero__cine-glow, .u-hero__cobj, .u-hero__cine-scroll span, .u-hero--cine .eyebrow .dot { animation: none; }
}

/* ---- Light theme: the cinematic hero adapts (light stage, dark copy) -------
   Overrides the always-dark defaults above (more specific [data-theme]
   selectors win). The JS re-renders the constellation with a darker palette +
   normal blending so it reads on the light stage (see module.js LIGHT branch). */
[data-theme="light"] .dnd-section:has(.u-hero--cine) {
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF2F6 100%) !important;
}
[data-theme="light"] .u-hero--cine {
  --bg-0: #F7F8FA; --bg-2: #FFFFFF; --line: #E5E9EE; --line-strong: #D2D8DF;
  --text: #1E2630; --text-mute: #5A6573; --text-dim: #8A95A2; --white: #0F141A;
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF2F6 100%) !important;
}
[data-theme="light"] .u-hero--cine .hero__title { color: #0F141A; }
[data-theme="light"] .u-hero__cine-veil {
  background:
    radial-gradient(135% 95% at 72% 50%, transparent 40%, rgba(255,255,255,.5) 100%),
    linear-gradient(90deg, #FFFFFF 2%, rgba(255,255,255,.78) 34%, rgba(255,255,255,0) 62%);
}
[data-theme="light"] .u-hero__cine-glow {
  background: radial-gradient(circle, rgba(66,182,85,.16), rgba(66,182,85,.04) 42%, transparent 68%);
}
[data-theme="light"] .u-hero__cobj {
  background: rgba(255,255,255,.82); border-color: var(--line-strong);
  box-shadow: 0 18px 40px -24px rgba(15,20,26,.30);
}
[data-theme="light"] .u-hero__cobj strong { color: #0F141A; }
[data-theme="light"] .u-hero__cobj span { color: #5A6573; }
[data-theme="light"] .u-hero__cine-scroll { color: #8A95A2; }

/* ============================================================
   PRESET: visitor_ops — Visitor operations readiness board
   (Travel & Tourism). Ported from prototype .vops*; root rescoped
   to .u-hero__visual--visitor_ops. CSS-only scan line + pulse.
   ============================================================ */
.u-hero__visual--visitor_ops {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  overflow: hidden;
}
.vops__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; color: var(--text-dim);
}
.vops__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--line-strong); }
.vops__dot:nth-child(1) { background: #ff5f57; }
.vops__dot:nth-child(2) { background: #febc2e; }
.vops__dot:nth-child(3) { background: #28c840; }
.vops__url { margin-left: 8px; }
.vops__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--jade); font-weight: 700; letter-spacing: .08em; }
.vops__pulse { width: 7px; height: 7px; border-radius: 999px; background: var(--jade); box-shadow: 0 0 10px var(--jade); animation: vops-pulse 1.8s ease-in-out infinite; }
@keyframes vops-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

.vops__stage { padding: 16px; position: relative; }
.vops__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vops__heyebrow { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.vops__htitle { font-size: 16px; font-weight: 800; color: #fff; margin-top: 2px; }
.vops__period { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: var(--intel-bright); padding: 5px 10px; border-radius: 999px; background: rgba(43,108,176,.12); border: 1px solid rgba(43,108,176,.3); white-space: nowrap; }

.vops__route { display: flex; align-items: center; gap: 12px; padding: 11px 13px; margin-bottom: 14px; border-radius: var(--radius-sm); background: rgba(43,108,176,.10); border: 1px solid rgba(43,108,176,.32); }
.vops__routeico { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(43,108,176,.18); color: var(--intel-bright); }
.vops__routetxt { line-height: 1.25; }
.vops__routetxt strong { display: block; font-size: 12.5px; color: #fff; font-weight: 700; }
.vops__routetxt span { display: block; font-size: 11px; color: var(--text-mute); margin-top: 1px; }
.vops__routetime { margin-left: auto; flex-shrink: 0; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; color: var(--jade); padding: 4px 9px; border-radius: 999px; background: rgba(66,182,85,.12); border: 1px solid rgba(66,182,85,.3); }

.vops__rows { display: flex; flex-direction: column; gap: 6px; }
.vops__row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.vops__rowico { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); color: var(--text-mute); }
.vops__rowmain { min-width: 0; flex: 1; }
.vops__rowtitle { font-size: 12.5px; color: var(--text); font-weight: 600; }
.vops__rowmeta { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.vops__pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 4px 9px; border-radius: 999px; border: 1px solid transparent; }
.vops__pill .pdot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.vops__pill--jade  { color: var(--jade);        background: rgba(66,182,85,.12);  border-color: rgba(66,182,85,.3); }
.vops__pill--amber { color: var(--amber);       background: rgba(212,134,10,.12);  border-color: rgba(212,134,10,.3); }
.vops__pill--intel { color: var(--intel-bright);background: rgba(43,108,176,.12);  border-color: rgba(43,108,176,.3); }
.vops__pill--ember { color: var(--ember);       background: rgba(192,57,43,.14);   border-color: rgba(192,57,43,.4); }
.vops__row--escalated { border-color: rgba(192,57,43,.35); background: rgba(192,57,43,.06); }

.vops__foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 13px; border-radius: var(--radius-sm); background: rgba(66,182,85,.08); border: 1px solid rgba(66,182,85,.28); }
.vops__footico { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(66,182,85,.16); color: var(--jade); }
.vops__foottxt { font-size: 12px; color: var(--text); font-weight: 600; }
.vops__foottxt span { color: var(--text-mute); font-weight: 400; }
.vops__footbtn { margin-left: auto; flex-shrink: 0; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--jade); padding: 5px 11px; border-radius: 999px; background: rgba(66,182,85,.14); border: 1px solid rgba(66,182,85,.34); }

.vops__scan { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(66,182,85,.06), transparent); height: 40%; animation: vops-scan 6s ease-in-out infinite; }
@keyframes vops-scan { 0% { transform: translateY(-60%); opacity: 0; } 40%,60% { opacity: 1; } 100% { transform: translateY(220%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vops__scan, .vops__pulse { animation: none; } }
@media (max-width: 700px) { .vops__period { display: none; } .vops__row { flex-wrap: wrap; } }

/* ============================================================
   PRESET: production_ops — Production operations readiness board
   (Manufacturing & Industrial). Reuses the shared .vops__* shell
   above (chrome / stage / route / rows / pills / foot / scan) —
   only the root container is rescoped here. The manufacturing
   rows + labels live in partials/hero-visuals/production_ops.html,
   not in CSS. Same colour grammar: jade = done/approved · amber =
   due/open · intel = routing/review · ember = flagged/escalated.
   ============================================================ */
.u-hero__visual--production_ops {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  overflow: hidden;
}

/* ============================================================
   PRESET: venue_ops — Venue operations readiness board
   (Leisure & Entertainment). Reuses the shared .vops__* shell
   above (chrome / stage / route / rows / pills / foot / scan) —
   only the root container is rescoped here. The leisure venue
   rows + labels live in partials/hero-visuals/venue_ops.html,
   not in CSS. Same colour grammar: jade = done/ready · amber =
   due/missed/open · intel = routing/review · ember = escalated.
   ============================================================ */
.u-hero__visual--venue_ops {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  overflow: hidden;
}

/* ============================================================
   PRESET: property_ops — Property operations readiness board
   (Hotel & Accommodation). Reuses the shared .vops__* shell
   above (chrome / stage / route / rows / pills / foot / scan) —
   only the root container is rescoped here. The hotel department
   rows + labels live in partials/hero-visuals/property_ops.html,
   not in CSS. Same colour grammar: jade = done/ready · amber =
   open/due · intel = routing/review · ember = flagged/escalated.
   ============================================================ */
.u-hero__visual--property_ops {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  overflow: hidden;
}

/* ============================================================
   PRESET: care_ops — Care operations assurance board
   (Healthcare & Care Homes). Reuses the shared .vops__* shell
   above (chrome / stage / route / rows / pills / foot / scan) —
   only the root container is rescoped here. The care department
   rows + labels live in partials/hero-visuals/care_ops.html,
   not in CSS. Same colour grammar: jade = done/ready · amber =
   due/open/review/in-progress · intel = routing · ember =
   flagged/critical (cold-chain breach) only.
   ============================================================ */
.u-hero__visual--care_ops {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  overflow: hidden;
}

/* ============================================================
   PRESET: food_ops — Food safety operations assurance board
   (Food & Beverage). Reuses the shared .vops__* shell above
   (chrome / stage / route / rows / pills / foot / scan) — only
   the root container is rescoped here. The food-safety rows +
   labels live in partials/hero-visuals/food_ops.html, not in
   CSS. Same colour grammar: jade = done/ready · amber = due/
   open/review/in-progress · intel = routing · ember = flagged/
   critical (fridge breach) only.
   ============================================================ */
.u-hero__visual--food_ops {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  overflow: hidden;
}

/* ============================================================
   PRESET: facilities_ops — Facilities & estates assurance board
   (Facilities & Estates). Reuses the shared .vops__* shell above
   (chrome / stage / route / rows / pills / foot / scan) — only
   the root container is rescoped here. The estate-ops rows +
   labels live in partials/hero-visuals/facilities_ops.html, not
   in CSS. Same colour grammar: jade = done/ready · amber = due/
   open/review/in-progress · intel = routing · ember = flagged/
   critical (water-safety / statutory breach) only.
   ============================================================ */
.u-hero__visual--facilities_ops {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  overflow: hidden;
}

/* ============================================================
   PRESET: education_ops — Education & campus assurance board
   (Education). Reuses the shared .vops__* shell above (chrome /
   stage / route / rows / pills / foot / scan) — only the root
   container is rescoped here. The campus-ops rows + labels live
   in partials/hero-visuals/education_ops.html, not in CSS. Same
   colour grammar: jade = done/ready · amber = open/review/
   in-progress/awaiting · intel = routing · ember = flagged/
   critical (water-safety / statutory breach) only.
   ============================================================ */
.u-hero__visual--education_ops {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), #0f1419);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  overflow: hidden;
}