/*
 * Secondary pages (changelog, privacy policy).
 * Loaded after landing.css and reuses its custom properties, typography,
 * wrapper, header and footer components.
 */

.page-hero {
	position: relative;
	/* the site header is transparent until it sticks, so the hero has to slide
	   under it exactly like .hero does on the landing page */
	margin-top: -76px;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(120% 90% at 78% 6%, #0a3a87 0%, rgba(10, 58, 135, 0) 55%),
		linear-gradient(178deg, var(--navy-900) 0%, var(--navy-950) 100%);
}

.page-hero::before {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
	background-size: 52px 52px;
	content: "";
	mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.page-hero-glow {
	position: absolute;
	border: 1px solid rgba(185, 216, 246, 0.18);
	border-radius: 50%;
	pointer-events: none;
}

.page-hero-glow-one {
	top: -180px;
	right: -220px;
	width: 560px;
	height: 560px;
	box-shadow:
		0 0 0 70px rgba(185, 216, 246, 0.025),
		0 0 0 140px rgba(185, 216, 246, 0.016);
}

.page-hero-glow-two {
	bottom: -260px;
	left: -190px;
	width: 420px;
	height: 420px;
	border-color: rgba(179, 225, 192, 0.12);
}

.page-hero-inner {
	position: relative;
	z-index: 2;
	padding-block: 152px 86px;
}

.back-link {
	display: inline-flex;
	align-items: center;
	margin-bottom: 26px;
	gap: 8px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 160ms ease;
}

.back-link:hover,
.back-link:focus-visible {
	color: #fff;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0 0 16px;
	gap: 10px;
	color: var(--mint-300);
	font-size: 0.79rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.eyebrow-dot {
	width: 6px;
	height: 6px;
	background: currentColor;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(179, 225, 192, 0.12);
}

.page-hero h1 {
	max-width: 800px;
	margin: 0;
	color: #fff;
	font-size: clamp(2.9rem, 5.4vw, 4.6rem);
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 0.98;
}

.page-hero h1 span {
	color: var(--mint-300);
	font-weight: 600;
}

.page-lede {
	max-width: 600px;
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: clamp(1rem, 1.3vw, 1.13rem);
	line-height: 1.7;
}

.page-lede a {
	color: var(--mint-300);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(179, 225, 192, 0.4);
	transition: border-color 160ms ease;
}

.page-lede a:hover,
.page-lede a:focus-visible {
	border-color: var(--mint-300);
}

.page-meta {
	display: flex;
	flex-wrap: wrap;
	margin-top: 30px;
	gap: 10px;
}

.page-meta span {
	display: inline-flex;
	align-items: center;
	min-height: 31px;
	padding: 0 13px;
	color: rgba(255, 255, 255, 0.82);
	background: rgba(4, 19, 50, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	backdrop-filter: blur(10px);
}

.page-meta span strong {
	margin-right: 6px;
	color: var(--mint-300);
	font-weight: 800;
}

.page-meta a {
	color: inherit;
	text-decoration: none;
}

.page-meta .page-meta-plain {
	letter-spacing: 0.01em;
	text-transform: none;
}

.page-section {
	padding: 92px 0 108px;
	background: var(--paper);
}

/* the footer link for the page you are already on */
.site-footer nav a[aria-current="page"] {
	color: #fff;
	font-weight: 700;
}

.release-timeline {
	position: relative;
	display: grid;
	gap: 18px;
}

.release-card {
	position: relative;
	padding: 30px 32px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition:
		transform 220ms ease,
		box-shadow 220ms ease,
		border-color 220ms ease;
}

.release-card:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-sm);
	transform: translateY(-4px);
}

.release-card-latest {
	background: var(--navy-900);
	border-color: var(--navy-900);
}

.release-card-latest:hover {
	border-color: var(--navy-800);
}

.release-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 14px;
}

.release-version {
	color: var(--navy-950);
	font-size: 1.32rem;
	font-weight: 700;
	letter-spacing: -0.035em;
}

.release-card-latest .release-version {
	color: #fff;
}

.release-date {
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 600;
}

.release-card-latest .release-date {
	color: rgba(255, 255, 255, 0.55);
}

.release-badge {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 11px;
	color: var(--navy-900);
	background: var(--mint-300);
	border-radius: 999px;
	font-size: 0.63rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.release-notes {
	display: grid;
	margin: 20px 0 0;
	padding: 0;
	gap: 11px;
	list-style: none;
}

.release-notes li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	color: var(--muted);
	font-size: 0.93rem;
	line-height: 1.65;
}

.release-notes li::before {
	display: grid;
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
	margin-top: 4px;
	place-items: center;
	color: #fff;
	background: var(--blue-600);
	border-radius: 50%;
	content: "✓";
	font-size: 0.58rem;
	font-weight: 800;
}

.release-card-latest .release-notes li {
	color: rgba(255, 255, 255, 0.72);
}

.release-card-latest .release-notes li::before {
	color: var(--navy-950);
	background: var(--mint-300);
}

.legal-layout {
	display: grid;
	grid-template-columns: 248px minmax(0, 1fr);
	align-items: start;
	gap: 68px;
}

.legal-toc {
	position: sticky;
	top: 104px;
}

.legal-toc strong {
	display: block;
	margin-bottom: 14px;
	padding-left: 13px;
	color: var(--blue-600);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.legal-toc ol {
	display: grid;
	margin: 0;
	padding: 0;
	gap: 2px;
	counter-reset: toc;
	list-style: none;
}

.legal-toc a {
	display: block;
	padding: 8px 13px;
	color: var(--muted);
	border-left: 2px solid var(--line);
	font-size: 0.83rem;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none;
	transition:
		color 160ms ease,
		border-color 160ms ease,
		background-color 160ms ease;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
	color: var(--navy-900);
	background: var(--surface);
	border-color: var(--blue-500);
}

.prose {
	max-width: 760px;
}

.prose h2 {
	margin: 54px 0 0;
	color: var(--navy-950);
	font-size: clamp(1.32rem, 2vw, 1.68rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.25;
	/* adds to the global scroll-padding-top so a jumped-to heading clears the fixed header */
	scroll-margin-top: 24px;
}

.prose > h2:first-child {
	margin-top: 0;
}

.prose h2 + p {
	margin-top: 16px;
}

.prose p {
	margin: 18px 0 0;
	color: var(--body);
	font-size: 0.97rem;
	line-height: 1.78;
}

.prose p:empty {
	display: none;
}

.prose strong {
	color: var(--navy-950);
	font-weight: 700;
}

.prose .prose-label {
	margin-top: 32px;
	color: var(--navy-950);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.prose h2 + .prose-label {
	margin-top: 18px;
}

.prose u {
	margin-right: 5px;
	color: var(--navy-950);
	font-weight: 700;
	text-decoration: none;
}

.prose ul {
	display: grid;
	margin: 20px 0 0;
	padding: 0;
	gap: 12px;
	list-style: none;
}

.prose li {
	position: relative;
	padding-left: 27px;
	color: var(--body);
	font-size: 0.97rem;
	line-height: 1.7;
}

.prose li::before {
	position: absolute;
	top: 0.66em;
	left: 5px;
	width: 8px;
	height: 8px;
	background: var(--blue-200);
	border-radius: 50%;
	content: "";
}

.prose li p {
	margin: 0;
}

.prose a {
	color: var(--blue-600);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(13, 99, 165, 0.28);
	transition:
		color 160ms ease,
		border-color 160ms ease;
}

.prose a:hover,
.prose a:focus-visible {
	color: var(--navy-800);
	border-color: currentColor;
}

.prose-note {
	margin-top: 46px;
	padding: 26px 30px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.prose-note p {
	margin-top: 0;
}

@media (max-width: 980px) {
	.legal-layout {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.legal-toc {
		position: static;
		padding: 24px 22px;
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius-sm);
	}

	.legal-toc strong {
		padding-left: 0;
	}

	.legal-toc ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2px 18px;
	}

	.prose {
		max-width: none;
	}
}

@media (max-width: 860px) {
	.page-hero-inner {
		padding-block: 138px 72px;
	}

	.page-section {
		padding: 76px 0 90px;
	}
}

@media (max-width: 620px) {
	.page-hero-inner {
		padding-block: 116px 60px;
	}

	.page-hero h1 {
		font-size: clamp(2.4rem, 12vw, 3.4rem);
	}

	.page-lede {
		margin-top: 20px;
		font-size: 1rem;
	}

	.page-meta {
		margin-top: 24px;
		gap: 8px;
	}

	.page-meta span {
		font-size: 0.66rem;
	}

	.page-section {
		padding: 62px 0 76px;
	}

	.release-card {
		padding: 25px 22px;
	}

	.release-version {
		font-size: 1.15rem;
	}

	.legal-toc ol {
		grid-template-columns: 1fr;
	}

	.prose h2 {
		margin-top: 44px;
	}
}

@media (min-width: 760px) {
	.release-timeline {
		/*
		 * Rail geometry shared by the rail and the per-card dots so the two cannot
		 * drift apart. --rail-centre is measured from the timeline's left edge.
		 */
		--rail-centre: 14px;
		--rail-width: 2px;
		--dot-size: 14px;
		--card-inset: 44px;
		--card-border: 1px;

		padding-left: var(--card-inset);
	}

	.release-timeline::before {
		position: absolute;
		top: 18px;
		bottom: 18px;
		left: calc(var(--rail-centre) - var(--rail-width) / 2);
		width: var(--rail-width);
		background: linear-gradient(to bottom, var(--blue-200), var(--line) 72%, transparent);
		border-radius: 99px;
		content: "";
	}

	/*
	 * The dot is positioned against the card's padding box, so its offset has to back
	 * out the timeline padding and the card border to land on the rail centre.
	 * box-sizing is set explicitly here: the `*` reset in landing.css does not match
	 * pseudo-elements, so without it the 3px border would widen the dot to 20px and
	 * push it 4px right of the rail.
	 */
	.release-card::after {
		position: absolute;
		top: 36px;
		left: calc(var(--rail-centre) - var(--card-inset) - var(--card-border) - var(--dot-size) / 2);
		box-sizing: border-box;
		width: var(--dot-size);
		height: var(--dot-size);
		background: #fff;
		border: 3px solid var(--blue-500);
		border-radius: 50%;
		box-shadow: 0 0 0 4px rgba(46, 127, 209, 0.12);
		content: "";
	}

	.release-card-latest::after {
		background: var(--mint-300);
		border-color: var(--mint-300);
		box-shadow: 0 0 0 5px rgba(179, 225, 192, 0.16);
	}
}