/* /insights/which-visits-became-customers/ only: the coat-check rail (hero) and the
   claim-ticket builder (article). Prefix vbc-. Each coat on the rail is one lead event;
   the picked count lights its coats and hangs a claim ticket on the tied ones.
   Classes on a coat: t tied, a from an AI assistant, w won. */

.vbc-card{border-radius:10px;background:var(--sk-deep);border:1px solid var(--sk-line-2);overflow:hidden}
.vbc-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem .8rem;padding:.6rem .8rem;border-bottom:1px solid var(--sk-line);font:500 .64rem var(--sk-mono);color:var(--sk-text-3)}
.vbc-cc{padding:1rem .8rem .7rem}
.vbc-rail{display:grid;grid-template-columns:repeat(29,minmax(0,1fr));gap:.55rem .18rem;padding:.2rem 0 .6rem;
  background:repeating-linear-gradient(180deg,#5b6773 0 2px,transparent 2px 1.79rem)}
.vbc-rail i{position:relative;display:block;height:1.24rem;transition:opacity .4s,transform .4s}
/* the hook, the hanger's shoulders and the coat */
.vbc-rail i::before{content:"";position:absolute;left:50%;top:0;width:.32rem;height:.32rem;margin-left:-.16rem;border:1.5px solid #8a96a3;border-bottom:0;border-radius:.2rem .2rem 0 0;box-sizing:border-box}
.vbc-rail i{background:linear-gradient(#3b4a59,#2b3743) no-repeat 50% .3rem/86% .9rem;
  clip-path:polygon(50% 0,58% 22%,100% 40%,100% 100%,0 100%,0 40%,42% 22%)}
.vbc-rail i::after{content:"";position:absolute;left:50%;bottom:0;width:.42rem;height:.36rem;margin-left:-.21rem;border-radius:1px;background:#1baf7a;opacity:0;transform:translateY(-.3rem);transition:opacity .35s,transform .35s}
.vbc-rail i{transition-delay:calc(var(--d,0) * 1ms)}
.vbc-cc[data-state="tied"] .vbc-rail i:not(.t),
.vbc-cc[data-state="ai"] .vbc-rail i:not(.a),
.vbc-cc[data-state="won"] .vbc-rail i:not(.w){opacity:.22}
.vbc-cc[data-state="tied"] .vbc-rail i.t::after,.vbc-cc[data-state="ai"] .vbc-rail i.a::after{opacity:1;transform:none}
.vbc-cc[data-state="tied"] .vbc-rail i.t{background:linear-gradient(#2f7d62,#1f5644) no-repeat 50% .3rem/86% .9rem}
.vbc-cc[data-state="ai"] .vbc-rail i.a{background:linear-gradient(#eb6834,#a8471f) no-repeat 50% .3rem/86% .9rem;transform:scale(1.25)}
.vbc-cc[data-state="ai"] .vbc-rail i.a::after{background:#ffd166}
.vbc-cc[data-state="won"] .vbc-rail i.w{background:linear-gradient(#e0b341,#a07a1c) no-repeat 50% .3rem/86% .9rem}
.vbc-key{display:flex;gap:.7rem}.vbc-key em{font-style:normal;display:inline-flex;align-items:center;gap:.3rem}
.vbc-key em::before{content:"";width:.55rem;height:.55rem;border-radius:2px;background:#4a6f9a}.vbc-key em.h::before{background:#3b4a59}
.vbc-cc[data-state="all"] .vbc-rail i.b{background:linear-gradient(#4a6f9a,#34506f) no-repeat 50% .3rem/86% .9rem}
.vbc-count{margin:.6rem 0 0;font:500 .78rem var(--sk-mono);color:var(--sk-text-2)}
.vbc-count b{font:700 2.1rem/1 var(--sk-sans);color:#fff;margin-right:.3rem;vertical-align:-.2rem}
.vbc-cc[data-state="tied"] .vbc-count b{color:#8fe3b4}
.vbc-cc[data-state="ai"] .vbc-count b{color:#ffb38f}
.vbc-cc[data-state="won"] .vbc-count b{color:#ffd166}
.vbc-say{margin:.4rem 0 0;font-size:.82rem;line-height:1.5;color:var(--sk-text-2);min-height:2.5rem}
.vbc-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:.7rem .8rem .8rem;border-top:1px solid var(--sk-line)}
@media (max-width:560px){
  .vbc-rail{grid-template-columns:repeat(29,minmax(0,1fr));gap:.4rem .08rem;background-size:auto;background:repeating-linear-gradient(180deg,#5b6773 0 1px,transparent 1px 1.3rem)}
  .vbc-rail i,.vbc-cc .vbc-rail i[class]{height:.9rem;background-size:86% .64rem!important;background-position:50% .22rem!important}
  .vbc-rail i::after{width:.3rem;height:.26rem;margin-left:-.15rem}
  .vbc-rail i::before{width:.24rem;height:.24rem;margin-left:-.12rem;border-width:1px}
}
@media (prefers-reduced-motion:reduce){.vbc-rail i,.vbc-rail i::after{transition:none}}

/* the week's counts */
.prose .vbc-week td:nth-child(2){font:700 .95rem var(--sk-mono);white-space:nowrap}
.prose .vbc-src{font-size:.88rem;color:var(--sk-text-3)}

/* the claim-ticket builder */
.prose .vbc-pk-ctl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:0 0 1rem}
.vbc-q{display:flex;flex-direction:column;gap:.35rem}
.vbc-q > span{font:600 .72rem var(--sk-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--sk-text-3)}
.prose .vbc-pk{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;margin:0 0 1.6rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep);overflow:hidden}
.vbc-pk-in{padding:.9rem;border-right:1px solid var(--sk-line)}
.vbc-pk-out{padding:.9rem;position:relative}
.prose .vbc-pk-h{margin:0 0 .5rem;font:600 .66rem var(--sk-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sk-text-4)}
.prose .vbc-pk pre{margin:0;padding:0;background:none;border:0;font:500 .72rem/1.55 var(--sk-mono);color:#cfd8e2;white-space:pre-wrap;word-break:break-word}
.vbc-pk dl{margin:0}
.vbc-pk dl > div{padding:.45rem 0;border-bottom:1px solid #18232e}
.vbc-pk dt{font:600 .68rem var(--sk-mono);color:var(--sk-text-3)}
.vbc-pk dd{margin:.15rem 0 0;font:600 .86rem/1.4 var(--sk-sans);color:#fff}
.prose .vbc-verdict{position:relative;margin:.8rem 0 0;padding:.45rem .6rem .45rem 1.9rem;border-radius:6px;font:700 .8rem/1.35 var(--sk-sans);color:#8fe3b4;background:rgba(27,175,122,.12);border:1px solid #1f6b4d}
.vbc-verdict::before{content:"";position:absolute;left:.6rem;top:50%;width:.8rem;height:.6rem;margin-top:-.3rem;border-radius:2px;background:#1baf7a;
  -webkit-mask:radial-gradient(circle at 0 50%,transparent .14rem,#000 .15rem) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent .14rem,#000 .15rem) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 50%,transparent .14rem,#000 .15rem) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent .14rem,#000 .15rem) right/51% 100% no-repeat}
.vbc-pk[data-tied="no"] .vbc-verdict{color:#ffb38f;background:rgba(235,104,52,.1);border-color:#6b3a26}
.vbc-pk[data-tied="no"] .vbc-verdict::before{background:transparent;border:1.5px dashed #eb6834;-webkit-mask:none;mask:none;box-sizing:border-box}
.prose .vbc-pk figcaption{grid-column:1 / -1;padding:.6rem .9rem;border-top:1px solid var(--sk-line);font:400 .7rem/1.5 var(--sk-mono);color:var(--sk-text-3)}
.prose .vbc-steps li{margin-bottom:.5rem}
@media (max-width:720px){
  .prose .vbc-pk-ctl{grid-template-columns:1fr}
  .prose .vbc-pk{grid-template-columns:1fr}
  .vbc-pk-in{border-right:0;border-bottom:1px solid var(--sk-line)}
}