/* ==========================================================================
   blocks.css · case-study section components ("write once, render everywhere") · v0.5.2
   Owner: Case Study Bot. Needs case-tokens.css. Read README.md for the catalog.

   One markup per section type renders three ways:
     1. Reader, phone    base rules (single column)
     2. Reader, desktop  @container cs (min-width: 46rem)  (.cs-flow is the container)
     3. Present slide    .cs-slide.cs-b--<type>  (present.js clones the same section
                         into a 1600×900 stage and adds .cs-slide)
   Layout never uses viewport media queries, so the specimen can show a phone
   frame and a desktop frame side by side on one screen.
   Text is sized only through --cs-t-* (reader: fluid; slide: stage px).
   Motion: transform/opacity only. No glass on case bodies (glass.css rule).
   ========================================================================== */

/* ---------- 0. Surface, container, reset (host-page rules must not leak in) ---------- */
.cs-flow { container: cs / inline-size; }
.cs-b {
  /* the site's legacy `section {…card…}` rule is reset here */
  margin: 0; width: auto; max-width: none; border-radius: 0; overflow: visible; box-shadow: none; background: none;
  position: relative; box-sizing: border-box; text-align: left;
  font: 400 var(--about-body-size, var(--cs-t-body))/var(--about-body-leading, var(--cs-t-body-lh)) var(--about-face-body, var(--cs-font-body)); color: var(--about-text, var(--cs-text));
  display: flex; flex-direction: column; gap: var(--about-block-gap, var(--cs-space-l));
  padding-block: var(--about-block-space, var(--cs-space-block)); border-top: var(--about-rule-line, 1px solid var(--cs-rule));
  scroll-margin-top: var(--about-nav-clear, var(--cs-nav-clear));
}
.cs-b *, .cs-b *::before, .cs-b *::after { box-sizing: border-box; }
.cs-b :is(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, blockquote, table) { margin: 0; padding: 0; }
.cs-b :is(ul, ol) { list-style: none; }
.cs-b img { display: block; max-width: 100%; height: auto; }
.cs-b a { color: var(--about-accent, var(--cs-accent)); text-decoration: underline; text-underline-offset: var(--about-link-underline-offset, .18em); text-decoration-thickness: var(--about-link-underline, 1px); }
.cs-b a:focus-visible, .cs-b button:focus-visible, .cs-b [tabindex]:focus-visible, .cs-b summary:focus-visible { outline: none; box-shadow: var(--about-focus, var(--cs-focus)); border-radius: var(--about-focus-radius, 6px); }
.cs-b h1 { font: var(--about-title-weight, 400) var(--about-title-size, var(--cs-t-h1))/var(--about-title-leading, var(--cs-t-h1-lh)) var(--about-face-display, var(--cs-font-display)); letter-spacing: var(--about-title-tracking, var(--cs-tracking-display)); text-wrap: balance; }
.cs-b h2 { font: 400 var(--about-h2-size, var(--cs-t-h2))/var(--about-h2-leading, var(--cs-t-h2-lh)) var(--about-face-display, var(--cs-font-display)); letter-spacing: var(--cs-tracking-display); text-wrap: pretty; text-wrap: balance; max-width: var(--about-h2-max, 24ch); }
.cs-b h3 { font: 600 var(--cs-t-h3)/var(--cs-t-h3-lh) var(--about-face-body, var(--cs-font-body)); }
.cs-b :is(p, li, dd, td, th) { text-wrap: pretty; }
.cs-b h3 { text-wrap: pretty; text-wrap: balance; }   /* block headings: no orphan words (pretty = fallback where balance is missing) */
.cs-b em { font-style: normal; color: var(--about-em-color, var(--cs-accent)); }
.cs-b strong { font-weight: var(--about-strong-weight, 600); }

/* ---------- 1. Shared primitives ---------- */
.cs-b-head { display: flex; flex-direction: column; gap: var(--about-head-gap, var(--cs-space-s)); max-width: var(--about-measure, var(--cs-read-measure)); }
.cs-eyebrow, .cs-label {
  font: var(--about-eyebrow-weight, 600) var(--about-eyebrow-size, var(--cs-t-label))/var(--about-eyebrow-leading, 1.2) var(--about-face-ui, var(--cs-font-ui)); letter-spacing: var(--about-eyebrow-tracking, var(--cs-tracking-label));
  text-transform: var(--about-eyebrow-case, uppercase); color: var(--about-accent, var(--cs-accent));
}
.cs-label { color: var(--about-muted, var(--cs-muted)); }
.cs-lede { font-size: var(--about-lede-size, var(--cs-t-lede)); line-height: var(--about-lede-leading, var(--cs-t-lede-lh)); color: var(--about-muted, var(--cs-muted)); max-width: var(--about-lede-max, 36ch); }
.cs-muted { color: var(--cs-muted); }
.cs-small { font-size: var(--cs-t-small); line-height: var(--cs-t-small-lh); }
.cs-prose { display: flex; flex-direction: column; gap: var(--about-prose-gap, 1em); max-width: var(--about-measure, var(--cs-read-measure)); }
.cs-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cs-fig { display: flex; flex-direction: column; gap: var(--cs-space-xs); min-width: 0; }
.cs-media {
  position: relative; overflow: hidden; border-radius: var(--cs-radius-card);
  background: var(--cs-surface); box-shadow: inset 0 0 0 1px var(--cs-rule);
  display: flex; align-items: center; justify-content: center; padding: clamp(8px, 2cqi, 18px);
}
.cs-media picture { display: contents; }
.cs-media img { border-radius: 4px; width: 100%; height: auto; }
.cs-caption { font: 500 var(--cs-t-small)/1.45 var(--cs-font-ui); color: var(--cs-muted); max-width: 60ch; }
.cs-figno { font-weight: 600; color: var(--cs-accent); margin-right: .5em; font-variant-numeric: tabular-nums; }
.cs-bleed { margin-inline: calc(var(--cs-gutter) * -1); }
.cs-bleed .cs-media, .cs-bleed.cs-media { border-radius: 0; box-shadow: none; }
.cs-bleed .cs-caption { padding-inline: var(--cs-gutter); }

.cs-chip {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; white-space: nowrap;
  font: 600 var(--cs-t-label)/1 var(--cs-font-ui); letter-spacing: var(--cs-tracking-label); text-transform: uppercase;
  padding: 6px 10px; border-radius: var(--cs-radius-pill); border: 1px solid currentColor; color: var(--cs-accent);
}
.cs-chip--solid { background: var(--cs-accent); border-color: var(--cs-accent); color: var(--cs-bg); }   /* text-safe accent: AA in light and dark surfaces */
.cs-chip--quiet { color: var(--cs-muted); border-color: var(--cs-rule); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* margin note: inline card on phone, right margin on desktop */
.cs-side {
  font: 400 var(--cs-t-small)/var(--cs-t-small-lh) var(--cs-font-body); color: var(--cs-muted);
  border-left: 2px solid var(--cs-rule); padding: 2px 0 2px var(--cs-space-m); display: flex; flex-direction: column; gap: .5em;
}
.cs-side .cs-label { margin-bottom: 2px; }
.cs-notes, .cs-only-slide { display: none !important; }   /* presenter notes are read by present.js only */

/* Example / placeholder marks */
.cs-example { font: 600 11px/1 var(--cs-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cs-placeholder);
  border: 1px dashed currentColor; border-radius: 4px; padding: 4px 6px; align-self: flex-start; }
.cs-placeholder { color: var(--cs-placeholder); border: 1.5px dashed currentColor; border-radius: 10px; padding: 10px 14px;
  background: color-mix(in srgb, var(--cs-placeholder) 6%, transparent); }

/* Present button (shown only on desktop with a fine pointer; present.js unhides it) */
.cs-present-btn {
  display: none; align-items: center; gap: 10px; align-self: flex-start;
  font: 600 14px/1 var(--cs-chrome-font, system-ui); color: var(--cs-text); background: var(--cs-surface);
  border: 0; border-radius: var(--cs-radius-pill); padding: 10px 16px 10px 14px; min-height: 40px;
  cursor: pointer; box-shadow: inset 0 0 0 1px var(--cs-rule), var(--cs-chrome-shadow);   /* v0.3: quiet secondary, not a dark pill */
  transition: transform var(--dur-spring-snappy, 300ms) var(--ease-spring-snappy, ease-out);
}
.cs-present-btn kbd { font: 600 11px/1 var(--cs-font-mono); padding: 4px 6px; border-radius: 6px; background: var(--cs-chrome-hover); color: var(--cs-muted); }
.cs-present-btn:hover { transform: translateY(-1px); }
.cs-present-btn:active { transform: scale(.98); }
.cs-present-btn:focus-visible { outline: none; box-shadow: var(--cs-focus); }
.cs-present-btn--float { position: fixed; left: 24px; bottom: 24px; z-index: 100; }
@media (min-width: 64em) and (pointer: fine) { .cs-present-btn:not([hidden]) { display: inline-flex; } }

/* ---------- 2. Desktop reader grid: text column + margin column ---------- */
@container cs (min-width: 46rem) {
  .cs-b { display: grid; grid-template-columns: minmax(0, var(--about-measure, var(--cs-read-measure))) minmax(var(--about-side-min, 11rem), 1fr);
    column-gap: var(--about-grid-gap-x, var(--cs-space-2xl)); row-gap: var(--about-grid-gap-y, var(--cs-space-xl)); align-items: start; }
  .cs-b > * { grid-column: 1; }
  .cs-b > .cs-side { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: .35em; }
  .cs-b > .cs-wide { grid-column: 1 / -1; }
  .cs-bleed { margin-inline: 0; }
  .cs-bleed .cs-media, .cs-bleed.cs-media { border-radius: var(--cs-radius-card); box-shadow: inset 0 0 0 1px var(--cs-rule); }
  .cs-bleed .cs-caption { padding-inline: 0; }
}

/* ==========================================================================
   3. Components. Each: purpose · phone · desktop · slide
   ========================================================================== */

/* 3.1 COVER / HERO · title page: client, headline, role facts, Present, hero shot */
.cs-b--cover { border-top: 0; padding-top: var(--cs-nav-clear); gap: var(--about-cover-gap, var(--cs-space-xl)); }
.cs-b--cover .cs-b-head { gap: var(--about-cover-head-gap, var(--cs-space-m)); max-width: var(--about-cover-head-max, 46rem); }
.cs-b--cover h1 { max-width: var(--about-title-max, 15ch); }
@container cs (min-width: 46rem) { .cs-b--cover .cs-b-head { max-width: var(--about-cover-head-max-wide, 52rem); } .cs-b--cover h1 { max-width: var(--about-title-max-wide, 25ch); } }   /* v0.3: 3 lines on desktop with Newsreader, so the hero starts higher */
.cs-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--cs-space-m) var(--cs-space-l);
  padding-top: var(--cs-space-m); border-top: var(--about-rule-line, 1px solid var(--cs-rule)); max-width: 46rem; }
.cs-meta dt { font: var(--about-eyebrow-weight, 600) var(--about-eyebrow-size, var(--cs-t-label))/var(--about-eyebrow-leading, 1.2) var(--about-face-ui, var(--cs-font-ui)); letter-spacing: var(--about-eyebrow-tracking, var(--cs-tracking-label)); text-transform: var(--about-eyebrow-case, uppercase); color: var(--about-muted, var(--cs-muted)); }
.cs-meta dd { font: var(--about-meta-value-weight, 500) var(--about-meta-value-size, var(--cs-t-small))/var(--about-meta-value-leading, 1.4) var(--about-face-ui, var(--cs-font-ui)); margin-top: 4px; }
.cs-cover-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--about-actions-gap, var(--cs-space-m)); font: 500 var(--about-actions-size, var(--cs-t-small))/1.2 var(--about-face-ui, var(--cs-font-ui)); color: var(--about-muted, var(--cs-muted)); }
/* v0.3.2 cover meta A (Shah OK 10:03am Oct 29): 2x2 hairline strip, a small Lucide icon on each label, read time as a chip.
   Reader only (.cs-reader), so the Present cover slide keeps its own meta row. Icon sits in the dt (valid dl markup). */
.cs-reader .cs-meta[data-icons] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-top: 0; max-width: var(--about-meta-max, 40rem);
  border-top: var(--about-rule-line, 1px solid var(--cs-rule)); border-bottom: var(--about-rule-line, 1px solid var(--cs-rule)); }
.cs-reader .cs-meta[data-icons] > div { --cs-meta-x: 0px; position: relative; padding: var(--about-meta-pad, 14px 12px 15px) calc(var(--cs-meta-x) + var(--about-meta-icon-inset, 26px)); }
.cs-reader .cs-meta[data-icons] > div:nth-child(even) { --cs-meta-x: var(--about-meta-col-inset, 16px); border-left: var(--about-rule-line, 1px solid var(--cs-rule)); }
.cs-reader .cs-meta[data-icons] > div:nth-child(n+3) { border-top: var(--about-rule-line, 1px solid var(--cs-rule)); }
.cs-reader .cs-meta[data-icons] dt .cs-ico { position: absolute; left: var(--cs-meta-x); top: var(--about-meta-icon-top, 13px); width: var(--about-meta-icon, 16px); height: var(--about-meta-icon, 16px); color: var(--about-muted, var(--cs-muted)); }
.cs-reader .cs-meta[data-icons] dd { margin-top: 5px; color: var(--about-text, var(--cs-text)); }
.cs-read-time.is-chip { display: inline-flex; align-items: center; gap: var(--about-chip-gap, 6px); height: var(--about-chip-height, 28px); padding: var(--about-chip-pad, 0 12px 0 10px); border-radius: var(--about-chip-radius, var(--cs-radius-pill));
  box-shadow: var(--about-chip-ring, inset 0 0 0 1px var(--cs-rule)); font: 500 var(--about-chip-size, 13px)/1 var(--about-face-ui, var(--cs-font-ui)); color: var(--about-muted, var(--cs-muted)); }
.cs-read-time.is-chip .cs-ico { width: var(--about-chip-icon, 14px); height: var(--about-chip-icon, 14px); }
.cs-slide .cs-meta .cs-ico { display: none; }
.cs-cover-media .cs-media { padding: 0; background: var(--cs-plate); box-shadow: inset 0 0 0 1px var(--cs-rule); }   /* v0.3: warm plate, was navy */
.cs-cover-media img { border-radius: 0; }
@container cs (min-width: 46rem) {
  .cs-b--cover > .cs-cover-media { grid-column: 1 / -1; }
  .cs-b--cover > :not(.cs-cover-media) { grid-column: 1 / -1; }
  .cs-cover-media .cs-media { padding: clamp(16px, 3cqi, 40px) clamp(16px, 3cqi, 40px) 0; align-items: flex-end; }
  .cs-cover-media img { border-radius: 10px 10px 0 0; box-shadow: 0 0 0 1px rgb(26 25 23 / .08), 0 24px 60px rgb(26 25 23 / .16); }
}

/* 3.2 TL;DR · the 30-second version as an index strip of 2-4 labelled cells */
.cs-tldr { display: grid; gap: 0; border-top: 2px solid var(--cs-text); }
.cs-tldr > div { display: grid; gap: 4px; padding: var(--cs-space-m) 0; border-bottom: 1px solid var(--cs-rule); }
.cs-tldr h3 { font: 600 var(--cs-t-label)/1.2 var(--cs-font-ui); letter-spacing: var(--cs-tracking-label); text-transform: uppercase; color: var(--cs-accent); }
.cs-tldr p { font-size: var(--cs-t-body); }
@container cs (min-width: 46rem) {
  .cs-b--tldr > .cs-tldr { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .cs-tldr > div { padding: var(--cs-space-l) var(--cs-space-l) var(--cs-space-l) 0; border-bottom: 0; align-content: start; gap: var(--cs-space-xs); }
  .cs-tldr > div + div { padding-left: var(--cs-space-l); border-left: 1px solid var(--cs-rule); }
}

/* 3.3 CONTEXT · background prose + a small fact sheet */
.cs-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; padding: var(--cs-space-m); border-radius: var(--cs-radius-card);
  background: var(--cs-surface); box-shadow: inset 0 0 0 1px var(--cs-rule); font: 400 var(--cs-t-small)/1.45 var(--cs-font-ui); }
.cs-facts dt { color: var(--cs-muted); font-weight: 500; }
.cs-facts dd { color: var(--cs-text); }
@container cs (min-width: 46rem) {
  .cs-b--context > .cs-facts { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 1fr; gap: 2px; }
  .cs-b--context .cs-facts dd + dt { margin-top: 10px; }
}

/* 3.4 PROBLEM · one statement with a red-pen bar, then the friction list */
.cs-b--problem .cs-b-head { border-left: 3px solid var(--cs-accent-fill); padding-left: var(--cs-space-m); }
.cs-pains { display: grid; gap: 0; counter-reset: pain; }
.cs-pains li { counter-increment: pain; display: grid; grid-template-columns: var(--about-traits-col, 2.25rem) 1fr; gap: var(--about-traits-gap, 2px 8px); padding: var(--about-traits-pad, var(--cs-space-s) 0); border-top: var(--about-rule-line, 1px solid var(--cs-rule)); }
.cs-pains li::before { content: counter(pain, decimal-leading-zero); grid-row: span 2; font: 500 var(--about-traits-num-size, var(--cs-t-small))/1.6 var(--about-face-mono, var(--cs-font-mono)); color: var(--about-traits-num-color, var(--cs-accent)); }
.cs-pains strong { font-weight: var(--about-strong-weight, 600); }
.cs-pains span { color: var(--about-muted, var(--cs-muted)); }
@container cs (min-width: 46rem) {
  .cs-b--problem > .cs-fig { grid-column: 2; grid-row: 1 / span 2; }
  .cs-pains { grid-template-columns: 1fr 1fr; column-gap: var(--about-traits-col-gap-wide, var(--cs-space-l)); }
}

/* 3.5 AUDIENCE / PERSONAS · who it is for: monogram cards with needs and today */
.cs-people { display: grid; gap: var(--cs-space-m); }
.cs-person { display: grid; gap: var(--cs-space-s); padding: var(--cs-space-l); border-radius: var(--cs-radius-card); background: var(--cs-surface); box-shadow: inset 0 0 0 1px var(--cs-rule); align-content: start; }
.cs-person-head { display: flex; align-items: center; gap: var(--cs-space-s); }
.cs-mono { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center;
  font: 400 1.5rem/1 var(--cs-font-display); color: var(--cs-on-accent); background: var(--cs-inverse-bg); }
.cs-person:nth-child(2n) .cs-mono { background: var(--cs-accent-fill); }
.cs-person h3 { line-height: 1.2; }
.cs-person-role { font: 500 var(--cs-t-small)/1.35 var(--cs-font-ui); color: var(--cs-muted); }
.cs-person dl { display: grid; gap: var(--cs-space-s); }
.cs-person dt { font: 600 var(--cs-t-label)/1.2 var(--cs-font-ui); letter-spacing: var(--cs-tracking-label); text-transform: uppercase; color: var(--cs-muted); }
.cs-person dd { font-size: var(--cs-t-small); line-height: var(--cs-t-small-lh); margin-top: 3px; }
@container cs (min-width: 46rem) {
  .cs-b--audience > .cs-people { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .cs-b--audience > .cs-fig { grid-column: 1 / -1; }
}

/* 3.6 ROLE & TEAM · film-credits sheet: label column + values */
.cs-credits { display: grid; gap: 0; border-top: var(--about-facts-top, 2px solid var(--cs-text)); }
.cs-credits > div { display: grid; gap: var(--about-facts-row-gap, 6px); padding: var(--about-facts-row-pad, var(--cs-space-m) 0); border-bottom: var(--about-rule-line, 1px solid var(--cs-rule)); }
.cs-credits dt { font: var(--about-eyebrow-weight, 600) var(--about-eyebrow-size, var(--cs-t-label))/var(--about-eyebrow-leading, 1.2) var(--about-face-ui, var(--cs-font-ui)); letter-spacing: var(--about-eyebrow-tracking, var(--cs-tracking-label)); text-transform: var(--about-eyebrow-case, uppercase); color: var(--about-facts-key-color, var(--cs-muted)); }
.cs-credits dd { font-size: var(--about-body-size, var(--cs-t-body)); }
.cs-duties { display: grid; gap: 10px; counter-reset: d; }
.cs-duties li { counter-increment: d; display: grid; grid-template-columns: 1.75rem 1fr; }
.cs-duties li::before { content: counter(d); font: 500 var(--cs-t-small)/1.65 var(--cs-font-mono); color: var(--cs-accent); }
.cs-duties b { font-weight: 600; }
@container cs (min-width: 46rem) {
  .cs-b--role > .cs-credits { grid-column: 1 / -1; }
  .cs-credits > div { grid-template-columns: var(--about-facts-key-col, 11rem) 1fr; gap: var(--about-facts-row-gap-wide, var(--cs-space-l)); padding: var(--about-facts-row-pad-wide, var(--cs-space-l) 0); }
  .cs-credits dt { padding-top: .45em; }
  .cs-duties { grid-template-columns: 1fr 1fr; gap: var(--cs-space-m) var(--cs-space-xl); }
}

/* 3.7 PROCESS TIMELINE · rail with dots: vertical on phone, horizontal on desktop */
.cs-timeline { display: grid; gap: 0; position: relative; counter-reset: t; }
.cs-timeline li { counter-increment: t; position: relative; padding: var(--about-timeline-pad, 0 0 var(--cs-space-l) 2rem); display: grid; gap: 4px; }
.cs-timeline li::before { content: ""; position: absolute; left: 5px; top: .55em; bottom: -.4em; width: var(--about-timeline-track, 2px); background: var(--about-timeline-track-color, var(--cs-rule)); }
.cs-timeline li:last-child::before { display: none; }
.cs-timeline li::after { content: ""; position: absolute; left: 0; top: .3em; width: var(--about-timeline-node, 12px); height: var(--about-timeline-node, 12px); border-radius: 50%; background: var(--about-timeline-node-fill, var(--cs-surface)); box-shadow: var(--about-timeline-node-ring, inset 0 0 0 2px var(--cs-accent-fill)); }
.cs-timeline li:last-child::after { background: var(--about-timeline-node-last, var(--cs-accent-fill)); }
.cs-timeline .cs-when { font: 500 var(--about-timeline-when-size, var(--cs-t-label))/var(--about-timeline-when-leading, 1.3) var(--about-face-mono, var(--cs-font-mono)); color: var(--about-muted, var(--cs-muted)); }
.cs-timeline .cs-when::before { content: counter(t, decimal-leading-zero) " · "; color: var(--about-timeline-count-color, var(--cs-accent)); }
.cs-timeline p { color: var(--about-muted, var(--cs-muted)); font-size: var(--about-timeline-text-size, var(--cs-t-small)); line-height: var(--about-timeline-text-leading, var(--cs-t-small-lh)); }
@container cs (min-width: 46rem) {
  .cs-b--process > .cs-timeline { grid-column: 1 / -1; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--about-timeline-col-gap, var(--cs-space-m)); }
  .cs-timeline li { padding: var(--about-timeline-pad-wide, 1.75rem 0 0); }
  .cs-timeline li::before { left: 0; right: calc(var(--cs-space-m) * -1); top: 5px; bottom: auto; width: auto; height: var(--about-timeline-track, 2px); }
  .cs-timeline li::after { top: 0; }
}

/* 3.8 RESEARCH & INSIGHTS · the questions asked, set like an editor's margin, + what they led to */
.cs-questions { display: grid; gap: var(--cs-space-m); counter-reset: q; }
.cs-questions li { counter-increment: q; display: grid; grid-template-columns: 2.5rem 1fr; gap: 2px 10px; align-content: start; }   /* v0.3: rows no longer stretch in a tall grid row */
.cs-questions li::before { content: "Q" counter(q); grid-row: span 2; font: 400 1.75rem/1 var(--cs-font-display); color: var(--cs-accent); }
.cs-questions h3 { font: 600 var(--cs-t-label)/1.5 var(--cs-font-ui); letter-spacing: var(--cs-tracking-label); text-transform: uppercase; color: var(--cs-muted); }
.cs-questions p { font: 400 calc(var(--cs-t-body) * 1.12)/1.38 var(--cs-font-display); color: var(--cs-text); }
.cs-insight { display: grid; gap: var(--about-callout-gap, 6px); padding: var(--about-callout-pad, var(--cs-space-m) var(--cs-space-l)); border-radius: var(--about-callout-radius, var(--cs-radius-card)); background: var(--about-callout-fill, var(--cs-highlight)); }
.cs-insight .cs-label { color: var(--about-callout-label, var(--cs-accent)); }
@container cs (min-width: 46rem) {
  .cs-b--research > .cs-questions { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--cs-space-xl) var(--cs-space-2xl); }
  .cs-b--research > .cs-insight { grid-column: 1 / -1; grid-template-columns: 11rem 1fr; align-items: baseline; }
}

/* 3.9 CONSTRAINTS · spec-sheet cards with an outlined rule number */
.cs-rules { display: grid; gap: var(--cs-space-s); counter-reset: r; }
.cs-rules li { counter-increment: r; position: relative; display: grid; gap: 6px; padding: var(--cs-space-l); padding-right: 4.5rem;
  border: 1px solid var(--cs-rule); border-radius: var(--cs-radius-card); background: var(--cs-surface); }
.cs-rules li::after { content: counter(r, decimal-leading-zero); position: absolute; right: var(--cs-space-l); top: var(--cs-space-m);
  font: 400 2.5rem/1 var(--cs-font-display); color: transparent; -webkit-text-stroke: 1px var(--cs-accent); }
.cs-rules .cs-label::before { content: "Rule " counter(r) " · "; }
.cs-rules p { color: var(--cs-muted); font-size: var(--cs-t-small); line-height: var(--cs-t-small-lh); }
@container cs (min-width: 46rem) {
  .cs-b--constraints > .cs-rules { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: var(--cs-space-m); }
}

/* 3.10 COMPETITIVE ANALYSIS · comparison matrix + "the gap" callout.
   Desktop: a real table, key column tinted. Phone: each row becomes a card. */
/* v0.3.2 competitors B (Shah OK 10:03am Oct 29): "Reviewed" strip of the providers, above the matrix (desktop) and the model cards (phone).
   v0.4.6 LOGO-FIRST (Shah 12:06pm Oct 29: "for competitive analysis have competitors logos always"). Every competitor shows its
   real logo on a fixed white tile, so dark and light marks read the same in light and dark mode. Markup per competitor:
     <li class="cs-logo" style="--s:1.05"><img class="cs-logo-img" src="…" alt="Company" width height loading="lazy" decoding="async">
       <span class="cs-logo-fb"><span class="cs-reviewed-mono" aria-hidden="true">CO</span>Company</span></li>
   --s = optical size: start at sqrt(2.6 / aspect) clamped to .7–1.6 so a square seal and a long wordmark carry the same visual
   weight, then nudge by eye (±15%) for very heavy or very light marks. Raster logos need ≥2× their largest display size.
   .cs-logo--knockout = the brand's own reversed (white) mark on a dark tile. Never recolour, crop or redraw a logo.
   The initials badge (.cs-logo-fb) shows only when the image fails to load (reader.js adds .is-fallback). A list, not links. */
.cs-reviewed { display: grid; gap: 10px; }
.cs-reviewed-k { font: 600 var(--cs-t-label)/1.2 var(--cs-font-ui); letter-spacing: var(--cs-tracking-label); text-transform: uppercase; color: var(--cs-muted); }
.cs-b .cs-reviewed-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.cs-logo { --cs-logo-h: 28px; position: relative; display: grid; place-items: center; min-width: 0; height: 72px; padding: 10px 14px; border-radius: var(--cs-radius-md, 10px);
  background: var(--cs-logo-tile, #FFFFFF); box-shadow: inset 0 0 0 1px var(--cs-logo-tile-rule, rgba(42, 38, 34, .12)); }
.cs-logo--knockout { background: var(--cs-logo-tile-dark, #2A2622); box-shadow: none; }
.cs-b .cs-logo-img { display: block; width: auto; height: calc(var(--cs-logo-h) * var(--s, 1)); max-width: 100%; max-height: 100%; object-fit: contain; }
.cs-logo-fb { display: none; align-items: center; gap: 8px; font: 500 13px/1.25 var(--cs-font-ui); color: #2A2622; text-align: left; }
.cs-logo--knockout .cs-logo-fb { color: #FFFFFF; }
.cs-b .cs-logo.is-fallback .cs-logo-img { display: none; }
.cs-logo.is-fallback .cs-logo-fb { display: inline-flex; }
.cs-reviewed-mono { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-highlight);
  color: var(--cs-accent); font: 600 10.5px/1 var(--cs-font-ui); letter-spacing: .02em; }
@container cs (min-width: 46rem) {
  .cs-b--compare > .cs-reviewed { grid-column: 1 / -1; }
  .cs-b .cs-reviewed-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }   /* 8 logos break 4 + 4 like the source figure */
  .cs-logo { --cs-logo-h: 36px; height: 92px; padding: 14px 20px; }
}
/* Present: one row of compact tiles under the heading (the slide was already full, so the label goes and tiles stay short) */
.cs-slide.cs-b--compare > .cs-reviewed { grid-column: 1 / -1; grid-row: 2; gap: 0; }
.cs-slide .cs-reviewed-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cs-slide .cs-reviewed-list { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; }
.cs-slide .cs-logo { --cs-logo-h: 36px; height: 80px; padding: 10px 16px; }
.cs-matrix-wrap { border-radius: var(--cs-radius-card); background: var(--cs-surface); box-shadow: inset 0 0 0 1px var(--cs-rule); }
.cs-matrix-wrap:focus-visible { outline: none; box-shadow: var(--cs-focus); }
.cs-matrix { border-collapse: collapse; width: 100%; font: 400 var(--cs-t-small)/1.45 var(--cs-font-ui); }
.cs-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cs-matrix, .cs-matrix tbody, .cs-matrix tr, .cs-matrix th, .cs-matrix td { display: block; }
.cs-matrix tr { padding: var(--cs-space-m); border-top: 1px solid var(--cs-rule); }
.cs-matrix tbody tr:first-child { border-top: 0; }
.cs-matrix th[scope="row"] { font-weight: 400; margin-bottom: var(--cs-space-s); }
.cs-model { display: block; font: 600 var(--cs-t-h3)/1.25 var(--cs-font-body); }
.cs-model-desc { display: block; color: var(--cs-muted); margin-top: 4px; }
.cs-matrix td { display: grid; grid-template-columns: minmax(0, 9.5rem) 1fr; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px dashed var(--cs-rule); }
.cs-matrix td::before { content: attr(data-label); font: 600 var(--cs-t-label)/1.35 var(--cs-font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--cs-muted); }
.cs-matrix td.is-key { background: var(--cs-highlight); margin-inline: -8px; padding-inline: 8px; border-radius: 6px; border-top-color: transparent; }
.cs-cell-note { display: block; color: var(--cs-muted); font-size: .92em; }
.cs-mark { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.cs-mark::before { content: ""; width: .8em; height: .8em; border-radius: 50%; flex: none; }
.cs-mark--yes { color: var(--cs-ok); } .cs-mark--yes::before { background: currentColor; }
.cs-mark--part { color: var(--cs-text); } .cs-mark--part::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px currentColor; }
.cs-mark--no { color: var(--cs-no); } .cs-mark--no::before { box-shadow: inset 0 0 0 1.5px currentColor; }
.cs-gap { display: grid; gap: var(--cs-space-xs); padding: var(--cs-space-l); border-radius: var(--cs-radius-card);
  background: var(--cs-inverse-bg); color: var(--cs-inverse-text); position: relative; }
.cs-gap .cs-label { color: var(--cs-inverse-accent); }
.cs-gap h3 { font: 400 calc(var(--cs-t-h3) * 1.3)/1.2 var(--cs-font-display); }
.cs-gap p { color: var(--cs-inverse-muted); font-size: var(--cs-t-small); line-height: var(--cs-t-small-lh); }
.cs-gap p strong { color: var(--cs-inverse-text); }
@container cs (min-width: 46rem) {
  .cs-b--compare > .cs-matrix-wrap, .cs-b--compare > .cs-gap, .cs-b--compare > .cs-fig { grid-column: 1 / -1; }
  .cs-matrix-wrap { overflow-x: auto; }
  .cs-matrix { display: table; min-width: 44rem; }
  .cs-matrix thead { position: static; width: auto; height: auto; clip: auto; overflow: visible; display: table-header-group; }
  .cs-matrix tbody { display: table-row-group; }
  .cs-matrix tr { display: table-row; padding: 0; border: 0; }
  .cs-matrix th, .cs-matrix td { display: table-cell; vertical-align: top; text-align: left; padding: var(--cs-space-m); border-top: 1px solid var(--cs-rule); }
  .cs-matrix thead th { border-top: 0; font: 600 var(--cs-t-label)/1.35 var(--cs-font-ui); letter-spacing: var(--cs-tracking-label); text-transform: uppercase; color: var(--cs-muted); vertical-align: bottom; }
  .cs-matrix th[scope="row"] { margin: 0; width: 30%; }
  .cs-matrix td::before { content: none; }
  .cs-matrix td.is-key, .cs-matrix th.is-key { background: var(--cs-highlight); margin: 0; border-radius: 0; border-top-color: var(--cs-rule); }
  .cs-matrix thead th.is-key { color: var(--cs-accent); box-shadow: inset 0 3px 0 var(--cs-accent-fill); }
  .cs-mark { margin-bottom: 4px; }
  .cs-gap { grid-template-columns: 11rem 1fr; column-gap: var(--cs-space-l); align-items: baseline; padding: var(--cs-space-xl); }
  .cs-gap > :not(.cs-label) { grid-column: 2; }
  .cs-gap::before { content: ""; position: absolute; top: -9px; left: var(--cs-gap-x, 55%); width: 18px; height: 18px; background: inherit; transform: rotate(45deg); border-radius: 3px; }
}

/* 3.10b COMPETITOR BEHAVIOUR · v0.4.7 (Shah 3:39pm Oct 29: "show competitors ad block and how they do work … in a skillful way").
   Sits right after a .cs-b--compare section. Shows how each competitor actually behaves, from real, sourced material only:
   per competitor its real logo (.cs-logo, same tile as 3.10), a kind chip (the word carries the meaning, never hue:
   .cs-chip = a hard stop, .cs-chip--quiet = a soft nudge), one tight screenshot in .cs-media (so reader.js zoom works),
   a "Source: <site>, captured <Mon D, YYYY>" or "Source: original <year> research" caption, and one "how it works" line.
   Then .cs-behave-take: the takeaway, tied to the design choice, with a link to it.
   Phone: cards stack. Reader ≥60rem: 3-up, rows aligned with subgrid. Slide: 3-up + takeaway row.
   Never a mockup passed off as a real capture; if a site showed nothing when checked, say so in the line instead. */
.cs-b .cs-behave-list { display: grid; gap: var(--cs-space-m); list-style: none; margin: 0; padding: 0; }
.cs-b .cs-behave { display: grid; grid-template-rows: auto 1fr auto; gap: var(--cs-space-s); min-width: 0; padding: var(--cs-space-m);
  border-radius: var(--cs-radius-card); background: var(--cs-surface); box-shadow: inset 0 0 0 1px var(--cs-rule); }
.cs-behave-head { display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-s); min-width: 0; }
.cs-behave-head .cs-logo { --cs-logo-h: 24px; flex: 1 1 auto; max-width: 11rem; height: 52px; padding: 8px 12px; justify-items: start; }
.cs-behave-head .cs-chip { align-self: center; flex: none; }
.cs-behave .cs-fig { min-height: 0; }
.cs-behave .cs-media { flex: 1; background: var(--cs-plate); padding: clamp(8px, 2cqi, 14px); }
.cs-behave .cs-media img { box-shadow: 0 0 0 1px var(--cs-rule); }
.cs-behave-how { font-size: var(--cs-t-small); line-height: var(--cs-t-small-lh); color: var(--cs-text); }
.cs-behave-how b { font-weight: 600; }
.cs-behave-take { display: grid; gap: var(--cs-space-xs); padding: var(--cs-space-m) var(--cs-space-l); border-radius: var(--cs-radius-card);
  background: var(--cs-highlight); box-shadow: inset 3px 0 0 var(--cs-accent-fill); }
.cs-behave-take .cs-label { color: var(--cs-accent); }
.cs-behave-take p { font-size: var(--cs-t-small); line-height: var(--cs-t-small-lh); max-width: 70ch; }
.cs-behave-take a { color: var(--cs-accent); font-weight: 600; text-underline-offset: .2em; }
.cs-behave-take a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--cs-focus); }
@container cs (min-width: 46rem) {
  .cs-b--behavior > .cs-behave-list, .cs-b--behavior > .cs-behave-take { grid-column: 1 / -1; }
  .cs-behave-take { grid-template-columns: 11rem 1fr; column-gap: var(--cs-space-l); align-items: baseline; padding: var(--cs-space-l) var(--cs-space-xl); }
}
@container cs (min-width: 60rem) {
  .cs-b .cs-behave-list { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: var(--cs-space-m); row-gap: 0; }
  .cs-b .cs-behave { grid-row: span 3; grid-template-rows: subgrid; }
}

/* 3.11 DECISION LEDGER · options as columns -> the chosen one, then the verdict (why + trade-off) */
.cs-ledger { display: grid; gap: var(--cs-space-s); }
.cs-opt { display: grid; gap: var(--cs-space-s); align-content: start; padding: var(--cs-space-m) var(--cs-space-l); border-radius: var(--cs-radius-card);
  border: 1px solid var(--cs-rule); background: var(--cs-surface); position: relative; }
.cs-opt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cs-opt .cs-kind { font: 600 var(--cs-t-label)/1.2 var(--cs-font-ui); letter-spacing: var(--cs-tracking-label); text-transform: uppercase; color: var(--cs-muted); }
.cs-opt h3 { font: 400 calc(var(--cs-t-h3) * 1.35)/1.1 var(--cs-font-display); }
.cs-opt > p { color: var(--cs-muted); font-size: var(--cs-t-small); line-height: var(--cs-t-small-lh); }
.cs-opt .cs-media { padding: 6px; }
.cs-opt dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; font-size: var(--cs-t-small); line-height: 1.45; }
.cs-opt dt { font: 600 var(--cs-t-label)/1.6 var(--cs-font-ui); letter-spacing: .04em; text-transform: uppercase; }
.cs-opt dt.cs-pro { color: var(--cs-ok); } .cs-opt dt.cs-con { color: var(--cs-muted); }
.cs-opt:not(.is-chosen) { opacity: .92; }
.cs-opt.is-chosen { background: var(--cs-highlight); border-color: var(--cs-accent-fill); box-shadow: 0 0 0 1px var(--cs-accent-fill); opacity: 1; }
.cs-verdict { display: grid; gap: var(--cs-space-m); padding-top: var(--cs-space-l); }
.cs-verdict > h3 { font: 400 var(--cs-t-h2)/var(--cs-t-h2-lh) var(--cs-font-display); max-width: 20ch; }
.cs-verdict-grid { display: grid; gap: var(--cs-space-s); }
.cs-verdict-grid > div { display: grid; gap: 6px; padding: var(--cs-space-l); border-radius: var(--cs-radius-card); background: var(--cs-surface); box-shadow: inset 0 0 0 1px var(--cs-rule); }
.cs-verdict-grid > div:first-child { box-shadow: inset 3px 0 0 var(--cs-ok), inset 0 0 0 1px var(--cs-rule); }
.cs-verdict-grid > div:last-child { box-shadow: inset 3px 0 0 var(--cs-muted), inset 0 0 0 1px var(--cs-rule); }
@container cs (min-width: 46rem) {
  .cs-b--ledger > .cs-ledger, .cs-b--ledger > .cs-verdict { grid-column: 1 / -1; }
  .cs-ledger { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
  .cs-verdict { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; column-gap: var(--cs-space-2xl); }
  .cs-verdict > .cs-eyebrow { grid-column: 1 / -1; }
  .cs-verdict-grid { grid-template-columns: 1fr 1fr; }
}

/* 3.12 WIREFRAMES -> FINAL · before / after pair. Phone: a two-way toggle; desktop: side by side */
.cs-ba { display: grid; gap: var(--cs-space-m); }
.cs-ba-toggle { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--cs-radius-pill); background: var(--cs-surface); box-shadow: inset 0 0 0 1px var(--cs-rule); justify-self: start; }
.cs-ba-toggle label { position: relative; font: 600 var(--cs-t-small)/1 var(--cs-font-ui); padding: 10px 16px; min-height: 40px; display: inline-flex; align-items: center; border-radius: var(--cs-radius-pill); color: var(--cs-muted); cursor: pointer; }
.cs-ba-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cs-ba-toggle label:has(input:checked) { background: var(--cs-inverse-bg); color: var(--cs-inverse-text); }
.cs-ba-toggle label:has(input:focus-visible) { box-shadow: var(--cs-focus); }
.cs-ba-pair { display: grid; gap: var(--cs-space-m); }
.cs-ba-pair .cs-fig > .cs-label { order: -1; }
.cs-ba:has(.cs-ba-toggle input[value="after"]:checked) .cs-ba-before,
.cs-ba:has(.cs-ba-toggle input[value="before"]:checked) .cs-ba-after { display: none; }
.cs-ba-arrow { display: none; }
@container cs (min-width: 46rem) {
  .cs-b--ba > .cs-ba { grid-column: 1 / -1; }
  .cs-ba-toggle { display: none; }
  .cs-ba-pair { grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--cs-space-l); }
  .cs-ba .cs-ba-before, .cs-ba .cs-ba-after { display: flex !important; }
  .cs-ba-arrow { display: block; font: 400 2rem/1 var(--cs-font-display); color: var(--cs-accent); }
}

/* 3.13 JOURNEY / FLOW · steps tagged by actor. Phone: one column; desktop: swimlanes */
.cs-journey { display: grid; gap: 0; counter-reset: j; }
.cs-journey li { counter-increment: j; display: grid; grid-template-columns: 2rem 1fr; gap: 2px 10px; padding: var(--cs-space-s) 0; border-top: 1px solid var(--cs-rule); }
.cs-journey li::before { content: counter(j); grid-row: span 3; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
  font: 600 .8rem/1 var(--cs-font-ui); color: var(--cs-on-accent); background: var(--cs-inverse-bg); margin-top: 2px; }
.cs-journey li[data-actor="b"]::before { background: var(--cs-accent-fill); }
.cs-journey .cs-actor { font: 600 var(--cs-t-label)/1.4 var(--cs-font-ui); letter-spacing: var(--cs-tracking-label); text-transform: uppercase; color: var(--cs-muted); }
.cs-journey h3 { font-size: var(--cs-t-body); }
.cs-journey p { color: var(--cs-muted); font-size: var(--cs-t-small); line-height: var(--cs-t-small-lh); }
.cs-lanes { display: none; }
@container cs (min-width: 46rem) {
  .cs-b--journey > .cs-journey-wrap, .cs-b--journey > .cs-fig { grid-column: 1 / -1; }
  .cs-journey-wrap { display: grid; grid-template-columns: 7.5rem 1fr; }
  .cs-lanes { display: grid; grid-template-rows: 1fr 1fr; font: 600 var(--cs-t-label)/1.3 var(--cs-font-ui); letter-spacing: var(--cs-tracking-label); text-transform: uppercase; color: var(--cs-muted); }
  .cs-lanes span { padding-top: var(--cs-space-m); border-top: 1px solid var(--cs-rule); }
  .cs-journey { grid-template-rows: 1fr 1fr; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--cs-space-s); }
  .cs-journey li { grid-row: 1; grid-template-columns: 1fr; align-content: start; padding: var(--cs-space-m) var(--cs-space-s) var(--cs-space-m) 0; }
  .cs-journey li[data-actor="b"] { grid-row: 2; }
  .cs-journey li::before { grid-row: auto; margin-bottom: 4px; }
  .cs-journey .cs-actor { display: none; }
}

/* 3.14 ANNOTATED SCREEN · one screen with numbered pins and a matching legend */
.cs-annotated { display: grid; gap: var(--cs-space-m); }
.cs-pinned { position: relative; }
.cs-pinned .cs-media { padding: 0; }
.cs-pinned img { border-radius: 0; }
.cs-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; font: 700 .8rem/1 var(--cs-font-ui); color: var(--cs-on-accent); background: var(--cs-accent-fill);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-surface) 85%, transparent), 0 2px 6px rgba(0,0,0,.2); }
/* v0.3.2 Fig. 7 on phone (Shah OK 10:03am Oct 29): below a 60rem column the full screen shrinks the dialog to ~110px, so a
   native-size crop of the dialog takes its place and the pins sit in the dialog's left margin (--xc/--yc), clear of every label.
   The wide layout (1440) is untouched. The hidden picture is lazy, so only the one shown is fetched. */
.cs-pinned .cs-crop { display: none; }
@container cs (max-width: 59.99rem) {
  .cs-pinned[data-crop] .cs-media { max-width: 28rem; }
  .cs-pinned[data-crop] .cs-media > picture:not(.cs-crop) { display: none; }
  .cs-pinned[data-crop] .cs-media > .cs-crop { display: contents; }
  .cs-pinned[data-crop] .cs-pin { left: var(--xc, var(--x)); top: var(--yc, var(--y)); width: 22px; height: 22px; font-size: 12px;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cs-surface) 90%, transparent), 0 1px 4px rgba(0,0,0,.18); }
  .cs-annotated:has(> .cs-pinned[data-crop]) .cs-pin-notes li { grid-template-columns: 22px 1fr; }   /* legend numbers match the pins */
  .cs-annotated:has(> .cs-pinned[data-crop]) .cs-pin-notes li::before { width: 22px; height: 22px; font-size: 12px; margin-top: 1px; }
}
.cs-pin-notes { display: grid; gap: var(--cs-space-s); counter-reset: p; }
.cs-pin-notes li { counter-increment: p; display: grid; grid-template-columns: 1.6rem 1fr; gap: 2px 12px; }
.cs-pin-notes li::before { content: counter(p); grid-row: span 2; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
  font: 700 .8rem/1 var(--cs-font-ui); color: var(--cs-on-accent); background: var(--cs-accent-fill); }
.cs-pin-notes h3 { font-size: var(--cs-t-body); line-height: 1.35; }
.cs-pin-notes p { color: var(--cs-muted); font-size: var(--cs-t-small); line-height: var(--cs-t-small-lh); }
@container cs (min-width: 46rem) {
  .cs-b--annotated > .cs-annotated { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.7fr) minmax(14rem, 1fr); align-items: center; gap: var(--cs-space-xl); }
}

/* 3.15 SOLUTION SCREENS GALLERY · phone: swipeable full-bleed rail; desktop: feature + grid */
.cs-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: var(--cs-space-s); overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--cs-gutter) * -1); padding: 2px var(--cs-gutter) var(--cs-space-s); scroll-padding-inline: var(--cs-gutter); overscroll-behavior-x: contain; }
.cs-gallery > * { scroll-snap-align: start; }
.cs-gallery-hint { font: 500 var(--cs-t-label)/1 var(--cs-font-ui); color: var(--cs-muted); letter-spacing: .04em; }
.cs-video-btn { all: unset; box-sizing: border-box; position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; width: 100%; cursor: pointer;
  border-radius: var(--cs-radius-card); background: var(--cs-inverse-bg); color: var(--cs-inverse-text); overflow: hidden; }
.cs-video-btn:focus-visible { box-shadow: var(--cs-focus); }
.cs-video-btn .cs-play { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-accent-fill); color: var(--cs-on-accent);
  transition: transform var(--cs-dur-ui) var(--cs-ease-ui); }
.cs-video-btn:hover .cs-play { transform: scale(1.06); }
.cs-video-btn .cs-video-title { position: absolute; left: 16px; bottom: 14px; right: 16px; font: 500 var(--cs-t-small)/1.3 var(--cs-font-ui); color: var(--cs-inverse-muted); }
.cs-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--cs-radius-card); display: block; background: #000; }
@container cs (min-width: 46rem) {
  .cs-b--gallery > .cs-gallery { grid-column: 1 / -1; }
  .cs-gallery { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 0; gap: var(--cs-space-l); }
  .cs-gallery > .is-feature { grid-column: 1 / -1; }
  .cs-gallery-hint { display: none; }
}

/* 3.16 OUTCOME / RESULTS · dark band; qualitative results or metrics (with a source line) */
.cs-b--outcome { background: var(--about-impact-fill, var(--cs-inverse-bg)); color: var(--about-impact-text, var(--cs-inverse-text)); border-top: 0;
  margin-inline: calc(var(--cs-gutter) * -1); padding-inline: var(--about-gutter, var(--cs-gutter)); }
.cs-b--outcome .cs-eyebrow { color: var(--about-impact-accent, var(--cs-inverse-accent)); }
.cs-b--outcome .cs-lede, .cs-b--outcome .cs-muted { color: var(--cs-inverse-muted); }
.cs-results { display: grid; gap: var(--about-stat-gap, var(--cs-space-s)); }
.cs-result { display: grid; gap: var(--about-stat-inner-gap, var(--cs-space-xs)); align-content: start; padding: var(--about-stat-pad-top, var(--cs-space-l)) 0 0; border-top: var(--about-stat-rule, 1px solid color-mix(in srgb, var(--cs-inverse-text) 22%, transparent)); }
.cs-result .cs-chip { color: var(--cs-inverse-accent); }
.cs-result .cs-chip--solid { color: var(--cs-inverse-bg); background: var(--cs-inverse-accent); border-color: var(--cs-inverse-accent); }
.cs-metric { font: 400 var(--about-stat-size, var(--cs-t-metric))/1 var(--about-face-display, var(--cs-font-display)); letter-spacing: var(--cs-tracking-display); font-variant-numeric: var(--about-stat-figures, tabular-nums); }
.cs-source { font: 400 var(--about-source-size, var(--cs-t-label))/var(--about-source-leading, 1.4) var(--about-face-ui, var(--cs-font-ui)); color: var(--about-impact-muted, var(--cs-inverse-muted)); }
@container cs (min-width: 46rem) {
  .cs-b--outcome { margin-inline: 0; padding-inline: var(--about-impact-pad-wide, var(--cs-space-2xl)); border-radius: var(--about-impact-radius-wide, calc(var(--cs-radius-card) * 1.5)); margin-block: var(--about-impact-margin-wide, var(--cs-space-xl)); }
  .cs-b--outcome > .cs-results { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(var(--about-stat-min, 13rem), 1fr)); gap: var(--about-stat-gap-wide, var(--cs-space-xl)); }
}

/* 3.17 QUOTE · one voice, big serif, always with who said it and where it came from */
.cs-quote { display: grid; gap: var(--cs-space-m); padding-left: var(--cs-space-l); border-left: 2px solid var(--cs-accent-fill); max-width: 46rem; }
.cs-quote blockquote p { font: 400 var(--cs-t-quote)/1.25 var(--cs-font-display); letter-spacing: var(--cs-tracking-display); text-wrap: balance; }
.cs-quote blockquote p::before { content: "\201C"; color: var(--cs-accent); margin-left: -.45em; }
.cs-quote blockquote p::after { content: "\201D"; color: var(--cs-accent); }
.cs-quote figcaption { font: 500 var(--cs-t-small)/1.4 var(--cs-font-ui); color: var(--cs-muted); }
.cs-quote figcaption b { color: var(--cs-text); font-weight: 600; }
@container cs (min-width: 46rem) { .cs-b--quote > .cs-quote { grid-column: 1 / -1; padding-left: var(--cs-space-2xl); } }

/* 3.18 REFLECTION / LEARNINGS · essay-like numbered lessons */
.cs-learnings { display: grid; gap: var(--about-list-gap, var(--cs-space-l)); counter-reset: l; }
.cs-learnings li { counter-increment: l; display: grid; grid-template-columns: var(--about-list-num-col, 3rem) 1fr; gap: var(--about-list-item-gap, 4px 12px); }
.cs-learnings li::before { content: counter(l, decimal-leading-zero); grid-row: span 2; font: 400 var(--about-list-num-size, 2.25rem)/1 var(--about-face-display, var(--cs-font-display)); color: var(--about-list-num-color, var(--cs-accent)); }
.cs-learnings h3 { font: 400 var(--about-list-title-size, calc(var(--cs-t-h3) * 1.35))/var(--about-list-title-leading, 1.2) var(--about-face-display, var(--cs-font-display)); }
.cs-learnings p { color: var(--about-list-text-color, var(--cs-muted)); }
@container cs (min-width: 46rem) {
  .cs-b--reflection > .cs-learnings { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: var(--about-list-gap-wide, var(--cs-space-2xl)); }
}

/* 3.19 APPENDIX · backup material: collapsed in the reader, separate frames in Present */
.cs-appx { display: grid; gap: 0; border-top: 1px solid var(--cs-rule); }
.cs-appx-item { border-bottom: 1px solid var(--cs-rule); }
.cs-appx-item > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 10px; align-items: baseline;
  padding: var(--cs-space-m) 0; min-height: var(--cs-tap); font: 600 var(--cs-t-body)/1.35 var(--cs-font-body); }
.cs-appx-item > summary::-webkit-details-marker { display: none; }
.cs-appx-item > summary .cs-appx-id { font: 500 var(--cs-t-small)/1 var(--cs-font-mono); color: var(--cs-accent); }
.cs-appx-item > summary::after { content: "+"; font: 400 1.4rem/1 var(--cs-font-ui); color: var(--cs-muted); transition: transform var(--cs-dur-ui) var(--cs-ease-ui); }
.cs-appx-item[open] > summary::after { transform: rotate(45deg); }
.cs-appx-body { display: grid; gap: var(--cs-space-m); padding: 0 0 var(--cs-space-l); }
@container cs (min-width: 46rem) {
  .cs-b--appendix > .cs-appx { grid-column: 1 / -1; }
  .cs-appx-body { padding-left: 3.1rem; }
  .cs-appx-body .cs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cs-space-m); }
}
.cs-appx-body .cs-numbered { display: grid; gap: 10px; counter-reset: n; }
.cs-appx-body .cs-numbered li { counter-increment: n; display: grid; grid-template-columns: 1.75rem 1fr; }
.cs-appx-body .cs-numbered li::before { content: counter(n); font: 500 var(--cs-t-small)/1.65 var(--cs-font-mono); color: var(--cs-accent); }

/* ==========================================================================
   4. SLIDE MODE (.cs-slide = the same section cloned into the 1600×900 stage)
   ========================================================================== */
.cs-slide {
  --cs-t-h1: var(--cs-slide-h1); --cs-t-h1-lh: var(--cs-slide-h1-lh);
  --cs-t-h2: var(--cs-slide-h2); --cs-t-h2-lh: var(--cs-slide-h2-lh);
  --cs-t-h3: var(--cs-slide-h3); --cs-t-h3-lh: var(--cs-slide-h3-lh);
  --cs-t-lede: var(--cs-slide-lede); --cs-t-lede-lh: var(--cs-slide-lede-lh);
  --cs-t-body: 25px; --cs-t-body-lh: 1.45; --cs-t-small: 21px; --cs-t-small-lh: 1.42;
  --cs-t-label: 16px; --cs-t-metric: var(--cs-slide-metric); --cs-t-quote: 56px;
  --cs-space-l: 28px; --cs-space-xl: 40px; --cs-space-m: 20px; --cs-space-s: 14px; --cs-space-2xl: 56px;
  --cs-radius-card: 16px; --cs-gutter: 0px;
  position: absolute; left: 0; top: 0; width: 1600px; height: 900px; max-width: none; min-height: 0; margin: 0 !important;
  padding: var(--cs-slide-pad) !important; border: 0 !important; border-radius: 0;
  display: flex; flex-direction: column; gap: 28px; overflow: hidden;
  background: var(--cs-bg); color: var(--cs-text);
}
.cs-slide .cs-side, .cs-slide .cs-only-read, .cs-slide .cs-gallery-hint, .cs-slide .cs-ba-toggle { display: none !important; }
.cs-slide .cs-only-slide { display: revert !important; }
.cs-slide .cs-b-head { max-width: none; gap: 16px; }
.cs-slide h2 { max-width: 30ch; }
/* R10 (v0.5.0): headings balance, running text avoids orphans */
.cs-slide :is(h1, h2, h3, .cs-lede) { text-wrap: balance; }
.cs-slide :is(p, li, dd, figcaption) { text-wrap: pretty; }
/* R1 (v0.5.0): an image fills its plate (contain: never cropped, never stretched) and the plate has a floor
   (--csp-img-min, 300px), so a full slide overflows instead of shrinking its pictures. present.js then trims the
   type (data-fit 1-3) and, past fit 3, splits the frame (R3) or gives the picture its own frame (R4).
   Layout no longer depends on the image having loaded (the box is set by the layout, not by the pixels). */
.cs-slide .cs-fig { min-height: auto; min-width: 0; }
.cs-slide .cs-media { --csp-pad: 16px; position: relative; flex: 1 1 auto; min-height: calc(var(--csp-img-min, 300px) + 2 * var(--csp-pad)); padding: var(--csp-pad); }
.cs-slide .cs-media img { position: absolute; left: var(--csp-pad); top: var(--csp-pad); width: calc(100% - 2 * var(--csp-pad)); height: calc(100% - 2 * var(--csp-pad));
  max-width: none; max-height: none; object-fit: contain; opacity: 0; transition: opacity var(--cs-dur-ui) var(--cs-ease-ui); }
.cs-slide .cs-media img.is-loaded { opacity: 1; }
.cs-slide .cs-caption { font-size: 18px; }
.cs-slide .cs-bleed { margin-inline: 0; }

/* cover: text | bleed image */
/* R11 (v0.5.0): the whole cover image shows (contain, at its own ratio), bleeding off the right edge; nothing is cut */
.cs-slide.cs-b--cover { --cs-slide-h1: 80px; display: grid; grid-template-columns: minmax(0, 1fr) 880px; grid-template-rows: 1fr auto; gap: 40px 56px; padding-right: 0 !important; align-items: center; }
.cs-slide.cs-b--cover .cs-b-head { grid-column: 1; grid-row: 1; align-self: end; }
.cs-slide.cs-b--cover h1 { max-width: 14ch; }
.cs-slide.cs-b--cover .cs-meta { grid-column: 1; grid-row: 2; align-self: start; grid-template-columns: repeat(2, auto); justify-content: start; gap: 14px 48px; margin: 0; }
.cs-slide.cs-b--cover .cs-cover-actions { display: none; }
.cs-slide.cs-b--cover .cs-cover-media { grid-column: 2; grid-row: 1 / -1; align-self: center; }
.cs-slide.cs-b--cover .cs-cover-media .cs-media { --csp-pad: 0px; flex: none; min-height: 0; padding: 0; aspect-ratio: var(--csp-ar, 1.737); background: none; box-shadow: none; border-radius: 16px 0 0 16px; overflow: hidden; }
.cs-slide.cs-b--cover .cs-cover-media img { position: static; width: 100%; height: 100%; object-fit: contain; border-radius: 0; box-shadow: none; }
.cs-slide.cs-b--cover .cs-cover-media .cs-caption { display: none; }

/* tldr: four cards */
.cs-slide .cs-tldr { flex: 1; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; border-top: 3px solid var(--cs-text); }
.cs-slide .cs-tldr > div { padding: 30px 28px 0 0; border: 0; align-content: start; gap: 14px; }
.cs-slide .cs-tldr > div + div { padding-left: 28px; border-left: 1px solid var(--cs-rule); }

/* two-column slides: head + list | figure */
.cs-slide:is(.cs-b--context, .cs-b--problem) { display: grid; grid-template-columns: 620px 1fr; grid-template-rows: auto 1fr; gap: 30px 64px; }
.cs-slide:is(.cs-b--context, .cs-b--problem) > :not(.cs-fig) { grid-column: 1; }
.cs-slide:is(.cs-b--context, .cs-b--problem) > .cs-fig { grid-column: 2; grid-row: 1 / -1; height: 100%; }
.cs-slide.cs-b--context .cs-facts { align-self: end; grid-template-columns: auto 1fr; padding: 24px 28px; gap: 10px 22px; font-size: 21px; }
.cs-slide .cs-pains { grid-template-columns: 1fr; }
/* R2 (v0.5.0): a context / problem slide without a figure uses the full width (it stopped at x 716) */
.cs-slide.cs-b--context:not(:has(> .cs-fig)) { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto 1fr; }
.cs-slide.cs-b--context:not(:has(> .cs-fig)) > .cs-b-head { grid-column: 1 / -1; }
.cs-slide.cs-b--context:not(:has(> .cs-fig)) > .cs-prose { grid-column: 1; max-width: 1100px; }
.cs-slide.cs-b--context:not(:has(> .cs-fig)) > .cs-facts { grid-column: 2; grid-row: 2; align-self: start; }
.cs-slide.cs-b--context:not(:has(> .cs-fig)) > .cs-facts:first-child { grid-column: 1 / -1; }
.cs-slide.cs-b--problem:not(:has(> .cs-fig)) { grid-template-columns: minmax(0, 1fr); }
.cs-slide.cs-b--problem:not(:has(> .cs-fig)) > * { grid-column: 1; }
.cs-slide.cs-b--problem:not(:has(> .cs-fig)) .cs-pains { max-width: 1180px; align-content: start; }
.cs-slide.cs-b--problem:not(:has(> .cs-fig)) .cs-pains:has(> li:nth-child(4)) { max-width: none; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.cs-slide > .cs-fig ~ .cs-pains, .cs-slide > .cs-pains:has(~ .cs-fig) { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.cs-slide .cs-pains li { padding: 14px 0; grid-template-columns: 56px 1fr; }

/* audience: cards | model figure */
.cs-slide.cs-b--audience { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 30px 40px; }
.cs-slide.cs-b--audience .cs-b-head { grid-column: 1 / -1; }
.cs-slide.cs-b--audience .cs-people { grid-column: 1; grid-template-columns: 1fr; gap: 18px; align-content: start; }
.cs-slide.cs-b--audience .cs-person { padding: 22px 26px; gap: 10px; }
.cs-slide.cs-b--audience .cs-person dl { grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-slide.cs-b--audience > .cs-fig { grid-column: 2; grid-row: 2; height: 100%; }
.cs-slide.cs-b--audience:not(:has(> .cs-fig)) .cs-people { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 24px; }   /* R2 */
.cs-slide .cs-mono { width: 52px; height: 52px; font-size: 28px; }

/* role: credits */
.cs-slide .cs-credits > div { grid-template-columns: 230px 1fr; gap: 28px; padding: 20px 0; }
.cs-slide .cs-duties { grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.cs-slide .cs-duties li { grid-template-columns: 34px 1fr; }

/* process: horizontal rail */
.cs-slide.cs-b--process { justify-content: center; }   /* R7: was margin-top:auto on the rail (a 345-374px hole under the head) */
.cs-slide .cs-timeline { margin-top: 24px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 20px; }
.cs-slide .cs-timeline li { padding: 40px 0 0; gap: 10px; }
.cs-slide .cs-timeline li::before { left: 0; right: -20px; top: 8px; bottom: auto; width: auto; height: 2px; }
.cs-slide .cs-timeline li::after { top: 1px; width: 16px; height: 16px; }
.cs-slide .cs-timeline h3 { font-size: 27px; }

/* research: questions grid */
.cs-slide .cs-questions { grid-template-columns: repeat(3, 1fr); gap: 34px 48px; }
.cs-slide .cs-questions li { grid-template-columns: 64px 1fr; }
.cs-slide .cs-questions li::before { font-size: 40px; }
.cs-slide .cs-questions p { font-size: 27px; }
.cs-slide .cs-insight { grid-template-columns: 240px 1fr; padding: 22px 28px; align-items: baseline; }

/* constraints: 2x2 */
.cs-slide .cs-rules { grid-template-columns: 1fr 1fr; gap: 20px; flex: 1; }
.cs-slide .cs-rules li { padding: 26px 110px 26px 28px; align-content: start; }
.cs-slide .cs-rules li::after { font-size: 64px; }

/* compare: matrix | gap */
.cs-slide.cs-b--compare { display: grid; grid-template-columns: 1fr 400px; grid-template-rows: auto 1fr; gap: 28px 32px; }
.cs-slide.cs-b--compare:has(> .cs-reviewed) { grid-template-rows: auto auto 1fr; gap: 22px 32px; }   /* v0.4.6 logo row */
.cs-slide.cs-b--compare .cs-b-head { grid-column: 1 / -1; }
.cs-slide.cs-b--compare .cs-matrix-wrap { grid-column: 1; grid-row: 2; align-self: start; overflow: hidden; }
.cs-slide.cs-b--compare:has(> .cs-reviewed) .cs-matrix-wrap, .cs-slide.cs-b--compare:has(> .cs-reviewed) .cs-gap { grid-row: 3; }
.cs-slide.cs-b--compare .cs-gap { grid-column: 2; grid-row: 2; align-self: stretch; align-content: start; padding: 32px; grid-template-columns: 1fr; gap: 14px; }
.cs-slide.cs-b--compare .cs-gap h3 { font-size: 34px; }
.cs-slide.cs-b--compare > .cs-fig { display: none; }
.cs-slide .cs-matrix { display: table; font-size: 19px; line-height: 1.38; }
.cs-slide .cs-matrix thead { position: static; width: auto; height: auto; clip: auto; overflow: visible; display: table-header-group; }
.cs-slide .cs-matrix tbody { display: table-row-group; }
.cs-slide .cs-matrix tr { display: table-row; padding: 0; border: 0; }
.cs-slide .cs-matrix th, .cs-slide .cs-matrix td { display: table-cell; vertical-align: top; padding: 18px 18px; border-top: 1px solid var(--cs-rule); text-align: left; }
.cs-slide .cs-matrix thead th { border-top: 0; font: 600 16px/1.3 var(--cs-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cs-muted); vertical-align: bottom; }   /* R9: 16px floor */
.cs-slide .cs-matrix thead th.is-key { color: var(--cs-accent); box-shadow: inset 0 4px 0 var(--cs-accent-fill); }
.cs-slide .cs-matrix td::before { content: none; }
.cs-slide .cs-matrix .is-key { background: var(--cs-highlight); margin: 0; border-radius: 0; }
.cs-slide .cs-matrix th[scope="row"] { width: 30%; margin: 0; }
.cs-slide .cs-model { font-size: 22px; }
.cs-slide .cs-mark { margin-bottom: 4px; }

/* competitor behaviour (v0.4.7): three cards in a row, takeaway underneath */
.cs-slide.cs-b--behavior { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 24px; }
.cs-slide.cs-b--behavior .cs-behave-list { min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto minmax(260px, 1fr) auto; column-gap: 24px; row-gap: 0; }
.cs-slide .cs-b .cs-behave, .cs-slide.cs-b .cs-behave { grid-row: span 3; grid-template-rows: subgrid; min-height: 0; padding: 16px; gap: 12px; }
.cs-slide .cs-behave .cs-caption { font-size: 16px; }
.cs-slide .cs-behave .cs-fig { display: flex; flex-direction: column; }
.cs-slide .cs-behave .cs-media { --csp-pad: 8px; --csp-img-min: 230px; }
.cs-slide .cs-behave-how, .cs-slide.cs-b--behavior .cs-lede { display: none; }   /* the frame is the evidence; the how-it-works lines live in the presenter notes */
.cs-slide.cs-b--behavior h2 { max-width: none; }
.cs-slide .cs-behave-head .cs-logo { --cs-logo-h: 30px; height: 64px; }
.cs-slide .cs-behave-take { grid-template-columns: 270px 1fr; column-gap: 28px; align-items: baseline; padding: 22px 28px; }
.cs-slide .cs-behave-take p { font-size: 21px; max-width: none; }
/* v0.4.8: four or more competitors sit in one row of N on the slide (podcast has five); the reader keeps 3-up and wraps */
.cs-slide.cs-b--behavior .cs-behave-list:has(> .cs-behave:nth-child(4)) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 16px; }
.cs-slide.cs-b--behavior .cs-behave-list:has(> .cs-behave:nth-child(4)) .cs-behave { padding: 14px; gap: 10px; }
.cs-slide.cs-b--behavior .cs-behave-list:has(> .cs-behave:nth-child(4)) .cs-behave-head { flex-direction: column; align-items: flex-start; gap: 8px; }
.cs-slide.cs-b--behavior .cs-behave-list:has(> .cs-behave:nth-child(4)) .cs-behave-head .cs-logo { --cs-logo-h: 24px; height: 52px; width: 100%; max-width: 100%; }
.cs-slide.cs-b--behavior .cs-behave-list:has(> .cs-behave:nth-child(4)) .cs-caption { font-size: 16px; line-height: 1.35; }   /* v0.5.0: present.js pages 4+ competitors in pairs, so this is a no-JS fallback only */

/* auto-fit levels (present.js fitSlides): used only when a block's content is
   taller than the 1600×900 frame. Each level trims type and spacing. */
.cs-slide[data-fit] { gap: 20px; --cs-space-l: 22px; --cs-space-xl: 30px; --cs-space-m: 16px; }
.cs-slide[data-fit="1"] { --cs-t-body: 23px; --cs-t-small: 19px; --cs-t-lede: calc(var(--cs-slide-lede) * .9); --cs-t-h2: calc(var(--cs-slide-h2) * .9); }
.cs-slide[data-fit="2"] { --cs-t-body: 21px; --cs-t-small: 18px; --cs-t-lede: calc(var(--cs-slide-lede) * .8); --cs-t-h2: calc(var(--cs-slide-h2) * .8); --cs-t-h1: calc(var(--cs-slide-h1) * .88); }
.cs-slide[data-fit="3"] { --cs-t-body: 19px; --cs-t-small: 16px; --cs-t-lede: calc(var(--cs-slide-lede) * .72); --cs-t-h2: calc(var(--cs-slide-h2) * .72); --cs-t-h1: calc(var(--cs-slide-h1) * .8); --cs-space-l: 16px; gap: 14px; }
.cs-slide[data-fit="3"] .cs-opt h3 { font-size: 26px; }
.cs-slide[data-fit="3"] .cs-matrix { font-size: 17px; }
.cs-slide[data-fit="3"] .cs-matrix th, .cs-slide[data-fit="3"] .cs-matrix td { padding: 12px 14px; }

/* ledger: four columns; verdict is its own frame */
/* v0.5.0: one column per option (it was 4 columns for 3 cards), the card with the original | polished pair is wider,
   and every sketch keeps a 220px floor (fit levels used to squash them to 120px). The lede moves to the notes. */
.cs-slide .cs-ledger { display: flex; gap: 18px; flex: 1 1 auto; min-height: 0; }
.cs-slide.cs-b--ledger > .cs-b-head .cs-lede { display: none; }
.cs-slide .cs-opt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 20px 22px; gap: 10px; }
.cs-slide .cs-opt:has(.cs-sketch-toggle) { flex-grow: 1.45; }
.cs-slide .cs-opt h3 { font-size: 32px; }
.cs-slide .cs-opt > .cs-fig, .cs-slide .cs-opt > .cs-sketch-toggle { flex: 1 1 auto; display: flex; flex-direction: column; }
.cs-slide .cs-opt .cs-media { --csp-pad: 6px; --csp-img-min: 220px; }
.cs-slide .cs-opt > p { font-size: 18px; }
.cs-slide .cs-opt dl { font-size: 17px; gap: 6px 10px; }
.cs-slide.cs-verdict { display: grid; grid-template-columns: 1fr 640px; grid-template-rows: auto 1fr; gap: 24px 72px; padding-top: var(--cs-slide-pad) !important; }
.cs-slide.cs-verdict > .cs-eyebrow { grid-column: 1; align-self: end; }
.cs-slide.cs-verdict > h3 { grid-column: 1; grid-row: 2; font-size: 84px; line-height: 1; align-self: start; }
.cs-slide.cs-verdict > .cs-verdict-grid { grid-column: 2; grid-row: 1 / -1; grid-template-columns: 1fr; align-content: end; gap: 20px; }
.cs-slide.cs-verdict > p.cs-lede { grid-column: 1; grid-row: 3; }

/* before/after */
.cs-slide .cs-ba { flex: 1; min-height: 0; display: flex; flex-direction: column; }   /* v0.4.5: flex column + minmax row so tall (portrait) pairs scale to the frame instead of clipping */
.cs-slide .cs-ba-pair { grid-template-columns: 1fr 60px 1fr; grid-template-rows: 1fr; flex: 1; min-height: 0; align-items: stretch; gap: 20px; }
.cs-slide .cs-ba-pair .cs-fig { display: flex !important; }
.cs-slide .cs-ba-arrow { display: grid; place-items: center; font: 400 56px/1 var(--cs-font-display); color: var(--cs-accent); }

/* journey: swimlanes */
/* R7 (v0.5.0): lanes size to their steps (subgrid keeps the lane labels on the same rows) and the block centres in the space under the head */
.cs-slide .cs-journey-wrap { display: grid; grid-template-columns: 170px 1fr; grid-template-rows: auto auto; row-gap: 28px; flex: none; margin-block: auto; }
.cs-slide .cs-lanes, .cs-slide .cs-journey-wrap > .cs-journey { grid-row: 1 / span 2; grid-template-rows: subgrid; }
.cs-slide .cs-lanes { display: grid; font: 600 16px/1.3 var(--cs-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--cs-muted); }
.cs-slide .cs-lanes span { padding-top: 22px; border-top: 1px solid var(--cs-rule); }
.cs-slide .cs-journey { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 16px; }
.cs-slide .cs-journey li { grid-row: 1; grid-template-columns: 1fr; align-content: start; padding: 22px 12px 0 0; }
.cs-slide .cs-journey li[data-actor="b"] { grid-row: 2; }
.cs-slide .cs-journey li::before { width: 40px; height: 40px; font-size: 18px; grid-row: auto; margin-bottom: 8px; }
.cs-slide .cs-journey .cs-actor { display: none; }
.cs-slide.cs-b--journey > .cs-fig { display: none; }

/* annotated */
.cs-slide .cs-annotated { grid-template-columns: 1fr 470px; gap: 48px; flex: 1; min-height: 0; align-items: center; }
.cs-slide .cs-pinned .cs-media { padding: 0; }
.cs-slide .cs-pinned img { width: 100%; max-height: none; }
.cs-slide .cs-pin, .cs-slide .cs-pin-notes li::before { width: 40px; height: 40px; font-size: 19px; }
.cs-slide .cs-pin-notes li { grid-template-columns: 40px 1fr; gap: 4px 18px; }
.cs-slide .cs-pin-notes { gap: 22px; }

/* gallery */
/* R5 (v0.5.0): one row, at most 3 per frame (present.js pages the rest; a landscape counts 1.5, a video takes the frame),
   the row never under 320px; video keeps 16:9 and shows its poster */
.cs-slide .cs-gallery { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-template-rows: minmax(320px, 1fr); overflow: visible; margin: 0; padding: 0; gap: 24px; flex: 1 1 auto; min-height: 0; }
.cs-slide .cs-gallery > .is-feature { grid-column: auto; grid-row: auto; }
.cs-slide .cs-gallery .cs-fig { display: flex; flex-direction: column; min-height: 0; }
.cs-slide .cs-gallery .cs-video { flex: 1 1 auto; min-height: 300px; container-type: size; display: grid; place-items: center; }
.cs-slide .cs-video-btn { width: min(100cqw, 100cqh * 16 / 9); height: auto; aspect-ratio: 16 / 9; }
.cs-slide .cs-gallery .cs-caption { font-size: 16px; }

/* outcome: inverse slide */
.cs-slide.cs-b--outcome { background: var(--cs-inverse-bg); color: var(--cs-inverse-text); padding: var(--cs-slide-pad) !important; border-radius: 0; }
.cs-slide.cs-b--outcome h2 { font-size: 84px; max-width: 18ch; }
.cs-slide.cs-b--outcome { justify-content: center; }   /* R7 */
.cs-slide .cs-results { margin-top: 48px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 40px; }
.cs-slide .cs-result { padding-top: 26px; gap: 14px; }

/* quote, reflection, appendix */
.cs-slide.cs-b--quote { justify-content: center; }
.cs-slide .cs-quote { max-width: 1200px; padding-left: 56px; border-left-width: 4px; }
.cs-slide.cs-b--reflection { justify-content: center; }
.cs-slide .cs-learnings { grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 16px; }
.cs-slide .cs-learnings li { grid-template-columns: 84px 1fr; }
.cs-slide .cs-learnings li::before { font-size: 64px; }
.cs-slide .cs-learnings h3 { font-size: 40px; }
.cs-slide.cs-appx-item { border: 0; }
.cs-slide.cs-appx-item > .cs-appx-sum { display: flex; gap: 18px; align-items: baseline; padding: 0; min-height: 0; pointer-events: none;
  font: 400 52px/1.05 var(--cs-font-display); letter-spacing: var(--cs-tracking-display); }
.cs-slide.cs-appx-item > .cs-appx-sum .cs-appx-id { font: 500 22px/1 var(--cs-font-mono); color: var(--cs-accent); }
.cs-slide .cs-appx-body { flex: 1; min-height: 0; padding: 0; display: flex; flex-direction: column; }
.cs-slide .cs-appx-body > .cs-fig { flex: 1; min-height: 0; }
.cs-slide .cs-appx-body .cs-grid-2 { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; grid-template-rows: minmax(0, 1fr); gap: 16px; flex: 1; min-height: 0; }   /* R6: one row (it was 2x2 with a blank row) */
.cs-slide .cs-appx-body .cs-grid-2 > .cs-fig, .cs-slide .cs-appx-body > .cs-fig { display: flex; flex-direction: column; }
.cs-slide.cs-appx-item { padding: 72px 72px var(--cs-slide-pad) !important; gap: 24px; }   /* R6: 72px sides so a 2-up is 2 x 700+ */
.cs-slide .cs-appx-body .cs-media { --csp-pad: 8px; }
.cs-slide .cs-appx-body:has(> .cs-fig + .cs-fig) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 24px; }   /* R6: figures side by side (2 per frame; present.js pages the rest) */
.cs-slide .cs-appx-body .cs-numbered { grid-template-columns: 1fr 1fr; gap: 22px 56px; }
.cs-slide .cs-appx-body .cs-numbered li { grid-template-columns: 44px 1fr; font-size: 25px; }

@media (prefers-reduced-motion: reduce) {
  .cs-b *, .cs-b *::before, .cs-b *::after { transition-duration: var(--about-reduced-transition, 1ms) !important; }
}

/* ==========================================================================
   v0.4 · Icons + sketches (Shah picked spots 1-7, Oct 29 2026 9:23am ET).
   Icons: Lucide (ISC, see icons/LICENSE-lucide.txt), one inline <symbol> sprite per page
   (icons/icons.svg, put inside the payload by the builder, so no extra request). Decorative
   icons are aria-hidden. Lists opt in with [data-icons]; sketches are .cs-sketch figures with a
   "Sketch · Illustrative" caption. No images, no animation, no blur.
   ========================================================================== */
/* ---- shared icon primitive: Lucide 24-grid, stroke matched to Geist 400 (~1.45px at 20px) ---- */
.cs-b .cs-ico, .cs-reader .cs-ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* 1 · TL;DR route sketch: before (phone) vs after (invite). Phone: two columns, top to bottom. Desktop: two rows, left to right. */
.cs-sketch { display: grid; gap: var(--cs-space-s); margin: 0; }
.cs-route-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cs-space-m); padding: var(--cs-space-m);
  border-radius: var(--cs-radius-card); background: var(--cs-surface); box-shadow: inset 0 0 0 1px var(--cs-rule); }
.cs-route-tag { font: 600 var(--cs-t-label)/1.2 var(--cs-font-ui); letter-spacing: var(--cs-tracking-label); text-transform: uppercase; color: var(--cs-muted); align-self: end; }
.cs-route--after .cs-route-tag { color: var(--cs-accent); }
.cs-route-pair { grid-template-rows: auto repeat(4, auto); row-gap: 22px; }   /* phone: subgrid keeps the two columns' boxes on the same rows */
.cs-route { display: grid; grid-row: 1 / span 5; grid-template-rows: subgrid; }
.cs-route ol { display: contents; list-style: none; margin: 0; padding: 0; }
.cs-route li { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px; min-height: 3.1rem;
  font: 500 var(--cs-t-small)/1.25 var(--cs-font-ui); color: var(--cs-text); background: var(--cs-bg);
  border: 1.5px solid currentColor; border-radius: 16px 11px 18px 10px / 11px 18px 10px 16px; }   /* uneven radii = hand-drawn box */
.cs-route li .cs-ico { width: 1.15rem; height: 1.15rem; }
.cs-route--before li { color: var(--cs-muted); border-style: dashed; }
.cs-route--before li span { color: var(--cs-text); }
.cs-route--after li { color: var(--cs-accent); }
.cs-route--after li span { color: var(--cs-text); }
.cs-route li + li::before { content: "↓"; position: absolute; left: 50%; top: -21px; transform: translateX(-50%);
  font: 500 15px/1 var(--cs-font-ui); color: currentColor; }
@container cs (min-width: 46rem) {
  .cs-b > .cs-sketch { grid-column: 1 / -1; }
  .cs-route-pair { grid-template-columns: 1fr; gap: var(--cs-space-l); padding: var(--cs-space-l) var(--cs-space-xl); }
  .cs-route-pair { grid-template-rows: none; }
  .cs-route { grid-row: auto; grid-template-rows: none; grid-template-columns: 9.5rem 1fr; align-items: center; }
  .cs-route-tag { margin: 0; }
  .cs-route ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
  .cs-route li + li::before { content: "→"; left: -23px; top: 50%; transform: translateY(-50%); }
}

/* 2 · Problem: pain icons replace the 01–04 counters (same grid cell, so no reflow) */
.cs-pains[data-icons] li::before { content: none; }
.cs-pains[data-icons] li > .cs-ico { grid-row: span 2; width: 1.4rem; height: 1.4rem; margin-top: 2px; color: var(--cs-accent); }

/* 3 · Audience: role icons inside the existing circles instead of "M" / "D" */
.cs-people[data-icons] .cs-mono .cs-ico { width: 1.35rem; height: 1.35rem; }

/* 4 · Process: one step icon above each step label */
.cs-timeline[data-icons] li > .cs-ico { width: var(--about-timeline-icon, 1.3rem); height: var(--about-timeline-icon, 1.3rem); color: var(--about-accent, var(--cs-accent)); margin-bottom: 2px; }

/* 5 · Constraints: rule icon takes the outlined-number slot (top right), so card height is unchanged */
.cs-rules[data-icons] li::after { content: none; }
.cs-rules[data-icons] li > .cs-ico { position: absolute; right: var(--cs-space-l); top: var(--cs-space-l); width: 1.75rem; height: 1.75rem; color: var(--cs-accent); stroke-width: 1.5; }

/* 6 · Competitive: two-circle sketch of the gap (control vs privacy) */
.cs-venn { display: grid; justify-items: center; padding: var(--cs-space-m) var(--cs-space-s) var(--cs-space-s); border-radius: var(--cs-radius-card);
  background: var(--cs-surface); box-shadow: inset 0 0 0 1px var(--cs-rule); }
.cs-venn svg { width: 100%; max-width: 34rem; height: auto; display: block; }
.cs-venn .v-ring { fill: none; stroke: var(--cs-text); stroke-width: 1.5; }
.cs-venn .v-ring--echo { stroke-opacity: .28; stroke-width: 1; }
.cs-venn .v-both { fill: var(--cs-accent); fill-opacity: .14; }
.cs-venn text { font-family: var(--cs-font-ui); font-size: 15px; fill: var(--cs-text); }
.cs-venn .v-head { font-weight: 600; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; fill: var(--cs-muted); }
.cs-venn .v-ours { font-weight: 600; fill: var(--cs-accent); }
.cs-venn .v-small { font-size: 13px; fill: var(--cs-muted); }
.cs-venn .v-dot { fill: var(--cs-bg); stroke: var(--cs-muted); stroke-width: 1.5; }
@container cs (min-width: 46rem) { .cs-b--compare > .cs-sketch { grid-column: 1 / -1; } }

/* 7 · Decision ledger: who-starts-it icon on each option's kind tag */
.cs-ledger[data-icons] .cs-kind { display: inline-flex; align-items: center; gap: 6px; }
.cs-ledger[data-icons] .cs-kind .cs-ico { width: 1.2rem; height: 1.2rem; }
/* Context facts: inner padding. The reset `.cs-b :is(dl,…){padding:0}` (0,1,1) beat the single-class .cs-facts padding, so values touched the card edge at 390. */
.cs-b .cs-facts { padding: var(--cs-space-m); }
/* Present: sketches are reader-only (the slide already shows the matrix / TL;DR text; keeps 1600x900 from overflowing) */
.cs-slide .cs-sketch { display: none !important; }

/* 3.11b ORIGINAL | POLISHED SKETCH TOGGLE · v0.4.8 (Shah 4:17pm Oct 29: "any original drawings hand drawn should probably stay too,
   maybe have a toggle: show original first, then hand-drawn polish"). Use wherever a polished redraw of a real hand drawing appears
   (first use: the chosen option card in 3.11 on easyyelp and podcast). Markup:
   .cs-sketch-toggle > .cs-sktg-ctrl (radio group: Original checked, Polished) + .cs-sktg-stack > figure.cs-fig.cs-sktg-orig + figure.cs-fig.cs-sktg-pol.
   No JS: the control stays hidden and both figures stack, Original first, each with its .cs-label. reader.js adds .is-live and
   data-show: both figures share one grid cell in a square box (no layout shift), opacity crossfade only, and the hidden one is
   inert, so zoom opens only the visible image. Present: the two sit side by side in the slot, labelled Original then Polished. */
.cs-sketch-toggle { display: grid; gap: var(--cs-space-s); min-width: 0; }
.cs-sktg-ctrl { display: none; }
.cs-sktg-stack { display: grid; gap: var(--cs-space-s); min-width: 0; }
.cs-sktg-stack > .cs-fig > .cs-label { order: -1; }
.cs-sktg-stack .cs-media { aspect-ratio: 1; }
.cs-sktg-stack .cs-media img { height: 100%; object-fit: contain; }
.cs-sketch-toggle.is-live .cs-sktg-ctrl { display: inline-flex; padding: 3px; gap: 2px; border: 0; margin: 0; border-radius: var(--cs-radius-pill); background: var(--cs-surface); box-shadow: inset 0 0 0 1px var(--cs-rule); justify-self: start; }
.cs-b .cs-sktg-ctrl label { position: relative; font: 600 var(--cs-t-label)/1 var(--cs-font-ui); padding: 8px 14px; min-height: 36px; display: inline-flex; align-items: center; border-radius: var(--cs-radius-pill); color: var(--cs-muted); cursor: pointer; }
.cs-sktg-ctrl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cs-b .cs-sktg-ctrl label:has(input:checked) { background: var(--cs-inverse-bg); color: var(--cs-inverse-text); }
.cs-b .cs-sktg-ctrl label:has(input:focus-visible) { box-shadow: var(--cs-focus); }
.cs-sketch-toggle.is-live .cs-sktg-stack > .cs-fig { grid-area: 1 / 1; transition: opacity var(--cs-dur-ui) var(--cs-ease-ui); }
.cs-sketch-toggle.is-live .cs-sktg-stack > .cs-fig > .cs-label { display: none; }
.cs-sketch-toggle.is-live:not([data-show="polished"]) .cs-sktg-pol,
.cs-sketch-toggle.is-live[data-show="polished"] .cs-sktg-orig { opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--cs-dur-ui) var(--cs-ease-ui), visibility 0s linear var(--cs-dur-ui); }
@media (prefers-reduced-motion: reduce) { .cs-sketch-toggle .cs-sktg-stack > .cs-fig { transition: none !important; } }
.cs-slide .cs-sktg-ctrl { display: none !important; }
.cs-slide .cs-sketch-toggle { flex: 1 1 auto; min-height: 0; }
.cs-slide .cs-sktg-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1 1 auto; }
.cs-slide .cs-opt .cs-sktg-stack > .cs-fig, .cs-slide .cs-sktg-stack > .cs-fig { grid-area: auto !important; opacity: 1 !important; visibility: visible !important; height: auto; min-height: auto; gap: 4px; display: flex; flex-direction: column; }
.cs-slide .cs-sktg-stack .cs-caption { display: none; }
.cs-slide .cs-sktg-stack .cs-media { --csp-pad: 4px; aspect-ratio: auto; flex: 1 1 auto; }
.cs-slide .cs-sktg-stack > .cs-fig > .cs-label { display: block !important; font-size: 16px; }   /* R9 (was 12px) */

/* ---------- 5. FIGURE SIZE CAPS (reader, desktop) · v0.4.9 ---------- */
/* Shared by every case page (Shah 5:40pm Oct 29: "in web some of the images are huge in web view make them better optimized").
   Reader only (.cs-flow; Present slides live outside it and keep their own fit rules). Phone (< 48em) is untouched: full width as before.
   From 48em up every figure image sizes to its own intrinsic width (its `sizes` slot, or its pixels when it has no srcset), never wider
   than its column or --cs-fig-max-w, and never taller than its cap. Aspect ratio is kept, the image is centered in its plate, nothing is
   cropped and nothing is stretched past its intrinsic size. Pinned screens shrink-wrap their plate so the % pins stay on target.
   Tokens (override per page or per figure with a custom property, e.g. style="--cs-fig-max-h: 48rem"):
     --cs-fig-max-h           any figure                                  min(75vh, 40rem)  = 640px at 1440×900
     --cs-fig-portrait-max-h  phone screens in a gallery,                 min(68vh, 34rem)  = 544px at 1440×900
                              or any .cs-fig--portrait (before/after pairs and pinned crops keep the 640 cap: full-length
                              screens get too narrow to read at 544)
     --cs-fig-small-max-h     .cs-fig--small (logos, identity marks)      min(56vh, 26rem)  = 416px at 1440×900
     --cs-hero-max-h          the cover image                             min(64vh, 36rem)  = 576px at 1440×900
     --cs-fig-max-w           any figure                                  64rem
     --cs-appx-max-w          single figures in "Additional material"    48rem (2-up grids keep the full column)
   Opt-out: .cs-fig--tall on a dense screenshot that is unreadable at the cap (raises it to min(92vh, 60rem)); use sparingly.
   Tokens sit on :root so a legacy case page without .cs-flow (turbotax, until its rebuild) can cap its own images with them. */
:root {
  --cs-fig-max-h: min(75vh, 40rem);
  --cs-fig-portrait-max-h: min(68vh, 34rem);
  --cs-fig-small-max-h: min(56vh, 26rem);
  --cs-hero-max-h: min(64vh, 36rem);
  --cs-fig-max-w: 64rem;
  --cs-appx-max-w: 48rem;
}
@media (min-width: 48em) {
  .cs-flow .cs-fig > .cs-media img { width: auto; max-width: min(100%, var(--cs-fig-max-w)); max-height: var(--cs-fig-max-h); object-fit: contain; margin-inline: auto; }
  .cs-flow .cs-gallery > .cs-fig:not(.is-feature) > .cs-media img,
  .cs-flow .cs-fig--portrait > .cs-media img { max-height: var(--cs-fig-portrait-max-h); }
  .cs-flow .cs-fig--small > .cs-media img { max-height: var(--cs-fig-small-max-h); }
  .cs-flow .cs-cover-media > .cs-media img { max-height: var(--cs-hero-max-h); }
  .cs-flow .cs-fig.cs-fig--tall.cs-fig--tall > .cs-media img { max-height: min(92vh, 60rem); }   /* class doubled: outranks the gallery rule */
  .cs-flow .cs-pinned > .cs-media { width: fit-content; max-width: 100%; margin-inline: auto; }   /* plate hugs the image: pins are % of it */
  .cs-flow .cs-sktg-stack .cs-media { max-height: var(--cs-fig-max-h); }   /* the square sketch box; img is height:100% + contain inside it */
  .cs-flow .cs-appx-body > .cs-fig { max-width: var(--cs-appx-max-w); }   /* single appendix figures only: a 2-up .cs-grid-2 keeps the full column, or each half gets too small to read */
}

/* ---------- 6. PRESENT SLIDE LAYOUT RULES · v0.5.0 ----------
   Shah 7:39pm / 7:40pm Oct 29: "make sure in presentation modes the slides actually turn out good and good imagery
   and good layout" / "create rules so they fix universally". These hold for every deck built from a reader page:
     R1  images keep a floor: a lone figure >= 520x300 stage px or 18% of the frame, phone screens 300px tall,
         option-card sketches 220px; logos are exempt. A full slide trims its type first (data-fit), then splits.
     R2  slides without a figure use the full width (one column up to 1100px, or two balanced columns).
     R3  present.js splits a frame that still overflows at fit 3, or that has more than 120 words.
     R4  a dense screenshot (natural width 1200+ shown under 60%, or [data-dense]) gets an image-only frame after it.
     R5  galleries: max 3 per frame, rows >= 320px, video 16:9 with a poster.   R6  additional material: 1 figure, or 2 at 700px+.
     R7  no empty band over 160px (process, outcome, flow centre their content).   R8  content stays inside the slide padding.
     R9  text >= 16px (body 19px at the tightest fit).   R10 balanced headings.   R11 the cover image is never cut.
     R12 (present.css/js) the frame fills ~96% of the screen; the toolbar hides while the pointer is idle.
   Checked by tools/present_lint.py (private tools folder). */
/* pinned (annotated) screens keep their in-flow image: the pins are % of the plate */
.cs-slide .cs-pinned .cs-media { --csp-pad: 0px; flex: none; min-height: 0; }
.cs-slide .cs-pinned .cs-media img { position: static; width: 100%; height: auto; }
.cs-slide .cs-pinned .cs-crop img { position: static; }
.cs-slide .cs-pin-notes { gap: 18px; }
.cs-slide .cs-pin-notes p { font-size: 19px; }
.cs-slide .cs-annotated { grid-template-columns: minmax(0, 1fr) 480px; }

/* page counter on a frame present.js paged (gallery, competitors, additional material) */
.cs-pageno { margin-left: 14px; font: 500 16px/1 var(--cs-font-mono); letter-spacing: 0; color: var(--cs-muted); text-transform: none; }

/* video poster (reader and slide): a still from the video under the play button */
.cs-video-btn .cs-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.cs-video-btn:has(.cs-video-poster)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 45%); pointer-events: none; }
.cs-video-btn .cs-play { position: relative; z-index: 1; }
.cs-video-btn .cs-video-title { z-index: 1; }
.cs-video-btn:has(.cs-video-poster) .cs-video-title { color: #fff; }
.cs-slide .cs-video-btn .cs-video-poster.is-loaded, .cs-slide .cs-video-btn .cs-video-poster { opacity: 1; }

/* R3 split: the competitor gap as its own statement frame */
.cs-slide.cs-slide--statement { justify-content: center; }
.cs-slide.cs-slide--statement > .cs-gap { display: grid; gap: 22px; padding: 56px 64px; max-width: 1240px; grid-template-columns: 1fr; }
.cs-slide.cs-slide--statement > .cs-gap h3 { font-size: 60px; line-height: 1.08; max-width: 24ch; }
.cs-slide.cs-slide--statement > .cs-gap p { font-size: 28px; line-height: 1.45; max-width: 60ch; }
/* R3 split, the second half: the head without its lede */
.cs-slide.is-cont > .cs-b-head .cs-lede { display: none; }
.cs-slide.cs-b--compare:not(:has(> .cs-gap)) .cs-matrix-wrap { grid-column: 1 / -1; }

/* R4: image-only frame (the figure big, with its caption) */
.cs-slide.cs-slide--image { padding: 48px 56px 40px !important; gap: 0; justify-content: center; }
.cs-slide.cs-slide--image > .cs-fig { flex: 1 1 0; display: flex; flex-direction: column; gap: 14px; }
.cs-slide.cs-slide--image > .cs-fig > .cs-media { --csp-pad: 0px; background: none; box-shadow: none; border-radius: 0; }
.cs-slide.cs-slide--image > .cs-fig > .cs-media img { border-radius: 10px; }
.cs-slide.cs-slide--image .cs-caption { font-size: 18px; text-align: center; }

/* R1: portrait screens in a lone figure (gallery pages, before/after) get a taller floor when the frame allows */
.cs-slide .cs-ba-pair .cs-media { --csp-img-min: 300px; }
.cs-slide .cs-sktg-stack .cs-media img { height: calc(100% - 2 * var(--csp-pad)); }   /* the reader's height:100% would push the sketch past its plate */
.cs-slide .cs-behave .cs-fig[data-shape="p"] .cs-media { --csp-img-min: 300px; }   /* R1: a phone screen in a competitor card keeps the 300px floor */
/* R8: a comparison table with four or more rows uses tighter rows, so the table fits before the type shrinks */
.cs-slide.cs-b--compare .cs-matrix:has(tbody tr:nth-child(4)) :is(th, td) { padding-block: 12px; }
.cs-slide.cs-b--compare:not(:has(> .cs-gap)) > .cs-b-head .cs-lede { max-width: 64ch; }   /* the table spans the frame: so can its one-line lede */
.cs-slide.cs-b--behavior .cs-behave-list:not(:has(> .cs-behave:nth-child(3))) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }   /* a paged pair: two wide cards */
.cs-slide.cs-b--behavior .cs-behave-list:not(:has(> .cs-behave:nth-child(2))) { grid-auto-columns: minmax(0, 760px); }   /* the last card on its own stays card-sized */

/* ---------- 7. ROLE AND PROCESS, ONE SECTION · v0.5.1 ----------
   The role block and the process block were two slides saying the same thing. One section now: the timeline,
   then who I worked with and the tools in one row under it. */
@container cs (min-width: 46rem) {
  .cs-b--process > .cs-credits { grid-column: 1 / -1; }
  .cs-credits--row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); column-gap: var(--cs-space-xl); }
  .cs-credits--row > div { grid-template-columns: none; gap: 6px; }
  .cs-credits--row dt { padding-top: 0; }
}
.cs-b--process > .cs-credits--row { margin-top: var(--cs-space-l); }
.cs-slide .cs-credits--row { margin-top: 28px; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); column-gap: 56px; }
.cs-slide .cs-credits--row > div { grid-template-columns: none; gap: 6px; padding: 14px 0; }

/* R7 (v0.5.1): the last competitor card on its own frame sits beside the takeaway, not above a half-empty row */
.cs-slide.cs-b--behavior:has(> .cs-behave-take):not(:has(.cs-behave-list > .cs-behave:nth-child(2))) { grid-template-columns: minmax(0, 760px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 40px; }
.cs-slide.cs-b--behavior:has(> .cs-behave-take):not(:has(.cs-behave-list > .cs-behave:nth-child(2))) > .cs-b-head { grid-column: 1 / -1; }
.cs-slide.cs-b--behavior:has(> .cs-behave-take):not(:has(.cs-behave-list > .cs-behave:nth-child(2))) > .cs-behave-list { grid-column: 1; grid-row: 2; grid-auto-columns: minmax(0, 1fr); }
.cs-slide.cs-b--behavior:has(> .cs-behave-take):not(:has(.cs-behave-list > .cs-behave:nth-child(2))) > .cs-behave-take { grid-column: 2; grid-row: 2; align-self: center; grid-template-columns: none; row-gap: 14px; padding: 28px 32px; }
/* the timeline steps start on one line whatever their heading length */
.cs-slide .cs-timeline li { align-content: start; }
/* R3 (v0.5.1): a full-width comparison of four or more rows puts its lede beside the heading, so the table keeps
   body-size type instead of shrinking to fit (Stealth's competitor table went to fit 3 for 45px) */
.cs-slide.cs-b--compare:not(:has(> .cs-gap)):has(.cs-matrix tbody tr:nth-child(4)) > .cs-b-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: end; }
.cs-slide.cs-b--compare:not(:has(> .cs-gap)):has(.cs-matrix tbody tr:nth-child(4)) > .cs-b-head > .cs-eyebrow { grid-column: 1 / -1; }
.cs-slide.cs-b--compare:not(:has(> .cs-gap)):has(.cs-matrix tbody tr:nth-child(4)) > .cs-b-head > .cs-lede { grid-column: 2; margin: 0; padding-bottom: 6px; }
/* R7 (v0.5.1): the decision slide stacks its heading and hypothesis in the middle, not 200px apart */
.cs-slide.cs-verdict { grid-template-rows: auto auto auto; align-content: center; }
.cs-slide.cs-verdict > .cs-verdict-grid { align-content: center; align-self: center; }
/* R1/R7 (v0.5.1): a slide's one figure takes the height left under the heading, so the picture grows instead of
   leaving an empty band under it (Stealth's two-step quiz stayed at the 300px floor with 340px free below) */
.cs-slide:not(:has(> .cs-fig ~ .cs-fig)) > .cs-fig { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* case studies · video poster cap (review fix 9, Shah 3:27pm): the only poster source is 731px wide (no larger original exists), so from
   48em up the poster figure stops at its native width and centers instead of stretching to the 1040px column. Phone untouched. */
@media (min-width: 48em) {
  .cs-flow .cs-fig.is-feature:has(.cs-video-poster) { width: 100%; max-width: 731px; margin-inline: auto; }
}

/* case studies · lone last item in 2-column grids (review fix 11, Shah 3:27pm). Reader only (.cs-flow); Present slides keep their own fit rules.
   3-item lists (and a feature + 3 gallery) go to 3 columns once the reader column is 60rem+ (the 1440 layout); any other odd count lets the last item take the whole row (gallery: centered at one column's width). */
@container cs (min-width: 46rem) {
  .cs-flow .cs-pains > li:last-child:nth-child(odd),
  .cs-flow .cs-rules > li:last-child:nth-child(odd),
  .cs-flow .cs-learnings > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cs-flow .cs-gallery > :not(.is-feature):last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--cs-space-l)) / 2); }
  .cs-flow .cs-gallery:has(> .is-feature:first-child) > :not(.is-feature):last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
  .cs-flow .cs-gallery:has(> .is-feature:first-child) > :not(.is-feature):last-child:nth-child(even) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--cs-space-l)) / 2); }
}
@container cs (min-width: 60rem) {
  .cs-flow .cs-learnings:has(> li:nth-child(3):last-child),
  .cs-flow .cs-rules:has(> li:nth-child(3):last-child),
  .cs-flow .cs-gallery:has(> .is-feature:first-child):has(> :nth-child(4):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-flow .cs-learnings:has(> li:nth-child(3):last-child) > li:last-child,
  .cs-flow .cs-rules:has(> li:nth-child(3):last-child) > li:last-child,
  .cs-flow .cs-gallery:has(> .is-feature:first-child):has(> :nth-child(4):last-child) > :last-child { grid-column: auto; justify-self: stretch; width: auto; }
}

/* case studies · top-aligned row items (review fix 12, Shah 3:27pm): items in one row start at the same top line instead of
   spreading their text over the tallest neighbour's height (process steps, Why / What I gave up, Sketch / App captions, rule titles). Reader only. */
.cs-flow .cs-timeline > li,
.cs-flow .cs-verdict-grid > div,
.cs-flow .cs-rules > li { align-content: start; }
@container cs (min-width: 46rem) {
  .cs-flow .cs-ba-pair { align-items: start; }
  .cs-flow .cs-ba-pair > .cs-ba-arrow { align-self: center; }
}

/* case studies · decision block spacing (review fix 13, Shah 3:27pm): the Why / What I gave up pair spans the title and lede rows,
   so the lede sits right under the title instead of below the taller pair (~150px gap at 1440). Reader only. */
@container cs (min-width: 46rem) {
  .cs-flow .cs-verdict > h3 { grid-column: 1; grid-row: 2; }
  .cs-flow .cs-verdict > .cs-verdict-grid { grid-column: 2; grid-row: 2 / span 2; }
  .cs-flow .cs-verdict > .cs-lede { grid-column: 1; grid-row: 3; }
}

/* case studies · Easy Yelp test-session poster with the real QR code (review fix 14, Shah 3:27pm): capped at 40rem (640px) and centered
   on desktop so the poster does not fill the 1040px column; the QR stays the real, scannable code. Phone untouched. */
@media (min-width: 48em) {
  .cs-flow .cs-fig--qr { width: 100%; max-width: 40rem; margin-inline: auto; }
}

/* case studies · hyphenated words in headings (review fix 17, Shah 3:27pm): compounds such as "distraction-free" are wrapped in
   .cs-nobr in the markup so a heading never breaks at the hyphen; text-wrap: balance on the headings is unchanged. */
.cs-nobr { white-space: nowrap; }