/* The case studies page (/case-studies, site/pages/case-studies.html). Ported from the approved kit
   page v21: the kit's case study base, its layout rules, the generated figure rules and the v21 design,
   kept rule for rule where a rule styles something on this page, every value unchanged. The page sets
   the body class case-studies (site/partials/layout-case-studies.html); this file loads on no other page. */
/* Case study v4: numbers first, one table, no charts. Georgia headings, Arial text, hairline rules, one blue for Dominus and IRIS. */
:root {
  --cs-paper: #ffffff;
  --cs-ink: #000000;
  --cs-meta: #737373;
  --cs-grey: #5c5f63;
  --cs-rule: #d3d8de;
  --cs-soft: #e4e4e4;
  --cs-iris: #1650e8;
  --cs-tint: #f4f5f6;
  --cs-display: Georgia, "Times New Roman", serif;
  --cs-text: Arial, Helvetica, sans-serif;
}
html,
body {
  background: var(--cs-paper);
  color: var(--cs-ink);
}
.page-shell {
  padding-left: max(var(--page-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--page-gutter), env(safe-area-inset-right, 0px));
}
.cs {
  max-width: 80rem;
  margin: 0 auto 4rem;
  font-family: var(--cs-text);
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: break-word;
}
.cs p,
.cs li,
.cs dt,
.cs dd,
.cs td,
.cs th,
.cs summary,
.cs label {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.cs h2 {
  margin: 0;
  font-family: var(--cs-display);
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cs a:not(.button) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #b9bdc2;
  text-underline-offset: 0.2em;
}
.cs a:not(.button):hover {
  text-decoration-color: currentColor;
}
.cs-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}
.cs-cta .button {
  gap: 0.75rem;
}
.cs .cs-cta p {
  color: var(--cs-grey);
}
.cs sup.fn {
  font-size: 1rem;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.125rem;
}
.cs sup.fn a {
  text-decoration: none;
  color: var(--cs-meta);
}
/* 3. Results against benchmarks */
.cs-res {
  width: 100%;
  margin-top: 1.25rem;
  border-collapse: collapse;
}
.cs-res th,
.cs-res td {
  padding: 0.75rem 0 0.75rem 1.5rem;
  text-align: right;
  vertical-align: baseline;
  border-bottom: 1px solid var(--cs-rule);
}
.cs-res th:first-child,
.cs-res td:first-child {
  width: 31%;
  padding-left: 0;
  text-align: left;
}
.cs-res thead th {
  font-weight: 400;
  font-size: 1rem;
  color: var(--cs-meta);
  border-bottom: 1px solid var(--cs-ink);
}
/* 6. Notes */
.cs-notes {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cs-rule);
  color: var(--cs-grey);
}
.cs-notes ol {
  margin: 0;
  padding-left: 1.5rem;
}
.cs .cs-notes li {
  font-size: 1rem;
}
.cs .cs-notes li + li {
  margin-top: 0.25rem;
}
@media (max-width: 47.99rem) {
  .cs-res thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cs-res,
  .cs-res tbody,
  .cs-res tr,
  .cs-res td {
    display: block;
    width: 100%;
  }
  .cs-res tr {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--cs-rule);
  }
  .cs-res tr:first-child {
    border-top: 1px solid var(--cs-ink);
  }
  .cs-res td,
  .cs-res td:first-child {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.125rem 0;
    border: 0;
  }
  .cs-res td::before {
    content: attr(data-label);
    flex: none;
    font-weight: 400;
    color: var(--cs-meta);
    text-align: left;
  }
  .cs-res td:first-child {
    padding-bottom: 0.25rem;
    font-weight: 700;
  }
  .cs-res td:first-child::before {
    content: none;
  }
}
/* variation kit */
/* Variation kit layouts. Site palette only, no gradients, shadows or blur, nothing under 16 px.
   Large type (28 px or more) only on .k-h1, .is-large and .cs-big. Everything else is 16 to 26 px. */
.cs .k-sec {
  margin-top: 4rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cs-ink);
}
.cs .k-sec.k-first {
  margin-top: 0;
  padding-top: 3rem;
  border-top: 0;
}
.cs .k-sec.t-tint {
  padding: 2.5rem;
  background: var(--cs-tint);
  border-top: 0;
}
.cs .k-sec > * + * {
  margin-top: 1rem;
}
.cs .k-sec > .cs-cta {
  margin-top: 1.75rem;
}
/* text */
.cs .k-eyebrow {
  color: var(--cs-meta);
  font-size: 1rem;
}
.cs .k-sec .k-h1 {
  max-width: 44rem;
  margin-top: 0.75rem;
  font-family: var(--cs-display);
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.cs .k-line {
  max-width: 40rem;
  text-wrap: pretty;
}
/* stats */
.cs .k-stat .k-val {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.cs .k-stat.is-large .k-val {
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
}
.cs .k-stat .k-mean {
  max-width: 26rem;
  margin-top: 0.375rem;
  color: var(--cs-grey);
}
.cs .k-stats {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
}
.cs .k-stats.n-1 {
  --cols: 1;
}
.cs .k-stats > .k-stat {
  padding-top: 1rem;
  border-top: 1px solid var(--cs-rule);
}
/* lists, steps, teasers, q and a */
.cs .k-list,
.cs .k-steps,
.cs .k-teasers {
  --cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 0 2.5rem;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
.cs .k-list li,
.cs .k-steps li,
.cs .k-teasers li {
  padding: 0.75rem 0;
  border-top: 1px solid var(--cs-rule);
}
/* tables */
.cs .k-sec > .cs-res {
  margin-top: 1.25rem;
}
/* layout: split, split-wide, aside (rows-N set by the renderer) */
.cs .l-split,
.cs .l-split-wide,
.cs .l-aside {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: 4.5rem;
  row-gap: 0;
  align-items: start;
}
.cs .l-aside {
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  column-gap: 3rem;
}
.cs .l-aside > * {
  grid-column: 2;
}
.cs .l-aside > .k-side {
  grid-column: 1;
  margin-top: 0;
}
.cs .l-aside > .k-side + * {
  margin-top: 0;
}
/* bars: horizontal, to scale from zero; label left, value at the bar end; widths are written per page */
.cs .k-bars { margin: 0; }
.cs .k-sec > .k-bars + .k-bars { margin-top: 2rem; }
.cs .k-bars .k-bars-t { font-weight: 700; }
.cs .k-bar-rows { display: grid; gap: 0.625rem; margin-top: 0.75rem; }
.cs .k-bar { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0 1.25rem; align-items: center; }
.cs .k-bar-l { font-size: 1rem; line-height: 1.35; color: var(--cs-grey); }
.cs .k-bar-track { display: flex; align-items: center; gap: 0.625rem; min-width: 0; padding-right: 4.5rem; }
.cs .k-bar-fill { flex: none; display: block; height: 1.5rem; background: #b5b5b5; }
.cs .k-bar.is-acc .k-bar-fill { background: var(--cs-iris); }
.cs .k-bar-v { flex: none; font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs .k-bar.is-acc .k-bar-v,
.cs .k-bar.is-acc .k-bar-l { color: var(--cs-iris); }
.cs .k-bars .k-bars-c { margin-top: 0.625rem; color: var(--cs-grey); }
@media (max-width: 47.99rem) {
  .cs .k-bar { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .cs .k-bar-track { padding-right: 4rem; }
}
.cs .k-lg-range::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 1rem;
  background: #dfe6ef;
  border-top: 2px solid var(--cs-grey);
}
.cs .k-lg-read::before {
  content: "";
  flex: none;
  order: -2;
  width: 1.5rem;
  border-top: 3px solid var(--cs-iris);
}
.cs .k-lg-read::after {
  content: "";
  flex: none;
  order: -1;
  width: 1.25rem;
  border-top: 4px dotted var(--cs-iris);
}
.cs .k-fr {
  opacity: 0;
}
.cs .k-fr.is-last {
  opacity: 1;
}
.cs .k-st {
  padding: 0.375rem 0.875rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  border: 2px solid #dfe6ef;
  color: var(--cs-meta);
  background: #ffffff;
  white-space: nowrap;
}
.cs .k-st-act {
  color: #ffffff;
  background: var(--cs-iris);
  border-color: var(--cs-iris);
}
@media (max-width: 47.99rem) {
  .cs .k-st {
    padding: 0.25rem 0.625rem;
    font-size: 1rem;
  }
}
.cs .k-sec.c-3 :is(.k-stats, .k-steps, .k-teasers) { --cols: 3; }
@media (max-width: 47.99rem) {
  .cs .k-sec.k-first {
    padding-top: 2rem;
  }
  .cs .k-sec {
    margin-top: 3rem;
    padding-top: 1.5rem;
  }
  .cs .k-sec.t-tint,
  .cs .l-band {
    padding: 1.5rem 1rem;
  }
  .cs .k-sec .k-h1 {
    font-size: 2rem;
  }
  .cs .l-split,
  .cs .l-split-wide,
  .cs .l-aside {
    display: block;
  }
  .cs .l-split > .k-side,
  .cs .l-split-wide > .k-side,
  .cs .l-aside > * + * {
    margin-top: 1.25rem;
  }
  .cs .k-stats,
  .cs .c-2 .k-stats,
  .cs .c-3 .k-stats,
  .cs .c-4 .k-stats,
  .cs .l-wall .k-stats {
    --cols: 1;
  }
  .cs .k-stat.is-large .k-val,
  .cs .l-sheet .k-stat.is-large .k-val,
  .cs .l-wall .k-stat.is-large .k-val {
    font-size: 3rem;
  }
  .cs .k-sec.k-sec :is(.k-stats, .k-steps, .k-teasers) { --cols: 1; }
}
.k-sec.rows-1 { grid-template-rows: repeat(1, auto) 1fr; }
.k-sec.rows-1 > .k-side { grid-row: 1 / span 2; }
.k-sec.rows-2 { grid-template-rows: repeat(2, auto) 1fr; }
.k-sec.rows-2 > .k-side { grid-row: 1 / span 3; }
.k-sec.rows-3 { grid-template-rows: repeat(3, auto) 1fr; }
.k-sec.rows-3 > .k-side { grid-row: 1 / span 4; }
.k-sec.rows-4 { grid-template-rows: repeat(4, auto) 1fr; }
.k-sec.rows-4 > .k-side { grid-row: 1 / span 5; }
.cs .k-bar-fill.bw-q-compare-1-0 { width: 9.901%; }
.cs .k-bar-fill.bw-q-compare-1-1 { width: 14.059%; }
.cs .k-bar-fill.bw-q-compare-1-2 { width: 100.000%; }
.cs .k-bar-fill.bw-q-compare-2-0 { width: 100.000%; }
.cs .k-bar-fill.bw-q-compare-2-1 { width: 17.130%; }
.cs .k-bar-fill.bw-q-compare-3-0 { width: 100.000%; }
.cs .k-bar-fill.bw-q-compare-3-0 { --k-ref: 93.803%; }
.cs .k-bar-fill.bw-q-compare-3-1 { width: 93.803%; }
.cs .k-fig.kf-q-limits-1 { --kf-lim: 0.14286; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes kf-q-limits-1-0 { 0% { opacity: 1; } 5.983% { opacity: 0; } 100% { opacity: 0; } }
  #kf-q-limits-1-0 { animation: kf-q-limits-1-0 11.7s step-end infinite; }
  @keyframes kf-q-limits-1-1 { 0% { opacity: 0; } 5.983% { opacity: 1; } 11.966% { opacity: 0; } 100% { opacity: 0; } }
  #kf-q-limits-1-1 { animation: kf-q-limits-1-1 11.7s step-end infinite; }
  @keyframes kf-q-limits-1-2 { 0% { opacity: 0; } 11.966% { opacity: 1; } 17.949% { opacity: 0; } 100% { opacity: 0; } }
  #kf-q-limits-1-2 { animation: kf-q-limits-1-2 11.7s step-end infinite; }
  @keyframes kf-q-limits-1-3 { 0% { opacity: 0; } 17.949% { opacity: 1; } 23.932% { opacity: 0; } 100% { opacity: 0; } }
  #kf-q-limits-1-3 { animation: kf-q-limits-1-3 11.7s step-end infinite; }
  @keyframes kf-q-limits-1-4 { 0% { opacity: 0; } 23.932% { opacity: 1; } 29.915% { opacity: 0; } 100% { opacity: 0; } }
  #kf-q-limits-1-4 { animation: kf-q-limits-1-4 11.7s step-end infinite; }
  @keyframes kf-q-limits-1-5 { 0% { opacity: 0; } 29.915% { opacity: 1; } 35.897% { opacity: 0; } 100% { opacity: 0; } }
  #kf-q-limits-1-5 { animation: kf-q-limits-1-5 11.7s step-end infinite; }
  @keyframes kf-q-limits-1-6 { 0% { opacity: 0; } 35.897% { opacity: 1; } 41.88% { opacity: 0; } 100% { opacity: 0; } }
  #kf-q-limits-1-6 { animation: kf-q-limits-1-6 11.7s step-end infinite; }
  @keyframes kf-q-limits-1-7 { 0% { opacity: 0; } 41.88% { opacity: 1; } 47.863% { opacity: 0; } 100% { opacity: 0; } }
  #kf-q-limits-1-7 { animation: kf-q-limits-1-7 11.7s step-end infinite; }
  @keyframes kf-q-limits-1-8 { 0% { opacity: 0; } 47.863% { opacity: 1; } 53.846% { opacity: 0; } 100% { opacity: 0; } }
  #kf-q-limits-1-8 { animation: kf-q-limits-1-8 11.7s step-end infinite; }
  @keyframes kf-q-limits-1-9 { 0% { opacity: 0; } 53.846% { opacity: 1; } 59.829% { opacity: 0; } 100% { opacity: 0; } }
  #kf-q-limits-1-9 { animation: kf-q-limits-1-9 11.7s step-end infinite; }
  @keyframes kf-q-limits-1-10 { 0% { opacity: 0; } 59.829% { opacity: 1; } 65.812% { opacity: 0; } 100% { opacity: 0; } }
  #kf-q-limits-1-10 { animation: kf-q-limits-1-10 11.7s step-end infinite; }
  @keyframes kf-q-limits-1-11 { 0% { opacity: 0; } 65.812% { opacity: 1; } 71.795% { opacity: 0; } 100% { opacity: 0; } }
  #kf-q-limits-1-11 { animation: kf-q-limits-1-11 11.7s step-end infinite; }
  @keyframes kf-q-limits-1-12 { 0% { opacity: 0; } 71.795% { opacity: 1; } 77.778% { opacity: 0; } 100% { opacity: 0; } }
  #kf-q-limits-1-12 { animation: kf-q-limits-1-12 11.7s step-end infinite; }
  @keyframes kf-q-limits-1-13 { 0% { opacity: 0; } 77.778% { opacity: 1; } 100% { opacity: 1; } }
  #kf-q-limits-1-13 { animation: kf-q-limits-1-13 11.7s step-end infinite; }
  #kf-q-limits-1-hit { animation: kf-q-limits-1-13 11.7s step-end infinite; }
  @keyframes kf-q-limits-1-keep { 0% { color: #ffffff; background-color: #000000; } 77.778% { color: #5c5f63; background-color: #e4e4e4; } 100% { color: #5c5f63; background-color: #e4e4e4; } }
  @keyframes kf-q-limits-1-act { 0% { color: #5c5f63; background-color: #e4e4e4; } 77.778% { color: #ffffff; background-color: #1650e8; } 100% { color: #ffffff; background-color: #1650e8; } }
  .cs .k-fig.kf-q-limits-1 .k-st-keep { animation: kf-q-limits-1-keep 11.7s step-end infinite; }
  .cs .k-fig.kf-q-limits-1 .k-st-act { animation: kf-q-limits-1-act 11.7s step-end infinite; }
}
/* design file kit/designs/v21.css, scoped under body.case-studies */
/* v21 design pass, fix round 1. One system: design-pass/DESIGN-SYSTEM.md. Eight text styles: display, stat, heading, statement, body, label, data, note. */
/* numerals: Georgia has only old-style digits. Stat values are set in the data voice (Arial 700). Every serif line (h1, statements) takes its digits, lining, from Times New Roman, the next font of the site's serif stack */
@font-face {
  font-family: "cs-digits";
  src: local("Times New Roman"), local("TimesNewRomanPSMT");
  unicode-range: U+30-39;
}
body.case-studies {
  --cs-display: "cs-digits", Georgia, "Times New Roman", serif;
}
/* body 18 px and note 16 px */
body.case-studies .cs p,
body.case-studies .cs li,
body.case-studies .cs td,
body.case-studies .cs th {
  font-size: 1.125rem;
  line-height: 1.5;
  text-wrap: pretty;
}
body.case-studies .cs .k-sec .k-eyebrow {
  font-size: 1rem;
  color: var(--cs-grey);
}
body.case-studies .cs sup.fn {
  font-family: var(--cs-text);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}
body.case-studies .cs sup.fn a {
  color: var(--cs-grey);
}
body.case-studies .cs .k-sec .k-line {
  max-width: 40rem;
}
/* section pattern: rule, heading in columns 1 to 4, content in columns 5 to 12 */
body.case-studies .cs .k-sec {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cs-ink);
}
body.case-studies .cs .k-sec.l-aside {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2rem;
}
body.case-studies .cs .k-sec.l-aside > * {
  grid-column: 5 / -1;
}
body.case-studies .cs .k-sec.l-aside > .k-side {
  grid-column: 1 / span 4;
}
body.case-studies .cs .k-sec .k-h2 {
  font-family: var(--cs-display);
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (min-width: 48rem) {
  body.case-studies .cs .k-sec.l-aside > .k-side {
    position: sticky;
    top: 1.5rem;
    align-self: start;
  }
}
/* bands: the same grid, the ground runs out through the page gutters (edge to edge up to the site's 90rem shell), no rule */
body.case-studies .cs .k-sec.t-tint,
body.case-studies .cs .k-sec[aria-labelledby="h-close"] {
  position: relative;
  isolation: isolate;
  padding: 2.5rem 0;
  background: none;
  border-top: 0;
}
body.case-studies .cs .k-sec.t-tint::before,
body.case-studies .cs .k-sec[aria-labelledby="h-close"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--page-gutter));
  right: calc(-1 * var(--page-gutter));
  background: var(--cs-tint);
}
body.case-studies .cs .k-sec[aria-labelledby="h-close"] {
  padding: 3rem 0;
  color: #ffffff;
}
body.case-studies .cs .k-sec[aria-labelledby="h-close"]::before {
  background: var(--cs-ink);
}
body.case-studies .cs .k-sec[aria-labelledby="h-close"] > .k-line {
  max-width: 36rem;
  color: #ffffff;
}
body.case-studies .cs .k-sec[aria-labelledby="h-close"] .button {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}
body.case-studies .cs .k-sec[aria-labelledby="h-close"] .button:focus-visible {
  outline-color: #ffffff;
}
/* statement: the sentence a reader must not miss */
body.case-studies .cs .k-sec .k-bars .k-bars-c,
body.case-studies .cs .k-sec .cs-cta > p,
body.case-studies .cs .k-sec.t-tint > .k-line,
body.case-studies .cs .k-sec[aria-labelledby="h-close"] > .k-line,
body.case-studies .cs .k-sec[aria-labelledby="h-setup"] > .k-line,
body.case-studies .cs .k-sec .k-table td:last-child {
  font-family: var(--cs-display);
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* hero: display h1 on two lines, the proof row between two 2 px rules, the ask */
body.case-studies .cs .k-sec.k-first {
  display: flex;
  flex-direction: column;
  min-height: min(calc(100svh - 9.75rem), 46.5rem);
  margin-top: 0;
  padding: 3.5rem 0 0;
  border-top: 0;
}
body.case-studies .cs .k-sec .k-h1 {
  max-width: 13.4em;
  margin: 0.75rem 0 3rem;
  font-family: var(--cs-display);
  font-size: 5rem;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: wrap;
}
body.case-studies .cs .k-sec .k-h1 .k-nw {
  white-space: nowrap;
}
body.case-studies .cs .k-sec.k-first > .k-stats {
  gap: 0;
  margin: auto 0 2.25rem;
  border-top: 2px solid var(--cs-ink);
  border-bottom: 2px solid var(--cs-ink);
}
body.case-studies .cs .k-sec.k-first .k-stats > .k-stat {
  padding: 2rem 2rem 2rem 0;
}
body.case-studies .cs .k-sec.k-first .k-stats > .k-stat + .k-stat {
  padding-left: 2rem;
  border-left: 1px solid var(--cs-rule);
}
body.case-studies .cs .k-sec.k-first > .cs-cta {
  margin-top: auto;
}
/* stat: one style for every stat value, in the data voice so the digits are lining and the zero is a zero */
body.case-studies .cs .k-sec .k-stats > .k-stat {
  border-top: 0;
}
body.case-studies .cs .k-sec .k-stat .k-val {
  font-family: var(--cs-text);
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cs-iris);
}
body.case-studies .cs .k-sec .k-stat .k-mean {
  max-width: 24rem;
  margin-top: 0.75rem;
  color: var(--cs-ink);
}
body.case-studies .cs .k-sec.l-aside .k-stats > .k-stat {
  padding-top: 0;
}
body.case-studies .cs .k-sec[aria-labelledby="h-q-money"] .k-stat .k-val {
  color: var(--cs-ink);
}
/* ask: statement line, then the button; the same in all three places */
body.case-studies .cs .k-sec .cs-cta {
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
body.case-studies .cs .k-sec .cs-cta > p {
  order: -1;
  color: inherit;
}
body.case-studies .cs .k-sec .cs-cta .button {
  min-height: 3.5rem;
  padding-inline: 1.5rem;
  font-size: 1.125rem;
}
/* lists: ruled rows, text capped at about 68 characters */
body.case-studies .cs .k-sec .k-list {
  gap: 0 2rem;
}
body.case-studies .cs .k-sec .k-list li {
  padding: 0.875rem max(0px, calc(100% - 40rem)) 0.875rem 0;
  border-top: 1px solid var(--cs-rule);
}
body.case-studies .cs .k-sec[aria-labelledby="h-study"] .k-list {
  --cols: 2;
}
body.case-studies .cs .k-sec[aria-labelledby="h-study"] .k-list li:nth-child(-n + 2) {
  padding-top: 0;
  border-top: 0;
}
body.case-studies .cs .k-sec .k-line + .k-list {
  margin-top: 0.75rem;
}
/* spec card: black frame, hairline cells, key over value; the column header stays in the markup for screen readers */
body.case-studies .cs .k-sec .k-table {
  display: block;
  width: 100%;
  margin-top: 0;
  border: 1px solid var(--cs-ink);
}
body.case-studies .cs .k-sec .k-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body.case-studies .cs .k-sec .k-table tbody {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.case-studies .cs .k-sec .k-table tr {
  display: block;
  padding: 1.125rem 1.5rem 1.25rem;
  border: 0;
  border-top: 1px solid var(--cs-rule);
  border-left: 1px solid var(--cs-rule);
}
body.case-studies .cs .k-sec .k-table td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  text-align: left;
}
body.case-studies .cs .k-sec .k-table td::before {
  content: none;
}
body.case-studies .cs .k-sec .k-table td:first-child {
  font-size: 1rem;
  font-weight: 400;
  color: var(--cs-grey);
}
body.case-studies .cs .k-sec .k-table td:last-child {
  margin-top: 0.25rem;
}
/* the never-writes line: a statement between two 2 px rules, closing the setup card */
body.case-studies .cs .k-sec[aria-labelledby="h-setup"] .k-table {
  border-bottom: 0;
}
body.case-studies .cs .k-sec[aria-labelledby="h-setup"] > .k-line {
  max-width: none;
  margin-top: 0;
  padding: 1.125rem 1.5rem 1.25rem;
  border-top: 2px solid var(--cs-ink);
  border-bottom: 2px solid var(--cs-ink);
  color: var(--cs-ink);
}
@media (min-width: 48rem) {
  body.case-studies .cs .k-sec .k-table tr:nth-child(3n + 1) {
    border-left: 0;
  }
  body.case-studies .cs .k-sec .k-table tr:nth-child(-n + 3) {
    border-top: 0;
  }
}
/* site port, 768 to 799 px only: the three card columns are too narrow there for "preheater" and
   "shutdown" at the desktop statement size, and the words broke inside (measured from 768 to 792 px,
   none from 800 px up or below 768 px). In that band the cells take the phone's padding and statement
   size from the design system, so every word stays whole. */
@media (min-width: 48rem) and (max-width: 49.99rem) {
  body.case-studies .cs .k-sec .k-table tr {
    padding: 0.875rem 1rem 1rem;
  }
  body.case-studies .cs .k-sec .k-table td:last-child {
    font-size: 1.375rem;
  }
}
/* chart: the Dominus row first, thick bars on white tracks, value at the bar end, takeaway as a statement */
body.case-studies .cs .k-sec .k-bars .k-bars-t {
  max-width: none;
  font-weight: 700;
  text-wrap: pretty;
}
body.case-studies .cs .k-sec .k-bar-rows {
  gap: 0.5rem;
  margin-top: 0.875rem;
}
body.case-studies .cs .k-sec .k-bar {
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 0 1.25rem;
}
body.case-studies .cs .k-sec .k-bar.is-acc {
  order: -1;
}
body.case-studies .cs .k-sec .k-bar-l {
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--cs-ink);
}
body.case-studies .cs .k-sec .k-bar.is-acc .k-bar-l {
  font-weight: 700;
  color: var(--cs-iris);
}
body.case-studies .cs .k-sec .k-bar-track {
  gap: 0.75rem;
  height: 2.5rem;
  padding-right: 5.5rem;
  background: #ffffff;
}
body.case-studies .cs .k-sec .k-bar-fill {
  height: 100%;
  background: #8a9097;
}
body.case-studies .cs .k-sec .k-bar.is-acc .k-bar-fill {
  background: var(--cs-iris);
}
body.case-studies .cs .k-sec .k-bar-fill.has-ref {
  position: relative;
}
body.case-studies .cs .k-sec .k-bar-fill.has-ref::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--k-ref);
  width: 2px;
  margin-left: -1px;
  background: #ffffff;
}
body.case-studies .cs .k-sec .k-bar-v {
  font-size: 1.5rem;
  color: var(--cs-ink);
}
body.case-studies .cs .k-sec .k-bar.is-acc .k-bar-v {
  color: var(--cs-iris);
}
body.case-studies .cs .k-sec .k-bars .k-bars-c {
  margin-top: 1rem;
  color: var(--cs-ink);
}
body.case-studies .cs .k-sec > .k-bars + .k-bars {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid #c3c7cc;
}
/* figure: status bar, plot, legend, caption (frames and timing come from render.py) */
body.case-studies .cs .k-fig {
  --kf-h: 25rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "st st" "plot plot" "rg rd" "cap cap";
  column-gap: 2rem;
  align-items: start;
  margin: 0;
}
body.case-studies .cs .k-fig .k-fig-legend {
  display: contents;
}
body.case-studies .cs .k-fig .k-fig-status {
  grid-area: st;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 1.25rem;
}
body.case-studies .cs .k-fig .k-st {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  border: 0;
  color: #5c5f63;
  background-color: #e4e4e4;
}
body.case-studies .cs .k-fig .k-st::before {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: currentColor;
}
body.case-studies .cs .k-fig .k-st-act {
  color: #ffffff;
  background-color: #1650e8;
}
body.case-studies .cs .k-fig .k-fig-svg {
  grid-area: plot;
  display: block;
  width: 100%;
  height: var(--kf-h);
  overflow: visible;
  background: #ffffff;
}
body.case-studies .cs .k-fig .k-fig-svg * {
  vector-effect: non-scaling-stroke;
}
body.case-studies .cs .k-fig .kf-wash {
  fill: #e4e4e4;
  fill-opacity: 0.7;
}
body.case-studies .cs .k-fig .kf-hatch line {
  stroke: #b9bdc2;
  stroke-width: 1;
}
body.case-studies .cs .k-fig .kf-axis {
  fill: none;
  stroke: #000000;
  stroke-width: 1.5;
}
body.case-studies .cs .k-fig .kf-right {
  stroke: #b9bdc2;
  stroke-width: 1;
}
body.case-studies .cs .k-fig .kf-limit {
  stroke: #000000;
  stroke-width: 2;
}
body.case-studies .cs .k-fig .kf-band {
  fill: #d3d8de;
}
body.case-studies .cs .k-fig .kf-low {
  fill: none;
  stroke: #8a9097;
  stroke-width: 1;
  stroke-linejoin: round;
}
body.case-studies .cs .k-fig .kf-pedge {
  fill: none;
  stroke: #000000;
  stroke-width: 1;
  stroke-linejoin: round;
}
body.case-studies .cs .k-fig .kf-edge {
  fill: none;
  stroke: #000000;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
body.case-studies .cs .k-fig .kf-now {
  stroke: #8a9097;
  stroke-width: 1.5;
}
body.case-studies .cs .k-fig .kf-read {
  fill: none;
  stroke: #1650e8;
  stroke-width: 3.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
body.case-studies .cs .k-fig .kf-dot {
  fill: none;
  stroke: #1650e8;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0 8;
}
body.case-studies .cs .k-fig .kf-pts {
  fill: none;
  stroke: #1650e8;
  stroke-width: 9;
  stroke-linecap: round;
}
body.case-studies .cs .k-fig .kf-out {
  fill: none;
  stroke: #1650e8;
  stroke-width: 12;
  stroke-linecap: round;
}
body.case-studies .cs .k-fig .kf-outc {
  fill: none;
  stroke: #ffffff;
  stroke-width: 8;
  stroke-linecap: round;
}
body.case-studies .cs .k-fig .kf-headr {
  fill: none;
  stroke: #ffffff;
  stroke-width: 20;
  stroke-linecap: round;
}
body.case-studies .cs .k-fig .kf-head {
  fill: none;
  stroke: #1650e8;
  stroke-width: 14;
  stroke-linecap: round;
}
body.case-studies .cs .k-fig .kf-headc {
  fill: none;
  stroke: #ffffff;
  stroke-width: 8;
  stroke-linecap: round;
}
body.case-studies .cs .k-fig .kf-hit {
  fill: none;
  stroke: #1650e8;
  stroke-width: 28;
  stroke-linecap: round;
}
body.case-studies .cs .k-fig .kf-hitc {
  fill: none;
  stroke: #ffffff;
  stroke-width: 18;
  stroke-linecap: round;
}
body.case-studies .cs .k-fig .k-lg {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 1rem 0 0;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--cs-ink);
}
body.case-studies .cs .k-fig .k-lg-limit {
  grid-area: plot;
  z-index: 1;
  align-self: start;
  justify-self: start;
  margin: calc(var(--kf-h) * var(--kf-lim) - 0.73rem) 0 0 0.5rem;
  padding: 0 0.375rem;
  font-weight: 700;
  background: #ffffff;
}
body.case-studies .cs .k-fig .k-lg-range {
  grid-area: rg;
}
body.case-studies .cs .k-fig .k-lg-read {
  grid-area: rd;
  justify-self: start;
}
body.case-studies .cs .k-fig .k-lg-range::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 1.125rem;
  background: #d3d8de;
  border-top: 2px solid #000000;
  border-bottom: 1px solid #8a9097;
}
body.case-studies .cs .k-fig .k-lg-read::before {
  content: "";
  flex: none;
  order: -2;
  width: 1.75rem;
  height: 0;
  border-top: 4px solid #1650e8;
}
body.case-studies .cs .k-fig .k-lg-read::after {
  content: "";
  flex: none;
  order: -1;
  width: 1.625rem;
  height: 0;
  border-top: 5px dotted #1650e8;
}
body.case-studies .cs .k-fig .k-fig-cap {
  grid-area: cap;
  margin-top: 0.625rem;
  font-size: 1rem;
  color: var(--cs-grey);
}
/* under the figure: the stat, and the two answers aligned with the second segment of the status bar */
@media (min-width: 48rem) {
  body.case-studies .cs .k-sec[aria-labelledby="h-q-limits"] > .k-stats {
    grid-column: 5 / span 4;
    grid-row: 2 / span 2;
    margin-top: 2rem;
  }
  body.case-studies .cs .k-sec[aria-labelledby="h-q-limits"] > .k-line {
    grid-column: 9 / -1;
    margin-left: -1rem;
  }
  body.case-studies .cs .k-sec[aria-labelledby="h-q-limits"] > .k-stats + .k-line {
    grid-row: 2;
    margin-top: 2rem;
  }
  body.case-studies .cs .k-sec[aria-labelledby="h-q-limits"] > .k-line + .k-line {
    grid-row: 3;
    margin-top: 0.75rem;
  }
}
/* notes */
body.case-studies .cs {
  margin-bottom: 1.5rem;
}
body.case-studies .cs .cs-notes {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cs-rule);
  color: var(--cs-grey);
}
body.case-studies .cs .cs-notes ol {
  columns: 2;
  column-gap: 3rem;
}
body.case-studies .cs .cs-notes li {
  font-size: 1rem;
  break-inside: avoid;
}
@media (max-width: 79.99rem) {
  body.case-studies .cs .k-sec .k-h1 {
    font-size: 4rem;
  }
}
@media (max-width: 47.99rem) {
  body.case-studies .cs .k-sec {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
  }
  body.case-studies .cs .k-sec.k-first {
    min-height: 0;
    margin-top: 0;
    padding: 2rem 0 0;
  }
  body.case-studies .cs .k-sec .k-h1 {
    max-width: none;
    margin-bottom: 2rem;
    font-size: 2.25rem;
    line-height: 1.06;
    text-wrap: balance;
  }
  body.case-studies .cs .k-sec .k-h2 {
    font-size: 1.75rem;
  }
  body.case-studies .cs .k-sec.l-aside > .k-side + * {
    margin-top: 1.25rem;
  }
  body.case-studies .cs .k-sec .k-stat .k-val {
    font-size: 2.75rem;
  }
  body.case-studies .cs .k-sec.k-first > .k-stats {
    margin: 0 0 1.75rem;
  }
  body.case-studies .cs .k-sec.k-first .k-stats > .k-stat,
  body.case-studies .cs .k-sec.k-first .k-stats > .k-stat + .k-stat {
    padding: 1.25rem 0;
    border-left: 0;
  }
  body.case-studies .cs .k-sec.k-first .k-stats > .k-stat + .k-stat {
    border-top: 1px solid var(--cs-rule);
  }
  body.case-studies .cs .k-sec.k-first > .cs-cta {
    margin-top: 0;
  }
  body.case-studies .cs .k-sec .cs-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  body.case-studies .cs .k-sec .k-bars .k-bars-c,
  body.case-studies .cs .k-sec .cs-cta > p,
  body.case-studies .cs .k-sec.t-tint > .k-line,
  body.case-studies .cs .k-sec[aria-labelledby="h-close"] > .k-line,
  body.case-studies .cs .k-sec[aria-labelledby="h-setup"] > .k-line,
  body.case-studies .cs .k-sec .k-table td:last-child {
    font-size: 1.375rem;
  }
  body.case-studies .cs .k-sec.t-tint,
  body.case-studies .cs .k-sec[aria-labelledby="h-close"] {
    padding: 2rem 0;
  }
  body.case-studies .cs .k-sec[aria-labelledby="h-study"] .k-list {
    --cols: 1;
  }
  body.case-studies .cs .k-sec[aria-labelledby="h-study"] .k-list li:nth-child(2) {
    padding-top: 0.875rem;
    border-top: 1px solid var(--cs-rule);
  }
  body.case-studies .cs .k-sec .k-table tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.case-studies .cs .k-sec .k-table tr {
    padding: 0.875rem 1rem 1rem;
  }
  body.case-studies .cs .k-sec .k-table tr:nth-child(2n + 1) {
    border-left: 0;
  }
  body.case-studies .cs .k-sec .k-table tr:nth-child(-n + 2) {
    border-top: 0;
  }
  body.case-studies .cs .k-sec[aria-labelledby="h-setup"] .k-table tbody {
    grid-template-columns: minmax(0, 1fr);
  }
  body.case-studies .cs .k-sec[aria-labelledby="h-setup"] .k-table tr {
    border-left: 0;
  }
  body.case-studies .cs .k-sec[aria-labelledby="h-setup"] .k-table tr:nth-child(2) {
    border-top: 1px solid var(--cs-rule);
  }
  body.case-studies .cs .k-sec[aria-labelledby="h-setup"] > .k-line {
    padding: 1rem;
  }
  body.case-studies .cs .k-sec .k-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
  body.case-studies .cs .k-sec .k-bar-track {
    height: 2.5rem;
    padding-right: 5rem;
  }
  body.case-studies .cs .k-sec .k-bar-v {
    font-size: 1.25rem;
  }
  body.case-studies .cs .k-sec > .k-bars + .k-bars {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
  }
  body.case-studies .cs .k-fig {
    --kf-h: 17rem;
    column-gap: 1.5rem;
  }
  body.case-studies .cs .k-fig .k-st {
    min-height: 3.25rem;
    padding: 0.5rem 0.625rem;
    gap: 0.4375rem;
    font-size: 1.25rem;
  }
  body.case-studies .cs .k-fig .k-lg-limit {
    margin-left: 0.375rem;
    padding: 0 0.25rem;
  }
  body.case-studies .cs .k-sec[aria-labelledby="h-q-limits"] > .k-stats {
    margin-top: 2rem;
  }
  body.case-studies .cs .cs-notes ol {
    columns: 1;
  }
}
@media (max-width: 37.49rem) {
  body.case-studies .cs .k-fig .kf-pts {
    display: none;
  }
  body.case-studies .cs .k-fig .kf-hatch line:nth-child(3n + 2),
  body.case-studies .cs .k-fig .kf-hatch line:nth-child(3n) {
    display: none;
  }
}
@media (max-width: 23.99rem) {
  body.case-studies .cs .k-sec .k-h1 {
    font-size: 2rem;
  }
}
@media (max-width: 20.99rem) {
  body.case-studies .cs .k-sec .k-h1 {
    font-size: 1.75rem;
  }
}
@media (min-width: 37.5rem) {
  body.case-studies .cs .k-fig .kf-out {
    stroke-width: 13;
  }
  body.case-studies .cs .k-fig .kf-outc {
    stroke-width: 9;
  }
}