.role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.role-grid > div {
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 1px solid rgba(235, 183, 72, 0.18);
  border-radius: 13px;
  background: #110d0a;
}

.role-grid strong {
  color: #f0c45f;
  font-size: 16px;
}

.role-grid span {
  color: #c7baad;
  font-size: 14px;
  line-height: 1.75;
}

.role-grid small {
  color: #83776d;
  font-size: 11px;
  line-height: 1.6;
}

.source-note {
  padding: 18px;
  border-left: 3px solid #d9a63e;
  border-radius: 0 10px 10px 0;
  background: #110d0a;
}

@media (max-width: 680px) {
  .role-grid {
    grid-template-columns: 1fr;
  }
}