/* ── Root — position: relative contains the absolutely placed fade div.
   Negative top margin pulls the whole block up to overlap the last
   line of visible post content so the fade has something to cover. ── */
.cv-paywall--modern {
	position: relative;
	margin-top: -80px;
	font-family: inherit;
}

/* ── Fade div — sits 80px above the gate, fades visible content out ─ */
.cv-paywall__fade {
	position: absolute;
	top: -80px;
	left: 0;
	right: 0;
	height: 80px;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0),
		rgba(255, 255, 255, 1)
	);
	pointer-events: none;
}

/* ── Gate — white card, centered, inline in document flow ────────── */
.cv-paywall--modern__gate {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	max-width: 700px;
	margin: 0 auto;
	padding: 2.5rem;
	text-align: center;
}

/* ── Icon ────────────────────────────────────────────────────────── */
.cv-paywall--modern__icon {
	color: #1a1a1a;
	margin-bottom: 1rem;
}

/* ── Title / message ─────────────────────────────────────────────── */
.cv-paywall--modern__title {
	font-size: 1.625rem;
	font-weight: 700;
	color: #1F2937;
	margin: 0 0 0.625rem;
	letter-spacing: -0.01em;
}

.cv-paywall--modern__message {
	font-size: 1rem;
	color: #6B7280;
	margin: 0 0 1.75rem;
}

/* ── Tiers heading ───────────────────────────────────────────────── */
.cv-paywall--modern__tiers-heading {
	font-size: 0.75rem;
	font-weight: 600;
	color: #374151;
	margin: 0 0 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ── Cards flex row ──────────────────────────────────────────────── */
.cv-paywall--modern__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.cv-paywall--modern__card {
	flex: 1;
	min-width: 200px;
	max-width: 260px;
	background: #F9FAFB;
	border: 2px solid #E5E7EB;
	border-radius: 8px;
	padding: 1.5rem;
	text-align: left;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cv-paywall--modern__card:hover {
	border-color: #1a1a1a;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ── Tier name ───────────────────────────────────────────────────── */
.cv-paywall--modern__tier-name {
	font-size: 1rem;
	font-weight: 700;
	color: #1F2937;
	margin: 0 0 0.5rem;
}

/* ── Price ───────────────────────────────────────────────────────── */
.cv-paywall--modern__price {
	display: flex;
	align-items: baseline;
	gap: 0.2rem;
	margin-bottom: 1rem;
}

.cv-paywall--modern__price-amount {
	font-size: 1.75rem;
	font-weight: 800;
	color: #1a1a1a;
	letter-spacing: -0.02em;
}

.cv-paywall--modern__price-period {
	font-size: 0.875rem;
	color: #9CA3AF;
}

/* ── Feature list ────────────────────────────────────────────────── */
.cv-paywall--modern__features {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem;
}

.cv-paywall--modern__features li {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	font-size: 0.8125rem;
	color: #374151;
	padding: 0.25rem 0;
}

.cv-paywall--modern__features svg {
	color: #10B981;
	flex-shrink: 0;
	margin-top: 2px;
}

/* ── Get Access button ───────────────────────────────────────────── */
.cv-paywall--modern__btn {
	display: block;
	width: 100%;
	padding: 0.6875rem 1rem;
	background: #1a1a1a;
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	box-sizing: border-box;
	transition: background 0.15s ease;
}

.cv-paywall--modern__btn:hover,
.cv-paywall--modern__btn:focus {
	background: #333;
	color: #fff;
	outline: none;
}

/* ── Log-in line ─────────────────────────────────────────────────── */
.cv-paywall--modern__login-line {
	font-size: 0.875rem;
	color: #9CA3AF;
	margin: 0;
	text-align: center;
}

.cv-paywall--modern__login-line a {
	color: #1a1a1a;
	font-weight: 600;
	text-decoration: none;
}

.cv-paywall--modern__login-line a:hover {
	text-decoration: underline;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 540px) {
	.cv-paywall--modern__gate {
		padding: 1.75rem 1.25rem;
	}

	.cv-paywall--modern__cards {
		flex-direction: column;
		align-items: stretch;
	}

	.cv-paywall--modern__card {
		max-width: 100%;
	}

	.cv-paywall--modern__title {
		font-size: 1.25rem;
	}
}