.ss-paywall {
	max-width: 560px;
	margin: 32px auto;
	padding: 40px 32px;
	text-align: center;
	background: var(--ss-bg);
	border: 1px solid var(--ss-border);
	border-radius: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ss-paywall__icon {
	font-size: 36px;
	margin-bottom: 8px;
}

.ss-paywall__title {
	margin: 0 0 10px;
	font-size: 21px;
	color: var(--ss-ink);
}

.ss-paywall__desc {
	margin: 0 0 24px;
	color: var(--ss-body);
	font-size: 15px;
	line-height: 1.6;
}

.ss-paywall__btn {
	display: inline-block;
	padding: 13px 30px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
}

/* .ss-paywall__btn--primary colors come from the canonical button
 * aliases in subscription-system-public.css. */

.ss-paywall__btn[disabled] {
	opacity: 0.65;
	cursor: default;
}

.ss-paywall__link {
	display: block;
	margin-top: 16px;
	font-size: 13px;
	color: var(--ss-muted);
	text-decoration: underline;
}

.ss-paywall__error {
	margin-top: 16px;
	color: var(--ss-danger);
	font-size: 13px;
}

.ss-paywall-teaser {
	position: relative;
	color: var(--ss-body);
}

.ss-paywall-teaser:after {
	content: "";
	display: block;
	height: 60px;
	margin-top: -60px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ss-surface));
}

/* Dark mode — reuses the same token set rather than inventing new colors. */
@media (prefers-color-scheme: dark) {
	.ss-paywall {
		background: var(--ss-ink);
		border-color: var(--ss-body);
	}
	.ss-paywall__title {
		color: var(--ss-bg);
	}
	.ss-paywall__desc {
		color: var(--ss-border);
	}
	.ss-paywall__link {
		color: var(--ss-border);
	}
	.ss-paywall-teaser:after {
		background: linear-gradient(to bottom, rgba(24, 38, 32, 0), var(--ss-ink));
	}
}