/*
 * JobGetr Platform - proprietary module styles.
 *
 * Scope: only the JobGetr data modules and the employer console. Newspaper
 * supplies the page composition, rows, columns, section headings, article
 * cards, video, typography, spacing, and responsive behaviour, so nothing here
 * re-implements layout primitives the theme already provides.
 *
 * Tokens come from the child theme (--jg-*); each rule carries a fallback so a
 * module still renders if used outside it.
 */

/* ============================================================ shared basics */
.jg-ticker,
.jg-markets,
.jg-mcard,
.jg-hrail,
.jg-dash,
.jg-ranked,
.jg-metrohead,
.jg-term,
.jg-prem,
.jg-prm,
.jg-picks,
.jg-employer,
.jg-data,
.jg-route,
.jg-tv,
.jg-watchlist,
.jg-navigator,
.jg-metro,
.jg-jobs {
	--jg-ink: var(--jg-navy, #131f49);
	--jg-ink-soft: var(--jg-gray, #717176);
	--jg-line: var(--jg-border, #e4e8ef);
	--jg-brand: var(--jg-accent, #ff6a13);
	--jg-up: var(--jg-positive, #12864f);
	--jg-down: var(--jg-negative, #d92d20);
	--jg-mono: var(--jg-font-mono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Consolas, monospace);

	box-sizing: border-box;
}

.jg-ticker *,
.jg-markets *,
.jg-mcard *,
.jg-dash *,
.jg-ranked *,
.jg-metrohead *,
.jg-term *,
.jg-prem *,
.jg-prm *,
.jg-picks *,
.jg-employer *,
.jg-data *,
.jg-route *,
.jg-tv *,
.jg-watchlist *,
.jg-navigator *,
.jg-metro *,
.jg-jobs * {
	box-sizing: border-box;
}

.jg-note {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.6;
	color: var(--jg-ink-soft);
}

.jg-data__caption {
	margin: -6px 0 10px;
	font-size: 11px;
	color: var(--jg-ink-soft);
}

/* ======================================================== navy band scope */
/* The above-the-fold rows sit on the navy interface. Modules inside them
   re-map their ink tokens instead of carrying a second set of rules. */
.jobgetr-row--ticker .jg-ticker,
.jobgetr-row--lead .jg-tv,
.jobgetr-row--lead .jg-watchlist,
.jobgetr-row--markets .jg-mcard,
.jobgetr-row--intro .jg-hrail,
.jobgetr-row--dashboard-head .jg-dash,
.jobgetr-row--dashboard .jg-dash,
.jobgetr-row--dashboard .jg-chart__aside,
.jobgetr-row--atlanta .jg-ranked,
.jobgetr-row--atlanta .jg-tv,
.jobgetr-row--atlanta .jg-atlbrief,
.jobgetr-row--atlanta .jg-metrohead,
.jobgetr-row--atlanta .jg-prem,
.jobgetr-row--atlanta .jg-mcard,
.jobgetr-row--atlanta .jg-prm,
.jobgetr-row--premium .jg-prem,
.jobgetr-row--premium-head .jg-prm,
.jobgetr-row--premium .jg-prm,
.jobgetr-row--premium-foot .jg-prm,
.jobgetr-row--premium-hero .jg-prm {
	--jg-ink: #ffffff;
	--jg-ink-soft: rgba(255, 255, 255, 0.64);
	/* UAT Phase 08E.1: 0.52 (was 0.42) - small text at least 5.3:1 on the
	   navy surfaces (#0a1830, #142138). */
	--jg-ink-faint: rgba(255, 255, 255, 0.52);
	--jg-line: rgba(255, 255, 255, 0.12);
	--jg-up: var(--jg-positive-dark, #34c98a);
	--jg-down: var(--jg-negative-dark, #f0645c);
}

/* ==================================================================== ticker */
.jg-ticker {
	width: 100%;
	background-color: transparent;
}

.jg-ticker__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 9px 0;
	min-height: 40px;
}

.jg-ticker__brand {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--jg-ink);
	white-space: nowrap;
	padding-right: 18px;
	border-right: 1px solid var(--jg-line);
}

.jg-ticker__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Fade both ends so the loop reads as continuous. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.jg-ticker__viewport::-webkit-scrollbar {
	display: none;
}

.jg-ticker__rail {
	display: flex;
	width: max-content;
}

.jg-ticker__track {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
	min-height: 22px;
	flex: 0 0 auto;
}

.jg-ticker__item {
	display: inline-flex;
	align-items: baseline;
	flex: 0 0 auto;
	font-size: 12px;
	padding: 0 22px;
	border-right: 1px solid var(--jg-line);
}

.jg-ticker__item:first-child {
	padding-left: 0;
}

.jg-ticker__item > a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.jg-ticker__item > a:hover .jg-ticker__name,
.jg-ticker__item > a:focus-visible .jg-ticker__name {
	color: var(--jg-ink);
}

.jg-ticker__geo {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-brand);
}

.jg-ticker__name {
	color: var(--jg-ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 10.5px;
	font-weight: 600;
}

.jg-ticker__value {
	font-family: var(--jg-mono);
	font-weight: 700;
	font-size: 12.5px;
	color: var(--jg-ink);
	font-variant-numeric: tabular-nums;
}

.jg-ticker .jg-change {
	font-size: 11px;
}

.jg-ticker__status {
	flex: 0 0 auto;
	font-size: 10.5px;
	color: var(--jg-ink-soft);
	white-space: nowrap;
	padding-left: 18px;
	border-left: 1px solid var(--jg-line);
	font-variant-numeric: tabular-nums;
}

/* Motion: only once the script has measured the track and cloned it. */
.jg-ticker.is-animated .jg-ticker__viewport {
	overflow-x: hidden;
}

.jg-ticker.is-animated .jg-ticker__rail {
	animation: jg-ticker-travel var(--jg-ticker-duration, 40s) linear infinite;
	will-change: transform;
}

.jg-ticker.is-animated .jg-ticker__track {
	padding-right: 22px;
}

/* UAT Phase 08E.3: keyboard focus holds the travel inside the strip
   itself, not on "Pause ticker" (a click on Resume must resume); hover
   holds it only where there is a hovering pointer (a tap on a phone leaves
   :hover stuck). */
.jg-ticker.is-animated .jg-ticker__viewport:focus-within .jg-ticker__rail {
	animation-play-state: paused;
}

@media (hover: hover) {
	.jg-ticker.is-animated:hover .jg-ticker__rail {
		animation-play-state: paused;
	}
}

@keyframes jg-ticker-travel {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jg-ticker.is-animated .jg-ticker__rail {
		animation: none;
	}

	.jg-ticker.is-animated .jg-ticker__viewport {
		overflow-x: auto;
	}
}

/* ========================================================== Markets cards */
.jobgetr-row--markets .wpb_wrapper > .jg-mcard {
	flex: 1 1 auto;
}

.jg-mcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	min-height: 200px;
	padding: 12px 12px 10px;
	border: 1px solid var(--jg-line);
	border-left: 3px solid rgba(255, 255, 255, 0.18);
	/* The same restrained corner the hero cards and the Premium pills
	   carry. Border and tint are both painted by this element, so the
	   radius reaches them without clipping anything: the sparkline sits
	   inside the padding and the card's stretched link is invisible, so
	   no overflow rule is needed and none is added - one would risk
	   cutting a focus ring at the edge. */
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.03);
	color: var(--jg-ink);
}

/* Card tint follows the metric's labor-economy reading, never the sign. */
.jg-mcard--favorable {
	border-left-color: var(--jg-up);
	background-color: rgba(18, 96, 62, 0.34);
}

.jg-mcard--unfavorable {
	border-left-color: var(--jg-down);
	background-color: rgba(128, 32, 36, 0.34);
}

.jg-mcard--neutral,
.jg-mcard--none {
	border-left-color: rgba(255, 255, 255, 0.28);
	background-color: rgba(255, 255, 255, 0.05);
}

.jg-mcard__name {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
	min-height: 28px;
}

.jg-mcard__name a {
	color: inherit;
	text-decoration: none;
}

.jg-mcard__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.jg-mcard:hover .jg-mcard__name a,
.jg-mcard:focus-within .jg-mcard__name a {
	color: var(--jg-ink);
}

.jg-mcard__figure {
	display: flex;
	align-items: baseline;
	gap: 5px;
	flex-wrap: wrap;
}

.jg-mcard__value {
	font-family: var(--jg-mono);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	color: var(--jg-ink);
	font-variant-numeric: tabular-nums;
}

.jg-mcard__unit {
	font-size: 10px;
	color: var(--jg-ink-soft);
}

.jg-mcard__change {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 12px;
}

.jg-mcard__cmp {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--jg-ink-faint, var(--jg-ink-soft));
}

.jg-mcard__spark {
	margin-top: auto;
	line-height: 0;
}

.jg-spark {
	display: block;
	width: 100%;
	height: 40px;
	overflow: visible;
}

.jg-spark__line {
	stroke: rgba(255, 255, 255, 0.78);
	vector-effect: non-scaling-stroke;
}

.jg-spark__dot {
	fill: var(--jg-brand);
}

.jg-mcard--favorable .jg-spark__line {
	stroke: var(--jg-up);
}

.jg-mcard--unfavorable .jg-spark__line {
	stroke: var(--jg-down);
}

.jg-mcard__meta {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 10px;
	color: var(--jg-ink-faint, var(--jg-ink-soft));
	white-space: nowrap;
}

.jg-mcard__meta > span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.jg-mcard__note {
	margin: 0;
	font-size: 11px;
	color: var(--jg-ink-soft);
}

/* ======================================================= Job Economy Dashboard */
.jg-dash {
	height: 100%;
	color: var(--jg-ink);
}

.jg-dash__head {
	margin-bottom: 12px;
}

.jg-dash__title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--jg-ink);
}

.jg-dash__lede {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--jg-ink-soft);
}

/* UAT Phase 08C: the unemployment chart's Pause motion / Resume motion
   control sits at the right of its title row; the lede keeps the full
   width beneath. A plain text button in the module's soft ink. */
.jg-dash--chart .jg-dash__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: 12px;
}

.jg-dash--chart .jg-dash__head > :not(.jg-dash__title):not(.jg-motion-toggle) {
	grid-column: 1 / -1;
}

.jg-motion-toggle {
	margin: 0;
	padding: 2px 0;
	border: 0;
	border-radius: 2px;
	background: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--jg-ink-soft);
	cursor: pointer;
}

.jg-motion-toggle:hover {
	background: transparent;
	color: var(--jg-ink);
	text-decoration: underline;
}

.jg-motion-toggle:focus-visible {
	outline: 2px solid var(--jg-accent, #ff6a13);
	outline-offset: 2px;
	color: var(--jg-ink);
}

/* Nothing moves under reduced motion, so there is nothing to pause. */
@media (prefers-reduced-motion: reduce) {
	.jg-motion-toggle {
		display: none;
	}
}

.jg-dash__lede code {
	font-family: var(--jg-mono);
	font-size: 11px;
	color: var(--jg-ink-soft);
	background: transparent;
	padding: 0;
}

.jg-dash .jg-source {
	margin: 10px 0 0;
	font-size: 11px;
	color: var(--jg-ink-faint, var(--jg-ink-soft));
}

.jg-dash .jg-source a {
	color: var(--jg-ink-soft);
}

.jg-dash .jg-source a:hover,
.jg-dash .jg-source a:focus-visible {
	color: var(--jg-brand);
}

.jg-dash .jg-chart {
	margin: 0;
}

.jg-dash .jg-chart__mount {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.08);
}

/* Lightweight Charts lays its panes out in a <table>. Newspaper's global
   table rules (1px cell borders, 21px line height) were adding 3px to that
   table, pushing the time axis past the mount's clipped edge. The chart is
   sized from the mount by the library, so the cells must add nothing. */
.jg-chart__mount table,
.jg-chart__mount tr,
.jg-chart__mount td {
	margin: 0;
	padding: 0;
	border: 0;
	border-spacing: 0;
	line-height: 0;
	vertical-align: top;
	background: transparent;
}

/* ---- Job Economy Summary: an editorial paragraph beside the
   unemployment chart (UAT Phase 06), uncapped within its column and at
   its natural height, in the band's own light-on-navy type. */
.jg-dash--summary {
	height: auto;
	max-width: none;
	margin-top: 0;
}

.jg-dash__eyebrow {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-dash__summary {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

/* Market Highlights (UAT Phase 07A): short dated bullets under the summary,
   each ending in its source. */
.jg-dash__highlights {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.jg-dash .jg-dash__hl-list,
.jg-atlbrief .jg-dash__hl-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jg-dash .jg-dash__hl-list li,
.jg-atlbrief .jg-dash__hl-list li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 14px;
	font-size: 14px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.8);
	list-style: none;
}

.jg-dash .jg-dash__hl-list li:last-child,
.jg-atlbrief .jg-dash__hl-list li:last-child {
	margin-bottom: 0;
}

.jg-dash .jg-dash__hl-list li::before,
.jg-atlbrief .jg-dash__hl-list li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 6px;
	height: 6px;
	background-color: var(--jg-accent, #ff6a13);
}

.jg-dash__hl-src {
	font-size: 11px;
	white-space: nowrap;
	color: var(--jg-ink-soft);
}

/* Atlanta Market Pulse brief (UAT Phase 07B): the metro summary and its
   highlights under the section subtitle, at the subtitle's measure. */
.jg-atlbrief {
	max-width: 92ch;
	margin: 14px 0 0;
}

.jg-atlbrief__summary {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

.jg-atlbrief__highlights {
	margin-top: 14px;
}

/* UAT Phase 07C: in the Atlanta roles column the brief follows the subtitle
   and precedes the Pay pulse. */
.jobgetr-row--atlanta .jg-atlbrief {
	margin: 12px 0 16px;
}

/* Phones: one stack in reading order - narrative, tiles and drill-in,
   Atlanta Top Stories, then the Pay pulse and Industry pulse. The columns
   and their wrappers give way to the row (display: contents) so the
   modules can be ordered; each module keeps its own box. */
@media (max-width: 767px) {
	.jobgetr-row--atlanta.jobgetr-row--dashboard {
		display: flex;
		flex-direction: column;
	}

	.jobgetr-row--atlanta.jobgetr-row--dashboard > .vc_column,
	.jobgetr-row--atlanta.jobgetr-row--dashboard > .vc_column > .wpb_wrapper {
		display: contents;
	}

	/* The row's tagDiv background layer is absolutely positioned; the
	   columns used to lift their content above it, so each module now
	   does. */
	.jobgetr-row--atlanta.jobgetr-row--dashboard > .vc_column > .wpb_wrapper > * {
		position: relative;
		z-index: 1;
	}

	.jobgetr-row--atlanta .tdm_block_inline_text {
		order: 1;
	}

	.jobgetr-row--atlanta #jobgetr-atlanta-brief {
		order: 2;
	}

	.jobgetr-row--atlanta #jobgetr-atlanta-headline {
		order: 3;
	}

	.jobgetr-row--atlanta #jobgetr-atlanta-drill {
		order: 4;
		margin-bottom: 24px;
	}

	.jobgetr-row--atlanta #jobgetr-tv-atlanta {
		order: 5;
		margin-bottom: 24px;
	}

	.jobgetr-row--atlanta .jg-ranked[data-jg-set="occupations"] {
		order: 6;
		margin-bottom: 24px;
	}

	.jobgetr-row--atlanta .jg-ranked[data-jg-set="atlanta_sectors"] {
		order: 7;
	}
}

/* ---- Key Readings: one full-width strip above the summary and chart. */
.jobgetr-row--dashboard-kpis .jg-dash__title {
	margin-bottom: 10px;
}

.jobgetr-row--dashboard-kpis .jg-kpis {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	border-bottom: 1px solid var(--jg-line);
}

.jobgetr-row--dashboard-kpis .jg-kpi {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "label" "value" "change" "period";
	align-content: start;
	row-gap: 4px;
	padding: 12px 16px;
	border-bottom: 0;
	border-left: 1px solid var(--jg-line);
}

.jobgetr-row--dashboard-kpis .jg-kpi:first-child {
	padding-left: 0;
	border-left: 0;
}

.jobgetr-row--dashboard-kpis .jg-kpi__value,
.jobgetr-row--dashboard-kpis .jg-kpi__change {
	justify-self: start;
}

.jobgetr-row--dashboard-kpis .jg-kpi__value {
	font-size: 19px;
}

@media (max-width: 1018px) {
	.jobgetr-row--dashboard-kpis .jg-kpis {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.jobgetr-row--dashboard-kpis .jg-kpi:nth-child(n) {
		padding-left: 16px;
		border-left: 1px solid var(--jg-line);
	}

	.jobgetr-row--dashboard-kpis .jg-kpi:nth-child(3n + 1) {
		padding-left: 0;
		border-left: 0;
	}

	.jobgetr-row--dashboard-kpis .jg-kpi:nth-child(n + 4) {
		border-top: 1px solid var(--jg-line);
	}
}

@media (max-width: 767px) {
	.jobgetr-row--dashboard-kpis .jg-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jobgetr-row--dashboard-kpis .jg-kpi:nth-child(n) {
		padding: 10px 0 10px 12px;
		border-left: 1px solid var(--jg-line);
		border-top: 0;
	}

	.jobgetr-row--dashboard-kpis .jg-kpi:nth-child(2n + 1) {
		padding-left: 0;
		border-left: 0;
	}

	.jobgetr-row--dashboard-kpis .jg-kpi:nth-child(n + 3) {
		border-top: 1px solid var(--jg-line);
	}

	.jobgetr-row--dashboard-kpis .jg-kpi__value {
		font-size: 17px;
	}
}

/* ---- Unemployment chart header: legend above the plot, then one toolbar
   row - range controls left, the U.S. and Atlanta readings right. */
.jg-dash--chart .jg-dash__legend {
	margin-bottom: 12px;
}

.jg-dash__legend-desc {
	font-size: 11.5px;
	color: var(--jg-ink-soft);
}

.jg-chart__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	margin: 0 0 10px;
}

.jg-chart__toolbar .jg-chart__ranges {
	margin: 0;
}

.jg-chart__aside {
	margin-left: auto;
}

.jg-dash__readings {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jg-dash__reading {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas: "key figure" "when when";
	align-items: baseline;
	column-gap: 10px;
	row-gap: 1px;
	text-align: right;
	font-size: 12px;
	color: var(--jg-ink-soft);
}

.jg-dash__reading-key {
	grid-area: key;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.jg-dash__reading-figure {
	grid-area: figure;
	justify-self: end;
	white-space: nowrap;
}

.jg-dash__reading-when {
	grid-area: when;
	justify-self: end;
	white-space: nowrap;
}

.jg-dash__reading--metro .jg-dash__swatch {
	background: #7cc4ff;
}

.jg-chart__plot {
	position: relative;
}

/* Latest / Prior month for the headline readings: the control, then both
   readings, as one group on the right of the range controls. */
.jg-dash__headline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px 24px;
}

.jg-dash__headline .jg-chart__ranges {
	margin: 0;
}

.jg-dash__reading .jg-flip__face {
	white-space: nowrap;
}

@media (max-width: 767px) {
	.jg-dash__headline {
		justify-content: flex-start;
	}

	.jg-dash__headline .jg-dash__readings {
		flex-basis: 100%;
	}
}

/* Industry Employment Change: the period control above the bars. */
.jg-dash--industries .jg-period {
	margin: 0 0 8px;
}

@media (max-width: 767px) {
	.jg-chart__aside {
		flex-basis: 100%;
		margin-left: 0;
	}

	.jg-dash__readings {
		justify-content: space-between;
	}

	.jg-dash__reading {
		text-align: left;
	}

	.jg-dash__reading-figure,
	.jg-dash__reading-when {
		justify-self: start;
	}

	.jg-dash__reading-when {
		grid-column: 1 / -1;
	}
}

.jg-dash .jg-table--markets thead th {
	position: static;
	background: transparent;
	border-bottom: 1px solid var(--jg-line);
}

.jg-dash .jg-table--markets th,
.jg-dash .jg-table--markets td {
	border-left: 0;
	border-right: 0;
}

.jg-dash__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 22px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.jg-dash__legend-item {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	font-size: 12px;
	color: var(--jg-ink-soft);
}

.jg-dash__legend-period {
	white-space: nowrap;
}

.jg-dash__swatch {
	width: 14px;
	height: 3px;
	border-radius: 2px;
	align-self: center;
	background: var(--jg-brand);
}

.jg-dash__legend-item--metro .jg-dash__swatch {
	background: #7cc4ff;
}

.jg-dash__legend-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-ink);
}

.jg-dash__legend-value {
	font-family: var(--jg-mono);
	font-size: 18px;
	font-weight: 700;
	color: var(--jg-ink);
	font-variant-numeric: tabular-nums;
}

.jg-dash__legend-period {
	font-size: 11px;
}

.jg-dash__legend-change .jg-change {
	font-size: 11px;
}

/* Hover readout: an overlay label in the chart's top-left corner, so it
   takes no space in the flow (no empty line before the first hover, no
   shift when text appears). */
.jg-dash--chart {
	position: relative;
}

.jg-dash__readout {
	position: absolute;
	top: 8px;
	left: 12px;
	z-index: 2;
	margin: 0;
	padding: 3px 8px;
	border: 1px solid var(--jg-line);
	background: rgba(10, 24, 48, 0.92);
	font-family: var(--jg-mono);
	font-size: 11px;
	line-height: 1.4;
	color: var(--jg-ink);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.jg-dash__readout:empty {
	display: none;
}

.jg-chart__ranges {
	display: flex;
	gap: 4px;
	margin: 0 0 8px;
}

.jg-chart__range {
	appearance: none;
	border: 1px solid var(--jg-line);
	background: transparent;
	color: var(--jg-ink-soft);
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: 2px;
	cursor: pointer;
}

.jg-chart__range:hover,
.jg-chart__range:focus-visible {
	color: var(--jg-ink);
	border-color: rgba(255, 255, 255, 0.4);
}

.jg-chart__range:focus-visible {
	outline: 2px solid var(--jg-brand);
	outline-offset: 2px;
}

.jg-chart__range.is-active {
	background: var(--jg-brand);
	border-color: var(--jg-brand);
	color: #0b0f18;
}

.jg-dash__table {
	margin-top: 10px;
	font-size: 12px;
}

.jg-dash__table summary {
	cursor: pointer;
	color: var(--jg-ink-soft);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.jg-dash__table summary:focus-visible {
	outline: 2px solid var(--jg-brand);
	outline-offset: 2px;
}

.jg-dash .jg-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	color: var(--jg-ink);
	margin-top: 8px;
}

.jg-dash .jg-table th,
.jg-dash .jg-table td {
	padding: 6px 6px;
	border-bottom: 1px solid var(--jg-line);
	text-align: left;
	vertical-align: middle;
	background: transparent;
	color: inherit;
}

.jg-dash .jg-table thead th {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-dash .jg-table .jg-num {
	text-align: right;
	font-family: var(--jg-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.jg-dash .jg-table tbody th {
	font-weight: 600;
}

.jg-dash .jg-table tbody th a {
	color: inherit;
	text-decoration: none;
}

.jg-dash .jg-table tbody th a:hover,
.jg-dash .jg-table tbody th a:focus-visible {
	color: var(--jg-brand);
}

/* Group separators organise the table; they are not rows a reader can act
   on, so they stay muted, take no hover treatment, and never turn orange. */
.jg-dash .jg-table__grouprow th {
	padding-top: 12px;
	padding-bottom: 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jg-ink-faint, var(--jg-ink-soft));
	border-bottom: 1px solid var(--jg-line);
}

/* No row in this table takes a surface highlight: the shared markets-table
   hover would otherwise paint it white (scoped to .jg-dash to outrank it).
   Group separators (Gaining, Losing) get no hover treatment at all. */
.jg-dash .jg-table--movers tbody tr:hover,
.jg-dash .jg-table--movers tbody tr:focus-within {
	background: transparent;
}

/* An occupation row is one interactive unit, on the Atlanta convention:
   on hover or keyboard focus the title and the employment figure turn
   brand orange while the green/red change badge keeps its meaning. */
.jg-table--movers tbody tr[data-jg-metric]:hover th a,
.jg-table--movers tbody tr[data-jg-metric]:focus-within th a,
.jg-table--movers tbody tr[data-jg-metric]:hover .jg-num,
.jg-table--movers tbody tr[data-jg-metric]:focus-within .jg-num {
	color: var(--jg-brand);
}

/* Occupation Movers entrance (dashboard-movers script): rows wait just below
   their place, then rise in turn. Nothing is hidden without the script. */
.jg-dash--movers[data-jg-enter="ready"] tbody tr {
	opacity: 0;
	transform: translateY(10px);
}

.jg-dash--movers[data-jg-enter="done"] tbody tr {
	opacity: 1;
	transform: none;
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--jg-enter-delay, 0ms);
}

/* Occupation Movers rotation (UAT Phase 03): during a step the top row
   fades, the rows below move up and the next ranked row fades in - the
   entrance's easing, half of MOVERS_MOVE_MS each, with no stagger. */
.jg-dash--movers.is-rotating tbody tr[data-jg-metric] {
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: 0ms;
}

/* Under reduced motion nothing rotates: the visible table lists every
   ranked occupation in order (top three first, as always), and the
   screen-reader copy of the ranking is left out (UAT Phase 03B). */
@media (prefers-reduced-motion: reduce) {
	.jg-dash--movers tbody[data-jg-movers-pool] tr[data-jg-metric][hidden] {
		display: table-row;
	}

	.jg-dash--movers .jg-movers-ranked {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jg-dash--movers[data-jg-enter] tbody tr {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.jg-table--movers tbody th a:focus-visible {
	outline: 2px solid var(--jg-brand);
	outline-offset: 2px;
}

.jg-dash .jg-table-scroll {
	overflow-x: auto;
}

.jg-kpis {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--jg-line);
}

.jg-kpi {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "label value" "period change";
	column-gap: 12px;
	row-gap: 2px;
	padding: 9px 0;
	border-bottom: 1px solid var(--jg-line);
}

.jg-kpi__label {
	grid-area: label;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--jg-ink);
}

.jg-kpi__label a {
	color: inherit;
	text-decoration: none;
}

.jg-kpi__label a:hover,
.jg-kpi__label a:focus-visible {
	color: var(--jg-brand);
}

.jg-kpi__geo {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 5px;
	border: 1px solid rgba(124, 196, 255, 0.5);
	border-radius: 2px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #7cc4ff;
	vertical-align: 1px;
}

.jg-kpi__value {
	grid-area: value;
	justify-self: end;
	font-family: var(--jg-mono);
	font-size: 15px;
	font-weight: 700;
	color: var(--jg-ink);
	font-variant-numeric: tabular-nums;
}

.jg-kpi__value small {
	font-size: 10px;
	font-weight: 500;
	color: var(--jg-ink-soft);
}

.jg-kpi__change {
	grid-area: change;
	justify-self: end;
	font-size: 11px;
}

.jg-kpi__change .jg-change {
	font-size: 11px;
}

.jg-kpi__period {
	grid-area: period;
	font-size: 10.5px;
	color: var(--jg-ink-faint, var(--jg-ink-soft));
}

/* Key Readings roll: latest and prior share one clipped cell (.jg-flip);
   the prior reading rolls up from below and the latest rolls out above.
   Both faces always take their space, so the card never changes size. */
.jg-kpi--roll .jg-flip {
	overflow: hidden;
}

.jg-kpi--roll .jg-flip__face {
	transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.55s ease;
}

.jg-kpi--roll .jg-flip__face--prior {
	opacity: 0;
	transform: translateY(100%);
}

.jg-kpi--roll.is-prior .jg-flip__face--now {
	opacity: 0;
	transform: translateY(-100%);
}

.jg-kpi--roll.is-prior .jg-flip__face--prior {
	opacity: 1;
	transform: none;
}

.jg-kpi--roll.is-prior .jg-kpi__period {
	color: #7cc4ff;
}

@media (prefers-reduced-motion: reduce) {
	.jg-kpi--roll .jg-flip__face {
		transition: none;
	}
}

.jg-composition {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	gap: 12px;
	align-items: center;
}

.jg-composition__legend {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 11px;
}

.jg-composition__item {
	display: grid;
	grid-template-columns: 10px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 4px 4px 0;
	border-bottom: 1px solid var(--jg-line);
	border-left: 2px solid transparent;
	cursor: default;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.jg-composition__item:focus-visible {
	outline: 2px solid var(--jg-brand);
	outline-offset: 1px;
}

/* Paired highlight: the hovered/focused/tapped slice and its row read as
   one. The name and share turn brand orange (the same treatment links use)
   and the row gains a faint surface and left rule, so the pairing is not
   carried by colour alone. */
.jg-composition__item.is-active {
	background-color: rgba(255, 106, 19, 0.08);
	border-left-color: var(--jg-brand);
	padding-left: 4px;
}

.jg-composition__item.is-active .jg-composition__label,
.jg-composition__item.is-active .jg-composition__share,
.jg-composition__item.is-active .jg-composition__value {
	color: var(--jg-brand);
}

.jg-composition__item.is-active .jg-composition__label {
	font-weight: 700;
}

.jg-composition__swatch {
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.3);
}

.jg-composition__label {
	min-width: 0;
	line-height: 1.3;
	overflow-wrap: anywhere;
	color: var(--jg-ink);
}

.jg-composition__share,
.jg-composition__value {
	font-family: var(--jg-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.jg-composition__share {
	font-weight: 700;
	color: var(--jg-ink);
}

.jg-composition__value {
	color: var(--jg-ink-faint, var(--jg-ink-soft));
	font-size: 10px;
}

/* ============================================================ Editor's Picks */
/* Eight editorial persona cards (Newspaper "editor's choice" pattern): round
   portrait, name, domain, then a compact list of that persona's newest picks.
   Four across on desktop, two on tablet, a swipeable row on phones, so eight
   cards never stack into an excessively tall band. */
.jg-picks__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 36px 40px;
}

.jg-pick {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0 0 6px;
}

.jg-pick::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -20px;
	border-left: 1px solid var(--jg-line);
}

.jg-pick:nth-child(4n + 1)::before {
	display: none;
}

.jg-pick__identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--jg-brand);
}

.jg-pick__portrait-wrap {
	display: block;
	width: 104px;
	height: 104px;
	margin: 0 0 12px;
	border-radius: 50%;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--jg-line);
}

.jg-pick__portrait,
.jg-pick__portrait-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jg-pick__name {
	margin: 0;
	font-family: var(--global-font-3, Georgia, serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--jg-ink);
}

.jg-pick__name a {
	color: inherit;
	text-decoration: none;
}

.jg-pick__name a:hover,
.jg-pick__name a:focus-visible {
	color: var(--jg-brand);
}

.jg-pick__domain {
	margin: 4px 0 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-pick__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jg-pick__item {
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--jg-line);
}

.jg-pick__item:last-child {
	border-bottom: 0;
}

.jg-pick__text {
	min-width: 0;
}

.jg-pick__category {
	margin: 0 0 4px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-brand);
}

.jg-pick__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--jg-ink);
}

.jg-pick__title a {
	color: inherit;
	text-decoration: none;
}

.jg-pick__title a:hover,
.jg-pick__title a:focus-visible {
	color: var(--jg-brand);
}

.jg-pick__title a:focus-visible,
.jg-pick__name a:focus-visible,
.jg-pick__more a:focus-visible {
	outline: 2px solid var(--jg-brand);
	outline-offset: 2px;
}

.jg-pick__empty {
	margin: 0;
	padding: 16px 0 4px;
	font-size: 12.5px;
	line-height: 1.5;
	text-align: center;
	color: var(--jg-ink-soft);
}

.jg-pick__more {
	margin: auto 0 0;
	padding-top: 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.jg-pick__more a {
	color: var(--jg-ink);
	text-decoration: none;
}

.jg-pick__more a:hover,
.jg-pick__more a:focus-visible {
	color: var(--jg-brand);
}

.jg-picks__note {
	margin: 24px 0 0;
	font-size: 11px;
	text-align: center;
	color: var(--jg-ink-soft);
}

@media (max-width: 1018px) and (min-width: 768px) {
	.jg-picks__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
	}

	.jg-pick::before {
		left: -12px;
	}

	.jg-pick:nth-child(4n + 1)::before {
		display: block;
	}

	.jg-pick:nth-child(2n + 1)::before {
		display: none;
	}

	.jg-pick__portrait-wrap {
		width: 96px;
		height: 96px;
	}

	.jg-pick__name {
		font-size: 19px;
	}
}

/* ======================================= Premium section (reference package) */
/* Translation of jobgetr-premium-section: pitch column, tool panel,
   source ribbon and the brief layout, on the navy Premium band. Presentation only: every control is disabled and Coming Soon. */
.jg-prm {
	color: var(--jg-ink);
}

.jg-prm__badge {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--jg-brand);
	border-radius: 2px;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jg-brand);
	vertical-align: 2px;
}

.jg-prm__kicker {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jg-brand);
}

/* ---- pitch */
.jg-prm__pitch {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.jg-prm__headline {
	margin: 0;
	font-family: var(--global-font-3, Georgia, serif);
	font-size: clamp(26px, 2.25vw, 32px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--jg-ink);
}

/* The homepage headline is two written lines, not a wrap: each is a block
   of the same headline, so both carry its type and the break never moves
   with the viewport. */
.jg-prm__headline-line {
	display: block;
}

.jg-prm__headline--sub {
	font-size: 26px;
}

/* Homepage band (reference jg premium-3): one bold line across the section
   under the masthead, in the masthead title's typeface (global font 3); it
   wraps naturally on narrower screens. */
.jg-prm__headline-band {
	margin-top: 22px;
}

.jg-prm__headline--band {
	font-family: var(--global-font-3, Georgia, serif);
	font-size: clamp(22px, 2.15vw, 31px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.jg-prm__headline--band .jg-prm__headline-line {
	display: inline;
}

/* The two lines sit side by side here; restore the word space between them. */
.jg-prm__headline--band .jg-prm__headline-line + .jg-prm__headline-line::before {
	content: " ";
}

@media (max-width: 767px) {
	.jg-prm__headline-band {
		margin-top: 16px;
	}
}

.jg-prm__lede {
	margin: 0;
	max-width: 44ch;
	font-size: 16.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.78);
}

.jg-prm__claims {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.jg-prm__claims li {
	padding-left: 16px;
	border-left: 3px solid var(--jg-brand);
}

.jg-prm__claims strong {
	display: block;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--jg-ink);
}

.jg-prm__claims span {
	display: block;
	max-width: 44ch;
	margin-top: 3px;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.66);
}

/* A claim's optional second line: between the heading and the copy in
   weight and tone, at the copy's size so the block stays compact. */
.jg-prm__claims .jg-prm__claims-sub {
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
}

.jg-prm__plans {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.66);
}

/* ---- tool panel */
.jg-prm__tool {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	border: 1px solid #26395f;
	border-radius: 16px;
	background: #0a1830;
}

.jg-prm__dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 230px;
	padding: 24px 20px;
	border: 2px dashed #3a5280;
	border-radius: 14px;
	background: #0d1f3d;
	text-align: center;
}

.jg-prm__drop-title {
	margin: 0;
	font-family: var(--global-font-3, Georgia, serif);
	font-size: 27px;
	font-weight: 700;
	color: var(--jg-ink);
}

.jg-prm__drop-hint {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.66);
}

.jg-prm__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 4px;
}

.jg-prm__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 10px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.jg-prm__btn--primary {
	background: var(--jg-brand);
	color: #0b1426;
	opacity: 0.85;
	cursor: not-allowed;
}

.jg-prm__btn--link {
	min-height: 0;
	padding: 0 4px;
	font-weight: 500;
	font-size: 15px;
	color: rgba(255, 138, 76, 0.6);
	text-decoration: underline;
}

.jg-prm__chiprow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.jg-prm__chiprow-label {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.66);
}

.jg-prm__chip {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 13px;
	border: 1px solid #33496f;
	border-radius: 999px;
	background: #0f2446;
	font-size: 13.5px;
	color: rgba(220, 227, 238, 0.85);
}

.jg-prm__fineprint {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.5);
}

.jg-prm__fineprint a {
	color: #ff8a4c;
}

/* ---- source ribbon */
.jg-prm__sources {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-top: 22px;
	border-top: 1px solid #26395f;
}

.jg-prm__sources-head {
	display: flex;
	flex: 0 0 300px;
	flex-direction: column;
	gap: 3px;
}

.jg-prm__sources-title {
	font-family: var(--jg-mono);
	font-size: 13px;
	color: var(--jg-brand);
}

.jg-prm__sources-sub {
	font-size: 13.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.55);
}

.jg-prm__sources-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jg-prm__sources-list li {
	padding: 5px 10px;
	border: 1px solid #2c4470;
	border-radius: 6px;
	background: #13284c;
	font-size: 13px;
	color: #dce3ee;
}

.jg-prm__sources-list li.is-ours {
	border-color: var(--jg-brand);
	background: var(--jg-brand);
	color: #0b1426;
	font-weight: 700;
}

.jg-prm__sources--compact {
	margin-top: 20px;
	padding: 0 6px;
	border-top: 0;
	gap: 22px;
}

.jg-prm__sources--compact .jg-prm__sources-head {
	flex-basis: 180px;
}

.jg-prm__sources--compact .jg-prm__sources-title {
	font-size: 12px;
}

.jg-prm__sources--compact .jg-prm__sources-sub {
	font-size: 12px;
	line-height: 1.35;
}

.jg-prm__sources--compact .jg-prm__sources-list {
	gap: 6px;
}

.jg-prm__sources--compact .jg-prm__sources-list li {
	padding: 4px 9px;
	font-size: 12px;
}

/* ---- pitch CTA (homepage) */
.jg-prm__cta-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0 0;
}

.jg-prm__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 22px;
	border: 1px solid var(--jg-brand);
	border-radius: 10px;
	background: var(--jg-brand);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: #0b1426 !important;
	text-decoration: none !important;
	transition: background 0.15s ease, color 0.15s ease;
}

.jg-prm__cta:hover,
.jg-prm__cta:focus {
	background: transparent;
	color: var(--jg-brand) !important;
}

/* ---- suite: what Premium includes (homepage, under the tool panel) */
.jg-prm__suite {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
	padding: 0 4px;
}

.jg-prm__suite-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.jg-prm__suite-title {
	font-family: var(--jg-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.jg-prm__suite-more {
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7) !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.jg-prm__suite-more:hover,
.jg-prm__suite-more:focus {
	color: var(--jg-brand) !important;
}

.jg-prm__suite-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jg-prm__suite-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 8px 10px 9px;
	border: 1px solid #2c4470;
	border-left: 3px solid var(--jg-brand);
	border-radius: 6px;
	background: #13284c;
}

/* The feature title and its icon are one header row. The title carries
   the white and the descriptor beneath it the section's light grey (the
   pitch claims' copy colour), well above 4.5:1 on the #13284c pill. */
.jg-prm__suite-item strong {
	display: flex;
	/* Top-aligned, not centred: these titles wrap to two and three lines,
	   and a centred icon drifts to the middle of the block instead of
	   reading as part of the first line. The icon is sized to the line
	   box, so flex-start lands it optically centred on line one. */
	align-items: flex-start;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.25;
	text-transform: uppercase;
	color: #fff;
}

/* Sized below the cap height of the row it shares, so the title stays
   dominant and the pill does not grow. */
/* Its shapes are stroked with currentColor. The colour is still set here
   rather than left to inherit from the title: the two happen to match
   today, and stating it keeps the icon's colour a decision of its own
   rather than something that would follow the title if that changed
   again. No path is touched. */
.jg-prm__suite-item .jg-prm__suite-icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	display: block;
	color: #fff;
}

.jg-prm__suite-item span {
	font-size: 12px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.66);
}

.jg-prm__suite-sources {
	margin: 2px 0 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.5);
}

/* ---- brief layout (sample) */
.jg-prm__brief {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border: 1px solid #26395f;
	border-radius: 16px;
	background: #0a1830;
}

.jg-prm__brief-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.jg-prm__brief-head p {
	margin: 0;
}

.jg-prm__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jg-brand);
}

.jg-prm__brief-role {
	font-family: var(--global-font-3, Georgia, serif);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--jg-ink);
}

.jg-prm__brief-meta {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.66);
}

.jg-prm__flag {
	flex: 0 0 auto;
	padding: 5px 9px;
	border: 1px dashed #4a6394;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.jg-prm__tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.jg-prm__tile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	border: 1px solid #22385e;
	border-radius: 12px;
	background: #0f2446;
}

.jg-prm__tile p {
	margin: 0;
}

.jg-prm__tile-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.66);
}

.jg-prm__tile-note {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
}

.jg-prm__wage {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 10px;
	font-family: var(--jg-mono);
	font-size: 14px;
	color: var(--jg-ink);
}

.jg-prm__wage-mid {
	font-size: 18px;
	color: var(--jg-brand);
}

.jg-prm__value {
	font-family: var(--jg-mono);
	font-size: 16px;
	color: var(--jg-ink);
}

.jg-prm__evidence {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
}

.jg-prm__evidence strong {
	color: var(--jg-ink);
	font-weight: 500;
}

/* ---- plan comparison table (Premium page) */
.jg-table--compare-plans {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	color: #ffffff;
}

.jg-table.jg-table--compare-plans th,
.jg-table.jg-table--compare-plans td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	text-align: left;
	vertical-align: middle;
	background: transparent;
	color: inherit;
}

.jg-table.jg-table--compare-plans thead th {
	position: static;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.64);
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.jg-table.jg-table--compare-plans tbody th {
	font-weight: 700;
}

.jg-table.jg-table--compare-plans tbody tr:hover {
	background: transparent;
}

/* Four columns fit a phone once the cells wrap; no sideways scroll. */
@media (max-width: 767px) {
	.jg-table.jg-table--compare-plans th,
	.jg-table.jg-table--compare-plans td {
		padding: 10px 6px;
		white-space: normal;
		font-size: 13px;
	}

	.jg-table.jg-table--compare-plans thead th {
		font-size: 10.5px;
		letter-spacing: 0.04em;
	}
}

@media (max-width: 1018px) {

	.jg-prm__sources {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.jg-prm__sources-head {
		flex-basis: auto;
	}

	.jg-prm__sources--compact {
		gap: 12px;
		padding: 0;
	}

	.jg-prm__sources--compact .jg-prm__sources-head {
		flex-basis: auto;
	}

	.jg-prm__suite {
		padding: 0;
	}

	.jg-prm__suite-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	/* Two columns keep the suite to four rows on a phone. */
	.jg-prm__suite-list {
		gap: 4px;
	}

	.jg-prm__suite-item {
		padding: 6px 8px 7px;
		border-left-width: 2px;
	}

	.jg-prm__suite-item strong {
		font-size: 10px;
		gap: 5px;
	}

	/* Two columns on a phone leave the title little room; the icon
	   steps down with it rather than crowding the words. */
	.jg-prm__suite-item .jg-prm__suite-icon {
		width: 12px;
		height: 12px;
	}

	.jg-prm__suite-item span {
		font-size: 11px;
		line-height: 1.3;
	}
}

/* ============================================== Premium role report preview */
/* Inert by design: text and a bordered block, no control of any kind. On
   the homepage one module (copy over the drop zone) sits under the Atlanta
   Industry pulse and anchors to that column's bottom (see the child
   theme's Atlanta column rules); /premium/ splits copy and zone. */
.jg-prem {
	color: var(--jg-ink);
}

.jg-prem--copy,
.jg-prem--full {
	margin-top: 22px;
	padding: 14px 16px 16px;
	border: 1px solid var(--jg-line);
	border-left: 3px solid var(--jg-brand);
	background-color: rgba(255, 255, 255, 0.03);
}

.jg-prem__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.jg-prem__visual {
	flex: 0 0 88px;
	width: 88px;
	height: 60px;
	overflow: hidden;
	border: 1px solid var(--jg-line);
}

.jg-prem__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jg-prem__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.jg-prem__kicker {
	margin: 0;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jg-brand);
}

.jg-prem__badge {
	display: inline-block;
	margin: 0;
	padding: 2px 8px;
	border: 1px solid var(--jg-brand);
	border-radius: 2px;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jg-brand);
}

.jg-prem__title {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--jg-ink);
}

.jg-prem__lede {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--jg-ink-soft);
}

.jg-prem__note {
	margin: 8px 0 0;
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--jg-ink-faint, var(--jg-ink-soft));
}

.jg-prem--zone {
	margin-top: 22px;
}

.jg-prem__zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 118px;
	padding: 18px 16px;
	border: 1.5px dashed rgba(255, 255, 255, 0.28);
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.025);
	text-align: center;
}

.jg-prem__zone-title {
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	color: var(--jg-ink);
}

.jg-prem__zone-text {
	margin: 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--jg-ink-soft);
}

.jg-prem__zone-status {
	margin: 6px 0 0;
	padding: 2px 9px;
	border: 1px solid var(--jg-brand);
	border-radius: 2px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jg-brand);
}

/* The unified module: centred kicker, title, one sentence, then the drop
   zone; Coming Soon lives in the zone only. */
.jg-prem--full .jg-prem__kicker {
	margin: 2px 0 10px;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-align: center;
}

.jg-prem--full .jg-prem__title {
	margin: 0 0 6px;
	font-size: 14.5px;
}

.jg-prem--full .jg-prem__lede {
	margin: 0 0 12px;
}

.jg-prem--full .jg-prem__zone {
	min-height: 104px;
	padding: 14px 12px;
}

/* ========================================================= market terminal */
.jg-term {
	--jg-term-surface: #ffffff;
	--jg-term-selected: rgba(255, 106, 19, 0.07);
	color: var(--jg-ink);
}

.jg-term__heading,
.jg-term__title {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--jg-ink);
}

/* ---- comparison panel */
.jg-term--panel {
	padding: 16px 16px 14px;
	border: 1px solid var(--jg-line);
	background: var(--jg-term-surface);
}

.jg-term__ranges {
	display: inline-flex;
	gap: 0;
	margin: 12px 0 10px;
	padding: 2px;
	border: 1px solid var(--jg-line);
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.03);
}

.jg-term__ranges .jg-chart__range {
	border: 0;
	border-radius: 2px;
	padding: 4px 12px;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--jg-ink-soft);
	background: transparent;
}

.jg-term__ranges .jg-chart__range:hover,
.jg-term__ranges .jg-chart__range:focus-visible {
	color: var(--jg-ink);
}

.jg-term__ranges .jg-chart__range.is-active {
	background: var(--jg-brand);
	color: #ffffff;
}

.jg-term__mount {
	border: 0;
	border-bottom: 1px solid var(--jg-line);
	background: transparent;
}

.jg-term__mount[data-jg-chart-state="loading"] {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.03));
}

.jg-term__note {
	margin: 8px 0 0;
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--jg-ink-soft);
}

.jg-term__selected {
	margin: 12px 0 6px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--jg-ink);
}

.jg-term__selected-kicker {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-term__series {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--jg-line);
}

.jg-term__row {
	display: grid;
	grid-template-columns: 14px 36px minmax(0, 1fr) auto;
	grid-template-areas:
		"swatch geo value change"
		"swatch geo period period";
	align-items: baseline;
	column-gap: 8px;
	row-gap: 1px;
	padding: 7px 0;
	border-bottom: 1px solid var(--jg-line);
}

.jg-term__swatch {
	grid-area: swatch;
	width: 14px;
	height: 3px;
	border-radius: 2px;
	align-self: center;
	background: var(--jg-brand);
}

.jg-term__row--metro .jg-term__swatch {
	background: #2b6cb0;
}

.jg-term__geo {
	grid-area: geo;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-ink);
}

.jg-term__value {
	grid-area: value;
	font-family: var(--jg-mono);
	font-size: 15px;
	font-weight: 700;
	color: var(--jg-ink);
	font-variant-numeric: tabular-nums;
}

.jg-term__change {
	grid-area: change;
	text-align: right;
}

.jg-term__change .jg-change {
	font-size: 12px;
}

.jg-term__period {
	grid-area: period;
	font-size: 10.5px;
	color: var(--jg-ink-soft);
}

.jg-term__units,
.jg-term__readout {
	margin: 6px 0 0;
	font-size: 10.5px;
	color: var(--jg-ink-soft);
}

.jg-term__readout {
	min-height: 15px;
	font-family: var(--jg-mono);
	font-variant-numeric: tabular-nums;
}

.jg-term--panel .jg-source {
	margin: 10px 0 0;
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--jg-ink-soft);
}

/* ---- market table */
.jg-term--table {
	border: 1px solid var(--jg-line);
	background: var(--jg-term-surface);
}

/* Table header band: the listing title leads at market-listing scale
   (the reference's "Americas" band), the measure switch sits beside it. */
.jg-term__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	padding: 16px 16px 14px;
	border-bottom: 1px solid var(--jg-line);
	background: rgba(0, 0, 0, 0.035);
}

.jg-term--table .jg-term__title {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.jg-term__meta {
	flex-basis: 100%;
	margin: 0;
	font-size: 10.5px;
	color: var(--jg-ink-soft);
}

.jg-term__modes {
	display: inline-flex;
	padding: 2px;
	border: 1px solid var(--jg-line);
	border-radius: 3px;
	background: #ffffff;
}

.jg-term__mode {
	appearance: none;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: var(--jg-ink-soft);
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 4px 11px;
	cursor: pointer;
}

.jg-term__mode:hover,
.jg-term__mode:focus-visible {
	color: var(--jg-ink);
}

.jg-term__mode:focus-visible {
	outline: 2px solid var(--jg-brand);
	outline-offset: 2px;
}

.jg-term__mode.is-active {
	background: var(--jg-brand);
	color: #ffffff;
}

.jg-term__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Market-listing typography: the entity name and its figures carry the
   row (15-16px), headers stay small and muted, separators stay thin. */
.jg-table--terminal {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 15px;
	color: var(--jg-ink);
}

.jg-table--terminal th,
.jg-table--terminal td {
	padding: 9px 12px;
	border: 0;
	border-bottom: 1px solid var(--jg-line);
	text-align: left;
	vertical-align: middle;
	background: transparent;
	line-height: 1.3;
}

.jg-table--terminal thead th {
	position: static;
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
	white-space: nowrap;
	border-bottom: 1px solid var(--jg-ink);
}

.jg-table--terminal thead th abbr {
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}

.jg-table--terminal .jg-num {
	text-align: right;
	font-family: var(--jg-mono);
	font-size: 14.5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Figures centre on wrapped names (the shared markets table rule sets
   top alignment; this outranks it). */
.jg-table.jg-table--terminal tbody th,
.jg-table.jg-table--terminal tbody td {
	vertical-align: middle;
}

/* Numeric column headings keep the header scale, not the row scale. */
.jg-table--terminal thead th.jg-num {
	font-family: inherit;
	font-size: 11.5px;
}

.jg-table--terminal .jg-num .jg-change {
	font-size: 14px;
	gap: 4px;
}

.jg-table--terminal .jg-num .jg-change__arrow {
	font-size: 10px;
}

.jg-table--terminal tbody th {
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--jg-ink);
}

.jg-table--terminal tbody th a {
	color: inherit;
	text-decoration: none;
}

.jg-table--terminal tbody th a:hover,
.jg-table--terminal tbody th a:focus-visible {
	color: var(--jg-brand);
}

.jg-table--terminal tbody th a:focus-visible {
	outline: 2px solid var(--jg-brand);
	outline-offset: 2px;
}

.jg-table--terminal .jg-term__namecol {
	min-width: 220px;
}

.jg-term__tag {
	display: inline-block;
	margin-left: 6px;
	padding: 0 5px;
	border: 1px solid var(--jg-line);
	border-radius: 2px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
	vertical-align: 1px;
}

/* Group separators: neutral, organise the table, never interactive. */
.jg-table--terminal .jg-table__grouprow th {
	padding: 10px 12px 5px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
	background: rgba(0, 0, 0, 0.025);
}

/* Compare control: one per row, selected state carried by the glyph and
   aria-pressed as well as by colour. */
.jg-term__pickcol {
	width: 38px;
	padding-right: 0 !important;
}

.jg-term__pick {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--jg-line);
	border-radius: 50%;
	background: #ffffff;
	color: var(--jg-ink-soft);
	cursor: pointer;
}

.jg-term__pick-glyph::before {
	content: "+";
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.jg-term__pick:hover,
.jg-term__pick:focus-visible {
	border-color: var(--jg-brand);
	color: var(--jg-brand);
}

.jg-term__pick:focus-visible {
	outline: 2px solid var(--jg-brand);
	outline-offset: 2px;
}

.jg-term__pick[aria-pressed="true"] {
	border-color: var(--jg-brand);
	background: var(--jg-brand);
	color: #ffffff;
}

.jg-term__pick[aria-pressed="true"] .jg-term__pick-glyph::before {
	content: "\2713";
	font-size: 12px;
}

/* Selected row: orange is interaction; green/red stays movement. */
.jg-table--terminal tbody tr.is-selected th,
.jg-table--terminal tbody tr.is-selected td {
	background: var(--jg-term-selected);
}

.jg-table--terminal tbody tr.is-selected th a {
	color: var(--jg-brand);
}

.jg-table--terminal tbody tr.is-selected .jg-term__namecol {
	box-shadow: inset 3px 0 0 var(--jg-brand);
}

/* Hover / focus: the row reads as one unit. */
.jg-table--terminal tbody tr[data-jg-entity]:hover th,
.jg-table--terminal tbody tr[data-jg-entity]:hover td,
.jg-table--terminal tbody tr[data-jg-entity]:focus-within th,
.jg-table--terminal tbody tr[data-jg-entity]:focus-within td {
	background: rgba(255, 106, 19, 0.05);
}

.jg-table--terminal tbody tr[data-jg-entity]:hover th a,
.jg-table--terminal tbody tr[data-jg-entity]:focus-within th a,
.jg-table--terminal tbody tr[data-jg-entity]:hover td[data-jg-cell$="level"],
.jg-table--terminal tbody tr[data-jg-entity]:focus-within td[data-jg-cell$="level"],
.jg-table--terminal tbody tr[data-jg-entity]:hover td[data-jg-mode-cell]:not(:has(.jg-change)),
.jg-table--terminal tbody tr[data-jg-entity]:focus-within td[data-jg-mode-cell]:not(:has(.jg-change)) {
	color: var(--jg-brand);
}

/* Measure modes: one column set visible at a time. */
.jg-table--terminal[data-jg-mode="employment"] [data-jg-mode-cell]:not([data-jg-mode-cell="employment"]),
.jg-table--terminal[data-jg-mode="pay"] [data-jg-mode-cell]:not([data-jg-mode-cell="pay"]),
.jg-table--terminal[data-jg-mode="concentration"] [data-jg-mode-cell]:not([data-jg-mode-cell="concentration"]) {
	display: none;
}

.jg-term--table .jg-source {
	margin: 0;
	padding: 10px 14px;
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--jg-ink-soft);
}

/* ============================================================ ranked lists */
.jg-ranked__title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--jg-ink);
}

.jg-ranked__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--jg-line);
}

.jg-ranked__row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--jg-line);
	list-style: none;
}

.jg-ranked--featured .jg-ranked__row {
	padding: 11px 0;
}

.jg-ranked__num {
	flex: 0 0 18px;
	font-family: var(--jg-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--jg-ink-faint, var(--jg-ink-soft));
	text-align: right;
}

.jg-ranked__body {
	flex: 1 1 auto;
	min-width: 0;
}

.jg-ranked__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--jg-ink);
}

.jg-ranked--featured .jg-ranked__label {
	font-size: 14px;
}

.jg-ranked__label a {
	color: inherit;
	text-decoration: none;
}

.jg-ranked__label a:hover,
.jg-ranked__label a:focus-visible {
	color: var(--jg-brand);
}

.jg-ranked__sub {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--jg-ink-soft);
}

.jg-ranked__figures {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
}

.jg-ranked__value {
	font-family: var(--jg-mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--jg-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.jg-ranked--featured .jg-ranked__value {
	font-size: 15px;
}

.jg-ranked__value small {
	font-size: 10px;
	font-weight: 500;
	color: var(--jg-ink-soft);
}

.jg-ranked__change,
.jg-ranked__change .jg-change {
	font-size: 11px;
}

/* In the 25% Atlanta pulse columns between the landscape band and ~1300px
   the pay unit drops under the figure so the label keeps its width. */
@media (min-width: 1019px) and (max-width: 1300px) {
	.jobgetr-row--atlanta .jg-ranked__value small {
		display: block;
	}
}

.jg-ranked__meta {
	margin: 8px 0 0;
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--jg-ink-faint, var(--jg-ink-soft));
}

/* ======================================================= Atlanta headline */
.jg-metrohead__tiles {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.jg-metrohead__tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* The theme indents content list items; tiles sit on the column edge. */
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--jg-line);
	background-color: rgba(255, 255, 255, 0.04);
}

.jg-metrohead__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-metrohead__label a {
	color: inherit;
	text-decoration: none;
}

.jg-metrohead__label a:hover,
.jg-metrohead__label a:focus-visible {
	color: var(--jg-brand);
}

.jg-metrohead__value {
	font-family: var(--jg-mono);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	color: var(--jg-ink);
	font-variant-numeric: tabular-nums;
}

.jg-metrohead__value small {
	font-size: 10px;
	font-weight: 500;
	color: var(--jg-ink-soft);
}

.jg-metrohead__meta {
	font-size: 10.5px;
	color: var(--jg-ink-faint, var(--jg-ink-soft));
}

.jg-metrohead__meta .jg-change {
	font-size: 11px;
}

/* The change in the meta line follows the period on show; it stays inline. */
.jg-metrohead__meta .jg-flip {
	display: inline-grid;
	vertical-align: baseline;
}

/* Atlanta tiles with a trend: readings left, a thin 24-month sparkline right
   (gaps kept as gaps). UAT Phase 04: a tile with a prior reading carries two
   lines - the window ending at the latest period and the one ending at the
   prior period - crossfaded with the figures, each stroked by its own
   period's change: favorable in the site's up colour, unfavorable in its
   down colour, otherwise the neutral line. */
.jg-metrohead__tile--spark {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 12px;
	row-gap: 4px;
}

.jg-metrohead__tile--spark > :not(.jg-metrohead__spark) {
	grid-column: 1;
}

.jg-metrohead__spark {
	grid-column: 2;
	grid-row: 1 / span 4;
	align-self: center;
	line-height: 0;
}

.jg-metrohead__spark .jg-spark {
	display: block;
	width: 96px;
	height: 30px;
}

.jg-metrohead__spark .jg-spark__line {
	stroke: rgba(255, 255, 255, 0.55);
	stroke-width: 1.25;
}

.jg-metrohead__spark .jg-spark--favorable .jg-spark__line {
	stroke: var(--jg-up);
}

.jg-metrohead__spark .jg-spark--unfavorable .jg-spark__line {
	stroke: var(--jg-down);
}

.jg-metrohead__spark .jg-spark__point,
.jg-metrohead__spark .jg-spark__dot {
	fill: #ffffff;
}

/* The two lines share one cell, like the figures beside them. */
.jg-metrohead__spark .jg-flip {
	display: grid;
}

@media (max-width: 1300px) and (min-width: 1019px) {
	.jg-metrohead__spark .jg-spark {
		width: 72px;
	}
}

/* The tiles turn together in 450 ms, the Glance charts' easing. */
.jg-metrohead--tiles .jg-flip__face {
	transition-duration: 0.45s;
	transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

/* Prior reading as text: screen readers always (.jg-period-compare); on
   screen under reduced motion, where the tiles do not turn. */
@media (prefers-reduced-motion: reduce) {
	.jg-metrohead__tile .jg-metrohead__prior {
		display: block;
		margin: 2px 0 0;
		font-size: 11px;
		line-height: 1.35;
		color: var(--jg-ink-soft);
	}
}

.jg-metrohead__subtitle {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 800;
	color: var(--jg-ink);
}

.jg-metrohead .jg-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	color: var(--jg-ink);
}

.jg-metrohead .jg-table th,
.jg-metrohead .jg-table td {
	padding: 7px 6px;
	border: 0;
	border-bottom: 1px solid var(--jg-line);
	text-align: left;
	vertical-align: middle;
	background: transparent;
	color: inherit;
}

.jg-metrohead .jg-table thead th {
	position: static;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-metrohead .jg-table tbody th {
	font-weight: 700;
}

.jg-metrohead__periods {
	display: block;
	font-size: 10px;
	font-weight: 500;
	color: var(--jg-ink-faint, var(--jg-ink-soft));
}

.jg-metrohead .jg-table .jg-num {
	text-align: right;
	font-family: var(--jg-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.jg-metrohead__cell {
	display: block;
	font-weight: 700;
}

.jg-metrohead__measure {
	color: inherit;
	text-decoration: none;
}

/* Row highlight matches the pulse lists: the measure and its values turn
   brand orange on hover or keyboard focus; the row surface stays navy and
   the green/red change badges keep their meaning. */
.jg-metrohead .jg-table tbody tr:hover,
.jg-metrohead .jg-table tbody tr:focus-within {
	background: transparent;
}

.jg-metrohead .jg-table tbody tr:hover th,
.jg-metrohead .jg-table tbody tr:hover td,
.jg-metrohead .jg-table tbody tr:focus-within th,
.jg-metrohead .jg-table tbody tr:focus-within td {
	background: rgba(255, 106, 19, 0.05);
}

.jg-metrohead .jg-table tbody tr:hover .jg-metrohead__measure,
.jg-metrohead .jg-table tbody tr:focus-within .jg-metrohead__measure,
.jg-metrohead .jg-table tbody tr:hover .jg-metrohead__cell,
.jg-metrohead .jg-table tbody tr:focus-within .jg-metrohead__cell {
	color: var(--jg-brand);
}

.jg-metrohead__measure:focus-visible {
	outline: 2px solid var(--jg-brand);
	outline-offset: 2px;
}

.jg-metrohead .jg-source {
	margin: 10px 0 0;
	font-size: 11px;
	color: var(--jg-ink-faint, var(--jg-ink-soft));
}

.jg-beta-pill {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 7px;
	border: 1px solid rgba(124, 196, 255, 0.55);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #7cc4ff;
	vertical-align: 1px;
}

/* ============================================================== live pill */
.jg-live-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
	padding: 2px 8px 2px 9px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--jg-ink);
}

.jg-live-pill__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #e8432b;
	box-shadow: 0 0 0 2px rgba(232, 67, 43, 0.22);
}

/* ============================================================ jobgetr.ai Live */
.jg-tv__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--jg-line);
}

.jg-tv__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--jg-ink);
}

.jg-tv__wordmark {
	display: inline-block;
}

.jg-tv__more {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
	text-decoration: none;
	white-space: nowrap;
}

.jg-tv__more:hover,
.jg-tv__more:focus-visible {
	color: var(--jg-brand);
}

.jg-tv__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background:
		linear-gradient(150deg, rgba(13, 35, 64, 0.98), rgba(7, 15, 30, 0.98)),
		#0d2340;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	border: 1px solid var(--jg-line);
}

.jg-tv__video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	background-color: #000;
}

.jg-tv__poster {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	padding: 18px 20px;
	background-size: cover;
	background-position: center;
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 48px),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 48px);
}

.jg-tv__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background-color: var(--jg-brand);
	color: #0b0f18;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 9px;
}

.jg-tv__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.85);
	background-color: rgba(10, 24, 48, 0.4);
}

.jg-tv__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 55%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent rgba(255, 255, 255, 0.92);
}

.jg-tv__meta {
	padding-top: 14px;
}

.jg-tv__kicker {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jg-brand);
	margin-bottom: 6px;
}

.jg-tv__title {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--jg-ink);
}

.jg-tv__descr {
	margin: 7px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--jg-ink-soft);
	max-width: 64ch;
}

.jg-tv__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 12px;
	font-size: 12px;
}

.jg-tv__date {
	color: var(--jg-ink-soft);
	font-variant-numeric: tabular-nums;
}

/* ====================================================== Market Focus watchlist */
.jg-watchlist__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--jg-line);
}

.jg-watchlist__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--jg-line);
}

.jg-watchlist__body {
	flex: 1 1 auto;
	min-width: 0;
}

.jg-watchlist__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--jg-ink);
	line-height: 1.3;
}

.jg-watchlist__label a {
	color: inherit;
	text-decoration: none;
}

.jg-watchlist__label a:hover,
.jg-watchlist__label a:focus-visible {
	color: var(--jg-brand);
}

.jg-watchlist__period {
	display: block;
	margin-top: 2px;
	font-size: 10.5px;
	color: var(--jg-ink-soft);
	line-height: 1.4;
}

.jg-watchlist__cmp {
	color: var(--jg-ink-faint, var(--jg-ink-soft));
}

.jg-watchlist__figures {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
}

.jg-watchlist__value {
	font-family: var(--jg-mono);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--jg-ink);
	font-variant-numeric: tabular-nums;
}

.jg-watchlist .jg-change {
	font-size: 11px;
}

/* ===================================== industry / occupation navigators + metro */
.jg-navigator__list,
.jg-metro__metrics,
.jg-jobs__facets {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jg-navigator__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--jg-line);
}

.jg-navigator__row:last-of-type {
	border-bottom: 0;
}

.jg-navigator__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--jg-ink);
}

.jg-navigator__descr {
	display: block;
	font-size: 11px;
	line-height: 1.45;
	color: var(--jg-ink-soft);
}

.jg-navigator__status {
	flex: 0 0 auto;
	font-family: var(--jg-mono);
	font-size: 12px;
	color: var(--jg-ink-soft);
}

.jg-navigator__cta {
	display: inline-block;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 700;
	color: var(--jg-brand);
	text-decoration: none;
}

.jg-metro__visual {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 104px;
	padding: 12px;
	background:
		linear-gradient(140deg, rgba(19, 31, 73, 0.94), rgba(7, 11, 20, 0.96)),
		var(--jg-navy, #131f49);
	background-size: cover;
	background-position: center;
	margin-bottom: 10px;
}

.jg-metro__place {
	color: #fff;
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}

.jg-metro__scope {
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--jg-mono);
	font-size: 10px;
	margin-top: 4px;
}

.jg-metro__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid var(--jg-line);
	font-size: 12px;
}

.jg-metro__row:last-child {
	border-bottom: 0;
}

.jg-metro__label {
	color: var(--jg-ink);
}

.jg-metro__value {
	font-family: var(--jg-mono);
	color: var(--jg-ink-soft);
}

.jg-jobs__headline {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--jg-ink);
}

.jg-jobs__copy {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--jg-ink-soft);
}

/* ========================================================== markets snapshot */
.jg-markets__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.jg-tabs {
	display: inline-flex;
	gap: 18px;
}

.jg-tab {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 4px 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--jg-ink-soft);
	cursor: pointer;
}

.jg-tab.is-active {
	color: var(--jg-brand);
	border-bottom-color: var(--jg-brand);
}

.jg-markets__link {
	font-size: 12px;
	font-weight: 700;
	color: var(--jg-brand);
	text-decoration: none;
}

.jg-tabpanel[hidden] {
	display: none;
}

.jg-metric-row {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 12px;
}

.jg-metric {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background-color: #fff;
	border: 1px solid var(--jg-line);
	padding: 12px;
	min-width: 0;
}

.jg-metric__label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--jg-ink-soft);
	line-height: 1.3;
	min-height: 2.6em;
}

.jg-metric__value {
	font-family: var(--jg-mono);
	font-size: 22px;
	font-weight: 700;
	color: var(--jg-ink);
	line-height: 1.1;
}

.jg-metric__change,
.jg-metric__period {
	font-size: 11px;
	color: var(--jg-ink-soft);
}

.jg-metric__spark {
	display: block;
	height: 30px;
	margin-top: 4px;
	border-bottom: 1px dashed var(--jg-line);
}

/* ================================================================= employer */
.jg-employer {
	color: #fff;
}

.jg-employer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: 28px;
	align-items: start;
}

.jg-employer__headline {
	margin: 0;
	font-size: 28px;
	line-height: 1.2;
	font-weight: 800;
	color: #fff;
}

.jg-employer__copy {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.76);
}

.jg-employer__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	counter-reset: none;
}

.jg-step {
	display: block;
	text-align: center;
}

.jg-step__mark {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	margin-bottom: 10px;
}

.jg-step__icon {
	font-size: 18px;
	color: #fff;
}

.jg-step__num {
	position: absolute;
	top: -5px;
	right: -5px;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--jg-brand);
	color: #fff;
	font-family: var(--jg-mono);
	font-size: 11px;
	font-weight: 700;
}

.jg-step__title {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	line-height: 1.35;
}

.jg-step__copy {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.66);
}

.jg-employer__caps {
	list-style: none;
	margin: 0;
	padding: 14px 16px;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	display: grid;
	gap: 10px;
}

.jg-cap__title {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.jg-cap__copy {
	display: block;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.62);
}

.jg-employer__console {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-top: 22px;
	background-color: #fff;
	padding: 10px;
}

.jg-employer__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--jg-ink);
	resize: none;
	background: transparent;
}

.jg-employer__input:focus {
	outline: 1px solid var(--jg-brand);
}

.jg-employer__actions {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

.jg-employer__note {
	margin: 10px 0 0;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.6);
}

/* ================================================================== buttons */
.jg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid transparent;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.jg-btn--primary {
	background-color: var(--jg-brand);
	color: #fff;
}

.jg-btn--primary:hover {
	background-color: var(--jg-accent-hover, #ff8a3d);
	color: #fff;
}

.jg-btn--outline {
	border-color: var(--jg-line);
	color: var(--jg-ink);
	background-color: #fff;
}

.jg-btn--outline:hover {
	border-color: var(--jg-brand);
	color: var(--jg-brand);
}

.jg-btn--quiet {
	background-color: var(--jg-light, #f1f4f7);
	color: var(--jg-ink);
}

.jg-btn--quiet:hover {
	color: var(--jg-brand);
}

/* ============================================================ data modules */
.jg-table-scroll {
	overflow-x: auto;
}

.jg-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.jg-table th,
.jg-table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--jg-line);
	text-align: left;
	white-space: nowrap;
}

.jg-table thead th {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--jg-ink-soft);
	border-bottom-width: 2px;
}

.jg-table tbody th {
	font-weight: 600;
	color: var(--jg-ink);
	white-space: normal;
}

.jg-table .jg-num {
	text-align: right;
	font-family: var(--jg-mono);
	color: var(--jg-ink);
}

.jg-table .jg-period,
.jg-table .jg-trend {
	color: var(--jg-ink-soft);
	font-size: 11px;
}

.jg-table .jg-trend {
	width: 64px;
}

.jg-col--metro {
	color: var(--jg-brand);
}

.jg-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.jg-tile {
	border: 1px solid var(--jg-line);
	padding: 8px;
	min-width: 0;
}

.jg-tile__label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--jg-ink-soft);
}

.jg-tile__value {
	display: block;
	margin-top: 3px;
	font-family: var(--jg-mono);
	font-size: 15px;
	font-weight: 700;
	color: var(--jg-ink);
}

.jg-tile__spark {
	display: block;
	height: 22px;
	margin-top: 4px;
	border-bottom: 1px dashed var(--jg-line);
}

.jg-heatmap {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
}

.jg-heatmap__cell {
	border: 1px solid var(--jg-line);
	background-color: var(--jg-light, #f1f4f7);
	padding: 8px;
	min-height: 58px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.jg-heatmap__label {
	font-size: 10px;
	line-height: 1.3;
	color: var(--jg-ink);
}

.jg-heatmap__value {
	font-family: var(--jg-mono);
	font-size: 11px;
	color: var(--jg-ink-soft);
}

.jg-heatmap__legend {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 10px;
	color: var(--jg-ink-soft);
}

.jg-heatmap__scale {
	flex: 1 1 auto;
	height: 5px;
	background: linear-gradient(90deg, #f3c6c2, #eceff3, #bfe3cd);
}

.jg-rank {
	margin-bottom: 14px;
}

.jg-rank__title {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.jg-rank__title--gainers {
	color: var(--jg-up);
}

.jg-rank__title--decliners {
	color: var(--jg-down);
}

.jg-rank__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jg-rank__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid var(--jg-line);
	font-size: 12px;
}

.jg-rank__num {
	font-family: var(--jg-mono);
	font-size: 10px;
	color: var(--jg-ink-soft);
}

.jg-rank__name {
	flex: 1 1 auto;
	color: var(--jg-ink);
}

.jg-rank__value {
	font-family: var(--jg-mono);
	color: var(--jg-ink-soft);
}

/* ============================================================= route shells */
.jg-route__lede {
	font-size: 15px;
	line-height: 1.65;
	color: var(--jg-ink-soft);
	max-width: 72ch;
}

.jg-route__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

/* ================================================================ responsive
   Newspaper handles page layout; these only reflow the JobGetr data grids.
   landscape 1019-1140, portrait 768-1018, phone <=767
   ========================================================================== */
@media (max-width: 1140px) {
	.jg-metric-row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.jg-employer__headline {
		font-size: 24px;
	}
}

@media (max-width: 1018px) {
	.jg-metric-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.jg-employer__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.jg-employer__caps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jg-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1140px) and (min-width: 1019px) {
	.jg-mcard__value {
		font-size: 18px;
	}
}

@media (max-width: 1140px) {
	/* Narrow columns: the donut legend takes the full width under the chart. */
	.jg-composition {
		grid-template-columns: 1fr;
	}

	.jg-composition__legend {
		font-size: 12px;
	}
}

@media (max-width: 767px) {
	.jg-mcard {
		min-height: 150px;
		padding: 10px 10px 8px;
	}

	.jg-mcard__value {
		font-size: 18px;
	}

	.jg-composition {
		grid-template-columns: 1fr;
	}

	.jg-metrohead__tiles {
		grid-template-columns: 1fr;
	}

	.jg-term--panel {
		padding: 14px 12px 12px;
	}

	.jg-prm__tool,
	.jg-prm__brief {
		padding: 18px;
	}

	.jg-prm__dropzone {
		min-height: 190px;
	}

	.jg-prm__drop-title {
		font-size: 23px;
	}

	.jg-prm__tiles {
		grid-template-columns: 1fr;
	}

	/* Eight persona cards become one swipeable row. */
	.jg-picks__grid {
		display: flex;
		gap: 14px;
		margin: 0 -16px;
		padding: 0 16px 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	.jg-pick {
		flex: 0 0 78%;
		max-width: 300px;
		padding: 18px 16px 14px;
		background: #ffffff;
		border: 1px solid var(--jg-line);
		scroll-snap-align: start;
	}

	.jg-pick::before,
	.jg-pick:nth-child(4n + 1)::before {
		display: none;
	}

	.jg-term__bar {
		padding: 12px 12px 10px;
	}

	.jg-term--table .jg-term__title {
		font-size: 22px;
	}

	.jg-table--terminal th,
	.jg-table--terminal td {
		padding: 8px 10px;
	}

	.jg-dash__legend {
		gap: 8px 14px;
	}

	.jg-dash__legend-item {
		flex-basis: 100%;
	}

	.jg-dash__legend-value {
		font-size: 16px;
	}

	.jg-ticker__inner {
		gap: 10px;
	}

	.jg-ticker__status {
		display: none;
	}

	.jg-metric-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jg-markets__bar {
		gap: 10px;
	}

	.jg-employer__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jg-employer__console {
		flex-direction: column;
	}

	.jg-employer__actions {
		flex-wrap: wrap;
	}

	.jg-employer__actions .jg-btn {
		flex: 1 1 100%;
	}

	.jg-tiles,
	.jg-heatmap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jg-metric__label {
		min-height: 0;
	}

	.jg-tv__title {
		font-size: 18px;
	}

	.jg-tv__brand {
		font-size: 18px;
	}

	.jg-ticker__brand {
		padding-right: 10px;
	}
}

/* ==================================================== premium catalog */
/* The Premium page's product grids: a name, a description and a status,
   laid out as structured blocks rather than cards. An item with a
   destination is an anchor and says so with an arrow; one without is a
   plain block, so nothing unavailable looks clickable. Status is text,
   never colour alone. */
.jg-pcat {
	display: grid;
	gap: 1px;
	margin-top: 22px;
	background: var(--jg-line);
	border: 1px solid var(--jg-line);
}

.jg-pcat--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jg-pcat--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The grid carries its own ink for the surface it sits on: the navy
   rows re-map --jg-ink for the modules they know about, and this one
   must not inherit the light-surface value onto a dark panel. */
.jg-pcat--on-navy {
	--jg-ink: #ffffff;
	--jg-ink-soft: rgba(255, 255, 255, 0.68);
	--jg-ink-faint: rgba(255, 255, 255, 0.5);

	background: #26395f;
	border-color: #26395f;
}

.jg-pcat--on-light {
	--jg-ink: var(--jg-navy, #131f49);
	--jg-ink-soft: var(--jg-gray, #717176);
	/* Dark enough for 4.5:1 on white: the status is small text and has
	   to be readable, not decorative. */
	--jg-ink-faint: #5c5c63;
}

.jg-pcat__item {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 20px 20px 18px;
	background: #0d2340;
	color: inherit !important;
	text-decoration: none !important;
	transition: background 0.15s ease;
}

.jg-pcat--on-light .jg-pcat__item {
	background: #ffffff;
}

a.jg-pcat__item:hover,
a.jg-pcat__item:focus {
	background: rgba(255, 106, 19, 0.09);
}

a.jg-pcat__item:focus-visible {
	outline: 2px solid var(--jg-brand, #ff6a13);
	outline-offset: -2px;
}

.jg-pcat__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.jg-pcat__name {
	font-size: 16.5px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--jg-ink);
}

.jg-pcat__arrow {
	flex: 0 0 auto;
	font-size: 14px;
	color: var(--jg-brand, #ff6a13);
}

.jg-pcat__text {
	font-size: 14px;
	line-height: 1.55;
	color: var(--jg-ink-soft);
}

.jg-pcat__status {
	margin-top: auto;
	padding-top: 10px;
	font-family: var(--jg-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jg-ink-faint, var(--jg-ink-soft));
}

.jg-pcat__status--available {
	color: var(--jg-brand, #ff6a13);
}

/* The brand orange does not clear 4.5:1 on white, so the light grids
   use its darker shade for the same signal. */
.jg-pcat--on-light .jg-pcat__status--available {
	color: #a3450b;
}

/* ---- public vs Premium */
.jg-pcat--compare {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jg-pcat__col {
	padding: 22px 22px 24px;
	background: #ffffff;
}

.jg-pcat__col--premium {
	border-top: 3px solid var(--jg-brand, #ff6a13);
}

.jg-pcat__col-title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--jg-ink);
}

.jg-pcat__col-note {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--jg-ink-soft);
}

.jg-pcat .jg-pcat__list {
	margin: 0;
	padding: 0 0 0 18px;
	list-style: disc;
}

.jg-pcat .jg-pcat__list li {
	margin: 0 0 7px;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--jg-ink);
	list-style: disc;
}

.jg-pcat .jg-pcat__list li::before {
	content: none;
}

/* ---- hero controls on the Premium page */
.jg-prm__availability {
	display: inline-block;
	margin-top: 4px;
	padding: 9px 14px;
	border-left: 3px solid var(--jg-brand, #ff6a13);
	background: rgba(255, 255, 255, 0.05);
	font-size: 14px;
	line-height: 1.5;
}

.jg-prm__hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.jobgetr-row--premium-hero .jg-prm__hero-btn,
.jobgetr-row--premium-explore .jg-prm__hero-btn {
	display: inline-flex;
	align-items: center;
	padding: 12px 22px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 2px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff !important;
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.jobgetr-row--premium-hero .jg-prm__hero-btn--primary,
.jobgetr-row--premium-explore .jg-prm__hero-btn--primary {
	border-color: var(--jg-brand, #ff6a13);
	background: var(--jg-brand, #ff6a13);
	color: #0b1426 !important;
}

.jobgetr-row--premium-hero .jg-prm__hero-btn:hover,
.jobgetr-row--premium-hero .jg-prm__hero-btn:focus,
.jobgetr-row--premium-explore .jg-prm__hero-btn:hover,
.jobgetr-row--premium-explore .jg-prm__hero-btn:focus {
	border-color: var(--jg-brand, #ff6a13);
	background: var(--jg-brand, #ff6a13);
	color: #0b1426 !important;
}

@media (max-width: 1018px) {
	.jg-pcat--cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	/* One column on phones: three- and two-up product blocks would be
	   unreadably narrow, and a status must stay with its product. */
	.jg-pcat--cols-3,
	.jg-pcat--cols-2,
	.jg-pcat--compare {
		grid-template-columns: minmax(0, 1fr);
	}

	.jg-pcat__item {
		padding: 16px 15px 15px;
	}

	.jg-pcat__name {
		font-size: 15.5px;
	}

	.jg-prm__hero-ctas {
		gap: 8px;
	}

	.jobgetr-row--premium-hero .jg-prm__hero-btn,
	.jobgetr-row--premium-explore .jg-prm__hero-btn {
		flex: 1 1 auto;
		justify-content: center;
		padding: 12px 16px;
	}
}

/* =====================================================  homepage hero rail
   Three sets of live series beside the headline, one set shown at a time.

   The rail itself is transparent: the hero navy runs behind it and stays
   visible in every gap, so these read as separate instruments on the page
   rather than one white panel laid over it. The viewport is a fixed
   height and the track moves inside it, so a change of set cannot move
   the headline or anything below the hero. */
.jg-hrail {
	--hrail-radius: 6px;
	--hrail-gap: 8px;
	--hrail-card-h: 92px;
	/* Colour comes from the shared dark tokens the Markets cards read
	   (--jg-ink, --jg-line, --jg-up, --jg-down), set on the row above, so
	   the two components cannot drift apart. Nothing is restated here. */

	box-sizing: border-box;
	width: 100%;
	background: transparent;
}

.jg-hrail * {
	box-sizing: border-box;
}

.jg-hrail__viewport {
	position: relative;
	/* Fixed: every set occupies exactly this, so rotation never reflows. */
	height: var(--hrail-card-h);
	overflow: hidden;
}

.jg-hrail__track {
	display: block;
	will-change: transform;
}

.jg-hrail__set {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--hrail-gap);
	height: var(--hrail-card-h);
	align-content: start;
}

/* The same surface a Markets card has - hairline border, a reading edge
   on the left, a tint that follows the metric's labor-economy reading -
   at the rail's own smaller size. Geometry is untouched. */
.jg-hrail__card {
	display: flex;
	flex-direction: column;
	height: var(--hrail-card-h);
	padding: 8px 9px 0;
	border: 1px solid var(--jg-line);
	border-left: 3px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--hrail-radius);
	background-color: rgba(255, 255, 255, 0.03);
	color: var(--jg-ink);
	overflow: hidden;
}

.jg-hrail__card--favorable {
	border-left-color: var(--jg-up);
	background-color: rgba(18, 96, 62, 0.34);
}

.jg-hrail__card--unfavorable {
	border-left-color: var(--jg-down);
	background-color: rgba(128, 32, 36, 0.34);
}

.jg-hrail__card--neutral,
.jg-hrail__card--none {
	border-left-color: rgba(255, 255, 255, 0.28);
	background-color: rgba(255, 255, 255, 0.05);
}

.jg-hrail__label {
	font-family: var(--jg-mono);
	font-size: 8.5px;
	font-weight: 700;
	/* Tracked just enough to read as a terminal label, and no more: these
	   are words rather than four-letter tickers, and the card is narrow. */
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jg-hrail__value {
	margin-top: 3px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--jg-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The change keeps its row whether or not the series publishes one, so
   every card in a set lines up. */
.jg-hrail__change {
	display: block;
	min-height: 13px;
	margin-top: 2px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--jg-ink-soft);
}

.jg-hrail__arrow {
	margin-right: 2px;
	font-size: 7.5px;
	vertical-align: 1px;
}

/* The "no change" dash stays on the soft ink rather than the faint step
   below it: at 10px on the tinted card the faint step measured 3.9:1, and
   at this size the dash has to stay legible. It is pinned here so it does
   not pick up the favorable or unfavorable hue - there is no change to
   colour. */
.jg-hrail__nochange {
	color: var(--jg-ink-soft);
}

/* Direction colour is the metric's labor-economy reading, not the sign of
   the number: falling layoffs read the same way as rising employment. */
.jg-hrail__card--favorable .jg-hrail__change {
	color: var(--jg-up);
}

.jg-hrail__card--unfavorable .jg-hrail__change {
	color: var(--jg-down);
}

.jg-hrail__spark {
	display: block;
	margin-top: auto;
}

.jg-hrail__spark .jg-spark {
	display: block;
	width: 100%;
	height: 26px;
}

/* The sparkline takes the Markets card's treatment: a light line by
   default, the reading's colour where there is one, and the brand dot on
   the latest point. Dimensions, data and window are untouched. */
.jg-hrail .jg-spark__line {
	stroke: rgba(255, 255, 255, 0.78);
}

.jg-hrail .jg-spark__dot {
	fill: var(--jg-brand);
}

.jg-hrail__card--favorable .jg-spark__line {
	stroke: var(--jg-up);
}

.jg-hrail__card--unfavorable .jg-spark__line {
	stroke: var(--jg-down);
}

/* Tablet: six cards fall under about 70px here, which starts truncating
   a seven-digit value, so the rail drops to five and eases the value down
   a step to keep every figure whole. */
@media (max-width: 1100px) {
	.jg-hrail__set {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.jg-hrail__card:nth-child(n + 6) {
		display: none;
	}

	.jg-hrail__card {
		padding-left: 7px;
		padding-right: 7px;
	}

	.jg-hrail__value {
		font-size: 13px;
	}

	.jg-hrail__label {
		font-size: 8px;
		letter-spacing: 0.015em;
	}
}

/* Phone: the rail sits under the copy, and the three leading measures of
   each set are the ones shown. The data is the same; only how much of it
   fits changes. */
@media (max-width: 767px) {
	.jg-hrail {
		--hrail-card-h: 86px;
		--hrail-gap: 7px;
	}

	.jg-hrail__set {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.jg-hrail__card:nth-child(n + 4) {
		display: none;
	}

	.jg-hrail__value {
		font-size: 14px;
	}
}

/* Nothing moves for a reader who asked for stillness: the first set stays
   put and the track is never transformed. */
@media (prefers-reduced-motion: reduce) {
	.jg-hrail__track {
		transition: none !important;
	}
}

/* The rail sits in the middle of its half of the hero rather than at the
   top of it.
   The two hero columns are floated blocks of their own content height -
   the headline and its paragraph make one tall, the rail's fixed viewport
   makes the other short - so there is nothing for the short one to centre
   against and no margin that would hold as the headline rewraps. Turning
   the row into a single flex line gives the shorter column a box to centre
   in: the 50/50 widths, the order and the columns' own padding are all
   left alone, and only the cross-axis placement changes.
   It is scoped to the landscape breakpoint and up, which is exactly where
   the two columns sit side by side. Below it they stack, and stacking is
   what should happen there, so the rule never reaches the phone layout.
   The row's own background is painted by an absolutely-positioned tagDiv
   overlay, which is out of flow and so is not a flex item. */
@media (min-width: 1019px) {
	.jobgetr-row--intro.td-pb-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
}

/* ================================================ premium: UAT Prompt 1 */
/* Homepage Premium band: the human-led headline with the subscription line
   under it, the pitch with the LLM entry point, and the capability grid -
   six outcome cards in two columns beside the Premium card spanning all
   three rows. Same navy surfaces, borders and brand rule as the suite pills
   they replace; no new palette. Dialogs (the "See it in action" demos and
   the LLM chooser) are native <dialog> elements inside the band, so they
   inherit its tokens. */

/* Masthead: the jobgetr.ai mark (the Ask panel's own asset) ahead of the
   heading text. The span keeps its Newspaper accent rules on either side. */
.jobgetr-row--ask-head .td-block-title > span {
	padding-left: 1.3em !important;
	background: url("../images/jobgetr-mark.png") no-repeat left 0.1em / auto 1em;
}

.jg-prm__headline-support {
	margin: 10px 0 0;
	max-width: 62ch;
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 400;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.62);
}

.jg-prm .jg-prm__pitch-sub {
	margin: 0;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.jg-prm .jg-prm__lede--quiet {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.62);
}

.jg-prm .jg-prm__llm-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 10px;
	background: transparent;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.jg-prm .jg-prm__llm-btn:hover {
	border-color: var(--jg-brand);
	color: var(--jg-brand);
}

.jg-prm .jg-prm__llm-btn:focus-visible,
.jg-prm .jg-prm-cap__demo:focus-visible,
.jg-prm .jg-prm-modal__close:focus-visible,
.jg-prm .jg-prm-llm__option:focus-visible,
.jg-prm-plan .jg-prm__cta:focus-visible {
	outline: 2px solid var(--jg-brand);
	outline-offset: 2px;
}

/* ---- capability grid */
.jg-prm-caps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.jg-prm-cap {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 18px 18px 16px;
	border: 1px solid #2c4470;
	border-left: 3px solid var(--jg-brand);
	border-radius: 6px;
	background: #13284c;
}

.jg-prm .jg-prm-cap__title {
	margin: 0;
	font-family: var(--global-font-3, Georgia, serif);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.jg-prm .jg-prm-cap__copy {
	flex: 1 1 auto;
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.66);
}

.jg-prm .jg-prm-cap__demo {
	align-self: flex-start;
	margin: 2px 0 0;
	padding: 2px 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--jg-brand);
	cursor: pointer;
}

.jg-prm .jg-prm-cap__demo:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The Premium card: third column, all three rows. */
.jg-prm-plan {
	grid-column: 3;
	grid-row: 1 / span 3;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 24px;
	border: 1px solid #3a5684;
	border-top: 3px solid var(--jg-brand);
	border-radius: 8px;
	background: #16305a;
}

.jg-prm-plan p {
	margin: 0;
}

.jg-prm .jg-prm-plan__title {
	margin: 0;
	font-family: var(--global-font-3, Georgia, serif);
	font-size: clamp(26px, 2.2vw, 32px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: #fff;
}

.jg-prm .jg-prm-plan__msg {
	font-size: 15.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.82);
}

/* Product UI, not illustration: a compact Premium report frame. */
.jg-prm-plan__preview {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px solid #26395f;
	border-radius: 8px;
	background: #0a1830;
}

.jg-prm-plan__bar {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-family: var(--jg-mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.jg-prm .jg-prm-plan__role {
	font-family: var(--global-font-3, Georgia, serif);
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}

.jg-prm-plan__tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.jg-prm-plan__tiles > div {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 8px;
	border: 1px solid #22385e;
	border-radius: 6px;
	background: #0f2446;
}

.jg-prm-plan__tiles span {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.jg-prm-plan__tiles strong {
	font-family: var(--jg-mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--jg-brand);
	overflow-wrap: anywhere;
}

.jg-prm-plan__ask {
	padding-top: 10px;
	border-top: 1px solid #22385e;
	font-family: var(--jg-mono);
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.8);
}

.jg-prm-plan__prompt {
	color: var(--jg-brand);
}

.jg-prm-plan__ask::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 13px;
	margin-left: 3px;
	vertical-align: -2px;
	background: var(--jg-brand);
	animation: jg-prm-caret 1.1s steps(1) infinite;
}

@keyframes jg-prm-caret {
	50% {
		opacity: 0;
	}
}

.jg-prm .jg-prm-plan__price {
	margin-top: 2px;
	font-size: 15px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
}

.jg-prm-plan__price strong {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
}

.jg-prm .jg-prm-plan__note {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}

.jg-prm-plan .jg-prm__cta-row {
	margin-top: auto;
	padding-top: 6px;
}

@media (max-width: 1018px) {
	.jg-prm-caps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jg-prm-plan {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

@media (max-width: 767px) {
	.jg-prm-caps {
		grid-template-columns: minmax(0, 1fr);
	}

	.jg-prm-cap {
		padding: 16px;
	}

	.jg-prm-plan {
		padding: 20px;
	}

	/* Phones: the sample tiles stack, so no bracketed value breaks mid-token,
	   and the CTA and its badge each keep to one line. */
	.jg-prm-plan__tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	.jg-prm-plan .jg-prm__cta-row {
		flex-wrap: wrap;
	}

	.jg-prm-plan .jg-prm__cta,
	.jg-prm-plan .jg-prm__badge {
		white-space: nowrap;
	}
}

/* ---- dialogs: "See it in action" demos and the LLM chooser */
.jg-prm-modal {
	width: min(680px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	border: 1px solid #26395f;
	border-radius: 14px;
	background: #0a1830;
	color: #fff;
	overflow: auto;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.jg-prm-modal::backdrop {
	background: rgba(5, 12, 28, 0.72);
}

.jg-prm-modal__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
}

.jg-prm-modal__inner p {
	margin: 0;
}

.jg-prm-modal__head {
	position: relative;
	padding-right: 44px;
}

.jg-prm .jg-prm-modal__title {
	margin: 4px 0 0;
	font-family: var(--global-font-3, Georgia, serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
}

.jg-prm .jg-prm-modal__close {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	background: transparent;
	font: inherit;
	font-size: 22px;
	line-height: 1;
	color: #fff;
	cursor: pointer;
}

.jg-prm .jg-prm-modal__close:hover {
	border-color: var(--jg-brand);
	color: var(--jg-brand);
}

.jg-prm .jg-prm-modal__lede {
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}

.jg-prm-modal__foot a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--jg-brand) !important;
	text-decoration: none !important;
}

.jg-prm-modal .jg-prm__fineprint {
	font-size: 12px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.5);
}

/* Demo: question -> what JobGetr does -> the result. */
.jg-prm-demo__flow {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jg-prm-demo__step {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0 0 0 14px;
	border-left: 2px solid #2c4470;
}

.jg-prm-demo__label {
	font-family: var(--jg-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-brand);
}

.jg-prm .jg-prm-demo__q {
	font-family: var(--global-font-3, Georgia, serif);
	font-size: 19px;
	line-height: 1.3;
	color: #fff;
}

.jg-prm-demo__does {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0 0 0 18px;
	font-size: 14px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.78);
}

.jg-prm-demo__result {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	border: 1px solid #22385e;
	border-radius: 8px;
	background: #0f2446;
}

.jg-prm-demo__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 6px;
	border-bottom: 1px solid #1d3256;
	font-size: 13.5px;
}

.jg-prm-demo__k {
	color: rgba(255, 255, 255, 0.66);
}

.jg-prm-demo__v {
	font-family: var(--jg-mono);
	text-align: right;
	color: #fff;
}

.jg-prm .jg-prm-demo__take {
	padding-top: 2px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}

/* The three steps arrive in sequence when the dialog opens. */
.jg-prm-demo[open] .jg-prm-demo__step {
	animation: jg-prm-step 0.45s ease both;
}

.jg-prm-demo[open] .jg-prm-demo__step:nth-child(2) {
	animation-delay: 0.35s;
}

.jg-prm-demo[open] .jg-prm-demo__step:nth-child(3) {
	animation-delay: 0.7s;
}

@keyframes jg-prm-step {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* LLM chooser. */
.jg-prm-llm__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.jg-prm .jg-prm-llm__option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	background: #0f2446;
	font: inherit;
	text-align: left;
	color: #fff;
	cursor: pointer;
}

.jg-prm .jg-prm-llm__option:hover,
.jg-prm .jg-prm-llm__option[aria-pressed="true"] {
	border-color: var(--jg-brand);
	background: #16305a;
}

.jg-prm-llm__name {
	font-size: 15px;
	font-weight: 700;
}

.jg-prm-llm__status {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.jg-prm-llm__panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px solid #22385e;
	border-radius: 8px;
	background: #0f2446;
}

.jg-prm-llm__panel[hidden] {
	display: none;
}

.jg-prm-llm__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.78);
}

.jg-prm-llm__steps li {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.jg-prm-llm__steps li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
}

.jg-prm-llm__steps li.is-done > span {
	border-color: var(--jg-brand);
	background: var(--jg-brand);
	color: #0b1426;
}

.jg-prm-llm__steps em {
	padding: 1px 6px;
	border: 1px dashed rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	font-size: 10.5px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.jg-prm .jg-prm-llm__note {
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 767px) {
	.jg-prm-modal__inner {
		padding: 18px;
	}

	.jg-prm .jg-prm-modal__title {
		font-size: 21px;
	}

	.jg-prm-llm__options {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jg-prm-demo[open] .jg-prm-demo__step {
		animation: none;
	}

	.jg-prm-plan__ask::after {
		animation: none;
	}

	.jg-prm .jg-prm__llm-btn {
		transition: none;
	}
}

/* =================================================== Atlanta Market Pulse
   UAT Prompt 2: one Atlanta experience on the homepage. Roles lead (the
   cycling Pay pulse), the headline readings and the drill-in sit beside
   them, and the former Markets band lives in the drill-in dialog. */

/* ---- roles: clickability cue and whole-row targets */
.jg-ranked__cue {
	margin: -2px 0 10px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--jg-ink-soft);
}

.jg-ranked__row--linked {
	position: relative;
	transition: background-color 0.15s ease;
}

/* The row's own link covers the row, so the whole row is the target. */
.jg-ranked__row--linked .jg-ranked__label a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.jg-ranked__row--linked:hover,
.jg-ranked__row--linked:focus-within {
	background-color: rgba(255, 255, 255, 0.05);
}

.jg-ranked__row--linked:hover .jg-ranked__label a,
.jg-ranked__row--linked:focus-within .jg-ranked__label a {
	color: var(--jg-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jg-ranked__row--linked .jg-ranked__label a:focus-visible {
	outline: none;
}

.jg-ranked__row--linked .jg-ranked__label a:focus-visible::after {
	outline: 2px solid var(--jg-brand);
	outline-offset: -2px;
}

/* ---- roles: the slow cycle (jobgetr-platform.js, ranked-list) */
/* Rows waiting their turn: the row's own display would otherwise beat the
   hidden attribute. */
.jg-ranked__row[hidden] {
	display: none;
}

.jg-ranked__list.is-cycling > .jg-ranked__row {
	overflow: hidden;
	transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1), padding 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease, border-color 0.7s ease;
}

/* UAT Phase 07C: rows tightened from 11px to 5px so the narrative and the roles
   end level with the tiles and the stories column; the cycle measures
   each row, so its moves are unaffected. */
.jobgetr-row--atlanta .jg-ranked[data-jg-set="occupations"][data-jg-cycle] .jg-ranked__row {
	padding: 5px 8px 5px 0;
}

/* The wide role column has room for the figure and its change on one line. */
.jobgetr-row--atlanta .jg-ranked[data-jg-set="occupations"][data-jg-cycle] .jg-ranked__figures {
	flex-direction: row;
	align-items: baseline;
	gap: 14px;
}

.jobgetr-row--atlanta .jg-ranked[data-jg-set="occupations"][data-jg-cycle] .jg-ranked__change {
	min-width: 92px;
	text-align: right;
}

.jobgetr-row--atlanta .jg-ranked[data-jg-set="occupations"][data-jg-cycle] .jg-ranked__label {
	font-size: 14px;
}

/* The roles lead the section: their heading reads one step up from the
   Industry pulse beside them. */
.jobgetr-row--atlanta .jg-ranked[data-jg-cycle] .jg-ranked__title {
	font-size: 15px;
}

/* INDUSTRY PULSE: the Pay pulse heading's size and weight, set in capitals
   (presentation only; the heading text stays "Industry pulse"). */
.jobgetr-row--atlanta .jg-ranked[data-jg-set="atlanta_sectors"] .jg-ranked__title {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ---- Atlanta Top Stories, above the Industry pulse */
.jobgetr-row--atlanta .jg-tv--atlanta {
	margin: 0 0 18px;
}

.jg-tv--atlanta .jg-tv__head {
	padding-bottom: 8px;
}

.jg-tv--atlanta .jg-tv__wordmark {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.jg-tv--atlanta .jg-tv__poster--story {
	display: block;
	text-decoration: none;
}

.jg-tv--atlanta .jg-tv__meta {
	padding-top: 10px;
}

.jg-tv--atlanta .jg-tv__title {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
}

.jg-tv--atlanta .jg-tv__title a {
	color: var(--jg-ink);
	text-decoration: none;
}

.jg-tv--atlanta .jg-tv__title a:hover,
.jg-tv--atlanta .jg-tv__title a:focus-visible,
.jg-tv__stories a:hover,
.jg-tv__stories a:focus-visible {
	color: var(--jg-brand);
}

.jg-tv--atlanta .jg-tv__foot {
	margin-top: 4px;
}

.jg-tv__stories {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--jg-line);
}

.jg-tv__stories li {
	margin: 0;
	padding: 7px 0;
	border-bottom: 1px solid var(--jg-line);
	font-size: 12.5px;
	line-height: 1.35;
}

.jg-tv__stories a {
	color: var(--jg-ink);
	text-decoration: none;
	font-weight: 600;
}

.jg-tv__stories time {
	display: block;
	margin-top: 2px;
	font-size: 10.5px;
	color: var(--jg-ink-soft);
}

/* ---- headline readings: one column beside the roles */
.jobgetr-row--atlanta .jg-metrohead--tiles .jg-metrohead__tiles {
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: 14px;
}

.jobgetr-row--atlanta .jg-metrohead--tiles .jg-metrohead__tile {
	padding: 11px 14px;
}

/* Latest / prior month: two published readings in one cell, crossfaded. */
.jg-flip {
	display: grid;
}

/* A quiet crossfade with a hint of lift: a change of reference period,
   not a quote tick. */
.jg-flip__face {
	grid-area: 1 / 1;
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.jg-flip__face--prior {
	opacity: 0;
	transform: translateY(12%);
}

.is-prior .jg-flip__face--now {
	opacity: 0;
	transform: translateY(-12%);
}

.is-prior .jg-flip__face--prior {
	opacity: 1;
	transform: none;
}

/* Latest / prior comparison beside an auto-alternating Glance chart (UAT
   Phase 02B): screen-reader text by default; under reduced motion, where
   the chart holds its latest month, a compact table on screen. */
.jg-period-compare {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.jg-period-compare {
		position: static;
		width: auto;
		height: auto;
		margin: 10px 0 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}

	/* The Glance table style: rules between rows only, no theme cell
	   borders, row labels at the table's own size. */
	.jg-period-compare .jg-table {
		margin-top: 0;
		border: 0;
	}

	.jg-period-compare .jg-table th,
	.jg-period-compare .jg-table td {
		border: 0;
		border-bottom: 1px solid var(--jg-line);
		font-size: 12px;
		line-height: 1.35;
	}

	.jg-period-compare .jg-table thead th {
		font-size: 10px;
	}

	.jg-period-compare caption {
		margin-bottom: 4px;
		caption-side: top;
		text-align: left;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--jg-ink-soft);
	}

	.jg-period-compare__note {
		margin: 6px 0 0;
		font-size: 11px;
		color: var(--jg-ink-soft);
	}
}

/* Glance charts that alternate by themselves (UAT Phase 02): the figures
   turn in step with the charts' own 450 ms easing. */
.jg-dash--chart .jg-flip__face,
.jg-dash--industries .jg-flip__face,
.jg-dash--composition .jg-flip__face {
	transition-duration: 0.45s;
	transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.jg-metrohead__when {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jg-ink-faint, var(--jg-ink-soft));
}

.is-prior .jg-metrohead__when {
	color: #7cc4ff;
}

/* ---- the drill-in opener */
.jg-atlrep {
	margin: 0 0 4px;
}

.jg-atlrep__open {
	box-sizing: border-box;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--jg-accent, #ff6a13);
	border-radius: 4px;
	background: transparent;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.jg-atlrep__open:hover {
	background: rgba(255, 106, 19, 0.16);
}

.jg-atlrep__open:focus-visible {
	outline: 2px solid var(--jg-accent, #ff6a13);
	outline-offset: 2px;
}

/* ---- the drill-in dialog (the shared .jg-prm-modal shell, wider) */
.jg-prm-modal.jg-atlrep__dialog {
	width: min(1240px, calc(100vw - 32px));
}

.jg-atlrep__eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.jg-atlrep__section {
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.jg-atlrep__dialog .jg-metrohead__subtitle,
.jg-atlrep__subtitle {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 800;
	color: #fff;
}

.jg-atlrep__cards {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 10px;
}

.jg-atlrep__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

@media (max-width: 1140px) {
	.jg-atlrep__cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1018px) {
	.jg-atlrep__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.jg-atlrep__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.jobgetr-row--atlanta .jg-ranked[data-jg-set="occupations"][data-jg-cycle] .jg-ranked__label {
		font-size: 13px;
	}

	/* Phones: figure and change stack again under a narrow column. */
	.jobgetr-row--atlanta .jg-ranked[data-jg-set="occupations"][data-jg-cycle] .jg-ranked__figures {
		flex-direction: column;
		align-items: flex-end;
		gap: 2px;
	}

	.jobgetr-row--atlanta .jg-ranked[data-jg-set="occupations"][data-jg-cycle] .jg-ranked__change {
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jg-ranked__list.is-cycling > .jg-ranked__row,
	.jg-ranked__row--linked,
	.jg-flip__face,
	.jg-atlrep__open {
		transition: none;
	}
}

/* ================================================== UAT Phase 08E.1: a11y
   Contrast, keyboard focus and motion controls on the homepage and Markets
   JobGetr surfaces. Scoped to JobGetr rows and modules; the site orange
   (#ff6a13) stays the brand colour on navy, and small text or focus rings
   on light surfaces use the deeper on-brand orange #b84a0a (4.7:1 or more
   on white, #f1f4f7 and the terminal's selected-row tint). */

/* Section-level Pause motion: the title keeps the row, its rule shortens to
   make room, and the control sits at the end of the rule. Row and column
   classes outrank tagDiv's own ".tdi_N > .wpb_wrapper { display: block }". */
.jobgetr-row.jobgetr-row--dashboard-head .vc_column > .wpb_wrapper,
.jobgetr-row.jobgetr-row--atlanta-head .vc_column > .wpb_wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 16px;
}

.jobgetr-row--dashboard-head .wpb_wrapper > .td_block_title,
.jobgetr-row--atlanta-head .wpb_wrapper > .td_block_title {
	flex: 1 1 0;
	min-width: 0;
}

.jobgetr-row--dashboard-head .wpb_wrapper > :not(.td_block_title):not(.jg-motion-toggle),
.jobgetr-row--atlanta-head .wpb_wrapper > :not(.td_block_title):not(.jg-motion-toggle) {
	flex: 1 1 100%;
}

.jg-motion-toggle--section {
	align-self: center;
	margin-bottom: 6px;
	color: rgba(255, 255, 255, 0.64);
}

/* Phones: the title keeps the full width (and its rule); the control takes
   its own line beneath, at the right. */
@media (max-width: 767px) {
	.jobgetr-row--dashboard-head .wpb_wrapper > .td_block_title,
	.jobgetr-row--atlanta-head .wpb_wrapper > .td_block_title {
		flex-basis: 100%;
	}

	.jg-motion-toggle--section {
		margin: -4px 0 8px auto;
	}
}

.jg-motion-toggle--section:hover,
.jg-motion-toggle--section:focus-visible {
	color: #ffffff;
}

/* Glance chart ranges on navy: the chart figure keeps the light-surface
   ink, so the idle ranges read #717176 (3.65:1) and hover went to navy. */
.jobgetr-row--dashboard .jg-chart__range:not(.is-active) {
	color: rgba(255, 255, 255, 0.64);
}

.jobgetr-row--dashboard .jg-chart__range:not(.is-active):hover,
.jobgetr-row--dashboard .jg-chart__range:not(.is-active):focus-visible {
	color: #ffffff;
}

/* Industries / occupations terminal (light): the active pills read dark on
   the brand orange, as the Glance pills do (white was 2.87:1). */
.jg-term__ranges .jg-chart__range.is-active,
.jg-term__mode.is-active {
	color: #0b0f18;
}

.jg-table--terminal tbody tr.is-selected th a,
.jg-table--terminal tbody tr[data-jg-entity]:hover th a,
.jg-table--terminal tbody tr[data-jg-entity]:focus-within th a,
.jg-table--terminal tbody tr[data-jg-entity]:hover td[data-jg-cell$="level"],
.jg-table--terminal tbody tr[data-jg-entity]:focus-within td[data-jg-cell$="level"],
.jg-table--terminal tbody tr[data-jg-entity]:hover td[data-jg-mode-cell]:not(:has(.jg-change)),
.jg-table--terminal tbody tr[data-jg-entity]:focus-within td[data-jg-mode-cell]:not(:has(.jg-change)) {
	color: #b84a0a;
}

/* The selected row's tint lowers the up/down inks below 4.5:1; one step
   deeper there, still green and red. */
.jg-table--terminal tbody tr.is-selected {
	--jg-up: #0f7a47;
	--jg-down: #c62828;
}

.jg-term__meta,
.jg-pick__domain,
.jg-picks__note {
	color: #5c5c63;
}

.jg-pick__category {
	color: #b84a0a;
}

.jg-term .jg-source a {
	color: var(--jg-negative, #d92d20);
}

/* Keyboard focus: every interactive element in these surfaces shows a
   2px ring - brand orange on navy (6.2:1), #b84a0a on light (4.7:1 or
   more) - and scrolls clear of the sticky header. */
:is(.jobgetr-row--dashboard-head, .jobgetr-row--dashboard, .jobgetr-row--atlanta-head, .jobgetr-row--atlanta) :is(a[href], button, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid var(--jg-accent, #ff6a13);
}

:is(.jg-markets-surface, .jg-mk__body, .jg-picks, .jg-term) :is(a[href], button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid #b84a0a;
}

:is(.jobgetr-row--dashboard-head, .jobgetr-row--dashboard, .jobgetr-row--atlanta-head, .jobgetr-row--atlanta, .jg-markets-surface, .jg-mk__body, .jg-picks, .jg-term) :is(a[href], button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])) {
	scroll-margin-top: 104px;
	scroll-margin-bottom: 24px;
}

.jg-motion-toggle--light {
	color: #5c5c63;
}

.jg-motion-toggle--light:hover,
.jg-motion-toggle--light:focus-visible {
	color: #111318;
}

/* UAT Phase 08E.2: a motion control keeps its place before it is revealed
   (invisible, out of the tab order and the accessibility tree), so showing
   it once motion starts never moves the layout; under reduced motion it is
   absent altogether, as nothing moves. */
.jg-motion-toggle[hidden] {
	display: inline-block;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.jg-motion-toggle,
	.jg-motion-toggle[hidden] {
		display: none;
	}
}

/* UAT Phase 08E.3: Pause ticker / Pause indicators. The ticker's control
   closes its row, divided like its status note; the travel stops where it
   is (animation-play-state) and resumes from there. The hero rail's sits
   in a short line under the cards, at the right. Both in the rows' soft
   ink (7.7:1 on navy) with the orange focus ring. */
.jg-motion-toggle--ticker {
	flex: 0 0 auto;
	align-self: center;
	padding: 2px 0 2px 14px;
	border-left: 1px solid var(--jg-line);
	border-radius: 0;
}

.jg-ticker.is-animated[data-jg-motion-held] .jg-ticker__rail {
	animation-play-state: paused;
}

.jg-hrail__controls {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
	line-height: 1;
}

:is(.jobgetr-row--ticker, .jobgetr-row--intro) .jg-motion-toggle:focus-visible {
	outline: 2px solid var(--jg-accent, #ff6a13);
	outline-offset: 2px;
}

/* Phones: the ticker control reads "Pause" / "Resume" so the strip keeps
   its room; "ticker" stays for screen readers. */
@media (max-width: 767px) {
	.jg-motion-toggle--ticker .jg-motion-toggle__noun {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.jg-motion-toggle--ticker {
		padding-left: 10px;
	}
}