/* neuralspark.com.au header navigation (1.5.0), on every page. Four plain links where eleven sat in a tray: Features
   opens a panel of everything the app does in everyday groups, then Providers, Pricing and Questions. On a phone the
   menu lists the same groups and ends with the two buttons. Loaded after the page's own stylesheet. */
.top .bar{grid-template-columns:auto 1fr auto}
.nav{justify-self:center;display:flex;align-items:center;gap:2px;padding:0;border-radius:0;background:none}
.top.on-night:not(.scrolled) .nav{background:none}
.nav>a,.nav-feat-btn{position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;border-radius:10px;background:none;color:inherit;font-family:var(--sans);font-size:15px;font-weight:500;line-height:1;text-decoration:none;opacity:.8;cursor:pointer;box-shadow:none;transition:opacity .2s,background-color .2s}
.nav>a:hover,.nav-feat-btn:hover,.nav-feat.open .nav-feat-btn{opacity:1;background:color-mix(in srgb,currentColor 8%,transparent)}
.nav>a[aria-current],.nav-feat-btn[data-current]{opacity:1;background:none;box-shadow:none}
.nav>a[aria-current]::after,.nav-feat-btn[data-current]::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;border-radius:2px;background:currentColor;opacity:.5}
.top.on-night:not(.scrolled) .nav>a[aria-current]{background:none}
.nav>a:focus-visible,.nav-feat-btn:focus-visible,.nav-panel a:focus-visible,.tops a:focus-visible,.menu-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.nav-feat-btn .chev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease-out)}
.nav-feat.open .chev{transform:rotate(180deg)}
.nav-feat{position:relative}
.tops .signin,.tops .btn{white-space:nowrap}

/* The Features panel: always paper and ink, whatever band the header sits over. */
.nav-panel{display:none;position:absolute;top:calc(100% + 14px);left:50%;width:min(900px,calc(100vw - 40px));padding:20px 20px 14px;border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink);box-shadow:0 34px 70px -30px rgba(13,18,28,.42),0 2px 6px rgba(13,18,28,.06);transform:translateX(-50%);z-index:60}
.nav-panel::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px} /* the pointer crosses the gap without closing it */
.nav-feat.open .nav-panel{display:block;animation:nav-in .22s var(--ease-out)}
@keyframes nav-in{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
.nav-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 16px}
.nav-h{margin:0 0 4px 10px;font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:16px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.nav-panel .nav-cols a{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;padding:9px 10px;border-radius:12px;color:inherit;text-decoration:none;opacity:1;transition:background-color .2s}
.nav-panel .nav-cols a:hover,.nav-panel .nav-cols a[aria-current]{background:var(--paper-2);box-shadow:none}
.nav-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--paper-2);color:var(--navy)}
.nav-panel .nav-cols a:hover .nav-ic{background:var(--card)}
.nav-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav-t b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:600;line-height:19px}
.nav-t small{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--muted)}
.nav-foot{display:flex;flex-wrap:wrap;gap:6px 24px;margin:12px 10px 0;padding-top:12px;border-top:1px solid var(--line)}
.nav .nav-foot a{padding:0;border-radius:0;box-shadow:none;background:none;font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;opacity:.85}
.nav-foot a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.nav-cta{display:none}
@media (prefers-reduced-motion:reduce){.nav-feat.open .nav-panel{animation:none}.nav-feat-btn .chev{transition:none}}

/* Four links fit down to 900px: the menu button waits until then. */
@media (min-width:901px) and (max-width:1180px){
  .top .bar{grid-template-columns:auto 1fr auto}
  .nav{display:flex}
  .tops{display:flex;gap:14px}
  .tops .signin{display:inline}
  .menu-toggle{display:none}
  .nav>a,.nav-feat-btn{padding:0 11px}
}

/* A phone or a narrow window: the menu is the groups themselves, then the other links, then the two buttons. */
@media (max-width:900px){
  .top .bar{grid-template-columns:1fr auto}
  .nav,.tops,.tops .signin{display:none}
  .menu-toggle{display:block}
  .top.open{background:var(--paper);color:var(--ink)}
  .top.open .nav{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100dvh - 72px);overflow:auto;padding:6px var(--gutter) 28px;background:var(--paper);box-shadow:0 30px 40px -30px rgba(19,25,38,.3)}
  .top.open .nav>a{height:auto;padding:14px 0;border-radius:0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:22px;opacity:1}
  .top.open .nav>a[aria-current]::after{display:none}
  .nav-feat-btn{display:none}
  .top.open .nav-panel{display:block;position:static;width:auto;padding:0 0 10px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;transform:none;animation:none}
  .nav-panel::before{display:none}
  .nav-cols{grid-template-columns:1fr;gap:0}
  .nav-h{margin:16px 0 4px}
  .top.open .nav-panel .nav-cols a{padding:8px 0;border-bottom:0;font-family:var(--sans);font-size:16px;grid-template-columns:34px minmax(0,1fr)}
  .top.open .nav-panel .nav-cols a:hover{background:none}
  .nav-ic{width:34px;height:34px}
  .nav-foot{flex-direction:column;margin:10px 0 0;padding-top:10px}
  .top.open .nav .nav-foot a{padding:4px 0;border-bottom:0;font-family:var(--sans);font-size:15px}
  /* What people look for first: the buttons, then Providers, Pricing and Questions, then everything the app does. */
  .top.open .nav-cta{order:-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:14px 0 8px}
  .nav-feat{order:1}
  .top.open .nav>a:last-of-type{margin-bottom:4px}
  .top.open .nav .nav-cta a{border-bottom:0;font-family:var(--sans)}
  .top.open .nav .nav-cta .signin{padding:0;font-size:16px;font-weight:500;text-decoration:none;color:inherit;opacity:.85}
  .top.open .nav .nav-cta .btn{height:48px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;font-size:16px;opacity:1}
}
@media (max-width:900px){.top.open.on-night{color:var(--ink)}.top.open.on-night .nav{background:var(--paper)}}

/* Wide screens (30 Sep; owner: "that nav is off to the side.. thats not a premium look"): the four links sit in the
   middle of the page, and the Features panel opens centred under the header instead of hanging off the Features
   button. The panel stays inside .nav-feat, so resting the pointer and clicking work as before. */
@media (min-width:960px){
  .top .bar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .top .bar>.brand{justify-self:start}
  .top .bar>.tops{justify-self:end}
}
@media (min-width:901px){
  .top .bar{position:relative}
  .top .nav-feat{position:static}
  .top .nav-panel{top:calc(100% - 4px)}
  .top .nav-panel::before{top:-22px;height:22px}
}