:root {
	--zp-blue: #0000ff;
	--zp-black: #000000;
	--zp-white: #ffffff;
	--zp-dark-grey: #6d6e71;
	--zp-medium-grey: #a7a9ac;
	--zp-light-grey: #e2e3e4;
	--zp-website-light-grey: #f7f7f7;

	--zp-chart-blue-100: #0000ff;
	--zp-chart-blue-90: #1a1aff;
	--zp-chart-blue-80: #3333ff;
	--zp-chart-blue-70: #4d4dff;
	--zp-chart-blue-60: #6666ff;
	--zp-chart-blue-50: #7f7fff;
	--zp-chart-blue-40: #9999ff;
	--zp-chart-blue-30: #b2b2ff;
	--zp-chart-blue-20: #ccccff;
	--zp-chart-blue-10: #e5e5ff;

	--zp-font-brand: 'Gotham', Arial, sans-serif;
	--zp-weight-body: 400;
	--zp-weight-max: 600;
	--zp-weight-button: 500;

	--zp-h2-size: 2.3em;
	--zp-h3-size: 1.6rem;
	--zp-eyebrow-size: 20px;
	--zp-stage-label-size: 0.9rem;
	--zp-body-size: 1em;
	--zp-link-size: 1rem;

	--zp-section-space: clamp(48px, 5.15vw, 72px);
	--zp-band-padding: clamp(48px, 5.15vw, 72px);
	--zp-heading-gap: 35px;

	--zp-radius-button: 3px;
	--zp-radius-max: 10px;
	--zp-angle: 50deg;
}

.zp-section {
	display: flow-root;
	margin: 0;
	padding-top: var(--zp-section-space);
}

.zp-section--last {
	padding-bottom: var(--zp-section-space);
}

.zp-band {
	display: flow-root;
	margin: var(--zp-section-space) 0 0;
	padding: var(--zp-band-padding) 0;
	background-color: var(--zp-website-light-grey);
}

.zp-band--last {
	margin-bottom: var(--zp-section-space);
}

.zp-heading {
	margin: 0 0 var(--zp-heading-gap);
}

.zp-eyebrow {
	display: block;
	margin: 0 0 10px;
	font-family: var(--zp-font-brand);
	font-size: var(--zp-eyebrow-size);
	font-weight: 400;
	line-height: 1.3;
	color: var(--zp-blue);
}

.zp-h2 {
	margin: 0;
	font-family: var(--zp-font-brand);
	font-size: var(--zp-h2-size);
	font-weight: var(--zp-weight-max);
	line-height: 1.2;
	color: var(--zp-black);
}

.zp-h3 {
	margin: 0 0 0.5em;
	font-family: var(--zp-font-brand);
	font-size: var(--zp-h3-size);
	font-weight: var(--zp-weight-max);
	line-height: 1.3;
	color: var(--zp-black);
}

.zp-lede {
	margin: 15px 0 0;
	font-size: var(--zp-body-size);
	line-height: 1.5;
}

.zp-stage-label {
	display: block;
	font-size: var(--zp-stage-label-size);
	font-weight: var(--zp-weight-max);
	line-height: 1.3;
}

.zp-link {
	font-size: var(--zp-link-size);
	font-weight: var(--zp-weight-max);
	color: var(--zp-blue);
	text-decoration: none;
}

.zp-link:hover,
.zp-link:focus-visible {
	text-decoration: underline;
}

.zp-btn {
	display: inline-block;
	padding: calc(0.6em + 2px) calc(1.2em + 2px);
	font-family: var(--zp-font-brand);
	font-size: var(--zp-link-size);
	font-weight: var(--zp-weight-button);
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	color: var(--zp-white);
	background-color: var(--zp-blue);
	border: 2px solid var(--zp-blue);
	border-radius: var(--zp-radius-button);
	transition: transform 0.2s ease-in-out;
}

.zp-btn:hover,
.zp-btn:focus-visible {
	color: var(--zp-white);
	transform: translateX(3px);
}

.zp-btn--outline {
	color: var(--zp-blue);
	background-color: transparent;
}

.zp-btn--outline:hover,
.zp-btn--outline:focus-visible {
	color: var(--zp-blue);
}

.zp-btn:focus-visible,
.zp-link:focus-visible {
	outline: 2px solid var(--zp-blue) !important;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.zp-btn {
		transition: none;
	}

	.zp-btn:hover,
	.zp-btn:focus-visible {
		transform: none;
	}
}