/*
 * ParentRoute
 * How It Works Section
 */

/* =========================================================
   Section
   ========================================================= */

.pr-steps {
	--pr-steps-accent: #6f8979;
	--pr-steps-text: #18201c;
	--pr-steps-muted: rgba(24, 32, 28, 0.67);
	--pr-steps-surface: #f0f3f0;
	--pr-steps-divider: rgba(24, 32, 28, 0.11);
	--pr-steps-radius: 26px;

	position: relative;
	padding: 96px 0;
	background: #ffffff;
	color: var(--pr-steps-text);
}

/* =========================================================
   Main shell
   Faithful adaptation of the Shopify two-column layout
   ========================================================= */

.pr-steps__shell {
	display: grid;
	grid-template-columns:
		minmax(0, 0.82fr)
		minmax(0, 1.18fr);
	gap: clamp(40px, 8vw, 110px);
	padding: clamp(38px, 6vw, 78px);
	border-radius:
		calc(var(--pr-steps-radius) + 10px);
	background: var(--pr-steps-surface);
}

/* =========================================================
   Header
   ========================================================= */

.pr-steps__header {
	align-self: start;
}

.pr-steps__header .pr-section__eyebrow {
	margin-bottom: 18px;
}

.pr-steps__heading {
	margin: 0;
	color: var(--pr-steps-text);
	font-size: clamp(38px, 4.4vw, 64px);
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: -0.048em;
	text-wrap: balance;
}

.pr-steps__text {
	max-width: 560px;
	margin-top: 20px;
	color: var(--pr-steps-muted);
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.7;
}

.pr-steps__text p {
	margin: 0;
	color: inherit;
}

/* =========================================================
   Steps list
   ========================================================= */

.pr-steps__list {
	display: grid;
	align-content: start;
}

/* =========================================================
   Individual step
   ========================================================= */

.pr-steps__item {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 20px;
	padding: 26px 0;
	border-bottom:
		1px solid var(--pr-steps-divider);
}

.pr-steps__item:first-child {
	padding-top: 0;
}

.pr-steps__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* =========================================================
   Number
   ========================================================= */

.pr-steps__number {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 50%;
	background: var(--pr-steps-accent);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

/* =========================================================
   Step content
   ========================================================= */

.pr-steps__content {
	min-width: 0;
}

.pr-steps__item h3 {
	margin: 0;
	color: var(--pr-steps-text);
	font-size: clamp(21px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.pr-steps__item p {
	margin: 10px 0 0;
	color: var(--pr-steps-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.65;
}

/* =========================================================
   Reveal animation
   Uses the shared .pr-reveal rules from base.css
   ========================================================= */

.pr-steps__item.pr-reveal {
	transition:
		opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay:
		calc(var(--pr-step-index) * 70ms);
}

/* =========================================================
   Tablet
   Faithful breakpoint from the original section
   ========================================================= */

@media screen and (max-width: 899px) {
	.pr-steps {
		padding: 76px 0;
	}

	.pr-steps__shell {
		grid-template-columns: 1fr;
	}

	.pr-steps__header {
		max-width: 720px;
	}
}

/* =========================================================
   Mobile
   Faithful breakpoint from the original section
   ========================================================= */

@media screen and (max-width: 599px) {
	.pr-steps {
		padding: 56px 0;
	}

	.pr-steps__shell {
		gap: 36px;
		padding: 30px 22px;
		border-radius: 26px;
	}

	.pr-steps__heading {
		font-size: clamp(35px, 10vw, 48px);
	}

	.pr-steps__item {
		grid-template-columns: 46px 1fr;
		gap: 15px;
	}

	.pr-steps__number {
		width: 42px;
		height: 42px;
	}

	.pr-steps__item h3 {
		font-size: 21px;
	}

	.pr-steps__item p {
		font-size: 14px;
	}
}

/* =========================================================
   Very small screens
   ========================================================= */

@media screen and (max-width: 380px) {
	.pr-steps__shell {
		padding-right: 18px;
		padding-left: 18px;
	}

	.pr-steps__item {
		grid-template-columns: 42px 1fr;
		gap: 13px;
	}

	.pr-steps__number {
		width: 40px;
		height: 40px;
	}
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.pr-steps .pr-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}