/* /about: the front page's band with the company's facts on a card beside the words, then its
   two-column sections, closer together than the front page's because each is short. */
.about { --hang: 0px; }
.about .hero-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
/* A step under the front page's, so each half of the heading fits on one line beside the card. */
.about .hero h1 { font-size: clamp(2.4rem, 1.1rem + 2.6vw, 3.5rem); }
@media (max-width: 1040px) {
  .about .hero-in { grid-template-columns: minmax(0, 1fr); }
  .about .hero h1 br { display: none; }
}

/* The entrance's stagger, here rather than in style attributes (open-work S3). */
.about .hero h1 { --d: 40ms; }
.about .hero-lead { --d: 120ms; }
.about .facts { --d: 200ms; }

.facts { padding: clamp(20px, 2.5vw, 32px); }
.facts .brand { font-size: 1.375rem; }
.facts dl { margin: 16px 0 0; border-bottom: 1px solid var(--line); }
.facts dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.facts a { color: var(--ink); }

.about .how { padding-block: var(--bay-md); }
.about .how + .how { padding-top: 0; }

.promises { max-width: 62ch; margin: 0; padding: 0; list-style: none; font-size: var(--t-lead); border-bottom: 1px solid var(--line); }
.promises li { padding: 18px 0; border-top: 1px solid var(--line); text-wrap: pretty; }