/* ============================================================================
   guide.css — single "platform-guides" (system guide) page.
   A clean, server-rendered video page matching the site tokens:
   two columns — main (back · eyebrow · title · 16:9 Vimeo · description) and a
   sticky sidebar (info card · help CTA · more guides). Static copy for now.
   ========================================================================== */

.guide-single {
	max-width: 1180px;
	margin: 0 auto;
	padding: 34px 32px 80px;
}

.guide-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ink-3);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 22px;
	transition: color .15s ease;
}
.guide-back svg { width: 18px; height: 18px; }
.guide-back:hover { color: var(--ink); }

.guide-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
	align-items: start;
}

/* ---- main column ---- */
.guide-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--accent);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .02em;
	margin-bottom: 10px;
}
.guide-eyebrow svg { width: 18px; height: 18px; }

.guide-title {
	font-family: var(--font-display, inherit);
	font-size: 34px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0 0 22px;
}

/* Responsive 16:9 Vimeo frame */
.guide-video {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card-lg);
	background: #000;
}
.guide-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.guide-video-missing {
	width: 100%;
	padding: 48px 24px;
	text-align: center;
	border-radius: var(--radius-lg);
	border: 1px dashed var(--line-2);
	background: var(--bg-sunk);
	color: var(--ink-3);
	font-weight: 600;
}

.guide-desc {
	margin-top: 26px;
}
.guide-desc h2 {
	font-size: 19px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 10px;
}
.guide-desc p { color: var(--ink-2); font-size: 16px; line-height: 1.85; margin: 0 0 12px; }
.guide-desc a { color: var(--accent); }

/* ---- sidebar ---- */
.guide-side { position: sticky; top: 96px; display: grid; gap: 16px; }

.guide-card {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg-elev);
	padding: 20px;
	box-shadow: var(--shadow-card);
}
.guide-card h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.guide-card h3 svg { width: 18px; height: 18px; color: var(--accent); }

.guide-facts { display: grid; gap: 12px; }
.guide-fact { display: flex; align-items: center; gap: 11px; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.guide-fact .ic {
	display: grid; place-items: center;
	width: 32px; height: 32px; flex: none;
	border-radius: 9px;
	background: var(--accent-soft); color: var(--accent);
}
.guide-fact .ic svg { width: 16px; height: 16px; }

/* help CTA card */
.guide-help {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: linear-gradient(155deg, var(--accent-soft), var(--bg-elev) 75%);
	padding: 20px;
}
.guide-help h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.guide-help p { color: var(--ink-3); font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; }
.guide-help .btn {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--accent); color: var(--accent-ink, #fff);
	font-weight: 700; font-size: 14px; text-decoration: none;
	padding: 9px 16px; border-radius: 999px;
	transition: filter .15s ease;
}
.guide-help .btn:hover { filter: brightness(1.06); }
.guide-help .btn svg { width: 16px; height: 16px; }

/* more guides */
.guide-more h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.guide-more-list { display: grid; gap: 8px; }
.guide-more-item {
	display: flex; align-items: center; gap: 11px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--ink);
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}
.guide-more-item:hover { border-color: var(--accent); transform: translateX(-3px); }
.guide-more-item .ic {
	display: grid; place-items: center;
	width: 30px; height: 30px; flex: none;
	border-radius: 8px;
	background: var(--accent-soft); color: var(--accent);
}
.guide-more-item .ic svg { width: 14px; height: 14px; }
.guide-more-item .t { font-weight: 600; font-size: 14px; line-height: 1.35; }

@media (max-width: 900px) {
	.guide-grid { grid-template-columns: 1fr; gap: 28px; }
	.guide-side { position: static; }
}
@media (max-width: 640px) {
	/* Widen the central column on mobile — beat the global
	   `#site-main .page { padding-inline: clamp(20px,7vw,100px) }` (ID specificity). */
	#site-main .page.guide-single { padding-inline: 14px; }
	.guide-single { padding-top: 18px; padding-bottom: 56px; }
	.guide-title { font-size: 26px; }
}