Need unique page background color

I have a problem that’s driving me nuts.

(1) I’m designing a simple test website on the local host using the Vantage theme. There’s a Home page and 3-4 other pages. I need to have a unique page background color for just 1 page. The rest will have the same color.

(2) Here’s how I proceeded.

(a) I used the Siteorigin CSS editor to set the background color of all pages to a gradient color.
The code is
#main.site-main {
background-color: #bfdef2;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #bfdef2 , #F8FFAE 85%);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #bfdef2 , #F8FFAE 85%);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

(b) I then opened one of the pages and set its background color to lilac. I clicked on the Customize button. I selected Theme design -> Page -> Page background. I then selected a lilac color with hex code #c2a1e2, and saved the change. But nothing happened. The Home page and all other pages continued to have the gradient color set in the Siteorigin CSS editor.

(c) However, the moment I deleted this code from the CSS editor, and saved the change, all page backgrounds got set with the lilac color.

So, the CSS edito setting overrode the Customize setting.

(3) But what I need is (a) an individual color like lilac for just 1 page and (b) a gradient color for all other pages.
How do I get this ?

I know the solution must be pretty simple but I’m just starting out !

Please help!