/**
 * J3 Leads — Real Estate.
 *
 * Self-contained: there is no base sheet underneath this one, so it carries
 * the layout as well as the palette. Everything is scoped under .j3-wrap so
 * it cannot leak into the rest of wp-admin.
 *
 * The gradient sits on the ground plane only. Panels stay near-flat on
 * purpose — a call sheet is read for hours and a gradient behind body text is
 * exhausting.
 */
.j3-wrap {
	--j3-ink: #0a0506;
	--j3-panel: #16090c;
	--j3-panel-2: #1f0d11;
	--j3-rule: #3a161d;
	--j3-bone: #fdf6f4;
	--j3-mute: #b08e91;
	--j3-dim: #7d5c60;

	/* One red, used at three depths. The bright end is reserved for actions
	   so it never competes with the score meter. */
	--j3-red: #e11d2e;
	--j3-red-deep: #8f0f1c;
	--j3-red-glow: rgba(225, 29, 46, .28);

	--j3-amber: var(--j3-red);
	--j3-accent-deep: var(--j3-red-deep);
	--j3-ring: var(--j3-red-glow);

	--j3-hot: #ff3b30;
	--j3-warm: #ff8a3d;
	--j3-cool: #9aa7b8;
	--j3-green: #34c98a;

	background:
		radial-gradient(120% 90% at 0% 0%, rgba(143, 15, 28, .55) 0%, rgba(10, 5, 6, 0) 58%),
		linear-gradient(160deg, #1a070a 0%, #0a0506 46%, #000 100%);
	color: var(--j3-bone);
}

.j3-wrap .j3-title {
	background: linear-gradient(92deg, #fdf6f4 0%, #f3b7ae 46%, var(--j3-red) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.j3-wrap .j3-panel {
	background: linear-gradient(180deg, var(--j3-panel-2) 0%, var(--j3-panel) 100%);
	border: 1px solid var(--j3-rule);
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 18px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.j3-wrap .j3-panel__title {
	font-family: "Sora", "Inter", sans-serif;
	font-size: 17px;
	font-weight: 650;
	margin: 0 0 14px;
	letter-spacing: -.01em;
}

.j3-wrap .j3-subhead {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--j3-red);
	margin: 22px 0 10px;
	padding-top: 14px;
	border-top: 1px solid var(--j3-rule);
}

/* Buttons ---------------------------------------------------------------- */

.j3-wrap .j3-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: 9px;
	border: 1px solid var(--j3-rule);
	background: var(--j3-panel-2);
	color: var(--j3-bone);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, transform .1s ease;
}

.j3-wrap .j3-btn:hover { border-color: var(--j3-red); transform: translateY(-1px); }

.j3-wrap .j3-btn--primary {
	background: linear-gradient(135deg, var(--j3-red) 0%, var(--j3-red-deep) 100%);
	border-color: transparent;
	box-shadow: 0 6px 18px var(--j3-red-glow);
}

.j3-wrap .j3-btn--ghost { background: transparent; color: var(--j3-mute); }

/* Tabs and filters ------------------------------------------------------- */

.j3-wrap .j3-tabs {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--j3-rule);
	margin: 18px 0;
}

.j3-wrap .j3-tab {
	padding: 10px 16px;
	color: var(--j3-mute);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.j3-wrap .j3-tab.is-active { color: var(--j3-bone); border-bottom-color: var(--j3-red); }

.j3-wrap .j3-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 16px;
}

.j3-wrap input[type="text"],
.j3-wrap input[type="search"],
.j3-wrap input[type="date"],
.j3-wrap input[type="number"],
.j3-wrap input[type="email"],
.j3-wrap input[type="file"],
.j3-wrap select,
.j3-wrap textarea {
	background: #0d0507;
	border: 1px solid var(--j3-rule);
	border-radius: 9px;
	color: var(--j3-bone);
	padding: 9px 11px;
	font-size: 13px;
	width: 100%;
	max-width: 100%;
}

.j3-wrap .j3-filters input,
.j3-wrap .j3-filters select { width: auto; min-width: 150px; }

.j3-wrap input:focus,
.j3-wrap select:focus,
.j3-wrap textarea:focus {
	outline: none;
	border-color: var(--j3-red);
	box-shadow: 0 0 0 3px var(--j3-red-glow);
}

.j3-wrap .j3-check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--j3-mute);
}

.j3-wrap .j3-check input { width: auto; }

.j3-wrap .j3-field { margin-bottom: 14px; }
.j3-wrap .j3-label { display: block; font-size: 12px; font-weight: 600; color: var(--j3-mute); margin-bottom: 6px; }
.j3-wrap .j3-help { font-size: 11px; color: var(--j3-dim); margin: 5px 0 0; }
.j3-wrap .j3-dim { color: var(--j3-dim); }

.j3-wrap .j3-grid { display: grid; gap: 0 14px; }
.j3-wrap .j3-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.j3-wrap .j3-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.j3-wrap .j3-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Call sheet ------------------------------------------------------------- */

.j3-wrap .j3-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.j3-wrap .j3-table th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--j3-dim);
	padding: 10px 12px;
	border-bottom: 1px solid var(--j3-rule);
}

.j3-wrap .j3-table td {
	padding: 11px 12px;
	border-bottom: 1px solid rgba(58, 22, 29, .55);
	vertical-align: middle;
}

.j3-wrap .j3-table tr:hover td { background: rgba(225, 29, 46, .06); }

/* A due row gets a red edge rather than a fill: the fill fights the score
   colour, which is the thing you are actually scanning for. */
.j3-wrap .j3-table tr.is-due td:first-child { box-shadow: inset 3px 0 0 var(--j3-red); }

.j3-wrap .j3-link { color: var(--j3-bone); text-decoration: none; font-weight: 600; }
.j3-wrap .j3-link:hover { color: var(--j3-red); }

.j3-wrap .j3-score {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	padding: 5px 8px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--j3-rule);
}

.j3-wrap .j3-score--hot { background: rgba(255, 59, 48, .18); border-color: var(--j3-hot); color: #ffb4ae; }
.j3-wrap .j3-score--warm { background: rgba(255, 138, 61, .15); border-color: var(--j3-warm); color: #ffcda6; }
.j3-wrap .j3-score--cool { background: rgba(154, 167, 184, .12); border-color: #5c6675; color: #cdd5df; }
.j3-wrap .j3-score--cold { color: var(--j3-dim); }

.j3-wrap .j3-chip {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--j3-rule);
	color: var(--j3-mute);
}

.j3-wrap .j3-chip--due { background: var(--j3-red-deep); color: #fff; border-color: transparent; margin-left: 7px; }
.j3-wrap .j3-chip--signal { background: rgba(225, 29, 46, .12); border-color: var(--j3-red-deep); color: #f6b8bd; margin: 0 5px 5px 0; }
.j3-wrap .j3-chip--block { color: var(--j3-dim); border-style: dashed; cursor: help; }

.j3-wrap .j3-dial {
	color: var(--j3-bone);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px dotted var(--j3-red);
}

.j3-wrap .j3-dial--big {
	display: block;
	font-size: 26px;
	font-family: "Sora", sans-serif;
	text-align: center;
	padding: 14px;
	margin-bottom: 14px;
	border: 1px solid var(--j3-red-deep);
	border-radius: 12px;
	background: rgba(225, 29, 46, .08);
}

/* Detail layout ---------------------------------------------------------- */

.j3-wrap .j3-detail {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.j3-wrap .j3-scoreline { display: flex; align-items: center; gap: 10px; color: var(--j3-mute); font-size: 12px; margin: 0 0 12px; }
.j3-wrap .j3-signals { margin: 0 0 16px; }
.j3-wrap .j3-actions { display: flex; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--j3-rule); }

/* Coach ------------------------------------------------------------------ */

.j3-wrap .j3-coach { border-color: var(--j3-red-deep); }

.j3-wrap .j3-coach__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--j3-red);
	margin: 16px 0 6px;
}

/* Spoken lines are set larger than body text on purpose — this is read off
   a screen while someone is talking to you. */
.j3-wrap .j3-quote {
	margin: 0;
	padding: 12px 14px;
	border-left: 3px solid var(--j3-red);
	background: rgba(0, 0, 0, .3);
	border-radius: 0 10px 10px 0;
	font-size: 15px;
	line-height: 1.55;
}

.j3-wrap .j3-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.j3-wrap .j3-list--warn { color: #ffcda6; }
.j3-wrap .j3-objection { font-style: italic; color: var(--j3-mute); margin: 0 0 10px; }

.j3-wrap .j3-raac { list-style: none; margin: 0; padding: 0; counter-reset: raac; }

.j3-wrap .j3-raac li {
	padding: 9px 0;
	border-bottom: 1px solid rgba(58, 22, 29, .55);
	font-size: 14px;
	line-height: 1.5;
}

.j3-wrap .j3-raac__step {
	display: inline-block;
	min-width: 68px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--j3-red);
	font-weight: 700;
}

.j3-wrap .j3-cadence {
	font-size: 12px;
	color: var(--j3-mute);
	font-style: italic;
	margin: 10px 0 0;
}

.j3-wrap .j3-objection-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--j3-rule); }
.j3-wrap .j3-objection-form button { margin-top: 10px; }
.j3-wrap .j3-raac-answer { margin-top: 14px; padding: 12px; border: 1px solid var(--j3-red-deep); border-radius: 10px; background: rgba(225, 29, 46, .06); }

/* Timeline, board, scripts ----------------------------------------------- */

.j3-wrap .j3-timeline { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.j3-wrap .j3-timeline li { padding: 9px 0; border-bottom: 1px solid rgba(58, 22, 29, .55); display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.j3-wrap .j3-timeline__when { color: var(--j3-dim); font-size: 11px; min-width: 88px; }

.j3-wrap .j3-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 14px; }
.j3-wrap .j3-column { min-width: 210px; flex: 0 0 210px; }

.j3-wrap .j3-column__head {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--j3-mute);
	margin: 0 0 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.j3-wrap .j3-count { color: var(--j3-red); font-weight: 700; }

.j3-wrap .j3-card {
	display: block;
	padding: 11px;
	margin-bottom: 8px;
	border-radius: 10px;
	border: 1px solid var(--j3-rule);
	background: var(--j3-panel);
	text-decoration: none;
	color: var(--j3-bone);
	font-size: 13px;
}

.j3-wrap .j3-card:hover { border-color: var(--j3-red); }
.j3-wrap .j3-card strong { display: block; margin: 6px 0 2px; }
.j3-wrap .j3-card .j3-dim { font-size: 11px; }

.j3-wrap .j3-script { border-bottom: 1px solid var(--j3-rule); padding: 12px 0; }
.j3-wrap .j3-script summary { cursor: pointer; font-size: 14px; display: flex; gap: 10px; align-items: center; }
.j3-wrap .j3-script textarea { margin: 12px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6; }

/* Notices ---------------------------------------------------------------- */

.j3-wrap .j3-notice { border-left: 3px solid var(--j3-green); }
.j3-wrap .j3-notice--warn { border-left-color: var(--j3-warm); }
.j3-wrap .j3-notice p { margin: 0; font-size: 13px; }
.j3-wrap .j3-empty { text-align: center; padding: 40px 20px; }
.j3-wrap .j3-empty h3 { margin: 0 0 8px; font-family: "Sora", sans-serif; }

/* Phone ------------------------------------------------------------------ */

@media (max-width: 960px) {
	.j3-wrap .j3-detail { grid-template-columns: minmax(0, 1fr); }

	/* The coach panel is the reason this screen exists on a phone, so it
	   goes above the record rather than below it. */
	.j3-wrap .j3-detail__side { order: -1; }

	.j3-wrap .j3-grid--2,
	.j3-wrap .j3-grid--3,
	.j3-wrap .j3-grid--4 { grid-template-columns: minmax(0, 1fr); }

	.j3-wrap .j3-callsheet th:nth-child(3),
	.j3-wrap .j3-callsheet td:nth-child(3),
	.j3-wrap .j3-callsheet th:nth-child(4),
	.j3-wrap .j3-callsheet td:nth-child(4) { display: none; }
}


/* Base layout the platform sheet used to provide ------------------------- */

.j3-wrap {
	margin: 0 0 0 -20px;
	padding: 24px 22px 60px;
	min-height: calc(100vh - 32px);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.j3-wrap * { box-sizing: border-box; }

.j3-wrap .j3-header { margin-bottom: 18px; }

.j3-wrap .j3-title {
	font-family: "Sora", "Inter", -apple-system, sans-serif;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 0;
	padding: 0;
}

.j3-wrap .j3-sub {
	color: var(--j3-mute);
	font-size: 13px;
	margin: 4px 0 0;
	max-width: 60ch;
}

.j3-wrap a { color: inherit; }
.j3-wrap h2, .j3-wrap h3, .j3-wrap h4 { color: var(--j3-bone); }
.j3-wrap p { color: var(--j3-bone); }
.j3-wrap .j3-panel > p:first-of-type { margin-top: 0; }

/* Front-end console ------------------------------------------------------ */

/*
 * The console runs inside whatever theme the site uses, so it takes over the
 * full width and paints its own background rather than trusting a theme
 * container to be dark. Scoped to .j3-console so a theme's own pages are
 * untouched.
 */
.j3-console {
	--j3-ink: #0a0506;
	margin: 0;
	padding: 0 0 60px;
	width: 100%;
	max-width: none;
	min-height: 100vh;
}

/*
 * Standalone: our template renders the document, so there is no theme markup
 * to fight and these rules only have to establish the ground plane.
 */
body.j3-console-standalone {
	background: #0a0506;
	margin: 0;
	padding: 0;
	color: #fdf6f4;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.j3-console-standalone * { box-sizing: border-box; }

body.j3-console-standalone img,
body.j3-console-standalone svg { max-width: 100%; height: auto; }

/*
 * Embedded: the console is inside a theme, so these rules do the minimum
 * needed to stop the theme's page furniture duplicating our own — the theme
 * has already printed a "Call Sheet" heading directly above ours.
 */
body.j3-console-page:not(.j3-console-standalone) .entry-title,
body.j3-console-page:not(.j3-console-standalone) .page-title,
body.j3-console-page:not(.j3-console-standalone) .wp-block-post-title { display: none; }

body.j3-console-page:not(.j3-console-standalone) .entry-content,
body.j3-console-page:not(.j3-console-standalone) .site-content,
body.j3-console-page:not(.j3-console-standalone) .content-area,
body.j3-console-page:not(.j3-console-standalone) main {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* The admin bar is kept — it is the way back to wp-admin — so the sticky
   console bar has to sit under it rather than behind it. */
body.j3-console-page.admin-bar .j3-console__bar { top: 32px; }

@media screen and (max-width: 782px) {
	body.j3-console-page.admin-bar .j3-console__bar { top: 46px; }
}

.j3-console__bar {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 14px 24px;
	background: linear-gradient(180deg, rgba(31, 13, 17, .96) 0%, rgba(10, 5, 6, .96) 100%);
	border-bottom: 1px solid var(--j3-rule);
	position: sticky;
	top: 0;
	z-index: 20;
	backdrop-filter: blur(8px);
}

.j3-console__brand {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	text-decoration: none;
	color: var(--j3-bone);
	font-family: "Sora", "Inter", sans-serif;
}

.j3-console__brand strong { font-size: 17px; letter-spacing: -.02em; }
.j3-console__brand span { font-size: 11px; color: var(--j3-mute); }

.j3-console__nav {
	display: flex;
	gap: 2px;
	flex-wrap: wrap;
	flex: 1 1 auto;
}

.j3-console__link {
	padding: 8px 13px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--j3-mute);
	text-decoration: none;
	white-space: nowrap;
}

.j3-console__link:hover { color: var(--j3-bone); background: rgba(255, 255, 255, .04); }

.j3-console__link.is-active {
	color: var(--j3-bone);
	background: linear-gradient(135deg, var(--j3-red) 0%, var(--j3-red-deep) 100%);
}

.j3-console__out { font-size: 12px; color: var(--j3-dim); text-decoration: none; }
.j3-console__out:hover { color: var(--j3-red); }

/* Everything below the bar gets the page gutter the admin wrap used to. */
.j3-console > *:not(.j3-console__bar) { margin-left: 24px; margin-right: 24px; }
.j3-console .j3-header { padding-top: 24px; }

.j3-console .j3-detail,
.j3-console .j3-board { max-width: 1500px; }

.j3-login { max-width: 420px; margin: 60px auto; }
.j3-login input[type="text"],
.j3-login input[type="password"] { width: 100%; }
.j3-login .login-submit input {
	background: linear-gradient(135deg, var(--j3-red) 0%, var(--j3-red-deep) 100%);
	border: 0;
	color: #fff;
	padding: 10px 18px;
	border-radius: 9px;
	font-weight: 600;
	cursor: pointer;
}
.j3-login label { display: block; font-size: 12px; color: var(--j3-mute); margin-bottom: 6px; }
.j3-login p { margin-bottom: 14px; }

@media (max-width: 782px) {
	.j3-console__bar { gap: 12px; padding: 12px 16px; }
	.j3-console__nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
	.j3-console > *:not(.j3-console__bar) { margin-left: 14px; margin-right: 14px; }
}

/* Farm map --------------------------------------------------------------- */

.j3-wrap .j3-map {
	height: 520px;
	border-radius: 12px;
	border: 1px solid var(--j3-rule);
	overflow: hidden;
	margin: 14px 0;
	background: #0d0507;
}

/* Leaflet ships a white chrome that looks broken on a dark ground. */
.j3-wrap .leaflet-control-zoom a,
.j3-wrap .leaflet-draw-toolbar a {
	background-color: #1f0d11;
	color: var(--j3-bone);
	border-color: var(--j3-rule);
}

.j3-wrap .leaflet-bar a:hover { background-color: var(--j3-red-deep); }
.j3-wrap .leaflet-control-attribution {
	background: rgba(10, 5, 6, .8);
	color: var(--j3-dim);
	font-size: 10px;
}
.j3-wrap .leaflet-control-attribution a { color: var(--j3-mute); }

/* Tiles are bright by nature; knocking them back keeps the drawn boundary
   and the markers as the thing your eye lands on. */
.j3-wrap .leaflet-tile-pane { filter: brightness(.72) saturate(.75) contrast(1.05); }

.j3-wrap .j3-farm__bar {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.j3-wrap .j3-farm__bar select { width: auto; min-width: 170px; }

.j3-wrap .j3-farm__status {
	font-size: 13px;
	color: var(--j3-mute);
	min-height: 20px;
	padding: 8px 0;
}

.j3-wrap .j3-farm__status.is-ok { color: #9fe3c2; }
.j3-wrap .j3-farm__status.is-warn { color: #ffcda6; }

/* Address search --------------------------------------------------------- */

.j3-wrap .j3-search { position: relative; max-width: 560px; }

.j3-wrap .j3-suggestions {
	position: absolute;
	z-index: 500;
	left: 0;
	right: 0;
	background: #16090c;
	border: 1px solid var(--j3-rule);
	border-radius: 0 0 10px 10px;
	border-top: 0;
	max-height: 280px;
	overflow-y: auto;
}

.j3-wrap .j3-suggestion {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(58, 22, 29, .55);
	color: var(--j3-bone);
	font-size: 13px;
	cursor: pointer;
}

.j3-wrap .j3-suggestion:hover { background: rgba(225, 29, 46, .12); }
.j3-wrap .j3-suggestion:last-child { border-bottom: 0; }

@media (max-width: 782px) {
	.j3-wrap .j3-map { height: 380px; }
	.j3-wrap .j3-farm__bar select,
	.j3-wrap .j3-farm__bar button { width: 100%; }
}

/* Radius control --------------------------------------------------------- */

.j3-wrap .j3-radius {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--j3-mute);
}

.j3-wrap .j3-radius .j3-label { margin: 0; }

.j3-wrap .j3-radius input[type="range"] {
	width: 150px;
	accent-color: var(--j3-red);
	padding: 0;
}

.j3-wrap .j3-radius output {
	font-variant-numeric: tabular-nums;
	color: var(--j3-bone);
	font-weight: 600;
	min-width: 34px;
	text-align: right;
}

.j3-wrap .leaflet-tooltip {
	background: #16090c;
	border: 1px solid var(--j3-rule);
	color: var(--j3-bone);
	font-size: 12px;
}

.j3-wrap .leaflet-tooltip::before { border-top-color: var(--j3-rule); }

.j3-wrap .j3-radius.is-off { opacity: .4; }
.j3-wrap #j3re-street { width: auto; min-width: 190px; }

/* Provider environment ---------------------------------------------------- */

.j3-wrap .j3-env {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 9px 14px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

/* Sandbox is deliberately quiet and production deliberately loud — the
   whole job of this strip is to be impossible to miss when it is live. */
.j3-wrap .j3-env--sandbox {
	background: rgba(154, 167, 184, .1);
	border: 1px solid #5c6675;
	color: #cdd5df;
}

.j3-wrap .j3-env--production {
	background: linear-gradient(135deg, var(--j3-red) 0%, var(--j3-red-deep) 100%);
	border: 1px solid var(--j3-red);
	color: #fff;
	box-shadow: 0 6px 20px var(--j3-red-glow);
}

.j3-wrap .j3-env__credits {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	text-transform: none;
}

.j3-wrap .j3-tracerfy .j3-env { margin-bottom: 14px; }

/* Traced people ----------------------------------------------------------- */

.j3-wrap .j3-person {
	padding: 12px 0;
	border-bottom: 1px solid rgba(58, 22, 29, .55);
}

.j3-wrap .j3-person:last-of-type { border-bottom: 0; }

.j3-wrap .j3-person__name {
	margin: 0 0 6px;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.j3-wrap .j3-phone {
	padding: 5px 0;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

/* A blocked number is shown, never hidden — you paid for it and it tells you
   the trace worked. It just is not a link. */
.j3-wrap .j3-phone__blocked {
	font-variant-numeric: tabular-nums;
	color: var(--j3-dim);
	text-decoration: line-through;
}

.j3-wrap .j3-diag {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	color: var(--j3-dim);
	margin-top: 4px;
}

/* Provider blocks in settings -------------------------------------------- */

.j3-wrap .j3-provider {
	padding: 0 0 6px;
	opacity: .55;
	transition: opacity .15s ease;
}

/* The unselected providers stay visible — their keys are still saved and
   switching back should not feel like re-setup — but they recede. */
.j3-wrap .j3-provider.is-active { opacity: 1; }
.j3-wrap .j3-provider.is-active .j3-subhead { color: var(--j3-red); }

/* Lead Builder ------------------------------------------------------------ */

.j3-wrap .j3-filters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 0 14px;
}

.j3-wrap .j3-preview {
	margin-top: 14px;
	padding: 14px;
	border: 1px solid var(--j3-red-deep);
	border-radius: 10px;
	background: rgba(225, 29, 46, .06);
}

.j3-wrap .j3-preview p { margin: 0 0 6px; font-size: 13px; }
.j3-wrap .j3-preview p:last-child { margin-bottom: 0; }

.j3-wrap .j3-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* Batch bar --------------------------------------------------------------- */

.j3-wrap .j3-batchbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 12px;
	margin-bottom: 12px;
	border: 1px solid var(--j3-rule);
	border-radius: 10px;
	background: rgba(255, 255, 255, .02);
	font-size: 13px;
}

.j3-wrap .j3-batchbar__count {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--j3-red);
	min-width: 18px;
	text-align: right;
}

.j3-wrap .j3-batchbar select { width: auto; min-width: 240px; }
.j3-wrap .j3-batchbar .j3-farm__status { padding: 0; flex: 1 1 100%; }

/* Paging ------------------------------------------------------------------ */

.j3-wrap .j3-pager {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	padding: 14px 0 4px;
	font-size: 13px;
}

.j3-wrap .j3-pager .j3-dim { margin-right: auto; }

.j3-wrap .j3-pager__link {
	padding: 6px 11px;
	border-radius: 8px;
	border: 1px solid var(--j3-rule);
	color: var(--j3-mute);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.j3-wrap .j3-pager__link:hover { color: var(--j3-bone); border-color: var(--j3-red); }
.j3-wrap .j3-pager__link.is-current { background: var(--j3-red-deep); color: #fff; border-color: transparent; }
.j3-wrap .j3-pager__link.is-off { opacity: .3; }

/* Destructive actions are red-bordered rather than red-filled: the filled
   red is the primary action, and delete should never look like the thing to
   press by default. */
.j3-wrap .j3-btn--danger {
	border-color: var(--j3-red);
	color: #ffb4ae;
	background: transparent;
}

.j3-wrap .j3-btn--danger:hover { background: rgba(225, 29, 46, .14); }

/* With the toolbar hidden the sticky console bar sits at the very top; the
   admin-bar offsets only apply when WordPress actually printed one. */
body.j3-console-standalone:not(.admin-bar) .j3-console__bar { top: 0; }

/* WordPress reserves 32px for a toolbar it may not have rendered. */
body.j3-console-standalone:not(.admin-bar) { margin-top: 0 !important; }
body.j3-console-standalone:not(.admin-bar) html { margin-top: 0 !important; }

/* Dial mode --------------------------------------------------------------- */

.j3-wrap .j3-dialer { max-width: 640px; margin: 0 auto; }

.j3-wrap .j3-dialer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 0 12px;
}

.j3-wrap .j3-dialer__progress {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--j3-mute);
	font-variant-numeric: tabular-nums;
}

.j3-wrap .j3-dialer__who { display: flex; gap: 12px; align-items: flex-start; }
.j3-wrap .j3-dialer__name { margin: 0; font-size: 22px; line-height: 1.2; }
.j3-wrap .j3-dialer__who p { margin: 4px 0 0; font-size: 13px; }

/*
 * The call button is the largest target on the screen on purpose: it is
 * pressed with a thumb, often in a truck, and every other control on this
 * page can afford to be missed once. This one cannot.
 */
.j3-wrap .j3-dialer__call {
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 18px 16px;
	margin: 16px 0;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--j3-red) 0%, var(--j3-red-deep) 100%);
	box-shadow: 0 10px 30px var(--j3-red-glow);
	color: #fff;
}

.j3-wrap .j3-dialer__calllabel {
	display: block;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .85;
}

.j3-wrap .j3-dialer__number {
	display: block;
	font-family: "Sora", sans-serif;
	font-size: 30px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin-top: 2px;
}

.j3-wrap .j3-dialer__call:active { transform: scale(.985); }

/* Outcomes stay hidden until the call is placed — offering "how did it go"
   before you have called is clutter, and worse, invites logging a call that
   never happened. */
.j3-wrap .j3-dialer__outcomes { display: none; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--j3-rule); }
.j3-wrap .j3-dialer__outcomes.is-open { display: block; }

.j3-wrap .j3-dialer__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}

.j3-wrap .j3-outcome {
	justify-content: center;
	padding: 14px 10px;
	font-size: 14px;
}

.j3-wrap .j3-outcome--spoke,
.j3-wrap .j3-outcome--appointment {
	border-color: var(--j3-green);
	color: #9fe3c2;
}

.j3-wrap .j3-outcome--do_not_call { border-color: var(--j3-red); color: #ffb4ae; }

.j3-wrap .j3-dialer__outcomes select,
.j3-wrap .j3-dialer__outcomes textarea { margin-bottom: 10px; }

.j3-wrap .j3-btn--dial {
	background: linear-gradient(135deg, var(--j3-green) 0%, #1f8f63 100%);
	border-color: transparent;
	color: #04150e;
	font-weight: 700;
}

@media (max-width: 480px) {
	.j3-wrap .j3-dialer__number { font-size: 26px; }
	.j3-wrap .j3-dialer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
 * Public screens — sales and sign-in.
 *
 * These are the only pages a stranger sees, so they carry more of the
 * gradient than the console does. The console earns its flatness by being
 * read for hours; a sales page is read once.
 * ================================================================== */

.j3-public-standalone,
.j3-console-standalone {
	margin: 0;
	padding: 0;
}

/* ---- Sign in ---- */

.j3-wrap.j3-auth {
	display: grid;
	place-items: center;
	/* Enough height to sit optically centred without claiming the viewport. */
	min-height: min(680px, 88vh);
	padding: 48px 24px;
}

.j3-wrap .j3-auth__card {
	width: 100%;
	max-width: 380px;
	background: linear-gradient(180deg, var(--j3-panel-2) 0%, var(--j3-panel) 100%);
	border: 1px solid var(--j3-rule);
	border-radius: 16px;
	padding: 32px 28px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.j3-auth__brand {
	text-align: center;
	margin-bottom: 26px;
}

.j3-auth__brand strong {
	display: block;
	font-family: "Sora", "Inter", sans-serif;
	font-size: 28px;
	letter-spacing: -.02em;
}

.j3-auth__brand span {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--j3-mute);
}

.j3-field {
	display: block;
	margin-bottom: 16px;
}

.j3-field span {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--j3-mute);
}

.j3-field input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 16px; /* 16px or iOS zooms the page on focus. */
	color: var(--j3-bone);
	background: rgba(0, 0, 0, .35);
	border: 1px solid var(--j3-rule);
	border-radius: 10px;
}

.j3-field input:focus-visible,
.j3-wrap .j3-btn:focus-visible,
.j3-auth__foot a:focus-visible {
	outline: 2px solid var(--j3-red);
	outline-offset: 2px;
}

.j3-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 13px;
	color: var(--j3-mute);
}

.j3-btn--wide {
	display: block;
	width: 100%;
	text-align: center;
	padding: 13px 18px;
	font-size: 15px;
	box-sizing: border-box;
}

.j3-auth__error {
	margin: 0 0 18px;
	padding: 11px 14px;
	font-size: 13px;
	color: #ffd7d9;
	background: rgba(225, 29, 46, .14);
	border: 1px solid var(--j3-red-deep);
	border-radius: 10px;
}

.j3-auth__foot {
	margin: 16px 0 0;
	text-align: center;
	font-size: 13px;
}

.j3-auth__foot a {
	color: var(--j3-mute);
}

.j3-auth__foot a:hover {
	color: var(--j3-bone);
}

/* ---- Credits screen ---- */

.j3-credits__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.j3-credits__big {
	font-family: "Sora", "Inter", sans-serif;
	font-size: 42px;
	letter-spacing: -.02em;
}

.j3-credits__of {
	margin-left: 8px;
	font-size: 14px;
	color: var(--j3-mute);
}

.j3-meter {
	height: 8px;
	margin: 16px 0 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .4);
	overflow: hidden;
}

.j3-meter span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--j3-red-deep) 0%, var(--j3-red) 100%);
}

.j3-credits__reset {
	margin: 0 0 22px;
	font-size: 12px;
}

.j3-credits__buys {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.j3-credits__buys li {
	padding: 14px 16px;
	font-size: 13px;
	color: var(--j3-mute);
	background: rgba(0, 0, 0, .28);
	border: 1px solid var(--j3-rule);
	border-radius: 10px;
}

.j3-credits__buys strong {
	display: block;
	font-family: "Sora", "Inter", sans-serif;
	font-size: 22px;
	color: var(--j3-bone);
}

.j3-credits__log td {
	padding: 9px 0;
	font-size: 13px;
	border-bottom: 1px solid rgba(58, 22, 29, .5);
}

.j3-credits__log td:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.j3-neg { color: var(--j3-mute); }
.j3-pos { color: var(--j3-green); }

@media (prefers-reduced-motion: reduce) {
	.j3-wrap * {
		animation: none !important;
		transition: none !important;
	}
}

@media (max-width: 640px) {
}

.j3-credits__topup {
	margin: 0 0 22px;
}

.j3-credits__topup .j3-btn {
	display: inline-block;
}

/* =====================================================================
 * Theme firewall.
 *
 * Dequeuing the theme handles most of it, but not all: a page builder, a
 * must-use plugin, or Customizer CSS that survives the strip can still set
 * `body { font-family }` or `h2 { color }` and have it inherit straight into
 * our screens.
 *
 * Every selector below is wrapped in :where(), which contributes ZERO
 * specificity. That means these rules beat a bare `h2 { … }` from anywhere
 * (because .j3-wrap qualifies them) while losing to every real rule in this
 * file — so the reset can sit at the end of the stylesheet without stomping
 * on the 900 lines above it, and no ordering discipline is needed when
 * adding more later.
 * ================================================================== */

.j3-wrap {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: left;
	box-sizing: border-box;
}

.j3-wrap :where(*, *::before, *::after) {
	box-sizing: border-box;
}

/* Typography and colour must not be inherited from anything outside. */
.j3-wrap :where(h1, h2, h3, h4, h5, h6, p, li, td, th, dt, dd, label, span, strong, em, small, figcaption) {
	font-family: inherit;
	color: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
}

/* Themes love margins on headings and paragraphs; our layouts set their own. */
.j3-wrap :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote) {
	margin: 0;
	padding: 0;
}

.j3-wrap :where(ul, ol) {
	list-style: none;
}

/* Content width caps from block themes turn a full-bleed console into a narrow
   column. Restricted to elements that are NOT ours: the original version had
   the same specificity as .j3-auth__card and sat later in the file, so it
   stripped the sign-in card's max-width, background and border and left the
   form running the full width of the viewport. */
.j3-wrap :where(div, section, article, header, footer, main, form, table):not([class*="j3-"]) {
	max-width: none;
	float: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.j3-wrap :where(a) {
	color: var(--j3-red);
	text-decoration: none;
	box-shadow: none;
}

.j3-wrap :where(a:hover) {
	text-decoration: underline;
}

/* Form controls inherit almost nothing by default, so they are the most
   common place a theme's own styling shows through. */
.j3-wrap :where(input, select, textarea, button) {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.j3-wrap :where(table) {
	border-collapse: collapse;
	width: 100%;
}

.j3-wrap :where(img, svg, video) {
	max-width: 100%;
	height: auto;
}

/* The standalone templates own the viewport; a theme's body padding or a
   sticky header offset would push our layout down the page. */
body.j3-console-standalone,
body.j3-public-standalone {
	margin: 0;
	padding: 0;
	background: #0a0506;
	min-height: 100vh;
}

body.j3-console-standalone :where(#wpadminbar),
body.j3-public-standalone :where(#wpadminbar) {
	display: none;
}

html:has(body.j3-console-standalone),
html:has(body.j3-public-standalone) {
	margin-top: 0 !important; /* wp-admin-bar adds this inline on the html element. */
}

/* ---- Admin billing bits ---- */

.j3-wrap .j3-input {
	padding: 9px 12px;
	font-size: 14px;
	color: var(--j3-bone);
	background: rgba(0, 0, 0, .35);
	border: 1px solid var(--j3-rule);
	border-radius: 9px;
}

.j3-wrap .j3-input--sm {
	width: 92px;
}

.j3-wrap .j3-label {
	display: block;
	margin: 18px 0 8px;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--j3-mute);
}

.j3-wrap .j3-radio {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	color: var(--j3-mute);
}

.j3-wrap .j3-note {
	padding: 14px 18px;
}

.j3-wrap .j3-note p {
	margin: 0;
	font-size: 14px;
}

.j3-wrap .j3-note--ok {
	border-left: 3px solid var(--j3-green);
}

.j3-wrap .j3-note--bad {
	border-left: 3px solid var(--j3-red);
}

/* =====================================================================
 * Sales page.
 *
 * One grid, one alignment. The previous version centred the hero, left-aligned
 * the feature cards, then centred again — which reads as three pages stapled
 * together rather than one document.
 *
 * The system here: a single 1180px container, a 12-column grid, and every
 * section opening with the same eyebrow + heading + lede block on the left
 * edge. Body copy is capped at ~62 characters because a 1180px-wide line of
 * 16px text is unreadable no matter how expensive the page looks.
 *
 * Restraint is the point. One accent (the red already in the palette), one
 * display face, generous vertical rhythm, and exactly one piece of ornament:
 * the call sheet in the hero.
 * ================================================================== */

.j3-sales {
	--pad: clamp(20px, 5vw, 56px);
	--gap: clamp(56px, 9vw, 128px);
	--measure: 62ch;

	padding: 0 0 var(--gap);
	font-feature-settings: "kern" 1, "liga" 1;
	text-align: left;
}

.j3-sales__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding-inline: var(--pad);
}

/* ---- Top bar ---- */

.j3-sales__top {
	position: sticky;
	top: 0;
	z-index: 20;
	backdrop-filter: blur(14px);
	background: rgba(10, 5, 6, .72);
	border-bottom: 1px solid rgba(58, 22, 29, .7);
}

.j3-sales__topinner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px var(--pad);
}

.j3-sales__mark {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: "Sora", "Inter", sans-serif;
	font-size: 18px;
	letter-spacing: -.01em;
	color: var(--j3-bone);
}

.j3-sales__mark span {
	font-family: "Inter", sans-serif;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--j3-dim);
}

.j3-sales__topnav {
	display: flex;
	align-items: center;
	gap: 22px;
	font-size: 14px;
}

.j3-sales__topnav a {
	color: var(--j3-mute);
}

.j3-sales__topnav a:hover {
	color: var(--j3-bone);
	text-decoration: none;
}

.j3-sales__topnav .j3-btn {
	padding: 9px 18px;
	font-size: 14px;
}

/* ---- Section rhythm ---- */

.j3-sales__section {
	padding-top: var(--gap);
}

.j3-sales__eyebrow {
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--j3-red);
}

.j3-sales__h2 {
	max-width: 18ch;
	margin: 0 0 18px;
	font-family: "Sora", "Inter", sans-serif;
	font-size: clamp(28px, 3.6vw, 40px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.025em;
	color: var(--j3-bone);
}

.j3-sales__lede {
	max-width: var(--measure);
	margin: 0;
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.65;
	color: var(--j3-mute);
}

/* ---- Hero ---- */

.j3-sales__hero {
	position: relative;
	padding: clamp(64px, 10vw, 120px) 0 0;
}

.j3-sales__herogrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(44px, 6vw, 72px);
	align-items: center;
}

@media (min-width: 900px) {
	.j3-sales__herogrid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}

.j3-sales__h1 {
	margin: 0 0 22px;
	font-family: "Sora", "Inter", sans-serif;
	font-size: clamp(38px, 5.4vw, 66px);
	font-weight: 600;
	line-height: 1.03;
	letter-spacing: -.035em;
}

.j3-sales__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin-top: 34px;
}

.j3-sales__actions .j3-btn {
	padding: 14px 26px;
	font-size: 15px;
}

.j3-sales__aside {
	font-size: 13px;
	color: var(--j3-dim);
}

/* ---- The one piece of ornament: a call sheet ---- */

.j3-sales__sheet {
	background: linear-gradient(180deg, var(--j3-panel-2) 0%, var(--j3-panel) 100%);
	border: 1px solid var(--j3-rule);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
}

.j3-sales__sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 20px;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--j3-dim);
	border-bottom: 1px solid var(--j3-rule);
}

.j3-sales__row {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	align-items: center;
	gap: 4px 16px;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(58, 22, 29, .55);
}

.j3-sales__row:last-child {
	border-bottom: 0;
}

.j3-sales__score {
	position: relative;
	display: grid;
	place-items: center;
	grid-row: span 2;
	height: 46px;
	font-family: "Sora", "Inter", sans-serif;
	font-size: 15px;
	color: var(--j3-bone);
	background: rgba(0, 0, 0, .45);
	border-radius: 9px;
	overflow: hidden;
	isolation: isolate;
}

.j3-sales__score::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: auto 0 0 0;
	height: var(--s);
	background: linear-gradient(180deg, var(--j3-red) 0%, var(--j3-red-deep) 100%);
	opacity: .5;
}

.j3-sales__type {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--j3-red);
}

.j3-sales__why {
	font-size: 14px;
	line-height: 1.45;
	color: var(--j3-mute);
}

/* ---- Steps ---- */

.j3-sales__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2px;
	margin-top: 52px;
	background: var(--j3-rule);
	border: 1px solid var(--j3-rule);
	border-radius: 14px;
	overflow: hidden;
}

/* Hairline dividers via grid gap over a rule-coloured backdrop — cheaper
   than per-cell borders that double up at the seams. */
.j3-sales__step {
	padding: 30px 26px;
	background: var(--j3-ink);
}

.j3-sales__num {
	display: block;
	margin-bottom: 16px;
	font-family: "Sora", "Inter", sans-serif;
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--j3-red);
}

.j3-sales__step h3 {
	margin: 0 0 10px;
	font-family: "Sora", "Inter", sans-serif;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--j3-bone);
}

.j3-sales__step p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--j3-mute);
}

/* ---- Features ---- */

.j3-sales__featgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: clamp(28px, 3.5vw, 48px);
	margin-top: 56px;
}

.j3-sales__featgroup h3 {
	margin: 0 0 20px;
	padding-bottom: 14px;
	font-family: "Sora", "Inter", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--j3-bone);
	border-bottom: 1px solid var(--j3-rule);
}

.j3-sales__featgroup li {
	position: relative;
	margin-bottom: 13px;
	padding-left: 22px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--j3-mute);
}

.j3-sales__featgroup li:last-child {
	margin-bottom: 0;
}

/* A rule, not a tick. These are capabilities, not a comparison chart. */
.j3-sales__featgroup li::before {
	content: "";
	position: absolute;
	top: .68em;
	left: 0;
	width: 11px;
	height: 1px;
	background: var(--j3-red);
	opacity: .8;
}

/* ---- Pricing / call ---- */

.j3-sales__quote {
	margin-top: 56px;
	padding: clamp(36px, 5vw, 60px);
	background:
		radial-gradient(90% 140% at 100% 0%, rgba(143, 15, 28, .34) 0%, rgba(10, 5, 6, 0) 62%),
		linear-gradient(180deg, var(--j3-panel-2) 0%, var(--j3-panel) 100%);
	border: 1px solid var(--j3-rule);
	border-radius: 18px;
}

.j3-sales__quote .j3-sales__lede {
	margin-bottom: 32px;
}

.j3-sales__fineprint {
	max-width: var(--measure);
	margin: 34px 0 0;
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--j3-dim);
}

/* ---- Foot ---- */

.j3-sales__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: var(--gap);
	padding-top: 30px;
	font-size: 13px;
	color: var(--j3-dim);
	border-top: 1px solid var(--j3-rule);
}

.j3-sales__foot a {
	color: var(--j3-mute);
}

@media (max-width: 560px) {
	.j3-sales__topnav {
		gap: 14px;
	}

	.j3-sales__topnav .j3-sales__toplink {
		display: none;
	}

	.j3-sales__actions .j3-btn {
		width: 100%;
		text-align: center;
	}
}

/* Left-aligned, matching every other block on the page. text-wrap: pretty
   still applies, which only prevents a single-word last line. */
.j3-sales__lede--center {
	text-align: left;
	text-wrap: pretty;
}

.j3-sales__quote .j3-sales__fineprint {
	text-align: left;
	text-wrap: pretty;
}

/* Export controls -------------------------------------------------------- */

.j3-wrap .j3-filters__export {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	margin-left: auto;
}

.j3-wrap .j3-export__all {
	font-size: 12px;
	color: var(--j3-dim);
	border-bottom: 1px dotted var(--j3-rule);
}

.j3-wrap .j3-export__all:hover {
	color: var(--j3-mute);
	text-decoration: none;
}

.j3-wrap .j3-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.j3-wrap .j3-panel__head .j3-panel__title {
	margin-bottom: 0;
}

/* Contact page ----------------------------------------------------------- */

.j3-contact__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	max-width: 640px;
	margin: 36px 0 0;
}

.j3-contact__card {
	display: block;
	padding: 26px 24px;
	background: linear-gradient(180deg, var(--j3-panel-2) 0%, var(--j3-panel) 100%);
	border: 1px solid var(--j3-rule);
	border-radius: 14px;
	transition: border-color .18s ease, transform .18s ease;
}

.j3-contact__card:hover {
	border-color: var(--j3-red-deep);
	text-decoration: none;
	transform: translateY(-2px);
}

.j3-contact__label {
	display: block;
	margin-bottom: 10px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--j3-red);
}

.j3-contact__value {
	display: block;
	font-family: "Sora", "Inter", sans-serif;
	font-size: clamp(18px, 2.2vw, 23px);
	letter-spacing: -.01em;
	color: var(--j3-bone);
	overflow-wrap: anywhere;
}

.j3-contact__note {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--j3-dim);
}

.j3-contact__who {
	margin: 30px 0 0;
	font-size: 14px;
	color: var(--j3-mute);
}

.j3-contact .j3-sales__foot {
	justify-content: flex-start;
	gap: 28px;
}

/* A link cannot be disabled, so it is dimmed and made inert instead. */
.j3-wrap .j3-btn.is-disabled {
	opacity: .45;
	pointer-events: none;
}

.j3-wrap .j3-btn.is-copy {
	background: transparent;
	border-color: var(--j3-rule);
	color: var(--j3-mute);
	box-shadow: none;
}

/* Diagnostics. Deliberately plain and monospaced: this is meant to be
   screenshotted and read, not admired. */
.j3-wrap .j3-report {
	margin: 18px 0 0;
	padding: 16px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	line-height: 1.55;
	color: var(--j3-mute);
	white-space: pre-wrap;
	word-break: break-word;
	background: rgba(0, 0, 0, .45);
	border: 1px solid var(--j3-rule);
	border-radius: 10px;
}

.j3-contact__warn {
	margin: 24px 0 0;
	padding: 12px 16px;
	max-width: 640px;
	font-size: 13px;
	color: var(--j3-mute);
	background: rgba(225, 29, 46, .1);
	border: 1px solid var(--j3-red-deep);
	border-radius: 10px;
}