.diagnostic-price__body {
	display: grid;
	gap: var(--spacing-32);
	align-items: start;
}

.diagnostic-price__offer {
	min-width: 0;
	padding: clamp(var(--spacing-24), 3vw, var(--spacing-32));
	border-radius: var(--radius-lg);
	background: var(--surface-warm);
}

.diagnostic-price__offer h3 {
	margin: 0;
	color: var(--color-off-black);
	font-size: var(--font-size-xl);
	line-height: var(--line-height-heading);
}

.diagnostic-price__offer p + p {
	margin-top: var(--spacing-15);
}

.diagnostic-price__offer > p:not(.diagnostic-price__amount) {
	color: var(--color-gray);
	font-size: var(--font-size-base);
}

.diagnostic-price__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--spacing-10) var(--spacing-20);
	margin-block: var(--spacing-24);
}

.diagnostic-price__amount strong {
	color: var(--color-blue);
	font-size: clamp(var(--font-size-heading), calc(var(--font-size-xl) + 1.7vw), var(--font-size-display));
	line-height: var(--line-height-tight);
	white-space: nowrap;
}

.diagnostic-price__amount del {
	color: var(--color-gray);
	font-size: var(--font-size-lg);
	white-space: nowrap;
}

.diagnostic-price__offer button {
	width: 100%;
	margin-top: var(--spacing-24);
}

.diagnostic-price__list {
	min-width: 0;
	margin: 0;
	border-top: var(--frame-border);
}

.diagnostic-price__list > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: var(--spacing-15);
	padding-block: var(--spacing-20);
	border-bottom: var(--frame-border);
}

.diagnostic-price__list dt {
	color: var(--color-off-black);
	font-size: var(--font-size-base);
}

.diagnostic-price__list dd {
	margin: 0;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--color-blue);
	white-space: nowrap;
}

@media (min-width: 1000px) {
	.diagnostic-price__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: clamp(var(--spacing-32), 4vw, calc(var(--spacing-32) * 2));
	}
}
