.astra-article .efficiency-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; align-items: start; }
.astra-article .efficiency-figures > .cost-success { min-width: 0; margin: 0; }
.astra-article .efficiency-figures > .cost-success:only-of-type { grid-column: 1 / -1; width: calc((100% - 16px) * .75); justify-self: center; --chart-height-ratio: .4444444444; }
.astra-article .efficiency-figures .cost-success-header { box-sizing: border-box; min-height: 80px; align-content: start; }
@media (max-width: 700px) {
  .astra-article .efficiency-figures { grid-template-columns: minmax(0, 1fr); }
  .astra-article .efficiency-figures > .cost-success:only-of-type { width: 100%; --chart-height-ratio: .6666666667; }
}
.astra-article .cost-success {
  --orchestrated-color: #c9534b;
  --agentic-color: #3978b7;
  --reference-color: #969b94;
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white, #fff);
}
.astra-article .cost-success-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; padding: 12px 18px 4px; }
.astra-article .cost-success-heading {
  padding: 0;
  color: var(--ink);
  font: 500 12px/1.4 var(--font);
  text-transform: uppercase;
  letter-spacing: .09em;
}
.astra-article .cost-success-key { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; gap: 6px 16px; padding: 0; font: 11px/1.4 var(--font); color: var(--muted); }
.astra-article .cost-success-key span { display: inline-flex; align-items: center; gap: 6px; }
.astra-article .cost-success-key i { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; }
.astra-article .cost-key-action { background: var(--green); border-radius: 50%; }
.astra-article .cost-key-orchestrated { background: var(--orchestrated-color); }
.astra-article .cost-key-agentic { background: var(--agentic-color); transform: rotate(45deg); }
.astra-article .cost-key-learned { background: var(--reference-color); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.astra-article .cost-success .efficiency-panel { min-width: 0; margin: 0; padding: 0; border: 0; }
.astra-article .cost-success-plot { width: 100%; overflow: hidden; }
.astra-article .cost-success-plot svg { display: block; width: 100%; max-width: none; font-family: var(--font); }
.astra-article .cost-success-grid { stroke: var(--line); stroke-width: .6; }
.astra-article .cost-success-grid-vertical { stroke-dasharray: 2 5; opacity: .65; }
.astra-article [data-metric="latency"] .cost-success-grid-vertical { stroke: #bdc4b7; stroke-width: 1; stroke-dasharray: none; opacity: 1; }
.astra-article .cost-success-grid-minor { stroke: var(--line); stroke-width: .6; opacity: .7; }
.astra-article .cost-success-axis { stroke: var(--muted); stroke-width: .8; }
.astra-article .cost-success-tick,
.astra-article .cost-success-axis-title { fill: var(--muted); font: var(--chart-axis-font); }
.astra-article .cost-success-label { fill: var(--ink); font: 500 10px var(--font); }
.astra-article .cost-success-value { fill: var(--muted); font: 9px 'Astra Chart Numerals', var(--font); }
.astra-article .cost-success-label,
.astra-article .cost-success-value { paint-order: stroke; stroke: white; stroke-width: 3px; stroke-linejoin: round; }
.astra-article .cost-success-point { --policy-color: var(--reference-color); outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.astra-article .cost-success-point[data-group="action"] { --policy-color: var(--green); }
.astra-article .cost-success-point[data-group="orchestrated"] { --policy-color: var(--orchestrated-color); }
.astra-article .cost-success-point[data-group="agentic"] { --policy-color: var(--agentic-color); }
.astra-article .cost-success .cost-success-point:focus-visible { outline: none; }
.astra-article .cost-success-dot { fill: var(--policy-color); stroke: white; stroke-width: 2; }
.astra-article .cost-success-ring { fill: none; stroke: var(--policy-color); stroke-width: 1; opacity: 0; }
.astra-article .cost-success-point:hover .cost-success-ring,
.astra-article .cost-success-point:focus-visible .cost-success-ring,
.astra-article .cost-success-point[aria-pressed="true"] .cost-success-ring { opacity: 1; }
.astra-article .cost-success figcaption { margin: 0; padding: 10px 18px; border-top: 1px solid var(--line); background: #fafbf8; font-size: 12px; line-height: 1.6; color: var(--muted); }
.astra-article.figure-standalone .cost-success { width: min(100%, 520px); margin: 0 auto; }

/* Token-cost comparison: direct labels and a compact plot, scoped to Figure 24. */
.astra-article .efficiency-figures > #cost-success:only-of-type { width: min(100%, 660px); }
.astra-article #cost-success .cost-success-header { min-height: 0; padding: 14px 18px 0; }
.astra-article #cost-success .cost-success-label { font: 400 11px/1.4 var(--font); fill: #000; }
.astra-article #cost-success .cost-success-value { font: 400 9px/1.4 var(--font); fill: var(--faint); font-variant-numeric: tabular-nums; }
.astra-article #cost-success .cost-success-tick,
.astra-article #cost-success .cost-success-axis-title { fill: var(--faint); }
.astra-article.figure-standalone #cost-success { width: min(100%, 660px); }
@media (max-width: 700px) {
  .astra-article #cost-success > figcaption { flex-wrap: wrap; }
  .astra-article #cost-success > figcaption > span { flex-basis: 100%; }
  .astra-article #cost-success > figcaption > .full-results-trigger { margin-left: 0; }
}

.astra-article #cost-success .cost-success-label-leader { stroke: var(--muted); stroke-width: .7; }

.astra-article #cost-success .cost-success-point { cursor: default; }