/* ---------- Case study template ----------
   A sticky contents list on the left, one centred reading column.
   Uses the same tokens as the landing page: --serif, --sans, --silver, --grey,
   --wc-card-bg, --wc-card-border, --section-gap, --label-gap, --content-gap, --gutter. */

:root {
  --cs-measure: 880px;
  --cs-mark-pink: #FBE3EF;  --cs-mark-pink-fg: inherit;
  --cs-mark-yellow: #FCEFC7; --cs-mark-yellow-fg: inherit;
  --cs-frame: #F4F4F4;
}
:root:not([data-theme="light"]) {
  --cs-mark-pink: rgba(235, 89, 57, .22);
  --cs-mark-yellow: rgba(248, 213, 92, .2);
  --cs-frame: #161616;
}
html[data-theme="light"] {
  --cs-mark-pink: #FBE3EF; --cs-mark-yellow: #FCEFC7; --cs-frame: #F4F4F4;
}

.cs2 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--cs-measure)) minmax(0, 1fr); column-gap: 32px;
  max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: 136px var(--gutter) 0;
}
.cs2-main { grid-column: 2; min-width: 0; }

/* ----- contents list ----- */
.cs2-toc { grid-column: 1; grid-row: 1; justify-self: start; position: sticky; top: 120px; align-self: start; margin-top: 4px; }
.cs2-toc ol { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--wc-card-border); display: grid; gap: 14px; }
.cs2-toc a {
  position: relative; display: block; color: var(--grey) !important; text-decoration: none;
  font: 400 15px/1.35 var(--sans); transition: color .2s;
}
.cs2-toc a:hover { color: var(--silver) !important; }
.cs2-toc a[aria-current="true"] { color: var(--silver) !important; font-weight: 500; }
.cs2-toc a[aria-current="true"]::before { content: ""; position: absolute; left: -19px; top: 1px; bottom: 1px; width: 2px; background: var(--silver); border-radius: 2px; }

/* ----- header ----- */
.cs2-back { display: inline-block; margin-bottom: 24px; font: 500 15px/1 var(--sans); color: var(--grey) !important; text-decoration: none; }
.cs2-back:hover { color: var(--silver) !important; }
.cs2-eyebrow { margin: 0 0 16px; font: 500 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.cs2-title {
  margin: 0; font-family: var(--serif); font-weight: 400; font-optical-sizing: none; font-variation-settings: "opsz" 24;
  font-size: 48px; line-height: 1.14; letter-spacing: -0.012em; color: var(--silver); text-wrap: balance;
}
.cs2-intro { margin: 24px 0 0; font: 400 19px/1.75 var(--sans); color: var(--silver); text-wrap: pretty; }
.cs2-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; }
.cs2-links a { display: inline-flex; align-items: center; gap: 6px; font: 500 16px/1 var(--sans); color: var(--bright-red) !important; text-decoration: none; }
.cs2-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.cs2-links svg { width: 15px; height: 15px; }
.cs2-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; margin: 36px 0 0; padding-top: 36px; border-top: 1px solid var(--wc-card-border); }
.cs2-meta dt { margin: 0 0 8px; font: 500 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.cs2-meta dd { margin: 0; font: 400 17px/1.55 var(--sans); color: var(--silver); }

/* ----- highlights ----- */
.cs2 mark { color: inherit; border-radius: 4px; padding: 1px 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cs2 mark.hl-pink { background: var(--cs-mark-pink); }
.cs2 mark.hl-yellow { background: var(--cs-mark-yellow); }

/* ----- media ----- */
.cs2-figure { margin: var(--content-gap) 0 0; }
.cs2-figure .frame { overflow: hidden; border-radius: 16px; border: 1px solid var(--wc-card-border); background: var(--cs-frame); }
.cs2-figure img { display: block; width: 100%; height: auto; }
.cs2-figure figcaption { margin-top: 12px; font: 400 14px/1.5 var(--sans); color: var(--grey); text-align: center; }
.cs2-hero { margin-top: 48px; }
.cs2-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; background: #000; }
.cs2-video img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s; }
.cs2-video:hover img { opacity: 1; }
.cs2-video .play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; }
.cs2-video .play svg { width: 26px; height: 26px; margin-left: 4px; color: #101010; }
.cs2-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ----- chapters ----- */
.cs2-chapter { padding-top: var(--section-gap); scroll-margin-top: 96px; }
.cs2-chapter .section-label { margin-bottom: var(--label-gap) !important; }
.cs2-h2 {
  margin: 0 0 20px; font-family: var(--serif); font-weight: 400; font-optical-sizing: none; font-variation-settings: "opsz" 24;
  font-size: 34px; line-height: 1.2; letter-spacing: -0.01em; color: var(--silver); text-wrap: balance;
}
.cs2-p { margin: 0 0 18px; font: 400 18px/1.8 var(--sans); color: var(--silver); text-wrap: pretty; }
.cs2-p:last-child { margin-bottom: 0; }
.cs2-p strong { font-weight: 600; }

.cs2-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: var(--content-gap) 0 0; }
.cs2-card { padding: 22px 24px; border-radius: 14px; background: var(--wc-card-bg); border: 1px solid var(--wc-card-border); }
.cs2-card h3 { margin: 0 0 8px; font: 500 16px/1.4 var(--sans); color: var(--silver); }
.cs2-card p { margin: 0; font: 400 15.5px/1.6 var(--sans); color: var(--grey); }

.cs2-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.cs2-list li { position: relative; padding-left: 22px; font: 400 17px/1.6 var(--sans); color: var(--silver); }
.cs2-list li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--grey); }

.cs2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: var(--content-gap) 0 0; padding: 28px 0; border-top: 1px solid var(--wc-card-border); border-bottom: 1px solid var(--wc-card-border); }
.cs2-stats dd { margin: 0; font-family: var(--serif); font-variation-settings: "opsz" 24; font-size: 40px; line-height: 1; color: var(--silver); }
.cs2-stats dt { margin-top: 10px; font: 400 15px/1.45 var(--sans); color: var(--grey); }
.cs2-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

.cs2-quote { margin: var(--content-gap) 0 0; padding-left: 24px; border-left: 2px solid var(--bright-red); }
.cs2-quote p { margin: 0; font-family: var(--serif); font-variation-settings: "opsz" 24; font-size: 28px; line-height: 1.35; letter-spacing: -0.01em; color: var(--silver); }
.cs2-quote footer { margin-top: 14px; font: 500 15px/1.4 var(--sans); color: var(--grey); }

.cs2-testimonials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: var(--content-gap) 0 0; }
.cs2-testimonial { margin: 0; padding: 24px; border-radius: 14px; background: var(--wc-card-bg); border: 1px solid var(--wc-card-border); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.cs2-testimonial blockquote { margin: 0; padding: 0; border: 0; font-family: var(--serif); font-variation-settings: "opsz" 24; font-size: 19px; line-height: 1.5; color: var(--silver); }
.cs2-testimonial figcaption b { display: block; font: 600 15px/1.4 var(--sans); color: var(--silver); }
.cs2-testimonial figcaption span { font: 400 14px/1.4 var(--sans); color: var(--grey); }

/* ----- next case study ----- */
.cs2-next { display: block; margin-top: var(--section-gap); padding: 28px; border-radius: 20px; background: var(--wc-card-bg); border: 1px solid var(--wc-card-border); text-decoration: none; transition: border-color .3s; }
.cs2-next:hover { border-color: color-mix(in srgb, var(--silver) 25%, var(--wc-card-border)); }
.cs2-next span { display: block; font: 500 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.cs2-next b { display: block; margin-top: 12px; font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 24; font-size: 28px; line-height: 1.25; color: var(--silver); }
.cs2-next em { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font: 500 15px/1 var(--sans); font-style: normal; color: var(--bright-red); }

/* ----- responsive ----- */
@media (max-width: 1199px) {
  .cs2 { grid-template-columns: minmax(0, 1fr); }
  .cs2-main { grid-column: 1; max-width: var(--cs-measure); }
  .cs2-toc { display: none; }
}
@media (max-width: 991px) {
  .cs2-title { font-size: 40px; }
  .cs2-h2 { font-size: 30px; }
}
@media (max-width: 767px) {
  .cs2 { padding-top: 150px; }
  .cs2-title { font-size: 32px; line-height: 1.2; }
  .cs2-intro { font-size: 17px; line-height: 1.7; }
  .cs2-h2 { font-size: 25px; }
  .cs2-p { font-size: 17px; line-height: 1.7; }
  .cs2-cards, .cs2-testimonials { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cs2-stats { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cs2-stats dd { font-size: 34px; }
  .cs2-quote p { font-size: 22px; }
  .cs2-figure .frame { border-radius: 12px; }
}
.cs2-next em svg { width: 15px; height: 15px; }
@media (max-width: 560px) { .cs2-meta { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* ================= Quieter, document-like proportions ================= */
:root { --cs-measure: 720px; --cs-gap: 72px; --cs-ink: rgba(19,21,22,.86); --cs-soft: rgba(19,21,22,.62); --cs-faint: rgba(19,21,22,.45); --cs-frame: #F6F7F9; }
:root:not([data-theme="light"]) { --cs-ink: rgba(234,227,214,.88); --cs-soft: rgba(234,227,214,.62); --cs-faint: rgba(234,227,214,.42); --cs-frame: #171717; }
html[data-theme="light"] { --cs-ink: rgba(19,21,22,.86); --cs-soft: rgba(19,21,22,.62); --cs-faint: rgba(19,21,22,.45); --cs-frame: #F6F7F9; }

.cs2 { padding-top: 132px; column-gap: 48px; }

/* contents: small and tight */
.cs2-toc ol { gap: 10px; padding-left: 14px; }
.cs2-toc a { font-size: 13px; color: var(--cs-faint) !important; }
.cs2-toc a[aria-current="true"] { color: var(--cs-ink) !important; }
.cs2-toc a[aria-current="true"]::before { left: -15px; }

/* header */
.cs2-back { font-size: 13px; margin-bottom: 28px; color: var(--cs-faint) !important; }
.cs2-eyebrow { font-size: 11px; letter-spacing: .08em; color: var(--cs-faint); margin-bottom: 14px; }
.cs2-title { font-size: 32px; line-height: 1.16; font-weight: 500; letter-spacing: -0.01em; color: var(--cs-ink); }
.cs2-intro { font-size: 15px; line-height: 1.66; color: var(--cs-ink); margin-top: 20px; }
.cs2-links { margin-top: 18px; gap: 10px 20px; }
.cs2-links a { font-size: 13.5px; }
.cs2-links svg { width: 12px; height: 12px; }
.cs2-meta { margin-top: 28px; padding-top: 28px; gap: 22px 32px; }
.cs2-meta dt { font-size: 11px; letter-spacing: .08em; color: var(--cs-faint); margin-bottom: 6px; }
.cs2-meta dd { font-size: 14px; line-height: 1.55; color: var(--cs-ink); }

/* images: soft frame, no border */
.cs2-figure { margin-top: 32px; }
.cs2-hero { margin-top: 40px; }
.cs2-figure .frame { border: 0; border-radius: 8px; background: var(--cs-frame); }
.cs2-figure figcaption { font-size: 12.5px; color: var(--cs-faint); text-align: left; margin-top: 10px; }

/* chapters */
.cs2-chapter { padding-top: var(--cs-gap); }
.cs2-chapter .section-label { font-size: 13px !important; margin-bottom: 18px !important; color: var(--cs-soft) !important; }
.cs2-h2 { font-size: 24px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; color: var(--cs-ink); margin-bottom: 14px; }
.cs2-p { font-size: 15px; line-height: 1.66; color: var(--cs-ink); margin-bottom: 14px; }
.cs2-list { margin-top: 14px; gap: 6px; }
.cs2-list li { font-size: 15px; line-height: 1.6; color: var(--cs-ink); padding-left: 18px; }
.cs2-list li::before { width: 4px; height: 4px; top: .72em; background: var(--cs-faint); }

/* key points: lighter cards */
.cs2-cards { gap: 12px; margin-top: 24px; }
.cs2-card { padding: 16px 18px; border-radius: 8px; border: 0; background: var(--cs-frame); }
.cs2-card h3 { font-size: 14px; margin-bottom: 4px; color: var(--cs-ink); }
.cs2-card p { font-size: 13.5px; line-height: 1.55; color: var(--cs-soft); }

/* numbers: compact */
.cs2-stats { margin-top: 24px; padding: 20px 0; gap: 20px; }
.cs2-stats dd { font-size: 28px; color: var(--cs-ink); }
.cs2-stats dt { font-size: 13px; margin-top: 6px; color: var(--cs-soft); }

/* quotes: quiet, like a margin note */
.cs2-quote { margin-top: 24px; padding-left: 18px; border-left: 1px solid color-mix(in srgb, var(--cs-ink) 25%, transparent); }
.cs2-quote p { font-family: var(--sans); font-variation-settings: normal; font-size: 15px; line-height: 1.66; font-style: italic; color: var(--cs-soft); letter-spacing: 0; }
.cs2-quote footer { font-size: 12.5px; margin-top: 8px; color: var(--cs-faint); font-weight: 400; }
.cs2-quote footer::before { content: "— "; }

/* testimonials: the same quiet quotes, stacked */
.cs2-testimonials { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 24px; }
.cs2-testimonial { padding: 0 0 0 18px; border: 0; border-left: 1px solid color-mix(in srgb, var(--cs-ink) 25%, transparent); border-radius: 0; background: none; gap: 8px; }
.cs2-testimonial blockquote { font-family: var(--sans); font-variation-settings: normal; font-size: 15px; line-height: 1.66; font-style: italic; color: var(--cs-soft); }
.cs2-testimonial figcaption b { display: inline; font-size: 12.5px; font-weight: 500; color: var(--cs-faint); }
.cs2-testimonial figcaption b + span::before { content: ", "; }
.cs2-testimonial figcaption span { font-size: 12.5px; color: var(--cs-faint); }
.cs2-testimonial figcaption::before { content: "— "; font-size: 12.5px; color: var(--cs-faint); }

/* next case study: a simple line, not a card */
.cs2-next { margin-top: var(--cs-gap); padding: 28px 0 0; border: 0; border-top: 1px solid var(--wc-card-border); border-radius: 0; background: none; }
.cs2-next span { font-size: 11px; letter-spacing: .08em; color: var(--cs-faint); }
.cs2-next b { font-size: 22px; font-weight: 500; margin-top: 10px; color: var(--cs-ink); }
.cs2-next em { font-size: 13.5px; margin-top: 12px; }

@media (max-width: 991px) { .cs2-title { font-size: 30px; } .cs2-h2 { font-size: 22px; } }
@media (max-width: 767px) {
  .cs2 { padding-top: 140px; }
  .cs2-title { font-size: 27px; }
  .cs2-h2 { font-size: 21px; }
  .cs2-intro, .cs2-p, .cs2-list li { font-size: 15px; line-height: 1.65; }
  .cs2-stats dd { font-size: 26px; }
  :root { --cs-gap: 56px; }
}
.cs2-title, .cs2-h2, .cs2-next b { font-weight: 400; }
.cs2-more { margin-top: 18px; }
.cs2-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--sans); color: var(--cs-soft); }
.cs2-more summary::-webkit-details-marker { display: none; }
.cs2-more summary::after { content: "+"; font-weight: 400; }
.cs2-more[open] summary::after { content: "–"; }
.cs2-more .cs2-meta { margin-top: 18px; padding-top: 0; border-top: 0; }
/* below 1200px the contents list hides: centre the reading column in the page */
@media (max-width: 1199px) { .cs2-main { margin-left: auto; margin-right: auto; width: 100%; } }

/* A paragraph that follows a figure, cards, stats, quote or list gets the same breathing room as the block above it */
.cs2-chapter > :is(.cs2-figure, .cs2-cards, .cs2-stats, .cs2-quote, .cs2-testimonials) + .cs2-p { margin-top: 24px; }
.cs2-chapter > .cs2-list + .cs2-p { margin-top: 14px; }
.cs2-chapter > :is(.cs2-figure, .cs2-cards, .cs2-stats, .cs2-quote, .cs2-testimonials) + .cs2-list { margin-top: 24px; }

/* ================= Metrics ================= */
/* tones: brand (primary), green (gains), amber (watch), blue (activation), neutral */
:root {
  --tone-brand-fg: #C2410C; --tone-brand-bg: #FDEBE3;
  --tone-green-fg: #1D7A4A; --tone-green-bg: #E2F3E9;
  --tone-amber-fg: #8A5A00; --tone-amber-bg: #FBF0D6;
  --tone-blue-fg:  #2456A6; --tone-blue-bg:  #E5EDFA;
  --tone-neutral-fg: var(--cs-soft); --tone-neutral-bg: color-mix(in srgb, var(--cs-ink) 7%, transparent);
}
:root:not([data-theme="light"]) {
  --tone-brand-fg: #F4875F; --tone-brand-bg: rgba(235, 89, 57, .16);
  --tone-green-fg: #72D39C; --tone-green-bg: rgba(114, 211, 156, .13);
  --tone-amber-fg: #F0C46C; --tone-amber-bg: rgba(240, 196, 108, .13);
  --tone-blue-fg:  #8DB5F7; --tone-blue-bg:  rgba(141, 181, 247, .13);
}
html[data-theme="light"] {
  --tone-brand-fg: #C2410C; --tone-brand-bg: #FDEBE3;
  --tone-green-fg: #1D7A4A; --tone-green-bg: #E2F3E9;
  --tone-amber-fg: #8A5A00; --tone-amber-bg: #FBF0D6;
  --tone-blue-fg:  #2456A6; --tone-blue-bg:  #E5EDFA;
}
.tone-brand   { --fg: var(--tone-brand-fg);   --bg: var(--tone-brand-bg); }
.tone-green, .tone-up { --fg: var(--tone-green-fg); --bg: var(--tone-green-bg); }
.tone-amber, .tone-flat { --fg: var(--tone-amber-fg); --bg: var(--tone-amber-bg); }
.tone-blue    { --fg: var(--tone-blue-fg);    --bg: var(--tone-blue-bg); }
.tone-neutral, .tone-todo { --fg: var(--tone-neutral-fg); --bg: var(--tone-neutral-bg); }

/* coloured keywords in text */
.cs2 mark:is(.hl-green, .hl-amber, .hl-blue, .hl-brand) { font-weight: 500; }
.cs2 mark.hl-green { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.cs2 mark.hl-amber { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
.cs2 mark.hl-blue  { background: var(--tone-blue-bg);  color: var(--tone-blue-fg); }
.cs2 mark.hl-brand { background: var(--tone-brand-bg); color: var(--tone-brand-fg); }

/* big numbers: a small coloured change under the value */
.cs2-stats dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cs2-delta { font: 500 12px/1 var(--sans); padding: 4px 7px; border-radius: 999px; color: var(--fg); background: var(--bg); transform: translateY(-4px); }
.cs2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .cs2-stats:has(> div:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* role tags and change pills */
.cs2-tag, .cs2-change { display: inline-block; font: 500 11.5px/1 var(--sans); padding: 4px 8px; border-radius: 999px; color: var(--fg); background: var(--bg); white-space: nowrap; }
.cs2-tag { margin-left: 8px; vertical-align: 1px; }
.cs2-change { font-size: 12.5px; padding: 5px 9px; font-variant-numeric: tabular-nums; }

/* KPI table */
.cs2-kpis { margin-top: 24px; border-radius: 10px; background: var(--cs-frame); padding: 6px 18px; }
.cs2-kpis table { width: 100%; border-collapse: collapse; font-family: var(--sans); }
.cs2-kpis caption { caption-side: bottom; text-align: left; padding: 10px 0 8px; font-size: 12.5px; color: var(--cs-faint); }
.cs2-kpis th, .cs2-kpis td { padding: 13px 0 13px 16px; text-align: right; vertical-align: middle; border-top: 1px solid color-mix(in srgb, var(--cs-ink) 8%, transparent); }
.cs2-kpis thead th { border-top: 0; padding-top: 12px; padding-bottom: 10px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-faint); white-space: nowrap; }
.cs2-kpis th:first-child { padding-left: 0; text-align: left; }
.cs2-kpis tbody th { font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--cs-ink); }
.cs2-kpis td { font-size: 14px; color: var(--cs-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs2-kpis tr.is-primary th, .cs2-kpis tr.is-primary td { color: var(--cs-ink); font-weight: 500; }
@media (max-width: 600px) {
  .cs2-kpis { padding: 4px 14px; }
  .cs2-kpis thead { display: none; }
  .cs2-kpis tr { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px 12px; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--cs-ink) 8%, transparent); }
  .cs2-kpis tbody tr:first-child { border-top: 0; }
  .cs2-kpis th, .cs2-kpis td { padding: 0; border: 0; text-align: left; }
  .cs2-kpis tbody th { grid-column: 1 / -1; }
  .cs2-kpis td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-faint); }
  .cs2-kpis tr:has(> td:nth-child(3)) { --n: 2; }
  .cs2-kpis tr:has(> td:nth-child(4)) { --n: 3; }
}

/* insight callout */
.cs2-note { margin-top: 24px; padding: 16px 18px; border-radius: 10px; border: 0; background: var(--cs-frame); }
.cs2-note b { display: block; margin-bottom: 6px; font: 500 13px/1.4 var(--sans); color: var(--cs-ink); }
.cs2-note p { margin: 0; font: 400 14.5px/1.65 var(--sans); color: var(--cs-ink); }

/* bar chart */
.cs2-bars { margin: 24px 0 0; padding: 18px; border-radius: 10px; background: var(--cs-frame); }
.cs2-bars ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cs2-bars li { display: grid; grid-template-columns: 76px minmax(0, 1fr) 132px; align-items: center; gap: 14px; font: 400 13.5px/1.3 var(--sans); }
.cs2-bars .lbl { color: var(--cs-soft); }
.cs2-bars .track { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--cs-ink) 7%, transparent); overflow: hidden; }
.cs2-bars .track i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--tone-brand-fg); }
.cs2-bars li:last-child .track i { background: var(--tone-green-fg); }
.cs2-bars .val { color: var(--cs-ink); font-variant-numeric: tabular-nums; }
.cs2-bars .val em { font-style: normal; color: var(--cs-faint); margin-left: 6px; font-size: 12.5px; }
.cs2-bars figcaption { margin-top: 14px; font-size: 12.5px; color: var(--cs-faint); }
@media (max-width: 480px) { .cs2-bars li { grid-template-columns: 60px minmax(0, 1fr) 96px; gap: 10px; } .cs2-bars .val em { display: block; margin: 2px 0 0; } }

.cs2-chapter > :is(.cs2-kpis, .cs2-note, .cs2-bars) + .cs2-p { margin-top: 24px; }
@media (min-width: 768px) { .cs2-stats:has(> div:nth-child(3)):not(:has(> div:nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs2-bars figcaption { text-align: left; }
.cs2-bars li { grid-template-columns: 40px minmax(0, 1fr) 132px; }
@media (max-width: 480px) { .cs2-bars li { grid-template-columns: 36px minmax(0, 1fr) 88px; } }
.cs2-kpis tbody th a { color: var(--cs-ink) !important; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cs-ink) 35%, transparent); text-underline-offset: 3px; }
.cs2-kpis tbody th a:hover { text-decoration-color: currentColor; }
.cs2-testimonial figcaption { text-align: left; }

/* next case study: a soft card, a touch more prominent */
.cs2-next { position: relative; margin-top: var(--cs-gap); padding: 28px 30px 26px; border: 0; border-radius: 14px; background: var(--cs-frame); transition: background-color .25s ease; }
.cs2-next:hover { background: color-mix(in srgb, var(--cs-frame) 100%, var(--cs-ink) 5%); }
.cs2-next span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-faint); }
.cs2-next b { max-width: 34ch; margin-top: 12px; font-size: 26px; line-height: 1.25; color: var(--cs-ink); }
.cs2-next em { margin-top: 20px; padding: 9px 14px; border-radius: 999px; font-size: 13.5px; color: var(--tone-brand-fg); background: var(--tone-brand-bg); transition: gap .25s ease; }
.cs2-next em svg { width: 12px; height: 12px; transition: transform .25s ease; }
.cs2-next:hover em svg { transform: translate(2px, -2px); }
.cs2-next:focus-visible { outline: 2px solid var(--tone-brand-fg); outline-offset: 3px; }
@media (max-width: 600px) { .cs2-next { padding: 22px 20px 20px; } .cs2-next b { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .cs2-next, .cs2-next em svg { transition: none; } }

/* four numbers in a row: more room between columns, balanced label lines */
.cs2-stats { column-gap: 32px; }
.cs2-stats dt { text-wrap: balance; }
@media (min-width: 768px) { .cs2-stats:has(> div:nth-child(4)) { column-gap: 28px; } }
/* four numbers: a balanced 2 x 2 grid rather than four narrow columns */
@media (min-width: 768px) { .cs2-stats:has(> div:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 26px; } }

/* ================= MCP page ================= */
.mcp-h4 { margin: 28px 0 8px; font: 500 15px/1.4 var(--sans); color: var(--cs-ink); }
.cs2-h2 + .mcp-h4 { margin-top: 8px; }
.mcp-code { margin-top: 12px; border-radius: 10px; background: var(--cs-frame); overflow: hidden; }
.mcp-hero-code { margin-top: 28px; }
.mcp-code-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 0 16px; font: 500 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--cs-faint); }
.mcp-copy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; font: 500 12.5px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--cs-soft); cursor: pointer; transition: background-color .2s, color .2s; }
.mcp-copy:hover { background: color-mix(in srgb, var(--cs-ink) 7%, transparent); color: var(--cs-ink); }
.mcp-copy:focus-visible { outline: 2px solid var(--tone-brand-fg); outline-offset: 2px; }
.mcp-copy.is-done { color: var(--tone-green-fg); }
.mcp-copy svg { width: 14px; height: 14px; }
.mcp-code pre { margin: 0; padding: 10px 16px 16px; overflow-x: auto; background: none; border: 0; white-space: pre; }
.mcp-code code, .mcp-inline { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.6; color: var(--cs-ink); }
.mcp-inline { font-size: 13px; padding: 1px 5px; border-radius: 4px; background: var(--cs-frame); }
.cs2-kpis .mcp-inline { background: none; padding: 0; }
.mcp-page .cs2-kpis td { white-space: normal; text-align: left; }
.mcp-page .cs2-kpis thead th:last-child { text-align: left; }
.mcp-questions { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mcp-questions li { padding: 14px 16px; border-radius: 10px; background: var(--cs-frame); font: 400 14.5px/1.5 var(--sans); color: var(--cs-ink); }
@media (max-width: 600px) {
  .mcp-questions { grid-template-columns: minmax(0, 1fr); }
  .mcp-page .cs2-kpis tr { grid-template-columns: minmax(0, 1fr); }
  .mcp-page .cs2-kpis td::before { display: none; }
}

/* ================= What people said: cards instead of a wall of italics ================= */
/* featured quote: serif, a large opening mark, in a soft card */
.cs2-quote { position: relative; margin: 24px 0 0; padding: 26px 28px 22px; border: 0 !important; border-radius: 12px; background: var(--cs-frame); }
.cs2-quote::before { content: "“"; position: absolute; top: 6px; left: 22px; font: 400 64px/1 var(--serif); color: var(--tone-brand-fg); opacity: .9; }
.cs2-quote blockquote { margin: 0; padding: 0; border: 0; }
.cs2-quote p, .cs2-quote blockquote p { margin: 22px 0 0; font-family: var(--serif) !important; font-variation-settings: "opsz" 24; font-style: normal !important; font-size: 19px !important; line-height: 1.55 !important; letter-spacing: -0.005em; color: var(--cs-ink) !important; text-wrap: pretty; }
.cs2-quote footer { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 13px; color: var(--cs-soft); }
.cs2-quote footer::before { content: none !important; }

/* shorter quotes: cards side by side */
.cs2-testimonials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; margin-top: 24px; }
.cs2-testimonials:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.cs2-testimonial { display: flex; flex-direction: column; justify-content: space-between; gap: 16px !important; padding: 18px 18px 16px !important; border: 0 !important; border-radius: 12px !important; background: var(--cs-frame) !important; }
.cs2-testimonial blockquote { margin: 0; font-family: var(--sans) !important; font-style: normal !important; font-size: 14.5px !important; line-height: 1.6 !important; color: var(--cs-ink) !important; }
.cs2-testimonial figcaption { display: flex; align-items: center; gap: 10px; text-align: left; }
.cs2-testimonial figcaption::before, .cs2-testimonial figcaption b + span::before { content: none !important; }

/* who said it: initials in a coloured circle, then name and role */
.cs2-avatar { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 600 11.5px/1 var(--sans); letter-spacing: .02em; color: var(--fg); background: var(--bg); }
.cs2-quote .cs2-avatar { width: 36px; height: 36px; font-size: 12.5px; }
.cs2 .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs2 .who b { font: 500 13px/1.3 var(--sans) !important; color: var(--cs-ink) !important; }
.cs2 .who span { font: 400 12.5px/1.35 var(--sans) !important; color: var(--cs-faint) !important; }
/* older markup (no avatar): name and role on one line */
.cs2-testimonial figcaption:not(:has(.who)) b + span::before { content: ", " !important; }

@media (max-width: 767px) {
  .cs2-testimonials, .cs2-testimonials:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr) !important; }
  .cs2-quote { padding: 22px 20px 18px; }
  .cs2-quote::before { left: 16px; font-size: 56px; }
  .cs2-quote p, .cs2-quote blockquote p { font-size: 17px !important; }
}
.cs2 .cs2-avatar { color: var(--fg) !important; font: 600 11.5px/1 var(--sans) !important; }
.cs2-quote .cs2-avatar { font-size: 12.5px !important; }
.cs2-avatar.is-icon svg { width: 16px; height: 16px; }

/* testimonials, refined: two columns by default; three only for three short quotes; a lone last card spans the row */
.cs2-testimonials, .cs2-testimonials:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.cs2-testimonials.is-short { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.cs2-testimonials:not(.is-short) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* one calm colour for every avatar, so nothing looks random */
.cs2 .cs2-avatar { color: var(--cs-soft) !important; background: color-mix(in srgb, var(--cs-ink) 8%, transparent) !important; }
/* older markup (no avatar): name and role as one plain line */
.cs2-testimonial figcaption:not(:has(.who)) { display: block; font-size: 12.5px; line-height: 1.45; }
.cs2-testimonial figcaption:not(:has(.who)) b { font: 500 13px/1.45 var(--sans) !important; color: var(--cs-ink) !important; }
.cs2-testimonial figcaption:not(:has(.who)) span { font-size: 12.5px !important; color: var(--cs-faint) !important; }
.cs2-quote footer:not(:has(.who)) { display: block; font-size: 13px; color: var(--cs-faint); }
@media (max-width: 767px) { .cs2-testimonials, .cs2-testimonials.is-short { grid-template-columns: minmax(0, 1fr) !important; } }

/* avatars: a 3D face on a pastel circle (faces: Microsoft Fluent Emoji, MIT) */
.cs2 .cs2-avatar { width: 40px; height: 40px; overflow: hidden; background: var(--tint) !important; }
.cs2 .cs2-avatar img { width: 30px; height: 30px; margin-top: 4px; display: block; }
.cs2-quote .cs2-avatar { width: 44px !important; height: 44px !important; }
.cs2-quote .cs2-avatar img { width: 33px; height: 33px; }
.tint-0 { --tint: #FBE3EF; } .tint-1 { --tint: #ECECEF; } .tint-2 { --tint: #FBE8CF; }
.tint-3 { --tint: #E3EDFB; } .tint-4 { --tint: #E2F3E9; } .tint-5 { --tint: #EDE7FB; }
:root:not([data-theme="light"]) .tint-0 { --tint: rgba(235, 120, 170, .22); }
:root:not([data-theme="light"]) .tint-1 { --tint: rgba(234, 227, 214, .12); }
:root:not([data-theme="light"]) .tint-2 { --tint: rgba(240, 180, 100, .2); }
:root:not([data-theme="light"]) .tint-3 { --tint: rgba(141, 181, 247, .2); }
:root:not([data-theme="light"]) .tint-4 { --tint: rgba(114, 211, 156, .18); }
:root:not([data-theme="light"]) .tint-5 { --tint: rgba(170, 150, 240, .2); }
/* three short quotes in a row (beats the generic two-column rule) */
.cs2 .cs2-testimonials.is-short { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.cs2-testimonial { gap: 20px !important; padding: 20px 20px 18px !important; }
.cs2 .who b { font-size: 13.5px !important; }
@media (max-width: 767px) { .cs2 .cs2-testimonials.is-short { grid-template-columns: minmax(0, 1fr) !important; } }
.cs2 .cs2-avatar img { width: 34px; height: 34px; margin-top: 6px; }
.cs2-quote .cs2-avatar img { width: 37px; height: 37px; margin-top: 7px; }

/* testimonial cards, closer to the reference: roomier, larger type, a bigger face that fills its circle */
.cs2-testimonial { gap: 28px !important; padding: 22px 22px 20px !important; border-radius: 16px !important; }
.cs2-testimonial blockquote { font-size: 15.5px !important; line-height: 1.55 !important; color: var(--cs-ink) !important; }
.cs2-testimonial figcaption, .cs2-quote footer { gap: 12px !important; }
.cs2 .cs2-avatar, .cs2-quote .cs2-avatar { width: 44px !important; height: 44px !important; }
.cs2 .cs2-avatar img, .cs2-quote .cs2-avatar img { width: 40px !important; height: 40px !important; margin-top: 7px !important; }
.cs2 .who { gap: 3px; }
.cs2 .who b { font: 600 14.5px/1.3 var(--sans) !important; }
.cs2 .who span { font-size: 13.5px !important; color: var(--cs-soft) !important; }
.cs2-quote { border-radius: 16px; }
@media (max-width: 767px) { .cs2-testimonial blockquote { font-size: 15px !important; } }

/* testimonial cards: a neutral light grey, like the reference */
:root { --cs-quote-card: #F2F2F2; }
:root:not([data-theme="light"]) { --cs-quote-card: #1B1B1B; }
html[data-theme="light"] { --cs-quote-card: #F2F2F2; }
.cs2-testimonial, .cs2-quote { background: var(--cs-quote-card) !important; }

/* Memoji avatars: the bust fills the circle and sits on its bottom edge */
.cs2 .cs2-avatar img, .cs2-quote .cs2-avatar img { width: 42px !important; height: 42px !important; margin: 3px auto 0 !important; object-fit: contain; }