.dairy-material-comparison {
	height: 1138px;
	min-height: 0;
	padding: 110px max(40px, calc((100% - 1320px) / 2)) 82px;
	background: var(--siliteh-color-ghost-white);
	color: var(--siliteh-color-midnight-navy);
}

.dairy-material-comparison header {
	margin-bottom: 64px;
}

.dairy-material-comparison h2 {
	margin: 22px 0 18px;
	font-size: 58px;
	font-weight: 500;
	letter-spacing: -1.16px;
	line-height: 1.08;
}

.dairy-material-comparison header > p:last-child {
	max-width: 760px;
	margin: 0;
	font-size: 16px;
	line-height: 1.35;
}

.dairy-material-comparison__content {
	display: grid;
	grid-template-columns: minmax(0, 780px) minmax(0, 500px);
	gap: 40px;
	align-items: end;
}

.dairy-material-comparison__table {
	width: 100%;
	border-spacing: 0 12px;
}

.dairy-material-comparison__table thead th {
	padding: 0 20px 4px;
	color: var(--siliteh-color-midnight-navy);
	font-size: 13px;
	text-align: left;
	text-transform: uppercase;
}

.dairy-material-comparison__table tbody th,
.dairy-material-comparison__table tbody td {
	height: 88px;
	padding: 16px 10px;
	background: var(--siliteh-color-white);
}

.dairy-material-comparison__table tbody th {
	width: 42%;
	padding-left: 32px;
	border-radius: 16px 0 0 16px;
	font-size: 15px;
	text-align: left;
	text-transform: uppercase;
}

.dairy-material-comparison__table tbody td:last-child {
	border-radius: 0 16px 16px 0;
}

.dairy-material-comparison__pill {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 24px;
	border-radius: 999px;
	background: var(--siliteh-color-surface-soft);
	font-size: 15px;
	line-height: 1.2;
}

.dairy-material-comparison__pill--1 {
	font-weight: 600;
}

/* Figma 557:78824: the SILITEH value leads with a navy check badge. */
.dairy-material-comparison__pill--2 {
	gap: 12px;
	padding-left: 24px;
	background: var(--siliteh-color-surface-light-blue);
	color: var(--siliteh-color-midnight-navy);
	font-weight: 700;
}

.dairy-material-comparison__pill--2::before {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background: var(--siliteh-color-midnight-navy) url("../../assets/images/industry/siliteh-comparison-check.svg") no-repeat center / 24px 24px;
	content: "";
}

.dairy-material-comparison__image {
	width: 100%;
	height: 516px;
	border-radius: 24px;
	object-fit: cover;
}

.dairy-material-comparison__cta {
	display: flex;
	justify-content: center;
	margin-top: 64px;
}

.dairy-material-comparison__footnote {
	max-width: 720px;
	margin: 20px auto 0;
	color: var(--siliteh-color-midnight-navy);
	font-size: 13px;
	line-height: 1.35;
	text-align: center;
}

/* Figma 1280: the table takes the full width and the photograph follows it.
   The 1280 frame stretches that photograph to 1238px, a height no other width
   uses; the desktop 516px is kept (recorded in the manifest). */
@media (max-width: 1280px) {
	.dairy-material-comparison {
		height: auto;
		padding-block: 80px;
	}

	.dairy-material-comparison__content {
		grid-template-columns: 1fr;
	}
}

/* Figma 834/375: each row becomes a card with labelled values. */
@media (max-width: 1024px) {
	.dairy-material-comparison {
		padding: 60px 40px;
	}

	.dairy-material-comparison__content {
		gap: 32px;
	}

	.dairy-material-comparison header > p:last-child {
		max-width: 335px;
	}

	.dairy-material-comparison__table-wrap {
		overflow: visible;
	}

	.dairy-material-comparison__table {
		min-width: 0;
		border-spacing: 0;
	}

	.dairy-material-comparison__table thead {
		display: none;
	}

	.dairy-material-comparison__table tbody {
		display: grid;
		gap: 16px;
	}

	.dairy-material-comparison__table tbody tr {
		display: flex;
		min-height: 204px;
		flex-direction: column;
		gap: 8px;
		padding: 20px;
		border-radius: 16px;
		background: var(--siliteh-color-white);
	}

	.dairy-material-comparison__table tbody th,
	.dairy-material-comparison__table tbody td {
		display: flex;
		width: auto;
		height: auto;
		min-height: 0;
		padding: 0;
		background: transparent;
	}

	.dairy-material-comparison__table tbody th {
		border-radius: 0;
		font-size: 16px;
	}

	.dairy-material-comparison__table tbody td {
		flex-direction: column;
		gap: 8px;
	}

	.dairy-material-comparison__table tbody td::before {
		color: var(--siliteh-color-medium-gray);
		content: attr(data-column);
		font-size: 11px;
		font-weight: 800;
		line-height: 1.2;
		text-align: center;
		text-transform: uppercase;
	}

	.dairy-material-comparison__table tbody td:last-child::before {
		color: var(--siliteh-color-midnight-navy);
	}

	.dairy-material-comparison__pill {
		width: 100%;
		min-height: 40px;
	}

	.dairy-material-comparison__image {
		height: 346px;
	}

	.dairy-material-comparison__cta {
		margin-top: 64px;
	}

	.dairy-material-comparison__cta .technical-inquiry {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 560px) {
	.dairy-material-comparison {
		padding: 60px 20px;
	}

	.dairy-material-comparison h2 {
		font-size: 32px;
		letter-spacing: -0.64px;
	}
}