/* The site menu: the hamburger and the panel it opens. Shared by every
   static page so there is one copy of it, not one per page. The React
   header uses the same class names from PeopleUniverse.css. */

/* The bar's height, which the phone rules below measure against. home.html and
   pricing.html each declare it too; the app pages declared it nowhere, so
   height: var(--header-h) was an invalid value there and the bar fell back to
   its own content height. That is why the same header stood at a different
   height on /chapters than on the landing page. */
:root { --header-h: 56px; }

/* Closed is the attribute, not a width. The static pages ship the panel with
   hidden on it and the script takes it off; the React header renders it only
   while it is open. */
.pu-mobile-menu[hidden], .pu-mobile-menu__scrim[hidden] { display: none !important; }
.pu-mobile-menu__sub-group[hidden] { display: none !important; }

/* The menu itself, at every width. It began as the phone's menu and the
   desktop bar spelled its links out instead, which meant two navigations to
   keep in step. One menu now: the bar carries the logo, the booking button,
   the members button and this. */

.pu-hamburger {
  order: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.pu-hamburger__bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  transition: transform 0.22s ease, opacity 0.22s ease, width 0.22s ease;
  transform-origin: center;
}

.pu-hamburger__bar--open:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }

.pu-hamburger__bar--open:nth-child(2) { opacity: 0; transform: scaleX(0); }

.pu-hamburger__bar--open:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.pu-mobile-menu__scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  animation: pu-scrim-in 0.18s ease;
}

@keyframes pu-scrim-in { from { opacity: 0; } to { opacity: 1; } }

.pu-mobile-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 68px;
  right: 12px;
  left: auto;
  width: min(295px, calc(100vw - 24px));
  max-height: min(78vh, calc(100vh - 88px));
  z-index: 90;
  background: rgba(10, 12, 18, 0.94);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  padding: 10px 10px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform-origin: top right;
  animation: pu-menu-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pu-menu-in {
  from { opacity: 0; transform: scale(0.92) translateY(-8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.pu-mobile-menu__topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pu-mobile-menu__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.pu-mobile-menu__back:active { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.25); }

.pu-mobile-menu__topbar-title {
  margin-left: auto;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}

.pu-mobile-menu__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }

.pu-mobile-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.pu-mobile-menu__link:hover,
.pu-mobile-menu__link:active { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); color: #ffffff; }

.pu-mobile-menu__text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pu-mobile-menu__accent-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; }

.pu-mobile-menu__accent-dot--amber { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.85), 0 0 14px rgba(251, 191, 36, 0.4); }

.pu-mobile-menu__accent-dot--coral { background: #ff6b4a; box-shadow: 0 0 8px rgba(255, 107, 74, 0.85), 0 0 14px rgba(255, 107, 74, 0.4); }

.pu-mobile-menu__accent-dot--purple { background: #a855f7; box-shadow: 0 0 8px rgba(168, 85, 247, 0.85), 0 0 14px rgba(168, 85, 247, 0.4); }

.pu-mobile-menu__accent-dot--sky { background: #38bdf8; box-shadow: 0 0 8px rgba(56, 189, 248, 0.85), 0 0 14px rgba(56, 189, 248, 0.4); }

.pu-mobile-menu__accent-dot--emerald { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.85), 0 0 14px rgba(16, 185, 129, 0.4); }

.pu-mobile-menu__accent-dot--slate { background: #26292f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }

.pu-mobile-menu__link:hover .pu-mobile-menu__accent-dot,
.pu-mobile-menu__link:active .pu-mobile-menu__accent-dot { transform: scale(1.35); }

.pu-mobile-menu__chevron { margin-left: auto; flex-shrink: 0; color: rgba(255, 255, 255, 0.4); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, color 0.2s ease; }

.pu-mobile-menu__link:hover .pu-mobile-menu__chevron,
.pu-mobile-menu__link:active .pu-mobile-menu__chevron { opacity: 0.95; color: #ffffff; transform: translateX(3px); }

.pu-mobile-menu__link--toggle { width: 100%; font-family: inherit; text-align: left; cursor: pointer; }

.pu-mobile-menu__caret { margin-left: auto; flex-shrink: 0; color: rgba(255, 255, 255, 0.45); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease; }

.pu-mobile-menu__caret--open { transform: rotate(180deg); color: #ffffff; }

.pu-mobile-menu__row { display: flex; align-items: stretch; gap: 6px; }

.pu-mobile-menu__row .pu-mobile-menu__link { flex: 1; }

.pu-mobile-menu__expander {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.pu-mobile-menu__expander svg { transition: transform 0.2s ease; }

.pu-mobile-menu__expander--open { background: rgba(255, 255, 255, 0.06); color: #fff; }

.pu-mobile-menu__expander--open svg { transform: rotate(90deg); }

.pu-mobile-menu__sub-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 15px;
  padding-left: 10px;
  margin-top: 1px;
  margin-bottom: 3px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.pu-mobile-menu__sub-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.81rem;
  font-weight: 450;
  transition: background 0.16s ease, color 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}

.pu-mobile-menu__sub-link:hover,
.pu-mobile-menu__sub-link:active { background: rgba(255, 255, 255, 0.06); color: #ffffff; }

.pu-mobile-menu__sub-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); flex-shrink: 0; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }

.pu-mobile-menu__sub-link:hover .pu-mobile-menu__sub-dot,
.pu-mobile-menu__sub-link:active .pu-mobile-menu__sub-dot { background: #a855f7; box-shadow: 0 0 6px rgba(168, 85, 247, 0.7); transform: scale(1.35); }

.pu-mobile-menu__chevron--sub { opacity: 0.35; }

.pu-mobile-menu__cta {
  display: block;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
  color: #0b0f19;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 44%, #fbbf24 100%);
  box-shadow: 0 6px 22px rgba(251, 191, 36, 0.3);
}

.pu-mobile-menu[hidden], .pu-mobile-menu__scrim[hidden] { display: none; }

/* On a wider screen the button takes the size of the two beside it, and the
   panel hangs under it at the bar's own 32px inset rather than the phone's
   12px. */
@media (min-width: 769px) {
  .pu-hamburger { width: 42px; height: 42px; padding: 0 11px; }
  .pu-mobile-menu { right: 32px; }
}

/* ── Header chrome ──────────────────────────────────────────────────────
   The bar, the logo and the three buttons. Shared with the other static
   pages so the login, menu and booking buttons cannot drift apart from
   the landing page's again. */

/* The logo sits the same distance from the left edge as the buttons do from
   the right: the bar's own 32px padding and nothing more. The old 40px margin
   on top of that padding pushed it 72px in, which read as the logo drifting
   towards the middle of the bar. */
.pu-logo {
  height: 52px;
  width: auto;
  display: block;
  margin-left: 0;
  margin-top: 2px;
}

/* Hard right, always. space-between only ever worked because the Chapters
   nav sat in here with flex: 1 and did the pushing; with the menu carrying
   those links the three buttons have to group themselves. */
.pu-nav-area {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* The same three, in the same order, at every width: members, booking, menu.
   Join Us leads, because joining is the thing the bar is asking for; the call
   is the second offer and the menu closes the set. */
.pu-nav-link--portal { order: 1; }
.pu-nav-link--booking { order: 2; }

/* The bar spells nothing out any more. Chapters, Solutions and the
   blueprints are all in the menu, at every width, so there is one list of
   them rather than one in the bar and another behind the button. */
.pu-nav { display: none; }

.pu-nav-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.pu-nav-menu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 42px;
}

.pu-nav-link {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 120;
  isolation: isolate;
}

.pu-nav-link::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 72%);
  opacity: 0;
  transform: scale(0.9);
  transform-origin: center;
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.pu-nav-link:hover,
.pu-nav-link:focus-visible,
.pu-nav-link--active {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  transform: translateY(-1px);
  z-index: 130;
}

.pu-nav-link:hover::after,
.pu-nav-link:focus-visible::after,
.pu-nav-link--active::after,
.pu-nav-link--current::after {
  opacity: 1;
  transform: scaleX(1);
}

.pu-nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.pu-nav-dot--yellow { background-color: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.7); }

.pu-nav-dot--orange { background-color: #f97316; box-shadow: 0 0 8px rgba(249, 115, 22, 0.7); }

.pu-nav-dot--purple { background-color: #a78bfa; box-shadow: 0 0 8px rgba(167, 139, 250, 0.7); }

.pu-nav-dot--sky { background-color: #38bdf8; box-shadow: 0 0 8px rgba(56, 189, 248, 0.7); }

.pu-nav-link:hover .pu-nav-dot,
.pu-nav-link--current .pu-nav-dot { transform: scale(1.35); }

.pu-nav-link--members:hover,
.pu-nav-link--members.pu-nav-link--current {
  color: #34d399 !important;
  background: rgba(52, 211, 153, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.18) !important;
}

.pu-nav-link--current {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.pu-nav-link--booking {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  justify-content: center;
  color: #0b0f19;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 44%, #fbbf24 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 22px rgba(251, 191, 36, 0.38);
}

.pu-nav-link--booking::after {
  inset: 0;
  border-color: rgba(255, 236, 186, 0.55);
  background: transparent;
}

@keyframes puBookingPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 22px rgba(251, 191, 36, 0.38), 0 0 0 0 rgba(251, 191, 36, 0.34); }
  55% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 22px rgba(251, 191, 36, 0.5), 0 0 0 7px rgba(251, 191, 36, 0); }
}

.pu-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  /* Not symmetric on purpose: the buttons keep 32px on the right, the logo
     takes 5 on the left, which is where the hub puts it. A mark carries its
     own margin inside the artwork, so the same number on both sides sits it
     too far in. The phone keeps its own padding below. */
  padding: 0 32px 0 5px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  /* No rule under the bar and no shadow beneath it. Both drew a hard edge
     across the top of the scene, which cut the page into a chrome strip and a
     picture; without them the stage runs to the top of the screen and the
     controls sit on it. The backing fades out instead of stopping, so there is
     nothing to see the end of, and the backdrop blur still carries the whole
     height so the logo and the buttons stay legible over the sections below. */
  background: linear-gradient(180deg,
    rgba(5, 7, 12, 0.94) 0%,
    rgba(5, 7, 12, 0.80) 58%,
    rgba(5, 7, 12, 0) 100%);
  backdrop-filter: blur(18px) saturate(1.04);
  transition: background 0.35s ease, backdrop-filter 0.35s ease;
  overflow: visible;
}

.pu-nav-link--portal .pu-nav-label {
  position: static;
  opacity: 1;
  transform: none;
  white-space: nowrap;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
  .pu-nav-link--booking { animation: puBookingPulse 3.4s ease-out infinite; }}

.pu-nav-link--booking:hover,
.pu-nav-link--booking:focus-visible {
  color: #0b0f19;
  background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 48%, #fbbf24 100%);
  animation: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 30px rgba(251, 191, 36, 0.55);
}

.pu-nav-link--booking svg { width: 17px; height: 17px; flex: 0 0 17px; }

.pu-nav-link--booking .pu-nav-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translate(-50%, -4px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: 999px;
  color: #f3f4f6;
  background: rgba(11, 14, 22, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.pu-nav-link--booking:hover .pu-nav-label,
.pu-nav-link--booking:focus-visible .pu-nav-label { opacity: 1; transform: translate(-50%, 0); }

.pu-nav-link--portal {
  height: 42px;
  padding: 0 18px;
  gap: 8px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(217, 211, 255, 0.08);
  border: 1px solid rgba(217, 211, 255, 0.18);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.16);
}

.pu-nav-link--portal::after {
  inset: 0;
  border-color: rgba(217, 211, 255, 0.24);
  background: radial-gradient(circle, rgba(217, 211, 255, 0.12), transparent 72%);
}

.pu-nav-link--portal:hover,
.pu-nav-link--portal:focus-visible {
  color: #fff;
  background: rgba(217, 211, 255, 0.14);
  border-color: rgba(217, 211, 255, 0.32);
}

.pu-nav-label { line-height: 1; position: relative; z-index: 1; }

.pu-nav-submenu {
  position: absolute;
  top: calc(100% + 42px);
  left: 50%;
  right: auto;
  min-width: 244px;
  margin-left: -122px;
  padding: 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(16, 18, 24, 0.96), rgba(10, 12, 18, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.985);
  transform-origin: top center;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  transition-delay: 0s;
  z-index: 110;
}

.pu-nav-submenu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
}

.pu-nav-submenu--left { left: 50%; }

.pu-nav-menu:hover .pu-nav-submenu,
.pu-nav-menu:focus-within .pu-nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0.25s;
}

.pu-nav-submenu-link {
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pu-nav-submenu-link:hover,
.pu-nav-submenu-link:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  transform: translateX(2px);
}

.pu-nav-submenu-row { display: flex; align-items: center; gap: 10px; white-space: nowrap; }

.pu-nav-submenu-split { display: flex; align-items: stretch; gap: 4px; }

.pu-nav-submenu-split .pu-nav-submenu-link { flex: 1; }

.pu-nav-submenu-expander {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.pu-nav-submenu-expander:hover,
.pu-nav-submenu-expander:focus-visible { background: rgba(255, 255, 255, 0.07); color: #fff; }

.pu-nav-submenu-expander svg { transition: transform 0.2s ease; }

.pu-nav-submenu-expander--open svg { transform: rotate(90deg); }

.pu-nav-submenu-sub {
  margin: 2px 0 0 12px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.pu-nav-submenu-sub .pu-nav-submenu-link { padding: 9px 12px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.66); }

.pu-nav-badge-new {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Green rather than blue: Try it is an invitation, New is a state, and the
   two sit in the same menu a few rows apart. */
.pu-nav-badge-new--try {
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.42);
  color: #6ee7b7;
}

.pu-chapter-notification {
  position: relative;
  display: inline-flex;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.18), 0 0 12px rgba(251, 191, 36, 0.78), 0 0 22px rgba(251, 191, 36, 0.35);
}

.pu-chapter-notification::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 1px solid rgba(251, 191, 36, 0.38);
  opacity: 0;
  transform: scale(0.6);
  animation: pu-chapter-notification-pulse 1.9s ease-out infinite;
}

@keyframes pu-chapter-notification-pulse {
  0% { opacity: 0.75; transform: scale(0.55); }
  70%, 100% { opacity: 0; transform: scale(1.5); }
}

.pu-nav-link--what-we-do:hover,
.pu-nav-link--what-we-do.pu-nav-link--current,
.pu-nav-menu:hover .pu-nav-link--what-we-do {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.1) !important;
}



@media (max-width: 768px) {
  .pu-header {
    height: var(--header-h);
    /* Hard into both corners on a phone: the logo in the left one, the three
       buttons in the right, with only enough inset to keep them off the edge.

       A flex row rather than the desktop grid. The grid depends on its column
       template holding, and when that is lost the two children stack: the logo
       on one line and the buttons on the next, below the bar. Two flex children
       pushed apart cannot do that, and align-items centres both on the same
       line whatever else changes around them. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 4px;
    gap: 10px;
  }

  /* In a flex row the logo must not stretch, and the buttons take only what
     they need so they sit hard right. */
  .pu-header > a { flex: 0 0 auto; display: flex; align-items: center; }
  .pu-header > .pu-nav-area { flex: 0 1 auto; }

  /* The logo sits in the corner at this width and takes the whole bar height.
     The desktop 40px inset would drag it back towards the middle. */
  .pu-logo { height: 52px; margin-left: 0; margin-top: 0; }



  .pu-nav-area { margin-top: 0; gap: 8px; }




  .pu-nav-link--booking { height: 36px; width: 36px; min-width: 36px; padding: 0; }


  .pu-nav-link--portal { height: 36px; padding: 0 14px; font-size: 0.7rem; }


  .pu-nav-link--booking svg { width: 15px; height: 15px; flex: 0 0 15px; }}

@media (max-width: 860px) {
  .pu-nav-link--portal { padding: 0 14px; }

  .pu-nav-link--portal .pu-nav-label { display: none; }}

/* The narrowest phones, where the login pill gives up a little more of its
   padding so the three buttons still clear the logo. The landing page's
   numbers; the app and the capability pages each had their own, and one of
   them used 13px. */
@media (max-width: 520px) {
  .pu-nav-link--portal { padding: 0 11px; font-size: 0.68rem; }
  .pu-nav-area { gap: 6px; }
}