/* MM Hero — broken at 9:00, fixed by 9:41. Pinned on desktop, plays once on phones. */
.mm-hero { position: relative; height: var(--mm-pin, 260vh); background: var(--mm-white); }
.mm-hero .mm-hero__stage { position: sticky; top: var(--mm-hdr); height: calc(100vh - var(--mm-hdr)); min-height: 560px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; padding: 0 var(--mm-edge); overflow: hidden; }
.mm-hero .mm-hero__kicker { font-size: 17px; font-weight: 600; color: var(--mm-navy); margin-bottom: 14px; }
.mm-hero .mm-hero__title { font-size: clamp(48px, 7vw, 96px); line-height: 1; font-weight: 700; letter-spacing: -0.04em; text-wrap: initial; }
.mm-hero .mm-hero__title span { display: block; white-space: nowrap; }
.mm-hero .mm-hero__l2 { color: #c7c7cc; transition: color .4s; }
.mm-hero[data-done] .mm-hero__l2 { color: var(--mm-ink); }
.mm-hero .mm-hero__lede { margin-top: 24px; max-width: 30ch; font-size: 21px; line-height: 1.38; color: var(--mm-grey); }
.mm-hero .mm-hero__device { position: relative; height: 100%; display: grid; place-items: center; }

/* Phone */
.mm-hero .mm-phone { --p: 0; position: relative; container-type: inline-size; width: min(260px, 22vw, calc((100vh - var(--mm-hdr) - 170px) * .4615)); min-width: 200px; aspect-ratio: 300 / 650; border-radius: 17% / 7.8%; padding: 3.6%; background: linear-gradient(145deg, #4a4a4f, #1c1c1e 40%, #3a3a3e 70%, #151517); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18), 0 40px 80px -30px rgba(29, 29, 31, .45), 0 10px 30px -10px rgba(29,29,31,.3); }
.mm-hero .mm-phone::before, .mm-hero .mm-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2c2c2e; }
.mm-hero .mm-phone::before { left: -3px; top: 21%; height: 7%; box-shadow: 0 11vh 0 #2c2c2e; }
.mm-hero .mm-phone::after { right: -3px; top: 27%; height: 11%; }
.mm-hero .mm-phone__screen { position: relative; height: 100%; border-radius: 14% / 6.6%; overflow: hidden; background: #050507; }
.mm-hero .mm-phone__wall { position: absolute; inset: 0; background:
	radial-gradient(120% 70% at 20% 95%, #6d7bff 0%, transparent 60%),
	radial-gradient(110% 70% at 95% 30%, #8a5cf6 0%, transparent 55%),
	radial-gradient(90% 60% at 10% 10%, #2d3d8e 0%, transparent 70%),
	linear-gradient(170deg, #1b2363, #2d3d8e 45%, #4b37b0);
	opacity: calc(.18 + var(--p) * .82); filter: saturate(calc(.2 + var(--p) * .8)) brightness(calc(.45 + var(--p) * .55)); }
.mm-hero .mm-phone__lock { position: absolute; inset: 15% 0 auto; text-align: center; color: #fff; opacity: calc(.35 + var(--p) * .65); }
.mm-hero .mm-phone__date { font-size: 4.8cqw; font-weight: 500; opacity: .9; min-height: 1.2em; }
.mm-hero .mm-phone__time { font-size: 27cqw; font-weight: 650; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.mm-hero .mm-phone__island { position: absolute; top: 2.4%; left: 50%; width: 31%; height: 4.6%; transform: translateX(-50%); border-radius: 99px; background: #000; }
.mm-hero .mm-phone__crack { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-hero .mm-phone__crack path { fill: none; stroke: rgba(255, 255, 255, .78); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mm-hero .mm-phone__crack .shard { fill: rgba(255, 255, 255, .07); stroke: none; }

.mm-hero .mm-hero__notes { position: absolute; inset: 0; pointer-events: none; }
.mm-hero .mm-note { position: absolute; display: grid; gap: 2px; width: 190px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px -12px rgba(29,29,31,.25), 0 0 0 1px rgba(0,0,0,.05); font-size: 13px; line-height: 1.35; color: var(--mm-grey); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.mm-hero .mm-note b { color: var(--mm-ink); font-size: 14px; font-weight: 600; }
.mm-hero .mm-note.is-on { opacity: 1; transform: none; }
.mm-hero .mm-note--a { top: 18%; left: 2%; }
.mm-hero .mm-note--b { top: 46%; right: 0; }
.mm-hero .mm-note--c { bottom: 14%; left: 6%; }

/* Editor: no pinning, final state */
.elementor-editor-active .mm-hero { height: auto; }
.elementor-editor-active .mm-hero .mm-hero__stage { position: relative; top: 0; }

@media (max-width: 833px) {
	.mm-hero { height: auto; }
	.mm-hero .mm-hero__stage { position: relative; top: 0; height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 30px var(--mm-gut) 50px; text-align: center; overflow: hidden; }
	.mm-hero .mm-hero__kicker { font-size: 14px; margin-bottom: 10px; }
	.mm-hero .mm-hero__title { font-size: clamp(40px, 12.2vw, 64px); }
	.mm-hero .mm-hero__lede { margin: 16px auto 0; font-size: 17px; max-width: 32ch; }
	.mm-hero .mm-hero__ctas { justify-content: center; margin-top: 22px; }
	.mm-hero .mm-hero__device { height: auto; }
	.mm-hero .mm-phone { width: min(215px, 56vw); }
	.mm-hero .mm-phone__time { font-size: 50px; }
	.mm-hero .mm-phone__date { font-size: 11px; }
	.mm-hero .mm-note { width: 150px; padding: 9px 12px; font-size: 11.5px; border-radius: 13px; text-align: left; }
	.mm-hero .mm-note b { font-size: 12.5px; }
	.mm-hero .mm-note--a { top: 42%; left: 0; }
	.mm-hero .mm-note--b { top: 62%; right: 0; }
	.mm-hero .mm-note--c { bottom: 5%; left: 0; }
}
@media (max-width: 380px) {
	.mm-hero .mm-hero__title { font-size: 11.4vw; }
}