/* =============================================================
   PRIVACY POLICY — page-privacy-policy.php
   Realm comes from data-style on .mtpp (light / glitch / arcade),
   set from the mt_dungeon_style cookie, same as the 404 page.
   ============================================================= */

.mtpp {
	--pp-bg: #faf9ff;
	--pp-ink: #0a0a2e;
	--pp-text: rgba(15, 8, 40, 0.8);
	--pp-muted: rgba(15, 8, 40, 0.55);
	--pp-link: #6200cc;
	--pp-link-hover: #0a0a2e;
	--pp-line: rgba(113, 57, 209, 0.16);
	--pp-cell: rgba(127, 0, 255, 0.06);
	--pp-title: linear-gradient(88deg, #6200cc 0%, #9b3fff 50%, #7f00ff 100%);
	--pp-head-font: "Poppins", "Inter", Arial, sans-serif;
	--pp-body-font: "DM Sans", "Inter", Arial, sans-serif;

	background: var(--pp-bg);
	color: var(--pp-text);
	font-family: var(--pp-body-font);
}

.mtpp[data-style="glitch"],
.mtpp[data-style="arcade"] {
	--pp-bg: #07061a;
	--pp-ink: #ffffff;
	--pp-text: rgba(255, 255, 255, 0.78);
	--pp-muted: rgba(255, 255, 255, 0.5);
	--pp-link: #b48cff;
	--pp-link-hover: #ffffff;
	--pp-line: rgba(255, 255, 255, 0.12);
	--pp-cell: rgba(255, 255, 255, 0.04);
	--pp-title: linear-gradient(135deg, #9b4df4 0%, #f53df2 100%);
}

.mtpp[data-style="glitch"] {
	--pp-bg: #060716;
}

/* ── Hero ───────────────────────────────────────── */
.mtpp-hero {
	padding: clamp(7rem, 12vw, 10rem) 0 clamp(2.5rem, 5vw, 4rem);
	text-align: center;
	background: linear-gradient(135deg, #f3f0ff 0%, #ede8ff 60%, #f8f5ff 100%);
}

.mtpp[data-style="glitch"] .mtpp-hero {
	background: linear-gradient(rgba(6, 7, 22, 0.18), rgba(6, 7, 22, 0.18)), url(../images/productivity/realm-page-bg.png) center top / cover no-repeat;
}

.mtpp[data-style="arcade"] .mtpp-hero {
	background: url(../images/productivity/hero-space-bg.png) center top / 100% auto no-repeat, #07061a;
}

.mtpp-shell {
	max-width: 908px;
	margin: 0 auto;
	padding: 0 24px;
}

.mtpp-title {
	margin: 0;
	font-family: var(--pp-head-font);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: var(--pp-title);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.mtpp[data-style="arcade"] .mtpp-title {
	font-family: "Pixelify Sans", var(--pp-head-font);
	letter-spacing: 0.04em;
}

.mtpp-updated {
	color: var(--pp-muted);
	font-size: 0.875rem;
	margin: 0 0 1rem;
}

/* ── Policy text ────────────────────────────────── */
.mtpp-body {
	padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(4rem, 8vw, 7rem);
	font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
	line-height: 1.75;
	color: var(--pp-text);
	overflow-wrap: break-word;
}

.mtpp-body [id] {
	scroll-margin-top: 120px;
}

.mtpp-body strong {
	color: var(--pp-ink);
}

.mtpp-body h2,
.mtpp-body h3 {
	color: var(--pp-ink);
	font-family: var(--pp-head-font);
	-webkit-text-fill-color: currentColor;
	line-height: 1.35;
}

.mtpp-body h2 {
	font-size: clamp(1.125rem, 2vw, 1.4375rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 2.5rem 0 1rem;
	padding-top: 2rem;
	border-top: 1px solid var(--pp-line);
}

.mtpp-body h3 {
	font-size: clamp(1rem, 1.6vw, 1.125rem);
	font-weight: 600;
	margin: 1.75rem 0 0.75rem;
}

.mtpp-body a {
	color: var(--pp-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
	transition: color 0.2s ease;
}

.mtpp-body a:hover,
.mtpp-body a:focus-visible {
	color: var(--pp-link-hover);
}

.mtpp-body ul {
	list-style: disc;
	padding-left: 1.5rem;
	margin: 0.4rem 0;
}

.mtpp-body li {
	margin-bottom: 0.4rem;
}

.mtpp-updated,
.mtpp-body .mtpp-updated {
	color: var(--pp-muted);
	font-weight: 500;
}

/* Data-category table. Termly splits it into three consecutive tables, so fixed column widths
   (Termly's own: 33.8% / 51.4% / 14.9%) keep the columns lined up across them. */
.mtpp-body .mtpp-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0;
	font-size: 0.9rem;
}

.mtpp-body .mtpp-table + .mtpp-table,
.mtpp-body div:has(> .mtpp-table) + div:has(> .mtpp-table) .mtpp-table {
	border-top: 0;
}

.mtpp-body .mtpp-table th,
.mtpp-body .mtpp-table td {
	padding: 0.75rem 1rem;
	border: 1px solid var(--pp-line);
	vertical-align: top;
	text-align: left;
	overflow-wrap: anywhere;
}

.mtpp-body .mtpp-table tr > :nth-child(1) { width: 33.8274%; }
.mtpp-body .mtpp-table tr > :nth-child(2) { width: 51.4385%; }
.mtpp-body .mtpp-table tr > :nth-child(3) { width: 14.9084%; }

.mtpp-body .mtpp-table th {
	color: var(--pp-ink);
	background: var(--pp-cell);
	font-family: var(--pp-head-font);
	font-weight: 600;
}

@media (max-width: 767px) {
	.mtpp-shell {
		padding: 0 16px;
	}

	.mtpp-body .mtpp-table th,
	.mtpp-body .mtpp-table td {
		padding: 0.6rem 0.5rem;
		font-size: 0.85rem;
	}

	/* Phone column widths: wide enough that "Collected" and "characteristics" fit whole at 375px.
	   Where a word still does not fit (narrower phones), browsers with hyphenation add a hyphen. */
	.mtpp-body .mtpp-table tr > :nth-child(1) { width: 34%; }
	.mtpp-body .mtpp-table tr > :nth-child(2) { width: 41%; }
	.mtpp-body .mtpp-table tr > :nth-child(3) { width: 25%; }

	.mtpp-body .mtpp-table td {
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	.mtpp-body .mtpp-table th {
		overflow-wrap: normal;
	}
}