/*
 * Landing page (Figma "Landing page / Proposition 2").
 *
 * Geometry is transcribed from the 1440x2064 export: a 1218px content column
 * centred in the viewport, a 3-up grid of 380px cards with a 39px gutter, and a
 * 2-up grid of 585px rows with a 46px gutter. Those exact numbers are why the
 * grids are declared with explicit column counts rather than auto-fit.
 *
 * The page is monochrome by design. Both background layers are the same
 * constellation artwork exported at different opacities: the hero at 48%, the
 * lower half at 24% and flipped, which is how the source SVGs already ship.
 */

/*
 * Dark is the default because it IS the design. Light is a derived variant:
 * the same geometry with the surfaces inverted and the constellation artwork
 * flipped to dark-on-light so it stays visible.
 */
.page {
  --container: 1218px;
  --gutter: 39px;
  /* Also the offset the mobile menu panel hangs from, so the two cannot drift. */
  --header-h: 84px;
  /* Total horizontal breathing room around the content column, split in two. */
  --page-gutter: 48px;

  --page-bg: #000000;
  --ink: #ffffff;
  --ink-muted: rgba(255, 255, 255, 0.66);
  --ink-faint: rgba(255, 255, 255, 0.46);
  --surface: #1e1e1e;
  --surface-pricing: #212121;
  --ink-strong: rgba(255, 255, 255, 0.8);
  --hairline: rgba(255, 255, 255, 0.14);
  --hairline-strong: rgba(255, 255, 255, 0.28);

  /* Chrome: white bars top and bottom, as in the export. */
  --bar-bg: #ffffff;
  --bar-fg: #000000;
  --bar-fg-muted: #1a1a1a;
  --bar-line: rgba(0, 0, 0, 0.14);

  /* Pill that sits on the white bar. */
  --pill-bg: #000000;
  --pill-fg: #ffffff;
  --pill-bg-hover: #1a1a1a;

  /* Pill that sits on the dark body. */
  --cta-bg: #ffffff;
  --cta-fg: #000000;
  --cta-bg-hover: #f0f0f0;

  /* Chips and icon tiles on the dark body. */
  --chip-bg: #ffffff;
  --chip-fg: #000000;

  --ring: #ffffff;
  --art-filter: none;
  /* Opacities the source SVGs baked in, now applied in CSS. */
  --art-opacity-hero: 0.48;
  --art-opacity-lower: 0.24;

  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-landing), var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* A long plan feature, a support address or an Arabic compound must wrap
     rather than widen the page past the viewport. */
  overflow-wrap: break-word;
}

.page[data-theme="light"] {
  --page-bg: #ffffff;
  --ink: #101013;
  --ink-muted: rgba(16, 16, 19, 0.68);
  --ink-faint: rgba(16, 16, 19, 0.5);
  --surface: #f4f4f5;
  --surface-pricing: #fafafa;
  --ink-strong: rgba(16, 16, 19, 0.82);
  --hairline: rgba(16, 16, 19, 0.12);
  --hairline-strong: rgba(16, 16, 19, 0.24);

  --bar-bg: #101013;
  --bar-fg: #ffffff;
  --bar-fg-muted: rgba(255, 255, 255, 0.82);
  --bar-line: rgba(255, 255, 255, 0.18);

  --pill-bg: #ffffff;
  --pill-fg: #101013;
  --pill-bg-hover: #ececec;

  --cta-bg: #101013;
  --cta-fg: #ffffff;
  --cta-bg-hover: #2a2a2e;

  --chip-bg: #101013;
  --chip-fg: #ffffff;

  --ring: #101013;
  /* The artwork is white line-work on transparent, invisible on white. Invert
     it to dark line-work and pull it back so it reads as texture, not noise. */
  --art-filter: invert(1);
  --art-opacity-hero: 0.3;
  --art-opacity-lower: 0.16;
}

.container {
  /* 24px of breathing room each side on desktop, 16px once the viewport is
     narrow enough that the gutter is competing with the content. */
  width: min(var(--container), calc(100% - var(--page-gutter)));
  margin-inline: auto;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.header {
  height: var(--header-h);
  background: var(--bar-bg);
  color: var(--bar-fg);
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  z-index: 20;
}

.headerInner {
  height: var(--header-h);
  display: flex;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

/* Monochrome, matching the export: the mark inherits the bar's foreground, so
   it is black on the white bar and white when the bar inverts in light mode. */
.brandMark {
  color: var(--bar-fg);
  flex: none;
}

.brandName {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  align-items: center;
  /*
   * The Figma frame sets these at 1440px: the nav starts 254px after the brand
   * with 77px between links. Held exactly at that width and above, and
   * interpolated down to 120px / 60px at 1180px, where the header folds into
   * the menu.
   *
   * They cannot simply stay fixed. At 1181px the bar has 1133px to spend and
   * the design's numbers need 1202px once a signed-in visitor's account chip is
   * in the row, which pushed the chip off the end.
   */
  gap: clamp(60px, calc(60px + (100vw - 1180px) * 0.0656), 77px);
  margin-inline-start: clamp(120px, calc(120px + (100vw - 1180px) * 0.517), 254px);
}

.navLink {
  font-size: 15px;
  color: var(--bar-fg-muted);
  text-decoration: none;
}

.navLink:hover {
  color: var(--bar-fg);
}

.headerActions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-inline-start: auto;
}

/* The controls that fold into the mobile menu below the tablet breakpoint. */
.headerActionsWide {
  display: flex;
  align-items: center;
  gap: 20px;
}

.signIn {
  font-size: 15px;
  font-weight: 600;
  color: var(--bar-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.headerCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.headerCta:hover {
  background: var(--pill-bg-hover);
}

/* Directional glyph: arrows point along the reading direction. */
[dir="rtl"] .dirIcon {
  transform: scaleX(-1);
}

.langSwitch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--bar-line);
  border-radius: 9px;
  color: var(--bar-fg-muted);
  cursor: pointer;
}

.langSwitch:hover {
  border-color: var(--bar-fg);
}

.langSwitch select {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: inherit;
  cursor: pointer;
  outline: none;
}

/* ── Backgrounds ────────────────────────────────────────────────────────── */

/*
 * Each band paints the constellation art as its own background rather than one
 * page-wide layer, because the source exports differ in both height and
 * opacity. `background-size: 1440px auto` keeps the artwork at its design scale
 * on wider viewports instead of stretching it.
 */
.heroBand,
.lowerBand {
  position: relative;
  background-color: var(--page-bg);
}

/* The artwork lives on its own layer so it can be filtered per theme, and is
   sized to 100% width so it spans the viewport rather than stopping at the
   design's 1440px frame. */
.heroBand::before,
.lowerBand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  filter: var(--art-filter);
  pointer-events: none;
}

/*
 * Both bands are the SAME artwork. The Figma export shipped it twice as two
 * ~950KB SVGs, each embedding an identical 709KB base64 PNG, differing only in
 * opacity (48% vs 24%) and a 180-degree rotation. Serving one 31KB WebP and
 * doing the opacity and rotation in CSS reproduces it exactly for ~2% of the
 * bytes.
 */
.heroBand::before {
  background-image: url("/landing-bg.webp");
  opacity: var(--art-opacity-hero);
}

.lowerBand::before {
  background-image: url("/landing-bg.webp");
  transform: rotate(180deg);
  opacity: var(--art-opacity-lower);
}

/* Keep content above the artwork layer. */
.heroBand > *,
.lowerBand > * {
  position: relative;
  z-index: 1;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: 1fr 530px;
  gap: 70px;
  padding-top: 89px;
  padding-bottom: 127px;
  align-items: start;
}

.eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 10px;
}

.eyebrowItem {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.h1 {
  font-size: 36px;
  line-height: 43px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  max-width: 460px;
}

.heroLead {
  font-size: 16px;
  line-height: 21px;
  color: var(--ink-muted);
  margin: 0 0 30px;
  max-width: 430px;
}

.heroCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(346px, 100%);
  height: 60px;
  border-radius: 12px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.heroCta:hover {
  background: var(--cta-bg-hover);
}

/* "Comment ça marche ?" card */
.howCard {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  padding: 26px 26px 34px;
  /* The 530px is the grid column's job; the card just fills it. */
  width: 100%;
}

.howTitle {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  margin: 0 0 35px;
}

.howSteps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.howStep {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 57px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 9px 16px;
}

.howStepIndex {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.howStepTitle {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 2px;
}

.howStepBody {
  font-size: 14px;
  color: var(--ink-faint);
  margin: 0;
}

/* ── Section shell ──────────────────────────────────────────────────────── */

.sectionTitle {
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 45px;
}

/* Aligns the copy column's first line with the export while leaving the
   "Comment ça marche ?" card pinned to the top of the hero grid. */
.heroCopy {
  padding-top: 24px;
}

.sectionTitleCenter {
  text-align: center;
}

/* ── Agent template cards ───────────────────────────────────────────────── */

.agents {
  padding-bottom: 60px;
}

.agentGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.agentCard {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 22px;
  min-height: 261px;
  display: flex;
  flex-direction: column;
}

.agentHead {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 14px;
}

.agentIcon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.agentName {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: 11px;
  font-weight: 700;
}

.agentBody {
  font-size: 14px;
  line-height: 18px;
  color: var(--ink-strong);
  margin: 0 0 auto;
}

.agentSources {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--hairline);
}

.agentAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.agentAction:hover {
  background: var(--hairline);
}

/* ── Connectors ─────────────────────────────────────────────────────────── */

.connectors {
  padding-bottom: 82px;
}

.connectorGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 19px 46px;
}

.connectorRow {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 93px;
  padding: 16px 22px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

.connectorIcon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.connectorName {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 3px;
}

.connectorMeta {
  font-size: 14px;
  color: var(--ink-faint);
  margin: 0;
}

/* ── Pricing ────────────────────────────────────────────────────────────── */

.pricing {
  padding-bottom: 136px;
}

/* Cards align on their top edge; the highlighted one grows 21px up and 20px
   down, which is why the row is centre-aligned rather than stretched. */
.pricingGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  align-items: center;
}

.planCard {
  background: var(--surface-pricing);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 26px 24px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
}

.planCardHighlighted {
  min-height: 421px;
  border: 2px solid var(--ring);
  box-shadow: 0 0 0 1px var(--hairline-strong);
}

.planName {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}

.planTagline {
  font-size: 14px;
  color: var(--ink-faint);
  margin: 0 0 22px;
}

.planPrice {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
}

.planPriceValue {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.planPriceUnit {
  font-size: 14px;
  color: var(--ink-muted);
}

.planFeatures {
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.planFeature {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--ink);
}

.planFeatureHighlighted {
  font-weight: 700;
}

.planCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  margin-top: auto;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.planCtaSolid {
  background: var(--cta-bg);
  color: var(--cta-fg);
}

.planCtaSolid:hover {
  background: var(--cta-bg-hover);
}

.planCtaOutline {
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
}

.planCtaOutline:hover {
  background: var(--hairline);
}

.planEmpty {
  grid-column: 1 / -1;
  border: 1px dashed var(--hairline);
  border-radius: 14px;
  padding: 40px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 15px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer {
  background: var(--bar-bg);
  color: var(--bar-fg);
}

.footerInner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 14px 0;
  font-size: 14px;
}

.footerLinks {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footerLink {
  color: var(--bar-fg);
  text-decoration: none;
}

.footerLink:hover {
  text-decoration: underline;
}

/* ── Mobile menu ────────────────────────────────────────────────────────── */

/*
 * Below the tablet breakpoint the bar keeps the brand and the theme toggle and
 * everything else moves in here: the section links, the language picker and the
 * sign-in / account slot. Previously the nav was simply hidden below 1180px,
 * which left phone visitors with no route to Templates, Connecteurs or Tarifs.
 *
 * `display: none` is the default for the button, the panel and the scrim, so
 * above the breakpoint none of them can appear no matter what state the
 * component is in.
 */

.menuButton,
.menuPanel,
.menuScrim {
  display: none;
}

.menuButton {
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bar-line);
  border-radius: 9px;
  background: transparent;
  color: var(--bar-fg);
  cursor: pointer;
}

.menuButton:hover {
  border-color: var(--bar-fg);
}

/* Starts below the bar, not at the top of the viewport: the scrim's job is to
   dim the page behind the sheet, and covering the bar too would grey out the
   brand and put a transparent layer over the button that closes the menu. */
.menuScrim {
  position: fixed;
  inset-block: var(--header-h) 0;
  inset-inline: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 18;
}

.menuPanel {
  position: fixed;
  inset-block-start: var(--header-h);
  inset-inline: 0;
  z-index: 19;
  flex-direction: column;
  gap: 4px;
  padding: 12px calc(var(--page-gutter) / 2) 22px;
  background: var(--bar-bg);
  color: var(--bar-fg);
  border-block-end: 1px solid var(--bar-line);
  /* A short phone in landscape must still be able to reach the CTA. */
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}

.menuNav {
  display: flex;
  flex-direction: column;
}

.menuLink {
  padding: 13px 0;
  border-block-end: 1px solid var(--bar-line);
  color: var(--bar-fg);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.menuActions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-top: 18px;
}

/* The header versions of these are sized for a horizontal bar; in the panel
   they get the full width of the sheet. */
.menuActions .langSwitch {
  justify-content: center;
  height: 44px;
}

.menuActions .signIn {
  text-align: center;
  padding: 10px 0;
}

.menuActions .headerCta {
  height: 48px;
  font-size: 16px;
}

.menuActions .account {
  max-width: none;
  height: 52px;
  justify-content: flex-start;
}

/* Holding a 150px slot makes sense in a bar; in a stacked sheet it is dead
   space that shifts the CTA down once Clerk resolves. */
.menuActions .accountPlaceholder {
  width: 100%;
  height: 48px;
}

/* ── Narrow viewports ───────────────────────────────────────────────────── */

/*
 * Two steps, each one triggered by something in the design actually running out
 * of room rather than by a device name:
 *
 *   <= 1180px  the 1fr/530px hero split and the full nav plus account controls
 *              stop fitting, and the card grids hand over to auto-fit
 *   <=  640px  the desktop type scale and section padding are too large
 *
 * Between them the grids need no breakpoint of their own: auto-fit drops from
 * three cards to two at roughly 930px and to one at roughly 630px, wherever the
 * 272px minimum stops dividing.
 */

@media (max-width: 1180px) {
  .page {
    --header-h: 64px;
  }

  .nav,
  .headerActionsWide {
    display: none;
  }

  .headerActions {
    gap: 12px;
  }

  .menuButton {
    display: inline-flex;
  }

  .menuPanel:not([hidden]) {
    display: flex;
  }

  .menuScrim:not([hidden]) {
    display: block;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 64px;
    padding-bottom: 80px;
  }

  .heroCopy {
    padding-top: 0;
  }

  /* auto-fit rather than a fixed count: three agent cards and three plans then
     fall to 2-up on a tablet and 1-up on a phone without another breakpoint. */
  .agentGrid,
  .pricingGrid,
  .connectorGrid {
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  }

  .pricingGrid {
    align-items: stretch;
  }

  /* The 21px of extra height is a wide-screen flourish; in a wrapped grid it
     just makes one card taller than its neighbour. */
  .planCard,
  .planCardHighlighted {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .page {
    --page-gutter: 32px;
  }

  .agentCard {
    min-height: 0;
  }

  .brandName {
    font-size: 18px;
  }

  .h1 {
    font-size: 28px;
    line-height: 35px;
  }

  .heroLead {
    font-size: 15px;
    line-height: 20px;
  }

  .heroCta {
    height: 54px;
    font-size: 16px;
  }

  .hero {
    gap: 36px;
    padding-top: 44px;
    padding-bottom: 52px;
  }

  .howCard {
    padding: 20px 18px 24px;
  }

  .howTitle {
    font-size: 20px;
    margin-bottom: 22px;
  }

  .sectionTitle {
    font-size: 22px;
    line-height: 29px;
    margin-bottom: 26px;
  }

  .agents {
    padding-bottom: 40px;
  }

  .connectors {
    padding-bottom: 48px;
  }

  .pricing {
    padding-bottom: 64px;
  }

  .planPriceValue {
    font-size: 30px;
  }

  .footerInner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 0;
  }
}

/* Small phones: the brand lockup and the two bar controls are all that fit. */
@media (max-width: 360px) {
  .brandName {
    font-size: 16px;
  }

  .headerActions {
    gap: 8px;
  }
}

/* ── Theme toggle ───────────────────────────────────────────────────────── */

.themeToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--bar-line);
  border-radius: 9px;
  background: transparent;
  color: var(--bar-fg-muted);
  cursor: pointer;
}

.themeToggle:hover {
  border-color: var(--bar-fg);
  color: var(--bar-fg);
}

/* ── Header account chip ────────────────────────────────────────────────── */

/* Reserves the slot while Clerk resolves, so the header does not jump. */
.accountPlaceholder {
  display: inline-block;
  width: 150px;
  height: 40px;
}

.account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px 0 6px;
  border: 1px solid var(--bar-line);
  border-radius: 999px;
  color: var(--bar-fg);
  text-decoration: none;
  max-width: 260px;
}

.account:hover {
  border-color: var(--bar-fg);
  background: color-mix(in srgb, var(--bar-fg) 6%, transparent);
}

.accountAvatar,
.accountAvatarFallback {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  flex: none;
  object-fit: cover;
}

.accountAvatarFallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 13px;
  font-weight: 700;
}

.accountText {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.accountName {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountRole {
  font-size: 11px;
  color: var(--bar-fg-muted);
  opacity: 0.85;
}