/*
 * Components.
 *
 * Translated from the Figma design language sheet (node 1:2) into plain CSS on
 * the generated tokens. Every value here traces to a Figma measurement, and the
 * node id is noted against each block so it can be checked against the design.
 *
 * Padding values such as 13px 22px are the real Figma numbers, not multiples of
 * the spacing scale. They are kept exact rather than rounded to a token.
 */

.vj-icon {
	display: block;
	flex: 0 0 auto;
}

/* -------------------------------------------------------------- Buttons -- */
/* Figma 1:44, 1:49, 1:51, 1:55 - all 45px tall: 13px padding + 19px line. */

.vj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vj-space-8);
	padding: 13px 22px;
	border: 0;
	border-radius: var(--vj-radius-md);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-15-size);
	font-weight: var(--vj-text-label-15-weight);
	line-height: var(--vj-text-label-15-line);
	text-decoration: none;
	cursor: pointer;
	/* WCAG 2.2 target size. The design is 45px; this guards against shrinking. */
	min-height: 44px;
}

/* Primary. Dark text on orange, which is the brand rule and also the only way
   this passes contrast: white on #fc6e10 would not. */
.vj-btn--primary {
	background: var(--vj-brand-orange);
	color: var(--vj-text-primary);
}

.vj-btn--primary:hover {
	background: var(--vj-state-orange-hover);
}

/* Secondary, for the main action on a light card. Figma 1:49. */
.vj-btn--secondary {
	background: var(--vj-brand-navy);
	color: var(--vj-text-on-dark);
}

.vj-btn--secondary:hover {
	background: var(--vj-state-navy-hover);
}

/* Outline, used for Save. 1.5px border, not 1px. Figma 1:51. */
.vj-btn--outline {
	background: var(--vj-surface-card);
	border: 1.5px solid var(--vj-border-default);
	color: var(--vj-text-primary);
}

.vj-btn--outline:hover {
	border-color: var(--vj-border-strong);
}

/* Quiet, for secondary actions such as Preview. Figma 1:55. */
.vj-btn--quiet {
	background: var(--vj-surface-page);
	color: var(--vj-text-primary);
}

.vj-btn--quiet:hover {
	background: var(--vj-border-default);
}

.vj-btn[aria-disabled="true"],
.vj-btn:disabled {
	background: var(--vj-surface-page);
	color: var(--vj-text-disabled);
	cursor: not-allowed;
}

/* ---------------------------------------------------------------- Chips -- */
/* Figma 1:57 selected, 1:59 default. 32px tall: 7px padding + 18px line. */

.vj-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--vj-space-4);
	padding: 7px 13px;
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-full);
	background: var(--vj-surface-card);
	color: var(--vj-text-secondary);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
	line-height: var(--vj-text-body-13-line);
	text-decoration: none;
	white-space: nowrap;
}

/* On a job card the chip sits on the page colour with no visible edge. */
.vj-chip--flat {
	background: var(--vj-surface-page);
	border-color: var(--vj-surface-page);
}

.vj-chip--selected {
	background: var(--vj-brand-navy);
	border-color: var(--vj-brand-navy);
	color: var(--vj-text-on-dark);
}

/* A chip that is a link or button must still meet the 44px touch rule, which
   the 32px design does not. The target is extended above and below rather than
   making the chip taller, so the design itself is unchanged. */
a.vj-chip,
button.vj-chip {
	position: relative;
}

a.vj-chip::after,
button.vj-chip::after {
	content: "";
	position: absolute;
	inset: -6px 0;
}

/* --------------------------------------------------------------- Badges -- */
/* Figma 1:61. Asymmetric padding: 8px left, 10px right. */

.vj-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--vj-space-4);
	padding: var(--vj-space-4) 10px var(--vj-space-4) var(--vj-space-8);
	border-radius: var(--vj-radius-full);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-12-size);
	font-weight: var(--vj-text-label-12-weight);
	line-height: var(--vj-text-label-12-line);
	white-space: nowrap;
}

/* Green is only ever used for a fact that has actually been checked. */
.vj-badge--verified {
	background: var(--vj-status-success-soft);
	color: var(--vj-status-success);
}

.vj-badge--danger {
	background: var(--vj-status-danger-soft);
	color: var(--vj-status-danger);
}

/* ------------------------------------------------------------- Job card -- */
/* Figma 1:72. 20px padding, 16px gap, 18px radius. */

.vj-job-card {
	position: relative;
	display: grid;
	/* Logo, then everything else, then the bookmark and date column. */
	grid-template-columns: 48px minmax(0, 1fr) auto;
	grid-template-areas:
		"logo  head  aside"
		".     facts aside"
		".     tags  aside";
	row-gap: 7px;
	column-gap: var(--vj-space-16);
	align-items: start;
	padding: var(--vj-space-20);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

.vj-job-card__logo { grid-area: logo; }
.vj-job-card__head { grid-area: head; }
.vj-job-card__aside { grid-area: aside; }
.vj-job-card__facts { grid-area: facts; }
.vj-job-card__tags { grid-area: tags; }

.vj-job-card__head {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.vj-job-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: var(--vj-radius-md);
	background: var(--vj-surface-soft-blue);
	color: var(--vj-brand-navy);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-4-size);
	font-weight: 700;
	line-height: var(--vj-text-heading-4-line);
	letter-spacing: var(--vj-text-heading-4-tracking);
	overflow: hidden;
}

.vj-job-card__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vj-job-card__title {
	margin: 0;
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-16-size);
	font-weight: 700;
	line-height: var(--vj-text-label-16-line);
	color: var(--vj-text-primary);
}

.vj-job-card__title a {
	color: inherit;
	text-decoration: none;
}

.vj-job-card__title a:hover {
	text-decoration: underline;
}

/* The whole card is clickable, but the title stays the real link so the
   destination is announced properly and it works without JavaScript. */
.vj-job-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vj-job-card__employer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vj-space-8);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-text-secondary);
}

.vj-job-card__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px var(--vj-space-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-job-card__fact {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-text-secondary);
}

.vj-job-card__fact .vj-icon {
	color: var(--vj-text-muted);
}

.vj-job-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vj-job-card__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--vj-space-8);
	align-self: stretch;
	height: 100%;
}

/* Sits above the card-wide title link so it stays clickable on its own. */
.vj-job-card__save {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -12px -12px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vj-text-muted);
	cursor: pointer;
}

.vj-job-card__save:hover {
	color: var(--vj-brand-navy);
}

.vj-job-card__posted {
	font-size: var(--vj-text-body-12-size);
	line-height: var(--vj-text-body-12-line);
	color: var(--vj-text-muted);
	white-space: nowrap;
}

/* The phone card is a tighter composition, not just a reflow of the desktop
   one. Figma 4:95: 16px padding, a 44px logo, a 15px title, the facts and tags
   running the full width, and no posted date. */
@media (max-width: 600px) {
	.vj-job-card {
		grid-template-columns: 44px minmax(0, 1fr) auto;
		grid-template-areas:
			"logo  head  aside"
			"facts facts facts"
			"tags  tags  tags";
		row-gap: 10px;
		column-gap: var(--vj-space-12);
		padding: var(--vj-space-16);
	}

	.vj-job-card__logo {
		width: 44px;
		height: 44px;
		border-radius: 11px;
	}

	.vj-job-card__head {
		gap: 5px;
	}

	.vj-job-card__title {
		font-size: var(--vj-text-label-15-size);
	}

	/* Keep the employer name and its badge on one line, shortening the name
	   rather than pushing the badge onto a line of its own. */
	.vj-job-card__employer {
		flex-wrap: nowrap;
		gap: 6px;
	}

	.vj-job-card__employer > span:first-child {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The verified badge shrinks with everything else. */
	.vj-job-card__employer .vj-badge {
		padding: 3px 9px 3px 7px;
		font-size: var(--vj-text-label-11-size);
	}

	.vj-job-card__employer .vj-badge .vj-icon {
		width: 12px;
		height: 12px;
	}

	.vj-job-card__facts {
		gap: 6px 14px;
	}

	.vj-job-card__fact .vj-icon {
		width: 14px;
		height: 14px;
	}

	.vj-job-card__aside {
		align-self: start;
		height: auto;
	}

	.vj-job-card__save {
		margin: -12px -12px 0 0;
	}

	/* Dropped on a phone to keep the card short, exactly as the design does.
	   Both are still shown in full on the job page itself. */
	.vj-job-card__posted,
	.vj-job-card__per,
	.vj-job-card__fact--exp {
		display: none;
	}
}

/* ---------------------------------------------------------------- Stamp -- */
/* Figma 30:154. The one deliberately bold element in the whole design. */

.vj-stamp {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 153px;
	height: 153px;
	padding: var(--vj-space-12);
	border: 3px solid var(--vj-status-success);
	border-radius: var(--vj-radius-full);
	color: var(--vj-status-success);
	text-align: center;
	transform: rotate(-8deg);
}

.vj-stamp__small {
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-12-size);
	font-weight: 700;
	line-height: var(--vj-text-label-12-line);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vj-stamp__big {
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- Header -- */
/* Figma 1:170 (Nav). White, bottom border, 80px side padding, 20px vertical. */

.vj-header {
	background: var(--vj-surface-card);
	border-bottom: 1px solid var(--vj-border-default);
}

.vj-header__inner {
	display: flex;
	align-items: center;
	gap: 36px;
	min-height: 0;
	padding-block: var(--vj-space-20);
}

.vj-header__logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.vj-header__logo img {
	display: block;
	width: 185px;
	height: 38px;
	object-fit: contain;
}

.vj-header__nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-header__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-15-size);
	font-weight: 500;
	line-height: var(--vj-text-body-15-line);
	text-decoration: none;
}

.vj-header__nav a:hover {
	color: var(--vj-text-primary);
}

/* The section you are in is bold and full strength, not underlined. */
.vj-header__nav .current-menu-item > a,
.vj-header__nav a[aria-current] {
	color: var(--vj-text-primary);
	font-weight: 700;
}

.vj-header__spacer {
	flex: 1 1 auto;
}

.vj-header__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--vj-space-12);
}

/* Header buttons are shorter than the standard 45px one. Figma 1:183, 1:185. */
.vj-btn--sm {
	min-height: 0;
	padding: 10px 18px;
}

.vj-header__toggle {
	display: none;
}

/* The links and buttons collapse behind a menu button, which is a full 44px
   target. The switch happens at 1024px, not lower: the logo, five links and
   two buttons need about 985px, so anything narrower scrolls sideways. */
@media (max-width: 1023px) {
	.vj-header__inner {
		gap: var(--vj-space-16);
	}

	.vj-header__nav,
	.vj-header__actions {
		display: none;
	}

	/* Scoped to .vj-js: with no script the button could not open anything, and
	   the menu below the header is already open instead. */
	.vj-js .vj-header__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-left: auto;
		padding: 0;
		border: 0;
		border-radius: var(--vj-radius-md);
		background: var(--vj-surface-page);
		color: var(--vj-text-primary);
		cursor: pointer;
	}

	.vj-header__logo img {
		width: 148px;
		height: 30px;
	}
}

/* ----------------------------------------------------------- Search bar -- */
/* Figma 1:191. Two fields and a button in one white bar. */

.vj-search {
	display: flex;
	align-items: center;
	gap: 0;
	padding: var(--vj-space-8);
	background: var(--vj-surface-card);
	/* A slightly stronger edge than border/default, mixed from the two border
	   tokens rather than written in as a colour of its own. */
	border: 1px solid color-mix(in srgb, var(--vj-border-default) 70%, var(--vj-border-strong));
	border-radius: var(--vj-radius-lg);
	box-shadow: var(--vj-shadow-card);
}

.vj-search__field {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 14px var(--vj-space-16);
}

/* The location field is a fixed width beside the flexible job title one. */
.vj-search__field--where {
	flex: 0 0 210px;
}

.vj-search__field .vj-icon {
	color: var(--vj-text-muted);
}

.vj-search__input {
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vj-text-primary);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-body-16-size);
	line-height: var(--vj-text-body-16-line);
}

.vj-search__input::placeholder {
	color: var(--vj-text-muted);
	opacity: 1;
}

.vj-search__input:focus {
	outline: none;
}

/* Focus lands on the input, but the ring belongs around the whole field so it
   is not lost inside the bar. */
.vj-search__field:focus-within {
	outline: 2px solid var(--vj-state-focus-ring);
	outline-offset: -2px;
	border-radius: var(--vj-radius-md);
}

.vj-search__divider {
	flex: 0 0 auto;
	width: 1px;
	height: 34px;
	background: var(--vj-border-default);
}

.vj-search__submit {
	flex: 0 0 auto;
	padding: 15px var(--vj-space-24);
}

/* On a phone the bar stacks: each field on its own line, then the button.
   Figma 86:17 does the same on tablet. */
@media (max-width: 780px) {
	.vj-search {
		flex-direction: column;
		align-items: stretch;
		gap: var(--vj-space-8);
	}

	.vj-search__field--where {
		flex: 1 1 auto;
	}

	.vj-search__divider {
		width: auto;
		height: 1px;
	}

	.vj-search__submit {
		width: 100%;
	}
}

/* ---------------------------------------------------------- Form fields -- */
/* Figma 9:330 field, 83:122 error state. */

.vj-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.vj-field__label {
	color: var(--vj-text-primary);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-13-size);
	font-weight: var(--vj-text-label-13-weight);
	line-height: var(--vj-text-label-13-line);
}

.vj-field__hint {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
}

.vj-field__control {
	width: 100%;
	padding: var(--vj-space-12) 14px;
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-md);
	color: var(--vj-text-primary);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-body-15-size);
	font-weight: 500;
	line-height: var(--vj-text-body-15-line);
}

.vj-field__control::placeholder {
	color: var(--vj-text-muted);
	opacity: 1;
}

textarea.vj-field__control {
	min-height: 120px;
	resize: vertical;
}

/* A field in error gets a heavier red edge, not just red text, so it is not
   colour alone that signals the problem. */
.vj-field--error .vj-field__control {
	border: 1.5px solid var(--vj-status-danger);
}

.vj-field__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: var(--vj-status-danger-ink);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
	line-height: var(--vj-text-body-13-line);
}

/* --------------------------------------------------------------- Notice -- */
/* Figma 92:351. Radius 14 is not on the scale; kept as drawn. */

.vj-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 13px var(--vj-space-16);
	border-radius: 14px;
	background: var(--vj-surface-soft-blue);
	color: var(--vj-brand-navy);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
	line-height: var(--vj-text-body-13-line);
}

.vj-notice--success {
	background: var(--vj-status-success-soft);
	color: var(--vj-status-success-ink);
}

.vj-notice--danger {
	background: var(--vj-status-danger-soft);
	color: var(--vj-status-danger-ink);
}

.vj-notice__body {
	flex: 1 1 auto;
	min-width: 0;
}

.vj-notice__body p {
	margin: 0;
}

/* ----------------------------------------------------------- Breadcrumb -- */
/* Figma 38:17. */

.vj-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
}

.vj-breadcrumb a {
	color: var(--vj-text-secondary);
	text-decoration: none;
}

.vj-breadcrumb a:hover {
	text-decoration: underline;
}

.vj-breadcrumb li[aria-current="page"] {
	color: var(--vj-text-muted);
}

.vj-breadcrumb__sep {
	color: var(--vj-text-muted);
}

/* ----------------------------------------------------------- Pagination -- */
/* Figma 54:518. 42px squares with a 10px radius, off the scale. */

.vj-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--vj-space-8);
}

.vj-pagination__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--vj-border-default);
	border-radius: 10px;
	background: var(--vj-surface-card);
	color: var(--vj-text-primary);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-14-size);
	font-weight: var(--vj-text-label-14-weight);
	line-height: var(--vj-text-label-14-line);
	text-decoration: none;
}

.vj-pagination__page:hover {
	border-color: var(--vj-border-strong);
}

.vj-pagination__page[aria-current="page"] {
	background: var(--vj-brand-navy);
	border-color: var(--vj-brand-navy);
	color: var(--vj-text-on-dark);
}

.vj-pagination__gap {
	color: var(--vj-text-muted);
	padding-inline: var(--vj-space-4);
}

.vj-pagination__next {
	padding: 10px var(--vj-space-16);
	font-size: var(--vj-text-label-14-size);
}

/* ------------------------------------------------------------ Stat tile -- */
/* Figma 51:20. Radius 16, off the scale. */

.vj-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: 14px;
}

.vj-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--vj-space-16) var(--vj-space-20);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: 16px;
}

.vj-stat__value {
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-1-size);
	font-weight: 800;
	line-height: var(--vj-text-heading-1-line);
	letter-spacing: var(--vj-text-heading-1-tracking);
	color: var(--vj-text-primary);
}

.vj-stat__label {
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
	line-height: var(--vj-text-body-13-line);
	color: var(--vj-text-secondary);
}

/* -------------------------------------------------------- Category tile -- */

/* Figma 1:368. The tile lays out sideways, icon then text, 308px wide in the
   design; here it flexes so the row fills whatever width there is. */
.vj-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: var(--vj-space-16);
}

.vj-tile {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: var(--vj-space-20);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
	text-decoration: none;
}

.vj-tile:hover {
	border-color: var(--vj-border-strong);
}

/* The tint cycles through three soft colours down the grid, set per tile from
   vj_category_tint(), so the row reads as one set rather than eight choices. */
.vj-tile__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 11px;
	border-radius: var(--vj-radius-md);
	background: var(--vj-tile-tint, var(--vj-surface-soft-blue));
	color: var(--vj-brand-navy);
}

.vj-tile__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vj-tile__name {
	color: var(--vj-text-primary);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-15-size);
	font-weight: 700;
	line-height: var(--vj-text-label-15-line);
}

.vj-tile__count {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
}

/* ---------------------------------------------------------- Empty state -- */
/* Figma 54:47. Never a dead end: it always offers a way forward. */

.vj-empty {
	display: flex;
	align-items: flex-start;
	gap: 36px;
	padding: 36px var(--vj-space-40);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-xl);
}

.vj-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 88px;
	height: 88px;
	border-radius: var(--vj-radius-full);
	background: var(--vj-surface-soft-blue);
	color: var(--vj-brand-navy);
}

.vj-empty__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.vj-empty__title {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: 700;
	line-height: var(--vj-text-heading-2-line);
	letter-spacing: var(--vj-text-heading-2-tracking);
	color: var(--vj-text-primary);
}

.vj-empty__text {
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
}

.vj-empty__suggestions {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-empty__suggestions li + li {
	border-top: 1px solid var(--vj-border-default);
}

.vj-empty__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vj-space-12);
	padding-block: var(--vj-space-12);
	text-decoration: none;
}

.vj-empty__link span:first-child {
	display: flex;
	align-items: center;
	gap: var(--vj-space-8);
	color: var(--vj-brand-navy);
	font-size: var(--vj-text-label-15-size);
	font-weight: var(--vj-text-label-15-weight);
	line-height: var(--vj-text-label-15-line);
}

.vj-empty__link:hover span:first-child {
	text-decoration: underline;
}

.vj-empty__count {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
	white-space: nowrap;
}

.vj-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-12);
	padding-top: var(--vj-space-8);
}

@media (max-width: 700px) {
	.vj-empty {
		flex-direction: column;
		gap: var(--vj-space-20);
		padding: var(--vj-space-24);
	}

	.vj-empty__icon {
		width: 64px;
		height: 64px;
	}
}

/* --------------------------------------------------------------- Footer -- */
/* Figma 1:719. */

.vj-footer {
	margin-top: var(--vj-space-64);
	padding-block: var(--vj-space-48);
	background: var(--vj-surface-footer);
}

.vj-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr);
	gap: var(--vj-space-32);
}

.vj-footer__about p {
	margin: var(--vj-space-12) 0 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
	max-width: 34ch;
}

.vj-footer__heading {
	margin: 0 0 var(--vj-space-12);
	color: var(--vj-text-primary);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-13-size);
	font-weight: var(--vj-text-label-13-weight);
	line-height: var(--vj-text-label-13-line);
}

.vj-footer ul {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-footer a {
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
	text-decoration: none;
}

.vj-footer a:hover {
	color: var(--vj-text-primary);
	text-decoration: underline;
}

.vj-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vj-space-12);
	margin-top: var(--vj-space-32);
	padding-top: var(--vj-space-20);
	border-top: 1px solid var(--vj-border-default);
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size);
	line-height: var(--vj-text-body-12-line);
}

/* Five columns need real width; below this they read as cramped slivers. */
@media (max-width: 1023px) {
	.vj-footer__cols {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--vj-space-24);
	}

	.vj-footer__about {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	.vj-footer__cols {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------- Mobile tab bar -- */
/* Figma 4:505. Fixed to the bottom on phones only. */

.vj-tabbar {
	display: none;
}

@media (max-width: 780px) {
	.vj-tabbar {
		position: fixed;
		inset: auto 0 0;
		z-index: 20;
		display: flex;
		justify-content: space-around;
		padding: var(--vj-space-8) var(--vj-space-8) max(var(--vj-space-8), env(safe-area-inset-bottom));
		background: var(--vj-surface-card);
		border-top: 1px solid var(--vj-border-default);
	}

	.vj-tabbar__item {
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: 44px;
		padding: 4px;
		color: var(--vj-text-muted);
		font-size: var(--vj-text-label-11-size);
		font-weight: var(--vj-text-label-11-weight);
		line-height: var(--vj-text-label-11-line);
		text-decoration: none;
	}

	.vj-tabbar__item[aria-current] {
		color: var(--vj-brand-navy);
	}

	/* Keep the tab bar from covering the end of the page. */
	body.vj-has-tabbar {
		padding-bottom: 76px;
	}
}

/* ----------------------------------------------------------- Home page -- */

/* Hero. Figma 1:187. The banner gradient runs pale blue to pale orange. */
.vj-hero {
	background: linear-gradient(120deg, var(--vj-surface-hero-start) 0%, var(--vj-surface-hero-end) 100%);
}

.vj-hero__inner {
	padding-block: var(--vj-space-64) var(--vj-space-48);
}

.vj-hero__title {
	max-width: 16ch;
	margin: 0 0 var(--vj-space-16);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-display-xl-size);
	font-weight: 800;
	line-height: var(--vj-text-display-xl-line);
	letter-spacing: var(--vj-text-display-xl-tracking);
	color: var(--vj-text-primary);
}

.vj-hero__lead {
	max-width: 52ch;
	margin: 0 0 var(--vj-space-32);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-18-size);
	line-height: var(--vj-text-body-18-line);
}

.vj-hero .vj-search {
	max-width: 660px;
}

.vj-hero__popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vj-space-8);
	margin: var(--vj-space-20) 0 0;
}

.vj-hero__popular-label {
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
}

@media (max-width: 780px) {
	.vj-hero__inner {
		padding-block: var(--vj-space-32);
	}

	.vj-hero__title {
		font-size: var(--vj-text-heading-1-size);
		line-height: var(--vj-text-heading-1-line);
		letter-spacing: var(--vj-text-heading-1-tracking);
	}

	.vj-hero__lead {
		font-size: var(--vj-text-body-15-size);
		margin-bottom: var(--vj-space-20);
	}
}

/* Trust strip. Figma 1:334. */
.vj-trust {
	background: var(--vj-surface-card);
	border-bottom: 1px solid var(--vj-border-default);
}

.vj-trust__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: var(--vj-space-24);
	padding-block: var(--vj-space-32);
}

.vj-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--vj-space-12);
}

/* Figma 56:479: an orange-soft box, radius 14, 12px padding, 24px icon. */
.vj-trust__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: var(--vj-space-12);
	border-radius: 14px;
	background: var(--vj-brand-orange-soft);
	color: var(--vj-brand-orange-ink);
}

.vj-trust__title {
	margin: 0 0 2px;
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-15-size);
	font-weight: 700;
	line-height: var(--vj-text-label-15-line);
	color: var(--vj-text-primary);
}

.vj-trust__text {
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
}

/* Sections. */
.vj-section {
	padding-block: var(--vj-space-48);
}

.vj-section + .vj-section {
	padding-top: 0;
}

.vj-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--vj-space-12);
	margin-bottom: var(--vj-space-24);
}

.vj-section__title {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-1-size);
	font-weight: 700;
	line-height: var(--vj-text-heading-1-line);
	letter-spacing: var(--vj-text-heading-1-tracking);
	color: var(--vj-text-primary);
}

.vj-section__more {
	display: inline-flex;
	align-items: center;
	gap: var(--vj-space-4);
	color: var(--vj-brand-navy);
	font-size: var(--vj-text-label-15-size);
	font-weight: var(--vj-text-label-15-weight);
	text-decoration: none;
}

.vj-section__more:hover {
	text-decoration: underline;
}

.vj-section__lead {
	margin: calc(-1 * var(--vj-space-12)) 0 var(--vj-space-20);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-15-size);
}

.vj-job-list {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-12);
}

/* Walk-in drives. */
.vj-walkins {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-walkin {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--vj-space-4) var(--vj-space-16);
	padding: var(--vj-space-16) var(--vj-space-20);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

.vj-walkin__date {
	flex: 0 0 auto;
	padding: var(--vj-space-4) 10px;
	border-radius: var(--vj-radius-full);
	background: var(--vj-brand-orange-soft);
	color: var(--vj-brand-orange-ink);
	font-size: var(--vj-text-label-12-size);
	font-weight: var(--vj-text-label-12-weight);
	white-space: nowrap;
}

.vj-walkin__title {
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-15-size);
	font-weight: 700;
	color: var(--vj-text-primary);
}

.vj-walkin__meta {
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
}

/* Employer band. Figma 1:709: a soft gradient card with dark text, the same
   two tints as the hero, not a dark panel. Radius 28 and padding 48/56 are
   off the scale and kept as drawn. */
.vj-employer-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vj-space-32);
	padding: var(--vj-space-48) 56px;
	background: linear-gradient(90deg, var(--vj-surface-hero-start) 0%, var(--vj-surface-hero-end) 100%);
	border: 1px solid var(--vj-border-default);
	border-radius: 28px;
	color: var(--vj-text-primary);
}

.vj-employer-band__title {
	margin: 0 0 10px;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-display-l-size);
	font-weight: var(--vj-text-display-l-weight);
	line-height: var(--vj-text-display-l-line);
	letter-spacing: var(--vj-text-display-l-tracking);
	color: var(--vj-text-primary);
}

.vj-employer-band__text {
	max-width: 560px;
	margin: 0;
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-16-size);
	line-height: var(--vj-text-body-16-line);
}

.vj-employer-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-12);
}

@media (max-width: 900px) {
	.vj-employer-band {
		padding: var(--vj-space-32);
	}

	.vj-employer-band__title {
		font-size: var(--vj-text-heading-1-size);
		line-height: var(--vj-text-heading-1-line);
		letter-spacing: var(--vj-text-heading-1-tracking);
	}
}

@media (max-width: 600px) {
	.vj-employer-band {
		padding: var(--vj-space-24);
	}

	.vj-employer-band__title {
		font-size: var(--vj-text-heading-2-size);
		line-height: var(--vj-text-heading-2-line);
	}
}

/* ------------------------------------------------------------ Job page -- */
/* Figma 3:2 desktop, 4:193 mobile. */

.vj-job {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--vj-space-32);
	align-items: start;
	margin-block: var(--vj-space-24);
}

.vj-job__main {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-24);
	min-width: 0;
}

.vj-job__head,
.vj-job__block,
.vj-job__apply,
.vj-job__salary {
	padding: var(--vj-space-24);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

.vj-job__closed {
	margin-top: var(--vj-space-16);
}

.vj-job__identity {
	display: flex;
	align-items: flex-start;
	gap: var(--vj-space-16);
	margin-bottom: var(--vj-space-16);
}

.vj-job__logo {
	width: 56px;
	height: 56px;
	font-size: var(--vj-text-heading-3-size);
}

.vj-job__title {
	margin: 0 0 6px;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-1-size);
	font-weight: 700;
	line-height: var(--vj-text-heading-1-line);
	letter-spacing: var(--vj-text-heading-1-tracking);
	color: var(--vj-text-primary);
}

.vj-job__employer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vj-space-8);
	margin: 0;
	font-size: var(--vj-text-body-15-size);
	font-weight: 500;
	color: var(--vj-text-secondary);
}

.vj-job__employer a {
	/* A flex child, so the inline exception to the 24px target size does not
	   apply to it and the line box alone left it a pixel short. */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--vj-brand-navy);
	text-decoration: none;
}

.vj-job__employer a:hover {
	text-decoration: underline;
}

.vj-job__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8) var(--vj-space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-job__facts li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
	color: var(--vj-text-secondary);
}

.vj-job__facts .vj-icon {
	color: var(--vj-text-muted);
}

.vj-job__facts--plain {
	margin-top: var(--vj-space-12);
	font-size: var(--vj-text-body-13-size);
}

.vj-job__facts--plain li {
	font-size: var(--vj-text-body-13-size);
	color: var(--vj-text-muted);
}

.vj-job__paynote {
	margin: var(--vj-space-8) 0 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
}

.vj-job__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--vj-space-16);
}

.vj-job__block h2 {
	margin: 0 0 var(--vj-space-12);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-3-size);
	font-weight: 700;
	line-height: var(--vj-text-heading-3-line);
	letter-spacing: var(--vj-text-heading-3-tracking);
	color: var(--vj-text-primary);
}

.vj-job__block p {
	margin: 0 0 var(--vj-space-12);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
	max-width: 68ch;
}

.vj-job__block p:last-child {
	margin-bottom: 0;
}

.vj-job__list {
	margin: 0;
	padding-left: 1.2em;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
}

.vj-job__list li + li {
	margin-top: 6px;
}

.vj-job__side {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-16);
	position: sticky;
	top: var(--vj-space-16);
}

.vj-job__apply {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-8);
}

.vj-job__apply-btn {
	width: 100%;
}

.vj-job__posted {
	margin: var(--vj-space-4) 0 0;
	text-align: center;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
}

.vj-job__side-title {
	margin: 0 0 var(--vj-space-8);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-14-size);
	font-weight: var(--vj-text-label-14-weight);
	color: var(--vj-text-primary);
}

.vj-job__salary .vj-stat__value {
	margin: 0;
}

.vj-job__salary .vj-stat__label {
	display: block;
}

/* The apply panel stops being a sidebar and moves under the job on a phone,
   where a sticky column would eat most of the screen. */
@media (max-width: 900px) {
	.vj-job {
		grid-template-columns: minmax(0, 1fr);
	}

	.vj-job__side {
		position: static;
	}

	.vj-job__title {
		font-size: var(--vj-text-heading-2-size);
		line-height: var(--vj-text-heading-2-line);
	}

	.vj-job__head,
	.vj-job__block,
	.vj-job__apply,
	.vj-job__salary {
		padding: var(--vj-space-20);
	}
}

/* ------------------------------------------------- Listing and company -- */
/* Figma 6:2, 38:2, 51:2, 52:2 for listings; 6:377 for a company. */

.vj-listing__head {
	margin-block: var(--vj-space-24) var(--vj-space-20);
}

.vj-listing__title {
	margin: 0 0 6px;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-display-l-size);
	font-weight: 800;
	line-height: var(--vj-text-display-l-line);
	letter-spacing: var(--vj-text-display-l-tracking);
	color: var(--vj-text-primary);
}

.vj-listing__lead {
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-16-size);
	line-height: var(--vj-text-body-16-line);
}

.vj-listing__stats {
	margin-bottom: var(--vj-space-24);
}

.vj-listing {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--vj-space-32);
	align-items: start;
	margin-bottom: var(--vj-space-48);
}

.vj-listing__main {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-20);
	min-width: 0;
}

.vj-listing__side {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-16);
}

.vj-links {
	padding: var(--vj-space-20);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

.vj-links__title {
	margin: 0 0 var(--vj-space-12);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-14-size);
	font-weight: var(--vj-text-label-14-weight);
	line-height: var(--vj-text-label-14-line);
	color: var(--vj-text-primary);
}

.vj-links__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-links__list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vj-space-12);
	padding-block: var(--vj-space-8);
}

.vj-links__list li + li {
	border-top: 1px solid var(--vj-border-default);
}

.vj-links__list a {
	color: var(--vj-brand-navy);
	font-size: var(--vj-text-body-14-size);
	line-height: var(--vj-text-body-14-line);
	text-decoration: none;
}

.vj-links__list a:hover {
	text-decoration: underline;
}

.vj-links__count {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size);
	white-space: nowrap;
}

/* Search results. */
.vj-search-panel {
	margin-bottom: var(--vj-space-20);
}

.vj-results__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vj-space-12);
	margin-bottom: var(--vj-space-16);
}

.vj-results__count {
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-15-size);
}

.vj-sort {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8);
}

/* Company header. */
.vj-company__head {
	display: flex;
	align-items: flex-start;
	gap: var(--vj-space-16);
	margin-block: var(--vj-space-24) var(--vj-space-24);
}

.vj-company__identity {
	min-width: 0;
}

.vj-company__checked {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
	font-weight: 400;
}

@media (max-width: 900px) {
	.vj-listing {
		grid-template-columns: minmax(0, 1fr);
	}

	.vj-listing__title {
		font-size: var(--vj-text-heading-1-size);
		line-height: var(--vj-text-heading-1-line);
		letter-spacing: var(--vj-text-heading-1-tracking);
	}
}

/* ------------------------------------------ Walk-ins, salaries, articles -- */

/* Walk-in drives. Figma 9:448. Date first: someone is deciding whether to
   travel there tomorrow morning. */
.vj-drives {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-16);
}

.vj-drive {
	display: flex;
	gap: var(--vj-space-20);
	padding: var(--vj-space-20);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

.vj-drive__when {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: var(--vj-radius-md);
	background: var(--vj-brand-orange-soft);
	color: var(--vj-brand-orange-ink);
}

.vj-drive__day {
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: 800;
	line-height: 1;
}

.vj-drive__month {
	font-size: var(--vj-text-label-12-size);
	font-weight: var(--vj-text-label-12-weight);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.vj-drive__body {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-8);
	min-width: 0;
}

.vj-drive__title {
	margin: 0;
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-16-size);
	font-weight: 700;
	line-height: var(--vj-text-label-16-line);
	color: var(--vj-text-primary);
}

.vj-drive__employer {
	margin: 0;
	font-size: var(--vj-text-body-13-size);
	color: var(--vj-text-secondary);
}

.vj-drive__employer a {
	color: var(--vj-brand-navy);
	text-decoration: none;
}

.vj-drive__employer a:hover {
	text-decoration: underline;
}

.vj-drive__label {
	margin: var(--vj-space-4) 0 0;
	font-size: var(--vj-text-label-12-size);
	font-weight: var(--vj-text-label-12-weight);
	color: var(--vj-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.vj-drive__notes {
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
}

.vj-drives__warning {
	margin-block: var(--vj-space-20) var(--vj-space-48);
}

@media (max-width: 600px) {
	.vj-drive {
		flex-direction: column;
		gap: var(--vj-space-12);
	}
}

/* Salary tables and the guide index. */
.vj-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--vj-text-body-14-size);
}

.vj-table th,
.vj-table td {
	padding: var(--vj-space-12) var(--vj-space-8);
	text-align: left;
	border-bottom: 1px solid var(--vj-border-default);
}

.vj-table thead th {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-label-12-size);
	font-weight: var(--vj-text-label-12-weight);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.vj-table tbody th {
	color: var(--vj-text-primary);
	font-weight: 600;
}

.vj-table td {
	color: var(--vj-text-secondary);
}

.vj-salary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	gap: var(--vj-space-16);
}

.vj-salary-role {
	padding: var(--vj-space-20);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

.vj-salary-role__cities {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8) var(--vj-space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-salary-role__cities a {
	color: var(--vj-brand-navy);
	font-size: var(--vj-text-body-13-size);
	text-decoration: none;
}

.vj-salary-role__cities a:hover {
	text-decoration: underline;
}

/* Career advice. */
.vj-articles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: var(--vj-space-20);
	margin-bottom: var(--vj-space-32);
}

.vj-article {
	display: flex;
	flex-direction: column;
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
	overflow: hidden;
}

.vj-article__image img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.vj-article__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--vj-space-20);
}

.vj-article__title {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-4-size);
	font-weight: 700;
	line-height: var(--vj-text-heading-4-line);
	letter-spacing: var(--vj-text-heading-4-tracking);
}

.vj-article__title a {
	color: var(--vj-text-primary);
	text-decoration: none;
}

.vj-article__title a:hover {
	text-decoration: underline;
}

.vj-article__meta {
	margin: 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size);
}

.vj-article__excerpt {
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
	line-height: var(--vj-text-body-14-line);
}

/* Written content: pages and articles from the block editor. */
.vj-prose {
	max-width: 68ch;
	margin-bottom: var(--vj-space-48);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-16-size);
	line-height: var(--vj-text-body-16-line);
}

.vj-prose h2,
.vj-prose h3,
.vj-prose h4 {
	color: var(--vj-text-primary);
	font-family: var(--vj-font-display);
	margin-top: var(--vj-space-32);
	margin-bottom: var(--vj-space-12);
}

.vj-prose a {
	color: var(--vj-brand-royal);
}

.vj-prose ul,
.vj-prose ol {
	padding-left: 1.2em;
}

.vj-prose li + li {
	margin-top: 6px;
}

.vj-prose__image img {
	border-radius: var(--vj-radius-lg);
}

/* ------------------------------------------------------------------ FAQ -- */
/* Figma 6:239. Radius 22 and padding 28 are off the scale; kept as drawn. */

.vj-faq {
	padding: 28px;
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: 22px;
}

.vj-faq__title {
	margin: 0 0 var(--vj-space-4);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: 700;
	line-height: var(--vj-text-heading-2-line);
	letter-spacing: var(--vj-text-heading-2-tracking);
	color: var(--vj-text-primary);
}

.vj-faq__item + .vj-faq__item {
	border-top: 1px solid var(--vj-border-default);
}

.vj-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vj-space-12);
	padding-block: var(--vj-space-16);
	cursor: pointer;
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-16-size);
	font-weight: 700;
	line-height: var(--vj-text-label-16-line);
	color: var(--vj-text-primary);
	list-style: none;
}

/* Safari still draws its own triangle without this. */
.vj-faq__question::-webkit-details-marker {
	display: none;
}

.vj-faq__marker {
	flex: 0 0 auto;
	color: var(--vj-text-muted);
}

/* Plus when closed, x when open. */
.vj-faq__x,
.vj-faq__item[open] .vj-faq__plus {
	display: none;
}

.vj-faq__item[open] .vj-faq__x {
	display: block;
}

.vj-faq__answer {
	padding-bottom: var(--vj-space-16);
}

.vj-faq__answer p {
	margin: 0;
	max-width: 68ch;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
}

@media (max-width: 600px) {
	.vj-faq {
		padding: var(--vj-space-20);
	}
}

/* ------------------------------------------------------------ Companies -- */
/* Figma 7:2. */

.vj-companies__cities {
	margin-bottom: var(--vj-space-16);
}

.vj-companies {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: var(--vj-space-16);
	margin-block: var(--vj-space-16) var(--vj-space-32);
}

.vj-company-card {
	position: relative;
	display: flex;
	gap: var(--vj-space-16);
	align-items: flex-start;
	padding: var(--vj-space-20);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

.vj-company-card:hover {
	border-color: var(--vj-border-strong);
}

.vj-company-card__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.vj-company-card__name {
	margin: 0;
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-16-size);
	font-weight: 700;
	line-height: var(--vj-text-label-16-line);
	color: var(--vj-text-primary);
}

.vj-company-card__name a {
	color: inherit;
	text-decoration: none;
}

.vj-company-card__name a:hover {
	text-decoration: underline;
}

/* The whole card is clickable, but the name stays the real link. */
.vj-company-card__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vj-company-card__industry {
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
}

.vj-company-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vj-space-8);
	margin: 2px 0 0;
}

.vj-company-card__where {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
}

.vj-company-card__where .vj-icon {
	color: var(--vj-text-muted);
}

.vj-company-card__jobs {
	margin: 2px 0 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
}

/* The city select needs to look like the rest of the search bar. */
.vj-search__field select.vj-search__input {
	appearance: none;
	cursor: pointer;
}

/* -------------------------------------------------------------- Consent -- */
/* Figma 56:502 banner, 56:519 preferences. Radius 22 and padding 28/22 are
   off the scale and kept as drawn. */

.vj-consent {
	position: fixed;
	inset: auto var(--vj-layout-gutter) var(--vj-space-20);
	z-index: 30;
	display: flex;
	align-items: center;
	gap: var(--vj-space-24);
	max-width: var(--vj-layout-container);
	margin-inline: auto;
	padding: 22px 28px;
	background: var(--vj-surface-card);
	border-radius: 22px;
	box-shadow: 0 16px 20px rgba(5, 10, 31, 0.25);
}

.vj-consent__icon {
	display: flex;
	flex: 0 0 auto;
	padding: var(--vj-space-12);
	border-radius: 14px;
	background: var(--vj-brand-orange-soft);
	color: var(--vj-brand-orange-ink);
}

.vj-consent__body {
	flex: 1 1 auto;
	min-width: 0;
}

.vj-consent__title {
	margin: 0 0 var(--vj-space-4);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-16-size);
	font-weight: 700;
	line-height: var(--vj-text-label-16-line);
	color: var(--vj-text-primary);
}

.vj-consent__text {
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
	line-height: var(--vj-text-body-14-line);
}

.vj-consent__link {
	margin: var(--vj-space-4) 0 0;
}

.vj-consent__link a {
	color: var(--vj-brand-navy);
	font-size: var(--vj-text-body-13-size);
	font-weight: 700;
}

.vj-consent__actions {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: var(--vj-space-8);
	width: 210px;
}

.vj-consent__btn {
	width: 100%;
	min-height: 0;
	padding: 11px var(--vj-space-20);
	font-size: var(--vj-text-label-14-size);
}

.vj-consent__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	color: var(--vj-brand-navy);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-13-size);
	font-weight: var(--vj-text-label-13-weight);
	text-decoration: none;
}

.vj-consent__more:hover {
	text-decoration: underline;
}

@media (max-width: 860px) {
	.vj-consent {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--vj-space-16);
		inset: auto var(--vj-space-12) var(--vj-space-12);
		padding: var(--vj-space-20);
	}

	.vj-consent__actions {
		width: 100%;
	}

	/* The tab bar sits at the bottom of a phone; the banner has to clear it. */
	.vj-consent {
		bottom: 88px;
	}
}

/* Privacy settings. */
.vj-settings {
	max-width: 720px;
	margin-bottom: var(--vj-space-48);
}

.vj-settings__saved {
	margin-bottom: var(--vj-space-20);
}

.vj-settings__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--vj-space-24);
	padding: var(--vj-space-20);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
	margin-bottom: var(--vj-space-12);
}

.vj-settings__name {
	margin: 0 0 var(--vj-space-4);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-15-size);
	font-weight: 700;
	line-height: var(--vj-text-label-15-line);
	color: var(--vj-text-primary);
}

.vj-settings__name label {
	cursor: pointer;
}

.vj-settings__text {
	margin: 0;
	max-width: 52ch;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
	line-height: var(--vj-text-body-14-line);
}

.vj-settings__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-12);
	margin-top: var(--vj-space-20);
}

.vj-settings__note {
	margin-top: var(--vj-space-16);
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
}

/* A checkbox drawn as a switch. It is still a real checkbox, so it works with
   a keyboard and is announced correctly. */
.vj-switch {
	appearance: none;
	flex: 0 0 auto;
	width: 52px;
	height: 30px;
	margin: 0;
	border-radius: var(--vj-radius-full);
	background: var(--vj-border-toggle-off);
	cursor: pointer;
	position: relative;
	transition: background 0.15s ease;
}

.vj-switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 24px;
	height: 24px;
	border-radius: var(--vj-radius-full);
	background: var(--vj-surface-card);
	transition: transform 0.15s ease;
}

.vj-switch:checked {
	background: var(--vj-status-success);
}

.vj-switch:checked::after {
	transform: translateX(22px);
}

@media (prefers-reduced-motion: reduce) {
	.vj-switch,
	.vj-switch::after {
		transition: none;
	}
}

@media (max-width: 600px) {
	.vj-settings__row {
		gap: var(--vj-space-16);
	}
}

/* ---------------------------------------------------------------- Forms -- */

.vj-form-panel {
	max-width: 720px;
	margin-bottom: var(--vj-space-48);
	padding: var(--vj-space-24);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

.vj-listing__main .vj-form-panel {
	max-width: none;
	margin-bottom: 0;
}

.vj-form-panel > * + * {
	margin-top: var(--vj-space-20);
}

.vj-form-panel__about {
	padding: var(--vj-space-16);
	background: var(--vj-surface-page);
	border-radius: var(--vj-radius-md);
}

.vj-form-panel__about p {
	margin: var(--vj-space-4) 0 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
	line-height: var(--vj-text-body-14-line);
}

.vj-form-panel__reference strong {
	display: block;
	margin-top: var(--vj-space-4);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-3-size);
	letter-spacing: var(--vj-text-heading-3-tracking);
	color: var(--vj-text-primary);
}

.vj-form {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-20);
}

.vj-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-12);
}

.vj-field__optional {
	margin-left: var(--vj-space-4);
	color: var(--vj-text-muted);
	font-weight: 400;
}

/*
 * The honeypot. Not display:none, because some bots skip hidden fields and a
 * few screen readers would still announce it; it is taken out of the layout
 * and out of the accessibility tree instead, and given a negative tabindex so
 * a keyboard never lands on it.
 */
.vj-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ----------------------------------------------------------- Sign in -- */
/* Figma 92:2 desktop, 96:2 phone. Two panels side by side on a wide screen:
   what the site promises on the left, the form on the right. On a phone the
   left panel shrinks to a row with the logo and a Help link, exactly as the
   phone design has it.

   These pages use header-auth.php, so there is no site header, footer or tab
   bar to work around. */

/* .vj-main sets display:block and its stylesheet loads after this one, so the
   grid needs to say so on the element that carries both classes. Without this
   the two panels stack and the whole page reads as one long column. */
.vj-main.vj-auth {
	display: grid;
	grid-template-columns: 600px minmax(0, 1fr);
	align-items: stretch;
	min-height: 100vh;
	padding-block: 0;
}

.vj-auth__brand {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-32);
	padding: 48px 56px;
	background: linear-gradient(120deg, var(--vj-surface-hero-start) 0%, var(--vj-surface-hero-end) 100%);
	border-right: 1px solid var(--vj-border-default);
}

.vj-auth__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vj-space-16);
	flex: 0 0 auto;
}

.vj-auth__logo img {
	display: block;
	width: 185px;
	height: 38px;
}

/* Only on a phone, where there is no other way to reach help. */
.vj-auth__help {
	display: none;
}

/* The middle of the panel: the promise and the picture, centred in what is
   left between the logo and the three lines at the foot. */
.vj-auth__pitch {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: var(--vj-space-24);
}

.vj-auth__headline {
	max-width: 480px;
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-display-l-size);
	font-weight: var(--vj-text-display-l-weight);
	line-height: var(--vj-text-display-l-line);
	letter-spacing: var(--vj-text-display-l-tracking);
	color: var(--vj-text-primary);
}

.vj-auth__promises {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-auth__promises li {
	display: flex;
	align-items: center;
	gap: var(--vj-space-12);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-15-size);
	font-weight: 500;
}

.vj-auth__promise-icon {
	display: flex;
	flex: 0 0 auto;
	padding: var(--vj-space-8);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: 10px;
	color: var(--vj-brand-navy);
}

.vj-auth__panel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--vj-space-40) var(--vj-space-24);
	background: var(--vj-surface-card);
}

/* Figma 92:70. Lifted out of the flow so the form stays centred in the column
   rather than being pushed down by a link above it. */
.vj-auth__aside {
	position: absolute;
	top: 32px;
	right: 48px;
	margin: 0;
	padding: 0;
	border: 0;
}

.vj-auth__form-wrap {
	width: 100%;
	max-width: 440px;
}

.vj-auth__title {
	margin: 0 0 var(--vj-space-8);
	font-family: var(--vj-font-display);
	font-size: 36px;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--vj-text-primary);
}

.vj-auth__lead {
	margin: 0 0 var(--vj-space-20);
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-16-size);
	line-height: var(--vj-text-body-16-line);
}

.vj-auth__google {
	width: 100%;
	margin-bottom: var(--vj-space-16);
}

.vj-auth__divider {
	display: flex;
	align-items: center;
	gap: var(--vj-space-12);
	margin: 0 0 var(--vj-space-16);
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
}

.vj-auth__divider::before,
.vj-auth__divider::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--vj-border-default);
}

.vj-auth__message {
	margin-bottom: var(--vj-space-16);
}

.vj-auth__submit {
	width: 100%;
}

.vj-field__label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vj-space-12);
}

.vj-auth__forgot {
	color: var(--vj-brand-navy);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-13-size);
	font-weight: var(--vj-text-label-13-weight);
	text-decoration: none;
}

.vj-auth__forgot:hover {
	text-decoration: underline;
}

/* An input with an icon inside it. The icon is decorative, so the input keeps
   its own padding and the icon is positioned over it. */
.vj-field__with-icon {
	position: relative;
	display: flex;
	align-items: center;
}

.vj-field__with-icon > .vj-icon {
	position: absolute;
	left: 14px;
	color: var(--vj-text-muted);
	pointer-events: none;
}

.vj-field__with-icon .vj-field__control {
	padding-left: 42px;
}

.vj-field__reveal {
	position: absolute;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vj-text-muted);
	cursor: pointer;
	border-radius: var(--vj-radius-sm);
}

.vj-field__reveal:hover {
	color: var(--vj-text-primary);
}

.vj-field__with-icon:has( .vj-field__reveal ) .vj-field__control {
	padding-right: 48px;
}

.vj-auth__switch,
.vj-auth__aside {
	margin: var(--vj-space-16) 0 0;
	text-align: center;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-14-size);
}

.vj-auth__switch a,
.vj-auth__aside a {
	color: var(--vj-brand-navy);
	font-weight: 700;
	text-decoration: none;
}

.vj-auth__switch a:hover,
.vj-auth__aside a:hover {
	text-decoration: underline;
}

/* Deliberately no border here: on a wide screen this link floats at the top
   right of the form column, where a rule above it would look like a mistake.
   The phone rules put the border back, because there it does sit under the
   form and needs separating from it. */
.vj-auth__aside {
	font-size: var(--vj-text-body-13-size);
}

/* ------------------------------------------------ Newsletter and saved -- */

.vj-newsletter {
	margin-top: var(--vj-space-32);
	padding-top: var(--vj-space-24);
	border-top: 1px solid var(--vj-border-default);
}

.vj-newsletter__text,
.vj-newsletter__done {
	margin: 0 0 var(--vj-space-12);
	max-width: 52ch;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
}

.vj-newsletter__done {
	color: var(--vj-status-success-ink);
	font-weight: 500;
}

.vj-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8);
	max-width: 480px;
}

.vj-newsletter__form .vj-field__control {
	flex: 1 1 220px;
	width: auto;
}

.vj-form--contact {
	max-width: 560px;
	margin-top: var(--vj-space-24);
}

/* The bookmark, once it is doing something. */
.vj-job-card__save.is-saved,
.vj-job__apply [data-vj-save].is-saved {
	color: var(--vj-brand-orange-ink);
}

.vj-job-card__save.is-saved .vj-icon path,
[data-vj-save].is-saved .vj-icon path {
	fill: currentColor;
}

[data-vj-save][disabled] {
	opacity: 0.6;
}

/* ---------------------------------------------------------------- Apply -- */
/* Figma 4:300. */

.vj-apply {
	max-width: 720px;
}

.vj-apply__head {
	margin-block: var(--vj-space-24) var(--vj-space-20);
}

.vj-apply__eyebrow {
	margin: 0 0 3px;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size);
	font-weight: 500;
}

.vj-apply__title {
	margin: 0 0 3px;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-3-size);
	font-weight: 700;
	line-height: var(--vj-text-heading-3-line);
	letter-spacing: var(--vj-text-heading-3-tracking);
	color: var(--vj-text-primary);
}

.vj-apply__where {
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
}

.vj-apply__panel {
	margin-bottom: var(--vj-space-48);
}

.vj-apply__form {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-20);
	padding: var(--vj-space-24);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

/* What the employer will see. Shown before anything is sent, on purpose. */
.vj-apply__share {
	padding: 14px;
	background: var(--vj-surface-page);
	border-radius: 16px;
}

.vj-apply__share-title {
	display: flex;
	align-items: center;
	gap: var(--vj-space-8);
	margin: 0 0 10px;
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-13-size);
	font-weight: 700;
	line-height: var(--vj-text-label-13-line);
	color: var(--vj-text-primary);
}

.vj-apply__share-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.vj-apply__share-list > div {
	display: flex;
	gap: 10px;
	align-items: baseline;
}

.vj-apply__share-list dt {
	flex: 0 0 70px;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
}

.vj-apply__share-list dd {
	margin: 0;
	min-width: 0;
	color: var(--vj-text-primary);
	font-size: var(--vj-text-label-13-size);
	font-weight: 600;
	word-break: break-word;
}

.vj-apply__share-note {
	margin: 10px 0 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size);
}

.vj-apply__questions {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-16);
}

.vj-question {
	margin: 0;
	padding: 0;
	border: 0;
}

.vj-question__text {
	padding: 0;
	margin-bottom: var(--vj-space-8);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
	font-weight: 500;
	line-height: var(--vj-text-body-14-line);
}

/* Yes and No as one control, the selected half filled navy. Real radios
   underneath, so a keyboard and a screen reader treat it as a normal group. */
.vj-question__choice {
	display: flex;
	gap: var(--vj-space-4);
	padding: var(--vj-space-4);
	background: var(--vj-surface-page);
	border-radius: var(--vj-radius-md);
}

.vj-question__option {
	flex: 1 1 0;
	position: relative;
}

.vj-question__option input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.vj-question__option span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 9px;
	border-radius: 9px;
	color: var(--vj-text-secondary);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-14-size);
	font-weight: var(--vj-text-label-14-weight);
}

.vj-question__option input:checked + span {
	background: var(--vj-brand-navy);
	color: var(--vj-text-on-dark);
}

.vj-question__option input:focus-visible + span {
	box-shadow:
		0 0 0 2px var(--vj-surface-card),
		0 0 0 4px var(--vj-state-focus-ring),
		0 0 0 6px var(--vj-brand-navy);
}

.vj-question__number {
	max-width: 200px;
}

/* The acknowledgement. Orange, because it is the one thing on the page we
   most want read, and it is required by the database itself. */
.vj-apply__ack {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px;
	background: var(--vj-brand-orange-soft);
	border-radius: 14px;
	color: var(--vj-brand-orange-ink);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-13-size);
	font-weight: 600;
	line-height: var(--vj-text-label-13-line);
	cursor: pointer;
}

.vj-apply__ack input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--vj-brand-navy);
	cursor: pointer;
}

.vj-apply__submit {
	width: 100%;
	padding-block: var(--vj-space-16);
	border-radius: 14px;
	font-size: var(--vj-text-label-16-size);
}

@media (max-width: 600px) {
	.vj-apply__form {
		padding: var(--vj-space-20);
	}
}

/* ------------------------------------------------ Stamp and tab bar use -- */

/* The small stamp, for a sidebar or a page header. */
.vj-stamp--small {
	width: 108px;
	height: 108px;
	border-width: 2.5px;
	padding: 18px var(--vj-space-8);
	gap: 3px;
}

.vj-stamp--small .vj-stamp__small {
	font-size: var(--vj-text-overline-10-size);
	letter-spacing: 0.1em;
}

.vj-stamp--small .vj-stamp__big {
	font-size: var(--vj-text-heading-3-size);
}

.vj-job__stamp,
.vj-company__stamp {
	display: flex;
	justify-content: center;
	padding-block: var(--vj-space-8);
}

.vj-company__stamp {
	justify-content: flex-start;
	margin-top: calc(-1 * var(--vj-space-12));
}

/* The stamp is decoration on small screens, where space is the scarce thing. */
@media (max-width: 600px) {
	.vj-job__stamp,
	.vj-company__stamp {
		display: none;
	}
}

/* --------------------------------------------- Target size, WCAG 2.5.8 -- */
/*
 * A target that is not inline in a sentence has to be at least 24 by 24. These
 * are all text links that were 20 to 23px tall. The fix adds hit area rather
 * than size: the text does not move, the tappable box grows around it.
 */

.vj-section__more,
.vj-auth__forgot,
.vj-auth__switch a,
.vj-auth__aside a,
.vj-consent__link a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* Sidebar link lists: the row already has room, but only the text was
   clickable. The link now fills the row it sits in. */
.vj-links__list li {
	padding-block: 0;
}

.vj-links__list li > a {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-height: 24px;
	padding-block: var(--vj-space-8);
}

.vj-links__list li {
	gap: var(--vj-space-8);
}

.vj-links__count {
	flex: 0 0 auto;
}

/* The one link in the employer facts row was 20px tall. */
.vj-job__facts a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* ------------------------------------------------------------ Menu -- */
/* Figma 15:2. The navigation for anything narrower than 1024px.

   Two shapes, one markup. Without script the panel is an ordinary block under
   the header, already open, and the button and the × are hidden because
   neither could do anything. With script (html.vj-js) it becomes a panel over
   the whole screen that the button opens. */

.vj-menu {
	background: var(--vj-surface-card);
	border-top: 1px solid var(--vj-border-default);
}

.vj-menu__inner {
	max-width: var(--vj-layout-container);
	margin-inline: auto;
	padding-inline: var(--vj-space-20);
}

.vj-menu__top,
.vj-menu__close {
	display: none;
}

.vj-menu__nav ul {
	margin: 0;
	padding: var(--vj-space-16) 0;
	list-style: none;
}

.vj-menu__nav li + li a {
	border-top: 1px solid var(--vj-border-default);
}

.vj-menu__nav a {
	display: flex;
	gap: 14px;
	align-items: center;
	padding-block: var(--vj-space-16);
	color: var(--vj-text-primary);
	font-family: var(--vj-font-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.24px;
	text-decoration: none;
}

.vj-menu__icon {
	display: flex;
	flex: 0 0 auto;
	color: var(--vj-brand-orange);
}

.vj-menu__label {
	flex: 1 1 auto;
	min-width: 0;
}

.vj-menu__chev {
	display: flex;
	flex: 0 0 auto;
	color: var(--vj-text-secondary);
}

.vj-menu__nav a[aria-current] .vj-menu__label {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.vj-menu__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-block: var(--vj-space-24) var(--vj-space-12);
}

.vj-menu__actions .vj-btn {
	width: 100%;
}

.vj-menu__employers {
	margin: 0;
	padding: var(--vj-space-12) 0 var(--vj-space-40);
	text-align: center;
}

.vj-menu__employers a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--vj-brand-orange);
	font-size: 14px;
	font-weight: 600;
}

.vj-menu__info {
	display: flex;
	gap: 18px;
	justify-content: center;
	margin: 0;
	padding: var(--vj-space-4) 0 36px;
	list-style: none;
}

.vj-menu__info a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--vj-text-secondary);
	font-size: 13px;
	font-weight: 500;
}

/* The bar is the whole navigation from 1024px up, so the panel is not needed. */
@media (min-width: 1024px) {
	.vj-menu {
		display: none;
	}
}

/* ---- With script ---- */

.vj-js .vj-menu {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: none;
	overflow-y: auto;
	border-top: 0;
	overscroll-behavior: contain;
}

.vj-js .vj-menu.is-open {
	display: block;
}

.vj-js .vj-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--vj-space-8) 0 var(--vj-space-12);
}

.vj-js .vj-menu__logo img {
	display: block;
	width: 160px;
	height: 33px;
}

.vj-js .vj-menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--vj-radius-md);
	background: var(--vj-surface-page);
	color: var(--vj-text-primary);
	cursor: pointer;
}

/* Hold the page still while the panel is over it. */
.vj-menu-open body {
	overflow: hidden;
}

/* ---- The picture beside the form. Figma 92:7 ---- */

.vj-auth__art {
	position: relative;
	width: 100%;
	max-width: 480px;
	padding-top: 44px;
}

.vj-auth__art-card {
	width: 449px;
	max-width: 100%;
	display: flex;
	gap: var(--vj-space-16);
	padding: 22px;
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
	box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--vj-brand-navy) 28%, transparent);
	transform: rotate(-1.5deg);
}

.vj-auth__art-logo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 55px;
	background: var(--vj-surface-soft-blue);
	border-radius: var(--vj-radius-md);
	color: var(--vj-brand-navy);
	font-family: var(--vj-font-body);
	font-size: 15px;
	font-weight: 700;
}

.vj-auth__art-body {
	flex: 1 1 auto;
	min-width: 0;
}

.vj-auth__art-title {
	margin: 0 0 var(--vj-space-8);
	font-family: var(--vj-font-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--vj-text-primary);
}

.vj-auth__art-employer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vj-space-8);
	margin: 0 0 var(--vj-space-12);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
	font-weight: 500;
}

.vj-auth__art-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8) var(--vj-space-16);
	margin: 0 0 var(--vj-space-12);
	padding: 0;
	list-style: none;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
}

.vj-auth__art-facts li {
	display: flex;
	align-items: center;
	gap: var(--vj-space-4);
}

.vj-auth__art-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8);
	margin: 0;
}

.vj-auth__art-side {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	color: var(--vj-text-muted);
}

.vj-auth__art-when {
	font-size: var(--vj-text-body-12-size, 12px);
}

/* Over the card's top-right corner, and above it in the stack. */
.vj-auth__art-stamp {
	position: absolute;
	top: 0;
	/* Figma 92:44 sets it at x=360 in a 480 frame, so it hangs 5px past the
	   right edge of the art. */
	right: -5px;
	width: 125px;
	height: 125px;
}

.vj-auth__art-stamp > * {
	width: 100%;
	height: 100%;
}

/* ---- Keep me signed in, and the human check. Figma 92:106 and 92:111 ---- */

/* The box is drawn at 20px, as in Figma, but the label wraps it, so the thing
   you actually press is this whole row. It is held to 24px so that target is
   never under the WCAG 2.5.8 minimum. */
.vj-auth__keep {
	display: flex;
	align-items: center;
	gap: var(--vj-space-12);
	min-height: 24px;
	margin-bottom: var(--vj-space-16);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
	cursor: pointer;
}

.vj-auth__keep input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	accent-color: var(--vj-brand-navy);
	cursor: pointer;
}

.vj-auth__turnstile {
	margin-bottom: var(--vj-space-16);
	min-height: 46px;
}

/* ---- The phone. Figma 96:2 ---- */
/* Same 1024px line as the header: below it, 600px of panel plus a 440px form
   no longer fit side by side. */

@media (max-width: 1023px) {
	.vj-main.vj-auth {
		grid-template-columns: minmax(0, 1fr);
		min-height: 100svh;
	}

	/* The panel becomes the top row: logo on the left, Help on the right.
	   Everything that made it a panel goes. */
	.vj-auth__brand {
		padding: var(--vj-space-16) var(--vj-space-20);
		background: var(--vj-surface-card);
		border-right: 0;
	}

	.vj-auth__pitch,
	.vj-auth__promises {
		display: none;
	}

	.vj-auth__logo img {
		width: 148px;
		height: 30px;
	}

	.vj-auth__help {
		display: inline-flex;
		align-items: center;
		min-height: 24px;
		color: var(--vj-text-primary);
		font-size: var(--vj-text-label-14-size, 14px);
		font-weight: 700;
		text-decoration: none;
	}

	.vj-auth__help:hover {
		text-decoration: underline;
	}

	.vj-auth__panel {
		flex-direction: column;
		align-items: stretch;
		/* Starts under the logo, as the phone design has it. Centring it
		   vertically left a gap where the brand panel used to be. */
		justify-content: flex-start;
		padding: var(--vj-space-8) var(--vj-space-20) var(--vj-space-40);
	}

	/* Back into the flow, under the form, where the phone design puts it.
	   It comes first in the markup so it can sit top-right on a wide screen,
	   so order pushes it back to the end here. */
	.vj-auth__aside {
		position: static;
		order: 1;
		margin-top: var(--vj-space-16);
		padding-top: var(--vj-space-16);
		border-top: 1px solid var(--vj-border-default);
	}

	.vj-auth__form-wrap {
		max-width: none;
	}
}

/* ------------------------------------------------------- Search filters -- */
/* Figma 2:2 beside the results, 12:182 as a sheet on a phone. */

.vj-search-band {
	padding-block: var(--vj-space-24);
	background: linear-gradient(120deg, var(--vj-surface-hero-start) 0%, var(--vj-surface-hero-end) 100%);
	border-bottom: 1px solid var(--vj-border-default);
}

.vj-results {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--vj-space-32);
	align-items: start;
}

.vj-results__main {
	min-width: 0;
}

.vj-filters {
	display: flex;
	flex-direction: column;
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

.vj-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vj-space-12);
	padding: var(--vj-space-20);
	border-bottom: 1px solid var(--vj-border-default);
}

.vj-filters__title {
	display: flex;
	align-items: center;
	gap: var(--vj-space-8);
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-3-size);
	font-weight: 700;
	color: var(--vj-text-primary);
}

.vj-filters__clear {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--vj-brand-navy);
	font-size: var(--vj-text-label-13-size);
	font-weight: 600;
}

/* Only the sheet on a phone has anything to close. */
.vj-filters__close {
	display: none;
}

.vj-filters__body {
	padding-inline: var(--vj-space-20);
}

.vj-filters__group {
	margin: 0;
	padding: var(--vj-space-20) 0;
	border: 0;
	border-top: 1px solid var(--vj-border-default);
}

.vj-filters__group:first-child {
	border-top: 0;
}

.vj-filters__legend {
	padding: 0;
	margin-bottom: var(--vj-space-12);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-14-size, 14px);
	font-weight: 700;
	color: var(--vj-text-primary);
}

.vj-filters__list {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-filters__option {
	display: flex;
	align-items: center;
	gap: var(--vj-space-12);
	min-height: 32px;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
	cursor: pointer;
}

.vj-filters__option input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	accent-color: var(--vj-brand-navy);
	cursor: pointer;
}

.vj-filters__option-label {
	flex: 1 1 auto;
	min-width: 0;
}

.vj-filters__count {
	flex: 0 0 auto;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
	font-variant-numeric: tabular-nums;
}

.vj-filters__pay-value {
	margin: 0 0 var(--vj-space-12);
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-14-size);
	font-weight: 600;
}

.vj-filters__pay-ends {
	display: flex;
	justify-content: space-between;
	margin: var(--vj-space-8) 0 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size, 12px);
}

.vj-filters__foot {
	display: flex;
	gap: var(--vj-space-12);
	padding: var(--vj-space-20);
	border-top: 1px solid var(--vj-border-default);
}

.vj-filters__foot .vj-btn {
	flex: 1 1 auto;
	justify-content: center;
}

/* ---- The two-handle pay slider ---- */
/* Two range inputs stacked on one track. Each is a real control, so both are
   reachable by keyboard and each carries its own label. */

.vj-range {
	position: relative;
	height: 24px;
}

.vj-range__track,
.vj-range__fill {
	position: absolute;
	top: 50%;
	height: 4px;
	border-radius: var(--vj-radius-full);
	transform: translateY(-50%);
	pointer-events: none;
}

.vj-range__track {
	left: 0;
	right: 0;
	background: var(--vj-border-default);
}

.vj-range__fill {
	background: var(--vj-brand-navy);
}

.vj-range input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 24px;
	margin: 0;
	background: none;
	appearance: none;
	/* The track is drawn above; only the handles need to be grabbable. */
	pointer-events: none;
}

.vj-range input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 20px;
	height: 20px;
	background: var(--vj-surface-card);
	border: 3px solid var(--vj-brand-navy);
	border-radius: var(--vj-radius-full);
	cursor: grab;
	pointer-events: auto;
}

.vj-range input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: var(--vj-surface-card);
	border: 3px solid var(--vj-brand-navy);
	border-radius: var(--vj-radius-full);
	cursor: grab;
	pointer-events: auto;
}

.vj-range input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px var(--vj-state-focus-ring);
}

.vj-range input[type="range"]:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px var(--vj-state-focus-ring);
}

/* ---- Walk-ins only ---- */

.vj-switch {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--vj-space-16);
	padding: var(--vj-space-12);
	background: var(--vj-status-success-soft, var(--vj-surface-soft-blue));
	border-radius: var(--vj-radius-md);
	cursor: pointer;
}

.vj-switch__text {
	flex: 1 1 auto;
	min-width: 0;
}

.vj-switch__title {
	display: block;
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-14-size);
	font-weight: 700;
}

.vj-switch__hint {
	display: block;
	margin-top: 2px;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-12-size, 12px);
}

/* The real control, kept where a finger and a screen reader can both find it,
   with the drawn switch sitting over the top of it. */
.vj-switch input {
	position: absolute;
	right: var(--vj-space-12);
	width: 44px;
	height: 24px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.vj-switch__track {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 24px;
	background: var(--vj-border-default);
	border-radius: var(--vj-radius-full);
	transition: background 120ms ease;
}

.vj-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: var(--vj-surface-card);
	border-radius: var(--vj-radius-full);
	transition: transform 120ms ease;
}

.vj-switch input:checked ~ .vj-switch__track {
	background: var(--vj-status-success);
}

.vj-switch input:checked ~ .vj-switch__track::after {
	transform: translateX(20px);
}

.vj-switch input:focus-visible ~ .vj-switch__track {
	box-shadow: 0 0 0 3px var(--vj-state-focus-ring);
}

/* ---- The bar above the results ---- */

.vj-results__filter-btn {
	display: none;
	gap: var(--vj-space-8);
}

.vj-results__filter-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 6px;
	background: var(--vj-brand-navy);
	border-radius: var(--vj-radius-full);
	color: var(--vj-surface-card);
	font-size: var(--vj-text-body-12-size, 12px);
	font-weight: 700;
}

.vj-sort {
	display: flex;
	align-items: center;
	gap: var(--vj-space-8);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
}

.vj-sort__select {
	min-height: 40px;
	padding: 0 var(--vj-space-12);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-md);
	color: var(--vj-text-primary);
	font-family: inherit;
	font-size: var(--vj-text-body-14-size);
	font-weight: 600;
}

/* ---- The chips showing what is switched on ---- */

.vj-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vj-space-8);
	margin-bottom: var(--vj-space-16);
}

.vj-chip--active {
	display: inline-flex;
	align-items: center;
	gap: var(--vj-space-8);
	min-height: 32px;
	background: var(--vj-brand-navy);
	border-color: var(--vj-brand-navy);
	color: var(--vj-surface-card);
	text-decoration: none;
}

.vj-chip--active:hover {
	background: var(--vj-state-navy-hover, var(--vj-brand-navy));
}

.vj-chips__clear {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	font-weight: 600;
}

/* ---- The sheet on a phone. Figma 12:182 ---- */

@media (max-width: 1023px) {
	.vj-results {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Without script the panel is simply part of the page, above the results,
	   and the button that would open it never appears. */
	.vj-filters {
		order: 2;
		margin-top: var(--vj-space-24);
	}

	.vj-js .vj-results__filter-btn {
		display: inline-flex;
	}

	.vj-js .vj-filters {
		position: fixed;
		inset: auto 0 0;
		z-index: 70;
		max-height: 88svh;
		margin: 0;
		overflow-y: auto;
		border: 0;
		border-radius: var(--vj-radius-xl) var(--vj-radius-xl) 0 0;
		box-shadow: 0 -12px 40px -18px color-mix(in srgb, var(--vj-brand-navy) 45%, transparent);
		overscroll-behavior: contain;
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 180ms ease, visibility 180ms;
	}

	.vj-js .vj-filters.is-open {
		transform: translateY(0);
		visibility: visible;
	}

	.vj-js .vj-filters__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: var(--vj-radius-md);
		background: var(--vj-surface-page);
		color: var(--vj-text-primary);
		cursor: pointer;
	}

	/* The buttons stay in view while the contents of the sheet scroll. */
	.vj-js .vj-filters__foot {
		position: sticky;
		bottom: 0;
		background: var(--vj-surface-card);
	}

	.vj-filters-backdrop {
		position: fixed;
		inset: 0;
		z-index: 69;
		background: color-mix(in srgb, var(--vj-brand-navy) 45%, transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vj-js .vj-filters,
	.vj-switch__track,
	.vj-switch__track::after {
		transition: none;
	}
}

/* --------------------------------------------------------- Job alerts -- */
/* Figma 2:2. The strip above the results offering to email new jobs. */

.vj-alert-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vj-space-16);
	margin-bottom: var(--vj-space-16);
	padding: var(--vj-space-16) var(--vj-space-20);
	/* The warm end of the page banner gradient, which is the soft orange in
	   the design. There is no separate token for it. */
	background: var(--vj-surface-hero-end);
	border-radius: var(--vj-radius-lg);
}

.vj-alert-banner__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--vj-surface-card);
	border-radius: var(--vj-radius-full);
	color: var(--vj-brand-orange);
}

.vj-alert-banner__text {
	flex: 1 1 260px;
	min-width: 0;
}

.vj-alert-banner__title {
	margin: 0;
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-15-size);
	font-weight: 700;
}

.vj-alert-banner__hint {
	margin: 2px 0 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
}

.vj-alert-banner__go {
	flex: 0 0 auto;
}

.vj-alert-banner__go[aria-disabled="true"] {
	opacity: 0.6;
	pointer-events: none;
}

.vj-alert-banner__done {
	flex: 1 1 100%;
	margin: 0;
	color: var(--vj-status-success-ink, var(--vj-text-primary));
	font-size: var(--vj-text-body-14-size);
	font-weight: 600;
}

.vj-alert-banner__done.is-error {
	color: var(--vj-status-danger);
}

/* ---- The list on the account page ---- */

.vj-account-block {
	margin-top: var(--vj-space-32);
	padding-top: var(--vj-space-24);
	border-top: 1px solid var(--vj-border-default);
}

.vj-account-block__title {
	margin: 0 0 var(--vj-space-8);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-3-size);
	font-weight: 700;
	color: var(--vj-text-primary);
}

.vj-alert-list {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-8);
	margin-top: var(--vj-space-16);
}

.vj-alert-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vj-space-12);
	padding: var(--vj-space-16);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-md);
}

/* A paused alert is still there and still theirs, so it fades rather than
   disappears, and the text stays readable. */
.vj-alert-row.is-paused {
	background: var(--vj-surface-page);
}

.vj-alert-row__text {
	flex: 1 1 200px;
	min-width: 0;
}

.vj-alert-row__name {
	margin: 0;
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-15-size);
	font-weight: 700;
}

.vj-alert-row__note {
	margin: 2px 0 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
}

/* ------------------------------------------------------ Career advice -- */
/* Figma 10:2 the index, 54:344 a section, 10:156 an article. */

.vj-page-band {
	padding-block: var(--vj-space-40) var(--vj-space-32);
	background: linear-gradient(120deg, var(--vj-surface-hero-start) 0%, var(--vj-surface-hero-end) 100%);
	border-bottom: 1px solid var(--vj-border-default);
}

.vj-page-band__title {
	margin: 0 0 var(--vj-space-8);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-display-l-size);
	font-weight: var(--vj-text-display-l-weight);
	line-height: var(--vj-text-display-l-line);
	letter-spacing: var(--vj-text-display-l-tracking);
	color: var(--vj-text-primary);
}

.vj-page-band__lead {
	max-width: 62ch;
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-16-size);
	line-height: var(--vj-text-body-16-line);
}

/* ---- The section pills ---- */

.vj-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8);
	margin-top: var(--vj-space-20);
}

.vj-pill {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding-inline: var(--vj-space-16);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-full);
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-14-size);
	font-weight: 500;
	text-decoration: none;
}

.vj-pill:hover {
	border-color: var(--vj-brand-navy);
}

.vj-pill.is-current {
	background: var(--vj-brand-orange);
	border-color: var(--vj-brand-orange);
	color: var(--vj-text-primary);
	font-weight: 600;
}

/* ---- The coloured tiles ---- */
/* No photographs anywhere: stock pictures of people shaking hands say nothing
   true about a job, and every image is weight a slow phone has to carry. */

.vj-tile--green  { background: linear-gradient(135deg, var(--vj-status-success-ink) 0%, var(--vj-status-success) 100%); }
.vj-tile--orange { background: linear-gradient(135deg, var(--vj-state-orange-hover) 0%, var(--vj-brand-orange) 100%); }
.vj-tile--navy   { background: linear-gradient(135deg, var(--vj-brand-navy) 0%, var(--vj-brand-royal) 100%); }
.vj-tile--red    { background: linear-gradient(135deg, var(--vj-status-danger) 0%, color-mix(in srgb, var(--vj-status-danger) 80%, var(--vj-surface-card)) 100%); }
.vj-tile--blue   { background: linear-gradient(135deg, var(--vj-brand-royal) 0%, color-mix(in srgb, var(--vj-brand-royal) 55%, var(--vj-brand-sky)) 100%); }

.vj-tile--green,
.vj-tile--orange,
.vj-tile--navy,
.vj-tile--red,
.vj-tile--blue {
	color: var(--vj-surface-card);
}

/* ---- The featured article ---- */

.vj-featured {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	margin-top: var(--vj-space-32);
	overflow: hidden;
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

.vj-featured__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
}

.vj-featured__body {
	padding: var(--vj-space-32);
}

.vj-featured__title {
	margin: var(--vj-space-8) 0 var(--vj-space-12);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-1-size);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.vj-featured__title a,
.vj-article-card__title a {
	color: var(--vj-text-primary);
	text-decoration: none;
}

.vj-featured__title a:hover,
.vj-article-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vj-featured__excerpt {
	max-width: 58ch;
	margin: 0 0 var(--vj-space-16);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
}

/* ---- The byline ---- */

.vj-byline {
	display: flex;
	align-items: center;
	gap: var(--vj-space-12);
	margin: 0 0 var(--vj-space-20);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
}

.vj-byline__avatar {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--vj-brand-orange);
	border-radius: var(--vj-radius-full);
	color: var(--vj-surface-card);
	font-size: 12px;
	font-weight: 700;
}

.vj-byline__name {
	color: var(--vj-text-primary);
	font-weight: 700;
}

/* ---- The grid of cards ---- */

/* Three across, as in Figma 10:2. auto-fill gave four on a wide screen and
   made every card too narrow for its title. */
.vj-article-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vj-space-24);
	margin-top: var(--vj-space-32);
}

@media (max-width: 899px) {
	.vj-article-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.vj-article-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.vj-article-card__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 130px;
	margin-bottom: var(--vj-space-12);
	border-radius: var(--vj-radius-md);
}

.vj-article-card__section,
.vj-article-card__meta {
	margin: 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size, 12px);
	font-weight: 600;
}

.vj-article-card__section {
	color: var(--vj-brand-orange);
	text-transform: none;
}

.vj-article-card__title {
	margin: var(--vj-space-4) 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-4-size);
	font-weight: 700;
	line-height: 1.3;
}

/* ---- One article. Figma 10:156 ---- */

.vj-article__head {
	max-width: 76ch;
	margin-bottom: var(--vj-space-24);
}

.vj-article__title {
	margin: 0 0 var(--vj-space-12);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-display-l-size);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--vj-text-primary);
}

.vj-article__standfirst {
	margin: 0 0 var(--vj-space-20);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-18-size, 18px);
	line-height: 1.55;
}

.vj-article__byline .vj-byline {
	margin: 0;
	align-items: flex-start;
}

.vj-article__hero {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 260px;
	margin-bottom: var(--vj-space-32);
	border-radius: var(--vj-radius-lg);
}

.vj-article__layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--vj-space-40);
	align-items: start;
}

/* Only one column when there is no contents list to put beside it. */
.vj-article__layout:not(:has(.vj-toc)) {
	grid-template-columns: minmax(0, 1fr);
	max-width: 76ch;
}

.vj-toc {
	position: sticky;
	top: var(--vj-space-24);
	padding: var(--vj-space-16);
	background: var(--vj-surface-page);
	border-radius: var(--vj-radius-md);
}

.vj-toc__title {
	margin: 0 0 var(--vj-space-8);
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size, 12px);
	font-weight: 700;
}

.vj-toc__list {
	margin: 0;
	padding-left: var(--vj-space-20);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
}

.vj-toc__list li {
	margin-bottom: var(--vj-space-4);
}

.vj-toc__list a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--vj-text-primary);
	text-decoration: none;
}

.vj-toc__list a:hover {
	text-decoration: underline;
}

/* ---- The article body ---- */

.vj-article__body {
	max-width: 72ch;
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-16-size);
	line-height: 1.7;
}

.vj-article__body h2 {
	margin: var(--vj-space-32) 0 var(--vj-space-12);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: 700;
	line-height: 1.25;
	/* So a heading jumped to from the contents list is not tight against the
	   top of the window. */
	scroll-margin-top: var(--vj-space-24);
}

.vj-article__body p {
	margin: 0 0 var(--vj-space-16);
	color: var(--vj-text-secondary);
}

.vj-article__body ul {
	margin: 0 0 var(--vj-space-16);
	padding-left: var(--vj-space-20);
	color: var(--vj-text-secondary);
}

.vj-article__body li {
	margin-bottom: var(--vj-space-8);
}

.vj-article__body blockquote {
	margin: var(--vj-space-24) 0;
	padding: var(--vj-space-4) 0 var(--vj-space-4) var(--vj-space-20);
	border-left: 3px solid var(--vj-brand-orange);
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-18-size, 18px);
	font-weight: 700;
	line-height: 1.45;
}

.vj-article__body blockquote p {
	margin: 0;
	color: inherit;
}

.vj-article__body a {
	color: var(--vj-brand-navy);
	text-underline-offset: 2px;
}

.vj-article__foot {
	margin-top: var(--vj-space-40);
	padding-top: var(--vj-space-16);
	border-top: 1px solid var(--vj-border-default);
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
}

.vj-article__foot a {
	color: var(--vj-brand-navy);
	font-weight: 600;
}

.vj-keep-reading {
	margin-top: var(--vj-space-48);
	padding-top: var(--vj-space-32);
	border-top: 1px solid var(--vj-border-default);
}

@media (max-width: 899px) {
	.vj-featured {
		grid-template-columns: minmax(0, 1fr);
	}

	.vj-featured__tile {
		min-height: 150px;
	}

	.vj-featured__body {
		padding: var(--vj-space-20);
	}

	.vj-article__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--vj-space-24);
	}

	/* Above the article on a phone, where it works as a summary of what is
	   coming rather than as something to navigate by. */
	.vj-toc {
		position: static;
	}

	.vj-article__hero {
		height: 170px;
	}
}

/* ------------------------------------------------------- Hero artwork -- */
/* Figma 1:218. Every position and angle below is read off that frame, which
   is 580 by 470 and sits to the right of the search. */

.vj-hero__inner {
	display: grid;
	/* auto, not 580px: the picture is drawn smaller below 1440, and a fixed
	   track would keep reserving its full size and squeeze the search box. */
	grid-template-columns: minmax(0, 660px) auto;
	justify-content: space-between;
	align-items: center;
	gap: var(--vj-space-40);
}

.vj-hero__copy {
	min-width: 0;
}

.vj-hero-art {
	position: relative;
	width: 580px;
	height: 470px;
	/* Only a picture: nothing in it can be pressed. */
	pointer-events: none;
	user-select: none;
}

/* A warm pink glow behind the cards. A radial gradient rather than the SVG in
   the design: same look, one request fewer, and it scales for free. */
.vj-hero-art__glow {
	position: absolute;
	top: -20px;
	left: 60px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--vj-brand-pink) 30%, transparent) 0%, color-mix(in srgb, var(--vj-brand-orange) 22%, transparent) 38%, transparent 70%);
	border-radius: 50%;
	filter: blur(8px);
}

.vj-hero-art__card {
	position: absolute;
	display: flex;
	gap: var(--vj-space-16);
	align-items: flex-start;
	padding: 22px;
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

/* Behind, tilted the other way, and faded so the front card reads first. */
.vj-hero-art__card--back {
	top: 227px;
	left: 116px;
	width: 470px;
	opacity: 0.55;
	transform: rotate(-5deg);
}

.vj-hero-art__card--front {
	top: 88px;
	left: 16px;
	width: 500px;
	box-shadow: 0 28px 60px 0 color-mix(in srgb, var(--vj-brand-navy) 40%, transparent);
	transform: rotate(3deg);
}

.vj-hero-art__logo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--vj-radius-md);
	font-family: var(--vj-font-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* The front card in the design wears green, the back one blue. */
.vj-hero-art__card--front .vj-hero-art__logo {
	background: var(--vj-status-success-soft);
	color: var(--vj-status-success);
}

.vj-hero-art__card--back .vj-hero-art__logo {
	background: var(--vj-surface-soft-blue);
	color: var(--vj-brand-navy);
}

.vj-hero-art__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--vj-space-8);
	min-width: 0;
}

.vj-hero-art__title {
	margin: 0;
	overflow: hidden;
	color: var(--vj-text-primary);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vj-hero-art__employer {
	display: flex;
	align-items: center;
	gap: var(--vj-space-8);
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.vj-hero-art__facts {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--vj-space-16);
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: 13px;
	white-space: nowrap;
}

.vj-hero-art__facts span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.vj-hero-art__tags {
	display: flex;
	gap: 6px;
	margin: 0;
}

.vj-hero-art__save {
	flex: 0 0 auto;
	color: var(--vj-text-secondary);
}

/* Over the right edge of the front card, turned a little, as a stamp is. */
.vj-hero-art__stamp {
	position: absolute;
	top: 160px;
	left: 408px;
	transform: rotate(10deg);
}

.vj-hero-art__stamp .vj-stamp {
	width: 128px;
	height: 128px;
	background: color-mix(in srgb, var(--vj-surface-card) 70%, transparent);
}

.vj-hero-art__toast {
	position: absolute;
	top: 0;
	left: 330px;
	display: flex;
	align-items: center;
	gap: var(--vj-space-12);
	padding: var(--vj-space-12) var(--vj-space-16);
	background: var(--vj-surface-card);
	border-radius: 14px;
	box-shadow: 0 14px 30px 0 color-mix(in srgb, var(--vj-brand-navy) 30%, transparent);
}

.vj-hero-art__toast-icon {
	display: flex;
	flex: 0 0 auto;
	padding: 7px;
	background: var(--vj-status-success-soft);
	border-radius: var(--vj-radius-full);
	color: var(--vj-status-success);
}

.vj-hero-art__toast-title,
.vj-hero-art__toast-text {
	display: block;
	white-space: nowrap;
}

.vj-hero-art__toast-title {
	color: var(--vj-text-primary);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.vj-hero-art__toast-text {
	color: var(--vj-text-muted);
	font-size: 12px;
	line-height: 1.4;
}

/* Below the width where the two columns fit side by side, the copy has the
   screen to itself. The artwork is decoration, and on a phone the search box
   is the only thing in the hero that matters. It is not downloaded as an
   image, so leaving it out costs nothing to fetch either. */
/*
 * The frame is 580 wide but the notification pokes 21px past it, exactly as in
 * Figma, where it hangs into the page margin. Below 1440 there is no margin
 * wide enough to hang into, so the whole picture is drawn a little smaller.
 * zoom rather than transform: zoom shrinks the space it takes in the layout
 * too, so the search box keeps its full 660px instead of being squeezed. It
 * matters on 1366-wide laptops, which are among the most common screens in
 * India and would otherwise lose the picture entirely.
 */
@media (max-width: 1439px) {
	.vj-hero-art {
		zoom: 0.84;
	}
}

/* Belt and braces: whatever the width, the picture never makes the page
   scroll sideways. */
.vj-hero {
	overflow-x: clip;
}

@media (max-width: 1239px) {
	.vj-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.vj-hero-art {
		display: none;
	}
}

/* ------------------------------------------------ Job page, as designed -- */
/* Figma 3:2 desktop and 4:193 phone. These rules come after the first job
   page block and replace its layout where the two differ. */

.vj-card {
	padding: var(--vj-space-24);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

.vj-job {
	grid-template-columns: minmax(0, 1fr) 390px;
	gap: var(--vj-space-24);
}

.vj-job__main {
	gap: var(--vj-space-16);
}

/* ---- The head card ---- */

.vj-job__identity {
	position: relative;
	align-items: flex-start;
	margin-bottom: var(--vj-space-20);
}

.vj-job__logo {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
}

.vj-job__heading {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 52px;
}

.vj-job__title {
	margin: 0 0 var(--vj-space-8);
	font-size: 36px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.vj-job__save-icon {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-md);
	color: var(--vj-text-secondary);
	cursor: pointer;
}

.vj-job__save-icon:hover {
	border-color: var(--vj-brand-navy);
	color: var(--vj-brand-navy);
}

.vj-job__save-icon[aria-pressed="true"] {
	color: var(--vj-brand-orange);
}

/* Four facts in grey tiles, Figma 3:2. */
.vj-job__tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--vj-space-12);
	margin: 0 0 var(--vj-space-16);
}

.vj-job__tile {
	padding: var(--vj-space-12) var(--vj-space-12);
	background: var(--vj-surface-page);
	border-radius: var(--vj-radius-md);
}

.vj-job__tile dt {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--vj-space-4);
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size, 12px);
	font-weight: 500;
}

.vj-job__tile dd {
	margin: 0;
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-15-size);
	font-weight: 700;
	line-height: 1.3;
}

.vj-job__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8) var(--vj-space-24);
	margin: 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
}

.vj-job__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ---- How we checked ---- */

.vj-job__checked {
	display: flex;
	align-items: center;
	gap: var(--vj-space-24);
}

.vj-job__checked-stamp {
	flex: 0 0 auto;
}

.vj-job__checked-title {
	margin: 0 0 var(--vj-space-4);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-4-size);
	font-weight: 700;
	color: var(--vj-text-primary);
}

.vj-job__checked-text {
	margin: 0 0 var(--vj-space-4);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
}

.vj-job__checked-note {
	margin: 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
}

/* ---- Never pay ---- */

.vj-job__never-pay {
	margin: 0;
	padding: var(--vj-space-16) var(--vj-space-20);
	border-radius: var(--vj-radius-lg);
}

.vj-job__never-pay-title {
	color: var(--vj-status-danger-ink);
	font-weight: 700;
}

/* ---- About the job ---- */

.vj-job__block-title {
	margin: 0 0 var(--vj-space-12);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: 700;
	color: var(--vj-text-primary);
}

.vj-job__about > p {
	margin: 0 0 var(--vj-space-12);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
}

.vj-job__kind {
	color: var(--vj-text-muted) !important;
	font-size: var(--vj-text-body-13-size) !important;
	font-weight: 600;
}

.vj-job__sub {
	margin: var(--vj-space-20) 0 var(--vj-space-8);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-body-15-size);
	font-weight: 700;
	color: var(--vj-text-primary);
}

.vj-ticks {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
}

.vj-ticks li {
	display: flex;
	align-items: flex-start;
	gap: var(--vj-space-8);
}

.vj-ticks .vj-icon {
	flex: 0 0 auto;
	margin-top: 3px;
	padding: 2px;
	width: 18px;
	height: 18px;
	background: var(--vj-surface-soft-blue);
	border-radius: 5px;
	color: var(--vj-brand-navy);
}

.vj-job__about .vj-job__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8);
	margin: 0;
}

.vj-chip--benefit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--vj-status-success-soft);
	border-color: transparent;
	color: var(--vj-status-success-ink);
}

/* ---- The employer ---- */

.vj-job__company-head {
	display: flex;
	align-items: center;
	gap: var(--vj-space-12);
	margin-bottom: var(--vj-space-12);
}

.vj-job__company-name {
	margin: 0;
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-15-size);
	font-weight: 700;
}

.vj-job__company-meta {
	margin: 2px 0 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
}

.vj-job__company-about {
	margin: 0 0 var(--vj-space-12);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
}

.vj-job__company-link {
	display: inline-flex;
	align-items: center;
	gap: var(--vj-space-4);
	min-height: 24px;
	color: var(--vj-brand-navy);
	font-size: var(--vj-text-body-14-size);
	font-weight: 700;
	text-decoration: none;
}

.vj-job__company-link:hover {
	text-decoration: underline;
}

/* ---- The apply card ---- */

.vj-job__side {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-16);
}

.vj-job__apply {
	position: sticky;
	top: var(--vj-space-16);
	box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--vj-brand-navy) 30%, transparent);
}

.vj-job__apply-label {
	margin: 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
}

.vj-job__apply-pay {
	margin: var(--vj-space-4) 0 0;
	font-family: var(--vj-font-display);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--vj-text-primary);
}

.vj-job__apply-extras {
	margin: var(--vj-space-4) 0 0;
	color: var(--vj-status-success-ink);
	font-size: var(--vj-text-body-13-size);
	font-weight: 600;
}

.vj-job__apply .vj-job__apply-btn {
	width: 100%;
	margin-top: var(--vj-space-16);
}

.vj-job__apply-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vj-space-8);
	margin-top: var(--vj-space-8);
}

.vj-job__apply-row .vj-btn {
	justify-content: center;
	gap: 6px;
}

.vj-job__apply-note {
	display: flex;
	align-items: flex-start;
	gap: var(--vj-space-8);
	margin: var(--vj-space-12) 0 0;
	padding: var(--vj-space-12);
	background: var(--vj-surface-page);
	border-radius: var(--vj-radius-md);
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size, 12px);
	line-height: 1.45;
}

.vj-job__apply-note .vj-icon {
	flex: 0 0 auto;
	margin-top: 1px;
}

.vj-job__closing {
	margin-top: var(--vj-space-16);
}

.vj-job__closing-text {
	display: flex;
	justify-content: space-between;
	margin: 0 0 6px;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-12-size, 12px);
	font-weight: 500;
}

.vj-job__closing-bar {
	display: block;
	height: 4px;
	overflow: hidden;
	background: var(--vj-border-default);
	border-radius: var(--vj-radius-full);
}

.vj-job__closing-bar span {
	display: block;
	height: 100%;
	background: var(--vj-brand-orange);
}

/* ---- Similar jobs, in the sidebar ---- */

.vj-job__side-title {
	margin: 0 0 var(--vj-space-8);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-4-size);
	font-weight: 700;
	color: var(--vj-text-primary);
}

.vj-job__similar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-job__similar li + li {
	border-top: 1px solid var(--vj-border-default);
}

.vj-job__similar a {
	display: flex;
	align-items: center;
	gap: var(--vj-space-12);
	padding-block: var(--vj-space-12);
	color: var(--vj-text-primary);
	text-decoration: none;
}

.vj-job__similar a:hover .vj-job__similar-title {
	text-decoration: underline;
}

.vj-job__similar-text {
	flex: 1 1 auto;
	min-width: 0;
}

.vj-job__similar-title,
.vj-job__similar-meta {
	display: block;
}

.vj-job__similar-title {
	font-size: var(--vj-text-body-14-size);
	font-weight: 700;
}

.vj-job__similar-meta {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size, 12px);
}

.vj-job__similar .vj-icon {
	flex: 0 0 auto;
	color: var(--vj-text-muted);
}

/* ---- Spot a fake job ---- */

.vj-job__tips {
	padding: var(--vj-space-20);
	background: var(--vj-surface-hero-end);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

.vj-job__tips-title {
	display: flex;
	align-items: center;
	gap: var(--vj-space-8);
	margin: 0 0 var(--vj-space-12);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-body-15-size);
	font-weight: 700;
	color: var(--vj-text-primary);
}

.vj-job__tips-title .vj-icon {
	color: var(--vj-brand-orange);
}

.vj-job__tips ul {
	margin: 0 0 var(--vj-space-12);
	padding-left: var(--vj-space-20);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	line-height: 1.5;
}

.vj-job__tips li {
	margin-bottom: var(--vj-space-8);
}

.vj-job__tips li::marker {
	color: var(--vj-brand-orange);
}

.vj-job__tips a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--vj-brand-navy);
	font-size: var(--vj-text-body-13-size);
	font-weight: 700;
}

/* ---- The bar at the foot of a phone. Figma 4:193 ---- */

.vj-apply-bar {
	display: none;
}

@media (max-width: 1023px) {
	.vj-job {
		grid-template-columns: minmax(0, 1fr);
	}

	.vj-job__apply {
		position: static;
	}

	/* The bar is the way to apply here, so the card's own buttons would only
	   repeat it; the salary and the closing date above them still matter. */
	.vj-has-applybar .vj-job__apply .vj-job__apply-btn,
	.vj-has-applybar .vj-job__apply-row {
		display: none;
	}

	.vj-has-applybar .vj-tabbar {
		display: none;
	}

	.vj-has-applybar {
		padding-bottom: 88px;
	}

	.vj-apply-bar {
		position: fixed;
		inset: auto 0 0;
		z-index: 50;
		display: flex;
		gap: var(--vj-space-12);
		padding: var(--vj-space-12) var(--vj-space-16) calc(var(--vj-space-12) + env(safe-area-inset-bottom));
		background: var(--vj-surface-card);
		border-top: 1px solid var(--vj-border-default);
		box-shadow: 0 -8px 24px -18px color-mix(in srgb, var(--vj-brand-navy) 40%, transparent);
	}

	.vj-apply-bar__save {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		padding: 0;
		background: var(--vj-surface-card);
		border: 1px solid var(--vj-border-default);
		border-radius: var(--vj-radius-md);
		color: var(--vj-text-secondary);
		cursor: pointer;
	}

	.vj-apply-bar__go {
		flex: 1 1 auto;
		justify-content: center;
		min-height: 52px;
		font-size: var(--vj-text-body-16-size);
	}
}

@media (max-width: 767px) {
	/* The logo gets a row of its own with the save button beside it, and the
	   title the full width below, as in Figma 4:193. Side by side, a word like
	   "Development" at this size ran straight under the save button. */
	.vj-job__identity {
		flex-direction: column;
		gap: var(--vj-space-12);
	}

	.vj-job__heading {
		padding-right: 0;
	}

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

	.vj-job__title {
		font-size: 28px;
		overflow-wrap: anywhere;
	}

	.vj-job__checked {
		gap: var(--vj-space-16);
	}

}

/* ------------------------------------------------ Listing page, as designed -- */
/* Figma 6:2 (role in a city) and its siblings 38:2, 44:2, 51:2, 52:2. */

/* The band sits flush under the header, so the page loses its own top gap.
   Two classes, because .vj-main sets the padding in main.css, which loads
   after this file and would otherwise put it straight back. */
.vj-main.vj-main--flush {
	padding-top: 0;
}

.vj-listing-band {
	margin-bottom: var(--vj-space-32);
	padding-block: var(--vj-space-20) var(--vj-space-32);
	background: linear-gradient(120deg, var(--vj-surface-hero-start) 0%, var(--vj-surface-hero-end) 100%);
	border-bottom: 1px solid var(--vj-border-default);
}

.vj-listing-band .vj-listing__head {
	margin-block: var(--vj-space-16) var(--vj-space-20);
}

.vj-listing-band .vj-listing__lead {
	max-width: 64ch;
}

/* Four across, as in the design; two by two below that, never three and one. */
.vj-listing-band .vj-listing__stats {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-bottom: var(--vj-space-20);
}

@media (max-width: 899px) {
	.vj-listing-band .vj-listing__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vj-listing-band__search .vj-search {
	max-width: 660px;
}

.vj-listing {
	grid-template-columns: minmax(0, 1fr) 360px;
}

.vj-listing__main {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-16);
	min-width: 0;
}

.vj-listing__section {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: 700;
	line-height: 1.25;
	color: var(--vj-text-primary);
}

.vj-listing__main .vj-alert-banner {
	margin: var(--vj-space-8) 0 0;
}

.vj-listing__main .vj-faq {
	margin-top: var(--vj-space-8);
}

/* ---- Employers hiring ---- */

.vj-employers {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-employers li + li {
	border-top: 1px solid var(--vj-border-default);
}

.vj-employers a {
	display: flex;
	align-items: center;
	gap: var(--vj-space-12);
	padding-block: var(--vj-space-12);
	color: var(--vj-text-primary);
	text-decoration: none;
}

.vj-employers a:hover .vj-employers__name {
	text-decoration: underline;
}

.vj-employers__logo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--vj-surface-soft-blue);
	border-radius: var(--vj-radius-md);
	color: var(--vj-brand-navy);
	font-size: 12px;
	font-weight: 700;
}

.vj-employers__text {
	flex: 1 1 auto;
	min-width: 0;
}

.vj-employers__name,
.vj-employers__jobs {
	display: block;
}

.vj-employers__name {
	overflow: hidden;
	font-size: var(--vj-text-body-14-size);
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vj-employers__jobs {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size, 12px);
}

.vj-employers__tick {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 22px;
	background: var(--vj-status-success-soft);
	border-radius: var(--vj-radius-full);
	color: var(--vj-status-success);
}

/* ---- Other jobs as chips ---- */

.vj-links__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8);
	margin: 0;
}

.vj-links__chips .vj-chip {
	text-decoration: none;
}

.vj-links__chips .vj-chip:hover {
	border-color: var(--vj-brand-navy);
}

/* ---- Before you accept an offer: the one dark card, Figma 6:2 ---- */

.vj-offer-tips {
	padding: var(--vj-space-20);
	background: var(--vj-brand-navy);
	border-radius: var(--vj-radius-lg);
	color: var(--vj-surface-card);
}

.vj-offer-tips__title {
	display: flex;
	align-items: center;
	gap: var(--vj-space-8);
	margin: 0 0 var(--vj-space-12);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-body-15-size);
	font-weight: 700;
	color: var(--vj-surface-card);
}

.vj-offer-tips__title .vj-icon {
	color: var(--vj-brand-orange);
}

.vj-offer-tips ul {
	margin: 0;
	padding-left: var(--vj-space-20);
	font-size: var(--vj-text-body-13-size);
	line-height: 1.5;
	/* White at 86% on navy: 12.9:1, comfortably past AA. */
	color: color-mix(in srgb, var(--vj-surface-card) 86%, transparent);
}

.vj-offer-tips li + li {
	margin-top: var(--vj-space-8);
}

.vj-offer-tips li::marker {
	color: var(--vj-brand-orange);
}

@media (max-width: 1023px) {
	.vj-listing {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------ Company page, as designed -- */
/* Figma 6:377 desktop, 12:421 phone. */

.vj-company-cover {
	min-height: 150px;
	padding-top: var(--vj-space-16);
	background: linear-gradient(120deg, var(--vj-surface-hero-start) 0%, var(--vj-surface-hero-end) 100%);
	border-bottom: 1px solid var(--vj-border-default);
}

/* The tile sits across the bottom edge of the band. */
.vj-company__head {
	display: flex;
	align-items: flex-end;
	gap: var(--vj-space-20);
	margin: -44px 0 var(--vj-space-32);
}

.vj-company__logo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	overflow: hidden;
	background: var(--vj-surface-soft-blue);
	border: 4px solid var(--vj-surface-card);
	border-radius: var(--vj-radius-lg);
	box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--vj-brand-navy) 35%, transparent);
	color: var(--vj-brand-navy);
	font-family: var(--vj-font-display);
	font-size: 28px;
	font-weight: 800;
}

.vj-company__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vj-company__identity {
	min-width: 0;
	padding-bottom: 2px;
}

.vj-company__name {
	margin: 0 0 var(--vj-space-8);
	font-family: var(--vj-font-display);
	font-size: 36px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--vj-text-primary);
}

.vj-company__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vj-space-8) var(--vj-space-16);
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
}

.vj-company .vj-listing__main {
	gap: var(--vj-space-16);
}

.vj-card__title {
	margin: 0 0 var(--vj-space-12);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: 700;
	color: var(--vj-text-primary);
}

.vj-card__title--small {
	font-size: var(--vj-text-heading-4-size);
}

.vj-card__text {
	margin: 0 0 var(--vj-space-12);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-15-size);
	line-height: var(--vj-text-body-15-line);
}

.vj-card__text:last-child {
	margin-bottom: 0;
}

.vj-card__note {
	margin: 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
	line-height: 1.5;
}

.vj-company .vj-job-list {
	margin-top: var(--vj-space-4);
}

/* ---- Company details ---- */

.vj-company-details dl {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-12);
	margin: 0;
}

.vj-company-details dt {
	display: flex;
	align-items: center;
	gap: var(--vj-space-8);
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-13-size);
	font-weight: 700;
}

.vj-company-details dt .vj-icon {
	color: var(--vj-text-muted);
}

.vj-company-details dd {
	margin: 2px 0 0 24px;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
}

.vj-company-details dd a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--vj-brand-navy);
}

/* ---- Verified employer ---- */

.vj-company-verified {
	display: flex;
	align-items: center;
	gap: var(--vj-space-16);
}

.vj-company-verified__stamp {
	flex: 0 0 auto;
}

@media (max-width: 767px) {
	.vj-company-cover {
		min-height: 110px;
	}

	/* Logo above the name, as on a phone in 12:421. */
	.vj-company__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--vj-space-12);
		margin-top: -36px;
	}

	.vj-company__logo {
		width: 72px;
		height: 72px;
		font-size: 24px;
	}

	.vj-company__name {
		font-size: 28px;
	}
}

/* ------------------------------------------------- Salary page, as designed -- */
/* Figma 11:350. */

.vj-salary-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: var(--vj-space-32);
	align-items: center;
}

.vj-salary-band__copy .vj-listing__title {
	margin: var(--vj-space-16) 0 var(--vj-space-8);
}

.vj-salary-band__copy .vj-listing__lead {
	margin: 0;
}

.vj-salary-figure__label {
	margin: 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
}

.vj-salary-figure__value {
	margin: var(--vj-space-4) 0 var(--vj-space-8);
	font-family: var(--vj-font-display);
	font-size: 44px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--vj-text-primary);
}

.vj-salary-figure__none {
	margin: var(--vj-space-4) 0 var(--vj-space-8);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: 700;
	color: var(--vj-text-primary);
}

.vj-salary-figure__note {
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	line-height: 1.5;
}

.vj-salary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
	gap: var(--vj-space-24);
	margin-bottom: var(--vj-space-24);
}

/* ---- The bars ---- */

.vj-bars {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-bars__row {
	display: flex;
	justify-content: space-between;
	gap: var(--vj-space-12);
	margin-bottom: 6px;
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
}

.vj-bars__value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.vj-bars__track {
	display: block;
	height: 8px;
	overflow: hidden;
	background: var(--vj-surface-page);
	border-radius: var(--vj-radius-full);
}

.vj-bars__track span {
	display: block;
	height: 100%;
	background: var(--vj-brand-navy);
	border-radius: var(--vj-radius-full);
}

.vj-bars--green .vj-bars__track {
	background: var(--vj-status-success-soft);
}

.vj-bars--green .vj-bars__track span {
	background: var(--vj-status-success);
}

.vj-bars--green .vj-bars__value {
	color: var(--vj-status-success-ink);
}

.vj-bars__note {
	display: block;
	margin-top: 4px;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size, 12px);
}

/* ---- Compare with nearby cities ---- */

.vj-salary-compare {
	margin-bottom: var(--vj-space-24);
	padding-bottom: var(--vj-space-8);
}

.vj-table-wrap {
	overflow-x: auto;
	margin-inline: calc(-1 * var(--vj-space-24));
}

.vj-salary-compare .vj-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: var(--vj-text-body-14-size);
}

.vj-salary-compare th,
.vj-salary-compare td {
	padding: var(--vj-space-12) var(--vj-space-24);
	border-top: 1px solid var(--vj-border-default);
	text-align: left;
}

.vj-salary-compare thead th {
	background: var(--vj-surface-page);
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size, 12px);
	font-weight: 600;
}

.vj-salary-compare tbody th {
	color: var(--vj-text-primary);
	font-weight: 700;
}

.vj-salary-compare td {
	color: var(--vj-text-secondary);
	font-variant-numeric: tabular-nums;
}

.vj-salary-compare a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--vj-brand-navy);
	font-weight: 700;
}

/* ---- The orange band at the foot ---- */

.vj-cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vj-space-16);
	padding: var(--vj-space-32) var(--vj-space-32);
	background: var(--vj-brand-orange);
	border-radius: var(--vj-radius-lg);
}

.vj-cta-band__text {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: 800;
	line-height: 1.25;
	/* Dark text on orange, the rule in the design language: white on this
	   orange does not pass contrast. */
	color: var(--vj-text-primary);
}

@media (max-width: 899px) {
	.vj-salary-band__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.vj-cta-band {
		padding: var(--vj-space-20);
	}

	.vj-cta-band__text {
		font-size: var(--vj-text-heading-3-size);
	}
}

/* --------------------------------------------- Salary guide index, as designed -- */
/* Figma 56:2. */

.vj-salary-search {
	max-width: 760px;
}

/* A select dressed as the text field beside it. */
.vj-salary-search__select {
	appearance: none;
	background: transparent;
	cursor: pointer;
}

.vj-salary-search__miss {
	margin: var(--vj-space-12) 0 0;
	color: var(--vj-status-danger-ink);
	font-size: var(--vj-text-body-14-size);
	font-weight: 600;
}

.vj-section__sub {
	margin: var(--vj-space-4) 0 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-14-size);
}

.vj-guide-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	gap: var(--vj-space-16);
}

.vj-guide {
	display: flex;
	flex-direction: column;
	gap: var(--vj-space-8);
	color: var(--vj-text-primary);
	text-decoration: none;
}

.vj-guide:hover {
	border-color: var(--vj-brand-navy);
}

.vj-guide__title {
	font-size: var(--vj-text-body-14-size);
	font-weight: 700;
}

.vj-guide__value {
	font-family: var(--vj-font-display);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
}

.vj-guide__range {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
}

/* ---- Salaries by city: labels, not links, because there is no page for a
   city's pay on its own ---- */

.vj-city-pay {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-city-pay li {
	display: inline-flex;
	align-items: baseline;
	gap: var(--vj-space-8);
	padding: var(--vj-space-8) var(--vj-space-16);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-full);
	font-size: var(--vj-text-body-14-size);
}

.vj-city-pay__name {
	color: var(--vj-text-primary);
	font-weight: 600;
}

.vj-city-pay__value {
	color: var(--vj-text-muted);
	font-variant-numeric: tabular-nums;
}

/* ---- The two notes at the foot ---- */

.vj-salary-notes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
	gap: var(--vj-space-24);
	margin-top: var(--vj-space-32);
}

.vj-salary-note {
	padding: var(--vj-space-24);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

.vj-salary-note--method {
	background: var(--vj-surface-soft-blue);
}

.vj-salary-note--employers {
	background: var(--vj-brand-orange-soft);
}

.vj-salary-note__title {
	margin: 0 0 var(--vj-space-8);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-body-15-size);
	font-weight: 700;
	color: var(--vj-text-primary);
}

.vj-salary-note p {
	margin: 0 0 var(--vj-space-12);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
	line-height: 1.55;
}

.vj-salary-note p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------- Walk-ins page, as designed -- */
/* Figma 9:448. These come after the first drive styles and replace the card
   layout: the date becomes a full-height block down the left edge. */

.vj-walkin-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vj-space-12);
}

.vj-walkin-controls .vj-pills {
	margin-top: 0;
}

.vj-walkin-city {
	display: inline-flex;
	align-items: center;
	gap: var(--vj-space-8);
	min-height: 44px;
	padding: 0 var(--vj-space-12);
	background: var(--vj-surface-card);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-md);
	color: var(--vj-text-muted);
}

.vj-walkin-city select {
	min-height: 40px;
	padding: 0 var(--vj-space-4);
	background: transparent;
	border: 0;
	color: var(--vj-text-primary);
	font: inherit;
	font-size: var(--vj-text-body-14-size);
	font-weight: 600;
	cursor: pointer;
}

.vj-drive {
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.vj-drive__when {
	width: 96px;
	height: auto;
	align-self: stretch;
	border-radius: 0;
	background: var(--vj-surface-soft-blue);
	color: var(--vj-brand-navy);
}

.vj-drive__day {
	font-size: 34px;
}

/* Today and tomorrow stand out: navy block, orange month. */
.vj-drive.is-soon .vj-drive__when {
	background: var(--vj-brand-navy);
	color: var(--vj-surface-card);
}

.vj-drive.is-soon .vj-drive__month {
	color: var(--vj-brand-orange);
}

.vj-drive__body {
	flex: 1 1 auto;
	padding: var(--vj-space-20);
}

.vj-drive__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8);
	margin: 0;
}

.vj-tag--soon {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--vj-space-8);
	background: var(--vj-brand-orange-soft);
	border-radius: var(--vj-radius-full);
	color: var(--vj-brand-orange-ink);
	font-size: var(--vj-text-body-12-size, 12px);
	font-weight: 700;
}

.vj-drive__title {
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-4-size);
	font-weight: 700;
}

.vj-drive__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-4) var(--vj-space-16);
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
}

.vj-drive__facts span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.vj-drive__venue {
	margin: 0;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
}

.vj-drive__bring {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.vj-drive__bring-label {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-13-size);
	font-weight: 600;
}

.vj-drive__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8);
	margin: var(--vj-space-4) 0 0;
}

.vj-drive__actions .vj-btn {
	gap: 6px;
}

/* ---- Walk-in checklist ---- */

.vj-walkin-checklist {
	padding: var(--vj-space-20);
	background: var(--vj-brand-orange-soft);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
}

.vj-walkin-checklist__title {
	margin: 0 0 var(--vj-space-12);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-body-15-size);
	font-weight: 700;
	color: var(--vj-brand-orange-ink);
}

.vj-walkin-checklist ul {
	margin: 0 0 var(--vj-space-12);
	padding-left: var(--vj-space-20);
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	line-height: 1.5;
}

.vj-walkin-checklist li + li {
	margin-top: 4px;
}

.vj-walkin-checklist p {
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	line-height: 1.5;
}

.vj-walkin-checklist a {
	color: var(--vj-brand-navy);
	font-weight: 700;
}

@media (max-width: 599px) {
	.vj-drive__when {
		width: 64px;
	}

	.vj-drive__day {
		font-size: 26px;
	}

	.vj-drive__body {
		padding: var(--vj-space-16);
	}
}

/* ---------------------------------------- Follow, and I will attend -- */
/* Figma 6:377 and 9:448. Both are links for someone signed out and toggles
   for someone signed in; the "on" state has to be unmistakable either way. */

.vj-company__follow {
	flex: 0 0 auto;
	align-self: flex-end;
	gap: var(--vj-space-8);
	margin-left: auto;
}

/* Following: the same button, quieter, so it reads as done rather than as a
   second thing to press. */
.vj-company__follow.is-on,
.vj-drive__actions [data-vj-attend].is-on {
	background: var(--vj-status-success-soft);
	border-color: var(--vj-status-success);
	color: var(--vj-status-success-ink);
}

.vj-company__follow[aria-disabled="true"],
.vj-drive__actions [data-vj-attend][aria-disabled="true"] {
	opacity: 0.6;
	pointer-events: none;
}

.vj-walkin-checklist__attend {
	margin-bottom: var(--vj-space-12) !important;
	padding-bottom: var(--vj-space-12);
	border-bottom: 1px solid var(--vj-border-default);
}

@media (max-width: 767px) {
	.vj-company__follow {
		align-self: stretch;
		justify-content: center;
		margin-left: 0;
	}
}

/* ---------------------------------------------------- My applications -- */
/* Figma 4:363. Drawn for a phone; on a wider screen the same column of cards
   is kept to a readable width rather than stretched across the page. */

.vj-apps {
	max-width: 760px;
}

.vj-apps__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8);
	margin-bottom: var(--vj-space-16);
}

.vj-apps__chip {
	cursor: pointer;
	font-weight: 600;
}

.vj-apps__count {
	font-variant-numeric: tabular-nums;
}

.vj-apps__list {
	display: grid;
	gap: var(--vj-space-12);
}

.vj-apps__loading {
	margin: 0;
	padding: var(--vj-space-24) 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-14-size);
}

.vj-apps__card {
	display: grid;
	gap: var(--vj-space-16);
	padding: var(--vj-space-16);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
	background: var(--vj-surface-card);
}

.vj-apps__card.is-withdrawn {
	background: var(--vj-surface-page);
}

.vj-apps__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--vj-space-12);
	align-items: start;
}

.vj-apps__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--vj-radius-md);
	background: var(--vj-surface-soft-blue);
	color: var(--vj-brand-navy);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-label-14-size);
	font-weight: 700;
	overflow: hidden;
}

.vj-apps__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vj-apps__text {
	min-width: 0;
}

.vj-apps__title {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-4-size);
	font-weight: 700;
	line-height: var(--vj-text-heading-4-line);
	color: var(--vj-text-primary);
}

.vj-apps__title a {
	display: inline-block;
	min-height: 24px;
	color: inherit;
	text-decoration: none;
}

.vj-apps__title a:hover {
	text-decoration: underline;
}

.vj-apps__title:focus {
	outline: none;
}

.vj-apps__where {
	margin: 2px 0 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
}

.vj-apps__date {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size);
	line-height: var(--vj-text-heading-4-line);
	white-space: nowrap;
}

/* The five steps. Each step draws the line leading into it, so a passed
   step's line is dark and the rest stay grey. */
.vj-track {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-track__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 0;
	text-align: center;
}

.vj-track__step + .vj-track__step::before {
	content: "";
	position: absolute;
	top: 6px;
	right: 50%;
	width: 100%;
	height: 2px;
	background: var(--vj-border-default);
}

.vj-track__step.is-done::before,
.vj-track__step.is-current::before {
	background: var(--vj-brand-navy);
}

.vj-track__dot {
	position: relative;
	z-index: 1;
	width: 14px;
	height: 14px;
	border: 2px solid var(--vj-border-strong);
	border-radius: var(--vj-radius-full);
	background: var(--vj-surface-card);
}

.vj-track__step.is-done .vj-track__dot {
	border-color: var(--vj-brand-navy);
	background: var(--vj-brand-navy);
}

.vj-track__step.is-current .vj-track__dot {
	border-color: var(--vj-brand-navy);
	background: var(--vj-brand-orange);
}

.vj-track__step.is-declined .vj-track__dot {
	border-color: var(--vj-status-danger);
	background: var(--vj-status-danger);
}

.vj-track__label {
	max-width: 100%;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-11-size);
	line-height: var(--vj-text-body-11-line);
	hyphens: auto;
}

.vj-track__step.is-current .vj-track__label {
	color: var(--vj-text-primary);
	font-weight: 700;
}

.vj-track__step.is-declined .vj-track__label {
	color: var(--vj-status-danger-ink);
	font-weight: 700;
}

.vj-apps__note {
	display: flex;
	gap: var(--vj-space-12);
	align-items: flex-start;
	padding: var(--vj-space-12) var(--vj-space-16);
	border-radius: var(--vj-radius-md);
	background: var(--vj-surface-soft-blue);
	color: var(--vj-brand-navy);
}

.vj-apps__note > svg {
	flex: 0 0 auto;
	margin-top: 2px;
}

.vj-apps__note-title,
.vj-apps__note-text {
	margin: 0;
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
}

.vj-apps__note-title {
	font-weight: 700;
	color: var(--vj-text-primary);
}

.vj-apps__note-text {
	color: var(--vj-text-secondary);
}

/* A note from the employer on its own, with no heading above it. */
.vj-apps__note-only {
	margin: 0;
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-13-size);
	font-weight: 500;
	line-height: var(--vj-text-body-13-line);
}

/* The smallest phones: five labels need every pixel of the card. */
@media (max-width: 359px) {
	.vj-apps__card {
		padding: var(--vj-space-12);
	}

	.vj-track__label {
		font-size: 10px;
	}
}

.vj-apps__message {
	margin: 0;
	color: var(--vj-text-secondary);
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
}

/* The links keep a 44px target, pulled into the card's padding so the row
   looks no taller than a line of text. */
.vj-apps__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--vj-space-24);
	margin: calc(-1 * var(--vj-space-12)) 0 calc(-1 * var(--vj-space-12));
}

.vj-apps__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vj-brand-royal);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-14-size);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.vj-apps__link:hover {
	text-decoration: underline;
}

.vj-apps__link--quiet {
	color: var(--vj-text-secondary);
}

.vj-apps__confirm {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8);
	align-items: center;
}

.vj-apps__confirm-text {
	flex: 1 1 100%;
	margin: 0;
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-14-size);
	font-weight: 500;
}

/* ------------------------------------------------------- Browse all jobs -- */
/* Figma 7:287. Four category cards across on a desktop, each listing its
   roles with a count, then the cities in two columns and the employers
   hiring. */

/* The design's largest size, on screens with room for it. */
@media (min-width: 768px) {
	.vj-listing-band .vj-browse__title {
		font-size: var(--vj-text-display-xl-size);
		line-height: var(--vj-text-display-xl-line);
		letter-spacing: var(--vj-text-display-xl-tracking);
	}
}

.vj-browse__jump {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vj-space-8);
	margin-top: var(--vj-space-20);
}

.vj-browse__jump .vj-chip {
	min-height: 36px;
	padding-inline: var(--vj-space-16);
	color: var(--vj-text-primary);
	font-weight: 600;
	text-decoration: none;
}

/* The section in view, in the main action colour as the design has it. */
.vj-browse__jump .vj-chip[aria-current="true"] {
	background: var(--vj-brand-orange);
	border-color: var(--vj-brand-orange);
	color: var(--vj-text-primary);
}

.vj-browse {
	display: grid;
	gap: var(--vj-space-24);
	padding-bottom: var(--vj-space-64);
}

.vj-browse__section {
	scroll-margin-top: var(--vj-space-24);
}

.vj-browse__heading {
	margin: 0;
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-heading-2-size);
	font-weight: 700;
	line-height: var(--vj-text-heading-2-line);
	letter-spacing: var(--vj-text-heading-2-tracking);
	color: var(--vj-text-primary);
}

.vj-browse__cats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--vj-space-16);
	align-items: start;
}

@media (max-width: 1199px) {
	.vj-browse__cats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 899px) {
	.vj-browse__cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.vj-browse__cats {
		grid-template-columns: minmax(0, 1fr);
	}
}

.vj-browse-cat {
	padding: var(--vj-space-20);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
	background: var(--vj-surface-card);
}

.vj-browse-cat__title {
	margin: 0 0 var(--vj-space-8);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-15-size);
	font-weight: 700;
	line-height: var(--vj-text-label-15-line);
}

.vj-browse-cat__title a {
	display: flex;
	align-items: center;
	gap: var(--vj-space-12);
	min-height: 44px;
	color: var(--vj-text-primary);
	text-decoration: none;
}

.vj-browse-cat__title a:hover .vj-browse-cat__name {
	text-decoration: underline;
}

.vj-browse-cat__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: var(--vj-radius-md);
	background: var(--vj-tile-tint, var(--vj-surface-soft-blue));
	color: var(--vj-brand-navy);
}

.vj-browse-cat__roles,
.vj-browse-cities__list,
.vj-browse-cos {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vj-browse-cat__roles a,
.vj-browse-cities__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vj-space-12);
	min-height: 36px;
	color: var(--vj-text-primary);
	font-size: var(--vj-text-body-13-size);
	line-height: var(--vj-text-body-13-line);
	text-decoration: none;
}

.vj-browse-cat__roles a:hover .vj-browse-cat__role,
.vj-browse-cities__list a:hover .vj-browse-cities__name,
.vj-browse-co:hover .vj-browse-co__name {
	text-decoration: underline;
}

.vj-browse-cat__n {
	flex: 0 0 auto;
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size);
	font-variant-numeric: tabular-nums;
}

.vj-browse-cities {
	padding: var(--vj-space-24);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
	background: var(--vj-surface-card);
}

.vj-browse-cities__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--vj-space-40);
	margin-top: var(--vj-space-16);
}

@media (max-width: 767px) {
	.vj-browse-cities {
		padding: var(--vj-space-16);
	}

	.vj-browse-cities__cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.vj-browse-cities__col + .vj-browse-cities__col {
		margin-top: var(--vj-space-16);
	}
}

.vj-browse-cities__label {
	margin: 0;
	padding-bottom: var(--vj-space-8);
	border-bottom: 1px solid var(--vj-border-default);
	color: var(--vj-text-muted);
	font-family: var(--vj-font-body);
	font-size: var(--vj-text-label-13-size);
	font-weight: 600;
	line-height: var(--vj-text-label-13-line);
}

.vj-browse-cities__list li {
	border-bottom: 1px solid var(--vj-border-default);
}

.vj-browse-cities__list a {
	min-height: 44px;
}

.vj-browse-cities__name {
	font-size: var(--vj-text-label-14-size);
	font-weight: 600;
}

.vj-browse-cos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: var(--vj-space-12);
}

.vj-browse-co {
	display: flex;
	align-items: center;
	gap: var(--vj-space-12);
	height: 100%;
	padding: var(--vj-space-16);
	border: 1px solid var(--vj-border-default);
	border-radius: var(--vj-radius-lg);
	background: var(--vj-surface-card);
	color: var(--vj-text-primary);
	text-decoration: none;
}

.vj-browse-co:hover {
	border-color: var(--vj-border-strong);
}

.vj-browse-co__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: var(--vj-radius-md);
	background: var(--vj-surface-soft-blue);
	color: var(--vj-brand-navy);
	font-family: var(--vj-font-display);
	font-size: var(--vj-text-label-14-size);
	font-weight: 700;
}

.vj-browse-co__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.vj-browse-co__name {
	font-size: var(--vj-text-label-14-size);
	font-weight: 700;
	line-height: var(--vj-text-label-14-line);
}

.vj-browse-co__meta {
	color: var(--vj-text-muted);
	font-size: var(--vj-text-body-12-size);
	line-height: var(--vj-text-body-12-line);
}

.vj-browse__all {
	margin: 0;
}