/* ============================================================
   MockFlow Clippy page  (/clippy)
   Namespace: .mfcl*   Loaded after features.css
   ============================================================ */

.mfclMain{
	--mfcl-blue: #1c7ce2;
	--mfcl-blue-dark: #1461c6;
	--mfcl-blue-soft: #eaf3fd;
	--mfcl-ink: #23213a;
	--mfcl-ink-soft: #55536b;
	--mfcl-border: #e8e8f0;
	--mfcl-card: #ffffff;
	--mfcl-bg-tint: #f7fafd;
	color: var(--mfcl-ink);
	overflow-x: hidden;
}

.mfclMain .container{ max-width: 1140px; }

.mfclSection{ padding: 76px 0; }
.mfclSection--tint{ background: var(--mfcl-bg-tint); }

.mfclKicker{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--mfcl-blue);
	margin-bottom: 14px;
}

.mfclH2{
	font-family: "Cal Sans", "Inter", sans-serif;
	font-size: 38px;
	line-height: 1.15;
	letter-spacing: -0.3px;
	font-weight: 400;
	color: var(--mfcl-ink);
	margin: 0 0 16px;
	max-width: 26ch;
}
.mfclH2--center{ margin-left: auto; margin-right: auto; text-align: center; }

.mfclLead{
	font-size: 18px;
	line-height: 1.6;
	color: var(--mfcl-ink-soft);
	max-width: 640px;
	margin: 0 0 8px;
}
.mfclLead--center{ margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Buttons ---------- */

.mfclBtn{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--mfcl-blue);
	color: #fff !important;
	font-size: 17px;
	font-weight: 600;
	padding: 14px 26px;
	border-radius: 12px;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(28,124,226,0.28);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mfclBtn:hover{
	background: var(--mfcl-blue-dark);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(28,124,226,0.34);
	color: #fff;
}
.mfclBtn img{ width: 22px; height: 22px; }

.mfclBtnNote{
	font-size: 14px;
	color: var(--mfcl-ink-soft);
	margin-top: 12px;
}

/* ============================================================
   HERO
   ============================================================ */

.mfclHero{
	position: relative;
	padding: 90px 0 70px;
	background:
		radial-gradient(1100px 500px at 85% -10%, rgba(28,124,226,0.10), transparent 60%),
		radial-gradient(700px 420px at -10% 30%, rgba(66,176,234,0.08), transparent 60%),
		#fff;
}

.mfclHeroGrid{
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.mfclHeroBadge{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--mfcl-border);
	border-radius: 30px;
	padding: 7px 16px 7px 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mfcl-ink);
	box-shadow: 0 2px 8px rgba(23,23,40,0.06);
	margin-bottom: 22px;
}
.mfclHeroBadge img{ width: 22px; height: 22px; }

.mfclH1{
	font-family: "Cal Sans", "Inter", sans-serif;
	font-size: 52px;
	line-height: 1.08;
	letter-spacing: -0.5px;
	font-weight: 400;
	color: var(--mfcl-ink);
	margin: 0 0 20px;
}
.mfclH1 em{
	font-style: normal;
	color: var(--mfcl-blue);
}

.mfclHeroSub{
	font-size: 19px;
	line-height: 1.6;
	color: var(--mfcl-ink-soft);
	max-width: 520px;
	margin-bottom: 30px;
}

/* ---------- Hero artwork: browser + Clippy panel ---------- */

.mfclHeroArt{
	position: relative;
	min-height: 430px;
}

.mfclBrowser{
	position: relative;
	width: 88%;
	background: #fff;
	border: 1px solid var(--mfcl-border);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(23,23,40,0.12);
	overflow: hidden;
}

.mfclBBar{
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-bottom: 1px solid #f0f0f5;
	background: #fafafc;
}
.mfclBDot{ width: 10px; height: 10px; border-radius: 50%; background: #e4e4ea; }
.mfclBDot--r{ background: #f6b1ab; }
.mfclBDot--y{ background: #f5d58e; }
.mfclBDot--g{ background: #a8dbb4; }
.mfclBAddr{
	flex: 1;
	max-width: 220px;
	margin-left: 12px;
	background: #fff;
	border: 1px solid #ececf2;
	border-radius: 7px;
	font-size: 11px;
	color: #9a99ab;
	padding: 4px 10px;
	white-space: nowrap;
	overflow: hidden;
}

/* skeleton page inside the browser */
.mfclBPage{ padding: 22px 24px 28px; }
.mfclBNav{ display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.mfclBLogo{ width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg,#42b0ea,#1461c6); }
.mfclBLink{ width: 38px; height: 7px; border-radius: 4px; background: #e8e8f0; }
.mfclBNavBtn{ width: 54px; height: 20px; border-radius: 6px; background: var(--mfcl-ink); margin-left: auto; }
.mfclBH1{ width: 62%; height: 18px; border-radius: 6px; background: #d9d9e3; margin-bottom: 12px; }
.mfclBLine{ height: 8px; border-radius: 4px; background: #ececf2; margin-bottom: 8px; }
.mfclBLine--w70{ width: 70%; }
.mfclBLine--w45{ width: 45%; }

.mfclBCards{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 24px;
}
.mfclBCard{
	position: relative;
	border: 1px solid #ececf2;
	border-radius: 10px;
	padding: 12px;
	background: #fff;
}
.mfclBCardImg{ height: 44px; border-radius: 6px; background: linear-gradient(135deg,#eef4fb,#e3edf9); margin-bottom: 10px; }
.mfclBCard:nth-child(2) .mfclBCardImg{ background: linear-gradient(135deg,#dcecfc,#c9e0f8); }
.mfclBCardLine{ height: 7px; border-radius: 4px; background: #ececf2; margin-bottom: 6px; }
.mfclBCardLine--short{ width: 60%; }

/* marching-ants selection around the middle card */
.mfclRegion{
	position: absolute;
	inset: -7px;
	border-radius: 6px;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(90deg, var(--mfcl-blue) 0 6px, transparent 6px 12px),
		repeating-linear-gradient(90deg, var(--mfcl-blue) 0 6px, transparent 6px 12px),
		repeating-linear-gradient(0deg, var(--mfcl-blue) 0 6px, transparent 6px 12px),
		repeating-linear-gradient(0deg, var(--mfcl-blue) 0 6px, transparent 6px 12px);
	background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px;
	background-position: 0 0, 0 100%, 0 0, 100% 0;
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
	animation: mfclAnts .7s linear infinite;
}
.mfclRegion::before,
.mfclRegion::after{
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	background: #fff;
	border: 2px solid var(--mfcl-blue);
	border-radius: 2px;
}
.mfclRegion::before{ top: -5px; left: -5px; }
.mfclRegion::after{ bottom: -5px; right: -5px; }

@keyframes mfclAnts{
	to{ background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; }
}

/* ghost clip flying from the selected card to the panel */
.mfclFly{
	position: absolute;
	left: 37%;
	top: 62%;
	width: 90px;
	height: 64px;
	border-radius: 8px;
	background: rgba(28,124,226,0.16);
	border: 1.5px solid rgba(28,124,226,0.55);
	opacity: 0;
	pointer-events: none;
	animation: mfclFlyAway 5s ease-in-out infinite;
}
@keyframes mfclFlyAway{
	0%   { opacity: 0; transform: translate(0,0) scale(1); }
	8%   { opacity: 1; transform: translate(0,0) scale(1); }
	16%  { opacity: 1; transform: translate(0,-6px) scale(1.04); }
	52%  { opacity: .85; transform: translate(200px,-160px) scale(.22); }
	60%  { opacity: 0; transform: translate(215px,-175px) scale(.16); }
	100% { opacity: 0; transform: translate(215px,-175px) scale(.16); }
}

/* ---------- The Clippy panel replica ---------- */

.mfclPnl{
	position: absolute;
	top: 34px;
	right: 0;
	width: 264px;
	background: #fff;
	border: 1px solid #e7e7ee;
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(23,23,40,0.18);
	font-family: "IBM Plex Sans", "Inter", sans-serif;
	z-index: 3;
}

.mfclPnlTop{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 13px;
	border-bottom: 1px solid #f0f0f4;
}
.mfclPnlTop img{ width: 20px; height: 20px; }
.mfclPnlName{ font-size: 13.5px; font-weight: 600; color: var(--mfcl-ink); }
.mfclPnlWin{
	margin-left: auto;
	display: flex;
	gap: 10px;
	color: #b3b2c0;
	font-size: 13px;
	line-height: 1;
}

.mfclPnlBody{ padding: 13px; }

.mfclPnlRow{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.mfclPnlLabel{ font-size: 12px; color: #8f8ea0; width: 46px; flex: none; }
.mfclPnlPick{
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #e5e5ec;
	border-radius: 9px;
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mfcl-ink);
	background: #fff;
}
.mfclPnlPick svg{ flex: none; }
.mfclPnlPick .mfclPnlCaret{ margin-left: auto; color: #9a99ab; }

.mfclPnlDesc{ font-size: 11.5px; color: #9a99ab; margin: 2px 0 10px; }

.mfclPnlScope{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #8f8ea0;
	margin-bottom: 12px;
}
.mfclPnlScope .mfclScopeOn{ color: var(--mfcl-blue); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

.mfclPnlBtn{
	background: var(--mfcl-blue);
	color: #fff;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	border-radius: 10px;
	padding: 11px 0;
	position: relative;
	animation: mfclBtnPulse 5s ease-in-out infinite;
}
@keyframes mfclBtnPulse{
	0%, 48%, 100% { box-shadow: 0 0 0 0 rgba(28,124,226,0); }
	54%           { box-shadow: 0 0 0 7px rgba(28,124,226,0.18); }
	62%           { box-shadow: 0 0 0 0 rgba(28,124,226,0); }
}

.mfclPnlStaged{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding-top: 11px;
	border-top: 1px solid #f0f0f4;
	font-size: 11.5px;
	color: #6f6e82;
}
.mfclPnlStaged b{ color: var(--mfcl-ink); font-weight: 600; }
.mfclPnlStaged b::after{
	content: "3 clips staged";
	animation: mfclStagedCount 15s steps(1) infinite;
}
@keyframes mfclStagedCount{
	0%   { content: "3 clips staged"; }
	33%  { content: "4 clips staged"; }
	66%  { content: "5 clips staged"; }
	100% { content: "3 clips staged"; }
}
.mfclPnlStaged .mfclImportLink{ margin-left: auto; color: var(--mfcl-blue); font-weight: 600; }

/* clip counter chip on the panel */
.mfclChip{
	position: absolute;
	top: -12px;
	left: -12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--mfcl-blue);
	border: 2.5px solid #fff;
	border-radius: 50%;
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(28,124,226,0.4);
}
.mfclChip::after{
	content: "3";
	animation: mfclChipCount 15s steps(1) infinite;
}
@keyframes mfclChipCount{
	0%   { content: "3"; }
	33%  { content: "4"; }
	66%  { content: "5"; }
	100% { content: "3"; }
}

/* ============================================================
   OUTPUT FORMATS ("Every page, eight ways")
   ============================================================ */

.mfclFmtGroup{
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #9a99ab;
	margin: 34px 0 14px;
}
.mfclFmtGroup:first-of-type{ margin-top: 44px; }

.mfclFmtGrid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.mfclFmtCard{
	position: relative;
	background: var(--mfcl-card);
	border: 1px solid var(--mfcl-border);
	border-radius: 14px;
	padding: 20px;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mfclFmtCard:hover{
	transform: translateY(-3px);
	border-color: #cfe2f8;
	box-shadow: 0 12px 28px rgba(28,124,226,0.10);
}
.mfclFmtIcon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--mfcl-blue-soft);
	color: var(--mfcl-blue);
	margin-bottom: 12px;
}
.mfclFmtName{ font-size: 16.5px; font-weight: 600; color: var(--mfcl-ink); margin-bottom: 6px; }
.mfclFmtDesc{ font-size: 14.5px; line-height: 1.55; color: var(--mfcl-ink-soft); }

.mfclFmtFoot{
	margin-top: 30px;
	text-align: center;
	font-size: 15px;
	color: var(--mfcl-ink-soft);
}
.mfclFmtFoot b{ color: var(--mfcl-ink); font-weight: 600; }

/* ============================================================
   FEATURE ROWS
   ============================================================ */

.mfclFeat{
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 48px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--mfcl-border);
	border-radius: 20px;
	padding: 44px;
	margin-bottom: 26px;
}
.mfclFeat--flip{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mfclFeat--flip .mfclFeatCopy{ order: 2; }
.mfclFeat--flip .mfclFeatMedia{ order: 1; }

.mfclFeatCopy .mfclH3{
	font-family: "Cal Sans", "Inter", sans-serif;
	font-size: 28px;
	line-height: 1.2;
	font-weight: 400;
	color: var(--mfcl-ink);
	margin: 0 0 14px;
}
.mfclFeatCopy p{
	font-size: 16px;
	line-height: 1.65;
	color: var(--mfcl-ink-soft);
	margin-bottom: 12px;
}
.mfclFeatCopy .mfclTry{
	display: inline-block;
	margin-top: 6px;
	font-size: 14px;
	color: var(--mfcl-blue);
	background: var(--mfcl-blue-soft);
	border-radius: 8px;
	padding: 8px 14px;
}

.mfclFeatMedia video,
.mfclFeatMedia img{
	width: 100%;
	border-radius: 12px;
	display: block;
}
.mfclFeatMedia--frame video,
.mfclFeatMedia--frame img{
	border: 1px solid var(--mfcl-border);
	box-shadow: 0 14px 34px rgba(23,23,40,0.10);
}

.mfclFeatPair{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	margin-bottom: 26px;
}
.mfclFeatPair .mfclFeat{
	grid-template-columns: 1fr;
	gap: 26px;
	margin-bottom: 0;
	align-items: start;
	padding: 36px;
}

/* ---------- AI board illustration ---------- */

.mfclAiArt{
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	background: linear-gradient(135deg, #f4f9fe, #f6f5fd);
	border-radius: 14px;
	padding: 30px 26px;
	min-height: 300px;
}

.mfclAiDoc{
	flex: none;
	width: 118px;
	background: #fff;
	border: 1px solid var(--mfcl-border);
	border-radius: 10px;
	padding: 14px 12px;
	box-shadow: 0 8px 20px rgba(23,23,40,0.08);
}
.mfclAiDocTitle{ height: 9px; width: 70%; border-radius: 4px; background: #cfcfdc; margin-bottom: 10px; }
.mfclAiDocLine{ height: 6px; border-radius: 3px; background: #e9e9f0; margin-bottom: 7px; }
.mfclAiDocLine--short{ width: 55%; }

.mfclAiArrow{
	flex: none;
	color: var(--mfcl-blue);
	opacity: .8;
}
.mfclAiArrow svg{ display: block; }

.mfclAiBoard{
	position: relative;
	flex: 1;
	align-self: stretch;
	background:
		radial-gradient(circle, #dfe6ee 1px, transparent 1.2px) 0 0 / 16px 16px,
		#fdfdfe;
	border: 1px solid var(--mfcl-border);
	border-radius: 12px;
	min-height: 250px;
	box-shadow: 0 8px 20px rgba(23,23,40,0.06);
	overflow: hidden;
}

.mfclAiWires{ position: absolute; inset: 0; width: 100%; height: 100%; }
.mfclAiWires path{
	fill: none;
	stroke: #b9d5f3;
	stroke-width: 1.6;
	stroke-dasharray: 130;
	stroke-dashoffset: 130;
	animation: mfclWireDraw 9s ease-in-out infinite;
}
.mfclAiWires path:nth-child(2){ animation-delay: .35s; }
.mfclAiWires path:nth-child(3){ animation-delay: .7s; }
.mfclAiWires path:nth-child(4){ animation-delay: 1.05s; }
@keyframes mfclWireDraw{
	0%        { stroke-dashoffset: 130; }
	18%, 88%  { stroke-dashoffset: 0; }
	96%, 100% { stroke-dashoffset: 130; }
}

.mfclAiNode{
	position: absolute;
	background: #fff;
	border: 1px solid #d8e6f7;
	border-radius: 9px;
	padding: 7px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mfcl-ink);
	box-shadow: 0 4px 12px rgba(28,124,226,0.10);
	transform: scale(0);
	animation: mfclNodePop 9s cubic-bezier(.34,1.56,.64,1) infinite;
	white-space: nowrap;
}
.mfclAiNode--root{
	left: 6%;
	top: 42%;
	background: var(--mfcl-blue);
	border-color: var(--mfcl-blue);
	color: #fff;
	animation-delay: 0s;
}
.mfclAiNode--n1{ left: 46%; top: 9%;  animation-delay: .5s; }
.mfclAiNode--n2{ left: 56%; top: 34%; animation-delay: .85s; }
.mfclAiNode--n3{ left: 50%; top: 60%; animation-delay: 1.2s; }
.mfclAiNode--n4{ left: 42%; top: 82%; animation-delay: 1.55s; }
@keyframes mfclNodePop{
	0%        { transform: scale(0); }
	6%        { transform: scale(1.08); }
	9%, 88%   { transform: scale(1); }
	94%, 100% { transform: scale(0); }
}

.mfclAiPresets{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}
.mfclAiPreset{
	font-size: 13px;
	font-weight: 500;
	color: var(--mfcl-ink-soft);
	background: #fff;
	border: 1px solid var(--mfcl-border);
	border-radius: 20px;
	padding: 6px 14px;
	animation: mfclPresetGlow 10s ease-in-out infinite;
}
.mfclAiPreset:nth-child(1){ animation-delay: 0s; }
.mfclAiPreset:nth-child(2){ animation-delay: 2s; }
.mfclAiPreset:nth-child(3){ animation-delay: 4s; }
.mfclAiPreset:nth-child(4){ animation-delay: 6s; }
.mfclAiPreset:nth-child(5){ animation-delay: 8s; }
@keyframes mfclPresetGlow{
	0%, 20%, 100%{ background: #fff; color: var(--mfcl-ink-soft); border-color: var(--mfcl-border); }
	6%, 14%      { background: var(--mfcl-blue-soft); color: var(--mfcl-blue); border-color: #bcdcf9; }
}

/* ---------- Video recording illustration ---------- */

.mfclRecArt{
	position: relative;
	background: linear-gradient(135deg, #f4f9fe, #eef6fd);
	border-radius: 14px;
	padding: 34px 30px;
	display: flex;
	justify-content: center;
}
.mfclRecDlg{
	position: relative;
	width: 100%;
	max-width: 320px;
	background: #fff;
	border: 1px solid #e7e7ee;
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(23,23,40,0.13);
	padding: 18px;
	font-family: "IBM Plex Sans", "Inter", sans-serif;
}
.mfclRecHead{ display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mfclRecHead img{ width: 18px; height: 18px; }
.mfclRecHead b{ font-size: 14px; color: var(--mfcl-ink); font-weight: 600; }
.mfclRecSite{ font-size: 11.5px; color: #9a99ab; margin-bottom: 14px; }
.mfclRecLabel{ font-size: 12px; font-weight: 600; color: var(--mfcl-ink); margin-bottom: 8px; }
.mfclRecOpt{
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	color: var(--mfcl-ink);
	margin-bottom: 8px;
}
.mfclRecBox{
	width: 15px;
	height: 15px;
	border: 1.5px solid #c9c9d4;
	border-radius: 4px;
	flex: none;
	position: relative;
}
.mfclRecBox--on{ background: var(--mfcl-blue); border-color: var(--mfcl-blue); }
.mfclRecBox--on::after{
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 5px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(43deg);
}
.mfclRecNote{
	background: #eef5fd;
	border-radius: 8px;
	font-size: 11.5px;
	line-height: 1.5;
	color: #4a76a8;
	padding: 9px 11px;
	margin: 10px 0 14px;
}
.mfclRecBtn{
	background: var(--mfcl-blue);
	color: #fff;
	text-align: center;
	font-size: 13.5px;
	font-weight: 600;
	border-radius: 9px;
	padding: 10px 0;
}

.mfclRecBadge{
	position: absolute;
	top: -14px;
	right: -14px;
	display: flex;
	align-items: center;
	gap: 7px;
	background: var(--mfcl-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	border-radius: 20px;
	padding: 7px 13px;
	box-shadow: 0 6px 16px rgba(23,23,40,0.3);
}
.mfclRecDot{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff4d4d;
	animation: mfclRecBlink 1.2s ease-in-out infinite;
}
@keyframes mfclRecBlink{
	0%, 100%{ opacity: 1; box-shadow: 0 0 0 0 rgba(255,77,77,0.5); }
	50%     { opacity: .55; box-shadow: 0 0 0 5px rgba(255,77,77,0); }
}
.mfclRecTime::after{
	content: "0:04";
	animation: mfclRecCount 16s steps(1) infinite;
}
@keyframes mfclRecCount{
	0%  { content: "0:04"; }
	25% { content: "0:12"; }
	50% { content: "0:23"; }
	75% { content: "0:38"; }
}

/* ---------- Multi-clip staging illustration ---------- */

.mfclStageArt{
	background: linear-gradient(135deg, #f5f6fd, #f2f8fe);
	border-radius: 14px;
	padding: 34px 30px 26px;
}
.mfclStageStack{
	position: relative;
	display: flex;
	justify-content: center;
	margin-bottom: 24px;
	min-height: 130px;
}
.mfclStageCard{
	position: relative;
	width: 92px;
	height: 118px;
	background: #fff;
	border: 1px solid #e5e5ec;
	border-radius: 9px;
	padding: 9px 8px;
	box-shadow: 0 8px 18px rgba(23,23,40,0.10);
	margin-left: -18px;
	animation: mfclStageFloat 4.5s ease-in-out infinite;
}
.mfclStageCard:first-child{ margin-left: 0; }
.mfclStageCard:nth-child(1){ transform: rotate(-4deg); animation-delay: 0s; }
.mfclStageCard:nth-child(2){ transform: rotate(-1deg); animation-delay: .4s; }
.mfclStageCard:nth-child(3){ transform: rotate(2deg);  animation-delay: .8s; }
.mfclStageCard:nth-child(4){ transform: rotate(5deg);  animation-delay: 1.2s; }
@keyframes mfclStageFloat{
	0%, 100%{ translate: 0 0; }
	50%     { translate: 0 -7px; }
}
.mfclStageNum{
	position: absolute;
	top: -9px;
	left: -9px;
	width: 21px;
	height: 21px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mfcl-blue);
	border: 2px solid #fff;
	border-radius: 50%;
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
}
.mfclStageThumb{ height: 34px; border-radius: 5px; background: linear-gradient(135deg,#e8f1fb,#dcebfa); margin-bottom: 8px; }
.mfclStageCard:nth-child(2) .mfclStageThumb{ background: linear-gradient(135deg,#efe9fb,#e3dcf8); }
.mfclStageCard:nth-child(3) .mfclStageThumb{ background: linear-gradient(135deg,#e6f6ec,#d8efe2); }
.mfclStageCard:nth-child(4) .mfclStageThumb{ background: linear-gradient(135deg,#fdf3e3,#f8ead1); }
.mfclStageLine{ height: 6px; border-radius: 3px; background: #ececf2; margin-bottom: 5px; }
.mfclStageLine--short{ width: 65%; }

.mfclStageBar{
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid #e5e5ec;
	border-radius: 10px;
	padding: 11px 15px;
	font-size: 13px;
	color: #6f6e82;
	max-width: 330px;
	margin: 0 auto;
	box-shadow: 0 6px 16px rgba(23,23,40,0.07);
	font-family: "IBM Plex Sans", "Inter", sans-serif;
}
.mfclStageBar b{ color: var(--mfcl-ink); font-weight: 600; }
.mfclStageBar .mfclImportLink{ margin-left: auto; color: var(--mfcl-blue); font-weight: 600; }

/* ============================================================
   USE CASES BOARD
   ============================================================ */

.mfclBoardSection{
	background:
		radial-gradient(circle, #dde3ec 1px, transparent 1.2px) 0 0 / 22px 22px,
		linear-gradient(180deg, #fbfcfe, #f5f8fc);
	border-top: 1px solid #eef1f6;
	border-bottom: 1px solid #eef1f6;
}

.mfclUseGrid{
	columns: 3;
	column-gap: 20px;
	margin-top: 46px;
}
.mfclUseCard{
	break-inside: avoid;
	background: #fff;
	border: 1px solid var(--mfcl-border);
	border-radius: 14px;
	padding: 24px;
	margin-bottom: 20px;
	box-shadow: 0 3px 10px rgba(23,23,40,0.05);
	transition: transform .18s ease, box-shadow .18s ease;
}
.mfclUseCard:nth-child(odd){ transform: rotate(-0.4deg); }
.mfclUseCard:nth-child(even){ transform: rotate(0.4deg); }
.mfclUseCard:hover{
	transform: rotate(0deg) translateY(-3px);
	box-shadow: 0 14px 30px rgba(23,23,40,0.10);
}
.mfclUseTag{
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border-radius: 6px;
	padding: 4px 9px;
	margin-bottom: 12px;
}
.mfclUseTag--blue  { background: #e8f2fd; color: #1c6fc9; }
.mfclUseTag--violet{ background: #efeafb; color: #6d4fc4; }
.mfclUseTag--green { background: #e4f5ea; color: #21895a; }
.mfclUseTag--amber { background: #fcf1de; color: #ac7015; }
.mfclUseTag--rose  { background: #fdeaee; color: #c14762; }
.mfclUseTitle{ font-size: 18px; font-weight: 600; color: var(--mfcl-ink); margin-bottom: 8px; line-height: 1.3; }
.mfclUseDesc{ font-size: 14.5px; line-height: 1.6; color: var(--mfcl-ink-soft); margin-bottom: 14px; }
.mfclUseTry{
	font-size: 13px;
	line-height: 1.5;
	color: #7a7990;
	border-top: 1px dashed #e3e3ec;
	padding-top: 11px;
}
.mfclUseTry b{ color: var(--mfcl-blue); font-weight: 600; }

/* ============================================================
   PERSONAS
   ============================================================ */

.mfclWhoGrid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 44px;
}
.mfclWhoCard{
	background: var(--mfcl-bg-tint);
	border: 1px solid #eef1f6;
	border-radius: 14px;
	padding: 22px;
}
.mfclWhoRole{ font-size: 16px; font-weight: 600; color: var(--mfcl-ink); margin-bottom: 6px; }
.mfclWhoDesc{ font-size: 14px; line-height: 1.55; color: var(--mfcl-ink-soft); }

/* ============================================================
   WHY NOT A SCREENSHOT
   ============================================================ */

.mfclVsGrid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 46px;
}
.mfclVsCard{
	background: #fff;
	border: 1px solid var(--mfcl-border);
	border-radius: 16px;
	padding: 28px;
}
.mfclVsCard--hero{
	background: linear-gradient(160deg, #f2f8fe, #eef3fd);
	border: 1.5px solid #bcdcf9;
	box-shadow: 0 12px 30px rgba(28,124,226,0.12);
}
.mfclVsIcon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #f1f1f6;
	color: #8f8ea0;
	margin-bottom: 14px;
}
.mfclVsCard--hero .mfclVsIcon{ background: #fff; border: 1px solid #bcdcf9; }
.mfclVsTitle{ font-size: 17px; font-weight: 600; color: var(--mfcl-ink); margin-bottom: 8px; }
.mfclVsDesc{ font-size: 14.5px; line-height: 1.6; color: var(--mfcl-ink-soft); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */

.mfclSteps{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 46px;
	counter-reset: mfclstep;
}
.mfclStep{
	position: relative;
	background: #fff;
	border: 1px solid var(--mfcl-border);
	border-radius: 14px;
	padding: 26px 22px 22px;
	counter-increment: mfclstep;
}
.mfclStepNum{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--mfcl-blue-soft);
	color: var(--mfcl-blue);
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 14px;
}
.mfclStepNum::before{ content: counter(mfclstep); }
.mfclStepTitle{ font-size: 16px; font-weight: 600; color: var(--mfcl-ink); margin-bottom: 6px; }
.mfclStepDesc{ font-size: 14px; line-height: 1.55; color: var(--mfcl-ink-soft); }

/* ============================================================
   FAQ
   ============================================================ */

.mfclFaqList{ max-width: 760px; margin: 44px auto 0; }
.mfclFaq{
	background: #fff;
	border: 1px solid var(--mfcl-border);
	border-radius: 12px;
	margin-bottom: 12px;
	overflow: hidden;
}
.mfclFaq summary{
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 16.5px;
	font-weight: 600;
	color: var(--mfcl-ink);
	padding: 18px 22px;
}
.mfclFaq summary::-webkit-details-marker{ display: none; }
.mfclFaq summary::after{
	content: "+";
	flex: none;
	font-size: 22px;
	font-weight: 400;
	color: var(--mfcl-blue);
	line-height: 1;
	transition: transform .18s ease;
}
.mfclFaq[open] summary::after{ transform: rotate(45deg); }
.mfclFaqBody{
	font-size: 15px;
	line-height: 1.65;
	color: var(--mfcl-ink-soft);
	padding: 0 22px 20px;
}

/* ============================================================
   FINAL CTA  (with the chomping Clippy)
   ============================================================ */

.mfclCta{
	background:
		radial-gradient(800px 400px at 50% -20%, rgba(66,176,234,0.25), transparent 65%),
		linear-gradient(160deg, #123f77, #1461c6);
	border-radius: 24px;
	padding: 70px 40px;
	text-align: center;
	color: #fff;
}
.mfclCta .mfclH2{ color: #fff; max-width: 100%; }
.mfclCtaSub{
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255,255,255,0.85);
	max-width: 560px;
	margin: 0 auto 30px;
}
.mfclCta .mfclBtn{
	background: #fff;
	color: var(--mfcl-blue-dark) !important;
	box-shadow: 0 8px 24px rgba(9,32,64,0.35);
}
.mfclCta .mfclBtn:hover{ background: #f1f7fe; }
.mfclCta .mfclBtnNote{ color: rgba(255,255,255,0.7); }

/* the chomper, straight from the extension's loader */
.mfclChomp{ margin: 0 auto 26px; width: 132px; }
.mfclChomp svg{ display: block; width: 132px; height: 64px; }
.mfclChompJaw{
	transform-box: view-box;
	transform-origin: 32px 32px;
	animation: mfclChompBite .55s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes mfclChompBite{
	0%, 100%{ transform: scaleY(1); }
	50%     { transform: scaleY(0.06); }
}
.mfclChompHead{
	transform-box: view-box;
	transform-origin: 32px 32px;
	animation: mfclChompGulp .55s ease-in-out infinite;
}
@keyframes mfclChompGulp{
	0%, 100%{ transform: scale(1); }
	46%     { transform: scale(1.05); }
}
.mfclChompBit{
	opacity: 0;
	animation: mfclChompBitFly 2.2s linear infinite;
}
.mfclChompBit1{ fill: #a9d5f4; }
.mfclChompBit2{ fill: #cfe6f8; animation-delay: -0.55s; }
.mfclChompBit3{ fill: #8ec7f1; animation-delay: -1.10s; }
.mfclChompBit4{ fill: #dce9f5; animation-delay: -1.65s; }
@keyframes mfclChompBitFly{
	0%  { transform: translateX(6px);   opacity: 0; }
	8%  { transform: translateX(0);     opacity: 1; }
	54% { transform: translateX(-46px); opacity: 1; }
	64% { transform: translateX(-56px); opacity: 0; }
	100%{ transform: translateX(-56px); opacity: 0; }
}

/* ============================================================
   MOTION & RESPONSIVE
   ============================================================ */

@media (prefers-reduced-motion: reduce){
	.mfclMain *,
	.mfclMain *::before,
	.mfclMain *::after{
		animation: none !important;
		transition: none !important;
	}
	.mfclFly{ display: none; }
	.mfclAiWires path{ stroke-dashoffset: 0; }
	.mfclAiNode{ transform: scale(1); }
	.mfclChip::after{ content: "3"; }
	.mfclPnlStaged b::after{ content: "3 clips staged"; }
	.mfclRecTime::after{ content: "0:12"; }
}

@media (max-width: 1024px){
	.mfclH1{ font-size: 44px; }
	.mfclUseGrid{ columns: 2; }
	.mfclSteps{ grid-template-columns: repeat(2, 1fr); }
	.mfclWhoGrid{ grid-template-columns: repeat(2, 1fr); }
	.mfclVsGrid{ grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 900px){
	.mfclHeroGrid{ grid-template-columns: 1fr; gap: 40px; }
	.mfclHeroArt{ max-width: 560px; margin: 0 auto; width: 100%; }
	.mfclFeat,
	.mfclFeat--flip{ grid-template-columns: 1fr; gap: 28px; padding: 32px; }
	.mfclFeat--flip .mfclFeatCopy{ order: 1; }
	.mfclFeat--flip .mfclFeatMedia{ order: 2; }
	.mfclFeatPair{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
	.mfclSection{ padding: 56px 0; }
	.mfclHero{ padding: 60px 0 50px; }
	.mfclH1{ font-size: 36px; }
	.mfclH2{ font-size: 30px; }
	.mfclHeroArt{ min-height: 0; }
	.mfclPnl{ position: relative; top: 0; right: 0; margin: -30px auto 0; }
	.mfclBrowser{ width: 100%; }
	.mfclFly{ display: none; }
	.mfclUseGrid{ columns: 1; }
	.mfclSteps{ grid-template-columns: 1fr; }
	.mfclWhoGrid{ grid-template-columns: 1fr; }
	.mfclAiArt{ flex-direction: column; }
	.mfclAiDoc{ width: 70%; }
	.mfclAiArrow{ transform: rotate(90deg); }
	.mfclCta{ padding: 50px 24px; border-radius: 18px; }
}