/* Telesheds Custom – Section Intro */

.tsc-intro {
	--tsc-green: var(--primary-green, #24918A);
	--tsc-dark: var(--heading-dark, #261C01);
	--tsc-muted: var(--paragraph-lite, #261C0199);
	--tsc-soft: var(--icon-bg, #C7DED6);
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 760px;
	font-family: "Poppins", sans-serif;
}

.tsc-intro,
.tsc-intro * { box-sizing: border-box; }

.tsc-intro--center {
	align-items: center;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.tsc-intro--left { align-items: flex-start; text-align: left; }

/* Eyebrow with short rules either side */
.tsc-intro__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tsc-green);
}

.tsc-intro--center .tsc-intro__eyebrow::before,
.tsc-intro__eyebrow::after {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: .5;
}

.tsc-intro__heading {
	margin: 0;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.8px;
	color: var(--tsc-dark);
}

.tsc-intro__text {
	max-width: 56ch;
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--tsc-muted);
}

/* Numbered steps */
.tsc-intro__steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: inherit;
	align-items: center;
	gap: 10px 0;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.tsc-intro--center .tsc-intro__steps { justify-content: center; }

.tsc-intro__step {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--tsc-dark);
}

.tsc-intro__step + .tsc-intro__step::before {
	content: "";
	width: 40px;
	height: 1px;
	margin: 0 16px;
	background: var(--tsc-soft);
}

.tsc-intro__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--tsc-green);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}

/* Good-to-know note */
.tsc-intro__note {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 24px;
	padding: 12px 18px;
	background: var(--page-bg, #F9FAF3);
	border: 1px solid rgba(36, 145, 138, 0.22);
	border-radius: 10px;
	text-align: left;
}

.tsc-intro__note-icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--tsc-green);
}

.tsc-intro__note-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tsc-muted);
}

.tsc-intro__note-text strong {
	font-weight: 600;
	color: var(--tsc-dark);
}

.tsc-intro__note-link {
	color: var(--tsc-green);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.tsc-intro__note-link:hover { color: var(--dark-green, #0B2B29); }

.tsc-intro .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.tsc-intro__heading { font-size: 32px; }
	.tsc-intro__text { font-size: 15px; }
	.tsc-intro__steps {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		margin-top: 22px;
	}
	/* the list itself stays centred (flex child); items line up on the left */
	.tsc-intro--center .tsc-intro__steps { align-items: flex-start; }
	.tsc-intro__step + .tsc-intro__step::before { display: none; }
}

@media (max-width: 478px) {
	.tsc-intro__heading { font-size: 26px; }
}