/* =============================================================================
   ampeco/tw-founding-timeline — the About us "Investors and backing" timeline
   -----------------------------------------------------------------------------
   Geometry verbatim from the export, read off a local render of it.

   Two places where the export's own values are NOT copied, both because they
   are only correct at one width with one number of columns:

   • The rail. The export pins it at `left:141px; right:141px`. 141 is half a
     column at exactly 1200 wide with exactly four columns — it is the run from
     the first dot's centre to the last dot's. Expressed that way here instead,
     from --tw-ft-cols (set by render.php) and the gap, so a fifth milestone or
     a narrower measure still puts the rail through the dots.
   • The column's `max-width:283px`. (1200 - 3x24) / 4 = 282, so at the design's
     own width the cap never binds — it describes the result rather than causing
     it. Kept out, because with three columns it WOULD bind, the row would stop
     filling the measure, and the rail arithmetic above would then be wrong.

   • The rail's vertical position is derived from the type stack above it rather
     than hardcoded at the export's 99px (which is 1px off its own render's 98).
     Change the year size and the rail still lands on the dots.

   Tokens wherever the design agrees with the DS — brand, brand-alternative,
   surface, border and both text greys all map. `#53606C` (the label) and
   `#9CC6F5` (the drop line) do not; they are bespoke values recorded in
   tasks/about-2026/NOTES.md and declared once here so they stay greppable.

   White is --color-bg-default-binary, NOT --color-white-100. The theme's app.css
   redefines --color-white-100 as rgba(255,255,255,.1) on :root and loads after
   ampeco-base.css, so that token resolves to 10% white everywhere on this site.
   Measured, not assumed: the cards rendered at rgba(255,255,255,0.1). Site-wide
   finding — see known-issues.md.

   No animation: the export does not animate this section, so there is nothing
   to port and nothing to viewport-gate.
   ============================================================================= */

.tw-founding-timeline {
	--tw-ft-gap: 24px;
	--tw-ft-cols: 4;            /* overridden inline by render.php */
	--tw-ft-label: #53606C;     /* BESPOKE — --p-raven-100 has no semantic slot */
	--tw-ft-drop: #9CC6F5;      /* BESPOKE — not in the 124-colour palette */
	--tw-ft-tint: #EDF5FE;      /* BESPOKE — the present card's wash */

	/* The rail sits on the dot centres; derived, not measured. */
	--tw-ft-year-lh: 46px;
	--tw-ft-label-gap: 10px;
	--tw-ft-label-lh: 12px;
	--tw-ft-dot-gap: 22px;
	--tw-ft-dot: 16px;

	position: relative;
	display: flex;
	gap: var(--tw-ft-gap);
	justify-content: center;
	align-items: stretch;
}

/* ---- the rail ------------------------------------------------------------ */
.tw-founding-timeline__rail {
	position: absolute;
	left: calc((100% - (var(--tw-ft-cols) - 1) * var(--tw-ft-gap)) / var(--tw-ft-cols) / 2);
	right: calc((100% - (var(--tw-ft-cols) - 1) * var(--tw-ft-gap)) / var(--tw-ft-cols) / 2);
	top: calc(
		var(--tw-ft-year-lh) + var(--tw-ft-label-gap) + var(--tw-ft-label-lh)
		+ var(--tw-ft-dot-gap) + var(--tw-ft-dot) / 2
	);
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		var(--c-surface-3, #CEE5FD) 0%,
		var(--color-text-brand-secondary, #50A4FA) 55%,
		var(--color-text-brand, #0E60C3) 100%
	);
}

/* ---- a column ------------------------------------------------------------ */
.tw-founding-timeline__col {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.tw-founding-timeline__year {
	font-family: var(--font-display, "Manrope", sans-serif);
	font-weight: 300;
	font-size: var(--tw-ft-year-lh);
	line-height: 1;
	color: var(--color-text-brand, #0E60C3);
}

.tw-founding-timeline__label {
	margin-top: var(--tw-ft-label-gap);
	font-family: var(--font-body, "Lexend", sans-serif);
	font-weight: 600;
	font-size: var(--tw-ft-label-lh);
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tw-ft-label);
}

/* ---- the dot: white, brand ring, brand-alternative pip -------------------- */
.tw-founding-timeline__dot {
	position: relative;
	z-index: 1;
	margin-top: var(--tw-ft-dot-gap);
	width: var(--tw-ft-dot);
	height: var(--tw-ft-dot);
	border-radius: 50%;
	background: var(--color-bg-default-binary, #fff);
	/* The 5px halo is the panel behind it, so the rail is masked at each stop. */
	box-shadow:
		0 0 0 5px var(--color-bg-default, #F5FAFF),
		inset 0 0 0 2px var(--color-text-brand, #0E60C3);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tw-founding-timeline__dot::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-text-brand-secondary, #50A4FA);
}

.tw-founding-timeline__drop {
	width: 2px;
	height: 26px;
	margin: 8px 0 12px;
	background: linear-gradient(180deg, var(--tw-ft-drop), transparent);
}

/* ---- the card ------------------------------------------------------------ */
.tw-founding-timeline__card {
	align-self: stretch;
	flex: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 26px;
	border-radius: 16px;
	text-align: left;
	background: var(--color-bg-default-binary, #fff);
	box-shadow:
		inset 0 0 0 1px var(--color-border-default, #A7B1C1),
		0 4px 14px rgba(50, 50, 93, 0.08);
}

.tw-founding-timeline__title {
	font-family: var(--font-body, "Lexend", sans-serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.35;
	color: var(--color-text-default, #1A1E22);
}

.tw-founding-timeline__body {
	font-family: var(--font-body, "Lexend", sans-serif);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-secondary, #454F59);
}

/* ---- the present column --------------------------------------------------- */
.tw-founding-timeline__col.is-current .tw-founding-timeline__label {
	color: var(--color-text-brand, #0E60C3);
}
.tw-founding-timeline__col.is-current .tw-founding-timeline__dot {
	/* 18px against 16, so the 1px it gains at the top is taken off the margin —
	   the dot centre stays on the rail. */
	margin-top: calc(var(--tw-ft-dot-gap) - 1px);
	width: 18px;
	height: 18px;
	background: var(--color-text-brand, #0E60C3);
	box-shadow:
		0 0 0 5px var(--color-bg-default, #F5FAFF),
		0 0 0 7px rgba(14, 96, 195, 0.22);
}
.tw-founding-timeline__col.is-current .tw-founding-timeline__dot::after { content: none; }
.tw-founding-timeline__col.is-current .tw-founding-timeline__drop {
	background: linear-gradient(180deg, var(--color-text-brand, #0E60C3), transparent);
}
.tw-founding-timeline__col.is-current .tw-founding-timeline__card {
	background: var(--tw-ft-tint);
	box-shadow:
		inset 0 0 0 1px var(--color-text-brand, #0E60C3),
		0 4px 14px rgba(14, 96, 195, 0.12);
}

/* -----------------------------------------------------------------------------
   Narrow. The export has no view below its own width; four 282px columns need
   ~1200 and there is no honest way to keep a horizontal rail once they wrap, so
   the rail is dropped and each milestone keeps its own dot and drop. */
@media (max-width: 1023px) {
	.tw-founding-timeline { flex-wrap: wrap; }
	.tw-founding-timeline__rail { display: none; }
	.tw-founding-timeline__col { flex: 1 1 calc(50% - var(--tw-ft-gap)); }
}

@media (max-width: 639px) {
	.tw-founding-timeline {
		--tw-ft-year-lh: 38px;
		--tw-ft-gap: 20px;
	}
	.tw-founding-timeline__col { flex: 1 1 100%; }
	.tw-founding-timeline__card { padding: 22px 20px; }
}