/* WeaveMove page (/weavemove/): screenshots and download links on top of style.css */

.wm-page .product {
	--g1: #a66bff;
	--g2: #2fd8ff;
	--g3: #ffa22e;
}

.wm-hero {
	border-top: 0;
}

.wm-hero .product-title {
	font-size: clamp(44px, 6vw, 72px);
}

/* Screenshots */

.shots {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.shot {
	margin: 0;
}

.shot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	border: 1px solid var(--border-soft);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8), 0 0 40px -20px color-mix(in srgb, var(--g1) 45%, transparent);
}

.shot figcaption {
	margin-top: 12px;
	color: var(--muted);
	font-size: 15px;
}

.shot-wide {
	grid-column: 1 / -1;
}

.shot-phone {
	grid-column: 1 / -1;
	justify-self: center;
	width: min(360px, 100%);
	text-align: center;
}

.shot-phone img {
	border-radius: 36px;
}

/* Downloads */

.downloads {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 24px;
	margin-top: 40px;
}

.dl {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.25s;
}

a.dl:hover {
	border-color: color-mix(in srgb, var(--g2) 45%, var(--border-soft));
	box-shadow: 0 0 30px -12px color-mix(in srgb, var(--g2) 60%, transparent);
}

.dl-os {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 24px;
	font-weight: 600;
}

/* System icon in download links, from /assets/os-icons.svg */
.os-icon {
	flex: none;
	width: 26px;
	height: 26px;
	color: var(--g2, #fff);
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--g2, #fff) 55%, transparent));
}

.dl-file {
	color: var(--g2);
	font-size: 14px;
}

.dl-note {
	flex: 1;
	margin-bottom: 16px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.5;
}

.dl .btn {
	align-self: flex-start;
}

.dl-soon {
	border-style: dashed;
}

.dl-soon .dl-os,
.dl-soon .dl-file {
	color: var(--muted);
}

@media (max-width: 860px) {
	.shots {
		grid-template-columns: 1fr;
	}
}

/* Version history */

.releases {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
	max-width: 860px;
}

.release {
	padding: 24px 28px;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
}

.release-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 8px;
}

.release-ver {
	font-size: 22px;
	color: var(--g2);
}

.release-date {
	color: var(--muted);
	font-size: 15px;
}

.release ul {
	margin: 0;
	padding-left: 20px;
	color: #d4d4da;
	font-size: 16px;
}

.release li + li {
	margin-top: 4px;
}