/* UNO Interactive Experience — scoped to the kiosk canvas. */

.mysticky-welcomebar-fixed {
	display: none !important;
}

html.uie-html,
html.uie-html body,
body.uie-body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	overflow: hidden;
	background: #03002f;
	font-family: "Manrope", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	touch-action: manipulation;
}

html.uie-html #wpadminbar,
body.uie-body #wpadminbar {
	display: none !important;
}

.uie-viewport {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #03002f;
}

.uie-canvas {
	position: relative;
	width: 1920px;
	height: 1080px;
	overflow: hidden;
	flex: none;
	color: #fff;
	background: #03002f;
	transform-origin: center center;
	/*
	 * Cover-scale the design canvas to the viewport. JS overwrites this
	 * with the same formula using the live viewport box. Inspect will
	 * still report 1920×1080 — that is the design size, not the on-screen size.
	 */
	transform: scale(max(100vw / 1920, 100vh / 1080));
}

.uie-canvas * {
	box-sizing: border-box;
}

.uie-screen {
	position: absolute;
	inset: 0;
	display: none;
}

.uie-screen.is-active {
	display: block;
}

.uie-bg {
	position: absolute;
	inset: 0;
	width: 1920px;
	height: 1080px;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
	background-color: #03002f;
	background-image: var(--uie-bg-art);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}

.uie-grad-text {
	background-image: linear-gradient(90deg, #ff4e6f 0%, #da0dff 27%, #3424ff 62%, #09ff88 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.uie-brand {
	position: absolute;
	left: 122px;
	top: 248px;
	width: 265px;
	pointer-events: none;
	z-index: 3;
}

.uie-brand--corner {
	left: auto;
	right: 72px;
	top: 80px;
	width: 178px;
}

.uie-wordmark-img {
	display: block;
	width: 100%;
	height: auto;
}

.uie-home-copy {
	position: absolute;
	left: 121px;
	top: 392px;
	width: 720px;
	z-index: 3;
}

.uie-home-copy h1 {
	margin: 0;
	font-size: 72px;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.uie-home-copy h1 .uie-grad-text {
	display: block;
	font-weight: 800;
}

.uie-cta-row {
	position: absolute;
	left: 121px;
	top: 700px;
	display: flex;
	align-items: center;
	gap: 22px;
	z-index: 3;
}

.uie-btn {
	appearance: none;
	border: 2px solid #fff;
	border-radius: 999px;
	min-height: 82px;
	min-width: 200px;
	padding: 20px 44px;
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	touch-action: manipulation;
}

.uie-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

.uie-btn--primary {
	border: 0;
	background-color: #4720dd;
	background-image: linear-gradient(90deg, #f53355 0%, #a804c2 28%, #4720dd 64%, #02bd5b 100%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-origin: border-box;
	background-clip: border-box;
	box-shadow: 0 0 28px rgba(98, 15, 167, 0.85);
}

.uie-btn--ghost {
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(11px);
}

.uie-btn--home {
	position: absolute;
	left: 80px;
	top: 80px;
	min-width: 194px;
	min-height: 72px;
	padding-left: 36px;
	padding-right: 36px;
	gap: 16px;
	font-weight: 600;
	letter-spacing: 0.04em;
	z-index: 5;
}

.uie-home-ico,
.uie-arrow-ico,
.uie-card-ico,
.uie-badge-ico,
.uie-lock-ico,
.uie-wheel-art,
.uie-wheel-hub-logo,
.uie-wheel-pointer,
.uie-wordmark-img {
	pointer-events: none;
}

.uie-home-ico {
	width: 25px;
	height: 25px;
	display: block;
}

.uie-arrow-ico {
	width: 22px;
	height: 22px;
	display: block;
}

.uie-wheel-wrap {
	position: absolute;
	left: 980px;
	top: 96px;
	width: 890px;
	height: 889px;
	z-index: 2;
	pointer-events: none;
}

.uie-wheel-rotor {
	position: absolute;
	inset: 0;
	will-change: transform;
	transition: none;
}

.uie-wheel-rotor.is-spinning,
.uie-wheel-rotor.is-spinning .uie-wheel-marker {
	transition: transform var(--uie-spin-ms, 4400ms) cubic-bezier(0.12, 0.7, 0.16, 1);
}

.uie-wheel-art,
.uie-wheel-label {
	display: block;
	width: 890px;
	height: 889px;
}

.uie-wheel-marker {
	position: absolute;
	inset: 0;
	width: 890px;
	height: 889px;
	pointer-events: none;
	will-change: transform;
}

.uie-wheel-hub {
	position: absolute;
	left: 308px;
	top: 308px;
	width: 274px;
	height: 274px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 11px 9px 15px rgba(0, 0, 0, 0.12);
	z-index: 2;
}

.uie-wheel-hub-logo {
	display: block;
	width: 189px;
	height: 92px;
	object-fit: contain;
}

.uie-wheel-pointer {
	position: absolute;
	left: 413px;
	top: -8px;
	width: 64px;
	height: 42px;
	z-index: 3;
}

.uie-choose-head {
	position: absolute;
	left: 50%;
	top: 158px;
	width: 1280px;
	transform: translateX(-50%);
	text-align: center;
}

.uie-choose-head h1 {
	margin: 0;
	font-size: 56px;
	font-weight: 500;
	line-height: 1.18;
}

.uie-choose-head h1 .uie-grad-text {
	font-weight: 700;
}

.uie-choose-head p {
	margin: 16px 0 0;
	font-size: 28px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.61);
}

.uie-card-grid {
	position: absolute;
	left: 428px;
	top: 360px;
	width: 1064px;
	display: grid;
	grid-template-columns: 495px 495px;
	grid-template-rows: 196px 196px;
	gap: 52px 74px;
}

.uie-card {
	position: relative;
	border: 2px solid rgba(255, 255, 255, 0.62);
	border-radius: 28px;
	padding: 32px 28px 28px 148px;
	text-align: left;
	color: #fff;
	cursor: pointer;
	min-height: 196px;
	font-family: inherit;
	background-image: linear-gradient(180deg, var(--uie-g1), var(--uie-g2));
}

.uie-card[data-id="acquire"] { --uie-g1: #ff6200; --uie-g2: #cc2200; }
.uie-card[data-id="convert"] { --uie-g1: #ff3672; --uie-g2: #930505; }
.uie-card[data-id="engage"] { --uie-g1: #00c547; --uie-g2: #2340d7; }
.uie-card[data-id="return"] { --uie-g1: #a000d1; --uie-g2: #3227e5; }

.uie-card-visual {
	position: absolute;
	left: 28px;
	top: 48px;
	width: 96px;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.uie-card-ico {
	width: 88px;
	height: 88px;
	object-fit: contain;
}

.uie-card-copy strong {
	display: block;
	font-size: 23px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.uie-card-copy span {
	display: block;
	margin-top: 8px;
	max-width: 220px;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 400;
}

.uie-card-go {
	position: absolute;
	right: 32px;
	top: 58px;
	width: 75px;
	height: 75px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.28);
	border: 2px solid rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
}

.uie-card-go .uie-arrow-ico {
	width: 28px;
	height: 28px;
}

.uie-dots {
	position: absolute;
	left: 50%;
	bottom: 56px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 4;
}

.uie-dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	border: 1.5px solid rgba(255, 255, 255, 0.25);
}

.uie-dot.is-on {
	width: 28px;
	background-image: linear-gradient(90deg, #f53355, #a804c2, #4720dd, #02bd5b);
	border-color: #fff;
}

.uie-form-card {
	position: absolute;
	left: 536px;
	top: 178px;
	width: 812px;
	height: 686px;
	padding: 24px 36px 22px;
	border-radius: 22px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(12, 6, 40, 0.62), rgba(8, 4, 32, 0.62)) padding-box,
		linear-gradient(135deg, #f53355, #a804c2, #4720dd, #02bd5b) border-box;
	border: 2px solid transparent;
}

.uie-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	flex: 0 0 auto;
	gap: 10px;
	padding: 8px 18px;
	border-radius: 999px;
	background-image: linear-gradient(160deg, #7c3aed, #6d28d9);
	font-size: 16px;
	font-weight: 700;
}

.uie-badge-ico {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.uie-form-card h2 {
	margin: 10px 0 0;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.2;
	flex: 0 0 auto;
	text-transform: uppercase;
}

.uie-form-card .uie-lede {
	margin: 6px 0 0;
	font-size: 18px;
	color: rgba(255, 255, 255, 0.45);
	flex: 0 0 auto;
}

.uie-form-instruct {
	margin: 8px 0 0;
	font-size: 18px;
	line-height: 1.35;
	color: #fff;
	flex: 0 0 auto;
}

.uie-form-instruct strong {
	font-weight: 700;
}

.uie-fields {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	gap: 4px;
	max-width: 746px;
}

/* Two-up field layout (First/Last, Email/Phone, Role/Property). Consent,
   the submit-error slot, and the CTA stay outside this grid as ordinary
   flex children of .uie-fields, so the existing "push button to bottom via
   margin-top:auto" behavior is untouched. */
.uie-field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	row-gap: 4px;
	flex: 0 0 auto;
}

.uie-field {
	flex: 0 0 auto;
}

.uie-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
}

.uie-field input {
	width: 100%;
	height: 44px;
	padding: 10px 18px;
	border-radius: 12px;
	border: 1.5px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	font-family: inherit;
	font-size: 18px;
	caret-color: #fff;
}

.uie-field input:focus {
	outline: 2px solid #f53355;
	border-color: transparent;
}

.uie-field input.uie-invalid {
	border-color: #ff4e6f;
}

.uie-field-hint,
.uie-field-error {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, 0.28);
}

.uie-field-error {
	min-height: 16px;
	color: #ff8aa0;
}

.uie-form-card .uie-field-error.uie-hidden {
	display: block !important;
	visibility: hidden;
}

.uie-consent {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
	flex: 0 0 auto;
}

.uie-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.72);
	cursor: pointer;
}

.uie-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: #8012ff;
	cursor: pointer;
}

.uie-check a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.uie-check input.uie-invalid {
	outline: 2px solid #ff4e6f;
}

.uie-btn--show {
	align-self: flex-start;
	margin-top: auto;
	flex: 0 0 auto;
	min-width: 240px;
	min-height: 64px;
}

.uie-submit-error {
	margin: 0;
	min-height: 20px;
	font-size: 14px;
	line-height: 20px;
	color: #ff8aa0;
	flex: 0 0 auto;
}

.uie-form-card .uie-submit-error.uie-hidden {
	display: block !important;
	visibility: hidden;
}

.uie-form-aside {
	position: absolute;
	left: 1408px;
	top: 690px;
	width: 300px;
	padding: 22px 24px;
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, 0.43);
	background-image: linear-gradient(90deg, rgba(245, 51, 85, 0.56), rgba(168, 4, 194, 0.56), rgba(71, 32, 221, 0.56), rgba(2, 189, 91, 0.56));
	box-shadow: 0 0 43px #620fa7;
	text-align: center;
	font-size: 15px;
	line-height: 1.45;
}

.uie-lock-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0 auto 10px;
}

.uie-lock-ico {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.uie-form-aside strong {
	font-weight: 700;
}

/* Replaces the field grid while waiting for the Pardot response (Part 2/3
   of the business-email + wait-for-Pardot change). Sits in the same
   .uie-fields flex slot the fields/consent/button normally occupy, so the
   form card itself needs no size/position changes. */
.uie-loading-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-height: 0;
	gap: 10px;
	text-align: center;
	padding: 12px 8px;
}

.uie-loading-fact {
	margin: 0;
	/* Reserves room for the longest fact in the pool so swapping text never
	   shifts the caption/spinner below it. */
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 520px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
	transition: opacity 220ms ease, transform 220ms ease;
	opacity: 1;
	transform: translateY(0);
}

.uie-loading-fact.is-fading {
	opacity: 0;
	transform: translateY(6px);
}

.uie-loading-caption {
	margin: 0;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.6);
}

.uie-loading-spinner {
	width: 28px;
	height: 28px;
	margin-top: 6px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.18);
	border-top-color: #fff;
	animation: uie-spin 800ms linear infinite;
}

@keyframes uie-spin {
	to {
		transform: rotate(360deg);
	}
}

.uie-video-copy,
.uie-complete-copy {
	position: absolute;
	left: 50%;
	top: 88px;
	width: 1280px;
	transform: translateX(-50%);
	text-align: center;
}

.uie-video-copy h1,
.uie-complete-copy h1 {
	margin: 0;
	font-size: 36px;
	font-weight: 500;
	line-height: 1.2;
}

.uie-video-copy p,
.uie-complete-copy p {
	margin: 10px 0 0;
	font-size: 20px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.7);
}

.uie-video-stage {
	position: absolute;
	left: 480px;
	top: 196px;
	width: 960px;
	height: 540px;
	border-radius: 20px;
	border: 2px solid transparent;
	background:
		linear-gradient(#000, #000) padding-box,
		linear-gradient(135deg, #f53355, #a804c2, #4720dd, #02bd5b) border-box;
	overflow: hidden;
}

.uie-screen[data-screen="video"] .uie-video-copy {
	display: none;
}

.uie-screen[data-screen="video"] .uie-dots {
	display: none;
}

.uie-screen[data-screen="video"] .uie-video-stage {
	left: 320px;
	top: 168px;
	width: 1280px;
	height: 720px;
	aspect-ratio: 16 / 9;
	box-shadow:
		0 0 48px rgba(98, 15, 167, 0.5),
		0 20px 48px rgba(0, 0, 0, 0.4);
}

.uie-screen[data-screen="video"] .uie-video-actions {
	top: auto;
	bottom: 85px;
	width: max-content;
	max-width: 1760px;
	flex-wrap: nowrap;
}

.uie-screen[data-screen="video"] .uie-video-actions .uie-btn {
	white-space: nowrap;
}

.uie-local-video,
.uie-yt-host,
.uie-video-stage iframe,
.uie-video-stage video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
	background: #000;
}

.uie-play-fallback {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 4;
	transform: translate(-50%, -50%);
	min-width: 220px;
}

.uie-video-stage h2 {
	margin: 0;
	padding-top: 220px;
	text-align: center;
	font-size: 28px;
	font-weight: 600;
}

.uie-progress {
	position: absolute;
	left: 432px;
	top: 828px;
	width: 1056px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

.uie-progress > i {
	display: block;
	height: 100%;
	width: 28%;
	background-image: linear-gradient(90deg, #f53355, #4720dd, #02bd5b);
}

.uie-skip {
	position: absolute;
	left: 50%;
	bottom: 92px;
	transform: translateX(-50%);
	z-index: 5;
}

.uie-screen[data-screen="video"] .uie-dots {
	bottom: 28px;
}

.uie-video-actions,
.uie-complete-actions {
	position: absolute;
	left: 50%;
	top: 760px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	z-index: 5;
}

.uie-stub {
	position: absolute;
	inset: 0;
	background: rgba(3, 0, 47, 0.72);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 8;
}

.uie-stub-card {
	width: 720px;
	padding: 48px 56px;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.3);
	text-align: center;
}

.uie-stub-card h2 {
	margin: 0 0 16px;
	font-size: 32px;
}

.uie-stub-card p {
	margin: 0 0 28px;
	font-size: 20px;
	color: rgba(255, 255, 255, 0.7);
}

/* Inline confirmation once Pardot accepts the lead (no redirect). */
.uie-submit-notice {
	position: absolute;
	top: 56px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9;
	max-width: 760px;
	padding: 18px 32px;
	border-radius: 999px;
	background:
		linear-gradient(180deg, rgba(12, 6, 40, 0.88), rgba(8, 4, 32, 0.88)) padding-box,
		linear-gradient(135deg, #f53355, #a804c2, #4720dd, #02bd5b) border-box;
	border: 2px solid transparent;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	text-align: center;
	pointer-events: none;
}

.uie-rh-form {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 0;
	width: 280px;
	margin: 0;
	padding: 8px;
	opacity: 0.01;
	pointer-events: none;
}

.uie-rh-form input,
.uie-rh-form button {
	display: block;
	width: 240px;
	height: 36px;
}

.uie-hidden {
	display: none !important;
}

/* ==========================================================================
   MOBILE / RESPONSIVE PORTRAIT LAYOUT
   ==========================================================================
   Everything above this line is the untouched 1920×1080 kiosk canvas and
   must keep working exactly as before at desktop/landscape sizes.

   Below this line only applies under the breakpoint, and only overrides —
   never redefines — the rules above. It must stay in sync with
   isMobileLayout() in uie-app.js: mobile is any viewport narrower than
   768px, OR a portrait viewport up to 1024px wide (covers 768×1024 tablet
   portrait). fitCanvas() clears the cover-scale transform on #uie-root in
   that same condition, so this block controls presentation without a
   competing inline transform.
   ========================================================================== */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
	/* ---- structural: let the document scroll vertically, never horizontally ---- */
	html.uie-html,
	body.uie-body {
		overflow-x: hidden;
		overflow-y: auto;
		height: auto;
		min-height: 100%;
	}

	.uie-viewport {
		position: static;
		width: 100%;
		height: auto;
		min-height: 100%;
		overflow: visible;
		display: block;
	}

	.uie-canvas {
		position: relative;
		width: 100%;
		height: auto;
		min-height: 100vh;
		overflow: visible;
		transform: none !important;
	}

	.uie-screen {
		position: relative;
		inset: auto;
	}

	.uie-screen.is-active {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		min-height: 100vh;
		padding: 84px 20px 48px;
		text-align: center;
	}

	.uie-bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	/* ---- header chrome shared by every inner screen ---- */
	.uie-btn--home {
		position: absolute;
		left: 16px;
		top: 16px;
		min-width: 0;
		min-height: 44px;
		padding: 10px 18px;
		gap: 10px;
		font-size: 13px;
		z-index: 6;
	}

	.uie-brand--corner {
		position: absolute;
		right: 16px;
		top: 16px;
		left: auto;
		width: 92px;
		z-index: 6;
	}

	/* ---- HOME + WHEEL (share homeChrome()) ---- */
	.uie-brand {
		position: relative;
		left: auto;
		top: auto;
		width: 128px;
		margin: 0 auto 28px;
	}

	.uie-home-copy {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 420px;
		margin: 0 auto;
		text-align: center;
	}

	.uie-home-copy h1 {
		font-size: 34px;
		line-height: 1.14;
	}

	.uie-cta-row {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 340px;
		margin: 28px auto 0;
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	/* Shared compact CTA sizing — Home's Spin/Choose row and the Video
	   screen's Explore/Talk-to-sales row should look consistent. Width is
	   capped rather than fixed so it stays comfortable from 360px up to
	   tablet portrait instead of either hugging the viewport edge or
	   ballooning on wider screens. */
	.uie-cta-row .uie-btn,
	.uie-screen[data-screen="video"] .uie-video-actions .uie-btn {
		width: min(280px, calc(100% - 32px));
		min-width: 0;
		min-height: 52px;
		font-size: 15px;
		padding: 14px 22px;
		gap: 10px;
	}

	.uie-cta-row .uie-btn .uie-arrow-ico,
	.uie-screen[data-screen="video"] .uie-video-actions .uie-btn .uie-arrow-ico {
		width: 18px;
		height: 18px;
	}

	/* Decorative wheel: keep the exact 890×889 assembly (art, labels, hub,
	   pointer, rotation math) untouched and shrink it as one rigid unit so
	   every internal absolute-px coordinate and rotation origin stays
	   correct. `zoom` (not `transform: scale`) also shrinks the box's own
	   flow footprint, so it doesn't reserve 889px of empty height or cause
	   horizontal overflow the way a transform-only scale would. */
	.uie-wheel-wrap {
		position: relative;
		left: auto;
		top: auto;
		margin: 8px auto 0;
		zoom: 0.32;
	}

	/* ---- CHOOSE ---- */
	.uie-choose-head {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 420px;
		transform: none;
		margin: 0 auto;
	}

	.uie-choose-head h1 {
		font-size: 26px;
	}

	.uie-choose-head p {
		font-size: 15px;
		margin-top: 10px;
	}

	.uie-card-grid {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 480px;
		margin: 24px auto 0;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		gap: 16px;
	}

	.uie-card {
		padding: 24px 56px 24px 112px;
	}

	.uie-card-visual {
		left: 20px;
		top: 24px;
		width: 72px;
		height: 72px;
	}

	.uie-card-ico {
		width: 64px;
		height: 64px;
	}

	.uie-card-go {
		right: 20px;
		top: 24px;
		width: 44px;
		height: 44px;
	}

	.uie-card-go .uie-arrow-ico {
		width: 20px;
		height: 20px;
	}

	.uie-card-copy span {
		max-width: none;
	}

	/* ---- FORM ---- */
	.uie-form-card {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 480px;
		height: auto;
		margin: 0 auto;
		padding: 22px 20px 20px;
		text-align: left;
	}

	.uie-form-card h2 {
		font-size: 22px;
	}

	/* Single column on mobile — First/Last/Email/Phone/Role/Property just
	   stack in field order, same as the desktop row order collapsed. */
	.uie-field-grid {
		grid-template-columns: 1fr;
	}

	.uie-check input[type="checkbox"] {
		width: 24px;
		height: 24px;
	}

	.uie-form-aside {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 480px;
		margin: 20px auto 0;
	}

	/* ---- VIDEO ---- */
	.uie-screen[data-screen="video"] .uie-video-stage {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 560px;
		height: auto;
		aspect-ratio: 16 / 9;
		margin: 0 auto;
	}

	.uie-screen[data-screen="video"] .uie-video-actions {
		position: relative;
		left: auto;
		top: auto;
		bottom: auto;
		transform: none;
		width: 100%;
		max-width: 400px;
		margin: 24px auto 0;
		flex-direction: column;
		align-items: center;
		flex-wrap: nowrap;
		gap: 12px;
	}

	/* ---- shared footer chrome ---- */
	.uie-dots {
		position: relative;
		left: auto;
		bottom: auto;
		transform: none;
		margin: 28px auto 0;
	}

	.uie-stub-card {
		width: 100%;
		max-width: 420px;
		padding: 32px 24px;
	}

	/* Inline "submitted" confirmation — same treatment as the header chrome
	   above it: a comfortably inset, width-capped pill instead of the
	   desktop's wide centered bar. */
	.uie-submit-notice {
		position: absolute;
		left: 50%;
		top: 16px;
		transform: translateX(-50%);
		width: calc(100% - 32px);
		max-width: 420px;
		padding: 14px 20px;
		font-size: 15px;
		z-index: 9;
	}
}