/**
 * Rentamira Promo Calendar — Floating teaser.
 * Persistent, discreet, user-initiated. Never auto-opens, never blocks content.
 */

.rpc-teaser {
	--tz-bg: #2D4A5E;
	--tz-text: #FFFFFF;
	--tz-accent: #2D4A5E;
	--tz-card-bg: #FFFFFF;
	--tz-card-text: #2A2A2A;
	--tz-chip-radius: 999px;
	--tz-card-radius: 14px;
	--tz-el-radius: 8px;
	--tz-ease: cubic-bezier(0.4, 0, 0.2, 1);

	position: fixed;
	bottom: 22px;
	right: 22px;
	/* Above third-party chat widgets (LeadConnector, Intercom, etc.) so their
	   open bubble never blocks the chip's tap target. */
	z-index: 2147483000;
	/* The closed card keeps opacity:0 but still occupies layout, so this fixed
	   box can span a large (near full-width on mobile) region. Make the
	   container transparent to pointer events so it never blocks the page
	   behind it; only the chip and the OPEN card re-enable hits below. */
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	/* No font-family on the container by design: fonts are set per section
	   (chip label, eyebrow, title, body copy) via their own tokens, so the
	   embedded form (rpc-teaser__gate) keeps the site/plugin font untouched. */
	font-family: inherit;

	/* Entrance: hidden until JS adds .is-shown (fade + slide up). */
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 320ms var(--tz-ease), transform 320ms var(--tz-ease);
}

.rpc-teaser.is-shown {
	opacity: 1;
	transform: translateY(0);
}

.rpc-teaser *,
.rpc-teaser *::before,
.rpc-teaser *::after { box-sizing: border-box; }

.rpc-teaser[hidden] { display: none; }

/* Set by the runtime when a page is excluded for mobile only and the window is
   currently mobile-sized. Hidden rather than removed so widening the window
   restores the already-wired teaser without a reload. */
.rpc-teaser-stack--hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.rpc-teaser {
		transition: opacity 200ms linear;
		transform: none;
	}
}

.rpc-teaser--left {
	right: auto;
	left: 22px;
	align-items: flex-start;
}

/* Shape variants */
.rpc-teaser--rounded { --tz-chip-radius: 10px; }
.rpc-teaser--sharp   { --tz-chip-radius: 0; --tz-card-radius: 0; --tz-el-radius: 0; }

/* ============== CHIP ============== */

.rpc-teaser button.rpc-teaser__chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--tz-bg);
	color: var(--tz-text);
	border: none;
	border-radius: var(--tz-chip-radius);
	padding: 11px 18px;
	margin: 0;
	line-height: 1;
	/* Chip label font, size, weight, spacing, case and slant are all
	   token-driven so the admin can style the chip independently of the card. */
	font-size: var(--tz-size-chip, 13px);
	font-weight: var(--tz-weight-chip, 600);
	letter-spacing: var(--tz-ls-chip, 0.05em);
	font-family: var(--tz-font-chip, inherit);
	cursor: pointer;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
	transition: transform 220ms var(--tz-ease), box-shadow 220ms var(--tz-ease);
	text-transform: var(--tz-transform-chip, none);
	font-style: var(--tz-style-chip, normal);
}

.rpc-teaser button.rpc-teaser__chip:hover,
.rpc-teaser button.rpc-teaser__chip:focus {
	background: var(--tz-bg);
	color: var(--tz-text);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
	outline: none;
}

.rpc-teaser button.rpc-teaser__chip:focus-visible {
	outline: 2px solid var(--tz-bg);
	outline-offset: 3px;
}

.rpc-teaser__chip-icon {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.rpc-teaser__chip-count {
	background: rgba(255, 255, 255, 0.22);
	border-radius: var(--tz-chip-radius);
	padding: 4px 9px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.rpc-teaser--sharp .rpc-teaser__chip-count,
.rpc-teaser--rounded .rpc-teaser__chip-count { border-radius: calc(var(--tz-chip-radius) / 2); }

/* Animations */
@keyframes tz-breathe {
	0%, 86%, 100% { transform: scale(1); }
	90% { transform: scale(1.045); }
	94% { transform: scale(1); }
	97% { transform: scale(1.03); }
}
@keyframes tz-bounce {
	0%, 86%, 100% { transform: translateY(0); }
	89% { transform: translateY(-8px); }
	93% { transform: translateY(0); }
	95.5% { transform: translateY(-4px); }
	98% { transform: translateY(0); }
}
/* Animate the whole chip wrapper so the remove ✕ moves with the chip. */
.rpc-teaser__chip-wrap.anim-breathe { animation: tz-breathe 7s ease-in-out infinite; }
.rpc-teaser__chip-wrap.anim-bounce  { animation: tz-bounce 7s ease-in-out infinite; }
.rpc-teaser__chip-wrap.anim-breathe:hover,
.rpc-teaser__chip-wrap.anim-bounce:hover { animation-play-state: paused; }

/* Minimized dot */
.rpc-teaser button.rpc-teaser__chip.rpc-teaser__chip--dot {
	padding: 12px;
	border-radius: 50%;
}
.rpc-teaser--sharp button.rpc-teaser__chip.rpc-teaser__chip--dot { border-radius: 0; }
.rpc-teaser__chip--dot .rpc-teaser__chip-label,
.rpc-teaser__chip--dot .rpc-teaser__chip-count { display: none; }
.rpc-teaser__chip--dot .rpc-teaser__chip-icon { width: 16px; height: 16px; }

/* ============== CARD ============== */

.rpc-teaser__card {
	width: 316px;
	max-width: calc(100vw - 44px);
	background: var(--tz-card-bg);
	color: var(--tz-card-text);
	border-radius: var(--tz-card-radius);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
	overflow: hidden;
	margin-bottom: 12px;
	opacity: 0;
	transform: translateY(10px) scale(0.98);
	transform-origin: bottom right;
	pointer-events: none;
	transition: opacity 240ms var(--tz-ease), transform 240ms var(--tz-ease);
}
.rpc-teaser--left .rpc-teaser__card { transform-origin: bottom left; }
.rpc-teaser.is-open .rpc-teaser__card {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* Auto-open at load: the card is placed in its open state with the expand
   transition suppressed, so on first paint only the container's fade/slide
   entrance is visible, never a chip -> card flip. JS removes this class after
   the entrance frame to restore the normal open/close animation. */
.rpc-teaser.is-preopen .rpc-teaser__card { transition: none; }

.rpc-teaser__card-head {
	background: var(--tz-bg);
	color: var(--tz-text);
	padding: 18px 44px 16px 20px;
	position: relative;
}

/* Header image variant: photo with baked-in dark overlay (inline style) */
.rpc-teaser__card-head--img {
	background-size: cover;
	background-position: center;
	min-height: 104px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #ffffff;
	/* The whole photo is a tap-to-close target (wired in the teaser JS). */
	cursor: pointer;
}
.rpc-teaser__eyebrow {
	font-size: var(--tz-size-eyebrow, 10px);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: var(--tz-transform-eyebrow, uppercase);
	font-style: var(--tz-style-eyebrow, normal);
	opacity: 0.8;
	margin: 0 0 5px;
}
.rpc-teaser__title {
	font-size: var(--tz-size-title, 17px);
	font-weight: 600;
	text-transform: var(--tz-transform-title, none);
	font-style: var(--tz-style-title, normal);
	margin: 0;
	line-height: 1.3;
	color: inherit;
}
/* Card close button. Base sizing + look shared by all styles: a solid white
   circle/square with a black glyph and a soft shadow, so the ✕ reads clearly
   on any header (solid brand color or image with its dark overlay). */
.rpc-teaser button.rpc-teaser__close {
	position: absolute;
	top: 13px;
	right: 13px;
	width: 34px;
	height: 34px;
	border: none;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
	color: #111;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	transition: background 160ms var(--tz-ease), opacity 160ms var(--tz-ease), transform 160ms var(--tz-ease);
	z-index: 2;
}

/* The glyph itself scales up a touch on hover; background/color stay put so
   the ✕ never darkens into an unreadable state over a photo. */
.rpc-teaser button.rpc-teaser__close > * { pointer-events: none; }
.rpc-teaser button.rpc-teaser__close:hover,
.rpc-teaser button.rpc-teaser__close:focus {
	transform: scale(1.16);
}

/* Bare: white square with a black glyph (same solid look as the others, just
   without the rounded corners). */
.rpc-teaser--close-bare button.rpc-teaser__close {
	border-radius: 0;
	opacity: 1;
}

/* Circle / square: solid white background + black glyph, fixed in every state. */
.rpc-teaser--close-circle button.rpc-teaser__close,
.rpc-teaser--close-circle button.rpc-teaser__close:hover,
.rpc-teaser--close-circle button.rpc-teaser__close:focus,
.rpc-teaser--close-square button.rpc-teaser__close,
.rpc-teaser--close-square button.rpc-teaser__close:hover,
.rpc-teaser--close-square button.rpc-teaser__close:focus {
	width: 30px;
	height: 30px;
	background: #fff;
	color: #111;
	font-size: 13px;
}
.rpc-teaser--close-circle button.rpc-teaser__close { border-radius: 50%; }
.rpc-teaser--close-square button.rpc-teaser__close { border-radius: 0; }

/* Chip + kill wrapper. The remove control is a small companion button sitting
   to the RIGHT of the chip, in the same brand colors, so it reads as one unit
   and blends with any brand. It lives inside the wrap, so it travels with the
   chip (entrance animation, position). */
.rpc-teaser__chip-wrap {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	gap: 3px;
	/* Re-enable hits on the chip itself; the container above is pointer-events:none. */
	pointer-events: auto;
}

.rpc-teaser button.rpc-teaser__kill {
	flex: 0 0 auto;
	/* A perfect circle: fixed square dimensions, centered beside the chip rather
	   than stretched to the chip's height (which produced an oval on mobile,
	   where the chip is taller). */
	width: 34px;
	height: 34px;
	align-self: center;
	border: none;
	border-radius: 50%;
	background: var(--tz-bg);
	color: var(--tz-text);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
	padding: 0;
	margin: 0;
	font-family: inherit;
	opacity: 1;
	transition: filter 150ms var(--tz-ease), transform 220ms var(--tz-ease);
}
.rpc-teaser button.rpc-teaser__kill:hover,
.rpc-teaser button.rpc-teaser__kill:focus {
	filter: brightness(1.12);
}

/* Hover/focus lift, applied to the chip AND its companion kill button together
   (driven by the wrap, not the chip alone). The chip used to lift by itself, so
   re-clicking the chip to close the card left it focused and lifted while the X
   stayed put — the two visibly desynced. Lifting both from the wrap keeps them
   locked as one unit in every state. */
.rpc-teaser__chip-wrap:hover button.rpc-teaser__chip,
.rpc-teaser__chip-wrap:focus-within button.rpc-teaser__chip,
.rpc-teaser__chip-wrap:hover button.rpc-teaser__kill,
.rpc-teaser__chip-wrap:focus-within button.rpc-teaser__kill {
	transform: translateY(-2px);
}
.rpc-teaser button.rpc-teaser__kill > * { pointer-events: none; }
.rpc-teaser button.rpc-teaser__kill[hidden] { display: none; }
/* When collapsed to a dot, make the companion a matching circle. */
.rpc-teaser__chip--dot ~ button.rpc-teaser__kill,
.rpc-teaser__chip-wrap:has(.rpc-teaser__chip--dot) button.rpc-teaser__kill {
	width: 30px;
	height: 30px;
	border-radius: 50%;
}
/* Sharp variant: the companion is a square that reads as one unit with the chip.
   Height is left to flex stretch so it always equals the chip's height, whatever
   drives it (icon, label, or a count badge) — this is the blindaje against the
   chip growing taller. Width is fixed to the chip's normal height (15px icon +
   22px padding = 37px), so with just an icon+label it is a perfect square, and if
   the chip ever grows it stays flush (a hair taller than wide) with no gap.
   NOTE: width must NOT use aspect-ratio here — in a flex row with flex-basis:auto
   the width collapses to the glyph instead of tracking the stretched height. */
.rpc-teaser--sharp button.rpc-teaser__kill {
	border-radius: 0;
	width: 37px;
	height: auto;
	align-self: stretch;
}

.rpc-teaser__card-body { padding: 18px 20px 20px; }
.rpc-teaser__copy {
	font-size: var(--tz-size-copy, 13px);
	text-transform: var(--tz-transform-copy, none);
	font-style: var(--tz-style-copy, normal);
	color: #5c5c5c;
	margin: 0 0 14px;
	line-height: 1.5;
}

.rpc-teaser__countdown {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--tz-accent);
	background: rgba(0, 0, 0, 0.05);
	border-radius: var(--tz-chip-radius);
	padding: 4px 11px;
	margin-bottom: 14px;
}
.rpc-teaser__countdown::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tz-accent);
}
.rpc-teaser--sharp .rpc-teaser__countdown::before { border-radius: 0; }
.rpc-teaser__countdown:empty { display: none; }

.rpc-teaser__code-row { display: flex; gap: 8px; margin-bottom: 12px; }
.rpc-teaser__code {
	flex: 1;
	border: 1.5px dashed var(--tz-accent);
	border-radius: var(--tz-el-radius);
	padding: 10px 12px;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: var(--tz-size-code, 15px);
	font-weight: var(--tz-weight-code, inherit);
	letter-spacing: var(--tz-ls-code, normal);
	text-transform: var(--tz-transform-code, none);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-align: center;
	color: var(--tz-card-text);
	background: #fafafa;
	user-select: all;
}
.rpc-teaser button.rpc-teaser__copy-btn {
	border: none;
	border-radius: var(--tz-el-radius);
	background: #f0f0f1;
	color: #3c3c3c;
	padding: 0 14px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 160ms var(--tz-ease);
	font-family: inherit;
	line-height: 1;
}
.rpc-teaser button.rpc-teaser__copy-btn:hover { background: #e4e4e6; color: #3c3c3c; }
.rpc-teaser button.rpc-teaser__copy-btn.is-copied { background: #d8efdd; color: #176635; }

.rpc-teaser a.rpc-teaser__cta,
.rpc-teaser a.rpc-teaser__cta:visited {
	display: block;
	width: 100%;
	background: var(--tz-bg);
	color: var(--tz-text);
	border: none;
	border-radius: var(--tz-chip-radius);
	padding: 12px 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: filter 180ms var(--tz-ease), transform 180ms var(--tz-ease);
	font-family: inherit;
	text-transform: none;
}
.rpc-teaser a.rpc-teaser__cta:hover,
.rpc-teaser a.rpc-teaser__cta:focus {
	background: var(--tz-bg);
	color: var(--tz-text);
	filter: brightness(1.07);
	transform: translateY(-1px);
	text-decoration: none;
}

.rpc-teaser__fineprint {
	font-size: 10.5px;
	text-transform: var(--tz-transform-copy, none);
	font-style: var(--tz-style-copy, normal);
	color: #9a9a9a;
	text-align: center;
	margin: 10px 0 0;
}

/* ============== EMAIL GATE ============== */

.rpc-teaser__gate[hidden],
.rpc-teaser__revealed[hidden],
.rpc-teaser__inbox[hidden] { display: none; }

/* Once the form is submitted, collapse the card to just the confirmation:
   drop the intro copy and any countdown so only the inbox panel remains. */
.rpc-teaser.is-converted .rpc-teaser__copy,
.rpc-teaser.is-converted .rpc-teaser__countdown { display: none; }

.rpc-teaser__inbox-icon {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.05);
	color: var(--tz-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px auto 12px;
}
.rpc-teaser__inbox-icon svg { width: 20px; height: 20px; }
.rpc-teaser__inbox-title {
	font-size: var(--tz-size-title, 15px);
	font-weight: 600;
	text-align: center;
	margin: 0 0 6px;
	color: var(--tz-card-text);
}
.rpc-teaser__inbox-copy {
	font-size: var(--tz-size-copy, 12.5px);
	color: #5c5c5c;
	text-align: center;
	margin: 0;
	line-height: 1.5;
}
/* Webmail provider row shown in the "check your inbox" panel.
   Minimalist: icon-only circles, one brand logo per ring. */
.rpc-teaser__providers {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 16px;
}
.rpc-teaser a.rpc-teaser__provider,
.rpc-teaser a.rpc-teaser__provider:visited {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid #e4e4e6;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: border-color 150ms var(--tz-ease), transform 150ms var(--tz-ease), box-shadow 150ms var(--tz-ease);
}
.rpc-teaser a.rpc-teaser__provider:hover,
.rpc-teaser a.rpc-teaser__provider:focus {
	border-color: var(--rpc-prov, var(--tz-accent));
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
	text-decoration: none;
}
.rpc-teaser__provider-icon {
	width: 20px;
	height: 20px;
	display: inline-flex;
	flex: none;
}
/* Real brand logos carry their own fills — do not recolour them. */
.rpc-teaser__provider-icon svg { width: 20px; height: 20px; display: block; }

/* Consistent, visible keyboard focus for the card's interactive controls
   (close, remove, CTA, webmail providers) — WCAG 2.4.7. */
.rpc-teaser .rpc-teaser__close:focus-visible,
.rpc-teaser .rpc-teaser__kill:focus-visible,
.rpc-teaser a.rpc-teaser__cta:focus-visible,
.rpc-teaser a.rpc-teaser__provider:focus-visible {
	outline: 2px solid var(--tz-accent, #111);
	outline-offset: 2px;
}

/* Scoped restyle for embedded Fluent Forms / Gravity Forms */
.rpc-teaser__gate form { margin: 0; }
.rpc-teaser__gate input[type="text"],
.rpc-teaser__gate input[type="email"],
.rpc-teaser__gate input[type="tel"],
.rpc-teaser__gate select {
	width: 100%;
	border: 1.5px solid #ddd;
	border-radius: var(--tz-el-radius);
	padding: 10px 12px;
	font-size: 13px;
	font-family: inherit;
	background: #fff;
	color: var(--tz-card-text);
	margin: 0 0 4px;
	box-shadow: none;
	line-height: 1.4;
}
.rpc-teaser__gate input:focus {
	border-color: var(--tz-accent);
	outline: none;
	box-shadow: none;
}
.rpc-teaser__gate label {
	font-size: 11px;
	font-weight: 600;
	color: #6a6a6a;
	margin-bottom: 3px;
	display: block;
}
.rpc-teaser__gate button[type="submit"],
.rpc-teaser__gate input[type="submit"],
.rpc-teaser__gate .ff-btn-submit,
.rpc-teaser__gate .gform_button {
	width: 100%;
	border: none;
	border-radius: var(--tz-chip-radius);
	background: var(--tz-bg);
	color: var(--tz-text);
	padding: 11px 16px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	cursor: pointer;
	font-family: inherit;
	transition: filter 180ms var(--tz-ease);
	text-transform: none;
	margin: 2px 0 0;
}
.rpc-teaser__gate button[type="submit"]:hover,
.rpc-teaser__gate .ff-btn-submit:hover,
.rpc-teaser__gate .gform_button:hover { filter: brightness(1.07); }
.rpc-teaser__gate .ff-el-group,
.rpc-teaser__gate .gfield { margin-bottom: 4px; }
.rpc-teaser__gate .ff-el-is-error .ff-el-form-control { border-color: #d63638; }
.rpc-teaser__gate .ff-message-success,
.rpc-teaser__gate .gform_confirmation_message {
	font-size: 12.5px;
	color: #176635;
	background: #eaf6ee;
	border-radius: var(--tz-el-radius);
	padding: 10px 12px;
}

/* ============== MOBILE ============== */

@media (max-width: 640px) {
	/* Sit at the same low offset as the site's other floating controls (chat
	   FAB, back-to-top). We no longer add an extra lift above the home-indicator
	   inset: the teaser is not used on property pages, so it does not need to
	   clear on-page controls there. Use a full-size chip: small floating UI is
	   hard to re-open once minimized. */
	.rpc-teaser {
		bottom: 20px;
		right: 14px;
	}
	.rpc-teaser--left { left: 14px; }
	/* Larger circular remove button to match the bigger chip and close target. */
	.rpc-teaser button.rpc-teaser__kill {
		width: 38px;
		height: 38px;
	}
	/* Sharp: width = chip's mobile height (16px icon + 26px padding = 42px);
	   height still stretches to the chip so it stays flush. */
	.rpc-teaser--sharp button.rpc-teaser__kill {
		width: 42px;
		height: auto;
	}
	.rpc-teaser__card { width: calc(100vw - 28px); }
	.rpc-teaser button.rpc-teaser__chip {
		font-size: var(--tz-size-chip, 13px);
		padding: 13px 19px;
	}
	.rpc-teaser button.rpc-teaser__chip.rpc-teaser__chip--dot {
		padding: 15px;
	}
	.rpc-teaser__chip-icon { width: 16px; height: 16px; }

	/* Bigger, clearer close target on phones (easier to tap, more visible).
	   Widen the head's right padding so the larger button never crowds the
	   title. */
	.rpc-teaser__card-head { padding-right: 54px; }
	.rpc-teaser button.rpc-teaser__close {
		top: 16px;
		right: 12px;
		width: 40px;
		height: 40px;
		font-size: 18px;
	}
	.rpc-teaser--close-circle button.rpc-teaser__close,
	.rpc-teaser--close-circle button.rpc-teaser__close:hover,
	.rpc-teaser--close-circle button.rpc-teaser__close:focus,
	.rpc-teaser--close-square button.rpc-teaser__close,
	.rpc-teaser--close-square button.rpc-teaser__close:hover,
	.rpc-teaser--close-square button.rpc-teaser__close:focus {
		width: 40px;
		height: 40px;
		font-size: 17px;
		background: #fff;
		color: #111;
	}
	.rpc-teaser--close-bare button.rpc-teaser__close { opacity: 1; }
}

/* ============== ACCESSIBILITY / PRINT ============== */

@media (prefers-reduced-motion: reduce) {
	.rpc-teaser__chip { animation: none !important; }
	.rpc-teaser__card,
	.rpc-teaser__chip { transition: none; }
}

@media print {
	.rpc-teaser, .rpc-teaser-stack { display: none !important; }
}

/* ==========================================================================
   Theme-defense overrides. Elementor kits style h3/p/a/buttons globally
   (.elementor-kit-N h3 { color: ... }) and form plugins ship their own
   button colors. Chained selectors here win those cascades.
   ========================================================================== */

/* Card typography: keep the token colors and per-section font tokens, kill
   kit fonts/margins. Each token falls back to inherit (site font) when unset.
   Fonts live on these high-specificity rules so the per-section choice beats
   Elementor kit rules; the embedded form is never selected here, so it keeps
   the site/plugin font. */
.rpc-teaser .rpc-teaser__card-head h3.rpc-teaser__title {
	color: inherit;
	font-family: var(--tz-font-title, inherit);
	font-size: var(--tz-size-title, 17px);
	font-weight: var(--tz-weight-title, 600);
	line-height: 1.3;
	letter-spacing: var(--tz-ls-title, normal);
	text-transform: var(--tz-transform-title, none);
	font-style: var(--tz-style-title, normal);
	margin: 0;
}
.rpc-teaser .rpc-teaser__card-head p.rpc-teaser__eyebrow {
	color: inherit;
	font-family: var(--tz-font-eyebrow, inherit);
	font-size: var(--tz-size-eyebrow, 10px);
	font-weight: var(--tz-weight-eyebrow, 700);
	letter-spacing: var(--tz-ls-eyebrow, 0.22em);
	text-transform: var(--tz-transform-eyebrow, uppercase);
	font-style: var(--tz-style-eyebrow, normal);
	margin: 0 0 5px;
}
.rpc-teaser .rpc-teaser__card-body p.rpc-teaser__copy {
	font-family: var(--tz-font-copy, inherit);
	font-size: var(--tz-size-copy, 13px);
	font-weight: var(--tz-weight-copy, 400);
	letter-spacing: var(--tz-ls-copy, normal);
	text-transform: var(--tz-transform-copy, none);
	font-style: var(--tz-style-copy, normal);
	margin: 0 0 14px;
}
.rpc-teaser .rpc-teaser__card-body p.rpc-teaser__fineprint {
	font-family: var(--tz-font-copy, inherit);
	letter-spacing: var(--tz-ls-copy, normal);
	text-transform: var(--tz-transform-copy, none);
	font-style: var(--tz-style-copy, normal);
	margin: 10px 0 0;
}
.rpc-teaser .rpc-teaser__card-body h4.rpc-teaser__inbox-title {
	color: var(--tz-card-text);
	font-family: var(--tz-font-title, inherit);
	font-size: var(--tz-size-title, 15px);
	font-weight: var(--tz-weight-title, 600);
	letter-spacing: var(--tz-ls-title, normal);
	text-transform: var(--tz-transform-title, none);
	font-style: var(--tz-style-title, normal);
	margin: 0 0 6px;
}

/* Embedded form submit: out-specify Fluent (.fluentform .ff-btn-submit) and
   Gravity defaults plus Elementor kit button rules, in any load order */
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate button[type="submit"],
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate input[type="submit"],
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .ff-btn-submit,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_button {
	width: 100%;
	border: none;
	border-radius: var(--tz-chip-radius);
	background: var(--tz-bg);
	background-color: var(--tz-bg);
	color: var(--tz-text);
	padding: 11px 16px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	cursor: pointer;
	font-family: inherit;
	text-transform: none;
	box-shadow: none;
	margin: 2px 0 0;
	line-height: 1.4;
}
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate button[type="submit"]:hover,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate input[type="submit"]:hover,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .ff-btn-submit:hover,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_button:hover {
	background: var(--tz-bg);
	background-color: var(--tz-bg);
	color: var(--tz-text);
	filter: brightness(1.07);
}

/* Embedded form inputs: same defense */
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate input[type="text"],
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate input[type="email"],
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate input[type="tel"] {
	width: 100%;
	border: 1.5px solid #ddd;
	border-radius: var(--tz-el-radius);
	padding: 10px 12px;
	font-size: 13px;
	font-family: inherit;
	background: #fff;
	background-color: #fff;
	color: var(--tz-card-text);
	margin: 0 0 4px;
	box-shadow: none;
	line-height: 1.4;
	min-height: 0;
}
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate input[type="text"]:focus,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate input[type="email"]:focus,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate input[type="tel"]:focus {
	border-color: var(--tz-accent);
	outline: none;
	box-shadow: none;
}

/* ==========================================================================
   Gravity Forms: tame the default theme inside the narrow card.
   GF's gravity-theme stylesheet sizes fields for a full-width page (e.g.
   `.gform_wrapper.gravity-theme .gfield_label { font-size: 1rem !important }`),
   so an embedded [gravityform] renders oversized in a 316px teaser. Because GF
   ships those rules with !important, specificity alone cannot win them — every
   sizing property below is forced with !important too. On UIkit/YooTheme sites
   the fields also carry uk- classes (uk-legend, uk-input, uk-button), handled in
   the same rules. Fluent Forms is already handled by the block above.
   ========================================================================== */

/* Base scale + neutralise GF's own custom-property sizing so children inherit small. */
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper {
	font-size: 13px !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	--gform-theme-control-label-font-size-primary: 11px;
	--gform-theme-control-label-font-size-secondary: 10px;
	--gform-theme-control-font-size: 13px;
	--gform-theme-field-row-gap: 4px;
	--gform-theme-field-page-gap: 4px;
}
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gform_heading,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gform_title,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gform_description {
	display: none !important;
}

/* Collapse the field grid to a tight, single-column stack. */
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gform_fields {
	display: block !important;
	grid-template-columns: 1fr !important;
	grid-row-gap: 0 !important;
	row-gap: 0 !important;
	margin: 0 !important;
}
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gfield {
	margin: 0 0 4px !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Field labels + sub-labels (First/Last, Area/Number, etc.). This is the rule
   that must beat GF's `.gfield_label { font-size: 1rem !important }`. */
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gfield_label,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper legend.gfield_label,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate legend.uk-legend {
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 0 0 3px !important;
	padding: 0 !important;
	color: #6a6a6a !important;
}
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .ginput_complex label,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gform-field-label--type-sub,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gfield_description {
	font-size: 10px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	color: #9a9a9a !important;
}

/* Inputs. UIkit's .uk-input forces height:40px and GF forces its own padding —
   both overridden so our padding drives the size. */
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper input[type="text"],
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper input[type="email"],
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper input[type="tel"],
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper select,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper textarea {
	width: 100% !important;
	height: auto !important;
	border: 1.5px solid #ddd !important;
	border-radius: var(--tz-el-radius) !important;
	padding: 10px 12px !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	background: #fff !important;
	color: var(--tz-card-text) !important;
	margin: 0 !important;
	box-shadow: none !important;
	min-height: 0 !important;
}

/* Footer + submit: drop the tall page-sized button (uk-button line-height:38px)
   down to card scale. */
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gform_footer,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gform_page_footer {
	margin: 6px 0 0 !important;
	padding: 0 !important;
}
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gform_footer input[type="submit"],
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gform_footer button,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_footer .uk-button,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .uk-button.gform_button {
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 11px 16px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	text-transform: none !important;
}

/* Fieldset chrome (UIkit .uk-fieldset). */
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate fieldset.uk-fieldset,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper fieldset.gfield {
	margin: 0 0 4px !important;
	padding: 0 !important;
	border: none !important;
}

/* Name (and other complex) sub-field rows: kill GF's grid gutter so the single
   visible sub-field sits flush under its label. */
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .ginput_complex,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gform-grid-row {
	display: block !important;
	grid-template-columns: 1fr !important;
	gap: 0 !important;
	margin: 0 !important;
}
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gform-grid-col {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* GF validation / required marker: keep them small and unobtrusive. */
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gfield_required { font-size: 11px !important; }
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .validation_message,
.rpc-teaser .rpc-teaser__card .rpc-teaser__gate .gform_wrapper .gfield_validation_message {
	font-size: 10.5px !important;
	padding: 4px 0 0 !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
}