/**
 * Solar Panel Verification — front end.
 *
 * Scoped entirely under .jsv so nothing leaks into the theme, and the brand
 * colours arrive as inline custom properties from Settings.
 *
 * Naming rule: every class is prefixed AND unique. An earlier version reused
 * .jsv-step for both the landing page and the operator form; the landing
 * rule's display:flex silently flattened the form at every screen width.
 */

/* ==================================================================
   Tokens
   ================================================================== */

.jsv {
	--jsv-primary: #0c4da2;
	--jsv-dark: #0a2e5c;
	--jsv-accent: #12a150;
	--jsv-lime: #8dc63f;

	--jsv-ink: #14202e;
	--jsv-ink-2: #3d4d5c;
	--jsv-muted: #64748b;
	--jsv-line: #e3e9f0;
	--jsv-line-2: #eef2f7;
	--jsv-bg: #f4f7fb;
	--jsv-card: #ffffff;
	--jsv-danger: #d1372f;
	--jsv-warn: #b7791f;

	--jsv-r-sm: 10px;
	--jsv-r: 14px;
	--jsv-r-lg: 20px;

	--jsv-sh-sm: 0 1px 2px rgba(15, 32, 51, .05);
	--jsv-sh: 0 1px 3px rgba(15, 32, 51, .06), 0 10px 28px rgba(15, 32, 51, .07);

	--jsv-pad: 16px;

	box-sizing: border-box;
	/* Themes that clamp content width must not clamp this container; the
	   measure is set by .jsv-wrap instead. */
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0 0 40px;
	color: var(--jsv-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
	text-align: left;
}

.jsv *,
.jsv *::before,
.jsv *::after {
	box-sizing: inherit;
}

/*
 * :where() keeps this at zero specificity. As a plain ".jsv p" rule it was
 * (0,1,1) and quietly beat every single-class component rule on a paragraph,
 * which is what stopped .jsv-hero__lead centring with its auto margins.
 */
.jsv :where(p) {
	margin: 0 0 12px;
}

.jsv :where(p:last-child) {
	margin-bottom: 0;
}

.jsv img {
	max-width: 100%;
	height: auto;
}

/* One shared measure for every block that is not deliberately full-bleed. */
.jsv-wrap {
	width: 100%;
	max-width: 660px;
	margin-inline: auto;
	padding-inline: var(--jsv-pad);
}

.jsv-wrap--wide {
	max-width: 1080px;
}

/* Forms read better a little narrower than marketing content. */
.jsv-wrap--app {
	max-width: 920px;
}

/*
 * The plugin renders its own heading, so the theme's page title lands
 * immediately above it as a near-duplicate. Hidden by default, and the
 * behaviour is a setting.
 */
body.jsv-hide-title .wp-block-post-title,
body.jsv-hide-title .entry-content > .entry-title,
body.jsv-hide-title .entry-header .entry-title {
	display: none;
}

.jsv-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.jsv-hidden {
	display: none !important;
}

/* ==================================================================
   Header
   ================================================================== */

.jsv-head {
	text-align: center;
	padding: 28px var(--jsv-pad) 24px;
}

.jsv-head--compact {
	padding: 20px var(--jsv-pad) 18px;
}

.jsv-head__brand {
	margin-bottom: 18px;
}

.jsv-logo {
	max-width: 200px;
	max-height: 66px;
	width: auto;
	display: inline-block;
}

.jsv-head--compact .jsv-logo {
	max-width: 150px;
	max-height: 50px;
}

.jsv-logo-text {
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--jsv-primary);
}

.jsv-head__title {
	margin: 0 0 10px;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 750;
	letter-spacing: -.022em;
	color: var(--jsv-dark);
}

.jsv-head--compact .jsv-head__title {
	font-size: 23px;
}

.jsv-head__sub {
	margin: 0 auto;
	max-width: 52ch;
	color: var(--jsv-muted);
	font-size: 16px;
	line-height: 1.55;
}

/* ==================================================================
   Cards
   ================================================================== */

.jsv-card {
	background: var(--jsv-card);
	border: 1px solid var(--jsv-line);
	border-radius: var(--jsv-r);
	box-shadow: var(--jsv-sh);
	padding: 20px;
	margin-bottom: 18px;
}

/* ==================================================================
   Buttons
   ================================================================== */

.jsv-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 22px;
	border: 1px solid transparent;
	border-radius: 11px;
	font: inherit;
	font-size: 16px;
	font-weight: 650;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, transform .06s ease, box-shadow .16s ease;
	touch-action: manipulation;
}

.jsv-btn:active {
	transform: translateY(1px);
}

.jsv-btn:focus-visible {
	outline: 3px solid var(--jsv-primary);
	outline-offset: 2px;
}

.jsv-btn--primary {
	background: var(--jsv-primary);
	color: #fff;
	box-shadow: 0 1px 2px rgba(12, 77, 162, .3), 0 6px 16px rgba(12, 77, 162, .22);
}

.jsv-btn--primary:hover,
.jsv-btn--primary:focus {
	background: var(--jsv-dark);
	color: #fff;
}

.jsv-btn--ghost {
	background: #fff;
	color: var(--jsv-primary);
	border-color: var(--jsv-line);
}

.jsv-btn--ghost:hover,
.jsv-btn--ghost:focus {
	border-color: var(--jsv-primary);
	background: #f7faff;
	color: var(--jsv-primary);
}

.jsv-btn--xl {
	min-height: 58px;
	font-size: 17px;
	border-radius: 12px;
}

.jsv-btn--block {
	width: 100%;
}

.jsv-btn[disabled] {
	opacity: .55;
	cursor: default;
	box-shadow: none;
}

.jsv-btn.is-active {
	background: var(--jsv-danger);
	color: #fff;
	box-shadow: none;
}

.jsv-ico {
	width: 21px;
	height: 21px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jsv-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: jsv-spin .7s linear infinite;
}

@keyframes jsv-spin {
	to { transform: rotate(360deg); }
}

@keyframes jsv-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* ==================================================================
   Landing page
   ================================================================== */

.jsv-hero {
	position: relative;
	background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
	border-bottom: 1px solid var(--jsv-line);
	padding: 30px 0 34px;
	text-align: center;
}

.jsv-hero__logo {
	margin-bottom: 20px;
}

.jsv-hero__logo img {
	max-width: 210px;
	max-height: 70px;
}

.jsv-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 14px;
	padding: 6px 13px;
	border-radius: 99px;
	background: rgba(12, 77, 162, .08);
	color: var(--jsv-primary);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.jsv-hero__eyebrow svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jsv-hero h1 {
	margin: 0 0 12px;
	font-size: 32px;
	line-height: 1.12;
	font-weight: 780;
	letter-spacing: -.028em;
	color: var(--jsv-dark);
}

.jsv-hero__lead {
	margin: 0 auto 24px;
	max-width: 54ch;
	font-size: 17px;
	line-height: 1.55;
	color: var(--jsv-ink-2);
}

.jsv-hero__cta {
	display: grid;
	gap: 10px;
	max-width: 420px;
	margin-inline: auto;
}

.jsv-hero__note {
	margin: 16px 0 0;
	font-size: 13.5px;
	color: var(--jsv-muted);
}

/* Live figures, pulled from the operator's own records. */
.jsv-figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 26px;
}

.jsv-figure {
	background: rgba(255, 255, 255, .82);
	border: 1px solid var(--jsv-line);
	border-radius: var(--jsv-r-sm);
	padding: 14px 12px;
	text-align: center;
}

.jsv-figure__n {
	display: block;
	font-size: 25px;
	font-weight: 780;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--jsv-primary);
}

.jsv-figure__l {
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--jsv-muted);
}

/* Sections */

.jsv-sec {
	padding: 34px 0 6px;
}

.jsv-sec--tint {
	background: var(--jsv-bg);
	border-block: 1px solid var(--jsv-line);
	padding-bottom: 34px;
	margin-top: 30px;
}

.jsv-sec__head {
	text-align: center;
	margin-bottom: 22px;
}

.jsv-sec__head h2 {
	margin: 0 0 8px;
	font-size: 23px;
	line-height: 1.2;
	font-weight: 740;
	letter-spacing: -.02em;
	color: var(--jsv-dark);
}

.jsv-sec__head p {
	margin: 0 auto;
	max-width: 56ch;
	font-size: 15.5px;
	color: var(--jsv-muted);
}

/* How it works */

.jsv-how {
	display: grid;
	gap: 12px;
	counter-reset: jsvhow;
}

.jsv-how__item {
	position: relative;
	background: var(--jsv-card);
	border: 1px solid var(--jsv-line);
	border-radius: var(--jsv-r);
	padding: 18px 18px 18px 60px;
	box-shadow: var(--jsv-sh-sm);
}

.jsv-how__item::before {
	counter-increment: jsvhow;
	content: counter(jsvhow);
	position: absolute;
	left: 18px;
	top: 18px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--jsv-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.jsv-how__item h3 {
	margin: 3px 0 5px;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--jsv-dark);
}

.jsv-how__item p {
	margin: 0;
	font-size: 15px;
	color: var(--jsv-muted);
}

/* Split: illustration beside text */

.jsv-hero__shot {
	margin-top: 30px;
	border-radius: var(--jsv-r-lg);
	overflow: hidden;
	border: 1px solid var(--jsv-line);
	box-shadow: var(--jsv-sh);
	background: #fff;
}

.jsv-hero__shot img {
	display: block;
	width: 100%;
	height: auto;
}

.jsv-split {
	display: grid;
	gap: 24px;
	align-items: center;
}

.jsv-split__art {
	background: #fff;
	border: 1px solid var(--jsv-line);
	border-radius: var(--jsv-r-lg);
	padding: 18px;
	box-shadow: var(--jsv-sh-sm);
}

.jsv-split__art svg {
	display: block;
	width: 100%;
	height: auto;
}

.jsv-split__art--photo {
	padding: 0;
	overflow: hidden;
}

.jsv-split__art--photo img {
	display: block;
	width: 100%;
	height: auto;
}

.jsv-split__text h2 {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 740;
	letter-spacing: -.02em;
	color: var(--jsv-dark);
}

.jsv-split__text p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--jsv-ink-2);
}

.jsv-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.jsv-list li {
	position: relative;
	padding-left: 30px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--jsv-muted);
}

.jsv-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--jsv-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat, linear-gradient(#000, #000);
	-webkit-mask-composite: xor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat, linear-gradient(#000, #000);
	mask-composite: exclude;
}

.jsv-list li strong {
	display: block;
	color: var(--jsv-dark);
	font-weight: 680;
	font-size: 15.5px;
	margin-bottom: 2px;
}

/* Product range */

.jsv-range {
	display: grid;
	gap: 12px;
}

.jsv-prod {
	background: var(--jsv-card);
	border: 1px solid var(--jsv-line);
	border-radius: var(--jsv-r);
	padding: 18px;
	box-shadow: var(--jsv-sh-sm);
	transition: box-shadow .18s ease, border-color .18s ease;
}

.jsv-prod:hover {
	border-color: #cddcf0;
	box-shadow: var(--jsv-sh);
}

.jsv-prod__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 11px;
}

.jsv-prod__name {
	margin: 0;
	font-size: 17px;
	font-weight: 720;
	letter-spacing: -.01em;
	color: var(--jsv-dark);
	min-width: 0;
	word-break: break-word;
}

.jsv-prod__count {
	flex: none;
	font-size: 12px;
	font-weight: 650;
	color: var(--jsv-primary);
	background: rgba(12, 77, 162, .08);
	border-radius: 99px;
	padding: 4px 10px;
	white-space: nowrap;
}

.jsv-prod__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.jsv-prod__spec {
	font-size: 13px;
	color: var(--jsv-ink-2);
	background: var(--jsv-bg);
	border: 1px solid var(--jsv-line-2);
	border-radius: 8px;
	padding: 5px 10px;
}

.jsv-prod__spec b {
	color: var(--jsv-dark);
	font-weight: 700;
}

/* Assurance points */

.jsv-points {
	display: grid;
	gap: 12px;
}

.jsv-point {
	background: var(--jsv-card);
	border: 1px solid var(--jsv-line);
	border-radius: var(--jsv-r);
	padding: 18px;
	box-shadow: var(--jsv-sh-sm);
}

.jsv-point__ico {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(12, 77, 162, .08);
	display: grid;
	place-items: center;
	margin-bottom: 12px;
}

.jsv-point__ico svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--jsv-primary);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jsv-point h3 {
	margin: 0 0 5px;
	font-size: 16px;
	font-weight: 700;
	color: var(--jsv-dark);
}

.jsv-point p {
	margin: 0;
	font-size: 14.5px;
	color: var(--jsv-muted);
}

/* Help strip */

.jsv-help {
	margin-top: 26px;
	background: linear-gradient(160deg, var(--jsv-dark), var(--jsv-primary));
	border-radius: var(--jsv-r-lg);
	padding: 26px 22px;
	text-align: center;
	color: #fff;
}

.jsv-help h2 {
	margin: 0 0 8px;
	font-size: 21px;
	font-weight: 740;
	letter-spacing: -.018em;
	color: #fff;
}

.jsv-help p {
	margin: 0 auto 18px;
	max-width: 48ch;
	font-size: 15px;
	color: rgba(255, 255, 255, .86);
}

.jsv-help__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.jsv-help__links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 11px 18px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff;
	font-size: 15px;
	font-weight: 620;
	text-decoration: none;
}

.jsv-help__links a:hover {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

.jsv-help__links svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ==================================================================
   Scanner
   ================================================================== */

.jsv-scan__stage {
	margin-top: 14px;
}

.jsv-reader {
	position: relative;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: #0b1420;
	min-height: 240px;
}

.jsv-reader video,
.jsv-reader canvas {
	width: 100% !important;
	height: auto !important;
	display: block;
	border-radius: 12px;
}

.jsv-reader img[alt="Info icon"],
.jsv-reader #qr-shaded-region {
	display: none !important;
}

.jsv-reader button[id^="html5-qrcode-button-camera"],
.jsv-reader select#html5-qrcode-select-camera,
.jsv-reader span#html5-qrcode-anchor-scan-type-change {
	display: none !important;
}

.jsv-scan__hint {
	margin: 10px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--jsv-muted);
}

.jsv-scan__error {
	margin: 12px 0 0;
	padding: 12px 14px;
	background: #fdf3f2;
	border: 1px solid #f5d5d2;
	border-radius: 10px;
	color: #a52a25;
	font-size: 14px;
	line-height: 1.5;
}

.jsv-scan__alt {
	margin: 12px 0 0;
	text-align: center;
}

.jsv-linkish {
	display: inline-block;
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--jsv-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.jsv-linkish:hover {
	color: var(--jsv-dark);
}

.jsv-or {
	position: relative;
	text-align: center;
	margin: 22px 0 6px;
}

.jsv-or::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--jsv-line);
}

.jsv-or span {
	position: relative;
	background: var(--jsv-card);
	padding: 0 14px;
	font-size: 12.5px;
	color: var(--jsv-muted);
	text-transform: uppercase;
	letter-spacing: .07em;
	font-weight: 600;
}

/* ==================================================================
   Forms
   ================================================================== */

.jsv-form {
	margin-top: 18px;
}

.jsv-field {
	margin-bottom: 18px;
	min-width: 0;
}

.jsv-field label {
	display: block;
	margin-bottom: 7px;
	font-size: 14.5px;
	font-weight: 650;
	color: var(--jsv-dark);
	line-height: 1.35;
}

.jsv-field input[type="text"],
.jsv-field input[type="number"],
.jsv-field input[type="date"],
.jsv-field input[type="password"],
.jsv-field input[type="email"],
.jsv-field input[type="search"],
.jsv-field select,
.jsv-field textarea {
	display: block;
	/*
	 * Set explicitly, not inherited. Themes ship rules that force
	 * content-box on date and number inputs specifically, which made them
	 * render their padding and border OUTSIDE the column and spill past the
	 * container. Text inputs were unaffected, so the bug only showed up in
	 * the two-column warranty section.
	 */
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 52px;
	padding: 13px 14px;
	border: 1.5px solid var(--jsv-line);
	border-radius: 11px;
	background: #fff;
	color: var(--jsv-ink);
	/* 16px stops iOS Safari zooming the page on focus. */
	font-size: 16px;
	font-family: inherit;
	line-height: 1.4;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.jsv-field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 19px;
	padding-right: 42px;
}

.jsv-field textarea {
	min-height: 100px;
	resize: vertical;
}

.jsv-field input:focus,
.jsv-field select:focus,
.jsv-field textarea:focus {
	outline: none;
	border-color: var(--jsv-primary);
	box-shadow: 0 0 0 4px rgba(12, 77, 162, .13);
}

.jsv-field__hint {
	margin: 7px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--jsv-muted);
}

.jsv-field__req {
	color: var(--jsv-danger);
	font-weight: 700;
}

.jsv-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 13px 14px;
	margin-bottom: 10px;
	background: var(--jsv-bg);
	border: 1px solid var(--jsv-line-2);
	border-radius: var(--jsv-r-sm);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--jsv-ink);
	cursor: pointer;
	line-height: 1.45;
}

.jsv-check input[type="checkbox"] {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--jsv-primary);
}

/* Two-column field grid, only where there is room. */
.jsv-grid2 {
	display: grid;
	gap: 0 18px;
	grid-template-columns: minmax(0, 1fr);
}

/* ==================================================================
   Result
   ================================================================== */

.jsv-result {
	margin-top: 22px;
	border-radius: var(--jsv-r);
	overflow: hidden;
	border: 1px solid var(--jsv-line);
	animation: jsv-rise .28s ease;
}

.jsv-result__banner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px;
	color: #fff;
}

.jsv-result.is-genuine .jsv-result__banner { background: var(--jsv-accent); }
.jsv-result.is-fail .jsv-result__banner { background: var(--jsv-danger); }
.jsv-result.is-warn .jsv-result__banner { background: var(--jsv-warn); }

.jsv-result__mark {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	display: grid;
	place-items: center;
}

.jsv-result__mark svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: #fff;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jsv-result__title {
	margin: 0;
	font-size: 20px;
	font-weight: 750;
	line-height: 1.2;
	color: #fff;
}

.jsv-result__serial {
	margin: 4px 0 0;
	font-size: 13px;
	opacity: .93;
	word-break: break-all;
}

.jsv-result__body {
	background: #fff;
	padding: 20px;
}

.jsv-result__msg {
	margin: 0;
	color: var(--jsv-ink-2);
	font-size: 15.5px;
	line-height: 1.55;
}

.jsv-result__note {
	margin: 14px 0 0;
	padding: 12px 14px;
	background: var(--jsv-bg);
	border-radius: var(--jsv-r-sm);
	font-size: 13.5px;
	color: var(--jsv-muted);
}

.jsv-result__warn {
	margin: 14px 0 0;
	padding: 12px 14px;
	background: #fffaf0;
	border: 1px solid #f3dfb8;
	border-radius: var(--jsv-r-sm);
	font-size: 14px;
	color: #85571a;
	line-height: 1.5;
}

.jsv-details {
	margin: 18px 0 0;
	border-top: 1px solid var(--jsv-line);
}

.jsv-details__h {
	margin: 18px 0 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--jsv-muted);
}

/* Stacked on a phone: two columns at 390px made some values sit inline and
   others wrap, which read as broken. */
.jsv-details__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	padding: 10px 0;
	border-bottom: 1px solid var(--jsv-line-2);
	font-size: 15px;
}

.jsv-details__row:last-child {
	border-bottom: 0;
}

.jsv-details__label {
	color: var(--jsv-muted);
	font-size: 13.5px;
}

.jsv-details__value {
	font-weight: 650;
	color: var(--jsv-ink);
	word-break: break-word;
}

.jsv-details__value.is-expired {
	color: var(--jsv-danger);
}

.jsv-result__actions {
	margin-top: 20px;
}

/* Photos on record */

.jsv-shots {
	margin-top: 18px;
	border-top: 1px solid var(--jsv-line);
}

.jsv-shots__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
}

.jsv-shots__item {
	display: block;
	border-radius: var(--jsv-r-sm);
	overflow: hidden;
	border: 1px solid var(--jsv-line);
	background: var(--jsv-bg);
	aspect-ratio: 1 / 1;
}

.jsv-shots__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==================================================================
   Anti-bot challenge
   ================================================================== */

.jsv-challenge__row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.jsv-challenge__img {
	display: block;
	height: 62px;
	width: auto;
	border: 1px solid var(--jsv-line);
	border-radius: var(--jsv-r-sm);
	background: #f5f8fb;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}

.jsv-challenge__refresh {
	appearance: none;
	width: 46px;
	height: 46px;
	flex: none;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--jsv-line);
	border-radius: var(--jsv-r-sm);
	cursor: pointer;
	color: var(--jsv-muted);
}

.jsv-challenge__refresh:hover {
	border-color: var(--jsv-primary);
	color: var(--jsv-primary);
}

.jsv-challenge__refresh svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ==================================================================
   Operator portal
   ================================================================== */

.jsv-login {
	max-width: 440px;
	margin-inline: auto;
}

.jsv-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	padding: 14px 18px;
	background: linear-gradient(135deg, var(--jsv-dark), var(--jsv-primary));
	color: #fff;
	border-radius: var(--jsv-r);
}

.jsv-bar__who {
	font-size: 15px;
	font-weight: 650;
	min-width: 0;
	word-break: break-word;
}

.jsv-bar__who span {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	opacity: .8;
}

.jsv-bar a {
	color: #fff;
	font-size: 14.5px;
	font-weight: 620;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: 9px;
	padding: 9px 16px;
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	flex: none;
}

.jsv-bar a:hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.jsv-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

.jsv-stat {
	background: var(--jsv-card);
	border: 1px solid var(--jsv-line);
	border-radius: var(--jsv-r-sm);
	padding: 15px 16px;
	box-shadow: var(--jsv-sh-sm);
}

.jsv-stat__n {
	display: block;
	font-size: 25px;
	font-weight: 760;
	color: var(--jsv-dark);
	line-height: 1.15;
	letter-spacing: -.02em;
}

.jsv-stat__l {
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--jsv-muted);
}

.jsv-tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 18px;
	padding: 6px;
	background: var(--jsv-bg);
	border: 1px solid var(--jsv-line-2);
	border-radius: var(--jsv-r);
}

.jsv-tab {
	appearance: none;
	border: 0;
	background: transparent;
	border-radius: var(--jsv-r-sm);
	padding: 12px 10px;
	min-height: 48px;
	font: inherit;
	font-size: 14.5px;
	font-weight: 650;
	color: var(--jsv-muted);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color .15s ease, color .15s ease;
}

.jsv-tab:hover {
	color: var(--jsv-primary);
}

.jsv-tab.is-on {
	background: #fff;
	color: var(--jsv-primary);
	box-shadow: var(--jsv-sh-sm);
}

/*
 * Numbered steps in the operator form. Named .jsv-fstep, deliberately not
 * .jsv-step, which the landing page used to own.
 */
.jsv-fstep {
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--jsv-line-2);
}

.jsv-fstep:last-of-type {
	border-bottom: 0;
	margin-bottom: 10px;
	padding-bottom: 4px;
}

.jsv-fstep__head {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	margin-bottom: 16px;
}

.jsv-fstep__n {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--jsv-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.jsv-fstep__text {
	min-width: 0;
}

.jsv-fstep__head h3 {
	margin: 3px 0 4px;
	font-size: 17px;
	font-weight: 720;
	color: var(--jsv-dark);
	letter-spacing: -.012em;
}

.jsv-fstep__head p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--jsv-muted);
}

.jsv-fstep__body {
	min-width: 0;
}

/* Photo upload */

.jsv-drop {
	display: block;
	width: 100%;
	border: 2px dashed #c8d6e8;
	border-radius: var(--jsv-r);
	background: linear-gradient(180deg, #fbfdff, var(--jsv-bg));
	transition: border-color .16s ease, background-color .16s ease;
}

.jsv-drop:hover,
.jsv-drop:focus-within {
	border-color: var(--jsv-primary);
	background: #fff;
}

.jsv-drop__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 30px 18px;
	margin: 0;
	cursor: pointer;
	text-align: center;
	width: 100%;
}

.jsv-drop__ico {
	width: 34px;
	height: 34px;
	fill: none;
	stroke: var(--jsv-primary);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	margin-bottom: 6px;
}

.jsv-drop__label strong {
	font-size: 16px;
	font-weight: 680;
	color: var(--jsv-dark);
	white-space: normal;
}

.jsv-drop__label span {
	font-size: 13.5px;
	color: var(--jsv-muted);
	font-weight: 400;
}

.jsv-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 14px;
}

.jsv-thumbs:empty {
	display: none;
}

.jsv-thumb {
	position: relative;
	width: 84px;
	height: 84px;
	border-radius: var(--jsv-r-sm);
	overflow: hidden;
	border: 1px solid var(--jsv-line);
	background: var(--jsv-bg);
}

.jsv-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.jsv-thumb__x {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 25px;
	height: 25px;
	border: 0;
	border-radius: 50%;
	background: rgba(16, 32, 48, .74);
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
}

.jsv-thumb__x:hover {
	background: var(--jsv-danger);
}

#jsv-scan-readout:not(:empty) {
	margin-top: 14px;
}

#jsv-scan-readout code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13.5px;
	word-break: break-all;
}

/* Accordion for optional groups */

.jsv-acc {
	border: 1px solid var(--jsv-line);
	border-radius: var(--jsv-r-sm);
	margin-bottom: 10px;
	background: #fff;
	overflow: hidden;
}

.jsv-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 15px 16px;
	min-height: 52px;
	cursor: pointer;
	list-style: none;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--jsv-dark);
	background: var(--jsv-bg);
	user-select: none;
}

.jsv-acc__head::-webkit-details-marker {
	display: none;
}

.jsv-acc__head:focus-visible {
	outline: 3px solid var(--jsv-primary);
	outline-offset: -3px;
}

.jsv-acc__right {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
}

.jsv-acc__opt {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: none;
	color: var(--jsv-muted);
	background: #fff;
	border: 1px solid var(--jsv-line);
	border-radius: 99px;
	padding: 3px 10px;
}

.jsv-acc__chev {
	width: 19px;
	height: 19px;
	flex: none;
	fill: none;
	stroke: var(--jsv-muted);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .18s ease;
}

.jsv-acc[open] .jsv-acc__chev {
	transform: rotate(180deg);
}

.jsv-acc__body {
	padding: 18px 16px 2px;
}

/* Saved confirmation */

.jsv-saved {
	border: 2px solid var(--jsv-accent);
	animation: jsv-rise .28s ease;
}

.jsv-saved__done {
	margin: 0 0 14px;
	font-size: 16.5px;
	font-weight: 720;
	color: #0f7a3d;
}

.jsv-saved__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px;
	background: #f2fbf5;
	border: 1px solid #cbead7;
	border-radius: var(--jsv-r-sm);
}

.jsv-saved__thumb {
	flex: none;
	width: 70px;
	height: 70px;
	border-radius: var(--jsv-r-sm);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--jsv-line);
}

.jsv-saved__thumb:empty {
	display: none;
}

.jsv-saved__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.jsv-saved__meta {
	min-width: 0;
}

.jsv-saved__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--jsv-muted);
}

.jsv-saved__serial,
.jsv-saved__code {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--jsv-dark);
	word-break: break-all;
	margin-bottom: 9px;
}

.jsv-saved__code {
	color: var(--jsv-primary);
	font-size: 14px;
}

.jsv-saved__actions {
	display: grid;
	gap: 9px;
	margin-top: 15px;
}

/* Notices */

.jsv-notice {
	margin: 0 0 14px;
	padding: 13px 15px;
	border-radius: var(--jsv-r-sm);
	font-size: 14.5px;
	line-height: 1.5;
	border: 1px solid;
}

.jsv-notice--ok {
	background: #f1fbf5;
	border-color: #c4e7d3;
	color: #12683c;
}

.jsv-notice--err {
	background: #fdf3f2;
	border-color: #f5d5d2;
	color: #a52a25;
}

.jsv-notice--info {
	background: var(--jsv-bg);
	border-color: var(--jsv-line);
	color: var(--jsv-ink-2);
}

/* Recent list */

.jsv-recent__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid var(--jsv-line-2);
}

.jsv-recent__row:last-child {
	border-bottom: 0;
}

.jsv-recent__main {
	min-width: 0;
}

.jsv-recent__serial {
	display: block;
	font-weight: 680;
	color: var(--jsv-ink);
	word-break: break-all;
	font-size: 15px;
}

.jsv-recent__sub,
.jsv-recent__meta {
	font-size: 13px;
	color: var(--jsv-muted);
}

.jsv-recent__meta {
	flex: none;
	text-align: right;
	line-height: 1.4;
}

/* Find & edit records */

.jsv-editbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 16px;
	margin-bottom: 16px;
	background: #fff8e8;
	border: 1px solid #f0dcb0;
	border-radius: var(--jsv-r-sm);
	font-size: 14.5px;
	color: #7a5314;
}

.jsv-editbar strong {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: #5d3f0d;
	word-break: break-all;
}

.jsv-editbar__x {
	appearance: none;
	border: 1px solid #e0c78e;
	background: #fff;
	color: #7a5314;
	border-radius: 8px;
	padding: 8px 14px;
	min-height: 40px;
	font: inherit;
	font-size: 14px;
	font-weight: 620;
	cursor: pointer;
	flex: none;
}

.jsv-editbar__x:hover {
	background: #fffdf7;
	border-color: #d9bd82;
}

.jsv-rec {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 0;
	border-bottom: 1px solid var(--jsv-line-2);
}

.jsv-rec:last-child {
	border-bottom: 0;
}

.jsv-rec__main {
	display: flex;
	align-items: center;
	gap: 13px;
	min-width: 0;
	flex: 1 1 260px;
}

.jsv-rec__thumb {
	flex: none;
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 9px;
	border: 1px solid var(--jsv-line);
	display: block;
}

.jsv-rec__text {
	min-width: 0;
	display: grid;
	gap: 1px;
}

.jsv-rec__serial {
	font-size: 15.5px;
	font-weight: 680;
	color: var(--jsv-ink);
	word-break: break-all;
}

.jsv-rec__sub {
	font-size: 13px;
	color: var(--jsv-muted);
	word-break: break-word;
}

.jsv-rec__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
	color: var(--jsv-primary);
	word-break: break-all;
}

.jsv-rec__acts {
	display: flex;
	gap: 8px;
	flex: none;
}

.jsv-rec__btn {
	min-height: 44px;
	padding: 10px 16px;
	font-size: 14.5px;
}

.jsv-rec__btn--del {
	color: var(--jsv-danger);
}

.jsv-rec__btn--del:hover {
	border-color: var(--jsv-danger);
	background: #fdf3f2;
	color: var(--jsv-danger);
}

/* Import progress */

.jsv-prog {
	height: 10px;
	background: #e6ecf4;
	border-radius: 99px;
	overflow: hidden;
}

.jsv-prog__bar {
	height: 100%;
	width: 0;
	background: var(--jsv-primary);
	transition: width .25s ease;
}

/* ==================================================================
   Footer — deliberately quiet. It carries a legal statement, not a
   call to action, so it sits back from everything above it.
   ================================================================== */

.jsv-foot {
	margin-top: 40px;
	padding: 22px 0 4px;
	border-top: 1px solid var(--jsv-line-2);
}

.jsv-foot__inner {
	text-align: center;
	max-width: 62ch;
	margin-inline: auto;
}

.jsv-foot__attrib {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 640;
	color: var(--jsv-ink-2);
	line-height: 1.5;
}

.jsv-foot__note {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: #8b97a6;
}

.jsv-foot__contact {
	margin: 12px 0 0;
	font-size: 13.5px;
	color: var(--jsv-muted);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 16px;
}

.jsv-foot__contact a {
	color: var(--jsv-muted);
	text-decoration: none;
	font-weight: 560;
}

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

/* ==================================================================
   Responsive
   ================================================================== */

@media (min-width: 600px) {
	.jsv { --jsv-pad: 24px; }

	.jsv-card { padding: 26px; }

	.jsv-head__title { font-size: 32px; }
	.jsv-hero { padding: 44px 0 46px; }
	.jsv-hero h1 { font-size: 40px; }
	.jsv-hero__lead { font-size: 18px; }

	.jsv-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.jsv-sec { padding-top: 46px; }
	.jsv-sec--tint { padding-bottom: 46px; }
	.jsv-sec__head h2 { font-size: 27px; }

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

	.jsv-details__row {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 6px 20px;
		padding: 12px 0;
	}

	.jsv-details__label { font-size: 15px; flex: 1 1 auto; }
	.jsv-details__value { text-align: right; flex: 0 1 auto; }

	.jsv-saved__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jsv-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.jsv-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.jsv-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jsv-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jsv-range { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.jsv-hero__cta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 520px;
	}

	.jsv-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: 40px;
	}

	.jsv-split--rev .jsv-split__art { order: 2; }
	.jsv-split--rev .jsv-split__text { order: 1; }

	.jsv-split__text h2 { font-size: 28px; }

	/* Step content lines up under the heading text, past the number. */
	.jsv-fstep__body { padding-left: 43px; }
}

@media (min-width: 900px) {
	.jsv-hero h1 { font-size: 46px; }
	.jsv-how { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.jsv-range { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jsv-help { padding: 38px 32px; }
	.jsv-help h2 { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
	.jsv *,
	.jsv *::before,
	.jsv *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

@media print {
	.jsv-foot,
	.jsv-bar,
	.jsv-tabs { display: none !important; }
}