/**
 * Landing-page sections — Shopify Templates
 *
 * Page hero, how-it-works steps, commission tiers and the contact block.
 * Loaded on any page that uses one of those blocks, plus the page templates.
 *
 * 1. Page hero
 * 2. Steps
 * 3. Tiers
 * 4. Contact
 */

/* ==========================================================================
   1. Page hero
   ========================================================================== */

.mt-ph { background: var(--mt-bg); }

.mt-ph__box {
	position: relative;
	overflow: hidden;
	padding: clamp(34px, 5vw, 76px) clamp(24px, 4vw, 60px);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--mt-radius);
	background: var(--mt-dark);
	color: #fff;
}

.mt-ph__aura {
	position: absolute;
	right: -12%;
	top: -46%;
	width: min(680px, 70%);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(214, 255, 87, 0.22), rgba(214, 255, 87, 0) 66%);
	pointer-events: none;
}

.mt-ph__grid {
	position: relative;
	z-index: 2;
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.mt-ph__title {
	margin: 20px 0 0;
	max-width: 18ch;
	font-size: clamp(32px, 4.4vw, 56px);
	line-height: 1.08;
	letter-spacing: -1.8px;
	font-weight: 700;
	color: #fff;
}

.mt-ph__text {
	margin: 20px 0 0;
	max-width: 50ch;
	font-family: var(--mt-font-body);
	font-size: 16.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.8);
}

.mt-ph__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

.mt-ph__note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 20px 0 0;
	font-family: var(--mt-font-body);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
}

.mt-ph__pulse {
	position: relative;
	width: 9px;
	height: 9px;
	flex: none;
	border-radius: 50%;
	background: var(--mt-glow);
}

.mt-ph__pulse::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid rgba(214, 255, 87, 0.5);
	animation: mt-pulse 2.4s var(--mt-ease) infinite;
}

.mt-ph__media {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.9);
}

.mt-ph__img { width: 100%; height: auto; }

/* Stat band across the foot of the hero. */
.mt-ph__stats {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 1px;
	margin: clamp(28px, 4vw, 48px) 0 0;
	padding: 0;
	list-style: none;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.mt-ph__stats li {
	padding: 22px 24px;
	background: var(--mt-dark);
}

.mt-ph__stats strong {
	display: block;
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 800;
	letter-spacing: -1.2px;
	color: var(--mt-glow);
}

.mt-ph__stats span {
	display: block;
	margin-top: 6px;
	font-family: var(--mt-font-body);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 720px) {
	.mt-ph__stats { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.mt-ph__grid { grid-template-columns: 1.1fr 0.9fr; }
	.mt-ph__stats { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   2. Steps
   ========================================================================== */

.mt-steps { background: var(--mt-bg); }

.mt-steps__head { max-width: 60ch; }

.mt-steps__list {
	position: relative;
	display: grid;
	gap: 22px;
	margin: clamp(32px, 4vw, 56px) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: mt-step;
}

.mt-steps__item {
	position: relative;
	padding: 30px 28px;
	border: 1px solid rgba(18, 55, 42, 0.12);
	border-radius: 26px;
	background: #fff;
	transition: transform 0.42s cubic-bezier(0.33, 0.8, 0.4, 1), border-color 0.35s ease, box-shadow 0.45s ease;
}

.mt-steps__item:hover {
	transform: translateY(-5px);
	border-color: rgba(149, 191, 71, 0.6);
	box-shadow: 0 34px 58px -44px rgba(18, 55, 42, 0.55);
}

.mt-steps__marker {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mt-steps__num {
	font-family: var(--mt-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--mt-lime);
}

.mt-steps__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--mt-lime);
	color: var(--mt-dark);
	transition: transform 0.45s cubic-bezier(0.33, 0.8, 0.4, 1);
}

.mt-steps__item:hover .mt-steps__icon { transform: scale(1.06); }

.mt-steps__icon svg { width: 21px; height: 21px; }

.mt-steps__title {
	margin: 22px 0 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--mt-ink);
}

.mt-steps__text {
	margin: 12px 0 0;
	font-family: var(--mt-font-body);
	font-size: 15px;
	line-height: 1.62;
	color: var(--mt-muted);
}

@media (min-width: 900px) {
	.mt-steps__list { grid-template-columns: repeat(3, 1fr); }

	/* A hairline joins the three markers so the sequence reads as a path. */
	.mt-steps__list::before {
		content: "";
		position: absolute;
		left: 8%;
		right: 8%;
		top: 52px;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgba(149, 191, 71, 0.6), transparent);
	}
}

/* ==========================================================================
   3. Tiers
   ========================================================================== */

.mt-tiers { background: var(--mt-bg-cream); }

.mt-tiers__head { max-width: 60ch; }

.mt-tiers__list {
	display: grid;
	gap: 20px;
	margin: clamp(32px, 4vw, 56px) 0 0;
	padding: 0;
	list-style: none;
	align-items: start;
}

.mt-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px 30px;
	border: 1px solid rgba(18, 55, 42, 0.14);
	border-radius: 28px;
	background: #fff;
	transition: transform 0.42s cubic-bezier(0.33, 0.8, 0.4, 1), border-color 0.35s ease, box-shadow 0.45s ease;
}

.mt-tier:hover {
	transform: translateY(-6px);
	box-shadow: 0 40px 66px -46px rgba(18, 55, 42, 0.5);
}

.mt-tier.is-featured {
	border-color: var(--mt-dark);
	box-shadow: 0 0 0 1px var(--mt-dark) inset;
}

.mt-tier__flag {
	position: absolute;
	right: 24px;
	top: -13px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--mt-dark);
	color: #fff;
	font-family: var(--mt-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.mt-tier__name {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mt-muted);
}

.mt-tier__value {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 12px 0 0;
}

.mt-tier__value strong {
	font-size: clamp(38px, 4.4vw, 52px);
	font-weight: 800;
	letter-spacing: -2px;
	color: var(--mt-ink);
}

.mt-tier__value span {
	font-family: var(--mt-font-body);
	font-size: 15px;
	color: var(--mt-muted);
}

.mt-tier__text {
	margin: 14px 0 0;
	font-family: var(--mt-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--mt-muted);
}

.mt-tier__features {
	margin: 22px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid rgba(18, 55, 42, 0.1);
	list-style: none;
	display: grid;
	gap: 11px;
}

.mt-tier__features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--mt-font-body);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--mt-ink);
}

.mt-tier__tick {
	display: grid;
	place-items: center;
	width: 19px;
	height: 19px;
	margin-top: 1px;
	flex: none;
	border-radius: 50%;
	background: rgba(149, 191, 71, 0.22);
	color: var(--mt-dark);
}

.mt-tier__tick svg { width: 10px; height: 10px; }

.mt-tiers__note {
	margin: 26px 0 0;
	font-family: var(--mt-font-body);
	font-size: 14px;
	color: var(--mt-muted);
	text-align: center;
}

@media (min-width: 860px) {
	.mt-tiers__list { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   4. Contact
   ========================================================================== */

.mt-cnt { background: var(--mt-bg); }

.mt-cnt__grid {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.mt-cnt__methods {
	display: grid;
	gap: 12px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.mt-cnt__method {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 22px;
	border: 1px solid rgba(18, 55, 42, 0.12);
	border-radius: 22px;
	background: #fff;
	transition: transform 0.42s cubic-bezier(0.33, 0.8, 0.4, 1), border-color 0.35s ease;
}

.mt-cnt__method:hover {
	transform: translateY(-4px);
	border-color: rgba(149, 191, 71, 0.6);
}

.mt-cnt__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 13px;
	background: var(--mt-lime);
	color: var(--mt-dark);
}

.mt-cnt__icon svg { width: 20px; height: 20px; }

.mt-cnt__body strong {
	display: block;
	font-size: 17px;
	letter-spacing: -0.3px;
	color: var(--mt-ink);
}

.mt-cnt__detail {
	display: block;
	margin-top: 6px;
	font-family: var(--mt-font-body);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--mt-muted);
}

.mt-cnt__cue {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-family: var(--mt-font-body);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--mt-dark);
	text-decoration: none;
}

.mt-cnt__cue svg { width: 14px; height: 14px; transition: transform 0.45s cubic-bezier(0.33, 0.8, 0.4, 1); }

.mt-cnt__method:hover .mt-cnt__cue svg { transform: translateX(4px); }

/* Form panel */
.mt-cnt__panel {
	padding: clamp(24px, 3vw, 38px);
	border: 1px solid rgba(18, 55, 42, 0.14);
	border-radius: var(--mt-radius);
	background: #fff;
	box-shadow: 0 34px 66px -50px rgba(18, 55, 42, 0.5);
}

.mt-cnt__alert {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 16px;
	font-family: var(--mt-font-body);
	font-size: 14.5px;
	line-height: 1.55;
}

.mt-cnt__alert--ok {
	background: rgba(149, 191, 71, 0.16);
	color: #1d4426;
}

.mt-cnt__alert--bad {
	background: rgba(200, 70, 60, 0.1);
	color: #7d2a25;
}

.mt-cnt__row {
	display: grid;
	gap: 16px;
}

.mt-cnt__field {
	margin: 0 0 16px;
}

.mt-cnt__field label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--mt-font-body);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mt-ink);
}

.mt-cnt__field input,
.mt-cnt__field select,
.mt-cnt__field textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(18, 55, 42, 0.18);
	border-radius: 14px;
	background: var(--mt-bg);
	font-family: var(--mt-font-body);
	font-size: 15px;
	color: var(--mt-ink);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.mt-cnt__field textarea { resize: vertical; min-height: 120px; }

.mt-cnt__field input:focus,
.mt-cnt__field select:focus,
.mt-cnt__field textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--mt-dark);
	box-shadow: 0 0 0 4px rgba(149, 191, 71, 0.22);
}

/* Honeypot stays in the DOM but out of sight and out of the tab order. */
.mt-cnt__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mt-cnt__submit { width: 100%; margin-top: 4px; }

.mt-cnt__note {
	margin: 16px 0 0;
	font-family: var(--mt-font-body);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mt-muted);
	text-align: center;
}

@media (min-width: 620px) {
	.mt-cnt__row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
	.mt-cnt__grid { grid-template-columns: 0.9fr 1.1fr; }

	/* ------------------------------------------------------------------
	   Sticky columns.

	   Both columns get `position: sticky`, and the grid keeps
	   `align-items: start`, so each item is only as tall as its content
	   while its *grid area* still spans the full row height. That gap is
	   the sticky travel: whichever column is shorter pins itself to the
	   top of the viewport and stays there until the taller column has
	   finished scrolling. The taller column has ~0 travel, so it simply
	   scrolls. No JS decides which one sticks — the layout does.

	   `.is-tall` is added by home.js when a column is taller than the
	   viewport. Pinning that one to the top would cut its bottom off, so
	   it anchors to the bottom instead: it scrolls with the page until
	   its last line is visible, then pins.
	   ------------------------------------------------------------------ */
	.mt-cnt__intro,
	.mt-cnt__panel {
		position: sticky;
		top: var(--mt-cnt-sticky, calc(var(--mt-nav-h, 78px) + 28px));
	}

	.mt-cnt__intro.is-tall,
	.mt-cnt__panel.is-tall {
		top: auto;
		bottom: 28px;
	}

	/* A sticky element cannot overflow its own stacking context cleanly —
	   give the panel's focus rings and shadow room to breathe. */
	.mt-cnt__intro,
	.mt-cnt__panel { align-self: start; }
}

/* Sticky positioning needs an unclipped ancestor chain. If any parent ever
   picks up `overflow: hidden`, the pin silently dies — assert it here. */
.mt-cnt,
.mt-cnt__grid { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
	.mt-steps__item:hover,
	.mt-tier:hover,
	.mt-cnt__method:hover { transform: none; }
}

/* ==========================================================================
   5. Rotating card deck
   --------------------------------------------------------------------------
   Cards are positioned entirely from a `data-pos` attribute, so the script
   only ever rewrites one attribute per card per tick and the browser
   interpolates the rest. Transform and opacity only — no layout, no repaint of
   the images.

   Palette: warm sand (#f6f1e8, the theme's existing --mt-bg-beige token). The
   section used to be the same near-black green as the hero, which put three
   dark bands on one page and left the phone screenshots with nothing to sit
   against. On sand the dark device bezels read as objects on a surface, and
   the lime accents stay the brightest thing in the section.

   The tint is exposed as `--mt-deck-tint` so a child theme can repaint the
   section with one declaration — everything below derives from it.
   ========================================================================== */

.mt-deck {
	--mt-deck-tint: #f6f1e8;

	position: relative;
	background: var(--mt-deck-tint);
	color: var(--mt-ink);
	border: 1px solid rgba(60, 48, 32, 0.08);
	border-radius: 32px;
	overflow: hidden;
}

/* Two soft washes rather than a flat fill: a lime bloom behind the cards and a
   warm pool bottom-left, so the tint has some depth without turning into a
   visible gradient band. Both are transparent, so they ride on top of whatever
   `--mt-deck-tint` is set to. */
.mt-deck::before {
	content: "";
	position: absolute;
	right: -10%;
	top: -40%;
	width: min(720px, 80%);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(149, 191, 71, 0.16), rgba(149, 191, 71, 0) 64%);
	pointer-events: none;
}

.mt-deck::after {
	content: "";
	position: absolute;
	left: -14%;
	bottom: -46%;
	width: min(620px, 72%);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(96, 76, 48, 0.07), rgba(96, 76, 48, 0) 66%);
	pointer-events: none;
}

.mt-deck__grid {
	position: relative;
	z-index: 2;
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.mt-deck__title {
	margin: 20px 0 0;
	max-width: 16ch;
	font-size: clamp(28px, 3.8vw, 46px);
	line-height: 1.1;
	letter-spacing: -1.5px;
	font-weight: 700;
	color: var(--mt-dark);
}

.mt-deck__text {
	margin: 18px 0 0;
	max-width: 46ch;
	font-family: var(--mt-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--mt-muted);
}

.mt-deck__actions {
	margin-top: 28px;
}

/* --- stage --------------------------------------------------------------- */

.mt-deck__stage {
	position: relative;
	min-height: clamp(260px, 34vw, 380px);
	perspective: 1200px;

	/*
	 * Feather the left and right edges so the outermost cards dissolve into
	 * the background instead of being chopped off by the section's rounded
	 * corner. A mask beats an overlaying gradient here: it needs no fixed
	 * colour, so it keeps working if the tint is ever changed.
	 *
	 * The feather is deliberately narrow (4%). At 9% it overlapped the whole
	 * outer card, and stacked on that card's own opacity the two multiplied —
	 * the edges washed out to near-invisible ghosts. Now the fade only catches
	 * the last sliver, where the card actually meets the section edge.
	 */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

/* Without a mask the cards would still be readable — just hard-edged — so this
   is a pure enhancement and needs no fallback. */
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
	.mt-deck__stage {
		overflow: hidden;
	}
}

.mt-deck__track {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-deck__card {
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(140px, 15vw, 200px);
	aspect-ratio: 3 / 4;
	margin: 0;
	transform: translate(-50%, -50%);
	transition: transform 0.75s cubic-bezier(0.33, 0.8, 0.4, 1), opacity 0.6s ease, filter 0.6s ease;
	will-change: transform, opacity;
}

.mt-deck__inner {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	overflow: hidden;
	background: #0d1f16;
	/* Softer and warmer than the old near-black drop: a hard black shadow on a
	   pale tint reads as dirt rather than depth. */
	box-shadow: 0 26px 44px -24px rgba(58, 45, 30, 0.42);
	text-decoration: none;
	color: #fff;
}

.mt-deck__img,
.mt-deck__inner .mt-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mt-deck__label {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	display: block;
	padding: 8px 10px;
	border-radius: 10px;
	background: rgba(9, 20, 14, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-family: var(--mt-font-body);
	line-height: 1.3;
}

.mt-deck__label strong {
	display: block;
	font-size: 13.5px;
	color: #fff;
}

.mt-deck__label span {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.7);
}

/* Position ladder. Anything beyond ±2 parks off-stage and fades out. */
.mt-deck__card { opacity: 0; z-index: 0; transform: translate(-50%, -50%) scale(0.6); pointer-events: none; }

.mt-deck__card[data-pos="0"] {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
	z-index: 5;
	pointer-events: auto;
}

/*
 * Side cards recede with opacity and desaturation, not `brightness()`. On the
 * old dark section, darkening pushed a card back; on mint it does the
 * opposite — a darker card on a pale ground reads as *heavier* and fights the
 * centred one for attention.
 */
.mt-deck__card[data-pos="-1"],
.mt-deck__card[data-pos="1"] {
	opacity: 0.88;
	z-index: 4;
	filter: saturate(0.85);
	pointer-events: auto;
}

.mt-deck__card[data-pos="-1"] { transform: translate(calc(-50% - 92%), -50%) scale(0.86); }
.mt-deck__card[data-pos="1"] { transform: translate(calc(-50% + 92%), -50%) scale(0.86); }

/* Raised from 0.5: the outer pair also sits under the stage's edge mask, and
   the two fades multiplied into a barely-there ghost. The depth cue now comes
   mostly from scale and desaturation, which survive the mask. */
.mt-deck__card[data-pos="-2"],
.mt-deck__card[data-pos="2"] {
	opacity: 0.78;
	z-index: 3;
	filter: saturate(0.7);
}

.mt-deck__card[data-pos="-2"] { transform: translate(calc(-50% - 170%), -50%) scale(0.74); }
.mt-deck__card[data-pos="2"] { transform: translate(calc(-50% + 170%), -50%) scale(0.74); }

/* --- no-script fallback --------------------------------------------------- */

/* The arrows are gone — the deck advances on its own, so a control that only
   repeats the timer was dead weight and a tab stop that led nowhere. Anything
   still targeting `.mt-deck__controls` in a child theme can be deleted. */

/* No script, no rotation: show the deck as a simple readable row instead of a
   pile of stacked cards. */
.mt-deck:not(.is-ready) .mt-deck__track {
	position: static;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.mt-deck:not(.is-ready) .mt-deck__card {
	position: static;
	transform: none;
	opacity: 1;
	filter: none;
	pointer-events: auto;
	width: clamp(130px, 18vw, 170px);
}

/* The fallback row is a flow layout, not a fanned stage — feathering its edges
   would just clip the first and last card. */
.mt-deck:not(.is-ready) .mt-deck__stage {
	-webkit-mask-image: none;
	mask-image: none;
}

@media (min-width: 900px) {
	.mt-deck__grid {
		grid-template-columns: 0.92fr 1.08fr;
	}
}

@media (max-width: 640px) {
	.mt-deck__card { width: clamp(128px, 40vw, 168px); }
	.mt-deck__card[data-pos="-1"] { transform: translate(calc(-50% - 74%), -50%) scale(0.82); }
	.mt-deck__card[data-pos="1"] { transform: translate(calc(-50% + 74%), -50%) scale(0.82); }
	.mt-deck__card[data-pos="-2"],
	.mt-deck__card[data-pos="2"] { opacity: 0; }
}

/*
 * Reduced motion removes the travel, not the rotation.
 *
 * The deck keeps cycling so every store is still seen — the cards just cut
 * from one position to the next instead of gliding. `.is-static` is set by the
 * script and also covers the Customizer's global animations switch; the media
 * query below is the no-JS safety net for the same preference.
 */
.mt-deck.is-static .mt-deck__card {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.mt-deck__card { transition: none; }
}

/* ==========================================================================
   5b. Deck card shapes
   --------------------------------------------------------------------------
   The deck was built at 3:4, which crops a mobile screenshot badly. Phone is
   now the default shape: a 9:19.5 card with a bezel and a notch, so a
   storefront screenshot reads as a device rather than a cropped picture.

   Each shape sets its own width and fan-out distance — a tall thin card needs
   less horizontal offset than a wide one or the deck spreads off the stage.
   ========================================================================== */

.mt-deck--phone .mt-deck__card {
	width: clamp(112px, 11.5vw, 158px);
	aspect-ratio: 9 / 19.5;
}

.mt-deck--phone .mt-deck__card[data-pos="-1"] { transform: translate(calc(-50% - 104%), -50%) scale(0.88); }
.mt-deck--phone .mt-deck__card[data-pos="1"] { transform: translate(calc(-50% + 104%), -50%) scale(0.88); }
.mt-deck--phone .mt-deck__card[data-pos="-2"] { transform: translate(calc(-50% - 196%), -50%) scale(0.76); }
.mt-deck--phone .mt-deck__card[data-pos="2"] { transform: translate(calc(-50% + 196%), -50%) scale(0.76); }

.mt-deck--phone .mt-deck__stage {
	min-height: clamp(300px, 36vw, 430px);
}

.mt-deck--square .mt-deck__card { aspect-ratio: 1; width: clamp(150px, 16vw, 215px); }
.mt-deck--wide .mt-deck__card { aspect-ratio: 16 / 10; width: clamp(190px, 22vw, 300px); }

.mt-deck--wide .mt-deck__card[data-pos="-1"] { transform: translate(calc(-50% - 78%), -50%) scale(0.86); }
.mt-deck--wide .mt-deck__card[data-pos="1"] { transform: translate(calc(-50% + 78%), -50%) scale(0.86); }
.mt-deck--wide .mt-deck__card[data-pos="-2"] { transform: translate(calc(-50% - 146%), -50%) scale(0.74); }
.mt-deck--wide .mt-deck__card[data-pos="2"] { transform: translate(calc(-50% + 146%), -50%) scale(0.74); }

/* --- device frame -------------------------------------------------------- */

.mt-deck--framed .mt-deck__inner {
	padding: 6px;
	border-radius: 26px;
	background: linear-gradient(160deg, #2b3a31 0%, #101f18 60%, #223129 100%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.08) inset,
		0 28px 48px -24px rgba(58, 45, 30, 0.5);
}

.mt-deck--framed .mt-deck__img,
.mt-deck--framed .mt-deck__inner .mt-ph {
	border-radius: 20px;
}

/* The notch sits above the screenshot, inside the bezel. */
.mt-deck__notch {
	position: absolute;
	left: 50%;
	top: 10px;
	z-index: 3;
	width: 34%;
	height: 8px;
	border-radius: 999px;
	background: #0b1712;
	transform: translateX(-50%);
}

/* Caption clears the bezel and the home indicator. */
.mt-deck--framed .mt-deck__label {
	left: 10px;
	right: 10px;
	bottom: 14px;
	border-radius: 14px;
}

.mt-deck--framed .mt-deck__inner::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 7px;
	width: 28%;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.35);
	transform: translateX(-50%);
}

/* Phone cards are narrow, so the fallback row can hold more of them. */
.mt-deck--phone:not(.is-ready) .mt-deck__card {
	width: clamp(104px, 15vw, 140px);
}

@media (max-width: 640px) {
	.mt-deck--phone .mt-deck__card { width: clamp(108px, 32vw, 140px); }
	.mt-deck--phone .mt-deck__card[data-pos="-1"] { transform: translate(calc(-50% - 84%), -50%) scale(0.84); }
	.mt-deck--phone .mt-deck__card[data-pos="1"] { transform: translate(calc(-50% + 84%), -50%) scale(0.84); }
	.mt-deck--framed .mt-deck__inner { padding: 5px; border-radius: 22px; }
	.mt-deck--framed .mt-deck__img { border-radius: 17px; }
}

/* The arrows used to reserve 46px under the stage on mobile. With them gone
   the stage can use its full height, but keep a little room so the centred
   card's caption never collides with the section padding. */
@media (max-width: 640px) {
	.mt-deck__stage {
		padding-bottom: 8px;
	}
}