/* Acquisition: one budget split two ways, plus organic on top.

   The two paid channels sit side by side because they are shares of the same
   budget; stacked, they read as two unrelated bars. Organic is separated by a
   plus rather than made a third column, because it is not a slice of the
   budget: it is an uplift on whatever the paid channels deliver.

   Scoped per CLAUDE.md. Square corners throughout, per --radius: 0. */

[data-slide="acquisition"] .acq-mix {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0 1.4rem;
  margin-top: 0.3rem;
}

[data-slide="acquisition"] .acq-heading {
  display: block; margin-bottom: 0.5rem;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-muted);
}

[data-slide="acquisition"] .acq-channels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem;
}
[data-slide="acquisition"] .acq-channel {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 0.35rem 0.6rem;
}
[data-slide="acquisition"] .acq-name {
  grid-column: 1 / -1;
  font-size: 0.85rem; color: var(--fg);
}
[data-slide="acquisition"] .acq-pct {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.05rem; font-weight: 500; color: var(--accent);
}

/* The plus is the point of the layout: paid AND organic, not a budget split
   three ways. Sized to read as an operator rather than decoration. */
[data-slide="acquisition"] .acq-plus {
  font-size: 1.6rem; font-weight: 300; line-height: 1;
  color: var(--fg-muted); align-self: end; padding-bottom: 0.1rem;
}

[data-slide="acquisition"] .acq-organic-value {
  display: block;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.05rem; font-weight: 500; color: var(--success);
}
[data-slide="acquisition"] .acq-organic-note {
  display: block; margin-top: 0.15rem; max-width: 22ch;
  font-size: 0.72rem; line-height: 1.35; color: var(--fg-muted);
}

/* Narrow screens: a horizontal plus stops making sense, so organic drops below
   the paid split and keeps its own heading to stay legible. */
@media (max-width: 900px) {
  [data-slide="acquisition"] .acq-mix { grid-template-columns: 1fr; gap: 0.9rem 0; }
  [data-slide="acquisition"] .acq-plus { display: none; }
}