/* The acquisition curve: cost to acquire, and nothing else.
   Scoped per CLAUDE.md. Square corners, per --radius: 0. */

/* The chart fills its column. It used to carry a 46rem cap and be centred,
   because a lone curve across the whole slide read as a banner; inside a column
   it has a measure already and neither applies. */
[data-slide="cost-to-acquire"] .ca-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem;
  align-items: stretch;
}
[data-slide="cost-to-acquire"] .ca-panel {
  background: var(--surface); padding: 1rem 1.2rem 0.9rem;
  border-radius: var(--radius); border-top: 3px solid var(--accent);
}

[data-slide="cost-to-acquire"] .ca-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.7rem;
}
[data-slide="cost-to-acquire"] .ca-title { font-size: 0.86rem; color: var(--fg); }
[data-slide="cost-to-acquire"] .ca-delta {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.9rem; font-weight: 500; color: var(--accent); white-space: nowrap;
}

/* A gutter for the y-axis labels, so the plot starts to the right of them
   rather than under them. Both panels had no axes at all until review asked
   what they were plotting. */
[data-slide="cost-to-acquire"] .ca-body { padding-left: 3.1rem; }
[data-slide="cost-to-acquire"] .ca-unit {
  display: block; margin: 0 0 0.3rem -3.1rem;
  font-family: var(--font-mono); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted);
}

/* The SVG stretches to the box with preserveAspectRatio="none", so the plot
   area owns the height and the curve simply fills it. */
/* The top tick straddles the plot's top edge, so the plot needs half a line of
   clearance or that label sits on the unit caption.

   Height scales with the viewport rather than sitting at a fixed 216px. The
   five sourcing lines below are the tallest thing on the slide and they are not
   negotiable, so the plots are what flexes to keep them above the navigation. */
[data-slide="cost-to-acquire"] .ca-plot {
  position: relative; height: clamp(110px, 15vh, 175px); margin-top: 0.45rem;
}

/* This is now the densest slide in the deck: two plots with full axes plus five
   sourcing lines. It buys the room back from its own heading block rather than
   from either of those, at every height rather than only on short screens. */
[data-slide="cost-to-acquire"] .inner {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* Ticks hang in the gutter to the left of the plot, centred on their own
   gridline. */
[data-slide="cost-to-acquire"] .ca-tick-y {
  position: absolute; right: 100%; margin-right: 0.5rem;
  transform: translateY(50%);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.66rem; color: var(--fg-muted); white-space: nowrap;
}
[data-slide="cost-to-acquire"] .ca-xaxis {
  position: relative; height: 1.1rem; margin-top: 0.45rem;
  border-top: 1px solid var(--border);
}
[data-slide="cost-to-acquire"] .ca-tick-x {
  position: absolute; top: 0.3rem; transform: translateX(-50%);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.66rem; color: var(--fg-muted); white-space: nowrap;
}
/* The end ticks would hang off the panel if they stayed centred on their mark. */
[data-slide="cost-to-acquire"] .ca-tick-x.at-start { transform: none; }
[data-slide="cost-to-acquire"] .ca-tick-x.at-end { transform: translateX(-100%); }
[data-slide="cost-to-acquire"] .ca-axis-title {
  margin-top: 0.9rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted);
}
[data-slide="cost-to-acquire"] .ca-plot svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
[data-slide="cost-to-acquire"] .ca-grid-line {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--border); opacity: 0.5;
}

[data-slide="cost-to-acquire"] .ca-line {
  fill: none; stroke: var(--accent); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Faint, so the line stays the subject and the fill only gives it a body. */
[data-slide="cost-to-acquire"] .ca-area { fill: var(--accent); opacity: 0.16; }
/* The level the curve approaches, drawn so the flattening reads as a floor
   rather than as the chart running out of room. */
/* Dashed on purpose, and the one place dashing is right here: this is a
   threshold, not a gridline. Labelled, because an unlabelled rule invites the
   reader to guess what level it marks. */
[data-slide="cost-to-acquire"] .ca-floor {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed var(--fg-muted); opacity: 0.75;
}
[data-slide="cost-to-acquire"] .ca-floor i {
  position: absolute; right: 0; top: 0.15rem;
  font-style: normal; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-size: 0.64rem;
  color: var(--fg-muted); background: var(--surface); padding: 0 0.25rem;
}

/* Paid sits in front of organic and both start from the baseline, so the paid
   band reads as a constant floor with organic stacked above it. */


/* Stacked, not side by side. The two-column version put the two citations at
   the same level and left the eye choosing where to start; one under the other
   reads in the order they are meant to be read. */
[data-slide="cost-to-acquire"] .note-line { display: block; margin: 0; }
[data-slide="cost-to-acquire"] .note-line + .note-line { margin-top: 0.3rem; }
/* Provenance, and it should read as provenance: a third smaller than the
   paragraph above and set further from it. Same colour is fine once the size
   difference is doing real work. */
[data-slide="cost-to-acquire"] #cacSources { margin-top: 0.9rem; font-size: 0.66rem; }
/* The pricing provenance stamp was dropped from this slide and from the
   appendix economics slide on review, so no rule for it survives. Freshness of
   the synced data is still enforced in code: economics.js refuses to draw at
   all if the provenance schemaVersion is not the one it understands. */

/* Short viewports. The plots give up height rather than the source line, and
   the axis furniture added on review (unit caption, tick row, axis title) has
   to give some back too: with it at full size the slide overflowed 768px by
   61px and the source line sat under the navigation strip. */
@media (max-height: 820px) {
  [data-slide="cost-to-acquire"] .ca-grid { gap: 1rem; }
  /* The slide carries two sections now, so the second one's chart is what gives
     up height rather than either citation block. */
  [data-slide="cost-to-acquire"] .ca-plot { height: clamp(100px, 13vh, 155px); }
  [data-slide="cost-to-acquire"] .ca-cell { padding: 0.45rem 0.7rem; }
  [data-slide="cost-to-acquire"] .ca-step { margin-bottom: 0.35rem; }
  [data-slide="cost-to-acquire"] .ca-panel { padding: 0.7rem 0.9rem 0.75rem; }
  [data-slide="cost-to-acquire"] .ca-head { margin-bottom: 0.4rem; }
  [data-slide="cost-to-acquire"] .ca-unit { margin-bottom: 0.15rem; }
  [data-slide="cost-to-acquire"] .ca-xaxis { height: 1rem; margin-top: 0.3rem; }
  [data-slide="cost-to-acquire"] .ca-axis-title { margin-top: 0.4rem; }
    /* The heading block gives up its spacing last, same trade as the appendix
     economics slide: the charts are the slide, so they are squeezed first. */
  [data-slide="cost-to-acquire"] .inner { padding-top: 1.4rem; padding-bottom: 1.4rem; gap: 0.4rem; }
  [data-slide="cost-to-acquire"] .lede { font-size: 0.95rem; margin-bottom: 0.2rem; }
}
/* Too narrow for two columns: back to the stacked layout, with the division
   back in a single row, which is what it was before this slide was transposed. */
@media (max-width: 900px) {
  [data-slide="cost-to-acquire"] .ca-columns { grid-template-columns: 1fr; gap: 0.7rem; }
  [data-slide="cost-to-acquire"] .ca-derivation { grid-template-columns: 1fr auto 1fr auto 1fr; }
  [data-slide="cost-to-acquire"] .ca-op.eq,
  [data-slide="cost-to-acquire"] .ca-cell.out { grid-column: auto; }
}

/* --- two sections -----------------------------------------------------------
   Where the starting cost comes from, then why it falls. The slide showed only
   the second and review asked for the first, which is the more checkable half:
   a division of two researched figures. */
/* The slide runs left to right. Sections used to stack, which spent the height
   on stacking and left the chart whatever remained. */
[data-slide="cost-to-acquire"] .ca-columns {
  display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 1.4fr);
  gap: clamp(1.2rem, 2.5vw, 2.2rem); align-items: start;
}
[data-slide="cost-to-acquire"] .ca-step {
  display: flex; align-items: baseline; gap: 0.55rem; margin: 0 0 0.5rem;
  font-size: 1.02rem; font-weight: 400; color: var(--fg);
}
[data-slide="cost-to-acquire"] .ca-step-num {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent);
}

/* The division, written out. Three cells and two operators, so the arithmetic is
   read rather than trusted. */
/* Laid out as the equation it is: the two inputs share a row with the divide
   between them, then the result sits below behind a centred equals. Stacked in
   one column all three would read as a list of numbers that happen to be near
   each other, and the operators would stop doing any work. */
[data-slide="cost-to-acquire"] .ca-derivation {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem; align-items: stretch;
}
[data-slide="cost-to-acquire"] .ca-op.eq { grid-column: 1 / -1; justify-self: center; }
[data-slide="cost-to-acquire"] .ca-cell.out { grid-column: 1 / -1; }
[data-slide="cost-to-acquire"] .ca-cell {
  background: var(--surface); padding: 0.6rem 0.8rem;
  border-radius: var(--radius); border-top: 2px solid var(--border);
}
/* The result carries the brand rule; the inputs do not. Same trick the funnel
   slide uses to say which row is the answer. */
[data-slide="cost-to-acquire"] .ca-cell.out { border-top-color: var(--accent); }
[data-slide="cost-to-acquire"] .ca-cell-v {
  display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.15rem; font-weight: 500; color: var(--fg);
}
[data-slide="cost-to-acquire"] .ca-cell.out .ca-cell-v { color: var(--accent); }
[data-slide="cost-to-acquire"] .ca-cell-k {
  display: block; margin-top: 0.15rem; font-size: 0.74rem; color: var(--fg);
}
[data-slide="cost-to-acquire"] .ca-cell-k small {
  display: block; font-size: 0.66rem; color: var(--fg-muted);
}
[data-slide="cost-to-acquire"] .ca-op {
  align-self: center; font-family: var(--font-mono);
  font-size: 1rem; color: var(--fg-muted);
}

[data-slide="cost-to-acquire"] .note-line { display: block; }
[data-slide="cost-to-acquire"] .note-line + .note-line { margin-top: 0.2rem; }

/* Section two's sentence, above its chart. Body copy, not a caption: it is the
   claim the chart then evidences. */
[data-slide="cost-to-acquire"] .ca-note {
  /* Full slide width, matching the derivation row above it. At 74ch it wrapped
     to three lines in the left third of the slide while the right half sat
     empty, which is what made the section look bulkier than it is.

     Sized as body copy, not as a caption. At 0.82rem it was within 2px of the
     citations at the foot of the slide and the same colour as them, so the
     argument and its provenance read as one undifferentiated block. This is the
     paragraph the section heading introduces; it should look like one. */
  margin: 0 0 0.6rem; max-width: none;
  font-size: 0.95rem; line-height: 1.5; color: var(--fg-muted);
}