/*
  Canonical public header/nav formatting.
  Keep this aligned to the homepage nav so marketing pages do not shift between routes.
*/
.util{
  background:#0E0F0C!important;
  color:#F2EEE5!important;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace!important;
  font-size:11px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.util .wrap,.util-inner{
  max-width:1360px!important;
  height:32px!important;
  margin:0 auto!important;
  padding:0 40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  box-sizing:border-box!important;
}
.util .left,.util-left{
  display:flex!important;
  gap:24px!important;
  align-items:center!important;
  color:#A8A294!important;
}
.util .left b,.util-left b{
  color:#F2EEE5!important;
  font-weight:500!important;
  letter-spacing:.12em!important;
}
.util .right,.util-right{
  display:flex!important;
  gap:28px!important;
  color:#A8A294!important;
}
.util .right a,.util-right a{
  color:inherit!important;
  text-decoration:none!important;
}
.util .right a:hover,.util-right a:hover{color:#F2EEE5!important}
.util .pulse{
  display:inline-block!important;
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:#E4B470!important;
  margin-right:8px!important;
  vertical-align:middle!important;
  box-shadow:0 0 0 0 rgba(228,180,112,.7)!important;
  animation:rotix-nav-pulse 2s infinite!important;
}
@keyframes rotix-nav-pulse{
  0%{box-shadow:0 0 0 0 rgba(228,180,112,.7)}
  70%{box-shadow:0 0 0 8px rgba(228,180,112,0)}
  100%{box-shadow:0 0 0 0 rgba(228,180,112,0)}
}
.g-nav{
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  background:rgba(242,238,229,.96)!important;
  backdrop-filter:saturate(140%) blur(10px)!important;
  -webkit-backdrop-filter:saturate(140%) blur(10px)!important;
  border-bottom:1px solid #C6BFAD!important;
}
.g-nav-inner{
  max-width:1360px!important;
  height:64px!important;
  margin:0 auto!important;
  padding:0 40px!important;
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  box-sizing:border-box!important;
}
.g-nav .brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  color:inherit!important;
  text-decoration:none!important;
  flex:0 0 auto!important;
}
.g-nav .brand .mark{
  width:34px!important;
  height:34px!important;
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:center!important;
}
.g-nav .brand .mark svg{display:block!important;width:100%!important;height:100%!important}
.g-nav .brand .name{
  font-family:'Newsreader',ui-serif,Georgia,serif!important;
  font-weight:500!important;
  font-size:24px!important;
  letter-spacing:-.018em!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:baseline!important;
  color:#0E0F0C!important;
}
.g-nav .brand .name .io{
  font-style:italic!important;
  color:#8E5F1F!important;
  font-weight:400!important;
  letter-spacing:-.012em!important;
  margin-left:.02em!important;
}
.g-nav .brand .name .ltd{
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace!important;
  font-weight:500!important;
  font-size:9px!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  color:#6F6A5C!important;
  align-self:flex-end!important;
  line-height:1!important;
  margin-left:.32em!important;
  margin-bottom:.18em!important;
  border-top:1px solid #C6BFAD!important;
  padding:.3em .1em 0 .4em!important;
}
.g-nav-links{
  display:flex!important;
  list-style:none!important;
  padding:0!important;
  margin:0 0 0 auto!important;
  font-size:13px!important;
}
.g-nav-links a{
  color:#6F6A5C!important;
  padding:8px 14px!important;
  display:block!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}
.g-nav-links a:hover{color:#0E0F0C!important}
.g-nav-end{display:flex!important;align-items:center!important;gap:8px!important;margin-left:12px!important}
.g-nav .g-nav-cta{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  font-family:'Geist',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif!important;
  font-size:13px!important;
  font-weight:500!important;
  letter-spacing:.01em!important;
  line-height:1!important;
  padding:10px 16px!important;
  border-radius:2px!important;
  border:1px solid transparent!important;
  background:#B7833A!important;
  color:#0E0F0C!important;
  cursor:pointer!important;
  text-decoration:none!important;
}
.g-nav .g-nav-cta:hover{background:#8E5F1F!important;color:#F2EEE5!important}
.g-nav-toggle{
  display:none!important;
  background:none!important;
  border:1px solid #C6BFAD!important;
  border-radius:2px!important;
  padding:8px!important;
  cursor:pointer!important;
  color:#0E0F0C!important;
}
.g-nav-drawer{
  display:none!important;
  position:fixed!important;
  top:64px!important;
  left:0!important;
  right:0!important;
  background:#F2EEE5!important;
  border-bottom:2px solid #C6BFAD!important;
  z-index:99!important;
  flex-direction:column!important;
  padding:16px 24px 24px!important;
}
.g-nav-drawer.open{display:flex!important}
.g-nav-drawer a{
  padding:12px 0!important;
  border-bottom:1px solid #C6BFAD!important;
  font-size:15px!important;
  color:#0E0F0C!important;
  text-decoration:none!important;
}
.g-nav-drawer a:last-child{border-bottom:none!important}
.g-nav-drawer .btn{
  align-self:flex-start!important;
  max-width:100%!important;
  display:inline-flex!important;
  align-items:center!important;
}
.page-pills{
  background:#EDE8DE!important;
  border-bottom:1px solid #C6BFAD!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;
  position:sticky!important;
  top:64px!important;
  z-index:95!important;
  box-shadow:0 14px 30px -28px rgba(14,15,12,.5)!important;
}
.page-pills::-webkit-scrollbar{display:none!important}
.page-pills-inner{
  display:flex!important;
  align-items:center!important;
  max-width:1360px!important;
  min-height:41px!important;
  margin:0 auto!important;
  padding:0 40px!important;
  box-sizing:border-box!important;
}
.page-pills-inner:before{
  content:'On this page';
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
  color:#8E5F1F!important;
  margin-right:14px!important;
  white-space:nowrap!important;
}
.page-pill{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:41px!important;
  padding:12px 16px 10px!important;
  border-bottom:2px solid transparent!important;
  color:#6F6A5C!important;
  font-family:'Geist',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif!important;
  font-size:13px!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  box-sizing:border-box!important;
}
.page-pill:hover{color:#0E0F0C!important;border-bottom-color:#B7833A!important}
.page-pill.is-active,.page-pill[aria-current='true']{
  color:#0E0F0C!important;
  border-bottom-color:#B7833A!important;
  background:rgba(255,255,255,.2)!important;
}

@media(max-width:760px){
  .g-nav-links,.g-nav .g-nav-cta{display:none!important}
  .g-nav-toggle{display:flex!important;align-items:center!important;justify-content:center!important}
  .g-nav-inner{padding:0 24px!important}
  .page-pills-inner{padding:0 12px!important}
  .page-pills-inner:before{display:none!important}
  .page-pill{min-height:37px!important;padding:10px 12px!important}
}
@media(max-width:640px){
  .util .wrap,.util-inner{
    height:auto!important;
    min-height:32px!important;
    padding:6px 20px!important;
    gap:3px!important;
    flex-direction:column!important;
    align-items:flex-start!important;
  }
  .util .right,.util-right{display:none!important}
}
