/* ============================================================
   products.css — infographic and screenshot components for the
   product pages (AIR Playground, IMR, Business ontology) and the
   "what's new" blocks on the home, Gothink AIR, Gothink Witness
   and Optim pages. Colours and fonts come from styles.css tokens.
   Every diagram here is HTML, not a fixed-width image, so it
   reflows to a vertical stack on a phone instead of shrinking.
   ============================================================ */

/* ---- NEW badge (nav menu, tiles) ---- */
.nb{display:inline-flex;align-items:center;margin-left:6px;padding:0 5px;border-radius:3px;
  font:700 9px/16px var(--mono);letter-spacing:.1em;color:#fff;background:var(--ac);vertical-align:1px}

/* ---- screenshot in a browser frame ---- */
.shot{margin:0;border:1px solid var(--line2);border-radius:12px;background:var(--panel);overflow:hidden;
  box-shadow:0 1px 0 rgba(14,19,23,.03),0 18px 40px -22px rgba(14,19,23,.28)}
.shot-bar{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--panel2)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--line2);flex:0 0 auto}
.shot-bar span{margin-left:8px;font:500 11.5px var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.shot img,.shot picture{display:block;width:100%;height:auto}
.shot figcaption{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:10px 14px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.shot figcaption b{color:var(--ink);font-weight:600}
.shot-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:860px){.shot-pair{grid-template-columns:1fr}}

/* callout pins over a screenshot */
.pinwrap{position:relative}
.pin{position:absolute;display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--ac);color:#fff;font:700 12px var(--mono);
  box-shadow:0 0 0 4px rgba(10,108,127,.22)}
.pin.w{background:var(--warn);box-shadow:0 0 0 4px rgba(138,96,8,.22)}
.pins{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:14px}
.pins div{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2)}
.pins div b{color:var(--ink);font-weight:600}
.pins .pin{position:static;flex:0 0 auto;width:22px;height:22px;font-size:11px;box-shadow:none}
@media (max-width:640px){.pinwrap .pin{display:none}}

/* ---- flow: nodes joined by arrows; wraps vertical on phones ---- */
.flowx{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap}
.flowx .fn{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:6px;padding:14px 14px 13px;
  background:var(--panel);border:1px solid var(--line2);border-radius:10px}
.flowx .fn.hot{border-color:var(--ac);box-shadow:inset 0 3px 0 var(--ac)}
.flowx .fn.warm{border-color:var(--warn);box-shadow:inset 0 3px 0 var(--warn)}
.flowx .fn.ok{border-color:var(--ok);box-shadow:inset 0 3px 0 var(--ok)}
.flowx .fn .k{font:600 9.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.flowx .fn h4{margin:0;font:700 14.5px/1.25 var(--disp);color:var(--ink);display:flex;align-items:center;gap:8px}
.flowx .fn p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.flowx .fn .chips{margin-top:auto;padding-top:6px}
.flowx .fn .chip{font-size:11px}
.flowx .ar{flex:0 0 26px;display:flex;align-items:center;justify-content:center;color:var(--ac)}
.flowx .ar::before{content:"";width:18px;height:2px;background:currentColor}
.flowx .ar::after{content:"";border:5px solid transparent;border-left:7px solid currentColor;margin-left:-1px}
@media (max-width:860px){
  .flowx{flex-direction:column}
  .flowx .ar{flex:0 0 22px}
  .flowx .ar::before{width:2px;height:12px}
  .flowx .ar::after{border:5px solid transparent;border-top:7px solid currentColor;margin:0}
  .flowx .ar{flex-direction:column}
}

/* ---- platform map (home) ---- */
.pmap{display:grid;grid-template-columns:1fr 2.1fr 1.25fr;gap:14px;align-items:stretch}
.pmap .col{display:flex;flex-direction:column;gap:10px;min-width:0}
.pmap .colhd{font:600 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:0 2px}
.pm{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;background:var(--panel);
  border:1px solid var(--line2);border-radius:10px;color:inherit}
a.pm:hover{border-color:var(--ac);text-decoration:none}
.pm img{width:26px;height:26px;flex:0 0 auto;border-radius:5px}
.pm .gl{width:26px;height:26px;flex:0 0 auto;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:var(--panel2);color:var(--ac)}
.pm .gl svg{width:15px;height:15px}
.pm b{display:block;font:700 13.5px/1.25 var(--disp);color:var(--ink)}
.pm span{display:block;font-size:12px;line-height:1.45;color:var(--ink-2);margin-top:2px}
.pm.core{background:var(--panel2);border-color:var(--ac);box-shadow:inset 0 3px 0 var(--ac)}
.pm.core b{font-size:16px}
.pm.warm{border-color:var(--warn)}
.pm.src{border-style:dashed}
.layers{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.layers i{font:600 10px var(--mono);letter-spacing:.06em;font-style:normal;padding:3px 7px;border-radius:4px;
  background:var(--panel);border:1px solid var(--line2);color:var(--ink)}
.rail{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.rail .pm{background:linear-gradient(0deg,var(--panel),var(--panel))}
.pmap .pipe{display:flex;align-items:center;justify-content:center;color:var(--ac);font:600 10px var(--mono);letter-spacing:.12em}
@media (max-width:980px){.pmap{grid-template-columns:1fr}.rail{grid-template-columns:1fr}}

/* ---- "what's new" strip ---- */
.wn{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.wn a{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line2);border-radius:10px;
  background:var(--panel);color:inherit;min-width:0}
.wn a:hover{border-color:var(--ac);text-decoration:none}
.wn .d{font:600 9.5px var(--mono);letter-spacing:.13em;color:var(--ac);text-transform:uppercase}
.wn b{font:700 14px/1.3 var(--disp);color:var(--ink)}
.wn span{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.wn .go{margin-top:auto;font:600 12px var(--ff);color:var(--ac)}

/* ---- three-way data-source dial (Playground) ---- */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mode{border:1px solid var(--line2);border-radius:10px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column}
.mode .mh{padding:10px 13px;font:700 12.5px var(--ff);color:#fff;display:flex;align-items:center;gap:8px}
.mode.i .mh{background:var(--ok)}.mode.h .mh{background:#2F4FC4}.mode.e .mh{background:var(--warn)}
.mode .mb{padding:12px 13px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--ink-2)}
.mode .row2{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.mode .row2:last-child{border-bottom:0}
.mode .row2 b{color:var(--ink);font-weight:600}
.yes{color:var(--ok);font-weight:700}.no{color:var(--dim);font-weight:700}.maybe{color:var(--warn);font-weight:700}
@media (max-width:860px){.modes{grid-template-columns:1fr}}

/* ---- version diff (amendment) ---- */
.vdiff{display:grid;grid-template-columns:1fr 64px 1fr;gap:0;align-items:stretch}
.vcard{border:1px solid var(--line2);border-radius:10px;background:var(--panel);padding:13px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.vcard.new{border-color:var(--warn);box-shadow:inset 0 3px 0 var(--warn)}
.vcard .vh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 12px var(--mono);color:var(--ink)}
.vcard .ln{font-size:12.5px;line-height:1.5;color:var(--ink-2);padding:6px 8px;border-radius:6px;background:var(--panel2)}
.vcard .ln.del{color:var(--err);text-decoration:line-through;background:rgba(179,46,38,.06)}
.vcard .ln.ins{color:var(--ok);background:rgba(23,117,79,.07)}
.vmid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--warn);
  font:700 9.5px var(--mono);letter-spacing:.12em;text-align:center}
.vmid svg{width:30px;height:30px}
@media (max-width:860px){.vdiff{grid-template-columns:1fr}.vmid{flex-direction:row;padding:8px 0}}

/* ---- matching rules ladder ---- */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ladder div{border:1px solid var(--line2);border-radius:10px;padding:12px;background:var(--panel);display:flex;flex-direction:column;gap:5px}
.ladder .n{font:700 22px var(--mono);color:var(--ac)}
.ladder b{font:700 13px var(--disp);color:var(--ink)}
.ladder span{font-size:12px;line-height:1.45;color:var(--ink-2)}
@media (max-width:860px){.ladder{grid-template-columns:1fr 1fr}}

/* ---- export format chips ---- */
.fmts{display:flex;flex-wrap:wrap;gap:8px}
.fmt{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line2);border-radius:8px;
  background:var(--panel);font:600 12.5px var(--ff);color:var(--ink);white-space:nowrap}
.fmt i{font:700 9.5px var(--mono);letter-spacing:.06em;font-style:normal;padding:2px 5px;border-radius:3px;color:#fff}
.fmt .pdf{background:#B32E26}.fmt .docx{background:#2F4FC4}.fmt .pptx{background:#C24A15}
.fmt .xlsx{background:#17754F}.fmt .csv{background:#5C6874}.fmt .md{background:#0E1317}.fmt .json{background:#0A6C7F}

/* ---- big number row inside a figure ---- */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.nums div{padding:12px;border-radius:10px;background:var(--panel2);display:flex;flex-direction:column;gap:3px}
.nums .v{font:700 22px var(--mono);color:var(--ac);letter-spacing:-.02em}
.nums .k{font:600 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.nums .s{font-size:12px;color:var(--ink-2)}

/* ---- vs table (Playground vs IMR) ---- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vs > div{border:1px solid var(--line2);border-radius:10px;background:var(--panel);padding:14px}
.vs h4{margin:0 0 8px;font:700 15px var(--disp);display:flex;align-items:center;gap:8px}
.vs ul{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.vs .q{font:600 13px var(--ff);color:var(--ac);margin-bottom:6px}
@media (max-width:760px){.vs{grid-template-columns:1fr}}

.fig .fig-body{padding:16px 16px 18px}
.gap16{height:16px}

/* ---- Products mega menu (rail of categories + two-column grid with icons) ----
   Keeps the .ix-nav-a / .ix-menu hooks gothink.js uses for hover-intent; only the
   panel's shape changes. Centred under the header so it has room on any width. */
.ix-menu.mm{position:fixed;top:calc(var(--nav-h) + 6px);left:50%;transform:translateX(-50%);
  width:min(1180px,calc(100vw - 32px));min-width:0;max-height:calc(100vh - var(--nav-h) - 24px);
  flex-direction:row;padding:0;overflow:hidden;border-radius:16px;
  box-shadow:0 24px 70px rgba(10,12,15,.20)}
.ix-nav-a:hover + .ix-menu.mm,.ix-menu.mm:hover{display:flex}
.mm-rail{flex:0 0 250px;display:flex;flex-direction:column;gap:6px;padding:18px 14px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border-right:1px solid var(--line)}
.mm-tab{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:13px 14px;border:0;border-radius:10px;background:transparent;cursor:pointer;
  font:600 15px var(--disp);color:var(--ink-2);text-align:left;white-space:nowrap}
.mm-tab svg{width:16px;height:16px;opacity:0;transition:opacity .15s,transform .15s;flex:0 0 auto}
.mm-tab:hover,.mm-tab:focus-visible{color:var(--ink);background:var(--panel);outline:none}
.mm-tab.on{color:var(--ink);background:var(--panel);box-shadow:0 1px 0 var(--line),0 0 0 1px var(--line)}
.mm-tab.on svg{opacity:1;color:var(--ac)}
.mm-promo{margin-top:auto;display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);text-decoration:none}
.mm-promo:hover{border-color:var(--ac);text-decoration:none}
.mm-promo .k{font:700 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ac)}
.mm-promo b{font:700 14px var(--disp);color:var(--ink)}
.mm-promo span{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.mm-promo .go{margin-top:4px;font:600 12.5px var(--ff);color:var(--ac)}
.mm-panes{flex:1 1 auto;min-width:0;min-height:384px;padding:22px 26px;overflow-y:auto;overscroll-behavior:contain}
.mm-pane{display:none}
.mm-pane.on{display:block}
.mm-hd{display:none}
.mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
.mm-item{display:flex;align-items:center;gap:16px;padding:12px 12px;border-radius:12px;text-decoration:none}
.mm-item:hover,.mm-item:focus-visible{background:var(--panel2);text-decoration:none;outline:none}
.mm-item[aria-current="page"]{background:var(--panel2)}
.mm-ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);box-shadow:0 1px 2px rgba(10,12,15,.06);color:var(--ac)}
.mm-ic svg{width:21px;height:21px}
.mm-ic.wit{color:#5C3CB0}.mm-ic.opt{color:var(--ac2)}.mm-ic.prf{color:var(--ink-2)}
:root[data-theme="dark"] .mm-ic.wit{color:#B18CFF}
.mm-item:hover .mm-ic{border-color:var(--line2)}
.mm-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.mm-tx b{font:600 15px var(--disp);color:var(--ink);letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mm-tx b .nb{font-size:9px}
.mm-tx>span{font-size:13px;line-height:1.45;color:var(--ink-2)}
@media (max-width:1100px){.mm-rail{flex-basis:210px}.mm-grid{gap:4px 12px}}
@media (max-width:900px){
  .ix-menu.mm{position:static;transform:none;width:auto;max-height:none;flex-direction:column;
    border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
  .mm-rail{display:none}
  .mm-panes{padding:0 0 0 4px;overflow:visible;min-height:0}
  .mm-pane,.mm-pane.on{display:block;margin-bottom:10px}
  .mm-hd{display:block;font:700 10px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim);padding:10px 12px 4px}
  .mm-grid{grid-template-columns:1fr;gap:0}
  .mm-item{padding:9px 12px;gap:12px}
  .mm-ic{width:36px;height:36px;border-radius:10px}
  .mm-ic svg{width:18px;height:18px}
  .mm-tx b{font-size:14px}.mm-tx>span{font-size:12.5px}
}