/* Shared Apps disclosure for the preview's shop and existing site headers. */
.header .apps-nav,
header.site .apps-nav {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  color: #dbe0e4;
  text-align: left;
}

.header .apps-nav > summary,
header.site .apps-nav > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 44px;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: 600 16px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .01em;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.apps-nav > summary::-webkit-details-marker { display: none; }
.apps-nav > summary::marker { content: ""; }
.apps-nav > summary > span[aria-hidden="true"] {
  display: inline-block;
  font-size: 17px;
  line-height: 1;
  transition: transform .15s ease;
}
.apps-nav[open] > summary > span[aria-hidden="true"] { transform: rotate(180deg); }
.header .apps-nav > summary:hover,
header.site .apps-nav > summary:hover,
.header .apps-nav[open] > summary,
header.site .apps-nav[open] > summary { color: #ffac79; }

.header .apps-nav-panel,
header.site .apps-nav-panel {
  position: absolute;
  z-index: 1002;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 145px);
  max-height: calc(100dvh - 145px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 8px;
  border: 1px solid #516474;
  border-top: 3px solid #e85d10;
  border-radius: 5px;
  box-shadow: 0 12px 30px #06111c55;
  background: #1d2d3c;
  color: #e7edf3;
  text-align: left;
  box-sizing: border-box;
}

.header .apps-nav:not([open]) > .apps-nav-panel,
header.site .apps-nav:not([open]) > .apps-nav-panel { display: none; }

.header .apps-nav .apps-nav-panel a,
header.site nav.links .apps-nav .apps-nav-panel a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #e7edf3;
  font: 500 16px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

.header .apps-nav .apps-nav-panel a:hover,
header.site nav.links .apps-nav .apps-nav-panel a:hover {
  color: #fff;
  background: #304656;
  text-decoration: none;
}
.header .apps-nav .apps-nav-panel a[aria-current="page"],
header.site nav.links .apps-nav .apps-nav-panel a[aria-current="page"] {
  background: #304656;
  color: #ffb787;
  border-left: 3px solid #e85d10;
  padding-left: 9px;
}
.header .apps-nav .apps-nav-panel .apps-nav-all,
header.site nav.links .apps-nav .apps-nav-panel .apps-nav-all { font-weight: 700; }
.apps-nav-group { margin: 6px 0 0; padding: 8px 0 0; border-top: 1px solid #52616e; }
.apps-nav-group > p {
  margin: 0;
  padding: 5px 12px 4px;
  color: #b9c9d6;
  font: 700 12px/1.4 Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.header .apps-nav > summary:focus-visible,
header.site .apps-nav > summary:focus-visible,
.header .apps-nav .apps-nav-panel a:focus-visible,
header.site nav.links .apps-nav .apps-nav-panel a:focus-visible {
  outline: 3px solid #ff9657;
  outline-offset: 2px;
}

/* The existing site switches to its hamburger at 900px. */
@media (max-width: 900px) {
  header.site nav.links.open {
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: stretch;
  }
  header.site nav.links .apps-nav { width: 100%; }
  header.site .apps-nav > summary { width: 100%; padding: 12px 24px; }
  header.site .apps-nav-panel {
    position: static;
    width: calc(100% - 24px);
    max-width: none;
    max-height: 60vh;
    max-height: 60dvh;
    margin: 0 12px 8px;
    box-shadow: none;
  }
}

@media (max-width: 560px) {
  header.site .nav { gap: 12px; padding: 12px 16px; }
  header.site .brand { min-width: 0; }
  header.site .brand > span {
    min-width: 0;
    font-size: 16px;
    line-height: 1.3;
    white-space: normal;
  }
  header.site .brand small { font-size: 9px; }
  header.site .brand .mark { width: 36px; height: 36px; flex: 0 0 36px; }
  header.site #burger {
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto;
    box-sizing: border-box;
  }
}

/* The new shop uses its hamburger at 700px. */
@media (max-width: 700px) {
  .header .navlinks.open { align-items: stretch; }
  .header .navlinks .apps-nav { width: 100%; }
  .header .apps-nav > summary { width: 100%; padding: 10px 0; }
  .header .apps-nav-panel {
    position: static;
    width: 100%;
    max-width: none;
    max-height: 60vh;
    max-height: 60dvh;
    margin: 0 0 8px;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apps-nav > summary > span[aria-hidden="true"] { transition: none; }
}

/* Owner-approved 90/90/30-day individual monthly trial specials. */
.trial-special { line-height: 1.65; }
.trial-special-label { display: inline-block; padding: .12em .45em; border: 1px solid currentColor; border-radius: .3em; font-size: .85em; font-weight: 800; letter-spacing: .02em; }
.trial-special del { opacity: .8; margin-right: .25em; }
.trial-special strong { font-weight: 800; }