.rainx-profile-grid{
	display:grid;
	gap:clamp(44px,6vw,72px);
}

.rainx-profile-card{
	position:relative;
	width:min(100%,1080px);
	margin:0 auto;
	overflow:visible;
	background:
		radial-gradient(ellipse 72% 52% at 50% 0%,rgba(78,65,170,.2),transparent 68%),
		linear-gradient(180deg,rgba(16,11,52,.94),rgba(6,5,26,.98));
	border:1px solid rgba(167,139,250,.34);
	box-shadow:0 28px 70px rgba(0,0,0,.5),0 0 42px rgba(80,64,170,.16);
}

.rainx-profile-card::before{
	content:'';
	position:absolute;
	inset:0 0 auto;
	height:2px;
	background:linear-gradient(90deg,transparent,rgba(167,139,250,.52) 28%,rgba(245,196,73,.72) 50%,rgba(167,139,250,.52) 72%,transparent);
	pointer-events:none;
}

.rainx-compare{
	position:relative;
	width:100%;
	aspect-ratio:16/9;
	overflow:hidden;
	isolation:isolate;
	touch-action:pan-y pinch-zoom;
	user-select:none;
	cursor:ew-resize;
	background:#090625;
	border-bottom:1px solid rgba(216,200,255,.16);
}

.rainx-compare-layer{
	position:absolute;
	inset:0;
	display:flex;
	align-items:flex-end;
	gap:16px;
	padding:24px 28px;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

.rainx-compare-layer::before{
	content:'';
	position:absolute;
	inset:0;
	background:
		linear-gradient(180deg,rgba(5,4,18,.08) 0%,transparent 42%,rgba(5,4,18,.46) 100%),
		linear-gradient(90deg,rgba(5,4,18,.18),transparent 22%,transparent 78%,rgba(5,4,18,.16));
	pointer-events:none;
}

.rainx-compare-before{
	z-index:1;
	justify-content:flex-end;
	background:
		radial-gradient(ellipse 60% 80% at 30% 50%,rgba(60,50,200,.32) 0%,transparent 60%),
		linear-gradient(135deg,#0b0828 0%,#181246 50%,#211968 100%);
}

.rainx-compare-after{
	z-index:2;
	justify-content:flex-start;
	clip-path:inset(0 calc(100% - var(--mxp-split,50%)) 0 0);
	background:
		radial-gradient(ellipse 60% 80% at 35% 50%,rgba(245,196,73,.16) 0%,transparent 55%),
		radial-gradient(ellipse 45% 65% at 72% 35%,rgba(167,139,250,.28) 0%,transparent 56%),
		linear-gradient(135deg,#120d34 0%,#211968 48%,#33259a 100%);
}

.rainx-compare-layer.is-placeholder{
	background-image:linear-gradient(135deg,rgba(18,13,52,.96),rgba(6,5,26,.98))!important;
}

.rainx-compare-label,
.rainx-compare-placeholder{
	position:relative;
	z-index:3;
	font-family:var(--font-display);
	font-size:11px;
	letter-spacing:4px;
	text-transform:uppercase;
	color:rgba(255,255,255,.88);
	text-shadow:0 2px 14px rgba(0,0,0,.72);
}

.rainx-compare-label-before{
	margin-left:auto;
	text-align:right;
	color:rgba(216,224,238,.82);
}

.rainx-compare-label-after{
	margin-right:auto;
	text-align:left;
	color:var(--gold);
}

.rainx-compare-placeholder{
	margin-left:auto;
	color:rgba(216,224,238,.62);
	font-family:var(--font-body);
	font-size:10px;
	letter-spacing:2.5px;
}

.rainx-compare-divider{
	position:absolute;
	z-index:4;
	top:0;
	bottom:0;
	left:var(--mxp-split,50%);
	width:1px;
	background:linear-gradient(180deg,transparent,rgba(245,196,73,.8) 18%,rgba(245,196,73,.76) 82%,transparent);
	box-shadow:0 0 18px rgba(99,220,255,.18),0 0 22px rgba(245,196,73,.34);
	pointer-events:none;
}

.rainx-compare-divider span{
	position:absolute;
	top:50%;
	left:50%;
	width:48px;
	height:48px;
	transform:translate(-50%,-50%);
	border:1px solid rgba(245,196,73,.78);
	background:rgba(6,5,26,.74);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	box-shadow:0 10px 24px rgba(0,0,0,.42),0 0 20px rgba(245,196,73,.2);
}

.rainx-compare-divider span::before,
.rainx-compare-divider span::after{
	content:'';
	position:absolute;
	top:50%;
	width:8px;
	height:8px;
	border-top:1px solid var(--gold);
	border-left:1px solid var(--gold);
}

.rainx-compare-divider span::before{
	left:12px;
	transform:translateY(-50%) rotate(-45deg);
}

.rainx-compare-divider span::after{
	right:12px;
	transform:translateY(-50%) rotate(135deg);
}

.rainx-compare-range{
	position:absolute;
	z-index:5;
	inset:0;
	width:100%;
	height:100%;
	opacity:0;
	cursor:ew-resize;
	touch-action:pan-y pinch-zoom;
	pointer-events:none;
}

.rainx-compare.is-dragging{
	cursor:grabbing;
}

.rainx-compare.is-dragging .rainx-compare-divider span{
	transform:translate(-50%,-50%) scale(1.04);
	box-shadow:0 12px 30px rgba(0,0,0,.46),0 0 28px rgba(245,196,73,.3);
}

.rainx-compare-range:focus-visible+.rainx-compare-divider span,
.rainx-compare:focus-within .rainx-compare-divider span{
	outline:2px solid rgba(245,196,73,.82);
	outline-offset:4px;
}

.rainx-compare-hint{
	margin:0;
	padding:10px clamp(20px,3.4vw,42px);
	border-bottom:1px solid rgba(216,200,255,.11);
	background:linear-gradient(90deg,rgba(6,5,26,.56),rgba(16,11,52,.72),rgba(6,5,26,.56));
	color:rgba(216,224,238,.56);
	font:500 10.5px/1.5 var(--font-body);
	letter-spacing:.05em;
}

.rainx-profile-eyebrow{
	font-family:var(--font-body);
	font-size:10px;
	font-weight:700;
	letter-spacing:4px;
	text-transform:uppercase;
	color:var(--gold);
	margin-bottom:10px;
}

.rainx-compare-wordmark{
	display:inline-flex;
	align-items:baseline;
	gap:.08em;
	color:var(--white);
	letter-spacing:inherit;
	line-height:1;
}

.rainx-compare-wordmark-rain{
	color:var(--white);
}

.rainx-compare-wordmark-x{
	color:var(--gold);
	text-shadow:0 0 14px rgba(245,196,73,.34),0 2px 14px rgba(0,0,0,.7);
}

@media(max-width:720px){
	.rainx-profile-card{
		width:min(100%,calc(100vw - 28px));
	}

	.rainx-compare-layer{
		padding:18px;
	}

	.rainx-compare-label{
		font-size:10px;
		letter-spacing:3px;
	}

	.rainx-compare-placeholder{
		display:none;
	}

	.rainx-compare-divider span{
		width:52px;
		height:52px;
	}

	.rainx-compare-hint{
		padding-inline:18px;
		font-size:10px;
	}

	.rainx-profile-grid{
		gap:40px;
	}
}

@media(prefers-reduced-motion:reduce){
	.rainx-compare-after,
	.rainx-compare-divider,
	.rainx-compare-divider span{
		transition:none!important;
	}
}