/**
 * Safe Steps series list and in-guide section links.
 * Text stays in Total’s container. No page wash, no 100vw, no zoom.
 */

.erc-safe-steps,
.erc-safe-steps-sections {
	--ss-navy: #282a67;
	--ss-red: #e01a4f;
	--ss-dark: #181933;
	--ss-line: #e3e4ea;
	--ss-white: #ffffff;
	--ss-body: "Plus Jakarta Sans", system-ui, sans-serif;
	color: var(--ss-dark);
	font-family: var(--ss-body);
}

.erc-safe-steps :focus-visible,
.erc-safe-steps-sections :focus-visible {
	outline: 2px solid var(--ss-navy);
	outline-offset: 3px;
}

.erc-safe-steps {
	margin: 8px 0 48px;
}

.erc-safe-steps__list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.erc-safe-steps__item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	margin: 0;
	padding: 20px 24px;
	border: 1px solid var(--ss-line);
	border-radius: 8px;
	background: var(--ss-white);
}

.erc-safe-steps__thumb {
	width: 96px;
	height: 96px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--ss-white);
}

.erc-safe-steps__img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
}

.erc-safe-steps__copy {
	min-width: 0;
}

.erc-safe-steps__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border: 2px solid var(--ss-navy);
	border-radius: 8px;
	background: var(--ss-white);
	color: var(--ss-navy);
	font-family: var(--ss-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.erc-safe-steps__button:hover,
.erc-safe-steps__button:focus-visible {
	background: var(--ss-navy);
	color: var(--ss-white);
}

.erc-safe-steps__soon {
	margin: 0;
	color: var(--ss-navy);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.erc-safe-steps__item--soon {
	border-style: dotted;
}

.erc-safe-steps__item--soon .erc-safe-steps__thumb {
	border: 1px solid var(--ss-line);
}

@media (max-width: 767px) {
	.erc-safe-steps__item {
		grid-template-columns: 72px minmax(0, 1fr);
	}

	.erc-safe-steps__thumb,
	.erc-safe-steps__img {
		width: 72px;
		height: 72px;
	}

	.erc-safe-steps__button {
		grid-column: 1 / -1;
		justify-self: end;
	}
}

.erc-safe-steps__link {
	color: var(--ss-navy);
	font-family: var(--ss-body);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.erc-safe-steps__link:hover,
.erc-safe-steps__link:focus-visible {
	color: var(--ss-red);
}

.erc-safe-steps__item.is-current .erc-safe-steps__link {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.erc-safe-steps__summary {
	margin: 8px 0 0;
	color: var(--ss-dark);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.erc-safe-steps-sections {
	margin: 0 0 8px;
}

.erc-safe-steps-sections__label {
	margin: 0 0 10px;
	color: var(--ss-navy);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.erc-safe-steps-sections__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--ss-line);
	list-style: none;
}

.erc-safe-steps-sections__link {
	color: var(--ss-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.erc-safe-steps-sections__link:hover,
.erc-safe-steps-sections__link:focus-visible {
	color: var(--ss-red);
}

.erc-safe-steps-sections__link.is-current {
	color: var(--ss-navy);
	text-decoration-thickness: 2px;
}

#support-that-sees-the-whole-person,
#what-the-guide-covers {
	scroll-margin-top: 120px;
}