/* ==========================================================================
   customers.css — the legacy customer case studies (/customers/<slug>) and their unlinked index (/customers).
   A reading page, the sibling of legal.css and blog.css: one 720px measure, Fraunces for the title and section
   heads, Inter for the body at 17px. Loads AFTER feature-v2.css, which defines --font-serif, --v2-body, --v2-card,
   --v2-line, .col and the .result card, and after home.css, which carries the Closing panel.
   The only colour on the page is the three stat cards, which reuse .result: on a case study, the customer's numbers
   are the argument, so this is the sanctioned place for a big number.
   No blob, no interactive device, no email capture.
   ========================================================================== */

.cs { --cs-measure: 720px; }
.cs-col { width: 100%; max-width: var(--cs-measure); margin-inline: auto; padding-inline: 24px; }

/* ---------- hero: logo, industry line, h1, then the problem and the solution ---------- */
.v2 .cs-hero { padding: 44px 0 0; }
.cs-logo { display: block; width: auto; height: 30px; margin-bottom: 22px; }
.cs-industry { margin: 0 0 12px; font: 400 15px/1.5 var(--font-body); color: #6b7088; }
.cs-title { margin: 0; font: 500 clamp(31px, 4.2vw, 46px)/1.12 var(--font-serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; font-optical-sizing: auto; }

.cs-ps { margin: 30px 0 0; padding-top: 26px; border-top: 1px solid var(--v2-line); }
.cs-ps > div + div { margin-top: 20px; }
.cs-ps dt { font: 600 13.5px/1.4 var(--font-display); color: var(--ink); }
.cs-ps dd { margin: 6px 0 0; font: 400 16.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }

/* ---------- the three headline stats ---------- */
.v2 .cs-stats { padding: clamp(40px, 4.5vw, 60px) 0 0; }
/* The one band that breaks the 720px measure, because the customer's numbers are the argument. 960 rather than the
   full 1080 column so it still relates to the reading column under it. */
.cs-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 960px; margin-inline: auto; }
/* .result is built for a logo, a number and a quote pinned to the foot of a 340px card. These carry a number and a
   caption only, so the card is short and its content is centred rather than stranded at the top. */
.cs-stat { min-height: 168px; justify-content: center; padding: 26px 26px 28px; }
.cs-stat b { font: 500 clamp(29px, 3.1vw, 42px)/1.08 var(--font-serif); letter-spacing: -.02em; text-wrap: balance; }
.cs-stat .what { margin-top: 12px; font: 500 14.5px/1.45 var(--font-display); color: rgba(255, 255, 255, .94); }

/* ---------- the story ---------- */
.cs-body { padding: clamp(48px, 5.5vw, 76px) 0 0; }
.cs-sec + .cs-sec { margin-top: clamp(44px, 5vw, 64px); }
.cs-sec h2 { margin: 0 0 14px; font: 500 clamp(23px, 2.4vw, 30px)/1.2 var(--font-serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.cs-sec p { margin: 0; font: 400 17px/1.7 var(--font-body); color: #343949; text-wrap: pretty; }
.cs-sec p + p { margin-top: 18px; }

.cs-list { margin: 18px 0 0; padding-left: 1.3em; list-style: disc; font: 400 17px/1.7 var(--font-body); color: #343949; }
.cs-list li + li { margin-top: 6px; }

.cs-quote { margin: 26px 0 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--blue); }
.cs-quote p { font: 400 19px/1.6 var(--font-body); color: var(--ink); }
.cs-quote cite { display: block; margin-top: 12px; font: 600 14px/1.4 var(--font-display); font-style: normal; color: var(--v2-body); }

.cs-fig { margin: 28px 0 0; }
/* width:auto with the intrinsic width/height on the tag means a small legacy asset (the 481px reviews chart) renders
   at its own size and stays crisp, while a 1995px screenshot is capped at the measure. */
.cs-fig img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; border-radius: 12px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); }
.cs-fig figcaption { margin-top: 10px; font: 400 14px/1.5 var(--font-body); color: #6b7088; text-align: center; text-wrap: pretty; }

.cs-more { margin: clamp(40px, 4.5vw, 60px) 0 0; padding-top: 24px; border-top: 1px solid var(--v2-line); font: 400 15px/1.5 var(--font-body); }
.cs-more a { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(0, 61, 255, .35); text-underline-offset: 3px; }
.cs-more a:hover { text-decoration-color: currentColor; }

/* The big quote and the closing panel need air after a reading column. */
.cs .tq-section { padding: clamp(56px, 6vw, 88px) 0 clamp(24px, 3vw, 40px); }

/* ---------- /customers: the unlinked index ---------- */
.v2 .cs-index .cs-hero { padding: 56px 0 clamp(72px, 8vw, 112px); }
.cs-index-lead { margin: 14px 0 0; font: 400 17px/1.6 var(--font-body); color: var(--v2-body); }
.cs-index-list { margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--v2-line); }
.cs-index-list li { padding: 20px 0; border-bottom: 1px solid var(--v2-line); }
.cs-index-list a { font: 600 17px/1.4 var(--font-display); color: var(--ink); text-decoration: underline; text-decoration-color: rgba(15, 13, 25, .25); text-underline-offset: 4px; }
.cs-index-list a:hover { color: var(--blue); text-decoration-color: currentColor; }
.cs-index-list span { display: block; margin-top: 5px; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); }

@media (max-width: 767px) {
  .cs-results { grid-template-columns: 1fr; }
  .cs-stat { min-height: 0; }
  .v2 .cs-hero { padding-top: 28px; }
  .cs-sec p, .cs-list { font-size: 16.5px; }
}