.vpt-logout-page {
	background: var(--vp-color-bg);
}

.vpt-logout-hero {
	border-bottom: 1px solid var(--vp-color-border);
	background: var(--vp-color-surface);
}

.vpt-logout-hero__inner {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.vpt-logout-eyebrow {
	margin: 0 0 var(--vp-space-2);
	color: var(--vp-bank-primary);
	font-size: var(--vp-font-size-sm);
	font-weight: var(--vp-font-weight-bold);
}

.vpt-logout-hero h1 {
	margin: 0;
	font-size: clamp(2.3rem, 1.9rem + 1.5vw, 3.35rem);
}

.vpt-logout-hero__intro {
	max-width: 42rem;
	margin: var(--vp-space-4) 0 0;
	color: var(--vp-color-text-muted);
	font-size: var(--vp-font-size-lg);
}

.vpt-logout-section {
	min-height: clamp(24rem, 52vh, 38rem);
	padding-block: clamp(3.5rem, 8vw, 7rem);
	background: var(--vp-color-surface-muted);
}

.vpt-logout-section__inner {
	display: grid;
	gap: var(--vp-space-5);
	max-width: 58rem;
}

.vpt-logout-card {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
	align-items: start;
	border: 1px solid var(--vp-color-border);
	border-radius: var(--vp-radius-2xl);
	background: var(--vp-color-surface);
	box-shadow: var(--vp-shadow-sm);
	padding: clamp(1.6rem, 4vw, 3rem);
}

.vpt-logout-card__icon {
	display: grid;
	width: 3.5rem;
	height: 3.5rem;
	place-items: center;
	border-radius: 50%;
}

.vpt-logout-card__icon .vpt-icon {
	width: 1.55rem;
	height: 1.55rem;
}

.vpt-logout-card--success .vpt-logout-card__icon {
	background: #e8f6f1;
	color: #08765b;
}

.vpt-logout-card--info .vpt-logout-card__icon {
	background: #eef7fc;
	color: var(--vp-bank-primary);
}

.vpt-logout-card__body h2 {
	margin: 0;
	font-size: clamp(1.8rem, 1.5rem + 0.8vw, 2.35rem);
}

.vpt-logout-card__body > p:not(.vpt-logout-eyebrow) {
	max-width: 46rem;
	margin: var(--vp-space-3) 0 0;
	color: var(--vp-color-text-muted);
	font-size: var(--vp-font-size-md);
	line-height: 1.6;
}

.vpt-logout-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vp-space-4) var(--vp-space-5);
	align-items: center;
	margin-top: var(--vp-space-6);
}

.vpt-logout-text-link {
	display: inline-flex;
	gap: var(--vp-space-2);
	align-items: center;
	color: var(--vp-bank-primary);
	font-size: var(--vp-font-size-sm);
	font-weight: var(--vp-font-weight-bold);
	text-decoration: none;
}

.vpt-logout-text-link:hover {
	text-decoration: underline;
}

.vpt-logout-text-link .vpt-icon {
	width: 1rem;
	height: 1rem;
}

.vpt-logout-security {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: var(--vp-space-4);
	align-items: start;
	max-width: 48rem;
	padding: var(--vp-space-4) var(--vp-space-5);
	border: 1px solid var(--vp-color-border);
	border-radius: var(--vp-radius-xl);
	background: var(--vp-color-surface-subtle);
}

.vpt-logout-security__icon {
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: var(--vp-bank-primary);
}

.vpt-logout-security__icon .vpt-icon {
	width: 1.15rem;
	height: 1.15rem;
}

.vpt-logout-security strong {
	display: block;
	color: var(--vp-color-text-strong);
}

.vpt-logout-security p {
	margin: var(--vp-space-1) 0 0;
	color: var(--vp-color-text-muted);
	font-size: var(--vp-font-size-sm);
	line-height: 1.55;
}

@media (max-width: 40rem) {
	.vpt-logout-card {
		grid-template-columns: 1fr;
	}

	.vpt-logout-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.vpt-logout-actions .vpt-button,
	.vpt-logout-text-link {
		width: 100%;
		justify-content: center;
	}
}