.nal-bridge-page {
	--nal-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
	--nal-color-ink: #17212b;
	--nal-color-text: #314154;
	--nal-color-muted: #586674;
	--nal-color-wash: #f5f7f8;
	--nal-color-card: #ffffff;
	--nal-color-border: #dce5ec;
	--nal-color-brand: #176c53;
	--nal-color-brand-dark: #0f513f;
	--nal-color-green-soft: #e4f3ed;
	--nal-radius-xs: 6px;
	--nal-radius: 8px;
	--nal-shadow-hairline: 0 1px 0 rgba(21, 32, 43, 0.03);
	margin: 0;
	background: var(--nal-color-wash);
	color: var(--nal-color-text);
	font-family: var(--nal-font-sans);
	font-size: 17px;
	line-height: 1.7;
}

.nal-bridge-page *,
.nal-bridge-page *::before,
.nal-bridge-page *::after {
	box-sizing: border-box;
}

.nal-bridge-shell {
	width: min(760px, calc(100% - 40px));
	margin: 0 auto;
	padding: 56px 0 48px;
}

.nal-bridge-header {
	margin-bottom: 32px;
	text-align: center;
}

.nal-eyebrow {
	margin: 0 0 8px;
	color: var(--nal-color-brand-dark);
	font-size: 0.82rem;
	font-weight: 800;
}

.nal-inline-brand {
	color: inherit;
	text-decoration: none;
}

.nal-inline-brand:hover,
.nal-inline-brand:focus {
	color: var(--nal-color-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nal-bridge-header h1 {
	margin: 0;
	color: var(--nal-color-ink);
	font-size: clamp(2rem, 6vw, 2.75rem);
	line-height: 1.18;
	overflow-wrap: anywhere;
}

.nal-bridge-intro {
	max-width: 640px;
	margin: 16px auto 0;
	color: var(--nal-color-text);
	font-size: 1.06rem;
}

.nal-step {
	margin: 16px 0;
	padding: 28px;
	border: 1px solid var(--nal-color-border);
	border-radius: var(--nal-radius);
	background: var(--nal-color-card);
	box-shadow: var(--nal-shadow-hairline);
}

.nal-step-content {
	min-width: 0;
}

.nal-step-kicker {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--nal-color-green-soft);
	color: var(--nal-color-brand-dark);
	font-size: 0.76rem;
	font-weight: 800;
}

.nal-step h2 {
	margin: 0;
	color: var(--nal-color-ink);
	font-size: 1.32rem;
	line-height: 1.3;
}

.nal-step-content > p {
	margin: 10px 0 20px;
}

.nal-step-activation {
	padding: 36px 48px;
	border-top: 3px solid var(--nal-color-brand);
	text-align: center;
}

.nal-step-activation .nal-step-content > p:not(.nal-step-kicker) {
	max-width: 590px;
	margin-right: auto;
	margin-left: auto;
}

.nal-step-activation .nal-button {
	min-width: 220px;
}

.nal-offers-section {
	margin-top: 48px;
}

.nal-offers-header {
	margin-bottom: 20px;
}

.nal-offers-header h2 {
	margin: 0;
	color: var(--nal-color-ink);
	font-size: 1.5rem;
	line-height: 1.3;
}

.nal-step-status {
	margin: 8px 0 0;
	color: var(--nal-color-muted);
	font-size: 0.92rem;
}

.nal-step-status.is-ready {
	color: var(--nal-color-brand-dark);
	font-weight: 700;
}

.nal-step-choice {
	scroll-margin-top: 24px;
}

.nal-button {
	display: inline-flex;
	min-height: 46px;
	max-width: 100%;
	padding: 10px 18px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--nal-color-brand);
	border-radius: var(--nal-radius-xs);
	background: var(--nal-color-brand);
	color: #ffffff;
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.nal-button:hover,
.nal-button:focus {
	border-color: var(--nal-color-brand-dark);
	background: var(--nal-color-brand-dark);
	color: #ffffff;
	text-decoration: none;
}

.nal-inline-brand:focus-visible,
.nal-button:focus-visible {
	outline: 3px solid rgba(23, 108, 83, 0.28);
	outline-offset: 3px;
}

.nal-button-secondary {
	flex: 0 0 auto;
	border-color: var(--nal-color-border);
	background: var(--nal-color-card);
	color: var(--nal-color-brand-dark);
}

.nal-button-secondary:hover,
.nal-button-secondary:focus {
	border-color: var(--nal-color-brand);
	background: var(--nal-color-green-soft);
	color: var(--nal-color-brand-dark);
}

.nal-button-primary.is-complete {
	border-color: rgba(23, 108, 83, 0.32);
	background: var(--nal-color-green-soft);
	color: var(--nal-color-brand-dark);
}

.nal-button-primary.is-complete:hover,
.nal-button-primary.is-complete:focus {
	border-color: var(--nal-color-brand);
	background: var(--nal-color-green-soft);
	color: var(--nal-color-brand-dark);
}

.nal-outbound[aria-disabled="true"] {
	cursor: not-allowed;
	pointer-events: none;
	border-color: var(--nal-color-border);
	background: var(--nal-color-wash);
	color: var(--nal-color-muted);
}

.nal-outbound.is-ready {
	border-color: var(--nal-color-brand);
	background: var(--nal-color-brand);
	color: #ffffff;
}

.nal-outbound.is-ready:hover,
.nal-outbound.is-ready:focus {
	border-color: var(--nal-color-brand-dark);
	background: var(--nal-color-brand-dark);
	color: #ffffff;
}

.nal-offer-list {
	display: grid;
	gap: 16px;
}

.nal-offer {
	display: flex;
	min-width: 0;
	padding: 20px 20px 20px 24px;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border: 1px solid var(--nal-color-border);
	border-left: 4px solid var(--nal-color-brand);
	border-radius: var(--nal-radius);
	background: var(--nal-color-card);
	box-shadow: var(--nal-shadow-hairline);
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.nal-offer-content {
	min-width: 0;
}

.nal-offer h3 {
	margin: 0;
	color: var(--nal-color-ink);
	font-size: 1.08rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.nal-offer p {
	margin: 8px 0 0;
	color: var(--nal-color-muted);
	font-size: 0.94rem;
	overflow-wrap: anywhere;
}

.nal-badge {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 8px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--nal-color-green-soft);
	color: var(--nal-color-brand-dark);
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.nal-disclosure {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--nal-color-border);
	color: var(--nal-color-muted);
	font-size: 0.86rem;
}

.nal-disclosure p {
	margin: 4px 0;
}

@media (hover: hover) and (pointer: fine) {
	.nal-offer:hover {
		border-color: rgba(23, 108, 83, 0.45);
		border-left-color: var(--nal-color-brand-dark);
		transform: translateY(-1px);
	}
}

@media (max-width: 600px) {
	.nal-bridge-shell {
		width: min(100% - 32px, 760px);
	}

	.nal-bridge-shell {
		padding: 36px 0 32px;
	}

	.nal-bridge-header {
		margin-bottom: 24px;
	}

	.nal-step {
		padding: 20px;
	}

	.nal-step-activation {
		padding: 28px 20px;
	}

	.nal-offers-section {
		margin-top: 32px;
	}

	.nal-offer {
		align-items: stretch;
		flex-direction: column;
		gap: 16px;
	}

	.nal-button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nal-button,
	.nal-offer {
		transition: none;
	}

	.nal-offer:hover {
		transform: none;
	}
}