/* Page-level compositions: home, feature, article, hub, auth, pricing. */

/* Home hero — typographic, no gradient blobs, one orchestrated moment */
.sr-hero {
	padding-block: var(--sr-9) var(--sr-8);
	background:
		linear-gradient(var(--sr-surface), var(--sr-surface)) padding-box,
		var(--sr-paper);
	border-bottom: 1px solid var(--sr-line);
}

.sr-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--sr-8);
	align-items: center;
}

.sr-hero h1 {
	font-size: var(--sr-step-5);
	line-height: 1.05;
	letter-spacing: -0.035em;
	margin-bottom: var(--sr-4);
	max-width: 16ch;
}

.sr-hero .sr-lede { margin-bottom: var(--sr-6); }

.sr-hero__actions {
	display: flex;
	gap: var(--sr-3);
	flex-wrap: wrap;
	margin-bottom: var(--sr-6);
}

/* The one page-load animation on the site: the chain draws once, left to right. */
.sr-hero__panel {
	background: var(--sr-ink);
	border-radius: var(--sr-radius-lg);
	padding: var(--sr-6);
	color: #e6edf3;
	box-shadow: var(--sr-shadow-lg);
}

.sr-hero__panel h2 {
	font-size: var(--sr-step--1);
	font-weight: 500;
	color: #8b949e;
	margin-bottom: var(--sr-5);
}

.sr-signal {
	display: grid;
	gap: var(--sr-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sr-signal li {
	display: grid;
	grid-template-columns: 1.5rem 1fr auto;
	gap: var(--sr-3);
	align-items: center;
	padding-bottom: var(--sr-4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	opacity: 0;
	transform: translateY(4px);
	animation: sr-signal-in 420ms ease-out forwards;
}

.sr-signal li:last-child { border-bottom: 0; padding-bottom: 0; }
.sr-signal li:nth-child(1) { animation-delay: 60ms; }
.sr-signal li:nth-child(2) { animation-delay: 180ms; }
.sr-signal li:nth-child(3) { animation-delay: 300ms; }
.sr-signal li:nth-child(4) { animation-delay: 420ms; }

@keyframes sr-signal-in {
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sr-signal li { opacity: 1; transform: none; animation: none; }
}

.sr-signal__bar {
	width: 100%;
	height: 26px;
	display: flex;
	align-items: flex-end;
	gap: 2px;
}

.sr-signal__bar i {
	display: block;
	width: 3px;
	background: var(--sr-beacon);
	border-radius: 1px;
}

.sr-signal strong {
	display: block;
	font-size: var(--sr-step--1);
	font-weight: 500;
	color: #fff;
}

.sr-signal span {
	display: block;
	font-size: var(--sr-step--1);
	color: #8b949e;
}

.sr-signal__value {
	font-family: var(--sr-font-mono);
	font-size: var(--sr-step--1);
	color: #e6edf3;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.sr-hero__grid { grid-template-columns: 1fr; gap: var(--sr-7); }
	.sr-hero h1 { max-width: none; }
}

/* Feature and product page hero */
.sr-page-hero {
	padding-block: var(--sr-8) var(--sr-6);
	background: var(--sr-surface);
	border-bottom: 1px solid var(--sr-line);
}

.sr-page-hero h1 { max-width: 20ch; }

/* Article layout: prose column plus a sticky contents rail */
.sr-article {
	/* Narrower than the full page width: the prose measure caps at ~68 characters, so a
	   1200px column would leave a dead gutter beside every paragraph while tables stretched
	   across it. */
	width: min(100% - 2.5rem, 1080px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 232px;
	gap: var(--sr-7);
	padding-block: var(--sr-6) var(--sr-9);
	align-items: start;
}

.sr-article__head { margin-bottom: var(--sr-6); }

.sr-article__head h1 {
	font-size: var(--sr-step-4);
	margin-bottom: var(--sr-4);
}

.sr-article__body { min-width: 0; }

@media (max-width: 1024px) {
	.sr-article { grid-template-columns: 1fr; gap: var(--sr-6); }
	.sr-toc {
		position: static;
		border-left: 0;
		border-top: 1px solid var(--sr-line);
		padding-left: 0;
		padding-top: var(--sr-4);
		max-height: none;
		order: -1;
	}
}

.sr-article__foot {
	margin-top: var(--sr-8);
	padding-top: var(--sr-5);
	border-top: 1px solid var(--sr-line);
}

.sr-sources {
	background: var(--sr-surface);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius-lg);
	padding: var(--sr-5);
	margin-top: var(--sr-6);
}

.sr-sources h2 { font-size: var(--sr-step-1); }

/* Resource hub */
.sr-hub-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--sr-8);
	align-items: end;
}

.sr-hub-search { margin-top: var(--sr-5); }

.sr-hub-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sr-3);
	list-style: none;
	margin: var(--sr-5) 0 0;
	padding: 0;
}

.sr-hub-stats li {
	min-width: 9rem;
	padding: var(--sr-3) var(--sr-4);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius);
	background: var(--sr-surface);
}

.sr-hub-stats strong,
.sr-hub-stats span {
	display: block;
}

.sr-hub-stats strong {
	font-size: var(--sr-step-0);
	color: var(--sr-ink);
}

.sr-hub-stats span {
	margin-top: var(--sr-1);
	font-size: var(--sr-step--1);
	color: var(--sr-mute);
}

.sr-hub-current {
	background:
		linear-gradient(135deg, rgba(15, 108, 126, 0.16), rgba(29, 78, 216, 0.08)) border-box,
		var(--sr-surface) padding-box;
	border: 1px solid transparent;
	border-radius: var(--sr-radius-lg);
	padding: var(--sr-5);
	box-shadow: var(--sr-shadow);
}

.sr-hub-current h2 {
	font-size: var(--sr-step-1);
	margin-bottom: var(--sr-4);
}

.sr-hub-current ol {
	list-style: none;
	display: grid;
	gap: var(--sr-3);
	margin: 0;
	padding: 0;
	counter-reset: sr-hub-current;
}

.sr-hub-current li {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: var(--sr-3);
	align-items: start;
	color: var(--sr-graphite);
	font-size: var(--sr-step--1);
	line-height: 1.45;
	counter-increment: sr-hub-current;
}

.sr-hub-current li::before {
	content: counter(sr-hub-current);
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--sr-beacon-soft);
	color: var(--sr-beacon-deep);
	font-family: var(--sr-font-mono);
	font-size: 0.78rem;
}

.sr-hub-brief {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--sr-6);
	padding-block: var(--sr-7) var(--sr-5);
	border-bottom: 1px solid var(--sr-line);
}

.sr-hub-brief h2 {
	font-size: var(--sr-step-2);
	margin: 0;
}

.sr-hub-brief__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sr-4);
}

.sr-hub-brief article {
	padding: var(--sr-4);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius);
	background: var(--sr-surface);
}

.sr-hub-brief h3 {
	font-size: var(--sr-step-0);
	margin-bottom: var(--sr-2);
}

.sr-hub-brief p {
	color: var(--sr-graphite);
	font-size: var(--sr-step--1);
	margin: 0;
}

.sr-section__head--compact {
	margin-bottom: var(--sr-4);
}

.sr-section__head--compact h2 {
	font-size: var(--sr-step-2);
}

.sr-section__head--compact p {
	color: var(--sr-graphite);
	margin: 0;
}

.sr-source-list {
	display: grid;
	gap: var(--sr-2);
	margin: 0;
	padding-left: 1.1rem;
}

.sr-source-list a {
	color: var(--sr-graphite);
}

.sr-hub__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sr-2);
	padding-block: var(--sr-5);
	border-bottom: 1px solid var(--sr-line);
}

.sr-hub__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: var(--sr-8);
	padding-block: var(--sr-6) var(--sr-9);
	align-items: start;
}

.sr-rail {
	position: sticky;
	top: 6rem;
	display: grid;
	gap: var(--sr-5);
}

@media (max-width: 1024px) {
	.sr-hub-hero,
	.sr-hub-brief {
		grid-template-columns: 1fr;
		gap: var(--sr-5);
	}

	.sr-hub__layout { grid-template-columns: 1fr; }
	.sr-rail { position: static; }
}

@media (max-width: 640px) {
	.sr-hub-stats,
	.sr-hub-brief__grid {
		grid-template-columns: 1fr;
	}

	/* Three stacked cards with the label on its own line cost most of a phone screen before the
	   reader reaches anything. Same facts, one line each. */
	.sr-hub-stats {
		display: grid;
		gap: var(--sr-2);
	}

	.sr-hub-stats li {
		display: flex;
		align-items: baseline;
		gap: var(--sr-2);
		padding: var(--sr-2) var(--sr-3);
	}

	.sr-hub-stats strong,
	.sr-hub-stats span {
		display: inline;
	}

	.sr-hub-stats span {
		margin-top: 0;
	}

}

/* Resource hub — the crawled/cited vocabulary strip */
.sr-chain {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--sr-6);
	padding-block: var(--sr-7);
	border-bottom: 1px solid var(--sr-line);
}

.sr-chain__intro h2 {
	font-size: var(--sr-step-2);
	margin: 0 0 var(--sr-3);
}

.sr-chain__intro p {
	color: var(--sr-graphite);
	font-size: var(--sr-step--1);
	margin: 0;
}

.sr-chain__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--sr-3);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: sr-chain;
}

.sr-chain__step {
	position: relative;
	display: grid;
	gap: var(--sr-1);
	align-content: start;
	padding: var(--sr-4) var(--sr-4) var(--sr-4) var(--sr-5);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius);
	background: var(--sr-surface);
	counter-increment: sr-chain;
}

/* The rail down the left edge reads as a sequence without needing arrows between cards, which
   would point the wrong way as soon as the grid wraps to a second row. */
.sr-chain__step::before {
	content: "";
	position: absolute;
	inset: var(--sr-3) auto var(--sr-3) 0;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--sr-beacon);
	opacity: 0.55;
}

.sr-chain__term {
	font-weight: 600;
	font-size: var(--sr-step-0);
	color: var(--sr-ink);
}

.sr-chain__term::before {
	content: counter(sr-chain) ". ";
	font-family: var(--sr-font-mono);
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--sr-mute);
}

.sr-chain__detail {
	color: var(--sr-graphite);
	font-size: var(--sr-step--1);
	line-height: 1.5;
}

/* Resource hub — the curated library */
.sr-library {
	display: grid;
	gap: var(--sr-7);
	padding-block: var(--sr-7);
	border-bottom: 1px solid var(--sr-line);
}

.sr-library__head {
	max-width: var(--sr-measure);
	margin-bottom: var(--sr-5);
}

.sr-library__head h2 {
	font-size: var(--sr-step-2);
	margin: 0 0 var(--sr-2);
	scroll-margin-top: 6rem;
}

.sr-library__head p {
	margin: 0;
	color: var(--sr-graphite);
	font-size: var(--sr-step--1);
	line-height: 1.6;
}

.sr-guides {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: var(--sr-4);
}

.sr-guide {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sr-2);
	padding: var(--sr-4);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius);
	background: var(--sr-surface);
	transition: border-color var(--sr-motion), box-shadow var(--sr-motion);
}

.sr-guide:hover,
.sr-guide:focus-within {
	border-color: var(--sr-line-strong);
	box-shadow: var(--sr-shadow);
}

.sr-guide__title {
	font-size: var(--sr-step-0);
	line-height: 1.35;
	margin: 0;
}

.sr-guide__title a {
	color: var(--sr-ink);
	text-decoration: none;
}

.sr-guide__title a:hover {
	color: var(--sr-beacon-deep);
	text-decoration: underline;
}

/* The whole card is the target, so the pointer and the keyboard agree about its size, but the
   link itself stays the only focusable thing in it. */
.sr-guide__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Authored excerpts vary from one line to five. Clamping shows a consistent block and breaks at
   a line rather than mid-word, which is what `wp_trim_words` was doing. The full text stays in
   the markup for anything that does not paint, print included. */
.sr-guide__summary {
	margin: 0;
	color: var(--sr-graphite);
	font-size: var(--sr-step--1);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

/* Pushed to the bottom so the source-check date sits on one baseline across a row, however
   many lines the title above it took. */
.sr-guide__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sr-2);
	margin: auto 0 0;
	padding-top: var(--sr-3);
	font-size: 0.78rem;
	color: var(--sr-mute);
}

.sr-guide__topic {
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius-sm);
	background: var(--sr-surface-sunk);
	color: var(--sr-graphite);
}

.sr-guide__checked {
	font-family: var(--sr-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.01em;
}

.sr-guide--featured {
	border-top: 2px solid var(--sr-beacon);
	padding-top: calc(var(--sr-4) - 1px);
}

.sr-guide__step {
	font-family: var(--sr-font-mono);
	font-size: 0.72rem;
	color: var(--sr-beacon-deep);
}

.sr-guides--start {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Rail */
.sr-rail__links {
	display: grid;
	gap: var(--sr-2);
	margin: 0;
	padding-left: 1.1rem;
	font-size: var(--sr-step--1);
}

.sr-rail__links--plain {
	list-style: none;
	padding-left: 0;
	color: var(--sr-graphite);
	line-height: 1.5;
}

.sr-rail__links--plain li {
	padding-left: var(--sr-4);
	position: relative;
}

.sr-rail__links--plain li::before {
	content: "\2013";
	position: absolute;
	left: 0;
	color: var(--sr-mute);
}

.sr-card--limits {
	background: var(--sr-surface-sunk);
}

.sr-card__note {
	color: var(--sr-graphite);
	font-size: var(--sr-step--1);
}

.sr-chip__count {
	margin-left: 0.4rem;
	font-family: var(--sr-font-mono);
	font-size: 0.7rem;
	color: var(--sr-mute);
}

.sr-chip[aria-current="page"] .sr-chip__count {
	color: inherit;
	opacity: 0.75;
}

/* These belong after the rules above, not in the shared breakpoint blocks earlier in this file:
   those blocks sit above these components, and at equal specificity the later base rule wins. */
@media (max-width: 1024px) {
	.sr-chain {
		grid-template-columns: 1fr;
		gap: var(--sr-5);
	}
}

@media (max-width: 640px) {
	.sr-chain__list,
	.sr-guides,
	.sr-guides--start {
		grid-template-columns: 1fr;
	}

	.sr-library {
		gap: var(--sr-6);
	}

	.sr-library__head {
		margin-bottom: var(--sr-4);
	}
}

/* Pricing */
.sr-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sr-4);
	align-items: start;
}

.sr-plan {
	background: var(--sr-surface);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius-lg);
	padding: var(--sr-5);
	display: grid;
	gap: var(--sr-3);
}

.sr-plan--featured {
	border-color: var(--sr-ink);
	box-shadow: var(--sr-shadow);
}

.sr-plan__price {
	font-size: var(--sr-step-2);
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* The billing period rides at body weight beside the amount, so "$19.99" stays the figure the
   eye lands on rather than competing with "/month". */
.sr-plan__period {
	font-size: var(--sr-step--1);
	font-weight: 400;
	color: var(--sr-mute);
	letter-spacing: 0;
}

.sr-plan__price small {
	display: block;
	font-size: var(--sr-step--1);
	font-weight: 400;
	color: var(--sr-mute);
	letter-spacing: 0;
}

.sr-plan ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sr-2);
	font-size: var(--sr-step--1);
}

.sr-plan li { padding-left: 1.25rem; position: relative; }

.sr-plan li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sr-beacon);
}

/* Auth pages (rendered by the plugin, styled here) */
.sr-auth-body {
	min-height: 100dvh;
	display: grid;
	place-items: center;
	background: var(--sr-paper);
	padding: var(--sr-5);
}

.sr-auth { width: min(100%, 420px); display: grid; gap: var(--sr-5); }

.sr-auth__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sr-2);
	font-weight: 600;
	color: var(--sr-ink);
	text-decoration: none;
	justify-self: center;
}

.sr-auth__card {
	background: var(--sr-surface);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius-lg);
	padding: var(--sr-6);
	box-shadow: var(--sr-shadow);
}

.sr-auth__card h1 { font-size: var(--sr-step-2); }

.sr-auth__lede {
	color: var(--sr-graphite);
	font-size: var(--sr-step--1);
	margin-bottom: var(--sr-5);
}

.sr-auth__form { display: grid; gap: var(--sr-2); }

.sr-auth__form label {
	font-size: var(--sr-step--1);
	font-weight: 500;
	margin-top: var(--sr-2);
}

.sr-auth__form input[type="text"],
.sr-auth__form input[type="email"],
.sr-auth__form input[type="password"] {
	font: inherit;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--sr-line-strong);
	border-radius: var(--sr-radius);
	background: var(--sr-surface);
	color: var(--sr-ink);
}

.sr-auth__check {
	display: flex;
	align-items: center;
	gap: var(--sr-2);
	font-size: var(--sr-step--1);
	font-weight: 400;
	color: var(--sr-graphite);
}

.sr-auth__submit {
	margin-top: var(--sr-4);
	padding: 0.7rem 1rem;
	border: 0;
	border-radius: var(--sr-radius);
	background: var(--sr-ink);
	color: #fff;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.sr-auth__submit:hover { background: var(--sr-beacon-deep); }

.sr-auth__error {
	background: var(--sr-critical-soft);
	color: var(--sr-critical);
	border-radius: var(--sr-radius);
	padding: var(--sr-3);
	font-size: var(--sr-step--1);
	margin-bottom: var(--sr-4);
}

.sr-auth__notice {
	background: var(--sr-good-soft);
	color: var(--sr-good);
	border-radius: var(--sr-radius);
	padding: var(--sr-3);
	font-size: var(--sr-step--1);
	margin-bottom: var(--sr-4);
}

.sr-auth__alt,
.sr-auth__fine {
	font-size: var(--sr-step--1);
	color: var(--sr-mute);
	text-align: center;
	margin-top: var(--sr-4);
	margin-bottom: 0;
}

.sr-auth__facts { display: grid; grid-template-columns: auto 1fr; gap: var(--sr-2) var(--sr-4); font-size: var(--sr-step--1); }
.sr-auth__facts dt { color: var(--sr-mute); }
.sr-auth__facts dd { margin: 0; }

.sr-gate {
	max-width: 480px;
	margin: 20vh auto;
	padding: var(--sr-5);
	text-align: center;
}

/* 404 and empty states */
.sr-empty {
	text-align: center;
	padding-block: var(--sr-9);
	max-width: 52ch;
	margin-inline: auto;
}

.sr-empty h1 { font-size: var(--sr-step-3); }

/* ============================================================================
 * From SEO to GEO — the interactive stage flow.
 *
 * A tablist wearing a flow chart. The rail is horizontal on desktop and vertical on mobile,
 * and the connector between nodes carries the only gradient on the page: it marks how far
 * through the flow the reader has gone, which is information, not decoration.
 *
 * Without JavaScript every panel is visible and the section reads as seven sequential
 * explanations, so the content never depends on the interaction.
 * ============================================================================ */

.sr-journey__layout {
	display: grid;
	gap: var(--sr-6);
}

/* --- The rail ------------------------------------------------------------- */

.sr-journey__rail {
	position: relative;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--sr-2);
	padding-top: var(--sr-5);
}

/* The connector sits behind the nodes, aligned with their markers. */
.sr-journey__track {
	position: absolute;
	top: calc(var(--sr-5) + 15px);
	left: 7%;
	right: 7%;
	height: 2px;
	background: var(--sr-line);
	border-radius: 1px;
	overflow: hidden;
}

.sr-journey__progress {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 1px;
	background: linear-gradient(90deg, var(--sr-beacon-line), var(--sr-beacon));
	transition: width 320ms cubic-bezier(0.2, 0, 0.2, 1);
}

.sr-journey__node {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--sr-2);
	padding: 0 var(--sr-2) var(--sr-3);
	border: 0;
	background: none;
	font: inherit;
	text-align: center;
	cursor: pointer;
	color: var(--sr-graphite);
	border-radius: var(--sr-radius);
	transition: color var(--sr-motion);
}

.sr-journey__node:hover { color: var(--sr-ink); }

.sr-journey__marker {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--sr-line-strong);
	background: var(--sr-paper);
	font-family: var(--sr-font-mono);
	font-size: 0.72rem;
	color: var(--sr-mute);
	transition: border-color var(--sr-motion), background var(--sr-motion), color var(--sr-motion);
}

.sr-journey__node:hover .sr-journey__marker { border-color: var(--sr-beacon-line); }

/* A visited node keeps a filled marker, so the rail reads as a path already walked. */
.sr-journey__node.is-visited .sr-journey__marker {
	border-color: var(--sr-beacon-line);
	background: var(--sr-beacon-soft);
	color: var(--sr-beacon-deep);
}

.sr-journey__node.is-active .sr-journey__marker {
	border-color: var(--sr-beacon);
	background: var(--sr-beacon);
	color: #fff;
}

/* The active node needs to read as chosen without a focus ring present, so it takes a quiet
   tinted surface rather than relying on the marker alone. */
.sr-journey__node.is-active {
	color: var(--sr-ink);
	background: var(--sr-beacon-soft);
}

.sr-journey__node.is-active .sr-journey__node-label { color: var(--sr-beacon-deep); }

.sr-journey__node-label {
	font-size: var(--sr-step--1);
	font-weight: 500;
	line-height: 1.3;
	max-width: 15ch;
}

.sr-journey__node.is-active .sr-journey__node-label { font-weight: 600; }

/* The badge is a category, not a grade, so it stays quiet until its node is chosen. */
.sr-journey__node-badge {
	opacity: 0;
	transition: opacity var(--sr-motion);
}

.sr-journey__node.is-active .sr-journey__node-badge { opacity: 1; }

/* --- The panel ------------------------------------------------------------ */

/*
 * Panels stack when scripts have not run, and become a single swapped view once the tab
 * behaviour is attached. The `is-interactive` class is added by JavaScript, so the no-script
 * rendering is the default rather than something restored after a failure.
 */
.sr-journey__layout.is-interactive .sr-journey__panel + .sr-journey__panel { margin-top: 0; }

.sr-journey__panel {
	background: var(--sr-surface);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius-lg);
	padding: var(--sr-6);
}

.sr-journey__panel + .sr-journey__panel { margin-top: var(--sr-4); }

.sr-journey__panel:focus-visible {
	outline: 2px solid var(--sr-beacon);
	outline-offset: 2px;
}

.sr-journey__panel-head { margin-bottom: var(--sr-5); }

.sr-journey__panel-head h3 {
	font-size: var(--sr-step-2);
	margin-bottom: var(--sr-2);
}

.sr-journey__status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sr-2);
	margin: 0;
	font-size: var(--sr-step--1);
	color: var(--sr-mute);
}

.sr-journey__body {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	gap: var(--sr-7);
	align-items: start;
}

.sr-journey__facts {
	display: grid;
	gap: var(--sr-5);
	margin: 0;
}

.sr-journey__facts dt {
	font-size: var(--sr-step--1);
	font-weight: 600;
	color: var(--sr-beacon-deep);
	margin-bottom: var(--sr-2);
}

.sr-journey__facts dd {
	margin: 0;
	color: var(--sr-graphite);
}

.sr-journey__aside {
	display: grid;
	gap: var(--sr-4);
	padding-left: var(--sr-6);
	border-left: 1px solid var(--sr-line);
}

.sr-journey__caution {
	margin: 0;
	padding: var(--sr-3) var(--sr-4);
	border-left: 3px solid var(--sr-tier-emerging);
	background: var(--sr-surface-sunk);
	border-radius: 0 var(--sr-radius) var(--sr-radius) 0;
	font-size: var(--sr-step--1);
	color: var(--sr-graphite);
}

.sr-journey__caution strong {
	display: block;
	color: var(--sr-ink);
}

.sr-journey__more {
	margin: 0;
	font-size: var(--sr-step--1);
}

/* --- Closing call to action ---------------------------------------------- */

.sr-journey__cta {
	margin-top: var(--sr-6);
	padding-top: var(--sr-5);
	border-top: 1px solid var(--sr-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sr-4);
}

.sr-journey__cta p {
	margin: 0;
	color: var(--sr-graphite);
	max-width: 60ch;
}

.sr-journey__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sr-2);
}

/* --- Narrow screens ------------------------------------------------------- */

@media (max-width: 900px) {
	/* The flow becomes a vertical list, with the connector running down its left edge. */
	.sr-journey__rail {
		grid-template-columns: 1fr;
		gap: 0;
		padding-top: 0;
	}

	.sr-journey__track {
		top: 20px;
		bottom: 20px;
		left: 15px;
		right: auto;
		width: 2px;
		height: auto;
	}

	.sr-journey__progress {
		width: 100%;
		height: 0;
		transition: height 320ms cubic-bezier(0.2, 0, 0.2, 1);
	}

	.sr-journey__node {
		grid-template-columns: 32px minmax(0, 1fr);
		justify-items: start;
		align-items: center;
		gap: var(--sr-3);
		padding: var(--sr-2) var(--sr-2) var(--sr-2) 0;
		text-align: left;
	}

	.sr-journey__node-label {
		max-width: none;
		font-size: var(--sr-step-0);
	}

	/* Two rows, so a long label never has to share its line with the badge. */
	.sr-journey__node-badge {
		grid-column: 2;
		opacity: 1;
	}

	.sr-journey__node:not(.is-active) .sr-journey__node-badge { opacity: 0.55; }

	.sr-journey__panel { padding: var(--sr-5); }

	/* The caution follows the facts rather than sitting beside them. */
	.sr-journey__body {
		grid-template-columns: 1fr;
		gap: var(--sr-5);
	}

	.sr-journey__aside {
		padding-left: 0;
		border-left: 0;
	}

	.sr-journey__cta { display: grid; }
}

@media (max-width: 480px) {
	.sr-journey__cta-actions { display: grid; }
	.sr-journey__cta-actions .sr-btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.sr-journey__progress { transition: none; }
}