/*
 * JPT Laser Shop — global design system
 *
 * Loaded site-wide via woodmart-child functions.php enqueue.
 *
 * Architecture: components are scoped by their own class names so they work
 * across product, application, customer_story, and page post types. The
 * heading rhythm and typography are applied via body-class selectors so we
 * pick up every content context Woodmart renders.
 */

:root {
	/* Type — Inter via Google Fonts */
	--jpt-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--jpt-font-num:   'Inter', monospace;

	/* Brand */
	--jpt-red:        #C8102E;
	--jpt-red-dark:   #9B0C24;
	--jpt-red-soft:   #FFEEF1;
	/* Brighter red for text on DARK surfaces only — #C8102E is just 3.1:1 on
	   ink and fails WCAG 1.4.3. This passes ~5.7:1 on ink / 6.2:1 on footer
	   black. Do NOT use on light backgrounds (only 3.2:1 on white). */
	--jpt-red-on-dark: #FF4D5E;
	/* Brighter green for the ✓ on the dark vs-"us" card — #137754 is 2.7:1
	   there (fails WCAG 1.4.3). This is ~7.7:1 on the dark gradient. */
	--jpt-success-on-dark: #34D399;

	/* Ink ramp */
	--jpt-ink:        #0F141A;
	--jpt-ink-2:      #1F2933;
	--jpt-ink-3:      #3E4C59;
	--jpt-ink-4:      #616E7C;
	/* Was #7B8694 (3.7:1 on white — failed WCAG 1.4.3 AA for normal text).
	   Darkened to #6B7280 → 4.83:1 on white / 4.59:1 on surface-2. */
	--jpt-muted:      #6B7280;

	/* Lines + surfaces */
	--jpt-line:       #E4E7EB;
	--jpt-line-soft:  #F0F2F5;
	--jpt-surface:    #FFFFFF;
	--jpt-surface-2:  #F8F9FB;
	--jpt-surface-3:  #F3F5F8;
	--jpt-stripe:     #FAFBFC;

	/* States */
	--jpt-success:    #137754;

	/* Motion — added 2026-05-26 polish sprint. Use these instead of inline durations. */
	--jpt-t-fast:     120ms;
	--jpt-t:          200ms;
	--jpt-t-slow:     400ms;
	--jpt-t-very-slow: 700ms;
	--jpt-ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
	--jpt-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

	/* Focus ring — universal keyboard focus indicator (WCAG 2.4.7) */
	--jpt-focus-ring:      0 0 0 3px rgba(200, 16, 46, 0.40);
	--jpt-focus-ring-dark: 0 0 0 3px rgba(255, 255, 255, 0.55);

	/* Spacing */
	--jpt-stack-xs:   8px;
	--jpt-stack-sm:   14px;
	--jpt-stack-md:   24px;
	--jpt-stack-lg:   40px;
	--jpt-stack-xl:   64px;

	/* Shape */
	--jpt-radius:     8px;
	--jpt-radius-sm:  4px;
	--jpt-radius-lg:  12px;

	/* Depth */
	--jpt-shadow-sm:  0 1px 2px rgba(15, 20, 26, 0.06);
	--jpt-shadow:     0 4px 12px rgba(15, 20, 26, 0.06), 0 1px 3px rgba(15, 20, 26, 0.05);
	--jpt-shadow-lg:  0 12px 32px rgba(15, 20, 26, 0.10), 0 2px 6px rgba(15, 20, 26, 0.06);
	--jpt-glow-red:   0 0 40px rgba(200, 16, 46, 0.35);
}

/* Apply Inter site-wide on JPT page contexts */
body.single-product, body.single-application, body.single-customer_story,
body.page, body.post-type-archive, body.archive {
	font-family: var(--jpt-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.single-product .entry-content,
body.single-application .entry-content,
body.single-customer_story .entry-content,
body.page .entry-content {
	font-family: var(--jpt-font);
}

/* ============================================================
   Heading rhythm + body type — applied to every content context
   ============================================================ */

/* The selector union covers: products, applications, customer stories, regular pages */
.single-product .entry-content > .wp-block-heading,
.single-product .entry-content > h2,
.single-application .entry-content > .wp-block-heading,
.single-application .entry-content > h2,
.single-customer_story .entry-content > .wp-block-heading,
.single-customer_story .entry-content > h2,
.page .entry-content > .wp-block-heading,
.page .entry-content > h2,
.post-type-archive .entry-content > .wp-block-heading,
.post-type-archive .entry-content > h2 {
	margin: var(--jpt-stack-xl) 0 var(--jpt-stack-sm);
	font-weight: 700;
	color: var(--jpt-ink);
	letter-spacing: -0.01em;
	font-size: 30px;
	line-height: 1.15;
	position: relative;
	padding-left: 18px;
}

.single-product .entry-content > .wp-block-heading::before,
.single-product .entry-content > h2::before,
.single-application .entry-content > .wp-block-heading::before,
.single-application .entry-content > h2::before,
.single-customer_story .entry-content > .wp-block-heading::before,
.single-customer_story .entry-content > h2::before,
.page .entry-content > .wp-block-heading::before,
.page .entry-content > h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 4px;
	border-radius: 2px;
	background: var(--jpt-red);
}

.single-product .entry-content > h3.wp-block-heading,
.single-application .entry-content > h3.wp-block-heading,
.single-customer_story .entry-content > h3.wp-block-heading,
.page .entry-content > h3.wp-block-heading {
	/* Only top/bottom here — leave L/R margins to the centered-column rule so
	   on .page the H3 sits in the same 760px column as its body (was margin:0,
	   which pinned the H3 hard-left while the body stayed centred = big gap). */
	margin-top: var(--jpt-stack-md);
	margin-bottom: var(--jpt-stack-xs);
	font-weight: 600;
	color: var(--jpt-ink);
	font-size: 18px;
	line-height: 1.35;
	padding: 0;
	background: transparent;
	border-left: none;
}

/* H3 is a sub-heading with NO red bar — but it still carries the
   .wp-block-heading class, so the heading-bar ::before rule above was painting
   a 4px red bar at left:0 with no padding, overlapping the "1." / "2." text and
   garbling it. Suppress the bar on H3. */
.single-product .entry-content > h3.wp-block-heading::before,
.single-application .entry-content > h3.wp-block-heading::before,
.single-customer_story .entry-content > h3.wp-block-heading::before,
.page .entry-content > h3.wp-block-heading::before {
	content: none;
	display: none;
}

.single-product .entry-content p,
.single-application .entry-content p,
.single-customer_story .entry-content p,
.page .entry-content p {
	color: var(--jpt-ink-3);
	line-height: 1.7;
	font-size: 16px;
	margin: 0 0 var(--jpt-stack-sm);
}

.single-product .entry-content p strong,
.single-product .entry-content li strong,
.single-application .entry-content p strong,
.single-application .entry-content li strong,
.single-customer_story .entry-content p strong,
.single-customer_story .entry-content li strong,
.page .entry-content p strong,
.page .entry-content li strong {
	color: var(--jpt-ink);
	font-weight: 600;
}

.single-product .entry-content ul,
.single-application .entry-content ul,
.single-customer_story .entry-content ul,
.page .entry-content ul {
	color: var(--jpt-ink-3);
	line-height: 1.7;
	margin: 0 0 var(--jpt-stack-md);
	padding-left: 20px;
}

.single-product .entry-content ul li,
.single-application .entry-content ul li,
.single-customer_story .entry-content ul li,
.page .entry-content ul li {
	margin: 0 0 6px;
	padding-left: 4px;
}

/* ============================================================
   Readable measure for page-builder prose (About, Why JPT, etc.)
   These pages mix full-bleed design blocks (jpt-hero / stats /
   callout / trust-strip / related-grid) with plain wp prose. The
   prose had NO width cap, so paragraphs/headings/lists sprawled the
   full ~1340px container (150+ char lines) — the "messy" look.
   Constrain prose to a comfortable centered column; the full-bleed
   jpt-* blocks keep the full width.
   ============================================================ */
.page .entry-content > p,
.page .entry-content > ul,
.page .entry-content > ol,
.page .entry-content > h2,
.page .entry-content > h3,
.page .entry-content > .wp-block-heading,
.page .entry-content > .wp-block-list,
.page .entry-content > blockquote {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* Full-bleed design blocks are never capped, even when wrapped in a
   block-editor <div> or <figure>. */
.page .entry-content > .jpt-hero,
.page .entry-content > .jpt-stats,
.page .entry-content > .jpt-trust-strip,
.page .entry-content > .jpt-callout,
.page .entry-content > .jpt-related-grid,
.page .entry-content > .jpt-cta-block,
.page .entry-content > .jpt-vs,
.page .entry-content > .jpt-big-quote,
.page .entry-content > .jpt-reveal,
.page .entry-content > .wp-block-html,
.page .entry-content > figure,
.page .entry-content > .wp-block-image {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Tabular numerals on data tables and price labels */
.specs-table td,
.compare-table td,
.compare-table th,
.jpt-related-card__when,
.jpt-stats__value {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ============================================================
   Hero — top-of-page eye-catcher on non-product pages
   ============================================================ */

.jpt-hero {
	margin: -40px -20px var(--jpt-stack-lg);
	padding: 56px 32px 48px;
	background:
		radial-gradient(ellipse at top right, rgba(200, 16, 46, 0.22), transparent 55%),
		linear-gradient(135deg, #0F141A 0%, #1F2933 100%);
	color: #fff;
	border-radius: 0 0 var(--jpt-radius-lg) var(--jpt-radius-lg);
	position: relative;
	overflow: hidden;
}

@media (min-width: 768px) {
	.jpt-hero {
		margin: -40px 0 var(--jpt-stack-xl);
		padding: 72px 56px 64px;
	}
}

@media (max-width: 599px) {
	.jpt-hero {
		margin: -20px -16px var(--jpt-stack-lg);
		padding: 40px 20px 32px;
	}
}

.jpt-hero::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--jpt-red), transparent 80%);
}

.jpt-hero__eyebrow {
	display: inline-block;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	padding: 6px 14px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.jpt-hero__title {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 16px;
	color: #fff;
	max-width: 900px;
}

@media (min-width: 768px) {
	.jpt-hero__title { font-size: 48px; }
}

.jpt-hero__lede {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 24px;
	max-width: 700px;
}

@media (min-width: 768px) {
	.jpt-hero__lede { font-size: 19px; }
}

/* The lede is a <p>, so on regular pages the `.page .entry-content p` dark-ink
   rule (specificity 0,2,1) overrides the hero's light lede colour (0,1,0),
   turning it dark grey on the dark hero = invisible. Restore the light colour
   with higher specificity (and cover the CPT hero contexts too). */
.page .entry-content .jpt-hero__lede,
.single-application .entry-content .jpt-hero__lede,
.single-customer_story .entry-content .jpt-hero__lede {
	color: rgba(255, 255, 255, 0.82);
}

.jpt-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.jpt-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.92);
	padding: 8px 14px;
	border-radius: 99px;
	font-size: 13px;
	font-weight: 600;
}

.jpt-hero__pill::before {
	content: "✓";
	color: #6FCF97;
	font-weight: 800;
}

/* ============================================================
   Container constraint — center content on wide screens
   Apply to non-product pages where Woodmart doesn't already constrain
   ============================================================ */

.single-application .site-content > .container,
.single-customer_story .site-content > .container,
.single-application .entry-content,
.single-customer_story .entry-content,
.page-template-default .entry-content {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   Source authenticity badge (above add-to-cart on product pages)
   ------------------------------------------------------------
   Rendered by inc/trust-elements.php at woocommerce_single_product_summary
   priority 35 (between short-description and add-to-cart). The badge is the
   primary above-the-fold trust signal: buyers in the JPT category are
   actively cross-checking model numbers against JPT's own datasheets, so
   surfacing the verified model + class + warranty here directly answers
   "is this real?" before the buyer scrolls.
   ============================================================ */

.jpt-source-badge {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	margin: 0 0 var(--jpt-stack-md);
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-left: 3px solid var(--jpt-red);
	border-radius: var(--jpt-radius);
	box-shadow: var(--jpt-shadow-sm);
	font-family: var(--jpt-font);
	transition: box-shadow var(--jpt-t) var(--jpt-ease),
				transform var(--jpt-t) var(--jpt-ease);
}

.jpt-source-badge:hover {
	box-shadow: var(--jpt-shadow);
	transform: translateY(-1px);
}

.jpt-source-badge__icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	color: var(--jpt-red);
	stroke-width: 2;
}

.jpt-source-badge__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0; /* allow text to wrap inside flex */
}

.jpt-source-badge__title {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jpt-red);
	line-height: 1.2;
}

.jpt-source-badge__meta {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--jpt-ink-2);
	letter-spacing: -0.005em;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.jpt-source-badge__sep {
	color: var(--jpt-muted);
	margin: 0 4px;
	font-weight: 400;
}

.jpt-source-badge__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--jpt-red);
	text-decoration: none;
	letter-spacing: -0.005em;
	border-bottom: 1px solid transparent;
	width: fit-content;
	transition: color var(--jpt-t-fast) var(--jpt-ease),
				border-color var(--jpt-t-fast) var(--jpt-ease);
}

.jpt-source-badge__link:hover {
	color: var(--jpt-red-dark);
	border-bottom-color: currentColor;
}

.jpt-source-badge__link-arrow {
	width: 12px;
	height: 12px;
	transition: transform var(--jpt-t-fast) var(--jpt-ease);
}

.jpt-source-badge__link:hover .jpt-source-badge__link-arrow {
	transform: translateX(2px);
}

.jpt-source-badge__link:focus-visible {
	outline: none;
	box-shadow: var(--jpt-focus-ring);
	border-radius: 2px;
}

/* Tone variants need their own link color so the link matches the accent. */
.jpt-source-badge--standard .jpt-source-badge__link,
.jpt-source-badge--cleaning .jpt-source-badge__link {
	color: var(--jpt-ink-2);
}
.jpt-source-badge--standard .jpt-source-badge__link:hover,
.jpt-source-badge--cleaning .jpt-source-badge__link:hover {
	color: var(--jpt-ink);
}

.jpt-source-badge--uv .jpt-source-badge__link {
	color: #6B46C1;
}
.jpt-source-badge--uv .jpt-source-badge__link:hover {
	color: #553098;
}

/* Tone variants: subtle accent shift by source tier. */
.jpt-source-badge--premium {
	/* M7 / M8: full brand red accent (default). */
}

.jpt-source-badge--standard {
	/* LP / E-series: same layout, slightly cooler accent. */
	border-left-color: var(--jpt-ink-3);
}
.jpt-source-badge--standard .jpt-source-badge__icon,
.jpt-source-badge--standard .jpt-source-badge__title {
	color: var(--jpt-ink-2);
}

.jpt-source-badge--uv {
	/* UV DPSS: keep brand red but call out wavelength character. */
	border-left-color: #6B46C1; /* deep violet to evoke 355 nm UV */
}
.jpt-source-badge--uv .jpt-source-badge__icon,
.jpt-source-badge--uv .jpt-source-badge__title {
	color: #6B46C1;
}

.jpt-source-badge--cleaning {
	/* Cleaning class: neutral until warranty confirmed; uses ink-3. */
	border-left-color: var(--jpt-ink-3);
}
.jpt-source-badge--cleaning .jpt-source-badge__icon,
.jpt-source-badge--cleaning .jpt-source-badge__title {
	color: var(--jpt-ink-2);
}

/* Mobile: stack icon over text on very narrow widths. */
@media (max-width: 480px) {
	.jpt-source-badge {
		padding: 12px 14px;
		gap: 10px;
	}
	.jpt-source-badge__title { font-size: 11px; }
	.jpt-source-badge__meta { font-size: 12.5px; }
	.jpt-source-badge__icon { width: 24px; height: 24px; }
}

/* Reduce-motion: drop hover lift. */
@media (prefers-reduced-motion: reduce) {
	.jpt-source-badge,
	.jpt-source-badge:hover {
		transition: none;
		transform: none;
	}
}

/* Keyboard focus path (badge has role="note", not a link, but if it ever
   becomes interactive in a future iteration the focus ring is wired up). */
.jpt-source-badge:focus-visible {
	outline: none;
	box-shadow: var(--jpt-focus-ring), var(--jpt-shadow);
}

/* ============================================================
   Trust strip (universal)
   ============================================================ */

.jpt-trust-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: var(--jpt-line);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	overflow: hidden;
	margin: 0 0 var(--jpt-stack-lg);
	box-shadow: var(--jpt-shadow-sm);
}

.jpt-trust-strip__item {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--jpt-surface);
	padding: 14px 16px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--jpt-ink);
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.jpt-trust-strip__item::before {
	content: "✓";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: var(--jpt-success);
	border-radius: 50%;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   Specifications table (universal)
   ============================================================ */

.specs-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--jpt-stack-md);
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	overflow: hidden;
	font-size: 15px;
	box-shadow: var(--jpt-shadow-sm);
}

.specs-table tbody tr {
	border-bottom: 1px solid var(--jpt-line-soft);
	transition: background-color 0.12s ease;
}

.specs-table tbody tr:last-child { border-bottom: none; }
.specs-table tbody tr:nth-child(even) { background: var(--jpt-stripe); }
.specs-table tbody tr:hover { background: var(--jpt-red-soft); }

.specs-table th {
	text-align: left;
	font-weight: 600;
	color: var(--jpt-ink);
	padding: 12px 18px;
	width: 45%;
	vertical-align: top;
	background: transparent;
	font-size: 14px;
}

.specs-table td {
	color: var(--jpt-ink-2);
	padding: 12px 18px;
	vertical-align: top;
	font-size: 15px;
	font-weight: 500;
}

@media (max-width: 600px) {
	.specs-table { font-size: 14px; }
	.specs-table th, .specs-table td { padding: 10px 12px; }
	.specs-table th { width: 50%; font-size: 13px; }
}

/* Wide spec/config tables on mobile: the table has overflow:hidden (for its
   rounded corners), so a 4-column table (e.g. the Configuration summary) was
   CLIPPED on the right instead of scrolling. Make it scroll horizontally, and
   for multi-column tables (those with a <thead> header row) size columns to
   content with a sensible min-width so they stay readable when swiped, rather
   than cramming 4 columns into 360px and over-wrapping. */
@media (max-width: 767px) {
	.specs-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* right-edge scroll shadow hint; disappears at scroll end */
		background:
			radial-gradient(farthest-side at 100% 50%, rgba(15,20,26,0.15), transparent) 100% 0 / 16px 100% no-repeat;
		background-attachment: scroll;
	}
	.specs-table thead th { width: auto; }
	.specs-table thead ~ tbody th,
	.specs-table thead ~ tbody td { min-width: 104px; }
	/* the last column is usually a "best for / use cases" description — give it
	   enough width to read comfortably while the table scrolls. */
	.specs-table thead ~ tbody td:last-child,
	.specs-table thead th:last-child { min-width: 190px; }
}

/* ============================================================
   Compare table (universal)
   ============================================================ */

.compare-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 var(--jpt-stack-md);
	border-radius: var(--jpt-radius);
	border: 1px solid var(--jpt-line);
	box-shadow: var(--jpt-shadow-sm);
}

/* Mobile: these comparison tables are wider than the screen and scroll
   horizontally. Add a "Swipe to compare" hint + a right-edge shadow so it is
   obvious there are more columns (skill rule: swipe-clarity). The shadow uses
   the CSS scroll-shadow technique and disappears once scrolled to the end. */
@media (max-width: 767px) {
	.compare-table-wrap {
		background:
			radial-gradient(farthest-side at 100% 50%, rgba(15,20,26,0.16), transparent) 100% 0 / 16px 100% no-repeat,
			linear-gradient(to right, transparent, var(--jpt-surface) 80%) 100% 0 / 40px 100% no-repeat;
		background-attachment: scroll, local;
	}
	.compare-table-wrap::before {
		content: "Swipe to compare \2192";
		position: sticky;
		left: 0;
		display: block;
		padding: 8px 14px 0;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--jpt-muted);
	}
}

.compare-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	background: var(--jpt-surface);
	font-size: 14.5px;
}

.compare-table thead th {
	background: var(--jpt-ink);
	color: #fff;
	font-weight: 600;
	text-align: center;
	padding: 14px 14px 18px;
	font-size: 13px;
	letter-spacing: 0.02em;
	vertical-align: top;
	border-bottom: none;
	line-height: 1.3;
}

.compare-table thead th:first-child {
	background: var(--jpt-ink);
	text-align: left;
}

.compare-table thead th.highlight {
	background: var(--jpt-red);
	position: relative;
}

.compare-table thead th.highlight .compare-flag {
	display: inline-block;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	padding: 3px 10px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 99px;
	margin-bottom: 8px;
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.compare-table tbody td {
	padding: 12px 14px;
	border-top: 1px solid var(--jpt-line-soft);
	text-align: center;
	color: var(--jpt-ink-2);
	vertical-align: middle;
	font-weight: 500;
}

.compare-table tbody td:first-child {
	text-align: left;
	font-weight: 600;
	color: var(--jpt-ink);
	background: var(--jpt-surface-2);
	border-right: 1px solid var(--jpt-line-soft);
	white-space: nowrap;
}

.compare-table tbody td.highlight {
	background: var(--jpt-red-soft);
	color: var(--jpt-ink);
	font-weight: 700;
	border-left: 2px solid var(--jpt-red);
	border-right: 2px solid var(--jpt-red);
}

.compare-table tbody tr:last-child td.highlight {
	border-bottom: 2px solid var(--jpt-red);
}

.compare-table tbody tr:nth-child(odd) td:not(.highlight):not(:first-child) {
	background: var(--jpt-stripe);
}

/* ============================================================
   Application grid + tile (universal)
   ============================================================ */

.application-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0 0 var(--jpt-stack-md);
}

@media (min-width: 600px) { .application-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .application-grid { grid-template-columns: repeat(3, 1fr); } }

.application-tile {
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	box-shadow: var(--jpt-shadow-sm);
}

.application-tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--jpt-shadow-lg);
	border-color: var(--jpt-ink-3);
}

.application-image-placeholder {
	height: 200px;
	display: flex;
	align-items: flex-end;
	padding: 16px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	font-style: italic;
	text-align: left;
	position: relative;
	background:
		linear-gradient(135deg, rgba(15, 20, 26, 0) 0%, rgba(15, 20, 26, 0.85) 100%),
		linear-gradient(45deg, var(--jpt-ink-2) 0%, var(--jpt-ink-3) 100%);
}

.application-image-placeholder::before {
	content: "Photo coming soon";
	position: absolute;
	top: 16px;
	left: 16px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	padding: 4px 10px;
	border-radius: 99px;
	font-style: normal;
}

.application-tile h3 {
	margin: 18px 18px 8px !important;
	font-size: 17px !important;
	color: var(--jpt-ink) !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

.application-tile p {
	margin: 0 18px 18px !important;
	font-size: 14px !important;
	color: var(--jpt-ink-3) !important;
	line-height: 1.55 !important;
	flex-grow: 1;
}

/* ============================================================
   Policy chips row (universal)
   ============================================================ */

.jpt-policy-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: var(--jpt-stack-md) 0;
}

.jpt-policy-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: 99px;
	font-size: 13px;
	color: var(--jpt-ink-2);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.jpt-policy-chip::before {
	content: "→";
	color: var(--jpt-red);
	font-weight: 700;
	transition: transform 0.15s ease;
}

a.jpt-policy-chip:hover {
	border-color: var(--jpt-red);
	color: var(--jpt-red);
	box-shadow: 0 0 0 3px var(--jpt-red-soft);
	text-decoration: none;
}

a.jpt-policy-chip:hover::before { transform: translateX(2px); }

/* ============================================================
   CTA block (universal)
   ============================================================ */

.jpt-cta-block {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: var(--jpt-stack-lg) 0;
	padding: 24px;
	background: linear-gradient(135deg, var(--jpt-surface) 0%, var(--jpt-surface-2) 100%);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	box-shadow: var(--jpt-shadow-sm);
}

.jpt-cta-block__intro {
	flex: 1 1 100%;
	margin: 0 0 6px;
	font-weight: 600;
	color: var(--jpt-ink);
	font-size: 16px;
}

@media (min-width: 700px) {
	.jpt-cta-block__intro { flex: 1 1 auto; min-width: 0; margin: 0; }
}

.jpt-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: var(--jpt-surface);
	color: var(--jpt-ink);
	border: 1.5px solid var(--jpt-line);
	border-radius: var(--jpt-radius-sm);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	line-height: 1;
	box-shadow: var(--jpt-shadow-sm);
}

.jpt-cta-btn:hover {
	border-color: var(--jpt-ink-3);
	color: var(--jpt-ink);
	transform: translateY(-1px);
	box-shadow: var(--jpt-shadow);
	text-decoration: none;
	background: var(--jpt-surface);
}

.jpt-cta-btn--primary {
	background: var(--jpt-ink);
	color: #fff;
	border-color: var(--jpt-ink);
}

.jpt-cta-btn--primary:hover {
	background: var(--jpt-red);
	color: #fff;
	border-color: var(--jpt-red);
	box-shadow: 0 6px 14px rgba(200, 16, 46, 0.25);
}

.jpt-cta-btn__icon { font-size: 16px; line-height: 1; }

/* ============================================================
   FAQ block (universal)
   ============================================================ */

.jpt-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 var(--jpt-stack-md);
}

.jpt-faq h3 {
	margin: 0 !important;
	padding: 16px 18px 16px 44px !important;
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius-sm);
	font-size: 16px;
	font-weight: 600;
	color: var(--jpt-ink);
	position: relative;
	box-shadow: var(--jpt-shadow-sm);
}

.jpt-faq h3::before {
	content: "?";
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: var(--jpt-red);
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.jpt-faq__answer {
	margin: -4px 0 8px 18px !important;
	padding: 4px 0 12px 24px !important;
	border-left: 2px solid var(--jpt-line);
	color: var(--jpt-ink-3) !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
}

/* ============================================================
   Customer quote (universal)
   ============================================================ */

.jpt-customer-quote {
	background: var(--jpt-surface-2);
	border-left: 4px solid var(--jpt-ink);
	padding: 28px 32px;
	margin: var(--jpt-stack-md) 0 var(--jpt-stack-lg);
	border-radius: 0 var(--jpt-radius) var(--jpt-radius) 0;
	position: relative;
	box-shadow: var(--jpt-shadow-sm);
}

.jpt-customer-quote::before {
	content: '"';
	position: absolute;
	top: 12px;
	right: 24px;
	font-size: 72px;
	line-height: 1;
	color: var(--jpt-line);
	font-family: Georgia, serif;
	pointer-events: none;
}

.jpt-customer-quote p {
	font-size: 17px !important;
	line-height: 1.55 !important;
	color: var(--jpt-ink) !important;
	font-style: italic;
	margin: 0 0 12px !important;
	position: relative;
}

.jpt-customer-quote cite {
	font-style: normal;
	font-size: 13px;
	color: var(--jpt-muted);
	font-weight: 600;
	display: block;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ============================================================
   Related card grid (universal)
   ============================================================ */

.jpt-related-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: var(--jpt-stack-md) 0 var(--jpt-stack-lg);
}

@media (min-width: 600px) { .jpt-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .jpt-related-grid { grid-template-columns: repeat(4, 1fr); } }

.jpt-related-card {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--jpt-shadow-sm);
	position: relative;
	overflow: hidden;
}

.jpt-related-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--jpt-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.jpt-related-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--jpt-shadow-lg);
	border-color: var(--jpt-line);
	text-decoration: none;
}

.jpt-related-card:hover::after { transform: scaleX(1); }

.jpt-related-card__name {
	font-weight: 700;
	color: var(--jpt-ink);
	font-size: 15.5px;
	margin: 0 0 8px;
	line-height: 1.3;
}

.jpt-related-card__when {
	color: var(--jpt-ink-3);
	font-size: 13.5px;
	line-height: 1.5;
	flex-grow: 1;
	margin: 0 0 14px !important;
}

.jpt-related-card__cta {
	color: var(--jpt-red);
	font-weight: 600;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.jpt-related-card__cta::after {
	content: "→";
	transition: transform 0.18s ease;
}

.jpt-related-card:hover .jpt-related-card__cta::after { transform: translateX(4px); }

/* ============================================================
   Footer (used site-wide)
   ============================================================ */

.wd-footer .container.main-footer {
	padding: 0;
	max-width: 100%;
}

.jpt-footer {
	background: var(--jpt-ink);
	color: rgba(255, 255, 255, 0.78);
	padding: 56px 32px 24px;
	width: 100%;
}

@media (max-width: 600px) { .jpt-footer { padding: 40px 18px 16px; } }

.jpt-footer__grid {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	gap: 32px;
	grid-template-columns: 1.4fr repeat(4, 1fr);
}

@media (max-width: 1023px) {
	.jpt-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}

@media (max-width: 599px) {
	.jpt-footer__grid { grid-template-columns: 1fr; gap: 24px; }
}

.jpt-footer__col { display: flex; flex-direction: column; }

.jpt-footer__heading {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.jpt-footer__lede {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 14px;
}

.jpt-footer__badge {
	display: inline-block;
	background: rgba(200, 16, 46, 0.15);
	color: #fff;
	border: 1px solid rgba(200, 16, 46, 0.4);
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.jpt-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jpt-footer__links li { margin: 0 0 8px; padding: 0; }

.jpt-footer__links a {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	text-decoration: none;
	transition: color 0.15s ease, padding-left 0.15s ease;
	display: inline-block;
}

.jpt-footer__links a:hover {
	color: var(--jpt-red-on-dark);
	padding-left: 4px;
}

.jpt-footer__email {
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
	margin-bottom: 12px;
	padding-bottom: 2px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.jpt-footer__email:hover { border-bottom-color: var(--jpt-red); }

.jpt-footer__address {
	color: rgba(255, 255, 255, 0.7);
	font-size: 13.5px;
	line-height: 1.7;
	margin: 0 0 14px;
}

.jpt-footer__langs {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	line-height: 1.6;
	margin: 0;
}

.jpt-footer__langs strong { color: rgba(255, 255, 255, 0.85); }

.jpt-footer__trust {
	max-width: 1320px;
	margin: 40px auto 0;
	padding: 20px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 12.5px;
	font-weight: 500;
}

.jpt-footer__trust span {
	position: relative;
	padding-left: 18px;
	display: inline-flex;
	align-items: center;
}

.jpt-footer__trust span::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--jpt-red-on-dark);
	font-weight: 800;
	font-size: 14px;
}

.jpt-footer__copyright {
	max-width: 1320px;
	margin: 24px auto 0;
	padding: 24px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.45);
}

.jpt-footer__copyright p { margin: 0; line-height: 1.6; }

.jpt-footer__copyright a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	margin: 0 4px;
}

.jpt-footer__copyright a:hover { color: var(--jpt-red-on-dark); text-decoration: none; }

/* Clean grid look — drop the emoji icons in matrix cells */
.jpt-matrix__icon { display: none; }
.jpt-matrix__cell { padding: 20px 14px; }
.jpt-matrix__name { font-weight: 700; font-size: 13.5px; }

.wd-bottom-footer-row, .copyrights-wrapper {
	background: #050709 !important;
	color: rgba(255, 255, 255, 0.5);
	padding: 14px 0;
	font-size: 13px;
}

.wd-bottom-footer-row a, .copyrights-wrapper a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}

.wd-bottom-footer-row a:hover, .copyrights-wrapper a:hover {
	color: var(--jpt-red-on-dark);
}

/* ============================================================
   Brand row (Woodmart product brand display)
   ============================================================ */

.single-product .wd-product-brands {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.single-product .wd-product-brands a {
	color: var(--jpt-muted);
	text-decoration: none;
}

.single-product .wd-product-brands a:hover { color: var(--jpt-red); }

/* ============================================================
   Page title — give it serious weight on non-product pages
   ============================================================ */

/* Target the title TEXT element (h1.entry-title.title) only — NOT the
   .wd-page-title.page-title bar container, or its font-size leaks down to
   the breadcrumb nav inside it. */
.single-application .entry-title,
.single-customer_story .entry-title,
.page-template-default .entry-title,
.page .wd-page-title .title,
.single-application h1.page-title,
.single-customer_story h1.page-title {
	font-size: 38px;
	font-weight: 700;
	color: var(--jpt-ink);
	letter-spacing: -0.015em;
	line-height: 1.15;
	margin-bottom: var(--jpt-stack-md);
}

/* ============================================================
   Woodmart breadcrumbs (.wd-breadcrumbs) — small, muted, intentional.
   Woodmart sets no explicit size, so without this the nav inherits the
   page-title size. Applies wherever the breadcrumb bar renders.
   ============================================================ */
.wd-breadcrumbs {
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
	color: var(--jpt-muted);
	margin-top: 10px;
}

.wd-breadcrumbs a {
	color: var(--jpt-ink-4);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--jpt-t) var(--jpt-ease);
}

.wd-breadcrumbs a:hover {
	color: var(--jpt-red);
}

.wd-breadcrumbs .wd-last {
	color: var(--jpt-muted);
	font-weight: 500;
}

.wd-breadcrumbs .wd-delimiter {
	color: var(--jpt-line);
	margin: 0 8px;
}

@media (min-width: 768px) {
	.single-application .entry-title,
	.single-customer_story .entry-title,
	.page-template-default .entry-title,
	.page .wd-page-title .title { font-size: 44px; }
}

/* When the page uses our hero, suppress the default Woodmart page-title
   since the hero already shows the title */
.jpt-hero ~ .entry-title,
.jpt-hero ~ .page-title { display: none; }

/* ============================================================
   HIDE Woodmart page title bar (entry-title + breadcrumb) on any
   page that has our custom hero — prevents duplicate H1 + duplicate
   page name. Uses :has() (modern browsers) so legacy pages without
   our hero still show the Woodmart title bar as a fallback.
   ============================================================ */

body:has(.jpt-hero) .wd-page-title,
body:has(.jpt-hero) > .wd-page-title,
body:has(.jpt-hero) .main-page-wrapper > .wd-page-title {
	display: none !important;
}

/* Hide author + date meta + duplicate post title on application
   and customer_story CPT pages — these are content pages, not blog
   posts. Our hero shows the page title; meta has no value here. */

body.single-application .wd-post-meta,
body.single-customer_story .wd-post-meta,
body.single-application .wd-post-title,
body.single-customer_story .wd-post-title,
body.single-application .wd-entities-title.wd-post-title,
body.single-customer_story .wd-entities-title.wd-post-title,
body.single-application .wd-meta-author,
body.single-customer_story .wd-meta-author,
body.single-application .wd-meta-date,
body.single-customer_story .wd-meta-date {
	display: none !important;
}

/* ============================================================
   FULL WIDTH for applications + customer stories
   (Remove sidebar; page hits edge to edge inside its container)
   ============================================================ */

/* Woodmart 2024+ uses CSS-grid layout with --wd-col-lg custom property
   on each child. We must override the inline style on .wd-content-area
   (set to col 9) and hide the sidebar entirely. */

body.single-application .wd-sidebar,
body.single-customer_story .wd-sidebar,
body.single-application .sidebar-container,
body.single-customer_story .sidebar-container,
body.single-application aside.wd-sidebar,
body.single-customer_story aside.wd-sidebar {
	display: none !important;
}

body.single-application .wd-content-area,
body.single-customer_story .wd-content-area,
body.page .wd-content-area,
body.page-id-67 .wd-content-area {
	--wd-col-lg: 12 !important;
	--wd-col-md: 12 !important;
	--wd-col-sm: 12 !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	grid-column: 1 / -1 !important;
}

body.single-application .wd-content-layout,
body.single-customer_story .wd-content-layout,
body.page .wd-content-layout {
	--wd-col-lg: 12 !important;
}

/* Hide sidebar on pages too */
body.page .wd-sidebar,
body.page .sidebar-container,
body.page aside.wd-sidebar {
	display: none !important;
}

/* ============================================================
   Hero — refined with Inter + better gradient + parallax depth
   ============================================================ */

.jpt-hero {
	font-family: var(--jpt-font);
}

.jpt-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 90% 10%, rgba(200, 16, 46, 0.18), transparent 40%),
		radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.04), transparent 50%);
	pointer-events: none;
}

.jpt-hero > * { position: relative; }

.jpt-hero__title {
	font-family: var(--jpt-font);
	font-weight: 700;
}

/* ============================================================
   SCROLL PROGRESS BAR at top of viewport
   ============================================================ */

.jpt-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--jpt-red), var(--jpt-red-dark));
	transform: scaleX(0);
	transform-origin: left;
	z-index: 9999;
	pointer-events: none;
}

/* ============================================================
   STATS SECTION — animated big-number callouts
   ============================================================ */

.jpt-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--jpt-line);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius-lg);
	overflow: hidden;
	margin: var(--jpt-stack-lg) 0;
	box-shadow: var(--jpt-shadow);
}

@media (min-width: 600px) {
	.jpt-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.jpt-stats--3 { grid-template-columns: repeat(3, 1fr); }
	.jpt-stats--4 { grid-template-columns: repeat(4, 1fr); }
}

.jpt-stats__item {
	background: var(--jpt-surface);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
	overflow: hidden;
}

.jpt-stats__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--jpt-red);
	transform: scaleY(0);
	transition: transform 0.5s ease;
	transform-origin: top;
}

.jpt-stats__item.is-visible::before,
.is-visible .jpt-stats__item::before { transform: scaleY(1); }

.jpt-stats__value {
	font-family: var(--jpt-font-num);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.05;
	color: var(--jpt-ink);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	/* Keep the figure + unit on one tidy baseline; never overflow. */
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}

@media (min-width: 768px) {
	.jpt-stats__value { font-size: 50px; }
}

/* Worded unit beside the figure (e.g. "languages", "SKUs", "yr").
   Small, uppercase, muted — the corporate "big number + small unit" look. */
.jpt-stats__unit {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--jpt-ink-4);
	line-height: 1.2;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.jpt-stats__unit { font-size: 15px; }
}

.jpt-stats__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--jpt-ink-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 6px;
}

.jpt-stats__note {
	font-size: 12.5px;
	color: var(--jpt-muted);
	line-height: 1.5;
	margin-top: 8px;
}

/* Text-only stat value (no count-up animation) — used for "Free", "DDP", etc.
   Looks like a callout but doesn't try to be a number. */
.jpt-stats__value--text {
	font-size: 38px;
	font-weight: 800;
	color: var(--jpt-red);
	letter-spacing: -0.01em;
	line-height: 1;
}

@media (min-width: 768px) {
	.jpt-stats__value--text { font-size: 48px; }
}

/* ============================================================
   CALLOUT — pull-out info box
   ============================================================ */

.jpt-callout {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 18px;
	padding: 22px 26px;
	background: linear-gradient(135deg, var(--jpt-surface) 0%, var(--jpt-red-soft) 100%);
	border: 1px solid var(--jpt-red);
	border-left-width: 4px;
	border-radius: var(--jpt-radius);
	margin: var(--jpt-stack-md) 0;
	align-items: start;
}

.jpt-callout__icon {
	font-size: 22px;
	line-height: 1;
	background: var(--jpt-red);
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-weight: 800;
}

.jpt-callout__text {
	font-size: 15.5px !important;
	line-height: 1.55 !important;
	color: var(--jpt-ink) !important;
	margin: 0 !important;
}

.jpt-callout__text strong {
	color: var(--jpt-red-dark);
	font-weight: 700;
}

/* ============================================================
   TIMELINE — process steps (order → production → delivery)
   ============================================================ */

.jpt-timeline {
	display: grid;
	gap: 0;
	margin: var(--jpt-stack-md) 0;
	position: relative;
}

.jpt-timeline__step {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 20px;
	padding: 20px 0;
	position: relative;
}

.jpt-timeline__step::before {
	content: "";
	position: absolute;
	left: 27px;
	top: 50px;
	bottom: -10px;
	width: 2px;
	background: var(--jpt-line);
}

.jpt-timeline__step:last-child::before { display: none; }

.jpt-timeline__num {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--jpt-ink);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 20px;
	font-family: var(--jpt-font-num);
	z-index: 1;
	box-shadow: var(--jpt-shadow);
}

.jpt-timeline__step.is-highlight .jpt-timeline__num {
	background: var(--jpt-red);
	box-shadow: var(--jpt-glow-red);
}

.jpt-timeline__content {
	padding-top: 6px;
}

.jpt-timeline__title {
	font-weight: 700 !important;
	font-size: 17px !important;
	color: var(--jpt-ink) !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
}

.jpt-timeline__title::before { display: none !important; }

.jpt-timeline__desc {
	font-size: 14.5px !important;
	color: var(--jpt-ink-3) !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

.jpt-timeline__time {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--jpt-red);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: 8px;
	padding: 4px 10px;
	background: var(--jpt-red-soft);
	border-radius: 99px;
}

/* ============================================================
   MATRIX — material compatibility grid
   ============================================================ */

.jpt-matrix {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
	margin: var(--jpt-stack-md) 0;
}

.jpt-matrix__cell {
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	padding: 16px 14px;
	text-align: center;
	transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
	position: relative;
}

.jpt-matrix__cell:hover {
	transform: translateY(-2px);
	border-color: var(--jpt-ink-3);
}

.jpt-matrix__cell--yes { border-color: var(--jpt-success); }
.jpt-matrix__cell--yes::after {
	content: "✓";
	position: absolute;
	top: 8px;
	right: 10px;
	color: var(--jpt-success);
	font-weight: 800;
	font-size: 14px;
}

.jpt-matrix__cell--no { opacity: 0.45; }
.jpt-matrix__cell--no::after {
	content: "✗";
	position: absolute;
	top: 8px;
	right: 10px;
	color: var(--jpt-muted);
	font-weight: 700;
}

.jpt-matrix__icon {
	font-size: 28px;
	margin-bottom: 8px;
	display: block;
	line-height: 1;
}

.jpt-matrix__name {
	font-weight: 600;
	font-size: 13px;
	color: var(--jpt-ink);
	letter-spacing: -0.005em;
}

/* ============================================================
   VS CARDS — competitor comparison cards
   ============================================================ */

.jpt-vs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: var(--jpt-stack-md) 0;
}

@media (min-width: 768px) { .jpt-vs { grid-template-columns: repeat(2, 1fr); } }

.jpt-vs__card {
	padding: 24px;
	border-radius: var(--jpt-radius);
	border: 1px solid var(--jpt-line);
	background: var(--jpt-surface);
	box-shadow: var(--jpt-shadow-sm);
	position: relative;
	display: flex;
	flex-direction: column;
}

.jpt-vs__card--us {
	background: linear-gradient(135deg, var(--jpt-ink) 0%, var(--jpt-ink-2) 100%);
	color: #fff;
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-shadow), var(--jpt-glow-red);
}

.jpt-vs__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jpt-muted);
	margin-bottom: 12px;
}

.jpt-vs__card--us .jpt-vs__label { color: var(--jpt-red-on-dark); }

.jpt-vs__name {
	font-size: 20px;
	font-weight: 700;
	color: var(--jpt-ink);
	margin: 0 0 16px !important;
	letter-spacing: -0.01em;
}

.jpt-vs__card--us .jpt-vs__name { color: #fff; }

.jpt-vs__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.jpt-vs__list li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.5;
	margin: 0 !important;
	padding: 0 !important;
}

.jpt-vs__list li::before {
	content: "✓";
	color: var(--jpt-success);
	font-weight: 800;
	font-size: 14px;
	line-height: 1.5;
}

.jpt-vs__card:not(.jpt-vs__card--us) .jpt-vs__list li::before {
	content: "✗";
	color: var(--jpt-muted);
}

/* ✓ on the dark "us" card needs a brighter green for AA contrast */
.jpt-vs__card--us .jpt-vs__list li::before {
	color: var(--jpt-success-on-dark);
}

.jpt-vs__card--us .jpt-vs__list li { color: rgba(255, 255, 255, 0.92); }
.jpt-vs__card:not(.jpt-vs__card--us) .jpt-vs__list li { color: var(--jpt-ink-3); }

/* ============================================================
   BIG QUOTE — full-width customer testimonial style
   ============================================================ */

.jpt-big-quote {
	margin: var(--jpt-stack-lg) 0;
	padding: 48px 40px;
	background: linear-gradient(135deg, #0F141A 0%, #1F2933 100%);
	color: #fff;
	border-radius: var(--jpt-radius-lg);
	position: relative;
	overflow: hidden;
	box-shadow: var(--jpt-shadow-lg);
}

.jpt-big-quote::before {
	content: "“";
	position: absolute;
	top: -20px;
	left: 24px;
	font-size: 200px;
	line-height: 1;
	color: rgba(200, 16, 46, 0.18);
	font-family: Georgia, serif;
	pointer-events: none;
}

.jpt-big-quote__text {
	font-size: 22px !important;
	line-height: 1.4 !important;
	color: #fff !important;
	font-weight: 500;
	margin: 0 0 20px !important;
	font-style: italic;
	max-width: 800px;
	position: relative;
}

@media (min-width: 768px) {
	.jpt-big-quote__text { font-size: 28px !important; }
}

.jpt-big-quote__attr {
	display: flex;
	align-items: center;
	gap: 14px;
}

.jpt-big-quote__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--jpt-red);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 18px;
	flex-shrink: 0;
}

.jpt-big-quote__author {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.3;
}

.jpt-big-quote__role {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	line-height: 1.3;
}

/* ============================================================
   FEATURE ROW — icon + heading + text alternating row
   ============================================================ */

.jpt-features {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: var(--jpt-stack-md) 0;
}

.jpt-feature {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 18px;
	align-items: start;
	padding: 18px 20px;
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.jpt-feature:hover {
	border-color: var(--jpt-red);
	transform: translateX(4px);
}

.jpt-feature__icon {
	width: 48px;
	height: 48px;
	background: var(--jpt-red-soft);
	color: var(--jpt-red);
	border-radius: var(--jpt-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 800;
	flex-shrink: 0;
}

.jpt-feature__title {
	font-weight: 700 !important;
	font-size: 16px !important;
	color: var(--jpt-ink) !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
}

.jpt-feature__title::before { display: none !important; }

.jpt-feature__desc {
	font-size: 14.5px !important;
	color: var(--jpt-ink-3) !important;
	line-height: 1.55 !important;
	margin: 0 !important;
}

/* ============================================================
   STICKY TOC — table of contents anchored to side
   ============================================================ */

.jpt-toc {
	display: none;
}

@media (min-width: 1200px) {
	.jpt-toc {
		display: block;
		position: sticky;
		top: 100px;
		float: right;
		width: 240px;
		margin-left: 32px;
		padding: 20px;
		background: var(--jpt-surface);
		border: 1px solid var(--jpt-line);
		border-radius: var(--jpt-radius);
		box-shadow: var(--jpt-shadow-sm);
		font-size: 13.5px;
		max-height: calc(100vh - 140px);
		overflow-y: auto;
	}
}

.jpt-toc__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jpt-muted);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--jpt-line);
}

.jpt-toc ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.jpt-toc li {
	margin: 0 !important;
	padding: 0 !important;
}

.jpt-toc a {
	display: block;
	padding: 7px 10px 7px 14px;
	color: var(--jpt-ink-3);
	text-decoration: none;
	font-weight: 500;
	border-left: 2px solid transparent;
	transition: color 0.15s ease, border-left-color 0.15s ease, background-color 0.15s ease;
	line-height: 1.4;
}

.jpt-toc a:hover {
	color: var(--jpt-ink);
	background: var(--jpt-surface-2);
	text-decoration: none;
}

.jpt-toc a.is-active {
	color: var(--jpt-red);
	border-left-color: var(--jpt-red);
	font-weight: 700;
	background: var(--jpt-red-soft);
}

/* ============================================================
   REVEAL ON SCROLL — utility class
   ============================================================ */

.jpt-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.jpt-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.jpt-reveal--delay-1 { transition-delay: 0.1s; }
.jpt-reveal--delay-2 { transition-delay: 0.2s; }
.jpt-reveal--delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
	.jpt-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   HOME HERO — full-bleed laser hero with CSS animations
   No JS dependency, no images. Pure CSS. Respects prefers-reduced-motion.
   ============================================================ */

.jpt-home-hero {
	position: relative;
	/* Full-bleed viewport breakout: rastegne se preko container-a do edge ekrana */
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-top: -40px;
	margin-bottom: var(--jpt-stack-xl);
	padding: 80px 32px 96px;
	background: #07090C;
	color: #fff;
	overflow: hidden;
	min-height: 540px;
	display: flex;
	align-items: center;
}

@media (min-width: 768px) {
	.jpt-home-hero { padding: 120px 64px 140px; }
}

@media (max-width: 599px) {
	.jpt-home-hero { padding: 56px 20px 72px; min-height: 480px; }
}

/* Subtle body background gradient on home for layout separation */
body.home {
	background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 600px) #ffffff;
}

body.home .wd-content-area {
	background: transparent;
}

/* Grid pattern background */
.jpt-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(200, 16, 46, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(200, 16, 46, 0.04) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: radial-gradient(circle at 70% 50%, black 0%, transparent 80%);
	-webkit-mask-image: radial-gradient(circle at 70% 50%, black 0%, transparent 80%);
	pointer-events: none;
}

/* Red ambient glow — large, diffuse, multi-stop so it fades smoothly into the
   black instead of ending at a visible edge ("line"). */
.jpt-home-hero::after {
	content: "";
	position: absolute;
	top: -40%;
	right: -30%;
	width: 95%;
	height: 180%;
	background: radial-gradient(ellipse 55% 55% at 70% 45%,
		rgba(200, 16, 46, 0.30) 0%,
		rgba(200, 16, 46, 0.14) 30%,
		rgba(200, 16, 46, 0.05) 50%,
		transparent 74%);
	pointer-events: none;
	animation: jpt-glow-pulse 6s ease-in-out infinite;
}

@keyframes jpt-glow-pulse {
	0%, 100% { opacity: 0.7; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
	.jpt-home-hero::after { animation: none; }
}

/* Mobile: the right-anchored glow fills the right half of a narrow screen and
   its edge looks like a hard vertical seam ("double colour"). Centre it so the
   hero reads as one uniform dark panel with a soft glow at the top, no split.
   (margin-left centring — not transform — so the pulse scale animation still
   works.) Also centre the faint grid mask for symmetry. */
@media (max-width: 767px) {
	.jpt-home-hero::after {
		top: -8%;
		left: 50%;
		right: auto;
		margin-left: -75%;
		width: 150%;
		height: 65%;
		background: radial-gradient(ellipse 70% 55% at 50% 22%, rgba(200, 16, 46, 0.20) 0%, transparent 70%);
	}
	.jpt-home-hero::before {
		mask-image: radial-gradient(circle at 50% 38%, black 0%, transparent 78%);
		-webkit-mask-image: radial-gradient(circle at 50% 38%, black 0%, transparent 78%);
	}
}

/* Animated scanning laser beam */
.jpt-laser-beam {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 70, 100, 0.0) 5%, rgba(255, 70, 100, 0.9) 30%, #ff4664 50%, rgba(255, 70, 100, 0.9) 70%, rgba(255, 70, 100, 0.0) 95%, transparent 100%);
	box-shadow: 0 0 16px rgba(255, 70, 100, 0.8), 0 0 36px rgba(200, 16, 46, 0.5);
	pointer-events: none;
	z-index: 1;
	animation: jpt-laser-scan 5s linear infinite;
}

@keyframes jpt-laser-scan {
	0%   { top: 12%; opacity: 0; }
	5%   { opacity: 1; }
	95%  { opacity: 1; }
	100% { top: 88%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.jpt-laser-beam { display: none; }
}

/* Floating laser dot (pulse) */
.jpt-laser-dot {
	position: absolute;
	top: 30%;
	right: 18%;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ff4664;
	box-shadow: 0 0 12px #ff4664, 0 0 32px rgba(255, 70, 100, 0.6);
	z-index: 2;
	animation: jpt-dot-pulse 2.4s ease-in-out infinite;
	pointer-events: none;
}

.jpt-laser-dot::before,
.jpt-laser-dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid rgba(255, 70, 100, 0.6);
	animation: jpt-dot-ring 2.4s ease-out infinite;
}

.jpt-laser-dot::after { animation-delay: 1.2s; }

@keyframes jpt-dot-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.15); }
}

@keyframes jpt-dot-ring {
	0%   { transform: scale(1);   opacity: 0.9; }
	100% { transform: scale(3.5); opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
	.jpt-laser-dot { animation: none; }
	.jpt-laser-dot::before, .jpt-laser-dot::after { display: none; }
}

/* Hero content (above the animations) */
.jpt-home-hero__inner {
	position: relative;
	z-index: 3;
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}

@media (min-width: 900px) {
	.jpt-home-hero__inner { grid-template-columns: 1.4fr 1fr; gap: 60px; }
}

.jpt-home-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.9);
	padding: 8px 18px;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.jpt-home-hero__eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	background: #ff4664;
	border-radius: 50%;
	box-shadow: 0 0 8px #ff4664;
	animation: jpt-dot-pulse 1.6s ease-in-out infinite;
}

.jpt-home-hero h1 {
	font-size: clamp(36px, 5vw, 64px) !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;
	color: #fff !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
}

.jpt-home-hero h1::before { display: none !important; }

.jpt-home-hero h1 .accent {
	background: linear-gradient(90deg, #ff4664 0%, #C8102E 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
}

.jpt-home-hero__lede {
	font-size: 17px !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.78) !important;
	max-width: 600px;
	margin: 0 0 32px !important;
}

@media (min-width: 768px) {
	.jpt-home-hero__lede { font-size: 19px !important; }
}

.jpt-home-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 32px;
}

.jpt-home-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: var(--jpt-radius-sm);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.jpt-home-hero__cta--primary {
	background: var(--jpt-red);
	color: #fff;
	box-shadow: 0 8px 20px rgba(200, 16, 46, 0.4);
}

.jpt-home-hero__cta--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(200, 16, 46, 0.55);
	color: #fff;
	text-decoration: none;
}

.jpt-home-hero__cta--ghost {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.jpt-home-hero__cta--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
}

.jpt-home-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.jpt-home-hero__pill {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.85);
	padding: 7px 14px;
	border-radius: 99px;
	font-size: 12.5px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.jpt-home-hero__pill::before { content: "✓"; color: #6FCF97; font-weight: 800; }

/* Hero right-side: 3D galvo scene (Three.js) + monitor combo */
.jpt-hero-art {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.jpt-laser-svg {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	height: auto;
	color: #fff;
	filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}

/* ============================================================
   BRAND PANEL — pure CSS hero typography (replaced 3D canvas 2026-05-26)
   Clean brand wordmark + capability tags + live indicator. Zero JS.
   ============================================================ */

.jpt-hero-brand {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 4;
	max-width: 560px;
	margin: 0 auto;
	border-radius: var(--jpt-radius-lg);
	overflow: hidden;
	background:
		radial-gradient(ellipse at 70% 30%, rgba(200, 16, 46, 0.22), transparent 55%),
		linear-gradient(135deg, #07090C 0%, #12181F 100%);
	box-shadow:
		0 30px 60px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.06),
		inset 0 0 80px rgba(200, 16, 46, 0.08);
}

/* Subtle grid pattern background */
.jpt-hero-brand__bg {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
	pointer-events: none;
}

/* Vertical red scan line — sweeps top to bottom every 5s */
.jpt-hero-brand__scan {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(255, 70, 100, 0.0) 8%,
		rgba(255, 70, 100, 0.85) 30%,
		#ff4664 50%,
		rgba(255, 70, 100, 0.85) 70%,
		rgba(255, 70, 100, 0.0) 92%,
		transparent 100%);
	box-shadow:
		0 0 12px rgba(255, 70, 100, 0.7),
		0 0 28px rgba(200, 16, 46, 0.5);
	pointer-events: none;
	z-index: 2;
	animation: jpt-brand-scan 5s linear infinite;
}

@keyframes jpt-brand-scan {
	0%   { top: 5%;  opacity: 0; }
	8%   { opacity: 1; }
	92%  { opacity: 1; }
	100% { top: 95%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.jpt-hero-brand__scan { display: none; }
}

/* Frame corners — small L-shaped accents at each corner */
.jpt-hero-brand__corner {
	position: absolute;
	width: 22px;
	height: 22px;
	pointer-events: none;
	z-index: 2;
}

.jpt-hero-brand__corner::before,
.jpt-hero-brand__corner::after {
	content: "";
	position: absolute;
	background: rgba(255, 255, 255, 0.45);
}

.jpt-hero-brand__corner::before {
	width: 22px;
	height: 1.5px;
}

.jpt-hero-brand__corner::after {
	width: 1.5px;
	height: 22px;
}

.jpt-hero-brand__corner--tl {
	top: 14px;
	left: 14px;
}
.jpt-hero-brand__corner--tl::before { top: 0; left: 0; }
.jpt-hero-brand__corner--tl::after  { top: 0; left: 0; }

.jpt-hero-brand__corner--tr {
	top: 14px;
	right: 14px;
}
.jpt-hero-brand__corner--tr::before { top: 0; right: 0; }
.jpt-hero-brand__corner--tr::after  { top: 0; right: 0; }

.jpt-hero-brand__corner--bl {
	bottom: 14px;
	left: 14px;
}
.jpt-hero-brand__corner--bl::before { bottom: 0; left: 0; }
.jpt-hero-brand__corner--bl::after  { bottom: 0; left: 0; }

.jpt-hero-brand__corner--br {
	bottom: 14px;
	right: 14px;
}
.jpt-hero-brand__corner--br::before { bottom: 0; right: 0; }
.jpt-hero-brand__corner--br::after  { bottom: 0; right: 0; }

/* Content stack */
.jpt-hero-brand__content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 56px 40px;
	text-align: center;
}

/* Source pill at top */
.jpt-hero-brand__source {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-bottom: 28px;
	opacity: 0;
	animation: jpt-brand-fadein 700ms 200ms ease forwards;
}

.jpt-hero-brand__source-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.jpt-hero-brand__source-value {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.06em;
	font-family: var(--jpt-font-num);
	background: rgba(200, 16, 46, 0.18);
	border: 1px solid rgba(200, 16, 46, 0.45);
	padding: 6px 14px;
	border-radius: 99px;
}

/* The wordmark — JPT • LASER */
.jpt-hero-brand__mark {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
	opacity: 0;
	animation: jpt-brand-mark-in 900ms 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.jpt-hero-brand__mark-jpt,
.jpt-hero-brand__mark-laser {
	font-family: var(--jpt-font);
	font-weight: 800;
	font-size: clamp(36px, 6.5vw, 64px);
	line-height: 1;
	letter-spacing: -0.04em;
	color: #fff;
}

.jpt-hero-brand__mark-jpt {
	background: linear-gradient(180deg, #ffffff 0%, #d0d6df 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.jpt-hero-brand__mark-laser {
	background: linear-gradient(135deg, #ff5577 0%, #C8102E 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.jpt-hero-brand__mark-dot {
	width: 10px;
	height: 10px;
	background: var(--jpt-red);
	border-radius: 50%;
	box-shadow: 0 0 12px var(--jpt-red), 0 0 24px rgba(200, 16, 46, 0.5);
	animation: jpt-brand-dot-pulse 1.8s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes jpt-brand-dot-pulse {
	0%, 100% { transform: scale(1);    box-shadow: 0 0 12px var(--jpt-red), 0 0 24px rgba(200, 16, 46, 0.5); }
	50%      { transform: scale(1.25); box-shadow: 0 0 16px var(--jpt-red), 0 0 36px rgba(200, 16, 46, 0.75); }
}

/* Capability tags */
.jpt-hero-brand__caps {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 12px;
	margin-bottom: 28px;
	font-family: var(--jpt-font);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
	opacity: 0;
	animation: jpt-brand-fadein 700ms 700ms ease forwards;
}

.jpt-hero-brand__caps-sep {
	color: var(--jpt-red);
	font-weight: 400;
	font-size: 9px;
	opacity: 0.7;
}

/* Spec line */
.jpt-hero-brand__spec {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 10px;
	font-family: var(--jpt-font-num);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 28px;
	opacity: 0;
	animation: jpt-brand-fadein 700ms 900ms ease forwards;
}

.jpt-hero-brand__spec-sep {
	color: rgba(200, 16, 46, 0.55);
	font-size: 10px;
}

/* Live indicator at bottom */
.jpt-hero-brand__live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 99px;
	opacity: 0;
	animation: jpt-brand-fadein 700ms 1100ms ease forwards;
}

.jpt-hero-brand__live-dot {
	width: 7px;
	height: 7px;
	background: #6FCF97;
	border-radius: 50%;
	box-shadow: 0 0 8px #6FCF97;
	animation: jpt-brand-dot-pulse 2s ease-in-out infinite;
}

.jpt-hero-brand__live-label {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--jpt-font-num);
}

/* Entrance animations */
@keyframes jpt-brand-fadein {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes jpt-brand-mark-in {
	from { opacity: 0; transform: translateY(20px) scale(0.95); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.jpt-hero-brand__source,
	.jpt-hero-brand__mark,
	.jpt-hero-brand__caps,
	.jpt-hero-brand__spec,
	.jpt-hero-brand__live {
		opacity: 1;
		animation: none;
		transform: none;
	}
	.jpt-hero-brand__mark-dot,
	.jpt-hero-brand__live-dot {
		animation: none;
	}
}

/* Mobile — keep all the same content but tighter spacing */
@media (max-width: 599px) {
	.jpt-hero-brand {
		aspect-ratio: 5 / 4.5;
	}
	.jpt-hero-brand__content { padding: 32px 20px; }
	.jpt-hero-brand__mark { gap: 10px; margin-bottom: 18px; }
	.jpt-hero-brand__source { margin-bottom: 20px; }
	.jpt-hero-brand__caps { margin-bottom: 18px; font-size: 10.5px; }
	.jpt-hero-brand__spec { margin-bottom: 18px; font-size: 10.5px; }
}

/* ============================================================
   LEGACY 3D HERO CANVAS — Three.js WebGL galvo scene (disabled 2026-05-26)
   CSS kept for potential future re-enable. Markup removed from home.
   Falls back to nothing on mobile (CSS hides canvas via .is-fallback).
   ============================================================ */

.jpt-hero-3d-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 4;
	max-width: 560px;
	margin: 0 auto;
	border-radius: var(--jpt-radius-lg);
	overflow: hidden;
	box-shadow:
		0 30px 60px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.06),
		inset 0 0 80px rgba(200, 16, 46, 0.08);
	background:
		radial-gradient(ellipse at 70% 30%, rgba(200, 16, 46, 0.18), transparent 55%),
		linear-gradient(135deg, #07090C 0%, #12181F 100%);
}

#jpt-hero-3d {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 600ms var(--jpt-ease);
}

#jpt-hero-3d.is-ready {
	opacity: 1;
}

/* Mobile / no-WebGL fallback: hide the canvas entirely, show fallback static
   art (the existing SVG inside .jpt-laser-svg) */
#jpt-hero-3d.is-fallback {
	display: none;
}

/* Status overlay HUD (positioned over the 3D canvas) */
.jpt-hero-3d-wrap .jpt-hero-3d__hud {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: flex;
	gap: 8px;
	pointer-events: none;
	z-index: 2;
}

.jpt-hero-3d-wrap .jpt-hero-3d__hud-item {
	background: rgba(15, 20, 26, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: rgba(255, 255, 255, 0.9);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: 99px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--jpt-font-num);
}

.jpt-hero-3d-wrap .jpt-hero-3d__hud-item--live::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	background: #ff4664;
	border-radius: 50%;
	margin-right: 6px;
	box-shadow: 0 0 6px #ff4664;
	animation: jpt-dot-pulse 1.6s ease-in-out infinite;
	vertical-align: middle;
}

/* Top-right "JPT M7" tag */
.jpt-hero-3d-wrap .jpt-hero-3d__tag {
	position: absolute;
	right: 14px;
	top: 14px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	pointer-events: none;
	z-index: 2;
}

.jpt-hero-3d-wrap .jpt-hero-3d__tag-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--jpt-font-num);
}

.jpt-hero-3d-wrap .jpt-hero-3d__tag-value {
	font-size: 16px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.01em;
	background: rgba(200, 16, 46, 0.15);
	border: 1px solid rgba(200, 16, 46, 0.4);
	padding: 4px 10px;
	border-radius: 4px;
	font-family: var(--jpt-font-num);
}

/* Hide the legacy F1/F2 SVG when the 3D canvas is loaded */
.jpt-hero-3d-wrap ~ .jpt-laser-svg,
.jpt-home-hero:has(#jpt-hero-3d.is-ready) .jpt-laser-svg {
	display: none;
}

/* Performance: reduce-motion users get a static initial render only */
@media (prefers-reduced-motion: reduce) {
	#jpt-hero-3d {
		opacity: 1;
	}
}

/* Mobile (≤767px): hide the 3D canvas wrapper, fall back to the existing
   F1/F2 SVG which is lighter to render */
@media (max-width: 767px) {
	.jpt-hero-3d-wrap {
		display: none;
	}
}

/* ============================================================
   F1 Preview / F2 Marking SVG animation cycle (8 seconds)
   Phase A (0-2.5s):   F1 PREVIEW — red guide beam draws outline of "JPT LASER"
   Phase B (2.5-5s):   F2 MARKING — actual laser burns the text (fills it solid red)
   Phase C (5-7s):     Hold — show completed mark with steam/sparks
   Phase D (7-8s):     Fade and loop
   ============================================================ */

.jpt-laser-svg .workpiece { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.18); stroke-width: 1; }
.jpt-laser-svg .workpiece-grid { stroke: rgba(255,255,255,0.06); fill: none; }
.jpt-laser-svg .galvo-arm  { stroke: rgba(255,255,255,0.65); fill: rgba(255,255,255,0.03); stroke-width: 1.2; }
.jpt-laser-svg .galvo-head { stroke: var(--jpt-red); fill: rgba(200,16,46,0.15); stroke-width: 1.8; }
.jpt-laser-svg .galvo-lens { fill: rgba(200,16,46,0.5); }

/* The two text layers stacked on top of each other */
.jpt-laser-svg .text-preview,
.jpt-laser-svg .text-marked {
	font-family: 'Inter', Impact, Arial, sans-serif;
	font-size: 38px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

/* Preview text: outline only, red, animated stroke-draw */
.jpt-laser-svg .text-preview {
	fill: none;
	stroke: #ff4664;
	stroke-width: 0.6;
	stroke-dasharray: 800;
	stroke-dashoffset: 800;
	opacity: 0;
	animation: jpt-text-preview-cycle 8s ease-in-out infinite;
	filter: drop-shadow(0 0 4px rgba(255, 70, 100, 0.6));
}

/* Marked text: solid fill, animated clip-path reveal (left-to-right) */
.jpt-laser-svg .text-marked {
	fill: #ff4664;
	clip-path: inset(0 100% 0 0);
	animation: jpt-text-mark-cycle 8s ease-in-out infinite;
	filter: drop-shadow(0 0 6px rgba(200, 16, 46, 0.8));
}

@keyframes jpt-text-preview-cycle {
	0%        { opacity: 0; stroke-dashoffset: 800; }
	5%        { opacity: 1; }
	30%       { opacity: 1; stroke-dashoffset: 0; }
	35%       { opacity: 1; stroke-dashoffset: 0; }
	62%       { opacity: 0.3; stroke-dashoffset: 0; }
	88%       { opacity: 0.3; stroke-dashoffset: 0; }
	95%, 100% { opacity: 0; stroke-dashoffset: 800; }
}

@keyframes jpt-text-mark-cycle {
	0%, 35%   { clip-path: inset(0 100% 0 0); }
	60%       { clip-path: inset(0 0 0 0); }
	88%       { clip-path: inset(0 0 0 0); }
	95%, 100% { clip-path: inset(0 100% 0 0); }
}

/* Galvo beam — points at current marking position, shorter during preview, intense during mark */
.jpt-laser-svg .galvo-beam {
	stroke: #ff4664;
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0;
	animation: jpt-galvo-beam 8s ease-in-out infinite;
	filter: drop-shadow(0 0 8px #ff4664);
}

@keyframes jpt-galvo-beam {
	0%, 5%    { opacity: 0; }
	8%        { opacity: 0.6; }     /* Preview: dim red */
	30%       { opacity: 0.6; }
	35%       { opacity: 0; }
	40%       { opacity: 1; stroke-width: 2.5; }  /* Marking: bright red */
	58%       { opacity: 1; stroke-width: 2.5; }
	62%       { opacity: 0; }
	100%      { opacity: 0; }
}

/* Spark at current marking head — animates along the text path */
.jpt-laser-svg .galvo-spark {
	fill: #fff;
	filter: drop-shadow(0 0 8px #ff4664);
	opacity: 0;
	animation: jpt-spark-cycle 8s ease-in-out infinite;
}

@keyframes jpt-spark-cycle {
	0%, 35%   { opacity: 0; transform: translateX(0); }
	38%       { opacity: 0; transform: translateX(0); }
	40%       { opacity: 1; transform: translateX(0); }
	58%       { opacity: 1; transform: translateX(170px); }
	62%       { opacity: 0; transform: translateX(170px); }
	100%      { opacity: 0; transform: translateX(0); }
}

/* F1 / F2 status badges */
.jpt-laser-svg .status-f1,
.jpt-laser-svg .status-f2 { font-family: 'Inter', monospace; font-size: 9px; font-weight: 800; letter-spacing: 0.18em; }
.jpt-laser-svg .status-f1 rect { fill: rgba(255, 70, 100, 0.15); stroke: #ff4664; }
.jpt-laser-svg .status-f1 text { fill: #ff4664; }
.jpt-laser-svg .status-f2 rect { fill: var(--jpt-red); stroke: var(--jpt-red); }
.jpt-laser-svg .status-f2 text { fill: #fff; }

.jpt-laser-svg .status-f1 {
	opacity: 0;
	animation: jpt-f1-cycle 8s ease-in-out infinite;
}

.jpt-laser-svg .status-f2 {
	opacity: 0;
	animation: jpt-f2-cycle 8s ease-in-out infinite;
}

@keyframes jpt-f1-cycle {
	0%, 5%   { opacity: 0; transform: translateY(-4px); }
	8%       { opacity: 1; transform: translateY(0); }
	33%      { opacity: 1; transform: translateY(0); }
	38%      { opacity: 0; transform: translateY(-4px); }
	100%     { opacity: 0; }
}

@keyframes jpt-f2-cycle {
	0%, 38%  { opacity: 0; transform: translateY(-4px); }
	40%      { opacity: 1; transform: translateY(0); }
	88%      { opacity: 1; transform: translateY(0); }
	92%      { opacity: 0; transform: translateY(-4px); }
	100%     { opacity: 0; }
}

/* Reduced motion: show final marked state, no animation */
@media (prefers-reduced-motion: reduce) {
	.jpt-laser-svg .text-preview { opacity: 0; }
	.jpt-laser-svg .text-marked  { clip-path: inset(0 0 0 0); animation: none; }
	.jpt-laser-svg .galvo-beam,
	.jpt-laser-svg .galvo-spark,
	.jpt-laser-svg .status-f1 { animation: none; opacity: 0; }
	.jpt-laser-svg .status-f2 { animation: none; opacity: 1; }
}

.jpt-hero-monitor {
	position: relative;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--jpt-radius);
	padding: 18px 20px;
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--jpt-font-num);
	overflow: hidden;
}

.jpt-hero-monitor::before {
	content: "";
	position: absolute;
	top: -50%; left: -50%;
	width: 200%; height: 200%;
	background: conic-gradient(from 0deg, transparent 0%, rgba(200, 16, 46, 0.3) 25%, transparent 50%);
	animation: jpt-monitor-rotate 6s linear infinite;
	pointer-events: none;
}

.jpt-hero-monitor > * { position: relative; z-index: 1; }

@keyframes jpt-monitor-rotate {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.jpt-hero-monitor::before { animation: none; }
}

.jpt-hero-monitor__title {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 16px;
}

.jpt-hero-monitor__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 8px 0;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
	font-size: 13px;
}

.jpt-hero-monitor__row:last-child { border-bottom: none; }

.jpt-hero-monitor__label { color: rgba(255, 255, 255, 0.6); }
.jpt-hero-monitor__value {
	color: #fff;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.jpt-hero-monitor__value .unit { color: rgba(255, 255, 255, 0.4); font-weight: 500; margin-left: 2px; font-size: 11px; }

.jpt-hero-monitor__signal {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #6FCF97;
	border-radius: 50%;
	box-shadow: 0 0 8px #6FCF97;
	margin-right: 6px;
	animation: jpt-dot-pulse 1.6s ease-in-out infinite;
}

/* ============================================================
   HOME SECTIONS — categories, applications grid, vs strip
   ============================================================ */

.jpt-home-section {
	margin: 96px 0;
	position: relative;
}

@media (max-width: 768px) {
	.jpt-home-section { margin: 64px 0; }
}

/* Subtle section divider — thin red gradient line */
.jpt-home-section + .jpt-home-section::before {
	content: "";
	position: absolute;
	top: -48px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 3px;
	border-radius: 99px;
	background: linear-gradient(90deg, transparent, var(--jpt-red), transparent);
	opacity: 0.4;
}

.jpt-home-section__head {
	text-align: center;
	margin-bottom: var(--jpt-stack-md);
}

.jpt-home-section__eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jpt-red);
	margin-bottom: 8px;
}

.jpt-home-section__title {
	font-size: clamp(28px, 3.5vw, 40px) !important;
	font-weight: 700 !important;
	color: var(--jpt-ink) !important;
	letter-spacing: -0.015em;
	margin: 0 0 8px !important;
	padding: 0 !important;
	line-height: 1.15 !important;
}

.jpt-home-section__title::before { display: none !important; }

.jpt-home-section__sub {
	color: var(--jpt-ink-3);
	font-size: 16px;
	line-height: 1.5;
	max-width: 640px;
	margin: 0 auto !important;
}

/* Category cards */
.jpt-cat-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 600px) { .jpt-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .jpt-cat-grid { grid-template-columns: repeat(4, 1fr); } }

.jpt-cat-card {
	position: relative;
	display: block;
	padding: 28px 24px;
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
	box-shadow: var(--jpt-shadow-sm);
}

.jpt-cat-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 60%, rgba(200, 16, 46, 0.06) 100%);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.jpt-cat-card:hover {
	transform: translateY(-4px);
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-shadow-lg);
	text-decoration: none;
}

.jpt-cat-card:hover::before { opacity: 1; }

.jpt-cat-card > * { position: relative; }

.jpt-cat-card__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--jpt-muted);
	text-transform: uppercase;
}

.jpt-cat-card__name {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--jpt-ink) !important;
	margin: 6px 0 10px !important;
	letter-spacing: -0.01em;
}

.jpt-cat-card__desc {
	color: var(--jpt-ink-3);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 16px !important;
	min-height: 42px;
}

.jpt-cat-card__cta {
	color: var(--jpt-red);
	font-weight: 700;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.jpt-cat-card__cta::after { content: "→"; transition: transform 0.15s ease; }
.jpt-cat-card:hover .jpt-cat-card__cta::after { transform: translateX(4px); }

/* Product showcase wrapper — home page product grid */
.jpt-product-showcase {
	margin: 0 0 var(--jpt-stack-xl);
}

.jpt-product-showcase .products {
	margin: 0 !important;
}

.jpt-product-showcase ul.products {
	display: grid !important;
	gap: 20px !important;
}

.jpt-product-showcase ul.products li.product {
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	padding: 16px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	box-shadow: var(--jpt-shadow-sm);
	margin-bottom: 0 !important;
}

.jpt-product-showcase ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--jpt-shadow-lg);
	border-color: var(--jpt-red);
}

/* Product title in showcase */
.jpt-product-showcase .product .product-title,
.jpt-product-showcase .product h3.wd-entities-title {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--jpt-ink) !important;
	line-height: 1.35 !important;
	margin: 12px 0 6px !important;
	letter-spacing: -0.005em;
}

/* Price */
.jpt-product-showcase .product .price {
	color: var(--jpt-red) !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	margin: 0 !important;
}

.jpt-product-showcase .product .price .woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

/* Add to cart button */
.jpt-product-showcase .product .add_to_cart_button,
.jpt-product-showcase .product .button {
	background: var(--jpt-ink) !important;
	color: #fff !important;
	border: none !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 10px 16px !important;
	border-radius: var(--jpt-radius-sm) !important;
	margin-top: 8px !important;
	letter-spacing: 0.02em;
	transition: background 0.15s ease !important;
}

.jpt-product-showcase .product .add_to_cart_button:hover,
.jpt-product-showcase .product .button:hover {
	background: var(--jpt-red) !important;
}

/* Customer logo strip */
.jpt-logo-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 56px;
	padding: 22px 24px;
	background: var(--jpt-surface-2);
	border-radius: var(--jpt-radius);
	margin: 0 auto;
	max-width: 1080px;
}

/* The section wrapping the compact trust strip needs less vertical room
   than a full content section, so it doesn't leave a large empty gap
   against the neighbouring "Why buyers pick" band. */
.jpt-home-section:has(> .jpt-logo-strip) {
	margin-top: var(--jpt-stack-lg);
	margin-bottom: var(--jpt-stack-lg);
}
.jpt-home-section:has(> .jpt-logo-strip)::before { display: none !important; }

.jpt-logo-strip__label {
	flex-basis: 100%;
	text-align: center;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jpt-muted);
	margin: 0 0 8px;
}

.jpt-logo-strip__item {
	font-size: 18px;
	font-weight: 700;
	color: var(--jpt-ink-2);
	opacity: 0.7;
	transition: opacity 0.15s ease;
	letter-spacing: -0.01em;
}

.jpt-logo-strip__item:hover { opacity: 1; }

/* ============================================================
   CATEGORY LONGFORM — SEO description moved below products grid
   Added 2026-05-26; expanded 2026-05-26 for full component styling.
   Products appear above the fold; long-form category description
   renders below as an "About this category" section that Google
   reads but buyers can skip. All .jpt-* components used in the
   category description (FAQ, callout, CTA block, intro hero,
   etc.) get explicit styling here so they don't depend on body
   class scopes that fire only on single-product/page contexts.
   ============================================================ */

.jpt-category-longform {
	max-width: 1080px;
	margin: var(--jpt-stack-xl) auto var(--jpt-stack-lg);
	padding: var(--jpt-stack-lg) var(--jpt-stack-md);
	background: var(--jpt-surface-2);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius-lg);
	font-family: var(--jpt-font);
}

.jpt-category-longform__heading {
	font-size: 22px;
	font-weight: 700;
	color: var(--jpt-ink);
	letter-spacing: -0.01em;
	margin: 0 0 var(--jpt-stack-md);
	padding: 0;
	background: none;
	border: none;
	text-transform: none;
}

.jpt-category-longform__heading::before,
.jpt-category-longform__heading::after {
	display: none !important;
}

/* Lede paragraph — clean, light, corporate. A white panel with a red
   left-accent rule (not a dark gradient block), so the opening sentence is
   unambiguously readable and reads as professional B2B rather than flashy. */
.jpt-category-longform .jpt-cat-intro {
	background: var(--jpt-surface);
	color: var(--jpt-ink-2);
	padding: 20px 24px;
	border: 1px solid var(--jpt-line);
	border-left: 4px solid var(--jpt-red);
	border-radius: var(--jpt-radius);
	margin: 0 0 var(--jpt-stack-md);
	box-shadow: var(--jpt-shadow-sm);
}

.jpt-category-longform .jpt-cat-intro p {
	color: var(--jpt-ink-2);
	font-size: 16.5px;
	line-height: 1.65;
	margin: 0;
}

.jpt-category-longform .jpt-cat-intro p strong {
	color: var(--jpt-ink);
	font-weight: 700;
}

/* Body typography inside the longform region */
.jpt-category-longform p {
	color: var(--jpt-ink-3);
	line-height: 1.7;
	font-size: 15.5px;
	margin: 0 0 var(--jpt-stack-sm);
}

.jpt-category-longform p strong {
	color: var(--jpt-ink);
	font-weight: 600;
}

.jpt-category-longform ul {
	color: var(--jpt-ink-3);
	line-height: 1.7;
	margin: 0 0 var(--jpt-stack-md);
	padding-left: 22px;
}

.jpt-category-longform ul li {
	margin: 0 0 8px;
	padding-left: 4px;
	font-size: 15.5px;
}

.jpt-category-longform a {
	color: var(--jpt-red);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.jpt-category-longform a:hover {
	color: var(--jpt-red-dark);
	text-decoration-thickness: 2px;
}

/* Heading rhythm inside longform — H2 gets the red-bar accent */
.jpt-category-longform h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--jpt-ink);
	letter-spacing: -0.01em;
	margin: var(--jpt-stack-lg) 0 var(--jpt-stack-sm);
	padding-left: 16px;
	position: relative;
	line-height: 1.25;
	background: none;
	border: none;
}

.jpt-category-longform h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 3px;
	border-radius: 2px;
	background: var(--jpt-red);
}

.jpt-category-longform h2:first-child,
.jpt-category-longform > h2:first-of-type {
	margin-top: 0;
}

.jpt-category-longform h3 {
	font-size: 17px;
	font-weight: 600;
	color: var(--jpt-ink);
	margin: var(--jpt-stack-md) 0 var(--jpt-stack-xs);
	padding: 0;
	background: none;
	border: none;
}

.jpt-category-longform h3::before {
	display: none;
}

/* FAQ block inside longform — surface contrast against the gray bg */
.jpt-category-longform .jpt-faq {
	margin: var(--jpt-stack-md) 0;
}

.jpt-category-longform .jpt-faq h3 {
	background: var(--jpt-surface) !important;
	border: 1px solid var(--jpt-line) !important;
	padding: 16px 18px 16px 44px !important;
	border-radius: var(--jpt-radius-sm) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--jpt-ink) !important;
	margin: 0 !important;
	box-shadow: var(--jpt-shadow-sm);
	position: relative;
}

.jpt-category-longform .jpt-faq h3::before {
	content: "?";
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: var(--jpt-red);
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.jpt-category-longform .jpt-faq__answer {
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-top: none;
	border-radius: 0 0 var(--jpt-radius-sm) var(--jpt-radius-sm);
	padding: 4px 18px 14px 44px !important;
	color: var(--jpt-ink-3) !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
	margin: -1px 0 8px !important;
}

/* CTA block inside longform — already styled globally but bump margins */
.jpt-category-longform .jpt-cta-block {
	margin: var(--jpt-stack-lg) 0 0;
}

/* Compare table inside longform */
.jpt-category-longform .compare-table-wrap {
	margin: var(--jpt-stack-md) 0;
}

/* Mobile */
@media (max-width: 600px) {
	.jpt-category-longform {
		padding: var(--jpt-stack-md) var(--jpt-stack-sm);
		margin-left: var(--jpt-stack-sm);
		margin-right: var(--jpt-stack-sm);
	}
	.jpt-category-longform__heading {
		font-size: 19px;
	}
	.jpt-category-longform .jpt-cat-intro {
		padding: 18px 20px;
	}
}

/* ============================================================
   WooCommerce archive overrides — the category archive title
   and Woodmart's default archive description need to match the
   typography of our SEO content area below. Without this, the
   default Woodmart styles render the title in a Woodmart font
   tier that clashes with our typography system.
   ============================================================ */

body.tax-product_cat .page-title,
body.tax-product_cat .entry-title,
body.tax-product_cat .woocommerce-products-header__title {
	font-family: var(--jpt-font);
	font-weight: 700;
	color: var(--jpt-ink);
	letter-spacing: -0.015em;
}

/* ============================================================
   Print
   ============================================================ */

@media print {
	.jpt-hero { background: #fff; color: #000; }
	.jpt-hero__pill, .jpt-cta-block, .jpt-cta-btn, .jpt-policy-row, .jpt-progress, .jpt-toc { display: none; }
	.specs-table, .compare-table { page-break-inside: avoid; }
	.jpt-stats__value { color: #000; }
	.jpt-big-quote { background: #f5f5f5; color: #000; }
}

/* ============================================================
   COMPONENT POLISH SPRINT — added 2026-05-26
   Targets identified by seo-visual static CSS audit + manual review.
   Reference: dev-scripts/reports/visual-audit.md (when populated),
   app/public/DESIGN-SYSTEM.md section 9 (component states).
   ============================================================ */

/* ------------------------------------------------------------
   1. UNIVERSAL :focus-visible RING (WCAG 2.4.7 compliance)
   Applies to all interactive elements on light backgrounds.
   Dark-background variant override comes after.
   ------------------------------------------------------------ */

.jpt-cta-btn:focus-visible,
.jpt-policy-chip:focus-visible,
.application-tile:focus-visible,
.jpt-related-card:focus-visible,
.jpt-cat-card:focus-visible,
.jpt-feature:focus-visible,
.jpt-matrix__cell:focus-visible,
.jpt-toc a:focus-visible,
.jpt-footer__links a:focus-visible,
.jpt-footer__email:focus-visible,
.specs-table a:focus-visible,
.compare-table a:focus-visible,
.entry-content a:focus-visible,
.jpt-faq h3:focus-visible,
.jpt-faq summary:focus-visible,
input.jpt-input:focus-visible,
textarea.jpt-input:focus-visible,
select.jpt-input:focus-visible {
	outline: none;
	box-shadow: var(--jpt-focus-ring);
	border-radius: var(--jpt-radius-sm);
}

/* Dark-background focus ring (hero CTAs, footer links use white-tinted ring) */
.jpt-home-hero__cta:focus-visible,
.jpt-hero__pill:focus-visible,
.jpt-vs__card--us a:focus-visible,
.jpt-big-quote a:focus-visible {
	outline: none;
	box-shadow: var(--jpt-focus-ring-dark);
}

/* ------------------------------------------------------------
   2. :active STATE on buttons — pressed feedback
   Settles back so user feels the click landing.
   ------------------------------------------------------------ */

.jpt-cta-btn:active,
.jpt-cta-btn--primary:active,
.jpt-home-hero__cta:active {
	transform: translateY(0);
	transition-duration: var(--jpt-t-fast);
}

.jpt-cta-btn:active {
	box-shadow: var(--jpt-shadow-sm);
}

.jpt-cta-btn--primary:active {
	background: var(--jpt-red-dark);
	border-color: var(--jpt-red-dark);
}

/* ------------------------------------------------------------
   3. :disabled STATE on buttons
   ------------------------------------------------------------ */

.jpt-cta-btn:disabled,
.jpt-cta-btn[aria-disabled="true"],
.jpt-home-hero__cta:disabled,
.jpt-home-hero__cta[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

/* ------------------------------------------------------------
   4. FORM FIELDS — base styles (.jpt-input class)
   Use on <input type="text">, <input type="email">, <textarea>, <select>.
   ------------------------------------------------------------ */

.jpt-input,
input.jpt-input,
textarea.jpt-input,
select.jpt-input {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--jpt-font);
	font-size: 15px;
	line-height: 1.4;
	color: var(--jpt-ink);
	background: var(--jpt-surface);
	border: 1.5px solid var(--jpt-line);
	border-radius: var(--jpt-radius-sm);
	box-shadow: inset 0 1px 2px rgba(15, 20, 26, 0.03);
	transition: border-color var(--jpt-t-fast) var(--jpt-ease),
	            box-shadow var(--jpt-t-fast) var(--jpt-ease);
	-webkit-appearance: none;
	appearance: none;
}

textarea.jpt-input {
	min-height: 120px;
	resize: vertical;
}

.jpt-input:hover {
	border-color: var(--jpt-ink-4);
}

.jpt-input:focus {
	outline: none;
	border-color: var(--jpt-red);
	box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18);
}

.jpt-input:disabled,
.jpt-input[aria-disabled="true"] {
	opacity: 0.6;
	background: var(--jpt-surface-2);
	cursor: not-allowed;
}

.jpt-input::placeholder {
	color: var(--jpt-muted);
	opacity: 1;
}

.jpt-input[aria-invalid="true"] {
	border-color: var(--jpt-red);
	background: #FFF6F7;
}

.jpt-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--jpt-ink);
	margin-bottom: 6px;
	letter-spacing: -0.005em;
}

.jpt-label__hint {
	display: block;
	font-weight: 400;
	color: var(--jpt-muted);
	font-size: 12px;
	margin-top: 2px;
}

.jpt-form-row {
	margin-bottom: var(--jpt-stack-md);
}

.jpt-form-error {
	color: var(--jpt-red);
	font-size: 13px;
	font-weight: 600;
	margin-top: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.jpt-form-error::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	background: var(--jpt-red);
	color: #fff;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 800;
	flex-shrink: 0;
}

/* ------------------------------------------------------------
   5. NATIVE <details> + <summary> ACCORDION
   For future FAQ blocks, prefer <details><summary>...</summary>...</details>
   markup over <h3> + <p> so the question/answer toggles natively without JS.
   The existing .jpt-faq h3 styling is kept for backwards compat on
   content that already uses the heading+paragraph pattern.
   ------------------------------------------------------------ */

details.jpt-faq__item {
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius-sm);
	box-shadow: var(--jpt-shadow-sm);
	margin: 0 0 12px;
	overflow: hidden;
	transition: box-shadow var(--jpt-t) var(--jpt-ease),
	            border-color var(--jpt-t) var(--jpt-ease);
}

details.jpt-faq__item[open] {
	border-color: var(--jpt-ink-4);
	box-shadow: var(--jpt-shadow);
}

details.jpt-faq__item > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px 16px 44px;
	font-size: 16px;
	font-weight: 600;
	color: var(--jpt-ink);
	cursor: pointer;
	list-style: none;
	position: relative;
}

details.jpt-faq__item > summary::-webkit-details-marker {
	display: none;
}

details.jpt-faq__item > summary::before {
	content: "?";
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: var(--jpt-red);
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

details.jpt-faq__item > summary::after {
	content: "+";
	margin-left: auto;
	font-size: 22px;
	color: var(--jpt-muted);
	font-weight: 400;
	line-height: 1;
	transition: transform var(--jpt-t-fast) var(--jpt-ease),
	            color var(--jpt-t-fast) var(--jpt-ease);
}

details.jpt-faq__item[open] > summary::after {
	transform: rotate(45deg);
	color: var(--jpt-red);
}

details.jpt-faq__item > .jpt-faq__body {
	padding: 0 18px 16px 44px;
	color: var(--jpt-ink-3);
	font-size: 15px;
	line-height: 1.65;
}

details.jpt-faq__item > .jpt-faq__body p {
	margin: 0 0 var(--jpt-stack-xs);
}

details.jpt-faq__item > .jpt-faq__body p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------
   6. SMART-QUOTE CONSISTENCY
   Standardize on curly quotes ", " in big-quote and inline-quote ::before.
   The .jpt-customer-quote currently uses straight ASCII " which renders
   inconsistently; replace with proper U+201C left double quotation mark.
   ------------------------------------------------------------ */

.jpt-customer-quote::before {
	content: "\201C"; /* " */
}

/* ------------------------------------------------------------
   7. HEADING TEXT-WRAP for nicer line breaks on modern browsers
   text-wrap: balance prevents widow words on multi-line headings.
   ------------------------------------------------------------ */

@supports (text-wrap: balance) {
	.jpt-hero__title,
	.jpt-home-hero h1,
	.jpt-home-section__title,
	.single-application .entry-title,
	.single-customer_story .entry-title,
	.page-template-default .entry-title,
	.jpt-big-quote__text,
	.jpt-vs__name {
		text-wrap: balance;
	}
}

@supports (text-wrap: pretty) {
	.entry-content p,
	.jpt-home-hero__lede,
	.jpt-home-section__sub {
		text-wrap: pretty;
	}
}

/* ------------------------------------------------------------
   8. MOBILE HORIZONTAL SCROLL FIX (revised 2026-05-26)
   Earlier version of this rule applied max-width:100vw to .wd-content-area
   which clipped the hero on wide desktop viewports (hero appeared not
   full-width). Apply overflow lock at body level ONLY; the inner
   .wd-content-area keeps its native sizing so the hero can break out
   to the full viewport using width:100vw + margin:-50vw.
   ------------------------------------------------------------ */

body.home {
	overflow-x: clip;
}

html {
	overflow-x: clip;
}

/* ------------------------------------------------------------
   9. REVEAL-ON-SCROLL JS FALLBACK
   .jpt-reveal starts at opacity: 0 and requires JS (IntersectionObserver)
   to add .is-visible. If JS doesn't run (slow load, JS error, no-JS user),
   content stays invisible. Use a 1.2s timer fallback so content always
   becomes visible eventually. JS still runs faster on normal loads.
   ------------------------------------------------------------ */

.jpt-reveal {
	animation: jpt-reveal-fallback 0s ease 1.2s forwards;
}

@keyframes jpt-reveal-fallback {
	to { opacity: 1; transform: translateY(0); }
}

/* When JS has fired and added .is-visible, the existing transition kicks
   in normally. The animation is a fallback only. */
.jpt-reveal.is-visible {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.jpt-reveal {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------
   10. TOUCH TARGET MIN-SIZE on mobile (WCAG 2.5.5: 44 x 44px)
   .jpt-policy-chip default padding gives ~28px tall touch target.
   Bump on mobile to meet AA.
   ------------------------------------------------------------ */

@media (max-width: 768px) {
	.jpt-policy-chip {
		padding: 10px 16px;
		min-height: 40px;
	}

	a.jpt-policy-chip {
		min-height: 44px;
		align-items: center;
	}

	.jpt-cta-btn {
		min-height: 44px;
		padding-top: 11px;
		padding-bottom: 11px;
	}

	.jpt-footer__links a {
		padding: 6px 0;
		display: inline-block;
		min-height: 32px;
	}
}

/* ------------------------------------------------------------
   11. FOOTER GRID FIX FOR TABLET (768-1023px)
   At this range the 5-column grid compresses each column to ~140px,
   too narrow for the heading + link list. Switch to 3-column at this
   range, then back to 2-column on smaller screens.
   ------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1023px) {
	.jpt-footer__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px 32px;
	}

	.jpt-footer__col:first-child {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------
   12. CALLOUT MOBILE LAYOUT
   On 375px viewport the 36px icon + gap can compress the text column
   to <250px. Stack vertically below 480px so text gets full width.
   ------------------------------------------------------------ */

@media (max-width: 479px) {
	.jpt-callout {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 18px 20px;
	}

	.jpt-callout__icon {
		width: 32px;
		height: 32px;
		font-size: 18px;
	}
}

/* ------------------------------------------------------------
   13. SUCCESS-COLOR DRIFT FIX
   Two hardcoded #6FCF97 (light green) values existed in checkmark
   pseudo-elements. Migrate to a new --jpt-success-bright token so
   they're still distinct from --jpt-success (#137754) but token-managed.
   ------------------------------------------------------------ */

:root {
	--jpt-success-bright: #6FCF97;
}

.jpt-hero__pill::before,
.jpt-home-hero__pill::before {
	color: var(--jpt-success-bright);
}

.jpt-hero-monitor__signal {
	background: var(--jpt-success-bright);
	box-shadow: 0 0 8px var(--jpt-success-bright);
}

/* ------------------------------------------------------------
   15. HOVER-ON-HOVER — strip hover effects on touch devices
   On iOS/Android the :hover state can stick after tap and look broken.
   Wrap the cardlift hover blocks in @media (hover: hover) so only
   genuine mouse hover triggers them. Phase 1 item #3 of design roadmap.
   ------------------------------------------------------------ */

@media (hover: none) {
	.application-tile:hover,
	.jpt-related-card:hover,
	.jpt-cat-card:hover,
	.jpt-feature:hover,
	.jpt-matrix__cell:hover {
		transform: none;
		box-shadow: var(--jpt-shadow-sm);
		border-color: var(--jpt-line);
	}

	.jpt-related-card:hover::after,
	.jpt-cat-card:hover::after {
		transform: scaleX(0);
	}

	.jpt-related-card:hover .jpt-related-card__cta::after,
	.jpt-cat-card:hover .jpt-cat-card__cta::after {
		transform: none;
	}
}

/* ------------------------------------------------------------
   16. HERO CTA CONTRAST LIFT
   Inset white border + tighter shadow opacity define the button edge
   on AMOLED screens where the red box-shadow can blur into the dark hero.
   Phase 1 item #4 of design roadmap.
   ------------------------------------------------------------ */

.jpt-home-hero__cta--primary {
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 8px 20px rgba(200, 16, 46, 0.55),
	            inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.jpt-home-hero__cta--primary:hover {
	box-shadow: 0 12px 30px rgba(200, 16, 46, 0.65),
	            inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.jpt-home-hero__cta--ghost {
	border-color: rgba(255, 255, 255, 0.28);
}

/* ------------------------------------------------------------
   17. TRUST STRIP MOBILE 2-COL
   Below 600px the auto-fit grid collapsed to 1 column with awkward
   tall items. Force 2x2 grid below 600px for compact 4-item display.
   Phase 1 item #8 of design roadmap.
   ------------------------------------------------------------ */

@media (max-width: 599px) {
	.jpt-trust-strip {
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}

	.jpt-trust-strip__item {
		padding: 12px 10px;
		font-size: 12.5px;
		gap: 8px;
		line-height: 1.25;
	}

	.jpt-trust-strip__item::before {
		width: 16px;
		height: 16px;
		font-size: 10px;
	}
}

/* ------------------------------------------------------------
   14. PRINT — extend polish to print stylesheet
   Hide more decorative elements when printing.
   ------------------------------------------------------------ */

@media print {
	.jpt-laser-svg,
	.jpt-laser-beam,
	.jpt-laser-dot,
	.jpt-home-hero::after,
	.jpt-home-hero::before {
		display: none !important;
	}
	.jpt-home-hero {
		background: #fff;
		color: #000;
		padding: 24px 0;
	}
	.jpt-home-hero h1 {
		color: #000 !important;
		font-size: 32px !important;
	}
}

/* ============================================================
   404 page (replaces Woodmart parent's generic 404 template)
   ------------------------------------------------------------
   Rendered by 404.php in the child theme. Turns the dead-end into
   a routing decision: search box, four category cards, and a
   "talk to us" CTA so buyers never feel stranded.
   ============================================================ */

.jpt-404 {
	max-width: 960px;
	margin: 0 auto;
	padding: var(--jpt-stack-xl) var(--jpt-stack-md);
}

/* Hero block (large 404 numeral, headline, lead, search box). */
.jpt-404__hero {
	text-align: center;
	margin-bottom: var(--jpt-stack-xl);
}

.jpt-404__numeral {
	font-family: var(--jpt-font);
	font-size: clamp(96px, 18vw, 200px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--jpt-red);
	margin-bottom: var(--jpt-stack-sm);
	background: linear-gradient(180deg, var(--jpt-red) 0%, var(--jpt-red-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.jpt-404__title {
	font-size: clamp(24px, 4vw, 36px);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--jpt-ink);
	margin: 0 0 var(--jpt-stack-sm);
	line-height: 1.2;
}

.jpt-404__lead {
	font-size: 16px;
	color: var(--jpt-ink-3);
	max-width: 540px;
	margin: 0 auto var(--jpt-stack-md);
	line-height: 1.6;
}

/* Style the search form inside the hero. Three render paths:
   1) Woodmart hijacks get_product_search_form() with .wd-search-form
      .searchform.wd-style-default (the actual current output).
   2) WC default product search renders .woocommerce-product-search.
   3) WP fallback renders .search-form. */
.jpt-404__hero .wd-search-form,
.jpt-404__hero .woocommerce-product-search,
.jpt-404__hero .search-form {
	max-width: 480px;
	margin: 0 auto;
}

.jpt-404__hero .wd-search-form .searchform,
.jpt-404__hero .woocommerce-product-search,
.jpt-404__hero .search-form {
	display: flex;
	gap: 8px;
	position: relative;
}

/* Inputs across all three render paths. .wd-search-form uses input.s. */
.jpt-404__hero .wd-search-form input.s,
.jpt-404__hero .wd-search-form input[type="text"],
.jpt-404__hero .woocommerce-product-search input[type="search"],
.jpt-404__hero .search-form input[type="search"],
.jpt-404__hero .woocommerce-product-search input.search-field,
.jpt-404__hero .search-form input.search-field {
	flex: 1;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	background: var(--jpt-surface);
	font-family: var(--jpt-font);
	font-size: 15px;
	color: var(--jpt-ink);
	transition: border-color var(--jpt-t) var(--jpt-ease),
				box-shadow var(--jpt-t) var(--jpt-ease);
}

.jpt-404__hero .wd-search-form input.s:focus,
.jpt-404__hero .wd-search-form input[type="text"]:focus,
.jpt-404__hero .woocommerce-product-search input[type="search"]:focus,
.jpt-404__hero .search-form input[type="search"]:focus {
	outline: none;
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-focus-ring);
}

/* Submit buttons across all three render paths. */
.jpt-404__hero .wd-search-form button.searchsubmit,
.jpt-404__hero .wd-search-form button[type="submit"],
.jpt-404__hero .woocommerce-product-search button,
.jpt-404__hero .search-form button,
.jpt-404__hero .woocommerce-product-search input[type="submit"],
.jpt-404__hero .search-form input[type="submit"] {
	height: 48px;
	padding: 0 24px;
	background: var(--jpt-red);
	color: #fff;
	border: 1px solid var(--jpt-red);
	border-radius: var(--jpt-radius);
	font-family: var(--jpt-font);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--jpt-t) var(--jpt-ease);
}

.jpt-404__hero .wd-search-form button.searchsubmit:hover,
.jpt-404__hero .wd-search-form button[type="submit"]:hover,
.jpt-404__hero .woocommerce-product-search button:hover,
.jpt-404__hero .search-form button:hover,
.jpt-404__hero .woocommerce-product-search input[type="submit"]:hover,
.jpt-404__hero .search-form input[type="submit"]:hover {
	background: var(--jpt-red-dark);
}

/* Woodmart sometimes wraps the button label in an inner span. */
.jpt-404__hero .wd-search-form button.searchsubmit span {
	color: #fff;
}

/* Suppress Woodmart's AJAX search dropdown on the 404 hero (too noisy
   when buyer is using the search box to recover from a bad URL). */
.jpt-404__hero .wd-search-results-wrapper {
	display: none !important;
}

/* Category grid (4 cards: 2x2 on tablet, 1col on mobile, 4col on desktop). */
.jpt-404__section-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jpt-muted);
	text-align: center;
	margin: 0 0 var(--jpt-stack-md);
}

.jpt-404__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: var(--jpt-stack-xl);
}

.jpt-404__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 24px 20px;
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	text-decoration: none;
	color: var(--jpt-ink);
	box-shadow: var(--jpt-shadow-sm);
	transition: border-color var(--jpt-t) var(--jpt-ease),
				box-shadow var(--jpt-t) var(--jpt-ease),
				transform var(--jpt-t) var(--jpt-ease);
}

.jpt-404__card:hover {
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-shadow);
	transform: translateY(-2px);
	color: var(--jpt-ink);
}

.jpt-404__card-icon {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--jpt-red-soft);
	color: var(--jpt-red);
	border-radius: var(--jpt-radius-sm);
	margin-bottom: 8px;
}

.jpt-404__card-icon svg {
	width: 20px;
	height: 20px;
}

.jpt-404__card-title {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--jpt-ink);
	line-height: 1.3;
}

.jpt-404__card-desc {
	font-size: 13px;
	color: var(--jpt-ink-3);
	line-height: 1.5;
}

.jpt-404__card:focus-visible {
	outline: none;
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-focus-ring);
}

/* Help CTA card (single full-width card with two actions). */
.jpt-404__help-card {
	background: var(--jpt-surface-2);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius-lg);
	padding: 32px 28px;
	text-align: center;
}

.jpt-404__help-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--jpt-ink);
	margin: 0 0 8px;
}

.jpt-404__help-desc {
	font-size: 15px;
	color: var(--jpt-ink-3);
	max-width: 480px;
	margin: 0 auto var(--jpt-stack-md);
	line-height: 1.6;
}

.jpt-404__help-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* Mobile tweaks */
@media (max-width: 600px) {
	.jpt-404 {
		padding: var(--jpt-stack-lg) var(--jpt-stack-sm);
	}
	.jpt-404__hero {
		margin-bottom: var(--jpt-stack-lg);
	}
	.jpt-404__hero .woocommerce-product-search,
	.jpt-404__hero .search-form {
		flex-direction: column;
	}
	.jpt-404__hero .woocommerce-product-search button,
	.jpt-404__hero .search-form button,
	.jpt-404__hero .woocommerce-product-search input[type="submit"],
	.jpt-404__hero .search-form input[type="submit"] {
		width: 100%;
	}
	.jpt-404__grid {
		grid-template-columns: 1fr;
	}
	.jpt-404__help-card {
		padding: 24px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jpt-404__card,
	.jpt-404__card:hover {
		transition: none;
		transform: none;
	}
}

/* ============================================================
   Empty state for WooCommerce no-products-found
   ------------------------------------------------------------
   Rendered by woocommerce/loop/no-products-found.php in three contexts:
   empty search, empty category, empty filter combination. The template
   sets context-aware copy; this CSS handles the layout. Shares visual
   DNA with the 404 page but lives inside the shop loop so it must
   respect the surrounding WC wrapper rather than fill the viewport.
   ============================================================ */

.jpt-empty-state {
	max-width: 880px;
	margin: var(--jpt-stack-lg) auto;
	padding: var(--jpt-stack-md) var(--jpt-stack-sm);
}

.jpt-empty-state__hero {
	text-align: center;
	margin-bottom: var(--jpt-stack-lg);
}

.jpt-empty-state__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto var(--jpt-stack-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--jpt-red-soft);
	color: var(--jpt-red);
	border-radius: 50%;
}

.jpt-empty-state__icon svg {
	width: 28px;
	height: 28px;
}

.jpt-empty-state__title {
	font-size: clamp(22px, 3.5vw, 28px);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--jpt-ink);
	margin: 0 0 var(--jpt-stack-xs);
	line-height: 1.25;
}

.jpt-empty-state__lead {
	font-size: 15px;
	color: var(--jpt-ink-3);
	max-width: 560px;
	margin: 0 auto var(--jpt-stack-md);
	line-height: 1.6;
}

.jpt-empty-state__search {
	max-width: 460px;
	margin: 0 auto;
}

/* Search form selectors mirror the 404 hero's three render paths. */
.jpt-empty-state__search .wd-search-form,
.jpt-empty-state__search .woocommerce-product-search,
.jpt-empty-state__search .search-form {
	max-width: 460px;
	margin: 0 auto;
}

.jpt-empty-state__search .wd-search-form .searchform,
.jpt-empty-state__search .woocommerce-product-search,
.jpt-empty-state__search .search-form {
	display: flex;
	gap: 8px;
	position: relative;
}

.jpt-empty-state__search .wd-search-form input.s,
.jpt-empty-state__search .wd-search-form input[type="text"],
.jpt-empty-state__search .woocommerce-product-search input[type="search"],
.jpt-empty-state__search .search-form input[type="search"],
.jpt-empty-state__search .woocommerce-product-search input.search-field,
.jpt-empty-state__search .search-form input.search-field {
	flex: 1;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	background: var(--jpt-surface);
	font-family: var(--jpt-font);
	font-size: 14.5px;
	color: var(--jpt-ink);
	transition: border-color var(--jpt-t) var(--jpt-ease),
				box-shadow var(--jpt-t) var(--jpt-ease);
}

.jpt-empty-state__search .wd-search-form input.s:focus,
.jpt-empty-state__search .wd-search-form input[type="text"]:focus,
.jpt-empty-state__search .woocommerce-product-search input[type="search"]:focus,
.jpt-empty-state__search .search-form input[type="search"]:focus {
	outline: none;
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-focus-ring);
}

.jpt-empty-state__search .wd-search-form button.searchsubmit,
.jpt-empty-state__search .wd-search-form button[type="submit"],
.jpt-empty-state__search .woocommerce-product-search button,
.jpt-empty-state__search .search-form button,
.jpt-empty-state__search .woocommerce-product-search input[type="submit"],
.jpt-empty-state__search .search-form input[type="submit"] {
	height: 44px;
	padding: 0 20px;
	background: var(--jpt-red);
	color: #fff;
	border: 1px solid var(--jpt-red);
	border-radius: var(--jpt-radius);
	font-family: var(--jpt-font);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--jpt-t) var(--jpt-ease);
}

.jpt-empty-state__search .wd-search-form button.searchsubmit:hover,
.jpt-empty-state__search .wd-search-form button[type="submit"]:hover,
.jpt-empty-state__search .woocommerce-product-search button:hover,
.jpt-empty-state__search .search-form button:hover,
.jpt-empty-state__search .woocommerce-product-search input[type="submit"]:hover,
.jpt-empty-state__search .search-form input[type="submit"]:hover {
	background: var(--jpt-red-dark);
}

.jpt-empty-state__search .wd-search-form button.searchsubmit span {
	color: #fff;
}

.jpt-empty-state__search .wd-search-results-wrapper {
	display: none !important;
}

/* Category card grid */
.jpt-empty-state__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: var(--jpt-stack-md);
}

.jpt-empty-state__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 18px 16px;
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	text-decoration: none;
	color: var(--jpt-ink);
	box-shadow: var(--jpt-shadow-sm);
	transition: border-color var(--jpt-t) var(--jpt-ease),
				box-shadow var(--jpt-t) var(--jpt-ease),
				transform var(--jpt-t) var(--jpt-ease);
}

.jpt-empty-state__card:hover {
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-shadow);
	transform: translateY(-1px);
	color: var(--jpt-ink);
}

.jpt-empty-state__card-icon {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--jpt-red-soft);
	color: var(--jpt-red);
	border-radius: var(--jpt-radius-sm);
	margin-bottom: 4px;
}

.jpt-empty-state__card-icon svg {
	width: 16px;
	height: 16px;
}

.jpt-empty-state__card-title {
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--jpt-ink);
	line-height: 1.3;
}

.jpt-empty-state__card-desc {
	font-size: 12.5px;
	color: var(--jpt-ink-3);
	line-height: 1.4;
}

.jpt-empty-state__card:focus-visible {
	outline: none;
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-focus-ring);
}

/* Inline help row */
.jpt-empty-state__help {
	text-align: center;
	padding: var(--jpt-stack-sm) 0;
}

.jpt-empty-state__help-text {
	font-size: 14px;
	color: var(--jpt-ink-3);
	margin: 0;
}

.jpt-empty-state__help-text a {
	color: var(--jpt-red);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid transparent;
	transition: border-color var(--jpt-t-fast) var(--jpt-ease);
}

.jpt-empty-state__help-text a:hover {
	border-bottom-color: currentColor;
}

@media (max-width: 600px) {
	.jpt-empty-state {
		margin: var(--jpt-stack-md) auto;
	}
	.jpt-empty-state__search .wd-search-form .searchform,
	.jpt-empty-state__search .woocommerce-product-search,
	.jpt-empty-state__search .search-form {
		flex-direction: column;
	}
	.jpt-empty-state__search button {
		width: 100%;
	}
	.jpt-empty-state__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jpt-empty-state__card,
	.jpt-empty-state__card:hover {
		transition: none;
		transform: none;
	}
}

/* Suppress Woodmart's default WC notice on no-products pages so we don't
   render their gray banner ABOVE our custom empty state. */
.woocommerce-no-products-found {
	display: none !important;
}
.no-products-footer {
	display: none !important;
}

/* ============================================================
   Header utility bar (top of every page).
   Renders via wp_body_open before Woodmart's header.
   ============================================================ */

.jpt-utility-bar {
	background: var(--jpt-ink);
	color: #FFFFFF;
	font-family: var(--jpt-font);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.jpt-utility-bar__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 8px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	flex-wrap: wrap;
}

.jpt-utility-bar__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #FFFFFF;
	text-decoration: none;
	line-height: 1.4;
	transition: opacity var(--jpt-t-fast) var(--jpt-ease);
}

a.jpt-utility-bar__item:hover {
	opacity: 0.8;
	color: #FFFFFF;
}

.jpt-utility-bar__icon {
	width: 14px;
	height: 14px;
	opacity: 0.85;
	flex-shrink: 0;
}

.jpt-utility-bar__item--email {
	border-bottom: 1px solid transparent;
}
.jpt-utility-bar__item--email:hover {
	border-bottom-color: rgba(255, 255, 255, 0.6);
}

.jpt-utility-bar a:focus-visible {
	outline: 2px solid var(--jpt-red);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (max-width: 768px) {
	.jpt-utility-bar__inner {
		gap: 12px;
		padding: 8px 12px;
		font-size: 11.5px;
	}
	.jpt-utility-bar__icon { width: 12px; height: 12px; }
}

/* Below mobile breakpoint the email becomes the priority item; the
   distributor badge folds away so we keep the bar to two lines max. */
@media (max-width: 480px) {
	.jpt-utility-bar__item--badge { display: none; }
}

/* ============================================================
   Cart page trust strip (woocommerce_before_cart).
   ============================================================ */

.jpt-cart-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 0 0 var(--jpt-stack-md);
	padding: 18px 20px;
	background: var(--jpt-surface-2);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
}

.jpt-cart-trust__item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--jpt-ink-2);
	line-height: 1.35;
}

.jpt-cart-trust__item strong {
	font-weight: 700;
	color: var(--jpt-ink);
}

.jpt-cart-trust__icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--jpt-red);
}

@media (max-width: 600px) {
	.jpt-cart-trust {
		padding: 14px 14px;
	}
	.jpt-cart-trust__item {
		font-size: 12.5px;
	}
}

/* ============================================================
   Customer reference strip (home page, injected via the_content).
   Text-only until owner provides logo permissions; markup designed
   to swap to <img> tokens without redesign.
   ============================================================ */

.jpt-customer-strip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 28px 32px;
	margin: var(--jpt-stack-md) auto;
	max-width: 1240px;
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius-lg);
	box-shadow: var(--jpt-shadow-sm);
	text-align: center;
}

.jpt-customer-strip__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jpt-muted);
	flex-shrink: 0;
	position: relative;
	padding-bottom: 4px;
}

.jpt-customer-strip__label::after {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	background: var(--jpt-red);
	margin: 8px auto 0;
	border-radius: 1px;
}

.jpt-customer-strip__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

/* Uniform cell per logo. Same height + min-width across every item
   regardless of source-file internal padding, so each logo sits at
   the visual center of an identical box. This is what fixes the
   "logos not in line" issue: previously each item sized to its own
   intrinsic content, so logos with different padding rendered at
   different heights and offsets. */
.jpt-customer-strip__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	min-width: 140px;
	margin: 0;
	padding: 0;
}

.jpt-customer-strip__name {
	font-family: var(--jpt-font);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--jpt-ink-2);
	filter: grayscale(1);
	opacity: 0.85;
	transition: opacity var(--jpt-t) var(--jpt-ease),
				filter var(--jpt-t) var(--jpt-ease);
}

.jpt-customer-strip__item:hover .jpt-customer-strip__name {
	opacity: 1;
	filter: grayscale(0);
	color: var(--jpt-ink);
}

/* Logo variant. Each logo sits inside a uniform 56x140 cell defined
   on .jpt-customer-strip__item, so the logo's own size + max-width
   only governs the visible mark. Grayscale + opacity matches the
   neutral trust-strip aesthetic; full color on hover. */
.jpt-customer-strip__logo {
	display: block;
	max-height: 44px;
	max-width: 130px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
	filter: grayscale(1);
	opacity: 0.75;
	transition: opacity var(--jpt-t) var(--jpt-ease),
				filter var(--jpt-t) var(--jpt-ease);
}

.jpt-customer-strip__item:hover .jpt-customer-strip__logo {
	opacity: 1;
	filter: grayscale(0);
}

@media (max-width: 600px) {
	.jpt-customer-strip {
		padding: 20px 18px;
		gap: 14px;
	}
	.jpt-customer-strip__item {
		height: 44px;
		min-width: 100px;
	}
	.jpt-customer-strip__logo {
		max-height: 34px;
		max-width: 100px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jpt-customer-strip__logo,
	.jpt-customer-strip__item:hover .jpt-customer-strip__logo {
		transition: none;
	}
}

.jpt-customer-strip__item--more .jpt-customer-strip__name {
	font-style: italic;
	font-weight: 500;
	color: var(--jpt-muted);
}

@media (max-width: 600px) {
	.jpt-customer-strip {
		gap: 16px;
		padding: 18px 14px;
	}
	.jpt-customer-strip__list {
		gap: 18px;
	}
	.jpt-customer-strip__name {
		font-size: 14px;
	}
}

/* ============================================================
   Footer payment + secure-checkout badges (wp_footer).
   ============================================================ */

.jpt-footer-payments {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
	padding: 20px 24px;
	background: #FFFFFF;
	color: var(--jpt-ink-3);
	font-family: var(--jpt-font);
	font-size: 12.5px;
	border-top: 1px solid var(--jpt-line);
}

.jpt-footer-payments__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jpt-muted);
}

.jpt-footer-payments__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.jpt-footer-payments__item {
	display: inline-flex;
	align-items: center;
	line-height: 0; /* prevent inline-block baseline gap below SVG */
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

/* Brand-icon sizing. 48x32 slot. Inline SVGs are drawn to fit exactly;
   owner-provided PNGs use object-fit:contain so any source aspect ratio
   survives without distortion. vertical-align:middle and align-self:center
   are belt-and-braces alignment so img and inline-svg sit at the same
   baseline regardless of intrinsic baseline behavior. */
.jpt-pay-icon {
	display: block;
	width: 48px;
	height: 32px;
	border-radius: 3px;
	vertical-align: middle;
	align-self: center;
	transition: transform var(--jpt-t-fast) var(--jpt-ease);
}

/* PNG/file variants: preserve source aspect, no extra shadow.
   (Real logos have their own visual treatment baked in.) */
.jpt-pay-icon--file {
	object-fit: contain;
	object-position: center;
}

.jpt-footer-payments__item:hover .jpt-pay-icon {
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.jpt-pay-icon,
	.jpt-footer-payments__item:hover .jpt-pay-icon {
		transition: none;
		transform: none;
	}
}

.jpt-footer-payments__secure {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
	padding-left: 18px;
	border-left: 1px solid var(--jpt-line);
	font-size: 12px;
	color: var(--jpt-ink-3);
}

.jpt-footer-payments__icon {
	width: 14px;
	height: 14px;
	color: var(--jpt-ink-3);
}

@media (max-width: 600px) {
	.jpt-footer-payments {
		gap: 12px;
		padding: 16px 14px;
	}
	.jpt-footer-payments__secure {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
		width: 100%;
		justify-content: center;
		padding-top: 8px;
		border-top: 1px solid var(--jpt-line);
	}
}

/* ============================================================
   Applications archive breadcrumb (loop_start hook).
   ============================================================ */

.jpt-breadcrumb-archive,
.jpt-breadcrumb-fallback {
	max-width: 1440px;
	margin: 0 auto;
	padding: 12px 24px 0;
	font-family: var(--jpt-font);
	font-size: 13px;
	color: var(--jpt-ink-3);
}

.jpt-breadcrumb-archive a,
.jpt-breadcrumb-fallback a {
	color: var(--jpt-ink-3);
	text-decoration: none;
	transition: color var(--jpt-t-fast) var(--jpt-ease);
}

.jpt-breadcrumb-archive a:hover,
.jpt-breadcrumb-fallback a:hover {
	color: var(--jpt-red);
}

@media (max-width: 600px) {
	.jpt-breadcrumb-archive,
	.jpt-breadcrumb-fallback {
		padding: 8px 14px 0;
		font-size: 12.5px;
	}
}

/* ============================================================
   Talk-to-engineer CTA (below add-to-cart on product pages).
   Sits at woocommerce_single_product_summary priority 32.
   ============================================================ */

.jpt-engineer-cta {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	margin: 12px 0 var(--jpt-stack-sm);
	background: var(--jpt-surface-2);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	font-family: var(--jpt-font);
}

.jpt-engineer-cta__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.jpt-engineer-cta__lead {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--jpt-ink);
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.jpt-engineer-cta__sub {
	font-size: 12px;
	color: var(--jpt-ink-3);
	line-height: 1.4;
}

.jpt-engineer-cta__btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 16px;
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-ink);
	border-radius: var(--jpt-radius);
	color: var(--jpt-ink);
	font-family: var(--jpt-font);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: -0.005em;
	transition: background-color var(--jpt-t) var(--jpt-ease),
				color var(--jpt-t) var(--jpt-ease),
				transform var(--jpt-t) var(--jpt-ease);
}

.jpt-engineer-cta__btn:hover {
	background: var(--jpt-ink);
	color: #FFFFFF;
	transform: translateY(-1px);
}

.jpt-engineer-cta__icon {
	width: 16px;
	height: 16px;
}

.jpt-engineer-cta__btn:focus-visible {
	outline: none;
	box-shadow: var(--jpt-focus-ring);
}

@media (max-width: 480px) {
	.jpt-engineer-cta {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 12px;
	}
	.jpt-engineer-cta__btn {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jpt-engineer-cta__btn,
	.jpt-engineer-cta__btn:hover {
		transition: none;
		transform: none;
	}
}

/* ============================================================
   Sticky mobile add-to-cart bar (product pages, mobile only).
   Activates when the user scrolls past the inline add-to-cart form.
   Toggled visible via JS adding .jpt-sticky-atc--visible.
   ============================================================ */

.jpt-sticky-atc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	display: none; /* desktop: never. media query below shows on mobile. */
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	background: var(--jpt-surface);
	border-top: 1px solid var(--jpt-line);
	box-shadow: 0 -6px 18px rgba(15, 20, 26, 0.10);
	transform: translateY(110%);
	transition: transform var(--jpt-t-slow) var(--jpt-ease-out);
	font-family: var(--jpt-font);
	padding-bottom: calc(8px + env(safe-area-inset-bottom)); /* iOS notch */
}

.jpt-sticky-atc--visible {
	transform: translateY(0);
}

.jpt-sticky-atc__thumb {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: var(--jpt-radius-sm);
	border: 1px solid var(--jpt-line);
	background: var(--jpt-surface-2);
}

.jpt-sticky-atc__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.jpt-sticky-atc__name {
	font-size: 13px;
	font-weight: 700;
	color: var(--jpt-ink);
	letter-spacing: -0.005em;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jpt-sticky-atc__price {
	font-size: 13px;
	font-weight: 600;
	color: var(--jpt-red);
	line-height: 1.25;
}

.jpt-sticky-atc__btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	min-width: 120px;
	padding: 0 18px;
	background: var(--jpt-red);
	color: #FFFFFF;
	border: 1px solid var(--jpt-red);
	border-radius: var(--jpt-radius);
	font-family: var(--jpt-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.005em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--jpt-t) var(--jpt-ease);
}

.jpt-sticky-atc__btn:hover,
.jpt-sticky-atc__btn:focus-visible {
	background: var(--jpt-red-dark);
	color: #FFFFFF;
	outline: none;
}

.jpt-sticky-atc__btn:focus-visible {
	box-shadow: var(--jpt-focus-ring);
}

/* Only show on mobile (under 768 px). On desktop the in-page add-to-cart
   button is always visible alongside the spec content, so a sticky bar
   would be redundant clutter. */
@media (max-width: 767px) {
	.jpt-sticky-atc {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jpt-sticky-atc {
		transition: none;
	}
}

/* ============================================================
   Active filter chips on category pages (Baymard #1 fix).
   Rendered above the product grid when one or more filters are
   applied. Each chip has a remove (x) link that strips that filter
   from the URL.
   ============================================================ */

.jpt-active-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 var(--jpt-stack-sm);
	padding: 12px 14px;
	background: var(--jpt-surface-2);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	font-family: var(--jpt-font);
}

.jpt-active-filters__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jpt-muted);
	margin-right: 4px;
}

.jpt-active-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 8px 0 12px;
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--jpt-ink-2);
	text-decoration: none;
	transition: border-color var(--jpt-t-fast) var(--jpt-ease),
				color var(--jpt-t-fast) var(--jpt-ease);
}

.jpt-active-filters__chip:hover {
	border-color: var(--jpt-red);
	color: var(--jpt-red);
}

.jpt-active-filters__chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--jpt-line);
	color: var(--jpt-ink-3);
	font-size: 14px;
	line-height: 1;
	font-weight: 600;
}

.jpt-active-filters__chip:hover .jpt-active-filters__chip-remove {
	background: var(--jpt-red);
	color: #FFFFFF;
}

.jpt-active-filters__clear {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--jpt-red);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--jpt-t-fast) var(--jpt-ease);
}

.jpt-active-filters__clear:hover {
	border-bottom-color: currentColor;
	color: var(--jpt-red-dark);
}

.jpt-active-filters__chip:focus-visible,
.jpt-active-filters__clear:focus-visible {
	outline: none;
	box-shadow: var(--jpt-focus-ring);
	border-radius: 14px;
}

@media (max-width: 600px) {
	.jpt-active-filters {
		padding: 10px 12px;
	}
	.jpt-active-filters__clear {
		margin-left: 0;
		width: 100%;
		padding-top: 6px;
		border-top: 1px solid var(--jpt-line);
		text-align: center;
	}
}

/* ============================================================
   Guides hub grid (/guides/ landing).
   Rendered by [jpt_guides_listing] shortcode (inc/guides.php).
   Each card is a self-contained link with topic tag, title,
   description, reading time, step count, and a Read guide CTA.
   ============================================================ */

.jpt-guides-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	margin: var(--jpt-stack-md) 0 var(--jpt-stack-lg);
}

.jpt-guide-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 22px;
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius-lg);
	box-shadow: var(--jpt-shadow-sm);
	text-decoration: none;
	color: var(--jpt-ink);
	font-family: var(--jpt-font);
	transition: border-color var(--jpt-t) var(--jpt-ease),
				box-shadow var(--jpt-t) var(--jpt-ease),
				transform var(--jpt-t) var(--jpt-ease);
	position: relative;
}

.jpt-guide-card:hover {
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-shadow);
	transform: translateY(-2px);
	color: var(--jpt-ink);
}

.jpt-guide-card:focus-visible {
	outline: none;
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-focus-ring);
}

.jpt-guide-card__topic {
	display: inline-block;
	width: fit-content;
	padding: 4px 10px;
	background: var(--jpt-red-soft);
	color: var(--jpt-red);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.jpt-guide-card__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--jpt-ink);
	margin: 4px 0 0;
}

.jpt-guide-card__desc {
	font-size: 14px;
	color: var(--jpt-ink-3);
	line-height: 1.55;
	margin: 0;
	flex-grow: 1;
}

.jpt-guide-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 10px;
	border-top: 1px solid var(--jpt-line-soft);
	margin-top: auto;
}

.jpt-guide-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--jpt-ink-3);
}

.jpt-guide-card__meta-item svg {
	width: 14px;
	height: 14px;
}

.jpt-guide-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--jpt-red);
	letter-spacing: -0.005em;
	transition: gap var(--jpt-t-fast) var(--jpt-ease);
}

.jpt-guide-card__cta svg {
	width: 14px;
	height: 14px;
	transition: transform var(--jpt-t-fast) var(--jpt-ease);
}

.jpt-guide-card:hover .jpt-guide-card__cta {
	gap: 9px;
}

.jpt-guide-card:hover .jpt-guide-card__cta svg {
	transform: translateX(2px);
}

@media (max-width: 600px) {
	.jpt-guides-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.jpt-guide-card {
		padding: 20px 18px;
	}
	.jpt-guide-card__title {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jpt-guide-card,
	.jpt-guide-card:hover,
	.jpt-guide-card__cta svg,
	.jpt-guide-card:hover .jpt-guide-card__cta svg {
		transition: none;
		transform: none;
	}
}

.jpt-guides-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--jpt-muted);
	font-style: italic;
	border: 1px dashed var(--jpt-line);
	border-radius: var(--jpt-radius);
}

/* ============================================================
   Photo slots — real image OR branded placeholder.
   Rendered by inc/media-slots.php (jpt_photo_slot / jpt_photo_grid).
   Placeholders look intentional (branded shot briefs), not broken,
   and are replaced the moment a real image is dropped in.
   ============================================================ */
.jpt-photo-slot {
	position: relative;
	margin: 0;
	border-radius: var(--jpt-radius);
	overflow: hidden;
	background: var(--jpt-surface-2);
}
.jpt-photo-slot--square { aspect-ratio: 1 / 1; }
.jpt-photo-slot--wide   { aspect-ratio: 16 / 9; }
.jpt-photo-slot--4-3    { aspect-ratio: 4 / 3; }
.jpt-photo-slot--3-2    { aspect-ratio: 3 / 2; }

.jpt-photo-slot__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.jpt-photo-slot--placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 18px;
	text-align: center;
	background:
		radial-gradient(120% 120% at 50% 0%, var(--jpt-surface) 0%, var(--jpt-surface-2) 70%);
	border: 1px solid var(--jpt-line-soft, var(--jpt-line));
	color: var(--jpt-muted);
	transition: border-color var(--jpt-t), box-shadow var(--jpt-t);
}
.jpt-photo-slot--placeholder:hover {
	border-color: var(--jpt-line);
	box-shadow: var(--jpt-shadow-sm);
}
.jpt-photo-slot__brand {
	position: absolute;
	top: 11px;
	left: 13px;
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--jpt-ink-3);
	opacity: 0.45;
}
.jpt-photo-slot__icon {
	width: 30px;
	height: 30px;
	color: var(--jpt-ink-4);
	opacity: 0.6;
	stroke-width: 1.25;
}
.jpt-photo-slot__label {
	font-weight: 600;
	font-size: 13px;
	color: var(--jpt-ink-2);
	line-height: 1.3;
	max-width: 90%;
}
.jpt-photo-slot__hint {
	font-size: 11px;
	color: var(--jpt-muted);
	line-height: 1.3;
	opacity: 0.85;
}
/* A quiet, deliberate empty-state marker (a small outlined dot + word),
   not an alarming "under construction" flag. */
.jpt-photo-slot--placeholder::after {
	content: "";
	position: absolute;
	bottom: 13px;
	right: 13px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	border: 1px solid var(--jpt-line);
	background: transparent;
}

.jpt-photo-grid { margin: var(--jpt-stack-lg) 0; }
.jpt-photo-grid__heading {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--jpt-ink);
}
.jpt-photo-grid__items {
	display: grid;
	grid-template-columns: repeat(var(--jpt-photo-cols, 4), minmax(0, 1fr));
	gap: 14px;
}
@media (max-width: 768px) {
	.jpt-photo-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ---- Product page sections (gallery / results) ---- */
.jpt-product-section { margin: var(--jpt-stack-xl) 0 0; }
.jpt-product-results__note {
	font-size: 13px;
	color: var(--jpt-muted);
	margin: 12px 0 0;
	line-height: 1.55;
}

/* ---- Review summary line under the product title ---- */
.jpt-review-summary {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 2px 0 14px;
	min-height: 18px;
}
.jpt-stars {
	position: relative;
	display: inline-block;
	font-size: 15px;
	letter-spacing: 2px;
	line-height: 1;
	color: var(--jpt-line);
	white-space: nowrap;
}
.jpt-stars::before { content: "\2605\2605\2605\2605\2605"; }
.jpt-stars__on {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	overflow: hidden;
	color: #F5A623;
}
.jpt-stars__on::before { content: "\2605\2605\2605\2605\2605"; }
.jpt-review-summary__count {
	font-size: 13px;
	font-weight: 600;
	color: var(--jpt-ink-2);
	text-decoration: none;
}
.jpt-review-summary__count:hover { color: var(--jpt-red); }
.jpt-review-summary__invite {
	font-size: 13px;
	color: var(--jpt-muted);
	text-decoration: none;
	border-bottom: 1px dashed var(--jpt-line);
	padding-bottom: 1px;
}
.jpt-review-summary__invite:hover { color: var(--jpt-red); border-color: var(--jpt-red); }

/* ---- Help me choose path under the buy cluster ---- */
.jpt-help-choose {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	background: var(--jpt-surface-2);
	color: var(--jpt-ink-2);
	text-decoration: none;
	transition: border-color var(--jpt-t), background var(--jpt-t), transform var(--jpt-t);
}
.jpt-help-choose:hover {
	border-color: var(--jpt-red);
	background: var(--jpt-surface);
	transform: translateY(-1px);
}
.jpt-help-choose__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--jpt-red);
}
.jpt-help-choose__text {
	flex: 1 1 auto;
	font-size: 13px;
	line-height: 1.45;
}
.jpt-help-choose__text strong {
	display: block;
	font-size: 14px;
	color: var(--jpt-ink);
}
.jpt-help-choose__arrow {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--jpt-muted);
	transition: transform var(--jpt-t);
}
.jpt-help-choose:hover .jpt-help-choose__arrow { transform: translateX(3px); color: var(--jpt-red); }

@media (prefers-reduced-motion: reduce) {
	.jpt-help-choose, .jpt-help-choose__arrow { transition: none; }
	.jpt-help-choose:hover { transform: none; }
	.jpt-help-choose:hover .jpt-help-choose__arrow { transform: none; }
}

/* Phone hero: tighten type + top padding so the primary CTA reaches the
   fold instead of sitting below a six-line headline + lede. */
@media (max-width: 480px) {
	.jpt-home-hero { padding-top: 32px !important; }
	.jpt-home-hero h1 { font-size: 30px !important; margin-bottom: 14px !important; }
	.jpt-home-hero__lede { font-size: 16px !important; line-height: 1.5 !important; margin-bottom: 18px !important; }
	.jpt-home-hero__ctas { gap: 10px; }
}

/* ============================================================
   Section bands — full-bleed background with container-width inner.
   Adds color rhythm to the long home page: a dark brand band (stats,
   which also continues the dark hero so that transition stops being a
   hard cut) plus a subtle tint band (the honest-pitch comparison).
   ============================================================ */
.jpt-band {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 76px;
	padding-bottom: 76px;
}
.jpt-band__inner {
	max-width: 1222px;
	margin: 0 auto;
	padding-left: 32px;
	padding-right: 32px;
}
/* Bands manage their own spacing; suppress the inter-section red divider
   line on and immediately after a band so it never floats on a tint/dark. */
.jpt-band::before,
.jpt-band + .jpt-home-section::before { display: none !important; }

.jpt-band--tint {
	background: var(--jpt-surface-2);
	border-top: 1px solid var(--jpt-line-soft, var(--jpt-line));
	border-bottom: 1px solid var(--jpt-line-soft, var(--jpt-line));
}
.jpt-band--dark {
	background:
		radial-gradient(75% 130% at 85% 0%,
			rgba(200, 16, 46, 0.18) 0%,
			rgba(200, 16, 46, 0.07) 30%,
			rgba(200, 16, 46, 0.02) 48%,
			transparent 70%),
		linear-gradient(180deg, #07090C 0%, #0E141B 100%);
	color: #fff;
}
/* The dark stats band sits directly under the hero. Drop the hero's bottom
   margin so the two dark zones meet seamlessly (smooth transition). */
.jpt-home-hero { margin-bottom: 0 !important; }

/* The stats band is above the fold, so its .jpt-reveal animation plays on load:
   it starts transparent + shifted down 20px, flashing the page body through the
   gap. Paint whichever band holds the stats solid + in place immediately — the
   number count-up is observed on a separate selector, so it still animates. */
.jpt-band.jpt-reveal:has(.jpt-stats) {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ── Stats band as a LIGHT panel (distinct from the dark hero) ──────────────
   The band uses .jpt-band--tint (light grey). Give it clear top/bottom edges
   off the dark hero, drop the red accent bars (per earlier feedback), and keep
   the white stat cards with soft dividers. */
.jpt-band--tint:has(.jpt-stats) {
	background: #EEF1F6;
	border-top: 1px solid rgba(15, 20, 26, 0.10);
	border-bottom: 1px solid var(--jpt-line);
}
.jpt-band--tint:has(.jpt-stats) .jpt-stats {
	background: var(--jpt-line);
	border-color: var(--jpt-line);
	box-shadow: var(--jpt-shadow-sm);
}
.jpt-band--tint .jpt-stats__item::before { display: none; }

/* Stats become translucent glass cards on the dark band (the default white
   card would hide white text). */
.jpt-band--dark .jpt-stats {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: none;
	margin: 0;
}
.jpt-band--dark .jpt-stats__item {
	background: rgba(12, 16, 22, 0.55);
}
/* Drop the full-height red accent bar between stats on the dark band — four of
   them read as harsh red divider lines flanking each stat. The thin glass-card
   gaps are enough separation; brand red still shows in the stat values. */
.jpt-band--dark .jpt-stats__item::before { display: none; }
/* And soften the cell dividers + outer border so the band reads as one calm
   panel instead of a heavily lined grid. */
.jpt-band--dark .jpt-stats {
	gap: 0;
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.08);
}
.jpt-band--dark .jpt-stats__item + .jpt-stats__item {
	border-left: 1px solid rgba(255, 255, 255, 0.07);
}
@media (max-width: 599px) {
	.jpt-band--dark .jpt-stats__item + .jpt-stats__item { border-left: 0; }
}
.jpt-band--dark .jpt-stats__value { color: #fff; }
.jpt-band--dark .jpt-stats__unit  { color: rgba(255, 255, 255, 0.68); }
.jpt-band--dark .jpt-stats__label { color: rgba(255, 255, 255, 0.72); }
.jpt-band--dark .jpt-stats__note  { color: rgba(255, 255, 255, 0.55); }
.jpt-band--dark .jpt-stats__value--text { color: #ff4d6a; }

@media (max-width: 768px) {
	.jpt-band { padding-top: 52px; padding-bottom: 52px; }
	.jpt-band__inner { padding-left: 20px; padding-right: 20px; }
}

/* ---- Prices in confident ink, not red (red is reserved for actions) ---- */
.jpt-product-showcase .price,
.jpt-product-showcase .price .woocommerce-Price-amount,
.jpt-product-showcase .price .woocommerce-Price-amount bdi,
.single-product .summary .price,
.single-product .summary .price .woocommerce-Price-amount,
.single-product .summary .price .woocommerce-Price-amount bdi {
	color: var(--jpt-ink) !important;
}
/* Genuine sale prices keep red as the "deal" signal. */
.single-product .summary .price ins .woocommerce-Price-amount,
.jpt-product-showcase .price ins .woocommerce-Price-amount {
	color: var(--jpt-red) !important;
}

/* ============================================================
   Long-form article / guide pages (comparisons, how-tos, buying guides).
   Reusable across the whole content roadmap (CONTENT-ROADMAP.md).
   ============================================================ */
.jpt-article { max-width: 820px; margin: 0 auto; }
.jpt-article-updated { font-size: 13px; color: var(--jpt-muted); margin: 0 0 20px; letter-spacing: 0.01em; }
.jpt-article h2 { margin: 38px 0 12px; font-size: 26px; font-weight: 700; }
.jpt-article h3 { margin: 26px 0 8px; font-size: 19px; font-weight: 700; }
.jpt-article p, .jpt-article li { font-size: 16px; line-height: 1.7; color: var(--jpt-ink-2); }
.jpt-article ul { margin: 0 0 18px; padding-left: 22px; }
.jpt-article li { margin: 6px 0; }
.jpt-article a { color: var(--jpt-red); text-decoration: underline; text-underline-offset: 2px; }

.jpt-answer {
	border-left: 4px solid var(--jpt-red);
	background: var(--jpt-surface-2);
	padding: 16px 20px;
	border-radius: var(--jpt-radius);
	margin: 0 0 30px;
}
.jpt-answer p { margin: 0; }

.jpt-article-table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0 30px;
	font-size: 15px;
}
.jpt-article-table th,
.jpt-article-table td {
	border: 1px solid var(--jpt-line);
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
}
.jpt-article-table thead th { background: var(--jpt-ink); color: #fff; font-weight: 600; }
.jpt-article-table tbody tr:nth-child(even) { background: var(--jpt-surface-2); }
.jpt-article-table td:first-child,
.jpt-article-table th:first-child { font-weight: 600; }

.jpt-faq { margin: 24px 0 8px; }
.jpt-faq__q { font-weight: 700; font-size: 17px; margin: 20px 0 6px; color: var(--jpt-ink); }
.jpt-faq__a { margin: 0; }

.jpt-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 34px 0 8px; }
.jpt-cta-row .jpt-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--jpt-radius);
	font-weight: 600;
	text-decoration: none;
	transition: transform var(--jpt-t), background var(--jpt-t);
}
.jpt-cta-row .jpt-btn--primary { background: var(--jpt-red); color: #fff; }
.jpt-cta-row .jpt-btn--primary:hover { background: var(--jpt-red-dark, #a50d26); transform: translateY(-1px); }
.jpt-cta-row .jpt-btn--ghost { border: 1px solid var(--jpt-line); color: var(--jpt-ink); }
.jpt-cta-row .jpt-btn--ghost:hover { border-color: var(--jpt-red); color: var(--jpt-red); }

@media (max-width: 768px) {
	.jpt-article h2 { font-size: 22px; }
	.jpt-article-table { font-size: 13.5px; }
	.jpt-article-table th, .jpt-article-table td { padding: 8px 10px; }
}

/* ---- Reciprocal "Guides & resources" block (inc/related-guides.php) ---- */
.jpt-related-guides {
	margin: var(--jpt-stack-xl) 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--jpt-line);
}
.jpt-related-guides__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 14px;
	color: var(--jpt-ink);
}
.jpt-related-guides__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
@media (max-width: 768px) { .jpt-related-guides__list { grid-template-columns: 1fr; } }
.jpt-related-guides__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	background: var(--jpt-surface-2);
	color: var(--jpt-ink-2);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--jpt-t), background var(--jpt-t), transform var(--jpt-t);
}
.jpt-related-guides__link:hover {
	border-color: var(--jpt-red);
	background: var(--jpt-surface);
	transform: translateY(-1px);
	color: var(--jpt-ink);
}
.jpt-related-guides__link svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	color: var(--jpt-muted);
	transition: transform var(--jpt-t), color var(--jpt-t);
}
.jpt-related-guides__link:hover svg { transform: translateX(3px); color: var(--jpt-red); }
@media (prefers-reduced-motion: reduce) {
	.jpt-related-guides__link, .jpt-related-guides__link svg { transition: none; }
	.jpt-related-guides__link:hover { transform: none; }
	.jpt-related-guides__link:hover svg { transform: none; }
}

/* ============================================================
   Article reading-experience polish (UI/UX design pass).
   Additive, scoped to .jpt-* article components only — no
   Woodmart parent edits; respects existing tokens + reduced-motion.
   Applied design rules: optimal line measure, tabular figures,
   stable press/focus states, FAQ scannability.
   ============================================================ */

/* Comfortable reading measure for prose; tables, media + CTAs stay full width */
.jpt-article p,
.jpt-article > ul,
.jpt-article > ol,
.jpt-article h2,
.jpt-article h3,
.jpt-article .jpt-faq { max-width: 72ch; }
.jpt-article .jpt-article-table,
.jpt-article .jpt-photo-slot,
.jpt-article .jpt-cta-row { max-width: none; }

/* Comparison tables: aligned figures + subtle row hover for easier scanning */
.jpt-article-table { font-variant-numeric: tabular-nums; }
.jpt-article-table tbody tr { transition: background var(--jpt-t); }
.jpt-article-table tbody tr:hover { background: var(--jpt-surface-3); }

/* FAQ: hairline divider between question/answer pairs for scannability */
.jpt-faq__q { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--jpt-line); }
.jpt-faq__q:first-child { padding-top: 0; border-top: 0; }

/* Keyboard focus + tactile press feedback on article CTAs (no layout shift) */
.jpt-cta-row .jpt-btn:focus-visible { outline: 2px solid var(--jpt-red); outline-offset: 3px; }
.jpt-cta-row .jpt-btn:active { transform: translateY(0) scale(0.98); }

@media (prefers-reduced-motion: reduce) {
	.jpt-article-table tbody tr { transition: none; }
	.jpt-cta-row .jpt-btn:active { transform: none; }
}

/* ============================================================
   Home: staggered grid entrance + hover image zoom (modern,
   interactive). The hidden state lives behind .jpt-stagger, which
   JS only adds when it can animate — FOUC-safe + reduced-motion safe.
   Scoped to the applications grid (category cards keep their 3D tilt).
   ============================================================ */
.jpt-stagger > * {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}
.jpt-stagger.is-in > * { opacity: 1; transform: none; }
.jpt-stagger.is-in > *:nth-child(1) { transition-delay: 0.04s; }
.jpt-stagger.is-in > *:nth-child(2) { transition-delay: 0.10s; }
.jpt-stagger.is-in > *:nth-child(3) { transition-delay: 0.16s; }
.jpt-stagger.is-in > *:nth-child(4) { transition-delay: 0.22s; }
.jpt-stagger.is-in > *:nth-child(5) { transition-delay: 0.28s; }
.jpt-stagger.is-in > *:nth-child(6) { transition-delay: 0.34s; }
.jpt-stagger.is-in > *:nth-child(7) { transition-delay: 0.40s; }
.jpt-stagger.is-in > *:nth-child(8) { transition-delay: 0.46s; }
.jpt-stagger.is-in > *:nth-child(n+9) { transition-delay: 0.52s; }

/* Hover: gently zoom the tile image within its frame (the tile already lifts) */
.application-tile .jpt-photo-slot__img { transition: transform 0.45s ease; }
.application-tile:hover .jpt-photo-slot__img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
	.jpt-stagger > * { opacity: 1 !important; transform: none !important; transition: none; }
	.application-tile .jpt-photo-slot__img { transition: none; }
	.application-tile:hover .jpt-photo-slot__img { transform: none; }
}

/* ============================================================
   Category page — above-grid intro + featured machine picks.
   Rendered by jpt_category_featured_intro() (functions.php).
   ============================================================ */
.jpt-cat-featured {
	margin: 0 0 var(--jpt-stack-lg);
}

.jpt-cat-featured__intro {
	max-width: 90ch;
	margin: 0 auto var(--jpt-stack-md);
	font-size: 16px;
	line-height: 1.65;
	color: var(--jpt-ink-3);
	text-align: center;
}

.jpt-cat-featured__grid {
	display: grid;
	grid-template-columns: repeat(var(--jpt-feat-cols, 4), minmax(0, 1fr));
	gap: var(--jpt-stack-sm);
}

.jpt-cat-featured__card {
	display: flex;
	flex-direction: column;
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--jpt-shadow-sm);
	transition: border-color var(--jpt-t) var(--jpt-ease),
		box-shadow var(--jpt-t) var(--jpt-ease),
		transform var(--jpt-t) var(--jpt-ease);
}

.jpt-cat-featured__card:hover {
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-shadow-lg);
	transform: translateY(-4px);
}

.jpt-cat-featured__card:focus-visible {
	outline: none;
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-focus-ring), var(--jpt-shadow);
}

.jpt-cat-featured__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--jpt-surface-3);
}

.jpt-cat-featured__media .jpt-cat-featured__img,
.jpt-cat-featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--jpt-t-slow) var(--jpt-ease-out);
}

.jpt-cat-featured__card:hover .jpt-cat-featured__img,
.jpt-cat-featured__card:hover .jpt-cat-featured__media img {
	transform: scale(1.05);
}

.jpt-cat-featured__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 16px 18px;
	flex: 1 1 auto;
}

.jpt-cat-featured__name {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--jpt-ink);
	text-wrap: balance;
}

.jpt-cat-featured__price {
	font-size: 15px;
	font-weight: 700;
	color: var(--jpt-ink);
	font-variant-numeric: tabular-nums;
}

.jpt-cat-featured__price del { color: var(--jpt-muted); font-weight: 500; margin-right: 6px; }
.jpt-cat-featured__price ins { text-decoration: none; color: var(--jpt-red); }

.jpt-cat-featured__cta {
	margin-top: auto;
	padding-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--jpt-red);
}

.jpt-cat-featured__cta svg {
	width: 15px;
	height: 15px;
	transition: transform var(--jpt-t) var(--jpt-ease);
}

.jpt-cat-featured__card:hover .jpt-cat-featured__cta svg {
	transform: translateX(3px);
}

@media (max-width: 1024px) {
	.jpt-cat-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.jpt-cat-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.jpt-cat-featured__body { padding: 12px 12px 14px; }
	.jpt-cat-featured__name { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.jpt-cat-featured__card,
	.jpt-cat-featured__img,
	.jpt-cat-featured__media img,
	.jpt-cat-featured__cta svg { transition: none; }
	.jpt-cat-featured__card:hover { transform: none; }
	.jpt-cat-featured__card:hover .jpt-cat-featured__img,
	.jpt-cat-featured__card:hover .jpt-cat-featured__media img { transform: none; }
	.jpt-cat-featured__card:hover .jpt-cat-featured__cta svg { transform: none; }
}

/* ============================================================
   Shop page (/shop/) — full description below the product grid.
   Reuses the proven .jpt-category-longform card. The --wide modifier
   lets the Shop version span the content width (it has more copy than
   a single category) and gives its multi-column FAQ room to breathe.
   Inner prose is capped to a readable measure so lines never sprawl.
   ============================================================ */
.jpt-category-longform--wide {
	max-width: 1222px;
	padding: var(--jpt-stack-lg) var(--jpt-stack-lg);
}

/* Prose fills the wide card width (with comfortable padding from the card
   itself), so there is no awkward empty right gutter. Lines stay readable
   because the card is padded, not because the text is pinned narrow-left. */
.jpt-category-longform--wide > p,
.jpt-category-longform--wide > ul,
.jpt-category-longform--wide > ol,
.jpt-category-longform--wide > h2,
.jpt-category-longform--wide > h3,
.jpt-category-longform--wide .jpt-cat-intro,
.jpt-category-longform--wide .jpt-faq {
	max-width: 100%;
}

/* ============================================================
   Design-audit #4 — Shop "category pills" → tappable cards.
   Restyles Woodmart's shop category-nav widget (wd-nav-product-cat),
   which sits above the description. Default render is small + quiet;
   these become clear, larger, equal-width cards. CSS-only (we never
   edit the parent theme markup).
   ============================================================ */
.wd-nav-product-cat.has-product-count {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--jpt-stack-sm);
	margin: 0 auto var(--jpt-stack-md);
	padding: 0;
	max-width: 1080px;
	list-style: none;
}

.wd-nav-product-cat.has-product-count > .cat-item {
	flex: 1 1 200px;
	max-width: 280px;
	margin: 0 !important;
	padding: 0 !important;
}

.wd-nav-product-cat.has-product-count > .cat-item > .category-nav-link {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 18px;
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius-lg);
	box-shadow: var(--jpt-shadow-sm);
	text-decoration: none;
	transition: border-color var(--jpt-t) var(--jpt-ease),
		box-shadow var(--jpt-t) var(--jpt-ease),
		transform var(--jpt-t) var(--jpt-ease);
}

.wd-nav-product-cat.has-product-count > .cat-item > .category-nav-link:hover {
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-shadow);
	transform: translateY(-3px);
}

.wd-nav-product-cat.has-product-count > .cat-item > .category-nav-link:focus-visible {
	outline: none;
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-focus-ring), var(--jpt-shadow);
}

.wd-nav-product-cat.has-product-count .wd-nav-img {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
}

.wd-nav-product-cat.has-product-count .nav-link-summary {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	text-align: left;
}

.wd-nav-product-cat.has-product-count .nav-link-text {
	font-size: 15px;
	font-weight: 700;
	color: var(--jpt-ink);
	line-height: 1.25;
}

.wd-nav-product-cat.has-product-count .nav-link-count {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--jpt-muted);
	font-variant-numeric: tabular-nums;
}

/* Remove Woodmart's underline-style active indicator inside our cards. */
.wd-nav-product-cat.has-product-count.wd-style-underline > .cat-item > .category-nav-link::before,
.wd-nav-product-cat.has-product-count.wd-style-underline > .cat-item > .category-nav-link::after {
	display: none !important;
}

@media (max-width: 560px) {
	.wd-nav-product-cat.has-product-count { flex-direction: column; align-items: stretch; }
	.wd-nav-product-cat.has-product-count > .cat-item { max-width: none; flex-basis: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.wd-nav-product-cat.has-product-count > .cat-item > .category-nav-link { transition: none; }
	.wd-nav-product-cat.has-product-count > .cat-item > .category-nav-link:hover { transform: none; }
}

/* ============================================================
   Design-audit #3 — Home page section rhythm.
   The home page alternates dark / tint / plain bands, but two PLAIN
   sections sometimes sit back-to-back (best-sellers → UV/cleaning;
   applications → why-buyers), reading as one undifferentiated block.
   Give the SECOND of any two adjacent plain sections a soft contained
   tint panel so the eye always gets a break. CSS-only, no content edit.
   (A "plain" section is .jpt-home-section without .jpt-band.)
   ============================================================ */
.jpt-home-section:not(.jpt-band) + .jpt-home-section:not(.jpt-band) {
	background: var(--jpt-surface-2);
	border: 1px solid var(--jpt-line-soft, var(--jpt-line));
	border-radius: var(--jpt-radius-lg);
	margin-top: var(--jpt-stack-lg);
	margin-bottom: var(--jpt-stack-lg);
	padding: var(--jpt-stack-lg) var(--jpt-stack-md);
}

/* The contained panel supplies its own separation, so drop the floating
   red divider line that would otherwise sit on the tint. */
.jpt-home-section:not(.jpt-band) + .jpt-home-section:not(.jpt-band)::before {
	display: none !important;
}

@media (max-width: 768px) {
	.jpt-home-section:not(.jpt-band) + .jpt-home-section:not(.jpt-band) {
		padding: var(--jpt-stack-md) var(--jpt-stack-sm);
		border-radius: var(--jpt-radius);
	}
}


/* ============================================================
   Applications archive  (/applications/) — archive-application.php
   Full-width editorial card grid, no sidebar.
   ============================================================ */

.jpt-app-archive {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px 64px;
	float: none !important;   /* override Woodmart blog column float */
	width: 100% !important;
}

.jpt-hero--archive {
	text-align: left;
}

/* Toolbar: filter + live count */
.jpt-app-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--jpt-stack-sm);
	margin: 0 0 var(--jpt-stack-md);
}

.jpt-app-search {
	position: relative;
	flex: 1 1 320px;
	max-width: 480px;
}

.jpt-app-search__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--jpt-muted);
	pointer-events: none;
}

/* High specificity + !important: Woodmart's global input styling otherwise
   resets padding to 15px, which slides the placeholder under the search icon. */
.jpt-app-archive .jpt-app-search .jpt-app-search__input {
	box-sizing: border-box;
	width: 100%;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 16px 0 44px !important;
	font-size: 15px;
	line-height: 48px;
	font-family: var(--jpt-font);
	color: var(--jpt-ink);
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	box-shadow: var(--jpt-shadow-sm);
	transition: border-color var(--jpt-t) var(--jpt-ease), box-shadow var(--jpt-t) var(--jpt-ease);
}

.jpt-app-archive .jpt-app-search .jpt-app-search__input::placeholder { color: var(--jpt-muted); opacity: 1; }

/* Hide native search "X" clear control so it can't collide with our layout */
.jpt-app-archive .jpt-app-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.jpt-app-archive .jpt-app-search .jpt-app-search__input:focus {
	outline: none;
	border-color: var(--jpt-red);
	box-shadow: var(--jpt-focus-ring);
}

.jpt-app-toolbar__count {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--jpt-ink-4);
	white-space: nowrap;
}

.jpt-app-toolbar__count #jpt-app-count { color: var(--jpt-ink); }

/* Card grid */
.jpt-app-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--jpt-stack-md);
}

/* Sparse archives (1–2 cards, e.g. customer stories at launch): use roomy
   fixed columns so a single card doesn't sit as a lonely narrow box. */
.jpt-app-grid--few {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 760px;
}

@media (max-width: 599px) {
	.jpt-app-grid--few { grid-template-columns: 1fr; }
}

.jpt-app-card {
	margin: 0;
	display: flex;
}

.jpt-app-card[hidden] { display: none; }

.jpt-app-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 24px 24px 22px;
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius-lg);
	box-shadow: var(--jpt-shadow-sm);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: transform var(--jpt-t) var(--jpt-ease),
		box-shadow var(--jpt-t) var(--jpt-ease),
		border-color var(--jpt-t) var(--jpt-ease);
}

/* Red accent bar that grows on hover */
.jpt-app-card__link::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--jpt-red), var(--jpt-red-dark));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--jpt-t-slow) var(--jpt-ease-out);
}

.jpt-app-card__link:hover,
.jpt-app-card__link:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--jpt-shadow-lg);
	border-color: var(--jpt-line);
	outline: none;
}

.jpt-app-card__link:focus-visible {
	box-shadow: var(--jpt-shadow-lg), var(--jpt-focus-ring);
}

.jpt-app-card__link:hover::before,
.jpt-app-card__link:focus-visible::before {
	transform: scaleX(1);
}

.jpt-app-card__kicker {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jpt-red);
	margin-bottom: 10px;
}

.jpt-app-card__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--jpt-ink);
	margin: 0 0 10px;
}

.jpt-app-card__desc {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--jpt-ink-4);
	margin: 0 0 18px;
}

.jpt-app-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--jpt-red);
}

.jpt-app-card__cta svg {
	transition: transform var(--jpt-t) var(--jpt-ease);
}

.jpt-app-card__link:hover .jpt-app-card__cta svg,
.jpt-app-card__link:focus-visible .jpt-app-card__cta svg {
	transform: translateX(4px);
}

/* ============================================================
   Applications hub — quick-pick advisor chips + job groups
   ============================================================ */

/* Frictionless advisor: chip row that scrolls to a job group (no email gate). */
.jpt-app-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--jpt-stack-md);
}

.jpt-app-chips__lead {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jpt-ink-4);
	margin-right: 4px;
}

.jpt-app-chip {
	font-family: var(--jpt-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--jpt-ink-2);
	background: var(--jpt-surface);
	border: 1px solid var(--jpt-line);
	border-radius: 999px;
	padding: 9px 16px;
	cursor: pointer;
	transition: color var(--jpt-t) var(--jpt-ease),
		background var(--jpt-t) var(--jpt-ease),
		border-color var(--jpt-t) var(--jpt-ease),
		transform var(--jpt-t) var(--jpt-ease);
}

.jpt-app-chip:hover {
	border-color: var(--jpt-red);
	color: var(--jpt-red);
	transform: translateY(-1px);
}

.jpt-app-chip:focus-visible {
	outline: none;
	box-shadow: var(--jpt-focus-ring);
}

.jpt-app-chip[aria-pressed="true"] {
	color: #fff;
	background: var(--jpt-red);
	border-color: var(--jpt-red);
}

.jpt-app-chip--reset[aria-pressed="true"] {
	color: var(--jpt-ink);
	background: var(--jpt-surface-3);
	border-color: var(--jpt-line);
}

/* Job group sections */
.jpt-app-group {
	margin: 0 0 var(--jpt-stack-xl);
	scroll-margin-top: 90px;
}

.jpt-app-group[hidden] { display: none; }

.jpt-app-group.is-flash .jpt-app-group__head {
	animation: jpt-app-flash 1.2s var(--jpt-ease);
}

@keyframes jpt-app-flash {
	0%   { background: var(--jpt-red-soft); }
	100% { background: transparent; }
}

.jpt-app-group__head {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "kicker count" "title count" "promise promise";
	align-items: baseline;
	column-gap: 16px;
	padding: 12px 12px 14px 0;
	border-top: 2px solid var(--jpt-ink);
	margin-bottom: var(--jpt-stack-sm);
	border-radius: 2px;
}

.jpt-app-group__kicker {
	grid-area: kicker;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jpt-red);
}

.jpt-app-group__title {
	grid-area: title;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--jpt-ink);
	margin: 4px 0 0;
	line-height: 1.2;
}

.jpt-app-group__promise {
	grid-area: promise;
	font-size: 15px;
	line-height: 1.55;
	color: var(--jpt-ink-3);
	margin: 8px 0 0;
	max-width: 70ch;
}

.jpt-app-group__count {
	grid-area: count;
	align-self: start;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--jpt-ink-4);
	white-space: nowrap;
	padding-top: 2px;
}

.jpt-app-group__intro {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--jpt-ink-4);
	margin: 0 0 14px;
	max-width: 80ch;
}

/* See-also inline rail: pillar guide + machine category */
.jpt-app-seealso {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 var(--jpt-stack-md);
}

.jpt-app-seealso__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--jpt-ink-2);
	text-decoration: none;
	background: var(--jpt-surface-2);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	padding: 7px 13px;
	transition: color var(--jpt-t) var(--jpt-ease), border-color var(--jpt-t) var(--jpt-ease);
}

.jpt-app-seealso__link::before {
	content: "→";
	color: var(--jpt-red);
	font-weight: 700;
}

.jpt-app-seealso__link:hover,
.jpt-app-seealso__link:focus-visible {
	color: var(--jpt-red);
	border-color: var(--jpt-red);
	outline: none;
}

.jpt-app-seealso__link:focus-visible { box-shadow: var(--jpt-focus-ring); }

@media (max-width: 599px) {
	.jpt-app-group__head {
		grid-template-columns: 1fr;
		grid-template-areas: "kicker" "title" "count" "promise";
	}
	.jpt-app-group__count { padding-top: 6px; }
	.jpt-app-group__title { font-size: 22px; }
	.jpt-app-chips { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.jpt-app-chip,
	.jpt-app-seealso__link { transition: none; }
	.jpt-app-group.is-flash .jpt-app-group__head { animation: none; }
}

/* ============================================================
   Related-jobs rail (end of every single application page)
   ============================================================ */
.jpt-related-apps {
	margin: var(--jpt-stack-xl) 0 0;
	padding: var(--jpt-stack-lg) 0 0;
	border-top: 2px solid var(--jpt-ink);
}

.jpt-related-apps__title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--jpt-ink);
	margin: 0 0 var(--jpt-stack-md);
}

.jpt-related-apps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}

.jpt-related-app { margin: 0; }

.jpt-related-app__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 100%;
	padding: 14px 16px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--jpt-ink-2);
	text-decoration: none;
	background: var(--jpt-surface-2);
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	transition: color var(--jpt-t) var(--jpt-ease),
		border-color var(--jpt-t) var(--jpt-ease),
		background var(--jpt-t) var(--jpt-ease),
		transform var(--jpt-t) var(--jpt-ease);
}

.jpt-related-app__link svg { flex: 0 0 auto; color: var(--jpt-red); }

.jpt-related-app__link:hover,
.jpt-related-app__link:focus-visible {
	color: var(--jpt-red);
	border-color: var(--jpt-red);
	background: var(--jpt-surface);
	transform: translateY(-2px);
	outline: none;
}

.jpt-related-app__link:focus-visible { box-shadow: var(--jpt-focus-ring); }

.jpt-related-app__link:hover svg,
.jpt-related-app__link:focus-visible svg { transform: translateX(3px); transition: transform var(--jpt-t) var(--jpt-ease); }

/* ============================================================
   Comparison tables inside application content
   ============================================================ */
.single-application .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--jpt-stack-md) 0 var(--jpt-stack-lg);
	font-size: 14px;
	line-height: 1.5;
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	overflow: hidden;
}

.single-application .entry-content thead th {
	background: var(--jpt-ink);
	color: #fff;
	font-weight: 700;
	text-align: left;
	padding: 11px 14px;
	font-size: 13px;
	letter-spacing: 0.01em;
}

.single-application .entry-content tbody td {
	padding: 10px 14px;
	border-top: 1px solid var(--jpt-line);
	vertical-align: top;
	color: var(--jpt-ink-3);
}

.single-application .entry-content tbody tr:nth-child(even) td { background: var(--jpt-stripe); }
.single-application .entry-content tbody td:first-child { font-weight: 600; color: var(--jpt-ink); }

@media (max-width: 680px) {
	.single-application .entry-content table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
	.jpt-related-app__link,
	.jpt-related-app__link svg { transition: none; }
}

/* Empty / no-match state */
.jpt-app-empty {
	margin: var(--jpt-stack-md) 0 0;
	padding: var(--jpt-stack-md);
	text-align: center;
	font-size: 15px;
	color: var(--jpt-ink-4);
	background: var(--jpt-surface-2);
	border: 1px dashed var(--jpt-line);
	border-radius: var(--jpt-radius-lg);
}

.jpt-app-empty__reset {
	background: none;
	border: none;
	color: var(--jpt-red);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}

/* Pagination */
.jpt-app-pagination {
	margin-top: var(--jpt-stack-lg);
}

.jpt-app-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	margin: 0 3px;
	border: 1px solid var(--jpt-line);
	border-radius: var(--jpt-radius);
	color: var(--jpt-ink-3);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--jpt-t) var(--jpt-ease), color var(--jpt-t) var(--jpt-ease), border-color var(--jpt-t) var(--jpt-ease);
}

.jpt-app-pagination .page-numbers.current {
	background: var(--jpt-red);
	border-color: var(--jpt-red);
	color: #fff;
}

.jpt-app-pagination .page-numbers:hover:not(.current) {
	border-color: var(--jpt-red);
	color: var(--jpt-red);
}

@media (max-width: 599px) {
	.jpt-app-grid { grid-template-columns: 1fr; }
	.jpt-app-toolbar { flex-direction: column; align-items: stretch; }
	.jpt-app-search { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.jpt-app-card__link,
	.jpt-app-card__link::before,
	.jpt-app-card__cta svg { transition: none; }
}


/* ============ Buyer quotes grid (real testimonials, 2026-06-10) ============ */
.jpt-buyer-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 26px 0 10px; }
.jpt-buyer-quote { margin: 0; padding: 22px 24px; background: #fff; border: 1px solid #e6e8eb; border-radius: 14px; box-shadow: 0 2px 10px rgba(16,18,22,0.04); }
.jpt-buyer-quote blockquote { margin: 0 0 14px; padding: 0; border: 0; font-size: 15px; line-height: 1.65; color: #2a2e34; font-style: normal; }
.jpt-buyer-quote blockquote::before { content: ""; display: block; width: 26px; height: 3px; background: #c00; border-radius: 2px; margin-bottom: 12px; }
.jpt-buyer-quote figcaption { font-size: 13px; color: #6a6f76; }
.jpt-buyer-quote figcaption strong { color: #16181c; }


/* ============ Category cards under the page title (2026-06-10) ============
   Woodmart demo icons removed; uniform professional pill cards. */
.wd-page-title .wd-nav-product-cat {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 14px;
	margin-top: 6px;
}
.wd-page-title .wd-nav-product-cat li.cat-item { display: flex; margin: 0 !important; }
.wd-page-title .wd-nav-product-cat li.cat-item > a.category-nav-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 220px;
	min-height: 76px;
	padding: 14px 28px;
	background: #fff;
	border: 1px solid #e3e5e8;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(16, 18, 22, 0.05);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wd-page-title .wd-nav-product-cat li.cat-item > a.category-nav-link:hover {
	border-color: #c00;
	box-shadow: 0 6px 18px rgba(16, 18, 22, 0.10);
	transform: translateY(-2px);
}
/* demo star/blob icons: gone */
.wd-page-title .wd-nav-product-cat .wd-nav-img { display: none !important; }
.wd-page-title .wd-nav-product-cat .nav-link-summary { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wd-page-title .wd-nav-product-cat .nav-link-text {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #16181c;
	text-align: center;
	line-height: 1.35;
	text-decoration: none !important;
}
.wd-page-title .wd-nav-product-cat .nav-link-count { font-size: 12px; color: #7a7f87; }
/* kill Woodmart's underline style on these */
.wd-page-title .wd-nav-product-cat.wd-style-underline a::after,
.wd-page-title .wd-nav-product-cat .nav-link-text::after { display: none !important; }
/* active category: red accent */
.wd-page-title .wd-nav-product-cat li.wd-active > a.category-nav-link { border-color: #c00; }
.wd-page-title .wd-nav-product-cat li.wd-active .nav-link-text { color: #c00; }
@media (max-width: 768px) {
	.wd-page-title .wd-nav-product-cat li.cat-item > a.category-nav-link { min-width: 150px; min-height: 64px; padding: 10px 16px; }
}

/* ============ Free test-mark proof link on product pages ============ */
.jpt-proof-cta { margin: 14px 0 4px; }
.jpt-proof-cta__item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid #e3e5e8; border-radius: 10px; font-size: 13.5px; line-height: 1.45; color: inherit; transition: border-color .15s ease, background .15s ease; }
.jpt-proof-cta__item:hover { border-color: #c00; background: #fcf8f8; color: inherit; }
.jpt-proof-cta__item svg { width: 20px; height: 20px; flex: 0 0 20px; color: #c00; }