body.login-body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	color: var(--color-text-ink);
	background:
		radial-gradient(circle at 50% -15%, #4a5b72 0, #344257 34%, #273445 72%, #222d3b 100%);
}

.login-page {
	width: 100%;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	box-sizing: border-box;
}

.login-shell {
	width: min(100%, 980px);
	min-height: 590px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(390px, 0.88fr);
	overflow: hidden;
	background: var(--color-surface);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 18px;
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.14);
}

.login-brand-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 48px;
	overflow: hidden;
	color: var(--color-text-inverse);
	background: linear-gradient(145deg, #1f2937 0%, #2c394a 55%, #36465b 100%);
}

.login-brand-panel::before,
.login-brand-panel::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 50%;
}

.login-brand-panel::before {
	top: -150px;
	right: -120px;
	width: 360px;
	height: 360px;
}

.login-brand-panel::after {
	right: -80px;
	bottom: -180px;
	width: 420px;
	height: 420px;
}

.login-brand-content,
.login-brand-footer {
	position: relative;
	z-index: 1;
}

.login-brand-logo {
	display: block;
	width: 168px;
	height: auto;
	margin: 0 0 30px;
	filter: invert(1);
}

.login-brand-divider {
	width: 42px;
	height: 2px;
	margin-bottom: 28px;
	background: rgba(255, 255, 255, 0.4);
}

.login-brand-kicker {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, 0.58);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.login-brand-heading {
	max-width: 380px;
	margin: 0;
	color: var(--color-text-inverse);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.login-brand-copy {
	max-width: 380px;
	margin: 22px 0 0;
	color: rgba(255, 255, 255, 0.64);
	font-size: 0.95rem;
	line-height: 1.65;
}

.login-brand-footer {
	color: rgba(255, 255, 255, 0.38);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.login-card {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	padding: 52px;
	background: var(--color-surface);
	box-sizing: border-box;
}

.login-mobile-brand {
	display: none;
}

.login-card-header {
	margin-bottom: 30px;
}

.login-eyebrow {
	margin: 0 0 8px;
	color: var(--color-text-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.login-title {
	margin: 0;
	color: var(--color-text-ink);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.login-description {
	margin: 9px 0 0;
	color: var(--color-text-muted);
	font-size: 0.925rem;
	line-height: 1.5;
}

.login-card .form-group {
	margin-bottom: 20px;
}

.login-card label {
	display: block;
	margin-bottom: 7px;
	color: var(--color-text);
	font-size: 0.86rem;
	font-weight: 600;
}

.login-card input,
.login-card button {
	max-width: 100%;
}

.login-card input {
	width: 100%;
	min-height: 48px;
	padding: 11px 13px;
	color: #1a1a1a;
	background: var(--color-surface);
	border: 1px solid #cfd4da;
	border-radius: 8px;
	outline: none;
	box-sizing: border-box;
	font: inherit;
	font-size: 0.95rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.login-card input::placeholder {
	color: var(--color-text-muted);
}

.login-card input:hover {
	border-color: #aab1b9;
}

.login-card input:focus {
	border-color: #344054;
	box-shadow: 0 0 0 3px rgba(52, 64, 84, 0.12);
}

.login-submit {
	width: 100%;
	min-height: 48px;
	margin-top: 4px;
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 700;
}

.login-submit:disabled {
	cursor: wait;
}

.password-wrapper {
	position: relative;
	width: 100%;
	min-width: 0;
}

.password-wrapper input {
	width: 100%;
	padding-right: 72px;
}

.password-toggle {
	position: absolute;
	top: 50%;
	right: 9px;
	transform: translateY(-50%);
	width: auto;
	min-width: 50px;
	min-height: 32px;
	max-width: none;
	padding: 6px 8px;
	color: var(--color-text-secondary);
	background: transparent;
	border: 0;
	border-radius: 5px;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
}

.password-toggle:hover {
	color: #101828;
	background: var(--color-surface-hover);
}

.password-toggle:focus-visible {
	outline: 2px solid #475467;
	outline-offset: 2px;
}

.caps-lock-warning {
	margin-top: 7px;
	color: #b54708;
	font-size: 0.82rem;
	line-height: 1.4;
}

.login-message {
	margin-top: 18px;
	padding: 12px 13px;
	color: var(--color-danger);
	background: #fff7f6;
	border: 1px solid #f1b5b0;
	border-radius: 8px;
	font-size: 0.86rem;
	line-height: 1.45;
}

.login-card-footer {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--color-border-subtle);
}

.login-security-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.75rem;
	line-height: 1.45;
}

.login-legal {
	margin: 14px 0 0;
	color: var(--color-text-muted);
	font-size: 0.74rem;
	line-height: 1.5;
}

.login-legal a {
	color: inherit;
	text-decoration: none;
}

.login-legal a:hover {
	color: var(--color-text);
	text-decoration: underline;
}

.login-legal a:focus-visible {
	outline: 2px solid #475467;
	outline-offset: 2px;
	border-radius: 2px;
}

@media (max-width: 820px) {
	.login-shell {
		width: min(100%, 520px);
		min-height: 0;
		display: block;
	}

	.login-brand-panel {
		display: none;
	}

	.login-card {
		padding: 38px 34px;
	}

	.login-mobile-brand {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 34px;
		text-align: center;
	}

	.login-logo {
		display: block;
		width: 100%;
		max-width: 164px;
		height: auto;
		margin: 0 0 11px;
	}

	.login-mobile-product {
		color: var(--color-text-muted);
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.04em;
	}

	.login-card-header {
		text-align: center;
	}
}

@media (max-width: 520px) {
	.login-page {
		align-items: flex-start;
		padding: 18px;
	}

	.login-shell {
		margin-top: 20px;
		border-radius: 14px;
	}

	.login-card {
		padding: 30px 22px;
	}

	.login-title {
		font-size: 1.7rem;
	}
}

/* Skip link: the first stop for keyboard users, shown only when focused (every page). */
.skip-link {
	position: absolute; left: 12px; top: -48px; z-index: 1000; padding: 10px 16px;
	font-weight: 700; color: var(--color-text-inverse); background: var(--color-brand); border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--color-focus); outline-offset: 2px; }
main:focus { outline: none; }

/* ==================================================
   Typography: Pretendard throughout
   Innocean's typeface, vendored locally (SIL Open Font License 1.1: vendor/pretendard/LICENSE.txt).
   Bold is the full subset (headings); Regular and Medium are cut down to Latin, Latin-1 and common
   punctuation (about 26 KB each, from pretendard 1.3.9 with fontTools), which covers English and the
   accented letters of the European offices. Weights the files don't have (600, 650, 800) use the
   nearest one. If the font cannot load, the fallbacks render immediately (font-display: swap).
================================================== */

@font-face {
	font-family: "Pretendard";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("vendor/pretendard/Pretendard-Bold.subset.NvQkMce4.woff2") format("woff2"),
		url("vendor/pretendard/Pretendard-Bold.subset.ByYJKlCl.woff") format("woff");
}

@font-face {
	font-family: "Pretendard";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("vendor/pretendard/Pretendard-Regular.latin.woff2") format("woff2");
}

@font-face {
	font-family: "Pretendard";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("vendor/pretendard/Pretendard-Medium.latin.woff2") format("woff2");
}

:root {
	--font-heading: "Pretendard", Arial, Helvetica, sans-serif;
	--font-body: "Pretendard", Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
}

/* ==================================================
   Page heroes: one size, spacing and description width for every tool
   (Trafficking, Name builder and Landing page pages: .traffic-hero; Get tags: .tags-hero;
   Users: .users-hero; admin managers and Campaign compare: .compare-hero). Home keeps its own hero.
================================================== */

html body :is(.traffic-hero, .tags-hero, .users-hero, .compare-hero) h1 {
	margin: 0;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

html body :is(.traffic-hero, .tags-hero, .users-hero, .compare-hero) :is(.traffic-hero-description, .tags-hero-description, .users-description, .compare-hero-description) {
	max-width: none;
	margin-top: 12px;
	color: var(--color-text-on-dark-muted);
	font-size: 15px;
	line-height: 1.6;
}

@media (max-width: 700px) {
	html body :is(.traffic-hero, .tags-hero, .users-hero, .compare-hero) h1 {
		font-size: 32px;
	}
}

/* ==================================================
   Icons beyond Font Awesome 4.7: <i class="fa fa-traffic-light"> works like any Font Awesome icon (size and
   colour follow the text). Drawn from a local SVG through a CSS mask: no icon font change, no CDN.
================================================== */

.fa.fa-traffic-light::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: url("icons/traffic-light.svg?v=20261028-1") center / contain no-repeat;
	mask: url("icons/traffic-light.svg?v=20261028-1") center / contain no-repeat;
}