/* ==========================================================================
   Codespot-parity design system (V4/V5).
   .mtl-codespot-home is now applied to <body> site-wide (V5) - this file
   covers the homepage's bespoke sections plus generic dark-mode styling for
   every other template (inner pages, WooCommerce, blog). Component classes
   below fall into two groups:
     - .mtl-ch-* : new dark-native components (hero, cards, license grid...)
     - .mtl-* (no "ch-"): older content classes from custom.css (mtl-steps,
       mtl-faq, mtl-compare-table, mtl-contact-form...) that already exist
       inside real page content - dark palettes for those are added near the
       bottom of this file instead of renaming markup across every page.
   ========================================================================== */

.mtl-codespot-home {
	--ch-bg: #021a12;
	--ch-panel: #08271c;
	--ch-panel-2: #0c3222;
	--ch-border: #16412f;
	--ch-green: #00c16a;
	--ch-green-hover: #00d977;
	--ch-blue: #0ea5e9;
	--ch-text: #f7f7f2;
	--ch-muted: #a8c0b3;
	--ch-radius: 24px;
	background: var(--ch-bg);
}

.mtl-codespot-home #content,
.mtl-codespot-home main,
.mtl-codespot-home article,
.mtl-codespot-home .entry-content {
	background: var(--ch-bg);
	color: var(--ch-text);
}

/* Full-bleed sections (hero) size themselves; everything else gets the
   standard content max-width so it doesn't stretch edge to edge. */
.mtl-codespot-home .entry-content > *:not(.mtl-ch-hero) {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

.mtl-codespot-home .entry-content h2 {
	color: var(--ch-text);
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.mtl-codespot-home .entry-content p {
	color: var(--ch-muted);
}

.mtl-codespot-home .entry-content a {
	color: var(--ch-green);
}

/* ── Header: transparent over hero, solid on scroll ─────────────────── */
.mtl-codespot-home #header {
	position: sticky !important;
	top: 0;
	z-index: 999;
	background: transparent !important;
	border-bottom: 1px solid transparent;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Blocksy's own dynamic CSS sets an opaque white background specifically
   on the inner [data-row*="middle"] wrapper (--theme-palette-color-8),
   not on #header itself - that's the element that actually needs overriding. */
.mtl-codespot-home #header [data-row] {
	background-color: transparent !important;
}

.mtl-codespot-home #header.mtl-ch-scrolled [data-row] {
	background-color: transparent !important;
}

.mtl-codespot-home #header .site-branding,
.mtl-codespot-home #header a,
.mtl-codespot-home #header .item-inner-desktop {
	color: var(--ch-text) !important;
}

/* Site tagline under the logo (Blocksy's default #3a4f66 fails contrast
   against the dark header background - 2.14:1, needs 4.5:1). */
.mtl-codespot-home #header .site-description {
	color: var(--ch-muted) !important;
}

/* Mobile off-canvas menu panel (.ct-drawer-canvas) renders outside #header
   in the DOM, so the #header a text-color override above doesn't reach it.
   The "current page" indicator in particular used the theme's blue accent
   at 2.15:1 against the dark panel background - well under the 4.5:1 min. */
.mtl-codespot-home .ct-drawer-canvas a {
	color: var(--ch-text) !important;
}

.mtl-codespot-home .ct-drawer-canvas .current-menu-item > a,
.mtl-codespot-home .ct-drawer-canvas .current-menu-ancestor > a {
	color: var(--ch-green-hover) !important;
}

.mtl-codespot-home #header.mtl-ch-scrolled {
	background: rgba(2, 26, 18, 0.92);
	backdrop-filter: blur(10px);
	border-bottom-color: var(--ch-border);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.mtl-ch-hero {
	position: relative;
	padding: 120px 24px 100px;
	margin-top: -1px;
	background:
		radial-gradient(ellipse 900px 500px at 85% 10%, rgba(0, 193, 106, 0.16) 0%, transparent 60%),
		radial-gradient(ellipse 700px 600px at 0% 100%, rgba(14, 165, 233, 0.10) 0%, transparent 60%),
		linear-gradient(180deg, #020f0a 0%, var(--ch-bg) 100%);
}

.mtl-ch-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		linear-gradient(rgba(0, 193, 106, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 193, 106, 0.07) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(ellipse 900px 700px at 20% 20%, black 0%, transparent 70%);
	mask-image: radial-gradient(ellipse 900px 700px at 20% 20%, black 0%, transparent 70%);
}

/* Homepage hero background image (assets/img/hero-bg.jpg, 2560x1207, ~56 KB).
   Scoped to the front page's full hero only - inner-page heroes
   (.mtl-ch-hero-sm) keep their own background. The image sits on the
   section itself, behind .mtl-ch-hero-inner (z-index 1) and the globe canvas,
   so no extra element or stacking context is introduced. */
body.home .mtl-ch-hero:not(.mtl-ch-hero-sm) {
	background-color: #000;
	background-image: url('../img/hero-bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

/* The old decorative grid sat on top of the previous gradient background;
   drop it here so the new image shows exactly as supplied. */
body.home .mtl-ch-hero:not(.mtl-ch-hero-sm)::before {
	content: none;
}

.mtl-ch-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
	align-items: start;
	padding-top: 12px;
}

.mtl-ch-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(0, 193, 106, 0.1);
	border: 1px solid rgba(0, 193, 106, 0.3);
	color: var(--ch-green-hover);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 7px 16px;
	border-radius: 100px;
	margin-bottom: 26px;
}

.mtl-ch-hero h1 {
	font-size: clamp(38px, 5.4vw, 64px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--ch-text);
	margin: 0 0 24px;
	max-width: 620px;
}

.mtl-ch-hero p.mtl-ch-lead {
	font-size: 18px;
	line-height: 1.7;
	color: var(--ch-muted);
	max-width: 520px;
	margin: 0 0 36px;
}

.mtl-ch-hero-buttons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.mtl-ch-hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mtl-ch-hero-trust li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ch-muted);
}

.mtl-ch-hero-trust li::before {
	content: '\2713';
	color: var(--ch-green-hover);
	font-weight: 800;
}

.mtl-ch-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 28px;
	border-radius: 14px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border: 2px solid transparent;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* !important: a generic ".entry-content a { color: green }" rule (3
   classes) otherwise outranks these single-class button rules and makes
   button text the same color as its own background. */
.mtl-ch-btn-primary {
	background: var(--ch-green);
	color: #021a12 !important;
	box-shadow: 0 10px 30px rgba(0, 193, 106, 0.3);
}

.mtl-ch-btn-primary:hover {
	background: var(--ch-green-hover);
	transform: translateY(-2px);
	box-shadow: 0 14px 36px rgba(0, 217, 119, 0.4);
	color: #021a12 !important;
}

.mtl-ch-btn-outline {
	background: transparent;
	border-color: var(--ch-border);
	color: var(--ch-text) !important;
}

.mtl-ch-btn-outline:hover {
	border-color: var(--ch-green);
	color: var(--ch-green-hover) !important;
	transform: translateY(-2px);
}

/* Hero right: illustration + floating KPI cards */
.mtl-ch-hero-art {
	position: relative;
}

/* Animated network globe (assets/js/hero-globe.js), front page only.
   Sized/positioned like the illustration it replaces - same column,
   same responsive stacking behaviour below 900px. */
.mtl-ch-hero-globe-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
	max-width: 640px;
	margin: 0 auto;
}

.mtl-ch-hero-globe {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 900px) {
	.mtl-ch-hero-globe-wrap {
		max-width: 420px;
	}
}

@media (max-width: 600px) {
	.mtl-ch-hero-globe-wrap {
		max-width: 320px;
	}
}

.mtl-ch-hero-art svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
}

.mtl-ch-kpi {
	position: absolute;
	z-index: 3;
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: 16px;
	padding: 14px 18px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
	animation: mtl-ch-float 5s ease-in-out infinite;
}

.mtl-ch-kpi .mtl-ch-kpi-value {
	font-size: 20px;
	font-weight: 800;
	color: var(--ch-green-hover);
	line-height: 1.1;
}

.mtl-ch-kpi .mtl-ch-kpi-label {
	font-size: 11.5px;
	color: var(--ch-muted);
	margin-top: 2px;
}

.mtl-ch-kpi-1 {
	top: -7%;
	left: -3%;
	animation-delay: 0s;
}

.mtl-ch-kpi-2 {
	bottom: -6%;
	left: 6%;
	animation-delay: 1.2s;
}

.mtl-ch-kpi-3 {
	top: 36%;
	right: -6%;
	animation-delay: 2.4s;
}

@keyframes mtl-ch-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@media (max-width: 900px) {
	.mtl-ch-hero-inner { grid-template-columns: 1fr; }
	.mtl-ch-hero h1, .mtl-ch-hero p.mtl-ch-lead { max-width: 100%; }
	.mtl-ch-kpi { position: static; margin: 10px 0; animation: none; display: inline-block; }
	.mtl-ch-hero-art { margin-top: 32px; }
}

/* ── Section shell ────────────────────────────────────────────────── */
.mtl-ch-section {
	padding: 88px 24px;
}

.mtl-ch-section-head {
	text-align: left;
	max-width: 640px;
	margin: 0 0 48px;
}

.mtl-ch-section-head h2 {
	margin: 0 0 14px;
}

.mtl-ch-section-head p {
	font-size: 16px;
	line-height: 1.7;
}

/* ── Why Choose Us cards ──────────────────────────────────────────── */
.mtl-ch-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.mtl-ch-card {
	position: relative;
	background: linear-gradient(180deg, var(--ch-panel) 0%, #061c14 100%);
	border: 1px solid var(--ch-border);
	border-radius: var(--ch-radius);
	padding: 32px 28px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	overflow: hidden;
}

.mtl-ch-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 24px;
	right: 24px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ch-green), transparent);
	opacity: 0.6;
}

.mtl-ch-card:hover {
	transform: translateY(-6px);
	border-color: rgba(0, 193, 106, 0.5);
	box-shadow: 0 24px 48px rgba(0, 193, 106, 0.12);
}

.mtl-ch-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #00e582, var(--ch-green) 70%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	box-shadow: 0 0 0 6px rgba(0, 193, 106, 0.12), 0 8px 24px rgba(0, 193, 106, 0.35);
}

.mtl-ch-icon svg {
	width: 24px;
	height: 24px;
	stroke: #021a12;
}

.mtl-ch-card h3 {
	color: var(--ch-text);
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 10px;
}

.mtl-ch-card p {
	color: var(--ch-muted);
	font-size: 14.5px;
	line-height: 1.65;
	margin: 0;
}

/* ── License cards ────────────────────────────────────────────────── */
.mtl-ch-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: stretch;
}

.mtl-ch-license {
	display: flex;
	flex-direction: column;
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: var(--ch-radius);
	padding: 28px 24px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mtl-ch-license:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
}

.mtl-ch-license.is-featured {
	background: linear-gradient(180deg, #0c3222 0%, var(--ch-panel) 100%);
	border-color: var(--ch-green);
	box-shadow: 0 0 0 1px rgba(0, 193, 106, 0.3), 0 24px 50px rgba(0, 193, 106, 0.18);
	position: relative;
}

.mtl-ch-badge {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #021a12;
	background: var(--ch-green);
	padding: 5px 12px;
	border-radius: 100px;
	margin-bottom: 14px;
	width: fit-content;
}

.mtl-ch-license .mtl-ch-tier {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ch-muted);
	margin-bottom: 6px;
}

.mtl-ch-license h3 {
	color: var(--ch-text);
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 4px;
}

.mtl-ch-license .mtl-ch-best-for {
	font-size: 13px;
	color: var(--ch-muted);
	margin-bottom: 18px;
}

.mtl-ch-price {
	font-size: 30px;
	font-weight: 800;
	color: var(--ch-text);
	margin-bottom: 2px;
}

.mtl-ch-price small {
	font-size: 13px;
	font-weight: 500;
	color: var(--ch-muted);
}

.mtl-ch-license ul {
	list-style: none;
	padding: 0;
	margin: 18px 0 24px;
	flex-grow: 1;
}

.mtl-ch-license ul li {
	position: relative;
	padding-left: 22px;
	font-size: 13.5px;
	color: var(--ch-muted);
	margin-bottom: 9px;
	line-height: 1.5;
}

.mtl-ch-license ul li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	color: var(--ch-green-hover);
	font-weight: 700;
}

.mtl-ch-license .mtl-ch-btn {
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

/* ── Comparison split ─────────────────────────────────────────────── */
.mtl-ch-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.mtl-ch-compare-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: 18px;
	overflow: hidden;
}

.mtl-ch-compare-table th,
.mtl-ch-compare-table td {
	padding: 14px 16px;
	text-align: left;
	font-size: 13.5px;
	border-bottom: 1px solid var(--ch-border);
	color: var(--ch-muted);
}

.mtl-ch-compare-table th {
	color: var(--ch-text);
	font-weight: 700;
	background: rgba(0, 193, 106, 0.08);
}

.mtl-ch-compare-table tr:last-child td {
	border-bottom: none;
}

@media (max-width: 900px) {
	.mtl-ch-split { grid-template-columns: 1fr; }
}

/* ── Activation timeline ──────────────────────────────────────────── */
.mtl-ch-timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	position: relative;
}

.mtl-ch-timeline::before {
	content: '';
	position: absolute;
	top: 24px;
	left: 8%;
	right: 8%;
	height: 2px;
	background: linear-gradient(90deg, var(--ch-green), var(--ch-border));
}

.mtl-ch-timeline-step {
	position: relative;
	text-align: left;
}

.mtl-ch-timeline-num {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--ch-panel);
	border: 2px solid var(--ch-green);
	color: var(--ch-green-hover);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 17px;
	margin-bottom: 18px;
	position: relative;
	z-index: 1;
}

.mtl-ch-timeline-step h3 {
	color: var(--ch-text);
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 8px;
}

.mtl-ch-timeline-step p {
	font-size: 13.5px;
	color: var(--ch-muted);
	margin: 0;
}

@media (max-width: 900px) {
	.mtl-ch-timeline { grid-template-columns: 1fr; gap: 32px; }
	.mtl-ch-timeline::before { display: none; }
}

/* ── Knowledge Hub magazine cards ─────────────────────────────────── */
.mtl-ch-mag-card {
	display: block;
	text-decoration: none;
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: var(--ch-radius);
	overflow: hidden;
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.mtl-ch-mag-card:hover {
	transform: translateY(-6px);
	border-color: var(--ch-green);
}

.mtl-ch-mag-thumb {
	height: 160px;
	background: linear-gradient(135deg, #0c3222, #021a12 70%);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mtl-ch-mag-thumb svg {
	width: 46px;
	height: 46px;
	stroke: var(--ch-green-hover);
	opacity: 0.9;
}

.mtl-ch-mag-body {
	padding: 22px;
}

.mtl-ch-mag-cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ch-green-hover);
	margin-bottom: 10px;
}

.mtl-ch-mag-body h3 {
	color: var(--ch-text);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 14px;
}

.mtl-ch-mag-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12.5px;
	color: var(--ch-muted);
}

.mtl-ch-mag-foot .mtl-ch-arrow {
	color: var(--ch-green-hover);
	font-weight: 700;
	transition: transform 0.2s ease;
}

.mtl-ch-mag-card:hover .mtl-ch-arrow {
	transform: translateX(4px);
}

/* ── FAQ (dark) ───────────────────────────────────────────────────── */
.mtl-ch-faq details {
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: 14px;
	padding: 4px 22px;
	margin-bottom: 14px;
}

.mtl-ch-faq details[open] {
	border-color: var(--ch-green);
}

.mtl-ch-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 28px 18px 0;
	font-weight: 700;
	color: var(--ch-text);
	position: relative;
}

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

.mtl-ch-faq summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 16px;
	font-size: 22px;
	color: var(--ch-green-hover);
}

.mtl-ch-faq details[open] summary::after {
	content: '\2212';
}

.mtl-ch-faq .mtl-ch-faq-a {
	padding-bottom: 20px;
	color: var(--ch-muted);
	font-size: 14.5px;
	line-height: 1.7;
}

/* ── Grid responsive collapse ─────────────────────────────────────── */
@media (max-width: 1000px) {
	.mtl-ch-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	.mtl-ch-grid-3, .mtl-ch-grid-4 { grid-template-columns: 1fr; }
	.mtl-ch-section { padding: 56px 20px; }
	.mtl-ch-hero { padding: 100px 20px 64px; }
}

/* ── Simple fade-in on scroll (native IO, no libraries) ───────────── */
.mtl-ch-fade {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.mtl-ch-fade.mtl-ch-in {
	opacity: 1;
	transform: translateY(0);
}

/* ── Footer (dark, 4-column, site-wide) ──────────────────────────── */
.mtl-ch-footer {
	background: #010f0a;
	border-top: 1px solid #0c2b1e;
	padding: 64px 24px 0;
	color: var(--ch-muted);
}

.mtl-ch-footer-inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 48px;
	border-bottom: 1px solid #0c2b1e;
}

.mtl-ch-footer-brand {
	font-size: 18px;
	font-weight: 800;
	color: #f7f7f2;
	margin-bottom: 12px;
}

.mtl-ch-footer p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ch-muted);
}

.mtl-ch-footer .mtl-ch-footer-title {
	color: #f7f7f2;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 18px;
}

.mtl-ch-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mtl-ch-footer ul li {
	margin-bottom: 11px;
}

.mtl-ch-footer a {
	color: var(--ch-muted);
	text-decoration: none;
	font-size: 13.5px;
}

.mtl-ch-footer a:hover {
	color: var(--ch-green-hover);
}

.mtl-ch-footer-bottom {
	max-width: 1240px;
	margin: 0 auto;
	padding: 22px 0;
	font-size: 12.5px;
	color: #7d9187;
	text-align: center;
}

@media (max-width: 900px) {
	.mtl-ch-footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.mtl-ch-footer-inner { grid-template-columns: 1fr; }
}

/* Hide the theme's native footer output site-wide - replaced by
   .mtl-ch-footer above (rendered before it via blocksy:footer:before).
   The light legal-links strip (functions.php, blocksy:footer:after) is
   folded into the new footer's Legal column instead, so hide the old one
   here too - it would otherwise show as a mismatched light bar underneath. */
.mtl-codespot-home .ct-footer,
.mtl-codespot-home .mtl-legal-links {
	display: none;
}

/* ==========================================================================
   V5: site-wide inner-page dark theme.
   ========================================================================== */

/* Blocksy's native page-title area (h1.page-title inside
   header.entry-header inside .hero-section.is-width-constrained) duplicates
   the H1 that every rewritten page now supplies itself inside
   .mtl-ch-page-hero - hide the native one everywhere. Nothing else lives in
   that wrapper, so hiding it has no functional effect on any template. */
.mtl-codespot-home .hero-section.is-width-constrained {
	display: none;
}

/* Rank Math's breadcrumb nav (inc/seo-helpers.php) stays - it's real SEO
   breadcrumb markup, just restyled for the dark background. It renders
   above the article, so it sits as a slim bar above the page hero. */
.mtl-codespot-home .mtl-breadcrumbs {
	background: var(--ch-bg);
	color: var(--ch-muted);
	font-size: 12.5px;
	margin: 0;
	padding: 14px 24px;
	border-bottom: 1px solid var(--ch-border);
}

.mtl-codespot-home .mtl-breadcrumbs a {
	color: var(--ch-muted);
	text-decoration: none;
}

.mtl-codespot-home .mtl-breadcrumbs a:hover {
	color: var(--ch-green-hover);
}

/* ── Small inner-page hero (eyebrow + H1 + lead, no illustration) ───── */
.mtl-ch-hero.mtl-ch-hero-sm {
	padding: 64px 24px 72px;
	text-align: left;
}

.mtl-ch-hero-sm .mtl-ch-hero-sm-inner {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: 0 auto;
}

.mtl-ch-hero-sm h1 {
	font-size: clamp(32px, 4.4vw, 48px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ch-text);
	margin: 0 0 18px;
	max-width: 100%;
}

.mtl-ch-hero-sm p.mtl-ch-lead {
	font-size: 17px;
	line-height: 1.7;
	color: var(--ch-muted);
	max-width: 100%;
	margin: 0;
}

@media (max-width: 720px) {
	.mtl-ch-hero.mtl-ch-hero-sm { padding: 48px 20px 48px; }
}

/* ── Generic dark typography for plain content (all remaining pages) ─── */
.mtl-codespot-home .entry-content h1,
.mtl-codespot-home .entry-content h3,
.mtl-codespot-home .entry-content h4 {
	color: var(--ch-text);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.mtl-codespot-home .entry-content h3 { font-size: 22px; margin: 28px 0 12px; }
.mtl-codespot-home .entry-content h4 { font-size: 17px; margin: 20px 0 10px; }

.mtl-codespot-home .entry-content ul,
.mtl-codespot-home .entry-content ol {
	color: var(--ch-muted);
	line-height: 1.7;
}

.mtl-codespot-home .entry-content li {
	margin-bottom: 6px;
}

.mtl-codespot-home .entry-content strong,
.mtl-codespot-home .entry-content b {
	color: var(--ch-text);
}

.mtl-codespot-home .entry-content code {
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	color: var(--ch-green-hover);
	padding: 2px 6px;
	border-radius: 5px;
	font-size: 0.9em;
}

.mtl-codespot-home .entry-content pre {
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: 10px;
	padding: 16px 18px;
	overflow-x: auto;
}

.mtl-codespot-home .entry-content pre code {
	background: none;
	border: none;
	padding: 0;
}

.mtl-codespot-home .entry-content blockquote {
	border-left: 3px solid var(--ch-green);
	margin: 20px 0;
	padding: 4px 20px;
	color: var(--ch-muted);
	font-style: italic;
}

.mtl-codespot-home .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.mtl-codespot-home .entry-content hr {
	border: none;
	border-top: 1px solid var(--ch-border);
	margin: 32px 0;
}

.mtl-codespot-home .entry-content table:not(.mtl-compare-table):not(.mtl-ch-compare-table) {
	width: 100%;
	border-collapse: collapse;
	color: var(--ch-muted);
}

.mtl-codespot-home .entry-content table:not(.mtl-compare-table):not(.mtl-ch-compare-table) th,
.mtl-codespot-home .entry-content table:not(.mtl-compare-table):not(.mtl-ch-compare-table) td {
	border: 1px solid var(--ch-border);
	padding: 10px 14px;
	text-align: left;
}

.mtl-codespot-home .entry-content table:not(.mtl-compare-table):not(.mtl-ch-compare-table) th {
	color: var(--ch-text);
	background: var(--ch-panel);
}

/* ── Dark palettes for existing content component classes ────────────
   (mtl-steps, mtl-faq, mtl-compare-table etc. already exist inside real
   page content - restyle in place rather than rename markup site-wide). */

.mtl-codespot-home .mtl-steps li {
	border-left-color: var(--ch-border);
}

.mtl-codespot-home .mtl-steps li::before {
	background: var(--ch-green);
	color: #021a12;
}

.mtl-codespot-home .mtl-steps h3 {
	color: var(--ch-text);
	margin: 0 0 6px;
}

.mtl-codespot-home .mtl-steps p {
	color: var(--ch-muted);
}

.mtl-codespot-home .mtl-short-list li {
	color: var(--ch-muted);
}

.mtl-codespot-home .mtl-short-list li::before {
	color: var(--ch-green-hover);
}

.mtl-codespot-home .mtl-faq {
	border-top-color: var(--ch-border);
}

.mtl-codespot-home .mtl-faq details {
	border-bottom-color: var(--ch-border);
}

.mtl-codespot-home .mtl-faq summary {
	color: var(--ch-text);
}

.mtl-codespot-home .mtl-faq summary::after {
	color: var(--ch-green-hover);
}

.mtl-codespot-home .mtl-faq .mtl-faq-answer {
	color: var(--ch-muted);
}

.mtl-codespot-home .mtl-compare-table th,
.mtl-codespot-home .mtl-compare-table td {
	border-color: var(--ch-border);
	color: var(--ch-muted);
}

.mtl-codespot-home .mtl-compare-table th {
	background: var(--ch-panel);
	color: var(--ch-text);
}

.mtl-codespot-home .mtl-compare-table tbody {
	background: rgba(8, 39, 28, 0.4);
}

.mtl-codespot-home .mtl-compare-cta-row td {
	border-color: var(--ch-border);
}

.mtl-codespot-home .mtl-software-id-notice {
	background: rgba(14, 165, 233, 0.1);
	border-color: rgba(14, 165, 233, 0.35);
	color: #bfe6fb;
}

.mtl-codespot-home .mtl-software-id-notice a {
	color: var(--ch-blue);
}

.mtl-codespot-home .mtl-coming-soon-notice {
	background: rgba(255, 200, 87, 0.1);
	border-color: rgba(255, 200, 87, 0.35);
	color: #f5d38a;
}

.mtl-codespot-home .mtl-coming-soon-badge {
	background: var(--ch-panel);
	color: var(--ch-muted);
	border: 1px solid var(--ch-border);
}

.mtl-codespot-home .mtl-contact-form-wrap {
	color: var(--ch-muted);
}

.mtl-codespot-home .mtl-contact-form label {
	color: var(--ch-text);
}

.mtl-codespot-home .mtl-contact-form input[type="text"],
.mtl-codespot-home .mtl-contact-form input[type="email"],
.mtl-codespot-home .mtl-contact-form textarea {
	background: var(--ch-panel);
	border-color: var(--ch-border);
	color: var(--ch-text);
}

.mtl-codespot-home .mtl-contact-form input[type="text"]:focus,
.mtl-codespot-home .mtl-contact-form input[type="email"]:focus,
.mtl-codespot-home .mtl-contact-form textarea:focus {
	outline: none;
	border-color: var(--ch-green);
}

.mtl-codespot-home .mtl-contact-submit {
	background: var(--ch-green);
	color: #021a12;
}

.mtl-codespot-home .mtl-contact-submit:hover {
	background: var(--ch-green-hover);
}

.mtl-codespot-home .mtl-form-success {
	background: rgba(0, 193, 106, 0.1);
	border-color: rgba(0, 193, 106, 0.35);
	color: #7be3ae;
}

.mtl-codespot-home .mtl-form-error {
	background: rgba(239, 68, 68, 0.1);
	border-color: rgba(239, 68, 68, 0.35);
	color: #fca5a5;
}

/* ── WooCommerce: shop archive, single product, cart, checkout ───────
   CSS-only - no template overrides, no functional/JS changes. */

.mtl-codespot-home ul.products li.product {
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: 16px;
	padding: 18px;
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.mtl-codespot-home ul.products li.product:hover {
	transform: translateY(-4px);
	border-color: rgba(0, 193, 106, 0.5);
}

.mtl-codespot-home ul.products li.product .woocommerce-loop-product__title,
.mtl-codespot-home ul.products li.product h2 {
	color: var(--ch-text);
}

.mtl-codespot-home ul.products li.product .price,
.mtl-codespot-home ul.products li.product .price ins {
	color: var(--ch-green-hover);
}

.mtl-codespot-home ul.products li.product .price del {
	color: var(--ch-muted);
}

.mtl-codespot-home ul.products li.product img {
	border-radius: 10px;
}

.mtl-codespot-home div.product .summary,
.mtl-codespot-home div.product .product_title,
.mtl-codespot-home div.product .price,
.mtl-codespot-home div.product .woocommerce-product-details__short-description {
	color: var(--ch-text);
}

.mtl-codespot-home div.product .price {
	color: var(--ch-green-hover);
}

.mtl-codespot-home div.product .price del {
	color: var(--ch-muted);
}

.mtl-codespot-home .woocommerce-product-gallery {
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: 16px;
	overflow: hidden;
}

.mtl-codespot-home .single_add_to_cart_button.button {
	background: var(--ch-green) !important;
	color: #021a12 !important;
	border-radius: 12px !important;
	font-weight: 700 !important;
	border: none !important;
}

.mtl-codespot-home .single_add_to_cart_button.button:hover {
	background: var(--ch-green-hover) !important;
}

.mtl-codespot-home a.button.wc-forward,
.mtl-codespot-home a.added_to_cart {
	color: var(--ch-green-hover) !important;
}

/* Generic WooCommerce secondary buttons (Return to shop, Apply coupon,
   Update cart) inherit the theme's blue button background with green link
   text bled in from .entry-content a - unreadable combination. Give them
   a neutral dark-panel treatment; #place_order and
   .single_add_to_cart_button keep their own solid-green styling above,
   which wins on specificity. */
.mtl-codespot-home .woocommerce a.button:not(.single_add_to_cart_button):not(.checkout-button),
.mtl-codespot-home .woocommerce button.button:not(.single_add_to_cart_button):not(.checkout-button),
.mtl-codespot-home .woocommerce input.button:not(.single_add_to_cart_button):not(.checkout-button) {
	background: var(--ch-panel) !important;
	color: var(--ch-text) !important;
	border: 1px solid var(--ch-border) !important;
	border-radius: 10px !important;
}

.mtl-codespot-home .woocommerce a.button:not(.single_add_to_cart_button):not(.checkout-button):hover,
.mtl-codespot-home .woocommerce button.button:not(.single_add_to_cart_button):not(.checkout-button):hover,
.mtl-codespot-home .woocommerce input.button:not(.single_add_to_cart_button):not(.checkout-button):hover {
	border-color: var(--ch-green) !important;
	color: var(--ch-green-hover) !important;
}

.mtl-codespot-home .woocommerce-tabs {
	color: var(--ch-muted);
}

.mtl-codespot-home .woocommerce-tabs ul.tabs {
	border-bottom-color: var(--ch-border);
}

.mtl-codespot-home .woocommerce-tabs ul.tabs li {
	background: transparent;
}

.mtl-codespot-home .woocommerce-tabs ul.tabs li a {
	color: var(--ch-muted) !important;
}

.mtl-codespot-home .woocommerce-tabs ul.tabs li.active a {
	color: var(--ch-green-hover) !important;
}

.mtl-codespot-home .woocommerce-tabs .panel {
	color: var(--ch-muted);
}

.mtl-codespot-home .woocommerce-tabs .panel h2 {
	color: var(--ch-text);
}

.mtl-codespot-home table.shop_table,
.mtl-codespot-home table.shop_table_responsive {
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	color: var(--ch-muted);
}

.mtl-codespot-home table.shop_table th,
.mtl-codespot-home table.shop_table td {
	border-color: var(--ch-border) !important;
	color: var(--ch-muted);
}

.mtl-codespot-home table.shop_table th {
	color: var(--ch-text);
}

.mtl-codespot-home .cart_totals,
.mtl-codespot-home .woocommerce-checkout-review-order-table,
.mtl-codespot-home #order_review {
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: 14px;
	padding: 4px 16px;
}

.mtl-codespot-home .woocommerce-billing-fields,
.mtl-codespot-home .woocommerce-additional-fields,
.mtl-codespot-home .woocommerce-shipping-fields {
	color: var(--ch-text);
}

.mtl-codespot-home form .form-row label {
	color: var(--ch-text);
}

.mtl-codespot-home form .input-text,
.mtl-codespot-home form select,
.mtl-codespot-home form textarea,
.mtl-codespot-home #order_comments {
	background: var(--ch-bg);
	border: 1px solid var(--ch-border);
	color: var(--ch-text);
	border-radius: 8px;
}

.mtl-codespot-home #payment {
	background: var(--ch-panel);
	border-top-color: var(--ch-border);
}

.mtl-codespot-home #payment ul.payment_methods {
	border-bottom-color: var(--ch-border);
}

.mtl-codespot-home #payment div.payment_box {
	background: var(--ch-bg);
	color: var(--ch-muted);
}

.mtl-codespot-home #payment div.payment_box::before {
	border-bottom-color: var(--ch-bg);
}

.mtl-codespot-home #place_order,
.mtl-codespot-home button.checkout-button {
	background: var(--ch-green) !important;
	color: #021a12 !important;
	border-radius: 12px !important;
	font-weight: 700 !important;
}

.mtl-codespot-home #place_order:hover,
.mtl-codespot-home button.checkout-button:hover {
	background: var(--ch-green-hover) !important;
}

.mtl-codespot-home .woocommerce-message,
.mtl-codespot-home .woocommerce-info {
	background: rgba(0, 193, 106, 0.1);
	border-top-color: var(--ch-green);
	color: var(--ch-text);
}

.mtl-codespot-home .woocommerce-error {
	background: rgba(239, 68, 68, 0.1);
	border-top-color: #ef4444;
	color: var(--ch-text);
}

.mtl-codespot-home .woocommerce-error li,
.mtl-codespot-home .woocommerce-message a,
.mtl-codespot-home .woocommerce-info a {
	color: var(--ch-green-hover);
}

.mtl-codespot-home .product_meta,
.mtl-codespot-home .product_meta a,
.mtl-codespot-home .product_meta span {
	color: var(--ch-muted) !important;
}

/* Native Blocksy breadcrumb (.ct-breadcrumbs, used on product/cart/checkout
   pages where the Rank Math .mtl-breadcrumbs wrapper is intentionally
   skipped - see inc/seo-helpers.php) and its "Related products" module
   title both use Blocksy's default dark-on-light palette, unreadable
   against the dark background. */
.mtl-codespot-home .ct-breadcrumbs,
.mtl-codespot-home .ct-breadcrumbs a,
.mtl-codespot-home .ct-breadcrumbs span {
	color: var(--ch-muted) !important;
}

.mtl-codespot-home .ct-breadcrumbs a:hover {
	color: var(--ch-green-hover) !important;
}

.mtl-codespot-home .ct-module-title {
	color: var(--ch-text) !important;
}

.mtl-codespot-home ul.products li.product .entry-meta .meta-categories a {
	color: var(--ch-muted) !important;
}

.mtl-codespot-home ul.products li.product .ct-woo-card-actions a.button {
	color: var(--ch-green-hover) !important;
}

/* ── Knowledge Hub archive (is_home) ──────────────────────────────── */
.mtl-codespot-home.blog #content,
.mtl-codespot-home.blog main {
	background: var(--ch-bg);
}

.mtl-ch-archive-hero {
	position: relative;
	padding: 64px 24px 40px;
	background:
		radial-gradient(ellipse 800px 400px at 85% 0%, rgba(0, 193, 106, 0.14) 0%, transparent 60%),
		linear-gradient(180deg, #020f0a 0%, var(--ch-bg) 100%);
	text-align: left;
}

.mtl-ch-archive-hero-inner {
	max-width: 1240px;
	margin: 0 auto;
}

.mtl-ch-archive-hero h1 {
	color: var(--ch-text);
	font-size: clamp(30px, 4vw, 42px);
	font-weight: 800;
	margin: 0 0 12px;
}

.mtl-ch-archive-hero p {
	color: var(--ch-muted);
	font-size: 16px;
	max-width: 640px;
	margin: 0;
}

.mtl-ch-archive-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 1240px;
	margin: 28px auto 0;
	padding: 0 24px;
}

.mtl-ch-archive-cats a {
	display: inline-block;
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	color: var(--ch-muted);
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 100px;
	text-decoration: none;
}

.mtl-ch-archive-cats a:hover {
	border-color: var(--ch-green);
	color: var(--ch-green-hover);
}

.mtl-codespot-home.blog .site-content .posts-wrapper,
.mtl-codespot-home.blog ul.blocksy-posts,
.mtl-codespot-home.blog .blocksy-posts-wrapper {
	max-width: 1240px;
	margin: 0 auto;
	padding: 48px 24px 88px;
	box-sizing: border-box;
}

.mtl-codespot-home.blog article.post,
.mtl-codespot-home.blog .blocksy-post-item {
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: var(--ch-radius);
	overflow: hidden;
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.mtl-codespot-home.blog article.post:hover,
.mtl-codespot-home.blog .blocksy-post-item:hover {
	transform: translateY(-6px);
	border-color: var(--ch-green);
}

.mtl-codespot-home.blog article.post .entry-title,
.mtl-codespot-home.blog article.post .entry-title a,
.mtl-codespot-home.blog .blocksy-post-item .entry-title a {
	color: var(--ch-text) !important;
}

.mtl-codespot-home.blog article.post .entry-excerpt,
.mtl-codespot-home.blog article.post p,
.mtl-codespot-home.blog .entry-meta,
.mtl-codespot-home.blog .entry-meta * {
	color: var(--ch-muted) !important;
}

.mtl-codespot-home.blog .entry-meta a:hover,
.mtl-codespot-home.blog article.post a:hover {
	color: var(--ch-green-hover) !important;
}

.mtl-ch-archive-title {
	color: var(--ch-text);
}

/* ── Single blog post ─────────────────────────────────────────────── */
.mtl-codespot-home.single-post article {
	max-width: 820px;
	margin: 0 auto;
	padding: 56px 0 88px;
}

.mtl-codespot-home.single-post .entry-header {
	margin-bottom: 32px;
}

.mtl-codespot-home.single-post .entry-header h1.page-title {
	color: var(--ch-text);
	font-size: clamp(30px, 4vw, 42px);
	font-weight: 800;
	line-height: 1.2;
}

.mtl-codespot-home.single-post .entry-meta,
.mtl-codespot-home.single-post .entry-meta *,
.mtl-codespot-home.single-post .entry-meta a {
	color: var(--ch-muted) !important;
	text-decoration: none;
}

.mtl-codespot-home.single-post .entry-meta a:hover {
	color: var(--ch-green-hover) !important;
}

/* Restore Blocksy's own page-title area on single posts only - it shows the
   post title + publish date/author, which the .mtl-ch-page-hero pattern
   doesn't cover for blog content, and hiding it would leave no H1 at all. */
.mtl-codespot-home.single-post .hero-section.is-width-constrained {
	display: block;
	background: transparent;
	padding: 56px 24px 0;
}

.mtl-codespot-home.single-post .hero-section.is-width-constrained .entry-header {
	max-width: 820px;
	margin: 0 auto;
}

.mtl-codespot-home.single-post article > .entry-content {
	padding-top: 0;
}

/* ── 404 page (RouterOS terminal panel, same dark design system) ─────
   Reuses --ch-* variables, .mtl-ch-btn, .mtl-ch-eyebrow, .mtl-ch-hero-
   buttons - only the pieces genuinely new to this page (big 404 number,
   status panel, terminal block, tip box) get their own classes. */
.mtl-404 {
	padding: 96px 24px 120px;
	text-align: center;
}

.mtl-404-inner {
	max-width: 720px;
	margin: 0 auto;
}

.mtl-404-h1 {
	margin: 0 0 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.mtl-404-number {
	font-size: clamp(88px, 16vw, 160px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	background: linear-gradient(180deg, var(--ch-text) 0%, var(--ch-green-hover) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 0 60px rgba(0, 193, 106, 0.25);
}

.mtl-404-eyebrow {
	margin: 0;
}

.mtl-404-panel,
.mtl-404-terminal {
	text-align: left;
	background: var(--ch-panel);
	border: 1px solid var(--ch-border);
	border-radius: var(--ch-radius);
	padding: 22px 26px;
	margin: 0 0 24px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 13.5px;
	line-height: 1.9;
}

.mtl-404-panel-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mtl-404-panel-key {
	color: var(--ch-green-hover);
	font-weight: 700;
	min-width: 92px;
}

.mtl-404-panel-val {
	color: var(--ch-muted);
	white-space: pre-wrap;
	word-break: break-word;
}

.mtl-404-panel-val.mtl-404-danger {
	color: #ff8080;
}

.mtl-404-terminal-line {
	margin: 0 0 8px;
	color: var(--ch-text);
	word-break: break-word;
}

.mtl-404-prompt {
	color: var(--ch-green-hover);
	font-weight: 700;
}

.mtl-404-terminal-flags {
	margin: 0 0 14px;
	color: var(--ch-muted);
	font-size: 12.5px;
}

.mtl-404-terminal-empty {
	margin: 0 0 8px;
	color: var(--ch-muted);
}

.mtl-404-cursor-line {
	margin-bottom: 0;
}

.mtl-404-cursor {
	display: inline-block;
	width: 8px;
	height: 15px;
	background: var(--ch-green-hover);
	vertical-align: middle;
	animation: mtl-404-blink 1s step-end infinite;
}

@keyframes mtl-404-blink {
	0%, 50% { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

.mtl-404-explain {
	color: var(--ch-muted);
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 36px;
}

.mtl-404-buttons {
	justify-content: center;
	margin-bottom: 36px;
}

.mtl-404-tip {
	text-align: left;
	background: rgba(0, 193, 106, 0.08);
	border: 1px solid rgba(0, 193, 106, 0.3);
	border-radius: 14px;
	padding: 16px 20px;
	color: var(--ch-muted);
	font-size: 14px;
	line-height: 1.6;
}

.mtl-404-tip strong {
	color: var(--ch-text);
}

@media (max-width: 600px) {
	.mtl-404 {
		padding: 64px 20px 72px;
	}

	.mtl-404-panel-key {
		min-width: 0;
	}

	.mtl-404-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.mtl-404-buttons .mtl-ch-btn {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mtl-404-cursor {
		animation: none;
	}
}