/* Latorium Roadmap v19 — living bough
   ---------------------------------------------------------------------------
   Growth model
     JS writes a single --grow (0→1) per phase <svg>. Every stroke derives its
     own dashoffset from that with a per-element --i stagger, so limbs unfurl
     one after another under the scrollbar and furl again on the way back up.
     Nothing else is written per frame.
   ------------------------------------------------------------------------- */
:root {
	--road-accent: var(--accent, #e0bc77);
	--road-accent-dim: var(--accent-dim, #b99a52);
	--road-paper: var(--paper, #0b0b0e);
	--road-paper-2: var(--paper-2, #141419);
	--road-ink: var(--ink, #f2f2f5);
	--road-ink-2: var(--ink-2, #b2b2bb);
	--road-ink-3: var(--ink-3, #8a8a94);
	--road-rule: var(--rule, #26262e);
	--road-research: #a1786b;
	--road-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.roadmap-page {
	background: var(--road-paper);
	color: var(--road-ink);
}
.roadmap-page main {
	overflow: clip;
}

/* ── hero ─────────────────────────────────────────────────────────────── */
.roadmap-hero {
	position: relative;
	padding: 140px 0 110px;
	border-bottom: 1px solid var(--road-rule);
	background: linear-gradient(180deg, rgba(224, 188, 119, 0.025), transparent 60%);
}
.hero-kicker {
	margin: 0 0 18px;
	font: 650 11px/1.2 var(--font-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--road-accent);
}
.roadmap-hero h1 {
	margin: 0 0 26px;
	font-size: clamp(52px, 6.6vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.048em;
	font-weight: 500;
	max-width: 13ch;
	text-wrap: balance;
}
.hero-lead {
	margin: 0;
	max-width: 60ch;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.65;
	color: var(--road-ink-2);
}

/* ── left rail ────────────────────────────────────────────────────────── */
/* The rail is fixed, but the hero has no left gutter reserved for it, so
   over the hero it sat on top of the headline. It now belongs to the route:
   it arrives when the tree does and leaves when the tree ends.
   Gated on .road-js so that without scripting it simply stays visible. */
.phase-rail {
	position: fixed;
	left: 28px;
	top: 96px;
	z-index: 40;
	width: 220px;
	pointer-events: none;
}
.road-js .phase-rail {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-10px);
	transition:
		opacity 0.5s var(--road-ease),
		transform 0.5s var(--road-ease),
		visibility 0.5s;
}
.road-js .phase-rail.is-live {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.rail-track {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--road-rule);
	padding: 0 0 0 16px;
}
.rail-heading {
	font: 650 10px/1 var(--font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--road-ink-3);
	margin: 0 0 14px;
}
.rail-track a {
	pointer-events: auto;
	display: grid;
	grid-template-columns: 24px 1fr 8px;
	align-items: center;
	gap: 8px;
	padding: 7px 0;
	color: var(--road-ink-3);
	font-family: var(--font-mono);
	text-decoration: none;
	transition:
		color 0.3s var(--road-ease),
		transform 0.3s var(--road-ease);
}
.rail-track a:hover {
	color: var(--road-ink);
	transform: translateX(3px);
}
.rail-track a[aria-current="step"] {
	color: var(--road-accent);
}
.rail-num {
	font-size: 10px;
	font-variant-numeric: tabular-nums;
}
.rail-name {
	font-size: 12px;
	white-space: nowrap;
}
.rail-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
	transition:
		opacity 0.3s var(--road-ease),
		box-shadow 0.3s var(--road-ease);
}
.rail-track a[aria-current="step"] .rail-dot {
	opacity: 1;
	box-shadow: 0 0 0 4px rgba(224, 188, 119, 0.08);
}

/* ── route + per-phase canvas ─────────────────────────────────────────── */
.roadmap-route {
	position: relative;
	isolation: isolate;
	background: var(--road-paper);
}

.phase-canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Size containment caused zero-sized canvases in some embedded browsers. */
	contain: layout paint;
}
/* --unfurl is declared here, not on the strokes themselves: a value set
   directly on an element beats one inherited from an ancestor, so putting it
   on .limb/.twig made .crown's override silently ineffective. */
.phase-tree {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	--unfurl: 9;
}
.limbs {
	transform-box: view-box;
}

/* --grow (0→1, written per phase by JS) is where the growing tip of the
   trunk has reached, expressed as a fraction of the phase's own height.
   --seat is where a branch is rooted on that trunk. A branch therefore
   unfurls exactly as the trunk passes it, and everything is derived — the
   only thing written per frame is --grow.
   pathLength="1" normalises every path, so 1px here = the whole path. */
.rail,
.vein,
.limb,
.twig {
	fill: none;
	vector-effect: non-scaling-stroke;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1px;
}

/* The trunk tip tracks the scroll line exactly. --trunk-span is 1 for every
   phase but the last, whose trunk stops early to hand over to the crown —
   dividing by it keeps the tip on the scroll line all the same. */
.rail {
	stroke: var(--road-accent);
	stroke-width: 4.5;
	opacity: 0.94;
	stroke-dashoffset: clamp(0px, calc((1 - var(--grow, 0) / var(--trunk-span, 1)) * 1px), 1px);
}
.vein {
	stroke: rgba(224, 188, 119, 0.34);
	stroke-width: 1.4;
	stroke-dashoffset: clamp(0px, calc((1.04 - var(--grow, 0) / var(--trunk-span, 1)) * 1px), 1px);
}

.limb {
	stroke: rgba(224, 188, 119, 0.86);
	stroke-width: 2.6;
	stroke-dashoffset: clamp(0px, calc((1 - (var(--grow, 0) - var(--seat)) * var(--unfurl)) * 1px), 1px);
	transition:
		stroke 0.35s var(--road-ease),
		stroke-width 0.35s var(--road-ease);
}
/* the twig waits for its own limb to be most of the way out */
.twig {
	stroke: rgba(185, 154, 82, 0.46);
	stroke-width: 1.2;
	stroke-dashoffset: clamp(
		0px,
		calc((1 - (var(--grow, 0) - var(--seat) - 0.055) * var(--unfurl)) * 1px),
		1px
	);
}

/* ── the finale ───────────────────────────────────────────────────────────
   Where the last trunk runs out the route opens into a crown. The boughs
   reuse the limb/twig growth model; the leaves scale open from nothing on
   the same --seat cue, so the whole thing blooms under the closing scroll. */
.crown {
	--unfurl: 9;
	--leafrate: 13;
}
.crown-bough {
	stroke-width: 3.2;
	stroke: rgba(224, 188, 119, 0.88);
}
.crown-sprig {
	stroke-width: 1.3;
	stroke: rgba(200, 162, 93, 0.62);
}

/* the haze the canopy sits inside — one element carrying the glow that
   two hundred per-leaf drop-shadows would otherwise have to pay for */
.crown-halo {
	--seat: 0;
	opacity: clamp(0, calc((var(--grow, 0) - var(--seat)) * var(--leafrate, 13) * 0.5), 1);
}
.crown-halo {
	transform-box: fill-box;
	transform-origin: center;
}

.leaf {
	--seat: 0;
	--n: 0;
	fill: var(--road-accent);
	opacity: clamp(0, calc((var(--grow, 0) - var(--seat)) * var(--leafrate, 13)), 1);
	transform: scale(clamp(0, calc((var(--grow, 0) - var(--seat)) * var(--leafrate, 13)), 1));
	transform-box: fill-box;
	transform-origin: center;
}
.leaf[data-tone="dim"] {
	fill: var(--road-accent-dim);
}
.leaf[data-tone="pale"] {
	fill: #f4e4c2;
}
/* a scattered few catch the light, so the canopy glints without every
   leaf running its own filter */
.leaf[data-glint] {
	filter: drop-shadow(0 0 7px rgba(240, 214, 150, 0.55));
}

/* Lite mode: no filters at all (each one forces its own raster pass), no
   self-running glow, and the vein drops out of the trunk. */
.road-lite .leaf {
	filter: none !important;
}
.road-lite .crown-glow {
	animation: none;
}
.road-lite .vein {
	display: none;
}
.road-lite .ripple {
	display: none;
}

/* Tips are the data: one per objective, coloured by status. A tip only
   surfaces once its own limb has finished drawing — otherwise you get dots
   floating in space ahead of the branch that carries them. */
.tip {
	--seat: 0;
	fill: var(--road-accent-dim);
	opacity: clamp(0, calc((var(--grow, 0) - var(--seat) - 0.12) * 14), 1);
	transition:
		fill 0.35s var(--road-ease),
		r 0.35s var(--road-ease);
}
.tip[data-status="next"] {
	fill: var(--road-accent);
}
.tip[data-status="research"] {
	fill: var(--road-research);
}
.tip[data-status="external"] {
	fill: var(--road-ink-3);
}

/* cross-highlight: hovering an objective row lights its limb, and back */
.limb.is-lit {
	stroke: var(--road-ink);
	stroke-width: 3.4;
}
.tip.is-lit {
	r: 6;
}
.objectives li.is-lit {
	background: rgba(224, 188, 119, 0.05);
}

/* ── the part that makes it feel alive ────────────────────────────────── */

/* Nothing in the SVG animates on a timer.
   stroke-dashoffset, filter and SVG-group transform are all *paint*
   properties: none can be handed to the compositor, so animating any of
   them repaints a section-sized region every frame for as long as the
   canvas is on screen. Measured on a 6x-throttled CPU, any single one of
   them held a core at 100% while the page sat completely idle.
   The motion now comes from scrolling (which only paints while the user is
   actually moving) plus one composited layer below. */

/* the trunk's sap channel — drawn, not animated */
.sap {
	fill: none;
	stroke: rgba(255, 240, 210, 0.3);
	stroke-width: 1.6;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1px;
	opacity: calc(var(--grow, 0) * 0.5);
	stroke-dashoffset: clamp(0px, calc((1 - var(--grow, 0) / var(--trunk-span, 1)) * 1px), 1px);
}

/* The one thing that still moves on its own: a plain div with a gradient,
   promoted to its own layer. The compositor rescales an existing texture,
   so it costs no main-thread work at all. */
.crown-glow {
	position: absolute;
	pointer-events: none;
	/* closest-side (not a clipped circle) so the falloff finishes inside the
     box — a border-radius crop left a visible hard rim on the gradient */
	background: radial-gradient(
		closest-side,
		rgba(224, 188, 119, 0.11),
		rgba(200, 162, 93, 0.04) 48%,
		transparent 76%
	);
	opacity: 0;
	will-change: transform, opacity;
	transition: opacity 0.8s var(--road-ease);
}
.phase.is-reached .crown-glow {
	opacity: 1;
	animation: glowBreathe 9s ease-in-out infinite alternate;
}
@keyframes glowBreathe {
	from {
		transform: scale(0.92);
	}
	to {
		transform: scale(1.08);
	}
}

/* node arrival ripple */
.node-ring {
	fill: var(--road-paper);
	stroke: var(--road-accent);
	stroke-width: 2.2;
	vector-effect: non-scaling-stroke;
}
.node-core {
	fill: var(--road-accent);
}
.node-number {
	font: 650 11px/1 var(--font-mono);
	letter-spacing: 0.1em;
	fill: var(--road-accent-dim);
	paint-order: stroke;
	stroke: var(--road-paper);
	stroke-width: 5px;
	stroke-linejoin: round;
}
.ripple {
	fill: none;
	stroke: var(--road-accent);
	stroke-width: 1.3;
	opacity: 0;
	vector-effect: non-scaling-stroke;
	transform-box: fill-box;
	transform-origin: center;
}
.node.pulse .ripple {
	animation: nodeRipple 1.35s var(--road-ease) both;
}
.node.pulse .ripple-2 {
	animation-delay: 0.12s;
}
.node.pulse .ripple-3 {
	animation-delay: 0.24s;
}
@keyframes nodeRipple {
	0% {
		opacity: 0.72;
		transform: scale(0.7);
	}
	100% {
		opacity: 0;
		transform: scale(4.8);
	}
}

/* ── phase sections ───────────────────────────────────────────────────── */
.phase {
	position: relative;
	z-index: 2;
	min-height: 100svh;
	padding: 110px 0 120px;
	display: flex;
	align-items: center;
	scroll-margin-top: 72px;
}
/* the closing canopy needs clear section below it — the canvas is paint
   contained, so anything past the section edge is cut off mid-leaf */
.phase:last-of-type {
	padding-bottom: min(34vw, 470px);
}
.phase .page {
	width: 100%;
	max-width: none;
	padding: 0;
	position: relative;
	z-index: 2;
}
.phase-card {
	width: min(420px, 29vw);
	padding: 30px 28px 28px;
	background: linear-gradient(180deg, rgba(11, 11, 14, 0.94), rgba(11, 11, 14, 0.985));
	border: 1px solid var(--road-rule);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.42s var(--road-ease),
		transform 0.68s var(--road-ease),
		border-color 0.4s var(--road-ease);
}
.phase[data-road-phase="0"] .phase-card,
.phase[data-road-phase="2"] .phase-card,
.phase[data-road-phase="4"] .phase-card {
	margin-left: auto;
	margin-right: 48px;
	transform: translateX(52px);
}
.phase[data-road-phase="1"] .phase-card,
.phase[data-road-phase="3"] .phase-card,
.phase[data-road-phase="5"] .phase-card {
	margin-left: 280px;
	margin-right: auto;
	transform: translateX(-52px);
}

/* Once a phase has been reached its card stays legible — you can scroll back
   and compare instead of watching it vanish. */
.phase.is-reached .phase-card {
	opacity: 0.5;
	transform: translateX(0);
	pointer-events: auto;
}
.phase.is-reached .phase-card:hover,
.phase.is-reached .phase-card:focus-within {
	opacity: 1;
}
.phase.is-active .phase-card {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
	border-color: color-mix(in srgb, var(--road-accent) 34%, var(--road-rule));
}

.phase-id {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}
.phase-number {
	font: 650 11px/1 var(--font-mono);
	letter-spacing: 0.08em;
	color: var(--road-accent);
	padding: 5px 8px;
	border: 1px solid color-mix(in srgb, var(--road-accent) 30%, var(--road-rule));
}
.phase-meta {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.phase-window {
	font: 650 10px/1 var(--font-mono);
	letter-spacing: 0.1em;
	color: var(--road-accent-dim);
	text-transform: uppercase;
}
.phase-status {
	font: 650 9px/1 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--road-ink-3);
}
.phase-status.status-current {
	color: var(--road-accent);
}
.phase-status.status-research {
	color: var(--road-research);
}
.phase-header h2 {
	margin: 0 0 10px;
	font-size: clamp(31px, 2.5vw, 40px);
	line-height: 1.02;
	letter-spacing: -0.035em;
	font-weight: 500;
}
.phase-summary {
	margin: 0;
	color: var(--road-ink-2);
	font-size: 16px;
	line-height: 1.5;
	max-width: 45ch;
}
.phase-body {
	margin-top: 24px;
}
.phase-preface {
	margin: 0 0 22px;
	color: var(--road-ink-2);
	font-size: 15px;
	line-height: 1.58;
	max-width: 56ch;
}
.phase-preface.first {
	color: var(--road-ink);
	font-size: 17px;
	line-height: 1.5;
}

.objectives {
	list-style: none;
	margin: 0;
	padding: 0;
}
.objectives li {
	position: relative;
	display: grid;
	grid-template-columns: 28px 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 12px 6px;
	margin: 0 -6px;
	border-bottom: 1px solid var(--road-rule);
	transition: background 0.25s var(--road-ease);
}
.objectives li:first-child {
	border-top: 1px solid var(--road-rule);
}
.obj-index {
	font: 500 10px/1.45 var(--font-mono);
	color: var(--road-ink-3);
	padding-top: 3px;
	font-variant-numeric: tabular-nums;
}
.obj-content b {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.012em;
}
.obj-content p {
	margin: 0;
	color: var(--road-ink-2);
	font-size: 14px;
	line-height: 1.52;
	max-width: 48ch;
}
.obj-tag {
	justify-self: end;
	font: 650 9px/1 var(--font-mono);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--road-ink-3);
	padding-top: 3px;
	white-space: nowrap;
}
.objectives li[data-status="next"] .obj-index,
.objectives li[data-status="next"] .obj-tag {
	color: var(--road-accent);
}
.objectives li[data-status="research"] .obj-index,
.objectives li[data-status="research"] .obj-tag {
	color: var(--road-research);
}

.phase-gate {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--road-rule);
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-family: var(--font-mono);
}
.gate-label {
	font-size: 10px;
	letter-spacing: 0.12em;
	color: var(--road-ink-3);
	text-transform: uppercase;
}
.gate-name {
	font-size: 13px;
	color: var(--road-accent);
	letter-spacing: 0.05em;
}

/* ── signature ────────────────────────────────────────────────────────── */
.roadmap-signature {
	position: relative;
	z-index: 3;
	min-height: 30svh;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--road-paper);
	border-top: 1px solid rgba(255, 255, 255, 0.018);
}
.roadmap-signature::before {
	content: "";
	position: absolute;
	inset: -18% 0 0;
	background: linear-gradient(180deg, rgba(11, 11, 14, 0), var(--road-paper) 38%, var(--road-paper));
	opacity: 0;
	transition: opacity 1.15s var(--road-ease);
	pointer-events: none;
}
.roadmap-signature.is-visible::before {
	opacity: 1;
}
.signature-mark {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	color: var(--road-ink);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 560;
	letter-spacing: -0.02em;
	opacity: 0;
	transform: translateY(12px);
}
.roadmap-signature.is-visible .signature-mark {
	animation: signatureEnter 0.55s var(--road-ease) 0.34s forwards;
}
.signature-logo {
	width: clamp(52px, 5.2vw, 72px);
	height: clamp(52px, 5.2vw, 72px);
	object-fit: contain;
	/* start centred: offset by half the space the word will claim */
	transform: translateX(calc((var(--sig-w, 156px) + 14px) / 2));
	transform-origin: center;
}
.roadmap-signature.is-visible .signature-logo {
	animation: signatureLogo 1.05s cubic-bezier(0.22, 0.8, 0.24, 1) 0.55s forwards;
}
.signature-word {
	display: inline-block;
	width: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	margin-left: 0;
}
.signature-word > span {
	display: block;
	transform: translateX(-18px);
}
.roadmap-signature.is-visible .signature-word {
	animation: signatureWord 680ms var(--road-ease) 1.12s forwards;
}
.roadmap-signature.is-visible .signature-word > span {
	animation: signatureWordInner 680ms var(--road-ease) 1.12s forwards;
}
@keyframes signatureEnter {
	to {
		opacity: 0.92;
		transform: translateY(0);
	}
}
@keyframes signatureLogo {
	0% {
		transform: translateX(calc((var(--sig-w, 156px) + 14px) / 2)) rotate(0deg);
	}
	100% {
		transform: translateX(0) rotate(360deg);
	}
}
@keyframes signatureWord {
	to {
		width: var(--sig-w, 156px);
		opacity: 1;
		margin-left: 14px;
	}
}
@keyframes signatureWordInner {
	to {
		transform: translateX(0);
	}
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
	.phase-rail {
		left: 18px;
		width: 170px;
	}
	.rail-name {
		font-size: 11px;
	}
	.phase-card {
		width: min(360px, 34vw);
	}
	.phase[data-road-phase="1"] .phase-card,
	.phase[data-road-phase="3"] .phase-card,
	.phase[data-road-phase="5"] .phase-card {
		margin-left: 210px;
	}
}
@media (max-width: 880px) {
	.phase-rail {
		display: none;
	}
	.roadmap-hero {
		padding: 112px 0 80px;
	}
	.roadmap-route {
		overflow: hidden;
	}
	.phase-canvas {
		opacity: 0.42;
	}
	.crown-glow {
		animation: none;
	}
	.phase {
		min-height: auto;
		padding: 84px 0;
	}
	/* the crown needs clear space under the full-width card, or the finale
     blooms entirely behind an opaque panel */
	.phase:last-of-type {
		padding-bottom: min(60vw, 280px);
	}
	.phase:last-of-type .phase-canvas {
		opacity: 0.9;
	}
	.phase-card,
	.phase[data-road-phase] .phase-card {
		width: auto;
		margin: 0 20px;
		padding: 28px 20px;
		background: rgba(11, 11, 14, 0.94);
		border: 1px solid var(--road-rule);
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
	.phase-header h2 {
		font-size: clamp(30px, 8vw, 40px);
	}
	.objectives li {
		grid-template-columns: 28px 1fr;
	}
	.obj-tag {
		grid-column: 2;
		justify-self: start;
	}
}
@media (max-width: 640px) {
	.roadmap-hero h1 {
		font-size: clamp(42px, 12vw, 58px);
	}
	.hero-lead {
		font-size: 16px;
	}
	.obj-content b {
		font-size: 15px;
	}
	.obj-content p {
		font-size: 14px;
	}
	.phase-preface.first {
		font-size: 17px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.rail,
	.vein,
	.limb,
	.twig {
		stroke-dashoffset: 0px !important;
	}
	.tip {
		opacity: 1 !important;
		animation: none !important;
	}
	.leaf,
	.crown-halo {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
	.sap,
	.ripple {
		display: none !important;
	}
	.crown-glow {
		animation: none !important;
	}
	.road-js .phase-rail {
		transition: none !important;
	}
	.phase-card,
	.rail-track a,
	.objectives li {
		transition: none !important;
	}
	.phase-card {
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
	}
	.roadmap-signature::before {
		opacity: 1;
		transition: none;
	}
	.signature-mark {
		opacity: 0.92;
		transform: none;
	}
	.signature-logo {
		transform: none !important;
	}
	.signature-word {
		width: auto;
		opacity: 1;
		margin-left: 14px;
	}
	.signature-word > span {
		transform: none;
	}
}
@media print {
	.phase-rail,
	.phase-canvas,
	.progress {
		display: none !important;
	}
	.phase {
		min-height: auto;
		display: block;
		padding: 40px 0;
	}
	.phase-card {
		width: auto;
		margin: 0;
		opacity: 1 !important;
		transform: none;
		background: white;
		color: black;
		border: 1px solid #ccc;
	}
	.roadmap-page {
		background: white;
		color: black;
	}
}

/* v0.47 roadmap status + hero evidence */
.status-done {
	color: #9ed2a7;
}
.objectives li[data-status="done"] .obj-index,
.objectives li[data-status="done"] .obj-tag {
	color: #9ed2a7;
}
.tip[data-status="done"] {
	fill: #9ed2a7;
}
.roadmap-stats {
	margin-top: 42px;
	max-width: 860px;
}
.road-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	border-top: 1px solid var(--road-rule);
	border-bottom: 1px solid var(--road-rule);
}
.road-stats div {
	padding: 18px 18px 18px 0;
}
.road-stats dt {
	font: 650 10px/1.2 var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--road-ink-3);
	margin-bottom: 8px;
}
.road-stats dd {
	margin: 0;
	font: 600 18px/1.2 var(--font-mono);
	color: var(--road-ink);
}
.road-stats-note {
	max-width: 78ch;
	margin: 14px 0 0;
	font: 12px/1.55 var(--font-mono);
	color: var(--road-ink-3);
}
@media (max-width: 700px) {
	.road-stats {
		grid-template-columns: 1fr 1fr;
	}
	.road-stats div {
		border-bottom: 1px solid var(--road-rule);
	}
}