/* ============================================================
   Shared navigation.

   Eight links across the top wrapped onto two rows and read as a
   list of everything rather than a route through the site. The
   four tools now live under one "Tools" menu, which takes the top
   bar down to five items and gives each product room for a line
   of explanation.

   Loaded after each page's own <style>, so these rules win on
   equal specificity without needing !important.
   ============================================================ */

.pinav{position:sticky;top:0;z-index:60;
  background:rgba(5,10,24,.72);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(180,200,235,.10);
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease}
.pinav.stuck{background:rgba(5,10,24,.93);border-bottom-color:rgba(180,200,235,.20);
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
/* the hairline of light the rest of the site uses */
.pinav:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(143,184,255,.45),transparent);
  opacity:0;transition:opacity .3s ease}
.pinav.stuck:after{opacity:1}

.pinav .wrap{display:flex;align-items:center;gap:18px;
  max-width:1120px;margin:0 auto;padding:0 22px;
  height:68px;min-height:0;flex-wrap:nowrap;transition:height .28s ease}
.pinav.stuck .wrap{height:58px}

/* ---- logo ---- */
.pilogo{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  font-weight:800;letter-spacing:.09em;font-size:14px;color:var(--text);text-decoration:none}
.pilogo img{width:27px;height:27px;display:block;transition:transform .4s cubic-bezier(.22,.8,.24,1)}
.pilogo:hover img{transform:rotate(-6deg) scale(1.08)}
.pilogo b{color:var(--buyhi);font-weight:800}

/* ---- the links ---- */
.pimenu{display:flex;align-items:center;gap:2px;margin-left:auto}
.pilink{position:relative;display:inline-flex;align-items:center;gap:5px;
  padding:9px 13px;border-radius:9px;
  color:var(--dim);font-size:13.5px;font-weight:600;text-decoration:none;
  background:none;border:0;font-family:inherit;cursor:pointer;white-space:nowrap;
  transition:color .2s ease,background .2s ease}
.pilink:hover,.pilink:focus-visible{color:var(--text);background:rgba(255,255,255,.05)}
.pilink.on{color:var(--text)}
/* an underline that grows out from the middle rather than appearing */
.pilink:before{content:'';position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(143,184,255,.2),var(--buyhi),rgba(143,184,255,.2));
  transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.22,.8,.24,1)}
.pilink:hover:before,.pilink.on:before{transform:scaleX(1)}

/* ---- Tools menu ---- */
.pidrop{position:relative}
.pidrop .chev{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .28s ease;opacity:.75}
.pidrop.open .chev,.pidrop:hover .chev{transform:rotate(180deg)}

.pidropmenu{position:absolute;top:calc(100% + 10px);left:50%;width:314px;
  transform:translateX(-50%) translateY(-8px);
  background:rgba(9,16,34,.97);backdrop-filter:blur(18px);
  border:1px solid rgba(180,200,235,.16);border-radius:16px;padding:7px;
  box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .26s cubic-bezier(.22,.8,.24,1),visibility .22s}
.pidrop:hover .pidropmenu,.pidrop:focus-within .pidropmenu,.pidrop.open .pidropmenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* a bridge over the gap so the menu doesn't close as the cursor travels to it */
.pidropmenu:before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}

.pidropmenu a{display:block;padding:10px 12px;border-radius:11px;text-decoration:none;
  transition:background .18s ease,transform .18s ease}
.pidropmenu a:hover{background:rgba(143,184,255,.10);transform:translateX(3px)}
.pidropmenu a.on{background:rgba(143,184,255,.13)}
.pidropmenu b{display:block;color:var(--text);font-size:13.5px;font-weight:700;margin-bottom:1px}
.pidropmenu small{display:block;color:var(--dim);font-size:11.5px;line-height:1.4}
.pidropmenu .tag{float:right;font-size:10px;font-weight:800;letter-spacing:.08em;
  color:#7fd8b0;border:1px solid rgba(53,168,119,.45);border-radius:99px;padding:1px 7px;margin-left:8px}
/* each row slides in a beat after the one above it */
.pidrop:hover .pidropmenu a,.pidrop.open .pidropmenu a,.pidrop:focus-within .pidropmenu a{
  animation:pidropin .34s cubic-bezier(.22,.8,.24,1) backwards}
.pidropmenu a:nth-child(1){animation-delay:.02s}
.pidropmenu a:nth-child(2){animation-delay:.06s}
.pidropmenu a:nth-child(3){animation-delay:.10s}
.pidropmenu a:nth-child(4){animation-delay:.14s}
@keyframes pidropin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- right side ---- */
.piright{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.picart{position:relative;display:inline-flex;align-items:center;color:var(--dim);cursor:pointer;
  padding:7px;border-radius:9px;transition:color .2s ease,background .2s ease,transform .2s ease}
.picart:hover{color:var(--text);background:rgba(255,255,255,.05);transform:translateY(-1px)}
.picart svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.picart .cnt{position:absolute;top:-1px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--buy);color:#fff;font-size:10.5px;font-weight:800;
  line-height:16px;text-align:center;box-shadow:0 0 0 2px rgba(5,10,24,.9)}

.picta{display:inline-flex;align-items:center;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#2f7af0,#18c9e8);color:#fff;
  padding:10px 19px;border-radius:11px;font-size:13.5px;font-weight:800;
  text-decoration:none;white-space:nowrap;
  box-shadow:0 6px 20px rgba(46,144,250,.34);
  transition:transform .2s ease,box-shadow .2s ease}
.picta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(46,144,250,.5)}
/* the sheen that sweeps across on hover, same as the page buttons */
.picta:after{content:'';position:absolute;top:0;left:-90%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-20deg);transition:left .55s ease}
.picta:hover:after{left:140%}

/* ---- hamburger ---- */
.pitoggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 10px;margin-left:auto;
  background:rgba(255,255,255,.05);border:1px solid rgba(180,200,235,.16);border-radius:11px;
  cursor:pointer}
.pitoggle span{display:block;height:2px;border-radius:2px;background:var(--text);
  transition:transform .3s cubic-bezier(.22,.8,.24,1),opacity .2s ease}
.pitoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.pitoggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.pitoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- narrow ---- */
@media(max-width:940px){
  .pinav .wrap{height:62px;gap:12px}
  .pinav.stuck .wrap{height:56px}
  .pitoggle{display:flex}
  .piright{order:2;margin-left:0}
  .picta{display:none}

  .pimenu{position:fixed;top:62px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:10px 16px 22px;
    background:#060c1c;
    border-bottom:1px solid rgba(180,200,235,.16);
    max-height:calc(100vh - 62px);overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .26s ease,transform .3s cubic-bezier(.22,.8,.24,1),visibility .26s}
  .pimenu.open{opacity:1;visibility:visible;transform:none}
  .pimenu>*{animation:none}
  .pimenu.open .pilink,.pimenu.open .pidrop,.pimenu.open .pimcta{
    animation:pislide .38s cubic-bezier(.22,.8,.24,1) backwards}
  .pimenu.open>*:nth-child(1){animation-delay:.04s}
  .pimenu.open>*:nth-child(2){animation-delay:.09s}
  .pimenu.open>*:nth-child(3){animation-delay:.14s}
  .pimenu.open>*:nth-child(4){animation-delay:.19s}
  .pimenu.open>*:nth-child(5){animation-delay:.24s}
  .pimenu.open>*:nth-child(6){animation-delay:.29s}
  @keyframes pislide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

  .pimenu .pilink{width:100%;justify-content:space-between;padding:14px 12px;font-size:16px;
    border-radius:12px;border-bottom:1px solid rgba(180,200,235,.07)}
  .pilink:before{display:none}
  .pimenu .pilink.on{color:var(--buyhi)}
  .pidrop{width:100%}
  /* On a phone the tools are simply listed rather than hidden behind a hover.
     The desktop rules centre the panel with translateX(-50%); every one of them
     has to be undone here or the items hang off the left edge of the screen. */
  .pidropmenu,
  .pidrop:hover .pidropmenu,
  .pidrop:focus-within .pidropmenu,
  .pidrop.open .pidropmenu{
    position:static;left:auto;width:auto;transform:none;
    opacity:1;visibility:visible;pointer-events:auto;
    background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0 0 6px 8px;
    overflow:hidden;transition:max-height .34s cubic-bezier(.22,.8,.24,1)}
  .pidropmenu,.pidrop:hover .pidropmenu,.pidrop:focus-within .pidropmenu{max-height:0}
  .pidrop.open .pidropmenu{max-height:460px}
  .pidropmenu:before{display:none}
  .pidropmenu a{padding:11px 12px}
  .pidropmenu a:hover{transform:none}
  .pimcta{display:block;margin-top:14px;text-align:center;justify-content:center}
}
@media(min-width:941px){ .pimcta{display:none} }

@media(prefers-reduced-motion:reduce){
  .pinav,.pinav .wrap,.pilink,.pilink:before,.pidropmenu,.picta,.picart,.pilogo img,
  .pitoggle span,.pimenu{transition:none}
  .pidropmenu a,.pimenu.open>*{animation:none}
  .picta:after{display:none}
}