/* page-compare: styles for /compare/* hub and spoke pages */

.mm-case-hero .mm-hero-h1 {
	max-width: 22ch;
}


/* ============================================================
   Stat card color-twinkle stagger.
   The mm-stat-card component uses :nth-of-type which resets inside
   each .col-md-4 wrapper, syncing all three cards. Overriding by
   column index so each card cycles independently on the same 6s wheel.
   ============================================================ */

.mm-case-hero .row > .col-md-4:nth-of-type(1) .mm-stat-card,
.mm-case-hero .row > .col-md-4:nth-of-type(1) .mm-stat-card .mm-stat-num {
	animation-delay: 0s;
}
.mm-case-hero .row > .col-md-4:nth-of-type(2) .mm-stat-card,
.mm-case-hero .row > .col-md-4:nth-of-type(2) .mm-stat-card .mm-stat-num {
	animation-delay: -2s;
}
.mm-case-hero .row > .col-md-4:nth-of-type(3) .mm-stat-card,
.mm-case-hero .row > .col-md-4:nth-of-type(3) .mm-stat-card .mm-stat-num {
	animation-delay: -4s;
}




/* ============================================================
   Equal-height flex rows for problem cards + spoke tiles.
   Bootstrap 3's default row is float-based which breaks height
   matching. .mm-compare-row makes each row a flex container so
   the two cards inside stretch to the tallest card.
   ============================================================ */

.mm-compare-row {
	display: flex;
	flex-wrap: wrap;
}

.mm-compare-row > [class*="col-"] {
	display: flex;
}

.mm-compare-row > [class*="col-"] > .mm-compare-problem,
.mm-compare-row > [class*="col-"] > .mm-compare-spoke {
	width: 100%;
}


/* Collapse to single-column stack on tablet + mobile. */
@media (max-width: 767px) {
	.mm-compare-row {
		flex-direction: column;
	}
	.mm-compare-row > [class*="col-"] {
		display: block;
	}
}


/* ============================================================
   Problem cards (4-per-section grid)
   ============================================================ */

.mm-compare-problem {
	padding: 32px 32px 28px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 45%, rgba(0, 0, 0, 0.25) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	height: 100%;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.mm-compare-problem:hover {
	border-color: rgba(0, 180, 255, 0.35);
	transform: translateY(-2px);
}

.mm-compare-problem-num {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var(--mm-accent, #00B4FF);
	margin-bottom: 14px;
}

.mm-compare-problem-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0 0 14px;
}

.mm-compare-problem-body {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
}


/* ============================================================
   Spoke link cards (hub → competitor comparisons)
   ============================================================ */

a.mm-compare-spoke {
	display: block;
	padding: 32px 32px 28px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 45%, rgba(0, 0, 0, 0.25) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
	height: 100%;
}

a.mm-compare-spoke:hover {
	border-color: rgba(0, 180, 255, 0.4);
	transform: translateY(-2px);
	text-decoration: none;
	color: inherit;
	background: linear-gradient(135deg, rgba(0, 180, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.25) 100%);
}

.mm-compare-spoke-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mm-accent, #00B4FF);
	margin-bottom: 12px;
}

.mm-compare-spoke-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0 0 14px;
}

.mm-compare-spoke-body {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 18px;
}

.mm-compare-spoke-cta {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mm-accent, #00B4FF);
}

/* Placeholder tile: not yet a live comparison page. Dims the whole tile
   and disables the hover lift so it reads as "coming soon". */
.mm-compare-spoke-soon {
	opacity: 0.55;
	cursor: default;
	pointer-events: none;
}

.mm-compare-spoke-soon .mm-compare-spoke-cta {
	color: rgba(255, 255, 255, 0.45);
}


/* ============================================================
   Side-by-side comparison table
   ============================================================ */

.mm-compare-table-wrap {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.mm-compare-table {
	width: 100%;
	border-collapse: collapse;
	background: rgba(0, 0, 0, 0.15);
}

.mm-compare-table th,
.mm-compare-table td {
	padding: 16px 20px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mm-compare-table thead th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.04);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mm-compare-th-them {
	color: rgba(255, 120, 120, 0.9) !important;
}

.mm-compare-th-us {
	color: rgba(120, 220, 160, 0.95) !important;
}

.mm-compare-table td {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
}

.mm-compare-feature {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 700;
	width: 26%;
}

.mm-compare-them {
	color: rgba(255, 255, 255, 0.6);
	width: 37%;
}

.mm-compare-us {
	color: rgba(255, 255, 255, 0.9);
	width: 37%;
	background: rgba(0, 180, 255, 0.04);
}

.mm-compare-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.02);
}


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 991px) {
	.mm-compare-problem,
	a.mm-compare-spoke {
		padding: 26px 24px 24px;
	}
	.mm-compare-table th,
	.mm-compare-table td {
		padding: 14px 14px;
		font-size: 14px;
	}
}

@media (max-width: 575px) {
	.mm-compare-table thead {
		display: none;
	}
	.mm-compare-table,
	.mm-compare-table tbody,
	.mm-compare-table tr,
	.mm-compare-table td {
		display: block;
		width: 100%;
	}
	.mm-compare-table tr {
		margin-bottom: 20px;
		border: 1px solid rgba(255, 255, 255, 0.08);
	}
	.mm-compare-table td {
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	}
	.mm-compare-feature {
		background: rgba(255, 255, 255, 0.04);
		text-transform: uppercase;
		letter-spacing: 0.12em;
		font-size: 12px;
	}
	.mm-compare-them::before {
		content: 'OnlyFans: ';
		color: rgba(255, 120, 120, 0.9);
		font-weight: 700;
		text-transform: uppercase;
		font-size: 11px;
		letter-spacing: 0.14em;
		display: block;
		margin-bottom: 4px;
	}
	.mm-compare-us::before {
		content: 'Middle Mann Self-Hosted: ';
		color: rgba(120, 220, 160, 0.95);
		font-weight: 700;
		text-transform: uppercase;
		font-size: 11px;
		letter-spacing: 0.14em;
		display: block;
		margin-bottom: 4px;
	}
}