/*
Theme Name:   NetMirror Premium
Theme URI:    http://localhost/netmirrortv
Description:  Premium light child theme for Kadence, built for the NetMirror site. Clean white surfaces, soft elevation, a restrained red accent, and performance tuning.
Author:       NetMirror
Version:      2.0.0
Template:     kadence
Text Domain:  kadence-netmirror
Tags:         light, premium, performance
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
	/* Surfaces — white with quiet tints for separation */
	--nm-bg:        #ffffff;
	--nm-bg-soft:   #f7f9fc;
	--nm-surface:   #ffffff;
	--nm-surface-2: #f2f5f9;
	--nm-surface-3: #e9eef5;

	/* Accent — brand red, dark enough to read on white */
	--nm-accent:        #d80e1c;
	--nm-accent-deep:   #a80a15;
	--nm-accent-soft:   rgba(216, 14, 28, 0.07);
	--nm-accent-line:   rgba(216, 14, 28, 0.28);
	--nm-gradient:      linear-gradient(135deg, #e01523 0%, #ac0b16 100%);
	--nm-gradient-soft: linear-gradient(135deg, rgba(216, 14, 28, 0.08), rgba(216, 14, 28, 0.02));

	/* Text */
	--nm-text:       #0f1420;
	--nm-text-body:  #4b5566;
	--nm-text-muted: #6e7889;

	/* Lines & elevation — neutral, never pure black */
	--nm-border:        rgba(16, 24, 40, 0.09);
	--nm-border-strong: rgba(16, 24, 40, 0.16);
	--nm-shadow-sm:     0 1px 2px rgba(16, 24, 40, 0.05);
	--nm-shadow:        0 1px 2px rgba(16, 24, 40, 0.05), 0 10px 28px rgba(16, 24, 40, 0.07);
	--nm-shadow-lg:     0 2px 4px rgba(16, 24, 40, 0.05), 0 20px 48px rgba(16, 24, 40, 0.10);
	--nm-shadow-glow:   0 8px 22px rgba(216, 14, 28, 0.26);

	/* Geometry */
	--nm-radius-sm: 8px;
	--nm-radius:    14px;
	--nm-radius-lg: 20px;

	--nm-gutter: 14px;

	/* One reading measure for the whole site. Deliberately NOT in ch:
	   ch is relative to each element font-size, so 72ch on a 40px heading
	   resolves to ~1550px and never caps. */
	--nm-measure: 44rem;

	/* Motion */
	--nm-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--nm-fast: 0.18s var(--nm-ease);
	--nm-med:  0.32s var(--nm-ease);

	/* Fluid type scale */
	--nm-h1: clamp(2rem, 1.35rem + 2.9vw, 3.4rem);
	--nm-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
	--nm-h3: clamp(1.22rem, 1.05rem + 0.85vw, 1.55rem);
	--nm-h4: clamp(1.08rem, 1rem + 0.45vw, 1.28rem);
}

/* ==========================================================================
   2. BASE — clean white canvas
   ========================================================================== */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	background: var(--nm-bg);
}

body {
	background-color: var(--nm-bg);
	/* barely-there tint so the page is not a flat sheet of white */
	background-image:
		radial-gradient(900px 460px at 12% -10%, rgba(216, 14, 28, 0.045), transparent 62%),
		radial-gradient(760px 420px at 92% 2%,  rgba(37, 84, 199, 0.040), transparent 64%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: var(--nm-text-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

.site,
.site-container,
.content-area,
.content-wrap,
.entry.content-bg,
.entry-content-wrap,
.content-style-unboxed .entry-content,
article.entry {
	background: transparent !important;
	box-shadow: none !important;
}

::selection { background: rgba(216, 14, 28, 0.16); color: var(--nm-text); }

* { scrollbar-width: thin; scrollbar-color: #c6cddb transparent; }
::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: var(--nm-bg-soft); }
::-webkit-scrollbar-thumb  { background: #c6cddb; border-radius: 10px; border: 2px solid var(--nm-bg-soft); }
::-webkit-scrollbar-thumb:hover { background: #aab3c4; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--nm-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

.entry-content h1, .entry-content h2,
.entry-content h3, .entry-content h4,
h1, h2, h3, h4, h5, h6,
.wp-block-kadence-advancedheading {
	color: var(--nm-text);
	letter-spacing: -0.022em;
	line-height: 1.18;
	font-weight: 800;
}

.entry-content h1, h1.entry-title { font-size: var(--nm-h1); }
.entry-content h2 { font-size: var(--nm-h2); margin-top: 2.2em; margin-bottom: 0.7em; }
.entry-content h3 { font-size: var(--nm-h3); margin-top: 1.8em; margin-bottom: 0.6em; }
.entry-content h4 { font-size: var(--nm-h4); }

/*
 * Section heading banners.
 * These are Kadence advanced headings carrying a flat #940606 background with
 * no horizontal padding, so the text sat flush against the bar edge. On white
 * the red band still works as the brand marker — rebuilt with real padding,
 * a softer gradient and proper elevation.
 */
.entry-content h2.wp-block-kadence-advancedheading {
	position: relative;
	overflow: hidden;
	background-color: transparent;
	background-image: linear-gradient(135deg, #d80e1c 0%, #8f0a13 100%);
	color: #ffffff;
	padding: 0.58em 1.15em 0.62em 1.15em;
	border-radius: 16px 4px 16px 4px;
	box-shadow: 0 10px 26px rgba(216, 14, 28, 0.22);
	transition: box-shadow var(--nm-med), transform var(--nm-med);
}
.entry-content h2.wp-block-kadence-advancedheading::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, #ff6b74, #d80e1c);
}
.entry-content h2.wp-block-kadence-advancedheading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 58%);
	pointer-events: none;
}
.entry-content h2.wp-block-kadence-advancedheading:hover {
	transform: translateX(2px);
	box-shadow: 0 14px 34px rgba(216, 14, 28, 0.3);
}

/* Sub-headings get a slim accent rule */
.entry-content h3 {
	position: relative;
	padding-left: 0.72em;
}
.entry-content h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.16em;
	bottom: 0.16em;
	width: 3px;
	border-radius: 3px;
	background: var(--nm-gradient);
}

.entry-content p,
.entry-content li {
	color: var(--nm-text-body);
	line-height: 1.78;
}

.entry-content strong,
.entry-content b { color: var(--nm-text); font-weight: 700; }

/* Links — animated underline */
.entry-content a:not(.kb-button):not(.wp-block-button__link):not(.kb-table-of-content-list a) {
	color: var(--nm-accent);
	text-decoration: none;
	background-image: linear-gradient(var(--nm-accent), var(--nm-accent));
	background-size: 0% 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--nm-med), color var(--nm-fast);
}
.entry-content a:not(.kb-button):not(.wp-block-button__link):hover {
	color: var(--nm-accent-deep);
	background-size: 100% 1.5px;
}

/* ==========================================================================
   4. HEADER — sticky, frosted white
   ========================================================================== */

#masthead,
.site-header,
.site-header-wrap {
	background-color: rgba(255, 255, 255, 0.86) !important;
	background-image: none !important;
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid var(--nm-border);
}

#masthead {
	position: sticky;
	top: 0;
	z-index: 999;
	transition: box-shadow var(--nm-med), background-color var(--nm-med);
}
#masthead.nm-scrolled {
	box-shadow: 0 1px 0 var(--nm-border), 0 8px 28px rgba(16, 24, 40, 0.08);
	background-color: rgba(255, 255, 255, 0.95) !important;
}

.site-branding img,
.custom-logo { transition: transform var(--nm-med); }
.site-branding a:hover img { transform: scale(1.04); }

/* Nav */
.main-navigation .primary-menu-container > ul > li > a,
.header-navigation a {
	color: var(--nm-text) !important;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: color var(--nm-fast);
}
.main-navigation .primary-menu-container > ul > li > a:hover,
.header-navigation a:hover { color: var(--nm-accent) !important; }

.primary-navigation.primary-navigation-style-underline .menu-container > ul > li.menu-item > a::after {
	background: var(--nm-gradient) !important;
	height: 2px !important;
	border-radius: 2px;
}

/* ==========================================================================
   5. HERO
   --------------------------------------------------------------------------
   The whole page sits inside ONE Kadence row with two columns, so hero rules
   are scoped to the leading blocks of the first column, never the row itself.
   ========================================================================== */

/* The row carried a solid black background in the old build */
.entry-content > .kb-row-layout-wrap.kt-row-has-bg {
	background-color: transparent !important;
	background-image: none !important;
	position: relative;
}

/* Soft tinted wash behind the top of the page */
.home .entry-content > .kb-row-layout-wrap:first-of-type::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 130vw;
	height: 720px;
	background:
		radial-gradient(700px 380px at 30% 16%, rgba(216, 14, 28, 0.07), transparent 64%),
		radial-gradient(600px 360px at 76% 6%,  rgba(37, 84, 199, 0.06), transparent 66%);
	pointer-events: none;
	z-index: 0;
}
.entry-content > .kb-row-layout-wrap > * { position: relative; z-index: 1; }

/* App icon */
.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
	> .kt-inside-inner-col > .wp-block-kadence-image:first-child img {
	border-radius: 26px;
	box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08), 0 20px 48px rgba(16, 24, 40, 0.16);
	transition: transform var(--nm-med), box-shadow var(--nm-med);
}
.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
	> .kt-inside-inner-col > .wp-block-kadence-image:first-child img:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 4px 10px rgba(16, 24, 40, 0.1), 0 28px 60px rgba(16, 24, 40, 0.2);
}

/*
 * The hero headline and intro used palette9 (white) because the band behind
 * them was black. On white they have to be dark — these two elements are the
 * only place that needs correcting.
 */
.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
	> .kt-inside-inner-col > h2:first-of-type,
.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
	> .kt-inside-inner-col > h1:first-of-type {
	font-size: var(--nm-h1) !important;
	font-weight: 900 !important;
	letter-spacing: -0.03em;
	color: var(--nm-text) !important;
	background: none !important;
	-webkit-text-fill-color: var(--nm-text) !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin-top: 0.4em;
	overflow: visible;
}
.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
	> .kt-inside-inner-col > h2:first-of-type::after,
.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
	> .kt-inside-inner-col > h2:first-of-type::before { display: none; }

.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
	> .kt-inside-inner-col > h2:first-of-type + p {
	color: var(--nm-text-body) !important;
	font-size: clamp(1.02rem, 0.97rem + 0.35vw, 1.2rem) !important;
	line-height: 1.8;
}

/*
 * Feature pills. Columns 2 and 3 nest another column inside, so only the
 * wrapper directly holding the <p> becomes a pill — otherwise you get a pill
 * inside a pill. Browsers without :has() simply get no pill.
 */
.home .entry-content .kt-has-3-columns .kt-inside-inner-col {
	background: none;
	border: 0;
	padding: 0;
}

@supports selector(:has(*)) {
	.home .entry-content .kt-has-3-columns .kt-inside-inner-col:has(> p) {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 56px;
		background: var(--nm-surface);
		border: 1px solid var(--nm-border);
		border-radius: 999px;
		padding: 0.7em 1.15em;
		text-align: center;
		box-shadow: var(--nm-shadow-sm);
		transition: transform var(--nm-fast), border-color var(--nm-fast), box-shadow var(--nm-fast);
	}
	.home .entry-content .kt-has-3-columns .kt-inside-inner-col:has(> p):hover {
		transform: translateY(-3px);
		border-color: var(--nm-accent-line);
		box-shadow: var(--nm-shadow);
	}
}

.home .entry-content .kt-has-3-columns > .wp-block-kadence-column,
.home .entry-content .kt-has-3-columns > .wp-block-kadence-column > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.home .entry-content .kt-has-3-columns .kt-inside-inner-col > .wp-block-kadence-column,
.home .entry-content .kt-has-3-columns .wp-block-kadence-column .wp-block-kadence-column {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
	align-self: stretch;
}

.home .entry-content .kt-has-3-columns .kt-inside-inner-col > p {
	margin: 0;
	font-size: 0.94rem !important;
	font-weight: 700;
	color: var(--nm-text) !important;
	line-height: 1.3;
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.entry-content .kb-button,
.entry-content .wp-block-button__link,
.wp-block-kadence-advancedbtn a.kb-button,
.kt-button,
button.kb-button {
	position: relative;
	overflow: hidden;
	background: var(--nm-gradient) !important;
	background-color: var(--nm-accent) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-weight: 800 !important;
	letter-spacing: 0.015em;
	padding: 0.92em 2.1em !important;
	box-shadow: var(--nm-shadow-glow);
	transition: transform var(--nm-fast), box-shadow var(--nm-med), filter var(--nm-fast);
	isolation: isolate;
}

.entry-content .kb-button:hover,
.entry-content .wp-block-button__link:hover,
.wp-block-kadence-advancedbtn a.kb-button:hover {
	transform: translateY(-3px);
	filter: brightness(1.06);
	box-shadow: 0 14px 34px rgba(216, 14, 28, 0.34);
}
.entry-content .kb-button:active,
.wp-block-kadence-advancedbtn a.kb-button:active { transform: translateY(-1px); }

/* Shimmer sweep */
.entry-content .kb-button::after,
.wp-block-kadence-advancedbtn a.kb-button::after {
	content: "";
	position: absolute;
	top: 0;
	left: -140%;
	width: 60%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
	transform: skewX(-18deg);
	pointer-events: none;
	animation: nm-shimmer 4.2s ease-in-out infinite;
}
@keyframes nm-shimmer {
	0%, 62% { left: -140%; }
	100%    { left: 160%; }
}

/* ==========================================================================
   7. SPEC TABLE
   ========================================================================== */

.entry-content table,
.entry-content .wp-block-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--nm-surface);
	border: 1px solid var(--nm-border);
	border-radius: var(--nm-radius);
	overflow: hidden;
	box-shadow: var(--nm-shadow);
	font-size: 0.97rem;
}

.entry-content table th {
	background: var(--nm-surface-2);
	color: var(--nm-text);
	font-weight: 700;
	text-align: left;
	letter-spacing: 0.02em;
}

.entry-content table th,
.entry-content table td {
	padding: 0.92em 1.15em;
	border: 0;
	border-bottom: 1px solid var(--nm-border);
	color: var(--nm-text-body);
	vertical-align: middle;
}

.entry-content table td:first-child {
	color: var(--nm-text);
	font-weight: 650;
	width: 38%;
}

.entry-content table tr:last-child td { border-bottom: 0; }
.entry-content table tbody tr { transition: background var(--nm-fast); }
.entry-content table tbody tr:nth-child(even) { background: rgba(16, 24, 40, 0.018); }
.entry-content table tbody tr:hover { background: var(--nm-accent-soft); }

.entry-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Core "stripes" style hardcodes #f0f0f0; align it with the palette */
.entry-content .wp-block-table.is-style-stripes { border-bottom: 0; background: transparent; }
.entry-content .wp-block-table.is-style-stripes table {
	background: var(--nm-surface);
	border: 1px solid var(--nm-border);
}
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(2n + 1) {
	background-color: rgba(16, 24, 40, 0.022);
}
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(even) { background-color: transparent; }
.entry-content .wp-block-table.is-style-stripes tbody tr:hover,
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd):hover {
	background-color: var(--nm-accent-soft);
}
.entry-content .wp-block-table.is-style-stripes th,
.entry-content .wp-block-table.is-style-stripes td { border-color: var(--nm-border); }

/* ==========================================================================
   8. TABLE OF CONTENTS
   ========================================================================== */

.wp-block-kadence-tableofcontents .kb-table-of-contents-wrap,
.wp-block-kadence-tableofcontents .kb-table-of-content-wrap {
	background: var(--nm-surface) !important;
	border: 1px solid var(--nm-border) !important;
	border-left: 3px solid var(--nm-accent) !important;
	border-radius: var(--nm-radius) !important;
	box-shadow: var(--nm-shadow);
	padding: 1.35rem 1.5rem !important;
}

.kb-table-of-contents-title,
.kb-table-of-contents__title {
	color: var(--nm-text) !important;
	font-weight: 800 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.86rem !important;
}

.kb-table-of-content-list a,
.kb-table-of-contents-list a {
	color: var(--nm-text-body) !important;
	text-decoration: none !important;
	border-radius: 6px;
	padding: 3px 8px;
	margin-left: -8px;
	display: inline-block;
	transition: color var(--nm-fast), background var(--nm-fast), transform var(--nm-fast);
}
.kb-table-of-content-list a:hover,
.kb-table-of-contents-list a:hover {
	color: var(--nm-accent) !important;
	background: var(--nm-accent-soft);
	transform: translateX(4px);
}

/* ==========================================================================
   9. CARDS / INFOBOX / ACCORDION / MEDIA
   ========================================================================== */

.wp-block-kadence-infobox .kt-blocks-info-box-link-wrap,
.wp-block-kadence-infobox .kt-info-box-wrap {
	background: var(--nm-surface) !important;
	border: 1px solid var(--nm-border) !important;
	border-radius: var(--nm-radius) !important;
	box-shadow: var(--nm-shadow-sm);
	transition: transform var(--nm-med), box-shadow var(--nm-med), border-color var(--nm-med);
}
.wp-block-kadence-infobox .kt-blocks-info-box-link-wrap:hover {
	transform: translateY(-5px);
	border-color: var(--nm-accent-line) !important;
	box-shadow: var(--nm-shadow-lg);
}
.wp-block-kadence-infobox .kt-blocks-info-box-title { color: var(--nm-text) !important; }
.wp-block-kadence-infobox .kt-blocks-info-box-text  { color: var(--nm-text-body) !important; }

/* Accordion / FAQ */
.wp-block-kadence-accordion .kt-accordion-pane {
	background: var(--nm-surface) !important;
	border: 1px solid var(--nm-border) !important;
	border-radius: var(--nm-radius) !important;
	margin-bottom: 0.7rem;
	overflow: hidden;
	box-shadow: var(--nm-shadow-sm);
	transition: border-color var(--nm-fast), box-shadow var(--nm-fast);
}
.wp-block-kadence-accordion .kt-accordion-pane:hover { border-color: var(--nm-border-strong) !important; }
.wp-block-kadence-accordion .kt-blocks-accordion-header {
	background: transparent !important;
	color: var(--nm-text) !important;
	font-weight: 700 !important;
	transition: background var(--nm-fast), color var(--nm-fast);
}
.wp-block-kadence-accordion .kt-blocks-accordion-header:hover { background: var(--nm-surface-2) !important; }
.wp-block-kadence-accordion .kt-accordion-panel-inner {
	background: var(--nm-bg-soft) !important;
	color: var(--nm-text-body) !important;
	border-top: 1px solid var(--nm-border);
}

/* Kadence rows carrying a background become soft cards */
.entry-content .kb-row-layout-wrap.kt-row-has-bg:not(:first-of-type) {
	border-radius: var(--nm-radius-lg);
	border: 1px solid var(--nm-border);
	background-color: var(--nm-bg-soft) !important;
	box-shadow: var(--nm-shadow-sm);
}

/* Images */
.entry-content img:not(.custom-logo):not(.kb-table-of-contents-icon) {
	border-radius: var(--nm-radius);
	max-width: 100%;
	height: auto;
}
.entry-content figure img {
	box-shadow: var(--nm-shadow);
	border: 1px solid var(--nm-border);
}

/* Lists */
.entry-content ul:not(.kb-table-of-content-list):not(.menu) { list-style: none; padding-left: 1.35em; }
.entry-content ul:not(.kb-table-of-content-list):not(.menu) > li {
	position: relative;
	margin-bottom: 0.55em;
}
.entry-content ul:not(.kb-table-of-content-list):not(.menu) > li::before {
	content: "";
	position: absolute;
	left: -1.05em;
	top: 0.72em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--nm-gradient);
}

.entry-content blockquote {
	border-left: 3px solid var(--nm-accent);
	background: var(--nm-gradient-soft);
	border-radius: 0 var(--nm-radius) var(--nm-radius) 0;
	padding: 1.1em 1.4em;
	color: var(--nm-text);
}

.entry-content code,
.entry-content kbd {
	background: var(--nm-surface-2);
	border: 1px solid var(--nm-border);
	border-radius: 6px;
	padding: 0.15em 0.45em;
	color: var(--nm-accent-deep);
	font-size: 0.92em;
}

/* <mark> carries an inline colour from the original build */
.entry-content mark,
.entry-content mark.has-inline-color {
	background: rgba(216, 14, 28, 0.10) !important;
	color: var(--nm-accent-deep) !important;
	padding: 0.08em 0.4em;
	border-radius: 6px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
/* …but inside the spec table those marks were a hand-rolled zebra stripe and
   the table now stripes itself, so neutralise them there. */
.entry-content table mark,
.entry-content table mark.has-inline-color {
	background: transparent !important;
	color: inherit !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

/*
 * Header dropdowns. Kadence styles these from the palette assuming a light
 * theme — panel = palette3 (dark), link text = palette8 (white), active item =
 * palette4. With the light palette restored those assumptions hold again, so
 * all that is left here is polish.
 */
.header-navigation ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.sub-menu {
	border: 1px solid rgba(16, 24, 40, 0.14);
	border-radius: var(--nm-radius-sm);
	box-shadow: var(--nm-shadow-lg);
	overflow: hidden;
	padding: 4px;
}
.header-navigation ul ul li.menu-item > a,
.header-navigation .header-menu-container ul ul li.menu-item > a {
	border-radius: 8px;
	transition: background-color var(--nm-fast), color var(--nm-fast);
}
.header-navigation ul ul li.menu-item + li.menu-item { border-top: 1px solid rgba(255, 255, 255, 0.07); }

hr, .wp-block-separator {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--nm-border-strong), transparent);
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.site-footer,
#colophon,
.site-footer-wrap,
.footer-container {
	background-color: var(--nm-bg-soft) !important;
	background-image: none !important;
	border-top: 1px solid var(--nm-border);
	position: relative;
	color: var(--nm-text-muted);
}
.site-footer::before,
#colophon::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--nm-accent), transparent);
	opacity: 0.5;
}
.site-footer a, #colophon a { color: var(--nm-text-body); transition: color var(--nm-fast); }
.site-footer a:hover, #colophon a:hover { color: var(--nm-accent); }

/* ==========================================================================
   11. SCROLL PROGRESS + BACK TO TOP
   ========================================================================== */

.nm-progress {
	position: fixed;
	top: 0; left: 0;
	height: 3px;
	width: 0;
	background: var(--nm-gradient);
	z-index: 10000;
	transition: width 0.1s linear;
	pointer-events: none;
}

.nm-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--nm-border);
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: var(--nm-text);
	font-size: 18px;
	line-height: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	box-shadow: var(--nm-shadow);
	transition: opacity var(--nm-med), transform var(--nm-med), visibility var(--nm-med), background var(--nm-fast), color var(--nm-fast);
	z-index: 9999;
}
.nm-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.nm-top:hover { background: var(--nm-accent); border-color: var(--nm-accent); color: #fff; }

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

/* --- Tablet ---------------------------------------------------------- */
@media (max-width: 1024px) {
	:root { --nm-gutter: 24px; }

	html { scroll-padding-top: 84px; }

	/*
	 * body, .site, article.entry, .entry-content and the Kadence row wrapper
	 * each apply their own horizontal padding. Nested, that ate ~148px of a
	 * 375px screen. Collapse them all and keep ONE gutter on the row.
	 */
	body,
	.site.wp-site-blocks,
	.content-area,
	.content-container,
	.site-main,
	.content-wrap,
	article.entry,
	article.entry.content-bg,
	.entry-content-wrap,
	.entry-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.entry-content > .kb-row-layout-wrap > .kt-row-column-wrap {
		padding-left: var(--nm-gutter) !important;
		padding-right: var(--nm-gutter) !important;
		max-width: 100% !important;
	}
	.entry-content .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.site-header .site-container,
	.site-footer .site-container {
		padding-left: var(--nm-gutter) !important;
		padding-right: var(--nm-gutter) !important;
	}

	.entry-content h2.wp-block-kadence-advancedheading { padding: 0.55em 0.95em; }
	.home .entry-content .kt-has-3-columns { gap: 0.6rem; }

	/* Tablets are touch devices — 44px minimum targets */
	.menu-toggle,
	.drawer-toggle,
	button.menu-toggle-open,
	.kb-table-of-contents-toggle,
	button.kb-table-of-contents-toggle {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}
	.kb-table-of-content-list a,
	.kb-table-of-contents-list a { display: block; padding: 8px; line-height: 1.45; }
	.mobile-navigation ul li a,
	.header-navigation ul li a { min-height: 44px; display: flex; align-items: center; }
}

/* --- Mobile — the primary audience ------------------------------------ */
@media (max-width: 767px) {
	:root {
		--nm-radius: 12px;
		--nm-radius-lg: 16px;
		/* re-declared: the ≤1024px block above also matches here */
		--nm-gutter: 14px;
		--nm-h1: clamp(1.75rem, 1.35rem + 3.4vw, 2.25rem);
		--nm-h2: clamp(1.35rem, 1.1rem + 2.2vw, 1.7rem);
		--nm-h3: clamp(1.12rem, 1rem + 1.2vw, 1.3rem);
	}

	html { scroll-padding-top: 76px; }

	body {
		background-attachment: scroll;
		background-image: radial-gradient(600px 320px at 20% -6%, rgba(216, 14, 28, 0.05), transparent 64%);
	}

	.entry-content p,
	.entry-content li { font-size: 1.02rem; line-height: 1.75; }

	.entry-content h2 { margin-top: 1.55em; margin-bottom: 0.6em; }
	.entry-content h2.wp-block-kadence-advancedheading {
		padding: 0.62em 0.85em;
		border-radius: 13px 3px 13px 3px;
		line-height: 1.25;
		overflow-wrap: anywhere;
	}
	.entry-content h3 { padding-left: 0.62em; margin-top: 1.5em; }

	/* Hero */
	.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
		> .kt-inside-inner-col > .wp-block-kadence-image:first-child img {
		max-width: 132px;
		border-radius: 22px;
	}
	.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
		> .kt-inside-inner-col > h2:first-of-type,
	.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
		> .kt-inside-inner-col > h2:first-of-type + p { text-align: center; }

	.home .entry-content .kt-has-3-columns { gap: 0.5rem; }
	@supports selector(:has(*)) {
		.home .entry-content .kt-has-3-columns .kt-inside-inner-col:has(> p) {
			min-height: 48px;
			width: 100%;
			padding: 0.62em 0.9em;
		}
	}
	.home .entry-content .kt-has-3-columns .kt-inside-inner-col > p { font-size: 0.9rem !important; }

	/* Buttons */
	.entry-content .kb-button,
	.entry-content .wp-block-button__link,
	.wp-block-kadence-advancedbtn a.kb-button {
		display: flex;
		width: 100%;
		min-height: 52px;
		align-items: center;
		justify-content: center;
		padding: 0.9em 1.3em !important;
		font-size: 1.02rem !important;
	}
	.entry-content .kb-button::after,
	.wp-block-kadence-advancedbtn a.kb-button::after { animation-duration: 6s; }

	/* Table */
	.entry-content table { font-size: 0.94rem; }
	.entry-content table th,
	.entry-content table td { padding: 0.78em 0.7em; overflow-wrap: anywhere; }
	.entry-content table td:first-child { width: 40%; }

	/* TOC */
	.wp-block-kadence-tableofcontents .kb-table-of-content-wrap,
	.wp-block-kadence-tableofcontents .kb-table-of-contents-wrap { padding: 1.1rem 1.15rem !important; }
	.kb-table-of-content-list a,
	.kb-table-of-contents-list a { display: block; padding: 9px 8px; line-height: 1.4; }
	.kb-table-of-contents-toggle,
	button.kb-table-of-contents-toggle {
		min-width: 44px; min-height: 44px;
		display: inline-flex !important; align-items: center; justify-content: center;
	}

	/* Nav targets */
	.mobile-navigation ul li a,
	.header-navigation ul li a { min-height: 46px; display: flex; align-items: center; }
	.menu-toggle,
	.drawer-toggle,
	button.menu-toggle-open,
	.mobile-toggle-open-container .menu-toggle-open {
		min-width: 46px; min-height: 46px;
		display: inline-flex !important; align-items: center; justify-content: center;
		border-radius: 10px;
	}
	.menu-toggle:hover,
	.drawer-toggle:hover { background: rgba(16, 24, 40, 0.05); }

	.entry-content img:not(.custom-logo) { border-radius: 10px; }
	.entry-content figure { margin-left: 0; margin-right: 0; }

	.nm-top {
		right: 12px;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		width: 44px; height: 44px;
	}
	.nm-progress { height: 2.5px; }

	.entry-content .kb-row-layout-wrap.kt-row-has-bg:not(:first-of-type) { border-radius: var(--nm-radius); }
}

/* --- Small phones ------------------------------------------------------ */
@media (max-width: 400px) {
	.entry-content h2.wp-block-kadence-advancedheading {
		padding: 0.58em 0.7em;
		font-size: 1.28rem !important;
	}
	.entry-content table th,
	.entry-content table td { padding: 0.68em 0.55em; font-size: 0.88rem; }
	.entry-content table td:first-child { width: 44%; }
	.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
		> .kt-inside-inner-col > .wp-block-kadence-image:first-child img { max-width: 112px; }
}

/* Cheaper compositing on touch devices */
@media (hover: none) and (pointer: coarse) {
	#masthead,
	.site-header,
	.site-header-wrap {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background-color: #ffffff !important;
	}
	.entry-content h2.wp-block-kadence-advancedheading:hover,
	.wp-block-kadence-infobox .kt-blocks-info-box-link-wrap:hover,
	.entry-content .kb-button:hover,
	.wp-block-kadence-advancedbtn a.kb-button:hover { transform: none; }
}

/* ==========================================================================
   13. MOTION / CONTRAST PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.entry-content .kb-button::after { display: none; }
}

@media (prefers-contrast: more) {
	:root {
		--nm-text-body: #333c4a;
		--nm-border: rgba(16, 24, 40, 0.22);
	}
}

@media print {
	body { background: #fff !important; color: #000 !important; }
	.nm-progress, .nm-top, #masthead, .site-footer { display: none !important; }
	.entry-content h2, .entry-content p, .entry-content li { color: #000 !important; }
	.entry-content h2.wp-block-kadence-advancedheading {
		background: none !important;
		color: #000 !important;
		box-shadow: none !important;
		border-bottom: 2px solid #000;
		border-radius: 0;
	}
}

/* ==========================================================================
   14. "NETMIRROR WEB" LANDING PAGE
   Scoped to .nmw so none of it leaks into the rest of the site. Mobile-first:
   grids collapse to one column by default and widen at larger viewports.
   ========================================================================== */

.nmw { --nmw-gap: clamp(0.75rem, 2vw, 1.1rem); }

/* Section headings here are plain h2s, not Kadence banner blocks */
.nmw h2 {
	font-size: var(--nm-h2);
	margin-top: 2.4em;
	margin-bottom: 0.7em;
	position: relative;
	padding-bottom: 0.4em;
}
.nmw h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: 3px;
	background: var(--nm-gradient);
}
.nmw h3 { font-size: var(--nm-h3); margin-top: 1.7em; }

/* --- Hero ------------------------------------------------------------- */
.nmw-hero {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--nm-border);
	border-radius: var(--nm-radius-lg);
	padding: clamp(1.5rem, 4vw, 3rem);
	margin-bottom: 2.5rem;
	background:
		radial-gradient(620px 300px at 14% -12%, rgba(216, 14, 28, 0.08), transparent 64%),
		radial-gradient(520px 280px at 90% 4%,  rgba(37, 84, 199, 0.07), transparent 66%),
		linear-gradient(180deg, #ffffff 0%, var(--nm-bg-soft) 100%);
	box-shadow: var(--nm-shadow);
}

.nmw-hero-inner {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

.nmw-eyebrow {
	display: inline-block;
	margin: 0 0 0.9rem;
	padding: 0.32em 0.85em;
	border-radius: 999px;
	background: var(--nm-accent-soft);
	border: 1px solid var(--nm-accent-line);
	color: var(--nm-accent-deep) !important;
	font-size: 0.76rem !important;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.nmw-brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.9rem;
}
.nmw-logo {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	border: 1px solid var(--nm-border);
	box-shadow: var(--nm-shadow-sm);
	flex: none;
}
.nmw-brand-name {
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--nm-text);
}
.nmw-brand-name em { color: var(--nm-accent); font-style: normal; }

.nmw-hero-title,
h1.nmw-hero-title {
	margin: 0 0 0.7em !important;
	padding: 0 !important;
	font-size: var(--nm-h1) !important;
	font-weight: 900 !important;
	letter-spacing: -0.03em;
	line-height: 1.14;
	color: var(--nm-text);
}
.nmw-hero-title::after { display: none; }

.nmw-lead {
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.16rem) !important;
	line-height: 1.75;
	color: var(--nm-text-body) !important;
	max-width: 62ch;
}

.nmw-hero-media { margin: 0; }
.nmw-hero-img {
	width: 100%;
	height: auto;
	border-radius: var(--nm-radius);
	filter: drop-shadow(0 18px 38px rgba(16, 24, 40, 0.16));
}

.nmw-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 1.6rem 0 1.4rem;
}

.nmw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.85em 1.9em;
	border-radius: 999px;
	font-weight: 800;
	text-decoration: none !important;
	background-image: none !important;
	transition: transform var(--nm-fast), box-shadow var(--nm-med), background var(--nm-fast);
}
.nmw-btn-primary {
	background: var(--nm-gradient);
	color: #fff !important;
	box-shadow: var(--nm-shadow-glow);
}
.nmw-btn-ghost {
	background: var(--nm-surface);
	border: 1px solid var(--nm-border-strong);
	color: var(--nm-text) !important;
	box-shadow: var(--nm-shadow-sm);
}
.nmw-btn:hover { transform: translateY(-2px); }
.nmw-btn-primary:hover { box-shadow: 0 14px 34px rgba(216, 14, 28, 0.34); }
.nmw-btn-ghost:hover { background: var(--nm-surface-2); }

.nmw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.nmw-chips li {
	margin: 0 !important;
	padding: 0.42em 0.9em;
	border-radius: 999px;
	background: var(--nm-surface);
	border: 1px solid var(--nm-border);
	font-size: 0.84rem;
	color: var(--nm-text-body);
	box-shadow: var(--nm-shadow-sm);
}
.nmw-chips li::before { display: none !important; }

/* --- Inline screenshots ----------------------------------------------- */
.nmw-shot { margin: 1.8rem 0; padding: 0; }
.nmw-shot-img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--nm-radius);
	border: 1px solid var(--nm-border);
	box-shadow: var(--nm-shadow);
}
.nmw-shot figcaption {
	margin-top: 0.7rem;
	font-size: 0.88rem;
	color: var(--nm-text-muted);
	line-height: 1.6;
}

.nmw-step-shot { margin: 0.85rem 0 0; padding: 0; }
.nmw-step-img {
	width: 100%;
	max-width: 340px;
	height: auto;
	display: block;
	border-radius: 10px;
	border: 1px solid var(--nm-border);
	box-shadow: var(--nm-shadow-sm);
}

/* --- Grids ------------------------------------------------------------ */
.nmw-grid {
	display: grid;
	gap: var(--nmw-gap);
	list-style: none !important;
	margin: 1.4rem 0 !important;
	padding: 0 !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nmw-grid > li::before { display: none !important; }

.nmw-grid-platforms > li {
	margin: 0 !important;
	padding: 0.9em 0.7em;
	text-align: center;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--nm-text);
	border-radius: var(--nm-radius);
	background: var(--nm-surface);
	border: 1px solid var(--nm-border);
	box-shadow: var(--nm-shadow-sm);
	transition: transform var(--nm-fast), border-color var(--nm-fast), box-shadow var(--nm-fast);
}
.nmw-grid-platforms > li:hover {
	transform: translateY(-3px);
	border-color: var(--nm-accent-line);
	box-shadow: var(--nm-shadow);
}

.nmw-grid-features { grid-template-columns: minmax(0, 1fr); }
.nmw-card {
	padding: clamp(1rem, 2.4vw, 1.5rem);
	border-radius: var(--nm-radius);
	background: var(--nm-surface);
	border: 1px solid var(--nm-border);
	box-shadow: var(--nm-shadow-sm);
	transition: transform var(--nm-med), border-color var(--nm-med), box-shadow var(--nm-med);
}
.nmw-card:hover {
	transform: translateY(-4px);
	border-color: var(--nm-accent-line);
	box-shadow: var(--nm-shadow);
}
.nmw-card h3 {
	margin: 0 0 0.5em !important;
	padding-left: 0 !important;
	font-size: 1.04rem !important;
	color: var(--nm-text);
}
.nmw-card h3::before { display: none !important; }
.nmw-card p { margin: 0 !important; font-size: 0.96rem !important; }

/* --- Device grid ------------------------------------------------------ */
.nmw-devices {
	display: grid;
	gap: var(--nmw-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 1.5rem 0;
}
.nmw-device {
	padding: clamp(1rem, 2.2vw, 1.4rem);
	border-radius: var(--nm-radius);
	background: var(--nm-surface);
	border: 1px solid var(--nm-border);
	box-shadow: var(--nm-shadow-sm);
	text-align: center;
	transition: transform var(--nm-med), border-color var(--nm-med), box-shadow var(--nm-med);
}
.nmw-device:hover {
	transform: translateY(-4px);
	border-color: var(--nm-accent-line);
	box-shadow: var(--nm-shadow);
}
.nmw-device-icon {
	width: 52px;
	height: 52px;
	object-fit: contain;
	margin: 0 auto 0.7rem;
	display: block;
}
.nmw-device h3 {
	margin: 0 0 0.45em !important;
	padding-left: 0 !important;
	font-size: 1rem !important;
	color: var(--nm-text);
}
.nmw-device h3::before { display: none !important; }
.nmw-device p { margin: 0 !important; font-size: 0.9rem !important; }

/* --- Mirror cards (real links) ---------------------------------------- */
.nmw-mirrors {
	display: grid;
	gap: var(--nmw-gap);
	grid-template-columns: minmax(0, 1fr);
	margin: 1.4rem 0;
}
a.nmw-mirror {
	display: block;
	padding: 1.2rem 1.3rem;
	border-radius: var(--nm-radius);
	background: var(--nm-surface);
	border: 1px solid var(--nm-border);
	box-shadow: var(--nm-shadow-sm);
	text-decoration: none !important;
	background-image: none !important;
	transition: transform var(--nm-fast), border-color var(--nm-fast), box-shadow var(--nm-fast);
}
a.nmw-mirror:hover {
	transform: translateY(-3px);
	border-color: var(--nm-accent-line);
	box-shadow: var(--nm-shadow);
}
.nmw-mirror-live {
	border-color: var(--nm-accent-line);
	background: linear-gradient(160deg, rgba(216, 14, 28, 0.06), var(--nm-surface) 62%);
}
.nmw-tag {
	display: inline-block;
	padding: 0.24em 0.7em;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--nm-gradient);
	color: #fff;
}
.nmw-tag-alt { background: var(--nm-surface-3); color: var(--nm-text-body); }
.nmw-mirror .nmw-mirror-url {
	display: block;
	margin: 0.6rem 0 0.2rem;
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--nm-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: -0.01em;
}
.nmw-mirror .nmw-mirror-note {
	display: block;
	font-size: 0.88rem;
	color: var(--nm-text-body);
}
.nmw-mirror-go {
	display: inline-block;
	margin-top: 0.8rem;
	font-weight: 800;
	font-size: 0.9rem;
	color: var(--nm-accent);
	transition: transform var(--nm-fast);
}
a.nmw-mirror:hover .nmw-mirror-go { transform: translateX(3px); }

/* --- Retired addresses ------------------------------------------------ */
.nmw-dead {
	list-style: none !important;
	margin: 1.2rem 0 !important;
	padding: 0 !important;
	display: grid;
	gap: 0.5rem;
}
.nmw-dead li {
	margin: 0 !important;
	padding: 0.7em 1em;
	border-radius: var(--nm-radius-sm);
	background: var(--nm-bg-soft);
	border: 1px solid var(--nm-border);
	font-size: 0.92rem;
	color: var(--nm-text-body);
}
.nmw-dead li::before { display: none !important; }
.nmw-dead span {
	display: inline-block;
	min-width: 8.5em;
	margin-right: 0.6em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 700;
	color: var(--nm-text-muted);
	text-decoration: line-through;
}

/* --- Steps ------------------------------------------------------------ */
.nmw-steps {
	counter-reset: nmw-step;
	list-style: none !important;
	margin: 1.1rem 0 !important;
	padding: 0 !important;
	display: grid;
	gap: 0.7rem;
}
.nmw-steps > li {
	counter-increment: nmw-step;
	position: relative;
	margin: 0 !important;
	padding: 1rem 1.1rem 1rem 3.4rem;
	border-radius: var(--nm-radius);
	background: var(--nm-surface);
	border: 1px solid var(--nm-border);
	box-shadow: var(--nm-shadow-sm);
	font-size: 0.98rem;
}
.nmw-steps > li::before {
	content: counter(nmw-step, decimal-leading-zero);
	position: absolute;
	left: 1rem;
	top: 1rem;
	width: 1.8em;
	height: 1.8em;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: var(--nm-gradient);
	color: #fff;
	font-size: 0.76rem;
	font-weight: 800;
}

/* --- Comparison table ------------------------------------------------- */
.nmw-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.4rem 0; }
.nmw-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--nm-surface);
	border: 1px solid var(--nm-border);
	border-radius: var(--nm-radius);
	overflow: hidden;
	box-shadow: var(--nm-shadow);
}
.nmw-table th,
.nmw-table td {
	padding: 0.85em 1em;
	border-bottom: 1px solid var(--nm-border);
	text-align: left;
	font-size: 0.95rem;
}
.nmw-table thead th { background: var(--nm-surface-2); color: var(--nm-text); font-weight: 800; }
.nmw-table thead th:nth-child(2) { color: var(--nm-accent-deep); }
.nmw-table tbody td:first-child { color: var(--nm-text); font-weight: 650; }
.nmw-table tbody tr:last-child td { border-bottom: 0; }
.nmw-table tbody tr:nth-child(even) { background: rgba(16, 24, 40, 0.018); }

/* --- Callouts --------------------------------------------------------- */
.nmw-note {
	margin: 1.5rem 0;
	padding: 1.1rem 1.3rem;
	border-radius: var(--nm-radius);
	border: 1px solid var(--nm-border);
	border-left: 3px solid var(--nm-accent);
	background: var(--nm-gradient-soft);
	color: var(--nm-text-body);
	font-size: 0.97rem;
	line-height: 1.7;
}
.nmw-note strong { color: var(--nm-text); }
.nmw-note-warn {
	border-left-color: #d98b06;
	background: linear-gradient(135deg, rgba(217, 139, 6, 0.10), rgba(217, 139, 6, 0.02));
}

/* --- Troubleshooting definition list ---------------------------------- */
.nmw-faq-list { margin: 1.3rem 0; }
.nmw-faq-list dt {
	margin-top: 1.1rem;
	font-weight: 800;
	color: var(--nm-text);
	font-size: 1.02rem;
}
.nmw-faq-list dd {
	margin: 0.35rem 0 0;
	padding-left: 0.9rem;
	border-left: 2px solid var(--nm-border-strong);
	color: var(--nm-text-body);
	line-height: 1.75;
}

/* --- Tips ------------------------------------------------------------- */
.nmw-tips { margin: 1.2rem 0 !important; }
.nmw-tips li { margin-bottom: 0.6em !important; }
.nmw-tips strong { color: var(--nm-text); }

/* --- FAQ accordion (no JS) -------------------------------------------- */
.nmw-faq { display: grid; gap: 0.6rem; margin: 1.4rem 0; }
.nmw-faq details {
	border-radius: var(--nm-radius);
	background: var(--nm-surface);
	border: 1px solid var(--nm-border);
	box-shadow: var(--nm-shadow-sm);
	overflow: hidden;
	transition: border-color var(--nm-fast), box-shadow var(--nm-fast);
}
.nmw-faq details[open] { border-color: var(--nm-accent-line); box-shadow: var(--nm-shadow); }
.nmw-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 1rem 3rem 1rem 1.2rem;
	position: relative;
	font-weight: 700;
	color: var(--nm-text);
	min-height: 48px;
	display: flex;
	align-items: center;
	transition: background var(--nm-fast);
}
.nmw-faq summary::-webkit-details-marker { display: none; }
.nmw-faq summary:hover { background: var(--nm-bg-soft); }
.nmw-faq summary::after {
	content: "";
	position: absolute;
	right: 1.2rem;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--nm-accent);
	border-bottom: 2px solid var(--nm-accent);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--nm-med);
}
.nmw-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.nmw-faq details p {
	margin: 0 !important;
	padding: 0 1.2rem 1.1rem;
	color: var(--nm-text-body) !important;
	line-height: 1.75;
}

/* --- Closing call to action ------------------------------------------- */
.nmw-final-cta {
	margin: 2.5rem 0 1rem;
	padding: clamp(1.4rem, 3vw, 2.2rem);
	border-radius: var(--nm-radius-lg);
	border: 1px solid var(--nm-border);
	text-align: center;
	background:
		radial-gradient(520px 220px at 50% 0%, rgba(216, 14, 28, 0.08), transparent 66%),
		linear-gradient(180deg, #ffffff 0%, var(--nm-bg-soft) 100%);
	box-shadow: var(--nm-shadow);
}
.nmw-final-title {
	margin: 0 0 0.35rem !important;
	font-size: clamp(1.25rem, 1.1rem + 1vw, 1.7rem) !important;
	font-weight: 900;
	color: var(--nm-text) !important;
}
.nmw-final-sub { margin: 0 0 1.3rem !important; font-size: 0.96rem !important; }
.nmw-cta-center { justify-content: center; }

/* --- Image sizing overrides -------------------------------------------
   The theme sets a broad `.entry-content img:not(.custom-logo):not(...)` rule
   at (0,3,1) specificity, which beat the plain classes and stretched 300px
   screenshots to full column width. These are deliberately specific enough to
   win without !important. Widths stay definite, never `auto`: these images are
   lazy-loaded and an auto width collapses them before the bytes arrive. */
.entry-content .nmw .nmw-step-shot .nmw-step-img {
	width: 100%;
	max-width: 340px;
	height: auto;
}
.entry-content .nmw .nmw-shot .nmw-shot-img {
	max-width: 1024px;
	width: 100%;
	height: auto;
}
.entry-content .nmw .nmw-hero-media .nmw-hero-img {
	max-width: 985px;
	width: 100%;
	height: auto;
}
.entry-content .nmw .nmw-device .nmw-device-icon,
.entry-content .nmw .nmw-brand .nmw-logo {
	max-width: 58px;
	width: 58px;
	height: 58px;
}

/* --- Wider viewports -------------------------------------------------- */
@media (min-width: 600px) {
	.nmw-grid-platforms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.nmw-grid-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nmw-mirrors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nmw-btn { min-height: 48px; }
}

@media (min-width: 720px) {
	.nmw-hero-inner { grid-template-columns: 1.05fr 0.95fr; }
	.nmw-devices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.nmw-logo, .nmw-device-icon { width: 58px; height: 58px; }
}

@media (min-width: 1000px) {
	.nmw-grid-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Small screens ----------------------------------------------------
   This page is hand-written HTML with no Kadence row wrapper, so it has to
   carry its own gutter — the site-wide mobile rules strip padding from
   .entry-content and hand the gutter to the row instead. */
@media (max-width: 1024px) {
	.nmw { padding-left: var(--nm-gutter); padding-right: var(--nm-gutter); }
}

@media (max-width: 719px) {
	.nmw-hero-inner { display: flex; flex-direction: column; }
	.nmw-hero-media { order: -1; margin-bottom: 0.25rem; }
	.entry-content .nmw .nmw-step-shot .nmw-step-img { max-width: 100%; }
	.entry-content .nmw .nmw-device .nmw-device-icon,
	.entry-content .nmw .nmw-brand .nmw-logo { max-width: 52px; width: 52px; height: 52px; }
}

@media (max-width: 767px) {
	.nmw-cta-row { flex-direction: column; }
	.nmw-btn { width: 100%; }
	.nmw-grid-platforms > li { font-size: 0.88rem; padding: 0.85em 0.5em; }
	.nmw-steps > li { padding: 0.95rem 0.9rem 0.95rem 3.1rem; }
	.nmw-mirror .nmw-mirror-url { font-size: 1.18rem; }
	.nmw-dead span { min-width: 0; display: block; margin-bottom: 0.15em; }
	.nmw-faq summary { padding: 0.9rem 2.6rem 0.9rem 1rem; }
	.nmw-note { padding: 1rem 1.1rem; }
}

@media (hover: none) and (pointer: coarse) {
	.nmw-card:hover,
	.nmw-device:hover,
	.nmw-grid-platforms > li:hover,
	a.nmw-mirror:hover,
	.nmw-btn:hover { transform: none; }
}

/* ==========================================================================
   16. LIGHT-THEME RECONCILIATION
   The content was authored against a black content band, so a lot of copy is
   tagged palette9 (white). On the white canvas that text disappears. These are
   the two places the inversion needs correcting.
   ========================================================================== */

/*
 * 1. palette9 text.
 *    Default it to readable dark, then hand white back to the only things that
 *    actually sit on a dark/red surface: the red section banners.
 */
.entry-content .has-theme-palette-9-color,
.entry-content .has-theme-palette9-color {
	color: var(--nm-text-body) !important;
}
.entry-content h1.has-theme-palette-9-color,
.entry-content h2.has-theme-palette-9-color,
.entry-content h3.has-theme-palette-9-color,
.entry-content h4.has-theme-palette-9-color {
	color: var(--nm-text) !important;
}
/* (0,3,1) — beats the heading rule above, so the red banners stay white */
.entry-content h2.wp-block-kadence-advancedheading,
.entry-content h2.wp-block-kadence-advancedheading.has-theme-palette-9-color,
.entry-content h2.wp-block-kadence-advancedheading .has-theme-palette-9-color {
	color: #ffffff !important;
}

/* Feature pills sit on a white chip, so their palette9 text must be dark */
.home .entry-content .kt-has-3-columns .kt-inside-inner-col > p,
.home .entry-content .kt-has-3-columns .kt-inside-inner-col > p.has-theme-palette-9-color {
	color: var(--nm-text) !important;
}

/* Hero headline + intro (palette9) on the white band */
.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
	> .kt-inside-inner-col > h2:first-of-type.has-theme-palette-9-color {
	color: var(--nm-text) !important;
	-webkit-text-fill-color: var(--nm-text) !important;
}
.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
	> .kt-inside-inner-col > h2:first-of-type + p.has-theme-palette-9-color {
	color: var(--nm-text-body) !important;
}

/*
 * 2. Header dropdowns.
 *    Kadence paints the dropdown panel with palette3 (dark) and its links with
 *    palette8 (white). The site-wide "nav links are dark" rule was also hitting
 *    those links, giving dark-on-dark. Scope the dark colour to the top level
 *    and keep dropdown links light.
 */
.header-navigation ul ul.sub-menu li.menu-item > a,
.header-navigation .header-menu-container ul ul li.menu-item > a,
.header-navigation ul ul.submenu li.menu-item > a {
	color: #ffffff !important;
}
.header-navigation ul ul.sub-menu li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
	background-color: rgba(255, 255, 255, 0.12) !important;
	color: #ffffff !important;
}

/* The mobile drawer is light, so its links need the dark treatment back */
.mobile-navigation ul li a,
.mobile-drawer .drawer-inner .mobile-navigation ul li a {
	color: var(--nm-text) !important;
}
.mobile-drawer .drawer-inner,
#mobile-drawer .drawer-inner,
.popup-drawer .drawer-inner {
	background-color: #ffffff !important;
	color: var(--nm-text-body);
}

/* Inline emphasis inside the red section banners must stay white */
.entry-content h2.wp-block-kadence-advancedheading strong,
.entry-content h2.wp-block-kadence-advancedheading b,
.entry-content h2.wp-block-kadence-advancedheading a,
.entry-content h2.wp-block-kadence-advancedheading em,
.entry-content h2.wp-block-kadence-advancedheading span { color: #ffffff !important; }

/* The footer copyright is white via a customizer typography setting */
.site-footer, .site-footer p, .site-footer .footer-html,
#colophon, #colophon p, #colophon .footer-html,
.site-footer-row-container-inner p {
	color: var(--nm-text-body) !important;
}

/* ==========================================================================
   17. SECTION HEADINGS — light treatment
   17 full-width solid red bars carry as much visual weight on white as the
   dark build did. Keep the brand cue (a red accent) but let the page breathe:
   dark heading text, a gradient accent bar, and a hairline rule underneath.
   Kadence paints #940606 from its per-block CSS, hence the !important.
   ========================================================================== */

.entry-content h2.wp-block-kadence-advancedheading {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--nm-text) !important;
	padding: 0.1em 0 0.5em 0.75em !important;
	border-radius: 0 !important;
	border-bottom: 1px solid var(--nm-border);
	box-shadow: none !important;
	text-shadow: none !important;
	overflow: visible;
	transition: none;
}

/* Gradient accent bar down the leading edge */
.entry-content h2.wp-block-kadence-advancedheading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.08em;
	bottom: 0.55em;
	width: 4px;
	border-radius: 4px;
	background: var(--nm-gradient);
	box-shadow: none;
}

/* No sheen overlay on a transparent heading */
.entry-content h2.wp-block-kadence-advancedheading::after { display: none !important; }

/* Nothing should slide on hover any more */
.entry-content h2.wp-block-kadence-advancedheading:hover {
	transform: none;
	box-shadow: none !important;
}

/* Inline emphasis inherits the heading colour again */
.entry-content h2.wp-block-kadence-advancedheading strong,
.entry-content h2.wp-block-kadence-advancedheading b,
.entry-content h2.wp-block-kadence-advancedheading em,
.entry-content h2.wp-block-kadence-advancedheading span {
	color: var(--nm-text) !important;
}
.entry-content h2.wp-block-kadence-advancedheading a { color: var(--nm-accent) !important; }

@media (max-width: 767px) {
	.entry-content h2.wp-block-kadence-advancedheading {
		padding: 0.1em 0 0.45em 0.65em !important;
		border-radius: 0 !important;
	}
}
@media (max-width: 400px) {
	.entry-content h2.wp-block-kadence-advancedheading {
		padding: 0.1em 0 0.42em 0.6em !important;
		font-size: 1.3rem !important;
	}
}

/* Print: the accent bar is meaningless on paper */
@media print {
	.entry-content h2.wp-block-kadence-advancedheading::before { display: none; }
}

/* The palette9 rule earlier in this file is (0,3,1) and forces white; match it
   here so the light heading treatment actually wins. */
.entry-content h2.wp-block-kadence-advancedheading.has-theme-palette-9-color,
.entry-content h2.wp-block-kadence-advancedheading.has-text-color {
	color: var(--nm-text) !important;
}
.entry-content h2.wp-block-kadence-advancedheading.has-theme-palette-9-color strong,
.entry-content h2.wp-block-kadence-advancedheading.has-theme-palette-9-color span,
.entry-content h2.wp-block-kadence-advancedheading.has-theme-palette-9-color b {
	color: var(--nm-text) !important;
}

/* ==========================================================================
   18. LIGHT THEME — contrast + gradient fallbacks
   ========================================================================== */

/* --nm-text-muted at #6e7889 measured 4.23–4.46:1 on white and on the tinted
   surface — just under AA. Nudged darker so captions and the retired-address
   list pass everywhere they are used. */
:root { --nm-text-muted: #5f6978; }

/*
 * Gradient chips/buttons declare `background: <gradient>`, which resets
 * background-color to transparent. If the gradient ever fails to paint (older
 * browser, forced-colors, or a print stylesheet) the white label would land on
 * a white page. Declare a solid colour underneath as the floor.
 */
.nmw-btn-primary,
.nmw-tag:not(.nmw-tag-alt),
.nmw-steps > li::before,
.entry-content .kb-button,
.entry-content .wp-block-button__link,
.wp-block-kadence-advancedbtn a.kb-button {
	background-color: var(--nm-accent-deep) !important;
}

/* Forced-colors / high-contrast mode: let the OS palette take over cleanly */
@media (forced-colors: active) {
	.nmw-btn, .nmw-tag, .entry-content .kb-button { forced-color-adjust: auto; }
}

/* The Backup chip is deliberately a light neutral, not the red gradient */
.nmw-tag.nmw-tag-alt {
	background-color: var(--nm-surface-3) !important;
	background-image: none !important;
	color: var(--nm-text-body) !important;
}

/* ==========================================================================
   19. "NETMIRROR WEB" — container + reading measure
   This page is hand-written HTML, so unlike the rest of the site it has no
   Kadence row to constrain it. The theme's page layout is "fullwidth", so on
   a 1920px screen the copy ran the entire width at ~225 characters per line.
   Give it a container, and hold running prose to a readable measure while
   structural blocks (hero, grids, table, FAQ) use the full container.
   ========================================================================== */

.nmw {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

/* ~72 characters is the comfortable range for body copy */
.nmw > p,
.nmw > h2,
.nmw > h3,
.nmw > ol,
.nmw > ul:not(.nmw-grid),
.nmw > .nmw-note,
.nmw > .nmw-faq-list {
	max-width: var(--nm-measure);
}

/* Captions sit under full-width media, so match the media, not the prose */
.nmw-shot figcaption { max-width: var(--nm-measure); }

/*
 * Below the container width the max-width does nothing useful and would fight
 * the mobile gutter, so release it.
 */
@media (max-width: 1024px) {
	.nmw { max-width: none; }
	.nmw > p,
	.nmw > h2,
	.nmw > h3,
	.nmw > ol,
	.nmw > ul:not(.nmw-grid),
	.nmw > .nmw-note,
	.nmw > .nmw-faq-list { max-width: none; }
}

/* ==========================================================================
   20. SITE-WIDE CONSISTENCY
   The hand-built page and the Kadence-built pages had drifted apart:
     - section headings were centred on the Kadence pages, left-aligned here
     - body copy ran 108–121 characters per line there vs 78 here
     - containers were 1080px vs 1120px
   Unify all three so every page reads as one system.
   ========================================================================== */

/* --- 1. One container width ------------------------------------------- */
.nmw { max-width: 1080px; }

/* --- 2. Section headings: left-aligned, so the accent bar makes sense -- */
.entry-content .kt-inside-inner-col > h2.wp-block-kadence-advancedheading,
.entry-content h2.wp-block-kadence-advancedheading {
	text-align: left !important;
}

/* The homepage hero is a centred stack (icon, title, intro, pills) —
   that layout is deliberate, so it keeps its centring. */
.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
	> .kt-inside-inner-col > h2:first-of-type {
	text-align: center !important;
}

/* --- 3. One reading measure ------------------------------------------- */
@media (min-width: 1025px) {
	.entry-content .kt-inside-inner-col > p,
	.entry-content .kt-inside-inner-col > ol,
	.entry-content .kt-inside-inner-col > ul:not(.kb-table-of-content-list):not(.kb-table-of-contents-list),
	.entry-content .kt-inside-inner-col > h2,
	.entry-content .kt-inside-inner-col > h3,
	.entry-content .kt-inside-inner-col > h4 {
		max-width: var(--nm-measure);
	}

	/* Centred hero copy stays centred while respecting the same measure */
	.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
		> .kt-inside-inner-col > h2:first-of-type,
	.home .entry-content .kt-has-2-columns > .wp-block-kadence-column:first-child
		> .kt-inside-inner-col > h2:first-of-type + p {
		max-width: var(--nm-measure);
		margin-left: auto;
		margin-right: auto;
	}
}

/*
 * Tables, cards, images, buttons and nested rows are deliberately NOT capped —
 * wide media against a narrower text column is the point of the layout.
 */

/* The Kadence row carries 24px of inner padding, so its content starts 24px
   in from the 1080px container. Match it here or the two page types sit on
   different left edges. */
@media (min-width: 1025px) {
	.nmw { padding-left: 24px; padding-right: 24px; }
}

/* ==========================================================================
   21. LAYOUT BALANCE
   Left-aligning the 704px reading column inside a 1080px centred container
   left 439px of space on the left and 767px on the right — the page read as
   if it were shoved to one side. Centre the reading column instead, so the
   wide blocks bleed out symmetrically around it.

   The rule from here on:
     reading column (text, steps, FAQ, callouts) → --nm-measure, centred
     wide blocks (hero, table, grids, media)     → full container
   ========================================================================== */

@media (min-width: 1025px) {

	/* --- NetMirror Web page ------------------------------------------- */
	.nmw > p,
	.nmw > h2,
	.nmw > h3,
	.nmw > ol,
	.nmw > ul:not(.nmw-grid),
	.nmw > .nmw-note,
	.nmw > .nmw-faq-list,
	.nmw > .nmw-faq,
	.nmw > .nmw-mirrors,
	.nmw-shot figcaption {
		max-width: var(--nm-measure);
		margin-left: auto;
		margin-right: auto;
	}

	/* Step cards are part of the reading column, and so is the FAQ, so they
	   now share its width instead of sitting at two different sizes. */
	.nmw-steps,
	.nmw-dead { max-width: var(--nm-measure); }

	/* --- Kadence-built pages ------------------------------------------ */
	.entry-content .kt-inside-inner-col > p,
	.entry-content .kt-inside-inner-col > ol,
	.entry-content .kt-inside-inner-col > ul:not(.kb-table-of-content-list):not(.kb-table-of-contents-list),
	.entry-content .kt-inside-inner-col > h2,
	.entry-content .kt-inside-inner-col > h3,
	.entry-content .kt-inside-inner-col > h4 {
		max-width: var(--nm-measure);
		margin-left: auto;
		margin-right: auto;
	}
}

/* Their base rules use `margin: X 0 !important`, which zeroes the auto side
   margins set above — restore centring at the same weight. */
@media (min-width: 1025px) {
	.nmw-steps,
	.nmw-dead,
	.nmw-tips,
	.nmw-faq-list {
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: var(--nm-measure);
	}
}

/* ==========================================================================
   22. SUB-HEADING ACCENT BAR
   The bar was absolutely positioned at left:0 of the heading box. That only
   works for left-aligned text — inside the feature cards the headings are
   centred, so the bar sat 120px away from the words and read as a stray mark.
   Make it an inline marker instead: it now travels with the text at any
   alignment, and needs no assumptions about the layout.
   ========================================================================== */

.entry-content h3 {
	position: static;
	padding-left: 0;
}

.entry-content h3::before {
	content: "";
	position: static;
	display: inline-block;
	width: 3px;
	height: 0.82em;
	margin-right: 0.5em;
	vertical-align: -0.06em;
	border-radius: 3px;
	background: var(--nm-gradient);
	background-color: var(--nm-accent);
}

/*
 * Feature cards: the heading and an 8-line paragraph were both centred, which
 * leaves the body copy ragged on both edges and hard to scan. Left-align the
 * card contents so they match the rest of the site's reading rhythm.
 * :has() keeps this to wrappers that actually hold a heading, so the hero
 * pills — which are centred single words — are untouched.
 */
@supports selector(:has(*)) {
	.entry-content .kt-inside-inner-col:has(> h3) > h3,
	.entry-content .kt-inside-inner-col:has(> h3) > p {
		text-align: left;
	}
}

/* The NetMirror Web page builds its own card headings and already suppresses
   the marker, so nothing changes there. */
.nmw-card h3::before,
.nmw-device h3::before { display: none !important; }

/*
 * Feature cards are Kadence Infobox blocks; Kadence centres the whole text
 * block via .kt-infobox-textcontent. A centred 8-line paragraph is ragged on
 * both edges and hard to scan, so align the card contents left to match the
 * reading rhythm used everywhere else on the site.
 */
.entry-content .wp-block-kadence-infobox .kt-infobox-textcontent,
.entry-content .kt-infobox-textcontent {
	text-align: left !important;
}
.entry-content .kt-infobox-textcontent .kt-blocks-info-box-title,
.entry-content .kt-infobox-textcontent .kt-blocks-info-box-text {
	text-align: left !important;
}

/* ==========================================================================
   23. THREE LAYOUT FIXES
   ========================================================================== */

/* --- 1. Spec table ----------------------------------------------------
   A two-column table stretched to the full 1032px container, with both
   columns centred, left the label and the value floating far apart with a
   void between them. It belongs in the reading column, aligned left. */
.entry-content .wp-block-table,
.entry-content .wp-block-table table,
.entry-content table {
	max-width: var(--nm-measure);
	margin-left: auto;
	margin-right: auto;
}
.entry-content table th,
.entry-content table td,
.entry-content table th p,
.entry-content table td p {
	text-align: left !important;
}
/* Give the label column a sensible share now the table is narrower */
.entry-content table td:first-child,
.entry-content table th:first-child { width: 42%; }

/* --- 2. Table of contents ---------------------------------------------
   The TOC sat inside a Kadence row that my "rows with a background become
   cards" rule had already turned into a card, so a 482px white card was
   floating inside a 1032px grey one. Drop the outer card and let the TOC
   itself be the single card, at the reading measure. */
@supports selector(:has(*)) {
	/* .kt-row-has-bg is needed to match the (0,4,0) specificity of the
	   "rows with a background become cards" rule above. */
	.entry-content .kb-row-layout-wrap.kt-row-has-bg:has(.wp-block-kadence-tableofcontents),
	.entry-content .kb-row-layout-wrap:has(.wp-block-kadence-tableofcontents) {
		background-color: transparent !important;
		background-image: none !important;
		border: 0 !important;
		box-shadow: none !important;
	}
}
.wp-block-kadence-tableofcontents .kb-table-of-content-wrap,
.wp-block-kadence-tableofcontents .kb-table-of-contents-wrap {
	width: 100%;
	max-width: var(--nm-measure);
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --- 3. Feature cards: equal height ------------------------------------
   Cards in the same row measured 421 / 391 / 361 / 300px, so the grid ended
   ragged. Stretch each column and let the card fill it. */
.entry-content .kt-row-column-wrap { align-items: stretch; }

@supports selector(:has(*)) {
	.entry-content .wp-block-kadence-column:has(.wp-block-kadence-infobox),
	.entry-content .wp-block-kadence-column:has(.wp-block-kadence-infobox) > .kt-inside-inner-col {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
}

.entry-content .wp-block-kadence-infobox,
.entry-content .wp-block-kadence-infobox .kt-blocks-info-box-link-wrap,
.entry-content .wp-block-kadence-infobox .kt-info-box-wrap {
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* Push nothing to the bottom — just let the text block take the slack so the
   cards end level without the copy floating away from the heading. */
.entry-content .wp-block-kadence-infobox .kt-infobox-textcontent { flex: 1 1 auto; }

/* ==========================================================================
   24. INFOBOX ICONS + CLICKABLE TOC HEADER
   ========================================================================== */

/*
 * The feature cards DO have icons — film, search, video SVGs — but they draw
 * with currentColor, which the old palette set to white. On the white card
 * they were invisible, so the top of every card read as dead space.
 */
.entry-content .wp-block-kadence-infobox .kadence-info-box-icon-container,
.entry-content .wp-block-kadence-infobox .kadence-info-box-icon-inner-container,
.entry-content .wp-block-kadence-infobox .kb-svg-icon-wrap,
.entry-content .wp-block-kadence-infobox .kt-info-svg-icon,
.entry-content .wp-block-kadence-infobox .kt-blocks-info-box-media svg {
	color: var(--nm-accent) !important;
	stroke: currentColor;
}
.entry-content .wp-block-kadence-infobox .kt-blocks-info-box-media svg[fill]:not([fill="none"]) {
	fill: currentColor;
}

/* Now that the icon reads, tighten the space it reserves so the heading is
   not pushed so far down the card. */
.entry-content .wp-block-kadence-infobox .kt-blocks-info-box-media-container {
	margin-bottom: 0.35rem;
}
.entry-content .wp-block-kadence-infobox .kt-blocks-info-box-media {
	padding: 0 !important;
}
.entry-content .wp-block-kadence-infobox .kadence-info-box-icon-container,
.entry-content .wp-block-kadence-infobox .kb-svg-icon-wrap {
	width: 54px !important;
	height: 54px !important;
	font-size: 54px !important;
}

/* Subtle tinted plate behind the icon so it reads as a deliberate element */
.entry-content .wp-block-kadence-infobox .kadence-info-box-icon-inner-container {
	background: var(--nm-accent-soft);
	border-radius: 14px;
	padding: 10px !important;
	width: auto !important;
	height: auto !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- Table of contents: whole header is the control -------------------- */
.wp-block-kadence-tableofcontents .kb-table-of-contents-title-wrap {
	cursor: pointer;
	border-radius: var(--nm-radius-sm);
	transition: background-color var(--nm-fast);
	user-select: none;
}
.wp-block-kadence-tableofcontents .kb-table-of-contents-title-wrap:hover {
	background-color: var(--nm-accent-soft);
}
/* Keep the real button's focus ring visible for keyboard users */
.wp-block-kadence-tableofcontents .kb-table-of-contents-icon-trigger:focus-visible {
	outline: 2px solid var(--nm-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   25. ICON CLIPPING + TOC ARROW
   ========================================================================== */

/*
 * Icons were being cut off.
 * Kadence sizes .kt-blocks-info-box-media to the icon (54x54) and sets
 * overflow:hidden on it. The tinted plate added in the previous pass is
 * 74x74 (54 + 10px padding each side), so it overflowed that box and got
 * cropped — the icons appeared sliced across the top.
 * Let the media wrapper size itself to its contents instead of clipping them.
 */
.entry-content .wp-block-kadence-infobox .kt-blocks-info-box-media {
	overflow: visible !important;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.entry-content .wp-block-kadence-infobox .kt-blocks-info-box-media-container {
	overflow: visible !important;
	height: auto !important;
	display: flex;
}
.entry-content .wp-block-kadence-infobox .kadence-info-box-icon-container {
	overflow: visible !important;
	width: auto !important;
	height: auto !important;
}
/* Keep the glyph itself at a fixed size inside the plate */
.entry-content .wp-block-kadence-infobox .kb-svg-icon-wrap,
.entry-content .wp-block-kadence-infobox .kt-blocks-info-box-media svg {
	width: 40px !important;
	height: 40px !important;
	font-size: 40px !important;
	flex: none;
}
.entry-content .wp-block-kadence-infobox .kadence-info-box-icon-inner-container {
	padding: 11px !important;
	line-height: 0;
}

/*
 * The TOC disclosure arrow inherits white from the old palette, so it was
 * invisible against the header. Colour it, and give it a visible hover state
 * now that the whole header is the control.
 */
.wp-block-kadence-tableofcontents .kb-table-of-contents-icon-trigger,
.wp-block-kadence-tableofcontents .kb-table-of-contents-icon-trigger *,
.wp-block-kadence-tableofcontents .kb-table-of-contents-icon-trigger svg,
.wp-block-kadence-tableofcontents .kb-table-of-contents-icon-trigger::before,
.wp-block-kadence-tableofcontents .kb-table-of-contents-icon-trigger::after {
	color: var(--nm-accent) !important;
	border-color: var(--nm-accent) !important;
	opacity: 1 !important;
}
.wp-block-kadence-tableofcontents .kb-table-of-contents-icon-trigger svg {
	stroke: currentColor;
	fill: currentColor;
	width: 18px;
	height: 18px;
}
.wp-block-kadence-tableofcontents .kb-table-of-contents-title-wrap:hover
	.kb-table-of-contents-icon-trigger {
	color: var(--nm-accent-deep) !important;
}

/* ==========================================================================
   26. SCROLL PERFORMANCE
   Three things were forcing a full-viewport repaint on every scroll frame:

     1. body had `background-attachment: fixed` with two large radial
        gradients. A fixed background cannot be composited, so the browser
        repainted both gradients each frame — over a 20,000px document.
     2. The sticky header used backdrop-filter: blur(16px), which re-blurs
        whatever is behind it on every frame.
     3. The scroll progress bar animated `width`, which triggers layout.

   Same look, but the work now happens on the compositor.
   ========================================================================== */

/* --- 1. Move the page tint to a fixed, composited layer ---------------- */
body {
	background-image: none !important;
	background-attachment: scroll !important;
	background-color: var(--nm-bg);
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: var(--nm-bg);
	background-image:
		radial-gradient(900px 460px at 12% -10%, rgba(216, 14, 28, 0.045), transparent 62%),
		radial-gradient(760px 420px at 92% 2%,  rgba(37, 84, 199, 0.040), transparent 64%);
	background-repeat: no-repeat;
}

/* --- 2. Sticky header: solid instead of blurred ------------------------ */
#masthead,
.site-header,
.site-header-wrap {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	background-color: rgba(255, 255, 255, 0.97) !important;
}
#masthead.nm-scrolled {
	background-color: #ffffff !important;
}

/* The TOC card had a blur too and it sits mid-page */
.wp-block-kadence-tableofcontents .kb-table-of-content-wrap,
.wp-block-kadence-tableofcontents .kb-table-of-contents-wrap {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* --- 3. Progress bar drives transform, not width ----------------------- */
.nm-progress {
	width: 100% !important;
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
	transition: none;
}

/* NOTE: deliberately NOT adding will-change/transform to #masthead.
   It would make the sticky header a containing block for any fixed-position
   descendant (the dropdown panels), and Chrome already promotes sticky
   elements to their own layer anyway. */

/* The back-to-top button is fixed, so its blur is re-composited over the
   scrolling page every frame. It is only 46px, but a solid fill costs nothing
   and looks the same on a white page. */
.nm-top {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	background: #ffffff;
}
.nm-top:hover { background: var(--nm-accent); }

/* ==========================================================================
   27. IMAGE SIZE SANITY
   A portrait screenshot blown up to the full column reads as a blurry mess.
   Nothing should ever render wider than its own pixel width — the inline
   max-width emitted per image handles that, and these cap the odd shapes.
   ========================================================================== */

.nmw-shot-narrow { text-align: center; }
.entry-content .nmw .nmw-shot-narrow .nmw-shot-img {
	max-width: 300px !important;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.nmw-shot-narrow figcaption { text-align: center; }

/* Belt and braces: an image is never scaled past its intrinsic size */
.entry-content .nmw img { image-rendering: auto; }

/* ==========================================================================
   28. DOWNLOAD CARDS
   The old markup reused the mirror cards, which set the title in a monospace
   face (right for a domain like net27.cc, wrong for "Android") and carried no
   icon. This is a purpose-built card: platform icon, name, meta line, one
   sentence, and a button.
   ========================================================================== */

.nmw-dl-grid {
	display: grid;
	gap: var(--nmw-gap, 1rem);
	grid-template-columns: minmax(0, 1fr);
	margin: 1.6rem 0;
}

.nmw-dl {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: clamp(1.1rem, 2.2vw, 1.5rem);
	border-radius: var(--nm-radius);
	background: var(--nm-surface);
	border: 1px solid var(--nm-border);
	box-shadow: var(--nm-shadow-sm);
	text-decoration: none !important;
	background-image: none !important;
	transition: transform var(--nm-fast), border-color var(--nm-fast), box-shadow var(--nm-fast);
}
.nmw-dl:hover {
	transform: translateY(-3px);
	border-color: var(--nm-accent-line);
	box-shadow: var(--nm-shadow);
}
.nmw-dl-primary { border-color: var(--nm-accent-line); }

/* --- head: icon + names ------------------------------------------------ */
.nmw-dl-head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.entry-content .nmw .nmw-dl .nmw-dl-icon {
	width: 46px !important;
	height: 46px !important;
	max-width: 46px !important;
	object-fit: contain;
	flex: none;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 10px;
	background: var(--nm-bg-soft);
	padding: 6px;
}

.nmw-dl-titles { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.nmw-dl-name {
	font-size: 1.12rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--nm-text);
	letter-spacing: -0.015em;
}
.nmw-dl-meta {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nm-accent-deep);
}
.nmw-dl:not(.nmw-dl-primary) .nmw-dl-meta { color: var(--nm-text-muted); }

.nmw-dl-note {
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--nm-text-body);
	/* push the button to the bottom so cards in a row line up */
	flex: 1 1 auto;
}

/* --- button ------------------------------------------------------------ */
.nmw-dl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 46px;
	padding: 0.7em 1.5em;
	border-radius: 999px;
	font-weight: 800;
	font-size: 0.97rem;
	color: #fff;
	background-image: var(--nm-gradient);
	background-color: var(--nm-accent-deep);
	box-shadow: var(--nm-shadow-glow);
	transition: filter var(--nm-fast);
}
.nmw-dl:hover .nmw-dl-btn { filter: brightness(1.06); }

.nmw-dl-btn-ghost {
	color: var(--nm-text) !important;
	background-image: none;
	background-color: var(--nm-surface-2);
	border: 1px solid var(--nm-border-strong);
	box-shadow: none;
}

/* --- wider viewports --------------------------------------------------- */
@media (min-width: 620px) {
	.nmw-dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (hover: none) and (pointer: coarse) {
	.nmw-dl:hover { transform: none; }
}

/* ==========================================================================
   29. IMAGE CAPTIONS
   Captions under images were repeating what the surrounding copy already
   said, so they are hidden site-wide. The text stays in the markup for
   screen readers and for anyone who re-enables it.
   ========================================================================== */

.entry-content figcaption,
.entry-content .wp-element-caption,
.entry-content .wp-caption-text,
.nmw-shot figcaption {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   30. CENTRE STEP SCREENSHOTS
   The shots are capped at 340px inside a ~700px step card, so left-aligning
   them left a dead gap down the right-hand side. Centring balances the card.
   ========================================================================== */

.nmw-step-shot { text-align: center; }

.entry-content .nmw .nmw-step-shot .nmw-step-img {
	margin-left: auto;
	margin-right: auto;
}

/* Inline (non-step) screenshots sit centred too */
.entry-content .nmw .nmw-shot .nmw-shot-img {
	margin-left: auto;
	margin-right: auto;
}