/* ============================================================
   Compare-page-specific blocks (FluentCart-/SureCart-style flow)
   ============================================================ */

/* ---------- Compare-page narrow stack — consistent prose width.
   Compose with `dt-container` (kept as the outer container token across
   every section for consistent grid alignment) plus this modifier to pull
   prose content into a 720px reading column. */

.dt-compare-narrow {
	max-width: 720px;
	margin-inline: auto;
}

/* ---------- Hero — small violet eyebrow + huge H1 + single CTA ---------- */

.dt-compare-hero {
	padding-block: clamp(var(--space-16), 9vw, var(--space-24));
}

.dt-compare-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
	text-align: center;
	max-width: 920px;
	margin-inline: auto;
}

.dt-compare-hero__eyebrow {
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-snug);
	color: color-mix(in srgb, var(--dt-primary) 65%, var(--dt-on-primary));
}

.dt-compare-hero__heading {
	margin: 0;
	font-size: var(--fs-display);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--dt-on-dark);
	max-width: 18ch;
}

.dt-compare-hero__actions {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

@media (max-width: 768px) {
	.dt-compare-hero__heading { max-width: none; }
}

/* ---------- "The real difference" — at-a-glance two-column ---------- */

.dt-compare-glance {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
}

.dt-compare-glance__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-8);
	background: var(--dt-surface);
	border: 1px solid var(--dt-border);
	border-radius: var(--radius-lg);
}

.dt-compare-glance__col--dt {
	background: var(--dt-primary-soft);
	border-color: color-mix(in srgb, var(--dt-primary) 22%, transparent);
}

.dt-compare-glance__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid color-mix(in srgb, var(--dt-ink) 8%, transparent);
}

.dt-compare-glance__col--dt .dt-compare-glance__head {
	border-bottom-color: color-mix(in srgb, var(--dt-primary) 22%, transparent);
}

.dt-compare-glance__name {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-snug);
	color: var(--dt-ink);
}

.dt-compare-glance__col--dt .dt-compare-glance__name { color: var(--dt-primary); }

.dt-compare-glance__tag {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--space-2);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	border-radius: var(--radius-pill);
	background: var(--dt-primary);
	color: var(--dt-on-primary);
}

.dt-compare-glance__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.dt-compare-glance__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--dt-ink);
}

.dt-compare-glance__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: var(--radius-pill);
	flex-shrink: 0;
	margin-top: 2px;
}

.dt-compare-glance__icon svg { width: 14px; height: 14px; }

.dt-compare-glance__icon--check {
	background: var(--dt-primary);
	color: var(--dt-on-primary);
}

.dt-compare-glance__icon--neutral {
	background: var(--dt-bg-alt);
	color: var(--dt-ink-faint);
}

@media (max-width: 768px) {
	.dt-compare-glance { grid-template-columns: 1fr; }
	.dt-compare-glance__col { padding: var(--space-7); }
}

/* ---------- "What sets us apart" — prose subsections ---------- */

.dt-compare-apart {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.dt-compare-apart__block {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-bottom: var(--space-8);
	border-bottom: 1px solid var(--dt-border);
}

.dt-compare-apart__block:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.dt-compare-apart__title {
	margin: 0;
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
	color: var(--dt-ink);
}

.dt-compare-apart__body {
	margin: 0;
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--dt-ink-soft);
}

/* ---------- Priority support callout — single quiet paragraph ---------- */

.dt-compare-priority {
	margin: 0;
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--dt-ink-soft);
	max-width: 56ch;
	margin-inline: auto;
}

.dt-compare-priority__lead {
	display: block;
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	color: var(--dt-ink);
	letter-spacing: var(--ls-snug);
	margin-bottom: var(--space-2);
}

/* ---------- Money-back guarantee block ---------- */

.dt-compare-guarantee {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-10) var(--space-8);
	background: var(--dt-surface);
	border: 1px solid var(--dt-border);
	border-radius: var(--radius-lg);
	text-align: center;
}

.dt-compare-guarantee__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--dt-success) 12%, transparent);
	color: var(--dt-success);
}

.dt-compare-guarantee__heading {
	margin: 0;
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
	color: var(--dt-ink);
	max-width: 32ch;
}

.dt-compare-guarantee__body {
	margin: 0;
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--dt-ink-soft);
	max-width: 56ch;
}

.dt-compare-guarantee__body strong { color: var(--dt-ink); }

/* ---------- Audience segmentation — Who picks DT / Who picks rival ---------- */

.dt-compare-audience {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
}

.dt-compare-audience__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-8);
	background: var(--dt-surface);
	border: 1px solid var(--dt-border);
	border-radius: var(--radius-lg);
}

.dt-compare-audience__col--dt {
	background: var(--dt-primary-soft);
	border-color: color-mix(in srgb, var(--dt-primary) 22%, transparent);
}

.dt-compare-audience__title {
	margin: 0;
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
	color: var(--dt-ink);
}

.dt-compare-audience__col--dt .dt-compare-audience__title { color: var(--dt-primary); }

.dt-compare-audience__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.dt-compare-audience__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--dt-ink);
}

.dt-compare-audience__bullet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--dt-success) 14%, transparent);
	color: var(--dt-success);
	flex-shrink: 0;
	margin-top: 2px;
}

.dt-compare-audience__col--dt .dt-compare-audience__bullet {
	background: var(--dt-primary);
	color: var(--dt-on-primary);
}

@media (max-width: 768px) {
	.dt-compare-audience { grid-template-columns: 1fr; }
	.dt-compare-audience__col { padding: var(--space-7); }
}

/* ---------- (legacy migration steps — kept in case any other page uses it) ---------- */

.dt-compare-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: dt-compare-step;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.dt-compare-steps__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
	background: var(--dt-surface);
	border: 1px solid var(--dt-border);
	border-radius: var(--radius-md);
}

.dt-compare-steps__num {
	font-family: var(--ff-display, var(--ff-sans));
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	line-height: 1;
	color: var(--dt-primary);
	font-feature-settings: "tnum";
	flex-shrink: 0;
}

.dt-compare-steps__text {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--dt-ink);
	padding-top: 4px;
}

/* ============================================================
   Comparison table — 4-column grid:
   [feature label] · [Divi Torque] · [rival] · [DiviPeople Once]
   The Divi Torque column gets the primary accent (winner). The Once column
   gets the dark "premium bundle" treatment. */

.dt-compare {
	--dt-compare-cols: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.3fr);

	display: flex;
	flex-direction: column;
	background: var(--dt-surface);
	border: 1px solid var(--dt-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 8px 24px rgba(0, 0, 0, 0.04);
}

/* ---------- Header ---------- */

.dt-compare__head {
	display: grid;
	grid-template-columns: var(--dt-compare-cols);
	border-bottom: 1px solid var(--dt-border);
}

.dt-compare__head-cell {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	align-items: center;
	justify-content: center;
	padding: var(--space-6) var(--space-4);
	text-align: center;
}

.dt-compare__head-cell--feature {
	align-items: flex-start;
	justify-content: center;
	text-align: left;
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--dt-ink-soft);
	background: var(--dt-bg-alt);
}

/* Winner + Once head cells use subtle tints — not loud solid color, so the
   table corners stay smooth. */
.dt-compare__head-cell--dt {
	background: var(--dt-primary-soft);
	color: var(--dt-primary);
}

.dt-compare__head-cell--once {
	background: color-mix(in srgb, var(--dt-ink) 6%, var(--dt-bg-alt));
	color: var(--dt-ink);
}

.dt-compare__head-name {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-snug);
}

.dt-compare__head-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--space-2);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	border-radius: var(--radius-pill);
	background: var(--dt-primary);
	color: var(--dt-on-primary);
}

.dt-compare__head-tag--once {
	background: color-mix(in srgb, var(--dt-ink) 14%, transparent);
	color: var(--dt-ink);
}

/* ---------- Section sub-header (groups rows by category) ---------- */

.dt-compare__section {
	padding: var(--space-3) var(--space-5);
	background: var(--dt-bg-alt);
	border-top: 1px solid var(--dt-border);
	border-bottom: 1px solid var(--dt-border);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--dt-ink-soft);
}

/* ---------- Body rows ---------- */

.dt-compare__row {
	display: grid;
	grid-template-columns: var(--dt-compare-cols);
	border-top: 1px solid var(--dt-border);
}

.dt-compare__row:first-of-type { border-top: 0; }

.dt-compare__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: var(--space-4) var(--space-4);
	text-align: center;
	min-height: 64px;
}

.dt-compare__cell--feature {
	align-items: flex-start;
	text-align: left;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--dt-ink);
	background: var(--dt-bg-alt);
}

.dt-compare__cell--dt {
	background: color-mix(in srgb, var(--dt-primary) 5%, transparent);
}

.dt-compare__cell--once {
	background: color-mix(in srgb, var(--dt-ink) 3%, transparent);
}

/* ---------- Cell value primitives ---------- */

.dt-compare__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--dt-success) 14%, transparent);
	color: var(--dt-success);
}

.dt-compare__check svg { width: 16px; height: 16px; }

.dt-compare__cross {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-pill);
	background: var(--dt-bg-alt);
	color: var(--dt-ink-faint);
}

.dt-compare__cross svg { width: 14px; height: 14px; }

.dt-compare__cell--dt .dt-compare__check {
	background: color-mix(in srgb, var(--dt-primary) 18%, transparent);
	color: var(--dt-primary);
}

.dt-compare__text {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--dt-ink);
	line-height: var(--lh-snug);
}

.dt-compare__cell--dt .dt-compare__text { color: var(--dt-primary); }

.dt-compare__note {
	font-size: var(--fs-xs);
	color: var(--dt-ink-soft);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
}

/* ---------- Footer (CTAs) ---------- */

.dt-compare__foot {
	display: grid;
	grid-template-columns: var(--dt-compare-cols);
	border-top: 1px solid var(--dt-border);
	background: var(--dt-bg-alt);
}

.dt-compare__foot-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-5) var(--space-4);
}

.dt-compare__foot-cell--feature { background: var(--dt-bg-alt); }

.dt-compare__foot-cell--dt {
	background: color-mix(in srgb, var(--dt-primary) 5%, transparent);
}

.dt-compare__foot-cell--once {
	background: color-mix(in srgb, var(--dt-ink) 3%, transparent);
}

.dt-compare__rival-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--dt-ink-soft);
	text-decoration: none;
}

.dt-compare__rival-link:hover { color: var(--dt-ink); text-decoration: none; }

/* ---------- Responsive ----------
   Below 768px the table becomes a vertical stack: each row turns into a card
   with the 4 columns labelled inline. Hides the column header row. */

@media (max-width: 768px) {
	.dt-compare {
		--dt-compare-cols: minmax(0, 1fr) minmax(0, 1fr);
		border-radius: var(--radius-lg);
	}

	.dt-compare__head {
		display: grid;
		grid-template-columns: 1fr;
	}

	.dt-compare__head-cell { border-right: 0; padding: var(--space-4); }
	.dt-compare__head-cell--feature { display: none; }

	.dt-compare__row {
		display: block;
		padding: var(--space-3) var(--space-4);
	}

	.dt-compare__cell {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left;
		border-right: 0;
		min-height: 0;
		padding: var(--space-2) 0;
		background: transparent !important;
	}

	.dt-compare__cell--feature {
		font-size: var(--fs-md);
		font-weight: var(--fw-bold);
		padding-bottom: var(--space-2);
		margin-bottom: var(--space-2);
		border-bottom: 1px solid var(--dt-border);
	}

	/* Add label prefix on mobile so the stacked values are clear */
	.dt-compare__cell--dt::before { content: "Divi Torque"; font-size: var(--fs-xs); color: var(--dt-ink-soft); }
	.dt-compare__cell:not(.dt-compare__cell--feature):not(.dt-compare__cell--dt)::before { content: "Rival"; font-size: var(--fs-xs); color: var(--dt-ink-soft); }

	.dt-compare__foot {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding: var(--space-5);
	}

	.dt-compare__foot-cell {
		border-right: 0;
		padding: 0;
		background: transparent !important;
	}

	.dt-compare__foot-cell--feature { display: none; }
}