/* Amplitude tab in the header row, left of the LinkedIn icon. Styled like a menu tab; applies only to .amp-tab. */
html body #header .top-row .amp-tab {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(0.2rem, 0.45vw, 0.4rem); height: 2.6rem; margin: 0 0.5rem 0 0; padding: 0 clamp(0.25rem, 0.7vw, 0.8rem);
  font-family: inherit; font-size: clamp(0.68rem, 0.5rem + 0.38vw, 0.86rem); font-weight: 600; line-height: 1.1;
  letter-spacing: 0; white-space: nowrap; text-decoration: none; text-transform: none;
  border: 1.5px solid #DCEAF7; border-radius: 8px; background: #DCEAF7; color: #1F3A5F;
  transition: background-color .12s, color .12s, border-color .12s;
}
html body #header .top-row .amp-tab:hover,
html body #header .top-row .amp-tab:focus-visible { border-color: #1F3A5F; color: #1F3A5F; }
html body #header .top-row .amp-tab.active,
html body #header .top-row .amp-tab[aria-current="page"] { background: #1F3A5F; border-color: #1F3A5F; color: #fff; }
html body #header .top-row .amp-tab-icon { flex: none; width: 1em !important; height: 1em !important; max-width: none !important; }
/* Phones: icon on top, label under it, like the phone menu tabs, 2.3rem tall.
   There is no free space between the centered title and the LinkedIn icon at this size, so the tab sits
   in the empty space to the right of the LinkedIn icon; the title and the icon do not move. */
@media (max-width: 639.98px) {
  html body #header .top-row { position: relative; }
  html body #header .top-row .amp-tab {
    position: absolute; top: 50%; right: -1.4rem; transform: translateY(-50%);
    flex-direction: column; gap: 0.1rem; height: 2.3rem; margin: 0; padding: 0.15rem 0.2rem;
    font-size: clamp(0.5rem, 2.3vw, 0.64rem); line-height: 1;
  }
  html body #header .top-row .amp-tab-icon { width: 0.8rem !important; height: 0.8rem !important; }
  /* Label on two lines (Amplitude / Insights) so the tab stays right of the LinkedIn icon. */
  html body #header .top-row .amp-tab { gap: 0.05rem; padding: 0.1rem 0.2rem; }
  html body #header .top-row .amp-tab-label { white-space: normal; text-align: center; max-width: 2.9rem; }
}
/* Amplitude page: small round avatar next to the page title */
html body .amp-title-row { display: flex; align-items: center; gap: 0.75rem; }
html body .amp-title-row h1 { margin: 0; min-width: 0; }
html body .amp-avatar { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; border: 1.5px solid #DCEAF7; }
@media (max-width: 639.98px) {
  html body .amp-title-row { gap: 0.55rem; }
  html body .amp-avatar { width: 2.75rem; height: 2.75rem; }
}