:root {
	--gap: 15px;
	--hgap: var(--gap);
	--vgap: 1rem;
	--typeface: 'IBMPlexSans', sans-serif;
	--color-b0: #0f60b1;
	--color-b1: #1f70c1;
	--color-b2: #2f80d1;
	--color-b8: #7c90ca;
	--color-ba: #c8daf8;
	--color-bb: #d1ddea;
	--color-bc: #ebf1f5;
	--color-bd: #f0f5ff;
	--color-g1: #353535;
	--color-g2: #4f4f4f;
	--color-g4: #838383;
	--color-g8: #d5d5d5;
	--color-w: #fff;
	--color-b1-rgb: 31, 112, 193;
	--carbon-colors: #6929c4, #1192e8, #005d5d, #9f1853, #fa4d56, #570408, #198038, #002d9c, #ee538b, #b28600, #009d9a, #012749, #8a3800, #a56eff;
	--cardradius: 4px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html { font-family: var(--typeface) }

[aria-hidden],
[hidden] {
	display: none;
	visibility: hidden;
}

body {
	margin: 0;
	font-family: var(--typeface);
	background-color: var(--color-bd);
}

a {
	text-decoration-skip-ink: auto;
	text-decoration-thickness: 1px;
	text-underline-offset: .125em;
}

/* Common: Buttons */

button,
[role="button"] {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: var(--hgap);
	margin: calc(3 * var(--vgap)) auto;
	padding: var(--hgap) calc(2.5 * var(--hgap));
	border: 0;
	border-radius: var(--cardradius);
	background-color: var(--color-b1);
	transition: background-color 200ms linear;
}

[role="button"] { text-decoration: none }

.btn_back {
	padding: 0;
	color: var(--color-b1);
	background-color: var(--color-bd);
}

button:hover,
[role="button"]:hover { background-color: var(--color-b2) }

.btn_back:hover {
	color: var(--color-g1);
	background-color: var(--color-bd);
}

.btn_back:focus,
.btn_back:active { color: var(--color-b2) }

button:active,
button:focus,
[role="button"]:active,
[role="button"]:focus { background-color: var(--color-b0) }

button::before,
[role="button"]::before {
	position: absolute;
	display: block;
	margin: 0;
	width: calc(100% + 2 * var(--cardradius));
	height: calc(100% + 2 * var(--cardradius));
	border: 1px solid var(--color-g1);
	border-radius: calc(2 * var(--cardradius));
	content: '';
	transition: border-color 200ms linear;
}

.btn_back::before { display: none }

button:hover::before,
[role="button"]:hover::before { border-color: var(--color-bd) }

button span,
[role="button"] span {
	font-family: var(--typeface);
	font-size: 1.25em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-w);
}

.btn_report span,
.btn_downloaddoc span {
	display: block;
	position: relative;
	font-size: 1em;
	font-weight: 400;
	text-transform: uppercase;
}

.btn_report span {
	font-weight: 600;
	color: var(--color-b1);
}

.btn_downloaddoc span {
	padding-right: calc(16px + .25em);
	color: var(--color-w);
}

.btn_back span { color: currentColor }

.btn_back svg,
.btn_next svg,
.btn_contact svg {
	width: 40px;
	height: 20px;
	fill: none;
	stroke: var(--color-w);
}

.btn_back svg { stroke: currentColor }

.btn_next svg,
.btn_contact svg { stroke: var(--color-w) }

svg.processing_btn {
	width: 20px;
	height: 20px;
	fill: none;
	animation: spinning 1s linear infinite;
}

@keyframes spinning
{
	from { transform: rotate(0deg) }
	to { transform: rotate(360deg) }
}

.btn_report,
.btn_downloaddoc {
	padding: .5em 1em;
	border-radius: var(--cardradius);
	text-decoration: none;
	transform: background-color 300ms linear;
}

.btn_report { background-color: var(--color-w) }
.btn_downloaddoc { background-color: var(--color-b1) }
.btn_report:hover { background-color: var(--color-bd) }
.btn_downloaddoc:hover { background-color: var(--color-b2) }

.btn_downloaddoc span::after {
	position: absolute;
	display: block;
	margin: auto;
	width: 16px;
	height: 16px;
	top: 0;
	bottom: 0;
	right: 0;
	content: '';
	background-color: var(--color-w);
	-webkit-mask: url('../images/icons.svg#downloaddoc-v');
	mask: url('../images/icons.svg#downloaddoc-v');
	-webkit-mask-size: cover;
	mask-size: cover;
}

/* Hero */

#hero {
	background-color: var(--color-b1);
	padding: calc(4 * var(--hgap)) var(--hgap) calc(12 * var(--hgap));
	text-align: center;
	color: var(--color-w);
}

#hero_title,
#hero_subtitle { margin-bottom: calc(2 * var(--hgap)) }

#hero_title {
	line-height: 1;
	font-size: 4em;
	font-weight: 800;
}

#hero_subtitle {
	line-height: 1.25;
	font-size: 2.125em;
	font-weight: 700;
}

#hero_copy {
	line-height: 1.375;
	font-size: 1.625em;
	font-weight: 400;
}

#hero_poweredby {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: var(--hgap);
	margin: calc(3 * var(--hgap)) 0;
}

#hero_poweredby em {
	font-size: 1.25em;
	font-weight: 800;
	font-style: italic;
}

#hero>img {
	width: 50%;
	max-width: 465px;
}

@media screen and (min-width: 45rem)
{
	#hero {
		padding-left: calc(2 * var(--hgap));
		padding-right: calc(2 * var(--hgap));
	}
}

@media screen and (min-width: 60rem)
{
	#hero {
		display: grid;
		grid-template-columns: fit-content(40rem) 25rem;
		place-items: flex-start;
		justify-content: center;
		gap: var(--vgap) calc(4 * var(--hgap));
		padding-left: calc(4 * var(--hgap));
		padding-right: calc(4 * var(--hgap));
	}

	#hero_title,
	#hero_subtitle,
	#hero_copy,
	#hero_poweredby {
		grid-column: 1/2;
		text-align: left;
	}

	#hero_poweredby { justify-content: flex-start }

	#hero>img {
		grid-row: 1/5;
		grid-column: 2/3;
		align-self: center;
		width: 100%;
	}
}

@media screen and (min-width: 75rem)
{
	#hero_title { font-size: 5em }
	#hero_subtitle { font-size: 3em }
	#hero_copy { font-size: 1.625em }
}

/* Features */

#features { margin: calc(-8 * var(--hgap)) var(--hgap) 0 }

.feature {
	padding: calc(2 * var(--hgap));
	border-radius: calc(var(--hgap) / 2);
	text-align: left;
	background-color: #dfebff;
}

.feature+.feature { margin-top: var(--hgap) }

.feature svg {
	width: 48px;
	height: 48px;
	fill: #0043ce;
}

.feature h3,
.feature p { color: #272727 }

.feature h3 {
	margin: var(--hgap) 0;
	font-size: 1.75em;
	font-weight: 700;
}

.feature p {
	line-height: 1.5;
	font-size: 1.25em;
	font-weight: 300;
}

@media screen and (min-width: 45rem)
{
	#features {
		margin-left: calc(2 * var(--hgap));
		margin-right: calc(2 * var(--hgap));
	}
}

@media screen and (min-width: 60rem)
{
	#features {
		display: grid;
		grid-template-columns: repeat(3, fit-content(22rem));
		justify-content: center;
		gap: var(--hgap);
		margin-left: calc(4 * var(--hgap));
		margin-right: calc(4 * var(--hgap));
	}

	#features>.btn_next { grid-column:1/4 }

	.feature+.feature { margin-top: 0 }
}

/* Steps */

#steps { margin: calc(2 * var(--hgap)) var(--hgap) 0 }
span.step_btn { font-size: 1.125em }

.step:not([hidden]) {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0 var(--hgap);
}

/* Steps: progress */

.step_progress {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	flex: 1 1 100%;
}

.step_progress::before {
	position: absolute;
	display: block;
	margin: auto;
	width: calc(100% - 48px);
	height: 1px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--color-b1);
	content: '';
}

.step_progress>a {
	position: relative;
	display: block;
	line-height: 0;
}

.step_progress>a:hover svg { fill: var(--color-b0) }

.step_progress_index {
	width: 48px;
	height: 48px;
	z-index: 1;
	stroke-width: 2px;
}

.step_progress_index.step-current,
.step_progress_index.step-future {
	fill: var(--color-bd);
	stroke-width: 1px;
}

.step_progress_index.step-current {
	stroke: var(--color-b1);
	stroke-dasharray: 2 4;
}

.step_progress_index.step-future { stroke: var(--color-g8) }

.step_progress_index.step-complete {
	fill: var(--color-b1);
	stroke: var(--color-bd);
}

/* Steps: cards */

.step_card {
	flex: 1 1 100%;
	margin: calc(2 * var(--hgap)) 0;
	background-color: var(--color-w);
	border-radius: var(--cardradius);
	box-shadow: 0 0 calc(2 * var(--hgap)) rgba(var(--color-b1-rgb), .25);
}

.step_card_headers {
	margin-bottom: var(--hgap);
	padding: var(--hgap);
	border-bottom: 1px solid var(--color-g8);
	font-size: 1.25em;
	font-weight: 600;
}

.step_card_header-complete,
.step_card_header-current { color: var(--color-b1) }

.step_card_header-future { color: var(--color-g4) }

.step_card_headers>:not([aria-current="page"]) { display: none }

.step_card_headers span {
	display: block;
	white-space: nowrap;
}

.step_card_headers span:first-child { text-transform: uppercase }

.step_card_body { padding: calc(2 * var(--vgap)) var(--hgap) calc(4 * var(--vgap)) }

.step_card_body h3,
.step_card_body h4 { line-height: 1.25 }

.step_card_body h3 {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: .25em;
	margin-bottom: calc(2 * var(--vgap));
	color: var(--color-b1);
}

.step_card_body h3 strong {
	flex: 1 1 auto;
	font-size: 2.25em;
	font-weight: 800;
}

.step_card_body h3 a { flex: 0 1 auto }

/* Steps: Questions */

.step_card_questions {
	margin-top: calc(2 * var(--hgap));
	counter-reset: question;
}

.step_card_question { margin: 0 auto }

.step_card_question h3,
.step_card_question h4 {
	font-size: 1.75em;
	font-weight: 600;
}

.step_card_question h4 { color: var(--color-g1) }

.step_card_questions fieldset,
.step_card_question-nofieldset,
.step_card_questions .nolegend{
	margin-top: calc(3 * var(--hgap));
	border: 0;
}

.step_card_questions fieldset>a {
	display: block;
	margin-top: var(--vgap);
	font-size: 1.125em;
	font-weight: 500;
	color: var(--color-b1);
}

.step_card_questions legend,
.step_card_questions .nolegend {
	min-height: 40px;
	line-height: 1.25;
	font-size: 1.375em;
	font-weight: 600;
	color: var(--color-b1);
}

.step_card_questions legend::before,
.step_card_questions .nolegend::before {
	display: inline-block;
	float: left;
	width: 40px;
	height: 40px;
	margin-right: var(--hgap);
	line-height: 40px;
	text-align: center;
	border: 1px solid var(--color-g8);
	border-radius: 50%;
	content: counter(question);
	counter-increment: question;
}

.step_card_questions input[type="radio"],
.step_card_questions input[type="checkbox"] {
	display: none;
}

.step_card_question_fields {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	gap: 0;
	margin-top: var(--vgap);
	border: 1px solid var(--color-ba);
	border-radius: var(--cardradius);
	box-shadow: 0 0 calc(2 * var(--hgap)) rgba(var(--color-b1-rgb), .25);
}

.step_card_question_fields[hidden] { display: none }

.step_card_questions fieldset>.step_card_question_fields { flex-flow: column nowrap }

.step_card_question_fields label {
	padding: var(--vgap) calc(1.5 * var(--hgap));
	width: 100%;
	border: 0;
	text-align: left;
	font-size: 1.125em;
	font-weight: 600;
	color: var(--color-g2);
	cursor: pointer;
	transition: background-color 100ms linear
}

.step_card_question_fields label:first-of-type { border-radius: var(--cardradius) var(--cardradius) 0 0 }
.step_card_question_fields label:last-of-type { border-radius: 0 0 var(--cardradius) var(--cardradius) }
.step_card_question_fields label:nth-of-type(n+2) { border-top: 1px solid var(--color-g8) }

.step_card_question_fields input:checked+label {
	color: var(--color-w);
	background-color: var(--color-b1);
}

.step_card_question_fields input[type="range"] {
	position: relative;
	margin: 0 var(--hgap);
	width: 100%;
	height: var(--gap);
	appearance: none;
	background-color: var(--color-bc);
	border-radius: var(--gap);
}

.step_card_question_fields input[type="range"]:focus { outline: none }
.step_card_question_fields input[type="range"]:active { cursor: pointer }

.step_card_question_fields input[type="range"]::-moz-range-thumb {
	-webkit-appearance: none;
	width: calc(2 * var(--gap));
	height: calc(2 * var(--gap));
	border-radius: var(--cardradius);
	background: var(--color-b1);
	cursor: pointer;
}

.step_card_question_fields input[type="range"]::-ms-thumb {
	-webkit-appearance: none;
	width: calc(2 * var(--gap));
	height: calc(2 * var(--gap));
	border-radius: var(--cardradius);
	background: var(--color-b1);
	cursor: pointer;
}

.step_card_question_fields input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: calc(2 * var(--gap));
	height: calc(2 * var(--gap));
	border-radius: var(--cardradius);
	background: var(--color-b1);
	cursor: pointer;
}

.step_card_question_fields input[type="range"]+output {
	position: relative;
	padding: var(--hgap) var(--vgap);
	width: calc(4 * var(--hgap));
	text-align: center;
	font-size: 1.25em;
	font-weight: 700;
	color: var(--color-w);
	border-radius: 0 var(--cardradius) var(--cardradius) 0;
	background-color: var(--color-b1);
}

.step_card_question_fields input[type="range"]+output::after {
	position: absolute;
	margin: auto;
	width: 0;
	height: 0;
	top: 0;
	bottom: 0;
	left: calc(0px - var(--gap) / 2);
	border-top: calc(var(--gap) / 2) solid transparent;
	border-right: calc(var(--gap) / 2) solid var(--color-b1);
	border-bottom: calc(var(--gap) / 2) solid transparent;
	content: "";
}

/* Steps: Report */

.step_card_body>p {
	line-height: 1.5;
	font-size: 1.25em;
	color: var(--color-g1);
}

.step_card_body>p+p { margin-top: 1em }
.step_card_body>p a { color: var(--color-b1) }

.step_card_body>mark {
	display: block;
	margin: 1em 0;
	padding: .5em 1em;
	text-align: center;
	line-height: 1.25;
	font-size: 1.875em;
	font-weight: 600;
	color: var(--color-w);
	background-color: var(--color-b1);
}

/* Steps: Saving summary */

.step_card_report h4 {
	margin-top: 2em;
	font-size: 2em;
	color: var(--color-b1);
}

.step_card_sscard {
	position: relative;
	margin: 2em 1em;
	padding: 1em 2em;
	border: 1px solid var(--color-bb);
	background-color: var(--color-bc);
	box-shadow: 0 0 var(--hgap) rgba(var(--color-b1-rgb), .25);
}

.step_card_sscard::before {
	position: absolute;
	display: block;
	margin: auto;
	width: 4px;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	background-color: var(--color-b8);
}

.step_card_sscard>h5 {
	font-size: 2.5em;
	font-weight: 700;
	color: var(--color-g1);
}

.step_card_sscard>h6 {
	font-size: 1.25em;
	font-weight: 600;
	color: var(--color-g2);
}

#chart_Software,
#chart_Overall { max-height: 450px }

/* Funny hack to hide the percentage values from the Google charts */

#step_card_sb [fill="#9e9e9e"] { display: none }
#step_card_sb [stroke="#636363"] { stroke: #c0c0c0 }

@media screen and (min-width: 45rem)
{
	#steps {
		margin-left: calc(2 * var(--hgap));
		margin-right: calc(2 * var(--hgap));
	}
}

@media screen and (min-width: 60rem)
{
	#steps { margin: calc(5 * var(--vgap)) calc(4 * var(--hgap)) }

	.step {
		margin-left: auto;
		margin-right: auto;
		max-width: 64rem;
	}

	#step1 button,
	#step1 [role="button"] { margin-right: 0 }
	#step2 button,
	#step2 [role="button"] { margin: calc(3 * var(--vgap)) 0 }

	.step_progress { display: none }

	.step_card_headers {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		gap: var(--hgap);
		margin-bottom: calc(2 * var(--hgap));
		padding: 0;
		font-size: 1.125em;
	}

	.step_card_headers>a,
	.step_card_headers>div {
		position: relative;
		flex: 0 1 33.3%;
		padding: var(--hgap) calc(2 * var(--hgap)) var(--hgap) calc(48px + .75em + 2 * var(--hgap));
		text-decoration: none;
	}

	.step_card_headers>:not([aria-current="page"]) { display: block }
	.step_card_headers>a:hover { text-decoration: underline }

	.step_card_headers>::before,
	.step_card_headers>a::after,
	.step_card_headers>div:not(:last-of-type)::after {
		position: absolute;
		display: block;
		margin: auto;
		top: 0;
		bottom: 0;
	}

	.step_card_headers>::before {
		width: 48px;
		height: 48px;
		left: calc(2 * var(--hgap));
		content: '';
		border-width: 1px;
		border-radius: 24px;
	}

	.step_card_header-future::before {
		border-style: solid;
		border-color: var(--color-g8);
	}

	.step_card_header-current::before,
	.step_card_header-complete::before { border-color: var(--color-b1) }

	.step_card_header-current::before { border-style: dashed }

	.step_card_header-complete::before {
		background-color: var(--color-b1);
		background-image: url('../images/icons.svg#check-complete-v');
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.step_card_headers>a::after,
	.step_card_headers>div:not(:last-of-type)::after {
		right: calc(0px - var(--hgap));
		width: calc(1.5 * var(--hgap));
		height: 100%;
		content: '';
		opacity: .15;
		background-image: url('../images/icons.svg#tabseparator-v');
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: contain;
	}

	.step_card_headers>a.step_card_header-complete:hover::before { background-color: var(--color-b0) }
	.step_card_questions { margin-bottom: calc(2 * var(--vgap)) }

	.step_card_questions>fieldset:first-of-type { margin-top: calc(4 * var(--vgap)) }
	.step_card_question { max-width: 52rem }
	.step_card_question h4 { font-size: 1.875em }
	.step_card_questions fieldset>.step_card_question_fields { flex-flow: row nowrap }
	.step_card_question_fields label { text-align: center }

	.step_card_question_fields label:first-of-type { border-radius: var(--cardradius) 0 0 var(--cardradius) }
	.step_card_question_fields label:last-of-type { border-radius: 0 var(--cardradius) var(--cardradius) 0 }

	.step_card_question_fields label:nth-of-type(n+2) {
		border-top: none;
		border-left: 1px solid var(--color-g8);
	}

	.step_card_report { padding: calc(3 * var(--hgap)) }

	.step_card_body>mark {
		padding: .25em 1em;
		font-size: 1.75em;
	}

	#step_card_ss {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--vgap) calc(2 * var(--hgap));
	}

	#step_card_ss h4 { grid-column: 1/4 }
	.step_card_sscard { margin: 0 }
}

/* Details */

#details {
	padding: calc(3 * var(--vgap)) 0;
	background-color: var(--color-w);
}

#details_header {
	margin: 0 var(--hgap) calc(2 * var(--vgap));
	font-size: 2em;
	color: var(--color-b1);
}

#details_table {
	margin: 0 var(--hgap);
	width: calc(100% - 2 * var(--hgap));
	border: 1px solid var(--color-g1);
	border-collapse: collapse;
	font-size: 1.25em;
}

.step_card_body #details_header,
.step_card_body #details_table {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

.step_card_body #details_header { margin-top: calc(3 * var(--vgap)) }

#details_table tbody tr,
#details_table tfoot tr,
#details_table tfoot { display: block }

#details_table tbody tr,
#details_table tfoot { border-top: 1px solid var(--color-g8) }

#details_table tbody tr[aria-expanded="true"] { background-color: var(--color-bc) }

#details_table th {
	display: block;
	padding: var(--vgap) var(--vgap);
	background-color: var(--color-g1);
	color: var(--color-w);
}

#details_table tbody th,
#details_table tfoot th {
	position: relative;
	text-align: left;
	color: var(--color-g1);
	background-color: transparent;
}

#details_table tfoot th { color: var(--color-b1) }

#details_table tbody th { cursor: pointer }
#details_table tbody [aria-expanded="true"] th { font-weight: 700 }
#details_table tbody [aria-expanded="false"] th { font-weight: 400 }

#details_table thead th:nth-child(1) { text-align: left }
#details_table thead th:nth-child(n+2) { display: none }

#details_table tbody th::after {
	position: absolute;
	display: block;
	margin: auto;
	width: 20px;
	height: 20px;
	top: 0;
	bottom: 0;
	right: var(--hgap);
	content: '';
	background-color: var(--color-g2);
	-webkit-mask: url('../images/icons.svg#details-plus-v');
	mask: url('../images/icons.svg#details-plus-v');
	-webkit-mask-size: cover;
	mask-size: cover;
}

#details_table tbody th:hover {
	text-decoration: underline;
	text-decoration-color: var(--color-b1);
	text-decoration-thickness: 1px;
	background-color: var(--color-bc);
}

#details_table [aria-expanded="true"] th::after {
	-webkit-mask: url('../images/icons.svg#details-minus-v');
	mask: url('../images/icons.svg#details-minus-v');
}

#details_table td {
	flex-flow: row wrap;
	padding: var(--vgap) var(--hgap);
	font-weight: 300;
	font-variant-numeric: tabular-nums;
}

#details_table tfoot td {
	display: flex;
	font-weight: 700;
}

#details_table td+td { padding: 0 var(--hgap) var(--vgap) }
#details_table tbody [aria-expanded="false"] td { display: none }
#details_table tbody [aria-expanded="true"] td { display: flex }

#details_table td::before {
	flex: 1 1 50%;
	content: attr(data-label);
}

#details_table tfoot {
	padding-top: var(--vgap);
	padding-bottom: var(--vgap);
}

@media screen and (min-width: 45rem)
{
	#details_header,
	#details_table {
		margin-left: calc(2 * var(--hgap));
		margin-right: calc(2 * var(--hgap));
	}

	#details_table { width: calc(100% - 4 * var(--hgap)) }
}

@media screen and (min-width: 60rem)
{
	#details { padding: calc(5 * var(--vgap)) 0  calc(6 * var(--vgap))}

	#details_header,
	#details_table {
		margin-left: auto;
		margin-right: auto;
		width: calc(100% - 6 * var(--hgap));
		max-width: 87.5rem;
	}

	#details_table {
		display: table;
		font-size: 1.125em;
	}

	#details_table tbody tr,
	#details_table tfoot tr,
	#details_table tfoot { border-top: 0; }

	#details_table tbody tr,
	#details_table tfoot tr { display: table-row }

	#details_table tfoot tr,
	#details_table tbody tr:nth-last-child(even) { background-color: var(--color-bc) }
	#details_table tfoot { display: table-footer-group }

	#details_table th,
	#details_table td,
	#details_table td+td {
		padding: calc(1.5 * var(--vgap)) calc(2 * var(--hgap));
		display: table-cell;
	}

	#details_table th { color: var(--color-w) }

	#details_table td::before { content: '' }

	#details_table tbody th {
		font-weight: 500;
		pointer-events: none;
		cursor: default;
	}

	#details_table tfoot th { font-weight: 800 }
	#details_table tfoot td { font-weight: 800 }

	#details_table tfoot td,
	#details_table thead th:nth-child(n+2) {
		display: table-cell;
		text-align: right;
	}

	#details_table tbody th:hover {
		text-decoration: none;
		background-color: transparent;
		pointer-events: none;
		cursor: initial;
	}

	#details_table tbody td:nth-child(n+2) { text-align: right }
	#details_table tbody [aria-expanded="false"] td { display: table-cell }

	#details_table tbody th::after { display: none }
}

/* Next steps */

#nextsteps {
	padding: calc(3 * var(--vgap)) 0;
	text-align: center;
	color: var(--color-w);
	background-color: var(--color-b1);
}

#nextsteps>h3 {
	line-height: 1;
	font-size: 3.75em;
	font-weight: 800;
}

#nextsteps>div { margin-top: calc(2 * var(--vgap)) }

#nextsteps>* { margin: 0 var(--hgap) }

#nextsteps [role="button"] {
	margin: var(--vgap) auto;
	background: var(--color-g1);
}

#nextsteps p,
#nextsteps_explore a {
	line-height: 1.25;
	font-size: 1.5em;
}

#nextsteps_explore a {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--color-w);
}

@media screen and (min-width: 45rem)
{
	#nextsteps>* {
		margin-left: calc(2 * var(--hgap));
		margin-right: calc(2 * var(--hgap));
	}
}

@media screen and (min-width: 60rem)
{
	#nextsteps {
		display: grid;
		grid-template-columns: repeat(2, minmax(1fr, 10rem));
		justify-content: center;
		gap: calc(3 * var(--vgap)) calc(4 * var(--hgap));
	}

	#nextsteps>h3 { grid-column: 1/3 }

	#nextsteps>div {
		margin: 0;
		text-align: left;
	}

	#nextsteps [role="button"] { margin-left: 0 }
	#nextsteps_explore { position: relative }
	#nextsteps_explore a { margin-top: 1em }

	#nextsteps_explore::before {
		position: absolute;
		display: block;
		width: 1px;
		height: 100%;
		top: 0;
		bottom: 0;
		left: calc(0px - 2 * var(--hgap));
		content: '';
		opacity: .5;
		background-color: var(--color-b8);
	}
}

/* Assumptions and disclaimers */

#assumptionsdisclaimers {
	padding: calc(3 * var(--vgap)) 0;
	background-color: var(--color-w);
}

#assumptionsdisclaimers h3 {
	margin: 0 var(--hgap) var(--vgap);
	font-size: 2em;
	color: var(--color-b1);
}

#assumptionsdisclaimers h4 {
	margin: calc(2 * var(--vgap)) var(--hgap) var(--vgap);
	font-size: 1.375em;
	color: var(--color-g1);
}

#assumptionsdisclaimers p {
	margin: 0 var(--hgap);
	padding-bottom: calc(1.5 * var(--vgap));
	border-bottom: 1px solid var(--color-b1);
	line-height: 1.5;
	font-size: 1.375em;
	color: var(--color-g1);
}

#assumptionsdisclaimers h4+p {
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 1.25em;
}

#assumptionsdisclaimers ul {
	margin: calc(1.5 * var(--vgap)) var(--hgap);
	padding: 0;
	line-height: 1.75;
	font-size: 1.125em;
	font-weight: 300;
	list-style: none;
	color: var(--color-g1);
}

#assumptionsdisclaimers>ul>li {
	margin: 0 0 calc(var(--vgap) / 4) 0;
	padding-left: calc(10px + .5em);
	text-indent: calc(0px - 10px - .5em);
	font-weight: 700;
}

#assumptionsdisclaimers h4+ul li { font-weight: 300 }
#assumptions_arrows>li::before { background: var(--color-b1) }

#assumptionsdisclaimers>ul>li::before {
	display: inline-block;
	margin-right: .5em;
	width: 10px;
	height: 1ch;
	vertical-align: baseline;
	content: '';
	background-color: var(--color-g1);
	-webkit-mask: url('../images/icons.svg#arrowlist-v');
	mask: url('../images/icons.svg#arrowlist-v');
	-webkit-mask-size: cover;
	mask-size: cover;
}

#assumptionsdisclaimers ul ul {
	margin-left: calc(10px + .5em);
	font-size: 1em;
	text-indent: 0;
	list-style: disc outside none;
}

#assumptionsdisclaimers ul ul li::marker{ color: var(--color-g2) }

@media screen and (min-width: 45rem)
{
	#assumptionsdisclaimers>h3,
	#assumptionsdisclaimers>h4,
	#assumptionsdisclaimers>p,
	#assumptionsdisclaimers>ul {
		margin-left: calc(2 * var(--hgap));
		margin-right: calc(2 * var(--hgap));
	}
}

@media screen and (min-width: 60rem)
{
	#details+#assumptionsdisclaimers { padding-top: 0 }

	#assumptionsdisclaimers h3,
	#assumptionsdisclaimers p,
	#assumptionsdisclaimers ul {
		margin-left: auto;
		margin-right: auto;
		width: calc(100% - 6 * var(--hgap));
		max-width: 80rem;
	}

	#assumptionsdisclaimers h4,
	#assumptionsdisclaimers h4+p {
		margin-left: auto;
		margin-right: auto;
		width: calc(100% - 4 * var(--hgap));
		max-width: 85.5rem;
	}

	#assumptionsdisclaimers>ul {
		margin-top: calc(2 * var(--gap));
		column-count: 2;
		column-gap: calc(4 * var(--hgap));
	}
}

/* Footer */

footer {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	gap: var(--vgap);
	padding: calc(1.5 * var(--vgap)) var(--hgap);
	border-top: 1px solid var(--color-bb);
	line-height: 1.5;
	text-align: center;
	font-size: .875em;
	font-weight: 300;
	color: var(--color-g2);
	background-color: var(--color-w);
}

@media screen and (min-width: 45rem)
{
	footer {
		padding-left: calc(2 * var(--hgap));
		padding-right: calc(2 * var(--hgap));
	}
}

@media screen and (min-width: 80rem)
{
	footer {
		display: grid;
		grid-template-columns: minmax(min-content, 40rem) minmax(max-content, 40rem);
		justify-content: center;
		gap: .5rem;
	}

	#footer_copyright { text-align: left }
	#footer_trademark { text-align: right }
}

/* Print */

@media print {
	@page {
		margin: .5in;
		size: letter portrait;

		@top-right { content: '';}
		@top-left { content: '';}
		@bottom-left { content: '';}
		@bottom-right { content: '';}
	}

	#hero,
	#features,
	#step1,
	#step2,
	.step_progress,
	.step_card_headers,
	#step_card_ssb,
	.step_card_sb_details,
	.btn_downloaddoc,
	.btn_report,
	.noprint,
	footer { display: none }

	body { background-color: var(--color-w) }
	a { text-decoration: none }

	#steps {
		margin: 0 0 calc(2 * var(--vgap));
		page-break-inside: avoid;
		page-break-after: always;
		break-after: always;
		contain: size;
	}

	.step_card {
		margin-top: 0;
		box-shadow: none;
	}

	.step_card_body h3 { margin-bottom: var(--vgap) }
	.step_card_body h3 strong { font-size: 1.5em }

	.step_card_body>p {
		font-size: 1em;
		font-weight: 300;
	}

	.step_card_body>p a { color: var(--color-g1) }

	.step { margin-bottom: var(--vgap) }
	/* .step:not([hidden]) { flex-flow: column nowrap } */

	#step_card_ss {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--vgap) var(--hgap);
	}

	.step_card_sscard {
		margin: 0;
		padding: .5em 1.5em;
	}

	.step_card_body { padding: 0 }

	.step_card_body>mark {
		font-size: 1.25em;
		color: transparent;
		text-shadow: 0 0 0 var(--color-w);
		box-shadow: inset 0 0 2em 2em var(--color-b1);
	}

	#step_card_sb { margin-top: calc(2 * var(--vgap)); overflow: hidden }

	.step_card_report h4 {
		margin-top: 0;
		font-size: 1.375em;
	}

	.step_card_sscard>h5 { font-size: 2em }

	#step_card_ss>h4 {
		grid-column: 1/4;
		margin-top: 0;
		font-size: 1.25em;
	}

	.step_card_sscard>h6 { font-size: 1em }

	#chart_Software,
	#chart_Overall {
		max-width: 100vw;
		max-height: 225px;
		overflow: hidden;
	}

	#chart_Software>div,
	#chart_Overall>div {
		transform: scale(.5);
		transform-origin: 50% 50%;
	}

	#details {
		margin-top: 0;
		padding-top: 0;
	}

	#details_header {
		margin: 0 var(--hgap) var(--vgap);
		font-size: 1.25em;
	}

	#details_header,
	#details_table {
		margin-left: 0;
		margin-right: 0;
		width: 100%
	}

	#details_table {
		display: table;
		font-size: .75em;
		border-color: var(--color-g4);
	}

	#details_table tbody tr,
	#details_table tfoot tr,
	#details_table tfoot { border-top: 0; }

	#details_table tbody tr,
	#details_table tfoot tr { display: table-row }

	#details_table tfoot tr,
	#details_table tbody tr:nth-last-child(even) { box-shadow: inset 0 0 2em 2em var(--color-bc) }

	#details_table tfoot { display: table-footer-group }

	#details_table th,
	#details_table td,
	#details_table td+td {
		padding: calc(var(--vgap) / 4) var(--hgap);
		display: table-cell;
	}

	#details_table th { color: var(--color-w) }

	#details_table td::before { content: '' }
	#details_table tbody th { font-weight: 500 }
	#details_table tfoot th { font-weight: 800 }
	#details_table tfoot td { font-weight: 800 }

	#details_table thead th {
		color: transparent;
		text-shadow: 0 0 0 var(--color-w);
		box-shadow: inset 0 0 2em 2em var(--color-g1);
	}

	#details_table tfoot td,
	#details_table thead th:nth-child(n+2) {
		display: table-cell;
		text-align: right;
	}

	#details_table tbody th:hover {
		text-decoration: none;
		background-color: transparent;
		pointer-events: none;
		cursor: initial;
	}

	#details_table tbody td:nth-child(n+2) { text-align: right }
	#details_table tbody [aria-expanded="false"] td { display: table-cell }
	#details_table tbody th::after { display: none }

	#nextsteps {
		display: none;
	}

	#nextsteps::before,
	#nextsteps [role="button"]::before {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}

	#nextsteps::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='0' y='0' width='100' height='100' fill='%231f70c1'/%3E%3C/svg%3E") }

	#nextsteps>h3,
	#nextsteps p,
	#nextsteps [role="button"] span,
	#nextsteps_explore a {
	  color: transparent;
	  text-shadow: 0 0 0 var(--color-w);
	}

	#nextsteps>h3 {
		grid-column: 1/3;
		font-size: 3em;
	}

	#nextsteps>div {
		margin: 0;
		text-align: left;
	}

	#nextsteps [role="button"] {
	  margin-bottom: 0;
	  margin-left: 0;
	  overflow: hidden;
	  background-color: transparent;
	}

	#nextsteps_explore { position: relative }
	#nextsteps_explore a { margin-top: 1em }
	#nextsteps [role="button"]::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='0' y='0' width='100' height='100' fill='%23353535'/%3E%3C/svg%3E") }

	#nextsteps_explore::before {
		position: absolute;
		display: block;
		width: 1px;
		height: 100%;
		top: 0;
		bottom: 0;
		left: calc(0px - 2 * var(--hgap));
		content: '';
		opacity: .5;
		background-color: var(--color-b8);
	}

	#assumptionsdisclaimers {
		padding: 0;
		font-size: .615em;
		page-break-before: always;
		break-before: always;
	}

	#assumptionsdisclaimers+#nextsteps {
		padding: 0;
		page-break-before: always;
		break-before: always;
	}

	#assumptionsdisclaimers>ul {
		column-count: 2;
		column-gap: calc(4 * var(--hgap));
		line-height: 1.5;
	}

	#assumptionsdisclaimers>h3 { margin: 0 0 var(--vgap) }
	#assumptionsdisclaimers ul { margin: calc(1.5 * var(--vgap)) 0 }
	#assumptionsdisclaimers ul ul { margin-top: 0 }
	#assumptionsdisclaimers>ul:nth-of-type(2) { column-count: 1 }
	#assumptionsdisclaimers>ul:last-of-type { margin-bottom: 0 }
}

/* Fonts */

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-Thin.woff2") format("woff2");
	font-display: swap;
	font-style: normal;
	font-weight: 100;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-ThinItalic.woff2") format("woff2");
	font-display: swap;
	font-style: italic;
	font-weight: 100;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-ExtraLight.woff2") format("woff2");
	font-display: swap;
	font-style: normal;
	font-weight: 200;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-ExtraLightItalic.woff2") format("woff2");
	font-display: swap;
	font-style: italic;
	font-weight: 200;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-Light.woff2") format("woff2");
	font-display: swap;
	font-style: normal;
	font-weight: 300;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-LightItalic.woff2") format("woff2");
	font-display: swap;
	font-style: italic;
	font-weight: 300;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
	font-display: swap;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-Italic.woff2") format("woff2");
	font-display: swap;
	font-style: italic;
	font-weight: 400;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-Text.woff2") format("woff2");
	font-display: swap;
	font-style: normal;
	font-weight: 500;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-TextItalic.woff2") format("woff2");
	font-display: swap;
	font-style: italic;
	font-weight: 500;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
	font-display: swap;
	font-style: normal;
	font-weight: 600;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-MediumItalic.woff2") format("woff2");
	font-display: swap;
	font-style: italic;
	font-weight: 600;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
	font-display: swap;
	font-style: normal;
	font-weight: 700;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2") format("woff2");
	font-display: swap;
	font-style: italic;
	font-weight: 700;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
	font-display: swap;
	font-style: normal;
	font-weight: 800;
	font-stretch: normal;
}

@font-face {
	font-family: "IBMPlexSans";
	src: url("../../assets/fonts/IBMPlexSans-BoldItalic.woff2") format("woff2");
	font-display: swap;
	font-style: italic;
	font-weight: 800;
	font-stretch: normal;
}
