/* ==========================================================================
   WIZKET — marketing.css · Marketing page, "Stop the scroll" scene
   Reuses the shared scene kit from website.css (ws-stage, hero, HUD, step copy).
   js/marketing.js draws the tunnel / galaxy / globe / city on one canvas and drives
   the ad (the Spark), the platform formats, the shop and the ring every frame.
   The ad is orange in both themes (it's the one that stops you); the format cards keep
   app palettes. Prefix: mk-
   ========================================================================== */

/* screen-reader-only text (used across the marketing page) */
.mk-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   1. Hero extras: the O of STOP is a pause button
   -------------------------------------------------------------------------- */
.mk-pause {
  position: relative;
  display: inline-block;
  width: 0.6em;
  height: 0.62em;
  margin: 0 0.03em;
  vertical-align: 0.04em;
  border: 0.085em solid currentColor;
  border-radius: 50%;
}
.mk-pause i { position: absolute; top: 26%; width: 13%; height: 48%; border-radius: 0.02em; background: currentColor; }
.mk-pause i:first-child { left: 30%; }
.mk-pause i:last-child { right: 30%; }

.mk-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }

.mk-ignored {
  position: absolute;
  z-index: 4;
  top: calc(var(--nav-top) + var(--nav-h) + 18px);
  left: 50%;
  translate: -50% 0;
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line2);
  font: 600 12.5px/1 var(--font-body);
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--muted);
  opacity: 0;
  visibility: hidden;
}
.mk-ignored b { font: 400 16px/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.mk-ignored__won { display: none; }
.mk-ignored__won.is-on { display: inline; }
.mk-ignored__won b { color: var(--accent); }

.mk-you {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: var(--mk-you-top, 72%);
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.mk-you b { font: 400 clamp(2.4rem, min(5vw, 9vh), 5rem)/0.9 var(--font-display); text-transform: uppercase; color: var(--text); }
.mk-you span { font: 500 clamp(0.95rem, 1.2vw, 1.15rem)/1.4 var(--font-body); color: var(--muted); }

.mk-shock {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(253, 95, 7, 0.5), inset 0 0 30px rgba(253, 95, 7, 0.3);
  pointer-events: none;
  opacity: 0;
}
.mk__stage.is-brake { animation: mk-brake 0.45s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes mk-brake { 0% { transform: translateY(0); } 25% { transform: translateY(10px); } 55% { transform: translateY(-4px); } 100% { transform: none; } }

/* --------------------------------------------------------------------------
   2. The Spark: one orange ad (logical 300 × 440, scaled by marketing.js)
   -------------------------------------------------------------------------- */
.mk-rig {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 440px;
  margin: -220px 0 0 -150px;
  perspective: 1600px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: transform;
}
.mk-ad { position: absolute; inset: 0; transform-style: preserve-3d; font-family: var(--font-body); color: #f6ece0; }
.mk-ad p { margin: 0; }
/* premium: matte espresso card, hairline edge, one slow sheen */
.mk-ad__base {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(255, 196, 140, 0.12), transparent 70%),
    linear-gradient(175deg, #1d1410 0%, #120c09 55%, #0c0806 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 228, 196, 0.14),
    inset 0 1px 0 rgba(255, 240, 220, 0.12),
    0 60px 120px -40px rgba(0, 0, 0, 0.9),
    0 40px 90px -50px rgba(255, 150, 70, 0.45);
}
.mk-ad__base::after {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 214, 0.07), transparent);
  transform: skewX(-18deg);
  animation: mk-sheen 7s ease-in-out infinite;
}
@keyframes mk-sheen { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.mk-ad__l { position: absolute; left: 18px; right: 18px; }
.mk-ad__head { top: 16px; height: 40px; display: flex; align-items: center; gap: 10px; }
.mk-ad__logo {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a1c14, #120c09); box-shadow: inset 0 0 0 1px rgba(232, 190, 130, 0.65);
  font: 400 17px/1 var(--font-display); font-style: normal; color: #e8be82;
}
.mk-ad__head p { display: grid; gap: 4px; font: 600 14px/1 var(--font-body); letter-spacing: 0.01em; }
.mk-ad__head span { font: 500 11px/1 var(--font-body); color: rgba(246, 236, 224, 0.5); }
.mk-ad__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font: 600 10px/1 var(--font-body); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246, 236, 224, 0.55);
}
.mk-ad__live i { width: 6px; height: 6px; border-radius: 50%; background: #7fd8a0; box-shadow: 0 0 0 3px rgba(127, 216, 160, 0.15); animation: mk-blink 2.2s ease-in-out infinite; }
@keyframes mk-blink { 50% { opacity: 0.35; } }
.mk-ad__hook { top: 66px; height: 66px; display: flex; align-items: center; }
.mk-ad__hook p { font: 400 30px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; color: #f6ece0; }
.mk-ad__hook em {
  font-style: normal; white-space: nowrap;
  background: linear-gradient(100deg, #ffe0ad 0%, #f2a65a 55%, #e07a32 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mk-ad__visual {
  top: 142px;
  height: 190px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 228, 196, 0.1), 0 20px 40px -24px rgba(0, 0, 0, 0.9);
}
.mk-shot { display: block; width: 100%; height: 100%; }
.mk-shot__spot { animation: mk-spot 5s ease-in-out infinite; }
@keyframes mk-spot { 50% { opacity: 0.75; } }
.mk-shot__steam path { opacity: 0; stroke-opacity: 0.55; animation: mk-steam2 4.8s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes mk-steam2 {
  0% { opacity: 0; transform: translateY(10px) scaleY(0.7); }
  30% { opacity: 1; }
  70% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-14px) scaleY(1.15) skewX(-6deg); }
}
.mk-shot__tag-t { font: 600 9.5px/1 var(--font-body); fill: #f6ece0; letter-spacing: 0.04em; }
.mk-ad__offer { top: 344px; height: 30px; display: flex; align-items: center; }
.mk-ad__offer p { display: flex; align-items: center; gap: 9px; font: 500 12.5px/1 var(--font-body); color: rgba(246, 236, 224, 0.62); white-space: nowrap; }
.mk-ad__offer b { font-weight: 700; color: #f2c38a; }
.mk-ad__offer i { width: 3px; height: 3px; border-radius: 50%; background: rgba(246, 236, 224, 0.4); }
.mk-ad__btn {
  top: 382px; height: 42px; display: grid; place-items: center; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #fbf3e8, #eadbc7);
  box-shadow: inset 0 1px 0 #fff, 0 12px 28px -14px rgba(255, 210, 160, 0.6);
}
.mk-ad__btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent); transform: skewX(-20deg);
  animation: mk-shine 5s ease-in-out infinite;
}
.mk-ad__btn b { position: relative; z-index: 1; font: 700 14.5px/1 var(--font-body); letter-spacing: 0.01em; color: #1c110b; }
.mk-ad__btn b i { display: inline-block; font-style: normal; animation: mk-nudge 1.6s ease-in-out infinite; }
@keyframes mk-shine { 0%, 70% { left: -40%; } 100% { left: 130%; } }
@keyframes mk-nudge { 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .mk-ad__base::after, .mk-ad__live i, .mk-shot__spot, .mk-shot__steam path, .mk-ad__btn::after, .mk-ad__btn b i { animation: none !important; }
  .mk-shot__steam path { opacity: 0.5; }
}

/* labels shown while the ad is taken apart */
.mk-tag {
  position: absolute;
  left: calc(100% + 26px);
  top: 50%;
  translate: 0 -50%;
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line2);
  font: 700 12px/1 var(--font-body);
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
}
.mk-tag::before { content: ""; position: absolute; right: 100%; top: 50%; width: 22px; height: 1px; background: var(--accent); }

/* a CSS coffee cup with steam */
.mk-cup { position: relative; display: block; width: 84px; height: 78px; }
.mk-cup::before { content: ""; position: absolute; left: 6px; bottom: 0; width: 60px; height: 50px; border-radius: 6px 6px 26px 26px; background: #fff; box-shadow: inset -8px -6px 0 rgba(0, 0, 0, 0.08); }
.mk-cup::after { content: ""; position: absolute; left: 60px; bottom: 16px; width: 18px; height: 20px; border: 6px solid #fff; border-left: 0; border-radius: 0 14px 14px 0; }
.mk-cup i { position: absolute; bottom: 54px; width: 6px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, 0.7); animation: mk-steam 2.2s ease-in-out infinite; }
.mk-cup i:nth-child(1) { left: 18px; }
.mk-cup i:nth-child(2) { left: 33px; animation-delay: 0.5s; }
.mk-cup i:nth-child(3) { left: 48px; animation-delay: 1s; }
@keyframes mk-steam { 0% { transform: translateY(6px) scaleY(0.6); opacity: 0; } 40% { opacity: 0.9; } 100% { transform: translateY(-14px) scaleY(1.1) skewX(10deg); opacity: 0; } }

/* --------------------------------------------------------------------------
   3. 02 Spread: the same ad, re-shaped for each platform
   -------------------------------------------------------------------------- */
.mk-fmts { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mk-fmt {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-family: var(--font-body);
  color: #15191c;
  visibility: hidden;
  will-change: transform, opacity;
}
.mk-fmt p { margin: 0; }
.mk-fmt .mk-cup { transform: scale(0.8); }
.mk-fmt__who { display: flex; align-items: center; gap: 8px; font: 700 12.5px/1 var(--font-body); }
.mk-fmt__who i, .mk-fmt__wahead i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fd5f07; font: 400 13px/1 var(--font-display); font-style: normal; color: #fff; }
.mk-fmt__bar { padding-top: 10px; border-top: 1px solid #eceff1; font: 600 11.5px/1 var(--font-body); color: #66727a; }

.mk-fmt--reel { width: 180px; height: 320px; display: grid; place-items: center; background: linear-gradient(180deg, #2a1306 0%, #c2410c 60%, #fd5f07 100%); color: #fff; }
.mk-fmt--reel .mk-fmt__cap { position: absolute; left: 12px; right: 40px; bottom: 58px; font: 700 13px/1.3 var(--font-body); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.mk-fmt--reel .mk-fmt__shop { position: absolute; left: 12px; right: 12px; bottom: 14px; padding: 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.92); text-align: center; font: 800 12px/1 var(--font-body); color: #15191c; }
.mk-fmt__side { position: absolute; right: 10px; bottom: 70px; width: 22px; height: 80px; background: radial-gradient(circle, #fff 4px, transparent 5px) 50% 0 / 22px 26px repeat-y; opacity: 0.85; }

.mk-fmt--fb { width: 250px; padding: 14px; display: grid; gap: 10px; }
.mk-fmt--fb .mk-fmt__txt { font: 500 13px/1.35 var(--font-body); }
.mk-fmt--fb .mk-cup, .mk-fmt--yt .mk-cup { justify-self: center; }
.mk-fmt--fb > .mk-cup { width: 100%; height: 120px; border-radius: 10px; background: linear-gradient(160deg, #ff8a3d, #c2410c); transform: none; }
.mk-fmt--fb > .mk-cup::before { left: calc(50% - 30px); bottom: 20px; }
.mk-fmt--fb > .mk-cup::after { left: calc(50% + 24px); bottom: 36px; }
.mk-fmt--fb > .mk-cup i { bottom: 74px; }
.mk-fmt--fb > .mk-cup i:nth-child(1) { left: calc(50% - 18px); }
.mk-fmt--fb > .mk-cup i:nth-child(2) { left: calc(50% - 3px); }
.mk-fmt--fb > .mk-cup i:nth-child(3) { left: calc(50% + 12px); }

.mk-fmt--search { width: 320px; padding: 16px 18px; display: grid; gap: 6px; }
.mk-fmt__q { margin-bottom: 8px !important; padding: 9px 14px; border-radius: 999px; border: 1px solid #dfe3e6; font: 500 13px/1 var(--font-body); color: #15191c; }
.mk-fmt__sp { font: 700 11.5px/1 var(--font-body); color: #15191c; }
.mk-fmt__t { font: 600 16px/1.2 var(--font-body); color: #1a4fd6; }
.mk-fmt__d { font: 400 12.5px/1.35 var(--font-body); color: #4d5960; }
.mk-fmt__line { display: block; height: 7px; margin-top: 6px; border-radius: 4px; background: #eceff1; }
.mk-fmt__line + .mk-fmt__line { width: 70%; }

.mk-fmt--yt { width: 320px; height: 180px; display: grid; place-items: center; background: linear-gradient(135deg, #1a0f08, #7c2d12); color: #fff; }
.mk-fmt__skip { position: absolute; right: 0; bottom: 26px; padding: 8px 12px; background: rgba(0, 0, 0, 0.72); border: 1px solid rgba(255, 255, 255, 0.3); border-right: 0; font: 600 12px/1 var(--font-body); }
.mk-fmt__ytbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.25); }
.mk-fmt__ytbar i { display: block; width: 38%; height: 100%; background: #f5c518; }
.mk-fmt__adl { position: absolute; left: 10px; bottom: 12px; font: 700 11px/1 var(--font-body); }

.mk-fmt--li { width: 250px; padding: 14px; display: grid; gap: 10px; }
.mk-fmt__doc { height: 150px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 10px; background: #15191c; color: #fff; }
.mk-fmt__doc b { font: 400 26px/0.95 var(--font-display); text-transform: uppercase; }
.mk-fmt__doc b::after { content: ""; display: block; width: 34px; height: 4px; margin-top: 10px; background: #fd5f07; }
.mk-fmt__doc span { align-self: flex-end; font: 600 11px/1 var(--font-body); opacity: 0.7; }

.mk-fmt--display { width: 320px; height: 100px; display: flex; align-items: center; gap: 16px; padding: 0 22px 0 8px; background: linear-gradient(90deg, #fd5f07, #ff8a3d); color: #fff; }
.mk-fmt--display p { display: grid; gap: 6px; }
.mk-fmt--display b { font: 400 26px/1 var(--font-display); text-transform: uppercase; }
.mk-fmt--display span { justify-self: start; padding: 6px 10px; border-radius: 6px; background: #fff; font: 800 11.5px/1 var(--font-body); color: #fd5f07; }

.mk-fmt--wa { width: 250px; padding-bottom: 14px; display: grid; gap: 8px; background: #efe9e1; }
.mk-fmt__wahead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #1f6f54; font: 700 13px/1 var(--font-body); color: #fff; }
.mk-fmt__bub { justify-self: end; max-width: 78%; margin: 0 12px !important; padding: 8px 10px; border-radius: 10px 2px 10px 10px; background: #d9fdd3; font: 500 12.5px/1.35 var(--font-body); }
.mk-fmt__bub.is-them { justify-self: start; border-radius: 2px 10px 10px 10px; background: #fff; }

.mk-fmt-tag {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent);
  font: 700 11.5px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-accent);
  opacity: 0;
  transition: opacity 0.3s var(--ease-io);
  pointer-events: none;
}
.mk-fmt-tag.is-on { opacity: 1; }

/* --------------------------------------------------------------------------
   4. 03 Target: filter chips + reach counter
   -------------------------------------------------------------------------- */
.mk-filters {
  position: absolute;
  z-index: 4;
  top: calc(var(--nav-top) + var(--nav-h) + 16px);
  left: calc(50% + 17vw);
  width: min(600px, 58vw);
  translate: -50% 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.mk-filters span {
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line2);
  font: 600 13px/1 var(--font-body);
  white-space: nowrap;
  color: var(--text);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.5);
  transition: border-color 0.4s, background-color 0.4s;
}
.mk-filters span.is-done { border-color: var(--accent); background: var(--accent-soft); }
.mk-filters span.is-done::after { content: " \2713"; color: var(--accent); }

.mk-crowd {
  position: absolute;
  z-index: 4;
  left: calc(50% + 17vw);
  bottom: clamp(20px, 5vh, 50px);
  translate: -50% 0;
  display: flex;
  align-items: flex-end;
  gap: 26px;
  padding: 14px 20px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line2);
  opacity: 0;
  visibility: hidden;
}
.mk-crowd p { margin: 0; display: grid; gap: 6px; }
.mk-crowd em { font: 600 10.5px/1 var(--font-body); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.mk-crowd b { font: 400 clamp(2rem, 3.2vw, 2.8rem)/0.9 var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.mk-crowd__waste span { display: block; width: 140px; height: 8px; margin-bottom: 6px; border-radius: 4px; overflow: hidden; background: var(--line2); }
.mk-crowd__waste i { display: block; height: 100%; background: #e5383b; transform-origin: left center; }

/* --------------------------------------------------------------------------
   5. 04 Sell: the shop, the funnel, the ring
   -------------------------------------------------------------------------- */
.mk-shop { position: absolute; z-index: 3; left: 0; top: 0; width: 240px; display: grid; justify-items: center; visibility: hidden; pointer-events: none; will-change: transform, opacity; }
.mk-shop.is-on { visibility: visible; }
.mk-shop p { margin: 0; }
.mk-shop__sign { margin-bottom: 10px; padding: 6px 14px 4px; border-radius: 12px; background: #11171a; border: 1px solid rgba(255, 255, 255, 0.12); }
.mk-open { display: flex; gap: 4px; font: 400 38px/1 var(--font-display); letter-spacing: 0.04em; }
.mk-open i { font-style: normal; color: #4a2c1c; transition: color 0.05s, text-shadow 0.05s; }
.mk-open.is-lit i { color: #ffd3b0; text-shadow: 0 0 6px #fd5f07, 0 0 16px #fd5f07, 0 0 34px rgba(253, 95, 7, 0.8); }
.mk-shop__face {
  position: relative;
  width: 240px;
  height: 160px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  padding: 0 18px;
  border-radius: 14px 14px 4px 4px;
  background: linear-gradient(#232c31, #182024);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.7);
}
.mk-shop__name { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font: 400 20px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: #9aa6ad; }
.mk-shop__win { width: 62px; height: 60px; margin-bottom: 40px; border-radius: 6px; background: #0e1417; border: 2px solid #2c373d; transition: background-color 0.4s, box-shadow 0.4s; }
.mk-shop__win.is-lit { background: #ffc58f; box-shadow: 0 0 26px rgba(255, 170, 90, 0.7); }
.mk-shop__door { width: 46px; height: 84px; border-radius: 6px 6px 0 0; background: #0b1013; border: 2px solid #2c373d; border-bottom: 0; }
.mk-shop__tag { margin-top: 12px !important; padding: 7px 12px; border-radius: 999px; background: var(--accent); font: 700 12px/1 var(--font-body); white-space: nowrap; color: var(--on-accent); opacity: 0; }

.mk-funnel {
  position: absolute;
  z-index: 4;
  top: calc(var(--nav-top) + var(--nav-h) + 14px);
  left: calc(50% + 17vw);
  translate: -50% 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 4px;
  width: min(640px, 60vw);
  opacity: 0;
  visibility: hidden;
}
.mk-funnel > p { margin: 0; display: grid; gap: 6px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line2); text-align: center; }
.mk-funnel > p + p::before { content: "\2192"; position: absolute; margin: 14px 0 0 -22px; color: var(--muted); }
.mk-funnel > p + p { margin-left: 14px; }
.mk-funnel em { font: 600 10px/1 var(--font-body); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.mk-funnel b { font: 400 26px/0.9 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.mk-funnel > p:nth-child(4) b { color: var(--accent); }
.mk-roas { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; }
.mk-roas p { margin: 0; display: grid; gap: 5px; }
.mk-roas em { font: 600 10px/1 var(--font-body); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.mk-roas b { font: 700 15px/1 var(--font-body); color: var(--text); }
.mk-roas b span { color: var(--accent); font-variant-numeric: tabular-nums; }
.mk-roas__dial { position: relative; width: 58px; height: 30px; overflow: hidden; }
.mk-roas__dial::before { content: ""; position: absolute; left: 0; top: 0; width: 58px; height: 58px; box-sizing: border-box; border-radius: 50%; border: 5px solid var(--line2); border-top-color: var(--accent); border-right-color: var(--accent); rotate: -45deg; }
.mk-roas__dial i { position: absolute; left: 28px; bottom: 0; width: 2px; height: 24px; border-radius: 2px; background: var(--text); transform-origin: 50% 100%; transform: rotate(-80deg); }
.mk-funnel small { flex-basis: 100%; text-align: center; font: 500 11px/1.3 var(--font-body); color: var(--muted); }

.mk-ring {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border: 6px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(253, 95, 7, 0.7), inset 0 0 30px rgba(253, 95, 7, 0.5);
  visibility: hidden;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mk-ignored { font-size: 11px; padding: 8px 12px; }
  .mk-ignored b { font-size: 14px; }
  .mk-you { bottom: auto; top: calc(var(--nav-top) + var(--nav-h) + 56px); }
  .mk-tag { display: none; }   /* no room beside the exploded ad on a phone */
  .mk-filters { left: 50%; width: calc(100% - 24px); top: calc(var(--nav-top) + var(--nav-h) + 6px); gap: 5px; }
  .mk-filters span { padding: 6px 9px; font-size: 11px; }
  .mk-crowd { left: 50%; bottom: auto; top: calc(var(--nav-top) + var(--nav-h) + 108px); gap: 16px; padding: 10px 14px; }
  .mk-crowd b { font-size: 1.7rem; }
  .mk-crowd em { font-size: 9px; letter-spacing: 0.1em; white-space: nowrap; }
  .mk-crowd__waste span { width: 90px; }
  .mk-funnel { left: 50%; width: calc(100% - 20px); top: calc(var(--nav-top) + var(--nav-h) + 4px); gap: 6px 2px; }
  .mk-funnel > p { padding: 7px 8px; }
  .mk-funnel > p + p { margin-left: 10px; }
  .mk-funnel > p + p::before { margin: 10px 0 0 -14px; }
  .mk-funnel em { font-size: 8.5px; letter-spacing: 0.1em; }
  .mk-funnel b { font-size: 19px; }
  .mk-funnel small { display: none; }
  .mk-roas { margin-top: 0; }
}