/* Case study: the customer leads, the numbers are the proof, the story follows. */
.case-hero { padding-bottom: 0; }
/* 960px of content, matching the fact cards and the prose column below, so the figure row and the cards share
   left and right edges. The container's own 24px padding sits outside that. */
.case-hero .container { max-width: 1008px; }
.case-hero .eyebrow { margin-bottom: 18px; }
.case-hero h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -0.03em; max-width: 22ch; }
.case-hero .lead { max-width: 62ch; margin-top: 26px; }
/* The customer leads, so their logo sits between the breadcrumb and the headline. tools/port/logos.mjs
   flattens all 44 of them to one white silhouette first: the originals are a grab bag of dark-on-light
   PNGs, SVGs, a GIF and a few JPEGs with a baked white background, and dropped onto this hero as they
   come most would be invisible and the opaque ones would show as white boxes. The homepage's customer
   strip draws its logos in a single colour for the same reason. */
.case-hero .crumbs:has(+ .case-logo) { margin-bottom: 20px; }
.case-logo { margin: 0 0 28px; }
.case-logo img { display: block; margin: 0 auto; width: auto; height: auto; max-width: 200px; max-height: 42px; opacity: .94; filter: var(--dark-art); } /* white silhouettes (tools/port/logos.mjs) */

.case-meta { margin-top: 20px; font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); }

.case-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 72px; }
/* These pages carry 2, 3 or 4 figures (4 is the most common). A fixed three-column grid leaves the fourth
   stranded on a row of its own, so the track count follows the number of figures. Every count spans the full
   container: narrowing the two-figure case left it floating above fact cards that run the full width, and the
   mismatched edges read as a mistake. */
.case-stats:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-stats:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.case-stats:has(> :nth-child(4)):not(:has(> :nth-child(5))) b { font-size: clamp(26px, 2.9vw, 38px); }
.case-stats b { display: block; font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--accent); }
.case-stats span { display: block; margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--fg-2); }

/* .section draws a hairline divider on its bottom edge, so a section with no bottom padding puts that line
   flush against its own content — the fact cards were sitting right on it. */
.section-tight { padding-top: 72px; padding-bottom: 72px; }
.case-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 960px; margin: 0 auto; }
/* same again for the company facts, which run from two to five */
.case-facts:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-facts:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.case-facts:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-facts > div { padding: 26px 28px; border: 1px solid var(--line-2); border-radius: 16px; }
.case-facts dt { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
.case-facts dd { margin: 11px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--fg); }

.case-video { margin: 0 auto; max-width: 960px; }
.case-video .frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #000; }
.case-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case-video figcaption { margin-top: 12px; font-size: 14px; color: var(--fg-3); }

.section-prose { padding-top: 64px; }
.case-hero + .section-prose, .section-tight + .section-prose { padding-top: 72px; }

@media (max-width: 860px) {
  /* the :has() rules above are more specific than a bare class, so the narrow tiers have to match them */
  .case-stats, .case-facts,
  .case-stats:has(> :nth-child(4)):not(:has(> :nth-child(5))),
  .case-facts:has(> :nth-child(4)):not(:has(> :nth-child(5))),
  .case-facts:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .case-stats, .case-facts,
  .case-stats:not(:has(> :nth-child(3))),
  .case-stats:has(> :nth-child(4)):not(:has(> :nth-child(5))),
  .case-facts:not(:has(> :nth-child(3))),
  .case-facts:has(> :nth-child(4)):not(:has(> :nth-child(5))),
  .case-facts:has(> :nth-child(5)) { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .case-stats { margin-top: 48px; }
  .case-hero h1 { max-width: none; }
  .case-logo { margin-bottom: 22px; }
  /* wide thin wordmarks (Claroty is 9:1) hit the width cap first, so it stays generous on phones */
  .case-logo img { max-width: 180px; max-height: 34px; }
}

/* Pull quotes: the source puts the speaker in a second <p> inside the blockquote */
.prose blockquote { margin: 34px 0; padding: 26px 30px; border: 0; border-left: 2px solid var(--accent);
  background: rgb(var(--ink) / .03); border-radius: 0 14px 14px 0; font-style: normal; }
.prose blockquote p { font-size: 19px; line-height: 1.6; color: var(--fg); margin: 0; }
.prose blockquote p + p { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--fg-3);
  font-family: var(--mono); letter-spacing: .04em; }
.prose blockquote p:only-child { margin: 0; }

/* the story reads better with a little more air between paragraphs and above headings */
.prose p { margin-bottom: 20px; }
.prose h2 { margin-top: 54px; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 26px; }
.prose li { margin-bottom: 11px; padding-left: 4px; }

/* The shared hero glow is sized for a hero with a product shot in it: it starts 360px down and runs 760px,
   which a 630px hero clips mid-gradient, leaving a hard-edged band across the figures. These heroes vary from
   ~420px (a video study with no figures) to ~700px, so the glow is sized as a share of the hero rather than in
   pixels — any fixed height fits some and gets clipped on the rest. */
.case-hero::before { top: 4%; height: 78%; }

/* Light skin: small green text uses --mint (≥4.5:1 on the light surfaces); --accent stays for dots, fills,
   borders and large numbers. Light only, so the dark skin is unchanged. */
:root[data-theme="light"] .case-facts dt { color: var(--mint); }