@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Teko:wght@500;600&display=swap');

/*
 * Landing (/) only. Loaded after style.css, which keeps the legacy shell for
 * every other route -- nothing here may be written without a .z-landing scope.
 *
 * Asset URLs are relative on purpose: this file is served from the image host
 * ($server_data['imgs_server'] = /img locally, //img.example.ru in production),
 * so ../des/... resolves next to the stylesheet on both installations.
 *
 * Teko carries the condensed UI typography; Barlow carries body copy.
 * Local fallbacks keep the landing readable if Google Fonts is unavailable.
 */

.z-landing {
	--z-line: #4b473f;
	--z-text: #ded8ca;
	--z-head: #efeadc;
	--z-muted: #948d7c;
	--zone-yellow: #c58e20;
	--zone-yellow-light: #d9a63b;
	--zone-yellow-dark: #765515;
	--zone-yellow-text: #241a0b;
	--zone-yellow-accent: #d09a2b;
	--z-gold: var(--zone-yellow);
	--z-gold-bright: var(--zone-yellow-light);
	--z-green: #97c25c;

	--z-shell: 1760px;

	--z-body: "Barlow", Arial, sans-serif;
	--z-stencil: "Teko", "Arial Narrow", sans-serif;
	--z-display: "Teko", "Arial Narrow", sans-serif;
}

/* --- base ---------------------------------------------------------------- */

html {
	height: auto;
	min-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #77766f;
	background-image: url('../des/main_bg.jpg');
	background-repeat: repeat;
	background-attachment: scroll;
}

body.z-landing {
	height: auto;
	min-height: 100vh;
	overflow: visible;
	background-color: #77766f;
	background-image: url('../des/main_bg.jpg');
	background-repeat: repeat;
	background-attachment: scroll;
	color: var(--z-text);
	font-family: var(--z-body);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.55;
}

.z-landing #layout {
	position: relative;
	isolation: isolate;
	height: auto;
	min-height: 100vh;
	overflow: visible;
	background-color: #77766f;
	background-image:
		linear-gradient(180deg, rgba(21, 20, 17, 0.68), rgba(16, 15, 13, 0.76)),
		url('../des/main_bg.jpg');
	background-repeat: no-repeat, repeat;
	background-position: center top, left top;
	background-size: 100% 100%, auto;
}

/* One non-repeating weathering pass keeps the wall, artwork and UI feeling
   like the same aged surface without introducing a tiled dot pattern. */
.z-landing #layout::before,
.z-landing #layout::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 40;
	pointer-events: none;
}

.z-landing #layout::before {
	background-image:
		url('../des/reboot/auth-grunge.svg'),
		radial-gradient(ellipse 22% 13% at 89% 12%, rgba(20, 18, 14, 0.46), transparent 72%),
		radial-gradient(ellipse 31% 17% at 77% 31%, rgba(39, 34, 26, 0.28), transparent 76%),
		radial-gradient(ellipse 16% 28% at 4% 48%, rgba(34, 30, 24, 0.34), transparent 78%),
		radial-gradient(ellipse 24% 15% at 92% 72%, rgba(21, 20, 17, 0.32), transparent 75%),
		linear-gradient(92deg, transparent 0 73%, rgba(27, 24, 19, 0.13) 75%, transparent 77%),
		linear-gradient(88deg, transparent 0 86%, rgba(16, 15, 12, 0.11) 87%, transparent 89%);
	background-position: center top, center, center, center, center, center, center;
	background-size: 100% 100%, auto, auto, auto, auto, auto, auto;
	background-repeat: no-repeat;
	mix-blend-mode: multiply;
	opacity: 0.48;
}

.z-landing #layout::after {
	background:
		radial-gradient(ellipse 72% 58% at 50% 43%, transparent 55%, rgba(13, 12, 10, 0.31) 100%),
		radial-gradient(ellipse 18% 9% at 82% 19%, rgba(65, 57, 43, 0.13), transparent 72%),
		linear-gradient(180deg, rgba(20, 19, 16, 0.08), transparent 24%, transparent 72%, rgba(13, 12, 10, 0.2));
	box-shadow: inset 0 0 145px rgba(11, 10, 8, 0.42);
	mix-blend-mode: multiply;
}

.z-landing a {
	color: var(--z-gold-bright);
	text-decoration: none;
}

.z-landing a:hover {
	color: #f2cd77;
	text-decoration: underline;
}

.z-landing a:focus-visible,
.z-landing button:focus-visible,
.z-landing input:focus-visible {
	outline: 2px solid var(--z-gold-bright);
	outline-offset: 2px;
}

.z-landing img {
	max-width: 100%;
}

/* style.css turns every li into a 10px square-bulleted list item. */
.z-landing li {
	list-style: none;
	font-size: inherit;
}

.z-shell {
	width: calc(100% - 80px);
	max-width: var(--z-shell);
	box-sizing: border-box;
	margin: 0 auto;
}

.z-upper {
	position: relative;
	isolation: isolate;
}

.z-title {
	margin: 0;
	font-family: var(--z-display);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--z-gold);
	font-size: 20px;
	text-shadow:
		0 1px 0 rgba(0, 0, 0, 0.9),
		0 0 5px rgba(197, 142, 32, 0.16);
}

/* --- top bar ------------------------------------------------------------- */

.z-top {
	position: relative;
	display: grid;
	grid-template-columns: minmax(220px, 1fr) minmax(430px, 1.45fr) minmax(360px, 480px);
	align-items: start;
	gap: 28px;
	padding-top: 20px;
	padding-bottom: 5px;
}

.z-nav {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px 13px;
	padding: 9px 0 0;
	font-family: var(--z-stencil);
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 0.03em;
}

.z-nav a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	color: #f0e9da;
	text-shadow: 0 1px 2px rgba(19, 18, 15, 0.78);
}

.z-nav span {
	color: #aaa394;
}

.z-brand {
	text-align: center;
}

.z-wordmark {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.z-wordmark img {
	position: relative;
	z-index: 1;
	display: block;
	/* Fixed width: min()/auto here makes the grid's auto track take the image's
	   natural width and starve the nav and auth columns. The source has a square
	   transparent canvas, so object-fit crops only its empty vertical fields. */
	width: 400px;
	max-width: 100%;
	height: 107px;
	object-fit: cover;
	object-position: center;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28));
}

/* One continuous distressed hazard row sits behind the separate wordmark. */
.z-wordmark::before {
	content: "";
	position: absolute;
	top: 18px;
	right: 0;
	bottom: 18px;
	left: 0;
	background: url('../des/reboot/logo-stripes-row.png?v=20260905-02') center / 100% 100% no-repeat;
	opacity: 0.94;
	filter: brightness(1.16) contrast(1.12) saturate(1.06);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}


.z-strapline {
	margin: 6px 0 0;
	font-family: var(--z-stencil);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #2d2a24;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* --- auth ---------------------------------------------------------------- */

.z-auth {
	position: absolute;
	top: 29px;
	right: -4px;
	z-index: 10;
	width: 228px;
	height: auto;
	box-sizing: border-box;
	overflow: visible;
	padding: 0;
	border: 0;
	background: none;
}

.z-auth-field {
	display: block;
	height: auto;
	box-sizing: border-box;
	border: 0;
	background: none;
	box-shadow: none;
}

.z-auth-field + .z-auth-field {
	margin-top: 7px;
}

.z-auth-field label {
	display: block;
	margin: 0 0 2px;
	font-family: var(--z-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 16px;
	color: #ebe4d6;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

.z-auth-field input[type="text"],
.z-auth-field input[type="password"] {
	display: block;
	width: 100%;
	height: 24px;
	box-sizing: border-box;
	padding: 2px 7px;
	border: 2px solid transparent;
	border-image: url('../des/reboot/auth-input-frame-reference.jpg') 4 / 2px / 0 stretch;
	outline: 0;
	background: url('../des/reboot/auth-input-surface-reference.jpg') center / 100% 100% no-repeat;
	color: #211f1a;
	font-family: var(--z-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.015em;
	box-shadow: none;
}

.z-auth-field input[type="text"]:focus,
.z-auth-field input[type="password"]:focus {
	filter: brightness(1.04);
}

.z-auth-actions {
	display: flex;
	align-items: center;
	height: 38px;
	margin-top: 15px;
}

.z-auth-submit {
	flex: 0 0 98px;
	width: 98px;
	height: 38px;
	padding: 0;
	border: 0;
	background: url('../des/reboot/auth-submit-reference.png') center / 100% 100% no-repeat;
	font-size: 0;
	cursor: pointer;
}

.z-auth-submit:hover {
	filter: brightness(1.08);
}

.z-auth-separator {
	margin: 0 14px;
	color: rgba(207, 201, 186, 0.55);
}

.z-auth-actions a {
	font-family: var(--z-body);
	font-size: 14px;
	font-weight: 500;
	color: #c2d078;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.z-auth-actions a:hover {
	color: #d0dd8b;
}

.z-landing .z-button {
	display: inline-block;
	padding: 8px 20px;
	border: 1px solid #6f6653;
	background: linear-gradient(180deg, #6a655a 0%, #49443b 100%);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
	color: var(--z-head);
	font-family: var(--z-stencil);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.z-landing .z-button:hover {
	border-color: var(--z-gold);
	color: #fff;
	text-decoration: none;
}

.z-landing .z-button-primary::before {
	content: "\00BB\2002";
}

.z-landing .z-button-ghost::before {
	content: "\25B8\2002";
	color: var(--z-gold);
}

/* --- hero ---------------------------------------------------------------- */

.z-hero {
	display: grid;
	grid-template-columns: minmax(420px, 1fr) 620px;
	align-items: center;
	gap: 28px;
	min-height: 420px;
	padding-top: 0;
	padding-bottom: 14px;
}

.z-hero-copy {
	align-self: center;
	max-width: 700px;
	padding-left: 12px;
	transform: translateY(-68px);
}

.z-hero-eyebrow {
	margin: 0 0 1px;
	font-family: var(--z-stencil);
	font-size: 18.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	color: var(--zone-yellow-accent);
	text-shadow:
		0 1px 0 rgba(0, 0, 0, 0.9),
		0 0 5px rgba(197, 142, 32, 0.16);
}

.z-hero-headline {
	margin: 0 0 16px;
	max-width: 760px;
	font-family: var(--z-display);
	font-size: clamp(51px, 3.1vw, 59px);
	font-weight: 600;
	font-stretch: condensed;
	line-height: 0.86;
	letter-spacing: 0.01em;
	color: #e7e4dc;
	text-transform: uppercase;
	text-shadow: none;
}

.z-hero-headline span,
.z-hero-lead span {
	display: block;
}

.z-hero-lead {
	max-width: 640px;
	margin: 0 0 14px;
	font-family: var(--z-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	color: #e1ded6;
}

.z-hero-actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 15px;
}

.z-hero-actions .z-button {
	min-width: 0;
	box-sizing: border-box;
	text-align: center;
	font-family: var(--z-stencil);
	padding-top: 11px;
	padding-bottom: 11px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.045em;
}

.z-hero-actions .z-button-primary {
	width: 320px;
}

.z-hero-actions .z-button-ghost {
	width: 240px;
}

.z-hero-actions .z-button-primary::before {
	content: none;
}

.z-hero-actions .z-button-ghost::before {
	content: "\25B6\2002";
	color: #f2efe6;
	font-size: 14px;
}

.z-hero-benefits {
	width: 600px;
	max-width: 100%;
	margin-top: 22px;
	margin-left: -42px;
	overflow: hidden;
}

.z-hero-benefits img {
	display: block;
	width: 100%;
	height: auto;
}

.z-hero-benefits-mobile {
	display: none;
}

.z-note {
	margin: 18px 0 0;
	font-size: 11px;
	color: #6f6a5d;
}

.z-lower {
	position: relative;
	isolation: isolate;
	margin-top: -85px;
}

.z-lower::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 10;
	pointer-events: none;
	background: url('../des/reboot/auth-grunge.svg') center / 100% 100% no-repeat;
	mix-blend-mode: soft-light;
	opacity: 0.4;
}

.z-pillars-band {
	position: relative;
	border-top: 1px solid rgba(45, 43, 38, 0.72);
	border-bottom: 1px solid rgba(74, 71, 64, 0.38);
	background: transparent;
	box-shadow:
		0 -2px 0 rgba(24, 23, 20, 0.78),
		0 -5px 11px rgba(0, 0, 0, 0.38),
		inset 0 1px 0 rgba(192, 184, 164, 0.07),
		inset 0 8px 15px rgba(0, 0, 0, 0.17),
		inset 0 -10px 20px rgba(24, 22, 18, 0.12);
}

.z-pillars-band::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	right: 0;
	height: 7px;
	pointer-events: none;
	background:
		linear-gradient(176deg, transparent 0 31%, rgba(30, 29, 25, 0.74) 34% 47%, transparent 51%),
		linear-gradient(3deg, transparent 0 44%, rgba(146, 139, 123, 0.09) 47% 53%, transparent 56%);
}

.z-pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

.z-pillar {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 11px;
	min-height: 118px;
	box-sizing: border-box;
	padding: 17px 28px;
}

.z-pillar > * {
	position: relative;
	z-index: 1;
}

.z-pillar::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 43%;
	z-index: 0;
	background-position: center right;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.44;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
	mask-image: linear-gradient(90deg, transparent, #000 60%);
}

.z-pillar:nth-of-type(1)::after {
	background-image: url('../des/reboot/lower-pillar-1.png');
}

.z-pillar:nth-of-type(2)::after {
	background-image: url('../des/reboot/lower-pillar-2.png');
}

.z-pillar:nth-of-type(3)::after {
	background-image: url('../des/reboot/lower-pillar-3.png');
}

.z-pillar + .z-pillar {
	border-left: 0;
}

.z-pillar-icon {
	display: block;
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.z-pillar h3 {
	margin: 0 0 3px;
	font-family: var(--z-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #d3cfc4;
}

.z-pillar p {
	margin: 0;
	max-width: 360px;
	font-size: 11px;
	line-height: 1.3;
	color: #b6b2a8;
}

/* --- three-column body --------------------------------------------------- */

.z-cols {
	display: grid;
	grid-template-columns: minmax(300px, 0.95fr) minmax(460px, 1.1fr) minmax(330px, 1fr);
	gap: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: 1px solid rgba(61, 59, 53, 0.42);
}

.z-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	padding: 15px 18px 17px;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.z-card:first-child {
	border-left: 0;
}

.z-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 7px;
}

.z-card-head .z-more {
	font-size: 10px;
	color: #c8ad74;
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* news */

.z-news {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.z-news li + li {
	padding-top: 7px;
	border-top: 1px solid rgba(63, 61, 55, 0.34);
}

.z-news a.z-news-subject {
	display: block;
	font-family: var(--z-stencil);
	font-size: 14px;
	letter-spacing: 0.03em;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: #c5c1b7;
}

.z-news-meta {
	display: block;
	margin: 1px 0 3px;
	font-size: 9px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: #777267;
}

.z-news-meta a {
	color: #9a917c;
}

.z-news-text {
	font-size: 10px;
	line-height: 1.28;
	color: #aaa69d;
	/* Forum posts arrive with their own markup; clamp instead of truncating. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* screenshots */

.z-shots {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
}

.z-shots a {
	display: block;
	border: 1px solid rgba(89, 86, 77, 0.58);
	background: rgba(18, 17, 15, 0.36);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.34),
		inset 0 0 11px rgba(0, 0, 0, 0.48),
		inset 1px 1px 0 rgba(185, 177, 157, 0.04);
	line-height: 0;
}

.z-shots a:hover {
	border-color: #76633a;
}

.z-shots img {
	display: block;
	width: 100%;
	height: 116px;
	object-fit: cover;
	filter: saturate(0.62) contrast(1.09) brightness(0.8);
}

/* rankings */

.z-rank-tabs {
	display: flex;
	gap: 8px;
	font-size: 10px;
	letter-spacing: 0.025em;
	text-transform: none;
	white-space: nowrap;
}

.z-rank-tabs a {
	color: #cbc2b1;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}

.z-rank-tabs a:hover {
	color: var(--z-gold-bright);
	text-decoration: none;
}

.z-rank-tabs a.z-active {
	color: #d0b16b;
	border-bottom-color: var(--zone-yellow-dark);
}

.z-rank {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	color: var(--z-text);
	font-variant-numeric: tabular-nums;
}

.z-rank[data-period="today"] .z-col-week {
	display: none;
}

.z-rank[data-period="today"] .z-col-all,
.z-rank[data-period="week"] .z-col-all,
.z-rank[data-period="all"] .z-col-today,
.z-rank[data-period="all"] .z-col-week {
	display: none;
}

.z-rank[data-period="week"] .z-col-today {
	display: none;
}

.z-rank td {
	padding: 6px 5px;
	border-bottom: 1px solid rgba(63, 61, 55, 0.38);
	background: rgba(12, 12, 10, 0.18);
	text-align: right;
	white-space: nowrap;
}

.z-rank td:first-child {
	overflow: hidden;
	padding-left: 0;
	max-width: 0;
	width: 100%;
	text-align: left;
	text-overflow: ellipsis;
}

.z-rank td:first-child a {
	color: var(--z-head);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.z-rank-place {
	color: #858075;
}

.z-rank-value {
	color: #929b48;
}

.z-rank-diff {
	min-width: 13px;
	padding-right: 0;
	padding-left: 0;
}

/* The first cell claims the free width, so the arrow needs an explicit box. */
.z-rank-diff img {
	width: 7px;
	height: 10px;
	max-width: none;
}

.z-card-foot {
	margin-top: auto;
	padding-top: 8px;
}

.z-card-foot .z-button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0;
	border: 1px solid var(--zone-yellow-dark);
	border-radius: 2px;
	background: color-mix(in srgb, var(--zone-yellow) 42%, transparent);
	box-shadow: none;
	color: var(--zone-yellow-text);
	font-size: 17px;
}

.z-landing .z-button-ghost {
	padding: 0;
	border: 0;
	background: url('../des/reboot/hero-secondary-reference.jpg') center / 100% 100% no-repeat;
	box-shadow: none;
	color: transparent;
	font-size: 0;
}

.z-landing .z-button-ghost::before,
.z-landing .z-button-ghost::after {
	content: none;
}

.z-landing .z-button-ghost:hover {
	border: 0;
	color: transparent;
	filter: brightness(1.06);
}

.z-card-foot .z-button:hover {
	border-color: #514b3f;
	background: color-mix(in srgb, #171510 78%, transparent);
	color: var(--z-head);
}

.z-landing .z-button-primary {
	position: relative;
	z-index: 21;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid var(--zone-yellow-dark);
	border-radius: 2px;
	background: color-mix(in srgb, var(--zone-yellow) 42%, transparent);
	box-shadow: none;
	color: var(--zone-yellow-text);
	text-shadow: none;
}

.z-landing .z-button-primary::before {
	content: none;
}

.z-button-primary-content {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	line-height: 1;
}

.z-button-primary-icon {
	font-family: Arial, sans-serif;
	font-size: 1.3em;
	font-weight: 700;
}

.z-landing .z-button-primary::after {
	content: none;
}

.z-landing .z-button-primary:hover {
	border-color: var(--zone-yellow-dark);
	background: color-mix(in srgb, var(--zone-yellow) 42%, transparent);
	color: var(--zone-yellow-text);
	text-decoration: none;
}

.z-landing .z-button-primary:active {
	transform: translateY(1px);
	box-shadow: none;
}

/* --- footer -------------------------------------------------------------- */

.z-foot {
	border-top: 1px solid rgba(54, 52, 47, 0.5);
	background: transparent;
}

.z-foot-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 15px;
	padding-top: 11px;
	padding-bottom: 11px;
	font-size: 11px;
	color: var(--z-muted);
}

.z-foot a {
	font-family: var(--z-stencil);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #b4b0a6;
}

.z-online {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--z-stencil);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--z-text);
}

.z-online::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--z-green);
}

.z-foot-sep {
	color: var(--z-line);
}

.z-copyright {
	margin-left: auto;
}

/* --- adaptation ---------------------------------------------------------- */

@media (max-width: 1180px) {
	.z-upper {
		display: grid;
		grid-template-columns: minmax(420px, 52%) minmax(0, 48%);
		grid-template-areas:
			"top top"
			"hero scene";
	}

	.z-top {
		grid-area: top;
		grid-template-columns: minmax(180px, 1fr) minmax(320px, 1.4fr) minmax(228px, 1fr);
	}

	.z-brand {
		grid-column: 2;
	}

	.z-auth {
		position: static;
		grid-column: 3;
		justify-self: end;
		margin-top: 9px;
	}

	.z-hero {
		grid-area: hero;
		display: block;
		width: auto;
		max-width: none;
		min-height: 0;
		margin: 0;
		padding: 24px 0 24px 40px;
	}

	.z-hero-copy {
		width: 100%;
		padding-left: 0;
		transform: none;
	}

	.z-hero-actions {
		flex-wrap: wrap;
	}

	.z-hero-actions .z-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		box-sizing: border-box;
		padding: 0 12px;
	}

	.z-hero-benefits {
		margin-left: 0;
	}

	.z-window-scene {
		grid-area: scene;
		display: block;
		align-self: start;
		width: 100%;
		max-width: 650px;
		aspect-ratio: 3 / 2;
		background: url('../des/reboot/window-robot-source.png') right top / 112% auto no-repeat;
	}

	.z-lower {
		margin-top: 0;
	}

	.z-cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.z-cols .z-card-shots {
		grid-column: 1 / -1;
		order: 3;
	}
}

@media (max-width: 900px) {
	.z-shell {
		width: calc(100% - 32px);
	}

	.z-upper {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"top"
			"hero";
	}

	.z-top {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.z-nav {
		justify-content: center;
		flex-wrap: wrap;
		padding-top: 0;
	}

	.z-brand {
		grid-column: 1;
	}

	.z-auth {
		grid-column: 1;
		justify-self: center;
		width: min(100%, 360px);
		max-width: 360px;
		margin-top: 4px;
	}

	.z-hero {
		width: calc(100% - 32px);
		margin: 0 auto;
		padding: 24px 0 16px;
	}

	.z-hero-headline {
		font-size: 38px;
	}

	.z-window-scene {
		display: none;
	}

	.z-pillars {
		grid-template-columns: minmax(0, 1fr);
	}

	.z-pillar + .z-pillar {
		border-left: 0;
		border-top: 1px solid rgba(58, 52, 43, 0.6);
	}
}

@media (max-width: 700px) {
	.z-auth-field input[type="text"],
	.z-auth-field input[type="password"] {
		height: 44px;
		padding: 7px 10px;
		font-size: 16px;
		line-height: 26px;
	}

	.z-auth-actions,
	.z-auth-submit {
		height: 44px;
	}

	.z-hero-headline {
		font-size: clamp(36px, 12vw, 44px);
	}

	.z-hero-lead {
		font-size: 14px;
		line-height: 1.45;
	}

	.z-hero-lead span {
		display: inline;
	}

	.z-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.z-hero-actions .z-button-primary {
		width: 100%;
	}

	.z-hero-actions .z-button-ghost {
		align-self: center;
		width: min(100%, 240px);
	}

	.z-hero-benefits {
		width: 100%;
		margin-top: 18px;
		overflow: visible;
	}

	.z-hero-benefits > img {
		display: none;
	}

	.z-hero-benefits-mobile {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 12px;
		margin: 0;
		padding: 0;
	}

	.z-hero-benefits-mobile li {
		display: flex;
		align-items: center;
		gap: 9px;
		min-width: 0;
		color: #d8d2c5;
		font-family: var(--z-stencil);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.05;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.z-hero-benefits-mobile svg {
		flex: 0 0 32px;
		color: #d3ccbc;
	}

	.z-note {
		margin-top: 12px;
		font-size: 10px;
	}

	.z-cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.z-cols .z-card-news {
		order: 1;
	}

	.z-cols .z-card-shots {
		grid-column: auto;
		order: 2;
	}

	.z-cols .z-card-rank {
		order: 3;
	}

	.z-card {
		padding-right: 0;
		padding-left: 0;
	}

	.z-card-head {
		flex-wrap: wrap;
	}

	.z-card-rank .z-card-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 7px;
	}

	.z-news a.z-news-subject {
		font-size: 17px;
	}

	.z-news-meta {
		font-size: 11px;
	}

	.z-news-text {
		font-size: 13px;
		line-height: 1.4;
	}

	.z-shots {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}

	.z-shots a {
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.z-shots img {
		height: 100%;
	}

	.z-rank-tabs {
		flex-wrap: wrap;
		font-size: 12px;
	}

	.z-wordmark::before {
		display: none;
	}

	.z-foot-inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 16px;
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.z-foot-sep {
		display: none;
	}

	.z-copyright {
		grid-column: 1 / -1;
		margin-left: 0;
	}
}

@media (max-width: 420px) {
	.z-nav {
		gap: 6px 9px;
		font-size: 16px;
	}

	.z-strapline {
		font-size: 11px;
		letter-spacing: 0.08em;
	}

	.z-foot-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.z-copyright {
		grid-column: 1;
	}
}

/* Reference-sized desktop composition. Vertical scrolling is intentional: at
   1213px wide the four structural bands reproduce the 1280px source canvas. */
.z-landing .z-wall-backdrop {
	display: none;
}

@media (min-width: 1181px) {
	.z-landing {
		--z-header-height: 150px;
		--z-hero-height: 478px;
		--z-pillars-height: 186px;
		--z-content-height: 377px;
		--z-footer-height: 89px;
	}

	/* The wall covers the page; the scene is positioned inside the upper band so
	   its artwork and UI share one responsive coordinate system. */
	.z-landing #layout {
		background-image: url('../des/main_bg.jpg');
		background-repeat: repeat;
		background-position: left top;
		background-size: auto;
	}

	.z-landing .z-wall-backdrop {
		display: block;
		position: absolute;
		inset: 0;
		z-index: -1;
		overflow: hidden;
		pointer-events: none;
		background: none;
	}

	.z-landing .z-window-scene {
		--z-window-width: clamp(650px, calc(73vw - 212px), 1040px);
		--z-window-foot-inset: calc(var(--z-window-width) * 0.0612);
		display: block;
		position: absolute;
		z-index: 0;
		right: clamp(-20px, calc(-3vw + 100px), 50px);
		bottom: calc(var(--z-window-foot-inset) * -1);
		width: var(--z-window-width);
		aspect-ratio: 3 / 2;
		pointer-events: none;
		background: url('../des/reboot/window-robot-source.png') right bottom / contain no-repeat;
	}

	.z-landing .z-wall-backdrop::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		background: linear-gradient(180deg, rgba(21, 20, 17, 0.68), rgba(16, 15, 13, 0.76));
	}

	.z-upper > .z-top,
	.z-upper > .z-hero {
		position: relative;
		z-index: 1;
		width: 100%;
		max-width: none;
		margin-right: 0;
		margin-left: 0;
		padding-right: 36px;
		padding-left: 36px;
	}

	.z-top {
		height: var(--z-header-height);
		box-sizing: border-box;
		grid-template-columns: minmax(220px, 1fr) minmax(374px, 580px) minmax(228px, 1fr);
	}

	.z-auth {
		position: static;
		justify-self: end;
		margin-top: 9px;
	}

	.z-brand {
		position: static;
		grid-column: 2;
		width: 100%;
		transform: none;
	}

	.z-wordmark {
		height: 104px;
	}

	.z-wordmark img {
		flex: 0 0 374px;
		width: 374px;
		height: 104px;
	}

	.z-strapline {
		margin-top: 0;
		font-size: 18px;
		line-height: 22px;
		letter-spacing: 0.07em;
		color: #c3bdab;
		text-shadow: none;
	}

	.z-hero {
		height: var(--z-hero-height);
		min-height: 0;
		box-sizing: border-box;
		padding-top: 0;
		padding-bottom: 0;
		grid-template-columns: 600px minmax(0, 1fr);
	}

	.z-hero-copy {
		align-self: start;
		width: 600px;
		box-sizing: border-box;
		padding: 10px 0 0;
		transform: none;
	}

	.z-hero-eyebrow {
		margin-bottom: 12px;
		font-size: 22px;
		font-weight: 500;
		line-height: 24px;
		letter-spacing: 0.02em;
	}

	.z-hero-headline {
		margin-bottom: 2px;
		font-size: 63px;
		line-height: 58px;
	}

	.z-hero-lead {
		max-width: 410px;
		margin-bottom: 24px;
		font-size: 13.5px;
		line-height: 18.5px;
	}

	.z-hero-actions {
		gap: 16px;
	}

	.z-hero-actions .z-button {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 48px;
		padding: 0 12px;
		font-size: 20px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.02em;
	}

	.z-hero-actions .z-button-primary {
		width: 266px;
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 0.018em;
	}

	.z-hero-actions .z-button-ghost {
		width: 160px;
	}

	.z-hero-actions .z-button-ghost::before {
		content: none;
	}

	/* The existing transparent strip has empty margins around its printed ink. */
	.z-hero-benefits {
		width: 580px;
		max-width: none;
		height: 74px;
		margin: -2px 0 0;
	}

	.z-hero-benefits img {
		width: 630px;
		max-width: none;
		margin-left: -47px;
	}

	.z-hero .z-note {
		margin-top: 8px;
		font-size: 10px;
		line-height: 14px;
		font-weight: 400;
		color: #b7b1a4;
	}

	.z-lower {
		margin-top: 0;
	}

	.z-pillars-band {
		height: var(--z-pillars-height);
		min-height: 0;
		box-sizing: border-box;
	}

	.z-pillars-band > .z-shell {
		height: calc(100% - 1px);
		min-height: 0;
		box-sizing: border-box;
		width: 100%;
		max-width: none;
	}

	.z-pillars,
	.z-pillar {
		height: 100%;
		min-height: 0;
		box-sizing: border-box;
	}

	.z-pillar + .z-pillar {
		border-left: 1px solid rgba(65, 62, 55, 0.38);
	}

	.z-cols {
		width: 100%;
		max-width: none;
		height: auto;
		min-height: var(--z-content-height);
		box-sizing: border-box;
		margin-right: 0;
		margin-left: 0;
		grid-template-columns: 32.2% 34.9% 32.9%;
		background: transparent;
	}

	.z-cols .z-card {
		height: auto;
		box-sizing: border-box;
		padding: 17px 22px 24px;
	}

	.z-cols .z-card + .z-card {
		border-left: 1px solid rgba(115, 109, 96, 0.44);
	}

	.z-foot {
		height: auto;
		min-height: var(--z-footer-height);
		box-sizing: border-box;
		background: rgba(14, 14, 12, 0.6);
	}

	.z-foot-inner {
		height: auto;
		min-height: calc(var(--z-footer-height) - 1px);
		box-sizing: border-box;
		flex-wrap: nowrap;
		gap: 0 28px;
		font-size: 14px;
	}

	/* Lower-page details follow the same 1213px reference, within the fixed bands. */
	.z-pillars {
		grid-template-columns: 34% 31.3% 34.7%;
	}

	.z-pillar {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 24px;
		padding: 30px 22px;
	}

	.z-pillar:first-child {
		padding-left: 36px;
	}

	.z-pillar-icon {
		width: 48px;
		height: 48px;
	}

	.z-pillar h3 {
		margin-bottom: 8px;
		font-size: 22px;
		font-weight: 500;
		line-height: 28px;
		letter-spacing: 0.02em;
		color: #ded8ca;
	}

	.z-pillar p {
		max-width: 190px;
		font-size: 13.5px;
		font-weight: 400;
		line-height: 21.5px;
		color: #c6c0b3;
	}

	.z-pillar::after {
		width: 52%;
		max-width: 220px;
		background-size: cover;
		opacity: 0.9;
		filter: contrast(1.25) brightness(1.12) saturate(0.9);
		-webkit-mask-image: linear-gradient(90deg,
			transparent 0%,
			rgba(0, 0, 0, 0.14) 12%,
			rgba(0, 0, 0, 0.34) 24%,
			rgba(0, 0, 0, 0.58) 36%,
			rgba(0, 0, 0, 0.80) 47%,
			#000 56%
		);
		mask-image: linear-gradient(90deg,
			transparent 0%,
			rgba(0, 0, 0, 0.14) 12%,
			rgba(0, 0, 0, 0.34) 24%,
			rgba(0, 0, 0, 0.58) 36%,
			rgba(0, 0, 0, 0.80) 47%,
			#000 56%
		);
	}

	.z-cols .z-card-news {
		padding-left: 36px;
		padding-right: 20px;
	}

	.z-cols .z-card-rank {
		padding-left: 26px;
		padding-right: 36px;
	}

	.z-lower .z-title {
		font-size: 24px;
		font-weight: 500;
		line-height: 28px;
		letter-spacing: 0.02em;
		color: var(--zone-yellow);
	}

	.z-card-head {
		gap: 12px;
		min-height: 28px;
		margin-bottom: 11px;
	}

	.z-card-head .z-more {
		font-size: 12px;
		color: #cdb47b;
	}

	.z-news {
		gap: 4px;
	}

	.z-news li {
		position: relative;
		display: block;
		height: 80px;
		min-height: 0;
	}

	.z-news li + li {
		padding-top: 0;
		border-top: 0;
	}

	.z-news li + li::before {
		content: "";
		position: absolute;
		top: -2px;
		left: 0;
		right: 0;
		border-top: 1px solid rgba(63, 61, 55, 0.34);
	}

	.z-news-copy {
		min-width: 0;
	}

	.z-news a.z-news-subject {
		font-family: var(--z-body);
		font-size: 15px;
		font-weight: 500;
		line-height: 19px;
		letter-spacing: 0;
		color: #d6d0c4;
	}

	.z-news-meta {
		margin: 2px 0;
		font-size: 10px;
		line-height: 12px;
		letter-spacing: 0;
		text-transform: none;
		color: #958e7e;
	}

	.z-news-text {
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		-webkit-line-clamp: 4;
		color: #c2bcaf;
	}

	.z-shots {
		align-self: center;
		width: 100%;
		max-width: none;
		grid-auto-rows: 138.5px;
	}

	.z-card-shots .z-card-head {
		align-self: center;
		width: 100%;
		max-width: none;
	}

	.z-shots img {
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
		filter: saturate(0.74) contrast(1.08) brightness(0.9);
	}

	.z-shots a {
		overflow: hidden;
		border-color: rgba(113, 107, 94, 0.72);
	}

	.z-card-rank .z-card-head {
		margin-bottom: 23px;
	}

	.z-rank-tabs {
		gap: 0;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 0;
	}

	.z-rank-tab + .z-rank-tab::before {
		content: "";
		display: inline-block;
		height: 11px;
		margin: 0 5px;
		border-left: 1px solid var(--z-muted);
		vertical-align: -1px;
	}

	.z-rank {
		font-size: 14px;
		line-height: 21px;
	}

	.z-rank td {
		height: 39px;
		box-sizing: border-box;
		padding: 8px 10px;
		border-bottom-color: rgba(120, 114, 100, 0.42);
		background: rgba(8, 8, 7, 0.46);
	}

	.z-rank td:first-child {
		padding-left: 14px;
	}

	.z-rank-value {
		font-weight: 700;
		color: #a9b553;
	}

	.z-rank .z-rank-diff {
		padding-left: 0;
		padding-right: 0;
	}

	.z-card-foot {
		margin-top: 30px;
		padding-top: 0;
	}

	.z-card-foot .z-button {
		height: 44px;
		font-size: 20px;
	}

	.z-foot a,
	.z-online {
		font-size: 20px;
		font-weight: 500;
		line-height: 24px;
		letter-spacing: 0.02em;
		white-space: nowrap;
		color: #e5ddcd;
	}

	.z-foot-sep {
		color: #766f61;
	}

	.z-copyright {
		font-weight: 400;
		white-space: nowrap;
		color: #cbc4b6;
	}
}

/* Distressed warning paint inside ochre headings. The texture is clipped to
   glyphs, so it cannot create a rectangular label background. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.z-lower .z-title,
	.z-hero-eyebrow {
		background:
			radial-gradient(circle at 12% 28%, rgba(48, 37, 19, 0.72) 0 0.8px, transparent 1.55px),
			radial-gradient(circle at 46% 71%, rgba(66, 46, 15, 0.62) 0 0.7px, transparent 1.45px),
			radial-gradient(circle at 81% 36%, rgba(43, 36, 25, 0.68) 0 0.9px, transparent 1.7px),
			url('../des/reboot/auth-grunge.svg') 37% 53% / 310px 170px no-repeat,
			linear-gradient(180deg, var(--zone-yellow-accent), #ad7419);
		background-blend-mode: multiply, multiply, multiply, multiply, normal;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
		text-shadow: none;
		filter:
			drop-shadow(0 1px 0 rgba(0, 0, 0, 0.9))
			drop-shadow(0 0 3px rgba(197, 142, 32, 0.12));
	}
}

/* Exact reference typography for the fixed desktop lower-section labels.
   The semantic text and links remain in the document; the crops are visual only. */
@media (min-width: 1181px) {
	.z-card-news {
		--z-title-crop: url('../des/reboot/lower-title-news.png');
		--z-title-crop-width: 101px;
		--z-link-crop: url('../des/reboot/lower-link-more.png');
		--z-link-crop-width: 43px;
	}

	.z-card-shots {
		--z-title-crop: url('../des/reboot/lower-title-shots.png');
		--z-title-crop-width: 136px;
		--z-link-crop: url('../des/reboot/lower-link-screenshots.png');
		--z-link-crop-width: 91px;
	}

	.z-card-rank {
		--z-title-crop: url('../des/reboot/lower-title-rankings.png');
		--z-title-crop-width: 158px;
	}

	.z-lower .z-card-head .z-title {
		flex: none;
		width: var(--z-title-crop-width);
		height: 30px;
		font-size: 0;
		line-height: 0;
		background: var(--z-title-crop) left top / 100% 100% no-repeat;
		background-blend-mode: normal;
		-webkit-background-clip: border-box;
		background-clip: border-box;
		filter: none;
	}

	.z-card-rank .z-card-head {
		align-items: flex-start;
	}

	.z-card-rank .z-rank-tabs {
		margin-top: 5px;
	}

	.z-card-news .z-more,
	.z-card-shots .z-more {
		flex: none;
		width: var(--z-link-crop-width);
		height: 21px;
		font-size: 0;
		line-height: 0;
		background: var(--z-link-crop) left top / 100% 100% no-repeat;
	}

	.z-card-news .z-more:hover,
	.z-card-shots .z-more:hover {
		filter: brightness(1.08);
	}
}