/* The menu bar on every page (markup comes from lib/menu.js). */
.zk { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s; font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif; }
.zk.scrolled { border-bottom-color:#e3e6f0; box-shadow:0 6px 24px rgba(15,23,42,.06); }
.zk-bar { max-width:1180px; margin:0 auto; padding:0 20px; height:68px; display:flex; align-items:center; gap:28px; }
.zk-logo { display:block; line-height:0; flex:none; } .zk-logo img { height:44px; width:auto; display:block; margin-left:-6px; }
.zk-nav { display:flex; align-items:center; gap:4px; flex:1; }
.zk-top { font:inherit; font-size:15px; font-weight:600; color:#334155; background:none; border:0; border-radius:10px; padding:9px 12px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:5px; line-height:1.2; }
.zk-top:hover, .zk-dd.open > .zk-top { background:#f1f3fb; color:#0f172a; }
.zk-top.on, .zk-dd.on > .zk-top { color:#4f46e5; }
.zk-chev { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; opacity:.7; }
.zk-dd { position:relative; } .zk-dd.open .zk-chev { transform:rotate(180deg); }
.zk-panel { position:absolute; top:calc(100% + 12px); left:-14px; background:#fff; border:1px solid #e3e6f0; border-radius:18px; box-shadow:0 24px 60px rgba(15,23,42,.16); padding:16px; display:grid; gap:10px 18px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s, transform .16s, visibility .16s; }
.zk-panel.wide { grid-template-columns:repeat(2, 290px); }
.zk-panel::before { content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }   /* keeps the panel open while the pointer crosses the gap */
.zk-dd.open .zk-panel { opacity:1; visibility:visible; transform:none; }
@media (hover:hover) and (min-width:961px) { .zk-dd:hover .zk-panel, .zk-dd:focus-within .zk-panel { opacity:1; visibility:visible; transform:none; } .zk-dd:hover .zk-chev { transform:rotate(180deg); } }
.zk-h { margin:2px 10px 6px; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#8a93a6; }
.zk-item { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:12px; text-decoration:none; color:#0f172a; }
.zk-item:hover { background:#f4f5fd; }
.zk-item b { display:block; font-size:15px; font-weight:650; line-height:1.25; } .zk-item small { display:block; font-size:13px; color:#55607a; line-height:1.3; margin-top:1px; }
.zk-ic { flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; }
.zk-ic svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.zk-ic.c1 { background:#e2f3fd; color:#0284c7; } .zk-ic.c2 { background:#eef0ff; color:#4f46e5; } .zk-ic.c3 { background:#e3f7f4; color:#0d9488; } .zk-ic.c4 { background:#fff4dc; color:#d97706; }
.zk-app { flex:none; width:38px; height:38px; border-radius:11px; object-fit:cover; box-shadow:0 1px 4px rgba(15,23,42,.16); }
.zk-all { display:block; margin:8px 10px 2px; font-size:14px; font-weight:700; color:#4f46e5; text-decoration:none; }
.zk-right { display:flex; align-items:center; gap:10px; flex:none; }
.zk-wa { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#e9f9ef; } .zk-wa svg { width:21px; height:21px; fill:#128c4b; } .zk-wa:hover { background:#d5f3df; }
.zk-cta { display:inline-block; background:#4f46e5; color:#fff; font-weight:700; font-size:15px; border-radius:11px; padding:11px 18px; text-decoration:none; box-shadow:0 6px 16px rgba(79,70,229,.26); white-space:nowrap; }
.zk-cta:hover { background:#3730a3; }
.zk-burger, .zk-foot { display:none; }
.zk-tabs, .zk-fabs, .zk-home { display:none; }   /* phones only: see mobile.css */
html { scroll-padding-top:84px; }

@media (max-width:960px) {
  .zk-bar { height:60px; padding:0 12px; gap:10px; justify-content:space-between; }
  .zk-logo img { height:40px; }
  .zk-wa { display:none; } .zk-right .zk-cta { padding:9px 14px; font-size:14px; box-shadow:none; }
  @media (max-width:400px) { .zk-right .zk-cta { padding:9px 11px; font-size:13px; } .zk-logo img { height:36px; } }
  .zk-burger { display:grid; gap:5px; width:42px; height:42px; place-content:center; background:#f1f3fb; border:0; border-radius:12px; cursor:pointer; padding:0; }
  .zk-burger span { display:block; width:19px; height:2px; border-radius:2px; background:#0f172a; transition:transform .2s, opacity .2s; }
  .zk.open .zk-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .zk.open .zk-burger span:nth-child(2) { opacity:0; } .zk.open .zk-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  /* a blurred bar would trap the full-screen panel inside itself, so the blur is off while the panel is open */
  .zk.open { background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .zk-nav { display:none; position:fixed; left:0; right:0; top:60px; bottom:0; background:#fff; overflow-y:auto; -webkit-overflow-scrolling:touch; flex-direction:column; align-items:stretch; gap:0; padding:6px 12px 150px; border-top:1px solid #e3e6f0; }
  .zk.open .zk-nav { display:flex; }
  .zk-dd { border-bottom:1px solid #eef0f6; } .zk-nav > .zk-top { border-bottom:1px solid #eef0f6; border-radius:0; }
  .zk-top { width:100%; justify-content:space-between; font-size:17px; padding:16px 6px; } .zk-top:hover, .zk-dd.open > .zk-top { background:none; }
  .zk-chev { width:19px; height:19px; }
  .zk-panel, .zk-panel.wide { position:static; display:none; grid-template-columns:1fr; opacity:1; visibility:visible; transform:none; border:0; box-shadow:none; padding:0 0 12px; border-radius:0; transition:none; }
  .zk-panel::before { display:none; } .zk-dd.open .zk-panel { display:grid; }
  .zk-h { margin:6px 6px 2px; } .zk-item { padding:9px 6px; } .zk-all { margin:8px 6px 2px; }
  .zk-foot { display:grid; gap:10px; position:fixed; left:0; right:0; bottom:0; padding:12px 12px calc(12px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid #e3e6f0; }
  .zk:not(.open) .zk-foot { display:none; }
  .zk-foot .zk-cta { text-align:center; padding:14px; font-size:16px; }
  .zk-wabtn { display:flex; align-items:center; justify-content:center; gap:8px; background:#e9f9ef; color:#0e733d; font-weight:700; border-radius:11px; padding:13px; text-decoration:none; font-size:16px; } .zk-wabtn svg { width:20px; height:20px; fill:#128c4b; }
  html.zk-lock, html.zk-lock body { overflow:hidden; }
  html { scroll-padding-top:72px; }
}