/*
 * Sales page.
 *
 * Everything here leans on the template's own tokens and components, because
 * the page is also the argument: it is built out of the thing it is selling.
 * These rules only cover layout the storefront never needed.
 */

/* ─────────────────────────────────────────────────────────────── hero ───── */

.sell-hero {
	position: relative;
	isolation: isolate;
	background: var(--color-signal);
	color: #fff;
	padding-block: clamp(3.5rem, 9vw, 8rem);
	overflow: hidden;
}

.sell-hero__inner {
	position: relative;
	z-index: 1;
}

.sell-hero__text {
	max-width: 34rem;
}

@media (width >= 64rem) {
	.sell-hero__text {
		max-width: 40rem;
	}
}

/*
 * The screenshot as atmosphere rather than an object: the whole page, scaled
 * past the edges of the hero and tilted away in 3D, then masked out towards the
 * headline so the copy stays readable on top of it. Decorative only, so it
 * carries an empty alt and aria-hidden.
 *
 * Below 64rem it is dropped entirely. Behind body copy on a phone it would cost
 * contrast and buy nothing.
 */
.sell-hero__media {
	display: none;
}

@media (width >= 64rem) {
	.sell-hero__media {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
		overflow: hidden;
		perspective: 1800px;
		pointer-events: none;
	}

	.sell-hero__media img {
		position: absolute;
		top: 50%;
		left: 30%;
		width: 80%;
		height: auto;
		/*
		 * Tilted away from the reader and overflowing the section on every side.
		 * Scale is kept modest on purpose: any larger and the crop stops reading
		 * as a web page and becomes stray lettering behind the headline.
		 */
		transform: translateY(-50%) rotateY(-26deg) rotateX(8deg) rotate(-1.5deg) scale(1.22);
		transform-origin: left center;
		opacity: 0.3;
		/* Fades to nothing towards the headline, and softly at the edges. */
		mask-image:
			linear-gradient(to right, transparent 10%, #000 58%),
			linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
		mask-composite: intersect;
		-webkit-mask-image:
			linear-gradient(to right, transparent 10%, #000 58%),
			linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
		-webkit-mask-composite: source-in;
	}

	/*
	 * Belt and braces for anything that ignores mask-image: the same wash drawn
	 * in the hero's own colour, so the join is never a hard edge.
	 */
	.sell-hero__media::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, var(--color-signal) 8%, rgb(7 42 29 / 0.45) 50%, transparent 80%);
	}
}

.sell-hero__title {
	margin: 0.75rem 0 0;
	color: #fff;
}

.sell-hero__lede {
	margin: 1.25rem 0 0;
	max-width: 52ch;
	color: var(--paper-75);
}

.sell-hero__price {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-top: 2rem;
}

.sell-hero__amount {
	font-family: var(--font-mono);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1;
	color: var(--color-accent);
}

.sell-hero__terms {
	font-family: var(--font-mono);
	font-size: var(--text-data);
	color: var(--paper-55);
}

.sell-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.sell-hero__note {
	margin-top: 1.25rem;
	font-family: var(--font-mono);
	font-size: var(--text-data);
	color: var(--paper-55);
}

/* The screenshot sits in the template's own bracket treatment. */
.sell-shot {
	border: 1px solid var(--paper-20);
	background: var(--color-signal-dark);
}

.sell-shot img {
	display: block;
	width: 100%;
	height: auto;
}

/* ────────────────────────────────────────────────────────────── proof ───── */

.sell-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-top: 2.5rem;
	background: var(--color-line);
	border: 1px solid var(--color-line);
}

@media (width >= 48rem) {
	.sell-facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.sell-fact {
	background: var(--color-canvas);
	padding: 1.25rem;
}

.sell-fact__value {
	font-family: var(--font-mono);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--color-ink);
}

.sell-fact__label {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: var(--color-ink-3);
}

/*
 * The reskin argument. It sits under its heading rather than off to the side,
 * because it is the point of the section and not a footnote to it.
 */
.sell-argument {
	max-width: 46rem;
	color: var(--color-ink);
}

/* ───────────────────────────────────────────────────────────── points ───── */

.sell-points {
	display: grid;
	gap: 2rem;
	margin-top: 2.5rem;
}

@media (width >= 48rem) {
	.sell-points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 3rem;
	}
}

.sell-point__title {
	margin: 0 0 0.5rem;
	color: var(--color-ink);
}

.sell-point p {
	margin: 0;
	color: var(--color-ink-2);
}

/* ─────────────────────────────────────────────────────────── gallery ────── */

.sell-gallery {
	display: grid;
	gap: 1.5rem;
	margin-top: 2.5rem;
}

@media (width >= 48rem) {
	.sell-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sell-gallery figure {
	margin: 0;
}

.sell-gallery img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--color-line);
}

.sell-gallery figcaption {
	margin-top: 0.6rem;
	font-family: var(--font-mono);
	font-size: var(--text-data);
	color: var(--color-ink-3);
}

/* ───────────────────────────────────────────────────────────── pricing ──── */

.sell-plans {
	display: grid;
	gap: 1.5rem;
	margin-top: 2.5rem;
}

@media (width >= 48rem) {
	.sell-plans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sell-plan {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-line);
	background: var(--color-surface);
	padding: 1.75rem;
}

.sell-plan--feature {
	border-color: var(--color-signal);
}

.sell-plan__price {
	margin: 0.75rem 0 0;
	font-family: var(--font-mono);
	font-size: 2.25rem;
	line-height: 1;
	color: var(--color-ink);
}

.sell-plan__body {
	margin: 1rem 0 0;
	color: var(--color-ink-2);
}

.sell-plan__list {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--color-ink-2);
}

.sell-plan__list li {
	position: relative;
	padding-left: 1.25rem;
	margin-top: 0.5rem;
}

.sell-plan__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 0.625rem;
	height: 1px;
	background: var(--color-accent-dark);
}

.sell-plan__action {
	margin-top: auto;
	padding-top: 1.75rem;
}

/* ───────────────────────────────────────────────────────────── closing ──── */

.sell-close {
	background: var(--color-signal);
	color: #fff;
	padding-block: clamp(3rem, 7vw, 5rem);
	text-align: center;
}

.sell-close__title {
	margin: 0.75rem 0 0;
	color: #fff;
}

.sell-close__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 2rem;
}

.sell-foot {
	padding-block: 2rem;
	border-top: 1px solid var(--color-line);
	font-size: 0.875rem;
	color: var(--color-ink-3);
}

/*
 * Mailing-list sign-up, beside the free download.
 *
 * build.js --site writes this block in only when A1_EMAIL_ACTION names somewhere
 * for it to post; without that the markup is never emitted, so these rules match
 * nothing and cost nothing.
 */
.sell-signup {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--color-line);
	max-width: 34rem;
}

.sell-signup__label {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink);
}

.sell-signup__note {
	margin: 0.4rem 0 1rem;
	color: var(--color-ink-3);
}

.sell-signup__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.sell-signup__input {
	flex: 1 1 15rem;
	min-width: 0;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--color-line);
	background: var(--color-surface);
	color: var(--color-ink);
	font: inherit;
}

.sell-signup__input:focus-visible {
	outline: 2px solid var(--color-signal);
	outline-offset: 1px;
}

.sell-signup__credit {
	margin: 0.85rem 0 0;
	font-size: 0.8rem;
	color: var(--color-ink-4);
}

.sell-signup__credit a { color: inherit; }