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

.screen-reader-text:focus {
	z-index: 100000;
	top: var(--myco-space-md);
	left: var(--myco-space-md);
	width: auto;
	height: auto;
	padding: var(--myco-space-sm) var(--myco-space-md);
	clip: auto;
	background: var(--myco-color-white);
	border-radius: var(--myco-radius-sm);
	box-shadow: var(--myco-shadow-card);
	color: var(--myco-color-primary);
}

.myco-visually-muted {
	color: var(--myco-color-muted);
}

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

[data-reveal] {
	opacity: 1;
	transform: none;
}

.js [data-reveal] {
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 420ms ease, transform 420ms ease;
}

.js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	/* !important is deliberate here (the single sanctioned use): it must beat component-selector specificity to fully honor the user's reduced-motion preference. */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}

	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}
}