/* =============================================================
   [saynine_resource] shortcode styles
   The .s9-resource-v4-wrap is the container query host, so we can
   change the .s9-resource-v4 (descendant) layout based on the
   wrapper's width. Scoped class names so styles do not leak into
   other blocks. Includes a small set of overrides that hide the
   native chrome of Fluent Form 11 inside this card.
   ============================================================= */

.s9-resource-v4-wrap {
	container-type: inline-size;
	width: 100%;
    max-width: 800px;
    margin: 32px auto;
}

.s9-resource-v4 {
	position: relative;
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	background: #0B1F3D;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(11, 31, 61, 0.22);
	font-family: inherit;
	color: #FFFFFF;
	aspect-ratio: 970 / 300;
}
.s9-resource-v4 * { box-sizing: border-box; }

/* ---------- banner (visible by default) ---------- */
.s9-resource-v4__banner {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #0B1F3D;
	background-image:
		linear-gradient(to right, rgba(99, 174, 255, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(99, 174, 255, 0.06) 1px, transparent 1px),
		linear-gradient(135deg, #0B1F3D 0%, #163066 100%);
	background-size: 14% 28%, 14% 28%, 100% 100%;
	transition: opacity .25s ease, visibility .25s ease;
	z-index: 2;
}
.s9-resource-v4__banner-inner {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: clamp(16px, 3cqi, 32px);
	height: 100%;
	padding: 0 clamp(24px, 6cqi, 60px) 0 clamp(12px, 3cqi, 32px);
	z-index: 2;
}
.s9-resource-v4__banner-mascot {
	flex: 0 0 auto;
	height: 100%;
	width: auto;
	max-width: 60%;
	min-width: 0;
	object-fit: contain;
	object-position: center bottom;
	align-self: flex-end;
	pointer-events: none;
	user-select: none;
	display: block;
}
.s9-resource-v4__banner-content {
	flex: 1 1 auto;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(8px, 1.8cqi, 16px);
	min-width: 0;
}
.s9-resource-v4__banner-title {
	color: #FFFFFF !important;
	margin: 0 !important;
	font-size: clamp(18px, 3.4cqi, 32px) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em;
}
.s9-resource-v4__banner-cta {
	display: inline-flex;
	align-items: center;
	gap: clamp(8px, 1.4cqi, 14px);
	padding: 3px 3px 3px clamp(14px, 2.2cqi, 22px);
	min-height: 32px;
	max-height: 42px;
	height: clamp(32px, 9cqi, 42px);
	background: #077DFD;
	border: 0;
	border-radius: 999px;
	color: #FFFFFF !important;
	font-family: inherit;
	font-size: clamp(12px, 1.5cqi, 15px);
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(7, 125, 253, 0.32);
	transition: background-color .2s ease, transform .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.s9-resource-v4__banner-cta * { color: #FFFFFF !important; }
.s9-resource-v4__banner-cta:hover { background: #5BA4FF; }
.s9-resource-v4__banner-cta:active { transform: translateY(1px); }
.s9-resource-v4__banner-cta:focus,
.s9-resource-v4__banner-cta:active {
	outline: none !important;
}
.s9-resource-v4__banner-cta:focus-visible {
	outline: 2px solid #FFFFFF !important;
	outline-offset: 3px;
}
.s9-resource-v4__banner-cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(26px, 7cqi, 36px);
	height: clamp(26px, 7cqi, 36px);
	background: #0B1F3D;
	border-radius: 50%;
	flex: 0 0 auto;
}
.s9-resource-v4__banner-cta-icon svg {
	width: 55%;
	height: 55%;
}
.s9-resource-v4__banner-cta-icon svg path { stroke: #FFFFFF !important; }

.s9-resource-v4__banner-trigger {
	position: absolute;
	inset: 0;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	z-index: 1;
	-webkit-appearance: none;
	appearance: none;
}
.s9-resource-v4__banner-trigger:focus { outline: none; }

/* ---------- form area (revealed on click) ---------- */
.s9-resource-v4__form-area {
	position: absolute;
	inset: 0;
	background: #0B1F3D;
	background-image:
		linear-gradient(to right, rgba(99, 174, 255, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(99, 174, 255, 0.06) 1px, transparent 1px);
	background-size: 14% 28%;
	background-position: 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 3cqi, 36px);
	padding: 0 clamp(24px, 6cqi, 60px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
	z-index: 1;
}
.s9-resource-v4__form-mount {
	flex: 1 1 auto;
	min-width: 0;
}
.s9-resource-v4.is-form-active .s9-resource-v4__banner {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 1;
}
.s9-resource-v4.is-form-active .s9-resource-v4__form-area {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

/* ---------- success state ---------- */
.s9-resource-v4__success {
	position: absolute;
	inset: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: #FFFFFF !important;
	font-size: clamp(14px, 2cqi, 16px);
	font-weight: 600;
	text-align: center;
	background: #0B1F3D;
	z-index: 4;
}
.s9-resource-v4__success::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #FF8A3B url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M5 12.5l4.5 4.5L19 7' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/26px 26px no-repeat;
	box-shadow: 0 8px 20px rgba(255, 138, 59, 0.40);
}
.s9-resource-v4.is-success .s9-resource-v4__form-mount,
.s9-resource-v4.is-success .s9-resource-v4__form-area > form,
.s9-resource-v4.is-success .s9-resource-v4__form-area .fluentform { display: none !important; }
.s9-resource-v4.is-success .s9-resource-v4__success { display: flex; }

/* =============================================================
   Fluent Form 11 inside .s9-resource-v4: hide native chrome
   (its own intro, CTA, titles) and restyle name + email + submit
   to match the redesigned card.

   These selectors are prefixed with #content to match (and beat)
   the legacy single_blog.css selector specificity.
   ============================================================= */

#content .s9-resource-v4 .fluentform { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; }
#content .s9-resource-v4 form.frm-fluent-form {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	min-height: 0 !important;
}

/* nuke legacy ::before and ::after that draw the dashed strip pattern */
#content .s9-resource-v4 form.frm-fluent-form::before,
#content .s9-resource-v4 form.frm-fluent-form::after {
	display: none !important;
	content: none !important;
	background: none !important;
}

/* hide form 11's own banner + intro + descriptions */
#content .s9-resource-v4 .checklist_wrapper,
#content .s9-resource-v4 .checklist_title,
#content .s9-resource-v4 .checklist_desc,
#content .s9-resource-v4 .checklist_list,
#content .s9-resource-v4 #checklist_btn,
#content .s9-resource-v4 .ff-message-success {
	display: none !important;
}

/* Form 11 wraps everything in a <fieldset> - it must be the flex container,
   not the form, because the form's only child is the fieldset. */
#content .s9-resource-v4 form.frm-fluent-form {
	display: block !important;
	width: 100% !important;
}
#content .s9-resource-v4 form.frm-fluent-form > fieldset {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: clamp(16px, 3cqi, 36px) !important;
	width: 100% !important;
	min-inline-size: 0 !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
#content .s9-resource-v4 .checklist_form {
	display: flex !important;
	flex-direction: column !important;
	gap: clamp(6px, 1cqi, 10px) !important;
	width: 100% !important;
	max-width: 60% !important;
	flex: 0 1 60% !important;
	background: transparent !important;
}

/* each input row (name and email) */
#content .s9-resource-v4 .checklist_input {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	width: 100% !important;
	flex-basis: auto !important;
}

/* labels above the input */
#content .s9-resource-v4 .checklist_input label,
#content .s9-resource-v4 .checklist_input .ff-el-input--label label {
	font-size: clamp(11px, 1.4cqi, 13px) !important;
	font-weight: 600 !important;
	color: #A7B5CC !important;
	margin: 0 0 0 4px !important;
	padding: 0 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.01em !important;
	background: transparent !important;
}
#content .s9-resource-v4 .checklist_input .ff-el-input--label::after,
#content .s9-resource-v4 .checklist_input label::after { display: none !important; }

/* the actual text/email inputs - light pill style */
#content .s9-resource-v4 .checklist_input input {
	display: block !important;
	width: 100% !important;
	height: clamp(36px, 10cqi, 42px) !important;
	min-height: 36px !important;
	max-height: 42px !important;
	padding: 0 22px !important;
	font-size: clamp(13px, 1.6cqi, 14px) !important;
	line-height: 1 !important;
	color: #10335F !important;
	background: #EEF3FA !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	outline: none !important;
	font-family: inherit !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
	box-shadow: none !important;
}
#content .s9-resource-v4 .checklist_email input {
	padding: 0 22px 0 44px !important;
	background-color: #EEF3FA !important;
}
/* Email icon as a pseudo on the wrapper, not the input.
   Browser autofill (-webkit-autofill) repaints the input's background
   and can hide a background-image; the wrapper pseudo is immune. */
#content .s9-resource-v4 .checklist_email .ff-el-input--content {
	position: relative !important;
}
#content .s9-resource-v4 .checklist_email .ff-el-input--content::before {
	content: "" !important;
	position: absolute !important;
	left: 16px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 16px !important;
	height: 16px !important;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M4 6h16v12H4z' stroke='%2363AEFF' stroke-width='1.6' stroke-linejoin='round'/><path d='M4 7l8 6 8-6' stroke='%2363AEFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat !important;
	pointer-events: none !important;
	z-index: 2 !important;
	display: block !important;
}
#content .s9-resource-v4 .checklist_input input::placeholder { color: #8FA3BD !important; }

/* Neutralize Chrome / Edge / Safari autofill so the pill keeps the
   right text color and stays visually consistent with manual entry. */
#content .s9-resource-v4 .checklist_input input:-webkit-autofill,
#content .s9-resource-v4 .checklist_input input:-webkit-autofill:hover,
#content .s9-resource-v4 .checklist_input input:-webkit-autofill:focus,
#content .s9-resource-v4 .checklist_input input:-webkit-autofill:active {
	-webkit-text-fill-color: #10335F !important;
	-webkit-box-shadow: 0 0 0 1000px #EEF3FA inset !important;
	box-shadow: 0 0 0 1000px #EEF3FA inset !important;
	transition: background-color 0s 99999s !important;
}
#content .s9-resource-v4 .checklist_input input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
	box-shadow: 0 0 0 1000px #FFFFFF inset !important;
}
#content .s9-resource-v4 .checklist_input input:focus {
	border-color: #077DFD !important;
	background-color: #FFFFFF !important;
}
#content .s9-resource-v4 .checklist_email input:focus { background-color: #FFFFFF !important; }
#content .s9-resource-v4 .checklist_input.ff-el-is-error input,
#content .s9-resource-v4 .checklist_input input.val-error {
	border-color: #E55C5C !important;
	background-color: #FFF0F0 !important;
}

/* hide form 11's leading svg icons (user/email icons next to inputs)
   because we put the email icon inline in the input padding */
#content .s9-resource-v4 .checklist_input > svg { display: none !important; }

/* hide Fluent Forms' inline validation message bubbles inside our card */
#content .s9-resource-v4 .ff-el-input--content .error,
#content .s9-resource-v4 .text-danger { display: none !important; }

/* submit button container + button */
#content .s9-resource-v4 .checklist_download {
	flex: 0 0 auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	position: relative !important;
}

/* Kill the legacy .checklist_download::after pseudo from single_blog.css,
   which absolutely-positions a separate arrow icon to the right of the
   wrapper and sticks out past the button. Our icon lives on button::after. */
#content .s9-resource-v4 .checklist_download::after,
#content .s9-resource-v4 .checklist_download::before {
	display: none !important;
	content: none !important;
	background: none !important;
	width: 0 !important;
	height: 0 !important;
}
#content .s9-resource-v4 .checklist_download button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: clamp(8px, 1.4cqi, 14px) !important;
	padding: 3px 3px 3px clamp(14px, 2.2cqi, 22px) !important;
	min-height: 36px !important;
	max-height: 46px !important;
	height: clamp(36px, 10cqi, 46px) !important;
	background: #077DFD !important;
	border: none !important;
	border-radius: 999px !important;
	color: #FFFFFF !important;
	font-family: inherit !important;
	font-size: clamp(13px, 1.6cqi, 15px) !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	box-shadow: 0 4px 14px rgba(7, 125, 253, 0.32) !important;
	transition: background-color .2s ease, transform .15s ease !important;
	width: auto !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
#content .s9-resource-v4 .checklist_download button::after {
	content: "" !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: clamp(26px, 7cqi, 34px) !important;
	height: clamp(26px, 7cqi, 34px) !important;
	background: #0B1F3D url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M12 5v14m0 0l-5-5m5 5l5-5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/55% 55% no-repeat !important;
	border-radius: 50% !important;
	flex: 0 0 auto !important;
	position: static !important;
	top: auto !important;
	right: auto !important;
	transform: none !important;
}
#content .s9-resource-v4 .checklist_download button:hover { background: #5BA4FF !important; }
#content .s9-resource-v4 .checklist_download button:active { transform: translateY(1px) !important; }

#content .s9-resource-v4 .checklist_download.loading button { opacity: .7 !important; pointer-events: none !important; }

/* hide the form's own .lds-ring spinner styling around the submit if present */
#content .s9-resource-v4 .checklist_download .lds-ring { display: none !important; }

/* =============================================================
   Responsive
   container queries target .s9-resource-v4 (descendant of the
   .s9-resource-v4-wrap container), so we can change aspect-ratio
   and layout based on the wrapper width.
   ============================================================= */

/* Tablet / narrow desktop: tighten spacing, keep horizontal. */
@container (max-width: 760px) {
	.s9-resource-v4__banner-mascot { max-width: 55%; }
	#content .s9-resource-v4 .checklist_form { max-width: 62% !important; flex: 0 1 62% !important; }
}

/* Stacked layout below this wrapper width. */
@container (max-width: 560px) {
	.s9-resource-v4 {
		aspect-ratio: auto;
	}
	.s9-resource-v4__banner {
		position: relative;
		inset: auto;
		height: auto;
	}
	.s9-resource-v4__banner-inner {
		flex-direction: column-reverse;
		padding: 18px 18px 0;
		gap: 0;
		text-align: center;
		align-items: center;
	}
	.s9-resource-v4__banner-mascot {
		height: auto;
		width: 340px;
		max-width: 80%;
		align-self: center;
	}
	.s9-resource-v4__banner-content {
		align-items: center;
		align-self: auto;
		padding-bottom: 18px;
		gap: 10px;
	}
	.s9-resource-v4__banner-title {
		font-size: 18px !important;
		text-align: center;
	}
	.s9-resource-v4__banner-cta {
		padding: 4px 4px 4px 16px;
		font-size: 13px;
		min-height: 36px;
		max-height: 40px;
	}
	.s9-resource-v4__banner-cta-icon { width: 28px; height: 28px; }

	.s9-resource-v4__form-area {
		position: relative;
		inset: auto;
		display: none;
		height: auto;
		min-height: 0;
		padding: 18px 18px;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 12px;
		background-image: none;
		opacity: 1;
		visibility: visible;
		transition: none;
	}
	.s9-resource-v4.is-form-active .s9-resource-v4__banner { display: none; }
	.s9-resource-v4.is-form-active .s9-resource-v4__form-area { display: flex; }

	/* Success state on mobile: let the success message size to its
	   content and flow normally so it does not collapse to a pill. */
	.s9-resource-v4.is-success .s9-resource-v4__form-area {
		display: flex;
		min-height: 200px;
		padding: 32px 20px;
	}
	.s9-resource-v4.is-success .s9-resource-v4__banner { display: none; }
	.s9-resource-v4__success {
		position: relative;
		inset: auto;
		width: 100%;
		padding: 0;
	}

	#content .s9-resource-v4 form.frm-fluent-form > fieldset {
		flex-direction: column !important;
		gap: 10px !important;
	}
	#content .s9-resource-v4 .checklist_form {
		max-width: 100% !important;
		flex: 1 1 auto !important;
		gap: 8px !important;
	}
	#content .s9-resource-v4 .checklist_input input {
		height: 42px !important;
		min-height: 42px !important;
		max-height: 42px !important;
		font-size: 14px !important;
	}
	#content .s9-resource-v4 .checklist_download {
		align-self: center !important;
		margin-top: 4px !important;
	}
	#content .s9-resource-v4 .checklist_download button {
		min-height: 40px !important;
		max-height: 44px !important;
		font-size: 14px !important;
		padding: 3px 3px 3px 16px !important;
	}
	#content .s9-resource-v4 .checklist_download button::after {
		width: 28px !important;
		height: 28px !important;
	}
}

/* Old-browser fallback (no container query support): mirror the
   stacked layout via a viewport media query. */
@supports not (container-type: inline-size) {
	@media (max-width: 680px) {
		.s9-resource-v4 { aspect-ratio: auto; }
		.s9-resource-v4__banner { position: relative; inset: auto; height: auto; }
		.s9-resource-v4__banner-inner {
			flex-direction: column;
			gap: 10px;
			padding: 18px 18px 0;
			text-align: center;
			align-items: center;
		}
		.s9-resource-v4__banner-mascot {
			height: auto;
			width: 200px;
			max-width: 60%;
			align-self: center;
		}
		.s9-resource-v4__banner-content { align-items: center; padding-bottom: 18px; gap: 10px; }
		.s9-resource-v4__form-area {
			position: relative;
			inset: auto;
			display: none;
			padding: 18px 18px;
			flex-direction: column;
			gap: 12px;
			opacity: 1;
			visibility: visible;
			transition: none;
		}
		.s9-resource-v4.is-form-active .s9-resource-v4__banner { display: none; }
		.s9-resource-v4.is-form-active .s9-resource-v4__form-area { display: flex; }
		.s9-resource-v4.is-success .s9-resource-v4__form-area { display: flex; min-height: 200px; padding: 32px 20px; }
		.s9-resource-v4.is-success .s9-resource-v4__banner { display: none; }
		.s9-resource-v4__success { position: relative; inset: auto; width: 100%; padding: 0; }
		#content .s9-resource-v4 form.frm-fluent-form > fieldset { flex-direction: column !important; gap: 10px !important; }
		#content .s9-resource-v4 .checklist_form { max-width: 100% !important; flex: 1 1 auto !important; gap: 8px !important; }
		#content .s9-resource-v4 .checklist_download { align-self: center !important; margin-top: 4px !important; }
	}
}