/* polish.css — native refinement layer over the HTML5 UP "Stellar" base.
   Loaded AFTER main.css so these rules win. Keeps the slate/ghost theme;
   moves type and controls toward Apple-platform conventions. */

:root {
	--ink: #1d1d1f;
	--ink-soft: #515154;
	--apple-blue: #0071e3;
	--apple-blue-hover: #0077ed;
	--pill-gray: #f5f5f7;
}

/* --- System type: the single biggest native cue ---------------------------- */
body, input, select, textarea,
h1, h2, h3, h4, h5, h6 {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
		Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
	letter-spacing: -0.015em;
	font-weight: 600;
}
/* Ink colors only inside the white content card — header/footer stay light-on-slate. */
#main { color: var(--ink-soft); }
#main h1, #main h2, #main h3, #main h4 { color: var(--ink); }

/* --- Header: brighter tagline, let the ghost breathe ------------------------ */
#header.alt p { color: rgba(255, 255, 255, 0.82); }
#header.alt .logo img {
	transform-origin: 50% 90%;
	animation: ghost-float 5.5s ease-in-out infinite;
}
@keyframes ghost-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-7px); }
}

/* --- Nav: iOS-style pill links (keeps the template's positioning) ------------ */
#nav ul li a {
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- Content card ------------------------------------------------------------- */
#main {
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(23, 31, 41, 0.28);
	overflow: hidden;
}

/* --- Spotlight image (Glitch poster) ------------------------------------------ */
.spotlight .image {
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(23, 31, 41, 0.18);
}
.spotlight .image img { display: block; }

/* --- App Store badge ------------------------------------------------------------ */
.appstore-badge { display: inline-block; border-bottom: none; }
.appstore-badge img {
	height: 3.4rem;
	width: auto;
	display: block;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.appstore-badge:hover img { transform: scale(1.04); }
.appstore-badge:active img { transform: scale(0.98); }

/* --- "Coming soon" pill ----------------------------------------------------------- */
.coming-soon-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.65rem 1.4rem;
	border-radius: 999px;
	background: var(--pill-gray);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--ink-soft);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.coming-soon-pill .cs-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff9f0a;
	animation: cs-pulse 2.2s ease-in-out infinite;
}
@keyframes cs-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}

/* --- Buttons: pill shape, Apple blue --------------------------------------------- */
.button, #main .button {
	border-radius: 999px;
}
.button.primary, #main .button.primary {
	background-color: var(--apple-blue);
	color: #ffffff !important;
	box-shadow: none;
}
.button.primary:hover, #main .button.primary:hover { background-color: var(--apple-blue-hover); }

/* --- Footer ------------------------------------------------------------------------ */
#footer .copyright a { transition: color 0.2s ease; }

/* --- Accessibility & platform feel --------------------------------------------------- */
a:focus-visible, button:focus-visible, .button:focus-visible {
	outline: 2px solid var(--apple-blue);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	#header.alt .logo img { animation: none; }
	.coming-soon-pill .cs-dot { animation: none; }
	.appstore-badge img, .button { transition: none; }
}