/**
 * Number Plate Maker - Landing Pages
 *
 * Loaded only on the native SEO landing templates (number plates, show
 * plates, replacements, gel, 4D, carbon, motorbike, vintage). Shared
 * section patterns live here; each template composes a different subset so
 * every page gets its own layout without duplicating CSS.
 *
 * Depends on tokens → base → layout → components.
 */

/* ══ Breadcrumb (compact, sits inside heroes) ══════════════════ */
.npm-landing-crumbs {
	font-size: var(--npm-text-sm);
	margin-bottom: var(--npm-space-4);
	color: inherit;
	opacity: 0.85;
}

.npm-landing-crumbs a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.npm-landing-crumbs .sep {
	margin: 0 var(--npm-space-2);
	opacity: 0.6;
}

/* ══ Hero variants ═════════════════════════════════════════════ */

/* Yellow, centred - the "pillar" voice */
.npm-lhero {
	background:
		radial-gradient(70% 120% at 15% 0%, rgba(255, 255, 255, 0.3) 0%, transparent 55%),
		radial-gradient(60% 100% at 90% 100%, rgba(27, 42, 74, 0.08) 0%, transparent 60%),
		var(--npm-yellow);
	border-bottom: 4px solid var(--npm-navy);
	padding: var(--npm-space-10) 0;
	text-align: center;
	color: var(--npm-navy);
}

.npm-lhero h1 {
	font-size: var(--npm-text-4xl);
	font-weight: var(--npm-weight-plate);
	letter-spacing: var(--npm-track-plate);
	line-height: var(--npm-leading-tight);
	margin: 0 0 var(--npm-space-4);
	text-transform: uppercase;
}

.npm-lhero__sub {
	font-size: var(--npm-text-lg);
	max-width: 640px;
	margin: 0 auto var(--npm-space-5);
	line-height: var(--npm-leading-normal);
}

.npm-lhero__actions {
	display: flex;
	gap: var(--npm-space-3);
	justify-content: center;
	flex-wrap: wrap;
}

.npm-lhero__points {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--npm-space-2) var(--npm-space-5);
	margin: var(--npm-space-5) 0 0;
	padding: 0;
	font-weight: var(--npm-weight-semibold);
	font-size: var(--npm-text-sm);
}

.npm-lhero__points li::before {
	content: "✓";
	margin-right: var(--npm-space-2);
	font-weight: var(--npm-weight-bold);
}

/* Navy - stealth voice for show/carbon */
.npm-lhero--navy {
	background:
		radial-gradient(80% 120% at 85% 0%, rgba(255, 200, 0, 0.12) 0%, transparent 55%),
		linear-gradient(180deg, var(--npm-navy) 0%, var(--npm-navy-deep) 100%);
	border-bottom: 4px solid var(--npm-yellow);
	color: var(--npm-white);
}
.npm-lhero--navy h1,
.npm-lhero--navy h2,
.npm-lhero--navy h3 {
	color: var(--npm-white);
}

.npm-lhero--navy .npm-lhero__sub {
	color: rgba(255, 255, 255, 0.85);
}

/* Carbon fibre weave - pure CSS, no image request */
.npm-lhero--carbon {
	background-color: #141821;
	background-image:
		linear-gradient(27deg, #1a1f2b 5px, transparent 5px),
		linear-gradient(207deg, #1a1f2b 5px, transparent 5px),
		linear-gradient(27deg, #10141d 5px, transparent 5px),
		linear-gradient(207deg, #10141d 5px, transparent 5px),
		linear-gradient(90deg, #171c27 10px, transparent 10px),
		linear-gradient(#12161f 25%, #171c27 25%, #171c27 50%, transparent 50%, transparent 75%, #232935 75%, #232935);
	background-size: 20px 20px;
	border-bottom: 4px solid var(--npm-yellow);
	color: var(--npm-white);
}
.npm-lhero--carbon h1,
.npm-lhero--carbon h2,
.npm-lhero--carbon h3 {
	color: var(--npm-white);
}

.npm-lhero--carbon .npm-lhero__sub {
	color: rgba(255, 255, 255, 0.85);
}

/* Split hero - copy left, visual right */
.npm-lhero--split {
	text-align: left;
}

.npm-lhero--split .npm-lhero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--npm-space-8);
	align-items: center;
}

.npm-lhero--split .npm-lhero__sub {
	margin-left: 0;
}

.npm-lhero--split .npm-lhero__actions,
.npm-lhero--split .npm-lhero__points {
	justify-content: flex-start;
}

.npm-lhero__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--npm-radius-lg);
	box-shadow: var(--npm-shadow-lg);
}

@media (max-width: 860px) {
	.npm-lhero--split .npm-lhero__grid {
		grid-template-columns: 1fr;
		gap: var(--npm-space-6);
	}
}

/* ══ Decorative plate mocks ════════════════════════════════════ */
.npm-plate-mock {
	display: inline-flex;
	align-items: stretch;
	background: var(--npm-yellow);
	border: 3px solid var(--npm-navy-deep);
	border-radius: var(--npm-radius-plate);
	box-shadow: var(--npm-shadow);
	overflow: hidden;
	max-width: 100%;
}

.npm-plate-mock__band {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: #003399;
	color: var(--npm-white);
	font-weight: var(--npm-weight-bold);
	font-size: 0.8rem;
	padding: var(--npm-space-2) var(--npm-space-2) var(--npm-space-1);
	min-width: 2rem;
}

.npm-plate-mock__text {
	font-family: var(--npm-font-mono);
	font-weight: var(--npm-weight-plate);
	font-size: clamp(1.6rem, 5vw, 2.6rem);
	letter-spacing: 0.08em;
	color: #0b0f18;
	padding: var(--npm-space-2) var(--npm-space-5);
	white-space: nowrap;
}

.npm-plate-mock--white {
	background: var(--npm-white);
}

.npm-plate-mock--black {
	background: #101010;
	border-color: #000;
}

.npm-plate-mock--black .npm-plate-mock__text {
	color: #d7d9dd; /* silver */
}

/* Two-line motorcycle layout: squarer plate, stacked registration. */
.npm-plate-mock--moto .npm-plate-mock__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.15;
	padding-top: var(--npm-space-3);
	padding-bottom: var(--npm-space-3);
}
.npm-plate-mock--moto .npm-plate-mock__line {
	display: block;
	white-space: nowrap;
}

/* ══ Hub grid (internal links) ═════════════════════════════════ */
.npm-hub-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--npm-space-4);
	margin-top: var(--npm-space-6);
}

@media (max-width: 980px) {
	.npm-hub-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.npm-hub-grid {
		grid-template-columns: 1fr;
	}
}

.npm-hub-card {
	display: flex;
	flex-direction: column;
	gap: var(--npm-space-2);
	background: var(--npm-surface);
	border: 1px solid var(--npm-border);
	border-radius: var(--npm-radius);
	padding: var(--npm-space-5);
	text-decoration: none;
	color: var(--npm-text);
	box-shadow: var(--npm-shadow-sm);
	transition: transform var(--npm-fast) var(--npm-ease), box-shadow var(--npm-fast) var(--npm-ease);
}

.npm-hub-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--npm-shadow);
}

.npm-hub-card__title {
	font-weight: var(--npm-weight-bold);
	font-size: var(--npm-text-lg);
	color: var(--npm-navy);
}

.npm-hub-card__desc {
	color: var(--npm-text-muted);
	font-size: var(--npm-text-sm);
	line-height: var(--npm-leading-normal);
	flex: 1;
}

.npm-hub-card__more {
	font-weight: var(--npm-weight-semibold);
	font-size: var(--npm-text-sm);
	color: var(--npm-yellow-deep);
}

/* ══ Comparison / pricing tables ═══════════════════════════════ */
.npm-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-top: var(--npm-space-6);
	border: 1px solid var(--npm-border);
	border-radius: var(--npm-radius);
	background: var(--npm-surface);
	box-shadow: var(--npm-shadow-sm);
}

.npm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--npm-text-base);
	min-width: 560px;
}

.npm-table th,
.npm-table td {
	padding: var(--npm-space-3) var(--npm-space-4);
	text-align: left;
	border-bottom: 1px solid var(--npm-border);
	vertical-align: top;
}

.npm-table thead th {
	background: var(--npm-navy);
	color: var(--npm-white);
	font-weight: var(--npm-weight-semibold);
	font-size: var(--npm-text-sm);
	text-transform: uppercase;
	letter-spacing: var(--npm-track-eyebrow);
	white-space: nowrap;
}

.npm-table tbody tr:last-child th,
.npm-table tbody tr:last-child td {
	border-bottom: 0;
}

.npm-table tbody tr:nth-child(even) {
	background: var(--npm-surface-alt);
}

.npm-table tbody th {
	font-weight: var(--npm-weight-semibold);
	color: var(--npm-navy);
	white-space: nowrap;
}

.npm-table .num {
	white-space: nowrap;
	font-weight: var(--npm-weight-bold);
	color: var(--npm-navy);
}

/* ══ Pills / legality badges ═══════════════════════════════════ */
.npm-pill {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	font-size: var(--npm-text-xs);
	font-weight: var(--npm-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--npm-track-eyebrow);
	white-space: nowrap;
}

.npm-pill--legal {
	background: var(--npm-success-soft);
	color: var(--npm-success);
}

.npm-pill--show {
	background: var(--npm-warning-soft);
	color: var(--npm-warning);
}

/* ══ Zigzag rows (image / copy alternating) ════════════════════ */
.npm-zigzag {
	display: grid;
	gap: var(--npm-space-8);
	margin-top: var(--npm-space-6);
}

.npm-zig {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--npm-space-6);
	align-items: center;
	background: var(--npm-surface);
	border: 1px solid var(--npm-border);
	border-radius: var(--npm-radius-lg);
	padding: var(--npm-space-6);
	box-shadow: var(--npm-shadow-sm);
}

.npm-zig:nth-child(even) .npm-zig__media {
	order: 2;
}

@media (max-width: 800px) {
	.npm-zig {
		grid-template-columns: 1fr;
	}

	.npm-zig:nth-child(even) .npm-zig__media {
		order: 0;
	}
}

.npm-zig__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--npm-radius);
}

.npm-zig__body h3 {
	margin: 0 0 var(--npm-space-2);
	color: var(--npm-navy);
	font-size: var(--npm-text-xl);
	font-weight: var(--npm-weight-plate);
}

.npm-zig__body p {
	color: var(--npm-grey-700);
	line-height: var(--npm-leading-normal);
	margin: 0 0 var(--npm-space-3);
}

.npm-zig__price {
	display: flex;
	align-items: baseline;
	gap: var(--npm-space-2);
	margin: 0 0 var(--npm-space-3);
}

.npm-zig__price strong {
	font-size: var(--npm-text-2xl);
	color: var(--npm-navy);
}

.npm-zig__price span {
	color: var(--npm-text-muted);
	font-size: var(--npm-text-sm);
}

.npm-zig__meta {
	margin-bottom: var(--npm-space-3);
}

/* ══ Vertical timeline (replacement process) ═══════════════════ */
.npm-timeline {
	list-style: none;
	margin: var(--npm-space-6) 0 0;
	padding: 0;
	counter-reset: npm-tl;
	position: relative;
}

.npm-timeline::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--npm-grey-200);
}

.npm-timeline li {
	counter-increment: npm-tl;
	position: relative;
	padding: 0 0 var(--npm-space-6) calc(44px + var(--npm-space-4));
}

.npm-timeline li:last-child {
	padding-bottom: 0;
}

.npm-timeline li::before {
	content: counter(npm-tl);
	position: absolute;
	left: 0;
	top: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--npm-yellow);
	border: 3px solid var(--npm-navy);
	color: var(--npm-navy);
	font-weight: var(--npm-weight-plate);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--npm-text-lg);
}

.npm-timeline h3 {
	margin: 0 0 var(--npm-space-1);
	font-size: var(--npm-text-lg);
	color: var(--npm-navy);
}

.npm-timeline p {
	margin: 0;
	color: var(--npm-grey-700);
	line-height: var(--npm-leading-normal);
}

/* ══ Spec panel (dimensions etc.) ══════════════════════════════ */
.npm-spec {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--npm-space-4);
	margin-top: var(--npm-space-6);
}

.npm-spec__item {
	background: var(--npm-navy);
	color: var(--npm-white);
	border-radius: var(--npm-radius);
	padding: var(--npm-space-5);
	text-align: center;
}

.npm-spec__value {
	display: block;
	font-size: var(--npm-text-3xl);
	font-weight: var(--npm-weight-plate);
	color: var(--npm-yellow);
	line-height: 1.1;
}

.npm-spec__label {
	display: block;
	margin-top: var(--npm-space-2);
	font-size: var(--npm-text-sm);
	color: rgba(255, 255, 255, 0.85);
}

/* ══ Do / Don't columns ════════════════════════════════════════ */
.npm-dodont {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--npm-space-5);
	margin-top: var(--npm-space-6);
}

@media (max-width: 720px) {
	.npm-dodont {
		grid-template-columns: 1fr;
	}
}

.npm-dodont__col {
	border-radius: var(--npm-radius);
	padding: var(--npm-space-5);
	border: 1px solid var(--npm-border);
	background: var(--npm-surface);
	box-shadow: var(--npm-shadow-sm);
}

.npm-dodont__col--do {
	border-top: 4px solid var(--npm-success);
}

.npm-dodont__col--dont {
	border-top: 4px solid var(--npm-danger);
}

.npm-dodont__col h3 {
	margin: 0 0 var(--npm-space-3);
	color: var(--npm-navy);
}

.npm-dodont__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--npm-space-2);
}

.npm-dodont__col li {
	padding-left: 1.6em;
	position: relative;
	line-height: var(--npm-leading-normal);
	color: var(--npm-grey-700);
}

.npm-dodont__col--do li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--npm-success);
	font-weight: var(--npm-weight-bold);
}

.npm-dodont__col--dont li::before {
	content: "✕";
	position: absolute;
	left: 0;
	color: var(--npm-danger);
	font-weight: var(--npm-weight-bold);
}

/* ══ Side-by-side option cards (3mm vs 5mm etc.) ═══════════════ */
.npm-duel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--npm-space-5);
	margin-top: var(--npm-space-6);
}

@media (max-width: 720px) {
	.npm-duel {
		grid-template-columns: 1fr;
	}
}

.npm-duel__card {
	background: var(--npm-surface);
	border: 2px solid var(--npm-border-strong);
	border-radius: var(--npm-radius-lg);
	padding: var(--npm-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--npm-space-3);
	position: relative;
	box-shadow: var(--npm-shadow-sm);
}

.npm-duel__card--featured {
	border-color: var(--npm-yellow);
	box-shadow: var(--npm-shadow);
}

.npm-duel__flag {
	position: absolute;
	top: calc(-1 * var(--npm-space-3));
	left: var(--npm-space-5);
	background: var(--npm-yellow);
	color: var(--npm-navy);
	border-radius: 999px;
	padding: 0.25em 0.9em;
	font-size: var(--npm-text-xs);
	font-weight: var(--npm-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--npm-track-eyebrow);
}

.npm-duel__card h3 {
	margin: 0;
	color: var(--npm-navy);
	font-size: var(--npm-text-xl);
	font-weight: var(--npm-weight-plate);
}

.npm-duel__price {
	font-size: var(--npm-text-3xl);
	font-weight: var(--npm-weight-plate);
	color: var(--npm-navy);
}

.npm-duel__price small {
	font-size: var(--npm-text-sm);
	font-weight: var(--npm-weight-normal);
	color: var(--npm-text-muted);
	margin-left: var(--npm-space-2);
}

.npm-duel__card ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--npm-space-2);
	flex: 1;
}

.npm-duel__card li {
	padding-left: 1.6em;
	position: relative;
	color: var(--npm-grey-700);
	line-height: var(--npm-leading-normal);
}

.npm-duel__card li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--npm-success);
	font-weight: var(--npm-weight-bold);
}

/* ══ Use-case tile grid ════════════════════════════════════════ */
.npm-usecases {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--npm-space-4);
	margin-top: var(--npm-space-6);
}

@media (max-width: 900px) {
	.npm-usecases {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.npm-usecases {
		grid-template-columns: 1fr;
	}
}

.npm-usecase {
	background: var(--npm-surface);
	border: 1px solid var(--npm-border);
	border-left: 4px solid var(--npm-yellow);
	border-radius: var(--npm-radius);
	padding: var(--npm-space-5);
	box-shadow: var(--npm-shadow-sm);
}

.npm-usecase h3 {
	margin: 0 0 var(--npm-space-2);
	font-size: var(--npm-text-lg);
	color: var(--npm-navy);
}

.npm-usecase p {
	margin: 0;
	color: var(--npm-grey-700);
	font-size: var(--npm-text-sm);
	line-height: var(--npm-leading-normal);
}

/* ══ Layer diagram (how gel/4D is built) ═══════════════════════ */
.npm-layers {
	list-style: none;
	margin: var(--npm-space-6) auto 0;
	padding: 0;
	max-width: 520px;
	display: grid;
	gap: var(--npm-space-2);
	counter-reset: npm-layer;
}

.npm-layers li {
	counter-increment: npm-layer;
	background: var(--npm-surface);
	border: 1px solid var(--npm-border);
	border-radius: var(--npm-radius);
	padding: var(--npm-space-3) var(--npm-space-4) var(--npm-space-3) var(--npm-space-8);
	position: relative;
	box-shadow: var(--npm-shadow-sm);
	line-height: var(--npm-leading-normal);
}

.npm-layers li::before {
	content: counter(npm-layer);
	position: absolute;
	left: var(--npm-space-3);
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--npm-navy);
	color: var(--npm-yellow);
	font-size: var(--npm-text-sm);
	font-weight: var(--npm-weight-bold);
	display: flex;
	align-items: center;
	justify-content: center;
}

.npm-layers li strong {
	color: var(--npm-navy);
}

/* Each successive layer indents slightly - reads as a stack */
.npm-layers li:nth-child(2) { margin-inline: var(--npm-space-2); }
.npm-layers li:nth-child(3) { margin-inline: var(--npm-space-4); }
.npm-layers li:nth-child(4) { margin-inline: var(--npm-space-6); }

/* ══ Price strip ═══════════════════════════════════════════════ */
.npm-price-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--npm-space-4);
	margin-top: var(--npm-space-6);
}

@media (max-width: 720px) {
	.npm-price-strip {
		grid-template-columns: 1fr;
	}
}

.npm-price-strip__item {
	background: var(--npm-surface);
	border: 1px solid var(--npm-border);
	border-radius: var(--npm-radius);
	padding: var(--npm-space-5);
	text-align: center;
	box-shadow: var(--npm-shadow-sm);
}

.npm-price-strip__label {
	display: block;
	font-weight: var(--npm-weight-semibold);
	color: var(--npm-navy);
	margin-bottom: var(--npm-space-2);
}

.npm-price-strip__value {
	display: block;
	font-size: var(--npm-text-3xl);
	font-weight: var(--npm-weight-plate);
	color: var(--npm-navy);
}

.npm-price-strip__note {
	display: block;
	margin-top: var(--npm-space-1);
	font-size: var(--npm-text-sm);
	color: var(--npm-text-muted);
}

/* ══ Inline notice variants (extends .notice-box) ══════════════ */
.npm-notice--warn {
	background: var(--npm-warning-soft);
	border-left: 4px solid var(--npm-warning);
	border-radius: var(--npm-radius);
	padding: var(--npm-space-4) var(--npm-space-5);
	margin-top: var(--npm-space-6);
	color: var(--npm-grey-700);
	line-height: var(--npm-leading-normal);
}

.npm-notice--ok {
	background: var(--npm-success-soft);
	border-left: 4px solid var(--npm-success);
	border-radius: var(--npm-radius);
	padding: var(--npm-space-4) var(--npm-space-5);
	margin-top: var(--npm-space-6);
	color: var(--npm-grey-700);
	line-height: var(--npm-leading-normal);
}

.npm-notice--warn strong,
.npm-notice--ok strong {
	color: var(--npm-navy);
}

/* ══ Document checklists (replacement page) ════════════════════ */
.npm-docs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--npm-space-5);
	margin-top: var(--npm-space-6);
}

@media (max-width: 720px) {
	.npm-docs {
		grid-template-columns: 1fr;
	}
}

.npm-docs__col {
	background: var(--npm-surface);
	border: 1px solid var(--npm-border);
	border-radius: var(--npm-radius);
	padding: var(--npm-space-5);
	box-shadow: var(--npm-shadow-sm);
}

.npm-docs__col h3 {
	margin: 0 0 var(--npm-space-1);
	color: var(--npm-navy);
}

.npm-docs__col > p {
	margin: 0 0 var(--npm-space-3);
	color: var(--npm-text-muted);
	font-size: var(--npm-text-sm);
}

.npm-docs__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--npm-space-2);
}

.npm-docs__col li {
	padding-left: 1.6em;
	position: relative;
	color: var(--npm-grey-700);
	line-height: var(--npm-leading-normal);
}

.npm-docs__col li::before {
	content: "▸";
	position: absolute;
	left: 0;
	color: var(--npm-yellow-deep);
	font-weight: var(--npm-weight-bold);
}

/* ══ Reviews ═══════════════════════════════════════════════════ */
.npm-stars {
	color: var(--npm-yellow);
	display: inline-block;
	font-size: var(--npm-text-lg);
	letter-spacing: 0.15em;
	line-height: 1;
	text-shadow: 0 1px 0 rgba(27, 42, 74, 0.25);
}
.npm-reviews {
	column-count: 3;
	column-gap: var(--npm-space-5);
	margin-top: var(--npm-space-8);
}
.npm-review-card {
	background: var(--npm-white);
	border: 1px solid var(--npm-border);
	border-radius: var(--npm-radius-lg);
	box-shadow: var(--npm-shadow-sm);
	break-inside: avoid;
	display: block;
	margin: 0 0 var(--npm-space-5);
	padding: var(--npm-space-5);
}
.npm-review-card__quote {
	color: var(--npm-text);
	margin: var(--npm-space-3) 0;
	white-space: pre-line;
}
.npm-review-card__source {
	align-items: center;
	display: flex;
	gap: var(--npm-space-2);
	justify-content: space-between;
	margin-top: var(--npm-space-3);
}
.npm-review-card__name {
	color: var(--npm-navy);
	font-family: var(--npm-font-display);
	font-weight: var(--npm-weight-semibold);
	text-decoration: none;
}
.npm-review-card__name:hover {
	text-decoration: underline;
}
.npm-review-card__badge {
	background: var(--npm-canvas-alt);
	border: 1px solid var(--npm-border);
	border-radius: 999px;
	color: var(--npm-text-muted);
	font-size: var(--npm-text-xs);
	font-weight: var(--npm-weight-semibold);
	letter-spacing: 0.04em;
	padding: 2px 10px;
	text-transform: uppercase;
	white-space: nowrap;
}
.npm-review-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--npm-space-4);
	justify-content: center;
	margin-top: var(--npm-space-6);
}
.npm-review-stats__item {
	background: rgba(255, 255, 255, 0.65);
	border: 2px solid var(--npm-navy);
	border-radius: var(--npm-radius-lg);
	min-width: 170px;
	padding: var(--npm-space-4) var(--npm-space-5);
	text-align: center;
}
.npm-review-stats__value {
	color: var(--npm-navy);
	display: block;
	font-family: var(--npm-font-display);
	font-size: var(--npm-text-2xl);
	font-weight: var(--npm-weight-plate);
	line-height: 1.1;
}
.npm-review-stats__label {
	color: var(--npm-navy);
	display: block;
	font-size: var(--npm-text-sm);
	margin-top: 2px;
}
@media (max-width: 900px) {
	.npm-reviews { column-count: 2; }
}
@media (max-width: 640px) {
	.npm-reviews { column-count: 1; }
}

/* ══ Contact form (Gravity Forms wrapper) ══════════════════════ */
.npm-contact-grid {
	align-items: start;
	display: grid;
	gap: var(--npm-space-8);
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.npm-contact-card {
	background: var(--npm-white);
	border: 1px solid var(--npm-border);
	border-radius: var(--npm-radius-lg);
	box-shadow: var(--npm-shadow);
	padding: var(--npm-space-6);
}
.npm-contact-card .gform_wrapper input[type="text"],
.npm-contact-card .gform_wrapper input[type="email"],
.npm-contact-card .gform_wrapper input[type="tel"],
.npm-contact-card .gform_wrapper input[type="number"],
.npm-contact-card .gform_wrapper select,
.npm-contact-card .gform_wrapper textarea {
	background: var(--npm-canvas);
	border: 1px solid var(--npm-border);
	border-radius: var(--npm-radius);
	color: var(--npm-text);
	font-family: var(--npm-font-body);
	font-size: var(--npm-text-base);
	padding: 10px 14px;
	width: 100%;
}
.npm-contact-card .gform_wrapper input:focus,
.npm-contact-card .gform_wrapper select:focus,
.npm-contact-card .gform_wrapper textarea:focus {
	border-color: var(--npm-navy);
	box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.35);
	outline: none;
}
.npm-contact-card .gform_wrapper .gfield_label {
	color: var(--npm-navy);
	font-family: var(--npm-font-display);
	font-weight: var(--npm-weight-semibold);
}
.npm-contact-card .gform_wrapper .gform_button,
.npm-contact-card .gform_wrapper input[type="submit"] {
	background: var(--npm-yellow);
	border: 2px solid var(--npm-navy);
	border-radius: var(--npm-radius);
	color: var(--npm-navy);
	cursor: pointer;
	font-family: var(--npm-font-display);
	font-weight: var(--npm-weight-bold);
	padding: 12px 28px;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.npm-contact-card .gform_wrapper .gform_button:hover,
.npm-contact-card .gform_wrapper input[type="submit"]:hover {
	box-shadow: var(--npm-shadow);
	transform: translateY(-1px);
}
.npm-contact-card .gform_wrapper .gform_validation_errors,
.npm-contact-card .gform_wrapper .gfield_validation_message {
	border-radius: var(--npm-radius);
}
.npm-contact-points {
	display: grid;
	gap: var(--npm-space-4);
	margin-top: var(--npm-space-6);
}
.npm-contact-points .npm-usecase {
	margin: 0;
}
@media (max-width: 860px) {
	.npm-contact-grid { grid-template-columns: 1fr; }
}

/* ══ Printed 3D-effect plate mock (two-tone shadow) ════════════ */
.npm-plate-mock--fx3d .npm-plate-mock__text {
	text-shadow:
		1px 1px 0 #7c828c,
		2px 2px 0 #868c96,
		3px 3px 0 #9098a2,
		4px 4px 2px rgba(27, 42, 74, 0.35);
}