/* The website's top bar and its menus. Used by the product page (dark) and by Talk to us (light: .mnav.light). */
.mnav { --fg: #fff; --dim: #8a92a8; --bar: rgba(6,8,15,.78); --hair: rgba(255,255,255,.09);
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 14px clamp(18px, 4vw, 48px);
  font-family: var(--sans); transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.mnav.light { --fg: #0b1020; --dim: #4a5270; --bar: rgba(250,250,253,.86); --hair: #e6e8f0; }
.mnav.solid, .mnav.open, .mnav.light { background: var(--bar); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--hair); }
.mnav .mlogo { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; }
.mnav .mlogo b { font: 600 18px/1 var(--sans); letter-spacing: -.03em; }
.mnav .mlogo b em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; color: var(--dim); }
.mnav nav { display: flex; gap: 4px; margin-left: 14px; }
.mi { position: relative; }
.mi > button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; padding: 9px 12px; border-radius: 9px;
  font: 500 14.5px var(--sans); color: var(--dim); transition: color .2s, background .2s; }
.mi > button:hover, .mi.open > button { color: var(--fg); }
.mi.open > button { color: #8b7bff; }
.mnav.light .mi.open > button { color: #5b47e0; }
.chev { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.mi.open .chev { transform: rotate(180deg); }

/* the panel */
.mdrop { position: absolute; left: 0; top: calc(100% + 12px); display: grid; gap: 8px 30px; padding: 22px 24px 20px; border-radius: 16px;
  background: #fff; color: #0b1020; border: 1px solid #e8eaf2; box-shadow: 0 30px 70px -22px rgba(6,10,40,.55), 0 4px 14px -6px rgba(6,10,40,.2);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s cubic-bezier(.2,.7,.2,1), visibility 0s .25s; }
.mdrop::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }       /* the pointer can cross the gap */
.mi.open .mdrop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mdrop.one { width: 320px; }
.mdrop.two { grid-template-columns: repeat(2, 268px); }
.mdrop.two.narrow { grid-template-columns: repeat(2, 196px); }
.mdrop.three { grid-template-columns: repeat(3, 176px); }
.mdrop h6 { margin: 0 0 8px; padding: 0 10px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8c93a8; }
.mdrop a { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: #0b1020; transition: background .18s; }
.mdrop a:hover, .mdrop a:focus-visible { background: #f3f2ff; color: #0b1020; }
.mdrop a svg { flex: none; width: 19px; height: 19px; margin-top: 1px; fill: none; stroke: #6a55f0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.mdrop a:hover svg { transform: translateX(2px) scale(1.06); }
.mdrop a span { display: grid; gap: 2px; }
.mdrop a b { font: 560 14.5px/1.3 var(--sans); letter-spacing: -.01em; }
.mdrop a small { font-size: 12.8px; line-height: 1.35; color: #6b7390; }
:root[data-motion="off"] .mdrop, :root[data-motion="off"] .mdrop a svg, :root[data-motion="off"] .chev { transition: none; }

/* right side */
.mcta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.mcta > a:first-child, .mmob > a:first-child { color: var(--dim); text-decoration: none; font-size: 14.5px; transition: color .2s; }
.mcta > a:first-child:hover { color: var(--fg); }
.ncta { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 10px; background: #fff; color: #06080f; text-decoration: none;
  font: 560 14.5px var(--sans); letter-spacing: -.01em; transition: background .2s, box-shadow .3s, color .2s; }
.ncta:hover { background: #d6f35b; color: #06080f; box-shadow: 0 0 40px -6px #d6f35b; }
.mnav.light .ncta { background: #0b1020; color: #fff; } .mnav.light .ncta:hover { background: #5b47e0; color: #fff; box-shadow: none; }
.mmob, .mburger { display: none; }

/* a product tile reached from the menu lights up */
.mcell:target { background: #0d1220; } .mcell:target .no { color: #d6f35b; }
.mcell[id], .mroles[id] { scroll-margin-top: 110px; }

/* ---------- narrow screens: one button opens the whole menu ---------- */
@media (max-width: 980px) {
  .mnav { gap: 12px; }
  .mcta { display: none; }
  .mburger { display: grid; place-content: center; gap: 6px; margin-left: auto; width: 42px; height: 42px; border-radius: 11px; cursor: pointer;
    background: none; border: 1px solid var(--hair); }
  .mburger i { display: block; width: 18px; height: 1.6px; border-radius: 2px; background: var(--fg); transition: transform .25s; }
  .mnav.open .mburger i:first-child { transform: translateY(3.8px) rotate(45deg); }
  .mnav.open .mburger i:last-child { transform: translateY(-3.8px) rotate(-45deg); }
  .mnav nav { display: none; position: absolute; inset: 100% 0 auto; height: calc(100vh - 100%); height: calc(100dvh - 71px); margin: 0; padding: 10px clamp(18px, 4vw, 48px) 28px; overflow-y: auto; flex-direction: column; gap: 0;
    background: #06080f; }
  .mnav.light nav { background: #fafafd; }
  .mnav.open nav { display: flex; }
  .mi { border-bottom: 1px solid var(--hair); }
  .mi > button { width: 100%; justify-content: space-between; padding: 17px 2px; font-size: 17px; color: var(--fg); border-radius: 0; }
  .chev { width: 14px; height: 14px; }
  .mdrop, .mdrop.one, .mdrop.two, .mdrop.two.narrow, .mdrop.three { position: static; display: none; width: auto; grid-template-columns: 1fr 1fr; gap: 16px 12px;
    margin: 0 0 16px; padding: 16px 10px; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
  .mdrop.one { grid-template-columns: 1fr; }
  .mdrop::before { display: none; }
  .mi.open .mdrop { display: grid; }
  .mmob { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; }
  .mmob > a:first-child { font-size: 16px; color: var(--fg); }
}
@media (max-width: 520px) { .mdrop, .mdrop.two, .mdrop.two.narrow, .mdrop.three { grid-template-columns: 1fr; } }