/* The app's own palette, from app/src/main/res/values/colors.xml. */
:root {
	--yellow: #FBD000;
	--slate: #37474F;
	--red: #F05454;
	--ink-on-yellow: #231B00;

	--bg: #FFFBF2;
	--surface: #F4EEE1;
	--card: #FFFFFF;
	--text: #1E1B13;
	--muted: #4B4739;
	--line: #E3DCCB;
	--bezel: #1E1B13;

	--display: "Bricolage Grotesque", system-ui, sans-serif;
	--body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, "Cascadia Code", Consolas, monospace;

	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #15130E;
		--surface: #1F1C16;
		--card: #26231C;
		--text: #EAE2CF;
		--muted: #B5AE9C;
		--line: #353127;
		--bezel: #050504;
	}
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 17px/1.6 var(--body);
	-webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

code { font-family: var(--mono); font-size: .9em; }

h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0; letter-spacing: -.02em; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

.eyebrow {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Navigation */

.nav {
	position: sticky;
	top: 0;
	z-index: 10;
	background: color-mix(in srgb, var(--bg) 85%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}

.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 800 20px var(--display);
	text-decoration: none;
}

.nav-links { display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 600; }

.nav-links a { text-decoration: none; color: var(--muted); }

.nav-links a:hover { color: var(--text); }

.nav-links .nav-gh {
	color: var(--text);
	padding: 6px 14px;
	border: 1.5px solid var(--text);
	border-radius: 999px;
}

/* Buttons */

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
	display: inline-flex;
	align-items: center;
	padding: 14px 24px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
	background: var(--yellow);
	color: var(--ink-on-yellow);
	box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--yellow) 80%, transparent);
}

.btn-ghost { border: 1.5px solid var(--line); }

/* Phones */

.phone {
	position: relative;
	margin: 0;
	padding: 7px;
	background: var(--bezel);
	border-radius: 30px;
	box-shadow: 0 24px 48px -20px rgb(0 0 0 / .35);
}

.phone img { border-radius: 23px; }

.phone figcaption {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 14px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
}

/* Hero */

.hero { padding: 72px 0 96px; overflow: hidden; }

.hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }

.hero h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 800; }

.hero .emoji { font-family: var(--body); font-size: .85em; }

.lede { font-size: 20px; color: var(--muted); max-width: 34em; margin: 24px 0 32px; }

.hero-art { position: relative; height: 560px; }

.hero-art .ring {
	position: absolute;
	inset: 40px 0 auto 10%;
	aspect-ratio: 1;
	width: 90%;
	border-radius: 50%;
	background: var(--yellow);
}

.hero-art .phone { position: absolute; width: 230px; }

.phone-front { left: 12%; top: 20px; transform: rotate(-5deg); }

.phone-back { right: 4%; top: 80px; transform: rotate(6deg); }

.sparkle { position: absolute; z-index: 1; font-size: 32px; color: var(--slate); }

.s1 { top: 0; right: 18%; }

.s2 { bottom: 60px; left: 2%; font-size: 24px; color: var(--red); }

@media (prefers-color-scheme: dark) {
	.sparkle { color: var(--text); }
}

/* Stats and the logo's rainbow stripe */

.stats { background: var(--slate); color: #fff; }

.stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); padding: 32px 0; text-align: center; }

.stats strong { display: block; margin-bottom: 4px; font: 800 30px/1.1 var(--display); color: var(--yellow); }

.stats span { font-size: 15px; opacity: .85; }

.stripe { height: 8px; background: linear-gradient(90deg, #F05454 0 25%, #FBD000 25% 50%, #7CB342 50% 75%, #29B6F6 75%); }

/* Sections */

.section-head { max-width: 720px; margin: 0 auto 64px; text-align: center; }

.section-head h2, .build h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; }

.section-head p:not(.eyebrow) { color: var(--muted); margin: 16px 0 0; }

.tour { padding: 112px 0 48px; }

.feature {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 56px;
	align-items: center;
	padding-bottom: 96px;
}

/* Swapping the columns along with the order keeps the screenshots in the wide column on both sides. */
.feature.reverse { grid-template-columns: 1.5fr 1fr; }

.feature.reverse .feature-copy { order: 2; }

.feature-copy h3 { font-size: 34px; font-weight: 700; margin-bottom: 16px; }

.feature-copy p { color: var(--muted); margin: 0; }

.tag {
	display: inline-block;
	margin-bottom: 16px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--yellow);
	color: var(--ink-on-yellow);
	font: 700 13px var(--mono);
}

.shots {
	display: flex;
	justify-content: center;
	gap: 20px;
	padding: 40px 32px 72px;
	background: var(--surface);
	border-radius: 32px;
}

/* A third of the row each, whether a row has two phones or three, so every screenshot is the same size. */
.shots .phone { flex: 0 0 calc((100% - 40px) / 3); min-width: 0; }

.dark-band { background: #15130E; color: #EAE2CF; padding: 96px 0 0; }

.dark-band .feature-copy p, .dark-band figcaption { color: #B5AE9C; }

.dark-band .shots { background: #26231C; }

.dark-band .phone { background: #000; }

.private { padding: 112px 0; }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.card {
	padding: 28px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 24px;
}

.card::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--red);
}

.card:nth-child(2)::before { background: var(--yellow); }

.card:nth-child(3)::before { background: #7CB342; }

.card:nth-child(4)::before { background: #29B6F6; }

.card h3 { font-size: 20px; margin-bottom: 8px; }

.card p { margin: 0; font-size: 15px; color: var(--muted); }

.build { padding: 0 0 112px; }

.build-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 56px;
	background: var(--yellow);
	color: var(--ink-on-yellow);
	border-radius: 40px;
}

.build .eyebrow { color: inherit; opacity: .7; }

.build p { margin: 16px 0 28px; }

.build .btn-primary { background: var(--ink-on-yellow); color: var(--yellow); box-shadow: none; }

.terminal {
	margin: 0;
	padding: 28px;
	overflow-x: auto;
	background: #1E1B13;
	color: #EAE2CF;
	border-radius: 20px;
	font: 14px/1.7 var(--mono);
}

.terminal .c { color: #8F8875; }

.terminal .p { color: var(--yellow); user-select: none; }

.footer { border-top: 1px solid var(--line); padding: 28px 0; font-size: 14px; color: var(--muted); }

.footer-inner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }

.footer .brand { font-size: 17px; color: var(--text); }

/* Motion and toys (site.js). Without JS, or with reduced motion, everything below either does nothing or isn't
   applied, and the page shows as it is. */

button.btn { font: inherit; font-weight: 700; color: inherit; background: none; cursor: pointer; }

.btn { gap: 10px; }

.progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	transform: scaleX(var(--scroll, 0));
	transform-origin: left;
	background: linear-gradient(90deg, var(--red) 0 25%, var(--yellow) 25% 50%, #7CB342 50% 75%, #29B6F6 75%);
}

.hero { position: relative; }

.hero .flash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }

.hero-art .layer {
	position: absolute;
	inset: 0;
	transform: translate3d(calc(var(--mx, 0) * var(--d) * 1px), calc(var(--my, 0) * var(--d) * 1px), 0);
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.hero-art .vf { position: absolute; inset: 0 -4% 4%; opacity: 0; pointer-events: none; }

.vf span { position: absolute; width: 44px; height: 44px; border: 0 solid var(--text); }
.vf span:nth-child(1) { left: 0; top: 0; border-width: 4px 0 0 4px; }
.vf span:nth-child(2) { right: 0; top: 0; border-width: 4px 4px 0 0; }
.vf span:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 4px 4px; }
.vf span:nth-child(4) { right: 0; bottom: 0; border-width: 0 4px 4px 0; }
.vf i { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 3px solid var(--text); border-radius: 8px; }

.shots .phone { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }

.like {
	position: absolute;
	z-index: 2;
	width: 96px;
	height: 96px;
	margin: -48px 0 0 -48px;
	pointer-events: none;
	animation: like .9s cubic-bezier(.2, .9, .3, 1.2) forwards;
}

.like svg { width: 100%; height: 100%; fill: var(--red); filter: drop-shadow(0 8px 16px rgb(240 84 84 / .5)); }

.like.mini { width: 22px; height: 22px; margin: -11px 0 0 -11px; animation: burst .75s ease-out forwards; }

.like.mini:nth-child(3n) svg { fill: var(--yellow); }

@keyframes like {
	0% { transform: scale(0); }
	25% { transform: scale(1.2); }
	40% { transform: scale(.92); }
	55% { transform: scale(1); opacity: 1; }
	100% { transform: scale(1.25) translateY(-24px); opacity: 0; }
}

@keyframes burst {
	from { transform: translate(0, 0) scale(.3); opacity: 1; }
	to { transform: translate(var(--dx), var(--dy)) scale(1) rotate(25deg); opacity: 0; }
}

.terminal .ln { display: block; white-space: pre; }

.trailer {
	width: min(1100px, 100% - 32px);
	max-width: none;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
}

.trailer::backdrop { background: rgb(10 9 7 / .86); backdrop-filter: blur(6px); }

.trailer video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 20px;
	background: #000;
	box-shadow: 0 40px 120px -20px rgb(0 0 0 / .8);
}

.trailer .close {
	position: absolute;
	top: -52px;
	right: 0;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--yellow);
	color: var(--ink-on-yellow);
	font: 700 24px/1 var(--body);
	cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
	/* The hero opens like the trailer: focus, shutter, phones. */
	.js .hero-art .vf { animation: vf 1.1s cubic-bezier(.2, .8, .2, 1) both; }
	.js .vf i { animation: focus .9s ease-out both; }
	.js .hero .flash { animation: flash .6s 1s ease-out both; }
	.js .hero-art .ring { animation: pop 1s 1s cubic-bezier(.3, 1.5, .5, 1) both; }
	.js .phone-front { animation: pop .8s 1.05s cubic-bezier(.3, 1.4, .5, 1) both, float 6s 2s ease-in-out infinite; }
	.js .phone-back { animation: pop .8s 1.15s cubic-bezier(.3, 1.4, .5, 1) both, float 7s 2.2s ease-in-out infinite reverse; }
	.js .sparkle { animation: twinkle 2.6s 1.3s ease-in-out infinite both; }
	.js .sparkle.s2 { animation-delay: 1.9s; }

	.js .hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
	.js .hero h1 .w > span { display: inline-block; animation: rise .9s calc(.2s + var(--i) * .07s) cubic-bezier(.2, .8, .2, 1) both; }
	.js .hero .eyebrow { animation: fade-up .7s .1s both; }
	.js .hero .lede { animation: fade-up .8s .65s both; }
	.js .hero .actions { animation: fade-up .8s .8s both; }

	/* Scroll reveals. */
	.js .stats-inner > div {
		opacity: 0;
		transform: perspective(500px) rotateX(-85deg);
		transition: opacity .5s, transform .8s cubic-bezier(.2, 1.3, .4, 1);
	}
	.js .stats-inner > div:nth-child(2) { transition-delay: .08s; }
	.js .stats-inner > div:nth-child(3) { transition-delay: .16s; }
	.js .stats-inner > div:nth-child(4) { transition-delay: .24s; }
	.js .stats .stripe { transform: scaleX(0); transform-origin: left; transition: transform 1.1s .3s cubic-bezier(.7, 0, .2, 1); }
	.js .stats.in .stats-inner > div, .js .stats.in .stripe { opacity: 1; transform: none; }

	.js .section-head > *, .js .feature-copy > * {
		opacity: 0;
		translate: 0 26px;
		transition: opacity .6s, translate .8s cubic-bezier(.2, .8, .2, 1);
	}
	.js .section-head > :nth-child(2), .js .feature-copy > :nth-child(2) { transition-delay: .08s; }
	.js .section-head > :nth-child(3), .js .feature-copy > :nth-child(3) { transition-delay: .16s; }
	.js .in > .section-head > *, .js .section-head.in > *, .js .feature.in .feature-copy > * { opacity: 1; translate: none; }

	.js .feature .shots { opacity: 0; scale: .94; transition: opacity .6s, scale 1s cubic-bezier(.2, .8, .2, 1); }
	.js .feature .shots .phone {
		opacity: 0;
		translate: 0 90px;
		rotate: 6deg;
		transition: opacity .5s, translate .9s cubic-bezier(.2, 1.3, .4, 1), rotate .9s cubic-bezier(.2, 1.3, .4, 1), transform .25s ease-out;
	}
	.js .feature .shots .phone:nth-child(2) { rotate: -5deg; transition-delay: .1s, .1s, .1s, 0s; }
	.js .feature .shots .phone:nth-child(3) { transition-delay: .2s, .2s, .2s, 0s; }
	.js .feature.in .shots, .js .feature.in .shots .phone { opacity: 1; scale: none; translate: none; rotate: none; }

	.js .card {
		opacity: 0;
		translate: 0 50px;
		transition: opacity .5s, translate .8s cubic-bezier(.2, 1.2, .4, 1), box-shadow .3s;
	}
	.js .card::before { scale: 0; transition: scale .6s cubic-bezier(.3, 1.8, .5, 1); }
	.js .card:nth-child(2), .js .card:nth-child(2)::before { transition-delay: .08s; }
	.js .card:nth-child(3), .js .card:nth-child(3)::before { transition-delay: .16s; }
	.js .card:nth-child(4), .js .card:nth-child(4)::before { transition-delay: .24s; }
	.js .cards.in .card { opacity: 1; translate: none; }
	.js .cards.in .card::before { scale: 1; }
	.js .cards.in .card:hover { translate: 0 -6px; box-shadow: 0 20px 40px -20px rgb(0 0 0 / .35); transition-delay: 0s; }

	.js .build-inner { opacity: 0; translate: 0 50px; scale: .96; transition: opacity .6s, translate .9s cubic-bezier(.2, .8, .2, 1), scale .9s cubic-bezier(.2, .8, .2, 1); }
	.js .build.in .build-inner { opacity: 1; translate: none; scale: none; }
	.js .terminal .ln { width: 0; overflow: hidden; }
	.js .build.in .terminal .ln { animation: type min(.5s, calc(var(--n) * .012s)) steps(var(--n)) calc(.4s + var(--d)) forwards; }

	/* The dark band grows from a card into the full width as it scrolls in. */
	.js .dark-band { clip-path: inset(0 calc((1 - var(--open, 0)) * 4vw) round calc((1 - var(--open, 0)) * 48px)); }

	.trailer[open] { animation: pop .4s cubic-bezier(.3, 1.4, .5, 1); }
}

@keyframes vf {
	0% { opacity: 0; scale: 1.3; }
	35% { opacity: 1; scale: 1; }
	85% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes focus {
	0% { scale: 1.6; }
	30% { scale: .8; }
	50% { scale: 1.2; }
	70% { scale: .95; border-color: var(--text); }
	100% { scale: 1; border-color: var(--yellow); }
}

@keyframes flash {
	0% { opacity: 0; }
	1% { opacity: .85; }
	100% { opacity: 0; }
}

@keyframes pop { from { opacity: 0; scale: .5; } }

@keyframes float { 50% { translate: 0 -16px; } }

@keyframes twinkle {
	0%, 100% { scale: .6; opacity: .5; }
	50% { scale: 1.2; opacity: 1; }
}

@keyframes rise { from { transform: translateY(110%) rotate(8deg); } }

@keyframes fade-up { from { opacity: 0; translate: 0 22px; } }

@keyframes type { to { width: calc(var(--n) * 1ch); } }

/* The privacy policy */

.legal { max-width: 760px; padding: 72px 0 112px; }

.legal h1 { font-size: clamp(40px, 6vw, 60px); font-weight: 800; margin-bottom: 8px; }

/* The effective date, right under the title. */
.legal h1 + p { margin-top: 0; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.legal h2 { font-size: 26px; font-weight: 700; margin: 48px 0 12px; }

.legal p, .legal li { color: var(--muted); }

.legal li { margin-bottom: 6px; }

.legal strong { color: var(--text); }

/* Smaller screens */

@media (max-width: 900px) {
	.hero { padding: 48px 0 64px; }
	.hero-inner, .feature, .build-inner { grid-template-columns: 1fr; }
	.hero-art { height: 440px; max-width: 440px; width: 100%; margin-inline: auto; }
	.hero-art .phone { width: 180px; }
	.feature { gap: 32px; padding-bottom: 72px; }
	.feature.reverse { grid-template-columns: 1fr; }
	.feature.reverse .feature-copy { order: 0; }
	.cards { grid-template-columns: repeat(2, 1fr); }
	.build-inner { padding: 32px; }
}

@media (max-width: 600px) {
	.nav-links a:not(.nav-gh) { display: none; }
	.stats-inner { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
	.shots { gap: 10px; padding: 24px 16px 56px; border-radius: 24px; }
	.shots .phone { flex-basis: calc((100% - 20px) / 3); }
	.phone { padding: 4px; border-radius: 18px; }
	.phone img { border-radius: 14px; }
	.phone figcaption { font-size: 12px; margin-top: 10px; }
	.cards { grid-template-columns: 1fr; }
	.build-inner { padding: 24px; border-radius: 28px; }
	.terminal { padding: 20px; font-size: 12.5px; }
}