/**
 * Data-Mania Lead Magnet Experiments — frontend styles.
 *
 * Implements "Lead Magnet Block + Modal.dc.html" against the Data-Mania design
 * system. Tokens are namespaced (--dml-*) and scoped to the plugin's own roots
 * so they cannot leak into or be clobbered by the theme, but they carry the same
 * values as the design system's tokens/colors.css, typography.css and spacing.css.
 *
 * The block sits inside article content, which is far narrower than the 1000px
 * canvas the mock was drawn on. Layout therefore keys off CONTAINER width, not
 * viewport: the two-column arrangement appears only when the article column is
 * actually wide enough for it, and collapses to a single column otherwise.
 *
 * Every variant renders through this same stylesheet. Only copy differs.
 */

.dm-lme-slot,
.dm-lme-modal {
	/* ── Brand ── */
	--dml-primary: #e7c379;        /* warm gold */
	--dml-secondary: #be5c00;      /* burnt orange, CTA */
	--dml-secondary-dark: #9b4a00;
	--dml-secondary-soft: #f8d9ac;
	--dml-muted-gold: #d5bd91;     /* filled-button hover */

	/* ── Neutrals ── */
	--dml-black: #000;
	--dml-ink: #1a1a1a;
	--dml-ink-soft: #555;
	--dml-ink-muted: #8c8c8c;
	--dml-line: #cfcdc9;
	--dml-neutral: #ececec;
	--dml-white: #fff;

	/* ── Warm backgrounds ── */
	--dml-bg-subtle: #f0eeec;

	/* ── Type ── */
	--dml-font-heading: 'Oswald', sans-serif;
	--dml-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Slot ─────────────────────────────────────────────────────────────── */

.dm-lme-slot {
	display: block;
	container-type: inline-size;
	container-name: dmlme;
	margin: 2.5rem 0;
	min-height: 20rem; /* Reserved so the article does not jump when JS paints. */
}

.dm-lme-slot *,
.dm-lme-modal * {
	box-sizing: border-box;
}

/* ── Block ────────────────────────────────────────────────────────────── */

.dm-lme-block {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 32px;
	background: var(--dml-white);
	border: 1px solid var(--dml-line);
	border-radius: 0;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
	font-family: var(--dml-font-body);
	color: var(--dml-ink);
	text-align: left;
}

/* Two columns only once the article column can genuinely hold them. */
@container dmlme (min-width: 680px) {
	.dm-lme-block {
		flex-direction: row;
		align-items: stretch;
		gap: 44px;
		padding: 44px;
	}
}

.dm-lme-block__body {
	flex: 1;
	min-width: 0;
}

/* ── Eyebrow ──────────────────────────────────────────────────────────── */

.dm-lme-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
}

.dm-lme-eyebrow__rule {
	width: 18px;
	height: 1px;
	background: var(--dml-secondary);
	flex: 0 0 auto;
}

.dm-lme-eyebrow__text {
	font-family: var(--dml-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--dml-secondary);
}

/* ── Headline + sub ───────────────────────────────────────────────────── */

.dm-lme-slot .dm-lme-block__headline,
.dm-lme-block__headline {
	/* Scoped as well as plain: OceanWP ships a bare `h3 { font-family: Roboto }`
	   and other themes do similar, so the heading is pinned explicitly. */
	font-family: var(--dml-font-heading);
	font-weight: 500;
	/* The mock is 46px on a 1000px canvas. Scale with the container so it stays
	   proportionate in a narrow article column. */
	font-size: clamp(28px, 5.6cqi, 46px);
	line-height: 1.08;
	text-transform: uppercase;
	letter-spacing: 0;
	margin: 0 0 18px;
	color: var(--dml-ink);
	text-wrap: pretty;
}

.dm-lme-block__sub {
	font-family: var(--dml-font-body);
	font-size: clamp(16px, 2.1cqi, 18px);
	font-weight: 400;
	line-height: 1.6;
	color: var(--dml-ink-soft);
	margin: 0 0 22px;
	max-width: 46ch;
	text-wrap: pretty;
}

/* ── Proof line ───────────────────────────────────────────────────────── */

.dm-lme-proof {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border-top: 1px solid var(--dml-line);
	padding-top: 18px;
	margin: 0 0 26px;
}

.dm-lme-proof__tick {
	font-family: var(--dml-font-heading);
	font-size: 15px;
	line-height: 1.5;
	color: var(--dml-secondary);
	flex: 0 0 auto;
}

.dm-lme-proof__text {
	font-family: var(--dml-font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--dml-ink-soft);
	margin: 0;
	max-width: 48ch;
}

/* ── Buttons (Data-Mania design system Button) ────────────────────────── */

.dm-lme-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--dml-font-body);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	white-space: normal;
	transition: transform 0.12s ease, filter 0.18s ease, background 0.18s ease, color 0.18s ease;
	min-height: 44px;
}

.dm-lme-btn--lg {
	font-size: 11px;
	letter-spacing: 1.8px;
	padding: 17px 40px;
}

.dm-lme-btn--md {
	font-size: 9px;
	letter-spacing: 1.5px;
	padding: 13px 30px;
}

/**
 * Colour rules are scoped to the plugin roots and stack two real classes.
 *
 * Elementor prints its kit stylesheet inline in <head> (css_print_method = internal),
 * which lands AFTER this file, and it contains:
 *
 *   .elementor-kit-5480 button            { background:#BE5C00; color:#FFFFFF }   (0,1,1)
 *   .elementor-kit-5480 button:hover      { background:#D5BD90; color:#FFFFFF }   (0,2,1)
 *
 * A plain .dm-lme-btn--primary (0,1,0) loses to both. Left alone that repaints the
 * modal close X as a solid orange block, flattens the outline button to solid orange,
 * and forces white text onto the gold hover (about 1.9:1 contrast). Scoping to
 * (0,3,0) / (0,3,1) clears it without needing !important, so these stay overridable.
 */
.dm-lme-slot .dm-lme-btn.dm-lme-btn--primary,
.dm-lme-modal .dm-lme-btn.dm-lme-btn--primary {
	background: var(--dml-secondary);
	color: var(--dml-white);
	border: 1px solid var(--dml-black);
}

/* Live-site behaviour: filled buttons swap to muted gold with BLACK text. */
.dm-lme-slot .dm-lme-btn.dm-lme-btn--primary:hover,
.dm-lme-slot .dm-lme-btn.dm-lme-btn--primary:focus-visible,
.dm-lme-modal .dm-lme-btn.dm-lme-btn--primary:hover,
.dm-lme-modal .dm-lme-btn.dm-lme-btn--primary:focus-visible {
	background: var(--dml-muted-gold);
	color: var(--dml-black);
}

/* A disabled submit must not pick up the hover treatment mid-request. */
.dm-lme-modal .dm-lme-btn.dm-lme-btn--primary[disabled],
.dm-lme-modal .dm-lme-btn.dm-lme-btn--primary[disabled]:hover {
	background: var(--dml-secondary);
	color: var(--dml-white);
}

.dm-lme-slot .dm-lme-btn.dm-lme-btn--outline,
.dm-lme-modal .dm-lme-btn.dm-lme-btn--outline {
	background: transparent;
	color: var(--dml-secondary);
	border: 1px solid var(--dml-secondary);
}

.dm-lme-slot .dm-lme-btn.dm-lme-btn--outline:hover,
.dm-lme-slot .dm-lme-btn.dm-lme-btn--outline:focus-visible,
.dm-lme-modal .dm-lme-btn.dm-lme-btn--outline:hover,
.dm-lme-modal .dm-lme-btn.dm-lme-btn--outline:focus-visible {
	background: transparent;
	color: var(--dml-secondary);
	filter: brightness(0.93);
}

.dm-lme-btn:active {
	transform: scale(0.96);
}

.dm-lme-btn:focus-visible {
	outline: 3px solid var(--dml-ink);
	outline-offset: 2px;
}

.dm-lme-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.dm-lme-btn--full {
	display: flex;
	width: 100%;
}

/* ── Left panel: artifact preview ─────────────────────────────────────── */

.dm-lme-panel {
	position: relative;
	flex: 0 0 288px;
	min-height: 400px;
	display: flex;
}

/* Stacked layout: cap the panel height so it does not dominate the article. */
@container dmlme (max-width: 679px) {
	.dm-lme-panel {
		flex: none;
		min-height: 320px;
		max-width: 288px;
	}
}

.dm-lme-panel--artifact {
	background: var(--dml-bg-subtle);
	border: 1px solid var(--dml-line);
	padding: 18px;
}

.dm-lme-panel__kicker {
	position: absolute;
	top: 0;
	left: 22px;
	transform: translateY(-50%);
	background: var(--dml-secondary);
	color: var(--dml-white);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 6px 12px;
	z-index: 2;
	max-width: calc(100% - 44px);
}

.dm-lme-cover {
	flex: 1;
	position: relative;
	background: var(--dml-white);
	box-shadow: 0 6px 18px rgba(74, 46, 0, 0.14);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.dm-lme-cover__head {
	background: var(--dml-black);
	color: var(--dml-white);
	padding: 20px 18px 16px;
}

.dm-lme-cover__rule {
	width: 26px;
	height: 2px;
	background: var(--dml-primary);
	margin-bottom: 12px;
}

.dm-lme-cover__title {
	font-family: var(--dml-font-heading);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.06;
	text-transform: uppercase;
}

.dm-lme-cover__inner {
	padding: 16px 18px 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.dm-lme-cover__row-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 6px;
}

.dm-lme-cover__label {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--dml-ink);
	line-height: 1.45;
}

.dm-lme-cover__value {
	font-family: var(--dml-font-heading);
	font-size: 11px;
	color: var(--dml-secondary);
}

.dm-lme-cover__track {
	height: 6px;
	background: var(--dml-neutral);
}

.dm-lme-cover__fill {
	height: 6px;
	background: var(--dml-secondary);
}

.dm-lme-cover__lines {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 2px;
}

.dm-lme-cover__lines--second {
	margin-top: 10px;
}

.dm-lme-cover__line {
	height: 5px;
	background: var(--dml-neutral);
}

.dm-lme-cover__line--accent {
	height: 7px;
	background: var(--dml-primary);
	margin-bottom: 4px;
}

.dm-lme-cover__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 88px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 72%);
}

/* ── Left panel: number poster ────────────────────────────────────────── */

.dm-lme-panel--poster {
	background: var(--dml-black);
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 22px 22px;
	flex-direction: column;
	justify-content: space-between;
	padding: 30px 24px 28px;
}

.dm-lme-poster__big {
	font-family: var(--dml-font-heading);
	font-weight: 500;
	font-size: 116px;
	line-height: 0.84;
	color: var(--dml-white);
	letter-spacing: -1px;
}

.dm-lme-poster__word {
	font-family: var(--dml-font-heading);
	font-weight: 500;
	font-size: 52px;
	line-height: 0.96;
	text-transform: uppercase;
	color: var(--dml-white);
}

.dm-lme-poster__rule {
	width: 34px;
	height: 3px;
	background: var(--dml-primary);
	margin-bottom: 16px;
}

.dm-lme-poster__small {
	font-family: var(--dml-font-heading);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--dml-white);
}

.dm-lme-poster__byline {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.62);
	margin: 12px 0 0;
	letter-spacing: 0.4px;
}

/* ── Modal ────────────────────────────────────────────────────────────── */

.dm-lme-modal[hidden] {
	display: none;
}

.dm-lme-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px;
	overflow-y: auto;
	font-family: var(--dml-font-body);
}

.dm-lme-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(3px);
}

.dm-lme-modal__panel {
	position: relative;
	width: 100%;
	max-width: 540px;
	margin: auto;
	background: var(--dml-white);
	border: 1px solid var(--dml-line);
	border-radius: 0;
	box-shadow: 0 18px 48px rgba(74, 46, 0, 0.28);
	padding: 40px;
	color: var(--dml-ink);
	animation: dmLmeRise 0.18s ease both;
}

@keyframes dmLmeRise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.dm-lme-modal__panel { animation: none; }
	.dm-lme-btn { transition: none; }
	.dm-lme-btn:active { transform: none; }
}

/* Scoped past the Elementor kit's blanket `button` fill, same reason as the
   buttons above. Without this the close control is a solid orange square. */
.dm-lme-modal .dm-lme-modal__panel .dm-lme-modal__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--dml-ink-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	font-family: var(--dml-font-body);
}

.dm-lme-modal .dm-lme-modal__panel .dm-lme-modal__close:hover,
.dm-lme-modal .dm-lme-modal__panel .dm-lme-modal__close:focus-visible {
	background: transparent;
	color: var(--dml-ink);
}

.dm-lme-modal__head {
	display: flex;
	gap: 18px;
	align-items: center;
	margin: 0 0 24px;
	padding-right: 34px;
}

.dm-lme-modal__eyebrow {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--dml-secondary);
	margin: 0 0 8px;
}

.dm-lme-modal .dm-lme-modal__title,
.dm-lme-modal__title {
	font-family: var(--dml-font-heading);
	font-weight: 500;
	font-size: 27px;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0;
	color: var(--dml-ink);
}

.dm-lme-modal__sub {
	font-size: 16px;
	line-height: 1.6;
	color: var(--dml-ink-soft);
	margin: 0 0 22px;
}

/* Mini cover inside the modal head */
.dm-lme-mini {
	position: relative;
	flex: 0 0 76px;
	height: 100px;
	overflow: hidden;
	background: var(--dml-white);
	border: 1px solid var(--dml-line);
	box-shadow: 0 4px 12px rgba(74, 46, 0, 0.12);
}

.dm-lme-mini__head {
	background: var(--dml-black);
	color: var(--dml-white);
	padding: 8px 8px 7px;
}

.dm-lme-mini__rule {
	width: 14px;
	height: 2px;
	background: var(--dml-primary);
	margin-bottom: 5px;
}

.dm-lme-mini__title {
	font-family: var(--dml-font-heading);
	font-weight: 500;
	font-size: 8px;
	line-height: 1.05;
	text-transform: uppercase;
}

.dm-lme-mini__body {
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.dm-lme-mini__line {
	height: 3px;
	background: var(--dml-neutral);
}

.dm-lme-mini__line--accent {
	background: var(--dml-secondary);
}

.dm-lme-mini--poster {
	background: var(--dml-black);
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 14px 14px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 10px;
	border: 0;
}

.dm-lme-mini--poster .dm-lme-mini__title {
	font-size: 11px;
	color: var(--dml-white);
}

/* ── "What's inside" ──────────────────────────────────────────────────── */

.dm-lme-inside {
	border: 1px solid var(--dml-line);
	padding: 20px 22px;
	margin: 0 0 24px;
	background: var(--dml-bg-subtle);
}

.dm-lme-inside__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--dml-ink);
	margin: 0 0 14px;
}

.dm-lme-inside__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dm-lme-inside__item {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 10px;
	align-items: start;
	margin: 0;
}

.dm-lme-inside__tick {
	font-family: var(--dml-font-heading);
	font-size: 13px;
	color: var(--dml-secondary);
	line-height: 1.6;
}

.dm-lme-inside__text {
	font-size: 14px;
	line-height: 1.55;
	color: var(--dml-ink);
}

/* ── Form ─────────────────────────────────────────────────────────────── */

.dm-lme-field {
	margin: 0 0 6px;
}

.dm-lme-field__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--dml-ink);
	margin: 0 0 8px;
}

.dm-lme-field__input {
	display: block;
	width: 100%;
	font-family: var(--dml-font-body);
	font-size: 16px; /* 16px stops iOS zooming on focus. */
	line-height: 1.4;
	padding: 15px 16px;
	border: 1.5px solid var(--dml-line);
	border-radius: 0;
	background: var(--dml-white);
	color: var(--dml-ink);
	outline: none;
	min-height: 44px;
}

.dm-lme-field__input:focus {
	border-color: var(--dml-secondary);
	box-shadow: 0 0 0 3px rgba(190, 92, 0, 0.12);
}

.dm-lme-error {
	font-size: 13px;
	line-height: 1.5;
	color: var(--dml-secondary-dark);
	margin: 8px 0 0;
	min-height: 1.2em;
}

.dm-lme-error:empty {
	margin: 0;
	min-height: 0;
}

.dm-lme-submit-wrap {
	margin-top: 18px;
}

.dm-lme-modal__proof {
	font-size: 13px;
	line-height: 1.6;
	color: var(--dml-ink-soft);
	margin: 16px 0 0;
}

.dm-lme-timing {
	font-size: 12px;
	line-height: 1.6;
	color: var(--dml-ink-muted);
	margin: 10px 0 0;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.dm-lme-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Success ──────────────────────────────────────────────────────────── */

.dm-lme-success {
	text-align: left;
	padding: 8px 0;
}

.dm-lme-success__mark {
	width: 44px;
	height: 44px;
	background: var(--dml-secondary);
	color: var(--dml-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--dml-font-heading);
	font-size: 22px;
	margin-bottom: 20px;
}

.dm-lme-modal .dm-lme-success__title,
.dm-lme-success__title {
	font-family: var(--dml-font-heading);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 12px;
	color: var(--dml-ink);
}

.dm-lme-success__body {
	font-size: 16px;
	line-height: 1.65;
	color: var(--dml-ink-soft);
	margin: 0 0 24px;
}

/* Stop background scroll while the modal is open. */
html.dm-lme-modal-open,
html.dm-lme-modal-open body {
	overflow: hidden;
}

/* ── Inline capture ───────────────────────────────────────────────────── */

/*
 * Used inside popups, where a CTA that opened another dialog would be a modal
 * within a modal. The email field sits directly in the block and the whole
 * thing swaps to a confirmation in place.
 */
.dm-lme-inline {
	max-width: 460px;
}

.dm-lme-inline__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-start;
}

.dm-lme-inline__input {
	flex: 1 1 240px;
	min-width: 0;
	font-family: var(--dml-font-body);
	font-size: 16px; /* 16px stops iOS zooming on focus. */
	line-height: 1.4;
	padding: 15px 16px;
	border: 1.5px solid var(--dml-line);
	border-radius: 0;
	background: var(--dml-white);
	color: var(--dml-ink);
	outline: none;
	min-height: 54px;
}

.dm-lme-inline__input:focus {
	border-color: var(--dml-secondary);
	box-shadow: 0 0 0 3px rgba(190, 92, 0, 0.12);
}

.dm-lme-inline__error {
	font-size: 13px;
	line-height: 1.5;
	color: var(--dml-secondary-dark);
	margin: 8px 0 0;
}

.dm-lme-inline__error:empty {
	margin: 0;
}

.dm-lme-inline__timing {
	font-size: 13px;
	line-height: 1.6;
	color: var(--dml-ink-muted);
	margin: 12px 0 0;
}

.dm-lme-inline__done {
	border: 1px solid var(--dml-secondary);
	background: var(--dml-secondary-soft);
	padding: 20px 22px;
	animation: dmLmeRise 0.18s ease both;
}

.dm-lme-inline__done-title {
	font-family: var(--dml-font-heading);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.15;
	text-transform: uppercase;
	margin-bottom: 6px;
	color: var(--dml-ink);
}

.dm-lme-inline__done-body {
	font-size: 14px;
	line-height: 1.6;
	color: var(--dml-ink);
	margin: 0;
}

@media (max-width: 600px) {
	.dm-lme-inline__row .dm-lme-btn {
		width: 100%;
	}
}

/* ── Popup placement ──────────────────────────────────────────────────── */

/*
 * Inside an Elementor popup the dialog already supplies the frame, the padding
 * and the scroll container, so the slot drops its article-flow margins and its
 * reserved height.
 *
 * The width cap matters: the design was drawn on a 1000px canvas. In a
 * full-screen popup the block would otherwise stretch to the full viewport and
 * the two columns would drift far apart, so it is capped and centred to
 * reproduce the mock at any dialog size.
 */
.dm-lme-slot--popup {
	margin: 0;
	min-height: 0;
}

.dm-lme-slot--popup .dm-lme-block {
	max-width: 1000px;
	margin-inline: auto;
	box-shadow: none;
}

/* Full-screen dialogs: keep the block off the viewport edges and vertically
   centred rather than pinned to the top. */
@container dmlme (min-width: 1040px) {
	.dm-lme-slot--popup .dm-lme-block {
		padding: 48px;
	}
}

/* ── Narrow placements (sidebar rail) ─────────────────────────────────── */

/*
 * A sidebar column is roughly 300-360px. Because layout keys off container
 * width, the compact treatment below kicks in automatically wherever the block
 * is dropped, so a sidebar, a narrow footer rail and a half-width container all
 * behave sensibly without separate markup.
 */
.dm-lme-slot--sidebar {
	margin: 0 0 2rem;
	min-height: 16rem;
}

/* Optional: let the rail follow the reader. Add this class in Elementor. */
.dm-lme-slot--sidebar.is-sticky {
	position: sticky;
	top: 24px;
}

@container dmlme (max-width: 430px) {
	/* The cover panel stops earning its space here: it would push the headline
	   and button out of view in a sidebar column. */
	.dm-lme-panel {
		display: none;
	}

	.dm-lme-block {
		padding: 22px 20px;
		gap: 18px;
	}

	.dm-lme-block__headline {
		font-size: clamp(20px, 8cqi, 26px);
		margin-bottom: 14px;
	}

	.dm-lme-block__sub {
		font-size: 15px;
		margin-bottom: 18px;
	}

	.dm-lme-proof {
		padding-top: 14px;
		margin-bottom: 20px;
	}

	.dm-lme-proof__text {
		font-size: 13px;
	}

	.dm-lme-block__cta {
		width: 100%;
		padding: 15px 20px;
	}
}

/* ── Mobile ───────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.dm-lme-slot {
		margin: 2rem 0;
		min-height: 22rem;
	}

	.dm-lme-block {
		padding: 24px 20px;
		gap: 24px;
	}

	.dm-lme-block__cta {
		width: 100%;
	}

	.dm-lme-modal {
		padding: 0;
		align-items: flex-end;
	}

	.dm-lme-modal__panel {
		max-width: none;
		max-height: 94vh;
		overflow-y: auto;
		padding: 32px 20px 24px;
	}

	.dm-lme-modal__head {
		gap: 14px;
	}

	.dm-lme-modal__title {
		font-size: 23px;
	}

	.dm-lme-success__title {
		font-size: 26px;
	}
}

/* ── Admin debug panel ────────────────────────────────────────────────── */

.dm-lme-debug {
	position: fixed;
	bottom: 12px;
	left: 12px;
	z-index: 1000000;
	max-width: 22rem;
	padding: 12px 14px;
	background: #1a1a1a;
	color: #f4efe8;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	line-height: 1.6;
	border-left: 4px solid #be5c00;
}

.dm-lme-debug strong {
	display: block;
	margin-bottom: 6px;
	color: #e7c379;
}