/* ============================================================
   The Meal Card — prepaid store credit + bonus.
   Editorial, non-boxy: a card in a frosted-glass holder, a pill
   loader that drives it live, a flowing how-it-works path, and a
   borderless benefits column. Scoped to .mc-*.
   Salad-bowl palette: leafy green + teal + amber. Keyframes mc*.
   ============================================================ */

.mc-stage, .mc-flow, .mc-loved, .mc-close { position: relative; overflow: hidden; }

/* the card (stage) + how-it-works (flow) share one screen (minus the header),
   with a single continuous background so they read as one section */
.mc-screen {
	min-height: calc(100vh - 76px); min-height: calc(100svh - 76px);
	display: flex; flex-direction: column;
	background:
		radial-gradient(1100px 680px at 84% -6%, #FCEFD6 0%, transparent 52%),
		linear-gradient(180deg, #F7FBF1 0%, #EDF5E0 100%);
}
@property --fill { syntax: "<number>"; inherits: false; initial-value: 0; }

/* ---- STAGE ----------------------------------------------- */
.mc-stage {
	background: transparent;
	flex: 1 0 auto;               /* now the only thing in .mc-screen — fill it */
	display: grid; place-items: center;   /* centre the hero vertically in the viewport */
	padding: clamp(28px, 5vw, 68px) 0;
}
.mc-wash { position: absolute; border-radius: 50%; filter: blur(30px); z-index: 0; }
.mc-wash-a { width: 380px; height: 380px; top: -120px; right: 4%; background: rgba(240, 178, 74, .30); }
.mc-wash-b { width: 340px; height: 340px; bottom: -140px; left: -60px; background: rgba(120, 180, 90, .32); }
.mc-spark { position: absolute; color: #E0930A; font-size: 18px; z-index: 1; animation: mcTwinkle 3.4s ease-in-out infinite; }
.mc-spark-1 { top: 16%; left: 46%; }
.mc-spark-2 { bottom: 20%; right: 40%; font-size: 13px; animation-delay: -1.6s; }

.mc-stage-in {
	position: relative; z-index: 2; width: 100%;
	display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 6vw, 84px); align-items: center;
}

/* ---- the floating card + motifs -------------------------- */
.mc-card-hold { position: relative; display: flex; justify-content: center; align-items: center; perspective: 1100px; }
.mc-glow {
	position: absolute; width: 78%; height: 78%; border-radius: 50%;
	background: radial-gradient(circle, rgba(240, 178, 74, .46) 0%, transparent 68%); filter: blur(26px); z-index: 0;
	animation: mcGlowPulse 4.5s ease-in-out infinite;
}
.mc-coin {
	position: absolute; z-index: 5; width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center; font: 800 17px var(--font-b); color: #6f4708;
	background: radial-gradient(circle at 32% 28%, #FBD98A, #E0930A 74%);
	box-shadow: 0 10px 20px -8px rgba(150, 100, 20, .6), inset 0 1px 0 rgba(255, 255, 255, .6);
	animation: mcFloat 5.5s ease-in-out infinite;
}
.mc-coin-1 { top: 2%; left: 6%; }
.mc-coin-2 { bottom: 6%; right: 4%; width: 32px; height: 32px; font-size: 14px; animation-delay: -2.4s; }
.mc-leaf { position: absolute; z-index: 5; animation: mcFloat 6.5s ease-in-out infinite; }
.mc-leaf-1 { top: 8%; right: 2%; animation-delay: -1.2s; }
.mc-leaf-2 { bottom: 2%; left: 8%; animation-delay: -3s; }

/* the card draws up on load, then floats gently (holder/cover removed) */
.mc-card-float {
	position: relative; z-index: 2; width: min(384px, 92%);
	transform-style: preserve-3d;
	animation: mcDrawOut 1.3s cubic-bezier(.2, .8, .25, 1) both, mcCardSway 7s ease-in-out 1.6s infinite;
}
.mc-card {
	position: relative; width: 100%; aspect-ratio: 1.6 / 1;
	border-radius: 26px; padding: clamp(20px, 3.4vw, 28px);
	color: #F1F9E9; overflow: hidden; isolation: isolate;
	background:
		radial-gradient(130% 150% at 84% 8%, #2E7D32 0%, transparent 46%),
		linear-gradient(140deg, #1f5c2e 0%, #184a24 54%, #123c1d 100%);
	box-shadow: 0 34px 66px -26px rgba(20, 55, 25, .8), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(224, 147, 10, .28);
	display: flex; flex-direction: column; justify-content: space-between;
	transform: rotate(-4deg); transition: transform .55s cubic-bezier(.2, .9, .3, 1.25);
	-webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.mc-card:hover { transform: rotate(-1deg) translateY(-6px) scale(1.02); }
.mc-card.is-charged { animation: mcCharge .5s cubic-bezier(.2, .9, .3, 1.4); }
/* the blank back of the card — shown as it spins past 90° */
.mc-card-back {
	position: absolute; inset: 0; border-radius: 26px;
	transform: rotate(-4deg) rotateY(180deg);
	-webkit-backface-visibility: hidden; backface-visibility: hidden;
	background:
		radial-gradient(120% 140% at 82% 8%, #2E7D32 0%, transparent 46%),
		linear-gradient(140deg, #1f5c2e 0%, #184a24 54%, #123c1d 100%);
	box-shadow: 0 34px 66px -26px rgba(20, 55, 25, .8), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(224, 147, 10, .28);
}
/* glossy light band that sweeps across on a loop */
.mc-card-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.mc-card-sheen::before {
	content: ""; position: absolute; top: -30%; left: -70%; width: 45%; height: 160%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
	transform: rotate(19deg); animation: mcSheen 5.5s ease-in-out 1.4s infinite;
}
/* topographic contour lines flowing across the card */
.mc-card-topo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mc-card-topo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* holographic foil band, drifting */
.mc-card-holo {
	position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .55;
	background: linear-gradient(118deg, transparent 24%, rgba(120, 220, 180, .18) 37%, rgba(180, 255, 150, .16) 45%,
		rgba(255, 210, 120, .22) 53%, rgba(120, 210, 255, .14) 61%, transparent 74%);
	background-size: 240% 100%; animation: mcHolo 7.5s ease-in-out infinite;
}
/* embossed leaf, bleeding off the lower-right corner */
.mc-card-bigleaf { position: absolute; right: -20px; bottom: -34px; z-index: 0; pointer-events: none; transform: rotate(9deg); }
/* faux card number (in the foot, tucks into the holder) */
.mc-card-num { font: 700 12.5px var(--font-b); letter-spacing: .06em; color: rgba(230, 243, 216, .5); }
.mc-card-num b { font-weight: 800; letter-spacing: .16em; color: rgba(230, 243, 216, .72); }

.mc-card-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; }
.mc-card-brand { display: inline-flex; align-items: center; gap: 9px; font: 700 15.5px var(--font-b); letter-spacing: .015em; }
.mc-card-mark {
	display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 8px;
	background: linear-gradient(150deg, #F4F9EE, #D8E9C8); box-shadow: 0 3px 7px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.mc-card-bonus {
	font: 800 13px var(--font-b); color: #3b2600; background: linear-gradient(135deg, #F4B24A, #E0930A);
	padding: 5px 11px; border-radius: 999px; box-shadow: 0 5px 12px rgba(90, 55, 0, .3); white-space: nowrap;
}
.mc-card-body { position: relative; z-index: 3; }
.mc-card-bal-l { display: block; font: 600 11px var(--font-b); letter-spacing: .16em; text-transform: uppercase; opacity: .72; }
.mc-card-bal-n { display: block; font: 600 clamp(38px, 6vw, 52px)/1 var(--font-d); letter-spacing: -.01em; margin-top: 5px; transition: opacity .2s ease; }
.mc-card-foot { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; }
.mc-card-chip {
	width: 46px; height: 34px; border-radius: 8px; position: relative; overflow: hidden;
	background: linear-gradient(140deg, #F5DE97 0%, #E1A93E 46%, #B77F1E 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 3px 6px rgba(0, 0, 0, .28);
}
/* contact-pad grid: an inner frame + a cross of thin lines */
.mc-card-chip::before {
	content: ""; position: absolute; inset: 5px; border: 1.2px solid rgba(116, 78, 18, .55); border-radius: 4px;
	background:
		linear-gradient(rgba(116, 78, 18, .55) 0 0) center/100% 1.2px no-repeat,
		linear-gradient(rgba(116, 78, 18, .55) 0 0) 33% 0/1.2px 100% no-repeat,
		linear-gradient(rgba(116, 78, 18, .55) 0 0) 67% 0/1.2px 100% no-repeat;
}
.mc-card-load { display: block; margin-top: 9px; font: 600 13px var(--font-b); color: rgba(230, 243, 216, .82); }
.mc-card-load b { font-weight: 800; color: #F1F9E9; }
.mc-balnote { position: absolute; bottom: -14px; font: 600 13.5px var(--font-b); color: var(--sage-d); margin: 0; }
.mc-balnote span { color: #E0930A; }

/* ---- LOADER ---------------------------------------------- */
.mc-eyebrow { color: var(--sage-d); font-size: 11px; padding: 7px 14px; gap: 7px; letter-spacing: .1em; }
/* headline mixes two fonts: a warm modern grotesque + an elegant serif italic */
.mc-loader h1 {
	font: 700 clamp(28px, 3.4vw, 40px)/1.06 'Bricolage Grotesque', var(--font-b);
	color: var(--ink); letter-spacing: -.02em; margin: 14px 0 0;
}
.mc-loader h1 em { font-family: var(--font-d); font-weight: 500; font-style: italic; color: #E0930A; letter-spacing: 0; }
.mc-lede { font: 400 clamp(15px, 1.5vw, 16.5px)/1.6 var(--font-b); color: var(--ink2); max-width: 30em; margin: 15px 0 0; }
.mc-lede b { color: var(--sage-d); font-weight: 700; }

.mc-amounts { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 22px 0 0; }
.mc-amt {
	position: relative; cursor: pointer; border: none; background: #fff;
	border-radius: 999px; padding: 9px 19px; font: 600 16px var(--font-d); color: var(--ink);
	box-shadow: 0 6px 16px -12px rgba(40, 70, 40, .5), inset 0 0 0 1.5px #e2ebd7;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.mc-amt:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(40, 70, 40, .55), inset 0 0 0 1.5px #2E7D32; }
.mc-amt.is-on {
	color: #fff; background: linear-gradient(135deg, #43A047, #2E7D32);
	box-shadow: 0 12px 22px -12px rgba(30, 90, 40, .7);
}

.mc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 26px 0 0; }
.mc-buy {
	border: none; cursor: pointer; background: linear-gradient(135deg, #43A047, #2E7D32); color: #fff;
	font: 700 14.5px var(--font-b); padding: 12px 26px; border-radius: 999px;
	box-shadow: 0 18px 32px -14px rgba(30, 90, 40, .9); transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.mc-buy:hover { transform: translateY(-2px); box-shadow: 0 22px 38px -14px rgba(30, 90, 40, .95); }
.mc-buy[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.mc-buy-ghost { background: transparent; color: var(--sage-d); box-shadow: inset 0 0 0 2px #2E7D32; }
.mc-buy-ghost:hover { background: #eef6e2; box-shadow: inset 0 0 0 2px #2E7D32; }

/* ---- FLOW : a flowing path with colourful step medallions ---- */
.mc-flow { background: transparent; flex: 1 0 auto; display: grid; place-items: center; padding: clamp(2px, .8vw, 10px) 0 clamp(8px, 1.6vw, 18px); }
.mc-flow > .wrap { width: 100%; }
.mc-flow-orb { position: absolute; border-radius: 50%; filter: blur(38px); z-index: 0; }
.mc-flow-orb-a { width: 340px; height: 340px; top: -120px; left: -80px; background: rgba(120, 180, 90, .2); }
.mc-flow-orb-b { width: 300px; height: 300px; bottom: -120px; right: -70px; background: rgba(240, 178, 74, .18); }
.mc-flow-seed { position: absolute; z-index: 0; font-size: 26px; opacity: .55; animation: mcFloat 7s ease-in-out infinite; }
.mc-flow-seed-1 { top: 15%; right: 9%; }
.mc-flow-seed-2 { bottom: 16%; left: 8%; font-size: 22px; animation-delay: -2.6s; }
.mc-kicker { display: inline-block; font: 800 12px var(--font-b); letter-spacing: .16em; text-transform: uppercase; color: #E0930A; margin-bottom: 10px; }
.mc-flow-head { position: relative; z-index: 1; text-align: center; margin-bottom: clamp(6px, 1.2vw, 14px); }
.mc-flow-head h2, .mc-loved-head h2 { font: 600 clamp(26px, 4vw, 42px)/1.05 var(--font-d); color: var(--ink); margin: 0; letter-spacing: -.02em; }
.mc-flow-head h2 { font-size: clamp(24px, 3.2vw, 34px); }
.mc-flow-head h2 em, .mc-loved-head h2 em { font-style: italic; color: #2E7D32; }

/* the steps as circular medallions — a slowly spinning dashed ring, a big
   number and an emoji badge; compact so the section fits the screen */
.mc-rings {
	position: relative; z-index: 1; list-style: none; margin: 0 auto; padding: 0;
	max-width: 860px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 52px);
}
/* a wavy vein that flows left-to-right between the three steps */
.mc-rings::before {
	content: ""; position: absolute; z-index: 0; top: clamp(22px, 3vw, 30px); left: 9%; right: 9%; height: 26px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='26'%3E%3Cpath%20d='M0,13%20Q16,2%2032,13%20T64,13'%20fill='none'%20stroke='%232E7D32'%20stroke-width='2.6'%20stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center;
	background-size: 64px 26px; opacity: .5;
	animation: mcWave 1.9s linear infinite;
}
.mc-ring { position: relative; z-index: 1; text-align: center; }
/* a progress donut that fills further at each step (--fill %), animating in */
.mc-ring-disc {
	position: relative; width: clamp(68px, 7.2vw, 84px); aspect-ratio: 1; border-radius: 50%; margin: 0 auto 9px;
	display: grid; place-items: center;
	background: conic-gradient(from -90deg, var(--sc) calc(var(--fill, 100) * 1%), color-mix(in srgb, var(--sc) 16%, #eef4e6) 0);
	filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--sc) 36%, transparent));
	transition: transform .28s cubic-bezier(.2, .8, .3, 1.1);
	animation: mcFill 1.1s cubic-bezier(.4, 0, .2, 1) both;
}
.mc-ring:nth-child(1) .mc-ring-disc { animation-delay: .1s; }
.mc-ring:nth-child(2) .mc-ring-disc { animation-delay: .3s; }
.mc-ring:nth-child(3) .mc-ring-disc { animation-delay: .5s; }
/* inner white face carved out of the ring */
.mc-ring-disc::before {
	content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 10%, #fff);
}
.mc-ring:hover .mc-ring-disc { transform: translateY(-5px); }
.mc-ring-n { position: relative; z-index: 1; font: 600 clamp(25px, 2.9vw, 33px) var(--font-d); line-height: 1; color: var(--sc); }
.mc-ring-ico {
	position: absolute; right: -2px; bottom: -2px; z-index: 2; width: 28px; height: 28px; border-radius: 50%;
	display: grid; place-items: center; font-size: 14px; background: #fff;
	box-shadow: 0 7px 14px -6px rgba(20, 50, 25, .42);
	animation: mcBob 2.6s ease-in-out infinite;
}
.mc-ring:nth-child(2) .mc-ring-ico { animation-delay: -.85s; }
.mc-ring:nth-child(3) .mc-ring-ico { animation-delay: -1.7s; }
.mc-ring h3 { font: 600 16.5px var(--font-d); color: var(--ink); margin: 0; }
.mc-ring p { margin: 5px auto 0; max-width: 17ch; font: 500 12.5px/1.4 var(--font-b); color: var(--ink3); }

/* ---- LOVED BY : warm audience cards with a testimonial ---- */
/* the "Loved by" + closing quote share one screen (minus the sticky header) */
.mc-screen2 { min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); display: flex; flex-direction: column; }
.mc-loved { background: linear-gradient(180deg, #F5FAEE 0%, #E9F3DC 100%); flex: 1 0 auto; display: grid; place-items: center; padding: clamp(14px, 2vw, 30px) 0; }
.mc-loved > .wrap { width: 100%; }
.mc-loved-head { position: relative; z-index: 1; text-align: center; max-width: 40em; margin: 0 auto clamp(14px, 2.5vw, 28px); }
.mc-loved-head .mc-lede { margin: 12px auto 0; }
.mc-crowd {
	position: relative; z-index: 1; list-style: none; margin: 0 auto; padding: 6px 0 0;
	max-width: 1000px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 4vw, 44px);
	align-items: start;
}
/* each voice = a tilted testimonial speech bubble with a tail to an avatar */
.mc-voice {
	--dy: 0px; position: relative;
	transform: rotate(var(--tilt)) translateY(var(--dy));
	transition: transform .28s cubic-bezier(.2, .8, .3, 1.1);
	animation: mcNoteDrop .6s cubic-bezier(.2, .8, .3, 1) backwards;
}
.mc-voice:nth-child(1) { animation-delay: .05s; }
.mc-voice:nth-child(2) { animation-delay: .16s; --dy: 24px; }
.mc-voice:nth-child(3) { animation-delay: .27s; --dy: 8px; }
.mc-voice:hover { transform: rotate(0deg) translateY(calc(var(--dy) - 8px)) scale(1.03); z-index: 3; }

.mc-voice-bubble {
	position: relative; background: color-mix(in srgb, var(--cc) 13%, #fff);
	border-radius: 24px 24px 24px 7px; padding: 20px 22px 17px;
	box-shadow: 0 18px 34px -20px rgba(40, 60, 30, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* the tail, pointing down toward the avatar */
.mc-voice-bubble::after {
	content: ""; position: absolute; left: 30px; bottom: -13px; width: 24px; height: 24px;
	background: color-mix(in srgb, var(--cc) 13%, #fff);
	clip-path: polygon(0 0, 100% 0, 0 100%); border-bottom-left-radius: 5px;
	box-shadow: -6px 6px 10px -6px rgba(40, 60, 30, .28);
}
.mc-voice-q { margin: 0; font: 500 italic 18px/1.4 var(--font-d); color: var(--ink); }
.mc-voice-b { margin: 8px 0 0; font: 500 13.5px/1.45 var(--font-b); color: var(--ink3); }
.mc-voice-who { display: flex; align-items: center; gap: 13px; margin: 15px 0 0; padding-left: 16px; }
.mc-voice-face {
	flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 24px;
	background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--cc) 32%, #fff), color-mix(in srgb, var(--cc) 16%, #fff));
	box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--cc) 55%, transparent), inset 0 0 0 2px #fff;
}
.mc-voice-name { display: flex; flex-direction: column; line-height: 1.3; font: 500 12.5px var(--font-b); color: var(--ink3); }
.mc-voice-name b { font: 700 15px var(--font-b); color: var(--cc); }

/* ---- COVERS : the one-balance concept, with colourful food icons ---- */
.mc-covers { position: relative; overflow: hidden; background: linear-gradient(180deg, #FFFFFF 0%, #F8FBF3 100%); padding: clamp(56px, 7vw, 104px) 0; }
.mc-covers-orb { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(80px); background: rgba(224, 178, 74, .18); top: -18%; right: -160px; z-index: 0; pointer-events: none; }
.mc-covers-head { position: relative; z-index: 1; text-align: center; max-width: 58em; margin: 0 auto clamp(40px, 5vw, 70px); }
.mc-covers-head h2 { font: 600 clamp(23px, 3.5vw, 39px)/1.1 var(--font-d); color: var(--ink); margin: 8px 0 0; letter-spacing: -.02em; white-space: nowrap; }
.mc-covers-head h2 em { font-style: italic; color: #2E7D32; }
.mc-covers-sub { margin: 14px auto 0; max-width: 40em; font: 400 clamp(15px, 1.6vw, 17px)/1.62 var(--font-b); color: var(--ink2); }

/* each food line = a colourful icon in a soft "coin" token */
.mc-covers-pair { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 92px); max-width: 800px; margin: 0 auto; }
.mc-covers-item { position: relative; text-align: center; }
/* a sunburst patch tucked behind one corner of each coin, slowly turning */
.mc-covers-patch { position: absolute; top: -28px; left: 50%; width: 122px; height: 122px; z-index: 0; opacity: .9; animation: mcCoversFloat 5.5s ease-in-out infinite; }
.mc-covers-salad .mc-covers-patch { margin-left: -88px; }   /* peeks top-left */
.mc-covers-school .mc-covers-patch { margin-left: -34px; animation-delay: -2.75s; }   /* peeks top-right */
.mc-covers-patch svg { width: 100%; height: 100%; display: block; animation: mcPatchSpin 20s linear infinite; }
.mc-covers-school .mc-covers-patch svg { animation-direction: reverse; }
@keyframes mcPatchSpin { to { transform: rotate(360deg); } }
.mc-covers-token {
	position: relative; z-index: 1;
	display: grid; place-items: center; width: 104px; height: 104px; margin: 0 auto 24px; border-radius: 50%;
	box-shadow: 0 24px 40px -18px rgba(40, 60, 30, .46), inset 0 0 0 1.5px rgba(255, 255, 255, .9);
	animation: mcCoversFloat 5.5s ease-in-out infinite;
}
.mc-covers-school .mc-covers-token { animation-delay: -2.75s; }
.mc-covers-salad .mc-covers-token { background: radial-gradient(circle at 34% 26%, #F1FAE7, #D3ECBE); }
.mc-covers-school .mc-covers-token { background: radial-gradient(circle at 34% 26%, #FDF2DD, #F6DEB6); }
.mc-covers-token svg { width: 58px; height: 58px; display: block; }
.mc-covers-item:hover .mc-covers-token svg { animation: mcIconWiggle .55s ease; }
@keyframes mcIconWiggle {
	0%, 100% { transform: rotate(0) scale(1); }
	25%      { transform: rotate(-15deg) scale(1.12); }
	55%      { transform: rotate(11deg) scale(1.12); }
	80%      { transform: rotate(-5deg) scale(1.06); }
}
@keyframes mcCoversFloat {
	0%, 100% { transform: translateY(0) rotate(-3.5deg); }
	50%      { transform: translateY(-9px) rotate(3.5deg); }
}

.mc-covers-item h3 { margin: 0; font: 700 clamp(21px, 2.4vw, 28px) var(--font-d); letter-spacing: -.01em; }
.mc-covers-salad h3 { color: #1f5c2e; }
.mc-covers-school h3 { color: #a4670a; }
.mc-covers-item p { margin: 11px auto 0; max-width: 22em; font: 400 clamp(14.5px, 1.5vw, 16px)/1.62 var(--font-b); color: var(--ink2); }

/* head + both items rise and fade in as the section scrolls into view */
@media (prefers-reduced-motion: no-preference) {
	.mc-covers-head, .mc-covers-item { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .85s cubic-bezier(.34, 1.56, .64, 1); }
	.mc-covers.is-in .mc-covers-head { opacity: 1; transform: none; }
	.mc-covers.is-in .mc-covers-salad { opacity: 1; transform: none; transition-delay: .12s; }
	.mc-covers.is-in .mc-covers-school { opacity: 1; transform: none; transition-delay: .26s; }
}

@media (max-width: 680px) {
	.mc-covers-head h2 { white-space: normal; }
	.mc-covers-pair { grid-template-columns: 1fr; gap: 48px; max-width: 300px; }
}

/* ---- CLOSING --------------------------------------------- */
.mc-close { background: linear-gradient(135deg, #1f5c2e 0%, #184a24 62%, #123c1d 100%); color: #EAF3DC; text-align: center; flex: 0 0 auto; padding: clamp(20px, 3.5vw, 44px) 0; }
.mc-close blockquote { font: 500 italic clamp(25px, 4.2vw, 40px)/1.2 var(--font-d); color: #F3F8EC; margin: 0 auto; max-width: 16em; letter-spacing: -.01em; }
.mc-close-who { font: 600 14px var(--font-b); color: rgba(234, 243, 220, .68); margin: 12px 0 18px; }
.mc-close .mc-buy { background: linear-gradient(135deg, #F4B24A, #E0930A); color: #3b2600; box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .5); }
.mc-close-leaf { position: absolute; font-size: 30px; opacity: .5; animation: mcFloat 7s ease-in-out infinite; }
.mc-close-leaf-a { top: 18%; left: 12%; }
.mc-close-leaf-b { bottom: 16%; right: 14%; animation-delay: -3s; }


/* ---- keyframes ------------------------------------------- */
@keyframes mcFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
@keyframes mcTwinkle { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes mcGlowPulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes mcSheen { 0% { left: -70%; } 55%, 100% { left: 140%; } }
@keyframes mcCharge { 0% { transform: rotate(-4deg) scale(1); } 40% { transform: rotate(-4deg) scale(1.045); } 100% { transform: rotate(-4deg) scale(1); } }
@keyframes mcHolo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* draws up out of the holder on load */
@keyframes mcDrawOut { 0% { opacity: 0; transform: translateY(40%); } 55% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
/* the card floats gently after it settles */
/* the card floats and gently turns side to side (no full spin) */
@keyframes mcCardSway {
	0%, 100% { transform: translateY(0) rotateY(0deg); }
	25%      { transform: translateY(-5px) rotateY(-13deg); }
	50%      { transform: translateY(-9px) rotateY(0deg); }
	75%      { transform: translateY(-5px) rotateY(13deg); }
}
/* sticky notes settle onto the board, staggered */
@keyframes mcNoteDrop { 0% { opacity: 0; transform: translateY(calc(var(--dy) - 24px)) rotate(var(--tilt)) scale(.95); } 100% { opacity: 1; transform: translateY(var(--dy)) rotate(var(--tilt)) scale(1); } }
/* the how-it-works progress donuts fill up on reveal */
@keyframes mcFill { from { --fill: 0; } }
/* the wavy vein flows left-to-right between steps */
@keyframes mcWave { to { background-position-x: 64px; } }
/* the emoji badges bob gently */
@keyframes mcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---- RESPONSIVE ------------------------------------------ */
@media (max-width: 900px) {
	.mc-stage-in { grid-template-columns: 1fr; gap: 48px; }
	.mc-card-hold { order: -1; }
	.mc-card { transform: rotate(-2deg); }
	.mc-balnote { position: static; margin-top: 14px; }
	.mc-loader { text-align: center; }
	.mc-amounts, .mc-cta { justify-content: center; }
	.mc-lede { margin-left: auto; margin-right: auto; }
	.mc-screen, .mc-screen2 { min-height: 0; }
	.mc-stage { flex: none; display: block; padding: clamp(26px, 7vw, 46px) 0; }
	.mc-flow { flex: none; padding: clamp(34px, 7vw, 56px) 0; }
	.mc-loved { flex: none; display: block; padding: clamp(40px, 8vw, 64px) 0; }
	.mc-close { padding: clamp(44px, 8vw, 72px) 0; }
	.mc-rings { grid-template-columns: 1fr; gap: 34px; max-width: 320px; }
	.mc-rings::before { display: none; }
	.mc-crowd { grid-template-columns: 1fr; max-width: 380px; }
	.mc-voice:nth-child(2), .mc-voice:nth-child(3) { --dy: 0px; }
}
@media (prefers-reduced-motion: reduce) {
	.mc-card, .mc-amt, .mc-buy, .mc-voice, .mc-ring-disc { transition: none; }
	.mc-coin, .mc-leaf, .mc-spark, .mc-close-leaf, .mc-flow-seed,
	.mc-card-float, .mc-glow, .mc-card-sheen::before, .mc-card-holo,
	.mc-card.is-charged,
	.mc-ring-disc, .mc-rings::before, .mc-ring-ico, .mc-voice { animation: none; }
	.mc-card { transform: none; }
	.mc-voice { transform: rotate(var(--tilt)); }
}