/* ============================================================
				   SYSMarshal — redesigned homepage content
				   Scoped to .sm-home so it never bleeds into the rest of the site.
				   ============================================================ */
		.sm-home {
			--sm-bg: #070a0f;
			--sm-panel: #10161f;
			--sm-panel-2: #141c27;
			--sm-line: rgba(255,255,255,.07);
			--sm-line-2: rgba(255,255,255,.12);
			--sm-text: #e6edf3;
			--sm-muted: #8a96a6;
			--sm-muted-2: #5d6877;
			--sm-accent: #4ab2f1;
			--sm-accent-2: #22d3ee;
			--sm-good: #22c55e;
			--sm-bad: #ef4444;
			--sm-warn: #f59e0b;
			background: var(--sm-bg);
			color: var(--sm-text);
			font-family: 'Inter',Montserrat,system-ui,-apple-system,Segoe UI,sans-serif;
			position: relative;
			overflow: hidden;
			padding-bottom: 80px;
		}

			.sm-home * {
				box-sizing: border-box
			}

			.sm-home a {
				color: inherit;
				text-decoration: none
			}

			.sm-home .mono {
				font-family: 'JetBrains Mono',ui-monospace,Menlo,monospace
			}

			.sm-home::before {
				content: "";
				position: absolute;
				inset: 0;
				pointer-events: none;
				background: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/56px 56px, linear-gradient(90deg, rgba(255,255,255,.025) 1px,transparent 1px) 0 0/56px 56px;
				-webkit-mask-image: radial-gradient(1400px 800px at 60% 0%, #000 35%, transparent 75%);
				mask-image: radial-gradient(1400px 800px at 60% 0%, #000 35%, transparent 75%);
			}

		.sm-container {
			max-width: 1280px;
			margin: 0 auto;
			padding: 0 28px;
			position: relative;
			z-index: 1
		}

		/* ---------- Slider / banner wrapper (NivoSlider lives inside) ----------
				   The two banner images have different natural heights. NivoSlider sizes
				   the slider to whichever image is current (its in-flow .nivo-main-image
				   gets height:auto), so the page jumps up/down on every slide. Fix: lock
				   the slider to one fixed responsive height and cover-fit every image into
				   that box, so the height never changes no matter the source dimensions.
				   (Best long-term fix is still to export both banners at the SAME size.) */
		.sm-home .slider-wrapper {
			--sm-slider-h: clamp(300px,30vw,460px);
			background: #04070b;
			border-bottom: 1px solid var(--sm-line);
			height: var(--sm-slider-h);
			overflow: hidden;
		}

			.sm-home .slider-wrapper .nivoSlider,
			.sm-home #nivo-slider {
				height: var(--sm-slider-h) !important;
				overflow: hidden !important;
			}
				/* Both the resting main image and the original (hidden) slide imgs */
				.sm-home #nivo-slider img,
				.sm-home #nivo-slider .nivo-main-image {
					width: 100% !important;
					height: var(--sm-slider-h) !important;
					max-height: var(--sm-slider-h) !important;
					object-fit: cover !important;
					object-position: center center !important;
					opacity: .95;
				}
				/* Keep the transition slice / box layers clipped to the fixed box */
				.sm-home #nivo-slider .nivo-slice,
				.sm-home #nivo-slider .nivo-box {
					max-height: var(--sm-slider-h) !important;
				}

		/* ---------- Static banner slider (replaces the Nivo plugin widget) ----------
				   4 same-size SVG banners served from /images/banners/. Crossfade + autoplay
				   with a progress bar, arrows, dots, hover-pause and touch swipe.
				   The slider height follows the banner's REAL aspect ratio (desktop 1920x480,
				   mobile 800x600 via <picture>), so the artwork is never cropped at any width.
				   The vw heights are the no-aspect-ratio fallback (slider is full-bleed). */
		.sm-bnr {
			position: relative;
			width: 100%;
			height: 25vw;
			background: #04070b;
			border-bottom: 1px solid var(--sm-line);
			overflow: hidden;
			z-index: 1;
		}

		@supports (aspect-ratio: 1 / 1) {
			.sm-bnr {
				height: auto;
				aspect-ratio: 1920 / 480
			}
		}

		@media (max-width:767px) {
			.sm-bnr {
				height: 75vw
			}

			@supports (aspect-ratio: 1 / 1) {
				.sm-bnr {
					height: auto;
					aspect-ratio: 800 / 600
				}
			}
		}

		.sm-bnr-slide {
			position: absolute;
			inset: 0;
			display: block;
			opacity: 0;
			transition: opacity .9s ease;
			pointer-events: none
		}

			.sm-bnr-slide.is-active {
				opacity: 1;
				pointer-events: auto
			}

			.sm-bnr-slide picture {
				display: block;
				width: 100%;
				height: 100%
			}

			.sm-bnr-slide img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				display: block
			}

		.sm-bnr-nav, .sm-deck-nav {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 6;
			width: 44px;
			height: 44px;
			border-radius: 50%;
			display: grid;
			place-items: center;
			background: rgba(7,10,15,.55);
			border: 1px solid var(--sm-line-2);
			color: #e6edf3;
			cursor: pointer;
			transition: .2s ease;
			backdrop-filter: blur(4px);
			padding: 0;
		}

			.sm-bnr-nav:hover, .sm-deck-nav:hover {
				border-color: var(--sm-accent);
				color: #fff;
				background: rgba(74,178,241,.15)
			}

		.sm-bnr-prev, .sm-deck-prev {
			left: 20px
		}

		.sm-bnr-next, .sm-deck-next {
			right: 20px
		}

		.sm-bnr-dots, .sm-deck-dots {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 16px;
			z-index: 6;
			display: flex;
			gap: 8px
		}

		.sm-bnr-dot, .sm-deck-dot {
			width: 9px;
			height: 9px;
			border-radius: 999px;
			border: 0;
			padding: 0;
			cursor: pointer;
			background: rgba(255,255,255,.28);
			transition: .25s ease
		}

			.sm-bnr-dot:hover, .sm-deck-dot:hover {
				background: rgba(255,255,255,.55)
			}

			.sm-bnr-dot.is-active, .sm-deck-dot.is-active {
				width: 26px;
				background: var(--sm-accent)
			}

		.sm-bnr-progress, .sm-deck-progress {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 2px;
			z-index: 6;
			background: rgba(255,255,255,.06)
		}

			.sm-bnr-progress span, .sm-deck-progress span {
				display: block;
				height: 100%;
				width: 0;
				background: linear-gradient(90deg,var(--sm-accent),var(--sm-accent-2))
			}

		@keyframes sm-bnr-prog {
			from {
				width: 0
			}

			to {
				width: 100%
			}
		}

		@media (max-width:600px) {
			.sm-bnr-nav, .sm-deck-nav {
				display: none
			}
		}

		/* ---------- Infographic deck slider (the theme banners) ----------
				   The banners in Themes/Flexo/Content/images/banners are text-dense
				   infographics — far taller than the 4:1 hero strip, so they get their own
				   slider that preserves the full artwork (no cropping).

				   The deck does not have ONE fixed ratio: the slides run from 1920x1009
				   (1.9:1 threat map) through 1672x941 to 1536x1024 (3:2). Every slide
				   carries data-ar="width/height" and smSlider() writes the matching
				   --sm-slide-pt (100/ar %) onto the deck, so the ::before spacer re-shapes
				   the card to the ACTIVE image's real ratio (padding-top animates, so the
				   card morphs rather than jumps) and no slide is ever letterboxed.
				   Defaults below = slide 1 (3:2).

				   Keep every slide LANDSCAPE. Portrait artwork was tried and pulled: a 2:3
				   poster is ~1836px tall at full container width, and the alternative —
				   narrowing the card to the poster's shape — left the strip looking broken
				   as it snapped between wide and narrow. The deck sits at the TOP of the
				   page (swapped with the SVG banner strip, which now lives as a contained
				   card between Capabilities and Featured). */
		.sm-deckwrap {
			padding: 36px 0 64px;
			border-bottom: 1px solid var(--sm-line)
		}

		.sm-deck {
			position: relative;
			border: 1px solid var(--sm-line-2);
			border-radius: 14px;
			background: #04070b;
			overflow: hidden;
			box-shadow: 0 30px 80px rgba(0,0,0,.55);
		}

			.sm-deck::before {
				content: "";
				display: block;
				padding-top: var(--sm-slide-pt, 66.6667%);
				transition: padding-top .55s ease
			}

		.sm-deck-slide {
			position: absolute;
			inset: 0;
			margin: 0;
			opacity: 0;
			transition: opacity .9s ease;
			pointer-events: none
		}

			.sm-deck-slide.is-active {
				opacity: 1;
				pointer-events: auto
			}
			/* contain, not cover: the card matches the active image's ratio, so contain
				   normally fills it exactly. It matters in the one case the ratio can't be
				   honoured — a portrait poster clipped by max-height — where cover would
				   crop the artwork instead of scaling it down into the near-black card. */
			/* <picture> wraps every slide so WebP is served where supported with the
				   original PNG/JPG as the fallback. display:contents keeps the wrapper out
				   of the box model entirely, so the <img> still sizes against the
				   absolutely-positioned .sm-deck-slide and the height:100% below still
				   resolves - a default inline <picture> would collapse to auto height and
				   the images would vanish. */
			.sm-deck-slide picture {
				display: contents
			}

			.sm-deck-slide img {
				width: 100%;
				height: 100%;
				object-fit: contain;
				object-position: center;
				display: block
			}

		/* The SVG banner strip in its mid-page slot: same card chrome as the deck
				   (the full border overrides .sm-bnr's original full-bleed border-bottom). */
		.sm-bnrwrap {
			padding: 0 0 84px
		}

			.sm-bnrwrap .sm-bnr {
				border: 1px solid var(--sm-line-2);
				border-radius: 14px;
				box-shadow: 0 30px 80px rgba(0,0,0,.55);
			}

		/* ---------- Hero ---------- */
		.sm-hero {
			padding: 72px 0 56px;
			background: radial-gradient(1200px 500px at 70% -10%, rgba(74,178,241,.18), transparent 60%), radial-gradient(800px 400px at 0% 20%, rgba(34,211,238,.10), transparent 60%);
			border-bottom: 1px solid var(--sm-line);
		}

		.sm-hero-grid {
			display: grid;
			grid-template-columns: 1.05fr .95fr;
			gap: 56px;
			align-items: center
		}

		.sm-eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 6px 12px;
			border: 1px solid var(--sm-line-2);
			border-radius: 999px;
			background: rgba(255,255,255,.02);
			font-size: 11px;
			letter-spacing: .18em;
			text-transform: uppercase;
			color: #cbd5e1;
		}

			.sm-eyebrow .dot {
				width: 7px;
				height: 7px;
				border-radius: 50%;
				background: var(--sm-good);
				box-shadow: 0 0 0 4px rgba(34,197,94,.18)
			}

		.sm-home h1.sm-title {
			font-size: clamp(38px,4.6vw,64px);
			line-height: 1.04;
			letter-spacing: -.02em;
			margin: 18px 0 14px;
			font-weight: 800;
			color: #fff;
			text-transform: none;
		}

			.sm-home h1.sm-title .accent {
				background: linear-gradient(90deg,#9ad6ff,#4ab2f1 60%,#22d3ee);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
			}

		.sm-lede {
			color: #b8c3d0;
			font-size: 18px;
			line-height: 1.55;
			max-width: 560px;
			margin: 0 0 28px
		}

			.sm-lede.tight {
				margin-bottom: 14px
			}
		/* Hero sub-headline triad + capability strapline */
		.sm-hero-kicker {
			font-size: clamp(17px,1.5vw,21px);
			line-height: 1.35;
			font-weight: 700;
			color: #e6edf3;
			margin: 0 0 16px;
			max-width: 600px;
		}

			.sm-hero-kicker .accent {
				background: linear-gradient(90deg,#9ad6ff,#4ab2f1 60%,#22d3ee);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
			}

		.sm-capline {
			display: flex;
			align-items: flex-start;
			gap: 9px;
			max-width: 560px;
			color: #93a4b8;
			font-size: 13.5px;
			line-height: 1.5;
			margin: 0 0 28px;
		}

			.sm-capline svg {
				width: 15px;
				height: 15px;
				color: var(--sm-accent);
				flex: 0 0 auto;
				margin-top: 2px
			}

		.sm-cta {
			display: flex;
			gap: 12px;
			flex-wrap: wrap;
			margin-bottom: 32px
		}

		.sm-btn {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 14px 22px;
			border-radius: 8px;
			font-weight: 600;
			font-size: 13px;
			letter-spacing: .06em;
			text-transform: uppercase;
			border: 1px solid transparent;
			cursor: pointer;
			transition: .2s ease;
			font-family: inherit;
		}

		.sm-btn-primary {
			background: var(--sm-accent);
			color: #04111c
		}

			.sm-btn-primary:hover {
				background: #7cc6f5;
				transform: translateY(-1px);
				color: #04111c
			}

		.sm-btn-ghost {
			background: transparent;
			color: #e6edf3;
			border-color: var(--sm-line-2)
		}

			.sm-btn-ghost:hover {
				border-color: var(--sm-accent);
				color: #fff
			}

		.sm-trust {
			display: flex;
			align-items: center;
			gap: 18px;
			flex-wrap: wrap;
			color: var(--sm-muted);
			font-size: 12px
		}

			.sm-trust .pip {
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background: var(--sm-muted-2);
				display: inline-block;
				margin: 0 8px
			}

			.sm-trust strong {
				color: #e6edf3;
				font-weight: 600
			}

		/* ---------- Live ops panel ---------- */
		.sm-ops {
			position: relative;
			border: 1px solid var(--sm-line-2);
			background: linear-gradient(180deg, rgba(20,28,39,.85), rgba(16,22,31,.85));
			border-radius: 14px;
			overflow: hidden;
			box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
		}

			.sm-ops::before {
				content: "";
				position: absolute;
				inset: -1px;
				background: linear-gradient(180deg,rgba(74,178,241,.3),transparent 30%);
				pointer-events: none;
				mix-blend-mode: overlay;
			}

		.sm-ops-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12px 16px;
			border-bottom: 1px solid var(--sm-line);
			background: rgba(255,255,255,.02)
		}

			.sm-ops-head .title {
				display: flex;
				align-items: center;
				gap: 10px;
				font-size: 12px;
				letter-spacing: .18em;
				text-transform: uppercase;
				color: #cbd5e1
			}

			.sm-ops-head .live {
				width: 7px;
				height: 7px;
				border-radius: 50%;
				background: var(--sm-bad);
				box-shadow: 0 0 0 4px rgba(239,68,68,.18);
				animation: sm-pulse 1.6s infinite
			}

		@keyframes sm-pulse {
			0%, 100% {
				opacity: 1
			}

			50% {
				opacity: .4
			}
		}

		.sm-ops-head .tabs {
			display: flex;
			gap: 4px
		}

		.sm-ops-head .tab {
			font-size: 11px;
			color: var(--sm-muted);
			padding: 4px 10px;
			border-radius: 6px;
			border: 1px solid transparent
		}

			.sm-ops-head .tab.active {
				color: #e6edf3;
				background: rgba(255,255,255,.04);
				border-color: var(--sm-line)
			}

		.sm-ops-stats {
			display: grid;
			grid-template-columns: repeat(3,1fr);
			border-bottom: 1px solid var(--sm-line)
		}

		.sm-ops-stat {
			padding: 18px 16px;
			border-right: 1px solid var(--sm-line)
		}

			.sm-ops-stat:last-child {
				border-right: none
			}

			.sm-ops-stat .lbl {
				font-size: 10px;
				letter-spacing: .2em;
				text-transform: uppercase;
				color: var(--sm-muted)
			}

			.sm-ops-stat .num {
				font-family: 'JetBrains Mono',monospace;
				font-size: 24px;
				font-weight: 600;
				margin-top: 6px;
				color: #fff
			}

				.sm-ops-stat .num.good {
					color: #86efac
				}

				.sm-ops-stat .num.bad {
					color: #fca5a5
				}
				/* Pending state, held until the real figure arrives from
					   /ThreatIntelligence (and left in place if it never does).
					   Overrides .good/.bad: two long em dashes in 24px red read as a
					   solid coloured bar, which looks like a broken chart rather than
					   a value still loading. A single dim dash reads as "not yet". */
				.sm-ops-stat .num.is-pending {
					color: var(--sm-muted-2);
					font-weight: 500;
					letter-spacing: .06em
				}

			.sm-ops-stat .delta {
				font-size: 11px;
				color: var(--sm-muted);
				margin-top: 2px
			}

				.sm-ops-stat .delta .up {
					color: #86efac
				}

				.sm-ops-stat .delta .dn {
					color: #fca5a5
				}

		/* min-height matches max-height so the card reserves its full size before the
			   detections arrive. Without it the panel is ~248px shorter on first paint
			   and snaps taller when the feed lands - a visible layout shift right in
			   the hero, and a Core Web Vitals CLS hit on the most important page. */
		.sm-ops-feed {
			padding: 8px 0;
			min-height: 248px;
			max-height: 248px;
			overflow: hidden;
			position: relative
		}

			/* Placeholder rows shown until the feed loads (and cleared if it never
				   does). Bars, not fake text - nothing here should be mistakable for a
				   real detection. */
			.sm-ops-feed .sm-feed-skel {
				display: grid;
				grid-template-columns: 80px 70px 1fr 100px;
				align-items: center;
				gap: 12px;
				padding: 7px 16px
			}

				.sm-ops-feed .sm-feed-skel span {
					height: 8px;
					border-radius: 4px;
					background: rgba(255,255,255,.055);
					animation: smSkel 1.6s ease-in-out infinite
				}

		@keyframes smSkel {
			0%, 100% {
				opacity: .5
			}

			50% {
				opacity: 1
			}
		}

			.sm-ops-feed::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 36px;
				background: linear-gradient(transparent,rgba(16,22,31,1))
			}

		.sm-feed-row {
			display: grid;
			grid-template-columns: 80px 70px 1fr 100px;
			align-items: center;
			gap: 12px;
			padding: 7px 16px;
			font-family: 'JetBrains Mono',monospace;
			font-size: 12px;
			color: #c2cdd8
		}

			.sm-feed-row .t {
				color: var(--sm-muted)
			}

			.sm-feed-row .sev {
				font-size: 10px;
				letter-spacing: .14em;
				text-transform: uppercase;
				padding: 2px 8px;
				border-radius: 4px;
				font-weight: 700;
				text-align: center
			}

				.sm-feed-row .sev.crit {
					background: rgba(239,68,68,.14);
					color: #fca5a5;
					border: 1px solid rgba(239,68,68,.35)
				}

				.sm-feed-row .sev.high {
					background: rgba(245,158,11,.14);
					color: #fbbf24;
					border: 1px solid rgba(245,158,11,.35)
				}

				.sm-feed-row .sev.med {
					background: rgba(74,178,241,.12);
					color: #9ad6ff;
					border: 1px solid rgba(74,178,241,.35)
				}

			.sm-feed-row .src {
				color: #e6edf3;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap
			}

				.sm-feed-row .src .ip {
					color: #9ad6ff
				}

			.sm-feed-row .act {
				text-align: right;
				color: #86efac;
				font-weight: 600
			}

				.sm-feed-row .act.blocked {
					color: #fca5a5
				}

		.sm-ops-foot {
			border-top: 1px solid var(--sm-line);
			padding: 10px 16px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 11px;
			color: var(--sm-muted);
			font-family: 'JetBrains Mono',monospace
		}

		/* ---------- Pillars ---------- */
		.sm-pillars {
			padding: 72px 0 40px;
			border-bottom: 1px solid var(--sm-line)
		}

		.sm-shead {
			display: flex;
			align-items: end;
			justify-content: space-between;
			gap: 20px;
			margin-bottom: 36px;
			flex-wrap: wrap
		}

			.sm-shead h2 {
				font-size: 34px;
				letter-spacing: -.01em;
				margin: 8px 0 0;
				font-weight: 700;
				color: #fff;
				text-transform: none;
				font-family: inherit
			}

			.sm-shead .lead {
				color: var(--sm-muted);
				max-width: 560px;
				font-size: 15px;
				line-height: 1.55
			}

		.sm-stag {
			font-size: 11px;
			letter-spacing: .22em;
			text-transform: uppercase;
			color: var(--sm-accent);
			font-weight: 600;
			font-family: 'JetBrains Mono',monospace
		}

		.sm-pillar-grid {
			display: grid;
			grid-template-columns: repeat(4,1fr);
			gap: 16px
		}

		.sm-pillar {
			position: relative;
			padding: 24px 22px 22px;
			border: 1px solid var(--sm-line);
			background: linear-gradient(180deg, var(--sm-panel), var(--sm-panel-2));
			border-radius: 12px;
			transition: .25s ease;
			overflow: hidden;
		}

			.sm-pillar::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				height: 2px;
				width: 0;
				background: linear-gradient(90deg,var(--sm-accent),var(--sm-accent-2));
				transition: width .35s ease
			}

			.sm-pillar:hover {
				transform: translateY(-3px);
				border-color: rgba(74,178,241,.35)
			}

				.sm-pillar:hover::before {
					width: 100%
				}

			.sm-pillar .icon {
				width: 42px;
				height: 42px;
				border-radius: 10px;
				display: grid;
				place-items: center;
				background: rgba(74,178,241,.08);
				border: 1px solid rgba(74,178,241,.25);
				color: var(--sm-accent);
				margin-bottom: 18px
			}

			.sm-pillar h3 {
				font-size: 16px;
				margin: 0 0 8px;
				font-weight: 600;
				color: #fff;
				text-transform: none;
				font-family: inherit
			}

			.sm-pillar p {
				margin: 0;
				color: var(--sm-muted);
				font-size: 13px;
				line-height: 1.55
			}

			.sm-pillar .meta {
				margin-top: 18px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: 'JetBrains Mono',monospace;
				font-size: 11px;
				color: var(--sm-muted-2);
				padding-top: 14px;
				border-top: 1px dashed var(--sm-line)
			}

				.sm-pillar .meta .val {
					color: #9ad6ff
				}

		/* ---------- Pillars — enhanced (attack-surface cards) ---------- */
		.sm-pillars .sm-shead {
			align-items: flex-start
		}

		.sm-lead-col {
			max-width: 560px
		}

		.sm-proof {
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
			margin-top: 16px
		}

			.sm-proof .chip {
				display: inline-flex;
				align-items: center;
				gap: 8px;
				padding: 7px 13px;
				border: 1px solid var(--sm-line);
				border-radius: 999px;
				background: rgba(255,255,255,.02);
				font-size: 11.5px;
				color: #c2cdd8;
				line-height: 1;
			}

				.sm-proof .chip svg {
					color: var(--sm-accent);
					flex: 0 0 auto
				}

				.sm-proof .chip strong {
					color: #fff;
					font-weight: 600
				}

		.sm-pillar {
			display: flex;
			flex-direction: column
		}

		.sm-pillar-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16px
		}

			.sm-pillar-top .icon {
				margin-bottom: 0
			}

		.sm-attck {
			font-family: 'JetBrains Mono',monospace;
			font-size: 10px;
			letter-spacing: .06em;
			color: var(--sm-muted);
			border: 1px solid var(--sm-line);
			border-radius: 6px;
			padding: 4px 8px;
			background: rgba(255,255,255,.02);
		}

		.sm-pillar .sm-flow {
			display: flex;
			align-items: center;
			gap: 7px;
			flex-wrap: wrap;
			margin-top: 16px;
			font-family: 'JetBrains Mono',monospace;
			font-size: 10.5px;
		}

			.sm-pillar .sm-flow .st {
				padding: 4px 9px;
				border-radius: 6px;
				border: 1px solid var(--sm-line);
				background: rgba(255,255,255,.02);
				color: #c2cdd8;
				white-space: nowrap;
			}

				.sm-pillar .sm-flow .st.blk {
					border-color: rgba(239,68,68,.35);
					background: rgba(239,68,68,.10);
					color: #fca5a5;
					font-weight: 600;
				}

			.sm-pillar .sm-flow .ar {
				color: var(--sm-accent);
				font-weight: 700
			}

		.sm-pillar .meta {
			margin-top: auto
		}

		/* Response engine strip */
		.sm-engine {
			margin-top: 24px;
			border: 1px solid var(--sm-line);
			border-radius: 12px;
			background: linear-gradient(180deg, rgba(20,28,39,.55), rgba(16,22,31,.55));
			padding: 18px 22px;
			display: flex;
			align-items: center;
			gap: 16px;
			flex-wrap: wrap;
		}

			.sm-engine .lab {
				font-family: 'JetBrains Mono',monospace;
				font-size: 11px;
				letter-spacing: .2em;
				text-transform: uppercase;
				color: var(--sm-accent);
				flex: 0 0 auto;
			}

			.sm-engine .loop {
				display: flex;
				align-items: center;
				gap: 8px;
				flex-wrap: wrap;
				flex: 1 1 auto
			}

			.sm-engine .node {
				display: inline-flex;
				flex-direction: column;
				gap: 2px;
				padding: 9px 14px;
				border: 1px solid var(--sm-line);
				border-radius: 8px;
				background: rgba(255,255,255,.02);
			}

				.sm-engine .node b {
					color: #fff;
					font-size: 12.5px;
					font-weight: 600
				}

				.sm-engine .node small {
					color: var(--sm-muted);
					font-size: 10.5px;
					letter-spacing: .02em
				}

			.sm-engine .step {
				color: var(--sm-accent);
				font-weight: 700;
				font-size: 14px
			}

		/* ---------- Capability grid (8 icon cards -> modal) ---------- */
		.sm-caps {
			padding: 80px 0
		}

		.sm-cap-grid {
			display: grid;
			grid-template-columns: repeat(4,1fr);
			gap: 16px
		}

		.sm-cap {
			position: relative;
			cursor: pointer;
			display: flex;
			flex-direction: column;
			border: 1px solid var(--sm-line);
			background: linear-gradient(180deg, var(--sm-panel), var(--sm-panel-2));
			border-radius: 14px;
			overflow: hidden;
			transition: .25s ease;
			padding: 22px 20px 18px;
			min-height: 212px;
		}

			.sm-cap::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				height: 2px;
				width: 0;
				background: linear-gradient(90deg,var(--sm-accent),var(--sm-accent-2));
				transition: width .35s ease
			}

			.sm-cap:hover {
				transform: translateY(-3px);
				border-color: rgba(74,178,241,.4);
				box-shadow: 0 24px 50px rgba(0,0,0,.5)
			}

				.sm-cap:hover::before {
					width: 100%
				}

		.sm-cap-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 18px
		}

		.sm-cap .icon {
			width: 46px;
			height: 46px;
			border-radius: 11px;
			display: grid;
			place-items: center;
			background: rgba(74,178,241,.08);
			border: 1px solid rgba(74,178,241,.25);
			color: var(--sm-accent);
			transition: .25s ease;
		}

		.sm-cap:hover .icon {
			background: rgba(74,178,241,.14);
			border-color: rgba(74,178,241,.5);
			transform: translateY(-1px)
		}

		.sm-cap .num {
			font-family: 'JetBrains Mono',monospace;
			font-size: 11px;
			letter-spacing: .22em;
			color: var(--sm-muted-2)
		}

		.sm-cap h3 {
			margin: 0 0 8px;
			font-size: 15px;
			font-weight: 600;
			color: #fff;
			text-transform: none;
			font-family: inherit;
			line-height: 1.3
		}

		.sm-cap p {
			margin: 0;
			font-size: 12.5px;
			color: var(--sm-muted);
			line-height: 1.55
		}

		.sm-cap .foot {
			margin-top: auto;
			padding-top: 16px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 1px dashed var(--sm-line)
		}

		.sm-cap .tag {
			font-family: 'JetBrains Mono',monospace;
			font-size: 10.5px;
			letter-spacing: .04em;
			color: var(--sm-muted-2)
		}

		.sm-cap .more {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			font-size: 10.5px;
			letter-spacing: .16em;
			text-transform: uppercase;
			color: var(--sm-accent);
			opacity: .55;
			transition: .2s ease
		}

		.sm-cap:hover .more {
			opacity: 1;
			gap: 9px
		}

		/* ---------- Modal content helpers (self-contained, no DB dependency) ---------- */
		.sm-mc-body .sm-mc-lead {
			font-size: 15.5px;
			color: #e6edf3 !important;
			line-height: 1.6;
			margin: 0 0 20px !important
		}

		.sm-mc-specs {
			display: grid;
			grid-template-columns: repeat(3,1fr);
			gap: 10px;
			margin: 0 0 22px
		}

			.sm-mc-specs > div {
				border: 1px solid rgba(255,255,255,.08);
				border-radius: 10px;
				padding: 11px 13px;
				background: rgba(255,255,255,.02)
			}

			.sm-mc-specs span {
				display: block;
				font-size: 10px;
				letter-spacing: .16em;
				text-transform: uppercase;
				color: #8a96a6 !important;
				margin-bottom: 5px
			}

			.sm-mc-specs b {
				color: #fff !important;
				font-size: 13px;
				font-weight: 600;
				font-family: 'JetBrains Mono',monospace
			}

		.sm-mc-body ul.sm-mc-checks {
			list-style: none;
			padding-left: 0;
			margin: 8px 0 6px
		}

			.sm-mc-body ul.sm-mc-checks li {
				position: relative;
				padding-left: 28px;
				margin: 10px 0;
				color: #cbd5e1 !important;
				line-height: 1.55
			}

				.sm-mc-body ul.sm-mc-checks li::before {
					content: "";
					position: absolute;
					left: 0;
					top: 2px;
					width: 17px;
					height: 17px;
					border-radius: 5px;
					background: rgba(74,178,241,.12);
					border: 1px solid rgba(74,178,241,.4)
				}

				.sm-mc-body ul.sm-mc-checks li::after {
					content: "";
					position: absolute;
					left: 6px;
					top: 5px;
					width: 4px;
					height: 8px;
					border: solid #4ab2f1;
					border-width: 0 2px 2px 0;
					transform: rotate(45deg)
				}

		/* ---------- Featured products section title ---------- */
		.sm-rule {
			display: grid;
			grid-template-columns: 1fr auto 1fr;
			align-items: center;
			gap: 24px;
			margin: 0 0 40px
		}

			.sm-rule::before, .sm-rule::after {
				content: "";
				height: 1px;
				background: var(--sm-line)
			}

			.sm-rule h2 {
				margin: 0;
				font-size: 22px;
				letter-spacing: .18em;
				text-transform: uppercase;
				font-weight: 700;
				color: #fff;
				font-family: inherit
			}

		.sm-feat-wrap {
			padding: 60px 0 0;
			border-top: 1px solid var(--sm-line)
		}

			/* =========================================================
				   Re-skin nopCommerce product grid INSIDE our shell only.
				   !important is required to defeat the legacy theme's
				   responsive .item-box width rules (e.g. width:24%; float:left).
				   ========================================================= */
			.sm-feat-wrap .product-grid > .title {
				display: none !important
			}

			.sm-feat-wrap .product-grid {
				margin: 0 !important
			}

			.sm-feat-wrap .item-grid {
				display: grid !important;
				grid-template-columns: repeat(4,minmax(0,1fr)) !important;
				gap: 18px !important;
				margin: 0 !important;
			}

				.sm-feat-wrap .item-grid::before,
				.sm-feat-wrap .item-grid::after {
					display: none !important
				}

				.sm-feat-wrap .item-grid > .item-box {
					width: auto !important;
					max-width: none !important;
					min-width: 0 !important;
					float: none !important;
					margin: 0 !important;
					padding: 0 !important;
					border: 1px solid var(--sm-line) !important;
					background: linear-gradient(180deg, var(--sm-panel), #0b1119) !important;
					border-radius: 14px !important;
					overflow: hidden !important;
					transition: .25s ease;
					display: flex !important;
					flex-direction: column !important;
				}

					.sm-feat-wrap .item-grid > .item-box:hover {
						border-color: rgba(74,178,241,.35) !important;
						transform: translateY(-3px);
					}

			.sm-feat-wrap .item-box .product-item {
				display: flex !important;
				flex-direction: column !important;
				width: 100% !important;
				height: 100% !important;
				margin: 0 !important;
			}

			/* Image */
			.sm-feat-wrap .item-box .picture {
				background: radial-gradient(circle at 50% 40%, rgba(74,178,241,.18), transparent 60%), #070b12 !important;
				margin: 0 !important;
				padding: 14px !important;
				border-radius: 0 !important;
			}

				.sm-feat-wrap .item-box .picture a {
					display: block !important;
					position: relative
				}

					.sm-feat-wrap .item-box .picture a:before {
						content: "" !important;
						display: block !important;
						padding-top: 100% !important
					}

				.sm-feat-wrap .item-box .picture img,
				.sm-feat-wrap .item-box .picture picture {
					position: absolute !important;
					inset: 0 !important;
					margin: auto !important;
					max-width: 88% !important;
					max-height: 88% !important;
					width: auto !important;
					height: auto !important;
					filter: drop-shadow(0 18px 32px rgba(0,0,0,.55));
				}

					.sm-feat-wrap .item-box .picture picture img {
						position: static !important
					}

			/* Body */
			.sm-feat-wrap .item-box .details {
				padding: 18px 18px 20px !important;
				text-align: left !important;
				display: flex !important;
				flex-direction: column !important;
				flex: 1 1 auto !important;
			}

			.sm-feat-wrap .item-box .product-title {
				margin: 0 0 12px !important;
				height: auto !important;
				min-height: 42px
			}

				.sm-feat-wrap .item-box .product-title a {
					color: #fff !important;
					font-size: 15px !important;
					font-weight: 600 !important;
					white-space: normal !important;
					word-break: normal !important;
					overflow-wrap: break-word !important;
					text-overflow: clip !important;
					overflow: visible !important;
					line-height: 1.35 !important;
					display: block !important;
					text-align: left !important;
				}

					.sm-feat-wrap .item-box .product-title a:hover {
						color: var(--sm-accent) !important
					}

			.sm-feat-wrap .item-box .sku {
				color: var(--sm-muted-2);
				font-size: 11px;
				letter-spacing: .08em;
				text-transform: uppercase;
				margin-bottom: 8px
			}

			.sm-feat-wrap .item-box .add-info {
				margin-top: auto
			}

			.sm-feat-wrap .item-box .prices {
				display: flex !important;
				align-items: baseline !important;
				gap: 10px !important;
				margin: 0 0 14px !important;
				border: 0 !important;
				min-height: auto !important;
			}

			.sm-feat-wrap .item-box .actual-price {
				font-family: 'JetBrains Mono',monospace !important;
				font-size: 22px !important;
				font-weight: 700 !important;
				color: #fff !important;
			}

			.sm-feat-wrap .item-box .old-price {
				font-family: 'JetBrains Mono',monospace !important;
				font-size: 13px !important;
				color: var(--sm-muted) !important;
			}

			.sm-feat-wrap .item-box .old_prices {
				margin: 0 !important;
				min-height: auto !important
			}

			.sm-feat-wrap .item-box .tax_shipping_info,
			.sm-feat-wrap .item-box .tax-shipping-info {
				min-height: auto !important;
				color: var(--sm-muted-2);
				font-size: 11px
			}

			/* Hide ratings on featured */
			.sm-feat-wrap .item-box .product-rating-box-mb,
			.sm-feat-wrap .item-box .product-rating-box {
				display: none !important
			}

			/* Hover area: collapse into the card flow */
			.sm-feat-wrap .item-box .product-hover {
				position: static !important;
				opacity: 1 !important;
				background: transparent !important;
				padding: 0 !important;
				margin-top: 14px !important;
				width: auto !important;
			}

			.sm-feat-wrap .item-box .products_buttons {
				display: flex !important;
				gap: 8px !important;
				align-items: center !important;
				padding: 0 !important;
				background: transparent !important;
			}

			/* Buttons */
			.sm-feat-wrap .item-box .product-box-add-to-cart-button {
				position: static !important;
				top: auto !important;
				left: auto !important;
				right: auto !important;
				width: auto !important;
				margin: 0 !important;
				flex: 1 1 auto !important;
				height: 42px !important;
				line-height: 40px !important;
				background: var(--sm-accent) !important;
				color: #04111c !important;
				border: 1px solid var(--sm-accent) !important;
				border-radius: 8px !important;
				font-size: 12px !important;
				letter-spacing: .06em !important;
				font-weight: 700 !important;
				text-transform: uppercase !important;
			}

				.sm-feat-wrap .item-box .product-box-add-to-cart-button:hover {
					background: #7cc6f5 !important;
					color: #04111c !important;
					border-color: #7cc6f5 !important;
				}

			.sm-feat-wrap .item-box .add-to-wishlist-button,
			.sm-feat-wrap .item-box .add-to-compare-list-button {
				position: static !important;
				top: auto !important;
				left: auto !important;
				right: auto !important;
				width: 42px !important;
				height: 42px !important;
				margin: 0 !important;
				background-color: transparent !important;
				background-position: center !important;
				background-size: 16px !important;
				border: 1px solid var(--sm-line-2) !important;
				border-radius: 8px !important;
				flex: 0 0 auto !important;
			}

				.sm-feat-wrap .item-box .add-to-wishlist-button:hover,
				.sm-feat-wrap .item-box .add-to-compare-list-button:hover {
					border-color: var(--sm-accent) !important;
					background-color: rgba(74,178,241,.08) !important;
				}

			/* Hide the duplicate mobile button block (we use desktop layout) */
			.sm-feat-wrap .item-box .details > .for-mobile,
			.sm-feat-wrap .item-box .product-item > .details .for-mobile {
				display: none !important
			}

			/* Swiper pagination dots (if multi-image) */
			.sm-feat-wrap .item-box .swiper-pagination-bullet {
				background: rgba(255,255,255,.3) !important
			}

			.sm-feat-wrap .item-box .swiper-pagination-bullet-active {
				background: var(--sm-accent) !important
			}

		/* ---------- Modal (unique sm-mc-* classes so we never collide with Bootstrap) ---------- */
		.sm-modal {
			display: none;
			position: fixed;
			inset: 0;
			z-index: 10000;
			background: rgba(2,6,12,.78);
			backdrop-filter: blur(6px);
			padding: 60px 20px;
			overflow: auto;
		}

			.sm-modal.is-open {
				display: block !important
			}

		.sm-mc {
			max-width: 880px;
			width: calc(100% - 20px);
			margin: 0 auto;
			background: linear-gradient(180deg, #0d141d, #0a1018) !important;
			border: 1px solid rgba(255,255,255,.12);
			border-radius: 14px;
			box-shadow: 0 40px 100px rgba(0,0,0,.7);
			color: #cbd5e1;
			overflow: hidden;
			font-family: 'Inter',Montserrat,system-ui,sans-serif;
		}

		.sm-mc-head {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 16px;
			padding: 18px 24px;
			border-bottom: 1px solid rgba(255,255,255,.07);
			background: rgba(255,255,255,.02);
		}

		.sm-mc-tag {
			font-size: 10px;
			letter-spacing: .22em;
			text-transform: uppercase;
			color: #4ab2f1;
			font-weight: 700;
			font-family: 'JetBrains Mono',monospace
		}

		.sm-mc-head h3 {
			margin: 6px 0 0 !important;
			color: #fff !important;
			font-size: 20px !important;
			font-weight: 700;
			text-transform: none !important;
			font-family: inherit
		}

		.sm-mc-close {
			width: 34px;
			height: 34px;
			border-radius: 8px;
			display: grid;
			place-items: center;
			background: transparent !important;
			border: 1px solid rgba(255,255,255,.12) !important;
			color: #cbd5e1 !important;
			cursor: pointer;
			padding: 0 !important;
			flex: 0 0 auto;
		}

			.sm-mc-close:hover {
				color: #fff !important;
				border-color: #ef4444 !important;
				background: rgba(239,68,68,.08) !important
			}

		.sm-mc-body {
			padding: 24px 28px;
			line-height: 1.65;
			font-size: 14px;
			text-align: left !important;
			max-height: 62vh;
			overflow: auto;
			color: #cbd5e1;
		}

			.sm-mc-body h1, .sm-mc-body h2, .sm-mc-body h3, .sm-mc-body h4, .sm-mc-body h5, .sm-mc-body h6 {
				color: #fff !important;
				margin: 18px 0 8px !important;
				text-transform: none !important;
				font-family: inherit !important;
			}

			.sm-mc-body h4 {
				font-size: 18px
			}

			.sm-mc-body h5 {
				font-size: 15px;
				color: #9ad6ff !important
			}

			.sm-mc-body p, .sm-mc-body li, .sm-mc-body div, .sm-mc-body span {
				color: #cbd5e1 !important;
				background: transparent !important
			}

			.sm-mc-body strong {
				color: #fff !important
			}

			.sm-mc-body ul, .sm-mc-body ol {
				padding-left: 20px;
				margin: 8px 0
			}

			.sm-mc-body li {
				margin: 4px 0
			}

			.sm-mc-body code {
				background: rgba(74,178,241,.1);
				color: #9ad6ff !important;
				padding: 1px 6px;
				border-radius: 4px;
				font-family: 'JetBrains Mono',monospace;
				font-size: 12.5px
			}

			.sm-mc-body a {
				color: #4ab2f1 !important;
				text-decoration: underline
			}

		.sm-mc-foot {
			padding: 14px 24px;
			border-top: 1px solid rgba(255,255,255,.07);
			text-align: right;
			background: rgba(255,255,255,.02)
		}

		.sm-mc-btn {
			background: #4ab2f1 !important;
			color: #04111c !important;
			border: 0 !important;
			border-radius: 8px;
			padding: 10px 22px !important;
			font-weight: 700 !important;
			font-size: 12px !important;
			letter-spacing: .08em;
			text-transform: uppercase;
			cursor: pointer;
			font-family: inherit;
		}

			.sm-mc-btn:hover {
				background: #7cc6f5 !important
			}

		/* Responsive */
		@media (max-width:1024px) {
			.sm-hero-grid {
				grid-template-columns: 1fr;
				gap: 36px
			}

			.sm-pillar-grid {
				grid-template-columns: repeat(2,1fr)
			}

			.sm-cap-grid {
				grid-template-columns: repeat(2,1fr)
			}

			.sm-feat-wrap .item-grid {
				grid-template-columns: repeat(2,minmax(0,1fr)) !important
			}
		}

		@media (max-width:600px) {
			.sm-pillar-grid, .sm-cap-grid {
				grid-template-columns: 1fr
			}

			.sm-feat-wrap .item-grid {
				grid-template-columns: 1fr !important
			}

			.sm-engine {
				flex-direction: column;
				align-items: flex-start;
				gap: 12px
			}

				.sm-engine .node {
					width: 100%
				}

			.sm-mc-specs {
				grid-template-columns: 1fr
			}
			/* Live console: its three KPI columns and four feed columns were laid out for a
					   desktop card. Inside a ~280px card they overflowed and were clipped by the
					   card's overflow:hidden, so the numbers and the action column were cut off. */
			.sm-ops-stats {
				grid-template-columns: repeat(2,minmax(0,1fr))
			}

			.sm-ops-stat {
				padding: 14px 12px;
				min-width: 0
			}

				.sm-ops-stat:nth-child(2) {
					border-right: none
				}

				.sm-ops-stat:nth-child(3) {
					grid-column: 1 / -1;
					border-right: none;
					border-top: 1px solid var(--sm-line)
				}

				.sm-ops-stat .num {
					font-size: 20px
				}

			.sm-feed-row {
				grid-template-columns: 58px 56px minmax(0,1fr);
				gap: 8px;
				padding: 7px 12px;
				font-size: 11px
			}

				.sm-feed-row .act {
					grid-column: 3;
					text-align: left;
					font-size: 10px
				}

			.sm-ops-foot {
				font-size: 10px;
				gap: 8px
			}
		}

		/* ---------- Customer voices (sm-voice) ----------
				   Score rail + an auto-rotating spotlight quote (sm-vq) + a responsive
				   grid of review cards (4 / 2 / 1 columns) matching .sm-cap-grid.

				   Three deliberate safety rules, do not relax them:
				   1. EVERY selector is scoped to .sm-home, so nothing in here can reach
					  another section or another page of the site.
				   2. No max-content / fixed-width tracks anywhere — every column is
					  minmax(0,1fr) and every flex child has min-width:0, so long words
					  or wide content can never widen the page and push other sections
					  out of alignment.
				   3. The card prefix is "sm-vc" (voice card), NOT "sm-rv". ".sm-rv" is
					  already owned by sysmarshal-effects.js, which stamps it onto
					  .sm-shead/.sm-pillar/.sm-cap/.sm-engine for the scroll reveal and
					  pairs it with ".sm-fx .sm-rv{opacity:0}". Naming a card .sm-rv
					  makes it permanently invisible (it never receives .is-in) AND
					  paints card styling onto every revealed heading on the page.
					  Check Content/js/sysmarshal-effects.js before adding class names.
					  The cards carry data-reveal so they use that reveal properly. */
		.sm-home .sm-voice {
			position: relative
		}

			.sm-home .sm-voice .sm-shead {
				margin-bottom: 30px
			}

		/* Summary rail: aggregate score + spotlight quote slider */
		.sm-home .sm-voice-top {
			display: grid;
			grid-template-columns: 310px minmax(0,1fr);
			gap: 16px;
			margin-bottom: 16px;
		}

		.sm-home .sm-score {
			position: relative;
			overflow: hidden;
			min-width: 0;
			border: 1px solid var(--sm-line);
			border-radius: 14px;
			padding: 22px 20px;
			background: linear-gradient(180deg,var(--sm-panel),var(--sm-panel-2));
			display: flex;
			flex-direction: column;
			gap: 14px;
		}

			.sm-home .sm-score::after {
				content: "";
				position: absolute;
				left: -40%;
				right: -40%;
				bottom: -70%;
				height: 170px;
				pointer-events: none;
				background: radial-gradient(closest-side,rgba(74,178,241,.18),transparent);
			}

		.sm-home .sm-score-head {
			display: flex;
			align-items: baseline;
			gap: 9px;
			position: relative;
			z-index: 1
		}

		.sm-home .sm-score-num {
			font-family: 'JetBrains Mono',monospace;
			font-size: 44px;
			font-weight: 700;
			line-height: 1;
			letter-spacing: -.02em;
			color: #fff
		}

		.sm-home .sm-score-out {
			font-family: 'JetBrains Mono',monospace;
			font-size: 12.5px;
			color: var(--sm-muted-2)
		}

		.sm-home .sm-stars {
			display: inline-flex;
			align-items: center;
			gap: 3px;
			color: #f5b301;
			position: relative;
			z-index: 1
		}

			.sm-home .sm-stars svg {
				display: block;
				flex: none
			}

				.sm-home .sm-stars svg.off {
					color: rgba(255,255,255,.15)
				}

		.sm-home .sm-score-sub {
			font-size: 12px;
			line-height: 1.5;
			color: var(--sm-muted);
			position: relative;
			z-index: 1
		}

		.sm-home .sm-dist {
			display: flex;
			flex-direction: column;
			gap: 7px;
			position: relative;
			z-index: 1;
			min-width: 0
		}
		/* the count column is sized for 4-digit totals with separators */
		.sm-home .sm-dist-row {
			display: grid;
			grid-template-columns: 24px minmax(0,1fr) 46px;
			align-items: center;
			gap: 10px;
			font-family: 'JetBrains Mono',monospace;
			font-size: 10.5px;
			color: var(--sm-muted-2);
		}

		.sm-home .sm-dist-bar {
			height: 6px;
			border-radius: 99px;
			background: rgba(255,255,255,.06);
			overflow: hidden
		}

			.sm-home .sm-dist-bar span {
				display: block;
				height: 100%;
				border-radius: 99px;
				background: linear-gradient(90deg,var(--sm-accent),var(--sm-accent-2))
			}

		.sm-home .sm-dist-row b {
			text-align: right;
			font-weight: 500;
			color: var(--sm-muted)
		}

		/* ---- Spotlight quote slider (sm-vq) ----
				   Driven by the page's existing smSlider() engine, same as the banner
				   strip and the infographic deck, so it needs the -slide / -dot / -prev
				   / -next / -progress class convention and an id on the root.
				   NOTE smSlider does not null-check the prev/next buttons — if you
				   remove them the whole slider throws on init. */
		.sm-home .sm-feature {
			position: relative;
			overflow: hidden;
			min-width: 0;
			margin: 0;
			border: 1px solid var(--sm-line);
			border-radius: 14px;
			padding: 30px 34px 24px;
			background: linear-gradient(140deg,rgba(74,178,241,.08),var(--sm-panel-2) 48%);
			display: flex;
			flex-direction: column;
		}

			.sm-home .sm-feature::before {
				content: "\201C";
				position: absolute;
				top: -30px;
				right: 26px;
				pointer-events: none;
				font-family: Georgia,'Times New Roman',serif;
				font-size: 170px;
				line-height: 1;
				color: rgba(74,178,241,.11);
			}
		/* Slides are stacked in ONE grid cell, so the card height is the tallest
				   quote and never jumps as it rotates. */
		.sm-home .sm-vq-track {
			display: grid;
			flex: 1 1 auto;
			min-width: 0;
			position: relative;
			z-index: 1
		}

		.sm-home .sm-vq-slide {
			grid-area: 1 / 1;
			margin: 0;
			min-width: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transition: opacity .55s ease;
		}

			.sm-home .sm-vq-slide.is-active {
				opacity: 1;
				visibility: visible;
				pointer-events: auto
			}

			.sm-home .sm-vq-slide blockquote {
				margin: 0 0 20px;
				padding: 0;
				border: 0;
				background: none;
				font-size: 18px;
				line-height: 1.6;
				font-weight: 500;
				color: #fff;
				max-width: 62ch;
			}

			.sm-home .sm-vq-slide figcaption {
				margin: 0;
				padding: 0;
				border-top: 0;
				display: flex;
				align-items: center;
				gap: 10px;
				min-width: 0
			}

		.sm-home .sm-vq-ctl {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-top: 20px;
			position: relative;
			z-index: 1
		}

		.sm-home .sm-vq-dots {
			display: flex;
			align-items: center;
			gap: 7px;
			flex: 1 1 auto;
			min-width: 0;
			flex-wrap: wrap
		}

		.sm-home .sm-vq-dot {
			width: 8px;
			height: 8px;
			border-radius: 999px;
			border: 0;
			padding: 0;
			cursor: pointer;
			background: rgba(255,255,255,.24);
			transition: .25s ease;
		}

			.sm-home .sm-vq-dot:hover {
				background: rgba(255,255,255,.5)
			}

			.sm-home .sm-vq-dot.is-active {
				width: 24px;
				background: var(--sm-accent)
			}

		.sm-home .sm-vq-nav {
			flex: 0 0 30px;
			width: 30px;
			height: 30px;
			border-radius: 9px;
			display: grid;
			place-items: center;
			cursor: pointer;
			background: rgba(255,255,255,.04);
			border: 1px solid var(--sm-line-2);
			color: var(--sm-muted);
			transition: .2s ease;
		}

			.sm-home .sm-vq-nav:hover {
				border-color: var(--sm-accent);
				color: #fff;
				background: rgba(74,178,241,.15)
			}

		.sm-home .sm-vq-progress {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 2px;
			background: rgba(255,255,255,.06);
			z-index: 1
		}

			.sm-home .sm-vq-progress span {
				display: block;
				height: 100%;
				width: 0;
				background: linear-gradient(90deg,var(--sm-accent),var(--sm-accent-2))
			}

		/* Review grid — same 4-column rhythm as .sm-cap-grid */
		.sm-home .sm-vc-grid {
			display: grid;
			grid-template-columns: repeat(4,minmax(0,1fr));
			gap: 16px
		}

		.sm-home .sm-vc {
			position: relative;
			overflow: hidden;
			min-width: 0;
			display: flex;
			flex-direction: column;
			gap: 12px;
			border: 1px solid var(--sm-line);
			border-radius: 14px;
			padding: 20px 18px 16px;
			background: linear-gradient(180deg,var(--sm-panel),var(--sm-panel-2));
			transition: .25s ease;
		}

			.sm-home .sm-vc::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				height: 2px;
				width: 0;
				background: linear-gradient(90deg,var(--sm-accent),var(--sm-accent-2));
				transition: width .35s ease;
			}

			.sm-home .sm-vc:hover {
				transform: translateY(-3px);
				border-color: rgba(74,178,241,.4);
				box-shadow: 0 24px 50px rgba(0,0,0,.5)
			}

				.sm-home .sm-vc:hover::before {
					width: 100%
				}

		.sm-home .sm-vc-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			flex-wrap: wrap
		}

		.sm-home .sm-vc-tag {
			font-family: 'JetBrains Mono',monospace;
			font-size: 9px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--sm-accent);
			background: rgba(74,178,241,.08);
			border: 1px solid rgba(74,178,241,.22);
			border-radius: 99px;
			padding: 3px 9px;
		}

		.sm-home .sm-vc-quote {
			margin: 0;
			font-size: 12.5px;
			line-height: 1.6;
			color: var(--sm-text);
			overflow-wrap: anywhere
		}

		.sm-home .sm-vc-foot {
			margin-top: auto;
			padding-top: 14px;
			border-top: 1px dashed var(--sm-line);
			display: flex;
			align-items: center;
			gap: 10px;
			min-width: 0;
		}

		.sm-home .sm-vc-av {
			flex: 0 0 36px;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			display: grid;
			place-items: center;
			font-family: 'JetBrains Mono',monospace;
			font-size: 11.5px;
			font-weight: 600;
			letter-spacing: .04em;
			color: #04070b;
			background: linear-gradient(135deg,var(--sm-accent),var(--sm-accent-2));
		}

		.sm-home .sm-vc-who {
			min-width: 0
		}

			.sm-home .sm-vc-who b {
				display: block;
				font-size: 12px;
				font-weight: 600;
				color: #fff;
				line-height: 1.3
			}

			.sm-home .sm-vc-who small {
				display: block;
				margin-top: 2px;
				font-size: 10.5px;
				line-height: 1.35;
				color: var(--sm-muted-2)
			}

		.sm-home .sm-voice-note {
			margin-top: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			flex-wrap: wrap;
			font-size: 11.5px;
			color: var(--sm-muted-2);
			text-align: center;
		}

			.sm-home .sm-voice-note a {
				color: var(--sm-accent);
				border-bottom: 1px solid rgba(74,178,241,.35)
			}

				.sm-home .sm-voice-note a:hover {
					color: #7cc6f5
				}

		@media (max-width:1024px) {
			.sm-home .sm-voice-top {
				grid-template-columns: 1fr
			}

			.sm-home .sm-vc-grid {
				grid-template-columns: repeat(2,minmax(0,1fr))
			}
			/* Stacked: lay the score card out horizontally, otherwise the
					   distribution bars stretch the full width of the page. */
			.sm-home .sm-score {
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				gap: 14px 26px
			}

			.sm-home .sm-dist {
				flex: 1 1 300px
			}

			.sm-home .sm-feature {
				padding: 26px 24px 22px
			}

			.sm-home .sm-vq-slide blockquote {
				font-size: 17px
			}
		}

		@media (max-width:600px) {
			.sm-home .sm-vc-grid {
				grid-template-columns: 1fr
			}

			.sm-home .sm-feature::before {
				display: none
			}

			.sm-home .sm-score-num {
				font-size: 36px
			}

			.sm-home .sm-vq-slide blockquote {
				font-size: 16px
			}

			.sm-home .sm-vq-nav {
				display: none
			}
		}

		@media (prefers-reduced-motion:reduce) {
			.sm-home .sm-vc, .sm-home .sm-vc::before {
				transition: none
			}

				.sm-home .sm-vc:hover {
					transform: none
				}

			.sm-home .sm-vq-slide {
				transition: none
			}

			/* The deck re-shapes itself per slide — snap instead of animating the card */
			.sm-home .sm-deck, .sm-home .sm-deck::before {
				transition: none
			}
		}