/* ============================================================
   Privacy policy page (page-privacy-policy.php)
   Builds on the shared .pr-hero / .pr-cta bands from style.css.
   ============================================================ */

/* --------- Hero --------- */
.pp-hero { padding: 112px 0 80px; }
.pp-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: #c4d6ff;
	padding: 7px 14px 7px 11px; border-radius: 999px;
	background: rgba(76, 141, 255, .12); border: 1px solid rgba(124, 160, 255, .28);
	margin-bottom: 22px;
}
.pp-hero__eyebrow svg { width: 15px; height: 15px; }
.pp-hero__meta {
	display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px;
	margin-top: 26px; font-size: 14px; color: rgba(255,255,255,.55);
}
.pp-hero__meta li { position: relative; }
.pp-hero__meta li + li::before {
	content: ""; position: absolute; left: -13px; top: 50%;
	width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
	background: rgba(255,255,255,.35);
}

/* --------- Layout --------- */
.pp-body { background: var(--bg-alt); padding: 80px 0 96px; }
.pp-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 52px;
	align-items: start;
}

/* --------- Contents rail --------- */
.pp-rail {
	position: sticky; top: 96px;
	max-height: calc(100vh - 120px); overflow-y: auto;
	scrollbar-width: none;
}
.pp-rail::-webkit-scrollbar { display: none; }
.pp-rail__eyebrow {
	display: block;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--muted-2); padding: 0 12px 10px;
}
.pp-rail__progress {
	height: 3px; margin: 0 12px 12px; border-radius: 999px;
	background: var(--line); overflow: hidden;
}
.pp-rail__progress span {
	display: block; height: 100%; background: var(--grad);
	transform: scaleX(0); transform-origin: left center;
	transition: transform .12s linear;
}
.pp-toc { display: flex; flex-direction: column; gap: 2px; }
.pp-toc__link {
	display: flex; align-items: baseline; gap: 10px;
	font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--muted);
	padding: 8px 12px; border-radius: 10px;
	border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pp-toc__n {
	flex: none; font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px; font-weight: 600; color: var(--muted-2);
}
.pp-toc__link:hover { background: #fff; color: var(--ink); }
.pp-toc__link.is-active {
	background: #fff; color: var(--ink); font-weight: 600;
	border-color: #dbe4f7; box-shadow: var(--shadow-sm);
}
.pp-toc__link.is-active .pp-toc__n {
	background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pp-rail__cta {
	margin-top: 20px; padding: 20px; border-radius: var(--radius);
	background: var(--grad-soft); border: 1px solid #e0e7fb;
}
.pp-rail__cta p { font-size: 14px; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }

/* --------- Content column --------- */
.pp-content { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* At a glance */
.pp-glance {
	position: relative; overflow: hidden;
	background: var(--ink-2); color: #fff;
	border-radius: var(--radius-lg);
	padding: 34px 36px 36px;
	isolation: isolate;
}
.pp-glance::before {
	content: ""; position: absolute; z-index: -1;
	width: 420px; height: 420px; border-radius: 50%;
	right: -160px; top: -200px;
	background: #7c3aed; filter: blur(110px); opacity: .32;
}
.pp-glance__title {
	font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: rgba(255,255,255,.6);
}
.pp-glance__grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px; margin-top: 20px;
}
.pp-glance__grid li {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.09);
	border-radius: var(--radius);
	padding: 20px 22px;
}
.pp-glance__ico {
	display: grid; place-items: center;
	width: 36px; height: 36px; border-radius: 10px;
	background: var(--grad); color: #fff; margin-bottom: 14px;
}
.pp-glance__ico svg { width: 19px; height: 19px; }
.pp-glance__grid h3 { font-size: 16.5px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.pp-glance__grid p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.66); }

/* Section card */
.pp-sec {
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
	padding: 34px 40px 36px;
}
.pp-sec > * + * { margin-top: 18px; }
.pp-sec__head { display: flex; align-items: center; gap: 14px; }
.pp-sec__num {
	flex: none; display: grid; place-items: center;
	width: 38px; height: 38px; border-radius: 11px;
	background: var(--grad-soft); border: 1px solid #e0e7fb;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 13px; font-weight: 700; color: var(--blue-deep);
}
.pp-sec__head h2 { font-size: clamp(21px, 2.2vw, 25px); font-weight: 700; letter-spacing: -.02em; }

/* Prose */
.pp-prose { color: var(--muted); font-size: 16px; line-height: 1.75; }
.pp-prose > * + * { margin-top: 14px; }
.pp-prose h3 {
	font-size: 16.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
	margin-top: 26px;
}
.pp-prose h3:first-child { margin-top: 0; }
.pp-prose h3 + p { margin-top: 6px; }
.pp-prose strong { color: var(--ink); font-weight: 600; }
.pp-prose a { color: var(--blue-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pp-prose a:hover { color: var(--purple); }
.pp-prose ul:not(.pp-chips) { display: flex; flex-direction: column; gap: 8px; }
.pp-prose ul:not(.pp-chips) li { position: relative; padding-left: 22px; }
.pp-prose ul:not(.pp-chips) li::before {
	content: ""; position: absolute; left: 4px; top: .72em;
	width: 7px; height: 7px; border-radius: 50%; background: var(--grad);
}
.pp-prose code, .pp-table code {
	font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .86em;
	color: var(--ink); background: var(--bg-tint); border: 1px solid #dde6f7;
	padding: 1px 6px; border-radius: 6px;
	overflow-wrap: anywhere;
}

/* Scope cards */
.pp-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pp-scope__card {
	position: relative;
	background: var(--bg-alt); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 20px 22px 20px 24px;
}
.pp-scope__card::before {
	content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
	border-radius: 999px; background: var(--grad);
}
.pp-scope__tag { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); }
.pp-scope__card p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* Included / never split */
.pp-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.pp-split__col { border-radius: var(--radius); padding: 22px 24px; border: 1px solid; }
.pp-split__col--yes { background: #f4f8ff; border-color: #dbe6fb; }
.pp-split__col--no  { background: #fbf7ff; border-color: #ebe0fb; }
.pp-split__col h4 {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: var(--ink);
	margin-bottom: 14px;
}
.pp-split__col h4 span {
	display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #fff;
}
.pp-split__col h4 svg { width: 14px; height: 14px; }
.pp-split__col--yes h4 span { background: var(--blue-deep); }
.pp-split__col--no h4 span  { background: var(--purple); }
.pp-split__col ul { display: flex; flex-direction: column; gap: 9px; }
.pp-split__col li {
	position: relative; padding-left: 18px;
	font-size: 14.5px; line-height: 1.55; color: var(--muted);
}
.pp-split__col li::before {
	content: ""; position: absolute; left: 2px; top: .62em;
	width: 6px; height: 6px; border-radius: 50%;
}
.pp-split__col--yes li::before { background: var(--blue); }
.pp-split__col--no li::before  { background: var(--purple-light); }
.pp-split__fine {
	margin-top: 16px; padding-top: 14px; border-top: 1px dashed #e0d3f7;
	font-size: 13.5px; line-height: 1.55; color: var(--muted-2);
}

/* Code snippet */
.pp-code {
	margin: 0; padding: 16px 20px; border-radius: 12px;
	background: var(--ink-2); color: #dbe6ff;
	font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14px; line-height: 1.6;
	overflow-x: auto;
}
.pp-sec > .pp-code { margin-top: 12px; }
.pp-sec > .pp-code + .pp-prose { margin-top: 12px; }

/* Callout */
.pp-note {
	position: relative;
	background: var(--grad-soft); border: 1px solid #e0e7fb;
	border-radius: var(--radius); padding: 20px 22px 20px 26px;
	font-size: 15px; line-height: 1.65; color: var(--muted);
}
.pp-note::before {
	content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
	border-radius: 999px; background: var(--grad);
}
.pp-note strong { display: block; color: var(--ink); font-weight: 700; margin-bottom: 4px; }

/* Cookie table */
.pp-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.pp-table th {
	text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--muted-2); background: var(--bg-alt);
	padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.pp-table td { padding: 14px 16px; color: var(--muted); vertical-align: top; border-bottom: 1px solid var(--line); }
.pp-table tr:last-child td { border-bottom: 0; }
.pp-table td:first-child { width: 30%; }

/* Definition rows (uses, retention) */
.pp-uses { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pp-uses > div {
	display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 18px;
	padding: 15px 20px;
}
.pp-uses > div + div { border-top: 1px solid var(--line); }
.pp-uses dt { font-weight: 600; color: var(--ink); font-size: 15px; line-height: 1.5; }
.pp-uses dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.pp-uses--keep dd { color: var(--ink); }

/* Rights chips */
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chips li {
	font-size: 14px; font-weight: 600; color: var(--ink);
	background: var(--bg-alt); border: 1px solid var(--line);
	padding: 7px 14px; border-radius: 999px; line-height: 1.3;
}

/* Vendors */
.pp-vendors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pp-vendors li {
	background: var(--bg-alt); border: 1px solid var(--line); border-radius: 14px;
	padding: 16px 18px;
}
.pp-vendors strong { display: block; font-size: 15px; color: var(--ink); }
.pp-vendors span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* Contact */
.pp-sec--contact { background: linear-gradient(135deg, #f5f8ff 0%, #f7f2ff 100%); border-color: #e0e7fb; }
.pp-contact { display: flex; flex-direction: column; gap: 18px; }
.pp-contact__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------- Responsive --------- */
@media (max-width: 980px) {
	.pp-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.pp-rail {
		position: static; max-height: none; overflow: visible;
		margin-inline: -24px;
	}
	.pp-rail__eyebrow, .pp-rail__progress, .pp-rail__cta { display: none; }
	.pp-toc {
		flex-direction: row; gap: 8px; overflow-x: auto;
		padding: 2px 24px 6px; scrollbar-width: none;
	}
	.pp-toc::-webkit-scrollbar { display: none; }
	.pp-toc__link {
		flex: none; white-space: nowrap;
		background: #fff; border-color: var(--line);
		padding: 8px 14px; border-radius: 999px;
	}
	.pp-toc__link.is-active { box-shadow: none; }
}
@media (max-width: 720px) {
	.pp-hero { padding: 100px 0 60px; }
	.pp-body { padding: 40px 0 64px; }
	.pp-glance { padding: 26px 22px 24px; }
	.pp-glance__grid, .pp-scope, .pp-split, .pp-vendors { grid-template-columns: minmax(0, 1fr); }
	.pp-sec { padding: 26px 22px 28px; border-radius: var(--radius); }
	.pp-uses > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 16px; }

	.pp-table thead { display: none; }
	.pp-table, .pp-table tbody, .pp-table tr, .pp-table td { display: block; width: 100%; }
	.pp-table tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
	.pp-table tr:last-child { border-bottom: 0; }
	.pp-table td, .pp-table td:first-child { width: 100%; padding: 3px 0; border: 0; }
	.pp-table td::before {
		content: attr(data-label);
		display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
		color: var(--muted-2); margin-top: 6px;
	}
	.pp-table td:first-child::before { margin-top: 0; }
	.pp-contact__actions .btn { width: 100%; white-space: normal; text-align: center; }
}