/* vs-spellbook v2 — loads after vs-legora v13 + v15. New rules use the vb- prefix. */
:root{--rival:#AEB8C7;--rival-ink:#5B6775}
.vb-strike{color:var(--rival-ink);text-decoration:line-through;text-decoration-color:var(--gap-ink);text-decoration-thickness:3px}
/* hero: the "has both" line under the h1 */
.vl-sec .vb-both{margin-top:24px;font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.2vw,32px);letter-spacing:-.025em;line-height:1.2;color:var(--navy)}
.vb-both .vb-strike{color:var(--rival-ink);text-decoration-color:var(--gap-ink);text-decoration-thickness:3px}
.vl-sec.vl-hero .vb-both + .vl-sub{margin-top:14px}

/* hero: what you know before the sales call */
.vb-know{width:100%;max-width:1000px;margin-top:clamp(36px,5.5vh,64px);text-align:left}
.vb-know-head,.vb-know-row{display:grid;grid-template-columns:110px repeat(4,minmax(0,1fr));align-items:center;column-gap:8px}
.vb-know-head{font-size:14px;font-weight:600;color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--line)}
.vb-know-head span{padding-left:14px}
.vb-know-row{margin-top:10px}
.vb-know-name{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--navy)}
.vb-know-row--rival .vb-know-name{color:var(--rival-ink)}
.vb-cell{min-height:48px;border-radius:12px;display:flex;align-items:center;padding:8px 14px;font-size:15px;font-weight:600;line-height:1.25}
.vb-know-row--rival .vb-cell{background:#EEF1F5;color:var(--rival-ink)}
.vb-know-row--aline .vb-cell{background:var(--blue);color:#fff;box-shadow:0 8px 24px rgba(20,110,232,.22)}
.vb-cell small{display:none}
.vb-know-note{margin-top:14px;font-size:13px;color:var(--muted-2)}
.js-vl .vb-know-row .vb-cell{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.js-vl .vb-know.is-in .vb-cell{opacity:1;transform:none}
.js-vl .vb-know.is-in .vb-know-row--aline .vb-cell{transition-delay:.35s}
@media (max-width:767px){
  .vb-know-head{display:none}
  .vb-know-row{grid-template-columns:1fr 1fr;row-gap:8px;margin-top:22px}
  .vb-know-name{grid-column:1 / -1;font-size:15px}
  .vb-cell{flex-direction:column;align-items:flex-start;justify-content:center;font-size:14px;padding:10px 12px}
  .vb-cell small{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;opacity:.7;margin-bottom:3px}
}

/* Teams intake mockup (classes from the Legora design file) */
.vl-ui .vs-msg{display:flex;gap:.9em;margin-bottom:1.2em}
.vl-ui .vs-msg:last-child{margin-bottom:0}
.vl-ui .vs-msg-av{width:2.4em;height:2.4em;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.9em;display:flex;align-items:center;justify-content:center;flex:none}
.vl-ui .vs-msg-av--ai{background:var(--blue)}
.vl-ui .vs-msg-who{font-weight:600;font-size:.95em;color:var(--navy);margin-bottom:.15em}
.vl-ui .vs-msg-txt{font-size:1.05em;color:var(--slate)}
.vl-ui .vs-ticket{background:var(--tint);border-radius:.7em;padding:1em 1.1em;margin-top:.3em}
.vl-ui .vs-ticket-id{font-family:var(--font-display);font-weight:700;font-size:.85em;color:var(--blue-dark);letter-spacing:.02em}
.vl-ui .vs-ticket-title{font-weight:600;font-size:1.05em;margin:.3em 0 .7em;color:var(--navy)}
.vl-ui .vs-chips{display:flex;flex-wrap:wrap;gap:.4em}
.vl-ui .vs-chip{background:#fff;border-radius:999px;padding:.4em .9em;font-size:.85em;font-weight:500;color:var(--muted)}
.vl-ui .vs-chip--on{background:var(--navy);color:#fff}

/* counterparty review mockup */
.vb-rev{display:grid;gap:.7em}
.vb-rev-row{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;gap:.9em;align-items:center;background:#F7F9FD;border-radius:.75em;padding:.85em 1em}
.vb-rev-row .vs-msg-av{width:2.4em;height:2.4em;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.9em;display:flex;align-items:center;justify-content:center}
.vb-rev-row .vs-msg-av--ai{background:var(--blue)}
.vb-rev-row .vs-msg-av--ext{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line)}
.vb-rev-row strong{display:block;font-weight:600;color:var(--navy);line-height:1.3}
.vb-rev-row span{display:block;font-size:.82em;color:var(--muted-2);margin-top:.15em}
.vb-state{font-size:.8em;font-weight:600;border-radius:999px;padding:.35em .8em;white-space:nowrap}
.vb-state--wait{background:#FFF6E5;color:#8A5300}
.vb-state--ai{background:var(--tint-2);color:var(--blue-dark)}
.vb-state--ok{background:#E8F6EF;color:#0E7A4E}
.vb-lanes{display:grid;grid-template-columns:1fr 1fr;gap:.7em;margin-top:1.1em}
.vb-lane{border-radius:.75em;padding:.85em 1em;font-size:.85em;line-height:1.4}
.vb-lane b{display:block;font-size:.8em;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.4em}
.vb-lane--int{background:var(--navy);color:rgba(255,255,255,.85)}
.vb-lane--int b{color:#fff}
.vb-lane--ext{background:var(--tint);color:var(--slate)}
.vb-lane--ext b{color:var(--navy)}
@media (max-width:479px){.vb-lanes{grid-template-columns:1fr}.vb-rev-row{grid-template-columns:2.4em minmax(0,1fr)}.vb-rev-row .vb-state{grid-column:2;justify-self:start}}

/* playbook mockup */
.vb-pb-rule{background:#F7F9FD;border-radius:.75em;padding:1em 1.1em}
.vb-pb-rule strong{display:block;font-weight:600;color:var(--navy);margin-bottom:.6em}
.vb-pb-pos{list-style:none;margin:0;padding:0;display:grid;gap:.45em}
.vb-pb-pos li{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:.8em;align-items:center;background:#fff;border-radius:.55em;padding:.55em .8em;font-size:.92em;color:var(--slate)}
.vb-pb-pos b{font-size:.78em;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-dark)}
.vb-pb-pos li:first-child b{color:var(--navy)}
.vb-pb-change{margin-top:1em;padding:1em 1.1em;background:#fff}
.vb-pb-src{display:block;font-size:.78em;font-weight:600;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em}
.vb-pb-change p{margin:.4em 0 0;color:var(--navy)}
.vb-ins{color:var(--blue-dark);background:rgba(20,110,232,.1);border-radius:3px;padding:0 .2em;text-decoration:underline;text-decoration-color:rgba(20,110,232,.5)}
.vb-pb-act{display:flex;gap:.5em;margin-top:.8em}
.vb-pb-act em{font-style:normal;font-size:.85em;font-weight:600;border-radius:999px;padding:.4em 1em;background:var(--tint);color:var(--navy)}
.vb-pb-act em:first-child{background:var(--navy);color:#fff}

@media (prefers-reduced-motion:reduce){
  .js-vl .vb-know-row .vb-cell{opacity:1!important;transform:none!important;transition:none!important}
}