@import url("https://jsypctdhynsdqrfifvdh.supabase.co/storage/v1/object/public/cp-blog-css/global.css");

*,
:after,
:before {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

:root {
	/* fonts */
	--blog-font-1: "Poppins", sans-serif;
	--blog-primary-font-color: rgb(96, 105, 125);
	/* colors */
	--blog-color-white: #fff;
	--blog-color-black: #000;
	--blog-color-transparent: transparent;
	--blog-color-1: #c8faf1;
	--blog-color-2: #00946e;
	--blog-color-3: #154b38;
	--blog-color-4: #edf9f5;
	/* spacing */
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 32px;
	--space-xl: 48px;
	--space-xxl: 64px;
	/* lead section */
	--lead-section-bg: var(--blog-color-transparent);
	--lead-section-title: var(--blog-color-black);
	/* summary */
	--summary-bg-color: var(--blog-color-4);
	--summary-heading-color: var(--blog-color-2);
	--summary-text-color: var(--blog-primary-font-color);
	/* callout left */
	--callout-left-bg-color: var(--blog-color-3);
	--callout-left-after-color: '';
	--callout-left-text-color: var(--blog-color-white);
	--callout-left-cta-bg-color: var(--blog-color-1);
	--callout-left-cta-text-color: var(--blog-color-3);
	--callout-left-cta-hover-bg-color: var(--blog-color-transparent);
	--callout-left-cta-hover-text-color: var(--blog-color-1);
	/* callout right */
	--callout-right-bg-color: var(--blog-color-2);
	--callout-right-after-color: '';
	--callout-right-text-color: var(--blog-color-white);
	--callout-right-cta-bg-color: var(--blog-color-1);
	--callout-right-cta-text-color: var(--blog-color-3);
	--callout-right-cta-hover-bg-color: var(--blog-color-transparent);
	--callout-right-cta-hover-text-color: var(--blog-color-1);
	/* quote */
	--quote-bg-color: var(--blog-color-transparent);
	--quote-text-color: var(--blog-color-2);
	--quote-border-color: #e5e6ea;
	/* key takeaways */
	--key-takeaways-bg-color: var(--blog-color-4);
	--key-takeaways-border-color: var(--blog-color-2);
	--key-takeaways-text-color: #0b0b0b;
	--key-takeaways-heading-color: var(--blog-color-2);
	--key-takeaways-cta-bg-color: var(--blog-color-2);
	--key-takeaways-cta-text-color: var(--blog-color-white);
	--key-takeaways-cta-hover-bg-color: var(--blog-color-transparent);
	--key-takeaways-cta-hover-text-color: var(--blog-color-2);
	/* references */
	--references-bg-color: var(--blog-color-4);
	--references-border-color: var(--blog-color-2);
	--references-text-color: var(--blog-color-2);
	--references-heading-color: var(--blog-color-2);
	--references-divider-color: var(--blog-color-2);
	/* about company */
	--about-company-bg-color: var(--blog-color-transparent);
	--about-company-heading-color: var(--blog-color-2);
	--about-company-text-color: var(--blog-primary-font-color);
	--about-company-border-color: var(--blog-color-2);
	--about-company-icon-color: var(--blog-color-2);
	/* toc */
	--toc-bg-color: var(--blog-color-transparent);
	--toc-heading-color: var(--blog-color-2);
	--toc-text-color: var(--blog-primary-font-color);
	--toc-border-color: var(--blog-color-2);
	--toc-active-bg-color: var(--blog-color-4);
	--toc-active-text-color: var(--blog-color-3);
	--toc-active-divider-color: var(--blog-color-3);
	--border-radius: 16px;
	--background-svg: url('data:image/svg+xml,%3Csvg%20id%3D%22a%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20viewBox%3D%220%200%20371.6%20451.43%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%223156.46%22%20y1%3D%22-668.29%22%20x2%3D%223195.71%22%20y2%3D%22-668.29%22%20gradientTransform%3D%22translate(-568.84%20-3072.46)%20rotate(90)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23015430%22%20stop-opacity%3D%220%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23015430%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id%3D%22c%22%20x1%3D%22125.68%22%20y1%3D%221098.8%22%20x2%3D%22173.86%22%20y2%3D%221098.8%22%20gradientTransform%3D%22translate(0%20-900)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23015430%22%20stop-opacity%3D%220%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23015430%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M170.65%2C0h-52.89c-18.2%2C0-33.19%2C14.77-33.19%2C33.19v89.71h29.76V33.19c0-1.93%2C1.5-3.43%2C3.43-3.43h52.89c1.93%2C0%2C3.43%2C1.5%2C3.43%2C3.43v51.81h29.76v-51.81c0-18.2-14.77-33.19-33.19-33.19Z%22%20style%3D%22fill%3A%23009c6c%3B%22/%3E%3Cpath%20d%3D%22M203.62%2C114.76h-29.76v59.52h-8.14c-44.75%2C0-81.15%2C36.4-81.15%2C81.15v.43c0%2C18.2%2C14.77%2C33.19%2C33.19%2C33.19h52.89c18.2%2C0%2C33.19-14.77%2C33.19-33.19v-51.81l-.21-29.76v-59.52ZM173.86%2C255.86c0%2C1.93-1.5%2C3.43-3.43%2C3.43h-52.67c-1.93%2C0-3.43-1.5-3.43-3.43v-.43c0-28.26%2C23.12-51.39%2C51.39-51.39h8.14v51.81Z%22%20style%3D%22fill%3A%23009c6c%3B%22/%3E%3Cpolygon%20points%3D%2284.57%20123.33%2084.57%2083.93%20114.34%2083.93%20114.34%20123.33%2084.57%20123.33%22%20style%3D%22fill%3Aurl(%23b)%3B%22/%3E%3Cpath%20d%3D%22M84.57%2C122.9c0%2C28.26-23.12%2C51.39-51.39%2C51.39-1.93%2C0-3.43-1.5-3.43-3.43v-52.67c0-1.93%2C1.5-3.43%2C3.43-3.43h51.39v-29.76h-51.39C14.99%2C85%2C0%2C99.78%2C0%2C118.19v52.89c0%2C18.2%2C14.77%2C33.19%2C33.19%2C33.19%2C44.75%2C0%2C81.15-36.4%2C81.15-81.15h-29.76v-.21Z%22%20style%3D%22fill%3A%23015430%3B%22/%3E%3Cpath%20d%3D%22M255.86%2C85H114.34v29.76h141.53c1.93%2C0%2C3.43%2C1.5%2C3.43%2C3.43v52.89c0%2C1.93-1.5%2C3.43-3.43%2C3.43h-52.24l.21%2C29.55h52.03c18.2%2C0%2C33.19-14.77%2C33.19-33.19v-52.67c0-18.41-14.77-33.19-33.19-33.19Z%22%20style%3D%22fill%3A%23015430%3B%22/%3E%3Cpath%20d%3D%22M167.24%2C174.28c-15.62-.16-29.66%2C3.77-41.55%2C10.58v38.48c9.44-11.74%2C23.9-19.29%2C40.04-19.29h8.14v-29.78h-6.62Z%22%20style%3D%22fill%3Aurl(%23c)%3B%22/%3E%3C/svg%3E');
	--background-svg-2: url('data:image/svg+xml,%3Csvg%20id%3D%22a%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20289.05%20289.05%22%3E%3Cg%20style%3D%22opacity%3A.3%3B%22%3E%3Cpath%20d%3D%22M170.65%2C0h-52.89c-18.2%2C0-33.19%2C14.77-33.19%2C33.19v89.71h29.76V33.19c0-1.93%2C1.5-3.43%2C3.43-3.43h52.89c1.93%2C0%2C3.43%2C1.5%2C3.43%2C3.43v51.81h29.76v-51.81c0-18.2-14.77-33.19-33.19-33.19Z%22%20style%3D%22fill%3A%23fff%3B%22/%3E%3Cpath%20d%3D%22M203.62%2C114.76h-29.76v59.52h-8.14c-44.75%2C0-81.15%2C36.4-81.15%2C81.15v.43c0%2C18.2%2C14.77%2C33.19%2C33.19%2C33.19h52.89c18.2%2C0%2C33.19-14.77%2C33.19-33.19v-51.81l-.21-29.76v-59.52ZM173.86%2C255.86c0%2C1.93-1.5%2C3.43-3.43%2C3.43h-52.67c-1.93%2C0-3.43-1.5-3.43-3.43v-.43c0-28.26%2C23.12-51.39%2C51.39-51.39h8.14v51.81Z%22%20style%3D%22fill%3A%23fff%3B%22/%3E%3Cpolygon%20points%3D%2284.57%20123.33%2084.57%2083.93%20114.34%2083.93%20114.34%20123.33%2084.57%20123.33%22%20style%3D%22fill%3A%23fff%3B%22/%3E%3Cpath%20d%3D%22M84.57%2C122.9c0%2C28.26-23.12%2C51.39-51.39%2C51.39-1.93%2C0-3.43-1.5-3.43-3.43v-52.67c0-1.93%2C1.5-3.43%2C3.43-3.43h51.39v-29.76h-51.39C14.99%2C85%2C0%2C99.78%2C0%2C118.19v52.89c0%2C18.2%2C14.77%2C33.19%2C33.19%2C33.19%2C44.75%2C0%2C81.15-36.4%2C81.15-81.15h-29.76v-.21Z%22%20style%3D%22fill%3A%23fff%3B%22/%3E%3Cpath%20d%3D%22M255.86%2C85H114.34v29.76h141.53c1.93%2C0%2C3.43%2C1.5%2C3.43%2C3.43v52.89c0%2C1.93-1.5%2C3.43-3.43%2C3.43h-52.24l.21%2C29.55h52.03c18.2%2C0%2C33.19-14.77%2C33.19-33.19v-52.67c0-18.41-14.77-33.19-33.19-33.19Z%22%20style%3D%22fill%3A%23fff%3B%22/%3E%3Cpath%20d%3D%22M167.24%2C174.28c-15.62-.16-29.66%2C3.77-41.55%2C10.58v38.48c9.44-11.74%2C23.9-19.29%2C40.04-19.29h8.14v-29.78h-6.62Z%22%20style%3D%22fill%3A%23fff%3B%22/%3E%3C/g%3E%3C/svg%3E');
}

* {
	color: var(--blog-primary-font-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--blog-font-1);
	font-weight: 600;
	color: var(--blog-color-2);
}

.single-post-content.centering-wrap.max,
.post-content-wrap {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.post-image,
.post-title {
	display: none;
}

.post-content-wrap .post-content {
	padding-top: 0;
}

/* ----------- Blog wrapper structure ----------- */
.blog-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: var(--space-md);
	font-family: var(--blog-font-1);
	font-weight: 400;
	color: var(--blog-color-3);
	margin-left: var(--space-sm);
	margin-right: var(--space-sm);
	padding-bottom: var(--space-xxl);
}

.blog-wrapper h2 {
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 20px;
	text-transform: none;
	font-weight: 600;
}

.blog-wrapper h3 {
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 16px;
}

.blog-wrapper h4,
.blog-wrapper h5,
.blog-wrapper h6 {
	font-size: 16px;
}

.blog-content {
	font-family: var(--blog-font-1);
	width: 100%;
}

.blog-wrapper p,
.blog-content ul,
.blog-content ol {
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 16px;
}

.blog-wrapper p a {
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--blog-color-3);
}

.blog-content>ul li,
.blog-content>ol li {
	margin-top: 2px;
	margin-bottom: 2px;
}

.blog-content>ul li {
	list-style-type: disc;
	list-style-position: inside;
}

.blog-content>ol li {
	list-style-type: decimal;
	list-style-position: inside;
}

/* ----------- Lead section ----------- */
.lead-section {
	background-color: var(--lead-section-bg);
	background-repeat: no-repeat;
	background-size: 250px;
	background-position: right bottom;
	display: flex;
	flex-direction: column;
	margin-bottom: 44px;
	padding-bottom: 0;
	position: relative;
	z-index: 1;
}

.lead-section .title-container,
.lead-section .lead-image-container {
	margin-left: var(--space-sm);
	margin-right: var(--space-sm);
	position: relative;
	z-index: 2;
}

.title-container h1 {
	font-size: 30px;
	line-height: 36px;
	color: var(--lead-section-title);
	text-align: left;
	margin-top: 20px;
	margin-bottom: 0;
}

.lead-section .lead-meta {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 16px;
	margin-top: 16px;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: var(--blog-color-3);
	font-family: var(--blog-font-1);
}

.lead-section .lead-meta * {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.lead-section .lead-meta a {
	color: #005776;
	text-decoration: none;
}

.lead-section .lead-meta a:hover {
	text-decoration: underline;
}

.lead-section .lead-meta>div {
	position: relative;
	padding-left: 16px;
}

.lead-section .lead-meta>div::before {
	content: '';
	position: absolute;
	top: 8px;
	left: -2px;
	width: 4px;
	height: 4px;
	background-color: var(--blog-color-2);
	opacity: 0.25;
}

.lead-section .lead-meta>div:first-of-type {
	padding-left: 0;
}

.lead-section .lead-meta>div:first-of-type::before {
	display: none;
}

.lead-image {
	height: 210px;
}

.lead-image-container {
	margin-bottom: -32px;
	margin-top: 16px;
}

.lead-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--border-radius);
	margin: 0;
}

/* ----------- Flex container and sidebar ----------- */
.flex-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
	order: 2;
}

.flex-container.show {
	display: flex;
	position: fixed;
	bottom: 30px;
	left: 0;
	right: 0;
	z-index: 100;
	background: white;
	box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
	padding: var(--space-sm);
	overflow-y: auto;
	max-height: 80vh;
}

/* ----------- Summary ----------- */
.blog-content #summary {
	font-family: var(--blog-font-1);
	background-color: var(--summary-bg-color);
	color: var(--summary-text-color);
	position: relative;
	overflow: hidden;
	border-radius: var(--border-radius);
	padding: 20px 16px 40px 16px;
	margin-bottom: 32px;
	font-size: 20px;
	line-height: 30px;
}

.blog-content #summary strong,
.blog-content #summary b {
	font-family: var(--blog-font-1);
	font-size: 24px;
	line-height: 36px;
	display: block;
	color: var(--summary-heading-color);
	margin-bottom: 16px;
}

.blog-content #summary p {
	color: var(--summary-text-color);
	margin-bottom: 0;
	font-size: 20px;
	line-height: 30px;
}

.blog-content #summary p+p {
	margin-top: 16px;
}

/* ----------- Callout ----------- */
.blog-content .callout {
	position: relative;
	width: 100%;
	margin: 32px 0;
	border-radius: var(--border-radius);
	text-align: start;
	font-family: var(--blog-font-1);
	font-weight: 600;
	font-size: 24px;
	line-height: 32px;
	padding: 24px 22px;
	letter-spacing: -0.02em;
}

.blog-content .callout .callout_text {
	font-family: var(--blog-font-1);
	font-weight: 600;
	font-size: 24px;
	line-height: 32px;
	margin-bottom: 0;
	letter-spacing: -0.02em;
}

.blog-content .callout_left {
	background-color: var(--callout-left-bg-color);
	background-size: cover;
	background-image: var(--background-svg-2);
	background-blend-mode: lighten;
	background-position: right -100px bottom -100px;
	background-repeat: no-repeat;
}

.blog-content .callout_right {
	background-color: var(--callout-right-bg-color);
	background-size: cover;
	background-image: var(--background-svg-2);
	background-position: left -100px top -100px;
	background-repeat: no-repeat;
}

.blog-content .callout_left .callout_text {
	color: var(--callout-left-text-color);
}

.blog-content .callout_right .callout_text {
	color: var(--callout-right-text-color);
}

.blog-content .callout_left_cta_button,
.blog-content .callout_right_cta_button {
	display: block;
	margin-top: 16px;
}

.blog-content .callout_left_cta_dest_url,
.blog-content .callout_right_cta_dest_url {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: transparent;
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	text-decoration: none;
	font-family: var(--blog-font-1);
	font-weight: 500;
	border-radius: var(--border-radius);
	border: 2px solid;
	padding: 7px 20px;
	letter-spacing: 0.02em;
}

.blog-content .callout_left_cta_anchor_text,
.blog-content .callout_right_cta_anchor_text {
	font-family: var(--blog-font-1);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.02em;
}

.blog-content .callout_left_cta_dest_url svg,
.blog-content .callout_right_cta_dest_url svg {
	stroke: currentColor;
}

.blog-content .callout_left_cta_dest_url {
	border-color: var(--callout-left-cta-bg-color);
	background-color: var(--callout-left-cta-bg-color);
	color: var(--callout-left-cta-text-color);
}

.blog-content .callout_right_cta_dest_url {
	border-color: var(--callout-right-cta-bg-color);
	background-color: var(--callout-right-cta-bg-color);
	color: var(--callout-right-cta-text-color);
}

.blog-content .callout_left_cta_dest_url:hover {
	cursor: pointer;
	background-color: var(--callout-left-cta-hover-bg-color);
	color: var(--callout-left-cta-hover-text-color);
}

.blog-content .callout_right_cta_dest_url:hover {
	cursor: pointer;
	background-color: var(--callout-right-cta-hover-bg-color);
	color: var(--callout-right-cta-hover-text-color);
}

.blog-content .callout_left_cta_dest_url:hover svg,
.blog-content .callout_right_cta_dest_url:hover svg {
	stroke: currentColor;
}

/* ----------- Quote ----------- */
.blog-content .quote {
	margin: 32px 0;
	background-color: var(--quote-bg-color);
	background-image: var(--background-svg);
	background-repeat: no-repeat;
	background-position: bottom -80px right -60px;
	background-size: 150px;
	border-top: 1px solid var(--quote-border-color);
	border-bottom: 1px solid var(--quote-border-color);
	padding: 16px 0;
	font-size: 24px;
	line-height: 32px;
	color: var(--quote-text-color);
	text-align: center;
}

.blog-content .quote_wide_text {
	font-size: 20px;
	line-height: 24px;
	font-family: var(--blog-font-1);
	font-weight: 600;
	font-style: italic;
}

.blog-content .quote_wide_source_name {
	font-size: 14px;
	line-height: 22px;
	font-weight: 500;
	margin-top: 16px;
	text-transform: uppercase;
	font-family: var(--blog-font-1);
}

.blog-content .quote_wide_source_title {
	font-size: 12px;
	line-height: 20px;
	font-weight: 500;
	text-transform: uppercase;
	margin-top: 8px;
	font-family: var(--blog-font-1);
}

/* ----------- Key Takeaways ----------- */
.blog-content #key-takeaways {
	background-color: var(--key-takeaways-bg-color);
	border: 2px solid var(--key-takeaways-border-color);
	color: var(--key-takeaways-text-color);
	padding: 24px 20px 30px 20px;
	position: relative;
	border-radius: var(--border-radius);
	margin-top: 32px;
	margin-bottom: 32px;
}

.blog-content #key-takeaways strong,
.blog-content #key-takeaways b {
	position: relative;
	display: block;
	font-size: 24px;
	line-height: 34px;
	font-family: var(--blog-font-1);
	font-weight: 600;
	color: var(--key-takeaways-heading-color);
	margin-bottom: 16px;
	letter-spacing: -0.02em;
}

.blog-content #key-takeaways p {
	font-size: 18px;
	line-height: 28px;
	font-family: var(--blog-font-1);
	margin-bottom: 24px;
}

.blog-content #key-takeaways ul,
.blog-content #key-takeaways ol {
	word-break: break-word;
	margin-bottom: 0;
	padding-left: 0;
	margin-left: 0;
}

.blog-content #key-takeaways ul:not(:first-child),
.blog-content #key-takeaways ol:not(:first-child) {
	margin-top: 24px;
}

.blog-content #key-takeaways ul:not(:last-child),
.blog-content #key-takeaways ol:not(:last-child) {
	margin-bottom: 24px;
}

.blog-content #key-takeaways ul li,
.blog-content #key-takeaways ol li {
	font-size: 16px;
	line-height: 24px;
	list-style: none;
	position: relative;
	padding-left: 32px;
	margin-bottom: 12px;
}

.blog-content #key-takeaways ul li:last-child,
.blog-content #key-takeaways ol li:last-child {
	margin-bottom: 0;
}

.blog-content #key-takeaways ul li::before,
.blog-content #key-takeaways ol li::before {
	content: '';
	position: absolute;
	top: 4px;
	left: 0;
	z-index: 1;
	width: 24px;
	height: 24px;
	background-image: url('data:image/svg+xml, <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" rx="12" fill="%2300946e"/><path d="M7.5 12L10.5 15L16.5 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 50%;
}

.blog-content .key_takeaways_cta_button {
	display: inline-block;
}

.blog-content .key_takeaways_cta_dest_url {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 2px solid var(--key-takeaways-cta-bg-color);
	background-color: var(--key-takeaways-cta-bg-color);
	color: var(--key-takeaways-cta-text-color);
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	font-family: var(--blog-font-1);
	font-weight: 500;
	letter-spacing: 0.02em;
	border-radius: var(--border-radius);
	padding: 7px 20px;
	text-decoration: none;
}

.blog-content .key_takeaways_cta_anchor_text {
	font-family: var(--blog-font-1);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.02em;
}

.blog-content .key_takeaways_cta_dest_url:hover {
	cursor: pointer;
	background-color: var(--key-takeaways-cta-hover-bg-color);
	color: var(--key-takeaways-cta-hover-text-color);
}

.blog-content .key_takeaways_cta_dest_url svg {
	stroke: currentColor;
}

/* ----------- References ----------- */
.blog-content #references {
	background-color: var(--references-bg-color);
	color: var(--references-text-color);
	border: 2px solid var(--references-border-color);
	padding: 24px;
	border-radius: var(--border-radius);
	font-size: 16px;
	line-height: 28px;
	margin-top: 32px;
	margin-bottom: 32px;
}

.blog-content #references a {
	color: var(--references-text-color);
}

.blog-content #references a:hover {
	text-decoration: underline;
}

.blog-content #references strong,
.blog-content #references b {
	display: block;
	font-size: 24px;
	line-height: 34px;
	font-family: var(--blog-font-1);
	font-weight: 600;
	color: var(--references-heading-color);
	margin-bottom: 16px;
	letter-spacing: -0.02em;
}

.blog-content #references ul,
.blog-content #references ol {
	padding-left: 0;
	margin-left: 0;
	font-size: 16px;
	line-height: 28px;
	margin-bottom: 0;
	word-break: break-word;
	color: var(--references-text-color);
}

.blog-content #references ul li,
.blog-content #references ol li {
	padding-top: 14px;
	padding-bottom: 14px;
	list-style-type: decimal;
	list-style-position: inside;
	border-bottom: 1px solid var(--references-divider-color);
}

.blog-content #references ul li:first-child,
.blog-content #references ol li:first-child {
	padding-top: 0px;
}

.blog-content #references ul li:last-child,
.blog-content #references ol li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.blog-content #references ul li a,
.blog-content #references ol li a {
	list-style-type: none;
	position: relative;
}

/* ----------- About ----------- */
.about_company {
	border: 2px solid var(--about-company-border-color);
	background-color: var(--about-company-bg-color);
	padding: 24px 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-radius: var(--border-radius);
}

.about_company_title {
	color: var(--about-company-heading-color);
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
}

.about_company_text {
	color: var(--about-company-text-color);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.about_company_social {
	display: flex;
	flex-direction: row;
	gap: 24px;
	flex-wrap: wrap;
}

.about_company_social a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.about_company_social svg {
	fill: var(--about-company-icon-color);
}

/* ----------- Table of Content ----------- */
.toc-overlay {
	display: none;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.2);
	z-index: 99;
}

.toc-overlay.show {
	display: block;
}

#toc {
	border: 2px solid var(--toc-border-color);
	background-color: var(--blog-color-white);
	padding: 16px;
	border-radius: var(--border-radius);
	margin-bottom: 24px;
}

#toc strong,
#toc b {
	font-size: 18px;
	line-height: 28px;
	font-weight: 600;
	display: block;
	width: 100%;
	color: var(--toc-heading-color);
	cursor: pointer;
	position: relative;
	padding: 0;
	margin-bottom: 12px;
}

#toc ul {
	padding: 0;
	margin-left: 0;
	margin-bottom: 0;
	list-style-type: none;
}

#toc ul li {
	margin-bottom: 0;
}

#toc a {
	color: var(--toc-text-color);
	text-decoration: none;
}

#toc summary {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: flex-start;
	list-style: none;
	cursor: pointer;
	font-size: 14px;
	line-height: 22px;
}

#toc>ul>li>a,
#toc summary>a {
	font-size: 14px;
	line-height: 22px;
}

#toc summary::-webkit-details-marker {
	display: none;
}

#toc summary::before {
	display: inline-block;
	width: 14px;
	text-align: center;
	margin-right: 2px;
	content: '+';
}

#toc details[open]>summary::before {
	content: '-';
}

#toc details ul,
#toc details ul a {
	font-size: 12px;
	line-height: 18px;
}

#toc details ul li {
	position: relative;
	padding-left: 12px;
	margin: 8px 0;
}

#toc details ul li::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: transparent;
}

#toc details ul li.active::before {
	background-color: var(--toc-active-text-color);
}

#toc ul li.active>a,
#toc details>summary.active>a {
	color: var(--toc-active-text-color);
}

/* Mobile Table of Contents */
@media (max-width: 1023px) {
	#toc {
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: 20px;
		z-index: 100;
		width: calc(100% - 32px);
		padding: 10px 12px;
		margin-bottom: 0;
	}

	#toc strong::after,
	#toc b::after {
		content: '';
		position: absolute;
		top: 2px;
		right: 0;
		width: 24px;
		height: 24px;
		background-image: url('data:image/svg+xml, <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 15L12 9L18 15" stroke="%2300946e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
		transform: rotate(180deg);
		background-repeat: no-repeat;
		background-size: cover;
	}

	#toc:is(.open) strong::after,
	#toc:is(.open) b::after {
		transform: none;
	}

	#toc ul.hide {
		display: none;
	}

	#toc>ul>li {
		padding: 8px;
	}

	#toc>ul>li>ul {
		margin-top: 8px;
	}
}

/* ----------- Tablet and Desktop Styles ----------- */
@media (min-width: 768px) and (max-width: 1023px) {
	.blog-wrapper {
		margin-left: 24px;
		margin-right: 24px;
	}

	.lead-section .title-container,
	.lead-section .lead-image-container {
		margin-left: 24px;
		margin-right: 24px;
	}

	.title-container h1 {
		font-size: 42px;
		line-height: 48px;
	}

	.blog-wrapper h2 {
		font-size: 28px;
		line-height: 34px;
	}

	.blog-wrapper h3 {
		font-size: 22px;
		line-height: 30px;
	}

	.lead-image {
		height: 300px;
	}
}

@media (min-width: 1024px) {
	.blog-wrapper {
		flex-direction: row-reverse;
		justify-content: space-between;
		margin-left: 32px;
		margin-right: 32px;
	}

	.blog-wrapper h2 {
		font-size: 32px;
		line-height: 38px;
		margin-bottom: 30px;
	}

	.blog-wrapper h3 {
		font-size: 24px;
		line-height: 32px;
		margin-bottom: 24px;
	}

	.blog-wrapper p,
	.blog-content ul,
	.blog-content ol {
		font-size: 18px;
		line-height: 28px;
		margin-bottom: 24px;
	}

	.lead-section {
		margin-bottom: 44px;
		background-size: 40%;
		background-position: right bottom;
	}

	.lead-section .title-container,
	.lead-section .lead-image-container {
		margin-left: 32px;
		margin-right: 32px;
	}

	.title-container h1 {
		font-size: 48px;
		line-height: 56px;

	}

	.lead-section .lead-meta {
		margin-top: 24px;
	}

	.lead-image-container {
		margin-top: 40px;
		margin-bottom: -20px;
	}

	.lead-image {
		height: 400px;
	}

	.flex-container {
		width: 30%;
		order: 0;
		position: sticky;
		top: 96px;
		align-self: flex-start;
	}

	.blog-content {
		width: 68%;
	}

	/* Summary */
	.blog-content #summary {
		padding: 42px 32px 52px 32px;
		margin-bottom: 64px;
		font-size: 20px;
		line-height: 30px;
	}

	.blog-content #summary strong,
	.blog-content #summary b {
		font-size: 32px;
		line-height: 38px;
		margin-bottom: 24px;
	}

	.blog-content #summary p+p {
		margin-top: 24px;
	}

	/* Callout */
	.blog-content .callout {
		width: 340px;
	}

	.blog-content .callout_left {
		float: left;
		margin: 0 30px 20px 0;
	}

	.blog-content .callout_right {
		float: right;
		margin: 0 0 20px 30px;
	}

	/* Quote */
	.blog-content .quote {
		padding: 44px 16px;
	}

	.blog-content .quote_wide_text {
		font-size: 22px;
		line-height: 26px;
	}

	/* Key Takeaways */
	.blog-content #key-takeaways {
		padding: 32px;
		margin-top: 64px;
		margin-bottom: 64px;
	}

	.blog-content #key-takeaways strong,
	.blog-content #key-takeaways b {
		font-size: 32px;
		line-height: 44px;
		margin-bottom: 24px;
	}

	/* References */
	.blog-content #references {
		padding: 32px;
		margin-top: 64px;
		margin-bottom: 64px;
	}

	.blog-content #references strong,
	.blog-content #references b {
		font-size: 28px;
		line-height: 36px;
		margin-bottom: 24px;
	}

	.about_company_title {
		font-size: 20px;
	}

	/* Table of Content */
	#toc {
		position: relative;
		inset: 0;
		display: block;
		background-color: var(--toc-bg-color);
		padding: 16px;
		width: 100%;
	}

	#toc strong,
	#toc b {
		font-size: 20px;
		padding-left: 4px;
		padding-right: 4px;
	}

	#toc strong::after,
	#toc b::after {
		display: none;
	}

	#toc ul.hide {
		display: block;
		visibility: visible;
		opacity: 1;
		height: auto;
	}

	#toc>ul>li {
		padding: 4px 0;
	}

	#toc>ul>li.active,
	#toc>ul>li:has(.active) {
		background: var(--toc-active-bg-color);
		border-radius: var(--border-radius);
		padding: 4px 8px;
	}

	#toc details ul,
	#toc details ul a {
		font-size: 14px;
		line-height: 20px;
	}

	#toc>ul>li>a,
	#toc summary>a,
	#toc summary {
		font-size: 16px;
		line-height: 24px;
	}

	#toc details.active ul {
		margin-top: 8px;
		margin-bottom: 4px;
		border-top: 1px solid var(--toc-active-divider-color);
		padding-top: 8px;
	}
}

@media (min-width: 1280px) {

	.lead-section .title-container,
	.lead-section .lead-image-container,
	.blog-wrapper {
		margin-left: 90px;
		margin-right: 90px;
	}

	.title-container h1 {
		font-size: 60px;
		line-height: 72px;
	}

	.lead-image {
		height: 430px;
	}
}

/* Fixed conflicts and improved consistency */
.blog-content>div:first-child#key-takeaways {
	margin-top: 0;
}

#toc ul li ul li {
	margin: 8px 0;
}

#toc details[open] {
	margin-bottom: 8px;
}

.blog-content::after {
	content: "";
	display: table;
	clear: both;
}

header.header.site-header.main-header.main-header-overlay.is-stuck {
	background-color: white !important;
	;
}