/* ============================================================
   JNR Builds — "Dark Laboratory" design system.
   Single fixed dark theme (no light/dark toggle) — ported from
   the Claude Design handoff's tokens.css, high-fidelity.
   ============================================================ */

:root {
	/* Surfaces */
	--ink-950: #0A0E0E;
	--ink-900: #101717;
	--ink-850: #0E1413;
	--ink-border: #1A2423;

	/* Text (never pure white) */
	--cream-100: #F2EEE3;
	--cream-400: #B9B5A9;
	--cream-dim-65: rgba(242,238,227,0.65);
	--cream-dim-45: rgba(242,238,227,0.45);
	--hairline: rgba(242,238,227,0.10);
	--hairline-strong: rgba(242,238,227,0.15);
	--hairline-hover: rgba(242,238,227,0.40);
	--wash: rgba(242,238,227,0.05);

	/* Accent */
	--glow-500: #2DD4BF;
	--glow-300: #7EE8DC;
	--glow-700: #14807A;
	--glow-border: rgba(45,212,191,0.40);
	--glow-shadow: 0 0 40px rgba(45,212,191,0.15);
	--glow-shadow-cta: 0 0 40px rgba(45,212,191,0.25);
	--dot-glow: 0 0 8px rgba(45,212,191,0.8);

	/* Status */
	--pass: #4ADE80; --pass-border: rgba(74,222,128,0.40);
	--warn: #FBBF24; --warn-border: rgba(251,191,36,0.40);
	--fail: #F87171; --fail-border: rgba(248,113,113,0.40);

	/* Brand */
	--brand-orange: #FF3C00;

	/* Stage / placeholder imagery */
	--stage-gradient: linear-gradient(180deg, #7C9490 0%, #4E6B6A 60%);
	--stage-light: #E9ECE8;

	/* Ambient hero pools */
	--pool-strong: rgba(20,128,122,0.35);
	--pool-soft: rgba(45,212,191,0.12);

	/* Radii */
	--r-card: 16px;
	--r-input: 12px;
	--r-cover: 8px;
	--r-pill: 9999px;

	/* WP core token overrides — so has-*-color content picks this up */
	--wp--preset--color--background: var(--ink-950);
	--wp--preset--color--foreground: var(--cream-100);
	--wp--preset--color--primary: var(--cream-100);
	--wp--preset--color--accent: var(--glow-500);
	--wp--preset--color--secondary: var(--ink-900);
	--wp--preset--color--destructive: var(--fail);
	--wp--preset--font-family--mono: 'Space Mono', monospace;
	--wp--preset--font-family--serif: 'Lora', serif;
	--wp--preset--font-family--sans: 'DM Sans', sans-serif;

	/* Kadence's own Global Palette */
	--global-palette1: #2DD4BF; /* teal accent */
	--global-palette2: #14807A; /* deep teal, hover/active */
	--global-palette3: #F2EEE3; /* cream (used where Kadence expects "ink/dark text") */
	--global-palette4: #B9B5A9; /* secondary cream */
	--global-palette5: #B9B5A9;
	--global-palette6: #7A7568;
	--global-palette7: #1A2423; /* borders */
	--global-palette8: #101717; /* card surface */
	--global-palette9: #0A0E0E; /* canvas */
	--jb-chip-bg: rgba(16,23,23,0.7); /* inactive tier chip; flips in light mode */
}

body { font-family: 'DM Sans', sans-serif !important; background-color: var(--ink-950) !important; color: var(--cream-100); }
body, input, select, optgroup, textarea { color: var(--cream-100); }
h1, h2, h3, h4, h5, h6 { font-family: 'Lora', serif !important; font-weight: 400 !important; color: var(--cream-100) !important; }
em, i { color: var(--glow-300); font-style: italic; }
a { color: var(--glow-300); }
.site, .content-area, .entry-content-wrap, .entry.loop-entry, .entry.single-entry { background: transparent !important; box-shadow: none !important; }

/* --- Header: pill nav on a translucent dark bar --- */
#masthead, #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap),
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
	background: rgba(10,14,14,0.85) !important;
	border-bottom: 1px solid var(--hairline);
	backdrop-filter: blur(6px);
}
.site-branding .site-title, .site-branding .site-title a { color: var(--cream-100) !important; font-weight: 700 !important; }
.main-navigation .primary-menu-container > ul > li.menu-item > a {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--cream-dim-65) !important;
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	padding-top: 7px !important;
	padding-bottom: 7px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	transition: border-color .2s ease-out, background .2s ease-out, color .2s ease-out;
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
	color: var(--cream-100) !important;
	border-color: var(--hairline-hover);
	background: var(--wash);
}
.header-navigation[class*="header-navigation-style-underline"] .header-menu-container.primary-menu-container > ul > li > a::after {
	display: none;
}
.mobile-navigation, #mobile-drawer { background: var(--ink-950) !important; }
.mobile-navigation ul li > a { color: var(--cream-dim-65) !important; }
.mobile-toggle-open-container .menu-toggle-open { color: var(--cream-100) !important; }

/* Header CTA pill ("Build a PC") — same menu as the rest of the nav, so target
   it by destination rather than a distinct block type */
.site-header-item .kadence-button, a.kadence-button, .header-navigation .kadence-button,
.main-navigation .primary-menu-container > ul > li.menu-item > a[href*="/builder/"] {
	background: var(--cream-100) !important;
	color: var(--ink-950) !important;
	font-weight: 600 !important;
	border-radius: var(--r-pill) !important;
	padding: 10px 22px !important;
	border: none !important;
	transition: transform .2s ease-out, box-shadow .2s ease-out !important;
}
.site-header-item .kadence-button:hover, a.kadence-button:hover,
.main-navigation .primary-menu-container > ul > li.menu-item > a[href*="/builder/"]:hover {
	transform: scale(1.02);
	box-shadow: var(--glow-shadow-cta);
}

/* --- Footer --- */
#colophon.site-footer { background: var(--ink-900) !important; border-top: 1px solid var(--ink-border); }
#colophon .site-footer-row-container-inner { background: transparent !important; }
#colophon a, #colophon p, #colophon .widget { color: var(--cream-dim-65); }
#colophon .site-footer-section:not(:last-child)::after { background: var(--hairline) !important; }
.jb-footer-pill {
	font-size: 12.5px;
	color: var(--cream-dim-65);
	padding: 6px 13px;
	border-radius: var(--r-pill);
	border: 1px solid var(--hairline-strong);
	text-decoration: none;
	transition: border-color .2s ease-out, color .2s ease-out;
}
.jb-footer-pill:hover { border-color: var(--hairline-hover); color: var(--cream-100); }
.jb-footer-disclosure { font-size: 12.5px; line-height: 1.6; color: rgba(242,238,227,0.55); }
.jb-footer-copyright { font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(242,238,227,0.35); }

/* --- Reusable: eyebrow badge (hairline pill + glowing dot) --- */
.jb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cream-400);
	border: 1px solid var(--hairline-strong);
	border-radius: var(--r-pill);
	padding: 6px 14px 6px 10px;
}
.jb-eyebrow-dot {
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--glow-500);
	box-shadow: var(--dot-glow);
	flex-shrink: 0;
}
.jb-eyebrow-plain {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--glow-300);
}

/* --- Reusable: card (ink-900, hairline border, teal hover glow) --- */
.wp-block-column > .wp-block-group,
.jb-card {
	background: var(--ink-900) !important;
	border: 1px solid var(--ink-border) !important;
	border-radius: var(--r-card) !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.wp-block-column > .wp-block-group:hover,
.jb-card:hover {
	border-color: var(--glow-700) !important;
	box-shadow: var(--glow-shadow) !important;
	transform: translateY(-2px);
}
.jb-card-flagship { border-color: var(--glow-border) !important; box-shadow: var(--glow-shadow) !important; }

/* --- Primary CTA (cream pill) --- */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--cream-100) !important;
	color: var(--ink-950) !important;
	font-weight: 600;
	border-radius: var(--r-pill) !important;
	position: relative;
	overflow: hidden;
	transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	transform: scale(1.02);
	box-shadow: var(--glow-shadow-cta);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link::after { content: none; }

/* --- Secondary CTA (hairline outline pill) --- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--cream-100) !important;
	border: 1px solid var(--hairline-strong) !important;
	border-radius: var(--r-pill) !important;
	transition: border-color .2s ease-out, background .2s ease-out;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--hairline-hover) !important;
	background: var(--wash) !important;
	box-shadow: none;
	color: var(--cream-100) !important;
}

/* --- Article / legal page measure + typography --- */
.jb-article { max-width: 720px; margin: 0 auto; }
.jb-article-narrow { max-width: 680px; margin: 0 auto; }
.jb-legal-body, .jb-legal-body p, .jb-legal-body li { font-family: 'Lora', serif; font-size: 17px; line-height: 1.8; color: var(--cream-400); }
.jb-legal-body h2 { font-size: 24px !important; font-weight: 500 !important; color: var(--cream-100) !important; margin: 36px 0 14px !important; }
.jb-legal-body a { color: var(--glow-300); }
.jb-legal-body ul { padding-left: 1.25rem; }

/* --- Contact/value-prop 2-3 col card row (About, Contact) --- */
.jb-info-card { background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); padding: 26px; transition: border-color .2s ease-out, box-shadow .2s ease-out; }
.jb-info-card:hover { border-color: var(--glow-700); box-shadow: var(--glow-shadow); }
.jb-info-card-email { font-family: var(--wp--preset--font-family--mono); font-size: 13px; color: var(--glow-300); }

/* --- Glossary: italic Lora letter dividers, dl-style term/definition --- */
.jb-glossary-body h2 { font-style: italic; font-weight: 400 !important; font-size: 28px !important; border-bottom: 1px solid var(--hairline); padding-bottom: 10px; margin: 44px 0 18px !important; scroll-margin-top: 90px; }
.jb-glossary-body h2:first-child { margin-top: 0 !important; }
.jb-glossary-body h3 { font-family: 'DM Sans', sans-serif !important; font-size: 17px !important; font-weight: 700 !important; margin: 26px 0 6px !important; scroll-margin-top: 90px; }
.jb-glossary-body > p, .jb-glossary-body p { color: var(--cream-400); font-size: 14.5px; line-height: 1.65; }
.jb-glossary-body blockquote.wp-block-quote { border: none; background: none; padding: 0; margin: 6px 0 0; }
.jb-glossary-body blockquote.wp-block-quote p { font-style: italic; font-size: 13px; color: rgba(242,238,227,0.45); }

/* --- Budget tier buttons: color-coded, dark-lab surfaces --- */
.jb-tier {
	background: var(--ink-900) !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-radius: var(--r-card) !important;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.jb-tier:hover { transform: translateY(-2px); }
.jb-tier-green { border-color: rgba(74,222,128,0.35) !important; }
.jb-tier-green:hover { border-color: var(--pass) !important; box-shadow: 0 0 24px rgba(74,222,128,0.15); }
.jb-tier-blue { border-color: rgba(45,212,191,0.35) !important; }
.jb-tier-blue:hover { border-color: var(--glow-500) !important; box-shadow: var(--glow-shadow); }
.jb-tier-purple { border-color: rgba(167,139,250,0.35) !important; }
.jb-tier-purple:hover { border-color: #A78BFA !important; box-shadow: 0 0 24px rgba(167,139,250,0.15); }
.jb-tier-accent { border-color: var(--glow-border) !important; }
.jb-tier-accent:hover { border-color: var(--glow-500) !important; box-shadow: var(--glow-shadow); }
.jb-tier-label {
	font-size: 1.15rem;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	display: block;
	color: var(--cream-100);
}
.jb-tier-sub { font-size: 0.75rem; color: var(--cream-400); display: block; margin-top: 0.15rem; }

/* --- Sample build preview card --- */
.jb-sample-build {
	max-width: 22rem;
	margin: 0 auto 2rem;
	background: var(--ink-900);
	border: 1px solid var(--ink-border);
	border-radius: var(--r-card);
	padding: 1.25rem;
}
.jb-sample-build-title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--glow-300);
	text-align: center;
	display: block;
	margin-bottom: 0.75rem;
}
.jb-sample-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; padding: 0.2rem 0; color: var(--cream-100); }
.jb-sample-cat { font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; color: var(--cream-400); width: 2.5rem; flex-shrink: 0; }
.jb-sample-name { flex: 1; }
.jb-sample-price { font-family: var(--wp--preset--font-family--mono); font-weight: 700; color: var(--glow-300); font-size: 0.75rem; }
.jb-sample-total { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--ink-border); margin-top: 0.5rem; padding-top: 0.5rem; font-size: 0.75rem; color: var(--cream-100); }
.jb-sample-total-value { color: var(--glow-300); font-weight: 700; }

/* --- Technical readouts: Space Mono for prices/specs --- */
.jb-total, .jb-price, .wp-block-table td:nth-child(3) {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	color: var(--glow-300);
}
.wp-block-table td:first-child { font-family: var(--wp--preset--font-family--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--glow-300); }
.wp-block-table td a { color: var(--glow-300); font-weight: 500; text-decoration: none; }
.wp-block-table td a:hover { text-decoration: underline; }

/* --- Article single-guide layout --- */
.jb-breadcrumb { font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-400); margin-bottom: 18px; }
.jb-breadcrumb a { color: var(--cream-400); }
.jb-breadcrumb .jb-current { color: var(--glow-300); }
.jb-cat-pill { font-family: var(--wp--preset--font-family--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--glow-300); border: 1px solid rgba(45,212,191,0.35); padding: 4px 12px; border-radius: 9999px; text-decoration: none; }
.jb-meta-date { font-family: var(--wp--preset--font-family--mono); font-size: 10.5px; color: rgba(242,238,227,0.45); }
.jb-hero-image { border-radius: var(--r-card); overflow: hidden; margin: 0 0 40px; background: var(--stage-gradient); aspect-ratio: 21/9; display: flex; align-items: center; justify-content: center; }
.jb-hero-image span { font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--stage-light); }
.jb-entry-content { max-width: 720px; margin: 0 auto; }
.jb-entry-content p { font-size: 15.5px; line-height: 1.7; color: var(--cream-400); }
.jb-entry-content h2 { font-size: 30px; margin: 40px 0 16px; }
.jb-entry-content .wp-block-quote {
	background: var(--ink-900);
	border: 1px solid var(--glow-border);
	border-left: 1px solid var(--glow-border);
	border-radius: var(--r-card);
	box-shadow: 0 0 40px rgba(45,212,191,0.08);
	padding: 26px 28px;
	margin: 0 0 40px;
}
.jb-entry-content .wp-block-quote p { color: var(--cream-100); font-size: 15.5px; }

/* --- Parts table --- */
.wp-block-table table { border-collapse: collapse; width: 100%; background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); overflow: hidden; }
.wp-block-table th {
	font-family: var(--wp--preset--font-family--mono);
	background: var(--ink-850);
	color: var(--cream-400);
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	font-weight: 700;
	padding: 0.85rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--ink-border);
}
.wp-block-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--ink-border); color: var(--cream-100); }
.wp-block-table tr:last-child td { border-bottom: none; }
.wp-block-table tr:hover td { background: var(--wash); }
.jb-table-total-row td { background: rgba(45,212,191,0.04); font-weight: 700; }

/* --- Quote / pro-tip blocks --- */
.wp-block-quote { border-left: 3px solid var(--glow-500); padding: 0.75rem 0 0.75rem 1.25rem; margin: 1.5rem 0; font-style: normal; background: var(--wash); color: var(--cream-400); }
.wp-block-quote p { margin: 0; }

/* --- Quick-answer callout --- */
.jb-callout {
	background: var(--ink-900);
	border: 1px solid var(--glow-border);
	border-radius: var(--r-card);
	box-shadow: var(--glow-shadow);
	padding: 1.5rem;
	margin: 1.5rem 0;
}

/* --- Topic/feature card icon treatment --- */
.jb-icon {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(45,212,191,0.10);
	border-radius: var(--r-input);
	color: var(--glow-500);
	margin-bottom: 1rem;
}
.jb-icon svg { width: 1.25rem; height: 1.25rem; }

/* --- Generic pill (filter chips, glossary A-Z nav, category filters) --- */
.jb-pill {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
	color: var(--cream-dim-65);
	border: 1px solid var(--hairline-strong);
	border-radius: var(--r-pill);
	padding: 7px 16px;
	text-decoration: none;
	background: transparent;
	transition: border-color .2s ease-out, background .2s ease-out, color .2s ease-out;
}
.jb-pill:hover { border-color: var(--hairline-hover); color: var(--cream-100); }
.jb-pill-active { background: var(--cream-100); color: var(--ink-950); border-color: var(--cream-100); }
.jb-pill-active:hover { color: var(--ink-950); border-color: var(--cream-100); }

/* --- Status pills (pass/warn/fail) --- */
.jb-status-pass { color: var(--pass); border-color: var(--pass-border) !important; background: rgba(74,222,128,0.08); }
.jb-status-warn { color: var(--warn); border-color: var(--warn-border) !important; background: rgba(251,191,36,0.08); }
.jb-status-fail { color: var(--fail); border-color: var(--fail-border) !important; background: rgba(248,113,113,0.08); }

/* --- Search highlight --- */
mark, .jb-mark { background: rgba(45,212,191,0.2); color: var(--glow-300); padding: 0 3px; border-radius: 3px; }

/* --- Scroll reveal --- */
.jb-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; }
.jb-reveal.jb-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.jb-reveal, .jb-reveal.jb-revealed { transition: none; transform: none; opacity: 1; }
	.wp-block-column > .wp-block-group, .jb-card, .wp-block-button__link { transition: none !important; }
	.wp-block-column > .wp-block-group:hover, .jb-card:hover,
	.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
	.wp-block-button.is-style-outline .wp-block-button__link:hover,
	.jb-tier:hover { transform: none; }
	.jb-tier { transition: none !important; }
}

/* Forum (wpForo) styles live in assets/forum.css, loaded only on forum pages. */

/* ============================================================
   Homepage "Home v2" — ambient hero, animated build card,
   sage-stage featured builds. From the Claude Design handoff.
   ============================================================ */
@keyframes labDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes labDrift2 { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(10px) translateX(18px); } }
@keyframes jnrTabLab { 0% { color: #7EE8DC; border-color: #2DD4BF; } 30% { color: #7EE8DC; border-color: #2DD4BF; } 34% { color: #B9B5A9; border-color: transparent; } 100% { color: #B9B5A9; border-color: transparent; } }
@keyframes jnrFace { 0% { opacity: 0; transform: translateY(6px); } 3% { opacity: 1; transform: translateY(0); } 30% { opacity: 1; transform: translateY(0); } 34% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes jnrBar { 0% { transform: scaleX(0); } 5% { transform: scaleX(0); } 14% { transform: scaleX(1); } 31% { transform: scaleX(1); } 34% { transform: scaleX(0); } 100% { transform: scaleX(0); } }

.jb-hero { position: relative; overflow: hidden; min-height: calc(100vh - 68px); display: flex; align-items: center; }
.jb-hero-pool-1 { position: absolute; right: -180px; top: -120px; width: 720px; height: 560px; background: radial-gradient(ellipse at center, rgba(20,128,122,0.35) 0%, transparent 70%); animation: labDrift 24s ease-in-out infinite; pointer-events: none; }
.jb-hero-pool-2 { position: absolute; right: 60px; bottom: -200px; width: 560px; height: 420px; background: radial-gradient(ellipse at center, rgba(45,212,191,0.12) 0%, transparent 70%); animation: labDrift2 32s ease-in-out infinite; pointer-events: none; }
.jb-hero-waves { position: absolute; right: -60px; top: 40px; width: 760px; height: 380px; opacity: 0.5; animation: labDrift 24s ease-in-out infinite; pointer-events: none; }
.jb-hero-grid { position: relative; width: 100%; max-width: 1760px; margin: 0 auto; padding: 56px 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 5vw; align-items: center; }
@media (max-width: 900px) { .jb-hero { min-height: auto; } .jb-hero-grid { grid-template-columns: 1fr; padding: 56px 32px; gap: 40px; } .jb-hero-pool-1, .jb-hero-pool-2, .jb-hero-waves { display: none; } }
.jb-hero-waves { width: 60vw; max-width: 1100px; }
.jb-hero-pool-1 { width: 45vw; max-width: 900px; height: 640px; }
.jb-hero-pool-2 { width: 38vw; max-width: 700px; height: 480px; }
.jb-hero-grid h1 { font-size: clamp(38px, 4.2vw, 64px) !important; }
.jb-hero-stats { flex-wrap: nowrap !important; }
.jb-hero-stat { padding: 0 clamp(10px, 1.8vw, 28px) !important; white-space: nowrap; }
.jb-hero-stats { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.jb-hero-stat { padding: 0 28px; }
.jb-hero-stat:first-child { padding-left: 0; }
.jb-hero-stat-div { width: 1px; background: var(--hairline); }
.jb-hero-stat-num { font-family: 'Lora', serif; font-size: 28px; color: var(--cream-100); line-height: 1.1; }
.jb-hero-stat-label { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-400); margin-top: 5px; }

/* animated cycling build card */
.jb-build-card { background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); box-shadow: var(--glow-shadow); }
.jb-build-card-head { padding: 16px 22px; border-bottom: 1px solid var(--ink-border); display: flex; justify-content: space-between; align-items: center; }
.jb-build-tabs { display: flex; gap: 18px; padding: 10px 22px; border-bottom: 1px solid var(--ink-border); }
.jb-build-tab { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-400); border-bottom: 2px solid transparent; padding-bottom: 2px; animation: jnrTabLab 10.5s linear infinite; }
.jb-build-stage { position: relative; height: 154px; overflow: hidden; }
.jb-build-face { position: absolute; inset: 0; opacity: 0; animation: jnrFace 10.5s linear infinite; pointer-events: none; }
.jb-build-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.jb-build-cat { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--cream-400); }
.jb-build-name { font-size: 13.5px; font-weight: 500; color: var(--cream-100); }
.jb-build-price { font-family: 'Space Mono', monospace; font-size: 13px; color: var(--cream-100); }
.jb-build-more { padding: 9px 0; font-family: 'Space Mono', monospace; font-size: 12px; color: var(--cream-400); }
.jb-fps-bar-track { height: 6px; background: var(--ink-border); border-radius: 9999px; overflow: hidden; }
.jb-fps-bar-fill { width: 100%; height: 100%; background: var(--glow-500); border-radius: 9999px; transform: scaleX(0); transform-origin: left; animation: jnrBar 10.5s linear infinite; }
.jb-build-foot { padding: 14px 22px; border-top: 1px solid var(--ink-border); display: flex; justify-content: space-between; align-items: center; }

/* budget tier cards with resolution badges */
.jb-tier2 { background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); padding: 24px; text-decoration: none; display: block; transition: border-color .2s ease-out, box-shadow .2s ease-out, transform .2s ease-out; }
.jb-tier2:hover { border-color: var(--glow-700); box-shadow: var(--glow-shadow); transform: translateY(-2px); }
.jb-tier2-badge { display: inline-block; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: 9999px; margin-bottom: 16px; }
.jb-tier2-price { font-family: 'Lora', serif; font-size: 30px; color: var(--cream-100); margin-bottom: 4px; }
.jb-tier2-label { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-400); }

/* value-prop hairline strip */
.jb-vp-strip { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.jb-vp-item { display: flex; align-items: center; gap: 12px; padding: 24px 8px; }
.jb-vp-item + .jb-vp-item { border-left: 1px solid var(--hairline); padding-left: 32px; }

/* sage-stage featured builds section */
.jb-stage { margin: 96px 0 0; background: var(--stage-gradient); padding: 72px 0; }
.jb-stage-card { background: rgba(10,14,14,0.88); border-radius: var(--r-card); overflow: hidden; text-decoration: none; display: block; transition: box-shadow .2s ease-out, transform .2s ease-out; }
.jb-stage-card:hover { box-shadow: 0 12px 44px rgba(10,14,14,0.4); transform: translateY(-2px); }
.jb-stage-card-flagship { border: 1px solid rgba(45,212,191,0.5); box-shadow: var(--glow-shadow); }
.jb-stage-img { aspect-ratio: 16/9; background: var(--stage-light); display: flex; align-items: center; justify-content: center; position: relative; }
.jb-stage-img span:first-child { font-family: 'Space Mono', monospace; font-size: 10.5px; color: #4E6B6A; }

/* CTA banner with radial pool */
.jb-cta-banner { position: relative; overflow: hidden; background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); padding: 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.jb-cta-banner-pool { position: absolute; left: -120px; bottom: -160px; width: 520px; height: 380px; background: radial-gradient(ellipse at center, rgba(20,128,122,0.35) 0%, transparent 70%); pointer-events: none; }

/* FAQ 2-col index */
.jb-faq-index { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
@media (max-width: 700px) { .jb-faq-index { grid-template-columns: 1fr; } }
.jb-faq-index-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--cream-100); font-size: 15px; font-weight: 500; }
.jb-faq-index-item span.jb-arrow { color: var(--glow-300); font-family: 'Space Mono', monospace; }

@media (prefers-reduced-motion: reduce) {
	.jb-hero-pool-1, .jb-hero-pool-2, .jb-hero-waves, .jb-build-tab, .jb-build-face, .jb-fps-bar-fill { animation: none !important; }
	.jb-build-face { opacity: 1; position: static; }
}

/* --- Site-wide: widen the 1076px content measure to reduce dead space on
   wide viewports. Targets the inline max-width WordPress/PHP templates set
   directly, since inline styles otherwise beat external stylesheet rules.
   Article/legal reading-width wrappers are deliberately excluded. --- */
[style*='max-width:1076px']:not(.jb-article):not(.jb-article-narrow),
[style*='max-width: 1076px']:not(.jb-article):not(.jb-article-narrow) {
	max-width: min(95vw, 1760px) !important;
}

/* --- Override Kadence's own site-wide content-width variable, which was
   silently capping every inner .jb-* max-width at ~1290px regardless of
   what this stylesheet set — this is the actual fix for 'dead space on
   every page', not just the hero. --- */
:root {
	--global-content-width: min(96vw, 1800px) !important;
	--global-content-wide-width: min(98vw, 1900px) !important;
}
.site-container, .content-container, .entry-hero-layout-contained,
.site-header-row-layout-contained, .site-footer-row-layout-contained {
	max-width: min(96vw, 1800px) !important;
}
.jb-hero-grid { max-width: min(96vw, 1900px) !important; }

/* --- Round 2 fix: widening the container alone just moved the dead space
   into the gap between hero columns. Fix: full-bleed ambient decoration
   across the ENTIRE viewport (not just the right portion), bigger text/
   card so content actually fills the reclaimed width, tighter column gap. --- */
.jb-hero-pool-1 { left: 0; right: auto; width: 55vw; max-width: 1100px; top: -80px; }
.jb-hero-pool-2 { right: 0; width: 50vw; max-width: 900px; }
.jb-hero-waves { left: 0; right: 0; width: 100vw; max-width: none; margin: 0 auto; }
.jb-hero-grid { max-width: 1600px !important; gap: clamp(40px, 3vw, 70px) !important; grid-template-columns: minmax(0, 1fr) minmax(420px, 520px) !important; }
.jb-hero-grid h1 { font-size: clamp(46px, 5.2vw, 80px) !important; }
.jb-hero-grid > div:first-child > p { font-size: clamp(17px, 1.4vw, 20px) !important; max-width: 520px !important; }
.jb-build-card { font-size: 1.08em; }

/* --- Round 3 fix, validated against a live prototype first: the real bug
   was a fixed-width sidebar column (420-520px) stretched inside a very wide
   container — the 1fr text column absorbed all the extra space as a gap
   nobody could see was empty. Fix: proportional fr columns so both sides
   grow together, moderate container width, generous full-bleed ambient glow. --- */
.jb-hero-grid {
	max-width: 1300px !important;
	grid-template-columns: 1.15fr 1fr !important;
	gap: 48px !important;
	padding: 56px 48px !important;
}
.jb-hero-pool-1 { left: -10%; right: auto; top: -25%; width: 60%; height: 140%; max-width: none; }
.jb-hero-pool-2 { right: -8%; left: auto; bottom: -30%; width: 50%; height: 120%; max-width: none; }
.jb-hero-waves { left: 0; right: 0; top: 5%; width: 100%; height: 70%; max-width: none; }
.jb-build-card { width: 100%; }

/* --- Hero rebuilt as full-bleed background image with overlaid content,
   replacing the two-column grid version. Fresh class names to avoid fighting
   the three previous .jb-hero-grid override rounds above. --- */
.jb-hero2 {
	position: relative;
	overflow: hidden;
	min-height: calc(100vh - 68px);
	background: linear-gradient(180deg, #7C9490 0%, #4E6B6A 60%);
}
.jb-hero2-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10,14,14,0.94) 0%, rgba(10,14,14,0.86) 38%, rgba(10,14,14,0.55) 68%, rgba(10,14,14,0.25) 100%);
	pointer-events: none;
}
.jb-hero2-tag {
	position: absolute;
	top: 24px;
	left: 32px;
	background: rgba(10,14,14,0.55);
	color: #7EE8DC;
	font-family: 'Space Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 13px;
	border-radius: 9999px;
	border: 1px solid rgba(126,232,220,0.3);
	z-index: 2;
}
.jb-hero2-content {
	position: relative;
	z-index: 1;
	max-width: 1300px;
	margin: 0 auto;
	min-height: calc(100vh - 68px);
	display: flex;
	align-items: center;
	padding: 100px clamp(24px, 4vw, 64px);
}
.jb-hero2-content > div { max-width: 640px; }
.jb-hero2-content h1 { font-size: clamp(40px, 4.5vw, 60px) !important; line-height: 1.1 !important; margin: 0 0 18px !important; }
.jb-hero2-content p.jb-hero2-sub { font-size: 16px; line-height: 1.6; color: #DAD7CE; margin: 0 0 28px; max-width: 460px; }
.jb-hero2-stats { display: flex; gap: 0; flex-wrap: wrap; }
.jb-hero2-stats > div:not(.jb-hero2-div) { padding: 0 22px; }
.jb-hero2-stats > div:first-child { padding-left: 0; }
.jb-hero2-div { width: 1px; background: rgba(242,238,227,0.2); }
.jb-hero2-stat-num { font-family: 'Lora', serif; font-size: 24px; color: #F2EEE3; }
.jb-hero2-stat-label { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #DAD7CE; margin-top: 4px; }
.jb-hero2-float-card {
	position: absolute;
	right: clamp(20px, 3vw, 48px);
	bottom: 32px;
	width: 340px;
	background: #101717;
	border: 1px solid #1A2423;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.5);
	z-index: 2;
}
@media (max-width: 900px) {
	.jb-hero2-float-card { display: none; }
	.jb-hero2-content { padding-top: 64px; padding-bottom: 64px; min-height: auto; }
	.jb-hero2-content > div { max-width: 100%; }
	.jb-hero2-scrim { background: linear-gradient(180deg, rgba(10,14,14,0.9) 0%, rgba(10,14,14,0.8) 100%); }
}

/* --- Actual fix: .jb-hero2 sits inside Kadence's .content-container.site-container
   (a reading-width wrapper, correct for normal pages). Fighting that wrapper's
   max-width with !important was never going to be reliable — this is the
   standard full-bleed breakout instead: the CHILD escapes ANY parent width
   using its own positioning math, independent of what the parent constrains
   itself to. Works regardless of viewport size or future theme changes. --- */
.jb-hero2, .jb-stage {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* --- Header floats transparently over the hero image on the front page only,
   instead of sitting as a separate solid bar above it — removes the seam by
   removing the boundary entirely. Pulls the hero up behind the header via
   negative margin, then pads its content back down so text doesn't hide
   under the nav. Scoped to body.home so other pages keep a normal header. --- */
/* Header reverted to normal in-flow bar (not floating over the hero). */

/* --- The extra dark band between the header and the hero image was
   Kadence's #mobile-header block rendering visible on desktop, when it's
   meant to be hidden above the mobile breakpoint. Force-hide it as a
   defensive override. --- */
/* The gap between header and hero was never the mobile header — it's
   Kadence's customizer spacing: .content-area{margin-top:5rem} plus
   .entry-content-wrap{padding:2rem}. Zero both on the homepage so the
   full-bleed sections touch the header and footer. */
body.home .content-area {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
body.home .entry-content-wrap {
	padding: 0 !important;
}
body.home .single-content {
	margin: 0 !important;
}

/* ===== Hero v3: hybrid GSAP hero (ticker + tier chips + assembly rig) ===== */
.jb-hero3 { position:relative; overflow:hidden; background:#0A0E0E; width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; }
.jb-hero3-grid { position:absolute; inset:0; background-image:radial-gradient(rgba(242,238,227,0.045) 1px,transparent 1px); background-size:26px 26px; pointer-events:none; }
.jb-hero3-spot { position:absolute; inset:0; transition:background 0.6s; background:radial-gradient(ellipse 950px 720px at 70% 40%, rgba(126,232,220,0.15), rgba(126,232,220,0.05) 45%, transparent 70%); pointer-events:none; }
.jb-ticker { position:relative; z-index:4; height:40px; border-bottom:1px solid #141C1B; background:rgba(13,18,18,0.7); overflow:hidden; display:none; align-items:center; }
.jb-ticker.on { display:flex; }
.jb-ticker-track { display:flex; white-space:nowrap; animation:jbTick 38s linear infinite; }
@keyframes jbTick { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
.jb-tick-item { display:inline-flex; align-items:center; gap:8px; padding:0 26px; font-family:'Space Mono',monospace; font-size:11px; color:#8FA39F; }
.jb-tick-name { color:#DAD7CE; }
.jb-tick-price { color:#F2EEE3; }
.jb-tick-sep { color:#223230; padding-left:26px; }
.jb-hero3-inner { position:relative; z-index:2; display:flex; align-items:center; min-height:calc(100vh - 68px); padding:60px clamp(24px,4.7vw,90px); }
.jb-hero3-left { max-width:min(48vw, 900px); }
.jb-hero3-left h1 { font-family:'Lora',serif !important; font-weight:400 !important; font-size:clamp(38px,4.3vw,82px) !important; line-height:1.05 !important; color:#F2EEE3 !important; margin:0 0 24px !important; }
.jb-hero3-left h1 em { font-style:italic; color:#7EE8DC; }
.jb-hero3-sub { font-size:clamp(15px,1.05vw,20px); line-height:1.6; color:#B9C4C0; max-width:580px; margin:0 0 32px; }
.jb-hero3-blabel { font-family:'Space Mono',monospace; font-size:12.5px; letter-spacing:0.13em; text-transform:uppercase; color:#8FA39F; margin-bottom:18px; }
.jb-hero3-chips { display:flex; gap:16px; margin-bottom:36px; flex-wrap:wrap; }
.jb-chip { position:relative; border-radius:12px; padding:16px 26px; cursor:pointer; background:rgba(16,23,23,0.7); border:1px solid #223230; transition:all 0.25s; min-width:158px; text-align:left; font-family:inherit; }
.jb-chip-res { font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:6px; }
.jb-chip-price { font-family:'Space Mono',monospace; font-weight:700; font-size:21px; color:#F2EEE3; }
.jb-chip-label { font-size:13px; color:#8FA39F; margin-top:3px; }
.jb-chip-badge { position:absolute; top:-12px; left:18px; background:#7EE8DC; color:#0A0E0E; font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; padding:3px 11px; border-radius:9999px; font-weight:700; }
.jb-hero3-ctas { display:flex; gap:18px; margin-bottom:42px; flex-wrap:wrap; }
.jb-hero3-stats { display:flex; align-items:center; gap:30px; }
.jb-hero3-stat-num { font-family:'Lora',serif; font-size:clamp(24px,1.8vw,34px); color:#F2EEE3; }
.jb-hero3-stat-label { font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:#8FA39F; }
.jb-hero3-statdiv { width:1px; height:46px; background:#1E2A28; }
.jb-hero3-right { position:absolute; right:clamp(60px,7.8vw,150px); top:50%; transform:translateY(-50%); width:clamp(430px,35.5vw,680px); z-index:3; }
.jb-hero3-right svg { width:100%; height:auto; display:block; }
.jb-rig-title-m, .jb-rig-parts { display:none; }
.jb-hero3-scroll { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:4px; z-index:2; font-family:'Space Mono',monospace; }
.jb-hero3-scroll-word { font-size:9.5px; letter-spacing:0.28em; text-transform:uppercase; color:rgba(242,238,227,0.4); }
.jb-hero3-scroll-arrow { color:rgba(126,232,220,0.6); font-size:14px; animation:jbBob 1.8s ease-in-out infinite; }
@keyframes jbBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(5px); } }
.jb-hero3-edge { position:absolute; right:26px; top:50%; transform:translateY(-50%) rotate(90deg); font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:rgba(242,238,227,0.28); white-space:nowrap; z-index:2; }
@media (max-width:1100px) {
	.jb-hero3-inner { flex-direction:column; align-items:stretch; padding-top:40px; padding-bottom:70px; min-height:auto; }
	.jb-hero3-left { max-width:100%; }
	.jb-hero3-right { position:static; transform:none; width:100%; max-width:560px; margin:36px auto 0; }
	.jb-rig-title-m { display:block; }
	.jb-rig-parts { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-top:12px; }
	.jb-hero3-edge { display:none; }
	.jb-svg-labels { display:none; }
}
@media (max-width:560px) {
	.jb-hero3-chips { gap:10px; }
	.jb-chip { min-width:calc(33% - 8px); padding:11px 12px; }
	.jb-chip-price { font-size:15px; }
	.jb-hero3-ctas a { width:100%; justify-content:center; }
	.jb-hero3-stats { gap:18px; }
}
@media (prefers-reduced-motion: reduce) {
	.jb-ticker-track { animation:none; }
	.jb-hero3-scroll-arrow { animation:none; }
}
/* ticker relocated below the hero: full-bleed strip with borders both sides */
.jb-ticker-below { width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; border-top:1px solid #141C1B; border-bottom:1px solid #141C1B; }

/* ============================================================
   Light mode ("Daylight") — opt-in via html[data-jbtheme="light"].
   Dark stays the default (no attribute). The token layer at the
   top is variable-driven, so re-declaring it here flips most of
   the site; the rules below patch the spots that use literal hex
   (header bar, hero, ticker, SVG rig).
   ============================================================ */
html[data-jbtheme="light"] {
	--ink-950: #F5F2EC;
	--ink-900: #FFFFFF;
	--ink-850: #F0ECE1;
	--ink-border: #E2DCCE;
	--cream-100: #1A1E24;
	--cream-400: #565C66;
	--cream-dim-65: rgba(26,30,36,0.62);
	--cream-dim-45: rgba(26,30,36,0.45);
	--hairline: rgba(26,30,36,0.10);
	--hairline-strong: rgba(26,30,36,0.16);
	--hairline-hover: rgba(26,30,36,0.42);
	--wash: rgba(26,30,36,0.04);
	--glow-500: #0E7C6B;
	--glow-300: #0E7C6B;
	--glow-700: #0B5F51;
	--glow-border: rgba(14,124,107,0.40);
	--glow-shadow: 0 0 30px rgba(14,124,107,0.10);
	--glow-shadow-cta: 0 0 30px rgba(14,124,107,0.14);
	--dot-glow: 0 0 6px rgba(14,124,107,0.5);
	--pool-strong: rgba(14,124,107,0.14);
	--pool-soft: rgba(14,124,107,0.06);
	--wp--preset--color--background: #F5F2EC;
	--wp--preset--color--foreground: #1A1E24;
	--wp--preset--color--primary: #1A1E24;
	--wp--preset--color--accent: #0E7C6B;
	--wp--preset--color--secondary: #FFFFFF;
	--global-palette1: #0E7C6B;
	--global-palette2: #0B5F51;
	--global-palette3: #1A1E24;
	--global-palette4: #565C66;
	--global-palette5: #565C66;
	--global-palette6: #8A857A;
	--global-palette7: #E2DCCE;
	--global-palette8: #FFFFFF;
	--global-palette9: #F5F2EC;
	--jb-chip-bg: #FFFFFF;
}
html[data-jbtheme="light"] #masthead,
html[data-jbtheme="light"] #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap),
html[data-jbtheme="light"] #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
	background: rgba(245,242,236,0.9) !important;
}
html[data-jbtheme="light"] .jb-hero3 { background:#F5F2EC; }
html[data-jbtheme="light"] .jb-hero3-grid { background-image:radial-gradient(rgba(26,30,36,0.05) 1px,transparent 1px); }
html[data-jbtheme="light"] .jb-hero3-left h1 { color:#1A1E24 !important; }
html[data-jbtheme="light"] .jb-hero3-left h1 em { color:#0E7C6B; }
html[data-jbtheme="light"] .jb-hero3-sub { color:#565C66; }
html[data-jbtheme="light"] .jb-hero3-blabel,
html[data-jbtheme="light"] .jb-hero3-stat-label { color:#7A7E74; }
html[data-jbtheme="light"] .jb-hero3-stat-num { color:#1A1E24; }
html[data-jbtheme="light"] .jb-hero3-statdiv { background:#D8D2C4; }
html[data-jbtheme="light"] .jb-chip { border-color:#D8D2C4; }
html[data-jbtheme="light"] .jb-chip-price { color:#1A1E24; }
html[data-jbtheme="light"] .jb-chip-label { color:#7A7E74; }
html[data-jbtheme="light"] .jb-chip[data-tier="budget"] .jb-chip-res { color:#2F8F5B !important; }
html[data-jbtheme="light"] .jb-chip[data-tier="sweet"] .jb-chip-res { color:#0E7C6B !important; }
html[data-jbtheme="light"] .jb-chip[data-tier="high"] .jb-chip-res { color:#B5760C !important; }
html[data-jbtheme="light"] .jb-chip-badge { background:#0E7C6B; color:#F5F2EC; }
html[data-jbtheme="light"] .jb-hero3-ctas a.labbtn { background:#1A1E24 !important; color:#F5F2EC !important; }
html[data-jbtheme="light"] .jb-hero3-ctas a:not(.labbtn) { color:#1A1E24 !important; border-color:rgba(26,30,36,0.3) !important; }
html[data-jbtheme="light"] .jb-ticker { background:#EFEBE0; border-color:#E2DCCE; }
html[data-jbtheme="light"] .jb-ticker-below { border-top-color:#E2DCCE; border-bottom-color:#E2DCCE; }
html[data-jbtheme="light"] .jb-tick-item { color:#7A7E74; }
html[data-jbtheme="light"] .jb-tick-name { color:#2D333B; }
html[data-jbtheme="light"] .jb-tick-price { color:#1A1E24; }
html[data-jbtheme="light"] .jb-tick-sep { color:#D8D2C4; }
html[data-jbtheme="light"] .jb-hero3-scroll-word { color:rgba(26,30,36,0.4); }
html[data-jbtheme="light"] .jb-hero3-scroll-arrow { color:rgba(14,124,107,0.7); }
html[data-jbtheme="light"] .jb-hero3-edge { color:rgba(26,30,36,0.28); }
html[data-jbtheme="light"] .jb-rig-title-m div:last-child { color:#1A1E24; }
html[data-jbtheme="light"] .jb-rig-parts div div:first-child { color:#7A7E74 !important; }
html[data-jbtheme="light"] .jb-rig-parts div div:last-child { color:#2D333B !important; }
/* the rig is teal-on-dark; invert + 180deg hue-rotate flips the fills light
   and swings the teal strokes back to a readable deep teal in one pass */
html[data-jbtheme="light"] .jb-hero3-right svg { filter: invert(1) hue-rotate(180deg); }
/* header theme toggle button (icon color follows --cream-100, so it flips) */
.jb-theme-toggle { width:38px; height:38px; border-radius:9999px; border:1px solid var(--hairline-strong); background:var(--wash); color:var(--cream-100); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; margin-right:12px; padding:0; flex:none; transition:border-color .2s ease, background .2s ease, color .2s ease; }
.jb-theme-toggle:hover { border-color:var(--hairline-hover); }
.jb-theme-toggle svg { width:18px; height:18px; display:block; }
/* Light mode — hand-authored content sections bake dark-palette colors into
   inline styles, so the token layer can't reach them. Flip the inline text
   and accent values; the :not() guards protect text sitting on badges whose
   dark/coloured background intentionally stays dark in light mode. These are
   attribute-substring rules, so they also cover inline colours site-wide. */
html[data-jbtheme="light"] [style*="color:#F2EEE3"]:not([style*="background:#0A0E0E"]):not([style*="background:#14807A"]):not([style*="background:#FF3C00"]) { color:#1A1E24 !important; }
html[data-jbtheme="light"] [style*="color:#DAD7CE"] { color:#565C66 !important; }
html[data-jbtheme="light"] [style*="color:#B9B5A9"] { color:#565C66 !important; }
html[data-jbtheme="light"] [style*="color:#7EE8DC"] { color:#0E7C6B !important; }
html[data-jbtheme="light"] [style*="color:#4ADE80"] { color:#2F8F5B !important; }
html[data-jbtheme="light"] [style*="color:#FBBF24"] { color:#B5760C !important; }
html[data-jbtheme="light"] .labbtn { background:#1A1E24 !important; color:#F5F2EC !important; }
/* ============================================================
   Global footer — "spec sheet" (Option A). Full-bleed band, mono
   numbered column headers, build-sheet tag. Token-based so it
   flips with light mode automatically. Lives in the Kadence
   footer HTML element (footer_html_content theme mod).
   ============================================================ */
.site-bottom-footer-inner-wrap { padding-top:0 !important; padding-bottom:0 !important; }
.jb-ftr { width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:var(--ink-850); border-top:1px solid var(--glow-border); }
.jb-ftr-inner { max-width:min(95vw,1760px); margin:0 auto; padding:0 clamp(20px,3vw,40px); }
.jb-ftr-cta { padding:46px 0; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.jb-ftr-eye { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--glow-300); margin-bottom:10px; }
.jb-ftr-h { font-family:'Lora',serif !important; font-weight:400 !important; font-size:clamp(26px,2.5vw,34px) !important; line-height:1.1 !important; color:var(--cream-100) !important; margin:0 !important; }
.jb-ftr-h em { font-style:italic; color:var(--glow-300); }
.jb-ftr-cta-btns { display:flex; gap:12px; flex-wrap:wrap; }
.jb-ftr-primary, .jb-ftr-ghost { display:inline-flex; align-items:center; font-size:14.5px; padding:14px 30px; border-radius:9999px; text-decoration:none; }
.jb-ftr-primary { background:var(--cream-100); color:var(--ink-950); font-weight:600; }
.jb-ftr-ghost { background:transparent; color:var(--cream-100); font-weight:500; border:1px solid var(--hairline-hover); }
.jb-ftr-cols { display:flex; padding:8px 0 0; gap:0; flex-wrap:wrap; }
.jb-ftr-brand { flex:1.4; min-width:260px; padding-right:48px; }
.jb-ftr-brandrow { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.jb-ftr-dot { width:9px; height:9px; border-radius:50%; background:var(--brand-orange); display:inline-block; }
.jb-ftr-name { font-weight:600; font-size:18px; color:var(--cream-100); }
.jb-ftr-tag { font-size:13.5px; line-height:1.6; color:var(--cream-400); max-width:320px; }
.jb-ftr-sheet { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--cream-dim-45); margin-top:22px; }
.jb-ftr-col { flex:1; min-width:150px; padding:0 32px; border-left:1px solid var(--hairline); display:flex; flex-direction:column; }
.jb-ftr-hd { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--cream-400); margin-bottom:16px; }
.jb-ftr-col a { font-size:14px; color:var(--cream-400); text-decoration:none; margin-bottom:11px; transition:color .15s ease; }
.jb-ftr-col a:hover { color:var(--cream-100); }
.jb-ftr-bottom { margin-top:40px; border-top:1px solid var(--hairline); padding:22px 0 10px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.jb-ftr-copy { font-family:'Space Mono',monospace; font-size:11.5px; color:var(--cream-400); }
.jb-ftr-aff { font-size:12px; color:var(--cream-400); }
.jb-ftr-aff a { color:var(--cream-100); text-decoration:underline; }
.jb-ftr-legal { display:flex; gap:18px; font-size:12.5px; }
.jb-ftr-legal a { color:var(--cream-400); text-decoration:none; }
.jb-ftr-legal a:hover { color:var(--cream-100); }
@media (max-width:900px) {
	.jb-ftr-cta { flex-direction:column; align-items:flex-start; }
	.jb-ftr-cols { flex-direction:column; gap:26px; }
	.jb-ftr-col { border-left:none; padding:0; }
	.jb-ftr-brand { padding-right:0; }
	.jb-ftr-bottom { flex-direction:column; align-items:flex-start; }
}
/* Footer corrections: Kadence wpautop-wraps the HTML element's anchor runs in
   <p> (so column links need display:block to stack) and its .site-info link
   styling (cream-dim + underline) out-specifies the footer classes — scope
   stronger colour/decoration rules to .jb-ftr to win. */
.jb-ftr p { margin:0; padding:0; }
.jb-ftr a { text-decoration:none !important; }
.jb-ftr-primary { color:var(--ink-950) !important; }
.jb-ftr-ghost { color:var(--cream-100) !important; }
.jb-ftr-col a { display:block; color:var(--cream-400) !important; margin-bottom:11px; }
.jb-ftr-col a:hover { color:var(--cream-100) !important; }
.jb-ftr-aff a { color:var(--cream-100) !important; text-decoration:underline !important; }
.jb-ftr-legal a { color:var(--cream-400) !important; }
.jb-ftr-legal a:hover { color:var(--cream-100) !important; }
/* Footer polish: brighter, larger body text for readability (white markup),
   wider inner to fill the row (green markup). Footer-scoped tokens flip for light. */
.jb-ftr { --ftr-text: rgba(242,238,227,0.86); --ftr-label: rgba(242,238,227,0.60); }
html[data-jbtheme="light"] .jb-ftr { --ftr-text: rgba(26,30,36,0.84); --ftr-label: rgba(26,30,36,0.60); }
.jb-ftr-inner { max-width:min(96vw,1880px) !important; }
.jb-ftr-tag { color:var(--ftr-text) !important; font-size:14px !important; max-width:340px; }
.jb-ftr-sheet { color:var(--ftr-label) !important; }
.jb-ftr-hd { color:var(--ftr-label) !important; font-size:11px !important; }
.jb-ftr-col a { color:var(--ftr-text) !important; font-size:15px !important; }
.jb-ftr-col a:hover { color:var(--cream-100) !important; text-decoration:underline !important; }
.jb-ftr-copy { color:var(--ftr-text) !important; font-size:12px !important; }
.jb-ftr-aff { color:var(--ftr-text) !important; font-size:12.5px !important; }
.jb-ftr-legal a { color:var(--ftr-text) !important; }
/* ============================================================
   Header polish (v1): orange brand dot + toggle control cluster.
   ============================================================ */
.site-branding .site-title { display:flex; align-items:center; gap:10px; }
.site-branding .site-title::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--brand-orange); flex:none; }
#primary-menu .jb-toggle-li { display:flex; align-items:center; margin:0 4px 0 8px; padding-left:12px; border-left:1px solid var(--hairline-strong); }
#primary-menu .jb-toggle-li .jb-theme-toggle { margin:0; }

/* Footer: close the two gaps — the #colophon top hairline + wrapper padding
   above the band, and the .widget margin-bottom below it. */
#colophon.site-footer { border-top:0 !important; }
.site-footer .footer-widget-area, .site-footer .site-info, .site-footer .footer-html, .site-footer .footer-html-inner { margin:0 !important; padding:0 !important; }
.site-bottom-footer-inner-wrap { padding:0 !important; }
.site-bottom-footer-inner-wrap .widget { margin-bottom:0 !important; }
/* breathing room between page content and the footer band (home) */
body.home .content-area { margin-bottom: 4rem !important; }

/* ============================================================
   Light mode contrast fixes — several muted/mono labels and the
   footer links fell below WCAG AA on the parchment background.
   Darken them and deepen the accent teal for small text. Verified
   with an on-page contrast audit.
   ============================================================ */
html[data-jbtheme="light"] { --glow-300:#0B5F51; --glow-500:#0B5F51; }
html[data-jbtheme="light"] .jb-hero3-blabel,
html[data-jbtheme="light"] .jb-hero3-stat-label,
html[data-jbtheme="light"] .jb-chip-label { color:#565C66 !important; }
html[data-jbtheme="light"] .jb-chip[data-tier="budget"] .jb-chip-res { color:#256B42 !important; }
html[data-jbtheme="light"] .jb-chip[data-tier="sweet"] .jb-chip-res { color:#0B5F51 !important; }
html[data-jbtheme="light"] .jb-chip[data-tier="high"] .jb-chip-res { color:#8A5A09 !important; }
html[data-jbtheme="light"] .jb-ftr-col a { color:rgba(26,30,36,0.86) !important; }
html[data-jbtheme="light"] .jb-ftr-col a:hover { color:#1A1E24 !important; }
html[data-jbtheme="light"] .jb-ftr-hd { color:rgba(26,30,36,0.72) !important; }
html[data-jbtheme="light"] .jb-ftr-sheet { color:rgba(26,30,36,0.66) !important; }
/* ============================================================
   Light mode = Option 3 (muted #D8D2C4) + darker borders/text,
   plus the dotted grid extended into the header (both modes).
   ============================================================ */
:root { --dot: rgba(242,238,227,0.06); }
html[data-jbtheme="light"] { --dot: rgba(26,30,36,0.12); }
#main-header, #mobile-header {
	background-image: radial-gradient(var(--dot) 1px, transparent 1px);
	background-size: 24px 24px;
	background-position: -1px -1px;
}
html[data-jbtheme="light"] {
	--ink-950:#D8D2C4; --ink-900:#E9E4D8; --ink-850:#E0DACC; --ink-border:#B4AB96;
	--cream-400:#494E57;
	--cream-dim-65:rgba(26,30,36,0.80); --cream-dim-45:rgba(26,30,36,0.66);
	--hairline:rgba(26,30,36,0.14); --hairline-strong:rgba(26,30,36,0.22); --hairline-hover:rgba(26,30,36,0.50);
	--global-palette9:#D8D2C4; --global-palette8:#E9E4D8; --global-palette7:#B4AB96; --global-palette4:#494E57; --global-palette5:#494E57;
	--jb-chip-bg:#E9E4D8;
	--wp--preset--color--background:#D8D2C4; --wp--preset--color--secondary:#E9E4D8;
}
html[data-jbtheme="light"] .jb-hero3 { background:#D8D2C4; }
html[data-jbtheme="light"] .jb-hero3-grid { background-image:radial-gradient(rgba(26,30,36,0.09) 1px,transparent 1px); }
html[data-jbtheme="light"] #masthead,
html[data-jbtheme="light"] #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap),
html[data-jbtheme="light"] #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner { background: rgba(216,210,196,0.92) !important; }
html[data-jbtheme="light"] .jb-ticker { background:#E0DACC; border-color:#B4AB96; }
html[data-jbtheme="light"] .jb-ticker-below { border-top-color:#B4AB96; border-bottom-color:#B4AB96; }
html[data-jbtheme="light"] .jb-hero3-statdiv { background:#B4AB96; }
html[data-jbtheme="light"] .jb-chip { border-color:#C0B7A3; }
html[data-jbtheme="light"] .jb-hero3-sub { color:#494E57; }
html[data-jbtheme="light"] .jb-hero3-blabel,
html[data-jbtheme="light"] .jb-hero3-stat-label,
html[data-jbtheme="light"] .jb-chip-label { color:#494E57 !important; }
/* Stronger, clearly-visible borders + more visible dotted grid (light mode).
   Inactive chip borders are now token-driven (hero.js) so they can be a
   defined taupe in light instead of a faint tier tint. */
:root { --chip-inactive-border:#2B3634; }
html[data-jbtheme="light"] {
	--chip-inactive-border:#9A9078;
	--ink-border:#9A9078; --global-palette7:#9A9078;
	--hairline:rgba(26,30,36,0.20); --hairline-strong:rgba(26,30,36,0.30);
	--dot:rgba(26,30,36,0.22);
}
#main-header, #mobile-header { background-image: radial-gradient(var(--dot) 1.4px, transparent 1.4px); }
html[data-jbtheme="light"] .jb-hero3-grid { background-image: radial-gradient(rgba(26,30,36,0.17) 1.4px, transparent 1.4px); }
html[data-jbtheme="light"] .jb-chip { border-color:#9A9078; }
html[data-jbtheme="light"] .jb-ftr-col { border-left-color:#9A9078; }
/* Hero spotlight for light mode. hero.js tints .jb-hero3-spot with the light
   neon tier colours (invisible on greige), so pin a deeper-teal glow here with
   !important — it beats the inline value and stays visible on the muted bg. */
html[data-jbtheme="light"] .jb-hero3-spot {
	background: radial-gradient(ellipse 950px 720px at 70% 40%, rgba(14,124,107,0.22), rgba(14,124,107,0.08) 45%, transparent 70%) !important;
}
/* Light mode: push borders darker (chips + cards) and the hero spotlight
   stronger — both were still too faint on the muted greige. */
html[data-jbtheme="light"] {
	--chip-inactive-border:#726A54;
	--ink-border:#7B7157; --global-palette7:#7B7157;
	--hairline:rgba(26,30,36,0.26); --hairline-strong:rgba(26,30,36,0.34);
}
html[data-jbtheme="light"] .jb-chip { border-color:#726A54; }
html[data-jbtheme="light"] .jb-ftr-col { border-left-color:#7B7157; }
html[data-jbtheme="light"] .jb-hero3-spot {
	background: radial-gradient(ellipse 900px 680px at 68% 42%, rgba(14,124,107,0.36), rgba(14,124,107,0.14) 45%, transparent 72%) !important;
}
/* Thicker ticker bar (taller + larger type) */
.jb-ticker { height: 54px !important; }
.jb-tick-item { font-size: 13px; padding: 0 32px; gap: 10px; }
.jb-tick-sep { padding-left: 32px; }
/* Spotlight removed from the hero (both modes) per request */
.jb-hero3-spot { display:none !important; }

/* Footer alignment: Kadence center-aligns footer widget content on tablet/mobile,
   which left the brand block half-centered. Force the footer left-aligned at all
   sizes and make the columns stack cleanly. */
.site-footer .footer-html-inner, .jb-ftr, .jb-ftr-inner, .jb-ftr-cta, .jb-ftr-cols,
.jb-ftr-brand, .jb-ftr-tag, .jb-ftr-sheet, .jb-ftr-col, .jb-ftr-bottom { text-align:left !important; }
@media (max-width:1100px) {
	.jb-ftr-cols { flex-wrap:wrap; }
	.jb-ftr-brand { flex:1 1 100%; padding-right:0; margin-bottom:20px; }
	.jb-ftr-col { flex:1 1 30%; }
}
@media (max-width:900px) {
	.jb-ftr-cols { flex-direction:column; gap:22px; }
	.jb-ftr-col { flex:1 1 100%; border-left:none; padding-left:0; padding-right:0; }
	.jb-ftr-cta { flex-direction:column; align-items:flex-start; }
	.jb-ftr-bottom { flex-direction:column; align-items:flex-start; gap:10px; }
}
/* ===== Site-wide page-header band (jnr_page_hero) — matches the homepage
   dark-lab identity across every page/post. ===== */
body:not(.home).single .content-area, body:not(.home).page .content-area { margin-top:0 !important; }
body:not(.home) .entry-content-wrap { padding-top:0 !important; }
.jb-page-hero { position:relative; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:var(--ink-950); border-bottom:1px solid var(--ink-border); overflow:hidden; padding:54px 0 40px; margin-bottom:40px; background-image:radial-gradient(var(--dot) 1.4px, transparent 1.4px); background-size:24px 24px; }
.jb-page-hero-grid { position:absolute; inset:0; pointer-events:none; }
.jb-page-hero-inner { position:relative; max-width:min(95vw,1760px); margin:0 auto; padding:0 clamp(20px,4vw,64px); }
.jb-page-hero-title { font-family:'Lora',serif !important; font-weight:400 !important; font-size:clamp(30px,3.4vw,52px) !important; line-height:1.08 !important; color:var(--cream-100) !important; margin:12px 0 0 !important; }
.jb-page-hero-sub { font-size:clamp(15px,1.05vw,18px); line-height:1.6; color:var(--cream-400); max-width:660px; margin:14px 0 0; }
/* article body: comfortable reading measure + rhythm on content pages */
body:not(.home) .entry-content > :not(.jb-page-hero) { max-width:820px; }
body:not(.home) .entry-content > .jb-page-hero { max-width:100vw; }
body:not(.home) .entry-content h2 { font-size:clamp(22px,2vw,30px); margin-top:2.2em; }
body:not(.home) .entry-content h3 { font-size:clamp(18px,1.5vw,22px); margin-top:1.6em; }
body:not(.home) .entry-content p, body:not(.home) .entry-content li { line-height:1.7; }
/* single guide/post: constrained reading body under the full-bleed band */
.jb-post-body { max-width:820px; margin:0 auto; padding:36px clamp(20px,4vw,32px) 0; }
.jb-post-hero .jb-breadcrumb { margin-bottom:14px; font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:0.04em; }
.jb-post-hero .jb-breadcrumb a { color:var(--cream-400); text-decoration:none; }
.jb-post-hero .jb-breadcrumb a:hover { color:var(--cream-100); }
.jb-post-hero .jb-breadcrumb .jb-current { color:var(--cream-100); }
/* Wide content (tables, wide blocks) breaks out of the ~820px reading measure to
   fill the page — keeps prose readable while tables/media use the dead space. */
.jb-post-body table, .jb-post-body .wp-block-table, .jb-post-body figure.wp-block-table,
body:not(.home) .entry-content table, body:not(.home) .entry-content figure.wp-block-table,
body:not(.home) .entry-content .wp-block-table, body:not(.home) .entry-content .alignwide {
	width: min(92vw, 1240px) !important;
	max-width: min(92vw, 1240px) !important;
	margin-left: 50% !important;
	margin-right: 0 !important;
	transform: translateX(-50%) !important;
}
.jb-post-body figure.wp-block-table table, body:not(.home) .entry-content figure.wp-block-table table { width:100% !important; max-width:100% !important; margin:0 !important; transform:none !important; }
@media (max-width:820px){
	.jb-post-body table, body:not(.home) .entry-content table, .jb-post-body figure.wp-block-table, body:not(.home) .entry-content figure.wp-block-table { display:block; overflow-x:auto; }
}
/* ===== Bento dashboard layout for hardware guides (full-bleed, token-based so
   it flips in light mode; variable-span mosaic + glow-edge cards). ===== */
.jb-bento { width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:var(--ink-950); padding:36px 0 44px; }
.jb-bento-inner { max-width:min(94vw,1520px); margin:0 auto; padding:0 clamp(18px,3vw,40px); }
.jb-bento-clhead { display:flex; align-items:baseline; gap:14px; margin:10px 0 16px; flex-wrap:wrap; }
.jb-bento-clhead:first-child { margin-top:0; }
.jb-bento-eye { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--glow-300); }
.jb-bento-clhead h2 { font-family:'Lora',serif !important; font-weight:400 !important; font-size:clamp(23px,2.3vw,30px) !important; color:var(--cream-100) !important; margin:0 !important; }
.jb-bento-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; margin-bottom:14px; }
.jb-bento-card { background:var(--ink-900); border:1px solid var(--ink-border); border-radius:16px; padding:24px; box-shadow:0 0 40px rgba(45,212,191,0.05); }
.jb-bento-card .lbl { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--glow-300); margin-bottom:10px; }
.jb-bento-card .lbl.warn { color:#FBBF24; }
.jb-bento-card h3 { font-family:'Lora',serif !important; font-weight:400 !important; font-size:21px !important; color:var(--cream-100) !important; margin:0 0 10px !important; line-height:1.15 !important; }
.jb-bento-card h4 { font-family:'Lora',serif !important; font-weight:400 !important; font-size:18px !important; color:var(--cream-100) !important; margin:0 0 8px !important; line-height:1.2 !important; }
.jb-bento-card p { font-size:13.5px !important; line-height:1.6 !important; color:var(--cream-400) !important; margin:0 !important; }
.jb-bento .c3{grid-column:span 3} .jb-bento .c4{grid-column:span 4} .jb-bento .c6{grid-column:span 6} .jb-bento .c12{grid-column:span 12}
.jb-bento-verdict { background:var(--ink-850); border-color:var(--glow-border); box-shadow:0 0 40px rgba(45,212,191,0.09); display:flex; flex-direction:column; justify-content:center; }
.jb-bento-verdict .score { font-family:'Lora',serif; font-size:52px; color:var(--glow-300); line-height:1; }
.jb-bento-deep { display:grid; grid-template-columns:1fr 1.1fr 1.1fr; gap:26px; align-items:start; }
.jb-bento-specs { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.jb-bento-specs .k { font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--cream-dim-45); }
.jb-bento-specs .v { font-family:'Space Mono',monospace; font-size:18px; color:var(--cream-100); }
.jb-bento-specs .v.accent { color:var(--glow-300); }
.jb-bento-chtitle { font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--cream-dim-45); margin-bottom:8px; }
@media (max-width:900px){ .jb-bento-grid{grid-template-columns:1fr} .jb-bento .c3,.jb-bento .c4,.jb-bento .c6,.jb-bento .c12{grid-column:1/-1} .jb-bento-deep{grid-template-columns:1fr; gap:20px} }
/* ===== Hub/grid pages — homepage-standard density (rebuilt 2026-08) ===== */
body.page-id-45 .wp-block-group,
body.page-id-1214 .wp-block-group { max-width:min(94vw,1500px) !important; }

/* ---------- TOPICS ---------- */
.jb-topics-stats{display:flex;gap:28px;flex-wrap:wrap;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--cream-400);margin:8px 0 24px;padding-bottom:20px;border-bottom:1px solid var(--ink-border)}
.jb-topics-stats b{color:var(--glow-300);font-weight:400}
.jb-topics-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:16px !important;max-width:none !important}
.jb-topic{display:flex;flex-direction:column;gap:11px;padding:22px;background:var(--ink-900);border:1px solid var(--ink-border);border-radius:6px;text-decoration:none !important;color:inherit;transition:transform .16s ease,border-color .16s ease}
.jb-topic:hover{transform:translateY(-3px);border-color:var(--glow-border,rgba(45,212,191,.35))}
.jb-topic .jb-tic{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;font-size:18px;line-height:1;color:var(--glow-300);background:var(--wash,rgba(255,255,255,.03));border:1px solid var(--glow-border,rgba(45,212,191,.32))}
.jb-topic .jb-tt{font-family:'DM Sans',sans-serif;font-weight:700;font-size:16.5px;color:var(--cream-100)}
.jb-topic .jb-td{margin:0;flex:1;font-size:13.5px;line-height:1.55;color:var(--cream-400)}
.jb-topic .jb-tf{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--ink-border);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-dim-45,rgba(242,238,227,.45))}
.jb-topic .jb-tf .go{color:var(--glow-500)}
@media (max-width:900px){.jb-topics-grid{grid-template-columns:repeat(2,1fr) !important}}
@media (max-width:600px){.jb-topics-grid{grid-template-columns:1fr !important}.jb-topics-stats{gap:18px}}

/* ---------- FAQ ---------- */
.jb-faq-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:14px !important;max-width:none !important}
.jb-qa{display:flex;flex-direction:column;gap:9px;padding:18px 22px;background:var(--ink-900);border:1px solid var(--ink-border);border-radius:6px;text-decoration:none !important;color:inherit;transition:border-color .16s ease,transform .16s ease}
.jb-qa:hover{border-color:var(--glow-border,rgba(45,212,191,.35));transform:translateY(-2px)}
.jb-qa .jb-qtop{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.jb-qa .jb-qq{font-family:'DM Sans',sans-serif;font-weight:700;font-size:15.5px;line-height:1.35;color:var(--cream-100)}
.jb-qa .jb-qarw{font-family:'Space Mono',monospace;color:var(--glow-300);flex:none;font-size:15px}
.jb-qa .jb-qa-bluf{margin:0;font-size:13.5px;line-height:1.55;color:var(--cream-400)}
.jb-qa .jb-qtag{align-self:flex-start;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-dim-45,rgba(242,238,227,.45));border:1px solid var(--ink-border);padding:3px 9px;border-radius:3px}
@media (max-width:760px){.jb-faq-grid{grid-template-columns:1fr !important}}

/* ---------- GLOSSARY ---------- */
body.page-id-38 .entry-content > :not(.jb-page-hero){max-width:min(94vw,1360px) !important}
.jb-gloss-cols{columns:3;column-gap:44px}
body.page-id-38 .jb-gloss-cols h2, .jb-gloss-cols h2{column-span:all;font-family:'Lora',serif;font-weight:400;font-size:clamp(18px,1.6vw,24px);color:var(--glow-300) !important;margin:1.5em 0 .6em;border-bottom:1px solid var(--ink-border);padding-bottom:7px}
.jb-gloss-cols > h2:first-child{margin-top:0}
.jb-gloss-cols h3{break-after:avoid;margin-top:1em;font-size:14.5px;color:var(--cream-100)}
.jb-gloss-cols p{break-inside:avoid;font-size:13px;line-height:1.55;color:var(--cream-400)}
.jb-gloss-cols blockquote,.jb-gloss-cols .wp-block-quote{break-inside:avoid;margin:.2em 0 1.1em;border:0;padding:0;font-style:normal}
@media (max-width:1000px){.jb-gloss-cols{columns:2}}
@media (max-width:680px){.jb-gloss-cols{columns:1}}

/* =====================================================================
   WPForms on the dark theme
   ---------------------------------------------------------------------
   WPForms ships light-theme defaults. On this site's #0A0E0E background
   its label colour (rgba(0,0,0,.85)) measured 1.08:1 — invisible. The
   plugin exposes CSS custom properties, so retint through those rather
   than fighting its selectors.

   Every value below was measured in-browser before being committed:

     label       #F2EEE3 on #0A0E0E   16.74:1
     sublabel    #B9B5A9 on #0A0E0E    9.47:1
     field text  #F2EEE3 on #1A2423   13.72:1
     placeholder #8A9694 on #1A2423    5.20:1
     button      #0A0E0E on #2DD4BF   10.43:1
     button hvr  #0A0E0E on #5BE0CF   12.02:1
     error       #F87171 on #0A0E0E    7.02:1

   Two findings worth keeping:
   - White on the teal accent measures 1.86:1, a severe failure, so the
     button carries dark text. The accent cannot carry white.
   - The darker brand teal #14807A fails with BOTH dark (4.06) and light
     (4.12) text, so it is not usable as a button hover. Hover goes
     lighter (#5BE0CF) instead, which also reads correctly on a dark UI.
   - WPForms' own error red #d63637 measures 4.11:1 here, under the 4.5
     threshold, so it is replaced.
   ===================================================================== */

.wpforms-container {
	--wpforms-label-color: #F2EEE3;
	--wpforms-label-sublabel-color: #B9B5A9;
	--wpforms-label-error-color: #F87171;

	--wpforms-field-text-color: #F2EEE3;
	--wpforms-field-background-color: #1A2423;
	--wpforms-field-border-color: rgba(45, 212, 191, 0.28);
	--wpforms-field-border-color-spare: rgba(45, 212, 191, 0.28);
	--wpforms-field-border-radius: 4px;
	--wpforms-field-menu-color: #1A2423;

	--wpforms-button-background-color: #2DD4BF;
	--wpforms-button-border-color: #2DD4BF;
	--wpforms-button-text-color: #0A0E0E;
	--wpforms-button-border-radius: 4px;
	/* WCAG 2.5.8 minimum tap target; WPForms ships 41px. */
	--wpforms-button-size-height: 44px;

	--wpforms-page-break-color: #2DD4BF;
}

/* Placeholders are not covered by the custom properties. */
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
	color: #8A9694;
	opacity: 1;
}

/* Focus needs to be visible against a dark field, and WPForms' default
   focus styling assumes a light one. */
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
	border-color: #2DD4BF;
	outline: 2px solid rgba(45, 212, 191, 0.45);
	outline-offset: 1px;
}

/* Submit button: transform and colour only, so it stays composited. */
.wpforms-container .wpforms-submit {
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color .18s ease, transform .18s ease;
}
.wpforms-container .wpforms-submit:hover {
	background-color: #5BE0CF !important;
	border-color: #5BE0CF !important;
	transform: translateY(-1px);
}
.wpforms-container .wpforms-submit:active {
	transform: translateY(0);
}
.wpforms-container .wpforms-submit:focus-visible {
	outline: 2px solid #2DD4BF;
	outline-offset: 3px;
}

/* Required marker and errors, readable on dark. */
.wpforms-container .wpforms-required-label {
	color: #F87171;
}
.wpforms-container label.wpforms-error,
.wpforms-container em.wpforms-error {
	color: #F87171;
}

/* Confirmation message after a successful send. */
.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full {
	background: #1A2423;
	border: 1px solid rgba(45, 212, 191, 0.35);
	border-radius: 4px;
	color: #F2EEE3;
	padding: 18px 20px;
}
.wpforms-confirmation-container-full p {
	color: #F2EEE3;
	margin: 0;
}

/* The contact page's form block, matched to the info cards above it. */
.jb-contact-form-wrap {
	margin-top: 42px;
	padding-top: 34px;
	border-top: 1px solid rgba(242, 238, 227, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	.wpforms-container .wpforms-submit {
		transition: background-color .18s ease;
	}
	.wpforms-container .wpforms-submit:hover {
		transform: none;
	}
}