:root {
	--amex-body: #333333;
	--amex-deepblue: #00175A;
	--amex-brightblue: #006FCF;
	--amex-medblue: #0169C4;
	--amex-bluehighlight: #f3f9ff;
	--amex-gray: #8e9092;
	--amex-darkgray: #53565A;
	--amex-hovergray: #F2F2F2;
	--amex-red: #B42C01;
	--amex-green: #008767;
	--amex-lightGreen: #D6F5DE;
	--amex-formBG: #F7F8F9;
	--amex-table-cell: #F7F8F9;
	--amex-table-border: #ECEDEE;
	--amex-table-header: #F7F8F9;
	--amex-table-title-row: #EFEFEF;
	
	--secondaryBG: #f7f8f9;
	
	--mb: 40px;
}

	@font-face {
		font-family:'Guardian';
		src:url("../fonts/GuardianEgyp-Regular-Web.woff") format("woff");
		font-weight: 400;
	}
	@font-face {
		font-family:'Guardian';
		src:url("../fonts/GuardianEgyp-Medium-Web.woff") format("woff");
		font-weight: 500;
	}

body {
	background: #F5F5F5;
	font-family: "BentonSans",sans-serif;
	color: var(--amex-body);
}

.whiteBG { background: #fff; padding: var(--mb) 0; m }

section {
	padding: var(--mb)  var(--mb) 0  var(--mb);
}

.content-box {
	background: #fff;
	box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2);
	width: 90%;
	max-width: 880px;
	margin: var(--mb) auto calc(var(--mb) * 2) auto;
}

.top-barBG {
	background: var(--surveyBG);
	height: 60px;
}

	.top-barBG  section { width: 90%; max-width: 1440px; padding: 0; margin: 0 auto; }

.top-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60px;
}

	.top-bar .download-link { background-color: #fff; padding: .75em 1em; border-radius: 4px; text-decoration: none; padding-right: 40px; background-size: 20px; background-position: calc(100% - 15px) 50%;  }
	.top-bar .download-link:hover { text-decoration: underline; }
	
.top-bar-left {
	color: #fff;
	display: flex;
	align-items: center;
	font-family: "BentonSans";
	gap: 20px;
}

	.top-bar-left img { height: 40px; }

.intro-hero {
	width: 100%;
	max-width: 1080px;
	aspect-ratio: 1080 / 450;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 auto;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}

	.intro-hero + .content-box { margin-top: 0; }
	
	.intro-hero-headBG {
		background: rgba(0, 24, 94, 0.61);
		display: flex;
		padding: 24px var(--mb);
		align-items: flex-start;
		justify-content: space-between;
		color: #fff;
		width: 100%;
		max-width: 880px;
		border-radius: 8px 8px 0 0;
	}
	
	.intro-hero-text p { margin-bottom: 0; }
	
	.intro-hero-year {
		font-size: 2rem;
		display: flex;
		gap: 15px;
		margin-top: .75em;
	}
	
		.intro-hero-year-divider {
			width: 1px;
			height: 16px;
			background: var(--amex-brightblue);
		}

.intro-text {
	text-align: center;
	background: #fff;
	width: 90%;
	margin: 0 auto;
}

.survey-completion {
	padding: 1em 0 0 var(--mb);
	font-size: 1.4rem;
}

	.survey-completion img { display: inline-block; margin-right: 6px; position: relative; top: 3px;}

.introH1 {
	font-family: "Guardian",serif;
	font-size: clamp(2.8rem, 3vw, 4rem);
	margin-bottom: .5em;
	color: var(--amex-body);
}

.introH2 {
	font-family: "BentonSans";
	font-size: clamp(1.6rem, 3vw, 1.8rem);
	line-height: 1.5em;
	color: var(--amex-body);
}

.introH3 {
	font-family: "BentonSans";
	font-size: clamp(2rem, 3vw, 3rem);
	line-height: 1.5em;
	color: #fff;
	font-weight: 700;
	margin-bottom: 0;
}

.intro-text:has(.intro-logo) { padding: calc(var(--mb) * 3) 0; }

.intro-logo { margin: 30px auto 0 auto; width: 50px; }

.steps-box { text-align: center; }
	.steps-box h4 { text-align: center; margin-bottom: 2em; }

	.steps {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		max-width: 880px;
		margin: 0 auto calc(var(--mb) * .5) auto;
	}
	
	.step { width: 30%; text-align: center; }
		.step-no {
			background: var(--surveyBG);
			font-family: "Guardian", serif;
			font-weight: 500;
			font-size: 18px;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			margin: 0 auto 8px auto;
			width: 32px;
			height: 32px;
		}

.two-cols {
	display: flex;
	gap: var(--mb);
	margin-bottom: var(--mb);
}

	.two-cols:has(.amex-text) { max-width: 650px; margin-bottom: 0;}
	
	.col { width: 50%; }

.likert {
	display: grid;
	grid-template-columns: repeat(5, auto);
	justify-content: start;
	justify-items: start;
	gap: 10px 30px;
}

	.likert > .inline-label {
		grid-row: 2;
		flex-direction: column;
		align-items: center;
		width: 100px;
	}
	
		.likert > .inline-label div { font-size: 1.3rem; margin-top: 4px; text-align: center; line-height: 1.2em;}
	
	.likert > .inline-label .amex-radio { margin-right: 0; }
	.likert > .conditional-indent {
		grid-column: 1 / -1;
		grid-row: 3;
	}

/* Five 100px labels + four 30px gaps need 620px of content width, which is
   gone once the viewport drops to about 780px (the content area is 90% of the
   viewport minus 80px of section padding). Below that the labels wrap onto
   more rows instead: 3 across, then 2 across once there's no longer room for
   three (about 490px). The columns become flexible (1fr) so the follow-up
   .conditional-indent can still span the full width, and the grid rows are
   un-pinned so labels can flow onto extra rows, with `order` keeping the
   follow-up after all of them. The labels themselves stay 100px wide. */
@media all and (max-width: 780px) {
	.likert { grid-template-columns: repeat(3, 1fr); }
	.likert > .inline-label,
	.likert > .conditional-indent { grid-row: auto; }
	.likert > .conditional-indent { order: 1; }
}

@media all and (max-width: 490px) {
	.likert { grid-template-columns: repeat(2, 1fr); }
}

	.next-page {
		padding: 20px 20px 20px var(--mb);
		background: var(--secondaryBG);
		border-top: 1px solid var(--amex-table-border);
	}

legend + .likert { margin-top: -.5em; }

.conditional-indent .conditional-indent { margin-bottom: 0; }
.conditional-indent .conditional-indent .amex-text { margin-bottom: 0; }
.conditional-indent+label { margin-top: 1em; }
	.likert .conditional-indent+label { margin-top: 0; }

/* Same idea as .conditional-indent (hidden until an earlier answer
   reveals it, via a page-specific :has() rule) but for a full top-level
   <fieldset> question rather than a nested follow-up — deliberately
   without .conditional-indent's indent/border styling, since this is a
   standalone question, not a sub-question of whatever revealed it. Kept
   generic/reusable here; which question reveals which one lives in each
   survey's own CSS (e.g. cit.css), not here. */
.conditional-fieldset { display: none; }

footer {
	background: var(--surveyBG);
	padding: var(--mb) 0;
}

.footer-text {
	text-align: center;
	color: #fff;
}

	.footer-text a { color: inherit;}
	.footer-text p { margin-bottom: 0; line-height: 1.6em;}

.fineprint { font-size: 1.4rem; }

legend {
	font-weight: 700;
	margin-bottom: 1em;
	display: block;
	font-size: 1.5rem;
	line-height: 1.4em;
}

.amex-textarea {
	font-size: 16px;
	padding: .85em;
	display: block;
	margin-bottom: 1.3em;
	border: 1px solid var(--amex-gray);
	background-color: var(--amex-formBG);
	width: 100%;
	border-radius: 4px;
	line-height: 1.4em;
	font-family: "Helvetica Neue", "Helvetica", sans-serif;
	field-sizing: content;
	min-height: 5lh;
	max-height: 10lh;
	overflow-y: auto;
}

	.amex-textarea:hover {
		border-color: var(--amex-brightblue);
	}

.inline-label-divider {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid var(--amex-gray);
	max-width: 600px;
}

.na-likert { padding-left: 1.5em; border-left: 1px solid var(--amex-gray); }

/* Subtle required-field indicator (survey.js toggles this class after a
   Next-click finds something unanswered). Kept generic/reusable — which
   fields count as required lives in each page's own markup via the
   `required` attribute or `data-required-min`, not here. */
.field-invalid {
	border-left: 3px solid var(--amex-red);
	padding-left: 1em;
}

/* Inserted by survey.js as a real element right after the container's
   <legend> (or as its first child, if it has none) — not a ::after, since
   ::after always renders after all of a container's other content and
   can't be placed between the legend and the first form element. */
.field-invalid-message {
	display: block;
	color: var(--amex-red);
	font-size: 1.3rem;
	font-weight: 700;
	margin: .25em 0 .75em;
}

sup {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
	font-size: 66%;
}

sup {
	top: -1ex;
}

.content-box {
  counter-reset: question;
}

.content-box fieldset:not(fieldset fieldset) {
  counter-increment: question;
}

.content-box fieldset:not(fieldset fieldset) > legend::before {
  content: counter(question) ". ";
  font-weight: bold;
}

	.amex-step { color: var(--amex-darkgray); }
	.amex-step-on, .amex-step-done { color:  var(--amex-deepblue); }
	
	.amex-step-done:before {
		background: var(--amex-deepblue);
		border: 2px solid var(--amex-deepblue);
		width: 16px;
		height: 16px;
		left: calc(50% - 8px);
	}
	
	.amex-textarea + label { margin-top: 1em;}

.inline-label { margin-bottom: 1em; }
.inline-label:has(input[type=radio]), .inline-label:has(input[type=checkbox]) { font-size: 1.5rem; }
.conditional-indent > label:first-of-type { margin-bottom: 1em; }

legend + p, label + p { font-size: 1.4rem; margin-top: -.5em; margin-bottom: 1.25em; }

.amex-stepperBG { background: var(--secondaryBG); max-width: 880px; margin: 0 auto; padding: 30px 0; }
	.amex-stepper { margin-bottom: 0; }

fieldset { max-width: 560px;}

@media all and (max-width: 600px) {
	.steps { flex-direction: column; gap: 10px;}
	.step { width: 100%; }
	.two-cols { flex-direction: column; gap: 0;}
	.col { width: 100%; }
	h2 { font-size: 2rem; }
	section { padding: 20px 25px 0 25px; }
	.content-box { width: 100%; margin-top: 0; }
	.top-bar { font-size: 1.1rem; font-weight: 500; line-height: 1.4em; }
	.top-bar .download-link { padding-right: 30px; }
}