/**
 * MSAD Login 2026 -- standalone full-viewport login card.
 * Spec: "MSAD Login.dc.html".
 */

.msad-h26--login {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--h26-navy);
	position: relative;
	overflow: hidden;
}

/* Decorative sky circles */
.msad-h26__login-orb {
	position: absolute;
	border-radius: 999px;
}

.msad-h26__login-orb--tr {
	right: -120px;
	top: -140px;
	width: 480px;
	height: 480px;
	background: rgba(56, 157, 214, 0.12);
}

.msad-h26__login-orb--bl {
	left: -160px;
	bottom: -200px;
	width: 520px;
	height: 520px;
	background: rgba(56, 157, 214, 0.08);
}

/* Centered lockup */
.msad-h26__login-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 32px;
	min-height: 96px;
}

.msad-h26__login-lockup {
	text-align: center;
}

.msad-h26__login-lockup .msad-h26__wordmark {
	color: #fff;
}

.msad-h26__login-lockup .msad-h26__lockup-rule {
	background: rgba(255, 255, 255, 0.25);
}

.msad-h26__login-lockup .msad-h26__lockup-sub {
	color: var(--h26-on-navy);
}

/* Card area */
.msad-h26__login-main {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 32px 64px;
}

.msad-h26__login-col {
	width: 100%;
	max-width: 440px;
}

.msad-h26__login-card {
	background: #fff;
	border-radius: 16px;
	padding: 40px 42px 38px;
	box-shadow: 0 24px 64px rgba(10, 18, 40, 0.4);
}

.msad-h26__login-title {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 28px;
	letter-spacing: -0.03em;
	color: var(--h26-navy);
	margin: 0;
}

.msad-h26__login-title-stop {
	color: var(--h26-accent);
}

.msad-h26__login-sub {
	font-size: 15px;
	line-height: 1.6;
	color: var(--h26-muted);
	margin: 10px 0 0;
}

.msad-h26__login-field {
	margin-top: 18px;
}

.msad-h26__login-field:first-of-type {
	margin-top: 28px;
}

.msad-h26__login-label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 7px;
}

.msad-h26__login-label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--h26-navy);
}

.msad-h26__login-field > .msad-h26__login-label {
	margin-bottom: 7px;
}

.msad-h26__login-forgot {
	font-weight: 700;
	font-size: 13px;
	color: var(--h26-sky-700);
	padding-bottom: 2px;
	box-shadow: inset 0 0 0 transparent;
	transition: box-shadow var(--h26-transition), color var(--h26-transition);
}

.msad-h26__login-forgot:hover,
.msad-h26__login-forgot:focus-visible {
	color: var(--h26-navy);
	box-shadow: inset 0 -2px 0 var(--h26-navy);
}

.msad-h26__login-input {
	width: 100%;
	box-sizing: border-box;
	min-height: 50px;
	border: 1.5px solid var(--h26-hairline);
	border-radius: 8px;
	padding: 13px 15px;
	font-family: var(--h26-font-body);
	font-size: 15.5px;
	color: var(--h26-text);
}

.msad-h26__login-input:focus {
	outline: var(--h26-focus);
	outline-offset: 2px;
}

.msad-h26__login-remember {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	cursor: pointer;
	font-size: 14.5px;
	color: var(--h26-text);
}

.msad-h26__login-remember input {
	width: 18px;
	height: 18px;
	accent-color: var(--h26-navy);
}

.msad-h26__login-submit {
	width: 100%;
	text-align: center;
	margin-top: 24px;
	font-family: var(--h26-font-body);
	font-weight: 700;
	font-size: 16px;
	min-height: 52px;
	border: 0;
	border-radius: 8px;
	background: var(--brand-cranberry);
	color: var(--white);
	cursor: pointer;
	transition: background-color var(--h26-transition), color var(--h26-transition);
}

.msad-h26__login-submit:hover,
.msad-h26__login-submit:focus-visible {
	background: var(--brand-cranberry-700);
	color: var(--white);
}

/* "New here?" divider */
.msad-h26__login-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 26px 0 0;
}

.msad-h26__login-divider::before,
.msad-h26__login-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--h26-border);
}

.msad-h26__login-divider-label {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--h26-muted-nav);
}

.msad-h26__login-join {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--h26-muted);
	margin: 14px 0 0;
	text-align: center;
}

.msad-h26__login-join strong {
	color: var(--h26-navy);
}

.msad-h26__login-join a {
	font-weight: 700;
	color: var(--h26-sky-700);
	padding-bottom: 2px;
	box-shadow: inset 0 0 0 transparent;
	transition: box-shadow var(--h26-transition), color var(--h26-transition);
}

.msad-h26__login-join a:hover,
.msad-h26__login-join a:focus-visible {
	color: var(--h26-navy);
	box-shadow: inset 0 -2px 0 var(--h26-navy);
}

/* Under-card links */
.msad-h26__login-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	margin-top: 24px;
	font-size: 14px;
	font-weight: 600;
}

.msad-h26__login-links a {
	color: var(--h26-on-navy);
	padding-bottom: 3px;
	box-shadow: inset 0 0 0 transparent;
	transition: box-shadow var(--h26-transition), color var(--h26-transition);
}

.msad-h26__login-links a:hover,
.msad-h26__login-links a:focus-visible {
	color: #fff;
	box-shadow: inset 0 -2px 0 var(--h26-accent);
}

.msad-h26__login-links i {
	margin-right: 7px;
}

/* Stripe pinned to the viewport bottom */
.msad-h26--login .msad-h26__stripe {
	position: relative;
}

@media (max-width: 520px) {
	.msad-h26__login-card {
		padding: 28px 24px;
	}

	.msad-h26__login-links {
		flex-direction: column;
		gap: 14px;
	}
}