/* codex-email-capture v1.1.0 — Maison Santé brand styling
 *
 * Brand tokens
 *   --cec-brand:       #3e4c44  (deep sage — primary button bg)
 *   --cec-brand-hover: #2f3a34
 *   --cec-ink:         #1d2520  (heading text)
 *   --cec-body:        #4a554f  (body text)
 *   --cec-muted:       #7a8580  (disclaimer)
 *   --cec-line:        #d8ddda  (borders)
 *   --cec-soft:        #f5f3ee  (panel tints)
 *   --cec-page:        #ffffff
 *   --cec-font-body:   Jost
 *   --cec-font-head:   Marcellus
 */

:root {
	--cec-brand:       #3e4c44;
	--cec-brand-hover: #2f3a34;
	--cec-ink:         #1d2520;
	--cec-body:        #4a554f;
	--cec-muted:       #7a8580;
	--cec-line:        #d8ddda;
	--cec-soft:        #f5f3ee;
	--cec-page:        #ffffff;
}

/* ------------------------------- Pill ------------------------------- */
.cec-pill {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 2147483646;
	display: none;
	min-width: 180px;
	padding: 14px 44px 14px 22px;
	margin: 0;
	border: 0;
	background: var(--cec-brand);
	color: #fff;
	font: 600 14px/1.3 "Jost", system-ui, -apple-system, sans-serif;
	letter-spacing: -.28px;
	text-align: left;
	border-radius: 8px;
	box-shadow: 0 8px 28px rgba(29,37,32,.22), 0 2px 6px rgba(29,37,32,.12);
	cursor: pointer;
	transform: translateY(8px);
	opacity: 0;
	transition: transform .25s ease, opacity .25s ease, background .15s ease;
}
.cec-pill.is-visible { display: inline-flex; align-items: center; opacity: 1; transform: translateY(0); }
.cec-pill:hover { background: var(--cec-brand-hover); }
.cec-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.cec-pill__close {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.18);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cec-pill__close:hover { background: rgba(255,255,255,.32); }

html[dir="rtl"] .cec-pill,
body.rtl .cec-pill {
	left: auto;
	right: 24px;
	text-align: right;
	padding: 14px 22px 14px 44px;
}
html[dir="rtl"] .cec-pill__close,
body.rtl .cec-pill__close { right: auto; left: 10px; }

/* ----------------------------- Backdrop ----------------------------- */
.cec-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2147483647;
	background: rgba(29,37,32,.6);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .2s ease;
}
.cec-backdrop.is-open { display: flex; opacity: 1; }

/* ----------------------------- Modal ------------------------------- *
 * Stability rules
 *   1. Modal width is fixed (760px desktop / 360px mobile)
 *   2. Modal height is fixed (440px desktop / 540px mobile) — NO shape-shifting between states
 *   3. Body never scrolls — content is sized to fit by design
 *   4. Image pane has aspect-ratio: 1/1 and overflow:hidden — no jump on background-image load
 *   5. Success state replaces inner contents in-place; outer dimensions identical
 */
.cec-modal {
	position: relative;
	width: 760px;
	max-width: 100%;
	height: 440px;
	max-height: 92vh;
	background: var(--cec-page);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(29,37,32,.35);
	display: grid;
	grid-template-columns: 360px 1fr;
	transform: translateY(8px) scale(.985);
	transition: transform .22s ease;
}
.cec-backdrop.is-open .cec-modal { transform: translateY(0) scale(1); }

.cec-modal__image {
	position: relative;
	background-color: var(--cec-soft);
	background-size: cover;
	background-position: center;
	width: 360px;
	height: 100%;
	flex-shrink: 0;
}

.cec-modal__body {
	position: relative;
	padding: 40px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	overflow: hidden;
	min-width: 0;
}

.cec-modal__heading {
	margin: 0;
	font: 400 26px/1.15 "Marcellus", "Times New Roman", serif;
	color: var(--cec-ink);
	letter-spacing: -.005em;
}
.cec-modal__lede {
	margin: 0;
	font: 400 14px/1.55 "Jost", system-ui, sans-serif;
	color: var(--cec-body);
	letter-spacing: -.005em;
}

.cec-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 6px 0 0;
}
.cec-form__label { display: none; }

.cec-form__input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--cec-line);
	border-radius: 8px;
	font: 400 14px/1.4 "Jost", system-ui, sans-serif;
	background: #fff;
	color: var(--cec-ink);
	box-sizing: border-box;
	letter-spacing: -.28px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cec-form__input::placeholder { color: var(--cec-muted); }
.cec-form__input:focus {
	outline: 0;
	border-color: var(--cec-brand);
	box-shadow: 0 0 0 3px rgba(62,76,68,.14);
}
.cec-form__input[aria-invalid="true"] { border-color: #b04545; }

.cec-form__hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.cec-form__submit {
	width: 100%;
	padding: 15px 36px;
	border: 0;
	border-radius: 8px;
	background: var(--cec-brand);
	color: #fff;
	font: 600 14px/1 "Jost", system-ui, sans-serif;
	letter-spacing: -.28px;
	cursor: pointer;
	transition: background .15s ease;
}
.cec-form__submit:hover { background: var(--cec-brand-hover); }
.cec-form__submit:disabled { opacity: .55; cursor: not-allowed; }

.cec-form__error {
	margin: 0;
	color: #b04545;
	font: 400 12px/1.4 "Jost", system-ui, sans-serif;
	min-height: 16px;
}

.cec-form__disclaimer {
	margin: 8px 0 0;
	color: var(--cec-muted);
	font: 400 11px/1.5 "Jost", system-ui, sans-serif;
	letter-spacing: -.005em;
}

.cec-form__legal-link {
	color: var(--cec-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cec-form__legal-link:hover { color: var(--cec-ink); }

/* ----------------------------- Success state ------------------------ *
 * Drops INTO the existing .cec-modal__body. Outer modal stays 760×440.
 */
.cec-success {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 0 4px;
	height: 100%;
	box-sizing: border-box;
}
.cec-success__heading {
	margin: 0;
	font: 400 24px/1.2 "Marcellus", "Times New Roman", serif;
	color: var(--cec-ink);
}
.cec-success__lede {
	margin: 0;
	color: var(--cec-body);
	font: 400 14px/1.55 "Jost", system-ui, sans-serif;
}
.cec-success__code {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 22px 10px;
	border: 1.5px dashed var(--cec-brand);
	border-radius: 8px;
	background: var(--cec-soft);
	color: var(--cec-brand);
	font: 600 17px/1.1 ui-monospace, "SFMono-Regular", "Menlo", monospace;
	letter-spacing: .06em;
	margin: 4px 0 6px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .12s ease;
	-webkit-user-select: all;
	user-select: all;
}
.cec-success__code:hover { background: #ece9e0; }
.cec-success__code:active { transform: scale(.98); }
.cec-success__code:focus-visible { outline: 2px solid var(--cec-brand); outline-offset: 2px; }
.cec-success__code.is-copied { background: var(--cec-brand); color: #fff; border-color: var(--cec-brand); }
.cec-success__code-hint {
	font: 500 10px/1 "Jost", system-ui, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .72;
	color: inherit;
}
.cec-success__cta {
	display: inline-block;
	padding: 14px 32px;
	background: var(--cec-brand);
	color: #fff;
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	font: 600 14px/1 "Jost", system-ui, sans-serif;
	letter-spacing: -.28px;
	cursor: pointer;
	transition: background .15s ease;
}
.cec-success__cta:hover { background: var(--cec-brand-hover); color: #fff; }
.cec-success__cta:focus-visible { outline: 2px solid var(--cec-brand); outline-offset: 2px; }
.cec-success__hint {
	margin: 6px 0 0;
	color: var(--cec-muted);
	font: 400 11px/1.5 "Jost", system-ui, sans-serif;
}

/* ----------------------------- Close button ------------------------- */
.cec-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(29,37,32,.06);
	color: var(--cec-ink);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background .15s ease, color .15s ease;
}
.cec-modal__close:hover { background: rgba(29,37,32,.14); }
.cec-modal__close:focus-visible { outline: 2px solid var(--cec-brand); outline-offset: 2px; }

/* ----------------------------- Mobile ------------------------------
 * Hero image earns ~50% of card height (Codex: "On mobile, one thing
 * gets to be big"). Form rhythm tightened: 44px input/button heights,
 * 8px gap, single-line heading at 24-25px max-width to avoid wrap.
 */
/* ------------------------------------------------------------------------
 * Mobile (≤959px) — Codex emergency rewrite v1.6.1
 *
 * Lessons:
 *   1. Fixed modal height + fixed image-row height = guaranteed clipping when
 *      content varies (form vs success states). Use `height: auto` clamped by
 *      `max-height: 100svh - 24px`.
 *   2. `overflow: hidden` on .cec-modal__body would clip success copy. Instead,
 *      give body `min-height: 0` so grid distributes space, and let the modal's
 *      `overflow: hidden` handle the rounded corners only.
 *   3. Image MUST have explicit height + aspect-ratio, NOT just height-only,
 *      so it can never collapse OR balloon.
 *   4. Disclaimer / footer hint get `padding-bottom` (cannot escape) instead of
 *      relying on the parent's bottom padding.
 * ------------------------------------------------------------------------ */
@media (max-width: 959px) {
	.cec-modal {
		width: min(92vw, 420px);
		max-width: calc(100vw - 24px);
		height: auto;
		max-height: calc(100svh - 24px);
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 220px minmax(0, auto);
		overflow: hidden;
	}
	.cec-modal__image {
		width: 100%;
		height: 220px;
		aspect-ratio: 420 / 220;
		background-color: var(--cec-soft);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
	.cec-modal__body {
		position: relative;
		min-height: 0;
		padding: 24px 24px 28px;
		display: grid;
		align-content: center;
		gap: 10px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* Close button is now a direct child of .cec-modal (moved in JS v1.6.2),
	 * so its absolute position references the modal's outer rounded corner —
	 * lands cleanly over the image pane. */
	.cec-modal__close {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 36px;
		height: 36px;
		z-index: 5;
		background: rgba(255,255,255,.94);
		color: var(--cec-ink);
		box-shadow: 0 2px 8px rgba(29,37,32,.18);
	}
	.cec-modal__close:hover { background: #fff; }
	.cec-modal__heading {
		font-size: 24px;
		line-height: 1.06;
		max-width: calc(100% - 8px);
		margin-bottom: 2px;
	}
	.cec-modal__lede {
		font-size: 14px;
		line-height: 1.4;
		margin-bottom: 4px;
	}
	.cec-form,
	.cec-success {
		display: grid;
		gap: 10px;
		min-height: 0;
	}
	.cec-form__input {
		font-size: 14px;
		padding: 12px 14px;
		min-height: 44px;
	}
	.cec-form__error {
		min-height: 14px;
		font-size: 11px;
		line-height: 14px;
		margin: -2px 0 0;
	}
	.cec-form__submit {
		min-height: 44px;
		padding: 12px 20px;
		font-size: 14px;
		line-height: 1;
	}
	.cec-form__disclaimer,
	.cec-success__hint {
		font-size: 10.5px;
		line-height: 1.4;
		margin-top: 6px;
		margin-bottom: 0;
		padding-bottom: 16px;
	}
	.cec-success__heading { font-size: 24px; line-height: 1.08; }
}

/* Phones (≤569px) — narrower modal, smaller image */
@media (max-width: 569px) {
	.cec-modal {
		width: min(92vw, 335px);
		grid-template-rows: 188px minmax(0, auto);
	}
	.cec-modal__image {
		height: 188px;
		aspect-ratio: 335 / 188;
	}
	.cec-modal__body {
		padding: 22px 22px 28px;
		gap: 9px;
	}
	.cec-modal__heading {
		font-size: 23px;
		line-height: 1.06;
	}
	.cec-pill {
		bottom: 16px;
		left: 16px;
		min-width: 156px;
		padding: 13px 38px 13px 18px;
		font-size: 13px;
		line-height: 1.2;
	}
	html[dir="rtl"] .cec-pill,
	body.rtl .cec-pill { left: auto; right: 16px; padding: 13px 18px 13px 38px; }
}

/* Short-screen (landscape phone, height ≤620px) — even smaller image */
@media (max-width: 959px) and (max-height: 620px) {
	.cec-modal {
		grid-template-rows: 148px minmax(0, auto);
	}
	.cec-modal__image {
		height: 148px;
		aspect-ratio: 420 / 148;
	}
	.cec-modal__body {
		align-content: start;
		padding-top: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cec-pill, .cec-backdrop, .cec-modal { transition: none; }
}