/* Plan Investment — light bg, 2 white cards w/ outlined CTA + bullets. Mobile = swiper. Figma 1009-5141. */

.rw-block-plan-investment {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--rw-color-bg-mist, #F2F2F2);
}
.rw-block-plan-investment .rw-container { position: relative; z-index: 2; }

/* Decoration image — top-right, behind cards. */
.rw-block-plan-investment .decoration {
	position: absolute;
	top: 0;
	right: 0;
	max-width: 33.5rem;
	height: auto;
	pointer-events: none;
	opacity: 0.6;
	z-index: 1;
}

.rw-block-plan-investment .intro {
	text-align: center;
	max-width: 70.6875rem;
	margin: 0 auto var(--rw-space-2xl, 3.75rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rw-space-md);
}
.rw-block-plan-investment .intro h2 {
	margin: 0;
	font-family: var(--rw-font-text);
	font-weight: 700;
	font-size: var(--rw-h2-size);
	line-height: var(--rw-h2-line);
	letter-spacing: var(--rw-h2-tracking);
	color: var(--rw-color-primary-green);
}

.rw-block-plan-investment .cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--rw-space-md);
	align-items: stretch;
}

.rw-block-plan-investment .card {
	position: relative;
	flex: 1 1 0;
	background: var(--rw-color-white);
	border: 1px solid rgba(65, 76, 104, 0.3);
	border-radius: var(--rw-radius-lg);
	padding: 3rem;
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-xl, 2rem);
}

.rw-block-plan-investment .card .card-eyebrow { color: var(--rw-color-grey-01); margin: 0; }
.rw-block-plan-investment .card-body {
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-sm);
}
.rw-block-plan-investment .card h3 {
	margin: 0;
	font-family: var(--rw-font-text);
	font-weight: 700;
	/* Figma local: 28px mobile → 44px desktop. */
	font-size: clamp(1.75rem, 1.5vw + 1.4rem, 2.75rem);
	line-height: clamp(2rem, 1.5vw + 1.65rem, 2.75rem);
	letter-spacing: -0.04em;
	color: var(--rw-color-primary-green);
}
.rw-block-plan-investment .card .body {
	margin: 0;
	font-family: var(--rw-font-text);
	font-size: var(--rw-p1-size);
	line-height: var(--rw-p1-line);
	letter-spacing: -0.012em;
	color: var(--rw-color-grey-01);
}

/* Outlined full-width CTA. Hover fills green via global rw-btn--outline. */
.rw-block-plan-investment .card-cta {
	width: 100%;
	justify-content: center;
}

/* Stretched-link overlay — same pattern as two-modes. Pseudo-element on the
   CTA absolutely fills the .card (which is position:relative) so the whole
   card is clickable; inner content sits on a higher stacking layer so text
   stays selectable. */
.rw-block-plan-investment .card-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
}
.rw-block-plan-investment .card > *:not(.card-cta) {
	position: relative;
	z-index: 2;
}

/* Whole-card hover triggers the CTA's filled hover state. */
.rw-block-plan-investment .card:hover .card-cta {
	background: var(--rw-color-primary-green);
	color: var(--rw-color-white);
	border-color: var(--rw-color-primary-green);
}

.rw-block-plan-investment .bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.rw-block-plan-investment .bullets li {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	font-size: var(--rw-p2-size);
	line-height: var(--rw-p2-line);
	letter-spacing: var(--rw-p2-tracking);
	color: var(--rw-color-grey-01);
}
.rw-block-plan-investment .bullets .icon {
	flex-shrink: 0;
	color: var(--rw-color-primary-green);
	display: inline-flex;
}

.rw-block-plan-investment .footer-microcopy {
	margin: var(--rw-space-2xl, 3.5rem) 0 0;
	text-align: center;
	font-size: var(--rw-p1-size);
	line-height: var(--rw-p1-line);
	color: var(--rw-color-grey-01);
}
.rw-block-plan-investment .footer-microcopy strong {
	color: var(--rw-color-primary-green);
	font-weight: 600;
	margin-left: 0.25rem;
}

/* Mobile carousel controls — hidden by default, shown only ≤767px. */
.rw-block-plan-investment .controls { display: none; }
.rw-block-plan-investment .card.swiper-slide { height: auto; }

/* Desktop layout (≥768px): swiper markup is present but Swiper does NOT init.
   Override swiper-bundle.css defaults so the static side-by-side grid works. */
@media (min-width: 768px) {
	.rw-block-plan-investment .cards.swiper { overflow: visible; }
	.rw-block-plan-investment .swiper-wrapper {
		display: flex;
		gap: var(--rw-space-md);
		align-items: stretch;
	}
	.rw-block-plan-investment .card.swiper-slide {
		flex: 1 1 0;
		flex-shrink: 1;
		width: auto;
	}
}

@media (max-width: 767px) {
	.rw-block-plan-investment .decoration { display: none; }
	.rw-block-plan-investment .intro { gap: 1rem; margin: 0 auto 3.5rem; max-width: 21.875rem; }
	.rw-block-plan-investment .cards-wrap { position: relative; }
	.rw-block-plan-investment .cards.swiper { overflow: visible; }
	.rw-block-plan-investment .swiper-wrapper { display: flex; gap: 0; align-items: stretch; padding: 0; margin: 0; list-style: none; }
	.rw-block-plan-investment .card { padding: 1.5rem; gap: 1.5rem; }
	.rw-block-plan-investment .card-cta { padding: 1rem; font-size: 14px; }
	.rw-block-plan-investment .card.swiper-slide { flex: 0 0 86%; }

	.rw-block-plan-investment .controls {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: var(--rw-space-md);
	}
	.rw-block-plan-investment .fraction {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--rw-color-primary-green);
		font-family: var(--rw-font-mono);
		font-weight: 500;
		font-size: 0.875rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}
	.rw-block-plan-investment .fraction .line {
		display: inline-block;
		width: 2.5rem;
		height: 1px;
		background: rgba(70, 75, 80, 0.5);
	}
	.rw-block-plan-investment .nav { display: flex; gap: 0.5rem; }
	.rw-block-plan-investment .nav-btn {
		width: 2.5rem;
		height: 2.5rem;
		border: 1px solid rgba(70, 75, 80, 0.3);
		border-radius: var(--rw-radius-xs);
		background: transparent;
		color: var(--rw-color-primary-green);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition: border-color 0.2s ease, background 0.2s ease;
	}
	.rw-block-plan-investment .nav-btn:hover { background: #0B1A49; border-color: #0B1A49; color: #fff; }
	.rw-block-plan-investment .nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
}