.mc { --mc-pad: 40px; --mc-dim: var(--dw-subtle); --mc-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; padding-top: 84px; color: var(--dw-fg); font-family: var(--dw-body); }
.mc *, .mc *::before, .mc *::after { box-sizing: border-box; }
.mc [hidden] { display: none !important; }
.mc-ico { flex: none; }

.mc-tabs { height: 47px; padding: 12px 16px 0; border-bottom: 1px solid rgb(255 255 255 / 5%); }
.mc-tabs-row { display: flex; justify-content: center; gap: 12px; }
.mc-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 13.5px; color: var(--mc-dim); font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: .1px; text-decoration: none; white-space: nowrap; transition: color .15s ease; }
.mc-tab:hover { color: var(--dw-muted); }
.mc-tab[aria-selected="true"] { color: var(--dw-fg); }
.mc-tab[aria-selected="true"]::after { content: ""; position: absolute; top: auto; right: 0; bottom: -1px; left: 0; inset: auto 0 -1px; height: 2px; background: var(--dw-fg); }

.mc-hero { position: relative; display: grid; place-items: center; min-height: 565px; padding: 32px 16px 0; text-align: center; isolation: isolate; }
.mc-hero::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 42%, rgb(74 45 245 / 16%), transparent 70%); }
.mc-hero-in { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }
.mc-h1 { margin: 0; font: 700 48px/56px var(--dw-display); letter-spacing: -0.04em; text-transform: uppercase; color: var(--dw-fg); }
.mc-h1 em { font-style: normal; color: var(--dw-cyan); background: var(--dw-type-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mc-h1-line { display: flex; align-items: center; justify-content: center; gap: 8px; white-space: pre-wrap; }
.mc-h1-line > em, .mc-h1-line > span { white-space: nowrap; }
.mc-h1-phone { display: none; }
.mc-h1-left { font-size: 40px; line-height: 48px; text-align: left; }
.mc-tile { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; font-style: normal; box-shadow: 0 6px 6px rgb(0 0 0 / 10%); }
.mc-tile-app { border: 1px solid rgb(255 255 255 / 20%); background: var(--dw-surface-3); color: var(--dw-fg); box-shadow: inset 0 3px 6px rgb(255 255 255 / 20%), 0 6px 6px rgb(0 0 0 / 10%); }
.mc-tile-app b { display: grid; }
.mc-tile-brand { background: var(--dw-surface-2); border: 1px solid var(--dw-line-strong); }
.mc-tile-brand img { width: auto; height: 30px; }
.mc-panel.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }
.mc .btn .mc-ico { width: 18px; height: 18px; }
.mc-how-phone, .mc-demo, .mc-dock { display: none; }

.mc-send { width: min(516px, 100%); padding: 6px; border: 1px solid var(--dw-line); border-radius: 16px; background: rgb(21 21 23 / 75%); text-align: left; }
.mc-send-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 10px; }
.mc-send-head p { margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; }
.mc-send-text { max-height: 144px; margin: 0; padding: 12px; overflow: auto; border-radius: 12px; background: var(--dw-bg); color: rgb(255 255 255 / 60%); font: 400 12px/18px var(--mc-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.mc-copy { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--dw-surface-3); color: var(--dw-fg); font: 500 12px/16px var(--dw-body); cursor: pointer; }
.mc-copy-accent { background: var(--dw-action); color: var(--dw-action-ink); }

.mc-presets { max-width: 1440px; margin: 0 auto; padding: 0 var(--mc-pad) 96px; }
.mc-presets h2, .mc-block h2 { margin: 0 0 24px; font: 600 20px/24px var(--dw-body); letter-spacing: -0.02em; text-align: left; }
.mc-preset-list { display: grid; gap: 28px; max-width: 981px; margin: 0 auto; padding: 0; list-style: none; }
.mc-preset { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; min-height: 272px; padding: 12px; border-radius: 16px; transition: background-color .15s ease; }
.mc-preset:hover { background: var(--dw-surface); }
.mc-preset-media { display: block; width: 140px; height: 248px; overflow: hidden; border-radius: 16px; background: var(--dw-surface-2); }
.mc-preset-media img, .mc-look-media img, .mc-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mc-preset-text { position: relative; display: flex; flex-direction: column; padding: 12px 0 56px; }
.mc-preset-text h3 { margin: 0; font: 600 20px/24px var(--dw-body); }
.mc-preset-text > p { margin: 6px 0 0; color: rgb(255 255 255 / 50%); font-size: 14px; line-height: 20px; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 !important; }
.mc-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 4px 8px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 10px; color: var(--dw-fg); font: 500 12px/16px var(--dw-body); white-space: nowrap; }
.mc-chip i { font-style: normal; color: var(--dw-cyan); }
.mc-preset-actions { position: absolute; bottom: 12px; left: 0; display: flex; gap: 8px; margin: 0 !important; }
.mc-try, .mc-learn { display: inline-flex; align-items: center; gap: 6px; height: 32px; border: 0; border-radius: 8px; text-decoration: none; cursor: pointer; }
.mc-try { padding: 6px 14px; background: #fff; color: #0e0e10; font: 600 14px/16px var(--dw-body); }
.mc-learn { padding: 6px 12px; background: rgb(255 255 255 / 10%); color: var(--dw-fg); font: 500 12px/16px var(--dw-body); }
.mc-learn:hover { background: rgb(255 255 255 / 16%); }

.mc-dialog { width: min(820px, calc(100% - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 8px; overflow: auto; border: 1px solid rgb(255 255 255 / 5%); border-radius: 24px; background: var(--dw-surface-3); color: var(--dw-fg); }
#mc-how { width: min(708px, calc(100% - 32px)); }
.mc-dialog::backdrop { background: rgb(0 0 0 / 70%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mc-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 8px 8px; }
.mc-dialog-head h2 { margin: 0; font: 600 16px/24px var(--dw-body); }
.mc-dialog-head form { margin: 0; }
.mc-x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: rgb(255 255 255 / 5%); color: var(--mc-dim); cursor: pointer; }
.mc-x:hover { color: var(--dw-fg); }
.mc-pills { display: flex; flex-wrap: wrap; gap: 2px; }
.mc-pills-line { gap: 12px; margin: 0 0 8px; padding: 0 8px; border-bottom: 1px solid rgb(255 255 255 / 5%); }
.mc-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 4px 10px; border: 0; border-radius: 96px; background: transparent; color: var(--mc-dim); font: 500 12px/16px var(--dw-body); cursor: pointer; }
.mc-pill[aria-selected="true"] { background: #fff; color: #0e0e10; }
.mc-pills-line .mc-pill { position: relative; height: 40px; padding: 0 6px; border-radius: 0; font-size: 14px; }
.mc-pills-line .mc-pill[aria-selected="true"] { background: transparent; color: var(--dw-fg); }
.mc-pills-line .mc-pill[aria-selected="true"]::after { content: ""; position: absolute; top: auto; right: 0; bottom: -1px; left: 0; inset: auto 0 -1px; height: 2px; background: var(--dw-fg); }
.mc-sheet { padding: 24px; border-radius: 16px; background: rgb(255 255 255 / 5%); }
.mc-how-body { display: grid; gap: 8px; }
.mc-wide { width: 100%; }
.mc-steps { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; text-align: left; }
.mc-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 20px; }
.mc-step + .mc-step { padding-top: 28px; border-top: 1px solid rgb(255 255 255 / 5%); }
.mc-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(255 255 255 / 10%); font: 600 14px/1 var(--dw-body); }
.mc-step-text { display: grid; gap: 2px; }
.mc-step-text h3 { margin: 0; font: 500 16px/24px var(--dw-body); }
.mc-step-text p { margin: 0; color: var(--mc-dim); font-size: 14px; line-height: 20px; }
.mc-step-block { grid-template-columns: 28px minmax(0, 1fr); }
.mc-step-block .mc-code { margin-top: 8px; }
.mc-step-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 10px; background: transparent; color: var(--dw-fg); font: 500 14px/20px var(--dw-body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.mc-step-link:hover { background: rgb(255 255 255 / 6%); }
.mc-code { display: flex; align-items: center; gap: 10px; padding: 16px; border: 1px solid rgb(255 255 255 / 5%); border-radius: 12px; }
.mc-code pre { flex: 1; min-width: 0; margin: 0; color: rgb(255 255 255 / 60%); font: 400 14px/20px var(--mc-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.mc-code-copy { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--dw-fg); cursor: pointer; }
.mc-code-copy:hover { background: rgb(255 255 255 / 8%); }
.mc-code-copy span:empty { display: none; }
.mc [data-copy][data-done] { color: var(--dw-cyan); }

.mc-doc { --mc-pad: 32px; max-width: 1440px; margin: 0 auto; padding: 104px var(--mc-pad) 96px; }
.mc-look { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 405px); align-items: center; gap: 40px; padding-bottom: 56px; }
.mc-look-media { justify-self: center; width: min(270px, 100%); aspect-ratio: 480 / 840; overflow: hidden; border-radius: 16px; background: var(--dw-surface-2); }
.mc-look-text .mc-chips { margin: 0 0 16px !important; }
.mc-lead { max-width: 44em; margin: 16px 0 0; color: var(--dw-muted); font-size: 16px; line-height: 24px; }
.mc-quote { margin: 20px 0 24px; padding: 16px; border: 1px solid var(--dw-line); border-radius: 12px; color: rgb(255 255 255 / 70%); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.mc-look-text .cta-row { margin: 0; }
.mc-block { max-width: 944px; padding-top: 40px; }
.mc-block .mc-step-text h3 { font-size: 18px; }
.mc-sub { margin: -16px 0 20px; color: var(--mc-dim); font-size: 14px; line-height: 20px; }
.mc-block .mc-code + .mc-sub { margin-top: 16px; }
.mc-sub a { color: var(--dw-fg); }
.mc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: none; margin: 0; padding: 0; list-style: none; }
.mc-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 12px; border-radius: 16px; background: var(--dw-surface); color: var(--dw-fg); text-decoration: none; }
.mc-card img { height: 168px; border-radius: 12px; }
.mc-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 8px; }
.mc-card-text b { font: 500 18px/24px var(--dw-body); }
.mc-card-text > span:not(.mc-chip) { color: var(--mc-dim); font-size: 14px; line-height: 20px; }
.mc-docs-head { padding-bottom: 16px; }
.mc-apps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mc-app { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 10px; color: var(--dw-fg); font: 500 14px/20px var(--dw-body); text-decoration: none; }
.mc-app:hover { background: rgb(255 255 255 / 6%); }
.mc-tools { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dw-line); }
.mc-tools li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--dw-line); font-size: 14px; line-height: 20px; }
.mc-tools b { font-weight: 500; }
.mc-tools span { color: var(--dw-muted); }
.mc-back { margin: 40px 0 0; }

@media (max-width: 760px) {
  .mc { --mc-pad: 16px; padding-top: 76px; }
  .mc-tabs, .mc-panel, .mc-h1-wide { display: none !important; }
  .mc-hero { min-height: 0; padding: 0 16px 40px; }
  .mc-hero-in { gap: 24px; }
  .mc-h1 { font-size: 27.3px; line-height: 36px; letter-spacing: -0.8px; }
  .mc-h1-phone { display: flex; }
  .mc-h1-left { font-size: 28px; line-height: 34px; }
  .mc-how-phone { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--dw-fg); font: 500 14px/16px var(--dw-body); cursor: pointer; }
  .mc-demo { display: grid; gap: 12px; width: min(300px, 100%); padding: 12px; border: 1px solid var(--dw-line-strong); border-radius: 28px; background: var(--dw-surface); text-align: left; }
  .mc-demo-bar { display: flex; justify-content: center; padding: 4px 0; font-size: 12px; font-weight: 600; }
  .mc-demo-bar span, .mc-demo-from { display: inline-flex; align-items: center; gap: 6px; }
  .mc-demo-me { justify-self: end; max-width: 86%; margin: 0; padding: 10px 12px; border-radius: 16px; background: var(--dw-surface-3); font-size: 12px; line-height: 17px; }
  .mc-demo-reply { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--dw-line); border-radius: 16px; }
  .mc-demo-from { font-size: 11px; font-weight: 600; }
  .mc-demo-from img { width: auto; height: 16px; }
  .mc-demo-reply > video { width: 132px; height: auto; margin: 0 auto; border-radius: 12px; background: var(--dw-surface-3); }
  .mc-demo-status { color: var(--dw-muted); font-size: 11px; text-align: center; }
  .mc-presets { padding-bottom: 160px; }
  .mc-presets h2, .mc-block h2 { font-size: 18px; line-height: 20px; }
  .mc-preset { grid-template-columns: 1fr; gap: 12px; min-height: 0; padding: 0; border-radius: 16px; }
  .mc-preset:hover { background: transparent; }
  .mc-preset-media { width: 100%; height: 201px; }
  .mc-preset-text { padding: 0 12px 12px; }
  .mc-preset-text h3 { font-size: 18px; font-weight: 500; }
  .mc-preset-actions { position: static; margin-top: 16px !important; }
  .mc-dock { position: fixed; z-index: 30; top: auto; right: 0; bottom: 0; left: 0; inset: auto 0 0; display: grid; gap: 8px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgb(0 0 0 / 88%) 34%); }
  .mc-dock .btn { width: 100%; height: 48px; border-radius: 999px; font-size: 16px; }
  .mc-doc { padding: 92px var(--mc-pad) 72px; }
  .mc-look { grid-template-columns: 1fr; gap: 24px; padding-bottom: 32px; }
  .mc-look-media { width: min(220px, 70%); }
  .mc-sheet { padding: 16px; }
  .mc-step { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  .mc-step > .mc-step-link { grid-column: 2; justify-self: start; white-space: normal; }
  .mc-cards { grid-template-columns: 1fr; gap: 12px; }
  .mc-tools li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .mc * { transition: none !important; } }