/* ── Floating white pill navbar ────────────────────────────────
   Extracted from home.css so every page that includes
   partials/navbar.html (My Work, admin, legal, company, etc.) gets
   the same pill chrome — not just home/free/explore which happen to
   load home.css. Loaded directly by partials/navbar.html so there is
   one source of truth and adding a new page never re-orphans the
   styling. */
.top-bar.transparent {
  background: transparent;
  /* Top inset chosen so the pill's vertical centre lines up with
     the top edge of the gradient panel (panel margin-top minus
     half the pill height). */
  padding: 6px 56px 0;
  height: auto;
  align-items: flex-start;
  /* Let clicks pass through the dead zone to the hero beneath;
     re-enabled on the visible pill below. */
  pointer-events: none;
}
.top-bar.transparent .top-bar-inner {
  pointer-events: auto;
  background: var(--white);
  border-radius: 100px;
  padding: 10px 28px;
  height: calc(var(--topbar-height) - 12px);
  max-width: var(--content-max-width);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
/* Flip the navbar text/logo to dark since the chrome is now white. All
   nav controls share the same size/weight so the bar reads as one row of
   peers — only language gets a slightly muted tone since it's a utility. */
.top-bar.transparent .top-bar-link,
.top-bar.transparent .nav-lang-trigger,
.top-bar.transparent .top-bar-center-link {
  color: var(--black);
  font-size: 14px;
  font-weight: 500;
  opacity: 1;
  letter-spacing: 0.1px;
}
/* Active-page bold survives the landing-hero override above. */
.top-bar.transparent .top-bar-center-link.active,
.top-bar.transparent .top-bar-link.active {
  font-weight: 700;
}
.top-bar.transparent .nav-lang-trigger {
  color: var(--gray-dark, #706669);
}
.top-bar.transparent .top-bar-link:hover,
.top-bar.transparent .nav-lang-trigger:hover,
.top-bar.transparent .top-bar-center-link:hover {
  color: var(--fuchsia);
  opacity: 1;
}

/* Pricing icon link in the right-hand nav cluster. Kept the same
   typographic weight as its neighbours (My Work, EN) so it reads as
   another peer in the row, just expressed as an icon. */
.top-bar.transparent .top-bar-right {
  gap: 20px;
}
.top-bar.transparent .top-bar-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  padding: 6px;
  line-height: 0;
  transition: color 140ms ease;
}
.top-bar.transparent .top-bar-icon-link:hover {
  color: var(--fuchsia);
}

/* "Free Reports" pill in the centre nav — visually distinct from the
   five mega-menu triggers because it's a direct link, not a dropdown. */
.top-bar.transparent .top-bar-center-link--pill,
.top-bar.transparent.scrolled .top-bar-center-link--pill,
.top-bar.white .top-bar-center-link--pill,
.top-bar-center-link--pill {
  background: var(--black);
  color: var(--white);
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 600;
}
.top-bar.transparent .top-bar-center-link--pill:hover,
.top-bar-center-link--pill:hover {
  background: var(--fuchsia);
  color: var(--white);
}
.top-bar.transparent .logo-full.logo-inverse {
  display: none;
}
.top-bar.transparent .logo-full.logo-color {
  display: block;
}
.top-bar.transparent .btn-signup {
  background: var(--black);
  color: var(--white);
}
.top-bar.transparent .mobile-menu-btn,
.top-bar.transparent .mobile-search-btn,
.top-bar.transparent .mobile-profile-btn {
  color: var(--black);
}
/* Keep the floating white pill on scroll — do not morph back into a
   flush full-width bar. The base .top-bar is position:fixed so it stays
   pinned to the top of the viewport on its own. */
.top-bar.transparent.scrolled {
  padding: 6px 56px 0;
}
.top-bar.transparent.scrolled .top-bar-inner {
  background: var(--white);
  border-radius: 100px;
  padding: 10px 28px;
  height: calc(var(--topbar-height) - 12px);
}