.pd-blog-article {
	--pd-blog-ink: #132635;
	--pd-blog-blue: #1f638c;
	--pd-blog-mist: #edf5f8;
	--pd-blog-line: rgba(19, 38, 53, 0.14);
	--pd-blog-accent: #0f9d91;
	max-width: 920px;
	margin: clamp(28px, 4vw, 56px) auto clamp(64px, 8vw, 104px);
	color: var(--pd-blog-ink);
	font-size: 18px;
	line-height: 1.78;
}

.pd-blog-article > * {
	max-width: 760px;
	margin-inline: auto;
}

.pd-blog-article a {
	color: var(--pd-blog-blue);
	font-weight: 700;
	text-decoration-color: color-mix(in srgb, var(--pd-blog-accent) 68%, transparent);
	text-underline-offset: 4px;
}

.pd-blog-article p,
.pd-blog-article ul,
.pd-blog-article ol {
	margin-top: 0;
	margin-bottom: 22px;
}

.pd-blog-article h2,
.pd-blog-article h3 {
	color: var(--pd-blog-ink);
	line-height: 1.18;
}

.pd-blog-article h2 {
	margin-top: clamp(38px, 5vw, 64px);
	margin-bottom: 16px;
	font-size: 38px;
}

.pd-blog-article h3 {
	margin-top: 30px;
	margin-bottom: 12px;
	font-size: 26px;
}

.pd-blog-article ul,
.pd-blog-article ol {
	padding-left: 24px;
}

.pd-blog-article li + li {
	margin-top: 10px;
}

.pd-blog-article__lead {
	margin-bottom: 28px;
	color: color-mix(in srgb, var(--pd-blog-ink) 80%, var(--pd-blog-blue));
	font-size: 24px;
	line-height: 1.55;
}

.pd-blog-article__answer,
.pd-blog-article__note,
.pd-blog-article__cta,
.pd-blog-article__toc {
	border: 1px solid var(--pd-blog-line);
	border-radius: 8px;
}

.pd-blog-article__answer {
	display: grid;
	gap: 10px;
	max-width: 920px;
	margin-bottom: clamp(30px, 4vw, 46px);
	padding: clamp(22px, 3vw, 34px);
	background:
		linear-gradient(135deg, rgba(31, 99, 140, 0.1), rgba(15, 157, 145, 0.08)),
		var(--pd-blog-mist);
}

.pd-blog-article__kicker {
	margin: 0;
	color: var(--pd-blog-blue);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: uppercase;
}

.pd-blog-article__answer p:last-child,
.pd-blog-article__note p:last-child,
.pd-blog-article__cta p:last-child {
	margin-bottom: 0;
}

.pd-blog-article__toc {
	margin-bottom: 34px;
	padding: 22px;
	background: #ffffff;
	box-shadow: 0 18px 54px rgba(19, 38, 53, 0.08);
}

.pd-blog-article__toc strong {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
}

.pd-blog-article__toc ol {
	display: grid;
	gap: 8px;
	margin-bottom: 0;
	padding-left: 20px;
	font-size: 16px;
	line-height: 1.45;
}

.pd-blog-article__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 920px;
	margin-top: 24px;
	margin-bottom: 30px;
}

.pd-blog-article__point {
	min-width: 0;
	padding: 20px;
	background: #ffffff;
	border: 1px solid var(--pd-blog-line);
	border-top: 3px solid var(--pd-blog-accent);
	border-radius: 8px;
	box-shadow: 0 18px 46px rgba(19, 38, 53, 0.07);
}

.pd-blog-article__point h3 {
	margin-top: 0;
	font-size: 21px;
}

.pd-blog-article__point p {
	margin-bottom: 0;
	font-size: 16px;
	line-height: 1.62;
}

.pd-blog-article__note {
	margin-top: 28px;
	margin-bottom: 34px;
	padding: clamp(20px, 3vw, 28px);
	background: color-mix(in srgb, var(--pd-blog-mist) 74%, #ffffff);
	border-left: 4px solid var(--pd-blog-blue);
}

.pd-blog-article__steps {
	counter-reset: pd-blog-step;
	padding-left: 0;
	list-style: none;
}

.pd-blog-article__steps li {
	position: relative;
	padding-left: 58px;
}

.pd-blog-article__steps li::before {
	position: absolute;
	top: 2px;
	left: 0;
	display: grid;
	width: 38px;
	height: 38px;
	color: #ffffff;
	content: counter(pd-blog-step);
	background: var(--pd-blog-blue);
	border-radius: 999px;
	counter-increment: pd-blog-step;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	place-items: center;
}

.pd-blog-article__faq {
	max-width: 920px;
	margin-top: 24px;
}

.pd-blog-article__faq details {
	background: #ffffff;
	border: 1px solid var(--pd-blog-line);
	border-radius: 8px;
	box-shadow: 0 14px 36px rgba(19, 38, 53, 0.06);
}

.pd-blog-article__faq details + details {
	margin-top: 12px;
}

.pd-blog-article__faq summary {
	position: relative;
	padding: 20px 56px 20px 22px;
	cursor: pointer;
	font-weight: 800;
	line-height: 1.35;
	list-style: none;
}

.pd-blog-article__faq summary::-webkit-details-marker {
	display: none;
}

.pd-blog-article__faq summary::after {
	position: absolute;
	top: 18px;
	right: 20px;
	display: grid;
	width: 28px;
	height: 28px;
	color: var(--pd-blog-blue);
	content: "+";
	background: var(--pd-blog-mist);
	border-radius: 999px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	place-items: center;
}

.pd-blog-article__faq details[open] summary::after {
	content: "-";
}

.pd-blog-article__faq p {
	margin-bottom: 0;
	padding: 0 22px 22px;
	font-size: 16px;
	line-height: 1.68;
}

.pd-blog-article__cta {
	display: grid;
	gap: 12px;
	max-width: 920px;
	margin-top: clamp(38px, 5vw, 58px);
	padding: clamp(24px, 4vw, 40px);
	color: #ffffff;
	background: linear-gradient(135deg, #123349, #1f638c 58%, #0f9d91);
}

.pd-blog-article__cta h2 {
	margin: 0;
	color: #ffffff;
	font-size: 36px;
}

.pd-blog-article__cta a {
	justify-self: start;
	padding: 12px 18px;
	color: var(--pd-blog-ink);
	background: #ffffff;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
}

@media (max-width: 760px) {
	.pd-blog-article {
		font-size: 17px;
		line-height: 1.72;
	}

	.pd-blog-article h2 {
		font-size: 30px;
	}

	.pd-blog-article h3 {
		font-size: 23px;
	}

	.pd-blog-article__lead {
		font-size: 21px;
	}

	.pd-blog-article__cta h2 {
		font-size: 29px;
	}

	.pd-blog-article__grid {
		grid-template-columns: 1fr;
	}

	.pd-blog-article__steps li {
		padding-left: 50px;
	}
}
