/* Superlift landing page. Drawn at 1440 in Paper; smaller sizes stack. */

/* ---------- Nav ---------- */

.nav-wrap {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	padding: 20px 64px 0;
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1200px;
	height: 60px;
	padding: 0 10px 0 28px;
	border-radius: 999px;
	background: rgb(20 21 26 / 0.86);
	box-shadow: 0 10px 30px rgb(20 24 60 / 0.18);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.nav__links,
.nav__actions {
	display: flex;
	flex: 0 0 420px;
	align-items: center;
}

.nav__links {
	gap: 28px;
}

.nav__actions {
	justify-content: flex-end;
	gap: 20px;
}

.nav__links a,
.nav__login {
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: rgb(255 255 255 / 0.86);
	transition: color 160ms ease-out;
}

@media (hover: hover) {
	.nav__links a:hover,
	.nav__login:hover {
		color: #fff;
	}
}

.nav .logo {
	color: #fff;
}

.nav__cta {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding-inline: 18px;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	overflow: hidden;
	overflow: clip;
	background-color: #fff;
	background-image:
		radial-gradient(ellipse 48% 44% at 50% 92% in oklab, #ffc6ae 0%, #ffe6d9 42%, #fff0 100%),
		radial-gradient(ellipse 30% 30% at 22% 78% in oklab, #ffe3b48c 0%, #fff0 100%),
		radial-gradient(ellipse 28% 30% at 80% 70% in oklab, #ffefc4b3 0%, #fff0 100%);
}

.hero__copy {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	padding: 84px 24px 0;
	text-align: center;
}

.hero__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 88px;
	line-height: 88px;
	letter-spacing: -0.032em;
}

.hero__sub {
	max-width: 540px;
	font-size: 19px;
	line-height: 28px;
	color: var(--ink-2);
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.hero__copy .btn-row {
	padding-top: 10px;
}

/* The phone and its two cards keep their desktop layout inside an 838px
   cluster that scales down as one piece. The stage shows the top 436px of
   it, as the design does. */
.hero__stage {
	--s: 1;
	position: relative;
	height: calc(436px * var(--s));
	margin-top: 102px;
}

.cluster {
	position: absolute;
	top: 0;
	/* The phone's centre (228 + 174 = 402px in) sits on the page's centre. */
	left: calc(50% - 402px);
	width: 838px;
	height: 716px;
	transform: scale(var(--s));
	transform-origin: 402px 0;
}

.cluster .phone {
	position: absolute;
	top: 0;
	left: 228px;
}

.cluster .card-progress {
	position: absolute;
	top: 112px;
	left: 0;
}

.cluster .card-cheer {
	position: absolute;
	top: 252px;
	left: 538px;
}

.hero__fade {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 160px;
	background: linear-gradient(in oklab 180deg, #fff0 0%, #ffffffd9 70%, #fff 100%);
	pointer-events: none;
}

/* ---------- Sections ---------- */

.section-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 56px;
	line-height: 60px;
	letter-spacing: -0.035em;
}

.section-sub {
	font-size: 19px;
	line-height: 28px;
	color: var(--ink-2);
}

.trio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
	padding: 136px 64px 0;
}

.trio__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.trio__header .section-sub {
	max-width: 680px;
}

.trio__panels {
	display: flex;
	gap: 24px;
	width: 100%;
	max-width: 1312px;
}

/* The phone export is cut 414px down, where the design's 660px panel
   crops it. The panel sizes to its content and the phone's negative
   margin hides the rest, so the cut always lands on the bottom edge. */
.panel {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 36px 36px 0;
	border-radius: 32px;
	overflow: hidden;
	overflow: clip;
	scroll-margin-top: 24px;
}

.panel--train {
	background-image: linear-gradient(in oklab 180deg, #eef2ff 0%, #d9e3ff 100%);
}

.panel--eat {
	background-image: linear-gradient(in oklab 180deg, #fff3ec 0%, #ffe0d1 100%);
}

.panel--together {
	background-image: linear-gradient(in oklab 180deg, #ecf8f1 0%, #d3efe0 100%);
}

.panel__copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.icon-chip {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 12px rgb(var(--shadow-cool) / 0.08);
}

.panel__title {
	padding-top: 4px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 30px;
	line-height: 34px;
	letter-spacing: -0.03em;
}

.panel__body {
	font-size: 16px;
	line-height: 24px;
	color: var(--ink-2);
}

.mini-phone {
	flex-shrink: 0;
	width: 272px;
	height: auto;
	margin-bottom: -106px;
	filter: drop-shadow(0 30px 30px rgb(var(--shadow-cool) / 0.2));
}

.coaching {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 80px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 160px 120px 0;
	scroll-margin-top: 24px;
}

.coaching__copy {
	display: flex;
	flex: 0 0 520px;
	flex-direction: column;
	gap: 36px;
}

.coaching__intro {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

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

.feature {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
	border-radius: 20px;
}

.feature--active {
	background: #fff;
	box-shadow:
		0 12px 32px rgb(var(--shadow-cool) / 0.1),
		0 0 0 1px rgb(var(--shadow-cool) / 0.06);
}

.feature__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: #f1f2f5;
}

.feature--active .feature__icon {
	background: var(--accent-soft);
}

.feature__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
}

.feature__title {
	font-size: 17px;
	font-weight: 600;
	line-height: 22px;
	color: var(--ink-soft);
}

.feature__body {
	font-size: 15px;
	line-height: 22px;
	color: var(--ink-3);
}

.feature--active .feature__title {
	color: var(--ink);
}

.feature--active .feature__body {
	color: var(--ink-2);
}

.coaching__visual {
	position: relative;
	display: flex;
	flex: 0 0 520px;
	justify-content: center;
	height: 720px;
	border-radius: 36px;
	overflow: hidden;
	overflow: clip;
	background-image: radial-gradient(ellipse 70% 60% at 50% 60% in oklab, #ffd4c3 0%, #ffeee6 55%, #f6f7fa 100%);
}

.coaching__visual .phone {
	position: absolute;
	top: 72px;
	width: 328px;
}

.start {
	padding: 160px 64px 0;
}

.start__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	padding: 88px 64px 64px;
	border-radius: 40px;
	background-color: var(--surface);
	background-image:
		radial-gradient(ellipse 55% 70% at 50% 0% in oklab, #ffcfbb 0%, #ffeae0 45%, #f4f5f700 100%),
		radial-gradient(ellipse 35% 50% at 12% 100% in oklab, #ffe7b899 0%, #f4f5f700 100%);
	text-align: center;
}

.start__mark {
	width: 104px;
	height: 104px;
	filter: drop-shadow(0 18px 30px rgb(255 89 58 / 0.32));
}

.start__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.start__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 60px;
	line-height: 64px;
	letter-spacing: -0.035em;
}

.start__intro .section-sub {
	max-width: 560px;
}

.steps {
	display: flex;
	gap: 16px;
	width: 100%;
	max-width: 1040px;
	margin: 0;
	padding: 28px 0 0;
	list-style: none;
	text-align: left;
}

.step {
	display: flex;
	flex: 1 1 0;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
	border: 1px solid rgb(255 255 255 / 0.9);
	border-radius: 20px;
	background: rgb(255 255 255 / 0.75);
}

.step__num {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	background: var(--accent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
}

.step__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3px;
}

.step__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
}

.step__body {
	font-size: 14px;
	line-height: 20px;
	color: var(--ink-2);
}

.footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 72px 120px 56px;
	font-size: 14px;
	line-height: 18px;
	color: var(--ink-2);
}

.footer .logo {
	font-size: 20px;
	line-height: 24px;
	color: var(--ink);
}

.footer .logo img {
	width: 28px;
	height: 28px;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 1360px) {
	.coaching,
	.footer {
		padding-inline: 64px;
	}

	.coaching__copy,
	.coaching__visual {
		flex-basis: 480px;
	}
}

@media (max-width: 1180px) {
	.nav__links,
	.nav__actions {
		flex-basis: auto;
	}

	.nav__links {
		display: none;
	}

	.nav {
		padding-left: 20px;
	}

	.trio__panels,
	.steps {
		flex-direction: column;
		max-width: 560px;
	}

	/* In a column, flex-basis 0 would override the panels' fixed height. */
	.panel,
	.step {
		flex: none;
	}

	.coaching {
		flex-direction: column;
		align-items: stretch;
		gap: 48px;
		max-width: 640px;
		padding-inline: 24px;
	}

	.coaching__copy,
	.coaching__visual {
		flex-basis: auto;
	}
}

@media (max-width: 900px) {
	.hero__title {
		font-size: 64px;
		line-height: 64px;
	}

	.hero__stage {
		--s: 0.72;
		margin-top: 72px;
	}
}

@media (max-width: 640px) {
	.nav-wrap {
		padding: 12px 12px 0;
	}

	.nav {
		height: 56px;
		padding: 0 8px 0 16px;
	}

	.nav__actions {
		gap: 14px;
	}

	.nav .logo {
		font-size: 20px;
	}

	.nav .logo img {
		width: 28px;
		height: 28px;
	}

	.hero__copy {
		gap: 18px;
		padding: 56px 20px 0;
	}

	.hero__title {
		font-size: 48px;
		line-height: 50px;
	}

	.hero__sub {
		font-size: 17px;
		line-height: 26px;
	}

	.hero__sub br {
		display: none;
	}

	.hero__stage {
		--s: 0.44;
		margin-top: 48px;
	}

	.trio {
		gap: 36px;
		padding: 88px 16px 0;
	}

	.section-title {
		font-size: 38px;
		line-height: 42px;
	}

	.section-sub {
		font-size: 17px;
		line-height: 26px;
	}

	.panel {
		padding: 28px 24px 0;
		border-radius: 28px;
	}

	.coaching {
		padding: 104px 16px 0;
	}

	.coaching__visual {
		height: 640px;
		border-radius: 28px;
	}

	.coaching__visual .phone {
		top: 56px;
		width: 300px;
	}

	.start {
		padding: 104px 16px 0;
	}

	.start__card {
		gap: 24px;
		padding: 56px 20px 24px;
		border-radius: 28px;
	}

	.start__mark {
		width: 80px;
		height: 80px;
	}

	.start__title {
		font-size: 40px;
		line-height: 44px;
	}

	.steps {
		padding-top: 12px;
	}

	.footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding: 56px 20px 40px;
	}
}

@media (max-width: 400px) {
	.nav__login {
		display: none;
	}
}