/* Login v3: focused centre column, one brand signature (the red slash from the logo), glass card. */
.l3-err {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: 6px;
	background: rgba(232, 0, 13, .08);
	border: 1px solid rgba(232, 0, 13, .3);
	font-size: 13px;
	line-height: 19px;
	color: #b00009;
}

.l3-caps {
	margin: -6px 0 0;
	font-size: 12px;
	color: #a15c00;
}

.l3-caps::before {
	content: "⇪ ";
}

.l3-btn {
	position: relative;
	margin-top: 6px;
	padding: 15px;
	border: 0;
	border-radius: var(--radius);
	background: var(--ink);
	color: #fff;
	font: 600 14px/1 inherit;
	font-family: inherit;
	letter-spacing: .06em;
	cursor: pointer;
	transition: background-color .2s, transform .1s;
}

.l3-btn:hover {
	background: var(--accent);
}

.l3-btn:active {
	transform: translateY(1px);
}

.l3-btn.busy {
	background: var(--accent);
	pointer-events: none;
}

.l3-btn.busy::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: lgSpin .7s linear infinite;
}

.l3-sign {
	margin: 22px 0 0;
	font-size: 14px;
	color: rgba(9, 9, 11, .55);
}

.l3-sign a {
	font-weight: 600;
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 4px;
}

.l3-sign a:hover {
	color: var(--accent);
}