/* About — editorial 3-column block.
 *
 * Reuses the verbatim mission / what-we-do / coverage copy from
 * `about_qlean_screen.dart` in the mobile app so the public-site
 * narrative matches the app's own About screen. */

.about__head {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-block-end: clamp(48px, 7vw, 88px);
  padding-block-end: clamp(40px, 6vw, 64px);
  border-block-end: 1px solid var(--line);
}
.about__title {
  margin-block-start: var(--sp-4);
  max-width: 16ch;
}
.about__lead {
  color: var(--text-2);
  font-size: var(--fs-lead);
  line-height: 1.7;
  max-width: 56ch;
}

.about__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}

.about-col__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 5px rgba(19, 181, 243, 0.12);
  margin-block-end: var(--sp-4);
}
.about-col h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-1);
  margin-block-end: var(--sp-3);
}
.about-col p {
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.75;
}
.about-col__rule {
  width: 28px;
  height: 1px;
  background: var(--line-strong);
  margin-block-start: var(--sp-4);
}