/* ==========================================================================
   compare.css — "What you're getting with AdAcorn" comparison (Figma-matched)
   ========================================================================== */

.ada-compare {
	background: var(--ada-bg);
	padding: clamp( 24px, 3vw, 38px ) clamp( 16px, 8vw, 120px );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
}

.ada-compare__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	max-width: 706px;
}

.ada-compare__title {
	margin: 0;
	max-width: 520px;
	font-family: var(--ada-font-display);
	font-weight: 550;
	font-size: clamp( 30px, 4.4vw, 48px );
	line-height: 1.19;
	color: var(--ada-hero-title);
	text-wrap: balance;
}

.ada-compare__title .ada-grad {
	background: linear-gradient( 90deg, var(--ada-announce-from) 0%, var(--ada-announce-to) 60% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ada-compare__sub {
	margin: 0;
	font-family: var(--ada-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ada-footer-ink);
}

/* ---- Two cards ---------------------------------------------------------- */
.ada-compare__cards {
	display: flex;
	justify-content: center;
	gap: 24px;
	width: 100%;
	max-width: 1200px;
}

.ada-ccard {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding: 36px 16px 16px;
	border-radius: 32px;
}

.ada-ccard--manual { background: var(--ada-card-bg); }
.ada-ccard--acorn {
	background: linear-gradient( 90deg, #16a9ff 0%, #4fdf82 50% );
	box-shadow: 0 24px 54px 31px rgba( 79, 223, 130, 0.2 );
}

.ada-ccard__head { display: flex; flex-direction: column; gap: 24px; padding-inline: 4px; }

.ada-ccard__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 10px;
	background: var(--ada-panel);
	border-radius: 14px;
	box-shadow: var(--ada-panel-shadow);
}
.ada-ccard__icon svg,
.ada-ccard__icon img { display: block; width: 28px; height: 28px; }

.ada-ccard__title {
	margin: 0;
	font-family: var(--ada-font);
	font-weight: 700;
	font-size: 28px;
	line-height: 34px;
	letter-spacing: -0.006em;
	color: var(--ada-hero-title);
}

.ada-ccard__lead {
	margin: 0;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.011em;
	color: var(--ada-footer-ink);
}

.ada-ccard--acorn .ada-ccard__title,
.ada-ccard--acorn .ada-ccard__lead { color: #ffffff; }

/* ---- Item panel --------------------------------------------------------- */
.ada-ccard__panel {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	padding: 16px;
	background: var(--ada-panel);
	border-radius: 20px;
	box-shadow: var(--ada-panel-shadow);
}

.ada-citem {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: -0.006em;
	color: var(--ada-footer-ink);
}

.ada-citem__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; }

.ada-citem__mark--x {
	width: 20px;
	height: 20px;
	border-radius: 24px;
	background: rgba( 252, 165, 165, 0.16 );
}
.ada-citem__mark--x svg { width: 12px; height: 12px; }
.ada-citem__mark--check svg { width: 20px; height: 20px; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 820px) {
	.ada-compare__cards { flex-direction: column; }
	.ada-ccard { max-width: 588px; margin-inline: auto; width: 100%; }
}