/* One rhythm for every case study: each block sits one section gap (96px) from the next.
   The section bar's top edge is invisible against the page, so its chips sit 96px below the block above;
   its bottom line sits 96px above the next section. */
.cs .toc { margin-top: calc(var(--section-gap) - 10px); }
.cs-hero .role-cards { margin-bottom: 0; }
.cs section.glance { padding-top: var(--section-gap); }
.cs section > :last-child, .cs section > .prose:last-child > :last-child { margin-bottom: 0; }
/* phones: the answer table's rows become stacked cards; the last one shouldn't add space below the section */
.answer-table tbody tr:last-child { margin-bottom: 0; }

/* ---------- Breathing room inside sections ----------
   The gap between two blocks depends on what they are:
   text → image 48 · image → text 64 · image → image 32 · text → text 40 · new sub-topic 80 · caption/label 12.
   Phones use 32 · 48 · 24 · 32 · 64 · 10. */
.cs { --r-tm: 48px; --r-mt: 64px; --r-mm: 32px; --r-tt: 40px; --r-sub: 80px; --r-cap: 12px; }
@media (max-width: 720px) { .cs { --r-tm: 32px; --r-mt: 48px; --r-mm: 24px; --r-tt: 32px; --r-sub: 64px; --r-cap: 10px; } }

/* text → text */
.cs section > :is(.prose, .cards, .cc-facts, .cc-tasks, .cc-method, .path, .cc-kpis, .cc-compare, .takeaways, .bigstat, .oc-stats, .cc-strip-cap, .cc-sample-label)
  + :is(.prose, .cards, .cc-facts, .cc-tasks, .cc-method, .path, .cc-kpis, .cc-compare, .takeaways, .oc-stats, .cc-sample-label) { margin-top: var(--r-tt) !important; }
/* text → image */
.cs section > :is(.prose, .cards, .cc-facts, .cc-tasks, .cc-method, .path, .cc-kpis, .cc-compare, .takeaways, .bigstat, .oc-stats, .cc-strip-cap)
  + :is(figure, .wall, .ph-grid, .options, .cc-strip, .cc-sample, .ft-list) { margin-top: var(--r-tm) !important; }
/* image → text */
.cs section > :is(figure, .wall, .ph-grid, .options, .cc-strip, .cc-sample, .ft-list)
  + :is(.prose, .cards, .cc-facts, .cc-tasks, .cc-method, .path, .cc-kpis, .cc-compare, .takeaways, .oc-stats, .cc-sample-label) { margin-top: var(--r-mt) !important; }
/* image → image */
.cs section > :is(figure, .wall, .ph-grid, .options, .cc-strip, .cc-sample)
  + :is(figure, .wall, .ph-grid, .options, .cc-strip, .cc-sample) { margin-top: var(--r-mm) !important; }
/* two titled full-bleed diagrams in a row need the larger gap */
.cs section > figure.bleed + figure.bleed { margin-top: var(--r-mt) !important; }
/* a new sub-topic starts with more room, whatever came before it */
.cs.cs.cs section > * + :is(.cc-decision, .answers, .oc-cols, .cc-sub, .proto) { margin-top: var(--r-sub) !important; }
/* captions and labels stay with the image they describe */
.cs.cs.cs section > * + .cc-strip-cap { margin-top: var(--r-cap) !important; }
.cs.cs.cs section > .cc-sample-label + .cc-sample { margin-top: var(--r-cap) !important; }
.cs .cc-sample-label { margin-bottom: 0; }
/* a heading and the table it introduces */
.cs.cs.cs section > .cc-sub + .cc-compare { margin-top: 16px !important; }

/* the expanders that close section 04 sit close together, a little below the funnel */
.cs.cs.cs section > .path + .cc-all { margin-top: var(--r-tt) !important; }
.cs.cs.cs section > .cc-all + .cc-all { margin-top: 10px !important; }
.cc-all .cc-sample { margin-top: 4px; }