/**
 * FTD Events.
 *
 * Values come from the approved design (designspec §7 for the tokens, §1 for
 * the hero, §2 for the signup section). Two deliberate departures, both agreed
 * with the developer:
 *
 *   1. Fonts are the site's own — FTDheading for headings, FTDbody for body
 *      copy, FTDmenu for buttons and badges — not the design's Source Sans 3 /
 *      Manrope / Raleway.
 *   2. Buttons carry a white label on green, which is the site's convention;
 *      the design used a dark label.
 *
 * The design has no media queries at all: desktop and mobile were two separate
 * DOM trees. There is one breakpoint here, at Divi's own 980px.
 */

:root {
	--ftd-text: #05323c;
	--ftd-text-soft: #586365;
	--ftd-teal: #084e5e;
	--ftd-green: #00c77f;
	--ftd-green-dark: #00a86b;
	--ftd-brand-dark: #002b1c;
	--ftd-neutral: #f3f1ef;
	--ftd-band: #f1f7f7;
	--ftd-mint: #e9fbf9;
	--ftd-form-card: #f5fffb;
	--ftd-photo-fallback: #cfe7ee;
	--ftd-error: #d31f13;
	--ftd-error-body: #8a2a22;

	--ftd-hairline: rgba(8, 78, 94, 0.12);
	--ftd-hairline-14: rgba(8, 78, 94, 0.14);
	--ftd-divider: rgba(8, 78, 94, 0.2);
	--ftd-input-border: rgba(8, 78, 94, 0.55);
	--ftd-badge-border: rgba(5, 50, 60, 0.45);
	--ftd-backlink-border: rgba(5, 50, 60, 0.25);
	--ftd-glass: rgba(255, 255, 255, 0.72);
	--ftd-glass-border: rgba(255, 255, 255, 0.7);
	--ftd-focus-ring: rgba(0, 199, 127, 0.25);

	--ftd-shadow-glass: 0 18px 50px rgba(8, 78, 94, 0.14);
	--ftd-shadow-form: 0 24px 60px rgba(0, 43, 28, 0.28);
	--ftd-shadow-card: 0 2px 12px rgba(97, 153, 185, 0.12);
	--ftd-shadow-card-hi: 0 12px 30px rgba(97, 153, 185, 0.26);

	--ftd-font-heading: FTDheading, Helvetica, Arial, Lucida, sans-serif;
	--ftd-font-body: FTDbody, Helvetica, Arial, Lucida, sans-serif;
	--ftd-font-ui: FTDmenu, Helvetica, Arial, Lucida, sans-serif;

	--ftd-content: 1336px;
	--ftd-measure: 800px;
	--ftd-gutter: max(36px, calc((100% - 1336px) / 2));
	--ftd-scroll-offset: 152px;
}

/* --------------------------------------------------------------------------
 * Primitives
 * ----------------------------------------------------------------------- */

.ftd-event *,
.ftd-event *::before,
.ftd-event *::after {
	box-sizing: border-box;
}

.ftd-icon {
	width: 18px;
	height: 18px;
	flex: none;
}

/* The arrow slides in from zero width on hover. Design §1. */
#page-container [data-btn]::before {
	content: "\2192";
	display: inline-block;
	flex: none;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-width 200ms ease, opacity 200ms ease, margin-right 200ms ease;
}

#page-container [data-btn]:hover::before,
#page-container [data-btn]:focus-visible::before {
	max-width: 1.05em;
	opacity: 1;
	margin-right: 8px;
}

#page-container .ftd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 30px;
	border: none;
	border-radius: 24px;
	font-family: var(--ftd-font-ui);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: 0.3px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

#page-container .ftd-btn--green {
	background: var(--ftd-green);
	color: #fff;
}

#page-container .ftd-btn--green:hover,
#page-container .ftd-btn--green:focus-visible {
	background: var(--ftd-text);
	color: #fff;
}

#page-container .ftd-btn--dark {
	background: var(--ftd-text);
	color: #fff;
}

#page-container .ftd-btn--dark:hover,
#page-container .ftd-btn--dark:focus-visible {
	background: var(--ftd-brand-dark);
	color: #fff;
}

.ftd-badge {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 16px;
	border-radius: 14px;
	font-family: var(--ftd-font-ui);
	font-weight: 600;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: 0.6px;
}

.ftd-badge--outline {
	background: transparent;
	border: 1px solid var(--ftd-badge-border);
	color: var(--ftd-text);
}

.ftd-badge--filled {
	background: var(--ftd-mint);
	color: var(--ftd-text);
	font-weight: 700;
}

#page-container .ftd-backlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 18px;
	border-radius: 18px;
	border: 1px solid var(--ftd-backlink-border);
	background: rgba(255, 255, 255, 0.75);
	font-family: var(--ftd-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.3px;
	color: var(--ftd-text);
	text-decoration: none;
	align-self: flex-start;
}

#page-container .ftd-backlink:hover,
#page-container .ftd-backlink:focus-visible {
	background: #fff;
	color: var(--ftd-text);
}

.ftd-meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	/* The design used nowrap; with "Trinity Hotel & Konference, Fredericia" that
	   overflows between roughly 1024 and 1200px, so it wraps at every width. */
	flex-wrap: wrap;
	gap: 14px;
}

.ftd-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ftd-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.2px;
	color: var(--ftd-text);
}

.ftd-meta__item .ftd-icon {
	color: #5c7076;
}

.ftd-meta__divider {
	width: 1px;
	height: 15px;
	background: var(--ftd-divider);
}

/* Forced for the same reason as .ftd-measure: when this class sits on a Divi
   row, Divi's per-page padding rules would otherwise zero out the sides and the
   text would touch the edge of the box. */
#page-container .ftd-box {
	background-color: var(--ftd-neutral) !important;
	padding: 32px 36px !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* --------------------------------------------------------------------------
 * Hero — design §1
 * ----------------------------------------------------------------------- */

.ftd-hero {
	position: relative;
	min-height: 640px;
	display: flex;
	align-items: center;
	background-color: var(--ftd-photo-fallback);
	overflow: hidden;
}

.ftd-hero__media {
	position: absolute;
	inset: 0;
}

.ftd-hero__media .ftd-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.ftd-hero__inner {
	position: relative;
	width: 100%;
	padding: 72px var(--ftd-gutter) 88px;
}

.ftd-hero__column {
	max-width: 840px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

/* The frosted card is the only thing making the text legible — the design has
   no scrim at all — so the no-backdrop-filter fallback matters. */
.ftd-hero__card {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	padding: 40px 40px 44px;
	background: var(--ftd-glass);
	backdrop-filter: blur(16px) saturate(130%);
	-webkit-backdrop-filter: blur(16px) saturate(130%);
	border: 1px solid var(--ftd-glass-border);
	box-shadow: var(--ftd-shadow-glass);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ftd-hero__card {
		background: rgba(255, 255, 255, 0.94);
	}
}

#page-container .ftd-hero__title {
	margin: 0;
	padding: 0;
	font-family: var(--ftd-font-heading);
	font-weight: 700;
	font-size: 52px;
	line-height: 60px;
	letter-spacing: 0.3px;
	color: var(--ftd-text);
	text-wrap: pretty;
}

#page-container .ftd-hero__cta {
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
 * "Sted" block — design §5c
 * ----------------------------------------------------------------------- */

.ftd-address {
	padding: 0 var(--ftd-gutter) 72px;
}

.ftd-address__box {
	max-width: var(--ftd-measure);
	margin: 0 auto;
}

#page-container .ftd-address__heading {
	margin: 0;
	padding: 0;
	font-family: var(--ftd-font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 26px;
	color: var(--ftd-text);
}

.ftd-address__lines {
	margin: 0;
	font-family: var(--ftd-font-body);
	font-size: 16px;
	line-height: 26px;
	color: var(--ftd-text-soft);
}

/* --------------------------------------------------------------------------
 * Signup section — design §2
 * ----------------------------------------------------------------------- */

.ftd-signup {
	background: var(--ftd-green);
	padding: 72px var(--ftd-gutter) 88px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	/* So the anchor does not land under Divi's fixed header. */
	scroll-margin-top: var(--ftd-scroll-offset);
}

.ftd-signup__head {
	max-width: var(--ftd-measure);
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ftd-signup__eyebrow,
.ftd-signup__meta,
.ftd-signup__deadline {
	margin: 0;
	font-family: var(--ftd-font-body);
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0.3px;
	color: var(--ftd-brand-dark);
}

.ftd-signup__eyebrow {
	font-weight: 700;
}

.ftd-signup__deadline {
	font-weight: 700;
}

#page-container .ftd-signup__heading {
	margin: 0;
	padding: 0;
	font-family: var(--ftd-font-heading);
	font-weight: 700;
	font-size: 34px;
	line-height: 44px;
	color: var(--ftd-brand-dark);
}

.ftd-signup__card {
	max-width: var(--ftd-measure);
	width: 100%;
	background: var(--ftd-form-card);
	padding: 48px;
	box-shadow: var(--ftd-shadow-form);
}

.ftd-signup__body {
	margin: 0;
	font-family: var(--ftd-font-body);
	font-size: 16px;
	line-height: 26px;
	color: var(--ftd-text-soft);
}

.ftd-signup__actions {
	margin: 24px 0 0;
}

/* --------------------------------------------------------------------------
 * Gravity Forms inside the signup card
 *
 * Gravity Forms 3.x ships the "orbital" theme as an inline <style> block whose
 * selector carries an id, so a few of its own custom properties are overridden
 * with !important rather than fought with ever-longer selectors.
 * ----------------------------------------------------------------------- */

.ftd-signup .gform_wrapper.gform-theme {
	--gf-color-primary: var(--ftd-green) !important;
	--gf-color-primary-contrast: #fff !important;
	--gf-color-primary-darker: var(--ftd-green-dark) !important;
	--gf-color-in-ctrl-primary: var(--ftd-green) !important;
	--gf-ctrl-border-color: var(--ftd-input-border) !important;
	--gf-ctrl-label-color-primary: var(--ftd-text) !important;
	--gf-ctrl-label-color-secondary: var(--ftd-text) !important;
	--gf-radius: 4px !important;
	--gf-color-danger: var(--ftd-error) !important;
	--gf-local-color: var(--ftd-text) !important;

	/* Gravity Forms drives the field grid from its own variables, so setting
	   row-gap/column-gap on .gform_fields directly has no effect. Design §2
	   wants 28px between rows and 24px between the two-up columns. */
	--gf-form-gap-y: 28px !important;
	--gf-form-gap-x: 24px !important;
	--gf-ctrl-size: 48px !important;
}

/* The design has no required markers and no legend explaining them. */
.ftd-signup .gform_required_legend,
.ftd-signup .gfield_required {
	display: none !important;
}

.ftd-signup .gform_validation_container,
.ftd-signup .gfield--type-honeypot {
	display: none !important;
}

/* Gravity Forms hides the visible label text of its own accord once a field
   carries a placeholder. The approved design shows both, so it is forced back.
   Scoped to <label> so the visually hidden <legend> on the consent and
   newsletter fieldsets stays hidden. */
.ftd-signup label.gform-field-label .gform-field-label__text {
	display: block !important;
}

#page-container .ftd-signup .gfield_label,
#page-container .ftd-signup .gform-field-label {
	margin: 0 0 8px;
	font-family: var(--ftd-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	color: var(--ftd-text);
}

#page-container .ftd-signup input[type="text"],
#page-container .ftd-signup input[type="email"],
#page-container .ftd-signup input[type="tel"],
#page-container .ftd-signup textarea {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--ftd-input-border);
	border-radius: 4px;
	background: transparent;
	font-family: var(--ftd-font-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.3px;
	color: var(--ftd-text);
	box-shadow: none;
}

#page-container .ftd-signup input[type="text"]:focus-visible,
#page-container .ftd-signup input[type="email"]:focus-visible,
#page-container .ftd-signup input[type="tel"]:focus-visible {
	border-color: var(--ftd-green);
	box-shadow: 0 0 0 3px var(--ftd-focus-ring);
	outline: none;
}

#page-container .ftd-signup input::placeholder {
	color: #8a9a9e;
	opacity: 1;
}

/* Error state as an inset ring rather than a border swap, so nothing shifts. */
.ftd-signup .gfield_error input[type="text"],
.ftd-signup .gfield_error input[type="email"],
.ftd-signup .gfield_error input[type="tel"] {
	border-color: var(--ftd-error);
	box-shadow: inset 0 0 0 1px var(--ftd-error);
}

.ftd-signup .gfield_validation_message,
.ftd-signup .validation_message {
	margin: 6px 0 0;
	padding: 0;
	border: none;
	background: none;
	font-family: var(--ftd-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.4px;
	color: var(--ftd-error);
}

/* Consent and newsletter checkboxes */
.ftd-signup .gfield--type-consent legend.gfield_label,
.ftd-signup .gfield--type-checkbox legend.gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Gravity Forms lays the checkbox and its label out as a two-column grid with
   a zero column gap, so they touch. Overriding the gap is enough — converting
   it to flex would just lose to GF's own rule. */
.ftd-signup .ginput_container_consent,
.ftd-signup .gchoice {
	column-gap: 12px !important;
	align-items: start;
}

.ftd-signup .ginput_container_consent input[type="checkbox"],
.ftd-signup .gchoice input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--ftd-green);
	flex: none;
	cursor: pointer;
}

#page-container .ftd-signup .gfield_consent_label,
#page-container .ftd-signup .gchoice label {
	margin: 0;
	font-family: var(--ftd-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 0.3px;
	color: var(--ftd-text);
	cursor: pointer;
}

#page-container .ftd-signup .ftd-consent-link {
	color: var(--ftd-teal);
	text-decoration: underline;
}

#page-container .ftd-signup .ftd-consent-link:hover {
	color: var(--ftd-green-dark);
}

.ftd-signup .gform-footer {
	margin: 4px 0 0;
	padding: 0;
	justify-content: flex-start;
}

/* GF's own spinner is replaced by the design's ring, drawn on the button. */
.ftd-signup .gform_ajax_spinner {
	display: none !important;
}

.ftd-btn__spinner {
	display: none;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
}

.ftd-signup .is-sending .ftd-btn__spinner,
.gform_wrapper.is-sending .ftd-btn__spinner {
	display: block;
	animation: ftd-spin 700ms linear infinite;
}

.gform_wrapper.is-sending form {
	opacity: 0.6;
}

/* The button is not disabled in JS — Gravity Forms needs it to stay the active
   submit button — so a second click is blocked here instead. */
.gform_wrapper.is-sending [data-btn] {
	pointer-events: none;
	cursor: progress;
}

.gform_wrapper.is-sending [data-btn]::before {
	display: none;
}

@keyframes ftd-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ftd-btn__spinner {
		animation-duration: 2s;
	}

	#page-container [data-btn]::before {
		transition: none;
	}
}

/* Gravity Forms wraps our banner in its own bordered container, which would
   otherwise show as a box inside a box. */
.ftd-signup .gform_validation_errors {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* Error banner — design §2 */
.ftd-form-error {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 28px;
	padding: 16px 20px;
	border-radius: 6px;
	background: rgba(211, 31, 19, 0.08);
	border: 1px solid rgba(211, 31, 19, 0.35);
}

#page-container .ftd-form-error__heading {
	margin: 0;
	font-family: var(--ftd-font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 26px;
	color: var(--ftd-error);
}

.ftd-form-error__body {
	margin: 0;
	font-family: var(--ftd-font-body);
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 0.3px;
	color: var(--ftd-error-body);
}

/* Confirmation — replaces the form inside the same card */
.ftd-confirm {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.ftd-confirm:focus {
	outline: none;
}

.ftd-confirm__check {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--ftd-mint);
	color: var(--ftd-green);
	display: flex;
	align-items: center;
	justify-content: center;
}

#page-container .ftd-confirm__heading {
	margin: 0;
	padding: 0;
	font-family: var(--ftd-font-heading);
	font-weight: 700;
	font-size: 28px;
	line-height: 36px;
	color: var(--ftd-text);
}

.ftd-confirm__body {
	margin: 0;
	font-family: var(--ftd-font-body);
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0.3px;
	color: var(--ftd-text);
}

.ftd-confirm__actions {
	margin: 4px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* --------------------------------------------------------------------------
 * Mobile — design's separate mobile tree, folded into one breakpoint
 * ----------------------------------------------------------------------- */

@media (max-width: 980px) {
	:root {
		--ftd-gutter: 20px;
		--ftd-scroll-offset: 136px;
	}

	.ftd-hero {
		min-height: 520px;
		align-items: flex-end;
	}

	.ftd-hero__inner {
		padding: 20px;
	}

	.ftd-hero__column {
		max-width: none;
		gap: 14px;
	}

	.ftd-hero__card {
		gap: 14px;
		padding: 24px 22px 26px;
		background: rgba(255, 255, 255, 0.74);
		box-shadow: 0 12px 34px rgba(8, 78, 94, 0.14);
	}

	#page-container .ftd-hero__title {
		font-size: 32px;
		line-height: 40px;
		letter-spacing: normal;
	}

	.ftd-meta {
		gap: 12px;
	}

	.ftd-meta__item {
		font-size: 15px;
	}

	.ftd-meta__divider {
		display: none;
	}

	#page-container .ftd-hero__cta {
		align-self: stretch;
	}

	.ftd-signup {
		padding: 36px 20px 44px;
		align-items: stretch;
		gap: 16px;
	}

	#page-container .ftd-signup__heading {
		font-size: 26px;
		line-height: 34px;
	}

	.ftd-signup__card {
		padding: 24px 20px;
		box-shadow: 0 18px 40px rgba(0, 43, 28, 0.26);
	}

	.ftd-address {
		padding: 0 20px 40px;
	}

	#page-container .ftd-box {
		padding: 22px !important;
		gap: 10px;
	}
}

/* --------------------------------------------------------------------------
 * Event card and overview grid — design §3 and §4
 * ----------------------------------------------------------------------- */

.ftd-events {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
}

/* The design used repeat(auto-fit, minmax(320px, 1fr)), which makes a single
   event stretch across the full 1336px. Fixed columns keep one or two cards the
   same width as three. */
.ftd-events--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ftd-events--cols-1 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 440px;
}

.ftd-events__empty {
	margin: 0;
	font-family: var(--ftd-font-body);
	font-size: 16px;
	line-height: 26px;
	color: var(--ftd-text-soft);
}

.ftd-event-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--ftd-hairline);
	overflow: hidden;
	box-shadow: var(--ftd-shadow-card);
	transition: box-shadow 180ms ease, transform 180ms ease;
}

.ftd-event-card:hover,
.ftd-event-card:focus-within {
	box-shadow: var(--ftd-shadow-card-hi);
	transform: translateY(-2px);
}

.ftd-event-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: linear-gradient(140deg, #cfe7ee 0%, #e8f6fa 55%, #f3f1ef 100%);
	overflow: hidden;
}

.ftd-event-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.ftd-event-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	height: 26px;
	padding: 0 12px;
	border-radius: 13px;
}

.ftd-event-card__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 30px 28px 32px;
	flex: 1;
}

#page-container .ftd-event-card__title {
	margin: 0;
	padding: 0;
	font-family: var(--ftd-font-heading);
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: 0.2px;
	color: var(--ftd-text);
	text-wrap: pretty;
}

.ftd-meta--card {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.ftd-meta--card .ftd-meta__item {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	gap: 9px;
	color: var(--ftd-text-soft);
}

.ftd-meta--card .ftd-icon {
	width: 15px;
	height: 15px;
	color: #7d8f93;
}

.ftd-event-card__teaser {
	margin: 0;
	padding: 0;
	font-family: var(--ftd-font-body);
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 0.2px;
	color: #6b7d81;
	text-wrap: pretty;
}

#page-container .ftd-event-card__cta {
	margin-top: auto;
	align-self: flex-start;
	padding: 0 24px;
	font-size: 15px;
}

/* One accessible link, whole-card hit area. */
#page-container .ftd-event-card__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* --------------------------------------------------------------------------
 * Utility classes for the Divi-built sections
 *
 * These go in a Divi module's "CSS Class" field so whoever builds an event
 * types a class name instead of configuring typography per module. Leave the
 * module's own Divi typography settings untouched, or they will win.
 * ----------------------------------------------------------------------- */

/* Divi writes per-page CSS for section backgrounds and row widths with higher
   specificity than any selector here can reach, so these two properties are
   forced. Everything else in this file wins on specificity alone. */
#page-container .ftd-band {
	background-color: var(--ftd-band) !important;
}

#page-container .ftd-measure {
	width: 100% !important;
	max-width: var(--ftd-measure) !important;
	margin-inline: auto !important;
}

/* Headings */
#page-container .ftd-display,
#page-container .ftd-display h1,
#page-container .ftd-display h2 {
	font-family: var(--ftd-font-heading);
	font-weight: 700;
	font-size: 56px;
	line-height: 64px;
	letter-spacing: 0.5px;
	color: var(--ftd-text);
	text-align: center;
	text-wrap: pretty;
}

#page-container .ftd-h2,
#page-container .ftd-h2 h2 {
	font-family: var(--ftd-font-heading);
	font-weight: 700;
	font-size: 42px;
	line-height: 52px;
	letter-spacing: 0.2px;
	color: var(--ftd-text);
	text-wrap: pretty;
}

#page-container .ftd-h2--md,
#page-container .ftd-h2--md h2 {
	font-size: 34px;
	line-height: 44px;
}

#page-container .ftd-h2--sm,
#page-container .ftd-h2--sm h2 {
	font-size: 30px;
	line-height: 40px;
}

/* Body copy. One Text module with this class can carry a whole section. */
#page-container .ftd-prose,
#page-container .ftd-prose p,
#page-container .ftd-prose li {
	font-family: var(--ftd-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0.3px;
	color: var(--ftd-text-soft);
}

#page-container .ftd-prose p {
	margin: 0 0 16px;
	padding: 0;
}

#page-container .ftd-prose p:last-child {
	margin-bottom: 0;
}

#page-container .ftd-prose strong,
#page-container .ftd-prose b {
	font-weight: 700;
	color: var(--ftd-text);
}

#page-container .ftd-prose em {
	font-style: italic;
	color: #8a9a9e;
}

#page-container .ftd-prose a {
	color: var(--ftd-teal);
	text-decoration: underline;
}

#page-container .ftd-prose a:hover {
	color: var(--ftd-green-dark);
}

#page-container .ftd-sub,
#page-container .ftd-sub p {
	font-family: var(--ftd-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0.3px;
	color: var(--ftd-text);
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
}

#page-container .ftd-lead,
#page-container .ftd-lead p {
	font-family: var(--ftd-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0.3px;
	color: var(--ftd-teal);
	margin: 0;
}

#page-container .ftd-note,
#page-container .ftd-note p {
	font-family: var(--ftd-font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 26px;
	color: var(--ftd-text-soft);
	margin: 0;
}

#page-container .ftd-caption,
#page-container .ftd-caption p {
	font-family: var(--ftd-font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 15px;
	line-height: 25px;
	letter-spacing: 0.3px;
	color: #8a9a9e;
	margin: 0;
}

/* Program list — green dot bullets, design §5c */
#page-container .ftd-bullets ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#page-container .ftd-bullets li {
	position: relative;
	margin: 0;
	padding: 0 0 0 22px;
	font-family: var(--ftd-font-body);
	font-size: 16px;
	line-height: 26px;
	color: var(--ftd-text-soft);
	list-style: none;
}

#page-container .ftd-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ftd-green);
}

/* Benefit cards — design §5b.
 *
 * Put all five modules in ONE Divi column with ftd-cards on the column: Divi
 * columns cannot span, so a two-column Divi row cannot produce the full-width
 * fifth card without a second row, and a second row breaks the equal heights.
 */
.ftd-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

.ftd-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 28px;
	background: #fff;
	border: 1px solid var(--ftd-hairline-14);
	box-shadow: var(--ftd-shadow-benefit, 0 2px 10px rgba(97, 153, 185, 0.1));
	height: 100%;
}

.ftd-card--wide {
	grid-column: 1 / -1;
	border-color: var(--ftd-green);
}

#page-container .ftd-card h3,
#page-container .ftd-card h4 {
	margin: 0;
	padding: 0;
	font-family: var(--ftd-font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	color: var(--ftd-text);
}

#page-container .ftd-card p {
	margin: 0;
	padding: 0;
	font-family: var(--ftd-font-body);
	font-size: 16px;
	line-height: 26px;
	color: var(--ftd-text-soft);
}

@media (max-width: 1100px) {
	.ftd-events {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	#page-container .ftd-display,
	#page-container .ftd-display h1,
	#page-container .ftd-display h2 {
		font-size: 34px;
		line-height: 42px;
		letter-spacing: 0.2px;
	}

	#page-container .ftd-h2,
	#page-container .ftd-h2 h2 {
		font-size: 28px;
		line-height: 36px;
	}

	#page-container .ftd-h2--md,
	#page-container .ftd-h2--md h2 {
		font-size: 26px;
		line-height: 34px;
	}

	#page-container .ftd-h2--sm,
	#page-container .ftd-h2--sm h2 {
		font-size: 24px;
		line-height: 32px;
	}

	#page-container .ftd-lead,
	#page-container .ftd-lead p {
		font-size: 16px;
		line-height: 26px;
	}

	.ftd-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.ftd-card {
		padding: 20px;
		gap: 10px;
	}
}

@media (max-width: 680px) {
	.ftd-events,
	.ftd-events--cols-2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.ftd-events--cols-1 {
		max-width: none;
	}
}