/* ==========================================================================
   codeJay theme · v3 "blueprint"
   Deep navy + electric blue. Brand colour comes from WP Admin → Site Content (--brand).
   ========================================================================== */

@font-face {
	font-family: "Mona Sans";
	font-style: normal;
	font-weight: 300 700;
	font-stretch: 100% 115%;
	font-display: swap;
	src: url("../fonts/mona-sans.woff2") format("woff2-variations"), url("../fonts/mona-sans.woff2") format("woff2");
}
@font-face {
	font-family: "Instrument Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/jetbrains-mono.woff2") format("woff2");
}

@property --cj-a {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

:root {
	--brand: #2e6bff;
	--brand-2: color-mix(in oklab, var(--brand) 45%, #67e8f9);
	--brand-soft: color-mix(in srgb, var(--brand) 14%, transparent);
	--brand-line: color-mix(in srgb, var(--brand) 45%, transparent);
	--grad: linear-gradient(110deg, var(--brand), var(--brand-2));
	--on-brand: #fff;

	--bg: #050b18;
	--bg-2: #071024;
	--surface: #0a1530;
	--panel: #0d1a38;
	--panel-2: #112148;
	--line: rgba(140, 170, 255, .10);
	--line-2: rgba(140, 170, 255, .18);
	--grid: rgba(120, 155, 255, .07);
	--text: #eef3ff;
	--soft: #c4cfea;
	--muted: #8a98bd;
	--dim: #5d6b90;
	--violet: #8b7dff;
	--cyan: #67e8f9;
	--good: #34d399;
	--ok: #fbbf24;
	--poor: #fb7185;

	--sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--serif: "Instrument Serif", ui-serif, Georgia, serif;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--wrap: 1240px;
	--gutter: clamp(16px, 4vw, 40px);
	--section: clamp(84px, 11vw, 152px);
	--header-h: 74px;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--spring: cubic-bezier(.2, .9, .3, 1.25);
	--shadow: 0 30px 80px -30px rgba(0, 0, 0, .85);
}

/* Light theme: same layout, light colours. Chosen by the visitor or their device. */
html[data-theme="light"] {
	color-scheme: light;
	--brand-2: color-mix(in oklab, var(--brand) 64%, #0e7490);
	--brand-soft: color-mix(in srgb, var(--brand) 10%, transparent);
	--brand-line: color-mix(in srgb, var(--brand) 36%, transparent);
	--bg: #f5f7fc;
	--bg-2: #edf1f9;
	--surface: #ffffff;
	--panel: #f0f3fa;
	--panel-2: #e4eaf6;
	--line: rgba(15, 35, 90, .10);
	--line-2: rgba(15, 35, 90, .17);
	--grid: rgba(30, 60, 160, .055);
	--text: #0a1530;
	--soft: #2a3858;
	--muted: #556385;
	--dim: #8491b1;
	--violet: #6d5cf6;
	--cyan: #0891b2;
	--good: #059669;
	--ok: #d97706;
	--poor: #e11d48;
	--shadow: 0 30px 70px -32px rgba(15, 30, 80, .28);
}
html[data-theme="dark"] { color-scheme: dark; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; line-height: 1.15; }
em { font-style: italic; }
[hidden] { display: none !important; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; border-radius: 6px; }

.cj-sr, .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cj-skip {
	position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 16px; border-radius: 10px;
	background: var(--brand); color: #fff; font-weight: 600; translate: 0 -160%; transition: translate .2s;
}
.cj-skip:focus { translate: 0 0; }

/* ---------- Layout + type ---------- */
.cj-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.cj-wrap--text { max-width: calc(780px + var(--gutter) * 2); }
.cj-wrap--narrow { max-width: calc(660px + var(--gutter) * 2); }
.cj-center { display: grid; justify-items: center; gap: 22px; text-align: center; }
.cj-section { position: relative; padding-block: var(--section); }
.cj-section--tight { padding-block: clamp(40px, 5vw, 72px); }
.cj-section--flush { padding-top: 0; }

.cj-display, .cj-h2, .cj-h3, .cj-page__title, .cj-phero__title, .cj-end__title {
	font-weight: 560;
	font-stretch: 112%;
	letter-spacing: -.045em;
	color: var(--text);
	text-wrap: balance;
}
.cj-display { font-size: clamp(50px, 8.4vw, 126px); line-height: .9; }
.cj-h2 { font-size: clamp(38px, 5.6vw, 82px); line-height: .96; }
.cj-h3 { font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -.035em; }
.cj-h4 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; font-stretch: 105%; }
.cj-display em, .cj-h2 em, .cj-h3 em, .cj-page__title em, .cj-phero__title em, .cj-end__title em, .cj-tile__title em {
	font-family: var(--serif);
	font-weight: 400;
	font-stretch: 100%;
	font-style: italic;
	letter-spacing: -.01em;
	padding-right: .06em;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.cj-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--soft); max-width: 48ch; }
.cj-muted { color: var(--muted); }
.cj-small { font-size: 13.5px; color: var(--dim); }

.cj-label {
	display: flex; align-items: center; gap: .7em; flex-wrap: wrap;
	margin-bottom: 20px;
	font-family: var(--mono); font-size: 12.5px; line-height: 1.4; letter-spacing: .01em; text-transform: lowercase;
	color: var(--muted);
}
.cj-label span::before { content: "//"; margin-right: .55em; color: var(--brand-2); }
.cj-label em { font-style: normal; color: var(--dim); }

/* Section heading row */
.cj-head {
	display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 20px 64px; align-items: end;
	margin-bottom: clamp(40px, 5.5vw, 76px);
}
.cj-head--single { grid-template-columns: minmax(0, 1fr); }
.cj-head__side { display: grid; gap: 18px; justify-items: start; padding-bottom: .4em; }
.cj-head__intro { max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--muted); }

/* ---------- Buttons + links ---------- */
.cj-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.cj-btns--center { justify-content: center; }
.cj-btn {
	--h: 52px;
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: var(--h); padding: 0 24px; border-radius: 14px;
	font-size: 15.5px; font-weight: 560; letter-spacing: -.01em; white-space: nowrap;
	transition: background-color .25s, color .25s, box-shadow .3s, transform .35s var(--spring);
}
.cj-btn svg { width: 18px; height: 18px; flex: none; transition: translate .3s var(--spring); }
.cj-btn:hover svg { translate: 3px 0; }
.cj-btn--brand {
	background: var(--brand); color: var(--on-brand);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 14px 34px -14px color-mix(in srgb, var(--brand) 85%, transparent);
}
.cj-btn--brand::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
	translate: -120% 0; transition: translate .8s var(--ease);
}
.cj-btn--brand:hover { background: color-mix(in oklab, var(--brand) 86%, #fff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 44px -14px color-mix(in srgb, var(--brand) 95%, transparent); }
.cj-btn--brand:hover::before { translate: 120% 0; }
.cj-btn--ghost { background: rgba(140, 170, 255, .04); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.cj-btn--ghost:hover { background: rgba(140, 170, 255, .1); }
.cj-btn--sm { --h: 42px; padding: 0 18px; border-radius: 12px; font-size: 14.5px; }
.cj-btn:disabled { opacity: .55; cursor: progress; }

.cj-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 560; color: var(--brand-2); transition: gap .3s var(--spring), color .2s; }
.cj-link svg { width: 16px; height: 16px; }
.cj-link:hover { gap: 12px; color: var(--text); }

.cj-round {
	display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--line-2); color: var(--soft);
	transition: background-color .25s, color .25s, box-shadow .25s;
}
.cj-round svg { width: 18px; height: 18px; }
.cj-round:hover { background: var(--brand); color: #fff; box-shadow: none; }

.cj-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cj-chips li { padding: 6px 11px; border-radius: 8px; background: var(--brand-soft); color: color-mix(in oklab, var(--brand-2) 70%, #fff); font-family: var(--mono); font-size: 12px; }

.cj-ticks { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; color: var(--soft); }
.cj-ticks li { display: flex; align-items: center; gap: 8px; }
.cj-ticks svg { width: 16px; height: 16px; color: var(--good); stroke-width: 2.2; }

.cj-stars { color: var(--ok); letter-spacing: 2px; font-size: 14px; line-height: 1; white-space: nowrap; }
.cj-stars__off { color: var(--dim); }

.cj-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.cj-badge {
	display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 10px;
	background: rgba(140, 170, 255, .06); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--soft); white-space: nowrap;
}
.cj-badge svg { width: 16px; height: 16px; color: var(--brand-2); }
.cj-badge__star { color: var(--ok); }

/* ---------- Blueprint backdrop ---------- */
.cj-grid-bg {
	position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
	background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 64px 64px; background-position: center -1px;
	-webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 25%, transparent 78%);
	mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 25%, transparent 78%);
}
.cj-grid-bg::before {
	content: ""; position: absolute; inset: -20% -10% auto auto; width: 70%; aspect-ratio: 1;
	background: radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, transparent), transparent 62%);
	filter: blur(20px);
}
.cj-grid-bg::after {
	content: ""; position: absolute; inset: auto auto 10% -15%; width: 50%; aspect-ratio: 1;
	background: radial-gradient(circle, rgba(139, 125, 255, .14), transparent 60%);
}
.cj-beam {
	position: absolute; left: 0; right: 0; top: -140px; height: 140px;
	background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--brand-2) 6%, transparent) 75%, color-mix(in srgb, var(--brand-2) 20%, transparent) 99%, transparent);
	opacity: .5;
}
html.cj-motion .cj-beam { animation: cj-beam 11s linear infinite; }
.cj-grid-bg--end {
	-webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 100%, #000 20%, transparent 72%);
	mask-image: radial-gradient(ellipse 80% 90% at 50% 100%, #000 20%, transparent 72%);
}
.cj-grid-bg--end::before { inset: auto auto -40% 50%; width: 90%; translate: -50% 0; }
.cj-grid-bg--end::after { display: none; }

/* ---------- Motion: load, reveal, scan-mask ---------- */
html.cj-motion .cj-anim { animation: cj-rise 1s var(--ease) var(--d, 0s) both; }
html.cj-motion [data-reveal]:not(.cj-mask) {
	opacity: 0; translate: 0 22px; filter: blur(5px);
	transition: opacity .8s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), filter .8s var(--ease) var(--d, 0s);
}
html.cj-motion [data-reveal].is-in { opacity: 1; translate: 0 0; filter: none; }

.cj-mask { position: relative; }
html.cj-motion .cj-mask { width: fit-content; max-width: 100%; }
html.cj-motion .cj-mask > span { display: inline-block; clip-path: inset(0 0 100% 0); }
html.cj-motion .cj-mask.is-in > span, html.cj-motion .cj-mask--now > span { animation: cj-scan-in 1.1s cubic-bezier(.65, 0, .25, 1) var(--d, .05s) forwards; }
html.cj-motion .cj-mask::after {
	content: ""; position: absolute; left: -2%; right: -2%; top: 0; height: 2px; pointer-events: none; opacity: 0;
	background: linear-gradient(90deg, transparent, var(--brand-2) 20%, #fff 50%, var(--brand-2) 80%, transparent);
	box-shadow: 0 0 22px 3px color-mix(in srgb, var(--brand) 70%, transparent);
}
html.cj-motion .cj-mask.is-in::after, html.cj-motion .cj-mask--now::after { animation: cj-scan-line 1.1s cubic-bezier(.65, 0, .25, 1) var(--d, .05s) forwards; }
.cj-center .cj-mask { margin-inline: auto; }

/* ---------- Header ---------- */
.cj-header {
	position: fixed; inset: 0 0 auto; z-index: 50;
	border-bottom: 1px solid transparent;
	transition: background-color .35s, border-color .35s;
}
.cj-header.is-scrolled {
	background: rgba(5, 11, 24, .74);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	border-bottom-color: var(--line);
}
.cj-header__inner {
	display: flex; align-items: center; gap: 22px;
	max-width: calc(var(--wrap) + var(--gutter) * 2); height: var(--header-h); margin-inline: auto; padding-inline: var(--gutter);
}
.cj-logo { flex: none; display: block; }
.cj-logo img, .cj-logo__img { height: var(--logo-h, 30px); width: auto; max-width: 60vw; }
/* Menu: a pill bar where a soft highlight slides to the link under the pointer */
.cj-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.cj-nav__bar {
	position: relative; display: flex; align-items: center; padding: 4px; border-radius: 999px;
	background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.cj-nav__pill {
	position: absolute; top: 4px; bottom: 4px; left: 0; z-index: 0; width: var(--w, 0px); translate: var(--x, 0px) 0;
	border-radius: 999px; background: rgba(255, 255, 255, .075); box-shadow: inset 0 0 0 1px var(--line-2);
	opacity: 0; pointer-events: none; transition: translate .5s var(--spring), width .5s var(--spring), opacity .25s;
}
.cj-nav__pill.is-on { opacity: 1; }
.cj-nav__pill.is-instant { transition: opacity .25s; }
.cj-nav__list { position: relative; z-index: 1; display: flex; align-items: center; }
.cj-nav__item { display: flex; align-items: center; }
.cj-nav__link {
	display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px;
	font-size: 14.5px; color: var(--soft); white-space: nowrap; transition: color .2s;
}
.cj-nav__item:hover > .cj-nav__link, .cj-nav__link.is-active, .cj-nav__link.is-current, .cj-nav__drop.is-open > .cj-nav__link { color: var(--text); }
.cj-nav__link.is-current { font-weight: 560; }
html:not(.js) .cj-nav__link.is-current { background: rgba(255, 255, 255, .075); }
.cj-nav__link:focus-visible { outline-offset: -2px; border-radius: 999px; }
.cj-nav__drop > .cj-nav__link { padding-right: 2px; }
.cj-nav__caret { display: grid; place-items: center; width: 28px; height: 36px; margin-right: 4px; border-radius: 999px; color: var(--muted); transition: color .2s; }
.cj-nav__caret svg { width: 14px; height: 14px; transition: rotate .4s var(--spring); }
.cj-nav__drop:hover .cj-nav__caret, .cj-nav__drop.is-open .cj-nav__caret { color: var(--text); }
.cj-nav__drop.is-open .cj-nav__caret svg { rotate: 180deg; }
.cj-nav__foot { display: none; }

/* Services mega menu */
.cj-mega {
	position: absolute; top: calc(100% + 12px); left: 50%; z-index: 5;
	display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 8px;
	width: min(860px, calc(100vw - 32px)); padding: 8px; border-radius: 26px;
	background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px -30px rgba(0, 0, 0, .75);
	opacity: 0; visibility: hidden; translate: -50% 10px; scale: .985; transform-origin: 50% 0;
	transition: opacity .2s .08s, translate .35s .08s var(--ease), scale .35s .08s var(--ease), visibility 0s .45s;
}
.cj-mega::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.cj-nav__drop.is-open .cj-mega { opacity: 1; visibility: visible; translate: -50% 0; scale: 1; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) and (min-width: 1061px) {
	.cj-nav__drop:hover .cj-mega { opacity: 1; visibility: visible; translate: -50% 0; scale: 1; transition-delay: 0s; }
	.cj-nav__drop:hover .cj-nav__caret svg { rotate: 180deg; }
}
.cj-mega__main { padding: 14px 6px 6px; }
.cj-mega__label { padding: 0 12px 10px; font-family: var(--mono); font-size: 11.5px; text-transform: lowercase; color: var(--muted); }
.cj-mega__label span::before { content: "// "; color: var(--brand-2); }
.cj-mega__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.cj-mega__item { display: flex; align-items: center; gap: 13px; padding: 10px 12px; border-radius: 16px; transition: background-color .2s; }
.cj-mega__item:hover, .cj-mega__item:focus-visible, .cj-mega__item.is-current { background: var(--panel); }
.cj-mega__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-2); transition: background-color .25s, color .25s, scale .4s var(--spring); }
.cj-mega__ic svg { width: 19px; height: 19px; }
.cj-mega__item:hover .cj-mega__ic, .cj-mega__item:focus-visible .cj-mega__ic, .cj-mega__item.is-current .cj-mega__ic { background: var(--brand); color: #fff; }
.cj-mega__item:hover .cj-mega__ic { scale: 1.06; }
.cj-mega__txt { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.cj-mega__txt b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.cj-mega__txt small { overflow: hidden; font-size: 12.5px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.cj-mega__side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
.cj-mega__promo {
	position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 180px; padding: 18px;
	border-radius: 20px; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--brand) 36%, transparent), transparent 62%), var(--panel);
	box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s;
}
.cj-mega__promo::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(circle at 100% 0%, #000, transparent 72%); mask-image: radial-gradient(circle at 100% 0%, #000, transparent 72%);
}
.cj-mega__promo:hover { box-shadow: inset 0 0 0 1px var(--brand-line); }
.cj-mega__promo-ic { position: absolute; top: 16px; left: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(251, 191, 36, .14); color: var(--ok); }
.cj-mega__promo-ic svg { width: 20px; height: 20px; fill: currentColor; }
.cj-mega__promo b { font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--text); }
.cj-mega__promo small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.cj-mega__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; font-weight: 560; color: var(--brand-2); }
.cj-mega__go svg, .cj-mega__all svg { width: 15px; height: 15px; transition: translate .3s var(--spring); }
.cj-mega__promo:hover .cj-mega__go svg, .cj-mega__all:hover svg { translate: 3px 0; }
.cj-mega__all { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--brand); color: #fff; font-size: 14.5px; font-weight: 560; transition: background-color .25s; }
.cj-mega__all:hover { background: color-mix(in oklab, var(--brand) 86%, #fff); }

@media (max-width: 1240px) {
	.cj-header__inner { gap: 16px; }
	.cj-nav__link { padding: 0 11px; font-size: 14px; }
}
@media (max-width: 1160px) and (min-width: 1061px) {
	.cj-nav__link { padding: 0 9px; font-size: 13.5px; }
	.cj-nav__blog .cj-nav__new { display: none; }
}
@media (max-width: 1060px) {
	.cj-nav__bar { display: block; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.cj-nav__pill { display: none; }
	.cj-nav__list { flex-direction: column; align-items: stretch; counter-reset: cj-nav; }
	.cj-nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--line); counter-increment: cj-nav; }
	.cj-nav__link { flex: 1; height: auto; min-height: 62px; padding: 8px 0; border-radius: 0; font-size: clamp(24px, 6vw, 32px); font-weight: 560; font-stretch: 110%; letter-spacing: -.035em; color: var(--text); }
	.cj-nav__link::before { content: counter(cj-nav, decimal-leading-zero); align-self: flex-start; margin: .7em 14px 0 0; font-family: var(--mono); font-size: 11px; font-weight: 400; font-stretch: 100%; letter-spacing: 0; color: var(--dim); }
	.cj-nav__link.is-current::before, .cj-nav__link.is-active::before { color: var(--brand-2); }
	.cj-nav__drop > .cj-nav__link { padding-right: 0; }
	.cj-nav__caret { width: 44px; height: 44px; margin: 0; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--soft); }
	.cj-nav__caret svg { width: 18px; height: 18px; }
	.cj-mega { position: static; display: none; flex-basis: 100%; grid-template-columns: minmax(0, 1fr); width: 100%; padding: 0 0 16px; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; translate: none; scale: none; transition: none; }
	.cj-mega::before { display: none; }
	.cj-nav__drop.is-open .cj-mega { display: grid; translate: none; }
	.cj-mega__main { padding: 0; }
	.cj-mega__label, .cj-mega__promo { display: none; }
	.cj-mega__list { grid-template-columns: minmax(0, 1fr); }
	.cj-mega__item { padding: 8px; }
	.cj-mega__side { grid-template-rows: none; }
	.cj-mega__all { margin-top: 6px; }
	.cj-nav__foot { display: grid; gap: 14px; }
	.cj-nav__hire { --h: 56px; width: 100%; }
	.cj-nav__badges { justify-content: center; }
}

.cj-rating {
	flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px;
	font-size: 13.5px; color: var(--soft); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, color .2s;
}
.cj-rating:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.cj-rating__star { color: var(--ok); }
.cj-header__hire { flex: none; }
.cj-header__hire svg { width: 16px; height: 16px; }
.cj-header__hire:hover svg, .cj-nav__hire:hover svg { translate: 2px -2px; }
.cj-burger { display: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.cj-burger svg { width: 22px; height: 22px; grid-area: 1 / 1; }
.cj-burger__close { display: none; }
html.is-menu-open .cj-burger__open { display: none; }
html.is-menu-open .cj-burger__close { display: block; }

/* ---------- Hero ---------- */
.cj-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + clamp(22px, 3.2vw, 46px)) 0 clamp(36px, 4.5vw, 64px); }
.cj-hero > .cj-wrap { position: relative; z-index: 1; }
.cj-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 80px); align-items: center; }
.cj-hero__h1 {
	margin-bottom: clamp(18px, 2.4vw, 30px);
	font-family: var(--mono); font-size: clamp(12px, 1.05vw, 14px); font-weight: 400; line-height: 1.5; letter-spacing: .01em; color: var(--soft);
}
.cj-hero__h1 > span { color: var(--brand-2); white-space: pre; }
.cj-hero__h1::after { content: ""; display: inline-block; width: .6em; height: 1.15em; margin-left: .35em; vertical-align: -.22em; background: var(--brand-2); }
html.cj-motion .cj-hero__h1::after { animation: cj-blink 1.05s steps(1) infinite; }
.cj-hero__main .cj-lead { margin-top: clamp(20px, 2.2vw, 28px); }
.cj-hero__main .cj-btns { margin-top: 28px; }
.cj-hero__speed {
	display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 7px 16px 7px 7px; border-radius: 14px;
	border: 1px dashed var(--line-2); font-size: 14.5px; color: var(--soft); transition: border-color .25s, background-color .25s;
}
.cj-hero__speed b { font-weight: 600; color: var(--text); }
.cj-hero__speed > svg { width: 16px; height: 16px; transition: translate .3s var(--spring); }
.cj-hero__speed:hover { border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: rgba(251, 191, 36, .05); }
.cj-hero__speed:hover > svg { translate: 3px 0; }
.cj-hero__bolt { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(251, 191, 36, .12); color: var(--ok); }
.cj-hero__bolt svg { width: 18px; height: 18px; fill: currentColor; }

/* Ticket card */
.cj-ticket {
	position: relative; display: grid; gap: 16px; padding: 20px;
	border-radius: 22px; background: linear-gradient(165deg, color-mix(in srgb, var(--brand) 20%, transparent), transparent 46%), var(--panel);
	box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow);
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform .6s var(--ease);
}
.cj-ticket.is-tilting { transition: transform .12s linear; }
.cj-ticket__sheen {
	position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
	background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .11), transparent 45%);
}
.cj-ticket.is-tilting .cj-ticket__sheen { opacity: 1; }
.cj-ticket__me { display: flex; align-items: center; gap: 12px; }
.cj-ticket__me img { flex: none; width: 52px; height: 52px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2); }
.cj-ticket__name { font-weight: 600; font-size: 16.5px; line-height: 1.25; }
.cj-ticket__status { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 13px; color: var(--muted); }
.cj-ticket__status i, .cj-chatbox__head i {
	position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--good);
}
html.cj-motion .cj-ticket__status i::after, html.cj-motion .cj-chatbox__head i::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--good); animation: cj-ping 2s var(--ease) infinite;
}
.cj-ticket__rate { display: flex; align-items: center; gap: 14px; }
.cj-ticket__rate b { font-size: 48px; font-weight: 600; font-stretch: 115%; line-height: .9; letter-spacing: -.04em; }
.cj-ticket__rate > span { display: grid; gap: 5px; }
.cj-ticket__rate small { font-size: 12.5px; color: var(--muted); }
.cj-ticket__badges .cj-badge { height: 30px; font-size: 12.5px; }
.cj-ticket__tear { position: relative; display: block; height: 0; margin: 2px -20px; border-top: 1.5px dashed var(--line-2); }
.cj-ticket__tear::before, .cj-ticket__tear::after {
	content: ""; position: absolute; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg);
	box-shadow: inset 0 0 0 1px var(--line-2);
}
.cj-ticket__tear::before { left: -11px; clip-path: inset(0 0 0 50%); }
.cj-ticket__tear::after { right: -11px; clip-path: inset(0 50% 0 0); }
.cj-ticket__cta {
	display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 18px; border-radius: 14px;
	background: var(--brand); color: #fff; font-weight: 600; font-size: 15px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); transition: background-color .25s;
}
.cj-ticket__cta svg { width: 18px; height: 18px; transition: translate .3s var(--spring); }
.cj-ticket__cta:hover { background: color-mix(in oklab, var(--brand) 85%, #fff); }
.cj-ticket__cta:hover svg { translate: 2px -2px; }
.cj-ticket__clock { font-family: var(--mono); font-size: 11.5px; color: var(--dim); text-align: center; }

/* Mini website (used in the pipeline's launch scene) */
.pv {
	--pv-bg: #0c1630; --pv-ink: #c4cfea; --pv-mute: #5d6b90; --pv-acc: #2e6bff; --pv-card: #13214a; --pv-line: rgba(255, 255, 255, .08);
	position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px;
	box-shadow: 0 0 0 1px rgba(140, 170, 255, .16), 0 24px 40px -24px rgba(0, 0, 0, .9);
	font-family: var(--sans); font-stretch: 100%; line-height: 1.2;
}
.pv--warm { --pv-bg: #f7efe3; --pv-ink: #3a2314; --pv-mute: #8b6b52; --pv-acc: #c2602b; --pv-card: #fffaf2; --pv-line: rgba(58, 35, 20, .1); }
.pv--clinic { --pv-bg: #ecf8f6; --pv-ink: #0d3a39; --pv-mute: #4c7774; --pv-acc: #0f9d8b; --pv-card: #fff; --pv-line: rgba(13, 58, 57, .1); }
.pv--app { --pv-bg: #0b1022; --pv-ink: #eef1ff; --pv-mute: #8b93bd; --pv-acc: #7c6cff; --pv-card: #151b3a; --pv-line: rgba(255, 255, 255, .08); }
.pv-url { flex: none; display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; background: #0d1a38; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.pv-url i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--good) 75%, transparent); }
.pv-page {
	position: relative; flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; overflow: hidden;
	background: #0b1430 radial-gradient(rgba(140, 170, 255, .16) 1px, transparent 1px) 0 0 / 14px 14px;
	transition: background-color .6s;
}
.pv.s-bg .pv-page { background: var(--pv-bg); }
.pv-nav { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--pv-ink); }
.pv-nav b { margin-right: auto; letter-spacing: -.01em; }
.pv-nav i { width: 24px; height: 5px; border-radius: 3px; background: var(--pv-mute); opacity: .45; }
.pv-nav i:last-child { width: 42px; height: 16px; border-radius: 99px; background: var(--pv-acc); opacity: 1; }
.pv-hero { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 38%; gap: 12px; align-items: center; }
.pv-h { font-size: clamp(14px, 1.42vw, 19px); font-weight: 700; font-stretch: 104%; line-height: 1.08; letter-spacing: -.025em; color: var(--pv-ink); }
.pv-p { margin-top: 6px; font-size: 10.5px; color: var(--pv-mute); }
.pv-btn { display: inline-block; margin-top: 10px; padding: 5px 10px; border-radius: 99px; background: var(--pv-acc); color: #fff; font-size: 9.5px; font-weight: 700; }
.pv-img { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--pv-card); }
.pv-img i { position: absolute; }
.pv--warm .pv-img { background: radial-gradient(ellipse 36% 12% at 50% 74%, rgba(58, 35, 20, .18), transparent 70%), #f0dcc0; }
.pv--warm .pv-img i { left: 15%; right: 15%; top: 30%; bottom: 30%; border-radius: 50% 50% 44% 44% / 64% 64% 36% 36%; background: radial-gradient(ellipse at 40% 30%, #e6ac6c, #b8732f 60%, #8a4f1e); box-shadow: inset 0 -5px 9px rgba(0, 0, 0, .22); }
.pv--warm .pv-img i::before { content: ""; position: absolute; inset: 22% 16%; border-radius: 50%; background: repeating-linear-gradient(118deg, transparent 0 8px, rgba(255, 233, 196, .7) 8px 10px); }
.pv--clinic .pv-img { background: linear-gradient(160deg, #cdeee8, #9fdbd0); }
.pv--clinic .pv-img i { inset: 24%; border-radius: 50%; background: #fff; box-shadow: 0 8px 16px rgba(13, 58, 57, .16); }
.pv--clinic .pv-img i::before { content: ""; position: absolute; inset: 27%; background: linear-gradient(#0f9d8b, #0f9d8b) center / 28% 100% no-repeat, linear-gradient(#0f9d8b, #0f9d8b) center / 100% 28% no-repeat; }
.pv--app .pv-img { background: linear-gradient(160deg, #1d2452, #10153a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pv--app .pv-img i {
	left: 14%; right: 14%; bottom: 18%; height: 56%;
	background:
		linear-gradient(to top, #7c6cff, #67e8f9) 0 100% / 16% 44% no-repeat,
		linear-gradient(to top, #7c6cff, #67e8f9) 33.3% 100% / 16% 76% no-repeat,
		linear-gradient(to top, #7c6cff, #67e8f9) 66.6% 100% / 16% 58% no-repeat,
		linear-gradient(to top, #7c6cff, #67e8f9) 100% 100% / 16% 100% no-repeat;
}
.pv-cards { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pv-cards i {
	height: 40px; border-radius: 8px; box-shadow: 0 0 0 1px var(--pv-line);
	background:
		linear-gradient(var(--pv-acc), var(--pv-acc)) 8px 8px / 12px 12px no-repeat,
		linear-gradient(color-mix(in srgb, var(--pv-mute) 45%, transparent), color-mix(in srgb, var(--pv-mute) 45%, transparent)) 8px 27px / 62% 3px no-repeat,
		var(--pv-card);
}
.pv-ship {
	position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px;
	border-radius: 99px; background: #0b2a22; color: var(--good); font-family: var(--mono); font-size: 10.5px; font-weight: 600;
	box-shadow: 0 0 0 1px rgba(52, 211, 153, .3), 0 10px 20px -8px rgba(0, 0, 0, .6);
	opacity: 0; scale: .7; transition: opacity .3s, scale .45s var(--spring);
}
.pv-ship svg { width: 12px; height: 12px; stroke-width: 2.6; }
.pv.s-ship .pv-ship { opacity: 1; scale: 1; }
.pv-nav, .pv-h, .pv-p, .pv-btn, .pv-img, .pv-cards { transition: opacity .35s, translate .55s var(--spring), scale .55s var(--spring); }
.pv:not(.s-nav) .pv-nav, .pv:not(.s-h) .pv-h, .pv:not(.s-p) .pv-p, .pv:not(.s-btn) .pv-btn, .pv:not(.s-cards) .pv-cards { opacity: 0; translate: 0 8px; }
.pv:not(.s-img) .pv-img { opacity: 0; scale: .7; }

/* Hero: mini pipeline ("how it works") */
.cj-steps {
	position: relative; isolation: isolate; overflow: hidden;
	margin-top: clamp(32px, 3.6vw, 52px); padding: 18px clamp(16px, 2.4vw, 28px) 20px; border-radius: 24px;
	background: radial-gradient(70% 140% at 50% 0%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 70%), rgba(10, 21, 48, .72);
	box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -40px rgba(0, 0, 0, .9);
}
.cj-steps::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 28px 28px;
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
	mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.cj-steps__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cj-steps__label { font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; text-transform: lowercase; }
.cj-steps__label span::before { content: "//"; margin-right: .55em; color: var(--brand-2); }
.cj-steps__more { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 560; color: var(--brand-2); white-space: nowrap; transition: gap .3s var(--spring), color .2s; }
.cj-steps__more svg { width: 16px; height: 16px; }
.cj-steps__more:hover { gap: 12px; color: var(--text); }
.cj-steps .cj-rail--mini { margin: 14px 0 0; }
.cj-rail--mini .cj-rail__line { top: 21px; }
.cj-rail--mini .cj-station__ic { width: 42px; height: 42px; border-radius: 13px; }
.cj-rail--mini .cj-station__ic > svg { width: 19px; height: 19px; }
.cj-rail--mini .cj-station.is-current .cj-station__ic { scale: 1.06; }
.cj-rail--mini .cj-station.is-current .cj-station__ic::before { inset: -7px; border-radius: 18px; }
.cj-rail--mini .cj-station__ok { top: -6px; right: -6px; width: 18px; height: 18px; }
.cj-rail--mini .cj-station__ok svg { width: 11px; height: 11px; }
.cj-rail--mini .cj-station__name { margin-top: 10px; font-size: 14.5px; }
.cj-rail--mini .cj-station__sub { font-size: 12px; }
html.cj-motion .cj-steps .cj-rail__line { animation: cj-march .9s linear infinite; }
html.cj-motion .cj-steps .cj-station.is-current .cj-station__ic::before { animation: cj-orbit 1.4s linear infinite; }
.cj-steps.is-live .cj-station.is-current .cj-station__ic { background: var(--good); color: #04221a; box-shadow: 0 0 0 5px rgba(52, 211, 153, .16), 0 12px 28px -10px rgba(52, 211, 153, .8); }
.cj-steps.is-live .cj-station.is-current .cj-station__ic::before { display: none; }

/* ---------- Credentials bento ---------- */
.cj-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 14px; }
.cj-tile {
	--acc: var(--brand);
	position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
	padding: 22px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
	transition: box-shadow .3s;
}
.cj-tile::before {
	content: ""; position: absolute; inset: auto -30% -50% auto; z-index: -1; width: 80%; aspect-ratio: 1; opacity: .4;
	background: radial-gradient(circle, color-mix(in srgb, var(--acc) 30%, transparent), transparent 65%); transition: opacity .4s;
}
.cj-tile:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.cj-tile:hover::before { opacity: 1; }
.cj-tile--s1 { --acc: var(--cyan); }
.cj-tile--s2 { --acc: var(--ok); }
.cj-tile--s3 { --acc: var(--violet); }
.cj-tile__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: color-mix(in srgb, var(--acc) 15%, transparent); color: color-mix(in oklab, var(--acc) 70%, #fff); }
.cj-tile__icon svg { width: 22px; height: 22px; }
.cj-tile__big { margin-top: auto; padding-top: 20px; font-size: clamp(32px, 3.1vw, 46px); font-weight: 600; font-stretch: 112%; line-height: 1; letter-spacing: -.045em; }
.cj-tile__label { margin-top: 8px; font-size: 15px; color: var(--soft); }
.cj-tile__note { margin-top: 4px; font-size: 13px; color: var(--dim); }
.cj-tile--feat { grid-column: span 2; grid-row: span 2; justify-content: flex-end; min-height: 420px; padding: 28px; }
.cj-tile--feat::before { display: none; }
.cj-tile__media { position: absolute; inset: 0; z-index: -2; }
.cj-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.cj-tile--feat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(5, 11, 24, .96) 12%, rgba(5, 11, 24, .55) 50%, rgba(5, 11, 24, .05)); }
a.cj-tile--feat:hover .cj-tile__media img { scale: 1.05; }
.cj-tile__pin {
	position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
	border-radius: 10px; background: rgba(5, 11, 24, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	font-family: var(--mono); font-size: 11.5px; color: var(--soft);
}
.cj-tile__pin svg { width: 14px; height: 14px; color: var(--brand-2); }
.cj-tile__copy { display: grid; gap: 10px; justify-items: start; max-width: 520px; }
.cj-tile__copy .cj-label { margin-bottom: 0; }
.cj-tile__title { font-size: clamp(26px, 2.8vw, 38px); font-weight: 560; font-stretch: 110%; line-height: 1.02; letter-spacing: -.04em; }
.cj-tile__text { font-size: 15px; color: var(--soft); max-width: 46ch; }
.cj-tile__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 560; color: var(--brand-2); transition: gap .3s var(--spring); }
.cj-tile__link svg { width: 16px; height: 16px; }
a.cj-tile--feat:hover .cj-tile__link { gap: 12px; }
.cj-bento--nofeat { grid-auto-rows: minmax(180px, auto); }

/* ---------- Services: hover-reveal list ---------- */
.cj-svc { position: relative; border-top: 1px solid var(--line-2); }
.cj-svc__row { position: relative; border-bottom: 1px solid var(--line-2); }
.cj-svc__head {
	position: relative; isolation: isolate; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 46px; gap: 20px; align-items: center;
	width: 100%; padding: clamp(20px, 2.4vw, 30px) 0; text-align: left;
}
.cj-svc__head::before {
	content: ""; position: absolute; inset: 0 -14px; z-index: -1; border-radius: 16px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 13%, transparent), transparent 75%);
	transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.cj-svc__head:hover::before { transform: scaleX(1); }
.cj-svc__n { font-family: var(--mono); font-size: 13px; color: var(--dim); transition: color .3s; }
.cj-svc__title { font-size: clamp(24px, 3.3vw, 46px); font-weight: 520; font-stretch: 110%; line-height: 1.05; letter-spacing: -.04em; color: var(--soft); transition: color .3s, translate .5s var(--spring); }
.cj-svc__tags { font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.cj-svc__plus { position: relative; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .3s, box-shadow .3s, rotate .5s var(--spring); }
.cj-svc__plus::before, .cj-svc__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; border-radius: 2px; background: currentColor; translate: -50% -50%; }
.cj-svc__plus::after { rotate: 90deg; }
.cj-svc__head:hover .cj-svc__title, .cj-svc__row.is-open .cj-svc__title { color: var(--text); translate: 12px 0; }
.cj-svc__head:hover .cj-svc__n, .cj-svc__row.is-open .cj-svc__n { color: var(--brand-2); }
.cj-svc__row.is-open .cj-svc__plus { rotate: 135deg; background: var(--brand); box-shadow: none; color: #fff; }
.cj-svc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.6, 0, .2, 1); }
.cj-svc__row.is-open .cj-svc__body, html:not(.js) .cj-svc__body { grid-template-rows: 1fr; }
.cj-svc__inner { min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; padding-left: 84px; }
.cj-svc__text { display: grid; gap: 20px; justify-items: start; padding-bottom: 34px; }
.cj-svc__text p { max-width: 54ch; font-size: 17px; line-height: 1.65; color: var(--soft); }
.cj-svc__img { margin-bottom: 34px; }
.cj-svc__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
.cj-svc__img figcaption { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.cj-svc__row .cj-svc__text, .cj-svc__row .cj-svc__img { opacity: 0; translate: 0 14px; transition: opacity .4s, translate .6s var(--ease); }
.cj-svc__row.is-open .cj-svc__text, .cj-svc__row.is-open .cj-svc__img, html:not(.js) .cj-svc__text, html:not(.js) .cj-svc__img { opacity: 1; translate: 0 0; transition-delay: .15s; }
.cj-svc__float {
	position: absolute; left: 0; top: 0; z-index: 4; width: 250px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px;
	pointer-events: none; opacity: 0; scale: .8; box-shadow: var(--shadow), 0 0 0 1px var(--line-2);
	transition: opacity .25s, scale .4s var(--spring);
}
.cj-svc__float.is-on { opacity: 1; scale: 1; }
.cj-svc__float span { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path .5s cubic-bezier(.65, 0, .25, 1); }
.cj-svc__float span.is-on { clip-path: inset(0 0 0 0); }
.cj-svc__float img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Speed lab ---------- */
.cj-lab {
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center;
	padding: clamp(28px, 4.4vw, 60px); border-radius: 32px;
	background: radial-gradient(110% 90% at 0% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%), var(--surface);
	box-shadow: inset 0 0 0 1px var(--line-2);
}
.cj-lab::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: linear-gradient(90deg, #000, transparent 55%);
	mask-image: linear-gradient(90deg, #000, transparent 55%);
}
.cj-lab__dial { display: grid; justify-items: center; gap: 18px; }
.cj-lab__dial .cj-dial { width: min(100%, 400px); }
.cj-lab__switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(5, 11, 24, .6); box-shadow: inset 0 0 0 1px var(--line); }
.cj-lab__switch span { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; font-size: 13px; color: var(--dim); transition: color .3s, background-color .3s; }
.cj-lab__switch span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cj-lab__switch span.is-on { background: var(--panel-2); color: var(--text); }
.cj-lab__switch span.is-on:first-child::before { background: var(--poor); }
.cj-lab__switch span.is-on:last-child::before { background: var(--good); }
.cj-lab__note { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.cj-lab__copy { display: grid; gap: 20px; justify-items: start; }
.cj-lab__copy .cj-label { margin-bottom: -4px; }
.cj-lab__copy .cj-h2 { font-size: clamp(34px, 4.4vw, 62px); }
.cj-lab__copy .cj-term { width: 100%; }

/* Dial */
.cj-dial { --dial-c: var(--poor); position: relative; width: 100%; }
.cj-dial--ok { --dial-c: var(--ok); }
.cj-dial--good { --dial-c: var(--good); }
.cj-dial svg { width: 100%; height: auto; overflow: visible; }
.cj-dial path { fill: none; }
.cj-dial__track { stroke: rgba(140, 170, 255, .12); stroke-width: 14; stroke-linecap: round; }
.cj-dial__zone { stroke-width: 3; stroke-linecap: round; opacity: .55; }
.cj-dial__zone.is-poor { stroke: var(--poor); }
.cj-dial__zone.is-ok { stroke: var(--ok); }
.cj-dial__zone.is-good { stroke: var(--good); }
.cj-dial__fill {
	stroke: var(--dial-c); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--v, 0));
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--dial-c) 60%, transparent));
	transition: stroke-dashoffset 1.3s cubic-bezier(.3, 1.15, .4, 1), stroke .5s;
}
.cj-dial__tick { stroke: rgba(140, 170, 255, .28); stroke-width: 1.5; stroke-linecap: round; }
.cj-dial__tick.is-major { stroke: rgba(140, 170, 255, .5); stroke-width: 2; }
.cj-dial__needle {
	fill: var(--text); transform-box: view-box; transform-origin: 120px 130px;
	transform: rotate(calc((var(--v, 0) * 1.8 - 90) * 1deg)); transition: transform 1.3s cubic-bezier(.3, 1.35, .45, 1);
}
.cj-dial__needle path { fill: var(--text); }
.cj-dial__needle circle { fill: var(--bg); stroke: var(--text); stroke-width: 3; }
.cj-dial__read { display: grid; justify-items: center; margin-top: 2px; }
.cj-dial__read b { font-size: clamp(54px, 6vw, 84px); font-weight: 600; font-stretch: 115%; line-height: .95; letter-spacing: -.05em; color: var(--dial-c); transition: color .5s; font-variant-numeric: tabular-nums; }
.cj-dial__read small { margin-top: 6px; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }

/* Terminal form */
.cj-term {
	display: flex; align-items: center; gap: 12px; max-width: 580px; padding: 7px 7px 7px 18px; border-radius: 16px;
	background: rgba(3, 8, 20, .75); box-shadow: inset 0 0 0 1px var(--line-2); font-family: var(--mono);
	transition: box-shadow .25s;
}
.cj-term:focus-within { box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); }
.cj-term__label { flex: none; font-size: 14px; color: var(--brand-2); white-space: nowrap; }
.cj-term__label span { color: var(--good); }
.cj-term input { flex: 1; min-width: 0; padding: 10px 0; background: none; border: 0; outline: 0; font-family: var(--mono); font-size: 15px; color: var(--text); }
.cj-term input::placeholder { color: var(--dim); }
.cj-term .cj-btn { font-family: var(--sans); }
.cj-term--lg { width: 100%; max-width: 780px; padding: 9px 9px 9px 22px; border-radius: 18px; }
.cj-term--lg .cj-term__label { font-size: 16px; }
.cj-term--lg input { font-size: 18px; padding: 12px 0; }
.cj-term--sm { padding: 5px 5px 5px 14px; border-radius: 13px; }
.cj-term--sm .cj-term__label { font-size: 12.5px; }
.cj-term--sm input { font-size: 14px; padding: 8px 0; }
.cj-term--sm .cj-btn { --h: 38px; padding: 0 16px; }

/* ---------- Why codeJay: perk demos ---------- */
.cj-perks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.cj-perk { grid-column: span 7; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cj-perk:nth-child(2), .cj-perk:nth-child(3) { grid-column: span 5; }
.cj-perk__demo {
	position: relative; display: grid; place-items: center; height: 260px; padding: 24px; overflow: hidden;
	background: radial-gradient(rgba(140, 170, 255, .14) 1px, transparent 1px) 0 0 / 18px 18px, var(--bg-2);
	border-bottom: 1px solid var(--line);
}
.cj-perk__copy { padding: 24px 26px 28px; }
.cj-perk__title { font-size: 22px; font-weight: 560; font-stretch: 108%; letter-spacing: -.025em; }
.cj-perk__copy p { margin-top: 8px; max-width: 52ch; font-size: 15.5px; color: var(--muted); }

/* 1 · Edit on the page */
.pe { position: relative; width: min(100%, 440px); overflow: hidden; border-radius: 14px; background: #f7efe3; color: #3a2314; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 50px -24px rgba(0, 0, 0, .9); line-height: 1.25; }
.pe-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 12px; background: #0d1a38; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.pe-mode { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); color: var(--soft); transition: background-color .3s, color .3s; }
.pe-mode svg { width: 12px; height: 12px; }
.pe.is-editing .pe-mode { background: var(--brand); color: #fff; }
.pe-page { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 16px; align-items: center; padding: 20px 18px; }
.pe-h { font-size: 19px; font-weight: 700; font-stretch: 104%; letter-spacing: -.02em; }
.pe-p { margin-top: 7px; font-size: 12px; color: #8b6b52; }
.pe-btn { display: inline-block; margin-top: 12px; padding: 6px 12px; border-radius: 99px; background: #c2602b; color: #fff; font-size: 11px; font-weight: 600; }
.pe-img { aspect-ratio: 1; border-radius: 12px; background: radial-gradient(ellipse 50% 32% at 50% 56%, #c98a4b 0 62%, #9f5d26 64% 72%, transparent 74%), linear-gradient(160deg, #f1dcc0, #e7caa3); transition: background .5s; }
.pe.img-b .pe-img { background: radial-gradient(circle at 50% 52%, #f6c9d3 0 30%, #e98aa1 31% 40%, transparent 41%), radial-gradient(circle at 50% 56%, #fff4e6 0 46%, transparent 47%), linear-gradient(160deg, #fbe3ea, #f2c7d2); }
[data-pe-field] { border-radius: 6px; outline: 1.5px dashed transparent; outline-offset: 4px; transition: outline-color .3s; }
.pe.is-editing [data-pe-field] { outline-color: color-mix(in srgb, var(--brand) 70%, transparent); }
.pe.is-focus .pe-h { outline-style: solid; outline-color: var(--brand); }
.pe-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: var(--brand); opacity: 0; }
.pe.is-focus .pe-caret { opacity: 1; animation: cj-blink 1s steps(1) infinite; }
.pe-toast {
	position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 6px 11px;
	border-radius: 99px; background: #0b2a22; color: var(--good); font-family: var(--mono); font-size: 11px;
	box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .5); opacity: 0; translate: 0 10px; transition: opacity .3s, translate .45s var(--spring);
}
.pe-toast svg { width: 12px; height: 12px; stroke-width: 2.6; }
.pe.is-published .pe-toast { opacity: 1; translate: 0 0; }

/* 2 · Figma vs live */
.pf { position: relative; width: min(100%, 360px); aspect-ratio: 16 / 11; overflow: hidden; border-radius: 14px; cursor: ew-resize; touch-action: pan-y; user-select: none; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); }
.pf-layer { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 34px 20px 20px; }
.pf-layer > span { position: relative; display: block; border-radius: 6px; flex: none; }
.pf-nav { height: 10px; width: 100%; }
.pf-h { height: 24px; width: 74%; margin-top: 6px; }
.pf-p { height: 9px; width: 90%; }
.pf-btn { height: 24px; width: 96px; border-radius: 99px !important; margin-top: 4px; }
.pf-row { display: flex !important; gap: 8px; margin-top: auto; }
.pf-row i { flex: 1; height: 46px; border-radius: 8px; }
.pf-live { background: #f3f6ff; }
.pf-live .pf-nav { background: #dfe6ff; }
.pf-live .pf-h { background: #16255f; }
.pf-live .pf-p { background: #a3aed4; }
.pf-live .pf-btn { background: var(--brand); }
.pf-live .pf-row i { background: #e1e7ff; }
.pf-design { background: #1e1f26 radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 12px 12px; clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.pf-design > span, .pf-design .pf-row i { box-shadow: inset 0 0 0 1px #0d99ff; background: rgba(13, 153, 255, .06); }
.pf-design .pf-row { box-shadow: none; background: none; }
.pf-design em {
	position: absolute; top: 50%; left: calc(100% + 6px); translate: 0 -50%; padding: 1px 5px; border-radius: 4px;
	background: #ff4f8b; color: #fff; font-family: var(--mono); font-size: 9px; font-style: normal; line-height: 1.4;
}
.pf-handle { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; translate: -1px 0; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .4); }
.pf-handle i { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border-radius: 50%; translate: -50% -50%; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.pf-handle i::before, .pf-handle i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 4.5px solid transparent; translate: 0 -50%; }
.pf-handle i::before { left: 5px; border-right-color: #16255f; }
.pf-handle i::after { right: 5px; border-left-color: #16255f; }
.pf-tag { position: absolute; top: 10px; padding: 3px 8px; border-radius: 6px; font-family: var(--mono); font-size: 10px; color: #fff; }
.pf-tag--l { left: 10px; background: rgba(0, 0, 0, .55); }
.pf-tag--r { right: 10px; background: var(--brand); }

/* 3 · Load race */
.ps { display: grid; gap: 18px; width: min(100%, 380px); }
.ps-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.ps-row > span:first-child { font-size: 13.5px; color: var(--soft); }
.ps-row b { grid-column: 2; grid-row: 1; font-family: var(--mono); font-size: 14px; font-weight: 400; color: var(--poor); font-variant-numeric: tabular-nums; }
.ps-row.is-us b { color: var(--good); }
.ps-bar { grid-column: 1 / -1; height: 12px; overflow: hidden; border-radius: 99px; background: rgba(140, 170, 255, .08); }
.ps-bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--poor) 40%, transparent), var(--poor)); transform-origin: left; }
.ps-row.is-us .ps-bar i { background: var(--grad); box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 70%, transparent); }
html.cj-motion .ps-bar i { transform: scaleX(0); }
html.cj-motion .ps.is-run .ps-bar i { transform: scaleX(1); transition: transform 2.6s linear; }
html.cj-motion .ps.is-run .is-us .ps-bar i { transition-duration: .59s; }
.ps-note { font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* 4 · Search result */
.pq { display: grid; gap: 12px; width: min(100%, 430px); }
.pq-search { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-radius: 99px; background: #fff; color: #202124; font-size: 13.5px; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8); }
.pq-search span { white-space: nowrap; overflow: hidden; }
.pq-search svg { width: 16px; height: 16px; color: #4285f4; flex: none; }
.pq-result { display: grid; gap: 6px; padding: 16px 18px; border-radius: 16px; background: #0f1a36; box-shadow: inset 0 0 0 1px var(--line); }
.pq-site { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--soft); }
.pq-site i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #c2602b; color: #fff; font-size: 10px; font-style: normal; font-weight: 700; }
.pq-title { font-size: 16.5px; line-height: 1.3; color: #8ab4f8; }
.pq-desc { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pq-chips i { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: rgba(52, 211, 153, .12); color: var(--good); font-family: var(--mono); font-size: 10.5px; font-style: normal; }
.pq-chips i::before { content: "✓"; }
html.cj-motion .pq-search span { clip-path: inset(0 100% 0 0); }
html.cj-motion .pq-result > * { opacity: 0; translate: 0 6px; }
html.cj-motion .pq-chips i { opacity: 0; scale: .6; }
html.cj-motion .pq.is-run .pq-search span { animation: pq-type 1.3s steps(26) .2s forwards; }
html.cj-motion .pq.is-run .pq-result > * { animation: pq-in .5s var(--ease) forwards; }
html.cj-motion .pq.is-run .pq-site { animation-delay: 1.55s; }
html.cj-motion .pq.is-run .pq-title { animation-delay: 1.7s; }
html.cj-motion .pq.is-run .pq-desc { animation-delay: 1.85s; }
html.cj-motion .pq.is-run .pq-chips { animation-delay: 2s; }
html.cj-motion .pq.is-run .pq-chips i { animation: pq-pop .45s var(--spring) forwards; }
html.cj-motion .pq.is-run .pq-chips i:nth-child(1) { animation-delay: 2.1s; }
html.cj-motion .pq.is-run .pq-chips i:nth-child(2) { animation-delay: 2.25s; }
html.cj-motion .pq.is-run .pq-chips i:nth-child(3) { animation-delay: 2.4s; }
html.cj-motion .pq.is-run .pq-chips i:nth-child(4) { animation-delay: 2.55s; }

/* ---------- Work: draggable gallery ---------- */
.cj-gallery__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.cj-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.cj-filter { height: 38px; padding: 0 16px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; color: var(--soft); transition: background-color .25s, color .25s, box-shadow .25s; }
.cj-filter:hover { color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 60%, transparent); }
.cj-filter[aria-pressed="true"] { background: var(--text); color: var(--bg); box-shadow: none; }
.cj-gallery__nav { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cj-gallery__count { margin-right: 8px; font-family: var(--mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cj-gallery__track {
	--pad: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
	display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
	padding: 8px var(--pad) 24px; scroll-padding-inline: var(--pad); scroll-snap-type: x proximity; scrollbar-width: none;
	cursor: grab;
}
.cj-gallery__track::-webkit-scrollbar { display: none; }
.cj-gallery__track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.cj-gallery__track.is-drag a, .cj-gallery__track.is-drag button { pointer-events: none; }
.cj-shot { flex: 0 0 clamp(268px, 30vw, 400px); scroll-snap-align: start; }
html.cj-motion .cj-shot.is-new { animation: cj-shot-in .65s var(--ease) both; }
.cj-shot__link { display: block; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); -webkit-user-drag: none; }
.cj-shot__link.is-tilting { transition: transform .12s linear; }
.cj-shot__media { position: relative; display: block; aspect-ratio: 1 / 1.08; overflow: hidden; border-radius: 22px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.cj-shot__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); pointer-events: none; }
.cj-shot__media::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .14), transparent 45%); }
.cj-shot__link:hover .cj-shot__media img { scale: 1.05; }
.cj-shot__link:hover .cj-shot__media::after { opacity: 1; }
.cj-shot__no { position: absolute; top: 14px; left: 14px; padding: 4px 9px; border-radius: 8px; background: rgba(5, 11, 24, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--mono); font-size: 11.5px; color: var(--soft); }
.cj-shot__meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 4px 0; }
.cj-shot__meta > span:first-child { display: grid; gap: 2px; min-width: 0; }
.cj-shot__title { font-size: 18px; font-weight: 560; letter-spacing: -.015em; }
.cj-shot__cats { font-size: 13.5px; color: var(--muted); }
.cj-shot__go { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .3s, rotate .5s var(--spring), box-shadow .3s; }
.cj-shot__go svg { width: 16px; height: 16px; }
.cj-shot__link:hover .cj-shot__go { background: var(--brand); box-shadow: none; rotate: 45deg; }
.cj-gallery__progress { height: 2px; overflow: hidden; border-radius: 2px; background: var(--line-2); }
.cj-gallery__progress i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(.1); transition: transform .2s linear; }

/* Private projects (blurred until unlocked) */
.cj-shot__lock { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cj-shot__lock:focus-visible { outline: none; }
.cj-shot__lock:focus-visible .cj-shot__media { box-shadow: 0 0 0 2px var(--brand), 0 0 0 6px color-mix(in srgb, var(--brand) 28%, transparent); }
.cj-shot__lock .cj-shot__media { background: #0a1430; }
.cj-shot__blur {
	position: absolute; inset: -14%; z-index: 0;
	background:
		radial-gradient(55% 45% at 28% 30%, color-mix(in srgb, var(--brand) 70%, transparent), transparent 70%),
		radial-gradient(50% 55% at 76% 72%, color-mix(in srgb, var(--brand-2) 55%, transparent), transparent 70%),
		linear-gradient(160deg, #18307a, #0a1430);
	background-size: cover; background-position: center;
	filter: blur(26px) saturate(1.3); transition: scale 1s var(--ease);
}
.cj-shot__lock:hover .cj-shot__blur { scale: 1.06; }
.cj-shot__lock .cj-shot__media::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(180deg, rgba(5, 11, 24, .1), rgba(5, 11, 24, .55)),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 24px),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 24px);
}
.cj-shot__lock .cj-shot__no { z-index: 2; }
.cj-shot__lock .cj-shot__media::after { z-index: 3; }
.cj-shot__lockmsg { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 24px; text-align: center; }
.cj-shot__lockic {
	display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 12px; border-radius: 50%;
	background: rgba(5, 11, 24, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 20px 40px -18px rgba(0, 0, 0, .8);
	transition: background-color .3s, box-shadow .3s, scale .5s var(--spring);
}
.cj-shot__lockic svg { width: 24px; height: 24px; overflow: visible; }
.cj-shot__lockic svg path, .cj-shot__lock .cj-shot__go svg path { transition: translate .4s var(--spring); }
.cj-shot__lockmsg b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.cj-shot__lockmsg small { font-size: 13.5px; color: var(--soft); }
.cj-shot__lock:hover .cj-shot__lockic { background: var(--brand); scale: 1.06; box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--brand) 95%, transparent); }
.cj-shot__lock:hover .cj-shot__lockic svg path, .cj-shot__lock:hover .cj-shot__go svg path { translate: 0 -2.5px; }
.cj-shot__lock .cj-shot__title { color: var(--soft); }
.cj-shot__lock:hover .cj-shot__go { rotate: 0deg; }
.cj-shot__badge {
	position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 99px;
	background: rgba(5, 11, 24, .66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	box-shadow: inset 0 0 0 1px var(--brand-line); font-size: 12px; font-weight: 520; color: #fff;
}
.cj-shot__badge svg { width: 13px; height: 13px; color: var(--brand-2); }
html.cj-motion .cj-shot.is-revealing .cj-shot__media img { animation: cj-unblur 1.2s var(--ease) both; }
html.cj-motion .cj-shot.is-revealing .cj-shot__badge { animation: cj-pop .5s .7s var(--spring) both; }
@keyframes cj-unblur { from { filter: blur(26px) saturate(1.3); scale: 1.18; } }

/* Passcode popup */
.cj-modal.cj-unlock { max-width: min(440px, calc(100vw - 32px)); }
.cj-unlock__box {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 42px clamp(18px, 5vw, 28px) 26px; border-radius: 26px; text-align: center;
	background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 62%), var(--surface);
	box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow);
}
.cj-unlock__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); }
.cj-unlock__close svg { width: 18px; height: 18px; }
.cj-unlock__close:hover { background: var(--panel-2); }
.cj-unlock__ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--brand); color: var(--on-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 40px -14px color-mix(in srgb, var(--brand) 95%, transparent); }
.cj-unlock__ic svg { width: 24px; height: 24px; }
.cj-unlock__title { margin-top: 18px; font-size: 24px; font-weight: 620; letter-spacing: -.02em; }
.cj-unlock__text { max-width: 32ch; margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--soft); }
.cj-unlock__field { display: flex; gap: 6px; width: 100%; margin-top: 24px; padding: 6px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .25s; }
.cj-unlock__field:focus-within { box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
.cj-unlock__field input { flex: 1; width: 0; min-width: 0; height: 44px; padding: 0 12px; border: 0; background: none; color: var(--text); font-family: var(--mono); font-size: 16px; letter-spacing: .06em; outline: none; }
.cj-unlock__field input::placeholder { font-family: var(--sans); letter-spacing: 0; color: var(--muted); }
.cj-unlock__field .cj-btn { --h: 44px; flex: none; padding: 0 20px; border-radius: 11px; font-size: 15px; }
.cj-unlock__box.is-busy .cj-btn { opacity: .7; cursor: progress; }
.cj-unlock__box.is-shake .cj-unlock__field { animation: cj-shake .42s; }
.cj-unlock__msg { margin-top: 12px; font-size: 14px; color: var(--poor); }
.cj-unlock__ask { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 14.5px; color: var(--soft); transition: color .2s; }
.cj-unlock__ask svg { width: 14px; height: 14px; }
.cj-unlock__ask:hover { color: var(--text); }
@keyframes cj-shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }

/* ---------- Process: project pipeline ---------- */
.cj-flow {
	position: relative; isolation: isolate; overflow: hidden;
	padding: clamp(16px, 2.6vw, 30px); border-radius: 32px;
	background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%), var(--surface);
	box-shadow: inset 0 0 0 1px var(--line-2);
}
.cj-flow::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 45%);
	mask-image: linear-gradient(to bottom, #000, transparent 45%);
}
.cj-flow__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cj-flow__branches { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(3, 8, 20, .7); box-shadow: inset 0 0 0 1px var(--line); }
.cj-branch { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 10px; font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; transition: background-color .25s, color .25s, box-shadow .25s; }
.cj-branch svg { width: 15px; height: 15px; }
.cj-branch:hover { color: var(--text); }
.cj-branch[aria-pressed="true"] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.cj-branch[aria-pressed="true"] svg { color: var(--brand-2); }
.cj-flow__run { display: flex; align-items: center; gap: 8px; margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.cj-flow__run i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
html.cj-motion .cj-flow:not(.is-paused):not(.is-live) .cj-flow__run i { animation: cj-blink 1s steps(1) infinite; }
.cj-flow.is-live .cj-flow__run i { background: var(--good); box-shadow: 0 0 10px var(--good); }
.cj-flow.is-paused .cj-flow__run i { background: var(--dim); box-shadow: none; }
[data-flow-status] { color: var(--text); }
.cj-flow__run b { font-weight: 400; color: var(--soft); }
.cj-flow__toggle { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--soft); transition: background-color .25s, color .25s; }
.cj-flow__toggle:hover { background: var(--panel-2); color: var(--text); }
.cj-flow__toggle svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.cj-flow__play { display: none; }
.cj-flow__play path { fill: currentColor; stroke: none; }
.cj-flow.is-paused .cj-flow__play { display: block; }
.cj-flow.is-paused .cj-flow__pause { display: none; }
html:not(.js) .cj-flow__run, html:not(.js) .cj-flow__toggle, html:not(.js) .cj-log__timer { display: none; }

/* Rail with stations */
.cj-rail { --n: 5; --p: 0; position: relative; margin: clamp(26px, 3.4vw, 42px) 0 clamp(22px, 3vw, 34px); }
.cj-rail__line {
	position: absolute; top: 59px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 2px;
	background: repeating-linear-gradient(90deg, rgba(140, 170, 255, .26) 0 6px, transparent 6px 12px);
}
html.cj-motion .cj-flow:not(.is-paused) .cj-rail__line { animation: cj-march .9s linear infinite; }
.cj-rail__line i { position: absolute; inset: 0; background: var(--grad); transform: scaleX(var(--p)); transform-origin: left; transition: transform .9s var(--ease); box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 80%, transparent); }
.cj-rail__line b { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 34px; height: 6px; border-radius: 6px; translate: -50% -50%; background: #fff; box-shadow: 0 0 16px 4px color-mix(in srgb, var(--brand-2) 85%, transparent); transition: left .9s var(--ease); }
.cj-rail__stops { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.cj-station { min-width: 0; }
.cj-station__btn { display: grid; justify-items: center; width: 100%; padding: 0 4px 4px; border-radius: 16px; text-align: center; }
.cj-station__when { height: 22px; margin-bottom: 10px; padding: 0 8px; border-radius: 6px; font-family: var(--mono); font-size: 11px; line-height: 22px; color: var(--dim); white-space: nowrap; transition: background-color .3s, color .3s; }
.cj-station__ic {
	position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px;
	background: #081229; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted);
	transition: background-color .4s, color .4s, box-shadow .4s, scale .5s var(--spring);
}
.cj-station__ic > svg { width: 24px; height: 24px; }
.cj-station__ok { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--good); color: #04221a; box-shadow: 0 0 0 3px var(--surface); scale: 0; transition: scale .45s var(--spring); }
.cj-station__ok svg { width: 13px; height: 13px; stroke-width: 3; }
.cj-station__name { margin-top: 12px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--muted); transition: color .3s; }
.cj-station__sub { margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--dim); }
.cj-station__btn:hover .cj-station__ic { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 70%, transparent); color: var(--text); }
.cj-station.is-done .cj-station__ic { background: color-mix(in srgb, var(--brand) 14%, #081229); color: var(--brand-2); box-shadow: inset 0 0 0 1px var(--brand-line); }
.cj-station.is-done .cj-station__ok { scale: 1; }
.cj-station.is-done .cj-station__name { color: var(--soft); }
.cj-station.is-current .cj-station__ic { background: var(--brand); color: #fff; scale: 1.08; box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 18%, transparent), 0 14px 34px -10px color-mix(in srgb, var(--brand) 90%, transparent); }
.cj-station.is-current .cj-station__ic::before {
	content: ""; position: absolute; inset: -9px; border-radius: 22px; padding: 1.5px; pointer-events: none;
	background: conic-gradient(from var(--cj-a), transparent 0 62%, var(--brand-2));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
html.cj-motion .cj-flow:not(.is-paused) .cj-station.is-current .cj-station__ic::before { animation: cj-orbit 1.4s linear infinite; }
.cj-station.is-current .cj-station__when { background: var(--brand-soft); color: var(--brand-2); }
.cj-station.is-current .cj-station__name { color: var(--text); }
.cj-flow.is-live .cj-station.is-current .cj-station__ic { background: var(--good); color: #04221a; box-shadow: 0 0 0 6px rgba(52, 211, 153, .16), 0 14px 34px -10px rgba(52, 211, 153, .8); }
.cj-flow.is-live .cj-station.is-current .cj-station__ic::before { display: none; }
.cj-flow.is-live .cj-station.is-current .cj-station__when { background: rgba(52, 211, 153, .12); color: var(--good); }

/* Output screen + step log */
.cj-flow__main { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); gap: 16px; }
.cj-flow__screen { overflow: hidden; border-radius: 22px; background: #040a18; box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -40px rgba(0, 0, 0, .9); }
.cj-flow__chrome { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; overflow: hidden; background: #081229; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-ligatures: none; }
.cj-flow__chrome i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #1d2b55; }
.cj-flow__chrome i:first-child { background: var(--brand); }
.cj-flow__chrome span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; }
.cj-flow__stage { position: relative; height: 380px; background: radial-gradient(rgba(140, 170, 255, .1) 1px, transparent 1px) 0 0 / 18px 18px; }
.fl-sc { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.fl-sc.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
html.cj-motion .fl-a { opacity: 0; translate: 0 10px; }
html.cj-motion .fl-pop { opacity: 0; scale: .92; }
html.cj-motion .fl-sc.is-active .fl-a { animation: fl-in .55s var(--ease) var(--t, 0s) forwards; }
html.cj-motion .fl-sc.is-active .fl-pop { animation: fl-pop .6s var(--spring) var(--t, 0s) forwards; }

.cj-flow__log { position: relative; display: flex; flex-direction: column; padding: clamp(20px, 2.2vw, 28px); border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.cj-log { flex: 1; }
html.js .cj-log__item { display: none; }
html.js .cj-log__item.is-active { display: block; }
html.cj-motion .cj-log__item.is-active { animation: cj-rise .55s var(--ease) both; }
html:not(.js) .cj-log__item + .cj-log__item { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line-2); }
.cj-log__meta { display: flex; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cj-log__meta span:first-child { color: var(--brand-2); }
.cj-log__title { margin-top: 12px; font-size: clamp(28px, 2.8vw, 38px); font-weight: 560; font-stretch: 112%; line-height: 1; letter-spacing: -.04em; }
.cj-log__text { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--soft); }
.cj-log__checks { display: grid; gap: 10px; margin-top: 22px; }
.cj-log__checks li { position: relative; display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--soft); }
.cj-log__checks li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.cj-log__checks li::after { content: "✓"; position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 20px; height: 20px; translate: 0 -50%; border-radius: 6px; background: var(--good); color: #04221a; font-size: 12px; font-weight: 700; }
html.cj-motion .cj-log__checks li::after { scale: 0; }
html.cj-motion .cj-log__item.is-active .cj-log__checks li::after { animation: fl-pop .45s var(--spring) var(--t, 0s) forwards; }
.cj-log__timer { display: block; height: 3px; margin-top: 22px; overflow: hidden; border-radius: 3px; background: var(--line-2); }
.cj-log__timer i { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; }
.cj-flow.is-paused .cj-log__timer i { opacity: .35; }

/* Scene: brief */
.fl-brief { display: grid; gap: 12px; width: min(100%, 480px); }
.fl-chat__head { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fl-chat__head i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.fl-chat__head span { letter-spacing: 0; text-transform: none; color: var(--dim); }
.fl-msg { display: flex; align-items: flex-end; gap: 10px; }
.fl-msg > p { max-width: 82%; padding: 11px 15px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.fl-msg--them > p { border-bottom-left-radius: 5px; background: var(--panel-2); color: var(--soft); }
.fl-msg--me { justify-content: flex-end; }
.fl-msg--me > p { display: grid; border-bottom-right-radius: 5px; background: var(--brand); color: #fff; }
.fl-msg--me > p > span { grid-area: 1 / 1; }
.fl-typing { display: flex; align-items: center; gap: 4px; }
.fl-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
html.cj-motion .fl-sc.is-active .fl-typing i { animation: cj-dot 1s ease-in-out infinite; }
.fl-typing i:nth-child(2) { animation-delay: .15s !important; }
.fl-typing i:nth-child(3) { animation-delay: .3s !important; }
html.cj-motion .fl-msg__txt { opacity: 0; }
html.cj-motion .fl-sc.is-active .fl-msg__txt { animation: fl-show .3s 2.75s forwards; }
html.cj-motion .fl-sc.is-active .fl-typing { animation: fl-hide .2s 2.7s forwards; }
html:not(.cj-motion) .fl-typing { opacity: 0; }
.fl-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; background: #3b2a63; color: #e7e1ff; font-size: 12px; font-weight: 700; }
.fl-av img { width: 100%; height: 100%; object-fit: cover; }
.fl-files { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 40px; }
.fl-files span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; background: rgba(140, 170, 255, .06); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; color: var(--soft); }
.fl-files svg { width: 14px; height: 14px; color: var(--brand-2); }
.fl-toast { justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: #0b2a22; color: var(--good); font-family: var(--mono); font-size: 11.5px; box-shadow: 0 0 0 1px rgba(52, 211, 153, .25); }
.fl-toast svg { width: 13px; height: 13px; stroke-width: 2.6; }

/* Scene: design (Figma) */
.fl-fig { display: grid; grid-template-columns: 112px minmax(0, 1fr); width: min(100%, 580px); height: min(100%, 310px); overflow: hidden; border-radius: 14px; background: #1e1f26; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 50px -24px rgba(0, 0, 0, .9); }
.fl-fig__layers { display: grid; align-content: start; gap: 2px; padding: 12px 8px; border-right: 1px solid rgba(255, 255, 255, .07); font-family: var(--mono); font-size: 10.5px; color: #9aa0b4; }
.fl-fig__layers b { padding: 0 6px 8px; font-weight: 400; color: #e4e6ee; }
.fl-fig__layers i { padding: 5px 6px; border-radius: 5px; font-style: normal; }
.fl-fig__layers i::before { content: "#"; margin-right: 6px; opacity: .55; }
.fl-fig__layers i:nth-child(n+3) { padding-left: 16px; }
html.cj-motion .fl-sc.is-active .fl-fig__layers .is-sel { animation: fl-sel .3s 1.15s forwards; }
html:not(.cj-motion) .fl-fig__layers .is-sel { background: rgba(13, 153, 255, .28); color: #fff; }
.fl-fig__canvas { position: relative; display: grid; place-items: center; padding: 30px 22px 56px; background: #2b2c34 radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 12px 12px; }
.fl-frame { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; aspect-ratio: 16 / 10.5; padding: 12px 14px; border-radius: 3px; background: var(--pv-bg); color: var(--pv-ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); line-height: 1.15; }
.fl-frame__label { position: absolute; top: -17px; left: 0; font-family: var(--mono); font-size: 9.5px; color: #9aa0b4; }
.fl-fr__nav { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; }
.fl-fr__nav b { margin-right: auto; }
.fl-fr__nav i { width: 18px; height: 4px; border-radius: 2px; background: var(--pv-mute); opacity: .5; }
.fl-fr__nav i:last-child { width: 32px; height: 12px; border-radius: 99px; background: var(--pv-acc); opacity: 1; }
.fl-fr__h { margin-top: 8px; max-width: 72%; font-size: clamp(14px, 1.3vw, 17px); font-weight: 700; letter-spacing: -.02em; }
.fl-fr__p { width: 54%; height: 5px; border-radius: 3px; background: var(--pv-mute); opacity: .5; }
.fl-fr__btn { width: 64px; height: 16px; margin-top: 2px; border-radius: 99px; background: var(--pv-acc); }
.fl-fr__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: auto; }
.fl-fr__cards i { height: 28px; border-radius: 5px; background: var(--pv-card); box-shadow: 0 0 0 1px var(--pv-line); }
.fl-select {
	position: absolute; left: 8px; right: 8px; top: 34px; height: 76px; border: 1.5px solid #0d99ff; pointer-events: none;
	background:
		linear-gradient(#fff, #fff) 0 0 / 6px 6px no-repeat,
		linear-gradient(#fff, #fff) 100% 0 / 6px 6px no-repeat,
		linear-gradient(#fff, #fff) 0 100% / 6px 6px no-repeat,
		linear-gradient(#fff, #fff) 100% 100% / 6px 6px no-repeat;
}
.fl-select em { position: absolute; left: 50%; bottom: -21px; translate: -50% 0; padding: 2px 6px; border-radius: 4px; background: #0d99ff; color: #fff; font-family: var(--mono); font-size: 9px; font-style: normal; white-space: nowrap; }
html.cj-motion .fl-select { opacity: 0; scale: 1.05; }
html.cj-motion .fl-sc.is-active .fl-select { animation: fl-pop .35s var(--ease) 1.15s forwards; }
.fl-cursor { --c: #8b7dff; position: absolute; z-index: 3; display: flex; align-items: flex-start; pointer-events: none; color: var(--c); }
.fl-cursor svg { width: 16px; height: 18px; fill: currentColor; stroke: #fff; stroke-width: 1.3; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.fl-cursor span { margin: 14px 0 0 -3px; padding: 2px 7px; border-radius: 6px 6px 6px 2px; background: var(--c); color: #fff; font-size: 10px; font-weight: 600; }
.fl-cursor--me { left: 58%; top: 34%; }
.fl-cursor--you { --c: #f97316; right: 40px; bottom: 4px; }
html.cj-motion .fl-sc.is-active .fl-cursor--me { animation: fl-cur-me 1.2s var(--ease) both; }
html.cj-motion .fl-sc.is-active .fl-cursor--you { animation: fl-cur-you 1s var(--ease) 1.9s both, fl-click .3s 3s, fl-cur-off .6s var(--ease) 3.4s forwards; }
.fl-approve { position: absolute; right: 16px; bottom: 14px; display: grid; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: #0d99ff; color: #fff; font-size: 11.5px; font-weight: 600; }
.fl-approve > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.fl-approve svg { width: 13px; height: 13px; stroke-width: 2.6; }
.fl-approve__b { opacity: 0; }
html.cj-motion .fl-sc.is-active .fl-approve { animation: fl-approved .3s 3.1s forwards; }
html.cj-motion .fl-sc.is-active .fl-approve__a { animation: fl-hide .2s 3.1s forwards; }
html.cj-motion .fl-sc.is-active .fl-approve__b { animation: fl-show .2s 3.15s forwards; }
html:not(.cj-motion) .fl-approve { background: var(--good); color: #04221a; }
html:not(.cj-motion) .fl-cursor--you { translate: 34px 26px; }
html:not(.js) .cj-flow__main { align-items: start; }
html:not(.cj-motion) .fl-approve__a { opacity: 0; }
html:not(.cj-motion) .fl-approve__b { opacity: 1; }

/* Scene: build */
.fl-sc--build, .fl-sc--speed, .fl-sc--launch, .fl-sc--audit { justify-items: stretch; }
.fl-sc--build { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 22px; align-items: center; padding: 24px 28px; }
.fl-term { padding: 16px 18px; border-radius: 14px; background: #020611; box-shadow: inset 0 0 0 1px var(--line-2); font-family: var(--mono); font-size: 12px; line-height: 2; color: var(--soft); font-variant-ligatures: none; }
.fl-term__cmd span { color: var(--good); }
.fl-term__l { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.fl-term__l svg { flex: none; width: 13px; height: 13px; color: var(--good); stroke-width: 2.6; }
.fl-term__done { margin-top: 4px; color: var(--brand-2); }
.fl-devs { display: grid; gap: 16px; justify-items: center; }
.fl-devs__row { display: flex; align-items: flex-end; gap: 12px; }
.fl-dev { position: relative; display: block; overflow: hidden; background: #0d1a38; box-shadow: inset 0 0 0 1.5px rgba(140, 170, 255, .28), 0 14px 26px -16px rgba(0, 0, 0, .9); }
.fl-dev--phone { width: 52px; height: 100px; border-radius: 11px; }
.fl-dev--tab { width: 92px; height: 124px; border-radius: 10px; }
.fl-dev--desk { width: 168px; height: 108px; border-radius: 8px; }
.fl-dev i {
	position: absolute; inset: 5px; border-radius: 6px;
	background:
		linear-gradient(var(--pv-acc), var(--pv-acc)) 12% 9% / 22% 5% no-repeat,
		linear-gradient(var(--pv-ink), var(--pv-ink)) 12% 25% / 64% 8% no-repeat,
		linear-gradient(var(--pv-mute), var(--pv-mute)) 12% 37% / 46% 4% no-repeat,
		linear-gradient(var(--pv-acc), var(--pv-acc)) 12% 48% / 28% 7% no-repeat,
		linear-gradient(var(--pv-card), var(--pv-card)) 50% 86% / 78% 24% no-repeat,
		var(--pv-bg);
}
html.cj-motion .fl-dev i { clip-path: inset(0 0 100% 0); }
html.cj-motion .fl-sc.is-active .fl-dev i { animation: fl-fill .75s cubic-bezier(.65, 0, .25, 1) var(--t, 0s) forwards; }
.fl-oks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fl-oks span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: rgba(52, 211, 153, .12); color: var(--good); font-family: var(--mono); font-size: 11px; }
.fl-oks svg { width: 12px; height: 12px; stroke-width: 2.6; }

/* Scene: speed */
.fl-sc--speed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: center; padding: 24px 34px; }
.fl-speed__dial .cj-dial { width: min(100%, 270px); margin-inline: auto; }
.fl-speed__dial .cj-dial__read b { font-size: 60px; }
.fl-vitals { display: grid; gap: 8px; }
.fl-vitals li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.fl-vitals span { font-family: var(--mono); font-size: 12px; color: var(--soft); }
.fl-vitals small { grid-row: 2; font-size: 11.5px; color: var(--dim); }
.fl-vitals b { grid-column: 2; grid-row: 1 / span 2; font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--good); }

/* Scene: launch */
.fl-sc--launch { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 18px; align-items: center; padding: 24px; }
.fl-live { display: flex; height: 270px; }
.fl-live .pv { flex: 1; }
.fl-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 400; color: var(--good); }
.fl-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
.fl-hand { display: grid; gap: 12px; padding: 18px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.fl-hand__title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--good); }
.fl-hand__title svg { width: 16px; height: 16px; stroke-width: 2.6; }
.fl-hand ul { display: grid; gap: 8px; }
.fl-hand li { display: flex; gap: 8px; font-size: 13px; line-height: 1.35; color: var(--soft); }
.fl-hand li::before { content: "→"; font-family: var(--mono); color: var(--brand-2); }
.fl-hand__review { padding-top: 10px; border-top: 1px dashed var(--line-2); font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.fl-hand__review span { margin-right: 6px; letter-spacing: 1px; color: var(--ok); }

/* Scene: audit */
.fl-sc--audit { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px; align-items: center; padding: 24px; }
.fl-old { display: flex; flex-direction: column; height: 280px; overflow: hidden; border-radius: 12px; background: #eeebe4; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .9); }
.fl-old__bar { flex: none; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; background: #0d1a38; font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.fl-old__bar b { margin-left: auto; font-weight: 400; color: var(--poor); }
.fl-old__page { position: relative; flex: 1; display: grid; align-content: start; gap: 8px; padding: 10px; overflow: hidden; }
.fl-old__banner { display: block; overflow: hidden; padding: 5px; background: #e11d48; color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .04em; text-align: center; white-space: nowrap; }
html.cj-motion .fl-sc.is-active .fl-old__banner { animation: cj-blink .9s steps(1) infinite; }
.fl-old__slider { display: grid; grid-template-columns: repeat(3, 1fr); height: 96px; overflow: hidden; border-radius: 4px; }
.fl-old__slider i:nth-child(1) { background: #7fa7b5; }
.fl-old__slider i:nth-child(2) { background: #c9b38a; }
.fl-old__slider i:nth-child(3) { background: #a58fb5; }
.fl-old__rows { display: grid; gap: 6px; }
.fl-old__rows i { height: 7px; border-radius: 3px; background: #c8c3b8; }
.fl-old__rows i:nth-child(2) { width: 80%; }
.fl-old__rows i:nth-child(3) { width: 60%; }
.fl-old__popup { position: absolute; left: 50%; top: 56%; width: 66%; translate: -50% -50%; padding: 18px 14px; border-radius: 8px; background: #fff; color: #222; font-size: 12px; font-weight: 700; text-align: center; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
.fl-old__popup i { position: absolute; top: 3px; right: 8px; font-style: normal; font-weight: 400; color: #999; }
.fl-old__spin { position: absolute; right: 10px; bottom: 10px; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #c9c4ba; border-top-color: #555; }
html.cj-motion .fl-sc.is-active .fl-old__spin { animation: cj-spin .8s linear infinite; }
.fl-audit { display: grid; gap: 14px; justify-items: center; }
.fl-audit .cj-dial { width: min(100%, 210px); }
.fl-audit .cj-dial__read b { font-size: 46px; }
.fl-bad { display: grid; gap: 6px; width: 100%; }
.fl-bad li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: rgba(251, 113, 133, .08); color: #fecdd3; font-size: 12.5px; }
.fl-bad li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--poor); }

/* Scene: plan (diff) */
.fl-diff { width: min(100%, 500px); overflow: hidden; border-radius: 14px; background: #020611; box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 50px -24px rgba(0, 0, 0, .9); font-family: var(--mono); font-size: 12.5px; font-variant-ligatures: none; }
.fl-diff__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.fl-diff__head svg { width: 14px; height: 14px; }
.fl-diff__head span { margin-left: auto; color: var(--dim); }
.fl-diff ol { padding: 6px 0; }
.fl-diff li { display: grid; grid-template-columns: 40px 22px minmax(0, 1fr); align-items: center; padding: 7px 14px 7px 0; }
.fl-diff li span { padding-right: 12px; text-align: right; color: #2b3a66; }
.fl-diff li b { font-weight: 400; }
.fl-diff .is-add { background: rgba(52, 211, 153, .08); color: #a7f3d0; }
.fl-diff .is-add b { color: var(--good); }
.fl-diff .is-del { background: rgba(251, 113, 133, .08); color: #fecdd3; }
.fl-diff .is-del b { color: var(--poor); }
.fl-diff .is-fix { background: rgba(251, 191, 36, .08); color: #fde68a; }
.fl-diff .is-fix b { color: var(--ok); }
.fl-diff__foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--good); }
.fl-diff__foot svg { width: 14px; height: 14px; stroke-width: 2.6; }

/* ---------- Reviews ---------- */
.cj-quote { max-width: 1120px; margin-bottom: clamp(48px, 6vw, 84px); }
.cj-quote blockquote p { font-size: clamp(26px, 3.7vw, 54px); font-weight: 520; font-stretch: 108%; line-height: 1.12; letter-spacing: -.035em; text-wrap: pretty; }
.cj-quote blockquote p::before { content: "“"; margin-right: .04em; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--brand-2); }
html.js .cj-quote blockquote p { color: #24345f; }
.cj-quote blockquote p span { transition: color .35s; }
.cj-quote blockquote p span.is-on { color: var(--text); }
.cj-quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.cj-quote figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; aspect-ratio: 1; max-width: none; }
.cj-quote figcaption span { display: grid; line-height: 1.35; }
.cj-quote figcaption b { font-weight: 600; }
.cj-quote figcaption small { font-size: 14px; color: var(--muted); }
.cj-reviewgrid { columns: 3 300px; column-gap: 16px; }
.cj-reviewgrid > * { break-inside: avoid; margin-bottom: 16px; }
.cj-review { display: flex; flex-direction: column; gap: 16px; padding: 26px 28px 28px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cj-review__quote p { font-size: 16.5px; line-height: 1.65; color: var(--soft); }
.cj-review__quote[data-clamp] p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 6); overflow: hidden; }
.cj-review__more { align-self: flex-start; font-size: 14px; font-weight: 560; color: var(--brand-2); }
.cj-review__more:hover { color: var(--text); }
.cj-review__by { display: flex; align-items: center; gap: 12px; }
.cj-review__photo { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cj-review__initial { display: grid; place-items: center; background: linear-gradient(140deg, var(--brand), var(--violet)); color: #fff; font-weight: 600; font-size: 17px; }
.cj-review__who { display: grid; min-width: 0; line-height: 1.35; }
.cj-review__name { font-size: 16px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cj-review__who p { font-size: 13.5px; color: var(--muted); }
.cj-rated {
	position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 24px;
	background: linear-gradient(160deg, var(--brand), color-mix(in oklab, var(--brand) 55%, #0a1a5c)); color: #fff;
}
.cj-rated::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%); mask-image: linear-gradient(to bottom, #000, transparent 75%); }
.cj-rated__big { font-size: clamp(72px, 7vw, 104px); font-weight: 600; font-stretch: 115%; line-height: .9; letter-spacing: -.06em; }
.cj-rated__stars { position: relative; display: inline-block; align-self: flex-start; font-size: 20px; letter-spacing: 3px; line-height: 1; }
.cj-rated__stars i { font-style: normal; color: rgba(255, 255, 255, .3); }
.cj-rated__stars b { position: absolute; inset: 0 auto 0 0; width: calc(var(--r, 5) / 5 * 100%); overflow: hidden; white-space: nowrap; font-weight: 400; color: #ffd166; }
.cj-rated__text { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.cj-rated .cj-link { margin-top: auto; padding-top: 12px; color: #fff; }

/* Review popup */
.cj-modal { width: 100%; max-width: min(680px, calc(100vw - 32px)); margin: auto; padding: 0; border: 0; background: transparent; color: inherit; }
.cj-modal::backdrop { background: rgba(3, 7, 19, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cj-modal[open] { animation: cj-pop .4s var(--spring); }
.cj-modal__box { position: relative; max-height: calc(100vh - 48px); overflow: auto; padding: 38px 32px 28px; border-radius: 26px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.cj-modal__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); }
.cj-modal__close svg { width: 18px; height: 18px; }
.cj-modal__close:hover { background: var(--panel-2); }
.cj-modal .cj-review { padding: 0; background: none; box-shadow: none; opacity: 1; translate: none; filter: none; }

/* ---------- About: ID card ---------- */
.cj-about { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.cj-idcard {
	position: relative; width: 100%; max-width: 400px; padding: 18px; border-radius: 28px;
	background: linear-gradient(160deg, #14275e, #0a1430 62%);
	box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 80px -30px color-mix(in srgb, var(--brand) 50%, transparent);
	transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease);
}
.cj-idcard.is-tilting { transition: transform .12s linear; }
.cj-idcard::before { content: ""; position: absolute; top: 14px; left: 50%; width: 60px; height: 9px; border-radius: 99px; translate: -50% 0; background: var(--bg); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .06); }
.cj-idcard__holo {
	position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; mix-blend-mode: screen; opacity: .45; transition: opacity .4s;
	background:
		radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(103, 232, 249, .22), transparent 38%),
		linear-gradient(115deg, transparent 30%, rgba(139, 125, 255, .16) 45%, rgba(103, 232, 249, .14) 55%, transparent 70%);
}
.cj-idcard:hover .cj-idcard__holo { opacity: 1; }
.cj-idcard__top { display: flex; align-items: center; justify-content: space-between; padding: 22px 6px 14px; }
.cj-idcard__logo { height: 22px; width: auto; }
.cj-idcard__top span { padding: 4px 10px; border-radius: 99px; background: var(--brand); color: #fff; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
.cj-idcard__photo { overflow: hidden; aspect-ratio: 1; border-radius: 18px; background: var(--panel); }
.cj-idcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.cj-idcard__info { padding: 18px 6px 4px; }
.cj-idcard__name { font-size: 26px; font-weight: 600; font-stretch: 110%; line-height: 1.1; letter-spacing: -.03em; }
.cj-idcard__role { margin-top: 4px; font-size: 14px; color: var(--muted); }
.cj-idcard__rows { margin-top: 16px; border-top: 1px dashed var(--line-2); }
.cj-idcard__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line-2); font-size: 14px; }
.cj-idcard__rows dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding-top: 2px; }
.cj-idcard__rows dd { color: var(--soft); text-align: right; }
.cj-idcard__code { display: flex; align-items: center; gap: 14px; padding: 14px 6px 2px; }
.cj-idcard__code span { flex: 1; height: 26px; opacity: .55; background: repeating-linear-gradient(90deg, var(--soft) 0 2px, transparent 2px 4px, var(--soft) 4px 5px, transparent 5px 9px, var(--soft) 9px 12px, transparent 12px 14px, var(--soft) 14px 15px, transparent 15px 19px); }
.cj-idcard__code code { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.cj-about__copy { display: grid; justify-items: start; }
.cj-about__copy .cj-h2 { margin-bottom: 26px; }
.cj-about__lead { max-width: 40ch; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; color: var(--soft); }
.cj-about__copy > .cj-muted { max-width: 58ch; margin-top: 16px; font-size: 16.5px; }
.cj-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; width: 100%; margin-top: 32px; border-top: 1px solid var(--line-2); }
.cj-facts div { padding-top: 16px; }
.cj-facts dt { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.cj-facts dd { margin-top: 4px; font-size: 15.5px; font-weight: 500; color: var(--text); }
.cj-toolbelt { width: 100%; margin-top: 30px; overflow: hidden; }
.cj-toolbelt__label { margin-bottom: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.cj-toolbelt__track { display: flex; width: max-content; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
html.cj-motion .cj-toolbelt__track { animation: cj-marquee 32s linear infinite reverse; }
.cj-toolbelt:hover .cj-toolbelt__track { animation-play-state: paused; }
.cj-toolbelt__track ul { display: flex; gap: 10px; padding-right: 10px; }
.cj-toolbelt li { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--soft); white-space: nowrap; }
.cj-toolbelt li img { width: auto; height: 20px; }
.cj-about__copy .cj-btns { margin-top: 32px; }

/* ---------- Insights ---------- */
.cj-blog { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cj-blog--one { grid-template-columns: minmax(0, 780px); }
.cj-bcard { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s, translate .45s var(--spring); }
.cj-bcard:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t, var(--brand)) 55%, transparent); }
.cj-bcard:has(.cj-bcard__title a:focus-visible) { box-shadow: 0 0 0 2px var(--brand), 0 0 0 6px color-mix(in srgb, var(--brand) 25%, transparent); }
.cj-bcard__media { position: relative; display: block; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--panel); }
.cj-bcard__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.cj-bcard:hover .cj-bcard__media img { scale: 1.035; }
.cj-bcard__ph { display: grid; place-items: center; width: 100%; height: 100%; padding: 16px; background: radial-gradient(70% 90% at 20% 10%, color-mix(in srgb, var(--t, var(--brand)) 28%, transparent), transparent 65%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 28px), var(--panel); text-align: center; }
.cj-bcard__ph span { font-size: clamp(16px, 2vw, 22px); font-weight: 600; font-stretch: 110%; letter-spacing: -.02em; color: var(--t, var(--brand-2)); }
.cj-bcard__new { position: absolute; top: 12px; left: 12px; padding: 4px 9px; border-radius: 99px; background: var(--good); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6); font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #052e1c; }
.cj-bcard__body { flex: 1; display: grid; align-content: start; gap: 10px; padding: 22px 24px 24px; }
.cj-bcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cj-bcard__cat { position: relative; z-index: 2; padding: 3px 9px; border-radius: 7px; background: color-mix(in srgb, var(--t, var(--brand)) 14%, transparent); color: var(--t, var(--brand-2)); font-family: var(--sans); font-size: 12.5px; font-weight: 520; transition: background-color .2s; }
.cj-bcard__cat:hover { background: color-mix(in srgb, var(--t, var(--brand)) 24%, transparent); }
.cj-bcard__title { font-size: 18px; font-weight: 560; line-height: 1.3; letter-spacing: -.015em; color: var(--text); text-wrap: pretty; }
.cj-bcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cj-bcard__title a:focus-visible { outline: none; }
.cj-bcard--feat .cj-bcard__body { gap: 12px; padding: 26px 28px 28px; }
.cj-bcard--feat .cj-bcard__title { font-size: clamp(22px, 2.2vw, 30px); font-stretch: 106%; line-height: 1.18; letter-spacing: -.03em; }
.cj-bcard__excerpt { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 16px; line-height: 1.6; color: var(--soft); }
.cj-blog__side { display: grid; align-content: start; gap: 14px; }
.cj-bcard--row { flex-direction: row; align-items: center; gap: 18px; padding: 12px; border-radius: 22px; }
.cj-bcard--row .cj-bcard__media { flex: none; align-self: center; width: min(42%, 230px); border-radius: 14px; }
.cj-bcard--row .cj-bcard__body { gap: 8px; padding: 4px 10px 4px 0; }
.cj-bcard--row .cj-bcard__title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 16.5px; }
.cj-bcard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 2px; }
.cj-bcard__foot:empty { display: none; }
.cj-bcard__by { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 520; color: var(--soft); }
.cj-bcard__by img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.cj-bcard__time { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.cj-bcard__time svg { width: 13px; height: 13px; color: var(--brand-2); }
.cj-blog__all { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 18px 24px; border-radius: 22px; background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 22%, var(--surface)), var(--surface) 75%); box-shadow: inset 0 0 0 1px var(--brand-line); transition: box-shadow .3s, translate .45s var(--spring); }
.cj-blog__all b { display: block; font-weight: 600; color: var(--text); }
.cj-blog__all small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.cj-blog__all svg { flex: none; width: 42px; height: 42px; padding: 12px; border-radius: 50%; background: var(--brand); color: #fff; transition: translate .35s var(--spring); }
.cj-blog__all:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1px var(--brand), 0 24px 50px -30px color-mix(in srgb, var(--brand) 70%, transparent); }
.cj-blog__all:hover svg { translate: 4px 0; }

/* ---------- Blog page ---------- */
.cj-bhero { position: relative; z-index: 2; isolation: isolate; padding: calc(var(--header-h) + clamp(32px, 5vw, 72px)) 0 clamp(28px, 3.5vw, 44px); }
.cj-bhero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 24px 48px; align-items: end; }
.cj-bhero__main { display: grid; justify-items: start; gap: 16px; }
.cj-bhero__title { font-size: clamp(56px, 10vw, 136px); font-stretch: 115%; line-height: .92; letter-spacing: -.055em; }
.cj-bhero__title--sub { font-size: clamp(42px, 6.6vw, 92px); }
.cj-bhero .cj-crumbs li:last-child a { padding: 0; background: none; color: var(--muted); }
.cj-bhero .cj-crumbs li:last-child a:hover { color: var(--text); }
.cj-bhero__intro { max-width: 54ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--soft); }
.cj-bsearch { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 6px 0 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .25s; }
.cj-bsearch:focus-within { box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); }
.cj-bsearch > svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.cj-bsearch input { flex: 1; min-width: 0; width: 0; height: 100%; border: 0; background: none; color: var(--text); font-size: 16px; outline: none; }
.cj-bsearch input::placeholder { color: var(--muted); }
.cj-bsearch input::-webkit-search-cancel-button { filter: invert(.6); }
.cj-bsearch button { flex: none; height: 42px; padding: 0 16px; border-radius: 11px; background: var(--panel-2); font-size: 14px; font-weight: 560; color: var(--text); transition: background-color .2s; }
.cj-bsearch button:hover { background: var(--brand); }

.cj-bwrap { padding-bottom: var(--section); }
.cj-topics { margin-bottom: clamp(28px, 3vw, 40px); padding-bottom: clamp(20px, 2.4vw, 28px); border-bottom: 1px solid var(--line); }
.cj-topics__list { display: flex; flex-wrap: wrap; gap: 8px; }
.cj-topic { --t: var(--brand-2); display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 8px 0 16px; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14.5px; font-weight: 520; white-space: nowrap; color: var(--soft); transition: background-color .2s, box-shadow .2s, color .2s; }
.cj-topic:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 60%, transparent); color: var(--text); }
.cj-topic__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t); }
.cj-topic__n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 99px; background: var(--bg); font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.cj-topic[aria-current="page"] { background: color-mix(in srgb, var(--t) 16%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--t); color: var(--text); }
.cj-topic[aria-current="page"] .cj-topic__n { background: var(--t); color: #06101f; font-weight: 700; }
.cj-topic:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; }

.cj-bfeat { margin-bottom: clamp(40px, 5vw, 64px); }
.cj-bfeat .cj-bcard--feat { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; padding: 14px; border-radius: 30px; }
.cj-bfeat .cj-bcard--feat .cj-bcard__media { border-radius: 18px; }
.cj-bfeat .cj-bcard--feat .cj-bcard__body { align-content: center; gap: 14px; padding: clamp(18px, 2.6vw, 36px) clamp(14px, 2.4vw, 32px); }
.cj-bfeat .cj-bcard--feat .cj-bcard__title { font-size: clamp(26px, 2.7vw, 38px); line-height: 1.12; }
.cj-bfeat .cj-bcard__excerpt { -webkit-line-clamp: 4; font-size: 16.5px; }
.cj-bfeat .cj-bcard__foot { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }

.cj-blist__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 20px; }
.cj-blist__title { font-size: clamp(24px, 2.4vw, 30px); font-weight: 560; letter-spacing: -.03em; }
.cj-blist__status { font-size: 14px; color: var(--muted); }
.cj-bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 18px; }
.cj-bcard--grid .cj-bcard__body { gap: 10px; padding: 20px 22px 22px; }
.cj-bcard--grid .cj-bcard__title { font-size: 19px; line-height: 1.28; }
.cj-bcard--grid .cj-bcard__excerpt { -webkit-line-clamp: 2; font-size: 15px; line-height: 1.55; color: var(--muted); }
.cj-keep .cj-bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cj-bempty { display: grid; justify-items: center; gap: 12px; padding: clamp(40px, 6vw, 72px) 24px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; color: var(--soft); }
.cj-bempty__title { font-size: clamp(22px, 2.4vw, 28px); font-weight: 560; letter-spacing: -.02em; color: var(--text); }
.cj-bempty .cj-btn { margin-top: 8px; }

.cj-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: clamp(40px, 5vw, 56px); }
.cj-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; font-weight: 520; color: var(--soft); transition: box-shadow .2s, color .2s; }
.cj-pager .page-numbers svg { width: 16px; height: 16px; }
.cj-pager a.page-numbers:hover { box-shadow: inset 0 0 0 1px var(--brand-line); color: var(--text); }
.cj-pager .page-numbers.current { background: var(--brand); box-shadow: none; color: #fff; }
.cj-pager .page-numbers.dots { background: none; box-shadow: none; }

@media (max-width: 1100px) {
	.cj-bgrid, .cj-keep .cj-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cj-bfeat .cj-bcard--feat { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.cj-bhero__inner { grid-template-columns: minmax(0, 1fr); }
	.cj-topics { margin-inline: calc(var(--gutter) * -1); }
	.cj-topics__list { flex-wrap: nowrap; overflow-x: auto; padding: 2px var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
	.cj-topics__list::-webkit-scrollbar { display: none; }
	.cj-topics__list.is-end { -webkit-mask-image: none; mask-image: none; }
	.cj-topics__list li { flex: none; }
}
@media (max-width: 640px) {
	.cj-bgrid, .cj-keep .cj-bgrid { grid-template-columns: minmax(0, 1fr); }
	.cj-bfeat .cj-bcard--feat { border-radius: 22px; }
	.cj-bsearch { height: 50px; }
}

/* Header "Blog" link with a "New" badge */
.cj-nav__new { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 6px; border-radius: 99px; background: color-mix(in srgb, var(--good) 15%, transparent); font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase; color: var(--good); }
.cj-nav__new::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: cj-newping 2.2s infinite; }
@keyframes cj-newping { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70%, 100% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } }

/* ---------- FAQ: ask Jay ---------- */
.cj-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(36px, 6vw, 96px); align-items: start; }
.cj-faq__side .cj-h2 { margin-bottom: 20px; }
.cj-faq__qs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.cj-faq__q { padding: 11px 16px; border-radius: 16px 16px 16px 5px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14.5px; line-height: 1.35; text-align: left; color: var(--soft); transition: background-color .25s, color .25s, box-shadow .25s, translate .3s var(--spring); }
.cj-faq__q:hover { color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 60%, transparent); translate: 0 -2px; }
.cj-faq__q[aria-pressed="true"] { background: var(--brand); color: #fff; box-shadow: none; }
.cj-chatbox { position: sticky; top: calc(var(--header-h) + 28px); overflow: hidden; border-radius: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.cj-chatbox__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.cj-chatbox__head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; aspect-ratio: 1; max-width: none; }
.cj-chatbox__head p { display: grid; line-height: 1.3; }
.cj-chatbox__head b { font-weight: 600; }
.cj-chatbox__head span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.cj-chatbox__thread { display: flex; flex-direction: column; gap: 10px; min-height: 320px; padding: 24px 20px; background: radial-gradient(rgba(140, 170, 255, .08) 1px, transparent 1px) 0 0 / 16px 16px; }
.cj-bub { max-width: 86%; padding: 12px 16px; border-radius: 18px; font-size: 15px; line-height: 1.55; }
.cj-bub--you { align-self: flex-end; border-bottom-right-radius: 5px; background: var(--brand); color: #fff; }
.cj-bub--me { align-self: flex-start; border-bottom-left-radius: 5px; background: var(--panel-2); color: var(--soft); }
html.cj-motion .cj-bub.is-new { animation: cj-bub-in .45s var(--spring) both; }
.cj-bub--typing { display: flex; gap: 5px; padding: 15px 16px; }
.cj-bub--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
html.cj-motion .cj-bub--typing i { animation: cj-dot 1s ease-in-out infinite; }
.cj-bub--typing i:nth-child(2) { animation-delay: .15s; }
.cj-bub--typing i:nth-child(3) { animation-delay: .3s; }
.cj-chatbox__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--line); font-weight: 560; color: var(--brand-2); transition: background-color .25s, color .25s; }
.cj-chatbox__foot svg { width: 18px; height: 18px; transition: translate .3s var(--spring); }
.cj-chatbox__foot:hover { background: var(--panel); color: var(--text); }
.cj-chatbox__foot:hover svg { translate: 2px -2px; }
.cj-faq__all { grid-column: 1 / -1; display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.cj-faq__all > div { padding: 20px 0; border-bottom: 1px solid var(--line-2); }
.cj-faq__all h3 { font-size: 17px; font-weight: 600; }
.cj-faq__all p { margin-top: 6px; color: var(--muted); }
html.js .cj-faq__all { display: none; }
html:not(.js) .cj-faq__qs, html:not(.js) .cj-chatbox { display: none; }

/* ---------- Final call to action ---------- */
.cj-end { position: relative; isolation: isolate; overflow: hidden; padding: clamp(100px, 13vw, 180px) 0 clamp(80px, 10vw, 140px); border-top: 1px solid var(--line); }
.cj-end > .cj-wrap { position: relative; z-index: 1; }
.cj-end__title { max-width: 12.5ch; font-size: clamp(48px, 9.2vw, 152px); font-stretch: 115%; line-height: .9; letter-spacing: -.055em; }
.cj-end__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; margin-top: clamp(40px, 5vw, 72px); }
.cj-gigs { max-width: 640px; margin-top: 28px; border-top: 1px solid var(--line-2); }
.cj-gigs a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-2); font-size: 17px; color: var(--soft); transition: color .25s, padding .4s var(--spring); }
.cj-gigs svg { width: 18px; height: 18px; flex: none; transition: translate .3s var(--spring); }
.cj-gigs a:hover { padding-left: 10px; color: var(--text); }
.cj-gigs a:hover svg { translate: 2px -2px; color: var(--brand-2); }
.cj-end__note { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; color: var(--muted); }
.cj-end__note svg { width: 18px; height: 18px; color: var(--good); flex: none; }
.cj-orb { position: relative; flex: none; display: grid; place-items: center; width: clamp(180px, 18vw, 240px); aspect-ratio: 1; border-radius: 50%; transition: transform .35s var(--spring); }
.cj-orb__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html.cj-motion .cj-orb__ring { animation: cj-spin 24s linear infinite; }
.cj-orb:hover .cj-orb__ring { animation-duration: 9s; }
.cj-orb__ring text { font-family: var(--mono); font-size: 12.4px; letter-spacing: .2em; fill: var(--soft); }
.cj-orb__core {
	display: grid; place-items: center; width: 56%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle at 32% 26%, color-mix(in oklab, var(--brand-2) 70%, #fff), var(--brand) 55%, color-mix(in oklab, var(--brand) 60%, #000));
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 24px 70px -12px color-mix(in srgb, var(--brand) 80%, transparent);
	transition: scale .45s var(--spring);
}
.cj-orb__core svg { width: 34%; height: 34%; color: #fff; stroke-width: 2; transition: rotate .45s var(--spring); }
.cj-orb:hover .cj-orb__core { scale: 1.08; }
.cj-orb:hover .cj-orb__core svg { rotate: 45deg; }

/* ---------- Footer ---------- */
.cj-footer { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 104px) 0 30px; border-top: 1px solid var(--line); background: linear-gradient(to bottom, var(--bg), #030713); }
.cj-footer__top { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 48px 80px; }
.cj-footer__pitch { margin-bottom: 22px; font-size: 18px; line-height: 1.55; color: var(--soft); }
.cj-badges--footer { margin-top: 22px; }
.cj-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cj-footer__title { margin-bottom: 16px; font-family: var(--mono); font-size: 12px; text-transform: lowercase; color: var(--dim); }
.cj-footer__title::before { content: "// "; color: var(--brand-2); }
.cj-footer__col li + li { margin-top: 10px; }
.cj-footer__col a { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--muted); transition: color .2s; }
.cj-footer__col a svg { width: 14px; height: 14px; }
.cj-footer__col a:hover { color: var(--text); }
.cj-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: clamp(48px, 6vw, 80px); padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--dim); }
.cj-footer__bottom a:hover { color: var(--text); }

/* Mobile hire pill */
.cj-hirepill { display: none; }

/* Floating speed test */
.cj-bolt { position: fixed; right: 18px; bottom: 18px; z-index: 60; opacity: 0; translate: 0 20px; transition: opacity .45s, translate .6s var(--spring), bottom .4s var(--ease); }
.cj-bolt.is-in { opacity: 1; translate: 0 0; }
.cj-bolt.is-in.is-away { opacity: 0; translate: 0 20px; pointer-events: none; }
.cj-bolt__btn {
	position: relative; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border-radius: 15px;
	background: rgba(10, 21, 48, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -16px rgba(0, 0, 0, .8); font-size: 14.5px; font-weight: 560; color: var(--text);
}
.cj-bolt__btn::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
	background: conic-gradient(from var(--cj-a), transparent 0 72%, var(--ok) 86%, transparent);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
html.cj-motion .cj-bolt__btn::before { animation: cj-orbit 3.2s linear infinite; }
.cj-bolt__btn svg { width: 20px; height: 20px; color: var(--ok); fill: currentColor; }
.cj-bolt.is-open .cj-bolt__btn::before { opacity: 0; }
.cj-bolt__panel {
	position: absolute; right: 0; bottom: calc(100% + 12px); width: min(360px, calc(100vw - 36px)); padding: 22px;
	border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow);
	opacity: 0; visibility: hidden; translate: 0 10px; scale: .97; transform-origin: bottom right;
	transition: opacity .25s, translate .4s var(--spring), scale .4s var(--spring), visibility 0s .4s;
}
.cj-bolt.is-open .cj-bolt__panel { opacity: 1; visibility: visible; translate: 0 0; scale: 1; transition-delay: 0s; }
.cj-bolt__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); }
.cj-bolt__close svg { width: 16px; height: 16px; }
.cj-bolt__close:hover { background: var(--panel-2); color: var(--text); }
.cj-bolt__title { padding-right: 34px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.cj-bolt__text { margin: 6px 0 16px; font-size: 14.5px; color: var(--muted); }

/* ---------- Speed test page ---------- */
.cj-phero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + clamp(48px, 8vw, 112px)) 0 clamp(56px, 7vw, 96px); }
.cj-phero > .cj-wrap { position: relative; z-index: 1; }
.cj-phero__inner { display: grid; justify-items: start; gap: 22px; }
.cj-phero__inner .cj-label { margin-bottom: -4px; }
.cj-phero__title { font-size: clamp(44px, 7.6vw, 118px); line-height: .92; }
.cj-phero .cj-ticks { margin-top: -2px; }
.cj-speed { scroll-margin-top: calc(var(--header-h) + 16px); }
.cj-speed > .cj-wrap { display: grid; gap: 16px; }
.cj-speed__console { max-width: 760px; margin-inline: auto; width: 100%; padding: 26px 28px; border-radius: 22px; background: #030814; box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); font-family: var(--mono); font-size: 14px; }
.cj-speed__cmd { color: var(--soft); }
.cj-speed__cmd span { color: var(--good); }
.cj-speed__cmd b { font-weight: 400; color: var(--brand-2); }
.cj-speed__steps { display: grid; gap: 10px; margin: 18px 0 22px; }
.cj-speed__steps li { display: flex; align-items: center; gap: 12px; color: var(--dim); transition: color .3s; }
.cj-speed__steps li::before { content: ""; display: grid; place-items: center; flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 13px; line-height: 1; }
.cj-speed__steps li.is-on { color: var(--text); }
.cj-speed__steps li.is-on::before { box-shadow: none; border: 1.5px solid var(--brand-2); border-right-color: transparent; animation: cj-spin .8s linear infinite; }
.cj-speed__steps li.is-done { color: var(--muted); }
.cj-speed__steps li.is-done::before { content: "✓"; box-shadow: none; color: var(--good); }
.cj-speed__bar { height: 4px; overflow: hidden; margin-bottom: 14px; border-radius: 4px; background: var(--line-2); }
.cj-speed__bar i { display: block; width: 2%; height: 100%; border-radius: inherit; background: var(--grad); box-shadow: 0 0 12px var(--brand); }
.cj-speed__console .cj-small { font-family: var(--sans); }
.cj-speed__error { display: grid; justify-items: start; gap: 12px; max-width: 760px; width: 100%; margin-inline: auto; padding: 28px; border-radius: 22px; background: color-mix(in srgb, var(--poor) 7%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--poor) 32%, transparent); }
.cj-speed__error-title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.cj-speed__result { display: grid; gap: 16px; }
html.cj-motion .cj-speed__result:not([hidden]) { animation: cj-rise .7s var(--ease) both; }
.cj-speed__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.cj-speed__head .cj-label { margin-bottom: 10px; }
.cj-speed__head [data-r-host] { color: var(--brand-2); }
.cj-speed__head .cj-small { margin-top: 6px; }
.cj-speed__dials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 16px; }
.cj-speed__dial { padding: 22px 22px 18px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .3s; }
.cj-speed__dial:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.cj-speed__dial.is-on { box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 15%, transparent); }
.cj-speed__dial .cj-dial__read b { font-size: clamp(46px, 4.6vw, 68px); }
.cj-speed__verdict { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 26px; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.cj-speed__verdict-text { font-size: clamp(19px, 1.8vw, 24px); font-weight: 500; line-height: 1.35; letter-spacing: -.015em; }
.cj-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.cj-legend li { display: flex; align-items: center; gap: 7px; }
.cj-legend li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.cj-legend .is-poor::before { background: var(--poor); }
.cj-legend .is-ok::before { background: var(--ok); }
.cj-legend .is-good::before { background: var(--good); }
.cj-speed__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cj-speed__metrics, .cj-speed__fixes { padding: 26px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cj-speed__panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.cj-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.cj-seg__btn { height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; color: var(--muted); transition: background-color .2s, color .2s; }
.cj-seg__btn[aria-pressed="true"] { background: var(--panel-2); color: var(--text); }
.cj-meters { display: grid; gap: 20px; }
.cj-meter { --c: var(--muted); }
.cj-meter.is-good { --c: var(--good); }
.cj-meter.is-ok { --c: var(--ok); }
.cj-meter.is-poor { --c: var(--poor); }
.cj-meter--na { color: var(--muted); }
.cj-meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cj-meter__top span { display: grid; }
.cj-meter__top b { font-size: 15px; font-weight: 600; }
.cj-meter__top small { font-size: 13px; color: var(--muted); }
.cj-meter__top em { font-family: var(--mono); font-size: 17px; font-style: normal; white-space: nowrap; color: var(--c); }
.cj-meter__track, .cj-explain__bar {
	position: relative; display: block; height: 8px; border-radius: 99px;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--good) 38%, transparent) 0 var(--g),
		color-mix(in srgb, var(--ok) 38%, transparent) var(--g) calc(var(--g) + var(--o)),
		color-mix(in srgb, var(--poor) 38%, transparent) calc(var(--g) + var(--o)) 100%);
}
.cj-meter__mark { position: absolute; top: 50%; left: var(--pos); width: 16px; height: 16px; border-radius: 50%; translate: -50% -50%; background: var(--c); box-shadow: 0 0 0 3px var(--surface), 0 0 14px var(--c); }
html.cj-motion .cj-meter__mark { animation: cj-mark 1s var(--spring) both; }
.cj-field { margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--line-2); }
.cj-field__title { margin-bottom: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.cj-field ul { display: grid; gap: 8px; }
.cj-field li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--soft); }
.cj-field li em { font-family: var(--mono); font-style: normal; }
.cj-field li.is-good em { color: var(--good); }
.cj-field li.is-ok em { color: var(--ok); }
.cj-field li.is-poor em { color: var(--poor); }
.cj-fixes { display: grid; gap: 10px; }
.cj-fix { --c: var(--poor); display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.cj-fix.is-ok { --c: var(--ok); }
.cj-fix.is-good { --c: var(--good); }
.cj-fix__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); font-family: var(--mono); font-size: 13px; }
.cj-fix b { display: block; font-size: 15px; font-weight: 560; line-height: 1.4; }
.cj-fix small { display: block; margin-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cj-fix__bar { display: block; height: 3px; margin-top: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--c) var(--impact, 0%), var(--line) var(--impact, 0%)); }
/* SEO health */
.cj-seo { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cj-seo__dial { display: grid; align-content: center; min-height: 100%; padding: 22px 22px 18px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cj-seo__dial .cj-dial__read b { font-size: clamp(46px, 4.6vw, 68px); }
.cj-seo__body { padding: 26px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cj-seo__body .cj-speed__panel-head { margin-bottom: 8px; }
.cj-seo__verdict { margin-bottom: 18px; font-size: 17px; font-weight: 500; line-height: 1.45; color: var(--text); }
.cj-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cj-check { --c: var(--good); display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 14px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.cj-check.is-poor { --c: var(--poor); grid-column: 1 / -1; padding-block: 14px; background: color-mix(in srgb, var(--poor) 6%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--poor) 28%, transparent); }
.cj-check__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); font-size: 13px; font-weight: 700; }
.cj-check b { display: block; padding-top: 3px; font-size: 14.5px; font-weight: 520; line-height: 1.4; }
.cj-check.is-poor b { font-weight: 600; }
.cj-check small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.cj-seo__note { margin-top: 16px; }
@media (max-width: 900px) {
	.cj-seo { grid-template-columns: minmax(0, 1fr); }
	.cj-seo__dial { justify-items: center; }
	.cj-seo__dial .cj-dial { max-width: 340px; }
}
@media (max-width: 640px) {
	.cj-checks { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.cj-check { padding: 8px 12px; gap: 10px; }
	.cj-check b { font-size: 14px; }
	.cj-seo__body { padding: 20px; }
	.cj-seo__dial .cj-dial { max-width: 280px; }
}
.cj-speed__cta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 30px; border-radius: 24px;
	background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 26%, var(--surface)), var(--surface) 70%);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent);
}
.cj-speed__cta-title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.cj-explain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .cj-explain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cj-explain { grid-template-columns: minmax(0, 1fr); } }
.cj-explain li { display: grid; align-content: start; gap: 10px; padding: 26px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cj-explain__k { font-family: var(--mono); font-size: 12px; color: var(--brand-2); }
.cj-explain__bar { margin-top: 8px; height: 6px; }
.cj-explain__bar i { display: none; }

/* ---------- Inner pages + articles ---------- */
.cj-page-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + clamp(40px, 6vw, 84px)) 0 clamp(28px, 3vw, 44px); }
.cj-page-hero > .cj-wrap { position: relative; z-index: 1; display: grid; gap: 18px; justify-items: start; }
.cj-page-hero .cj-label { margin-bottom: -2px; }
.cj-page__title { font-size: clamp(36px, 5.4vw, 74px); line-height: 1; letter-spacing: -.04em; }
.cj-meta { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.cj-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cj-tags a { display: inline-block; padding: 5px 10px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-2); font-family: var(--mono); font-size: 12px; }
.cj-prose { padding-block: 32px var(--section); font-size: 17.5px; line-height: 1.75; color: var(--soft); }
.cj-prose > * + * { margin-top: 1.1em; }
.cj-prose h2, .cj-prose h3, .cj-prose h4 { margin-top: 1.8em; font-weight: 560; font-stretch: 106%; line-height: 1.2; letter-spacing: -.025em; color: var(--text); }
.cj-prose h2 { font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -.035em; }
.cj-prose h3 { font-size: 22px; }
.cj-prose h4 { font-size: 19px; }
.cj-prose strong, .cj-prose b { font-weight: 600; color: var(--text); }
.cj-prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.cj-prose a:hover { text-decoration-color: var(--brand-2); }
.cj-prose ul, .cj-prose ol { padding-left: 1.3em; }
.cj-prose ul { list-style: disc; }
.cj-prose ol { list-style: decimal; }
.cj-prose li::marker { color: var(--brand-2); }
.cj-prose li + li { margin-top: .4em; }
.cj-prose img { border-radius: 16px; }
.cj-prose blockquote { padding: 4px 0 4px 20px; border-left: 2px solid var(--brand); color: var(--text); }
.cj-prose pre, .cj-prose code { font-family: var(--mono); font-size: .86em; background: var(--surface); border-radius: 8px; }
.cj-prose code { padding: .12em .4em; }
.cj-prose pre { padding: 16px 18px; overflow-x: auto; box-shadow: inset 0 0 0 1px var(--line); }
.cj-prose pre code { padding: 0; background: none; }
.cj-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cj-prose th, .cj-prose td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); text-align: left; }
.cj-prose th { font-weight: 600; color: var(--text); }
.cj-prose hr { border: 0; border-top: 1px solid var(--line-2); }
.cj-prose figcaption, .wp-caption-text, .wp-element-caption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.cj-prose .alignwide, .cj-prose .alignfull { margin-inline: 0; }
.alignleft { float: left; margin: .3em 1.4em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.4em; }
.aligncenter { margin-inline: auto; }
.wp-block-image img { height: auto; }
.wp-block-button__link { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 14px; background: var(--brand); color: #fff !important; text-decoration: none !important; font-weight: 560; }
.cj-more__all { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 520; color: var(--brand-2); }
.cj-more__all svg { width: 15px; height: 15px; transition: translate .3s var(--spring); }
.cj-more__all:hover svg { translate: 3px 0; }

/* ---------- Article ---------- */
.cj-readbar { position: fixed; inset: 0 0 auto; z-index: 70; height: 3px; pointer-events: none; }
.cj-readbar i { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 70%, transparent); }
body.admin-bar .cj-readbar { top: 32px; }

.cj-ahero { position: relative; z-index: 2; isolation: isolate; padding: calc(var(--header-h) + clamp(28px, 4.5vw, 64px)) 0 0; }
.cj-ahero__inner, .cj-alayout { max-width: calc(1040px + var(--gutter) * 2); }
.cj-ahero__inner { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: start; }
.cj-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cj-crumbs li { display: flex; align-items: center; gap: 10px; }
.cj-crumbs li + li::before { content: "/"; color: var(--dim); }
.cj-crumbs a { transition: color .2s; }
.cj-crumbs a:hover { color: var(--text); }
.cj-crumbs li:last-child a { padding: 4px 10px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-2); }
.cj-ahero__title { max-width: 21ch; font-size: clamp(34px, 5vw, 62px); line-height: 1.04; text-wrap: balance; }
.cj-ahero__lede { max-width: 62ch; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--soft); }
.cj-ameta { display: flex; align-items: center; gap: 14px; }
.cj-ameta__photo { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--brand-line); }
.cj-ameta__photo img { width: 100%; height: 100%; object-fit: cover; }
.cj-ameta__by { font-size: 15px; color: var(--soft); }
.cj-ameta__by b { font-weight: 600; color: var(--text); }
.cj-ameta__by span { margin-left: 6px; color: var(--muted); }
.cj-ameta__facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.cj-ameta__facts > * { display: inline-flex; align-items: center; gap: 6px; }
.cj-ameta__facts > * + *::before { content: "·"; margin-right: 6px; color: var(--dim); }
.cj-ameta__facts svg { width: 14px; height: 14px; color: var(--brand-2); }
.cj-ahero__img { width: 100%; margin: 12px 0 0; }
.cj-ahero--plain { padding-bottom: clamp(28px, 3.5vw, 44px); border-bottom: 1px solid var(--line); }
.cj-ahero__img img { width: 100%; height: auto; border-radius: 24px; box-shadow: 0 0 0 1px var(--line), 0 40px 90px -40px rgba(0, 0, 0, .85); }

.cj-alayout { display: grid; grid-template-columns: 232px minmax(0, 720px); gap: clamp(40px, 5vw, 76px); padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(64px, 8vw, 112px); }
.cj-article--solo .cj-ahero__inner, .cj-article--solo .cj-alayout { max-width: calc(760px + var(--gutter) * 2); }
.cj-article--solo .cj-alayout { grid-template-columns: minmax(0, 1fr); }

/* Reading tools: text size + translate */
.cj-ahero > .cj-grid-bg, .cj-bhero > .cj-grid-bg { overflow: hidden; }
.cj-atools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cj-tool { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 11px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; font-weight: 520; color: var(--soft); cursor: pointer; transition: box-shadow .2s, color .2s, background-color .2s; }
.cj-tool:hover { box-shadow: inset 0 0 0 1px var(--brand-line); color: var(--text); }
.cj-tool:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cj-tool svg { width: 16px; height: 16px; color: var(--brand-2); }
.cj-tsize { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 13px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.cj-tsize .cj-tool { height: 32px; padding: 0 10px; border-radius: 9px; background: none; box-shadow: none; }
.cj-tsize .cj-tool:hover { background: var(--panel-2); }
.cj-tsize .cj-tool:disabled { opacity: .35; cursor: default; background: none; }
.cj-tsize__btn span { font-size: 15px; font-weight: 600; }
.cj-tsize__btn small { margin-left: 1px; font-size: 13px; font-weight: 600; color: var(--brand-2); }
.cj-tsize__btn[data-ts="1"] span { font-size: 18px; }
.cj-tsize__val { min-width: 46px; font-family: var(--mono); font-size: 12px; text-align: center; color: var(--muted); }
.cj-lang { position: relative; }
.cj-lang summary { list-style: none; }
.cj-lang summary::-webkit-details-marker { display: none; }
.cj-lang[open] summary { box-shadow: inset 0 0 0 1px var(--brand); color: var(--text); }
.cj-lang__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: min(420px, calc(100vw - 32px)); padding: 16px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.cj-bhero__side .cj-lang__panel { left: auto; right: 0; }
.cj-lang__head { margin-bottom: 10px; font-size: 13.5px; font-weight: 560; color: var(--muted); }
.cj-lang__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; max-height: min(320px, 50vh); overflow-y: auto; scrollbar-width: thin; }
.cj-lang__list a { display: block; padding: 8px 10px; border-radius: 9px; font-size: 14.5px; line-height: 1.3; color: var(--soft); transition: background-color .15s, color .15s; }
.cj-lang__list a:hover, .cj-lang__list a:focus-visible { background: var(--panel-2); color: var(--text); outline: none; }
.cj-lang__list li.is-yours { grid-column: 1 / -1; }
.cj-lang__list li.is-yours a { margin-bottom: 6px; background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line); color: var(--text); font-weight: 560; }
.cj-lang__list li.is-yours a::after { content: " · your language"; font-weight: 400; color: var(--muted); }
.cj-lang__note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cj-bhero__side { display: grid; justify-items: end; gap: 10px; }
.cj-bhero__side .cj-bsearch { width: 100%; }
@media (max-width: 760px) { .cj-bhero__side { justify-items: start; } .cj-bhero__side .cj-lang__panel { left: 0; right: auto; } }
@media (max-width: 560px) {
	.cj-atools { position: relative; justify-self: stretch; }
	.cj-atools .cj-lang { position: static; }
	.cj-atools .cj-lang__panel { left: 0; right: 0; width: auto; }
	.cj-lang__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Contents (desktop) */
.cj-toc__inner { position: sticky; top: calc(var(--header-h) + 28px); max-height: calc(100vh - var(--header-h) - 56px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; padding: 2px 6px 8px 0; }
.cj-toc__label { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cj-toc__label svg { width: 15px; height: 15px; color: var(--brand-2); }
.cj-toc__list { border-left: 1px solid var(--line-2); }
.cj-toc__list a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--muted); transition: color .2s, border-color .2s; }
.cj-toc__list a:hover { color: var(--text); }
.cj-toc__list a.is-active { border-left-color: var(--brand-2); color: var(--text); font-weight: 520; }
.cj-toc__list li.is-open > a { color: var(--text); }
.cj-toc__list ol { display: none; padding-bottom: 4px; }
.cj-toc__list li.is-open > ol { display: block; }
.cj-toc__list ol a { padding-left: 30px; font-size: 13.5px; }
.cj-toc__foot { display: grid; justify-items: start; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cj-toc__progress { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cj-toc__progress span { color: var(--text); }
.cj-toc__top { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); transition: color .2s; }
.cj-toc__top svg { width: 14px; height: 14px; }
.cj-toc__top:hover { color: var(--text); }

/* Contents (phones and tablets) */
.cj-tocm { display: none; margin-bottom: 30px; overflow: hidden; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.cj-tocm summary { display: flex; align-items: center; gap: 10px; padding: 15px 18px; font-weight: 560; cursor: pointer; list-style: none; }
.cj-tocm summary::-webkit-details-marker { display: none; }
.cj-tocm summary svg { flex: none; width: 18px; height: 18px; color: var(--brand-2); }
.cj-tocm summary em { margin-left: auto; font-family: var(--mono); font-size: 12px; font-style: normal; color: var(--muted); }
.cj-tocm summary svg:last-child { color: var(--muted); transition: rotate .3s var(--spring); }
.cj-tocm[open] summary svg:last-child { rotate: 45deg; }
.cj-tocm ol { display: grid; padding: 8px 18px 14px; border-top: 1px solid var(--line); counter-reset: toc; }
.cj-tocm a { display: flex; gap: 12px; padding: 9px 0; font-size: 15px; line-height: 1.4; color: var(--soft); }
.cj-tocm a::before { flex: none; padding-top: 2px; counter-increment: toc; content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--brand-2); }

/* Article text */
.cj-prose--article { padding: 0; font-size: calc(18px * var(--cj-ts, 1)); line-height: 1.78; }
.cj-prose--article > :first-child { margin-top: 0; }
.cj-prose--article > p:first-child { font-size: 1.12em; line-height: 1.65; color: var(--text); }
.cj-prose--article h2, .cj-prose--article h3 { scroll-margin-top: 16px; } /* adds to the page's scroll-padding for the header */
.cj-prose--article h2 { margin-top: 2.3em; font-size: calc(clamp(26px, 2.6vw, 34px) * var(--cj-ts, 1)); }
.cj-prose--article h3 { margin-top: 1.9em; font-size: calc(clamp(20px, 2vw, 23px) * var(--cj-ts, 1)); }
.cj-prose--article :is(h2, h3) + * { margin-top: .75em; }
.cj-anchor { margin-left: .3em; font-weight: 400; color: var(--dim); text-decoration: none !important; opacity: 0; transition: opacity .2s, color .2s; }
.cj-prose--article :is(h2, h3):hover .cj-anchor, .cj-anchor:focus-visible { opacity: 1; }
.cj-anchor:hover { color: var(--brand-2); }
.cj-anchor { position: relative; }
.cj-anchor.is-copied { opacity: 1; color: var(--good); }
.cj-anchor.is-copied::after { content: "Link copied"; position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; padding: 4px 9px; border-radius: 8px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0; white-space: nowrap; color: var(--text); }
@media (hover: none) { .cj-anchor { display: none; } }
.cj-prose--article ul { padding-left: 0; list-style: none; }
.cj-prose--article ul > li { position: relative; padding-left: 26px; }
.cj-prose--article ul > li::before { content: ""; position: absolute; top: .72em; left: 6px; width: 7px; height: 7px; border-radius: 2px; background: var(--brand-2); rotate: 45deg; }
.cj-prose--article ol:not([start]):not([reversed]) { padding-left: 0; list-style: none; counter-reset: cj-li; }
.cj-prose--article ol:not([start]):not([reversed]) > li { position: relative; padding-left: 38px; counter-increment: cj-li; }
.cj-prose--article ol:not([start]):not([reversed]) > li::before { content: counter(cj-li); position: absolute; top: .22em; left: 0; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-2); font-family: var(--mono); font-size: 12.5px; font-weight: 600; line-height: 1; }
.cj-prose--article li + li { margin-top: .5em; }

/* "How to fix it:" + list → one box */
.cj-prose--article p:has(> strong:only-child):has(+ ul, + ol) {
	margin-top: 1.5em; padding: 16px 22px 2px; border-radius: 18px 18px 0 0;
	background: color-mix(in srgb, var(--brand) 8%, var(--surface));
	box-shadow: inset 1px 0 0 var(--brand-line), inset -1px 0 0 var(--brand-line), inset 0 1px 0 var(--brand-line);
	font-family: var(--mono); font-size: .7em; letter-spacing: .06em; text-transform: uppercase;
}
.cj-prose--article p:has(> strong:only-child):has(+ ul, + ol) strong { color: var(--brand-2); }
.cj-prose--article p:has(> strong:only-child) + :is(ul, ol) {
	margin-top: 0; padding: 10px 22px 18px; border-radius: 0 0 18px 18px;
	background: color-mix(in srgb, var(--brand) 8%, var(--surface));
	box-shadow: inset 1px 0 0 var(--brand-line), inset -1px 0 0 var(--brand-line), inset 0 -1px 0 var(--brand-line);
	font-size: .92em;
}
.cj-prose--article p:has(> strong:only-child) + ul > li { padding-left: 24px; }

/* Tables */
.cj-prose--article :is(.wp-block-table, .cj-table) { margin: 1.8em 0 0; overflow-x: auto; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); scrollbar-width: thin; }
.cj-prose--article table, .cj-prose--article .wp-block-table table { width: 100%; min-width: 540px; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; table-layout: auto; font-size: .84em; line-height: 1.5; }
.cj-prose--article :is(th, td), .cj-prose--article .wp-block-table :is(th, td) { padding: 14px 18px; border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cj-prose--article thead, .cj-prose--article .wp-block-table thead { border: 0; }
.cj-prose--article thead th, .cj-prose--article .wp-block-table thead th { background: color-mix(in srgb, var(--brand) 12%, var(--panel)); border-bottom: 1px solid var(--line-2); font-size: .87em; font-weight: 600; letter-spacing: .01em; color: var(--text); }
.cj-prose--article tbody tr:last-child > * { border-bottom: 0; }
.cj-prose--article tbody td:first-child { font-weight: 520; color: var(--text); }
.cj-prose--article tbody tr { transition: background-color .2s; }
.cj-prose--article tbody tr:hover { background: rgba(140, 170, 255, .045); }
.cj-prose--article .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: rgba(140, 170, 255, .03); }
.cj-prose--article .wp-block-table figcaption { margin: 0; padding: 10px 18px 14px; border-top: 1px solid var(--line); }

/* Quotes, images, FAQ */
.cj-prose--article blockquote { margin-top: 1.8em; padding: 18px 24px; border-left: 3px solid var(--brand); border-radius: 0 16px 16px 0; background: var(--surface); font-size: 1.04em; color: var(--text); }
.cj-prose--article blockquote cite { display: block; margin-top: 8px; font-size: .78em; font-style: normal; color: var(--muted); }
.cj-prose--article figure:not(.wp-block-table) { margin-top: 1.8em; }
.cj-prose--article img.is-zoomable { cursor: zoom-in; }
.cj-prose--article :is(#sources, #references) + :is(ul, ol) { font-size: .84em; color: var(--muted); }
.cj-faqa { display: grid; gap: 10px; margin-top: 1.1em; }
.cj-faqa details { border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .25s; }
.cj-faqa details[open] { box-shadow: inset 0 0 0 1px var(--brand-line); }
.cj-faqa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; list-style: none; }
.cj-faqa summary::-webkit-details-marker { display: none; }
.cj-faqa summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 18px; line-height: 1; color: var(--brand-2); transition: rotate .3s var(--spring); }
.cj-faqa details[open] summary::after { rotate: 45deg; }
.cj-faqa summary h3 { margin: 0; font-size: .97em; line-height: 1.35; }
.cj-faqa summary .cj-anchor { display: none; }
.cj-faqa__a { padding: 0 20px 18px; font-size: .92em; }
.cj-faqa__a > * + * { margin-top: .8em; }
.cj-prose .schema-faq-section { margin-top: 10px; padding: 16px 20px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.cj-prose .schema-faq-question { display: block; font-size: 17.5px; color: var(--text); }
.cj-prose .schema-faq-answer { margin: 6px 0 0; }

/* End of article */
.cj-aend { display: grid; gap: 22px; margin-top: clamp(48px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--line-2); }
.cj-aend__label { margin-bottom: 12px; font-weight: 560; color: var(--text); }
.cj-share { display: flex; flex-wrap: wrap; gap: 8px; }
.cj-share__btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; font-weight: 520; color: var(--soft); transition: background-color .2s, color .2s, box-shadow .2s; }
.cj-share__btn svg { width: 16px; height: 16px; }
.cj-share__btn:hover { background: var(--panel); box-shadow: inset 0 0 0 1px var(--brand-line); color: var(--text); }
.cj-share__btn--copy { background: var(--brand); box-shadow: none; color: #fff; }
.cj-share__btn--copy:hover { background: color-mix(in oklab, var(--brand) 86%, #fff); box-shadow: none; color: #fff; }
.cj-share__btn--copy.is-done { background: color-mix(in srgb, var(--good) 22%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 50%, transparent); color: var(--good); }
.cj-share__btn[hidden] { display: none; }

/* Keep reading */
.cj-keep { padding: clamp(56px, 7vw, 96px) 0 var(--section); border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-2), var(--bg) 70%); }
.cj-keep > .cj-wrap { max-width: calc(1040px + var(--gutter) * 2); }
.cj-keep__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cj-keep__title { font-size: clamp(26px, 3vw, 36px); font-weight: 560; letter-spacing: -.03em; }

/* Image zoom */
.cj-zoom { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 4vmin; border: 0; background: transparent; }
.cj-zoom[open] { display: grid; place-items: center; }
.cj-zoom::backdrop { background: rgba(3, 7, 19, .9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cj-zoom img { max-width: 100%; max-height: 92vh; width: auto; height: auto; border-radius: 14px; cursor: zoom-out; }
.cj-zoom__close { position: fixed; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(13, 26, 56, .85); box-shadow: inset 0 0 0 1px var(--line-2); color: #fff; }
.cj-zoom__close svg { width: 18px; height: 18px; }

@media (max-width: 1100px) {
	.cj-ahero__inner, .cj-alayout { max-width: calc(760px + var(--gutter) * 2); }
	.cj-alayout { grid-template-columns: minmax(0, 1fr); }
	.cj-toc { display: none; }
	.cj-tocm { display: block; }
}
@media (max-width: 782px) { body.admin-bar .cj-readbar { top: 46px; } }
@media (max-width: 560px) {
	.cj-bcard--row { gap: 14px; padding: 10px; }
	.cj-bcard--row .cj-bcard__media { width: 38%; border-radius: 12px; }
	.cj-bcard--row .cj-bcard__title { font-size: 15.5px; }
	.cj-bcard--feat .cj-bcard__body { padding: 20px; }
	.cj-bcard__new { top: 8px; left: 8px; padding: 3px 7px; font-size: 9.5px; }
	.cj-blog__all { padding: 16px 16px 16px 20px; }
}
@media (max-width: 640px) {
	.cj-ahero__img img { border-radius: 18px; }
	.cj-ameta__by span { display: none; }
	.cj-prose--article { font-size: calc(17px * var(--cj-ts, 1)); }
	.cj-prose--article > p:first-child { font-size: 1.08em; }
	.cj-prose--article p:has(> strong:only-child):has(+ ul, + ol) { padding-inline: 16px; }
	.cj-prose--article p:has(> strong:only-child) + :is(ul, ol) { padding-inline: 16px; font-size: .94em; }
	/* Tables become one card per row */
	.cj-prose--article .is-stack { overflow: visible; border-radius: 0; background: none; box-shadow: none; }
	.cj-prose--article .is-stack table { display: block; min-width: 0; }
	.cj-prose--article .is-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.cj-prose--article .is-stack tbody { display: grid; gap: 10px; }
	.cj-prose--article .is-stack tr { display: block; padding: 14px 16px 6px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
	.cj-prose--article .is-stack tbody tr:hover { background: var(--surface); }
	.cj-prose--article .is-stack td { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .85em; }
	.cj-prose--article .is-stack td::before { content: attr(data-label); padding-top: 2px; font-family: var(--mono); font-size: .8em; line-height: 1.4; color: var(--muted); }
	.cj-prose--article .is-stack td:first-child { display: block; padding: 0 0 10px; font-size: 1.1em; font-weight: 600; color: var(--text); }
	.cj-prose--article .is-stack td:first-child::before { display: none; }
	.cj-prose--article .is-stack tr > td:last-child { border-bottom: 0; }
	.cj-prose--article .is-stack figcaption { padding: 10px 2px 0; border: 0; }
	.cj-share__btn { height: 40px; padding: 0 14px; }
}

/* ---------- Service pages ---------- */


/* Homepage service rows: link to the service page */
.cj-svc__links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.cj-link--quiet { color: var(--muted); }
.cj-link--quiet:hover { color: var(--text); }

/* Hero */
.cj-shero { position: relative; z-index: 2; isolation: isolate; padding: calc(var(--header-h) + clamp(28px, 4.5vw, 64px)) 0 clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--line); }
.cj-shero > .cj-grid-bg { overflow: hidden; }
.cj-shero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 80px); align-items: center; }
.cj-shero--hub .cj-shero__grid { grid-template-columns: minmax(0, 1fr); }
.cj-shero__main { display: grid; justify-items: start; gap: 22px; }
.cj-shero__title { max-width: 17ch; font-size: clamp(38px, 5.4vw, 74px); line-height: 1.02; }
.cj-shero__title--hub { max-width: 13ch; font-size: clamp(46px, 7.6vw, 108px); font-stretch: 115%; line-height: .94; letter-spacing: -.05em; }
.cj-shero__lede { max-width: 58ch; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--soft); }
.cj-shero__main .cj-btns { margin-top: 2px; }
.cj-shero .cj-crumbs li:last-child span { padding: 4px 10px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-2); }
.cj-shero__card { width: 100%; max-width: 340px; justify-self: end; }
.cj-shero__for { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--brand-soft); font-size: 14px; font-weight: 560; line-height: 1.3; color: var(--text); }
.cj-shero__for svg { flex: none; width: 18px; height: 18px; color: var(--brand-2); }

/* Page text extras */
.cj-toc__foot .cj-toc__hire { width: 100%; justify-content: space-between; }
.cj-prose--svc ol:not([start]):not([reversed]) { display: grid; gap: 10px; }
.cj-prose--svc ol:not([start]):not([reversed]) > li { margin: 0; padding: 16px 18px 16px 62px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cj-prose--svc ol:not([start]):not([reversed]) > li::before { content: counter(cj-li, decimal-leading-zero); top: 15px; left: 16px; width: 32px; height: 32px; border-radius: 10px; font-family: var(--mono); font-size: 12px; }
.cj-shire {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 44px; padding: 24px 26px;
	border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%), var(--surface);
	box-shadow: inset 0 0 0 1px var(--brand-line);
}
.cj-shire__title { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.cj-shire__text { margin-top: 4px; max-width: 44ch; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* Sections after the text */
.cj-section.cj-ssec { padding-block: clamp(52px, 6.5vw, 96px); }
.cj-section.cj-ssec + .cj-section.cj-ssec { padding-top: 0; }
.cj-ssec--list { padding: clamp(40px, 5vw, 72px) 0 clamp(52px, 6.5vw, 96px); }
.cj-ssec .cj-head { margin-bottom: clamp(26px, 3.4vw, 44px); }

.cj-sflow { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 14px; }
.cj-sflow__step { display: grid; align-content: start; gap: 10px; padding: 22px 20px 24px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cj-sflow__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cj-sflow__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); font-family: var(--mono); font-size: 12.5px; color: var(--brand-2); }
.cj-sflow__step:first-child .cj-sflow__n { background: var(--brand); color: #fff; }
.cj-sflow__when { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.cj-sflow__title { margin-top: 6px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.cj-sflow__text { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

.cj-sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cj-ssec .cj-head__side:not(:has(.cj-head__intro)) { justify-items: end; align-self: end; }
.cj-svcpage ~ .cj-keep > .cj-wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); }

.cj-scards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cj-scards > li { display: grid; }
.cj-scard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s, translate .45s var(--spring); }
.cj-scard:hover { box-shadow: inset 0 0 0 1px var(--brand-line); translate: 0 -3px; }
.cj-scard__top { display: flex; align-items: center; justify-content: space-between; }
.cj-scard__ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-2); transition: background-color .3s, color .3s; }
.cj-scard__ic svg { width: 22px; height: 22px; }
.cj-scard:hover .cj-scard__ic { background: var(--brand); color: #fff; }
.cj-scard__n { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.cj-scard__t { margin-top: 8px; font-size: 22px; font-weight: 560; font-stretch: 106%; line-height: 1.2; letter-spacing: -.025em; color: var(--text); }
.cj-scard__x { font-size: 15px; line-height: 1.6; color: var(--muted); }
.cj-scard__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 15px; font-weight: 560; color: var(--brand-2); }
.cj-scard__more svg, .cj-scard__go svg { width: 16px; height: 16px; transition: translate .3s var(--spring); }
.cj-scard:hover .cj-scard__more svg, .cj-scard:hover .cj-scard__go svg { translate: 4px 0; }
.cj-scards--sm { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cj-scards--sm .cj-scard { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px 14px 14px; border-radius: 18px; }
.cj-scards--sm .cj-scard__ic { width: 40px; height: 40px; border-radius: 12px; }
.cj-scards--sm .cj-scard__ic svg { width: 19px; height: 19px; }
.cj-scards--sm .cj-scard__t { margin: 0; font-size: 15.5px; font-weight: 560; line-height: 1.3; letter-spacing: -.01em; }
.cj-scard__go { flex: none; margin-left: auto; color: var(--muted); transition: color .2s; }
.cj-scard:hover .cj-scard__go { color: var(--brand-2); }

.cj-spoints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; margin-top: clamp(28px, 3.5vw, 44px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); }
.cj-spoints li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.cj-spoints b { display: block; margin-bottom: 3px; font-size: 16px; font-weight: 600; color: var(--text); }
.cj-spoints__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--brand-2); }
.cj-spoints__ic svg { width: 19px; height: 19px; }

@media (max-width: 1060px) {
	.cj-shero__grid { grid-template-columns: minmax(0, 1fr); }
	.cj-shero__card { justify-self: start; max-width: 420px; }
	.cj-sflow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cj-scards, .cj-scards--sm, .cj-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cj-spoints { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.cj-sflow { grid-template-columns: minmax(0, 1fr); }
	.cj-scards, .cj-sgrid { grid-template-columns: minmax(0, 1fr); }
	.cj-shero__card { display: none; }
	.cj-shire { padding: 20px; }
	.cj-shire .cj-btn { width: 100%; }
	.cj-prose--svc ol:not([start]):not([reversed]) > li { padding: 14px 16px 14px 56px; }
	.cj-prose--svc ol:not([start]):not([reversed]) > li::before { left: 12px; top: 13px; }
}
@media (max-width: 520px) {
	.cj-scards--sm { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Keyframes ---------- */
@keyframes cj-rise { from { opacity: 0; translate: 0 18px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: none; } }
@keyframes cj-scan-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(-12% -6% -22% -6%); } }
@keyframes cj-scan-line { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes cj-beam { from { translate: 0 0; } to { translate: 0 calc(100vh + 400px); } }
@keyframes cj-marquee { to { translate: -50% 0; } }
@keyframes cj-blink { 50% { opacity: 0; } }
@keyframes cj-ping { 0% { scale: 1; opacity: .7; } 80%, 100% { scale: 2.8; opacity: 0; } }
@keyframes cj-spin { to { rotate: 360deg; } }
@keyframes cj-orbit { to { --cj-a: 360deg; } }
@keyframes cj-bub-in { from { opacity: 0; translate: 0 10px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes cj-dot { 0%, 60%, 100% { translate: 0 0; opacity: .5; } 30% { translate: 0 -4px; opacity: 1; } }
@keyframes cj-mark { from { left: 0; opacity: 0; } }
@keyframes cj-shot-in { from { opacity: 0; translate: 24px 0; } }
@keyframes cj-pop { from { opacity: 0; scale: .95; translate: 0 10px; } }
@keyframes pq-type { to { clip-path: inset(0 0 0 0); } }
@keyframes pq-in { to { opacity: 1; translate: 0 0; } }
@keyframes pq-pop { to { opacity: 1; scale: 1; } }
@keyframes fl-in { to { opacity: 1; translate: 0 0; } }
@keyframes fl-pop { to { opacity: 1; scale: 1; } }
@keyframes fl-show { to { opacity: 1; } }
@keyframes fl-hide { to { opacity: 0; } }
@keyframes fl-sel { to { background: rgba(13, 153, 255, .28); color: #fff; } }
@keyframes fl-cur-me { from { translate: 90px 110px; opacity: 0; } 25% { opacity: 1; } to { translate: 0 0; opacity: 1; } }
@keyframes fl-cur-you { from { translate: -170px -130px; opacity: 0; } 25% { opacity: 1; } to { translate: 0 0; opacity: 1; } }
@keyframes fl-click { 50% { scale: .82; } }
@keyframes fl-cur-off { to { translate: 34px 26px; } }
@keyframes fl-approved { to { background: var(--good); color: #04221a; } }
@keyframes fl-fill { to { clip-path: inset(0 0 0 0); } }
@keyframes cj-march { to { background-position: 12px 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
	.cj-speed__dials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cj-speed__verdict { grid-column: 1 / -1; }
}

@media (max-width: 1060px) {
	:root { --header-h: 66px; }
	.cj-burger { display: grid; }
	.cj-header__hire { margin-left: auto; }
	.cj-nav {
		position: fixed; inset: var(--header-h) 0 0; z-index: -1; flex-direction: column; justify-content: space-between; gap: 32px;
		padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom)); background: var(--bg);
		opacity: 0; visibility: hidden; translate: 0 -12px; transition: opacity .3s, translate .45s var(--ease), visibility 0s .45s;
	}
	html.is-menu-open { overflow: hidden; }
	html.is-menu-open .cj-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--line); }
	html.is-menu-open .cj-nav { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
	.cj-nav { overflow-y: auto; overscroll-behavior: contain; }
	.cj-hero__grid { grid-template-columns: minmax(0, 1fr) 270px; gap: 32px; }
	.cj-ticket { max-width: 420px; }
	.cj-head { grid-template-columns: minmax(0, 1fr); }
	.cj-lab { grid-template-columns: minmax(0, 1fr); }
	.cj-flow__main { grid-template-columns: minmax(0, 1fr); }
	.cj-about { grid-template-columns: minmax(0, 1fr); }
	.cj-idcard { margin-inline: auto; max-width: 380px; }
	.cj-faq { grid-template-columns: minmax(0, 1fr); }
	.cj-chatbox { position: relative; top: 0; }
	.cj-blog { grid-template-columns: minmax(0, 1fr); }
	.cj-blog--one { grid-template-columns: minmax(0, 1fr); }
	.cj-nav__new { font-size: 11px; padding: 3px 9px 3px 8px; }
	.cj-footer__top { grid-template-columns: minmax(0, 1fr); }
	.cj-speed__grid { grid-template-columns: minmax(0, 1fr); }
	.cj-explain { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
	.cj-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.cj-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(170px, auto); }
	.cj-tile--feat { grid-row: auto; min-height: 380px; }
	.cj-perks { grid-template-columns: minmax(0, 1fr); }
	.cj-perk, .cj-perk:nth-child(2), .cj-perk:nth-child(3) { grid-column: auto; }
	.cj-svc__head { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 14px; }
	.cj-svc__tags { display: none; }
	.cj-svc__inner { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 58px; }
	.cj-svc__text { padding-bottom: 22px; }
	.cj-svc__img { max-width: 420px; }
	.cj-end__row { grid-template-columns: minmax(0, 1fr); }
	.cj-orb { justify-self: start; }
}

@media (max-width: 760px) {
	.cj-logo img, .cj-logo__img { height: var(--logo-h-m, 28px); }
	.cj-flow { border-radius: 24px; }
	.cj-flow__run { display: none; }
	.cj-flow__toggle { margin-left: auto; }
	.cj-branch { padding: 0 12px; font-size: 12px; }
	.cj-rail__line { top: 53px; }
	.cj-station__btn { padding-inline: 0; }
	.cj-station__ic { width: 44px; height: 44px; border-radius: 14px; }
	.cj-station__ic > svg { width: 20px; height: 20px; }
	.cj-station.is-current .cj-station__ic::before { inset: -7px; border-radius: 18px; }
	.cj-station__when { padding: 0 4px; font-size: 9.5px; }
	.cj-station__name { margin-top: 10px; font-size: 12.5px; }
	.cj-station__sub { display: none; }
	.cj-station__ok { top: -6px; right: -6px; width: 18px; height: 18px; }
	.cj-flow__stage { height: 400px; }
	.fl-sc { padding: 16px; }
	.fl-sc--build, .fl-sc--speed, .fl-sc--launch, .fl-sc--audit { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 14px; }
	.fl-brief .fl-msg > p { font-size: 13px; }
	.fl-fig { grid-template-columns: minmax(0, 1fr); height: auto; }
	.fl-fig__layers { display: none; }
	.fl-term { padding: 12px 14px; font-size: 11px; line-height: 1.85; }
	.fl-term__done { display: none; }
	.fl-devs { gap: 10px; }
	.fl-dev--phone { width: 40px; height: 76px; }
	.fl-dev--tab { width: 70px; height: 94px; }
	.fl-dev--desk { width: 128px; height: 82px; }
	.fl-speed__dial .cj-dial { width: 200px; }
	.fl-speed__dial .cj-dial__read b { font-size: 46px; }
	.fl-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	.fl-vitals li { padding: 8px 10px; }
	.fl-vitals small { display: none; }
	.fl-live { height: 200px; }
	.fl-hand { gap: 8px; padding: 12px 14px; }
	.fl-hand ul { display: none; }
	.fl-old { height: 190px; }
	.fl-old__slider { height: 60px; }
	.fl-audit { grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
	.fl-audit .cj-dial { width: 120px; }
	.fl-audit .cj-dial__read b { font-size: 30px; }
	.fl-audit .cj-dial__read small { display: none; }
	.fl-bad li { padding: 6px 8px; font-size: 11.5px; }
	.fl-diff { font-size: 11px; }
	.fl-diff li { grid-template-columns: 28px 18px minmax(0, 1fr); }
	.cj-header__hire { display: none; }
	.cj-burger { margin-left: auto; }
	.cj-steps { padding: 16px 12px 18px; border-radius: 20px; }
	.cj-steps__top { padding-inline: 4px; }
	.cj-steps__more { font-size: 13.5px; }
	.cj-rail--mini .cj-rail__line { top: 19px; }
	.cj-rail--mini .cj-station__ic { width: 38px; height: 38px; border-radius: 12px; }
	.cj-rail--mini .cj-station__ic > svg { width: 17px; height: 17px; }
	.cj-rail--mini .cj-station__name { font-size: 12px; }
	.cj-rail--mini .cj-station__sub { display: none; }
	.cj-facts { grid-template-columns: minmax(0, 1fr); }
	.cj-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
	.cj-facts dd { margin: 0; text-align: right; }
	.cj-reviewgrid { columns: 1; }
	.cj-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cj-footer__col:last-child { grid-column: 1 / -1; }
	.cj-gallery__nav .cj-round { display: none; }
	.cj-gallery__nav { margin-left: 0; }
	.cj-speed__dials { grid-template-columns: minmax(0, 1fr); }
	.cj-bolt__btn span { display: none; }
	.cj-bolt__btn { width: 50px; height: 50px; padding: 0; justify-content: center; border-radius: 50%; }
	.cj-bolt { right: 14px; bottom: 14px; }
	.cj-hirepill {
		position: fixed; left: 50%; bottom: 14px; z-index: 59; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); height: 50px; padding: 0 16px 0 6px;
		border-radius: 99px; background: var(--brand); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 18px 40px -12px rgba(0, 0, 0, .8);
		translate: -50% 160%; transition: translate .55s var(--spring);
	}
	.cj-hirepill.is-in { translate: -50% 0; }
	html.is-menu-open .cj-hirepill.is-in { translate: -50% 160%; }
	html.is-menu-open .cj-bolt { translate: 0 20px; opacity: 0; pointer-events: none; }
	.cj-hirepill img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; aspect-ratio: 1; max-width: none; }
	.cj-hirepill span { display: grid; min-width: 0; line-height: 1.15; }
	.cj-hirepill span, .cj-hirepill small { overflow: hidden; text-overflow: ellipsis; }
	.cj-hirepill svg { flex: none; }
	.cj-hirepill small { font-size: 11.5px; font-weight: 500; opacity: .8; }
	.cj-hirepill svg { width: 16px; height: 16px; }
	.cj-term { flex-wrap: wrap; padding: 10px; gap: 4px 10px; }
	.cj-term .cj-term__label { padding-left: 6px; }
	.cj-term input { flex: 1 1 140px; }
	.cj-term .cj-btn { flex: 1 1 100%; }
	.cj-term--sm .cj-btn { flex: 0 0 auto; }
}

@media (max-width: 560px) {
	.cj-section { padding-block: clamp(72px, 18vw, 96px); }
	.cj-ticket { max-width: none; }
	.cj-hero__main .cj-btns .cj-btn { flex: 1 1 auto; }
	.cj-bento { gap: 10px; }
	.cj-tile { padding: 18px; border-radius: 20px; }
	.cj-tile--feat { grid-column: 1 / -1; padding: 22px; min-height: 360px; }
	.cj-tile__big { font-size: 30px; }
	.cj-tile__label { font-size: 14px; }
	.cj-svc__head { grid-template-columns: 30px minmax(0, 1fr) 40px; gap: 10px; }
	.cj-svc__plus { width: 40px; height: 40px; }
	.cj-svc__inner { padding-left: 0; }
	.cj-svc__head:hover .cj-svc__title, .cj-svc__row.is-open .cj-svc__title { translate: 0 0; }
	.cj-perk__demo { height: 230px; padding: 18px; }
	.pe-page { grid-template-columns: minmax(0, 1fr) 84px; padding: 16px 14px; }
	.pe-h { font-size: 16px; }
	.cj-quote blockquote p { font-size: 25px; }
	.cj-review, .cj-rated { padding: 22px; }
	.cj-speed__metrics, .cj-speed__fixes, .cj-speed__verdict { padding: 20px; }
	.cj-speed__console { padding: 20px; font-size: 13px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
	.cj-beam { display: none; }
	.cj-toolbelt__track, .cj-orb__ring, .cj-bolt__btn::before { animation: none !important; }
	.cj-speed__steps li.is-on::before { animation: none !important; border-right-color: var(--brand-2); }
}


/* ---------- Theme switch ---------- */
.cj-on-light { display: none !important; }
html[data-theme="light"] .cj-on-light { display: block !important; }
html[data-theme="light"] .cj-on-dark { display: none !important; }
.cj-logo--darken { filter: brightness(0) saturate(100%); opacity: .88; }
.cj-theme { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line); color: var(--soft); transition: box-shadow .2s, color .2s, background-color .2s; }
.cj-theme:hover { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.cj-theme:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cj-theme > span { grid-area: 1 / 1; display: grid; transition: opacity .3s, rotate .5s var(--spring), scale .3s var(--ease); }
.cj-theme svg { width: 18px; height: 18px; }
html[data-theme="dark"] .cj-theme__moon, html[data-theme="light"] .cj-theme__sun { opacity: 0; rotate: -90deg; scale: .5; }
.cj-themes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line); }
.cj-themes button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: var(--muted); transition: background-color .2s, color .2s; }
.cj-themes button svg { width: 15px; height: 15px; }
.cj-themes button:hover { color: var(--text); }
.cj-themes button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); }
.cj-themes button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Switching: everything changes in one go (no element fades on its own), and the page cross-fades once. */
html.cj-theme-swap *, html.cj-theme-swap *::before, html.cj-theme-swap *::after { transition: none !important; }
/* The new colours spread out in a circle from the button you pressed. */
html.cj-theme-vt .cj-header, html.cj-theme-vt .cj-topics { view-transition-name: none !important; }
html.cj-theme-vt::view-transition-old(root), html.cj-theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (max-width: 1060px) {
	.cj-theme { margin-left: auto; }
	.cj-theme + .cj-header__hire { margin-left: 0; }
}
@media (max-width: 760px) {
	.cj-theme { width: 44px; height: 44px; border-radius: 12px; margin-right: -10px; box-shadow: inset 0 0 0 1px var(--line-2); }
	.cj-theme ~ .cj-burger { margin-left: 0; }
}
html[data-theme="light"].is-menu-open .cj-header.cj-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Light theme: details ---------- */

/* Soft shadows give cards depth on a light page (dark mode uses glowing outlines instead). */
html[data-theme="light"] {
	--lift: 0 1px 2px rgba(16, 30, 70, .05), 0 12px 30px -18px rgba(16, 30, 70, .2);
	--lift-hi: 0 2px 4px rgba(16, 30, 70, .05), 0 26px 50px -26px rgba(16, 30, 70, .32);
}

/* A few parts stay dark in both themes: photos with text on them, code windows and image overlays. */
html[data-theme="light"] :is(.cj-tile--feat, .fl-term, .fl-diff, .cj-shot__no, .cj-shot__badge, .cj-zoom__close) {
	color-scheme: dark;
	--brand-2: color-mix(in oklab, var(--brand) 45%, #67e8f9);
	--brand-soft: color-mix(in srgb, var(--brand) 14%, transparent);
	--brand-line: color-mix(in srgb, var(--brand) 45%, transparent);
	--bg: #050b18;
	--bg-2: #071024;
	--surface: #0a1530;
	--panel: #0d1a38;
	--panel-2: #112148;
	--line: rgba(140, 170, 255, .10);
	--line-2: rgba(140, 170, 255, .18);
	--grid: rgba(120, 155, 255, .07);
	--text: #eef3ff;
	--soft: #c4cfea;
	--muted: #8a98bd;
	--dim: #5d6b90;
	--violet: #8b7dff;
	--cyan: #67e8f9;
	--good: #34d399;
	--ok: #fbbf24;
	--poor: #fb7185;
	--shadow: 0 30px 80px -30px rgba(10, 20, 50, .55);
	color: var(--text);
}
html[data-theme="light"] :is(.fl-term, .fl-diff) { box-shadow: inset 0 0 0 1px rgba(140, 170, 255, .16), 0 24px 44px -26px rgba(16, 30, 70, .5); }

/* Cards: white with a hairline and a soft shadow */
html[data-theme="light"] :where(.cj-tile, .cj-perk, .cj-review, .cj-bcard, .cj-lab, .cj-flow, .cj-speed__dial, .cj-speed__metrics, .cj-speed__fixes, .cj-explain li, .cj-bempty, .cj-toolbelt li, .cj-faq__q, .cj-seo__body, .cj-seo__dial, .cj-scard, .cj-sflow__step) { box-shadow: inset 0 0 0 1px var(--line), var(--lift); }
html[data-theme="light"] .cj-scard:hover { box-shadow: inset 0 0 0 1px var(--brand-line), var(--lift-hi); }
html[data-theme="light"] .cj-prose--svc ol:not([start]):not([reversed]) > li { box-shadow: inset 0 0 0 1px var(--line), var(--lift); }
html[data-theme="light"] .cj-shire { box-shadow: inset 0 0 0 1px var(--brand-line), var(--lift); }
html[data-theme="light"] .cj-tile:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--lift-hi); }
html[data-theme="light"] .cj-bcard:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t, var(--brand)) 45%, transparent), var(--lift-hi); }
html[data-theme="light"] .cj-faq__q:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 50%, transparent), var(--lift); }
html[data-theme="light"] .cj-faq__q[aria-pressed="true"] { box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--brand) 70%, transparent); }
html[data-theme="light"] .cj-speed__dial.is-on { box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent), var(--lift); }
html[data-theme="light"] .cj-ticket {
	background: linear-gradient(165deg, color-mix(in srgb, var(--brand) 9%, transparent), transparent 46%), var(--surface);
	box-shadow: inset 0 0 0 1px var(--line), var(--lift-hi);
}
html[data-theme="light"] .cj-ticket__sheen { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(46, 107, 255, .07), transparent 45%); }
html[data-theme="light"] .cj-chatbox { box-shadow: inset 0 0 0 1px var(--line), var(--lift-hi); }

/* Buttons, chips and pills sit on white */
html[data-theme="light"] :where(.cj-btn--ghost, .cj-badge, .cj-rating, .cj-filter, .cj-round, .cj-shot__go, .cj-svc__plus, .cj-tool, .cj-tsize, .cj-burger, .cj-theme, .cj-flow__toggle, .cj-topic, .cj-bsearch, .cj-pager .page-numbers, .fl-files span) { background-color: #fff; }
html[data-theme="light"] .cj-btn--ghost { box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(16, 30, 70, .05); }
html[data-theme="light"] .cj-btn--ghost:hover { background-color: #f3f6fd; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent); }
html[data-theme="light"] .cj-btn--brand { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 26px -12px color-mix(in srgb, var(--brand) 70%, transparent); }
html[data-theme="light"] .cj-btn--brand:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 16px 32px -12px color-mix(in srgb, var(--brand) 80%, transparent); }

/* Calmer background glow */
html[data-theme="light"] .cj-grid-bg::before { background: radial-gradient(circle, color-mix(in srgb, var(--brand) 15%, transparent), transparent 62%); }
html[data-theme="light"] .cj-grid-bg::after { background: radial-gradient(circle, rgba(109, 92, 246, .08), transparent 60%); }
html[data-theme="light"] .cj-beam { opacity: .35; }

/* Header, footer and floating buttons */
html[data-theme="light"] .cj-nav__bar { background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(16, 30, 70, .04); }
html[data-theme="light"] .cj-nav__pill { background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -6px rgba(16, 30, 70, .22); }
html[data-theme="light"]:not(.js) .cj-nav__link.is-current { background: #fff; }
html[data-theme="light"] .cj-mega { box-shadow: inset 0 0 0 1px var(--line), 0 30px 70px -28px rgba(16, 30, 70, .35); }
html[data-theme="light"] .cj-mega__promo { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 62%), #f3f6fd; }
html[data-theme="light"] .cj-mega__promo-ic { background: rgba(217, 119, 6, .12); }
@media (max-width: 1060px) {
	html[data-theme="light"] .cj-nav__bar { background: none; box-shadow: none; }
	html[data-theme="light"] .cj-mega { box-shadow: none; }
}
html[data-theme="light"] .cj-header.is-scrolled { background: rgba(255, 255, 255, .82); box-shadow: 0 1px 0 var(--line), 0 10px 30px -24px rgba(16, 30, 70, .3); }
html[data-theme="light"] .cj-footer { background: linear-gradient(to bottom, var(--bg), #e9eef8); }
html[data-theme="light"] .cj-bolt__btn { background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 36px -16px rgba(16, 30, 70, .35); }
html[data-theme="light"] .cj-hirepill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 16px 34px -14px rgba(16, 30, 70, .45); }
html[data-theme="light"] .cj-modal::backdrop { background: rgba(10, 21, 48, .38); }
html[data-theme="light"] .cj-zoom::backdrop { background: rgba(10, 21, 48, .86); }

/* Hero */
html[data-theme="light"] .cj-steps {
	background: radial-gradient(70% 140% at 50% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%), var(--surface);
	box-shadow: inset 0 0 0 1px var(--line), var(--lift);
}
html[data-theme="light"] .cj-hero__speed { border-color: rgba(16, 30, 70, .16); background: rgba(255, 255, 255, .6); }
html[data-theme="light"] .cj-hero__speed:hover { background: #fffaf0; }
html[data-theme="light"] .cj-hero__bolt { background: rgba(217, 119, 6, .12); }

/* Pipeline stations (hero strip and process) */
html[data-theme="light"] .cj-station__ic { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), 0 4px 10px -6px rgba(16, 30, 70, .2); }
html[data-theme="light"] .cj-station.is-done .cj-station__ic { background: color-mix(in srgb, var(--brand) 9%, #fff); }
html[data-theme="light"] .cj-rail__line { background: repeating-linear-gradient(90deg, rgba(30, 60, 160, .22) 0 6px, transparent 6px 12px); }
html[data-theme="light"] .cj-rail__line b { background: #fff; box-shadow: 0 0 12px 3px color-mix(in srgb, var(--brand) 60%, transparent); }
html[data-theme="light"] .cj-flow__branches { background: var(--panel); }

/* Process: the demo screen becomes a light browser window */
html[data-theme="light"] .cj-flow__screen { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--lift-hi); }
html[data-theme="light"] .cj-flow__chrome { background: #f2f5fa; color: var(--muted); }
html[data-theme="light"] .cj-flow__chrome i { background: #d5dbe7; }
html[data-theme="light"] .cj-flow__chrome i:first-child { background: var(--brand); }
html[data-theme="light"] .cj-flow__stage { background: radial-gradient(rgba(30, 60, 160, .1) 1px, transparent 1px) 0 0 / 18px 18px; }
html[data-theme="light"] .fl-msg--them > p { background: #eef2f9; color: var(--text); }
html[data-theme="light"] .fl-toast { background: #e6f7ef; color: #047857; box-shadow: 0 0 0 1px rgba(5, 150, 105, .22); }
html[data-theme="light"] .fl-fig { box-shadow: 0 0 0 1px rgba(16, 30, 70, .12), 0 26px 46px -26px rgba(16, 30, 70, .5); }
html[data-theme="light"] .fl-dev { box-shadow: inset 0 0 0 1.5px rgba(140, 170, 255, .28), 0 14px 24px -16px rgba(16, 30, 70, .45); }
html[data-theme="light"] .fl-vitals li, html[data-theme="light"] .fl-hand { background: #f6f8fc; }
html[data-theme="light"] .pv { box-shadow: 0 0 0 1px rgba(16, 30, 70, .1), 0 22px 40px -26px rgba(16, 30, 70, .45); }
html[data-theme="light"] .pv-url, html[data-theme="light"] .fl-old__bar, html[data-theme="light"] .pe-bar { background: #eef1f7; color: var(--muted); }
html[data-theme="light"] .pv-ship { background: #e6f7ef; color: #047857; box-shadow: 0 0 0 1px rgba(5, 150, 105, .25), 0 10px 20px -10px rgba(16, 30, 70, .35); }
html[data-theme="light"] .fl-old { box-shadow: 0 0 0 1px rgba(16, 30, 70, .1), 0 26px 46px -26px rgba(16, 30, 70, .45); }
html[data-theme="light"] .fl-bad li { background: rgba(225, 29, 72, .07); color: #9f1239; }

/* Small coloured labels need darker text on a light page */
html[data-theme="light"] .cj-chips li { color: color-mix(in oklab, var(--brand) 82%, #0a1530); }
html[data-theme="light"] .cj-tile__icon { color: color-mix(in oklab, var(--acc) 78%, #0a1530); }
html[data-theme="light"] .cj-bcard__cat { color: color-mix(in oklab, var(--t, var(--brand)) 60%, #0a1530); }
html[data-theme="light"] .cj-bcard__ph span { color: color-mix(in oklab, var(--t, var(--brand)) 70%, #0a1530); }
html[data-theme="light"] .cj-quote blockquote p { color: #b9c2d9; }
html[data-theme="light"] .cj-quote blockquote p span.is-on { color: var(--text); }

/* Speed check (home page and speed test page) */
html[data-theme="light"] .cj-lab__switch { background: var(--panel); }
html[data-theme="light"] .cj-lab__switch span.is-on { background: #fff; box-shadow: 0 1px 3px rgba(16, 30, 70, .12); }
html[data-theme="light"] .cj-dial__track { stroke: rgba(30, 60, 160, .09); }
html[data-theme="light"] .cj-dial__tick { stroke: rgba(30, 60, 160, .22); }
html[data-theme="light"] .cj-dial__tick.is-major { stroke: rgba(30, 60, 160, .4); }
html[data-theme="light"] .cj-dial__fill { filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--dial-c) 35%, transparent)); }
html[data-theme="light"] .cj-term { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), var(--lift); }
html[data-theme="light"] .cj-term:focus-within { box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
html[data-theme="light"] .cj-speed__console { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--lift-hi); }
html[data-theme="light"] .cj-seg__btn[aria-pressed="true"], html[data-theme="light"] .cj-branch[aria-pressed="true"], html[data-theme="light"] .cj-themes button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgba(16, 30, 70, .14); }

/* Why codeJay demos */
html[data-theme="light"] .pe, html[data-theme="light"] .pf { box-shadow: 0 0 0 1px rgba(16, 30, 70, .1), 0 26px 46px -26px rgba(16, 30, 70, .45); }
html[data-theme="light"] .pe-mode { background: #fff; color: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="light"] .ps-bar { background: var(--panel-2); }
html[data-theme="light"] .pq-search { box-shadow: 0 0 0 1px var(--line), 0 14px 28px -20px rgba(16, 30, 70, .4); }
html[data-theme="light"] .pq-result { background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 28px -22px rgba(16, 30, 70, .35); }
html[data-theme="light"] .pq-site { color: #202124; }
html[data-theme="light"] .pq-title { color: #1a0dab; }
html[data-theme="light"] .pq-desc { color: #4d5156; }

/* Work: private projects get a light frosted cover */
html[data-theme="light"] .cj-shot__lock .cj-shot__media { background: #e3ebfb; }
html[data-theme="light"] .cj-shot__blur {
	background:
		radial-gradient(55% 45% at 28% 30%, color-mix(in srgb, var(--brand) 42%, transparent), transparent 70%),
		radial-gradient(50% 55% at 76% 72%, color-mix(in srgb, var(--violet) 32%, transparent), transparent 70%),
		linear-gradient(160deg, #d4e0fb, #f2f5fc);
}
html[data-theme="light"] .cj-shot__lock .cj-shot__media::before {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .5)),
		repeating-linear-gradient(90deg, rgba(16, 30, 70, .04) 0 1px, transparent 1px 24px),
		repeating-linear-gradient(0deg, rgba(16, 30, 70, .04) 0 1px, transparent 1px 24px);
}
html[data-theme="light"] .cj-shot__lockic { background: rgba(255, 255, 255, .75); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 32px -18px rgba(16, 30, 70, .45); }
html[data-theme="light"] .cj-shot__lock:hover .cj-shot__lockic { color: #fff; }
html[data-theme="light"] .cj-shot__lockmsg b { color: var(--text); }
html[data-theme="light"] .cj-shot__lockmsg small { color: var(--muted); }

/* About: a light ID card */
html[data-theme="light"] .cj-idcard {
	background: linear-gradient(160deg, #ffffff 10%, #f1f5ff 55%, #e7eeff);
	box-shadow: inset 0 0 0 1px var(--line), 0 50px 90px -50px rgba(16, 30, 70, .5), 0 0 80px -34px color-mix(in srgb, var(--brand) 45%, transparent);
}
html[data-theme="light"] .cj-idcard::before { background: var(--bg); box-shadow: inset 0 1px 3px rgba(16, 30, 70, .35), 0 1px 0 #fff; }
html[data-theme="light"] .cj-idcard__holo {
	mix-blend-mode: normal; opacity: .55;
	background:
		radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(46, 107, 255, .12), transparent 38%),
		linear-gradient(115deg, transparent 30%, rgba(109, 92, 246, .08) 45%, rgba(8, 145, 178, .07) 55%, transparent 70%);
}
html[data-theme="light"] .cj-idcard__code span { opacity: .4; }

/* Blog and articles */
html[data-theme="light"] .cj-bcard__new { box-shadow: 0 6px 18px -8px rgba(16, 30, 70, .4); }
html[data-theme="light"] .cj-ahero__img img { box-shadow: 0 0 0 1px var(--line), 0 40px 90px -46px rgba(16, 30, 70, .45); }

@media print { .cj-readbar, .cj-toc, .cj-tocm, .cj-aend, .cj-keep, .cj-anchor { display: none !important; } .cj-alayout { display: block; } }
@media print {
	.cj-header, .cj-bolt, .cj-hirepill, .cj-grid-bg, .cj-end { display: none !important; }
	body { background: #fff; color: #000; }
}