/*
  statementGroup — a set of short statements, each a title with one sentence right under it
  (component.json statementGroup, 6 tokens, component v0.37.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.
*/

.statement-group {
  display: grid;
  gap: var(--statement-group-gap-all); /* 32px, rows and columns */
}
@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);
}