.s_nexus_lms_roles { background: var(--surface); padding: 6rem 0; }
.s_nexus_lms_roles_container { max-width: var(--container-7xl, 80rem);  margin: 0 auto; padding: 0 1.5rem;}
.s_nexus_lms_roles_kicker { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--accent); }
.s_nexus_lms_roles_title { margin: .75rem 0 0; font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.1; color: var(--ink); max-width: 44rem; }
.s_nexus_lms_roles_grid { margin-top: 3rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(4, minmax(0,1fr)); }
.s_nexus_lms_role_card { border: 1px solid var(--border); border-radius: 1rem; background: var(--card); padding: 1.75rem; }
.s_nexus_lms_role_icon_wrap { width: 2.75rem; height: 2.75rem; border-radius: .75rem; display: grid; place-items: center; background: var(--gradient-accent); color: var(--accent-foreground); }
.s_nexus_lms_role_icon { width: 1.2rem; height: 1.2rem; }
.s_nexus_lms_role_title { margin: 1rem 0 0; font-family: var(--font-display); font-size: 1.125rem; color: var(--ink); }
.s_nexus_lms_role_desc { margin: .5rem 0 0; font-size: .925rem; line-height: 1.6; color: var(--muted-foreground); }
@media (max-width: 991.98px) { .s_nexus_lms_roles_grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 767.98px) { .s_nexus_lms_roles { padding: 4.5rem 0; } .s_nexus_lms_roles_grid { grid-template-columns: 1fr; } }