/**
 * Landing-page sections — Mate Themes
 *
 * 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__req {
	color: #c0392b;
}

.mt-cnt__field.has-error input,
.mt-cnt__field.has-error select,
.mt-cnt__field.has-error textarea {
	border-color: #c0392b;
	background: rgba(192, 57, 43, 0.04);
}

.mt-cnt__field.has-error input:focus,
.mt-cnt__field.has-error select:focus,
.mt-cnt__field.has-error textarea:focus {
	box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.16);
}

.mt-cnt__error {
	display: block;
	margin-top: 6px;
	font-family: var(--mt-font-body);
	font-size: 12.5px;
	font-weight: 600;
	color: #c0392b;
}

.mt-cnt__required-note {
	margin: -6px 0 16px;
	font-family: var(--mt-font-body);
	font-size: 12px;
	color: rgba(18, 55, 42, 0.55);
}

.mt-cnt__hint {
	display: block;
	margin-top: 6px;
	font-family: var(--mt-font-body);
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(18, 55, 42, 0.6);
}

.mt-cnt__field input[type="file"] {
	padding: 22px 16px;
	border-style: dashed;
	background: rgba(18, 55, 42, 0.03);
	cursor: pointer;
}

.mt-cnt__field input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	border: 1px solid rgba(18, 55, 42, 0.18);
	border-radius: 999px;
	background: #fff;
	font-family: var(--mt-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--mt-ink);
	cursor: pointer;
	transition: border-color 0.3s ease;
}

.mt-cnt__field input[type="file"]:hover::file-selector-button {
	border-color: var(--mt-dark);
}

.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 left column.

	   The intro column pins to the top while the form column scrolls
	   past it, until the intro's own bottom edge is reached — standard
	   CSS sticky behaviour inside a grid with `align-items: start`. This
	   is deliberately one-directional (only .mt-cnt__intro is sticky):
	   the form keeps growing as fields get added, so pinning "whichever
	   column is shorter" would flip the direction the moment the form
	   overtook the intro in height. Pinning the intro explicitly keeps
	   the behaviour predictable regardless of how long the form gets.

	   `.is-tall` (added by home.js when the intro is taller than the
	   viewport) switches it to a bottom anchor so a very long intro
	   scrolls until its last line is visible, then pins there, instead
	   of pinning at the top and cutting its bottom off.
	   ------------------------------------------------------------------ */
	.mt-cnt__intro {
		position: sticky;
		top: var(--mt-cnt-sticky, calc(var(--mt-nav-h, 78px) + 28px));
		align-self: start;
	}

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

/* 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;
	}
}

/* ==========================================================================
   5. About
   -------------------------------------------------------------------------
   Original layout for this theme: no icon-card grid (three other sections
   already use one) — a wide editorial intro, one statement set apart with a
   rule and larger type, then a numbered list of principles read top to
   bottom. Reuses .mt-cta__box for the closing band rather than duplicating
   that component.
   ========================================================================== */

.mt-about__intro {
	max-width: 760px;
	text-align: center;
	margin-inline: auto;
}

.mt-about__lede {
	margin-inline: auto;
	max-width: 56ch;
}

.mt-about__statement {
	margin: clamp(40px, 6vw, 76px) auto 0;
	max-width: 760px;
	padding-left: clamp(20px, 3vw, 32px);
	border-left: 3px solid var(--mt-lime);
}

.mt-about__statement p {
	margin: 0;
	font-family: var(--mt-font-body);
	font-size: clamp(20px, 2.6vw, 27px);
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: -0.3px;
	color: var(--mt-ink);
}

.mt-about__principles {
	margin-top: clamp(56px, 8vw, 100px);
}

.mt-about__principles-head {
	max-width: 620px;
}

.mt-about__list {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mt-hair);
}

.mt-about__row {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 4px 20px;
	padding: 28px 0;
	border-bottom: 1px solid var(--mt-hair);
}

.mt-about__num {
	font-family: var(--mt-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mt-lime);
}

.mt-about__row-title {
	grid-column: 2;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.2px;
	color: var(--mt-ink);
}

.mt-about__row-text {
	grid-column: 2;
	margin-top: 6px;
	font-family: var(--mt-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--mt-muted);
}

@media (min-width: 760px) {
	.mt-about__row {
		grid-template-columns: 80px 260px 1fr;
		align-items: baseline;
		gap: 4px 32px;
	}

	.mt-about__num {
		font-size: 16px;
	}

	.mt-about__row-title {
		grid-column: 2;
	}

	.mt-about__row-text {
		grid-column: 3;
		margin-top: 0;
	}
}