/**
 * Comparison — loose vendor chips vs. one navy United One card.
 * Typography via utilities; layout/card/chip styling here.
 */

.flexible-section.comparison {
	background: var(--color-bg2);
	padding-inline: var(--section-pad-x);
}

.comparison-head {
	text-align: center;
	max-width: 850px;
	margin: 0 auto clamp(32px, 2.4vw + 18px, 46px);
}

.comparison-head .section-ti {
	margin-block-end: clamp(8px, 0.4vw + 6px, 12px);
}

.comparison-head p { margin: 0; }

.comparison-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: clamp(24px, 1.6vw + 14px, 36px);
	align-items: center;
	max-width: 1250px;
	margin: 0 auto;
}

.comparison-lbl {
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 16px;
	text-align: center;
}

.comparison-sprawl {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	justify-content: center;
}

.comparison-vendor {
	background: var(--color-bg);
	border: 1px dashed var(--color-border);
	border-radius: 3px;
	padding: 8px 13px;
}

.comparison-note {
	margin-top: 18px;
	text-align: center;
	letter-spacing: 0.02em;
}

.comparison-arrow {
	font-size: clamp(24px, 1.2vw + 18px, 30px);
	color: var(--color-gold2);
	font-weight: var(--fw-700);
	text-align: center;
}

.comparison-one {
	background: var(--gradient-navy);
	border: 1px solid rgba(196, 154, 26, 0.4);
	padding: clamp(24px, 1.4vw + 17px, 37.5px) clamp(20px, 1vw + 15px, 32.5px);
	text-align: center;
}

.comparison-mark { margin-bottom: 6px; }
.comparison-mark em { font-style: normal; color: var(--color-gold2); }

.comparison-one-sub { color: rgba(255, 255, 255, 0.5); }

.comparison-one-note {
	margin-top: 18px;
	text-align: center;
	letter-spacing: 0.02em;
}

@media (max-width: 780px) {
	.comparison-grid { grid-template-columns: 1fr; gap: 24px; }
	.comparison-arrow { transform: rotate(90deg); }
}