/**
 * Atkinson Hyperlegible.
 * https://gwfh.mranftl.com/fonts/atkinson-hyperlegible?subsets=latin
 */
/* atkinson-hyperlegible-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/atkinson-hyperlegible-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* atkinson-hyperlegible-italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/atkinson-hyperlegible-v12-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* atkinson-hyperlegible-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/atkinson-hyperlegible-v12-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* atkinson-hyperlegible-700italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/atkinson-hyperlegible-v12-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/**
 * Merriweather.
 * https://gwfh.mranftl.com/fonts/merriweather?subsets=latin
 */
/* merriweather-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Merriweather';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/merriweather-v33-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/**
 * Design tokens.
 */
:root {
	--font-family-primary: 'Atkinson Hyperlegible', sans-serif;
	--font-family-secondary: 'Merriweather', serif;
	--gradient-pastel: radial-gradient(100% 300% at 100% 0%, #97D9F9 0%, rgba(151, 217, 249, 0.00) 100%),
						radial-gradient(100% 200% at 0% 0%, #FDB78B 0%, rgba(253, 183, 139, 0.00) 100%),
						#F4DE04;
}

/* Accessible focus ring inspired by
 * https://piccalil.li/blog/taking-a-shot-at-the-double-focus-ring-problem-using-modern-css/
 */
:where(
	a,
	button,
	input,
	textarea,
	select,
	details,
	audio,
	video,
	object,
	[contenteditable],
	[tabindex]
) {
	--focus-ring-distance: .1rem;
	--focus-ring-color-background: purple;

	&:focus-visible {
		--focus-ring-color-inner: hsl(0 0% 100%);
		--focus-ring-color-outer: hsl(0 0% 0%);

		box-shadow:
			0 0 0 var(--focus-ring-distance) var(--focus-ring-color-background),
			0 0 0 calc(var(--focus-ring-distance) * 2) var(--focus-ring-color-inner),
			0 0 0 calc(var(--focus-ring-distance) * 3) var(--focus-ring-color-background),
			0 0 0 calc(var(--focus-ring-distance) * 4) var(--focus-ring-color-outer);
		outline: none;
	}

	@supports (color: hsl(from hsl(0 0% 100%) h s l)) {
		&:focus-visible {
			--focus-ring-color-inner: currentColor;
			--focus-ring-color-outer: hsl(from var(--focus-ring-color-inner) calc(h + 180) s l);
			
			box-shadow:
				0 0 0 var(--focus-ring-distance) var(--focus-ring-color-background),
				0 0 0 calc(var(--focus-ring-distance) * 2) var(--focus-ring-color-inner),
				0 0 0 calc(var(--focus-ring-distance) * 3) var(--focus-ring-color-background),
				0 0 0 calc(var(--focus-ring-distance) * 4) var(--focus-ring-color-outer);
			outline: none;
		}
	}
}

img {
	height: auto;
}

/**
 * Typography.
 */

body {
	font-family: var(--font-family-primary);
	font-size: var(--typography-10-size);
	font-weight: 400;
	letter-spacing: var(--typography-10-letter-spacing);
	line-height: var(--typography-10-line-height);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-secondary);
	font-weight: 700;
}

h1 {
	font-size: var(--typography-70-size);
	letter-spacing: var(--typography-70-letter-spacing);
	line-height: var(--typography-70-line-height);
}

h2 {
	font-size: var(--typography-60-size);
	letter-spacing: var(--typography-60-letter-spacing);
	line-height: var(--typography-60-line-height);
}

h3 {
	font-size: var(--typography-50-size);
	letter-spacing: var(--typography-50-letter-spacing);
	line-height: var(--typography-50-line-height);
}

h4 {
	font-size: var(--typography-40-size);
	letter-spacing: var(--typography-40-letter-spacing);
	line-height: var(--typography-40-line-height);
}

h5 {
	font-size: var(--typography-30-size);
	letter-spacing: var(--typography-30-letter-spacing);
	line-height: var(--typography-30-line-height);
}

h6 {
	font-size: var(--typography-20-size);
	letter-spacing: var(--typography-20-letter-spacing);
	line-height: var(--typography-20-line-height);
}

.h6 {
	font-family: var(--font-family-secondary);
	font-weight: 700;
	font-size: var(--typography-20-size);
	letter-spacing: var(--typography-20-letter-spacing);
	line-height: var(--typography-20-line-height);
}

:where(h1, h2, h3) {
	color: var(--color-text-brand-primary);
}

a {
	color: var(--color-text-link-primary);
	text-decoration: underline;
}

a:focus {
	color: var(--color-text-link-primary-focus);
	text-decoration: none;
}

a:hover {
	color: var(--color-text-link-primary-hover);
	text-decoration: none;
}

a:active {
	color: var(--color-text-link-primary-active);
	text-decoration: underline;
}

sup.legal {
	h1 &,
	h2 &,
	h3 &,
	h4 &,
	h5 &,
	h6 & {
		font-size: var(--typography-5-size);
		line-height: 0;
	}	

	h1 & {
		vertical-align: clamp(1.4rem, 0.914rem + 2.0465vw, 2.5rem);
	}

	h2 & {
		vertical-align: clamp(1rem, 0.6686rem + 1.3953vw, 1.75rem);
	}

	h3 & {
		vertical-align: clamp(0.8rem, 0.5791rem + 0.9302vw, 1.3rem);
	}

	h4 & {
		vertical-align: clamp(0.6rem, 0.4233rem + 0.7442vw, 1rem);
	}

	h5 & {
		vertical-align: clamp(0.45rem, 0.3837rem + 0.2791vw, 0.6rem);
	}

	h6 & {
		vertical-align: clamp(0.3rem, 0.2558rem + 0.186vw, 0.4rem);
	}
}

/** End Typography **/

/**
 * Utilities.
 */

/* https://piccalil.li/blog/my-favourite-3-lines-of-css/ */
.flow > * + * {
    margin-block-start: var(--flow-space, 1em);
}

.width-content {
	width: 100%;
	max-width: var(--dimension-container-width-5, 648px);
}

.width-wide {
	width: 100%;
	max-width: var(--dimension-container-width-10, 1124px);
}

.sr-only {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

/**
 * Site Banner.
 */
.site-banner {
	display: flex;
	padding: var(--spacing-vw-x-small, 24px);
	justify-content: center;
	align-items: center;
	align-self: stretch;
	background: var(--color-surface-primary, #FFF);

	
}

.site-banner__logo {
	width: clamp(150px, 128.09px + 5.618vw, 200px);
}


/**
 * Site Hero.
 */
.site-hero {
	display: flex;
	padding: var(--spacing-vw-medium, 64px) var(--spacing-vw-x-small, 24px);
	justify-content: center;
	align-items: flex-start;
	align-self: stretch;
	position: relative;
	background: var(--gradient-pastel);
}

.site-hero::after {
	content: '';
	background: url('../images/hero-background.svg') left / cover no-repeat;
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	right: 0;
}

.site-hero__inner {
	display: flex;
	align-items: center;
}

.site-hero__wrap-text {
	flex: 1;
}

.site-hero__blurb {
	font-weight: bold;
}

.site-hero__wrap-graphic {
	flex: 1;
}

.site-hero__testimonial {
	display: flex;
	padding: var(--spacing-vw-x-small, 24px);
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	position: relative;
	margin-top: calc(var(--spacing-vw-x-small) + var(--spacing-vw-x-small));
	pointer-events: none;
}

.site-hero__testimonial::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--button-default-corner-radius, 16px);
  border: 5px solid transparent;
  background: linear-gradient(135deg, #7700ff 0%, #fd8437 100%) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.site-hero__testimonial cite {
	width: 100%;
	text-align: right;
}

@media screen and (max-width: 35.375rem) {
	.site-hero {
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing-vw-x-small);
		padding-bottom: 0;
	}

	.site-hero__wrap-graphic {
		display: none;
	}

	.site-hero::after {
		background-position: top;
		position: static;
		aspect-ratio: 1 / 1;
	}
}

/**
 * Site Intake.
 */
.site-intake {
	display: flex;
	padding: var(--spacing-vw-medium, 64px) var(--spacing-vw-x-small, 24px);
	justify-content: center;
	align-items: flex-start;
	align-self: stretch;
}

.site-intake__inner {
	display: flex;
	max-width: var(--dimension-container-width-10, 1124px);
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-vw-small, 40px);
	flex: 1 0 0;
}

.site-intake__alert {
    margin-block-end: var(--spacing-vw-small);
	scroll-margin-top: var(--spacing-vw-small);
}

.grecaptcha-badge {
	visibility: hidden;
}

/**
 * Site Author.
 */
.site-author {
	display: flex;
	padding: var(--spacing-vw-medium, 64px) var(--spacing-vw-x-small, 24px);
	flex-direction: column;
	align-items: center;
	background: var(--color-surface-primary-contrast-min, #F6F6F6);
}

.site-author__inner {
	display: flex;
	max-width: var(--dimension-container-width-10, 1124px);
	align-items: stretch;
	gap: var(--spacing-vw-medium, 64px);
}

.site-author__wrap-image {
	flex: 1;
}

.site-author__image {
	margin-left: auto;
	margin-right: auto;
}

.site-author__minibio {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

#location-status {
	padding: var(--spacing-3x-small, 4px);
	font-weight: bold;
	color: var(--color-text-brand-primary);
}

#location-status:empty {
	position: absolute;
}

@media screen and (max-width: 34.375rem) {
	.site-author__inner {
		flex-direction: column;
	}

	.site-author__image {
		width: 75%;
	}
}

/**
 * Site Chart.
 */
.site-chart {
	display: flex;
	padding: var(--spacing-vw-x-small, 24px) var(--spacing-vw-x-small, 24px);
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-vw-x-small, 24px);
	align-self: stretch;

	background: radial-gradient(100% 300% at 100% 0%, #97D9F9 0%, rgba(151, 217, 249, 0.00) 100%),
				radial-gradient(100% 200% at 0% 0%, #FDB78B 0%, rgba(253, 183, 139, 0.00) 100%),
				#F4DE04;
}

.site-chart__header {
	color: var(--color-text-brand-primary);
	text-align: center;
	flex-basis: 100%;
}
.site-chart__header-subhead {
	font-family: var(--font-family-secondary);
	font-size: var(--typography-40-size);
	font-weight: 700;
	letter-spacing: var(--typography-40-letter-spacing);
	line-height: var(--typography-40-line-height);
}

.site-chart__chart {
	display: flex;
	max-width: var(--dimension-container-width-10, 1124px);
	padding: var(--spacing-vw-x-small, 24px);
	align-items: flex-start;
	gap: var(--spacing-vw-medium, 64px);
	background: var(--color-surface-primary-contrast-min, #F6F6F6);
	flex-wrap: wrap;
	border-radius: var(--button-default-corner-radius, 16px);
}

.site-chart__details {
	display: flex;
	flex-basis: 37%;
	flex-direction: column;
	align-items: stretch;

	gap: var(--spacing-2x-small);
}

.site-chart__details-grid {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--spacing-2x-small) var(--spacing-x-small);

	dt {
		color: var(--color-text-primary, #000);

		/* Chart */
		font-family: var(--font-family-primary);
		font-size: var(--typography-7-size, 15px);
		font-style: normal;
		font-weight: 400;
		line-height: var(--typography-7-line-height, 22.25px); /* 148.333% */
		letter-spacing: var(--typography-7-letter-spacing, 0.04px);
	}

	dd {
		color: var(--color-text-brand-primary, #20375A);
		text-align: right;

		/* Chart Bold */
		font-family: var(--font-family-primary);
		font-size: var(--typography-7-size, 15px);
		font-style: normal;
		font-weight: 700;
		line-height: var(--typography-7-line-height, 22.25px); /* 148.333% */
		letter-spacing: var(--typography-7-letter-spacing, 0.04px);
	}
}

.site-chart__bodygraph {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	flex: 1 0 0;
}

.site-chart__explanation {
	display: flex;
	padding: var(--spacing-vw-medium, 64px) var(--spacing-vw-x-small, 24px);
	flex-direction: column;
	align-items: center;
	align-self: stretch;
}

@media screen and (max-width: 59.375rem) {
	.site-chart__chart {
		flex-direction: column-reverse;
		align-items: stretch;
	}
}

.color-personality {
	color: var(--color-text-chart-personality);
}

.color-design {
	color: var(--color-text-chart-design);
}

.site-errorpage {
	display: flex;
	padding: var(--spacing-vw-medium, 64px) var(--spacing-vw-x-small, 24px);
	justify-content: center;
	align-items: flex-start;
	align-self: stretch;
}

/*
 * Off-screen honeypot.
 *
 * Positions the honeypot field out of view without using display:none,
 * which bots can detect. The field remains in the DOM and renders at 1x1px
 * so it is indistinguishable from a real field to automated scanners.
 */
.off-screen {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.u-truncate {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: inline-block !important;
	width: 100% !important;
}