/* ==========================================================================
   Explanatory illustrations
   --------------------------------------------------------------------------
   Shared by every illustration in the library. The rules they follow are in
   illustrations/README.md. Loaded after tokens.css, whose colours and fonts
   this file uses.
   ========================================================================== */

/* The figure is a paper panel, so an illustration can sit on a navy band as
   well as on the page. It is also the container the queries below measure. */
.illo {
  --illo-pad: clamp(12px, 3vw, 20px);
  box-sizing: border-box;
  max-width: calc(640px + 2 * var(--illo-pad));
  margin: 32px 0 0;
  padding: var(--illo-pad);
  background: var(--paper);
  container-type: inline-size;
}
@media (max-width: 768px) {
  .illo { margin-top: 24px; }
}

.illo-svg {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
}
.illo-svg text {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.illo figcaption {
  margin-top: 12px;
  max-width: none;
  font-family: var(--font-sans);
  font-size: var(--t-15);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* ── Two drawings, one chart ──
   Text inside an SVG scales with it, so a single drawing that keeps its
   labels at 12px on a phone would set them at twice that at full width. Each
   illustration is drawn twice, wide and narrow, and the font size steps down
   as the panel grows, which keeps every label between 12px and about 14.5px
   from a 360px screen up. Rendered size is font-size x width / viewBox width,
   and a step can only shrink text, so a layout checked at its largest size
   stays clear at all the others. */
.illo-wide { display: none; }
.illo-narrow { font-size: 13px; }
@container (min-width: 340px) { .illo-narrow { font-size: 11.4px; } }
@container (min-width: 400px) { .illo-narrow { font-size: 9.8px; } }
@container (min-width: 460px) {
  .illo-narrow { display: none; }
  .illo-wide { display: block; font-size: 16.7px; }
}
@container (min-width: 540px) { .illo-wide { font-size: 14.5px; } }

/* ── The one draw-in ──
   illustrations.js marks a figure data-draw="ready", then "play" the first
   time it is scrolled into view, then "done", which matches nothing here, so
   showing the other drawing later cannot replay it. Without the script, or
   with reduced motion, the attribute stays empty and the chart is simply
   there. Bars grow in sequence, 70ms apart over 180ms each, about 600ms in
   all: totals up from the axis, steps down from the running total. */
.illo-up   { transform-box: fill-box; transform-origin: 50% 100%; }
.illo-down { transform-box: fill-box; transform-origin: 50% 0; }

.illo[data-draw="ready"] .illo-bar { transform: scaleY(0); }
.illo[data-draw="ready"] .illo-link,
.illo[data-draw="ready"] .illo-value { opacity: 0; }

.illo[data-draw="play"] .illo-bar {
  animation: illo-grow 180ms cubic-bezier(0.3, 0.7, 0.4, 1) calc(var(--n) * 70ms) backwards;
}
.illo[data-draw="play"] .illo-link {
  animation: illo-show 120ms linear calc(var(--n) * 70ms) backwards;
}
.illo[data-draw="play"] .illo-value {
  animation: illo-show 120ms linear calc(var(--n) * 70ms + 140ms) backwards;
}
@keyframes illo-grow { from { transform: scaleY(0); } }
@keyframes illo-show { from { opacity: 0; } }

/* ── 01 below a 600px screen: the waterfall on its side ──
   One row per step, the label on the left and the bar running right, so no
   label has to turn. Its labels are level, so the font starts at 15.3 (12px
   in the 248px panel of a 320px screen) and steps down as the panel grows.
   Totals grow from the zero line and steps back from the running total, as
   the wide drawing's grow up and drop down. */
@media (max-width: 599.98px) {
  .illo[data-draw] .illo-wide { display: none; }
  .illo[data-draw] .illo-narrow { display: block; }
}
@media (min-width: 600px) {
  .illo[data-draw] .illo-wide { display: block; }
  .illo[data-draw] .illo-narrow { display: none; }
}
.illo[data-draw] .illo-across { font-size: 15.3px; }
@container (min-width: 288px) { .illo[data-draw] .illo-across { font-size: 13px; } }
@container (min-width: 340px) { .illo[data-draw] .illo-across { font-size: 11.4px; } }
@container (min-width: 400px) { .illo[data-draw] .illo-across { font-size: 9.8px; } }
@container (min-width: 460px) { .illo[data-draw] .illo-across { font-size: 8.4px; } }
.illo-from-left  { transform-box: fill-box; transform-origin: 0 50%; }
.illo-from-right { transform-box: fill-box; transform-origin: 100% 50%; }
.illo[data-draw="ready"] .illo-across .illo-bar { transform: scaleX(0); }
.illo[data-draw="play"] .illo-across .illo-bar { animation-name: illo-grow-x; }
@keyframes illo-grow-x { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .illo[data-draw] .illo-bar,
  .illo[data-draw] .illo-across .illo-bar { transform: none; animation: none; }
  .illo[data-draw] .illo-link,
  .illo[data-draw] .illo-value { opacity: 1; animation: none; }
}
@media print {
  .illo[data-draw] .illo-bar,
  .illo[data-draw] .illo-across .illo-bar { transform: none; animation: none; }
  .illo[data-draw] .illo-link,
  .illo[data-draw] .illo-value { opacity: 1; animation: none; }
}

/* ==========================================================================
   02 · The product mix
   --------------------------------------------------------------------------
   An interactive chart on the Pricing & Optimization Toolkit page: a slider
   over three readouts, the two drawings, and a legend, in the panel the
   calculators' charts use (raised paper, a hairline, 24px of padding). The
   page carries the $50 state, so it is complete before illustrations.js
   runs. No motion: the chart redraws as the slider moves. Everything below
   is scoped to .illo-mix.
   ========================================================================== */
.illo-mix {
  --illo-pad: 24px;
  background: var(--paper-raised); border: 1px solid var(--rule);
}
/* 11px a side below a 344px screen, which keeps the narrow drawing 248px wide */
@media (max-width: 343.98px) { .illo-mix { padding: 24px 11px; } }
.illo-mix .illo-note { display: block; margin-top: 4px; font-size: var(--t-13); color: var(--ink-muted); }


/* The narrow drawing starts one step above the shared scale, so its labels
   stay at 12px or more down to a 320px screen, where the panel is 248px. */
.illo-mix .illo-narrow { font-size: 15.1px; }
@container (min-width: 288px) { .illo-mix .illo-narrow { font-size: 13px; } }
@container (min-width: 340px) { .illo-mix .illo-narrow { font-size: 11.4px; } }
@container (min-width: 400px) { .illo-mix .illo-narrow { font-size: 9.8px; } }

.mix-control { margin-bottom: 18px; }
.mix-control-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px;
}
.mix-control label {
  font-family: var(--font-sans); font-size: var(--t-15); line-height: 1.4; color: var(--ink);
}
.mix-m {
  flex: none;
  font-family: var(--font-sans); font-size: var(--t-17); font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
/* The slider in the site's colours: a slate track, which holds 5.4:1 against
   the paper, and a gold thumb with a navy edge. 06's, 09's and 10's sliders
   share it. */
.mix-control input[type="range"],
.avg-control input[type="range"],
.wc-control input[type="range"],
.vb-control input[type="range"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 22px; margin: 8px 0 0; padding: 0;
  background: transparent; cursor: pointer;
}
.mix-control input[type="range"]::-webkit-slider-runnable-track,
.avg-control input[type="range"]::-webkit-slider-runnable-track,
.wc-control input[type="range"]::-webkit-slider-runnable-track,
.vb-control input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; border: 0; background: var(--ink-muted);
}
.mix-control input[type="range"]::-webkit-slider-thumb,
.avg-control input[type="range"]::-webkit-slider-thumb,
.wc-control input[type="range"]::-webkit-slider-thumb,
.vb-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 18px; height: 18px; margin-top: -8px; border-radius: 50%;
  background: var(--signal-bright); border: 2px solid var(--ink);
}
.mix-control input[type="range"]::-moz-range-track,
.avg-control input[type="range"]::-moz-range-track,
.wc-control input[type="range"]::-moz-range-track,
.vb-control input[type="range"]::-moz-range-track {
  height: 2px; border: 0; background: var(--ink-muted);
}
.mix-control input[type="range"]::-moz-range-thumb,
.avg-control input[type="range"]::-moz-range-thumb,
.wc-control input[type="range"]::-moz-range-thumb,
.vb-control input[type="range"]::-moz-range-thumb {
  box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%;
  background: var(--signal-bright); border: 2px solid var(--ink);
}
.mix-control input[type="range"]:focus-visible,
.avg-control input[type="range"]:focus-visible,
.wc-control input[type="range"]:focus-visible,
.vb-control input[type="range"]:focus-visible {
  outline: 2px solid var(--signal-bright); outline-offset: 3px;
}

/* Three readouts in a row, each under a hairline. The subgrid lines up the
   labels, values and the line under the third across all three. */
.mix-readouts {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 16px;
  margin: 0 0 18px;
}
.mix-readout {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  min-width: 0; padding-top: 10px; border-top: 1px solid var(--rule);
}
.mix-readout dt {
  font-family: var(--font-mono); font-size: var(--t-13); line-height: 1.35;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted);
}
.mix-readout dd { margin: 0; }
.mix-v {
  margin-top: 6px;
  font-family: var(--font-sans); font-size: var(--t-17); font-weight: 500; line-height: 1.3;
  color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.mix-gap {
  margin-top: 2px;
  font-family: var(--font-sans); font-size: var(--t-13); line-height: 1.4; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.mix-gap.is-loss { color: var(--adverse); }
@media (max-width: 599.98px) {
  .mix-readouts { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
}

.mix-legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.mix-legend li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--t-13); line-height: 1.4; color: var(--ink);
}
.mix-legend svg { flex: none; }

/* ==========================================================================
   03 · The rank flip and the value of the constraint
   --------------------------------------------------------------------------
   Two charts in one panel on the Constraint Mix Calculator: side by side
   when each can be 461px wide, one above the other below that. The panel
   matches the calculator's result boxes. The wide drawings show from a
   600px screen and the narrow ones below it, and the font steps keep every
   label at 12px or more; illustrations.js lays each drawing out at its
   largest step. Everything below is scoped to .illo-rank.
   ========================================================================== */
.illo-rank {
  max-width: none; margin: 0;
  background: var(--paper-raised); border: 1px solid var(--rule);
}
.illo-rank .rank-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@container (min-width: 962px) {
  .illo-rank .rank-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}
.illo-rank .rank-block { min-width: 0; container-type: inline-size; }

.illo-rank .illo-wide { display: block; font-size: 16.7px; }
@container (min-width: 540px) { .illo-rank .illo-wide { font-size: 14.5px; } }
.illo-rank .illo-narrow { display: none; font-size: 15.3px; }
@container (min-width: 288px) { .illo-rank .illo-narrow { font-size: 13px; } }
@container (min-width: 340px) { .illo-rank .illo-narrow { font-size: 11.4px; } }
@container (min-width: 400px) { .illo-rank .illo-narrow { font-size: 9.8px; } }
@container (min-width: 460px) { .illo-rank .illo-narrow { font-size: 8.4px; } }
@media (max-width: 599.98px) {
  .illo-rank .illo-wide { display: none; }
  .illo-rank .illo-narrow { display: block; }
}

.illo-rank .rank-note {
  margin: 12px 0 0; max-width: none;
  font-family: var(--font-sans); font-size: var(--t-13); line-height: 1.5; color: var(--ink-muted);
}
.illo-rank .rank-note:empty { display: none; }
.illo-rank figcaption { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--rule); }
.illo-rank figcaption a { color: var(--signal); font-weight: 500; text-decoration: none; }
.illo-rank figcaption a:hover { text-decoration: underline; }

/* ==========================================================================
   04 · The break-even curve of a price move
   --------------------------------------------------------------------------
   One chart in a panel matching the calculator's result boxes, under the
   verdict. The wide drawing shows from a 600px screen while the chart is at
   least 461px wide, and the narrow one otherwise: in this calculator's two
   columns the results column is narrower than that from 901px to 1053px. The font steps keep every label at 12px or more. Everything below
   is scoped to .illo-promo.
   ========================================================================== */
.illo-promo {
  max-width: none; margin: 0; padding: 22px 24px;
  background: var(--paper-raised); border: 1px solid var(--rule);
}
/* the result boxes' padding, except below a 344px screen, where it would take the narrow
   drawing under the 246px that keeps its labels at 12px */
@media (max-width: 343.98px) { .illo-promo { padding: 22px 12px; } }
.illo-promo .promo-block { min-width: 0; container-type: inline-size; }

.illo-promo .illo-wide { display: block; font-size: 16.7px; }
@container (min-width: 540px) { .illo-promo .illo-wide { font-size: 14.5px; } }
.illo-promo .illo-narrow { display: none; font-size: 15.3px; }
@container (min-width: 288px) { .illo-promo .illo-narrow { font-size: 13px; } }
@container (min-width: 340px) { .illo-promo .illo-narrow { font-size: 11.4px; } }
@container (min-width: 400px) { .illo-promo .illo-narrow { font-size: 9.8px; } }
@container (min-width: 460px) { .illo-promo .illo-narrow { font-size: 8.4px; } }
@container (max-width: 460.98px) {
  .illo-promo .illo-wide { display: none; }
  .illo-promo .illo-narrow { display: block; }
}
@media (max-width: 599.98px) {
  .illo-promo .illo-wide { display: none; }
  .illo-promo .illo-narrow { display: block; }
}

.illo-promo .promo-legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.illo-promo .promo-legend li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--t-13); line-height: 1.4; color: var(--ink);
}
.illo-promo .promo-legend svg { flex: none; }

/* ==========================================================================
   05 · Price or service
   --------------------------------------------------------------------------
   One chart in a panel matching the calculator's result boxes, directly
   after "What would fix it", with its legend and three lines of text under
   it. The wide drawing shows from a 600px screen while the chart is at
   least 461px wide, and the narrow one otherwise, as in 04. The font steps
   keep every label at 12px or more. Everything below is scoped to
   .illo-cts.
   ========================================================================== */
.illo-cts {
  max-width: none; margin: 0; padding: 24px;
  background: var(--paper-raised); border: 1px solid var(--rule);
}
/* the result boxes' padding, except below a 344px screen, where it would take the narrow
   drawing under the 246px that keeps its labels at 12px */
@media (max-width: 343.98px) { .illo-cts { padding: 24px 12px; } }
.illo-cts .cts-block { min-width: 0; container-type: inline-size; }

.illo-cts .illo-wide { display: block; font-size: 16.7px; }
@container (min-width: 540px) { .illo-cts .illo-wide { font-size: 14.5px; } }
.illo-cts .illo-narrow { display: none; font-size: 15.3px; }
@container (min-width: 288px) { .illo-cts .illo-narrow { font-size: 13px; } }
@container (min-width: 340px) { .illo-cts .illo-narrow { font-size: 11.4px; } }
@container (min-width: 400px) { .illo-cts .illo-narrow { font-size: 9.8px; } }
@container (min-width: 460px) { .illo-cts .illo-narrow { font-size: 8.4px; } }
@container (max-width: 460.98px) {
  .illo-cts .illo-wide { display: none; }
  .illo-cts .illo-narrow { display: block; }
}
@media (max-width: 599.98px) {
  .illo-cts .illo-wide { display: none; }
  .illo-cts .illo-narrow { display: block; }
}

.illo-cts .cts-legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.illo-cts .cts-legend li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--t-13); line-height: 1.4; color: var(--ink);
}
.illo-cts .cts-legend svg { flex: none; }
.illo-cts figcaption { margin-top: 16px; }
.illo-cts figcaption p { margin: 0; }
.illo-cts figcaption p + p { margin-top: 6px; }

/* ==========================================================================
   06 · The flaw of averages
   --------------------------------------------------------------------------
   The homepage hero, in the paper panel 02 used there: two sliders (02's)
   over three readouts, the two drawings, a legend and a line of context.
   The wide drawing shows from a 600px screen while the chart is at least
   461px wide, and the narrow one otherwise. The font steps keep every label
   at 12px or more. Everything below is scoped to .illo-avg.
   ========================================================================== */
.illo-avg .avg-controls {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 18px;
}
@container (min-width: 560px) {
  .illo-avg .avg-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}
.illo-avg .avg-control-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px;
}
.illo-avg .avg-control label {
  font-family: var(--font-sans); font-size: var(--t-15); line-height: 1.4; color: var(--ink);
}
.illo-avg .avg-m {
  flex: none;
  font-family: var(--font-sans); font-size: var(--t-17); font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}

/* Three readouts in a row, each under a hairline, as 02's. */
.illo-avg .avg-readouts {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 16px;
  margin: 0 0 18px;
}
.illo-avg .avg-readout {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  min-width: 0; padding-top: 10px; border-top: 1px solid var(--rule);
}
.illo-avg .avg-readout dt {
  font-family: var(--font-mono); font-size: var(--t-13); line-height: 1.35;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted);
}
.illo-avg .avg-readout dd { margin: 0; }
.illo-avg .avg-v {
  margin-top: 6px;
  font-family: var(--font-sans); font-size: var(--t-17); font-weight: 500; line-height: 1.3;
  color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.illo-avg .avg-gap {
  margin-top: 2px;
  font-family: var(--font-sans); font-size: var(--t-13); line-height: 1.4; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.illo-avg .avg-v.is-loss,
.illo-avg .avg-gap.is-loss { color: var(--adverse); }
@media (max-width: 599.98px) {
  .illo-avg .avg-readouts { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
}

.illo-avg .avg-block { min-width: 0; container-type: inline-size; }
.illo-avg .illo-wide { display: block; font-size: 16.7px; }
@container (min-width: 540px) { .illo-avg .illo-wide { font-size: 14.5px; } }
.illo-avg .illo-narrow { display: none; font-size: 15.3px; }
@container (min-width: 288px) { .illo-avg .illo-narrow { font-size: 13px; } }
@container (min-width: 340px) { .illo-avg .illo-narrow { font-size: 11.4px; } }
@container (min-width: 400px) { .illo-avg .illo-narrow { font-size: 9.8px; } }
@container (min-width: 460px) { .illo-avg .illo-narrow { font-size: 8.4px; } }
@container (max-width: 460.98px) {
  .illo-avg .illo-wide { display: none; }
  .illo-avg .illo-narrow { display: block; }
}
@media (max-width: 599.98px) {
  .illo-avg .illo-wide { display: none; }
  .illo-avg .illo-narrow { display: block; }
}

.illo-avg .avg-legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.illo-avg .avg-legend li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--t-13); line-height: 1.4; color: var(--ink);
}
.illo-avg .avg-legend svg { flex: none; }
.illo-avg .avg-context {
  margin: 10px 0 0; max-width: none;
  font-family: var(--font-sans); font-size: var(--t-13); line-height: 1.5; color: var(--ink-muted);
}

/* ==========================================================================
   07 · 100 plausible actuals
   --------------------------------------------------------------------------
   One chart in a panel matching the calculator's result boxes, directly
   after the verdict, with its legend and two lines of text under it. The
   wide drawing shows from a 600px screen while the chart is at least 461px
   wide, and the narrow one otherwise, as in 04 and 05. The font steps keep
   every label at 12px or more. Everything below is scoped to .illo-fh.
   ========================================================================== */
.illo-fh {
  max-width: none; margin: 0; padding: 24px;
  background: var(--paper-raised); border: 1px solid var(--rule);
}
/* the result boxes' padding, except below a 344px screen, where it would take the narrow
   drawing under the 246px that keeps its labels at 12px */
@media (max-width: 343.98px) { .illo-fh { padding: 24px 12px; } }
.illo-fh .fh-block { min-width: 0; container-type: inline-size; }

.illo-fh .illo-wide { display: block; font-size: 16.7px; }
@container (min-width: 540px) { .illo-fh .illo-wide { font-size: 14.5px; } }
.illo-fh .illo-narrow { display: none; font-size: 15.3px; }
@container (min-width: 288px) { .illo-fh .illo-narrow { font-size: 13px; } }
@container (min-width: 340px) { .illo-fh .illo-narrow { font-size: 11.4px; } }
@container (min-width: 400px) { .illo-fh .illo-narrow { font-size: 9.8px; } }
@container (min-width: 460px) { .illo-fh .illo-narrow { font-size: 8.4px; } }
@container (max-width: 460.98px) {
  .illo-fh .illo-wide { display: none; }
  .illo-fh .illo-narrow { display: block; }
}
@media (max-width: 599.98px) {
  .illo-fh .illo-wide { display: none; }
  .illo-fh .illo-narrow { display: block; }
}

.illo-fh .fh-legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.illo-fh .fh-legend li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--t-13); line-height: 1.4; color: var(--ink);
}
.illo-fh .fh-legend svg { flex: none; }
.illo-fh figcaption { margin-top: 16px; }
.illo-fh figcaption p { margin: 0; }
.illo-fh figcaption p + p { margin-top: 6px; font-size: var(--t-13); color: var(--ink-muted); }

/* ==========================================================================
   08 · Size against signal
   --------------------------------------------------------------------------
   One chart in a panel matching the calculator's result boxes, after the
   results, with its legend and a line of text under it. The wide drawing
   shows from a 600px screen while the chart is at least 461px wide, and the
   narrow one otherwise, as in 04 to 07. The font steps keep every label at
   12px or more. Where the panel is wider than the drawing, the drawing and
   its legend sit centred in it. Everything below is scoped to .illo-vs.
   ========================================================================== */
.illo-vs {
  max-width: none; margin: 0; padding: 24px;
  background: var(--paper-raised); border: 1px solid var(--rule);
}
@media (max-width: 343.98px) { .illo-vs { padding: 24px 12px; } }
.illo-vs .vs-block { min-width: 0; container-type: inline-size; }

.illo-vs .illo-wide { display: block; font-size: 16.7px; }
@container (min-width: 540px) { .illo-vs .illo-wide { font-size: 14.5px; } }
.illo-vs .illo-narrow { display: none; font-size: 15.3px; }
@container (min-width: 288px) { .illo-vs .illo-narrow { font-size: 13px; } }
@container (min-width: 340px) { .illo-vs .illo-narrow { font-size: 11.4px; } }
@container (min-width: 400px) { .illo-vs .illo-narrow { font-size: 9.8px; } }
@container (min-width: 460px) { .illo-vs .illo-narrow { font-size: 8.4px; } }
@container (max-width: 460.98px) {
  .illo-vs .illo-wide { display: none; }
  .illo-vs .illo-narrow { display: block; }
}
@media (max-width: 599.98px) {
  .illo-vs .illo-wide { display: none; }
  .illo-vs .illo-narrow { display: block; }
}

.illo-vs .vs-legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.illo-vs .vs-legend li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--t-13); line-height: 1.4; color: var(--ink);
}
.illo-vs .vs-legend svg { flex: none; }
/* the ring's entry, only while a line is ringed */
.illo-vs .vs-legend li[hidden] { display: none; }
/* where the panel is wider than the 640px drawing (954px from a 1,100px screen), the drawing and its
   legend sit centred in it, in a column the drawing's width, so the labels keep their size */
.illo-vs .vs-draw { max-width: 640px; margin: 0 auto; }
.illo-vs .vs-legend { max-width: 640px; margin-left: auto; margin-right: auto; }
.illo-vs figcaption { margin-top: 16px; }
.illo-vs figcaption p { margin: 0; }

/* ==========================================================================
   09 · The whale curve
   --------------------------------------------------------------------------
   In "The Revenue You Should Want to Lose", in the panel the calculators'
   charts use: two sliders (02's), three readouts, the two drawings, a legend
   and the caption. The wide drawing shows from a 600px screen while the
   chart is at least 461px wide, and the narrow one otherwise. The font steps
   keep every label at 12px or more. The article styles its own lists and
   paragraphs, so the panel sets its own. Everything below is scoped to
   .illo-wc.
   ========================================================================== */
.illo-wc {
  max-width: none; margin: 2rem 0; padding: 24px;
  background: var(--paper-raised); border: 1px solid var(--rule);
}
@media (max-width: 343.98px) { .illo-wc { padding: 24px 12px; } }
.illo-wc .wc-controls {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 18px;
}
.illo-wc .wc-control-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px;
}
.illo-wc .wc-control label {
  font-family: var(--font-sans); font-size: var(--t-15); line-height: 1.4; color: var(--ink);
}
.illo-wc .wc-m {
  flex: none;
  font-family: var(--font-sans); font-size: var(--t-17); font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}

.illo-wc .wc-readouts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; margin: 0 0 18px;
}
.illo-wc .wc-readout {
  display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  min-width: 0; padding-top: 10px; border-top: 1px solid var(--rule);
}
.illo-wc .wc-readout dt {
  font-family: var(--font-mono); font-size: var(--t-13); line-height: 1.35;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted);
}
.illo-wc .wc-readout dd { margin: 0; }
.illo-wc .wc-v {
  margin-top: 6px;
  font-family: var(--font-sans); font-size: var(--t-17); font-weight: 500; line-height: 1.3;
  color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.illo-wc .wc-v.is-loss { color: var(--adverse); }
@media (max-width: 599.98px) {
  .illo-wc .wc-readouts { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
}

.illo-wc .wc-block { min-width: 0; container-type: inline-size; }
.illo-wc .illo-wide { display: block; font-size: 16.7px; }
@container (min-width: 540px) { .illo-wc .illo-wide { font-size: 14.5px; } }
.illo-wc .illo-narrow { display: none; font-size: 15.3px; }
@container (min-width: 288px) { .illo-wc .illo-narrow { font-size: 13px; } }
@container (min-width: 340px) { .illo-wc .illo-narrow { font-size: 11.4px; } }
@container (min-width: 400px) { .illo-wc .illo-narrow { font-size: 9.8px; } }
@container (min-width: 460px) { .illo-wc .illo-narrow { font-size: 8.4px; } }
@container (max-width: 460.98px) {
  .illo-wc .illo-wide { display: none; }
  .illo-wc .illo-narrow { display: block; }
}
@media (max-width: 599.98px) {
  .illo-wc .illo-wide { display: none; }
  .illo-wc .illo-narrow { display: block; }
}

.illo-wc .wc-legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.illo-wc .wc-legend li {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--font-sans); font-size: var(--t-13); line-height: 1.4; color: var(--ink);
}
.illo-wc .wc-legend svg { flex: none; }
.illo-wc figcaption { margin-top: 16px; }
.illo-wc .illo-note { display: block; margin-top: 4px; font-size: var(--t-13); color: var(--ink-muted); }

/* ==========================================================================
   10 · 100 plausible customers
   --------------------------------------------------------------------------
   On the Value-Based Price Calculator. Its one input of its own, "How sure
   you are of that value", sits in the calculator's input panel under the
   ceiling: 02's slider, taken out of the panel's text-field look, with its
   value beside its label. The chart is in a panel matching the result boxes,
   after "A price set from value instead": three readouts, then two charts,
   each with its heading and legend, and two lines of text. Each chart is
   drawn wide and narrow; the wide drawing shows from a 600px screen while the
   chart is at least 461px wide, as in 04 to 09, and the font steps keep every
   label at 12px or more. Everything below is scoped to .vb-control and
   .illo-vb.
   ========================================================================== */
.vb-control-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px;
}
.vb-m {
  flex: none;
  font-family: var(--font-sans); font-size: var(--t-15); font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.calc-panel .vb-control input[type="range"],
.calc-panel .vb-control input[type="range"]:hover {
  box-sizing: border-box; width: 100%; min-width: 0; margin: 2px 0 0; padding: 0;
  border: 0; border-radius: 0; background-color: transparent;
}
.calc-panel .vb-control input[type="range"]:focus { outline: none; border: 0; }
.calc-panel .vb-control input[type="range"]:focus-visible { outline: 2px solid var(--signal-bright); outline-offset: 3px; }

.illo-vb {
  max-width: none; margin: 0; padding: 24px;
  background: var(--paper-raised); border: 1px solid var(--rule);
}
/* the result boxes' padding, except below a 344px screen, where it would take the narrow drawings under
   the 246px that keeps their labels at 12px */
@media (max-width: 343.98px) { .illo-vb { padding: 24px 12px; } }

/* three readouts in a row, each under a hairline, as 06's */
.illo-vb .vb-readouts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; margin: 0 0 24px;
}
.illo-vb .vb-readout {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  min-width: 0; padding-top: 10px; border-top: 1px solid var(--rule);
}
.illo-vb .vb-readout dt {
  font-family: var(--font-mono); font-size: var(--t-13); line-height: 1.35;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted);
}
.illo-vb .vb-readout dd { margin: 0; }
.illo-vb .vb-v {
  margin-top: 6px;
  font-family: var(--font-sans); font-size: var(--t-17); font-weight: 500; line-height: 1.3;
  color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.illo-vb .vb-v.is-loss { color: var(--adverse); }
.illo-vb .vb-gap {
  margin-top: 2px;
  font-family: var(--font-sans); font-size: var(--t-13); line-height: 1.4; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
@media (max-width: 599.98px) {
  .illo-vb .vb-readouts { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
}

.illo-vb .vb-block { min-width: 0; container-type: inline-size; }
.illo-vb .illo-wide { display: block; font-size: 16.7px; }
@container (min-width: 540px) { .illo-vb .illo-wide { font-size: 14.5px; } }
.illo-vb .illo-narrow { display: none; font-size: 15.3px; }
@container (min-width: 288px) { .illo-vb .illo-narrow { font-size: 13px; } }
@container (min-width: 340px) { .illo-vb .illo-narrow { font-size: 11.4px; } }
@container (min-width: 400px) { .illo-vb .illo-narrow { font-size: 9.8px; } }
@container (min-width: 460px) { .illo-vb .illo-narrow { font-size: 8.4px; } }
@container (max-width: 460.98px) {
  .illo-vb .illo-wide { display: none; }
  .illo-vb .illo-narrow { display: block; }
}
@media (max-width: 599.98px) {
  .illo-vb .illo-wide { display: none; }
  .illo-vb .illo-narrow { display: block; }
}
/* the second chart's heading, a little further from the first chart's legend than a heading from its chart */
.illo-vb .vb-sub-curve { margin-top: 28px; }

.illo-vb .vb-legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.illo-vb .vb-legend li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--t-13); line-height: 1.4; color: var(--ink);
}
.illo-vb .vb-legend svg { flex: none; }
.illo-vb figcaption { margin-top: 20px; }
.illo-vb figcaption p { margin: 0; }
.illo-vb figcaption p + p { margin-top: 6px; font-size: var(--t-13); color: var(--ink-muted); }