:root[class*="jpc"],
:root[class*="jpo"],
:root[class*="jcm"],
:root[class*="jfc"],
:root[class*="jpy"] {
	--body-font:
		"Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	--heading-font:
		"proxima-nova", system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
		sans-serif;

	--color-primary: 247 164 3;
	--color-secondary: 190 10 255; /* #bd0aff */
	--color-tertiary: 249 249 249; /* #f9f9f9 */
	--color-custom: 255 255 255;

	--primary-hs: 39.59 97.6%;
	--secondary-hs: 284 100%;
	--tertiary-hs: 0 0%;

	--secondary-200: 282 100% 78%; /* #dd8dff */
	--secondary-100: 282 100% 87%; /* #ecbeff */
	--secondary-500: 270 100% 50%; /* #7e00ff */
	--secondary-900: 270 100% 12%; /* #7e00ff */
	/* --secondary-950 already #110017 */

	--tertiary-900: 0 0% 16%; /* #2a2a2a*/
	--tertiary-700: 0 0% 31%; /* #505050*/
	--tertiary-400: 120 0% 59%; /* #979897*/
	--tertiary-300: 0 0% 71%; /* #b5b5b5*/

	/* ---------Brand button--------- */

	--btn-shadow: 0 0 11px #ffe13e, 0 0 10px #2d2809, 0 0 11px #ffe13e inset;
	--text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
	--hover-filter: brightness(110%);

	--btn-bg-2: rgb(var(--color-secondary));
	--btn-text-color-2: rgb(var(--color-tertiary));

	--multistep-color-border: rgb(var(--color-secondary));
	--multistep-color-tab: #eeeef4;
	--multistep-color-tab-active: #ffffff;
	--multistep-color-success: rgb(var(--color-primary));
	--multistep-color-danger: rgb(var(--color-secondary));
	--multistep-color-tab-active-text: #000000;
	--multistep-color-tab-text: #767676;
	--multistep-radius: 0.4em;
	--multistep-shadow: 0.25em 0.25em 1em 0 rgb(0 0 0 / 10%);
}
html[class*="jpc"],
html[class*="jpo"],
html[class*="jcm"],
html[class*="jpy"] {
	.cta-btn {
		font-weight: 700;
	}
	.custom-cta {
		color: hsl(var(--secondary-950));
		&.cta-secondary {
			background-color: var(--btn-bg-2);
			color: var(--btn-text-color-2)
		}
	}
}