/*
  statementGroup — a set of short statements, each a title with one sentence right under it
  (component.json statementGroup, 7 tokens, component v0.40.0; build-site-changes-2026-10.txt item 14,
  Vivek 2026-10-20). First use: the homepage How I work.
  Title: 31.25px, weight 600, ink.900 (typography.heading.statement). Sentence: 20px regular body text,
  ink.800, 4px below its title, so the two read as one unit.
  From 768px up: two columns in the section's wide column (900px), read across then down; below 768px,
  one column. 32px between statements, rows and columns alike: equal on purpose, so the eye reads
  across the rows (if the columns sat further apart than the rows, it would read down the columns).
  No numbers: the statements are a story, not a strict sequence.
  The section header stays in the HTML for screen readers but is visually hidden (.visually-hidden):
  a set of headline statements needs no label. Each title is a real heading, one level below it.
  Titles balance their lines (the first one breaks evenly into two), as approved on the mock.
  32px above and below the statements (paddingVertical, Vivek 2026-10-21, item 16), on top of the section's
  own padding: with no visible header, the statements need their own room; the section padding stays one rule.
*/

.statement-group {
  display: grid;
  gap: var(--statement-group-gap-all); /* 32px, rows and columns */
  padding-block: var(--statement-group-padding-vertical-all); /* 32px above and below */
}
@media (width >= 768px) {
  .statement-group {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* two equal columns; minmax(0, ...) so long words can't widen one */
  }
}

.statement-group__title {
  font-family: var(--statement-group-title-text-style-all-font-family);
  font-size: var(--statement-group-title-text-style-all-font-size);
  font-weight: var(--statement-group-title-text-style-all-font-weight);
  line-height: var(--statement-group-title-text-style-all-line-height);
  color: var(--statement-group-title-content-all);
  text-wrap: balance;
}

.statement-group__body {
  margin-block-start: var(--statement-group-title-gap-all); /* 4px */
  font-family: var(--statement-group-body-text-style-all-font-family);
  font-size: var(--statement-group-body-text-style-all-font-size);
  font-weight: var(--statement-group-body-text-style-all-font-weight);
  line-height: var(--statement-group-body-text-style-all-line-height);
  color: var(--statement-group-body-content-all);
}