@font-face { 
	font-family:Gotham Narrow Book;
	src: url('../fonts/GothamNarrow-Book.otf');
}
@font-face { 
	font-family:Gotham Narrow Medium;
	src: url('../fonts/GothamNarrow-Medium.otf');
}
@font-face {
	font-family: "Garrison12 VF";
	src: url('../fonts/Garrison12VF_W_Wght.woff2') format('woff2');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Garrison12 VF";
	src: url('../fonts/Garrison12VFItalic_W_Wght.woff2') format('woff2');
	font-weight: 400 800;
	font-style: italic;
	font-display: swap;
}
/* Condensed-only variable font for disclosure copy (Dalton Maag v1.011). */
@font-face {
	font-family: "Aldgate Sans VF";
	src: url('../fonts/AldgateSansVF_W_Wght.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Aldgate Sans VF";
	src: url('../fonts/AldgateSansVFItalic_W_Wght.woff2') format('woff2');
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

/*
 * Palette and copy below come from the actual Figma exports in
 * ssn8976/exported-from-figma-design (page PDFs + cover art), and the
 * hex values supplied directly for SSN-8976.
 */
:root {
	--color-text: #000000;
	--color-heading: #162F63;
	--color-navy: #0B2237;
	--color-text-on-navy: #F5F5F1;
	--color-divider: #CCBF80;
	--color-button-grad-start: #CCBF80;
	--color-button-grad-end: #CBBF7F;
	--color-button-text: #003065;
	--color-input-border: #898053;
	--color-accent-maroon: #87200D;
	--color-error: #B3261E;
	/* Sampled from a screenshot of the footer nav links (anti-aliased text, so approximate). */
	--color-footer-link: #0A65C5;
	--font-heading: "Garrison12 VF", "Segoe UI", Calibri, "Trebuchet MS", Arial, sans-serif;
	--font-body: "Garrison12 VF", "Segoe UI", Calibri, "Trebuchet MS", Arial, sans-serif;
}

body {
	font-family: var(--font-body);
	color: var(--color-text);
}

a {
	color: var(--color-heading);
}

#header {
	color: var(--color-text-on-navy);
	background-color: var(--color-heading);
	padding: 20px 0px;
	border-bottom: 17px solid var(--color-accent-maroon);
}
#header .row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
#header img {
	display: block;
	width: 68px;
	height: 75px;
	aspect-ratio: 68/75;
}
#header .header-logo {
	order: 1;
	align-self: center;
}
#header .header-phone {
	order: 2;
}
#header .header-headline {
	order: 3;
	flex: 1 0 100%;
	margin-top: 20px;
}
#header a {
	/* margin-top: 2px;
	padding: 8px 20px;
	border-radius: 999px; */
	background-color: var(--color-divider);
	color: var(--color-button-text) !important;
	font-weight: 700;
	font-size: 23px;
	text-decoration: none !important;
}

#header h1, #hero h1 {
	font-family: var(--font-heading);
	font-size: 50px;
	font-style: normal;
	font-weight: 800;
	line-height: normal;
	margin: 0;
}
#header p, #hero p {
	margin-top: 20px;
	font-size: 27.5px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

@media (min-width: 601px) {
	#header .header-headline {
		order: 2;
		flex: 1 1 0%;
		min-width: 0;
		margin-top: 0;
		padding: 0 30px;
		text-align: center;
	}
	#header .header-headline h1 {
		line-height: 64px;
	}
	/* Line the phone button's bottom up with the headline's: its column
	   matches the h1 line height and sits the button at the bottom. */
	#header .header-phone {
		order: 3;
		display: flex;
		align-items: flex-end;
		min-height: 64px;
	}
}

#section1 {
	padding: 24px 0px;
	background-color: #FBF9F4;
}
#section1 h3 {
	font-family: var(--font-heading);
	color: var(--color-navy);
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}
#section1 .eyebrow {
	font-size: 23px;
	color: var(--color-text);
	margin-bottom: 0;
}
#section1 form {
	width: 90%;
}
#section1 .row {
	margin: 0px 0px 20px;
	display: flex;
	justify-content: space-between;
}
#section1 .input-group {
	flex: 1;
	padding-left: 0px;
}
#section1 label {
	display: block;
	margin-bottom: 5px;
}
#section1 input {
	width: 95%;
	border-radius: 4px;
	border: 1px solid var(--color-input-border);
	background-color: #FFFFFF;
}
#section1 .date-input {
	border-radius: 4px;
	border: 1px solid var(--color-input-border);
	background-color: #FFFFFF;
}
#section1 input.is-invalid,
#mobile-form input.is-invalid {
	border-color: var(--color-error);
}
/* Keep an error message from stretching the input beside it: top-align
   the field groups in each row instead of stretching them to match. */
.needs-validation .input-group {
	align-items: flex-start;
	align-content: flex-start;
}
.needs-validation .invalid-feedback {
	width: 100%;
	color: var(--color-error);
	font-size: 14px;
	line-height: 18px;
}
#section1 .submit-row {
	text-align: center;
	margin-top: 20px;
}
#section1 .column2 {
	display: flex;
	align-items: center;
	justify-content: center;
}
#section1 .cover-art {
	display: block;
	max-width: 400px;
}
/* Desktop form and mobile form modal. */
.disclaimer {
	font-family: "Aldgate Sans VF", var(--font-body);
	font-size: 10px;
}
#section1 .disclaimer {
	margin-top: 10px;
	text-align: left;
}
#mobile-form-modal .modal-header {
	border-bottom: none;
}
#mobile-form-modal .modal-header .btn-close {
	position: absolute;
	top: 10px;
	right: 10px;
}
@media (min-width: 601px) {
	/* Figma lays the eyebrow, heading and form out as one 491px block
	   that ends at the column's right edge. */
	#section1 .column1 > * {
		width: 100%;
		max-width: 491px;
		margin-left: auto;
	}
	/* Center the label both ways; min-height instead of a fixed height
	   lets it grow rather than clip if the label wraps to two lines.
	   The width drops Bootstrap's 0.75rem .row > * right padding that
	   the input groups above carry, so their right edges line up. */
	#section1 .btn-guidebook {
		width: calc(100% - 0.75rem);
		display: flex;
		align-items: center;
		justify-content: center;
		height: auto;
		min-height: 54px;
		padding: 8px 10px;
		font-size: 23px;
		line-height: 1.2;
	}
}
/* Below Bootstrap's lg breakpoint (tablets, phones in landscape) the
   two-column layout's 540-720px container, split evenly with the cover
   art, squeezes the paired fields. Use the full width and give the
   form most of it, shrinking the cover art to fit short viewports.
   The header's desktop type sizes crowd the narrow headline column
   too, so step them down toward the portrait mobile sizes. */
@media (min-width: 601px) and (max-width: 991px) {
	#header {
		padding: 12px 0px;
	}
	#header img {
		width: 45px;
		height: 49px;
	}
	#header .header-headline {
		padding: 0 16px;
	}
	#header .header-headline h1 {
		font-size: 30px;
		line-height: 38px;
	}
	#header p {
		margin-top: 8px;
		margin-bottom: 0;
		font-size: 18px;
		line-height: 24px;
	}
	/* Keep the button's bottom level with the smaller h1 line. */
	#header .header-phone {
		min-height: 38px;
	}
	#header a {
		border-radius: 10px;
		padding: 8px 14px;
		font-size: 16px;
	}
	#section1 .container {
		max-width: 100%;
	}
	#section1 .column1 {
		flex: 0 0 auto;
		width: 68%;
	}
	#section1 .column1 > * {
		max-width: none;
	}
	#section1 form {
		width: 100%;
	}
	#section1 .column2 {
		flex: 0 0 auto;
		width: 32%;
	}
	#section1 .cover-art {
		width: 100%;
		max-width: 260px;
		max-height: 80vh;
		object-fit: contain;
	}
}

.btn-guidebook {
	display: block;
	background: linear-gradient(180deg, var(--color-button-grad-start), var(--color-button-grad-end));
	color: var(--color-button-text) !important;
	font-weight: 700;
	padding: 14px 10px;
	height: 54px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	width: 100%;
	text-align: center;
	text-decoration: none !important;
}

#section2 {
	padding: 50px 0px;
	border-top: 33px solid var(--color-divider);
}
#section2 h2 {
	font-family: var(--font-heading);
	font-size: 44px;
	font-weight: 700;
	line-height: 50px;
	color: var(--color-heading);
}
#section2 p {
	margin-top: 15px;
	font-size: 27.5px;
	line-height: normal;
	max-width: 100%;
}
#section2 .valueprop {
	margin-top: 40px;
}
#section2 .valueprop h5 {
	margin-top: 15px;
	font-size: 22px;
	line-height: 28px;
	font-weight: 600;
	font-family: var(--font-heading);
	color: var(--color-heading);
}
#section2 .valueprop p {
	max-width: 100%;
	font-size: 23px;
	line-height: normal;
}
#section2 .valueprop sup {
	font-size: 11px;
}
#section2 .valueprop .value-icon {
	height: 80px;
	width: auto;
}

#section3 {
	background-color: #F2F1EC;
	padding: 50px 0px;
}
#section3 h2 {
	font-size: 50px;
	line-height: 50px;
	font-weight: 500;
	font-family: var(--font-heading);
	color: var(--color-heading);
}
#section3 p {
	font-size: 23px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
#section3 h4 {
	font-size: 22px;
	line-height: 28px;
	font-weight: 600;
	font-family: var(--font-heading);
	margin-top: 20px;
}
.custom-counter {
	margin: 20px 0 0;
	padding: 0;
	list-style-type: none;
}
.custom-counter li {
	counter-increment: step-counter;
	margin-bottom: 15px;
	padding-left: 45px;
	position: relative;
}
.custom-counter li::before {
	content: counter(step-counter);
	position: absolute;
	left: 0;
	top: 0;
	font-size: 18px;
	background-color: var(--color-navy);
	color: var(--color-text-on-navy);
	font-weight: bold;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-radius: 50px;
}
.custom-counter h5 {
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
	font-family: var(--font-heading);
	margin-bottom: 5px;
}
#section3 .column2 {
	text-align: center;
	margin: auto;
	display: block;
}
#section3 .cover-art {
	display: block;
	max-width: 220px;
	margin: 0 auto;
}
#section3 .table-of-contents {
	text-decoration: underline;
	font-size: 18px;
	line-height: 32px;
	color: var(--color-text);
	display: block;
	margin-top: 10px;
	margin-bottom: 15px;
	cursor: pointer;
}
#section3 .btn-guidebook {
	max-width: 465px;
	margin: 10px auto 0px;
}
@media (min-width: 601px) {
	/* The desktop button below is inline and ignores top margins, so
	   add its spacing to the bottom of the link above it instead. */
	#section3 .table-of-contents {
		margin-bottom: calc(15px + 1rem);
	}
	/* Figma leaves ~34px between the heading and the intro copy. */
	#section3 h2 {
		margin-bottom: 34px;
	}
	#section4 .column1 {
		justify-content: flex-start;
	}
	#section4 .value-icon {
		max-width: 226px;
	}
}
@media (min-width: 1400px) {
	/* Keep the label on one line in the 491px form column, as in Figma,
	   with room either side: 23px text needs nearly the full width, so
	   step it down to fit inside 16px of side padding. */
	#section1 .btn-guidebook {
		padding: 8px 16px;
		font-size: 21px;
	}
}
@media (min-width: 992px) {
	#section3 .cover-art {
		max-width: 279px;
	}
}
#section4 {
	padding: 50px 0px;
}
#section4 .column1 {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
#section4 .value-icon {
	max-width: 220px;
	width: 100%;
	height: auto;
}
#section4 h3 {
	font-family: var(--font-heading);
	margin-bottom: 15px;
	color: var(--color-navy);
	font-size: 50px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}
#section4 p {
	font-size: 27.5px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
#section4 a {
	color: var(--color-footer-link);
}

#footer {
	padding: 40px 0px;
}
#footer h3 {
	text-transform: uppercase;
	margin-bottom: 15px;
	font-size: 27.5px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
#footer p {
	color: var(--color-text);
	margin-bottom: 10px;
	font-family: "Aldgate Sans VF", var(--font-body);
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
#footer a {
	color: var(--color-heading) !important;
}
#footer-nav {
	padding: 0px 0px 30px;
}
#footer-nav .column2 {
	text-align: center;
	padding-top: 10px;
}
#footer-nav .column3 {
	text-align: center;
	font-size: 12px;
	line-height: 13px;
	color: var(--color-text);
}
#footer-nav a {
	color: var(--color-footer-link) !important;
	font-size: 15px;
	text-decoration: none;
	line-height: 24px;
	padding: 0px 10px;
}

/* Drop Bootstrap's header/footer divider lines; the title keeps its
   own gold underline. */
#table-of-contents-modal .modal-header {
	border-bottom: none;
}
#table-of-contents-modal .modal-footer {
	border-top: none;
}
#table-of-contents-modal .modal-header .modal-title {
	font-size: 10px;
}
#table-of-contents-modal .modal-header .btn-close {
	position: absolute;
	top: 10px;
	right: 10px;
}
#table-of-contents-modal .modal-title {
	font-family: var(--font-heading);
	font-size: 24px;
	color: var(--color-heading);
	font-weight: 700;
	border-bottom: 3px solid var(--color-divider);
	padding-bottom: 10px;
	margin-bottom: 10px;
	width: 100%;
}
.toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.toc-list li {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 6px 0;
	font-size: 15px;
}
.toc-list .toc-dots {
	flex: 1;
	border-bottom: 1px dotted #9a9a90;
	margin-bottom: 4px;
}

.desktop-only {
	display: initial;
}
.mobile-only {
	display: none;
}

@media (max-width: 600px) {
	#header img {
		width: 45px;
		height: 49px;
	}
	.toc-list li {
		font-size: 12px;
	}
	#header .header-phone {
		margin-left: auto;
	}
	#header a {
		background: linear-gradient(135deg, var(--color-button-grad-start), var(--color-button-grad-end));
		border-radius: 10px;
		padding: 14px 18px;
		font-size: 16px;
	}
	#header h1, #hero h1 {
		font-size: 32px;
		line-height: 38px;
	}
	#header p, #hero p {
		font-size: 18px;
		line-height: 24px;
	}
	#section1 {
		text-align: center;
	}
	#section1 .column1 {
		padding-left: 0;
		padding-right: 0;
	}
	#section1 .eyebrow {
		font-size: 18px;
		text-align: left;
	}
	#section1 h3 {
		font-size: 20px;
		line-height: 28px;
		text-align: left;
	}
	#section1 form {
		width: 100%;
		text-align: left;
		margin-top: 1rem;
	}
	/* Space the fields with a gap instead of Bootstrap's .row > * right
	   padding, which left the form's right edge 0.75rem short of its
	   left. The date input's margin undoes Bootstrap's -1px input-group
	   nudge so every field starts on the same edge. */
	#section1 .row {
		column-gap: 0.75rem;
	}
	#section1 .input-group {
		min-width: 0;
		padding-right: 0;
	}
	#section1 input,
	#section1 label,
	#section1 .date-input {
		width: 100%;
		margin-left: 0 !important;
		font-size: 16px;
	}
	#section1 .disclaimer {
		line-height: 16px;
	}
	.btn-guidebook {
		border-radius: 10px;
		font-size: 15px;
	}
	#section2 h2 {
		font-size: 32px;
		font-style: normal;
		font-weight: 800;
		line-height: normal;
	}
	#section3 h2 {
		font-size: 22px;
		line-height: 28px;
		font-weight: 500;
	}
	#section4 h3 {
		font-size: 23px;
		line-height: 28px;
		font-weight: 500;
	}
	#section2 p, #section3 p, #section4 p {
		font-size: 18px;
		line-height: 24px;
		max-width: 100%;
	}
	#section2 .valueprop h5, #section3 h4, .custom-counter h5 {
		font-size: 18px;
		font-weight: 700;
		line-height: 24px;
	}
	#section2 .valueprop p {
		font-size: 15px;
		line-height: 20px;
	}
	#section2 .valueprop .value-icon {
		height: auto;
		width: 70px;
		max-width: 100%;
		margin-left: 1rem;
	}
	#section3 .column2 {
		margin-top: 30px;
	}
	#section4 .column1 {
		margin-bottom: 20px;
	}
	#section4 .value-icon {
		max-width: 160px;
	}
	body {
		padding-bottom: 70px;
	}
	#sticky-button {
		padding: 10px 20px;
		width: 90%;
		margin: auto;
		display: none;
		height: 50px;
		font-size: 15px;
		line-height: 18px;
		position: fixed;
		left: 5%;
		bottom: 10px;
		z-index: 1030;
		border-radius: 10px;
	}
	#sticky-button.is-visible {
		display: block;
	}
	.desktop-only {
		display: none !important;
	}
	.mobile-only {
		display: initial;
	}
}
@media (min-width: 601px) {
	#sticky-button {
		display: none;
	}
}

#thankyou #hero {
	padding: 50px 0px;
	background-color: #FFFFFF;
	color: var(--color-text);
	border-bottom: none;
}
#thankyou #hero .eyebrow {
	font-size: 23px;
	color: var(--color-text);
	margin-bottom: 0;
}
#thankyou #hero h1 {
	color: var(--color-heading);
}
#thankyou #hero p {
	font-weight: 400;
}
#thankyou #hero p b {
	font-weight: 700;
}
#thankyou #section2 {
	background-color: #F2F1EC;
}
#thankyou #section2 h2 {
	color: var(--color-heading);
}
#thankyou #section2 .valueprop h5 {
	color: var(--color-text);
}
#thankyou .cover-art {
	display: block;
	max-width: 260px;
	margin: 0 auto 15px;
}
#thankyou #hero .column2 {
	text-align: center;
}
#thankyou #hero .btn-guidebook {
	max-width: 495px;
	margin: 0 auto 15px;
}
/* FlippingBook sizes the book at 3:2 to the dialog's width, so size the
   width from the viewport height to keep the whole modal on screen
   (180px covers the dialog margins, header and body padding), capped
   at 90% of the viewport width. */
#thankyou #pdf-modal .modal-dialog {
	width: min(90vw, calc((100vh - 180px) * 1.5 + 34px));
	max-width: none;
	text-align: center;
}
#thankyou #pdf-modal .modal-header {
	border-bottom: none;
}
#thankyou #pdf-modal .modal-title {
	font-family: var(--font-heading);
	font-size: 24px;
	color: var(--color-heading);
	font-weight: 700;
}

@media (max-width: 600px) {
	#thankyou #section2, #thankyou #footer {
		border-top: 33px solid var(--color-divider);
	}
	#thankyou #hero {
		padding: 1rem 0;
	}
	/* Stack the columns explicitly: left to wrap on their own, they
	   sit side by side again once the viewport clears ~497px. */
	#thankyou #hero .column1,
	#thankyou #hero .column2 {
		flex: 0 0 100%;
	}
	#thankyou #hero .eyebrow {
		margin-bottom: 1rem;
	}
	#thankyou #hero .btn-guidebook {
		font-size: 18px;
	}
	#thankyou #section2 .valueprop p {
		font-size: 18px;
		line-height: 24px;
	}
	/* Keep the number whole (no breaks at its hyphens) and inline, so
	   the period after it stays on the same line. */
	#dynamic-phone-number-2 {
		white-space: nowrap;
	}
	.container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (min-width: 601px) {
	#thankyou #section2, #thankyou #footer {
		border-top: 19px solid var(--color-divider);
	}
	#thankyou #header img {
		width: 57px;
		height: 63px;
	}
	#thankyou #hero p {
		font-size: 23px;
		line-height: 32px;
		color: var(--color-heading);
	}
	#thankyou .cover-art {
		width: 100%;
		max-width: 492px;
	}
	#thankyou #section2 {
		background-color: #FFFFFF;
	}
	#thankyou #section2 h2 + p {
		color: var(--color-heading);
	}
	#thankyou #hero .btn-guidebook {
		font-size: 24px;
		height: 64px;
	}
	#thankyou #section2 h2 {
		font-size: 50px;
		line-height: 56px;
	}
	#thankyou #section2 p {
		font-size: 27.5px;
		line-height: 34px;
	}
	#thankyou #section2 .valueprop h5 {
		font-size: 23px;
		line-height: 28px;
	}
	#thankyou #section2 .valueprop p {
		font-size: 23px;
		line-height: 30px;
	}
}
/* Below Bootstrap's lg breakpoint (tablets, phones in landscape) the
   two-column hero's short, wide cover art can't match the height of
   the copy beside it. Stack the columns as portrait mobile does and
   use its type sizes. */
@media (min-width: 601px) and (max-width: 991px) {
	#thankyou #hero {
		padding: 1.5rem 0;
	}
	#thankyou #hero .column1,
	#thankyou #hero .column2 {
		flex: 0 0 100%;
	}
	#thankyou #hero .column2 {
		margin-top: 1rem;
	}
	#thankyou #hero .eyebrow {
		font-size: 18px;
		margin-bottom: 0.5rem;
	}
	#thankyou #hero h1 {
		font-size: 32px;
		line-height: 38px;
	}
	#thankyou #hero p {
		font-size: 18px;
		line-height: 24px;
	}
	#thankyou .cover-art {
		max-width: 260px;
	}
	#thankyou #hero .btn-guidebook {
		font-size: 18px;
		height: 54px;
	}
}
@media (min-width: 1200px) {
	#thankyou #hero .btn-guidebook {
		font-size: 30px;
		font-weight: 800;
		height: 71px;
	}
}
@media (min-width: 1400px) {
	/* Figma starts the hero copy 93px inside the column's left edge
	   (x=153 on the 1440px frame) and ends it at x=743, where the
	   cover-art column begins. */
	#thankyou #hero .column1 {
		flex: 0 0 auto;
		width: 683px;
		padding-left: 93px;
	}
}