/**
 * Investor deck market timeline section.
 */

.swft-mt {
	--swft-mt-lab: #1f4f1f;
	--swft-mt-scale: #7cb342;
	--swft-mt-revenue: #6ec1e4;
	--swft-mt-text: #444b44;
	--swft-mt-muted: #8a958c;
	--swft-mt-surface: #f5f7f3;
	--swft-mt-badge: #eceee9;
	position: relative;
	overflow: hidden;
	padding: 64px 0 72px;
	background: var(--swft-mt-surface);
}

.swft-mt__inner {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---- Shared element styling ---- */

.swft-mt__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 4px;
	font-family: "Dancing Script", cursive;
	font-size: 24px;
	line-height: 1.2;
	color: var(--swft-mt-scale);
}

.swft-mt__eyebrow-icon {
	display: inline-flex;
	width: 25px;
	flex: 0 0 auto;
	color: var(--swft-mt-scale);
}

.swft-mt__eyebrow-icon svg {
	width: 100%;
	height: auto;
	display: block;
}

.swft-mt__title {
	margin: 0;
	font-size: clamp(30px, 4vw, 50px);
	font-weight: 700;
	line-height: 1.05;
	color: #111;
}

.swft-mt__copy {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--swft-mt-text);
}

.swft-mt__copy strong {
	font-weight: 700;
	color: var(--swft-mt-text);
}

.swft-mt__node {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
}

.swft-mt__year {
	display: block;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}

.swft-mt__pt--lab .swft-mt__node {
	background: var(--swft-mt-lab);
}

.swft-mt__pt--scale .swft-mt__node {
	background: var(--swft-mt-scale);
}

.swft-mt__pt--revenue .swft-mt__node {
	background: var(--swft-mt-revenue);
}

.swft-mt__pt--lab .swft-mt__year {
	color: var(--swft-mt-lab);
}

.swft-mt__pt--scale .swft-mt__year {
	color: var(--swft-mt-scale);
}

.swft-mt__pt--revenue .swft-mt__year {
	color: var(--swft-mt-revenue);
}

.swft-mt__badge {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 18px 7px;
	border-radius: 13px;
	background: var(--swft-mt-badge);
	text-align: center;
	white-space: nowrap;
}

.swft-mt__badge-label {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.1;
}

.swft-mt__badge--lab .swft-mt__badge-label {
	color: var(--swft-mt-lab);
}

.swft-mt__badge--scale .swft-mt__badge-label {
	color: var(--swft-mt-scale);
}

.swft-mt__badge--revenue .swft-mt__badge-label {
	color: var(--swft-mt-revenue);
}

.swft-mt__badge-range {
	font-size: 13px;
	color: var(--swft-mt-muted);
}

.swft-mt__beyond-title {
	margin: 0 0 8px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	color: var(--swft-mt-revenue);
}

.swft-mt__beyond-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--swft-mt-muted);
}

.swft-mt__beyond-text strong {
	color: var(--swft-mt-text);
}

/* ---- Mobile-first stacked layout ---- */

.swft-mt__header {
	margin: 0 auto 28px;
	text-align: center;
}

.swft-mt__path {
	display: none;
}

.swft-mt__points {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-left: 26px;
	border-left: 4px solid var(--swft-mt-scale);
}

.swft-mt__pt {
	position: relative;
	padding: 0 0 26px 16px;
}

.swft-mt__pt::before {
	content: "";
	position: absolute;
	left: -35px;
	top: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--swft-mt-scale);
}

.swft-mt__pt--lab::before {
	background: var(--swft-mt-lab);
}

.swft-mt__pt--revenue::before {
	background: var(--swft-mt-revenue);
}

.swft-mt__node {
	display: none;
}

.swft-mt__year {
	margin-bottom: 4px;
}

.swft-mt__copy--top {
	margin-bottom: 6px;
}

.swft-mt__copy--bottom {
	margin-top: 4px;
}

.swft-mt__badge {
	margin-top: 12px;
	align-items: flex-start;
}

.swft-mt__beyond {
	margin: 10px 0 0 16px;
	padding: 22px 24px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 16px 38px rgba(15, 55, 20, 0.1);
}

/* ---- Desktop horizontal path layout ---- */

@media (min-width: 1025px) {
	.swft-mt {
		padding: 72px 0 80px;
	}

	.swft-mt__header {
		margin: 0 auto 44px;
		text-align: center;
		max-width: 760px;
	}

	.swft-mt__title {
		margin: 0 auto;
		max-width: none;
	}

	.swft-mt__board {
		position: relative;
		height: 372px;
	}

	.swft-mt__path {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	.swft-mt__seg {
		fill: none;
		stroke-width: 11;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.swft-mt__seg--lab {
		stroke: var(--swft-mt-lab);
	}

	.swft-mt__seg--scale {
		stroke: var(--swft-mt-scale);
	}

	.swft-mt__seg--revenue {
		stroke: var(--swft-mt-revenue);
	}

	.swft-mt__arrow {
		fill: var(--swft-mt-revenue);
	}

	.swft-mt__points {
		position: static;
		display: block;
		padding: 0;
		border: 0;
	}

	/* Each .swft-mt__pt is a zero-size anchor at the node coordinate. */
	.swft-mt__pt {
		position: absolute;
		left: var(--swft-mt-x);
		top: var(--swft-mt-y);
		width: 0;
		height: 0;
		padding: 0;
		z-index: 2;
	}

	.swft-mt__pt::before {
		content: none;
	}

	.swft-mt__node {
		display: block;
		position: absolute;
		left: -9px;
		top: -9px;
		box-shadow: 0 0 0 4px var(--swft-mt-surface);
	}

	.swft-mt__year {
		position: absolute;
		left: -80px;
		top: 16px;
		width: 160px;
		margin: 0;
		text-align: center;
	}

	.swft-mt__copy {
		position: absolute;
		left: -95px;
		width: 190px;
		margin: 0;
		text-align: center;
	}

	.swft-mt__copy--top {
		bottom: 24px;
	}

	.swft-mt__copy--bottom {
		top: 56px;
	}

	.swft-mt__badge {
		position: absolute;
		top: var(--swft-mt-badge-y, 60px);
		left: -59px;
		width: 118px;
		margin: 0;
		align-items: center;
	}

	.swft-mt__beyond {
		position: absolute;
		top: -8px;
		right: 0;
		z-index: 3;
		width: 252px;
		margin: 0;
		padding: 22px 24px;
		border-radius: 20px;
		background: #fff;
		box-shadow: 0 18px 44px rgba(15, 55, 20, 0.12);
	}
}

/* ---- Mobile / tablet centered alternating timeline (<=1024px) ---- */

@media (max-width: 1024px) {
	.swft-mt__points {
		position: relative;
		display: block;
		padding-left: 0;
		border-left: 0;
	}

	.swft-mt__points::before {
		content: "";
		position: absolute;
		top: 4px;
		bottom: 0;
		left: 50%;
		width: 4px;
		margin-left: -2px;
		background: var(--swft-mt-scale);
	}

	.swft-mt__pt {
		position: relative;
		padding: 0 0 32px;
		min-height: 36px;
	}

	.swft-mt__pt::before {
		left: 50%;
		top: 4px;
		margin-left: -8px;
	}

	.swft-mt__pt:nth-child(odd) {
		padding-right: calc(50% + 18px);
		text-align: right;
	}

	.swft-mt__pt:nth-child(even) {
		padding-left: calc(50% + 18px);
		text-align: left;
	}

	.swft-mt__badge {
		margin-top: 12px;
	}

	#traction .swft-mt__points {
		border-left: 0;
	}

	#traction .swft-mt__points::before {
		background: #bbdf56;
	}
}

@media (max-width: 767px) {
	.swft-mt {
		padding: 44px 0 56px;
	}

	.swft-mt__inner {
		padding: 0 16px;
	}

	.swft-mt__title {
		font-size: 28px;
	}
}

/* ---- Dark-green "grass + grid" framed variant ---- */
/* The #traction container restores the parent theme's dark grid + grass
   backdrop; these rules let the light timeline read correctly on it. */

/* Supply a working grass strip (parent theme references a missing grass3.png). */
#traction.pxl-bg-pattern-caro-grass-3::after {
	/* Recolor the grass to the section's dark green via a mask so its base
	   merges seamlessly into the section and the tips read as a silhouette
	   over the white area above (no light-green band, no white sliver). */
	background-image: none;
	background-color: #0F3714;
	-webkit-mask-image: url("/wp-content/themes/landscop/assets/img/grass.svg");
	mask-image: url("/wp-content/themes/landscop/assets/img/grass.svg");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-position: bottom;
	mask-position: bottom;
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	height: 86px;
	top: -72px;
}

#traction .swft-mt {
	--swft-mt-surface: #0f3714;
	background: transparent;
	overflow: visible;
	padding-top: 96px;
}

@media (min-width: 1025px) {
	/* Trim 200px of the section's large top padding (was 425px) above the
	   "Seed, Grow, Scale" header on desktop. */
	#traction {
		--padding-top: 255px;
	}

	#traction .swft-mt {
		padding-top: 150px;
	}
}

@media (max-width: 767px) {
	/* Add 100px of breathing room above the "Seed, Grow, Scale" header on
	   mobile (was 150px). */
	#traction .swft-mt {
		padding-top: 280px;
	}
}

#traction .swft-mt__title {
	color: #ffffff !important;
}

#traction .swft-mt__copy {
	color: #dfe8da;
}

#traction .swft-mt__copy strong {
	color: #ffffff;
}

#traction .swft-mt__pt--lab .swft-mt__node,
#traction .swft-mt__pt--lab::before {
	background: #bbdf56;
}

#traction .swft-mt__pt--lab .swft-mt__year {
	color: #bbdf56;
}

#traction .swft-mt__points {
	border-left-color: #bbdf56;
}

@media (min-width: 1025px) {
	#traction .swft-mt__seg--lab {
		stroke: #bbdf56;
	}
}