.a8-banner {
	/* Local 10px unit — matches theme html { font-size: 62.5% } rem scale. */
	--a8-banner-unit: 10px;

	position: relative;
	width: 100%;
	padding: var(--a8-banner-padding-top, calc(1 * var(--a8-banner-unit))) var(--a8-banner-padding-right, calc(4 * var(--a8-banner-unit))) var(--a8-banner-padding-bottom, calc(1 * var(--a8-banner-unit))) var(--a8-banner-padding-left, calc(1 * var(--a8-banner-unit)));
	line-height: 1.4;
	text-align: center;
	background: var(--a8-banner-bg, #151831);
	color: var(--a8-banner-color, #fff);
	font-family: var(--a8-banner-font, 'Inter', sans-serif);
	font-size: var(--a8-banner-unit);
	z-index: 1;
}

@media (max-width: 767px) {
	.a8-banner {
		padding-top: var(--a8-banner-padding-top-mobile, var(--a8-banner-padding-top, calc(1 * var(--a8-banner-unit))));
		padding-right: var(--a8-banner-padding-right-mobile, var(--a8-banner-padding-right, calc(4 * var(--a8-banner-unit))));
		padding-bottom: var(--a8-banner-padding-bottom-mobile, var(--a8-banner-padding-bottom, calc(1 * var(--a8-banner-unit))));
		padding-left: var(--a8-banner-padding-left-mobile, var(--a8-banner-padding-left, calc(1 * var(--a8-banner-unit))));
	}
}

.a8-banner-sticky-shell {
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 100;
}

.admin-bar .a8-banner-sticky-shell {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .a8-banner-sticky-shell {
		top: 46px;
	}
}

body.a8-banner-scroll-with-nav .a8-banner-sticky-shell .site-header,
body.a8-banner-scroll-with-nav .a8-banner-sticky-shell #masthead,
body.a8-banner-scroll-with-nav.admin-bar .a8-banner-sticky-shell .site-header,
body.a8-banner-scroll-with-nav.admin-bar .a8-banner-sticky-shell #masthead {
	position: relative;
	top: auto;
}

.a8-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--a8-banner-content-gap, calc(2 * var(--a8-banner-unit)));
	max-width: 1350px;
	margin: 0 auto;
	padding: 0 calc(1.5 * var(--a8-banner-unit));
}

@media (max-width: 767px) {
	.a8-banner__inner {
		gap: var(--a8-banner-content-gap-mobile, var(--a8-banner-content-gap, calc(2 * var(--a8-banner-unit))));
	}
}

@media (min-width: 768px) {
	.a8-banner__inner {
		flex-direction: row;
	}
}

.a8-banner__message {
	margin: 0;
	color: inherit;
	font-size: var(--a8-banner-text-font-size, calc(1.4 * var(--a8-banner-unit)));
	line-height: inherit;
}

.a8-banner__message > :first-child {
	margin-top: 0;
}

.a8-banner__message > :last-child {
	margin-bottom: 0;
}

.a8-banner__message a {
	color: var(--a8-banner-link-color, currentColor);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.a8-banner__message a:hover {
	color: var(--a8-banner-link-hover-color, var(--a8-banner-link-color, currentColor));
}

.a8-banner__message a:focus {
	color: var(--a8-banner-link-focus-color, var(--a8-banner-link-hover-color, var(--a8-banner-link-color, currentColor)));
}

.a8-banner__message strong,
.a8-banner__message b {
	font-weight: 600;
}

.a8-banner__cta {
	white-space: normal;
	text-align: center;
	text-decoration: none;
}

@media (min-width: 768px) {
	.a8-banner__cta {
		white-space: nowrap;
	}
}

.a8-banner__cta--arrow {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.a8-banner__cta--arrow::after {
	content: '';
	display: inline-block;
	flex: 0 0 auto;
	width: 0.75em;
	aspect-ratio: 14 / 10;
	margin-left: calc(0.8 * var(--a8-banner-unit));
	background-color: currentColor;
	-webkit-mask-image: url('../images/long-arrow.svg');
	mask-image: url('../images/long-arrow.svg');
	-webkit-mask-size: 100%;
	mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.a8-banner__cta--link.a8-banner__cta--arrow .a8-banner__cta-text {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.a8-banner__cta--hidden {
	display: none;
}

.a8-banner .button {
	margin: 0;
	min-width: 0;
}

.a8-banner .button.button--solid-on-dark {
	color: var(--a8-banner-cta-color, #fff);
	background-color: var(--a8-banner-cta-bg, #6966ff);
	border-style: solid;
	border-width: var(--a8-banner-cta-border-width, calc(0.2 * var(--a8-banner-unit)));
	border-color: var(--a8-banner-cta-border, var(--a8-banner-cta-bg, #6966ff));
	font-size: var(--a8-banner-cta-font-size, calc(1.4 * var(--a8-banner-unit))) !important;
	transition: background-color 110ms ease-in-out, border-color 110ms ease-in-out, color 110ms ease-in-out, box-shadow 110ms ease-in-out;
}

.a8-banner .button.button--solid-on-dark:hover {
	color: var(--a8-banner-cta-hover-color, #fff);
	background-color: var(--a8-banner-cta-hover-bg, #212350);
	border-color: var(--a8-banner-cta-hover-border, #6966ff);
}

.a8-banner .button.button--solid-on-dark:focus {
	color: var(--a8-banner-cta-focus-color, var(--a8-banner-cta-hover-color, #fff));
	background-color: var(--a8-banner-cta-focus-bg, var(--a8-banner-cta-hover-bg, #212350));
	border-color: var(--a8-banner-cta-focus-border, var(--a8-banner-cta-hover-border, #6966ff));
}

.a8-banner__cta--link {
	color: var(--a8-banner-cta-link-color, var(--a8-banner-link-color, currentColor));
	font-size: var(--a8-banner-cta-font-size, var(--a8-banner-text-font-size, calc(1.4 * var(--a8-banner-unit))));
	text-decoration: underline;
	text-underline-offset: 0.15em;
	font-weight: 600;
	transition: color 110ms ease-in-out;
}

.a8-banner__cta--link:hover {
	color: var(--a8-banner-cta-link-hover-color, var(--a8-banner-cta-link-color, currentColor));
}

.a8-banner__cta--link:focus {
	color: var(--a8-banner-cta-link-focus-color, var(--a8-banner-cta-link-hover-color, var(--a8-banner-cta-link-color, currentColor)));
}

.a8-banner__close {
	position: absolute;
	top: 50%;
	right: calc(1 * var(--a8-banner-unit));
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: var(--a8-banner-close-color, var(--a8-banner-color, currentColor));
	cursor: pointer;
	line-height: 1;
	font-size: calc(2.4 * var(--a8-banner-unit));
	padding: calc(0.25 * var(--a8-banner-unit)) calc(0.75 * var(--a8-banner-unit));
	opacity: 0.7;
	transition: opacity 150ms ease;
	border-radius: calc(0.25 * var(--a8-banner-unit));
}

.a8-banner__close:hover,
.a8-banner__close:focus {
	opacity: 1;
}

/* Keyboard focus rings — visible on light and dark banner backgrounds. */
.a8-banner__close:focus-visible,
.a8-banner__message a:focus-visible,
.a8-banner__cta--link:focus-visible,
.a8-banner .button.button--solid-on-dark:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.a8-banner__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.a8-banner .button.button--solid-on-dark,
	.a8-banner__cta--link,
	.a8-banner__close {
		transition: none;
	}
}