.wapu-page-shell{
	position: relative;
	background:
		radial-gradient(circle at top center, color-mix(in srgb, var(--ds-fill-3) 72%, transparent) 0%, transparent 42%),
		linear-gradient(180deg, color-mix(in srgb, var(--ds-surface-2) 78%, var(--ds-surface)) 0%, var(--ds-surface) 280px);
	padding: clamp(20px, 3vw, 40px) var(--ds-s-3) clamp(48px, 7vw, 72px);
	overflow: clip;
}

.wapu-page{
	width: min(100%, 1240px);
	margin: 0 auto;
}

.wapu-page__hero{
	position: relative;
	margin-bottom: clamp(22px, 3vw, 32px);
	padding: clamp(22px, 3vw, 32px);
	border: var(--ds-border-hairline) solid color-mix(in srgb, var(--ds-separator-soft) 85%, transparent);
	border-radius: clamp(20px, 2.4vw, 28px);
	background:
		linear-gradient(140deg, color-mix(in srgb, var(--ds-surface) 88%, var(--ds-fill-3)) 0%, var(--ds-surface) 55%),
		var(--ds-surface);
	box-shadow: 0 18px 46px -38px rgba(15, 23, 42, 0.2);
	overflow: hidden;
}

.wapu-page__hero::after{
	content: "";
	position: absolute;
	inset: auto -8% -28% auto;
	width: clamp(180px, 22vw, 300px);
	height: clamp(180px, 22vw, 300px);
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--ds-fill-3) 74%, transparent) 0%, transparent 70%);
	pointer-events: none;
}

.wapu-page__eyebrow{
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 7px 12px;
	border-radius: var(--ds-r-pill);
	background: var(--ws-primary, var(--wp-primary, #be185d));
	color: var(--ds-action-ink);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-caption-2);
	font-weight: var(--ds-fw-semibold);
	letter-spacing: var(--ds-ls-wide);
	text-transform: uppercase;
}

.wapu-page__eyebrow::before{
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.wapu-page__title{
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: none;
	font-family: var(--ds-font-display);
	font-size: clamp(1.8rem, 2.6vw, 2.75rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--ds-ink);
	white-space: nowrap;
}

.wapu-page__subtitle{
	position: relative;
	z-index: 1;
	max-width: 62ch;
	margin: 14px 0 0;
	color: var(--ds-ink-3);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-footnote);
	line-height: 1.65;
}

.wapu-page__layout{
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: clamp(18px, 2.4vw, 28px);
	align-items: start;
}

.wapu-page__toc{
	position: sticky;
	top: calc(var(--ds-s-5) + 84px);
}

.wapu-page__toc-card{
	padding: 14px;
	border-radius: 20px;
	border: var(--ds-border-hairline) solid var(--ds-separator-soft);
	background: color-mix(in srgb, var(--ds-surface) 92%, var(--ds-fill-3));
	box-shadow: 0 14px 34px -32px rgba(15, 23, 42, 0.22);
}

.wapu-page__toc-kicker{
	margin: 0 0 10px;
	color: var(--ds-ink-4);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-caption-2);
	font-weight: var(--ds-fw-semibold);
	letter-spacing: var(--ds-ls-wide);
	text-transform: uppercase;
}

.wapu-page__toc-nav{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wapu-page__toc-link{
	display: block;
	padding: 8px 10px;
	border-radius: var(--ds-r-md);
	color: var(--ds-ink-3);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-caption-1);
	font-weight: var(--ds-fw-medium);
	line-height: 1.3;
	text-decoration: none;
	transition: background var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease);
}

.wapu-page__toc-link:hover,
.wapu-page__toc-link.is-active{
	background: var(--ws-primary, var(--wp-primary, #be185d));
	color: var(--ds-action-ink);
	transform: translateX(2px);
}

.wapu-page__toc-link--level-3{
	padding-left: 18px;
	font-size: var(--ds-fs-caption-1);
	color: var(--ds-ink-4);
}

.wapu-page__main{
	min-width: 0;
}

.wapu-page__content{
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: var(--ds-ink-2);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-footnote);
	line-height: 1.72;
}

.wapu-page__intro,
.wapu-page__section{
	padding: clamp(18px, 2.4vw, 24px);
	border-radius: clamp(18px, 2.2vw, 22px);
	border: var(--ds-border-hairline) solid var(--ds-separator-soft);
	background: var(--ds-surface);
	box-shadow: 0 14px 34px -30px rgba(15, 23, 42, 0.18);
}

.wapu-page__intro{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	min-height: clamp(72px, 7vw, 92px);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--ds-fill-3) 48%, var(--ds-surface)) 0%, var(--ds-surface) 70%),
		var(--ds-surface);
}

.wapu-page__section{
	position: relative;
	overflow: hidden;
}

.wapu-page__section::before{
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: linear-gradient(180deg, var(--ws-primary, var(--wp-primary, #be185d)) 0%, color-mix(in srgb, var(--ws-primary, var(--wp-primary, #be185d)) 35%, transparent) 100%);
}

.wapu-page__section-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: var(--ds-border-hairline) solid var(--ds-separator-soft);
}

.wapu-page__section-kicker{
	margin: 0;
	color: var(--ds-ink-4);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-caption-2);
	font-weight: var(--ds-fw-semibold);
	letter-spacing: var(--ds-ls-wide);
	text-transform: uppercase;
}

.wapu-page__section-head h2,
.wapu-page__content > h2{
	margin: 0;
	color: var(--ds-ink);
	font-family: var(--ds-font-display);
	font-size: clamp(1.55rem, 2.2vw, 2rem);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.wapu-page__intro > h1,
.wapu-page__intro > h2{
	font-size: clamp(1.12rem, 1.7vw, 1.45rem);
	line-height: 1.08;
	margin: 0;
}

.wapu-page__intro > p{
	margin: 0;
}

.wapu-page__section-body > *:first-child,
.wapu-page__intro > *:first-child,
.wapu-page__content > *:first-child{
	margin-top: 0 !important;
}

.wapu-page__section-body > *:last-child,
.wapu-page__intro > *:last-child,
.wapu-page__content > *:last-child{
	margin-bottom: 0 !important;
}

.wapu-page__content h3,
.wapu-page__content h4,
.wapu-page__content h5,
.wapu-page__content h6{
	margin: 22px 0 8px;
	color: var(--ds-ink);
	text-wrap: balance;
}

.wapu-page__content h3{
	font-family: var(--ds-font-text);
	font-size: clamp(1.02rem, 1.4vw, 1.18rem);
	font-weight: var(--ds-fw-semibold);
	line-height: 1.3;
}

.wapu-page__content h4,
.wapu-page__content h5,
.wapu-page__content h6{
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-footnote);
	font-weight: var(--ds-fw-semibold);
	letter-spacing: .01em;
	line-height: 1.35;
}

.wapu-page__content p,
.wapu-page__content ul,
.wapu-page__content ol,
.wapu-page__content blockquote,
.wapu-page__content table,
.wapu-page__content .wp-block-table,
.wapu-page__content .wp-block-image,
.wapu-page__content .wp-block-columns{
	margin: 0 0 14px;
}

.wapu-page__content ul,
.wapu-page__content ol{
	padding-left: 1.4em;
}

.wapu-page__content li{
	margin-bottom: 6px;
}

.wapu-page__content li::marker{
	color: var(--ds-action);
}

.wapu-page__content li > ul,
.wapu-page__content li > ol{
	margin-top: 8px;
}

.wapu-page__content strong{
	color: var(--ds-ink);
	font-weight: var(--ds-fw-semibold);
}

.wapu-page__content em{
	color: var(--ds-ink-3);
}

.wapu-page__content a{
	color: var(--ds-ink);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--ds-action) 32%, transparent);
	text-underline-offset: 4px;
	transition: opacity var(--ds-dur-fast) var(--ds-ease), text-decoration-color var(--ds-dur-fast) var(--ds-ease);
}

.wapu-page__content a:hover{
	opacity: .72;
	text-decoration-color: currentColor;
}

.wapu-page__content blockquote{
	padding: 14px 16px;
	border-left: 3px solid var(--ds-action);
	background: color-mix(in srgb, var(--ds-fill-3) 55%, var(--ds-surface));
	border-radius: 0 var(--ds-r-md) var(--ds-r-md) 0;
	color: var(--ds-ink);
}

.wapu-page__content table{
	width: 100%;
	border-collapse: collapse;
	background: var(--ds-surface);
	border-radius: var(--ds-r-md);
	overflow: hidden;
	box-shadow: inset 0 0 0 var(--ds-border-hairline) var(--ds-separator-soft);
}

.wapu-page__content th,
.wapu-page__content td{
	padding: 10px 12px;
	border-bottom: var(--ds-border-hairline) solid var(--ds-separator-soft);
	text-align: left;
	vertical-align: top;
}

.wapu-page__content th{
	color: var(--ds-ink);
	font-size: var(--ds-fs-caption-1);
	font-weight: var(--ds-fw-semibold);
	letter-spacing: var(--ds-ls-wide);
	text-transform: uppercase;
	background: color-mix(in srgb, var(--ds-fill-3) 65%, var(--ds-surface));
}

.wapu-page__content tr:last-child td{
	border-bottom: 0;
}

.wapu-page__content hr{
	margin: 22px 0;
	border: 0;
	border-top: var(--ds-border-hairline) solid var(--ds-separator-soft);
}

.wapu-page__content .page-links{
	margin-top: 20px;
	padding-top: 14px;
	border-top: var(--ds-border-hairline) solid var(--ds-separator-soft);
}

@media (max-width: 991px){
	.wapu-page__layout{
		grid-template-columns: minmax(0, 1fr);
	}

	.wapu-page__toc{
		position: static;
		order: -1;
	}

	.wapu-page__toc-card{
		padding: 10px 12px;
		border-radius: 18px;
	}

	.wapu-page__toc-nav{
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		padding-bottom: 2px;
	}

	.wapu-page__toc-nav::-webkit-scrollbar{
		display: none;
	}

	.wapu-page__toc-link{
		flex: 0 0 auto;
		padding: 8px 12px;
		border-radius: var(--ds-r-pill);
		background: var(--ds-fill-4);
		white-space: nowrap;
		scroll-snap-align: start;
	}

	.wapu-page__toc-link--level-3{
		display: none;
	}
}

@media (max-width: 767px){
	.wapu-page-shell{
		padding: 14px var(--ds-s-2) 44px;
	}

	.wapu-page__hero{
		margin-bottom: 18px;
		padding: 18px 16px;
		border-radius: 20px;
	}

	.wapu-page__title{
		white-space: normal;
		text-wrap: balance;
		font-size: clamp(1.7rem, 8.8vw, 2.35rem);
		line-height: .98;
	}

	.wapu-page__subtitle,
	.wapu-page__content{
		font-size: var(--ds-fs-caption-1);
		line-height: 1.68;
	}

	.wapu-page__eyebrow{
		margin-bottom: 10px;
		padding: 6px 10px;
	}

	.wapu-page__intro,
	.wapu-page__section{
		padding: 16px 14px;
		border-radius: 18px;
	}

	.wapu-page__intro{
		min-height: 0;
	}

	.wapu-page__section-head{
		margin-bottom: 12px;
		padding-bottom: 10px;
	}

	.wapu-page__section-head h2,
	.wapu-page__content > h2{
		font-size: clamp(1.35rem, 6vw, 1.7rem);
	}

	.wapu-page__intro > h1,
	.wapu-page__intro > h2{
		font-size: clamp(1.05rem, 5.4vw, 1.35rem);
	}

	.wapu-page__content h3{
		font-size: 1rem;
	}

	.wapu-page__toc-kicker{
		margin-bottom: 8px;
	}

	.wapu-page__content table,
	.wapu-page__content .wp-block-table{
		display: block;
		overflow-x: auto;
	}
}
