/* The footer (Figma «Landing · Footer» 1440 wide, «Mobile · Footer» 390 wide). Dark, on every page. */

.site-footer {
	--rule: rgba(255, 255, 255, 0.08);
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--rule);
	background: var(--ink);
	color: var(--white);
}

/* The two vertical rules, continuing the sections'. */
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: calc(var(--container) + 1px);
	border-inline: 1px solid var(--rule);
	transform: translateX(-50%);
	pointer-events: none;
}

.site-footer__inner {
	position: relative;
	width: var(--container);
	margin: 0 auto;
	padding: 79px 40px 0;
}

.site-footer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

/* Brand ------------------------------------------------------------------------------------------------------------ */

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: the right edge. */
	gap: 16px;
}

.site-footer__logo { display: block; color: var(--white); }
.site-footer__logo .logo { width: 91px; height: 40px; }

.site-footer__tagline {
	color: rgba(255, 255, 255, 0.55);
	font-size: 15px;
	line-height: 1.8;
}

.site-footer__buy {
	height: 43px;
	gap: 8px;
	padding: 11px 22px 12px 18px;
	background: var(--white);
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
}
.site-footer__buy:hover { background: #f0edeb; }
.site-footer__buy .icon { width: 17px; height: 17px; }

/* Link columns ---------------------------------------------------------------------------------------------------- */

.site-footer__cols {
	display: flex;
	gap: 88px;
}

.site-footer__col { display: flex; flex-direction: column; gap: 14px; }
.site-footer__col ul { display: flex; flex-direction: column; gap: 14px; line-height: 20px; }

.site-footer__head {
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
}

.site-footer__col a {
	color: rgba(255, 255, 255, 0.55);
	font-size: 15px;
	line-height: 20px;
	white-space: nowrap;
	transition: color 0.2s;
}
.site-footer__col a:hover { color: var(--white); }

/* Bottom row ------------------------------------------------------------------------------------------------------- */

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 55px; /* The rule, 24px, then a 30px row. */
	margin-top: 137px;
	padding-top: 24px;
	border-top: 1px solid var(--rule);
}

.site-footer__copy {
	color: rgba(255, 255, 255, 0.45);
	font-size: 13px;
	font-weight: 500;
	line-height: 17px;
}

.site-footer__version {
	color: rgba(255, 255, 255, 0.35);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 16px;
}

/* Pelk's name, huge, fading out and cut by the bottom of the page (decorative). */
.site-footer__wordmark {
	--size: clamp(190px, 29.17vw, 420px);
	--shown: 0.405; /* How much of its height shows, as in the design. */
	position: relative;
	height: calc(var(--size) * var(--shown));
	margin-top: 29px;
	overflow: hidden;
	text-align: center;
	pointer-events: none;
	user-select: none;
}
.site-footer__wordmark span {
	display: inline-block;
	background: linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 70%, rgba(255, 255, 255, 0));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: var(--size);
	font-weight: 900;
	line-height: 1;
}

@media (max-width: 1180px) {
	.site-footer__inner { padding-inline: 0; }
}

@media (max-width: 1023px) {
	.site-footer__top { flex-direction: column; gap: 40px; }
	.site-footer__cols { justify-content: space-between; width: 100%; gap: 24px; }
}

/* Phones: the brand at the right, the three columns in one row, the bottom row centred. */
@media (max-width: 767px) {
	.site-footer__inner { padding-top: 55px; }

	.site-footer__bottom {
		flex-direction: column;
		gap: 0;
		min-height: 0;
		margin-top: 36px;
		padding-top: 18px;
		text-align: center;
	}

	.site-footer__wordmark { --shown: 0.547; margin-top: 28px; }
}