/*
 * Redix Academy: the privacy policy page (includes/policy-page.php, templates/policy-page.php), a page for
 * reading in the academy's night: the logo and a way back, the title with the date it last changed, then the
 * text in one column on a glass sheet. Its clauses are numbered and their inner lists get cyan points.
 * No header or footer: people reach it from the "coming soon" page. Printed, it is black on white.
 */
body.rac-policy {
	margin: 0;
	background: var(--ra-navy-950, #070b1a);
	color: var(--ra-text-2, #c2cde8);
	font-family: var(--ra-font, Assistant, sans-serif);
}
body.rac-policy ::selection {
	background: rgba(47, 224, 230, .3);
	color: #fff;
}

.rac-pp {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	overflow: clip;
}

/* The sky above the title: a soft cyan light and the academy's faint grid, fading as the text begins. */
.rac-pp::before,
.rac-pp::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: -1;
	pointer-events: none;
}
.rac-pp::before {
	height: 680px;
	background:
		radial-gradient(ellipse 55% 65% at 50% 0%, rgba(47, 224, 230, .15), rgba(47, 224, 230, 0) 70%),
		radial-gradient(ellipse 35% 45% at 12% 8%, rgba(32, 44, 89, .6), rgba(32, 44, 89, 0) 70%),
		radial-gradient(ellipse 35% 45% at 88% 8%, rgba(32, 44, 89, .6), rgba(32, 44, 89, 0) 70%);
}
.rac-pp::after {
	height: 560px;
	background-image:
		linear-gradient(rgba(125, 240, 244, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(125, 240, 244, .05) 1px, transparent 1px);
	background-position: center top;
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000 0%, transparent 75%);
	mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000 0%, transparent 75%);
}

.rac-pp-skip {
	position: absolute;
	top: -80px;
	inset-inline-start: 16px;
	z-index: 10;
	padding: 10px 16px;
	border-radius: 10px;
	background: var(--ra-cyan-400, #2fe0e6);
	color: #041018;
	font-weight: 700;
	text-decoration: none;
}
.rac-pp-skip:focus {
	top: 16px;
}

/* ---------------------------------------------------------------- the top row: logo and the way back */
.rac-pp-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: min(100% - 48px, 1080px);
	margin: 0 auto;
	padding-block: 22px;
}
.rac-pp-logo {
	display: block;
	width: 170px;
	border-radius: 8px;
}
.rac-pp-logo img {
	display: block;
	width: 100%;
	height: auto;
}
.rac-pp-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	padding-inline-start: 14px;
	border: 1px solid rgba(194, 205, 232, .18);
	border-radius: 999px;
	background: rgba(19, 27, 58, .55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--ra-text-2, #c2cde8);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 160ms cubic-bezier(.22, 1, .36, 1);
}
.rac-pp-back svg {
	flex: 0 0 auto;
}
.rac-pp-back:hover {
	border-color: rgba(47, 224, 230, .45);
	background: rgba(19, 27, 58, .85);
	color: var(--ra-cyan-300, #7df0f4);
}
.rac-pp-back:active {
	transform: scale(.97);
}
.rac-pp a:focus-visible {
	outline: 2px solid var(--ra-cyan-400, #2fe0e6);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- the title and its date */
.rac-pp-main {
	flex: 1 0 auto;
	width: min(100% - 48px, 780px);
	margin: 0 auto;
	padding: clamp(28px, 6vw, 72px) 0 40px;
	outline: none;
}
.rac-pp-head {
	margin-bottom: clamp(24px, 4vw, 36px);
}
.rac-pp-title {
	margin: 0;
	color: var(--ra-text, #f2f6ff);
	font-family: var(--ra-font, Assistant, sans-serif);
	font-size: clamp(38px, 6vw, 64px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	text-wrap: balance;
}
.rac-pp-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 18px 0 0;
	padding: 7px 14px;
	border: 1px solid rgba(47, 224, 230, .28);
	border-radius: 999px;
	background: rgba(7, 11, 26, .5);
	color: var(--ra-text-3, #8b99bc);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}
.rac-pp-date time {
	color: var(--ra-cyan-300, #7df0f4);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- the text, on a glass sheet */
.rac-pp-doc .rac-pp-body {
	padding: clamp(24px, 5vw, 52px);
	border: 1px solid rgba(194, 205, 232, .1);
	border-radius: 24px;
	background: linear-gradient(180deg, rgba(19, 27, 58, .74), rgba(12, 18, 38, .74));
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .04);
	color: var(--ra-text-2, #c2cde8);
	font-size: 17.5px;
	line-height: 1.85;
	counter-reset: rac-clause;
}
.rac-pp-body > :first-child {
	margin-top: 0;
}
.rac-pp-body > :last-child {
	margin-bottom: 0;
}
.rac-pp-body p {
	margin: 0 0 22px;
}
.rac-pp-body ul,
.rac-pp-body ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The sections: each heading gets its number in a ring, a quiet line above it, and the text under it lines
   up with the heading's words. */
.rac-pp-body > h2 {
	position: relative;
	margin: 40px 0 16px;
	padding-top: 36px;
	padding-inline-start: 50px;
	border-top: 1px solid rgba(194, 205, 232, .08);
	counter-increment: rac-clause;
}
.rac-pp-body > h2:first-child,
.rac-pp-body > p:first-child + h2 {
	margin-top: 28px;
}
.rac-pp-body > h2:first-child {
	padding-top: 0;
	border-top: 0;
}
.rac-pp-body > h2::before,
.rac-pp-body:not(:has(> h2)) > ul > li::before,
.rac-pp-body:not(:has(> h2)) > ol > li::before {
	content: counter(rac-clause);
	position: absolute;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(47, 224, 230, .4);
	border-radius: 50%;
	background: rgba(47, 224, 230, .08);
	color: var(--ra-cyan-300, #7df0f4);
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.rac-pp-body > h2::before {
	top: 34px;
}
.rac-pp-body > h2:first-child::before {
	top: -2px;
}
.rac-pp-body:has(> h2) > :not(h2) {
	padding-inline-start: 50px;
}

/* The lists: cyan points. */
.rac-pp-body ul ul,
.rac-pp-body ul ol {
	margin: 12px 0 0;
}
.rac-pp-body:has(> h2) > ul,
.rac-pp-body:has(> h2) > ol {
	margin: 0 0 22px;
}
.rac-pp-body:has(> h2) li,
.rac-pp-body li li {
	position: relative;
	margin: 10px 0 0;
	padding-inline-start: 24px;
}
.rac-pp-body:has(> h2) li:first-child {
	margin-top: 0;
}
.rac-pp-body:has(> h2) li::before,
.rac-pp-body li li::before {
	content: "";
	position: absolute;
	top: .8em;
	inset-inline-start: 4px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ra-cyan-400, #2fe0e6);
	box-shadow: 0 0 10px rgba(47, 224, 230, .5);
}

.rac-pp-body strong,
.rac-pp-body b {
	color: var(--ra-text, #f2f6ff);
	font-weight: 700;
}
.rac-pp-body a {
	color: var(--ra-cyan-300, #7df0f4);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
/* The headings' letters (their places are set with the sections above). */
.rac-pp-body h2,
.rac-pp-body h3 {
	color: var(--ra-text, #f2f6ff);
	font-family: var(--ra-font, Assistant, sans-serif);
	font-weight: 800;
	line-height: 1.3;
	text-wrap: balance;
}
.rac-pp-body h2 {
	font-size: 23px;
}
.rac-pp-body h3 {
	margin: 26px 0 10px;
	font-size: 18.5px;
	font-weight: 700;
}

/* The page's first text (before the policy had headings): its clauses numbered the same way. */
.rac-pp-body:not(:has(> h2)) > ul > li,
.rac-pp-body:not(:has(> h2)) > ol > li,
.rac-pp-body:not(:has(> h2)) > p {
	padding-inline-start: 52px;
}
.rac-pp-body:not(:has(> h2)) > ul > li,
.rac-pp-body:not(:has(> h2)) > ol > li {
	position: relative;
	margin: 0 0 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(194, 205, 232, .08);
	counter-increment: rac-clause;
}
.rac-pp-body:not(:has(> h2)) > ul:last-child > li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
.rac-pp-body:not(:has(> h2)) > ul > li::before,
.rac-pp-body:not(:has(> h2)) > ol > li::before {
	top: 1px;
}

/* ---------------------------------------------------------------- the end: back, contact, the quiet line */
.rac-pp-foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: min(100% - 48px, 780px);
	margin: 0 auto;
	padding: 8px 0 48px;
	text-align: center;
}
.rac-pp-contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 10px;
	margin: 6px 0 0;
	color: var(--ra-text-3, #8b99bc);
	font-size: 15px;
	line-height: 1.6;
}
.rac-pp-contact a {
	color: var(--ra-text-2, #c2cde8);
	text-decoration: none;
	transition: color 180ms ease;
}
.rac-pp-contact a:hover {
	color: var(--ra-cyan-300, #7df0f4);
}
.rac-pp-copy {
	margin: 0;
	color: var(--ra-text-3, #8b99bc);
	font-size: 13px;
}

/* ---------------------------------------------------------------- phones */
/* About and contact: the same reading page, without numbered sections. */
body.rac-pp-plain .rac-pp-body > h2::before {
	content: none;
}
body.rac-pp-plain .rac-pp-body > h2,
body.rac-pp-plain .rac-pp-body:has(> h2) > :not(h2) {
	padding-inline-start: 0;
}

/* The contact and cancellation forms (includes/legal-forms.php). */
.rac-pp-body .rac-form {
	display: grid;
	gap: 16px;
	max-width: 560px;
	margin-top: 8px;
}
.rac-pp-body .rac-form p {
	margin: 0;
}
.rac-pp-body .rac-field label {
	display: block;
	margin-bottom: 6px;
	color: var(--ra-text, #f2f6ff);
	font-size: 15.5px;
	font-weight: 700;
}
.rac-pp-body .rac-req {
	color: var(--ra-cyan-300, #7df0f4);
}
.rac-pp-body .rac-field input,
.rac-pp-body .rac-field textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid rgba(194, 205, 232, .3);
	border-radius: 12px;
	background: rgba(7, 11, 26, .6);
	color: var(--ra-text, #f2f6ff);
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
}
.rac-pp-body .rac-field textarea {
	min-height: 120px;
	resize: vertical;
}
.rac-pp-body .rac-field input:focus-visible,
.rac-pp-body .rac-field textarea:focus-visible {
	outline: 2px solid var(--ra-cyan-400, #2fe0e6);
	outline-offset: 2px;
	border-color: var(--ra-cyan-400, #2fe0e6);
}
/* The consent box on the contact form: the box beside its words, a big enough target. */
.rac-pp-body .rac-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.rac-pp-body .rac-check input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 3px 0 0;
	accent-color: var(--ra-cyan-400, #2fe0e6);
	cursor: pointer;
}
.rac-pp-body .rac-check input:focus-visible {
	outline: 2px solid var(--ra-cyan-400, #2fe0e6);
	outline-offset: 2px;
}
.rac-pp-body .rac-field.rac-check label {
	display: inline;
	margin: 0;
	color: var(--ra-text-2, #c2cde8);
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.6;
	cursor: pointer;
}
.rac-pp-body .rac-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.rac-pp-body .rac-form-note {
	color: var(--ra-text-3, #9aa6c4);
	font-size: 14.5px;
}
.rac-pp-body .rac-form-btn {
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--ra-cyan-400, #2fe0e6);
	color: #04121a;
	font: inherit;
	font-size: 16.5px;
	font-weight: 800;
	cursor: pointer;
}
.rac-pp-body .rac-form-btn:hover {
	background: var(--ra-cyan-300, #7df0f4);
}
.rac-pp-body .rac-form-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
.rac-pp-body .rac-form-msg {
	padding: 14px 16px;
	border-radius: 12px;
	color: var(--ra-text, #f2f6ff);
	font-weight: 700;
}
.rac-pp-body .rac-form-msg.is-ok {
	border: 1px solid rgba(47, 224, 230, .5);
	background: rgba(47, 224, 230, .1);
}
.rac-pp-body .rac-form-msg.is-err {
	border: 1px solid rgba(255, 138, 128, .6);
	background: rgba(255, 138, 128, .1);
}

@media (max-width: 600px) {
	.rac-pp-top,
	.rac-pp-main,
	.rac-pp-foot {
		width: calc(100% - 32px);
	}
	.rac-pp-top {
		padding-block: 14px;
	}
	.rac-pp-logo {
		width: 132px;
	}
	.rac-pp-back {
		padding-inline: 12px 14px;
		font-size: 14px;
	}
	.rac-pp-doc .rac-pp-body {
		padding: 22px 18px;
		border-radius: 18px;
		font-size: 16.5px;
		line-height: 1.8;
	}
	/* The text under a heading uses the whole width; the number stays beside the heading. */
	.rac-pp-body:has(> h2) > :not(h2) {
		padding-inline-start: 0;
	}
	.rac-pp-body > h2 {
		padding-inline-start: 40px;
		font-size: 21px;
	}
	.rac-pp-body:not(:has(> h2)) > ul > li,
	.rac-pp-body:not(:has(> h2)) > ol > li,
	.rac-pp-body:not(:has(> h2)) > p {
		padding-inline-start: 42px;
	}
	.rac-pp-body > h2::before,
	.rac-pp-body:not(:has(> h2)) > ul > li::before,
	.rac-pp-body:not(:has(> h2)) > ol > li::before {
		width: 28px;
		height: 28px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rac-pp-back,
	.rac-pp-contact a {
		transition: none;
	}
}

@media print {
	body.rac-policy {
		background: #fff;
		color: #000;
	}
	.rac-pp::before,
	.rac-pp::after,
	.rac-pp-top,
	.rac-pp-back,
	.rac-pp-skip {
		display: none;
	}
	.rac-pp-title,
	.rac-pp-body strong,
	.rac-pp-body b {
		color: #000;
	}
	.rac-pp-date {
		border-color: #999;
		background: none;
		color: #333;
	}
	.rac-pp-date time {
		color: #000;
	}
	.rac-pp-doc .rac-pp-body {
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		color: #000;
	}
	.rac-pp-body > h2,
	.rac-pp-body > ul > li,
	.rac-pp-body > ol > li {
		border-color: #ddd;
		break-inside: avoid;
	}
	.rac-pp-body > h2::before,
	.rac-pp-body:not(:has(> h2)) > ul > li::before,
	.rac-pp-body:not(:has(> h2)) > ol > li::before {
		border-color: #000;
		background: none;
		color: #000;
	}
	.rac-pp-body:has(> h2) li::before,
	.rac-pp-body li li::before {
		background: #000;
		box-shadow: none;
	}
	.rac-pp-contact,
	.rac-pp-contact a,
	.rac-pp-copy {
		color: #333;
	}
}