.roles-band {
  padding: 90px clamp(20px, 6vw, 104px);
  background: #0e1311;
  border-top: 1px solid var(--line);
}

.role-grid {
  max-width: 1280px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.role-grid article {
  padding: 34px;
  border-right: 1px solid var(--line);
}

.role-grid article:first-child { padding-left: 0; }
.role-grid article:last-child { padding-right: 0; border-right: 0; }
.role-code { color: var(--accent); font: 700 11px ui-monospace, monospace; }
.role-grid h3 { margin: 25px 0 10px; font-size: 22px; }
.role-grid p { margin: 0 0 22px; color: var(--muted); }
.role-grid ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: #c9d2ce; }
.role-grid li { padding-left: 14px; border-left: 2px solid var(--line); }

@media (max-width: 980px) {
  .role-grid { grid-template-columns: 1fr; }
  .role-grid article,
  .role-grid article:first-child,
  .role-grid article:last-child { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .role-grid article:last-child { border-bottom: 0; }
}

@media (max-width: 680px) {
  .roles-band { padding: 64px 20px; }
}