/* App landing pages (custom-app.hbs) */
.app-page {
	--accent: #9b8cff;
	--accent2: #5b4bff;
	--ink: #ecebf5;
	--muted: #a7a6bb;
	--card: rgba(255,255,255,.06);
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: #0c0b14;
	color: var(--ink);
	overflow-x: clip;
	padding-bottom: 90px;
}
.page-colorguess .app-page { --accent: #ff7ab8; --accent2: #7a5cff; }
.page-moon-gate-mac .app-page, .page-moon-gate-watch .app-page { --accent: #ff4d5e; --accent2: #5b4bff; }
.page-hd-genie .app-page { --accent: #b53cff; --accent2: #6bd0ff; }
.page-mental-math-trainer .app-page { --accent: #41eba9; --accent2: #327ae7; }

.app-hero {
	text-align: center;
	padding: 110px 24px 60px;
	background:
		radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--accent2) 45%, transparent), transparent 70%),
		radial-gradient(40% 60% at 85% 20%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%);
}
.app-page .app-icon {
	width: 128px; height: 128px; border-radius: 29px; display: block; margin: 0 auto 26px;
	box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12);
	object-fit: cover;
}
.app-page h1 {
	color: #fff; font-size: clamp(34px, 6vw, 62px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 auto; max-width: 900px;
}
.app-page .app-tagline { color: var(--muted); font-size: clamp(17px, 2.2vw, 22px); margin: 16px auto 0; max-width: 620px; }

/* carousel */
.app-carousel { position: relative; margin: 10px 0 20px; }
.app-track {
	display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
	padding: 20px calc(50% - 300px) 30px; scrollbar-width: none;
}
.app-track::-webkit-scrollbar { display: none; }
.app-slide { flex: 0 0 auto; scroll-snap-align: center; margin: 0; }
.app-slide img {
	display: block; height: 480px; width: auto; max-width: none; border-radius: 22px;
	box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
}
.app-slide.wide img { height: 440px; }
.app-slide figcaption {
	width: 0; min-width: 100%; margin-top: 16px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.4;
}
.app-nav {
	position: absolute; top: 230px; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; backdrop-filter: blur(8px); z-index: 2;
}
.app-nav:hover { background: rgba(255,255,255,.28); }
.app-nav.prev { left: max(14px, calc(50% - 560px)); }
.app-nav.next { right: max(14px, calc(50% - 560px)); }
.app-dots { display: flex; gap: 9px; justify-content: center; margin-top: 6px; }
.app-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.28); cursor: pointer; }
.app-dots button.on { background: var(--accent); width: 26px; border-radius: 6px; }

/* copy */
.app-content > :not(.app-carousel):not(.kg-card) { max-width: 760px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.app-content h2 { color: #fff; font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -0.015em; margin-top: 64px; margin-bottom: 14px; }
.app-content h3 { color: #fff; font-size: 22px; margin-top: 44px; }
.app-content p, .app-content li { color: #cfcee0; font-size: 18px; line-height: 1.65; }
.app-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; border: 0; }
.app-content strong { color: #fff; }
.app-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; max-width: 1040px; margin: 36px auto; padding: 0 24px; box-sizing: border-box; }
.app-feature { background: var(--card); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 24px; }
.app-feature b { display: block; color: #fff; font-size: 18px; margin-bottom: 8px; }
.app-feature span { color: #bdbcd2; font-size: 16px; line-height: 1.55; }
.app-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 760px; margin: 34px auto 0; padding: 0 24px; }
.app-pill { display: inline-block; padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: 16px; background: #fff; color: #0c0b14 !important; text-decoration: none !important; }
.app-pill.ghost { background: rgba(255,255,255,.1); color: #fff !important; border: 1px solid rgba(255,255,255,.2); }
.app-pill.soon { background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #fff !important; }
.app-privacy { background: var(--card); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 26px 28px !important; max-width: 712px !important; margin-top: 56px !important; }
.app-privacy b { color: #fff; }
.app-privacy p { margin: 0; font-size: 16px; }
.app-content-note { text-align: center; color: var(--muted); font-size: 14px; }

@media (max-width: 700px) {
	.app-hero { padding-top: 80px; }
	.app-track { padding-left: 7vw; padding-right: 7vw; gap: 14px; }
	.app-slide img { height: 380px; }
	.app-slide.wide img { height: auto; width: 86vw; }
	.app-nav { display: none; }
}