.hero-page {
	margin: 0;
	background: #15131c;
	color: #f6f4fa;
	font-family: "Segoe UI", Arial, sans-serif;
}
.login-hero {
	--hero-base: #17151f;
	--hero-ink: #f7f5fc;
	--hero-warm: #f3a476;
	--hero-cool: #a696ed;
	--hero-gutter: clamp(22px, 7vw, 128px);
	--mast-height: 72px;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template: "stage" 1fr / minmax(0, 1fr);
	min-height: 100vh;
	min-height: 100svh;
	background: var(--hero-base);
	color: var(--hero-ink);
}
.hero-scene, .hero-art, .hero-mist, .hero-screen, .hero-field {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.hero-scene { z-index: -1; overflow: hidden; }
.hero-art {
	object-fit: cover;
	object-position: center;
	opacity: .28;
	filter: saturate(.72);
}
.hero-scene--partner .hero-art { opacity: .52; }
.hero-mist {
	background: radial-gradient(ellipse at center, rgba(18,16,26,.66), transparent 68%),
		linear-gradient(0deg, rgba(18,15,27,.62), rgba(18,15,27,.16) 52%, rgba(18,15,27,.49));
}
.hero-screen {
	background: radial-gradient(circle, rgba(218,210,238,.38) 1px, transparent 1.4px) 0 0 / 9px 9px;
}
.hero-field-ready .hero-screen {
	background: radial-gradient(ellipse at 27% 67%, color-mix(in srgb, var(--hero-warm) 13%, transparent), transparent 42%),
		radial-gradient(ellipse at 79% 31%, color-mix(in srgb, var(--hero-cool) 14%, transparent), transparent 39%);
}
@media (prefers-reduced-motion: no-preference) {
	.hero-field-ready .hero-screen { animation: hero-light 18s ease-in-out infinite alternate; }
	@keyframes hero-light {
		from { transform: translate(-3%, 2%) scale(1.09); opacity: .55; }
		to { transform: translate(3%, -2%) scale(1.09); opacity: 1; }
	}
}
.hero-field { display: block; }

.hero-mast {
	grid-area: stage;
	align-self: start;
	z-index: 1;
	border-bottom: 1px solid rgba(232,226,244,.12);
	background: linear-gradient(rgba(22,20,30,.7), rgba(22,20,30,.30));
}
.hero-mast-inner, .hero-main {
	width: min(calc(100% - 2 * var(--hero-gutter)), 1540px);
	margin-inline: auto;
}
.hero-mast-inner { min-height: var(--mast-height); display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.hero-wordmark { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 26px; font-weight: 600; letter-spacing: -.065em; line-height: 1; }
.hero-wordmark img { width: 37px; height: 37px; object-fit: contain; }
.hero-partner { max-width: 160px; height: 34px; box-sizing: border-box; padding: 6px 11px; border-radius: 4px; background: #f5f3f5; object-fit: contain; }

.hero-main {
	position: relative;
	grid-area: stage;
	display: grid;
	place-items: center;
	padding-block: calc(var(--mast-height) + 20px);
}
.hero-main::before, .hero-main::after {
	content: "";
	position: absolute;
	inset-block: 0;
	width: 1px;
	background: linear-gradient(to bottom, rgba(239,230,255,.07), rgba(239,230,255,.02));
	pointer-events: none;
}
.hero-main::before { left: -26px; }
.hero-main::after { right: -26px; }

.hero-form {
	box-sizing: border-box;
	width: min(100%, 454px);
	padding: clamp(24px, 3.2vw, 44px);
	border: 1px solid rgba(230,219,249,.22);
	border-radius: 14px;
	background: linear-gradient(145deg, rgba(36,32,46,.98), rgba(22,20,30,.98));
	box-shadow: 0 18px 70px rgba(10,8,16,.45);
	color: var(--hero-ink);
}
.hero-form h1 {
	margin: 0 0 clamp(24px, 3.3vh, 34px);
	color: var(--hero-ink);
	font: 600 clamp(42px, 4.5vw, 58px)/1.08 "Segoe UI", Arial, sans-serif;
	letter-spacing: -.06em;
}
.hero-form .form-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 8px 10px;
	margin: 0 0 20px;
}
.hero-form .hero-field-label.sr-only {
	position: static;
	grid-area: 1 / 1;
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	white-space: normal;
	color: #f2eff8;
	font-size: 14px;
	font-weight: 500;
}
.hero-form .login-lost {
	grid-area: 1 / 2;
	color: #ddd2ee;
	font-size: 13px;
	text-underline-offset: 3px;
}
.hero-form .login-lost:hover, .hero-form .login-lost:focus-visible { color: #fff; text-decoration: underline; }
.hero-form input.form-control {
	grid-column: 1 / -1;
	width: 100%;
	height: 49px;
	padding: 11px 15px;
	border: 1px solid #655e74;
	border-radius: 5px;
	box-shadow: none;
	background: #24212e;
	color: #fff;
	caret-color: var(--hero-warm);
	font: 400 16px/1.4 "Segoe UI", Arial, sans-serif;
}
.hero-form input.form-control::placeholder { color: transparent; }
.hero-form .form-control-feedback { display: none; }
.hero-form input.form-control:focus {
	border-color: var(--hero-cool);
	outline: 2px solid var(--hero-cool);
	outline-offset: 2px;
	box-shadow: none;
}
.hero-form .row { margin: 0; display: grid; gap: 22px; }
.hero-form .row::before, .hero-form .row::after { display: none; }
.hero-form .row > div { width: 100%; float: none; padding: 0; }
.hero-form .checkbox { margin: 0; min-height: 22px; }
.hero-form .checkbox label { display: inline-flex; align-items: center; gap: 9px; padding-left: 0; margin: 0; color: #dbd6e3; font-size: 14px; font-weight: 400; }
.hero-form .checkbox input[type=checkbox] { position: static; margin: 0; width: 16px; height: 16px; accent-color: var(--hero-cool); }
.hero-form #main-loginButton {
	position: relative;
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 12px 50px 12px 18px;
	border: 1px solid rgba(240,224,255,.38);
	border-color: rgba(240,224,255,.38) !important;
	border-radius: 5px;
	/* The shared form also carries the application's important .btn-danger colours. */
	background: linear-gradient(105deg, #714534, #503961 92%) !important;
	background: linear-gradient(105deg, color-mix(in srgb, var(--hero-warm) 39%, #251823), color-mix(in srgb, var(--hero-cool) 33%, #281e36)) !important;
	color: #fff;
	box-shadow: none;
	text-align: left;
	text-transform: none;
	font: 600 16px/1.4 "Segoe UI", Arial, sans-serif;
}
.hero-form #main-loginButton::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 21px;
	height: 14px;
	transform: translateY(-50%);
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 14' fill='none' stroke='white' stroke-width='1.5'%3E%3Cpath d='M1 7h17m-5.5-5.5L18 7l-5.5 5.5'/%3E%3C/svg%3E");
}
.hero-form #main-loginButton:hover { filter: brightness(1.18); }
.hero-form :is(button, a, input[type=checkbox]):focus-visible { outline: 2px solid var(--hero-cool); outline-offset: 4px; }
.hero-form .alert, .hero-form .callout { margin: 0 0 20px; }

@media (max-width: 860px) {
	.login-hero { --mast-height: 60px; }
	.hero-wordmark { font-size: 23px; }
	.hero-wordmark img { width: 31px; height: 31px; }
	.hero-main::before, .hero-main::after { display: none; }
}
@media (forced-colors: active) {
	.hero-scene { display: none; }
	.hero-form #main-loginButton, .hero-form input.form-control { border: 1px solid ButtonText; }
}