/* =============================================================================
   TeKnowledge — AI Transformation Journey™
   Recreation of Figma node 5472:24826 (component set 5472:24751)

   Everything is scoped under .tk-journey. No global element selectors, no
   Elementor resets. Values are transcribed from Figma; where a value is an
   inference it is marked  // NOT IN FIGMA.
   ========================================================================== */

.tk-journey {
	/* --- Palette (Figma solid fills) ------------------------------------ */
	--tk-purple:            #4117b4;   /* node fill / page canvas            */
	--tk-panel-bg:          #331593;   /* 5469:23472 fill                    */
	--tk-panel-border:      #301781;   /* 5469:23472 stroke                  */
	--tk-lilac:             #a9a4ff;   /* node + badge stroke, divider       */
	--tk-lilac-text:        #d5d3ff;   /* node label                         */
	--tk-cream:             #f8d7b1;   /* arc, highlight copy, capability box*/
	--tk-hub-stroke:        #8963b2;
	--tk-node-hover-start:  #8069ff;

	/* Active variant 6048:51180 ("Property 1=Variant3"), child frame
	   "1/Default": a lighter gradient than hover and a fully opaque glow. */
	--tk-node-active-start:  #a9a4ff;
	--tk-node-active-end:    #4117b4;
	--tk-node-active-glow:   #9490ff;   /* alpha 1 in Figma, not a tint */
	--tk-node-active-blur:   28px;
	--tk-dashed:            rgba(203, 183, 255, .34);
	--tk-node-glow:         rgba(114, 109, 255, .5);   /* #726dff @ 50%      */
	--tk-node-hover-blur:   25.3px;
	--tk-hub-glow:          rgba(255, 234, 215, .45);
	--tk-hub-glow-hover:    rgba(255, 234, 215, .55);
	--tk-text-82:           rgba(255, 255, 255, .82);
	--tk-text-88:           rgba(255, 255, 255, .88);
	--tk-text-78:           rgba(255, 255, 255, .78);

	/* --- Type ------------------------------------------------------------
	   Both families are expected to be loaded globally by the TeKnowledge
	   theme. Nothing is fetched here — see README if that is not the case. */
	--tk-font-display: "All Round Gothic", "AllRoundGothic", "Overused Grotesk",
	                   -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--tk-font-body:    "Overused Grotesk", "OverusedGrotesk",
	                   -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	/* --- Layout (Figma: 1140 = 10 + 520 + 61 + 542 + 7) ------------------
	   The whole composition is derived from one factor, so the section can be
	   retargeted to any container width without touching individual values.
	   1440 / 1140 = 1.26316. Set --tk-scale to 1 for the exact Figma sizes.
	   Reset to 1 below 1400px (see the responsive section) so the scaled
	   composition is only used where there is genuinely room for it. */
	--tk-scale: 1.26316;

	--tk-max-width:   calc(1140px * var(--tk-scale));
	--tk-stage-size:  calc(520px  * var(--tk-scale));
	--tk-panel-w:     calc(542px  * var(--tk-scale));
	--tk-col-gap:     calc(61px   * var(--tk-scale));
	--tk-panel-min-h: calc(542px  * var(--tk-scale)); /* = stage + the 22px offset below */

	/* Motion — Figma prototype: SMART_ANIMATE, EASE_OUT, 300ms */
	--tk-ease: cubic-bezier(0, 0, .58, 1);
	--tk-dur:  .3s;

	/* Ambient orbit of the gold arc. Not in Figma — see README.
	   Figma draws the arc at 2.5; --tk-arc-width thickens it. Because the
	   stroke is non-scaling, this is a literal px value at every size. */
	--tk-arc-duration: 18s;
	--tk-arc-width: 5;

	--tk-canvas: transparent;

	box-sizing: border-box;
	display: block;
	width: 100%;
	background: var(--tk-canvas);
	font-family: var(--tk-font-body);
	color: #fff;
	-webkit-font-smoothing: antialiased;
}

.tk-journey *,
.tk-journey *::before,
.tk-journey *::after {
	box-sizing: border-box;
}

/* Neutralise the global typography / link / list styles Elementor and most
   themes apply, but only inside this component. */
.tk-journey p,
.tk-journey h2,
.tk-journey h3,
.tk-journey ul,
.tk-journey li {
	margin: 0;
	padding: 0;
	list-style: none;
	letter-spacing: 0;
	text-transform: none;
}

.tk-journey button {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	color: inherit;
	background: none;
	text-align: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.tk-journey .tk-journey__sr-heading {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =============================================================================
   1. Two-column shell
   ========================================================================== */

.tk-journey .tk-journey__inner {
	display: flex;
	/* Top-aligned, not centred: the panel wrapper animates its height between
	   steps, and a centred wheel would drift up and down with it. Figma pins
	   the stage 22px below the panel (y 68 vs y 46) regardless of how tall the
	   panel gets, so the offset below is both the fix and the accurate value. */
	align-items: flex-start;
	justify-content: center;
	gap: var(--tk-col-gap);
	width: 100%;
	max-width: var(--tk-max-width);
	margin-inline: auto;
	padding-block: calc(42px * var(--tk-scale)); /* room for node 1, which sits 10px above the stage */
}

.tk-journey .tk-journey__wheel {
	flex: 0 0 var(--tk-stage-size);
	width: var(--tk-stage-size);
	max-width: 100%;
	margin-top: calc(22px * var(--tk-scale)); /* Figma: stage y 68 - panel y 46 */
}

.tk-journey .tk-journey__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: visible;

	/* The whole wheel is sized from the stage width, so it scales perfectly
	   at any container size. Fixed px values are declared first as a fallback
	   for browsers without container queries. */
	container-type: inline-size;
	container-name: tk-stage;
}

/* Legacy fallback: keep a square box if aspect-ratio is unsupported. */
@supports not (aspect-ratio: 1 / 1) {
	.tk-journey .tk-journey__stage::before {
		content: "";
		display: block;
		padding-top: 100%;
	}
}

/* =============================================================================
   2. Rings + gold arc  (Figma 5469:23435 / 23437 / 23436)
   ========================================================================== */

.tk-journey .tk-journey__rings {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}

.tk-journey .tk-journey__ring {
	fill: none;
	vector-effect: non-scaling-stroke;
}

.tk-journey .tk-journey__ring--solid {
	stroke: var(--tk-lilac);
	stroke-width: 1;
}

.tk-journey .tk-journey__ring--dashed {
	stroke: var(--tk-dashed);
	stroke-width: 1;
	stroke-dasharray: 3 2;
}

.tk-journey .tk-journey__arc {
	fill: none;
	stroke: var(--tk-cream);
	stroke-width: var(--tk-arc-width);
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;

	/* The arc's own centre is the viewBox centre (260, 260), so rotating about
	   50% 50% keeps it locked to the ring for the whole lap. transform-box is
	   required: without it the origin resolves against the element's own
	   bounding box, not the viewBox, and the arc wobbles off the ring. */
	transform-box: view-box;
	transform-origin: 50% 50%;
	animation: tk-journey-orbit var(--tk-arc-duration) linear infinite;
	will-change: transform;
}

@keyframes tk-journey-orbit {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* =============================================================================
   3. Centre hub  (Figma component 5470:23714 "journey")
   ========================================================================== */

.tk-journey .tk-journey__hub {
	position: absolute;
	left: 30%;               /* 156 / 520 */
	top: 30%;
	width: 40%;              /* 208 / 520 */
	height: 40%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2.0513%;        /* 10.667 / 520 */
	z-index: 1;
	border: 1px solid var(--tk-hub-stroke);
	border-radius: 50%;
	box-shadow: 0 0 50px var(--tk-hub-glow);
	text-align: center;

	/* Radial gradient decoded from the Figma gradientTransform of 5470:23714:
	   centre 14.183% 0%, radius 128.04% of the (square) hub box.
	   Stops: #f8d7b1 14.012% -> #cca9b1 30.769% -> #4117b4 84.301%
	   Written as an ellipse because CSS only accepts a <length> after the
	   `circle` keyword; on a square box the two are identical. */
	background-color: var(--tk-purple);
	background-image: radial-gradient(
		ellipse 128.04% 128.04% at 14.183% 0%,
		#f8d7b1 14.012%,
		#cca9b1 30.769%,
		#4117b4 84.301%
	);
	transition:
		box-shadow var(--tk-dur) var(--tk-ease),
		background-image var(--tk-dur) var(--tk-ease);
}

/* Hover variant 5470:23715 — the warm hotspot travels to the lower left and
   the glow deepens. Both values are Figma's. */
.tk-journey .tk-journey__hub:hover {
	box-shadow: 0 0 70px var(--tk-hub-glow-hover);
	background-image: radial-gradient(
		ellipse 134.93% 134.93% at -4.808% 84.135%,
		#f8d7b1 14.012%,
		#cca9b1 30.769%,
		#4117b4 84.301%
	);
}

.tk-journey .tk-journey__hub-title {
	font-family: var(--tk-font-display);
	font-weight: 500;
	font-size: 22px;
	font-size: max(13px, 4.2308cqw);   /* 22 / 520 */
	line-height: 1.2;
	color: #fff;
}

.tk-journey .tk-journey__hub-sub {
	margin-top: 11px !important;       /* Figma 7px pad + 4.625px container pad */
	margin-top: max(6px, 2.1154cqw) !important;
	font-family: var(--tk-font-body);
	font-weight: 400;
	font-size: 17px;
	font-size: max(11px, 3.2692cqw);   /* 17 / 520 */
	line-height: 1.3;
	color: #fff;
}

/* =============================================================================
   4. Wheel nodes  (Figma components 5470:23588 … 5470:23611)
   ========================================================================== */

.tk-journey .tk-journey__nodes {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.tk-journey .tk-journey__node {
	position: absolute;
	left: var(--tk-node-x);
	top: var(--tk-node-y);
	width: 22.1154%;          /* 115 / 520 */
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 1.1538%;  /* 6 / 520 */

	background-color: var(--tk-purple);
	background-image: none;
	border: 1px solid var(--tk-lilac);
	border-radius: 50%;
	color: var(--tk-lilac-text);
	cursor: pointer;

	transition:
		transform var(--tk-dur) var(--tk-ease),
		box-shadow var(--tk-dur) var(--tk-ease),
		color var(--tk-dur) var(--tk-ease);
}

/* The hover gradient lives on a pseudo-element so it can cross-fade rather
   than snap, matching the SMART_ANIMATE transition in the Figma prototype. */
.tk-journey .tk-journey__node::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-image: linear-gradient(150deg, var(--tk-node-hover-start) 0%, var(--tk-purple) 76.54%);
	opacity: 0;
	transition: opacity var(--tk-dur) var(--tk-ease);
	pointer-events: none;
}

@supports not (aspect-ratio: 1 / 1) {
	.tk-journey .tk-journey__node{ height: 22.1154%; }
}

.tk-journey .tk-journey__node-label {
	position: relative;
	z-index: 1;
	display: block;
	font-family: var(--tk-font-display);
	font-weight: 500;
	font-size: 12px;
	font-size: max(9.5px, 2.3077cqw);  /* 12 / 520 */
	line-height: 1.35;
	text-align: center;
	color: inherit;
}

/* Hover variant 5470:23589 — linear-gradient(150deg) decoded from Figma's
   gradientTransform, scale 129.16/115, #726dff glow at 50%, white label. */
.tk-journey .tk-journey__node:hover,
.tk-journey .tk-journey__node:focus-visible {
	box-shadow: 0 0 var(--tk-node-hover-blur) var(--tk-node-glow);
	color: #fff;
	transform: scale(1.1231);
	z-index: 2;
}

.tk-journey .tk-journey__node:hover::before,
.tk-journey .tk-journey__node:focus-visible::before {
	opacity: 1;
}

/* Active variant 6048:51180. Its gradient sits on a child frame that covers
   the whole node, so it paints over the hover gradient — reproduced here on
   ::after, which likewise stacks above ::before when a node is both active
   and under the pointer. Figma's gradient line is shorter than the one CSS
   computes for this angle (1.19741 vs 1.37464 of the box), so the stops are
   remapped from 0%/100% to 12.564%/99.672% to land in the same places. */
.tk-journey .tk-journey__node::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-image: linear-gradient(148.59deg, var(--tk-node-active-start) 12.564%, var(--tk-node-active-end) 99.672%);
	opacity: 0;
	transition: opacity var(--tk-dur) var(--tk-ease);
	pointer-events: none;
}

/* Both shadows: the variant keeps the parent's hover glow underneath its own
   opaque one, exactly as the two nested Figma frames render. */
.tk-journey .tk-journey__node[aria-selected="true"] {
	box-shadow:
		0 0 var(--tk-node-hover-blur) var(--tk-node-glow),
		0 0 var(--tk-node-active-blur) var(--tk-node-active-glow);
	color: #fff;
	transform: scale(1.1231);
	z-index: 3;
}

.tk-journey .tk-journey__node[aria-selected="true"]::after {
	opacity: 1;
}

.tk-journey .tk-journey__node:focus-visible {
	outline: 2px solid var(--tk-cream);
	outline-offset: 3px;
}

/* =============================================================================
   5. Detail panel  (Figma 5469:23472 "Overlay+Border+OverlayBlur")
   ========================================================================== */

.tk-journey .tk-journey__panels {
	position: relative;
	flex: 0 1 var(--tk-panel-w);
	width: var(--tk-panel-w);
	max-width: 100%;
	min-height: var(--tk-panel-min-h);
	transition: height var(--tk-dur) var(--tk-ease);
}

.tk-journey .tk-journey__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(12px * var(--tk-scale));   /* Figma inner container itemSpacing */
	width: 100%;
	min-height: var(--tk-panel-min-h);
	padding: calc(31px * var(--tk-scale)) calc(31.667px * var(--tk-scale)) calc(61.99px * var(--tk-scale));
	background-color: var(--tk-panel-bg);
	border: 1px solid var(--tk-panel-border);
	border-radius: calc(20px * var(--tk-scale));
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.tk-journey .tk-journey__panel[hidden] {
	display: none;
}

/* Once JS is running, panels are stacked and cross-faded in place. */
.tk-journey--ready .tk-journey__panel {
	position: absolute;
	inset: 0 0 auto 0;
	min-height: var(--tk-panel-min-h);
	opacity: 1;
	transform: none;
	transition:
		opacity var(--tk-dur) var(--tk-ease),
		transform var(--tk-dur) var(--tk-ease);
}

.tk-journey--ready .tk-journey__panel.is-leaving {
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
}

.tk-journey--ready .tk-journey__panel.is-entering {
	opacity: 0;
	transform: translateY(8px);
}

.tk-journey .tk-journey__panel:focus-visible {
	outline: 2px solid var(--tk-cream);
	outline-offset: 4px;
}

/* --- Badge (Figma 5469:23474 "Link") ------------------------------------- */
.tk-journey .tk-journey__badge {
	display: flex;
	align-items: center;
	height: calc(27px * var(--tk-scale));
	margin-bottom: calc(12px * var(--tk-scale)) !important;  /* the 0px spacer frame between badge and title */
	padding: 0 calc(16px * var(--tk-scale));
	border: 1px solid var(--tk-lilac);
	border-radius: calc(15px * var(--tk-scale));
	font-family: var(--tk-font-body);
	font-weight: 500;
	font-size: calc(14px * var(--tk-scale));
	line-height: calc(24px * var(--tk-scale));
	color: var(--tk-lilac);
	white-space: nowrap;
}

/* --- Heading (Figma 5469:23478) ------------------------------------------ */
.tk-journey .tk-journey__title {
	width: 100%;
	padding-top: calc(1px * var(--tk-scale));
	font-family: var(--tk-font-display);
	font-weight: 500;
	font-size: calc(32px * var(--tk-scale));
	line-height: calc(35.2px * var(--tk-scale));
	color: #fff;
}

/* --- Lead + rule (Figma 5469:23479 "HorizontalBorder") ------------------- */
.tk-journey .tk-journey__lead {
	width: 100%;
	padding-top: calc(2px * var(--tk-scale));
	padding-bottom: calc(18.667px * var(--tk-scale));
	border-bottom: .667px solid var(--tk-lilac);
	font-family: var(--tk-font-body);
	font-weight: 400;
	font-size: calc(16px * var(--tk-scale));
	line-height: calc(24px * var(--tk-scale));
	color: var(--tk-text-82);
}

/* --- Highlight (Figma 5469:23482) ---------------------------------------- */
.tk-journey .tk-journey__highlight {
	width: 100%;
	padding-top: calc(7.33px * var(--tk-scale));
	font-family: var(--tk-font-display);
	font-weight: 500;
	font-size: calc(18px * var(--tk-scale));
	line-height: calc(25.2px * var(--tk-scale));
	color: var(--tk-cream);
}

/* --- Body copy (Figma 5469:23484) ---------------------------------------- */
.tk-journey .tk-journey__body {
	width: 100%;
	font-family: var(--tk-font-body);
	font-weight: 400;
	font-size: calc(14px * var(--tk-scale));
	line-height: calc(24px * var(--tk-scale));
	color: var(--tk-text-78);
}

.tk-journey .tk-journey__body p + p {
	margin-top: 0 !important;  /* Figma renders these as one wrapped block */
}

/* --- Capability box (only on steps 4, 5 and 6) --------------------------- */
.tk-journey .tk-journey__capability {
	width: 100%;
	padding: calc(15px * var(--tk-scale));
	border: 1px solid var(--tk-cream);
	border-radius: calc(10px * var(--tk-scale));
}

.tk-journey .tk-journey__capability-title {
	margin-bottom: calc(12px * var(--tk-scale)) !important;
	font-family: var(--tk-font-body);
	font-weight: 500;
	font-size: calc(14px * var(--tk-scale));
	line-height: calc(24px * var(--tk-scale));
	color: var(--tk-cream);
}

/* --- "Typical Outcomes" (Figma 5469:23486) ------------------------------- */
.tk-journey .tk-journey__outcomes-title {
	width: 100%;
	padding-top: calc(6px * var(--tk-scale));
	font-family: var(--tk-font-body);
	font-weight: 600;
	font-size: calc(14px * var(--tk-scale));
	line-height: calc(24px * var(--tk-scale));
	color: #fff;
}

/* --- Bullet lists (Figma 5469:23487) ------------------------------------- */
.tk-journey .tk-journey__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: calc(18px * var(--tk-scale));
	row-gap: calc(8px * var(--tk-scale));
	width: 100%;
}

.tk-journey .tk-journey__list li {
	display: flex;
	align-items: flex-start;
	gap: calc(9px * var(--tk-scale));
	font-family: var(--tk-font-body);
	font-weight: 400;
	font-size: calc(14px * var(--tk-scale));
	line-height: calc(24px * var(--tk-scale));
	color: var(--tk-text-88);
}

.tk-journey .tk-journey__dot {
	flex: 0 0 calc(5px * var(--tk-scale));
	width: calc(5px * var(--tk-scale));
	height: calc(5px * var(--tk-scale));
	margin-top: calc(9.5px * var(--tk-scale));   /* optically centres the dot on the first line */
	border-radius: calc(2.5px * var(--tk-scale));
	background: #fff;
}

.tk-journey .tk-journey__list--capability .tk-journey__dot {
	background: var(--tk-cream);
}

/* =============================================================================
   6. Responsive
   Figma contains no tablet or mobile frame for this component, so the
   breakpoints below are an implementation decision, not a transcription.
   The wheel is preserved for as long as its 12px labels stay legible; below
   that it becomes a horizontal, scroll-snapping strip of the same nodes.
   ========================================================================== */

/* Below 1400px there is no room for the 1440 composition, so the section
   falls back to the exact Figma sizes (--tk-scale: 1 => 1140 wide). Two
   known-good states rather than a fluid range that lands between both. */
@media (max-width: 1399px) {
	.tk-journey {
		--tk-scale: 1;
	}
}

/* Laptop — fluid columns, exact proportions kept. */
@media (max-width: 1199px) {
	.tk-journey {
		--tk-col-gap: 40px;
	}

	.tk-journey .tk-journey__inner {
		padding-inline: 24px;
	}

	.tk-journey .tk-journey__wheel {
		flex: 0 1 46%;
		width: auto;
		min-width: 380px;
	}

	.tk-journey .tk-journey__panels {
		flex: 1 1 auto;
		width: auto;
	}
}

/* Tablet — stack, wheel above the panel at full design size. */
@media (max-width: 991px) {
	.tk-journey .tk-journey__inner {
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}

	.tk-journey .tk-journey__wheel {
		flex: 0 0 auto;
		width: 100%;
		max-width: var(--tk-stage-size);
		min-width: 0;
		margin-top: 0;
	}

	.tk-journey .tk-journey__panels {
		width: 100%;
		max-width: var(--tk-panel-w);
		flex: 0 0 auto;
	}

	.tk-journey .tk-journey__panel,
	.tk-journey--ready .tk-journey__panel {
		min-height: 0;
	}

	.tk-journey .tk-journey__panels {
		min-height: 0;
	}

	.tk-journey {
		--tk-panel-min-h: 0px;
	}
}

/* Mobile — the orbit cannot survive below roughly a 460px stage without the
   labels becoming unreadable, so the same node components are re-laid out as
   a scroll-snapping strip beneath the hub. Nothing else changes. */
@media (max-width: 600px) {
	.tk-journey .tk-journey__inner {
		padding-inline: 16px;
		padding-block: 24px;
		gap: 28px;
	}

	.tk-journey .tk-journey__stage {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		container-type: normal;
	}

	.tk-journey .tk-journey__stage::before {
		content: none;
	}

	.tk-journey .tk-journey__rings {
		display: none;
	}

	.tk-journey .tk-journey__hub {
		position: static;
		width: 208px;
		max-width: 62vw;
		height: auto;
		aspect-ratio: 1 / 1;
		padding: 11px;
	}

	.tk-journey .tk-journey__hub-title {
		font-size: 20px;
	}

	.tk-journey .tk-journey__hub-sub {
		margin-top: 10px !important;
		font-size: 15px;
	}

	/* The strip scrolls horizontally, and overflow-x: auto clips on BOTH axes.
	   A glow wider than the strip's vertical padding gets cut off in straight
	   lines and reads as a rectangular halo rather than a circular one, so the
	   glows are scaled down to suit a 104px node and the padding is set to
	   clear them: node 104 x 1.06 scale = 110, +18px glow = 22px needed. */
	.tk-journey {
		--tk-node-hover-blur:  14px;
		--tk-node-glow:        rgba(114, 109, 255, .35);
		--tk-node-active-blur: 18px;
		--tk-node-active-glow: rgba(148, 144, 255, .75);
	}

	.tk-journey .tk-journey__nodes {
		position: static;
		display: flex;
		gap: 12px;
		width: 100vw;
		max-width: calc(100% + 32px);
		margin: 20px -16px 0;
		padding: 24px 16px 26px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.tk-journey .tk-journey__nodes::-webkit-scrollbar {
		display: none;
	}

	.tk-journey .tk-journey__node {
		position: relative;
		left: auto;
		top: auto;
		flex: 0 0 104px;
		width: 104px;
		scroll-snap-align: center;
	}

	.tk-journey .tk-journey__node:hover,
	.tk-journey .tk-journey__node:focus-visible,
	.tk-journey .tk-journey__node[aria-selected="true"] {
		transform: scale(1.06);
	}

	.tk-journey .tk-journey__node-label {
		font-size: 11px;
	}

	.tk-journey .tk-journey__panel {
		padding: 24px 20px 28px;
		border-radius: 16px;
		gap: 10px;
	}

	.tk-journey .tk-journey__title {
		font-size: 26px;
		line-height: 30px;
	}

	.tk-journey .tk-journey__lead {
		font-size: 15px;
	}

	.tk-journey .tk-journey__highlight {
		font-size: 17px;
		line-height: 24px;
	}

	.tk-journey .tk-journey__list {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 6px;
	}

	.tk-journey .tk-journey__badge {
		white-space: normal;
		height: auto;
		min-height: 27px;
		padding: 1px 14px;
	}
}

/* =============================================================================
   7. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.tk-journey *,
	.tk-journey *::before,
	.tk-journey *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}

	/* An infinite rotation at 0.01ms would strobe rather than stop, so the
	   orbit is switched off entirely and the arc rests at its Figma angle. */
	.tk-journey .tk-journey__arc {
		animation: none !important;
	}

	.tk-journey .tk-journey__node:hover,
	.tk-journey .tk-journey__node[aria-selected="true"] {
		transform: none;
	}

	.tk-journey--ready .tk-journey__panel.is-entering,
	.tk-journey--ready .tk-journey__panel.is-leaving {
		transform: none;
	}
}