/* Mozhi public landing page (#/landing): a voice AI platform.
   The page is built around sound: a studio-dark hero with a live waveform,
   violet for Mozhi's voice and kasavu gold (the mascot's saree border) for the
   customer's, on jasmine-lilac light sections. Everything is scoped to .mzl so
   it never touches the workspace screens, and the workspace's element styles
   never reach in. */

body[data-layout="landing"] { background: #fdfbfe; }

.mzl {
  --page: #fdfbfe;
  --lilac: #f5eefa;
  --brand-50: #f8eefb;
  --brand-100: #efd9f5;
  --brand-200: #dfb4ec;
  --brand-300: #c48ad6;
  --brand-500: #79288f;
  --brand-600: #651f78;
  --brand-700: #521862;
  --brand-900: #12051a;
  --studio: #12051a;
  --studio-2: #1d0a28;
  --gold: #c99a3a;
  --gold-2: #e9c46a;
  --gold-soft: #f6e7c1;
  --rec: #ff5a6e;
  --leaf: #0f9d8a;
  --danger: #d92d4a;
  --ink: #22132b;
  --muted: #615569;
  --line: #eadff0;
  --radius-lg: 28px;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(45, 13, 54, 0.05), 0 10px 30px -12px rgba(45, 13, 54, 0.18);
  --shadow-lift: 0 2px 6px rgba(45, 13, 54, 0.08), 0 30px 60px -24px rgba(45, 13, 54, 0.35);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
  interpolate-size: allow-keywords;
  background: var(--page);
  color: var(--ink);
  /* Anek draws Latin and nine Indian scripts as one family, so every language
     on the page shares a single voice; its width axis gives the wide headline
     cut. Scripts Anek does not cover fall back to Noto. Each face downloads
     only when its characters appear (Google serves them with unicode-range). */
  font-family: "Anek Latin", "Anek Tamil", "Anek Devanagari", "Anek Bangla", "Anek Telugu", "Anek Kannada",
    "Anek Malayalam", "Anek Gujarati", "Anek Gurmukhi", "Anek Odia", "Noto Sans Ol Chiki", "Noto Sans Meetei Mayek",
    "Noto Naskh Arabic", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Element reset, at the specificity of one class so every component rule below wins by order. */
.mzl :where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
.mzl :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.mzl :where(ul, ol) { list-style: none; }
.mzl :where(a) { color: inherit; text-decoration: inherit; }
.mzl :where(button, input) { font: inherit; color: inherit; background: transparent; border-radius: 0; }
.mzl :where(button) { cursor: pointer; }
.mzl :where(img, svg, canvas) { display: block; vertical-align: middle; }
.mzl :where(img) { max-width: 100%; height: auto; }
.mzl :where(address) { font-style: normal; }
.mzl :where(summary) { display: list-item; }
.mzl :where(.lucide) { width: 24px; height: 24px; vertical-align: middle; stroke-width: 2; }
.mzl svg { flex-shrink: 0; }
.mzl :focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; border-radius: 10px; }
.mzl-num, .mzl .tnum { font-variant-numeric: tabular-nums; }
.mzl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* icon sizes */
.mzl .i14 { width: 14px; height: 14px; }
.mzl .i15 { width: 15px; height: 15px; }
.mzl .i16 { width: 16px; height: 16px; }
.mzl .i18 { width: 18px; height: 18px; }
.mzl .i20 { width: 20px; height: 20px; }

.mzl-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .mzl-wrap { padding-inline: 32px; } }

.mzl-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--studio); color: #fff; padding: 10px 16px; border-radius: 10px; }
.mzl-skip:focus { top: 12px; }

/* ---------- type ---------- */

.mzl-h2, .mzl-h3 { font-stretch: 112%; letter-spacing: -0.02em; font-weight: 800; text-wrap: balance; }
.mzl-h2 { font-size: clamp(32px, 4vw, 50px); line-height: 1.06; }
.mzl-h3 { font-size: clamp(24px, 2.3vw, 31px); line-height: 1.15; }
.mzl-lead { color: var(--muted); font-size: 19px; max-width: 60ch; margin-top: 16px; text-wrap: pretty; }

.mzl-w { display: inline-block; overflow: clip; overflow-clip-margin: 0.12em; vertical-align: top; padding-bottom: 0.06em; }
.mzl-w > span { display: inline-block; transition: transform 0.8s var(--ease) calc(var(--w) * 45ms); }
@keyframes mzl-rise { from { transform: translateY(105%); } }
@keyframes mzl-fade-up { from { opacity: 0; transform: translateY(16px); } }

/* ---------- buttons, icons ---------- */

.mzl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-weight: 700; font-size: 16.5px; white-space: nowrap; cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.25s var(--spring), background-color 0.2s, box-shadow 0.25s, border-color 0.2s;
}
.mzl-btn svg { width: 19px; height: 19px; }
.mzl-btn:hover { transform: translateY(-2px); }
.mzl-btn:active { transform: translateY(0) scale(0.98); }
.mzl-btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.mzl-btn--sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.mzl-btn--primary { background: var(--brand-500); color: #fff; box-shadow: 0 10px 24px -10px rgba(121, 40, 143, 0.7); }
.mzl-btn--primary:hover { background: var(--brand-600); }
.mzl-btn--outline { border-color: var(--brand-200); color: var(--brand-600); background: #fff; }
.mzl-btn--outline:hover { border-color: var(--brand-500); }
.mzl-btn--gold { background: var(--gold-2); color: var(--studio); box-shadow: 0 12px 30px -12px rgba(233, 196, 106, 0.8); }
.mzl-btn--gold:hover { background: #f2d488; }
.mzl-btn--ghost { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.mzl-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }

.mzl-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; background: var(--brand-50); color: var(--brand-500); }
.mzl-ico svg { width: 18px; height: 18px; }

/* ---------- nav ---------- */

.mzl-nav { position: fixed; inset: 0 0 auto; z-index: 50; padding: 14px 16px 0; pointer-events: none; }
.mzl-nav__bar {
  position: relative; pointer-events: auto; max-width: 1200px; margin-inline: auto;
  display: flex; align-items: center; gap: 24px; padding: 10px 12px 10px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(234, 223, 240, 0.9);
  transition: box-shadow 0.3s;
}
.mzl-nav[data-compact="true"] .mzl-nav__bar { box-shadow: var(--shadow); background: rgba(255, 255, 255, 0.95); }
.mzl-nav__logo img { display: block; height: 30px; width: auto; }
.mzl-nav__links { display: none; gap: 2px; margin-inline: auto; }
.mzl-nav__links a { padding: 8px 13px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--muted); transition: color 0.2s, background-color 0.2s; }
.mzl-nav__links a:hover { color: var(--brand-600); background: var(--brand-50); }
.mzl-nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mzl-nav__signin { display: none; padding: 8px 14px; font-weight: 700; font-size: 15.5px; color: var(--brand-600); }
.mzl-nav__actions .mzl-btn { display: none; }
.mzl-nav__toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.mzl-nav__toggle svg { width: 20px; height: 20px; }
.mzl-nav__toggle[aria-expanded="true"] .mzl-nav__open, .mzl-nav__toggle[aria-expanded="false"] .mzl-nav__close { display: none; }
@media (min-width: 640px) { .mzl-nav__actions .mzl-btn, .mzl-nav__signin { display: inline-flex; } }
@media (min-width: 1000px) { .mzl-nav__links { display: flex; } .mzl-nav__toggle { display: none; } .mzl-nav__actions { margin-left: 0; } }
.mzl-nav__rail { position: absolute; left: 34px; right: 34px; bottom: -1px; height: 2px; }
.mzl-nav__trail { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--brand-300), var(--brand-500)); border-radius: 2px; }
.mzl-nav__engine {
  position: absolute; top: -5px; left: 0; width: 22px; height: 11px; margin-left: -20px; border-radius: 3px 8px 3px 3px;
  background: var(--brand-500); box-shadow: inset -5px 0 0 var(--gold-2); opacity: 0; transition: opacity 0.3s;
}
.mzl-nav[data-compact="true"] .mzl-nav__engine { opacity: 1; }
.mzl-drawer { position: fixed; inset: 0; z-index: 60; background: rgba(18, 5, 26, 0.5); pointer-events: auto; }
.mzl-drawer__panel { position: absolute; inset: 0 0 0 auto; width: min(360px, 88vw); background: #fff; padding: 88px 24px 24px; display: flex; flex-direction: column; gap: 28px; }
.mzl-drawer__panel nav { display: grid; gap: 4px; }
.mzl-drawer__panel nav a { padding: 14px 12px; border-radius: 12px; font-size: 20px; font-weight: 700; }
.mzl-drawer__panel nav a:hover { background: var(--brand-50); }
.mzl-drawer__actions { display: grid; gap: 10px; }

/* ---------- hero: a centred promise over a live demo call ---------- */

.mzl-hero { position: relative; isolation: isolate; overflow: hidden; background: #0d0414; color: #fff; padding: 144px 0 96px; }
@media (min-width: 640px) { .mzl-hero { padding-bottom: 128px; } }
.mzl-hero .mzl-w > span { animation: mzl-rise 0.9s var(--ease) both; animation-delay: calc(150ms + var(--w) * 70ms); }
.mzl-shimmer .mzl-w > span {
  background: linear-gradient(90deg, #f0d9ff, #c48ad6, #e9c46a, #f0d9ff) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mzl-rise 0.9s var(--ease) both, mzl-shine 8s linear infinite;
  animation-delay: calc(150ms + var(--w) * 70ms), 0s;
}
@keyframes mzl-shine { to { background-position: 300% 0; } }

.mzl-aurora { position: absolute; inset: 0; z-index: -10; pointer-events: none; }
.mzl-aurora > i { position: absolute; border-radius: 50%; filter: blur(64px); animation: mzl-aurora 18s ease-in-out infinite; }
.mzl-aurora__a { left: 50%; top: -12%; width: 1100px; height: 620px; translate: -50% 0; background: radial-gradient(closest-side, rgba(121, 40, 143, 0.55), transparent); }
.mzl-aurora > .mzl-aurora__b { left: 8%; top: 38%; width: 520px; height: 380px; background: radial-gradient(closest-side, rgba(168, 85, 247, 0.28), transparent); animation-duration: 22s; animation-direction: reverse; }
.mzl-aurora > .mzl-aurora__c { right: 4%; top: 52%; width: 520px; height: 360px; background: radial-gradient(closest-side, rgba(233, 196, 106, 0.16), transparent); animation-duration: 26s; }
.mzl-aurora > .mzl-aurora__grid {
  inset: 0; border-radius: 0; filter: none; animation: none;
  background: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%);
}
@keyframes mzl-aurora { 0%, 100% { transform: translate(-50%, 0) scale(1); } 50% { transform: translate(-46%, 4%) scale(1.12); } }
@keyframes mzl-bob { 50% { translate: 0 -10px; } }

.mzl-hero__top { display: flex; flex-direction: column; align-items: center; max-width: 1200px; margin-inline: auto; padding-inline: 16px; text-align: center; }
@media (min-width: 640px) { .mzl-hero__top { padding-inline: 32px; } }
.mzl-hero__live {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.85);
  animation: mzl-enter-10 0.6s var(--ease) both;
}
.mzl-hero__live b { border-radius: 999px; background: var(--gold-2); padding: 2px 8px; font-size: 12px; font-weight: 800; color: var(--studio); }
.mzl-hero__title { margin-top: 28px; max-width: 17ch; text-wrap: balance; font-size: clamp(44px, 7vw, 92px); font-weight: 800; line-height: 0.98; letter-spacing: -0.025em; font-stretch: 112%; }
.mzl-hero__title > span { display: block; }
.mzl-hero__lead { margin-top: 28px; max-width: 60ch; font-size: 19px; line-height: 1.625; color: rgba(255, 255, 255, 0.7); animation: mzl-enter-14 0.8s var(--ease) 0.5s both; }
.mzl-hero__ctas { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; animation: mzl-enter-14 0.8s var(--ease) 0.65s both; }
@keyframes mzl-enter-10 { from { opacity: 0; transform: translateY(10px); } }
@keyframes mzl-enter-14 { from { opacity: 0; transform: translateY(14px); } }
@keyframes mzl-enter-40 { from { opacity: 0; transform: translateY(40px); } }
@keyframes mzl-chip-in { 0% { opacity: 0; transform: translateY(20px) scale(0.6); } 60% { opacity: 1; transform: translateY(-2px) scale(1.04); } 100% { opacity: 1; transform: none; } }

.mzl-call { position: relative; max-width: 1080px; margin: 80px auto 0; padding-inline: 16px; }
@media (min-width: 640px) { .mzl-call { padding-inline: 32px; } }
@media (min-width: 1024px) { .mzl-call { padding-left: 176px; } }
.mzl-call__glow { position: absolute; inset: -64px -40px; z-index: -10; pointer-events: none; background: radial-gradient(closest-side, rgba(121, 40, 143, 0.45), transparent); filter: blur(40px); }
.mzl-chip {
  position: absolute; z-index: 20; display: none; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(26, 15, 34, 0.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 13.5px; font-weight: 600; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.mzl-chip > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; }
.mzl-chip--wa { top: -24px; right: 24px; animation: mzl-chip-in 0.7s var(--ease) 1.4s both, mzl-bob 6s ease-in-out 2s infinite; }
.mzl-chip--wa > span { background: #25d366; }
.mzl-chip--crm { bottom: -24px; right: 30%; animation: mzl-chip-in 0.7s var(--ease) 1.7s both, mzl-bob 7s ease-in-out 2.4s infinite; }
.mzl-chip--crm > span { background: #79288f; }
@media (min-width: 768px) { .mzl-chip { display: inline-flex; } }

.mzl-call__mascot { position: relative; z-index: 10; width: 150px; height: 210px; margin: 0 auto -40px; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55)); }
@media (min-width: 1024px) { .mzl-call__mascot { position: absolute; bottom: 0; left: -6px; width: 190px; height: 340px; margin: 0; } }
.mzl-call__mascot .mzl-mascot { width: 100%; height: 100%; }
.mzl-call__mascot .mzl-mascot__img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }

.mzl-call__card {
  position: relative; overflow: hidden; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  animation: mzl-enter-40 1s var(--ease) 0.8s both;
}
.mzl-call__card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); }
@media (min-width: 768px) { .mzl-call__grid { display: grid; grid-template-columns: 1.55fr 1fr; } }
.mzl-call__main { display: flex; flex-direction: column; min-width: 0; padding: 24px; text-align: left; }
@media (min-width: 640px) { .mzl-call__main { padding: 28px; } }
.mzl-call__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mzl-rec { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.mzl-rec__dot { position: relative; display: flex; width: 10px; height: 10px; }
.mzl-rec__dot::before, .mzl-rec__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rec); }
.mzl-rec__dot::before { opacity: 0.7; animation: mzl-ping-dot 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes mzl-ping-dot { 75%, 100% { transform: scale(2); opacity: 0; } }
.mzl-rec__clock { color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }

/* A row of options with a pill that slides to the chosen one. */
.mzl-seg { position: relative; display: inline-flex; border-radius: 999px; }
.mzl-seg > button { position: relative; z-index: 1; border-radius: 999px; transition: color 0.15s var(--tw-ease); }
.mzl-seg__pill { position: absolute; top: 0; left: 0; height: 0; border-radius: 999px; transition: transform 0.45s var(--spring), width 0.45s var(--spring); }
.mzl-seg--lang { padding: 4px; background: rgba(0, 0, 0, 0.3); }
.mzl-seg--lang > button { padding: 6px 14px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.6); }
.mzl-seg--lang > button:hover { color: #fff; }
.mzl-seg--lang > button[aria-pressed="true"] { color: var(--studio); }
.mzl-seg--lang .mzl-seg__pill { background: #fff; }

.mzl-caption { margin-top: 24px; min-height: 200px; }
.mzl-caption__who { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: rgba(255, 255, 255, 0.55); }
.mzl-caption__who[data-who="agent"] { color: var(--brand-200); }
.mzl-caption__who[data-who="customer"] { color: var(--gold-2); }
.mzl-caption__text { margin-top: 12px; font-size: clamp(21px, 2vw, 27px); line-height: 1.38; font-weight: 700; }
.mzl-caption__text span { color: rgba(255, 255, 255, 0.28); animation: mzl-lit 0.25s ease forwards; animation-delay: var(--d); }
@keyframes mzl-lit { to { color: #fff; } }
.mzl-caption__gloss { margin-top: 12px; font-size: 15px; color: rgba(255, 255, 255, 0.58); animation: mzl-fade-up 0.5s var(--ease) 0.4s both; }
.mzl-outcomes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mzl-outcomes li {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 10px;
  border: 2px solid var(--gold-2); color: var(--gold-2); font-weight: 800; font-size: 15px;
  animation: mzl-stamp 0.5s var(--ease) both; animation-delay: calc(var(--i) * 180ms);
}
.mzl-outcomes li svg { width: 16px; height: 16px; }
@keyframes mzl-stamp { 0% { opacity: 0; transform: scale(2.2) rotate(-12deg); } 70% { opacity: 1; transform: scale(0.95) rotate(-3deg); } 100% { transform: rotate(-2deg); } }
.mzl-call__wave { height: 120px; margin: 16px -8px 0; }
.mzl-call__wave canvas { width: 100%; height: 100%; }

.mzl-call__side { padding: 24px; text-align: left; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.2); }
@media (min-width: 640px) { .mzl-call__side { padding: 28px; } }
@media (min-width: 768px) { .mzl-call__side { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); } }
.mzl-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.025em; color: rgba(255, 255, 255, 0.4); }
.mzl-call__side .mzl-kicker + * { margin-top: 16px; }
.mzl-call__side .mzl-kicker:not(:first-child) { margin-top: 28px; }
.mzl-call__details { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: 14px; }
.mzl-call__details dt { color: rgba(255, 255, 255, 0.45); }
.mzl-call__details dd { font-weight: 600; }
.mzl-call__steps { display: flex; flex-direction: column; gap: 12px; }
.mzl-call__steps li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(255, 255, 255, 0.35); transition: all 0.5s var(--tw-ease); }
.mzl-call__steps li > span { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); scale: 0.9; transition: all 0.5s var(--tw-ease); }
.mzl-call__steps li[data-on] { color: #fff; }
.mzl-call__steps li[data-on] > span { scale: 1; border-color: var(--gold-2); background: var(--gold-2); color: var(--studio); }

.mzl-mascot { display: inline-block; position: relative; line-height: 0; background: none; border: 0; padding: 0; }
button.mzl-mascot { cursor: pointer; }
.mzl-mascot__img { display: block; height: 100%; width: auto; max-width: none; user-select: none; transform-origin: 50% 100%; }
.mzl-mascot__img--out { position: absolute; left: 0; bottom: 0; pointer-events: none; }
.mzl-mascot[data-flip] .mzl-mascot__img { scale: -1 1; }

/* ---------- stats ---------- */

.mzl-stats { background: var(--studio); color: #fff; padding: 0 0 70px; }
.mzl-stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.1); }
@media (min-width: 900px) { .mzl-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mzl-stat { display: grid; gap: 6px; padding: 30px 22px 0 0; }
.mzl-stat__value { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; font-stretch: 112%; color: var(--gold-2); line-height: 1.1; }
.mzl-stat__label { color: rgba(255, 255, 255, 0.66); font-size: 15px; max-width: 24ch; }

/* ---------- sections ---------- */

.mzl-section { padding: 110px 0; position: relative; }
.mzl-section--lilac { background: var(--lilac); }
.mzl-section--ink { background: linear-gradient(var(--studio-2), var(--studio)); color: #fff; }
/* The product tour continues the hero's studio before the page turns light. */
.mzl-section--tour { background: var(--studio); padding-top: 70px; padding-bottom: 130px; }
.mzl-head { margin-bottom: 54px; }
.mzl-head--dark .mzl-lead { color: rgba(255, 255, 255, 0.7); }
.mzl-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.mzl-head-row .mzl-head { flex: 1; }

.mzl-sprite {
  display: block; width: auto; max-width: none; pointer-events: none; user-select: none; flex-shrink: 0;
  filter: drop-shadow(0 16px 18px rgba(45, 13, 54, 0.18));
  animation: mzl-float 5s ease-in-out infinite; transform-origin: 50% 100%;
}
.mzl-sprite[data-state="in"] { animation: mzl-pop 0.8s var(--spring) both, mzl-float 5s ease-in-out 0.8s infinite; }
.mzl-sprite[data-state^="armed"] { opacity: 0; }
@keyframes mzl-float { 50% { translate: 0 -8px; } }
@keyframes mzl-pop { from { opacity: 0; transform: scale(0.4) translateY(30px); } }
.mzl-sprite--head { height: 200px; margin-bottom: 40px; display: none; }
@media (min-width: 800px) { .mzl-sprite--head { display: block; } }

/* Content is rendered fully visible; only elements that start below the fold
   are "armed" by the script, so a failed script never leaves anything hidden. */
.mzl [data-reveal][data-state="armed"]:not(.mzl-sprite):not(.mzl-head) { opacity: 0; transform: translateY(28px); }
.mzl [data-reveal][data-state="armed-fade"]:not(.mzl-sprite) { opacity: 0; }
.mzl [data-reveal]:not(.mzl-sprite) { transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.mzl-head[data-state="armed"] .mzl-w > span { transform: translateY(105%); }
.mzl-head[data-state="armed"] .mzl-lead { opacity: 0; transform: translateY(12px); }
.mzl-head .mzl-lead { transition: opacity 0.7s var(--ease) 0.3s, transform 0.7s var(--ease) 0.3s; }

/* ---------- product tour ---------- */

.mzl-tour { display: grid; align-items: center; gap: 40px; }
@media (min-width: 1024px) { .mzl-tour { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.6fr); gap: 56px; } }
.mzl-tour__tabs { display: flex; flex-direction: column; gap: 8px; }
.mzl-tour__tab { position: relative; overflow: hidden; display: block; padding: 20px; border-radius: 16px; border: 1px solid transparent; text-align: left; transition: all 0.5s var(--tw-ease); }
.mzl-tour__tab:hover { background: rgba(255, 255, 255, 0.03); }
.mzl-tour__tab[aria-selected="true"] { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); }
.mzl-tour__head { display: flex; align-items: baseline; gap: 12px; }
.mzl-tour__n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.35); transition: color 0.15s var(--tw-ease); }
.mzl-tour__title { font-size: 22px; font-weight: 800; font-stretch: 112%; color: rgba(255, 255, 255, 0.5); transition: color 0.15s var(--tw-ease); }
.mzl-tour__tab:hover .mzl-tour__title { color: rgba(255, 255, 255, 0.8); }
.mzl-tour__tab[aria-selected="true"] .mzl-tour__n { color: var(--gold-2); }
.mzl-tour__tab[aria-selected="true"] .mzl-tour__title { color: #fff; }
.mzl-tour__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--tw-ease); }
.mzl-tour__tab[aria-selected="true"] .mzl-tour__more { grid-template-rows: 1fr; }
.mzl-tour__more > span { overflow: hidden; }
.mzl-tour__body { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.625; color: rgba(255, 255, 255, 0.65); }
.mzl-tour__points { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.mzl-tour__points > span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.mzl-tour__points svg { color: var(--gold-2); }
.mzl-tour__bar { position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, 0.1); }
.mzl-tour__tab:not([aria-selected="true"]) .mzl-tour__bar { display: none; }
.mzl-tour__bar > span { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, #c48ad6, #e9c46a); }
.mzl-tour__bar[data-run] > span { animation: mzl-grow var(--ms) linear forwards; }
@keyframes mzl-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mzl-tour__stage { position: relative; perspective: 1600px; }
.mzl-tour__stage::before { content: ""; position: absolute; inset: -40px; border-radius: 48px; pointer-events: none; background: radial-gradient(closest-side, rgba(121, 40, 143, 0.55), transparent); filter: blur(40px); }
.mzl-tour__frame {
  position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.15); background: #0c0910;
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9); transform: rotateX(6deg) rotateY(-8deg); transition: transform 0.7s var(--tw-ease);
}
.mzl-tour__frame:hover { transform: rotateX(0deg) rotateY(0deg); }
.mzl-tour__chrome { display: flex; align-items: center; gap: 8px; height: 36px; padding-inline: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: #16111c; }
.mzl-tour__chrome > i { width: 12px; height: 12px; border-radius: 50%; }
.mzl-tour__chrome > span { margin-inline: auto; padding: 4px 40px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); font-size: 11.5px; color: rgba(255, 255, 255, 0.5); }
/* The console mockup is drawn at a fixed 1120 x 700 and scaled to fit, so
   every screen keeps its exact layout at any width, like a real screenshot. */
.mzl-tour__scaled { position: relative; width: 100%; overflow: hidden; height: calc(700px * var(--s, 0.6)); }
.mzl-tour__canvas { position: absolute; left: 0; top: 0; width: 1120px; height: 700px; transform-origin: top left; transform: scale(var(--s, 0.6)); }
.mzl-tour__screen { width: 100%; height: 100%; }

/* console screens */
.mzs { display: flex; width: 100%; height: 100%; background: #0c0910; color: #fff; }
.mzs-side { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; width: 196px; padding: 16px 12px; border-right: 1px solid rgba(255, 255, 255, 0.07); background: #100c15; }
.mzs-side > img { align-self: flex-start; width: auto; height: 22px; margin: 0 0 20px 8px; }
.mzs-side > p { margin: 0 0 4px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.025em; color: rgba(255, 255, 255, 0.35); }
.mzs-side > p.mzs-manage { margin-top: 16px; }
.mzs-nav { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.mzs-nav svg { width: 15px; height: 15px; }
.mzs-nav[data-on] { background: rgba(121, 40, 143, 0.3); color: #fff; }
.mzs-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mzs-top { display: flex; align-items: center; gap: 12px; flex-shrink: 0; height: 54px; padding-inline: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.mzs-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.mzs-ver { margin-left: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); font-size: 11.5px; color: rgba(255, 255, 255, 0.7); }
.mzs-body { position: relative; flex: 1; min-height: 0; }
.mzs-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.mzs-btn--primary { border-color: transparent; background: #79288f; color: #fff; }
.mzs-btn svg { width: 14px; height: 14px; }
.mzs-pad { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 20px; }
.mzs-label { font-size: 12px; font-weight: 700; letter-spacing: 0.025em; color: rgba(255, 255, 255, 0.4); }
.mzs-box { border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); }
.mzs-col { display: flex; flex-direction: column; gap: 12px; }
.mzs-strong { display: block; font-weight: 600; }
.mzs-dim { color: rgba(255, 255, 255, 0.45); }
.mzs-bars { display: flex; align-items: center; gap: 2px; }
.mzs-bars i { width: 3px; border-radius: 4px; background: #c48ad6; animation: mzl-bar 0.9s ease-in-out infinite; }
.mzs-tag { border-radius: 6px; padding: 2px 8px; font-size: 11.5px; }
.mzs-ok { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.mzs-warn { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.mzs-bad { background: rgba(244, 63, 94, 0.15); color: #fda4af; }
.mzs-none { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); }
.mzs-takeover { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 8px; background: var(--gold-2); font-size: 12px; font-weight: 700; color: var(--studio); animation: mzl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.mzs-takeover svg { width: 14px; height: 14px; }
@keyframes mzl-pulse { 50% { opacity: 0.5; } }
@keyframes mzl-in-up { from { opacity: 0; transform: translateY(12px) scale(0.94); } }
@keyframes mzl-in-left { from { opacity: 0; transform: translateX(-14px); } }
@keyframes mzl-in-fade { from { opacity: 0; } }

/* build */
.mzs-canvas { position: absolute; inset: 0 284px 0 0; background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.4px) 0 0 / 22px 22px; }
.mzs-canvas > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mzs-canvas path { fill: none; stroke-width: 2; }
.mzs-canvas .mzs-flow { stroke: #e9c46a; stroke-dasharray: 6 14; animation: mzl-flow 1.2s linear infinite; }
.mzs-canvas text { fill: rgba(255, 255, 255, 0.6); font-size: 11px; font-weight: 600; text-anchor: middle; }
@keyframes mzl-flow { to { stroke-dashoffset: -20; } }
.mzs-node {
  position: absolute; display: flex; align-items: center; gap: 10px; width: 160px; height: 58px; padding-inline: 12px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: #17121d; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  animation: mzl-in-up 0.55s var(--spring) both; animation-delay: calc(var(--i) * 80ms);
}
.mzs-node[data-on] { border-color: #a855f7; box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.2), 0 10px 30px -10px rgba(0, 0, 0, 0.6); }
.mzs-node > span:first-child { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; }
.mzs-node > span:first-child svg { width: 16px; height: 16px; color: #fff; }
.mzs-node > span:last-child { min-width: 0; line-height: 1.25; }
.mzs-node b, .mzs-node small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mzs-node b { font-size: 12.5px; font-weight: 600; }
.mzs-node small { font-size: 11px; color: rgba(255, 255, 255, 0.45); }
.mzs-edit { position: absolute; inset: 0 0 0 auto; display: flex; flex-direction: column; gap: 12px; width: 284px; padding: 16px; border-left: 1px solid rgba(255, 255, 255, 0.07); background: #100c15; font-size: 12.5px; }
.mzs-edit > p { font-size: 14px; font-weight: 600; }
.mzs-edit > label { color: rgba(255, 255, 255, 0.5); }
.mzs-field { padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); }
.mzs-field--prompt { min-height: 150px; border-color: rgba(168, 85, 247, 0.5); line-height: 1.625; color: rgba(255, 255, 255, 0.8); }
.mzs-field--voice { display: flex; align-items: center; justify-content: space-between; }
.mzs-caret { display: inline-block; width: 2px; height: 13px; margin-left: 1px; translate: 0 2px; background: #e9c46a; animation: mzl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.mzs-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.mzs-tools > span { padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); font-size: 11.5px; }

/* connect */
.mzs-split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; }
.mzs-model { display: flex; align-items: center; gap: 16px; padding: 16px; animation: mzl-in-left 0.5s var(--ease) both; animation-delay: calc(var(--i) * 120ms); }
.mzs-model > span:first-child { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(121, 40, 143, 0.4); }
.mzs-model > span:first-child svg { width: 20px; height: 20px; color: #dfb4ec; }
.mzs-model > span:nth-child(2) { flex: 1; }
.mzs-model small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.45); }
.mzs-model b { display: block; font-size: 16px; font-weight: 600; }
.mzs-pill { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 11.5px; color: rgba(255, 255, 255, 0.7); }
.mzs-hint { margin-top: 4px; padding: 16px; border-radius: 16px; border: 1px solid rgba(233, 196, 106, 0.3); background: rgba(233, 196, 106, 0.07); font-size: 12.5px; color: #f6e7c1; }
.mzs-line { display: flex; align-items: center; gap: 12px; padding: 14px; }
.mzs-line > svg { width: 16px; height: 16px; color: rgba(255, 255, 255, 0.6); }
.mzs-line > span:nth-child(2) { flex: 1; }
.mzs-line b { display: block; font-size: 13px; font-weight: 600; }
.mzs-line small { font-size: 11.5px; color: rgba(255, 255, 255, 0.45); }
.mzs-ms { font-size: 11.5px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.5); }
.mzs-health { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.mzs-col > .mzs-label:not(:first-child) { margin-top: 8px; }
.mzs-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mzs-channel { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); }
.mzs-channel > svg { width: 16px; height: 16px; color: rgba(255, 255, 255, 0.6); }
.mzs-channel > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.mzs-switch { position: relative; width: 32px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); }
.mzs-switch i { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.mzs-switch[data-on] { background: #79288f; }
.mzs-switch[data-on] i { left: 17px; }
.mzs-preview { margin-top: auto; padding: 16px; }
.mzs-voices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.mzs-voice { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.mzs-voice[data-on] { background: rgba(121, 40, 143, 0.3); box-shadow: 0 0 0 1px rgba(196, 138, 214, 0.5); }
.mzs-voice > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.mzs-voice > span:first-child svg { width: 14px; height: 14px; }
.mzs-voice > span:nth-child(2) { flex: 1; min-width: 0; }
.mzs-voice b { display: block; font-size: 14px; font-weight: 700; }
.mzs-voice small { font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.mzs-voice .mzs-bars i { background: #e9c46a; }

/* run */
.mzs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mzs-stats > div { padding: 14px; }
.mzs-stats small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.45); }
.mzs-stats b { display: block; margin-top: 4px; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mzs-progress { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.mzs-progress i { display: block; width: 62%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c48ad6, #79288f); }
.mzs-run { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; flex: 1; min-height: 0; }
.mzs-live { display: flex; flex-direction: column; gap: 10px; }
.mzs-live > .mzs-label { display: flex; align-items: center; gap: 8px; }
.mzs-live > .mzs-label i { width: 8px; height: 8px; border-radius: 50%; background: #ff5a6e; animation: mzl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.mzs-callrow { display: flex; align-items: center; gap: 12px; padding: 14px; }
.mzs-callrow[data-flag] { border-color: rgba(251, 113, 133, 0.4); background: rgba(244, 63, 94, 0.08); }
.mzs-callrow > span:nth-child(2) { flex: 1; }
.mzs-callrow b { display: block; font-size: 13px; font-weight: 600; }
.mzs-callrow small { font-size: 11.5px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.45); }
.mzs-clock { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mzs-mood { font-size: 11.5px; font-weight: 700; }
.mzs-listen { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.mzs-transcript { display: flex; flex-direction: column; padding: 16px; }
.mzs-bubbles { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font-size: 12.5px; }
.mzs-bubbles > span { padding: 8px 12px; border-radius: 12px; }
.mzs-agent { align-self: flex-start; border-bottom-left-radius: 4px !important; background: rgba(121, 40, 143, 0.4); }
.mzs-cust { align-self: flex-end; border-bottom-right-radius: 4px !important; background: rgba(255, 255, 255, 0.1); }
.mzs-flagline { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 11.5px; color: #fda4af; }
.mzs-flagline svg { width: 14px; height: 14px; }
.mzs-green { color: #6ee7b7; }
.mzs-amber { color: #fcd34d; }
.mzs-rose { color: #fda4af; }

/* review */
.mzs-review { display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; height: 100%; padding: 20px; }
.mzs-table { overflow: hidden; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); }
.mzs-tr { display: grid; grid-template-columns: 64px 1.25fr 0.75fr 1.05fr 1.15fr 52px; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 12.5px; animation: mzl-in-fade 0.4s ease both; animation-delay: calc(var(--i) * 80ms); }
.mzs-tr--head { padding-block: 10px; border-bottom-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.45); animation: none; }
.mzs-tr[data-sel] { background: rgba(121, 40, 143, 0.2); }
.mzs-disp { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.mzs-an { white-space: nowrap; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.mzs-analysis { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.mzs-analysis > p:first-child { font-size: 14px; font-weight: 600; }
.mzs-analysis > p.mzs-text { font-size: 12.5px; line-height: 1.625; color: rgba(255, 255, 255, 0.7); }
.mzs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mzs-issue { padding: 2px 8px; border-radius: 6px; background: rgba(233, 196, 106, 0.15); font-size: 11.5px; color: #f6e7c1; }
.mzs-player { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); }
.mzs-player > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #79288f; }
.mzs-player > span:first-child svg { width: 14px; height: 14px; }
.mzs-player > span:nth-child(2) { display: flex; align-items: center; gap: 2px; flex: 1; height: 24px; }
.mzs-player > span:nth-child(2) i { flex: 1; border-radius: 4px; background: rgba(255, 255, 255, 0.2); }
.mzs-player > span:nth-child(2) i[data-on] { background: #c48ad6; }
.mzs-player > span:last-child { font-size: 11.5px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.6); }

/* ---------- pipeline ---------- */

.mzl-pipe { position: relative; display: grid; gap: 18px; }
@media (min-width: 960px) { .mzl-pipe { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.mzl-pipe__line { display: none; }
@media (min-width: 960px) {
  .mzl-pipe__line { display: block; position: absolute; left: 12%; right: 12%; top: 49px; height: 2px; background: rgba(255, 255, 255, 0.12); }
  .mzl-pipe__line i {
    position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-2);
    box-shadow: 0 0 16px 4px rgba(233, 196, 106, 0.6);
    left: calc(var(--a) / 3 * 100%); translate: -50% 0; transition: left 0.6s var(--ease);
  }
}
.mzl-pipe__stage {
  position: relative; display: grid; gap: 8px; align-content: start; padding: 24px 22px;
  border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.68); font-size: 15.5px;
  transition: background-color 0.4s, border-color 0.4s, transform 0.5s var(--spring);
}
.mzl-pipe__stage[data-on] { background: rgba(121, 40, 143, 0.28); border-color: rgba(196, 138, 214, 0.55); transform: translateY(-6px); }
.mzl-pipe__node {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.08); color: var(--brand-200); transition: background-color 0.4s, color 0.4s, box-shadow 0.4s;
}
.mzl-pipe__node svg { width: 24px; height: 24px; }
.mzl-pipe__stage[data-on] .mzl-pipe__node { background: var(--gold-2); color: var(--studio); box-shadow: 0 0 30px rgba(233, 196, 106, 0.45); }
.mzl-pipe__step { font-size: 13px; font-weight: 700; color: var(--brand-300); }
.mzl-pipe__title { font-size: 24px; font-weight: 800; color: #fff; font-stretch: 112%; }
.mzl-pipe__model { justify-self: start; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.8); }
.mzl-art { display: grid; gap: 8px; margin-top: 10px; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, 0.25); min-height: 98px; align-content: center; }
.mzl-art__text { color: #fff; font-weight: 600; font-size: 15px; }
.mzl-art__chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.mzl-art__chip svg { width: 14px; height: 14px; }
.mzl-art__chip--ok { color: #8be3d4; background: rgba(15, 157, 138, 0.18); }
.mzl-bars { display: flex; align-items: center; gap: 3px; height: 30px; }
.mzl-bars i { flex: 1; height: 18%; border-radius: 2px; background: var(--brand-300); }
.mzl-pipe__stage[data-on] .mzl-bars i { animation: mzl-bar 0.9s ease-in-out infinite; animation-delay: calc(var(--i) * -61ms); }
@keyframes mzl-bar { 50% { height: 100%; } }

/* ---------- mic check ---------- */

.mzl-mic { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .mzl-mic { grid-template-columns: 1fr 1fr; gap: 64px; } }
.mzl-mic__stage { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center; display: grid; place-items: center; container-type: inline-size; }
.mzl-mic__stage::before {
  content: ""; position: absolute; inset: 15%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 60%, var(--brand-50) 61% 100%); box-shadow: var(--shadow-lift);
}
.mzl-mic__ring { position: absolute; inset: 0; }
.mzl-mic__ring i {
  --v: 0;
  position: absolute; left: 50%; top: 50%; width: 5px; height: calc(10px + var(--v) * 70px); margin-left: -2.5px;
  border-radius: 4px; background: linear-gradient(var(--brand-300), var(--brand-500));
  transform-origin: 50% 0; transform: rotate(var(--r)) translateY(36cqw); opacity: calc(0.35 + var(--v));
}
.mzl-mic__stage[data-state="off"] .mzl-mic__ring i,
.mzl-mic__stage[data-state="blocked"] .mzl-mic__ring i { animation: mzl-idle 2.4s ease-in-out infinite; }
@keyframes mzl-idle { 50% { height: 22px; } }
.mzl-mic__mascot { position: relative; height: 62cqw; display: flex; align-items: flex-end; justify-content: center; translate: 0 4cqw; }
.mzl-mic__mascot .mzl-mascot { height: 100%; }
.mzl-mic__bubble {
  position: absolute; top: 4%; right: 0; padding: 8px 14px; border-radius: 16px 16px 16px 4px; background: var(--studio); color: #fff;
  font-weight: 800; font-size: 16px; box-shadow: var(--shadow-lift); animation: mzl-fade-up 0.4s var(--ease) both;
}
.mzl-mic__copy { display: grid; gap: 18px; justify-items: start; }
.mzl-mic__copy > p:not([class]) { color: var(--muted); font-size: 18px; max-width: 52ch; }
.mzl-mic__err { padding: 12px 16px; border-radius: 12px; background: #fff0f2; color: #a01d33; font-size: 15px; }
.mzl-mic__fine { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.mzl-mic__fine svg { width: 17px; height: 17px; color: var(--leaf); }

/* ---------- use cases: call recordings ---------- */

.mzl-notes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* The live page carried these three from a retired languages note that shared the class name. */
.mzl-note { margin-top: 30px; color: var(--muted); font-size: 15.5px; }
.mzl-note { display: grid; gap: 14px; align-content: start; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); transition: box-shadow 0.3s, border-color 0.3s; }
.mzl-note[data-playing] { border-color: var(--brand-300); box-shadow: var(--shadow-lift); }
.mzl-note__top { display: flex; align-items: center; gap: 10px; }
.mzl-note__top h3 { font-size: 17px; font-weight: 800; flex: 1; }
.mzl-note__time { font-size: 14px; font-weight: 700; color: var(--muted); }
.mzl-note__player { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 999px; background: var(--lilac); }
.mzl-note__play {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brand-500); color: #fff; flex-shrink: 0; transition: transform 0.25s var(--spring), background-color 0.2s;
}
.mzl-note__play:hover { transform: scale(1.08); background: var(--brand-600); }
.mzl-note__play svg { width: 17px; height: 17px; }
.mzl-note:not([data-playing]) .mzl-note__pause, .mzl-note[data-playing] .mzl-note__playicon { display: none; }
.mzl-note__wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; }
.mzl-note__wave i { flex: 1; height: calc(var(--p) * 100%); border-radius: 2px; background: var(--brand-200); }
.mzl-note[data-playing] .mzl-note__wave i { animation: mzl-play-bar 0.2s linear forwards; animation-delay: calc(var(--i) * var(--ms) / 34); }
.mzl-note[data-open]:not([data-playing]) .mzl-note__wave i { background: var(--brand-500); }
@keyframes mzl-play-bar { to { background: var(--brand-500); } }
.mzl-note__quote { font-size: 15px; color: var(--muted); line-height: 1.5; }
.mzl-note__outcome { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 10px; border: 2px dashed var(--line); color: var(--muted); font-size: 13.5px; font-weight: 800; }
.mzl-note__outcome svg { width: 15px; height: 15px; }
.mzl-note[data-open] .mzl-note__outcome { border: 2px solid var(--leaf); color: var(--leaf); animation: mzl-stamp 0.5s var(--ease) both; }

/* ---------- why Mozhi: bento ---------- */

.mzl-bento { display: grid; gap: 16px; }
@media (min-width: 768px) {
  .mzl-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mzl-spot--4 { grid-column: span 4 / span 4; grid-row: span 2 / span 2; }
  .mzl-spot--3 { grid-column: span 3 / span 3; }
  .mzl-spot--2 { grid-column: span 2 / span 2; }
}
/* A card with a soft light that follows the cursor and lights its border on the way. */
.mzl-spot { position: relative; overflow: hidden; padding: 28px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.035); }
.mzl-spot::before, .mzl-spot::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--tw-ease); }
.mzl-spot::before { background: radial-gradient(420px circle at var(--x) var(--y), rgba(196, 138, 214, 0.18), transparent 60%); }
.mzl-spot::after {
  border-radius: 28px; padding: 1px;
  background: radial-gradient(260px circle at var(--x) var(--y), rgba(233, 196, 106, 0.55), transparent 60%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box exclude, linear-gradient(#000, #000);
}
.mzl-spot:hover::before, .mzl-spot:hover::after { opacity: 1; }
.mzl-spot__in { position: relative; height: 100%; }
.mzl-spot__col { display: flex; flex-direction: column; }
.mzl-spot h3 { font-size: 23px; font-weight: 800; line-height: 1.25; color: #fff; font-stretch: 112%; }
.mzl-spot__body { margin-top: 8px; max-width: 44ch; font-size: 15.5px; line-height: 1.625; color: rgba(255, 255, 255, 0.65); }
.mzl-greet { position: relative; height: 1.25em; font-size: clamp(56px, 7vw, 104px); font-weight: 800; line-height: 1; }
.mzl-greet > span {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  background: linear-gradient(90deg, #fff, #dfb4ec, #e9c46a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mzl-greet > span[data-in] { animation: mzl-greet-in 0.5s var(--ease) both; }
.mzl-greet > span[data-out] { animation: mzl-greet-out 0.5s var(--ease) both; }
@keyframes mzl-greet-in { from { transform: translateY(60%); opacity: 0; filter: blur(10px); } }
@keyframes mzl-greet-out { to { transform: translateY(-60%); opacity: 0; filter: blur(10px); } }
.mzl-langroll { margin-top: auto; padding-top: 32px; }
.mzl-langroll > div { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mzl-langroll ul { display: flex; flex-shrink: 0; gap: 10px; padding-right: 10px; animation: mzl-marquee 50s linear infinite; }
.mzl-langroll li { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, 0.8); }
.mzl-langroll li[data-live] { border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.1); color: #fff; }
.mzl-langroll li span { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.45); }
.mzl-takeover { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 12px; border-radius: 16px; border: 1px solid rgba(251, 113, 133, 0.3); background: rgba(244, 63, 94, 0.08); }
.mzl-takeover .mzs-bars { height: 28px; }
.mzl-takeover > span:nth-child(2) { flex: 1; font-size: 13px; font-weight: 600; color: #fff; }
.mzl-takeover small { display: block; font-size: 11.5px; font-weight: 500; color: #fda4af; }
.mzl-seconds { display: flex; align-items: flex-end; gap: 24px; margin-top: 24px; }
.mzl-seconds small { display: block; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.45); }
.mzl-seconds b { display: block; font-size: 44px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.mzl-seconds div + div b { color: var(--gold-2); }
.mzl-wa { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.mzl-wa > div { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.07); transition: opacity 0.25s, transform 0.4s var(--ease); }
.mzl-wa > div[data-in] { animation: mzl-wa-in 0.5s var(--spring) both; }
.mzl-wa > div[data-out] { opacity: 0; }
@keyframes mzl-wa-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
.mzl-wa__icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #25d366; color: #fff; }
.mzl-wa__text { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.375; color: rgba(255, 255, 255, 0.85); }
.mzl-wa__time { font-size: 11px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.4); }
.mzl-homes { display: grid; gap: 10px; margin-top: 24px; }
.mzl-homes li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); }
.mzl-homes li > span:first-child { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: rgba(121, 40, 143, 0.4); color: #dfb4ec; }
.mzl-homes li > span:nth-child(2) { flex: 1; }
.mzl-homes li small { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
.mzl-homes b { display: block; font-size: 14px; font-weight: 600; color: #fff; }
.mzl-homes li > svg { color: var(--gold-2); }

/* ---------- works with ---------- */

.mzl-works { padding: 64px 0; display: grid; gap: 22px; text-align: center; overflow: hidden; border-block: 1px solid var(--line); }
.mzl-works__title { font-size: 17px; font-weight: 700; color: var(--muted); padding-inline: 16px; }
.mzl-works__marquee { display: flex; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mzl-works__track { display: flex; flex-shrink: 0; gap: 56px; padding-right: 56px; animation: mzl-marquee 40s linear infinite; }
.mzl-works__track li { font-size: 24px; font-weight: 800; color: #b3a6bb; white-space: nowrap; font-stretch: 112%; transition: color 0.2s; }
.mzl-works__track li:hover { color: var(--brand-500); }
@keyframes mzl-marquee { to { transform: translateX(-100%); } }

/* ---------- pricing ---------- */

.mzl-pricing { display: flex; flex-direction: column; gap: 24px; }
.mzl-seg--bill { align-self: flex-start; padding: 4px; border: 1px solid #eadff0; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.mzl-seg--bill > button { padding: 10px 20px; font-size: 15px; font-weight: 700; color: #615569; }
.mzl-seg--bill > button:hover { color: #22132b; }
.mzl-seg--bill > button[aria-checked="true"] { color: #fff; }
.mzl-seg--bill .mzl-seg__pill { background: #12051a; }
.mzl-byok { max-width: 80ch; padding: 14px 20px; border-radius: 16px; background: #f6e7c1; font-size: 15px; color: #6b4f12; }

@property --mzl-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.mzl-plans { display: grid; gap: 16px; }
@media (min-width: 768px) { .mzl-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .mzl-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mzl-plan { position: relative; display: flex; flex-direction: column; padding: 1.5px; border-radius: 28px; background: #eadff0; transition: transform 0.3s var(--tw-ease); }
.mzl-plan:hover { transform: translateY(-6px); }
.mzl-plan[data-best] { background: var(--gold-2); }
.mzl-plan--featured, .mzl-plan--featured[data-best] {
  background: conic-gradient(from var(--mzl-angle), #79288f, #e9c46a, #c48ad6, #79288f);
  animation: mzl-angle 6s linear infinite; box-shadow: 0 30px 70px -30px rgba(121, 40, 143, 0.7);
}
@keyframes mzl-angle { to { --mzl-angle: 360deg; } }
.mzl-plan__in { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 28px; border-radius: 27px; background: #fff; color: #22132b; }
.mzl-plan--featured .mzl-plan__in { background: #12051a; color: #fff; }
.mzl-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mzl-plan__head h3 { font-size: 18px; font-weight: 800; }
.mzl-plan__badge { padding: 4px 10px; border-radius: 999px; background: var(--gold-2); font-size: 12px; font-weight: 800; color: #12051a; }
.mzl-plan__badge--best { background: rgba(233, 196, 106, 0.25); color: #7a5a14; }
.mzl-plan:not([data-best]) .mzl-plan__badge--best, .mzl-plan--featured .mzl-plan__badge--best { display: none; }
.mzl-plan__price { display: flex; align-items: baseline; gap: 6px; }
.mzl-plan__amount { font-size: 42px; font-weight: 800; line-height: 1; font-stretch: 112%; }
.mzl-plan__unit { font-size: 15px; font-weight: 600; color: #615569; }
.mzl-plan__fee { margin-top: -8px; font-size: 13px; color: #615569; }
.mzl-plan__tagline { font-size: 15px; color: #615569; }
.mzl-plan__included { padding: 10px 14px; border-radius: 16px; background: #f5eefa; font-size: 13.5px; font-weight: 600; color: #521862; }
.mzl-plan__features { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.mzl-plan__features li { display: flex; align-items: flex-start; gap: 10px; }
.mzl-plan__features svg { width: 16px; height: 16px; margin-top: 2px; color: #0f9d8a; }
.mzl-plan__tel { display: flex; gap: 8px; font-size: 13px; color: #615569; }
.mzl-plan__tel svg { width: 14px; height: 14px; margin-top: 2px; }
.mzl-plan__cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin-top: auto; border-radius: 999px;
  border: 2px solid #dfb4ec; font-size: 15.5px; font-weight: 700; color: #651f78; transition: all 0.15s var(--tw-ease);
}
.mzl-plan__cta:hover { transform: translateY(-2px); border-color: #79288f; }
.mzl-plan--featured .mzl-plan__unit, .mzl-plan--featured .mzl-plan__tel { color: rgba(255, 255, 255, 0.6); }
.mzl-plan--featured .mzl-plan__tel { color: rgba(255, 255, 255, 0.55); }
.mzl-plan--featured .mzl-plan__fee { color: rgba(255, 255, 255, 0.55); }
.mzl-plan--featured .mzl-plan__tagline { color: rgba(255, 255, 255, 0.7); }
.mzl-plan--featured .mzl-plan__included { background: rgba(255, 255, 255, 0.07); color: var(--gold-2); }
.mzl-plan--featured .mzl-plan__features svg { color: var(--gold-2); }
.mzl-plan--featured .mzl-plan__cta { border-color: transparent; background: var(--gold-2); color: #12051a; }
.mzl-plan--featured .mzl-plan__cta:hover { background: #f2d488; }

.mzl-est { display: grid; overflow: hidden; border-radius: 32px; border: 1px solid #eadff0; background: #fff; box-shadow: 0 30px 60px -30px rgba(45, 13, 54, 0.3); }
@media (min-width: 1024px) { .mzl-est { grid-template-columns: 1.05fr 1fr; } }
.mzl-est__in { display: flex; flex-direction: column; gap: 28px; padding: 28px; }
.mzl-est__out { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 28px; background: #12051a; color: #fff; }
@media (min-width: 640px) { .mzl-est__in, .mzl-est__out { padding: 36px; } }
.mzl-est__out::before { content: ""; position: absolute; right: -20%; top: -30%; width: 360px; height: 360px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(121, 40, 143, 0.6), transparent); filter: blur(40px); }
.mzl-est__out > * { position: relative; }
.mzl-est__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #79288f; }
.mzl-est__in h3 { margin-top: 8px; font-size: 28px; font-weight: 800; line-height: 1.25; color: #22132b; font-stretch: 112%; }
.mzl-slider > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mzl-slider label { font-size: 14.5px; font-weight: 600; color: #22132b; }
.mzl-slider output { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: #651f78; }
.mzl-range { display: inline-block; width: 100%; margin-top: 12px; appearance: none; height: 8px; border-radius: 8px; cursor: pointer; background: linear-gradient(90deg, #79288f var(--fill), #efe6f5 var(--fill)); }
.mzl-range::-webkit-slider-thumb { appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 5px solid #79288f; box-shadow: 0 4px 12px rgba(45, 13, 54, 0.25); transition: transform 0.2s; }
.mzl-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.mzl-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 5px solid #79288f; }
.mzl-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mzl-line > span { font-size: 14.5px; font-weight: 600; color: #22132b; }
.mzl-line > div { display: inline-flex; padding: 4px; border-radius: 999px; background: #f5eefa; }
.mzl-line button { padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #615569; transition: color 0.15s var(--tw-ease), background-color 0.15s var(--tw-ease); }
.mzl-line button[aria-checked="true"] { background: #fff; color: #22132b; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.mzl-est__out small { display: block; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.55); }
.mzl-est__mins { margin-top: 4px; font-size: 40px; font-weight: 800; line-height: 1; font-stretch: 112%; }
.mzl-est__note { margin-top: 8px; font-size: 13.5px; color: rgba(255, 255, 255, 0.5); }
.mzl-costs { display: flex; flex-direction: column; gap: 10px; }
.mzl-costs li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.8); transition: all 0.3s var(--tw-ease); }
.mzl-costs li[data-on] { background: var(--gold-2); color: #12051a; }
.mzl-costs li > span:first-child { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.mzl-costs li:not([data-on]) > span:first-child svg { display: none; }
.mzl-costs li > span:last-child { font-size: 18px; font-weight: 800; }
.mzl-costs li.mzl-costs__ent { display: block; background: var(--gold-2); color: #12051a; font-size: 15px; font-weight: 700; }
.mzl-est__fine { font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }
.mzl-est__link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; font-size: 14.5px; font-weight: 700; color: var(--gold-2); }
.mzl-est__link:hover { text-decoration: underline; }

.mzl-extras { display: grid; gap: 16px; }
@media (min-width: 1024px) { .mzl-extras { grid-template-columns: 1.3fr 1fr; } }
.mzl-extras > * { padding: 28px; border-radius: 28px; border: 1px solid #eadff0; background: #fff; }
.mzl-extras h3, .mzl-addons__title { display: block; font-size: 19px; font-weight: 800; color: #22132b; }
.mzl-rules { display: grid; gap: 12px; margin-top: 16px; font-size: 15px; color: #615569; }
@media (min-width: 640px) { .mzl-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mzl-rules li { display: flex; gap: 10px; }
.mzl-rules svg { width: 16px; height: 16px; margin-top: 4px; color: #79288f; }
.mzl-addons summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; }
.mzl-addons summary::-webkit-details-marker { display: none; }
.mzl-addons__sub { display: block; margin-top: 4px; font-size: 15px; color: #615569; }
.mzl-addons summary > svg { width: 20px; height: 20px; margin-top: 4px; color: #79288f; transition: transform 0.15s var(--tw-ease); }
.mzl-addons[open] summary > svg { transform: rotate(180deg); }
.mzl-addons__body { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.mzl-addons__body p { font-size: 13px; font-weight: 800; color: #521862; }
.mzl-addons__body ul { margin-top: 8px; }
.mzl-addons__body li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 10px; font-size: 14px; color: #22132b; }
.mzl-addons__body li + li { border-top: 1px solid #eadff0; }
.mzl-addons__body li small { display: block; font-size: 12.5px; color: #615569; }
.mzl-addons__body li b { flex-shrink: 0; font-weight: 800; font-variant-numeric: tabular-nums; color: #651f78; }

/* ---------- FAQ ---------- */

.mzl-faq { display: grid; gap: 40px; }
@media (min-width: 960px) { .mzl-faq { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; } .mzl-faq__side { position: sticky; top: 120px; } }
.mzl-sprite--faq { height: 220px; margin-top: -10px; }
@media (max-width: 959px) { .mzl-sprite--faq { display: none; } }
.mzl-faq__list { display: grid; gap: 10px; }
.mzl-faq__item { border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: box-shadow 0.3s, border-color 0.3s; }
.mzl-faq__item[open] { box-shadow: var(--shadow); border-color: var(--brand-200); }
.mzl-faq__item summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; font-weight: 700; font-size: 17px; }
.mzl-faq__item summary::-webkit-details-marker { display: none; }
.mzl-faq__n { color: var(--brand-300); font-weight: 800; font-size: 15px; }
.mzl-faq__item[open] .mzl-faq__n { color: var(--brand-500); }
.mzl-faq__q { flex: 1; }
.mzl-faq__item summary svg { width: 20px; height: 20px; color: var(--brand-500); transition: transform 0.3s var(--ease); }
.mzl-faq__item[open] summary svg { transform: rotate(180deg); }
.mzl-faq__item p { padding: 0 20px 20px 59px; color: var(--muted); font-size: 15.5px; }
.mzl-faq__item::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
.mzl-faq__item[open]::details-content { block-size: auto; }

/* ---------- CTA: an incoming call ---------- */

.mzl-cta { position: relative; padding: 110px 0; color: #fff; background: radial-gradient(50% 70% at 80% 50%, rgba(121, 40, 143, 0.6), transparent 70%), var(--studio); }
.mzl-cta__inner { display: grid; gap: 50px; align-items: center; }
@media (min-width: 900px) { .mzl-cta__inner { grid-template-columns: 1.3fr 1fr; } }
.mzl-cta__copy { display: grid; gap: 22px; }
.mzl-cta__copy > p { font-size: 19px; color: rgba(255, 255, 255, 0.78); max-width: 52ch; }
.mzl-contact { display: grid; gap: 10px; margin-top: 6px; }
@media (min-width: 640px) { .mzl-contact { grid-template-columns: repeat(3, auto); justify-content: start; } }
.mzl-contact a { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.16); transition: background-color 0.2s, transform 0.3s var(--spring); }
.mzl-contact a:hover { background: rgba(255, 255, 255, 0.07); transform: translateY(-2px); }
.mzl-contact svg { width: 22px; height: 22px; color: var(--gold-2); }
.mzl-contact span { display: grid; line-height: 1.3; font-size: 13.5px; color: rgba(255, 255, 255, 0.7); }
.mzl-contact strong { color: #fff; font-size: 15px; }
.mzl-incoming { justify-self: center; width: min(300px, 100%); padding: 10px; border-radius: 48px; background: #0a0310; box-shadow: 0 0 0 2px #3a2346, 0 50px 90px -30px rgba(0, 0, 0, 0.8); animation: mzl-ring 2.6s ease-in-out infinite; }
@keyframes mzl-ring { 0%, 70%, 100% { rotate: 0deg; } 74% { rotate: -2deg; } 78% { rotate: 2deg; } 82% { rotate: -1.5deg; } 86% { rotate: 1deg; } }
.mzl-incoming__screen { position: relative; display: grid; justify-items: center; gap: 6px; padding: 42px 20px 26px; border-radius: 40px; text-align: center; background: linear-gradient(170deg, #3b1450, var(--studio) 70%); }
.mzl-incoming__island { position: absolute; top: 12px; width: 84px; height: 24px; border-radius: 999px; background: #000; }
.mzl-incoming__label { font-size: 14px; color: rgba(255, 255, 255, 0.65); margin-top: 6px; }
.mzl-incoming__avatar { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin: 20px 0 8px; }
.mzl-incoming__avatar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(233, 196, 106, 0.6); animation: mzl-ripple 2.4s ease-out infinite; }
.mzl-incoming__avatar i:nth-child(2) { animation-delay: 0.8s; }
.mzl-incoming__avatar i:nth-child(3) { animation-delay: 1.6s; }
@keyframes mzl-ripple { from { transform: scale(0.8); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.mzl-incoming__avatar img { position: relative; width: 132px; height: 132px; border-radius: 50%; object-fit: cover; object-position: 50% 4%; background: var(--gold-soft); border: 3px solid var(--gold-2); }
.mzl-incoming__name { font-size: 30px; font-weight: 800; font-stretch: 112%; }
.mzl-incoming__for { font-size: 14px; color: rgba(255, 255, 255, 0.65); }
.mzl-incoming__actions { display: flex; justify-content: space-between; width: 100%; margin-top: 30px; padding-inline: 6px; }
.mzl-incoming__btn { display: grid; justify-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.mzl-incoming__btn > span { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; transition: transform 0.25s var(--spring); }
.mzl-incoming__btn:hover > span { transform: scale(1.1); }
.mzl-incoming__btn svg { width: 26px; height: 26px; }
.mzl-incoming__btn--alt > span { background: rgba(255, 255, 255, 0.14); }
.mzl-incoming__btn--yes > span { background: #22c55e; animation: mzl-bounce 1.3s ease-in-out infinite; }
@keyframes mzl-bounce { 50% { transform: translateY(-6px); } }

/* ---------- footer ---------- */

.mzl-footer { background: var(--studio); color: rgba(255, 255, 255, 0.7); }
.mzl-footer__grid { display: grid; gap: 36px; padding-block: 56px 40px; }
@media (min-width: 800px) { .mzl-footer__grid { grid-template-columns: 1.3fr 1fr 1.2fr 1.3fr; } }
.mzl-footer__logo { height: 34px; width: auto; }
.mzl-footer__brand { display: grid; gap: 14px; align-content: start; }
.mzl-footer__title { font-size: 14px; font-weight: 800; color: var(--gold-2); margin-bottom: 14px; }
.mzl-footer__col ul { display: grid; gap: 10px; font-size: 15px; }
.mzl-footer__col a { display: inline-flex; gap: 8px; align-items: center; transition: color 0.2s; }
.mzl-footer__col a:hover { color: #fff; }
.mzl-footer__col svg { width: 16px; height: 16px; }
.mzl-footer__address { display: flex; gap: 8px; font-style: normal; font-size: 15px; }
.mzl-footer__address svg { margin-top: 4px; }
.mzl-footer__line { display: block; }
.mzl-footer__map { display: inline-block; margin-top: 10px; color: var(--gold-2); font-weight: 700; font-size: 14.5px; }
.mzl-footer__legal { display: flex; flex-wrap: wrap; gap: 12px 26px; padding-block: 22px 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 13.5px; }
.mzl-footer__top { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.mzl-footer__top svg { width: 15px; height: 15px; }

/* ---------- the train scene: sky, skyline and overhead wires ---------- */

.mzl-scene { position: relative; overflow: hidden; padding-top: 210px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.mzl-scene[data-held] { cursor: grabbing; }
.mzl-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(233, 140, 106, 0.32), transparent 70%),
    radial-gradient(40% 50% at 80% 90%, rgba(168, 85, 247, 0.28), transparent 70%),
    linear-gradient(180deg, #0b0312 0%, #1a0726 38%, #3a1240 72%, #5b1f4f 100%);
}
.mzl-star { position: absolute; border-radius: 50%; background: #fff; opacity: 0.8; animation: mzl-twinkle 3.6s ease-in-out infinite; }
@keyframes mzl-twinkle { 50% { opacity: 0.15; } }
.mzl-moon {
  position: absolute; top: 28px; right: 12%; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff9e6, #f6e7c1 60%, #e4cf98);
  box-shadow: 0 0 40px 10px rgba(246, 231, 193, 0.28), 0 0 120px 40px rgba(246, 231, 193, 0.1);
}
.mzl-cloud {
  position: absolute; height: 22px; border-radius: 999px; opacity: 0.22;
  background: linear-gradient(90deg, transparent, #f3d9ff 20%, #f3d9ff 80%, transparent);
  filter: blur(6px); animation: mzl-drift-x linear infinite;
}
.mzl-cloud--a { top: 36px; width: 260px; animation-duration: 90s; }
.mzl-cloud--b { top: 74px; width: 180px; animation-duration: 120s; animation-delay: -50s; opacity: 0.15; }
.mzl-cloud--c { top: 18px; width: 320px; animation-duration: 150s; animation-delay: -100s; opacity: 0.12; }
@keyframes mzl-drift-x { from { transform: translateX(-30vw); } to { transform: translateX(110vw); } }

.mzl-skyline { position: absolute; left: 0; right: 0; pointer-events: none; }
/* far: temple gopurams, the LIC tower and Central station's clock tower */
.mzl-skyline--far {
  bottom: 76px; height: 330px; opacity: 0.6;
  background:
    conic-gradient(from 155deg at 50% 0, transparent 0 50deg, #4a1d55 0) 8% 100% / 70px 264px no-repeat,
    linear-gradient(#4a1d55, #4a1d55) 17% 100% / 90px 132px no-repeat,
    linear-gradient(#4a1d55, #4a1d55) 27% 100% / 34px 308px no-repeat,
    linear-gradient(#4a1d55, #4a1d55) 31% 100% / 120px 154px no-repeat,
    conic-gradient(from 155deg at 50% 0, transparent 0 50deg, #4a1d55 0) 52% 100% / 90px 286px no-repeat,
    linear-gradient(#4a1d55, #4a1d55) 63% 100% / 60px 198px no-repeat,
    linear-gradient(#4a1d55, #4a1d55) 74% 100% / 140px 121px no-repeat,
    linear-gradient(#4a1d55, #4a1d55) 86% 100% / 40px 242px no-repeat,
    linear-gradient(#4a1d55, #4a1d55) 95% 100% / 100px 154px no-repeat;
}
.mzl-skyline--near {
  bottom: 76px; height: 250px;
  background:
    linear-gradient(#25092e, #25092e) 0 100% / 120px 133px no-repeat,
    linear-gradient(#25092e, #25092e) 10% 100% / 80px 180px no-repeat,
    linear-gradient(#25092e, #25092e) 21% 100% / 150px 104px no-repeat,
    linear-gradient(#25092e, #25092e) 37% 100% / 60px 199px no-repeat,
    linear-gradient(#25092e, #25092e) 46% 100% / 130px 125px no-repeat,
    linear-gradient(#25092e, #25092e) 60% 100% / 90px 167px no-repeat,
    linear-gradient(#25092e, #25092e) 72% 100% / 170px 95px no-repeat,
    linear-gradient(#25092e, #25092e) 88% 100% / 70px 190px no-repeat,
    linear-gradient(#25092e, #25092e) 100% 100% / 120px 121px no-repeat;
}
/* lit windows scattered across the near blocks */
.mzl-skyline__lights {
  position: absolute; inset: 60px 0 0;
  background:
    radial-gradient(2px 3px at 4% 70%, #ffd98a, transparent), radial-gradient(2px 3px at 12% 40%, #ffd98a, transparent),
    radial-gradient(2px 3px at 13% 62%, #ffe7b0, transparent), radial-gradient(2px 3px at 24% 78%, #ffd98a, transparent),
    radial-gradient(2px 3px at 38.5% 30%, #ffe7b0, transparent), radial-gradient(2px 3px at 39% 55%, #ffd98a, transparent),
    radial-gradient(2px 3px at 49% 70%, #ffd98a, transparent), radial-gradient(2px 3px at 61% 45%, #ffe7b0, transparent),
    radial-gradient(2px 3px at 63% 66%, #ffd98a, transparent), radial-gradient(2px 3px at 76% 82%, #ffd98a, transparent),
    radial-gradient(2px 3px at 89% 38%, #ffe7b0, transparent), radial-gradient(2px 3px at 90% 60%, #ffd98a, transparent),
    radial-gradient(2px 3px at 97% 72%, #ffd98a, transparent);
  animation: mzl-flicker 7s steps(1) infinite;
}
@keyframes mzl-flicker { 30% { opacity: 0.75; } 31% { opacity: 1; } 70% { opacity: 0.85; } 71% { opacity: 1; } }

/* overhead line: masts and the catenary wire the pantograph runs under */
.mzl-catenary {
  position: absolute; left: 0; right: 0; bottom: 76px; height: 250px; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 220px, #6b5574 220px 224px, transparent 224px 440px);
  -webkit-mask: linear-gradient(transparent 0 2px, #000 2px); mask: linear-gradient(transparent 0 2px, #000 2px);
  opacity: 0.7;
}
.mzl-catenary__wire { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: #8c7896; box-shadow: 0 14px 0 -0.5px rgba(140, 120, 150, 0.6); }
/* the embankment the track runs on */
.mzl-scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 76px; z-index: 0; background: linear-gradient(#2b1233, var(--studio)); }
.mzl-scene > .mzl-rail::after { content: ""; display: block; height: 62px; }

/* the train (Vande Bharat style) */
.mzl-rail {
  --h: clamp(92px, 9vw, 132px);
  --word: clamp(1.5rem, 2.3vw, 2.6rem);
  position: relative; z-index: 1; overflow: hidden;
  padding-top: calc(var(--h) * 0.6);
}
.mzl-train { position: relative; z-index: 1; display: flex; width: max-content; animation: mzl-train 36s linear infinite; }
/* The gap between trains is a screen width less a little, so the next
   engine appears only as the previous train's last coach is leaving. */
.mzl-consist { display: flex; align-items: flex-end; padding-right: calc(100vw - var(--h) * 1.9); }
/* Hovering never stops the train; pressing and holding it does. */
.mzl-scene[data-held] .mzl-train,
.mzl-scene[data-held] .mzl-wheel,
.mzl-scene[data-held] .mzl-coach,
.mzl-scene[data-held] .mzl-coach__window::after,
.mzl-scene[data-held] .mzl-coach__word,
.mzl-scene[data-held] .mzl-coach__logo { animation-play-state: paused; }
/* two identical trains: sliding by one train's length loops seamlessly */
@keyframes mzl-train { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.mzl-coach { position: relative; display: flex; flex-direction: column; animation: mzl-sway 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.17s); }
@keyframes mzl-sway { 0%, 100% { translate: 0 0; } 10% { translate: 0 -1.5px; } 20% { translate: 0 0; } 60% { translate: 0 -0.5px; } }
/* gangway bellows between coaches */
.mzl-coach + .mzl-coach { margin-left: 10px; }
.mzl-coach + .mzl-coach::before {
  content: ""; position: absolute; left: -12px; top: calc(var(--h) * 0.12); width: 14px; height: calc(var(--h) * 0.72);
  border-radius: 3px; background: repeating-linear-gradient(90deg, #1c0a22 0 2px, #3a2242 2px 4px);
}
.mzl-coach__body {
  position: relative; display: flex; align-items: center; gap: calc(var(--h) * 0.12); height: var(--h); padding: 0 calc(var(--h) * 0.16);
  border-radius: calc(var(--h) * 0.14) calc(var(--h) * 0.14) calc(var(--h) * 0.08) calc(var(--h) * 0.08);
  background: linear-gradient(180deg, #d9d0de 0%, #fbf8fc 9%, #ffffff 26%, #eee8f1 58%, #cfc4d6 86%, #a99cb2 100%);
  box-shadow: inset 0 -3px 0 rgba(45, 13, 54, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.9), 0 22px 40px rgba(10, 2, 14, 0.55);
}
/* roof line with AC housings */
.mzl-coach__roof {
  position: absolute; left: 12%; right: 12%; top: calc(var(--h) * -0.07); height: calc(var(--h) * 0.08); border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #e9e2ed, #b8acc0); box-shadow: calc(var(--h) * -0.5) 0 0 -2px #d8cfdd;
}
.mzl-coach__door {
  flex: none; align-self: stretch; width: calc(var(--h) * 0.2); margin: calc(var(--h) * 0.1) 0 calc(var(--h) * 0.2);
  border-radius: 4px; border: 1px solid rgba(45, 13, 54, 0.22);
  background: linear-gradient(180deg, rgba(45, 13, 54, 0.08), transparent 30%),
    linear-gradient(180deg, transparent 12%, rgba(30, 10, 40, 0.75) 12% 40%, transparent 40%) center / 70% 100% no-repeat;
}
/* the long enclosed glass band, lit from inside */
.mzl-coach__window {
  position: relative; display: grid; place-items: center; height: calc(var(--h) * 0.5); min-width: calc(var(--h) * 2.1);
  margin-bottom: calc(var(--h) * 0.1); padding: 0 calc(var(--h) * 0.18); border-radius: calc(var(--h) * 0.1); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, rgba(223, 180, 236, 0.35), transparent 60%), linear-gradient(180deg, rgba(40, 14, 52, 0.92), rgba(18, 6, 24, 0.95));
  box-shadow: inset 0 0 0 2px #2b1233, inset 0 0 0 3px rgba(255, 255, 255, 0.35), inset 0 6px 14px rgba(0, 0, 0, 0.45);
}
/* window pillars */
.mzl-coach__window::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background: repeating-linear-gradient(90deg, transparent 0 calc(var(--h) * 0.62), rgba(43, 18, 51, 0.9) calc(var(--h) * 0.62) calc(var(--h) * 0.65));
}
/* sliding reflection on the glass */
.mzl-coach__window::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg); animation: mzl-glint 5.2s ease-in-out infinite; animation-delay: calc(var(--i) * 0.4s);
}
@keyframes mzl-glint { 0%, 55% { left: -40%; } 100% { left: 140%; } }
.mzl-coach__word {
  position: relative; z-index: 1; font-size: var(--word); font-weight: 800; font-stretch: 106%; line-height: 1.25; padding: 0.05em 0 0.15em; white-space: nowrap;
  background: linear-gradient(100deg, #e9c9f2 15%, #ffffff 45%, #f5a524 55%, #e9c9f2 85%); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mzl-sheen 8s linear infinite; animation-delay: calc(var(--i) * -0.8s);
  filter: drop-shadow(0 0 10px rgba(223, 180, 236, 0.45));
}
/* livery: a purple band with a gold pinstripe below the windows */
.mzl-coach__livery {
  position: absolute; left: 0; right: 0; bottom: calc(var(--h) * 0.1); height: calc(var(--h) * 0.1);
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700)); box-shadow: 0 calc(var(--h) * -0.035) 0 -0.5px #f5a524;
}
.mzl-coach__under {
  position: relative; display: flex; justify-content: space-between; height: calc(var(--h) * 0.26); margin: -2px calc(var(--h) * 0.2) 0;
  background: linear-gradient(180deg, #2b1631 0 30%, transparent 30%);
}
.mzl-bogie { position: relative; display: flex; align-items: flex-end; gap: calc(var(--h) * 0.06); padding: 0 calc(var(--h) * 0.02); }
.mzl-bogie__frame { position: absolute; left: -4px; right: -4px; top: calc(var(--h) * 0.06); height: calc(var(--h) * 0.09); border-radius: 4px; background: linear-gradient(180deg, #5c4a63, #2d1d33); z-index: 1; }
.mzl-wheel {
  width: calc(var(--h) * 0.22); height: calc(var(--h) * 0.22); border-radius: 50%;
  background: radial-gradient(circle, #d9cfdf 0 9%, #3a2a40 10% 22%, transparent 23%),
    conic-gradient(from 0deg, #6e5a76 0 8%, #3a2a40 8% 25%, #6e5a76 25% 33%, #3a2a40 33% 50%, #6e5a76 50% 58%, #3a2a40 58% 75%, #6e5a76 75% 83%, #3a2a40 83% 100%);
  box-shadow: inset 0 0 0 calc(var(--h) * 0.022) #a596ad, inset 0 0 0 calc(var(--h) * 0.032) #2a1a30;
  animation: mzl-wheel 0.6s linear infinite;
}
@keyframes mzl-wheel { to { rotate: 360deg; } }
/* engine: aerodynamic nose facing the direction of travel */
.mzl-coach--engine .mzl-coach__body {
  padding-right: calc(var(--h) * 1.15);
  border-radius: calc(var(--h) * 0.14) calc(var(--h) * 1.3) calc(var(--h) * 0.1) calc(var(--h) * 0.08) / calc(var(--h) * 0.14) calc(var(--h) * 0.85) calc(var(--h) * 0.1) calc(var(--h) * 0.08);
}
.mzl-coach__window--engine { min-width: calc(var(--h) * 2.3); }
.mzl-coach__logo {
  position: relative; z-index: 1; width: calc(var(--word) * 3); height: calc(var(--word) * 0.86);
  -webkit-mask: url("assets/landing/mozhi-white.png") center / contain no-repeat; mask: url("assets/landing/mozhi-white.png") center / contain no-repeat;
  background: linear-gradient(100deg, #e9c9f2 15%, #ffffff 45%, #f5a524 55%, #e9c9f2 85%); background-size: 260% 100%;
  animation: mzl-sheen 8s linear infinite;
}
.mzl-engine__windshield {
  position: absolute; right: calc(var(--h) * 0.12); top: calc(var(--h) * 0.16); width: calc(var(--h) * 0.85); height: calc(var(--h) * 0.34);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), transparent 40%), linear-gradient(180deg, #2a0f36, #12061a);
  clip-path: polygon(0 0, 46% 0, 100% 100%, 0 100%); border-radius: 4px;
}
.mzl-engine__lamp {
  position: absolute; right: calc(var(--h) * 0.1); bottom: calc(var(--h) * 0.3); width: calc(var(--h) * 0.14); height: calc(var(--h) * 0.07);
  border-radius: 50%; background: #fff6d8; box-shadow: 0 0 12px 4px rgba(255, 222, 150, 0.8);
}
.mzl-engine__beam {
  position: absolute; left: calc(100% - var(--h) * 0.12); top: calc(var(--h) * 0.48); width: 260px; height: calc(var(--h) * 0.6); pointer-events: none;
  background: radial-gradient(ellipse at left center, rgba(255, 222, 150, 0.4), transparent 70%);
  clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 55%); animation: mzl-beam 2.4s ease-in-out infinite;
}
@keyframes mzl-beam { 50% { opacity: 0.65; } }
/* pantograph on the engine roof */
.mzl-pantograph {
  position: absolute; left: 34%; top: calc(var(--h) * -0.42); width: calc(var(--h) * 0.5); height: calc(var(--h) * 0.36); border-top: 2px solid #b9adc0;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), #8c7d94 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) left / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), #8c7d94 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) right / 50% 100% no-repeat;
}
/* track: steel rail, concrete sleepers, ballast */
.mzl-track { position: relative; display: grid; margin-top: -2px; }
.mzl-track__rail { position: relative; z-index: 1; height: 6px; background: linear-gradient(180deg, #f1ebf4, #9f92a8 60%, #5a4a62); box-shadow: 0 0 10px rgba(223, 180, 236, 0.35); }
.mzl-track__sleepers { height: 8px; margin: 0 0 -2px; background: repeating-linear-gradient(90deg, #6f6474 0 22px, transparent 22px 46px); opacity: 0.85; }
.mzl-track__ballast {
  height: 14px;
  background:
    radial-gradient(circle at 20% 40%, rgba(223, 180, 236, 0.18) 1.5px, transparent 2px) 0 0 / 9px 7px,
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.1) 1px, transparent 1.5px) 0 0 / 7px 6px,
    linear-gradient(180deg, #3b2442, transparent);
}
@keyframes mzl-sheen { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .mzl-train { transform: translateX(calc(50vw - 50%)); }
  .mzl *, .mzl *::before, .mzl *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .mzl-caption__text span { color: #fff; }
}