/* ==========================================================================
   AMIE Teaser — campaign landing
   Section 1: Hero
   ========================================================================== */

/* Smooth scrolling for in-page anchors (e.g. the Register buttons → #amie-register). */
html { scroll-behavior: smooth; }

.amie-teaser {
	--paper:      oklch(0.98 0.004 250);  /* near-white text */
	--muted:      oklch(0.86 0.010 250);  /* secondary copy */
	--faint:      oklch(0.74 0.012 250);  /* eyebrow */
	--brand:      oklch(0.585 0.214 27);  /* Tunstall red */
	--brand-lift: oklch(0.64 0.215 27);
	--brand-press:oklch(0.50 0.190 27);

	--ease-out:   cubic-bezier(0.22, 1, 0.36, 1);

	margin: 0;
	/* The dark sky lives on the hero (so it always fills the hero exactly,
	   regardless of its height) and ends on this exact light grey. The whole page
	   is filled with that same grey, so the hero blends seamlessly into the
	   sections below with no viewport-height guesswork. */
	background-color: #e9edf1;
	color: var(--paper);
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.amie-teaser * { box-sizing: border-box; }

.amie-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

/* ----------------------------------------------------- Page background
   No single page-wide background any more. Each region paints its own:
   the hero has its unique dark gradient, the campaign carries the gradient
   for the rest of the page, and the "Be First" card has a blurred photo. */
.amie {
	background: transparent;
	/* Catches the full-bleed giveaway band + any bled renders so they can run to
	   the viewport edges without ever producing a sideways scrollbar. */
	overflow-x: clip;
}

/* ----------------------------------------------------- Hero shell */
.amie-hero {
	position: relative;
	isolation: isolate;
	/* Clip horizontally (the oversized renders would otherwise cause a sideways
	   scrollbar) but let the device drop-shadows spill DOWN past the hero edge,
	   so the shadow fades naturally instead of being cut into a hard line. */
	overflow-x: clip;
	overflow-y: visible;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.25rem, 5vw, 4.5rem) clamp(7.5rem, 13vw, 13rem);
	/* Hero's own gradient: deep black at the top easing into a cool blue-grey,
	   matching the campaign art-direction swatch (#030303 → #3D4D5A). */
	background: linear-gradient(180deg, #030303 0%, #3d4d5a 100%);
}

/* Soft halo so the black devices separate from the mid-grey band */
.amie-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(40% 34% at 50% 46%,
		oklch(0.92 0.01 245 / 0.18) 0%,
		transparent 68%);
}

/* ----------------------------------------------------- Watermark
   Real heading, sized with container-query units so it scales to the stage
   width. Natural width (max-content), capped at the container. */
.amie-hero__watermark {
	position: absolute;
	left: 0;
	right: 0;
	top: 6%;
	width: 100%;
	z-index: 0;
	font-family: "Roboto", system-ui, sans-serif;
	font-weight: 300;
	/* Sized just under the container so justify spreads the two words out to
	   the column edges instead of overflowing. */
	font-size: 13cqw;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	/* Spread to the full container width, but distribute the extra space
	   across every character instead of dumping it into the single word gap. */
	text-align: justify;
	text-align-last: justify;
	text-justify: inter-character;
	color: oklch(0.88 0.012 245 / 0.16);
	pointer-events: none;
	user-select: none;
}

/* ----------------------------------------------------- Brand mark */
.amie-hero__brand {
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: center;
	margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
.amie-logo {
	display: inline-flex;
	transition: translate 0.3s var(--ease-out);
}
.amie-logo img {
	display: block;
	width: clamp(124px, 12vw, 158px);
	height: auto;
}
.amie-logo:hover { translate: 0 -1px; }

/* ----------------------------------------------------- Stage grid */
.amie-hero__stage {
	position: relative;
	z-index: 2;
	flex: 1;
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(150px, 0.72fr) minmax(440px, 2.3fr) minmax(150px, 0.72fr);
	align-items: center;
	gap: clamp(0.5rem, 2vw, 1.5rem);
	max-width: 1520px;
	width: 100%;
	margin-inline: auto;
	/* The watermark is absolutely positioned (so the renders can overlap it),
	   which means it reserves no flow space. Pad the top of the centered grid
	   so the renders + copy drop below "COMING SOON" with a clear gap. */
	padding-top: clamp(2.5rem, 9vw, 8.5rem);
}

.amie-hero__col {
	position: relative;
	z-index: 1;
	max-width: 29ch;
}
.amie-hero__col--right { justify-self: end; }

/* Body-class prefix so these win over the theme's global heading colour. */
.amie-teaser .amie-hero__name {
	margin: 0 0 0.55rem;
	font-size: clamp(1.5rem, 2.4vw, 2.05rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.05;
	color: var(--paper);
}
.amie-tm {
	font-size: 0.46em;
	font-weight: 600;
	top: -0.95em;
	margin-left: 0.04em;
}

.amie-eyebrow {
	margin: 0 0 1.05rem;
	font-size: clamp(0.66rem, 0.9vw, 0.74rem);
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--faint);
	line-height: 1.45;
}

.amie-copy {
	margin: 0 0 1.6rem;
	font-size: clamp(0.86rem, 1.05vw, 0.95rem);
	line-height: 1.6;
	color: white;
	max-width: 30ch;
}

/* ----------------------------------------------------- Button */
.elementor-kit-8 a.amie-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7em 1.7em;
	border-radius: 999px;
	background: var(--brand);
	color: var(--paper);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.3s var(--ease-out), translate 0.3s var(--ease-out);
}
.amie-btn:hover {
	background: var(--brand-lift);
	translate: 0 -2px;
}
.amie-btn:active { background: var(--brand-press); translate: 0 0; }
.amie-btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* ----------------------------------------------------- Product cluster
   Three nested layers per device:
     .amie-device        -> JS parallax (scroll + pointer)
     .amie-device__enter -> one-shot load entrance
     .amie-device__float -> infinite idle float
   Separated so the transforms compose instead of overwriting each other. */
.amie-hero__product {
	position: relative;
	z-index: 1;
	margin: 0;
	justify-self: center;
	/* Shift the whole cluster left of the centre column */
	transform: translateX(-12%);
	width: 100%;
	max-width: clamp(440px, 40vw, 860px);
	aspect-ratio: 16 / 12;
}
.amie-device {
	position: absolute;
	will-change: transform;
}
.amie-device__enter,
.amie-device__float { width: 100%; }
.amie-device__img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 34px 50px oklch(0 0 0 / 0.55));
}
/* Large, overlapping centre cluster: pendant front-left, watch behind-right */
/* Pendant: dominant, sits higher and behind the watch */
.amie-device--pendant { width: 138%; left: -26%; top: -36%; z-index: 2; }
/* Watch: lower and to the right, overlapping in front of the pendant */
.amie-device--watch   { width: 100%; left: 26%;  top: 12%;  z-index: 3; }

/* Entrance: rise + settle */
@keyframes amie-rise {
	from { opacity: 0; transform: translateY(72px) scale(0.94); }
	to   { opacity: 1; transform: none; }
}
.amie-device__enter { animation: amie-rise 1.6s var(--ease-out) both; }
.amie-device--pendant .amie-device__enter { animation-delay: 0.2s; }
.amie-device--watch   .amie-device__enter { animation-delay: 0.45s; }

/* Idle float: gentle, offset phase per device */
@keyframes amie-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-16px); }
}
.amie-device__float { animation: amie-float 6s ease-in-out 1s infinite; }
.amie-device--watch .amie-device__float { animation-duration: 7.4s; animation-delay: 1.4s; }

/* ----------------------------------------------------- Responsive */

/* Tablet / small desktop: keep the row, but rein the cluster in so the
   oversized renders don't crash into the side columns. */
@media (max-width: 1200px) {
	.amie-hero__stage {
		grid-template-columns: minmax(140px, 0.8fr) minmax(360px, 2fr) minmax(140px, 0.8fr);
	}
	.amie-device--pendant { width: 118%; left: -18%; top: -16%; }
	.amie-device--watch   { width: 86%;  left: 28%;  top: 16%; }
}

/* Stack: watermark, then the device cluster, then the two product blocks. */
@media (max-width: 900px) {
	.amie-hero {
		min-height: auto;
		padding-top: clamp(1.5rem, 6vw, 2.5rem);
		padding-bottom: clamp(2.5rem, 8vw, 3.5rem);
	}
	.amie-hero__brand { margin-bottom: clamp(1rem, 5vw, 2rem); }
	.amie-hero__stage {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: clamp(1.5rem, 5vw, 2.5rem);
		/* Watermark is in-flow here, so no reserved top space is needed. */
		padding-top: 0;
	}
	/* Watermark becomes a normal stacked element at the top */
	.amie-hero__watermark {
		position: static;
		order: -2;
		width: max-content;
		max-width: 94vw;
		margin: 0 auto;
		font-size: 9.5vw;
	}
	.amie-hero__product {
		order: -1;
		transform: none;
		width: 100%;
		max-width: min(92vw, 540px);
		aspect-ratio: 4 / 3;
		/* Tighten the space between "COMING SOON" and the renders; the render
		   box has transparent headroom, so a negative margin closes it up. */
		margin-top: clamp(-3rem, -6vw, -1.5rem);
	}
	/* Contained cluster so nothing overflows the viewport */
	.amie-device--pendant { width: 96%; left: -4%; top: -4%; }
	.amie-device--watch   { width: 72%; left: 30%; top: 16%; }

	.amie-hero__col,
	.amie-hero__col--right {
		max-width: 44ch;
		justify-self: center;
	}
	.amie-copy { margin-inline: auto; }
}

/* Phones: tighten type and let the cluster use more width */
@media (max-width: 520px) {
	.amie-hero__product { max-width: 96vw; }
	.amie-hero__col,
	.amie-hero__col--right { max-width: 90vw; }
}

/* ==========================================================================
   Section 2 + 3 — Early Access & Giveaway / Be First
   Light campaign band that sits beneath the dark hero.
   ========================================================================== */
.amie-campaign {
	position: relative;
	z-index: 1;
	/* One consistent light background running from the giveaway band straight
	   down to the footer. The giveaway's own sky fades into this same grey. */
	background: #e9edf1;
	color: #0b2942;
	/* No top padding: the giveaway band butts right up against the hero so the
	   "Win" globe can poke up onto the dark hero above it. */
	padding: 0 clamp(1.25rem, 5vw, 4.5rem) clamp(3rem, 8vw, 7rem);
	/* Must stay visible so the full-bleed giveaway band can break out past this
	   padded container; horizontal overflow is contained by .amie instead. */
	overflow: visible;
}
.amie-campaign > * + * { margin-top: clamp(1.25rem, 3vw, 2rem); }

.amie-kicker {
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
	text-align: center;
	font-size: clamp(0.95rem, 1.4vw, 1.15rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #0b2942;
}

/* ----------------------------------------------------- Giveaway band
   Full-bleed: the beach/sky photo spans the entire viewport width, edge to
   edge, breaking out of the campaign's horizontal padding. */
.amie-give {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: none;
	/* Sky photo for the band, with a gradient that fades the bottom into the
	   page's light grey so the band blends into the consistent background
	   running down to the footer. The "Win" art overlay supplies globe + people. */
	background:
		linear-gradient(180deg, rgba(233, 237, 241, 0) 55%, #e9edf1 100%),
		url("../images/giveaway-background-image.png") center top / cover no-repeat;
	/* Let the "Win" art poke above the band onto the dark hero above. */
	overflow: visible;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4rem);
}
/* Inner content wrapper: keeps the art + copy aligned to the page's max width
   while the photo behind it runs full bleed. */
.amie-give__card {
	position: relative;
	max-width: 1500px;
	margin-inline: auto;
	min-height: clamp(280px, 28vw, 440px);
}
/* Big "Win" graphic. The transparent PNG is mostly empty canvas with the artwork
   in its left third (measured bbox: x 0.137–0.303, y 0.319–0.912). It's scaled to
   ~265% of the card so the graphic itself reads ~44% of the card width, anchored
   left, with the island top poking just above the card. */
.amie-give__art {
	position: absolute;
    z-index: 2;
    left: 0;
    /* Lift it hard so the globe/mountain top breaks above the band and sits on
       the dark hero above, while the WIN text + people stay within the band. */
    top: clamp(-16rem, -18vw, -9rem);
    width: 58%;
    height: auto;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 14px 22px oklch(0 0 0 / 0.28));
}
/* Copy block sits over the clear sky on the right half, centred. */
.amie-give__body {
	position: absolute;
	z-index: 1;
	top: 50%;
	right: clamp(1.25rem, 4%, 3.5rem);
	transform: translateY(-50%);
	width: min(42%, 460px);
	text-align: center;
}
.amie-teaser .amie-give__title {
	margin: 0 0 0.7em;
	font-size: clamp(1.4rem, 2.9vw, 2.4rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: #0b2942;
}
.amie-give__copy {
	margin: 0 auto clamp(1.3rem, 2.4vw, 1.9rem);
	max-width: 50ch;
	font-size: clamp(0.95rem, 1.45vw, 1.2rem);
	line-height: 1.55;
	color: #243b52;
}
/* Red pill CTA (the hero's .amie-btn rule is scoped to Elementor anchors, so the
   modal <button> is styled explicitly here). */
.amie-teaser .amie-give__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9em 2.4em;
	border: 0;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.3s var(--ease-out), translate 0.3s var(--ease-out);
}
.amie-teaser .amie-give__cta:hover {
	background: var(--brand-lift);
	translate: 0 -2px;
}
.amie-teaser .amie-give__cta:active { background: var(--brand-press); translate: 0 0; }
.amie-teaser .amie-give__cta:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ----------------------------------------------------- Be First card */
.amie-first {
	max-width: 1500px;
	margin-inline: auto;
	/* Gap above (from the giveaway band; also room for the watch poking above)
	   and a larger gap below so the bled-out renders clear the footer. */
	margin-top: clamp(3rem, 7vw, 7rem);
	margin-bottom: clamp(4.5rem, 9vw, 9rem);
}

/* ----------------------------------------------------- Footer */
.amie-footer {
	/* Spacing handled by .amie-first's bottom margin above. */
	margin-top: 0;
}
.amie-first__card {
	position: relative;
	/* Let the renders bleed beyond the card (above/right) like the mockup; the
	   rounded background still clips to its radius. */
	overflow: visible;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: clamp(200px, 20vw, 300px);
	padding: clamp(1.5rem, 3.2vw, 2.75rem);
	border-radius: clamp(14px, 1.6vw, 22px);
	/* Solid light-grey card (no photo) per the mockup. */
	background: #d3d3d3;
}
.amie-first__body { position: relative; z-index: 2; max-width: 55ch; }
.amie-teaser .amie-first__title {
	margin: 0 0 clamp(1rem, 2.5vw, 1.6rem);
	font-size: clamp(1.2rem, 2.4vw, 1.95rem);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: #0b2942;
}
/* Light styling hook for whatever the Elementor form outputs. */
.amie-first__form { max-width: 30rem; }

.amie-first__form .elementor-form-fields-wrapper {
	display: flex;
	flex-wrap: nowrap;
}

/* Angled renders: transparent studio shots, pre-angled, so they sit directly on
   the frosted card with no blend trickery. */
.amie-first__art {
	position: absolute;
	/* Anchor to the card centre-right; devices are sized larger than the box and
	   spill out past the top/right and bottom edges. */
	inset: 0 0 0 auto;
	z-index: 1;
	width: 74%;
	pointer-events: none;
}
.amie-first__device {
	position: absolute;
	height: auto;
	filter: drop-shadow(0 26px 34px oklch(0 0 0 / 0.32));
}
/* Watch: smaller, sits higher and more directly above the pendant. */
.amie-first__device--watch {
	width: 45%;
	top: -16%;
	right: 18%;
	z-index: 2;
}
/* Pendant: lower-right, tucked below the watch and bleeding off the card. */
.amie-first__device--pendant {
	width: 64%;
	top: 31%;
	right: -8%;
	z-index: 1;
}

/* Subtle idle float on the two renders, offset so they drift out of phase.
   `translate` carries the scroll-in entrance, so the float rides on `transform`
   and the two compose without fighting. */
@keyframes amie-first-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}
.amie-first__device--watch   { animation: amie-first-float 6s ease-in-out infinite; }
.amie-first__device--pendant { animation: amie-first-float 7.4s ease-in-out 0.9s infinite; }

/* ----------------------------------------------------- Scroll-in entrances
   The giveaway "Win" art and the email-band renders fade + rise when scrolled
   into view. The hidden state is scoped to .amie-anim (added by JS) so no-JS
   users still see everything. `translate` is used (not transform) so it composes
   with the watch's static rotate(). */
.amie-anim .amie-give__art,
.amie-anim .amie-first__device {
	opacity: 0;
	translate: 0 48px;
	transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out);
}
.amie-anim .amie-give__art.amie-inview,
.amie-anim .amie-first__device.amie-inview {
	opacity: 1;
	translate: 0 0;
}
/* Stagger the two renders so they arrive one after the other. */
.amie-anim .amie-first__device--pendant { transition-delay: 0.14s; }

/* ----------------------------------------------------- Footer bar + back-to-top
   Logo left · legal centred · back-to-top pill right. Width matches the
   giveaway container (1500) so the footer lines up with the band above it. */
.amie-footer__bar {
	max-width: 1500px;
	margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0;
	padding-top: clamp(1.5rem, 2.5vw, 2rem);
	border-top: 1px solid oklch(0.4 0.02 250 / 0.18);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}
.amie-footer__logo img { display: block; width: clamp(100px, 9vw, 128px); height: auto; }

/* Centred legal block (takes the middle, stays centred between logo + pill). */
.amie-footer__meta {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	text-align: center;
}
.amie-footer__copy {
	margin: 0;
	font-size: clamp(0.72rem, 0.95vw, 0.82rem);
	color: #46586b;
}
.amie-footer__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem 0.7rem;
	font-size: clamp(0.72rem, 0.95vw, 0.82rem);
}
.amie-footer__links span { color: #8a98a6; }
.amie-teaser .amie-footer__links a {
	color: #46586b;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
	transition: color 0.2s var(--ease-out);
}
.amie-teaser .amie-footer__links a:hover { color: var(--brand); }

/* Back-to-top pill (right). */
.amie-teaser .amie-footer__top {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	flex: 0 0 auto;
	padding: 0.8em 1.8em;
	border: 1.5px solid oklch(0.45 0.03 250 / 0.35);
	border-radius: 999px;
	background: transparent;
	color: #0b2942;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out),
		border-color 0.3s var(--ease-out), translate 0.3s var(--ease-out);
}
.amie-teaser .amie-footer__top:hover {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
	translate: 0 -2px;
}
.amie-teaser .amie-footer__top:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.amie-footer__top-arrow {
	font-size: 1.1em;
	line-height: 1;
	transition: translate 0.3s var(--ease-out);
}
.amie-teaser .amie-footer__top:hover .amie-footer__top-arrow { translate: 0 -3px; }

/* ==========================================================================
   Giveaway modal
   ========================================================================== */
.amie-modal[hidden] { display: none; }
.amie-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 2.5rem);
}
.amie-modal__backdrop {
	position: absolute;
	inset: 0;
	background: oklch(0.15 0.02 250 / 0.6);
	backdrop-filter: blur(3px);
	animation: amie-modal-fade 0.25s var(--ease-out) both;
}
.amie-modal__dialog {
	position: relative;
	width: min(560px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border-radius: clamp(14px, 1.6vw, 20px);
	background: #ffffff;
	color: #0b2942;
	box-shadow: 0 30px 70px oklch(0 0 0 / 0.4);
	animation: amie-modal-pop 0.3s var(--ease-out) both;
}
.amie-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.9rem;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #5a6b7d;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.amie-modal__close:hover { background: oklch(0 0 0 / 0.06); color: #0b2942; }
.amie-modal__close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.amie-teaser .amie-modal__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.3rem, 3vw, 1.8rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #0b2942;
}

@keyframes amie-modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes amie-modal-pop {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

/* Lock background scroll while the modal is open. */
body.amie-modal-open { overflow: hidden; }

/* ----------------------------------------------------- Campaign responsive */
@media (max-width: 760px) {
	.amie-give__card {
		/* Stack: the "Win" art on top, copy centred beneath it. */
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 0;
	}
	/* Show the whole "Win" graphic (globe + text + people) — no cropping, so it
	   isn't cut off at the top. Flows in-column above the copy. */
	.amie-give__art {
		position: relative;
		left: auto;
		top: auto;
		bottom: auto;
		width: min(88%, 400px);
		height: auto;
		margin: 0 auto 0.5rem;
	}
	.amie-give__body {
		position: relative;
		top: auto;
		right: auto;
		transform: none;
		width: 100%;
		max-width: 42ch;
	}

	.amie-first__card {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.amie-first__body { max-width: none; }
	.amie-first__art {
		position: relative;
		inset: auto;
		width: 100%;
		height: clamp(180px, 48vw, 260px);
		margin-top: 1.5rem;
	}
	.amie-first__device--watch   { width: 52%; top: 0;   right: 34%; }
	.amie-first__device--pendant { width: 64%; top: 26%; right: 2%; }

	.amie-first__form .elementor-form-fields-wrapper {
		display: block;
		flex-wrap: wrap;
	  }

	  .amie-first__form .e-con.e-flex>.e-con-inner .elementor-widget-form {
		width: 100%;
	  }

	  .amie-first__form .e-con.e-flex>.e-con-inner {
		margin: 0;
	  }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.amie-teaser *,
	.amie-device__enter,
	.amie-device__float,
	.amie-modal__backdrop,
	.amie-modal__dialog {
		animation: none !important;
		transition: none !important;
	}
	/* Keep the scroll-in targets visible (transitions are off above). */
	.amie-give__art,
	.amie-first__device {
		opacity: 1 !important;
		translate: 0 !important;
	}
}