/**
 * Limestone theme — v2 case-study sections
 *
 * Styles the `v2_*` flexible-content layouts (Brown Boots, OneRail) against the
 * 2026 Figma frames. Every selector is namespaced `.cs2-*`, and the sheet is
 * only enqueued for case studies that actually use a v2 layout, so the
 * Webflow-era pages (ColiMinder, Ingenetix, Rival Games) never see it.
 *
 * Reference frames: 1440 desktop, 390 mobile.
 *   desktop  section padding 128px, page gutter 140px, content column 1160px
 *   mobile   section padding 64px,  page gutter  24px
 *
 * Values are transcribed from the Figma nodes, not eyeballed.
 *
 * @package Limestone
 */

.cs-page {
  --cs2-purple: #5d4af5;
  --cs2-purple-soft: #aa9fff;
  --cs2-ink: #1a1a1a;
  --cs2-muted: #686868;
  --cs2-line: #e6e9ee;
  --cs2-paper: #fff;
  --cs2-band: #f7f7f7;
  --cs2-statement: #211753;
  --cs2-invert: #fdfdfc;
  --cs2-Text-White-secondary: rgba(255, 255, 255, 0.65);
  --cs2--Stroke-Primary: var(--cs2-line);
  --cs2--Stroke-Secondary: rgba(247, 247, 247, 0.25);

  --cs2-gutter: 140px;
  --cs2-content: 1160px;
  --cs2-vpad: 128px;
  --cs2-radius: 6px;
  /* 80px at the 1440 reference frame = 60px outside the centered 1160px shell.
     Above 1440 the shell keeps centering, so the rules must follow it rather
     than stay pinned 80px from the viewport edge. */
  --cs2-rule-inset: max(80px, calc((100% - var(--cs2-content)) / 2 - 60px));

  --cs2-display: Archivo, Geist, sans-serif;
  --cs2-body: Geist, Archivo, sans-serif;
  --cs2-mono: 'DM Mono', SFMono-Regular, Menlo, monospace;
}

/* ── Shared shell ─────────────────────────────────────────────────────────── */

.cs2-section {
  position: relative;
  padding: var(--cs2-vpad) var(--cs2-gutter);
  /* Horizontal divider between consecutive bands. Drawn as an inset shadow,
     not a border, because Figma's stroke sits inside the frame and so must not
     add a pixel to the section's height. */
  box-shadow: inset 0 1px 0 var(--cs2-line);
}

/*
 * The pinstripe rules: two hairlines inset 80px that run the height of every
 * band, so they read as one continuous pair down the page. Drawn per section
 * rather than once for the page because the full-width image band deliberately
 * breaks them, and because the purple Challenge band needs a lighter colour.
 *
 * Kept to exactly 1px via border-width on a zero-size box — no transforms or
 * fractional widths that a browser could round up to 2px.
 */
.cs2-section::before {
  content: '';
  position: absolute;
  inset: 0 var(--cs2-rule-inset);
  border-left: 1px solid var(--cs2-line);
  border-right: 1px solid var(--cs2-line);
  pointer-events: none;
  z-index: 0;
}

.cs2-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--cs2-content);
  margin-inline: auto;
}

/*
 * The theme's base sheet puts a vertical margin on every <li>. Several of these
 * sections are semantic lists, where that margin lands between the flex/grid
 * container and its cards and makes every card row 8px taller than the Figma
 * frame. Reset it here rather than in base.css, which the older case studies
 * still rely on.
 */
.cs2-badges > li,
.cs2-facts > div,
.cs2-timeline__card > li,
.cs2-challenge__cards > li,
.cs2-solution__cards > li,
.cs2-pillars__cards > li,
.cs2-impact__stats > li,
.cs2-impact__list > li {
  margin: 0;
}

/*
 * Desktop / phone copy swap.
 *
 * A handful of OneRail strings are authored with tighter wording on the phone
 * artboard rather than simply re-wrapping. Both variants are in the server HTML
 * (so the page still reads with JavaScript off) and only one is ever displayed.
 * Most elements carry no variant at all and are unaffected by these rules.
 */
.cs2-only-m {
  display: none;
}

/* ── Shared head ──────────────────────────────────────────────────────────── */

.cs2-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 60px;
  text-align: center;
}

.cs2-eyebrow {
  margin: 0;
  font-family: var(--cs2-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--cs2-purple);
}

.cs2-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  font-family: var(--cs2-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 48px;
  color: var(--cs2-ink);
  text-align: center;
}

.cs2-title--invert {
  color: var(--cs2-invert);
}

.cs2-num {
  flex: none;
  height: 30px;
  width: auto;
  color: var(--cs2-purple);
}

.cs2-title--invert .cs2-num {
  color: var(--cs2-purple-soft);
}

.cs2-head__lead {
  margin: 8px 0 0;
  max-width: var(--cs2-content);
  font-family: var(--cs2-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--cs2-ink);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

/*
 * The hero is not a .cs2-section — it sets its own padding and lets the visual
 * bleed past the content column — so it carries the pinstripe rules itself.
 * They sit behind the hero image, as they do in Figma.
 */
.cs2-hero {
  position: relative;
  border-top: 0;
}

.cs2-hero::before {
  content: '';
  position: absolute;
  inset: 0 var(--cs2-rule-inset);
  border-left: 1px solid var(--cs2-line);
  border-right: 1px solid var(--cs2-line);
  pointer-events: none;
  z-index: 0;
}

.cs2-hero__top,
.cs2-hero__factsrow {
  position: relative;
  z-index: 1;
}

.cs2-hero__top {
  display: flex;
  align-items: center;
  justify-content: center; /* Children are fixed-width (468+24+668=1160) —
    unlike the rest of this page's fluid sections, so on viewports wider
    than 1440 the row needs an explicit center or it hugs the left gutter. */
  gap: 24px;
  /* Text (468) + gap (24) + media (668) = 1160, the theme's standard
     content width, centered by the same gutter every other section uses. */
  padding: 200px var(--cs2-gutter) 0;
}

.cs2-hero__col {
  flex: none;
  width: 468px;
}

.cs2-hero__txt {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cs2-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  text-decoration: none;
}

.cs2-back__icon {
  flex: none;
  color: var(--cs2-muted);
}

.cs2-back__label {
  font-family: var(--cs2-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--cs2-purple);
}

.cs2-back:hover .cs2-back__label {
  text-decoration: underline;
}

.cs2-hero__title {
  margin: 0;
  font-family: var(--cs2-display);
  font-weight: 500;
  font-size: 64px;
  line-height: 72px;
  color: var(--cs2-ink);
}

.cs2-hero__lead {
  margin: 0;
  font-family: var(--cs2-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: var(--cs2-ink);
}

.cs2-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs2-badge {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(93, 74, 245, 0.08);
  font-family: var(--cs2-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--cs2-purple);
}

.cs2-hero__media {
  flex: none;
  width: 668px;
  border: 1px solid var(--cs2-line);
  border-radius: var(--cs2-radius);
  overflow: hidden;
  box-shadow:
    0 12px 16px -4px rgba(0, 0, 0, 0.08),
    0 4px 6px -4px rgba(0, 0, 0, 0.08);
}

.cs2-hero__img {
  display: block;
  box-sizing: border-box;
  width: 668px;
  height: auto;
  object-fit: cover;
  transform: scale(1.01);
}

.cs2-hero__factsrow {
  padding: 40px var(--cs2-gutter) 80px;
}

/* Fact strip — also the shape used by the timeline card. */
.cs2-facts,
.cs2-timeline__card {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--cs2-content);
  margin-inline: auto;
  background: var(--cs2-paper);
  box-shadow: inset 0 0 0 1px var(--cs2-line);
  border-radius: var(--cs2-radius);
}

.cs2-facts__cell,
.cs2-timeline__cell {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs2-facts__cell {
  padding: 32px 40px;
}

.cs2-timeline__cell {
  padding: 32px;
}

.cs2-facts__cell + .cs2-facts__cell::before,
.cs2-timeline__cell + .cs2-timeline__cell::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 104px;
  background: var(--cs2-line);
}

.cs2-facts__label {
  margin: 0;
  font-family: var(--cs2-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--cs2-ink);
}

.cs2-facts__value {
  margin: 0;
  font-family: var(--cs2-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--cs2-muted);
}

/* ── Project overview ─────────────────────────────────────────────────────── */

.cs2-overview__grid {
  display: flex;
  align-items: center;
  gap: 80px;
}

.cs2-overview__facts {
  flex: none;
  width: 399px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0;
}

.cs2-overview__fact {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

.cs2-overview__fact + .cs2-overview__fact {
  border-top: 1px solid var(--cs2-line);
  padding-top: 40px;
}

.cs2-overview__facticon {
  flex: none;
  width: 32px;
  height: 31px;
}

.cs2-overview__facttext {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.cs2-overview__factlabel {
  margin: 0;
  font-family: var(--cs2-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--cs2-ink);
}

.cs2-overview__factvalue {
  margin: 0;
  font-family: var(--cs2-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: var(--cs2-ink);
}

.cs2-overview__statement {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 52px 56px;
  background: var(--cs2-paper);
  box-shadow: inset 0 0 0 1px var(--cs2-line);
  border-radius: var(--cs2-radius);
}

.cs2-overview__statement p {
  margin: 0;
  font-family: var(--cs2-mono);
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  color: var(--cs2-statement);
}

/* ── Challenge ────────────────────────────────────────────────────────────── */

.cs2-challenge {
  padding-block: 124px;
  background: var(--cs2-purple);
  box-shadow: inset 0 1px 0 rgba(253, 253, 252, 0.2);
}

/* On the purple band the rules invert to a light hairline. */
.cs2-challenge::before {
  border-left-color: rgba(255, 255, 255, 0.12);
  border-right-color: rgba(255, 255, 255, 0.12);
}

.cs2-challenge .cs2-head {
  gap: 32px;
  margin-bottom: 32px;
}

/*
 * Updated Figma (checked against the current Brown Boots frame): this line
 * is 1160px, the same content column as everything else on the page — it no
 * longer breaks past the gutter.
 */
.cs2-challenge__lead {
  width: 100%;
  max-width: var(--cs2-content);
  font-family: var(--cs2-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--cs2-invert);
}

.cs2-challenge__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs2-challenge__card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 44px;
  background: var(--cs2-paper);
  box-shadow: inset 0 0 0 1px var(--cs2-line);
  border-radius: var(--cs2-radius);
}

.cs2-challenge__card .cs2-num {
  color: var(--cs2-purple);
  align-self: flex-start;
}

.cs2-challenge__rule {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--cs2-line);
}

.cs2-challenge__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs2-challenge__cardtitle {
  margin: 0;
  font-family: var(--cs2-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  color: var(--cs2-ink);
}

.cs2-challenge__carddesc {
  margin: 0;
  font-family: var(--cs2-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--cs2-muted);
}

/* ── Solution ─────────────────────────────────────────────────────────────── */

.cs2-solution {
  background: var(--cs2-band);
}

.cs2-solution .cs2-head {
  margin-bottom: 60px;
}

.cs2-solution__lead {
  margin: 0 auto 60px;
  max-width: var(--cs2-content);
  font-family: var(--cs2-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--cs2-muted);
  text-align: center;
}

/* Figma's wrapper carries the hairline on its top edge with no padding, and
   sits 60px clear of the lead above and the diagram below. */
.cs2-solution__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 60px;
  padding: 0;
  list-style: none;
  box-shadow: inset 0 1px 0 var(--cs2-line);
}

/* Solution and three-up cards are the same object in Figma. */
.cs2-solution__card,
.cs2-pillars__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: var(--cs2-paper);
  border-radius: var(--cs2-radius);
}

/* Card stacks icon over a title/body group: 24px to the group, 16px inside. */
.cs2-solution__card {
  gap: 24px;
  border: 1px solid var(--cs2--Stroke-Primary);
}

.cs2-solution__cardtext {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs2-solution__icon {
  width: 32px;
  height: 32px;
}

.cs2-solution__cardtitle,
.cs2-pillars__title {
  margin: 0;
  font-family: var(--cs2-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--cs2-ink);
}

.cs2-solution__carddesc,
.cs2-pillars__desc {
  margin: 0;
  font-family: var(--cs2-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--cs2-muted);
}

.cs2-solution__diagram {
  margin: 0 0 60px;
}

.cs2-solution__diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

.cs2-solution__diagram-m {
  display: none;
}

.cs2-solution__diagram-d.white-bg,
.cs2-solution__diagram-m.white-bg {
  border-radius: 6px;
  border: 1px solid var(--cs2-line);
  background: rgba(255, 255, 255, 0.6);
  padding: 24px 32px;
}

.cs2-solution__diagramimg {
  display: block;
  width: 100%;
  height: auto;
}

/* The closing architecture card is dark, with a light-purple glyph. */
.cs2-solution__arch {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 44px;
  background: var(--cs2-ink);
  box-shadow: inset 0 0 0 1px var(--cs2-line);
  border-radius: var(--cs2-radius);
}

.cs2-solution__archicon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  color: var(--cs2-purple-soft);
}

.cs2-solution__archicon svg {
  width: 32px;
  height: 32px;
}

.cs2-solution__archtext {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs2-solution__archtitle {
  margin: 0;
  font-family: var(--cs2-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  color: var(--cs2-invert);
}

.cs2-solution__archsub {
  margin: 0;
  font-family: var(--cs2-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: var(--cs2-invert);
}

.cs2-solution__archdesc {
  margin: 0;
  font-family: var(--cs2-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--cs2-invert);
}

/* ── Feature showcase ─────────────────────────────────────────────────────── */
/* Continues v2_solution's grey band with no visible seam — Figma draws this
   as one contiguous "Solution" block, not a separately numbered section. */

.cs2-showcase {
  background: var(--cs2-band);
  /* .cs2-section's own top-divider shadow would draw a seam right where this
     section continues v2_solution's band — kill it here specifically. */
  box-shadow: none;
}

.cs2-solution:has(+ .cs2-showcase) {
  padding-bottom: 60px;
}

.cs2-showcase {
  padding-top: 0;
}

.cs2-showcase__cards {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The bordered white card chrome — Figma names this node "card"; it was
   missing entirely before, so the section's own grey band showed through
   around the image whenever a card's own aspect ratio didn't happen to
   match the 526×317 media box exactly. */
.cs2-showcase__card {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 12px;
  background: var(--cs2-paper);
  border: 1px solid var(--cs2-line);
  border-radius: var(--cs2-radius);
  overflow: hidden;
  margin: 0;
}

.cs2-showcase__card--r {
  flex-direction: row-reverse;
}

.cs2-showcase__media {
  flex: none;
  width: 526px;
  height: 317px;
  border: 1px solid var(--cs2-line);
  border-radius: 4px;
  overflow: hidden;
}

.cs2-showcase__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.cs2-showcase__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  flex: 1 0 0;
  align-self: stretch;
  min-width: 0;
  padding: 44px 32px 44px 0;
}

.cs2-showcase__card--r .cs2-showcase__text {
  padding: 44px 0 44px 32px;
}

.cs2-showcase__title {
  margin: 0;
  font-family: var(--cs2-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  color: var(--cs2-ink);
}

.cs2-showcase__desc {
  margin: 0;
  font-family: var(--cs2-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--cs2-muted);
}

.cs2-showcase__note {
  margin: 60px auto 0;
  max-width: var(--cs2-content);
  font-family: var(--cs2-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--cs2-muted);
  text-align: center;
}

@media screen and (max-width: 991px) {
  .cs2-showcase__cards {
    gap: 24px;
  }

  .postid-96 .cs2-showcase__cards {
    gap: 16px;
  }

  .cs2-showcase__card,
  .cs2-showcase__card--r {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
  }

  .cs2-showcase__media {
    width: 100%;
    height: auto;
    aspect-ratio: 526 / 317;
  }

  .cs2-showcase__text,
  .cs2-showcase__card--r .cs2-showcase__text {
    padding: 8px 8px 16px;
  }

  .cs2-showcase__title {
    font-size: 24px;
    line-height: 32px;
  }
}

/* ── Timeline ─────────────────────────────────────────────────────────────── */

.cs2-timeline__when {
  margin: 0 0 12px;
  font-family: var(--cs2-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--cs2-purple);
}

.cs2-timeline__title {
  margin: 0;
  font-family: var(--cs2-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--cs2-ink);
}

.cs2-timeline__desc {
  margin: 0;
  font-family: var(--cs2-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--cs2-muted);
}

/* ── Three-up detail ──────────────────────────────────────────────────────── */

.cs2-pillars__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs2-pillars__eyebrow {
  margin: 0;
  font-family: var(--cs2-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--cs2-purple);
}

.cs2-pillars__card {
  border: 1px solid var(--cs2--Stroke-Primary);
}

/* Dark variant: same cards, inked background + inverted text. */
.cs2-pillars--dark,
.cs2-pillars--dark .cs2-pillars__card {
  background: var(--cs2-ink);
}

.cs2-pillars--dark .cs2-pillars__card {
  border: 1px solid var(--cs2--Stroke-Secondary);
}

.cs2-pillars--dark::before {
  content: none;
}

.cs2-pillars--dark .cs2-pillars__title,
.cs2-pillars--dark .cs2-title {
  color: var(--cs2-invert);
}

.cs2-pillars--dark .cs2-pillars__desc,
.cs2-pillars--dark .cs2-pillars__footnote {
  color: var(--cs2-Text-White-secondary);
}

.cs2-pillars--dark .cs2-eyebrow,
.cs2-pillars--dark .cs2-pillars__eyebrow {
  color: var(--cs2-purple-soft);
}

.cs2-pillars__footnote {
  margin: 60px 0 0;
  font-family: var(--cs2-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--cs2-purple);
  text-align: center;
}

/* ── Full-width screen ────────────────────────────────────────────────────── */

.cs2-screen {
  display: block;
  padding: 0 var(--cs2-gutter);
  position: relative;
}

.cs2-screen::before {
  content: '';
  position: absolute;
  inset: 0 var(--cs2-rule-inset);
  border-left: 1px solid var(--cs2-line);
  border-right: 1px solid var(--cs2-line);
  pointer-events: none;
  z-index: 0;
}

.cs2-screen__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Impact & Results ─────────────────────────────────────────────────────── */

.cs2-head--inline {
  margin-bottom: 60px;
}

.cs2-impact__card {
  padding: 60px;
  background: var(--cs2-paper);
  box-shadow: inset 0 0 0 1px var(--cs2-line);
  border-radius: var(--cs2-radius);
}

.cs2-impact__intro {
  margin: 0 0 24px;
  font-family: var(--cs2-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--cs2-ink);
}

.cs2-impact__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs2-impact__item {
  margin: 0;
  font-family: var(--cs2-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--cs2-ink);
}

.cs2-impact__tick {
  color: var(--cs2-ink);
}

.cs2-impact__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.cs2-impact__stat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: var(--cs2-paper);
  box-shadow: inset 0 0 0 1px var(--cs2-line);
  border-radius: var(--cs2-radius);
}

.cs2-impact__statlabel {
  margin: 0;
  font-family: var(--cs2-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--cs2-purple);
  opacity: 0.8;
}

.cs2-impact__statvalue {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.cs2-impact__staticon {
  flex: none;
  display: inline-flex;
  width: 32px;
  height: 32px;
}

.cs2-impact__staticon svg {
  width: 32px;
  height: 32px;
}

.cs2-impact__statnum {
  font-family: var(--cs2-display);
  font-weight: 500;
  font-size: 28px;
  /* Figma fixes this row at 33px, not the 36px the type would imply. */
  line-height: 33px;
  color: var(--cs2-ink);
}

/* ── ≤1439: keep the 140px gutter proportional ────────────────────────────── */

@media screen and (max-width: 1439px) {
  .cs-page {
    --cs2-gutter: clamp(24px, 9.72vw, 140px);
    /* Below the 1440 reference frame, match .main-content/the footer's fixed
       12px inset (case-study.css) rather than the max(80px, …) clamp, so
       every rule line on the page stays at the same x position. */
    --cs2-rule-inset: 12px;
  }

  .cs2-hero__col {
    width: 41%;
  }

  .cs2-hero__media {
    width: 59%;
  }

  .cs2-hero__img {
    width: 100%;
    height: auto;
  }
}

/* ── ≤1199: tighten the type that overflows first ─────────────────────────── */

@media screen and (max-width: 1199px) {
  .cs-page {
    --cs2-vpad: 96px;
  }

  .cs2-hero__title {
    font-size: 52px;
    line-height: 60px;
  }

  .cs2-overview__grid {
    gap: 48px;
  }

  .cs2-overview__facts {
    width: 340px;
  }

  .cs2-overview__fact {
    gap: 40px;
  }

  .cs2-overview__statement {
    padding: 40px;
  }

  .cs2-overview__statement p {
    font-size: 24px;
    line-height: 32px;
  }

  .cs2-facts__cell {
    padding: 28px 24px;
  }
}

/* ── ≤991: the mobile artboard (390 frame) ────────────────────────────────── */

@media screen and (max-width: 991px) {
  .cs-page {
    --cs2-gutter: 24px;
    --cs2-vpad: 64px;
    /* Pull the rules in tight so they frame the page without touching the
       24px content gutter. */
    --cs2-rule-inset: 12px;
  }

  .cs2-section {
    padding: var(--cs2-vpad) var(--cs2-gutter);
  }

  .postid-96 .cs2-solution:has(+ .cs2-showcase) {
    padding-bottom: 20px;
  }

  .postid-96 .cs2-section {
    padding-top: 20px;
  }

  /* Swap to the phone-specific copy where a variant exists. */
  .cs2-only-d {
    display: none;
  }

  .cs2-only-m {
    display: revert;
  }

  .cs2-head {
    gap: 8px;
    margin-bottom: 32px;
  }

  /* Figma's phone artboard: eyebrow → title 8px, title → lead 12px. */
  .cs2-head__lead {
    margin-top: 4px;
  }

  .cs2-title {
    font-size: 28px;
    line-height: 36px;
    gap: 12px;
  }

  .cs2-num {
    height: 24px;
  }

  /* Hero stacks: text, visual, then the fact card. */
  .cs2-hero__top {
    display: block;
    padding: 114px var(--cs2-gutter) 0;
    overflow: visible;
  }

  .cs2-hero__col,
  .cs2-hero__media {
    width: 100%;
    padding-left: 0;
  }

  .cs2-hero__txt {
    max-width: none;
    gap: 16px;
  }

  /* Figma groups the back link with the title at a tighter 12px. */
  .cs2-back {
    margin-bottom: -4px;
  }

  .cs2-hero__title {
    font-size: 40px;
    line-height: 48px;
  }

  .cs2-hero__lead {
    font-family: var(--cs2-body);
    font-size: 16px;
    line-height: 24px;
  }

  .cs2-hero__media {
    margin-top: 32px;
    border-radius: 4px;
  }

  .cs2-hero__img {
    width: 100%;
    height: auto;
  }

  .cs2-hero__factsrow {
    padding: 32px var(--cs2-gutter) 48px;
  }

  /* Fact strip and timeline card both stack with horizontal rules. */
  .cs2-facts,
  .cs2-timeline__card {
    flex-direction: column;
    gap: 24px;
    padding: 24px;
  }

  .cs2-facts__cell,
  .cs2-timeline__cell {
    padding: 0;
  }

  .cs2-facts__cell + .cs2-facts__cell,
  .cs2-timeline__cell + .cs2-timeline__cell {
    border-top: 1px solid var(--cs2-line);
    padding-top: 24px;
  }

  .cs2-facts__cell + .cs2-facts__cell::before,
  .cs2-timeline__cell + .cs2-timeline__cell::before {
    content: none;
  }

  .cs2-facts__label {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
  }

  /* Overview stacks; the statement card sits under the facts. */
  .cs2-overview__grid {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .cs2-overview__facts {
    width: 100%;
    gap: 24px;
  }

  .cs2-overview__fact {
    gap: 28px;
  }

  /* The phone artboard uses a 24px glyph, which widens the text column. */
  .cs2-overview__facticon {
    width: 24px;
    height: 24px;
  }

  /* Let the copy claim the rest of the row (342 − 24 icon − 28 gap = 290),
     otherwise it shrink-wraps and the values wrap a line early. */
  .cs2-overview__facttext {
    flex: 1 1 auto;
  }

  .cs2-overview__fact + .cs2-overview__fact {
    padding-top: 24px;
  }

  .cs2-overview__factvalue {
    font-size: 20px;
    line-height: 28px;
  }

  .cs2-overview__statement {
    padding: 24px;
  }

  .cs2-overview__statement p {
    font-size: 16px;
    line-height: 24px;
  }

  /* Challenge */
  .cs2-challenge {
    padding-block: 64px;
  }

  .cs2-challenge .cs2-head {
    gap: 24px;
    margin-bottom: 24px;
  }

  .cs2-challenge__lead {
    width: auto;
    margin: 0;
    font-size: 16px;
    line-height: 24px;
  }

  .cs2-challenge__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .cs2-challenge__card {
    gap: 16px;
    padding: 24px;
  }

  .cs2-challenge__cardtitle {
    font-size: 20px;
    line-height: 28px;
  }

  .cs2-challenge__carddesc {
    font-size: 16px;
    line-height: 24px;
  }

  /* Solution — the phone artboard spaces every block at 40px and drops the
     hairline above the card list. */
  .cs2-solution .cs2-head {
    margin-bottom: 40px;
  }

  .cs2-solution__lead {
    margin-bottom: 40px;
    font-size: 16px;
    line-height: 24px;
  }

  .cs2-solution__cards {
    margin-bottom: 40px;
    box-shadow: none;
  }

  .cs2-solution__diagram {
    margin-bottom: 40px;
  }

  .cs2-solution__cards,
  .cs2-pillars__cards,
  .cs2-impact__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .cs2-solution__card,
  .cs2-pillars__card,
  .cs2-impact__stat {
    padding: 24px;
  }

  .cs2-solution__cardtitle,
  .cs2-pillars__title {
    font-size: 20px;
    line-height: 28px;
  }

  .cs2-solution__carddesc,
  .cs2-pillars__desc {
    font-size: 16px;
    line-height: 24px;
  }

  /* Figma lays the diagram out differently on the phone artboard. */
  .cs2-solution__diagram-d {
    display: none;
  }

  .cs2-solution__diagram-m {
    display: block;
  }

  .cs2-solution__diagram-m.white-bg {
    padding: 0;
  }

  /* The dark card keeps 32px padding on the phone artboard, tightens its
     internal stack to 24px and drops the glyph to 24px. */
  .cs2-solution__arch {
    padding: 32px;
    gap: 24px;
  }

  .cs2-solution__archicon,
  .cs2-solution__archicon svg {
    width: 24px;
    height: 24px;
  }

  .cs2-solution__archtitle {
    font-size: 24px;
    line-height: 32px;
  }

  .cs2-solution__archsub {
    font-size: 20px;
    line-height: 28px;
  }

  /* Impact */
  .cs2-impact__card {
    padding: 24px;
  }

  /* Timeline milestones drop to Geist 600/16 on the phone artboard, and the
     12px lead under the mono label collapses into the 4px cell gap. */
  .cs2-timeline__title {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
  }

  .cs2-timeline__when {
    margin-bottom: 0;
  }

  .cs2-head--inline {
    margin-bottom: 32px;
  }

  .cs2-impact__statnum {
    font-size: 24px;
  }

  /* Results card and stat cards are one 16px stack on mobile. */
  .cs2-impact__stats {
    margin-top: 16px;
  }

  .cs2-pillars__footnote {
    margin-top: 32px;
    text-align: left;
  }

  .cs2-screen {
    padding: 0;
  }

  .cs2-section::before,
  .cs2-screen::before,
  .cs2-hero::before {
    content: none;
  }
}