/* ============ v4 Use-case battlecards: sticky stacking panels + original animated scenes ============ */
.tone-lav  {--t-bg:#f4f1fd;--t-bg2:#ece6fc;--t-ink:#5a22bd;--t-pill:#6b2bd9;--t-line:#dcd0fa}
.tone-blue {--t-bg:#eef4fc;--t-bg2:#e3ecf9;--t-ink:#2c5fa8;--t-pill:#3b73c4;--t-line:#cfdef3}
.tone-mint {--t-bg:#edf7f2;--t-bg2:#e1f1e9;--t-ink:#1e7a55;--t-pill:#258a61;--t-line:#cbe7d9}
.tone-peach{--t-bg:#fdf3ec;--t-bg2:#fae8dc;--t-ink:#b1552a;--t-pill:#c4643a;--t-line:#f3d6c4}
.tone-sand {--t-bg:#fbf7ea;--t-bg2:#f5eed6;--t-ink:#8f6a10;--t-pill:#a57c16;--t-line:#ece0b8}
.tone-lilac{--t-bg:#f6f2fc;--t-bg2:#eee6f9;--t-ink:#5b2e9e;--t-pill:#6b2bd9;--t-line:#e0d3f3}

.uc-sec{padding-bottom:80px}
.bc-stack{display:flex;flex-direction:column;gap:32px}
.bc{position:sticky;top:calc(96px + var(--i) * 14px);transform-origin:50% 0;will-change:transform}
.bc-in{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:stretch;min-height:520px;padding:28px 28px 28px 56px;border-radius:32px;
  background:linear-gradient(135deg,var(--t-bg) 0%,var(--t-bg2) 100%);border:1px solid var(--t-line);
  box-shadow:0 1px 2px rgba(15,17,21,.04),0 -18px 40px -30px rgba(15,17,21,.25),0 30px 60px -44px rgba(15,17,21,.3);overflow:hidden;transition:filter .3s}
.bc-in::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#0f1115;opacity:var(--dim,0);pointer-events:none}
.bc-text{display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.bc-pill{display:inline-flex;align-items:center;align-self:flex-start;height:30px;border-radius:999px;background:var(--t-pill);color:#fff;padding-left:14px;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.bc-pill-c{display:inline-flex;margin-left:10px;height:30px}
.bc-pill-c i{width:30px;height:30px;border-radius:50%;margin-left:-20px;border:1.5px solid var(--t-pill);background:var(--t-bg)}
.bc-pill-c i:first-child{margin-left:-18px;background:var(--t-pill);border-color:var(--t-bg)}
.bc-pill-c i:nth-child(2){opacity:.75}.bc-pill-c i:nth-child(3){opacity:.45}
.bc-h{margin-top:26px;font-size:clamp(30px,3.3vw,46px);line-height:1.08;letter-spacing:-.035em;font-weight:700;color:#0f1115}
.bc-h span{display:block}
.bc-h2{color:var(--t-ink)}
.bc-meta{margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--t-ink);opacity:.85}
.bc-p{margin-top:14px;font-size:16.5px;line-height:1.7;color:#454b58;max-width:460px}
.bc-meta+.bc-p{margin-top:10px}
.bc-link{margin-top:28px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#0f1115;align-self:flex-start;border-bottom:1.5px solid var(--t-line);padding-bottom:3px;transition:border-color .2s,color .2s}
.bc-link svg{width:15px;height:15px;transition:transform .2s}.bc-link:hover{color:var(--t-ink);border-color:var(--t-ink)}.bc-link:hover svg{transform:translateX(3px)}
.bc-vis{position:relative;border-radius:24px;overflow:hidden;background:
  radial-gradient(120% 80% at 50% 110%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%),
  linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.85));border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,17,21,.04);display:flex;align-items:center;justify-content:center}
.bc-vis::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(15,17,21,.07) 1px,transparent 1px);background-size:18px 18px;
  mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent 80%);-webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent 80%)}


/* ---------- responsive ---------- */
@media(max-width:960px){
  .bc{position:relative;top:auto!important;transform:none!important}
  .bc-in{grid-template-columns:1fr;gap:8px;padding:24px;min-height:0;border-radius:24px}
  .bc-in::after{display:none}
  .bc-text{padding:8px 4px 16px}
  .bc-vis{aspect-ratio:520/400;border-radius:18px}
  .bc-stack{gap:20px}
}

/* polish pass 1 */
.bc-pill{padding-left:14px;overflow:visible}
.bc-pill-t{padding-right:12px;white-space:nowrap}
.bc-pill-c{margin-left:0;margin-right:-2px}
.bc-pill-c i{width:30px;height:30px;margin-left:-18px}
.bc-pill-c i:first-child{margin-left:0;background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55)}
.bc-pill-c i:nth-child(2){background:var(--t-bg);border-color:var(--t-pill);opacity:1}
.bc-pill-c i:nth-child(3){background:var(--t-bg);border-color:var(--t-pill);opacity:.5}
@media(min-width:961px){.bc-in{grid-template-columns:1.08fr 1fr;gap:40px;padding-left:52px}}
.bc-h{font-size:clamp(28px,2.9vw,42px)}

/* ================= v4: animated mini product-UI mockups (Zoom-card style, original) ================= */
.tone-lav  {--v1:#cdbff7;--v2:#8f6ee6;--v3:#4f2fb0;--acc:#6b2bd9;--accs:#efe9ff}
.tone-blue {--v1:#c5dcf7;--v2:#6f9fe0;--v3:#2d5ba6;--acc:#2f6fc9;--accs:#e5eefb}
.tone-mint {--v1:#c4e8d6;--v2:#63b893;--v3:#1f7552;--acc:#1f8a61;--accs:#e2f4ea}
.tone-peach{--v1:#f8d5bf;--v2:#e9956a;--v3:#b4552a;--acc:#c4643a;--accs:#fcebe0}
.tone-sand {--v1:#f1e2b0;--v2:#d0a743;--v3:#8f6a10;--acc:#a57c16;--accs:#f8f0d6}
.tone-lilac{--v1:#e0d0f5;--v2:#a784de;--v3:#5b2e9e;--acc:#6b2bd9;--accs:#f0e9fb}
.bc-vis{display:block;min-height:464px;border:0;border-radius:24px;overflow:hidden;
  background:radial-gradient(90% 70% at 10% 0%,rgba(255,255,255,.55),transparent 60%),radial-gradient(80% 80% at 100% 100%,var(--v3),transparent 70%),linear-gradient(150deg,var(--v1) 0%,var(--v2) 60%,var(--v3) 120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.bc-vis::before{background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1px);mask-image:linear-gradient(180deg,#000,transparent 60%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 60%)}
.mk-head{position:absolute;top:26px;left:28px;display:flex;align-items:center;gap:12px;color:#fff;font-size:20px;font-weight:600;letter-spacing:-.015em;text-shadow:0 1px 12px rgba(0,0,0,.12);z-index:2}
.mk-icon{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}
.mk-icon svg{width:19px;height:19px}
.mk-win{position:absolute;left:28px;top:86px;right:-1px;bottom:-1px;background:#fff;border-radius:16px 0 0 0;box-shadow:0 20px 50px -20px rgba(15,17,21,.35),0 0 0 1px rgba(15,17,21,.05);overflow:hidden;font-size:13px;color:#1b1d24}
.mk-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid #eef0f3;background:#fbfbfc}
.mk-bar i{width:10px;height:10px;border-radius:50%;background:#e2e4e9}
.mk-bar span{margin-left:10px;font-size:12.5px;font-weight:600;color:#4b5160}
.mk-body{position:relative;padding:14px 18px;height:calc(100% - 38px)}
.mk-tabs{display:flex;gap:6px;margin-bottom:10px}
.mk-tabs span{height:28px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#6b7180;border:1px solid #eceef2;transition:all .35s}
.mk-tabs span.on{background:#111318;color:#fff;border-color:#111318}
.mk-tabs svg{width:12px;height:12px}
.live{width:6px;height:6px;border-radius:50%;background:#ef5a5a;animation:mkblink 1.4s infinite}
@keyframes mkblink{50%{opacity:.25}}
.mk-list{display:flex;flex-direction:column}
.mk-row{display:flex;align-items:center;gap:12px;padding:9px 6px;border-bottom:1px solid #f1f2f5;transition:all .5s cubic-bezier(.22,1,.36,1);border-radius:10px}
.mk-col{display:flex;flex-direction:column;min-width:0;flex:1}
.mk-col b{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-col small{font-size:11.5px;color:#7a8090;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-av{width:30px;height:30px;flex:none;border-radius:9px;background:var(--c);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.mk-time{font-size:11px;color:#9aa0ad}
.mk-chip{height:22px;padding:0 9px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;white-space:nowrap;background:var(--accs);color:var(--acc)}
.mk-chip svg{width:11px;height:11px}
.mk-chip.g{background:#e2f4ea;color:#1f7552}.mk-chip.p{background:#efe9ff;color:#5a22bd}
.mk-btn{height:30px;padding:0 13px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;background:#f2f3f6;color:#111318;transition:transform .15s,background .2s;white-space:nowrap}
.mk-btn.dark{background:#111318;color:#fff}.mk-btn svg{width:12px;height:12px}
.mk-btn.press{transform:scale(.93)}
/* new-row slide in */
.mk-new{max-height:0;padding-top:0;padding-bottom:0;opacity:0;overflow:hidden;border-bottom-color:transparent}
.bc.st-new .mk-new{max-height:60px;padding-top:9px;padding-bottom:9px;opacity:1;background:var(--accs);border-bottom-color:#f1f2f5}
.bc.st-sel .mk-new{box-shadow:0 0 0 1.5px var(--acc) inset}
/* drafted message */
.mk-draft{position:absolute;left:18px;right:18px;bottom:16px;padding:14px;border-radius:14px;background:#fff;border:1px solid #eceef2;box-shadow:0 18px 40px -18px rgba(15,17,21,.3);opacity:0;transform:translateY(16px);transition:all .5s cubic-bezier(.22,1,.36,1)}
.bc.st-draft .mk-draft{opacity:1;transform:none}
.mk-draft-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}.mk-draft-h small{font-size:11.5px;color:#7a8090}
.mk-draft p{font-size:13px;line-height:1.55;color:#2a2d35;min-height:40px}
.mk-draft-f{display:flex;justify-content:flex-end;margin-top:8px}
.caret{display:inline-block;width:1.5px;height:14px;background:var(--acc);vertical-align:-2px;margin-left:1px;animation:mkblink 1s steps(1) infinite}
/* person card */
.mk-person{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid #eceef2;background:#fbfbfc;opacity:0;transform:translateY(10px);transition:all .5s cubic-bezier(.22,1,.36,1)}
.bc.st-person .mk-person{opacity:1;transform:none}
.bc[data-scene="s2"] .mk-draft{bottom:14px}
/* map */
.mk-map{position:relative;height:190px;border-radius:12px;overflow:hidden;background:#f3f7f4;border:1px solid #e6eee9}
.mk-road{position:absolute;background:#fff;box-shadow:0 0 0 1px #e3ece6}
.mk-road.r1{left:-10%;right:-10%;top:58%;height:12px;transform:rotate(-8deg)}
.mk-road.r2{top:-10%;bottom:-10%;left:38%;width:12px;transform:rotate(12deg)}
.mk-block{position:absolute;border-radius:8px;background:#e4efe8}
.mk-block.b1{left:6%;top:10%;width:22%;height:30%}.mk-block.b2{left:58%;top:8%;width:26%;height:36%}.mk-block.b3{left:8%;top:72%;width:24%;height:22%}
.mk-pin{position:absolute;width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#9aa0ad;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.mk-pin::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.mk-pin.k1{left:20%;top:44%}.mk-pin.k2{left:52%;top:40%;background:var(--acc)}.mk-pin.k3{left:74%;top:62%}.mk-pin.k4{left:30%;top:22%}
.mk-radius{position:absolute;left:52%;top:40%;width:160px;height:160px;margin:-73px 0 0 -73px;border-radius:50%;border:1.5px dashed rgba(31,138,97,.45);background:rgba(31,138,97,.06);animation:mkpulse 2.6s ease-in-out infinite}
@keyframes mkpulse{50%{transform:scale(1.06)}}
.mk-pop{position:absolute;left:58%;top:12%;width:190px;padding:10px 12px;background:#fff;border-radius:12px;box-shadow:0 14px 30px -12px rgba(15,17,21,.35);opacity:0;transform:translateY(8px) scale(.97);transition:all .45s cubic-bezier(.22,1,.36,1)}
.mk-pop b{display:block;font-size:12.5px}.mk-pop small{display:block;font-size:11px;color:#7a8090}
.mk-pop-f{display:flex;gap:4px;margin-top:8px}
.bc.st-pop .mk-pop{opacity:1;transform:none}
.mk-list.tight .mk-row{padding:8px 6px}
.s3-added{opacity:0;transform:scale(.8);transition:all .35s}.bc.st-added .s3-added{opacity:1;transform:none}
/* scores */
.mk-score{display:flex;align-items:center;gap:8px;width:104px}
.mk-score .bar{flex:1;height:6px;border-radius:3px;background:#f0f1f4;overflow:hidden}
.mk-score .bar i{display:block;height:100%;width:0;border-radius:3px;background:#c3c7d1;transition:width 1.2s cubic-bezier(.22,1,.36,1)}
.mk-score.hi .bar i{background:var(--acc)}.mk-score.mid .bar i{background:#e7b58f}
.bc.st-score .mk-score .bar i{width:calc(var(--s) * 1%)}
.mk-score em{font-style:normal;font-weight:700;font-size:12px;width:22px;text-align:right;font-variant-numeric:tabular-nums}
.bc.st-qual .mk-row:has(.hi){background:var(--accs)}
.mk-foot{position:absolute;left:18px;right:18px;bottom:16px;display:flex;align-items:center;justify-content:space-between}
.mk-foot small{font-size:12px;color:#7a8090}
.s4-q{opacity:0;transition:opacity .4s}.bc.st-qual .s4-q{opacity:1}
.mk-toast{position:absolute;left:50%;bottom:62px;transform:translate(-50%,12px);display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#111318;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;transition:all .45s cubic-bezier(.22,1,.36,1);box-shadow:0 12px 30px -10px rgba(0,0,0,.45)}
.mk-toast svg{width:13px;height:13px;color:#7ee2b1}
.bc.st-toast .mk-toast{opacity:1;transform:translate(-50%,0)}
/* CRM */
.mk-rec{display:flex;align-items:center;gap:12px;padding:4px 2px 12px;border-bottom:1px solid #f1f2f5}
.mk-rec .mk-av{width:38px;height:38px;border-radius:50%;font-size:12px}
.s5-enr{transition:all .3s}.bc.st-done .s5-enr{background:#e2f4ea;color:#1f7552}
.mk-alert{display:flex;gap:10px;align-items:flex-start;margin:10px 0 4px;padding:0 12px;max-height:0;opacity:0;overflow:hidden;border-radius:12px;background:#fff6e0;border:1px solid #f3e2b0;transition:all .5s cubic-bezier(.22,1,.36,1)}
.mk-alert svg{width:16px;height:16px;color:#a57c16;flex:none;margin-top:2px}
.mk-alert b{display:block;font-size:12.5px}.mk-alert small{font-size:11.5px;color:#7a6a3a}
.bc.st-alert .mk-alert{max-height:70px;opacity:1;padding:10px 12px}
.mk-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mk-field{position:relative;padding:9px 12px;border-radius:10px;background:#f7f8fa;border:1px solid #eff0f3;min-height:52px;transition:background .4s,border-color .4s}
.mk-field:last-child{grid-column:1/-1}
.mk-field small{display:block;font-size:10.5px;color:#9aa0ad;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.mk-field .skel{position:absolute;left:12px;bottom:11px;height:8px;width:55%;border-radius:4px;background:linear-gradient(90deg,#e6e8ed,#f3f4f7,#e6e8ed);background-size:200% 100%;animation:mkshim 1.4s linear infinite;transition:opacity .3s}
@keyframes mkshim{to{background-position:-200% 0}}
.mk-field b{display:block;margin-top:3px;font-size:12.5px;font-weight:600;opacity:0;transform:translateY(4px);transition:all .35s}
.mk-field .ok{position:absolute;right:10px;top:50%;margin-top:-9px;width:18px;height:18px;border-radius:50%;background:#e8b93b;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:all .3s}
.mk-field .ok svg{width:11px;height:11px}
.mk-field.done{background:#fffdf5;border-color:#f1e5bd}.mk-field.done .skel{opacity:0}.mk-field.done b{opacity:1;transform:none}.mk-field.done .ok{opacity:1;transform:none}
/* events */
.mk-filter{transition:all .35s}.bc.st-filter .mk-filter{background:var(--accs);color:var(--acc);border-color:var(--acc)}
.s6-list .mk-row{max-height:60px}
.bc.st-filter .s6-list .nofit{max-height:0;padding-top:0;padding-bottom:0;opacity:0;overflow:hidden;border-bottom-color:transparent}
.mk-chip.l{background:#f0e9fb;color:#5b2e9e}
/* cursor */
.mk-cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:5;transform:translate(var(--cx,110%),var(--cy,110%));transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .3s;opacity:0;filter:drop-shadow(0 3px 5px rgba(0,0,0,.25))}
.bc.st-cursor .mk-cursor{opacity:1}
.mk-cursor svg{width:22px;height:22px}
.mk-cursor::after{content:"";position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(17,19,24,.18);transform:scale(0);opacity:0}
.mk-cursor.click::after{animation:mkclick .45s ease-out}
@keyframes mkclick{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.6);opacity:0}}

@media(max-width:960px){.bc-vis{min-height:0;aspect-ratio:auto;height:440px}}
@media(max-width:480px){.bc-vis{height:430px}.mk-win{left:16px;top:78px}.mk-head{left:18px;top:20px;font-size:17px}.mk-score{width:84px}.mk-pop{left:40%}}
@media(prefers-reduced-motion:reduce){.mk-cursor{display:none}.live,.caret,.mk-radius,.mk-field .skel{animation:none!important}.bc .mk-win *{transition:none!important}}
/* mobile polish */
.mk-tabs{flex-wrap:nowrap;overflow:hidden}.mk-tabs span{white-space:nowrap;flex:none}
@media(max-width:480px){.mk-tabs span:nth-child(3){display:none}.mk-body{padding:12px 14px}.mk-fields{grid-template-columns:1fr}.mk-field:nth-child(n+4){display:none}.mk-draft{left:12px;right:12px}.mk-foot{left:14px;right:14px}}
@media(max-width:480px){.mk-pop{left:auto;right:8px;width:168px}.mk-pop-f .mk-chip:nth-child(2){display:none}}