/* Checkout Welcome presentation. Typography, colours, and shared tokens come from marby-master.css. */
.marby-welcome {
	overflow: hidden;
	background: var(--marby-color-white);
}

.marby-welcome .marby-public-container {
	width: 80%;
	margin: 0 auto;
	padding: 0;
}

.marby-welcome-hero,
.marby-welcome-progress,
.marby-welcome-mai,
.marby-welcome-journey,
.marby-welcome-after,
.marby-welcome-important,
.marby-welcome-closing {
	padding: 78px 0;
}

.marby-welcome-hero {
	background: linear-gradient(
		180deg,
		var(--marby-color-white),
		var(--marby-color-soft-tan)
	);
}

.marby-welcome-hero-grid,
.marby-welcome-mai-grid,
.marby-welcome-closing-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
	gap: 58px;
	align-items: end;
}

.marby-welcome-hero-card,
.marby-welcome-progress-card,
.marby-welcome-mai aside,
.marby-welcome-step,
.marby-welcome-promise,
.marby-welcome-important-card {
	padding: 30px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-white);
	box-shadow: var(--marby-shadow-soft);
}

.marby-welcome-hero-card {
	background: var(--marby-color-soft-blue);
}

.marby-welcome-hero-card > b,
.marby-welcome-mai aside > b {
	display: grid;
	width: 58px;
	height: 58px;
	margin-bottom: 28px;
	place-items: center;
	border-radius: 50%;
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white);
}

.marby-welcome-actions,
.marby-welcome-closing-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 30px;
}

.marby-welcome-hero .marby-btn-secondary {
	border-color: var(--marby-color-marby-blue);
	background: transparent;
	color: var(--marby-color-marby-blue);
}

.marby-welcome-progress-card {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: center;
}

.marby-welcome-progress-card > b {
	color: var(--marby-color-marby-blue);
	font-size: var(--marby-public-h3-size);
}

.marby-welcome-mai,
.marby-welcome-mai {
	background: var(--marby-color-black);
}

.marby-welcome-closing {
	background: var(--marby-color-black);
}

.marby-welcome-mai h2,
.marby-welcome-mai h3,
.marby-welcome-mai p,
.marby-welcome-closing h3,
.marby-welcome-closing h4,
.marby-welcome-closing p {
	color: var(--marby-color-white);
}

.marby-welcome-mai aside {
	background: rgba(255, 255, 255, 0.06);
}

.marby-welcome-closing .marby-eyebrow {
	color: var(--marby-color-marby-blue);
}

.marby-welcome-closing-grid {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
}

.marby-welcome-closing-actions {
	justify-self: end;
	align-items: center;
}

.marby-welcome-journey {
	background: var(--marby-color-soft-tan);
}

.marby-welcome-section-head {
	display: grid;
	grid-template-columns: 78px 1fr;
	gap: 26px;
	margin-bottom: 42px;
}

.marby-welcome-section-head > b {
	display: grid;
	width: 58px;
	height: 58px;
	place-items: center;
	border: 1px solid var(--marby-color-border-light);
	border-radius: 50%;
	background: var(--marby-color-white);
	color: var(--marby-color-brown);
}

.marby-welcome-steps,
.marby-welcome-promises {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.marby-welcome-step:nth-child(2),
.marby-welcome-step:nth-child(3),
.marby-welcome-promise:nth-child(3) {
	background: var(--marby-color-soft-blue);
}

.marby-welcome-step:nth-child(4) {
	background: var(--marby-color-black);
}

.marby-welcome-step:nth-child(4) h3,
.marby-welcome-step:nth-child(4) p {
	color: var(--marby-color-white);
}

.marby-welcome-step > b,
.marby-welcome-promise > b {
	display: inline-grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: var(--marby-radius-md);
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white);
}

.marby-welcome-after {
	background: var(--marby-color-white);
}

.marby-welcome-promises {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marby-welcome-important {
	background: var(--marby-color-soft-blue);
}

.marby-welcome-important-card {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 24px;
}

.marby-welcome-important-card > b {
	display: grid;
	width: 58px;
	height: 58px;
	place-items: center;
	border-radius: 50%;
	background: var(--marby-color-marby-blue);
	color: var(--marby-color-white);
}

@media (max-width: 900px) {
	.marby-welcome .marby-public-container {
		width: calc(100% - 40px);
	}

	.marby-welcome-hero-grid,
	.marby-welcome-mai-grid,
	.marby-welcome-closing-grid,
	.marby-welcome-steps,
	.marby-welcome-promises,
	.marby-welcome-progress-card,
	.marby-welcome-important-card {
		grid-template-columns: 1fr;
	}
}