/* ============================================================================
   The site navigation. One file, loaded by every page, so the bar is changed
   in one place rather than six.

   Four dropdowns with AIOS sitting in the middle of them, styled as the one
   thing on the bar that is not a menu: it is the product, the others are
   ways to buy it or read about it.
   ========================================================================= */

.sbar{position:fixed;inset-inline:0;top:0;z-index:var(--sc-z-chrome,60);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sc-5,1.5rem);
  padding:calc(env(safe-area-inset-top,0px) + 1rem) var(--sc-gutter,1.5rem) 1rem;
  pointer-events:none;}
.sbar::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,7,12,.88),rgba(5,7,12,0));}
.sbar>*{position:relative;pointer-events:auto;}
.sbar__mark img{width:152px;height:auto;display:block;}

.snav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.9rem);}
.snav__item{position:relative;}

/* --- a top-level link or menu trigger --- */
.snav__top{display:inline-flex;align-items:center;gap:.38rem;
  font-family:var(--sc-font-display,system-ui);font-weight:400;
  font-size:var(--sc-t-sm,.95rem);color:var(--sc-ink-soft,#c3c9d6);
  text-decoration:none;background:none;border:0;padding:.45rem 0;cursor:pointer;
  transition:color 150ms ease;white-space:nowrap;}
.snav__top:hover,.snav__item:hover>.snav__top,
.snav__top[aria-expanded="true"]{color:var(--sc-ink,#eef1f6);}
.snav__top:focus-visible{outline:2px solid var(--sc-accent,#9dc3d6);outline-offset:4px;border-radius:2px;}
.snav__top svg{width:9px;height:9px;opacity:.6;transition:transform 180ms ease;}
.snav__item:hover>.snav__top svg,.snav__top[aria-expanded="true"] svg{transform:rotate(180deg);}

/* --- AIOS: the product, not a menu --- */
.snav__hero{font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:var(--sc-t-xs,.8rem);color:var(--sc-accent,#9dc3d6);
  padding:.52rem 1.05rem;border-radius:999px;
  border:1px solid color-mix(in oklab, var(--sc-accent,#9dc3d6) 42%, transparent);
  background:color-mix(in oklab, var(--sc-accent,#9dc3d6) 9%, transparent);
  transition:background 160ms ease,border-color 160ms ease;}
.snav__hero:hover{color:var(--sc-accent,#9dc3d6);
  background:color-mix(in oklab, var(--sc-accent,#9dc3d6) 17%, transparent);
  border-color:var(--sc-accent,#9dc3d6);}
.snav__hero[aria-current]{background:var(--sc-accent,#9dc3d6);color:#06080d;
  border-color:var(--sc-accent,#9dc3d6);}

/* --- the dropdown --- */
.snav__menu{position:absolute;top:calc(100% + .55rem);left:50%;translate:-50% 0;
  min-width:17rem;padding:.45rem;margin:0;list-style:none;
  background:rgba(10,13,20,.97);backdrop-filter:blur(12px);
  border:1px solid var(--sc-hairline-strong,rgba(157,195,214,.22));
  border-radius:12px;box-shadow:0 30px 70px -28px rgba(0,0,0,.92);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity 170ms ease,transform 170ms ease,visibility 0s .17s;}
.snav__item:hover>.snav__menu,
.snav__item:focus-within>.snav__menu,
.snav__menu[data-open]{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
.snav__menu a{display:block;padding:.66rem .75rem;border-radius:8px;text-decoration:none;
  font-family:var(--sc-font-display,system-ui);font-size:var(--sc-t-sm,.95rem);
  color:var(--sc-ink,#eef1f6);line-height:1.35;}
.snav__menu a small{display:block;font-size:.76rem;color:var(--ad-muted,#858da0);
  margin-top:.18rem;line-height:1.45;}
.snav__menu a:hover{background:rgba(157,195,214,.1);}
.snav__menu a:focus-visible{outline:2px solid var(--sc-accent,#9dc3d6);outline-offset:-2px;}
.snav__menu a[aria-current]{color:var(--sc-accent,#9dc3d6);}
/* the trigger whose menu holds the current page */
.snav__top[data-within]{color:var(--sc-accent,#9dc3d6);}

.snav__cta{font-weight:700;font-size:var(--sc-t-xs,.8rem);letter-spacing:.14em;
  text-transform:uppercase;color:var(--sc-ink,#eef1f6);text-decoration:none;
  padding:.62rem 1rem;border-radius:var(--sc-r-sm,8px);
  border:1px solid var(--sc-hairline-strong,rgba(157,195,214,.22));white-space:nowrap;
  transition:border-color 150ms ease,background 150ms ease;}
.snav__cta:hover{border-color:var(--sc-accent,#9dc3d6);background:rgba(157,195,214,.1);}

.sburger{display:none;}
.smenu{display:none;}
.sc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;}

@media (prefers-reduced-motion:reduce){
  .snav__menu,.snav__top svg,.smenu,.sburger i{transition:none;}
}

/* ----------------------------------------------------------------- phone -- */
@media (max-width:980px){
  .sbar__mark img{width:120px;}
  .snav{gap:.6rem;}
  .snav__item{display:none;}
  .snav__cta{font-size:10px;padding:.55rem .8rem;letter-spacing:.1em;}

  .sburger{display:block;position:relative;flex:0 0 auto;width:44px;height:44px;padding:0;
    cursor:pointer;background:none;border:1px solid var(--sc-hairline-strong,rgba(157,195,214,.22));
    border-radius:var(--sc-r-sm,8px);transition:border-color 150ms ease;}
  .sburger:hover,.sburger[aria-expanded="true"]{border-color:var(--sc-accent,#9dc3d6);}
  .sburger:focus-visible{outline:2px solid var(--sc-accent,#9dc3d6);outline-offset:3px;}
  .sburger i{position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;
    border-radius:1px;background:var(--sc-ink,#eef1f6);transition:transform 240ms ease;}
  .sburger i:nth-of-type(1){transform:translateY(-3.5px);}
  .sburger i:nth-of-type(2){transform:translateY(3.5px);}
  .sburger[aria-expanded="true"] i:nth-of-type(1){transform:rotate(45deg);}
  .sburger[aria-expanded="true"] i:nth-of-type(2){transform:rotate(-45deg);}

  .smenu:not([hidden]){display:block;}
  .smenu{position:fixed;z-index:var(--sc-z-chrome,60);
    inset-inline:var(--sc-gutter,1.25rem);
    top:calc(env(safe-area-inset-top,0px) + 4.75rem);
    max-height:calc(100svh - env(safe-area-inset-top,0px) - 6.5rem);overflow-y:auto;
    padding:.5rem .9rem 1rem;background:rgba(10,13,20,.975);
    border:1px solid var(--sc-hairline-strong,rgba(157,195,214,.22));border-radius:14px;
    box-shadow:0 34px 80px -34px rgba(0,0,0,.92);
    transform:translateY(-10px);opacity:0;
    transition:transform 280ms ease,opacity 200ms ease;}
  .smenu[data-open]{transform:none;opacity:1;}
  .smenu h3{margin:1rem 0 .1rem;font-family:var(--ad-mono,monospace);font-size:10px;
    letter-spacing:.18em;text-transform:uppercase;color:var(--ad-muted,#858da0);font-weight:400;}
  .smenu h3:first-child{margin-top:.4rem;}
  .smenu a{display:block;padding:.78rem .1rem;text-decoration:none;
    font-family:var(--sc-font-display,system-ui);font-size:1.05rem;
    color:var(--sc-ink,#eef1f6);border-bottom:1px solid var(--sc-hairline,rgba(157,195,214,.12));}
  .smenu a:last-of-type{border-bottom:0;}
  .smenu a[aria-current]{color:var(--sc-accent,#9dc3d6);}
  .smenu__hero{margin:.6rem 0 .2rem;text-align:center;border-bottom:0 !important;
    font-weight:700 !important;letter-spacing:.12em;text-transform:uppercase;
    font-size:.85rem !important;color:var(--sc-accent,#9dc3d6) !important;
    padding:.8rem !important;border-radius:999px;
    border:1px solid color-mix(in oklab, var(--sc-accent,#9dc3d6) 42%, transparent) !important;
    background:color-mix(in oklab, var(--sc-accent,#9dc3d6) 10%, transparent);}
  .smenu__cta{margin-top:1rem;text-align:center;border-bottom:0 !important;
    background:var(--sc-accent,#9dc3d6);color:#06080d !important;font-weight:700;
    border-radius:8px;padding:.95rem !important;font-size:1rem !important;}
}


/* --------------------------------------------------------- real phones --
   At 980px the dropdowns go and a burger appears, but on a 390px screen the
   logo, the call button and the burger still added up to 400px of content in
   a 390px bar, which put part of the burger off the edge. Measured on the
   mobile page as well as the new pages, so it was live everywhere the bar
   is. Everything comes in a size. */
@media (max-width:430px){
  .sbar{gap:.6rem;padding-left:1rem;padding-right:1rem;}
  .sbar__mark img{width:96px;}
  .snav{gap:.5rem;}
  .snav__cta{font-size:9px;padding:.5rem .65rem;letter-spacing:.08em;}
  .sburger{width:40px;height:40px;}
}