/* Case-study pages: the reading column, contents rail, margin notes and the figure kit
   shared by every /projects/<name>/ article. */
/* ------------------------------------------------ head -------------- */
.cs-head { padding-block: clamp(2.5rem, 8vh, 6rem) var(--sc-8); }
.cs-head__back { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cs-head__back:hover { color: var(--sc-accent); } }
.cs-head .kicker { margin-top: var(--sc-7); }
.cs-head .h1 { margin-top: var(--sc-3); max-width: 13ch; }
.cs-head__dek { margin: var(--sc-5) 0 0; font-family: var(--sc-font-display); font-weight: 650; font-variation-settings: "wdth" 100; font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: -0.025em; color: var(--sc-ink-soft); max-width: 28ch; }
.cs-head__stats { margin: var(--sc-6) 0 0; padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline-strong); font-weight: 600; font-size: var(--sc-t-base); line-height: 1.5; color: var(--sc-accent); max-width: 60rem; }

/* ------------------------------------------------ layout ------------ */
/* A reading column with a margin on the left for notes and wide figures,
   and the contents rail on the right. */
.cs { --cs-m: 11rem; --cs-g: 3rem; display: grid; grid-template-columns: minmax(0, 46rem) 10.5rem; justify-content: space-between; column-gap: var(--cs-g);
      padding-left: calc(var(--sc-gutter) + var(--cs-m) + var(--cs-g)); padding-bottom: var(--sc-section); align-items: start; }
.cs__body { grid-column: 1; grid-row: 1; min-width: 0; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); line-height: 1.65; }
.cs__rail { grid-column: 2; grid-row: 1; position: sticky; top: var(--sc-7); max-height: calc(100svh - 2 * var(--sc-7)); overflow: auto; font-size: 0.8125rem; }
.cs__rail ol { list-style: none; margin: var(--sc-3) 0 0; padding: 0; border-left: 1px solid var(--sc-hairline-strong); }
.cs__rail a { display: block; margin-left: -1px; padding: 0.3rem 0 0.3rem var(--sc-3); border-left: 2px solid transparent; color: var(--sc-ink-soft); line-height: 1.3; text-decoration: none; }
.cs__rail a[aria-current] { color: var(--sc-ink); font-weight: 600; border-left-color: var(--pen); }
@media (hover: hover) and (pointer: fine) { .cs__rail a:hover { color: var(--sc-ink); } }

/* ------------------------------------------------ text -------------- */
.cs-sec { padding-top: var(--sc-9); scroll-margin-top: var(--sc-3); }
.cs-sec:first-child { padding-top: 0; }
.cs-sec::after { content: ""; display: table; clear: both; }
.cs h2 { margin: 0 0 var(--sc-6); padding-top: var(--sc-4); border-top: 2px solid var(--sc-ink); font-family: var(--sc-font-display); font-weight: 750; font-variation-settings: "wdth" 100;
         font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 22ch; text-wrap: balance; }
.cs h3 { margin: var(--sc-7) 0 var(--sc-3); font-family: var(--sc-font-display); font-weight: 700; font-variation-settings: "wdth" 100; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.15; letter-spacing: -0.02em; }
.cs__body p { margin: 0; text-wrap: pretty; }
.cs__body p + p, .cs__body ul + p, .cs__body p + ul { margin-top: var(--sc-4); }
.cs__body strong { font-weight: 600; }
:where(.cs__body) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.cs__body ul:not([class]) { display: grid; gap: var(--sc-2); }
.cs__body ul:not([class]) > li { position: relative; padding-left: 1.4em; }
.cs__body ul:not([class]) > li::before { content: ""; position: absolute; left: 0.15em; top: 0.68em; width: 0.42em; height: 0.42em; background: var(--pen); }
.cs__body .note + p { margin-top: var(--sc-4); }

/* A line set apart: the idea the section turns on. */
.pull { margin: var(--sc-7) 0 !important; padding-left: var(--sc-5); border-left: 3px solid var(--pen); font-family: var(--sc-font-display); font-weight: 700; font-variation-settings: "wdth" 100;
        font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; max-width: 30ch; }
.pull + .pull { margin-top: calc(-1 * var(--sc-4)) !important; }
.pull--quiet { color: var(--sc-ink-soft); }
.pull .pen { white-space: normal; }

/* Margin notes: in the left margin on wide screens, inline below that. */
.note { float: left; clear: left; width: var(--cs-m); margin: 0.4rem 0 var(--sc-4) calc(-1 * (var(--cs-m) + var(--cs-g))); padding-top: var(--sc-2); border-top: 2px solid var(--pen);
        font-size: var(--sc-t-sm); line-height: 1.45; color: var(--sc-ink-soft); }
.note b { display: block; margin-bottom: var(--sc-1); font: 600 var(--sc-t-xs) / 1.2 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); }

/* ------------------------------------------------ figures ----------- */
.fig { clear: both; margin: var(--sc-8) 0; }
.wide { margin-left: calc(-1 * (var(--cs-m) + var(--cs-g))); }
.fig__title { margin: 0 0 var(--sc-4) !important; font: 600 var(--sc-t-xs) / 1.2 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.fig figcaption { margin-top: var(--sc-5); font-family: var(--sc-font-display); font-weight: 700; font-variation-settings: "wdth" 100; font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.2; letter-spacing: -0.02em; max-width: 40ch; }
.fig figcaption small { display: block; margin-top: var(--sc-2); font: 400 var(--sc-t-sm) / 1.5 var(--sc-font-text); letter-spacing: 0; color: var(--sc-ink-soft); }
.cs .sd { --sd-gap: 1.1rem; }
.cs .sd__n { font-size: clamp(0.9rem, 0.84rem + 0.2vw, 1.02rem); padding: 0.6rem 0.8rem; }
.cs .sd__n small { display: block; width: 100%; margin-top: 0.15rem; font: 500 var(--sc-t-xs) / 1.35 var(--sc-font-text); letter-spacing: 0; color: var(--sc-ink-soft); }
.cs .sd__n.is-human small { color: inherit; opacity: 0.75; }
.cs .sd__io { font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1.1rem); }
/* Two-way branches. The line meets the bar between the two boxes, so it has no arrowhead of its own. */
.sd__fork--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd__fork--2 .sd__in, .sd__fork--2 .sd__out { left: calc((100% - 0.5rem) / 4); right: calc((100% - 0.5rem) / 4); }
.sd > li.sd__fork--2::after { display: none; }

/* The key, shown once beside the first diagram. */
.legend { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6); margin: 0 0 var(--sc-6); padding: 0 0 var(--sc-4); border-bottom: 1px solid var(--sc-hairline); list-style: none; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.legend li { display: flex; align-items: baseline; gap: var(--sc-2); padding: 0 !important; }
.legend li::before { display: none; }

/* Headline figures. */
.cs .figs { margin-top: 0; }
.cs .figs > div { justify-content: flex-end; }
/* Each figure is sized by its own column, so a long value never runs into the next one. */
.cs .figs > div { container-type: inline-size; }
.cs .figs dd { font-size: min(clamp(2.4rem, 1rem + 3.6vw, 4.6rem), 22cqi); }
.cs .figs dd small { font-size: 0.4em; letter-spacing: -0.01em; color: var(--sc-ink-soft); }

/* Before and after. */
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5); }
.vs__col { display: grid; align-content: start; gap: var(--sc-3); padding: var(--sc-5); border: 1px solid var(--sc-hairline-strong); }
.vs__col--after { border-color: var(--sc-canvas); }
.vs__who { margin: 0; font-family: var(--sc-font-display); font-weight: 750; font-variation-settings: "wdth" 100; font-size: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); line-height: 1.05; letter-spacing: -0.03em; }
.vs__ppl { display: flex; gap: 0.4rem; margin: 0; }
.vs__ppl i { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: currentColor; }
.vs__col ul { font-size: var(--sc-t-base); }

/* The architecture: three lanes out of the CRM, back into it. */
.arch .sd { justify-items: center; }
.arch .sd > li { --sd-x: 50%; width: min(24rem, 100%); }
.arch .sd > li.sd__fork { width: 100%; gap: 1.25rem; align-items: stretch; }
.arch .sd__fork .sd__in, .arch .sd__fork .sd__out { left: calc((100% - 2.5rem) / 6); right: calc((100% - 2.5rem) / 6); }
.sd__lane { display: flex; flex-direction: column; min-width: 0; }
.sd__lane > .sd { --sd-gap: 0.9rem; }
.sd__lane > .sd > li { width: 100%; }
.sd__lane::after { content: ""; flex: 1; align-self: center; width: 1px; min-height: 0; background: var(--sc-ink-soft); }
.sd__lane > .sd__n { flex-direction: column; }
.arch .sd__n.is-key { padding-block: 0.85rem; box-shadow: inset 0 0 0 1px var(--sc-ink); }

/* Inline step chains. */
.steps { display: flex !important; flex-wrap: wrap; gap: var(--sc-2) 0 !important; margin: var(--sc-6) 0 !important; font-family: var(--sc-font-display); font-weight: 650; font-variation-settings: "wdth" 100; font-size: 0.98rem; letter-spacing: -0.01em; line-height: 1.2; }
.steps > li { padding: 0 !important; display: flex; align-items: center; }
.steps > li::before { display: none; }
.steps > li + li::before { display: block; content: "→"; position: static; width: auto; height: auto; background: none; margin: 0 0.55em; color: var(--pen); font-weight: 700; }
.steps span { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.4rem 0.6rem; border: 1px solid var(--sc-hairline-strong); }
.steps .t { font-size: 0; gap: 0; }
.steps .t::before { width: 0.62rem; height: 0.62rem; }

/* The ink box: a design rule stated plainly. */
.box { clear: both; margin: var(--sc-8) 0; padding: clamp(1.5rem, 3vw, 2.5rem); }
.box p:first-child { font-family: var(--sc-font-display); font-weight: 750; font-variation-settings: "wdth" 100; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 22ch; }
.box p + p { color: var(--sc-ink-soft); max-width: 46ch; }

/* Lead states, grouped by who owns them. */
.zones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-5); }
.zones > li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sc-5); padding: var(--sc-4) 0 0 !important; border-top: 1px solid var(--sc-hairline-strong); position: relative; }
.zones > li::before { display: none; }
.zones h4 { margin: 0; font-family: var(--sc-font-display); font-weight: 750; font-variation-settings: "wdth" 100; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.2; }
.zones h4 + .t { margin-top: var(--sc-2); }
.zones p { margin-top: var(--sc-3) !important; font-size: var(--sc-t-base); color: var(--sc-ink-soft); }
.chips { display: flex !important; flex-wrap: wrap; gap: 0.4rem !important; align-content: start; }
.chips > li { padding: 0.3rem 0.6rem !important; border: 1px solid var(--sc-hairline-strong); font-size: var(--sc-t-sm); line-height: 1.3; }
.chips > li::before { display: none; }
.chips--ai > li { border-color: var(--pen); }
.chips--human > li { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }

/* The data contract. */
.contract { margin: var(--sc-5) 0 var(--sc-6); border-top: 2px solid var(--sc-ink); }
.contract > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--sc-4); padding: var(--sc-3) 0; border-bottom: 1px solid var(--sc-hairline); }
.contract dt { font-family: var(--sc-font-display); font-weight: 700; font-variation-settings: "wdth" 100; letter-spacing: -0.01em; }
.contract dd { margin: 0; color: var(--sc-ink-soft); }

/* 47 assistants, about ten live. */
.units { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 var(--sc-4); max-width: 34rem; }
.units i { width: 0.8rem; height: 0.8rem; transform: rotate(45deg) scale(0.86); border: 1.5px solid var(--sc-ink-soft); }
.units i.on { background: var(--pen); border-color: var(--pen); }
.units__key { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.units__key b { color: var(--sc-ink); font-weight: 600; }

/* The prompt as a document of seven parts. */
.prompt { counter-reset: p; display: grid; gap: 0 !important; max-width: 30rem; border: 1px solid var(--sc-ink); }
.prompt > li { counter-increment: p; display: flex; gap: var(--sc-4); padding: 0.6rem 0.9rem !important; font-family: var(--sc-font-display); font-weight: 650; font-variation-settings: "wdth" 100; font-size: 1.02rem; letter-spacing: -0.01em; }
.prompt > li + li { border-top: 1px solid var(--sc-hairline); }
.prompt > li::before { content: counter(p, decimal-leading-zero); position: static; width: auto; height: auto; background: none; color: var(--pen); font: 600 var(--sc-t-xs) / 1.9 var(--sc-font-text); letter-spacing: 0.08em; }

/* Check and agree, then validate and write. */
.book { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sc-5); align-items: start; }
.book__phase { display: grid; gap: var(--sc-4); }
.book__phase > p { margin: 0; padding-bottom: var(--sc-3); border-bottom: 1px solid var(--sc-hairline-strong); }
.book__phase > p b { display: block; font-family: var(--sc-font-display); font-weight: 750; font-variation-settings: "wdth" 100; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.2; }
.book__phase > p span { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.book__ne { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: var(--sc-3); padding-top: var(--sc-2); color: var(--sc-accent); text-align: center; }
.book__ne b { font-family: var(--sc-font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; }
.book__ne span { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 var(--sc-t-xs) / 1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; }
.book__ne::after { content: ""; flex: 1; width: 2px; background: var(--pen); }
.book .sd__fork .sd__n { font-size: 0.88rem; }

/* A lead's first minutes. */
.tl { display: grid; }
.tl > li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--sc-5); padding: 0 !important; }
.tl > li::before { display: none; }
.tl__t { margin: 0; padding-top: 0.1rem; font-family: var(--sc-font-display); font-weight: 750; font-variation-settings: "wdth" 100; font-size: 1.05rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--sc-accent); text-align: right; }
.tl__b { position: relative; padding: 0 0 var(--sc-7) var(--sc-6); border-left: 1px solid var(--sc-hairline-strong); }
.tl > li:last-child .tl__b { border-left-color: transparent; padding-bottom: 0; }
.tl__b::before { content: ""; position: absolute; left: -0.4rem; top: 0.35rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--sc-canvas); border: 2px solid var(--pen); box-sizing: border-box; }
.tl > li:last-child .tl__b::before { background: var(--sc-ink); border-color: var(--sc-ink); }
.tl h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sc-2) var(--sc-4); margin: 0 0 var(--sc-2); font-family: var(--sc-font-display); font-weight: 700; font-variation-settings: "wdth" 100; font-size: 1.15rem; letter-spacing: -0.015em; line-height: 1.25; }
.tl__b p, .tl__b li { font-size: var(--sc-t-base); }
.tl__b ul { margin-top: var(--sc-3); }

/* A no-answer cadence. */
.cad { display: flex !important; align-items: center; gap: 0 !important; margin: 0 0 var(--sc-3); }
.cad > li { padding: 0 !important; }
.cad > li::before { display: none; }
.cad__call { flex: none; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--pen); }
.cad__gap { flex: 1; position: relative; height: 2.6rem; display: flex; align-items: flex-start; justify-content: center; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); white-space: nowrap; }
.cad__gap::after { content: ""; position: absolute; left: 0.3rem; right: 0.3rem; top: 50%; height: 1px; background: var(--sc-ink-soft); }
.cad__gap--off::after { background: repeating-linear-gradient(to right, var(--sc-ink-soft) 0 4px, transparent 4px 8px); }

/* One outcome, six routes. */
.sw .sd { --sd-w: 13rem; }
.sw__out { margin-left: calc(6.5rem - 0.5px) !important; padding-top: var(--sd-gap, 1.1rem) !important; border-left: 1px solid var(--sc-ink-soft); }
.sw__out > li { position: relative; padding: 0.5rem 0 0.5rem 1.75rem; font-size: var(--sc-t-base); line-height: 1.4; }
.sw__out > li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.25rem; height: 1px; background: var(--sc-ink-soft); }
.sw__out > li:last-child::after { content: ""; position: absolute; left: -1px; top: 50%; bottom: 0; width: 1px; background: var(--sc-canvas); }
.sw__out b { display: inline-block; min-width: 9.5rem; font-family: var(--sc-font-display); font-weight: 700; font-variation-settings: "wdth" 100; letter-spacing: -0.01em; }
.sw__out > li:first-child b { color: var(--sc-accent); }

/* Who owns what. */
.own { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5); }
.own > div { display: grid; align-content: start; gap: var(--sc-3); padding: var(--sc-5); border: 1px solid var(--sc-ink); }
.own > .is-ai { border-color: var(--pen); box-shadow: inset 0 0 0 1px var(--pen); }
.own > .is-human { background: var(--sc-ink); color: var(--sc-canvas); }
.own > .is-human .t { color: inherit; }
.own > .is-human ul > li::before { background: var(--sc-canvas); }
.own h4 { margin: 0; font-family: var(--sc-font-display); font-weight: 750; font-variation-settings: "wdth" 100; font-size: 1.3rem; letter-spacing: -0.02em; }
.own ul { font-size: var(--sc-t-base); }

/* Failure patterns. */
.pat { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5) var(--sc-6) !important; }
.pat > li { padding: var(--sc-3) 0 0 !important; border-top: 2px solid var(--sc-ink); }
.pat > li::before { display: none; }
.pat h4 { margin: 0 0 var(--sc-2); font-family: var(--sc-font-display); font-weight: 700; font-variation-settings: "wdth" 100; font-size: 1.15rem; letter-spacing: -0.015em; }
.pat p { font-size: var(--sc-t-base); color: var(--sc-ink-soft); }

/* What each call reported. */
.schema { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5); }
.schema > div { padding: var(--sc-5); background: var(--sc-surface); }
.schema h4 { margin: 0 0 var(--sc-3); font: 600 var(--sc-t-xs) / 1.2 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.schema ul { gap: var(--sc-1) !important; font-size: var(--sc-t-base); }
.qs { margin: var(--sc-7) 0 !important; display: grid; gap: var(--sc-2) !important; font-family: var(--sc-font-display); font-weight: 700; font-variation-settings: "wdth" 100; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); line-height: 1.2; letter-spacing: -0.02em; }
.qs > li { padding-left: var(--sc-5) !important; border-left: 3px solid var(--pen); }
.qs > li::before { display: none; }

/* The loop back from each call to the next version. */
.loop { position: relative; max-width: 30rem; padding-right: 4.5rem; }
.loop .sd { --sd-w: 100%; }
.loop__back { position: absolute; right: 0.75rem; top: 1.3rem; bottom: 1.3rem; width: 2.5rem; border: 1.5px solid var(--pen); border-left: 0; }
.loop__back::before { content: ""; position: absolute; left: -2px; top: -5px; width: 8px; height: 8px; border: solid var(--pen); border-width: 1.5px 0 0 1.5px; transform: rotate(-45deg); }
.loop__back span { position: absolute; left: calc(100% + 0.4rem); top: 50%; translate: 0 -50%; writing-mode: vertical-rl; font: 600 var(--sc-t-xs) / 1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); white-space: nowrap; }
.loop .sd__n ul { width: 100%; margin-top: 0.35rem; gap: 0.15rem !important; font: 500 var(--sc-t-xs) / 1.35 var(--sc-font-text); letter-spacing: 0; color: var(--sc-ink-soft); }
.loop .sd__n ul > li { padding-left: 0.9em; }
.loop .sd__n ul > li::before { width: 0.35em; height: 0.35em; top: 0.5em; left: 0; background: var(--pen); }

/* Horizontal bars: live against everything built, and the sales scale. */
.hb { display: grid; gap: var(--sc-3); margin: 0; }
.hb > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sc-4); align-items: center; }
.hb dt { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.3; }
.hb dd { margin: 0; display: flex; align-items: center; gap: var(--sc-3); min-width: 0; }
.hb__bar { position: relative; flex: none; height: 1.5rem; width: calc(var(--of, var(--v)) / var(--max) * (100% - 10rem)); box-shadow: inset 0 0 0 1px var(--sc-ink-soft); }
.hb__bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) / var(--of, var(--v)) * 100%); background: var(--c, var(--sc-ink)); }
.hb__val { min-width: 0; font-size: var(--sc-t-sm); line-height: 1.25; color: var(--sc-ink-soft); }
.hb__val b { font-family: var(--sc-font-display); font-weight: 750; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--sc-ink); margin-right: 0.25em; }
.hb__key { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6); margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hb__key span { display: inline-flex; align-items: center; gap: 0.5em; }
.hb__key i { width: 1.1rem; height: 0.7rem; background: var(--sc-ink); }
.hb__key i.of { background: none; box-shadow: inset 0 0 0 1px var(--sc-ink-soft); }
.hb--money .hb__bar { height: 2.4rem; }
.hb--money .hb__val b { font-size: 1.6rem; }
.hb__between { margin: 0 0 0 calc(11rem + var(--sc-4)) !important; padding-left: var(--sc-4); border-left: 1px dashed var(--sc-ink-soft); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* What went wrong. */
.wrong { counter-reset: w; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-8); }
.wrong > li { counter-increment: w; position: relative; padding: 0 !important; }
.wrong > li::before { content: counter(w, decimal-leading-zero); position: static; display: block; width: auto; height: auto; background: none; font-family: var(--sc-font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: -0.04em; color: var(--pen); }
.wrong h3 { margin-top: var(--sc-3); }
.fix { margin-top: var(--sc-5); padding: var(--sc-4) var(--sc-5); background: var(--sc-surface); }
.fix > p:first-child { font: 600 var(--sc-t-xs) / 1.2 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); }
.fix > p + p { margin-top: var(--sc-2); }

/* Intelligence and authority, side by side. */
.ex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4); margin: var(--sc-6) 0; }
.ex > div { padding: var(--sc-5); border: 1px solid var(--sc-ink); display: grid; gap: var(--sc-3); align-content: start; }
.ex > .is-ai { border-color: var(--pen); box-shadow: inset 0 0 0 1px var(--pen); }
.ex .t, .own .t { white-space: normal; align-items: baseline; }
.ex p:last-child { font-family: var(--sc-font-display); font-weight: 700; font-variation-settings: "wdth" 100; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.02em; }

/* What I'd change. */
.changes { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-6) var(--sc-6) !important; counter-reset: c; }
.changes > li { counter-increment: c; padding: var(--sc-3) 0 0 !important; border-top: 1px solid var(--sc-hairline-strong); }
.changes > li::before { content: counter(c, decimal-leading-zero); position: static; display: block; width: auto; height: auto; background: none; font: 600 var(--sc-t-xs) / 1 var(--sc-font-text); letter-spacing: 0.08em; color: var(--pen); margin-bottom: var(--sc-2); }
.changes h3 { margin: 0 0 var(--sc-2); font-size: 1.15rem; }
.changes p { font-size: var(--sc-t-base); color: var(--sc-ink-soft); }

/* The full stack, folded away. */
.stack { clear: both; margin: var(--sc-9) 0 0; border-top: 2px solid var(--sc-ink); border-bottom: 1px solid var(--sc-hairline-strong); }
.stack summary { display: flex; align-items: baseline; gap: var(--sc-4); padding: var(--sc-4) 0; cursor: pointer; list-style: none; font-family: var(--sc-font-display); font-weight: 700; font-variation-settings: "wdth" 100; font-size: 1.3rem; letter-spacing: -0.02em; }
.stack summary::-webkit-details-marker { display: none; }
.stack summary span { font: 500 var(--sc-t-sm) / 1 var(--sc-font-text); color: var(--sc-ink-soft); }
.stack summary::after { content: "+"; margin-left: auto; font-size: 1.6rem; line-height: 1; color: var(--pen); }
.stack[open] summary::after { content: "−"; }
.stack table { width: 100%; margin-bottom: var(--sc-5); border-collapse: collapse; font-size: var(--sc-t-sm); line-height: 1.4; }
.stack th, .stack td { overflow-wrap: anywhere; hyphens: auto; padding: 0.55rem 0.75rem 0.55rem 0; text-align: left; vertical-align: top; border-top: 1px solid var(--sc-hairline); }
.stack th { font: 600 var(--sc-t-xs) / 1.2 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); border-top: 0; }
.stack td:nth-child(2) { font-weight: 600; }
.stack td:last-child { color: var(--sc-ink-soft); }

/* The close. */
.end { clear: both; margin-top: var(--sc-10); padding-top: var(--sc-5); border-top: 2px solid var(--sc-ink); }
.end__big { font-family: var(--sc-font-display); font-weight: 800; font-variation-settings: "wdth" 100; font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.2rem) !important; line-height: 0.98 !important; letter-spacing: -0.045em; max-width: 14ch; }
.end__big + p { margin-top: var(--sc-5) !important; }
.end > ul:not([class]) { display: block !important; margin: var(--sc-6) 0 !important; columns: 2; column-gap: var(--sc-6); }
.end > ul:not([class]) > li { break-inside: avoid; margin-bottom: var(--sc-2); }
.end__thesis { margin-top: var(--sc-7) !important; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); font-family: var(--sc-font-display); font-weight: 750; font-variation-settings: "wdth" 100; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; max-width: 30ch; }
.plate__lede { margin-top: var(--sc-5); max-width: 46ch; color: var(--sc-ink-soft); }

/* ------------------------------------------------ narrower --------- */
@media (max-width: 1180px) {
  .cs .figs dd { font-size: min(clamp(2rem, 0.6rem + 2.6vw, 3.4rem), 22cqi); }  /* the figure rows lose the margin column here */
  .cs { padding-left: var(--sc-gutter); }
  .wide { margin-left: 0; }
  .note { float: none; width: auto; margin: var(--sc-6) 0; padding: var(--sc-3) 0 0; max-width: 34rem; }
}
@media (max-width: 860px) {
  .cs { grid-template-columns: minmax(0, 1fr); }
  .cs__rail { grid-column: 1; grid-row: 1; position: static; max-height: none; overflow: visible; margin-bottom: var(--sc-8); padding: var(--sc-4) 0; border-block: 1px solid var(--sc-hairline-strong); font-size: var(--sc-t-sm); }
  .cs__rail ol { columns: 2; column-gap: var(--sc-5); border-left: 0; }
  .cs__rail a { padding: 0.25rem 0; border-left: 0; break-inside: avoid; }
  .cs__body { grid-row: 2; }
  .vs, .own, .schema, .pat, .changes, .ex { grid-template-columns: minmax(0, 1fr); }
  .end > ul:not([class]) { columns: 1; }
  .cs .figs > div { flex-direction: column-reverse; align-items: flex-start; gap: var(--sc-1); }
  .cs .figs dd { font-size: min(clamp(2.4rem, 11vw, 3.2rem), 22cqi); }
  .zones > li, .contract > div, .hb > div { grid-template-columns: minmax(0, 1fr); gap: var(--sc-2); }
  .hb__bar { width: calc(var(--of, var(--v)) / var(--max) * (100% - 8rem)); }
  .hb__between { margin-left: 0 !important; }
  .book { grid-template-columns: minmax(0, 1fr); }
  .book__ne { flex-direction: row; justify-content: center; }
  .book__ne span { writing-mode: horizontal-tb; transform: none; }
  .book__ne::after { display: none; }
  .tl > li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tl__t { text-align: left; padding: 0 0 var(--sc-2) var(--sc-6); border-left: 1px solid var(--sc-hairline-strong); }
  .sw__out b { display: block; min-width: 0; }
  .arch .sd > li.sd__fork { gap: 0.5rem; }
  .arch .sd__fork .sd__in, .arch .sd__fork .sd__out { left: calc((100% - 1rem) / 6); right: calc((100% - 1rem) / 6); }
  .sd__lane .sd__n { padding: 0.5rem; font-size: 0.8rem; }
  .loop { padding-right: 3.75rem; }
  .cad__gap { min-width: 0; height: 3.6rem; white-space: normal; text-align: center; font-size: var(--sc-t-xs); line-height: 1.1; }
}

/* A fourth kind of step for the architecture maps: stored data and external data sources. */
.t--data::before { background: repeating-linear-gradient(currentColor 0 1.5px, transparent 1.5px 3.1px); }
.sd__n.is-data { border-style: dashed; }

/* Small people counts beside a team: a half-filled dot is a part-time role. */
.vs__ppl i.pt { background: linear-gradient(to right, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px currentColor; }
.vs__out { margin: var(--sc-3) 0 0 !important; padding-top: var(--sc-3); border-top: 1px solid var(--sc-hairline-strong); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.vs__out b { display: block; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2rem, 1rem + 2.6vw, 3.2rem); line-height: 1; letter-spacing: -0.04em; color: var(--sc-ink); }
.vs__col--after .vs__out b { color: var(--pen); }
.vs__col .kicker { margin: var(--sc-2) 0 0 !important; }
.vs__col .kicker + ul { margin-top: calc(-1 * var(--sc-1)); }
.vs__col ul + .kicker { margin-top: var(--sc-4) !important; }