/* Case study pages. Builds on css/site.css.
   Page anatomy: .nav (case variant) → .cs-hero (opening) → .cs-body (sticky .cs-toc + .cs-article of .chapter sections) → .cs-next
   Spacing: margins, padding, and gaps use the --space-* scale in site.css. A few values stay as exact px or vh on purpose
   (each marked with a comment): the route's alignment offsets, the hero's height-based spacing, and the column gap.
   Components: .prose, .pull, .callout (.decision / .tradeoff / .before), .detour, .toggle, .media, .flow, .qgrid,
               .results, .shipped, .lessons, details.deep, .proto, .status chips, .cs-diagram */

/* ---------- Nav (case variant) ---------- */
.nav-case-title { position: absolute; left: 50%; transform: translate(-50%, 6px); opacity: 0; transition: opacity 0.35s, transform 0.5s var(--ease); white-space: nowrap; font-size: 0.9rem; color: var(--ink-2); pointer-events: none; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }
.nav-case-title .mono { color: var(--accent-ink); margin-right: var(--space-8); }
.nav.is-scrolled .nav-case-title { opacity: 1; transform: translate(-50%, 0); }
/* Once scrolled, the case title takes the centre of the nav and the links step aside (they return on hover or focus). */
.nav-case-title ~ nav .nav-links { transition: opacity 0.3s ease; }
@media (min-width: 1101px) {
  .nav.is-scrolled .nav-case-title ~ nav .nav-links { opacity: 0; pointer-events: none; }
  .nav.is-scrolled:hover .nav-case-title, .nav.is-scrolled:focus-within .nav-case-title { opacity: 0; }
  .nav.is-scrolled:hover .nav-case-title ~ nav .nav-links, .nav.is-scrolled:focus-within .nav-case-title ~ nav .nav-links { opacity: 1; pointer-events: auto; }
}
@media (max-width: 1100px) { .nav-case-title { display: none; } }

/* ---------- Opening ---------- */
/* The hero's spacing scales with the screen's height (vh), so it fits on screen; it stays as written, off the scale. */
.cs-hero { padding-top: calc(var(--nav-h) + clamp(40px, 7vh, 96px)); }
.cs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-16); margin-bottom: clamp(22px, 3vh, 34px); }
.cs-crumbs a { text-decoration: none; color: var(--muted); }
.cs-crumbs a:hover { color: var(--ink); }
.cs-hero h1 { max-width: 13.5em; }
.cs-hero .lead { margin-top: clamp(20px, 3vh, 32px); max-width: 46ch; }
.cs-facts { margin: clamp(36px, 5vh, 56px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-24) var(--space-fluid-lg); border-top: 1px solid var(--line-strong); padding-top: var(--space-24); }
.cs-facts dt { color: var(--muted); }
.cs-facts dd { margin: var(--space-8) 0 0; font-size: 0.95rem; line-height: 1.45; color: var(--ink); }
.cs-facts dd small { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
@media (max-width: 860px) { .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cs-outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin-top: clamp(40px, 6vh, 72px); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.cs-outcome { padding: var(--space-fluid-md); border-right: 1px solid var(--line); }
.cs-outcome:last-child { border-right: 0; }
.cs-outcome .num { font-size: clamp(3rem, 5.4vw, 5rem); display: block; color: var(--ink); }
.cs-outcome .num.word { font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 380; }
.cs-outcome p { margin-top: var(--space-12); font-size: 0.93rem; color: var(--ink-2); max-width: 30ch; }
.cs-outcome .src { display: block; margin-top: var(--space-8); color: var(--muted); }
@media (max-width: 720px) { .cs-outcome { border-right: 0; border-bottom: 1px solid var(--line); } .cs-outcome:last-child { border-bottom: 0; } }

.cs-hero-visual { margin: clamp(40px, 6vh, 72px) auto 0; }
/* The hero visual grows from an inset card to full width as it scrolls in (js/case.js sets --hv from 0 to 1). */
@media (prefers-reduced-motion: no-preference) {
  .js .cs-hero-visual { transform: scale(calc(0.88 + 0.12 * var(--hv, 1))); transform-origin: 50% 0; will-change: transform; }
  .js .cs-hero-visual .panel img { transform: translateY(calc((1 - var(--hv, 1)) * 40px)); }
}
.cs-hero-visual .panel { padding: var(--space-fluid-2xl) var(--space-fluid-2xl) 0; background: linear-gradient(170deg, var(--paper-2), var(--paper-3)); }
.cs-hero-visual img { width: 100%; max-width: 1280px; margin-inline: auto; }

/* ---------- Body: chapter rail + article ---------- */
/* The column gap stays as it was (not a scale step): it decides where the article sits relative to the screen's centre. */
.cs-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); padding-block: var(--space-section-md) var(--space-40); }
.cs-toc { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; max-height: calc(100vh - var(--nav-h) - 64px); overflow: auto; scrollbar-width: none; }
.cs-toc::-webkit-scrollbar { display: none; }
.cs-toc p { color: var(--muted); margin-bottom: var(--space-16); }
/* The route's offsets below are alignment geometry, not spacing rhythm: the dots, line, and plane are positioned
   against them (a::before left/top, ol::before left, js/case.js offsetTop + 12), so they stay as exact px. */
.cs-toc ol { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.cs-toc ol::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--line-strong); }
.cs-toc .toc-fill { position: absolute; left: 4px; top: 6px; width: 1px; height: calc(100% - 12px); background: var(--accent); transform-origin: top; transform: scaleY(var(--tp, 0)); }
.cs-toc .toc-plane { position: absolute; left: -4px; top: 6px; width: 18px; height: 18px; color: var(--accent); transform: translateY(calc(var(--tp-px, 0px) - 50%)); transition: transform 0.15s linear; }
.cs-toc li { position: relative; }
.cs-toc a { display: block; padding: 6px 0; font-size: 0.86rem; line-height: 1.35; color: var(--muted); text-decoration: none; transition: color 0.2s, transform 0.4s var(--ease); }
.cs-toc a::before { content: ""; position: absolute; left: -21px; top: 12px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--accent); background: var(--paper); transition: background-color 0.3s; }
.cs-toc a.is-past::before, .cs-toc a.is-current::before { background: var(--accent); }
.cs-toc a.is-current { color: var(--ink); transform: translateX(3px); }
.cs-toc a:hover { color: var(--ink); }
.cs-toc .toc-proto { margin-top: var(--space-24); padding-left: 22px; }
@media (max-width: 1080px) {
  .cs-body { grid-template-columns: 1fr; }
  .cs-toc { display: none; }
}

.cs-article { min-width: 0; max-width: 1040px; }
.chapter { padding-block: var(--space-section-sm); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + var(--space-16)); }
.chapter:first-child { border-top: 0; padding-top: 0; }
.chapter-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); margin-bottom: var(--space-fluid-lg); max-width: 760px; }
.chapter-head .mono { color: var(--accent-ink); display: flex; gap: var(--space-12); align-items: center; }
.chapter-head .mono::after { content: ""; height: 1px; width: 40px; background: currentColor; opacity: 0.5; }
.chapter-head .h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); }
.chapter-head .kicker { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.5; max-width: 52ch; }
.sub { margin-top: var(--space-section-sm); }
.sub > .h3 { margin-bottom: var(--space-16); max-width: 26em; }

/* ---------- Prose ---------- */
.prose { max-width: 680px; color: var(--ink-2); font-size: 1.07rem; line-height: 1.72; }
.prose > * + * { margin-top: 1.05em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--accent); }
.prose h3 { font-family: var(--f-body); font-size: 1.1rem; font-weight: 600; color: var(--ink); margin-top: 2em; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-fluid-xl); align-items: start; }
.two-col > .prose { max-width: none; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }
.gap-top { margin-top: var(--space-fluid-xl); }

/* ---------- Quotes ---------- */
.pull { margin: var(--space-fluid-2xl) 0; padding-left: var(--space-fluid-lg); border-left: 2px solid var(--accent); max-width: 820px; }
.pull p { font-family: var(--f-display); font-size: clamp(1.45rem, 2.5vw, 2.2rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); font-weight: 360; text-wrap: balance; }
.pull.is-quote p::before { content: "“"; color: var(--accent); }
.pull.is-quote p::after { content: "”"; color: var(--accent); }
.pull cite { display: block; margin-top: var(--space-16); font-style: normal; color: var(--muted); }
.insight { margin: var(--space-fluid-2xl) 0; padding: var(--space-fluid-xl); border-radius: var(--radius-lg); }
.insight .mono { color: var(--accent-ink); }
.insight p.big { font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.22; letter-spacing: -0.015em; margin-top: var(--space-16); max-width: 30ch; color: var(--ink); font-weight: 360; }
.insight p.big + p { margin-top: var(--space-16); color: var(--ink-2); max-width: 60ch; }

/* ---------- Callouts ---------- */
.callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-16); margin-top: var(--space-24); }
.callout { border-radius: var(--radius); padding: var(--space-20) var(--space-24); border: 1px solid var(--line); background: var(--card); font-size: 0.96rem; color: var(--ink-2); line-height: 1.6; }
.callout .mono { display: flex; align-items: center; gap: var(--space-8); color: var(--muted); margin-bottom: var(--space-8); }
.callout .mono::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-2); background: var(--faint); }
.callout.decision { background: var(--ink); color: color-mix(in srgb, var(--paper) 82%, transparent); border-color: var(--ink); }
.callout.decision .mono { color: var(--paper); }
.callout.decision .mono::before { background: var(--accent); border-radius: 50%; }
.callout.tradeoff .mono::before { background: none; border: 1px solid var(--accent); transform: rotate(45deg); }
.callout.before .mono::before { background: var(--faint); }
.callout b, .callout strong { color: inherit; font-weight: 600; }
.callout.decision b { color: var(--paper); }
.callout h4 { font-size: 1rem; color: var(--ink); margin: 0 0 var(--space-8); font-weight: 600; }
.callout.decision h4 { color: var(--paper); }

/* ---------- Detour: an alternative explored and why we turned back ---------- */
.detour { margin-top: var(--space-fluid-2xl); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: var(--space-fluid-lg); position: relative; }
.detour-head { display: flex; align-items: center; gap: var(--space-16); margin-bottom: var(--space-16); flex-wrap: wrap; }
.detour-head svg { flex: none; color: var(--accent); }
.detour-head .h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.detour-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-fluid-lg); align-items: start; }
.detour-why { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-16); }
.detour-why li { font-size: 0.95rem; color: var(--ink-2); padding-left: var(--space-24); position: relative; line-height: 1.55; }
.detour-why li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 1.5px; background: var(--accent); }
.detour-why li b { color: var(--ink); display: block; }
.detour .callout.decision { margin-top: var(--space-16); }
@media (max-width: 860px) { .detour-grid { grid-template-columns: 1fr; } }

/* ---------- Media ---------- */
.media { margin: var(--space-fluid-xl) 0 0; }
.media-frame { border-radius: var(--radius-lg); background: var(--paper-2); padding: var(--space-fluid-lg); overflow: hidden; position: relative; }
.media-frame.bare { padding: 0; background: none; }
.media-frame.tight { padding: var(--space-fluid-xs); }
.media-frame img, .media-frame video { width: 100%; border-radius: var(--radius-4); }
.media-frame.flat img, .media-frame.flat video { border-radius: 0; }
.media-frame .shot { box-shadow: var(--shadow); border: 1px solid var(--line); background: #fff; }
.media figcaption { margin-top: var(--space-16); font-size: 0.86rem; color: var(--muted); max-width: 70ch; display: flex; gap: var(--space-12); align-items: baseline; }
.media figcaption .mono { color: var(--accent-ink); flex: none; }
.media-row { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: var(--space-16); }
@media (max-width: 760px) { .media-row { grid-template-columns: 1fr; } }
.media .chip { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--paper); }
.media-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-fluid-xl); align-items: center; margin-top: var(--space-fluid-xl); }
.media-split .media { margin: 0; }
.media-split.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.media-split.flip > :first-child { order: 2; }
@media (max-width: 860px) { .media-split, .media-split.flip { grid-template-columns: 1fr; } .media-split.flip > :first-child { order: 0; } }

/* ---------- Toggle figure: segmented control over stacked images ---------- */
.toggle { margin-top: var(--space-fluid-xl); }
.toggle-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); flex-wrap: wrap; margin-bottom: var(--space-16); }
.seg { display: inline-flex; padding: var(--space-4); border-radius: var(--radius-pill); background: var(--paper-2); border: 1px solid var(--line); position: relative; isolation: isolate; }
.seg button { border: 0; background: none; height: 34px; padding: 0 var(--space-16); border-radius: var(--radius-pill); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); position: relative; z-index: 1; transition: color 0.3s; }
.seg button[aria-pressed="true"] { color: var(--paper); }
.seg .seg-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: var(--radius-pill); background: var(--ink); transition: transform 0.5s var(--ease), width 0.5s var(--ease); }
.toggle-hint { font-size: 0.8rem; color: var(--muted); }
.toggle-stage { position: relative; display: grid; }
.toggle-stage > * { grid-area: 1 / 1; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), filter 0.5s; }
.toggle-stage > [hidden] { display: block !important; opacity: 0; pointer-events: none; transform: scale(0.985); filter: blur(4px); }
html:not(.js) .toggle-bar { display: none; }

/* ---------- Flow (steps) ---------- */
.flow { list-style: none; padding: 0; margin: var(--space-fluid-lg) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-12) 0; align-items: stretch; counter-reset: f; }
.flow li { display: flex; align-items: center; font-size: 0.92rem; }
.flow li span { display: inline-flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); border-radius: var(--radius-4); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); line-height: 1.3; }
.flow li span::before { counter-increment: f; content: counter(f, decimal-leading-zero); font-family: var(--f-mono); font-size: 10px; color: var(--accent-ink); }
.flow li + li::before { content: ""; width: 22px; height: 1px; background: var(--accent); margin: 0 var(--space-4); flex: none; }
.flow.is-concept li span { border-style: dashed; }
.flow.compact li span::before { display: none; }

/* ---------- Question / insight grids ---------- */
.qgrid { list-style: none; padding: 0; margin: var(--space-fluid-lg) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-12); }
.qgrid li { padding: var(--space-16) var(--space-20); border-radius: var(--radius); background: var(--paper-2); font-size: 0.95rem; line-height: 1.5; color: var(--ink); }
.qgrid li .mono { display: block; color: var(--accent-ink); margin-bottom: var(--space-8); }
.qgrid.is-big li { font-family: var(--f-display); font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -0.01em; line-height: 1.3; padding: var(--space-24); }

/* ---------- Results ---------- */
.results { display: grid; gap: var(--space-16); margin-top: var(--space-fluid-lg); }
.result { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: var(--space-fluid-lg); padding: var(--space-fluid-lg); border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); align-items: center; }
.result .num { font-size: clamp(3.4rem, 6vw, 5.6rem); color: var(--ink); }
.result .num.word { font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.05; letter-spacing: -0.02em; }
.result .label { margin-top: var(--space-8); font-weight: 600; color: var(--ink); }
.result .src { margin-top: var(--space-8); display: block; color: var(--muted); }
.chain { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-12); }
.chain li { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-12); font-size: 0.93rem; color: var(--ink-2); line-height: 1.5; }
.chain li .mono { color: var(--muted); padding-top: 3px; }
.chain li:last-child .mono { color: var(--accent-ink); }
@media (max-width: 760px) { .result { grid-template-columns: 1fr; } .chain li { grid-template-columns: 80px 1fr; } }

.shipped { list-style: none; padding: 0; margin: var(--space-fluid-lg) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-12); }
.shipped li { padding: var(--space-16) var(--space-20); border-radius: var(--radius); border: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-2); line-height: 1.5; }
.shipped li b { display: flex; align-items: center; gap: var(--space-8); color: var(--ink); margin-bottom: var(--space-4); }
.shipped li b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3E9A5E; flex: none; }

.lessons { list-style: none; padding: 0; margin: var(--space-fluid-lg) 0 0; counter-reset: l; display: grid; gap: 0; }
.lessons li { counter-increment: l; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-16); padding: var(--space-24) 0; border-top: 1px solid var(--line); }
.lessons li:last-child { border-bottom: 1px solid var(--line); }
.lessons li::before { content: counter(l, decimal-leading-zero); font-family: var(--f-display); font-size: 2rem; line-height: 1; color: var(--accent-ink); font-weight: 340; }
.lessons h3 { font-family: var(--f-display); font-size: clamp(1.25rem, 1.8vw, 1.55rem); letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); font-weight: 400; }
.lessons p { margin-top: var(--space-8); color: var(--ink-2); max-width: 64ch; font-size: 0.98rem; }

/* ---------- Progressive disclosure ---------- */
details.deep { margin-top: var(--space-24); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
details.deep summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); padding: var(--space-16) var(--space-20); font-weight: 600; font-size: 0.95rem; }
details.deep summary::-webkit-details-marker { display: none; }
details.deep summary .mono { color: var(--accent-ink); font-weight: 500; margin-right: var(--space-12); }
details.deep summary::after { content: ""; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform 0.35s var(--ease); flex: none; }
details.deep[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
details.deep .deep-body { padding: 0 var(--space-20) var(--space-20); color: var(--ink-2); font-size: 0.96rem; }
details.deep .deep-body > * + * { margin-top: 0.8em; }

/* ---------- Diagrams (inline SVG) ---------- */
.cs-diagram { margin: var(--space-fluid-xl) 0 0; padding: var(--space-fluid-lg); border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.cs-diagram svg { width: 100%; height: auto; overflow: visible; }
.cs-diagram figcaption { margin-top: var(--space-16); font-size: 0.86rem; color: var(--muted); }
.dg-node { fill: var(--card); stroke: var(--line-strong); stroke-width: 1; }
.dg-node.ink { fill: var(--ink); stroke: var(--ink); }
.dg-node.soft { fill: var(--paper-2); stroke: var(--line); }
.dg-node.accent { fill: var(--accent-soft); stroke: var(--accent); }
.dg-node.dashed { stroke-dasharray: 4 4; }
.dg-t { font-family: var(--f-body); font-size: 13px; fill: var(--ink); }
.dg-t.b { font-weight: 600; }
.dg-t.on-ink { fill: var(--paper); }
.dg-t.m { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; fill: var(--muted); text-transform: uppercase; }
.dg-t.acc { fill: var(--accent-ink); }
.dg-edge { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.dg-edge.muted { stroke: var(--line-strong); }
.dg-edge.dashed { stroke-dasharray: 4 5; }
@media (prefers-reduced-motion: no-preference) {
  .js .cs-diagram[data-draw] .dg-edge { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.6s var(--ease); transition-delay: calc(0.2s + var(--i, 0) * 0.12s); }
  .js .cs-diagram[data-draw] .dg-edge.dashed { stroke-dasharray: 4 5; stroke-dashoffset: 0; opacity: 0; transition: opacity 0.8s ease; transition-delay: calc(0.4s + var(--i, 0) * 0.12s); }
  .js .cs-diagram[data-draw] .dg-pop { opacity: 0; transform: translateY(8px); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--i, 0) * 0.1s); }
  .js .cs-diagram[data-draw].is-in .dg-edge { stroke-dashoffset: 0; opacity: 1; }
  .js .cs-diagram[data-draw].is-in .dg-pop { opacity: 1; transform: none; }
}

/* ---------- Status chips ---------- */
.status { display: inline-flex; align-items: center; gap: var(--space-8); height: 24px; padding: 0 var(--space-12); border-radius: var(--radius-pill); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; vertical-align: middle; border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--paper); white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3E9A5E; }
.status.concept { border-style: dashed; border-color: var(--accent); color: var(--accent-ink); }
.status.concept::before { background: none; border: 1px solid var(--accent); }
.status.before::before { background: var(--faint); }
.status.demo::before { background: var(--accent); }

/* ---------- Clickable prototype ---------- */
.proto { margin-top: var(--space-fluid-lg); }
.proto-frame { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-lg); }
.proto-frame.phone { aspect-ratio: 410 / 844; max-width: 380px; margin-inline: auto; }
.proto-frame iframe { max-width: none; position: absolute; top: 0; left: 0; border: 0; display: block; transform-origin: 0 0; }
.proto-spin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-12); background: var(--card); transition: opacity 0.3s ease, visibility 0.3s ease; color: var(--muted); }
.proto-spin i { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.proto-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); flex-wrap: wrap; margin-bottom: var(--space-16); }

/* ---------- Next case study ---------- */
.cs-next { display: block; text-decoration: none; padding-block: var(--space-section-lg); overflow: clip; position: relative; }
.cs-next .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--space-fluid-2xl); align-items: center; }
.cs-next .h1 { margin-top: var(--space-16); transition: color 0.4s; }
.cs-next:hover .h1 { color: var(--accent-ink); }
.cs-next .next-img { border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); padding: var(--space-fluid-md) var(--space-fluid-md) 0; transition: transform 0.9s var(--ease); }
.cs-next:hover .next-img { transform: translateY(-6px) rotate(-0.6deg); }
.cs-next .next-img img { width: 100%; transition: transform 1.2s var(--ease); }
.cs-next:hover .next-img img { transform: scale(1.03); }
.cs-next .link-arrow { margin-top: var(--space-32); }
.cs-next.night .next-img { background: var(--night-2); }
@media (max-width: 860px) { .cs-next .wrap { grid-template-columns: 1fr; } }
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
@media (max-width: 560px) { .seg button { padding: 0 var(--space-12); font-size: 10.5px; } }

/* ---------- Media sizing system ----------
   Two image sizes only: full article width, or the image half of a side-by-side pair.
   One frame padding everywhere. Pairs line up at the top (text and image start on the same line).
   Images in pairs, detours, and grids sit in the same 16:9 box, centred and uncropped,
   so every image in those layouts is exactly the same size whatever its proportions. */
.media-frame, .media-frame.tight { padding: var(--space-fluid-xs); }
/* The image always takes the wide column, whichever side it lands on
   (visually left = image is the first child of a normal pair, or the last child of a .flip pair). */
.media-split, .media-split.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: var(--space-fluid-xl); }
.media-split:not(.flip):has(> :first-child:is(.media, .toggle)),
.media-split.flip:has(> :last-child:is(.media, .toggle)) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.media-split > :not(.media) > :first-child, .media-split .h4:first-child { margin-top: 0; }
.media-split .media figcaption, .detour-grid .media figcaption, .media-row .media figcaption { margin-top: var(--space-12); }
.media-split .media-frame, .detour-grid .media-frame, .media-row .media-frame {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
}
.media-split .media-frame > img, .media-split .media-frame > video,
.detour-grid .media-frame > img, .detour-grid .media-frame > video,
.media-row .media-frame > img, .media-row .media-frame > video {
  width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;
}
/* Full-width figures always span the article, from the same left edge. */
.cs-article > .chapter > .media, .cs-article .sub > .media, .cs-article .toggle, .cs-article .cs-diagram, .cs-article .proto { width: 100%; margin-left: 0; margin-right: 0; }
.cs-article .media-row { align-items: start; }
@media (max-width: 860px) {
  .media-split, .media-split.flip { grid-template-columns: 1fr; }
  .media-split.flip > :first-child { order: 0; }
}

/* ---------- Single reading column ----------
   Case studies read top to bottom like a document: heading → text → full-width image.
   Side-by-side pairs, two-column text, and detour comparisons all stack; the text always comes
   before its image, so nothing flips between left and right. (Image grids in .media-row stay two-up.) */
.media-split, .media-split.flip, .detour-grid, .two-col {
  display: flex !important; flex-direction: column; align-items: stretch; gap: var(--space-fluid-md);
}
.media-split > :not(.media):not(.toggle), .detour-grid > :not(.media), .two-col > * { order: -1; max-width: 680px; }
.media-split > .media, .media-split > .toggle, .detour-grid > .media { order: 0; width: 100%; }
.media-split.flip > :first-child { order: initial; }
.media-split.flip > :not(.media):not(.toggle) { order: -1; }
/* Full-width images keep their natural proportions (no fixed box) now that they're not squeezed into a column. */
.media-split .media-frame, .detour-grid .media-frame { aspect-ratio: auto; display: block; }
.media-split .media-frame > img, .media-split .media-frame > video,
.detour-grid .media-frame > img, .detour-grid .media-frame > video { width: 100%; height: auto; max-width: 100%; max-height: none; }
.two-col > .result, .two-col > details.deep { max-width: none; width: 100%; }
/* Inside a detour, show the alternative first, then why it fell short and the decision. */
.detour-grid > .media { order: -2; }

/* ---------- One column width ----------
   Text and images share the same width, so every block starts and ends on the same edges. */
.cs-article { max-width: 760px; }
.cs-article .prose, .cs-article .chapter-head, .cs-article .chapter-head .kicker,
.media-split > :not(.media):not(.toggle), .detour-grid > :not(.media), .two-col > *,
.cs-article .pull, .cs-article .insight p.big, .cs-article .insight p.big + p, .cs-article .lessons p { max-width: none; }
.cs-article .media figcaption { max-width: none; }
.cs-article .callouts { grid-template-columns: 1fr; }
/* Impact numbers, including word-style outcomes, use the sans to match the homepage. */
.cs-outcome .num, .result .num { font-family: var(--f-body); font-weight: 500; letter-spacing: -0.045em; line-height: 1.05; font-variant-numeric: tabular-nums; }
/* The back link sits on its own line above the stop label. */
.cs-crumbs > a:first-child { flex-basis: 100%; margin-bottom: var(--space-8); }
/* Impact numbers: smaller, to match the homepage. */
.cs-outcome .num { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
.cs-outcome .num.word { font-size: clamp(1.35rem, 1.9vw, 1.75rem); }
.result .num { font-size: clamp(2.3rem, 3.6vw, 3.3rem); }
.result .num.word { font-size: clamp(1.45rem, 2.1vw, 1.9rem); }
.media-split > .callout.after-media:not(.media) { order: 1; margin-top: 0; }
/* Two cards side by side (stacking on mobile), with the design decision full width below. */
.cs-article .callouts.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.callout.pair-after { margin-top: var(--space-16); }
@media (max-width: 640px) { .cs-article .callouts.pair { grid-template-columns: 1fr; } }
.media-split > .prose.after-media:not(.media) { order: 1; }
.media-split.flip > .after-media:not(.media):not(.toggle), .media-split > .after-media:not(.media):not(.toggle) { order: 1; }

/* Case studies: screenshots and videos sit on the page with no tinted container around them.
   Exception: the connection-state modals in Data Source Management keep their container (.keep-frame). */
.cs-article .media-frame:not(.keep-frame) { background: none !important; padding: 0 !important; border-radius: 0; }
.cs-article .media-frame:not(.keep-frame) img, .cs-article .media-frame:not(.keep-frame) video { border-radius: var(--radius); }

/* ---------- Heading → content spacing ----------
   One gap under every section heading, whatever follows it (text, a split, callouts, a grid, an image).
   Blocks that normally add their own top margin drop it when they sit right after a heading. */
.cs-article h3:not(.callout h3):not(.lessons h3):not(.detour-head h3):not(.toggle-bar h3) { margin-bottom: var(--space-16); }
.cs-article h3 + *, .cs-article h3 + * > :first-child, .cs-article .h3 + .media-split > :first-child > :first-child { margin-top: 0 !important; }
.cs-article h3 + .media-split, .cs-article h3 + .callouts, .cs-article h3 + .media, .cs-article h3 + .media-row,
.cs-article h3 + .shipped, .cs-article h3 + .flow, .cs-article h3 + .qgrid, .cs-article h3 + .results, .cs-article h3 + .cs-diagram,
.cs-article h3 + .two-col, .cs-article h3 + .prose, .cs-article h3 + p { margin-top: 0 !important; }
/* Small sub-headings inside a text block (e.g. "Forecasting with a range") get the same gap as their paragraph. */
.cs-article .h4 + .prose, .cs-article .h4 + p { margin-top: var(--space-12) !important; }
/* A heading that sits alone inside a wrapper (e.g. "Staying close through every release") doesn't add the wrapper's gap. */
.cs-article .media-split > :not(.media):only-child, .cs-article div:has(> h3:only-child) { margin-bottom: 0; }
/* A heading on its own row in a stacked two-column block sits 14px above its text, like every other heading. */
.cs-article .two-col:has(> div:first-child > h3:only-child) { row-gap: 0; }
.cs-article .two-col > div:first-child > h3:only-child { margin-bottom: var(--space-16); }

/* ---------- Vertical rhythm inside chapters ----------
   Every block's own top/bottom margins are cleared and replaced by one spacing scale:
   28px between related blocks (text, image, cards), 48px around standout blocks (quotes, insights, detours,
   diagrams, toggles with tabs), 14px between items of one group. Headings keep their 14px gap (above). */
.cs-article .chapter > *, .cs-article .sub > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.cs-article .chapter > * + *, .cs-article .sub > * + * { margin-top: var(--space-32) !important; }
.cs-article .chapter > :is(.pull, .insight, .detour, .cs-diagram, .capdemo),
.cs-article .sub > :is(.pull, .insight, .detour, .cs-diagram, .capdemo),
.cs-article .chapter > * + :is(.pull, .insight, .detour, .cs-diagram, .capdemo),
.cs-article .sub > * + :is(.pull, .insight, .detour, .cs-diagram, .capdemo) { margin-top: var(--space-48) !important; }
.cs-article .chapter > :is(.pull, .insight, .detour, .cs-diagram, .capdemo) + *,
.cs-article .sub > :is(.pull, .insight, .detour, .cs-diagram, .capdemo) + * { margin-top: var(--space-48) !important; }
/* Headings: 14px to what follows; a sub-chapter starts 64px after the previous block. */
.cs-article .chapter > :is(h3, .h4) + *, .cs-article .sub > :is(h3, .h4) + * { margin-top: 0 !important; }
.cs-article .chapter > .sub { margin-top: var(--space-64) !important; }
.cs-article .chapter > .chapter-head + * { margin-top: 0 !important; }
.cs-article .sub > .mono:first-child + h3 { margin-top: 0 !important; }
/* Inside stacked pairs: the same 28px between text, image and the card that follows. */
.cs-article .media-split, .cs-article .detour-grid, .cs-article .two-col { gap: var(--space-32) !important; }
.cs-article .media-split > *, .cs-article .detour-grid > *, .cs-article .two-col > * { margin: 0 !important; }
/* Cards in one group, and a decision card after a pair of cards. */
.cs-article .callouts { gap: var(--space-16) !important; }
.cs-article .callout.pair-after { margin-top: var(--space-16) !important; }
/* A toggle's cards sit closer to the toggle they explain. */
.cs-article .toggle + .callouts, .cs-article .media + .callouts { margin-top: var(--space-20) !important; }
/* Headings keep their 14px gap to what follows (the rhythm rule above clears margins, so restore it here). */
.cs-article .chapter > :is(h3, .h4), .cs-article .sub > :is(h3, .h4) { margin-bottom: var(--space-16) !important; }
.cs-article .sub > .mono:first-child { margin-bottom: var(--space-12) !important; }
/* "Staying close through every release": the heading sits in its own column wrapper; collapse that wrapper's gap. */
.cs-article .two-col:has(> div:first-child > :is(h3, .h4):only-child) { gap: 0 !important; }
.cs-article .two-col > div:first-child > :is(h3, .h4):only-child { margin: 0 0 var(--space-16) !important; }
/* Chapter header (eyebrow + title + intro) → first block of the chapter: one consistent gap. */
.cs-article .chapter > .chapter-head { margin-bottom: 0 !important; }
.cs-article .chapter > .chapter-head + * { margin-top: var(--space-40) !important; }
/* Inside the header: eyebrow → title 16px, title → intro 20px. */
.cs-article .chapter-head { gap: 0 !important; }
.cs-article .chapter-head > .mono + * { margin-top: var(--space-16); }
.cs-article .chapter-head > .h2 + .kicker { margin-top: var(--space-20); }
/* Two stat cards side by side (stacking on phones). */
.cs-article .two-col.stat-pair { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16) !important; }
@media (max-width: 640px) { .cs-article .two-col.stat-pair { grid-template-columns: 1fr; } }
/* Videos: no white backing or outline (it showed as a white rim around grey recordings). */
.cs-article video.shot, .cs-article .media-frame video { background: transparent !important; border: 0 !important; box-shadow: none; }

/* Next case study: stop label matches the homepage ("Stop 0N", then the company on the same line). */
.stop-eyebrow { flex-direction: row; align-items: baseline; gap: var(--space-12); flex-wrap: wrap; }
.stop-co { font-family: var(--f-body); font-size: 0.98rem; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--ink-2); }
/* Only the text and the image respond to hover/click, not the empty space around them. */
.cs-next { pointer-events: none; }
.cs-next .wrap > * { pointer-events: auto; }
.cs-next .wrap > :first-child { justify-self: start; width: fit-content; max-width: 100%; }
.cs-next:hover .h1 { color: inherit; }
.cs-next .wrap > :first-child:hover .h1 { color: var(--accent-ink); }
.cs-next:hover .next-img, .cs-next:hover .next-img img { transform: none; }
.cs-next .next-img:hover { transform: translateY(-6px) rotate(-0.6deg); }
.cs-next .next-img:hover img { transform: scale(1.03); }
.cs-next .wrap > :first-child:hover ~ .next-img { transform: translateY(-6px) rotate(-0.6deg); }
.cs-next .wrap:has(.next-img:hover) > :first-child .h1 { color: var(--accent-ink); }
/* Onboarding segment results: the image, the split chart and the two stats are one topic, so they sit close together. */
.cs-article .chapter > * + .cs-diagram.seg-results { margin-top: var(--space-32) !important; }
.cs-article .chapter > .cs-diagram.seg-results + .stat-pair { margin-top: var(--space-16) !important; }
/* A media row shown as full-width images, one under the other (natural proportions, as on the old site). */
.cs-article .media-row.media-stack { display: grid; grid-template-columns: 1fr; gap: var(--space-32); }
.cs-article .media-stack .media-frame { aspect-ratio: auto !important; display: block !important; }
.cs-article .media-stack .media-frame > img { width: 100% !important; height: auto !important; max-height: none !important; }
.cs-article .media-stack > figure { margin: 0 !important; }
/* Trimmed media: the frame crops a thin white edge baked into some screenshots and recordings
   (--tw/--tl/--tt are set per image from its measured edges). */
.cs-article .media-frame.trim { position: relative; overflow: hidden; border-radius: var(--radius); display: block !important; }
.cs-article .media-frame.trim > img, .cs-article .media-frame.trim > video { position: absolute; width: var(--tw) !important; max-width: none !important; height: auto !important; max-height: none !important; left: var(--tl); top: var(--tt); border: 0 !important; border-radius: 0 !important; box-shadow: none; }
.cs-article .media-frame.trim { aspect-ratio: var(--ar) !important; }
/* Case study headings fill the column (normal wrapping, without leaving a single word on the last line). */
.cs-article :is(h2, h3, .h2, .h3, .h4) { text-wrap: pretty; max-width: none !important; }
/* Cards inside an insight panel. */
.insight .callouts.in-insight { margin-top: var(--space-32); }
.insight .callouts.in-insight .callout { background: rgba(255,255,255,0.04); border-color: rgba(242,235,223,0.14); color: var(--on-night-muted, #A99E90); }
/* A panel that ends in cards: less space under them, matching the card gap rhythm. */
.insight:has(> .callouts.in-insight:last-child) { padding-bottom: var(--space-fluid-md) !important; }
/* Connection-state modals: shorter, so the explanation below stays in view (whole modal still shown). */
.cs-article .media-frame.keep-frame { padding: var(--space-fluid-sm) !important; }
.cs-article .media-frame.keep-frame > img { max-width: 440px !important; margin-inline: auto; }
/* "Before" screenshot with a dark badge in its top-left corner, like the original site. */
.cs-article .before-shot .media-frame { position: relative; }
.cs-article .before-shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.before-badge { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: var(--space-4) var(--space-12); border-radius: var(--radius-6); }
/* Before/After toggle where the two screenshots have different proportions: show both at one height. */
.cs-article .toggle-stage.same-height > img { width: 100%; aspect-ratio: 848 / 480; object-fit: cover; object-position: center top; }
/* An image on a white canvas: the frame takes the same white, so the image doesn't float in a dark box. */
.cs-article .media-frame.white-fill { background: #fff !important; border-radius: var(--radius); padding: var(--space-fluid-sm) !important; aspect-ratio: auto !important; display: block !important; }
.cs-article .media-frame.white-fill > img { width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; border: 0 !important; border-radius: 0 !important; }
/* A step flow and its note, grouped in one card. */
.cs-article .flow-card { padding: var(--space-fluid-md); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.cs-article .flow-card .flow { margin: 0 !important; }
.cs-article .flow-card > .mono { margin-top: var(--space-16); }
/* Every sub-heading in a case study uses one style (the section sub-heading), including the headings
   beside toggles and in "alternative explored" detours. */
.cs-article .chapter :is(h3.h3, .detour-head .h3, .toggle-bar .h3) { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 420; line-height: 1.15; letter-spacing: -0.012em; }
/* Third heading level: a heading that labels a component inside a sub-section (e.g. a toggle under its section heading). */
.cs-article .chapter .sub-sub { font-family: var(--f-body) !important; font-size: 1.2rem !important; font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; color: var(--ink); }
/* Connection states, each on its own: heading, the modal, then its explanation. */
.cs-article .state-block { display: flex; flex-direction: column; gap: 0; }
.cs-article .state-block > * { margin: 0 !important; }
.cs-article .state-block > .sub-sub { margin-bottom: var(--space-16) !important; }
.cs-article .state-block > .prose { margin-top: var(--space-20) !important; }
.cs-article .state-block > .callouts { margin-top: var(--space-16) !important; }
.cs-article .state-block + .state-block { margin-top: var(--space-48) !important; }
.cs-article .media-frame.trim.white-bg { background: #fff !important; }
/* Chapter rail: room on the left so the plane isn't clipped; the plane is centred on the line;
   the active item stays in place (it just changes colour), so its dot stays on the line. */
.cs-toc { padding-left: var(--space-8); margin-left: calc(-1 * var(--space-8)); overflow-x: visible; }
.cs-toc ol { padding-left: 26px; }
.cs-toc ol::before, .cs-toc .toc-fill { left: 8px; }
.cs-toc a::before { left: -21px; } /* centres the 7px dot on the line (26px padding - 21px + 3.5px = 8.5px, the line's centre) */
.cs-toc .toc-plane { left: 0; width: 17px; height: 17px; z-index: 2; }
.cs-toc a.is-current { transform: none; }
/* Numbered process card: steps in columns, each with a short line of detail (stacks on phones). */
.cs-article .steps-card { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; }
.cs-article .steps-card li { padding: var(--space-24) var(--space-20) var(--space-24); display: flex; flex-direction: column; gap: var(--space-8); position: relative; }
.cs-article .steps-card li + li { border-left: 1px solid var(--line); }
.cs-article .steps-card .steps-n { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent-ink); display: flex; align-items: center; gap: var(--space-12); }
.cs-article .steps-card .steps-n::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .5; }
.cs-article .steps-card b { font-weight: 600; font-size: 0.98rem; color: var(--ink); line-height: 1.3; }
.cs-article .steps-card li > span:last-child { font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 760px) {
  .cs-article .steps-card { grid-template-columns: 1fr; }
  .cs-article .steps-card li + li { border-left: 0; border-top: 1px solid var(--line); }
  .cs-article .steps-card .steps-n::after { display: none; }
}
/* "Current flow" card header: labels the steps as the old path being replaced. */
.cs-article .flow-card-head { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; margin-bottom: var(--space-16); }
.cs-article .flow-card-title { font-weight: 600; color: var(--ink); font-size: 0.98rem; }

/* ---------- Case study opening: intro text with the hero image beside it ---------- */
.cs-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--space-fluid-2xl); align-items: center; }
.cs-intro .h1 { font-size: clamp(2.4rem, 4.2vw, 4.4rem); }
.cs-intro .lead { max-width: 44ch; }
.cs-intro-visual { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(170deg, var(--paper-2), var(--paper-3)); box-shadow: var(--shadow-lg); }
.cs-intro-visual img { width: 100%; height: auto; display: block; }
@media (max-width: 980px) {
  .cs-intro { grid-template-columns: 1fr; }
  .cs-intro-visual { margin-top: var(--space-8); }
}
/* Crop the hero image to its UI (x 232–1366, y 40–800 of the 1600 × 800 file), so the screenshot fills the card. */
.cs-intro-visual { position: relative; aspect-ratio: 1134 / 760; }
.cs-intro-visual img { position: absolute; width: 141.093% !important; max-width: none; left: -20.459%; top: -5.263%; }
/* Search's phone reaches further right (to x 1388): a slightly wider window, x 232–1412. */
.cs-search-hero .cs-intro-visual { aspect-ratio: 1180 / 760; }
.cs-search-hero .cs-intro-visual img { width: 135.593% !important; left: -19.661%; }
/* Hero image without a container: no backdrop, shadow or card; cropped tight to the UI (x 256–1342, y 64–800). */
.cs-intro-visual { background: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: hidden; aspect-ratio: 1086 / 736; }
.cs-intro-visual img { width: 147.330% !important; left: -23.573%; top: -8.696%; }
.cs-search-hero .cs-intro-visual { aspect-ratio: 1132 / 736; }
.cs-search-hero .cs-intro-visual img { width: 141.343% !important; left: -22.615%; }
/* Round all four corners of the cropped screenshot so the cut bottom edge matches the top. */
.cs-intro-visual { border-radius: var(--radius) !important; }

/* Callouts directly under a dark insight card read as one group: same gap as between the callouts themselves. */
.cs-article .insight + .callouts, .cs-article .sub > .insight + .callouts { margin-top: var(--space-16) !important; }
.cs-article .callouts + .media-split { margin-top: var(--space-48) !important; }
.cs-article .callouts + .callouts { margin-top: var(--space-16) !important; }

/* Hero outcomes: a word result is styled like the word results in "What changed" (same weight as the numbers,
   smaller size), and sits in a box as tall as a number, so every description below starts on the same line. */
.cs-outcome .num.word { font-weight: 500; letter-spacing: -0.02em; font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.1;
  display: flex; align-items: center; min-height: calc(clamp(2.2rem, 3.4vw, 3.2rem) * 1.05); }

/* Results: the source line is plain text under the label, not all-caps mono. */
.result .src.mono { font-family: var(--f-body); font-size: 0.9rem; letter-spacing: normal; text-transform: none; font-weight: 400; color: var(--muted); }

/* Next case study card: the next page's intro image, cropped the same way as its intro, inside the card's container. */
.cs-next .next-img { padding: var(--space-fluid-md) !important; }
.cs-next .next-crop { position: relative; overflow: hidden; aspect-ratio: 1086 / 736; border-radius: var(--radius); }
.cs-next .next-crop img { position: absolute; width: 147.330% !important; max-width: none; height: auto; left: -23.573%; top: -8.696%; }
.cs-next .next-crop.is-search { aspect-ratio: 1132 / 736; }
.cs-next .next-crop.is-search img { width: 141.343% !important; left: -22.615%; }
.cs-article .h3 + .state-block { margin-top: var(--space-32) !important; }
/* Two-up images shown whole, at their own aspect ratio (no 16:9 letterbox). */
.cs-article .media-row.natural .media-frame { aspect-ratio: auto; display: block; }
.cs-article .media-row.natural .media-frame > img { width: 100%; max-height: none; }
.cs-article .media + .media:has(> .media-row.natural) { margin-top: var(--space-16) !important; }
/* Toggles inside a split: keep the stage a grid so both sides stack in the same spot (the split's flex frame rule broke it). */
.cs-article .media-split .media-frame.toggle-stage, .cs-article .detour-grid .media-frame.toggle-stage { display: grid; place-items: center; }

/* Steps card, 3 × 2: titles only (e.g. what each experiment documented). */
.cs-article .steps-card.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-article .steps-card.grid-3 li { border-left: 0; padding: var(--space-20) var(--space-20) var(--space-24); }
.cs-article .steps-card.grid-3 li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
.cs-article .steps-card.grid-3 li:nth-child(n + 4) { border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .cs-article .steps-card.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-article .steps-card.grid-3 li { border-left: 0 !important; border-top: 0 !important; }
  .cs-article .steps-card.grid-3 li:nth-child(even) { border-left: 1px solid var(--line) !important; }
  .cs-article .steps-card.grid-3 li:nth-child(n + 3) { border-top: 1px solid var(--line) !important; }
  .cs-article .steps-card.grid-3 .steps-n::after { display: flex; }
}
/* Cards placed under an image in a split sit close to it (same 20px as cards right after any image). */
.cs-article .media-split:has(> .callouts.after-media) { row-gap: var(--space-20); }
.cs-article .media-split > .callouts.after-media { margin-top: 0 !important; }
.stop-eyebrow .accent { font-size: 0.86rem; letter-spacing: 0.08em; }
.detour-why li::before { top: calc(0.775em - 0.75px); } /* centred on the first line (line-height 1.55) */
.cs-article .media-split + .media-split { margin-top: var(--space-48) !important; } /* more room between one split's last card and the next split's heading */
.cs-article .callout + .media-split { margin-top: var(--space-48) !important; }
/* A light card that keeps the accent dot (e.g. "Where it pointed" under a dark detour). */
.callout.pointer .mono { color: var(--ink); }
.callout.pointer .mono::before { background: var(--accent); border-radius: 50%; }
/* A three-step card stacks on phones instead of leaving an empty cell in a 2 × 2 grid. */
@media (max-width: 640px) {
  .cs-article .steps-card.grid-3:has(> li:nth-child(3):last-child) { grid-template-columns: 1fr; }
  .cs-article .steps-card.grid-3:has(> li:nth-child(3):last-child) li { border-left: 0 !important; border-top: 0 !important; }
  .cs-article .steps-card.grid-3:has(> li:nth-child(3):last-child) li + li { border-top: 1px solid var(--line) !important; }
}
/* A plain numbered list: number and text, one step per line, no boxes. */
.cs-article .steps-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); color: var(--ink); font-size: 1rem; }
.cs-article .steps-plain li { display: flex; align-items: center; gap: var(--space-12); }
.cs-article .steps-plain li .mono { line-height: 1; }
.cs-article .steps-plain li .mono { color: var(--accent-ink); }
/* Light mode: muted text on the beige panel gets a slightly darker grey for headroom (5.8:1 instead of 4.5:1). */
html[data-theme="light"] .seg button:not([aria-pressed="true"]) { color: #5E564C; }
/* Hero outcomes: the source line reads like the description above it (same type, colour and size), on its own line. */
.cs-outcome .src.mono { font-family: var(--f-body); font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; color: inherit; margin-top: 0; }
/* An Artefact accordion right after a diagram belongs to it: sit close, like a caption. */
.cs-article .cs-diagram + details.deep, .cs-article .sub > .cs-diagram + details.deep { margin-top: var(--space-16) !important; }
/* The dot sits on the first line of the title, even when the title wraps. */
.shipped li b { align-items: flex-start; }
.shipped li b::before { margin-top: calc(0.75em - 3.5px); }
/* Hero screenshots: each is an app window with its own rounded top corners (22px in a 1086-wide crop). Show the whole
   window and round the frame's top corners to match them exactly (as a share of the frame), so no backdrop shows. */
.cs-intro-visual, .cs-next .next-crop { border-radius: 2.3% 2.3% var(--radius) var(--radius) / 3.4% 3.4% var(--radius) var(--radius) !important; }
.cs-search-hero .cs-intro-visual, .cs-next .next-crop.is-search { border-radius: 2.2% 2.2% var(--radius) var(--radius) / 3.4% 3.4% var(--radius) var(--radius) !important; }
.cs-ds-hero .cs-intro-visual img, .cs-next .next-crop.is-ds img { width: 147.330% !important; left: -23.573% !important; top: -8.696% !important; }