/**
 * ROI Calculator - brand skin
 *
 * Bootstrap 5.3 supplies the layout, grid, forms, cards, tables, buttons and
 * utilities. It is loaded first and namespaced under .roi-calc, which lifts its
 * selectors to at least 0-1-1 so they outrank the theme's bare element rules.
 * Every rule here is anchored to .roi-calc as well (0-2-0), so the brand skin
 * beats the framework without needing !important.
 *
 * Do NOT wrap the vendored Bootstrap in a cascade layer: Astra styles button,
 * ol and input unlayered, and unlayered rules beat layered ones at any
 * specificity, so the framework would silently lose to the theme.
 *
 * Only what Bootstrap cannot express lives here:
 *   - the brand palette, exposed to Bootstrap through its own --bs-* variables
 *   - the dot-textured bands and the split intro stage
 *   - the decorative red dot cluster
 *   - the full-bleed breakout
 *   - the branded pills, badges and question-card accents
 *
 * Adding a rule here that Bootstrap already provides is a regression: it will
 * silently beat the framework and break its components, as width:100% on a
 * .form-control once broke every input group.
 */

.roi-calc {
	--roi-red: #A31E22;
	--roi-red-dark: #8A181C;
	--roi-blue: #2C7B9E;
	--roi-blue-dark: #23657F;
	--roi-navy: #1F3A56;
	--roi-ink: #243746;

	/* Handed to Bootstrap so its components inherit the brand. */
	--bs-body-font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bs-body-color: var(--roi-ink);
	--bs-border-radius: 10px;
	--bs-border-color: #D7DEE4;
	--bs-primary: var(--roi-red);
	--bs-link-color: var(--roi-ink);
	--bs-emphasis-color: var(--roi-ink);
	--bs-card-border-radius: 14px;
	--bs-card-inner-border-radius: 13px;

	/*
	 * The whole component reads a step larger than the theme's body copy, which
	 * is what the mockup shows. Anything inheriting its size follows from here;
	 * the rules below only restate the pieces Bootstrap pins in rem.
	 */
	font-size: 1.08rem;

	overflow-x: hidden;
}
header#masthead {
    display: none;
}
/**
 * Full bleed.
 *
 * The calculator is normally rendered inside the theme's content column, which
 * would clip the coloured bands to that width. Negative side margins pull the
 * whole component out to the viewport edges while Bootstrap's .container keeps
 * the content centred at a readable measure.
 *
 * A plain 50vw breakout overshoots by the width of the vertical scrollbar,
 * because vw units include it. --roi-sbw carries the measured scrollbar width
 * (set on :root by the script, 0px before it runs) so the element lands exactly
 * on the visible viewport and never produces a horizontal scrollbar.
 */
.roi-calc--full {
	margin-left: calc(50% - 50vw + (var(--roi-sbw, 0px) / 2));
	margin-right: calc(50% - 50vw + (var(--roi-sbw, 0px) / 2));
	max-width: none !important;
	width: auto;
}

/* ------------------------------------------------------ Bands and textures */

.roi-calc .roi-band {
	padding: 48px 0 56px;
}

/*
 * A band's content sits above its decorative dots, exactly as the stage's does.
 * The markup already carries Bootstrap's .position-relative, so only the
 * stacking order is set here.
 */
.roi-calc .roi-band > .container {
	z-index: 2;
}

/*
 * The fill and its decoration are one background, not a fill plus a decorative
 * element: a white band is white with the red cluster set into its lower right,
 * a blue band is blue with the white cluster set into its upper left. Nothing in
 * the markup draws them, so they can never overlap the content - a background
 * always paints beneath it.
 */
.roi-calc .roi-band--white {
	background: url("../images/dots-red.svg") no-repeat right 10% bottom 20px, #fff;
}

.roi-calc .roi-band--blue {
	background: url("../images/dots-white.svg") no-repeat left 10% top 40px, var(--roi-blue);
}

.roi-calc .roi-band--red {
	background: var(--roi-red);
	color: #fff;
	padding: 36px 0 42px;
}

/*
 * A band whose colour changes behind its own content.
 *
 * The white to blue divider is measured up from the band's foot, not set as a
 * percentage of it, so it lands at the same place inside the card no matter how
 * much copy sits above: the band ends 28px below the card, so 96px puts the
 * change roughly a third of the way up it. The card keeps its own white fill and
 * overlaps the divider, which is the effect a hard boundary between two bands
 * cannot give.
 *
 * Layered over .roi-band--white so the banner and lead keep the colours they are
 * given for a white background - the copy all sits above the divider.
 */
.roi-calc .roi-band--split {
	/* Nothing follows the card here, so the band's usual foot is dead blue. */
	padding-bottom: 28px;
	background:
		/* Top right, because the lower half of this band is now blue. */
		url("../images/dots-red.svg") no-repeat right 10% top 40px,
		linear-gradient(
			#fff 0 calc(100% - 96px),
			var(--roi-blue) calc(100% - 96px) 100%
		);
}

/*
 * The band after a split one opens in the colour it just changed to, so its own
 * top padding stacks onto the split band's foot and leaves a long empty strip.
 * The two are one continuous background; they only need one gap between them.
 */
.roi-calc .roi-band--split + .roi-band {
	padding-top: 8px;
}

/*
 * The seam a white band shares with the blue one below it.
 *
 * The split stages on steps 1 and 2 draw this strip with .roi-stage__strip, a
 * real element, because the seam falls inside a single stage. Between two bands
 * there is no element at the boundary, so it is drawn on the lower edge of the
 * upper band instead. Same strip, same shadow, so the four steps read as one
 * design.
 */
.roi-calc .roi-band--seam {
	position: relative;
}

.roi-calc .roi-band--seam::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 10px;
	z-index: 1;
	background: var(--roi-blue-dark);
	box-shadow: 0 6px 18px rgba(19, 44, 66, .25);
	pointer-events: none;
}

/*
 * Split stage: the whole backdrop of steps 1 and 2 in one background.
 *
 * Three layers, painted front to back: the red cluster sitting on the foot of
 * the white half, the white cluster on the head of the blue half, and a
 * gradient with a hard stop at 46% that draws the two halves themselves. The
 * halves used to be a pair of absolutely positioned pseudo-elements and the
 * clusters a pair of spans; none of that exists now.
 *
 * The clusters are positioned against the 46% seam, so they follow it whatever
 * height the step takes, and they keep their natural 161x163 size rather than
 * being stretched with the gradient - which is why this is three layers and not
 * one flat picture of the whole scene.
 *
 * Height and centring.
 *
 * The stage fills what is left of the viewport under the logo and centres its
 * card in it, so a short step sits in the middle of the screen instead of
 * hanging from the top. It is a minimum, not a fixed height: a step taller than
 * the viewport - the contact form on a phone, a card whose copy has wrapped -
 * grows the stage and the page scrolls, where a fixed 100vh with overflow
 * hidden simply cut the overflow off. The padding is symmetrical for the same
 * reason: uneven padding would shift the centre off the middle of the stage.
 *
 * --roi-head-h carries the measured height of the logo header (set on the root
 * by the script, 0px before it runs, 0px when no logo is rendered), so the
 * logo and the stage together are one viewport tall and the first screen has
 * nothing below it to scroll to.
 */
 
.e-con-inner {
    padding: 0 !important;
}

.roi-calc .roi-stage {
	min-height: calc(100vh - var(--roi-head-h, 0px));
	min-height: calc(100svh - var(--roi-head-h, 0px));
	display: flex;
	align-items: center;
	position: relative;
	padding: 72px 0;
	background:
		url("../images/dots-red.svg") no-repeat right 10% top calc(46% - 183px),
		url("../images/dots-white.svg") no-repeat left 10% top calc(46% + 28px),
		linear-gradient(#fff 0 46%, var(--roi-blue) 46% 100%);
}

 /*
  * Content paints above the seam strip, the one decorative element left. The
  * markup already carries Bootstrap's .position-relative, so only the stacking
  * order is set here - redeclaring position would duplicate the framework.
  *
  * The container is a flex item now that the stage centres it, and a flex item
  * refuses to shrink below its content by default; min-width releases that so
  * an unbreakable line inside a card can never push the stage wider than the
  * screen.
  */
.roi-calc .roi-stage > .container {
	z-index: 2;
	min-width: 0;
}

@media (max-width: 767px) {
	.roi-calc .roi-band { padding: 32px 0 38px; }
	/* Symmetrical, so the card stays centred on the stage. */
	.roi-calc .roi-stage { padding: 40px 0; }
}

/*
 * Below 992px the clusters are dropped and the fills kept: there is no margin
 * left to decorate once the content spans the viewport.
 */
@media (max-width: 991px) {
	.roi-calc .roi-band--white { background-image: none; }
	.roi-calc .roi-band--blue { background-image: none; }

	/* The divider stays; only its cluster goes. */
	.roi-calc .roi-band--split {
		background-image: linear-gradient(
			#fff 0 calc(100% - 96px),
			var(--roi-blue) calc(100% - 96px) 100%
		);
	}

	.roi-calc .roi-stage {
		background-image: linear-gradient(#fff 0 46%, var(--roi-blue) 46% 100%);
	}
}

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

/* Bootstrap 5.3 buttons are variable driven, so a brand variant is just vars. */
.roi-calc .btn-at-red,
.roi-calc .btn-at-blue,
.roi-calc .btn-at-ghost {
	--bs-btn-padding-y: .98rem;
	--bs-btn-padding-x: 3.05rem;
	--bs-btn-font-size: 1.12rem;
	--bs-btn-font-weight: 700;
	--bs-btn-border-radius: 40px;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
	transition: .18s;
}

.roi-calc .btn-at-red {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--roi-red);
	--bs-btn-border-color: var(--roi-red);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--roi-red-dark);
	--bs-btn-hover-border-color: var(--roi-red-dark);
	--bs-btn-active-bg: var(--roi-red-dark);
	--bs-btn-active-border-color: var(--roi-red-dark);
}

.roi-calc .btn-at-blue {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--roi-blue);
	--bs-btn-border-color: var(--roi-blue);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--roi-blue-dark);
	--bs-btn-hover-border-color: var(--roi-blue-dark);
	--bs-btn-active-bg: var(--roi-blue-dark);
	--bs-btn-active-border-color: var(--roi-blue-dark);
}

.roi-calc .btn-at-ghost {
	--bs-btn-color: var(--roi-navy);
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #D7DEE4;
	--bs-btn-hover-color: var(--roi-navy);
	--bs-btn-hover-bg: #F5F7F9;
	--bs-btn-hover-border-color: var(--roi-navy);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .10);
}

.roi-calc .btn-at-red:hover,
.roi-calc .btn-at-blue:hover,
.roi-calc .btn-at-ghost:hover { transform: translateY(-1px); }
.roi-calc .btn-at-red:active{color:#fff;}
/*
 * The action row that tucks under a card's lower edge.
 *
 * Bootstrap gives .card position:relative, so the card paints above a later
 * sibling that is not positioned. The negative margin would slide the button
 * behind it; positioning the row restores it to the front.
 */
.roi-calc .roi-actions--overlap {
	position: relative;
	z-index: 1;
	margin-top: -26px;
}

/* ------------------------------------------------------------- Cards */

.roi-calc .roi-card {
	border: 2.5px solid var(--roi-red);
	box-shadow: 0 18px 44px rgba(19, 44, 66, .18);
}

.roi-calc .roi-card__title { color: var(--roi-ink); font-size: 2.2rem; }
.roi-calc .roi-form-head__title { color: var(--roi-ink); }

@media (max-width: 767px) {
	/*
	 * The display sizes above are for a desktop measure, not a phone.
	 *
	 * They are set to fill a wide card; on a narrow screen the same figures only
	 * force wrapping, so every one of them is restated here at a size the width
	 * can carry. Anything scaled up above needs an entry here too.
	 */
	.roi-calc { font-size: 1rem; }

	.roi-calc .roi-card__title { font-size: 1.65rem; }
	.roi-calc .roi-kpi__val { font-size: 1.9rem; }
	.roi-calc .roi-headline { font-size: 1.45rem; }
	.roi-calc .roi-table-title { font-size: 1.25rem; }
	.roi-calc .roi-insight__title { font-size: 1.5rem; }
	.roi-calc .roi-insight p { font-size: 1.08rem; }
	.roi-calc .roi-card--intro p { font-size: 1.08rem; line-height: 1.7; }
	.roi-calc .roi-pill-banner { font-size: 1.55rem; padding: .75rem 1.9rem; }
	.roi-calc .roi-pill { font-size: 1.4rem; padding: .6rem 1.9rem; }
	.roi-calc .roi-part__lead { font-size: 1.3rem; }
	.roi-calc .roi-form-head__title { font-size: 1.35rem; }
	.roi-calc .roi-form-lead { font-size: 1.05rem; }
	.roi-calc .roi-label--q { font-size: 1.12rem; }
	.roi-calc .roi-badge { width: 36px; height: 36px; font-size: 1rem; }
	.roi-calc .roi-fg .form-label { font-size: 1.12rem; }
	.roi-calc .roi-fg .form-control { font-size: 1.14rem; padding: .95rem 1.05rem; }
	.roi-calc .roi-q > .card-body { padding: 1.45rem 1.3rem; }

	.roi-calc .btn-at-red,
	.roi-calc .btn-at-blue,
	.roi-calc .btn-at-ghost {
		--bs-btn-font-size: 1rem;
		--bs-btn-padding-x: 2rem;
	}
}

/*
 * Question card: the brand's coloured outline, thinned and moved to a wider
 * top edge so a column of cards reads as a list rather than a row of boxes.
 */
.roi-calc .roi-q {
	border: 1.5px solid #E7DBDC;
	border-top: 4px solid var(--roi-red);
	box-shadow: 0 6px 18px rgba(19, 44, 66, .10);
	transition: box-shadow .2s ease, transform .2s ease;
}

.roi-calc .roi-q:focus-within {
	box-shadow: 0 10px 26px rgba(19, 44, 66, .16);
	transform: translateY(-1px);
}

.roi-calc .roi-q--blue {
	border-color: #D8E4EA;
	border-top-color: var(--roi-ink);
}

.roi-calc .roi-insight {
	border: 0;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
}

.roi-calc .roi-insight__title { color: var(--roi-red); font-size: 1.9rem; }

/* Body copy inside the insight card, which closes the questionnaire step. */
.roi-calc .roi-insight p { font-size: 1.22rem; line-height: 1.7; }

/* The one call to action on the questionnaire step, so it reads as a link. */
.roi-calc .roi-insight__cta {
	color: var(--roi-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.roi-calc .roi-insight__cta:hover,
.roi-calc .roi-insight__cta:focus { color: var(--roi-red); }

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

/*
 * Form scale.
 *
 * The banners and pills are set large, and at Bootstrap's defaults the questions
 * and the boxes they are answered in read small beside them. Everything the
 * visitor actually reads or fills in is scaled up so the two agree, and so the
 * contact and questionnaire steps carry their full width rather than leaving the
 * card mostly air.
 *
 * Anchored to .roi-fg, the wrapper every field renders inside, so the contact
 * step and the questionnaire scale together and nothing outside a field group -
 * the sensitivity slider, the print controls - is caught by it. That also keeps
 * the results step at its own scale: no field group renders there.
 */
	.roi-calc .roi-fg .form-control {
    font-size: 16px;
    padding: 10px 15px;
    background-color: #F4F5F7;
    border-color: #E1E5EA;
    height: 45px;
}


.roi-calc .roi-fg .form-control:focus { background-color: #fff; }

/*
 * Sized to the longest question, not to the shortest.
 *
 * A question sits in a half-width card beside its number badge, which leaves
 * roughly 480px of measure. Q1 is the longest of the eleven and ran to three
 * lines a step above this, leaving its answer box out of line with the one
 * beside it. At this size it breaks over two, as the rest already did.
 */
.roi-calc .roi-fg .form-label {
    font-size: 16px;
    margin-bottom: 15px;
}
.roi-calc .roi-fg .form-text { font-size: 1.06rem; }
.roi-calc .roi-fg .invalid-feedback { font-size: 1.04rem; }

/*
 * Card headings: "User Information", "Questionnaire".
 *
 * These label a card, they do not open the page - the product title above the
 * contact card and the part lead above the questionnaire do that. At display
 * size and 700 weight they read as the loudest thing on the screen, which puts
 * a filing label above the question the visitor is meant to answer.
 *
 * Sized and weighted to sit clearly below both the title above them and the
 * band headings, while still leading the fields beneath. fw-bold is off the
 * markup rather than overridden here: Bootstrap's weight utilities carry
 * !important, so the class had to go for a lighter weight to take at all.
 */
.roi-calc .roi-form-head__title {
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: -.01em;
}

/* The line under a card heading, introducing what the step asks for. */
.roi-calc .roi-form-lead { font-size: 1.24rem; line-height: 1.6; }

/* The question cards grow with what they hold. */
.roi-calc .roi-q > .card-body { padding: 1.9rem 1.8rem; }

/* Numbered question label: badge left, question text beside it. */
.roi-calc .roi-label--q {
	font-weight: 500;
	/* Tracks .roi-fg .form-label above, which every question also carries. */
	font-size: 1.22rem;
	line-height: 1.5;
	color: var(--roi-ink);
}

.roi-calc .roi-badge {
	width: 43px;
	height: 43px;
	margin-top: 1px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--roi-red);
	color: #fff;
	font-size: 1.14rem;
}

.roi-calc .roi-q--blue .roi-badge { background: #a31e22; }

/*
 * The tablet step between the two scales above.
 *
 * The questionnaire is still two groups wide here and the contact fields are
 * still paired, but on a 768-991px measure the desktop sizes leave a question
 * wrapping over four lines. Sized between the two rather than dropped straight
 * to the phone scale, which this width does not need.
 */
@media (min-width: 768px) and (max-width: 991px) {
	.roi-calc .roi-fg .form-control { font-size: 1.28rem; padding: 1.05rem 1.2rem; }
	.roi-calc .roi-fg .form-label { font-size: 1.2rem; }
	.roi-calc .roi-label--q { font-size: 1.2rem; }
	.roi-calc .roi-badge { width: 40px; height: 40px; font-size: 1.06rem; }
	.roi-calc .roi-q > .card-body { padding: 1.6rem 1.45rem; }
	.roi-calc .roi-form-head__title { font-size: 1.5rem; }
	.roi-calc .roi-part__lead { font-size: 1.7rem; }
	.roi-calc .roi-pill-banner { font-size: 1.9rem; padding: .8rem 2.4rem; }
	.roi-calc .roi-pill { font-size: 1.65rem; padding: .65rem 2.2rem; }
	.roi-calc .roi-insight__title { font-size: 1.65rem; }
	.roi-calc .roi-insight p { font-size: 1.12rem; }
}

.roi-calc .roi-req {
	color: var(--roi-red);
	margin-left: .2em;
	font-weight: 700;
}

.roi-calc .roi-val { color: var(--roi-red); }

/* Native spinners fight the unit suffix and invite mis-clicks. */
.roi-calc input[type="number"] { -moz-appearance: textfield; }

.roi-calc input[type="number"]::-webkit-outer-spin-button,
.roi-calc input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/*
 * Validation.
 *
 * The script flags the .roi-fg wrapper as well as the control, so a field only
 * turns red once the visitor has left it or tried to submit. Bootstrap only
 * reveals .invalid-feedback for a sibling of the control, and ours sits outside
 * the input group, so its visibility is driven from the wrapper instead.
 */
.roi-calc .roi-fg.is-invalid .invalid-feedback { display: block; }

/* --------------------------------------------------- Pills and headings */

.roi-calc .roi-pill-banner {
	display: inline-block;
	background: var(--roi-red);
	color: #fff;
	border-radius: 16px;
	padding: .88rem 3rem;
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.2;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

/*
 * The four group headings.
 *
 * One colour for all four, whichever band they sit on. They used to take their
 * colour from the ground - white on the blue band, red on the white one - which
 * made Data Cleaning and Sampling read as a different kind of heading from
 * Vouching & Tracing and Journal Entry Testing when they are peers. Red carries
 * both grounds, so the --on-blue and --on-white modifiers are gone rather than
 * kept as two names for one appearance.
 */
.roi-calc .roi-pill {
	display: inline-block;
	background: var(--roi-red);
	color: #fff;
	border-radius: 10px;
	padding: .72rem 2.65rem;
	font-weight: 700;
	font-size: 1.9rem;
	line-height: 1.2;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
}

.roi-calc .roi-chev { color: #fff; width: 46px; height: 46px; }

/*
 * Part headers.
 *
 * Only the lead line's own colour is set on the blue ground. A blanket rule on
 * the band would be inherited by the white question cards inside it and turn
 * their contents white on white.
 */
.roi-calc .roi-part__lead { font-size: 1.95rem; line-height: 1.4; }

.roi-calc .roi-band--white .roi-part__lead { color: var(--roi-ink); }
.roi-calc .roi-band--blue .roi-part__lead { color: rgba(255, 255, 255, .92); }


/* ------------------------------------------------------------- Results */

.roi-calc .roi-sect--time .roi-sect__title { color: var(--roi-ink); }

/*
 * The investment section inverts onto the blue ground. Only its own heading
 * and lead go white; a blanket colour would be inherited by the white cards
 * inside it, turning their contents white on white.
 */
.roi-calc .roi-sect--cost .roi-sect__title { color: #fff; }
.roi-calc .roi-sect--cost .roi-sect__lead { color: rgba(255, 255, 255, .9); }

.roi-calc .roi-sect__title { font-size: 2.2rem; }

@media (max-width: 767px) {
	.roi-calc .roi-sect__title { font-size: 1.5rem; }
}

.roi-calc .roi-headline { color: var(--roi-navy); max-width: 860px; font-size: 2rem; }
.roi-calc .roi-headline:empty { display: none; }

/*
 * Rates card: two inputs, and the two figures they produce.
 *
 * A white card on the blue band, matching the KPI tiles beside it, so it reads
 * as part of the investment section rather than as a form bolted underneath it.
 */
.roi-calc .roi-rates {
	border: 0;
	border-top: 6px solid var(--roi-blue);
	box-shadow: 0 10px 26px rgba(19, 44, 66, .18);
}

.roi-calc .roi-rates > .card-body { padding: 2rem 2.2rem; }

.roi-calc .roi-rates__title {
	color: var(--roi-navy);
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: .35rem;
	text-align: center;
}

.roi-calc .roi-rates__lead {
	color: #7A8794;
	font-size: 1.02rem;
	text-align: center;
	margin-bottom: 1.6rem;
}

.roi-calc .roi-rates__label {
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--roi-ink);
	margin-bottom: .5rem;
}

.roi-calc .roi-rates__input {
	font-size: 1.2rem;
	padding: .85rem 1rem;
	background-color: #F4F5F7;
	border-color: #E1E5EA;
}

.roi-calc .roi-rates__input:focus { background-color: #fff; }

/* The currency sign leads the number; the unit closes it. */
.roi-calc .roi-rates__cur,
.roi-calc .roi-rates__per {
	background: #F6F8FA;
	color: #7A8794;
	font-size: 1.05rem;
	font-weight: 600;
	white-space: nowrap;
}

.roi-calc .roi-rates__cur { color: var(--roi-ink); }

/*
 * The results half. Separated by a rule rather than by a heading: the caption
 * under each figure already says what it is, and a second heading inside one
 * card would compete with the one above.
 */
.roi-calc .roi-rates__out {
	margin-top: .6rem;
	padding-top: 1.5rem;
	border-top: 1px solid #E7EBEF;
	text-align: center;
}

.roi-calc .roi-rates__val {
	font-size: 2.1rem;
	font-weight: 700;
	color: var(--roi-navy);
	line-height: 1.15;
	word-break: break-word;
}

.roi-calc .roi-rates__cap {
	font-size: .98rem;
	color: #7A8794;
	margin-top: .35rem;
}

/* The sum behind the figure, so it can be checked rather than trusted. */
.roi-calc .roi-rates__sub {
	font-size: .86rem;
	color: #A6B0BA;
	margin-top: .2rem;
}

@media (max-width: 767px) {
	.roi-calc .roi-rates > .card-body { padding: 1.5rem 1.25rem; }
	.roi-calc .roi-rates__title { font-size: 1.3rem; }
	.roi-calc .roi-rates__lead { font-size: .95rem; }
	.roi-calc .roi-rates__val { font-size: 1.75rem; }
	.roi-calc .roi-rates__input { font-size: 1.06rem; }
}

.roi-calc .roi-adopt { border-left: 4px solid var(--roi-red); }

.roi-calc .roi-kpi { border-top: 6px solid var(--roi-red); }
.roi-calc .roi-kpi--blue { border-top-color: var(--roi-blue); }
.roi-calc .roi-kpi__val { font-size: 2.6rem; color: var(--roi-navy); line-height: 1.1; word-break: break-word; }
.roi-calc .roi-kpi__sub { font-size: .95rem; }

.roi-calc .roi-table-title { color: var(--roi-navy); font-size: 1.6rem; }

.roi-calc .roi-table > thead th {
	background: var(--roi-navy);
	color: #fff;
	font-weight: 600;
	font-size: .98rem;
	white-space: nowrap;
	border-bottom: 0;
	border-right:1px solid #fff;
}


.roi-calc .roi-table th.roi-th-group {
	font-size: .88rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/*
 * The three tiers, told apart by colour and by a rule.
 *
 * The table reads left to right as a single run of eight numbers, which is not
 * what it is: it is the visitor's own workflow figures, then what one
 * engagement recovers, then what a year does. Without a break between them a
 * reader has to keep the grouped header in mind the whole way down the column
 * to know which is which, and by the fourth row they do not.
 *
 * A tint per tier and a rule at each boundary, on every row of the table, so
 * the grouping the header states is still visible at the bottom of the body.
 * The tints are deliberately faint: they group the columns without competing
 * with the figures, which are what the table is for.
 *
 * Positional selectors rather than classes on every cell. The row is written
 * in three places - the body, the total, the header - and the column order is
 * the one thing all three already agree on.
 */
.roi-calc .roi-table {
	--roi-tier-line: #B9C6D2;
	--roi-tier-work: rgba(44, 123, 158, .07);
	--roi-tier-eng: rgba(163, 30, 34, .05);
	--roi-tier-year: rgba(31, 58, 86, .11);
}

/* Workflow level: the visitor's own minutes, and the toolbar's. */
.roi-calc .roi-table > tbody > tr > td:nth-child(n+2):nth-child(-n+4) {
	background-color: var(--roi-tier-work);
}

/* Per engagement. */
.roi-calc .roi-table > tbody > tr > td:nth-child(n+5):nth-child(-n+6) {
	background-color: var(--roi-tier-eng);
}

/* The year, carried strongest: it is the figure the section is about. */
.roi-calc .roi-table > tbody > tr > td:nth-child(7) {
	background-color: var(--roi-tier-year);
}

/*
 * Hover, restated.
 *
 * Bootstrap's own hover paints a background at a lower specificity than the
 * tints above, so without this the row simply stopped responding to the
 * pointer once the columns were coloured.
 */
.roi-calc .roi-table.table-hover > tbody > tr:hover > td:nth-child(n+2):nth-child(-n+4) {
	background-color: rgba(44, 123, 158, .15);
}

.roi-calc .roi-table.table-hover > tbody > tr:hover > td:nth-child(n+5):nth-child(-n+6) {
	background-color: rgba(163, 30, 34, .11);
}

.roi-calc .roi-table.table-hover > tbody > tr:hover > td:nth-child(7) {
	background-color: rgba(31, 58, 86, .19);
}

/*
 * The boundaries: after Area, after the workflow figures, before the year.
 *
 * Carried on the first cell of each tier so one rule covers the header, every
 * body row and the total. In the header the rule is white against the navy; in
 * the body it is a solid line dark enough to read across a tinted cell.
 */
.roi-calc .roi-table > tbody > tr > td:nth-child(2),
.roi-calc .roi-table > tbody > tr > td:nth-child(5),
.roi-calc .roi-table > tbody > tr > td:nth-child(7),
.roi-calc .roi-table > tfoot > .roi-total > td:nth-child(2),
.roi-calc .roi-table > tfoot > .roi-total > td:nth-child(3) {
	border-left: 2px solid var(--roi-tier-line);
}

/* Against navy the same rule has to be light to be seen at all. */
.roi-calc .roi-table > tfoot > .roi-total > td:nth-child(2),
.roi-calc .roi-table > tfoot > .roi-total > td:nth-child(3),
.roi-calc .roi-table > thead > tr:first-child > th:nth-child(n+2),
.roi-calc .roi-table > thead > tr:last-child > th:nth-child(1),
.roi-calc .roi-table > thead > tr:last-child > th:nth-child(4) {
	border-left: 2px solid rgba(255, 255, 255, .5);
}

/*
 * Total row.
 *
 * The closing figure of the section, so it is banded rather than left to read
 * as one more row of the body. Only the annual column carries a number: the
 * columns before it are per unit rates and a minutes-per-engagement figure,
 * none of which totals into anything a reader should add up.
 */
.roi-calc .roi-table > tfoot > .roi-total > td {
	background: var(--roi-navy);
	color: #fff;
	border-top: 3px solid var(--roi-red);
	border-bottom: 0;
	padding-top: .85rem;
	padding-bottom: .85rem;
}

.roi-calc .roi-total__label {
	font-weight: 700;
	font-size: 1.06rem;
	letter-spacing: .02em;
}

/* The blocked out span: a shade off the band, so the gap is clearly meant. */
.roi-calc .roi-table > tfoot > .roi-total > .roi-total__blank { background: #2B4763; }

.roi-calc .roi-total__val { font-weight: 700; font-size: 1.25rem; }

.roi-calc .roi-table { min-width: 780px; font-size: 1.04rem; }

.roi-calc .roi-area { display: block; font-weight: 600; color: var(--roi-ink); }
.roi-calc .roi-basis { display: block; font-size: .88rem; color: #93A0AC; }
.roi-calc .roi-table td.roi-atb { color: var(--roi-blue); font-weight: 600; }
.roi-calc .roi-pct { display: block; font-size: .84rem; font-weight: 600; color: var(--roi-red); }

/* -------------------------------------------------------------- Wizard */

.roi-calc .roi-step { display: none; }

.roi-calc .roi-step.is-active {
	display: block;
	animation: roi-fade .25s ease;
}

@keyframes roi-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

@media print {
	/*
	 * The report goes to paper, not the wizard.
	 *
	 * This block used to reveal every step, so Print / Save PDF produced the
	 * introduction, the contact form and all eleven questions ahead of the
	 * results. Only the step on screen prints now, which from that button is
	 * always the results; the earlier steps are input and have no place in the
	 * output.
	 */
	.roi-calc .roi-step { display: none !important; }
	.roi-calc .roi-step.is-active { display: block !important; }

	/*
	 * Browsers drop background colours when printing unless told otherwise, and
	 * three places here set light text on a coloured ground: the investment
	 * section's heading on the blue band, the results table's header row on navy
	 * and its total row on the same. Without their backgrounds all print white
	 * on white.
	 *
	 * The table body is on the list for a different reason: its columns are
	 * tinted by tier, and a sheet that drops the tints loses the grouping the
	 * screen has. The rules at each boundary print either way - a border is not
	 * a background - but the two were designed to be read together.
	 */
	.roi-calc .roi-band--blue,
	.roi-calc .roi-table > tbody > tr > td,
	.roi-calc .roi-table > tfoot > .roi-total > td,
	.roi-calc .roi-table > thead th {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/*
	 * The results table.
	 *
	 * On screen it is held to a 780px minimum and scrolls sideways inside
	 * .table-responsive. Paper cannot scroll, so that clip simply cut the
	 * right-hand columns off the page: both the minimum and the overflow are
	 * released here, and the type is set in points to fit the sheet.
	 */
	.roi-calc .table-responsive {
		overflow: visible !important;
	}

	.roi-calc .roi-table {
		min-width: 0 !important;
		width: 100% !important;
		font-size: 8pt;
		/*
		 * Fixed, so the columns are shared out deliberately instead of the
		 * browser squeezing the numeric ones to fit the area names.
		 */
		table-layout: fixed;
	}

	/*
	 * Widths are declared on the first header row, which is what a fixed layout
	 * measures: the area names, the three function-level figures, the two per
	 * engagement figures, then the annual total.
	 */
	.roi-calc .roi-table > thead tr:first-child th:nth-child(1) { width: 24%; }
	.roi-calc .roi-table > thead tr:first-child th:nth-child(2) { width: 34%; }
	.roi-calc .roi-table > thead tr:first-child th:nth-child(3) { width: 24%; }
	.roi-calc .roi-table > thead tr:first-child th:nth-child(4) { width: 18%; }

	.roi-calc .roi-table th,
	.roi-calc .roi-table td {
		padding: .3rem .35rem;
		vertical-align: middle;
		/*
		 * The headings are nowrap on screen and must be free to wrap on paper,
		 * but only between words: break-word turned "Current" into "Curre nt"
		 * and "Recovery" into "Recove ry".
		 */
		white-space: normal !important;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
	}
	.roi-calc .roi-table > thead th { font-size: 7.5pt; line-height: 1.25; }
	.roi-calc .roi-total__label { font-size: 8pt; }
	.roi-calc .roi-total__val { font-size: 9pt; }
	.roi-calc .roi-table th.roi-th-group { font-size: 7pt; }
	.roi-calc .roi-basis { font-size: 7pt; }
	.roi-calc .roi-pct { font-size: 7pt; }

	/* A long table repeats its header and never splits a row across sheets. */
	.roi-calc .roi-table thead { display: table-header-group; }
	.roi-calc .roi-table tr { page-break-inside: avoid; }

	/*
	 * Keep each part of the report whole. Without this the investment section
	 * starts at the foot of the first sheet and its two figures land on the
	 * second, which reads as a mistake rather than a page turn.
	 */
	.roi-calc .roi-sect,
	.roi-calc .roi-adopt,
	.roi-calc .roi-rates,
	.roi-calc .table-responsive { page-break-inside: avoid; }

	/*
	 * ------------------------------------------------------------------
	 * Fitting one sheet.
	 *
	 * The results step carries far more than it did: a headline, a
	 * sensitivity control, a seven row table, two KPI tiles, a currency
	 * picker and two rate boxes with their figures. At screen sizes that
	 * is most of two sheets, and a report that turns the page in the
	 * middle of its own numbers reads as a fault.
	 *
	 * Three things are done about it, in this order of preference:
	 *
	 *   1. Drop what is a control rather than a result. A slider and two
	 *      number boxes do nothing on paper; their VALUES are kept, moved
	 *      into text that prints.
	 *   2. Drop prose that only makes sense on screen - anything phrased
	 *      as an instruction to the reader.
	 *   3. Only then, tighten type and spacing.
	 *
	 * Cutting furniture before shrinking type keeps the figures legible,
	 * which is the one thing the sheet exists to do.
	 * ------------------------------------------------------------------
	 */

	/* A narrow margin buys back roughly two table rows of height. */
	@page { margin: 10mm; }

	/*
	 * 0. Pair what the breakpoints unstacked.
	 *
	 * Bootstrap's col-md-6 starts at 768px and a print viewport is routinely
	 * narrower, so on paper .row > * fell back to width:100% and put Recovery
	 * and Spend on a row each - and the two rate figures below them likewise.
	 * That is most of the overflow: four stacked cards where two rows of two
	 * were intended.
	 *
	 * Forced rather than fixed by changing the breakpoint, because the screen
	 * layout is correct as it is; it is only the print viewport that lies
	 * about how much width there is.
	 */
	.roi-calc .roi-kpi-row > [class*="col-"],
	.roi-calc .roi-rates__out > [class*="col-"] {
		flex: 0 0 auto !important;
		width: 50% !important;
		max-width: 50% !important;
	}

	/*
	 * The container is centred at a breakpoint's measure, which on a narrow
	 * print viewport leaves the sheet's margins doubled. The page margin above
	 * is the only one wanted.
	 */
	.roi-calc .container {
		max-width: none !important;
		width: 100% !important;
		padding-left: 6px !important;
		padding-right: 6px !important;
	}

	/*
	 * 1. Controls.
	 *
	 * The sensitivity card keeps its label, which carries the percentage
	 * applied; the slider and its explanation go. The rate boxes go
	 * entirely - each figure's own caption already prints the rate it used
	 * ("192 hours x 750 an hour"), so nothing is lost with them.
	 */
	.roi-calc .roi-adopt {
		max-width: none !important;
		border-left: 0;
		margin: .4rem 0 .6rem !important;
	}

	.roi-calc .roi-adopt > .card-body { padding: 0; }
	.roi-calc .roi-adopt .form-range,
	.roi-calc .roi-adopt .form-text { display: none !important; }

	/*
	 * Left as a flex row rather than forced to block: the label is two
	 * spans, "Sensitivity" and the percentage, and block would run them
	 * together with no space between. Only the justification changes, from
	 * pushed apart across a 560px card to centred with a gap.
	 */
	.roi-calc .roi-adopt .form-label {
		justify-content: center !important;
		gap: .4rem;
		font-size: 9pt;
		margin: 0 !important;
	}

	.roi-calc .roi-rates__inputs { display: none !important; }

	/*
	 * The rates card prints either way.
	 *
	 * It used to be dropped when no rate had been given, on the grounds that an
	 * untouched one is two dashes and an instruction. That made the printed
	 * sheet and the emailed report disagree about what the report contains: a
	 * reader handed the PDF found the time and the spend and no mention of what
	 * the time was worth, with nothing to say the section existed at all.
	 *
	 * It prints as it stands on screen instead, dashes and all. The line
	 * telling the reader to enter their rates is normally screen-only prose and
	 * is restored for this one case, because it is the only thing that explains
	 * the dashes to somebody holding a sheet of paper.
	 */
	.roi-calc .roi-rates--empty .roi-rates__lead { display: block !important; }

	/*
	 * 2. Screen-only prose.
	 *
	 * Each of these addresses the reader as someone who can act on the
	 * page - "enter your rates", "change it if" - or explains a mechanism
	 * that is only visible on screen. The email status line is a
	 * transient state and never belonged on paper at all.
	 */
	.roi-calc [data-roi="email-status"],
	.roi-calc .roi-rates__lead,
	.roi-calc .roi-table-note,
	.roi-calc .roi-sect--cost .roi-sect__lead { display: none !important; }

	/*
	 * The "based on N engagements across a team of N" line stays. It is the
	 * only thing on the sheet that says whose figures these are, and a
	 * printed report separated from the screen that produced it needs that
	 * more than the screen ever did.
	 */
	.roi-calc [data-roi="results-for"] {
		font-size: 8.5pt;
		margin-bottom: .3rem !important;
	}

	/* Kept, but at a footnote's weight: it explains the arithmetic. */
	.roi-calc .roi-round-note { font-size: 7pt; margin-top: .4rem !important; }

	/*
	 * 3. Type and spacing.
	 *
	 * Screen spacing is generous because the bands are full-bleed colour.
	 * On paper that generosity is what costs the second sheet.
	 */
	.roi-calc { font-size: 9pt; }
	.roi-calc .roi-band { padding: 10px 0 12px !important; }
	.roi-calc .roi-sect__title { font-size: 13pt; margin-bottom: .2rem !important; }
	.roi-calc .roi-headline { font-size: 12pt; margin-bottom: .3rem !important; }
	.roi-calc .roi-table-title { font-size: 11pt; margin-top: .5rem !important; }
	.roi-calc .roi-kpi__val { font-size: 15pt; }
	.roi-calc .roi-kpi__sub { font-size: 8pt; }
	.roi-calc .roi-kpi > .card-body { padding: .5rem .6rem; }

	.roi-calc .roi-rates > .card-body { padding: .6rem .8rem; }
	.roi-calc .roi-rates__title { font-size: 11pt; margin-bottom: .3rem; }
	.roi-calc .roi-rates__out { margin-top: 0; padding-top: .5rem; }
	.roi-calc .roi-rates__val { font-size: 14pt; }
	.roi-calc .roi-rates__cap { font-size: 8pt; }
	.roi-calc .roi-rates__sub { font-size: 7.5pt; }

	/* Gutters between the tiles, which Bootstrap sets in rem. */
	.roi-calc .g-4 { --bs-gutter-y: .6rem; --bs-gutter-x: .8rem; }
	.roi-calc .mt-4 { margin-top: .5rem !important; }
	.roi-calc .mb-4 { margin-bottom: .4rem !important; }
	.roi-calc .my-4 { margin-top: .4rem !important; margin-bottom: .4rem !important; }
	.roi-calc .mt-5 { margin-top: .6rem !important; }

	/*
	 * Decoration. The seam and the accent strip are there to make the
	 * bands meet nicely on a scrolling page; on a single sheet they are
	 * ink for its own sake.
	 */
	.roi-calc .roi-band--seam::after,
	.roi-calc .roi-stage__strip { display: none !important; }

	.roi-calc .card { box-shadow: none; }
	.roi-calc .roi-card { border-width: 1px; }
}

/* ------------------------------------------------------- Question grid */

/*
 * Two feature groups side by side, each stacking its own questions.
 *
 * Bootstrap columns cannot do this: two independent columns size their cards
 * separately, so the pairs never line up. A grid with column flow keeps the
 * DOM in reading and tab order - the whole Data Cleaning group, then the whole
 * Sampling group - while each grid row sizes to its tallest cell, so the cards
 * match height across the two groups.
 *
 * Three rows: the pill, then one per question. The Journal Entry group has a
 * single question, and its empty third cell simply collapses.
 */
.roi-calc .roi-qgrid {
	display: grid;
	grid-template-rows: auto auto auto;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	column-gap: 40px;
	row-gap: 28px;
	/* Wider measure, so the larger question text does not wrap as often. */
	max-width: 1280px;
	margin: 0 auto;
}

/*
 * Kept as a hook rather than a measure.
 *
 * The grid it names once held a third group and needed the extra width; two
 * groups take the same measure as every other row, so it now matches
 * .roi-qgrid. The class stays on the element as a styling hook.
 */
.roi-calc .roi-qgrid--three {
	max-width: 1280px;
}

/*
 * Closes a short group's column. Structural only: it holds a grid cell open and
 * draws nothing, and the row it sits in is sized by the real cards beside it.
 */
.roi-calc .roi-qgrid__spacer {
	display: block;
}

/* Stacked on narrow screens, still in group order. */
@media (max-width: 767px) {
	.roi-calc .roi-qgrid {
		grid-template-rows: none;
		grid-auto-flow: row;
		grid-auto-columns: auto;
	}

	/* Nothing to hold open once the groups stack, and an empty item would
	   otherwise leave a gap below Journal Entry Testing. */
	.roi-calc .roi-qgrid__spacer {
		display: none;
	}
}

/* ------------------------------------------------- Introduction step */

/*
 * Three requested adjustments live here: a larger text box, more depth in the
 * background so the surrounding space reads as designed rather than empty, and
 * a reliably centred logo.
 */

/* 1. Text box. Wider column in the markup, plus a roomier interior. */
.roi-calc .roi-card--wide > .card-body {
	padding: 50px 50px 62px;
}

.roi-calc .roi-card--intro .roi-card__title {
	font-size: 2.25rem;
    margin-bottom: 1.6rem;
    font-weight: 600;
}

/*
 * Introduction copy.
 *
 * Four paragraphs of continuous prose, which is more reading than anywhere else
 * in the component. Set a step down from the display sizes around it and at a
 * tighter leading: at 1.82 the lines drifted far enough apart that the eye had
 * to hunt for the next one, which is the opposite of what generous leading is
 * meant to buy.
 */
.roi-calc .roi-card--intro p {
	font-size: 1.34rem;
	line-height: 1.7;
	margin-bottom: 1.45rem;
	/*
	 * Keeps the measure readable as the box widens. Stated in ch, so it grows
	 * with the type: the same number of characters a line, set larger, which is
	 * what fills the card rather than a longer line of small text.
	 */
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 991px) {
	.roi-calc .roi-card--wide > .card-body { padding: 50px 40px 70px; }
	.roi-calc .roi-card--intro .roi-card__title { font-size: 1.8rem; }
	.roi-calc .roi-card--intro p { font-size: 1.1rem; line-height: 1.7; }
}

/*
 * The intro title is the largest thing the component sets, so it is the first
 * to outgrow a narrow screen. Stepped down twice more rather than once, because
 * the 991px figure above is a tablet size and still overshoots a phone.
 */
@media (max-width: 767px) {
	.roi-calc .roi-card--wide > .card-body { padding: 36px 28px 32px; }
	.roi-calc .roi-card--intro .roi-card__title { font-size: 1.65rem; }
}

@media (max-width: 575px) {
	.roi-calc .roi-card--wide > .card-body { padding: 28px 20px 26px; }
	.roi-calc .roi-card--intro .roi-card__title { font-size: 1.4rem; }
}

/*
 * The product title above a stage card.
 *
 * Brand red on the white half of the stage, which is where it lands: the seam
 * falls at 46% and the card starts below it, so the heading has the white to
 * itself. Sized to lead the card without competing with the logo above it.
 */
.roi-calc .roi-stage__title {
	color: var(--roi-red);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	margin: 0 0 1.7rem;
}

@media (max-width: 991px) {
	.roi-calc .roi-stage__title { font-size: 1.8rem; margin-bottom: 1.3rem; }
}

@media (max-width: 575px) {
	.roi-calc .roi-stage__title { font-size: 1.4rem; margin-bottom: 1rem; }
}

/* 2a. Blue accent strip on the seam between the two halves, for depth. */
.roi-calc .roi-stage__strip {
	position: absolute;
	left: 0;
	right: 0;
	top: 46%;
	height: 10px;
	z-index: 1;
	background: var(--roi-blue-dark);
	box-shadow: 0 6px 18px rgba(19, 44, 66, .25);
	pointer-events: none;
}

/*
 * 2b. The logo's own band of white, continuous with the top of the step below.
 *
 * Declared here rather than left to the theme: the first thing every step paints
 * is white, and the two only merge into one section if this matches it whatever
 * the page background happens to be.
 */
.roi-calc .roi-head {
	background: #fff;
}

/* Logo: centred regardless of the image's own aspect ratio. */
.roi-calc .roi-head__logo {
	display: block;
	max-height: 72px;
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	object-fit: contain;
}

/* Required-fields note on the details step. */
.roi-calc .roi-req-note {
	display: inline-block;
	font-weight: 600;
	color: var(--roi-navy);
}