@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('type/Figtree-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('type/Figtree-Medium.ttf') format('truetype');
}

@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('type/Figtree-SemiBold.ttf') format('truetype');
}

@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('type/Figtree-Bold.ttf') format('truetype');
}

:root {
	--color-ground: #f6f7fc;
	--color-paper: #ffffff;
	--color-line: #c9ccdc;
	--color-text: #282d43;
	--color-muted: #5b627a;
	--color-accent: #4945a6;
	--color-tint: #efeffa;
	--space-s: .65em;
	--space-m: 1.1em;
	--space-l: 1.8em;
	--space-xl: 4em;
}

* {
	box-sizing: border-box;
}

html {
	color-scheme: light;
	scroll-padding-top: 2em;
}

body {
	margin: 0;
	background: var(--color-ground);
	color: var(--color-text);
	font-family: 'Figtree';
	font-size: 1em;
	line-height: 1.65;
}

h1, h2, h3, h4, p, ul, ol, dl {
	margin: 0;
}

h1, h2, h3, h4 {
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
}

h1 {
	max-inline-size: 19ch;
	font-size: clamp(2.3em, 5.2vw, 4.3em);
	letter-spacing: -.045em;
}

h2 {
	font-size: clamp(1.7em, 2.5vw, 2.3em);
	letter-spacing: -.025em;
}

h3 {
	font-size: clamp(1.4em, 2.2vw, 1.9em);
	letter-spacing: -.02em;
}

h4 {
	font-size: 1.15em;
	line-height: 1.35;
}

p {
	max-inline-size: 66ch;
}

a {
	color: var(--color-accent);
	text-underline-offset: .22em;
	text-decoration-thickness: .08em;
	overflow-wrap: anywhere;
}

a:hover {
	text-decoration-thickness: .15em;
}

:focus-visible {
	outline: .2em solid var(--color-accent);
	outline-offset: .25em;
}

section, [id] {
	scroll-margin-top: 2em;
}

.stack > * + * {
	margin-block-start: var(--space-stack, var(--space-m));
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s) var(--space-m);
}

.center {
	inline-size: 100%;
	max-inline-size: 72em;
	margin-inline: auto;
	padding-inline: clamp(1.1em, 4vw, 3em);
}

.box {
	padding: var(--space-box, var(--space-l));
	border: 1px solid var(--color-line);
	background: var(--color-paper);
}

.skip {
	position: fixed;
	inset-block-start: .7em;
	inset-inline-start: 1em;
	z-index: 10;
	transform: translateY(-200%);
	padding: .6em 1em;
	border: 2px solid var(--color-accent);
	background: var(--color-paper);
	color: var(--color-text);
}

.skip:focus {
	transform: none;
}

.kicker {
	color: var(--color-muted);
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .025em;
}

.small {
	color: var(--color-muted);
	font-size: .875em;
}

.lead {
	max-inline-size: 48ch;
	color: var(--color-muted);
	font-size: clamp(1.1em, 1.7vw, 1.3em);
	line-height: 1.6;
}

.button {
	display: inline-flex;
	min-block-size: 2.8em;
	align-items: center;
	justify-content: center;
	padding: .7em 1.15em;
	border: 1px solid var(--color-accent);
	background: var(--color-accent);
	color: var(--color-paper);
	font-weight: 700;
	text-decoration: none;
}

.button:hover, .button:focus {
	text-decoration: none;
}

.button-outline {
	background: transparent;
	color: var(--color-accent);
}

.button-outline:hover, .button-outline:focus {
	background: var(--color-accent);
	color: var(--color-paper);
}

.checklist {
	padding: 0;
	list-style: none;
}

.checklist > li {
	display: flex;
	align-items: flex-start;
	gap: .8em;
	padding-block: .75em;
	border-block-end: 1px solid var(--color-line);
}

.list-icon {
	flex: 0 0 1.25em;
	inline-size: 1.25em;
	block-size: 1.25em;
	margin-block-start: .25em;
	fill: none;
	stroke: var(--color-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.checklist > li > div {
	min-inline-size: 0;
}

.checklist > li > div > strong {
	display: block;
}

.note {
	padding: var(--space-m);
	border-inline-start: .2em solid var(--color-accent);
	background: var(--color-tint);
}

figure {
	margin: 0;
}

.chart {
	font-size: .95em;
	container-type: inline-size;
}

.chart figcaption {
	display: flex;
	align-items: center;
	gap: .75em;
	font-weight: 700;
	line-height: 1.3;
}

.chart p {
	max-inline-size: none;
}

.chart-big {
	display: block;
	font-size: 2.5em;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.035em;
	color: var(--color-accent);
	font-variant-numeric: tabular-nums;
}

.chart-icon {
	flex: 0 0 2.6em;
	inline-size: 2.6em;
	block-size: 2.6em;
	padding: .55em;
	background: var(--color-tint);
	fill: none;
	stroke: var(--color-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.chart-tiles, .chart-steps, .chart-sum {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	padding: 0;
	list-style: none;
}

.chart-tiles > li, .chart-steps > li, .chart-sum > li {
	position: relative;
	min-inline-size: 0;
	padding: 1em 1.2em 1.1em;
	background: var(--color-tint);
	color: var(--color-text);
	line-height: 1.35;
	overflow-wrap: break-word;
}

.chart-tiles > li > *, .chart-sum > li > * {
	display: block;
}

.chart-tiles > li > * + *, .chart-sum > li > * + * {
	margin-block-start: .3em;
}

.chart-tiles > li, .chart .is-now {
	background: var(--color-accent);
	color: var(--color-paper);
}

.chart .is-now {
	font-weight: 700;
}

.chart-tiles .chart-big, .chart .is-now .chart-big {
	color: var(--color-paper);
}

.chart-steps {
	gap: 2em;
}

.chart-steps > li {
	display: flex;
	align-items: center;
	gap: 1em;
}

.chart-steps .chart-big {
	flex: 0 0 1.4em;
}

.chart-steps > li + li::before {
	position: absolute;
	inset-block-start: -1.15em;
	inset-inline-start: .6em;
	color: var(--color-accent);
	font-size: 1.7em;
	font-weight: 700;
	line-height: 1;
	content: '↓' / '';
}

.chart-sum {
	gap: 2.4em;
}

.chart-sum .chart-op {
	position: absolute;
	inset-block-start: -1.05em;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	color: var(--color-accent);
	font-size: 2.2em;
	font-weight: 700;
	line-height: 1;
}

.carry {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9em 1.1em;
	padding: 1.4em;
	background: var(--color-accent);
	color: var(--color-paper);
}

.carry .chart-big {
	color: var(--color-paper);
	font-size: 2.9em;
}

.carry figcaption {
	flex: 1 1 100%;
	display: block;
	font-size: 1.05em;
	font-weight: 400;
	line-height: 1.45;
}

.checklist .ladder {
	margin-block-start: var(--space-m);
}

@container (min-width: 30em) {
	.chart-tiles {
		flex-direction: row;
		gap: .5em;
	}

	.chart-tiles > li {
		flex: 1 1 0;
	}
}

@container (min-width: 36em) {
	.chart-sum {
		flex-direction: row;
	}

	.chart-sum > li {
		flex: 1 1 0;
		padding-inline: .9em;
	}

	.chart-sum .chart-big {
		font-size: 1.65em;
	}

	.chart-sum .chart-op {
		inset-block-start: 50%;
		inset-inline-start: -.545em;
		transform: translate(-50%, -50%);
	}

	.chart-steps {
		flex-direction: row;
	}

	.chart-steps > li {
		flex: 1 1 0;
		flex-direction: column;
		align-items: flex-start;
		gap: .5em;
	}

	.chart-steps .chart-big {
		flex: none;
	}

	.chart-steps > li + li::before {
		inset-block-start: 50%;
		inset-inline-start: -.6em;
		transform: translate(-50%, -50%);
		content: '→' / '';
	}
}

.fees {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: .95em;
	table-layout: fixed;
}

.fees caption {
	padding-block-end: var(--space-s);
	font-weight: 700;
	text-align: start;
}

.fees th, .fees td {
	padding: .85em .65em;
	border-block-end: 1px solid var(--color-line);
	text-align: start;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.fees thead {
	background: var(--color-tint);
}

.fees th:last-child, .fees td:last-child {
	inline-size: 30%;
	font-variant-numeric: tabular-nums;
	text-align: end;
}

.fees tfoot {
	font-weight: 700;
}

.fees tfoot th, .fees tfoot td {
	border-block-end: 2px solid var(--color-text);
}

.fees a {
	font-size: .9em;
}

details {
	border: 1px solid var(--color-line);
	background: var(--color-paper);
}

summary {
	padding: .5em .8em;
	font-size: .875em;
	font-weight: 700;
	cursor: pointer;
}

.faq {
	border-block-end: 1px solid var(--color-line);
}

.faq details {
	border: 0;
	border-block-start: 1px solid var(--color-line);
	background: transparent;
}

.faq summary {
	display: flex;
	align-items: flex-start;
	gap: var(--space-m);
	padding: var(--space-l) 0;
	color: var(--color-text);
	font-size: 1.13em;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
}

.faq summary::marker {
	content: '';
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary > span {
	flex: 1;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.faq summary::after {
	flex: 0 0 .45em;
	inline-size: .45em;
	block-size: .45em;
	margin-block-start: .4em;
	border-inline-end: 2px solid var(--color-accent);
	border-block-end: 2px solid var(--color-accent);
	transform: rotate(-45deg);
	content: '';
}

.faq details[open] > summary::after {
	transform: rotate(45deg);
}

.faq details[open] > summary {
	padding-block-end: .65em;
}

.faq details > .stack {
	max-inline-size: 66ch;
	padding-block-end: var(--space-l);
}

.email {
	font-size: clamp(1.05em, 2vw, 1.45em);
	font-weight: 700;
	overflow-wrap: anywhere;
}

header {
	padding-block: 1.3em;
	border-block-end: 1px solid var(--color-line);
}

header .cluster {
	justify-content: space-between;
}

.brand {
	display: inline-flex;
	flex: 0 1 19em;
	inline-size: 19em;
	max-inline-size: 100%;
	text-decoration: none;
}

.brand svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

header nav {
	font-size: .875em;
}

header nav a {
	padding-block: .5em;
	color: var(--color-text);
}

@media (max-width: 47.99em) {
	header .cluster {
		justify-content: center;
	}
}

.hero {
	padding-block: clamp(2.4em, 6vw, 5em);
	text-align: center;
}

.hero > .stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-m);
}

.hero > .stack > * + * {
	margin-block-start: 0;
}

.hero .cluster {
	justify-content: center;
}

.route {
	padding-block-end: var(--space-xl);
}

.route > .cluster {
	justify-content: space-between;
	margin-block-end: var(--space-l);
}

.route > .cluster h2 {
	font-size: 1.35em;
}

.route-map {
	position: relative;
	margin-block-end: var(--space-xl);
	font-size: .95em;
}

.route-map nav {
	display: flex;
	flex-direction: column;
}

.route-map a {
	position: relative;
	flex: 1;
	min-inline-size: 0;
	min-block-size: 6em;
	padding: 1.2em .6em 1.2em 2em;
	color: var(--color-muted);
	text-decoration: none;
}

.route-label {
	display: block;
	padding: .2em .6em;
}

.route-label small {
	display: block;
	margin-block-start: .2em;
	font-size: .8em;
	font-weight: 400;
}

.route-map a[href='#extension'] {
	color: var(--color-accent);
	font-weight: 700;
}

.route-map a[href='#extension'] .route-label {
	background: var(--color-tint);
}

.route-dot {
	position: absolute;
	inset-block-start: 1.5em;
	inset-inline-start: 0;
	inline-size: .6em;
	block-size: .6em;
	border: 1px solid var(--color-accent);
	border-radius: 50%;
	background: var(--color-accent);
}

.route-map::before, .route-progress::before {
	position: absolute;
	inset-block-start: 1.8em;
	inset-inline-start: .3em;
	inline-size: 1px;
	block-size: calc(100% - 6em);
	background: var(--color-line);
	content: '';
}

.route-progress {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.route-progress::before {
	background: var(--color-accent);
}

.timeline {
	padding: 0;
	list-style: none;
}

.stage {
	position: relative;
	margin-inline-start: .3em;
	padding: 0 0 var(--space-xl) 1.5em;
	border-inline-start: 1px solid var(--color-accent);
}

.stage::before {
	position: absolute;
	inset-block-start: .4em;
	inset-inline-start: -.36em;
	z-index: 1;
	inline-size: .65em;
	block-size: .65em;
	border: 1px solid var(--color-muted);
	border-radius: 50%;
	background: var(--color-paper);
	content: '';
}

.stage:last-child {
	padding-block-end: 0;
	border-color: transparent;
}

.stage:last-child::after {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: -1px;
	inline-size: 1px;
	block-size: .725em;
	background: var(--color-accent);
	content: '';
}

.stage.current::before {
	border-color: var(--color-accent);
	background: var(--color-accent);
}

.milestone {
	margin-block-end: var(--space-l);
}

.milestone p {
	font-size: 1.35em;
	font-weight: 700;
}

.milestone span {
	display: inline-block;
	padding: .2em .6em;
	background: var(--color-tint);
	color: var(--color-accent);
	font-size: .75em;
}

.stage.current .milestone p {
	color: var(--color-accent);
}

.stage section {
	margin-block-start: 2.2em;
}

.after {
	padding-block-start: var(--space-xl);
	border-block-start: 1px solid var(--color-line);
}

.after > * + * {
	margin-block-start: var(--space-xl);
}

#contact {
	padding-inline: 15px;
	background: var(--color-tint);
}

footer {
	margin-block-start: var(--space-xl);
	padding-block: 0 var(--space-l);
}

footer .cluster {
	justify-content: space-between;
}

footer .cluster p {
	max-inline-size: none;
}

.footer-row {
	align-items: center;
	gap: var(--space-m) var(--space-l);
	padding-block-start: var(--space-m);
	border-block-start: 2px solid var(--color-accent);
}

.footer-id {
	align-items: center;
	column-gap: var(--space-l);
	row-gap: .35em;
}

.footer-id .small {
	color: var(--color-muted);
}

.footer-name {
	display: flex;
	align-items: center;
	gap: .5em;
	color: var(--color-text);
	font-weight: 700;
}

.footer-name svg {
	flex: none;
	inline-size: 1.4em;
	block-size: 1.4em;
	color: var(--color-accent);
}

/* The copyright is centred on the row at every width: name, copyright and link become one grid. */
.footer-row {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
}

.footer-id {
	display: contents;
}

.footer-id .small {
	justify-self: stretch;
	text-align: center;
}

@media (min-width: 48em) {
	.footer-row {
		grid-template-columns: 1fr auto 1fr;
	}

	.footer-row > a {
		justify-self: end;
	}

	.footer-id .small {
		justify-self: center;
	}
}

@media (min-width: 48em) {
	.route-map nav {
		flex-direction: row;
	}

	.route-map a {
		min-block-size: 7em;
		padding: 1.2em 1em .6em 0;
	}

	.route-dot {
		inset-block-start: 0;
	}

	.route-map::before, .route-progress::before {
		inset-block-start: .3em;
		inline-size: 75%;
		block-size: 1px;
	}

	.stage {
		display: flex;
		gap: var(--space-l);
		padding-inline-start: 2em;
	}

	.milestone {
		flex: 0 0 9em;
	}

	.stage > .stack {
		flex: 1;
		min-inline-size: 0;
	}

	.stage > .milestone {
		flex: 0 0 9em;
	}

	.stage .chart, .stage .note, .stage .fees,
	.stage > .stack > p, .stage .checklist {
		max-inline-size: 66ch;
	}

	.after {
		padding-inline-start: 13.35em;
	}

	.indent {
		padding-inline-start: 13.35em;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	.button-outline {
		transition: background-color .18s ease, color .18s ease;
	}

	@keyframes route-draw {
		0% { clip-path: inset(0 0 calc(100% - 1.8em) 0); }
		85%, 100% { clip-path: inset(0 0 calc(25% - 1.8em) 0); }
	}

	@keyframes route-dot-first {
		from, to { background: var(--color-accent); border-color: var(--color-accent); }
	}

	@keyframes route-dot-second {
		0%, 28.32% { background: var(--color-paper); border-color: var(--color-muted); }
		28.33%, 100% { background: var(--color-accent); border-color: var(--color-accent); }
	}

	@keyframes route-dot-third {
		0%, 56.66% { background: var(--color-paper); border-color: var(--color-muted); }
		56.67%, 100% { background: var(--color-accent); border-color: var(--color-accent); }
	}

	@keyframes route-dot-fourth {
		0%, 84.99% { background: var(--color-paper); border-color: var(--color-muted); }
		85%, 100% { background: var(--color-accent); border-color: var(--color-accent); }
	}

	@keyframes route-label-first {
		0% { opacity: 0; transform: translateY(.65em); }
		15%, 100% { opacity: 1; transform: none; }
	}

	@keyframes route-label-second {
		0%, 28.33% { opacity: 0; transform: translateY(.65em); }
		43.33%, 100% { opacity: 1; transform: none; }
	}

	@keyframes route-label-third {
		0%, 56.67% { opacity: 0; transform: translateY(.65em); }
		71.67%, 100% { opacity: 1; transform: none; }
	}

	@keyframes route-label-fourth {
		0%, 85% { opacity: 0; transform: translateY(.65em); }
		100% { opacity: 1; transform: none; }
	}

	.motion-ready.route-map .route-progress {
		clip-path: inset(0 0 calc(100% - 1.8em) 0);
	}

	.motion-ready.route-map .route-dot {
		background: var(--color-paper);
		border-color: var(--color-muted);
	}

	.motion-ready.route-map .route-label {
		opacity: 0;
		transform: translateY(.65em);
	}

	.is-entering.route-map .route-progress {
		animation: route-draw 1.8s linear both;
	}

	.is-entering.route-map .route-dot {
		animation: route-dot-first 1.8s linear both;
	}

	.is-entering.route-map a:nth-child(2) .route-dot {
		animation-name: route-dot-second;
	}

	.is-entering.route-map a:nth-child(3) .route-dot {
		animation-name: route-dot-third;
	}

	.is-entering.route-map a:nth-child(4) .route-dot {
		animation-name: route-dot-fourth;
	}

	.is-entering.route-map .route-label {
		animation: route-label-first 1.8s linear both;
	}

	.is-entering.route-map a:nth-child(2) .route-label {
		animation-name: route-label-second;
	}

	.is-entering.route-map a:nth-child(3) .route-label {
		animation-name: route-label-third;
	}

	.is-entering.route-map a:nth-child(4) .route-label {
		animation-name: route-label-fourth;
	}

	.route-map a:focus-visible .route-label {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.route-map a:focus-visible .route-dot {
		animation: none;
		background: var(--color-accent);
		border-color: var(--color-accent);
	}

	@keyframes timeline-draw {
		from { transform: scaleY(0); }
		to { transform: scaleY(1); }
	}

	@keyframes stage-rise {
		from { opacity: 0; transform: translateY(.65em); }
		to { opacity: 1; transform: none; }
	}

	.motion-ready.stage {
		border-inline-start-color: transparent;
	}

	.motion-ready.stage::after {
		position: absolute;
		inset-inline-start: -1px;
		inset-block-start: 0;
		inline-size: 1px;
		block-size: 100%;
		background: var(--color-accent);
		transform: scaleY(0);
		transform-origin: top;
		content: '';
	}

	.motion-ready.stage:last-child::after {
		block-size: .725em;
	}

	.motion-ready.stage > .milestone, .motion-ready.stage > .stack {
		opacity: 0;
		transform: translateY(.65em);
	}

	.is-entering.stage::after {
		animation: timeline-draw 1.35s linear both;
	}

	.is-entering.stage > .milestone, .is-entering.stage > .stack {
		animation: stage-rise .45s ease-out both;
	}

	.is-entering.stage:nth-child(2)::after, .is-entering.stage:nth-child(2) > .milestone, .is-entering.stage:nth-child(2) > .stack {
		animation-delay: .15s;
	}

	.is-entering.stage:nth-child(3)::after, .is-entering.stage:nth-child(3) > .milestone, .is-entering.stage:nth-child(3) > .stack {
		animation-delay: .3s;
	}

	.is-entering.stage:nth-child(4)::after, .is-entering.stage:nth-child(4) > .milestone, .is-entering.stage:nth-child(4) > .stack {
		animation-delay: .45s;
	}

	.stage:focus-within > .milestone, .stage:focus-within > .stack {
		animation: none;
		opacity: 1;
		transform: none;
	}

	@media (min-width: 48em) {
		@keyframes route-draw {
			0% { clip-path: inset(0 calc(100% - .3em) 0 0); }
			85%, 100% { clip-path: inset(0 calc(25% - .3em) 0 0); }
		}

		.motion-ready.route-map .route-progress {
			clip-path: inset(0 calc(100% - .3em) 0 0);
		}
	}

	@supports (interpolate-size: allow-keywords) and (transition-behavior: allow-discrete) and selector(details::details-content) {
		.faq {
			interpolate-size: allow-keywords;
		}

		.faq summary {
			transition: padding-block-end .28s ease;
		}

		.faq details::details-content {
			block-size: 0;
			opacity: 0;
			overflow: visible clip;
			transition: block-size .28s ease, opacity .28s ease, content-visibility .28s allow-discrete;
		}

		.faq details[open]::details-content {
			block-size: auto;
			opacity: 1;
		}
	}
}