:root {
	--dark-blue: #031B33;
	--light-blue: #8BB9E6;
	--orange: #F28A25;
	--dim-orange: #D97C21;
	--white: #f8f8f8;
	--light-gray: #f2f4f6;
}

* {
	box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
article,
figure {
	margin: 0;
	padding: 0;
}

html {
	font-family: sans-serif;
	font-size: 17px;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
}

p,
li {
	line-height: 1.5;
}

img {
	max-width: 100%;
}

.error {
	color: #880000;
}

/*** Buy Now Button ***/

.buyNow {
	display: inline-block;
}

button,
.purchasesLink a {
	font-size: 1.1em;
	font-weight: bold;
	-webkit-appearance: none;
	text-decoration: none;
	color: var(--white);
	background-color: var(--dim-orange);
	border-radius: .5em;
	border: none;
	border-bottom: solid 2px;
	padding: .65em 1.25em;
}

button:hover,
.purchasesLink a:hover {
	background-color: var(--orange);
}

button:active,
.purchasesLink a:active {
	border-bottom: solid 2px transparent;
	transform: translateY(2px); 
}

/*** Sections ***/

section .content {
	margin: 0 auto;
	grid-gap: 2rem;
	padding: 2em;
}

/* Compact */
@media screen and (max-width: 900px) {
	
	section .content {
		max-width: 70ch;
	}
	
}

/* Normal */
@media screen and (min-width: 900px) {
	
	section .content {
		max-width: 100ch;
	}
	
}

section .content h2 {
	font-size: 2.25rem;
}

section .content h3 {
	font-size: 1.75rem;
	margin: 1rem 0;
}

section .content h4 {
	font-size: 1.5rem;
}

section .content h5 {
	font-size: 1.25rem;
}

section .content h6 {
	font-size: 1.15rem;
}

/*** Header ***/

header {
	color: var(--white);
	background-color: var(--dark-blue);
	padding: 1.75rem 2rem;
}

header h1 {
	font-size: 1.25rem;
	line-height: .5;
	font-weight: normal;
}

header h1 a {
	display: inline-grid;
	grid-template-columns: auto auto;
	grid-gap: .75rem;
	justify-items: center;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

header h1 a:hover {
	text-decoration: underline;
}

header h1 a img {
	width: 50px;
	height: 50px;
	border-radius: 75px;
}

/*** Discount ***/

section.discount {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	color: var(--white);
	background-color: var(--dim-orange);
	background-image: linear-gradient(to bottom, #ff9529, #a6590d);
	text-align: center;
	z-index: 100;
}

section.discount .content {
	max-width: 70ch;
	padding-top: .25rem;
	padding-bottom: .25rem;
}

/*** Intro ***/

section.intro {
	color: var(--white);
	background-color: var(--dark-blue);	
}

section.intro .content figure { grid-area: figure; }
section.intro .content h2 { grid-area: heading; }
section.intro .content .info { grid-area: info; }
section.intro .content .buyNow { grid-area: buy; }

section.intro .content {
	display: grid;
}

/* Compact */
@media screen and (max-width: 900px) {
	
	section.intro .content {
		grid-template-areas: 
			"heading"
			"figure"
			"info"
			"buy";
		grid-gap: 0;
	}
	
	section.intro .content h2 {
		font-size: 2.25em;
	}
	
	section.intro .content figure {
		margin: 2em 0;
	}
	
	section.intro .content figure img {
		width: 100%;
		max-width: 400px;
	}
	
	section.intro .content .buyNow {
		display: block;
		text-align: center;
	}
	
}

/* Normal */
@media screen and (min-width: 900px) {
	
	section.intro .content {
		grid-template-areas:
			"heading figure"
			"info figure"
			"buy figure";
		grid-template-columns: 1.75fr 1fr;
		padding: 2rem 2rem 6rem;
	}
	
	section.intro .content h2 {
		font-size: 3em;
	}
	
	section.intro .content .buyNow {
		margin: 0;
	}
	
}

section.intro .content h2 {
	justify-self: center;
	align-self: end;
}

section.intro .content .info {
	color: #bed0ff;
}

section.intro .content figure {
	align-self: center;
	text-align: center;
	perspective: 1000px;
}

section.intro .content figure img {
	transform: scale(1) rotate3d(.5, -1, .25, 25deg);
	box-shadow: black 2rem 2rem 3rem -2rem;
}

/*** Benefits ***/

section.benefit .content figure { grid-area: figure; }
section.benefit .content article { grid-area: article; }

section.benefit:nth-child(odd) {
	background-color: var(--light-gray);
}

section.benefit .content {
	display: grid;
	align-items: center;
}

section.benefit .content figure {
	justify-self: center;
}

section.benefit .content figure p {
	font-size: 8rem;
	line-height: 0;
}

/* Compact */
@media screen and (max-width: 900px) {
	
	section.benefit .content {
		grid-template-areas:
			"figure"
			"article";
	}
	
}

/* Normal */
@media screen and (min-width: 900px) {
	
	section.benefit .content {
		grid-template-areas: "figure article";
		grid-template-columns: 1fr 2.5fr;		
	}
	
	section.benefit:nth-child(odd) .content {
		grid-template-areas: "article figure";
		grid-template-columns: 2.5fr 1fr;
	}
	
}

/*** Buy Section ***/

section.buy {
	color: var(--white);
	background-color: var(--dark-blue);
	overflow: hidden;
}

section.buy .content article { grid-area: article; }
section.buy .content figure { grid-area: figure; }

section.buy .content {
	display: grid;
}

section.buy .content article p.buyNow {
	display: block;
	margin: 2em 0 1em;
	text-align: center;
}

section.buy .content figure {
	perspective: 1000px;
	position: relative;
}

section.buy .content figure img {
	box-shadow: black 2rem 2rem 3rem -2rem;
	position: absolute;
}

/* Compact */
@media screen and (max-width: 900px) {
	
	section.buy .content {
		grid-template-areas:
			"article"
			"figure";
	}
	
	section.buy .content figure {
		height: 30vw;
	}
	
	section.buy .content figure img {
		transform: translate(-2rem, -3rem) scale(1) rotate3d(1, -1, 0, 45deg);
		box-shadow: black 2rem 2rem 3rem -2rem;
		position: absolute;
	}
		
}

/* Normal */
@media screen and (min-width: 900px) {
	
	section.buy .content {
		grid-template-areas: "figure article";
		grid-template-columns: 1fr 1fr;
	}
	
	section.buy .content figure img {
		transform: translate(-4rem, -3.5rem) scale(1.2) rotate3d(1, -1, 0, 45deg);
	}
		
}

/*** Bio ***/

section.bio .content {
	display: grid;
}

section.bio .content figure  {
	text-align: center;
}

section.bio .content figure img {
	max-width: 180px;
	border-radius: 180px;
}

/* Compact */
@media screen and (max-width: 900px) {
	
	section.bio .content {
		grid-template-areas: 
			"figure"
			"article";
	}
	
}

/* Normal */
@media screen and (min-width: 900px) {
	
	section.bio .content {
		grid-template-areas: "figure article";
		grid-template-columns: 1fr 2.5fr;
		align-items: center;
	}
	
}

/*** Checkout Success ***/

section.checkoutSuccess .content {
	max-width: 70ch;
}

section.checkoutSuccess .content h3,
section.checkoutSuccess .content .purchasesLink {
	text-align: center;
}

section.checkoutSuccess .content .purchasesLink {
	margin: 2rem 0;
	white-space: pre;
}

section.checkoutSuccess .content .note {
	opacity: .65;
}

/*** Purchases ***/

section.purchases .content {
	max-width: 70ch;
}

section.purchases .error {
	margin: 1em 0;
}

section.purchases .error::before {
	content: '❌ ';
}

section.purchases.access {
	text-align: center;
}

section.purchases input {
	-webkit-appearance: none;
	font-size: inherit;
	border: none;
	border-radius: .5em;
	background-color: var(--light-gray);
	padding: .5em .75em;
	width: 65%;
}

section.purchases ul,
section.purchases ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}

section.purchases ul.products > li {
	background-color: var(--light-gray);
	border-radius: 1rem;
	margin: 1rem 0;
	padding: 2rem;
}

section.purchases ul.products li .title {
	margin-top: 0;
}

section.purchases ul.products li h4 {
	font-size: 1em;
	opacity: .5;
	margin: .5em 0;
}

section.purchases ul.products li ul.downloads li::before {
	content: '📄 ';
}

section.purchases ul.products li ul.downloads li a {
	text-decoration: none;
	font-weight: bold;
}

section.purchases ul.products li ul.downloads li a:hover {
	text-decoration: underline;
}

section.purchases ul.products li ul.downloads li .filesize {
	opacity: .5;
	font-size: .75em;
}

/*** Privacy ***/

section.privacy .content {
	max-width: 70ch;
}

/*** Consulting ***/

section.consulting .content {
	max-width: 70ch;
}

/*** Footer ***/

footer {
	color: var(--white);
	background-color: var(--dark-blue);
	text-align: center;
	padding: 2rem;
}

footer ul,
footer li {
	list-style: none;
	margin: 0;
	padding: 0;
}

footer nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

footer nav ul li {
	display: inline-block;
	margin: .5rem 1rem;
}

footer nav ul li a {
	color: inherit;
	text-decoration: none;
}

footer nav ul li a:hover {
	text-decoration: underline;
}

footer p {
	margin-top: 2rem;
	font-size: .75em;
	opacity: .75;
}