/*
 * Conventions:
 *
 *  - Class names use BEM (https://en.bem.info/methodology/quick-start/) with this syntax:
 *
 *      block_name[-elem_name][--modifier_name[-modifier_value]]
 *
 *  - Descendant combinators are never used unless the parent and descendant selectors are for classes in the same block
 *
 *  - Selectors have either one class name or one element type
 *    - Never both a class name and an element name
 *    - Never more than one class name
 *    - Never an ID selector
 *    - Pseudo-classes are OK
 */

/*
 * TODO:
 *  Probably want some common classes for CTA buttons
 *  homesection is a bit of a mess; it's used on non-home pages and its elements are all over the map
 *  homeproduct is misnamed because it's used for other stuff
 *  use more specific element types than div
 */

html, body {
	background: #fff;
	color: #000;
	font-family: sans-serif;
	margin: 0;
}
html {
	scroll-padding-top: 5rem;
}
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
body > * {
	flex-shrink: 0;
}
body > main {
	flex-grow: 1;
}

/*
 * Misc
 */
a:link, a:visited {
	color: #119;
}
a:hover {
	color: #33F;
}
.legalemphasis {
	text-transform: uppercase;
}
.nobr {
	white-space: nowrap;
}
.shell > span:before {
	content: "$ ";
	color: #666;
}
.shell--root > span:before {
	content: "# ";
}
.shell--windows > span:before {
	content: "C:\\>";
}
.feed_link {
	display: block;
	float: right;
	width: 1.5rem;
}
.feed_link > img {
	width: 100%;
}
.fluff {
	/* Hidden in browsers but read by screen readers */
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
code {
	background: #f0f0f0;
	border-radius: 2px;
	padding: 1px 4px;
}
.pre {
	white-space: pre;
}
.block {
	display: block;
}
code.block {
	padding: 0.3rem 0.5rem;
	border-radius: 4px;
	overflow: auto;
}
pre.code {
	background: #f0f0f0;
	padding: 0.3rem 0.5rem;
	border-radius: 4px;
	overflow: auto;
}

figure {
	background: #F0F0F0;
	display: inline-block;
	padding: 0.8rem 0.4rem;
	text-align: center;
	margin: 1rem 1rem;
}
figure > img {
	margin-bottom: 1rem;
}
figure > figcaption {
	line-height: 140%;
}

.hide_when_disabled:disabled {
	display: none;
}

fieldset:not(.default_style) {
	margin: 0;
	padding: 0;
	border: none;
	min-width: 0;
}


/*
 * .header
 */
.header {
	position: sticky;
	background: white;
	top: 0;
	z-index: 100;
}
.header-title > h1 {
	margin: 0;
}
.header-title > h1 > a > img {
	display: block;
	height: 2.2rem;
}
@media not all and (min-width: 60rem) {
	.header-main {
		padding: 0.5rem 1.0rem 0.5rem 1.0rem;
		box-sizing: border-box;
		max-height: 100vh;
		display: flex;
		flex-direction: column;
	}
	.header-nav {
		display: none;
	}
	.header-main.header-main--show_menu > .header-nav {
		display: block;
	}
	.header-main.header-main--show_menu > .header-title > .header-navtoggle {
		background: black;
		color: white !important;
		text-decoration: underline;
	}
	.header-title {
		display: flex;
		justify-content: space-between;
	}
	.header-title > * {
		display: flex;
		align-items: center;
		align-self: center;
	}
	.header-navtoggle {
		border-radius: 3px;
		border: solid black 1px;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
		padding: 0.4rem 0.5rem;
		font-weight: bold;
		color: black !important;
		text-decoration: none;
	}
	.header-navtoggle:hover {
		text-decoration: underline;
	}
	.header-nav {
		margin-top: 1rem;
		line-height: 200%;
		overflow: auto;
	}
	.header-nav > ul, .header-nav > ul > li {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	.header-dropdown > ul, .header-dropdown > ul > li {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	.header-nav > ul > li > a, .header-dropdown > ul > li > a {
		color: inherit;
		text-decoration: none;
		display: block;
	}
	.header-nav > ul > li:not(.header-item--has_dropdown) > a:hover, .header-dropdown > ul > li > a:hover {
		text-decoration: underline;
	}
	.header-dropdown > ul > li > a {
		padding-left: 1.5rem;
	}
	.header-dropdown > ul > li > a > strong {
		font-weight: normal;
	}
	.header-dropdown > ul > li > a > span {
		display: none;
	}
	.header-signup {
		color: white !important;
	}
	.header-login > a, .header-signup > a {
		border-radius: 3px;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
		padding: 0.4rem 0.5rem;
		font-weight: bold;
		margin-top: 1rem;
		text-align: center;
	}
	.header-login > a {
		border: solid black 1px;
	}
	.header-signup > a {
		background: #0af;
	}
}
@media (min-width: 60rem) {
	.header-main {
		margin: 0 auto;
		padding: 1rem 1.5rem 1rem 1.5rem;
		display: flex;
		justify-content: space-between;
		max-width: 90rem;
	}
	.header.header--fullwidth > .header-main {
		max-width: none;
	}
	.header-main > * {
		align-self: center;
	}
	.header-navtoggle {
		display: none;
	}
	.header-item--has_dropdown::after {
		content: "\25BE";
	}
	.header-nav > ul, .header-nav > ul > li {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: inline;
	}
	.header-nav > ul > li {
		margin-left: 1rem;
		position: relative;
	}
	.header-nav > ul > li:first-child {
		margin-left: 0;
	}
	.header-nav > ul > li > a {
		text-decoration: none;
		color: inherit;
	}
	.header-nav > ul > li > a:hover,
	.header-nav > ul > li > a:active,
	.header-nav > ul > li.header-item--open > a {
		text-decoration: underline;
	}
	.header-dropdown {
		display: none;
		position: absolute;
		top: 100%;
		right: -1rem;
		z-index: 20;
		margin-top: 0.3rem;
		min-width: 15rem;
		background: white;
		border-radius: 3px;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
		box-sizing: border-box;
		padding: 0.3rem 0;
	}
	.header-item--open > .header-dropdown {
		display: block;
	}
	.header-dropdown > ul, .header-dropdown > ul > li {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: inline;
	}
	.header-dropdown > ul > li > a {
		display: block;
		color: inherit;
		text-decoration: none;
		padding: 0.4rem 0.5rem;
	}
	.header-dropdown > ul > li > a:hover {
		background: #eee;
	}
	.header-dropdown > ul > li > a > strong {
		display: block;
	}
	.header-dropdown > ul > li > a > span {
		display: block;
		margin-top: 0.2rem;
	}
	.header-signup {
		color: white !important;
	}
	.header-signup > a {
		background: #0af;
		border-radius: 3px;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
		padding: 0.4rem 0.5rem;
		font-weight: bold;
	}
}

/*
 * .hero
 */
.hero {
	margin: 0 auto;
	padding: 1.5rem 2rem 2.5rem 2rem;
	max-width: 75rem;
	text-align: center;
}
.hero > h2 {
	font-size: 350%;
	font-weight: bold;
	margin: 0 auto;
}
.hero > h2 > strong {
	/*
	color: #040;
	border-bottom: solid #080 7px;
	*/
	color: #058;
	border-bottom: solid #07b 7px;
}
.hero-text {
	font-size: 130%;
	line-height: 160%;
	margin: 2rem 0 0 0;
}
.hero-text > p {
	margin: 0;
}
.hero-text > p + p {
	margin-top: 1rem;
}
.hero-text > p > strong {
	white-space: nowrap;
}
.hero > .apidemo {
	margin: 2rem 0;
}
.hero-cta {
	margin-top: 2rem;
}
.hero-cta > a {
	display: inline-block;
	border-radius: 5px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	padding: 0.6rem 1rem;
	text-decoration: none;
	background: #0af;
	border: solid #0af 1px;
	color: white;
	font-weight: bold;
	font-size: 120%;
}
.hero-cta > a:hover {
	/* TODO: fancier hover style... make button brighter, transition for effect */
	text-decoration: underline;
}
.hero-ctanote {
	margin: 0.75rem 0 0 0;
	color: #555;
}
@media (max-width: 30em) {
	.hero > h2 {
		font-size: 250%;
	}
	.hero-text {
		font-size: 110%;
	}
}

/*
 * .trusted_at
 */
.trusted_at {
	margin: 0 auto;
	padding: 0 2rem 1rem 2rem;
	max-width: 90rem;
	text-align: center;
}
.trusted_at > h2 {
	margin: 0 0 0.6rem 0;
	font-weight: normal;
	font-size: 120%;
	color: #777;
}
.trusted_at-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	min-height: 55px; /* height of tallest logo; prevents vertical reflow when page is loading */
}
.trusted_at-logos > img {
	align-self: center;
	opacity: 70%;
	max-width: 40%;
}

/*
 * .backdrop
 */
.backdrop {
	background: #f6f6f6;
}
.backdrop-border {
	overflow: hidden;
}
.backdrop-top {
	border-top: solid #fff 75px;
	border-right: solid #f6f6f6 100vw;
}
.backdrop-bottom {
	border-bottom: solid #fff 75px;
	border-left: solid #f6f6f6 100vw;
}

/*
 * .homeproduct
 */
.homeproduct {
	margin: 1rem auto 0 auto;
	max-width: 75rem;
	padding: 0 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
}
.homeproduct + .homeproduct {
	margin-top: 3rem;
}
.homeproduct--reverse {
	flex-direction: row-reverse;
	justify-content: flex-end;
}
.homeproduct-img, .homeproduct-term > .terminal {
	box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.15);
	border-radius: 6px;
}
.homeproduct-img {
	flex-grow: 1000;
	flex-basis: 300px;
	overflow: hidden;
	height: 300px;
	border: solid #ccc 1px;
}
.homeproduct-term {
	flex-grow: 1000;
	flex-basis: 35rem;
	min-width: 0;
}
.homeproduct-term > .terminal {
	padding: 0.3rem;
	box-sizing: border-box;
	height: 8rem;
	white-space: nowrap;
	overflow: auto;
	line-height: 130%;
}
.homeproduct-term > .terminal > span {
	display: block;
}
.homeproduct-name {
	margin: 0;
	text-transform: uppercase;
	font-size: 90%;
	color: #222;
}
.homeproduct-text {
	flex-basis: 50%;
	flex-grow: 1;
}
.homeproduct-text > h2 {
	font-size: 150%;
	font-weight: bold;
	margin: 0.5rem 0 1.5rem 0;
	line-height: 150%;
}
.homeproduct-text > h2:first-child {
	margin-top: 0;
}
.homeproduct-text > p {
	line-height: 140%;
}
.homeproduct-text > p:not(.homeproduct-name) {
	text-align: justify;
}
.homeproduct-text > .ctabuttons {
	margin-top: 1.2rem;
}
/*
 * .homesection
 */
.homesection {
	margin: 0 auto 3rem auto;
	max-width: 75rem;
	padding: 0 2rem;
	text-align: center;
}
.homesection > h2 {
	margin: 0 0 2rem 0;
	font-size: 180%;
	line-height: 160%;
	font-weight: bold;
}
.homesection > p {
	text-align: justify;
	line-height: 140%;
}
.homesection-loved {
	padding-bottom: 2px;
	border-bottom: solid #f33 6px;
}
.homesection-trusted {
	padding-bottom: 2px;
	border-bottom: solid #07b 6px;
}
.homesection-more {
	text-align: right;
}
.homesection-testimonials {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
}
.homesection-testimonials > .testimonial {
	flex-basis: 20rem;
	flex-grow: 1;
}
.homesection-about {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 50rem;
	margin: 0 auto;
	gap: 2rem;
}
.homesection-about > * {
	align-self: start;
}
.homesection-about > img {
	clip-path: circle(50%);
	flex-basis: 150px;
	margin-top: 0.5rem;
}
.homesection-about > div {
	flex-basis: 20rem;
	flex-grow: 1;
}
.homesection-about > div > p {
	text-align: justify;
	line-height: 140%;
	margin-top: 0;
}
.homesection-crosssell {
	max-width: 50rem;
	margin: 0 auto;
}
.homesection-crosssell > p {
	text-align: justify;
	line-height: 140%;
}
.homesection-features > ul, .homesection-features > ul > li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.homesection-features > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5rem 2rem;
}
.homesection-features > ul > li {
	flex-basis: 30rem;
	flex-grow: 1;
	line-height: 140%;
	text-align: justify;
}
.homesection-features > ul > li > strong {
	display: block;
	margin-bottom: 0.5rem;
	text-align: left;
}
.homesection-comparison {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}
.homesection-comparison > div {
	flex-basis: 15rem;
	flex-grow: 1;
	text-align: justify;
	background: white;
	padding: 0.75rem;
	border-radius: 0.5rem;
}
.homesection-comparison > div > h4 {
	font-size: 100%;
	font-weight: bold;
	margin: 0 0 1rem 0;
	text-align: center;
}
.homesection-comparison > div > ul {
	margin-left: 0;
	padding-left: 1.5em;
}
.homesection-comparison > div > ul > li {
	margin-left: 0;
	padding-left: 0.25em;
	line-height: 140%;
}

/*
 * .testimonial
 */
.testimonial > blockquote {
	background: #f6f6f6;
	border-radius: 4px;
	padding: 0.4rem 0.8rem;
	margin: 0;
	text-align: left;
}
.testimonial > blockquote > p {
	line-height: 150%;
	margin: 0;
}
.testimonial > cite {
	display: block;
	margin: 0 1rem;
	padding: 0.4rem 0.8rem 0.4rem calc(0.8rem + 18px);
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAbklEQVQ4y63USQrAIAxA0fjvf90G2k27Kog4ZHKlSXiCRpuqvlI0uO6nlWEiIlUg/6QCpF9kQcZABmQWjIKsEhGQXdILcirwgFiKrCDWXS0gnjM5gXhvbAcS6acVSLTbZyCZtziCZH+KHkxjPfgB7MA4aSi7q6oAAAAASUVORK5CYII=) top left no-repeat;
	text-align: left;
	line-height: 140%;
	font-style: normal;
}

/*
 * .terminal
 */
.terminal {
	background: black;
	color: #FC6;
	font-family: monospace;
}
.terminal-cursor {
	background: #FC6;
	white-space: pre;
	margin-left: 2px;
	/*
	animation: terminal-blink 0.9s step-start infinite;
	*/
}
@keyframes terminal-blink {
	33% { visibility: hidden; }
}

/*
 * .more
 */
.more {
	text-decoration: none;
}
.more::after {
	content: " \25B8";
}
@media (min-width: 700px) {
	.more {
		white-space: nowrap;
	}
}
.more > span {
	text-decoration: underline;
}

/*
 * .ctabuttons
 */
.ctabuttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.ctabuttons > a {
	border-radius: 3px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	padding: 0.4rem 0.5rem;
	text-decoration: none;
}
.ctabuttons > a:hover {
	/* TODO: fancier hover style... make button brighter, transition for effect */
	text-decoration: underline;
}
.ctabuttons-signup {
	background: #0af;
	border: solid #0af 1px;
	font-weight: bold;
	color: white !important;
}
.ctabuttons-learnmore {
	background: #fff;
	border: solid #bbb 1px;
	color: black !important;
}

/*
 * .footer
 */
.footer {
	background: #f6f6f6;
	padding: 4rem 0 0 0;
}
.footer-cta {
	padding: 0 5rem 7rem 5rem;
}
.footer-cta > div {
	max-width: 60rem;
	margin: 0 auto;
	text-align: center;
}
.footer-cta > div > h2 {
	font-size: 250%;
	line-height: 150%;
}
.footer-cta > div > p {
	margin: 2rem 0;
	font-size: 140%;
	color: #444;
	line-height: 150%;
}
.footer-cta > div > .ctabuttons {
	justify-content: center;
	font-size: 130%;
}
.footer-cta > div > .ctabuttons > a {
	padding: 1rem 2rem;
	border-radius: 5px;
}
@media (max-width: 30em) {
	.footer-cta {
		padding: 0 2rem 4rem 2rem;
	}
	.footer-cta > div > h2 {
		font-size: 200%;
	}
	.footer-cta > div > .ctabuttons {
		font-size: 100%;
	}
}
.footer-nav {
	max-width: 90rem;
	margin: 0 auto;
	padding: 0 2rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	justify-content: center;
	gap: 2rem;
}
.footer-nav > div {
}
.footer-nav > div > h3 {
	font-size: 100%;
	margin: 0 0 1rem 0;
	font-weight: bold;
}
.footer-nav > div > ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.footer-nav > div > ul > li {
	list-style-type: none;
	margin: 0.4rem 0 0 0;
	padding: 0;
	line-height: 120%;
}
.footer-nav > div > ul > li > a {
	color: #555;
}
.footer-nav > div > ul > li > a:hover {
	color: #33B;
}
.footer-copyright {
	max-width: 90rem;
	margin: 0 auto;
	padding: 4rem 1rem 3rem 1rem;
	text-align: center;
	color: #666;
}

/*
 * .gridlist
 */
.gridlist {
	max-width: 90rem;
	margin: 0 auto;
	padding: 0 1rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, min(100%, 40rem));
	justify-content: center;
	gap: 1rem;
}
.gridlist-item {
	display: flex;
	align-items: flex-start;
}
.gridlist-icon {
	box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	overflow: hidden;
	margin: 0 1rem 1rem 0;
	text-decoration: none;
	display: block;
	flex-shrink: 0;
	width: 8rem;
	height: 6rem;
	display: flex;
	align-items: stretch;
}
.gridlist-icon > * {
	flex-grow: 1;
}
.gridlist-icon > .terminal {
	padding: 0.3rem;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gridlist-text > h3 {
	margin-top: 0;
}

/*
 * .benefitgrid
 */
.benefitgrid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem 1rem;
	justify-content: center;
}
.benefitgrid > div {
	list-style-type: none;
	line-height: 140%;
	text-align: center;
	flex-basis: 20rem;
	flex-grow: 1;
}
.benefitgrid > div > h3 {
	display: block;
	margin: 0 0 0.4rem 0;
	font-size: 110%;
	font-weight: bold;
	color: #333;
}
.benefitgrid > div > p {
	max-width: 30rem;
	margin-left: auto;
	margin-right: auto;
	font-size: 110%;
	line-height: 150%;
	color: #393939;
}

/*
 * .featuregrid
 */
.featuregrid {
	display: grid;
	margin: 0;
	padding: 0;
	list-style-type: none;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.4rem 1rem;
}
.featuregrid > li {
	display: block;
	margin: 0;
	padding: 0;
	list-style-type: none;
	line-height: 140%;
	text-align: center;
}
.featuregrid > li > strong {
	display: block;
	margin-bottom: 0.2rem;
}

/*
 * .pricing
 */
.pricing {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	margin: 2rem 0;
}
.pricing > div {
	flex-basis: 20rem;
	background: white;
	border-radius: 5px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	padding: 1.5rem 0.5rem 1rem 0.5rem;
}
.pricing.pricing--certspotter {
	align-items: start;
}
.pricing.pricing--certspotter > div {
	flex-basis: 18rem;
}
.pricing.pricing--certs > div {
	flex-basis: 25rem;
}
.pricing.pricing--darker > div {
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
}
.pricing > div > h3 {
	font-size: 150%;
	margin: 0 0 0.5rem 0;
}
.pricing-price {
	margin: 1.75rem 0;
}
.pricing-custom {
	margin: 1.75rem 0;
	font-size: 180%;
	line-height: 1ex;
}
.pricing-text {
	line-height: 150%;
}
.pricing-currencysign {
	font-size: 160%;
	vertical-align: sub;
	line-height: 1ex;
}
.pricing-amount {
	font-size: 220%;
	font-weight: bold;
	vertical-align: top;
	line-height: 1ex;
}
.pricing-feature {
	line-height: 150%;
}
.pricing-disclaimer {
	font-size: 90%;
	color: #333;
	margin-bottom: 0;
}
.pricing-dot {
	/* Hidden in browsers but read by screen readers */
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.pricing-subamount {
	vertical-align: top;
	font-size: 90%;
	line-height: 1ex;
}
.pricing-num {
	font-size: 170%;
}
.pricing-term {
	vertical-align: bottom;
	line-height: 1ex;
}
.pricing-cta {
	margin: 1.5rem 0;
}
.pricing-cta > a {
	display: inline-block;
	border-radius: 5px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	padding: 0.6rem 1rem;
	text-decoration: none;
	background: #0af;
	border: solid #0af 1px;
	color: white;
	font-weight: bold;
}
.pricing-cta > a:hover {
	/* TODO: fancier hover style... make button brighter, transition for effect */
	text-decoration: underline;
}

/*
 * .extra_pricing_table
 */
.extra_pricing_table {
	margin: 1rem auto;
	border-collapse: collapse;
}
.extra_pricing_table > thead > tr > th,
.extra_pricing_table > tbody > tr > td {
	text-align: left;
	padding: 0.2rem 0.6rem;
}
.extra_pricing_table > tbody > tr:nth-child(2n+1) {
	background: #f3f3f3;
}

/*
 * .pricing_example
 */
.pricing_example {
	margin: 0 auto 2rem auto;
}
.pricing_example > tbody > tr > td:nth-child(1) {
    text-align: left;
    font-family: monospace;
    padding-right: 0.5em;
}
.pricing_example > tbody > tr > td:nth-child(2) {
    text-align: right;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
.pricing_example > tbody > tr:last-child > td:nth-child(2) {
    border-top: solid black 1px;
}

/*
 * .certpricing
 */
.certpricing {
	display: flex;
	flex-wrap: wrap;
	padding: 1.5rem 1rem;
	/*
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
	*/
	/*
	border-top: solid #ccc 1px;
	border-bottom: solid #ccc 1px;
	*/
	align-items: center;
	gap: 2rem 1rem;
}
.certpricing {
	border-bottom: solid #ccc 1px;
}
.certpricing-head {
	flex-basis: 20rem;
	flex-grow: 1;
	flex-shrink: 1;
	text-align: center;
}
.certpricing-head > h3 {
	font-size: 140%;
	margin: 0 0 0.5rem 0;
}
.certpricing-price {
	font-size: 120%;
	margin: 1rem 0 0 0;
	color: #333;
}
.certpricing-main {
	flex-basis: 20rem;
	flex-grow: 1000;
	flex-shrink: 1;
	text-align: left;
	line-height: 150%;
}
.certpricing-main > p {
	margin: 0;
}
.certpricing-main > p + p {
	margin: 1rem 0 0 0;
}
.certpricing-cta {
	margin: 1rem 0 0 0;
}
.certpricing-cta > a {
	display: inline-block;
	border-radius: 5px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	padding: 0.4rem 0.8rem;
	text-decoration: none;
	background: #0af;
	border: solid #0af 1px;
	color: white;
	font-weight: bold;
}
.certpricing-cta > a:hover {
	/* TODO: fancier hover style... make button brighter, transition for effect */
	text-decoration: underline;
}

/*
 * .apidemo
 */
.apidemo-input > label {
	display: block;
	margin: 0 0 0.5rem 0;
	font-size: 110%;
	font-weight: normal;
}
.apidemo-input > p {
	margin: 0 0 1rem 0;
}
.apidemo-input > p > input[name=domain] {
	font-size: 130%;
	padding: 0.3em;
	width: 30rem;
	max-width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-family: monospace;
}
.apidemo-input > p > label {
	white-space: nowrap;
}
.apidemo-output {
	width: 55rem;
	max-width: 100%;
	margin: 0 auto;
	text-align: left;
}
.apidemo-request {
	background: #555;
	color: white;
	font-family: monospace;
	line-break: anywhere;
	border-radius: 10px 10px 0 0;
	padding: 0.5rem 0.6rem;
}
.apidemo-request > a {
	color: inherit;
	text-decoration: none;
}
.apidemo-request > a:hover {
	text-decoration: underline;
}
.apidemo-response {
	background: #000;
	color: white;
	font-family: monospace;
	white-space: pre;
	height: 18rem;
	overflow: scroll auto;
	tab-size: 2;
	-moz-tab-size: 2;
	padding: 0.5rem 0.6rem;
	line-height: 140%;
}
.apidemo-response--error {
	color: #F66;
}

/*
 * .content
 */
.content {
	margin: 0 auto 3rem auto;
	max-width: 75rem;
	padding: 0 2rem;
	text-align: justify;
	line-height: 150%;
	font-size: 110%;
}
.content > ul {
	padding-left: 1.5em;
}
.content > h3 {
	font-size: 100%;
	font-weight: bold;
}
.content > h3:not(:first-child) {
	margin-top: 2rem;
}

/*
 * .tooltip
 */
.tooltip {
	position: relative;
	border-bottom: dotted black 1px;
	cursor: help;
}
.tooltip-content {
	position: absolute;
	top: 100%;
	padding-top: calc(0.1rem + 8px);
	left: 0;
	width: 15rem;
	box-sizing: border-box;
	z-index: 100;
	display: none;
}
.tooltip-content > span {
	display: block;
	position: relative;
	background: #333;
	color: white;
	padding: 0.5rem;
	border-radius: 5px;
	text-align: center;
	white-space: normal;
}
.tooltip-content > span:before {
	content: ' ';
	position: absolute;
	top: -16px;
	left: 16px;
	width: 0;
	height: 0;
	margin-left: -8px;
	border: 8px solid transparent;
	border-bottom-color: #333;
}
.tooltip:hover > .tooltip-content,
.tooltip:focus > .tooltip-content {
	display: inline;
}
.body--notooltips .tooltip:hover > .tooltip-content,
.body--notooltips .tooltip:focus > .tooltip-content {
	display: none;
}

/*
 * .contactpage
 */
.contactpage {
	margin: 0 auto 3rem auto;
	max-width: 90rem;
	padding: 0 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}
.contactpage-form {
	flex-grow: 1;
	flex-basis: 30rem;
	padding: 1rem;
	display: block;
	min-width: 0;
}
.contactpage-form > p {
	margin: 0;
}
.contactpage-form > p + p {
	margin-top: 1rem;
}
.contactpage-form > p > input {
	width: min(30rem,100%);
}
.contactpage-form > p > textarea {
	width: 100%;
	height: 20rem;
}
.contactpage-form > p > input, .contactpage-form > p > textarea {
	font-size: 140%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.5rem;
	font-family: sans-serif;
	border: solid #ccc 1px;
	border-radius: 4px;
}
.contactpage-form > p > input:focus, .contactpage-form > p > textarea:focus {
	border-color: #777;
}
.contactpage-form > p > button {
	font-size: 150%;
}
.contactpage-other {
	flex-grow: 1;
	flex-basis: 20rem;
	padding: 1rem;
	min-width: 0;
}
.contactpage-other > div > h3 {
	margin: 0 0 1rem 0;
	font-size: 150%;
	font-size: bold;
}
.contactpage-other > div > p {
	margin: 0;
	line-height: 140%;
}
.contactpage-other > div + div {
	margin-top: 2rem;
}

/*
 * help pages
 */
@media not all and (min-width: 70rem) {
	.help {
		padding: 0.5rem 1rem 2rem 1rem;
	}
	.help-menu {
		margin-bottom: 1.5rem;
	}
	.help-menu.help-menu--expanded {
		margin-bottom: 2rem;
	}
	.help-menu:not(.help-menu--expanded) > .menu {
		display: none;
	}
	.help-menutoggle::before {
		content: "\25B8";
		margin-right: 0.5rem;
	}
	.help-menu.help-menu--expanded > .help-menutoggle::before {
		content: "\25BE";
	}
	.help-menutoggle {
		display: block;
		margin: 0 0 0.5rem 0;
		text-decoration: none;
		color: inherit !important;
	}
	.help-menutoggle:hover > span {
		text-decoration: underline;
	}
}
@media (min-width: 70rem) {
	.help {
		max-width: 90rem;
		margin: 0 auto;
		padding: 0.5rem 1.5rem 3rem 1.5rem;
		display: flex;
		gap: 1rem;
	}
	.help-menu {
		flex-grow: 0;
		flex-shrink: 0;
	}
	.help-menutoggle {
		display: none;
	}
	.help-content {
		min-width: 0;
		flex-grow: 1;
	}
}
.help-content {
	text-align: justify;
	line-height: 150%;
}
.help-content > h2:first-child {
	margin-top: 0;
}

/*
 * menus
 */
.menu, .menu > li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.menu-item {
	text-decoration: none;
	display: block;
	padding: 0.5rem 0.5rem 0.5rem 0.5rem;
	cursor: default;
	color: inherit !important;
}
.menu-item[href]:not(.menu-item--current):hover {
	text-decoration: underline;
	cursor: pointer;
}
.menu-item.menu-item--current {
	background: #eee;
}
.menu-section > .menu > li > .menu-item {
	padding: 0.2rem 0.5rem 0.2rem 1.5rem;
}
.menu-section > .menu {
	margin-top: 0.3rem;
	margin-bottom: 0.3rem;
}
.menu-section:not(.menu-section--expanded) > .menu {
	display: none;
}
.menu-badge {
	color: #666;
	margin-left: 0.5rem;
}

/*
 * .faq
 */
.faq > div {
	margin-bottom: 2rem;
	line-height: 160%;
}
.faq > div > h3 {
	font-size: 115%;
	margin: 0 0 1rem 0;
}

/*
 * .changelog
 */
.changelog > article:target {
	border: dotted #999 1px;
	padding: 0.5rem;
}
.changelog > article {
	margin-top: 2rem;
}
.changelog > article > h3 {
	margin-top: 0;
}
.changelog > article > div > *:last-child {
	margin-bottom: 0;
}

/*
 * .guide
 */
.guide {
	background: #E5E5E5;
	color: black;
	border-radius: 6px;
	padding: 0.3rem 0.6rem;
	margin: 1rem 0;
}
.guide-option:not(.guide-option--selected) {
	display: none;
}
.guide-chooser {
	margin: 0 0 0.3em 0 !important;
	text-align: left;
}
.guide-prose, .guide-commands, .guide-config {
	background: white;
	color: black;
	margin: 0;
	text-align: left;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.15) inset;
	border: solid #CCC 1px;
	border-radius: 6px;
}
.guide-prose {
	padding: 0.5em 0.6em;
}
.guide-commands, .guide-config {
	font-family: monospace;
	overflow: auto;
	white-space: nowrap;
	padding: 4px 5px;
}
.guide-commands > p {
	margin: 0 !important;
	line-height: 1.4em;
}
.guide-config {
	white-space: pre;
	line-height: 1.4em;
}
.guide-cmd:before {
	content: "# ";
}
.guide-cmd.guide-cmd--nonroot:before {
	content: "$ ";
}
.guide-name {
	display: none;
}
.guide-extra > p {
	margin: 0.4em 0 !important;
	line-height: 1.4em;
}
.guide-hdr {
	margin: 0.5em 0 0.1em 0;
}
.guide-ruler {
	border-top: solid #B6B6B6 1px;
}

/*
 * .apidoc (NOTE: the CSS has not been updated to conform to the latest conventions)
 */
.apidoc {
	display: flex;
}
.apidoc-menu {
	position: sticky;
	align-self: flex-start;
	top: 5rem;
}
.apidoc-menu .menu-item {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
}
.apidoc-content {
	flex-grow: 1;
	min-width: 0;
}
.apidoc-segment {
	display: flex;
}
.apidoc-segment > * {
	flex-basis: 50%;
	min-width: 0;
	padding: 0.2rem 1rem;
}
.apidoc-segment.apidoc-segment--last > * {
	padding-bottom: 3rem;
}
.apidoc-right {
	background: #333336;
	color: white;
}
.apidoc-right a {
	color: inherit;
}
.apidoc-title {
	font-size: 130%;
	font-weight: normal;
	margin: 0;
}
.apidoc-json, .apidoc-http { font-size: 100%; font-family: monospace; white-space: pre; overflow: auto; }
.apidoc-defn { font-size: 100%; font-family: monospace; white-space: pre; overflow: auto; }
.apidoc-replace { text-decoration: underline; }

.apidoc-attributes:first-child { margin-top: 0; }
.apidoc-attributes, .apidoc-args, .apidoc-returns { margin-top: 2.5em; }
.apidoc-attributes h5, .apidoc-args h5 { color: #777; border-bottom: solid #ccc 1px; font-variant: small-caps; font-size: 120%; font-weight: normal !important; margin-bottom: 0; }
.apidoc.attributes .apidoc-expandable, . .apidoc.attributes .apidoc-readonly { background: #ddd; color: black; padding: 0.15em 0.25em; border-radius: 3px; }
.apidoc-returns h5 { font-size: 120%; font-weight: bold; margin-bottom: 1em; }
.apidoc h5 { margin: 0.5em 0; }

.apidoc-left { line-height: 140%; }
.apidoc-left tr { border-bottom: solid #ddd 1px; }
.apidoc-left th, .apidoc-left td { padding: 0.7em 0; vertical-align: top; }
.apidoc-left td p:first-child { margin-top: 0; }
.apidoc-left td p:last-child { margin-bottom: 0; }
.apidoc-left th { font-weight: normal; text-align: right; padding-right: 1em; min-width: 10em; }
.apidoc-type { white-space: nowrap; color: #666; display: block; }

.apidoc-right code { background: none; padding: 0; }

/*
 * .curl
 */
.curl {
	font-family: monospace;
	white-space: pre;
	overflow: auto;
}
.curl-cmd:before {
	content: "$ ";
	color: #bbb;
}
.curl-cmd { color: #FF6; }
.curl-uri { color: #AF9; }
.curl-arg { color: #AF9; }
.curl-value { color: #AF9; }
.curl-name { color: #FBA; }

/*
 * .about_content
 */
.about_content {
	margin: 0 auto 3rem auto;
	max-width: 60rem;
	padding: 0 2rem;
	text-align: justify;
	line-height: 150%;
	font-size: 110%;
}
.about_content > section {
	margin-bottom: 3rem;
}
.about_content-bio {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}
.about_content-bio > * {
	align-self: start;
}
.about_content-bio > img {
	clip-path: circle(50%);
	flex-basis: 120px;
	margin-top: 0.5rem;
}
.about_content-bio > div {
	flex-basis: 20rem;
	flex-grow: 1;
}
.about_content-bio > div > p:first-child {
	margin-top: 0;
}
.about_content-bio > div > p:last-child {
	margin-bottom: 0;
}

/*
 * .blog_content
 */
.blog_content {
	margin: 0 auto 3rem auto;
	max-width: 60rem;
	padding: 0 2rem;
	text-align: justify;
	line-height: 150%;
	font-size: 110%;
}

/*
 * .blog_author
 */
.blog_author {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}
.blog_author > * {
	align-self: center;
}
.blog_author > p {
	margin: 0;
}
.blog_author > img {
	clip-path: circle(50%);
	flex-basis: 100px;
	width: 100px;
	height: 100px;
}

/*
 * .blog_post
 */
.blog_post > time {
	color: #333;
}
.blog_post > h3 {
	font-size: 160%;
	line-height: 140%;
	margin: 0.2rem 0 0.8rem 0;
	text-align: left;
}
.blog_post > h3 > a {
	text-decoration: none;
	color: inherit;
}
.blog_post > h3 > a:hover {
	text-decoration: underline;
}
.blog_post > article {
	line-height: 160%;
}
.blog_post + .blog_post {
	margin-top: 4rem;
}

/*
 * .basic_table
 */
.basic_table {
	border-collapse: collapse;
	margin: 1rem 0;
}
.basic_table > * > tr > * {
	padding: 0.1rem 0.3rem;
	border: solid black 1px;
}

/*
 * .simple_api_reference
 */
.simple_api_reference {
	border-collapse: collapse;
}
.simple_api_reference  > * > tr:first-child > * {
	border-top: solid #ddd 1px;
}
.simple_api_reference  > * > tr > * {
	padding: 0.4rem 0.5rem;
	vertical-align: top;
	border-bottom: solid #ddd 1px;
}
.simple_api_reference  > * > tr > * > p:first-child {
	margin-top: 0;
}
.simple_api_reference  > * > tr > * > p:last-child {
	margin-bottom: 0;
}
.simple_api_reference-deprecated {
	color: #555;
}

/*
 * .tool_page
 */
.tool_page {
	margin: 0 auto 3rem auto;
	max-width: 90rem;
	padding: 0 2rem;
}
.tool_page-header {
	text-align: center;
	padding: 1rem 0 1rem 0;
}
.tool_page-header > h2 {
	font-size: 220%;
	margin: 0 0 1rem 0;
}
.tool_page-header > p {
	font-size: 110%;
	line-height: 150%;
	margin: 0;
}

/*
 * .modal
 */
.modal {
	background: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	z-index: 200;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.modal > * {
	background: white;
	overflow: auto;
}