/*
 * LifeSpring Referral System — "Refer a Friend" section.
 * Reuses the host theme's design tokens (--ls-* custom properties) when
 * available, with sensible fallback values so the section still looks
 * intentional if the LifeSpring theme isn't the active theme.
 */
.lsrs-refer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.lsrs-refer__photo {
	border-radius: var(--ls-radius, 18px);
	overflow: hidden;
	box-shadow: var(--ls-shadow-soft, 0 18px 55px rgba(7, 26, 56, .1));
	line-height: 0;
}

.lsrs-refer__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lsrs-refer__copy h2 {
	font-family: var(--ls-display, Georgia, serif);
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	line-height: 1.1;
	letter-spacing: -.03em;
	margin: .25rem 0 1rem;
	color: var(--ls-primary, #0b2c56);
}

.lsrs-refer__copy p {
	color: var(--ls-muted, #5c6b7a);
	font-size: 1.02rem;
	max-width: 560px;
	margin: 0 0 1.4rem;
}

.lsrs-refer__points {
	list-style: none;
	margin: 0 0 1.8rem;
	padding: 0;
	display: grid;
	gap: .6rem;
	font-size: .92rem;
	font-weight: 700;
	color: var(--ls-ink, #0a1930);
}

.lsrs-refer__points li {
	display: flex;
	align-items: center;
	gap: .6rem;
}

.lsrs-refer__points li::before {
	content: "\2713";
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ls-secondary-soft, #e2f4f2);
	color: var(--ls-secondary, #12958c);
	font-size: .7rem;
	font-weight: 900;
}

@media (max-width: 900px) {
	.lsrs-refer__grid {
		grid-template-columns: 1fr;
	}

	.lsrs-refer__photo {
		order: -1;
	}
}