/* =========================================================
   Component — Check list

   A short list of what something includes. The tick is drawn from
   two borders on a pseudo-element, so it inherits colour and needs
   no icon file.
   ========================================================= */
.checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-6) var(--space-8);
}
.checks__item {
  position: relative;
  padding-inline-start: var(--space-8);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text-secondary);
}
.checks__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.25em;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--color-growth-soft);
}
.checks__item::after {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: 0.55em;
  width: 6px;
  height: 3px;
  border-left: 1.7px solid var(--color-growth);
  border-bottom: 1.7px solid var(--color-growth);
  rotate: -45deg;
}