/* Jael-inspired product layout, scoped to pages that opt in with zh-modern. */

/* RotoSpider Design step A (2026-07-18): self-hosted Saira for the wordmark.
   One variable-font file covers weights 600-700. No external font CDN (blocked in
   China). See the shared design guideline. */
@font-face {
	font-family: "Saira";
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url("/css/fonts/saira-latin-600-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Saira";
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url("/css/fonts/saira-latin-ext-600-700.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Step B: headings in Saira (guideline section 5); hero keeps 700, others 600.
   Chinese headings fall back to YaHei via the stack. */
.zh-modern h1,
.zh-modern h2,
.zh-modern h3,
.zh-modern h4 {
	font-family: "Saira", "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif;
}
body.zh-modern-page {
	background: #f4f7f8;
	color: #1f2933;
	overflow-x: hidden;
}

.zh-modern {
	--zh-bg: #f4f7f8;
	--zh-ink: #17212a;
	--zh-ink-soft: #24313c;
	--zh-panel: #ffffff;
	--zh-rule: #d8e0e6;
	--zh-text: #1f2933;
	--zh-muted: #5e6d79;
	--zh-steel: #4f7893;
	--zh-steel-dark: #365b73;
	--zh-accent: #1688a5;
	--zh-good: #247a5a;
	--zh-warm: #a26a18;
	/* RotoSpider Design step A tokens - see guideline sections 3-4 */
	--zh-logo-blue: #2B6E9E;
	--zh-signal: #F9A800;
	--zh-machine: #E87600;
	--zh-machine-deep: #B85C00;
	--zh-panel-tint: #EEF4F8;
	min-height: 100vh;
	background: var(--zh-bg);
}

.zh-modern a {
	color: var(--zh-steel-dark);
	text-decoration: none;
}

.zh-modern a:hover {
	color: var(--zh-accent);
}

.zh-modern .container {
	max-width: 1140px;
}

.zh-product-nav {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, .96);
	border-bottom: 1px solid var(--zh-rule);
	backdrop-filter: blur(10px);
}

.zh-product-nav-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 64px;
}

/* Lockup rule (step A): mark height = wordmark cap height, mark bottom on the
   text baseline; wordmark RotoSpider in Saira Bold. Guideline section 2. */
.zh-product-logo {
	display: flex;
	align-items: baseline;
	gap: 9px;
	color: var(--zh-ink);
	font-family: "Saira", "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .03em;
}

.zh-product-logo img {
	width: auto;
	height: 16px;
}

.zh-product-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin-left: auto;
}

.zh-product-links a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 8px 11px;
	border-radius: 4px;
	color: #52616d;
	font-size: 14px;
	font-weight: 600;
}

/* Step B: active nav = orange marker line, like a marked lane edge */
.zh-product-links a.active {
	background: transparent;
	color: var(--zh-ink);
	border-radius: 0;
	box-shadow: inset 0 -3px 0 var(--zh-machine);
}

.zh-product-links a.zh-lang-link {
	border: 1px solid var(--zh-rule);
	background: #fff;
}

.zh-hero {
	position: relative;
	overflow: hidden;
	padding: 72px 0 64px;
	background: var(--zh-ink);
	color: #eaf2f7;
	border-bottom: 4px solid var(--zh-machine);
}

/* UI polish 2026-07-16: single column by default; the 340px stat rail only remains
   on the benchmark report pages (real results), so widen only when one is present.
   Browsers without :has() fall back to single column with the rail below the text. */
.zh-hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	align-items: end;
}

.zh-hero-inner:has(.zh-stat-list) {
	grid-template-columns: minmax(0, 1fr) 340px;
}

.zh-hero h1 {
	margin: 0 0 18px;
	max-width: 720px;
	color: #fff;
	font-size: 56px;
	line-height: 1.04;
	font-weight: 700;
	letter-spacing: 0;
	overflow-wrap: break-word;
}

.zh-hero-lead {
	max-width: 650px;
	margin: 0 0 28px;
	color: #c6d4df;
	font-size: 18px;
	line-height: 1.7;
}

.zh-action-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.zh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	min-height: 42px;
	padding: 9px 16px;
	border-radius: 4px;
	border: 2px solid transparent;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	white-space: normal;
}

/* Step B: primary action = signal yellow with ink text (guideline section 3) */
.zh-btn-primary {
	background: var(--zh-signal);
	border-color: var(--zh-signal);
	color: var(--zh-ink) !important;
	font-family: "Saira", "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif;
}

.zh-btn-primary:hover {
	background: var(--zh-signal);
	border-color: var(--zh-machine-deep);
}

.zh-btn-outline {
	background: transparent;
	border-color: rgba(255, 255, 255, .28);
	color: #eaf2f7 !important;
}

.zh-btn-outline:hover {
	border-color: #9ed7e5;
	color: #fff !important;
}

/* UI polish 2026-07-16: secondary buttons are quiet ghosts; only zh-btn-primary is filled */
.zh-btn-light {
	background: #fff;
	border-color: var(--zh-steel);
	color: var(--zh-steel-dark) !important;
}

.zh-btn-light:hover {
	border-color: var(--zh-machine-deep);
	color: var(--zh-machine-deep) !important;
}

.zh-stat-list {
	display: grid;
	gap: 18px;
	padding-left: 24px;
	border-left: 3px solid var(--zh-machine);
}

.zh-stat-value {
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
}

.zh-stat-label {
	margin-top: 6px;
	color: #9fb2c0;
	font-size: 13px;
}

.zh-download-band,
.zh-editions-band {
	background: #fff;
	border-bottom: 1px solid var(--zh-rule);
}

.zh-band-tint {
	background: var(--zh-bg);
}

.zh-download-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 28px 0;
}

.zh-download-copy {
	padding-left: 18px;
	border-left: 4px solid var(--zh-ink-blue);
}

.zh-download-copy h2,
.zh-section-title {
	margin: 0 0 8px;
	color: var(--zh-ink);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0;
}

.zh-download-copy p,
.zh-section-subtitle {
	margin: 0;
	color: var(--zh-muted);
	line-height: 1.65;
}

.zh-download-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

.zh-webapp-band {
	padding: 44px 0 46px;
	background: #fff;
	border-bottom: 1px solid var(--zh-rule);
}

.zh-webapp-panel {
	padding: 16px;
	border: 1px solid var(--zh-rule);
	border-radius: 4px;
	background: #f7fafb;
}

.zh-webapp-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 3;
	margin-top: 16px;
	overflow: hidden;
	border: 1px solid #c9d5de;
	border-radius: 4px;
	background: #fff;
}

.zh-webapp-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.zh-download-copy .zh-webapp-classic {
	margin-top: 8px;
	font-size: 14px;
}

.zh-docs-band {
	padding: 56px 0 60px;
}

.zh-docs-layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.zh-toc {
	position: sticky;
	top: 88px;
	padding-left: 16px;
	border-left: 2px solid var(--zh-rule);
}

.zh-toc-title {
	margin-bottom: 12px;
	color: var(--zh-ink);
	font-size: 14px;
	font-weight: 600;
}

.zh-toc a {
	display: block;
	padding: 6px 0;
	color: var(--zh-muted);
	font-size: 14px;
}

.zh-toc a:hover {
	color: var(--zh-accent);
}

.zh-docs {
	max-width: 820px;
}

.zh-docs h2 {
	margin: 0 0 14px;
	color: var(--zh-ink);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: 0;
}

.zh-docs h3 {
	margin: 34px 0 12px;
	color: var(--zh-ink-soft);
	font-size: 21px;
	font-weight: 600;
}

.zh-docs p,
.zh-docs li {
	color: #344551;
	font-size: 16px;
	line-height: 1.72;
}

.zh-docs ul {
	padding-left: 22px;
	margin-bottom: 20px;
}

.zh-table-scroll {
	width: 100%;
	margin: 24px 0;
	overflow-x: auto;
}

.zh-table-scroll .zh-compare {
	min-width: 720px;
	margin: 0;
}

.zh-code-block {
	margin: 16px 0 24px;
	padding: 14px 16px;
	overflow-x: auto;
	border: 1px solid #24313c;
	border-radius: 4px;
	background: #101b23;
	color: #eef6fa;
	font-size: 13px;
	line-height: 1.6;
}

.zh-code-block code {
	padding: 0;
	background: transparent;
	color: inherit;
}

/* Step B: notes use the dashed-orange "clearance box" style from the 2D view */
.zh-note {
	margin: 24px 0;
	padding: 16px 18px;
	border: 2px dashed var(--zh-machine);
	border-radius: 4px;
	background: #FDF3E3;
	color: #5B4A2A;
	line-height: 1.65;
}

/* UI polish 2026-07-16: light frame so the video content itself is the dark element */
.zh-video-block {
	margin: 28px 0 34px;
	padding: 12px;
	border: 1px solid var(--zh-rule);
	border-radius: 4px;
	background: #fff;
}

.zh-video-block video {
	display: block;
	width: 100%;
	max-height: 620px;
	border-radius: 4px;
	background: #000;
}

.zh-video-caption {
	padding: 10px 4px 0;
	color: var(--zh-muted);
	font-size: 13px;
}

.zh-screenshot-block {
	margin: 28px 0 34px;
	padding: 12px;
	border: 1px solid var(--zh-rule);
	border-radius: 4px;
	background: #fff;
}

.zh-screenshot-block img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #c9d5de;
	border-radius: 4px;
	background: #fff;
}

.zh-screenshot-block .zh-video-caption {
	color: var(--zh-muted);
}

.zh-use-cases,
.zh-edition-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin: 22px 0 28px;
}

/* Step B: filled panels with visible outlines - the RotoSpider 2D grammar
   (guideline section 4). Edition cards also get a thick top band. */
.zh-use-case,
.zh-edition-card {
	padding: 18px;
	border: 2px solid var(--zh-steel);
	border-radius: 4px;
	background: var(--zh-panel-tint);
}

.zh-use-case h4,
.zh-edition-card h3 {
	margin: 0 0 8px;
	color: var(--zh-ink);
	font-size: 17px;
	font-weight: 600;
}

.zh-use-case p,
.zh-edition-card p {
	margin: 0;
	color: var(--zh-muted);
	font-size: 14px;
	line-height: 1.6;
}

.zh-editions-inner {
	padding: 46px 0 48px;
}

.zh-edition-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-top-width: 6px;
}

.zh-edition-tag {
	color: var(--zh-ink-blue);
	font-weight: 700;
	font-family: "Saira", "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif;
	letter-spacing: .04em;
}

/* Rotomolding cards use the machinery-orange family */
.zh-edition-card.zh-card-roto {
	border-color: var(--zh-machine);
	background: #FDF3E3;
}

.zh-edition-card.zh-card-roto .zh-edition-tag {
	color: var(--zh-machine-deep);
}

.zh-footer {
	background: var(--zh-ink);
	color: #c6d4df;
}

.zh-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 28px 0;
}

.zh-footer a {
	color: #9ed7e5;
}

.zh-footer p {
	margin: 0;
	color: #a9b8c3;
}

@media (max-width: 900px) {
	.zh-hero-inner,
	.zh-docs-layout {
		grid-template-columns: 1fr;
	}

	.zh-stat-list,
	.zh-toc {
		position: static;
	}

	.zh-stat-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding-left: 0;
		padding-top: 18px;
		border-left: 0;
		border-top: 3px solid var(--zh-machine);
	}

	.zh-toc {
		display: none;
	}

	.zh-use-cases,
	.zh-edition-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 680px) {
	.zh-modern .container {
		width: auto;
		max-width: none;
		margin-left: 12px;
		margin-right: 12px;
		padding-left: 0;
		padding-right: 0;
	}

	.zh-product-nav-inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
		padding: 10px 0;
		width: auto;
		max-width: none;
	}

	.zh-product-links {
		margin-left: 0;
		width: 100%;
		max-width: none;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
	}

	.zh-product-links a {
		justify-content: center;
		min-width: 0;
		min-height: 34px;
		padding: 7px 4px;
		font-size: 13px;
		overflow-wrap: anywhere;
	}

	.zh-hero {
		padding: 46px 0 42px;
	}

	.zh-hero h1 {
		font-size: 36px;
	}

	.zh-hero-lead {
		font-size: 16px;
		overflow-wrap: anywhere;
	}

	.zh-stat-list {
		grid-template-columns: 1fr;
	}

	.zh-download-inner,
	.zh-footer-inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.zh-download-actions {
		justify-content: flex-start;
		width: 100%;
	}

	.zh-download-actions .zh-btn {
		flex: 1 1 150px;
	}

	.zh-webapp-panel {
		padding: 10px;
	}

	.zh-webapp-frame {
		aspect-ratio: 4 / 3;
	}
}

/* Front-page grouped nav: second-level links shown inline under a group label.
   UI polish 2026-07-16: no pill box; the muted label alone marks the group. */
.zh-nav-group {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
}

.zh-nav-label {
	color: var(--zh-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 0 4px 0 2px;
	white-space: nowrap;
}

.zh-nav-sep {
	color: #9aa7b0;
	padding: 0 4px;
	font-weight: 400;
	user-select: none;
}

@media (max-width: 680px) {
	.zh-nav-group {
		grid-column: 1 / -1;
		flex-wrap: wrap;
		justify-content: center;
		margin-left: 0;
		padding: 6px;
		border-radius: 12px;
	}

	.zh-nav-label {
		width: 100%;
		text-align: center;
		padding-top: 6px;
	}

	.zh-nav-group a {
		flex: 1 1 84px;
	}

	.zh-nav-sep {
		display: none;
	}
}

/* Loading-editions comparison table (homepage, GEO-friendly) */
.zh-compare {
	width: 100%;
	border-collapse: collapse;
	margin: 26px 0 4px;
	font-size: 14px;
	background: #fff;
}

.zh-compare caption {
	text-align: left;
	color: var(--zh-muted);
	font-size: 13px;
	padding-bottom: 10px;
}

.zh-compare th,
.zh-compare td {
	text-align: left;
	vertical-align: top;
	padding: 10px 12px;
	border-bottom: 1px solid var(--zh-rule);
}

.zh-compare thead th {
	color: var(--zh-ink);
	font-weight: 700;
	border-bottom: 3px solid var(--zh-ink-blue);
	white-space: nowrap;
	font-family: "Saira", "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif;
}

.zh-compare tbody th {
	color: var(--zh-ink-blue);
	font-weight: 700;
	white-space: nowrap;
}

.zh-compare tbody tr:hover th,
.zh-compare tbody tr:hover td {
	background: var(--zh-panel-tint);
}

/* UI review 2026-06-20: balance the 4-card "how to choose" block on wide screens */
@media (min-width: 901px) {
	.zh-use-cases-2x2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* UI review 2026-06-20: don't pin the tall stacked nav on small screens */
@media (max-width: 680px) {
	.zh-product-nav {
		position: static;
	}
}

/* UI review 2026-06-20: mobile hamburger nav (button injected by js; .zh-nav-js gates it for graceful no-js fallback) */
.zh-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--zh-rule);
	border-radius: 4px;
	background: #fff;
	color: var(--zh-ink);
	cursor: pointer;
}

.zh-nav-toggle svg {
	display: block;
}

@media (max-width: 680px) {
	.zh-nav-js .zh-product-nav {
		position: sticky;
		top: 0;
	}

	.zh-nav-js .zh-product-nav-inner {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
	}

	.zh-nav-js .zh-nav-toggle {
		display: inline-flex;
		margin-left: auto;
	}

	.zh-nav-js .zh-product-links {
		display: none;
		flex-basis: 100%;
		width: 100%;
		margin-top: 4px;
	}

	.zh-nav-js.zh-nav-open .zh-product-links {
		display: grid;
	}
}

/* UI review 2026-06-20: FAQ accordion (native <details>) for modernized legacy pages */
.zh-faq details {
	margin: 0 0 12px;
	border: 1px solid var(--zh-rule);
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
}

.zh-faq summary {
	padding: 14px 16px;
	cursor: pointer;
	color: var(--zh-ink);
	font-size: 16px;
	font-weight: 700;
	list-style: none;
}

.zh-faq summary::-webkit-details-marker {
	display: none;
}

.zh-faq summary::after {
	content: "+";
	float: right;
	margin-left: 12px;
	color: var(--zh-muted);
	font-weight: 700;
	display: inline-block;
	transition: transform .15s ease;
}

.zh-faq details[open] summary {
	border-bottom: 1px solid var(--zh-rule);
}

.zh-faq details[open] summary::after {
	transform: rotate(45deg);
}

.zh-faq .zh-faq-a {
	padding: 14px 16px;
	color: #344551;
	font-size: 16px;
	line-height: 1.72;
}

/* UI polish 2026-07-16: quiet text-link row for secondary actions */
.zh-link-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

/* UI polish 2026-07-16: collapsed setup/example details, quiet until opened */
.zh-details {
	margin: 14px 0 0;
	border: 1px solid var(--zh-rule);
	border-radius: 4px;
	background: #fff;
}

.zh-details summary {
	padding: 10px 14px;
	cursor: pointer;
	color: var(--zh-steel-dark);
	font-size: 14px;
	font-weight: 600;
	list-style: none;
}

.zh-details summary::-webkit-details-marker {
	display: none;
}

.zh-details summary::after {
	content: "+";
	float: right;
	margin-left: 12px;
	color: var(--zh-muted);
	font-weight: 700;
}

.zh-details[open] summary::after {
	content: "\2013";
}

.zh-details .zh-details-body {
	padding: 2px 14px 12px;
	border-top: 1px solid var(--zh-rule);
}

.zh-details .zh-details-body ol,
.zh-details .zh-details-body ul {
	margin: 10px 0;
	padding-left: 22px;
}

.zh-details .zh-details-body li {
	margin: 6px 0;
	color: #344551;
	font-size: 14px;
	line-height: 1.65;
}

/* Homepage live showcase (2026-07-24): the front page embeds the T1 and RotoSpider
   web apps in a framed panel; visitors use the apps directly. The only control is
   the tab pair under the panel; nav + panel + value paragraph fit one 1920x1080
   screen without scrolling. Panel = 2px steel border; active tab carries the
   orange marker line; no yellow in the hero (the app itself is the action).
   The band is a light steel mat, slightly darker than the app's own background,
   so the panel reads as the lit content on a structural surround; other pages
   keep the dark hero for their bold white titles. */

.zh-hero-showcase {
	padding: 20px 0;
	background: var(--zh-rule);
}

.zh-showcase-wide {
	max-width: 1520px;
	margin: 0 auto;
	padding: 0 24px;
}

.zh-showcase-tabs {
	display: flex;
	width: fit-content;
	margin: 12px auto 0;
	border: 2px solid var(--zh-steel);
	border-radius: 4px;
	overflow: hidden;
}

.zh-showcase-tab {
	appearance: none;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--zh-steel-dark);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 10px 16px;
	cursor: pointer;
}

.zh-showcase-tab + .zh-showcase-tab {
	border-left: 2px solid var(--zh-steel);
}

.zh-showcase-tab:hover {
	color: var(--zh-ink);
}

.zh-showcase-tab.active {
	background: #fff;
	color: var(--zh-ink);
	box-shadow: inset 0 -3px 0 var(--zh-machine);
}

.zh-showcase-panel {
	max-width: 1180px;
	margin: 0 auto;
	border: 2px solid var(--zh-steel);
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
}

.zh-showcase-panel iframe {
	display: block;
	width: 100%;
	height: calc(80vh - 245px);
	min-height: 360px;
	max-height: 660px;
	border: 0;
}

.zh-value-band {
	background: #fff;
	border-bottom: 1px solid var(--zh-rule);
}

.zh-value-band .zh-value-lead {
	max-width: 1180px;
	margin: 0;
	padding: 18px 0 20px 18px;
	border-left: 4px solid var(--zh-ink-blue);
	color: var(--zh-muted);
	font-size: 16px;
	line-height: 1.6;
}

.zh-value-band .zh-value-lead strong {
	color: var(--zh-ink);
}

@media (max-width: 900px) {
	.zh-showcase-panel iframe {
		height: calc(80vh - 304px);
		min-height: 320px;
	}
}

/* SmartPacker video pages 2026-08-27: /docs/ on both sites, written by
   PublicSites/dev/build_zhihuo_docs_pages.py. Feature tours sit two across as
   filled panels (zh-use-case); the introduction above them uses zh-video-block. */
.zh-tour-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 22px 0 28px;
}

.zh-tour video {
	display: block;
	width: 100%;
	margin: 10px 0 12px;
	border-radius: 4px;
	background: #000;
}

/* The generated players carry width/height attributes so the 16:9 box is
   reserved before the poster loads; height must stay auto for the ratio to apply. */
.zh-tour video,
.zh-video-block video[height] {
	height: auto;
}

@media (max-width: 767px) {
	.zh-tour-grid {
		grid-template-columns: 1fr;
	}
}