/**
 * TirelessCrew Components.
 *
 * Colours come from the Elementor Global Kit, so changing a global colour
 * restyles every component. Do NOT hardcode a brand hex here — the fallbacks
 * after each var() exist only so the editor canvas is never unstyled.
 */

/* ── Shader background on any Container ───────────────────────────────── */

.tcx-shader {
	background:
		radial-gradient(1000px 520px at 50% -6%, rgba(30, 144, 255, .5), transparent 64%),
		radial-gradient(700px 420px at 88% 10%, rgba(37, 99, 235, .42), transparent 62%),
		linear-gradient(180deg,
			var(--e-global-color-secondary, #0F2E8A) 0%,
			#1B4BC4 100%);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.tcx-shader > .tcx-shader-gl {
	display: block;
	height: 100%;
	inset: 0;
	mix-blend-mode: screen;
	opacity: .85;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 0;
}

/* Faint graph-paper grid, faded out toward the edges. */
.tcx-shader--grid::after {
	background-image:
		linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 56px 56px;
	content: '';
	inset: 0;
	-webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 78%);
	mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 78%);
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

/* Children must sit above both the canvas and the grid. */
.tcx-shader > .e-con-inner,
.tcx-shader > .elementor-element,
.tcx-shader > .elementor-widget {
	position: relative;
	z-index: 2;
}

/* ── Gradient Title ───────────────────────────────────────────────────── */

.tcx-gt {
	margin: 0;
}

.tcx-gt__seg--grad {
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	/* A gradient clipped to text has no fallback if background-clip is
	   unsupported, so paint a solid colour underneath first. */
	display: inline;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.tcx-gt__seg--grad {
		background-image: none !important;
		color: var(--e-global-color-primary, #2563EB);
		-webkit-text-fill-color: currentColor;
	}
}

/* ── Crew Card ────────────────────────────────────────────────────────── */

.tcx-card {
	background: var(--e-global-color-surface, #fff);
	border: 1px solid var(--e-global-color-border, #E2E8F0);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	overflow: hidden;
	padding: 32px;
	position: relative;
	text-decoration: none;
	transition:
		transform .22s cubic-bezier(.2, 0, 0, 1),
		box-shadow .22s cubic-bezier(.2, 0, 0, 1),
		border-color .22s;
}

.tcx-card--strip::before {
	background: linear-gradient(90deg,
		var(--tcx-strip-from, var(--e-global-color-primary, #2563EB)),
		var(--tcx-strip-to, var(--e-global-color-accent, #1E90FF)));
	content: '';
	height: 3px;
	inset: 0 0 auto 0;
	opacity: 0;
	position: absolute;
	transition: opacity .22s;
	z-index: 2;
}

.tcx-card--lift:hover {
	border-color: #BFD4FF;
	box-shadow: 0 22px 48px -18px rgba(15, 46, 138, .28);
	transform: translateY(-4px);
}

.tcx-card--strip:hover::before {
	opacity: 1;
}

.tcx-card__big {
	background: linear-gradient(135deg,
		var(--e-global-color-primary, #2563EB),
		var(--e-global-color-accent, #1E90FF));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 54px;
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	-webkit-text-fill-color: transparent;
}

.tcx-card__eyebrow {
	color: var(--e-global-color-primary, #2563EB);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tcx-card__t {
	color: var(--e-global-color-text, #000);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.tcx-card__p {
	color: var(--e-global-color-text-muted, #3F3F46);
	font-size: 16px;
	line-height: 1.62;
	margin: 0;
}

.tcx-card__foot {
	color: var(--e-global-color-primary, #2563EB);
	font-size: 14px;
	font-weight: 600;
	margin-top: auto;
	padding-top: 6px;
}

/* ── Crew Band ────────────────────────────────────────────────────────── */

.tcx-band {
	align-items: center;
	background:
		radial-gradient(760px 320px at 18% 0%,
			var(--tcx-band-glow, var(--e-global-color-accent, #1E90FF)) 0%,
			transparent 62%),
		linear-gradient(160deg,
			var(--tcx-band-from, var(--e-global-color-secondary, #0F2E8A)),
			var(--tcx-band-to, #081A4D));
	border-radius: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding: 56px;
}

.tcx-band__t {
	display: flex;
	flex: 1 1 460px;
	flex-direction: column;
	gap: 16px;
}

.tcx-band__eyebrow {
	color: var(--e-global-color-accent, #1E90FF);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.tcx-band__h {
	color: var(--e-global-color-on-dark, #fff);
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.12;
	margin: 0;
}

.tcx-band__p {
	color: rgba(255, 255, 255, .88);
	font-size: 17px;
	line-height: 1.62;
	margin: 0;
	max-width: 60ch;
}

.tcx-band__btn {
	align-items: center;
	background: var(--e-global-color-on-dark, #fff);
	border-radius: 10px;
	box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .45);
	color: var(--e-global-color-text, #000);
	display: inline-flex;
	font-size: 16px;
	font-weight: 600;
	height: 52px;
	justify-content: center;
	padding: 0 30px;
	text-decoration: none;
	transition: background .16s, transform .16s;
}

.tcx-band__btn:hover {
	background: var(--e-global-color-indigo-light, #EFF6FF);
	color: var(--e-global-color-text, #000);
	transform: translateY(-1px);
}

.tcx-band--stacked {
	flex-direction: column;
	text-align: center;
}

.tcx-band--stacked .tcx-band__t {
	align-items: center;
	flex: 1 1 auto;
}

@media (max-width: 768px) {
	.tcx-band {
		gap: 28px;
		padding: 36px 28px;
	}

	.tcx-card {
		padding: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tcx-card,
	.tcx-card::before,
	.tcx-band__btn {
		transition: none !important;
	}
}

/* ── Section Head ─────────────────────────────────────────────────────── */

.tcx-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 auto;
	max-width: 760px;
	text-align: center;
}

.tcx-head__eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.tcx-head__eyebrow--primary { color: var(--e-global-color-primary, #2563EB); }
.tcx-head__eyebrow--accent  { color: var(--e-global-color-accent, #1E90FF); }

.tcx-head__h {
	color: var(--e-global-color-text, #000);
	font-size: clamp(28px, 3.8vw, 46px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	margin: 0;
}

.tcx-head__lead {
	color: var(--e-global-color-text-muted, #3F3F46);
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.62;
	margin: 0;
	max-width: 64ch;
}

.tcx-head--dark .tcx-head__h { color: var(--e-global-color-on-dark, #fff); }
.tcx-head--dark .tcx-head__lead { color: rgba(255, 255, 255, .88); }

/* ── Callout ──────────────────────────────────────────────────────────── */

/* The Callout carries NO styling of its own beyond layout.
   Colours, border, radius, sizes and spacing all arrive as CSS variables
   written by the Elementor controls, whose defaults hold the real values —
   so the panel always shows what is actually applied, and resetting a control
   returns it to the documented default rather than to a hidden one in here. */
.tcx-callout {
	align-items: flex-start;
	/* The flat fill is a background-COLOR, never a gradient. Elementor's
	   background lazy-loader sets `background-image: none !important` on
	   descendants of a container it has not marked loaded, and it wins the
	   !important tie on source order — a gradient base fill therefore never
	   paints at all, not even after scrolling. `background-color` is outside
	   that rule's reach. The gradient is opt-in: the "background to" control
	   writes the whole `background-image` itself. */
	background-color: var(--tcx-co-bg);
	border: var(--tcx-co-border-w) solid var(--tcx-co-border);
	border-radius: var(--tcx-co-radius);
	display: flex;
	gap: var(--tcx-co-gap);
}

.tcx-callout__i {
	align-items: center;
	background-color: var(--tcx-co-icon-bg);
	border: var(--tcx-co-icon-border-w, 0) solid var(--tcx-co-icon-border, transparent);
	border-radius: var(--tcx-co-icon-radius);
	color: var(--tcx-co-icon-color);
	display: grid;
	flex: 0 0 auto;
	height: var(--tcx-co-chip);
	justify-content: center;
	place-items: center;
	position: relative;
	width: var(--tcx-co-chip);
}

/* Stacked halo — a pseudo-element with a negative inset so it sits outside the
   chip and keeps its own gap, leaving the box-shadow control free. */
.tcx-callout__i::before {
	border: var(--tcx-co-icon-ring-w, 0) solid var(--tcx-co-icon-ring, transparent);
	border-radius: inherit;
	content: '';
	inset: calc(-1 * var(--tcx-co-icon-ring-gap, 4px));
	pointer-events: none;
	position: absolute;
}

.tcx-callout__i svg,
.tcx-callout__i i {
	font-size: var(--tcx-co-icon);
	height: var(--tcx-co-icon);
	width: var(--tcx-co-icon);
}

.tcx-callout__b {
	color: var(--tcx-co-lead);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

.tcx-callout__b span {
	color: var(--tcx-co-note);
	display: block;
	margin-top: 6px;
}

/* The widget wrapper has no height of its own, so .tcx-card{height:100%} had
   nothing to resolve against and a row of cards came out ragged. */
.elementor-widget-tcx_card,
.elementor-widget-tcx_card > .elementor-widget-container {
	height: 100%;
}

/* Same for callouts: without this a row of guarantees came out ragged, each
   box only as tall as its own text. */
.elementor-widget-tcx_callout,
.elementor-widget-tcx_callout > .elementor-widget-container {
	height: 100%;
}

.tcx-callout { height: 100%; }

/* ...and the flex item has to be allowed to stretch in the first place.
   Elementor emits `.e-con > .elementor-widget { height: var(--container-widget-height) }`
   at 0,2,0, which pins every widget to its own content height and quietly beat
   the rules above. Matching that shape with the widget class (0,3,0) wins.
   Symptom without this: two boxes in a row are equal ONLY when their text
   happens to be the same length. */
.e-con > .elementor-widget.elementor-widget-tcx_callout,
.e-con > .elementor-widget.elementor-widget-tcx_card,
.e-con > .e-con-inner > .elementor-widget.elementor-widget-tcx_callout,
.e-con > .e-con-inner > .elementor-widget.elementor-widget-tcx_card {
	align-self: stretch;
	height: auto;
}

/* ── Live Badge ───────────────────────────────────────────────────────── */

.tcx-badge-wrap {
	display: flex;
}

/* inline-flex, so the pill hugs its text instead of filling the parent —
   the exact failure the hand-built hero pill had. */
.tcx-badge {
	--tcx-badge-dot: 8px;
	--tcx-badge-dot-color: var(--e-global-color-accent, #1E90FF);
	align-items: center;
	border: 1px solid transparent;
	border-radius: 999px;
	display: inline-flex;
	gap: 10px;
	padding: 8px 16px;
	white-space: nowrap;
}

.tcx-badge--dark {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .25);
}

.tcx-badge--light {
	background: var(--e-global-color-surface, #fff);
	border-color: var(--e-global-color-border, #E2E8F0);
}

.tcx-badge--tint {
	background: var(--e-global-color-indigo-light, #EFF6FF);
	border-color: #BFD4FF;
}

.tcx-badge__t {
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}

.tcx-badge--dark .tcx-badge__t { color: var(--e-global-color-on-dark, #fff); }
.tcx-badge--light .tcx-badge__t { color: var(--e-global-color-text, #000); }
.tcx-badge--tint .tcx-badge__t { color: var(--e-global-color-primary, #2563EB); }

.tcx-badge__dot {
	flex: 0 0 auto;
	height: var(--tcx-badge-dot);
	position: relative;
	width: var(--tcx-badge-dot);
}

/* CSS pulse: solid core plus an expanding ring, matching live-pulse. */
.tcx-badge__dot--pulse,
.tcx-badge__dot--lottie.is-fallback {
	background: var(--tcx-badge-dot-color);
	border-radius: 999px;
}

.tcx-badge__dot--pulse::after,
.tcx-badge__dot--lottie.is-fallback::after {
	animation: tcx-badge-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
	background: var(--tcx-badge-dot-color);
	border-radius: 999px;
	content: '';
	inset: 0;
	position: absolute;
}

@keyframes tcx-badge-ping {
	0%   { opacity: .7; transform: scale(1); }
	80%, 100% { opacity: 0; transform: scale(2.6); }
}

/* Lottie mode: the player fills the dot box. The canvas is trimmed tight
   (200x200, 90% filled) so it stays legible at 8px. */
.tcx-badge__dot--lottie {
	height: calc(var(--tcx-badge-dot) * 2.6);
	margin: calc(var(--tcx-badge-dot) * -0.8) 0;
	width: calc(var(--tcx-badge-dot) * 2.6);
}

.tcx-badge__dot--lottie.is-fallback {
	height: var(--tcx-badge-dot);
	margin: 0;
	width: var(--tcx-badge-dot);
}

.tcx-badge__dot--lottie svg { display: block; }

@media (prefers-reduced-motion: reduce) {
	.tcx-badge__dot--pulse::after { animation: none; opacity: .35; }
}

/* ── Activity Panel ───────────────────────────────────────────────────── */

.tcx-act {
	--tcx-act-chip: 30px;
	--tcx-act-icon: 12px;
	--tcx-act-blur: 14px;
	--tcx-act-angle: 180deg;
	--tcx-act-border-w: 1px;
	backdrop-filter: blur(var(--tcx-act-blur));
	/* The flat fill is a background-COLOR, never a gradient. Elementor's
	   background lazy-loader sets `background-image: none !important` on
	   descendants of a container it has not marked loaded, and it wins the
	   !important tie on source order — a gradient base fill therefore never
	   paints at all, not even after scrolling. `background-color` is outside
	   that rule's reach. The gradient is opt-in: the "background to" control
	   writes the whole `background-image` itself. */
	background-color: var(--tcx-act-bg-from);
	border: var(--tcx-act-border-w) solid var(--tcx-act-border);
	border-radius: 20px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* The inset top highlight is a pseudo-element rather than a second box-shadow,
   because Elementor's box-shadow group control writes the whole `box-shadow`
   declaration and would wipe an inset kept alongside it. */
.tcx-act::after {
	background: var(--tcx-act-inset, transparent);
	content: '';
	height: 1px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
}

.tcx-actw--dark,
.tcx-act--dark {
	--tcx-act-divider: rgba(255, 255, 255, .14);
	--tcx-act-icon-color: rgba(255, 255, 255, .9);
	--tcx-act-icon-bg: rgba(255, 255, 255, .14);
	--tcx-act-label: rgba(255, 255, 255, .92);
	--tcx-act-meta: rgba(255, 255, 255, .6);
	--tcx-act-pill-bg: var(--e-global-color-on-dark, #fff);
	--tcx-act-pill-color: var(--e-global-color-deep, #081A4D);
	--tcx-act-bg-from: rgba(255, 255, 255, .14);
	--tcx-act-bg-to: rgba(255, 255, 255, .06);
	--tcx-act-border: rgba(255, 255, 255, .2);
	--tcx-act-inset: rgba(255, 255, 255, .22);
}

.tcx-actw--dark, .tcx-actw--light { background: none; border: 0; }

.tcx-actw--light,
.tcx-act--light {
	--tcx-act-divider: var(--e-global-color-border, #E2E8F0);
	--tcx-act-icon-color: var(--e-global-color-primary, #2563EB);
	--tcx-act-icon-bg: var(--e-global-color-indigo-light, #EFF6FF);
	--tcx-act-label: var(--e-global-color-text, #000);
	--tcx-act-meta: var(--e-global-color-text-muted, #3F3F46);
	--tcx-act-pill-bg: var(--e-global-color-primary, #2563EB);
	--tcx-act-pill-color: #fff;
	--tcx-act-bg-from: var(--e-global-color-surface, #fff);
	--tcx-act-bg-to: var(--e-global-color-surface, #fff);
	--tcx-act-border: var(--e-global-color-border, #E2E8F0);
	--tcx-act-inset: transparent;
}

.tcx-act__bar,
.tcx-act__row {
	align-items: center;
	display: flex;
	gap: 14px;
	padding: 16px 22px;
}

.tcx-act__row { border-top: 1px solid var(--tcx-act-divider); }

.tcx-act__bar {
	justify-content: space-between;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
}

.tcx-act__bar-l { color: var(--tcx-act-label); }

.tcx-act__bar-r {
	align-items: center;
	color: var(--tcx-act-meta);
	display: inline-flex;
	gap: 8px;
	font-weight: 500;
}

/* Reuses the badge pulse so the two components stay in step. */
.tcx-act__pulse {
	background: var(--e-global-color-accent, #1E90FF);
	border-radius: 999px;
	flex: 0 0 auto;
	height: 8px;
	position: relative;
	width: 8px;
}

.tcx-act__pulse::after {
	animation: tcx-badge-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
	background: inherit;
	border-radius: 999px;
	content: '';
	inset: 0;
	position: absolute;
}

/* Column 1 — icon chip.

   The fill is a gradient whose second stop defaults to the first, so leaving
   "Background to" empty still gives a flat chip. !important for the same
   reason as the panel: Elementor's background lazy-loader blanks
   `background-image` on descendants of a container it has not marked loaded. */
.tcx-act__icon {
	align-items: center;
	background-color: var(--tcx-act-icon-bg);
	border: var(--tcx-act-icon-border-w, 0) solid var(--tcx-act-icon-border, transparent);
	border-radius: var(--tcx-act-icon-radius, 999px);
	box-shadow: var(--tcx-act-icon-shadow, none);
	color: var(--tcx-act-icon-color);
	display: inline-flex;
	flex: 0 0 auto;
	height: var(--tcx-act-chip);
	justify-content: center;
	position: relative;
	width: var(--tcx-act-chip);
}

/* The "stacked" halo — a second ring sitting outside the chip, the way a
   stacked icon reads. A pseudo-element rather than a second box-shadow so it
   can have its own gap, and so the box-shadow control stays free for the
   chip's own shadow. `inset` is negative, which is what puts it outside. */
.tcx-act__icon::before {
	border: var(--tcx-act-icon-ring-w, 0) solid var(--tcx-act-icon-ring, transparent);
	border-radius: inherit;
	content: '';
	inset: calc(-1 * var(--tcx-act-icon-ring-gap, 4px));
	pointer-events: none;
	position: absolute;
}

.tcx-act__icon svg,
.tcx-act__icon i {
	font-size: var(--tcx-act-icon);
	height: var(--tcx-act-icon);
	width: var(--tcx-act-icon);
	fill: currentColor;
}

/* Column 2 — description. Takes the slack so column 3 stays right-aligned. */
.tcx-act__label {
	color: var(--tcx-act-label);
	flex: 1 1 auto;
	font-size: 15px;
	line-height: 1.45;
	min-width: 0;
}

/* Column 3 — meta */
.tcx-act__meta {
	color: var(--tcx-act-meta);
	flex: 0 0 auto;
	font-size: 13px;
	text-align: right;
	white-space: nowrap;
}

.tcx-act__row--waiting { background: var(--tcx-act-waiting-bg, rgba(30, 144, 255, .12)); }

/* The paused row's icon is the one thing on the panel that should catch the
   eye, so it gets its own colours rather than inheriting the rest.

   These READ the base variables, they do not redefine them. Writing
   `--tcx-act-icon-bg: var(--tcx-act-wicon-bg, var(--tcx-act-icon-bg))` is a
   self-reference: CSS treats a custom property that appears in its own
   fallback as invalid at computed-value time, the whole `background`
   declaration then fails, and the chip renders with no fill at all. That
   shipped in v1.12.0 and blanked the paused row's icon. */
.tcx-act__row--waiting .tcx-act__icon {
	background-color: var(--tcx-act-wicon-bg, var(--tcx-act-icon-bg));
	color: var(--tcx-act-wicon-color, var(--tcx-act-icon-color));
}
.tcx-act__row--waiting .tcx-act__label { font-weight: 600; }

.tcx-act__row--waiting .tcx-act__meta {
	background: var(--tcx-act-pill-bg);
	border-radius: 999px;
	color: var(--tcx-act-pill-color);
	font-weight: 600;
	padding: 6px 12px;
}

.tcx-act__row--muted { opacity: .55; }

.tcx-act__cap {
	color: var(--tcx-act-meta);
	font-size: 13px;
	margin: 14px 0 0;
	text-align: center;
}

@media (max-width: 600px) {
	.tcx-act__bar,
	.tcx-act__row { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
	.tcx-act__label { flex: 1 1 100%; order: 3; }
	.tcx-act__meta { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.tcx-act__pulse::after { animation: none; opacity: .35; }
}

/* ── Activity Panel — window dots ─────────────────────────────────────── */

.tcx-act__bar-l {
	align-items: center;
	display: inline-flex;
	gap: var(--tcx-act-dot-space, 12px);
	min-width: 0;
}

.tcx-act__dots {
	display: inline-flex;
	flex: 0 0 auto;
	gap: var(--tcx-act-dot-gap, 6px);
}

.tcx-act__dots i {
	border-radius: 999px;
	display: block;
	height: var(--tcx-act-dot, 10px);
	width: var(--tcx-act-dot, 10px);
}

.tcx-act__dots i:nth-child(1) { background: var(--tcx-act-dot1); }
.tcx-act__dots i:nth-child(2) { background: var(--tcx-act-dot2); }
.tcx-act__dots i:nth-child(3) { background: var(--tcx-act-dot3); }

/* Subtle: three of the same, keyed to the panel tone. */
.tcx-act--dark.tcx-act--dots-subtle {
	--tcx-act-dot1: rgba(255, 255, 255, .25);
	--tcx-act-dot2: rgba(255, 255, 255, .25);
	--tcx-act-dot3: rgba(255, 255, 255, .25);
}

.tcx-act--light.tcx-act--dots-subtle {
	--tcx-act-dot1: rgba(0, 0, 0, .14);
	--tcx-act-dot2: rgba(0, 0, 0, .14);
	--tcx-act-dot3: rgba(0, 0, 0, .14);
}

.tcx-act--dots-traffic {
	--tcx-act-dot1: #FF5F57;
	--tcx-act-dot2: #FEBC2E;
	--tcx-act-dot3: #28C840;
}

/* Custom falls back to subtle until the pickers are set. */
.tcx-act--dark.tcx-act--dots-custom {
	--tcx-act-dot1: rgba(255, 255, 255, .25);
	--tcx-act-dot2: rgba(255, 255, 255, .25);
	--tcx-act-dot3: rgba(255, 255, 255, .25);
}

.tcx-act--light.tcx-act--dots-custom {
	--tcx-act-dot1: rgba(0, 0, 0, .14);
	--tcx-act-dot2: rgba(0, 0, 0, .14);
	--tcx-act-dot3: rgba(0, 0, 0, .14);
}

@media (max-width: 600px) {
	.tcx-act--dots-hide-m .tcx-act__dots { display: none; }
	/* The bar wraps on narrow screens; keep the dots with the title. */
	.tcx-act__bar-l { flex: 1 1 auto; }
}

/* ── Fluid column utilities ───────────────────────────────────────────── */
/*
 * Elementor's container `width` control does NOT bind — measured: page CSS for
 * a row of columns set to width 30% / tablet 100% / mobile 100% emitted no
 * width rule at all, so the cards squashed to 114px instead of stacking.
 *
 * Grids are therefore driven by flex-basis, not breakpoints. They reflow on the
 * space actually available, which is more robust than guessing viewports and is
 * verifiable by constraining the container.
 *
 * Put the class on the ROW: tcx-cols-2 / -3 / -4.
 */
/* A "boxed" container puts an .e-con-inner between the row and its columns,
   so the direct-child selector alone silently misses. Both forms are needed. */
.tcx-cols-2 > .e-con,
.tcx-cols-2 > .elementor-element,
.tcx-cols-2 > .e-con-inner > .e-con,
.tcx-cols-2 > .e-con-inner > .elementor-element { flex: 1 1 380px; min-width: 0; }

.tcx-cols-3 > .e-con,
.tcx-cols-3 > .elementor-element,
.tcx-cols-3 > .e-con-inner > .e-con,
.tcx-cols-3 > .e-con-inner > .elementor-element { flex: 1 1 280px; min-width: 0; }

.tcx-cols-4 > .e-con,
.tcx-cols-4 > .elementor-element,
.tcx-cols-4 > .e-con-inner > .e-con,
.tcx-cols-4 > .e-con-inner > .elementor-element { flex: 1 1 220px; min-width: 0; }

/* A card dropped straight into a row carries its own basis. */
.elementor-widget-tcx_card { flex: 1 1 280px; min-width: 0; }

/* ── Crew Card — media variant ────────────────────────────────────────── */

.tcx-card--media { padding: 0; }

.tcx-card__img {
	background: linear-gradient(180deg, var(--e-global-color-indigo-light, #EFF6FF), #fff);
	border-bottom: 1px solid var(--e-global-color-border, #E2E8F0);
	display: block;
	padding: 18px;
}

.tcx-card__img img {
	display: block;
	height: 172px;
	object-fit: contain;   /* never crop the artwork */
	width: 100%;
}

.tcx-card__b {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	padding: 30px;
}

/* ── Chip Row ─────────────────────────────────────────────────────────── */

.tcx-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.tcx-chip {
	align-items: center;
	background: var(--e-global-color-surface, #fff);
	border: 1px solid var(--e-global-color-border, #E2E8F0);
	border-radius: 999px;
	color: var(--e-global-color-text, #000);
	display: inline-flex;
	font-size: 15px;
	font-weight: 600;
	gap: 8px;
	padding: 10px 18px;
}

.tcx-chip--accent {
	background: var(--e-global-color-indigo-light, #EFF6FF);
	border-color: #BFD4FF;
	color: var(--e-global-color-primary, #2563EB);
}

.tcx-chip__i svg, .tcx-chip__i i { height: 15px; width: 15px; font-size: 15px; }

/* ── Comparison Table ─────────────────────────────────────────────────── */

.tcx-cmp {
	--tcx-cmp-hl: var(--e-global-color-primary, #2563EB);
	--tcx-cmp-hl-bg: var(--e-global-color-indigo-light, #EFF6FF);
	width: 100%;
}

/* The wrapper does ONE job: let a narrow viewport scroll the table sideways.
   The frame — background, border, radius — lives on the TABLE, because that is
   the element whose height is the sum of its rows. Putting it on the wrapper
   left the wrapper ~15px taller than the table and opened a white strip
   between the last row and the rounded corner, which no amount of flex or
   line-height fixed. */
.tcx-cmp__scroll { overflow-x: auto; }

.tcx-cmp__tbl {
	background: var(--e-global-color-surface, #fff);
	border: 1px solid var(--e-global-color-border, #E2E8F0);
	border-radius: 20px;
	/* `separate` with zero spacing, not `collapse`: a collapsed table cannot
	   carry a border-radius at all — the corners render square. */
	border-collapse: separate;
	border-spacing: 0;
	min-width: 720px;
	width: 100%;
}

/* With the radius on the table, the corner CELLS have to match it or their own
   background squares the corner off again. */
.tcx-cmp__tbl thead th:first-child { border-top-left-radius: 19px; }
.tcx-cmp__tbl thead th:last-child { border-top-right-radius: 19px; }
.tcx-cmp__tbl tbody tr:last-child th:first-child { border-bottom-left-radius: 19px; }
.tcx-cmp__tbl tbody tr:last-child td:last-child { border-bottom-right-radius: 19px; }

.tcx-cmp__tbl th,
.tcx-cmp__tbl td {
	border-bottom: 1px solid var(--e-global-color-border, #E2E8F0);
	padding: 20px 22px;
	text-align: left;
	vertical-align: top;
}

.tcx-cmp__tbl thead th {
	background: var(--e-global-color-surface-alt, #F7F9FC);
	vertical-align: bottom;
}

.tcx-cmp__tbl tbody th {
	color: var(--e-global-color-text, #000);
	font-size: 16px;
	font-weight: 700;
	width: 30%;
}

/* The theme's `reset.css` ships a zebra stripe:
       table tbody > tr:nth-child(2n+1) > td,
       table tbody > tr:nth-child(2n+1) > th { background: rgba(128,128,128,.07) }
   and it is enqueued AFTER this file, so it wins every specificity tie. It was
   painting 15 of the 36 body cells — including the whole of the last row, which
   is odd-numbered. That grey (#F5F5F5 over the white table) sits so close to the
   frame's #E2E8F0 that the bottom edge stopped reading as an edge at all. That,
   not a missing border, is why the table looked open at the bottom.

   Neutralise it at (0,2,3), above reset's (0,1,3). The highlighted-column rules
   below are lifted to (0,3,2) so they still paint over this. Do not lower either
   number without re-checking the other. */
.tcx-cmp .tcx-cmp__tbl tbody > tr > th,
.tcx-cmp .tcx-cmp__tbl tbody > tr > td { background-color: transparent; }

.tcx-cmp__lbl {
	color: var(--e-global-color-text-muted, #3F3F46);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tcx-cmp__name {
	color: var(--e-global-color-text, #000);
	display: block;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.tcx-cmp__pill {
	background: linear-gradient(90deg, var(--tcx-cmp-hl),
		var(--e-global-color-accent, #1E90FF));
	border-radius: 999px;
	color: #fff;
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	margin-bottom: 8px;
	padding: 5px 11px;
}

/* The highlighted column is bordered as one unit, top to bottom. */
.tcx-cmp .tcx-cmp__tbl th.tcx-cmp__us,
.tcx-cmp .tcx-cmp__tbl td.tcx-cmp__us {
	background-color: var(--tcx-cmp-hl-bg);
	border-left: 2px solid var(--tcx-cmp-hl);
	border-right: 2px solid var(--tcx-cmp-hl);
}

.tcx-cmp .tcx-cmp__tbl thead th.tcx-cmp__us {
	border-radius: 14px 14px 0 0;
	border-top: 2px solid var(--tcx-cmp-hl);
}

/* Specificity matters here: the `tbody tr:last-child td { border-bottom: 0 }`
   rule above is 0,3,2 and was beating a plain `td.tcx-cmp__us--end` (0,3,1),
   so the highlighted column never closed at the bottom. Matching the
   last-child selector and adding the class outranks it. */
.tcx-cmp .tcx-cmp__tbl tbody tr:last-child td.tcx-cmp__us--end {
	border-bottom: 2px solid var(--tcx-cmp-hl);
	border-radius: 0 0 14px 14px;
}

/* No divider on the final row — the container's own border closes the table,
   and a second line immediately above a 20px radius reads as a mistake. */
.tcx-cmp .tcx-cmp__tbl tbody tr:last-child th,
.tcx-cmp .tcx-cmp__tbl tbody tr:last-child td {
	border-bottom: 0;
}

/* ...except the highlighted column, which has to close its own 2px outline. */
.tcx-cmp .tcx-cmp__tbl tbody tr:last-child td.tcx-cmp__us--end {
	border-bottom: 2px solid var(--tcx-cmp-hl);
}

.tcx-cmp__tbl td.tcx-cmp__us .tcx-cmp__t {
	color: var(--e-global-color-text, #000);
	font-weight: 600;
}

.tcx-cmp__m {
	border-radius: 999px;
	display: inline-grid;
	height: 22px;
	margin-right: 9px;
	place-items: center;
	vertical-align: middle;
	width: 22px;
}

.tcx-cmp__m svg { height: 12px; width: 12px; }
.tcx-cmp__m--yes  { background: #DCFCE7; color: #15803D; }
.tcx-cmp__m--no   { background: #FEE2E2; color: #DC2626; }
.tcx-cmp__m--part { background: #FEF3C7; color: #B45309; }

/* The label is its own inline-block, capped to the space left beside the
   marker, so a second line starts under the first WORD rather than sliding
   back under the marker chip.

   Do NOT make the <td> a flex container to achieve this — display:flex takes
   the cell out of the table formatting context and every cell in the row
   stacks vertically instead of sitting in its column. Measured, on this table.*/
.tcx-cmp__t {
	color: var(--e-global-color-text-muted, #3F3F46);
	display: inline-block;
	font-size: 15px;
	line-height: 1.5;
	max-width: calc(100% - 34px);
	vertical-align: middle;
}

.tcx-cmp__cap {
	color: var(--e-global-color-text-muted, #3F3F46);
	font-size: 14px;
	line-height: 1.6;
	margin: 16px 0 0;
	text-align: center;
}

.tcx-cmp__verdict {
	background:
		radial-gradient(600px 260px at 20% 0%,
			var(--e-global-color-accent, #1E90FF) 0%, transparent 62%),
		linear-gradient(160deg, var(--e-global-color-secondary, #0F2E8A),
			var(--e-global-color-deep, #081A4D));
	border-radius: 20px;
	margin-top: 32px;
	padding: 36px 40px;
}

.tcx-cmp__verdict h3 {
	color: #fff;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0 0 10px;
}

.tcx-cmp__verdict p {
	color: rgba(255, 255, 255, .9);
	font-size: 17px;
	line-height: 1.62;
	margin: 0;
	max-width: 70ch;
}

@media (max-width: 760px) {
	.tcx-cmp__tbl th, .tcx-cmp__tbl td { padding: 16px 14px; }
	.tcx-cmp__verdict { padding: 28px 24px; }
	.tcx-card__b { padding: 24px; }
}

/* ── Step List ────────────────────────────────────────────────────────────
   The boxes are joined into one block: a 2px seam instead of a gap, the top
   border dropped on every box after the first so the seam is a single line,
   and rounding only on the outer corners. Those three details are what make
   this read as one argument rather than three cards, and they all depend on
   first/last position — which is exactly why it is a component. */

.tcx-steps {
	--tcx-steps-bg: var(--e-global-color-surface, #fff);
	--tcx-steps-border: var(--e-global-color-border, #E2E8F0);
	--tcx-steps-key: var(--e-global-color-text-muted, #3F3F46);
	--tcx-steps-text: var(--e-global-color-text, #000);
	--tcx-steps-hi-bg: var(--e-global-color-indigo-light, #EFF6FF);
	--tcx-steps-hi-border: #BFD4FF;
	--tcx-steps-hi-key: var(--e-global-color-primary, #2563EB);
	--tcx-steps-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tcx-step {
	background: var(--tcx-steps-bg);
	border: 1px solid var(--tcx-steps-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
}

.tcx-step + .tcx-step { border-top: 0; }

.tcx-step:first-child {
	border-radius: var(--tcx-steps-radius) var(--tcx-steps-radius) 0 0;
}

.tcx-step:last-child {
	border-radius: 0 0 var(--tcx-steps-radius) var(--tcx-steps-radius);
}

/* A single step is a whole card, so it rounds on all four corners. */
.tcx-step:only-child { border-radius: var(--tcx-steps-radius); }

.tcx-step__k {
	color: var(--tcx-steps-key);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.tcx-step p {
	color: var(--tcx-steps-text);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

/* The outcome box owns its own border colour on all sides, so it needs the
   top border back — `.tcx-step + .tcx-step { border-top: 0 }` would otherwise
   leave it open at the top and the tint would bleed into the box above. */
.tcx-step--hi {
	background: var(--tcx-steps-hi-bg);
	border-color: var(--tcx-steps-hi-border);
	border-top: 1px solid var(--tcx-steps-hi-border);
}

.tcx-step--hi .tcx-step__k { color: var(--tcx-steps-hi-key); }
.tcx-step--hi p { font-weight: 600; }

/* ── Utility: centre a width-capped widget ───────────────────────────────
   Elementor's widget width control emits `--width` but nothing that centres
   the result, so a paragraph capped to 680px in a centred column sits hard
   against the left edge. `margin-inline: auto` is all that is missing, and
   there is no Elementor control that supplies it for a widget. */
.elementor-element.tcx-center { margin-inline: auto; }

/* ── Price Card ───────────────────────────────────────────────────────────
   The featured variant inverts to navy. Every child colour is expressed as a
   variable so that inversion is one block of overrides rather than a second
   copy of the whole component. */

.tcx-price {
	--tcx-price-accent: var(--e-global-color-primary, #2563EB);
	--tcx-price-bg: var(--e-global-color-surface, #fff);
	--tcx-price-border: var(--e-global-color-border, #E2E8F0);
	--tcx-price-title: var(--e-global-color-text, #000);
	--tcx-price-text: var(--e-global-color-text-muted, #3F3F46);
	--tcx-price-btn-bg: var(--tcx-price-accent);
	--tcx-price-btn-text: #fff;
	background: var(--tcx-price-bg);
	border: 1px solid var(--tcx-price-border);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	padding: 32px;
}

.elementor-widget-tcx_price,
.elementor-widget-tcx_price > .elementor-widget-container { height: 100%; }

.e-con > .elementor-widget.elementor-widget-tcx_price,
.e-con > .e-con-inner > .elementor-widget.elementor-widget-tcx_price {
	align-self: stretch;
	height: auto;
}

.tcx-price__badge {
	align-self: flex-start;
	background: var(--tcx-price-accent);
	border-radius: 999px;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	padding: 5px 11px;
	text-transform: uppercase;
}

.tcx-price__t {
	color: var(--tcx-price-title);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 0;
}

.tcx-price__amt {
	align-items: baseline;
	color: var(--tcx-price-title);
	display: flex;
	font-size: 54px;
	font-weight: 800;
	gap: 10px;
	letter-spacing: -.035em;
	line-height: 1.05;
	margin: 0;
}

.tcx-price__amt em {
	color: var(--tcx-price-text);
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0;
}

.tcx-price__p {
	color: var(--tcx-price-text);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

.tcx-price__ticks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
}

.tcx-price__ticks li {
	align-items: flex-start;
	color: var(--tcx-price-title);
	display: flex;
	font-size: 15px;
	gap: 10px;
	line-height: 1.5;
}

.tcx-price__tick {
	color: var(--tcx-price-accent);
	display: grid;
	flex: 0 0 auto;
	height: 18px;
	place-items: center;
	width: 18px;
}

.tcx-price__tick svg { height: 13px; width: 13px; }

/* Pushed to the bottom so two cards of different length still line their
   buttons up. */
.tcx-price__btn {
	background: var(--tcx-price-btn-bg);
	border-radius: 10px;
	color: var(--tcx-price-btn-text);
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	margin-top: auto;
	padding: 15px 26px;
	text-align: center;
	text-decoration: none;
	transition: opacity .2s ease;
}

.tcx-price__btn:hover,
.tcx-price__btn:focus { color: var(--tcx-price-btn-text); opacity: .9; }

.tcx-price--hi {
	--tcx-price-accent: var(--e-global-color-accent, #1E90FF);
	--tcx-price-bg: linear-gradient(160deg, var(--e-global-color-secondary, #0F2E8A),
		var(--e-global-color-deep, #081A4D));
	--tcx-price-border: rgba(255, 255, 255, .18);
	--tcx-price-title: #fff;
	--tcx-price-text: rgba(255, 255, 255, .78);
	--tcx-price-btn-bg: rgba(255, 255, 255, .12);
	--tcx-price-btn-text: #fff;
}

.tcx-price--hi .tcx-price__btn { border: 1px solid rgba(255, 255, 255, .3); }

/* ── Jobs Table ───────────────────────────────────────────────────────────
   Divs with explicit roles rather than a real <table>: this one reflows to
   stacked cards on a phone, which a table cannot do without losing the
   column meaning. Stacking is driven by a container query written per
   instance in the widget, so it responds to its own box rather than the
   viewport. */

.tcx-jobs {
	--tcx-jobs-bar-on: var(--e-global-color-primary, #2563EB);
	--tcx-jobs-bar-off: var(--e-global-color-border, #E2E8F0);
	background: var(--e-global-color-surface, #fff);
	border: 1px solid var(--e-global-color-border, #E2E8F0);
	border-radius: 20px;
	overflow: hidden;
	width: 100%;
}

.tcx-jobs__h,
.tcx-jobs__r {
	align-items: center;
	display: grid;
	gap: 16px;
	grid-template-columns: 1.6fr 1fr 1fr;
	padding: 18px 26px;
}

.tcx-jobs__h {
	background: var(--e-global-color-surface-alt, #F7F9FC);
	border-bottom: 1px solid var(--e-global-color-border, #E2E8F0);
}

.tcx-jobs__h span {
	color: var(--e-global-color-text-muted, #3F3F46);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tcx-jobs__r { border-bottom: 1px solid var(--e-global-color-border, #E2E8F0); }
.tcx-jobs__r:last-child { border-bottom: 0; }

.tcx-jobs__r b {
	color: var(--e-global-color-text, #000);
	display: block;
	font-size: 16px;
	font-weight: 700;
}

.tcx-jobs__r small {
	color: var(--e-global-color-text-muted, #3F3F46);
	display: block;
	font-size: 14px;
	margin-top: 2px;
}

.tcx-jobs__bar { display: inline-flex; gap: 3px; }

.tcx-jobs__bar i {
	background: var(--tcx-jobs-bar-off);
	border-radius: 2px;
	display: block;
	height: 16px;
	width: 7px;
}

.tcx-jobs__bar i.on { background: var(--tcx-jobs-bar-on); }

.tcx-jobs__w {
	color: var(--e-global-color-text-muted, #3F3F46);
	font-size: 14px;
}

/* ── Crew Lottie ──────────────────────────────────────────────────────────
   The wrapper does the aligning so the player itself can stay a plain block
   whose width the Style tab controls. */

.tcx-lottie-wrap { display: flex; width: 100%; }

/* The reserved height is load-bearing, not decoration. An unhydrated player is
   an empty div — zero height — and IntersectionObserver never reports a
   zero-height target as intersecting, so "play when scrolled into view" could
   never fire and the animation stayed blank forever. Giving it a box to start
   with breaks that chicken-and-egg. The min-height drops away the moment the
   SVG exists and can size itself. */
.tcx-lottie { min-height: 180px; width: 100%; }

.tcx-lottie[data-tcx-done] { min-height: 0; }

.tcx-lottie svg { display: block; height: auto !important; width: 100% !important; }

/* A card's media panel holds either a still or an animation. */
.tcx-card__img .tcx-lottie { display: block; margin: 0 auto; max-width: 100%; }

/* =====================================================================
 * Org Chart — the Organization page's picture of departments and roles.
 *
 * Connectors are drawn with pseudo-element rules off the list structure,
 * not SVG, so adding a role in the editor never desyncs the diagram.
 * Every rule carries two classes because the Global Kit emits
 * `.elementor-kit-N h2` at 0-1-1 and beats a single class.
 * ================================================================== */

/**
 * Every connector length is derived from these four numbers. They were
 * previously hardcoded into the pseudo-element rules as 12px, 22px, 26px and
 * 38px, and the 38px was the sum of two of the others — so changing the gap
 * between role cards silently broke the spine that had to reach across it.
 */
.tcx-org {
	--tcx-org-line: var( --e-global-color-primary );
	--tcx-org-gap: 22px;        /* department box down to its role list */
	--tcx-org-role-gap: 12px;   /* between one role card and the next */
	--tcx-org-elbow: 26px;      /* card top down to where its elbow enters */
	--tcx-org-indent: 22px;     /* spine to card, i.e. the elbow's length */
	display: block;
	width: 100%;
}

/* Prose either side of the chart. Colour is set per instance because the
 * chart is used on both light and dark sections. */
.tcx-org .tcx-org__lead,
.tcx-org .tcx-org__caption {
	color: var( --tcx-org-ink, #000000 );
	font-size: 17px;
	line-height: 1.6;
	margin: 0 auto;
	max-width: 720px;
	text-align: center;
}

.tcx-org .tcx-org__lead { margin-bottom: 40px; }
.tcx-org .tcx-org__caption { margin-top: 40px; }

.tcx-org .tcx-org__top { display: flex; justify-content: center; }

.tcx-org .tcx-org__node {
	background: #FFFFFF;
	border: 1px solid var( --e-global-color-border );
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba( 15, 46, 138, 0.06 );
	box-sizing: border-box;
	color: #000000;
	display: block;
	padding: 14px 18px;
}

.tcx-org .tcx-org__node--company {
	background: var( --e-global-color-primary );
	border-color: var( --e-global-color-primary );
	color: #FFFFFF;
	font-weight: 700;
	letter-spacing: -0.01em;
	padding: 12px 26px;
}

/* Trunk from the company node down to the department row. */
.tcx-org .tcx-org__trunk {
	background: var( --tcx-org-line );
	height: 28px;
	margin: 0 auto;
	opacity: 0.45;
	width: 2px;
}

/**
 * A GRID, not a wrapping flex row, and the departments are subgrids of it.
 *
 * Two problems came from the flex version. Columns sized at `flex: 1 1 300px`
 * with a 260px floor could not fit four departments in a 1140px row, so the
 * fourth wrapped onto a line of its own and sat centred under the third with a
 * drop line rising into empty space. And because each column sized itself
 * independently, a department whose goal wrapped to a second line pushed its
 * own role list ~30px below the three beside it, so nothing lined up across
 * the row.
 *
 * `grid-template-rows: subgrid` over `grid-row: span 2` makes every
 * department share ONE header row and ONE roles row with its neighbours, so
 * the header boxes are all as tall as the tallest and every role list starts
 * on the same line, whatever the copy says. Where subgrid is unsupported the
 * declaration is simply dropped and each department falls back to sizing its
 * own two rows, which is the old behaviour rather than a broken one.
 *
 * The 26px of headroom for the drop connectors lives on the ROW, not on each
 * department. Padding on a subgrid item offsets its tracks from the parent's
 * and would undo the alignment this is here to get.
 */
.tcx-org .tcx-org__depts {
	--tcx-org-dept-gap: 28px;
	display: grid;
	gap: var( --tcx-org-gap ) var( --tcx-org-dept-gap );
	grid-template-columns: repeat( auto-fit, minmax( 226px, 1fr ) );
	justify-content: center;
	padding-top: 26px;
	position: relative;
}

.tcx-org .tcx-org__dept {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	position: relative;
	row-gap: var( --tcx-org-gap );
}

/**
 * The rail joining the departments is drawn PER DEPARTMENT, not as one bar
 * across the row.
 *
 * It used to be a single absolute bar on the row at `left: 12%; right: 12%`,
 * which is only a guess at where the outermost departments' centres fall. With
 * three columns those centres land near 16% and 84%, so the bar overshot by
 * roughly 45px at each end and left a stub hanging past the outer drop — the
 * stray line in the corner. A wrapped row was worse: one rail was painted
 * across the first row only, so anything on a second row had a drop with
 * nothing above it.
 *
 * Each department now paints its own segment, reaching half the gap into each
 * neighbour, and the first and last stop dead on their own centre. The
 * endpoints are then exact for any column count at any width, with no
 * percentage arithmetic to keep in sync.
 */
.tcx-org .tcx-org__dept::after {
	background: var( --tcx-org-line );
	content: "";
	height: 2px;
	left: calc( -0.5 * var( --tcx-org-dept-gap, 28px ) );
	opacity: 0.45;
	position: absolute;
	right: calc( -0.5 * var( --tcx-org-dept-gap, 28px ) );
	top: -26px;
}

.tcx-org .tcx-org__dept:first-child::after { left: 50%; }
.tcx-org .tcx-org__dept:last-child::after { right: 50%; }

/* One department needs no rail at all, only the trunk. */
.tcx-org .tcx-org__dept:only-child::after { display: none; }

/* Drop from the rail into each department box. */
.tcx-org .tcx-org__dept::before {
	background: var( --tcx-org-line );
	content: "";
	height: 26px;
	left: 50%;
	opacity: 0.45;
	position: absolute;
	top: -26px;
	width: 2px;
}

/* Equal heights across the row come from the subgrid on .tcx-org__depts, not
   from a min-height guess here. `align-content: flex-start` keeps the name and
   goal at the top of a box that the subgrid may have stretched. */
.tcx-org .tcx-org__node--dept {
	align-content: flex-start;
	align-items: baseline;
	background: var( --e-global-color-surface-alt );
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	justify-content: space-between;
}

.tcx-org .tcx-org__dept-name { font-weight: 700; }

.tcx-org .tcx-org__cap {
	color: #000000;
	font-size: 13px;
	opacity: 0.7;
}

/* A department's goal. Sits on its own line under the name and ceiling. */
.tcx-org .tcx-org__goal {
	color: #000000;
	flex-basis: 100%;
	font-size: 13px;
	line-height: 1.45;
	opacity: 0.75;
}

.tcx-org .tcx-org__roles {
	display: flex;
	flex-direction: column;
	gap: var( --tcx-org-role-gap );
	list-style: none;
	margin: 0;
	padding: 0 0 0 var( --tcx-org-indent );
	position: relative;
}

/**
 * The spine is drawn PER ROLE, not as one line down the whole list.
 *
 * It used to be a single absolute line on the list with `bottom: 22px`, which
 * assumed every role card was the same height. Role cards are not: the last one
 * is usually taller than 22px below its elbow, so the spine ran past the final
 * connector and left a stray stub hanging in the bottom corner. Segmenting it
 * means the line can only ever end exactly where the last elbow is.
 */

/**
 * Only the drop from the department down into the FIRST role's elbow.
 *
 * It starts in the gap ABOVE the list, so its top is minus that gap and its
 * length is the gap plus the elbow offset. The old rule hardcoded `-12px` and
 * `38px` while the actual gap above the list is `--tcx-org-gap` (22px), so the
 * line began 10px below the department box instead of touching it.
 */
.tcx-org .tcx-org__roles::before {
	background: var( --tcx-org-line );
	content: "";
	height: calc( var( --tcx-org-gap ) + var( --tcx-org-elbow ) );
	left: 0;
	opacity: 0.3;
	position: absolute;
	top: calc( -1 * var( --tcx-org-gap ) );
	width: 2px;
}

.tcx-org .tcx-org__role { position: relative; }

/* Elbow from the spine into each role. */
.tcx-org .tcx-org__role::before {
	background: var( --tcx-org-line );
	content: "";
	height: 2px;
	left: calc( -1 * var( --tcx-org-indent ) );
	opacity: 0.3;
	position: absolute;
	top: var( --tcx-org-elbow );
	width: var( --tcx-org-indent );
}

/**
 * Carries the spine from this role's elbow down to the NEXT ONE. The last role
 * has no `::after`, so the line stops dead at its own elbow and cannot overshoot
 * however tall that card happens to be.
 *
 * `bottom` has to clear the gap AND the next card's elbow offset. It read
 * `-12px`, the gap alone, which left the line ending exactly on the next card's
 * top edge — 26px short of the elbow it was supposed to reach. Every column
 * therefore showed a stack of disconnected stubs rather than one spine, which is
 * what "Accounts Receivable is not connected to Invoicing" was.
 */
.tcx-org .tcx-org__role:not( :last-child )::after {
	background: var( --tcx-org-line );
	bottom: calc( -1 * ( var( --tcx-org-role-gap ) + var( --tcx-org-elbow ) ) );
	content: "";
	left: calc( -1 * var( --tcx-org-indent ) );
	opacity: 0.3;
	position: absolute;
	top: var( --tcx-org-elbow );
	width: 2px;
}

.tcx-org .tcx-org__node--role { padding: 12px 16px; }

.tcx-org .tcx-org__role-name { display: block; font-weight: 600; }

/* Every role states what it is there to achieve, not just the expanded one. */
.tcx-org .tcx-org__role-goal {
	color: #000000;
	display: block;
	font-size: 13px;
	line-height: 1.45;
	margin-top: 4px;
	opacity: 0.72;
}

.tcx-org .tcx-org__role--open .tcx-org__node--role {
	border-color: var( --e-global-color-primary );
	box-shadow: 0 6px 18px rgba( 15, 46, 138, 0.10 );
}

.tcx-org .tcx-org__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.tcx-org .tcx-org__chip {
	background: var( --e-global-color-surface-alt );
	border-radius: 999px;
	color: #000000;
	font-size: 13px;
	padding: 4px 12px;
}

.tcx-org .tcx-org__chip--cap {
	background: var( --e-global-color-primary );
	color: #FFFFFF;
}

.tcx-org .tcx-org__crew {
	color: #000000;
	display: block;
	flex-basis: 100%;
	font-size: 13px;
	opacity: 0.75;
}

/* Below the department breakpoint the rail reads as noise, so drop it. */
@media ( max-width: 767px ) {
	.tcx-org .tcx-org__depts { --tcx-org-dept-gap: 20px; padding-top: 0; }
	.tcx-org .tcx-org__dept::after { display: none; }
	.tcx-org .tcx-org__dept::before { display: none; }
	.tcx-org .tcx-org__trunk { height: 18px; }
}