/* -------------------------------------------------
	THANK YOU FOR THE AWESOME CSS RESET, ERIC MEYER!
	http://meyerweb.com/eric/tools/css/reset/ 
	v2.0 | 20110126
	License: none (public domain)
------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; }
body {
	line-height: 1; }
ol, ul {
	list-style: none; }
blockquote, q {
	quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none; }
table {
	border-collapse: collapse;
	border-spacing: 0; }
* {
	box-sizing: border-box; }

/* ==========================================================================
	VARIABLES
========================================================================== */

:root {
	--c-lightblue: #4197d4; 
	--c-blue: #3272a1;
	--c-dark: #333;
	--c-purple: #72659e;
	--c-white: #fff;
	--c-light-orange: rgba(255,183,0,1);
	--c-dark-orange: rgba(210,61,0,1);
	--g-red-purple: linear-gradient(345deg, rgba(93,18,117,1) 0%, rgba(204,43,94,1) 100%);
	--g-orange-red: linear-gradient(0deg, var(--c-dark-orange) 0%, var(--c-light-orange) 100%);
	--g-blue: linear-gradient(357deg, rgba(46,134,197,1) 0%, rgba(118,200,236,1) 100%);
	--g-light-grey: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%);
	--g-light-blue: linear-gradient(0deg, rgba(255,255,255,1) 1%, rgba(210,234,243,1) 100%);
	--g-purple: linear-gradient(345deg, rgba(93,18,117,1) 0%, rgba(93,18,117,0) 100%);
	--bd-purple: 5px solid var(--c-purple);
	--bg-topcurve: url(/-/img/top-curve.svg) center -1px no-repeat;
	
	--gutter-wide: 5vw;
	--gutter-narrow: 2.5vw;
}

@font-face {
	font-family: 'ArgentCF';
	src: url(../fonts/ArgentCF-Regular.woff2) format('woff2'),
	     url(../fonts/ArgentCF-Regular.woff) format('woff');
}

/* ==========================================================================
	TYPOGRAPHY
========================================================================== */

html {
	font-size: 120%;
	font-size: calc(100% + 0.25vw); }
body {
	font-family: "Avenir Next",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif; }
h1, h2, h3, h4, h5, h6, .prime, blockquote {
	font-family: 'ArgentCF',Georgia,Garamond,serif; }
h2 {
	font-size: 3rem;
	line-height: 1;
	margin-bottom: 0.5em; }
h3 {
	font-size: 2.4rem;
	line-height: 1.25;
	margin-bottom: 0.625em; }
h4 {
	font-size: 1.8rem;
	line-height: 1.6667;
	margin-bottom: 0.833em; }
h5, .prime {
	font-size: 1.2rem;
	line-height: 1.25;
	margin-bottom: 1.25em; }
h6 {
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 1.5em; }
p, ul, ol, blockquote {
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 1.5em; }
strong, b {
	font-weight: bold; }
em, i {
	font-style: italic; }
a {
	transition: all 0.3s ease-in-out; }
img {
	height: auto;
	width: 100%; }
.prime {
	opacity: 0.75; }
.muted {
	font-size: 0.8rem;
	opacity: 0.67; }
.sr-only {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px; }

/* ==========================================================================
	LAYOUT
========================================================================== */

header {
	background: var(--c-white);
	border-top: var(--bd-purple);
	box-shadow: 0 5px 0 rgba(0,0,0,0.15);
	position: relative; }
a.home {
	color: transparent;
	text-decoration: none; }
h1 {
	background: url(/-/img/logo.png) center center no-repeat;
	background-size: contain;
	height: 3.4em;
	margin: 0.5em;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	width: 13.4em; }
nav ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0; }
nav ul a {
	color: var(--c-blue);
	display: block;
	line-height: 4.5em;
	padding: 0 1vw;
	text-align: center;
	text-decoration: none;
	transition: none; }
nav ul a:hover, nav ul a:focus {
	background: var(--c-lightblue);
	color: var(--c-white); }
.action {
	background: rgb(210,61,0);
	background: var(--g-orange-red);
	color: var(--c-white);
	font-weight: bold; }
.action:hover, .action:focus {
	background: var(--c-dark-orange); }
section, footer {
	padding: var(--gutter-wide); }
.hero {
	background: rgb(93,18,117);
	background: url(/-/img/bottom-curve.svg) center calc(100% + 2px) no-repeat,
		var(--g-red-purple);
	background-size: 103%, 100%;
	color: #fff;
	padding-bottom: calc(var(--gutter-wide) + 6.25vw); }
.hero h2 {
	margin-bottom: 0.25em; }
section > h3 {
	text-align: center; }
.checklist li {
	padding: 0 0 0 2em; }
.checklist li:before {
	background-image: url(/-/img/checkbox.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	display: block;
	height: 1.4em;
	float: left;
	margin: 2px 0 0 -2em;
	width: 1.4em; }
.features, .morefeatures, .breakdown, .about, .touchpoints, .examples, .stats, .comic, .tool-list {
	padding-top: calc(var(--gutter-wide) + 6.25vw); }
.features, .about, .examples, .comic {
	background: var(--bg-topcurve), var(--g-light-blue);
	background-size: 103%, 100%; }
.morefeatures, .breakdown, .touchpoints, .stats, .tool-list {
	background: var(--bg-topcurve), var(--g-light-grey);
	background-size: 103%, 100%; }
.morefeatures img {
	height: auto;
	max-width: 128px;
	width: 60%; }
.features > h3, .about > h3, .examples > h3 {
	color: #3272a1; }
.contents ul a, .tools a, .tools .current {
	border-radius: 0.6em;
	color: var(--c-dark);
	display: block;
	padding: 0.5em;
	text-decoration: none; }
.contents ul a:hover, .contents ul a:focus, .contents ul a[aria-selected="true"] {
	background: hsla(205,69%,83%,0.5); }
.tools {
	margin-bottom: 0; }
.tools a {
	height: 100%;
	transition: all 0.25s ease-in-out; }
.tools a:hover, .tools a:focus, .tools .current {
	background: rgba(255,255,255,0.75);
	box-shadow: 0 3px 6px rgba(0,0,0,0.1);
	color: var(--c-purple); }
.tools .current {
	border: 1px solid var(--c-purple);
	overflow: hidden;
	padding-top: 1.5em;
	position: relative; }
.tools .current:before {
	background: var(--c-purple);
	color: var(--c-white);
	content: 'You are here.';
	display: block;
	font-size: 0.8em;
	font-weight: bold;
	left: 0;
	line-height: 2;
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%; }
.contents ul img {
	display: block;
	float: left;
	margin-right: 0.5em;
	height: 5em;
	width: 5em; }
.contents ul a:after {
	clear: both;
	content: '';
	display: table; }
.contents ul h5 {
	margin-top: 0.5em; }
.showcase {
	height: 40vw;
	margin: 0 0 1.5em;
	position: relative;
	width: 100%; }
.showcase img {
	box-shadow: 2px 4px 16px rgba(0,0,0,0.25);
	height: auto;
	position: absolute;
	transition: transform 0.25s ease-in-out;
	width: 50%;
	-webkit-backface-visibility: hidden; /* anti-aliasing fix */
	-webkit-background-clip:padding-box; /* IOS fix */
	background-clip:padding-box; }
.showcase a {
	display: block;
	height: 40vw; }
.showcase a img:hover {
	transform: scale(1.1) translateY(-1em);
	z-index: 10; }
.showcase a:focus {
	background: rgba(255,255,255,0.5);
	border-radius: 0.6em; }
.persona-card-f, .landscape {
	transform: rotate(-4deg);
	top: 1vw;
	left: 1vw;
	z-index: 3; }
.persona-card-b, .portrait {
	bottom: 1vw;
	right: 1vw;
	transform: rotate(6deg);
	z-index: 2; }
.showcase .landscape {
	width: 60%; }
.showcase .wide {
	width: 75%;
	z-index: 1; }
.showcase .portrait {
	width: 45%; }
.previews .checklist li {
	margin-bottom: 0.75em; }
.hero p, .contents ul h5, .contents ul p, .personas, .personas h5, .personas p,
.purchase h3, .purchase h4, .purchase p, .tools h5 {
	margin-bottom: 0; }
.purchase > p {
	color: #fff;
	margin: 0 0 1.5em;
	text-align: center; }
.personas li, .tools li {
	text-align: center; }
.personas img, .tools img {
	margin: 0 auto;
	padding: 0 1.5em; }
.personas img {
	border-bottom: 1px solid rgba(0,0,0,0.1);
	width: 75%; }
.tools img {
	width: 90%; }
.morefeatures, .touchpoints, .examples {
	text-align: center; }
.morefeatures h5, .touchpoints h5, .examples h5 {
	margin-bottom: 0; }
.purchase {
	background: rgb(46,134,197);
	background: var(--bg-topcurve), var(--g-blue);
	background-size: 103%, 100%;
	overflow: hidden;
	padding-bottom: 0;
	padding-top: calc(var(--gutter-wide) + 6.25vw); }
.purchase h3 {
	color: #fff;
	text-shadow: 0 1px 10px rgba(46,134,197,0.67); }
.prices > div {
	background: rgba(255,255,255,0.67);
	border-top: var(--bd-purple);
	box-shadow: 0 1px 6px rgba(46,134,197,0.5);
	margin-top: 1.5em;
	padding: 0.75em;
	text-align: center; }
.prices .preferred {
	background: rgba(255,255,255,0.9); }
.prices div div {
	margin-top: 0.75em; }
.prices div div:before {
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	display: block;
	margin: 0 auto;
	padding-top: 35%;
	width: 80%; }
.solo div:before {
	background-image: url(/-/img/solo.png); }
.band div:before {
	background-image: url(/-/img/band.png); }
.symphony div:before {
	background-image: url(/-/img/symphony.png); }
.prices .button {
	margin-top: 0; }
.sample {
	position: relative; }
.sample a, .notes li:before {
	display: block;
	font-size: calc(80% + 1vw);
	font-weight: bold;
	line-height: 1.75em; }
.sample a {
	background: var(--g-purple), rgba(204,43,94,1);
	border: 0.125em solid rgba(255,255,255,0.67);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);
	color: #fff;
	height: 2em;
	margin: -1em 0 0 -1em;
	position: absolute;
	text-align: center;
	text-decoration: none;
	transition: all 0.25s ease-in-out;
	width: 2em; }
.sample a:hover, .sample a:focus {
	background: rgba(204,43,94,1);
	border: 0.125em solid rgba(255,255,255,1);
	box-shadow: 0 6px 18px rgba(0,0,0,0.5);
	transform: translateY(-4px); }
.stats {
	text-align: center; }
.stats strong {
	display: block;
	font-size: 3rem;
	line-height: 1; }
body {
	counter-reset: note-number; }
.notes li {
	border: 1px solid transparent;
	counter-increment: note-number;
	margin-bottom: 0.75em;
	padding: 0.5em;
	transition: all 0.25s ease-in-out; }
.notes li:before {
	background: var(--g-red-purple);
	color: var(--c-purple);
	content: counter(note-number);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; }
.notes li h5, .notes li p {
	margin-bottom: 0; }
.notes .highlight {
	background: var(--c-white);
	border-color: rgba(0,0,0,0.05);
	border-radius: 0.75em;
	box-shadow: 0 3px 6px rgba(0,0,0,0.1);
	transform: scale(1.1); }
.centered {
	text-align: center; }
.centered > div {
	margin: 0 auto;
	max-width: 48em; }
footer {
	background: rgb(34,35,36);
	background: var(--bg-topcurve),
		linear-gradient(0deg, rgba(34,35,36,1) 0%, rgba(51,53,55,1) 100%);
	background-size: 103%, 100%;
	color: #fff;
	padding-top: calc(var(--gutter-wide) + 6.25vw); }
footer a, .meta p {
	font-size: 0.8rem;
	text-decoration: none; }
footer a:link, footer a:visited {
	color: #fff; }
.meta, .meta a:link, .meta a:visited {
	color: #999; }
footer a:hover, footer a:focus, .meta a:hover, .meta a:focus {
	color: var(--c-light-orange); }
footer a:active, .meta a:active {
	color: var(--c-dark-orange);
	position: relative;
	top: 1px; }
.meta :focus {
	opacity: 1; }
.meta img {
	height: auto;
	width: 6em; }

/* ==========================================================================
	BUTTONS
========================================================================== */

.button {
	border-radius: 0.25em;
	box-shadow: 0 0 0 rgba(0,0,0,0);
	display: inline-block;
	font-weight: bold;
	line-height: 1.5em;
	margin: 0 0.75em 1.5em 0;
	padding: 0.75em;
	text-decoration: none;
	transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
.button:hover, .button:focus {
	box-shadow: 0 3px 12px rgba(0,0,0,0.33);
	transform: translateY(-5px); }
.button:active {
	box-shadow: 0 0 6px rgba(0,0,0,0.165);
	transform: translateY(-1px); }
.primary {
	background: var(--g-orange-red);
	color: #fff;
	text-shadow: rgba(210,61,0,1); }
.primary:hover, .primary:focus {
	background: var(--c-dark-orange); }
.primary:active {
	background: rgba(158,44,0,1); }
.secondary {
	background: rgba(65,151,212,0);
	border: 2px solid var(--c-lightblue);
	color: var(--c-blue);
	transition: all 0.15s ease-in-out; }
.secondary:hover, .secondary:focus {
	background: rgba(65,151,212,1);
	border-color: transparent;
	color: #fff; }
.secondary:active {
	background: rgba(30,70,99,1);
	border-color: transparent; }
.extended {
	display: block; }
.centered {
	margin: 0 auto; }

/* ==========================================================================
	GRID FALLBACKS
========================================================================== */

header > *, .two-col > *, .three-col > *, .personas > *, .prices > *,
.breakdown > *, footer > *, .four-col > *, .tools > * {
	float: left; }
header:after, .two-col:after, .three-col:after, .personas:after, .prices:after,
.breakdown:after, footer:after, .four-col:after, .tools:after {
	clear: both;
	content: '';
	display: table; }
header > h3, section > h3 {
	float: none;
	text-align: center; }
@media screen and (max-width: 39.95em) {
	footer .links > *, .tools > * {
		float: left;
		width: 48%; }
	footer .links > :nth-child(odd), .tools > :nth-child(odd) {
		margin-right: 4%;
	}
}

/* ==========================================================================
	@SUPPORTS
========================================================================== */

@supports (display: grid) {
	header, .two-col, .three-col, .personas, .prices, .breakdown, footer, .four-col, .tools {
		display: grid; }
	.personas, .tools {
		grid-template-columns: repeat( auto-fit , minmax(200px, 1fr) ); }
	.breakdown > h3 {
		grid-area: title; }
	.notes1 {
		grid-area: notes1; }
	.sample {
		grid-area: sample; }
	.notes2 {
		grid-area: notes2; }
	.breakdown, .personas, .four-col, .tools {
		grid-gap: var(--gutter-narrow); }
	header:after, .two-col:after, .three-col:after, .personas:after, .prices:after,
	.breakdown:after, footer:after, .four-col:after, .tools:after {
		display: none; }
	@media screen and (max-width: 39.95em) {
		.two-col, .three-col {
			grid-template-columns: 1fr; }
		footer .links, .tools {
			display: grid;
			grid-column-gap: var(--gutter-narrow);
			grid-template-columns: 1fr 1fr; }
		footer .links > *, .tools > * {
			width: auto; }
		.breakdown {
			grid-template-areas:
					"title"
					"sample"
					"notes1"
					"notes2"; }
	}
	@media screen and (min-width: 40em) {
		header {
			grid-template-columns: 200px 1fr; }
		.two-col, .three-col {
			grid-gap: var(--gutter-narrow);
			grid-template-columns: 1fr 1fr; }
		.two-col > h3, .three-col > h3 {
			grid-column: 1 / span 2; }
		.features {
			grid-template-columns: 1fr 1fr; }
		.prices {
			grid-template-columns: repeat(3, 1fr); }
		.breakdown {
			grid-template-areas:
					"title  title"
					"notes1 sample"
					"notes2 notes2";
			grid-template-columns: 1fr 2fr; }
		.notes li {
			text-align: center; }
		.notes {
			display: grid;
			grid-column-gap: var(--gutter-narrow);
			grid-template-columns: repeat(auto-fit , minmax(150px, 1fr)); }
		footer {
			grid-column-gap: var(--gutter-narrow);
			grid-template-columns: 2fr 1fr; }
	}
	@media screen and (max-width: 49.95em) {
		.four-col {
			grid-template-columns: 1fr 1fr; }
		.four-col > h3 {
			grid-column: 1 / span 2; }
	}
	@media screen and (min-width: 50em) {
		.features {
			grid-template-columns: minmax(375px,0.5fr) 1fr; }
		.three-col {
			grid-template-columns: repeat(3, 1fr); }
		.three-col > h3 {
			grid-column: 1 / span 3; }
		.prices {
			grid-column-gap: var(--gutter-narrow); }
		.breakdown {
			grid-template-areas:
					"title  title"
					"notes1 sample"
					"notes2 sample"; }
		.four-col {
			grid-template-columns: repeat(4, 1fr); }
		.four-col > h3 {
			grid-column: 1 / span 4; }
	}
	@media screen and (min-width: 61.75em) {
		.personas, .tools {
			grid-column-gap: calc(var(--gutter-narrow) / 2);
			grid-template-columns: repeat(6, 1fr); }
		.previews ul {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: var(--gutter-narrow); }
		.breakdown {
			grid-template-areas:
					"title  title  title"
					"notes1 sample notes2";
			grid-template-columns: 1fr 2fr 1fr; }
		footer {
			grid-template-columns: 3fr 1fr; }
	}
}

/* ==========================================================================
	MEDIA QUERIES
========================================================================== */

@media screen and (max-width: 39.95em) {
	h2 {
		font-size: 2.5rem; }
	h3 {
		font-size: 2.0rem; }
	header h1 {
		margin: 2em auto; }
	nav {
		border-top: 1px solid rgba(0,0,0,0.2); }
	nav li { 
		flex-grow: 1; }
	.personas li, .morefeatures div, .touchpoints div {
		text-align: left; }
	.personas img {
		border: none;
		float: left;
		height: auto;
		margin: 0 0.5em 0.75em 0;
		padding: 0;
		width: 10vw; }
	.morefeatures img, .touchpoints img {
		float: left;
		height: auto;
		margin: 0 0.5em 0.5em 0;
		width: 16vw; }
	.touchpoints img {
		width: 24vw; }
	.personas li:after, .morefeatures div:after, .touchpoints div:after {
		clear: both;
		content: '';
		display: table; }
	#persona-cards .showcase {
		height: 60vw; }
	.showcase .portrait {
		width: 35%; }
	.notes li {
		padding-left: 2.5em;
		position: relative; }
	.notes li:before {
		font-size: 2em;
		left: 0;
		position: absolute;
		top: 0; }
	.comic img {
		margin-bottom: 0.75em; }
	footer .meta {
		text-align: center; }
}

@media screen and (min-width: 40em) {
	nav ul {
		justify-content: flex-end; }
	nav ul a {
		padding: 0 2.5vw; }
	section div > :last-child {
		margin-bottom: 0; }
	.prices .preferred {
		margin-top: 0; }
	.prices .preferred div {
		margin-top: 2.25em; }
	.links li {
		display: inline-block; }
	.links li:first-child {
		display: block; }
	.links li a {
		margin-right: 1em; }
}

@media screen and (min-width: 40em) and (max-width: 50em) {
	.contents li {
		margin-bottom: 0.25em; }
	.contents ul a {
		padding: 0.25em; }
	.contents ul img {
		height: 3em;
		margin: 0.5em 0.5em 0.5em 0;
		width: 3em; }
	.contents ul h5 {
		margin-top: 0; }
	.prices > div:nth-child(2) {
		z-index: 4; }
}

@media screen and (min-width: 61.75em) {
	.notes2 {
		display: flex; }
	.notes2 .notes {
		align-self: flex-end; }
}