/* LITSLINK BLOCKS — Compare, 2 cards (custom vs off-the-shelf).
   Colors sampled 1:1 from Figma node 1976:2569. Block-scoped, class-based. */
.block-ll-compare-2col-cards {
	--c2c-font: var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	--c2c-bg: #f9fafb;
	--c2c-ink: #010005;
	--c2c-navy: #0d1b3e;
	--c2c-custom-bg: #f5fbff;
	--c2c-custom-row: #d1eaf8;
	--c2c-label-custom: #4a6fa5;
	--c2c-text-custom: #0c2a4a;
	--c2c-accent: #1690d3;
	--c2c-white: #fff;
	--c2c-stroke: #e5e7eb;
	--c2c-muted: #768297;
	background: var(--c2c-bg);
	padding: 70px 24px;
	font-family: var(--c2c-font);
	box-sizing: border-box;
}
.block-ll-compare-2col-cards *,
.block-ll-compare-2col-cards *::before,
.block-ll-compare-2col-cards *::after { box-sizing: border-box; }

.block-ll-compare-2col-cards__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

/* Header */
.block-ll-compare-2col-cards__head { text-align: center; max-width: 780px; }
.block-ll-compare-2col-cards__eyebrow {
	margin: 0 0 12px;
	font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
	text-transform: uppercase; color: var(--c2c-muted);
}
.block-ll-compare-2col-cards__title {
	margin: 0;
	font-size: 36px; line-height: 48px; font-weight: 600;
	letter-spacing: -1px; color: var(--c2c-ink);
}
.block-ll-compare-2col-cards__subtitle {
	margin: 15px 0 0;
	font-size: 16px; line-height: 27px; color: #374151;
}

/* Cards row */
.block-ll-compare-2col-cards__cards {
	display: flex;
	gap: 30px;
	align-items: stretch;
	width: 100%;
	justify-content: center;
}
.block-ll-compare-2col-cards__card {
	flex: 1 1 0;
	max-width: 560px;
	border-radius: 8px;
	overflow: hidden;
}
.block-ll-compare-2col-cards__card--custom { background: var(--c2c-custom-bg); }
.block-ll-compare-2col-cards__card--other  { background: var(--c2c-white); border: 1px solid var(--c2c-stroke); }

/* Card header */
.block-ll-compare-2col-cards__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px;
	border-bottom: 1px solid var(--c2c-stroke);
}
.block-ll-compare-2col-cards__card--custom .block-ll-compare-2col-cards__card-head {
	background: var(--c2c-navy);
}
.block-ll-compare-2col-cards__card-name {
	font-size: 16px; font-weight: 600; line-height: 24px;
}
.block-ll-compare-2col-cards__card--custom .block-ll-compare-2col-cards__card-name { color: var(--c2c-white); }
.block-ll-compare-2col-cards__card--other  .block-ll-compare-2col-cards__card-name { color: var(--c2c-muted); }

.block-ll-compare-2col-cards__badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 30px;
	white-space: nowrap;
	font-weight: 600;
}
.block-ll-compare-2col-cards__badge--rec {
	background: #f9fafb;
	border: 1px solid var(--c2c-accent);
	color: #374151;
	padding: 4px 12px;
	font-size: 12px; line-height: 20px;
}
.block-ll-compare-2col-cards__badge--gen {
	background: var(--c2c-stroke);
	color: var(--c2c-muted);
	padding: 3px 12px;
	font-size: 9px; line-height: 14px;
	letter-spacing: .72px; text-transform: uppercase;
}

/* Rows */
.block-ll-compare-2col-cards__row {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	padding: 24px;
}
.block-ll-compare-2col-cards__card--custom .block-ll-compare-2col-cards__row { border-bottom: 1px solid var(--c2c-custom-row); }
.block-ll-compare-2col-cards__card--other  .block-ll-compare-2col-cards__row { border-bottom: 1px solid var(--c2c-stroke); }
.block-ll-compare-2col-cards__row:last-child { border-bottom: 0; }

.block-ll-compare-2col-cards__label {
	flex: 0 0 140px;
	width: 140px;
	font-size: 12px; font-weight: 600; line-height: 16px;
	letter-spacing: 1.2px; text-transform: uppercase;
}
.block-ll-compare-2col-cards__card--custom .block-ll-compare-2col-cards__label { color: var(--c2c-label-custom); }
.block-ll-compare-2col-cards__card--other  .block-ll-compare-2col-cards__label { color: var(--c2c-muted); }

.block-ll-compare-2col-cards__val {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.block-ll-compare-2col-cards__check { flex-shrink: 0; margin-top: -1px; }
.block-ll-compare-2col-cards__dash {
	flex-shrink: 0;
	width: 20px;
	text-align: center;
	color: var(--c2c-muted);
	font-size: 14px; line-height: 18px;
}
.block-ll-compare-2col-cards__val-text {
	font-size: 14px; font-weight: 500; line-height: 18px;
}
.block-ll-compare-2col-cards__card--custom .block-ll-compare-2col-cards__val-text { color: var(--c2c-text-custom); }
.block-ll-compare-2col-cards__card--other  .block-ll-compare-2col-cards__val-text { color: var(--c2c-muted); }

/* Responsive */
@media (max-width: 900px) {
	.block-ll-compare-2col-cards__cards { flex-direction: column; align-items: center; }
	/* flex must reset to auto here: in a column flex the base `flex:1 1 0` (basis 0)
	   combined with the card's `overflow:hidden` (min-height:0) collapses each card
	   to 0 height. `flex:0 0 auto` sizes them to content. Default-safe: desktop row
	   layout keeps the equal-width `flex:1 1 0`. */
	.block-ll-compare-2col-cards__card { flex: 0 0 auto; width: 100%; max-width: 560px; }
}
@media (max-width: 560px) {
	.block-ll-compare-2col-cards { padding: 48px 16px; }
	.block-ll-compare-2col-cards__title { font-size: 28px; line-height: 36px; }
	.block-ll-compare-2col-cards__row { gap: 20px; padding: 18px; }
	.block-ll-compare-2col-cards__label { flex-basis: 110px; width: 110px; }
}