.readings-intro {
	max-width: var(--measure);
}

.readings-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
	max-width: 56ch;
}

.readings-steps li {
	position: relative;
	counter-increment: step;
	padding: clamp(14px, 1.8vw, 20px) 0 clamp(14px, 1.8vw, 20px) 3.2em;
	border-top: 1px dashed var(--line-2);
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.readings-steps li:last-child {
	border-bottom: 1px dashed var(--line-2);
}

.readings-steps li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: clamp(14px, 1.8vw, 20px);
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	color: var(--gold);
	font-variant-numeric: lining-nums tabular-nums;
}

.readings-note {
	margin-top: clamp(20px, 2.6vw, 32px);
	max-width: 52ch;
	font-size: var(--t-small);
	line-height: 1.5;
	color: var(--bone-3);
}

.readings-rates {
	margin-bottom: clamp(20px, 2.6vw, 32px);
}

@media (min-width: 900px) {
	.split__main:has(> .readings-intro) {
		grid-column: 3 / -1;
	}

	.readings-intro {
		max-width: none;
		columns: 2;
		column-gap: clamp(28px, 3.4vw, 56px);
	}

	.readings-intro > * {
		break-inside: avoid;
	}
}

@media (min-width: 900px) {
	.split__main:has(> .readings-steps) {
		grid-column: 3 / -1;
	}

	.readings-steps {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(28px, 3.4vw, 56px);
		max-width: none;
	}

	.readings-steps li:nth-last-child(2):nth-child(odd) {
		border-bottom: 1px dashed var(--line-2);
	}
}

@media (min-width: 900px) {
	.rates,
	.readings-note,
	.readings-steps {
		--g: clamp(12px, 1.6vw, 24px);
		margin-left: calc((100% - 11 * var(--g)) / 6 + 2 * var(--g));
	}
}