/* Azend site: industry, company and market visuals (group "ind").
   Every class is prefixed vind-. Colours from :root tokens only, square corners,
   red for one highlight per visual. Animates on [data-io].play; reduced motion shows the end state. */

/* A. Six-stage Revenue Engine variant: same vz-funnel, twelve columns instead of fourteen */
@media (min-width:821px){.vz-funnel.vind-f6{grid-template-columns:repeat(12,minmax(0,1fr))}}

/* Shared small label */
.vind-h{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ash)}

/* B. Channel to CRM architecture: inputs, HubSpot core (optional law frame), outputs */
.vind-arch{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1.2fr) 72px minmax(0,1fr);align-items:center}
.vind-col .vind-h{margin-bottom:14px}
.vind-col ul{list-style:none;display:grid;gap:8px}
.vind-col li{border:1px solid var(--line);background:var(--ink-raise);padding:13px 16px;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:var(--white);opacity:0;transform:translateX(-14px);transition:opacity .7s var(--ease) calc(var(--i,0)*.1s),transform .7s var(--ease) calc(var(--i,0)*.1s)}
.vind-col li small{display:block;margin-top:3px;font-size:12px;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--ash)}
.vind-out li{transform:translateX(14px);transition-delay:calc(1s + var(--i,0)*.1s)}
.vind-wire{position:relative;height:100%;min-height:60px}
.vind-wire::before{content:"";position:absolute;left:0;right:6px;top:50%;height:1px;background:var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .45s}
.vind-wire::after{content:"";position:absolute;right:4px;top:calc(50% - 4px);width:8px;height:8px;border-top:1px solid var(--mist);border-right:1px solid var(--mist);transform:rotate(45deg);opacity:0;transition:opacity .4s var(--ease) 1.2s}
.vind-wire + .vind-core + .vind-wire::before{transition-delay:.95s}
.vind-wire i{position:absolute;left:0;top:calc(50% - 3px);width:7px;height:7px;background:var(--bone);opacity:0}
.vind-core{position:relative;opacity:0;transform:scale(.96);transition:opacity .8s var(--ease) .3s,transform .8s var(--ease) .3s}
.vind-core.vind-law{border:1px dashed var(--line-strong);padding:38px 14px 14px}
.vind-lawtag{position:absolute;left:14px;top:12px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.vind-crm{border:1px solid var(--line-strong);border-top:2px solid var(--red);background:var(--ink-deep);padding:clamp(20px,2.2vw,30px)}
.vind-crm b{display:block;margin-top:6px;font-size:clamp(24px,2.4vw,34px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1}
.vind-crm em{display:block;margin-top:8px;font-style:normal;font-size:14px;color:var(--mist)}
.vind-hubs{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.vind-hubs li{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);border:1px solid var(--line-strong);padding:7px 9px}
.vind-arch.play .vind-col li,.vind-arch.play .vind-core{opacity:1;transform:none}
.vind-arch.play .vind-wire::before{transform:none}
.vind-arch.play .vind-wire::after{opacity:1}
.vind-arch.play .vind-wire i{animation:vind-run 2.8s var(--ease) 1.6s infinite}
.vind-arch.play .vind-wire + .vind-core + .vind-wire i{animation-delay:2.4s}
@keyframes vind-run{0%{opacity:0;transform:translateX(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(56px)}}

/* C. Matrix: industries against core motions, square dots (filled = in the playbook) */
.vind-mxw{border:1px solid var(--line);background:var(--ink-raise);padding:clamp(16px,2.6vw,36px)}
.vind-mx{width:100%;border-collapse:collapse;table-layout:fixed}
.vind-mx th,.vind-mx td{border-bottom:1px solid var(--line);padding:16px 8px;text-align:center;vertical-align:middle}
.vind-mx thead th{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);line-height:1.35;vertical-align:bottom;border-bottom:1px solid var(--line-strong)}
.vind-mx thead th:first-child,.vind-mx tbody th{text-align:left;width:30%}
.vind-mx tbody th{font-size:clamp(14px,1.3vw,17px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;padding-left:0}
.vind-mx tbody th a{color:var(--white)}
.vind-mx tbody th a:hover{color:var(--mist)}
.vind-mx tbody tr:last-child th,.vind-mx tbody tr:last-child td{border-bottom:0}
.vind-mx td i{display:inline-block;width:14px;height:14px;border:1px solid var(--mist);transform:scale(0) rotate(45deg);transition:transform .55s var(--ease) calc(var(--r,0)*.12s + var(--c,0)*.07s)}
.vind-mx td i.on{background:var(--bone);border-color:var(--bone)}
.vind-mx td.hi i.on{background:var(--red);border-color:var(--red)}
.vind-mx thead th.hi{color:var(--white)}
.vind-mxw.play .vind-mx td i{transform:rotate(45deg)}
.vind-key{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.vind-key span{display:inline-flex;align-items:center;gap:10px}
.vind-key i{display:inline-block;width:10px;height:10px;border:1px solid var(--mist);transform:rotate(45deg)}
.vind-key i.on{background:var(--bone);border-color:var(--bone)}

/* D. Timeline with year ticks: each column is one era, ticks show how long it ran */
.vind-tl{list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.vind-tl > li{position:relative;padding:56px clamp(16px,2.4vw,36px) 0 0}
.vind-tl > li + li{padding-left:clamp(16px,2.4vw,36px);border-left:1px solid var(--line)}
.vind-tl .ax{position:absolute;left:0;right:0;top:10px;height:1px;background:var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) calc(var(--i,0)*.5s)}
.vind-tl > li:last-child .ax{background:none;border-top:1px dashed var(--line-strong)}
.vind-tl .tk{position:absolute;left:0;right:0;top:6px;display:flex;justify-content:space-evenly;pointer-events:none}
.vind-tl .tk span{width:1px;height:9px;background:var(--ash);opacity:0;transition:opacity .4s var(--ease) calc(var(--i,0)*.5s + .5s)}
.vind-tl .nd{position:absolute;left:0;top:3px;width:15px;height:15px;background:var(--ink);border:1px solid var(--white);transform:scale(0);transition:transform .6s var(--ease) calc(var(--i,0)*.5s),background .4s}
.vind-tl > li + li .nd{left:-8px}
.vind-tl > li.now .nd{border-color:var(--red)}
.vind-tl .y{display:block;font-size:clamp(40px,5vw,72px);font-weight:800;line-height:.9;letter-spacing:-.01em;font-variant-numeric:tabular-nums;opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease) calc(var(--i,0)*.5s + .2s),transform .8s var(--ease) calc(var(--i,0)*.5s + .2s)}
.vind-tl h3{margin-top:16px;font-size:clamp(18px,1.6vw,23px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.15}
.vind-tl p{margin-top:8px;font-size:15px;color:var(--mist);max-width:34ch}
.vind-tl h3,.vind-tl p,.vind-tl .mg{opacity:0;transition:opacity .8s var(--ease) calc(var(--i,0)*.5s + .35s)}
.vind-tl .mg{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.vind-tl .mg li{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line-strong);padding:7px 9px;color:var(--mist);transform:translateX(calc(var(--k,0)*18px));transition:transform .9s var(--ease) 1.4s}
.vind-tl.play .ax{transform:none}
.vind-tl.play .tk span{opacity:.7}
.vind-tl.play .nd{transform:none;background:var(--white)}
.vind-tl.play > li.now .nd{background:var(--red)}
.vind-tl.play .y,.vind-tl.play h3,.vind-tl.play p,.vind-tl.play .mg{opacity:1;transform:none}
.vind-tl.play .mg li{transform:none}
.vind-tl.play > li.now .nd::after{content:"";position:absolute;inset:-1px;border:1px solid var(--red);animation:vind-pulse 2.4s ease-out 1.6s infinite}
@keyframes vind-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}

/* E. Client cluster: industries as groups, one square per name */
.vind-cl{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.vind-cl > li{position:relative;background:var(--ink);padding:clamp(18px,1.8vw,26px);min-height:190px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:scale(.94);transition:opacity .6s var(--ease) calc(var(--i,0)*.07s),transform .6s var(--ease) calc(var(--i,0)*.07s)}
.vind-cl > li .vind-h{min-height:2.6em}
.vind-cl .dots{display:flex;gap:6px}
.vind-cl .dots i{width:9px;height:9px;background:var(--bone);transform:translate(var(--dx,-40px),var(--dy,30px)) scale(.3);opacity:0;transition:transform 1s var(--ease) calc(.4s + var(--i,0)*.07s),opacity .6s var(--ease) calc(.4s + var(--i,0)*.07s)}
.vind-cl ul{list-style:none;margin-top:auto;display:grid;gap:6px}
.vind-cl ul li{font-size:clamp(17px,1.5vw,22px);font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;color:var(--white);overflow-wrap:anywhere}
.vind-cl > li.hub{grid-column:span 2;background:var(--ink-deep);justify-content:flex-end}
.vind-cl > li.hub b{font-size:clamp(26px,2.8vw,40px);font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.vind-cl > li.hub p{font-size:14px;color:var(--mist);max-width:36ch}
.vind-cl > li.hub .sq{width:14px;height:14px;background:var(--red);margin-bottom:auto}
.vind-cl.play > li{opacity:1;transform:none}
.vind-cl.play .dots i{transform:none;opacity:1}

/* F. Data protection layers: nested frames around the customer record */
.vind-ly{position:relative;max-width:980px}
.vind-ly .lyr{position:relative;border:1px solid var(--line-strong);background:rgba(237,231,228,calc(var(--d,0)*.025));padding:14px clamp(10px,2.2vw,30px) clamp(10px,2.2vw,30px);opacity:0;transform:scale(.97);transition:opacity .7s var(--ease) calc(var(--d,0)*.22s),transform .7s var(--ease) calc(var(--d,0)*.22s)}
.vind-ly .lyr > header{display:flex;margin-bottom:14px;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.vind-ly .lyr > header b{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.vind-ly .lyr > header span{font-size:13px;color:var(--ash)}
.vind-ly .lyr > header .n{font-size:11px;letter-spacing:.16em;color:var(--ash);font-variant-numeric:tabular-nums}
.vind-ly .lyr.law{border-style:dashed}
.vind-ly .core{border:1px solid var(--red);background:var(--ink-deep);padding:clamp(22px,3vw,40px) clamp(14px,2.2vw,30px);text-align:center;opacity:0;transform:scale(.9);transition:opacity .7s var(--ease) 1.2s,transform .7s var(--ease) 1.2s}
.vind-ly .core b{display:block;font-size:clamp(20px,2.2vw,30px);font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.vind-ly .core span{display:block;margin-top:8px;font-size:14px;color:var(--mist)}
.vind-ly.play .lyr,.vind-ly.play .core{opacity:1;transform:none}

@media (max-width:1100px){
  .vind-cl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vind-cl > li.hub{grid-column:1/-1;min-height:150px}
}
@media (max-width:820px){
  .vind-arch{grid-template-columns:minmax(0,1fr)}
  .vind-wire{height:48px;min-height:0}
  .vind-wire::before{left:24px;right:auto;top:0;bottom:8px;width:1px;height:auto;transform:scaleY(0);transform-origin:top}
  .vind-wire::after{left:20px;right:auto;top:auto;bottom:4px;transform:rotate(135deg)}
  .vind-wire i{left:21px;top:0}
  .vind-arch.play .vind-wire i{animation-name:vind-drop}
  .vind-col li,.vind-out li{transform:translateY(10px)}
  .vind-col ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vind-col li{padding:11px 12px;font-size:12px;letter-spacing:.06em}
  .vind-mx thead th{height:150px;padding:8px 0;font-size:10px;letter-spacing:.1em}
  .vind-mx thead th span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);text-align:left;white-space:nowrap}
  .vind-mx thead th:first-child{height:auto;vertical-align:bottom}
  .vind-mx thead th:first-child,.vind-mx tbody th{width:38%}
  .vind-mx th,.vind-mx td{padding:13px 2px}
  .vind-mx tbody th{font-size:12px;letter-spacing:.04em;padding-left:0}
  .vind-mx td i{width:11px;height:11px}
  .vind-tl{grid-template-columns:minmax(0,1fr)}
  .vind-tl > li,.vind-tl > li + li{padding:0 0 36px 40px;border-left:0}
  .vind-tl .ax{left:7px;right:auto;top:0;bottom:0;width:1px;height:auto;transform:scaleY(0);transform-origin:top}
  .vind-tl > li:last-child .ax{border-top:0;border-left:1px dashed var(--line-strong);bottom:12px}
  .vind-tl .tk{left:3px;right:auto;top:30px;bottom:0;flex-direction:column;justify-content:space-evenly}
  .vind-tl .tk span{width:9px;height:1px}
  .vind-tl .nd,.vind-tl > li + li .nd{left:0;top:4px}
  .vind-tl .y{font-size:44px}
  .vind-cl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vind-cl > li{min-height:150px;padding:16px}
  .vind-cl ul li{font-size:16px}
  .vind-cl > li:last-child:nth-child(even){grid-column:1/-1}
  .vind-ly .lyr > header{flex-direction:column;gap:2px}
  .vind-ly .lyr > header b{font-size:12px;letter-spacing:.1em}
  .vind-ly .lyr > header span{font-size:12px;line-height:1.35}
}
@keyframes vind-drop{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(32px)}}
@media (max-width:420px){
  .vind-ly .lyr{padding-left:8px;padding-right:8px}
}
@media (prefers-reduced-motion:reduce){
  .vind-col li,.vind-core,.vind-cl > li,.vind-cl .dots i,.vind-ly .lyr,.vind-ly .core,.vind-tl .y,.vind-tl h3,.vind-tl p,.vind-tl .mg{opacity:1!important;transform:none!important;transition:none!important}
  .vind-wire::before,.vind-tl .ax,.vind-tl .nd,.vind-tl .mg li{transform:none!important;transition:none!important}
  .vind-wire::after,.vind-tl .tk span{opacity:1!important;transition:none!important}
  .vind-wire i,.vind-tl > li.now .nd::after{animation:none!important;display:none}
  .vind-mx td i{transform:rotate(45deg)!important;transition:none!important}
  .vind-tl .nd{background:var(--white)}
  .vind-tl > li.now .nd{background:var(--red)}
}