/* Download.chat — "Alternatives to X" landing.
   Reuses .dc-compare__* (table), .dc-faq__* and .dc-section__title from download.css. */

.dc-altpage { max-width: 900px; margin: 0 auto; }

.dc-altpage__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--dc-muted); font-size: .82rem; margin-bottom: 18px; }
.dc-altpage__crumbs a { color: var(--dc-muted); }
.dc-altpage__crumbs a:hover { color: var(--dc-lavender); }

.dc-altpage__head { margin-bottom: 28px; }
.dc-altpage__title { font-size: clamp(1.7rem, 3.6vw, 2.3rem); margin: 0 0 12px; line-height: 1.2; }
.dc-altpage__intro { color: var(--dc-muted); line-height: 1.65; margin: 0 0 10px; max-width: 70ch; }
.dc-altpage__updated { color: var(--dc-muted); font-size: .8rem; margin: 0; }

/* Ranked list */
.dc-altpage__list { list-style: none; margin: 0 0 44px; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: alt; }

.dc-altl {
	display: grid;
	grid-template-columns: auto 48px 1fr auto;
	align-items: center; gap: 14px;
	background: linear-gradient(160deg, rgba(42, 19, 100, .3), rgba(18, 10, 36, .55));
	border: 1px solid var(--dc-border); border-radius: var(--dc-radius-lg);
	padding: 16px 18px;
	transition: border-color .15s ease, transform .15s ease;
}
.dc-altl:hover { border-color: var(--dc-lavender); transform: translateY(-1px); }

.dc-altl__rank {
	flex: 0 0 auto; min-width: 26px;
	font-size: 1.05rem; font-weight: 700; color: var(--dc-lavender); text-align: center;
}
.dc-altl__icon {
	width: 48px; height: 48px; border-radius: 12px; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	background: var(--dc-surface); color: var(--dc-lavender);
	font-weight: 700; font-size: 1.1rem;
}
.dc-altl__icon img, .dc-altl__icon svg { width: 30px; height: 30px; object-fit: contain; }

.dc-altl__body { min-width: 0; }
.dc-altl__title { font-size: 1.05rem; margin: 0 0 2px; }
.dc-altl__title a { color: var(--dc-text); }
.dc-altl__title a:hover { color: var(--dc-lavender); text-decoration: none; }
.dc-altl__vendor { color: var(--dc-muted); font-size: .78rem; margin: 0 0 6px; }
.dc-altl__desc { color: var(--dc-muted); font-size: .88rem; line-height: 1.55; margin: 0 0 8px; }

.dc-altl__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.dc-altl__fact {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 9px; border-radius: 999px;
	border: 1px solid var(--dc-border); background: var(--dc-surface);
	color: var(--dc-muted); font-size: .74rem; line-height: 1.5;
}
.dc-altl__fact--ver { color: var(--dc-text); }
.dc-altl__rel { color: var(--dc-muted); }
.dc-altl__fact--rating { color: #ffc65c; }
.dc-altl__fact--ok { color: #7ee2a8; border-color: rgba(126, 226, 168, .3); }
.dc-altl__fact--warn { color: #ffc65c; border-color: rgba(255, 198, 92, .3); }

.dc-altl__cta { flex: 0 0 auto; white-space: nowrap; }

/* Comparison + FAQ blocks reuse existing styles; just space them out. */
.dc-altpage__cmp, .dc-altpage__faq { margin-top: 40px; }
.dc-altpage__back { margin-top: 34px; }
.dc-altpage__back a { color: var(--dc-lavender); }

@media (max-width: 720px) {
	.dc-altl { grid-template-columns: auto 40px 1fr; row-gap: 12px; padding: 14px; }
	.dc-altl__icon { width: 40px; height: 40px; }
	.dc-altl__cta { grid-column: 1 / -1; width: 100%; text-align: center; }
}