@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/video-intros/brand/fonts/sora-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/video-intros/brand/fonts/sora-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/video-intros/brand/fonts/sora-latin-600-normal.woff2') format('woff2'); }
:root {
  --mv-uv: #5236FF; --mv-uv-2: #7A63FF; --mv-lav: #A99BFF; --mv-deep: #0E0B2A; --mv-deep-2: #1B1548; --mv-haze: #F1EFFF; --mv-ground: #F7F6FC;
  --mv-ink: #0E0B2A; --mv-text: #3A3756; --mv-muted: #615D7E; --mv-line: #E7E4F3; --mv-card: #FFFFFF;
  --mv-ok: #14784E; --mv-ok-bg: #E4F6EC; --mv-live: #3F25E6; --mv-live-bg: #ECE9FF; --mv-warn: #8A5600; --mv-warn-bg: #FFF2D9; --mv-bad: #B4213A; --mv-bad-bg: #FDE9EC; --mv-off: #615D7E; --mv-off-bg: #EFEDF6;
  --mv-font: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mv-ease: cubic-bezier(0.25, 1, 0.5, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.mv { margin: 0; background: var(--mv-ground); color: var(--mv-ink); font: 400 16px/1.5 var(--mv-font); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
.mv-app { max-width: 620px; margin: 0 auto; padding: 0 16px calc(36px + env(safe-area-inset-bottom)); }


.mv-hero { position: relative; margin: 0 -16px; padding: calc(22px + env(safe-area-inset-top)) 20px 64px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, #3B2BC9 0%, rgba(59, 43, 201, 0) 60%), radial-gradient(90% 80% at 0% 100%, #2A1E86 0%, rgba(42, 30, 134, 0) 62%), linear-gradient(160deg, var(--mv-deep) 0%, var(--mv-deep-2) 100%); }
.mv-top { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 30px; }
.mv-live { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mv-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6CF0B0; animation: mv-pulse 2.4s var(--mv-ease) infinite; }
.mv-who { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.mv-photo { flex: none; width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .85); background: var(--mv-deep-2); }
.mv-initials { flex: none; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .12); font-size: 1.4rem; font-weight: 600; }
.mv-hello { margin: 0 0 2px; font-size: .9rem; color: rgba(255, 255, 255, .78); }
.mv-hero h1 { margin: 0; font-size: 1.62rem; line-height: 1.16; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.mv-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: #fff; font-size: .9rem; font-weight: 500; text-decoration: none; opacity: .9; }
.mv-back::before { content: "←"; }


.mv-nums { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: -44px; }
.mv-num { padding: 16px 16px 14px; border-radius: 18px; background: var(--mv-card); border: 1px solid var(--mv-line); box-shadow: 0 10px 28px -18px rgba(14, 11, 42, .5); animation: mv-rise .5s var(--mv-ease) both; }
.mv-num:nth-child(2) { animation-delay: .04s; } .mv-num:nth-child(3) { animation-delay: .08s; } .mv-num:nth-child(4) { animation-delay: .12s; }
.mv-num b { display: block; font-size: 2.05rem; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--mv-ink); }
.mv-num span { display: block; margin-top: 4px; font-size: .84rem; font-weight: 500; color: var(--mv-muted); }
.mv-num.mv-accent { background: linear-gradient(150deg, var(--mv-uv) 0%, var(--mv-uv-2) 100%); border-color: transparent; }
.mv-num.mv-accent b, .mv-num.mv-accent span { color: #fff; }


.mv-sec { margin-top: 26px; }
.mv-sec > h2 { margin: 0 4px 10px; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mv-muted); }
.mv-card { padding: 16px; border-radius: 18px; background: var(--mv-card); border: 1px solid var(--mv-line); }
.mv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mv-item { display: block; padding: 14px 16px; border-radius: 18px; background: var(--mv-card); border: 1px solid var(--mv-line); color: inherit; text-decoration: none; transition: border-color .15s var(--mv-ease), transform .15s var(--mv-ease); }
a.mv-item:hover { border-color: var(--mv-lav); }
a.mv-item:active { transform: scale(.992); }
.mv-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mv-name { margin: 0; font-size: 1.04rem; font-weight: 600; letter-spacing: -0.01em; min-width: 0; }
.mv-meta { margin: 4px 0 0; font-size: .88rem; color: var(--mv-muted); }
.mv-note { margin: 6px 0 0; font-size: .92rem; color: var(--mv-text); }
.mv-chip { flex: none; display: inline-block; max-width: 58%; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; line-height: 1.3; text-align: center; background: var(--mv-off-bg); color: var(--mv-off); }
.mv-chip.mv-done { background: var(--mv-ok-bg); color: var(--mv-ok); }
.mv-chip.mv-live2 { background: var(--mv-live-bg); color: var(--mv-live); }
.mv-chip.mv-wait { background: var(--mv-warn-bg); color: var(--mv-warn); }
.mv-chip.mv-bad { background: var(--mv-bad-bg); color: var(--mv-bad); }
.mv-day { margin: 14px 4px 8px; font-size: .95rem; font-weight: 600; color: var(--mv-ink); }
.mv-day:first-child { margin-top: 0; }
.mv-alert { border-left: 3px solid var(--mv-uv); }
.mv-alert.mv-a-failed { border-left-color: var(--mv-bad); }


.mv-perf-head { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.mv-perf-sub { margin: 2px 0 0; font-size: .9rem; color: var(--mv-muted); }
.mv-funnel { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.mv-funnel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 5px; font-size: .92rem; color: var(--mv-text); }
.mv-funnel b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mv-ink); }
.mv-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--mv-haze); overflow: hidden; }
.mv-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mv-uv), var(--mv-lav)); }
.mv-w0 { width: 0; } .mv-w10 { width: 10%; } .mv-w20 { width: 20%; } .mv-w30 { width: 30%; } .mv-w40 { width: 40%; } .mv-w50 { width: 50%; } .mv-w60 { width: 60%; } .mv-w70 { width: 70%; } .mv-w80 { width: 80%; } .mv-w90 { width: 90%; } .mv-w100 { width: 100%; }
.mv-rates { display: grid; gap: 4px; margin: 14px 0 0; font-size: .95rem; color: var(--mv-text); }
.mv-rates b { color: var(--mv-ink); font-weight: 600; }
.mv-trend { display: inline-block; margin: 12px 0 0; padding: 5px 11px; border-radius: 999px; background: var(--mv-haze); color: var(--mv-live); font-size: .82rem; font-weight: 600; }


.mv-feed { list-style: none; margin: 0; padding: 0; }
.mv-feed li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 12px; padding: 0 0 14px; }
.mv-feed li:last-child { padding-bottom: 0; }
.mv-feed li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--mv-line); }
.mv-feed li:last-child::before { display: none; }
.mv-dot { width: 14px; height: 14px; margin-top: 5px; border-radius: 50%; background: var(--mv-lav); border: 3px solid var(--mv-haze); }
.mv-dot.mv-d-completed { background: var(--mv-ok); } .mv-dot.mv-d-failed { background: var(--mv-bad); } .mv-dot.mv-d-started, .mv-dot.mv-d-opened { background: var(--mv-uv); }
.mv-feed p { margin: 0; font-size: .95rem; }
.mv-feed small { display: block; font-size: .8rem; color: var(--mv-muted); }


.mv-empty { margin: 0; color: var(--mv-muted); text-align: center; }
.mv-ready { margin-top: -44px; position: relative; padding: 28px 20px; text-align: center; box-shadow: 0 10px 28px -18px rgba(14, 11, 42, .5); }
.mv-ready h2 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.mv-ready p { margin: 0; color: var(--mv-text); }
.mv-ready p + p { margin-top: 10px; }
.mv-ask { margin-top: 30px; padding: 22px 20px; border-radius: 22px; text-align: center; color: #fff; background: linear-gradient(160deg, var(--mv-deep) 0%, var(--mv-deep-2) 100%); }
.mv-ask h2 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.mv-ask p { margin: 6px 0 0; font-size: .92rem; color: rgba(255, 255, 255, .8); }
.mv-ask-alt { margin-top: 12px; font-size: .84rem; }
.mv-ask-alt strong { color: #fff; font-weight: 600; white-space: nowrap; }
.mv-sub { margin: -4px 2px 10px; font-size: .84rem; color: var(--mv-muted); }
.mv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 16px; padding: 13px 26px; border-radius: 999px; background: #fff; color: var(--mv-deep); font-weight: 600; text-decoration: none; }
.mv-btn.mv-solid { background: var(--mv-uv); color: #fff; }
.mv-btn:focus-visible, a.mv-item:focus-visible, .mv-back:focus-visible { outline: 3px solid var(--mv-lav); outline-offset: 3px; }
.mv-fine { margin: 18px 6px 0; font-size: .78rem; color: var(--mv-muted); text-align: center; }
.mv-powered { display: flex; justify-content: center; margin: 22px 0 0; }
.mv-powered img { height: 14px; width: auto; display: block; opacity: .85; }
.mv-steps { list-style: none; margin: 14px 0 0; padding: 0; }
.mv-step { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; padding: 0 0 16px; color: var(--mv-muted); }
.mv-step:last-child { padding-bottom: 0; }
.mv-step::before { content: ""; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; background: var(--mv-line); }
.mv-step:last-child::before { display: none; }
.mv-step i { grid-row: 1 / span 2; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--mv-line); background: #fff; }
.mv-step.on { color: var(--mv-ink); }
.mv-step.on i { border-color: var(--mv-ok); background: var(--mv-ok); }
.mv-step b { font-weight: 600; }
.mv-step small { font-size: .86rem; color: var(--mv-muted); }

@keyframes mv-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (min-width: 560px) { .mv-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mv-hero { padding-left: 28px; padding-right: 28px; } .mv-hero h1 { font-size: 1.9rem; } }
@media (min-width: 900px) { .mv-app { max-width: 880px; } .mv-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; } .mv-hero { border-radius: 0 0 28px 28px; } }
@media (max-width: 340px) { .mv-num b { font-size: 1.7rem; } .mv-hero h1 { font-size: 1.4rem; } .mv-photo, .mv-initials { width: 56px; height: 56px; } .mv-chip { max-width: 50%; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }