/**
 * VCIO Leadership Gap Assessment — front-end styles.
 *
 * Sized from ONE px variable, never rem. The theme sets
 * html { font-size: 62.5% }, so any rem value would render at ~62% of
 * intent. Everything below is calc() against --it365vc-fs.
 */

.it365vc-root {
	/* Brand colours are injected inline by the shortcode; these are fallbacks. */
	--it365vc-primary: #102231;
	--it365vc-secondary: #265998;
	--it365vc-accent: #bfdcff;
	--it365vc-dark: #102231;
	--it365vc-hover: #d01e1e;
	--it365vc-track: #e4eaf2;
	--it365vc-paper: #ffffff;
	--it365vc-line: #dfe6f0;
	--it365vc-muted: #5b6b7d;
	--it365vc-radius: 14px;
	/* Default vertical gap between the blocks of a screen. */
	--it365vc-gap: calc(var(--it365vc-fs) * 1.5);
	--it365vc-shadow: 0 18px 44px rgba(16, 34, 49, 0.13);
	--it365vc-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/*
	 * The single sizing anchor. Change this one value to scale the whole
	 * widget; do not reintroduce rem anywhere below it.
	 */
	--it365vc-fs: 16px;

	font-family: var(--it365vc-font);
	font-size: var(--it365vc-fs);
	line-height: 1.55;
	color: var(--it365vc-dark);
	max-width: calc(var(--it365vc-fs) * 46);
	margin: 0 auto;
}

/* The theme forces its own family onto descendants; win it back. */
.it365vc-root *,
.it365vc-root *::before,
.it365vc-root *::after {
	font-family: var(--it365vc-font);
	box-sizing: border-box;
}

.it365vc-card {
	background: var(--it365vc-paper);
	border: 1px solid var(--it365vc-line);
	border-radius: var(--it365vc-radius);
	box-shadow: var(--it365vc-shadow);
	padding: calc(var(--it365vc-fs) * 2);
}

/*
 * Vertical rhythm.
 *
 * Every block below carries `margin: 0` to neutralise theme styles, so this
 * flow rule has to out-rank those resets. A bare `.it365vc-step > * + *` is
 * specificity (0,1,0), which loses to `.it365vc-root h2` (0,1,1) and to any
 * later (0,1,0) reset such as `.it365vc-options` — the gaps collapsed to
 * nothing and the headings sat flush against the text above and below them.
 * Scoping to the root makes this (0,2,0), which wins cleanly.
 */
.it365vc-root .it365vc-step > * + * {
	margin-top: var(--it365vc-gap);
}

/*
 * An eyebrow and the heading beneath it are one unit — the topic labels the
 * question — so they sit closer together than the surrounding blocks.
 */
.it365vc-root .it365vc-eyebrow + h2 {
	margin-top: calc(var(--it365vc-fs) * 0.375);
}

.it365vc-eyebrow {
	display: block;
	font-size: calc(var(--it365vc-fs) * 0.75);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--it365vc-secondary);
}

.it365vc-root h2 {
	font-size: calc(var(--it365vc-fs) * 1.5);
	line-height: 1.32;
	font-weight: 700;
	margin: 0;
	color: var(--it365vc-primary);
}

.it365vc-root h2:focus {
	outline: none;
}

.it365vc-lead {
	font-size: calc(var(--it365vc-fs) * 1);
	line-height: 1.6;
	color: var(--it365vc-muted);
	margin: 0;
}

/* ---------------- progress + counters ---------------- */

.it365vc-progress {
	margin-bottom: var(--it365vc-gap);
}

.it365vc-progress__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: calc(var(--it365vc-fs) * 0.75);
	flex-wrap: wrap;
	font-size: calc(var(--it365vc-fs) * 0.8125);
	color: var(--it365vc-muted);
	margin-bottom: calc(var(--it365vc-fs) * 0.5);
}




.it365vc-progress__track {
	height: calc(var(--it365vc-fs) * 0.375);
	background: var(--it365vc-track);
	border-radius: calc(var(--it365vc-fs) * 0.25);
	overflow: hidden;
}

.it365vc-progress__bar {
	height: 100%;
	background: var(--it365vc-secondary);
	border-radius: inherit;
	transition: width 0.3s ease;
}

/* ---------------- answer options ---------------- */

.it365vc-options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: calc(var(--it365vc-fs) * 0.75);
}

.it365vc-options li {
	margin: 0;
	list-style: none;
}

.it365vc-option {
	/*
	 * The theme uppercases every button site-wide. Answer text is a sentence
	 * and must opt out; the CTAs below deliberately stay uppercase.
	 */
	text-transform: none;

	display: flex;
	align-items: center;
	gap: calc(var(--it365vc-fs) * 0.75);
	width: 100%;
	text-align: left;
	background: var(--it365vc-paper);
	border: 1px solid var(--it365vc-line);
	border-radius: calc(var(--it365vc-radius) * 0.7);
	padding: calc(var(--it365vc-fs) * 1.0625) calc(var(--it365vc-fs) * 1.125);
	font-size: calc(var(--it365vc-fs) * 0.9375);
	line-height: 1.45;
	color: var(--it365vc-dark);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.it365vc-option:hover,
.it365vc-option:focus-visible {
	border-color: var(--it365vc-secondary);
	background: #f7faff;
	outline: none;
}

.it365vc-option[aria-pressed="true"] {
	border-color: var(--it365vc-secondary);
	background: var(--it365vc-accent);
}

.it365vc-option__key {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--it365vc-fs) * 1.75);
	height: calc(var(--it365vc-fs) * 1.75);
	border-radius: 50%;
	background: var(--it365vc-primary);
	color: #fff;
	font-size: calc(var(--it365vc-fs) * 0.75);
	font-weight: 700;
}

/* ---------------- buttons ---------------- */

.it365vc-btn {
	display: inline-block;
	background: var(--it365vc-primary);
	color: #fff;
	border: none;
	border-radius: calc(var(--it365vc-radius) * 0.6);
	padding: calc(var(--it365vc-fs) * 0.75) calc(var(--it365vc-fs) * 1.5);
	font-size: calc(var(--it365vc-fs) * 0.875);
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease;
}

.it365vc-btn:hover,
.it365vc-btn:focus-visible {
	background: var(--it365vc-hover);
	color: #fff;
	outline: none;
}

.it365vc-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.it365vc-btn--link {
	background: none;
	color: var(--it365vc-secondary);
	padding: calc(var(--it365vc-fs) * 0.5) 0;
	text-transform: none;
	font-weight: 600;
}

.it365vc-btn--link:hover,
.it365vc-btn--link:focus-visible {
	background: none;
	color: var(--it365vc-hover);
	text-decoration: underline;
}

.it365vc-footer {
	margin-top: calc(var(--it365vc-fs) * 1);
}

/* ---------------- report offer + form ---------------- */




.it365vc-fields {
	display: grid;
	gap: calc(var(--it365vc-fs) * 0.875);
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
	.it365vc-fields {
		grid-template-columns: 1fr;
	}

	.it365vc-card {
		padding: calc(var(--it365vc-fs) * 1.25);
	}
}

.it365vc-field label {
	display: block;
	font-size: calc(var(--it365vc-fs) * 0.8125);
	font-weight: 600;
	margin-bottom: calc(var(--it365vc-fs) * 0.25);
	color: var(--it365vc-primary);
}

.it365vc-req {
	color: var(--it365vc-hover);
	margin-left: calc(var(--it365vc-fs) * 0.125);
}

.it365vc-field input {
	width: 100%;
	border: 1px solid var(--it365vc-line);
	border-radius: calc(var(--it365vc-radius) * 0.5);
	padding: calc(var(--it365vc-fs) * 0.625) calc(var(--it365vc-fs) * 0.75);
	font-size: calc(var(--it365vc-fs) * 0.875);
	color: var(--it365vc-dark);
	background: var(--it365vc-paper);
}

.it365vc-field input:focus {
	border-color: var(--it365vc-secondary);
	outline: 2px solid var(--it365vc-accent);
	outline-offset: 1px;
}

.it365vc-field input[aria-invalid="true"] {
	border-color: var(--it365vc-hover);
}



.it365vc-privacy {
	font-size: calc(var(--it365vc-fs) * 0.75);
	color: var(--it365vc-muted);
	margin: calc(var(--it365vc-fs) * 0.75) 0 0;
}

.it365vc-error {
	background: #fdecec;
	border-left: 3px solid var(--it365vc-hover);
	color: #8a1414;
	padding: calc(var(--it365vc-fs) * 0.625) calc(var(--it365vc-fs) * 0.75);
	border-radius: calc(var(--it365vc-radius) * 0.35);
	font-size: calc(var(--it365vc-fs) * 0.8125);
	margin: 0 0 calc(var(--it365vc-fs) * 0.75);
}

.it365vc-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--it365vc-fs) * 0.75);
	margin-top: calc(var(--it365vc-fs) * 1.125);
	flex-wrap: wrap;
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
/*
 * The form has no Back button in the spec's flow, so a lone submit would sit
 * left under space-between. Push it to the end instead.
 */
.it365vc-actions--single {
	justify-content: flex-end;
}

.it365vc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------- result ---------------- */

.it365vc-score__heading {
	text-align: center;
}

.it365vc-dial {
	--it365vc-pct: 0;
	--it365vc-band: var(--it365vc-secondary);

	width: calc(var(--it365vc-fs) * 11);
	height: calc(var(--it365vc-fs) * 11);
	margin: calc(var(--it365vc-fs) * 1.25) auto;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		conic-gradient(
			var(--it365vc-band) calc(var(--it365vc-pct) * 1%),
			var(--it365vc-track) 0
		);
}

.it365vc-dial__inner {
	width: 78%;
	height: 78%;
	border-radius: 50%;
	background: var(--it365vc-paper);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
}

.it365vc-dial__value {
	font-size: calc(var(--it365vc-fs) * 3);
	font-weight: 700;
	color: var(--it365vc-primary);
}

.it365vc-dial__suffix {
	font-size: calc(var(--it365vc-fs) * 0.75);
	color: var(--it365vc-muted);
}

.it365vc-band {
	display: block;
	width: fit-content;
	margin: 0 auto;
	color: #fff;
	font-weight: 700;
	font-size: calc(var(--it365vc-fs) * 0.9375);
	padding: calc(var(--it365vc-fs) * 0.375) calc(var(--it365vc-fs) * 1);
	border-radius: calc(var(--it365vc-fs) * 1.25);
}

.it365vc-band__message {
	text-align: center;
	font-size: calc(var(--it365vc-fs) * 1);
	color: var(--it365vc-dark);
	margin: calc(var(--it365vc-fs) * 0.75) 0 0;
}

.it365vc-note {
	font-size: calc(var(--it365vc-fs) * 0.8125);
	color: var(--it365vc-muted);
	background: #f6f8fb;
	border-radius: calc(var(--it365vc-radius) * 0.5);
	padding: calc(var(--it365vc-fs) * 0.875);
	margin: calc(var(--it365vc-fs) * 1.25) 0 0;
}

.it365vc-done {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--it365vc-fs) * 0.75);
	background: #eef7f0;
	border-radius: calc(var(--it365vc-radius) * 0.5);
	padding: calc(var(--it365vc-fs) * 0.875);
	margin-top: calc(var(--it365vc-fs) * 1);
}

.it365vc-done__tick {
	flex: 0 0 auto;
	width: calc(var(--it365vc-fs) * 1.5);
	height: calc(var(--it365vc-fs) * 1.5);
	border-radius: 50%;
	background: #1e8e3e;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--it365vc-fs) * 0.8125);
	font-weight: 700;
}

.it365vc-done p {
	margin: 0;
	font-size: calc(var(--it365vc-fs) * 0.875);
	color: #16351f;
}

@media (prefers-reduced-motion: reduce) {
	.it365vc-progress__bar {
		transition: none;
	}
}

/* ---------------- gap reading + recommendation ---------------- */

/*
 * The live gap chip takes the colour of the band the visitor is currently
 * tracking towards, so the number and the colour always agree. Remember the
 * direction: redder means a bigger gap, which is the worse outcome.
 */
.it365vc-gap {
	background: var(--it365vc-secondary);
	color: #fff;
	border-radius: calc(var(--it365vc-fs) * 1);
	padding: calc(var(--it365vc-fs) * 0.15) calc(var(--it365vc-fs) * 0.7);
	font-size: calc(var(--it365vc-fs) * 0.8125);
	white-space: nowrap;
}

/* Section 6 and 7 sit together in one block under the band message. */
.it365vc-rec {
	background: var(--it365vc-accent);
	border-radius: calc(var(--it365vc-radius) * 0.7);
	padding: calc(var(--it365vc-fs) * 1.25);
}

.it365vc-rec__heading {
	margin: 0;
	font-size: calc(var(--it365vc-fs) * 1.125);
	font-weight: 700;
	color: var(--it365vc-primary);
}

.it365vc-rec__body {
	margin: calc(var(--it365vc-fs) * 0.5) 0 0;
	font-size: calc(var(--it365vc-fs) * 0.875);
	color: var(--it365vc-primary);
}

/* The add-on line is the upsell, so it is set apart from the fixed copy. */
.it365vc-rec__addon {
	margin: calc(var(--it365vc-fs) * 0.875) 0 0;
	padding-top: calc(var(--it365vc-fs) * 0.875);
	border-top: 1px solid rgba(16, 34, 49, 0.15);
	font-size: calc(var(--it365vc-fs) * 0.875);
	font-weight: 600;
	color: var(--it365vc-primary);
}

.it365vc-form__heading {
	margin: 0;
	font-size: calc(var(--it365vc-fs) * 1.125);
	font-weight: 700;
	color: var(--it365vc-primary);
}

/* Five fields, so the last one sits alone on its row across the grid. */
.it365vc-fields > .it365vc-field:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.it365vc-btn--block {
	display: block;
	width: 100%;
}

.it365vc-actions--single {
	justify-content: flex-end;
}