/* ═══════════════════════════════════════════════════════════════════
   CrowdTagg — public marketing design system  (Chatbase-style)
   Load ONLY on marketing pages and /pricing — never on the dashboard.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

/* ─── Design tokens — light (default) ──────────────────────────── */
:root,[data-theme=light]{
  --mk-bg:#F7F7F5;
  --mk-bg-alt:#FFFFFF;
  --mk-txt:#0A0A0A;
  --mk-txt-2:#5B5B5B;
  --mk-mut:#5B5B5B;
  --mk-faint:#9B9B9B;
  --mk-line:#ECECEC;
  --mk-line-strong:#DADADA;
  --mk-panel:#FFFFFF;
  --mk-panel-2:#F4F4F2;
  --mk-cobalt:#2C2CE0;
  --mk-cobalt-2:#4040F0;
  --mk-cobalt-soft:rgba(44,44,224,.08);
  --mk-magenta:#E6009B;
  --mk-magenta-soft:rgba(230,0,155,.09);
  --mk-green:#16A34A;
  --mk-green-soft:rgba(22,163,74,.10);
  --mk-ink:#0A0A0A;
  --mk-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.12);
  --mk-shadow-md:0 2px 8px rgba(0,0,0,.06),0 20px 48px -24px rgba(0,0,0,.18);
}

/* ─── Design tokens — dark ──────────────────────────────────────── */
[data-theme=dark]{
  --mk-bg:#0B0B0D;
  --mk-bg-alt:#111113;
  --mk-txt:#F2F2F2;
  --mk-txt-2:#AAAAAA;
  --mk-mut:#888888;
  --mk-faint:#555555;
  --mk-line:#222224;
  --mk-line-strong:#333335;
  --mk-panel:#16161A;
  --mk-panel-2:#1C1C20;
  --mk-cobalt:#4040F0;
  --mk-cobalt-2:#5555F8;
  --mk-cobalt-soft:rgba(64,64,240,.15);
  --mk-magenta:#F040B0;
  --mk-magenta-soft:rgba(240,64,176,.12);
  --mk-green:#22C55E;
  --mk-green-soft:rgba(34,197,94,.12);
  --mk-ink:#F2F2F2;
  --mk-shadow:0 1px 2px rgba(0,0,0,.2),0 12px 32px -16px rgba(0,0,0,.45);
  --mk-shadow-md:0 2px 8px rgba(0,0,0,.25),0 20px 48px -24px rgba(0,0,0,.55);
}

/* ─── Base ──────────────────────────────────────────────────────── */
body{
  background:var(--mk-bg);
  color:var(--mk-txt);
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* ─── Typography ────────────────────────────────────────────────── */
.mk-h1{
  font-size:clamp(40px,5.2vw,62px);
  font-weight:850;
  letter-spacing:-0.03em;
  line-height:1.05;
  margin:0 0 20px;
  color:var(--mk-txt);
}
.mk-h1 em{font-style:italic;font-weight:850;color:var(--mk-txt)}
.mk-h2{
  font-size:clamp(26px,3.5vw,42px);
  font-weight:800;
  letter-spacing:-0.025em;
  line-height:1.1;
  margin:0 0 14px;
  color:var(--mk-txt);
}
.mk-h2 em{font-style:italic}
.mk-h2-sm{
  font-size:28px;font-weight:750;letter-spacing:-0.02em;
  line-height:1.2;margin:0 0 12px;color:var(--mk-txt);
}
.mk-lead{
  font-size:18px;
  color:var(--mk-mut);
  line-height:1.6;
}
.mk-kick{
  font-size:11px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-weight:700;
  color:var(--mk-cobalt);
  margin:0 0 12px;
  display:block;
}

/* ─── Nav bar ───────────────────────────────────────────────────── */
.mkt-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(247,247,245,.9);
  border-bottom:1px solid var(--mk-line);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
[data-theme=dark] .mkt-nav{background:rgba(11,11,13,.9)}
.mkt-nav-inner{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:8px;height:60px;
}
.mkt-logo{
  font-size:16px;font-weight:800;letter-spacing:-0.4px;
  color:var(--mk-txt);margin-right:auto;
  display:flex;align-items:center;gap:7px;
  flex-shrink:0;
}
.mkt-logo-icon{
  width:28px;height:28px;
  background:#0A0A0A;
  border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;font-weight:900;flex-shrink:0;
  letter-spacing:-0.5px;
}
[data-theme=dark] .mkt-logo-icon{background:#F2F2F2;color:#0A0A0A}
/* CrowdTagg SVG logo mark + wordmark */
.mkt-logo .ct-mark,.mkt-flogo .ct-mark{display:block;flex-shrink:0}
.mkt-logo-word{font-weight:800;letter-spacing:-0.4px}
.mkt-links{display:flex;align-items:center;gap:2px}
.mkt-links a{
  font-size:13.5px;font-weight:500;
  color:var(--mk-txt-2);
  padding:7px 13px;border-radius:8px;
  transition:color .12s,background .12s;
  white-space:nowrap;
}
.mkt-links a:hover{color:var(--mk-txt);background:var(--mk-panel)}
.mkt-links a.active{color:var(--mk-cobalt);font-weight:600}
.mkt-nav-ctas{display:flex;align-items:center;gap:8px;margin-left:12px}
.btn-ghost-nav{
  font-size:13.5px;font-weight:600;
  color:var(--mk-txt-2);
  padding:7px 14px;border-radius:8px;
  transition:color .12s,background .12s;
  white-space:nowrap;
}
.btn-ghost-nav:hover{color:var(--mk-txt);background:var(--mk-panel)}
.btn-nav-cta{
  font-size:13.5px;font-weight:700;
  background:#0A0A0A;color:#fff;
  padding:8px 18px;border-radius:9px;
  transition:background .12s;white-space:nowrap;
  display:inline-block;
}
.btn-nav-cta:hover{background:#1A1A1A}
[data-theme=dark] .btn-nav-cta{background:#F2F2F2;color:#0A0A0A}
[data-theme=dark] .btn-nav-cta:hover{background:#DDDDDD}

/* ─── Buttons ───────────────────────────────────────────────────── */
.btn-primary{
  display:inline-block;
  background:#0A0A0A;color:#fff;
  font-size:14px;font-weight:650;
  padding:10px 20px;border-radius:9px;
  border:none;cursor:pointer;
  transition:background .12s;
  white-space:nowrap;font-family:inherit;
}
.btn-primary:hover{background:#1A1A1A}
.btn-primary-lg{font-size:16px;padding:13px 28px;border-radius:10px}
[data-theme=dark] .btn-primary{background:#F2F2F2;color:#0A0A0A}
[data-theme=dark] .btn-primary:hover{background:#DDDDDD}
.btn-secondary{
  display:inline-block;
  background:var(--mk-panel);color:var(--mk-txt);
  font-size:14px;font-weight:600;
  padding:10px 20px;border-radius:9px;
  border:1px solid var(--mk-line-strong);
  cursor:pointer;transition:border-color .12s,background .12s;
  white-space:nowrap;font-family:inherit;
}
.btn-secondary:hover{border-color:var(--mk-txt-2);background:var(--mk-panel-2)}
.btn-secondary-lg{font-size:16px;padding:13px 28px;border-radius:10px}

/* ─── Layout helpers ────────────────────────────────────────────── */
.mk-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.mk-wrap-narrow{max-width:780px;margin:0 auto;padding:0 24px}
.mk-wrap-mid{max-width:900px;margin:0 auto;padding:0 24px}

/* ─── Hero — split layout ───────────────────────────────────────── */
.mk-hero{
  max-width:1180px;margin:0 auto;
  padding:80px 24px 64px;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.mk-hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:650;
  padding:6px 14px;border-radius:20px;
  background:var(--mk-green-soft);color:var(--mk-green);
  margin-bottom:24px;
}
.mk-hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* Right panel — solid cobalt with diagonal texture */
.mk-hero-panel{
  background-color:#2C2CE0;
  background-image:repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,
    transparent 0,transparent 50%
  );
  background-size:8px 8px;
  border-radius:20px;
  padding:36px 32px;
  position:relative;overflow:hidden;
}
/* Centering hero for inner pages */
.mk-hero-center{
  max-width:1180px;margin:0 auto;
  padding:72px 24px 56px;
  text-align:center;
}
.mk-hero-center .mk-lead{margin:0 auto}

/* ─── Product preview mock card ──────────────────────────────────── */
.mk-preview-card{
  background:#fff;border-radius:14px;padding:22px 20px;
  box-shadow:0 4px 24px rgba(0,0,0,.22);
}
.mk-preview-selfie{
  background:#F4F4F2;border-radius:10px;padding:24px;
  text-align:center;margin-bottom:12px;border:1.5px dashed #DADADA;
}
.mk-preview-input{
  background:#F4F4F2;border-radius:8px;padding:10px 14px;margin-bottom:8px;
  display:flex;flex-direction:column;gap:2px;
}
.mk-preview-btn{
  background:#0A0A0A;border-radius:8px;padding:10px;
  text-align:center;margin-bottom:14px;
}
.mk-preview-item{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
}
.mk-preview-avatar{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;
}

/* ─── Stats strip ───────────────────────────────────────────────── */
.mk-stats-strip{
  border-top:1px solid var(--mk-line);
  border-bottom:1px solid var(--mk-line);
  background:var(--mk-panel);
  padding:28px 24px;
}
.mk-stats-inner{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.mk-stat{text-align:center;flex:1;min-width:100px}
.mk-stat-num{font-size:28px;font-weight:800;letter-spacing:-1px;color:var(--mk-cobalt)}
.mk-stat-lbl{font-size:12.5px;color:var(--mk-mut);margin-top:4px}
.mk-stat-div{width:1px;height:40px;background:var(--mk-line);flex-shrink:0}

/* ─── Section bands ─────────────────────────────────────────────── */
.mk-band{padding:72px 0;background:var(--mk-panel-2)}
.mk-band-white{padding:72px 0;background:var(--mk-bg)}
.mk-band-hdr{text-align:center;margin-bottom:48px}

/* ─── Feature cards ─────────────────────────────────────────────── */
.mk-card-grid{display:grid;gap:16px}
.mk-card-grid.cols-2{grid-template-columns:1fr 1fr}
.mk-card-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.mk-card-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.mk-card{
  background:var(--mk-panel);
  border:1px solid var(--mk-line);
  border-radius:18px;padding:28px 24px;
  box-shadow:var(--mk-shadow);
  transition:border-color .2s,transform .2s;
}
.mk-card:hover{border-color:var(--mk-line-strong);transform:translateY(-2px)}
.mk-card h3{font-size:16px;font-weight:700;letter-spacing:-0.02em;margin:0 0 8px;color:var(--mk-txt)}
.mk-card p{font-size:13.5px;color:var(--mk-txt-2);line-height:1.55;margin:0}
/* Colorful rounded-square icon chips */
.mk-chip{
  width:44px;height:44px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;margin-bottom:16px;
}
.mk-chip.blue{background:linear-gradient(135deg,#2C2CE0,#5050F0)}
.mk-chip.magenta{background:linear-gradient(135deg,#E6009B,#F040B0)}
.mk-chip.green{background:linear-gradient(135deg,#16A34A,#22C55E)}
.mk-chip.amber{background:linear-gradient(135deg,#D97706,#F59E0B)}
.mk-chip.purple{background:linear-gradient(135deg,#7C3AED,#A855F7)}
.mk-chip.teal{background:linear-gradient(135deg,#0D9488,#14B8A6)}
/* Lottie micro-animation inside a chip: fills ~64% of the tile, white line-art */
.mk-lottie{width:64%;height:64%;display:block;line-height:0}
.mk-lottie svg{display:block;width:100%;height:100%}

/* ─── Pill / badge ──────────────────────────────────────────────── */
.mk-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:650;
  padding:6px 14px;border-radius:20px;
}
.mk-pill.green{background:var(--mk-green-soft);color:var(--mk-green)}
.mk-pill.cobalt{background:var(--mk-cobalt-soft);color:var(--mk-cobalt)}
.mk-pill.magenta{background:var(--mk-magenta-soft);color:var(--mk-magenta)}

/* ─── Cobalt color-block band ───────────────────────────────────── */
.mk-cobalt-band{
  background-color:#2C2CE0;
  background-image:repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,
    transparent 0,transparent 50%
  );
  background-size:10px 10px;
  color:#fff;
  padding:80px 24px;
}
.mk-cobalt-band .mk-kick{color:rgba(255,255,255,.65)}
.mk-cobalt-band .mk-h2{color:#fff}
.mk-cobalt-band .mk-lead{color:rgba(255,255,255,.82)}
.mk-cobalt-band-inner{max-width:1180px;margin:0 auto}

/* ─── Trust band — black ────────────────────────────────────────── */
.mk-trust-band{
  background:#0A0A0A;color:#fff;
  padding:80px 24px;
}
.mk-trust-band .mk-kick{color:rgba(255,255,255,.55)}
.mk-trust-band .mk-h2{color:#fff}
.mk-trust-band .mk-lead{color:rgba(255,255,255,.72)}
.mk-trust-band-inner{max-width:1180px;margin:0 auto}
.mk-trust-item{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:28px 24px;
}
.mk-trust-item h3{color:#fff;font-size:16px;font-weight:700;margin:0 0 8px}
.mk-trust-item p{color:rgba(255,255,255,.65);font-size:13.5px;line-height:1.55;margin:0}

/* ─── CTA band ──────────────────────────────────────────────────── */
.mk-cta-band{
  max-width:1132px;margin:80px auto;padding:64px 48px;
  background:#0A0A0A;color:#fff;
  border-radius:20px;text-align:center;
  position:relative;overflow:hidden;
}
.mk-cta-band h2{
  font-size:clamp(28px,4vw,44px);font-weight:800;
  letter-spacing:-0.03em;margin:0 0 12px;color:#fff;
}
.mk-cta-band h2 em{font-style:italic}
.mk-cta-band p{font-size:17px;color:rgba(255,255,255,.72);margin:0 0 28px;line-height:1.5}
.btn-cta-white{
  display:inline-block;background:#fff;color:#0A0A0A;
  font-weight:700;font-size:15px;padding:13px 28px;
  border-radius:9px;transition:opacity .12s;
}
.btn-cta-white:hover{opacity:.9}
.btn-cta-ghost{
  display:inline-block;
  background:rgba(255,255,255,.12);color:#fff;
  font-weight:600;font-size:15px;padding:13px 28px;
  border-radius:9px;border:1px solid rgba(255,255,255,.22);
  transition:background .12s;margin-left:12px;
}
.btn-cta-ghost:hover{background:rgba(255,255,255,.2)}

/* ─── Footer ────────────────────────────────────────────────────── */
.mkt-footer{
  border-top:1px solid var(--mk-line);
  padding:48px 24px 32px;
  margin-top:80px;
  background:var(--mk-bg);
}
.mkt-footer-inner{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:220px repeat(3,1fr);gap:40px;
}
.mkt-footer-brand{display:flex;flex-direction:column;gap:10px}
.mkt-footer-brand .mkt-flogo{
  font-size:16px;font-weight:800;letter-spacing:-0.4px;
  display:flex;align-items:center;gap:7px;color:var(--mk-txt);
}
.mkt-footer-brand .mkt-flogo-icon{
  width:24px;height:24px;background:#0A0A0A;
  border-radius:6px;display:inline-flex;align-items:center;
  justify-content:center;font-size:10px;color:#fff;font-weight:900;
}
[data-theme=dark] .mkt-footer-brand .mkt-flogo-icon{background:#F2F2F2;color:#0A0A0A}
.mkt-footer-brand p{font-size:12.5px;color:var(--mk-mut);line-height:1.5;margin:0}
.mkt-footer-col h4{
  font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--mk-mut);margin:0 0 14px;
}
.mkt-footer-col a{
  display:block;font-size:13.5px;color:var(--mk-txt-2);
  margin-bottom:9px;transition:color .12s;
}
.mkt-footer-col a:hover{color:var(--mk-txt)}
.mkt-footer-bottom{
  max-width:1180px;margin:32px auto 0;padding-top:20px;
  border-top:1px solid var(--mk-line);
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--mk-faint);
}

/* ─── Step list (how-it-works) ──────────────────────────────────── */
.mk-step-list{display:flex;flex-direction:column;position:relative}
.mk-step-list::before{
  content:'';position:absolute;left:28px;top:56px;bottom:56px;
  width:2px;background:var(--mk-cobalt);opacity:.18;
}
.mk-step-item{
  display:flex;gap:24px;align-items:flex-start;
  padding:24px 0;position:relative;z-index:1;
}
.mk-step-icon{
  width:56px;height:56px;flex-shrink:0;
  background:var(--mk-panel);border:2px solid var(--mk-line);
  border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:22px;
}
.mk-step-num{
  font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--mk-cobalt);margin-bottom:6px;
}
.mk-step-title{font-size:18px;font-weight:700;margin:0 0 8px;letter-spacing:-0.02em;color:var(--mk-txt)}
.mk-step-desc{font-size:14px;color:var(--mk-txt-2);line-height:1.6;margin:0;max-width:560px}

/* ─── Checklist ─────────────────────────────────────────────────── */
.mk-checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.mk-checklist li{font-size:14px;color:var(--mk-txt-2);display:flex;gap:10px;align-items:flex-start}
.mk-checklist li .ck{color:var(--mk-green);font-weight:700;flex-shrink:0;margin-top:1px}

/* ─── Split content block ───────────────────────────────────────── */
.mk-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.mk-split.rev{direction:rtl}
.mk-split.rev>*{direction:ltr}

/* ─── Feature panel (alternating) ──────────────────────────────── */
.mk-feat-panel{
  background:var(--mk-panel-2);
  border:1px solid var(--mk-line);
  border-radius:20px;padding:44px;
  text-align:center;
}

/* ─── Info card (contact page) ──────────────────────────────────── */
.mk-info-card{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--mk-panel);border:1px solid var(--mk-line);
  border-radius:16px;padding:22px 20px;
  box-shadow:var(--mk-shadow);transition:border-color .2s;
}
.mk-info-card:hover{border-color:var(--mk-cobalt)}

/* ─── Form inputs ───────────────────────────────────────────────── */
.mk-input{
  width:100%;padding:10px 14px;
  border-radius:9px;border:1px solid var(--mk-line);
  background:var(--mk-panel-2);color:var(--mk-txt);
  font-size:14px;outline:none;font-family:inherit;
}
.mk-input:focus{border-color:var(--mk-cobalt)}
.mk-label{
  font-size:11.5px;font-weight:700;color:var(--mk-txt-2);
  letter-spacing:.5px;text-transform:uppercase;
  display:block;margin-bottom:6px;
}
.mk-textarea{
  width:100%;padding:10px 14px;
  border-radius:9px;border:1px solid var(--mk-line);
  background:var(--mk-panel-2);color:var(--mk-txt);
  font-size:14px;outline:none;font-family:inherit;
  resize:vertical;line-height:1.5;
}
.mk-textarea:focus{border-color:var(--mk-cobalt)}

/* ─── Pricing specific ──────────────────────────────────────────── */
.pk-wrap{max-width:1180px;margin:0 auto;padding:56px 24px 80px}
.pk-head{text-align:center;margin-bottom:36px}
.pk-kick{
  font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--mk-cobalt);font-weight:700;margin-bottom:12px;
}
.pk-head h1{
  font-size:clamp(32px,4vw,48px);font-weight:800;
  letter-spacing:-0.025em;margin:0 0 12px;color:var(--mk-txt);
}
.pk-head h1 em{font-style:italic}
.pk-head p{font-size:16px;color:var(--mk-mut);max-width:620px;margin:0 auto;line-height:1.5}
.pk-free{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:18px;font-size:13px;font-weight:600;
  color:var(--mk-green);background:var(--mk-green-soft);
  padding:7px 14px;border-radius:20px;
}
.pk-toggle{
  display:inline-flex;background:var(--mk-panel);
  border:1px solid var(--mk-line-strong);
  border-radius:10px;padding:4px;margin:26px auto 0;gap:2px;
}
.pk-toggle button{
  border:none;background:none;font-size:13.5px;font-weight:650;
  padding:8px 18px;border-radius:7px;cursor:pointer;
  color:var(--mk-mut);font-family:inherit;
}
.pk-toggle button.on{background:#0A0A0A;color:#fff}
[data-theme=dark] .pk-toggle button.on{background:#F2F2F2;color:#0A0A0A}
.pk-save{font-size:11px;color:var(--mk-green);font-weight:700;margin-left:2px}
.pk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:36px 0 60px}
.pk-card{
  background:var(--mk-panel);border:1px solid var(--mk-line);
  border-radius:18px;padding:26px 22px;
  display:flex;flex-direction:column;position:relative;
  box-shadow:var(--mk-shadow);
}
.pk-card.featured{border:2px solid #0A0A0A}
[data-theme=dark] .pk-card.featured{border-color:#F2F2F2}
.pk-badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:#0A0A0A;color:#fff;
  font-size:11px;font-weight:700;padding:4px 12px;
  border-radius:6px;white-space:nowrap;
}
[data-theme=dark] .pk-badge{background:#F2F2F2;color:#0A0A0A}
.pk-name{font-size:19px;font-weight:700;margin-bottom:4px;color:var(--mk-txt)}
.pk-tag{font-size:12.5px;color:var(--mk-mut);min-height:50px;line-height:1.4}
.pk-price{margin-top:8px}
.pk-amt{font-size:34px;font-weight:800;letter-spacing:-1px;color:var(--mk-txt)}
.pk-per{font-size:14px;font-weight:600;color:var(--mk-mut)}
.pk-sub{font-size:11.5px;color:var(--mk-faint);margin-bottom:16px;min-height:16px}
.pk-allot{
  display:flex;flex-direction:column;gap:6px;font-size:12.5px;
  color:var(--mk-txt-2);padding:14px 0;
  border-top:1px solid var(--mk-line);border-bottom:1px solid var(--mk-line);
  margin-bottom:16px;
}
.pk-allot b{color:var(--mk-txt)}
.pk-feat{
  list-style:none;padding:0;margin:0 0 22px;
  display:flex;flex-direction:column;gap:9px;flex:1;
}
.pk-feat li{
  font-size:12.5px;line-height:1.4;
  padding-left:22px;position:relative;color:var(--mk-txt-2);
}
.pk-feat li::before{
  content:"✓";position:absolute;left:0;
  color:var(--mk-green);font-weight:700;
}
.pk-btn{
  display:block;text-align:center;padding:11px;
  border-radius:9px;border:1px solid var(--mk-line-strong);
  background:var(--mk-panel);color:var(--mk-txt);
  font-weight:650;font-size:13.5px;text-decoration:none;
  transition:border-color .12s;font-family:inherit;cursor:pointer;
}
.pk-btn:hover{border-color:var(--mk-cobalt)}
.pk-btn.pri{background:#0A0A0A;border:none;color:#fff}
.pk-btn.pri:hover{background:#1A1A1A}
[data-theme=dark] .pk-btn.pri{background:#F2F2F2;color:#0A0A0A}
[data-theme=dark] .pk-btn.pri:hover{background:#DDDDDD}
.pk-matrix-title{
  text-align:center;font-size:24px;font-weight:750;
  letter-spacing:-0.5px;margin:0 0 24px;color:var(--mk-txt);
}
.pk-matrix{
  width:100%;border-collapse:collapse;background:var(--mk-panel);
  border:1px solid var(--mk-line);border-radius:16px;overflow:hidden;
}
.pk-matrix th,.pk-matrix td{
  padding:13px 16px;text-align:center;
  font-size:13px;border-bottom:1px solid var(--mk-line);
}
.pk-matrix th{
  background:var(--mk-panel-2);font-weight:700;font-size:13.5px;color:var(--mk-txt);
}
.pk-matrix th.hl,.pk-matrix td.hl{background:rgba(44,44,224,.06)}
[data-theme=dark] .pk-matrix th.hl,[data-theme=dark] .pk-matrix td.hl{background:rgba(64,64,240,.12)}
.pk-matrix td.ft{text-align:left;font-weight:600;color:var(--mk-txt-2)}
.pk-matrix td{color:var(--mk-txt)}
.pk-matrix tr:last-child td{border-bottom:none}
.pk-foot{text-align:center;margin-top:40px;color:var(--mk-mut);font-size:13px}
.pk-foot a{color:var(--mk-cobalt);text-decoration:none;font-weight:600}

/* ─── Responsive ────────────────────────────────────────────────── */
@media(max-width:900px){
  .mk-hero{grid-template-columns:1fr;gap:40px;padding:56px 24px 48px}
  .mk-hero-panel{display:none}
  .mkt-nav .mkt-links{display:none}
  .mk-card-grid.cols-3,.mk-card-grid.cols-4{grid-template-columns:1fr 1fr}
  .mkt-footer-inner{grid-template-columns:1fr 1fr}
  .mk-cta-band{margin:48px 24px;padding:48px 32px}
  .mk-split{grid-template-columns:1fr;gap:32px}
  .mk-split.rev{direction:ltr}
  .pk-grid{grid-template-columns:1fr 1fr}
  .pk-matrix{font-size:11px;display:block;overflow-x:auto}
  .mk-cobalt-band,.mk-trust-band{padding:56px 24px}
}
@media(max-width:540px){
  .mk-card-grid.cols-2,.mk-card-grid.cols-3,.mk-card-grid.cols-4{grid-template-columns:1fr}
  .mkt-footer-inner{grid-template-columns:1fr}
  .mk-cta-band{padding:36px 24px;margin:40px 16px}
  .mk-cta-band h2{font-size:26px}
  .btn-cta-ghost{margin:10px 0 0;display:block}
  .mk-hero-btns{flex-direction:column}
  .pk-grid{grid-template-columns:1fr}
  .mk-stats-inner{flex-wrap:wrap}
  .mk-stat-div{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   MOTION LAYER — scroll choreography, entrance, micro-interactions.
   Classes toggled by /motion.js. Everything degrades to visible if JS
   is off (see .no-js note) and is disabled under reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --mk-ease:cubic-bezier(.16,.84,.44,1);        /* smooth, slightly overshooting settle */
  --mk-ease-out:cubic-bezier(.22,1,.36,1);
}

/* Scroll-reveal: start slightly down + faded, settle when .mk-in added */
.mk-reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--mk-ease-out),transform .7s var(--mk-ease-out);
  transition-delay:var(--mk-delay,0ms);
  will-change:opacity,transform;
}
.mk-reveal.mk-in{opacity:1;transform:none}

/* Hero entrance: elements start hidden; parent gets .mk-hero-ready to play */
.mk-enter{opacity:0;transform:translateY(20px)}
.mk-hero-ready .mk-enter{
  opacity:1;transform:none;
  transition:opacity .8s var(--mk-ease-out),transform .8s var(--mk-ease-out);
  transition-delay:var(--mk-delay,0ms);
}
/* the cobalt panel drifts in from the right for extra life */
.mk-hero-ready .mk-hero-panel.mk-enter{transform:none}
.mk-hero-panel.mk-enter{transform:translateY(20px) scale(.985)}

/* Richer card hover — lift + shadow bloom + chip pop */
.mk-card{transition:border-color .25s var(--mk-ease),transform .35s var(--mk-ease),box-shadow .35s var(--mk-ease)}
.mk-card:hover{transform:translateY(-6px);box-shadow:var(--mk-shadow-md);border-color:var(--mk-line-strong)}
.mk-chip{transition:transform .35s var(--mk-ease)}
.mk-card:hover .mk-chip{transform:scale(1.08) rotate(-3deg)}

/* Pricing card hover */
.pcard{transition:transform .35s var(--mk-ease),box-shadow .35s var(--mk-ease),border-color .25s var(--mk-ease)}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--mk-shadow-md)}

/* Buttons — spring press + subtle rise */
.btn-primary,.btn-secondary,.pbtn{transition:background .18s var(--mk-ease),transform .18s var(--mk-ease),box-shadow .18s var(--mk-ease)}
.btn-primary:hover,.pbtn.pri:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(10,10,10,.5)}
.btn-primary:active,.btn-secondary:active,.pbtn:active{transform:translateY(0) scale(.98)}

/* Nav links underline grow */
.mk-links a{position:relative}
.mk-links a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--mk-cobalt);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--mk-ease)}
.mk-links a:hover::after,.mk-links a.active::after{transform:scaleX(1)}

/* Live glow orbiting inside the cobalt hero panel */
.mk-hero-panel::before{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  top:-120px;right:-100px;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);
  animation:mk-float 9s ease-in-out infinite;pointer-events:none;
}
.mk-hero-panel::after{
  content:"";position:absolute;width:260px;height:260px;border-radius:50%;
  bottom:-110px;left:-80px;
  background:radial-gradient(circle,rgba(230,0,155,.28),transparent 70%);
  animation:mk-float 11s ease-in-out infinite reverse;pointer-events:none;
}
@keyframes mk-float{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-24px,20px)}
}

/* Preview card gently floats + the CTA shimmers */
.mk-preview-card{animation:mk-bob 6s ease-in-out infinite;position:relative;z-index:1}
@keyframes mk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.mk-preview-btn{position:relative;overflow:hidden}
.mk-preview-btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);animation:mk-shimmer 3.2s ease-in-out infinite;
}
@keyframes mk-shimmer{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}

/* Stat numbers get a tabular feel while counting */
.mk-stat-num{font-variant-numeric:tabular-nums}

/* Honor user preference — kill all motion */
@media (prefers-reduced-motion: reduce){
  .mk-reveal,.mk-enter{opacity:1!important;transform:none!important;transition:none!important}
  .mk-hero-panel::before,.mk-hero-panel::after,.mk-preview-card,.mk-preview-btn::after{animation:none!important}
  .mk-card:hover,.pcard:hover,.btn-primary:hover{transform:none!important}
}

/* ═══════════════════════════════════════════════════════════════════
   BENTO GRID — realistic mini product-UI tiles (Chatbase-style "suite")
   Replaces emoji feature cards with believable mock interfaces.
   ═══════════════════════════════════════════════════════════════════ */
.mk-bento{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:repeat(6,1fr);gap:16px;
  align-items:stretch;
}
.bento{
  grid-column:span 3;
  background:var(--mk-panel);border:1px solid var(--mk-line);
  border-radius:20px;padding:26px 26px 0;
  box-shadow:var(--mk-shadow);overflow:hidden;position:relative;
  display:flex;flex-direction:column;min-height:0;
  transition:transform .35s var(--mk-ease),box-shadow .35s var(--mk-ease),border-color .25s var(--mk-ease);
}
.bento:hover{transform:translateY(-4px);box-shadow:var(--mk-shadow-md);border-color:var(--mk-line-strong)}
.bento.span2{grid-column:span 2}
.bento.span6{grid-column:span 6}
.bento-hd{font-size:16px;line-height:1.45;font-weight:500;color:var(--mk-mut);margin-bottom:20px;letter-spacing:-0.01em}
.bento-hd b{color:var(--mk-txt);font-weight:800}
/* the mock UI floats at the bottom, slightly clipped for depth like the reference */
.bento-ui{margin-top:auto;position:relative}

/* ── Mock: contact CRM table ─────────────────────────────────────── */
.mk-mtable{background:var(--mk-bg-alt);border:1px solid var(--mk-line);border-radius:12px 12px 0 0;border-bottom:none;overflow:hidden}
.mk-mtable-hd{display:grid;grid-template-columns:60px 1fr 70px;gap:8px;padding:11px 14px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--mk-faint);border-bottom:1px solid var(--mk-line);background:var(--mk-panel-2)}
.mk-mrow{display:grid;grid-template-columns:60px 1fr 70px;gap:8px;padding:11px 14px;align-items:center;border-bottom:1px solid var(--mk-line);font-size:12.5px}
.mk-mrow:last-child{border-bottom:none}
.mk-mrow .who{font-weight:650;color:var(--mk-txt)}
.mk-mrow .sub{font-size:11px;color:var(--mk-mut)}
.mk-tag{font-size:9px;font-weight:800;letter-spacing:.3px;padding:3px 6px;border-radius:5px;text-transform:uppercase;display:inline-block;text-align:center}
.mk-tag.email{background:var(--mk-cobalt-soft);color:var(--mk-cobalt)}
.mk-tag.both{background:var(--mk-green-soft);color:var(--mk-green)}
.mk-tag.new{background:var(--mk-magenta-soft);color:var(--mk-magenta)}
.mk-av{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
/* small stat bar under a mock UI to balance tile height + add proof */
.mk-ui-foot{display:flex;align-items:center;justify-content:space-between;background:var(--mk-bg-alt);border:1px solid var(--mk-line);border-top:none;border-radius:0 0 12px 12px;padding:10px 14px;font-size:11px;color:var(--mk-mut);font-weight:600}
.mk-ui-foot b{color:var(--mk-txt);font-weight:800}

/* ── Mock: photo gallery match ───────────────────────────────────── */
.mk-mgal-top{display:flex;align-items:center;gap:8px;background:var(--mk-bg-alt);border:1px solid var(--mk-line);border-radius:10px;padding:9px 12px;margin-bottom:12px}
.mk-mgal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:var(--mk-bg-alt);border:1px solid var(--mk-line);border-bottom:none;border-radius:12px 12px 0 0;padding:14px}
.mk-mthumb{aspect-ratio:1;border-radius:8px;position:relative;overflow:hidden}
.mk-mchk{position:absolute;top:4px;right:4px;width:15px;height:15px;border-radius:50%;background:var(--mk-green);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:900}

/* ── Mock: sponsor ROI chart ─────────────────────────────────────── */
.mk-mchart{background:var(--mk-bg-alt);border:1px solid var(--mk-line);border-bottom:none;border-radius:12px 12px 0 0;padding:16px 16px 0}
.mk-mchart-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.mk-mchart-big{font-size:24px;font-weight:850;letter-spacing:-0.02em;color:var(--mk-txt)}
.mk-mchart-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--mk-mut)}
.mk-mchart svg{display:block;width:100%;height:70px}
.mk-mchip{font-size:10px;font-weight:800;color:#fff;background:#0A0A0A;border-radius:6px;padding:3px 8px}
[data-theme=dark] .mk-mchip{background:#F2F2F2;color:#0A0A0A}

/* ── Mock: print-on-demand products ──────────────────────────────── */
.mk-mprods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mk-mprod{background:var(--mk-bg-alt);border:1px solid var(--mk-line);border-radius:11px;padding:12px;text-align:center}
.mk-mprod-img{height:72px;border-radius:8px;background-color:#fff;margin-bottom:8px}
.mk-mprod .nm{font-size:11px;font-weight:650;color:var(--mk-txt)}
.mk-mprod .pr{font-size:11px;font-weight:800;color:var(--mk-cobalt);margin-top:2px}

/* ── Mock: integrations icon grid ────────────────────────────────── */
.mk-mints{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mk-mint{background:var(--mk-bg-alt);border:1px solid var(--mk-line);border-radius:12px;height:54px;display:flex;align-items:center;justify-content:center;transition:transform .3s var(--mk-ease),border-color .2s}
.mk-mint:hover{transform:translateY(-3px);border-color:var(--mk-line-strong)}
.mk-mint span{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#fff;letter-spacing:-0.5px}

/* ── Mock: white-label / brand swap ──────────────────────────────── */
.mk-mbrand{display:flex;flex-direction:column;gap:10px}
.mk-mbrand-row{display:flex;align-items:center;gap:10px;background:var(--mk-bg-alt);border:1px solid var(--mk-line);border-radius:11px;padding:11px 13px}
.mk-mbrand-logo{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#fff}
.mk-mbrand-row .nm{font-size:12.5px;font-weight:700;color:var(--mk-txt)}
.mk-mbrand-row .u{font-size:10.5px;color:var(--mk-mut)}
.mk-mbrand-row .on{margin-left:auto;font-size:9px;font-weight:800;text-transform:uppercase;color:var(--mk-green);background:var(--mk-green-soft);padding:3px 7px;border-radius:5px}

.mk-bar{height:8px;border-radius:4px;background:var(--mk-line)}

/* ═══════════════════════════════════════════════════════════════════
   HERO SELF-PLAYING DEMO — selfie → face-match → gallery, looping.
   Phases stack; #mkDemo[data-phase] shows the active one. JS in motion.js.
   ═══════════════════════════════════════════════════════════════════ */
.mk-preview-card#mkDemo{padding:0;overflow:hidden;position:relative}
.mk-demo-hd{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid #EEE}
.mk-demo-dot{width:9px;height:9px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.15);flex-shrink:0}
.mk-demo-title{font-size:12.5px;font-weight:800;color:#0A0A0A;letter-spacing:-0.01em}
.mk-demo-step{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#9B9B9B}
/* Phase STAGE — one fixed-height box; phases are absolutely stacked inside it so
   switching phases NEVER changes the card height (no layout jump). Height fits the
   tallest phase (phase 3, the 3×3 gallery). */
.mk-demo-stage{position:relative;height:436px}
/* Cross-DISSOLVE: phases stay mounted and overlap during the swap. The incoming
   phase leads (no delay, soft ease-out), the outgoing lags a touch slower so there's
   never a blank gap or hard cut — the Chatbase "buttery" feel. */
.mk-preview-card#mkDemo .mk-phase{position:absolute;inset:0;display:flex;padding:20px 18px;flex-direction:column;box-sizing:border-box;
  opacity:0;transform:translateY(8px) scale(.992);pointer-events:none;
  transition:opacity .62s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform}
.mk-preview-card#mkDemo[data-phase="1"] .mk-phase-1,
.mk-preview-card#mkDemo[data-phase="2"] .mk-phase-2,
.mk-preview-card#mkDemo[data-phase="3"] .mk-phase-3,
.mk-preview-card#mkDemo[data-phase="4"] .mk-phase-4,
.mk-preview-card#mkDemo[data-phase="5"] .mk-phase-5{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .82s cubic-bezier(.22,1,.36,1), transform .82s cubic-bezier(.22,1,.36,1)}

/* ── Tap cursor: a fingertip that glides to the CTA and presses it (phase 1) ── */
.mk-tap{position:absolute;z-index:6;left:50%;bottom:30px;width:26px;height:26px;margin-left:-13px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.55),rgba(10,10,10,.30) 60%,rgba(10,10,10,.42));
  border:1.5px solid rgba(255,255,255,.85);box-shadow:0 4px 12px rgba(0,0,0,.28);
  opacity:0;pointer-events:none}
.mk-preview-card#mkDemo[data-phase="1"] .mk-phase-1 .mk-tap{animation:mk-tap-glide 3.6s cubic-bezier(.4,0,.2,1)}
@keyframes mk-tap-glide{
  0%{opacity:0;transform:translate(64px,54px) scale(1.5)}
  12%{opacity:1}
  42%{transform:translate(0,0) scale(1)}
  64%{transform:translate(0,0) scale(1)}
  71%{transform:translate(0,0) scale(.7)}
  80%{transform:translate(0,0) scale(1)}
  100%{opacity:1;transform:translate(0,0) scale(1)}}
/* CTA reacts to the tap: a quick press + a ripple ringing out from the touch point */
.mk-preview-card#mkDemo[data-phase="1"] .mk-phase-1 .mk-demo-cta{animation:mk-cta-press 3.6s cubic-bezier(.4,0,.2,1)}
@keyframes mk-cta-press{0%,68%{transform:none}73%{transform:scale(.965)}82%{transform:none}100%{transform:none}}
.mk-demo-cta::before{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);opacity:0;pointer-events:none}
.mk-preview-card#mkDemo[data-phase="1"] .mk-phase-1 .mk-demo-cta::before{animation:mk-cta-ripple 3.6s cubic-bezier(.16,1,.3,1)}
@keyframes mk-cta-ripple{0%,69%{transform:scale(0);opacity:0}72%{opacity:.6}73%{transform:scale(.4)}100%{transform:scale(9);opacity:0}}

/* ── Continuity taps: phase 3 presses the download CTA; phase 4 scrolls then clicks download ── */
.mk-tap-3{bottom:34px}
.mk-preview-card#mkDemo[data-phase="3"] .mk-phase-3 .mk-tap-3{animation:mk-tap-glide 4.6s cubic-bezier(.4,0,.2,1) .4s both}
/* phase 4 finger: waits through the scroll down + back up, then glides onto the download
   button and clicks it (the download toast then appears). Positioned over the button. */
.mk-tap-4{top:150px;bottom:auto;left:50%;margin-left:-13px}
.mk-preview-card#mkDemo[data-phase="4"] .mk-phase-4 .mk-tap-4{animation:mk-tap-click 9s linear both}
@keyframes mk-tap-click{
  0%,58%{opacity:0;transform:translate(26px,-18px) scale(1.4)}
  63%{opacity:1;transform:translate(4px,-4px) scale(1)}
  67%{opacity:1;transform:translate(0,0) scale(1)}
  70%{transform:translate(0,0) scale(.72)}
  74%{transform:translate(0,0) scale(1)}
  82%{opacity:1;transform:translate(0,0) scale(1)}
  90%,100%{opacity:0;transform:translate(0,0) scale(1)}}
/* Buttons react to their tap with a quick press */
.mk-preview-card#mkDemo[data-phase="3"] .mk-phase-3 .mk-gal-cta{animation:mk-cta-press 4.6s cubic-bezier(.4,0,.2,1) .4s both}
.mk-preview-card#mkDemo[data-phase="4"] .mk-phase-4 .mk-hub-btn.primary{animation:mk-bts-slide .5s cubic-bezier(.16,1,.3,1) .20s both, mk-dl-press 9s linear both}
@keyframes mk-dl-press{0%,68%{transform:none}71%{transform:scale(.965)}75%{transform:none}100%{transform:none}}

/* Phase 1 — selfie capture */
.mk-demo-selfie{position:relative;background:#F4F4F2;border:1.5px dashed #DADADA;border-radius:12px;padding:22px 16px;text-align:center;overflow:hidden;margin-bottom:12px}
.mk-selfie-photo{position:relative;width:112px;height:112px;margin:0 auto 10px;border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.mk-selfie-photo img{width:100%;height:100%;object-fit:cover;display:block}
.mk-demo-hint{font-size:11.5px;color:#888;font-weight:600}
.mk-scan{position:absolute;left:0;right:0;height:32px;top:-32px;background:linear-gradient(180deg,transparent,rgba(44,44,224,.45),transparent);animation:mk-scanline 2s ease-in-out infinite}
@keyframes mk-scanline{0%{top:-32px}100%{top:100%}}
.mk-demo-field{background:#F4F4F2;border-radius:9px;padding:9px 13px;display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.mk-demo-flabel{font-size:9.5px;font-weight:700;color:#888;letter-spacing:.5px;text-transform:uppercase}
.mk-demo-fval{font-size:13px;color:#0A0A0A;font-weight:600;display:flex;align-items:center}
.mk-caret{display:inline-block;width:1.5px;height:13px;background:#2C2CE0;margin-left:1px;animation:mk-blink 1s step-end infinite}
@keyframes mk-blink{50%{opacity:0}}
.mk-demo-cta{background:#0A0A0A;color:#fff;border-radius:9px;padding:11px;text-align:center;font-size:13px;font-weight:700;margin-top:auto;position:relative;overflow:hidden}
.mk-demo-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:mk-shimmer 3s ease-in-out infinite}

/* Phase 2 — matching */
.mk-phase-2{align-items:center;justify-content:center;text-align:center}
.mk-match-ring{width:88px;height:88px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.mk-match-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid #EEF0FF;border-top-color:#2C2CE0;animation:mk-spin .9s linear infinite}
.mk-match-face{font-size:40px}
@keyframes mk-spin{to{transform:rotate(360deg)}}
.mk-match-txt{font-size:13.5px;color:#5B5B5B;line-height:1.5;margin-bottom:16px}
.mk-match-txt b{color:#0A0A0A;font-weight:800}
.mk-match-bar{width:100%;height:6px;border-radius:3px;background:#EEE;overflow:hidden}
.mk-match-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#2C2CE0,#E6009B);border-radius:3px}
.mk-preview-card#mkDemo[data-phase="2"] .mk-phase-2 .mk-match-bar span{animation:mk-fill 1.9s var(--mk-ease-out) forwards}
@keyframes mk-fill{to{width:100%}}

/* Phase 3 — gallery */
.mk-gal-hd{font-size:13px;color:#0A0A0A;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:7px}
.mk-gal-hd b{font-weight:800}
.mk-gal-check{width:18px;height:18px;border-radius:50%;background:#16A34A;color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mk-gal-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:84px;gap:8px;margin-bottom:12px}
.mk-gal-t{border-radius:9px;opacity:0;transform:scale(.85)}
/* Staggered pop only fires when phase 3 is actually revealed (restarts each loop) */
.mk-preview-card#mkDemo[data-phase="3"] .mk-phase-3 .mk-gal-t{animation-name:mk-pop;animation-duration:.5s;animation-timing-function:var(--mk-ease);animation-fill-mode:both}
.mk-gal-t:nth-child(1){animation-delay:.12s}.mk-gal-t:nth-child(2){animation-delay:.17s}.mk-gal-t:nth-child(3){animation-delay:.22s}
.mk-gal-t:nth-child(4){animation-delay:.27s}.mk-gal-t:nth-child(5){animation-delay:.32s}.mk-gal-t:nth-child(6){animation-delay:.37s}
.mk-gal-t:nth-child(7){animation-delay:.42s}.mk-gal-t:nth-child(8){animation-delay:.47s}.mk-gal-t:nth-child(9){animation-delay:.52s}
@keyframes mk-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.mk-gal-cta{background:#0A0A0A;color:#fff;border-radius:9px;padding:11px;text-align:center;font-size:13px;font-weight:750;margin-top:auto;position:relative;overflow:hidden}
.mk-gal-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);animation:mk-shimmer 3s ease-in-out infinite}

/* ── Caption strip: one clear line telling you what each frame is ──── */
.mk-cap{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--mk-mut);margin-bottom:14px;line-height:1.3}
.mk-cap-k{font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:#fff;background:#0A0A0A;padding:3px 8px;border-radius:20px;flex-shrink:0}
.mk-cap-k.free{background:#16A34A}
.mk-cap-k.wl{background:linear-gradient(135deg,#7C3AED,#A855F7)}
.mk-cap-k.on{background:linear-gradient(135deg,#2C2CE0,#E6009B)}
[data-theme=dark] .mk-cap-k{background:#F2F2F2;color:#0A0A0A}
[data-theme=dark] .mk-cap-k.free{background:#16A34A;color:#fff}
[data-theme=dark] .mk-cap-k.wl{color:#fff}
[data-theme=dark] .mk-cap-k.on{color:#fff}
.mk-cap em{font-style:normal;font-weight:800;color:var(--mk-txt)}

/* ── Phase 4 — WHITE-LABEL branded page: compact opt-in, auto-scrolls to event links ── */
.mk-phase-4{gap:0}
/* The phone viewport: fixed height, clips; inner content is taller and scrolls. */
.mk-hub{flex:1;position:relative;background:linear-gradient(180deg,rgba(124,58,237,.10),rgba(124,58,237,0) 120px),var(--mk-bg-alt);border:1px solid var(--mk-line);border-radius:16px;overflow:hidden}
.mk-hub-scroll{display:flex;flex-direction:column;gap:9px;padding:15px 14px 12px}
.mk-preview-card#mkDemo[data-phase="4"] .mk-phase-4 .mk-hub-scroll{animation:mk-hub-scroll 9s cubic-bezier(.65,0,.35,1) both}
/* Reveal opt-in, glide down to the "Your event links" stack, hold, then scroll back up to the download button. */
@keyframes mk-hub-scroll{0%,28%{transform:translateY(0)}44%,58%{transform:translateY(-150px)}70%,100%{transform:translateY(0)}}
.mk-hub-top{display:flex;align-items:center;gap:10px}
.mk-hub-logo{width:38px;height:38px;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff;background:linear-gradient(135deg,#7C3AED,#C026D3);box-shadow:0 5px 13px rgba(124,58,237,.3)}
.mk-hub-name{font-size:14.5px;font-weight:850;letter-spacing:-.02em;color:var(--mk-txt);line-height:1.15}
.mk-hub-sub{font-size:11px;font-weight:600;color:var(--mk-mut);margin-top:1px}
/* compact opt-in */
.mk-optin{display:flex;flex-direction:column;gap:8px}
.mk-optin-field{display:flex;align-items:center;justify-content:space-between;background:var(--mk-panel);border:1px solid var(--mk-line-strong,var(--mk-line));border-radius:9px;padding:10px 12px}
.mk-optin-val{font-size:12.5px;font-weight:650;color:var(--mk-txt)}
.mk-optin-ok{width:18px;height:18px;border-radius:50%;background:#16A34A;color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mk-optin-consent{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;color:var(--mk-txt-2);line-height:1.3}
.mk-optin-check{width:15px;height:15px;flex-shrink:0;border-radius:5px;background:#7C3AED;color:#fff;font-size:9px;font-weight:900;display:flex;align-items:center;justify-content:center}
.mk-hub-btn{border-radius:11px;padding:12px;text-align:center;font-size:13px;font-weight:800;background:var(--mk-panel);border:1px solid var(--mk-line);color:var(--mk-txt)}
.mk-hub-btn.primary{background:linear-gradient(135deg,#7C3AED,#C026D3);border:none;color:#fff;position:relative;overflow:hidden;box-shadow:0 6px 16px rgba(124,58,237,.28)}
.mk-hub-btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:mk-shimmer 3s ease-in-out infinite}
/* "Your event links" — linktree stack */
.mk-links-hd{display:flex;align-items:center;gap:9px;margin-top:4px}
.mk-links-hd span{font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--mk-faint);white-space:nowrap}
.mk-links-hd::before,.mk-links-hd::after{content:"";height:1px;flex:1;background:var(--mk-line)}
.mk-hub-link{display:flex;align-items:center;gap:9px;border-radius:10px;padding:11px 12px;font-size:12px;font-weight:700;background:var(--mk-panel);border:1px solid var(--mk-line);color:var(--mk-txt-2)}
.mk-hub-lico{font-size:13px;flex-shrink:0}
.mk-hub-foot{text-align:center;font-size:10px;font-weight:600;color:var(--mk-faint);margin-top:4px;padding-top:2px}
.mk-hub-foot b{font-weight:850;color:var(--mk-txt-2)}
/* soft fade at the bottom edge so scrolled content slips under cleanly */
.mk-hub::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(180deg,transparent,var(--mk-bg-alt));pointer-events:none;z-index:3}
/* scroll cue: a bouncing chevron that hints the page scrolls, fades once scrolling begins */
.mk-scroll-cue{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:4;width:24px;height:24px;border-radius:50%;background:var(--mk-panel);border:1px solid var(--mk-line);color:var(--mk-mut);font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.12);opacity:0}
.mk-preview-card#mkDemo[data-phase="4"] .mk-phase-4 .mk-scroll-cue{animation:mk-cue-in .3s ease .6s both, mk-cue-bob 1s ease-in-out .9s 2, mk-cue-fade .4s ease 2.3s both}
@keyframes mk-cue-in{from{opacity:0}to{opacity:1}}
@keyframes mk-cue-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(4px)}}
@keyframes mk-cue-fade{to{opacity:0}}
/* scrim behind the download toast: a modal backdrop so the toast reads as an overlay, not a slice */
.mk-dl-scrim{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:rgba(12,10,24,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.mk-preview-card#mkDemo[data-phase="4"] .mk-phase-4 .mk-dl-scrim{animation:mk-scrim-in .45s ease 6.5s both}
@keyframes mk-scrim-in{from{opacity:0}to{opacity:1}}
/* file-download toast: fades up as a centered modal card after the download click (~70% of 9s) */
.mk-dl-toast{position:absolute;left:16px;right:16px;top:50%;z-index:5;display:flex;align-items:center;gap:10px;background:var(--mk-panel);border:1px solid var(--mk-line);border-radius:12px;padding:12px 13px;box-shadow:0 12px 34px rgba(0,0,0,.28);opacity:0;transform:translateY(calc(-50% + 16px))}
.mk-preview-card#mkDemo[data-phase="4"] .mk-phase-4 .mk-dl-toast{animation:mk-dl-in .45s cubic-bezier(.16,1,.3,1) 6.5s both}
@keyframes mk-dl-in{from{opacity:0;transform:translateY(calc(-50% + 16px))}to{opacity:1;transform:translateY(-50%)}}
.mk-dl-ico{width:30px;height:30px;flex-shrink:0;border-radius:8px;background:linear-gradient(135deg,#7C3AED,#C026D3);color:#fff;font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center}
.mk-dl-body{flex:1;min-width:0}
.mk-dl-name{font-size:11.5px;font-weight:750;color:var(--mk-txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-dl-size{font-weight:600;color:var(--mk-mut)}
.mk-dl-bar{height:4px;border-radius:2px;background:var(--mk-line);overflow:hidden;margin-top:6px}
.mk-dl-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#7C3AED,#C026D3);border-radius:2px}
.mk-preview-card#mkDemo[data-phase="4"] .mk-phase-4 .mk-dl-bar span{animation:mk-dl-fill 1.6s ease-out 6.7s both}
@keyframes mk-dl-fill{to{width:100%}}
.mk-dl-check{width:20px;height:20px;flex-shrink:0;border-radius:50%;background:#16A34A;color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;opacity:0}
.mk-preview-card#mkDemo[data-phase="4"] .mk-phase-4 .mk-dl-check{animation:mk-dl-done .3s ease 8.3s both}
@keyframes mk-dl-done{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
/* the whole card fades in on reveal */
.mk-hub-scroll>*{opacity:0}
.mk-preview-card#mkDemo[data-phase="4"] .mk-phase-4 .mk-hub-scroll>*{animation:mk-bts-slide .5s cubic-bezier(.16,1,.3,1) both}
.mk-hub-scroll>*:nth-child(1){animation-delay:.06s}.mk-hub-scroll>*:nth-child(2){animation-delay:.13s}.mk-hub-scroll>*:nth-child(3){animation-delay:.20s}.mk-hub-scroll>*:nth-child(n+4){animation-delay:.27s}

/* ── Phase 5 — THE GOLDMINE: contact lifts into list, faces pipe in, counter climbs ── */
.mk-phase-5{gap:0}
.mk-cl{flex:1;display:flex;flex-direction:column;background:var(--mk-bg-alt);border:1px solid var(--mk-line);border-radius:16px;padding:14px 14px 12px;overflow:hidden}
.mk-cl-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px}
.mk-cl-title{font-size:13.5px;font-weight:850;letter-spacing:-.02em;color:var(--mk-txt)}
.mk-cl-count{display:flex;align-items:baseline;gap:5px}
.mk-cl-count b{font-size:20px;font-weight:900;letter-spacing:-.03em;color:var(--mk-cobalt);font-variant-numeric:tabular-nums}
.mk-cl-count span{font-size:10px;font-weight:750;color:var(--mk-mut)}
.mk-cl-rows{display:flex;flex-direction:column;gap:5px;flex:1}
.mk-cl-row{display:grid;grid-template-columns:24px 1fr auto;gap:9px;align-items:center;background:var(--mk-panel);border:1px solid var(--mk-line);border-radius:9px;padding:6px 10px}
.mk-cl-row .who{font-size:12px;font-weight:750;color:var(--mk-txt);line-height:1.2}
.mk-cl-row .sub{font-size:10px;color:var(--mk-mut);line-height:1.2}
.mk-av-img{background-size:cover;background-position:center;background-color:#111}
.mk-cl-sync{display:flex;gap:7px;margin-top:11px}
/* Maria lifts up and drops into the top slot with a glow */
.mk-cl-lift{position:relative;z-index:2}
.mk-preview-card#mkDemo[data-phase="5"] .mk-phase-5 .mk-cl-lift{animation:mk-lift-in .8s cubic-bezier(.34,1.4,.5,1) .15s both, mk-recent-glow 2s ease-out .55s}
@keyframes mk-lift-in{0%{opacity:0;transform:translateY(26px) scale(.9)}55%{transform:translateY(-6px) scale(1.02)}100%{opacity:1;transform:none}}
/* the stream of faces pipes in one after another, sliding down from above */
.mk-cl-stream{opacity:0}
.mk-preview-card#mkDemo[data-phase="5"] .mk-phase-5 .mk-cl-stream{animation:mk-pipe-in .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.7s + var(--s) * .32s)}
@keyframes mk-pipe-in{from{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:none}}
/* sync buttons fade in last */
.mk-cl-sync .mk-sync-b{opacity:0}
.mk-preview-card#mkDemo[data-phase="5"] .mk-phase-5 .mk-cl-sync .mk-sync-b{animation:mk-bts-slide .45s ease both;animation-delay:calc(2.8s + var(--i,0) * .1s)}
.mk-cl-sync .mk-sync-b:nth-child(1){--i:0}.mk-cl-sync .mk-sync-b:nth-child(2){--i:1}.mk-cl-sync .mk-sync-b:nth-child(3){--i:2}
.mk-sync-b{font-size:11px;font-weight:800;padding:7px 11px;border-radius:8px;background:var(--mk-panel);border:1px solid var(--mk-line);color:var(--mk-txt)}
.mk-sync-b.on{background:var(--mk-cobalt);border-color:var(--mk-cobalt);color:#fff}
@keyframes mk-bts-slide{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes mk-recent-glow{0%{box-shadow:0 0 0 0 rgba(44,44,224,.4)}100%{box-shadow:0 0 0 8px rgba(44,44,224,0)}}

/* The demo card owns its animations. A whisper-soft idle float lets it breathe
   like the Chatbase hero, without disturbing the absolutely-positioned phases inside. */
.mk-preview-card#mkDemo{animation:mk-demo-breathe 7s ease-in-out infinite}
@keyframes mk-demo-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* Debug pin (?phase=N): force entry elements to their settled state for QA screenshots */
.mk-pinned .mk-hub-scroll>*,.mk-pinned .mk-cl-lift,.mk-pinned .mk-cl-stream,.mk-pinned .mk-cl-sync .mk-sync-b,.mk-pinned .mk-gal-t,.mk-pinned .mk-hub-btn.primary{opacity:1!important;transform:none!important;animation:none!important}
.mk-pinned .mk-hub-scroll{animation:none!important}
.mk-pinned .mk-scroll-cue,.mk-pinned .mk-dl-toast,.mk-pinned .mk-dl-scrim{display:none}
.mk-pinned-scroll .mk-hub-scroll{transform:translateY(-150px)!important}
/* ?phase=4&dl=1 pins the download-toast (settled) state for QA */
.mk-pinned-dl .mk-dl-scrim{display:block!important;opacity:1!important;animation:none!important}
.mk-pinned-dl .mk-dl-toast{display:flex!important;opacity:1!important;transform:translateY(-50%)!important;animation:none!important}
.mk-pinned-dl .mk-dl-toast .mk-dl-bar span{width:100%!important;animation:none!important}
.mk-pinned-dl .mk-dl-toast .mk-dl-check{opacity:1!important;transform:none!important;animation:none!important}
.mk-pinned .mk-tap{display:none}
/* Idle float off during QA pin so screenshots are pixel-stable */
.mk-preview-card#mkDemo.mk-pinned{animation:none}

@media (prefers-reduced-motion: reduce){
  .mk-scan,.mk-match-ring::before,.mk-match-bar span,.mk-gal-t,.mk-demo-cta::after,.mk-demo-cta::before,.mk-caret,.mk-tap,.mk-hub-scroll,.mk-hub-scroll>*,.mk-scroll-cue,.mk-dl-scrim,.mk-dl-toast,.mk-dl-bar span,.mk-dl-check,.mk-cl-lift,.mk-cl-stream,.mk-cl-sync .mk-sync-b,.mk-gal-cta::after,.mk-hub-btn.primary::after{animation:none!important}
  .mk-preview-card#mkDemo .mk-phase{transition:opacity .3s ease}
  .mk-preview-card#mkDemo{animation:none!important}
  .mk-gal-t{opacity:1;transform:none}
  .mk-match-bar span{width:100%}
  .mk-tap{display:none}
  .mk-scroll-cue,.mk-dl-toast,.mk-dl-scrim{display:none}
  .mk-hub-scroll>*,.mk-cl-lift,.mk-cl-stream,.mk-cl-sync .mk-sync-b{opacity:1;transform:none}
}

@media(max-width:900px){
  .mk-bento{grid-template-columns:repeat(2,1fr)}
  .bento,.bento.span2{grid-column:span 1}
  .bento.span6{grid-column:span 2}
}
@media(max-width:540px){
  .mk-bento{grid-template-columns:1fr}
  .bento,.bento.span2,.bento.span6{grid-column:span 1}
}

/* ═══════════════════════════════════════════════════════════════════
   SOCIAL PROOF — logo wall, testimonials, FAQ accordion.
   ═══════════════════════════════════════════════════════════════════ */
/* ── Logo wall ─────────────────────────────────────────────────── */
.mk-logos{padding:44px 24px;border-top:1px solid var(--mk-line);border-bottom:1px solid var(--mk-line);background:var(--mk-bg)}
.mk-logos-inner{max-width:1180px;margin:0 auto;text-align:center}
.mk-logos-lead{font-size:12.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--mk-faint);margin-bottom:26px}
.mk-logos-row{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.mk-logo{display:inline-flex;align-items:center;gap:9px;font-size:17px;font-weight:800;letter-spacing:-0.02em;color:var(--mk-txt-2);opacity:.72;transition:opacity .2s}
.mk-logo:hover{opacity:1}
.mk-logo-mark{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--mk-cobalt-soft);color:var(--mk-cobalt)}
.mk-logo-mark svg{width:17px;height:17px}

/* ── Testimonials ──────────────────────────────────────────────── */
.mk-tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mk-quote{background:var(--mk-panel);border:1px solid var(--mk-line);border-radius:18px;padding:26px 24px;box-shadow:var(--mk-shadow);display:flex;flex-direction:column}
.mk-quote-stars{color:#F5A623;font-size:14px;letter-spacing:2px;margin-bottom:14px}
.mk-quote-txt{font-size:14.5px;line-height:1.6;color:var(--mk-txt);font-weight:500;margin:0 0 20px;flex:1}
.mk-quote-txt b{font-weight:800}
.mk-quote-who{display:flex;align-items:center;gap:11px}
.mk-quote-av{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff}
.mk-quote-name{font-size:13.5px;font-weight:750;color:var(--mk-txt)}
.mk-quote-role{font-size:12px;color:var(--mk-mut)}

/* ── FAQ accordion ─────────────────────────────────────────────── */
.mk-faq{max-width:760px;margin:0 auto}
.mk-faq-item{border-bottom:1px solid var(--mk-line)}
.mk-faq-q{width:100%;background:none;border:none;text-align:left;cursor:pointer;padding:22px 4px;display:flex;align-items:center;gap:16px;font-family:inherit;font-size:16.5px;font-weight:700;letter-spacing:-0.01em;color:var(--mk-txt);transition:color .15s}
.mk-faq-q:hover{color:var(--mk-cobalt)}
.mk-faq-ic{margin-left:auto;flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--mk-panel-2);border:1px solid var(--mk-line);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;color:var(--mk-mut);transition:transform .3s var(--mk-ease),background .2s}
.mk-faq-item.open .mk-faq-ic{transform:rotate(45deg);background:var(--mk-cobalt);color:#fff;border-color:var(--mk-cobalt)}
.mk-faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--mk-ease)}
.mk-faq-a-inner{padding:0 4px 22px;font-size:14.5px;line-height:1.62;color:var(--mk-txt-2)}

@media(max-width:900px){
  .mk-tgrid{grid-template-columns:1fr}
  .mk-logos-row{gap:16px}
  .mk-logo{font-size:15px}
}

/* ─── How-it-works step visuals (device mockups per step) ────────────── */
.mk-step-item.hiw{align-items:center}
.mk-step-body{flex:1;min-width:0}
.hiw-shot{
  flex-shrink:0;width:270px;align-self:center;
  background:#fff;border:1px solid var(--mk-line);border-radius:16px;
  box-shadow:0 10px 34px rgba(20,20,60,.13);overflow:hidden;
}
.hiw-shot-hd{
  display:flex;align-items:center;gap:6px;padding:9px 12px;
  background:var(--mk-panel);border-bottom:1px solid var(--mk-line);
}
.hiw-dot{width:8px;height:8px;border-radius:50%;background:#D9D9DE;flex-shrink:0}
.hiw-dot.g{background:#25C26E}
.hiw-url{
  font-size:10.5px;color:var(--mk-mut);font-weight:600;margin-left:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hiw-body{padding:14px}
.hiw-label{font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mk-mut);margin-bottom:5px}
.hiw-field{
  background:var(--mk-panel);border:1px solid var(--mk-line);border-radius:8px;
  padding:8px 11px;font-size:12.5px;font-weight:600;color:var(--mk-txt);margin-bottom:9px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.hiw-field .ph{color:var(--mk-mut);font-weight:500}
.hiw-btn{
  background:var(--mk-cobalt);color:#fff;border-radius:8px;padding:9px;
  text-align:center;font-size:12.5px;font-weight:700;
}
.hiw-btn.green{background:var(--mk-green)}
.hiw-btn.dark{background:#0A0A0A}
.hiw-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.hiw-tile{aspect-ratio:1;border-radius:6px;background-size:cover;background-position:center;background-color:#111}
.hiw-prog{height:6px;border-radius:4px;background:var(--mk-panel);overflow:hidden;margin-top:10px}
.hiw-prog>span{display:block;height:100%;background:linear-gradient(90deg,var(--mk-cobalt),#5b5bf5);border-radius:4px}
.hiw-meta{font-size:11px;color:var(--mk-txt-2);margin-top:7px;display:flex;align-items:center;gap:5px}
.hiw-crow{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid var(--mk-line)}
.hiw-crow:first-of-type{border-top:0}
.hiw-av{width:28px;height:28px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0;background-color:#ddd}
.hiw-cwho{font-size:12px;font-weight:700;color:var(--mk-txt);line-height:1.2}
.hiw-csub{font-size:10px;color:var(--mk-mut)}
.hiw-badge{margin-left:auto;font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px;background:var(--mk-green-soft);color:var(--mk-green);flex-shrink:0}
.hiw-count{display:flex;align-items:baseline;gap:5px;margin-bottom:10px}
.hiw-count b{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--mk-cobalt)}
.hiw-count span{font-size:11px;color:var(--mk-mut);font-weight:600}
.hiw-qr{
  width:96px;height:96px;margin:2px auto 10px;border-radius:10px;
  background:
    repeating-linear-gradient(90deg,#0A0A0A 0 6px,transparent 6px 12px),
    repeating-linear-gradient(0deg,#0A0A0A 0 6px,#fff 6px 12px);
  background-size:12px 12px;border:5px solid #fff;box-shadow:0 0 0 1px var(--mk-line);
}
.hiw-selfie{position:relative;width:104px;height:104px;margin:2px auto 10px;border-radius:12px;overflow:hidden;background-size:cover;background-position:center}
.hiw-scanline{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--mk-green),transparent);top:0;animation:hiwScan 2.2s var(--mk-ease) infinite}
@keyframes hiwScan{0%{top:6%}50%{top:90%}100%{top:6%}}
.hiw-galhd{font-size:12px;font-weight:700;color:var(--mk-txt);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.hiw-check{width:16px;height:16px;border-radius:50%;background:var(--mk-green);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hiw-print{border:1px solid var(--mk-line);border-radius:10px;overflow:hidden}
.hiw-print-img{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#111}
.hiw-print-ft{display:flex;align-items:center;justify-content:space-between;padding:9px 11px}
.hiw-print-ft b{font-size:12.5px;color:var(--mk-txt)}
.hiw-price{font-size:12.5px;font-weight:800;color:var(--mk-cobalt)}
.hiw-spon{display:flex;align-items:center;gap:7px;padding:8px 10px;background:var(--mk-panel);border-radius:8px;margin-top:9px}
.hiw-spon-logo{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#F59E0B,#F97316);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media(max-width:820px){
  .mk-step-item.hiw{flex-direction:column;align-items:flex-start}
  .hiw-shot{width:100%;max-width:320px;margin-top:6px}
}