/* W3 Journey Engine frontend.
 * All category-hub styles are scoped under .w3j-hub to avoid touching the theme header/footer.
 */

.w3j-top,
.w3j-next,
.w3j-router {
	--w3j-border: #e3e6e8;
	--w3j-muted: #5f6b76;
	--w3j-bg: #f7f8f9;
	--w3j-text: inherit;
	border: 1px solid var(--w3j-border);
	border-radius: 10px;
	background: var(--w3j-bg);
	color: var(--w3j-text);
}
.w3j-top { margin: 0 0 24px; padding: 16px 18px; }
.w3j-top__meta { display:flex; gap:12px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.w3j-top__label { font-weight:700; }
.w3j-top__position,
.w3j-top__stage,
.w3j-next__eyebrow,
.w3j-router__eyebrow { color:var(--w3j-muted); font-size:.9em; }
.w3j-top__stage { margin-top:6px; }
.w3j-progress { height:6px; border-radius:999px; overflow:hidden; background:#dfe3e6; margin-top:12px; }
.w3j-progress span { display:block; height:100%; background:currentColor; opacity:.55; }
.w3j-next { margin:32px 0 0; padding:18px; }
.w3j-next__grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.w3j-next__item { min-width:0; }
.w3j-next__item--next { text-align:right; }
.w3j-next__eyebrow { display:block; margin-bottom:4px; }
.w3j-next__link { font-weight:700; text-decoration:none; }
.w3j-next__current { font-weight:600; }
.w3j-next__cta { border-top:1px solid var(--w3j-border); margin-top:16px; padding-top:16px; }
.w3j-button { display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:8px; text-decoration:none; border:1px solid currentColor; font-weight:700; }
.w3j-router { margin:24px 0 32px; padding:20px; }
.w3j-router__head h2 { margin:2px 0 16px; }
.w3j-router__eyebrow { margin:0; }
.w3j-router__steps { margin:0; padding-left:24px; }
.w3j-router__steps li { margin:0 0 10px; }
.w3j-router__steps a { text-decoration:none; }
.w3j-router__steps small { display:block; color:var(--w3j-muted); }

/* Category Journey Hub */
.w3j-hub {
	--w3j-accent: #1769e0;
	--w3j-accent-deep: #0c4fb7;
	--w3j-ink: #10213e;
	--w3j-muted: #617089;
	--w3j-line: #e4ebf5;
	--w3j-soft: #f5f8fd;
	--w3j-soft-blue: #eef5ff;
	--w3j-card: #ffffff;
	--w3j-positive: #118a58;
	--w3j-warning: #d67a00;
	color: var(--w3j-ink);
	background: #fff;
	padding: 0 0 56px;
}
.w3j-hub *,
.w3j-hub *::before,
.w3j-hub *::after {
	box-sizing: border-box;
}
.w3j-hub a {
	color: inherit;
}
.w3j-hub svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.w3j-hub__container {
	width: min(1180px, calc(100% - 32px));
	margin: 0 auto;
}
.w3j-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 18px 0;
	color: var(--w3j-muted);
	font-size: 14px;
}
.w3j-breadcrumb a {
	text-decoration: none;
}
.w3j-breadcrumb a:hover {
	color: var(--w3j-accent);
}
.w3j-kicker {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 7px;
	color: var(--w3j-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.w3j-kicker svg {
	width: 18px;
	height: 18px;
}
.w3j-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
	min-height: 330px;
	border: 1px solid #dfeafb;
	border-radius: 18px;
	overflow: hidden;
	background:
		radial-gradient(circle at 77% 42%, rgba(23,105,224,.13), transparent 30%),
		linear-gradient(118deg, #f7fbff 0%, #f4f8ff 58%, #eef5ff 100%);
}
.w3j-hero__copy {
	padding: 42px 44px 38px;
	align-self: center;
	min-width: 0;
}
.w3j-hero h1 {
	margin: 0;
	color: var(--w3j-ink);
	font-size: clamp(34px, 4vw, 54px);
	line-height: 1.08;
	letter-spacing: -.025em;
}
.w3j-hero__description {
	max-width: 680px;
	margin: 18px 0 0;
	color: #43526a;
	font-size: 17px;
	line-height: 1.75;
}
.w3j-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin-top: 30px;
}
.w3j-stat {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 125px;
}
.w3j-stat__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	color: var(--w3j-accent);
	background: rgba(255,255,255,.76);
	border: 1px solid rgba(23,105,224,.16);
}
.w3j-stat__icon svg {
	width: 22px;
	height: 22px;
}
.w3j-stat span:last-child {
	display: flex;
	flex-direction: column;
}
.w3j-stat strong {
	font-size: 19px;
	line-height: 1.2;
}
.w3j-stat small {
	margin-top: 3px;
	color: var(--w3j-muted);
	font-size: 12px;
}
.w3j-hero__visual {
	display: grid;
	place-items: center;
	min-width: 0;
	padding: 20px 32px 18px 0;
	color: var(--w3j-accent);
}
.w3j-hero__visual svg {
	width: min(100%, 500px);
	height: auto;
	overflow: visible;
}
.w3j-viz-card {
	fill: rgba(255,255,255,.66);
	stroke: rgba(23,105,224,.18);
	stroke-width: 2;
}
.w3j-viz-lock {
	fill: white;
	opacity: .94;
}
.w3j-viz-line {
	fill: rgba(23,105,224,.18);
}
.w3j-viz-dot {
	fill: rgba(23,105,224,.56);
}

.w3j-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 22px;
	margin-bottom: 20px;
}
.w3j-section-head h2 {
	margin: 0;
	color: var(--w3j-ink);
	font-size: clamp(23px, 2.4vw, 31px);
	line-height: 1.2;
	letter-spacing: -.015em;
}
.w3j-section-head__meta {
	color: var(--w3j-muted);
	font-size: 14px;
	white-space: nowrap;
}

.w3j-journey-board {
	margin-top: 22px;
	padding: 26px 28px 28px;
	border: 1px solid var(--w3j-line);
	border-radius: 16px;
	background: var(--w3j-card);
	box-shadow: 0 8px 30px rgba(23, 55, 95, .045);
}
.w3j-journey-track {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 4px 0 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
}
.w3j-journey-step {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 0 150px;
	min-width: 0;
}
.w3j-journey-step > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	width: 100%;
	padding: 0 10px 8px;
	text-align: center;
	text-decoration: none;
	min-width: 0;
}
.w3j-journey-step__number {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 12px;
	border: 1px solid #cfe0f8;
	border-radius: 999px;
	color: var(--w3j-accent);
	background: var(--w3j-soft-blue);
	font-size: 17px;
	font-weight: 800;
	box-shadow: 0 5px 16px rgba(23,105,224,.07);
}
.w3j-journey-step strong {
	display: -webkit-box;
	overflow: hidden;
	color: #1b2b47;
	font-size: 13px;
	line-height: 1.45;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.w3j-journey-step small {
	margin-top: 5px;
	color: var(--w3j-muted);
	font-size: 11px;
	line-height: 1.35;
}
.w3j-journey-step__arrow {
	display: grid;
	place-items: center;
	flex: 0 0 24px;
	width: 24px;
	margin: 0 -12px;
	color: #9eb2cf;
	transform: translateY(-23px);
	z-index: 2;
}
.w3j-journey-step__arrow svg {
	width: 18px;
	height: 18px;
}
.w3j-journey-step a:hover .w3j-journey-step__number,
.w3j-journey-step a:focus-visible .w3j-journey-step__number {
	color: #fff;
	background: var(--w3j-accent);
	border-color: var(--w3j-accent);
}
.w3j-journey-step a:hover strong,
.w3j-journey-step a:focus-visible strong {
	color: var(--w3j-accent);
}

.w3j-needs {
	margin-top: 44px;
}
.w3j-needs__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.w3j-need-card {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 16px;
	padding: 22px;
	border: 1px solid var(--w3j-line);
	border-radius: 14px;
	background: #fff;
}
.w3j-need-card:nth-child(3n+2) .w3j-need-card__icon {
	color: var(--w3j-positive);
	background: #eefaf4;
}
.w3j-need-card:nth-child(3n+3) .w3j-need-card__icon {
	color: #d04a3f;
	background: #fff2f1;
}
.w3j-need-card__icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 14px;
	color: var(--w3j-accent);
	background: var(--w3j-soft-blue);
}
.w3j-need-card__icon svg {
	width: 27px;
	height: 27px;
}
.w3j-need-card h3 {
	margin: 1px 0 8px;
	font-size: 17px;
	line-height: 1.35;
}
.w3j-need-card h3 a,
.w3j-text-link {
	text-decoration: none;
}
.w3j-need-card p {
	margin: 0;
	color: var(--w3j-muted);
	font-size: 14px;
	line-height: 1.65;
}
.w3j-text-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 14px;
	color: var(--w3j-accent) !important;
	font-size: 13px;
	font-weight: 700;
}
.w3j-text-link svg {
	width: 15px;
	height: 15px;
}

.w3j-content-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 34px;
	margin-top: 48px;
	align-items: start;
}
.w3j-post-column,
.w3j-hub-sidebar {
	min-width: 0;
}
.w3j-post-list {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--w3j-line);
}
.w3j-post-card {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 20px;
	padding: 22px 0;
	border-bottom: 1px solid var(--w3j-line);
}
.w3j-post-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	background: var(--w3j-soft-blue);
	text-decoration: none;
}
.w3j-post-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.w3j-post-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--w3j-accent);
}
.w3j-post-card__placeholder svg {
	width: 38px;
	height: 38px;
}
.w3j-post-card__body {
	min-width: 0;
}
.w3j-post-card__body h3 {
	margin: 0;
	font-size: 19px;
	line-height: 1.42;
}
.w3j-post-card__body h3 a {
	text-decoration: none;
}
.w3j-post-card__body p {
	margin: 9px 0 12px;
	color: var(--w3j-muted);
	font-size: 14px;
	line-height: 1.65;
}
.w3j-post-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	color: #8090a7;
	font-size: 12px;
}
.w3j-post-card__meta a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--w3j-accent);
	font-weight: 700;
	text-decoration: none;
}
.w3j-post-card__meta svg {
	width: 14px;
	height: 14px;
}
.w3j-pagination {
	margin-top: 24px;
}
.w3j-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.w3j-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--w3j-line);
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
}
.w3j-pagination .current {
	color: #fff;
	background: var(--w3j-accent);
	border-color: var(--w3j-accent);
}
.w3j-empty {
	padding: 28px;
	border: 1px dashed var(--w3j-line);
	border-radius: 12px;
	color: var(--w3j-muted);
	background: var(--w3j-soft);
}

.w3j-hub-sidebar {
	display: grid;
	gap: 16px;
}
.w3j-side-card {
	padding: 22px;
	border: 1px solid var(--w3j-line);
	border-radius: 14px;
	background: #fff;
}
.w3j-side-card--primary {
	background: linear-gradient(150deg, #f6faff, #edf5ff);
	border-color: #d8e8fd;
}
.w3j-side-card h2 {
	margin: 0;
	font-size: 19px;
	line-height: 1.35;
}
.w3j-side-card p:not(.w3j-kicker) {
	margin: 10px 0 16px;
	color: var(--w3j-muted);
	font-size: 14px;
	line-height: 1.6;
}
.w3j-button--solid {
	justify-content: center;
	width: 100%;
	color: #fff !important;
	background: var(--w3j-accent);
	border-color: var(--w3j-accent);
}
.w3j-button--solid:hover,
.w3j-button--solid:focus-visible {
	background: var(--w3j-accent-deep);
	border-color: var(--w3j-accent-deep);
}
.w3j-button--solid svg {
	width: 16px;
	height: 16px;
}
.w3j-side-links {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.w3j-side-links li + li {
	border-top: 1px solid var(--w3j-line);
}
.w3j-side-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 0;
	font-size: 13px;
	font-weight: 650;
	text-decoration: none;
}
.w3j-side-links a svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: var(--w3j-accent);
}
.w3j-side-links a span {
	display: grid;
	place-items: center;
	min-width: 25px;
	height: 25px;
	padding: 0 7px;
	border-radius: 999px;
	color: var(--w3j-accent);
	background: var(--w3j-soft-blue);
	font-size: 11px;
}

.w3j-hub a:focus-visible,
.w3j-hub button:focus-visible {
	outline: 3px solid rgba(23,105,224,.28);
	outline-offset: 3px;
	border-radius: 5px;
}

@media (max-width: 980px) {
	.w3j-hero {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
	.w3j-hero__copy {
		padding: 34px;
	}
	.w3j-needs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.w3j-content-layout {
		grid-template-columns: minmax(0, 1fr) 270px;
		gap: 24px;
	}
}

@media (max-width: 780px) {
	.w3j-hub__container {
		width: min(100% - 24px, 1180px);
	}
	.w3j-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.w3j-hero__copy {
		padding: 28px 24px 14px;
	}
	.w3j-hero__visual {
		padding: 0 24px 20px;
		max-height: 230px;
		overflow: hidden;
	}
	.w3j-hero__visual svg {
		width: min(100%, 400px);
	}
	.w3j-journey-board {
		padding: 22px 18px;
	}
	.w3j-journey-track {
		padding-bottom: 8px;
	}
	.w3j-journey-step {
		flex-basis: 145px;
	}
	.w3j-needs__grid {
		grid-template-columns: 1fr;
	}
	.w3j-content-layout {
		grid-template-columns: 1fr;
	}
	.w3j-hub-sidebar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.w3j-next__grid { grid-template-columns:1fr; }
	.w3j-next__item--next { text-align:left; border-top:1px solid var(--w3j-border); padding-top:14px; }

	.w3j-breadcrumb {
		padding-top: 14px;
	}
	.w3j-hero h1 {
		font-size: 34px;
	}
	.w3j-hero__description {
		font-size: 15px;
		line-height: 1.65;
	}
	.w3j-stats {
		gap: 16px 20px;
	}
	.w3j-stat {
		min-width: 0;
	}
	.w3j-stat__icon {
		width: 36px;
		height: 36px;
	}
	.w3j-section-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}
	.w3j-post-card {
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 14px;
		padding: 18px 0;
	}
	.w3j-post-card__body h3 {
		font-size: 16px;
	}
	.w3j-post-card__body p {
		display: none;
	}
	.w3j-post-card__meta {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
		margin-top: 8px;
	}
	.w3j-hub-sidebar {
		grid-template-columns: 1fr;
	}
	.w3j-need-card {
		grid-template-columns: 46px minmax(0, 1fr);
		padding: 18px;
	}
	.w3j-need-card__icon {
		width: 46px;
		height: 46px;
	}
}


/* Journey Article Template v0.3.0
 * Scoped under .w3j-article so the active WordPress theme continues to own header/footer.
 */
.w3j-article {
	--w3j-a-accent: #1769e0;
	--w3j-a-accent-deep: #0c4fb7;
	--w3j-a-ink: #10213e;
	--w3j-a-muted: #617089;
	--w3j-a-line: #e2eaf4;
	--w3j-a-soft: #f6f9fd;
	--w3j-a-soft-blue: #eef5ff;
	--w3j-a-card: #fff;
	--w3j-a-positive: #148558;
	color: var(--w3j-a-ink);
	background: #fff;
	padding-bottom: 56px;
}
.w3j-article *,
.w3j-article *::before,
.w3j-article *::after {
	box-sizing: border-box;
}
.w3j-article svg {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -.12em;
}
.w3j-article__container {
	width: min(1180px, calc(100% - 32px));
	margin: 0 auto;
}
.w3j-article-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	padding: 18px 0 20px;
	color: var(--w3j-a-muted);
	font-size: 13px;
	white-space: nowrap;
}
.w3j-article-breadcrumb a,
.w3j-article-breadcrumb span {
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
}
.w3j-article-breadcrumb a:hover {
	color: var(--w3j-a-accent);
}
.w3j-article-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
	gap: 26px;
	align-items: center;
	padding: 30px 36px 34px;
	border: 1px solid #dce8f8;
	border-radius: 18px;
	background:
		radial-gradient(circle at 82% 40%, rgba(23,105,224,.13), transparent 27%),
		linear-gradient(120deg, #fff 0%, #f8fbff 55%, #eef5ff 100%);
	overflow: hidden;
}
.w3j-article-hero__copy {
	min-width: 0;
}
.w3j-article-kicker {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--w3j-a-accent);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .02em;
	text-decoration: none;
	text-transform: uppercase;
}
.w3j-article-kicker svg {
	width: 18px;
	height: 18px;
}
.w3j-article-hero h1 {
	max-width: 780px;
	margin: 12px 0 0;
	color: var(--w3j-a-ink);
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.1;
	letter-spacing: -.025em;
}
.w3j-article-hero__excerpt {
	max-width: 800px;
	margin: 18px 0 0;
	color: #40516b;
	font-size: 17px;
	line-height: 1.7;
}
.w3j-article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin-top: 22px;
	color: #718099;
	font-size: 12px;
}
.w3j-article-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.w3j-article-meta svg {
	width: 15px;
	height: 15px;
	color: var(--w3j-a-accent);
}
.w3j-article-hero__visual {
	display: grid;
	place-items: center;
	min-width: 0;
	min-height: 250px;
}
.w3j-article-hero__visual img {
	display: block;
	width: 100%;
	max-height: 320px;
	border-radius: 14px;
	object-fit: cover;
}
.w3j-article-hero__visual > svg {
	display: block;
	width: min(100%, 440px);
	height: auto;
}
.w3j-article-viz-card {
	fill: rgba(255,255,255,.74);
	stroke: rgba(23,105,224,.18);
	stroke-width: 2;
}
.w3j-article-viz-shield {
	fill: var(--w3j-a-accent);
	opacity: .86;
}
.w3j-article-viz-check {
	fill: #fff;
}
.w3j-article-viz-line {
	fill: rgba(23,105,224,.18);
}

.w3j-article-eyebrow {
	margin: 0 0 5px;
	color: var(--w3j-a-accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.w3j-article-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
}
.w3j-article-section-head h2 {
	margin: 0;
	color: var(--w3j-a-ink);
	font-size: 21px;
	line-height: 1.35;
}
.w3j-article-section-head > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--w3j-a-accent);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.w3j-article-journey {
	margin-top: 22px;
	padding: 22px 24px 24px;
	border: 1px solid var(--w3j-a-line);
	border-radius: 16px;
	background: #fff;
}
.w3j-article-journey__track {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 20px 0 0;
	padding: 0 0 5px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
}
.w3j-article-journey__step {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 0 142px;
	min-width: 0;
}
.w3j-article-journey__step > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-width: 0;
	padding: 0 8px 7px;
	text-align: center;
	text-decoration: none;
}
.w3j-article-journey__num {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid #cbdcf2;
	border-radius: 999px;
	color: var(--w3j-a-accent);
	background: var(--w3j-a-soft-blue);
	font-size: 15px;
	font-weight: 800;
}
.w3j-article-journey__step strong {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 9px;
	color: #23334c;
	font-size: 12px;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
.w3j-article-journey__step small {
	margin-top: 5px;
	color: var(--w3j-a-muted);
	font-size: 10px;
	line-height: 1.3;
}
.w3j-article-journey__step.is-current .w3j-article-journey__num {
	color: #fff;
	background: var(--w3j-a-accent);
	border-color: var(--w3j-a-accent);
	box-shadow: 0 0 0 5px rgba(23,105,224,.11);
}
.w3j-article-journey__step.is-current strong,
.w3j-article-journey__step.is-current small {
	color: var(--w3j-a-accent);
	font-weight: 800;
}
.w3j-article-journey__arrow {
	display: grid;
	place-items: center;
	flex: 0 0 20px;
	width: 20px;
	margin: 0 -10px;
	color: #a8b8cd;
	transform: translateY(-25px);
	z-index: 2;
}
.w3j-article-journey__arrow svg {
	width: 15px;
	height: 15px;
}
.w3j-article-journey__step a:hover .w3j-article-journey__num,
.w3j-article-journey__step a:focus-visible .w3j-article-journey__num {
	color: #fff;
	background: var(--w3j-a-accent);
	border-color: var(--w3j-a-accent);
}

.w3j-article-stepnav {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr);
	gap: 0;
	margin-top: 18px;
	border: 1px solid #dce8f8;
	border-radius: 14px;
	background: #f8fbff;
	overflow: hidden;
}
.w3j-article-stepnav__side,
.w3j-article-stepnav__current {
	padding: 15px 18px;
	min-width: 0;
}
.w3j-article-stepnav__side > span,
.w3j-article-stepnav__current > span {
	display: block;
	margin-bottom: 5px;
	color: var(--w3j-a-muted);
	font-size: 11px;
}
.w3j-article-stepnav__side a {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--w3j-a-accent);
	font-size: 13px;
	font-weight: 750;
	line-height: 1.4;
	text-decoration: none;
}
.w3j-article-stepnav__side strong {
	display: block;
	font-size: 13px;
}
.w3j-article-stepnav__side--next {
	text-align: right;
}
.w3j-article-stepnav__side--next a {
	justify-content: flex-end;
}
.w3j-article-stepnav__current {
	border-right: 1px solid #dce8f8;
	border-left: 1px solid #dce8f8;
	text-align: center;
	background: #eef5ff;
}
.w3j-article-stepnav__current strong {
	display: block;
	color: var(--w3j-a-ink);
	font-size: 22px;
	line-height: 1.1;
}
.w3j-article-stepnav__current small {
	display: block;
	margin-top: 4px;
	color: var(--w3j-a-muted);
	font-size: 11px;
}

.w3j-article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 36px;
	align-items: start;
	margin-top: 34px;
}
.w3j-article-main,
.w3j-article-sidebar {
	min-width: 0;
}
.w3j-article__content {
	color: #26354d;
	font-size: 16px;
	line-height: 1.8;
}
.w3j-article__content > :first-child {
	margin-top: 0;
}
.w3j-article__content h2,
.w3j-article__content h3 {
	scroll-margin-top: 24px;
	color: var(--w3j-a-ink);
	letter-spacing: -.01em;
}
.w3j-article__content h2 {
	margin-top: 1.8em;
	font-size: clamp(24px, 2.5vw, 30px);
	line-height: 1.3;
}
.w3j-article__content h3 {
	margin-top: 1.55em;
	font-size: 21px;
	line-height: 1.35;
}
.w3j-article__content a {
	color: var(--w3j-a-accent);
	text-underline-offset: 2px;
}
.w3j-article__content img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}
.w3j-article__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.55;
}
.w3j-article__content th,
.w3j-article__content td {
	padding: 10px 12px;
	border: 1px solid var(--w3j-a-line);
	vertical-align: top;
}
.w3j-article__content th {
	color: var(--w3j-a-ink);
	background: var(--w3j-a-soft);
	text-align: left;
}
.w3j-article__content blockquote {
	margin: 24px 0;
	padding: 18px 20px;
	border-left: 4px solid var(--w3j-a-accent);
	border-radius: 0 10px 10px 0;
	color: #354763;
	background: var(--w3j-a-soft-blue);
}
.w3j-article__content pre {
	overflow-x: auto;
	padding: 16px;
	border-radius: 10px;
}

.w3j-article-sidebar {
	position: sticky;
	top: 28px;
	display: grid;
	gap: 16px;
}
.admin-bar .w3j-article-sidebar {
	top: 60px;
}
.w3j-article-sidecard {
	padding: 20px;
	border: 1px solid var(--w3j-a-line);
	border-radius: 14px;
	background: #fff;
}
.w3j-article-sidecard--journey {
	background: linear-gradient(145deg, #f7fbff, #eef5ff);
	border-color: #d9e8fb;
}
.w3j-article-sidecard--action {
	background: linear-gradient(145deg, #fffaf0, #fff6df);
	border-color: #f2dfb8;
}
.w3j-article-sidecard h2 {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	color: var(--w3j-a-ink);
	font-size: 17px;
	line-height: 1.35;
}
.w3j-article-sidecard h2 svg {
	color: var(--w3j-a-accent);
}
.w3j-article-sidecard > p:not(.w3j-article-eyebrow) {
	margin: 9px 0 0;
	color: var(--w3j-a-muted);
	font-size: 13px;
	line-height: 1.6;
}
.w3j-toc ol {
	margin: 13px 0 0;
	padding: 0;
	list-style: none;
}
.w3j-toc li + li {
	margin-top: 6px;
}
.w3j-toc a {
	display: block;
	padding: 5px 0;
	color: #33445f;
	font-size: 12px;
	line-height: 1.45;
	text-decoration: none;
}
.w3j-toc a:hover,
.w3j-toc a:focus-visible {
	color: var(--w3j-a-accent);
}
.w3j-toc__sub a {
	padding-left: 14px;
	color: #64738a;
}
.w3j-article-side-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 14px;
	color: var(--w3j-a-accent);
	font-size: 12px;
	font-weight: 750;
	text-decoration: none;
}
.w3j-article-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 16px;
	border: 1px solid var(--w3j-a-accent);
	border-radius: 9px;
	color: #fff !important;
	background: var(--w3j-a-accent);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.25;
	text-decoration: none;
}
.w3j-article-button:hover,
.w3j-article-button:focus-visible {
	background: var(--w3j-a-accent-deep);
	border-color: var(--w3j-a-accent-deep);
}
.w3j-article-button--block {
	width: 100%;
	margin-top: 15px;
}

.w3j-article-cta {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	margin-top: 38px;
	padding: 22px;
	border: 1px solid #d6e6fb;
	border-radius: 15px;
	background: linear-gradient(125deg, #f7fbff, #eef5ff);
}
.w3j-article-cta__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	color: var(--w3j-a-accent);
	background: #fff;
	border: 1px solid #d6e6fb;
}
.w3j-article-cta__icon svg {
	width: 29px;
	height: 29px;
}
.w3j-article-cta h2 {
	margin: 0;
	color: var(--w3j-a-ink);
	font-size: 20px;
	line-height: 1.35;
}
.w3j-article-cta p:not(.w3j-article-eyebrow) {
	margin: 5px 0 0;
	color: var(--w3j-a-muted);
	font-size: 13px;
	line-height: 1.5;
}

.w3j-article-related {
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid var(--w3j-a-line);
}
.w3j-article-related__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 18px;
}
.w3j-article-related__grid article {
	min-width: 0;
}
.w3j-article-related__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	background: var(--w3j-a-soft-blue);
	text-decoration: none;
}
.w3j-article-related__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.w3j-article-related__thumb > span {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--w3j-a-accent);
}
.w3j-article-related__thumb svg {
	width: 38px;
	height: 38px;
}
.w3j-article-related h3 {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.45;
}
.w3j-article-related h3 a {
	color: var(--w3j-a-ink);
	text-decoration: none;
}
.w3j-article-related h3 a:hover,
.w3j-article-related h3 a:focus-visible {
	color: var(--w3j-a-accent);
}
.w3j-article-comments {
	margin-top: 40px;
}

.w3j-article a:focus-visible {
	outline: 3px solid rgba(23,105,224,.25);
	outline-offset: 3px;
	border-radius: 5px;
}

@media (max-width: 980px) {
	.w3j-article-hero {
		grid-template-columns: minmax(0, 1fr) 300px;
		padding: 28px;
	}
	.w3j-article-layout {
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: 26px;
	}
	.w3j-article-stepnav {
		grid-template-columns: minmax(0, 1fr) 145px minmax(0, 1fr);
	}
}

@media (max-width: 780px) {
	.w3j-article__container {
		width: min(100% - 24px, 1180px);
	}
	.w3j-article-hero {
		grid-template-columns: 1fr;
	}
	.w3j-article-hero__visual {
		min-height: 0;
		max-height: 260px;
	}
	.w3j-article-hero__visual img {
		max-height: 240px;
	}
	.w3j-article-journey {
		padding: 20px 18px;
	}
	.w3j-article-layout {
		grid-template-columns: 1fr;
	}
	.w3j-article-sidebar {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.w3j-toc {
		grid-column: 1 / -1;
	}
	.w3j-article-cta {
		grid-template-columns: 52px minmax(0, 1fr);
	}
	.w3j-article-cta .w3j-article-button {
		grid-column: 1 / -1;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.w3j-article-breadcrumb {
		padding-top: 13px;
	}
	.w3j-article-hero {
		padding: 24px 20px;
		border-radius: 14px;
	}
	.w3j-article-hero h1 {
		font-size: 34px;
	}
	.w3j-article-hero__excerpt {
		font-size: 15px;
		line-height: 1.65;
	}
	.w3j-article-meta {
		gap: 8px 12px;
	}
	.w3j-article-section-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 7px;
	}
	.w3j-article-stepnav {
		grid-template-columns: 1fr;
	}
	.w3j-article-stepnav__current {
		order: -1;
		border: 0;
		border-bottom: 1px solid #dce8f8;
	}
	.w3j-article-stepnav__side {
		padding: 14px 16px;
	}
	.w3j-article-stepnav__side--next {
		border-top: 1px solid #dce8f8;
		text-align: left;
	}
	.w3j-article-stepnav__side--next a {
		justify-content: flex-start;
	}
	.w3j-article__content {
		font-size: 15px;
		line-height: 1.75;
	}
	.w3j-article__content table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
	.w3j-article-sidebar {
		grid-template-columns: 1fr;
	}
	.w3j-toc {
		grid-column: auto;
	}
	.w3j-article-related__grid {
		grid-template-columns: 1fr;
	}
	.w3j-article-cta {
		grid-template-columns: 1fr;
	}
	.w3j-article-cta__icon {
		width: 48px;
		height: 48px;
	}
}


/* v0.4: multiple journeys on category hubs */
.w3j-journey-collection{margin:28px 0}
.w3j-journey-choice{min-height:170px}
.w3j-router-collection{display:grid;gap:18px}
#w3j_hub_journey_ids{max-width:100%}


/* v0.5 — Journey UX hierarchy */
.w3j-article-journey__current {
	display:flex;
	flex-direction:column;
	align-items:center;
	width:100%;
	min-width:0;
	padding:0 8px 7px;
	text-align:center;
}
.w3j-article-journey__step.is-optional {
	opacity:.78;
}
.w3j-article-journey__step.is-optional .w3j-article-journey__num,
.w3j-journey-step.is-optional .w3j-journey-step__number {
	border-style:dashed;
	background:#fff;
	color:var(--w3j-a-muted, var(--w3j-muted));
}
.w3j-article-journey__step.is-optional.is-current .w3j-article-journey__num {
	color:var(--w3j-a-accent);
	background:var(--w3j-a-soft-blue);
	border-color:var(--w3j-a-accent);
	box-shadow:none;
}
.w3j-article-stepnav__optional {
	font-size:16px !important;
}
.w3j-article-cta--next {
	background:linear-gradient(125deg,#f7fbff,#eef5ff);
}
.w3j-article-cta--conversion {
	background:linear-gradient(125deg,#fffaf0,#fff4d7);
	border-color:#ecd8a9;
}
.w3j-journey-board,
.w3j-journey-choice {
	scroll-margin-top:28px;
}
.w3j-journey-step.is-optional {
	opacity:.78;
}
.w3j-router__steps .is-optional {
	opacity:.72;
}


/* v0.6.1 — grouped Journey chooser on parent category hubs */
.w3j-journey-groups__grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:22px;
}
.w3j-journey-group{
	border:1px solid var(--w3j-border,#dce5f2);
	border-radius:18px;
	padding:24px;
	background:#fff;
	min-width:0;
}
.w3j-journey-group__head{
	display:flex;
	gap:16px;
	align-items:flex-start;
}
.w3j-journey-group__head h3{
	margin:2px 0 0;
	font-size:1.2rem;
	line-height:1.35;
}
.w3j-journey-group__summary{
	margin:16px 0 18px;
	color:var(--w3j-muted,#64748b);
	line-height:1.65;
}
.w3j-child-journeys{
	display:grid;
	gap:10px;
}
.w3j-child-journey{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	padding:14px 15px;
	border:1px solid var(--w3j-border,#dce5f2);
	border-radius:12px;
	text-decoration:none;
	background:#f8fbff;
	transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.w3j-child-journey:hover{
	transform:translateY(-1px);
	border-color:#9ec5ff;
	background:#fff;
}
.w3j-child-journey span{
	display:grid;
	gap:4px;
	min-width:0;
}
.w3j-child-journey strong{
	color:var(--w3j-text,#1f2937);
	line-height:1.4;
}
.w3j-child-journey small{
	color:var(--w3j-muted,#64748b);
}
.w3j-child-journey svg{
	width:18px;
	height:18px;
	flex:0 0 auto;
	fill:currentColor;
}
.w3j-journey-group__browse{
	display:inline-flex;
	margin-top:16px;
}
.w3j-journey-group__empty{
	padding:12px 14px;
	border-radius:10px;
	background:#f8fafc;
	color:var(--w3j-muted,#64748b);
}
@media (max-width: 980px){
	.w3j-journey-groups__grid{grid-template-columns:1fr;}
}