* {
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-kerning: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-align: inherit;
	color: inherit;
	text-transform: inherit;
	text-decoration: none;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	border-collapse: collapse;
	overflow: visible;
	/* outline: 1px dashed red; */
}
html {
	--red: #FF5454;
	--yellow: #FFE731;
	--blue: #00A8FF;
	--black: #000;
	--white: #FFF;
	--off-black: #222123;
	--off-white: #FAFAFA;
	--warm-black: #332728;
	--warm-white: #F0EEEB;
	--light-gray: #ECECEC;
	
	font-family: 'Manifold Sans', 'Courier', monospace;
	font-style: normal;
	font-weight: 300;
	font-kerning: normal;
	line-height: 1;
	text-align: center;
	color: var(--black);
	background-color: var(--red);
	-webkit-text-size-adjust: 100%;
	text-rendering: geometricPrecision;
}

html::before {
	content: 'XXS';
	position: fixed;
	z-index: 2;
	top: 0;
	right: 2vw;
	color: var(--black);
	opacity: 0.5;
	display: none;
}

html.debug * {outline: 1px dashed rgba(0,0,0,0.5);}
html.debug::before {display: block;}



body {}
a {text-decoration: underline;}

a:hover,
a:active,
footer .newsletter-signup a:hover,
footer .newsletter-signup a:active {
	color: var(--red);
}
footer a:hover,
footer a:active,
nav a:hover,
nav a:active {
	color: var(--white);
}

h1,
h3,
.info,
#intro,
.store-modal__container__container /* Fontdue */ {
	font-family: 'Manifold Serif', 'Manifold Sans', 'Courier', monospace !important;
	font-style: italic;
	font-weight: 300;
	font-variant-numeric: oldstyle-nums;
}
h1 {
	margin-right: 0.6rem;
	margin-bottom: 0.5rem;
}
label {
	white-space: nowrap;
}
header label {margin-right: 0.6em;}
label:last-child {margin-right: 0;}
/* .home::before {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	background-image: url('/assets/images/HEX-logo-black.svg');
	background-size: 2rem 2rem;
	content: '';
	vertical-align: middle;
	margin: -0.5rem 0.5rem -0.5rem 0;
} */

.home img {
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	vertical-align: middle;
	margin: -0.5rem 0.25rem -0.5rem -0.125rem;
	padding: 0;
}

h1 a {
	text-decoration: none;
	color: var(--red);
}
.home, h2, .info strong {
	font-family: 'Manifold Sans', 'Courier', monospace;
	text-transform: uppercase;
	font-weight: 500;
	font-style: normal;
}
h2 {
	margin-bottom: 4%;
}
h2 a:link {
	/* text-decoration: none; */
}
h3 {
}

nav {
	background-color: var(--red);
	background-color: var(--blue);
	background-color: var(--yellow);
	text-align: left;
	padding: calc(1% + 0.5em) 2vw;
	/* margin: 2vw 2vw 0; */
}
.controls {
	margin-bottom: 0.5em;
	text-wrap: balance;
	float: right;
}

#intro {
	background-color: var(--yellow);
}
main {
	color: var(--red);
	color: var(--blue);
	margin: 2% 2% 0;
	background-color: var(--white);
}
#home main {
	background: none;
}
header {
	line-height: 1.75;
	top: 0;
	text-align: left;
}
body#home header {
	text-align: center;
}
body#home h1 {
	display: none;
}
header::after {
	content: '';
	display: table;
	clear: both;
}
header img {
	width: 100%;
	max-width: 20em;
	padding: 2vw 2vw 0;
}
footer img {
	width: 100%;
	max-width: 5em;
	margin-top: 1%;
	margin-bottom: 1em;
}
#sticky-header {
	color: var(--blue);
	background-color: var(--yellow);
	padding: calc(1% + 0.5em) 0 1%;
	z-index: 2;
	position: -webkit-sticky;
	position: sticky;
}
#sticky-header.not-sticky {
	position: static;
}

.full-width #sticky-header,
.full-width article {
	padding-left: 3vw;
	padding-right: 3vw;
}
.full-width article {
	padding-top: 3vw;
	padding-bottom: 4vw;
}

img {
	max-width: 100%;
}
p,
ul.bulleted,
.store-modal__license-selection__license-button {
	font-family: 'Manifold Serif', 'Manifold Sans', 'Courier', monospace;
	line-height: 1.125;
	text-transform: none;
	text-align: left;
}
p, ul {
	max-width: 72ex;
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
	/* letter-spacing: 0.008em; */
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}
p + p,
ul.bulleted + p {
	margin-top: 1em;
}
ul.bulleted {
	padding-left: 0.95em;
}
ul.bulleted li::before {
	content: '— ';
}
ul.bulleted li {
	text-indent: -0.95em;
	margin-top: 0.5em;
}

i, cite, em {
	font-style: italic;
}
.info cite, .info i, figcaption cite { font-style: normal;}
.info strong {
	font-style: normal;
	font-weight: 500;
}
small {
	color: var(--warm-black);
	font-family: 'Manifold Sans', 'Courier', monospace;
	font-style: normal;
}

figure {
	color: var(--black);
	text-rendering: optimizeLegibility;
}
figure + figure {
	margin-top: calc(1% + 1rem);
}
/*
table {
	width: 100%;
	margin-left: -2%;
	margin-right: -2%;
}
td, th {
	width: 50%;
	padding: calc(1% + 0.25em) 2%;
}
thead {
	vertical-align: bottom;
}
*/
article,
#intro,
#sticky-header,
footer .newsletter-signup {
	padding-left: 4%;
	padding-right: 4%;
}
article, #intro {
	padding-top: 6%;
	padding-bottom: calc(6% + 1em);
}
article {
	background-color: var(--white);
	overflow: hidden;
}
#home header + article,
article + article {
	margin-top: 2.5%;
}
figcaption, th {
	font-family: 'Lupino Sans', 'Manifold Sans', 'Andale Mono', Courier, monospace;
	font-style: normal;
	font-weight: 400;
	font-size: 1rem;
	font-family: 'Manifold Serif', 'Courier', monospace;
	font-style: italic;
	font-weight: 300;
	/* font-size: 1.125rem; */
	text-transform: none;
	letter-spacing: normal;
	text-align: center;
	color: var(--blue);
	margin-bottom: 0.75em;
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}
footer {
/* 	text-transform: uppercase; */
	color: var(--white);
	margin-top: 3em;
	margin-bottom: 2em;
	text-align: center;
}
footer ul {
}
footer li + li {
	margin-top: 0.5em;
}
.copyright {
	margin-top: 2em;
}
.copyright img {animation: rotating 60s linear infinite;}
@-webkit-keyframes rotating {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
#intro,
footer .newsletter-signup {
	color: var(--black);
	margin-bottom: 2rem;
}
#intro {
	margin-left: 2vw;
	margin-right: 2vw;
	/* padding-top: 5%; */
	padding-bottom: 6%;
	margin-top: 2%;
	box-sizing: content-box;
}
* + .info {
	margin-top: calc(2% + 1rem);
}
.licensing {
	color: var(--red);
}
.big-button,
a.get-it,
button.buy-button,
.store-modal__review-confirm__button {
	text-decoration: none;
	display: inline-block;
	text-align: center;
	width: 100%;
}
.big-button,
a.get-it,
button.buy-button,
button.buy-button:hover {
	color: var(--white);
	background-color: var(--red);
	margin-top: 2em;
	padding: 1em;
	border-radius: 0.75em;
	border-style: solid;
	border-width: 0 0 0.25em 0.25em;
	border-color: var(--blue);
}
p:first-child .button {
	margin-top: 0;
}
a.get-it strong::after {content:' ⟶';}

.big-button:hover,
a.get-it:hover,
button.buy-button:hover {
	--offset: 1px;
	border-width: 0 0 calc(0.25em - var(--offset)) calc(0.25em - var(--offset));
	position: relative;
	top: var(--offset);
	width: calc(100% - var(--offset));
	margin-bottom: var(--offset);
	cursor: pointer;
}
.big-button:active,
a.get-it:active,
button.buy-button:active {
	--offset: 2px;
	/* background-color: var(--blue); */
}

footer .newsletter-signup {
	background-color: var(--yellow);
	margin-left: auto;
	margin-right: auto;
	max-width: 96vw;
}
.newsletter-signup .banner {
	width:100%;
	max-width:100%;
}
footer .newsletter-signup {
	color: var(--black);
	padding-top: 1rem;
	padding-bottom: 1.25rem;
}
#newsletter footer .newsletter-signup {
	display: none;
}
.newsletter-signup form {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}
form + * {
	margin-top: 3rem;
}
.newsletter-interaction {
	margin-top: 0.5rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	align-items: center;
}
/* input[type="email"], */
#bd-email {
	border: 1px solid var(--blue) !important;
	background-color: var(--off-white);
	color: var(--black);
	text-align: left;
	padding: 0.5rem 0.5rem 0.75rem;
	margin: 0.5rem 0;
	/* border-radius: 0.5rem; */
	flex-grow: 1;
}
input[type="email"]:focus {
	border-color: var(--blue);
}
.big-button {
	margin-top: 0;
	max-width: 8rem;
}
footer .big-button {
	/* color: var(--red); */
	background-color: var(--blue);
	border-color: var(--black);
}



.sample {
	white-space: nowrap;
	overflow: visible;
}
.columns {
	column-width: 22em;
	grid-column-gap: 1em;
	column-gap: 1em;
}
.columns p {
	max-width: none;
/*
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
*/
}
.flow {word-break: break-all;}
.sorts {
	line-height: 1.2;
	word-break: break-all;
}
* + .sorts {
	margin-top: calc(2vw + 1rem);
}
.sorts span {
	white-space: nowrap;
	display: inline-block;
}
[contenteditable='true']:focus {
	outline: none;
}

.center {text-align: center;}
.reverse {
	background-color: var(--black);
	padding: calc(2% + 0.5rem);
	margin-left: -2%;
	margin-right: -2%;
	border-radius: 0.5rem;;
}
.reverse .sample,
.reverse figure {
	color: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.sticky-wrapper {
}
.is-sticky #sticky-header {
/* 	border-bottom: 1px solid var(--black); */
}
.is-sticky h1 {
	display: none;
}


.XXS {font-size: 0.75rem; line-height: 1.45;}
.XS {font-size: 0.875rem; line-height: 1.4;}
.S {font-size: 1.25rem; line-height: 1.2;}
.M {font-size: 1.75rem; line-height: 1.1;}
.L {font-size: 2.75rem;}
.XL {font-size: 3.75rem;}
.XXL {font-size: 4.75rem;}
.XXXL {font-size: 6rem;}
.XXXXL {font-size: 8rem;}
.XXXXXL {font-size: 12rem;}

.M, .L, .XL, .XXL, .XXXL, .XXXXL, .XXXXXL,
.store-modal__style-button__aa,
.store-modal__index-item__aa,
.store-modal__index-item__name,
.store-modal__family-button__name {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.variable-target {}

input[type=range] {
	-webkit-appearance: none;
	/* margin: 10px 0; */
	vertical-align: middle;
	background-color: transparent;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
	background: rgba(128, 128, 128, 0.5);
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px rgba(13, 13, 13, 0.5);
	border: 1.8px solid rgba(0, 0, 0, 0.51);
	height: 26px;
	width: 26px;
	border-radius: 15px;
	background: var(--white);
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -11px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
	background: rgba(192, 192, 192, 0.5);
}
input[type=range]::-moz-range-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
	background: rgba(128, 128, 128, 0.5);
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0);
}
input[type=range]::-moz-range-thumb {
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px rgba(13, 13, 13, 0.5);
	border: 1.8px solid rgba(0, 0, 0, 0.51);
	height: 26px;
	width: 26px;
	border-radius: 15px;
	background: var(--white);
	cursor: pointer;
}
input[type=range]::-ms-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
}
input[type=range]::-ms-fill-lower {
	background: rgba(64, 64, 64, 0.5);
	border: 1px solid rgba(0, 0, 0, 0);
	border-radius: 6px;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
	background: rgba(128, 128, 128, 0.5);
	border: 1px solid rgba(0, 0, 0, 0);
	border-radius: 6px;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px rgba(13, 13, 13, 0.5);
	border: 1.8px solid rgba(0, 0, 0, 0.51);
	height: 26px;
	width: 26px;
	border-radius: 15px;
	background: var(--white);
	cursor: pointer;
	height: 6px;
}
input[type=range]:focus::-ms-fill-lower {
	background: rgba(128, 128, 128, 0.5);
}
input[type=range]:focus::-ms-fill-upper {
	background: rgba(192, 192, 192, 0.5);
}



@media (min-width: 20em) {
	:root::before {content: 'XS';}
}
@media (min-width: 30em) {
	:root::before {content: 'S';}
	article, #intro, #sticky-header {
		padding-left: 8%;
		padding-right: 8%;
	}
	h1 {
		float: left;
	}
	.is-sticky h1 {
		display: inline-block;
	}
	header form {
		float: right;
	}
	p, ul {
		line-height: 1.25;
		word-break: normal;
		-webkit-hyphens: none;
		-moz-hyphens: none;
		hyphens: none;
	}
	.reverse {
		padding: 4%;
		margin-left: -4%;
		margin-right: -4%;
	}
	.S {font-size: 1.5rem;}
	.M {font-size: 2rem;}
}
@media (min-width: 48em) {
	:root::before {content: 'M';}
	article, #sticky-header {
		/* padding-left: 10%;
		padding-right: 10%; */
	}
	#intro {
		max-width: calc(36rem + 4%);
		padding: 2.5% 3% 3%;
		margin-left: auto;
		margin-right: auto;
	}
	.reverse {
		padding: 5%;
		margin-left: -5%;
		margin-right: -5%;
	}
/* 	.XXS {font-size: 0.875rem;} */
	#home .XS, .XS {font-size: 1rem;}
	#home .S, .S {font-size: 1.75rem;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	#home .M, .M {font-size: 2.75rem;}
	#home .L, .L {font-size: 4rem;}
	#home .XL, .XL {font-size: 6rem;}
	#home .XXL, .XXL {font-size: 8rem;}
	#home .XXXL, .XXXL {font-size: 12rem;}
	#home .XXXXL, .XXXXL {font-size: 16rem;}
	#home .XXXXXL, .XXXXXL {font-size: 20rem;}
}
@media (min-width: 64em) {
	:root::before {content: 'L';}
	/* .splitter {
		margin-left: -2%;
		margin-right: -2%;
		font-family: 'Fallback';
	}
	.split-half {
		display: inline-block;
		width: 50%;
		padding-left: 2%;
		padding-right: 2%;
		margin-top: 0;
		vertical-align: top;
	} */
	
	.splitter {
		-webkit-columns: 2;
		-moz-columns: 2;
		columns: 2;
	}
/*	.split-half {
		margin-top: 0;
	}*/
}
@media (min-width: 80em) {
	:root::before {content: 'XL';}
	/* 	.XXS {font-size: 1rem;} */
	
	.XS {font-size: 1.125rem;}
	.S {font-size: 2rem;}
	.M {font-size: 3rem;}
	.L {font-size: 5rem;}
	.XL {font-size: 8rem;}
	.XXL {font-size: 12rem;}
	.XXXL {font-size: 16rem;}
	.XXXXL {font-size: 20rem;}
	.XXXXXL {font-size: 24rem;}
	
}
@media (min-width: 96em) {
	:root::before {content: 'XXL';}
}
@media (min-width: 120em) {
	:root::before {content: 'XXXL';}
}



#home > main {
	gap: 2%;
	column-width: 27rem;
	column-count: 4;
	margin: 2% 2% 0;
}
/* @supports (grid-template-rows: masonry) {
	#home > main {
		columns: unset;
		display: grid;
		grid-template-rows: masonry;
		grid-template-columns: repeat(auto-fill, minmax(27rem, 1fr));
	}
} */
#home > main > article {
	width: 100%;
	display: inline-block;
	break-inside: avoid;
	margin-top: 0;
	margin-bottom: 2vw;
}
.splitter {
	grid-column-gap: 4%;
	column-gap: 4%;
}
.splitter + .splitter {
	margin-top: calc(1% + 1rem);
}
#home .splitter {
	-webkit-columns: 2 20rem;
	-moz-columns: 2 20rem;
	columns: 2 20rem;
}
.split-half {
	width: 100%;
	/* display: inline-block; */
	break-inside: avoid;
	break-after: always;
/*	margin-top: 0;*/
}

#home article .info p {text-align: center;}


.store-modal__container__container {
	text-align: left;
	--borderRadius: 0.25em;
}
.store-modal__container__container p {
	max-width: 100%;
}
.store-modal__container__container .text-field__input,
.p-Input {
	/* outline: 1px solid var(--black) !important; */
}
.store-modal__license-selection__licenses .store-modal__license-selection__license {
	margin-bottom: 2.5rem;
}
.store-modal__license-selection__license-button .store-modal__license-selection__license-button-label {
	flex-wrap: wrap;
	align-content: flex-start;
}
.store-modal__license-selection__license-button .store-modal__license-selection__license-button-label:after {
	width: 100%;
	display: block;
	padding-top: 1em;
	padding-bottom: 1em;
}
.store-modal__page__container label,
.variable-table-amounts__row {
	white-space: normal;
}
.store-modal__page__body,
.store-modal__page__sticky-footer {
	--StoreModalPageContainer-side-padding: 2%;
}
.store-modal__license-selection__icon-pair {
	align-items: start !important;
}
.store-modal__license-selection__license-button:nth-of-type(1) .store-modal__license-selection__license-button-label:after {
	/* content: 'This license allows for standard usage based on the number of desktop font users and the combined number of monthly website and app users.'; */
}
.store-modal__license-selection__license-button:nth-of-type(2) .store-modal__license-selection__license-button-label:after {
	/* content: 'This license allows for broader usage based on the size of your organization, with unlimited desktop font users, website and app users, e-book titles, and broadcast media permissions.'; */
}
.store-modal__license-selection__license-label {
	border: 1px solid var(--black) !important;
	margin: 0.25rem !important;
}
.cart-item__license-name {
	grid-column-start: 1;
	grid-column-end: -1;
}

.store-modal__page__sticky-footer button,
.store-modal__cart__checkout button,
.checkout-modal__button,
.store-modal__review-confirm__button,
.empty-cart__container button {
	text-align: center !important;
	color: var(--white) !important;
	background-color: var(--blue) !important;
	margin-top: 2em !important;
	padding: 1em !important;
	border-radius: 0.75em !important;
	border-style: solid !important;
	border-width: 0 0 0.25em 0.25em !important;
	border-color: var(--black) !important;
}
.store-modal__review-confirm__container {
	display: block !important;
}
#eula-agreement {
	background-color: var(--white);
}