/* ─────────────────────────────────────────────────────────
   POGO — Hero Cinema
   Cinematic scroll-dive + video-feel hero animations.
   Layers on top of existing .hero and .sol-hero without
   breaking original markup.
   ───────────────────────────────────────────────────────── */

/* Re-trigger entry animations after we wrap the hero.
   When we move the hero node into .hc-sticky the `animation: up 0.7s both`
   that would normally play on first paint can get skipped. Kill the
   animation entirely and force the end state. */
.hc-dive .hero-badge,
.hc-dive .hero-h1,
.hc-dive .hero-sub,
.hc-dive .hero-actions,
.hc-dive .hero-stats,
.hc-dive .hero-float,
.hc-dive .preview-wrap,
.hc-dive .sol-hero-inner .sol-eyebrow,
.hc-dive .sol-hero-inner .sol-h1,
.hc-dive .sol-hero-inner .sol-sub,
.hc-dive .sol-hero-inner .sol-actions,
.hc-dive .sol-visual {
  animation: none !important;
  opacity: 1 !important;
  transform: none;
}

/* Scroll-dive container: the hero becomes sticky inside a
   taller scroll track so scroll progress drives animation. */
.hc-dive {
  position: relative;
  /* 260vh gives ~160vh of "dive" scroll — more room for the
     choreography to breathe before the hero releases. */
  height: 260vh;
}
.hc-dive[data-hero-kind="home"] { height: 280vh; }
.hc-dive > .hc-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.hc-dive > .hc-sticky > .hero,
.hc-dive > .hc-sticky > .sol-hero {
  min-height: 100vh;
  width: 100%;
  /* Progressive transforms driven by JS via --hc-p (0→1). */
  transform-origin: 50% 35%;
  will-change: transform, opacity, filter;
}

/* Choreography driven by --hc-p (progress 0..1).
   We can't do this purely with CSS vars + transform on the
   same element inside a calc(), so JS sets the transform.
   Layer-specific vars are still useful for children. */

/* ── Cinematic layers inside the hero ── */
.hc-layer {
  position: absolute; inset: 0; pointer-events: none;
  will-change: transform, opacity;
}

/* Aurora beams behind the hero (ambient motion) */
.hc-aurora {
  position: absolute; inset: -10% -10% auto -10%; height: 90%;
  pointer-events: none; z-index: 0; overflow: hidden;
  opacity: 0.75; mix-blend-mode: multiply;
  filter: blur(40px);
}
.hc-aurora::before,
.hc-aurora::after {
  content: ''; position: absolute;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  opacity: 0.45;
  animation: hcAuroraDrift 24s ease-in-out infinite alternate;
}
.hc-aurora::before {
  left: -10vw; top: -15vw;
  background: radial-gradient(circle, rgba(13,158,122,0.45), transparent 65%);
}
.hc-aurora::after {
  right: -10vw; top: -5vw; animation-delay: -8s;
  background: radial-gradient(circle, rgba(232,116,42,0.35), transparent 65%);
}
@keyframes hcAuroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(6vw, 3vw, 0) scale(1.12); }
  100% { transform: translate3d(-4vw, -2vw, 0) scale(0.95); }
}

/* A subtle third accent for solution pages */
.hc-aurora.hc-aurora-accent::after {
  background: radial-gradient(circle, var(--hc-accent, rgba(59,130,246,0.3)), transparent 65%);
}

/* Particle field — drifting data dots */
.hc-particles {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  overflow: hidden;
}
.hc-particle {
  position: absolute;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hc-dot, rgba(13,158,122,0.55));
  filter: blur(0.3px);
  animation: hcFloat var(--hc-dur, 14s) ease-in-out infinite;
  animation-delay: var(--hc-delay, 0s);
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes hcFloat {
  0%   { transform: translate3d(0, 20vh, 0) scale(0.8);  opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translate3d(var(--hc-dx, 4vw), -10vh, 0) scale(1); opacity: 0.7; }
  90%  { opacity: 0.9; }
  100% { transform: translate3d(var(--hc-dx2, -3vw), -50vh, 0) scale(1.1); opacity: 0; }
}

/* Data grid lines pulse (homepage) */
.hc-gridpulse {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(13,158,122,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,158,122,0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 50% at 50% 40%, black 0%, transparent 80%);
  animation: hcGridPulse 6s ease-in-out infinite;
}
@keyframes hcGridPulse {
  0%, 100% { opacity: 0.55; background-size: 48px 48px; }
  50% { opacity: 0.9; background-size: 52px 52px; }
}

/* Orbit rings — data orbiting teaching-at-heart (homepage) */
.hc-orbit-stage {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  display: flex; align-items: center; justify-content: center;
}
.hc-orbit {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%; border: 1px dashed rgba(13,158,122,0.22);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: hcOrbit var(--hc-orbit-dur, 40s) linear infinite;
}
.hc-orbit.o1 { width: 440px; height: 440px; }
.hc-orbit.o2 { width: 680px; height: 680px; --hc-orbit-dur: 80s; animation-direction: reverse; border-color: rgba(232,116,42,0.18); }
.hc-orbit.o3 { width: 920px; height: 920px; --hc-orbit-dur: 120s; border-color: rgba(13,158,122,0.12); }
@keyframes hcOrbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.hc-orbit-satellite {
  position: absolute; top: -6px; left: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--hc-sat, var(--teal, #0d9e7a));
  transform: translateX(-50%);
  box-shadow: 0 0 20px currentColor;
}
.hc-orbit.o2 .hc-orbit-satellite { background: var(--orange, #e8742a); }
.hc-orbit.o3 .hc-orbit-satellite { background: #3a9e50; }

/* Scroll hint at bottom of hero */
.hc-scroll-hint {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-b, sans-serif); font-size: 11px; font-weight: 600;
  color: rgba(13,26,21,0.45); letter-spacing: 0.15em; text-transform: uppercase;
  z-index: 5; pointer-events: none;
  animation: hcHintPulse 2.4s ease-in-out infinite;
}
.hc-scroll-hint .hc-chev {
  width: 18px; height: 18px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
@keyframes hcHintPulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, 0); }
  50%      { opacity: 1;    transform: translate(-50%, 6px); }
}

/* When the hero has dived far enough, fade the hint out via JS. */
.hc-dive[data-p-deep="1"] .hc-scroll-hint { opacity: 0 !important; }

/* ── Video-feel loop elements on floating cards ── */

/* Typing cursor */
.hc-typing::after {
  content: '|';
  color: var(--teal, #0d9e7a);
  animation: hcBlink 1s steps(1) infinite;
  margin-left: 1px;
}
@keyframes hcBlink { 50% { opacity: 0; } }

/* Continuous shimmer on bars — makes charts feel live */
.hc-live-shine {
  position: relative; overflow: hidden;
}
.hc-live-shine::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: hcShine 3s ease-in-out infinite;
  animation-delay: var(--hc-shine-delay, 0s);
}
@keyframes hcShine {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Data-rain lines streaming down behind hero */
.hc-rain {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1;
  opacity: 0.5;
}
.hc-rain span {
  position: absolute; top: -20%;
  width: 1px; height: 120px;
  background: linear-gradient(180deg, transparent, var(--teal, #0d9e7a), transparent);
  animation: hcRain var(--hc-rain-dur, 8s) linear infinite;
  animation-delay: var(--hc-rain-delay, 0s);
  opacity: 0.5;
}
@keyframes hcRain {
  0%   { transform: translateY(-20%); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(150vh); opacity: 0; }
}

/* Incoming-data pulse on floating hero cards (already exist) */
.hero-float { transition: transform 0.15s ease; }
.hero-float::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(13,158,122, 0);
  animation: hcCardPulse 4s ease-in-out infinite;
  animation-delay: var(--hc-pulse-delay, 0s);
}
.hf-governors { --hc-pulse-delay: 0s; }
.hf-mats      { --hc-pulse-delay: 1s; }
.hf-send      { --hc-pulse-delay: 2s; }
.hf-eal       { --hc-pulse-delay: 3s; }
@keyframes hcCardPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13,158,122, 0); }
  20%      { box-shadow: 0 0 0 3px rgba(13,158,122, 0.18); }
  40%      { box-shadow: 0 0 0 10px rgba(13,158,122, 0); }
}
.hf-mats::before { box-shadow: 0 0 0 2px rgba(232,116,42, 0); animation-name: hcCardPulseOrange; }
@keyframes hcCardPulseOrange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,116,42, 0); }
  20%      { box-shadow: 0 0 0 3px rgba(232,116,42, 0.18); }
  40%      { box-shadow: 0 0 0 10px rgba(232,116,42, 0); }
}

/* Preview frame — depth dive.
   JS sets transform directly but we style the wrapper to keep
   perspective so rotateX looks right on very wide screens. */
.hero .preview-wrap { perspective: 1400px; }
.hero .preview-frame { transform-style: preserve-3d; }

/* Preview gets a continuous "breathing" glow */
.hero .preview-frame::before {
  content: ''; position: absolute; inset: -12px;
  border-radius: 28px; z-index: -1;
  background: radial-gradient(ellipse at 50% 60%, rgba(13,158,122,0.35), transparent 60%);
  filter: blur(28px);
  animation: hcBreathe 5s ease-in-out infinite;
}
@keyframes hcBreathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* Solution hero specifics */
.sol-hero { position: relative; }
.sol-hero .hc-layer { z-index: 0; }
.sol-hero .sol-hero-inner { position: relative; z-index: 2; }

/* Solution visual frame lift */
.sol-visual { position: relative; }
.sol-visual::before {
  content: ''; position: absolute; inset: -14px;
  border-radius: 24px; z-index: -1;
  background: radial-gradient(ellipse at 60% 60%, var(--hc-glow, rgba(13,158,122,0.35)), transparent 65%);
  filter: blur(30px);
  animation: hcBreathe 5s ease-in-out infinite;
}

/* Tweaks panel */
.hc-tweaks {
  position: fixed; right: 18px; bottom: 18px; z-index: 9000;
  width: 260px; background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(13,26,21,0.12);
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 18px 50px rgba(13,26,21,0.15), 0 2px 8px rgba(13,26,21,0.06);
  font-family: var(--font-b, sans-serif);
  color: var(--ink, #0d1a15);
  display: none;
}
.hc-tweaks.open { display: block; }
.hc-tweaks h4 {
  font-family: var(--font-d, sans-serif);
  font-weight: 800; font-size: 13px; letter-spacing: -0.01em;
  margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;
}
.hc-tweaks h4 button {
  background: none; border: none; cursor: pointer;
  color: rgba(13,26,21,0.4); font-size: 16px; line-height: 1; padding: 0;
}
.hc-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.hc-row > span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(13,26,21,0.5);
}
.hc-seg {
  display: flex; background: rgba(13,26,21,0.05);
  border-radius: 8px; padding: 2px; gap: 2px;
}
.hc-seg button {
  flex: 1; border: none; background: transparent;
  font-family: inherit; font-size: 11px; font-weight: 600;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  color: rgba(13,26,21,0.6); transition: all 0.15s;
}
.hc-seg button.on {
  background: #fff; color: var(--ink, #0d1a15);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.hc-slider {
  width: 100%;
  appearance: none; -webkit-appearance: none;
  height: 4px; background: rgba(13,26,21,0.08); border-radius: 4px; outline: none;
}
.hc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--teal, #0d9e7a); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.hc-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--teal, #0d9e7a); cursor: pointer; border: none;
}

/* Intensity multiplies motion via root var (JS sets --hc-k). */
.hc-intensity-0 .hc-aurora,
.hc-intensity-0 .hc-particles,
.hc-intensity-0 .hc-rain,
.hc-intensity-0 .hc-orbit-stage,
.hc-intensity-0 .hc-gridpulse { display: none; }

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce) {
  .hc-aurora, .hc-orbit, .hc-particle, .hc-rain span,
  .hero-float::before, .hc-live-shine::after,
  .hc-gridpulse, .hc-scroll-hint {
    animation: none !important;
  }
}

/* Mobile: simplify — kill the sticky dive (scroll feels bad on touch) */
@media (max-width: 860px) {
  .hc-dive { height: auto; }
  .hc-dive > .hc-sticky {
    position: static; height: auto; overflow: visible;
  }
  .hc-orbit.o2, .hc-orbit.o3 { display: none; }
  .hc-rain, .hc-particles { opacity: 0.4; }
}

/* ─────────────────────────────────────────────────────────
   GUIDED PREVIEW TOUR (homepage POGO interface)
   A virtual cursor navigates the UI as the user scrolls.
   The preview frame is pinned in a sticky track; progress
   drives cursor position, hovers, clicks and state swaps.
   ───────────────────────────────────────────────────────── */

/* Hero-inner scroll-dive (homepage) — give the hero a perspective so
   the scale + translate applied by JS reads as a depth dive. */
#page-home .hero { perspective: 1400px; }
#page-home .hero-inner {
  /* Kill the original entry animation so JS transforms aren't fighting it. */
  transform-style: preserve-3d;
}

/* Preview-wrap sits in its natural hero position — no sticky pin.
   The tour cursor animates based on how much of the preview has
   entered the viewport, so there's zero dead scroll space below
   the UI and it sits flush against the "Trusted by" bar. */
.hc-tour-track {
  position: relative;
  /* Breathing room: clear separation between the KPI stats row
     above and a smaller gap to the "Trusted by" bar below. */
  margin-top: 96px;
  margin-bottom: 48px;
}
.hc-tour-pin {
  /* Not sticky — behaves as a plain flex container so the preview
     sits naturally, tightly above the next section. */
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}
.hc-tour-pin > .preview-wrap {
  pointer-events: auto;
  position: relative;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* On mobile, don't pin — let it flow naturally */
@media (max-width: 860px) {
  .hc-tour-track { height: auto; }
  .hc-tour-pin { position: static; height: auto; display: block; }
  .hc-cursor, .hc-tooltip, .hc-fake-dropdown { display: none !important; }
}

/* Virtual cursor */
.hc-cursor {
  position: absolute; top: 0; left: 0;
  width: 22px; height: 22px;
  pointer-events: none;
  z-index: 50;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
  transition: opacity 0.3s ease;
  will-change: transform;
}
.hc-cursor svg { display: block; }

/* Click ripple — animated on .click class */
.hc-cursor-ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid var(--teal, #0d9e7a);
  background: rgba(13,158,122,0.2);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.hc-cursor.click .hc-cursor-ripple {
  animation: hcCursorClick 0.6s ease-out 1;
}
@keyframes hcCursorClick {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(4);   opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(5);   opacity: 0; }
}

/* Tooltip — shown over hovered chart bar / strand */
.hc-tooltip {
  position: absolute;
  z-index: 49;
  background: #0d1a15;
  color: #fff;
  font-family: var(--font-b, sans-serif);
  font-size: 11px;
  padding: 7px 10px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -4px) scale(0.92);
  transform-origin: 50% 100%;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 6px 20px rgba(13,26,21,0.25);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 80px;
  line-height: 1.3;
}
.hc-tooltip.on {
  opacity: 1;
  transform: translate(-50%, -10px) scale(1);
}
.hc-tooltip::after {
  content: '';
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #0d1a15;
}
.hc-tt-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
}
.hc-tt-val {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

/* Fake dropdown that opens off the Filter button */
.hc-fake-dropdown {
  position: absolute;
  z-index: 48;
  background: #fff;
  border: 1px solid rgba(13,26,21,0.1);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(13,26,21,0.18), 0 2px 6px rgba(13,26,21,0.06);
  font-family: var(--font-b, sans-serif);
  font-size: 12px;
  min-width: 160px;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transform-origin: 50% 0%;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.hc-fake-dropdown.on {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.hc-dd-item {
  padding: 7px 10px;
  border-radius: 6px;
  color: rgba(13,26,21,0.8);
  cursor: default;
  transition: background 0.12s ease;
}
.hc-dd-item.active {
  color: var(--teal, #0d9e7a);
  font-weight: 600;
}
.hc-dd-item.hc-hover {
  background: rgba(13,158,122,0.08);
  color: var(--teal, #0d9e7a);
}
.hc-dd-divider {
  height: 1px; background: rgba(13,26,21,0.08);
  margin: 4px 6px;
}

/* Sidebar item hover/press states (applied by tour) */
.pf-sb-item.hc-hover {
  background: rgba(255,255,255,0.06);
  cursor: pointer;
}
.pf-sb-item.hc-press {
  background: rgba(255,255,255,0.12);
  transform: scale(0.985);
  transition: transform 0.1s ease;
}

/* Chart bar hover state */
.pf-bar-group.hc-hover .pf-bar-pair {
  transform: translateY(-3px);
  transition: transform 0.2s ease;
}
.pf-bar-group.hc-hover .pf-bar-lbl {
  color: var(--teal, #0d9e7a);
  font-weight: 700;
  transition: color 0.2s ease;
}

/* Strand row hover */
.pf-strand-row.hc-hover {
  background: rgba(13,158,122,0.05);
  transition: background 0.2s ease;
  border-radius: 6px;
}

/* Topbar button press */
.pf-tb-btn.hc-hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.pf-tb-btn.hc-press {
  transform: translateY(0) scale(0.97);
  filter: brightness(0.95);
  transition: transform 0.1s ease;
}

/* ─────────────────────────────────────────────────────────
   MAT Dashboard tour — cursor-driven hover/press states
   ───────────────────────────────────────────────────────── */

/* Filter chips */
.mdp-filter { transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; }
.mdp-filter.hc-hover {
  background: rgba(13,158,122,0.08);
  color: var(--teal, #0d9e7a);
  border-color: rgba(13,158,122,0.35);
  box-shadow: 0 2px 10px rgba(13,158,122,0.12);
  transform: translateY(-1px);
}
.mdp-filter.hc-press {
  transform: translateY(0) scale(0.97);
  background: rgba(13,158,122,0.14);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.mdp-filter.refresh.hc-spin { color: var(--teal, #0d9e7a); }
.mdp-filter.refresh.hc-spin::first-letter,
.mdp-filter.refresh.hc-spin { animation: hcSpin 0.8s linear infinite; }
.mdp-filter.refresh.hc-press,
.mdp-filter.refresh.hc-spin { transform-origin: center; }
@keyframes hcSpin { to { transform: rotate(360deg); } }

/* Tabs */
.mdp-tab { transition: background 0.2s ease, color 0.2s ease; }
.mdp-tab.hc-hover {
  background: rgba(13,158,122,0.08);
  color: var(--teal, #0d9e7a);
}

/* KPI cards */
.mdp-kpi { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.mdp-kpi.hc-hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 14px 30px rgba(15,26,21,0.12);
  border-color: var(--kpi-color, rgba(13,158,122,0.45));
  z-index: 2;
}

/* Map pins — enlarge + pulse when hovered */
.mdp-map-pin { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.mdp-map-pin.hc-hover {
  transform: scale(1.6);
  box-shadow: 0 0 0 6px rgba(13,158,122,0.18), 0 6px 16px rgba(13,158,122,0.4);
  z-index: 3;
}

/* Donut */
.mdp-donut { transition: transform 0.3s ease, filter 0.3s ease; }
.mdp-donut.hc-hover {
  transform: scale(1.04);
  filter: drop-shadow(0 6px 20px rgba(13,158,122,0.25));
}

/* Table rows — highlight the entire row.
   The grid is 8-col; when .school gets .hc-hover, we shade it strongly
   and also reach forward to shade its 7 siblings via adjacent selectors.
   (CSS can select next-siblings but not "next 7" nicely, so we use
   a data attribute on the grid and restyle via a row-highlight class
   applied by JS to the grid itself.) */
.mdp-grid .school.hc-hover,
.mdp-grid .school.hc-hover + div,
.mdp-grid .school.hc-hover + div + div,
.mdp-grid .school.hc-hover + div + div + div,
.mdp-grid .school.hc-hover + div + div + div + div,
.mdp-grid .school.hc-hover + div + div + div + div + div,
.mdp-grid .school.hc-hover + div + div + div + div + div + div,
.mdp-grid .school.hc-hover + div + div + div + div + div + div + div {
  background: rgba(13,158,122,0.07);
  transition: background 0.2s ease;
}
.mdp-grid .school.hc-hover { color: var(--teal-dark, #0a7a5d); font-weight: 700; }

/* Hide cursor + tooltip on mobile for the MAT tour */
@media (max-width: 860px) {
  #mdp-dash-frame .hc-cursor,
  #mdp-dash-frame .hc-tooltip { display: none !important; }
}