.ael-stats-block{padding:28px;border-radius:14px}
.ael-stats-heading{margin-bottom:18px}
.ael-stats-heading h3{margin:0 0 6px;font-size:clamp(20px,3vw,28px)}
.ael-stats-sub{margin:0;opacity:.8}
.ael-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
@media (max-width:782px){.ael-stats-grid{grid-template-columns:1fr}}
.ael-stat{display:grid;gap:8px}
.ael-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;opacity:.85}
.ael-value{font-weight:700}
.ael-track{position:relative;height:10px;background:rgba(17,24,39,.08);border-radius:999px;overflow:hidden}
.ael-bar{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;transition:width 1.4s cubic-bezier(.22,.61,.36,1)}
.ael-bar.violet{background:linear-gradient(90deg,#6d28d9,#8b5cf6)}
.ael-bar.green{background:linear-gradient(90deg,#16a34a,#22c55e)}
.ael-bar.cyan{background:linear-gradient(90deg,#0891b2,#06b6d4)}
.ael-bar.amber{background:linear-gradient(90deg,#d97706,#f59e0b)}

/* === Stats: pill style (matches screenshot) =============================== */
.ael-stats-block { padding: 8px 0; }
.ael-stats-block .ael-stats-grid { display: grid; gap: 22px; }

/* Each stat row */
.ael-stats-block .ael-stat { position: relative; }

/* Label sits inside the pill on the left */
.ael-stats-block .ael-label {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: .1px;
}

/* Hide the old value on the right; the badge shows the % instead */
.ael-stats-block .ael-value { display: none; }

/* Track — soft lilac background with full rounding */
.ael-stats-block .ael-track {
  position: relative;
  height: 44px;                 /* pill height */
  background: #e9d5ff;          /* lilac */
  border-radius: 9999px;
  overflow: hidden;
}

/* Filled bar — deep purple to magenta gradient with rounded end */
.ael-stats-block .ael-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;                      /* JS sets width% on view */
  height: 100%;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  transition: width 1.4s cubic-bezier(.22,.61,.36,1);
  background: linear-gradient(90deg, #21002c 0%, #8b00ff 60%, #cf2cff 100%);
}

/* Optional color variants, if you use them */
.ael-stats-block .ael-bar.violet { background: linear-gradient(90deg, #21002c, #8b00ff 60%, #cf2cff); }
.ael-stats-block .ael-bar.green  { background: linear-gradient(90deg, #022c22, #10b981 60%, #34d399); }
.ael-stats-block .ael-bar.cyan   { background: linear-gradient(90deg, #022b36, #06b6d4 60%, #22d3ee); }
.ael-stats-block .ael-bar.amber  { background: linear-gradient(90deg, #2b1a00, #f59e0b 60%, #fbbf24); }

/* % badge at the end of the bar */
.ael-stats-block .ael-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 9999px;
  color: #ffffff;
  font-weight: 700;
  line-height: 1;
  background: rgba(255, 255, 255, 0.20); /* translucent bubble over gradient */
  /* small, soft highlight like the screenshot */
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.0); /* reserved; set >0 for stronger ring */
}

/* Responsive: keep the pill single-column on small screens */
@media (max-width: 782px) {
  .ael-stats-block .ael-stats-grid { grid-template-columns: 1fr; }
}