/*!
 * case-v2.css
 * Shared stylesheet for ALL v2 case studies (the 8-block format).
 *
 * Unlike the 31 legacy case pages — each of which ships its own 11-48 KB scraped
 * stylesheet — every v2 case links this one file. Do NOT add per-case rules here.
 * A case customises itself through the custom properties below, set from
 * `CaseStudyV2.theme` as inline vars on `.case-v2`; if a case seems to need a new
 * rule, the content model is probably missing a field.
 */

.case-v2 {
  /* ---- per-case theme, overridden inline from CaseStudyV2.theme ---- */
  --case-accent: #e85535;
  --case-accent-alt: #f8b000;
  --case-hero-base: #0a0b18;
  --case-blob-1: rgba(123, 60, 255, 0.85);
  --case-blob-2: rgba(254, 118, 36, 0.7);
  --case-blob-3: rgba(93, 33, 209, 0.9);

  /* ---- surfaces and ink ----
     Defaults are the house dark navy. Also overridable from CaseStudyV2.theme, because a
     client whose brand is light needs a light page and a 1000-line bespoke stylesheet is
     too much to pay for that. Override them as a SET — `bg` without `text` is unreadable. */
  --case-bg: #131426;
  --case-panel: #191b31;
  --case-line: rgba(255, 255, 255, 0.08);
  --case-line-strong: rgba(255, 255, 255, 0.12);
  --case-text: #ffffff;
  --case-text-body: #d5d6e4;
  --case-text-mute: #b1b2c1;
  --case-text-faint: #8a8caa;
  /* Ink for copy sitting ON the hero mesh — defaults to the page ink. */
  --case-hero-ink: var(--case-text);
  --case-hero-ink-mute: var(--case-text-mute);
  /* The scrim that keeps hero copy legible over the mesh. A light hero overrides it. */
  --case-hero-scrim: linear-gradient(180deg, rgba(10, 11, 24, 0.12) 0%, rgba(19, 20, 38, 0.72) 100%);
  /* Chip fill and card shadow — literals here would pin the page to the dark theme. */
  --case-hero-dot: rgba(255, 255, 255, 0.05);
  --case-chip-bg: rgba(255, 255, 255, 0.07);
  --case-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);

  /* ---- comp devices (DIFWEB-246) ----
     A second surface family (the comps' tinted "sand" cards), glass cards and copy on
     photos. Defaults chain to the tokens above so a case that sets none of them changes
     nothing; the two literals here are the only sensible fallbacks (white on a photo, a
     black scrim under it). */
  --case-font-display: Inter, sans-serif;
  --case-surface: var(--case-panel);
  --case-surface-ink: var(--case-text);
  --case-surface-ink-mute: var(--case-text-mute);
  --case-surface-line: var(--case-line-strong);
  --case-glass-bg: rgba(255, 255, 255, 0.4);
  --case-glass-ink-body: var(--case-text-mute);
  --case-photo-ink: #ffffff;
  /* Tile scrim. The comps stop at .4; .55 is a deliberate accessibility deviation — a white
     24px title crossed a bright wall at 2.55:1 under .4 (DIFWEB-246 verification, item 6). */
  --case-photo-scrim: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55));
  /* Copy shades for photo panels below the desktop breakpoint, where the copy has to sit on
     whatever part of the photo the narrow crop shows: the page ground for dark ink, the
     page ink for light ink, both mostly opaque. Chained to the theme, so a re-themed case
     gets its own colours. */
  --case-photo-shade: color-mix(in srgb, var(--case-bg) 92%, transparent);
  --case-photo-shade-inverse: color-mix(in srgb, var(--case-text) 82%, transparent);

  display: block;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--case-text);
  background: var(--case-bg);
  overflow: hidden;
}

.page.-cases-one .middle {
  padding-top: 0;
}

.case-v2 *,
.case-v2 *::before,
.case-v2 *::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- shared bits */

.case-v2__section {
  padding: 72px 0;
  border-top: 1px solid var(--case-line);
}

.case-v2__h2 {
  margin: 0 0 34px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--case-text);
}

/* A short accent rule above each h2 — cheap structure, keeps the long read from
   reading as one undifferentiated column. */
.case-v2__section > .wrap-v4 > .case-v2__h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--case-accent);
  border-radius: 2px;
}

/* Body copy is capped well short of the 1380px wrap — a case study is read, not
   scanned across. The wrap still governs the full-bleed grids below. */
.case-v2__prose {
  max-width: 760px;
}

.case-v2__prose p {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 30px;
  color: var(--case-text-body);
}

.case-v2__prose p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------- block 1 — hero + mesh */

/* Same pure-CSS mesh as the AI service pages (public/css/mesh-hero.css), re-tinted
   per case from --case-blob-*. Dark base + dot grid for structure, drifting blobs
   for colour, grain + vignette so copy stays high-contrast. No JS, no request. */
.case-v2__hero {
  position: relative;
  padding: 170px 0 78px;
  background-color: var(--case-hero-base);
  background-image: radial-gradient(var(--case-hero-dot) 1px, transparent 1.4px);
  background-size: 34px 34px;
  overflow: hidden;
}

.case-v2__hero::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  background:
    radial-gradient(34% 38% at 18% 26%, var(--case-blob-1), transparent 60%),
    radial-gradient(30% 34% at 82% 18%, var(--case-blob-2), transparent 60%),
    radial-gradient(40% 42% at 72% 76%, var(--case-blob-3), transparent 62%);
  filter: blur(60px) saturate(1.1);
  will-change: transform;
  animation: caseMeshDrift 26s ease-in-out infinite alternate;
}

.case-v2__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    var(--case-hero-scrim),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: cover, 140px 140px;
  opacity: 0.9;
}

.case-v2__hero > .wrap-v4 {
  position: relative;
  z-index: 1;
}

@keyframes caseMeshDrift {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform: translate3d(3%, -3.5%, 0) scale(1.12) rotate(2deg); }
  100% { transform: translate3d(-3%, 2.5%, 0) scale(1.06) rotate(-1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .case-v2__hero::before { animation: none; }
}

.case-v2__hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.case-v2__hero.-with-visual .case-v2__hero-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
}

.case-v2__hero-logo {
  margin-bottom: 30px;
}

.case-v2__hero-logo img {
  display: block;
  width: auto;
  max-width: 210px;
  max-height: 96px;
}

.case-v2__label {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--case-accent);
}

.case-v2__hero-title {
  max-width: 980px;
  margin: 0 0 24px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--case-hero-ink);
}

.case-v2__hero-sub {
  max-width: 720px;
  margin: 0;
  font-size: 19px;
  line-height: 31px;
  color: var(--case-hero-ink-mute);
}

.case-v2__hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* ------------------------------------------------------------------ block 2 */

.case-v2__glance {
  position: relative;
  z-index: 2;
  padding: 0;
  margin-top: -40px;
}

.case-v2__glance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--case-line-strong);
  border: 1px solid var(--case-line-strong);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--case-shadow);
}

.case-v2__glance-item {
  padding: 26px 28px;
  background: var(--case-panel);
}

.case-v2__glance-item dt {
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--case-text-faint);
}

.case-v2__glance-item dd {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
  color: var(--case-text);
}

.case-v2__stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__stack-tags li {
  padding: 3px 11px;
  font-size: 13px;
  line-height: 20px;
  color: var(--case-text-body);
  background: var(--case-chip-bg);
  border-radius: 100px;
}

/* ------------------------------------------------- block 3 — optional visual */

.case-v2__situation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.case-v2__situation.-with-visual .case-v2__situation-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 56px;
  /* start, not center: centring a short copy column against a taller visual strands the
     heading above a gap and misaligns the first paragraph. */
  align-items: start;
}

.case-v2__situation-visual {
  margin: 0;
  padding: 24px;
  background: var(--case-panel);
  border: 1px solid var(--case-line);
  border-radius: 16px;
}

.case-v2__situation-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.case-v2__situation-visual figcaption {
  margin-top: 16px;
  font-size: 14px;
  line-height: 23px;
  color: var(--case-text-faint);
}

/* ------------------------------------------------------------------ block 4 */

.case-v2__phases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  max-width: 1060px;
  margin: 0 0 44px;
  padding: 0;
  list-style: none;
}

.case-v2__phase {
  position: relative;
  padding: 26px 28px;
  background: var(--case-panel);
  border: 1px solid var(--case-line);
  border-radius: 14px;
}

.case-v2__phase-period {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--case-accent-alt);
}

.case-v2__phase-title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 600;
  line-height: 27px;
  color: var(--case-text);
}

.case-v2__phase-body {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--case-text-mute);
}

/* The two callouts are the spec's required obligations — a named trade-off with its
   cost, and one instance of pushing back. Pulled out because they're the reason a
   technical buyer keeps reading. */
.case-v2__callout {
  max-width: 880px;
  margin: 0 0 24px;
  padding: 28px 32px;
  background: var(--case-panel);
  border: 1px solid var(--case-line);
  border-left: 3px solid var(--case-accent);
  border-radius: 0 14px 14px 0;
}

.case-v2__callout--pushback {
  border-left-color: var(--case-accent-alt);
}

.case-v2__callout-label {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--case-accent);
}

.case-v2__callout--pushback .case-v2__callout-label {
  color: var(--case-accent-alt);
}

/* Slightly stronger than body copy: the two callouts are the contractual blocks and the
   reason the page exists, so they must not read as a footnote. Tokenised — a hardcoded
   near-white here rendered them invisible on the first light-themed case. */
.case-v2__callout-body {
  margin: 0;
  font-size: 17px;
  line-height: 30px;
  color: var(--case-text);
}

.case-v2__callout-cost {
  margin: 16px 0 0;
  padding-top: 16px;
  font-size: 16px;
  line-height: 27px;
  color: var(--case-text-mute);
  border-top: 1px solid var(--case-line);
}

.case-v2__callout-cost span {
  font-weight: 600;
  color: var(--case-text);
}

.case-v2__callout-quote {
  margin: 18px 0 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--case-line-strong);
}

.case-v2__callout-quote p {
  margin: 0 0 8px;
  font-size: 16px;
  font-style: italic;
  line-height: 27px;
  color: var(--case-text-body);
}

.case-v2__callout-quote cite {
  font-size: 14px;
  font-style: normal;
  color: var(--case-text-faint);
}

.case-v2__approach-note {
  max-width: 880px;
  margin-top: 30px;
  padding: 22px 26px;
  background: var(--case-chip-bg);
  border: 1px dashed var(--case-line-strong);
  border-radius: 14px;
}

.case-v2__approach-note p {
  margin: 0;
  color: var(--case-text-mute);
}

/* ------------------------------------------------------------------ block 5 */

.case-v2__built-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 44px;
  max-width: 1060px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: case-built;
}

.case-v2__built-list li {
  padding-top: 20px;
  border-top: 2px solid var(--case-line-strong);
  counter-increment: case-built;
}

.case-v2__built-capability {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  color: var(--case-text);
}

.case-v2__built-capability::before {
  content: counter(case-built, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--case-accent);
}

.case-v2__built-why {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--case-text-mute);
}

.case-v2__shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 48px;
}

.case-v2__shot {
  margin: 0;
  padding: 28px;
  background: var(--case-panel);
  border: 1px solid var(--case-line);
  border-radius: 16px;
}

.case-v2__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.case-v2__shot figcaption {
  margin-top: 18px;
  font-size: 14px;
  line-height: 23px;
  color: var(--case-text-faint);
}

/* ------------------------------------------------------------------ block 6 */

.case-v2__diagram {
  max-width: 1060px;
  margin: 36px 0 44px;
  padding: 30px;
  background: var(--case-panel);
  border: 1px solid var(--case-line);
  border-radius: 16px;
}

.case-v2__diagram-scroll {
  /* No-op above 768px — the diagram already fits. See the mobile rule. */
  max-width: 100%;
}

.case-v2__diagram img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile-only affordance for the scroll box; see the <768px rule. */
.case-v2__diagram-hint {
  display: none;
}

.case-v2__diagram figcaption {
  margin-top: 20px;
  font-size: 14px;
  line-height: 23px;
  color: var(--case-text-faint);
}

.case-v2__stack {
  max-width: 900px;
  margin: 0;
}

.case-v2__stack-row {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--case-line-strong);
}

.case-v2__stack-row:last-child {
  border-bottom: 1px solid var(--case-line-strong);
}

.case-v2__stack-row dt {
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: var(--case-text);
}

.case-v2__stack-row dd {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--case-text-mute);
}

.case-v2__keep-revisit {
  max-width: 760px;
  margin: 30px 0 0;
  padding-left: 18px;
  font-size: 16px;
  line-height: 27px;
  color: var(--case-text-faint);
  border-left: 2px solid var(--case-line-strong);
}

/* ------------------------------------------------------------------ block 7 */

.case-v2__results-preamble {
  margin-bottom: 34px !important;
}

.case-v2__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__metric {
  padding: 26px 28px;
  background: var(--case-panel);
  border: 1px solid var(--case-line);
  border-top: 2px solid var(--case-accent);
  border-radius: 4px 4px 14px 14px;
}

.case-v2__metric-value {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--case-accent);
}

.case-v2__metric-label {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--case-text);
}

.case-v2__metric-measured {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 21px;
  color: var(--case-text-faint);
}

.case-v2__results-consequence {
  margin-top: 34px !important;
  font-weight: 500;
  color: var(--case-text) !important;
}

/* ------------------------------------------------------------------ block 8 */

.case-v2__review-card {
  max-width: 880px;
  margin: 0;
  padding: 38px 42px;
  background: var(--case-panel);
  border: 1px solid var(--case-line);
  border-radius: 16px;
}

.case-v2__review-card blockquote {
  margin: 0 0 24px;
}

.case-v2__review-card blockquote p {
  margin: 0;
  font-size: 21px;
  line-height: 34px;
  color: var(--case-text);
}

.case-v2__review-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.case-v2__review-avatar {
  width: 52px;
  height: 52px;
  border-radius: 100%;
  object-fit: cover;
}

.case-v2__review-author strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--case-text);
}

.case-v2__review-author em {
  display: block;
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  color: var(--case-text-faint);
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1279px) {
  .case-v2__hero-title {
    font-size: 44px;
  }

  .case-v2__hero.-with-visual .case-v2__hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .case-v2__glance-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .case-v2__section {
    padding: 48px 0;
  }

  .case-v2__hero {
    padding: 130px 0 56px;
  }

  .case-v2__hero-logo img {
    max-width: 150px;
    max-height: 70px;
  }

  .case-v2__hero-title {
    font-size: 32px;
    letter-spacing: -0.02em;
  }

  .case-v2__hero-sub {
    font-size: 17px;
    line-height: 28px;
  }

  .case-v2__h2 {
    margin-bottom: 26px;
    font-size: 26px;
  }

  .case-v2__glance {
    margin-top: -24px;
  }

  .case-v2__glance-grid {
    grid-template-columns: 1fr;
  }

  .case-v2__glance-item {
    padding: 20px 22px;
  }

  .case-v2__phases,
  .case-v2__built-list {
    grid-template-columns: 1fr;
  }

  /* The two-column situation never collapsed — at 375px the prose ran in a 156px column
     beside an 83px image (found on the Happier inventory, DIFWEB-246, when Happier still
     had `situation.visual`). No shipped default-skin case sets `situation.visual` today
     (Maze and RedTrack do not; Vitality Access does, on its own skin), so this rule is a
     guard for the next one that does, verified on the pre-rebuild Happier only. */
  .case-v2__situation.-with-visual .case-v2__situation-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .case-v2__callout {
    padding: 22px 20px;
  }

  .case-v2__diagram,
  .case-v2__shot {
    padding: 16px;
  }

  /* A diagram authored at 1000px is illegible squeezed into a phone — its 13px labels
     land at about 4px. Floor the image and scroll it sideways instead, which is the
     repo-wide rule for wide content (tables, diagrams, code blocks). The caption stays
     outside the scroll box so it never scrolls out of view. */
  .case-v2__diagram-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* The mask is fixed to the box, not the content, so the right edge stays soft while
       the image scrolls under it — the cue that there is more to the side. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  }

  .case-v2__diagram-scroll img {
    min-width: 680px;
  }

  .case-v2__diagram-hint {
    display: block;
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.02em;
    color: var(--case-text-faint);
  }

  .case-v2__stack-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .case-v2__review-card {
    padding: 26px 22px;
  }

  .case-v2__review-card blockquote p {
    font-size: 18px;
    line-height: 30px;
  }
}

/* ============================================================================
   Optional blocks — panels, flow strip, stat band
   Added for the Maze and Happier designs (DIFWEB-246/247). Each earned its place
   by appearing in BOTH designs; anything that appeared in only one was left to
   the per-case skin instead.
   ============================================================================ */

/* ---- shared section eyebrow (SectionHead) ----
   Distinct from .case-v2__label, which is the hero kicker and takes the accent.
   Section eyebrows sit above an h2 and stay muted so the heading still leads. */
.case-v2__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-text-faint);
}

/* ---- panels ---- */
.case-v2__panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--case-panel);
  border: 1px solid var(--case-line);
  border-radius: 20px;
}

/* The visual sits flush to the panel's top edge — the Happier design bleeds it. */
.case-v2__panel-visual {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 200px;
  padding: 24px 24px 0;
  overflow: hidden;
}

.case-v2__panel-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.case-v2__panel-copy {
  padding: 26px 28px 30px;
}

.case-v2__panel-badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--case-bg);
  background: var(--case-accent);
  border-radius: 999px;
}

.case-v2__panel-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* Falls back to the page ink when a panel sets no `ink` — see CasePanel.ink. */
  color: var(--case-panel-ink, var(--case-text));
}

.case-v2__panel-body {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--case-panel-ink-body, var(--case-text-body));
}

/* ---- flow strip ---- */
.case-v2__flow-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin: 0;
  padding: 22px 28px;
  list-style: none;
  background: var(--case-panel);
  border: 1px solid var(--case-line);
  border-radius: 999px;
}

.case-v2__flow-step {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--case-text);
}

.case-v2__flow-arrow {
  font-size: 18px;
  line-height: 1;
  color: var(--case-accent);
}

/* ---- stat band ---- */
.case-v2__stats {
  display: grid;
  /* 190px, not 220: a five-figure band (Happier's stat strip) needs five columns to fit
     inside the 1212px the -glass treatment leaves at 1300px, and 220 landed one pixel over
     — 5 x 220 + 4 x 28 = 1212 exactly — so the fifth figure orphaned onto its own row.
     Lowering the floor only ever ALLOWS more columns; a 1-3 figure band is unchanged
     because each track still stretches to 1fr. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__stat-value {
  margin: 0 0 8px;
  font-size: 58px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--case-text);
}

.case-v2__stat-label {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--case-text-body);
}

.case-v2__stat-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--case-text-faint);
}

/* `glass` floats the figures on a translucent card. backdrop-filter is progressive —
   without support the card is still a legible translucent panel. */
.case-v2__statband.-glass .case-v2__stats {
  padding: 40px 44px;
  background: var(--case-line);
  border: 1px solid var(--case-line-strong);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

@media (max-width: 767px) {
  .case-v2__panel-copy {
    padding: 22px 20px 24px;
  }

  .case-v2__panel-visual {
    min-height: 0;
    padding: 18px 18px 0;
  }

  .case-v2__panel-title {
    font-size: 20px;
  }

  .case-v2__flow-strip {
    gap: 10px 14px;
    padding: 18px 22px;
    border-radius: 20px;
  }

  .case-v2__flow-step {
    font-size: 15px;
  }

  .case-v2__stats {
    gap: 22px;
  }

  .case-v2__stat-value {
    font-size: 44px;
  }

  .case-v2__stat-label {
    font-size: 16px;
  }

  .case-v2__statband.-glass .case-v2__stats {
    padding: 26px 22px;
    border-radius: 18px;
  }
}

/* ============================================================================
   Comp devices — DIFWEB-227 (Vitality Access, Constantine's case comps)
   Optional per-block treatments: centred heads, a tilted device mockup in the hero,
   a bare situation visual, an image strip + icons in `built`, iconed stack rows,
   icon cards in `results`, and the inverted review block. Every selector here is a
   modifier or a new element — a case that sets none of the new fields renders
   byte-identically to before. Token-based like the rest of the file.
   ============================================================================ */

/* ---- centred section heads ---- */
.case-v2__eyebrow.-center,
.case-v2__h2.-center {
  text-align: center;
}

.case-v2__section > .wrap-v4 > .case-v2__h2.-center::before {
  margin-left: auto;
  margin-right: auto;
}

.case-v2__prose.-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---- hero: tilted device mockup ----
   The visual column is a positioning context; the image is a transparent device shot
   rotated clockwise. The default keeps it in the column at a sane size — a skin places
   it to its comp's pixel offsets. */
.case-v2__hero.-mockup-tilt .case-v2__hero-grid {
  align-items: stretch;
}

.case-v2__hero-visual.-mockup-tilt {
  position: relative;
  display: flex;
  justify-content: center;
}

.case-v2__hero-visual.-mockup-tilt img {
  width: 62%;
  max-width: 320px;
  border-radius: 0;
  transform: rotate(8.74deg);
}

/* ---- situation: bare visual (cut-out art on the page ground) ---- */
.case-v2__situation-visual.-bare {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.case-v2__situation-visual.-bare img {
  border-radius: 0;
}

/* ---- built: image strip, item icons ---- */
.case-v2__built-image {
  display: flex;
  justify-content: center;
  margin: 0 0 40px;
}

.case-v2__built-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

.case-v2__built-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 0 18px;
}

/* An icon replaces the `01/02…` counter — both above the title would double-mark it.
   The `-cards` variant (DIFWEB-246) has its own icon square and no counter in the comp,
   so it is listed here too: dropping `-with-icons` from it in review re-enabled the
   counter and grew every card by 36px. */
.case-v2__built-list.-with-icons .case-v2__built-capability::before,
.case-v2__built-list.-cards .case-v2__built-capability::before {
  display: none;
}

/* ---- architecture: iconed / labelled stack rows ---- */
.case-v2__stack.-with-icons .case-v2__stack-row dt {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.case-v2__stack-icon {
  flex: none;
  width: 40px;
  height: 40px;
}

.case-v2__stack-term {
  display: block;
}

.case-v2__stack-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-text-faint);
}

/* ---- results: icon + title + caption cards (no numerals) ---- */
.case-v2__result-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__result-card {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 26px 28px;
  background: var(--case-panel);
  border: 1px solid var(--case-line);
  border-radius: 16px;
}

.case-v2__result-card-icon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 0 20px;
}

.case-v2__result-card-title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--case-text);
}

.case-v2__result-card-caption {
  margin: auto 0 0;
  padding-top: 12px;
  font-size: 13px;
  line-height: 20px;
  color: var(--case-text-faint);
  border-top: 1px solid var(--case-line);
}

/* ---- review: inverted block with a pinned visual ----
   Ground and ink are the hero pair, so the block inverts correctly on light AND dark
   themes without a colour literal. The bottom padding (a percentage of the wrap) is the
   room the pinned visual needs; a review with no `visual` is simply a taller card. */
.case-v2__review-card.-dark {
  position: relative;
  max-width: none;
  padding: 64px 10.77% 31.5%;
  overflow: hidden;
  background: var(--case-hero-base);
  border: 0;
  border-radius: 28px;
}

.case-v2__review-card.-dark blockquote p {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--case-hero-ink);
}

.case-v2__review-card.-dark .case-v2__review-author {
  position: relative;
  z-index: 1;
}

.case-v2__review-card.-dark .case-v2__review-author strong {
  color: var(--case-hero-ink);
}

.case-v2__review-card.-dark .case-v2__review-author em {
  color: var(--case-hero-ink-mute);
}

.case-v2__review-visual {
  position: absolute;
  left: 10.77%;
  bottom: 0;
  width: 78.46%;
  pointer-events: none;
}

.case-v2__review-visual img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .case-v2__hero-visual.-mockup-tilt {
    padding: 24px 0 12px;
  }

  .case-v2__hero-visual.-mockup-tilt img {
    width: 64%;
    max-width: 240px;
  }

  .case-v2__built-image {
    margin-bottom: 28px;
  }

  .case-v2__result-card {
    min-height: 0;
    padding: 22px 20px;
  }

  .case-v2__review-card.-dark {
    padding: 36px 24px 44%;
    border-radius: 20px;
  }

  .case-v2__review-card.-dark blockquote p {
    font-size: 20px;
  }

  .case-v2__review-visual {
    left: 6%;
    width: 88%;
  }
}

/* ============================================================================
   Comp devices — DIFWEB-246 (Happier, Constantine's case comps)
   The second batch of optional treatments, on the same rule as the first: every
   selector is a modifier or a new element, a case that sets none of the new fields
   renders byte-identically, and every colour is a token. Two parts: the `-comp` type
   scale and rhythm (opted into with `scale: 'comp'`), then the devices — image-band
   hero, tile mosaic, solid stat strip, photo panel, benefit cards, numbered outcome
   cards, logo row — and the page-wrapper hook that carries the related-cases chrome
   onto the case's own ground.
   ============================================================================ */

/* ---- `-comp` scale: the comps' 1300 grid, type and rhythm ----
   48/56 display headings in the theme's display face, 12px tracked eyebrows, 16/24
   body, no hairlines, no accent rule; blocks 120px apart, 180px under the hero.
   Section-specific paddings below encode the comps' rhythm around the photo panels. */
.case-v2.-comp .case-v2__section {
  padding: 60px 0;
  border-top: 0;
}

.case-v2.-comp .case-v2__situation {
  padding-top: 180px;
}

.case-v2.-comp .case-v2__photo {
  padding: 60px 0 0;
}

.case-v2.-comp .case-v2__built,
.case-v2.-comp .case-v2__arch {
  padding: 120px 0;
}

.case-v2.-comp .case-v2__results {
  padding: 80px 0;
}

.case-v2.-comp .case-v2__eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 2.4px;
}

.case-v2.-comp .case-v2__h2 {
  margin: 0 0 56px;
  font-family: var(--case-font-display);
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 0;
}

.case-v2.-comp .case-v2__h2::before {
  content: none;
}

.case-v2.-comp .case-v2__results .case-v2__h2 {
  max-width: 900px;
}

.case-v2.-comp .case-v2__prose p {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
}

.case-v2.-comp .case-v2__prose p:last-child {
  margin-bottom: 0;
}

/* SectionHead's eyebrow is a <p>; when the head sits inside a prose column (the tile
   mosaic) it must not pick up the body-copy rule above. */
.case-v2 .case-v2__prose p.case-v2__eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 2.4px;
  color: var(--case-text-faint);
}

/* ---- hero: full-bleed raster band, upright device, chips ----
   The section is a column flexbox so the grid fills the band and the device can sit on
   its bottom padding edge; the raster is clipped to the 64px bottom radii on its own
   wrapper, so what shows under the corners is the hero base token, not the page. */
.case-v2__hero.-image-band {
  display: flex;
  flex-direction: column;
  min-height: 984px;
  padding: 180px 0 120px;
  background-image: none;
}

.case-v2__hero.-image-band::before,
.case-v2__hero.-image-band::after {
  content: none;
}

.case-v2__hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 0 0 64px 64px;
}

.case-v2__hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.case-v2__hero.-image-band > .wrap-v4 {
  display: flex;
  flex: 1;
  width: 100%;
}

.case-v2__hero.-image-band .case-v2__hero-grid {
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 489px;
  gap: 72px;
  align-items: center;
}

.case-v2__hero.-image-band .case-v2__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.case-v2__hero.-image-band .case-v2__hero-logo {
  margin: 0;
}

.case-v2__hero.-image-band .case-v2__hero-logo img {
  width: auto;
  max-width: none;
  height: 40px;
  max-height: 40px;
}

.case-v2__hero.-image-band .case-v2__hero-title {
  max-width: none;
  margin: 0;
  font-family: var(--case-font-display);
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 0;
}

.case-v2__hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 652px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__hero-chips li {
  padding: 8px 16px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  white-space: nowrap;
  color: var(--case-hero-ink);
  background: var(--case-chip-bg);
  border-radius: 20px;
}

.case-v2__hero-visual.-image-band {
  display: flex;
  align-self: stretch;
  align-items: flex-end;
  justify-content: center;
}

.case-v2__hero-visual.-image-band img {
  width: 318px;
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

/* ---- situation: tile mosaic ----
   Copy column flexible, tiles fixed at 690; the heading lives inside the copy column
   (see Situation.tsx), which is vertically centred against the mosaic. */
.case-v2__situation.-with-tiles .case-v2__situation-grid {
  grid-template-columns: minmax(0, 1fr) 690px;
  gap: 80px;
  align-items: stretch;
}

.case-v2__situation.-with-tiles .case-v2__prose {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
}

.case-v2.-comp .case-v2__situation.-with-tiles .case-v2__h2 {
  margin-bottom: 20px;
}

.case-v2__tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-v2__tiles-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.case-v2__tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 420px;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
}

.case-v2__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-v2__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--case-photo-scrim);
}

.case-v2__tile figcaption {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 24px 34px;
}

.case-v2__tile-pill {
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  color: var(--case-text);
  border-radius: 999px;
}

.case-v2__tile-title {
  max-width: 250px;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  white-space: pre-line;
  color: var(--case-photo-ink);
}

.case-v2__tile-stat {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 120px;
  padding: 18px 32px;
  background: var(--case-surface);
  border-radius: 24px;
}

.case-v2__tile-stat > img {
  flex: none;
  width: 48px;
  height: 48px;
}

.case-v2__tile-stat-figure {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding-right: 24px;
  white-space: nowrap;
}

/* The 1×68 divider, drawn on the figure's right edge so the 24px gaps stay even. */
.case-v2__tile-stat-figure::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 68px;
  background: var(--case-surface-line);
  transform: translateY(-50%);
}

.case-v2__tile-stat-figure strong {
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  color: var(--case-surface-ink);
}

.case-v2__tile-stat-figure span {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: var(--case-surface-ink-mute);
}

.case-v2__tile-stat-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.case-v2__tile-stat-copy strong {
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--case-surface-ink);
}

.case-v2__tile-stat-copy span {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--case-surface-ink-mute);
}

/* ---- stat band: solid strip ---- */
.case-v2__statband.-solid .case-v2__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 48px 120px;
  background: var(--case-surface);
  border-radius: 24px;
}

.case-v2__statband.-solid .case-v2__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.case-v2__statband.-solid .case-v2__stat-value {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 32px;
  /* Figma's "normal" leading for Gilroy Bold is 1.22 (a 39px box at 32px); the browser's
     is 1.4, which would add 6px to the strip. */
  line-height: 1.22;
  letter-spacing: 0;
  color: var(--case-surface-ink);
}

.case-v2__statband.-solid .case-v2__stat-label {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--case-surface-ink-mute);
}

/* ---- photo panel ----
   Panel geometry comes from the block's data as custom properties (radius, min-height,
   copy width, object-position) so two panels on one page can differ; the fallbacks are
   the comps' smaller panel. */
.case-v2__photo-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--case-photo-min-height, 0);
  padding: 80px;
  overflow: hidden;
  border-radius: var(--case-photo-radius, 24px);
}

.case-v2__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--case-photo-position, center);
}

@media (max-width: 1279px) {
  /* Below the desktop grid the panel shows a slice of the photo and the copy runs the full
     width; the data names a different focal point for it (`image.mobilePosition`) so the
     subject stays out from under the copy … */
  .case-v2__photo-img {
    object-position: var(--case-photo-position-m, var(--case-photo-position, center));
  }

  /* … and a shade sits behind the copy block regardless, because no crop of a photo is
     a reliable ground for 12px text. Solid over the copy, fading out over 140px below it
     so the photo still reads underneath. Dark ink gets the page ground, light ink the
     page ink (`.-light`). */
  .case-v2__photo-copy {
    position: relative;
  }

  .case-v2__photo-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    /* Runs 200px past the copy's right edge and fades out there (the mask), so a copy
       column narrower than the panel — 650 in a 944 panel at 1024 — has no hard edge. */
    inset: -56px -200px -140px -56px;
    background: linear-gradient(
      180deg,
      var(--case-photo-shade) 0%,
      var(--case-photo-shade) calc(100% - 140px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 200px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 200px), transparent);
    pointer-events: none;
  }

  .case-v2__photo-panel.-light .case-v2__photo-copy::before {
    background: linear-gradient(
      180deg,
      var(--case-photo-shade-inverse) 0%,
      var(--case-photo-shade-inverse) calc(100% - 140px),
      transparent 100%
    );
  }
}

.case-v2__photo-copy {
  position: relative;
  z-index: 1;
  width: var(--case-photo-copy-width, 50%);
  max-width: 100%;
}

.case-v2 .case-v2__photo-copy .case-v2__h2 {
  margin-bottom: 0;
}

.case-v2__photo-body {
  max-width: none;
  margin-top: 64px;
}

.case-v2__photo-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.case-v2__photo-card {
  padding: 32px;
  background: var(--case-glass-bg);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
}

.case-v2__photo-card h3 {
  margin: 0 0 18px;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: var(--case-text);
}

.case-v2__photo-card p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--case-glass-ink-body);
}

.case-v2__photo-panel.-light .case-v2__eyebrow,
.case-v2__photo-panel.-light .case-v2__h2,
.case-v2 .case-v2__photo-panel.-light .case-v2__prose p {
  color: var(--case-photo-ink);
}

/* ---- built: benefit cards in an 810px centred column ---- */
.case-v2__built-column {
  max-width: 810px;
  margin: 0 auto;
}

.case-v2__built-list.-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: none;
}

.case-v2__built-list.-cards li {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px;
  background: var(--case-surface);
  border-top: 0;
  border-radius: 20px;
}

.case-v2__built-icon-tile {
  display: flex;
  flex: none;
  padding: 16px;
  background: var(--case-panel);
  border-radius: 16px;
}

.case-v2__built-list.-cards .case-v2__built-icon {
  width: 32px;
  height: 32px;
  margin: 0;
}

.case-v2__built-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.case-v2__built-list.-cards .case-v2__built-capability {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: var(--case-surface-ink);
}

.case-v2__built-list.-cards .case-v2__built-why {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--case-surface-ink-mute);
}

/* ---- results: numbered title-only cards ---- */
.case-v2__result-cards.-numbered {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.case-v2__result-cards.-numbered .case-v2__result-card {
  flex: 1 1 0;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  padding: 28px;
  background: var(--case-surface);
  border: 0;
  border-radius: 22px;
}

.case-v2__result-card-num {
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.22;
  color: var(--case-surface-ink);
}

.case-v2__result-cards.-numbered .case-v2__result-card-title {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--case-surface-ink);
}

/* ---- architecture: logo row ----
   160px cells, mark centred in an 84×52 box, label centred beneath. The marks carry
   their own width/height (40, 50 or 32 in the comp) so the box only centres them. */
.case-v2__logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__logo-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
  padding: 16px 28px;
}

.case-v2__logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 52px;
}

.case-v2__logo-mark img {
  display: block;
  max-width: 52px;
  max-height: 52px;
}

.case-v2__logo-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  text-align: center;
  color: var(--case-surface-ink);
}

/* ---- related-cases chrome on the case's own ground ----
   `RelatedCasesSection` sits outside the article on the navy body. A page that wants it
   on its own ground adds `-related-on-ground` to the page wrapper and sets these four
   custom properties inline there (the wrapper is outside `.case-v2`, so the theme vars
   do not reach it). `.wrap` fixes a 1160px width from 1280px up — override width, not
   just max-width.

   Only the ground and the grid live here. The block's own `<style>` (DIFWEB-302) paints
   every colour from `--case-related-{ink,line,hover}`, which inherit down to it from the
   page wrapper, so this file must NOT restate them — setting the tokens is the whole
   contract. */
.page.-cases-one.-related-on-ground {
  background: var(--case-related-bg);
}

.page.-cases-one.-related-on-ground .related-cases {
  width: 100%;
  max-width: 1380px;
  padding: 72px 40px 120px;
}

/* ---- responsive: no mobile comp exists, so these are derived ---- */
@media (max-width: 1279px) {
  .case-v2__hero.-image-band {
    min-height: 0;
    padding: 150px 0 80px;
  }

  .case-v2__hero.-image-band .case-v2__hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .case-v2__hero-visual.-image-band {
    align-self: auto;
  }

  .case-v2__situation.-with-tiles .case-v2__situation-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .case-v2__situation.-with-tiles .case-v2__prose {
    max-width: 760px;
  }

  .case-v2__statband.-solid .case-v2__stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 48px;
    padding: 40px;
  }

  .case-v2__photo-panel {
    padding: 56px;
  }

  .case-v2__photo-copy {
    width: 100%;
    max-width: 650px;
  }

  .case-v2.-comp .case-v2__situation {
    padding-top: 120px;
  }
}

@media (max-width: 767px) {
  .case-v2.-comp .case-v2__section {
    padding: 40px 0;
  }

  .case-v2.-comp .case-v2__situation {
    padding-top: 80px;
  }

  .case-v2.-comp .case-v2__photo {
    padding: 40px 0 0;
  }

  .case-v2.-comp .case-v2__built,
  .case-v2.-comp .case-v2__arch {
    padding: 80px 0;
  }

  .case-v2.-comp .case-v2__results {
    padding: 56px 0;
  }

  .case-v2.-comp .case-v2__h2,
  .case-v2__hero.-image-band .case-v2__hero-title {
    font-size: 32px;
    line-height: 40px;
  }

  .case-v2.-comp .case-v2__h2 {
    margin-bottom: 32px;
  }

  .case-v2.-comp .case-v2__eyebrow {
    margin-bottom: 14px;
  }

  .case-v2__hero.-image-band {
    padding: 120px 0 56px;
  }

  .case-v2__hero.-image-band .case-v2__hero-copy {
    gap: 20px;
  }

  .case-v2__hero.-image-band .case-v2__hero-logo img {
    height: 32px;
    max-height: 32px;
  }

  .case-v2__hero-bg {
    border-radius: 0 0 32px 32px;
  }

  .case-v2__hero-visual.-image-band img {
    width: 240px;
  }

  .case-v2__tiles-row {
    grid-template-columns: 1fr;
  }

  .case-v2__tile {
    height: 320px;
  }

  .case-v2__tile-stat {
    flex-wrap: wrap;
    gap: 16px 20px;
    height: auto;
    padding: 24px;
  }

  .case-v2__tile-stat-figure {
    padding-right: 0;
  }

  .case-v2__tile-stat-figure::after {
    content: none;
  }

  .case-v2__tile-stat-copy {
    flex-basis: 100%;
  }

  .case-v2__statband.-solid .case-v2__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
    padding: 28px 20px;
  }

  .case-v2__statband.-solid .case-v2__stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .case-v2__statband.-solid .case-v2__stat-value {
    font-size: 28px;
  }

  /* On a phone the copy fills the panel, so an overlay leaves no photo visible at all
     (DIFWEB-246 verification, round 3). Below 768px the panel is a solid ground in the
     shade colour, the copy sits on it unshaded, and the photo becomes a 300px band along
     the bottom — reserved by the padding, top edge masked into the ground — with
     `image.mobilePosition` pointing at the subject. */
  .case-v2__photo-panel {
    min-height: 0;
    padding: 32px 24px 332px;
    border-radius: 24px;
    background: var(--case-photo-shade);
  }

  .case-v2__photo-panel.-light {
    background: var(--case-photo-shade-inverse);
  }

  .case-v2__photo-copy::before {
    content: none;
  }

  .case-v2__photo-img {
    top: auto;
    height: 300px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 72px);
    mask-image: linear-gradient(to bottom, transparent, #000 72px);
  }

  .case-v2__photo-body {
    margin-top: 32px;
  }

  .case-v2__photo-cards {
    gap: 16px;
    margin-top: 32px;
  }

  .case-v2__photo-card {
    padding: 24px;
  }

  .case-v2__built-list.-cards li {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
  }

  .case-v2__result-cards.-numbered {
    flex-direction: column;
  }

  /* `flex: 1 1 0` is the equal-width rule for the row; in the column it zeroes the
     height, so the cards collapse onto each other. */
  .case-v2__result-cards.-numbered .case-v2__result-card {
    flex: none;
  }

  .case-v2__logo-cell {
    width: 50%;
    padding: 12px 16px;
  }

  .case-v2__logo-label {
    min-height: 0;
    padding-top: 8px;
  }

  .page.-cases-one.-related-on-ground .related-cases {
    padding: 48px 15px 72px;
  }
}

/* ============================================================================
   Comp devices — DIFWEB-247 (Maze, Constantine's case comps)
   Third batch, same rule as the first two: every selector below is a modifier or a
   new element, a case that sets none of the new fields renders byte-identically, and
   every colour is a token. The devices: a flat gradient hero with the copy bottom-
   aligned to a plain mockup; the at-a-glance block as a headed 3×2 card grid; a tinted
   stat card beside the situation copy; the photo panel as a two-column tinted band
   (solid cards, stat cards, a copy-column image, a quote card, a texture fill with an
   optional overlay, an explicit ink); alternating feature rows; a three-column stack
   table. Tokens live in their own block so the diff against the previous file stays
   additive — custom properties merge across rules.
   ============================================================================ */

.case-v2 {
  /* Eyebrow tokens. The defaults are the Happier comp's values (Inter 400, 20% tracking,
     the faint ink) so the -comp eyebrow rule above keeps rendering exactly what it did;
     the Maze comp sets Gilroy Bold, 30% tracking and the heading ink at 80%. */
  --case-eyebrow-font: Inter, sans-serif;
  --case-eyebrow-weight: 400;
  --case-eyebrow-tracking: 2.4px;
  --case-eyebrow-ink: var(--case-text-faint);
  /* Text fill for the photo-panel quote attribution — a gradient in the comp. */
  --case-quote-ink: var(--case-accent);
}

/* ---- eyebrow, from tokens ----
   Re-states the -comp eyebrow with the tokens above (defaults equal the literals it had).
   The photo-panel `-light` override is repeated after it so a light-ink panel's eyebrow
   still takes the photo ink — at full opacity: an 80% eyebrow on a mid-tone band is
   under AA at 12px (DIFWEB-247, an accessibility deviation from the comp's opacity). */
.case-v2.-comp .case-v2__eyebrow,
.case-v2 .case-v2__prose p.case-v2__eyebrow {
  font-family: var(--case-eyebrow-font);
  font-weight: var(--case-eyebrow-weight);
  letter-spacing: var(--case-eyebrow-tracking);
  color: var(--case-eyebrow-ink);
}

.case-v2 .case-v2__photo-panel.-light .case-v2__eyebrow,
.case-v2 .case-v2__photo-panel.-inked .case-v2__eyebrow {
  color: var(--case-photo-ink);
}

/* `-inked`: an explicit `inkColor` on the panel — the `-light` copy rules with the token
   overridden inline (see PhotoPanel.tsx). */
.case-v2__photo-panel.-inked .case-v2__h2,
.case-v2 .case-v2__photo-panel.-inked .case-v2__prose p {
  color: var(--case-photo-ink);
}

/* ---- hero: flat gradient, copy bottom-aligned to a plain mockup ----
   `heroBase` at the top fading to the page ground at the bottom; no blobs, dot grid or
   grain, no radius. The comp's 1300 row is a fixed 550 copy column, an 80 gap and the
   flexible mockup; the copy column stretches to the mockup's height and packs its copy
   to the bottom, so the lede's baseline sits on the mockup's bottom edge. */
.case-v2__hero.-gradient {
  padding: 160px 0 80px;
  background-color: var(--case-bg);
  background-image: linear-gradient(180deg, var(--case-hero-base) 0%, transparent 100%);
  background-size: auto;
}

.case-v2__hero.-gradient::before,
.case-v2__hero.-gradient::after {
  content: none;
}

.case-v2__hero.-gradient.-with-visual .case-v2__hero-grid {
  grid-template-columns: 550px minmax(0, 1fr);
  gap: 80px;
  align-items: stretch;
}

.case-v2__hero.-gradient .case-v2__hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.case-v2__hero.-gradient .case-v2__hero-logo {
  margin: 0 0 64px;
}

.case-v2__hero.-gradient .case-v2__hero-title {
  max-width: none;
  margin: 0 0 24px;
  font-family: var(--case-font-display);
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -1.28px;
}

.case-v2__hero.-gradient .case-v2__hero-sub {
  max-width: none;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
}

/* A plain visual's radius comes from the data when set (the Maze mockup carries 18). */
.case-v2__hero-visual img {
  border-radius: var(--case-hero-visual-radius, 14px);
}

/* ---- at a glance: headed 3×2 card grid on the page ground ---- */
.case-v2__glance.-cards {
  z-index: auto;
  margin-top: 0;
  padding: 72px 0;
}

.case-v2.-comp .case-v2__glance.-cards {
  padding: 120px 0;
}

.case-v2.-comp .case-v2__glance.-cards .case-v2__eyebrow {
  margin-bottom: 16px;
}

.case-v2.-comp .case-v2__glance.-cards .case-v2__h2 {
  margin-bottom: 48px;
}

.case-v2__glance-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__glance-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--case-surface);
  border-radius: 16px;
}

.case-v2__glance-card-label {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: var(--case-accent);
}

.case-v2__glance-card-title {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--case-surface-ink);
}

.case-v2__glance-card-body {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--case-surface-ink-mute);
}

/* ---- situation: tinted stat card beside a fixed 560 copy column ---- */
.case-v2__situation.-with-stat .case-v2__situation-grid {
  grid-template-columns: 560px minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

.case-v2__situation.-with-stat .case-v2__prose {
  max-width: none;
}

.case-v2.-comp .case-v2__situation.-with-stat {
  padding: 120px 0;
}

.case-v2.-comp .case-v2__situation.-with-stat .case-v2__eyebrow {
  margin-bottom: 24px;
}

.case-v2.-comp .case-v2__situation.-with-stat .case-v2__h2 {
  margin-bottom: 24px;
}

.case-v2__stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 80px 44px;
  overflow: hidden;
  border-radius: 24px;
  color: var(--case-stat-card-ink, var(--case-text));
}

.case-v2__stat-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-v2__stat-card-head,
.case-v2__stat-card-body,
.case-v2__stat-card-stats {
  position: relative;
  z-index: 1;
  width: 100%;
}

.case-v2__stat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.case-v2__stat-card-head h3 {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: inherit;
}

.case-v2__stat-card-head img {
  flex: none;
  width: 20px;
  height: 20px;
}

.case-v2__stat-card-body {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: inherit;
}

/* The comp's body → numeral distance is 28 (a 16 gap plus the row's 12 top padding);
   the card's own 18 gap supplies the rest. */
.case-v2__stat-card-stats {
  display: flex;
  gap: 24px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.case-v2__stat-card-stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-v2__stat-card-stats strong {
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -1.28px;
}

.case-v2__stat-card-stats span {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
}

/* ---- photo panel as a tinted band ----
   `-texture` marks a flat tint with no subject: the section pads 80 like the comp's band
   wrappers and the copy sits straight on the raster at every width (see the responsive
   rules — no shade, no photo band). The overlay is a plain span painted between the
   raster and the copy. */
.case-v2.-comp .case-v2__photo.-texture {
  padding: 80px 0;
}

.case-v2__photo-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--case-photo-overlay);
}

.case-v2 .case-v2__photo-panel.-texture .case-v2__eyebrow {
  margin-bottom: var(--case-photo-eyebrow-gap, 12px);
}

.case-v2 .case-v2__photo-panel .case-v2__h2 {
  max-width: var(--case-photo-heading-width, none);
}

.case-v2__photo-panel.-texture .case-v2__photo-body {
  margin-top: 24px;
}

/* split: copy (+ media) left, stats then cards right, bottom-aligned; stack: copy over a
   full-width stat row. Both keep 40 between their rows and the quote card. */
.case-v2__photo-panel.-split,
.case-v2__photo-panel.-stack {
  gap: 40px;
}

.case-v2__photo-columns {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--case-photo-copy-width, minmax(0, 1fr)) minmax(0, 1fr);
  gap: 80px;
  align-items: end;
}

.case-v2__photo-panel.-split .case-v2__photo-copy {
  width: auto;
  max-width: none;
}

.case-v2__photo-panel.-stack .case-v2__photo-body {
  max-width: 560px;
}

/* The copy-column image: 50 under the body (the comp's 40 padding + 10 gap). */
.case-v2__photo-media {
  width: 100%;
  margin-top: 50px;
  overflow: hidden;
  border-radius: 24px;
}

.case-v2__photo-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-v2__photo-aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-v2__photo-panel.-split .case-v2__photo-cards {
  gap: 8px;
  margin: 0;
}

.case-v2__photo-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__photo-panel.-stack .case-v2__photo-stats {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
  gap: 32px;
}

.case-v2__photo-stat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  background: var(--case-surface);
  border: 1px solid var(--case-surface-line);
  border-radius: 24px;
}

/* A stat with no numeral is the wide feature card — it takes the whole row. */
.case-v2__photo-stat.-wide {
  grid-column: 1 / -1;
}

.case-v2__photo-stat-value {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -1.28px;
  color: var(--case-surface-ink);
}

.case-v2__photo-stat-title {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--case-surface-ink);
}

.case-v2__photo-stat-body {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: var(--case-surface-ink-mute);
}

/* solid cards: `surface` with a `surfaceLine` border, no blur; label + pill header. */
.case-v2__photo-panel.-solid .case-v2__photo-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--case-surface);
  border: 1px solid var(--case-surface-line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.case-v2__photo-panel.-solid .case-v2__photo-card h3 {
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  color: var(--case-surface-ink);
}

.case-v2__photo-panel.-solid .case-v2__photo-card p {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--case-surface-ink-mute);
}

.case-v2__photo-panel.-solid .case-v2__photo-card .case-v2__photo-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: var(--case-accent);
}

.case-v2__photo-card-pill {
  padding: 4px 10px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--case-accent) 10%, transparent);
  border-radius: 99px;
}

/* quote card: centred display quote, attribution filled with `quoteInk`. */
.case-v2__photo-quote {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 32px 80px;
  background: var(--case-surface);
  border-radius: 20px;
}

.case-v2__photo-quote blockquote {
  margin: 0;
}

.case-v2__photo-quote blockquote p {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: var(--case-surface-ink);
}

.case-v2__photo-quote figcaption {
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  color: transparent;
  background: var(--case-quote-ink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- feature rows: alternating copy / media on the page ground ----
   The group pads nothing; each row pads itself (80 in the comp, 120 for the WebGL row)
   and the rows sit 10 apart. The fixed column is either the media (`-fixed-media`) or
   the copy (`-fixed-copy`), from the data. */
.case-v2__rows {
  padding: 0;
  border-top: 0;
}

.case-v2.-comp .case-v2__rows {
  padding: 0;
}

.case-v2__rows > .wrap-v4 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case-v2__row {
  display: grid;
  gap: var(--case-row-gap, 80px);
  align-items: center;
  padding: var(--case-row-padding, 80px) 0;
}

.case-v2__row.-align-start {
  align-items: start;
}

.case-v2__row.-fixed-media.-media-right {
  grid-template-columns: minmax(0, 1fr) var(--case-row-media-width);
}

.case-v2__row.-fixed-media.-media-left {
  grid-template-columns: var(--case-row-media-width) minmax(0, 1fr);
}

.case-v2__row.-fixed-copy.-media-right {
  grid-template-columns: var(--case-row-copy-width, minmax(0, 1fr)) minmax(0, 1fr);
}

.case-v2__row.-fixed-copy.-media-left {
  grid-template-columns: minmax(0, 1fr) var(--case-row-copy-width, minmax(0, 1fr));
}

.case-v2__row.-media-left .case-v2__row-copy {
  order: 2;
}

.case-v2__row.-media-left .case-v2__row-media {
  order: 1;
}

.case-v2__row-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-v2 .case-v2__row-copy .case-v2__eyebrow {
  margin: 0;
}

.case-v2__row-title {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  color: var(--case-text);
}

.case-v2__row-body {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--case-text-mute);
}

.case-v2__row-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--case-row-media-height, auto);
  overflow: hidden;
  border-radius: var(--case-row-radius, 24px);
}

.case-v2__row.-frame-none .case-v2__row-media {
  border-radius: 0;
}

.case-v2__row.-frame-card .case-v2__row-media {
  background: var(--case-surface);
}

.case-v2__row.-frame-dark .case-v2__row-media {
  /* The card-title ink (#131426 on Maze), not the heading ink — the comp's dark card is
     the same navy as its card titles and numerals. */
  background: var(--case-surface-ink);
  border: 1px solid var(--case-surface-line);
}

.case-v2__row-media img {
  display: block;
  width: 100%;
  height: var(--case-row-image-height, 100%);
  object-fit: cover;
}

/* ---- architecture: three-column table ----
   Transparent, rule-divided, no radius: label (240, `accentAlt`) · tech (320) · reason.
   Widths are border-box and include the row's 24 left padding / 32 column gaps. */
.case-v2.-comp .case-v2__arch.-table3 {
  padding: 120px 0;
}

.case-v2.-comp .case-v2__arch.-table3 .case-v2__eyebrow {
  margin-bottom: 16px;
}

.case-v2.-comp .case-v2__arch.-table3 .case-v2__h2 {
  margin-bottom: 48px;
  font-size: 32px;
  line-height: 36px;
}

.case-v2__stack-table {
  width: 100%;
  border-collapse: collapse;
}

.case-v2__stack-table th,
.case-v2__stack-table td {
  padding: 24px 0 24px 32px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--case-line);
}

.case-v2__stack-table th {
  width: 264px;
  padding-left: 24px;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--case-accent-alt);
}

.case-v2__stack-table-tech {
  width: 352px;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--case-text);
}

.case-v2__stack-table-reason {
  padding-right: 24px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--case-text-mute);
}

/* ---- responsive: no mobile comp exists, so these are derived ---- */
@media (max-width: 1279px) {
  .case-v2__hero.-gradient {
    padding: 140px 0 64px;
  }

  .case-v2__hero.-gradient.-with-visual .case-v2__hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .case-v2__hero.-gradient .case-v2__hero-copy {
    justify-content: flex-start;
  }

  .case-v2__hero.-gradient .case-v2__hero-title {
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -0.96px;
  }

  .case-v2__hero.-gradient .case-v2__hero-visual img {
    max-width: 670px;
    margin: 0 auto;
  }

  .case-v2.-comp .case-v2__glance.-cards,
  .case-v2.-comp .case-v2__situation.-with-stat,
  .case-v2.-comp .case-v2__arch.-table3 {
    padding: 96px 0;
  }

  .case-v2__glance-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-v2__situation.-with-stat .case-v2__situation-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .case-v2__situation.-with-stat .case-v2__prose {
    max-width: 760px;
  }

  /* A flat tint needs no copy shade — the copy sits on it at every width (a full-panel
     `image.overlay` carries the contrast, so the halftone stays visible on every device). */
  .case-v2__photo-panel.-texture .case-v2__photo-copy::before {
    content: none;
  }

  .case-v2__photo-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .case-v2__photo-panel.-split .case-v2__photo-copy,
  .case-v2__photo-panel.-stack .case-v2__photo-copy {
    max-width: none;
  }

  .case-v2__photo-panel.-stack .case-v2__photo-stats {
    gap: 16px;
  }

  .case-v2__photo-stat {
    padding: 28px;
  }

  .case-v2__photo-stat-value,
  .case-v2__stat-card-stats strong {
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -0.96px;
  }

  .case-v2__photo-quote {
    padding: 28px 32px;
  }

  /* Rows stack media above copy; the media takes its natural height. */
  .case-v2__row.-fixed-media.-media-right,
  .case-v2__row.-fixed-media.-media-left,
  .case-v2__row.-fixed-copy.-media-right,
  .case-v2__row.-fixed-copy.-media-left {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .case-v2__row .case-v2__row-copy {
    order: 2;
  }

  .case-v2__row .case-v2__row-media {
    order: 1;
    height: auto;
  }

  .case-v2__row-media img {
    height: auto;
  }
}

@media (max-width: 767px) {
  .case-v2__hero.-gradient {
    padding: 120px 0 56px;
  }

  .case-v2__hero.-gradient .case-v2__hero-logo {
    margin-bottom: 40px;
  }

  .case-v2__hero.-gradient .case-v2__hero-title {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -0.72px;
  }

  .case-v2.-comp .case-v2__glance.-cards,
  .case-v2.-comp .case-v2__situation.-with-stat,
  .case-v2.-comp .case-v2__arch.-table3 {
    padding: 64px 0;
  }

  .case-v2.-comp .case-v2__glance.-cards .case-v2__h2,
  .case-v2.-comp .case-v2__arch.-table3 .case-v2__h2 {
    margin-bottom: 32px;
  }

  .case-v2__glance-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .case-v2__stat-card {
    gap: 16px;
    padding: 40px 24px;
  }

  .case-v2__stat-card-stats {
    flex-wrap: wrap;
  }

  .case-v2.-comp .case-v2__photo.-texture {
    padding: 40px 0;
  }

  /* The band keeps its tint full-height on a phone: no solid ground, no photo band, no
     mask — a texture has no subject to point at. Overrides the `-light` ground too. */
  .case-v2__photo-panel.-texture {
    padding: 32px 24px;
    background: none;
  }

  .case-v2__photo-panel.-texture .case-v2__photo-img {
    top: 0;
    height: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .case-v2__photo-panel.-texture .case-v2__photo-body {
    margin-top: 20px;
  }

  .case-v2__photo-panel.-split,
  .case-v2__photo-panel.-stack {
    gap: 24px;
  }

  .case-v2__photo-columns {
    gap: 24px;
  }

  .case-v2__photo-media {
    margin-top: 24px;
  }

  .case-v2__photo-stats,
  .case-v2__photo-panel.-stack .case-v2__photo-stats {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .case-v2__photo-stat {
    padding: 24px;
  }

  .case-v2__photo-quote {
    padding: 24px 20px;
  }

  .case-v2__row {
    gap: 24px;
    padding: 40px 0;
  }

  .case-v2__row-title {
    font-size: 26px;
    line-height: 32px;
  }
}

/* The three-column table needs ~960px: at 768 the fixed 264 + 352 columns leave the
   reason 72px. Below 1024 it stacks — one block per row, label / tech / reason under each
   other, the row rule kept on the <tr>. */
@media (max-width: 1023px) {
  .case-v2__stack-table,
  .case-v2__stack-table tbody,
  .case-v2__stack-table tr,
  .case-v2__stack-table th,
  .case-v2__stack-table td {
    display: block;
    width: auto;
  }

  .case-v2__stack-table tr {
    padding: 20px 0;
    border-bottom: 1px solid var(--case-line);
  }

  .case-v2__stack-table th,
  .case-v2__stack-table td {
    padding: 0;
    border-bottom: 0;
  }

  .case-v2__stack-table th {
    margin-bottom: 6px;
  }

  .case-v2__stack-table-tech {
    margin-bottom: 8px;
  }
}

/* ============================================================================
   Comp devices — DIFWEB-249 (RedTrack, Constantine's case comps)
   Fourth batch, same rule as the first three: every selector below is a modifier or a
   new element, a case that sets none of the new fields renders byte-identically, and
   every colour is a token. The devices: a light flat-fade hero with a kicker pill and a
   floated, rotated, bottom-clipped device shot; the at-a-glance block as a four-card
   colour rail with before/after pairs; an outlined image card beside the situation copy;
   the panel grid as a centred, numbered block with mixed-emphasis cards, a statement
   band and — for the first time mid-page — an edge-to-edge section ground; outlined
   3-up cards for `whatWeBuilt` and `results`; and theme tokens for the comp's 14px
   eyebrows, 58px centred titles and off-heading card ink. Tokens live in their own block
   so the diff stays additive.
   ============================================================================ */

.case-v2 {
  /* The earlier comps' values, so their eyebrows and centred titles are unchanged. */
  --case-eyebrow-size: 12px;
  --case-eyebrow-leading: 16px;
  --case-title-size: 48px;
  --case-title-leading: 56px;
  --case-card-ink: var(--case-text);
  --case-kicker-bg: var(--case-text);
  --case-kicker-ink: var(--case-bg);
}

/* ---- eyebrow size and centred-title size, from tokens ----
   Re-states the -comp eyebrow's size (default 12/16 = the literals it had). The centred
   h2 takes the title tokens; a left-aligned h2 keeps 48/56 — the RedTrack comp runs its
   one left-aligned h2 ("The client") at H2 48/56 and every centred title at 58/62. */
.case-v2.-comp .case-v2__eyebrow,
.case-v2 .case-v2__prose p.case-v2__eyebrow {
  font-size: var(--case-eyebrow-size);
  line-height: var(--case-eyebrow-leading);
}

.case-v2.-comp .case-v2__h2.-center {
  font-size: var(--case-title-size);
  line-height: var(--case-title-leading);
}

/* ---- hero: light flat fade, one top-aligned copy column, floated device shot ----
   `heroBase` at the top into the page ground; no blobs, dots or grain. The comp stacks
   pill → logo → h1 → lede 48 apart from y 192 (its 72 nav row + 120 padding — the site
   header is a 65px overlay, so the band carries the nav row as padding), and floats a
   768px square device shot whose unrotated box starts 40px RIGHT of the band's centre
   line and 138px from its top — the comp's 1051.46 rotated frame at x 793 / y −75 of the
   1790 frame has its centre at (1318.7, 450.7) of the hero, i.e. content-centre + 423.7 /
   nav 72 + 450.7; the 768 image box is that centre ± 384 — rotated 7.92° about its centre
   and cut by the band's bottom edge (the phone's home bar runs ~50px past 826 in the comp).
   `overflow: hidden` is already on `.case-v2__hero`. */
.case-v2__hero.-light {
  padding: 192px 0 200px;
  background-color: var(--case-bg);
  background-image: linear-gradient(180deg, var(--case-hero-base) 0%, var(--case-bg) 100%);
  background-size: auto;
}

.case-v2__hero.-light::before,
.case-v2__hero.-light::after {
  content: none;
}

/* The wrap stops being the positioning context so the float anchors to the band. */
.case-v2__hero.-light > .wrap-v4 {
  position: static;
}

.case-v2__hero.-light.-with-visual .case-v2__hero-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.case-v2__hero.-light .case-v2__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.case-v2__hero.-light .case-v2__hero-logo {
  margin: 0;
}

.case-v2__hero.-light .case-v2__hero-logo img {
  max-height: 40px;
}

/* The kicker pill sits above the logo on this hero (comp order); DOM order is unchanged. */
.case-v2__hero.-light .case-v2__label {
  order: -1;
  margin: 0;
}

.case-v2__hero.-light .case-v2__hero-title {
  max-width: 743px;
  margin: 0;
  font-family: var(--case-font-display);
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -1.28px;
}

.case-v2__hero.-light .case-v2__hero-sub {
  max-width: 760px;
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
}

.case-v2__hero-visual.-float {
  position: absolute;
  top: 138px;
  left: calc(50% + 40px);
  width: 768px;
  height: 768px;
  transform: rotate(var(--case-hero-visual-rotate, 0deg));
  pointer-events: none;
}

.case-v2__hero-visual.-float img {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* ---- kicker pill ----
   Inter Medium in the comp; the site ships Inter 400/600/700 only, so 600 is declared
   rather than letting font matching resolve 500 downwards to 400 (DIFWEB-249 verification,
   F2 — a deviation from the comp's weight, no new face vendored). */
.case-v2__label.-pill {
  display: inline-block;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--case-kicker-ink);
  background: var(--case-kicker-bg);
  border-radius: 999px;
}

/* ---- at a glance: four-card colour rail ----
   Eyebrow only (no h2), then four equal cards 12 apart, 364 tall, radius 28, `px-24
   py-40`, the index + title at the top and the two pairs at the bottom. Each card paints
   itself from the data (`tone`, `ink`); the muted ink defaults to the ink at 64%. */
.case-v2__glance.-rail {
  z-index: auto;
  margin-top: 0;
  padding: 72px 0;
}

.case-v2.-comp .case-v2__glance.-rail {
  padding: 110px 0;
}

.case-v2.-comp .case-v2__glance.-rail .case-v2__eyebrow {
  margin: 0 0 60px;
}

.case-v2__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__rail-card {
  --case-rail-ink-mute: color-mix(in srgb, var(--case-rail-ink) 64%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 364px;
  padding: 40px 24px;
  overflow: hidden;
  color: var(--case-rail-ink);
  border-radius: 28px;
}

.case-v2__rail-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Inter Medium / Gilroy Medium in the comp; the site ships Gilroy 600/700/900 and Inter
   400/600/700 only, so 600 is declared explicitly for the index and the labels (DIFWEB-249
   verification, F2 — the weight the browser was already resolving to for Gilroy). */
.case-v2__rail-index {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
}

.case-v2__rail-title {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: inherit;
}

.case-v2__rail-pairs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding-top: 24px;
}

.case-v2__rail-pair {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-v2__rail-pair dt {
  font-family: var(--case-font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 4.2px;
  text-transform: uppercase;
  color: var(--case-rail-ink-mute);
}

.case-v2__rail-pair dd {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: inherit;
}

.case-v2__rail-pair.-before dd {
  color: var(--case-rail-ink-mute);
}

.case-v2__rail-pair dd s {
  text-decoration: line-through;
}

/* ---- situation: outlined image card in an equal second column ----
   Two halves 80 apart, the card stretched to the copy's height: a 1px `lineStrong`
   border, radius 24, no fill, the image at its own width flush right and centred
   vertically (the comp's 583×452 sits 15 above and below in a 482 card). */
.case-v2__situation.-outline .case-v2__situation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  align-items: stretch;
}

.case-v2__situation.-outline .case-v2__prose {
  max-width: none;
}

.case-v2__situation-visual.-outline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 15px 0;
  background: none;
  border: 1px solid var(--case-line-strong);
  border-radius: 24px;
}

.case-v2__situation-visual.-outline img {
  width: var(--case-situation-visual-width, 100%);
  max-width: 100%;
  border-radius: 24px;
}

.case-v2.-comp .case-v2__situation.-outline {
  padding: 110px 0;
}

.case-v2.-comp .case-v2__situation.-outline .case-v2__eyebrow,
.case-v2.-comp .case-v2__situation.-outline .case-v2__h2 {
  margin-bottom: 24px;
}

/* ---- panels under the comp scale: centred head, numbered cards, statement band, ground ----
   The comp's grid is N equal columns 12 apart (three sand cards, two dark cards), radius
   26, padding 40, copy 20 apart (24 on the numbered cards); a 40px icon or an eyebrow
   index leads, the title is Gilroy 29/31 (off-token), the body 14/22. `-band` is the
   edge-to-edge ground: the section paints itself from the data and re-tokens its inks. */
.case-v2.-comp .case-v2__panels {
  padding: 120px 0;
}

.case-v2.-comp .case-v2__panels.-center .case-v2__eyebrow {
  margin-bottom: 12px;
}

.case-v2.-comp .case-v2__panels.-center .case-v2__h2 {
  margin-bottom: 12px;
}

.case-v2.-comp .case-v2__panels .case-v2__prose {
  margin-bottom: 52px;
}

.case-v2.-comp .case-v2__panels .case-v2__prose.-center {
  max-width: 852px;
}

/* No intro: the comp's 56 from the title to the grid. The h2's 12 and this margin are
   adjacent block margins and collapse, so the value is the full 56. */
.case-v2.-comp .case-v2__panels.-center .case-v2__h2 + .case-v2__panel-grid {
  margin-top: 56px;
}

.case-v2.-comp .case-v2__panel-grid {
  grid-template-columns: repeat(var(--case-panel-cols, 2), minmax(0, 1fr));
  gap: 12px;
}

.case-v2.-comp .case-v2__panel {
  border: 0;
  border-radius: 26px;
}

.case-v2.-comp .case-v2__panel-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 40px;
}

.case-v2.-comp .case-v2__panel-grid.-numbered .case-v2__panel-copy {
  gap: 24px;
}

/* The index is eyebrow-styled, so the centred head's `.case-v2__eyebrow { margin-bottom:
   12px }` rule above matches it too; restated at the same specificity so the copy column's
   gap alone carries the comp's 24. */
.case-v2.-comp .case-v2__panels .case-v2__panel-index,
.case-v2.-comp .case-v2__panels.-center .case-v2__panel-index {
  margin: 0;
}

.case-v2__panel-icon {
  display: block;
  width: 40px;
  height: 40px;
}

.case-v2.-comp .case-v2__panel-title {
  margin: 0;
  font-family: var(--case-font-display);
  font-size: 29px;
  line-height: 31px;
  letter-spacing: 0;
}

.case-v2.-comp .case-v2__panel-body {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
}

/* The mixed-emphasis paragraph: display face, full ink, the muted runs at 64%. */
.case-v2.-comp .case-v2__panel-body.-spans {
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--case-panel-ink, var(--case-text));
}

.case-v2__panel-body.-spans .-muted {
  color: var(--case-panel-ink-mute, color-mix(in srgb, currentColor 64%, transparent));
}

.case-v2__statement {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
  padding: 48px;
  text-align: center;
  color: var(--case-statement-ink, var(--case-photo-ink));
  background: var(--case-accent);
  border-radius: 26px;
}

.case-v2__statement-lead,
.case-v2__statement-headline {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  color: inherit;
}

.case-v2__statement-lead {
  font-size: 16px;
  line-height: 22px;
}

.case-v2__statement-headline {
  font-size: 32px;
  line-height: 36px;
}

/* ---- built: outlined 3-up cards ----
   Transparent, a 2px `surface` border, radius 24, padding 40; the list's counter as an
   eyebrow-styled index, 40 above the title block; title 18/24 in `cardInk`, body 14/22. */
.case-v2__built-list.-outlined {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: none;
}

.case-v2__built-list.-outlined li {
  display: flex;
  flex-direction: column;
  padding: 40px;
  border: 2px solid var(--case-surface);
  border-radius: 24px;
}

.case-v2__built-list.-outlined .case-v2__built-capability {
  margin: 0 0 16px;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--case-card-ink);
}

.case-v2__built-list.-outlined .case-v2__built-capability::before {
  margin-bottom: 40px;
  font-family: var(--case-eyebrow-font);
  font-weight: var(--case-eyebrow-weight);
  font-size: var(--case-eyebrow-size);
  line-height: var(--case-eyebrow-leading);
  letter-spacing: var(--case-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--case-eyebrow-ink);
}

.case-v2__built-list.-outlined .case-v2__built-why {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--case-text-body);
}

.case-v2.-comp .case-v2__built.-outlined .case-v2__eyebrow {
  margin-bottom: 12px;
}

/* The comp's title is 1008 wide (breaks after "not"), like the Results title. */
.case-v2.-comp .case-v2__built.-outlined .case-v2__h2 {
  max-width: 1008px;
  margin: 0 auto 12px;
}

.case-v2.-comp .case-v2__built.-outlined .case-v2__prose {
  max-width: 852px;
  margin-bottom: 40px;
}

/* ---- results: outlined 3-up icon cards ----
   The same card recipe, 24 apart (the comp's fixed 417 cards = thirds of 1300 at gap
   24): a 24px icon, 40 to the title block, title 18/24 in `cardInk`, caption 14/22. */
.case-v2__result-cards.-outlined {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.case-v2__result-cards.-outlined .case-v2__result-card {
  min-height: 0;
  padding: 40px;
  background: none;
  border: 2px solid var(--case-surface);
  border-radius: 24px;
}

.case-v2__result-cards.-outlined .case-v2__result-card-icon {
  margin: 0 0 40px;
}

.case-v2__result-cards.-outlined .case-v2__result-card-title {
  margin: 0;
  font-family: var(--case-font-display);
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--case-card-ink);
}

.case-v2__result-cards.-outlined .case-v2__result-card-caption {
  margin: 6px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--case-text-body);
  border: 0;
}

.case-v2.-comp .case-v2__results.-outlined {
  padding: 120px 0;
}

.case-v2.-comp .case-v2__results.-outlined .case-v2__eyebrow {
  margin-bottom: 12px;
}

.case-v2.-comp .case-v2__results.-outlined .case-v2__h2 {
  max-width: 1008px;
  margin: 0 auto 40px;
}

/* ---- responsive: no mobile comp exists, so these are derived ---- */
@media (max-width: 1279px) {
  /* The float drops under the copy, upright in flow, capped so the device (46% of the
     box) reads at a sensible size; the box may run wider than a narrow wrap and centres
     itself with a negative margin — the band's overflow clips the transparent corners. */
  .case-v2__hero.-light {
    padding: 160px 0 0;
  }

  .case-v2__hero.-light.-with-visual .case-v2__hero-grid {
    gap: 24px;
  }

  .case-v2__hero-visual.-float {
    position: static;
    width: min(560px, 140%);
    height: auto;
    margin: 0 0 0 calc((100% - min(560px, 140%)) / 2);
    transform: none;
  }

  .case-v2__hero-visual.-float img {
    height: auto;
  }

  .case-v2__hero.-light .case-v2__hero-title {
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -0.96px;
  }

  .case-v2__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .case-v2__situation.-outline .case-v2__situation-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .case-v2__situation-visual.-outline {
    padding: 15px;
  }

  .case-v2__situation-visual.-outline img {
    width: 100%;
  }

  .case-v2.-comp .case-v2__panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* An odd last card spans the row rather than orphaning at half width. */
  .case-v2.-comp .case-v2__panel:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .case-v2__built-list.-outlined {
    grid-template-columns: 1fr;
  }

  .case-v2__result-cards.-outlined {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  /* Happier's centred h2s keep their 32/40 from the shared -comp mobile rule above;
     the `.-center` selector is more specific, so the value is restated here. */
  .case-v2.-comp .case-v2__h2.-center {
    font-size: 32px;
    line-height: 40px;
  }

  .case-v2__hero.-light {
    padding: 120px 0 0;
  }

  .case-v2__hero.-light .case-v2__hero-copy {
    gap: 32px;
  }

  .case-v2__hero.-light .case-v2__hero-title {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -0.72px;
  }

  .case-v2__hero.-light .case-v2__hero-sub {
    font-size: 17px;
    line-height: 26px;
  }

  .case-v2__label.-pill {
    white-space: normal;
  }

  .case-v2.-comp .case-v2__glance.-rail {
    padding: 64px 0;
  }

  .case-v2.-comp .case-v2__glance.-rail .case-v2__eyebrow {
    margin-bottom: 32px;
  }

  .case-v2__rail {
    grid-template-columns: 1fr;
  }

  .case-v2__rail-card {
    gap: 32px;
    min-height: 0;
    padding: 32px 24px;
  }

  .case-v2.-comp .case-v2__situation.-outline {
    padding: 64px 0;
  }

  .case-v2.-comp .case-v2__panels {
    padding: 64px 0;
  }

  .case-v2.-comp .case-v2__panels .case-v2__prose {
    margin-bottom: 32px;
  }

  .case-v2.-comp .case-v2__panels.-center .case-v2__h2 + .case-v2__panel-grid {
    margin-top: 32px;
  }

  .case-v2.-comp .case-v2__panel-grid {
    grid-template-columns: 1fr;
  }

  .case-v2.-comp .case-v2__panel-copy {
    padding: 32px 24px;
  }

  .case-v2.-comp .case-v2__panel-title {
    font-size: 24px;
    line-height: 28px;
  }

  .case-v2__statement {
    padding: 32px 24px;
  }

  .case-v2__statement-headline {
    font-size: 24px;
    line-height: 30px;
  }

  .case-v2__built-list.-outlined li,
  .case-v2__result-cards.-outlined .case-v2__result-card {
    padding: 32px 24px;
  }

  .case-v2__result-cards.-outlined {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .case-v2.-comp .case-v2__results.-outlined {
    padding: 64px 0;
  }
}

/* ============================================================================
   Comp devices — DIFWEB-289 (Instreamatic, Constantine's case comps)
   ---- DIFWEB-289 Instreamatic — fifth comp-device batch ----
   Fifth batch, same rule as the first four: every selector below is a modifier or a
   new element, a case that sets none of the new fields renders byte-identically, and
   every colour is a token. The devices: a centred "stage" hero over a gradient ground
   with a device shot and two glow layers; the at-a-glance block as a flat meta strip; an
   h2-level feature row and a feature-row band; a bare stat grid beside the situation copy
   plus a titled achievements row on a decorated ground; the panel grid as bare columns,
   icon-side rows, compact filled cards and photo cards; four glass result cards on a
   decorated ground; a compact logo row; a card-less centred review on its own ground with
   an accent-filled mark. No comp exists below 1440, so the responsive rules are derived.
   ============================================================================ */

.case-v2 {
  /* Scrim under the copy of a `photo` panel card. Heavier than the tile scrim because the
     card's bottom third carries a title AND a body over photographs that run to white: the
     comp's own tinted fade left a white 24px title at 3.6:1 on the third card (DIFWEB-289
     verification, measured on glyph pixels), so the fade reaches .92 black at the bottom. */
  --case-panel-photo-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.94) 100%);
  /* Text fill of the review's `highlight` mark. Defaults to the accent. */
  --case-review-mark: var(--case-accent);
}

/* ---- hero: centred stage over a gradient ground ----
   The comp stacks logo → h1 64/72 → lede 20/32 → the device in ONE centred column from
   y 232 (its 72 nav row + 160; the site header is a 65px overlay, so the band carries the
   nav row as padding). The ground comes from the data as a CSS background (the comp's base
   plus three corner glows), so the section paints nothing of its own here. The two glow
   layers are positioned as fractions of the device box — the comp's vector ring 601×484
   at (−146, 186) and raster arc 622×487 at (−156, 178) of a 310×633.5 device — so they
   scale with it. The bottom padding puts the device raster's bottom 114 above the band's
   end (the bezel raster runs ~16 past the comp's phone frame, whose bottom sits ~129 above
   it) and the band at the comp's 1538. `overflow: hidden` is already on `.case-v2__hero`. */
.case-v2__hero.-stage {
  padding: 232px 0 114px;
  background-color: var(--case-bg);
  background-image: none;
}

.case-v2__hero.-stage::before,
.case-v2__hero.-stage::after {
  content: none;
}

.case-v2__hero.-stage.-with-visual .case-v2__hero-grid,
.case-v2__hero.-stage .case-v2__hero-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 83px;
  justify-items: center;
}

.case-v2__hero.-stage .case-v2__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1100px;
  text-align: center;
}

.case-v2__hero.-stage .case-v2__hero-logo {
  margin: 0 0 24px;
}

.case-v2__hero.-stage .case-v2__hero-logo img {
  width: auto;
  height: 28px;
  max-width: none;
  max-height: 28px;
}

.case-v2__hero.-stage .case-v2__hero-title {
  max-width: 1100px;
  margin: 0;
  font-family: var(--case-font-display);
  font-size: 64px;
  line-height: 72px;
  letter-spacing: -1.28px;
}

.case-v2__hero.-stage .case-v2__hero-sub {
  max-width: 819px;
  margin: 0;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0;
  color: var(--case-hero-ink);
}

.case-v2__hero-visual.-stage {
  position: relative;
  width: var(--case-hero-visual-width, 310px);
  max-width: 100%;
}

.case-v2__hero-visual.-stage img {
  position: relative;
  z-index: 1;
  border-radius: 0;
}

.case-v2__hero-visual.-stage .case-v2__hero-glow {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
}

.case-v2__hero-visual.-stage .case-v2__hero-glow.-back {
  top: 29.4%;
  left: -49.6%;
  width: 196.4%;
}

.case-v2__hero-visual.-stage .case-v2__hero-glow.-front {
  top: 28.1%;
  left: -50.4%;
  z-index: 2;
  width: 200.7%;
}

/* ---- at a glance: flat meta strip ----
   Label/value pairs in one row between two hairlines, 80 above and below; the labels take
   the eyebrow tokens in the muted ink (the comp's one eyebrow that is NOT the accent), the
   values the display face at 16/22. No pull-up over the hero, no fill, no shadow. */
.case-v2__glance.-meta,
.case-v2.-comp .case-v2__glance.-meta {
  position: static;
  z-index: auto;
  margin: 0;
  padding: 0;
}

.case-v2__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  margin: 0;
  padding: 80px 0;
  border-top: 1px solid var(--case-line);
  border-bottom: 1px solid var(--case-line);
}

.case-v2__meta-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.case-v2__meta-item dt {
  font-family: var(--case-eyebrow-font);
  font-weight: var(--case-eyebrow-weight);
  font-size: var(--case-eyebrow-size);
  line-height: var(--case-eyebrow-leading);
  letter-spacing: var(--case-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--case-text-mute);
}

.case-v2__meta-item dd {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--case-text);
}

.case-v2__meta-item dd a {
  color: inherit;
  text-decoration: none;
}

.case-v2__meta-item dd a:hover {
  text-decoration: underline;
}

/* ---- feature rows: h2-level row, banded group ----
   A row whose heading is the section's h2 takes the centred-title tokens (48/56 unless the
   theme says otherwise), 32 between eyebrow, heading and paragraphs, the body in the body
   ink, and honours `radius` on a bare (`frame: 'none'`) media box. A banded group paints
   itself from the data and reads its vertical padding from a custom property so the phone
   rules can shrink it. */
.case-v2.-comp .case-v2__rows.-band {
  padding: var(--case-rows-padding, 120px) 0;
}

.case-v2__row.-h2 .case-v2__row-copy {
  gap: 32px;
}

.case-v2.-comp .case-v2__row.-h2 .case-v2__row-title {
  font-size: var(--case-title-size);
  line-height: var(--case-title-leading);
}

.case-v2__row.-h2 .case-v2__row-body {
  color: var(--case-text-body);
}

.case-v2__row.-h2.-frame-none .case-v2__row-media {
  border-radius: var(--case-row-radius, 0);
}

/* ---- situation: bare stat grid, achievements row, decorated ground ----
   Two equal columns 80 apart, centred on each other; the head sits inside the copy column
   (Situation.tsx) with 32 between eyebrow, h2 and paragraphs. The stats are a `cols`-wide
   grid 48 apart: display numeral 32/36 over a 12/16 caption in the muted ink. The
   achievements row sits 80 under the columns: an eyebrow, then equal columns of centred
   title 16/22 + body 12/16, each flanked by a 34px glyph box (the comp's laurel, mirrored
   on the right). The section paints its `ground` edge to edge and clips it. */
.case-v2.-comp .case-v2__situation.-with-stats {
  padding: 140px 0;
}

.case-v2__situation.-with-stats.-band {
  overflow: hidden;
}

.case-v2__situation.-with-stats .case-v2__situation-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

.case-v2__situation.-with-stats .case-v2__prose {
  max-width: none;
}

.case-v2.-comp .case-v2__situation.-with-stats .case-v2__eyebrow {
  margin-bottom: 32px;
}

.case-v2.-comp .case-v2__situation.-with-stats .case-v2__h2 {
  margin-bottom: 32px;
  font-size: var(--case-title-size);
  line-height: var(--case-title-leading);
}

.case-v2.-comp .case-v2__situation.-with-stats .case-v2__prose p {
  margin-bottom: 32px;
}

.case-v2.-comp .case-v2__situation.-with-stats .case-v2__prose p:last-child {
  margin-bottom: 0;
}

.case-v2__situation-stats {
  display: grid;
  grid-template-columns: repeat(var(--case-situation-stat-cols, 3), minmax(0, 1fr));
  gap: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__situation-stats li {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-v2__situation-stats strong {
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  color: var(--case-text);
}

.case-v2__situation-stats span {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: var(--case-text-mute);
}

.case-v2__situation-stats small {
  font-size: 11px;
  line-height: 14px;
  color: var(--case-text-faint);
}

.case-v2__achievements {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 80px;
}

.case-v2 .case-v2__achievements .case-v2__eyebrow {
  margin: 0;
}

.case-v2__achievement-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__achievement {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

.case-v2__achievement-glyph {
  flex: 0 0 auto;
  display: block;
  width: 16px;
  height: 30px;
  margin: 2px 9px;
}

.case-v2__achievement-glyph.-flip {
  transform: scaleX(-1);
}

.case-v2__achievement-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  text-align: center;
}

.case-v2__achievement-copy h3 {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--case-text);
}

.case-v2__achievement-copy p {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: var(--case-text-mute);
}

/* ---- panels: bare columns, icon-side rows, compact cards, photo cards ----
   All four Instreamatic groups run the comp's 140 section padding and 80 from the head to
   the grid; the earlier comps' 120/56 stay on the default card. The icon size becomes a
   token here (default 40 = the literal it replaces). */
.case-v2.-comp .case-v2__panels.-plain,
.case-v2.-comp .case-v2__panels.-photo,
.case-v2.-comp .case-v2__panels.-compact {
  padding: 140px 0;
}

.case-v2.-comp .case-v2__panels.-plain.-center .case-v2__h2 + .case-v2__panel-grid,
.case-v2.-comp .case-v2__panels.-photo.-center .case-v2__h2 + .case-v2__panel-grid,
.case-v2.-comp .case-v2__panels.-compact.-center .case-v2__h2 + .case-v2__panel-grid {
  margin-top: 80px;
}

/* The comp's head block is 718 wide, so its two-line titles wrap. */
.case-v2.-comp .case-v2__panels.-plain.-center .case-v2__h2,
.case-v2.-comp .case-v2__panels.-photo.-center .case-v2__h2,
.case-v2.-comp .case-v2__panels.-compact.-center .case-v2__h2 {
  max-width: 718px;
  margin-left: auto;
  margin-right: auto;
}

.case-v2__panel-grid .case-v2__panel-icon {
  width: var(--case-panel-icon, 40px);
  height: var(--case-panel-icon, 40px);
}

/* plain: no surface — the comp's goal columns (padding 16 / 32 / 48, icon 24 above the
   title, title 18/24, body 14/22). */
.case-v2.-comp .case-v2__panel-grid.-plain {
  gap: 24px;
}

.case-v2__panel-grid.-plain .case-v2__panel {
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
}

.case-v2.-comp .case-v2__panel-grid.-plain .case-v2__panel-copy {
  gap: 12px;
  padding: 32px 16px 48px;
}

.case-v2__panel-grid.-plain .case-v2__panel-icon {
  margin-bottom: 12px;
}

.case-v2.-comp .case-v2__panel-grid.-plain .case-v2__panel-title {
  font-size: 18px;
  line-height: 24px;
}

/* icon-side: the icon in a left column, title and body beside it (the comp's 2×2
   contribution rows: icon 140, gap 24, text column gap 12). */
.case-v2.-comp .case-v2__panel-grid.-icon-side .case-v2__panel-copy {
  display: grid;
  grid-template-columns: var(--case-panel-icon, 40px) minmax(0, 1fr);
  /* The icon spans both rows; the flexible second row keeps its height out of the
     title row's intrinsic size, so the body follows the title at the 12 gap. */
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px 24px;
  align-items: start;
}

.case-v2__panel-grid.-icon-side .case-v2__panel-icon {
  grid-row: 1 / -1;
  align-self: center;
  margin: 0;
}

.case-v2__panel-grid.-icon-side .case-v2__panel-title,
.case-v2__panel-grid.-icon-side .case-v2__panel-body {
  grid-column: 2;
}

/* compact: the filled card at the comp's radius 24, padding 32 / 24 / 48, gap 12 and a
   20/24 title (the AI-interaction cards). */
.case-v2.-comp .case-v2__panel-grid.-compact {
  gap: 24px;
}

.case-v2.-comp .case-v2__panel-grid.-compact .case-v2__panel {
  border-radius: 24px;
}

.case-v2.-comp .case-v2__panel-grid.-compact .case-v2__panel-copy {
  gap: 12px;
  padding: 32px 24px 48px;
}

.case-v2.-comp .case-v2__panel-grid.-compact .case-v2__panel-title {
  font-size: 20px;
  line-height: 24px;
}

/* photo: the image covers the card under the scrim, the copy packs to the bottom (the
   comp's 560-tall benefit cards: padding 32 / 48 / 48, title 24/28, body 14/22). */
.case-v2.-comp .case-v2__panel-grid.-photo {
  gap: 24px;
}

.case-v2__panel-grid.-photo .case-v2__panel {
  position: relative;
  justify-content: flex-end;
  min-height: var(--case-panel-min-height, 560px);
  border: 0;
  border-radius: 24px;
}

.case-v2__panel-grid.-photo .case-v2__panel-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  min-height: 0;
  padding: 0;
}

.case-v2__panel-grid.-photo .case-v2__panel-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-v2__panel-grid.-photo .case-v2__panel-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--case-panel-photo-scrim);
}

.case-v2.-comp .case-v2__panel-grid.-photo .case-v2__panel-copy {
  position: relative;
  z-index: 1;
  gap: 12px;
  padding: 32px 48px 48px;
}

.case-v2.-comp .case-v2__panel-grid.-photo .case-v2__panel-title {
  font-size: 24px;
  line-height: 28px;
  color: var(--case-panel-ink, var(--case-photo-ink));
}

/* ---- results: four glass cards on a decorated ground ----
   The `panel` fill (translucent on this page) blurred over the section's ground, radius
   24, no border, padding 40, a 320 floor; ONE 20/24 display paragraph per card as its
   title. The head runs eyebrow → 12 → h2 (718 wide) → 80 → cards. */
.case-v2__results.-band {
  overflow: hidden;
}

.case-v2.-comp .case-v2__results.-glass {
  padding: 140px 0;
}

.case-v2.-comp .case-v2__results.-glass .case-v2__eyebrow {
  margin-bottom: 12px;
}

.case-v2.-comp .case-v2__results.-glass .case-v2__h2 {
  max-width: 718px;
  margin: 0 auto 80px;
}

.case-v2__result-cards.-glass {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.case-v2__result-cards.-glass .case-v2__result-card {
  min-height: 320px;
  padding: 40px;
  background: var(--case-panel);
  border: 0;
  border-radius: 24px;
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
}

.case-v2__result-cards.-glass .case-v2__result-card-title {
  margin: 0;
  font-family: var(--case-font-display);
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--case-text);
}

/* ---- architecture: compact logo row ----
   The comp's small "Technologies used": an h2 at 24/28 (not the centred-title token), no
   eyebrow, 48 to a 1130-wide row of six flexible cells 16 apart (padding 24), an 88-tall
   mark box, then an uppercase 12/16 label tracked +0.84px in the muted ink. Three of the
   comp's marks carry lettering beside the glyph ("Objective-C", "SDK"), so a mark renders
   at its own width, capped by the cell, and only its height is capped. */
.case-v2.-comp .case-v2__arch.-compact {
  padding: 100px 0;
}

.case-v2.-comp .case-v2__arch.-compact .case-v2__h2 {
  margin-bottom: 48px;
  font-size: 24px;
  line-height: 28px;
}

.case-v2__arch.-compact .case-v2__logo-row {
  flex-wrap: nowrap;
  gap: 16px;
  max-width: 1130px;
  margin: 0 auto;
}

.case-v2__arch.-compact .case-v2__logo-cell {
  flex: 1 1 0;
  gap: 16px;
  width: auto;
  /* 16 at the sides, not the comp's 24: the "Objective-C" mark is 139 wide and the comp's
     175 cell lets it run over its padding; here the cell caps the mark instead. */
  padding: 24px 16px;
}

.case-v2__arch.-compact .case-v2__logo-mark {
  width: 100%;
  height: 88px;
}

.case-v2__arch.-compact .case-v2__logo-mark img {
  width: auto;
  max-width: 100%;
  max-height: 56px;
}

.case-v2__arch.-compact .case-v2__logo-label {
  min-height: 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  color: var(--case-text-mute);
}

/* ---- review: card-less centred quote on its own ground, with a mark ----
   The comp's quote block is 1132 wide, Gilroy Bold 40/48 centred, 24 above a centred
   author row: 64px avatar, 12 to name 18/22 over role 12/14. The mark is the one run set
   in `highlightInk` (a gradient in the comp) via `background-clip: text`. Section padding
   140. The section paints its `ground` and re-tokens its inks inline (ClientReview.tsx). */
.case-v2.-comp .case-v2__review.-plain {
  padding: 140px 0;
}

.case-v2__review-card.-plain {
  max-width: 1132px;
  margin: 0 auto;
  padding: 40px 0;
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
}

.case-v2__review-card.-plain blockquote {
  margin: 0 0 24px;
}

.case-v2__review-card.-plain blockquote p {
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 0;
  color: var(--case-text);
}

.case-v2__review-mark {
  background: var(--case-review-mark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.case-v2__review-card.-plain .case-v2__review-author {
  justify-content: center;
  gap: 12px;
}

.case-v2__review-card.-plain .case-v2__review-author > span {
  text-align: left;
}

.case-v2__review-card.-plain .case-v2__review-avatar {
  width: 64px;
  height: 64px;
}

.case-v2__review-card.-plain .case-v2__review-author strong {
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
}

.case-v2__review-card.-plain .case-v2__review-author em {
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.12px;
}

/* ---- responsive: no mobile comp exists, so these are derived ---- */
@media (max-width: 1279px) {
  .case-v2__hero.-stage {
    padding: 180px 0 72px;
  }

  .case-v2__hero.-stage .case-v2__hero-grid {
    gap: 64px;
  }

  .case-v2__hero.-stage .case-v2__hero-title {
    font-size: 52px;
    line-height: 58px;
    letter-spacing: -1.04px;
  }

  /* Five bare columns at ~1000px would be 180 wide; three per row reads. The icon-side
     rows keep their two columns. */
  .case-v2.-comp .case-v2__panel-grid.-plain:not(.-icon-side) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-v2__result-cards.-glass {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-v2__result-cards.-glass .case-v2__result-card {
    min-height: 0;
  }

  /* Two columns of stats beside the copy: three would be ~112px each at 1024 and the
     two-line figure wraps to three. Back to `cols` once the grid is single-column below. */
  .case-v2__situation-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .case-v2__situation.-with-stats .case-v2__situation-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .case-v2__situation-stats {
    grid-template-columns: repeat(var(--case-situation-stat-cols, 3), minmax(0, 1fr));
  }

  /* The bare columns stay 3 across here (213px at 768 fits a 140 icon), and the odd last
     item keeps its column rather than spanning the row: 3 + 2, no full-width orphan. */
  .case-v2.-comp .case-v2__panel-grid.-plain:not(.-icon-side) .case-v2__panel:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .case-v2__achievement-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The icon-side rows go single column here — two 330px columns would leave the copy
     170 wide beside a 120 icon. The generic odd-last rule does not apply to one column. */
  .case-v2.-comp .case-v2__panel-grid.-icon-side {
    grid-template-columns: 1fr;
  }

  .case-v2.-comp .case-v2__panel-grid.-icon-side .case-v2__panel:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .case-v2__arch.-compact .case-v2__logo-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .case-v2__arch.-compact .case-v2__logo-cell {
    flex: 0 0 calc(33.333% - 6px);
    padding: 16px 8px;
  }

  .case-v2__arch.-compact .case-v2__logo-mark {
    height: 64px;
  }
}

@media (max-width: 767px) {
  .case-v2__hero.-stage {
    padding: 120px 0 48px;
  }

  .case-v2__hero.-stage .case-v2__hero-grid {
    gap: 40px;
  }

  .case-v2__hero.-stage .case-v2__hero-copy {
    gap: 24px;
  }

  .case-v2__hero.-stage .case-v2__hero-logo {
    margin-bottom: 8px;
  }

  .case-v2__hero.-stage .case-v2__hero-logo img {
    height: 22px;
    max-height: 22px;
  }

  .case-v2__hero.-stage .case-v2__hero-title {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -0.72px;
  }

  .case-v2__hero.-stage .case-v2__hero-sub {
    font-size: 17px;
    line-height: 26px;
  }

  .case-v2__hero-visual.-stage {
    width: min(var(--case-hero-visual-width, 310px), 72%);
  }

  .case-v2__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 40px 0;
  }

  .case-v2.-comp .case-v2__rows.-band {
    padding: 64px 0;
  }

  .case-v2__row.-h2 {
    padding: 64px 0;
  }

  .case-v2__row.-h2 .case-v2__row-copy {
    gap: 20px;
  }

  /* The h2-level row title and the stats h2 carry the desktop token at higher specificity
     than the shared -comp mobile h2 rule (the DIFWEB-249 lesson), so both are restated. */
  .case-v2.-comp .case-v2__row.-h2 .case-v2__row-title,
  .case-v2.-comp .case-v2__situation.-with-stats .case-v2__h2 {
    font-size: 32px;
    line-height: 40px;
  }

  .case-v2.-comp .case-v2__situation.-with-stats {
    padding: 64px 0;
  }

  .case-v2.-comp .case-v2__situation.-with-stats .case-v2__eyebrow,
  .case-v2.-comp .case-v2__situation.-with-stats .case-v2__h2,
  .case-v2.-comp .case-v2__situation.-with-stats .case-v2__prose p {
    margin-bottom: 20px;
  }

  .case-v2__situation-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }

  .case-v2__situation-stats strong {
    font-size: 28px;
    line-height: 32px;
  }

  .case-v2__achievements {
    gap: 24px;
    margin-top: 56px;
  }

  .case-v2__achievement-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .case-v2.-comp .case-v2__panels.-plain,
  .case-v2.-comp .case-v2__panels.-photo,
  .case-v2.-comp .case-v2__panels.-compact {
    padding: 64px 0;
  }

  .case-v2.-comp .case-v2__panels.-plain.-center .case-v2__h2 + .case-v2__panel-grid,
  .case-v2.-comp .case-v2__panels.-photo.-center .case-v2__h2 + .case-v2__panel-grid,
  .case-v2.-comp .case-v2__panels.-compact.-center .case-v2__h2 + .case-v2__panel-grid {
    margin-top: 40px;
  }

  .case-v2.-comp .case-v2__panel-grid.-plain:not(.-icon-side) {
    grid-template-columns: 1fr;
  }

  .case-v2.-comp .case-v2__panel-grid.-plain .case-v2__panel-copy {
    padding: 0 0 8px;
  }

  .case-v2.-comp .case-v2__panel-grid.-plain .case-v2__panel-title {
    font-size: 18px;
    line-height: 24px;
  }

  .case-v2.-comp .case-v2__panel-grid.-icon-side .case-v2__panel-copy {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px 20px;
  }

  .case-v2__panel-grid.-icon-side .case-v2__panel-icon {
    width: 96px;
    height: 96px;
  }

  .case-v2.-comp .case-v2__panel-grid.-compact .case-v2__panel-copy {
    padding: 28px 24px 32px;
  }

  .case-v2.-comp .case-v2__panel-grid.-compact .case-v2__panel-title {
    font-size: 20px;
    line-height: 24px;
  }

  .case-v2__panel-grid.-photo .case-v2__panel {
    min-height: min(var(--case-panel-min-height, 560px), 420px);
  }

  .case-v2.-comp .case-v2__panel-grid.-photo .case-v2__panel-copy {
    padding: 32px 24px;
  }

  .case-v2.-comp .case-v2__panel-grid.-photo .case-v2__panel-title {
    font-size: 22px;
    line-height: 26px;
  }

  .case-v2.-comp .case-v2__results.-glass {
    padding: 64px 0;
  }

  .case-v2.-comp .case-v2__results.-glass .case-v2__h2 {
    margin-bottom: 40px;
  }

  .case-v2__result-cards.-glass {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .case-v2__result-cards.-glass .case-v2__result-card {
    padding: 28px 24px;
  }

  .case-v2.-comp .case-v2__arch.-compact {
    padding: 64px 0;
  }

  .case-v2.-comp .case-v2__arch.-compact .case-v2__h2 {
    margin-bottom: 24px;
    font-size: 24px;
    line-height: 30px;
  }

  .case-v2__arch.-compact .case-v2__logo-label {
    font-size: 11px;
    line-height: 14px;
  }

  .case-v2.-comp .case-v2__review.-plain {
    padding: 64px 0;
  }

  .case-v2__review-card.-plain blockquote p {
    font-size: 24px;
    line-height: 32px;
  }

  .case-v2__review-card.-plain .case-v2__review-avatar {
    width: 48px;
    height: 48px;
  }
}

/* ============================================================================
   Comp devices — DIFWEB-294 (SaveIT, Constantine's case comps)
   ---- DIFWEB-294 SaveIT — sixth comp-device batch ----
   Sixth batch, same rule as the first five: every selector below is a modifier or a new
   element, a case that sets none of the new fields renders byte-identically (the five
   earlier v2 pages were diffed in `out/` before and after), every colour is a token, and
   every centred/left selector that changes at desktop is restated under 768px. The
   devices: a `stage` hero with measured geometry (`-tuned`), a sized logo and a
   positioned back glow; a display-face challenge body with a muted first paragraph; the
   panel grid as flat `tile`s in a spanning `-mosaic` and as `showcase` illustration cards;
   ONE framed result card with bare icon + caption cells and an eyebrow-styled h2; the logo
   row as a fixed `cols` grid; the `.back` arrow on this page's white hero. No comp exists
   below 1440, so the responsive rules are derived.
   ============================================================================ */

/* ---- hero: measured stage geometry, sized logo, positioned back glow ----
   The comp's band is 179 above the logo (its 72 nav row + 107) and 180 under the blob,
   which ends 63.5 below the phone box; copy → phone 113; h1 56/64 (Figma "normal" leading
   pinned to 64), tracking 0; lede 20/28 in a 539 column. Each value is a custom property on
   the section and the defaults are the Instreamatic literals, so the `-tuned` rules only
   ever restate what the section had. */
.case-v2__hero.-stage.-tuned {
  padding: var(--case-hero-pad-top, 232px) 0 var(--case-hero-pad-bottom, 114px);
}

.case-v2__hero.-stage.-tuned .case-v2__hero-grid {
  gap: var(--case-hero-gap, 83px);
}

.case-v2__hero.-stage.-tuned .case-v2__hero-title {
  font-size: var(--case-hero-title-size, 64px);
  line-height: var(--case-hero-title-leading, 72px);
  letter-spacing: var(--case-hero-title-tracking, -1.28px);
}

.case-v2__hero.-stage.-tuned .case-v2__hero-sub {
  max-width: var(--case-hero-lede-width, 819px);
  line-height: var(--case-hero-lede-leading, 32px);
}

/* The stacked mark + wordmark (80×112) instead of the default 28px wordmark strip. */
.case-v2__hero.-stage .case-v2__hero-logo.-sized img {
  height: var(--case-hero-logo-height);
  max-height: none;
}

/* The back glow's box, from the data; the defaults are the Instreamatic ring's. */
.case-v2__hero-visual.-stage .case-v2__hero-glow.-back {
  top: var(--case-hero-glow-back-top, 29.4%);
  left: var(--case-hero-glow-back-left, -49.6%);
  width: var(--case-hero-glow-back-width, 196.4%);
}

/* ---- feature rows: display-face body, muted first paragraph ----
   The comp sets the challenge paragraphs in Gilroy Bold 16/22 and the first one in a grey
   (`#86879A` in the comp — 3.4:1 on its band; the data deepens it, see case-saveit.ts). */
.case-v2__row.-display-body .case-v2__row-body {
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0;
}

.case-v2__row.-lead-ink .case-v2__row-title + .case-v2__row-body {
  color: var(--case-row-lead-ink);
}

/* ---- panels: flat tiles in a mosaic, showcase illustration cards ----
   Both take the Instreamatic section rhythm (140 padding, 80 head → grid, 718 head). */
.case-v2.-comp .case-v2__panels.-tile,
.case-v2.-comp .case-v2__panels.-showcase {
  padding: 140px 0;
}

.case-v2.-comp .case-v2__panels.-tile.-center .case-v2__h2 + .case-v2__panel-grid,
.case-v2.-comp .case-v2__panels.-showcase.-center .case-v2__h2 + .case-v2__panel-grid {
  margin-top: 80px;
}

.case-v2.-comp .case-v2__panels.-tile.-center .case-v2__h2,
.case-v2.-comp .case-v2__panels.-showcase.-center .case-v2__h2 {
  max-width: 718px;
  margin-left: auto;
  margin-right: auto;
}

.case-v2.-comp .case-v2__panel-grid.-tile,
.case-v2.-comp .case-v2__panel-grid.-showcase {
  gap: 8px;
}

/* tile: the comp's #F8F8F8 card — radius 16, padding 40/32, icon 120 top-left with the copy
   12 to its right, title 24/28, 24 to a 14/22 body, paragraphs 12 apart. */
.case-v2.-comp .case-v2__panel-grid.-tile .case-v2__panel {
  border-radius: 16px;
}

.case-v2.-comp .case-v2__panel-grid.-tile .case-v2__panel-copy {
  gap: 24px;
  padding: 40px 32px;
}

.case-v2.-comp .case-v2__panel-grid.-tile.-icon-side .case-v2__panel-copy {
  gap: 24px 12px;
}

/* The shared `-icon-side` icon spans `1 / -1`, which ends at the EXPLICIT grid (two rows),
   so on a three-paragraph tile the 120px icon inflated the second row. Here it sits in row
   one only, top-aligned, and its negative bottom margin shrinks its margin box to the
   title's 28px so the rows size to the copy; the glyph overflows into the empty first
   column beneath. */
.case-v2__panel-grid.-tile.-icon-side .case-v2__panel-icon {
  grid-row: 1;
  align-self: start;
  margin-bottom: calc(28px - var(--case-panel-icon, 40px));
}

.case-v2.-comp .case-v2__panel-grid.-tile .case-v2__panel-title,
.case-v2.-comp .case-v2__panel-grid.-showcase .case-v2__panel-title {
  font-size: 24px;
  line-height: 28px;
}

/* The copy gap is the title → body 24; consecutive paragraphs close to the comp's 12. */
.case-v2.-comp .case-v2__panel-grid.-tile .case-v2__panel-body + .case-v2__panel-body,
.case-v2.-comp .case-v2__panel-grid.-showcase .case-v2__panel-body + .case-v2__panel-body {
  margin-top: -12px;
}

/* showcase: the comp's glass card — radius 24, an 8px inset all round, the illustration
   centred at the top, the copy indented to 48 (8 + 40) with 48 under it. */
.case-v2.-comp .case-v2__panel-grid.-showcase .case-v2__panel {
  padding: 8px;
  border-radius: 24px;
}

.case-v2.-comp .case-v2__panel-grid.-showcase .case-v2__panel-copy {
  gap: 0;
  padding: 0 40px 40px;
}

.case-v2__panel-grid.-showcase .case-v2__panel-icon {
  align-self: center;
  margin: 0;
}

.case-v2.-comp .case-v2__panel-grid.-showcase .case-v2__panel-title {
  margin: 0 0 24px;
}

/* mosaic: per-item spans on the `cols`-wide grid; the six-column comp is 3+3 / 2×2 rows +
   4 + 4 / 6 in reading order, so auto-placement keeps the DOM order. */
.case-v2__panel-grid.-mosaic .case-v2__panel {
  grid-column: span var(--case-panel-col-span, 1);
  grid-row: span var(--case-panel-row-span, 1);
}

/* ---- results: one framed card, bare icon + caption cells, eyebrow-styled h2 ----
   The comp's 1300×717 panel (radius 32, padding 80 / 154 / 64) holds a tracked "THE RESULT"
   label, 64, then a 3×2 grid of 120px icons over centred Gilroy 20/24 captions, 24 apart.
   The frame clips — its ground carries the two blurred blobs, which run past its edges. */
.case-v2.-comp .case-v2__results.-framed {
  padding: 120px 0;
}

.case-v2__results-frame {
  position: relative;
  padding: 80px 154px 64px;
  border-radius: var(--case-results-frame-radius, 32px);
  overflow: hidden;
}

.case-v2.-comp .case-v2__results.-eyebrow-head .case-v2__h2 {
  max-width: none;
  margin: 0 0 64px;
  /* Centres the glyphs, not the box: the tracking after the last letter is one side only. */
  padding-left: 9.6px;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  letter-spacing: 9.6px;
  text-align: center;
  text-transform: uppercase;
  color: var(--case-text);
}

.case-v2__result-cards.-bare {
  grid-template-columns: repeat(var(--case-result-cols, 3), minmax(0, 1fr));
  gap: 24px;
}

.case-v2__result-cards.-bare .case-v2__result-card {
  align-items: center;
  gap: 24px;
  min-height: 0;
  padding: 0;
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
}

.case-v2__result-cards.-bare .case-v2__result-card-icon {
  width: var(--case-result-icon, 120px);
  height: var(--case-result-icon, 120px);
  margin: 0;
}

.case-v2__result-cards.-bare .case-v2__result-card-title {
  margin: 0;
  font-family: var(--case-font-display);
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--case-text);
}

/* ---- architecture: logo row as a fixed grid ----
   The comp's 2×4: 313 tiles 16 apart (padding 24), a 40px mark, 16, an uppercase 12/16
   label tracked +0.84px in the muted ink, wrapping in the tile; 64 under the title. */
.case-v2.-comp .case-v2__arch.-grid .case-v2__h2 {
  margin-bottom: 64px;
}

.case-v2__arch.-grid .case-v2__logo-row {
  display: grid;
  grid-template-columns: repeat(var(--case-logo-cols, 4), minmax(0, 1fr));
  gap: 16px;
}

.case-v2__arch.-grid .case-v2__logo-cell {
  gap: 16px;
  width: auto;
  padding: 24px;
}

.case-v2__arch.-grid .case-v2__logo-mark {
  width: 40px;
  height: 40px;
}

.case-v2__arch.-grid .case-v2__logo-mark img {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
}

.case-v2__arch.-grid .case-v2__logo-label {
  min-height: 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  color: var(--case-text-mute);
}

/* ---- back arrow on a white hero (this page only) ----
   `.back` is site chrome: a white arrow on a 10%-white disc (styles.min.css), invisible on
   SaveIT's white hero. Page-scoped and additive; the other light v2 pages (RedTrack,
   Happier, Maze) ship the same defect and need the same rule or a shared hook. */
.page.-cases-one.-case-saveit .back svg {
  fill: #131426;
}

.page.-cases-one.-case-saveit .back a::before {
  background: rgba(19, 20, 38, 0.08);
}

.page.-cases-one.-case-saveit .back a:hover::before {
  background: rgba(19, 20, 38, 0.14);
}

/* ---- responsive: no mobile comp exists, so these are derived ---- */
@media (max-width: 1279px) {
  /* The tuned hero never grows past the derived stage sizes at this width. */
  .case-v2__hero.-stage.-tuned {
    padding: min(var(--case-hero-pad-top, 232px), 180px) 0 min(var(--case-hero-pad-bottom, 114px), 72px);
  }

  .case-v2__hero.-stage.-tuned .case-v2__hero-grid {
    gap: min(var(--case-hero-gap, 83px), 64px);
  }

  .case-v2__hero.-stage.-tuned .case-v2__hero-title {
    font-size: min(var(--case-hero-title-size, 64px), 52px);
    line-height: min(var(--case-hero-title-leading, 72px), 58px);
    letter-spacing: var(--case-hero-title-tracking, -1.04px);
  }

  /* Six mosaic columns at ~1000px leave a two-column tile 113px of copy beside its icon;
     two equal columns, spans off, from here down. */
  .case-v2.-comp .case-v2__panel-grid.-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-v2__panel-grid.-mosaic .case-v2__panel {
    grid-column: auto;
    grid-row: auto;
  }

  /* 154 side padding leaves 636 for three cells at 1024; 64 keeps the cells ~250 wide. */
  .case-v2__results-frame {
    padding: 80px 64px 64px;
  }
}

@media (max-width: 1023px) {
  /* A 120 icon beside ~176px of copy in a 340 tile does not read: the tile stacks, icon 96. */
  .case-v2.-comp .case-v2__panel-grid.-tile .case-v2__panel-copy,
  .case-v2.-comp .case-v2__panel-grid.-tile.-icon-side .case-v2__panel-copy {
    display: flex;
    gap: 20px;
    padding: 32px 24px;
  }

  .case-v2__panel-grid.-tile.-icon-side .case-v2__panel-icon {
    width: 96px;
    height: 96px;
    margin-bottom: 0;
  }

  .case-v2__results-frame {
    padding: 64px 40px 48px;
  }

  .case-v2__result-cards.-bare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-v2__arch.-grid .case-v2__logo-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .case-v2__hero.-stage.-tuned {
    padding: min(var(--case-hero-pad-top, 232px), 120px) 0 min(var(--case-hero-pad-bottom, 114px), 48px);
  }

  .case-v2__hero.-stage.-tuned .case-v2__hero-grid {
    gap: min(var(--case-hero-gap, 83px), 40px);
  }

  .case-v2__hero.-stage.-tuned .case-v2__hero-title {
    font-size: min(var(--case-hero-title-size, 64px), 36px);
    line-height: min(var(--case-hero-title-leading, 72px), 40px);
    letter-spacing: var(--case-hero-title-tracking, -0.72px);
  }

  .case-v2__hero.-stage.-tuned .case-v2__hero-sub {
    line-height: min(var(--case-hero-lede-leading, 32px), 26px);
  }

  .case-v2__hero.-stage .case-v2__hero-logo.-sized img {
    height: calc(var(--case-hero-logo-height) * 0.75);
  }

  .case-v2.-comp .case-v2__panels.-tile,
  .case-v2.-comp .case-v2__panels.-showcase {
    padding: 64px 0;
  }

  .case-v2.-comp .case-v2__panels.-tile.-center .case-v2__h2 + .case-v2__panel-grid,
  .case-v2.-comp .case-v2__panels.-showcase.-center .case-v2__h2 + .case-v2__panel-grid {
    margin-top: 40px;
  }

  .case-v2.-comp .case-v2__panel-grid.-mosaic {
    grid-template-columns: 1fr;
  }

  .case-v2.-comp .case-v2__panel-grid.-tile .case-v2__panel-copy,
  .case-v2.-comp .case-v2__panel-grid.-tile.-icon-side .case-v2__panel-copy {
    padding: 28px 24px 32px;
  }

  .case-v2__panel-grid.-tile.-icon-side .case-v2__panel-icon {
    width: 80px;
    height: 80px;
  }

  .case-v2.-comp .case-v2__panel-grid.-tile .case-v2__panel-title,
  .case-v2.-comp .case-v2__panel-grid.-showcase .case-v2__panel-title {
    font-size: 22px;
    line-height: 26px;
  }

  .case-v2.-comp .case-v2__panel-grid.-showcase .case-v2__panel-copy {
    padding: 0 16px 32px;
  }

  .case-v2.-comp .case-v2__results.-framed {
    padding: 64px 0;
  }

  .case-v2__results-frame {
    padding: 48px 24px 40px;
    border-radius: 24px;
  }

  .case-v2.-comp .case-v2__results.-eyebrow-head .case-v2__h2 {
    margin-bottom: 40px;
    padding-left: 6px;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 6px;
  }

  .case-v2__result-cards.-bare {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .case-v2__result-cards.-bare .case-v2__result-card-icon {
    width: 96px;
    height: 96px;
  }

  .case-v2.-comp .case-v2__arch.-grid .case-v2__h2 {
    margin-bottom: 40px;
  }

  .case-v2__arch.-grid .case-v2__logo-cell {
    padding: 16px 8px;
  }
}

/* ============================================================================
   Comp devices — DIFWEB-295 (RepoScore, Constantine's case comps)
   ---- DIFWEB-295 RepoScore — seventh comp-device batch ----
   Seventh batch, same rule as the first six: every selector below is a modifier, a new
   element or a `var()` restatement whose fallback is the literal it replaces, so a case
   that sets none of the new fields renders byte-identically (the six earlier v2 pages were
   diffed in `out/` against a build of `origin/develop`), every colour is a token, and every
   selector that changes at desktop is restated under its own breakpoints — including the
   ones that already had mobile rules earlier in this file, which an appended rule at equal
   specificity would otherwise silently beat.
   The devices: a two-column `mesh` hero with measured geometry (`-tuned` past the `stage`
   gate), a typeset wordmark under the mark, an inline lime tag line and a CSS glow layer
   behind the visual; a stacked media row with a centred display lead and titled items; a
   second h2 step at 32/36; panel-grid geometry as six custom properties, centred items, a
   top-aligned side icon, a frame around the whole block and a bare statement; a results
   card with a media column and a naked figure grid; the tech band as `groups`; and the
   article's own rounded bottom. No comp exists below 1440, so the responsive rules are
   derived.
   ============================================================================ */

.case-v2 {
  /* The comps' second heading step. The first six comps run one h2 size per page; RepoScore
     runs 40/48 and 32/36, so the smaller one is its own token pair. */
  --case-title-size-sm: 32px;
  --case-title-leading-sm: 36px;
}

/* ---- the second h2 step ----
   Specific enough to beat both the left-aligned `-comp` h2 (`.case-v2.-comp .case-v2__h2`)
   and the centred one (`…__h2.-center`), which it ties with and follows. */
.case-v2.-comp .case-v2__h2.-sm {
  font-size: var(--case-title-size-sm);
  line-height: var(--case-title-leading-sm);
}

/* ---- the article's own bottom corners ----
   `.case-v2` already has `overflow: hidden` and paints `--case-bg`, and it is the only box
   that is reliably last (block order is data-driven), so the curve belongs here rather than
   on a section. Pair with `-related-on-ground` so the ground under the curve is painted. */
.case-v2.-rounded-bottom {
  border-bottom-left-radius: var(--case-ground-radius, 64px);
  border-bottom-right-radius: var(--case-ground-radius, 64px);
}

/* ---- hero: the measured two-column band ----
   The `-tuned` custom properties were `stage`-only until now; these are their non-`stage`
   twins, and every fallback is the value the untuned hero already renders. The comp's band
   is 179 above the lockup (its 72 nav row + 107) and 180 under the phone, two equal columns
   120 apart, h1 40/48 tracking 0, lede 16/24 at full ink. */
.case-v2__hero.-tuned:not(.-stage) {
  padding: var(--case-hero-pad-top, 170px) 0 var(--case-hero-pad-bottom, 78px);
}

.case-v2__hero.-tuned:not(.-stage).-with-visual .case-v2__hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--case-hero-gap, 56px);
}

.case-v2__hero.-tuned:not(.-stage) .case-v2__hero-title {
  font-size: var(--case-hero-title-size, 56px);
  line-height: var(--case-hero-title-leading, 62px);
  letter-spacing: var(--case-hero-title-tracking, -1.68px);
}

.case-v2__hero.-tuned:not(.-stage) .case-v2__hero-sub {
  max-width: var(--case-hero-lede-width, 720px);
  font-size: var(--case-hero-lede-size, 19px);
  line-height: var(--case-hero-lede-leading, 31px);
}

/* The lockup's rhythm, and the copy column's: kicker 24 over the h1, h1 40 over the lede,
   lede 40 over the tag line. Scoped to the comp scale so the house hero is untouched. */
.case-v2.-comp .case-v2__hero.-tuned:not(.-stage) .case-v2__hero-logo {
  margin-bottom: 80px;
}

.case-v2.-comp .case-v2__hero.-tuned:not(.-stage) .case-v2__label {
  margin-bottom: 24px;
  font-family: var(--case-eyebrow-font, Inter, sans-serif);
  font-weight: var(--case-eyebrow-weight, 400);
  font-size: var(--case-eyebrow-size, 12px);
  line-height: var(--case-eyebrow-leading, 16px);
  letter-spacing: var(--case-eyebrow-tracking, 2.4px);
}

.case-v2.-comp .case-v2__hero.-tuned:not(.-stage) .case-v2__hero-title {
  margin-bottom: 40px;
  font-family: var(--case-font-display);
}

.case-v2.-comp .case-v2__hero.-tuned:not(.-stage) .case-v2__hero-sub {
  margin-bottom: 40px;
  letter-spacing: -0.32px;
}

/* A sized logo outside a `stage` hero (the twin of the `-stage .-sized` rule above). */
.case-v2__hero .case-v2__hero-logo.-sized img {
  height: var(--case-hero-logo-height);
  max-height: none;
}

/* ---- hero: the typeset wordmark under the mark ----
   The comp's lockup is a square app icon over the product name set in type, not drawn. The
   name stays real text (selectable, readable, one less font baked into an SVG) and the mark
   above it is then decorative. `:has` only tightens the 30px default to the comp's 23; where
   it is unsupported the lockup is 7px looser, nothing breaks. */
.case-v2__hero-wordmark {
  margin: 0;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--case-hero-ink);
}

.case-v2__hero-logo:has(+ .case-v2__hero-wordmark) {
  margin-bottom: 23px;
}

.case-v2.-comp .case-v2__hero.-tuned:not(.-stage) .case-v2__hero-logo:has(+ .case-v2__hero-wordmark) {
  margin-bottom: 23px;
}

.case-v2.-comp .case-v2__hero.-tuned:not(.-stage) .case-v2__hero-wordmark {
  margin-bottom: 80px;
}

/* ---- hero: the tag line as one inline lime run ----
   The same `ul` the pills use, set at the eyebrow tokens with a middot between items. */
.case-v2__hero-chips.-inline {
  display: block;
  max-width: none;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: var(--case-accent);
}

.case-v2__hero-chips.-inline li {
  display: inline;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: normal;
  color: inherit;
  background: none;
  border-radius: 0;
}

.case-v2__hero-chips.-inline li + li::before {
  content: " · ";
}

/* ---- hero: a CSS glow behind the visual ----
   The comp's two rotated, 122px-blurred ellipses are radial gradients here, not rasters —
   a blurred ellipse is exactly what a radial gradient draws, at no request. */
.case-v2__hero-visual.-backdrop {
  position: relative;
}

.case-v2__hero-visual.-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--case-hero-visual-backdrop);
}

.case-v2__hero-visual.-backdrop img {
  position: relative;
  z-index: 1;
}

/* ---- feature rows: a group head, a stacked media row, titled items ----
   The head sits above the rows (a row's own eyebrow/heading stay in its copy column), 80
   over the first row. `-media-above` collapses the grid to one column with the media first;
   `-body-center` centres and caps the copy; `-lead-display` sets the FIRST paragraph in the
   display face at the row title's 32/36 (the comp's summary is two display statements over
   one body paragraph, with no heading of its own). */
/* The group wrap is a flex column with a 10px row gap, which would add 10 under BOTH head
   elements; the head takes its rhythm from its own margins instead and the rows keep the 10. */
.case-v2__rows.-headed > .wrap-v4 {
  gap: 0;
}

.case-v2__rows.-headed .case-v2__row + .case-v2__row {
  margin-top: 10px;
}

.case-v2.-comp .case-v2__rows.-headed .case-v2__eyebrow {
  margin-bottom: 24px;
}

.case-v2.-comp .case-v2__rows.-headed .case-v2__h2 {
  margin-bottom: 80px;
}

.case-v2__row.-media-above {
  grid-template-columns: minmax(0, 1fr);
}

.case-v2__row.-media-above .case-v2__row-media {
  order: 1;
  width: var(--case-row-media-width, 100%);
  max-width: 100%;
  margin: 0 auto;
}

.case-v2__row.-media-above .case-v2__row-copy {
  order: 2;
}

.case-v2__row.-body-center .case-v2__row-copy {
  max-width: var(--case-row-copy-width, 920px);
  margin: 0 auto;
  text-align: center;
}

.case-v2.-comp .case-v2__row.-lead-display .case-v2__row-copy {
  gap: 32px;
}

.case-v2.-comp .case-v2__row.-lead-display .case-v2__row-title + .case-v2__row-body,
.case-v2.-comp .case-v2__row.-lead-display .case-v2__row-body:first-child {
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: 0;
  color: var(--case-text);
}

/* The media box's own decoration: a shadow (the comp's lime bloom under the summary art)
   and a background layer under the image (its radial lime behind the impact phone). Both
   default to nothing, so every existing row is unchanged. */
.case-v2__row-media {
  box-shadow: var(--case-row-media-shadow, none);
}

.case-v2__row.-media-contain .case-v2__row-media img {
  object-fit: contain;
}

.case-v2__row.-media-glow .case-v2__row-media {
  position: relative;
}

.case-v2__row.-media-glow .case-v2__row-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--case-row-media-glow);
}

.case-v2__row.-media-glow .case-v2__row-media img {
  position: relative;
  z-index: 1;
}

/* Titled pairs in the copy column — the comp's four 24/28 + 16/24 blocks, 40 apart. */
.case-v2__row-items {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.case-v2__row-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-v2.-comp .case-v2__row-item-title {
  margin: 0;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--case-text);
}

.case-v2.-comp .case-v2__row-item-body {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--case-text-body);
}

/* ---- panels: geometry from the data ----
   Six custom properties replace six per-`cardStyle` literals. Each `var()` fallback is the
   literal it replaces, so every existing grid resolves to exactly what it had; only the
   cases that set the fields see a change. */
.case-v2.-comp .case-v2__panel-grid {
  gap: var(--case-panel-gap, 12px);
}

.case-v2.-comp .case-v2__panel-grid.-plain,
.case-v2.-comp .case-v2__panel-grid.-photo,
.case-v2.-comp .case-v2__panel-grid.-compact {
  gap: var(--case-panel-gap, 24px);
}

.case-v2.-comp .case-v2__panel-grid.-tile,
.case-v2.-comp .case-v2__panel-grid.-showcase {
  gap: var(--case-panel-gap, 8px);
}

.case-v2.-comp .case-v2__panel-grid.-plain .case-v2__panel {
  border-radius: var(--case-panel-radius, 0);
}

.case-v2.-comp .case-v2__panel-grid.-compact .case-v2__panel,
.case-v2.-comp .case-v2__panel-grid.-showcase .case-v2__panel {
  border-radius: var(--case-panel-radius, 24px);
}

.case-v2.-comp .case-v2__panel-grid.-tile .case-v2__panel {
  border-radius: var(--case-panel-radius, 16px);
}

.case-v2.-comp .case-v2__panel-copy {
  gap: var(--case-panel-copy-gap, 20px);
  padding: var(--case-panel-padding, 40px);
}

.case-v2.-comp .case-v2__panel-grid.-numbered .case-v2__panel-copy {
  gap: var(--case-panel-copy-gap, 24px);
}

.case-v2.-comp .case-v2__panel-grid.-plain .case-v2__panel-copy {
  gap: var(--case-panel-copy-gap, 12px);
  padding: var(--case-panel-padding, 32px 16px 48px);
}

.case-v2.-comp .case-v2__panel-grid.-compact .case-v2__panel-copy {
  gap: var(--case-panel-copy-gap, 12px);
  padding: var(--case-panel-padding, 32px 24px 48px);
}

/* The icon column keeps the comp's 24; only the row gap follows `copyGap`. */
.case-v2.-comp .case-v2__panel-grid.-icon-side .case-v2__panel-copy {
  gap: var(--case-panel-copy-gap, 12px) 24px;
}

/* The icon's own 12 plus the copy gap is the comps' 24 from icon to title at every gap.
   `:not(.-icon-side)` is load-bearing: a side icon is zeroed at `.-icon-side .case-v2__panel-icon`
   at equal specificity EARLIER in this file, so an unscoped rule here would silently give
   Instreamatic's four contribution icons a 12px bottom margin and shift them 6px up. */
.case-v2__panel-grid.-plain:not(.-icon-side) .case-v2__panel-icon {
  margin-bottom: calc(24px - var(--case-panel-copy-gap, 12px));
}

/* …and consecutive paragraphs close back to 12 whatever the copy gap is. */
.case-v2.-comp .case-v2__panel-grid.-plain .case-v2__panel-body + .case-v2__panel-body,
.case-v2.-comp .case-v2__panel-grid.-compact .case-v2__panel-body + .case-v2__panel-body {
  margin-top: calc(12px - var(--case-panel-copy-gap, 12px));
}

.case-v2.-comp .case-v2__panel-grid.-plain .case-v2__panel-title {
  font-size: var(--case-panel-title-size, 18px);
  line-height: var(--case-panel-title-leading, 24px);
}

.case-v2.-comp .case-v2__panel-grid.-compact .case-v2__panel-title {
  font-size: var(--case-panel-title-size, 20px);
  line-height: var(--case-panel-title-leading, 24px);
}

/* ---- panels: centred items and a top-aligned side icon ----
   `align` centres the section head; this centres what is INSIDE each item. `text-align` is
   not viewport-dependent and needs no restatement; `align-items` is restated with it. */
.case-v2.-comp .case-v2__panel-grid.-items-center .case-v2__panel-copy {
  align-items: center;
  text-align: center;
}

.case-v2__panel-grid.-icon-start .case-v2__panel-icon {
  align-self: start;
}

/* ---- panels: one frame around the head, the grid and the statement ----
   The same shape `results.frame` already carries. A framed block IS its section, so the
   section's own padding drops to 0 and the neighbours' 140 carries the rhythm. */
.case-v2.-comp .case-v2__panels.-framed {
  padding: 0;
}

.case-v2__panels-frame {
  padding: var(--case-panels-frame-padding, 64px);
  border: 1px solid var(--case-line-strong);
  border-radius: var(--case-panels-frame-radius, 32px);
  overflow: hidden;
}

.case-v2.-comp .case-v2__panels.-framed.-center .case-v2__eyebrow,
.case-v2.-comp .case-v2__panels.-framed.-center .case-v2__h2 {
  margin-bottom: 24px;
}

.case-v2.-comp .case-v2__panels.-framed .case-v2__prose {
  max-width: 804px;
  margin-bottom: 64px;
}

/* The closing line inside the frame: no fill, no radius, just centred display type. */
.case-v2__statement.-plain {
  max-width: 752px;
  margin: 64px auto 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

.case-v2.-comp .case-v2__statement.-plain .case-v2__statement-headline {
  font-size: 20px;
  line-height: 24px;
  color: var(--case-statement-ink, var(--case-text));
}

/* ---- results: a media column in the card, a naked figure grid ----
   The comp's card is 80 all round with the head + figures left and the two phone screens
   right, 48 apart. `frame.padding` rides its own `-padded` modifier so the SaveIT frame's
   asymmetric 80/154/64 (and its three derived widths) is untouched. */
.case-v2.-comp .case-v2__results.-framed {
  padding: var(--case-results-padding, 120px) 0;
}

.case-v2__results-frame.-padded {
  padding: var(--case-results-frame-padding);
}

.case-v2__results-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.case-v2__results-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-v2__results-media img {
  display: block;
  width: var(--case-results-media-width, 100%);
  max-width: 100%;
  /* `height: auto` with the `width`/`height` ATTRIBUTES on the element (Results.tsx) is what
     reserves the box before the lazy asset decodes; without them it is 0 tall on the way
     down the page. */
  height: auto;
}

.case-v2.-comp .case-v2__results.-with-media .case-v2__eyebrow {
  margin-bottom: 24px;
}

.case-v2.-comp .case-v2__results.-with-media .case-v2__h2 {
  max-width: none;
  margin-bottom: 64px;
}

.case-v2__metrics.-bare {
  grid-template-columns: repeat(var(--case-metric-cols, 3), minmax(0, 1fr));
  gap: 32px;
}

.case-v2__metrics.-bare .case-v2__metric {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.case-v2.-comp .case-v2__metrics.-bare .case-v2__metric-value {
  margin: 0 0 8px;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--case-text);
}

.case-v2.-comp .case-v2__metrics.-bare .case-v2__metric-label {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: var(--case-text-body);
}

/* ---- architecture: the tech band as named groups ----
   Title + prose in a left-aligned column under a 2px `accentAlt` rule — the comp runs two
   limes, `accent` for type and `accentAlt` for rules and glows, and this is the rule one.
   The grid wraps naturally, so the comp's 4 + 3 needs no empty cell. */
.case-v2.-comp .case-v2__arch.-groups {
  padding: 140px 0 200px;
}

.case-v2.-comp .case-v2__arch.-groups .case-v2__h2 {
  margin-bottom: 80px;
}

.case-v2__stack-groups {
  display: grid;
  grid-template-columns: repeat(var(--case-stack-group-cols, 4), minmax(0, 1fr));
  gap: 64px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-v2__stack-group {
  padding-top: 24px;
  border-top: 2px solid var(--case-accent-alt);
}

.case-v2.-comp .case-v2__stack-group-title {
  margin: 0 0 16px;
  font-family: var(--case-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--case-text);
}

.case-v2.-comp .case-v2__stack-group-body {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--case-text-body);
}

/* ---- responsive: no mobile comp exists, so these are derived ----
   Half of what follows is a RESTATEMENT of a rule that already exists earlier in this file
   at the same specificity: an appended desktop rule would otherwise beat it at every width.
   Each one keeps the earlier literal as its `var()` fallback or its `min()` ceiling. */
@media (max-width: 1279px) {
  /* Restates the base `-with-visual` collapse, which the `-tuned` rule above outranks. */
  .case-v2__hero.-tuned:not(.-stage).-with-visual .case-v2__hero-grid {
    grid-template-columns: 1fr;
    gap: min(var(--case-hero-gap, 56px), 36px);
  }

  .case-v2__hero.-tuned:not(.-stage) {
    padding: min(var(--case-hero-pad-top, 170px), 150px) 0 min(var(--case-hero-pad-bottom, 78px), 78px);
  }

  .case-v2__hero.-tuned:not(.-stage) .case-v2__hero-title {
    font-size: min(var(--case-hero-title-size, 56px), 44px);
    line-height: min(var(--case-hero-title-leading, 62px), 52px);
  }

  .case-v2.-comp .case-v2__hero.-tuned:not(.-stage) .case-v2__hero-logo,
  .case-v2.-comp .case-v2__hero.-tuned:not(.-stage) .case-v2__hero-wordmark {
    margin-bottom: 48px;
  }

  /* Six mosaic columns are already reset to two by the sixth batch; the results card and
     the tech band lose their widest tracks here. */
  .case-v2__results-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .case-v2__stack-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
  }

  .case-v2.-comp .case-v2__arch.-groups {
    padding: 100px 0 140px;
  }

  .case-v2__panels-frame {
    padding: var(--case-panels-frame-padding, 48px);
  }

  .case-v2__results-frame.-padded {
    padding: min(var(--case-results-frame-padding), 64px);
  }

  /* A 64px column gap authored on a 1300 grid takes a fifth of a 1000px wrap. */
  .case-v2.-comp .case-v2__panel-grid.-plain {
    gap: min(var(--case-panel-gap, 24px), 48px);
  }
}

@media (max-width: 1023px) {
  .case-v2.-comp .case-v2__panel-grid.-plain {
    gap: min(var(--case-panel-gap, 24px), 32px);
  }

  /* Below the desktop grid a hand break authored for a 1300 column reads as a ragged short
     line; the two-line SECTION headings still read, so only the ledes go back to normal. */
  .case-v2.-breaks .case-v2__panels .case-v2__prose p {
    white-space: normal;
  }

  .case-v2__panels-frame {
    padding: var(--case-panels-frame-padding, 40px);
  }

  .case-v2__results-frame.-padded {
    padding: min(var(--case-results-frame-padding), 48px);
  }

  .case-v2__metrics.-bare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-v2.-comp .case-v2__panels.-framed .case-v2__prose {
    margin-bottom: 40px;
  }

  .case-v2__statement.-plain {
    margin-top: 48px;
  }
}

@media (max-width: 767px) {
  /* Restates the base hero's phone padding and title size, which `-tuned` outranks. */
  .case-v2__hero.-tuned:not(.-stage) {
    padding: min(var(--case-hero-pad-top, 170px), 130px) 0 min(var(--case-hero-pad-bottom, 78px), 56px);
  }

  .case-v2__hero.-tuned:not(.-stage) .case-v2__hero-title {
    font-size: min(var(--case-hero-title-size, 56px), 32px);
    line-height: min(var(--case-hero-title-leading, 62px), 38px);
  }

  .case-v2__hero.-tuned:not(.-stage) .case-v2__hero-sub {
    font-size: min(var(--case-hero-lede-size, 19px), 17px);
    line-height: min(var(--case-hero-lede-leading, 31px), 26px);
  }

  .case-v2.-comp .case-v2__hero.-tuned:not(.-stage) .case-v2__hero-logo,
  .case-v2.-comp .case-v2__hero.-tuned:not(.-stage) .case-v2__hero-wordmark {
    margin-bottom: 32px;
  }

  .case-v2.-comp .case-v2__hero.-tuned:not(.-stage) .case-v2__hero-title,
  .case-v2.-comp .case-v2__hero.-tuned:not(.-stage) .case-v2__hero-sub {
    margin-bottom: 24px;
  }

  .case-v2__hero-logo.-sized img {
    height: calc(var(--case-hero-logo-height) * 0.75);
  }

  .case-v2__hero-wordmark {
    font-size: 20px;
    line-height: 26px;
  }

  /* The smaller h2 step, restated against the phone's 32/40 comp h2. */
  .case-v2.-comp .case-v2__h2.-sm {
    font-size: min(var(--case-title-size-sm), 26px);
    line-height: min(var(--case-title-leading-sm), 32px);
  }

  .case-v2.-comp .case-v2__rows.-headed .case-v2__h2 {
    margin-bottom: 40px;
  }

  .case-v2.-comp .case-v2__row.-lead-display .case-v2__row-copy {
    gap: 24px;
  }

  .case-v2.-comp .case-v2__row.-lead-display .case-v2__row-title + .case-v2__row-body,
  .case-v2.-comp .case-v2__row.-lead-display .case-v2__row-body:first-child {
    font-size: 22px;
    line-height: 28px;
  }

  .case-v2__row-items {
    gap: 32px;
  }

  .case-v2.-comp .case-v2__row-item-title {
    font-size: 20px;
    line-height: 26px;
  }

  /* Restates the sixth/fifth batches' phone rules for the panel copy, which the `var()`
     rules above would otherwise beat at this width. The first one is the default card's:
     RedTrack's five challenge cards run 32/24 here, and an unrestated 40 cost them 190px
     of height and 32px of measure. */
  .case-v2.-comp .case-v2__panel-copy {
    padding: var(--case-panel-padding, 32px 24px);
  }

  /* A left-aligned panels head keeps the phone's own margins (no shipped case has one yet,
     but the `var()` rules above outrank the generic 767 values). */
  .case-v2.-comp .case-v2__panels:not(.-center) .case-v2__eyebrow:not(.case-v2__panel-index) {
    margin-bottom: var(--case-panel-head-gap, 14px);
  }

  .case-v2.-comp .case-v2__panels:not(.-center) .case-v2__h2 {
    margin-bottom: var(--case-panel-head-gap, 32px);
  }

  .case-v2.-comp .case-v2__panel-grid.-plain {
    gap: min(var(--case-panel-gap, 24px), 40px);
  }

  .case-v2.-comp .case-v2__panel-grid.-plain .case-v2__panel-copy {
    gap: var(--case-panel-copy-gap, 12px);
    padding: var(--case-panel-padding, 0 0 8px);
  }

  .case-v2.-comp .case-v2__panel-grid.-plain .case-v2__panel-title {
    font-size: min(var(--case-panel-title-size, 18px), 20px);
    line-height: min(var(--case-panel-title-leading, 24px), 26px);
  }

  .case-v2.-comp .case-v2__panel-grid.-compact .case-v2__panel-copy {
    gap: var(--case-panel-copy-gap, 12px);
    padding: var(--case-panel-padding, 28px 24px 32px);
  }

  .case-v2.-comp .case-v2__panel-grid.-compact .case-v2__panel-title {
    font-size: min(var(--case-panel-title-size, 20px), 20px);
    line-height: min(var(--case-panel-title-leading, 24px), 26px);
  }

  /* The restated value is this width's own 8, not the desktop 12. */
  .case-v2.-comp .case-v2__panel-grid.-icon-side .case-v2__panel-copy {
    gap: min(var(--case-panel-copy-gap, 8px), 12px) 20px;
  }

  .case-v2__panels-frame {
    padding: var(--case-panels-frame-padding, 24px);
    border-radius: min(var(--case-panels-frame-radius, 32px), 20px);
  }

  .case-v2__results-frame.-padded {
    padding: min(var(--case-results-frame-padding), 24px);
  }

  .case-v2.-comp .case-v2__results.-framed {
    padding: min(var(--case-results-padding, 120px), 64px) 0;
  }

  .case-v2__metrics.-bare {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .case-v2.-comp .case-v2__results.-with-media .case-v2__h2 {
    margin-bottom: 40px;
  }

  .case-v2__statement.-plain {
    margin-top: 40px;
  }

  .case-v2.-comp .case-v2__arch.-groups {
    padding: 64px 0 96px;
  }

  .case-v2.-comp .case-v2__arch.-groups .case-v2__h2 {
    margin-bottom: 40px;
  }

  .case-v2__stack-groups {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* A hand break authored for a 1300 column reads as a ragged short line on a phone; the
     two-line headings still read, so only the card titles and the ledes go back to normal. */
  .case-v2.-breaks .case-v2__panel-title {
    white-space: normal;
  }

  /* 64px corners eat 17% of a 375 viewport. */
  .case-v2.-rounded-bottom {
    border-bottom-left-radius: min(var(--case-ground-radius, 64px), 32px);
    border-bottom-right-radius: min(var(--case-ground-radius, 64px), 32px);
  }
}

/* ---- panels: head rhythm and measure from the data ----
   Restates the head margins with `var()` so a comp can set its own; every fallback is the
   value the block already rendered. The `:not(.case-v2__panel-index)` guard keeps the
   eyebrow-styled card index out (it is the same class, and RedTrack zeroes its margin). */
.case-v2.-comp .case-v2__panels.-center .case-v2__eyebrow:not(.case-v2__panel-index),
.case-v2.-comp .case-v2__panels.-center .case-v2__h2 {
  margin-bottom: var(--case-panel-head-gap, 12px);
}

.case-v2.-comp .case-v2__panels:not(.-center) .case-v2__eyebrow:not(.case-v2__panel-index) {
  margin-bottom: var(--case-panel-head-gap, 20px);
}

.case-v2.-comp .case-v2__panels:not(.-center) .case-v2__h2 {
  margin-bottom: var(--case-panel-head-gap, 56px);
}

.case-v2.-comp .case-v2__panels.-plain.-center .case-v2__h2,
.case-v2.-comp .case-v2__panels.-photo.-center .case-v2__h2,
.case-v2.-comp .case-v2__panels.-compact.-center .case-v2__h2,
.case-v2.-comp .case-v2__panels.-tile.-center .case-v2__h2,
.case-v2.-comp .case-v2__panels.-showcase.-center .case-v2__h2 {
  max-width: var(--case-panel-head-width, 718px);
  margin-left: auto;
  margin-right: auto;
}

/* A left-aligned compact block runs its lede 80 above the grid (the comp's contribution). */
.case-v2.-comp .case-v2__panels.-compact:not(.-center) .case-v2__prose {
  margin-bottom: 80px;
}

/* A centred group head over a feature-row group takes the comps' 932 measure. */
.case-v2.-comp .case-v2__rows.-headed .case-v2__h2.-center {
  max-width: 932px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- the designer's own line breaks ----
   The comp breaks four headings, two card titles and two ledes by hand; a `\n` in the data
   is that break. Behind `CaseStudyV2.honorBreaks` so it reaches only the pages that opt in —
   `pre-line` is pixel-identical on a string with no newline, but it is still a different
   computed value on every heading and title of every other case, and a shared skin should
   not change what it does not need to. */
.case-v2.-breaks .case-v2__h2.-sm,
.case-v2.-breaks .case-v2__panel-title,
.case-v2.-breaks .case-v2__panels .case-v2__prose p,
.case-v2.-breaks .case-v2__row-body {
  white-space: pre-line;
}

/* A stacked bare media box keeps its radius: `-frame-none` zeroes it for the two-column
   rows, and the comp's summary art is a 64px card. */
.case-v2__row.-media-above.-frame-none .case-v2__row-media {
  border-radius: var(--case-row-radius, 0);
}

/* The comp sets the ledes of the framed block and of a left-aligned compact block at the
   card body's 14/22 rather than the prose 16/24. */
.case-v2.-comp .case-v2__panels.-framed .case-v2__prose p,
.case-v2.-comp .case-v2__panels.-compact:not(.-center) .case-v2__prose p {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
}

/* The hero's grain-and-scrim overlay, from a token. On a flat near-black comp ground the
   0.9 default lifts `#131214` to about `#2B2B2B` and swallows the dot grid. */
.case-v2__hero::after {
  opacity: var(--case-hero-grain, 0.9);
}