/* ============================================================
   call-intelligence.css — "Call Intelligence" story room.
   A LIGHT market terminal over the practice's phone lines: a
   bright sand-blue board, sand-blue = up, muted rose = down,
   mono chrome on white. Everything scoped under .cxp-intel.
   Tokens inherited from styles.css; sand-blue accent matches
   comms.css (#5a82c2 family).

   Animation contract with call-intelligence.js:
   - Static markup is the COMPLETE board (final KPI numbers, grown
     candles, filled sentiment strip). The JS only adds count-ups,
     a live clock, and a rotating feed line — all data-ci-* hooks.
   - The ticker tape and bar-growth are pure CSS and, per client
     requirement, ALWAYS run (NOT gated behind prefers-reduced-motion).
     Their static end-states (fill-mode: both) remain the final layout,
     so a no-JS / no-animation render still reads as the complete board.
   ============================================================ */

.cxp-intel {
  --up: #5a82c2;
  --up-lite: #8aa6dd;
  --up-deep: #3d63a4;
  --dn: #b85c68;
  --dn-lite: #d38f98;
  --up-dim: rgba(90, 130, 194, 0.12);
  --dn-dim: rgba(184, 92, 104, 0.12);
  --glass: #ffffff;
  --glass-2: #fbfcff;
  --glass-line: rgba(90, 130, 194, 0.16);
  --wht-92: #0b1020;
  --wht-70: #2f3548;
  --wht-55: #4a5066;
  --wht-38: #7a8096;
  --wht-24: #9aa4ba;
  color: var(--wht-92);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

/* recolor global helpers for the light canvas (scoped, not redefined) */
.cxp-intel .h2 { color: var(--wht-92); }
.cxp-intel .lead { color: var(--wht-55); max-width: 58ch; }
.cxp-intel .eyebrow { color: var(--up); }

.cxp-intel .ci-head { max-width: 64ch; }
.cxp-intel .ci-head h2 { margin: 14px 0 12px; }

.cxp-intel .ci-grad {
  font-style: normal;
  background: linear-gradient(100deg, var(--up) 0%, var(--up-deep) 55%, #4a72b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   HERO — sky, tape, headline
   ============================================================ */
.cxp-intel .ci-hero {
  position: relative;
  padding: clamp(120px, 13vw, 168px) 0 clamp(52px, 6vw, 88px);
  overflow: hidden;
}
.cxp-intel .ci-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.cxp-intel .ci-glow {
  position: absolute;
  left: 50%;
  top: -260px;
  width: 1200px;
  height: 640px;
  transform: translateX(-50%);
  background:
    radial-gradient(46% 52% at 50% 44%, rgba(90, 130, 194, 0.12), transparent 70%),
    radial-gradient(62% 62% at 50% 28%, rgba(120, 140, 220, 0.1), transparent 72%);
  filter: blur(10px);
}
.cxp-intel .ci-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(90, 130, 194, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 130, 194, 0.06) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(85% 62% at 50% 18%, #000 18%, transparent 76%);
  mask-image: radial-gradient(85% 62% at 50% 18%, #000 18%, transparent 76%);
}

/* --- the market tape --- */
.cxp-intel .ci-tape {
  position: relative;
  border-block: 1px solid var(--glass-line);
  background: linear-gradient(180deg, #ffffff, #f8faff);
  overflow: hidden;
  margin-bottom: clamp(44px, 6vw, 76px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cxp-intel .ci-tape-track {
  display: flex;
  width: max-content;
}
.cxp-intel .ci-tape-group {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: none;
}
.cxp-intel .ci-tk {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  padding: 12px 26px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--wht-55);
  border-right: 1px solid rgba(11, 16, 32, 0.06);
}
.cxp-intel .ci-tk b {
  font-weight: 600;
  color: var(--wht-38);
}
.cxp-intel .ci-tk i {
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
}
.cxp-intel .ci-tk.up i,
.cxp-intel .ci-tk.rec i { color: var(--up); }
.cxp-intel .ci-tk.dn i { color: var(--dn); }
.cxp-intel .ci-tk.flat i { color: var(--wht-38); }
.cxp-intel .ci-tk.op { color: var(--wht-70); }
.cxp-intel .ci-tk.op i {
  color: var(--dn);
  letter-spacing: 0.1em;
}
/* Signature board motion — client requirement: always runs, even with
   Reduce Motion on. Intentionally NOT gated behind prefers-reduced-motion. */
.cxp-intel .ci-tape-track {
  animation: ci-tape-roll 23s linear infinite;
}
.cxp-intel .ci-tape:hover .ci-tape-track {
  animation-play-state: paused;
}
@keyframes ci-tape-roll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- headline --- */
.cxp-intel .ci-hero-head {
  max-width: 900px;
}
.cxp-intel .ci-back {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--wht-38);
  margin-bottom: clamp(24px, 4vw, 40px);
  transition: color 0.15s;
}
.cxp-intel .ci-back:hover { color: var(--wht-92); }

.cxp-intel .ci-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--up);
}
.cxp-intel .ci-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--up);
  box-shadow: 0 0 0 4px var(--up-dim), 0 0 14px var(--up-lite);
}

.cxp-intel .ci-h1 {
  font-size: clamp(38px, 5.2vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--wht-92);
  margin: 18px 0 20px;
  text-wrap: balance;
}
.cxp-intel .ci-lead {
  font-size: clamp(16.5px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--wht-55);
  max-width: 60ch;
  margin: 0 0 32px;
}
.cxp-intel .ci-cta {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.cxp-intel .ci-cta--center { justify-content: center; }
.cxp-intel .ci-ghostlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--up);
  transition: color 0.15s;
}
.cxp-intel .ci-ghostlink:hover { color: var(--up-deep); }
.cxp-intel .ci-head-link { margin-top: 16px; }

/* ============================================================
   THE TERMINAL BOARD
   ============================================================ */
.cxp-intel .ci-term {
  margin-top: clamp(30px, 4vw, 48px);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg, 18px);
  background:
    linear-gradient(180deg, #ffffff, #fbfcff);
  box-shadow:
    0 30px 70px -48px rgba(30, 45, 80, 0.22),
    0 0 0 1px rgba(11, 16, 32, 0.03) inset;
  overflow: hidden;
}

/* chrome bar */
.cxp-intel .ci-term-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--glass-line);
  background: #f4f7fc;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--wht-55);
}
.cxp-intel .ci-term-id {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  color: var(--wht-70);
  white-space: nowrap;
}
.cxp-intel .ci-live-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--up);
  box-shadow: 0 0 0 3px var(--up-dim);
}
.cxp-intel .ci-live-dot { animation: ci-pulse 1.2941s ease-in-out infinite; }
@keyframes ci-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--up-dim); }
  50% { box-shadow: 0 0 0 6px rgba(90, 130, 194, 0.05); }
}
.cxp-intel .ci-term-feed {
  flex: 1;
  min-width: 0;
  text-align: center;
  color: var(--up);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.3s;
}
.cxp-intel .ci-term-feed.is-swap { opacity: 0; }
.cxp-intel .ci-term-clock {
  white-space: nowrap;
  color: var(--wht-38);
}
.cxp-intel .ci-term-clock b {
  font-weight: 600;
  color: var(--wht-70);
  font-variant-numeric: tabular-nums;
}

/* KPI tiles */
.cxp-intel .ci-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--glass-line);
  border-bottom: 1px solid var(--glass-line);
}
.cxp-intel .ci-kpi {
  background: var(--glass);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.cxp-intel .ci-kpi--op {
  background:
    linear-gradient(180deg, rgba(184, 92, 104, 0.06), transparent 70%),
    var(--glass);
}
.cxp-intel .ci-kpi-k {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wht-38);
}
.cxp-intel .ci-kpi-v {
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wht-92);
  font-variant-numeric: tabular-nums;
}
.cxp-intel .ci-kpi-v em {
  font-style: normal;
  font-size: 0.55em;
  font-weight: 600;
  color: var(--wht-55);
  margin-left: 2px;
}
.cxp-intel .ci-kpi-d {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.cxp-intel .ci-kpi-d.up { color: var(--up); }
.cxp-intel .ci-kpi-d.flat { color: var(--wht-38); }
.cxp-intel .ci-kpi-d.op { color: var(--dn); }

/* mid row */
.cxp-intel .ci-mid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 1px;
  background: var(--glass-line);
  border-bottom: 1px solid var(--glass-line);
}
.cxp-intel .ci-panel {
  background: var(--glass-2);
  padding: 20px 22px 18px;
}
.cxp-intel .ci-panel-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.cxp-intel .ci-panel-k {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wht-38);
}
.cxp-intel .ci-legend {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--wht-38);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cxp-intel .ci-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.cxp-intel .ci-legend i.up { background: var(--up); }
.cxp-intel .ci-legend i.dn { background: var(--dn); }

/* candles */
.cxp-intel .ci-candles {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  height: 148px;
  padding-bottom: 2px;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(90, 130, 194, 0.08) 0 1px,
      transparent 1px 36px
    );
}
.cxp-intel .ci-candle {
  position: relative;
  flex: 1;
  max-width: 18px;
  height: var(--h);
  /* --o is the "open" offset above the baseline. Use `bottom` (percentage
     of the plot HEIGHT) rather than margin-bottom — margin percentages
     resolve against container WIDTH, which launched candles over the KPI row. */
  bottom: var(--o);
  border-radius: 2.5px;
  transform-origin: bottom center;
}
.cxp-intel .ci-candle.up {
  background: linear-gradient(180deg, var(--up-lite), var(--up-deep));
  box-shadow: 0 0 14px -4px rgba(90, 130, 194, 0.4);
}
.cxp-intel .ci-candle.dn {
  background: linear-gradient(180deg, var(--dn-lite), #8f4550);
  box-shadow: 0 0 14px -4px rgba(184, 92, 104, 0.35);
}
/* wick */
.cxp-intel .ci-candle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  bottom: -8px;
  width: 1.5px;
  transform: translateX(-50%);
  background: currentColor;
  opacity: 0.5;
}
.cxp-intel .ci-candle.up::before { color: var(--up); }
.cxp-intel .ci-candle.dn::before { color: var(--dn); }
.cxp-intel .ci-candle {
  animation: ci-grow 0.4667s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i) * 45ms + 0.15s);
}
@keyframes ci-grow {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}
.cxp-intel .ci-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--wht-24);
}

/* sentiment strip + mix rows */
.cxp-intel .ci-strip {
  display: flex;
  gap: 3px;
  height: 14px;
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: 18px;
}
.cxp-intel .ci-seg {
  display: block;
  width: var(--w);
  border-radius: 3px;
}
.cxp-intel .ci-seg.happy { background: linear-gradient(90deg, var(--up), var(--up-lite)); }
.cxp-intel .ci-seg.neutral { background: rgba(11, 16, 32, 0.14); }
.cxp-intel .ci-seg.unhappy { background: linear-gradient(90deg, #8f4550, var(--dn)); }
.cxp-intel .ci-mixrows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.cxp-intel .ci-mixrows li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 14px;
  color: var(--wht-70);
}
.cxp-intel .ci-mixrows i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  align-self: center;
  flex: none;
}
.cxp-intel .ci-mixrows i.happy { background: var(--up); }
.cxp-intel .ci-mixrows i.neutral { background: rgba(11, 16, 32, 0.22); }
.cxp-intel .ci-mixrows i.unhappy { background: var(--dn); }
.cxp-intel .ci-mixrows b {
  margin-left: auto;
  font-weight: 700;
  color: var(--wht-92);
  font-variant-numeric: tabular-nums;
}
.cxp-intel .ci-mix-note {
  flex-basis: 100%;
  margin-left: 18px;
  font-size: 12px;
  color: var(--wht-38);
}
.cxp-intel .ci-mixrows li:last-child { flex-wrap: wrap; }

/* waveform panel */
.cxp-intel .ci-panel--wave {
  border-bottom: 1px solid var(--glass-line);
}
.cxp-intel .ci-optag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--dn);
  white-space: nowrap;
}
.cxp-intel .ci-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 72px;
  margin-bottom: 14px;
}
.cxp-intel .ci-wbar {
  flex: 1;
  height: var(--h);
  min-height: 4px;
  border-radius: var(--r-pill);
  background: rgba(90, 130, 194, 0.28);
}
.cxp-intel .ci-wbar.hot {
  background: linear-gradient(180deg, var(--dn-lite), var(--dn));
  box-shadow: 0 0 12px -3px rgba(184, 92, 104, 0.4);
}
.cxp-intel .ci-wbar {
  animation: ci-wavein 0.3333s ease-out both;
  animation-delay: calc(var(--i) * 12ms + 0.1s);
}
@keyframes ci-wavein {
  from { transform: scaleY(0.15); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}
.cxp-intel .ci-quote {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--wht-92);
  font-weight: 500;
  max-width: 70ch;
}
.cxp-intel .ci-quote span {
  color: var(--wht-38);
  font-weight: 400;
}

/* opportunity tape */
.cxp-intel .ci-oppty {
  padding: 20px 22px 8px;
}
.cxp-intel .ci-oppty-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wht-38);
  margin-bottom: 12px;
}
.cxp-intel .ci-oppty ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cxp-intel .ci-oppty li {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 13px 2px;
  border-top: 1px solid rgba(11, 16, 32, 0.07);
}
.cxp-intel .ci-op-sym {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--dn);
}
.cxp-intel .ci-op-meta {
  font-size: 13.5px;
  color: var(--wht-55);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cxp-intel .ci-op-chip {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--up-deep);
  border: 1px solid rgba(90, 130, 194, 0.32);
  background: var(--up-dim);
  border-radius: var(--r-pill);
  padding: 5px 13px;
  white-space: nowrap;
}
.cxp-intel .ci-oppty-note {
  margin: 14px 0 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--wht-55);
  max-width: 66ch;
}
.cxp-intel .ci-oppty-note i {
  color: var(--wht-92);
  font-style: italic;
}

.cxp-intel .ci-term-foot {
  padding: 12px 22px 14px;
  border-top: 1px solid rgba(11, 16, 32, 0.07);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--wht-24);
}

/* ============================================================
   THREE BEATS
   ============================================================ */
.cxp-intel .ci-beats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(30px, 4vw, 48px);
}
.cxp-intel .ci-beat {
  position: relative;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg, 18px);
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  padding: 26px 26px 28px;
  box-shadow: 0 20px 46px -40px rgba(30, 45, 80, 0.28);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s;
}
.cxp-intel .ci-beat:hover {
  transform: translateY(-3px);
  border-color: rgba(90, 130, 194, 0.4);
}
.cxp-intel .ci-beat-n {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--up);
}
.cxp-intel .ci-beat h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--wht-92);
  margin: 12px 0 10px;
}
.cxp-intel .ci-beat p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--wht-55);
  margin: 0;
}

/* ============================================================
   MISSED-CALL RECOVERY
   ============================================================ */
.cxp-intel .ci-missed {
  position: relative;
}
.cxp-intel .ci-missed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 22% 30%, rgba(184, 92, 104, 0.05), transparent 65%),
    radial-gradient(55% 60% at 82% 70%, rgba(90, 130, 194, 0.06), transparent 65%);
}
.cxp-intel .ci-missed-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* recovery flow */
.cxp-intel .ci-flow {
  list-style: none;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cxp-intel .ci-flow li {
  position: relative;
  padding: 0 0 26px 34px;
}
.cxp-intel .ci-flow li::before {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 20px;
  bottom: -2px;
  width: 1.5px;
  background: linear-gradient(180deg, rgba(90, 130, 194, 0.35), rgba(90, 130, 194, 0.06));
}
.cxp-intel .ci-flow li:last-child { padding-bottom: 0; }
.cxp-intel .ci-flow li:last-child::before { display: none; }
.cxp-intel .ci-flow li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  border: 2px solid var(--up);
  background: #ffffff;
  box-shadow: 0 0 0 4px var(--up-dim);
}
.cxp-intel .ci-flow li:first-child::after {
  border-color: var(--dn);
  box-shadow: 0 0 0 4px var(--dn-dim);
}
.cxp-intel .ci-flow-t {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--wht-38);
  display: block;
  margin-bottom: 3px;
}
.cxp-intel .ci-flow b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wht-92);
  margin-bottom: 4px;
}
.cxp-intel .ci-flow p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wht-55);
  max-width: 46ch;
}

/* hours panel */
.cxp-intel .ci-hours {
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg, 18px);
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  padding: 22px 24px 20px;
  box-shadow: 0 30px 70px -48px rgba(30, 45, 80, 0.22);
}
.cxp-intel .ci-hours-peak {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--dn);
}
.cxp-intel .ci-hours-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 168px;
}
.cxp-intel .ci-hour {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 8px;
}
.cxp-intel .ci-hbar {
  width: 100%;
  max-width: 34px;
  height: var(--h);
  border-radius: 6px 6px 2.5px 2.5px;
  background: linear-gradient(180deg, rgba(90, 130, 194, 0.55), rgba(90, 130, 194, 0.18));
  transform-origin: bottom center;
}
.cxp-intel .ci-hbar.peak {
  background: linear-gradient(180deg, var(--dn-lite), rgba(184, 92, 104, 0.3));
  box-shadow: 0 0 18px -6px rgba(184, 92, 104, 0.4);
}
.cxp-intel .ci-hbar {
  animation: ci-grow 0.4333s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i) * 55ms + 0.1s);
}
.cxp-intel .ci-hlab {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--wht-24);
}
.cxp-intel .ci-hours-note {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--wht-55);
}

/* ============================================================
   END CTA + SIBLINGS
   ============================================================ */
.cxp-intel .ci-end {
  position: relative;
  overflow: hidden;
}
.cxp-intel .ci-end::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -320px;
  width: 1000px;
  height: 560px;
  transform: translateX(-50%);
  z-index: -1;
  background:
    radial-gradient(48% 52% at 50% 55%, rgba(90, 130, 194, 0.1), transparent 70%),
    radial-gradient(64% 62% at 50% 70%, rgba(120, 140, 220, 0.12), transparent 72%);
  filter: blur(12px);
}
.cxp-intel .ci-end-inner {
  text-align: center;
  max-width: 760px;
}
.cxp-intel .ci-end-h {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--wht-92);
  margin: 16px 0 14px;
  text-wrap: balance;
}
.cxp-intel .ci-end-sub {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--wht-55);
  margin: 0 0 30px;
}
.cxp-intel .ci-sibs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 26px;
  flex-wrap: wrap;
  margin-top: clamp(44px, 6vw, 68px);
  padding-top: 26px;
  border-top: 1px solid rgba(11, 16, 32, 0.08);
}
.cxp-intel .ci-sibs-k {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wht-24);
}
.cxp-intel .ci-sibs a {
  font-size: 14px;
  font-weight: 600;
  color: var(--wht-70);
  transition: color 0.15s;
}
.cxp-intel .ci-sibs a:hover { color: var(--up); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px) {
  .cxp-intel .ci-kpis { grid-template-columns: repeat(2, 1fr); }
  .cxp-intel .ci-mid { grid-template-columns: 1fr; }
  .cxp-intel .ci-missed-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cxp-intel .ci-beats-grid { grid-template-columns: 1fr; }
  .cxp-intel .ci-term-feed { display: none; }
  .cxp-intel .ci-oppty li {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "sym chip"
      "meta meta";
    row-gap: 6px;
  }
  .cxp-intel .ci-op-sym { grid-area: sym; }
  .cxp-intel .ci-op-chip { grid-area: chip; }
  .cxp-intel .ci-op-meta {
    grid-area: meta;
    white-space: normal;
  }
  .cxp-intel .ci-wave { gap: 2px; }
}
@media (max-width: 520px) {
  .cxp-intel .ci-kpis { grid-template-columns: 1fr; }
  .cxp-intel .ci-candles { gap: 4px; }
  .cxp-intel .ci-hours-chart { gap: 5px; }
}

/* ============================================================
   PHONE FREEZE — no reduced-motion block exists in this file
   (the ticker is intentionally never gated behind prefers-reduced-motion
   per the client requirement noted above); on phones we still stop all
   motion and hide the decorative marquee so nothing drifts or scrolls
   sideways. The candle/wave/hour-bar "grow" keyframes only ever set an
   `opacity/transform` FROM-state — with no animation running they render
   at their un-animated (fully visible) base state, so no extra reveal
   rules are needed.
   ============================================================ */
@media (max-width: 700px) {
  .cxp-intel .ci-kpis { grid-template-columns: 1fr; }
  .cxp-intel *,
  .cxp-intel *::before,
  .cxp-intel *::after {
    animation: none !important;
    transition: none !important;
  }
  /* the scrolling market tape is a pure decorative marquee — hide rather
     than freeze mid-scroll */
  .cxp-intel .ci-tape { display: none; }
}