/* ODX_Benefits: Figma "Section 4", 1258x445 at x=110,y=1866

   heading 45/300 lh120% centre  (the only 45 in the file)
   card    298x352 r40 #EFF9F9, 22px gap
   stat    40/500 lh100% #000 LEFT, 42px in from card top
   body    22/300 lh140% #000 LEFT, sits 202px down the card */

.odx-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Rows are shared with the cards through subgrid (see the card), so
     the row gap is zero and the cards are spaced by margin instead. */
  column-gap: 18px;
  row-gap: 0;
  align-items: stretch;
}

.odx-benefits__card {
  background: var(--odx-card-benefit);
  border-radius: var(--odx-r-card);
  padding: clamp(22px, 2.2vw, 32px) clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  /* No height floor (client review 2026-10-07): the comp's 352 left the
     cards reading too tall for their content in both layouts, so the
     tallest card's own padding sets the row height. */
}

/* Client review 2026-10-22: titles and descriptions must line up across
   every card, and one heading wrapping differently ("Correlation to
   stocks") was pushing its description out of line. Each card spans the
   grid's rows (title row, text row; stat row first in B) through
   subgrid, so a wrapped title makes its row taller for ALL four cards
   and the descriptions stay on one line. Without subgrid support the
   flex layout above still holds, just unaligned on a wrap. */
@supports (grid-template-rows: subgrid) {
  .odx-benefits__card {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .odx-benefits__card--stat { grid-row: span 3; }
}

/* Number and label share one treatment in the comp; they differ only by
   line break, so both take the same size and weight. */
.odx-benefits__stat,
.odx-benefits__title {
  /* Own step rather than --odx-t-40: the cards narrowed with the page and
     "Low correlation" has to hold one line of a two-line title. */
  font-size: clamp(21px, 1.75vw, 25px);
  text-wrap: balance;
  font-weight: 500;
  line-height: 1;
  color: var(--odx-ink);
  margin: 0;
  text-align: left;
}

/* ── the seam is the datum ──
   The comp's real rule, which is only visible once you plot it: every
   title's last line ends at y=1830 and every body's first line starts
   at y=1870, in all four cards, whatever their length. The titles are
   bottom-anchored to a shared line and the bodies top-anchored to the
   next one; the slack falls to the card's foot, where a tinted panel
   reads it as padding.

   What was here did the opposite. `margin-top: auto` on the body
   bottom-anchored it, so a four-line body started higher than a
   two-line one and the gap between title and body changed card to
   card. That put the variable space between the two things that have
   to read as a pair, which is the whole of the funny feeling.

   Two lines because every title is now set on two (module.html breaks
   the two-word ones). Scoped to --lead, so B's stat cards are
   untouched. */
.odx-benefits__title--lead {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 2em;
}


.odx-benefits__stat sup,
.odx-benefits__title sup {
  font-size: 0.4em;
  font-weight: 400;
  top: -0.9em;
  margin-left: 2px;
}

.odx-benefits__text {
  margin: 0;
  /* The one gap that matters, and the only one held constant: comp sets
     40 against a 40px title, which is 33 against ours. */
  padding-top: clamp(16px, 1.7vw, 24px);
  text-align: left;
}

.odx-benefits__text p {
  margin: 0;
  font-size: var(--odx-t-22);
  font-weight: 300;
  line-height: 1.4;
  color: var(--odx-ink);
}

.odx-benefits__text em { font-style: italic; font-weight: 300; }

@media (max-width: 1200px) {
  .odx-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Row gap is zero for the subgrid, so the card rows are spaced here. */
  .odx-benefits__card { margin-bottom: 16px; }
  /* The forced break in two-word titles is for the four-up row, where it
     keeps every title on the same number of lines. Once the cards are
     wide it only splits "durable income" for no reason, so it wraps when
     it needs to (client review 2026-10-22). */
  .odx-benefits__title br { display: none; }
}

@media (max-width: 480px) {
  .odx-benefits__grid { grid-template-columns: 1fr; }
  .odx-benefits__card { padding: 28px 24px; }
  .odx-benefits__text { padding-top: 16px; }
  /* One per row: there is nothing left to align to. */
  .odx-benefits__title--lead { min-height: 0; }
}