/**
 * Course signup form.
 *
 * Every rule is scoped under .ktt-signup rather than written as a single class.
 * Avada's own stylesheet uses descendant selectors like `.some-wrap p`, which score
 * (0,1,1) and beat a lone (0,1,0) class even with !important on both sides. Scoping
 * puts these at (0,2,0) and settles it without an !important arms race.
 */

.ktt-signup {
	--ktt-teal: #1F7F95;
	--ktt-teal-dark: #155F70;
	--ktt-accent: #A5CCD5;
	--ktt-bg: #F0F7F9;
	--ktt-alert: #B4453A;
	--ktt-text: #434343;

	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--ktt-text);
	max-width: 560px;
}

.ktt-signup * {
	box-sizing: border-box;
}

.ktt-signup .ktt-signup__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ktt-teal-dark);
	margin: 0 0 8px;
}

.ktt-signup .ktt-signup__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}

/* min-width:0 because a flex child defaults to min-width:auto and refuses to
   shrink below its content, which pushes the button off narrow screens. */
.ktt-signup .ktt-signup__input {
	flex: 1 1 240px;
	min-width: 0;
	font-family: inherit;
	font-size: 16px; /* 16px or iOS zooms the whole page on focus. */
	line-height: 1.4;
	color: var(--ktt-text);
	background: #fff;
	border: 1px solid var(--ktt-accent);
	border-radius: 4px;
	padding: 14px 16px;
	margin: 0;
	box-shadow: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ktt-signup .ktt-signup__input:focus {
	outline: none;
	border-color: var(--ktt-teal);
	box-shadow: 0 0 0 3px rgba(31, 127, 149, 0.18);
}

.ktt-signup .ktt-signup__input::placeholder {
	color: #93a7ac;
}

.ktt-signup .ktt-signup__button {
	flex: 0 0 auto;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--ktt-teal);
	border: 0;
	border-radius: 4px;
	padding: 14px 28px;
	margin: 0;
	cursor: pointer;
	transition: background 0.18s ease;
}

.ktt-signup .ktt-signup__button:hover,
.ktt-signup .ktt-signup__button:focus {
	background: var(--ktt-teal-dark);
	color: #fff;
}

.ktt-signup .ktt-signup__button[disabled] {
	opacity: 0.7;
	cursor: default;
}

.ktt-signup .ktt-signup__note {
	font-size: 13px;
	line-height: 1.6;
	color: #6b7b80;
	margin: 12px 0 0;
}

.ktt-signup .ktt-signup__msg {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ktt-teal-dark);
	margin: 12px 0 0;
	min-height: 1px;
}

.ktt-signup .ktt-signup__msg.is-error {
	color: var(--ktt-alert);
}

.ktt-signup .ktt-signup__msg:empty {
	margin: 0;
}

/*
 * Honeypot.
 *
 * Kept out of sight without display:none or visibility:hidden, because the more
 * capable bots skip fields hidden that way — which defeats the point of having it.
 * A human never sees or tabs into it; a bot filling every input trips it.
 */
.ktt-signup .ktt-signup__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 480px) {
	.ktt-signup .ktt-signup__row {
		display: block;
	}

	.ktt-signup .ktt-signup__input,
	.ktt-signup .ktt-signup__button {
		width: 100%;
	}

	.ktt-signup .ktt-signup__button {
		margin-top: 10px;
	}
}

/* ------------------------------------------------------------------
   The course gate — appearance only.

   The overlay's structure lives in the inline CSS the gate prints into the
   document head: position, centring, backdrop, panel box. That is on purpose.
   A gate hides the lesson, so if its own layout fails to arrive the reader
   gets an empty page — the one failure mode worth engineering out.

   Nothing here is required for the gate to be visible and usable.
   ------------------------------------------------------------------ */

.ktt-gate {
	--ktt-teal: #1F7F95;
	--ktt-teal-dark: #155F70;
	--ktt-accent: #A5CCD5;
	--ktt-bg: #F0F7F9;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	-webkit-overflow-scrolling: touch;
}

.ktt-gate * { box-sizing: border-box; }

.ktt-gate .ktt-gate__eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ktt-teal);
	margin: 0 0 10px;
}

.ktt-gate .ktt-gate__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.25;
	color: var(--ktt-teal-dark);
	margin: 0 0 14px;
}

.ktt-gate .ktt-gate__lesson {
	font-size: 14.5px;
	line-height: 1.6;
	color: #434343;
	margin: 0 0 18px;
	padding: 10px 14px;
	background: var(--ktt-bg);
	border-left: 3px solid var(--ktt-accent);
	border-radius: 3px;
}

.ktt-gate .ktt-gate__lead {
	font-size: 15.5px;
	line-height: 1.65;
	color: #434343;
	margin: 0 0 18px;
}

/* list-style is set with !important because Avada styles ul markers on the
   content area and won a straight fight with it. */
.ktt-gate .ktt-gate__list {
	list-style: none !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
}

.ktt-gate .ktt-gate__list li {
	position: relative;
	padding: 0 0 0 26px;
	margin: 0 0 9px;
	font-size: 15px;
	line-height: 1.55;
	color: #434343;
	list-style: none !important;
}

.ktt-gate .ktt-gate__list li:last-child { margin-bottom: 0; }

/* Tick drawn in CSS so the panel ships no images. */
.ktt-gate .ktt-gate__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 8px;
	height: 4px;
	border-left: 2px solid var(--ktt-teal);
	border-bottom: 2px solid var(--ktt-teal);
	transform: rotate(-45deg);
}

.ktt-gate .ktt-signup { max-width: none; }

.ktt-gate .ktt-gate__note {
	font-size: 12.5px;
	line-height: 1.6;
	color: #6b7b80;
	margin: 16px 0 0;
}

@media (max-width: 768px) {
	.ktt-gate .ktt-gate__title { font-size: 21px; }
}