.voter-login-page {
	position: relative;
	display: grid;
	min-height: min(720px, calc(100vh - 160px));
	place-items: center;
	padding: clamp(2.5rem, 7vw, 6rem) 1rem;
	overflow: hidden;
	background: #eef7f1;
}

.voter-login-page__background {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 10% 15%, rgb(255 199 44 / 18%), transparent 28rem),
		radial-gradient(circle at 90% 80%, rgb(0 102 61 / 16%), transparent 30rem);
	pointer-events: none;
}

.voter-login-page__inner {
	position: relative;
	z-index: 1;
	width: min(100%, 34rem);
}

.voter-login {
	padding: clamp(1.5rem, 5vw, 2.75rem);
	border: 1px solid rgb(0 74 44 / 12%);
	border-radius: 1.25rem;
	background: #fff;
	box-shadow: 0 1.5rem 4rem rgb(0 58 35 / 14%);
}

.voter-login__intro {
	margin-bottom: 1.75rem;
}

.voter-login__eyebrow {
	margin: 0 0 .65rem;
	color: #087544;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.voter-login h1 {
	margin: 0 0 .7rem;
	color: #073b28;
	font-size: clamp(2rem, 7vw, 2.8rem);
	line-height: 1.05;
}

.voter-login__intro > p:last-child,
.voter-login__help {
	color: #52635a;
}

.voter-login__form {
	display: grid;
	gap: .7rem;
}

.voter-login__form > label:not(.voter-login__remember) {
	margin-top: .35rem;
	color: #183f30;
	font-size: .92rem;
	font-weight: 750;
}

.voter-login__form input[type="text"],
.voter-login__form input[type="password"] {
	width: 100%;
	min-height: 3.25rem;
	padding: .8rem 1rem;
	border: 1px solid #b8c9c0;
	border-radius: .7rem;
	background: #fbfdfc;
	color: #132b21;
	font: inherit;
}

.voter-login__form input:focus {
	border-color: #087544;
	outline: 3px solid rgb(8 117 68 / 18%);
	outline-offset: 1px;
}

.voter-login__remember {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	margin: .35rem 0 .65rem;
	color: #40574c;
	font-size: .9rem;
}

.voter-login__remember input {
	width: 1.1rem;
	height: 1.1rem;
	margin-top: .1rem;
	accent-color: #087544;
}

.voter-login__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: .8rem 1.3rem;
	border: 0;
	border-radius: 999px;
	background: #066b3d;
	box-shadow: 0 .65rem 1.4rem rgb(6 107 61 / 20%);
	color: #fff;
	font: inherit;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.voter-login__button:hover {
	background: #045a33;
	color: #fff;
	transform: translateY(-1px);
}

.voter-login__button:focus-visible,
.voter-login__secondary:focus-visible {
	outline: 3px solid #ffc72c;
	outline-offset: 3px;
}

.voter-login__notice {
	margin: 0 0 1.25rem;
	padding: .9rem 1rem;
	border-radius: .75rem;
	font-size: .94rem;
	font-weight: 650;
}

.voter-login__notice--error {
	border: 1px solid #efb5b5;
	background: #fff1f1;
	color: #842020;
}

.voter-login__notice--success {
	border: 1px solid #a9d6ba;
	background: #eefaf2;
	color: #0a5a34;
}

.voter-login__actions {
	display: grid;
	gap: .85rem;
}

.voter-login__secondary {
	color: #066b3d;
	font-weight: 750;
	text-align: center;
}

.voter-login__help {
	margin: 1.5rem 0 0;
	font-size: .86rem;
	line-height: 1.6;
	text-align: center;
}

@media (max-width: 480px) {
	.voter-login-page {
		min-height: calc(100vh - 130px);
		padding: 1.25rem .75rem 2.5rem;
	}

	.voter-login {
		border-radius: 1rem;
	}
}

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