/* The one navigation bar both pages share, so nothing moves when you switch between Product and Engineering.
   Every class is prefixed mwn- so neither page's own styles can reach it. */
.mwn { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(14,14,17,.92); border-bottom:1px solid rgba(72,71,75,.22); font-family:'Space Grotesk',sans-serif; transition:background .3s; }
.mwn.scrolled { background:rgba(14,14,17,.97); }
.mwn-in { box-sizing:border-box; max-width:1280px; margin:0 auto; padding:0 1.5rem; height:72px; display:flex; align-items:center; gap:2rem; line-height:18px; }
.mwn-brand { display:flex; align-items:center; gap:.7rem; font-weight:700; font-size:1.2rem; letter-spacing:-.02em; color:#f0edf1; text-decoration:none; flex-shrink:0; }
.mwn-brand svg { width:36px; height:36px; display:block; }
.mwn-links { display:flex; gap:1.75rem; }
.mwn-links a { color:#acaaae; font-size:.9rem; font-weight:500; text-decoration:none; position:relative; padding:.25rem 0; white-space:nowrap; transition:color .2s; }
.mwn-links a:hover { color:#f0edf1; }
.mwn-links a.active { color:#cc97ff; }
.mwn-links a.active::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:9999px; background:#cc97ff; }
.mwn-right { margin-left:auto; display:flex; align-items:center; gap:.75rem; }
.mwn .ms { font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; }

/* Product | Engineering: the page you are on is the white side */
.mwn-seg { display:inline-flex; align-items:stretch; height:40px; padding:3px; border-radius:12px; background:#1f1f23; border:1px solid rgba(72,71,75,.4); box-sizing:border-box; }
.mwn-seg > * { display:inline-flex; align-items:center; gap:.45rem; padding:0 .8rem 0 .65rem; border-radius:9px; font:600 .84rem 'Space Grotesk',sans-serif; white-space:nowrap; color:#acaaae; text-decoration:none; transition:color .2s, background-size .3s; }
.mwn-seg > a:hover { color:#f0edf1; }
.mwn-seg .ms { font-size:1.05rem; }
.mwn-seg-e { background-image:linear-gradient(rgba(204,151,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(204,151,255,.07) 1px, transparent 1px); background-size:6px 6px; }
.mwn-seg-e:hover { background-size:5px 5px; }
.mwn-seg > .on { background:#f0edf1; color:#151318; }
.mwn-eng-ico { width:26px; height:20px; display:block; }

/* language picker */
.mwn-lang { position:relative; }
.mwn-lang-btn { display:inline-flex; align-items:center; gap:.45rem; height:40px; padding:0 .55rem 0 .7rem; border-radius:12px; background:#1f1f23; border:1px solid rgba(72,71,75,.4); color:#f0edf1; font:600 .82rem 'Space Grotesk',sans-serif; cursor:pointer; box-sizing:border-box; }
.mwn-lang-btn:hover { border-color:#5a5960; }
.mwn-lang-btn .ms { font-size:1.1rem; color:#acaaae; transition:transform .2s; }
.mwn-lang.open .mwn-lang-btn .ms { transform:rotate(180deg); }
.mwn .fi { width:1.25em; line-height:.9em; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.mwn-lang-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:170px; padding:6px; border-radius:12px; background:#1f1f23; border:1px solid rgba(72,71,75,.45); box-shadow:0 20px 40px -20px rgba(0,0,0,.9); display:none; }
.mwn-lang.open .mwn-lang-menu { display:block; }
.mwn-lang-menu button { width:100%; display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border-radius:8px; border:0; background:none; color:#acaaae; font:500 .9rem 'Space Grotesk',sans-serif; cursor:pointer; text-align:left; }
.mwn-lang-menu button:hover { background:#25252a; color:#f0edf1; }
.mwn-lang-menu button.on { color:#f0edf1; }
.mwn-lang-menu button.on::after { content:'check'; font-family:'Material Symbols Outlined'; margin-left:auto; color:#cc97ff; font-size:1.05rem; }

/* call to action */
.mwn-cta { display:inline-flex; align-items:center; gap:.45rem; height:40px; padding:0 1.1rem; border-radius:9999px; background:#cc97ff; color:#2b0a4d; font:700 .86rem 'Space Grotesk',sans-serif; text-decoration:none; white-space:nowrap; transition:background .2s, transform .15s; box-sizing:border-box; }
.mwn-cta:hover { background:#d9b0ff; }
.mwn-cta:active { transform:scale(.97); }
.mwn-cta .ms { font-size:1.05rem; }
.mwn-ham { display:none; width:44px; height:44px; margin-right:-8px; align-items:center; justify-content:center; background:none; border:0; color:#f0edf1; cursor:pointer; padding:0; }
.mwn-ham .ms { font-size:1.75rem; }
html { scroll-padding-top:80px; }

/* mobile menu for pages that don't bring their own */
.mwn-mm { position:fixed; inset:0; z-index:200; background:#0b0b0d; transform:translateX(100%); transition:transform .35s ease; display:flex; flex-direction:column; padding:1.5rem; font-family:'Space Grotesk',sans-serif; }
.mwn-mm.open { transform:none; }
.mwn-mm-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; font-weight:700; font-size:1.2rem; color:#f0edf1; }
.mwn-mm-top button { width:44px; height:44px; margin-right:-8px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; color:#f0edf1; cursor:pointer; }
.mwn-mm-top .ms { font-family:'Material Symbols Outlined'; font-size:1.75rem; font-feature-settings:'liga'; }
.mwn-mm a { color:#f0edf1; text-decoration:none; font-size:1.4rem; font-weight:600; padding:1rem 0; border-bottom:1px solid rgba(72,71,75,.2); }

@media (max-width:1100px) { .mwn-links { display:none; } .mwn-ham { display:inline-flex; } }
@media (max-width:768px) {
  .mwn-in { gap:1rem; }
  .mwn-seg > * span:not(.ms) { display:none; }
  .mwn-seg-e span { display:none; }
  .mwn-cta span:not(.ms) { display:none; } .mwn-cta { padding:0 .8rem; }
}
@media (max-width:480px) {
  .mwn-in { padding:0 1rem; gap:.75rem; }
  .mwn-brand { font-size:0; gap:0; }
  .mwn-right { gap:.5rem; }
  #mwnCode { display:none; } .mwn-lang-btn { padding:0 .35rem 0 .55rem; gap:.25rem; }
}