/*
 * Inner-page families: content, listing, FAQ, contact and legal (T101,
 * Phase 3S).
 *
 * The rhythm is the one design/creative-brief.md §13.2 sets for an inner
 * page -- header family on ivory over paper-200, body on ivory, the quote
 * desk on petrol-950, footer on petrol-900 -- so this file dresses the body
 * only, and dresses it as a ledger: ruled sections, one gold register line
 * per composition, Latin tabular ordinals, and nothing filled in gold
 * (C-06).
 *
 * Loaded on the five templates that use these families and nowhere else
 * (functions.php), so every selector here can stay short without reaching
 * another page. Tokens resolve theme.json presets with the brief's hex as a
 * fallback; the frame, the measure, the rhythm and the motion scale are
 * inherited from style.css and never redefined. Logical properties only
 * (constitution VII); horizontal motion follows --qlp-motion-x (MOT-006).
 */

/* The Arabic setting of the language study is the one place an English
 * document may load the Arabic subset (creative brief §13, C-09). Scoped to
 * [dir="ltr"] below, so it is never fetched on /ar/, where style.css
 * already provides Cairo. Same family name and same source as the home
 * composition's, so the two pages can never disagree about it. */
@font-face {
	font-family: "QLP Cairo Arabic";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/cairo/cairo-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ------------------------------------------------------------------ tokens */

.qlp-prose {
	--qlp-c-petrol-800: var(--wp--preset--color--petrol-800, #103b3a);
	--qlp-c-paper-50: var(--wp--preset--color--paper-50, #fbf9f5);
	--qlp-c-paper-200: var(--wp--preset--color--paper-200, #efe9dc);
	--qlp-c-paper-300: var(--wp--preset--color--paper-300, #e4dccb);
	--qlp-c-ink-700: var(--wp--preset--color--ink-700, #2c3a37);
	--qlp-c-gold-line: var(--wp--preset--color--gold-line, #a57e4a);
	--qlp-c-gold-700: var(--wp--preset--color--gold-700, #81633a);

	--qlp-pc-step: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
	--qlp-pc-gap: clamp(2.75rem, 2rem + 3vw, 5rem);
	--qlp-pc-ledger: 46rem;
}

/* `core/post-content` wraps the body in one element of its own, so the
 * reading measure style.css puts on `.qlp-prose > *` would otherwise cap
 * the whole page -- compositions included -- at 68ch. It is released here
 * and re-applied per element below, which is what lets the journey run four
 * stations wide while the prose beside it stays readable. */
.qlp-prose > .entry-content,
.qlp-prose > .wp-block-post-content {
	max-inline-size: none;
}

/* --------------------------------------------------------------- sections */

.qlp-pc-sec {
	margin-block: 0;
}

.qlp-pc-sec + .qlp-pc-sec {
	margin-block-start: var(--qlp-pc-gap);
	padding-block-start: var(--qlp-pc-gap);
	border-block-start: 1px solid var(--qlp-c-paper-300);
}

.qlp-pc-sec h2 {
	max-inline-size: 30ch;
}

.qlp-pc-intro {
	max-inline-size: var(--qlp-measure);
	color: var(--qlp-c-ink-700);
}

/* ------------------------------------------------- the document journey */

.qlp-pc-journey__track {
	position: relative;
	display: grid;
	gap: clamp(1.75rem, 1rem + 2vw, 2.5rem);
	margin-block-start: var(--qlp-pc-step);
}

/* The spine: one gold register line every station hangs from. */
.qlp-pc-journey__track::before {
	content: "";
	position: absolute;
	background-color: var(--qlp-c-gold-line);
	transition: transform var(--qlp-motion-duration-slow) var(--qlp-motion-ease-out);
}

/* Core's flow-layout block gap would add its own 24px between grid items
 * and knock every station off the spine by a different amount, so the two
 * grids this section is built from set their own spacing. */
.qlp-pc-journey__track > *,
.qlp-pc-station > * {
	margin-block: 0;
}

.qlp-pc-station {
	position: relative;
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	column-gap: 12px;
	align-items: center;
	/* Auto rows would otherwise stretch to whatever the tallest station in
	 * the row needs, and each station would distribute that slack
	 * differently -- four headings, four baselines. */
	align-content: start;
}

/* The glyph and the ordinal share one 30px row, so every station starts on
 * exactly the same line whatever its heading does below. */
.qlp-pc-station::before {
	content: "";
	grid-column: 1;
	grid-row: 1;
	inline-size: 30px;
	block-size: 30px;
	background-color: var(--qlp-c-petrol-800);
	-webkit-mask: var(--qlp-pc-glyph) no-repeat center / contain;
	mask: var(--qlp-pc-glyph) no-repeat center / contain;
}

.qlp-pc-station--1 {
	--qlp-pc-glyph: url("../svg/content/journey-receive.svg");
}

.qlp-pc-station--2 {
	--qlp-pc-glyph: url("../svg/content/journey-translate.svg");
}

.qlp-pc-station--3 {
	--qlp-pc-glyph: url("../svg/content/journey-review.svg");
}

.qlp-pc-station--4 {
	--qlp-pc-glyph: url("../svg/content/journey-deliver.svg");
}

.qlp-pc-num {
	grid-column: 2;
	grid-row: 1;
	display: block;
	align-self: center;
}

.qlp-pc-station h3 {
	grid-column: 1 / -1;
	grid-row: 2;
	margin-block-start: 14px;
	font-family: var(--qlp-font-ui);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--qlp-c-petrol-800);
}

.qlp-pc-station p {
	grid-column: 1 / -1;
	grid-row: 3;
	margin-block-start: 8px;
	font-size: 1rem;
	color: var(--qlp-c-ink-700);
	max-inline-size: 42ch;
}

@media (min-width: 900px) {
	.qlp-pc-journey__track {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: clamp(1.5rem, 0.5rem + 2vw, 3rem);
		padding-block-start: 44px;
	}

	.qlp-pc-journey__track::before {
		inset-inline: 0;
		inset-block-start: 14px;
		block-size: 1px;
		transform-origin: 0 50%;
	}

	[dir="rtl"] .qlp-pc-journey__track::before {
		transform-origin: 100% 50%;
	}

	.qlp-pc-station {
		padding-block-start: 30px;
	}

	/* A tick rising from the spine to each station. */
	.qlp-pc-station::after {
		content: "";
		position: absolute;
		inset-block-start: -30px;
		inset-inline-start: 0;
		inline-size: 1px;
		block-size: 30px;
		background-color: var(--qlp-c-gold-line);
		opacity: 0.55;
	}
}

@media (max-width: 899px) {
	.qlp-pc-journey__track {
		padding-inline-start: 34px;
	}

	.qlp-pc-journey__track::before {
		inset-block: 8px 24px;
		inset-inline-start: 0;
		inline-size: 1px;
		transform-origin: 50% 0;
	}

	.qlp-pc-station::after {
		content: "";
		position: absolute;
		inset-block-start: 15px;
		inset-inline-start: -34px;
		inline-size: 26px;
		block-size: 1px;
		background-color: var(--qlp-c-gold-line);
		opacity: 0.55;
	}
}

html.js:not(.qlp-reduced) .qlp-pc-journey__track:not(.is-visible)::before {
	transform: scaleX(0);
}

@media (max-width: 899px) {
	html.js:not(.qlp-reduced) .qlp-pc-journey__track:not(.is-visible)::before {
		transform: scaleY(0);
	}
}

html.js:not(.qlp-reduced) .qlp-pc-station--2 {
	transition-delay: 90ms;
}

html.js:not(.qlp-reduced) .qlp-pc-station--3 {
	transition-delay: 180ms;
}

html.js:not(.qlp-reduced) .qlp-pc-station--4 {
	transition-delay: 270ms;
}

/* ------------------------------------------------------ the ruled ledgers */

.qlp-pc-ledger__list,
.qlp-pc-values__list {
	max-inline-size: var(--qlp-pc-ledger);
	margin-block: var(--qlp-pc-step) 0;
}

.qlp-pc-ledger__list > li {
	padding-block: 1rem;
	color: var(--qlp-c-ink-700);
}

.qlp-prose .qlp-pc-ledger__list > li::before {
	inset-block-start: calc(1rem + 0.6em);
}

.qlp-pc-values__list > li {
	padding-block: 1.05rem;
	color: var(--qlp-c-ink-700);
}

.qlp-prose .qlp-pc-values__list > li::before {
	inset-block-start: calc(1.05rem + 0.55em);
}

.qlp-pc-values__list strong {
	display: block;
	margin-block-end: 4px;
	font-family: var(--qlp-font-ui);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--qlp-c-petrol-800);
}

/* The closing statement of a ledger, on its own register line. */
.qlp-pc-note {
	margin-block-start: var(--qlp-pc-step);
	padding-inline-start: clamp(14px, 1.4vw, 20px);
	border-inline-start: 1px solid var(--qlp-c-gold-line);
	max-inline-size: var(--qlp-measure);
	color: var(--qlp-c-ink-700);
}

/* ------------------------------------------------------------------ about */

.qlp-pc-about__grid {
	display: grid;
	gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	align-items: center;
}

.qlp-pc-about__grid > *,
.qlp-pc-desk > * {
	margin-block: 0;
}

@media (min-width: 900px) {
	.qlp-pc-about__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.qlp-pc-about__statement {
	color: var(--qlp-c-petrol-800);
}

/* VR-F021: the legal entity is a fact about the company, not part of the
 * statement's voice, and a display-size Latin run inside that sentence
 * broke mid-name in both languages and detached its brackets in Arabic.
 * It is now a line of its own at meta size, directly under the statement
 * and never broken: the name is one unbreakable run, and the line it sits
 * on is free to be the only thing that wraps. */
.qlp-pc-about__entity {
	margin-block-start: clamp(0.6rem, 0.5rem + 0.4vw, 0.9rem);
	max-inline-size: none;
}

.qlp-pc-about__entity bdi {
	white-space: nowrap;
}

/* At the narrowest width the unbreakable name is wider than the column
 * would give it, so the line -- not the name -- gives way. */
@media (max-width: 419px) {
	.qlp-pc-about__entity {
		font-size: 0.75rem;
		letter-spacing: 0.02em;
	}
}

.qlp-pc-about__text p:not(.qlp-statement) {
	margin-block-start: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
	max-inline-size: 54ch;
	color: var(--qlp-c-ink-700);
}

.qlp-pc-about__art {
	inline-size: 100%;
	max-inline-size: 300px;
	justify-self: center;
}

@media (min-width: 900px) {
	.qlp-pc-about__art {
		justify-self: end;
	}
}

/* --------------------------------------------------------- language pairs */

/* VR-F022: the display pair is one composition, not two headlines stacked.
 * From 768px up the two settings sit at the two ends of a single register
 * line with the swap mark centred on it; below that they stack, both placed
 * from the composition's inline start, and the same line divides them with
 * the mark still centred. The grid places the boxes, so the Latin setting
 * inside an Arabic page is positioned by the composition and never drifts to
 * the end its own direction would choose. */
.qlp-langpairs__study {
	display: grid;
	justify-items: start;
	align-items: center;
	row-gap: clamp(0.5rem, 0.35rem + 0.6vw, 0.9rem);
	margin-block: var(--qlp-pc-step) clamp(1.75rem, 1.25rem + 2vw, 3rem);
	padding-block: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
	border-block: 1px solid var(--qlp-c-paper-300);
}

@media (min-width: 768px) {
	.qlp-langpairs__study {
		grid-template-columns: auto minmax(3rem, 1fr) auto;
		column-gap: clamp(1rem, 0.4rem + 2vw, 2.5rem);
		row-gap: 0;
	}

	/* The far end of the line: the second setting closes the pair. */
	.qlp-langpairs__word:last-child {
		justify-self: end;
	}
}

.qlp-langpairs__word {
	margin: 0;
	font-family: var(--qlp-font-display);
	font-weight: 600;
	font-size: clamp(2.5rem, 1.4rem + 5vw, 5.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--qlp-c-petrol-800);
}

.qlp-langpairs__word[dir="rtl"] {
	font-family: var(--wp--preset--font-family--cairo, Cairo, "Segoe UI", Tahoma, sans-serif);
	font-weight: 700;
	font-size: clamp(2.25rem, 1.25rem + 4.6vw, 5rem);
	line-height: 1.25;
	letter-spacing: 0;
}

[dir="ltr"] .qlp-langpairs__word[dir="rtl"] {
	font-family: "QLP Cairo Arabic", var(--wp--preset--font-family--cairo, Cairo), "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* Both settings are display type, not paragraphs. Without this the Arabic
 * document's paragraph leading opens almost two lines of space around the
 * Latin setting, and the pair stops reading as two words of one size. */
:lang(ar) .qlp-langpairs__word {
	line-height: 1.25;
}

:lang(ar) .qlp-langpairs__word[dir="ltr"] {
	line-height: 1;
}

/* The register line between the two settings: the alignment study itself.
 * It is drawn as two segments with the swap mark between them, which is what
 * keeps the mark on the middle of the line in both layouts without a fill
 * sitting under it. */
.qlp-langpairs__rule {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 0.45rem + 0.5vw, 1rem);
	justify-self: stretch;
	inline-size: 100%;
	margin-block: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
	color: var(--qlp-c-gold-line);
}

.qlp-langpairs__rule::before,
.qlp-langpairs__rule::after {
	content: "";
	flex: 1 1 0;
	block-size: 1px;
	background-color: var(--qlp-c-gold-line);
}

.qlp-langpairs__rule .qlp-mark {
	flex: none;
	inline-size: 24px;
	block-size: 18px;
}

@media (min-width: 768px) {
	.qlp-langpairs__rule {
		margin-block: 0;
	}
}

.qlp-langpairs__list {
	max-inline-size: 42rem;
}

/* A pair row already states its direction with the system's arrow mark, so
 * it does not also take the body list's tick. */
.qlp-prose .qlp-langpairs__list > li {
	padding-inline-start: 0;
}

.qlp-prose .qlp-langpairs__list > li::before {
	content: none;
}

.qlp-langpairs__pair {
	display: flex;
	align-items: center;
	gap: 0.85em;
	padding-block: 1rem;
	font-family: var(--qlp-font-ui);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--qlp-c-petrol-800);
}

.qlp-langpairs__pair .qlp-mark--arrow {
	flex: none;
	color: var(--qlp-c-gold-line);
}

/* The pair settle (T103, MOT-001, MOT-006).
 *
 * Each confirmed pair enters from the inline start and comes to rest on the
 * register the list is ruled by: the same entrance the rest of the site uses
 * for an inline reveal, so the Languages page settles the way the hero does.
 * The rows are server-rendered from the confirmed-pair setting, so their
 * number is not known here and the stagger is written as positions rather
 * than as `[data-qlp-delay]` attributes: four 70 ms steps, and everything
 * past the fourth row arrives with the fourth, so a long list never turns
 * into a long wait.
 *
 * Only the delay lives here. The entrance itself, its duration, its easing
 * and its direction sign are the design system's (style.css §18.2), and the
 * resting state is the CSS default, so a reader without JavaScript or with
 * reduced motion sees the finished list. */
html.js:not(.qlp-reduced) .qlp-langpairs__list > li:nth-child(2) {
	transition-delay: 70ms;
}

html.js:not(.qlp-reduced) .qlp-langpairs__list > li:nth-child(3) {
	transition-delay: 140ms;
}

html.js:not(.qlp-reduced) .qlp-langpairs__list > li:nth-child(4) {
	transition-delay: 210ms;
}

html.js:not(.qlp-reduced) .qlp-langpairs__list > li:nth-child(n + 5) {
	transition-delay: 280ms;
}

/* ---------------------------------------------------------------- the FAQ */

.qlp-faqlist {
	display: grid;
	gap: clamp(2rem, 1.5rem + 2vw, 3.25rem);
	margin-block-start: var(--qlp-pc-step);
}

/* The topic label is the system's eyebrow, not a second headline: small,
 * tracked, and the only gold in its viewport (C-06). The `.qlp-prose`
 * prefix is what outranks style.css's own `.qlp-prose h2` size. */
.qlp-prose .qlp-faqlist__topic {
	font-family: var(--qlp-font-ui);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--qlp-c-gold-700);
}

:lang(ar) .qlp-prose .qlp-faqlist__topic {
	font-size: 0.875rem;
	letter-spacing: normal;
	text-transform: none;
}

.qlp-faqlist__rows {
	margin-block-start: clamp(0.75rem, 0.6rem + 0.5vw, 1.1rem);
	padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
	background-color: var(--qlp-c-paper-50);
	border: 1px solid var(--qlp-c-paper-300);
	border-radius: var(--qlp-radius);
	box-shadow: var(--qlp-shadow);
}

.qlp-faqlist__row {
	border-block-start: 1px solid var(--qlp-c-paper-300);
}

.qlp-faqlist__row:last-child {
	border-block-end: 1px solid var(--qlp-c-paper-300);
}

.qlp-faqlist__q {
	position: relative;
	display: block;
	padding-block: clamp(1rem, 0.75rem + 0.8vw, 1.375rem);
	padding-inline-end: 44px;
	font-family: var(--qlp-font-ui);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--qlp-c-petrol-800);
	cursor: pointer;
	list-style: none;
}

.qlp-faqlist__q::-webkit-details-marker {
	display: none;
}

/* VR-F010: the disclosure marker is one SVG stroke, drawn twice from the
 * same asset and tinted with a token -- never a character, so no font can
 * fail to supply it. Both strokes take the same logical inset and only ever
 * move along the block axis, so they stay concentric in both directions;
 * the upright stroke turns flat and fades when the row opens, taking the
 * plus to a minus. */
.qlp-faqlist__q::before,
.qlp-faqlist__q::after {
	content: "";
	position: absolute;
	inset-inline-end: 8px;
	inset-block-start: 50%;
	inline-size: 15px;
	block-size: 15px;
	translate: 0 -50%;
	background-color: var(--qlp-c-gold-line);
	-webkit-mask: url("../svg/content/mark-minus.svg") no-repeat center / contain;
	mask: url("../svg/content/mark-minus.svg") no-repeat center / contain;
}

.qlp-faqlist__q::after {
	rotate: 90deg;
	transition:
		rotate var(--qlp-motion-duration-base) var(--qlp-motion-ease-out),
		opacity var(--qlp-motion-duration-fast) var(--qlp-motion-ease-out);
}

.qlp-faqlist__row[open] .qlp-faqlist__q::after {
	rotate: 0deg;
	opacity: 0;
}

.qlp-faqlist__a {
	padding-block-end: clamp(1rem, 0.75rem + 0.8vw, 1.375rem);
	padding-inline-end: 44px;
}

.qlp-faqlist__a p {
	margin-block: 0;
	max-inline-size: var(--qlp-measure);
	color: var(--qlp-c-ink-700);
}

.qlp-faqlist__a p + p {
	margin-block-start: 0.75em;
}

/* ---------------------------------------------- contact: one desk, not two */

/* Fable decision, round 2: the quote call to action on this page is the
 * shared desk the template appends. The body states the route instead --
 * the documents note as the page's one statement, the deck's sentence
 * beneath it -- so the same button is never drawn twice on one page. */
.qlp-pc-contact__lead {
	max-inline-size: var(--qlp-pc-ledger);
}

.qlp-pc-contact__lead > * {
	margin-block: 0;
}

.qlp-pc-contact__note {
	font-family: var(--qlp-font-display);
	font-size: clamp(1.375rem, 1.15rem + 1vw, 2rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--qlp-c-petrol-800);
	text-wrap: balance;
}

:lang(ar) .qlp-pc-contact__note {
	font-weight: 700;
	font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.8rem);
	line-height: 1.65;
}

.qlp-pc-contact__lead p:not(.qlp-pc-contact__note) {
	margin-block-start: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
	max-inline-size: 54ch;
	color: var(--qlp-c-ink-700);
}

/* ------------------------------------------------------- contact channels */

/* The section is absent, not empty, until a channel is confirmed: the
 * block renders no markup at all, so none of these rules has anything to
 * draw and the page never carries a heading over nothing (CI-003). */
.qlp-channels {
	display: block;
	margin-block-start: var(--qlp-pc-gap);
	padding-block-start: var(--qlp-pc-gap);
	border-block-start: 1px solid var(--qlp-c-paper-300);
	max-inline-size: var(--qlp-pc-ledger);
}

.qlp-prose .qlp-channels__heading {
	font-family: var(--qlp-font-ui);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--qlp-c-gold-700);
}

:lang(ar) .qlp-prose .qlp-channels__heading {
	font-size: 0.875rem;
	letter-spacing: normal;
	text-transform: none;
}

.qlp-channels__list {
	margin-block-start: clamp(0.75rem, 0.6rem + 0.5vw, 1.1rem);
}

.qlp-channels__row {
	display: grid;
	gap: 2px clamp(16px, 2vw, 32px);
	padding-block: 1rem;
}

@media (min-width: 600px) {
	.qlp-channels__row {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		align-items: baseline;
	}
}

.qlp-channels__label {
	font-family: var(--qlp-font-ui);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--qlp-c-petrol-800);
}

.qlp-channels__value {
	color: var(--qlp-c-ink-700);
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------ retention line */

/* One sentence, from one settings field, closing the page it belongs to
 * (FR-036, FR-067). `.qlp-meta` gives it the system's quiet voice; the
 * label tracking it carries elsewhere is dropped, because this is a
 * sentence and not a label. */
.qlp-pc-retention {
	margin-block-start: var(--qlp-pc-step);
	padding-block-start: clamp(1rem, 0.8rem + 0.6vw, 1.4rem);
	border-block-start: 1px solid var(--qlp-c-paper-300);
	max-inline-size: var(--qlp-pc-ledger);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.7;
}

:lang(ar) .qlp-pc-retention {
	line-height: 1.9;
}

/* --------------------------------------------------------- legal typography */

.qlp-pc-legal {
	max-inline-size: var(--qlp-pc-ledger);
}

.qlp-pc-legal__notice {
	margin: 0;
	padding: clamp(0.9rem, 0.8rem + 0.5vw, 1.2rem) clamp(1rem, 0.9rem + 0.6vw, 1.5rem);
	background-color: var(--qlp-c-paper-200);
	border-inline-start: 2px solid var(--qlp-c-gold-line);
	border-radius: var(--qlp-radius);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--qlp-c-ink-700);
}

.qlp-prose .qlp-pc-legal__clauses {
	list-style: none;
	counter-reset: qlp-pc-clause;
	margin-block-start: var(--qlp-pc-step);
	padding-inline-start: 0;
}

.qlp-pc-legal__clauses > li {
	position: relative;
	counter-increment: qlp-pc-clause;
	padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	padding-inline-start: 4.25rem;
	border-block-start: 1px solid var(--qlp-c-paper-300);
	line-height: 1.75;
	color: var(--qlp-c-ink-700);
}

.qlp-pc-legal__clauses > li:last-child {
	border-block-end: 1px solid var(--qlp-c-paper-300);
}

/* Clause numbers are drawn by the counter in Latin tabular digits, so the
 * two languages number their clauses identically and no script of its own
 * enters the Arabic column (L10N-006). */
.qlp-pc-legal__clauses > li::before {
	content: counter(qlp-pc-clause, decimal-leading-zero);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	font-family: var(--wp--preset--font-family--source-sans-3, "Source Sans 3", system-ui, sans-serif);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.9;
	color: var(--qlp-c-gold-700);
}

/* --------------------------------- IMG-PROCESS, IMG-ABOUT: section figures */

/* T102. Both sections were a single ruled column with the whole inline-end
 * half of the page empty, so the photograph goes there in flow: no overlap,
 * no text over an image (IMG-008), and nothing absolutely positioned.
 * Below the breakpoint the figure follows the list instead of sitting beside
 * it, and it stays visible -- a hidden image is downloaded all the same. */
.qlp-pc-ledger__grid,
.qlp-pc-values__grid {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

@media (min-width: 900px) {
	.qlp-pc-ledger__grid,
	.qlp-pc-values__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

figure.qlp-pc-ledger__art,
figure.qlp-pc-values__art {
	margin: 0;
	align-self: center;
}

.qlp-pc-ledger__art img,
.qlp-pc-values__art img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--qlp-paper-300);
	border-radius: 2px;
}