.grid {
	max-width: var(--containerWidth);
	margin: 0 auto;
	padding-left: var(--spacingMedium);
	padding-right: var(--spacingMedium);
}

.header-container {
	background-color: var(--white);
	width: 100%;
	box-shadow: var(--boxShadowDefault);
	position: fixed;
	/* It should overlay the gatsby image */
	z-index: 2;
}

.header {
	display: flex;
	align-items: center;
	height: var(--headerHeight);
	transform: translateY(-2px);
}

.header-logo {
	vertical-align: middle;
	height: 37px;
}

.header-spacer {
	flex-grow: 1;
	flex-shrink: 1;
}

.header-text {
	font-size: 20px;
	margin: var(--spacingExtraSmall) var(--spacingMedium);
	flex-grow: 0;
	flex-shrink: 0;
	color: var(--red);
	transform: translateY(-1px);
	font-weight: var(--fontWeightBold);
}
@media only screen and (min-width: 768px) {
	.header-text {
		padding-left: var(--spacingMedium);
		border-left: 1px solid var(--gray4);
	}
}

.header-link {
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 18px;
	font-weight: var(--fontWeightSemiBold);
	color: var(--gray7);
	-webkit-font-smoothing: antialiased;
}
.header-link:not(:first-child) {
	margin-left: var(--spacingMedium);
}

.header-link:hover {
	cursor: pointer;
	color: var(--gray9);
}

.header-button-refresh {
	padding: var(--spacingExtraSmall) var(--spacingSmall);
	font-size: 16px;
	border: 2px solid var(--red);
	color: var(--red);
	border-radius: var(--borderRadiusMedium);
	cursor: pointer;
	font-weight: var(--fontWeightSemiBold);
}

.header-button-refresh:hover {
	border-color: var(--redDarker2);
}

.extra-spacing {
	margin-left: var(--spacingMedium);
}

.background-white {
	background-color: var(--white);
}

.footer {
	padding-top: var(--spacingEnormous);
	padding-bottom: var(--spacingExtraLarge);
}

.footer .row {
	display: flex;
	flex-direction: column;
	@media (min-width: 768px) {
		flex-direction: row;
		justify-content: space-between;
		gap: var(--spacingMedium);
	}
}

.footer .row div {
	flex-basis: 100%;
	flex-grow: 1;
	flex-shrink: 1;
}

.footer .categoryHeader {
	color: var(--black);
	display: block;
	font-size: 20px;
	margin-bottom: var(--spacingMedium);
	font-weight: var(--fontWeightBold);
}

.footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: var(--spacingLarge);
	@media (min-width: 768px) {
		margin-bottom: 0;
	}
}

.footer li {
	margin-bottom: var(--spacingMedium);
}

.footer a,
.footer a:visited,
.footer a:hover,
.footer a:active {
	color: var(--gray8);
	font-size: 18px;
	font-weight: 400;
}

.footer a:hover {
	cursor: pointer;
	text-decoration: underline;
}

.footer .divider {
	margin-top: var(--spacingSmall);
	margin-bottom: var(--spacingExtraLarge);
	border-top: 1px solid var(--gray3);
	@media (min-width: 768px) {
		margin-top: var(--spacingHuge);
		margin-bottom: var(--spacingHuge);
	}
}

.footer .to-bottom {
	display: unset;
	align-items: flex-end;
	@media (min-width: 768px) {
		display: flex;
	}
}

.footer .switcher {
	display: flex;
	justify-content: center;
	font-size: 18px;
	@media (min-width: 768px) {
		justify-content: flex-start;
	}
}

.footer .switcher:not(:last-child) {
	margin-bottom: var(--spacingMedium);
}

.footer .switcher select {
	margin-left: var(--spacingMedium);
	border: 0;
	font-weight: var(--fontWeightSemiBold);
	color: var(--gray8);
	text-align: right;
	padding-right: var(--spacingSmall);
	min-width: 120px;
}

.footer svg.icon {
	width: 24px;
	height: 24px;
	margin-right: var(--spacingAlternate);
}

.footer .socialLinks {
	display: flex;
	gap: var(--spacingLarge);
	margin-top: var(--spacingLarge);
	justify-content: center;
	@media (min-width: 768px) {
		margin-top: unset;
	}
}

.footer .socialLinks svg {
	width: 24px;
	height: 24px;
	color: var(--gray9);
}

.footer .mobileAppLinks {
	display: flex;
	gap: var(--spacingMedium);
	margin-top: var(--spacingLarge);
	justify-content: center;
	@media (min-width: 768px) {
		margin-top: unset;
		justify-content: flex-end;
	}
}

.footer .mobileAppLinks .appBadge {
	height: 40px;
}

.footer .bottom-spacing {
	margin-bottom: var(--spacingLarge);
	@media (min-width: 768px) {
		margin-bottom: 0px;
	}
}

.footer .bottomLinks {
	margin-top: var(--spacingLarge);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacingAlternate);
	flex-direction: column;
	@media (min-width: 768px) {
		margin-top: var(--spacingMega);
		gap: var(--spacingLarge);
		flex-direction: row;
	}
}

.footer .bottomLinks a {
	font-size: 14px;
}

.footer .language-switcher {
	display: flex;
	align-items: center;
	gap: var(--spacingSmall);
}
.footer .language-switcher-icon {
	color: var(--gray8);
}
.footer .language-switcher-link,
.footer .language-switcher-link:hover {
	color: var(--gray8);
	font-weight: var(--fontWeightSemiBold);
}

:root {
	--red: #ff5c51;
	--blue: #1da1f2;
	--black: #283740;
	--gray1: #f5f8fa;
	--gray2: #eef2f5;
	--gray3: #e6ecf0;
	--gray4: #d9e4eb;
	--gray5: #c5d2db;
	--gray6: #9cadba;
	--gray7: #8293a2;
	--gray8: #657786;
	--gray9: #495a69;
	--green: #63c08b;
	--white: #ffffff;
	--blackBar: #283740bf;
	--blueDark: #2e4766;
	--fadedRed: #fff3f2;
	--lightBlue: #e1eff7;
	--linkColor: #1da1f2;
	--blackFaded: #28374066;
	--redDarker1: #e34840;
	--redDarker2: #c43d33;
	--blackShadow: #28374020;
	--errorOrange: #fca044;
	--redLighter1: #ff7366;
	--redLighter2: #ff8c80;
	--cardBoxShadow: #28374013;
	--softBlushPink: #fff3f2;
	--insetBoxShadow: #00000013;
	--twitterPrimary: #1da1f2;
	--blueTranslucent: #1da1f20d;
	--facebookPrimary: #1877f2;
	--linkedInPrimary: #2867b2;
	--whatsAppPrimary: #4ac959;
	--blueLowSaturated: #506f80;
	--whiteTranslucent: #ffffffe6;
	--whiteTransparent: #ffffff00;
	--defaultBackgroundColor: #f5f8fa;

	--magic: 18px;
	--spacingMicro: calc(var(--magic) / 9);
	--spacingTiny: calc(var(--magic) / 6);
	--spacingExtraSmall: calc(var(--magic) / 3);
	--spacingSmall: calc(var(--magic) / 2);
	--spacingAlternate: calc((var(--magic) * 2) / 3);
	--spacingMedium: calc(var(--magic));
	--spacingLarge: calc(var(--magic) * 1.5);
	--spacingExtraLarge: calc(var(--magic) * 2);
	--spacingHuge: calc(var(--magic) * 3);
	--spacingEnormous: calc(var(--magic) * 4);
	--spacingMega: calc(var(--magic) * 5);

	--headerHeight: 72px;
	--containerWidth: 1206px;
	--contentWidth: calc(100% / 3 * 2);
	--sidebarWidth: 25%;

	--fontWeightRegular: 400;
	--fontWeightSemiBold: 600;
	--fontWeightBold: 700;

	--borderRadiusSmall: 3px;
	--borderRadiusMedium: 6px;
	--borderRadiusLarge: 9px;
	--borderRadiusExtraLarge: 12px;
	--borderRadiusSuperLarge: 18px;

	--boxShadowDefault: 0 1px 2px rgba(40, 55, 64, 0.125);
}

* {
	color: var(--black);
	border: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	min-width: 1px;
	background: none;
	box-sizing: border-box;
	font-style: normal;
	list-style: none;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: var(--fontWeightRegular);
	line-height: 1.5;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
}

svg * {
	color: inherit;
}

.spacer-for-header {
	padding-top: var(--headerHeight);
}

.spacer {
	padding-top: var(--spacingExtraLarge);
}

/*To toggle versions based on viewports*/
.desktop-only {
	display: none;
}

.mobile-only {
	display: flex;
}

@media only screen and (min-width: 768px) {
	.desktop-only {
		display: flex;
	}

	.mobile-only {
		display: none;
	}
}

.button-primary {
	display: block;
	color: var(--white);
	background-color: var(--red);
	border: none;
	border-radius: var(--borderRadiusMedium);
	padding: var(--spacingSmall) var(--spacingMedium);
	font-size: 16px;
	font-weight: var(--fontWeightSemiBold);
	width: -webkit-fit-content;
	width: fit-content;
}

.button-primary:hover {
	border: none;
	background-color: var(--redDarker1);
	cursor: pointer;
}

.button-white {
	display: block;
	color: var(--red);
	background-color: var(--white);
	border: none;
	border-radius: var(--borderRadiusMedium);
	padding: var(--spacingSmall) var(--spacingMedium);
	font-size: 16px;
	font-weight: var(--fontWeightSemiBold);
	width: -webkit-fit-content;
	width: fit-content;
}

.button-white:hover {
	border: none;
	background-color: var(--gray1);
	cursor: pointer;
}

.button-secondary {
	display: block;
	color: var(--gray8);
	background-color: var(--white);
	border: none;
	border-radius: var(--borderRadiusMedium);
	padding: var(--spacingSmall) var(--spacingAlternate);
	font-size: 16px;
	font-weight: var(--fontWeightSemiBold);
	width: -webkit-fit-content;
	width: fit-content;
}

.button-secondary:hover {
	border: none;
	text-decoration: underline;
	cursor: pointer;
}

.button-wide {
	width: 100%;
	text-align: center;
}

.text-bold {
	font-weight: var(--fontWeightSemiBold);
	font-size: inherit;
	color: inherit;
	line-height: inherit;
}

.text-italic {
	font-style: italic;
	font-size: inherit;
	color: inherit;
}

.text-underline {
	text-decoration: underline;
	font-size: inherit;
	color: inherit;
}

#preview {
	color: var(--gray6);
	opacity: 0.3;
	font-size: 250px;
	transform: translate(-50%, -50%) rotate(-45deg);
	position: fixed;
	margin: 0;
	z-index: -1;
	left: 50%;
	top: 50%;
	pointer-events: none;
}

span {
	font-size: inherit;
	font-weight: inherit;
}

.hidden {
	display: none;
}

#scroll-indicator {
	position: fixed;
	top: var(--headerHeight);
	left: 0;
	width: 0;
	height: 3px;
	background-color: var(--red);
	z-index: 2;
	min-width: unset;
	border-bottom-right-radius: 3px;
}

.hide-under-414 {
	display: none;
}

@media only screen and (min-width: 414px) {
	.hide-under-414 {
		display: unset;
	}
}

.red-border-gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	/*padding should be overridden*/
	padding: 0px;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		rgba(255, 92, 81, 0.25),
		rgba(255, 92, 81, 0.75)
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

body {
	background-color: var(--white);
}

.content-container {
	display: flex;
	gap: var(--spacingExtraLarge);
	justify-content: space-between;
	@media only screen and (min-width: 992px) {
		margin-bottom: var(--spacingEnormous);
	}
}

@media only screen and (min-width: 992px) {
	.content-container-spacer {
		padding-top: var(--spacingEnormous);
		padding-bottom: var(--spacingEnormous);
	}
}

.right-sidebar {
	display: none;
}

.content {
	flex-basis: 100%;
}

.reading-time {
	color: var(--gray8);
	font-size: 16px;
	margin-top: var(--spacingSmall);
	margin-bottom: var(--spacingMedium);
}

@media only screen and (min-width: 992px) {
	.right-sidebar {
		display: block;
		flex-basis: var(--sidebarWidth);
		position: relative;
	}

	.right-sidebar-sticky {
		position: -webkit-sticky;
		position: sticky;
		top: calc(var(--headerHeight) + var(--spacingExtraLarge));

		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: var(--spacingLarge);
		height: calc(100vh - 4 * var(--spacingExtraLarge) - var(--spacingMedium));
	}
	.right-sidebar-sticky:has(> :only-child) {
		justify-content: flex-end;
	}

	.content {
		flex-basis: var(--contentWidth);
	}
	.content-center {
		margin: 0 auto;
	}
}

.image-hero-container,
.image-hero-container-wide {
	margin: 0 auto var(--spacingLarge);
	@media only screen and (min-width: 992px) {
		margin-bottom: var(--spacingHuge);
	}
	width: 100%;
}
.image-hero-container-wide {
	border-radius: var(--borderRadiusSuperLarge);
	overflow: hidden;
	position: relative;
	aspect-ratio: 16 / 9;
}
.image-hero {
	border-radius: var(--borderRadiusMedium);
	display: block;
	margin: 0 auto;
	max-width: -webkit-fit-content;
	max-width: fit-content;
	@media only screen and (min-width: 992px) {
		border-radius: var(--borderRadiusExtraLarge);
	}
}
.image-hero-customer-story {
	aspect-ratio: 16 / 9;
}
.image-hero-overlay-company-logo {
	/* Needs to override a default style from Gatsby. Note this optimization is only required for the production build */
	position: absolute !important;
	max-width: 180px;
	max-height: 54px;
	bottom: var(--spacingMedium);
	left: var(--spacingMedium);
	/* Needs to override a default style from Gatsby */
	object-fit: contain !important;
	object-position: left;
	@media only screen and (min-width: 992px) {
		bottom: var(--spacingLarge);
		left: var(--spacingLarge);
	}
}
.image-hero-container-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 50%,
		rgba(0, 0, 0, 0.8) 100%
	);
}

.author {
	display: flex;
	margin-bottom: var(--spacingLarge);
}

.author-image-container {
	flex-shrink: 0;
}

.author-details {
	align-content: center;
}

.author-name {
	font-size: 18px;
	font-weight: var(--fontWeightBold);
	line-height: 1.35;
}

.author-role {
	font-size: 18px;
	line-height: 1.35;
	color: var(--gray8);
}

.author-about {
	font-size: 18px;
	line-height: 1.35;
}

.author-image-small {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	margin-right: var(--spacingLarge);
}

.author-image-large {
	width: 120px;
	height: 120px;
	border-radius: 60px;
	margin-right: var(--spacingExtraLarge);
}

.related-articles-background {
	background-color: var(--gray1);
	padding-top: var(--spacingLarge);
	padding-bottom: var(--spacingLarge);
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	@media only screen and (min-width: 992px) {
		padding-top: var(--spacingEnormous);
		padding-bottom: var(--spacingEnormous);
	}
}
.related-articles-background .content-container {
	margin-bottom: 0;
}

.related-articles-container {
	display: flex;
	flex-direction: column;
}

.related-articles-header {
	text-align: center;
	font-size: 24px;
	font-weight: var(--fontWeightBold);
	line-height: 1.35;
	margin-bottom: var(--spacingLarge);
}

.related-articles-listing {
	display: flex;
	flex-direction: column;
	gap: var(--spacingLarge);
	@media only screen and (min-width: 992px) {
		flex-direction: row;
	}
}

.align-left {
	text-align: left;
}

h1 {
	font-size: 30px;
	font-weight: var(--fontWeightBold);
	line-height: 1.2;
}

h2.rich-text {
	margin-top: var(--spacingMedium);
	font-size: 24px;
	font-weight: var(--fontWeightBold);
	line-height: 1.35;
	margin-bottom: var(--spacingSmall);
}

h2 span.rich-text.text-bold {
	font-weight: var(--fontWeightBold);
}

h3.rich-text {
	margin-top: var(--spacingSmall);
	font-size: 18px;
	font-weight: var(--fontWeightBold);
	line-height: 1.35;
	margin-bottom: var(--spacingMicro);
}

h3 span.rich-text.text-bold {
	font-weight: var(--fontWeightBold);
}

h4.rich-text {
	margin-top: var(--spacingSmall);
	font-size: 16px;
	font-weight: var(--fontWeightBold);
	line-height: 1.35;
	margin-bottom: var(--spacingMicro);
}

h4 span.rich-text.text-bold {
	font-weight: 700;
}

.anchor {
	display: block;
	position: relative;
	/*We offset the anchors so the navbar doesn't overlap anything and they are not stuck to the exact top of the page*/
	top: -200px;
	visibility: hidden;
}

p.rich-text {
	font-size: 18px;
	line-height: 1.5;
	padding-bottom: var(--spacingMedium);
}

.content-container-spacer p.rich-text {
	padding-bottom: var(--spacingLarge);
}

blockquote.rich-text {
	padding-left: var(--spacingExtraLarge);
	border-left: var(--spacingExtraSmall) solid var(--gray5);
	margin-top: var(--spacingMedium);
	margin-bottom: var(--spacingLarge);
}

blockquote.rich-text p.rich-text {
	padding-top: var(--spacingAlternate);
	padding-bottom: var(--spacingAlternate);
	font-size: 18px;
	font-style: italic;
	color: var(--gray9);
}

a.rich-text {
	color: var(--blue);
	font-size: inherit;
	line-height: inherit;
	font-weight: var(--fontWeightSemiBold);
}
a.rich-text:hover {
	text-decoration: underline;
}

ul.rich-text,
ol.rich-text {
	padding-left: var(--spacingMedium);
	padding-bottom: var(--spacingSmall);
}

li.rich-text {
	list-style-type: disc;
}

li.rich-text p.rich-text {
	padding-bottom: var(--spacingExtraSmall);
}

@media only screen and (min-width: 992px) {
	h1 {
		font-size: 40px;
	}
}

table.rich-text {
	border-collapse: collapse;
	margin-bottom: var(--spacingMedium);
}

th.rich-text,
td.rich-text {
	padding: var(--spacingSmall) var(--spacingMedium);
	text-align: left;
}

th.rich-text p.rich-text,
td.rich-text p.rich-text {
	padding: 0;
}

th.rich-text {
	border-bottom: 1px solid var(--gray6);
}
td.rich-text {
	border-bottom: 1px solid var(--gray3);
}
th.rich-text p.rich-text {
	font-weight: var(--fontWeightSemiBold);
}

.gatsby-image-wrapper.rich-text {
	margin: 0 0 var(--spacingMedium);
	border-radius: var(--borderRadiusSmall);
	@media only screen and (min-width: 992px) {
		margin: var(--spacingMedium) 0 var(--spacingExtraLarge);
	}
}

:root {
	--iconSize: 72px;
}

.video-container {
	overflow: hidden;
	position: relative;
	padding-top: 56.25%;
	margin: var(--spacingMedium) 0 var(--spacingExtraLarge);
}

.video-videoContent {
	overflow: hidden;
	border-radius: var(--borderRadiusMedium);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	background-color: transparent;
}

@media only screen and (min-width: 768px) {
	.video-videoContent {
		border-radius: var(--borderRadiusLarge);
	}
}

.video-player {
	width: 100%;
	height: 100%;
	cursor: pointer;
	text-align: left;
	overflow: hidden;
}

.video-link {
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 1;
}

.video-youtubeWarning {
	color: white;
	width: 100%;
	text-align: center;
	padding-bottom: var(--spacingTiny);
	padding-left: 10%;
	padding-right: 10%;
	margin-top: var(--spacingMedium);
}

.video-youtubeWarningBackground {
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
	position: absolute;
	bottom: 0;
	min-height: 100%;
	width: 100%;
}

@media only screen and (min-width: 768px) {
	.video-youtubeWarningBackground {
		height: var(--spacingExtraLarge);
	}
}

.video-image {
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
	margin: auto;
}

.video-button {
	border-radius: 50%;
	background: var(--red);
	width: var(--iconSize);
	flex-basis: var(--iconSize);
	flex-grow: 0;
	flex-shrink: 0;
	color: var(--white);
}

.video-cookieButton {
	color: var(--white);
	padding: var(--spacingTiny) var(--spacingSmall);
	border-radius: var(--borderRadiusSmall);
	border: 1px var(--white) solid;
	display: block;
	margin: var(--spacingMedium) auto 0;
	width: -webkit-fit-content;
	width: fit-content;
	font-weight: var(--fontWeightSemiBold);
}

.quote-container {
	display: flex;
	flex-direction: column;
	border-radius: var(--borderRadiusSuperLarge);
	margin: var(--spacingSmall) 0 var(--spacingLarge);
	padding: var(--spacingLarge);
	gap: var(--spacingLarge);
	@media only screen and (min-width: 992px) {
		padding: var(--spacingExtraLarge);
	}
}

.quote-text.rich-text {
	color: #d70e00;
	padding-bottom: 0;
	font-weight: var(--fontWeightSemiBold);
	line-height: 1.5;
	font-size: 18px;
	@media only screen and (min-width: 992px) {
		font-size: 20px;
	}
}

.quote-quotee {
	display: flex;
	flex-direction: row;
	gap: var(--spacingMedium);
}

.quote-quotee-photo {
	flex-basis: 54px;
	height: 54px;
}

.quote-quotee-photo .gatsby-image-wrapper {
	border-radius: 54px;
}

.quote-quotee-text {
	display: flex;
	flex-direction: column;
}

.quote-quotee-name {
	color: var(--black);
	font-size: 16px;
	font-weight: var(--fontWeightRegular);
	line-height: 1.5;
}

.quote-quotee-role {
	color: var(--black);
	font-size: 16px;
	font-weight: var(--fontWeightSemiBold);
	line-height: 1.5;
}

.quote-container.red-border-gradient {
	position: relative;
}
.quote-container.red-border-gradient::before {
	padding: 2px;
}

.stats-container {
	display: flex;
	gap: var(--spacingMedium);
	width: 100%;
	margin: var(--spacingSmall) 0 var(--spacingLarge);
	@media only screen and (min-width: 768px) {
		flex-direction: row;
	}
}

.stats-container .stat-container {
	width: unset;
	flex-grow: 1;
}

.stat-container {
	display: flex;
	flex-direction: column;
	width: -webkit-fit-content;
	width: fit-content;
	align-items: center;
	border: 1px solid var(--gray3);
	border-radius: var(--borderRadiusSuperLarge);
	padding: var(--spacingMedium);
}

.stat-value {
	font-size: 28px;
	color: var(--red);
	font-weight: var(--fontWeightBold);
	line-height: 1.2;
}

.stat-title {
	color: var(--black);
	font-size: 18px;
	font-weight: var(--fontWeightSemiBold);
	line-height: 1.5;
	text-align: center;
	@media only screen and (min-width: 992px) {
		font-size: 20px;
	}
}

.table-of-contents {
	border-radius: var(--borderRadiusLarge);
	margin: var(--spacingExtraSmall) 0 var(--spacingExtraLarge);
}

.table-of-contents-header {
	padding: var(--spacingAlternate) 0 0;
	font-size: 16px;
	font-weight: var(--fontWeightBold);
	width: 100%;
}

.table-of-contents-content {
	padding: 0 var(--spacingAlternate);
}
.table-of-contents-heading-2,
.table-of-contents-heading-3 {
	color: var(--gray8);
	font-size: 16px;
	list-style: disc;
	padding-top: var(--spacingExtraSmall);
}

.table-of-contents-heading-2:hover,
.table-of-contents-heading-3:hover {
	text-decoration: underline;
}

.table-of-contents-heading-2 {
	list-style: disc;
	margin-left: var(--spacingExtraSmall);
}
.table-of-contents-heading-3 {
	list-style: circle;
	margin-left: var(--spacingMedium);
}

.table-of-contents-link {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	cursor: pointer;
}

.table-of-contents-heading-4,
.table-of-contents-heading-5,
.table-of-contents-heading-6 {
	display: none;
}

.content .table-of-contents {
	@media only screen and (min-width: 992px) {
		display: none;
	}
}
.right-sidebar .table-of-contents {
	display: none;
	@media only screen and (min-width: 992px) {
		display: initial;
		margin-top: 0;
	}
}

.right-sidebar .table-of-contents-header {
	padding-top: 0;
}

body.gray-background {
	background-color: var(--gray1);
}

body.radial-background {
	background: radial-gradient(
		100% 100% at 50% 100%,
		var(--white) 0%,
		var(--white) 25%,
		var(--white) 50%,
		var(--gray2) 100%
	);
}

.listing-header {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	background: var(--red);
	padding: var(--spacingLarge) 0;
}
@media only screen and (min-width: 768px) {
	.listing-header {
		padding: var(--spacingEnormous) 0;
	}
}

.listing {
	margin-bottom: var(--spacingEnormous);
}

.listing-header-grid {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.listing-header-grid img.listing-logo-magnetme {
	max-width: 200px;
}
.listing-header-grid img.listing-logo-guide {
	width: 100%;
	max-width: 300px;
	margin: var(--spacingMedium) 0 var(--spacingLarge);
}
@media only screen and (min-width: 768px) {
	.listing-header-grid img.listing-logo-guide {
		margin: var(--spacingMedium) 0 var(--spacingHuge);
		max-width: 450px;
	}
}

.listing-header .title {
	font-weight: var(--fontWeightBold);
	font-size: 40px;
	line-height: 1.35;
	color: var(--white);
	text-align: center;
	margin-bottom: var(--spacingLarge);
}
.listing-header .subtitle {
	font-size: 18px;
	line-height: 1.35;
	color: var(--white);
	text-align: center;
	margin-bottom: var(--spacingLarge);
}

@media only screen and (min-width: 768px) {
	.listing-header .subtitle {
		font-size: 24px;
	}
}

.listing-header .category-container {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: var(--spacingMedium);
}
@media only screen and (min-width: 768px) {
	.listing-header .category-container {
		flex-direction: row;
	}
}
.listing-header .category-container .category {
	text-align: left;
	background-color: var(--white);
	padding: var(--spacingMedium);
	border-radius: var(--borderRadiusMedium);
	box-shadow: var(--boxShadowDefault);
	display: flex;
	flex-direction: column;
}
@media only screen and (min-width: 768px) {
	.listing-header .category-container .category {
		flex-basis: 25%;
	}
}
.listing-header .category-container .category:hover {
	animation-duration: 0.2s;
	cursor: pointer;
	background-color: var(--gray1);
}
.listing-header .category-container .category .header {
	color: var(--black);
	font-size: 20px;
	font-weight: var(--fontWeightBold);
	margin-bottom: var(--spacingSmall);
}
.listing-header .category-container .category .text {
	color: var(--black);
	font-size: 16px;
}

.category-title {
	font-size: 30px;
	font-weight: var(--fontWeightBold);
	margin-top: var(--spacingLarge);
}
@media only screen and (min-width: 768px) {
	.category-title {
		font-size: 45px;
		margin-top: var(--spacingHuge);
	}
}
.category-text {
	font-size: 16px;
}
@media only screen and (min-width: 768px) {
	.category-title {
		text-align: center;
	}

	.category-text {
		text-align: center;
	}
}

.listing-entries {
	display: flex;
	gap: var(--spacingLarge);
	flex-wrap: wrap;
	margin-top: var(--spacingLarge);
}

.pills-container {
	display: flex;
	justify-content: center;
	gap: var(--spacingMedium);
	margin-top: var(--spacingLarge);
	margin-bottom: var(--spacingLarge);
}
@media only screen and (min-width: 768px) {
	.pills-container {
		margin-top: var(--spacingHuge);
		margin-bottom: var(--spacingHuge);
	}
}

.pill {
	padding: var(--spacingTiny) var(--spacingMedium);
	color: var(--gray7);
	font-size: 16px;
	border: 1px solid var(--gray5);
	border-radius: 20px;
	transition: 0.2s;
}
.pill::first-letter {
	text-transform: capitalize;
}
.pill:hover {
	border-color: var(--gray7);
}
.pill-active {
	border-color: var(--gray7);
	color: var(--gray9);
	font-weight: var(--fontWeightSemiBold);
}
.pill-active:hover {
	border-color: var(--gray9);
}

.cta-jobseekers-container {
	margin-top: var(--spacingExtraLarge);
	margin-bottom: var(--spacingHuge);
	padding: var(--spacingLarge);
	flex-basis: 100%;
	border-top: 1px solid var(--gray4);
	border-bottom: 1px solid var(--gray4);
}

@media only screen and (min-width: 544px) {
	.cta-jobseekers-container {
		padding: var(--spacingHuge);
	}
}

.cta-jobseekers-header {
	text-align: center;
	line-height: 1.35;
	font-size: 24px;
	font-weight: var(--fontWeightBold);
	margin-bottom: var(--spacingLarge);
}
@media only screen and (min-width: 544px) {
	.cta-jobseekers-header {
		font-size: 30px;
		margin-bottom: var(--spacingExtraLarge);
	}
}

.cta-jobseekers-button {
	margin: 0 auto;
}

.listing-entry-regular {
	border-radius: var(--borderRadiusMedium);
	overflow: hidden;
	flex-basis: 100%;
	min-height: 100px;
	flex-grow: 0;
	flex-shrink: 0;
	background-color: var(--white);
}

@media only screen and (min-width: 768px) {
	.listing-entry-regular {
		flex-basis: calc(50% - 0.5 * var(--spacingLarge));
	}
}

@media only screen and (min-width: 992px) {
	.listing-entry-regular {
		flex-basis: calc(100% / 3 - 2 / 3 * var(--spacingLarge));
	}
}

.listing-entry-regular:hover {
	cursor: pointer;
}
.listing-entry-regular:hover .listing-entry-regular-header {
	text-decoration: underline;
}
.listing-entry-regular-image-container {
}
.listing-entry-regular-image {
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
	max-height: 170px;
}
.listing-entry-regular-text-container {
	margin: var(--spacingMedium);
	overflow: hidden;
	position: relative;
}
.listing-entry-regular-header {
	font-size: 20px;
	font-weight: var(--fontWeightBold);
	line-height: 1.35;
	margin-bottom: var(--spacingSmall);
}
.listing-entry-regular-intro-container {
	position: relative;
	height: 50px;
}
.listing-entry-regular-intro {
	color: var(--gray8);
	font-size: 16px;
	position: absolute;
}
.listing-entry-regular-intro-fade-out {
	width: 100%;
	bottom: 0;
	height: 25px;
	display: block;
	position: absolute;
	background: linear-gradient(
		to left,
		#fff 10%,
		rgba(255, 255, 255, 0.9) 20%,
		rgba(255, 255, 255, 0) 30%
	);
	pointer-events: none;
}

.cta-employers-container {
	background-color: var(--red);
	display: flex;
	flex-direction: column;
	padding: var(--spacingHuge) var(--spacingLarge);
	margin-top: 90px;
	margin-bottom: 90px;
	margin-left: calc(-1 * var(--spacingMedium));
	margin-right: calc(-1 * var(--spacingMedium));
	align-items: center;
	@media (min-width: 992px) {
		border: 6px solid var(--redLighter2);
		border-radius: var(--borderRadiusSuperLarge);
		padding-left: 250px;
		padding-right: 250px;
		margin-left: 0;
		margin-right: 0;
	}
}

.cta-employers-logo {
	height: 37px;
}

.cta-employers-header {
	padding-top: 36px;
	font-weight: var(--fontWeightBold);
	text-align: center;
	line-height: 1.2;
	color: var(--white);
	font-size: 30px;
	@media (min-width: 992px) {
		padding-top: 63px;
		font-size: 45px;
	}
}

.cta-employers-text {
	padding-top: var(--spacingMedium);
	padding-bottom: var(--spacingExtraLarge);
	font-size: 18px;
	line-height: 1.35;
	text-align: center;
	color: var(--white);
	@media (min-width: 992px) {
		font-size: 24px;
		padding-top: var(--spacingLarge);
		padding-bottom: 63px;
	}
}

.cta-employers-container .button-white {
	padding: var(--spacingAlternate) var(--spacingHuge);
	font-size: 20px;
}

.cta-employers-aside-container {
	position: relative;
	border-radius: var(--borderRadiusLarge);
	overflow: hidden;
	padding: 6px;
}
.cta-employers-aside-container.red-border-gradient::before {
	padding: 6px;
}

.cta-employers-aside-content-container {
	padding: var(--spacingLarge) var(--spacingMedium);
	background-color: var(--red);
	display: flex;
	flex-direction: column;
	border-radius: var(--borderRadiusSmall);
}

.cta-employers-aside-logo {
	height: 27px;
}

.cta-employers-aside-copy {
	font-size: 18px;
	font-weight: var(--fontWeightBold);
	text-align: center;
	line-height: 1.35;
	color: var(--white);
	margin-top: var(--spacingMedium);
	margin-bottom: var(--spacingLarge);
}

.cta-jobseekers-aside-container {
	position: relative;
	border-radius: var(--borderRadiusLarge);
	overflow: hidden;
	padding: 6px;
}

.cta-jobseekers-aside-container.red-border-gradient::before {
	padding: 6px;
}

.cta-jobseekers-aside-content-container {
	padding: var(--spacingLarge) var(--spacingMedium);
	background-color: var(--red);
	display: flex;
	flex-direction: column;
	border-radius: var(--borderRadiusSmall);
}

.cta-jobseekers-aside-logo {
	height: 27px;
}

.cta-jobseekers-aside-copy {
	font-size: 18px;
	font-weight: var(--fontWeightBold);
	text-align: center;
	line-height: 1.35;
	color: var(--white);
	margin-top: var(--spacingMedium);
	margin-bottom: var(--spacingLarge);
}

.listing-entry-large {
	border-radius: var(--borderRadiusLarge);
	flex-basis: 100%;
	flex-grow: 0;
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	margin-bottom: var(--spacingExtraLarge);
	background-color: var(--white);
}
.listing-entry-large:hover {
	cursor: pointer;
}
.listing-entry-large:hover .listing-entry-large-header {
	text-decoration: underline;
}
.listing-entry-large-image-container {
	flex-basis: calc(50% - 0.5 * var(--spacingLarge));
	flex-shrink: 0;
	flex-grow: 0;
}
.listing-entry-large-image {
	border-radius: var(--borderRadiusLarge) 0 0 var(--borderRadiusLarge);
}
.listing-entry-large-text-container {
	flex-basis: calc(50% - 1.5 * var(--spacingLarge));
	flex-shrink: 0;
	flex-grow: 0;
	margin: var(--spacingLarge);
	margin-bottom: 0;
	overflow: hidden;
	position: relative;
}
.listing-entry-large-header {
	font-size: 24px;
	font-weight: var(--fontWeightBold);
	line-height: 1.35;
	margin-bottom: var(--spacingSmall);
}
.listing-entry-large-intro-container {
	position: relative;
}
.listing-entry-large-intro {
	color: var(--gray8);
	font-size: 18px;
	position: absolute;
}
.listing-entry-large-intro-fade-out {
	width: 100%;
	bottom: 0;
	height: var(--spacingEnormous);
	display: block;
	position: absolute;
	background: linear-gradient(to top, #fff 50%, rgba(255, 255, 255, 0));
	pointer-events: none;
}

@media only screen and (min-width: 992px) {
	.listing-entry-large-image-container {
		flex-basis: calc(66.66% - 0.5 * var(--spacingLarge));
	}
	.listing-entry-large-text-container {
		flex-basis: calc(
			33.33% - 2 * var(--spacingExtraLarge) + 0.5 * var(--spacingLarge)
		);
		margin: var(--spacingExtraLarge);
		margin-bottom: 0;
	}
	.listing-entry-large-header {
		font-size: 30px;
	}
}