:root {
	--ink: #eef1f5;
	--ink-soft: #b7bdc6;
	--rule: rgba(255, 255, 255, 0.18);
	--link: #8fd6c0;
	/* the scene behind the whole page, dawn; dusk under dark mode */
	--sky-top: #aecbe8;
	--sky-low: #f4d9c0;
	--sun: #f7e3b2;
	--range-far: #9fb3cd;
	--mountain: #51688a;
	--snow: #f4f7fb;
	--range-near: #35475f;
	--hand: #22262c;
	/* the dark glass the content rides on */
	--card: rgba(24, 27, 32, 0.78);
}

@media (prefers-color-scheme: dark) {
	:root {
		--sky-top: #22344d;
		--sky-low: #6b5a63;
		--sun: #e8d9a8;
		--range-far: #3c4d66;
		--mountain: #2b3a52;
		--snow: #d9e2ee;
		--range-near: #1b2534;
		--hand: #0d0f12;
		--card: rgba(13, 15, 19, 0.82);
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0 1.5rem 3rem;
	color: var(--ink);
	font: 1rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: var(--range-near);
}

/* The mountain, fixed behind everything; the page scrolls over it. */
.backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: linear-gradient(var(--sky-top), var(--sky-low) 72%, var(--range-near));
}

.backdrop svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* === hero ============================================================= */

/* Two columns: the header across both, the phone left and the get card
   right on the second row, the about prose across both beneath them. The
   screenshots and the footer share the same width, so every card meets
   the same vertical lines. */
.hero {
	padding: 3rem 0 0;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"head  head"
		"get   phone"
		"about about";
	gap: 1.5rem;
	max-width: 72rem;
	margin: 0 auto;
}

.hero-head {
	grid-area: head;
}

.hero-head h1 {
	font-size: clamp(2.5rem, 6vw, 4rem);
}

.hero-head .lede {
	margin-bottom: 0;
}

.hero-about {
	grid-area: about;
}

.hero-get {
	grid-area: get;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero-phone {
	grid-area: phone;
	display: flex;
	align-items: center;
	justify-content: center;
}

.phone {
	width: clamp(16rem, 22vw, 22rem);
	height: auto;
	transform: rotate(4deg);
	filter: drop-shadow(0 18px 28px rgba(10, 14, 20, 0.35));
}

/* Phone-shaped screens: back to the stack. */
@media (max-width: 64rem) {
	.hero-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"head"
			"phone"
			"get"
			"about";
	}

	.phone {
		width: min(75vw, 22rem);
	}
}

/* === the cards the content rides on =================================== */

.card {
	background: var(--card);
	border-radius: 1rem;
	padding: 1.5rem 2rem;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* The same width as the hero grid, so the edges line up. */
main .card,
footer.card {
	max-width: 72rem;
	margin: 1.5rem auto;
}

h1 {
	margin: 0;
	letter-spacing: -0.02em;
}

h2 {
	margin: 2rem 0 0;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-soft);
}

.card h2:first-child {
	margin-top: 0;
}

.lede {
	margin: 0.5rem 0 0;
	font-size: 1.25rem;
	color: var(--ink-soft);
}

p {
	margin: 1rem 0;
}

a {
	color: var(--link);
}

/* === sections ========================================================= */

.shots {
	display: flex;
	gap: 1rem;
	margin-top: 1.25rem;
	flex-wrap: wrap;
}

.shots figure {
	margin: 0;
	flex: 1 1 9rem;
}

.shot-frame {
	aspect-ratio: 9 / 19;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--rule);
	border-radius: 1.1rem;
	color: var(--ink-soft);
	font-size: 0.85rem;
}

.shots figcaption {
	margin-top: 0.4rem;
	font-size: 0.85rem;
	color: var(--ink-soft);
	text-align: center;
}

#get {
	text-align: center;
}

.get-row {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	justify-content: center;
	margin-top: 1.25rem;
	flex-wrap: wrap;
}

.qr {
	width: 7rem;
	height: 7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--rule);
	border-radius: 0.6rem;
	color: var(--ink-soft);
}

.stores {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Shaped like the store badges without borrowing their artwork; the real
   badges replace these once the listings exist. */
.store {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 11.5rem;
	padding: 0.5rem 1.4rem 0.6rem;
	background: #000;
	border: 1px solid #a6a6a6;
	border-radius: 0.6rem;
	color: #fff;
	text-decoration: none;
	text-align: left;
	line-height: 1.2;
}

.store small {
	font-size: 0.65rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #cfcfcf;
}

.store strong {
	font-size: 1.15rem;
}

.store[aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
}

footer.card {
	font-size: 0.85rem;
	color: var(--ink-soft);
}

footer p {
	margin: 0 0 0.5rem;
}