/* Insights group visuals (vins-). One animated framework per insight article.
   Tokens only from :root in site.css. Square corners. Red = one highlight per visual.
   Every visual animates on [data-io].play and shows its final state under reduced motion. */
.vins-lbl{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.vins-tag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);border:1px solid var(--line-strong);padding:4px 7px;line-height:1.2}
.vins-tag.hi{border-color:var(--red);color:var(--white)}

/* 1. Flow: columns of nodes joined by arrows (query to answer, channels to record, context to agent) */
.vins-flow{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr);align-items:center}
.vins-flow.c4{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr)}
.vins-col{display:grid;gap:8px;align-content:center;min-width:0}
.vins-col > .vins-lbl{margin-bottom:6px}
.vins-nd{position:relative;border:1px solid var(--line-strong);background:var(--ink-raise);padding:14px 16px;min-width:0;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) calc(var(--i,0)*.32s + var(--j,0)*.08s),transform .7s var(--ease) calc(var(--i,0)*.32s + var(--j,0)*.08s)}
.vins-nd b{display:block;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;color:var(--white)}
.vins-nd span{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--ash)}
.vins-nd span.vins-tag{display:inline-block;margin-top:8px;font-size:10px;color:var(--mist)}
.vins-nd span.vins-lbl{margin:0 0 6px;font-size:11px}
.vins-nd.lg{padding:22px 20px}
.vins-nd.lg b{font-size:clamp(17px,1.5vw,21px);font-weight:800;letter-spacing:.03em}
.vins-nd.hi{border-color:var(--red)}
.vins-nd.ink{background:var(--ink-deep)}
.vins-nd.logo{display:flex;align-items:center;gap:12px}
.vins-nd.logo img{width:28px;height:28px;flex:none}
.vins-nd.logo > div{min-width:0}
.vins-nd.logo span{margin-top:2px}
.vins-ar{position:relative;display:block;height:1px;margin:0 8px;background:var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) calc(var(--i,0)*.32s)}
.vins-ar::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:1px solid var(--mist);border-right:1px solid var(--mist);transform:rotate(45deg)}
.vins-ar::before{content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;background:var(--white);opacity:0}
.vins-flow.play .vins-nd{opacity:1;transform:none}
.vins-flow.play .vins-ar{transform:none}
.vins-flow.play .vins-ar::before{animation:vins-run 2.6s var(--ease) calc(1.6s + var(--i,0)*.2s) infinite}
@keyframes vins-run{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 5px);opacity:0}}
.vins-under{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}

/* 2. Staircase: pilot to P&L */
.vins-stair{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;border-bottom:1px solid var(--line-strong)}
.vins-stair li{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.vins-stair .txt{padding:0 18px 16px 0;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) calc(.3s + var(--i)*.3s),transform .7s var(--ease) calc(.3s + var(--i)*.3s)}
.vins-stair .txt b{display:block;font-size:clamp(20px,2vw,30px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1}
.vins-stair .txt p{margin-top:10px;font-size:14px;line-height:1.5;color:var(--mist);max-width:28ch}
.vins-stair .txt .vins-lbl{margin-bottom:10px}
.vins-stair .blk{display:block;height:calc(64px + var(--i)*56px);background:rgba(237,231,228,calc(.07 + var(--i)*.06));border-top:1px solid var(--line-strong);transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--ease) calc(var(--i)*.3s)}
.vins-stair li + li .blk{border-left:1px solid var(--ink)}
.vins-stair li.hi .blk{background:var(--red);border-top-color:var(--red)}
.vins-stair .blk em{display:block;padding:12px 14px;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.vins-stair.play .blk{transform:none}
.vins-stair.play .txt{opacity:1;transform:none}

/* 3. Scorecard tiles: metric names only, no values */
.vins-dash{border:1px solid var(--line);background:var(--ink-deep)}
.vins-dash-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:16px 20px;border-bottom:1px solid var(--line)}
.vins-dash-top .vins-lbl b{color:var(--white);font-weight:600}
.vins-dash ol{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line)}
.vins-dash li{position:relative;background:var(--ink-raise);padding:22px 20px 20px;display:flex;flex-direction:column;gap:10px;min-height:270px;opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease) calc(var(--i)*.16s),transform .7s var(--ease) calc(var(--i)*.16s)}
.vins-dash li::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--bone);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) calc(.4s + var(--i)*.16s)}
.vins-dash li.hi::before{background:var(--red)}
.vins-dash h3{font-size:clamp(17px,1.4vw,20px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.15}
.vins-dash li p{font-size:14px;line-height:1.5;color:var(--mist)}
.vins-dash .ft{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px}
.vins-dash.play li{opacity:1;transform:none}
.vins-dash.play li::before{transform:none}

/* 4. 2x2 matrix: value against readiness, example use cases */
.vins-mx{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto 28px;gap:0 10px;max-width:900px}
.vins-mx .ya{grid-row:1;grid-column:1;display:flex;align-items:center;justify-content:center}
.vins-mx .ya span{transform:rotate(-90deg);white-space:nowrap}
.vins-mx .xa{grid-row:2;grid-column:2;display:flex;align-items:flex-end;justify-content:space-between}
.vins-mx .plot{grid-row:1;grid-column:2;position:relative;aspect-ratio:16/10;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;border-left:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.vins-mx .q{position:relative;border-right:1px solid var(--line);border-top:1px solid var(--line);background:var(--ink-raise);display:flex;align-items:flex-end;padding:14px 16px;opacity:0;transition:opacity .8s var(--ease) calc(var(--i)*.15s)}
.vins-mx .q b{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.vins-mx .q.go{background:var(--ink-raise2)}
.vins-mx .q.go b{color:var(--white)}
.vins-mx .dot{position:absolute;left:var(--x);bottom:var(--y);width:0;height:0;z-index:2}
.vins-mx .dot i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;background:var(--bone);transform:scale(0) rotate(45deg);transition:transform .6s var(--ease) calc(.8s + var(--d)*.25s)}
.vins-mx .dot.hi i{background:var(--red)}
.vins-mx .dot.risk i::after{content:"";position:absolute;inset:-6px;border:1px dashed var(--mist)}
.vins-mx .dot .t{position:absolute;top:-10px;left:22px;width:max-content;max-width:190px;opacity:0;transition:opacity .6s var(--ease) calc(1s + var(--d)*.25s)}
.vins-mx .dot.l .t{left:auto;right:22px;text-align:right}
.vins-mx .dot .t b{display:block;font-size:13px;font-weight:700;line-height:1.25;color:var(--white)}
.vins-mx.play .q{opacity:1}
.vins-mx.play .dot i{transform:rotate(45deg)}
.vins-mx.play .dot .t{opacity:1}
.vins-mx-key{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 22px}
.vins-mx-key span{display:inline-flex;align-items:center;gap:10px}
.vins-mx-key i{display:inline-block;width:10px;height:10px;transform:rotate(45deg);background:var(--bone)}
.vins-mx-key i.r{background:transparent;border:1px dashed var(--mist)}

/* 5. Seven-phase timeline */
.vins-tl{position:relative}
.vins-tl-bands{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-bottom:22px}
.vins-tl-bands span{padding:0 12px 10px 0;border-bottom:1px solid var(--line-strong);margin-right:10px;opacity:0;transition:opacity .7s var(--ease) calc(var(--i)*.3s)}
.vins-tl ol{list-style:none;position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.vins-tl ol::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease)}
.vins-tl li{position:relative;padding:36px 14px 0 0;min-width:0;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease) calc(.2s + var(--i)*.16s),transform .6s var(--ease) calc(.2s + var(--i)*.16s)}
.vins-tl li::before{content:"";position:absolute;left:0;top:0;width:15px;height:15px;background:var(--ink);border:1px solid var(--white);transition:background .4s var(--ease) calc(.4s + var(--i)*.16s)}
.vins-tl li.gate::before{border-color:var(--red)}
.vins-tl .n{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);font-variant-numeric:tabular-nums}
.vins-tl b{display:block;margin-top:8px;font-size:clamp(15px,1.25vw,18px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.15}
.vins-tl p{margin-top:8px;font-size:13px;line-height:1.5;color:var(--ash);max-width:20ch}
.vins-tl .vins-tag{margin-top:12px}
.vins-tl.play ol::before{transform:none}
.vins-tl.play li{opacity:1;transform:none}
.vins-tl.play li::before{background:var(--white)}
.vins-tl.play li.gate::before{background:var(--red)}
.vins-tl.play .vins-tl-bands span{opacity:1}

/* 6. Group account tree: one account, shared model, brands, markets */
.vins-tree{display:grid;gap:0}
.vins-tree .root{justify-self:center;width:min(100%,560px);text-align:center}
.vins-tree .stem{justify-self:center;width:1px;height:34px;background:var(--line-strong);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease) calc(var(--i)*.3s)}
.vins-tree .band{border-left:3px solid var(--red)}
.vins-tree .brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:relative;padding-top:34px}
.vins-tree .brands::after{content:"";position:absolute;top:0;left:50%;width:1px;height:17px;background:var(--line-strong);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease) .8s}
.vins-tree.play .brands::after{transform:none}
.vins-tree .brands::before{content:"";position:absolute;top:17px;left:calc((100% - 24px)/6);right:calc((100% - 24px)/6);height:1px;background:var(--line-strong);transform:scaleX(0);transition:transform .6s var(--ease) .9s}
.vins-tree .br{position:relative;display:grid;gap:8px;align-content:start}
.vins-tree .br::before{content:"";position:absolute;left:50%;top:-17px;width:1px;height:17px;background:var(--line-strong);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease) 1.1s}
.vins-tree .mk{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px}
.vins-tree .mk .vins-nd{padding:10px 12px}
.vins-tree .mk .vins-nd b{font-size:12px}
.vins-tree .mk .vins-nd span{font-size:12px}
.vins-tree.play .stem,.vins-tree.play .br::before{transform:none}
.vins-tree.play .brands::before{transform:none}
.vins-tree.play .vins-nd{opacity:1;transform:none}

/* 7. Platform stack: Smart CRM, context, agents */
.vins-stack{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px}
.vins-stack ol{list-style:none;display:flex;flex-direction:column-reverse;gap:8px}
.vins-stack li{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.4fr);gap:24px;align-items:center;border:1px solid var(--line-strong);background:var(--ink-raise);padding:22px 24px;opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease) calc(var(--i)*.35s),transform .7s var(--ease) calc(var(--i)*.35s)}
.vins-stack li.hi{border-color:var(--red)}
.vins-stack li .n{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.vins-stack li.hi .n{color:var(--red)}
.vins-stack li h3{font-size:clamp(20px,1.8vw,26px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.1}
.vins-stack li h3 small{display:block;margin-top:6px;font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--mist)}
.vins-stack .chips{justify-content:flex-end;gap:6px}
.vins-stack .chip{font-size:12px;padding:6px 10px}
.vins-stack aside{border:1px dashed var(--line-strong);padding:22px 20px;display:flex;flex-direction:column;justify-content:center;gap:12px;opacity:0;transition:opacity .8s var(--ease) 1.2s}
.vins-stack aside b{font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.vins-stack aside p{font-size:13px;color:var(--ash);line-height:1.5}
.vins-stack.play li{opacity:1;transform:none}
.vins-stack.play aside{opacity:1}

/* 8. Loop: agent work with a person in the loop, and the return path */
.vins-loop{border:1px solid var(--line);background:var(--ink-deep);padding:clamp(20px,2.6vw,36px)}
.vins-loop > ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px}
.vins-loop > ol > li{position:relative;border:1px solid var(--line-strong);background:var(--ink-raise);padding:18px;display:flex;flex-direction:column;gap:8px;min-height:190px;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) calc(var(--i)*.28s),transform .7s var(--ease) calc(var(--i)*.28s)}
.vins-loop > ol > li.hi{border-color:var(--red)}
.vins-loop > ol > li + li::before{content:"";position:absolute;left:-44px;top:50%;width:44px;height:1px;background:var(--line-strong)}
.vins-loop > ol > li + li::after{content:"";position:absolute;left:-12px;top:calc(50% - 4px);width:8px;height:8px;border-top:1px solid var(--mist);border-right:1px solid var(--mist);transform:rotate(45deg)}
.vins-loop > ol > li .vins-lbl{margin-bottom:auto}
.vins-loop > ol > li b{font-size:clamp(16px,1.4vw,19px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.15}
.vins-loop > ol > li p{font-size:13px;line-height:1.5;color:var(--ash)}
.vins-loop > ol > li .split2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}
.vins-ret{position:relative;margin:0 12.5%;height:44px;border:1px solid var(--line-strong);border-top:0;transform:scaleX(0);transition:transform 1s var(--ease) 1.3s}
.vins-ret::before{content:"";position:absolute;left:-5px;top:-2px;width:8px;height:8px;border-top:1px solid var(--mist);border-left:1px solid var(--mist);transform:rotate(45deg)}
.vins-ret span{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);background:var(--ink-deep);padding:0 14px;white-space:nowrap;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.vins-loop.play > ol > li{opacity:1;transform:none}
.vins-loop.play .vins-ret{transform:none}
.vins-loop .vz-chart{margin-top:44px;grid-template-columns:minmax(0,1fr)}
.vins-loop .vz-bars{background:transparent;border:0;border-top:1px solid var(--line);padding:26px 0 0}
.vins-loop .vz-bars > .vins-lbl{margin-bottom:20px}

/* 9. Topic map (insights hub): themes branching from one spine */
.vins-map{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding-top:36px}
.vins-map::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:var(--line-strong);transform:scaleX(0);transition:transform 1.2s var(--ease)}
.vins-map.play::before{transform:none}
.vins-th{position:relative;border:1px solid var(--line);background:var(--ink-raise);padding:20px 18px;min-width:0;opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease) calc(.3s + var(--i)*.15s),transform .7s var(--ease) calc(.3s + var(--i)*.15s)}
.vins-th::before{content:"";position:absolute;left:50%;top:-37px;width:1px;height:36px;background:var(--line-strong)}
.vins-th::after{content:"";position:absolute;left:calc(50% - 4px);top:-5px;width:9px;height:9px;background:var(--white)}
.vins-th.hi{border-color:var(--red)}
.vins-th.hi::after{background:var(--red)}
.vins-th h3{font-size:clamp(16px,1.3vw,19px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.15;padding-bottom:12px;border-bottom:1px solid var(--line-strong)}
.vins-th ul{list-style:none;margin-top:6px}
.vins-th li a{display:block;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.35;color:var(--mist);transition:color .2s,transform .25s var(--ease)}
.vins-th li:last-child a{border-bottom:0}
.vins-th li a:hover{color:var(--white);transform:translateX(4px)}
.vins-th.play{opacity:1;transform:none}

@media (max-width:1100px){
  .vins-dash ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vins-stack{grid-template-columns:minmax(0,1fr)}
  .vins-stack li{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .vins-stack li .n{grid-column:1/-1}
  .vins-map{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vins-map::before,.vins-th::before,.vins-th::after{display:none}
  .vins-map{padding-top:0}
  .vins-loop > ol{gap:36px}
  .vins-loop > ol > li + li::before{left:-36px;width:36px}
}
@media (max-width:820px){
  .vins-flow,.vins-flow.c4{grid-template-columns:minmax(0,1fr)}
  .vins-ar{width:1px;height:30px;margin:8px auto;transform:scaleY(0);transform-origin:top}
  .vins-ar::after{right:auto;left:-4px;top:auto;bottom:0;transform:rotate(135deg)}
  .vins-flow.play .vins-ar::before{animation:none;opacity:0}
  .vins-col.row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vins-col.row > .vins-lbl{grid-column:1/-1}
  .vins-stair{grid-template-columns:minmax(0,1fr);border-bottom:0}
  .vins-stair li{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--line)}
  .vins-stair .blk{height:10px;width:calc(25% + var(--i)*25%);transform:scaleX(0);transform-origin:left;border-top:0;order:-1;margin-top:18px}
  .vins-stair li + li .blk{border-left:0}
  .vins-stair .blk em{display:none}
  .vins-stair .txt{padding:14px 0 18px}
  .vins-stair .txt p{max-width:none}
  .vins-dash ol{grid-template-columns:minmax(0,1fr)}
  .vins-dash li{min-height:0}
  .vins-mx{grid-template-columns:22px minmax(0,1fr)}
  .vins-mx .plot{aspect-ratio:3/4}
  .vins-mx .dot.lm .t{left:auto;right:22px;text-align:right}
  .vins-mx .q{padding:10px}
  .vins-mx .q b{font-size:10px;letter-spacing:.1em}
  .vins-mx .dot .t{max-width:120px}
  .vins-mx .dot .t b{font-size:12px}
  .vins-tl-bands{display:none}
  .vins-tl ol{grid-template-columns:minmax(0,1fr);gap:22px}
  .vins-tl ol::before{left:7px;right:auto;top:0;bottom:0;width:1px;height:auto;transform:scaleY(0);transform-origin:top}
  .vins-tl li{padding:0 0 0 40px}
  .vins-tl li::before{top:2px}
  .vins-tl p{max-width:none}
  .vins-tree .brands{grid-template-columns:minmax(0,1fr);padding-top:28px;gap:28px}
  .vins-tree .brands::before,.vins-tree .brands::after{display:none}
  .vins-tree .br::before{top:-28px;height:28px}
  .vins-stack li{grid-template-columns:minmax(0,1fr);gap:12px;padding:20px}
  .vins-stack .chips{justify-content:flex-start}
  .vins-loop > ol{grid-template-columns:minmax(0,1fr);gap:30px}
  .vins-loop > ol > li{min-height:0}
  .vins-loop > ol > li + li::before{left:50%;top:-30px;width:1px;height:30px}
  .vins-loop > ol > li + li::after{left:calc(50% - 4px);top:-11px;transform:rotate(135deg)}
  .vins-ret{margin:26px 0 0;height:auto;border:1px dashed var(--line-strong);padding:14px;transform:none;opacity:0;transition:opacity .8s var(--ease) 1.2s}
  .vins-ret::before{display:none}
  .vins-ret span{position:static;transform:none;display:block;padding:0;white-space:normal;background:none;text-align:center}
  .vins-loop.play .vins-ret{opacity:1}
  .vins-map{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px) and (min-width:560px){.vins-map{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){
  .vins-nd,.vins-stair .txt,.vins-dash li,.vins-mx .q,.vins-mx .dot .t,.vins-tl li,.vins-tl-bands span,.vins-stack li,.vins-stack aside,.vins-loop > ol > li,.vins-th,.vins-ret{opacity:1!important;transform:none!important;transition:none!important}
  .vins-ar,.vins-stair .blk,.vins-dash li::before,.vins-tl ol::before,.vins-tree .stem,.vins-tree .br::before,.vins-tree .brands::before,.vins-tree .brands::after,.vins-map::before{transform:none!important;transition:none!important}
  .vins-mx .dot i{transform:rotate(45deg)!important;transition:none!important}
  .vins-ar::before{animation:none!important;display:none}
  .vins-tl li::before{background:var(--white)}
  .vins-tl li.gate::before{background:var(--red)}
}