/**
 * The legal section on this site: the 2026 site's document layout (the way back, title, standfirst,
 * meta, versions and downloads; the prose with "On this page" beside it; the index's tabs and the
 * sub-processors' tables) in this site's colours and type. Everything is scoped to the section's
 * own classes, so nothing here reaches another page.
 */

:root {
	--legal-ink: #273240;
	--legal-text: #39434c;
	--legal-muted: #5b6672;
	--legal-accent: #533be2;
	--legal-accent-dark: #0a2540;
	--legal-line: #dbdbdb;
	--legal-wash: #f6f9fc;
	--legal-band: #eef4ff;
	--legal-measure: 46rem;
	/* The site header's own width (its logo and buttons sit 1230px apart), plus the gutter. */
	--legal-width: calc(1230px + 2 * var(--legal-gutter));
	--legal-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--clause-indent: 3em;
}

/* ---- Header ------------------------------------------------------------- */

.legal-header .legal-header__band {
	padding: 0;
}

.legal-header__inner {
	box-sizing: border-box;
	max-width: var(--legal-width);
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.5rem) var(--legal-gutter) clamp(2rem, 4vw, 3rem);
	text-align: left;
}

.legal-back {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 1.25rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--legal-accent);
	text-decoration: none;
}

.legal-back:hover,
.legal-back:focus-visible {
	text-decoration: underline;
}

.legal-icon {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
}

.legal-header__title {
	max-width: 22em;
	margin: 0 0 0.75rem;
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.15;
	color: var(--legal-ink);
}

.legal-header__lead {
	max-width: 40rem;
	margin: 0 0 0.75rem;
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--legal-text);
}

.legal-header__meta {
	margin: 0;
	font-size: 0.95rem;
	color: var(--legal-muted);
}

.legal-notice {
	max-width: 46rem;
	margin: 0 0 1.5rem;
	padding: 0.85rem 1.1rem;
	border-left: 4px solid var(--legal-accent);
	border-radius: 6px;
	background: #fff;
}

.legal-notice p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--legal-text);
}

.legal-notice a {
	color: var(--legal-accent);
}

/* ---- Versions and downloads --------------------------------------------- */

.legal-versions {
	margin: 1.5rem 0 0;
}

.legal-versions__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--legal-ink);
}

.legal-versions__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
}

.legal-versions__select,
.legal-button {
	box-sizing: border-box;
	min-height: 2.9rem;
	border: 1px solid var(--legal-accent);
	border-radius: 5px;
	background-color: #fff;
	font: inherit;
	font-size: 0.95rem;
	color: var(--legal-accent);
}

.legal-versions__select {
	max-width: 100%;
	padding: 0 2.25rem 0 0.9rem;
	color: var(--legal-ink);
	border-color: var(--legal-line);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23273240' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 1rem;
	cursor: pointer;
}

.legal-button {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0 1rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.legal-button:hover,
.legal-button:focus-visible {
	background-color: var(--legal-accent);
	color: #fff;
}

.legal-versions__select:focus-visible,
.legal-button:focus-visible,
.legal-back:focus-visible,
.legal-contents a:focus-visible,
.legal-documents__tab:focus-visible {
	outline: 3px solid var(--legal-accent-dark);
	outline-offset: 2px;
}

/* With the script a pointer's pick is enough; "Show" comes back for a keyboard pick. */
.legal-js .legal-versions__show {
	display: none;
}

.legal-js .legal-versions.is-keyed .legal-versions__show {
	display: inline-flex;
}

/* ---- Body: "On this page" beside the prose ------------------------------- */

.legal-document {
	box-sizing: border-box;
	max-width: var(--legal-width);
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.5rem) var(--legal-gutter) clamp(3rem, 6vw, 5rem);
}

.legal-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

@media (min-width: 64rem) {
	.legal-body {
		grid-template-columns: minmax(14rem, 18rem) minmax(0, var(--legal-measure));
		gap: 4rem;
		align-items: start;
	}

	.legal-body--single {
		grid-template-columns: minmax(0, var(--legal-measure));
		justify-content: center;
	}

	.legal-aside {
		position: sticky;
		top: 7rem;
		max-height: calc(100vh - 8rem);
		overflow-y: auto;
	}
}

.legal-contents,
.legal-facts {
	margin: 0;
	padding: 1.25rem 1.25rem 1rem;
	border: 1px solid var(--legal-line);
	border-radius: 12px;
	background-color: var(--legal-wash);
}

.legal-contents__heading {
	display: block;
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--legal-ink);
}

.legal-contents__heading::-webkit-details-marker {
	display: none;
}

/* On a phone "On this page" is folded under its heading (legal.js closes it there), with a chevron
   saying so; beside the prose it is always open, a list rather than a control. */
.legal-contents__heading::after {
	content: '';
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-left: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.2em) rotate(45deg);
	transition: transform 0.2s;
}

.legal-contents__details[open] > .legal-contents__heading::after {
	transform: translateY(0.05em) rotate(-135deg);
}

@media (min-width: 64rem) {
	.legal-contents__heading {
		pointer-events: none;
	}

	.legal-contents__heading::after {
		content: none;
	}
}

.legal-contents__heading {
	cursor: pointer;
	list-style: none;
}

.legal-contents__list {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.legal-contents__list li {
	margin: 0;
	padding: 0.3rem 0;
	font-size: 0.95rem;
	line-height: 1.4;
}

.legal-contents__list li::before {
	content: none;
}

.legal-contents a {
	color: var(--legal-accent);
	text-decoration: underline;
	text-decoration-color: transparent;
}

.legal-contents a:hover {
	text-decoration-color: currentColor;
}

.legal-facts__fact + .legal-facts__fact {
	margin-top: 0.9rem;
}

.legal-facts dt {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--legal-muted);
}

.legal-facts dd {
	margin: 0.15rem 0 0;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--legal-ink);
}

/* ---- Prose -------------------------------------------------------------- */

.legal-prose {
	min-width: 0;
	color: var(--legal-text);
}

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

.legal-prose :is(h2, h3, h4) {
	color: var(--legal-ink);
	line-height: 1.25;
	scroll-margin-top: 7rem;
}

.legal-prose h2 {
	margin: 2.5em 0 0.75em;
	font-size: 1.6rem;
}

.legal-prose h3 {
	margin: 2em 0 0.6em;
	font-size: 1.3rem;
}

.legal-prose h4 {
	margin: 1.75em 0 0.5em;
	font-size: 1.1rem;
}

.legal-prose :is(p, li) {
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--legal-text);
}

.legal-prose p {
	margin: 0 0 1.1em;
}

.legal-prose a {
	color: var(--legal-accent);
	overflow-wrap: anywhere;
}

/* Lists read as lists: this site's prose styles mark bullets with an icon (single-content), which
   these documents do not use. */
.legal-prose :is(ul, ol):not(.is-style-sub-clauses) {
	margin: 0 0 1.1em;
	padding-left: 1.5em;
}

.legal-prose ul:not(.is-style-sub-clauses) {
	list-style: disc;
}

.legal-prose ol:not(.is-style-sub-clauses) {
	list-style: decimal;
}

.legal-prose li {
	display: list-item;
	margin: 0 0 0.4em;
	padding: 0;
}

.legal-prose li::before {
	content: none;
}

.legal-prose li > :is(ul, ol) {
	margin: 0.4em 0 0;
}

/* A clause: its number (text, "4.10") hangs in a column of its own and its words start one column
   in, as the legal team's Word files set it. Sub-clauses ("(a)") a column further, the letters
   hanging the same way, with no marker of the list's own. */
.legal-prose .is-style-clause {
	padding-left: var(--clause-indent);
}

.legal-prose ol.is-style-sub-clauses,
.legal-prose ul.is-style-sub-clauses {
	margin: 0 0 1.1em;
	padding-left: calc(2 * var(--clause-indent));
	list-style-type: '\200B';
}

.legal-prose :is(.is-style-clause, .is-style-sub-clauses > li) > .clause-number {
	float: left;
	width: var(--clause-indent);
	margin-left: calc(-1 * var(--clause-indent));
}

/* Tables in the text: ruled, and scrolled sideways in their own box on a narrow screen. Held in the
   column: the theme's table breaks out to 1000px centred on the page (_wp-block-table.scss), which
   here ran over "On this page". */
.legal-prose .wp-block-table {
	position: static;
	left: auto;
	min-width: 0;
	max-width: 100%;
	transform: none;
	box-shadow: none;
	margin: 0 0 1.5em;
	overflow-x: auto;
	border: 1px solid var(--legal-line);
	border-radius: 8px;
	background-color: #fff;
}

.legal-prose .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.legal-prose .wp-block-table :is(th, td) {
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--legal-line);
	font-size: 0.95rem;
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
}

.legal-prose .wp-block-table tr > :first-child {
	border-left: 0;
}

.legal-prose .wp-block-table tr > :last-child {
	border-right: 0;
}

.legal-prose .wp-block-table tr:first-child > * {
	border-top: 0;
}

.legal-prose .wp-block-table tr:last-child > * {
	border-bottom: 0;
}

.legal-prose .wp-block-table thead {
	background-color: var(--legal-band);
}

.legal-prose .wp-block-table figcaption {
	padding: 0.5rem 0.9rem;
	font-size: 0.9rem;
	color: var(--legal-muted);
}

/* ---- Data tables: the legal index and the sub-processors ---------------- */

.legal-table__scroll {
	overflow-x: auto;
}

.legal-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.legal-table :is(th, td) {
	padding: 0.9rem 1rem;
	border-bottom: 1px solid var(--legal-line);
	font-size: 0.95rem;
	line-height: 1.45;
	text-align: left;
	vertical-align: top;
	color: var(--legal-text);
}

.legal-table thead th {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--legal-muted);
	background-color: var(--legal-wash);
}

.legal-table tbody th {
	font-weight: 600;
	color: var(--legal-ink);
}

.legal-table tbody tr:last-child > * {
	border-bottom: 0;
}

.legal-table__label {
	display: none;
}

/* Below a tablet the table restacks: a row is a card, each cell names its column. */
@media (max-width: 47.99rem) {
	.legal-table,
	.legal-table :is(tbody, tr, th, td) {
		display: block;
		width: 100%;
	}

	.legal-table colgroup,
	.legal-table thead {
		display: none;
	}

	.legal-table tbody tr {
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--legal-line);
	}

	.legal-table tbody tr:last-child {
		border-bottom: 0;
	}

	.legal-table :is(th, td) {
		box-sizing: border-box;
		padding: 0.35rem 1rem;
		border: 0;
	}

	.legal-table__label {
		display: block;
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--legal-muted);
	}
}

/* ---- The index ---------------------------------------------------------- */

.legal-documents {
	box-sizing: border-box;
	max-width: var(--legal-width);
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.5rem) var(--legal-gutter) clamp(3rem, 6vw, 5rem);
}

.legal-documents__card,
.sub-processors {
	border: 1px solid var(--legal-line);
	border-radius: 12px;
	background-color: #fff;
	box-shadow: 0 6px 24px rgba(39, 50, 64, 0.06);
	overflow: hidden;
}

.legal-documents__tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding: 0.75rem 0.75rem 0;
	border-bottom: 1px solid var(--legal-line);
	background-color: var(--legal-wash);
}

.legal-documents__tab {
	padding: 0.75rem 1rem;
	border-bottom: 3px solid transparent;
	font-weight: 600;
	color: var(--legal-text);
	text-decoration: none;
}

.legal-documents__tab:hover {
	color: var(--legal-accent);
}

.legal-documents__tab[aria-selected='true'] {
	border-bottom-color: var(--legal-accent);
	color: var(--legal-accent);
}

.legal-documents__topic {
	margin: 0;
	padding: 1.25rem 1rem 0.5rem;
	font-size: 1.2rem;
	color: var(--legal-ink);
}

/* With the script, only the shelf in view: hidden before the script runs so nothing jumps. */
.legal-js [data-legal-tabs]:not(.is-tabbed) .legal-documents__group:not(:first-of-type),
.legal-js [data-legal-tabs] .legal-documents__topic {
	display: none;
}

.legal-documents__link {
	color: var(--legal-accent);
	text-decoration: none;
}

.legal-documents__link:hover {
	text-decoration: underline;
}

/* ---- Sub-processors ----------------------------------------------------- */

.legal-prose .sub-processors {
	margin: 0 0 2.5rem;
}

.sub-processors__intro {
	padding: 1.25rem 1rem 0.75rem;
}

.legal-prose .sub-processors__heading {
	margin: 0 0 0.4rem;
	font-size: 1.35rem;
}

.legal-prose .sub-processors__note {
	max-width: 46rem;
	margin: 0;
	font-size: 1rem;
	color: var(--legal-muted);
}

.sub-processors__empty {
	padding: 0 1rem 1rem;
}

.sub-processors__provider {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.sub-processors__logo {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	object-fit: contain;
}

.sub-processors__pill {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background-color: var(--legal-band);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--legal-ink);
	white-space: nowrap;
}

.sub-processors--optional .sub-processors__pill {
	background-color: #f7f1f9;
}

.sub-processors__link {
	color: var(--legal-accent);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.sub-processors__link:hover {
	text-decoration: underline;
}

.legal-prose .legal-table :is(p, li) {
	font-size: 0.95rem;
}

/* ---- Notice ------------------------------------------------------------- */

.legal-notice-block {
	margin: 0 0 2rem;
}

.legal-notice-block__panel {
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--legal-accent);
	border-radius: 8px;
	background-color: var(--legal-band);
}

.legal-prose .legal-notice-block__heading {
	margin: 0 0 0.4rem;
	font-weight: 600;
	color: var(--legal-ink);
}

.legal-prose .legal-notice-block__text {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.legal-prose .legal-notice-block__text:last-child {
	margin-bottom: 0;
}

.sub-processors__arrow {
	margin-left: 0.25em;
}

/* ---- Above the theme's link colour ---------------------------------------
   The theme colours every link in the page blurple with an id selector
   (`#content a:not([class^=wp-block]):not([class*=__link])`), which outranks the classes above: a
   button's text stayed blurple on its blurple hover, and every tab read as the selected one. Each rule
   here is the same as above, its class doubled so it outranks that selector: (1,2,2) and more against
   the theme's (1,2,1). */
body #content a.legal-button.legal-button:hover,
body #content a.legal-button.legal-button:focus-visible {
	background-color: var(--legal-accent);
	color: #fff;
}

body #content a.legal-documents__tab.legal-documents__tab {
	color: var(--legal-text);
}

body #content a.legal-documents__tab.legal-documents__tab:hover,
body #content a.legal-documents__tab.legal-documents__tab[aria-selected='true'] {
	color: var(--legal-accent);
}