/* The app's own page. Loaded only by index.html, so style.css stays byte-identical to the copy the other app
   keeps — two sheets only stay in step if one is literally the other. */

.hero { padding: 56px 0 8px; }
.hero h1 { margin: 0; font-size: 44px; line-height: 1.1; letter-spacing: -0.03em; }
.hero .tagline { margin: 12px 0 0; font-size: 21px; line-height: 1.4; color: var(--muted); }
.hero p { margin: 20px 0 0; font-size: 17px; }
.hero img.icon { width: 96px; height: 96px; margin-bottom: 20px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 28px 0 0; }
.actions .primary {
	display: inline-block; padding: 11px 20px; border-radius: 999px;
	background: var(--ink); color: var(--page); font-weight: 600; text-decoration: none;
}
.actions .primary:hover { opacity: 0.85; }
/* Not a button: there is nothing to press yet. Saying so plainly beats a dead control or a promise. */
.actions .pending {
	display: inline-block; padding: 11px 20px; border-radius: 999px;
	border: 1px dashed var(--rule); color: var(--muted);
}
.actions .quiet { color: var(--link); text-decoration: none; }
.actions .quiet:hover { text-decoration: underline; }

.shot { margin: 44px 0 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.28); }

.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 52px 0 0; padding: 0; list-style: none; }
.features li { margin: 0; padding: 20px; background: var(--card); border-radius: 14px; }
.features h2 { margin: 0 0 6px; font-size: 17px; }
.features p { margin: 0; font-size: 15px; color: var(--muted); }

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

@media (max-width: 620px) {
	.hero h1 { font-size: 34px; }
	.hero .tagline { font-size: 19px; }
	.features { grid-template-columns: 1fr; }
}