/*
 * Cost calculator. Figma section/costcalculator 2196:48184 desktop: full-bleed
 * band 641 high, 84px top/bottom, 1220 column, 32px gaps (head / divider /
 * body). Two cards 564 wide, 92 apart: text column 334 + illustration 200
 * bottom-aligned, button/M under them (24 gap).
 * Mobile 2196:48185: 84px top/bottom, 20 gutters, everything left-aligned,
 * 24 gaps, cards stacked 42 apart, illustration 164 wide on top, full-width
 * buttons. Title header/L, card titles header/XS.
 * Stats band (section/highlight 1841:47267 / mobile 1839:45110): primary
 * purple, 84px top/bottom, the Highlights row in white with green icons.
 */

/* Figma shader "Cost Calculator Square Pattern": cells 29px rotated 45deg, 1px lines. */
.cost-calc__main {
	--cc-bg: #ede7fc;
	--cc-line: #e1d5ff;
	padding-block: 84px;
	background-color: var(--cc-bg);
	background-image:
		repeating-linear-gradient(45deg, var(--cc-line) 0 1px, transparent 1px 29px),
		repeating-linear-gradient(-45deg, var(--cc-line) 0 1px, transparent 1px 29px);
	overflow: hidden;
}

.cost-calc__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.cost-calc__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.cost-calc__head > .tag .icon { --icon-size: 12px; }

.cost-calc__intro {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cost-calc__title { font: var(--f-header-xl); color: var(--c-text-dark); }
.cost-calc__text { font: var(--f-body-xs); color: var(--c-text-dark); }

.cost-calc__divider {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--c-border-light);
}

.cost-calc__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cost-calc__subtitle { font: var(--f-header-m); color: var(--c-text-dark); }

.cost-calc__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 92px;
	align-items: end;
}

.cost-calc__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 24px;
	min-width: 0;
}

.cost-calc__card-top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	min-height: 172px;
}

.cost-calc__card-text {
	display: flex;
	flex: 0 1 334px;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.cost-calc__card-copy {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cost-calc__card-title { font: var(--f-header-s); color: var(--c-text-dark); }
.cost-calc__card-desc { font: var(--f-body-xs); color: var(--c-text-dark); }

.cost-calc__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cost-calc__art { flex: 0 0 200px; }
.cost-calc__img { width: 200px; height: auto; }

/* ---------- Stats band ---------- */
.cost-calc__band {
	padding-block: 84px;
	background: var(--c-primary);
}

.cost-calc__band .highlight__figure,
.cost-calc__band .highlight__title,
.cost-calc__band .highlight__text,
.cost-calc__band .textlink { color: var(--c-text-white); }

.cost-calc__band .highlight__text { font: var(--f-subtitle-m); }
.cost-calc__band .highlight { width: 225px; }

/* ---------- "Mobile only" (service group pages: desktop has the sidebar card) ---------- */
@media (min-width: 768px) {
	.cost-calc--mobile { display: none; }
}

/* ---------- Tablet: cards stack before they get cramped ---------- */
@media (max-width: 1100px) {
	.cost-calc__cards { grid-template-columns: minmax(0, 1fr); gap: 42px; }
	.cost-calc__card-top { min-height: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.cost-calc__inner { gap: 24px; }
	.cost-calc__title { font: var(--f-header-l); }

	.cost-calc__body { gap: 24px; }

	.cost-calc__card { gap: 16px; }

	.cost-calc__card-top {
		flex-direction: column-reverse;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 16px;
	}

	.cost-calc__card-text { flex: none; width: 100%; }
	.cost-calc__card-title { font: var(--f-header-xs); }

	.cost-calc__art { flex: none; }
	.cost-calc__img { width: 164px; }

	.cost-calc__btn { width: 100%; }

	.cost-calc__band { padding: 84px 12px; }
}