/* Ported from the reference build by tools/port/css.mjs. Do not edit; edit the generator or override in assets/css/theme/. */
.roles[data-c-p-a-about] {
  gap: var(--s-4);
  display: grid;
}
.roles__label[data-c-p-a-about] {
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  font-size: 0.7rem;
}
.roles__list[data-c-p-a-about] {
  border-top: 1px solid var(--line-strong);
  display: grid;
}
.role[data-c-p-a-about] {
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line-strong);
  grid-template-columns: 44px 1fr;
  display: grid;
}
.role__chip[data-c-p-a-about] {
  background: var(--c);
  width: 44px;
  height: 44px;
  font-size: 0.78rem;
  font-weight: var(--fw-medium);
  color: var(--ink);
  border-radius: 14px;
  place-items: center;
  display: grid;
}
.role--lead[data-c-p-a-about] .role__chip[data-c-p-a-about] {
  background: var(--ink);
  color: var(--lime);
}
.role__text[data-c-p-a-about] {
  display: grid;
}
.role__name[data-c-p-a-about] {
  font-weight: var(--fw-medium);
}
.role__focus[data-c-p-a-about],
.roles__note[data-c-p-a-about] {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.values__grid[data-c-p-a-about] {
  gap: var(--s-8) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  margin-top: var(--head-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}
.value[data-c-p-a-about] {
  align-content: start;
  gap: var(--s-2);
  padding-top: var(--s-6);
  border-top: 2px solid var(--ink);
  display: grid;
}
.value__n[data-c-p-a-about] {
  color: var(--cobalt);
  font-size: 0.75rem;
}
.value__title[data-c-p-a-about] {
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
}
.value__body[data-c-p-a-about] {
  color: var(--muted);
  font-size: var(--fs-sm);
}
@media (width<=1000px) {
  .values__grid[data-c-p-a-about] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width<=560px) {
  .values__grid[data-c-p-a-about] {
    grid-template-columns: minmax(0, 1fr);
  }
}