/**
 * Qi Website Planning Calculator
 *
 * Every colour, space and type size is read from the theme's custom properties,
 * with the current Bricks value as a fallback. The fallbacks exist so the
 * plugin renders correctly if a token is ever renamed or missing -- they are
 * not the source of truth. Change the palette in Bricks and this follows.
 *
 * font-family is never declared. Type is inherited from the theme so the
 * calculator always matches the surrounding page.
 *
 * Everything is scoped under .qi-calc. No bare element selectors, so nothing
 * here can leak into Bricks output elsewhere on the page.
 *
 * Note on units: this theme sets a 10px root (--text-body is 1.6rem for 16px),
 * so structural minimums are given in px to stay correct if that ever changes.
 */

.qi-calc {
	/* Square corners throughout. Every border-radius in this file reads this
	 * one token, so it is the only place to change if that is ever revisited. */
	--qi-radius: 0px;
	--qi-border: 1px solid var(--color-6, #d7d7d7);

	box-sizing: border-box;
	color: var(--color-4, #0b1a31);
	font-size: var(--text-body, 1.8rem);
	line-height: 1.55;
	margin-block: var(--space-l, 2.67rem);
}

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

.qi-calc [hidden] {
	display: none !important;
}

/* Present to assistive technology, absent from the page. Used for the tier
 * question, which names the radio group but has no visual job left once the
 * tiers are named on the cards themselves. */
.qi-calc__sr-only {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* -------------------------------------------------------------------------
 * Heading
 * ---------------------------------------------------------------------- */

.qi-calc__heading {
	border-bottom: var(--qi-border);
	color: var(--color-1, #094ab2);
	font-size: var(--text-h2, 4.48rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 var(--space-m, 2rem);
	padding-bottom: var(--space-s, 1.5rem);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Sheet
 *
 * One white surface under everything the visitor works with: the inputs,
 * the tier cards, the packages box and the two lines of text beneath. It
 * exists so the calculator reads the same on a dark section of the page as
 * on a white one. Before it, the gap between the inputs and the packages
 * showed the page through and the text beneath disappeared. The heading
 * above and Need Something Different? below are page copy and stay outside.
 *
 * The blocks inside carry no side borders of their own; the sheet draws the
 * one outline, and only horizontal rules separate the blocks.
 * ---------------------------------------------------------------------- */

.qi-calc__sheet {
	background-color: var(--color-5, #fefefe);
	border: var(--qi-border);
	border-radius: var(--qi-radius);
}

.qi-calc__sheet-foot {
	padding: var(--space-s, 1.5rem) var(--space-m, 2rem) var(--space-m, 2rem);
}

/* The cards layout's tier cards sit between the inputs and the packages,
 * on the sheet's white, and need the gutter the inputs' padding gave them. */
.qi-calc__sheet > .qi-calc__field--choice {
	padding: var(--space-m, 2rem) var(--space-m, 2rem) 0;
}

.qi-calc__sheet > .qi-calc__tier-note {
	margin: 0 var(--space-m, 2rem) var(--space-m, 2rem);
}

/* -------------------------------------------------------------------------
 * Input panel
 * ---------------------------------------------------------------------- */

.qi-calc__inputs {
	background-color: var(--color-4-t-1, hsla(216, 8%, 85%, 0.17));
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: var(--space-m, 2rem);
}

/* A tint of the brand blue, closer to the Get in Touch panel, where the
 * browser can mix colours. Falls back to the translucent token above. */
@supports (background: color-mix(in srgb, red 10%, white)) {
	.qi-calc__inputs {
		background-color: color-mix(in srgb, var(--color-2, #a4c7ff) 13%, var(--color-5, #fefefe));
	}
}

.qi-calc__field {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.qi-calc__label {
	color: var(--color-4, #0b1a31);
	display: block;
	font-size: var(--text-b-s, 1.5rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-bottom: var(--space-2xs, 0.84rem);
	padding: 0;
}

/* The seat-count stepper: a minus button, the number field, a plus button,
 * sharing one border so they read as a single control. The field is still a
 * real number input and accepts typing; the buttons are a convenience.
 *
 * Everything a theme might set on a bare button or number input -- padding,
 * height, text alignment, box shadow, appearance -- is stated here rather than
 * assumed, and the selectors carry the element name so they outrank a theme's
 * own "button" and "input" rules. The dividers sit on the field, not on the
 * buttons, so they do not depend on which node a builder leaves first or
 * last inside the wrapper. */
.qi-calc .qi-calc__stepper {
	align-items: stretch;
	background-color: var(--color-5, #fefefe);
	border: var(--qi-border);
	border-radius: var(--qi-radius);
	display: flex;
	margin: 0;
	padding: 0;
	width: 100%;
}

.qi-calc .qi-calc__stepper > button.qi-calc__step {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	align-self: stretch;
	background-color: var(--color-5, #fefefe);
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--color-1, #094ab2);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 3.2em;
	font-family: inherit;
	font-size: var(--text-h6, 2.16rem);
	font-weight: 700;
	height: auto;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: background-color 0.15s ease;
	user-select: none;
	width: 3.2em;
}

.qi-calc .qi-calc__stepper > button.qi-calc__step:hover {
	background-color: var(--color-4-t-1, hsla(216, 8%, 85%, 0.17));
	color: var(--color-1, #094ab2);
}

.qi-calc .qi-calc__stepper > input.qi-calc__number {
	-moz-appearance: textfield;
	appearance: textfield;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-left: var(--qi-border);
	border-radius: 0;
	border-right: var(--qi-border);
	box-shadow: none;
	color: var(--color-4, #0b1a31);
	flex: 1 1 auto;
	font-family: inherit;
	font-size: var(--text-h6, 2.16rem);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	height: auto;
	line-height: 1.2;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: var(--space-xs, 1.13rem) var(--space-s, 1.5rem);
	text-align: center;
	width: 100%;
}

/* The browser's own spinner would sit beside ours. */
.qi-calc .qi-calc__number::-webkit-inner-spin-button,
.qi-calc .qi-calc__number::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.qi-calc .qi-calc__stepper > input.qi-calc__number:focus-visible,
.qi-calc .qi-calc__stepper > button.qi-calc__step:focus-visible {
	outline: 2px solid var(--color-3, #6180ff);
	outline-offset: -2px;
}

/* Segmented Yes / No control, used by the compact layout.
 *
 * These are real radio inputs, visually hidden rather than replaced, so arrow
 * keys move between them and screen readers announce the group and its state.
 * Its height is matched to the stepper beside it. */
.qi-calc__segmented {
	background-color: var(--color-5, #fefefe);
	border: var(--qi-border);
	border-radius: var(--qi-radius);
	display: flex;
	overflow: hidden;
	width: 100%;
}

.qi-calc__segment {
	background-color: var(--color-5, #fefefe);
	color: var(--color-4, #0b1a31);
	cursor: pointer;
	flex: 1 1 0;
	font-size: var(--text-b-s, 1.5rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	margin: 0;
	padding: var(--space-s, 1.5rem);
	text-align: center;
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease;
	user-select: none;
}

.qi-calc__segment + .qi-calc__radio + .qi-calc__segment {
	border-left: var(--qi-border);
}

.qi-calc__segment:hover {
	background-color: var(--color-4-t-1, hsla(216, 8%, 85%, 0.17));
}

.qi-calc__radio:checked + .qi-calc__segment {
	background-color: var(--color-1, #094ab2);
	color: var(--color-5, #fefefe);
}

.qi-calc__radio:focus-visible + .qi-calc__segment {
	outline: 2px solid var(--color-3, #6180ff);
	outline-offset: -2px;
}

.qi-calc__hint {
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
	font-size: var(--text-b-xs, 1.25rem);
	margin: var(--space-2xs, 0.84rem) 0 0;
}

/* Opens the licence comparison overlay. Styled as a link, since it sits in
 * the hint line under the toggle rather than acting as a form control. */
.qi-calc .qi-calc__compare {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--color-1, #094ab2);
	cursor: pointer;
	display: inline;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	margin: 0;
	min-height: 0;
	padding: 0;
	text-decoration: underline;
	text-transform: none;
	text-underline-offset: 0.15em;
}

.qi-calc .qi-calc__compare:hover {
	color: var(--color-4, #0b1a31);
}

.qi-calc .qi-calc__compare:focus-visible {
	outline: 2px solid var(--color-3, #6180ff);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Licence tier choice
 *
 * The two tiers are described side by side and the cards themselves are the
 * control. Each holds a real radio input, visually hidden rather than
 * replaced, so arrow keys move between them and screen readers announce the
 * group and its state. Hiding with clip rather than display:none keeps them
 * focusable. The card's heading is the radio's label, and a pseudo-element
 * stretches that label over the whole card so anywhere on it is a target.
 * ---------------------------------------------------------------------- */

.qi-calc__radio {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.qi-calc__tiers {
	display: grid;
	gap: var(--space-s, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	margin-bottom: var(--space-s, 1.5rem);
}

.qi-calc__tier {
	background-color: var(--color-5, #fefefe);
	border: var(--qi-border);
	border-radius: var(--qi-radius);
	padding: var(--space-s, 1.5rem) var(--space-m, 2rem);
	position: relative;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qi-calc__tier:hover {
	border-color: var(--color-3, #6180ff);
}

.qi-calc__tier.is-selected {
	border-color: var(--color-1, #094ab2);
	box-shadow: inset 0 0 0 1px var(--color-1, #094ab2);
}

.qi-calc__tier-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 1.13rem);
	justify-content: space-between;
	margin: 0 0 var(--space-xs, 1.13rem);
}

/* In the cards layout the heading is the radio's label, and the whole card
 * is its click target. */
.qi-calc__tier-head--label {
	cursor: pointer;
}

.qi-calc__tier-head--label::after {
	content: "";
	inset: 0;
	position: absolute;
}

.qi-calc__radio:focus-visible ~ .qi-calc__tier-head--label::after {
	outline: 2px solid var(--color-3, #6180ff);
	outline-offset: 2px;
}

.qi-calc__tier-name {
	color: var(--color-4, #0b1a31);
	font-size: var(--text-h6, 2.16rem);
	font-weight: 700;
	line-height: 1.2;
}

.qi-calc__tier.is-selected .qi-calc__tier-name {
	color: var(--color-1, #094ab2);
}

.qi-calc__tier-flag {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--qi-radius);
	box-shadow: none;
	font-family: inherit;
	font-size: var(--text-b-xs, 1.25rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 0;
	min-height: 0;
	padding: 0.2em 0.7em;
	text-transform: uppercase;
}

/* In the overlay the Select badge is a real button, stretched over its whole
 * card so anywhere on the card is the target, as in the cards layout. */
.qi-calc button.qi-calc__tier-flag--select {
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.qi-calc button.qi-calc__tier-flag--select::after {
	content: "";
	inset: 0;
	position: absolute;
}

.qi-calc__dialog .qi-calc__tier:not(.is-selected) {
	cursor: pointer;
}

.qi-calc button.qi-calc__tier-flag--select:hover,
.qi-calc button.qi-calc__tier-flag--select:focus-visible {
	background-color: var(--color-1, #094ab2);
	border-color: var(--color-1, #094ab2);
	color: var(--color-5, #fefefe);
}

.qi-calc button.qi-calc__tier-flag--select:focus-visible {
	outline: 2px solid var(--color-3, #6180ff);
	outline-offset: 2px;
}

/* "Select" on the card that is not chosen; "Selected" on the one that is. */
.qi-calc__tier-flag--select {
	border-color: var(--color-6, #d7d7d7);
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
}

.qi-calc__tier-flag--selected {
	background-color: var(--color-1, #094ab2);
	border-color: var(--color-1, #094ab2);
	color: var(--color-5, #fefefe);
}

.qi-calc__tier.is-selected .qi-calc__tier-flag--select,
.qi-calc__tier:not(.is-selected) .qi-calc__tier-flag--selected {
	display: none;
}

.qi-calc__tier-points {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qi-calc__tier-points li {
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
	display: flex;
	font-size: var(--text-b-s, 1.5rem);
	gap: var(--space-2xs, 0.84rem);
	line-height: 1.45;
	padding-block: calc(var(--space-2xs, 0.84rem) / 2);
}

.qi-calc__tier-points li::before {
	color: var(--color-2, #a4c7ff);
	content: "\2022";
	flex: 0 0 auto;
	font-weight: 700;
}

.qi-calc__tier-note {
	background-color: var(--color-4-t-1, hsla(216, 8%, 85%, 0.17));
	border-left: 3px solid var(--color-2, #a4c7ff);
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
	font-size: var(--text-b-s, 1.5rem);
	margin: 0 0 var(--space-m, 2rem);
	padding: var(--space-s, 1.5rem);
}

/* The licence comparison overlay, used by the compact layout. A native
 * dialog: Escape closes it and focus stays inside while it is open. The
 * padding is on an inner body rather than the dialog itself, so a click that
 * reaches the dialog element can only have come from the backdrop. */
.qi-calc__dialog {
	background-color: var(--color-5, #fefefe);
	border: var(--qi-border);
	border-radius: var(--qi-radius);
	box-shadow: 0 24px 64px rgba(11, 26, 49, 0.25);
	color: var(--color-4, #0b1a31);
	font-size: var(--text-body, 1.8rem);
	line-height: 1.55;
	margin: auto;
	max-height: calc(100vh - 2 * var(--space-m, 2rem));
	max-width: min(100% - 2 * var(--space-m, 2rem), 880px);
	overflow: auto;
	padding: 0;
	width: 100%;
}

.qi-calc__dialog::backdrop {
	background-color: rgba(11, 26, 49, 0.55);
}

.qi-calc__dialog-body {
	padding: var(--space-m, 2rem);
}

.qi-calc__dialog-head {
	align-items: center;
	display: flex;
	gap: var(--space-s, 1.5rem);
	justify-content: space-between;
	margin-bottom: var(--space-s, 1.5rem);
}

.qi-calc__dialog-title {
	color: var(--color-1, #094ab2);
	font-size: var(--text-h5, 2.59rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.qi-calc .qi-calc__dialog-close {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	background: none;
	border: var(--qi-border);
	border-radius: var(--qi-radius);
	box-shadow: none;
	color: var(--color-4, #0b1a31);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: inherit;
	font-size: var(--text-h6, 2.16rem);
	font-weight: 700;
	height: 2em;
	justify-content: center;
	line-height: 1;
	margin: 0;
	min-height: 0;
	padding: 0;
	width: 2em;
}

.qi-calc .qi-calc__dialog-close:hover {
	background-color: var(--color-4-t-1, hsla(216, 8%, 85%, 0.17));
}

.qi-calc .qi-calc__dialog-close:focus-visible {
	outline: 2px solid var(--color-3, #6180ff);
	outline-offset: 2px;
}

.qi-calc__dialog .qi-calc__tiers {
	margin-bottom: 0;
}

.qi-calc__dialog .qi-calc__tier-note {
	margin: var(--space-s, 1.5rem) 0 0;
}

/* -------------------------------------------------------------------------
 * Packages
 *
 * A tab strip naming each package with its one-off price, and beneath it the
 * open package's panel: tagline, what is covered, the cost breakdown folded
 * away, and a footer band carrying the two totals and the call to action.
 * ---------------------------------------------------------------------- */

.qi-calc__results {
	background-color: var(--color-5, #fefefe);
	border: 0;
	border-bottom: var(--qi-border);
	border-top: var(--qi-border);
}

/* With nothing beneath it the sheet's own border closes the box. */
.qi-calc__results:last-child {
	border-bottom: 0;
}

.qi-calc__tabs {
	border-bottom: var(--qi-border);
	display: flex;
}

.qi-calc__tab {
	background-color: var(--color-4-t-1, hsla(216, 8%, 85%, 0.17));
	border: 0;
	border-radius: 0;
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
	cursor: pointer;
	flex: 1 1 0;
	font-family: inherit;
	line-height: 1.2;
	margin: 0;
	min-width: 0;
	padding: var(--space-s, 1.5rem) var(--space-xs, 1.13rem);
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.qi-calc__tab + .qi-calc__tab {
	border-left: var(--qi-border);
}

.qi-calc__tab:hover {
	color: var(--color-4, #0b1a31);
}

/* The open tab is white, joins the panel below it, and carries the brand rule
 * along its bottom edge. */
.qi-calc__tab.is-active {
	background-color: var(--color-5, #fefefe);
	box-shadow: inset 0 -3px 0 var(--color-1, #094ab2);
	color: var(--color-1, #094ab2);
}

.qi-calc__tab:focus-visible {
	outline: 2px solid var(--color-3, #6180ff);
	outline-offset: -2px;
}

.qi-calc__tab-label {
	display: block;
	font-size: var(--text-b-xs, 1.25rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.qi-calc__tab-price {
	display: block;
	font-size: var(--text-h6, 2.16rem);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	margin-top: 0.25em;
}

.qi-calc__card {
	display: block;
}

.qi-calc__card-body {
	padding: var(--space-m, 2rem);
}

.qi-calc__card-blurb {
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
	font-size: var(--text-b-s, 1.5rem);
	margin: 0 0 var(--space-s, 1.5rem);
}

.qi-calc__figures {
	display: block;
}

/* What each package includes.
 *
 * "Whats covered:" on Foundation; "Everything in option 2 plus:" on the
 * others. */
.qi-calc__features-intro {
	color: var(--color-4, #0b1a31);
	font-size: var(--text-b-xs, 1.25rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0;
	text-align: left;
	text-transform: uppercase;
}

.qi-calc__features {
	list-style: none;
	margin: 0 0 var(--space-s, 1.5rem);
	padding: var(--space-2xs, 0.84rem) 0 0;
}

.qi-calc__feature {
	color: var(--color-4, #0b1a31);
	display: flex;
	font-size: var(--text-b-s, 1.5rem);
	gap: var(--space-2xs, 0.84rem);
	line-height: 1.4;
	padding-block: calc(var(--space-2xs, 0.84rem) / 2);
	text-align: left;
}

.qi-calc__feature::before {
	color: var(--color-1, #094ab2);
	content: "\2713";
	flex: 0 0 auto;
	font-weight: 700;
}

/* Unfolds a long feature list in the compact layout: three bullets show and
 * the rest sit behind this. Indented to line up with the bullet text. */
.qi-calc .qi-calc__more {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--color-1, #094ab2);
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: var(--text-b-xs, 1.25rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	margin: 0 0 var(--space-s, 1.5rem);
	min-height: 0;
	padding: 0 0 0 calc(var(--space-2xs, 0.84rem) + 1.2em);
	text-align: left;
	text-transform: uppercase;
}

.qi-calc__features + .qi-calc__more {
	margin-top: calc(-1 * var(--space-2xs, 0.84rem));
}

.qi-calc .qi-calc__more:hover {
	color: var(--color-4, #0b1a31);
}

.qi-calc .qi-calc__more:focus-visible {
	outline: 2px solid var(--color-3, #6180ff);
	outline-offset: 2px;
}

/* The cost breakdown, closed by default. A native details element, so it
 * opens without script and is announced as expandable. */
.qi-calc__breakdown {
	border: var(--qi-border);
	border-radius: var(--qi-radius);
}

.qi-calc__breakdown-summary {
	align-items: center;
	color: var(--color-1, #094ab2);
	cursor: pointer;
	display: flex;
	font-size: var(--text-b-s, 1.5rem);
	font-weight: 700;
	gap: var(--space-xs, 1.13rem);
	justify-content: space-between;
	list-style: none;
	padding: var(--space-xs, 1.13rem) var(--space-s, 1.5rem);
	user-select: none;
}

.qi-calc__breakdown-summary::-webkit-details-marker {
	display: none;
}

/* A chevron drawn from two borders, so it takes the text colour and needs no
 * icon font. Points down while closed and up once open. */
.qi-calc__breakdown-summary::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	flex: 0 0 auto;
	height: 0.55em;
	margin-top: -0.3em;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	width: 0.55em;
}

.qi-calc__breakdown[open] > .qi-calc__breakdown-summary::after {
	margin-top: 0.3em;
	transform: rotate(225deg);
}

.qi-calc__breakdown-summary:focus-visible {
	outline: 2px solid var(--color-3, #6180ff);
	outline-offset: -2px;
}

.qi-calc__lines {
	border-top: var(--qi-border);
	margin: 0;
	padding: var(--space-2xs, 0.84rem) var(--space-s, 1.5rem);
}

.qi-calc__line {
	display: flex;
	font-size: var(--text-b-s, 1.5rem);
	gap: var(--space-xs, 1.13rem);
	justify-content: space-between;
	padding-block: var(--space-2xs, 0.84rem);
}

.qi-calc__line dt {
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
	margin: 0;
}

/* The sum behind the licence figure, e.g. "£1,015.20 × 10 users".
 * Showing the working is what stops a per-user rate sitting next to a total
 * and leaving the reader to guess how one became the other. */
.qi-calc__line-calc {
	display: block;
	font-size: var(--text-b-xs, 1.25rem);
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
	padding-top: 0.2em;
}

.qi-calc__line dd {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	margin: 0;
	text-align: right;
}

/* The footer band: the two totals on the left, the call to action on the
 * right, dropping onto its own line when the row is too narrow for both. */
.qi-calc__card-foot {
	align-items: center;
	background-color: var(--color-4-t-1, hsla(216, 8%, 85%, 0.17));
	border-top: var(--qi-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s, 1.5rem) var(--space-m, 2rem);
	justify-content: space-between;
	padding: var(--space-s, 1.5rem) var(--space-m, 2rem);
}

.qi-calc__totals {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: var(--space-xs, 1.13rem) var(--space-l, 2.67rem);
}

.qi-calc__total {
	margin: 0;
}

.qi-calc__headline {
	color: var(--color-1, #094ab2);
	display: block;
	font-size: var(--text-h5, 2.59rem);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1.1;
}

.qi-calc__headline-label {
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
	display: block;
	font-size: var(--text-b-xs, 1.25rem);
	letter-spacing: 0.09em;
	margin-top: 0.25em;
	text-transform: uppercase;
}

.qi-calc__annual-value {
	color: var(--color-1, #094ab2);
	display: block;
	font-size: var(--text-h5, 2.59rem);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1.1;
}

.qi-calc__annual-label {
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
	display: block;
	font-size: var(--text-b-xs, 1.25rem);
	letter-spacing: 0.09em;
	margin-top: 0.25em;
	text-transform: uppercase;
}

/* Sits at the top of the panel, above the feature list. */
.qi-calc__note {
	border-left: 3px solid var(--color-2, #a4c7ff);
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
	font-size: var(--text-b-xs, 1.25rem);
	margin: 0 0 var(--space-s, 1.5rem);
	padding-left: var(--space-xs, 1.13rem);
	text-align: left;
}

/* Shown instead of the figures when the seat count is past the ceiling. */
.qi-calc__overmax {
	padding-block: var(--space-s, 1.5rem);
	text-align: center;
}

.qi-calc__overmax-heading {
	color: var(--color-1, #094ab2);
	font-size: var(--text-h6, 2.16rem);
	font-weight: 700;
	margin: 0 0 var(--space-2xs, 0.84rem);
}

.qi-calc__overmax-body {
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
	font-size: var(--text-b-s, 1.5rem);
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Compact layout
 *
 * layout="compact" on the shortcode. The seat count and the tier toggle share
 * the input panel, the tier descriptions move into the overlay, and long
 * feature lists fold to three bullets.
 * ---------------------------------------------------------------------- */

.qi-calc--compact .qi-calc__inputs {
	align-items: start;
	display: grid;
	gap: var(--space-s, 1.5rem) var(--space-l, 2.67rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	padding: var(--space-s, 1.5rem) var(--space-m, 2rem);
}

.qi-calc--compact .qi-calc__card-body {
	padding: var(--space-s, 1.5rem) var(--space-m, 2rem);
}

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

.qi-calc__cta-wrap {
	display: flex;
	flex: 1 1 14em;
	justify-content: flex-end;
}

.qi-calc__cta {
	background-color: transparent;
	border: 1px solid var(--color-1, #094ab2);
	border-radius: var(--qi-radius);
	color: var(--color-1, #094ab2);
	cursor: pointer;
	display: inline-block;
	flex: 1 1 auto;
	font-family: inherit;
	font-size: var(--text-b-xs, 1.25rem);
	font-weight: 700;
	letter-spacing: 0.09em;
	max-width: 20em;
	padding: var(--space-xs, 1.13rem) var(--space-l, 2.67rem);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.qi-calc__cta:hover,
.qi-calc__cta:focus-visible {
	background-color: var(--color-1, #094ab2);
	color: var(--color-5, #fefefe);
}

.qi-calc__cta:focus-visible,
.qi-calc__submit:focus-visible {
	outline: 2px solid var(--color-3, #6180ff);
	outline-offset: 2px;
}

.qi-calc__cta-intro {
	color: var(--color-4, #0b1a31);
	font-size: var(--text-b-s, 1.5rem);
	margin: 0 auto;
	max-width: 62ch;
	text-align: center;
}

.qi-calc__disclaimer {
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
	font-size: var(--text-b-xs, 1.25rem);
	margin: 0;
	text-align: center;
}

.qi-calc__cta-intro + .qi-calc__disclaimer {
	margin-top: var(--space-s, 1.5rem);
}

/* -------------------------------------------------------------------------
 * Need Something Different?
 * ---------------------------------------------------------------------- */

.qi-calc__tailored {
	border-top: var(--qi-border);
	margin-top: var(--space-xl, 3.55rem);
	padding-top: var(--space-l, 2.67rem);
}

.qi-calc__tailored-heading {
	color: var(--color-1, #094ab2);
	font-size: var(--text-h5, 2.59rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var(--space-s, 1.5rem);
}

.qi-calc__tailored-body {
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
	font-size: var(--text-b-s, 1.5rem);
	margin: 0;
	max-width: 90ch;
}

/* -------------------------------------------------------------------------
 * Quote form
 *
 * Sits inside the packages box, between the tab strip and the panels. While
 * it is open the whole selection steps aside -- user count, tier cards, tab
 * strip, package details and the line under the packages -- so the form is
 * as short on the page as it can be. The summary line at its head says what
 * is being quoted, the open panel keeps only its footer so the totals stay
 * in view beneath the form, and Change puts everything back.
 * ---------------------------------------------------------------------- */

.qi-calc.is-quoting .qi-calc__inputs,
.qi-calc.is-quoting .qi-calc__tiers,
.qi-calc.is-quoting .qi-calc__tier-note,
.qi-calc.is-quoting .qi-calc__tabs,
.qi-calc.is-quoting .qi-calc__card-body,
.qi-calc.is-quoting .qi-calc__cta-wrap,
.qi-calc.is-quoting .qi-calc__cta-intro {
	display: none;
}

/* The inputs above are hidden while quoting, so the box's top rule would
 * double up with the sheet's own border. */
.qi-calc.is-quoting .qi-calc__results {
	border-top: 0;
}

.qi-calc__form-panel {
	background-color: var(--color-4-t-1, hsla(216, 8%, 85%, 0.17));
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: var(--space-m, 2rem);
}

@supports (background: color-mix(in srgb, red 10%, white)) {
	.qi-calc__form-panel {
		background-color: color-mix(in srgb, var(--color-2, #a4c7ff) 13%, var(--color-5, #fefefe));
	}
}

.qi-calc__form-heading {
	color: var(--color-1, #094ab2);
	font-size: var(--text-h6, 2.16rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.25em;
}

/* One line standing in for the collapsed selection: package, user count and
 * tier, with Change at its end to bring the selection back. The separators
 * are drawn here so the text stays clean for the script to update. */
.qi-calc__form-summary {
	align-items: baseline;
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-b-s, 1.5rem);
	gap: 0.25em 0;
	margin: 0 0 var(--space-xs, 1.13rem);
}

.qi-calc__form-summary-item + .qi-calc__form-summary-item::before {
	content: "\00B7";
	margin: 0 0.5em;
}

.qi-calc .qi-calc__form-change {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--color-1, #094ab2);
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	margin: 0 0 0 auto;
	min-height: 0;
	padding: 0 0 0 var(--space-s, 1.5rem);
	text-decoration: underline;
	text-transform: none;
}

.qi-calc .qi-calc__form-change:hover,
.qi-calc .qi-calc__form-change:focus-visible {
	color: var(--color-4, #0b1a31);
}

.qi-calc__form-grid {
	display: grid;
	gap: var(--space-xs, 1.13rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.qi-calc__form-field--full {
	grid-column: 1 / -1;
}

/* Labels are placeholders, as on the site's Get in Touch form. The label
 * element stays in the markup, clipped, for screen readers. A placeholder
 * doing a label's job has to be readable, so its colour is pinned. */
.qi-calc .qi-calc__form-field input::placeholder,
.qi-calc .qi-calc__form-field textarea::placeholder {
	color: var(--color-4-t-5, hsla(216, 23%, 26%, 0.83));
	opacity: 1;
}

/* 40px fields. As with the stepper, every property a theme might set on a
 * bare input is stated here so the height holds on the live site. */
.qi-calc .qi-calc__form-field input,
.qi-calc .qi-calc__form-field textarea {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--color-5, #fefefe);
	background-image: none;
	border: var(--qi-border);
	border-radius: var(--qi-radius);
	box-shadow: none;
	color: var(--color-4, #0b1a31);
	display: block;
	font-family: inherit;
	font-size: var(--text-b-s, 1.5rem);
	height: 40px;
	line-height: 1.3;
	margin: 0;
	min-height: 0;
	padding: 0 var(--space-xs, 1.13rem);
	width: 100%;
}

.qi-calc .qi-calc__form-field textarea {
	height: auto;
	min-height: 96px;
	padding: var(--space-2xs, 0.84rem) var(--space-xs, 1.13rem);
	resize: vertical;
}

.qi-calc__form-field input:focus-visible,
.qi-calc__form-field textarea:focus-visible,
.qi-calc__consent input:focus-visible {
	outline: 2px solid var(--color-3, #6180ff);
	outline-offset: 2px;
}

.qi-calc .qi-calc__form-field input[aria-invalid="true"],
.qi-calc .qi-calc__form-field textarea[aria-invalid="true"] {
	border-color: var(--color-1, #094ab2);
	box-shadow: inset 0 0 0 1px var(--color-1, #094ab2);
}

.qi-calc__form-error {
	color: var(--color-1, #094ab2);
	font-size: var(--text-b-xs, 1.25rem);
	font-weight: 700;
	margin: 0.35em 0 0;
}

.qi-calc__consent {
	align-items: flex-start;
	display: flex;
	gap: var(--space-xs, 1.13rem);
	margin-top: var(--space-xs, 1.13rem);
}

.qi-calc__consent input {
	flex: 0 0 auto;
	height: 1.6rem;
	margin: 0.25rem 0 0;
	width: 1.6rem;
}

.qi-calc__consent label {
	font-size: var(--text-b-s, 1.5rem);
}

/* One full-width button, like the Get in Touch form. The way back is the
 * Change button in the summary line above. */
.qi-calc__form-actions {
	margin-top: var(--space-xs, 1.13rem);
}

.qi-calc .qi-calc__submit {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	border-radius: var(--qi-radius);
	box-shadow: none;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--text-b-s, 1.5rem);
	height: 40px;
	justify-content: center;
	line-height: 1;
	margin: 0;
	min-height: 0;
	padding: 0 var(--space-m, 2rem);
	text-decoration: none;
	text-transform: none;
}

.qi-calc .qi-calc__submit {
	background-color: var(--color-1, #094ab2);
	border: 1px solid var(--color-1, #094ab2);
	color: var(--color-5, #fefefe);
	font-weight: 700;
	width: 100%;
}

.qi-calc .qi-calc__submit:hover:not(:disabled) {
	background-color: var(--color-4, #0b1a31);
	border-color: var(--color-4, #0b1a31);
}

.qi-calc .qi-calc__submit:disabled {
	cursor: progress;
	opacity: 0.65;
}

.qi-calc__form-status {
	font-size: var(--text-b-s, 1.5rem);
	font-weight: 700;
	margin: var(--space-s, 1.5rem) 0 0;
}

.qi-calc__form-status--error {
	color: var(--color-1, #094ab2);
}

.qi-calc__form-status--success {
	color: var(--color-4, #0b1a31);
}

/* Honeypot: off-screen rather than display:none, because some bots skip
 * fields they can tell are not rendered. */
.qi-calc__hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

/* -------------------------------------------------------------------------
 * Editor-only notice
 * ---------------------------------------------------------------------- */

.qi-calc-notice {
	background-color: var(--color-4-t-1, hsla(216, 8%, 85%, 0.17));
	border-left: 3px solid var(--color-1, #094ab2);
	font-size: var(--text-b-s, 1.5rem);
	padding: var(--space-s, 1.5rem);
}

/* -------------------------------------------------------------------------
 * Motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.qi-calc *,
	.qi-calc *::before,
	.qi-calc *::after {
		transition-duration: 0.01ms !important;
	}
}