/* Scoped variables and styles for the hero-graphic component */
.abaci-hero-graphic {
  --abaci-hero-green: #007a4d;
  --abaci-hero-green-soft: rgba(0, 122, 77, 0.22);
  --abaci-hero-grey: rgba(25, 35, 32, 0.12);

  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(0, 122, 77, 0.035), transparent 42%),
    var(--dark-bg, #ffffff);
  font-family: Inter, Arial, sans-serif;
}

.abaci-hero-graphic canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Shrink the hero on smaller screens to reduce visual clutter */
@media (max-width: 480px) {
  .abaci-hero-graphic { height: 260px; }
}

@media (max-width: 360px) {
  .abaci-hero-graphic { height: 200px; }
  /* on very small devices, hide the canvas to avoid overload */
  .abaci-hero-graphic canvas { display: none; }
}
/* text overlay removed — this widget intentionally shows only the graphic */

/* When used as a hero background inside the page hero section */
.section-shell.page-hero {
  position: relative;
  overflow: hidden;
}
.section-shell.page-hero .abaci-hero-graphic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.section-shell.page-hero .section-shell__content {
  position: relative;
  z-index: 1;
}