/**
 * Mayna Free Tools.
 *
 * Built on the OnlineZone theme's own design tokens (--ozt-*) so the tools
 * section matches the rest of the site, with fallbacks so it still looks
 * right if the theme is ever changed.
 *
 * Motion rules followed throughout:
 *   - only transform and opacity are animated, so nothing triggers layout
 *   - anything that loops is paused unless it is on screen or hovered
 *   - every effect is switched off under prefers-reduced-motion
 */

.mft {
	--mft-primary: #2563EB;
	--mft-accent: #14B8A6;
	--mft-violet: #7C3AED;

	--mft-bg: var(--ozt-bg, #F8FAFC);
	--mft-surface: var(--ozt-surface, #FFFFFF);
	--mft-ink: var(--ozt-ink, #0F172A);
	--mft-ink-2: var(--ozt-ink-2, #334155);
	--mft-text: var(--ozt-text, #475569);
	--mft-muted: var(--ozt-muted, #64748B);
	--mft-line: var(--ozt-line, #E2E8F0);
	--mft-soft: var(--ozt-soft, #F1F5F9);
	--mft-green: var(--ozt-green, #15803D);
	--mft-green-50: var(--ozt-green-50, #DCFCE7);
	--mft-amber: var(--ozt-amber, #B45309);
	--mft-amber-50: var(--ozt-amber-50, #FEF3C7);
	--mft-red: var(--ozt-red, #DC2626);
	--mft-red-50: var(--ozt-red-50, #FEE2E2);

	--mft-r-sm: var(--ozt-r-sm, 10px);
	--mft-r: var(--ozt-r, 14px);
	--mft-r-lg: var(--ozt-r-lg, 18px);
	--mft-r-xl: var(--ozt-r-xl, 22px);

	--mft-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	--mft-shadow-md: 0 10px 30px rgba(15, 23, 42, .07);
	--mft-shadow-lg: 0 18px 44px rgba(15, 23, 42, .12);

	--mft-font: var(--ozt-font, 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif);
	--mft-display: var(--ozt-display, 'Plus Jakarta Sans', var(--mft-font));

	--mft-wrap: var(--ozt-wrap, 1280px);
	--mft-gutter: var(--ozt-gutter, 18px);

	--mft-ease: cubic-bezier(.22, 1, .36, 1);

	--c1: var(--mft-primary);
	--c2: var(--mft-accent);
}

.mft .mft-main {
	position: relative;
	background: var(--mft-bg);
	font-family: var(--mft-font);
	color: var(--mft-text);
	padding-bottom: 54px;
	overflow-x: clip;
}

/* A soft wash of colour behind the whole section, so the card grid is not
   sitting on flat grey. */
.mft .mft-main::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 900px;
	background:
		radial-gradient(60% 45% at 12% 8%, rgba(37, 99, 235, .07), transparent 60%),
		radial-gradient(50% 40% at 88% 22%, rgba(20, 184, 166, .07), transparent 62%),
		radial-gradient(45% 35% at 50% 60%, rgba(124, 58, 237, .05), transparent 65%);
	pointer-events: none;
	z-index: 0;
}

.mft-wrap {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--mft-wrap);
	margin-inline: auto;
	padding-inline: var(--mft-gutter);
}

.mft-wrap--narrow { max-width: 820px; }
.mft-icon { flex: 0 0 auto; }

/*
 * Scroll reveal.
 *
 * The hiding is scoped to .mft-js, which an inline script in <head> sets
 * before the first paint. That ordering matters: if the class were added by
 * the deferred script instead, the cards would paint, vanish, then fade back
 * in. With no JavaScript at all the class never appears and everything is
 * simply visible, which is also the correct result.
 */
.mft-js .mft-group,
.mft-js .mft-card,
.mft-js .mft-panel,
.mft-js .mft-note,
.mft-js .mft-related,
.mft-js .mft-callout {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity .55s var(--mft-ease), transform .55s var(--mft-ease);
	transition-delay: var(--d, 0ms);
	will-change: opacity, transform;
}

.mft-js .is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/*
 * Failsafe. Hiding content until a script says otherwise is a bad bet on a
 * public page: a blocked CDN, an extension or a JavaScript error would leave
 * a visitor staring at nothing. This reveals everything after 2.5 seconds
 * whatever happens, and costs nothing when the script works normally.
 */
.mft-js .mft-group,
.mft-js .mft-card,
.mft-js .mft-panel,
.mft-js .mft-note,
.mft-js .mft-related,
.mft-js .mft-callout {
	animation: mft-failsafe 1ms linear 2.5s forwards;
}

@keyframes mft-failsafe {
	to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- 1. Hero */

.mft-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 42px 0 38px;
	background: linear-gradient(160deg, #0B1226 0%, #13203F 45%, #0E2C38 100%);
	color: #fff;
}

.mft-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* Drifting colour: three blurred blobs, each on its own slow loop. */
.mft-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .55;
	will-change: transform;
}

.mft-orb--1 {
	width: 460px; height: 460px;
	top: -170px; left: -90px;
	background: radial-gradient(circle, #2563EB, transparent 68%);
	animation: mft-drift-a 19s var(--mft-ease) infinite alternate;
}

.mft-orb--2 {
	width: 400px; height: 400px;
	top: -120px; right: -70px;
	background: radial-gradient(circle, #14B8A6, transparent 68%);
	animation: mft-drift-b 23s var(--mft-ease) infinite alternate;
}

.mft-orb--3 {
	width: 340px; height: 340px;
	bottom: -190px; left: 42%;
	background: radial-gradient(circle, #7C3AED, transparent 70%);
	animation: mft-drift-c 27s var(--mft-ease) infinite alternate;
	opacity: .42;
}

@keyframes mft-drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(70px, 50px, 0) scale(1.18); }
}
@keyframes mft-drift-b {
	from { transform: translate3d(0, 0, 0) scale(1.1); }
	to   { transform: translate3d(-80px, 70px, 0) scale(.92); }
}
@keyframes mft-drift-c {
	from { transform: translate3d(-40px, 0, 0) scale(.95); }
	to   { transform: translate3d(60px, -50px, 0) scale(1.15); }
}

/* A faint engineering grid, which reads as "utility" without shouting. */
.mft-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(120% 85% at 50% 0%, #000 35%, transparent 78%);
	-webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 35%, transparent 78%);
}

.mft-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 14px 0 12px;
	padding: 6px 13px 6px 9px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .01em;
	color: #CBD5E1;
}

.mft-eyebrow .mft-icon { color: #5EEAD4; }

.mft-hero__title {
	margin: 0 0 10px;
	font-family: var(--mft-display);
	font-weight: 800;
	font-size: clamp(30px, 6vw, 52px);
	line-height: 1.06;
	letter-spacing: -.028em;
	color: #fff;
}

/* The second word carries a slow light sweep. */
.mft-shine {
	background: linear-gradient(100deg, #5EEAD4 0%, #93C5FD 28%, #fff 44%, #93C5FD 60%, #5EEAD4 100%);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: mft-shine 7s linear infinite;
}

@keyframes mft-shine {
	from { background-position: 300% 50%; }
	to   { background-position: 0% 50%; }
}

.mft-hero__lead {
	margin: 0 0 22px;
	max-width: 48ch;
	font-size: clamp(14.5px, 2.6vw, 17.5px);
	line-height: 1.6;
	color: #AEBDD2;
}

.mft-hero__privacy {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 18px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #94A3B8;
	flex-wrap: wrap;
}

.mft-hero__privacy .mft-icon { color: #5EEAD4; }
.mft-hero__privacy a { color: #93C5FD; font-weight: 700; }
.mft-hero__privacy a:hover { color: #fff; }

/* Three numbers that say what the page is, in one glance. */
.mft-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.mft-stats li {
	flex: 1 1 150px;
	padding: 13px 15px;
	border: 1px solid rgba(255, 255, 255, .11);
	border-radius: var(--mft-r);
	background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.mft-stats b {
	display: block;
	font-family: var(--mft-display);
	font-weight: 800;
	font-size: 25px;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.mft-stats span {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	line-height: 1.4;
	color: #93A4BC;
}

/* --------------------------------------------------------------- 2. Search */

.mft-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	max-width: 640px;
	padding: 0 14px;
	background: rgba(255, 255, 255, .98);
	border-radius: var(--mft-r-lg);
	box-shadow: 0 18px 44px rgba(2, 6, 23, .4);
	transition: transform .25s var(--mft-ease), box-shadow .25s var(--mft-ease);
}

/* A coloured halo that fades in on focus. */
.mft-search::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: linear-gradient(120deg, var(--mft-primary), var(--mft-accent), var(--mft-violet));
	opacity: 0;
	z-index: -1;
	filter: blur(9px);
	transition: opacity .3s var(--mft-ease);
}

.mft-search:focus-within { transform: translateY(-2px); }
.mft-search:focus-within::before { opacity: .85; }

.mft-search > .mft-icon { color: var(--mft-muted); transition: color .25s; }
.mft-search:focus-within > .mft-icon { color: var(--mft-primary); }

.mft-search input {
	flex: 1 1 auto;
	min-width: 0;
	height: 54px;
	padding: 0;
	border: 0;
	background: none;
	font: 500 16px/1 var(--mft-font);
	color: var(--mft-ink);
}

.mft-search input:focus { outline: none; }
.mft-search input::placeholder { color: #94A3B8; font-weight: 400; }
.mft-search input::-webkit-search-cancel-button { display: none; }

.mft-search__clear {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 9px;
	background: var(--mft-soft);
	color: var(--mft-muted);
	cursor: pointer;
	transition: background .18s, color .18s, transform .18s;
}

.mft-search__clear:hover { background: var(--mft-red-50); color: var(--mft-red); transform: rotate(90deg); }

/* --------------------------------------------- 2b. Live search results */

.mft-suggest {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 340px;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var(--mft-line);
	border-radius: var(--mft-r);
	background: var(--mft-surface);
	box-shadow: 0 18px 44px rgba(2, 6, 23, .28);
	animation: mft-fade-in .18s var(--mft-ease);
}

.mft-suggest[hidden] { display: none; }

.mft-suggest__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 13px;
	border-radius: var(--mft-r-sm);
	text-decoration: none;
	transition: background .14s;
}

.mft .mft-suggest__name { font-size: 14px; font-weight: 700; color: var(--mft-ink); }
.mft-suggest__cat { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--mft-muted); }

.mft-suggest__row:hover,
.mft-suggest__row.is-picked { background: color-mix(in srgb, var(--mft-primary) 9%, #fff); }
.mft .mft-suggest__row.is-picked .mft-suggest__name { color: var(--mft-primary); }

/* ------------------------------------------- 2c. Tasks, popular, recent */

.mft-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-family: var(--mft-display);
	font-weight: 800;
	font-size: clamp(17px, 3.2vw, 21px);
	letter-spacing: -.016em;
	color: var(--mft-ink);
}

.mft-section-title .mft-icon { color: var(--mft-primary); }

.mft-tasks { margin-top: 30px; }

.mft-tasks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 12px;
}

.mft-task {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 15px 16px;
	border: 1px solid var(--mft-line);
	border-radius: var(--mft-r-lg);
	background: linear-gradient(140deg, color-mix(in srgb, var(--c1) 7%, #fff), #fff 62%);
	text-decoration: none;
	box-shadow: var(--mft-shadow);
	transition: transform .28s var(--mft-ease), box-shadow .28s var(--mft-ease), border-color .28s;
}

.mft-task:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--c1) 40%, transparent);
	box-shadow: var(--mft-shadow-md);
}

.mft-task__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--c1), var(--c2));
	color: #fff;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--c1) 28%, transparent);
	transition: transform .3s var(--mft-ease);
}

.mft-task:hover .mft-task__icon { transform: scale(1.07) rotate(-6deg); }

.mft-task__body { flex: 1 1 auto; min-width: 0; }
.mft .mft-task__body strong { display: block; font-family: var(--mft-display); font-size: 15px; font-weight: 700; color: var(--mft-ink); line-height: 1.3; }
.mft .mft-task__body small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--mft-text); }

.mft-task__go { flex: 0 0 auto; color: var(--c1); transition: transform .28s var(--mft-ease); }
.mft-task:hover .mft-task__go { transform: translateX(4px); }

.mft-popular,
.mft-recent { margin-top: 28px; }
.mft-recent[hidden] { display: none; }

.mft-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.mft-pill-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border: 1px solid var(--mft-line);
	border-radius: 999px;
	background: var(--mft-surface);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--mft-shadow);
	transition: transform .2s var(--mft-ease), border-color .2s, box-shadow .2s, color .2s;
}

.mft .mft-pill-link { color: var(--mft-ink-2); }
.mft-pill-link .mft-icon { color: var(--c1, var(--mft-primary)); }

.mft .mft-pill-link:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--c1, var(--mft-primary)) 45%, transparent);
	box-shadow: var(--mft-shadow-md);
	color: var(--c1, var(--mft-primary));
}

/* ---------------------------------------------------------------- 3. Chips */

.mft-chips {
	display: flex;
	gap: 8px;
	margin: 24px 0 6px;
	padding-bottom: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}

.mft-chips::-webkit-scrollbar { display: none; }

.mft-chip {
	position: relative;
	/* Without this the gradient below would paint behind the chip's own
	   background instead of on top of it. */
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	scroll-snap-align: start;
	padding: 10px 15px;
	border: 1px solid var(--mft-line);
	border-radius: 999px;
	background: var(--mft-surface);
	font: 700 13px/1 var(--mft-font);
	color: var(--mft-ink-2);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	transition: border-color .2s, color .2s, transform .2s var(--mft-ease), box-shadow .2s;
}

/* The gradient fill grows from the middle rather than snapping on. */
.mft-chip::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, var(--c1, var(--mft-primary)), var(--c2, var(--mft-accent)));
	opacity: 0;
	transform: scale(.72);
	transition: opacity .26s var(--mft-ease), transform .26s var(--mft-ease);
	z-index: 0;
}

.mft-chip > * { position: relative; z-index: 1; }
.mft-chip .mft-icon { color: var(--c1, var(--mft-primary)); transition: color .2s; }

.mft-chip__text { white-space: nowrap; }

.mft-chip__n {
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--mft-soft);
	font-size: 11px;
	font-weight: 800;
	color: var(--mft-muted);
	transition: background .2s, color .2s;
}

.mft-chip:hover { transform: translateY(-2px); box-shadow: var(--mft-shadow-md); border-color: transparent; }
.mft-chip:active { transform: translateY(0) scale(.97); }

.mft-chip.is-active {
	border-color: transparent;
	color: #fff;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--c1, #2563EB) 32%, transparent);
}

.mft-chip.is-active::before { opacity: 1; transform: scale(1); }
.mft-chip.is-active .mft-icon { color: #fff; }
.mft-chip.is-active .mft-chip__n { background: rgba(255, 255, 255, .24); color: #fff; }

.mft-results {
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--mft-muted);
}

/* --------------------------------------------------------- 4. Groups, cards */

.mft-group { margin-top: 38px; }
.mft-group[hidden] { display: none; }

.mft-group__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.mft-group__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border-radius: var(--mft-r);
	background: linear-gradient(135deg, var(--c1), var(--c2));
	color: #fff;
	box-shadow: 0 10px 24px color-mix(in srgb, var(--c1) 34%, transparent);
}

/* A soft halo that breathes, so the section headers are not dead weight. */
.mft-group__icon::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: inherit;
	background: inherit;
	opacity: .3;
	filter: blur(11px);
	z-index: -1;
	animation: mft-breathe 4.5s ease-in-out infinite;
}

@keyframes mft-breathe {
	0%, 100% { opacity: .22; transform: scale(1); }
	50%      { opacity: .42; transform: scale(1.1); }
}

.mft-group__head h2 {
	margin: 0;
	font-family: var(--mft-display);
	font-weight: 800;
	font-size: clamp(18px, 3.4vw, 23px);
	color: var(--mft-ink);
	letter-spacing: -.016em;
}

.mft-group__head p { margin: 3px 0 0; font-size: 13px; color: var(--mft-muted); }

/* A gradient rule that runs out to the right of the heading. */
.mft-group__rule {
	flex: 1 1 auto;
	height: 1px;
	min-width: 20px;
	background: linear-gradient(90deg, var(--c1), transparent);
	opacity: .35;
}

.mft-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
	gap: 14px;
}

.mft-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 17px 17px 14px;
	border: 1px solid var(--mft-line);
	border-radius: var(--mft-r-lg);
	background:
		linear-gradient(170deg, color-mix(in srgb, var(--c1) 4%, #fff) 0%, #fff 55%);
	box-shadow: var(--mft-shadow);
	transition:
		transform .32s var(--mft-ease),
		box-shadow .32s var(--mft-ease),
		border-color .32s var(--mft-ease);
}

.mft-card[hidden] { display: none; }

/* Gradient border, drawn as a ring so the card keeps its white face. */
.mft-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(135deg, var(--c1), var(--c2));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .32s var(--mft-ease);
	z-index: 2;
	pointer-events: none;
}

/* A pool of light that follows the pointer across the card. */
.mft-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		260px circle at var(--mx, 50%) var(--my, 0%),
		color-mix(in srgb, var(--c1) 13%, transparent),
		transparent 62%
	);
	opacity: 0;
	transition: opacity .32s var(--mft-ease);
	z-index: 0;
	pointer-events: none;
}

.mft-card:hover,
.mft-card:focus-within {
	transform: translateY(-5px);
	border-color: transparent;
	box-shadow: var(--mft-shadow-lg);
}

.mft-card:hover::before,
.mft-card:focus-within::before { opacity: 1; }
.mft-card:hover::after,
.mft-card:focus-within::after { opacity: 1; }

.mft-card > * { position: relative; z-index: 1; }

.mft-card__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--c1), var(--c2));
	color: #fff;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--c1) 28%, transparent);
	transition: transform .34s var(--mft-ease), box-shadow .34s var(--mft-ease);
}

.mft-card:hover .mft-card__icon {
	transform: translateY(-2px) rotate(-7deg) scale(1.07);
	box-shadow: 0 10px 22px color-mix(in srgb, var(--c1) 40%, transparent);
}

/* The theme styles headings and links site-wide, so these need to be
   specific enough to win inside a card. */
.mft .mft-card__name,
.mft .mft-card__name a {
	margin: 0;
	font-family: var(--mft-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: var(--mft-ink);
	letter-spacing: -.01em;
	text-decoration: none;
	transition: color .2s;
}

.mft .mft-card:hover .mft-card__name a,
.mft .mft-card__name a:focus-visible { color: var(--c1); }
.mft-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 3; }

.mft-card__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--mft-text);
	flex: 1 1 auto;
}

.mft-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 5px;
	padding-top: 11px;
	border-top: 1px solid color-mix(in srgb, var(--c1) 12%, var(--mft-soft));
}

.mft-card__cat { font-size: 11.5px; font-weight: 600; color: var(--mft-muted); }

.mft-card__go {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--c1);
}

.mft-card__go .mft-icon { transition: transform .3s var(--mft-ease); }
.mft-card:hover .mft-card__go .mft-icon { transform: translateX(4px); }

.mft-card__badge {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px 3px 6px;
	border-radius: 999px;
	background: var(--mft-green-50);
	color: var(--mft-green);
	font-size: 10px;
	font-weight: 800;
}

/* A small live dot, to make "runs in your browser" feel active. */
.mft-card__badge::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	animation: mft-pulse 2.4s ease-in-out infinite;
}

@keyframes mft-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .35; transform: scale(.75); }
}

.mft-card__badge .mft-icon { display: none; }

/* Alternative card styles from the settings screen. */
meta[content="outline"] ~ * .mft-card { box-shadow: none; background: #fff; }
meta[content="solid"] ~ * .mft-card { background: linear-gradient(170deg, color-mix(in srgb, var(--c1) 9%, #fff), #fff 60%); }

.mft-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	margin: 34px 0;
	padding: 46px 20px;
	border: 1px dashed var(--mft-line);
	border-radius: var(--mft-r-xl);
	background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	text-align: center;
}

.mft-empty .mft-icon { color: #CBD5E1; animation: mft-bob 3s ease-in-out infinite; }

@keyframes mft-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-7px); }
}

.mft-empty h2 { margin: 0; font-family: var(--mft-display); font-size: 19px; color: var(--mft-ink); }
.mft-empty p { margin: 0; max-width: 46ch; font-size: 13.5px; }

.mft-note {
	display: flex;
	gap: 14px;
	margin-top: 40px;
	padding: 22px 24px;
	border: 1px solid transparent;
	border-radius: var(--mft-r-xl);
	background:
		linear-gradient(#F8FBFF, #F8FBFF) padding-box,
		linear-gradient(120deg, #BFDBFE, #99F6E4, #DDD6FE) border-box;
}

.mft-note .mft-icon { color: var(--mft-primary); flex: 0 0 auto; margin-top: 2px; }
.mft-note h2 { margin: 0 0 5px; font-family: var(--mft-display); font-size: 17px; color: var(--mft-ink); }
.mft-note p { margin: 0; font-size: 13.5px; line-height: 1.65; }
.mft-note a { color: var(--mft-primary); font-weight: 700; }

/* ----------------------------------------------------------- 5. Breadcrumb */

.mft-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	padding: 16px 0 0;
	font-size: 12.5px;
	color: var(--mft-muted);
}

.mft-crumbs a { color: inherit; text-decoration: none; transition: color .18s; }
.mft-crumbs a:hover { color: var(--mft-primary); }
.mft-crumbs span[aria-hidden] { opacity: .4; }
.mft-crumbs [aria-current] { color: var(--mft-ink-2); font-weight: 600; }
.mft-hero .mft-crumbs { color: #8595AC; padding-top: 0; }
.mft-hero .mft-crumbs [aria-current] { color: #E2E8F0; }
.mft-hero .mft-crumbs a:hover { color: #fff; }

/* -------------------------------------------------------- 6. Tool page head */

.mft-main--tool { padding-top: 0; }

.mft-tool-head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 20px 0 22px;
	flex-wrap: wrap;
}

.mft-tool-head__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
	border-radius: var(--mft-r);
	background: linear-gradient(135deg, var(--c1), var(--c2));
	color: #fff;
	box-shadow: 0 12px 28px color-mix(in srgb, var(--c1) 34%, transparent);
}

.mft-tool-head__icon::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: inherit;
	background: inherit;
	opacity: .28;
	filter: blur(14px);
	z-index: -1;
	animation: mft-breathe 5s ease-in-out infinite;
}

.mft-tool-head > div { flex: 1 1 260px; min-width: 0; }

.mft-tool-head h1 {
	margin: 0;
	font-family: var(--mft-display);
	font-weight: 800;
	font-size: clamp(24px, 4.8vw, 36px);
	line-height: 1.12;
	letter-spacing: -.026em;
	color: var(--mft-ink);
}

.mft-tool-head p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; }

.mft-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 13px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.mft-pill--safe { background: var(--mft-green-50); color: var(--mft-green); }
.mft-pill--server { background: var(--mft-amber-50); color: var(--mft-amber); }

/* ------------------------------------------------------------- 7. The tool */

.mft-app {
	position: relative;
	isolation: isolate;
	padding: 24px;
	border: 1px solid var(--mft-line);
	border-radius: var(--mft-r-xl);
	background: var(--mft-surface);
	box-shadow: var(--mft-shadow-lg);
	overflow: hidden;
}

/* A light that sweeps along the top edge, so the panel feels alive. */
.mft-app::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, var(--c1), var(--c2), var(--mft-violet), var(--c1));
	background-size: 300% 100%;
	animation: mft-sweep 6s linear infinite;
}

@keyframes mft-sweep {
	from { background-position: 0% 50%; }
	to   { background-position: 300% 50%; }
}

.mft-stage[hidden] { display: none; }
.mft-stage { animation: mft-fade-in .42s var(--mft-ease); }

@keyframes mft-fade-in {
	from { opacity: 0; transform: translate3d(0, 10px, 0); }
	to   { opacity: 1; transform: none; }
}

/* Drop zone */

.mft-drop {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 40px 20px;
	border-radius: var(--mft-r-lg);
	background: var(--mft-soft);
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	transition: background .25s var(--mft-ease), transform .25s var(--mft-ease);
}

/* Dashed outline, drawn as a background so it can be recoloured smoothly. */
.mft-drop::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px dashed var(--mft-line);
	transition: border-color .25s;
	z-index: 1;
	pointer-events: none;
}

/* A slow conic sweep, only while the zone is hovered or a file is over it. */
.mft-drop::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 190%;
	aspect-ratio: 1;
	background: conic-gradient(transparent 0 62%, var(--c1) 80%, var(--c2) 92%, transparent 100%);
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity .3s;
	z-index: -1;
}

.mft-drop:hover,
.mft-drop:focus-visible { background: color-mix(in srgb, var(--c1) 5%, #fff); }
.mft-drop:hover::before,
.mft-drop:focus-visible::before { border-color: color-mix(in srgb, var(--c1) 45%, transparent); }

.mft-drop.is-over { transform: scale(1.012); background: color-mix(in srgb, var(--c1) 8%, #fff); }
.mft-drop.is-over::before { border-color: transparent; }

.mft-drop.is-over::after {
	opacity: .85;
	animation: mft-spin 3.2s linear infinite;
}

@keyframes mft-spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* The inner face that sits over the sweep. */
.mft-drop > * { position: relative; z-index: 2; }

.mft-drop.is-over { background: #fff; }
.mft-drop.is-over > *,
.mft-drop > * { }

.mft-drop__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--c1), var(--c2));
	color: #fff;
	box-shadow: 0 10px 26px color-mix(in srgb, var(--c1) 32%, transparent);
	transition: transform .35s var(--mft-ease);
	animation: mft-bob 3.4s ease-in-out infinite;
}

.mft-drop:hover .mft-drop__icon { transform: scale(1.08); }
.mft-drop.is-over .mft-drop__icon { transform: scale(1.16); animation: none; }

.mft-drop__title { margin: 0; font-family: var(--mft-display); font-weight: 700; font-size: 17px; color: var(--mft-ink); }
.mft-drop__or { margin: 0; font-size: 12px; color: var(--mft-muted); }
.mft-drop__btn { pointer-events: none; }
.mft-drop__formats { margin: 10px 0 0; font-size: 11.5px; color: var(--mft-muted); line-height: 1.5; }
.mft-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Chosen files */

.mft-files { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.mft-files[hidden] { display: none; }

.mft-fileitem {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 13px;
	border: 1px solid var(--mft-line);
	border-radius: var(--mft-r-sm);
	background: var(--mft-surface);
	animation: mft-slide-in .4s var(--mft-ease) backwards;
}

@keyframes mft-slide-in {
	from { opacity: 0; transform: translate3d(-10px, 0, 0); }
	to   { opacity: 1; transform: none; }
}

.mft-fileitem__thumb {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 9px;
	object-fit: cover;
	background: var(--mft-soft);
}

.mft-fileitem__body { flex: 1 1 auto; min-width: 0; }
.mft-fileitem__name {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--mft-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mft-fileitem__meta { font-size: 11.5px; color: var(--mft-muted); }

.mft-fileitem__x {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 9px;
	background: var(--mft-soft);
	color: var(--mft-muted);
	cursor: pointer;
	transition: background .18s, color .18s, transform .18s;
}

.mft-fileitem__x:hover { background: var(--mft-red-50); color: var(--mft-red); transform: rotate(90deg); }

/* Options */

.mft-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(234px, 1fr));
	gap: 16px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--mft-soft);
}

.mft-options--empty { display: none; }
.mft-options:empty { display: none; }

.mft-field { min-width: 0; animation: mft-fade-in .35s var(--mft-ease); }
.mft-field[hidden] { display: none; }

.mft-label {
	display: block;
	margin-bottom: 7px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--mft-ink-2);
}

.mft-input {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--mft-line);
	border-radius: var(--mft-r-sm);
	background: var(--mft-surface);
	font: 500 16px/1.3 var(--mft-font);
	color: var(--mft-ink);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s, box-shadow .2s;
}

select.mft-input {
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
}

.mft-input:focus {
	outline: none;
	border-color: var(--c1);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 15%, transparent);
}

.mft-textarea { min-height: 112px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; resize: vertical; }

.mft-number { position: relative; }
.mft-number__unit {
	position: absolute;
	top: 50%;
	right: 13px;
	transform: translateY(-50%);
	font-size: 12px;
	font-weight: 700;
	color: var(--mft-muted);
	pointer-events: none;
}
.mft-number input { padding-right: 48px; }

.mft-range { display: flex; align-items: center; gap: 12px; }

.mft-range input[type="range"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 30px;
	-webkit-appearance: none;
	appearance: none;
	background: none;
	cursor: pointer;
}

.mft-range input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--mft-soft); }
.mft-range input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--mft-soft); }

.mft-range input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin-top: -8px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--c1), var(--c2));
	box-shadow: 0 3px 9px rgba(15, 23, 42, .28);
	transition: transform .18s var(--mft-ease);
}

.mft-range input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.18); }

.mft-range input[type="range"]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--c1);
	box-shadow: 0 3px 9px rgba(15, 23, 42, .28);
}

.mft-range input[type="range"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--c1) 40%, transparent); outline-offset: 4px; border-radius: 4px; }

.mft-range output {
	min-width: 58px;
	padding: 6px 9px;
	border-radius: 8px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 11%, #fff), color-mix(in srgb, var(--c2) 11%, #fff));
	font-size: 12.5px;
	font-weight: 800;
	color: var(--mft-ink-2);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.mft-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding-top: 24px; }
.mft-field--checkbox .mft-check { padding-top: 0; }
.mft-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.mft-check__box {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	margin-top: 1px;
	border: 1.5px solid #CBD5E1;
	border-radius: 7px;
	background: #fff;
	color: transparent;
	transition: background .2s var(--mft-ease), border-color .2s, color .2s, transform .2s var(--mft-ease);
}

.mft-check input:checked + .mft-check__box {
	background: linear-gradient(135deg, var(--c1), var(--c2));
	border-color: transparent;
	color: #fff;
	transform: scale(1.06);
}

.mft-check input:focus-visible + .mft-check__box { outline: 3px solid color-mix(in srgb, var(--c1) 40%, transparent); outline-offset: 2px; }
.mft-check__text { font-size: 13.5px; line-height: 1.45; color: var(--mft-ink-2); }

.mft-hint { margin: 7px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--mft-muted); }

/* Preview */

.mft-preview { margin-top: 18px; animation: mft-fade-in .4s var(--mft-ease); }
.mft-preview[hidden] { display: none; }

.mft-preview img,
.mft-preview canvas {
	display: block;
	max-width: 100%;
	max-height: 330px;
	margin-inline: auto;
	border-radius: var(--mft-r-sm);
	box-shadow: var(--mft-shadow-md);
}

.mft-preview__hint { margin: 10px 0 0; text-align: center; font-size: 11.5px; color: var(--mft-muted); }

/* Crop frame */

.mft-crop { position: relative; display: inline-block; max-width: 100%; margin-inline: auto; touch-action: none; }
.mft-crop canvas { display: block; max-width: 100%; height: auto; border-radius: var(--mft-r-sm); }
.mft-crop__box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55); cursor: move; }
.mft-crop__h { position: absolute; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 2px 7px rgba(0, 0, 0, .35); transition: transform .15s; }
.mft-crop__h:hover { transform: scale(1.2); }
.mft-crop__h[data-h="nw"] { top: -10px; left: -10px; cursor: nwse-resize; }
.mft-crop__h[data-h="ne"] { top: -10px; right: -10px; cursor: nesw-resize; }
.mft-crop__h[data-h="sw"] { bottom: -10px; left: -10px; cursor: nesw-resize; }
.mft-crop__h[data-h="se"] { bottom: -10px; right: -10px; cursor: nwse-resize; }

/* Buttons */

.mft-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 22px; }

.mft-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: var(--mft-r-sm);
	font: 800 14.5px/1 var(--mft-font);
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: transform .2s var(--mft-ease), box-shadow .2s var(--mft-ease), opacity .2s, background .2s;
}

.mft-btn--lg { min-height: 56px; padding-inline: 28px; font-size: 16px; }

/*
 * Some buttons are <a> (the download link), and the theme colours links
 * site-wide. These selectors are scoped so an anchor styled as a button
 * still gets the button's own text colour.
 */
.mft .mft-btn--primary,
.mft a.mft-btn--primary {
	background: linear-gradient(135deg, var(--c1), var(--c2));
	color: #fff;
	box-shadow: 0 10px 24px color-mix(in srgb, var(--c1) 32%, transparent);
}

.mft .mft-btn--soft,
.mft a.mft-btn--soft { color: var(--mft-ink-2); }

.mft .mft-btn--ghost,
.mft a.mft-btn--ghost { color: var(--mft-ink-2); }

/* A shine that crosses the button on hover. */
.mft-btn--primary::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 55%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-18deg);
	transition: left .6s var(--mft-ease);
}

.mft-btn--primary:hover:not(:disabled)::after { left: 130%; }

.mft .mft-btn--primary:hover:not(:disabled),
.mft a.mft-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--c1) 42%, transparent);
	color: #fff;
}

.mft-btn:active:not(:disabled) { transform: translateY(0) scale(.985); }
.mft-btn--primary:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.mft-btn--primary:disabled::after { display: none; }

.mft-btn--soft { background: var(--mft-soft); color: var(--mft-ink-2); }
.mft-btn--soft:hover { background: #E2E8F0; color: var(--mft-ink); }

.mft-btn--ghost { background: none; border-color: var(--mft-line); color: var(--mft-ink-2); }
.mft-btn--ghost:hover { border-color: #CBD5E1; background: var(--mft-soft); }

.mft-btn[hidden] { display: none; }
.mft-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--c1) 45%, transparent); outline-offset: 2px; }

/* Busy */

.mft-stage--busy { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 54px 20px; text-align: center; }

.mft-spinner {
	position: relative;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0 18%, var(--c1) 55%, var(--c2) 85%, transparent 100%);
	animation: mft-rotate .95s linear infinite;
}

.mft-spinner::after {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: var(--mft-surface);
}

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

.mft-busy__text { margin: 0; font-family: var(--mft-display); font-weight: 700; font-size: 17px; color: var(--mft-ink); }
.mft-busy__sub { margin: 0; font-size: 12.5px; color: var(--mft-muted); min-height: 18px; font-variant-numeric: tabular-nums; }

.mft-bar {
	position: relative;
	width: min(360px, 100%);
	height: 7px;
	border-radius: 4px;
	background: var(--mft-soft);
	overflow: hidden;
}

.mft-bar[hidden] { display: none; }

.mft-bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--c1), var(--c2));
	transition: width .35s var(--mft-ease);
}

/* A moving sheen so the bar reads as working even while the number holds. */
.mft-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
	transform: translateX(-100%);
	animation: mft-shimmer 1.5s linear infinite;
}

@keyframes mft-shimmer { to { transform: translateX(100%); } }

/* Done */

.mft-stage--done { padding-top: 6px; }

.mft-done__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-family: var(--mft-display);
	font-weight: 800;
	font-size: 17px;
	color: var(--mft-green);
}

.mft-done__head .mft-icon {
	padding: 5px;
	border-radius: 50%;
	background: var(--mft-green-50);
	animation: mft-pop .5s var(--mft-ease) backwards;
}

@keyframes mft-pop {
	0%   { transform: scale(.4); opacity: 0; }
	60%  { transform: scale(1.14); opacity: 1; }
	100% { transform: scale(1); }
}

.mft-results { display: grid; gap: 11px; }

.mft-result {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 13px;
	border: 1px solid var(--mft-line);
	border-radius: var(--mft-r);
	background: var(--mft-surface);
	animation: mft-slide-in .45s var(--mft-ease) backwards;
	transition: border-color .2s, box-shadow .2s;
}

.mft-result:nth-child(1) { animation-delay: .04s; }
.mft-result:nth-child(2) { animation-delay: .1s; }
.mft-result:nth-child(3) { animation-delay: .16s; }
.mft-result:nth-child(4) { animation-delay: .22s; }
.mft-result:nth-child(n+5) { animation-delay: .28s; }

.mft-result:hover { border-color: color-mix(in srgb, var(--c1) 40%, transparent); box-shadow: var(--mft-shadow-md); }

.mft-result__thumb { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; background: var(--mft-soft); }
.mft-result__body { flex: 1 1 auto; min-width: 0; }
.mft-result__name { display: block; font-size: 13.5px; font-weight: 700; color: var(--mft-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mft-result__stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 11.5px; color: var(--mft-muted); }
.mft-result__stats b { color: var(--mft-ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.mft-saving { color: var(--mft-green); font-weight: 800; }
.mft-growth { color: var(--mft-amber); font-weight: 800; }

.mft-result__get {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 11px;
	background: color-mix(in srgb, var(--c1) 11%, #fff);
	color: var(--c1);
	text-decoration: none;
	transition: background .2s, color .2s, transform .2s var(--mft-ease);
}

.mft-result__get:hover { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; transform: translateY(-2px); }

.mft-way-hint {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--mft-muted);
}

.mft-way-hint[hidden] { display: none; }
.mft-way-hint .mft-icon { color: var(--mft-green); flex: 0 0 auto; }

.mft-textout {
	width: 100%;
	min-height: 180px;
	padding: 14px;
	border: 1px solid var(--mft-line);
	border-radius: var(--mft-r-sm);
	background: var(--mft-soft);
	font: 400 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--mft-ink-2);
	resize: vertical;
	word-break: break-all;
}

/* Alerts and privacy strip */

.mft-alert {
	display: flex;
	gap: 9px;
	margin: 16px 0 0;
	padding: 13px 15px;
	border-radius: var(--mft-r-sm);
	font-size: 13px;
	line-height: 1.55;
	animation: mft-shake .45s var(--mft-ease);
}

@keyframes mft-shake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-5px); }
	75%      { transform: translateX(5px); }
}

.mft-alert[hidden] { display: none; }
.mft-alert--error { background: var(--mft-red-50); border: 1px solid #FCA5A5; color: #991B1B; }
.mft-alert--warn { background: var(--mft-amber-50); border: 1px solid #FDE68A; color: #78350F; animation: none; }

.mft-privacy {
	display: flex;
	gap: 11px;
	margin: 20px 0 0;
	padding: 14px 16px;
	border-radius: var(--mft-r-sm);
	background: linear-gradient(135deg, #F0FDF4, #F1F5F9);
	border: 1px solid #DCFCE7;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--mft-text);
}

.mft-privacy .mft-icon { flex: 0 0 auto; margin-top: 2px; color: var(--mft-green); }
.mft-privacy strong { color: var(--mft-ink-2); }
.mft-privacy a { color: var(--mft-primary); font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------ 8. Written content */

.mft-content { margin-top: 36px; }

.mft-prose { font-size: 15.5px; line-height: 1.78; color: var(--mft-text); max-width: 72ch; }
.mft-prose p { margin: 0 0 15px; }
.mft-prose h2 { margin: 28px 0 11px; font-family: var(--mft-display); font-weight: 800; font-size: 21px; color: var(--mft-ink); letter-spacing: -.014em; }
.mft-prose a { color: var(--mft-primary); font-weight: 600; }

.mft-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 15px; margin-top: 26px; }

.mft-panel {
	padding: 21px 23px;
	border: 1px solid var(--mft-line);
	border-radius: var(--mft-r-lg);
	background: var(--mft-surface);
	box-shadow: var(--mft-shadow);
	transition: box-shadow .3s var(--mft-ease), transform .3s var(--mft-ease);
}

.mft-panel:hover { box-shadow: var(--mft-shadow-md); transform: translateY(-2px); }

.mft-panel h2 { margin: 0 0 14px; font-family: var(--mft-display); font-weight: 800; font-size: 18px; color: var(--mft-ink); }

.mft-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: mft-step; display: grid; gap: 13px; }
.mft-steps li { counter-increment: mft-step; display: flex; gap: 12px; font-size: 13.5px; line-height: 1.6; }
.mft-steps li::before {
	content: counter(mft-step);
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--c1), var(--c2));
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	box-shadow: 0 4px 10px color-mix(in srgb, var(--c1) 28%, transparent);
}

.mft-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.mft-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; }
.mft-list .mft-icon { color: var(--mft-green); flex: 0 0 auto; margin-top: 2px; }
.mft-list--cross li::before { content: "\00d7"; color: var(--mft-red); font-weight: 800; font-size: 17px; line-height: 1.2; }

.mft-numbered { margin: 0 0 15px; padding-left: 21px; display: grid; gap: 9px; font-size: 14.5px; line-height: 1.7; }

.mft-faq { margin-top: 15px; }
.mft-faq details { border-bottom: 1px solid var(--mft-soft); }
.mft-faq details:last-of-type { border-bottom: 0; }

.mft-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	font-family: var(--mft-display);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--mft-ink);
	cursor: pointer;
	list-style: none;
	transition: color .2s;
}

.mft-faq summary:hover { color: var(--mft-primary); }
.mft-faq summary::-webkit-details-marker { display: none; }

.mft-faq summary::after {
	content: "";
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	border-right: 2px solid var(--mft-muted);
	border-bottom: 2px solid var(--mft-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .28s var(--mft-ease);
}

.mft-faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.mft-faq details[open] p { animation: mft-fade-in .35s var(--mft-ease); }
.mft-faq summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--c1) 40%, transparent); outline-offset: 2px; border-radius: 6px; }
.mft-faq p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.75; }

.mft-related { margin-top: 32px; }
.mft-related h2 { margin: 0 0 15px; font-family: var(--mft-display); font-weight: 800; font-size: 20px; color: var(--mft-ink); }
.mft-grid--related { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.mft-related__all { margin: 16px 0 0; font-size: 13.5px; }
.mft-related__all a { display: inline-flex; align-items: center; gap: 6px; color: var(--mft-primary); font-weight: 800; text-decoration: none; }
.mft-related__all a .mft-icon { transition: transform .25s var(--mft-ease); }
.mft-related__all a:hover .mft-icon { transform: translateX(4px); }

/* Privacy document page */

.mft-main--doc { padding-top: 0; }
.mft-doc__title { margin: 16px 0 9px; font-family: var(--mft-display); font-weight: 800; font-size: clamp(25px, 5vw, 36px); line-height: 1.14; letter-spacing: -.026em; color: var(--mft-ink); }
.mft-doc__lead { margin: 0 0 22px; font-size: 16.5px; line-height: 1.68; color: var(--mft-ink-2); }
.mft-doc__back { margin-top: 30px; }

.mft-callout { display: flex; gap: 14px; padding: 21px 23px; border-radius: var(--mft-r-xl); margin-bottom: 26px; }
.mft-callout--good { background: linear-gradient(135deg, #F0FDF4, #ECFEFF); border: 1px solid #BBF7D0; }
.mft-callout .mft-icon { flex: 0 0 auto; margin-top: 2px; color: var(--mft-green); }
.mft-callout h2 { margin: 0 0 7px; font-family: var(--mft-display); font-size: 18px; color: #14532D; }
.mft-callout p { margin: 0 0 9px; font-size: 14px; line-height: 1.68; color: #166534; }
.mft-callout p:last-child { margin-bottom: 0; }

.mft-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.mft-cloud a {
	display: inline-block;
	padding: 7px 12px;
	border: 1px solid var(--mft-line);
	border-radius: 999px;
	background: var(--mft-surface);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mft-ink-2);
	text-decoration: none;
	transition: border-color .2s, color .2s, transform .2s var(--mft-ease);
}
.mft-cloud a:hover { border-color: var(--mft-primary); color: var(--mft-primary); transform: translateY(-2px); }

/* ------------------------------------------------------------- 9. Phones */

@media (max-width: 759px) {
	.mft { --mft-gutter: 14px; }

	.mft .mft-main { padding-bottom: 30px; }
	.mft-hero { padding: 24px 0 26px; }
	.mft-orb { filter: blur(44px); }
	.mft-orb--1 { width: 280px; height: 280px; }
	.mft-orb--2 { width: 240px; height: 240px; }
	.mft-orb--3 { display: none; }
	.mft-hero__lead { margin-bottom: 17px; }
	.mft-eyebrow { margin-top: 10px; font-size: 11px; }

	.mft-search { padding-inline: 12px; gap: 9px; }
	.mft-search input { height: 50px; font-size: 16px; }

	.mft-stats { gap: 8px; margin-top: 18px; }
	.mft-stats li { flex: 1 1 calc(33.333% - 6px); padding: 11px 12px; }
	.mft-stats b { font-size: 21px; }
	.mft-stats span { font-size: 10.5px; }

	.mft-tasks { margin-top: 22px; }
	.mft-tasks__grid { grid-template-columns: 1fr; gap: 9px; }
	.mft-task { padding: 13px 14px; gap: 11px; }
	.mft-task:hover { transform: none; }
	.mft-task__icon { width: 38px; height: 38px; }
	.mft-popular, .mft-recent { margin-top: 22px; }
	.mft-suggest { max-height: 58vh; }

	.mft-chips { margin: 18px -14px 2px; padding-inline: 14px; }
	.mft-group { margin-top: 26px; }
	.mft-group__icon { width: 38px; height: 38px; }
	.mft-group__rule { display: none; }

	.mft-grid { grid-template-columns: 1fr; gap: 10px; }
	.mft-card { padding: 14px; }
	.mft-card:hover { transform: none; }
	.mft-card__badge { position: static; align-self: flex-start; order: -1; }

	.mft-app { padding: 16px; border-radius: var(--mft-r-lg); }
	.mft-drop { padding: 30px 14px; }
	.mft-drop__icon { width: 54px; height: 54px; }
	.mft-options { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; padding-top: 18px; }

	.mft-actions { gap: 9px; }
	.mft-actions .mft-btn { flex: 1 1 100%; }
	.mft-btn--lg { min-height: 54px; }

	.mft-tool-head { gap: 12px; margin: 14px 0 16px; }
	.mft-tool-head__icon { width: 46px; height: 46px; }
	.mft-pill { order: 3; }

	.mft-content { margin-top: 26px; }
	.mft-cols { gap: 11px; margin-top: 18px; }
	.mft-panel { padding: 16px 17px; border-radius: var(--mft-r); }
	.mft-panel:hover { transform: none; }
	.mft-prose { font-size: 14.5px; }
	.mft-related { margin-top: 24px; }

	.mft-result { padding: 11px; gap: 11px; }
	.mft-result__thumb { width: 46px; height: 46px; }
	.mft-note { flex-direction: column; gap: 10px; padding: 17px 18px; }
}

@media (max-width: 360px) {
	.mft { --mft-gutter: 11px; }
	.mft-hero__title { font-size: 26px; }
	.mft-drop { padding: 24px 10px; }
	.mft-drop__formats { font-size: 11px; }
	.mft-chip { padding: 9px 12px; font-size: 12px; }
	.mft-stats li { flex: 1 1 100%; display: flex; align-items: baseline; gap: 8px; }
	.mft-stats b { font-size: 19px; }
}

/* Phones and tablets do not get the pointer spotlight. */
@media (hover: none) {
	.mft-card::after { display: none; }
	.mft-btn--primary::after { display: none; }
}

/*
 * Finger-sized controls.
 *
 * Scoped to coarse pointers so the desktop layout is untouched. A slider is
 * draggable along its whole length, but it still needs enough height to grab
 * without hitting the option below it, and a checkbox row needs a hit area
 * taller than the tick box itself.
 */
@media (pointer: coarse) {
	.mft-range input[type="range"] { height: 44px; }

	.mft-range input[type="range"]::-webkit-slider-thumb { margin-top: -15px; }

	.mft-check {
		min-height: 44px;
		align-items: center;
		padding-block: 6px;
	}

	.mft-check__box { margin-top: 0; }

	/* Breadcrumbs sit close together; give them room between the rows. */
	.mft-crumbs { gap: 8px 7px; line-height: 2; }

	/* The remove and close buttons on file rows. */
	.mft-fileitem__x,
	.mft-search__clear { min-width: 40px; min-height: 40px; }

	/* An FAQ heading is a tap target, not just text. */
	.mft-faq summary { padding-block: 16px; }
}

/* ------------------------------------------------- 10. Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.mft *,
	.mft *::before,
	.mft *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.mft-js .mft-group,
	.mft-js .mft-card,
	.mft-js .mft-panel,
	.mft-js .mft-note,
	.mft-js .mft-related,
	.mft-js .mft-callout { opacity: 1 !important; transform: none !important; }
	.mft-orb { animation: none; }
	.mft-shine { animation: none; background-position: 50% 50%; }
}

/* Nothing here should ever force the page sideways. */
.mft .mft-main,
.mft .mft-main * { max-width: 100%; }
.mft-main img,
.mft-main canvas { height: auto; }