:root {
	--color-text-primary: #404040;
	--color-accent-blue: #0099E5;
	--color-border-gray: #D4D4D4;
}

body {
	color: var(--color-text-primary);
}

p {
	line-height: normal;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
	margin-bottom: 0.2em;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}

h1, h2 {
	font-size: 1.75rem;
	margin-bottom: -5px;
}

h1 {
	color: #009ADE;
	font-size: 2.25rem;
	margin-bottom: 0px;
}

h2 {
	color: #274F63;
	font-size: 1.75rem;
	margin-bottom: -5px;
	margin-top: 10px;
	padding: 0 0 10px 0;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.2em;
	font-weight: normal;
}

:target {
	background: none; /* override highlighting*/
}

.nav-tabs .nav-link {
	border: none;
	color: var(--color-text-primary);
	font-weight: 700;
}

	.nav-tabs .nav-link:hover {
		text-decoration: none;
	}

	.nav-tabs .nav-link.active {
		border: none;
		border-bottom: 3px solid var(--color-accent-blue);
		color: var(--color-accent-blue) !important;
		font-weight: 700;
		padding-bottom: 4px;
	}

.tab-section .tab-content p {
	margin: 0;
	align-self: center;
}

.accordion-section {
	display: none;
	margin-bottom: 30px;
}

	.accordion-section .accordion-header {
		margin: 0;
		padding: 0;
	}

		.accordion-section .accordion-header button.accordion-button:hover {
			background-color: #eaf3ff;
		}

	.accordion-section .accordion-body {
		border: 1px solid #dee2e6;
	}

.developer-resources-tab-icon {
	width: 100px;
	height: auto;
	flex-shrink: 0;
}

.curve {
	padding-top: 13px; /*tweak if needed*/
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: -1;
	width: 100%;
}

	.curve svg {
		display: block;
		margin: 0 auto;
		width: 300px; /*tweak if needed*/
		height: auto;
		padding-top: 52px; /*tweak if needed*/
		padding-bottom: 0px;
	}

.badgeMobile {
	display: none;
}

.badge { /*tweak if needed*/
	width: 65px;
	height: 65px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 10px solid var(--color-border-gray);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: bold;
	color: var(--color-text-primary);
	flex-shrink: 0;
	margin-right: 30px;
	margin-left: 30px;
}


/*Stepper*/
.stepper-rows {
	position: relative;
	display: grid;
	grid-template-rows: auto auto; /* row 1: circles, row 2: labels */
	grid-template-columns: repeat(5, 1fr); /* one column per step */
	gap: 0;
	margin-bottom: 40px;
}

.stepper-circles {
	grid-row: 1;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: inherit; /* same 5 equal columns */
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	z-index: 1; /* circles above the line */
}

	.stepper-circles li {
		display: flex;
		justify-content: center;
	}

.step-dot {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #4DB7E7;
	color: #3C5F71;
	display: grid;
	place-items: center;
	font-weight: 600;
	font-size: 1.25rem;
}

/* The connector line sits between rows, then we pull it up with a negative margin */
.stepper-line {
	grid-row: 1;
	grid-column: 1 / -1;
	height: 3px;
	background: #4DB7E7;
	margin-top: 16px;
	margin-inline: calc(100% / 10);
	z-index: 0;
}

/* Row 2: labels (aligned with columns) */
.stepper-labels {
	grid-row: 2;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: inherit;
	list-style: none;
	padding: 0;
	margin: 10px 0 0; /* space under circles */
}

	.stepper-labels li {
		text-align: center;
		color: var(--color-text-primary);
		font-weight: 600;
		font-size: 12px;
		line-height: 1.25;
		padding: 0 6px;
		white-space: normal; /* allow wrapping */
		word-break: break-word;
	}

/* ============ MOBILE: swap to vertical stepper ============ */
.stepper-vertical {
	display: none;
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 640px) {
	/* Hide the two-row layout, show the vertical one */
	.stepper-rows {
		display: none;
	}

	.stepper-vertical {
		display: block;
	}

		.stepper-vertical li {
			position: relative;
			display: flex;
			align-items: center;
			gap: 10px;
			padding-bottom: 16px;
		}

			/* Vertical connector line */
			.stepper-vertical li::after {
				content: "";
				position: absolute;
				left: 17px;
				top: 34px;
				bottom: 0;
				width: 2px;
				background: var(--color-border-gray);
			}

			.stepper-vertical li:last-child::after {
				content: none;
			}

		.stepper-vertical .step-dot {
			flex: 0 0 auto;
		}

		.stepper-vertical .step-text {
			color: var(--color-text-primary);
			font-weight: 600;
			font-size: 14px;
			line-height: 1.25;
		}

	.developer-resources-tab-icon {
		display: none;
	}
}

.stepRow {
	display: flex;
	align-items: start;
	height: 455px; /*tweak if needed*/
	scroll-margin-top: 50px;
}

	.stepRow#step-5 {
		margin-bottom: -100px
	}

.stepImageLeft {
	width: 313px;
	height: auto;
	box-sizing: border-box; /* keeps total size at 300x300 */
	flex-shrink: 0;
}

	.stepImageLeft img {
		width: 100%;
		height: auto; /* keep aspect ratio */
		object-fit: cover; /* scale to fill width, may crop */
		object-position: top; /* pin to the top */
		display: block; /* removes extra whitespace below img */
	}

.stepImageRight {
	width: 250px;
	height: 300px;
	box-sizing: border-box; /* keeps total size at 300x300 */
	flex-shrink: 0;
}

	.stepImageRight img {
		width: 100%;
		height: auto; /* keep aspect ratio */
		object-fit: cover; /* scale to fill width, may crop */
		object-position: top; /* pin to the top */
		display: block; /* removes extra whitespace below img */
	}


.stepCard {
	padding-top: 20px;
	height: 300px;
}

	.stepCard h3 {
		margin: 0 0 8px;
		font-size: 20px;
		letter-spacing: .2px;
	}

	.stepCard p {
		margin: 0 0 5px;
		line-height: 1.5;
		color: var(--color-text-primary);
		font-size: 12px;
	}

.imageMobile {
	display: none;
}

@media (max-width: 1050px) {
	.tab-section {
		display: none;
	}

	.accordion-section {
		display: block;
	}

	.stepImageRight {
		display: none;
	}

	.stepImageLeft {
		display: none;
	}

	.curve {
		display: none;
	}

	.badge {
		display: none;
	}

	.badgeMobile {
		display: inline;
		padding-right: 5px;
	}

	.stepRow {
		height: unset;
		margin-bottom: 15px;
		flex-direction: column;
	}

		.stepRow#step-5 {
			margin-bottom: 0;
		}

	.stepCard {
		height: unset;
	}

	.imageMobile {
		display: block;
		width: 313px;
		max-width: 100%;
	}
}