/* Revenue Leaks — three rule-topped editorial columns, not cards */

.leaks__head {
  max-width: 760px;
  margin: 0 auto var(--space-16);
  text-align: center;
}
.leaks__heading {
  font-size: clamp(2rem, 3.6vw, 3rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}
.leaks__lede p { margin: 0 auto; max-width: 60ch; }

.leaks__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-10);
  row-gap: 0;
}

/* Fallback: equal-height columns with the fix line pushed to the bottom. */
.leak {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--color-primary-tint);
  padding-top: var(--space-5);
}
.leak__summary { flex: 1 1 auto; }
.leak__outcome { margin-top: auto; }

/* Preferred: subgrid keeps number / name / summary / fix on shared rows across
   all three columns, so the ragged summary lengths never break the alignment. */
@supports (grid-template-rows: subgrid) {
  .leaks__list { grid-template-rows: auto auto 1fr auto; }
  .leak {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .leak__outcome { margin-top: var(--space-8); }
}

.leak__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-primary);
}

.leak__name {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: var(--space-4) 0 0;
}

.leak__summary { margin-top: var(--space-4); }
.leak__summary p {
  margin: 0 0 var(--space-4);
  font-size: 1rem;
  line-height: 1.65;
}
.leak__summary p:last-child { margin-bottom: 0; }

.leak__outcome {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.leak__outcome-tag {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.leak__outcome-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-ink);
}

/* Three narrow columns stop being readable well before the mobile breakpoint,
   so the triad collapses to a single measured column at tablet width. */
@media (max-width: 1023px) {
  .leaks__list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--space-12);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }
  .leak {
    display: block;
    grid-row: auto;
    grid-template-rows: none;
  }
  .leak__outcome { margin-top: var(--space-6); }
}

.leaks__cta { text-align: center; margin-top: var(--space-16); }

/* Centred once stacked — opt-in via Alignment once the columns stack.

   The head and lede above are centred at every width. On desktop the three
   columns are ranged left against their own rules, which reads correctly
   against a centred head because the row is clearly a row. Stacked into one
   column that reasoning disappears: a centred heading over left-ranged copy in
   the same column just looks like two decisions.

   Applied at the same breakpoint the columns collapse, so alignment and layout
   change together rather than at two different widths. */
@media (max-width: 1023px) {
  .leaks--mobile-center .leak { text-align: center; }
}