/* marketing.css — ghoststat.me (built on the GhostStat design system) */
.mk-wrap{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,24px)}
.mk-nav{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);height:66px;display:flex;align-items:center}
.mk-nav .mk-wrap{display:flex;align-items:center;gap:28px;width:100%}
.mk-links{display:flex;gap:26px;margin:0 auto}
.mk-links a{color:var(--ink-2);font-weight:600}
.mk-links a:hover,.mk-links a.active{color:var(--accent)}
.mk-actions{display:flex;align-items:center;gap:10px}
.mk-burger{color:var(--ink);background:none;border:0;line-height:0}
.mk-oc .offcanvas-body a{display:block;padding:12px 4px;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.mk-oc .offcanvas-body a:hover{color:var(--accent)}

.mk-hero{text-align:center;padding:clamp(48px,8vw,90px) 0 clamp(30px,5vw,48px)}
.mk-hero h1{font-size:clamp(30px,6vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:16px 0}
.mk-hero .lead{font-size:clamp(16px,2.4vw,19px);color:var(--muted);max-width:620px;margin:0 auto 26px}
.mk-badge{display:inline-block;font-size:12.5px;font-weight:700;padding:5px 14px;border-radius:var(--pill);background:var(--accent-soft);color:var(--accent-2)}
.mk-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-hero{height:44px!important;padding:0 22px!important;font-size:15px!important}

.mk-shot{margin:44px auto 0;max-width:940px;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2);overflow:hidden;background:#fff}
.mk-shot .bar{height:34px;background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px}
.mk-shot .bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.mk-shot .body{padding:18px}
.mk-mini-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.mk-mini-kpi{border:1px solid var(--line);border-radius:6px;padding:12px}
.mk-mini-kpi .l{font-size:11px;color:var(--muted);font-weight:700}
.mk-mini-kpi .v{font-size:22px;font-weight:800;letter-spacing:-.02em}

.mk-sec{padding:clamp(40px,7vw,72px) 0}
.mk-sec h2{font-size:clamp(24px,4vw,34px);font-weight:800;letter-spacing:-.02em;text-align:center;margin:0 0 8px}
.mk-sec .sub{color:var(--muted);text-align:center;max-width:560px;margin:0 auto 36px}

.mk-features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mk-feature{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:24px}
.mk-feature .ic{width:44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent-2);display:grid;place-items:center;margin-bottom:14px}
.mk-feature h3{font-size:17px;font-weight:700;margin:0 0 6px}
.mk-feature p{color:var(--muted);margin:0}

.mk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mk-step{text-align:center}
.mk-step .n{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:grid;place-items:center;margin:0 auto 12px}
.mk-step h3{font-size:16px;font-weight:700;margin:0 0 6px}
.mk-step p{color:var(--muted);margin:0}

.mk-pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.mk-price{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:26px 22px;text-align:center;position:relative}
.mk-price.pop{border:2px solid var(--accent);box-shadow:var(--sh-2)}
.mk-price.pop::before{content:"Most popular";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:3px 12px;border-radius:var(--pill)}
.mk-price h3{font-size:17px;font-weight:700;margin:0}
.mk-price .amt{font-size:38px;font-weight:800;margin:10px 0}
.mk-price .amt small{font-size:14px;color:var(--muted);font-weight:600}
.mk-price ul{list-style:none;padding:0;margin:18px 0;text-align:left}
.mk-price li{padding:6px 0;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start;font-size:13.5px}
.mk-price li svg{color:var(--accent);flex:none;margin-top:3px}

.mk-band{background:var(--ink);color:#fff;border-radius:16px;padding:clamp(32px,5vw,52px);text-align:center}
.mk-band h2{color:#fff;font-size:clamp(22px,3.6vw,30px);font-weight:800;margin:0 0 10px}
.mk-band p{color:#AEB6C4;margin:0 auto 20px;max-width:520px}

.mk-footer{background:#0F1420;color:#AEB6C4;padding:52px 0 32px;margin-top:60px}
.mk-footer a{color:#AEB6C4;display:block;padding:4px 0}
.mk-footer a:hover{color:#fff}
.mk-footer h5{color:#fff;font-size:12px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.06em}
.mk-fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:24px}
.mk-footer .gs-word{color:#8b93a7}.mk-footer .gs-word strong{color:#fff}
.mk-copy{border-top:1px solid rgba(255,255,255,.08);margin-top:32px;padding-top:20px;font-size:12.5px;color:#6B7488}

@media(max-width:900px){.mk-features,.mk-steps,.mk-pricing{grid-template-columns:repeat(2,1fr)}.mk-fgrid{grid-template-columns:1fr 1fr}.mk-mini-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mk-features,.mk-steps,.mk-pricing,.mk-fgrid{grid-template-columns:1fr}}

/* ── Cinematic hero band ─────────────────────────────────────────────────────
   The marketing site is light; the product is a dark control room. The hero
   borrows the product's language for one full-bleed band so the first thing a
   visitor sees is the thing they are buying, then the page returns to light. */
.mk-hero-dark{background:#0F141B;color:#E6EAF0;position:relative;overflow:hidden;
  padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,64px)}
.mk-hero-dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 420px at 50% -8%,rgba(38,224,138,.16),transparent 70%)}
.mk-hero-dark .mk-wrap{position:relative}
.mk-hero-dark h1{color:#fff}
.mk-hero-dark .lead{color:#9AA6B8}
.mk-hero-dark .lead em{color:#26E08A;font-style:normal;font-weight:700}
.mk-hero-dark .mk-badge{background:rgba(38,224,138,.12);color:#26E08A;border:1px solid rgba(38,224,138,.30)}
.mk-btn-ghost{border:1px solid rgba(255,255,255,.22);color:#E6EAF0;background:transparent}
.mk-btn-ghost:hover{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.34)}

.mk-shot-dark{background:#151C26;border-color:#232C3A;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.mk-shot-dark .bar{background:#111823;border-bottom-color:#232C3A;align-items:center;gap:7px;padding:0 12px}
.mk-shot-dark .bar i{background:#2C3646}
.mk-shot-dark .bar .ttl{margin-left:8px;font-size:12px;font-weight:700;color:#8A96A6;letter-spacing:.04em}
.mk-shot-dark .body{padding:18px}

.mk-live-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  color:#8A96A6;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.mk-live-dot{width:8px;height:8px;border-radius:50%;background:#26E08A;animation:mk-pulse 2s infinite}
@keyframes mk-pulse{0%{box-shadow:0 0 0 0 rgba(38,224,138,.55)}70%{box-shadow:0 0 0 8px rgba(38,224,138,0)}100%{box-shadow:0 0 0 0 rgba(38,224,138,0)}}

.mk-shot-dark .mk-mini-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mk-shot-dark .mk-mini-kpi{background:#0F1620;border:1px solid #232C3A;border-radius:9px;padding:12px 14px;text-align:left}
.mk-shot-dark .mk-mini-kpi .l{font-size:11px;font-weight:700;color:#7C8899;letter-spacing:.06em}
.mk-shot-dark .mk-mini-kpi .v{font-size:clamp(20px,3.4vw,28px);font-weight:800;color:#fff;line-height:1.15;
  font-variant-numeric:tabular-nums;transition:color .3s}
.mk-mini-kpi .v.mk-bump{color:#26E08A}

.mk-spark{width:100%;height:150px;display:block;margin-top:14px}
.mk-spark-tip{animation:mk-tip 2.4s ease-in-out infinite}
@keyframes mk-tip{0%,100%{opacity:1}50%{opacity:.35}}

.mk-triad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.mk-tri-h{display:flex;justify-content:space-between;font-size:12.5px;color:#9AA6B8;margin-bottom:6px}
.mk-tri-h b{color:#fff;font-variant-numeric:tabular-nums}
.mk-tri-bar{height:7px;border-radius:5px;background:#232C3A;overflow:hidden}
.mk-tri-bar i{display:block;height:100%;border-radius:5px;width:0;animation:mk-grow 1.1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes mk-grow{from{width:0}}
.mk-live-foot{margin:14px 0 0;font-size:12.5px;color:#6F7C90;text-align:left}
.mk-live-foot a{color:#26E08A}
.mk-hero-copy p{color:#9AA6B8;margin:0;text-align:left}

@media(max-width:720px){
  .mk-shot-dark .mk-mini-kpis{grid-template-columns:repeat(2,1fr)}
  .mk-triad{grid-template-columns:1fr}
  .mk-spark{height:110px}
}
@media(prefers-reduced-motion:reduce){
  .mk-live-dot,.mk-spark-tip,.mk-tri-bar i{animation:none}
  .mk-tri-bar i{width:var(--w,0)}
}

/* ── Visitor Intelligence Hub section ───────────────────────────────────────── */
.mk-eyebrow{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.mk-hub{background:linear-gradient(180deg,#0F141B 0%,#141C27 100%);color:#E6EAF0;
  padding:clamp(52px,7vw,86px) 0}
.mk-hub h2{color:#fff;font-size:clamp(24px,4vw,38px);font-weight:800;letter-spacing:-.02em;margin:0 0 12px}
.mk-hub .sub{color:#9AA6B8;max-width:720px;margin:0 auto 40px}
.mk-hubwrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,52px);align-items:center;text-align:left}

.mk-hub-diagram{position:relative;min-height:330px;display:flex;align-items:center;justify-content:center}
.mk-hub-core{position:relative;width:190px;height:190px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;z-index:2;
  background:radial-gradient(circle at 50% 40%,#1B4634,#111A24 72%);border:1px solid rgba(38,224,138,.45);
  box-shadow:0 0 0 10px rgba(38,224,138,.06),0 0 60px rgba(38,224,138,.22)}
.mk-hub-core-t{font-size:13px;font-weight:700;color:#26E08A;letter-spacing:.1em;text-transform:uppercase}
.mk-hub-core-s{font-size:17px;font-weight:800;color:#fff;max-width:130px;line-height:1.25;margin-top:4px}
.mk-hub-ping{position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(38,224,138,.5);
  animation:mk-ping 3.2s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes mk-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}

.mk-hub-feeds{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.mk-hub-feeds li{position:absolute;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:#C7CFDA;background:#151C26;border:1px solid #232C3A;border-radius:20px;padding:6px 12px;white-space:nowrap;
  animation:mk-feed 4.5s ease-in-out infinite;animation-delay:calc(var(--i) * .34s)}
.mk-hub-feeds li i{color:#26E08A;font-size:13px}
.mk-hub-feeds li:nth-child(1){top:2%;left:50%;transform:translateX(-50%)}
.mk-hub-feeds li:nth-child(2){top:16%;right:2%}
.mk-hub-feeds li:nth-child(3){top:44%;right:0}
.mk-hub-feeds li:nth-child(4){bottom:16%;right:3%}
.mk-hub-feeds li:nth-child(5){bottom:2%;left:50%;transform:translateX(-50%)}
.mk-hub-feeds li:nth-child(6){bottom:16%;left:3%}
.mk-hub-feeds li:nth-child(7){top:44%;left:0}
.mk-hub-feeds li:nth-child(8){top:16%;left:2%}
@keyframes mk-feed{0%,100%{opacity:.55}50%{opacity:1;border-color:rgba(38,224,138,.45)}}

.mk-hub-out h3{font-size:15px;font-weight:800;color:#8A96A6;text-transform:uppercase;letter-spacing:.07em;margin:0 0 16px}
.mk-rings{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.mk-ring{display:flex;align-items:flex-start;gap:11px;padding:10px 13px;border-radius:10px;
  background:#151C26;border:1px solid #232C3A}
.mk-ring-dot{width:11px;height:11px;border-radius:50%;flex:none;margin-top:3px;
  background:#26E08A;opacity:calc(.4 + (var(--n) * .2))}
.mk-ring b{display:block;font-size:14px;color:#fff}
.mk-ring span{font-size:13px;color:#8A96A6}
.mk-hub-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.mk-hub-points li{font-size:14.5px;color:#9AA6B8;padding-left:22px;position:relative}
.mk-hub-points li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;
  background:rgba(38,224,138,.25);border:1px solid #26E08A}
.mk-hub-points b{color:#fff}

/* ── Plugin grid ────────────────────────────────────────────────────────────── */
.mk-plugins{background:var(--bg);padding:clamp(52px,7vw,86px) 0}
.mk-plugins h2{font-size:clamp(24px,4vw,36px);font-weight:800;letter-spacing:-.02em;margin:0 0 12px}
.mk-plugins .sub{color:var(--muted);max-width:700px;margin:0 auto 36px}
.mk-pgroup{margin-bottom:30px;text-align:left}
.mk-pgroup h3{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 14px}
.mk-pgroup h3 span{font-size:11.5px;font-weight:700;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:20px;padding:2px 9px;letter-spacing:0}
.mk-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.mk-pcard{background:#fff;border:1px solid var(--line);border-radius:11px;padding:15px 16px;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,border-color .18s}
.mk-pcard:hover{transform:translateY(-3px);border-color:rgba(31,164,99,.45);box-shadow:0 12px 28px rgba(18,23,42,.10)}
.mk-pcard i{font-size:19px;color:var(--accent)}
.mk-pcard h4{font-size:14.5px;font-weight:700;margin:9px 0 5px;letter-spacing:-.01em}
.mk-pcard p{font-size:12.8px;line-height:1.5;color:var(--muted);margin:0}

@media(max-width:880px){
  .mk-hubwrap{grid-template-columns:1fr}
  .mk-hub-diagram{min-height:290px}
  .mk-hub-feeds li{font-size:11.5px;padding:5px 9px}
}
@media(prefers-reduced-motion:reduce){
  .mk-hub-ping,.mk-hub-feeds li{animation:none}
  .mk-pcard{transition:none}
}

/* ── Features showcase ──────────────────────────────────────────────────────── */
.mk-showcase{background:#0F141B;padding:clamp(44px,6vw,72px) 0}
.mk-show{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,54px);
  align-items:center;padding:clamp(22px,3.5vw,38px) 0;border-bottom:1px solid #1B2432}
.mk-show:last-child{border-bottom:0}
.mk-show.rev .mk-show-viz{order:2}
.mk-show-viz{background:#151C26;border:1px solid #232C3A;border-radius:12px;padding:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.34)}
.mk-viz{width:100%;height:auto;display:block}
.mk-show-copy h2{font-size:clamp(20px,3vw,29px);font-weight:800;color:#fff;letter-spacing:-.02em;margin:6px 0 12px}
.mk-show-copy p{font-size:15px;line-height:1.62;color:#9AA6B8;margin:0}

/* ── Category cards ─────────────────────────────────────────────────────────── */
.mk-catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:13px;
  text-align:left;margin-top:26px}
.mk-cat{display:block;background:#151C26;border:1px solid #232C3A;border-radius:11px;padding:15px 16px;
  text-decoration:none;transition:transform .18s cubic-bezier(.2,.7,.2,1),border-color .18s}
.mk-cat:hover{transform:translateY(-3px);border-color:rgba(38,224,138,.45)}
.mk-cat b{display:block;font-size:15px;color:#fff}
.mk-cat span{display:block;font-size:12px;color:#26E08A;font-weight:700;margin:2px 0 7px}
.mk-cat em{display:block;font-size:12.2px;line-height:1.5;color:#7C8899;font-style:normal}

@media(max-width:820px){
  .mk-show{grid-template-columns:1fr;gap:18px}
  .mk-show.rev .mk-show-viz{order:0}
}
@media(prefers-reduced-motion:reduce){ .mk-cat{transition:none} }

/* ── Visitor Intelligence Hub page ──────────────────────────────────────────── */
.mk-radarshot{max-width:820px}
.mk-radarwrap{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:center}
.mk-radar{width:100%;max-width:300px;height:auto;display:block}
.mk-radar-sweep{transform-origin:150px 150px;animation:mk-sweep 4s linear infinite}
@keyframes mk-sweep{to{transform:rotate(360deg)}}
.mk-node{animation:mk-node 3s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes mk-node{0%,100%{opacity:.55}50%{opacity:1}}
.mk-radar-key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;text-align:left}
.mk-radar-key li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:#9AA6B8;line-height:1.45}
.mk-radar-key span{width:10px;height:10px;border-radius:50%;flex:none;margin-top:4px}

.mk-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;text-align:left;margin-top:26px}
.mk-step{background:#151C26;border:1px solid #232C3A;border-radius:11px;padding:16px}
.mk-step-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:rgba(38,224,138,.14);border:1px solid rgba(38,224,138,.4);color:#26E08A;font-size:12.5px;font-weight:800}
.mk-step b{display:block;color:#fff;font-size:15.5px;margin:10px 0 6px}
.mk-step p{margin:0;font-size:13.4px;line-height:1.55;color:#8A96A6}

.mk-hubpanels{background:#0F141B;padding:clamp(40px,6vw,68px) 0}
.mk-panelgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
.mk-panel{background:#151C26;border:1px solid #232C3A;border-radius:12px;padding:18px;text-align:left}
.mk-panel h3{font-size:15.5px;font-weight:800;color:#fff;margin:0 0 4px}
.mk-panel-s{font-size:12.8px;color:#7C8899;margin:0 0 15px}
.mk-panel .mk-tri{margin-bottom:13px}

.mk-stage{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px}
.mk-stage-dot{width:11px;height:11px;border-radius:50%;background:#26E08A;flex:none;margin-top:4px}
.mk-stage b{display:block;color:#fff;font-size:13.8px}
.mk-stage b em{font-style:normal;color:#26E08A;font-weight:700;margin-left:5px}
.mk-stage span{font-size:12.6px;color:#7C8899}

.mk-pers{margin-bottom:11px}
.mk-pers-h{display:flex;justify-content:space-between;font-size:13px;color:#9AA6B8;margin-bottom:5px}
.mk-pers-h b{color:#fff;font-variant-numeric:tabular-nums}
.mk-pers-bar{height:7px;border-radius:5px;background:#232C3A;overflow:hidden}
.mk-pers-bar i{display:block;height:100%;border-radius:5px;width:0;animation:mk-grow 1s cubic-bezier(.2,.7,.2,1) forwards}

.mk-mapbar{display:flex;height:16px;border-radius:8px;overflow:hidden;background:#232C3A;margin-bottom:14px}
.mk-mapbar i{display:block;height:100%}
.mk-maplegend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mk-maplegend li{display:flex;align-items:center;gap:7px;font-size:12.4px;color:#8A96A6}
.mk-maplegend li span{width:9px;height:9px;border-radius:3px;flex:none}
.mk-maplegend li b{color:#fff;margin-left:auto;font-variant-numeric:tabular-nums}

.mk-signals{background:linear-gradient(180deg,#141C27 0%,#0F141B 100%);color:#E6EAF0;padding:clamp(46px,6vw,74px) 0}
.mk-signals h2{color:#fff;font-size:clamp(23px,3.6vw,34px);font-weight:800;letter-spacing:-.02em;margin:0 0 12px}
.mk-signals .sub{color:#9AA6B8;max-width:660px;margin:0 auto 30px}
.mk-siggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;text-align:left}
.mk-sig{background:#151C26;border:1px solid #232C3A;border-radius:11px;padding:16px}
.mk-sig i{font-size:19px;color:#26E08A}
.mk-sig b{display:block;color:#fff;font-size:14.5px;margin:9px 0 5px}
.mk-sig span{font-size:12.8px;line-height:1.5;color:#8A96A6}

@media(max-width:820px){
  .mk-radarwrap{grid-template-columns:1fr;justify-items:center}
  .mk-maplegend{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .mk-radar-sweep,.mk-node,.mk-pers-bar i{animation:none}
  .mk-pers-bar i,.mk-tri-bar i{animation:none}
}

/* Every plugin is on the Free plan, so there is no Pro tier to label and no second icon colour to signal
   one. `.mk-pcard.pro i` used to turn the icon blue — that rule is why some cards read as "the paid ones"
   even after the badge stopped rendering. Both are gone: one plan, one colour.
   The .mk-pro rule is kept as a no-op-safe definition ONLY so that a future tier can restore it
   deliberately rather than inheriting whatever the browser does with an unstyled span. */
.mk-pro{display:none}

/* ── Pricing comparison ─────────────────────────────────────────────────────── */
.mk-compare{background:#fff;border-top:1px solid var(--line);padding:clamp(46px,6vw,74px) 0}
.mk-compare h2{font-size:clamp(23px,3.6vw,34px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.mk-compare .sub{color:var(--muted);max-width:660px;margin:0 auto 28px}
/* The table scrolls inside its own container, never the page. */
.mk-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
.mk-ctable{width:100%;min-width:620px;border-collapse:collapse;font-size:14px;text-align:left}
.mk-ctable th,.mk-ctable td{padding:11px 14px;border-bottom:1px solid var(--line)}
.mk-ctable thead th{background:var(--bg);font-size:13px;font-weight:800;letter-spacing:.03em;
  color:var(--ink);position:sticky;top:0;z-index:1}
.mk-ctable thead th:not(:first-child),.mk-ctable td{text-align:center}
.mk-ctable tbody th[scope="row"]{font-weight:600;color:var(--ink-2)}
.mk-ctable tr.grp th{background:#F2F5F9;font-size:11.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);padding:9px 14px}
.mk-ctable tbody tr:last-child th,.mk-ctable tbody tr:last-child td{border-bottom:0}
.mk-cnt{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:var(--muted);
  background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:1px 7px}
.mk-yes{color:var(--accent);font-weight:800;font-size:15px}
.mk-no{color:var(--line-2,#C9D2DD)}
.mk-part{font-size:12.5px;font-weight:700;color:#2A6FE8}
.mk-note{margin:16px auto 0;max-width:720px;font-size:12.8px;color:var(--muted)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mk-quota{display:block;font-size:11.5px;font-weight:700;color:#2A6FE8;margin-top:2px}

/* ── The nostalgia block ─────────────────────────────────────────────────────
   Deliberately 1996: an outset bevel, a tiled-look background, Times for the heading, monospace for the
   small print, and the LED odometer every homepage had at the bottom. It is the one place on the site where
   looking dated is the point, so it does NOT inherit the flat card language — that would flatten the joke.
   Everything is still legible, still responsive, and still keyboard-reachable; period pastiche is not an
   excuse for a bad control. */
.mk-retro{background:#c0c0c0;border:3px outset #e8e8e8;padding:5px;
  background-image:linear-gradient(45deg,rgba(255,255,255,.35) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,transparent 75%);
  background-size:8px 8px}
.mk-retro-in{background:#000080;border:2px inset #dcdcdc;padding:22px 18px;text-align:center;color:#fff}
.mk-retro-k{font-family:"Courier New",monospace;font-size:11px;letter-spacing:.06em;color:#ffff66;margin:0 0 10px}
.mk-retro-h{font-family:"Times New Roman",Times,serif;font-size:30px;line-height:1.15;font-weight:700;
  color:#fff;text-shadow:2px 2px 0 #000;margin:0 0 14px;letter-spacing:0}
/* The odometer, borrowed from the real counter so the two look like the same product. */
.mk-odo{display:inline-flex;gap:3px;background:#111;padding:7px;border:2px inset #888;border-radius:2px}
.mk-odo-d{font-family:"Courier New",monospace;font-weight:700;font-size:26px;line-height:1;
  color:#3AE38B;background:#000;padding:5px 6px;border-radius:2px;
  box-shadow:inset 0 -6px 8px rgba(0,0,0,.6),0 0 6px rgba(58,227,139,.35)}
.mk-retro-p{max-width:56ch;margin:16px auto 0;font-size:14px;line-height:1.6;color:#dfe6ff}
.mk-retro-cta{margin:18px 0 12px}
.mk-retro-btn{display:inline-block;font-family:"Courier New",monospace;font-size:14px;font-weight:700;
  text-decoration:none;color:#000;background:#c0c0c0;border:3px outset #e8e8e8;padding:8px 18px}
.mk-retro-btn:hover{background:#d4d4d4}
.mk-retro-btn:active{border-style:inset}
.mk-retro-btn:focus-visible{outline:2px solid #ffff66;outline-offset:2px}
.mk-retro-f{font-family:"Courier New",monospace;font-size:11.5px;line-height:1.7;color:#aab6e8;margin:0}
.mk-retro-bv{color:#8f9ad0}
@media(max-width:600px){
  .mk-retro-h{font-size:22px}
  .mk-odo-d{font-size:20px;padding:4px 5px}
  .mk-retro-in{padding:18px 12px}
}

/* ── Plugin marketplace: role filter ─────────────────────────────────────────── */
.mk-roles-lead{max-width:780px;margin:0 auto 18px;text-align:center;color:var(--muted);font-size:15px;line-height:1.6}
.mk-roles-lead b{color:var(--ink)}
.mk-roles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 28px}
.mk-role{border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:var(--pill);
  padding:7px 16px;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.mk-role:hover{border-color:var(--accent);color:var(--accent)}
.mk-role.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.mk-role:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* cards react to the chosen role: matches stay, the rest fade back to ~70% and desaturate */
.mk-pcard{transition:opacity .2s,filter .2s,border-color .2s}
.mk-pcard.mk-dim{opacity:.7;filter:grayscale(.55)}
.mk-pcard.mk-hi{border-color:var(--accent)}
.mk-pgroup.mk-ghide{display:none}

/* ── Ecosystem strip (Rent-An-Ad + Tossit) ───────────────────────────────────── */
.mk-eco-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:24px}
.mk-eco-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);padding:22px 24px;transition:border-color .15s,box-shadow .15s,transform .15s}
.mk-eco-card:hover{border-color:var(--accent);box-shadow:var(--sh-2);transform:translateY(-2px)}
.mk-eco-card>.bi{font-size:24px;color:var(--accent);display:block;margin-bottom:12px}
.mk-eco-card h4{margin:0 0 6px;font-size:17px;color:var(--ink)}
.mk-eco-card p{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.55}
.mk-eco-go{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:700;font-size:13.5px}
.mk-eco-go::after{content:"\2192"}
@media (prefers-reduced-motion:reduce){.mk-pcard,.mk-eco-card,.mk-role{transition:none}.mk-eco-card:hover{transform:none}}

/* ── Long-form pages (privacy / terms / copyright / support) ──────────────────── */
.mk-legal{max-width:780px;margin:0 auto;text-align:left}
.mk-legal .mk-updated{color:var(--muted);font-size:13.5px;margin:0 0 8px}
/* override the centered .mk-sec h2/.sub — long-form pages read left-aligned */
.mk-legal h2{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:38px 0 12px;scroll-margin-top:90px;text-align:left}
.mk-legal h2:first-of-type{margin-top:8px}
.mk-legal h3{font-size:16px;font-weight:700;margin:22px 0 8px;text-align:left}
.mk-legal p,.mk-legal li{color:var(--ink-2);font-size:15.5px;line-height:1.7}
.mk-legal p{margin:0 0 14px}
.mk-legal ul{margin:0 0 16px;padding-left:22px}
.mk-legal li{margin:0 0 7px}
.mk-legal a{color:var(--accent);font-weight:600}
.mk-legal strong{color:var(--ink)}
.mk-legal .mk-note{background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r-card);
  padding:14px 18px;margin:16px 0;color:var(--ink-2);font-size:14.5px}
.mk-legal .mk-toc{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-wrap:wrap;gap:8px}
.mk-legal .mk-toc a{display:inline-block;border:1px solid var(--line);border-radius:var(--pill);
  padding:5px 13px;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none}
.mk-legal .mk-toc a:hover{border-color:var(--accent);color:var(--accent)}

/* Support page cards */
.mk-help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0 8px}
.mk-help-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);padding:22px 24px;transition:border-color .15s,box-shadow .15s,transform .15s}
.mk-help-card:hover{border-color:var(--accent);box-shadow:var(--sh-2);transform:translateY(-2px)}
.mk-help-card>.bi{font-size:22px;color:var(--accent);display:block;margin-bottom:12px}
.mk-help-card h3{margin:0 0 6px;font-size:16px;color:var(--ink)}
.mk-help-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.mk-faq{margin-top:8px}
.mk-faq details{border-bottom:1px solid var(--line);padding:14px 0}
.mk-faq summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:15.5px;list-style:none}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::before{content:"\002B";color:var(--accent);font-weight:800;margin-right:10px}
.mk-faq details[open] summary::before{content:"\2212"}
.mk-faq p{margin:12px 0 0;color:var(--ink-2);font-size:15px;line-height:1.65}
@media (prefers-reduced-motion:reduce){.mk-help-card{transition:none}.mk-help-card:hover{transform:none}}

/* Footer legal row */
.mk-copy{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
.mk-legal-links a{display:inline;padding:0;color:inherit;opacity:.85;text-decoration:none}
.mk-legal-links a:hover{opacity:1;text-decoration:underline}