/* Calendly embed height (2026-08-13) — the WRAPPER div was getting its
   height fine (confirmed live: computed height 700px, matched the old
   min-height rule below), but Calendly's own auto-created <iframe> has
   no styling of its own to fill that space — its default/fallback
   height (confirmed live: exactly 150px, no inline style at all) only
   shows the event header before an internal scrollbar kicks in. Calendly
   does not set height:100% on its own iframe; the embedding page has to.
   That single missing iframe rule was the whole bug — both "tiny
   calendar" and "big empty gap before the footer" (the 700px wrapper
   minus the 150px iframe was just dead space) came from this one cause.
   Heights are on the WRAPPER (height, not min-height, so the iframe's
   100% below has something concrete to resolve against); breakpoints
   match this project's existing max-width cascade (see tnc-hero.css) —
   desktop/tablet/mobile, mobile taller because Calendly's own layout
   stacks date+time vertically on narrow screens instead of side by side. */
.tnc-calendly-embed {
	width: 100%;
	height: 1120px;
}

@media (max-width: 1024px) {
	.tnc-calendly-embed {
		height: 1000px;
	}
}

@media (max-width: 767px) {
	.tnc-calendly-embed {
		height: 1100px;
	}
}

.tnc-calendly-embed iframe {
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
}

.tnc-calendly-embed__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--e-global-color-text, #6F6F6F);
	font-family: var(--e-global-typography-text-font-family, inherit);
	font-size: 14px;
}

.tnc-how-we-help {
	font-family: var(--e-global-typography-text-font-family, inherit);
	text-align: center;
	max-width: 700px;
	margin: 0 auto;
	padding: 24px;
}

.tnc-how-we-help__heading {
	font-family: var(--e-global-typography-secondary-font-family, inherit);
	color: var(--e-global-color-primary, #071A51);
	font-size: 28px;
	font-weight: 600;
	margin: 0 0 16px;
}

.tnc-how-we-help__body {
	color: var(--e-global-color-text, #1F2933);
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 24px;
}

.tnc-how-we-help__cta {
	display: inline-block;
	padding: 14px 28px;
	background: var(--e-global-color-accent, #004AAD);
	color: var(--e-global-color-white, #FFFFFF);
	text-decoration: none;
	font-weight: 600;
	border-radius: 8px;
	transition: opacity 0.2s ease;
}

.tnc-how-we-help__cta:hover {
	opacity: 0.9;
	color: var(--e-global-color-white, #FFFFFF);
}

.tnc-what-happens-next {
	font-family: var(--e-global-typography-text-font-family, inherit);
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	padding: 24px 0;
}

@media (min-width: 700px) {
	.tnc-what-happens-next {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tnc-what-happens-next__step {
	text-align: center;
	padding: 20px;
}

.tnc-what-happens-next__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--e-global-color-accent, #004AAD);
	color: var(--e-global-color-white, #FFFFFF);
	font-weight: 700;
	margin-bottom: 12px;
}

.tnc-what-happens-next__text {
	color: var(--e-global-color-text, #1F2933);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

.tnc-what-happens-next__text strong {
	color: var(--e-global-color-primary, #071A51);
}

.tnc-404-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 24px 0;
}

.tnc-404-search {
	max-width: 420px;
	margin: 0 auto;
}

.tnc-404-search .search-form {
	display: flex;
	gap: 8px;
}

.tnc-404-search .search-field {
	flex: 1 1 auto;
	padding: 12px 16px;
	border: 1px solid var(--e-global-color-divider, #E8EEF6);
	border-radius: 8px;
	font-family: inherit;
	font-size: 15px;
}

.tnc-404-search .search-submit {
	padding: 12px 20px;
	background: var(--e-global-color-accent, #004AAD);
	color: var(--e-global-color-white, #FFFFFF);
	border: none;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
}