/* BuyersLine ecosystem map (public/ecosystem-map.js). Every class is prefixed em- and every token is
   scoped to .em, so the map looks the same inside the light landing page and the dark architecture page. */
.em{
  --em-bg:#0E0C1F; --em-line:rgba(166,163,189,.16); --em-line2:rgba(166,163,189,.28);
  --em-ink:#ECEAF6; --em-mut:#A6A3BD; --em-faint:#8783A3;
  --em-or:#FC4C02; --em-or-soft:#FF7A3D; --em-cy:#5CC8E6; --em-gr:#7FD39A; --em-am:#F2B84B;
  --em-sans:"Mulish",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --em-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--em-ink); font-family:var(--em-sans);
}
.em *,.em *::before,.em *::after{box-sizing:border-box}
.em-diagram{margin-top:24px}
.em-stage{position:relative;width:100%;max-width:1200px;margin-inline:auto;aspect-ratio:1200/760;container-type:inline-size}
.em-bg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.em-ring{fill:none;stroke:rgba(166,163,189,.13);stroke-width:1}
.em-ring.em-dash{stroke-dasharray:2 7;animation:em-spin 60s linear infinite}
.em-ring.em-rev{animation-direction:reverse;animation-duration:90s}
@keyframes em-spin{to{stroke-dashoffset:-400}}
.em-link{stroke:rgba(92,200,230,.34);stroke-width:1.4;stroke-dasharray:5 7;animation:em-flow 2.4s linear infinite;transition:stroke .3s}
.em-link.em-human{stroke:rgba(252,76,2,.32)}
.em-link.em-lon{stroke:var(--em-or);stroke-width:2;stroke-dasharray:6 5;animation-duration:.9s}
@keyframes em-flow{to{stroke-dashoffset:-48}}
.em-glow{animation:em-breathe 3.2s ease-in-out infinite;transform-origin:600px 380px}
@keyframes em-breathe{50%{opacity:.55;transform:scale(1.06)}}

.em-node{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:15.2%;font-size:clamp(8.5px,.92cqw,12px);margin:0;
  padding:1.35em .85em .95em;border-radius:1em;text-align:center;cursor:pointer;
  color:var(--em-ink);font-family:var(--em-sans);line-height:1.3;
  background:linear-gradient(180deg,rgba(32,28,66,.94),rgba(18,16,40,.94));
  border:1px solid rgba(92,200,230,.30);
  box-shadow:0 .6em 1.8em rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .3s,box-shadow .3s;
}
.em-node:hover{border-color:rgba(92,200,230,.7)}
.em-node:focus-visible,.em-brain:focus-visible{outline:2px solid var(--em-or);outline-offset:3px}
.em-pin{position:absolute;top:-.62em;left:50%;width:1em;height:1em;margin-left:-.5em;border-radius:50%;background:var(--em-gr);box-shadow:0 0 0 .28em var(--em-bg),0 0 .9em rgba(127,211,154,.8)}
.em-pin.em-setup{background:linear-gradient(90deg,var(--em-gr) 50%,var(--em-am) 50%);box-shadow:0 0 0 .28em var(--em-bg),0 0 .9em rgba(242,184,75,.7)}
.em-bar{display:flex;justify-content:center;gap:.3em;margin-bottom:.55em}
.em-bar i{width:.32em;height:.32em;border-radius:50%;background:rgba(166,163,189,.35)}
.em-bar i:first-child{width:1.6em;border-radius:.2em}
.em-label{display:block;font:700 1em/1.25 var(--em-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--em-cy)}
.em-sub{display:block;margin-top:.4em;font-size:1.05em;line-height:1.3;color:var(--em-mut)}
.em-node.em-humann{border-color:rgba(252,76,2,.55);background:linear-gradient(180deg,rgba(52,26,30,.9),rgba(24,16,34,.94))}
.em-node.em-humann .em-label{color:var(--em-or-soft)}
.em-node.em-humann .em-pin{background:var(--em-or);box-shadow:0 0 0 .28em var(--em-bg),0 0 .9em rgba(252,76,2,.8)}
.em-tag{display:inline-block;margin-bottom:.5em;font:700 .8em/1 var(--em-mono);letter-spacing:.14em;color:var(--em-or-soft);border:1px solid rgba(252,76,2,.45);border-radius:99px;padding:.3em .6em}
.em-node.em-on{border-color:var(--em-cy);box-shadow:0 0 0 1px rgba(92,200,230,.5),0 0 2.2em rgba(92,200,230,.35),0 .6em 1.8em rgba(0,0,0,.35)}
.em-node.em-humann.em-on{border-color:var(--em-or);box-shadow:0 0 0 1px rgba(252,76,2,.6),0 0 2.2em rgba(252,76,2,.4)}
.em-node[aria-pressed="true"]::before,.em-brain[aria-pressed="true"]::before{content:"";position:absolute;inset:-7px;border-radius:calc(1.2em + 7px);border:1px solid rgba(236,234,246,.38);pointer-events:none}
.em-node::after,.em-brain::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--em-or);opacity:0;pointer-events:none}
.em-node.em-ping::after,.em-brain.em-ping::after{animation:em-pingk .7s ease-out}
@keyframes em-pingk{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}

.em-brain{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:27%;margin:0;
  font-size:clamp(8.5px,.98cqw,12.5px);text-align:left;cursor:pointer;color:var(--em-ink);font-family:var(--em-sans);line-height:1.3;
  padding:1.3em 1.3em 1.1em;border-radius:1.2em;
  background:linear-gradient(180deg,#221B3F,#15122D);
  border:1px solid rgba(252,76,2,.6);
  box-shadow:0 0 0 1px rgba(252,76,2,.15),0 0 3.5em rgba(252,76,2,.28),0 1.2em 3em rgba(0,0,0,.5);
}
.em-bhead{display:flex;justify-content:space-between;align-items:center;gap:.6em}
.em-btitle{font:700 .92em/1 var(--em-mono);letter-spacing:.16em;color:var(--em-or-soft)}
.em-live{font:700 .8em/1 var(--em-mono);letter-spacing:.12em;color:var(--em-gr);display:inline-flex;align-items:center;gap:.45em}
.em-live::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--em-gr);box-shadow:0 0 .7em var(--em-gr);animation:em-blink 2s ease-in-out infinite}
@keyframes em-blink{50%{opacity:.35}}
.em-bname{display:block;font:900 3.3em/1 var(--em-sans);letter-spacing:.04em;margin:.28em 0 .2em;color:#fff;text-shadow:0 0 .5em rgba(252,76,2,.55)}
.em-bnote{display:block;color:var(--em-mut);font-size:.98em;margin-bottom:.8em}
.em-brow{display:block;border-top:1px solid var(--em-line2);padding:.7em 0 .6em}
.em-rl{display:block;font:700 .82em/1.2 var(--em-mono);letter-spacing:.13em;color:var(--em-cy)}
.em-rt{display:block;color:var(--em-ink);font-size:1em;margin-top:.25em;line-height:1.35}
.em-orch .em-rl{color:var(--em-or-soft)}
.em-dots{display:flex;gap:.45em;margin-top:.55em}
.em-dots i{flex:1;height:.4em;border-radius:.2em;background:rgba(166,163,189,.2);transition:background .3s,box-shadow .3s}
.em-dots i.em-done{background:rgba(252,76,2,.45)}
.em-dots i.em-cur{background:var(--em-or);box-shadow:0 0 .7em var(--em-or)}
.em-now{display:block;font:600 .9em/1.3 var(--em-mono);letter-spacing:.08em;margin-top:.55em;color:var(--em-ink);min-height:1.3em}
.em-now b{color:var(--em-or-soft);font-weight:700}

.em-foot{margin:18px 0 0;text-align:center;font:600 12px/1.5 var(--em-mono);letter-spacing:.2em;color:var(--em-mut)}
.em-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:12px;font:500 11.5px/1.4 var(--em-mono);letter-spacing:.08em;color:var(--em-faint);text-transform:uppercase}
.em-legend span{display:inline-flex;align-items:center;gap:8px}
.em-legend i{display:inline-block;width:18px;height:0;border-top:2px dashed var(--em-cy)}
.em-legend i.em-or{border-top-style:solid;border-color:var(--em-or)}
.em-legend i.em-dot{width:10px;height:10px;border:0;border-radius:50%;background:var(--em-gr)}
.em-legend i.em-dot.em-am{background:var(--em-am)}
.em-legend i.em-hum{width:14px;height:10px;border:1.5px solid var(--em-or);border-radius:3px}
.em-caption{max-width:760px;margin:22px auto 0;padding:16px 20px;border:1px solid var(--em-line2);border-radius:14px;background:rgba(24,21,50,.7);text-align:left}
.em-caption strong{display:block;font:700 12px/1.3 var(--em-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--em-or-soft)}
.em-caption p{margin:6px 0 0;color:var(--em-ink);font-size:15.5px;line-height:1.55}
.em-caption p.em-hint{color:var(--em-faint);font-size:13px}

@media (max-width:960px){
  .em-stage{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;container-type:normal;padding-top:6px}
  .em-bg{display:none}
  .em-node,.em-brain{position:relative;left:auto;top:auto;transform:none;width:auto;font-size:12px}
  .em-node{order:2}
  .em-node[data-node="buyer"]{order:0;grid-column:1/-1}
  .em-brain{order:1;grid-column:1/-1;font-size:13px}
  .em-node[data-node="licensed"]{order:3;grid-column:1/-1}
  .em-sub{font-size:13px}
}
@media (max-width:380px){.em-stage{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .em *,.em *::before,.em *::after{animation:none!important;transition:none!important}
}
/* Narrower hosts (the landing page's content width): keep tags and labels on one line where possible. */
.em-tag{white-space:nowrap;letter-spacing:.08em}
.em-label{letter-spacing:.04em}
