/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 * cs.css
 * =========================================================================
 *
 * Table of Contents
 * -----------------
 *
 * + Hero
 * + Savings/Financial
 * + Quote Block
 * + Final CTA
 * + 
 * + Shame (Should always be the last item in stylesheet)
 *
 * Read more:
 * - http://www.sitepoint.com/architecture-sass-project/
 * - https://css-tricks.com/sass-style-guide/
 *
 * @TODO: Update TOC as necessary.
 *
 * @BUG:
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/*-General Styles----------------------------------------------------------*/
:root {
	--purple-light: #C04CFF;
	--purple-dark:	#310E6E;
	--purple-hqy:	#4F2984;
	--primary-black: #310E6E;
}
body {
	background: radial-gradient(circle,rgba(68, 18, 158, 0.13) 0%, rgba(255, 255, 255, 1) 100%);
}
/*-Desktop----------------------------*/
@media (min-width: 992px) {
	section { padding: 6.25rem; }
	section#savings-financial, section#quote { padding-bottom: 0; }
}
/*-Mobile----------------------------*/
@media (max-width: 575px) {
	.container { padding: 0 1.5rem; }
	.gradient-body {
		background: RGBA(68, 18, 158, 0.13);
		background: radial-gradient(circle,rgba(68, 18, 158, 0.13) 0%, rgba(255, 255, 255, 1) 100%);
		background-size: 200% 300%;
	}
}
/*----------------------------------------------------------General Styles-*/

/*-Nav---------------------------------------------------------------------*/
.navbar { background: linear-gradient(284deg, rgba(57, 67, 134, 0.12) -7.81%, rgba(255, 255, 255, 0.42) 81.31%); }
.navbar-logo {
	width: 154px;
	height: 26px;
}

.navbar .btn-purple { display: none; }
/*-Desktop----------------------------*/
@media (min-width: 576px) {
	.navbar .btn-purple { display: inherit; }
}
/*-Mobile----------------------------*/
@media (max-width: 991px) {
	.navbar { background: linear-gradient(284deg, rgba(57, 67, 134, 0.12) -7.81%, rgba(255, 255, 255, 0.42) 77.33%); }	
}
@media (max-width: 767px) {
	.navbar {
		background: #fff;
		background: linear-gradient(76deg, rgba(255, 255, 255, 0.42) -7.81%, rgba(57, 67, 134, 0.12) 181.31%);
	}
}
/*---------------------------------------------------------------------Nav-*/

/*-Hero--------------------------------------------------------------------*/
#hero { background: linear-gradient(284deg, rgba(57, 67, 134, 0.12) -7.81%, rgba(255, 255, 255, 0.42) 81.31%); }
#hero h1 { color: var(--primary-black, #310E6E); }
.cs-data strong.eyebrow {
	display: block;
	margin: 1.25rem auto;
}
.cs-data .info-row { margin-left: 0; }
.cs-data .info-pod { border-left: solid 1px #B5B5B5; }
.cs-data .info-pod strong {
	color: var(--purple-hqy);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.125rem;
}
.cs-data .info-pod p {
	color: #000;
	margin-bottom: 0;
}
video {
	max-width: 100%;
	height: auto;
	display: block;
}
/*-Desktop----------------------------*/
@media (min-width: 992px) {
	.cs-data .info-pod {
		padding: 1rem 1.75rem 1rem 1.25rem;
	}
}
/*-Mobile----------------------------*/
@media (max-width: 991px) {
	.btn-purple, .cs-data strong.eyebrow,
	.video { margin: 1.25rem auto; }

	.cs-data .info-pod {
		padding: 1rem 1.25rem;
		margin-bottom: 1.25rem;
	}
}
/*--------------------------------------------------------------------Hero-*/

/*-Savings-----------------------------------------------------------------*/
h2 {
	font-size: 3rem;
	font-weight: 500;
}
.savings {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 1.5rem;
}
.financial {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 1.5rem;/*24px*/
	align-self: stretch;
}
.pod {
	background: var(--purple-hqy, #4F2984);
	color: #fff;
	border-radius: 1em;
	padding: 1.8em;
	width: 100%;
}
.pod h3 {
	color: var(--White, #FFF);
	font-style: normal;
	font-weight: 500;
}
/*-Desktop----------------------------*/
@media (min-width: 768px) {
	#savings-financial { position: relative; }
	#savings-financial img.headshot {
		position: absolute;
		z-index: -1;
		bottom: 0;
	}/*
	.pod { font-size: 0.7em; }*/
}
@media (min-width: 992px) {
	.pod { font-size: 1rem; }
	.pod h3 { font-size: 2em; }
	.pod:last-of-type { margin-bottom: 3rem; }
}
@media (min-width: 1400px) {
	.pod { font-size: 1.25rem; }
	.pod h3 { font-size: 4em; }
}
/*-Mobile----------------------------*/
@media (max-width: 1238px) {
	img.headshot.show-desktop { left: 10%; }
}
@media (max-width: 945px) {
	img.headshot.show-desktop { left: 12%; }
}
@media (max-width: 880px) {
	img.headshot.show-desktop { left: 8%; }
}
@media (max-width: 780px) {
	img.headshot.show-desktop { left: 5%; }
}
@media (max-width: 767px) {
	#savings-financial { padding-bottom: 0; }
	#savings-financial .row { gap: 2.8rem; }
	.pod { font-size: 0.7rem; }
}
/*-----------------------------------------------------------------Savings-*/

/*-Quote-------------------------------------------------------------------*/
#quote { padding-top: 0; }
#quote .row {
	position: relative;
	border-radius: 16px;
	background: #E5D8EE;
	background: linear-gradient(111deg, rgba(229, 216, 238, 1) 0%, rgba(199, 182, 223, 1) 100%);
}
#quote p { color: var(--purple-hqy, #4F2984); }
#quote p + p { font-size: 0.8em; }
/*-Desktop----------------------------*/
@media (min-width: 768px) {
	#quote .row { padding: 1.5rem 0 0 3rem; }
	#quote p { font-size: 1.25rem; }
	#quote .col-md-4 { padding: 0; }
}
@media (min-width: 992px) {
	#quote .row { padding: 1.5rem 3rem 0; }
}
/*-Mobile----------------------------*/
@media (max-width: 767px) {
	#quote .row { padding: 3rem 1.75rem 0; }
	#quote p + p { margin-bottom: 0; }
	#quote img.headshot {
		margin-top: -3rem;
		margin-left: 2rem;
	}
}
@media (max-width: 575px) {
	#quote .row { margin: 0 auto; }
}
/*-------------------------------------------------------------------Quote-*/

/*-Final-------------------------------------------------------------------*/
@media (min-width: 768px) and (max-width:991px) {
	#final-cta h2 { font-size: 2.2rem; }
	#final-cta img.reports {
		content: url('../img/device-reports.png');
		margin: -8rem auto auto -2rem;
	}
}
@media (max-width: 575px) {
	#final-cta h2 { font-size: 2rem; }
	#final-cta img.reports {
		content: url('../img/device-reports.png');
		margin-left: -2rem;
	}
}
/*-------------------------------------------------------------------Final-*/


/*-Shame-------------------------------------------------------------------*/
/*-------------------------------------------------------------------Shame-*/