/* Reading layout for article pages (/Articles/). Load after landing.min.css.
   Fixes found in the 7 Oct 2026 reader audit; every rule is limited to the article body (.clean-block),
   except 7, which shows the hero headline without the fade-in. */

/* 1. Left-aligned text. Justified text leaves uneven gaps between words, worst on phones. */
.clean-block .p-justify,
.clean-block .ol-main,
.clean-block .ol-main li { text-align: left; }

/* 2. About 70 characters per line (64ch) (desktop lines ran to 100-125). Section 9 replaces this with one rem-based column. */
.clean-block .block-heading > p:not(.p-center),
.clean-block .block-heading > ul,
.clean-block .block-heading > h2,
.clean-block .block-heading > h3,
.clean-block .block-heading > h4,
.clean-block .block-heading > blockquote { max-width: 64ch; margin-left: auto; margin-right: auto; }
.clean-block .block-heading > ol,
.clean-block .block-heading > ol.ol-main { max-width: 64ch; margin-left: auto !important; margin-right: auto; padding-left: 2rem; }
.clean-block .block-heading > h2,
.clean-block .block-heading > h3 { text-wrap: balance; }

/* 3. Inline code stays inside its sentence. style.min.css turns every <code> into a grey block,
   which split sentences ("draw each input with [RAND()] and ...") and clipped the text. */
.clean-block p code,
.clean-block li code,
.clean-block td code { display: inline; margin: 0; padding: 0 .25em; border-radius: 3px; font-size: .92em;
  font-family: SFMono-Regular, Menlo, Consolas, monospace; color: #0C3E51; background: #EEF3F5; overflow-wrap: anywhere; }

/* 4. Tables never run off the screen. A table wider than the screen scrolls sideways inside its own box,
   with a visible scrollbar (the site hid it), and tall tables no longer scroll inside the page. */
.clean-block .table-responsive { max-height: none; overflow-x: auto; }
.clean-block .table-responsive::-webkit-scrollbar { height: 6px; }
.clean-block .table-responsive::-webkit-scrollbar-thumb { background: #C5CCD3; border-radius: 3px; }
@media (max-width: 767.98px) {
  .clean-block .block-heading table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .clean-block .table-responsive table { display: table; }
  /* Tables with five or more columns say that they scroll. */
  .clean-block .block-heading table:not(.stack-sm):has(tr > :nth-child(5))::before,
  .clean-block .table-responsive:has(table:not(.stack-sm) tr > :nth-child(5))::before {
    content: "Swipe the table sideways to see every column \2192"; display: block; position: sticky; left: 0;
    padding: .2rem 0 .4rem; font-size: .8rem; color: #5A6573; text-align: left; }
}

/* 5. Figures keep their shape while loading. */
.clean-block .block-heading img { height: auto; }

/* 6. Long formulas in their own line scroll sideways instead of widening the page on phones. */
.clean-block .block-heading > p.p-center { max-width: 100%; overflow-x: auto; }

/* 7. The headline shows at once. The shared appearingBox animation (landing.min.css) fades the hero title in from
   invisible over 3 seconds; on article pages it starts in its finished state. This file only loads on /Articles/. */
.main-hero .appearingBox { animation: none; opacity: 1; bottom: 20px; }

/* 8. Reusable pieces for article pages. */
/* "On this page" list under the opening answer. */
.clean-block .article-toc { max-width: 64ch; margin: 1.5rem auto 0; padding: 1rem 1.25rem; text-align: left; background: #F3F6F8; border-radius: 10px; }
.clean-block .article-toc strong { display: block; font-size: .95rem; margin-bottom: .4rem; color: #0C3E51; }
.clean-block .article-toc ol { margin: 0; padding-left: 1.25rem; columns: 2 16rem; column-gap: 2rem; font-size: .95rem; }
.clean-block .article-toc li { padding: 0; margin: 0 0 .3rem; float: none; width: auto; height: auto; text-align: left; break-inside: avoid; }
.clean-block .article-toc a { color: #0C3E51; }
/* A long formula on its own line: one line that scrolls sideways if it has to. */
.clean-block .article-formula { max-width: 64ch; margin: 0 auto 1rem; padding: .6rem .8rem; overflow-x: auto; white-space: nowrap; text-align: left;
  font: .9rem/1.5 SFMono-Regular, Menlo, Consolas, monospace; color: #0C3E51; background: #EEF3F5; border-radius: 6px; }
/* Comparison tables that turn into one card per row on phones (cells need data-label). */
@media (max-width: 767.98px) {
  .clean-block table.stack-sm, .clean-block .table-responsive table.stack-sm { display: block; }
  .clean-block table.stack-sm thead { display: none; }
  .clean-block table.stack-sm tbody, .clean-block table.stack-sm tr, .clean-block table.stack-sm td { display: block; width: 100%; }
  .clean-block table.stack-sm tr { margin-bottom: .75rem; border: 1px solid #DCE2E9; border-radius: 8px; overflow: hidden; }
  .clean-block table.stack-sm td { border: 0; padding: .35rem .75rem; }
  .clean-block table.stack-sm td:first-child { font-weight: 600; color: #0C3E51; background: #F3F6F8; padding-top: .55rem; padding-bottom: .55rem; }
  .clean-block table.stack-sm td:not(:first-child)::before { content: attr(data-label); display: block; font-size: .8rem; color: #5A6573; }
}

/* 9. One reading column (7 Oct re-audit). 64ch is measured in each element's own font, so headings
   (much larger type) were never capped and stayed centred across 1,100-1,300 px above a 627 px text column,
   while tables ran to the full container. Use rem so text, headings, lists, contents and formulas share one
   width and one left edge, and give tables, figures and the widget one shared wider width on the same axis. */
.clean-block { --kb-measure: 36rem; --kb-wide: 50rem; }
.clean-block .block-heading > p:not(.p-center),
.clean-block .block-heading > ul,
.clean-block .block-heading > ol,
.clean-block .block-heading > ol.ol-main,
.clean-block .block-heading > h2,
.clean-block .block-heading > h3,
.clean-block .block-heading > h4,
.clean-block .block-heading > blockquote,
.clean-block .article-toc,
.clean-block .article-formula { max-width: var(--kb-measure); margin-left: auto; margin-right: auto; }
.clean-block .block-heading > h2,
.clean-block .block-heading > h3,
.clean-block .block-heading > h4 { text-align: left; }
/* Body text one step larger: about 74 characters per line at 36rem. */
.clean-block .block-heading > p:not(.p-center),
.clean-block .block-heading > ul > li,
.clean-block .block-heading > ol > li { font-size: 1.0625rem; line-height: 1.7; }
/* Tables, figures and the interactive widget: one wider width, centred on the same axis as the text. */
.clean-block .block-heading > .table-responsive,
.clean-block .block-heading > table,
.clean-block .block-heading > p.p-center { max-width: var(--kb-wide); margin-left: auto; margin-right: auto; }
/* The interactive widget needs room for its slider column and chart side by side. */
.clean-block .block-heading > #sxw { max-width: 60rem; margin-left: auto; margin-right: auto; }
/* Pages built from nested boxes (IDW PS 340) get the same column. */
.clean-block .feature-box > p,
.clean-block .feature-box > ul,
.clean-block .feature-box > ol,
.clean-block .feature-box > h2,
.clean-block .feature-box > h3,
.clean-block .feature-box > h4,
.clean-block .feature-box > hr { max-width: var(--kb-measure); margin-left: auto; margin-right: auto; text-align: left; }
.clean-block .feature-box > p,
.clean-block .feature-box > ul > li,
.clean-block .feature-box > ol > li { font-size: 1.0625rem; line-height: 1.7; }
/* Breathing room between a table and the text that follows it. */
.clean-block .block-heading > .table-responsive,
.clean-block .block-heading > table { margin-bottom: 1.25rem !important; }  /* !important: some tables set margin:0 inline */
/* Multi-line cells read from the top of the row, not the middle (some tables set vertical-align:middle inline). */
.clean-block .block-heading table { vertical-align: top !important; }

/* 10. Tables. Every article table gets one designed look: a white card with rounded corners, a dark-teal header,
   hairline rows instead of grey stripes, and numbers in aligned columns. assets/js/article-tables.js adds the
   classes used below (t-num, t-vose, t-kv, t-grid, t-text, stack-sm); without it, tables keep the base look. */
.clean-block .block-heading table.table {
  --bs-table-bg: #fff; --bs-table-striped-bg: transparent; --bs-table-accent-bg: transparent;
  border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #D5DEE5; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(12, 62, 81, .05), 0 12px 28px -18px rgba(12, 62, 81, .35);
  font-size: .95rem; line-height: 1.5; color: #1E2532; font-variant-numeric: tabular-nums; text-align: left;
}
.clean-block .block-heading table.table > :not(caption) > * > * {
  padding: .7rem 1rem; border-width: 0 0 1px 0; border-style: solid; border-color: #E6ECF0; box-shadow: none; background-color: transparent; }
.clean-block .block-heading table.table > thead > tr > th {
  background-color: #0C3E51; color: #fff; font-weight: 600; font-size: .86rem; line-height: 1.35; vertical-align: bottom; border-bottom: 0; }
.clean-block .block-heading table.table > thead > tr:first-child > :first-child { border-top-left-radius: 11px; }
.clean-block .block-heading table.table > thead > tr:first-child > :last-child { border-top-right-radius: 11px; }
.clean-block .block-heading table.table > tbody > tr:last-child > * { border-bottom: 0; }
.clean-block .block-heading table.table > tbody > tr:last-child > :first-child { border-bottom-left-radius: 11px; }
.clean-block .block-heading table.table > tbody > tr:last-child > :last-child { border-bottom-right-radius: 11px; }
.clean-block .block-heading table.table > tbody > tr > :first-child { font-weight: 600; color: #0C3E51; }
@media (hover: hover) { .clean-block .block-heading table.table:not(.t-grid) > tbody > tr:hover > * { background-color: #F4F8FA; } }
/* Numbers line up on the right; a dash for "nothing" is greyed. */
.clean-block .block-heading table .t-num { text-align: right; white-space: nowrap; }
.clean-block .block-heading table .t-nil { color: #9AA6B2; }
/* Comparisons: the Vose product's column is tinted, with a blue header. */
.clean-block .block-heading table.table > thead > tr > th.t-vose { background-color: #1D64C0; }
.clean-block .block-heading table.table > tbody > tr > td.t-vose { background-color: #EEF5FC; color: #0C3E51; }
/* Result lists (a label and one number): the number is the point, so it is set in bold. */
.clean-block .block-heading table.t-kv > tbody > tr > :first-child { font-weight: 400; color: #1E2532; }
.clean-block .block-heading table.t-kv td.t-num { font-weight: 700; color: #0C3E51; font-size: 1.02rem; }
/* Text tables: the first column reads as a label. */
.clean-block .block-heading table.t-text > tbody > tr > :first-child { background-color: #F4F8FA; }
/* Two-way data tables: each cell is shaded by its value (red below zero, green above), set by the script. */
.clean-block .block-heading table.t-grid td.t-num { text-align: center; font-weight: 500; }
.clean-block .block-heading table.t-grid td.t-strong { color: #fff; }
.clean-block .block-heading table.t-grid > tbody > tr > :first-child { background-color: #F4F8FA; text-align: center; }
.clean-block .block-heading table.t-grid > tbody > tr > * { border-color: #fff; }
@media (max-width: 767.98px) {
  /* Wide number tables scroll with the first column pinned. */
  .clean-block .block-heading table.table:not(.stack-sm) > * > tr > :first-child { position: sticky; left: 0; z-index: 1; }
  .clean-block .block-heading table.table:not(.stack-sm) > tbody > tr > :first-child:not([style]) { background-color: #fff; box-shadow: 1px 0 0 #E6ECF0; }
  .clean-block .block-heading table.t-text:not(.stack-sm) > tbody > tr > :first-child { background-color: #F4F8FA; }
  /* Text tables become one card per row: the card replaces the table frame. */
  .clean-block .block-heading table.table.stack-sm { border: 0; box-shadow: none; background: transparent; border-radius: 0; }
  .clean-block .block-heading table.table.stack-sm > tbody > tr { background: #fff; border: 1px solid #D5DEE5; border-radius: 10px;
    box-shadow: 0 8px 20px -16px rgba(12, 62, 81, .35); }
  .clean-block .block-heading table.table.stack-sm > tbody > tr > * { border: 0; border-radius: 0; padding: .45rem .9rem; text-align: left; white-space: normal; }
  .clean-block .block-heading table.table.stack-sm > tbody > tr > :first-child { background-color: #0C3E51; color: #fff; padding: .6rem .9rem; }
}

/* 11. Article visuals (vz-). Charts, cards, steps and big numbers that replace tables where a table was the
   wrong shape for the data. Plain HTML and CSS, no script: bar lengths and positions are inline percentages
   written into the page, and every chart keeps its source table under "See the numbers", so the figures stay
   in the HTML for readers, Google and AI assistants. */
.vz { --vz-teal:#0C3E51; --vz-blue:#1D64C0; --vz-sky:#4E8BC4; --vz-ink:#1E2532; --vz-ink2:#5A6573; --vz-ink3:#8A95A2;
  --vz-line:#DCE3E8; --vz-tint:#F4F8FA; --vz-red:#C02A2A; --vz-green:#23704A; --vz-amber:#C77700;
  margin: 1.5rem auto 1.75rem; max-width: 50rem; color: var(--vz-ink); font-variant-numeric: tabular-nums; text-align: left; }
.vz-card { background:#fff; border:1px solid #D5DEE5; border-radius:12px; padding: 1.25rem 1.4rem 1.1rem;
  box-shadow: 0 1px 2px rgba(12,62,81,.05), 0 12px 28px -18px rgba(12,62,81,.35); }
.vz-title { font-size: 1.05rem; font-weight: 700; color: var(--vz-teal); margin: 0 0 .2rem; line-height: 1.35; }
.vz-sub { font-size: .9rem; color: var(--vz-ink2); margin: 0 0 1rem; line-height: 1.45; }
.vz-note { font-size: .82rem; color: var(--vz-ink2); margin: .9rem 0 0; line-height: 1.45; }
.vz details { margin-top: .9rem; font-size: .88rem; }
.vz summary { cursor: pointer; color: var(--vz-blue); font-weight: 600; }
.vz details table { margin-top: .6rem; }
.vz .vz-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vz details.vz-numbers > .table-responsive, .vz details.vz-numbers > table { margin-top: .6rem; }
.vz details.vz-numbers .table { margin-bottom: 0 !important; }
/* Horizontal bars */
.vz-bars { display: grid; gap: .55rem; }
.vz-bar { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: .9rem; align-items: center; }
.vz-bar-l { font-size: .9rem; font-weight: 600; color: var(--vz-teal); line-height: 1.25; }
.vz-bar-l small { display:block; font-weight: 400; color: var(--vz-ink2); font-size: .78rem; }
.vz-track { position: relative; height: 1.9rem; background: var(--vz-tint); border-radius: 6px; }
.vz-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--vz-sky); }
.vz-fill.is-key { background: var(--vz-teal); }
.vz-fill.is-good { background: var(--vz-green); }
.vz-fill.is-bad { background: var(--vz-red); }
.vz-val { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: .86rem; font-weight: 700; color: var(--vz-ink); padding-left: .5rem; }
.vz-val small { font-weight: 400; color: var(--vz-ink2); }
.vz-ref { position: absolute; top: -.35rem; bottom: -.35rem; border-left: 2px dashed var(--vz-ink3); }
.vz-ref-l { position: absolute; top: -1.35rem; transform: translateX(-50%); font-size: .72rem; color: var(--vz-ink2); white-space: nowrap; }
/* Range rows (P50 to P95 with markers) */
.vz-ranges { display: grid; gap: .7rem; }
.vz-range { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr minmax(4.5rem, 7.5rem); gap: .9rem; align-items: center; }
.vz-rtrack { position: relative; height: 1.6rem; }
.vz-rtrack::before { content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--vz-line); }
.vz-rbar { position: absolute; top: .45rem; bottom: .45rem; background: var(--vz-sky); border-radius: 4px; opacity: .85; }
.vz-rbar.is-key { background: var(--vz-green); }
.vz-dot { position: absolute; top: 50%; width: .8rem; height: .8rem; margin: -.4rem 0 0 -.4rem; border-radius: 50%; background: #fff; border: 2px solid var(--vz-teal); }
.vz-tick { position: absolute; top: .2rem; bottom: .2rem; width: 2px; margin-left: -1px; background: var(--vz-teal); }
.vz-side { font-size: .86rem; text-align: right; }
.vz-side b { display:block; font-size: 1rem; }
.vz-axisrow { margin-top: .3rem; }
.vz-axis { position: relative; height: 1.3rem; font-size: .74rem; color: var(--vz-ink2); }
.vz-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.vz-legend { display:flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .8rem; color: var(--vz-ink2); margin-top: .7rem; }
.vz-legend i { display:inline-block; vertical-align: middle; margin-right: .35rem; }
.vz-legend .vz-sw { width: .9rem; height: .6rem; border-radius: 2px; }
.vz-legend .vz-sw-tick { width: 2px; height: .9rem; background: var(--vz-teal); }
.vz-legend .vz-sw-dot { position: static; margin: 0 .35rem 0 0; }
/* Reference line: one line across all rows in the track column; per-track pieces on phones */
.vz-plot { position: relative; }
.vz-overlay { position: absolute; inset: -.4rem 0; pointer-events: none; }
.vz-olay { position: relative; align-self: stretch; }
.vz-ref-row { display: none; }
.vz-rtrack > * { z-index: 1; } .vz-rtrack > .vz-ref-row { z-index: 0; }
/* Dumbbells (before -> after on one scale) */
.vz-dumb .vz-rtrack .vz-link { position:absolute; top:50%; height:3px; margin-top:-1.5px; background: var(--vz-amber); }
.vz-dot.is-open { border-color: var(--vz-ink3); }
.vz-dot.is-fill { background: var(--vz-amber); border-color: var(--vz-amber); }
/* Steps */
.vz-steps { list-style: none; margin: 0; padding: 0; counter-reset: vzs; }
.vz-steps > li { position: relative; padding: 0 0 1.1rem 3.1rem; counter-increment: vzs; }
.vz-steps > li::before { content: counter(vzs); position:absolute; left:0; top:0; width:2.1rem; height:2.1rem; border-radius:50%;
  background: var(--vz-teal); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:.95rem; }
.vz-steps > li::after { content:""; position:absolute; left:1.02rem; top:2.3rem; bottom:.2rem; border-left:2px solid var(--vz-line); }
.vz-steps > li:last-child { padding-bottom: 0; } .vz-steps > li:last-child::after { display:none; }
.vz-steps h3 { margin: .25rem 0 .2rem; font-size: 1rem; color: var(--vz-teal); font-weight: 700; text-align: left; }
.vz-steps p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--vz-ink); }
/* Cards */
.vz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; }
.vz-cards > div { background:#fff; border:1px solid #D5DEE5; border-radius:12px; padding: 1rem 1.1rem; display:flex; flex-direction:column; gap:.45rem;
  box-shadow: 0 10px 24px -20px rgba(12,62,81,.45); border-top: 4px solid var(--vz-teal); }
.vz-cards h3 { margin:0; font-size:1.05rem; color: var(--vz-teal); font-weight:700; text-align:left; }
.vz-chip { align-self:flex-start; font-size:.74rem; font-weight:600; color: var(--vz-blue); background:#EAF2FB; border-radius:999px; padding:.15rem .6rem; }
.vz-cards p { margin:0; font-size:.9rem; line-height:1.5; color: var(--vz-ink); }
.vz-cards a { margin-top:auto; font-size:.88rem; font-weight:600; color: var(--vz-blue); text-decoration:none; }
/* Big numbers */
.vz-stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .9rem; }
.vz-stat { background: var(--vz-tint); border-radius: 10px; padding: .9rem 1rem; }
.vz-stat b { display:block; font-size: 1.75rem; line-height:1.1; color: var(--vz-teal); font-weight: 700; }
.vz-stat.is-alert b { color: var(--vz-red); }
.vz-stat span { display:block; font-size: .84rem; color: var(--vz-ink2); margin-top: .3rem; line-height: 1.4; }
@media (max-width: 600px) {
  .vz-card { padding: 1rem; }
  .vz-bar { grid-template-columns: 1fr; gap: .25rem; }
  .vz-track { height: auto; background: none; }
  .vz-track::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .9rem; background: var(--vz-tint); border-radius: 5px; }
  .vz-fill { position: relative; height: .9rem; border-radius: 5px; }
  .vz-val { position: static; transform: none; display: block; white-space: normal; padding: .3rem 0 0; }
  .vz-range { grid-template-columns: 1fr auto; } .vz-range .vz-rtrack { grid-column: 1 / -1; grid-row: 2; }
  .vz-overlay { display: none; } .vz-ref-row { display: block; top: -.2rem; bottom: -.2rem; }
  .vz-axisrow > span { display: none; } .vz-axisrow .vz-axis { grid-column: 1 / -1; }
}
/* Decision cards: a short label over each part */
.vz-cards .vz-k { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vz-ink2); margin: 0; }
.vz-cards .vz-k + p { margin-top: -.25rem; }
.vz-cards > div.is-key { border-top-color: var(--vz-blue); }
/* Likelihood x impact matrix (5 x 5) */
.vz-matrix { display: grid; grid-template-columns: 1.6rem 2.2rem repeat(5, minmax(0, 1fr)); gap: 3px; font-size: .78rem; }
.vz-matrix .vz-c { min-height: 3.6rem; border-radius: 4px; padding: .3rem; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: .2rem; text-align: center; }
.vz-matrix .vz-c.g { background: #DCEFE3; } .vz-matrix .vz-c.a { background: #FBE7C2; } .vz-matrix .vz-c.r { background: #F6D3D0; }
.vz-matrix .vz-c b { display: block; background: #fff; color: var(--vz-teal); border-radius: 999px; padding: .1rem .45rem; font-size: .74rem;
  line-height: 1.3; box-shadow: 0 1px 2px rgba(12,62,81,.2); }
.vz-matrix .vz-n { display: flex; align-items: center; justify-content: center; color: var(--vz-ink2); font-weight: 600; }
.vz-matrix .vz-ylab { grid-row: 1 / span 5; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; color: var(--vz-ink2);
  font-size: .76rem; display: flex; align-items: center; justify-content: center; }
.vz-matrix .vz-xlab { grid-column: 3 / -1; text-align: center; color: var(--vz-ink2); font-size: .76rem; }
.vz.vz-plain { background: none; border: 0; box-shadow: none; padding: 0; }
.vz-side b.vz-good { color: var(--vz-green); } .vz-side b.vz-bad { color: var(--vz-red); }
/* Card grids sized to their count, so no card sits alone in a row */
.vz-cards.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vz-cards.n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vz-cards.n5 > div { grid-column: span 2; } .vz-cards.n5 > div:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 600px) { .vz-axis .vz-minor { display: none; } .vz-cards.n4, .vz-cards.n5 { grid-template-columns: minmax(0, 1fr); } .vz-cards.n5 > div { grid-column: auto !important; } }

/* 12. Lists, figure text and spreadsheet formulas (8 Oct 2026). A plain <ul> in the article body inherited the
   centred text of .block-heading, so its bullet points were centred (Monte Carlo simulation in Excel). Text inside
   figures uses proportional figures: tabular-nums also widens the hyphen in this font ("three - point"). */
.clean-block .block-heading > ul,
.clean-block .block-heading > ul > li,
.clean-block .block-heading > ol > li { text-align: left; }
.vz-title, .vz-sub, .vz-note, .vz-steps, .vz-cards, .vz-bar-l { font-variant-numeric: normal; }
/* Spreadsheet formulas, one per row: what the cell holds, then the formula. Stacks on phones. */
.clean-block .xl-rows { max-width: var(--kb-measure); margin: 0 auto 1.25rem; padding: .3rem 1rem; text-align: left; background: #EEF3F5; border-radius: 8px; }
.clean-block .xl-rows > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: .1rem 1rem; padding: .5rem 0; border-top: 1px solid #D5DEE5; align-items: baseline; }
.clean-block .xl-rows > div:first-child { border-top: 0; }
.clean-block .xl-rows span { font-size: .9rem; line-height: 1.4; color: #5A6573; }
.clean-block .xl-rows code { display: block; margin: 0; padding: 0; border: 0; background: none; white-space: normal; overflow-wrap: anywhere;
  font: .92rem/1.5 SFMono-Regular, Menlo, Consolas, monospace; color: #0C3E51; }
@media (max-width: 575.98px) { .clean-block .xl-rows > div { grid-template-columns: minmax(0, 1fr); } }