/* The only header/navigation stylesheet for the video and live-chat pages. */
.gnav {
  position:relative;
  z-index:100;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  width:100%;
  max-width:1440px;
  min-height:78px;
  margin:0 auto;
  padding:0 clamp(24px,4vw,58px);
  box-sizing:border-box;
  background:#141416;
  border-bottom:1px solid #302a30;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
.gnav__logo {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  line-height:1.2;
}
.gnav__logo strong { font-size:24px; font-weight:850; letter-spacing:.02em; }
.gnav__logo strong > span { color:#ec4d96; }
.gnav__logo:hover { color:#fff; text-decoration:none; }
.gnav__toggle,.gnav__overlay,.gnav__heading,.gnav__arrow { display:none; }
.gnav__panel {
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:flex-end;
  gap:24px;
  min-width:0;
}
.gnav__group { display:contents; }
.gnav__link {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  color:#ded9dc;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  text-decoration:none;
  white-space:nowrap;
}
.gnav__link:hover { color:#fff; text-decoration:none; }
.gnav__link--category,.gnav__link--guide {
  padding:6px 12px;
  color:#76b8b0;
  background:rgba(118,184,176,.05);
  border:1px solid rgba(118,184,176,.78);
  border-radius:999px;
}
.gnav__link--category:hover,.gnav__link--guide:hover { color:#9ad4cc; background:rgba(118,184,176,.12); }
.gnav__link--cta {
  min-height:38px;
  margin-left:auto;
  padding:0 16px;
  border:1px solid #f7b3cf;
  border-radius:999px;
  background:linear-gradient(115deg,#f49abd,#ef79a7);
  color:#27181f;
  font-weight:800;
}
.gnav__link--cta:hover { color:#27181f; background:#f7b3cf; }
.gnav :focus-visible { outline:3px solid #ffd0e2; outline-offset:3px; }
@media (min-width:701px) and (max-width:1100px) {
  .gnav { gap:20px; padding:0 20px; }
  .gnav__logo strong { font-size:21px; }
  .gnav__panel { gap:16px; justify-content:flex-start; overflow-x:auto; padding:8px 3px; }
  .gnav__link { font-size:12px; }
}
@media (max-width:700px) {
  .gnav {
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px;
    align-items:center;
    gap:12px;
    min-height:72px;
    padding:14px 16px;
    overflow:visible;
  }
  .gnav__logo { justify-self:start; }
  .gnav__logo strong { font-size:23px; }
  .gnav__toggle {
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    justify-self:end;
    gap:5px;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(255,255,255,.3);
    border-radius:9px;
    background:#1c1b1f;
    color:#fff;
    box-sizing:border-box;
    cursor:pointer;
  }
  .gnav__toggle span { display:block; width:22px; height:2px; background:currentColor; }
  .gnav__toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .gnav__toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .gnav__toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .gnav__panel {
    display:none;
    position:absolute;
    z-index:2;
    top:calc(100% + 8px);
    right:16px;
    width:min(300px,calc(100vw - 32px));
    max-height:calc(100dvh - 96px);
    overflow-y:auto;
    overscroll-behavior:contain;
    margin:0;
    padding:16px;
    background:#151419;
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;
    box-sizing:border-box;
    box-shadow:0 16px 48px rgba(0,0,0,.4);
  }
  .gnav--open .gnav__panel { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:20px; }
  .gnav__group { display:flex; flex:0 0 auto; flex-direction:column; gap:10px; }
  .gnav__heading { display:block; margin:0 0 2px; color:#bcb5c0; font-size:11px; font-weight:650; line-height:1.5; letter-spacing:.08em; }
  .gnav__link {
    display:flex;
    flex:0 0 52px;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    height:52px;
    min-height:52px;
    margin:0;
    padding:0 14px;
    border:1px solid #403c46;
    border-radius:9px;
    background:#242228;
    color:#fff;
    box-shadow:none;
    box-sizing:border-box;
    font-size:14px;
    font-weight:600;
    line-height:1.4;
  }
  .gnav__arrow { display:block; flex:0 0 auto; color:#bcb5c0; font-size:18px; font-weight:400; }
  .gnav__link--local:hover { color:#fff; background:#302c35; }
  .gnav__link--page { color:#f7b2cf; background:#2c1e29; border-color:#75445f; }
  .gnav__link--page .gnav__arrow { color:#f7b2cf; }
  .gnav__link--page:hover { color:#ffd4e6; background:#3a2635; }
  .gnav__group--cta { padding-top:16px; border-top:1px solid #39313c; }
  .gnav__link--cta { background:linear-gradient(115deg,#ee438c,#d92c75); color:#fff; border-color:#f46aa5; font-weight:800; }
  .gnav__link--cta .gnav__arrow { color:#fff; }
  .gnav__link--cta:hover { color:#fff; background:#f05497; }
  .gnav__overlay { position:fixed; z-index:1; inset:0; background:rgba(3,6,14,.6); }
  .gnav--open .gnav__overlay { display:block; }
  .gnav__overlay[hidden] { display:none; }
}