.tbp-how-page {
	background: var(--tbp-color-background);
	color: var(--tbp-color-text);
}

.tbp-how-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(4rem, 9vw, 7rem);
	background:
		radial-gradient(circle at 12% 18%, rgb(18 120 231 / 22%), transparent 28rem),
		linear-gradient(135deg, var(--tbp-color-navy-950), var(--tbp-color-navy-800));
	color: #fff;
}

.tbp-how-hero::after {
	position: absolute;
	inset-block: auto -7rem;
	inset-inline-end: -5rem;
	width: 22rem;
	height: 22rem;
	border: 1px solid rgb(212 175 55 / 25%);
	border-radius: 50%;
	content: "";
}

.tbp-how-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 62rem;
	text-align: center;
}

.tbp-how-kicker {
	margin: 0 0 0.7rem;
	color: var(--tbp-color-gold-500);
	font-weight: 800;
	letter-spacing: 0.02em;
}

.tbp-how-hero h1 {
	max-width: 52rem;
	margin: 0 auto;
	color: #fff;
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	line-height: 1.15;
}

.tbp-how-lead {
	max-width: 48rem;
	margin: 1.25rem auto 0;
	color: rgb(255 255 255 / 82%);
	font-size: clamp(1rem, 2vw, 1.2rem);
	line-height: 1.9;
}

.tbp-how-hero__links,
.tbp-how-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-block-start: 1.75rem;
}

.tbp-how-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.75rem 1.35rem;
	border: 1px solid var(--tbp-color-blue-600);
	border-radius: 0.8rem;
	background: var(--tbp-color-blue-600);
	color: #fff;
	font-weight: 800;
	text-decoration: none;
	transition: transform var(--tbp-transition-fast), filter var(--tbp-transition-fast);
}

.tbp-how-button:hover,
.tbp-how-button:focus-visible {
	color: #fff;
	filter: brightness(0.94);
	transform: translateY(-2px);
}

.tbp-how-button--ghost {
	border-color: rgb(255 255 255 / 35%);
	background: rgb(255 255 255 / 8%);
}

.tbp-how-button--light {
	border-color: #fff;
	background: #fff;
	color: var(--tbp-color-navy-900);
}

.tbp-how-button--light:hover,
.tbp-how-button--light:focus-visible {
	color: var(--tbp-color-navy-900);
}

.tbp-how-section {
	padding-block: clamp(3.5rem, 7vw, 6rem);
}

.tbp-how-section--soft {
	background: var(--tbp-color-surface-soft);
}

.tbp-how-heading {
	max-width: 50rem;
	margin-block-end: 2rem;
}

.tbp-how-heading h2,
.tbp-how-delivery h2,
.tbp-how-cta h2 {
	margin: 0;
	font-size: clamp(1.85rem, 4vw, 3rem);
}

.tbp-how-steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.tbp-how-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	min-width: 0;
	padding: clamp(1.25rem, 3vw, 1.8rem);
	border: 1px solid var(--tbp-color-border);
	border-radius: var(--tbp-radius-xl);
	background: var(--tbp-color-surface);
	box-shadow: var(--tbp-shadow-sm);
}

.tbp-how-step__number {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 1rem;
	background: var(--tbp-color-blue-100);
	color: var(--tbp-color-blue-700);
	font-weight: 800;
}

.tbp-how-step h3,
.tbp-how-safety h3 {
	margin: 0;
	font-size: 1.2rem;
}

.tbp-how-step p,
.tbp-how-safety p,
.tbp-how-delivery p,
.tbp-how-cta p {
	margin: 0.55rem 0 0;
	color: var(--tbp-color-text-muted);
	line-height: 1.8;
}

.tbp-how-status {
	display: inline-flex;
	width: fit-content;
	margin-block-start: 0.9rem;
	padding: 0.3rem 0.7rem;
	border-radius: var(--tbp-radius-pill);
	background: rgb(23 135 93 / 12%);
	color: var(--tbp-color-success);
	font-size: 0.78rem;
	font-weight: 800;
}

.tbp-how-status--pending {
	background: rgb(194 122 10 / 13%);
	color: var(--tbp-color-warning);
}

.tbp-how-safety {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.tbp-how-safety article {
	display: flex;
	gap: 0.9rem;
	padding: 1.4rem;
	border: 1px solid var(--tbp-color-border);
	border-radius: var(--tbp-radius-lg);
	background: var(--tbp-color-surface);
}

.tbp-how-safety article > span {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgb(23 135 93 / 12%);
	color: var(--tbp-color-success);
	font-weight: 900;
}

.tbp-how-section--status {
	padding-block: clamp(3rem, 6vw, 5rem);
	background: var(--tbp-color-navy-900);
}

.tbp-how-delivery {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.tbp-how-delivery h2 {
	color: #fff;
}

.tbp-how-delivery > div:first-child p {
	color: rgb(255 255 255 / 72%);
}

.tbp-how-delivery__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.tbp-how-delivery__columns section {
	padding: 1.25rem;
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: var(--tbp-radius-lg);
	background: rgb(255 255 255 / 5%);
}

.tbp-how-delivery__columns ul {
	margin: 1rem 0 0;
	padding-inline-start: 1.2rem;
	color: rgb(255 255 255 / 86%);
}

.tbp-how-delivery__columns li + li {
	margin-block-start: 0.65rem;
}

.tbp-how-cta {
	padding-block: clamp(3rem, 6vw, 5rem);
	background:
		radial-gradient(circle at 90% 50%, rgb(212 175 55 / 18%), transparent 24rem),
		var(--tbp-color-blue-100);
}

.tbp-how-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2rem;
	align-items: center;
}

.tbp-how-cta__actions {
	margin: 0;
}

.tbp-how-text-link {
	display: inline-flex;
	align-items: center;
	min-height: 3.25rem;
	padding-inline: 0.5rem;
	color: var(--tbp-color-navy-900);
	font-weight: 800;
}

html[data-theme="dark"] .tbp-how-step__number,
html[data-theme="dark"] .tbp-how-cta {
	background: var(--tbp-color-surface-muted);
}

html[data-theme="dark"] .tbp-how-text-link {
	color: var(--tbp-color-heading);
}

@media (max-width: 800px) {
	.tbp-how-steps,
	.tbp-how-safety,
	.tbp-how-delivery,
	.tbp-how-cta__inner {
		grid-template-columns: 1fr;
	}

	.tbp-how-cta__inner {
		text-align: center;
	}
}

@media (max-width: 520px) {
	.tbp-how-hero {
		padding-block: 3rem;
	}

	.tbp-how-hero__links,
	.tbp-how-cta__actions {
		flex-direction: column;
	}

	.tbp-how-button,
	.tbp-how-text-link {
		width: 100%;
		justify-content: center;
	}

	.tbp-how-step {
		grid-template-columns: 1fr;
	}

	.tbp-how-delivery__columns {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 360px) {
	.tbp-how-step,
	.tbp-how-safety article,
	.tbp-how-delivery__columns section {
		padding: 1rem;
	}

	.tbp-how-hero h1 {
		font-size: 2rem;
	}
}