/* ============================================================
   Cooey SMS/MMS — product mockups (marketing)
   Live HTML/CSS panels styled after teams-app/workspace/styles.css
   (Cooey One tokens: dark surfaces, mint accent, DM Sans / DM Mono /
   Instrument Serif). Every panel is authored at a fixed design size in
   px and scaled to its container with pure CSS, so it stays crisp at
   any width and DPI. The same markup is exported to img/*.png by
   render-mockups.cjs.
   ============================================================ */

.mk-frame {
  --mk-w: 800;
  --mk-h: 600;
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: var(--mk-w) / var(--mk-h);
  border-radius: 14px;
  overflow: hidden;
  background: #08080d;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.07),
    0 30px 80px -20px rgb(0 0 0 / 0.7),
    0 0 120px -40px rgb(102 252 196 / 0.18);
}

.mk {
  /* Mockup-local tokens (mirrors the app's dark theme) */
  --bg: #08080d;
  --card: #0e0e16;
  --elevated: #16161f;
  --inset: #0a0a11;
  --border: #1e1e2a;
  --border-strong: #2e2e3e;
  --text: #e8e8f0;
  --dim: #8888a0;
  --muted: #5f5f75;
  --mint: #66fcc4;
  --mint-rgb: 102 252 196;
  --orange: #ff8a50;
  --orange-rgb: 255 138 80;
  --yellow: #ffd666;
  --yellow-rgb: 255 214 102;
  --blue: #7ba4f5;
  --blue-rgb: 91 141 239;
  --purple: #b39dfc;
  --purple-rgb: 167 139 250;
  --cyan: #67e8f9;
  --cyan-rgb: 103 232 249;
  --red: #ff8080;
  --red-rgb: 255 107 107;
  --ink: #08110d;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  position: absolute;
  inset: 0 auto auto 0;
  width: calc(var(--mk-w) * 1px);
  height: calc(var(--mk-h) * 1px);
  transform-origin: 0 0;
  /* tan(atan2(a, b)) = a / b as a plain number: container width / design width */
  transform: scale(tan(atan2(100cqw, calc(var(--mk-w) * 1px))));
  display: grid;
  grid-template-rows: 34px 1fr;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* Browsers without CSS trig: show the panel at design size, scrollable. */
@supports not (transform: scale(tan(atan2(1px, 1px)))) {
  .mk-frame { aspect-ratio: auto; height: calc(var(--mk-h) * 1px); overflow-x: auto; }
  .mk { position: relative; transform: none; }
}

.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mk p { margin: 0; }
.mk .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- Teams window chrome ---------------------------------- */
.mk-title {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  background: #0b0b11;
  border-bottom: 1px solid var(--border);
}
.mk-dots { display: flex; gap: 6px; }
.mk-dots i { width: 9px; height: 9px; border-radius: 50%; background: #2a2a38; }
.mk-search {
  margin: 0 auto; width: 300px; height: 22px;
  display: flex; align-items: center; gap: 7px; padding: 0 10px;
  border-radius: 6px; background: #14141d; border: 1px solid var(--border);
  color: var(--muted); font-size: 11px;
}
.mk-search svg { width: 12px; height: 12px; }
.mk-me {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 600; color: var(--ink); background: #c9b8ff;
}

.mk-body { display: grid; min-height: 0; }

.mk-rail {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 0;
  background: #0b0b11;
  border-right: 1px solid var(--border);
}
.mk-rail-i {
  position: relative;
  width: 40px; height: 40px; border-radius: 8px;
  display: grid; place-items: center; align-content: center; gap: 1px;
  color: var(--dim);
  font-size: 8.5px;
}
.mk-rail-i svg { width: 17px; height: 17px; }
.mk-rail-i.on { color: var(--mint); background: rgb(var(--mint-rgb) / 0.08); }
.mk-rail-i.on::before {
  content: ""; position: absolute; left: -6px; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--mint);
}
.mk-rail-sp { flex: 1; }
.mk-diamond { color: var(--mint); font-size: 15px; line-height: 1; }

/* ---- App tab header (the "Cooey SMS/MMS" tab in Teams) ---- */
.mk-apphead {
  height: 44px; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--card);
}
.mk-brand { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.mk-brand b { font-weight: 700; }
.mk-tabs { display: flex; gap: 16px; margin-left: 14px; height: 100%; }
.mk-tab { display: flex; align-items: center; color: var(--dim); font-size: 12px; border-bottom: 2px solid transparent; }
.mk-tab.on { color: var(--text); border-bottom-color: var(--mint); font-weight: 500; }

/* ---- App sidebar navigation ------------------------------- */
.mk-nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 8px; background: var(--card); border-right: 1px solid var(--border);
}
.mk-nav-brand { display: flex; align-items: center; gap: 7px; padding: 2px 8px 12px; font-size: 12.5px; white-space: nowrap; }
.mk-nav-brand b { font-weight: 700; }
.mk-nav-i {
  display: flex; align-items: center; gap: 9px;
  height: 30px; padding: 0 9px; border-radius: 6px;
  color: var(--dim); font-size: 12px;
}
.mk-nav-i svg { width: 15px; height: 15px; }
.mk-nav-i.on { color: var(--text); background: var(--elevated); box-shadow: inset 2px 0 0 var(--mint); }
.mk-nav-i .mk-count { margin-left: auto; }
.mk-nav-label { padding: 12px 9px 4px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ---- Shared atoms ----------------------------------------- */
.mk-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 7px; border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--c, var(--dim));
  background: rgb(var(--c-rgb, 136 136 160) / 0.1);
  border: 1px solid rgb(var(--c-rgb, 136 136 160) / 0.28);
}
.mk-pill.mint { --c: var(--mint); --c-rgb: var(--mint-rgb); }
.mk-pill.orange { --c: var(--orange); --c-rgb: var(--orange-rgb); }
.mk-pill.yellow { --c: var(--yellow); --c-rgb: var(--yellow-rgb); }
.mk-pill.blue { --c: var(--blue); --c-rgb: var(--blue-rgb); }
.mk-pill.cyan { --c: var(--cyan); --c-rgb: var(--cyan-rgb); }
.mk-pill.red { --c: var(--red); --c-rgb: var(--red-rgb); }
.mk-pill.purple { --c: var(--purple); --c-rgb: var(--purple-rgb); }

.mk-count {
  min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px;
  display: inline-grid; place-items: center;
  font-family: var(--mono); font-size: 9.5px; color: var(--ink); background: var(--mint);
}
.mk-count.quiet { color: var(--dim); background: var(--elevated); }

.mk-av {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--c, var(--mint));
  background: rgb(var(--c-rgb, var(--mint-rgb)) / 0.13);
}
.mk-av.sm { width: 22px; height: 22px; font-size: 8.5px; }
.mk-av.orange { --c: var(--orange); --c-rgb: var(--orange-rgb); }
.mk-av.blue { --c: var(--blue); --c-rgb: var(--blue-rgb); }
.mk-av.purple { --c: var(--purple); --c-rgb: var(--purple-rgb); }
.mk-av.yellow { --c: var(--yellow); --c-rgb: var(--yellow-rgb); }
.mk-av.cyan { --c: var(--cyan); --c-rgb: var(--cyan-rgb); }
.mk-av.app { color: var(--mint); background: #0b1a15; border: 1px solid rgb(var(--mint-rgb) / 0.35); border-radius: 7px; }

.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: 7px;
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
  color: var(--text); background: var(--elevated); border: 1px solid var(--border-strong);
}
.mk-btn svg { width: 13px; height: 13px; }
.mk-btn.primary { color: var(--ink); background: var(--mint); border-color: var(--mint); font-weight: 600; }
.mk-btn.ghost { background: transparent; border-color: transparent; color: var(--dim); }
.mk-btn.sm { height: 24px; padding: 0 9px; font-size: 11px; }

.mk-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.mk-h { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.1; letter-spacing: 0; margin: 0; }
.mk-sub { color: var(--dim); font-size: 11.5px; }
.mk-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; }

.mk-field {
  height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border-radius: 7px; background: var(--inset); border: 1px solid var(--border-strong);
  color: var(--text); font-size: 11.5px;
}
.mk-field svg { width: 13px; height: 13px; color: var(--dim); }
.mk-field.focus { border-color: rgb(var(--mint-rgb) / 0.7); box-shadow: 0 0 0 3px rgb(var(--mint-rgb) / 0.12); }
.mk-caret { width: 1px; height: 14px; background: var(--mint); margin-left: -6px; }

/* ---- Chat bubbles ----------------------------------------- */
.mk-thread { display: flex; flex-direction: column; min-height: 0; background: var(--card); }
.mk-thread-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
}
.mk-thread-head .mk-h { font-size: 22px; }
.mk-thread-head .grow { flex: 1; min-width: 0; }
.mk-msgs { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 12px 18px 10px; overflow: hidden; }
.mk-day { align-self: center; margin: 2px 0 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.mk-msg { display: flex; flex-direction: column; max-width: 76%; }
.mk-msg.in { align-self: flex-start; }
.mk-msg.out { align-self: flex-end; align-items: flex-end; }
.mk-msg + .mk-msg.out, .mk-msg.out + .mk-msg.in { margin-top: 9px; }
.mk-bubble {
  padding: 8px 12px; border-radius: 15px; font-size: 12px; line-height: 1.45;
  background: #16161f; border: 1px solid #23232f;
}
.mk-msg.in .mk-bubble { border-bottom-left-radius: 5px; }
.mk-msg.out .mk-bubble {
  color: #dffcef; background: rgb(var(--mint-rgb) / 0.1); border-color: rgb(var(--mint-rgb) / 0.28);
  border-bottom-right-radius: 5px;
}
.mk-meta { margin-top: 3px; font-family: var(--mono); font-size: 9.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.mk-meta .tick { color: var(--mint); letter-spacing: -0.15em; }
.mk-photo {
  width: 188px; height: 124px; border-radius: 12px; overflow: hidden;
  border: 1px solid #23232f; border-bottom-left-radius: 5px;
}
.mk-photo svg { width: 100%; height: 100%; stroke: none; display: block; }
.mk-attach-meta { font-family: var(--mono); font-size: 9.5px; color: var(--dim); display: flex; gap: 6px; align-items: center; margin-top: 3px; }

/* ---- Composer ------------------------------------------- */
.mk-composer { border-top: 1px solid var(--border); padding: 10px 18px 14px; background: var(--card); }
.mk-textarea {
  position: relative;
  min-height: 58px; padding: 9px 11px; border-radius: 9px;
  background: var(--inset); border: 1px solid rgb(var(--mint-rgb) / 0.45);
  box-shadow: 0 0 0 3px rgb(var(--mint-rgb) / 0.08);
  font-size: 12px; line-height: 1.5;
}
.mk-compose-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.mk-attach {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  border: 1px dashed var(--border-strong); border-radius: 7px; color: var(--dim); font-size: 11px;
}
.mk-attach svg { width: 12px; height: 12px; }
.mk-seg { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--dim); }

/* ---- Teams channel with adaptive card ---------------------- */
.mk-channel { display: flex; flex-direction: column; min-height: 0; background: #0b0b11; border-right: 1px solid var(--border); }
.mk-channel-head { padding: 12px 14px 0; border-bottom: 1px solid var(--border); }
.mk-channel-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.mk-channel-name .hash { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: rgb(var(--purple-rgb) / 0.16); color: var(--purple); font-size: 12px; }
.mk-channel-tabs { display: flex; gap: 14px; margin-top: 10px; }
.mk-channel-tabs span { padding-bottom: 8px; font-size: 11.5px; color: var(--dim); border-bottom: 2px solid transparent; }
.mk-channel-tabs span.on { color: var(--text); border-bottom-color: var(--purple); }
.mk-posts { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.mk-post { display: grid; grid-template-columns: 28px 1fr; gap: 8px; }
.mk-post .mk-av { width: 28px; height: 28px; font-size: 13px; }
.mk-post-by { display: flex; align-items: baseline; gap: 6px; font-size: 11px; font-weight: 600; }
.mk-post-by .mono { font-weight: 400; font-size: 9.5px; color: var(--muted); }
.mk-post-by .app-tag { font-family: var(--mono); font-weight: 400; font-size: 8.5px; letter-spacing: 0.1em; color: var(--dim); border: 1px solid var(--border-strong); border-radius: 3px; padding: 0 4px; }
.mk-acard {
  margin-top: 5px; padding: 11px 12px 12px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border-strong);
  box-shadow: inset 3px 0 0 var(--cyan);
}
.mk-acard.faded { opacity: 0.55; box-shadow: inset 3px 0 0 var(--mint); padding: 9px 12px; }
.mk-acard-kicker { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.mk-acard-title { margin-top: 4px; font-size: 13.5px; font-weight: 600; }
.mk-acard-quote { margin-top: 6px; padding-left: 9px; border-left: 2px solid var(--border-strong); color: #c9c9d6; font-size: 11.5px; }
.mk-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin-top: 9px; font-size: 10.5px; }
.mk-facts dt { color: var(--dim); }
.mk-facts dd { margin: 0; }
.mk-acard-actions { display: flex; gap: 6px; margin-top: 11px; }
.mk-reply { margin-top: 7px; display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--dim); }
.mk-reply b { color: var(--text); font-weight: 500; }

/* ---- Inbox list / detail ---------------------------------- */
.mk-list { display: flex; flex-direction: column; min-height: 0; background: var(--card); border-right: 1px solid var(--border); }
.mk-list-head { padding: 14px 14px 10px; }
.mk-list-head .mk-h { font-size: 22px; }
.mk-seg-ctl { display: flex; gap: 2px; margin-top: 10px; padding: 3px; border-radius: 8px; background: var(--inset); border: 1px solid var(--border); }
.mk-seg-ctl span { flex: 1; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.mk-seg-ctl span.on { background: var(--elevated); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); }
.mk-seg-ctl .n { font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.mk-seg-ctl span.on .n { color: var(--mint); }
.mk-rows { flex: 1; overflow: hidden; padding: 4px 8px; display: flex; flex-direction: column; gap: 4px; }
.mk-row {
  position: relative;
  display: grid; grid-template-columns: 30px 1fr; gap: 9px;
  padding: 9px 10px; border-radius: 9px; border: 1px solid transparent;
}
.mk-row.on { background: var(--elevated); border-color: rgb(var(--mint-rgb) / 0.35); box-shadow: inset 3px 0 0 var(--mint); }
.mk-row-top { display: flex; align-items: center; gap: 6px; }
.mk-row-name { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row-time { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--muted); white-space: nowrap; }
.mk-row-prev { margin-top: 1px; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row-tags { display: flex; gap: 5px; margin-top: 6px; align-items: center; }
.mk-row-owner { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--dim); }
.mk-row .unread { position: absolute; left: 3px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--cyan); }

.mk-assign {
  position: absolute; z-index: 2;
  width: 214px; padding: 6px; border-radius: 10px;
  background: #1a1a25; border: 1px solid var(--border-strong);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.55);
}
.mk-assign-h { padding: 5px 8px 7px; }
.mk-assign-i { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; }
.mk-assign-i.on { background: rgb(var(--mint-rgb) / 0.09); }
.mk-assign-i .st { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--muted); }
.mk-assign-i .st.live { color: var(--mint); }
.mk-assign-i .st.live::before { content: "● "; }

.mk-note {
  margin: 4px 0 2px; padding: 7px 10px; border-radius: 8px;
  background: rgb(var(--yellow-rgb) / 0.06); border: 1px solid rgb(var(--yellow-rgb) / 0.3); border-left: 3px solid var(--yellow);
  font-size: 11px; color: #e6dcc0;
}
.mk-note .mk-label { color: var(--yellow); font-size: 8.5px; display: block; margin-bottom: 2px; }

.mk-event { align-self: center; display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 10px; color: var(--dim); }
.mk-event b { color: var(--text); font-weight: 500; }

/* ---- Settings / tables ------------------------------------ */
.mk-main { min-height: 0; overflow: hidden; background: var(--bg); padding: 20px 24px; position: relative; }
.mk-page-head { display: flex; align-items: flex-end; gap: 12px; }
.mk-page-head .grow { flex: 1; }
.mk-page-head .mk-h { font-size: 28px; margin-top: 2px; }
.mk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11.5px; }
.mk-table th {
  text-align: left; font-family: var(--mono); font-weight: 400; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); background: var(--elevated); padding: 7px 12px; white-space: nowrap;
}
.mk-table th:first-child { border-top-left-radius: 9px; }
.mk-table th:last-child { border-top-right-radius: 9px; }
.mk-table td { padding: 8px 12px; border-top: 1px solid var(--border); white-space: nowrap; }
.mk-table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mk-table .r { text-align: right; }
.mk-table-wrap { border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden; }


/* Retail prices only (what the customer pays); no cost or markup in product screens. */
.mk-price { font-family: var(--mono); color: var(--text); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-price small { font-size: 8.5px; letter-spacing: 0.1em; color: var(--muted); margin-left: 3px; }

.mk-pop {
  position: absolute; z-index: 3;
  padding: 6px; border-radius: 10px;
  background: #1a1a25; border: 1px solid var(--border-strong);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.6);
}
.mk-pop-note { padding: 4px 8px 6px; font-size: 10px; color: var(--dim); }
.mk-pop-i { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; }
.mk-pop-i.on { background: rgb(var(--mint-rgb) / 0.09); }
.mk-pop-i .mono { font-size: 12px; letter-spacing: 0.02em; }
.mk-pop-i .mk-btn { margin-left: auto; }
.mk-pop-i .caps { font-family: var(--mono); font-size: 9px; color: var(--dim); letter-spacing: 0.08em; }

.mk-cardpad { padding: 13px 14px; }
.mk-card-title { font-weight: 600; font-size: 12.5px; }
.mk-card-sub { color: var(--dim); font-size: 10.5px; margin-top: 2px; }
.mk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 10px; }
.mk-form .wide { grid-column: 1 / -1; }
.mk-form .mk-label { display: block; font-size: 8.5px; margin-bottom: 4px; letter-spacing: 0.1em; }
.mk-form .mk-field { height: 28px; font-size: 11px; }
.mk-drop {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  border: 1px dashed rgb(var(--mint-rgb) / 0.45); background: rgb(var(--mint-rgb) / 0.04);
  font-size: 11px;
}
.mk-drop .file { width: 26px; height: 30px; border-radius: 4px; display: grid; place-items: center; background: rgb(var(--red-rgb) / 0.14); color: var(--red); font-family: var(--mono); font-size: 7.5px; font-weight: 500; }
.mk-drop .ok { margin-left: auto; color: var(--mint); display: inline-flex; gap: 4px; align-items: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; }
.mk-drop .ok svg { width: 12px; height: 12px; }
.mk-price-list { margin-top: 8px; }
.mk-price-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 11.5px; }
.mk-price-row:first-child { border-top: 0; }
.mk-price-row .what small { display: block; color: var(--muted); font-size: 10px; }
.mk-price-row .mk-price { margin-left: auto; }

/* ---- Campaigns -------------------------------------------- */
.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.mk-stat { padding: 11px 13px; }
.mk-stat .v { font-family: var(--serif); font-size: 28px; line-height: 1; margin-top: 6px; }
.mk-stat .d { font-family: var(--mono); font-size: 9.5px; color: var(--dim); margin-top: 5px; }
.mk-stat .d.mint { color: var(--mint); }
.mk-bar { height: 4px; border-radius: 4px; background: var(--elevated); margin-top: 8px; overflow: hidden; }
.mk-bar i { display: block; height: 100%; background: var(--mint); border-radius: 4px; }
.mk-split { display: grid; grid-template-columns: 212px 1fr; gap: 12px; margin-top: 12px; }
.mk-phone {
  padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--border);
}
.mk-phone .mk-bubble { font-size: 11.5px; }
.mk-optline { margin-top: 6px; color: var(--dim); }
.mk-sched { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin-top: 11px; font-size: 10.5px; }
.mk-sched dt { color: var(--dim); }
.mk-sched dd { margin: 0; }
.mk-optout-st { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; color: var(--red); display: inline-flex; gap: 4px; align-items: center; }
.mk-sub-st { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; color: var(--mint); }

/* ---- Glyph replacements (the bundled fonts carry no ✓✓ / ★ / ▾) ---- */
.mk-meta svg.tick { width: 14px; height: 14px; color: var(--mint); stroke-width: 2; }
.mk-star { width: 14px; height: 14px; }
.mk-star.on { color: var(--yellow); fill: var(--yellow); }
.mk-star.off { color: var(--muted); }

.mk-btn svg:last-child:not(:first-child) { width: 11px; height: 11px; }
.mk-seg-ctl i { font-style: normal; }