/* Styling for the licensing agreement page.
   Palette and fonts follow the Elementor global kit used across the site. */

.lg-doc {
	--lg-ink: #291f3d;
	--lg-purple: #835baf;
	--lg-body: #40394d;
	--lg-rule: #e6e1ef;
	--lg-tint: #f8fbfe;
	font-family: 'Inter', sans-serif;
	color: var(--lg-body);
	max-width: 860px;
	margin: 0 auto;
	padding: 56px 24px 80px;
	font-size: 1rem;
	line-height: 1.7;
}

.lg-title {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.2;
	color: var(--lg-ink);
	margin: 0 0 8px;
}

.lg-updated {
	font-size: .9375rem;
	color: #7e868c;
	margin: 0 0 40px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--lg-rule);
}

.lg-doc h2.lg-h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(1.25rem, 2.6vw, 1.6rem);
	line-height: 1.3;
	color: var(--lg-ink);
	margin: 52px 0 20px;
	padding-top: 20px;
	border-top: 2px solid var(--lg-rule);
}

.lg-h2-num {
	color: var(--lg-ink);
	margin-right: .5em;
}

.lg-doc h3.lg-h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--lg-ink);
	margin: 32px 0 14px;
}

.lg-doc p {
	margin: 0 0 16px;
}

.lg-doc a {
	color: var(--lg-purple);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

/* Clause numbers are literal text from the document, not CSS counters, so the
   numbering on the page always matches the signed agreement. */
.lg-list {
	margin: 0 0 16px;
}

.lg-item {
	display: flex;
	gap: 12px;
	margin: 0 0 14px;
}

.lg-num {
	flex: 0 0 auto;
	min-width: 3.1em;
	font-weight: 600;
	color: var(--lg-ink);
	font-variant-numeric: tabular-nums;
}

.lg-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Sub-lists follow the clause that introduces them, so indent them to line up
   with that clause's text rather than its number. */
.lg-ol,
.lg-ul {
	margin: 0 0 16px;
	padding-left: 1.4em;
	margin-left: calc(3.1em + 12px);
}

.lg-ol > li,
.lg-ul > li {
	margin: 0 0 10px;
	padding-left: .3em;
}

.lg-ol > li::marker {
	font-weight: 600;
	color: var(--lg-ink);
}

.lg-d1 {
	margin-left: 0;
}

.lg-d2 {
	margin-left: 2.2em;
}

.lg-d2 .lg-num {
	min-width: 2.3em;
	font-weight: 500;
}

/* Deep-linked clause gets a brief marker so the target is obvious. */
.lg-item:target,
h2.lg-h2:target {
	background-color: var(--lg-tint);
	box-shadow: -10px 0 0 var(--lg-tint), 10px 0 0 var(--lg-tint);
	border-radius: 2px;
}

@media (max-width: 767px) {
	.lg-doc {
		padding: 40px 20px 64px;
		font-size: .9375rem;
	}

	.lg-item {
		gap: 8px;
	}

	.lg-num {
		min-width: 2.6em;
	}

	.lg-d2 {
		margin-left: 1em;
	}

	.lg-ol,
	.lg-ul {
		margin-left: calc(2.6em + 8px);
		padding-left: 1.2em;
	}
}