.dashboard-hero {
  position: relative;
  width: 100%;
  border-radius: 6px;
}

.dashboard-hero__img {
  display: block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid #ddd8cf;
  box-shadow: 0 2px 8px rgba(26,39,68,0.07), 0 12px 40px rgba(26,39,68,0.13);
  transition: box-shadow 0.3s ease;
}

.dashboard-hero:hover .dashboard-hero__img {
  box-shadow: 0 2px 8px rgba(26,39,68,0.07), 0 12px 40px rgba(26,39,68,0.16), 0 0 0 2px #2eaadc;
}

.dashboard-hero__hotspots {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 6px;
}

/* Column hotspot zones */
.hs {
  position: absolute;
  top: 0;
  bottom: 0;
  cursor: crosshair;
  z-index: 10;
}

/* right edge of total was perfect (34.5%); left trimmed back 1% */
.hs--total       { left: 27.5%; width: 7%; }
/* right trimmed 0.5%, left trimmed tiny */
.hs--rules       { left: 34.5%; width: 6%; }
/* right trimmed 0.5% */
.hs--guidance    { left: 41%;   width: 5.5%; }
/* right trimmed 0.5% */
.hs--definitions { left: 47%;   width: 5.5%; }
/* right trimmed 0.5% */
.hs--context     { left: 52.5%; width: 6%; }
/* left -2px, right extended to 86% */
.hs--bar         { left: 59%;   width: 27%; }
/* shifted whole length (7%) + 10px right */
.hs--crossrefs   { left: 85%;   width: 7%; }
/* shifted right a fair bit + trim from left, left nudged back slightly */
.hs--coverage    { left: 92%;   width: 8%; }

/* Highlight strip on the column header row when hovering.
   Moved up 2% and made 1% taller per user feedback. */
.hs::before {
  content: '';
  position: absolute;
  top: 21%; left: 0; right: 0;
  height: 7.5%;
  background: rgba(46,170,220,0);
  border-radius: 2px;
  transition: background 0.2s ease;
}
.hs:hover::before { background: rgba(46,170,220,0.2); }

/* Tooltip card — sits in the data rows area below the column headers */
.hs__tip {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 220px;
  background: #1a2744;
  border-radius: 5px;
  padding: 12px 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease 0.08s, transform 0.15s ease 0.08s;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.hs:hover .hs__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Right-anchor the two rightmost tooltips to prevent overflow */
.hs--crossrefs .hs__tip,
.hs--coverage .hs__tip {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(8px);
}
.hs--crossrefs:hover .hs__tip,
.hs--coverage:hover .hs__tip {
  transform: translateX(0) translateY(0);
}

/* Tooltip arrow */
.hs__tip::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #1a2744;
}
.hs--crossrefs .hs__tip::before,
.hs--coverage .hs__tip::before {
  left: auto;
  right: 16px;
  transform: none;
}

.hs__tip-label {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2eaadc;
  margin-bottom: 5px;
}

.hs__tip-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
}

/* Caption below the image */
.hero__visual-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.9rem;
}
.caption-hint {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.74rem;
  color: #2eaadc;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.caption-stats {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.72rem;
  color: #7a8aa0;
  letter-spacing: 0.03em;
}

/* Mobile — no hotspots, just the image */
@media (max-width: 900px) {
  .dashboard-hero__hotspots { display: none; }
  .caption-hint { display: none; }
}