/* The compounding: cost to serve one subscriber against subscriber count.
   Scoped per CLAUDE.md. Square corners, per --radius: 0. */

[data-slide="scale"] .sc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.5rem;
}
[data-slide="scale"] .sc-title { font-size: 0.86rem; color: var(--fg-muted); }
/* The unit, carried out of the sentence around it. Everything else on this chart
   counts total users, so "one Pro subscriber" is the word that stops the axis
   and the bars being read as the same population. */
[data-slide="scale"] .sc-title strong { font-weight: 600; color: var(--fg); }
[data-slide="scale"] .sc-delta {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.9rem; font-weight: 500; color: var(--accent); white-space: nowrap;
  text-align: right;
}
/* Names the unit, because two euro figures beside a per-subscriber chart title
   would otherwise read as per-subscriber. */
[data-slide="scale"] .sc-delta i {
  display: block; font-style: normal; font-weight: 400;
  font-size: 0.64rem; color: var(--fg-muted);
}

[data-slide="scale"] .sc-bars {
  display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 0 2px;
}
[data-slide="scale"] .sc-col {
  flex: 1; height: 100%; display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-end;
}
[data-slide="scale"] .sc-val {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.66rem; color: var(--fg-muted); text-align: center;
  margin-bottom: 0.2rem; white-space: nowrap;
}
[data-slide="scale"] .sc-bar.cost {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  border-radius: var(--radius); position: relative; overflow: hidden;
}
/* The payment-processing floor, drawn inside each bar. Everything above the
   line is what scale removes; the line itself is what it cannot. */
[data-slide="scale"] .sc-floor {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--fg-muted); opacity: 0.45;
}

[data-slide="scale"] .sc-axis {
  display: flex; gap: 6px; padding: 0 2px; margin-top: 0.35rem;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.7rem; color: var(--fg);
}
[data-slide="scale"] .sc-axis span { flex: 1; text-align: center; }
[data-slide="scale"] .sc-axis.sub { margin-top: 0.05rem; font-size: 0.64rem; color: var(--fg-muted); }
/* The monthly bill at each step. Accent-tinted so it reads as money rather than
   as a third population count. */
[data-slide="scale"] .sc-axis.total { margin-top: 0.2rem; font-size: 0.68rem; color: var(--accent); }
[data-slide="scale"] .sc-axis-label {
  text-align: center; margin-top: 0.3rem;
  font-size: 0.68rem; color: var(--fg-muted);
}

[data-slide="scale"] .scale-summary {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem; margin-top: 1.1rem;
}
[data-slide="scale"] .scale-summary .stat-tile {
  background: var(--surface); padding: 0.7rem 0.85rem; border-radius: var(--radius);
}
[data-slide="scale"] .scale-summary .num {
  display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.2rem; font-weight: 500; color: var(--accent);
}
[data-slide="scale"] .scale-summary .lbl {
  display: block; margin-top: 0.15rem; font-size: 0.74rem; color: var(--fg);
}
[data-slide="scale"] .scale-summary .lbl small {
  display: block; font-size: 0.66rem; color: var(--fg-muted);
}

[data-slide="scale"] .note-line { display: block; }
[data-slide="scale"] .note-line + .note-line { margin-top: 0.25rem; }

@media (max-width: 900px) {
  [data-slide="scale"] .scale-summary { grid-template-columns: 1fr; }
  [data-slide="scale"] .sc-val { display: none; }
}