/* Vedmi privacy policy page. Ported from the former scoped Svelte styles;
   loaded only by privacy/index.html, next to field.css. Self-contained: the
   tokens, the Geist face and the few base rules this page shares with the
   main site are restated below, so it does not pull the 100+ KB of main.css
   and theme.css for their sake. */

@font-face {
	font-family: 'Geist';
	src: url('../fonts/Geist-Variable.woff2?v=2ffebe993e') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: light;

	--font-sans: 'Geist', 'PT Sans', sans-serif;
	--color-bg: #e0e1e5;
	--color-accent: #0e3eb1;
	--color-text: #121212;
	--color-highlight: #ddf2a4;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html {
	background: var(--color-bg);
	scroll-behavior: smooth;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
}

::selection {
	color: var(--color-text);
	background: var(--color-highlight);
}

a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.privacy-page {
	min-height: 100vh;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
}

.policy-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(1180px, calc(100% - 64px));
	height: 88px;
	margin: 0 auto;
	border-bottom: 1px solid rgba(18, 18, 18, 0.14);
}

.policy-brand {
	display: inline-flex;
	align-items: center;
}

.policy-brand__logo {
	display: block;
	width: 118px;
	height: auto;
}

.policy-back {
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(18, 18, 18, 0.35);
	font-size: 13px;
	line-height: 1;
	color: var(--color-accent);
}

.policy-main {
	display: block;
	width: min(1180px, calc(100% - 64px));
	margin: 0 auto;
}

.policy-hero {
	padding: 104px 0 88px;
	border-bottom: 1px solid rgba(18, 18, 18, 0.14);
}

.policy-kicker {
	margin-bottom: 30px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

.policy-hero h1 {
	max-width: 860px;
	font-size: 78px;
	font-weight: 500;
	line-height: 0.98;
}

.policy-meta {
	display: flex;
	gap: 28px;
	margin-top: 28px;
	color: rgba(18, 18, 18, 0.55);
	font-size: 12px;
	line-height: 1.4;
}

.policy-lead {
	max-width: 760px;
	margin-top: 64px;
	font-size: 25px;
	line-height: 1.35;
}

.policy-status {
	max-width: 760px;
	margin-top: 28px;
	padding: 20px 0;
	border-top: 1px solid rgba(18, 18, 18, 0.24);
	border-bottom: 1px solid rgba(18, 18, 18, 0.24);
	color: rgba(18, 18, 18, 0.68);
	font-size: 15px;
	line-height: 1.55;
}

.policy-layout {
	display: grid;
	grid-template-columns: 230px minmax(0, 720px);
	justify-content: space-between;
	gap: 64px;
	padding: 88px 0 140px;
}

.policy-nav {
	position: sticky;
	top: 32px;
	align-self: start;
	font-size: 12px;
	line-height: 1.4;
}

.policy-nav > p {
	margin-bottom: 20px;
	color: rgba(18, 18, 18, 0.45);
	text-transform: uppercase;
}

.policy-nav ol {
	display: grid;
	gap: 11px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.policy-nav a {
	color: rgba(18, 18, 18, 0.68);
}

.policy-nav a:hover,
.policy-content a:hover,
.policy-back:hover {
	color: #121212;
}

.policy-content section {
	scroll-margin-top: 40px;
	padding: 0 0 72px;
	margin: 0 0 72px;
	border-bottom: 1px solid rgba(18, 18, 18, 0.14);
}

.policy-content section:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.policy-number {
	margin-bottom: 20px;
	color: rgba(18, 18, 18, 0.42);
	font-size: 12px;
	line-height: 1;
}

.policy-content h2 {
	max-width: 650px;
	margin-bottom: 30px;
	font-size: 38px;
	font-weight: 500;
	line-height: 1.08;
}

.policy-content p,
.policy-content li {
	font-size: 17px;
	line-height: 1.7;
}

.policy-content ul + p {
	margin-top: 20px;
}

.policy-content ul {
	display: grid;
	gap: 10px;
	padding-left: 22px;
	margin: 20px 0 0;
}

.policy-content li {
	list-style: disc;
}

.policy-content a {
	border-bottom: 1px solid rgba(18, 18, 18, 0.35);
	color: var(--color-accent);
}

.policy-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(1180px, calc(100% - 64px));
	padding: 30px 0 44px;
	margin: 0 auto;
	border-top: 1px solid rgba(18, 18, 18, 0.14);
	font-size: 12px;
	line-height: 1.4;
}

.policy-footer__brand img {
	display: block;
	width: 92px;
	height: auto;
}

@media (width <= 767px) {
	.policy-header,
	.policy-main,
	.policy-footer {
		width: calc(100% - 40px);
	}

	.policy-header {
		height: 72px;
	}

	.policy-brand__logo {
		width: 104px;
	}

	.policy-footer__brand img {
		width: 84px;
	}

	.policy-hero {
		padding: 72px 0 64px;
	}

	.policy-kicker {
		margin-bottom: 22px;
	}

	.policy-hero h1 {
		font-size: 48px;
		line-height: 1;
	}

	.policy-meta {
		flex-direction: column;
		gap: 5px;
		margin-top: 22px;
	}

	.policy-lead {
		margin-top: 48px;
		font-size: 21px;
	}

	.policy-status {
		font-size: 14px;
	}

	.policy-layout {
		display: block;
		padding: 64px 0 96px;
	}

	.policy-nav {
		display: none;
	}

	.policy-content section {
		padding-bottom: 52px;
		margin-bottom: 52px;
	}

	.policy-content h2 {
		margin-bottom: 24px;
		font-size: 30px;
	}

	.policy-content p,
	.policy-content li {
		font-size: 16px;
		line-height: 1.65;
	}

	.policy-footer {
		padding: 24px 0 32px;
	}
}
