body {
	margin:0px;
	font-family: var(--font-body);
	font-size:1em;
	line-height:1.5em;
	color:var(--color-font);
	background:var(--color-medium);
	}
	
a { 
	position:relative;
	color:var(--color-black);
	text-decoration:none;
	transition:.5s;
	cursor:pointer;
	}
	
	a:hover {
		color:var(--color-logo);
		}
		
p {
	margin-bottom:var(--margin-s);
	}

ul {
	margin-bottom:var(--margin-s);
	}
	
	div.layout ul {
		margin-left:var(--margin-m);
		}
	
h2 { /* Page Title */
	font-family:var(--font-logo);
	font-weight:900;
	color:var(--color-logo);
	font-size:28px;
	margin-bottom:var(--margin-m);
	}
	
h3 { /* Section Title */
	font-family: var(--font-logo);
	font-weight:900;
	font-size:18px;
	color:var(--color-blue);
	margin:var(--margin-m) 0px var(--margin-s) 0px;
	padding:0;
	}
	

/* Layout - 1200px centered */
div.layout {
	padding:var(--page-margin);
	padding-top:120px;
	margin:0px auto;
	width:100vw;
    z-index:1;
    max-width:1200px;
    background-color:var(--color-very-light);
	}
	
	body.home div.layout {
		padding-top:0px;
		}
   	
	@media (max-width: 800px) {
		div.layout {
			}
		}


/* Video */
div.video {
	width:100%;
	height:auto;
	border:1px solid var(--color-light);
	overflow:hidden;
	}
	
	
/* Content Blocks */
div.block {
	position:relative;
	width:100%;
	border-radius:var(--radius-tight);
	min-height:var(--button-height); 
	}	
	
	/* Blurbs are small blocks with internal padding and background color - callouts, CTA's, etc.) */
	div.block.blurb {
		font-size:16px;
		line-height:20px;
		color:black;
		font-weight:500;    
		padding:var(--margin-m);
		display: flex;
		align-items: center; /* Vertically center the items */
		gap:var(--margin-m);
		background-color:var(--color-light);
		}
		
		div.block.blurb p {
			display:inline-block;
			flex:1;
			margin: 0; /* Remove default margin */
			}
		
		div.block.blurb a.button,
		div.block.blurb select {
			display:inline-block;
			flex-shrink: 0; /* Prevent shrinking below 250px */
			}
		
		div.block.blurb.benefits a.button {
			background-color:var(--color-orange);
			}
		
		@media (max-width: 600px) {
			
			div.block.blurb {
				display:block;
				}
				
				div.block.blurb p {
					display:block;
					width:100%;
					opacity:60%;
					}
				
				div.block.blurb a.button,
				div.block.blurb select {
					display:block;
					width:100%;
					margin-bottom:var(--margin-s);
					}
			}

/* Benefits Page */
/* Benefits Page - Benefit Selection - Select Menu Blurb */
div.benefit_selection {
	min-height:calc(var(--button-height) + (var(--margin-m) *2));
	}

	div.benefit_selection select {
		height:var(--button-height);
		border:2px solid var(--color-orange);
		background-color:white;
		box-shadow:3px 3px 3px rgb(0,0,0,.3);
		border-radius:var(--radius-tight);
		font-weight:500;
		font-size:16px;
		width: 250px;
		}
		
		div.benefit_selection p span {
			font-weight:600;
			}

/* Benefits Page - Content Section */
div.benefits_section {
	opacity: 0;
	transition: opacity 0.5s ease;
	display: none;
	width:66%;
	max-width:800px;
	float:left;
	}

	div.benefits_section.active {
		display: block;
		opacity: 1;
		}

	div.benefits_callout {
		font-size:20px;
		line-height:26px;
		border-top:1px solid var(--color-medium);
		border-bottom:1px solid var(--color-medium);
		padding:var(--margin-m);
		margin-top:var(--margin-m);
		margin-bottom:var(--margin-m);
		font-weight:600;
		}
	
	.benefits_list li {
		margin-bottom:var(--margin-s);
		}
		
	@media (max-width: 800px) {
	
		div.benefits_section {
			width:100%;
			}
		}

/* Benefits Page - Right Side Image */
div.benefits_image {
	float:left;
	width:calc(33% - var(--margin-l));
	margin-left:var(--margin-l);
	margin-top:21px;
	border-radius:var(--radius-tight);
	height:400px;
	background-color:var(--color-medium);
	background-size:100% auto;
	background-position:center center;
	background-image:url('/images/benefits_default.jpg');
	}

@media (max-width: 800px) {
	
	div.benefits_image {
		display:none;
		}
	}
		
	
	

/* Example Section - Home Page */
@keyframes examples_zoom {
    0% {
    transform:scale(100%) translateY(0%);
    }
    50% {
    transform:scale(85%) translateY(-2%);
    } 
    100% {
    transform:scale(100%) translateY(0%);
    }
}
        
div.example {
	position:relative;
	width:100%;
	height:300px;
	border-radius:var(--radius-tight);
	overflow:hidden;
	background-size:100% 100%;
	background-position:center center;
	margin-top:var(--margin-m);
	}

	div.example img {
		position:absolute;
		top:-20px;
		right:-10px;
		height:800px;
		transform-origin:top right;
		animation:examples_zoom 200s linear;
		}
	
	div.example p {
		position:absolute;
		left:var(--margin-l);
		bottom:var(--margin-l);
		width:calc(100% - 300px);
		color:white;
		text-shadow:var(--shadow);
		font-weight:600;
		font-size:20px;
		line-height:30px;
		}
	
		div.example p span.persona {
			font-weight:300;
			display:block;
			}
		
		div.example p span.til {
			font-size:32px;
			position:relative;
			top:-10px;
			font-weight:400;
			}
			
	div.example_note {
		position:relative;
		text-align:right;
		opacity:.6;
		left:var(--page-margin);
		width:calc(100% - (var(--page-margin) * 2));
		font-size:13px;
		}
		
@media (max-width: 800px) {
	div.example {
		height:600px;
		background-size:auto 100%;
		}
		
	div.example img {
		top:40px;
		right:-80px;
		height:800px;
		}
		
	div.example p { 
		font-size:22px;
		line-height:27px;
		width:calc(100% - 160px);
		text-shadow:0px 0px 2px rgb(0,0,0,1), 0px 0px 5px rgb(0,0,0,1), 0px 0px 10px rgb(0,0,0,1);
    	}
	}
	
	
		
	
	
	
/* Features Page */
div.feature { 
	display: flex;
    align-items: stretch; 
	float:left;	
	margin:var(--margin-l) var(--margin-l) var(--margin-l) 0px;
	padding:0;
	width:100%;
	min-height:160px;
	background-color:rgb(255,255,255,1),rgb(255,255,255,0);
    background: linear-gradient(0deg, rgb(255,255,255,0),rgb(255,255,255,1));
	border-radius:var(--radius-tight);
	}
	
	
	div.feature_image {
   	 	flex: 0 0 25vw; /* Base width is 25vw */
		width:25vw;
		overflow:hidden;
		max-height:200px;
		max-width:200px;
		border-radius:var(--radius-tight);
		}
	
	
	div.feature_image.screenshot {
   	 	flex: 0 0 30vw; /* Base width is 25vw */
		width:30vw;
		overflow:hidden;
		max-height:250px;
		max-width:250px;
		perspective: 800px; /* Creates a sense of depth */
		display: inline-block; /* Ensures transform works properly */
		filter:brightness(90%) contrast(120%);
		border:1px solid var(--color-light);
		background-color:var(--color-very-light);
		}
		
		div.feature_image img {
			position:absolute;
			width:100%;
			height:auto;
			top:50%;
			transform:translateY(-50%);
			}
		
		div.feature_image.screenshot img {
			top:-15px;
			left:-25px;
			width:150%;
			transform: rotateY(30deg); /* Tilts left side forward */
			transform-origin: center left;
			transition: transform 0.5s ease; /* Smooth transition */
			}
		
	div.feature_content {
    	flex: 1; /* Takes up the remaining space */
		min-width: 0; /* Prevents content overflow issues */
		padding:var(--margin-m);
		}
		
		div.feature_content h3 {
			margin:0;
			padding:0px var(--margin-m);
			margin-bottom:var(--margin-s);
			width:75%;
			}
			
		div.feature_content p {
			font-size:16px;
			line-height:20px;
			padding:0px var(--margin-m);
			}
			
			div.feature_content p.bold {
				font-weight:600;
				border-bottom:1px solid var(--color-light);
				padding-bottom:var(--margin-s);
				}
			
			div.feature_content p.bold.orange {
				background-color:none;
				background:none !important;
				color:var(--color-orange);
				border-bottom:none;
				padding-bottom:0px;
				border-top:1px solid var(--color-light);
				padding-top:var(--margin-s);
				}
			
		div.feature:nth-child(even){
			flex-direction:row-reverse;
			}

@media (min-width: 1200px) {
	
		div.why div.feature {
			max-width:calc(50% - var(--margin-l));
			}
			
		div.why div.feature:nth-child(3),
		div.why div.feature:nth-child(4),
		div.why div.feature:nth-child(7),
		div.why div.feature:nth-child(8){
			flex-direction: row-reverse;
			}
		
		div.why div.feature:nth-child(1),
		div.why div.feature:nth-child(2),
		div.why div.feature:nth-child(5),
		div.why div.feature:nth-child(6){
			flex-direction: inherit;
			}
		
		}
		
	

/* Boxes */
div.boxes {
	background:white;
	width:100%;
	left:0px;
    height:auto;
    border-radius:var(--radius-tight);
	box-shadow:var(--shadow);
	top:-30px;
	z-index:3000;
	}
		
	div.box {
		width:33%;
		height:auto;
		float:left;
		margin:var(--margin-m) 0px;
		padding:var(--margin-s) var(--margin-m);
	    border-right:1px solid var(--color-light);
	    text-align: center;
		}
		
		div.box h3 {
			height:50px;
			display:block;
			line-height:22px;
			position:relative;
			margin:0px;
			vertical-align:bottom;
			}
			
		div.box div.box_icon {
			text-align:center;
			height:32px;
			border-top:1px solid var(--color-medium);
			margin-top:8px;
			z-index:-1;
			}
		
		div.box_icon svg {
			height:32px;
			width:32px;
			padding:5px;
			position:relative;
			top:-18px;
			background:white;
			fill:var(--color-blue)
			}
			
		div.box:nth-child(3) {
	    	border:none !important;
			}
		
@media (max-width: 800px) {
	
	div.box {
			width:calc(100% - (var(--margin-m) * 2));
			border-right:none;
			border-bottom:1px solid var(--color-light);
			margin:0px var(--margin-m);
			padding:var(--margin-l) 0px;
			}
		}
		
/* FAQ */
div.faq h4 {
	color: var(--color-purple);
	margin-top:var(--margin-l);
	font-weight:700;
	border-bottom:var(--divider-light);
	margin-bottom:var(--margin-xs);
	}
	
	div.faq h3 {
		color: var(--color-orange);
		position:relative;
		margin-bottom:var(--margin-xs);
		padding-bottom:var(--margin-xs);
		top:40px;
		}






div.profile_edit_options {
	height:var(--margin-m);
	margin-bottom:var(--margin-l);
	width:100%;
	position:absolute;
	top:-15px;
	right:70px;
	}
	
	div.profile_edit_options div.profile_edit_options_group {
		display:inline-block;
		height:var(--margin-l);
		margin-left:var(--margin-l);
		width:intrinsic;
		float:right;
		}
		
		div.profile_edit_options div.profile_edit_options_group span {
			width:100%;
			display:block;
			position:absolute;
			top:0px;
			border-bottom:1px solid var(--color-very-light);
			text-transform:uppercase;
			text-align:center;
			font-size:10px;
			line-height:10px;
			font-weight:500;
			color:var(--color-dark);
			}
	
	div.profile_edit_options button {
		display:inline-block;
		height:var(--margin-m);
		line-height:var(--margin-m);
		font-size:11px;
		padding:0px var(--margin-s) 0px var(--margin-s);
		margin-right:var(--margin-s);
		min-width:var(--button-height);
		position:relative;
		top:-12px;
		background-color:var(--color-dark) !important;
	}
	
		div.profile_edit_options button:hover {
			background-color:var(--color-green) !important;
			filter:brightness(100%) saturate(100%) !important;
			}
	
	div.profile_edit_options button:last-child{
		margin:0px;
	}


.free_submit {
	width:100%;
	padding:var(--margin-m) 0px;
	border-top:1px solid var(--color-light);
	margin-top:var(--margin-m);
	}
	
	.free_submit button,
	.free_submit a {
		float:right;
	}