/*
 * Zoliax look: light by default, wide (1650px), calm type, 24px cards, pill buttons.
 * Loaded after style.css. The homepage sections (inc/home.php) use the j- classes.
 */

/* Instrument Sans — self-hosted, SIL Open Font License */
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--font: "Instrument Sans", "Inter", system-ui, sans-serif;
	--display: "Instrument Sans", "Inter", system-ui, sans-serif;
	--wrap: 1650px;
	--radius: 24px;
	--pill: 999px;
	--lime: #e5e46e;
	--sky: #a7c9e6;
	--lilac: #dcd4ff;
	--j-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--white: #fff;
}
:root[data-theme="light"] {
	--bg: #f5f5f2;
	--ink: #131430;
	--muted: #5d5f72;
	--line: rgba(19, 20, 48, 0.1);
	--card: #ffffff;
	--soft: rgba(19, 20, 48, 0.05);
	--accent: #6c4ef5;
	--accent-strong: #6c4ef5;
	--accent-2: #5639e0;
	--white: #fff;
}

body { font-size: 17px; }
h1, h2, h3, h4 { font-weight: 450; letter-spacing: -0.04em; }
:root { --j-gutter: clamp(32px, 8vw, 140px); }
.wrap { width: min(var(--wrap), calc(100% - var(--j-gutter))); }
.bar__inner { width: min(var(--wrap), calc(100% - clamp(32px, 8vw, 140px))); }

/* Audience switch: a gradient bar with two tabs; the active tab joins the header below */
.audience { background: #c7c7c7; }
.audience__in { display: flex; gap: 4px; width: min(var(--wrap), calc(100% - clamp(32px, 8vw, 140px))); margin: 0 auto; padding-top: 6px; }
.audience__tab { padding: 7px 20px 8px; border-radius: 12px 12px 0 0; color: #2b2c40; font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.2s; }
.audience__tab:hover { background: rgba(255, 255, 255, 0.45); color: #131430; }
.audience__tab.is-on { background: #fff; color: #131430; }
[data-theme="dark"] .audience { background: #2a2a33; }
[data-theme="dark"] .audience__tab { color: rgba(255, 255, 255, 0.8); }
[data-theme="dark"] .audience__tab.is-on { background: #000; color: #fff; }

/* No colour blurs on the light page: it stays clean */
[data-theme="light"] .blobs { display: none; }

/* Light header: calm, no gradient */
[data-theme="light"] .site-header { background: transparent; }
[data-theme="light"] .bar { position: relative; background: #fff; transition: background 0.25s; }
/* While a dropdown is open, the bar turns see-through with a soft blur behind it. */
[data-theme="light"] .site-header:has(.has-mega:hover, .has-mega.is-open) .bar { background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav__link { font-weight: 450; font-size: 16px; }

/* Buttons: pills */
.btn,
.wp-block-button__link { border-radius: var(--pill) !important; font-family: var(--font); font-weight: 500; }
.btn--solid,
.btn-solid .wp-block-button__link { min-height: 45px; padding: 0 26px; background: var(--accent-strong, var(--accent)); color: #fff; font-size: 18px; }
.btn--ghost,
.btn-ghost .wp-block-button__link { min-height: 45px; padding: 0 26px; font-size: 18px; }
.site-header .btn--solid { min-height: 45px; padding: 0 22px; font-size: 16px; }

/* An outline pill with an arrow that slides from the right to the left on hover */
.j-btn-arrow .wp-block-button__link { position: relative; gap: 10px; padding-right: 54px; transition: padding 0.45s var(--j-ease), background 0.25s; }
.j-btn-arrow .wp-block-button__link::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: right 0.45s var(--j-ease);
}
.j-btn-arrow .wp-block-button__link:hover { padding-left: 54px; padding-right: 26px; }
.j-btn-arrow .wp-block-button__link:hover::after { right: calc(100% - 42px); }

/* Shared section pieces */
.j-title { font-size: clamp(34px, 3.2vw, 60px); line-height: 1.02; letter-spacing: -0.05em; max-width: 18ch; text-wrap: balance; }
.j-title--center { margin-inline: auto; text-align: center; }
.j-pill { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--pill); background: rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 16px; font-weight: 500; }
.j-more a { color: var(--accent-2); font-weight: 500; text-decoration: none; }
.j-more a:hover { text-decoration: underline; text-underline-offset: 4px; }
.j-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 30px; margin-bottom: 40px; }
.j-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: clamp(36px, 4vw, 70px); }
.j-split__text { max-width: 36rem; margin-left: auto; font-size: 20px; line-height: 1.55; }
.j-roundlink { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); font-size: 18px; font-weight: 500; text-decoration: none; }
.j-roundlink i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--bg); transition: transform 0.35s var(--j-ease), background 0.25s; }
.j-roundlink i .icon { width: 20px; height: 20px; }
.j-roundlink:hover i { transform: translateX(4px); background: var(--accent); color: #fff; }
.j-arrow { display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: background 0.25s, color 0.25s, opacity 0.25s; }
.j-arrow:first-child .icon { transform: rotate(180deg); }
.j-arrow .icon { width: 22px; height: 22px; }
.j-arrow--solid { border-color: transparent; background: var(--accent); color: #fff; }
.j-arrow:hover { background: var(--ink); color: var(--bg); }
.j-arrow:disabled { opacity: 0.4; cursor: default; }
.j-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Hero: full screen, photo, text bottom left */
.j-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100svh - var(--j-head, 130px) - 12px); margin: 0; padding: 0; overflow: hidden; border-radius: 0; background: #e9e9e4; }
.j-hero__img { position: absolute; inset: 0; margin: 0; }
.j-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 18%; animation: j-zoom 14s var(--j-ease) both; }
@keyframes j-zoom { from { transform: scale(1.06); } }
.j-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(245, 245, 242, 0.92) 0%, rgba(245, 245, 242, 0.65) 32%, rgba(245, 245, 242, 0) 62%), linear-gradient(0deg, rgba(245, 245, 242, 0.85) 0%, rgba(245, 245, 242, 0) 26%); pointer-events: none; }
.j-hero > *:not(.j-hero__img) { position: relative; z-index: 1; }
.j-hero__copy { width: min(var(--wrap), calc(100% - clamp(32px, 6vw, 110px))); margin: 0 auto; padding-bottom: clamp(110px, 14vh, 170px); }
.j-hero h1 { max-width: 13ch; color: var(--ink); font-size: clamp(42px, 4.6vw, 84px); font-weight: 450; line-height: 1; letter-spacing: -0.05em; }
.j-hero__lede { max-width: 30rem; margin-top: 18px; color: var(--muted); font-size: 19px; line-height: 1.5; }
.j-hero__actions { gap: 12px; margin-top: 30px; }
.j-hero .btn-ghost .wp-block-button__link { border: 1px solid rgba(19, 20, 48, 0.25); background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); }
.j-hero__tag .icon { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 10px; vertical-align: -0.05em; color: var(--accent-2); }
.j-hero__tag { position: absolute !important; right: clamp(24px, 10vw, 220px); top: clamp(60px, 14vh, 150px); padding: 12px 26px; border-radius: var(--pill); background: var(--sky); color: var(--ink); font-size: clamp(22px, 2.2vw, 36px); letter-spacing: -0.03em; transform: rotate(4deg); box-shadow: 0 20px 40px rgba(19, 20, 48, 0.12); animation: j-float 6s ease-in-out infinite alternate; }
@keyframes j-float { to { transform: rotate(2deg) translateY(-10px); } }
.j-hero__trust { position: absolute !important; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; width: min(var(--wrap), calc(100% - clamp(32px, 6vw, 110px))); margin: 0 auto; padding: 22px 0 26px; font-size: 15px; }
.j-trust__badges { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.j-trust__badge { display: grid; padding-left: 46px; position: relative; color: var(--muted); line-height: 1.3; }
.j-trust__badge::before { content: "★"; position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; border-radius: var(--radius); background: var(--card); color: var(--accent); box-shadow: 0 6px 16px rgba(19, 20, 48, 0.08); }
.j-trust__badge b { color: var(--ink); font-weight: 600; }
.j-trust__reviews { display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px 8px 18px; border-radius: var(--pill); background: rgba(255, 255, 255, 0.75); color: var(--ink); text-decoration: none; }
.j-trust__reviews b { padding: 4px 10px; border-radius: var(--pill); background: var(--lilac); font-weight: 600; }
.j-stars { color: #f2b10c; letter-spacing: 2px; }

/* Sliders: a scrolling track with arrows under it */
.j-slider { overflow: hidden; }
.j-slider__track {
	/* Full browser width: cards slide out of view on both sides; the first one lines up with the content. */
	--j-edge: calc((100vw - min(var(--wrap), 100vw - var(--j-gutter))) / 2 - var(--j-sb, 0px) / 2);
	display: flex;
	gap: 20px;
	margin: clamp(30px, 4vw, 60px) calc(-1 * var(--j-edge)) 0;
	padding: 0 var(--j-edge);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--j-edge);
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.j-slider__track::after { content: ""; flex: 0 0 1px; }
.j-slider__track::-webkit-scrollbar { display: none; }
.j-slider__track > * { flex: 0 0 auto; scroll-snap-align: start; }
.j-slider__nav { display: flex; justify-content: flex-end; gap: 14px; margin-top: 34px; }

/* What others say: photo cards */
.j-voice { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: clamp(290px, 30vw, 520px); aspect-ratio: 520 / 600; overflow: hidden; border-radius: var(--radius); background: #222; color: #fff; }
.j-voice__img { position: absolute; inset: 0; margin: 0; }
.j-voice__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--j-ease); }
.j-voice:hover .j-voice__img img { transform: scale(1.04); }
.j-voice::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.78) 100%); }
.j-voice > *:not(.j-voice__img) { position: relative; z-index: 1; }
.j-voice__logo { position: absolute !important; top: 30px; left: 30px; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 14px; background: var(--accent); color: #fff; font-size: 30px; font-weight: 700; letter-spacing: -0.04em; }
.j-voice:nth-child(2) .j-voice__logo { background: #fff; color: var(--ink); }
.j-voice:nth-child(3) .j-voice__logo { background: #e3342f; }
.j-voice:nth-child(4) .j-voice__logo { background: var(--lime); color: var(--ink); }
.j-voice__body { padding: 30px; }
.j-voice h3 { margin: 16px 0 12px; font-size: clamp(24px, 1.8vw, 30px); line-height: 1.15; }
.j-voice__body > p:not(.j-pill) { color: rgba(255, 255, 255, 0.86); font-size: 16px; line-height: 1.55; }

/* The app: a list that opens one item at a time, the dashboard on a coloured panel */
.j-app__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 6vw, 110px); align-items: center; }
.j-app__sub { margin: 14px 0 34px; font-size: 22px; }
.j-app__list { display: grid; gap: 6px; max-width: 640px; }
.j-app__item { border-radius: var(--radius); transition: background 0.3s, box-shadow 0.3s; }
.j-app__item[open] { background: var(--card); box-shadow: 0 10px 30px rgba(19, 20, 48, 0.06); }
.j-app__item summary { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 26px 22px 86px; list-style: none; cursor: pointer; font-size: 20px; }
.j-app__item summary::-webkit-details-marker { display: none; }
.j-app__item summary::before { content: ""; position: absolute; left: 26px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 12px; background: var(--soft); transition: background 0.3s; }
.j-app__item summary::after { content: ""; position: absolute; left: 37px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: var(--ink); -webkit-mask: var(--j-ico) center / contain no-repeat; mask: var(--j-ico) center / contain no-repeat; transition: background 0.3s; }
.j-app__item[open] summary::before { background: var(--accent); }
.j-app__item[open] summary::after { background: #fff; }
.j-app__item--home { --j-ico: url("../img/icons/home.svg"); }
.j-app__item--performance { --j-ico: url("../img/icons/performance.svg"); }
.j-app__item--power { --j-ico: url("../img/icons/power.svg"); }
.j-app__item p { padding: 0 26px 24px 86px; margin-top: -10px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.j-app__item + .j-app__item:not([open]) { border-top: 1px solid var(--line); border-radius: 0; }
.j-app__item[open] + .j-app__item { border-top: 0; }
.j-app__visual { position: relative; display: grid; place-items: center; min-height: 640px; padding: clamp(24px, 3vw, 60px); overflow: hidden; border-radius: var(--radius); background: var(--sky); transition: background-color 0.6s var(--j-ease); }
.j-app__visual[data-pane="1"] { background: var(--lilac); }
.j-app__visual[data-pane="2"] { background: var(--lime); }
/* The pictures sit on top of each other; the open item's one fades and rises in. */
.j-app__pane { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; opacity: 0; transform: translateY(24px) scale(0.97); transition: opacity 0.5s var(--j-ease), transform 0.7s var(--j-ease); pointer-events: none; }
.j-app__pane.is-on { opacity: 1; transform: none; pointer-events: auto; }
.j-app__photo { width: min(86%, 620px); margin: 0; }
.j-app__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; box-shadow: 0 40px 80px rgba(19, 20, 48, 0.25); }
@media (prefers-reduced-motion: reduce) { .j-app__pane, .j-app__visual { transition: none; } }

/* Mission: three cards that open up */
.j-mcards { display: flex; gap: 20px; height: clamp(360px, 30vw, 440px); }
.j-mcard { position: relative; display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 0; min-width: 0; padding: 28px; overflow: hidden; border-radius: var(--radius); background: #e9e9e5; cursor: pointer; transition: flex-grow 0.6s var(--j-ease), background 0.3s; }
.j-mcard.is-open { flex-grow: 2.6; cursor: default; color: #fff; }
.j-mcard__img { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.5s; }
.j-mcard__img img { width: 100%; height: 100%; object-fit: cover; }
.j-mcard.is-open .j-mcard__img { opacity: 1; }
.j-mcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 100%); opacity: 0; transition: opacity 0.5s; }
.j-mcard.is-open::after { opacity: 1; }
.j-mcard > *:not(.j-mcard__img) { position: relative; z-index: 1; }
.j-mcard__num { font-size: 24px; }
.j-mcard h3 { font-size: clamp(22px, 1.9vw, 32px); line-height: 1.15; }
.j-mcard__body p { max-height: 0; margin-top: 0; overflow: hidden; color: rgba(255, 255, 255, 0.88); font-size: 17px; opacity: 0; transition: opacity 0.4s, max-height 0.5s var(--j-ease), margin 0.5s; }
.j-mcard.is-open .j-mcard__body p { max-height: 8em; margin-top: 12px; opacity: 1; }
.j-mcard:not(.is-open):hover { background: #e2e2dd; }

/* Feature cards */
.j-fcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1400px; margin: clamp(36px, 4vw, 70px) auto 0; }
.j-fcard { display: flex; flex-direction: column; padding: 34px; border-radius: var(--radius); background: var(--card); }
.j-fcard__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--lime); color: var(--ink); }
.j-fcard__icon .icon { width: 18px; height: 18px; }
.j-fcard h3 { margin: 22px 0 40px; font-size: clamp(26px, 2vw, 34px); line-height: 1.12; }
.j-fcard > p:not(.j-more) { margin-top: auto; color: var(--muted); font-size: 18px; line-height: 1.6; }
.j-fcard .j-more { margin-top: 24px; }

/* Steps */
.j-step { display: flex; flex-direction: column; width: clamp(280px, 24vw, 455px); min-height: 400px; padding: 34px; border-radius: var(--radius); background: var(--card); }
.j-step__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--sky); font-size: 22px; }
.j-step h3 { margin: 20px 0 30px; font-size: clamp(26px, 2vw, 34px); line-height: 1.12; }
.j-step p:not(.j-step__num) { margin-top: auto; color: var(--muted); font-size: 18px; line-height: 1.6; }

/* Service bento and white cards with a round link */
.j-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1400px; margin: 0 auto; }
.j-bcard { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; min-height: 380px; padding: clamp(26px, 2.6vw, 38px); border-radius: var(--radius); background: var(--card); }
.j-bcard h3 { font-size: clamp(26px, 2vw, 34px); line-height: 1.15; max-width: 16ch; }
.j-bcard p { margin-top: 14px; color: var(--muted); font-size: 18px; line-height: 1.6; max-width: 40rem; }
.j-bcard .j-roundlink { align-self: flex-end; }
.j-bcard--lime { justify-content: flex-end; background: var(--lime); color: #131430; }
.j-bcard--lime h2 { font-size: clamp(40px, 3.4vw, 60px); line-height: 1; letter-spacing: -0.05em; }
.j-bcard--sky { background: var(--sky); color: #131430; }
.j-bcard--sky p { color: rgba(19, 20, 48, 0.75); }

/* Together: photo card + two cards */
.j-together__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; max-width: 1420px; margin: 0 auto; }
.j-photocard { position: relative; grid-row: span 2; min-height: 760px; overflow: hidden; border-radius: var(--radius); color: #fff; }
.j-photocard__img { position: absolute; inset: 0; margin: 0; }
.j-photocard__img img { width: 100%; height: 100%; object-fit: cover; }
.j-photocard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 45%); }
.j-photocard__copy { position: relative; z-index: 1; padding: clamp(26px, 2.6vw, 38px); }
.j-photocard h2 { color: #fff; font-size: clamp(36px, 3.2vw, 56px); letter-spacing: -0.05em; }
.j-photocard p { max-width: 36rem; margin-top: 12px; color: rgba(255, 255, 255, 0.9); font-size: 20px; }
.j-bcard--tall { min-height: 0; }

/* Sections breathe more (j-sec: the homepage sections, on every page) */
.j-sec,.front .section { padding: clamp(30px, 7vw, 30px) 0; }

/* Dark mode keeps working: cards and panels follow the tokens */
[data-theme="dark"] .j-hero::after { background: linear-gradient(90deg, rgba(10, 8, 20, 0.85) 0%, rgba(10, 8, 20, 0.5) 34%, rgba(10, 8, 20, 0) 64%), linear-gradient(0deg, rgba(10, 8, 20, 0.8) 0%, rgba(10, 8, 20, 0) 26%); }
[data-theme="dark"] .j-hero h1 { color: #fff; }
[data-theme="dark"] .j-hero__lede { color: rgba(255, 255, 255, 0.82); }
[data-theme="dark"] .j-mcard { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .j-trust__reviews { background: rgba(0, 0, 0, 0.45); color: #fff; }

@media (max-width: 1100px) {
	.j-app__grid,
	.j-split { grid-template-columns: 1fr; }
	.j-split__text { margin-left: 0; }
	.j-app__visual { min-height: 0; }
	.j-fcards { grid-template-columns: 1fr; max-width: 640px; }
	.j-mcards { flex-direction: column; height: auto; }
	.j-mcard { min-height: 110px; flex: none; }
	.j-mcard.is-open { min-height: 380px; }
	.j-together__grid { grid-template-columns: 1fr; grid-template-rows: none; }
	.j-photocard { grid-row: auto; min-height: 520px; }
}
@media (max-width: 720px) {
	.j-hero { min-height: calc(100svh - 120px); }
	.j-hero__copy { padding-bottom: 150px; }
	.j-hero__tag { display: none; }
	.j-hero__img img { object-position: 62% 0; }
	.j-hero::after { background: linear-gradient(0deg, rgba(245, 245, 242, 0.97) 0%, rgba(245, 245, 242, 0.9) 48%, rgba(245, 245, 242, 0) 78%); }
	[data-theme="dark"] .j-hero::after { background: linear-gradient(0deg, rgba(10, 8, 20, 0.95) 0%, rgba(10, 8, 20, 0.85) 48%, rgba(10, 8, 20, 0) 78%); }
	.j-hero__trust { flex-direction: column; align-items: flex-start; }
	.j-trust__badges { display: none; }
	.j-bento { grid-template-columns: 1fr; }
	.j-bcard { min-height: 280px; }
	.j-voice { width: 82vw; }
	.j-step { width: 80vw; min-height: 340px; }
	.j-app__item summary { padding-left: 76px; font-size: 18px; }
	.j-app__item p { padding-left: 76px; }
}
@media (prefers-reduced-motion: reduce) {
	.j-hero__img img,
	.j-hero__tag { animation: none; }
	.j-mcard,
	.j-mcard__img,
	.j-mcard__body p { transition: none; }
}

/* Footer: calm, on the page colour, with a big mark */
[data-theme="light"] .site-footer { background: var(--bg); border-top: 1px solid var(--line); }
[data-theme="light"] .site-footer .footer__col h2 { color: var(--accent-2); font-weight: 500; }
.footer__brand .brand__mark { height: 54px; }
.footer__brand .brand__name { font-size: 30px; font-weight: 500; letter-spacing: -0.04em; }

/* The audience switch slides away while scrolling down and comes back on the way up: the whole
   header moves up by the switch's height, so nothing below it shifts (main.js sets --j-aud). */
.site-header { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }
.audience-hidden .site-header { transform: translateY(calc(-1 * var(--j-aud, 0px))); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

/* Feature cards follow the mission cards closely. */
.j-mission + .j-features { padding-top: clamp(24px, 3vw, 50px); }
.j-sec.j-mission { padding-bottom: clamp(30px, 3vw, 56px); }

/* Flowing lines behind the feature cards (assets/img/bg-lines.svg), in the accent colour */
.j-features { position: relative; isolation: isolate; }
.j-features::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	top: 8%;
	height: min(42vw, 640px);
	background: var(--accent);
	opacity: 0.22;
	-webkit-mask: url("../img/bg-lines.svg") center / 100% 100% no-repeat;
	mask: url("../img/bg-lines.svg") center / 100% 100% no-repeat;
	pointer-events: none;
}
.icon--fill { fill: currentColor; stroke: none; }

/* The service card: a photo with the lime fading over it from the left, and white text. */
.j-bcard--photo { position: relative; overflow: hidden; isolation: isolate; }
.j-bcard__bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
/* Yellow over the photo from left to right: solid on the left, 0% on the right. */
.j-bcard--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--lime) 0%, rgba(229, 228, 110, 0) 100%); pointer-events: none; }
.j-bcard__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.j-bcard--photo h2 { color: #fff; }

/* Once the page scrolls, the white header turns slightly see-through with a soft blur. */
[data-theme="light"].scrolled .bar { background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
[data-theme="dark"].scrolled .bar { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
/*
 * Scrolled: the whole header is one blurred surface, so the active audience tab and the bar below it
 * are the same see-through colour with no seam. One blur on .site-header (a blur on a child would see
 * nothing through it); the grey around the active tab is that tab's own outline shadow, so the grey
 * never sits behind the tab. .audience clips the shadow to its own height.
 */
.audience { overflow: hidden; }
.scrolled .site-header { -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
[data-theme].scrolled .bar,
[data-theme].scrolled .site-header:has(.has-mega:hover, .has-mega.is-open) .bar { -webkit-backdrop-filter: none; backdrop-filter: none; }
.scrolled .audience { background: transparent; }
[data-theme="light"].scrolled .audience__tab.is-on { background: rgba(255, 255, 255, 0.82); box-shadow: 0 0 0 100vmax rgba(199, 199, 199, 0.82); }
[data-theme="dark"].scrolled .audience__tab.is-on { background: rgba(0, 0, 0, 0.72); box-shadow: 0 0 0 100vmax rgba(42, 42, 51, 0.85); }
.scrolled .audience__tab:not(.is-on) { position: relative; }

/* Menu: on hover (and while its dropdown is open) a link becomes the same purple pill as the header button. */
[data-theme] .nav__item:hover > .nav__link,
[data-theme] .nav__item.is-open > .nav__link,
[data-theme] .nav__link:focus-visible,
[data-theme] .nav .menu a:hover { background: var(--accent); color: #fff; }
[data-theme] .has-mega:hover > .nav__more,
[data-theme] .has-mega.is-open > .nav__more { color: var(--accent); }
.nav__link { transition: background 0.2s, color 0.2s; }

/* Hero v2: landscape photo, white text bottom left, a white card on the right */
.j-hero::after { background: linear-gradient(90deg, rgba(20, 14, 8, 0.62) 0%, rgba(20, 14, 8, 0.25) 45%, rgba(20, 14, 8, 0) 70%), linear-gradient(0deg, rgba(20, 14, 8, 0.55) 0%, rgba(20, 14, 8, 0) 40%) !important; }
.j-hero__img img { object-position: 50% 60%; }
.j-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; align-items: end; width: min(var(--wrap), calc(100% - clamp(32px, 6vw, 110px))); margin: 0 auto; padding-bottom: clamp(110px, 14vh, 170px); }
.j-hero__grid .j-hero__copy { width: auto; margin: 0; padding: 0; }
.j-hero h1, [data-theme] .j-hero h1 { color: #fff; }
.j-hero__lede, [data-theme] .j-hero__lede { color: rgba(255, 255, 255, 0.86); }
.j-hero .btn-ghost .wp-block-button__link { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.12); color: #fff; }
.j-hero .btn-ghost .wp-block-button__link:hover { background: #fff; color: var(--ink); }
.j-trust__badge { color: rgba(255, 255, 255, 0.8); }
.j-trust__badge b { color: #fff; }

.j-hero__card { position: relative; align-self: center; padding: clamp(26px, 2.4vw, 38px); border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 40px 80px rgba(20, 14, 8, 0.25); }
.j-hero__card h2 { font-size: clamp(30px, 2.4vw, 42px); line-height: 1.08; letter-spacing: -0.045em; }
.j-ticks { display: grid; gap: 12px; margin: 22px 0 28px; }
.j-tick { position: relative; padding-left: 32px; color: var(--muted); font-size: 18px; }
.j-tick::before { content: ""; position: absolute; left: 2px; top: 6px; width: 14px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.j-hero__card-label { margin-bottom: 14px; font-size: 19px; font-weight: 500; }
.j-btn-block, .j-btn-block .wp-block-button__link { width: 100%; }
.j-hero__card .btn-solid .wp-block-button__link { min-height: 62px; font-size: 19px; }
.j-hero__card .j-btn-arrow .wp-block-button__link { padding-right: 26px; }
.j-hero__card .j-btn-arrow .wp-block-button__link::after { position: static; margin: 0 0 0 8px; }
.j-hero__card .j-btn-arrow .wp-block-button__link:hover { padding-left: 26px; }
.j-hero__card .j-btn-arrow .wp-block-button__link:hover::after { transform: translateX(4px); }
.j-hero__card .j-btn-arrow .wp-block-button__link::after { transition: transform 0.35s var(--j-ease); }
.j-hero__card-note { margin-top: 16px; color: var(--muted); font-size: 16px; text-align: center; }
.j-hero__card-note b { color: var(--ink); }
.j-hero__card .j-hero__tag { position: absolute !important; top: -26px; right: -18px; left: auto; padding: 10px 20px; font-size: clamp(18px, 1.4vw, 24px); }

@media (max-width: 1100px) {
	.j-hero__grid { grid-template-columns: 1fr; padding-bottom: 120px; padding-top: 40px; }
	.j-hero__card { align-self: auto; max-width: 560px; }
}
@media (max-width: 720px) {
	.j-hero::after { background: linear-gradient(0deg, rgba(20, 14, 8, 0.75) 0%, rgba(20, 14, 8, 0.35) 60%, rgba(20, 14, 8, 0.15) 100%) !important; }
	.j-hero__grid { padding-bottom: 110px; }
	.j-hero__card .j-hero__tag { display: none; }
}

/* Hero lines: drawn in on load, light pulses running along some, a gentle parallax with the mouse */
.j-hero > .j-hero__lines { position: absolute; z-index: 1; left: 0; right: 0; top: auto; bottom: -2%; height: 42%; color: #fff; pointer-events: none; }
.j-hero__lines svg { display: block; width: 100%; height: 100%; overflow: visible; transition: transform 1.2s var(--j-ease); }
.j-hero__lines .j-line { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--j-ease); transition-delay: calc(var(--i) * 40ms); }
.j-hero__lines.is-drawn .j-line { stroke-dashoffset: 0; }
.j-hero__lines .j-pulse { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 0.04 0.96; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)); }
.j-hero__lines.is-drawn .j-pulse { opacity: 0.4; animation: j-pulse var(--d, 7s) linear infinite; animation-delay: var(--w, 0s); }
@keyframes j-pulse { from { stroke-dashoffset: 1; } to { stroke-dashoffset: -1; } }
.j-hero__grid { z-index: 2; }
.j-hero__trust { z-index: 2; }
@media (max-width: 720px) {
	.j-hero > .j-hero__lines { height: 30%; }
}
@media (prefers-reduced-motion: reduce) {
	.j-hero__lines .j-line { transition: none; stroke-dashoffset: 0; }
	.j-hero__lines .j-pulse { display: none; }
	.j-hero__lines svg { transition: none; }
}

/* Items with a dropdown: the arrow sits inside the pill, with even padding on both sides. */
@media (min-width: 1101px) {
	.has-mega > .nav__link { padding-right: 36px; }
	.has-mega > .nav__more { position: relative; z-index: 1; margin-left: -32px; margin-right: 6px; }
	[data-theme] .has-mega:hover > .nav__more,
	[data-theme] .has-mega.is-open > .nav__more { color: #fff; }
}

/* Award badges in the hero: an icon tile instead of a star */
.j-trust__badge::before { content: none; }
.j-trust__icon { position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.92); color: var(--accent); box-shadow: 0 6px 16px rgba(20, 14, 8, 0.15); }
.j-trust__icon .icon { width: 18px; height: 18px; }

/* "Good plan. Zoliax." card: the text sits at the bottom, on a dark fade for easy reading. */
.j-photocard { display: flex; flex-direction: column; justify-content: flex-end; }
.j-photocard::after { background: linear-gradient(0deg, rgba(10, 8, 20, 0.82) 0%, rgba(10, 8, 20, 0.45) 32%, rgba(10, 8, 20, 0) 58%); }

/* ===================================================================== Inner pages, same look */

/* Logo a touch bigger */
.site-header .brand .brand__mark { height: calc(var(--logo-h, 38px) * 1.18); }
.site-header .brand__name { font-size: 27px; }

/* Breadcrumb bar: quiet */
[data-theme="light"] .crumb-bar { background: transparent; border: 0; }

/* Page banner: a big rounded photo panel like the homepage hero, text bottom left. Pages without a
   photo get a soft gradient panel with the flowing lines. */
[data-theme] .page-hero--rich {
	margin: 0 clamp(8px, 1vw, 16px);
	padding: clamp(80px, 10vw, 170px) 0 clamp(50px, 6vw, 90px);
	border-radius: var(--radius);
	background: linear-gradient(120deg, #ebe7fb 0%, #f1efe9 55%, #e6eef7 100%);
	text-align: left;
	--ink: #131430;
	--muted: #5d5f72;
	color: var(--ink);
	isolation: isolate;
	overflow: hidden;
}
[data-theme] .page-hero--rich::before {
	content: "" !important;
	position: absolute;
	inset: auto -5% -10% 30%;
	height: 110%;
	z-index: -1;
	background: var(--accent);
	opacity: 0.10;
	filter: none;
	animation: none;
	scale: 1;
	/* The lines cover the whole area (no hard ends) and fade in from the left. */
	-webkit-mask: url("../img/bg-lines.svg") center / cover no-repeat, linear-gradient(90deg, transparent 0, #000 30%);
	-webkit-mask-composite: source-in;
	mask: url("../img/bg-lines.svg") center / cover no-repeat intersect, linear-gradient(90deg, transparent 0, #000 30%);
}
[data-theme] .page-hero--rich::after { content: none; }
[data-theme] .page-hero--rich .wrap { width: min(var(--wrap), calc(100% - clamp(32px, 6vw, 110px))); }
[data-theme] .page-hero--rich .kicker { margin-bottom: 18px; color: var(--accent-2); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
[data-theme] .page-hero--rich h1 { max-width: 15ch; margin: 0 0 20px; background: none; color: var(--ink); -webkit-text-fill-color: currentColor; font-size: clamp(42px, 4.4vw, 80px); font-weight: 450; line-height: 1.02; letter-spacing: -0.05em; text-wrap: balance; }
[data-theme] .page-hero--rich .lede { max-width: 34rem; margin: 0; color: var(--muted); font-size: 20px; line-height: 1.5; }
[data-theme] .page-hero--rich .wp-block-buttons,
[data-theme] .page-hero--rich .hero__actions { justify-content: flex-start; margin-top: 30px; }
[data-theme="dark"] .page-hero--rich { background: linear-gradient(120deg, #1d1838 0%, #121219 60%, #172231 100%); --ink: #fff; --muted: rgba(255, 255, 255, 0.75); }

/* Photo banner (page with a photo): full panel photo, dark fade, white text */
.j-pagehero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(460px, 62vh, 680px); margin: 0 clamp(8px, 1vw, 16px); padding: 0; overflow: hidden; border-radius: var(--radius); color: #fff; }
.j-pagehero__img { position: absolute; inset: 0; margin: 0; }
.j-pagehero__img img { width: 100%; height: 100%; object-fit: cover; animation: j-zoom 14s var(--j-ease) both; }
.j-pagehero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 8, 20, 0.6) 0%, rgba(10, 8, 20, 0.2) 50%, rgba(10, 8, 20, 0) 75%), linear-gradient(0deg, rgba(10, 8, 20, 0.55) 0%, rgba(10, 8, 20, 0) 45%); }
.j-pagehero__copy { position: relative; z-index: 1; width: min(var(--wrap), calc(100% - clamp(32px, 6vw, 110px))); margin: 0 auto; padding-bottom: clamp(50px, 6vw, 90px); }
.j-pagehero__kicker { margin-bottom: 16px; color: rgba(255, 255, 255, 0.85); font-size: 15px; font-weight: 500; }
.j-pagehero h1 { max-width: 14ch; color: #fff; font-size: clamp(42px, 4.4vw, 80px); line-height: 1.02; letter-spacing: -0.05em; }
.j-pagehero__lede { max-width: 34rem; margin-top: 18px; color: rgba(255, 255, 255, 0.86); font-size: 20px; line-height: 1.5; }
.j-pagehero .wp-block-buttons { gap: 12px; margin-top: 28px; }
.j-pagehero .btn-ghost .wp-block-button__link { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.12); color: #fff; }
.j-pagehero .btn-ghost .wp-block-button__link:hover { background: #fff; color: var(--ink); }

/* Sticky sub-menu with icons (like a product page tab bar) */
.j-subnav { position: sticky; top: calc(var(--j-head, 76px) - 1px); z-index: 15; margin-top: 18px; }
.j-subnav__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(var(--wrap), calc(100% - clamp(32px, 6vw, 110px))); margin: 0 auto; padding: 8px 8px 8px 22px; border-radius: var(--pill); background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); box-shadow: 0 10px 30px rgba(19, 20, 48, 0.06); }
.j-subnav__title { font-size: 18px; font-weight: 500; white-space: nowrap; }
.j-subnav__title b { color: var(--accent-2); font-weight: 500; }
.j-subnav__links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.j-subnav__links::-webkit-scrollbar { display: none; }
.j-subnav__links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--pill); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.j-subnav__links a .icon { width: 18px; height: 18px; }
.j-subnav__links a:hover { background: var(--soft); }
.j-subnav__links a.is-on { background: var(--accent); color: #fff; }
[data-theme="dark"] .j-subnav__in { background: rgba(20, 20, 30, 0.85); }

/* Section heads: left, big and calm */
.section__head { max-width: 760px; margin: 0 0 clamp(30px, 3.4vw, 56px); text-align: left; }
.section__head h2 { font-size: clamp(32px, 3vw, 56px); font-weight: 450; line-height: 1.04; letter-spacing: -0.05em; }
.section__head p { margin-top: 12px; color: var(--muted); font-size: 19px; }

/* Cards everywhere: white, 24px, no borders */
[data-theme="light"] .card,
[data-theme="light"] .card-post { border: 0; box-shadow: none; }
.feature-grid { gap: 20px; }
.feature-grid > .card { padding: 34px; border-radius: var(--radius); }
.feature-grid__icon,
[data-theme] .feature-grid__icon,
[data-theme] .steps__icon { width: 40px; height: 40px; border-radius: var(--radius); background: var(--lime); color: #131430; }
.feature-grid__icon .icon { width: 20px; height: 20px; }
.feature-grid h3 { margin: 24px 0 12px; font-size: clamp(24px, 1.8vw, 30px); font-weight: 450; line-height: 1.15; }
.feature-grid p { font-size: 17px; line-height: 1.6; }

/* Numbers */
.stats { gap: 20px; }
.stat { padding: 34px 30px; border: 0; border-radius: var(--radius); background: var(--card); text-align: left; }
.stat__num { font-size: clamp(40px, 3.6vw, 64px); font-weight: 450; letter-spacing: -0.05em; background: none; color: var(--ink); -webkit-text-fill-color: currentColor; }
.stat__label { margin-top: 10px; font-size: 17px; }

/* Text + picture rows */
.split { gap: clamp(30px, 6vw, 110px); }
.split__copy h2 { font-size: clamp(32px, 3vw, 54px); font-weight: 450; line-height: 1.05; letter-spacing: -0.05em; }
.split__copy .kicker { color: var(--accent-2); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.split__text { font-size: 19px; line-height: 1.6; }
.point { font-size: 18px; }
.tick { width: 26px; height: 26px; background: var(--lime); color: #131430; }
.j-photo { margin: 0; }
.j-photo img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); }
.j-panel { display: grid; place-items: center; padding: clamp(24px, 3vw, 54px); border-radius: var(--radius); background: var(--sky); }
.j-panel .dash { width: 100%; height: auto; grid-template-columns: 130px minmax(0, 1fr); transform: none !important; box-shadow: 0 40px 80px rgba(19, 20, 48, 0.25); }
.j-panel .dash__feed { display: none; }

/* Quotes */
.quotes { gap: 20px; }
.quote { padding: 34px; border: 0; border-radius: var(--radius); }
.stars { color: #f2b10c; }
.quote__text { font-size: 20px; line-height: 1.5; letter-spacing: -0.01em; }
.avatar { background: var(--accent); }

/* Cases: photo cards */
.cases { gap: 20px; }
.case { border-radius: var(--radius); background: var(--card); }
.case__img { aspect-ratio: 4 / 3; object-fit: cover; }
.case__body h3 { font-size: 24px; font-weight: 450; line-height: 1.2; }
.case__metric { color: var(--accent-2); font-weight: 500; }
.tag { border-radius: var(--pill); }

/* Timeline */
.timeline::before { background: linear-gradient(180deg, var(--accent), transparent); }
.timeline__item::before { background: var(--accent); box-shadow: 0 0 0 5px rgba(108, 78, 245, 0.2); }
.timeline__year { color: var(--accent-2); font-weight: 600; letter-spacing: 0; }
.timeline__item .card { padding: 26px 30px; border-radius: var(--radius); }
.timeline__item h3 { font-size: 24px; font-weight: 450; }

/* Team */
.team { gap: 20px; }
.person { padding: 34px 24px; border-radius: var(--radius); }
.person h3 { font-size: 22px; font-weight: 500; }

/* Questions */
.faq { max-width: 980px; margin: 0; gap: 10px; }
.faq .wp-block-details { border: 0; border-radius: 18px; background: var(--card); }
.faq .wp-block-details summary { padding: 22px 26px; font-size: 19px; }
.faq .wp-block-details p { padding: 0 26px 22px; color: var(--muted); font-size: 17px; }

/* Contact */
.contact__card { padding: 26px; border-radius: var(--radius); }
.contact__form { padding: clamp(26px, 3vw, 44px); border-radius: var(--radius); }
.contact__form h2 { font-size: clamp(28px, 2.4vw, 40px); font-weight: 450; letter-spacing: -0.04em; }
.contact__form input,
.contact__form select,
.contact__form textarea,
.wpcf7 input:not([type="submit"]),
.wpcf7 select,
.wpcf7 textarea { border: 0 !important; border-radius: 12px !important; background: #f2f2ee !important; color: var(--ink) !important; }
.contact__form button,
.contact__form input[type="submit"],
.wpcf7 input[type="submit"] { min-height: 54px; padding: 0 28px; border: 0; border-radius: var(--pill) !important; background: var(--accent); color: #fff; font-weight: 500; }

/* Call to action: a dark rounded card with pill buttons */
.band__inner,
.band .band__inner { border-radius: var(--radius) !important; background: var(--ink); color: #fff; }
[data-theme="dark"] .band__inner { background: #1d1838; }
.band h2 { font-size: clamp(30px, 2.8vw, 48px); font-weight: 450; letter-spacing: -0.045em; color: #fff; }
.band__copy p { color: rgba(255, 255, 255, 0.8); }
.band .btn--white,
.band .btn-white .wp-block-button__link { background: var(--accent); color: #fff; border-radius: var(--pill); }
.band .btn--grey,
.band .btn-grey .wp-block-button__link { border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: #fff; border-radius: var(--pill); }
.band .btn--white:hover,
.band .btn-white .wp-block-button__link:hover,
.band .btn--grey:hover,
.band .btn-grey .wp-block-button__link:hover { background: #fff; color: var(--ink); }

/* Blog, posts and shop cards */
.card-post { border-radius: var(--radius); background: var(--card); }
.card-post h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.card-post h3 a:hover { color: var(--accent-2); }
.woocommerce ul.products li.product { border-radius: var(--radius); }

/* More breathing room on inner pages */
.page .section { padding: clamp(50px, 6vw, 100px) 0; }
.page .section--tight { padding: clamp(36px, 4vw, 70px) 0; }

@media (max-width: 900px) {
	.j-subnav__title { display: none; }
	.j-subnav__in { padding-left: 8px; }
}

/* ============================================ Homepage sections on every page (inc/home.php) */

/* A soft grey band behind a section, lighter than the audience bar, so the page reads in parts. */
.j-band { margin: 0 clamp(8px, 1vw, 16px); border-radius: var(--radius); background: #ebebe7; }
[data-theme="dark"] .j-band { background: rgba(255, 255, 255, 0.04); }

/* Half-height hero: inner pages and the Enterprise page. */
.j-hero--half { min-height: clamp(420px, calc((100svh - var(--j-head, 130px)) / 2), 600px); }
.j-hero--half .j-hero__grid { padding-top: clamp(60px, 7vw, 110px); padding-bottom: clamp(44px, 5vw, 80px); }
.j-hero--half h1 { max-width: 16ch; font-size: clamp(40px, 4vw, 72px); }
.j-hero--half .j-hero__img img { object-position: 50% 45%; }
.j-hero--half > .j-hero__lines { height: 60%; }
.j-hero--nocard .j-hero__grid { grid-template-columns: minmax(0, 1fr); }
.j-hero__kicker { margin-bottom: 16px; color: rgba(255, 255, 255, 0.85); font-size: 15px; font-weight: 500; }
.j-hero--half .j-hero__card { align-self: end; }
.j-hero--half .j-hero__card h2 { margin-bottom: 22px; }

/* Steps with a year instead of a number */
.j-step__num--wide { width: auto; padding: 0 12px; font-size: 18px; font-weight: 500; }

/* Four feature cards in a row */
.j-fcards--4 { grid-template-columns: repeat(4, 1fr); }
.j-fcards--4 .j-fcard h3 { margin-bottom: 28px; font-size: clamp(24px, 1.7vw, 30px); }

/* Numbers */
.j-stats-sec .j-title { margin-bottom: clamp(30px, 3vw, 50px); }
.j-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.j-stat { padding: clamp(26px, 2.4vw, 38px); border-radius: var(--radius); background: var(--card); }
.j-stat__num { color: var(--ink); font-size: clamp(42px, 3.8vw, 72px); line-height: 1; letter-spacing: -0.05em; }
.j-stat__label { margin-top: 14px; color: var(--muted); font-size: 18px; }
.j-stat:first-child { background: var(--lilac); }
.j-stat:first-child .j-stat__num,
.j-stat:first-child .j-stat__label { color: #131430; }

/* Quotes */
.j-qcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(30px, 3vw, 56px); }
.j-qcard { display: flex; flex-direction: column; gap: 20px; padding: clamp(26px, 2.6vw, 38px); border-radius: var(--radius); background: var(--card); }
.j-qcard__stars { color: #f2b10c; letter-spacing: 3px; }
.j-qcard__text { flex: 1; color: var(--ink); font-size: clamp(20px, 1.5vw, 24px); line-height: 1.4; letter-spacing: -0.02em; }
.j-qcard__who { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 16px; }
.j-qcard__who b { display: block; color: var(--ink); font-weight: 500; }
.j-qcard__avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--sky); color: #131430; font-weight: 600; }

/* People */
.j-persons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.j-person { padding: clamp(24px, 2.4vw, 34px); border-radius: var(--radius); background: var(--card); }
.j-person__tile { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 24px; border-radius: 18px; background: var(--lilac); color: #131430; font-size: clamp(40px, 3.4vw, 64px); letter-spacing: -0.05em; }
.j-person--sky .j-person__tile { background: var(--sky); }
.j-person--lime .j-person__tile { background: var(--lime); }
.j-person h3 { font-size: clamp(22px, 1.6vw, 28px); line-height: 1.15; }
.j-person p:not(.j-person__tile) { margin-top: 6px; color: var(--muted); font-size: 17px; }

/* Questions: the same open-and-close rows as the app list */
.j-faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
.j-faq__list { display: grid; gap: 6px; }
.j-faq__item { border-radius: var(--radius); transition: background 0.3s, box-shadow 0.3s; }
.j-faq__item[open] { background: var(--card); box-shadow: 0 10px 30px rgba(19, 20, 48, 0.06); }
.j-faq__item + .j-faq__item:not([open]) { border-top: 1px solid var(--line); border-radius: 0; }
.j-faq__item[open] + .j-faq__item { border-top: 0; }
.j-faq__item summary { position: relative; padding: 24px 70px 24px 26px; list-style: none; cursor: pointer; font-size: 20px; }
.j-faq__item summary::-webkit-details-marker { display: none; }
.j-faq__item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: var(--soft); font-size: 22px; line-height: 1; transition: transform 0.3s var(--j-ease), background 0.3s, color 0.3s; }
.j-faq__item[open] summary::after { background: var(--accent); color: #fff; transform: rotate(45deg); }
.j-faq__item p { margin-top: -8px; padding: 0 26px 24px; color: var(--muted); font-size: 17px; line-height: 1.6; }

/* Contact: a big title with detail rows on the left (like the app list), the form on a white card */
.j-contact__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
.j-contact__sub { margin: 14px 0 34px; color: var(--muted); font-size: 20px; line-height: 1.5; }
.j-contact__rows { display: grid; }
.j-crow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.j-crow:last-child { border-bottom: 1px solid var(--line); }
.j-crow__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--lime); color: #131430; }
.j-crow__icon .icon { width: 20px; height: 20px; }
.j-crow__label { color: var(--muted); font-size: 15px; }
.j-crow__value { margin-top: 2px; font-size: clamp(20px, 1.5vw, 24px); letter-spacing: -0.02em; }
.j-crow__value a { color: var(--ink); text-decoration: none; }
.j-crow__value a:hover { color: var(--accent-2); }
.j-crow__note { margin-top: 4px; color: var(--muted); font-size: 16px; }
.j-contact__form { padding: clamp(28px, 3.4vw, 54px); border-radius: var(--radius); background: var(--card); box-shadow: 0 30px 70px rgba(19, 20, 48, 0.07); }
.j-contact__form h3 { font-size: clamp(30px, 2.4vw, 42px); line-height: 1.08; letter-spacing: -0.045em; }
.j-contact__form > p { margin: 12px 0 30px; color: var(--muted); font-size: 18px; line-height: 1.5; }
.j-contact__form .jx-form p { margin-bottom: 18px; }
.j-contact__form .jx-form__row { gap: 0 18px; }
.j-contact__form .jx-form label { margin-bottom: 8px; color: var(--muted); font-size: 15px; font-weight: 500; }
.j-contact__form .jx-form input[type="text"],
.j-contact__form .jx-form input[type="email"],
.j-contact__form .jx-form select,
.j-contact__form .jx-form textarea,
.j-contact__form .wpcf7 input:not([type="checkbox"]):not([type="submit"]):not([type="hidden"]),
.j-contact__form .wpcf7 select,
.j-contact__form .wpcf7 textarea { min-height: 58px; padding: 14px 20px; border: 1px solid transparent; border-radius: 16px; background: #f2f2ee; color: var(--ink); font-size: 17px; }
.j-contact__form .jx-form textarea,
.j-contact__form .wpcf7 textarea { min-height: 160px; }
.j-contact__form .jx-form input:focus,
.j-contact__form .jx-form select:focus,
.j-contact__form .jx-form textarea:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(108, 78, 245, 0.14); }
.j-contact__form .jx-form__consent label { color: var(--muted); font-size: 15px; }
.j-contact__form .jx-form input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); }
.j-contact__form .jx-form button,
.j-contact__form .wpcf7 input[type="submit"] { display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 30px; border: 0; border-radius: var(--pill); background: var(--accent); color: #fff; font: inherit; font-size: 18px; font-weight: 500; cursor: pointer; transition: background 0.25s; }
.j-contact__form .jx-form button .icon { width: 18px; height: 18px; transition: transform 0.35s var(--j-ease); }
.j-contact__form .jx-form button:hover { background: var(--accent-2); }
.j-contact__form .jx-form button:hover .icon { transform: translateX(4px); }
[data-theme="dark"] .j-contact__form .jx-form input[type="text"],
[data-theme="dark"] .j-contact__form .jx-form input[type="email"],
[data-theme="dark"] .j-contact__form .jx-form select,
[data-theme="dark"] .j-contact__form .jx-form textarea { background: rgba(255, 255, 255, 0.06); }

/* Add-ons on the Pricing page: the rows on the left, a photo on the right */
.j-addons__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(30px, 5vw, 90px); align-items: stretch; }
.j-addons .j-title { margin-bottom: clamp(30px, 3vw, 50px); }
.j-addons__photo { margin: 0; min-height: 420px; }
.j-addons__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

/* Logo slider: full-colour logos, bigger, with a homepage-style title */
.logo-slider-section.j-logos,
.front .logo-slider-section { padding: clamp(50px, 6vw, 100px) 0; }
.logo-slider__label.j-title { max-width: 22ch; margin: 0 auto clamp(30px, 3vw, 50px); color: var(--ink); font-size: clamp(30px, 2.6vw, 48px); letter-spacing: -0.045em; text-transform: none; }
[data-theme] .logo-item { opacity: 1; }
[data-theme] .logo-item img { height: 80px; filter: none; }
.logo-track { gap: clamp(50px, 5vw, 90px); }
.logo-item .wp-block-image { margin: 0; }
[data-theme="light"] .logo-item__dark,
[data-theme="dark"] .logo-item__light { display: none; }

@media (max-width: 1100px) {
	.j-fcards--4 { grid-template-columns: repeat(2, 1fr); max-width: none; }
	.j-stats,
	.j-persons { grid-template-columns: repeat(2, 1fr); }
	.j-qcards,
	.j-faq__grid,
	.j-contact__grid,
	.j-addons__grid { grid-template-columns: 1fr; }
	.j-addons__photo { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 720px) {
	.j-hero--half { min-height: 0; }
	.j-hero--half .j-hero__grid { padding-top: 120px; }
	.j-fcards--4,
	.j-stats,
	.j-persons { grid-template-columns: 1fr; }
	[data-theme] .logo-item img { height: 60px; }
}

/* A page's own menu in the breadcrumb bar (Enterprise): centred between the crumbs and the socials. */
.crumb-bar--menu .crumb-bar__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.crumb-bar--menu .socials { justify-self: end; }
.crumb-menu { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.crumb-menu::-webkit-scrollbar { display: none; }
.crumb-menu a { padding: 2px 15px; color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.crumb-menu a:hover,
.crumb-menu a:focus-visible { background: var(--soft); }
.crumb-menu a.is-on { background-color: var(--accent-2); color: var(--white); box-shadow: 0 4px 14px rgba(19, 20, 48, 0.06); }
html { scroll-padding-top: calc(var(--j-head, 120px) + 10px); }
@media (max-width: 1100px) {
	.crumb-bar--menu .crumb-bar__in { grid-template-columns: minmax(0, 1fr) auto; }
	.crumb-bar--menu .crumb-menu { grid-column: 1 / -1; grid-row: 2; justify-self: center; max-width: 100%; }
}
@media (max-width: 720px) {
	.crumb-bar--menu .crumb-menu { justify-self: stretch; }
}

/* With a sub-menu the bar sticks under the header: it slides away with the audience tabs while
   scrolling down and comes back on the way up (main.js sets --j-hdr, the header's height). */
.crumb-bar--menu { position: sticky; top: var(--j-hdr, 0px); z-index: 15; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s; }
body.admin-bar .crumb-bar--menu { top: calc(var(--j-hdr, 0px) + 32px); }
.audience-hidden .crumb-bar--menu { transform: translateY(calc(-100% - var(--j-aud, 0px))); }
[data-theme="light"].scrolled .crumb-bar--menu { background: rgba(245, 245, 242, 0.85); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
[data-theme="dark"].scrolled .crumb-bar--menu { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.crumb-menu__title { margin-right: 6px; color: var(--accent-2) !important; font-weight: 600 !important; }
.crumb-menu a.crumb-menu__title.is-on { background: transparent; box-shadow: none; }
html:has(.crumb-bar--menu) { scroll-padding-top: calc(var(--j-hdr, 120px) + 64px); }
@media (prefers-reduced-motion: reduce) { .crumb-bar--menu { transition: none; } }

/* Links on the right of the audience bar: the same size as the tabs, never highlighted */
.audience__links { display: flex; gap: 4px; margin-left: auto; }
.audience__link { padding: 7px 14px 8px; border-radius: 12px 12px 0 0; color: #2b2c40; font-size: 14px; font-weight: 500; text-decoration: none; transition: color 0.2s; }
.audience__link:hover { color: #131430; text-decoration: underline; text-underline-offset: 4px; }
[data-theme="dark"] .audience__link { color: rgba(255, 255, 255, 0.8); }
.scrolled .audience__link { position: relative; }
@media (max-width: 720px) { .audience__links { display: none; } }

/* Full-width header: the tabs row and the breadcrumb row use the header's own side padding, so the
   crumbs start under the logo and the social icons end under the header button. */
.header-full .audience__in,
.header-full .crumb-bar__in { width: 100%; max-width: none; padding-left: min(var(--header-pad-l, 40px), 8vw); padding-right: min(var(--header-pad-r, 40px), 8vw); }

/* Intro under the hero: quick-start tiles */
.j-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.j-tiles:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.j-tile { position: relative; display: flex; flex-direction: column; min-height: 260px; padding: clamp(24px, 2.4vw, 34px); border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; transition: transform 0.45s var(--j-ease), box-shadow 0.45s var(--j-ease); }
.j-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(19, 20, 48, 0.08); }
.j-tile__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: auto; border-radius: 14px; background: var(--lilac); color: #131430; }
.j-tile--lime .j-tile__icon { background: var(--lime); }
.j-tile--sky .j-tile__icon { background: var(--sky); }
.j-tile__icon .icon { width: 24px; height: 24px; }
.j-tile__title { margin-top: 40px; padding-right: 50px; font-size: clamp(22px, 1.6vw, 28px); line-height: 1.15; letter-spacing: -0.03em; }
.j-tile__text { margin-top: 10px; padding-right: 50px; color: var(--muted); font-size: 17px; line-height: 1.5; }
.j-tile__go { position: absolute; right: clamp(20px, 2vw, 28px); bottom: clamp(20px, 2vw, 28px); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--bg); transition: transform 0.35s var(--j-ease), background 0.25s; }
.j-tile__go .icon { width: 18px; height: 18px; }
.j-tile:hover .j-tile__go { transform: translateX(4px); background: var(--accent); color: #fff; }
.j-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.j-intro { padding-bottom: clamp(50px, 6vw, 100px); }
@media (max-width: 1200px) { .j-tiles:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .j-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .j-tiles { grid-template-columns: 1fr; } .j-tile { min-height: 200px; } }

/* Slider arrows on the grey band: a clear outline, also when there is nothing further back */
.j-band .j-arrow:not(.j-arrow--solid) { border-color: rgba(19, 20, 48, 0.22); color: var(--ink); }
.j-arrow:disabled { opacity: 0.35; }

/* Journal: topic pills, a big lead story, photo cards */
.j-journal { padding-top: clamp(40px, 5vw, 80px); }
.j-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px, 3vw, 44px); }
.j-topics a { padding: 10px 20px; border-radius: var(--pill); background: var(--card); color: var(--ink); font-size: 16px; font-weight: 500; text-decoration: none; transition: background 0.2s, color 0.2s; }
.j-topics a:hover { background: var(--lilac); color: #131430; }
.j-topics a.is-on { background: var(--ink); color: var(--bg); }
.j-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.j-post__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; }
.j-post__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.j-post__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--j-ease); }
.j-post__link:hover .j-post__img img { transform: scale(1.04); }
.j-post__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: clamp(22px, 2.2vw, 30px); }
.j-post__topic { padding: 5px 12px; border-radius: var(--pill); background: var(--lilac); color: #131430; font-size: 14px; font-weight: 500; }
.j-post__title { margin-top: 16px; font-size: clamp(22px, 1.6vw, 28px); line-height: 1.15; letter-spacing: -0.03em; transition: color 0.2s; }
.j-post__text { margin-top: 10px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.j-post__meta { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 22px; color: var(--muted); font-size: 15px; }
.j-post__link:hover .j-post__title { color: var(--accent-2); }
.j-post__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The lead story: a wide photo card with the text over it */
.j-post--lead { grid-column: 1 / -1; }
.j-post--lead .j-post__link { position: relative; min-height: clamp(420px, 40vw, 560px); justify-content: flex-end; color: #fff; }
.j-post--lead .j-post__img { position: absolute; inset: 0; aspect-ratio: auto; }
.j-post--lead .j-post__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 8, 20, 0.7) 0%, rgba(10, 8, 20, 0.25) 55%, rgba(10, 8, 20, 0) 80%), linear-gradient(0deg, rgba(10, 8, 20, 0.55) 0%, rgba(10, 8, 20, 0) 50%); }
.j-post--lead .j-post__body { position: relative; z-index: 1; flex: none; max-width: 760px; padding: clamp(28px, 3.4vw, 54px); }
.j-post--lead .j-post__topic { background: rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
.j-post--lead .j-post__title { font-size: clamp(34px, 3.4vw, 60px); line-height: 1.02; letter-spacing: -0.05em; }
.j-post--lead .j-post__text { color: rgba(255, 255, 255, 0.86); font-size: 19px; }
.j-post--lead .j-post__meta { color: rgba(255, 255, 255, 0.8); }
.j-post--lead .j-post__link:hover .j-post__title { color: #fff; }
.j-post__go { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #131430; transition: transform 0.35s var(--j-ease); }
.j-post__go .icon { width: 20px; height: 20px; }
.j-post--lead .j-post__link:hover .j-post__go { transform: translateX(4px); }

/* Paging */
.j-paging .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(30px, 3vw, 50px); }
.j-paging .page-numbers { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 16px; border-radius: var(--pill); background: var(--card); color: var(--ink); font-weight: 500; text-decoration: none; }
.j-paging .page-numbers.current { background: var(--ink); color: var(--bg); }
.j-paging a.page-numbers:hover { background: var(--lilac); color: #131430; }
.j-journal__empty { color: var(--muted); font-size: 19px; }
@media (max-width: 1100px) { .j-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .j-posts { grid-template-columns: 1fr; } }

/* App panel with the hero card on top (Platform): the panel reaches up into the hero, the white card
   stays at its top and only the photo under it changes with the open item. */
.j-app--lift { --j-lift: clamp(240px, 27vw, 470px); position: relative; z-index: 3; padding-top: 0; }
.j-app--lift .j-app__grid { align-items: start; }
.j-app--lift .j-app__visual { margin-top: calc(-1 * var(--j-lift)); box-shadow: 0 40px 80px rgba(19, 20, 48, 0.12); }
.j-app--lift .j-app__copy { padding-top: clamp(70px, 8vw, 140px); }
.j-app--card .j-app__visual { display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 3vw, 46px); padding-top: clamp(40px, 4vw, 70px); }
.j-app__card { align-self: center; width: min(100%, 560px); box-shadow: 0 30px 60px rgba(19, 20, 48, 0.14); }
.j-app__panes { display: grid; place-items: center; width: 100%; }
@media (max-width: 1100px) {
	.j-app--lift { padding-top: clamp(60px, 7vw, 120px); }
	.j-app--lift .j-app__visual { margin-top: 0; }
	.j-app--lift .j-app__copy { padding-top: 0; }
}

/* The part of the lifted panel over the hero is see-through (the photo shows a little, blurred);
   from the hero's bottom edge down it is solid. The colour follows the open item. */
.j-app__visual { --j-panel: var(--sky); }
.j-app__visual[data-pane="1"] { --j-panel: var(--lilac); }
.j-app__visual[data-pane="2"] { --j-panel: var(--lime); }
@media (min-width: 1101px) {
	.j-app--lift .j-app__visual {
		background: linear-gradient(180deg, color-mix(in srgb, var(--j-panel) 45%, transparent) 0, color-mix(in srgb, var(--j-panel) 45%, transparent) calc(var(--j-lift) - 1px), var(--j-panel) var(--j-lift));
		-webkit-backdrop-filter: blur(10px) saturate(1.2);
		backdrop-filter: blur(3px) saturate(0.8);
	}
}

/* ============================================================== More sections (inc/sections.php) */

/* Round arrow / plus link: a core Button block with a circle after the text */
.j-round .wp-block-button__link,
.j-round .wp-block-button__link:hover { display: inline-flex; align-items: center; gap: 14px; min-height: 0; padding: 0 !important; border: 0; background: none !important; color: var(--ink); font-size: 18px; font-weight: 500; box-shadow: none; }
.j-round .wp-block-button__link::after { content: ""; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat; transition: transform 0.35s var(--j-ease), background-color 0.25s; }
.j-round--plus .wp-block-button__link::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.j-round .wp-block-button__link:hover::after { transform: translateX(4px); background-color: var(--accent); }
[data-theme="dark"] .j-round .wp-block-button__link::after { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131430' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.j-bcard > .wp-block-buttons { align-self: flex-end; }
.j-bcard--sky .j-round .wp-block-button__link,
.j-bcard--lime .j-round .wp-block-button__link { color: #131430; }

/* Photo rows, every other one flipped */
.j-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(30px, 6vw, 110px); align-items: center; }
.j-row + .j-row { margin-top: clamp(60px, 7vw, 130px); }
.j-row--flip .j-row__img { order: 2; }
.j-row__img { margin: 0; }
.j-row__img img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); }
.j-row__kicker { display: inline-block; padding: 6px 14px; border-radius: var(--pill); background: var(--lilac); color: #131430; font-size: 15px; font-weight: 500; }
.j-row__title { margin-top: 20px; font-size: clamp(32px, 3vw, 56px); line-height: 1.04; letter-spacing: -0.05em; text-wrap: balance; }
.j-row__text { margin-top: 16px; max-width: 34rem; color: var(--muted); font-size: 19px; line-height: 1.6; }
.j-row .j-ticks { margin: 26px 0 30px; }

/* Numbers on a dark band */
.j-dark { position: relative; isolation: isolate; overflow: hidden; margin: 0 clamp(8px, 1vw, 16px); border-radius: var(--radius); background: #131430; color: #fff; }
.j-dark::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(108, 78, 245, 0.45), transparent); }
.j-dark::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 60%; background: #fff; opacity: 0.06; -webkit-mask: url("../img/bg-lines.svg") center / cover no-repeat; mask: url("../img/bg-lines.svg") center / cover no-repeat; }
.j-dark__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(40px, 5vw, 90px); }
.j-dark .j-title { color: #fff; }
.j-dark__text { max-width: 30rem; margin-left: auto; color: rgba(255, 255, 255, 0.7); font-size: 20px; }
.j-dstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.j-dstat { padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.j-dstat__num { font-size: clamp(48px, 5vw, 96px); line-height: 1; letter-spacing: -0.05em; }
.j-dstat__label { margin-top: 14px; color: rgba(255, 255, 255, 0.7); font-size: 18px; }

/* Before and after */
.j-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1240px; margin: clamp(30px, 3vw, 56px) auto 0; }
.j-compare__col { padding: clamp(28px, 3vw, 48px); border-radius: var(--radius); }
.j-compare__col--before { border: 1px solid var(--line); }
.j-compare__col--after { background: var(--accent); color: #fff; }
.j-compare__col h3 { margin-bottom: 18px; font-size: clamp(24px, 2vw, 32px); }
.j-compare__line { position: relative; padding: 16px 0 16px 40px; border-top: 1px solid var(--line); font-size: 18px; }
.j-compare__col--after .j-compare__line { border-top-color: rgba(19, 20, 48, 0.12); }
.j-compare__line::before { content: ""; position: absolute; left: 0; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d5f72' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 12px no-repeat; }
.j-compare__col--before .j-compare__line { color: var(--muted); }
.j-compare__col--after .j-compare__line::before { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* Compliance badges */
.j-badges__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
.j-badges__copy .j-split__text { margin: 20px 0 0; }
.j-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.j-badge { position: relative; padding: 86px 26px 26px; border-radius: 20px; background: var(--card); }
.j-badge::before { content: ""; position: absolute; left: 26px; top: 26px; width: 44px; height: 44px; border-radius: 12px; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131430' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.6-7 9-4-1.4-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / 22px no-repeat; }
.j-badge__name { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.j-badge__text { margin-top: 4px; color: var(--muted); font-size: 15px; }

/* One big quote */
.j-bigquote { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); overflow: hidden; border-radius: var(--radius); background: var(--lilac); color: #131430; }
.j-bigquote__img { margin: 0; min-height: 520px; }
.j-bigquote__img img { width: 100%; height: 100%; object-fit: cover; }
.j-bigquote__body { display: flex; flex-direction: column; padding: clamp(32px, 4.4vw, 80px); }
.j-bigquote__mark { height: 60px; color: var(--accent); font-size: 140px; line-height: 1; }
.j-bigquote__text { font-size: clamp(26px, 2.4vw, 42px); line-height: 1.2; letter-spacing: -0.035em; text-wrap: pretty; }
.j-bigquote__who { margin-top: 30px; font-size: 17px; line-height: 1.5; }
.j-bigquote__who strong { font-weight: 600; }
.j-bigquote__metric { margin-top: auto; padding-top: 30px; border-top: 1px solid rgba(19, 20, 48, 0.15); font-size: 17px; }
.j-bigquote__metric strong { display: inline-block; margin-bottom: 4px; font-size: clamp(48px, 4.4vw, 80px); font-weight: 450; line-height: 1; letter-spacing: -0.05em; }

/* Photo mosaic */
.j-mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, clamp(180px, 18vw, 300px)); gap: 16px; }
.j-mosaic__img { margin: 0; overflow: hidden; border-radius: 20px; }
.j-mosaic__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--j-ease); }
.j-mosaic__img:hover img { transform: scale(1.04); }
.j-mosaic__img--1 { grid-column: 1 / 4; grid-row: 1 / 3; }
.j-mosaic__img--2 { grid-column: 4 / 6; grid-row: 1; }
.j-mosaic__img--3 { grid-column: 6 / 7; grid-row: 1 / 3; }
.j-mosaic__img--4 { grid-column: 4 / 5; grid-row: 2; }
.j-mosaic__img--5 { grid-column: 5 / 6; grid-row: 2; }

/* Call-to-action band */
.j-cta { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); min-height: 460px; overflow: hidden; border-radius: var(--radius); background: #131430; color: #fff; }
.j-cta::before { content: ""; position: absolute; z-index: -1; left: -10%; bottom: -60%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(108, 78, 245, 0.5), transparent); }
.j-cta__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 5vw, 90px); }
.j-cta h2 { color: #fff; font-size: clamp(36px, 3.6vw, 64px); line-height: 1.02; letter-spacing: -0.05em; }
.j-cta__text { max-width: 30rem; margin-top: 18px; color: rgba(255, 255, 255, 0.78); font-size: 20px; line-height: 1.5; }
.j-cta__actions { gap: 12px; margin-top: 32px; }
.j-cta .btn-ghost .wp-block-button__link { border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; color: #fff; }
.j-cta .btn-ghost .wp-block-button__link:hover { background: #fff; color: #131430; }
.j-cta__img { margin: 0; }
.j-cta__img img { width: 100%; height: 100%; object-fit: cover; }

/* Plan matrix (a core Table block; main.js marks ✓ and — cells) */
.j-matrix { margin: clamp(30px, 3vw, 56px) 0 0; overflow-x: auto; }
.j-matrix table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--radius); background: var(--card); }
.j-matrix th,
.j-matrix td { padding: 20px 24px; border: 0; border-bottom: 1px solid var(--line); text-align: center; font-size: 17px; }
.j-matrix tr > :first-child { text-align: left; color: var(--ink); font-weight: 500; }
.j-matrix tbody tr:last-child > * { border-bottom: 0; }
.j-matrix thead th { padding-top: 28px; padding-bottom: 24px; font-size: 21px; font-weight: 500; letter-spacing: -0.02em; }
.j-matrix--hi-3 tr > :nth-child(3) { background: rgba(108, 78, 245, 0.06); }
.j-matrix--hi-3 thead th:nth-child(3) { background: var(--accent); color: #fff; }
.j-matrix--hi-4 tr > :nth-child(4) { background: rgba(108, 78, 245, 0.06); }
.j-matrix--hi-4 thead th:nth-child(4) { background: var(--accent); color: #fff; }
.j-matrix td.is-yes { color: var(--accent-2); font-size: 20px; font-weight: 700; }
.j-matrix td.is-no { color: var(--muted); opacity: 0.5; }
.j-matrix td { color: var(--muted); }

/* What happens next */
.j-next { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: clamp(30px, 3vw, 56px); }
.j-next__step { position: relative; }
.j-next__step:not(:last-child)::after { content: ""; position: absolute; left: 66px; right: 0; top: 26px; height: 1px; background: var(--line); }
.j-next__num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 20px; font-weight: 500; }
.j-next__step:first-child .j-next__num { background: var(--accent); color: #fff; }
.j-next__step h3 { margin: 26px 0 10px; font-size: clamp(22px, 1.6vw, 28px); line-height: 1.15; }
.j-next__step p:not(.j-next__num) { color: var(--muted); font-size: 17px; line-height: 1.55; }

/* Logo wall */
.j-logowall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.j-logo { display: grid; place-items: center; height: clamp(110px, 10vw, 150px); border-radius: 20px; background: var(--card); transition: transform 0.4s var(--j-ease), box-shadow 0.4s var(--j-ease); }
.j-logo:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(19, 20, 48, 0.07); }
.j-logo .wp-block-image { margin: 0; }
.j-logo img { width: auto; height: clamp(56px, 5vw, 74px); }

/* Compact feature list */
.j-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 56px; margin-top: clamp(30px, 3vw, 56px); }
.j-li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; }
.j-li__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--card); color: var(--accent-2); }
.j-li__icon .icon { width: 22px; height: 22px; }
.j-li h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; }
.j-li p { margin-top: 6px; color: var(--muted); font-size: 17px; line-height: 1.55; }

@media (max-width: 1100px) {
	.j-row,
	.j-badges__grid,
	.j-bigquote,
	.j-cta,
	.j-dark__head { grid-template-columns: 1fr; }
	.j-row--flip .j-row__img { order: 0; }
	.j-dark__text { margin-left: 0; }
	.j-dstats,
	.j-next,
	.j-logowall { grid-template-columns: repeat(2, 1fr); }
	.j-next__step::after { display: none; }
	.j-list { grid-template-columns: repeat(2, 1fr); }
	.j-bigquote__img { min-height: 320px; }
	.j-cta__img { height: 320px; }
	.j-compare { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
	.j-badges,
	.j-list,
	.j-dstats { grid-template-columns: 1fr; }
	.j-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 180px; }
	.j-mosaic__img { grid-column: auto !important; grid-row: auto !important; }
	.j-mosaic__img--1 { grid-column: 1 / -1 !important; }
}

/* ================================================================ Single post (single.php) */
.j-article__head { max-width: 980px; padding-top: clamp(40px, 5vw, 90px); text-align: center; }
.j-article__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; color: var(--muted); font-size: 15px; }
.j-article__top a.j-post__topic { text-decoration: none; }
.j-article__title { margin-top: 24px; font-size: clamp(40px, 4.6vw, 84px); line-height: 1.02; letter-spacing: -0.05em; text-wrap: balance; }
.j-article__lede { max-width: 44rem; margin: 22px auto 0; color: var(--muted); font-size: clamp(19px, 1.4vw, 23px); line-height: 1.5; text-wrap: pretty; }
.j-article__by { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; color: var(--muted); font-size: 15px; text-align: left; }
.j-article__by b { display: block; color: var(--ink); font-size: 16px; font-weight: 500; }
.j-article__avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--lilac); color: #131430; font-weight: 600; }
.j-article__avatar--xl { width: 72px; height: 72px; border-radius: 20px; font-size: 28px; }
.j-article__img { width: min(var(--wrap), calc(100% - var(--j-gutter))); margin: clamp(36px, 4vw, 64px) auto 0; }
.j-article__img img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }
.j-article__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr); gap: 40px; padding: clamp(40px, 5vw, 80px) 0 clamp(30px, 4vw, 60px); }
.j-article__side { grid-column: 1; justify-self: end; }
.j-article__side .share { position: sticky; top: calc(var(--j-hdr, 110px) + 30px); flex-direction: column; align-items: center; gap: 10px; }
.j-article__side .share__label { color: var(--muted); font-size: 13px; }
.j-article__main { grid-column: 2; }
.j-article .entry { font-size: 20px; line-height: 1.7; }
.j-article .entry > * + * { margin-top: 1.1em; }
.j-article .entry h2 { margin-top: 1.8em; font-size: clamp(28px, 2.2vw, 38px); line-height: 1.12; letter-spacing: -0.04em; }
.j-article .entry h3 { margin-top: 1.6em; font-size: clamp(23px, 1.7vw, 28px); letter-spacing: -0.03em; }
.j-article .entry blockquote { margin: 1.6em 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--accent); font-size: 24px; line-height: 1.45; letter-spacing: -0.02em; }
.j-article .entry img { border-radius: 20px; }
.j-article .entry a { color: var(--accent-2); text-underline-offset: 4px; }
.j-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.j-article__tags a { padding: 7px 14px; border-radius: var(--pill); background: var(--card); color: var(--ink); font-size: 15px; text-decoration: none; }
.j-article__tags a:hover { background: var(--lilac); }
.j-article__author { display: flex; gap: 22px; align-items: flex-start; margin-top: 50px; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--radius); background: var(--card); }
.j-article__label { color: var(--muted); font-size: 14px; }
.j-article__author h2 { margin-top: 2px; font-size: 26px; letter-spacing: -0.03em; }
.j-article__author p:not(.j-article__label) { margin-top: 8px; color: var(--muted); font-size: 17px; }
.j-related__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: clamp(26px, 3vw, 44px); }
.j-related__all { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-size: 18px; font-weight: 500; text-decoration: none; }
.j-related__all i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--bg); transition: transform 0.35s var(--j-ease), background 0.25s; }
.j-related__all i .icon { width: 18px; height: 18px; }
.j-related__all:hover i { transform: translateX(4px); background: var(--accent); color: #fff; }
@media (max-width: 1100px) {
	.j-article__body { grid-template-columns: minmax(0, 1fr); }
	.j-article__side,
	.j-article__main { grid-column: 1; justify-self: stretch; }
	.j-article__side { order: 2; }
	.j-article__side .share { position: static; flex-direction: row; }
	.j-article__body { max-width: 760px; }
	.j-article__img img { aspect-ratio: 16 / 10; }
}

/* ================================================================ 404 */
.j-404__search { padding-bottom: 0; }
.j-search { display: flex; gap: 10px; max-width: 760px; margin: 0 auto; padding: 8px; border-radius: var(--pill); background: var(--card); box-shadow: 0 20px 50px rgba(19, 20, 48, 0.07); }
.j-search input { flex: 1; min-width: 0; padding: 0 22px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 18px; }
.j-search input:focus { outline: 0; }
.j-search:focus-within { box-shadow: 0 0 0 3px rgba(108, 78, 245, 0.25), 0 20px 50px rgba(19, 20, 48, 0.07); }
.j-search button { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; border: 0; border-radius: var(--pill); background: var(--accent); color: #fff; font: inherit; font-size: 17px; font-weight: 500; cursor: pointer; }
.j-search button .icon { width: 18px; height: 18px; }

/* ===================================================================== Product page, rich */

/* Buy box */
.pdp__title { font-size: clamp(36px, 3.2vw, 56px); font-weight: 450; letter-spacing: -0.05em; line-height: 1.04; }
.pdp__points { gap: 12px; border-top: 0; padding-top: 6px; }
.pdp__points li { font-size: 17px; }
.pdp__points .tick { width: 24px; height: 24px; background: var(--lime); color: #131430; }
.pdp__buy .single_add_to_cart_button,
.pdp__buy button.button { min-height: 58px !important; border-radius: var(--pill) !important; background: var(--accent) !important; font-size: 18px !important; font-weight: 500 !important; }
.pdp__trust li { border: 0; border-radius: 16px; background: var(--card); }
.pdp__trust .icon { color: var(--accent); }
.pdp__note { margin-top: 14px; color: var(--muted); font-size: 15px; }
.pdp__gallery .woocommerce-product-gallery__image img,
.pdp__gallery img { border-radius: var(--radius); }

/* Sections under the buy box */
.pdp-sec { margin-top: clamp(64px, 7vw, 120px); }
.pdp-sec > .j-title { margin-bottom: clamp(28px, 3vw, 48px); }
.pdp-kicker { margin-bottom: 14px; color: var(--accent-2); font-size: 15px; font-weight: 500; }

.pdp-stats { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 20px; }
.pdp-stat { padding: 30px; border-radius: var(--radius); background: var(--card); }
.pdp-stat__num { font-size: clamp(36px, 3.2vw, 56px); font-weight: 450; line-height: 1; letter-spacing: -0.05em; }
.pdp-stat__label { margin-top: 12px; color: var(--muted); font-size: 16px; }

.pdp-fcards { max-width: none; margin: 0; }
.pdp-fcards .j-fcard h3 { margin-bottom: 16px; }
.pdp-fcards .j-fcard p { margin-top: 0; }

.pdp-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); align-items: center; padding: clamp(28px, 4vw, 64px); border-radius: var(--radius); background: var(--card); }
.pdp-story__text { color: var(--muted); font-size: 18px; line-height: 1.65; }
.pdp-story__text p + p { margin-top: 14px; }
.pdp-story__text ul { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.pdp-story__text li { position: relative; padding-left: 34px; color: var(--ink); }
.pdp-story__text li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 6px; background: var(--lime); }
.pdp-story__text li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 8px; height: 5px; border-left: 2px solid #131430; border-bottom: 2px solid #131430; transform: rotate(-45deg); }
.pdp-story__media img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 20px; }

.pdp-steps { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 20px; }
.pdp-steps .j-step { width: auto; min-height: 300px; }

.pdp-faq .j-split { margin-bottom: 0; }
.pdp-faq .faq { margin: 0; }

/* Reviews and details tabs, and related products */
.pdp__tabs { margin-top: clamp(64px, 7vw, 120px); }
.pdp .related > h2,
.pdp .upsells > h2 { font-size: clamp(32px, 3vw, 54px); font-weight: 450; letter-spacing: -0.05em; }

@media (max-width: 1000px) {
	.pdp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pdp-story,
	.pdp-steps { grid-template-columns: 1fr; }
	.pdp-steps .j-step { min-height: 0; }
}

/* Product page fixes (these win over shop.css, which loads later) */
body .pdp .pdp__points .tick { width: 24px; height: 24px; border-radius: 7px; background: var(--lime); color: #131430; }
body .pdp .pdp__points .tick .icon { width: 14px; height: 14px; }
.pdp-story .j-title { margin-bottom: 22px; }

/* Reviews: a wide white card, the heading on the left, the list and the form on the right */
body .pdp .woocommerce-tabs ul.tabs { margin-bottom: 0; }
body .pdp .woocommerce-tabs .panel { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 70px); max-width: none; margin-top: 20px; padding: clamp(28px, 3.4vw, 54px); border: 0; border-radius: var(--radius); }
body .pdp .woocommerce-tabs .panel > h2,
body .pdp #reviews #comments > h2 { font-size: clamp(30px, 2.6vw, 44px); font-weight: 450; letter-spacing: -0.045em; }
body .pdp #reviews { display: contents; }
body .pdp #reviews #comments { grid-column: 1; }
body .pdp #review_form_wrapper { grid-column: 2; }
body .pdp #review_form .comment-reply-title { display: block; margin-bottom: 10px; font-size: 22px; font-weight: 500; }
body .pdp #review_form input:not([type="checkbox"]):not([type="submit"]),
body .pdp #review_form textarea { width: 100%; border: 0; border-radius: 12px; background: #f2f2ee; padding: 14px 16px; }
body .pdp #review_form .form-submit input[type="submit"] { min-height: 54px; padding: 0 28px; border: 0; border-radius: var(--pill); background: var(--accent); color: #fff; font-weight: 500; }
body .pdp .woocommerce-tabs .panel table.shop_attributes { grid-column: 1 / -1; }

/* Pair it with */
body .pdp .related > h2,
body .pdp .upsells > h2 { margin-bottom: clamp(24px, 3vw, 44px); font-size: clamp(32px, 3vw, 54px); font-weight: 450; letter-spacing: -0.05em; }
body .pdp .related,
body .pdp .upsells { margin-top: clamp(64px, 7vw, 120px); }

@media (max-width: 900px) {
	body .pdp .woocommerce-tabs .panel { grid-template-columns: 1fr; }
	body .pdp #reviews #comments,
	body .pdp #review_form_wrapper { grid-column: auto; }
}

/* Offer card: question left, ticks and a button right */
.j-offer__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px clamp(40px, 8vw, 140px); align-items: center; max-width: 1400px; margin: 0 auto; padding: clamp(32px, 5vw, 90px) clamp(26px, 6vw, 120px); border-radius: var(--radius); background: var(--card); }
.j-offer__title { max-width: 14ch; font-size: clamp(34px, 3vw, 54px); line-height: 1.05; letter-spacing: -0.05em; }
.j-offer__side .j-ticks { margin: 0 0 28px; }
.j-offer__side .btn-solid .wp-block-button__link { min-height: 60px; font-size: 19px; }
@media (max-width: 900px) { .j-offer__card { grid-template-columns: 1fr; } }

/* Shop with a sidebar: a wider, calm filter column that stays in view */
body .shop-layout { grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); margin-top: clamp(30px, 3vw, 50px); }
body .shop-side { top: calc(var(--j-head, 76px) + 20px); padding: 26px; border: 0; border-radius: var(--radius); background: var(--card); }
body .shop-side__block + .shop-side__block { margin-top: 24px; padding-top: 22px; border-top-color: var(--line); }
body .shop-side__block > h2 { margin-bottom: 12px; color: var(--ink); font-family: var(--font); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; text-transform: none; }
body .shop-side__cats a,
body .shop-side__check { padding: 11px 14px; border-radius: 14px; font-size: 16px; }
body .shop-side__cats a:hover,
body .shop-side__check:hover { background: var(--soft); }
body .shop-side__cats a.is-on,
body .shop-side__cats a[aria-current],
body .shop-side__cats .is-current > a { background: var(--accent); color: #fff; }
body .shop-side input[type="number"],
body .shop-side input[type="text"],
body .shop-side select { min-height: 45px; border: 0; border-radius: 12px; background: #f2f2ee; font-size: 15px; }
body .shop-side button,
body .shop-side .button { min-height: 45px; padding: 0 18px; border: 0; border-radius: var(--pill); background: var(--accent); color: #fff; font-weight: 500; }
body .shop-main .woocommerce-result-count { margin-bottom: 18px; color: var(--muted); font-size: 15px; }
body .shop-card { border: 0; border-radius: var(--radius); }
body .shop-card__title { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
body .shop-card .button,
body .shop-card .add_to_cart_button { border: 0; border-radius: var(--pill); background: var(--accent); color: #fff; }
[data-theme="dark"] body .shop-side input,
[data-theme="dark"] body .shop-side select { background: rgba(255, 255, 255, 0.06); }
@media (max-width: 1000px) {
	body .shop-layout { grid-template-columns: 1fr; }
	body .shop-side { position: static; }
}

/* Shop bar above the products: count left; show, grid size and sorting right */
.shop-viewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
body .shop-viewbar .woocommerce-result-count { margin: 0; color: var(--muted); font-size: 15px; }
.shop-viewbar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.shop-viewbar__show { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.shop-viewbar__show span { font-weight: 500; }
.shop-viewbar__show i { color: var(--line); font-style: normal; }
.shop-viewbar__show a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.shop-viewbar__show a:hover { color: var(--ink); }
.shop-viewbar__show a.is-on { color: var(--ink); font-weight: 600; }
.shop-viewbar__grid { display: flex; gap: 8px; }
.shop-viewbar__cols { display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: 2px; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.shop-viewbar__cols i { border-radius: 2px; background: #c9c9c4; transition: background 0.2s; }
.shop-viewbar__cols:hover i { background: var(--muted); }
.shop-viewbar__cols[aria-pressed="true"] i { background: var(--ink); }
.shop-viewbar__cols:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
body .shop-viewbar .woocommerce-ordering { margin: 0; }
body .shop-viewbar .woocommerce-ordering select { min-width: 220px; min-height: 48px; padding: 0 40px 0 18px; border: 0; border-radius: var(--pill); background-color: var(--card); color: var(--ink); font: inherit; font-size: 15px; }
/* The chosen number of products per row */
body .shop-main ul.products.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .shop-main ul.products.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .shop-main ul.products.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
	body .shop-main ul.products.cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.shop-viewbar__grid { display: none; }
	body .shop-main ul.products.cols-2,
	body .shop-main ul.products.cols-3,
	body .shop-main ul.products.cols-4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}

/* Featured products: heading left, tabs right, a row of products */
.jx-feat { margin: clamp(30px, 3vw, 50px) 0 clamp(50px, 5vw, 90px); }
.jx-feat__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(22px, 2.6vw, 36px); }
.jx-feat__kicker { margin-bottom: 8px; color: var(--muted); font-size: 16px; }
.jx-feat__title { font-size: clamp(30px, 2.6vw, 46px); font-weight: 450; letter-spacing: -0.045em; line-height: 1.05; }
.jx-feat__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.jx-feat__tabs button { position: relative; padding: 10px 16px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: color 0.2s; }
.jx-feat__tabs button::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform 0.3s var(--j-ease); }
.jx-feat__tabs button:hover { color: var(--ink); }
.jx-feat__tabs button[aria-selected="true"] { color: var(--ink); }
.jx-feat__tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.jx-feat__tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
body .jx-feat ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
body .jx-feat ul.products::before,
body .jx-feat ul.products::after { content: none; }
body .jx-feat ul.products li.product { width: auto; margin: 0; float: none; }
.jx-feat__pane:not([hidden]) { animation: jx-feat-in 0.45s var(--j-ease); }
@keyframes jx-feat-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 1100px) { body .jx-feat ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body .jx-feat ul.products { grid-template-columns: 1fr; } }
/* In the shop's product column: starts level with the filters, no space above. */
.shop-main > .jx-feat { margin-top: 0; padding-top: 0; }
.shop-main > .jx-feat .jx-feat__head { margin-top: 0; }

/* Narrow product cards (4 per row): price above a full-width button */
body .shop-main ul.products.cols-4 .shop-card__foot,
body .jx-feat .shop-card__foot { flex-wrap: wrap; gap: 10px; }
body .shop-main ul.products.cols-4 .shop-card__foot .button,
body .jx-feat .shop-card__foot .button { width: 100%; justify-content: center; }

/* Testimonial carousel: a full-width purple band, the active quote centred, the neighbours faded */
.j-tst { --j-tst-w: min(640px, 72vw); position: relative; overflow: hidden; padding: clamp(60px, 7vw, 110px) 0 clamp(64px, 7vw, 120px); background: var(--accent); color: #fff; }
.j-tst__title { margin-bottom: clamp(30px, 3vw, 48px); font-size: 17px; font-weight: 600; text-align: center; }
.j-tst__track { display: flex; gap: clamp(40px, 6vw, 120px); transition: transform 0.75s var(--j-ease); will-change: transform; }
.j-tst__track.is-jump { transition: none; }
.j-tst__slide { flex: 0 0 var(--j-tst-w); text-align: center; opacity: 0.32; transition: opacity 0.6s var(--j-ease); }
.j-tst__slide.is-on { opacity: 1; }
.j-tst__stars { color: #fff; font-size: 18px; letter-spacing: 4px; }
.j-tst__quote { margin: 22px 0 30px; color: #fff; font-size: clamp(24px, 2.2vw, 38px); font-weight: 600; line-height: 1.28; letter-spacing: -0.035em; text-wrap: balance; }
.j-tst__name { font-size: 18px; font-weight: 600; }
.j-tst__place { margin-top: 6px; color: rgba(255, 255, 255, 0.72); font-size: 16px; }
.j-tst__nav { position: absolute; left: 0; right: 0; top: 50%; display: flex; justify-content: center; gap: calc(var(--j-tst-w) + 80px); margin-top: 10px; pointer-events: none; }
.j-tst__arrow { display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; pointer-events: auto; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.j-tst__arrow .icon { width: 22px; height: 22px; }
.j-tst__arrow:first-child .icon { transform: rotate(180deg); }
.j-tst__arrow:hover { border-color: #fff; background: #fff; color: var(--accent); }
.j-tst__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Without script: the quotes simply wrap, all fully visible. */
html:not(.js) .j-tst__track { flex-wrap: wrap; justify-content: center; }
html:not(.js) .j-tst__slide { opacity: 1; }
html:not(.js) .j-tst__nav { display: none; }
@media (max-width: 900px) {
	.j-tst { --j-tst-w: 84vw; }
	.j-tst__track { gap: 24px; }
	.j-tst__nav { position: static; gap: 12px; margin-top: 34px; }
}
@media (prefers-reduced-motion: reduce) {
	.j-tst__track,
	.j-tst__slide { transition: none; }
}

/* Shop: round pictures with names under the banner, arrows at the sides */
.j-circles { padding: clamp(26px, 3vw, 44px) 0 0; }
.j-circles__in { position: relative; padding: 0 64px; }
.j-circles .j-slider__track { gap: clamp(16px, 2vw, 34px); margin: 0; padding: 4px 2px; scroll-padding-inline: 0; }
/* Soft edges where more circles wait off-screen; none at an end (its arrow is switched off there). */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.j-circles .j-slider__track { --fade-l: clamp(32px, 5vw, 72px); --fade-r: clamp(32px, 5vw, 72px); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); transition: --fade-l 0.3s, --fade-r 0.3s; }
.j-circles:has([data-j-prev]:disabled) .j-slider__track { --fade-l: 0px; }
.j-circles:has([data-j-next]:disabled) .j-slider__track { --fade-r: 0px; }
.j-circle { display: flex; flex-direction: column; align-items: center; gap: 14px; width: clamp(104px, 9vw, 140px); color: var(--ink); text-decoration: none; }
.j-circle__img { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--card); color: var(--accent-2); box-shadow: 0 0 0 0 var(--accent); transition: box-shadow 0.3s, transform 0.45s var(--j-ease); }
.j-circle__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--j-ease); }
.j-circle__img .icon { width: 34px; height: 34px; }
.j-circle__name { max-width: 100%; font-size: 16px; font-weight: 500; line-height: 1.3; text-align: center; }
.j-circle:hover .j-circle__img img { transform: scale(1.07); }
.j-circle:hover .j-circle__name { color: var(--accent-2); }
.j-circle.is-on .j-circle__img { box-shadow: 0 0 0 3px var(--accent); }
.j-circle:focus-visible { outline: none; }
.j-circle:focus-visible .j-circle__img { box-shadow: 0 0 0 3px var(--accent); }
.j-circles .j-slider__nav { position: absolute; left: 0; right: 0; top: calc(clamp(104px, 9vw, 140px) / 2 + 4px); display: flex; justify-content: space-between; margin: 0; transform: translateY(-50%); pointer-events: none; }
.j-circles .j-arrow { width: 42px; height: 42px; border: 0; background: var(--card); color: var(--ink); box-shadow: 0 6px 16px rgba(19, 20, 48, 0.08); pointer-events: auto; }
.j-circles .j-arrow .icon { width: 18px; height: 18px; }
.j-circles .j-arrow:hover { background: var(--ink); color: var(--bg); }
.j-circles .j-arrow:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 720px) {
	.j-circles__in { padding: 0; }
	.j-circles .j-slider__nav { display: none; }
}

/* Shop banner card (inc/shop-promo.php): a photo with a lime fade, a white headline, a link */
[data-theme] .page-hero--promo { padding-top: clamp(36px, 4vw, 60px); padding-bottom: clamp(36px, 4vw, 60px); }
.page-hero--promo .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 70px); align-items: center; }
.j-promo { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(220px, 19vw, 300px); padding: clamp(22px, 2.4vw, 34px); overflow: hidden; border-radius: 20px; color: #fff; text-decoration: none; box-shadow: 0 24px 50px rgba(19, 20, 48, 0.12); }
.j-promo__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; transition: transform 0.9s var(--j-ease); }
.j-promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--lime) 0%, rgba(229, 228, 110, 0.75) 30%, rgba(229, 228, 110, 0) 75%), linear-gradient(0deg, rgba(19, 20, 48, 0.25) 0%, rgba(19, 20, 48, 0) 50%); }
.j-promo__title { max-width: 12ch; color: #fff; font-size: clamp(28px, 2.4vw, 44px); line-height: 1.02; letter-spacing: -0.05em; text-shadow: 0 1px 12px rgba(19, 20, 48, 0.12); }
.j-promo__go { position: absolute; right: clamp(18px, 2vw, 28px); bottom: clamp(18px, 2vw, 28px); display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; border-radius: var(--pill); background: rgba(255, 255, 255, 0.92); color: #131430; font-size: 15px; font-weight: 500; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.j-promo__go i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #131430; color: #fff; transition: transform 0.35s var(--j-ease), background 0.25s; }
.j-promo__go .icon { width: 16px; height: 16px; }
.j-promo:hover .j-promo__img { transform: scale(1.04); }
.j-promo:hover .j-promo__go i { transform: translateX(3px); background: var(--accent); }
.j-promo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 900px) {
	.page-hero--promo .wrap { grid-template-columns: 1fr; }
	.j-promo__go span { display: none; }
	.j-promo__go { padding: 4px; }
}

/* Dark mode: the white call-to-action card (hero and the top of the app panel) turns deep navy, and
   the coloured app panel uses deep versions of its sky / lilac / lime. */
[data-theme="dark"] .j-hero__card { border: 1px solid rgba(255, 255, 255, 0.08); background: #1b1830; color: #fff; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45); }
[data-theme="dark"] .j-hero__card h2,
[data-theme="dark"] .j-hero__card-label,
[data-theme="dark"] .j-hero__card-note b { color: #fff; }
[data-theme="dark"] .j-hero__card .j-tick,
[data-theme="dark"] .j-hero__card-note { color: rgba(255, 255, 255, 0.72); }
[data-theme="dark"] .j-hero__tag { background: #3a3070; color: #fff; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); }
[data-theme="dark"] .j-hero__tag .icon { color: #c9bfff; }
[data-theme="dark"] .j-app__visual { --j-panel: #1f3247; background: var(--j-panel); }
[data-theme="dark"] .j-app__visual[data-pane="1"] { --j-panel: #2b2452; background: var(--j-panel); }
[data-theme="dark"] .j-app__visual[data-pane="2"] { --j-panel: #34341c; background: var(--j-panel); }
@media (min-width: 1101px) {
	[data-theme="dark"] .j-app--lift .j-app__visual { background: linear-gradient(180deg, color-mix(in srgb, var(--j-panel) 55%, transparent) 0, color-mix(in srgb, var(--j-panel) 55%, transparent) calc(var(--j-lift) - 1px), var(--j-panel) var(--j-lift)); }
}
[data-theme="dark"] .j-app__card { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); }

/* Dark mode: every pastel area turns into a deep version of its colour, with white text. */
:root[data-theme="dark"] { --d-lilac: #2b2452; --d-sky: #1f3247; --d-lime: #34341c; --d-peach: #3a2a22; }
[data-theme="dark"] .j-compare__col--after,
[data-theme="dark"] .j-bigquote,
[data-theme="dark"] .j-stat:first-child { background: var(--d-lilac); color: #fff; }
[data-theme="dark"] .j-compare__col--after .j-compare__line { border-top-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .j-bigquote__metric { border-top-color: rgba(255, 255, 255, 0.18); }
[data-theme="dark"] .j-bigquote__mark { color: #b9acff; }
[data-theme="dark"] .j-stat:first-child .j-stat__num,
[data-theme="dark"] .j-stat:first-child .j-stat__label { color: #fff; }
[data-theme="dark"] .j-row__kicker,
[data-theme="dark"] .j-post__topic,
[data-theme="dark"] .j-article__avatar { background: var(--d-lilac); color: #fff; }
[data-theme="dark"] .j-post--lead .j-post__topic { background: rgba(255, 255, 255, 0.18); }
[data-theme="dark"] .j-person__tile { background: var(--d-lilac); color: #fff; }
[data-theme="dark"] .j-person--sky .j-person__tile { background: var(--d-sky); }
[data-theme="dark"] .j-person--lime .j-person__tile { background: var(--d-lime); }
[data-theme="dark"] .j-qcard__avatar { background: var(--d-sky); color: #fff; }
[data-theme="dark"] .j-tile__icon { background: var(--d-lilac); color: #fff; }
[data-theme="dark"] .j-tile--lime .j-tile__icon { background: var(--d-lime); }
[data-theme="dark"] .j-tile--sky .j-tile__icon { background: var(--d-sky); }
[data-theme="dark"] .j-step__num { background: var(--d-sky); color: #fff; }
[data-theme="dark"] .j-fcard__icon,
[data-theme="dark"] .j-crow__icon { background: var(--d-lime); color: #e5e46e; }
[data-theme="dark"] .j-bcard--sky { background: var(--d-sky); color: #fff; }
[data-theme="dark"] .j-bcard--sky p { color: rgba(255, 255, 255, 0.75); }
[data-theme="dark"] .j-bcard--sky .j-round .wp-block-button__link,
[data-theme="dark"] .j-bcard--lime .j-round .wp-block-button__link { color: #fff; }
[data-theme="dark"] .j-bcard--lime { background: var(--d-lime); color: #fff; }
[data-theme="dark"] .j-bcard--photo::before { background: linear-gradient(90deg, var(--d-lime) 0%, rgba(52, 52, 28, 0) 100%); }
[data-theme="dark"] .j-badge::before { background-color: var(--d-lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5e46e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.6-7 9-4-1.4-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
[data-theme="dark"] .j-topics a:hover { background: var(--d-lilac); color: #fff; }
[data-theme="dark"] .j-paging a.page-numbers:hover,
[data-theme="dark"] .j-article__tags a:hover { background: var(--d-lilac); color: #fff; }
[data-theme="dark"] .j-promo::before { background: linear-gradient(90deg, var(--d-lime) 0%, rgba(52, 52, 28, 0.7) 30%, rgba(52, 52, 28, 0) 75%), linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 50%); }

/* Dark mode: a block given a white background in the editor shows the normal page colour instead
   (white is the light-mode page look; in dark mode it would be a glaring white band). */
[data-theme="dark"] .has-background[style*="background-color:#ffffff"],
[data-theme="dark"] .has-background[style*="background-color:#fff;"],
[data-theme="dark"] .has-background[style$="background-color:#fff"],
[data-theme="dark"] .has-background[style*="background-color:white"],
[data-theme="dark"] .has-white-background-color { background-color: transparent !important; }

/* Hand-drawn white arrow from the card down to the photo (app panel with the card, e.g. Platform) */
.j-app--card .j-app__panes { position: relative; }
.j-app--card .j-app__panes::before {
	content: "";
	position: absolute;
	z-index: 2;
	left: calc(50% - min(43%, 310px) - 8px);
	top: calc(-1 * clamp(26px, 3vw, 46px) - 40px);
	width: 150px;
	height: 150px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 110' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M44 4C24 16 22 31 38 39C56 48 59 63 41 71C27 77 21 89 23 103'/%3E%3Cpath d='M12 93L23 105L33 94'/%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(0 2px 12px rgba(19, 20, 48, 0.18));
	pointer-events: none;
}
@media (max-width: 720px) { .j-app--card .j-app__panes::before { display: none; } }

/* With the card on top, the photo is exactly as wide as the card. */
.j-app--card .j-app__photo { width: min(100%, 560px); }
.j-app--card .j-app__panes::before { left: calc(50% - min(50%, 280px) + 6px); }

/* Photo hero + the page's "Hero background" box (inc/posts.php) */
.j-hero[style*="--jx-hero-blur"] .j-hero__img { transform: scale(1.08); }
.j-hero[style*="--jx-hero-blur"] .j-hero__img img { filter: blur(calc(var(--jx-hero-blur, 0) * 0.25px)); }
.j-hero.has-hero-shade::before { content: ""; position: absolute; z-index: 0; right: -10%; top: -30%; width: 75%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--jx-hero-shade), transparent); opacity: 0.6; pointer-events: none; }
/* A plain hero is a light gradient panel with dark text — but only while it has no jx-xbg layer,
   which paints a dark gradient above the panel. A hero carrying jx-xbg stays dark, so its text
   must stay light (the rules further up). :not(:has(.jx-xbg)) keeps the two cases apart. */
.j-hero.is-hero-plain:not(:has(.jx-xbg)), .j-hero.j-hero--plain:not(:has(.jx-xbg)) { background: linear-gradient(120deg, #ebe7fb 0%, #f1efe9 55%, #e6eef7 100%); }
.j-hero.is-hero-plain .j-hero__img, .j-hero.j-hero--plain .j-hero__img { display: none; }
.j-hero.is-hero-plain::after, .j-hero.j-hero--plain::after { content: none; }
.j-hero.is-hero-plain > .j-hero__lines, .j-hero.j-hero--plain > .j-hero__lines { color: var(--accent); }
.j-hero.is-hero-plain:not(:has(.jx-xbg)) h1,
.j-hero.j-hero--plain:not(:has(.jx-xbg)) h1,
[data-theme] .j-hero.is-hero-plain:not(:has(.jx-xbg)) h1,
[data-theme] .j-hero.j-hero--plain:not(:has(.jx-xbg)) h1 { color: #131430; }
.j-hero.is-hero-plain:not(:has(.jx-xbg)) .j-hero__lede,
.j-hero.j-hero--plain:not(:has(.jx-xbg)) .j-hero__lede,
[data-theme] .j-hero.is-hero-plain:not(:has(.jx-xbg)) .j-hero__lede,
[data-theme] .j-hero.j-hero--plain:not(:has(.jx-xbg)) .j-hero__lede { color: #5d5f72; }
.j-hero.is-hero-plain:not(:has(.jx-xbg)) .j-hero__kicker, .j-hero.j-hero--plain:not(:has(.jx-xbg)) .j-hero__kicker { color: var(--accent-2); }
.j-hero.is-hero-plain:not(:has(.jx-xbg)) .btn-ghost .wp-block-button__link, .j-hero.j-hero--plain:not(:has(.jx-xbg)) .btn-ghost .wp-block-button__link { border-color: rgba(19, 20, 48, 0.25); background: rgba(255, 255, 255, 0.6); color: #131430; }
[data-theme="dark"] .j-hero.is-hero-plain, [data-theme="dark"] .j-hero.j-hero--plain { background: linear-gradient(120deg, #1d1838 0%, #121219 60%, #172231 100%); }
[data-theme="dark"] .j-hero.is-hero-plain h1, [data-theme="dark"] .j-hero.j-hero--plain h1 { color: #fff; }
[data-theme="dark"] .j-hero.is-hero-plain .j-hero__lede, [data-theme="dark"] .j-hero.j-hero--plain .j-hero__lede { color: rgba(255, 255, 255, 0.78); }
[data-theme="dark"] .j-hero.is-hero-plain .btn-ghost .wp-block-button__link, [data-theme="dark"] .j-hero.j-hero--plain .btn-ghost .wp-block-button__link { border-color: rgba(255, 255, 255, 0.4); background: transparent; color: #fff; }
/* The menu's name is a plain label but looks like the links next to it. */
span.crumb-menu__title { display: inline-flex; align-items: center; padding: 2px 15px; font-size: 15px; white-space: nowrap; cursor: default; }

/* ================================================================ Layout 2 (inc/sections-2.php) */
.j2-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-2); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.j2-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(108, 78, 245, 0.18); }
mark { padding: 0 0.12em; border-radius: 0.2em; background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%); color: inherit; }
[data-theme="dark"] mark { background: linear-gradient(transparent 58%, rgba(229, 228, 110, 0.35) 58%, rgba(229, 228, 110, 0.35) 92%, transparent 92%); }

/* Split hero */
.j2-hero { padding-top: clamp(40px, 5vw, 80px); }
.j2-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.j2-hero__title { margin-top: 20px; font-size: clamp(44px, 5vw, 92px); line-height: 0.98; letter-spacing: -0.055em; text-wrap: balance; }
.j2-hero__lede { max-width: 32rem; margin-top: 22px; color: var(--muted); font-size: clamp(18px, 1.4vw, 22px); line-height: 1.5; }
.j2-hero__actions { gap: 12px; margin-top: 34px; }
.j2-hero__visual { position: relative; }
.j2-hero__img { margin: 0; }
.j2-hero__img img { display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 32px; }
.j2-chip { position: absolute; display: flex; flex-direction: column; padding: 16px 22px; border-radius: 20px; background: var(--card); color: var(--muted); font-size: 14px; box-shadow: 0 24px 50px rgba(19, 20, 48, 0.14); animation: j-float 6s ease-in-out infinite alternate; }
.j2-chip strong { color: var(--ink); font-size: 30px; font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; }
.j2-chip--1 { left: -28px; bottom: 14%; }
.j2-chip--2 { right: -18px; top: 10%; animation-delay: -3s; background: var(--accent); color: rgba(255, 255, 255, 0.82); }
.j2-chip--2 strong { color: #fff; }
[data-theme="dark"] .j2-chip--1 { background: #1b1830; }

/* Word marquee */
.j2-marquee { overflow: hidden; margin: clamp(30px, 4vw, 70px) 0 0; padding: clamp(18px, 2vw, 28px) 0; border-block: 1px solid var(--line); }
.j2-marquee__line { display: inline-flex; gap: 0.6em; white-space: nowrap; font-size: clamp(40px, 5vw, 88px); font-weight: 450; letter-spacing: -0.05em; line-height: 1.1; animation: j2-marquee 40s linear infinite; }
.j2-marquee__line i { color: var(--accent); font-style: normal; font-size: 0.5em; align-self: center; }
@keyframes j2-marquee { to { transform: translateX(-50%); } }

/* Statement */
.j2-statement { text-align: center; }
.j2-statement__text { max-width: 22ch; margin: 22px auto 0; font-size: clamp(32px, 3.6vw, 64px); line-height: 1.12; letter-spacing: -0.045em; text-wrap: balance; }
.j2-statement--crm .j-title { max-width: 18ch; text-wrap: balance; }
.j2-statement__lede { max-width: 40rem; margin: 14px auto 0; color: var(--muted); font-size: clamp(16px, 1.15vw, 19px); line-height: 1.55; }

/* Tabs */
.j2-tabs { margin-top: clamp(26px, 3vw, 44px); }
.j2-tabs__bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: fit-content; max-width: 100%; margin: 0 auto clamp(26px, 3vw, 44px); padding: 6px; border-radius: var(--pill); background: var(--card); box-shadow: 0 10px 30px rgba(19, 20, 48, 0.05); }
.j2-tabs__bar button { padding: 12px 24px; border: 0; border-radius: var(--pill); background: transparent; color: var(--ink); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; transition: background 0.25s, color 0.25s; }
.j2-tabs__bar button:hover { background: var(--soft); }
.j2-tabs__bar button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.j2-tab { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(26px, 4vw, 70px); align-items: center; padding: clamp(18px, 2vw, 26px); border-radius: 32px; background: var(--card); }
.js .j2-tab:not(.is-on) { display: none; }
.js .j2-tab.is-on { animation: j2-in 0.6s var(--j-ease) both; }
@keyframes j2-in { from { opacity: 0; transform: translateY(14px); } }
.js .j2-tab__label { display: none; }
.j2-tab__label { grid-column: 1 / -1; font-weight: 600; }
.j2-tab__img { margin: 0; }
.j2-tab__img img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 22px; }
.j2-tab__copy { padding-right: clamp(0px, 2vw, 30px); }
.j2-tab__copy h3 { font-size: clamp(28px, 2.4vw, 44px); line-height: 1.06; letter-spacing: -0.045em; }
.j2-tab__copy > p { margin-top: 14px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.j2-tab__copy .j-ticks { margin: 24px 0 0; }
html:not(.js) .j2-tab + .j2-tab { margin-top: 20px; }

/* Sticky features */
.j2-sticky__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
.j2-sticky__side { position: sticky; top: calc(var(--j-hdr, var(--j-head, 110px)) + 40px); }
.j2-sticky__text { max-width: 28rem; margin: 18px 0 30px; color: var(--muted); font-size: 19px; line-height: 1.55; }
.j2-sticky__cards { display: grid; gap: 18px; }
.j2-scard { padding: clamp(28px, 3vw, 46px); border-radius: var(--radius); background: var(--card); }
.j2-scard__num { color: var(--accent-2); font-size: 15px; font-weight: 600; letter-spacing: 0.08em; }
.j2-scard h3 { margin-top: 30px; font-size: clamp(26px, 2.2vw, 38px); line-height: 1.08; letter-spacing: -0.045em; }
.j2-scard p:not(.j2-scard__num) { margin-top: 12px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.j2-scard:nth-child(2) { background: var(--lilac); color: #131430; }
.j2-scard:nth-child(2) p:not(.j2-scard__num) { color: rgba(19, 20, 48, 0.72); }
[data-theme="dark"] .j2-scard:nth-child(2) { background: var(--d-lilac); color: #fff; }
[data-theme="dark"] .j2-scard:nth-child(2) p:not(.j2-scard__num) { color: rgba(255, 255, 255, 0.75); }

/* Bento */
.j2-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(240px, auto)); gap: 18px; margin-top: clamp(26px, 3vw, 44px); }
.j2-bt { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: clamp(24px, 2.4vw, 34px); overflow: hidden; border-radius: var(--radius); background: var(--card); }
.j2-bt--photo { grid-column: 1 / 3; grid-row: 1 / 3; padding: 0; }
.j2-bt__img { height: 100%; margin: 0; }
.j2-bt__img img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.j2-bt--stat { background: var(--accent); color: #fff; }
.j2-bt__num { font-size: clamp(64px, 6vw, 120px); line-height: 0.9; letter-spacing: -0.06em; }
.j2-bt__label { color: rgba(255, 255, 255, 0.8); font-size: 17px; }
.j2-bt__quote { font-size: clamp(20px, 1.5vw, 25px); line-height: 1.35; letter-spacing: -0.02em; }
.j2-bt__who { color: var(--muted); font-size: 15px; }
.j2-bt--list { background: var(--lime); color: #131430; }
.j2-bt--list h3 { font-size: 24px; }
.j2-bt--list .j-tick { color: rgba(19, 20, 48, 0.78); font-size: 16px; }
.j2-bt--list .j-tick::before { border-color: #131430; }
.j2-bt--list .j-ticks { margin: 0; gap: 8px; }
.j2-bt--cta { background: #131430; color: #fff; }
.j2-bt--cta h3 { color: #fff; font-size: clamp(24px, 1.8vw, 30px); line-height: 1.12; }
.j2-bt--cta .j-round .wp-block-button__link { color: #fff; }
.j2-bt--cta .j-round .wp-block-button__link::after { background-color: var(--accent); }
.j2-bt--cta > .wp-block-buttons { align-self: flex-start; }
[data-theme="dark"] .j2-bt--list { background: var(--d-lime); color: #fff; }
[data-theme="dark"] .j2-bt--list .j-tick { color: rgba(255, 255, 255, 0.8); }
[data-theme="dark"] .j2-bt--list .j-tick::before { border-color: #e5e46e; }
[data-theme="dark"] .j2-bt--cta { background: #1b1830; }

/* Plan teaser */
.j2-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1240px; margin: clamp(30px, 3vw, 56px) auto 0; align-items: stretch; }
.j2-plan { display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 38px); border-radius: var(--radius); background: var(--card); }
.j2-plan--hi { background: #131430; color: #fff; transform: translateY(-14px); box-shadow: 0 30px 60px rgba(19, 20, 48, 0.2); }
.j2-plan__name { font-size: clamp(26px, 2vw, 34px); letter-spacing: -0.04em; }
.j2-plan__for { margin-top: 4px; color: var(--muted); font-size: 16px; }
.j2-plan--hi .j2-plan__for { color: rgba(255, 255, 255, 0.7); }
.j2-plan .j-ticks { flex: 1; margin: 26px 0 30px; }
.j2-plan--hi .j-tick { color: rgba(255, 255, 255, 0.82); }
.j2-plan--hi .j-tick::before { border-color: #b9acff; }
.j2-plan--hi .btn-ghost .wp-block-button__link { color: #fff; }
[data-theme="dark"] .j2-plan--hi { background: var(--accent); }

/* Centred closing band */
.j2-cta { padding: clamp(50px, 7vw, 120px) clamp(24px, 4vw, 60px); border-radius: 32px; background: var(--lilac); color: #131430; text-align: center; }
.j2-cta h2 { max-width: 16ch; margin: 0 auto; font-size: clamp(38px, 4.4vw, 80px); line-height: 1; letter-spacing: -0.055em; }
.j2-cta__text { max-width: 34rem; margin: 20px auto 0; color: rgba(19, 20, 48, 0.72); font-size: 20px; }
.j2-cta__actions { justify-content: center; gap: 12px; margin-top: 34px; }
.j2-cta .btn-ghost .wp-block-button__link { border-color: rgba(19, 20, 48, 0.3); color: #131430; }
[data-theme="dark"] .j2-cta { background: var(--d-lilac); color: #fff; }
[data-theme="dark"] .j2-cta__text { color: rgba(255, 255, 255, 0.75); }
[data-theme="dark"] .j2-cta .btn-ghost .wp-block-button__link { border-color: rgba(255, 255, 255, 0.4); color: #fff; }

@media (max-width: 1100px) {
	.j2-hero__grid,
	.j2-tab,
	.j2-sticky__grid { grid-template-columns: 1fr; }
	.j2-sticky__side { position: static; }
	.j2-bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
	.j2-bt--photo { grid-row: auto; }
	.j2-plans { grid-template-columns: 1fr; max-width: 560px; }
	.j2-plan--hi { transform: none; }
	.j2-chip--1 { left: 12px; }
	.j2-chip--2 { right: 12px; }
}
@media (max-width: 600px) {
	.j2-bento { grid-template-columns: 1fr; }
	.j2-bt--photo { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.j2-marquee__line,
	.j2-chip { animation: none; }
}

/* ================================================================ Sign-up pop-up (inc/signup.php) */
/* The page itself is never changed when the pop-up opens (no layout shift): the pop-up layer is a
   scroll container one pixel taller than the screen, and overscroll-behavior keeps the wheel and touch
   scrolling inside it, so the page behind does not move. */
.jx-su { overflow-y: auto; overscroll-behavior: contain; }
.jx-su::after { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: calc(100% + 1px); pointer-events: none; }
.jx-su { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); }
.jx-su[hidden] { display: none; }
.jx-su__scrim { position: absolute; inset: 0; background: rgba(19, 20, 48, 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.25s; }
.jx-su__box { position: relative; display: grid; grid-template-columns: 344px minmax(0, 1fr); width: min(960px, 100%); max-height: min(800px, calc(100svh - 24px)); overflow: hidden; border-radius: 28px; background: var(--card, #fff); box-shadow: 0 40px 100px rgba(19, 20, 48, 0.3); opacity: 0; transform: translateY(18px) scale(0.98); transition: opacity 0.3s var(--j-ease), transform 0.45s var(--j-ease); }
.jx-su.is-open .jx-su__scrim { opacity: 1; }
.jx-su.is-open .jx-su__box { opacity: 1; transform: none; }
[data-theme="light"] .jx-su__box { background: #fff; }
[data-theme="dark"] .jx-su__box { background: #17162a; }
.jx-su__close { position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); cursor: pointer; transition: background 0.2s; }
.jx-su__close:hover { background: var(--line); }
.jx-su__close .icon { width: 18px; height: 18px; }

/* Left panel */
.jx-su__side { display: flex; flex-direction: column; padding: 40px 34px 30px; overflow-y: auto; border-right: 1px solid var(--line); background: var(--bg); }
.jx-su__brand .brand { display: inline-flex; }
.jx-su__kicker { margin-top: 48px; color: var(--accent-2); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.jx-su__title { margin-top: 16px; color: var(--ink); font-size: 32px; line-height: 1.08; letter-spacing: -0.045em; }
.jx-su__text { margin-top: 16px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.jx-su__ticks { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.jx-su__ticks li { position: relative; padding-left: 28px; color: var(--ink); font-size: 15px; }
.jx-su__ticks li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.jx-su__foot { margin-top: auto; padding-top: 30px; }
.jx-su__quote { margin: 0; padding: 24px 0 0; border-top: 1px solid var(--line); }
.jx-su__quote p { color: var(--ink); font-size: 17px; line-height: 1.45; letter-spacing: -0.01em; }
.jx-su__quote footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--muted); font-size: 13px; }
.jx-su__quote footer b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
.jx-su__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lilac); color: #131430; font-weight: 600; }
[data-theme="dark"] .jx-su__avatar { background: var(--d-lilac, #2b2452); color: #fff; }
.jx-su__note { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); font-size: 13px; }
.jx-su__note .icon { width: 16px; height: 16px; flex: none; }

/* Form */
.jx-su__main { display: flex; flex-direction: column; padding: 34px clamp(24px, 4vw, 60px) 30px; overflow-y: auto; }
.jx-su__steps { display: flex; align-items: center; gap: 10px; margin: 0 50px 34px 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
.jx-su__steps li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.jx-su__steps li + li::before { content: ""; width: 28px; height: 1px; margin-right: 2px; background: var(--line); }
.jx-su__steps span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; font-size: 12px; font-weight: 600; }
.jx-su__steps li.is-on { color: var(--ink); font-weight: 600; }
.jx-su__steps li.is-on span { border-color: var(--accent); background: var(--accent); color: #fff; }
.jx-su__steps li.is-done span { border-color: var(--accent); color: var(--accent-2); }
.jx-su__step.is-on { animation: j2-in 0.4s var(--j-ease) both; }
.jx-su__step h2 { color: var(--ink); font-size: clamp(28px, 2.4vw, 36px); line-height: 1.08; letter-spacing: -0.045em; }
.jx-su__lede { margin-top: 8px; color: var(--muted); font-size: 16px; }
.jx-su__alt { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; margin-top: 26px; border: 1px solid var(--line); border-radius: var(--pill); color: var(--ink); font-size: 16px; font-weight: 500; text-decoration: none; transition: background 0.2s; }
.jx-su__alt:hover { background: var(--soft); }
.jx-su__g { color: var(--accent-2); font-size: 18px; font-weight: 700; }
.jx-su__or { display: flex; align-items: center; gap: 12px; margin: 22px 0 4px; color: var(--muted); font-size: 13px; }
.jx-su__or::before,
.jx-su__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.jx-su__field { margin: 18px 0 0; padding: 0; border: 0; }
.jx-su__field label,
.jx-su__field legend { display: block; margin-bottom: 8px; padding: 0; color: var(--ink); font-size: 15px; font-weight: 500; }
.jx-su__field input[type="text"],
.jx-su__field input[type="email"] { width: 100%; min-height: 52px; padding: 0 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; font-size: 16px; transition: border-color 0.2s, box-shadow 0.2s; }
[data-theme="light"] .jx-su__field input[type="text"],
[data-theme="light"] .jx-su__field input[type="email"] { background: #fff; }
.jx-su__field input::placeholder { color: var(--muted); opacity: 0.7; }
.jx-su__field input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(108, 78, 245, 0.15); }
.jx-su__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.jx-su__pills label { position: relative; margin: 0; cursor: pointer; }
.jx-su__pills input { position: absolute; opacity: 0; pointer-events: none; }
.jx-su__pills span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--pill); color: var(--ink); font-size: 15px; font-weight: 500; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.jx-su__pills label:hover span { border-color: var(--accent); }
.jx-su__pills input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }
.jx-su__pills input:focus-visible + span { box-shadow: 0 0 0 3px rgba(108, 78, 245, 0.3); }
.jx-su__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 26px; padding: 0 26px; border: 0; border-radius: var(--pill); background: var(--accent); color: #fff; font: inherit; font-size: 17px; font-weight: 500; cursor: pointer; transition: background 0.25s; }
.jx-su__btn:hover { background: var(--accent-2); }
.jx-su__btn .icon { width: 18px; height: 18px; transition: transform 0.35s var(--j-ease); }
.jx-su__btn:hover .icon { transform: translateX(4px); }
.jx-su__btn.is-busy { opacity: 0.7; pointer-events: none; }
.jx-su__row { display: flex; gap: 10px; }
.jx-su__row .jx-su__btn { flex: 1; }
.jx-su__back { min-height: 56px; margin-top: 26px; padding: 0 24px; border: 1px solid var(--line); border-radius: var(--pill); background: transparent; color: var(--ink); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.jx-su__back:hover { background: var(--soft); }
.jx-su__error { margin-top: 14px; color: #c43d3d; font-size: 14px; }
.jx-su__sum { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 22px 0 0; padding: 20px 22px; border-radius: 16px; background: var(--bg); font-size: 15px; }
.jx-su__sum dt { color: var(--muted); }
.jx-su__sum dd { margin: 0; color: var(--ink); font-weight: 500; }
.jx-su__consent { margin-top: 18px; color: var(--muted); font-size: 14px; }
.jx-su__consent label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.jx-su__consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); }
.jx-su__consent a { color: var(--ink); text-underline-offset: 3px; }
.jx-su__trap { position: absolute; left: -9999px; }
.jx-su__signin { margin-top: auto; padding-top: 26px; color: var(--muted); font-size: 15px; text-align: center; }
.jx-su__signin a { color: var(--accent-2); font-weight: 600; text-decoration: none; }
.jx-su__signin a:hover { text-decoration: underline; }
.jx-su__done { margin: auto 0; padding: 40px 0; text-align: center; }
.jx-su__check { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 24px; border-radius: 50%; background: var(--lilac); color: var(--accent-2); }
.jx-su__check .icon { width: 32px; height: 32px; }
[data-theme="dark"] .jx-su__check { background: var(--d-lilac, #2b2452); color: #c9bfff; }
.jx-su__done .jx-su__lede { max-width: 26rem; margin: 12px auto 0; }
.jx-su__done .jx-su__btn { width: auto; }

@media (max-width: 820px) {
	.jx-su { padding: 0; align-items: end; }
	.jx-su__box { grid-template-columns: 1fr; max-height: 94svh; border-radius: 24px 24px 0 0; }
	.jx-su__side { display: none; }
	.jx-su__steps { margin-right: 48px; font-size: 12px; }
	.jx-su__steps li + li::before { width: 14px; }
}
@media (max-width: 480px) {
	.jx-su__steps li:not(.is-on) { font-size: 0; gap: 0; }
	.jx-su__steps li:not(.is-on) span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.jx-su__box,
	.jx-su__scrim { transition: none; }
}

/* Header icons (light / dark, cart, account): one evenly spaced group, set apart from search and the button */
.bar__actions { gap: 6px; }
.bar__actions .theme-toggle,
.bar__actions a.cart,
.bar__actions .acct__btn { width: 44px; height: 44px; border-radius: 12px; }
.bar__actions > .btn { margin-left: 10px; }
.bar__actions > :first-child:not(.theme-toggle):not(.cart):not(.acct) { margin-right: 6px; }

/* Account menu (inc/account.php) */
.acct { position: relative; }
.acct__btn { display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; transition: background 0.25s, color 0.25s; }
.acct__btn svg { width: 22px; height: 22px; }
.acct__btn:hover,
.acct__btn[aria-expanded="true"] { background: rgba(91, 67, 214, 0.1); color: #4a33c8; }
[data-theme="dark"] .acct__btn:hover,
[data-theme="dark"] .acct__btn[aria-expanded="true"] { background: rgba(123, 102, 242, 0.18); color: #cdbfff; }
.acct__initial { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; }
.acct__menu { position: absolute; z-index: 40; top: calc(100% + 10px); right: 0; width: 270px; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 24px 60px rgba(19, 20, 48, 0.16); transform-origin: top right; animation: acct-in 0.22s var(--j-ease) both; }
[data-theme="light"] .acct__menu { background: #fff; }
[data-theme="dark"] .acct__menu { background: #1b1830; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
@keyframes acct-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.acct__head { display: grid; gap: 2px; margin: 0 0 6px; padding: 12px 14px 14px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 16px; }
.acct__head b { font-weight: 600; }
.acct__head span { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.acct__menu ul { margin: 0; padding: 0; list-style: none; }
.acct__menu a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; transition: background 0.2s; }
.acct__menu a:hover,
.acct__menu a:focus-visible { background: var(--soft); outline: none; }
.acct__menu a .icon { width: 18px; height: 18px; flex: none; color: var(--muted); }
.acct__sep { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .acct__menu { animation: none; } }
/* Menu header: "Hi, name" and the email on the left, the avatar on the right */
.acct__head { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.acct__head .acct__hi { grid-column: 1; overflow: hidden; color: var(--ink); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.acct__head .acct__sub { grid-column: 1; }
.acct__head .acct__avatar { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; overflow: visible; border-radius: 50%; background: var(--accent); color: #fff; font-size: 16px; font-weight: 600; }
.acct__head .acct__avatar svg { width: 20px; height: 20px; }
/* Signed in: a small dot on the person icon */
.acct__btn { position: relative; }
.acct__me { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; line-height: 1; transition: box-shadow 0.25s; }
.acct__btn.is-in:hover .acct__me,
.acct__btn.is-in[aria-expanded="true"] .acct__me { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* ================================================================ My account (woocommerce/myaccount) */
.woocommerce-account .page-body.shop { padding-top: clamp(24px, 3vw, 44px); }
.jx-acc { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; margin: 0; }

/* Side panel: user card, pages, plugin sections (boards, inbox), help. Folds to a rail of icons. */
.jx-acc { transition: grid-template-columns 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }

.jx-acc__side { position: sticky; top: calc(var(--j-hdr, var(--j-head, 110px)) + 16px); }
.jx-acc__toggle { display: none; }
.jx-acc__panel { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - var(--j-hdr, 110px) - 32px); box-sizing: border-box; padding: 12px; overflow: hidden auto; border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); scrollbar-width: thin; }
[data-theme="light"] .jx-acc__panel { background: #fff; }
.jx-acc__user { display: flex; align-items: center; gap: 10px; padding: 4px 2px 12px 4px; border-bottom: 1px solid var(--line); }
.jx-acc__avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 16px; font-weight: 600; }
.jx-acc__who { display: grid; flex: 1; min-width: 0; }
.jx-acc__who b { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.jx-acc__who span { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.jx-acc__fold { display: grid; flex: none; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.jx-acc__fold:hover { background: var(--soft); color: var(--ink); }
.jx-acc__fold svg { width: 18px; height: 18px; }
.jx-acc__nav { padding-bottom: 6px; }
.jx-acc__nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.jx-acc__nav a,
.jx-acc__help { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: var(--radius); color: var(--ink); font-size: 14px; font-weight: 400; text-decoration: none; transition: background 0.2s, color 0.2s; }
.jx-acc__nav a span,
.jx-acc__help span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jx-acc__nav a .icon,
.jx-acc__help svg { flex: none; width: 18px; height: 18px; color: var(--muted); transition: color 0.2s; }
.jx-acc__nav a:hover,
.jx-acc__help:hover { background: var(--soft); }
.jx-acc__nav li.is-active a,
.jx-acc__nav a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 500; }
.jx-acc__nav li.is-active a .icon,
.jx-acc__nav a[aria-current="page"] .icon { color: var(--accent); }
.jx-acc__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-style: normal; font-weight: 600; }
.jx-acc__badge[hidden] { display: none; }
.jx-acc__out { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.jx-acc__help { margin-top: auto; color: var(--muted); }
.jx-acc__panel > .jx-acc__help { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding-top: 6px; min-height: 44px; }

/* folded: icons only */
@media (min-width: 901px) {
	.jx-acc.is-folded { grid-template-columns: 64px minmax(0, 1fr); }
	.jx-acc.is-folded .jx-acc__panel { align-items: center; padding: 10px 8px; }
	.jx-acc.is-folded .jx-acc__user { flex-direction: column; gap: 8px; padding: 2px 0 10px; }
	.jx-acc.is-folded .jx-acc__who,
	.jx-acc.is-folded .jx-acc__nav a span,
	.jx-acc.is-folded .jx-acc__help span { display: none; }
	.jx-acc.is-folded .jx-acc__nav,
	.jx-acc.is-folded .jx-acc__user { width: 100%; }
	.jx-acc.is-folded .jx-acc__nav ul { justify-items: center; }
	.jx-acc.is-folded .jx-acc__nav a,
	.jx-acc.is-folded .jx-acc__help { justify-content: center; width: 44px; padding: 0; }
	.jx-acc.is-folded .jx-acc__panel > .jx-acc__help { border-top: 0; }
	.jx-acc.is-folded .jx-acc__badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
	.jx-acc.is-folded .jx-acc__fold svg { transform: scaleX(-1); }
}
@media (max-width: 900px) {
	.jx-acc__fold { display: none; }
	.jx-acc__panel { max-height: none; }
}

/* Overview */
.jx-dash { display: grid; gap: 20px; min-width: 0; width: 100%; grid-template-columns: minmax(0, 1fr); }
.jx-dash__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 6px 0 4px; }
.jx-dash__head h1 { color: var(--ink); font-size: clamp(32px, 3vw, 52px); line-height: 1.04; letter-spacing: -0.05em; }
.jx-dash__edit { display: inline-flex; align-items: center; min-height: 45px; padding: 0 22px; border: 1px solid var(--line); border-radius: var(--pill); color: var(--ink); font-weight: 500; text-decoration: none; transition: background 0.2s; }
.jx-dash__edit:hover { background: var(--soft); }
.jx-dash__plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; min-width: 0; max-width: 100%; box-sizing: border-box; padding: clamp(24px, 3vw, 40px); contain: paint; }
.jx-dash__plan > :not(.jx-dash__top):not(.jx-dash__plan-actions) { flex: 1 1 14rem; min-width: 0; }
.jx-dash__eyebrow { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.jx-dash__dek { max-width: 34rem; margin-top: 8px; color: var(--muted); font-size: 16px; }
.jx-dash__plan .jx-dash__eyebrow { color: #b9acff; }
.jx-dash__plan h2 { margin-top: 8px; color: #fff; font-size: clamp(28px, 2.4vw, 40px); letter-spacing: -0.045em; }
.jx-dash__plan .jx-dash__dek { color: rgba(255, 255, 255, 0.72); }
.jx-dash__plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.jx-dash__plan .jx-dash__link { color: #fff; }
.jx-dash__link { color: var(--accent-2); font-weight: 500; text-decoration: none; }
.jx-dash__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.jx-dash__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; min-width: 0; max-width: 100%; }
.jx-stat { display: grid; gap: 4px; min-width: 0; padding: 22px; border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; transition: transform 0.35s var(--j-ease), box-shadow 0.35s var(--j-ease); }
[data-theme="light"] .jx-stat,
[data-theme="light"] .jx-dash__card { background: #fff; }
a.jx-stat:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(19, 20, 48, 0.07); }
.jx-stat__icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px; background: var(--lilac); color: #131430; }
.jx-stat__icon .icon { width: 20px; height: 20px; }
.jx-stat__icon--sky { background: var(--sky); }
.jx-stat__icon--lime { background: var(--lime); }
.jx-stat__icon--peach { background: #f6dcc8; }
.jx-stat__num { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.08em; min-width: 0; overflow-wrap: anywhere; font-size: 32px; line-height: 1; letter-spacing: -0.04em; }
.jx-stat__num .cw-money__rest { font-size: 0.46em; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); line-height: 1; }
.jx-stat__label { color: var(--muted); font-size: 14px; }
.jx-dash__card { min-width: 0; max-width: 100%; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--radius); background: var(--card); }
.jx-dash__card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.jx-dash__card-head h2 { font-size: 22px; letter-spacing: -0.03em; }
.jx-orders { margin: 0; padding: 0; list-style: none; }
.jx-orders a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 14px 10px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background 0.2s; }
.jx-orders li:first-child a { border-top: 0; }
.jx-orders a:hover { background: var(--soft); }
.jx-orders__what { display: grid; min-width: 0; }
.jx-orders__what b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.jx-orders__what small { color: var(--muted); font-size: 13px; }
.jx-orders__more { color: var(--muted); font-size: 13px; }
.jx-orders__status { padding: 5px 12px; border-radius: var(--pill); background: var(--soft); font-size: 13px; font-weight: 500; white-space: nowrap; }
.jx-orders__status--completed { background: #dff3e6; color: #1d6b3a; }
.jx-orders__status--processing { background: var(--lilac); color: #3d2bb0; }
.jx-orders__status--on-hold,
.jx-orders__status--pending { background: #fbeccb; color: #7a5300; }
.jx-orders__status--cancelled,
.jx-orders__status--failed,
.jx-orders__status--refunded { background: #f8dede; color: #8d2424; }
.jx-orders__total { min-width: 80px; font-weight: 600; text-align: right; }
.jx-dash__empty { color: var(--muted); }
.jx-dash__help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--radius); background: var(--lilac); color: #131430; }
.jx-dash__help h2 { font-size: 24px; letter-spacing: -0.03em; }
.jx-dash__help p { max-width: 36rem; margin-top: 6px; color: rgba(19, 20, 48, 0.72); }
.jx-dash__help .btn--ghost { border: 1px solid rgba(19, 20, 48, 0.3); color: #131430; }

/* The other account pages: tables, addresses and forms on white cards */
.jx-acc__main.is-page { padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--card); }
[data-theme="light"] .jx-acc__main.is-page { background: #fff; }
.jx-acc__title { margin-bottom: 18px; color: var(--ink); font-size: clamp(28px, 2.4vw, 40px); line-height: 1.06; letter-spacing: -0.045em; }
.jx-acc__main > p:first-child,
.jx-acc__main .woocommerce-Addresses + p { margin-bottom: 16px; }
.jx-acc__main table.shop_table { width: 100%; border: 0; border-collapse: collapse; }
.jx-acc__main table.shop_table th,
.jx-acc__main table.shop_table td { padding: 14px 10px; border: 0; border-bottom: 1px solid var(--line); text-align: left; }
.jx-acc__main table.shop_table thead th { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.jx-acc__main .woocommerce-button,
.jx-acc__main .button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--pill); background: var(--accent); color: #fff !important; font-size: 14px; font-weight: 500; text-decoration: none; }
.jx-acc__main .woocommerce-button:hover,
.jx-acc__main .button:hover { background: var(--accent-2); }
.jx-acc__main .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.jx-acc__main .woocommerce-Address { width: auto; float: none; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); }
.jx-acc__main .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.jx-acc__main .woocommerce-Address-title h2 { font-size: 20px; }
.jx-acc__main .woocommerce-Address-title a { color: var(--accent-2); font-weight: 500; }
.jx-acc__main address { color: var(--muted); font-style: normal; line-height: 1.6; }
.jx-acc__main .form-row label { display: block; margin-bottom: 6px; color: var(--ink); font-size: 15px; font-weight: 500; }
.jx-acc__main input.input-text,
.jx-acc__main select,
.jx-acc__main textarea,
.jx-login input.input-text { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; }
.jx-acc__main input.input-text:focus,
.jx-login input.input-text:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(108, 78, 245, 0.15); }
.jx-acc__main fieldset { margin: 24px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
/* Room between the last field group and the Save button (Account details) */
.jx-acc__main fieldset + p,
.jx-acc__main fieldset + .clear + p,
.jx-acc__main .woocommerce-EditAccountForm > p:has(> [name="save_account_details"]) { margin-top: 32px; margin-bottom: 0; }
.jx-acc__main legend { padding: 0 8px; font-weight: 600; }

/* Sign in (signed out) */
.jx-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 20px; max-width: 1080px; margin: 0 auto; align-items: stretch; }
.jx-login__card,
.jx-login__new { padding: clamp(28px, 4vw, 56px); border-radius: 28px; }
.jx-login__card { background: var(--card); }
[data-theme="light"] .jx-login__card { background: #fff; }
.jx-login__card h1 { font-size: clamp(32px, 3vw, 48px); letter-spacing: -0.05em; }
.jx-login__lede { margin: 8px 0 24px; color: var(--muted); font-size: 17px; }
.jx-login .form-row { margin: 0 0 16px; }
.jx-login .form-row label { display: block; margin-bottom: 6px; font-weight: 500; }
.jx-login .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 0 16px !important; color: var(--muted); font-weight: 400 !important; }
.jx-login .woocommerce-form-login__rememberme input { accent-color: var(--accent); }
.jx-login button.button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; border: 0; border-radius: var(--pill); background: var(--accent); color: #fff; font: inherit; font-size: 17px; font-weight: 500; cursor: pointer; }
.jx-login button.button:hover { background: var(--accent-2); }
.jx-login .lost_password { margin-top: 14px; text-align: center; }
.jx-login .lost_password a { color: var(--accent-2); }
.jx-login__new { display: flex; flex-direction: column; background: var(--lilac); color: #131430; }
.jx-login__kicker { color: #4a33c8; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.jx-login__new h2 { margin-top: 12px; font-size: clamp(28px, 2.4vw, 38px); line-height: 1.08; letter-spacing: -0.045em; }
.jx-login__ticks { display: grid; gap: 10px; margin: 22px 0 28px; padding: 0; list-style: none; }
.jx-login__ticks li { position: relative; padding-left: 28px; }
.jx-login__ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.jx-login__start { align-self: flex-start; }
.jx-login__register { margin-top: auto; padding-top: 24px; }
.jx-login__register summary { color: #4a33c8; font-weight: 600; cursor: pointer; }
.jx-login__register form { margin-top: 16px; }
.jx-login__register input.input-text { background: #fff; color: #131430; }

/* Dark mode */
[data-theme="dark"] .jx-acc__panel,
[data-theme="dark"] .jx-stat,
[data-theme="dark"] .jx-dash__card,
[data-theme="dark"] .jx-acc__main.is-page,
[data-theme="dark"] .jx-login__card { background: #17162a; }
[data-theme="dark"] .jx-glowcard { background: #1b1830; }
[data-theme="dark"] .jx-stat__icon { background: var(--d-lilac); color: #fff; }
[data-theme="dark"] .jx-stat__icon--sky { background: var(--d-sky); }
[data-theme="dark"] .jx-stat__icon--lime { background: var(--d-lime); }
[data-theme="dark"] .jx-stat__icon--peach { background: var(--d-peach); }
[data-theme="dark"] .jx-dash__help,
[data-theme="dark"] .jx-login__new { background: var(--d-lilac); color: #fff; }
[data-theme="dark"] .jx-dash__help p { color: rgba(255, 255, 255, 0.75); }
[data-theme="dark"] .jx-dash__help .btn--ghost { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
[data-theme="dark"] .jx-login__kicker,
[data-theme="dark"] .jx-login__register summary { color: #c9bfff; }

@media (max-width: 1100px) {
	.jx-dash__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.jx-dash__plan-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
	.jx-stat { padding: 18px; }
	.jx-stat__num { font-size: clamp(22px, 6.4vw, 28px); }
}
@media (max-width: 900px) {
	.jx-acc,
	.jx-login { grid-template-columns: 1fr; }
	.jx-acc__side { position: static; }
	.jx-acc__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 18px; border: 0; border-radius: var(--radius); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
	[data-theme="light"] .jx-acc__toggle { background: #fff; }
	[data-theme="dark"] .jx-acc__toggle { background: #17162a; }
	.jx-acc__toggle-meta { color: var(--muted); font-size: 13px; }
	.jx-acc__toggle-now { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
	.jx-acc__toggle-now svg { width: 18px; height: 18px; transition: transform 0.25s; }
	.jx-acc__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
	.js .jx-acc__panel { display: none; margin-top: 8px; }
	.js .jx-acc__side.is-open .jx-acc__panel { display: block; }
	.jx-acc__main .woocommerce-Addresses { grid-template-columns: 1fr; }
	.jx-orders a { grid-template-columns: minmax(0, 1fr) auto; }
	.jx-orders__status { display: none; }
}

/* Addresses: two clean cards side by side (WooCommerce's float clearing must not become grid items) */
.jx-acc__main .woocommerce-Addresses::before,
.jx-acc__main .woocommerce-Addresses::after { content: none; display: none; }
.jx-acc__main .woocommerce-Addresses .col-1,
.jx-acc__main .woocommerce-Addresses .col-2 { float: none; width: auto; max-width: none; }
.jx-acc__main.is-page > p:not(.form-row) { margin: 0 0 20px; color: var(--muted); font-size: 16px; }
.jx-acc__main .woocommerce-Address { display: flex; flex-direction: column; gap: 14px; background: var(--bg); }
.jx-acc__main .woocommerce-Address-title { margin: 0; }
.jx-acc__main .woocommerce-Address-title::before,
.jx-acc__main .woocommerce-Address-title::after { content: none; }
.jx-acc__main .woocommerce-Address-title h2 { margin: 0; font-size: 19px; letter-spacing: -0.02em; }
.jx-acc__main .woocommerce-Address-title .edit { float: none; flex: none; padding: 7px 14px; border-radius: var(--pill); background: var(--accent); color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.jx-acc__main .woocommerce-Address-title .edit:hover { background: var(--accent-2); }
.jx-acc__main .woocommerce-Address address { margin: 0; font-size: 15px; }
/* Edit address form: two fields per row where WooCommerce asks for it */
.jx-acc__main .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.jx-acc__main .woocommerce-address-fields__field-wrapper .form-row { float: none; width: auto; margin: 0 0 16px; }
.jx-acc__main .woocommerce-address-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
.jx-acc__main .woocommerce-address-fields__field-wrapper::before,
.jx-acc__main .woocommerce-address-fields__field-wrapper::after { content: none; }
.jx-acc__main .select2-container .select2-selection--single { height: 50px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.jx-acc__main .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 16px; line-height: 48px; color: var(--ink); }
.jx-acc__main .select2-container .select2-selection--single .select2-selection__arrow { height: 48px; right: 10px; }
@media (max-width: 700px) {
	.jx-acc__main .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
}
/* Address cards: the heading and its button stacked, both lined up on the left */
.jx-acc__main .woocommerce-Address-title { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; text-align: left; }
.jx-acc__main .woocommerce-Address-title h2 { width: 100%; text-align: left; }
.jx-acc__main .woocommerce-Address { align-items: stretch; text-align: left; }

/* WooCommerce notices: room for the icon on the left, one icon per kind (error, success, info) */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info { position: relative; padding: 16px 20px 16px 56px !important; list-style: none; }
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before { content: "" !important; display: block !important; position: absolute; left: 20px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.2v.1'/%3E%3C/svg%3E") center / 14px no-repeat; font-family: inherit !important; }
.woocommerce-error { border-top-color: #d63b3b !important; }
.woocommerce-error::before { background-color: #d63b3b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 16.8v.1'/%3E%3C/svg%3E"); }
.woocommerce-message { border-top-color: #2f9e5b !important; }
.woocommerce-message::before { background-color: #2f9e5b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E"); }
.woocommerce-error li + li { margin-top: 6px; }
.woocommerce-error li::before { content: none; }

/* My account + Core Workspaces: trial bar, workspace card and the getting-started checklist */
.jx-dash__trial { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.12); }
.jx-dash__trial::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: linear-gradient(90deg, #b9acff, var(--lime)); }
.jx-dash__ws { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.jx-ws h2 { margin-top: 6px; font-size: clamp(24px, 2vw, 32px); letter-spacing: -0.04em; }
.jx-ws .jx-dash__eyebrow { color: var(--accent-2); }
.jx-ws__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px 34px; margin: 20px 0 0; }
.jx-ws__facts dt { color: var(--muted); font-size: 13px; }
.jx-ws__facts dd { margin: 2px 0 0; color: var(--ink); font-weight: 500; }
.jx-ws__goals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.jx-ws__goals span { padding: 6px 12px; border-radius: var(--pill); background: var(--lilac); color: #131430; font-size: 13px; font-weight: 500; }
.jx-check__sum { cursor: pointer; list-style: none; }
.jx-check__sum::-webkit-details-marker { display: none; }
.jx-check__sum .jx-dash__card-head { margin-bottom: 0; gap: 12px; }
.jx-check__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.jx-check__title h2 { margin: 0; }
.jx-check__cheers {
	padding: 4px 10px;
	border-radius: 999px;
	background: #e7f8ef;
	color: #1d6b3a;
	font-size: 13px;
	font-weight: 700;
}
.jx-check__count { margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 600; }
.jx-check__chev { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: transform 0.35s var(--j-ease), background 0.2s; }
.jx-check__chev svg { width: 16px; height: 16px; }
.jx-check__sum:hover .jx-check__chev { background: var(--soft); }
.jx-check__fold[open] .jx-check__chev { transform: rotate(90deg); }
.jx-check__fold[open] .jx-check__list { animation: jx-fold 0.35s var(--j-ease); }
.jx-check__fold:not([open]) .jx-check__bar { display: none; }
[data-theme="dark"] .jx-check__cheers { background: #1d6b3a; color: #e7f8ef; }
[data-theme="dark"] .jx-check__chev { color: #fff; }
.jx-check__bar { position: relative; display: block; height: 6px; margin: 4px 0 14px; overflow: hidden; border-radius: 6px; background: var(--soft); }
.jx-check__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: 6px; background: var(--accent); transition: width 0.6s var(--j-ease); }
.jx-check__list { margin: 0; padding: 0; list-style: none; }
.jx-check__list a,
.jx-check__row { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-radius: 12px; color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.jx-check__list a:hover { background: var(--soft); }
.jx-check__list a i { margin-left: auto; color: var(--accent-2); font-style: normal; transition: transform 0.3s var(--j-ease); }
.jx-check__list a:hover i { transform: translateX(3px); }
.jx-check__box { flex: none; width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 50%; }
.is-done .jx-check__row { color: var(--muted); text-decoration: line-through; }
.is-done .jx-check__box { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.jx-check.is-complete { display: flex; flex-direction: column; }
.jx-check__next { display: none; }
.jx-check.is-complete:not(:has(.jx-check__fold[open])) .jx-check__next {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	min-height: 0;
	margin-top: 18px;
	padding: 20px 22px 18px;
	border-radius: 18px;
	background: var(--soft);
}
.jx-check__next-k { margin: 0; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.jx-check__next-t { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.jx-check__next-list { display: grid; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.jx-check__next-list a {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 10px 8px;
	border-radius: 12px;
	color: var(--ink);
	text-decoration: none;
}
.jx-check__next-list a:hover { background: var(--card, #fff); }
.jx-check__next-ico {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
}
.jx-check__next-ico .icon { width: 18px; height: 18px; }
.jx-check__next-list span { display: grid; min-width: 0; gap: 1px; }
.jx-check__next-list b { font-size: 14px; font-weight: 600; }
.jx-check__next-list small { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.jx-check__next-list i { color: var(--accent-2); font-style: normal; transition: transform 0.3s var(--j-ease); }
.jx-check__next-list a:hover i { transform: translateX(3px); }
[data-theme="dark"] .jx-check.is-complete:not(:has(.jx-check__fold[open])) .jx-check__next { background: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .jx-check__next-list a:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .jx-ws__goals span { background: var(--d-lilac); color: #fff; }
@media (max-width: 1100px) {
	.jx-dash__ws { grid-template-columns: 1fr; }
}
.jx-ws__team { margin-top: 18px; }
/* Dashboard density: a lone workspace card takes the whole row; on wide screens small cards sit in pairs (Getting started + For you today, Latest orders + Need a hand). Phones stay one column. */
.jx-dash__ws > :only-child { grid-column: 1 / -1; }
.jx-dash > .cw-setup, .jx-dash > .cw-today { margin: 0; }
@media (min-width: 1100px) {
	.jx-dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
	.jx-dash > * { grid-column: 1 / -1; }
	.jx-dash:has(> .cw-setup):has(> .cw-today) > :is(.cw-setup, .cw-today) { grid-column: auto; align-self: stretch; }
	.jx-dash:has(> .jx-dash__help) > .jx-dash__card:has(+ .jx-dash__help), .jx-dash > .jx-dash__card + .jx-dash__help { grid-column: auto; align-self: stretch; }
}
.jx-ws__facts { grid-template-columns: repeat(4, auto); }
@media (max-width: 600px) { .jx-ws__facts { grid-template-columns: repeat(2, auto); } }

/* Phones: logo + five header buttons must fit 375px (343px inside the gutters) — smaller buttons, tighter gaps, smaller logo. */
@media (max-width: 480px) {
	.bar__inner { gap: 8px; }
	.bar__actions { gap: 2px; }
	.bar__actions > :first-child:not(.theme-toggle):not(.cart):not(.acct) { margin-right: 0; }
	.bar__actions .search-trigger,
	.bar__actions .theme-toggle,
	.bar__actions a.cart,
	.bar__actions .acct__btn,
	.bar__actions .nav-toggle { width: 38px; height: 38px; border-radius: var(--radius); }
	.site-header .brand .brand__mark { height: 32px; }
	.site-header .brand__name { font-size: 22px; }
	.brand { gap: 6px; min-width: 0; }
}
/* Very narrow phones: the dark-mode switch steps aside (the site still follows the phone's own setting). */
@media (max-width: 350px) {
	.bar__actions .theme-toggle { display: none; }
}

/* Cart drawer: the whole middle scrolls as one (products, then "Goes well with this"); the heading
   and the total with Checkout stay put. Before, only the product list scrolled and the suggestions
   and footer squeezed it to nothing on a phone. */
.cart-drawer__panel { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cart-drawer__body { flex: 0 0 auto; overflow: visible; }
.cart-drawer__extras { flex: 0 0 auto; margin: 6px 16px 16px; padding: 14px 16px 6px; border: 0; border-radius: 16px; }
.cart-drawer__foot { margin-top: auto; }
.cart-drawer__head { flex: none; }

/* Light mode: the white Zoliax look (white panel, warm grey surfaces) instead of the purple tint. */
[data-theme="light"] .cart-drawer__panel,
[data-theme="light"] .cart-drawer__head,
[data-theme="light"] .cart-drawer__foot { background: #fff; }
[data-theme="light"] .cart-drawer__panel { border-left-color: rgba(19, 20, 48, 0.08); box-shadow: -24px 0 80px rgba(19, 20, 48, 0.14); }
[data-theme="light"] .cart-drawer__scrim { background: rgba(19, 20, 48, 0.32); }
[data-theme="light"] .cart-drawer__head,
[data-theme="light"] .cart-drawer__foot,
[data-theme="light"] .cart-line { border-color: rgba(19, 20, 48, 0.08); }
[data-theme="light"] .cart-line__thumb,
[data-theme="light"] .cart-extra__thumb { background: #f5f5f2; }
[data-theme="light"] .cart-drawer__extras { background: #f5f5f2; }
[data-theme="light"] .cart-drawer__close { border-color: rgba(19, 20, 48, 0.1); background: #fff; }
[data-theme="light"] .cart-drawer__foot { box-shadow: 0 -12px 24px -18px rgba(19, 20, 48, 0.25); }
@media (max-width: 480px) {
	.cart-drawer__head { padding: 14px 14px 12px 18px; }
	.cart-drawer__body { padding: 4px 18px 10px; }
	.cart-drawer__extras { margin: 4px 12px 12px; }
	.cart-drawer__foot { padding: 12px 18px 16px; }
	.cart-drawer__total strong { font-size: 22px; }
	.cart-line { grid-template-columns: 52px 1fr auto; gap: 10px; }
	.cart-line__thumb { width: 52px; height: 52px; border-radius: 12px; }
}

/* Homepage voices slider: the same soft edges as the shop's category strip, only where more cards wait. */
.j-voices .j-slider__track { --fade-l: clamp(20px, 6vw, 96px); --fade-r: clamp(20px, 6vw, 96px); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); transition: --fade-l 0.3s, --fade-r 0.3s; }
.j-voices:has([data-j-prev]:disabled) .j-slider__track { --fade-l: 0px; }
.j-voices:has([data-j-next]:disabled) .j-slider__track { --fade-r: 0px; }

/* Phones: the light / dark switch lives in the account menu (the header has no room for it). */
.acct__mode { display: none; }
.acct__mode button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.acct__mode button:hover,
.acct__mode button:focus-visible { background: var(--soft); outline: none; }
.acct__mode button .icon { width: 18px; height: 18px; flex: none; color: var(--muted); }
.acct__mode button span { flex: 1; }
.acct__switch { position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px; background: rgba(19, 20, 48, 0.15); transition: background 0.2s; }
.acct__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
[data-theme="dark"] .acct__switch { background: var(--accent); }
[data-theme="dark"] .acct__switch::after { transform: translateX(16px); }
@media (max-width: 600px) {
	.acct__mode { display: block; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
	.bar__actions .theme-toggle,
	.app__actions .theme-toggle,
	.app .theme-toggle { display: none; }
}

/* Phone-only rows in the account menus (e.g. Messages from Core Workspaces). */
.acct__mobile { display: none; }
.acct__menu .acct__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; }
@media (max-width: 600px) {
	.acct__mobile { display: block; }
	.acct__mobile a span { flex: 1; }
}

/* Phones: the breadcrumb gets the whole row (with the page's padding), the social icons step aside
   (they are in the footer), and the page's own menu is a full-width row that scrolls sideways. */
@media (max-width: 600px) {
	.crumb-bar .crumb-bar__in,
	.header-full .crumb-bar__in,
	.crumb-bar--menu .crumb-bar__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-height: 0; padding: 10px 20px; }
	.crumb-bar .socials { display: none; }
	.crumb-bar .crumbs ol { padding: 0; }
	.crumb-bar--menu .crumb-menu { grid-column: 1; grid-row: auto; justify-self: stretch; max-width: none; margin: 0 -20px; padding: 2px 44px 4px 20px; scroll-padding-inline: 20px;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
	.crumb-menu a,
	span.crumb-menu__title { padding: 4px 12px; font-size: 14px; }
	.crumb-menu__title { margin-right: 2px; }
}

/* Phones: Search moves into the account menu for signed-in people (the header is full), and the logo never gets covered */
.acct__search button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.acct__search button:hover,
.acct__search button:focus-visible { background: var(--soft); outline: none; }
.acct__search button .icon { width: 18px; height: 18px; flex: none; color: var(--muted); }
.acct__search button span { flex: 1; }
@media (max-width: 600px) {
	body.logged-in .bar__actions .search-trigger { display: none; }
	.site-header .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
}

/* Dashboard plan card: the Ask AI button next to Upgrade */
.jx-dash__ai { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid rgba(255, 255, 255, 0.55); background: transparent; color: #fff; cursor: pointer; }
.jx-dash__ai:hover { background: rgba(255, 255, 255, 0.12); }
.jx-dash__ai .icon { width: 18px; height: 18px; }

/* One glow wash for the dashboard plan card and the checkout success hero. */
.jx-glowcard {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--radius, 28px);
	background: #131430;
	color: #fff;
}
.jx-glowcard::before,
.jx-glowcard::after {
	content: "";
	position: absolute;
	z-index: -1;
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
}
.jx-glowcard::before {
	right: -12%;
	top: -80%;
	width: max(300px, 60%);
	background: radial-gradient(closest-side, rgba(142, 108, 245, 0.6), rgba(142, 108, 245, 0.18) 55%, transparent 72%);
	animation: jx-plan-glow-a 18s ease-in-out infinite alternate;
}
.jx-glowcard::after {
	left: -14%;
	bottom: -85%;
	width: max(280px, 52%);
	background: radial-gradient(closest-side, rgba(217, 128, 157, 0.55), rgba(227, 169, 92, 0.16) 55%, transparent 72%);
	animation: jx-plan-glow-b 24s ease-in-out infinite alternate;
}
@keyframes jx-plan-glow-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-16%, 12%) scale(1.12); } 100% { transform: translate(-6%, 24%) scale(0.94); } }
@keyframes jx-plan-glow-b { 0% { transform: translate(0, 0) scale(1); opacity: 0.85; } 50% { transform: translate(32%, -14%) scale(1.16); opacity: 1; } 100% { transform: translate(62%, -4%) scale(1); opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) { .jx-glowcard::before, .jx-glowcard::after { animation: none; } }

/* Your plan card opens with the greeting (white) and Edit profile as an icon on the right */
.jx-dash__top { display: flex; flex: 0 0 100%; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; margin-bottom: -4px; }
.jx-dash__hello { margin: 0; min-width: 0; color: #fff; font-size: clamp(22px, 2vw, 30px); font-weight: 450; line-height: 1.1; letter-spacing: -0.04em; }
@media (max-width: 800px) {
	.jx-dash__plan { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 16px; }
	.jx-dash__top,
	.jx-dash__plan-actions,
	.jx-dash__plan > :not(.jx-dash__top):not(.jx-dash__plan-actions) { flex: 0 0 auto; width: 100%; max-width: 100%; }
	.jx-dash__plan .btn--solid { min-height: 45px; padding: 0 20px; font-size: 16px; }
	.jx-glowcard::before,
	.jx-glowcard::after { width: min(220px, 65%); }
	.jx-dash__hello { text-wrap: balance; }
	.jx-dash__dek { max-width: none; }
}
.jx-dash__plan .jx-dash__edit { display: grid; flex: none; place-items: center; box-sizing: border-box; width: 40px; height: 40px; min-height: 40px; aspect-ratio: 1; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; backdrop-filter: blur(6px); transition: background 0.2s, border-color 0.2s; }
.jx-dash__plan .jx-dash__edit:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); }
.jx-dash__plan .jx-dash__edit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Dashboard: quick links to the workspace pages and added apps; goals link to their page. */
.jx-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin-top: 18px; }
.jx-quick__item { display: grid; justify-items: center; gap: 7px; padding: 10px 4px 8px; border-radius: 16px; color: var(--ink); font-size: 12.5px; font-weight: 500; text-align: center; text-decoration: none; transition: background 0.2s; }
.jx-quick__item:hover { background: var(--soft); }
.jx-quick__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--q, var(--lilac)); color: #131430; transition: transform 0.3s var(--j-ease); }
.jx-quick__item:hover .jx-quick__ico { transform: translateY(-2px); }
.jx-quick__ico svg { width: 22px; height: 22px; }
.jx-quick__name { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.jx-quick__item--c0 { --q: var(--lilac); }
.jx-quick__item--c1 { --q: var(--sky); }
.jx-quick__item--c2 { --q: #cdeed9; }
.jx-quick__item--c3 { --q: #f6dcc8; }
.jx-quick__item--c4 { --q: var(--lime); }
.jx-quick__item--c5 { --q: #f7d3e1; }
.jx-quick__item--app .jx-quick__ico { background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #131430)); color: #fff; box-shadow: 0 8px 18px -8px var(--c); }
.jx-ws__goals a.jx-goal,
.jx-ws__goals span.jx-goal { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pill); background: var(--g, var(--lilac)); color: #131430; font-size: 13px; font-weight: 500; text-decoration: none; transition: transform 0.2s var(--j-ease), box-shadow 0.2s; }
.jx-ws__goals a.jx-goal:hover { box-shadow: 0 6px 14px -6px rgba(19, 20, 48, 0.35); transform: translateY(-1px); }
.jx-goal i { font-style: normal; opacity: 0.6; transition: transform 0.2s var(--j-ease); }
.jx-goal:hover i { transform: translateX(2px); }
.jx-goal--lilac { --g: var(--lilac); }
.jx-goal--sky { --g: var(--sky); }
.jx-goal--mint { --g: #cdeed9; }
.jx-goal--peach { --g: #f6dcc8; }
.jx-goal--rose { --g: #f7d3e1; }
[data-theme="dark"] .jx-quick__item { color: #fff; }
[data-theme="dark"] .jx-quick__ico,
[data-theme="dark"] .jx-ws__goals .jx-goal { color: #131430; }
@media (max-width: 600px) { .jx-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .jx-quick__item { font-size: 11.5px; } }
/* Dashboard: the workspace card folds open (facts and the team link) with the arrow. */
.jx-ws__sum { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.jx-ws__sum::-webkit-details-marker { display: none; }
.jx-ws__sum .jx-dash__eyebrow { display: block; }
.jx-ws__name { display: block; margin-top: 6px; color: var(--ink); font-size: clamp(24px, 2vw, 32px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.15; }
.jx-ws__chev { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: transform 0.35s var(--j-ease), background 0.2s; }
.jx-ws__chev svg { width: 18px; height: 18px; }
.jx-ws__sum:hover .jx-ws__chev { background: var(--soft); }
.jx-ws__fold[open] .jx-ws__chev { transform: rotate(90deg); }
.jx-ws__fold[open] .jx-ws__facts { animation: jx-fold 0.35s var(--j-ease); }
@keyframes jx-fold { from { opacity: 0; transform: translateY(-6px); } }
[data-theme="dark"] .jx-ws__name,
[data-theme="dark"] .jx-ws__chev { color: #fff; }
.jx-ws__team { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Brand: the Zoliax X with the name next to it (square mark) */
.brand .brand__mark { aspect-ratio: 1; }
.site-header .brand .brand__mark { height: 30px; }
.footer__brand .brand__mark { height: 40px; }
.brand { gap: 5px; }
.brand__name { font-size: 22px; letter-spacing: -0.02em; }

/* Type scale: a notch smaller across the site (desktop and mobile) */
body { font-size: 16px; }
.nav__link { font-size: 15px; }
.j-title { font-size: clamp(30px, 2.8vw, 50px); }
.j-hero h1 { font-size: clamp(38px, 4vw, 68px); }
.j-hero__lede { font-size: 17px; }
.j-split__text { font-size: 18px; }
.j-roundlink { font-size: 16px; }
.btn-solid .wp-block-button__link, .btn-ghost .wp-block-button__link { min-height: 50px; font-size: 16px; }
.j-fcard h3, .j-step h3 { font-size: clamp(22px, 1.7vw, 28px); margin-bottom: 28px; }
.j-fcard > p:not(.j-more), .j-step p:not(.j-step__num), .j-bcard p { font-size: 16px; }
.j-bcard h3 { font-size: clamp(22px, 1.7vw, 28px); }
.j-app__sub { font-size: 19px; }
.j-app__item summary { font-size: 18px; }
.j-app__item p, .j-mcard__body p { font-size: 16px; }
.j-mcard h3 { font-size: clamp(20px, 1.6vw, 27px); }
.j-voice h3 { font-size: clamp(21px, 1.5vw, 26px); }
.page-hero h1 { font-size: clamp(36px, 4.2vw, 54px); }
.section__head h2, .band h2 { font-size: clamp(26px, 2.8vw, 34px); }

/* Home hero: the sign-up card sits level with the headline, inside the frame */
.j-hero__grid { align-items: center; }
.j-hero__card { justify-self: end; width: 100%; max-width: 460px; }
.j-hero__card h2 { font-size: clamp(26px, 2vw, 36px); }
.j-hero__card-label { font-size: 17px; }
.j-hero__card .btn-solid .wp-block-button__link { min-height: 56px; font-size: 17px; }

/* Hero (design review): centred in the frame, a 420px card, three-line headline */
.j-hero--plain { justify-content: center; }
.j-hero--plain .j-hero__grid { padding-block: clamp(56px, 9vh, 112px); }
.j-hero__grid { grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(40px, 6vw, 120px); align-items: center; }
.j-hero__card { max-width: 420px; padding: 32px; }
.j-hero__card h2 { font-size: clamp(24px, 1.8vw, 30px); }
.j-hero h1 { max-width: 15ch; font-size: clamp(36px, 3.6vw, 56px); line-height: 1.04; letter-spacing: -0.04em; }
.j-hero__lede { max-width: 34rem; font-size: 18px; }
.j-hero__card .j-hero__tag, .j-hero__card-label { display: none; }
.j-hero__kicker a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: inherit; font-size: 14px; font-weight: 500; text-decoration: none; }
.j-hero__kicker a:hover { background: rgba(255, 255, 255, 0.3); }
@media (max-width: 760px) {
	.j-hero__grid { grid-template-columns: 1fr; }
	.j-hero__card { max-width: none; padding: 24px; }
	.j-hero__lede { font-size: 16px; }
}
/* Honest proof under the hero (homepage and every page that used the old word ticker). */
.jxt { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; padding: 18px 24px 4px; color: var(--muted); font-size: 14.5px; }
.j2-hero + .jxt { padding-top: 8px; padding-bottom: 12px; }
.jxt span { display: inline-flex; align-items: center; gap: 8px; }
.jxt span::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--lime, #d9f99d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23131430' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* Letter-spacing: tight only on big headings */
h3, h4, .j-fcard h3, .j-step h3 { letter-spacing: -0.02em; }

/* Hubs: Guide, Help center, Solutions, What's new */
.jxh-sec { padding-top: clamp(40px, 6vw, 80px); }
.jxh { width: min(var(--wrap, 1200px), calc(100% - 32px)); margin: 0 auto; }
.jxh-kicker { color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.jxh-title { max-width: 18ch; margin: 10px 0 14px; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.06; letter-spacing: -0.04em; }
.jxh-title mark, .jxd mark { background: none; color: var(--accent); }
.jxh-lede { max-width: 40rem; color: var(--muted); font-size: 18px; }
.jxh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 36px; }
.jxh-card { position: relative; display: grid; align-content: start; gap: 8px; padding: 24px 24px 48px; border: 1px solid var(--line, rgba(19, 20, 48, 0.1)); border-radius: 20px; background: var(--card, #fff); color: var(--ink); text-decoration: none; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.jxh-card:hover { transform: translateY(-3px); border-color: rgba(108, 78, 245, 0.35); box-shadow: 0 18px 40px -18px rgba(19, 20, 48, 0.3); }
.jxh-card__n { color: var(--accent); font-size: 13px; font-weight: 600; }
.jxh-card b { font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; }
.jxh-card span:not(.jxh-card__n) { color: var(--muted); font-size: 15px; line-height: 1.5; }
.jxh-card i { position: absolute; left: 24px; bottom: 18px; color: var(--accent); font-style: normal; transition: transform 0.25s; }
.jxh-card:hover i { transform: translateX(4px); }
.jxh-more { margin-top: 26px; font-weight: 500; }
.jxh-more a { color: var(--accent); text-decoration: none; }
.jxn { display: grid; gap: 0; max-width: 760px; margin: 36px 0 0; padding: 0; list-style: none; }
.jxn li { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line, rgba(19, 20, 48, 0.1)); }
.jxn time { color: var(--muted); font-size: 14px; }
.jxn h3 { margin-bottom: 4px; font-size: 19px; }
.jxn p { color: var(--muted); }
@media (max-width: 640px) { .jxn li { grid-template-columns: 1fr; gap: 4px; } }

/* Guide and Help center articles */
.jxd-sec { padding-top: clamp(30px, 5vw, 64px); }
.jxd { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); width: min(var(--wrap, 1200px), calc(100% - 32px)); margin: 0 auto; }
.jxd-side { position: sticky; top: 110px; align-self: start; }
.jxd-side__t { margin-bottom: 12px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.jxd-nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.jxd-nav a { display: flex; gap: 10px; padding: 9px 12px; border-radius: var(--radius); color: var(--ink); font-size: 15px; line-height: 1.35; text-decoration: none; }
.jxd-nav a:hover { background: var(--soft, rgba(19, 20, 48, 0.05)); }
.jxd-nav a[aria-current] { background: rgba(108, 78, 245, 0.1); color: var(--accent); font-weight: 600; }
.jxd-nav a span { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: rgba(108, 78, 245, 0.12); color: var(--accent); font-size: 12px; font-weight: 700; }
.jxd-art { max-width: 720px; }
.jxd-crumb { margin-bottom: 10px; color: var(--muted); font-size: 14px; }
.jxd-crumb a { color: var(--accent); text-decoration: none; }
.jxd-art h1 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -0.04em; }
.jxd-lede { margin: 14px 0 10px; color: var(--muted); font-size: 18px; }
.jxd-art h2 { margin: 36px 0 10px; font-size: 24px; letter-spacing: -0.02em; scroll-margin-top: 110px; }
.jxd-art p { margin: 0 0 12px; line-height: 1.7; }
.jxd-art code { padding: 2px 6px; border-radius: 6px; background: var(--soft, rgba(19, 20, 48, 0.06)); font-size: 0.9em; }
.jxd-art a { color: var(--accent); }
.jxd-steps { display: grid; gap: 10px; margin: 6px 0 14px; padding: 0; list-style: none; counter-reset: s; }
.jxd-steps li { position: relative; padding: 12px 16px 12px 52px; border: 1px solid var(--line, rgba(19, 20, 48, 0.1)); border-radius: 14px; counter-increment: s; }
.jxd-steps li::before { content: counter(s); position: absolute; left: 14px; top: 11px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.jxd-tip { margin: 8px 0 14px; padding: 14px 18px; border-radius: 14px; background: rgba(108, 78, 245, 0.08); }
.jxd-tip b { margin-right: 6px; color: var(--accent); }
.jxd-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; }
.jxd-pager a { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--line, rgba(19, 20, 48, 0.1)); border-radius: 16px; color: var(--ink); font-weight: 600; text-decoration: none; transition: border-color 0.2s; }
.jxd-pager a:hover { border-color: var(--accent); }
.jxd-pager a.is-next { text-align: right; }
.jxd-pager small { color: var(--muted); font-size: 13px; font-weight: 500; }
@media (max-width: 860px) {
	.jxd { grid-template-columns: 1fr; }
	.jxd-side { position: static; }
	.jxd-nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
	.jxd-nav a { white-space: nowrap; border: 1px solid var(--line, rgba(19, 20, 48, 0.1)); }
}

/* Admin and security: capabilities */
.jxc { width: min(var(--wrap, 1200px), calc(100% - 32px)); margin: 0 auto; }
.jxc-group { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding: 36px 0; border-top: 1px solid var(--line, rgba(19, 20, 48, 0.1)); }
.jxc-head h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.03em; }
.jxc-head p { margin-top: 8px; color: var(--muted); }
.jxc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.jxc-card { padding: 20px; border: 1px solid var(--line, rgba(19, 20, 48, 0.1)); border-radius: 18px; background: var(--card, #fff); }
.jxc-card h4 { margin: 10px 0 6px; font-size: 17px; letter-spacing: -0.01em; }
.jxc-card p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.jxc-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(47, 182, 124, 0.14); color: #1d6b3a; font-size: 12px; font-weight: 600; }
.jxc-badge.is-biz { background: rgba(108, 78, 245, 0.12); color: var(--accent); }
.jxc-note { margin-top: 18px; color: var(--muted); font-size: 14px; }
@media (max-width: 860px) { .jxc-group { grid-template-columns: 1fr; } }
@media (max-width: 960px) {
	.j-hero__grid { grid-template-columns: 1fr; }
	.j-hero__card { justify-self: start; max-width: 480px; }
}

/* Home hero: the Zoliax X, big and blurred, over slowly moving pink and violet glows (no photo) */
.jx-xbg { position: absolute !important; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; background: radial-gradient(120% 90% at 70% 40%, #1d1546 0%, #0d0b24 60%, #08071a 100%); pointer-events: none; }
.jx-xbg i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: 0.75; will-change: transform; }
.jx-xbg .b1 { left: -12%; top: -25%; width: 62vw; height: 62vw; max-width: 980px; max-height: 980px; background: #ff4fa0; opacity: 0.45; animation: jx-drift-a 22s ease-in-out infinite alternate; }
.jx-xbg .b2 { right: -18%; bottom: -40%; width: 70vw; height: 70vw; max-width: 1100px; max-height: 1100px; background: #7c4dff; opacity: 0.6; animation: jx-drift-b 26s ease-in-out infinite alternate; }
.jx-xbg .b3 { left: 38%; top: 18%; width: 34vw; height: 34vw; max-width: 560px; max-height: 560px; background: #2fd6e6; opacity: 0.28; animation: jx-drift-c 18s ease-in-out infinite alternate; }
.jx-xbg svg { position: absolute; right: 4%; top: 50%; width: min(78vh, 720px); height: auto; filter: blur(26px); opacity: 0.9; transform: translateY(-50%); animation: jx-x-float 16s ease-in-out infinite alternate; }
.jx-xbg svg .s2 { animation: jx-x-glow 6s ease-in-out infinite alternate; }
/* No grain/noise overlay: the turbulent texture made the hero look dirty on first paint.
   A clean radial glow reads sharper and paints faster. */
.jx-xbg ~ .j-hero__img, .jx-xbg ~ figure.j-hero__img { display: none !important; }
/* The photo behind the X is hidden, so never download or decode it. */
.jx-xbg ~ .j-hero__img > img, .jx-xbg ~ figure.j-hero__img > img { content: none; }
@keyframes jx-drift-a { to { transform: translate(18%, 22%) scale(1.15); } }
@keyframes jx-drift-b { to { transform: translate(-22%, -14%) scale(0.9); } }
@keyframes jx-drift-c { 50% { transform: translate(-30%, 25%) scale(1.25); } to { transform: translate(20%, -10%) scale(0.85); } }
@keyframes jx-x-float { from { transform: translateY(-50%) rotate(-6deg) scale(0.96); } to { transform: translateY(-46%) rotate(5deg) scale(1.06); } }
@keyframes jx-x-glow { from { opacity: 0.75; } to { opacity: 1; } }
@media (max-width: 960px) { .jx-xbg svg { right: -18%; top: 30%; width: 90vw; opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .jx-xbg i, .jx-xbg svg, .jx-xbg svg .s2 { animation: none; } }
@media (min-width: 961px) { .jx-xbg svg { right: auto; left: 46%; width: min(86vh, 760px); transform: translate(-50%, -50%); animation-name: jx-x-float-c; } }
@keyframes jx-x-float-c { from { transform: translate(-50%, -50%) rotate(-6deg) scale(0.96); } to { transform: translate(-50%, -46%) rotate(5deg) scale(1.06); } }
/* The X three times as big (user, 2026-10-11) */
.jx-xbg svg { width: min(234vh, 2160px); filter: blur(40px); }
@media (min-width: 961px) { .jx-xbg svg { width: min(258vh, 2280px); } }
@media (max-width: 960px) { .jx-xbg svg { right: auto; left: 50%; top: 40%; width: 270vw; opacity: 0.6; transform: translate(-50%, -50%); animation-name: jx-x-float-c; } }
/* "Your whole team's work": room under the heading, less above it on mobile */
.jxv-sec:has(.jxv-deck) > .j-title, .jxv-sec:has(.jxv-deck) h2.j-title { margin-bottom: clamp(20px, 2.4vw, 32px); }
@media (max-width: 760px) {
	.jxv-sec:has(.jxv-deck) { padding-top: 24px; padding-bottom: 44px; }
	.jxt { padding-bottom: 0; }
}
/* Section headings: room under every centred title; calmer gaps between sections on phones */
.j-sec > .j-title--center, .j-sec > h2.j-title { margin-bottom: clamp(20px, 2.4vw, 32px); }
@media (max-width: 760px) {
	.j-sec:not(.j-hero):not(.j2-hero):not(.j2-cta-sec) { padding-top: 36px; padding-bottom: 36px; }
}
.j-sec h2.j-title--center { margin-bottom: clamp(20px, 2.4vw, 32px); }
/* Hero: the same small gap under the header as at the sides (the top bar used to give it) */
.j-hero { margin-top: clamp(8px, 1vw, 14px) !important; }

/* "Your team. One workspace.": the dashboard drawing under the buttons, cut at half, on the box's bottom edge */
.j2-cta:has(.jx-dashshot) { padding-bottom: 0; overflow: hidden; }
.jx-dashshot { position: relative; max-width: 1000px; margin: clamp(32px, 4vw, 52px) auto 0; aspect-ratio: 1200 / 400; overflow: hidden; border-radius: 22px 22px 0 0; background: #fbfbfe; box-shadow: 0 -18px 60px -28px rgba(19, 20, 48, 0.45); text-align: left; }
.jx-dashshot svg { display: block; width: 100%; height: auto; font-family: var(--font, system-ui, sans-serif); }
.jx-dashshot text { fill: #4a4c63; font-size: 15px; }
.jx-dashshot .brand { fill: #131430; font-size: 20px; font-weight: 700; font-family: var(--display, inherit); }
.jx-dashshot .mut { fill: #8a8ca0; font-size: 14px; }
.jx-dashshot .av { fill: #fff; font-size: 15px; font-weight: 700; }
.jx-dashshot .grp { fill: #9a9cb0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.jx-dashshot .nv.on { fill: #6c4ef5; font-weight: 600; }
.jx-dashshot .hello { fill: #fff; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.jx-dashshot .eyebrow { fill: #b9acff; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.jx-dashshot .plan { fill: #fff; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }
.jx-dashshot .dek { fill: rgba(255, 255, 255, 0.72); font-size: 15px; }
.jx-dashshot .btn { fill: #fff; font-size: 15px; font-weight: 600; }
.jx-dashshot .q text { font-size: 13px; }
.jx-dashshot .num { fill: #131430; font-size: 34px; font-weight: 700; }
.jx-dashshot .lab { fill: #6b6d82; font-size: 14px; }
.jx-dashshot .h { fill: #131430; font-size: 20px; font-weight: 700; }
.jx-dashshot .g1 { animation: jx-ds-a 9s ease-in-out infinite alternate; }
.jx-dashshot .g2 { animation: jx-ds-b 11s ease-in-out infinite alternate; }
.jx-dashshot .q { transform-box: fill-box; animation: jx-ds-q 3.2s ease-in-out infinite alternate; }
.jx-dashshot .bar { transform-box: fill-box; transform-origin: left; animation: jx-ds-bar 6s ease-in-out infinite; }
@keyframes jx-ds-a { to { transform: translate(-140px, 60px); } }
@keyframes jx-ds-b { to { transform: translate(160px, -50px); } }
@keyframes jx-ds-q { to { transform: translateY(-5px); } }
@keyframes jx-ds-bar { 0% { transform: scaleX(0.55); } 60%, 100% { transform: scaleX(1); } }
@media (max-width: 760px) { .jx-dashshot { aspect-ratio: 1200 / 520; margin-left: -12px; margin-right: -12px; border-radius: 16px 16px 0 0; } .jx-dashshot svg { width: 150%; } }
@media (prefers-reduced-motion: reduce) { .jx-dashshot * { animation: none !important; } }

/* Hero: a live workspace card beside the sign-up card, the same size and shape. */
.j-hero__grid:has(.jx-heroart) { align-items: stretch; }
.j-hero__grid:has(.jx-heroart) > .j-hero__copy { align-self: center; }
.j-hero__grid:has(.jx-heroart) > .j-hero__card { align-self: stretch; justify-self: stretch; width: 100%; max-width: none; }
.jx-heroart { display: flex; align-self: stretch; min-width: 0; pointer-events: none; }
.j2-hero__visual:has(.jx-heroart) { min-height: 0; }
.j2-hero__visual .jx-heroart { width: 100%; }
.j2-hero__visual .jxa { width: 100%; min-height: 460px; border-radius: 32px; }
.j2-hero__visual:has(.jx-heroart) .j2-chip { display: none; }
@media (max-width: 1100px) {
	.j2-hero__visual .jxa { min-height: 0; }
}
@media (min-width: 1240px) {
	.j-hero__grid:has(.jx-heroart) { grid-template-columns: minmax(0, 1fr) 380px 380px; column-gap: 16px; }
	.j-hero__grid:has(.jx-heroart) > .j-hero__copy { padding-right: clamp(24px, 3vw, 64px); }
}
@media (min-width: 761px) and (max-width: 1239px) {
	.j-hero__grid:has(.jx-heroart) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
	.j-hero__grid:has(.jx-heroart) > .j-hero__copy { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
	.j-hero__grid:has(.jx-heroart) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
.jxa { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 22px; overflow: hidden; border-radius: 28px; background: #fff; color: #131430; font-size: 14px; line-height: 1.35; box-shadow: 0 40px 80px rgba(20, 14, 8, 0.25); text-align: left; }
.jxa * { box-sizing: border-box; }
.jxa p { margin: 0; }
.jxa__bar { display: flex; align-items: center; gap: 6px; }
.jxa__bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff6b6b; }
.jxa__bar i + i { background: #ffc145; }
.jxa__bar i + i + i { background: #3ecf8e; }
.jxa__bar b { margin-left: 8px; font-size: 13px; }
.jxa__live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #e7f8ef; color: #1d6b3a; font-size: 11px; font-weight: 700; }
.jxa__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2fb67c; animation: jxa-pulse 1.6s ease-in-out infinite; }
.jxa__hello { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.jxa__sub { margin-top: 2px !important; color: #6b6d82; font-size: 13px; }
.jxa__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.jxa__stats div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid #ececf3; border-radius: 14px; }
.jxa__stats small { color: #8a8ca0; font-size: 11.5px; }
.jxa__stats b { font-size: 19px; letter-spacing: -0.02em; }
.jxa__stats .is-on { border-color: transparent; background: #ece8ff; }
.jxa__stats .is-on small { color: #6c4ef5; font-weight: 600; }
.jxa__sprint { display: grid; gap: 8px; }
.jxa__row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; }
.jxa__row b { color: #6c4ef5; }
.jxa__meter { height: 8px; border-radius: 99px; background: #f1f1f7; overflow: hidden; }
.jxa__meter i { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b7bff, #2fd6e6); transform-origin: left center; animation: jxa-grow 6s ease-in-out infinite; }
.jxa__feed { position: relative; flex: 1; min-height: 58px; margin: 0; padding: 0; list-style: none; }
.jxa__feed li { position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #ececf3; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -16px rgba(19, 20, 48, 0.4); opacity: 0; animation: jxa-feed 9s ease-in-out infinite; }
.jxa__feed li:nth-child(2) { animation-delay: 3s; }
.jxa__feed li:nth-child(3) { animation-delay: 6s; }
.jxa__feed span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #6c4ef5; color: #fff; font-size: 12px; font-weight: 700; }
.jxa__feed .is-2 { background: #2bb39a; }
.jxa__feed .is-3 { background: #e8910c; }
.jxa__feed p { font-size: 13px; }
.jxa__feed small { display: block; color: #8a8ca0; font-size: 11.5px; }
.jxa__ai { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(108, 78, 245, 0.12), rgba(47, 214, 230, 0.12)); }
.jxa__ai > span { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: #6c4ef5; color: #fff; font-size: 12px; }
.jxa__ai p { font-size: 13px; }
.jxa__ai p::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #6c4ef5; animation: jxa-caret 1s steps(1) infinite; }
.jxa__team { display: flex; align-items: center; justify-content: space-between; color: #8a8ca0; font-size: 12px; }
.jxa__faces { display: flex; }
.jxa__faces i { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; border: 2px solid #fff; border-radius: 50%; background: #6c4ef5; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; }
.jxa__faces i:first-child { margin-left: 0; }
.jxa__faces i:nth-child(2) { background: #e8910c; }
.jxa__faces i:nth-child(3) { background: #2bb39a; }
.jxa__faces i:nth-child(4) { background: #f1f1f7; color: #6b6d82; }
@keyframes jxa-pulse { 50% { opacity: 0.35; } }
@keyframes jxa-grow { 0%, 10% { transform: scaleX(0.55); } 55%, 100% { transform: scaleX(1); } }
@keyframes jxa-feed { 0% { opacity: 0; transform: translateY(10px); } 6%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes jxa-caret { 50% { opacity: 0; } }
[data-theme="dark"] .jxa { border: 1px solid rgba(255, 255, 255, 0.08); background: #1b1830; color: #fff; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45); }
[data-theme="dark"] .jxa__stats div, [data-theme="dark"] .jxa__feed li { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .jxa__feed li { background: #221e3a; }
[data-theme="dark"] .jxa__stats .is-on { background: rgba(108, 78, 245, 0.25); }
[data-theme="dark"] .jxa__meter { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .jxa__faces i { border-color: #1b1830; }
@media (prefers-reduced-motion: reduce) {
	.jxa *, .jxa *::before, .jxa *::after { animation: none !important; }
	.jxa__feed li:first-child { opacity: 1; }
}

/* Account desk + GTM slide (Marketplace, Pricing, Security, Company). */
.jxa--desk { padding: 0; gap: 0; }
.jxa-desk { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); min-height: inherit; height: 100%; overflow: hidden; }
.jxa--marketplace .jxa-desk { grid-template-columns: 56px 92px minmax(0, 1fr); }
.jxa-rail { display: flex; flex-direction: column; gap: 6px; padding: 12px 6px; background: #f6f5fb; border-right: 1px solid #ececf3; }
.jxa-rail b { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 8px; border-radius: var(--radius); background: #6c4ef5; color: #fff; font-size: 13px; }
.jxa-rail span { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: var(--radius); color: #8a8ca0; }
.jxa-rail span i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fff; color: #6b6d82; font-size: 10px; font-style: normal; font-weight: 700; }
.jxa-rail span small { font-size: 9px; }
.jxa-rail .is-on { background: #ece8ff; color: #6c4ef5; }
.jxa-rail .is-on i { background: #6c4ef5; color: #fff; }
.jxa-rail2 { display: flex; flex-direction: column; gap: 4px; padding: 16px 10px; border-right: 1px solid #ececf3; background: #fff; }
.jxa-rail2 small { margin-bottom: 8px; color: #8a8ca0; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.jxa-rail2 span { padding: 6px 8px; border-radius: 8px; color: #6b6d82; font-size: 12px; }
.jxa-rail2 .is-on { background: #ece8ff; color: #6c4ef5; font-weight: 600; }
.jxa-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 16px; }
.jxa-rows { margin: 10px 0 0; padding: 0; list-style: none; }
.jxa-rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f1f1f7; }
.jxa-rows li span { display: grid; min-width: 0; }
.jxa-rows b { font-size: 13px; }
.jxa-rows small { color: #8a8ca0; font-size: 11.5px; }
.jxa-rows em { color: #6c4ef5; font-size: 11px; font-style: normal; font-weight: 700; }
.jxa-rows .is-on b { color: #6c4ef5; }
.jxa-gtm { position: absolute; inset: 10px 10px 10px auto; z-index: 2; display: flex; flex-direction: column; width: min(48%, 228px); padding: 0; border: 1px solid #ececf3; border-radius: 18px; background: #fff; box-shadow: -18px 0 40px -24px rgba(19, 20, 48, 0.35); animation: jxa-gtm 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.jxa-main { padding-right: 36%; }
.jxa-gtm header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #ececf3; }
.jxa-gtm header b { font-size: 14px; }
.jxa-gtm header i { width: 22px; height: 22px; border: 1px solid #ececf3; border-radius: 7px; background: #f6f5fb; }
.jxa-gtm > p { padding: 10px 14px 0; color: #6b6d82; font-size: 12px; line-height: 1.4; }
.jxa-gtm__fields { display: grid; gap: 8px; padding: 12px 14px; }
.jxa-gtm__fields p { display: grid; gap: 2px; }
.jxa-gtm__fields small { color: #8a8ca0; font-size: 11px; }
.jxa-gtm__fields b { font-size: 13px; }
.jxa-gtm footer { margin-top: auto; padding: 12px 14px; border-top: 1px solid #ececf3; }
.jxa-gtm footer span { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #6c4ef5; color: #fff; font-size: 12px; font-weight: 700; }
@keyframes jxa-gtm { from { transform: translateX(110%); opacity: 0.2; } to { transform: none; opacity: 1; } }

.j-hero--nocard:has(.jx-heroart) .j-hero__img { display: none; }
.j-hero--nocard:has(.jx-heroart) { background: var(--page, #f4f3f8); }
.j-hero--nocard .j-hero__card--art { padding: 0; background: transparent; box-shadow: none; max-width: none; }
.j-hero--nocard .j-hero__card--art .jxa { min-height: 420px; }
@media (min-width: 900px) {
	.j-hero--nocard:has(.jx-heroart) .j-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr) !important; align-items: center; }
	.j-hero--nocard:has(.jx-heroart) .j-hero__copy { grid-column: auto !important; padding-right: 24px; }
}

[data-theme="dark"] .jxa-rail, [data-theme="dark"] .jxa-gtm { background: #221e3a; border-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .jxa-rail span i { background: #1b1830; color: #fff; }
[data-theme="dark"] .jxa-rail2 { background: #1b1830; border-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .jxa-rows li { border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .jxa-gtm header, [data-theme="dark"] .jxa-gtm footer { border-color: rgba(255, 255, 255, 0.1); }

@media (prefers-reduced-motion: reduce) {
	.jxa-gtm { animation: none; }
}

/* "Your whole team's work": three examples, one heading, three dots. */
.jxv-slider { display: grid; justify-items: center; width: min(920px, 100%); margin: 0 auto; }
.jxv-slider > h2 { margin-bottom: clamp(18px, 2.4vw, 28px); transition: opacity 0.25s; }
.jxv-slider.is-swap > h2 { opacity: 0; }
.jxv-slider .jxv-deck { width: 100%; }
.jxv-slides { display: grid; width: 100%; }
.jxv-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s; }
.jxv-slide.is-on { opacity: 1; visibility: visible; transform: none; z-index: 1; }
.jxv-dots { display: flex; gap: 4px; margin-top: 16px; }
.jxv-dots button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink, #131430); cursor: pointer; }
.jxv-dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.28; transition: transform 0.2s, opacity 0.2s, background 0.2s; }
.jxv-dots button.is-on::before { background: var(--accent, #6c4ef5); opacity: 1; transform: scale(1.25); }
.jxv-dots button:focus-visible { outline: 2px solid var(--accent, #6c4ef5); outline-offset: 2px; }
.jxv-slide { display: grid; }
.jxv-slide > .jxv-ui { height: 100%; }
@media (max-width: 720px) {
	.jxv-slider .jxv-ui { padding: 14px; }
	.jxv-kb { grid-template-columns: 1fr !important; }
	.jxv-ui.is-in .jxv-kb__card.is-moving { animation-name: jxv-lift !important; }
}
@keyframes jxv-lift { 0%, 20% { transform: none; } 45% { transform: translateY(-8px); } 70%, 100% { transform: none; } }

/* Feature mocks: board, card, timeline, agenda, invoice, AI, feed, orbit. Lived in a per-page <style> that WordPress prints as text. */
.jxv-ui{--a:var(--accent,#6c4ef5);--tx:var(--ink,#131430);--mt:var(--muted,#5d5f72);--ln:rgba(19,20,48,.1);--sf:rgba(19,20,48,.05);--cd:var(--card,#fff);position:relative;padding:16px;border:1px solid var(--ln);border-radius:22px;background:var(--cd);color:var(--tx);font-size:13px;line-height:1.35;box-shadow:0 30px 60px -30px rgba(19,20,48,.35),0 2px 6px rgba(19,20,48,.05);text-align:left}
.jxv-ui *{box-sizing:border-box}
.jxv-bar{display:flex;align-items:center;gap:6px;margin:-4px 0 12px}
.jxv-bar i{width:9px;height:9px;border-radius:50%;background:#ff6b6b}
.jxv-bar i+i{background:#ffc145}
.jxv-bar i+i+i{background:#3ecf8e}
.jxv-bar b{margin-left:8px;font-size:13px}
.jxv-bar em{margin-left:auto;padding:3px 9px;border-radius:999px;background:var(--sf);color:var(--mt);font-size:11px;font-style:normal;font-weight:600}
.jxv-av{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--a);color:#fff;font-size:10px;font-weight:700;flex:none}
.jxv-av.is-2{background:#e8910c}
.jxv-av.is-3{background:#2bb39a}
.jxv-lb{display:inline-block;width:26px;height:5px;margin-right:4px;border-radius:5px;background:#b9acff}
.jxv-lb.is-b{background:#9fd6c2}
.jxv-lb.is-c{background:#f5b48a}
.jxv-due{padding:2px 6px;border-radius:6px;background:var(--sf);color:var(--mt);font-size:10.5px;font-weight:600}
.jxv-due.is-soon{background:#fff1dc;color:#a3570b}
.jxv-due.is-done{background:#dff3e6;color:#1d6b3a}

/* board */
.jxv-kb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.jxv-kb__list{display:grid;align-content:start;gap:8px;min-height:190px;padding:10px;border-radius:8px;background:var(--sf)}
.jxv-kb__name{display:flex;justify-content:space-between;margin:0 0 2px;color:var(--mt);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.jxv-kb__card{display:grid;gap:6px;padding:9px 10px;border-radius:10px;background:var(--cd);box-shadow:0 1px 2px rgba(19,20,48,.08)}
.jxv-kb__card b{font-size:12.5px;font-weight:600}
.jxv-kb__card small{display:flex;align-items:center;justify-content:space-between;color:var(--mt);font-size:10.5px}
.jxv-kb__card.is-done b{color:var(--mt);text-decoration:line-through}
.jxv-kb__card.is-moving{position:relative;z-index:2}
.jxv-ui.is-in .jxv-kb__card.is-moving{animation:jxv-move 6s cubic-bezier(.65,0,.35,1) 1s infinite}
@keyframes jxv-move{0%,14%{transform:none;box-shadow:0 1px 2px rgba(19,20,48,.08)}
24%{transform:translate(20%,-12px) rotate(-3deg);box-shadow:0 18px 30px -10px rgba(19,20,48,.35)}
42%,80%{transform:translate(calc(100% + 30px),-2px) rotate(0);box-shadow:0 1px 2px rgba(19,20,48,.08)}
100%{transform:none}
}

/* card window */
.jxv-card__where{margin:0;color:var(--mt);font-size:11.5px}
.jxv-card__title{margin:2px 0 10px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.jxv-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}
.jxv-tag{padding:3px 9px;border-radius:999px;background:#ece6ff;color:#5b3fd6;font-size:11px;font-weight:600}
.jxv-tag.is-c{background:#fde9dc;color:#a3570b}
.jxv-check{padding:12px;border-radius:8px;background:var(--sf)}
.jxv-check p{display:flex;justify-content:space-between;margin:0 0 6px;font-size:12px}
.jxv-check em{font-style:normal;font-weight:700;color:var(--a)}
.jxv-prog{display:block;height:6px;margin-bottom:8px;overflow:hidden;border-radius:6px;background:rgba(19,20,48,.1)}
.jxv-prog b{display:block;width:0;height:100%;border-radius:6px;background:var(--a);transition:width 1.6s cubic-bezier(.22,1,.36,1) .4s}
.jxv-ui.is-in .jxv-prog b{width:var(--w,75%)}
.jxv-check ul{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.jxv-check li{display:flex;align-items:center;gap:8px;font-size:12px}
.jxv-check li::before{content:"";width:14px;height:14px;border:2px solid rgba(19,20,48,.2);border-radius:4px;flex:none}
.jxv-check li.is-done::before{border-color:var(--a);background:var(--a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center/10px no-repeat}
.jxv-check li.is-done{color:var(--mt);text-decoration:line-through}
.jxv-ui.is-in .jxv-check li{animation:jxv-slide .5s both}
.jxv-ui.is-in .jxv-check li:nth-child(2){animation-delay:.15s}
.jxv-ui.is-in .jxv-check li:nth-child(3){animation-delay:.3s}
.jxv-ui.is-in .jxv-check li:nth-child(4){animation-delay:.45s}
@keyframes jxv-slide{from{opacity:0;transform:translateX(-10px)}
}
.jxv-comment{display:flex;gap:8px;margin:12px 0 0;padding:10px;border-radius:12px;border:1px solid var(--ln);font-size:12px}
.jxv-comment b{margin-right:4px}
.jxv-mention{color:var(--a);font-weight:600}
.jxv-ui.is-in .jxv-comment{animation:jxv-pop .5s cubic-bezier(.22,1,.36,1) 1.6s both}
.jxv-comment.is-ai{border-color:rgba(122,90,248,.3);background:rgba(122,90,248,.06)}
.jxv-comment.is-ai .jxv-av{background:linear-gradient(135deg,#7a5af8,#c86bd8)}
.jxv-apply{display:inline-block;margin-top:6px;padding:4px 10px;border-radius:999px;background:var(--a);color:#fff;font-size:11px;font-weight:600}
.jxv-ui.is-in .jxv-comment.is-ai{animation-delay:2.4s}
@keyframes jxv-pop{from{opacity:0;transform:translateY(8px) scale(.97)}
}

/* timeline */
.jxv-tl{display:grid;gap:8px;position:relative}
.jxv-tl__head{display:grid;grid-template-columns:110px repeat(6,1fr);color:var(--mt);font-size:10.5px;font-weight:600}
.jxv-tl__row{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:0}
.jxv-tl__row span{overflow:hidden;font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.jxv-tl__track{position:relative;height:22px;border-radius:8px;background:var(--sf)}
.jxv-tl__bar{position:absolute;top:3px;bottom:3px;left:var(--l);width:var(--w);border-radius:6px;background:var(--c,var(--a));transform:scaleX(0);transform-origin:left}
.jxv-ui.is-in .jxv-tl__bar{animation:jxv-grow 1s cubic-bezier(.22,1,.36,1) var(--d,0s) forwards}
@keyframes jxv-grow{to{transform:scaleX(1)}
}
.jxv-tl__today{position:absolute;top:18px;bottom:0;left:calc(110px + (100% - 110px) * .46);width:2px;background:#e0475f}
.jxv-tl__today::before{content:"Today";position:absolute;top:-16px;left:-14px;color:#e0475f;font-size:9.5px;font-weight:700}
.jxv-ui.is-in .jxv-tl__today{animation:jxv-today 6s ease-in-out infinite alternate}
@keyframes jxv-today{from{transform:translateX(-30px)}
to{transform:translateX(30px)}
}
.jxv-sprint{display:flex;justify-content:space-between;margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--sf);font-size:12px}
.jxv-sprint b{color:var(--a)}

/* agenda */
.jxv-ag__head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.jxv-ag__head b{font-size:16px}
.jxv-sync{display:inline-flex;align-items:center;gap:6px;color:var(--mt);font-size:11px}
.jxv-sync i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--ln);color:#4285f4;font-size:10px;font-style:normal;font-weight:800}
.jxv-ui.is-in .jxv-sync i{animation:jxv-spin 1.2s ease 0.6s 2}
@keyframes jxv-spin{to{transform:rotate(360deg)}
}
.jxv-ag ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.jxv-ag li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;padding:9px 10px;border-left:3px solid var(--a);border-radius:10px;background:var(--sf);font-size:12.5px}
.jxv-ag li time{color:var(--mt);font-size:11px;font-weight:600}
.jxv-ag li em{color:var(--mt);font-size:10.5px;font-style:normal}
.jxv-ag li.is-g{border-left-color:#4285f4}
.jxv-ag li.is-card{border-left-color:#e8910c}
.jxv-ag li.is-g em{color:#4285f4;font-weight:700}
.jxv-ui.is-in .jxv-ag li{animation:jxv-slide .5s both}
.jxv-ui.is-in .jxv-ag li:nth-child(2){animation-delay:.12s}
.jxv-ui.is-in .jxv-ag li:nth-child(3){animation-delay:.24s}
.jxv-ui.is-in .jxv-ag li:nth-child(4){animation-delay:.36s}

/* invoice */
.jxv-inv__head{display:flex;justify-content:space-between;align-items:center;margin:0}
.jxv-inv__head b{font-size:15px}
.jxv-pill{padding:3px 9px;border-radius:999px;background:#dff3e6;color:#1d6b3a;font-size:11px;font-weight:700}
.jxv-inv__to{margin:2px 0 12px;color:var(--mt);font-size:11.5px}
.jxv-inv ul{display:grid;gap:0;margin:0;padding:0;list-style:none}
.jxv-inv li{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:8px 0;border-top:1px solid var(--ln);font-size:12.5px}
.jxv-inv li em{color:var(--mt);font-style:normal}
.jxv-inv__total{display:flex;justify-content:space-between;margin:6px 0 0;padding-top:10px;border-top:2px solid var(--tx);font-size:15px}
.jxv-ui.is-in .jxv-inv li{animation:jxv-slide .5s both}
.jxv-ui.is-in .jxv-inv li:nth-child(2){animation-delay:.2s}
.jxv-ui.is-in .jxv-inv li:nth-child(3){animation-delay:.4s}
.jxv-hours{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 10px;border-radius:12px;background:#ece6ff;color:#5b3fd6;font-size:12px;font-weight:600}
.jxv-ui.is-in .jxv-hours{animation:jxv-pulse 2s ease-in-out 1s 2}
@keyframes jxv-pulse{50%{box-shadow:0 0 0 6px rgba(108,78,245,.15)}
}

/* ai */
.jxv-say{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:12px;border-radius:8px;background:var(--sf);font-size:13px}
.jxv-mic{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#7a5af8,#c86bd8);color:#fff;flex:none}
.jxv-mic::after{content:"";position:absolute;inset:-4px;border:2px solid rgba(122,90,248,.5);border-radius:50%;animation:jxv-ring 1.8s ease-out infinite}
@keyframes jxv-ring{from{opacity:1;transform:scale(.9)}
to{opacity:0;transform:scale(1.4)}
}
.jxv-props{display:grid;gap:7px;margin:0 0 12px;padding:0;list-style:none}
.jxv-props li{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border:1px dashed rgba(122,90,248,.45);border-radius:12px;font-size:12.5px}
.jxv-props small{color:var(--mt)}
.jxv-ui.is-in .jxv-props li{animation:jxv-pop .5s cubic-bezier(.22,1,.36,1) both}
.jxv-ui.is-in .jxv-props li:nth-child(1){animation-delay:.6s}
.jxv-ui.is-in .jxv-props li:nth-child(2){animation-delay:.9s}
.jxv-btns{display:flex;justify-content:flex-end;gap:8px;margin:0}
.jxv-btns span{padding:7px 14px;border-radius:999px;font-size:12px;font-weight:600}
.jxv-btns span:last-child{background:var(--a);color:#fff}
.jxv-btns span:first-child{background:var(--sf)}
.jxv-ui.is-in .jxv-btns span:last-child{animation:jxv-pulse 2s ease-in-out 1.4s infinite}

/* urgent */
.jxv-urg{min-height:210px;background:linear-gradient(180deg,var(--sf),transparent)}
.jxv-urg__b{display:flex;gap:10px;padding:12px 14px;border-radius:16px;background:#131430;color:#fff;box-shadow:0 20px 40px -14px rgba(19,20,48,.6);opacity:0;transform:translateY(-16px)}
.jxv-urg__b::before{content:"!";display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#ff6b81,#ff9f43);font-weight:800;flex:none}
.jxv-urg__b small{display:block;color:#ffb3bf;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.jxv-urg__b p{margin:2px 0 0;color:rgba(255,255,255,.78);font-size:12px}
.jxv-ui.is-in .jxv-urg__b{animation:jxv-drop .7s cubic-bezier(.22,1,.36,1) .5s forwards}
@keyframes jxv-drop{to{opacity:1;transform:none}
}
.jxv-urg__lines{display:grid;gap:8px;margin-top:16px}
.jxv-urg__lines i{display:block;height:10px;border-radius:6px;background:var(--sf)}
.jxv-urg__lines i:nth-child(2){width:70%}
.jxv-urg__lines i:nth-child(3){width:85%}

/* rows on the page */
.jxv-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,64px);align-items:center;margin:0 0 clamp(48px,7vw,96px)}
.jxv-row.is-flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.jxv-row.is-flip>.jxv-copy{order:2}
.jxv-copy h3{margin:0 0 10px;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.03em;line-height:1.1}
.jxv-copy p{margin:0 0 14px;color:var(--muted,#5d5f72);font-size:16px;line-height:1.55}
.jxv-kicker{display:inline-block;margin-bottom:10px;padding:4px 12px;border-radius:999px;background:var(--lilac,#dcd4ff);color:#131430!important;font-size:13px!important;font-weight:600}
.jxv-copy ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.jxv-copy li{display:flex;gap:10px;font-size:15px}
.jxv-copy li::before{content:"✓";color:var(--accent,#6c4ef5);font-weight:800}
.jxv-deck{max-width:980px;margin:0 auto}
@media (max-width:860px){.jxv-row,.jxv-row.is-flip{grid-template-columns:1fr}
.jxv-row.is-flip>.jxv-copy{order:0}
.jxv-kb{grid-template-columns:repeat(3,minmax(120px,1fr));overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){.jxv-ui *,.jxv-ui *::before,.jxv-ui *::after{animation:none!important;transition:none!important}
.jxv-tl__bar{transform:none}
.jxv-urg__b{opacity:1;transform:none}
.jxv-prog b{width:var(--w,75%)}
}
[data-theme="dark"] .jxv-ui{--tx:#fff;--mt:rgba(255,255,255,.65);--ln:rgba(255,255,255,.12);--sf:rgba(255,255,255,.06);--cd:#1b1c3a}
.jxv-feed__win{position:relative;height:250px;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.jxv-feed ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.jxv-ui.is-in .jxv-feed ul,.jxv-feed.is-in ul{animation:jxv-feed 18s linear infinite}
.jxv-feed li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--sf);font-size:12.5px}
.jxv-feed li time{color:var(--mt);font-size:11px}
.jxv-av.is-ai{background:linear-gradient(135deg,#7a5af8,#c86bd8)}
.jxv-av.is-paid{background:#2bb39a}
.jxv-av.is-g{background:#4285f4}
@keyframes jxv-feed{to{transform:translateY(calc(-50% - 4px))}
}
.jxv-live{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#3ecf8e;box-shadow:0 0 0 0 rgba(62,207,142,.6);animation:jxv-livep 1.6s infinite}
@keyframes jxv-livep{70%{box-shadow:0 0 0 7px rgba(62,207,142,0)}
100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}
}
.jxv-orbit{position:relative;width:min(420px,100%);aspect-ratio:1;margin:0 auto}
.jxv-orbit__ring{position:absolute;inset:12%;border:1px dashed rgba(108,78,245,.35);border-radius:50%}
.jxv-orbit__ring.is-2{inset:28%;border-style:solid;border-color:rgba(108,78,245,.15)}
.jxv-orbit__core{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:26px;background:linear-gradient(135deg,var(--accent,#6c4ef5),#c86bd8);color:#fff;font-size:34px;font-weight:800;box-shadow:0 20px 50px -14px rgba(108,78,245,.7)}
.jxv-orbit__core::after{content:"";position:absolute;inset:-10px;border:2px solid rgba(108,78,245,.4);border-radius:32px;animation:jxv-ring 2.4s ease-out infinite}
.jxv-orbit__spin{position:absolute;inset:12%;animation:jxv-orb 40s linear infinite}
.jxv-orbit__app{position:absolute;top:50%;left:50%;display:grid;justify-items:center;gap:4px;width:64px;margin:-32px 0 0 -32px;transform:rotate(calc(var(--i) * 60deg)) translate(calc(min(420px,100vw - 64px) * .38)) rotate(calc(var(--i) * -60deg))}
.jxv-orbit__app b{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--c);color:#fff;font-size:20px;box-shadow:0 12px 24px -10px var(--c);animation:jxv-orb 40s linear infinite reverse}
.jxv-orbit__app small{padding:2px 8px;border-radius:999px;background:var(--card,#fff);color:var(--ink,#131430);font-size:11px;font-weight:600;box-shadow:0 2px 6px rgba(19,20,48,.1);animation:jxv-orb 40s linear infinite reverse}
@keyframes jxv-orb{to{rotate:360deg}
}
@media (prefers-reduced-motion:reduce){.jxv-orbit *,.jxv-feed ul{animation:none!important}
}
@media (max-width:720px){.jxv-kb{grid-template-columns:1fr}
.jxv-ui.is-in .jxv-kb__card.is-moving{animation-name:jxv-lift}
}
@keyframes jxv-lift{0%,20%{transform:none}
45%{transform:translateY(-8px)}
70%,100%{transform:none}
}
/* tickets (CRM Plus slider) */
.jxv-tk__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jxv-tk__list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--sf); }
.jxv-tk__list b { display: block; font-size: 13px; }
.jxv-tk__list small { display: block; color: var(--mt); font-size: 11.5px; }
.jxv-tk__list em { font-size: 11px; font-style: normal; font-weight: 700; color: var(--mt); }
.jxv-tk__list .is-hot { background: #fff1dc; }
.jxv-tk__list .is-hot em { color: #a3570b; }
.jxv-tk__list .is-done { opacity: 0.72; }
.jxv-ui.is-in .jxv-tk__list li { animation: jxv-slide 0.5s both; }
.jxv-ui.is-in .jxv-tk__list li:nth-child(2) { animation-delay: 0.12s; }
.jxv-ui.is-in .jxv-tk__list li:nth-child(3) { animation-delay: 0.24s; }

/* Slides 2 and 3: two panels each; the story plays once every time the slide comes round. */
.jxs-bill, .jxs-ai { display: flex; flex-direction: column; }
.jxs-cols { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1.1fr); align-items: stretch; gap: 10px; }
.jxs-pane, .jxs-doc { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: 16px; background: var(--sf, rgba(19, 20, 48, 0.05)); }
.jxs-doc { border: 1px solid var(--ln, rgba(19, 20, 48, 0.1)); background: var(--cd, #fff); box-shadow: 0 18px 36px -22px rgba(19, 20, 48, 0.45); }
.jxs-k { margin: 0; color: var(--mt, #5d5f72); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.jxs-arrow { position: relative; align-self: center; height: 2px; border-radius: 2px; background: var(--ln, rgba(19, 20, 48, 0.12)); overflow: hidden; }
.jxs-arrow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #8b7bff, #2fd6e6); transform: translateX(-100%); }
.jxs-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.jxs-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius); background: var(--cd, #fff); box-shadow: 0 1px 2px rgba(19, 20, 48, 0.08); font-size: 12.5px; }
.jxs-list li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.jxs-list li span:not(.jxv-av) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jxs-sum { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; font-size: 12.5px; }
.jxs-sum span { color: var(--mt, #5d5f72); }
.jxs-btn { position: relative; display: grid; place-items: center; min-height: 34px; border-radius: 999px; background: var(--a, #6c4ef5); color: #fff; font-size: 12.5px; font-weight: 700; overflow: hidden; }
.jxs-btn > i { grid-area: 1 / 1; font-style: normal; }
.jxs-btn > i + i { opacity: 0; }
.jxs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jxs-head b { font-size: 14px; }
.jxs-to { margin: -4px 0 0; color: var(--mt, #5d5f72); font-size: 12px; }
.jxs-state { display: grid; }
.jxs-state i { grid-area: 1 / 1; justify-self: end; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 700; opacity: 0; }
.jxs-state i:nth-child(1) { background: var(--sf, rgba(19, 20, 48, 0.06)); color: var(--mt, #5d5f72); opacity: 1; }
.jxs-state i:nth-child(2) { background: #e6efff; color: #2756c5; }
.jxs-state i:nth-child(3) { background: #dff3e6; color: #1d6b3a; }
.jxs-lines { display: grid; gap: 6px; margin: 0; padding: 10px 0; border-block: 1px solid var(--ln, rgba(19, 20, 48, 0.1)); list-style: none; }
.jxs-lines li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; opacity: 0; }
.jxs-lines li b { font-variant-numeric: tabular-nums; }
.jxs-total { display: flex; justify-content: space-between; align-items: baseline; }
.jxs-total span { color: var(--mt, #5d5f72); font-size: 12px; }
.jxs-total b { font-size: 20px; letter-spacing: -0.02em; }
.jxs-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; color: var(--mt, #5d5f72); font-size: 11.5px; }
.jxs-pdf { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--ln, rgba(19, 20, 48, 0.12)); border-radius: 8px; color: var(--tx, #131430); font-weight: 600; }
.jxs-pdf::before { content: ""; width: 9px; height: 11px; border: 1.5px solid currentColor; border-radius: 2px; }
.jxs-stamp { padding: 3px 9px; border: 2px solid #2fb67c; border-radius: 8px; color: #1d6b3a; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; transform: rotate(-6deg) scale(1.6); opacity: 0; }

.jxs-chat { display: grid; align-content: start; gap: 10px; }
.jxs-msg { display: flex; align-items: flex-start; gap: 8px; }
.jxs-msg p { margin: 0; padding: 8px 11px; border-radius: 4px 14px 14px 14px; background: var(--cd, #fff); box-shadow: 0 1px 2px rgba(19, 20, 48, 0.08); font-size: 12.5px; }
.jxs-msg.is-ai { opacity: 0; }
.jxs-msg.is-ai p { background: rgba(108, 78, 245, 0.1); box-shadow: none; }
.jxs-spark { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #8b7bff, #6c4ef5); color: #fff; font-size: 11px; }
.jxs-voice { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: var(--cd, #fff); box-shadow: 0 1px 2px rgba(19, 20, 48, 0.08); color: var(--mt, #5d5f72); font-size: 11.5px; }
.jxs-voice > span { display: flex; align-items: center; gap: 3px; height: 16px; }
.jxs-voice > span i { width: 3px; height: 100%; border-radius: 3px; background: #6c4ef5; transform: scaleY(0.3); }
.jxs-dots { display: flex; gap: 4px; padding: 10px 12px; width: max-content; border-radius: 14px; background: rgba(108, 78, 245, 0.1); opacity: 0; }
.jxs-dots i { width: 6px; height: 6px; border-radius: 50%; background: #6c4ef5; opacity: 0.4; }
.jxs-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.jxs-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius); background: var(--sf, rgba(19, 20, 48, 0.05)); font-size: 12.5px; opacity: 0; }
.jxs-steps li::before { content: "\2713"; display: grid; place-items: center; width: 14px; height: 14px; flex: none; border: 1.5px solid var(--ln, rgba(19, 20, 48, 0.25)); border-radius: 4px; color: transparent; font-size: 10px; font-weight: 800; line-height: 1; }
.jxs-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jxs-steps li small { margin-left: auto; flex: none; }
.jxs-doc .jxs-btn { margin-top: auto; }

.jxv-slide.is-on .jxs-arrow::after { animation: jxs-flow 1s ease 1s both; }
.jxv-slide.is-on .jxs-bill .jxs-btn > i:first-child { animation: jxs-out 0.3s ease 1s both; }
.jxv-slide.is-on .jxs-bill .jxs-btn > i + i { animation: jxs-in 0.3s ease 1.05s both; }
.jxv-slide.is-on .jxs-bill .jxs-btn { animation: jxs-press 0.4s ease 0.75s both; }
.jxv-slide.is-on .jxs-lines li { animation: jxs-in 0.4s ease both; }
.jxv-slide.is-on .jxs-lines li:nth-child(1) { animation-delay: 1.5s; }
.jxv-slide.is-on .jxs-lines li:nth-child(2) { animation-delay: 1.75s; }
.jxv-slide.is-on .jxs-lines li:nth-child(3) { animation-delay: 2s; }
.jxv-slide.is-on .jxs-state i:nth-child(1) { animation: jxs-out 0.25s ease 2.6s both; }
.jxv-slide.is-on .jxs-state i:nth-child(2) { animation: jxs-in 0.25s ease 2.6s both, jxs-out 0.25s ease 3.6s forwards; }
.jxv-slide.is-on .jxs-state i:nth-child(3) { animation: jxs-in 0.25s ease 3.6s both; }
.jxv-slide.is-on .jxs-stamp { animation: jxs-stamp 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) 3.7s both; }

.jxv-slide.is-on .jxs-voice > span i { animation: jxs-wave 0.3s ease-in-out 5 alternate both; }
.jxs-voice > span i:nth-child(odd) { --h: 0.55; }
.jxv-slide.is-on .jxs-steps li::before { animation: jxs-tick 0.25s ease both; }
.jxv-slide.is-on .jxs-steps li:nth-child(1)::before { animation-delay: 3.95s; }
.jxv-slide.is-on .jxs-steps li:nth-child(2)::before { animation-delay: 4.15s; }
.jxv-slide.is-on .jxs-steps li:nth-child(3)::before { animation-delay: 4.35s; }
.jxv-slide.is-on .jxs-voice > span i:nth-child(2) { animation-delay: 0.1s; }
.jxv-slide.is-on .jxs-voice > span i:nth-child(3) { animation-delay: 0.2s; }
.jxv-slide.is-on .jxs-voice > span i:nth-child(4) { animation-delay: 0.05s; }
.jxv-slide.is-on .jxs-voice > span i:nth-child(5) { animation-delay: 0.15s; }
.jxv-slide.is-on .jxs-dots { animation: jxs-in 0.25s ease 0.9s both, jxs-gone 0.2s ease 1.7s forwards; }
.jxv-slide.is-on .jxs-dots i { animation: jxs-blink 0.9s ease-in-out infinite; }
.jxv-slide.is-on .jxs-dots i:nth-child(2) { animation-delay: 0.15s; }
.jxv-slide.is-on .jxs-dots i:nth-child(3) { animation-delay: 0.3s; }
.jxv-slide.is-on .jxs-msg.is-ai { animation: jxs-in 0.4s ease 1.8s both; }
.jxv-slide.is-on .jxs-steps li { animation: jxs-in 0.35s ease both; }
.jxv-slide.is-on .jxs-steps li:nth-child(1) { animation-delay: 2.3s; }
.jxv-slide.is-on .jxs-steps li:nth-child(2) { animation-delay: 2.55s; }
.jxv-slide.is-on .jxs-steps li:nth-child(3) { animation-delay: 2.8s; }
.jxv-slide.is-on .jxs-ai .jxs-btn { animation: jxs-press 0.4s ease 3.5s both; }
.jxv-slide.is-on .jxs-ai .jxs-btn > i:first-child { animation: jxs-out 0.3s ease 3.75s both; }
.jxv-slide.is-on .jxs-ai .jxs-btn > i + i { animation: jxs-in 0.3s ease 3.8s both; }
.jxv-slide.is-on .jxs-ai .jxs-btn { background: var(--a, #6c4ef5); }
@keyframes jxs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes jxs-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes jxs-gone { to { opacity: 0; height: 0; padding-block: 0; margin-top: -10px; } }
@keyframes jxs-flow { to { transform: translateX(100%); } }
@keyframes jxs-press { 50% { transform: scale(0.94); } to { transform: none; background: #2fb67c; } }
@keyframes jxs-stamp { from { opacity: 0; transform: rotate(-6deg) scale(1.6); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
@keyframes jxs-wave { to { transform: scaleY(var(--h, 1)); } }
@keyframes jxs-tick { to { border-color: #2fb67c; background: #2fb67c; color: #fff; } }
@keyframes jxs-blink { 50% { opacity: 1; transform: translateY(-2px); } }
@media (max-width: 720px) {
	.jxs-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto 1fr; }
	.jxs-arrow { justify-self: center; width: 2px; height: 22px; }
	.jxs-arrow::after { background: linear-gradient(180deg, #8b7bff, #2fd6e6); transform: translateY(-100%); }
	.jxv-slide.is-on .jxs-arrow::after { animation-name: jxs-flow-down; }
}
@keyframes jxs-flow-down { to { transform: translateY(100%); } }
[data-theme="dark"] .jxs-state i:nth-child(2) { background: rgba(39, 86, 197, 0.3); color: #b9cdff; }
[data-theme="dark"] .jxs-state i:nth-child(3), [data-theme="dark"] .jxs-stamp { background: rgba(47, 182, 124, 0.2); color: #9be3bf; }
@media (prefers-reduced-motion: reduce) {
	.jxv-slide { transition: none; }
	.jxv-ui.is-in .jxv-kb__card.is-moving { animation: none !important; }
	.jxv-slide [class^="jxs-"], .jxv-slide [class^="jxs-"] *, .jxv-slide [class^="jxs-"]::after, .jxv-slide .jxs-steps li::before { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* "Up and running today": a looping scene in every step. Each loop is 7s; 80% is the finished picture. */
.jxst { --sb: rgba(19, 20, 48, 0.045); --sc: var(--card, #fff); --sl: rgba(19, 20, 48, 0.1); --sm: var(--muted, #5d5f72); --sa: var(--accent, #6c4ef5); display: flex; flex-direction: column; justify-content: center; gap: 10px; height: 156px; margin: -6px 0 24px; padding: 14px; border-radius: 16px; background: var(--sb); color: var(--ink, #131430); font-size: 12.5px; line-height: 1.3; overflow: hidden; }
.jxst * { animation-duration: 7s; animation-timing-function: ease; animation-iteration-count: infinite; animation-delay: var(--off, 0s); animation-fill-mode: both; }
.j-step:nth-child(2) .jxst { --off: -1.4s; }
.j-step:nth-child(3) .jxst { --off: -2.8s; }
.j-step:nth-child(4) .jxst { --off: -0.7s; }
.j-step:nth-child(5) .jxst { --off: -2.1s; }
.jxst p { margin: 0 !important; color: inherit !important; font-size: inherit !important; line-height: inherit !important; }
.jxst i, .jxst b { font-style: normal; }
.jxst__chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: var(--radius); background: var(--sc); box-shadow: 0 1px 2px rgba(19, 20, 48, 0.08); }
.jxst__chip p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jxst__chip small { color: var(--sm); font-size: 11px; }
.jxst__pills { display: flex; gap: 6px; }
.jxst__pills i { padding: 4px 9px; border: 1px solid var(--sl); border-radius: 999px; background: var(--sc); color: var(--sm); font-size: 11px; white-space: nowrap; }
.jxst__btn { display: grid; }
.jxst__btn b { grid-area: 1 / 1; padding: 8px; border-radius: 999px; background: var(--sa); color: #fff; font-size: 12px; text-align: center; }
.jxst__btn b + b { background: #2fb67c; }
.jxst__send { padding: 3px 9px; border-radius: 999px; background: var(--sa); color: #fff; font-size: 11px; }
.jxst__ico { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px; background: rgba(108, 78, 245, 0.12); color: var(--sa); font-size: 12px; }
.jxst__faces { display: flex; align-items: center; padding-left: 6px; }
.jxst__faces i { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -6px; border-radius: 50%; background: var(--sa); box-shadow: 0 0 0 2px var(--sc); color: #fff; font-size: 11px; font-weight: 700; }
.jxst__faces i:nth-child(2) { background: #e8910c; }
.jxst__faces i:nth-child(3) { background: #2bb39a; }
.jxst__faces i:nth-child(4) { background: #c86bd8; }
.jxst__toast { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: #dff3e6; color: #1d6b3a; font-size: 11px; font-weight: 700; }
.jxst__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 64px; }
.jxst__cols > span { display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: 8px; background: var(--sc); box-shadow: 0 1px 2px rgba(19, 20, 48, 0.08); }
.jxst__cols > span::before { content: ""; width: 50%; height: 4px; border-radius: 4px; background: var(--sl); }
.jxst__cols i { height: 10px; border-radius: 4px; background: rgba(108, 78, 245, 0.18); }
.jxst__cols span:nth-child(2) i { background: rgba(232, 145, 12, 0.25); }
.jxst__cols span:nth-child(3) i { background: rgba(43, 179, 154, 0.25); }
.jxst__rec { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #ef4e5a; }
.jxst__roll { display: inline-block; height: 1.3em; overflow: hidden; font-variant-numeric: tabular-nums; font-weight: 700; vertical-align: bottom; }
.jxst__roll > span { display: flex; flex-direction: column; }
.jxst__roll > span b { height: 1.3em; }
.jxst__bar { height: 8px; border-radius: 99px; background: var(--sl); overflow: hidden; }
.jxst__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b7bff, #2fd6e6); transform-origin: left center; }
.jxst__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jxst__row > span:first-child { color: var(--sm); }
.jxst__row .jxst__roll { font-size: 18px; }

.jxst__type { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; border-right: 2px solid var(--sa); animation-name: jxst-type; }
.jxst--make .jxst__pills i:first-child { animation-name: jxst-pick; }
.jxst--make .jxst__btn { animation-name: jxst-press; }
.jxst__btn b:first-child { animation-name: jxst-swap; }
.jxst__btn b + b { animation-name: jxst-in4; }
.jxst--invite .jxst__send { animation-name: jxst-tap; }
.jxst__faces i:nth-child(1) { animation-name: jxst-in1; }
.jxst__faces i:nth-child(2) { animation-name: jxst-in2; }
.jxst__faces i:nth-child(3) { animation-name: jxst-in3; }
.jxst__faces i:nth-child(4) { animation-name: jxst-in4; }
.jxst--invite .jxst__toast, .jxst--grow .jxst__toast { animation-name: jxst-in5; }
.jxst--tpl .jxst__pills i:nth-child(2) { animation-name: jxst-pickA; }
.jxst__cols span:nth-child(1) i:nth-child(1) { animation-name: jxst-in2; }
.jxst__cols span:nth-child(2) i:nth-child(1) { animation-name: jxst-in3; }
.jxst__cols span:nth-child(1) i:nth-child(2), .jxst__cols span:nth-child(3) i:nth-child(1) { animation-name: jxst-in4; }
.jxst__cols span:nth-child(3) i:nth-child(2) { animation-name: jxst-in5; }
.jxst__rec { animation: jxst-rec 1.2s ease-in-out infinite; }
.jxst__roll > span { animation-name: jxst-roll; }
.jxst--time .jxst__bar i { animation-name: jxst-fill; }
.jxst--time .jxst__chip + .jxst__chip { animation-name: jxst-in5; }
.jxst--grow .jxst__bar i { animation-name: jxst-fill; }
.jxst--grow .jxst__pills i:nth-child(1) { animation-name: jxst-plan1; }
.jxst--grow .jxst__pills i:nth-child(2) { animation-name: jxst-plan2; }
.jxst--grow .jxst__pills i:nth-child(3) { animation-name: jxst-plan3; }

@keyframes jxst-type { 0%, 4% { max-width: 0; animation-timing-function: steps(16, end); } 30%, 92% { max-width: 9.5em; } 100% { max-width: 0; } }
@keyframes jxst-pick { 0%, 34%, 97%, 100% { border-color: var(--sl); background: var(--sc); color: var(--sm); } 38%, 92% { border-color: var(--sa); background: var(--sa); color: #fff; } }
@keyframes jxst-pickA { 0%, 12%, 97%, 100% { border-color: var(--sl); background: var(--sc); color: var(--sm); } 17%, 92% { border-color: var(--sa); background: var(--sa); color: #fff; } }
@keyframes jxst-press { 0%, 44% { transform: none; } 47% { transform: scale(0.95); } 51%, 100% { transform: none; } }
@keyframes jxst-tap { 0%, 10% { transform: none; opacity: 1; } 13% { transform: scale(0.88); } 16%, 92% { transform: none; opacity: 0.45; } 100% { opacity: 1; } }
@keyframes jxst-swap { 0%, 48% { opacity: 1; } 53%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes jxst-in1 { 0%, 18% { opacity: 0; transform: translateY(6px) scale(0.85); } 24%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes jxst-in2 { 0%, 26% { opacity: 0; transform: translateY(6px) scale(0.85); } 32%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes jxst-in3 { 0%, 34% { opacity: 0; transform: translateY(6px) scale(0.85); } 40%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes jxst-in4 { 0%, 48% { opacity: 0; transform: translateY(6px) scale(0.85); } 54%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes jxst-in5 { 0%, 58% { opacity: 0; transform: translateY(6px) scale(0.85); } 64%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes jxst-rec { 50% { opacity: 0.25; } }
@keyframes jxst-roll { 0%, 18% { transform: none; } 24%, 42% { transform: translateY(-1.3em); } 48%, 94% { transform: translateY(-2.6em); } 100% { transform: none; } }
@keyframes jxst-fill { 0%, 18% { transform: scaleX(0.3); } 24%, 42% { transform: scaleX(0.55); } 48%, 94% { transform: scaleX(0.86); } 100% { transform: scaleX(0.3); } }
@keyframes jxst-plan1 { 0%, 18%, 100% { border-color: var(--sa); background: var(--sa); color: #fff; } 24%, 94% { border-color: var(--sl); background: var(--sc); color: var(--sm); } }
@keyframes jxst-plan2 { 0%, 18%, 48%, 100% { border-color: var(--sl); background: var(--sc); color: var(--sm); } 24%, 42% { border-color: var(--sa); background: var(--sa); color: #fff; } }
@keyframes jxst-plan3 { 0%, 42%, 100% { border-color: var(--sl); background: var(--sc); color: var(--sm); } 48%, 94% { border-color: var(--sa); background: var(--sa); color: #fff; } }
[data-theme="dark"] .jxst { --sb: rgba(255, 255, 255, 0.05); --sc: rgba(255, 255, 255, 0.08); --sl: rgba(255, 255, 255, 0.14); color: #fff; }
[data-theme="dark"] .jxst__toast { background: rgba(47, 182, 124, 0.2); color: #9be3bf; }
@media (max-width: 760px) {
	.jxst { height: 148px; margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.jxst * { animation-delay: -5.6s !important; animation-play-state: paused !important; }
}

/* Unique SVG scenes per Marketplace story page. */
.jxa--scene { gap: 8px; }
.jxa--scene .jx-scene { display: block; width: 100%; height: auto; flex: 1; min-height: 220px; font-family: var(--font, system-ui, sans-serif); }
.jxa--contracts { background: linear-gradient(180deg, #f4f1ff 0%, #fff 52%); }
.jxa--invoices-in { background: linear-gradient(180deg, #e8f7f2 0%, #fff 52%); }
.jxa--expenses { background: linear-gradient(180deg, #fff8f0 0%, #fff 52%); }
.jxa--timesheets { background: linear-gradient(180deg, #eef0ff 0%, #fff 52%); }
.jxa--booking { background: linear-gradient(180deg, #e9f8f1 0%, #fff 52%); }
.jxa--requests { background: linear-gradient(180deg, #fff4ec 0%, #fff 52%); }
.jxa--documents { background: linear-gradient(180deg, #f3f4fb 0%, #fff 52%); }
.jxa--orders { background: linear-gradient(180deg, #eef3ff 0%, #fff 52%); }
.jxa--portal { background: linear-gradient(180deg, #f3edff 0%, #fff 52%); }
.jxa--google { background: linear-gradient(180deg, #e8f0fe 0%, #fff 52%); }
.jxa--slack { background: linear-gradient(180deg, #2a2438 0%, #1a1d21 62%); }
.jxa--slack .jxa__bar b, .jxa--slack .jxa__live { color: #fff; }
.jxa--crm { background: linear-gradient(180deg, #f4f1ff 0%, #fff 52%); }
[data-theme="dark"] .jxa--scene:not(.jxa--slack) { background: #fff; color: #131430; }
[data-theme="dark"] .jxa--contracts { background: linear-gradient(180deg, #f4f1ff 0%, #fff 52%); }
[data-theme="dark"] .jxa--invoices-in { background: linear-gradient(180deg, #e8f7f2 0%, #fff 52%); }
[data-theme="dark"] .jxa--expenses { background: linear-gradient(180deg, #fff8f0 0%, #fff 52%); }
[data-theme="dark"] .jxa--timesheets { background: linear-gradient(180deg, #eef0ff 0%, #fff 52%); }
[data-theme="dark"] .jxa--booking { background: linear-gradient(180deg, #e9f8f1 0%, #fff 52%); }
[data-theme="dark"] .jxa--requests { background: linear-gradient(180deg, #fff4ec 0%, #fff 52%); }
[data-theme="dark"] .jxa--documents { background: linear-gradient(180deg, #f3f4fb 0%, #fff 52%); }
[data-theme="dark"] .jxa--orders { background: linear-gradient(180deg, #eef3ff 0%, #fff 52%); }
[data-theme="dark"] .jxa--portal { background: linear-gradient(180deg, #f3edff 0%, #fff 52%); }
[data-theme="dark"] .jxa--google { background: linear-gradient(180deg, #e8f0fe 0%, #fff 52%); }
[data-theme="dark"] .jxa--crm { background: linear-gradient(180deg, #f4f1ff 0%, #fff 52%); }

.jx-scene--contracts .jx-s-paper { transform-origin: 180px 150px; animation: jx-s-float 6s ease-in-out infinite; }
.jx-scene--contracts .jx-s-sign { stroke-dasharray: 180; stroke-dashoffset: 180; animation: jx-s-draw 4.5s ease-in-out infinite; }
.jx-scene--contracts .jx-s-stamp { transform-origin: 240px 212px; animation: jx-s-stamp 4.5s ease-in-out infinite; }
.jx-scene--invoices-in .jx-s-env { animation: jx-s-drop 5s ease-in-out infinite; }
.jx-scene--invoices-in .jx-s-bill { animation: jx-s-up 5s ease-in-out infinite; }
.jx-scene--invoices-in .jx-s-paid { transform-origin: 261px 242px; animation: jx-s-stamp 5s ease-in-out infinite; }
.jx-scene--expenses .jx-s-receipt { transform-origin: 162px 150px; animation: jx-s-tilt 5.5s ease-in-out infinite; }
.jx-scene--expenses .jx-s-flash { animation: jx-s-ring 2.2s ease-out infinite; }
.jx-scene--expenses .jx-s-ok { transform-origin: 162px 222px; animation: jx-s-pop 5.5s ease-in-out infinite; }
.jx-scene--timesheets .jx-s-hbar { transform-box: fill-box; transform-origin: center bottom; animation: jx-s-bar 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.jx-scene--timesheets .jx-s-week { transform-box: fill-box; transform-origin: left center; animation: jx-s-growx 5s ease-in-out infinite; }
.jx-scene--timesheets .jx-s-lock { animation: jx-s-pulse 2.4s ease-in-out infinite; }
.jx-scene--booking .jx-s-slot rect { animation: jx-s-glow 3.2s ease-in-out infinite; }
.jx-scene--booking .jx-s-block { animation: jx-s-pop 3.2s ease-in-out infinite; }
.jx-scene--booking .jx-s-ok { animation: jx-s-pulse 2.8s ease-in-out infinite; }
.jx-scene--requests .jx-s-leave { animation: jx-s-chip 3.6s ease-in-out infinite; }
.jx-scene--requests .jx-s-ok { transform-origin: 300px 248px; animation: jx-s-pop 3.6s ease-in-out infinite; }
.jx-scene--documents .jx-s-v1 { animation: jx-s-stack 6s ease-in-out infinite; }
.jx-scene--documents .jx-s-v2 { animation: jx-s-stack 6s ease-in-out infinite 0.2s; }
.jx-scene--documents .jx-s-v3 { animation: jx-s-stack 6s ease-in-out infinite 0.4s; }
.jx-scene--orders .jx-s-flow { stroke-dasharray: 28; animation: jx-s-dash 1.2s linear infinite; }
.jx-scene--orders .jx-s-po { animation: jx-s-nudge 4s ease-in-out infinite; }
.jx-scene--orders .jx-s-inv { animation: jx-s-nudge 4s ease-in-out infinite reverse; }
.jx-scene--orders .jx-s-match { transform-origin: 270px 181px; animation: jx-s-pop 4s ease-in-out infinite; }
.jx-scene--portal .jx-s-link { animation: jx-s-pulse 2.2s ease-in-out infinite; }
.jx-scene--portal .jx-s-c1 { animation: jx-s-up 4.8s ease-in-out infinite; }
.jx-scene--portal .jx-s-c2 { animation: jx-s-up 4.8s ease-in-out infinite 0.15s; }
.jx-scene--portal .jx-s-c3 { animation: jx-s-up 4.8s ease-in-out infinite 0.3s; }
.jx-scene--google .jx-s-mail { animation: jx-s-nudge 5s ease-in-out infinite; }
.jx-scene--google .jx-s-cal { animation: jx-s-nudge 5s ease-in-out infinite reverse; }
.jx-scene--google .jx-s-card { animation: jx-s-pop 5s ease-in-out infinite; }
.jx-scene--slack .jx-s-msg { animation: jx-s-up 4.5s ease-in-out infinite; }
.jx-scene--slack .jx-s-card { animation: jx-s-pop 4.5s ease-in-out infinite; }
.jx-scene--crm .jx-s-move { animation: jx-s-kanban 6s cubic-bezier(.65,0,.35,1) infinite; }
.jx-scene--payroll .jx-s-slip { transform-origin: 180px 150px; animation: jx-s-float 6s ease-in-out infinite; }
.jx-scene--payroll .jx-s-net { transform-box: fill-box; transform-origin: left center; animation: jx-s-growx 5s ease-in-out infinite; }
.jx-scene--payroll .jx-s-stamp { transform-origin: 253px 60px; animation: jx-s-stamp 5s ease-in-out infinite; }
.jx-scene--payroll .jx-s-mail { animation: jx-s-nudge 4.5s ease-in-out infinite; }

.jx-scenefull-sec { padding-top: 8px; }
.jx-scenefull { max-width: 720px; margin: 0 auto; }
.jx-scenefull-svg { display: block; width: 100%; height: auto; color: #6c4ef5; font-family: var(--font, system-ui, sans-serif); }
.jx-scenefull-svg--invoices-in { color: #2bb39a; }
.jx-scenefull-svg--expenses { color: #e8910c; }
.jx-scenefull-svg--timesheets { color: #6c4ef5; }
.jx-scenefull-svg--booking { color: #2fb67c; }
.jx-scenefull-svg--requests { color: #e07a3a; }
.jx-scenefull-svg--documents { color: #5b3fd6; }
.jx-scenefull-svg--orders { color: #2756c5; }
.jx-scenefull-svg--portal { color: #7a5af8; }
.jx-scenefull-svg--google { color: #1967d2; }
.jx-scenefull-svg--slack { color: #e01e5a; }
.jx-scenefull-svg--payroll { color: #6c4ef5; }
.jx-scenefull-svg .jx-sf-step { opacity: 0; animation: jx-sf-in 0.7s ease both; animation-delay: var(--d, 0s); }
.jx-scenefull-svg .jx-sf-line { stroke-dasharray: 160; stroke-dashoffset: 160; animation: jx-sf-line 0.9s ease forwards; animation-delay: var(--d, 0.2s); }

@keyframes jx-s-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes jx-s-draw { 0%, 12% { stroke-dashoffset: 180; } 45%, 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 180; } }
@keyframes jx-s-stamp { 0%, 40% { opacity: 0; transform: scale(1.6) rotate(-12deg); } 55%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes jx-s-drop { 0%, 12% { transform: translate(18px, -24px); opacity: 0.2; } 35%, 100% { transform: none; opacity: 1; } }
@keyframes jx-s-up { 0%, 8% { transform: translateY(10px); opacity: 0.4; } 28%, 100% { transform: none; opacity: 1; } }
@keyframes jx-s-tilt { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes jx-s-ring { from { opacity: 0.7; transform: scale(0.7); } to { opacity: 0; transform: scale(1.45); } }
@keyframes jx-s-pop { 0%, 28% { opacity: 0; transform: scale(0.6); } 42%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.6); } }
@keyframes jx-s-bar { 0%, 8% { transform: scaleY(0.15); } 40%, 78% { transform: none; } 100% { transform: scaleY(0.15); } }
@keyframes jx-s-growx { 0%, 10% { transform: scaleX(0.35); } 50%, 100% { transform: none; } }
@keyframes jx-s-pulse { 50% { opacity: 0.55; } }
@keyframes jx-s-glow { 50% { fill: #dcd4ff; } }
@keyframes jx-s-chip { 0%, 18% { fill: #f6f5fb; } 40%, 100% { fill: #fde9dc; } }
@keyframes jx-s-stack { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(6px, -8px); } }
@keyframes jx-s-dash { to { stroke-dashoffset: -28; } }
@keyframes jx-s-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes jx-s-kanban { 0%, 18% { transform: none; } 38%, 72% { transform: translateX(112px); } 100% { transform: none; } }
@keyframes jx-sf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes jx-sf-line { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
	.jx-scene *, .jx-scenefull-svg * { animation: none !important; }
	.jx-scene--contracts .jx-s-sign { stroke-dashoffset: 0; }
	.jx-scenefull-svg .jx-sf-step { opacity: 1; }
	.jx-scenefull-svg .jx-sf-line { stroke-dashoffset: 0; }
}

/* Dashboard: My work today. */
.jx-work{ margin-bottom:16px; }
.jx-work__h{ display:flex; align-items:center; gap:8px; margin:16px 0 6px; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.jx-work__h span{ padding:1px 8px; border-radius:999px; background:var(--soft); font-size:12px; letter-spacing:0; }
.jx-work__h.is-late{ color:#b4361c; }
.jx-work__h.is-late span{ background:color-mix(in srgb,#b4361c 14%, var(--card)); }
.jx-work__list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.jx-work__list a{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:2px 12px; padding:9px 10px; border-radius:10px; color:inherit; text-decoration:none; }
.jx-work__list a:hover{ background:var(--soft); }
.jx-work__list b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jx-work__list small{ grid-column:1; color:var(--muted); }
.jx-work__list em{ grid-column:2; grid-row:1; font-style:normal; font-size:13px; color:var(--muted); white-space:nowrap; }
.jx-work__foot{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:14px; }
.jx-work__foot a{ color:var(--accent-2,#5b43d6); font-weight:600; }

/* Home: the compact "Simplify how your team works" section (shortcode [jx_simple]). */
.jxs { --t1: #ece8ff; --t2: #dcebf7; --t3: #f1f4bd; --t4: #fbe6d6; --mc: #fff; --mt: var(--ink, #131430); --mm: var(--muted, #5d5f72); --ml: rgba(19, 20, 48, 0.08); display: grid; justify-items: center; }
[data-theme="dark"] .jxs { --t1: #2b2452; --t2: #1f3247; --t3: #34341c; --t4: #3a2a22; --mc: rgba(255, 255, 255, 0.09); --ml: rgba(255, 255, 255, 0.12); }
.jxs-lede { max-width: 46rem; margin: 14px auto 0; text-align: center; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; }
.jxs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; margin-top: clamp(26px, 3vw, 44px); }
.jxs-card { display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.jxs-card h3 { margin: 18px 10px 6px; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.jxs-card p { margin: 0 10px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.jxs-vis { display: grid; align-items: center; height: 150px; padding: 14px; overflow: hidden; border-radius: 14px; font-size: 11.5px; color: var(--mt); }
.jxs-vis.t1 { background: var(--t1); }
.jxs-vis.t2 { background: var(--t2); }
.jxs-vis.t3 { background: var(--t3); }
.jxs-vis.t4 { background: var(--t4); }
.jxs-vis p, .jxs-vis div, .jxs-vis span, .jxs-vis em, .jxs-vis b, .jxs-vis i { margin: 0; box-sizing: border-box; }
.jxs-vis em { font-style: normal; }
.jxs-av { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent, #6c4ef5); color: #fff; font-size: 10px; font-weight: 700; }
.jxs-av.b { background: #2bb39a; }
.jxs-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.jxs-board > div { display: grid; align-content: start; gap: 6px; min-height: 108px; padding: 8px; border-radius: 10px; background: var(--ml); }
.jxs-board b { color: var(--mm); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }
.jxs-board i { display: flex; align-items: flex-end; justify-content: flex-end; height: 26px; padding: 4px; border-radius: 7px; background: var(--mc); box-shadow: 0 1px 2px rgba(19, 20, 48, 0.1); }
.jxs-board i.s { height: 18px; }
.jxs-board i.on { height: 34px; box-shadow: 0 0 0 2px var(--accent, #6c4ef5); }
.jxs-board i.ok { background: #cfeedd; }
[data-theme="dark"] .jxs-board i.ok { background: #1f4a35; }
.jxs-inv { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--mc); box-shadow: 0 1px 3px rgba(19, 20, 48, 0.1); }
.jxs-inv p { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--ml); }
.jxs-inv p.t { padding: 0; border: 0; }
.jxs-inv b { font-weight: 650; }
.jxs-inv em, .jxs-pay em { padding: 2px 8px; border-radius: 999px; background: #cfeedd; color: #1d6b3a; font-size: 10.5px; font-weight: 650; }
[data-theme="dark"] .jxs-inv em { background: #1f4a35; color: #9be4bd; }
.jxs-pay { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--mc); box-shadow: 0 1px 3px rgba(19, 20, 48, 0.1); }
.jxs-pay p { display: flex; justify-content: space-between; }
.jxs-pay b { font-weight: 650; }
.jxs-pay div { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.jxs-pay em { background: var(--ml); color: var(--mt); }
.jxs-pay em.x { background: var(--accent, #6c4ef5); color: #fff; }
.jxs-flow { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.jxs-flow > i { flex: 1 1 8px; min-width: 6px; height: 2px; background: var(--ml); }
.jxs-flow .n { display: grid; justify-items: center; gap: 5px; padding: 9px 8px; border-radius: 12px; background: var(--mc); box-shadow: 0 1px 3px rgba(19, 20, 48, 0.1); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.jxs-flow .n.ok { color: #1d6b3a; }
[data-theme="dark"] .jxs-flow .n.ok { color: #9be4bd; }
.jxs-flow .n .jx-ico, .jxs-flow .n svg { width: 20px; height: 20px; }
.jxs-chat { display: grid; gap: 8px; }
.jxs-chat p { max-width: 88%; padding: 8px 11px; border-radius: 12px; background: var(--mc); line-height: 1.35; box-shadow: 0 1px 3px rgba(19, 20, 48, 0.1); }
.jxs-chat .me { justify-self: end; background: var(--accent, #6c4ef5); color: #fff; }
.jxs-chat em { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 999px; background: var(--ml); color: var(--mm); font-size: 10px; font-weight: 600; }
.jxs-db { display: flex; align-items: center; gap: 12px; }
.jxs-db .ic { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 16px; background: var(--mc); color: var(--accent, #6c4ef5); box-shadow: 0 1px 3px rgba(19, 20, 48, 0.1); }
.jxs-db .ic .jx-ico, .jxs-db .ic svg { width: 28px; height: 28px; }
.jxs-db div { display: flex; flex-wrap: wrap; gap: 6px; }
.jxs-db em { padding: 4px 10px; border-radius: 999px; background: var(--mc); font-weight: 600; box-shadow: 0 1px 2px rgba(19, 20, 48, 0.08); }
.jxs-cta { display: flex; justify-content: center; margin: clamp(26px, 3vw, 40px) 0 0; }
.jxs-how { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; margin: clamp(30px, 3.4vw, 48px) 0 0; padding: 0; list-style: none; }
.jxs-how li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14.5px; font-weight: 550; }
.jxs-step__ic { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--soft); color: var(--accent, #6c4ef5); }
.jxs-step__ic .jx-ico, .jxs-step__ic svg { width: 17px; height: 17px; }
.jxs-step__ic b { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent, #6c4ef5); color: #fff; font-size: 9.5px; font-weight: 700; }
@media (max-width: 1100px) { .jxs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.jxs-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.jxs-how { justify-content: flex-start; gap: 12px 22px; }
	.jxs-how li { flex: 0 0 calc(50% - 11px); }
}
.jxs-board i { align-items: center; justify-content: space-between; gap: 6px; }
.jxs-board i::before { content: ""; flex: 0 1 62%; height: 5px; border-radius: 5px; background: var(--ml); }
.jxs-board i.ok::before { background: rgba(29, 107, 58, 0.35); }

/* "Simplify how your team works" on a dark band like the hero, taller cards, soft motion. */
.j-sec.jx-simple { margin: 0; padding-block: clamp(56px, 7vw, 104px); border-radius: 0; background: radial-gradient(120% 90% at 0% 0%, #7a2b63 0%, rgba(122, 43, 99, 0) 55%), radial-gradient(90% 80% at 100% 100%, #4b2fb0 0%, rgba(75, 47, 176, 0) 60%), #15122e; color: #fff; }
.jx-simple h2, .jx-simple .jxs > h2 { color: #fff; }
.jx-simple .jxs-lede { color: rgba(255, 255, 255, 0.78); }
.jx-simple .jxs-how, .jx-simple .jxs-how * { color: rgba(255, 255, 255, 0.86); }
.jx-simple .jxs-card { min-height: 360px; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.6); transition: transform 0.35s ease, box-shadow 0.35s ease; }
.jx-simple .jxs-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.7); }
.jx-simple .jxs-vis { height: 200px; }
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.jx-simple .jxs-card { animation: jxs-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
	}
}
@keyframes jxs-rise { from { opacity: 0; transform: translateY(28px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .jx-simple .jxs-card { min-height: 0; } .jx-simple .jxs-vis { height: 170px; } }
.jx-simple .jxs-card, .jx-simple .jxs-card h3 { color: var(--ink, #131430); }
.jx-simple .jxs-card p { color: var(--muted, #5d5f72); }

/* "Simplify how your team works" as a slider of big slides (reuses the jxv pattern: stacked grid, .is-on). */
.jxz { width: min(1000px, 100%); margin-top: clamp(26px, 3vw, 40px); outline: 0; }
.jxz-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: clamp(16px, 2vw, 24px); }
.jxz-tabs button { min-height: 40px; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.88); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s; }
.jxz-tabs button:hover { background: rgba(255, 255, 255, 0.16); }
.jxz-tabs button.is-on { border-color: #fff; background: #fff; color: #131430; }
.jxz-tabs button:focus-visible, .jxz-arrow:focus-visible, .jxz-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jxz-stage { position: relative; }
.jxz-slides { display: grid; width: 100%; touch-action: pan-y; }
.jxz-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; gap: clamp(18px, 3vw, 40px); min-height: 440px; padding: clamp(14px, 1.6vw, 22px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px; background: var(--card, #fff); color: var(--ink, #131430); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s; }
.jxz-slide.is-on { opacity: 1; visibility: visible; transform: none; z-index: 1; }
.jxz-vis { display: grid; align-items: center; min-width: 0; padding: clamp(18px, 3vw, 40px); overflow: hidden; border-radius: 20px; font-size: 16px; color: var(--mt); }
.jxz-vis.t1 { background: var(--t1); }
.jxz-vis.t2 { background: var(--t2); }
.jxz-vis.t3 { background: var(--t3); }
.jxz-vis.t4 { background: var(--t4); }
.jxz-vis p, .jxz-vis div, .jxz-vis span, .jxz-vis em, .jxz-vis b, .jxz-vis i, .jxz-vis u, .jxz-vis small { margin: 0; box-sizing: border-box; }
.jxz-vis em, .jxz-vis u { font-style: normal; text-decoration: none; }
.jxz-vis .jxs-av { width: 28px; height: 28px; font-size: 12px; }
.jxz-txt { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 10px clamp(6px, 1.4vw, 20px) 10px 0; }
.jxz-n { margin-bottom: 14px; color: var(--accent, #6c4ef5); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.jxz-txt h3 { margin: 0 0 12px; color: var(--ink, #131430); font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; }
.jxz-txt p { margin: 0; color: var(--muted, #5d5f72); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; }
.jxz-arrow { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0 0 4px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(21, 18, 46, 0.78); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background 0.2s; }
.jxz-arrow:hover { background: #6c4ef5; }
.jxz-prev { left: -22px; }
.jxz-next { right: -22px; }
.jxz-dots { display: none; justify-content: center; gap: 4px; margin-top: 14px; }
.jxz-dots button { position: relative; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.jxz-dots button::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transition: background 0.2s, inset 0.2s; }
.jxz-dots button.is-on::before { inset: 7px; background: #fff; }
.jxz-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jxz-board > div { display: grid; align-content: start; gap: 10px; min-height: 260px; padding: 12px; border-radius: 14px; background: var(--ml); }
.jxz-board b { color: var(--mm); font-size: 0.75em; letter-spacing: 0.06em; text-transform: uppercase; }
.jxz-board i { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 64px; padding: 10px; border-radius: 10px; background: var(--mc); box-shadow: 0 1px 3px rgba(19, 20, 48, 0.12); }
.jxz-board i.s { min-height: 48px; }
.jxz-board i.on { min-height: 82px; box-shadow: 0 0 0 2px var(--accent, #6c4ef5), 0 8px 18px -8px rgba(108, 78, 245, 0.5); }
.jxz-board i.ok { background: #cfeedd; }
[data-theme="dark"] .jxz-board i.ok { background: #1f4a35; }
.jxz-board u { font-size: 0.82em; font-weight: 600; line-height: 1.25; }
.jxz-board i .jxs-av { align-self: flex-end; }
.jxz-inv, .jxz-pay { display: grid; gap: 12px; width: min(100%, 420px); margin: 0 auto; padding: 22px 24px; border-radius: 16px; background: var(--mc); box-shadow: 0 24px 44px -24px rgba(19, 20, 48, 0.5); }
.jxz-inv p, .jxz-pay p { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ml); }
.jxz-inv p.t, .jxz-pay p.t { padding: 0 0 2px; border: 0; font-size: 1.2em; }
.jxz-inv b, .jxz-pay b { font-weight: 700; }
.jxz-inv p b, .jxz-pay p b { white-space: nowrap; }
.jxz-inv .h, .jxz-pay .h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--ml); }
.jxz-inv .h > div, .jxz-pay .h > div { display: grid; gap: 2px; margin-right: auto; }
.jxz-inv .h span, .jxz-pay .h span { color: var(--mm); font-size: 0.85em; }
.jxz-pay .h { justify-content: flex-start; }
.jxz-inv .f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; color: var(--mm); font-size: 0.85em; }
.jxz-inv em, .jxz-pay em { padding: 4px 12px; border-radius: 999px; background: #cfeedd; color: #1d6b3a; font-size: 0.8em; font-weight: 700; }
[data-theme="dark"] .jxz-inv em { background: #1f4a35; color: #9be4bd; }
.jxz-inv em.x, .jxz-pay em.x { background: var(--accent, #6c4ef5); color: #fff; }
.jxz-pay .c { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.jxz-pay em { background: var(--ml); color: var(--mt); }
.jxz-flow { display: flex; align-items: center; gap: 6px; }
.jxz-flow > i { flex: 1 1 14px; min-width: 10px; height: 3px; border-radius: 3px; background: var(--accent, #6c4ef5); opacity: 0.45; }
.jxz-flow .n { display: grid; justify-items: center; gap: 6px; padding: 18px 12px; border-radius: 16px; background: var(--mc); box-shadow: 0 10px 24px -14px rgba(19, 20, 48, 0.5); text-align: center; }
.jxz-flow .n small { color: var(--mm); font-size: 0.78em; }
.jxz-flow .n .jxs-av { width: 40px; height: 40px; font-size: 15px; }
.jxz-flow .n.ok { color: #1d6b3a; }
[data-theme="dark"] .jxz-flow .n.ok { color: #9be4bd; }
.jxz-flow .n .jx-ico, .jxz-flow .n svg { width: 40px; height: 40px; }
.jxz-chat { display: grid; gap: 14px; }
.jxz-chat p { max-width: 86%; padding: 14px 18px; border-radius: 18px; background: var(--mc); line-height: 1.45; box-shadow: 0 8px 20px -12px rgba(19, 20, 48, 0.4); }
.jxz-chat .me { justify-self: end; background: var(--accent, #6c4ef5); color: #fff; }
.jxz-chat em { display: table; margin-top: 10px; padding: 3px 12px; border-radius: 999px; background: var(--ml); color: var(--mm); font-size: 0.8em; font-weight: 600; }
.jxz-db { display: grid; justify-items: center; gap: 22px; }
.jxz-db .ic { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 28px; background: var(--mc); color: var(--accent, #6c4ef5); box-shadow: 0 14px 30px -14px rgba(19, 20, 48, 0.45); }
.jxz-db .ic .jx-ico, .jxz-db .ic svg { width: 48px; height: 48px; }
.jxz-db div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.jxz-db em { padding: 9px 18px; border-radius: 999px; background: var(--mc); font-weight: 600; box-shadow: 0 2px 6px rgba(19, 20, 48, 0.1); }
@media (max-width: 900px) {
	.jxz-slide { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 14px; }
	.jxz-vis { min-height: 300px; font-size: 15px; }
	.jxz-txt { padding: 4px 8px 10px; }
	.jxz-prev { left: -8px; }
	.jxz-next { right: -8px; }
}
@media (max-width: 640px) {
	.jxz-tabs { display: none; }
	.jxz-dots { display: flex; }
	.jxz-arrow { display: none; }
	.jxz-slide { border-radius: 22px; }
	.jxz-vis { min-height: 270px; padding: 16px; font-size: 14px; }
	.jxz-board { gap: 8px; }
	.jxz-board > div { min-height: 200px; padding: 8px; }
	.jxz-flow { flex-direction: column; align-items: stretch; }
	.jxz-flow > i { flex: none; width: 3px; height: 14px; align-self: center; }
	.jxz-flow .n { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 12px; padding: 12px 14px; }
	.jxz-flow .n small { grid-column: 2; }
	.jxz-flow .n .jxs-av, .jxz-flow .n .jx-ico, .jxz-flow .n svg { grid-row: 1 / 3; width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .jxz-slide, .jxz-tabs button, .jxz-arrow { transition: none; } }
.jxz-board > div { min-height: 320px; }
.jxz-flow .n { padding: 28px 16px; font-size: 1.05em; }
.jxz-chat { gap: 18px; font-size: 1.08em; }
.jxz-db { gap: 28px; }
@media (max-width: 900px) { .jxz-board > div { min-height: 240px; } .jxz-flow .n { padding: 20px 12px; } }
@media (max-width: 640px) { .jxz-board > div { min-height: 190px; } .jxz-flow .n { padding: 12px 14px; font-size: 1em; } }

/* Review pass: autoplay controls, bigger text column, bullets and links, tighter band, phone layout. */
.j-sec.jx-simple { padding-block: clamp(48px, 6vw, 88px); }
.j-sec.jx-simple + * { padding-top: clamp(56px, 6vw, 96px); }
.jxz { width: min(1120px, 100%); }
.jxz-bar { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: clamp(16px, 2vw, 24px); }
.jxz-bar .jxz-tabs { margin-bottom: 0; }
.jxz-tabs button { position: relative; overflow: hidden; border-color: rgba(255, 255, 255, 0.4); }
.jxz-tabs button.is-on { border-color: #fff; }
.jxz-pause { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; transition: background 0.2s; }
.jxz-pause:hover { background: rgba(255, 255, 255, 0.16); }
.jxz-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jxz-pause__i { display: block; width: 10px; height: 12px; border-inline: 3px solid currentColor; box-sizing: border-box; }
.jxz-pause[aria-pressed="true"] .jxz-pause__i { width: 0; height: 0; border-inline: 0; border-block: 7px solid transparent; border-left: 11px solid currentColor; margin-left: 3px; }
.jxz-tabs button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: #6c4ef5; transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
.jxz.is-running .jxz-tabs button.is-on::after { opacity: 1; animation: jxz-line 6s linear forwards; }
.jxz.is-held .jxz-tabs button.is-on::after, .jxz:hover .jxz-tabs button.is-on::after, .jxz:focus-within .jxz-tabs button.is-on::after { animation-play-state: paused; }
@keyframes jxz-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.jxz-stage { padding-inline: 56px; }
.jxz-prev { left: 0; }
.jxz-next { right: 0; }
.jxz-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.jxz-n { display: none; }
.jxz-txt { padding-right: clamp(10px, 2vw, 28px); }
.jxz-txt p { font-size: clamp(17px, 1.4vw, 18px); line-height: 1.55; }
.jxz-pts { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.jxz-pts li { position: relative; padding-left: 28px; color: var(--ink, #131430); font-size: 16px; font-weight: 550; line-height: 1.4; }
.jxz-pts li::before { content: ""; position: absolute; left: 2px; top: 0.35em; width: 12px; height: 7px; border-left: 2.5px solid #6c4ef5; border-bottom: 2.5px solid #6c4ef5; transform: rotate(-45deg); }
.jxz-more { align-self: flex-start; margin-top: 22px; color: #5b3fe0; font-size: 16px; font-weight: 650; text-decoration: none; }
.jxz-more:hover, .jxz-more:focus-visible { text-decoration: underline; }
.jxz-flow { gap: 10px; }
.jxz-flow .n { padding: 36px 20px; font-size: 1.15em; }
.jxz-flow .n .jxs-av, .jxz-flow .n .jx-ico, .jxz-flow .n svg { width: 52px; height: 52px; }
.jxz-inv, .jxz-pay { width: min(100%, 480px); font-size: 1.05em; }
.jxz-dots button { width: 44px; height: 44px; }
.jxz-dots button::before { inset: 17px; }
.jxz-dots button.is-on::before { inset: 15px; }
@media (max-width: 900px) {
	.jxz-slide { grid-template-columns: minmax(0, 1fr); }
	.jxz-prev, .jxz-next { left: auto; right: auto; }
	.jxz-prev { left: 0; }
	.jxz-next { right: 0; }
}
@media (max-width: 640px) {
	.jxz-bar { display: none; }
	.jxz-stage { padding-inline: 0; }
	.jxz-n { display: block; margin: 0 0 8px; text-align: center; }
	.jxz-n::after { content: " \00B7  Swipe for more"; color: var(--muted, #5d5f72); font-weight: 600; letter-spacing: 0; }
	.jxz-slide { gap: 8px; padding: 12px; }
	.jxz-vis { height: 220px; min-height: 0; max-height: 220px; padding: 10px; align-items: start; }
	.jxz-vis > div { zoom: 0.72; }
	.jxz-txt { padding: 2px 4px 6px; }
	.jxz-txt h3 { margin-bottom: 8px; font-size: 22px; }
	.jxz-txt p { font-size: 16px; line-height: 1.45; }
	.jxz-pts, .jxz-more { display: none; }
	.jxz-dots { margin-top: 6px; }
	.jxz-foot { display: block; }
	.j-sec.jx-simple { padding-block: 40px; }
}
@media (prefers-reduced-motion: reduce) { .jxz-slide { transition: none; transform: none; } .jxz-pause { display: none; } .jxz-tabs button::after { animation: none !important; } }
.jxz-flow .n { flex: 1 1 0; min-width: 0; padding: 30px 8px; font-size: 1em; }
.jxz-flow .n .jxs-av, .jxz-flow .n .jx-ico, .jxz-flow .n svg { width: 44px; height: 44px; }
.jxz-flow > i { flex: 0 0 12px; min-width: 8px; }
@media (max-width: 640px) { .jxz-flow .n { flex: none; padding: 12px 14px; } .jxz-flow .n .jxs-av, .jxz-flow .n .jx-ico, .jxz-flow .n svg { width: 34px; height: 34px; } .jxz-flow > i { flex: none; } }

/* Homepage feature cards use the same width as every other section (no 1400px cap) */
.j-features .j-fcards { max-width: none; }

/* My work today: Late, Due today and On the agenda side by side on wide screens; the count sits on the right of each heading. */
.jx-work__cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:4px 24px; align-items:start; }
.jx-work__col{ min-width:0; }
.jx-work__h{ justify-content:space-between; }

/* Team tiles: the 5-tile rule outranked the smaller-screen rules */
@media (max-width: 1100px) { .j-tiles:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .j-tiles:has(> :nth-child(5)) { grid-template-columns: 1fr; } .j-tile { padding-bottom: 76px; } }

/* Phones: cards stack. Each card stays put while the next one slides over it. */
@media (max-width: 760px) {
	.j-hero, .j-hero__grid { overflow: clip; }
	.j-hero__grid > .jx-heroart { position: sticky; top: 88px; z-index: 0; }
	.j-hero__grid > .j-hero__card { position: relative; z-index: 1; box-shadow: 0 -18px 40px rgba(10, 10, 30, 0.35); }
	.j-tiles .j-tile { position: sticky; top: calc(88px + var(--stack, 0) * 14px); box-shadow: 0 -10px 30px rgba(20, 20, 50, 0.08); }
	.j-tiles .j-tile:nth-child(2) { --stack: 1; }
	.j-tiles .j-tile:nth-child(3) { --stack: 2; }
	.j-tiles .j-tile:nth-child(4) { --stack: 3; }
	.j-tiles .j-tile:nth-child(5) { --stack: 4; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
	.j-hero__grid > .jx-heroart, .j-tiles .j-tile { position: relative; top: auto; }
}

/* Phones: the board slide keeps its columns side by side (swipe), so the slider fits one screen */
@media (max-width: 760px) {
	.jxv-slider .jxv-kb { grid-template-columns: repeat(3, 78%) !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.jxv-slider .jxv-kb::-webkit-scrollbar { display: none; }
	.jxv-slider .jxv-kb > * { scroll-snap-align: start; }
	/* Invoice and AI slides: one pane at a time, full width; the slide glides to the result by itself. */
	.jxv-slider .jxs-cols { display: grid; grid-template-columns: 100% 100% !important; grid-template-rows: none !important; align-items: stretch; column-gap: 16px; overflow: hidden; }
	.jxv-slider .jxs-cols > .jxs-arrow { display: none; }
	.jxv-slider .jxs-cols > :not(.jxs-arrow) { transform: translateX(0); }
	.jxv-slide.is-on .jxs-cols > :not(.jxs-arrow) { animation: jxs-pan 0.6s cubic-bezier(.2, .7, .2, 1) 2.2s both; }
	.jxv-dots button:focus:not(:focus-visible), .jxv-dots button:focus-visible:active { outline: 0; }
}
@media (max-width: 760px) and (hover: none) { .jxv-dots button:focus-visible { outline: 0; } }
@keyframes jxs-pan { to { transform: translateX(calc(-100% - 16px)); } }
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
	.jxv-slide.is-on .jxs-cols > :not(.jxs-arrow) { animation: none; transform: translateX(calc(-100% - 16px)); }
}

/* Wordmark: the name fades from the text colour (dark on light, white on dark) to purple to light blue. */
.brand--word{ display:inline-flex; align-items:center; text-decoration:none; }
.brand .brand__word{ display:block; width:auto; height:1em; color:var(--ink,#131430); user-select:none; }
[data-theme="dark"] .brand .brand__word, .footer__brand .brand__word{ color:#fff; }
.site-header .brand .brand__word{ font-size:30px; }
.footer__brand .brand__word{ font-size:34px; }
@media (max-width:760px){ .site-header .brand .brand__word{ font-size:25px; } }

/* Header on scroll: solid, no see-through and no blur. */
.scrolled .site-header, [data-theme].scrolled .site-header{ -webkit-backdrop-filter:none; backdrop-filter:none; }
[data-theme="light"].scrolled .bar, [data-theme="light"] .site-header:has(.has-mega:hover, .has-mega.is-open) .bar{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
[data-theme="dark"].scrolled .bar, [data-theme="dark"] .site-header:has(.has-mega:hover, .has-mega.is-open) .bar{ background:#000; -webkit-backdrop-filter:none; backdrop-filter:none; }
.bar__inner{ opacity:1; -webkit-backdrop-filter:none; backdrop-filter:none; }