/*fern-site-stylesheet*/:root {
  --header-height: 50px;
  --header-height-real: 50px;
  --mobile-header-height-real: 50px;
  --content-width: 800px;
  --sidebar-width: 240px;
  --page-width: 100vw;
  --logo-height: 30px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fdfdfd;
  --accent-2: #fafafa;
  --accent-3: #f2f2f2;
  --accent-4: #e9e9e9;
  --accent-5: #e0e0e0;
  --accent-6: #d3d3d3;
  --accent-7: #c4c4c4;
  --accent-8: #afafaf;
  --accent-9: #404040;
  --accent-10: #515151;
  --accent-11: #6c6c6c;
  --accent-12: #383838;

  --accent-a1: #00000002;
  --accent-a2: #00000005;
  --accent-a3: #0000000d;
  --accent-a4: #00000016;
  --accent-a5: #0000001f;
  --accent-a6: #0000002c;
  --accent-a7: #0000003b;
  --accent-a8: #00000050;
  --accent-a9: #000000bf;
  --accent-a10: #000000ae;
  --accent-a11: #00000093;
  --accent-a12: #000000c7;

  --accent-contrast: #fff;
  --accent-surface: #f9f9f9cc;
  --accent-indicator: #404040;
  --accent-track: #404040;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0 none);
      --accent-2: oklch(98.5% 0 none);
      --accent-3: oklch(96.1% 0 none);
      --accent-4: oklch(93.5% 0 none);
      --accent-5: oklch(90.6% 0 none);
      --accent-6: oklch(86.8% 0 none);
      --accent-7: oklch(82.2% 0 none);
      --accent-8: oklch(75.3% 0 none);
      --accent-9: oklch(37.1% 0 none);
      --accent-10: oklch(43.5% 0 none);
      --accent-11: oklch(53.2% 0 none);
      --accent-12: oklch(34% 0 none);

      --accent-a1: color(display-p3 0 0 0 / 0.0078);
      --accent-a2: color(display-p3 0 0 0 / 0.0196);
      --accent-a3: color(display-p3 0 0 0 / 0.051);
      --accent-a4: color(display-p3 0 0 0 / 0.0863);
      --accent-a5: color(display-p3 0 0 0 / 0.1216);
      --accent-a6: color(display-p3 0 0 0 / 0.1725);
      --accent-a7: color(display-p3 0 0 0 / 0.2314);
      --accent-a8: color(display-p3 0 0 0 / 0.3137);
      --accent-a9: color(display-p3 0 0 0 / 0.749);
      --accent-a10: color(display-p3 0 0 0 / 0.6824);
      --accent-a11: color(display-p3 0 0 0 / 0.5765);
      --accent-a12: color(display-p3 0 0 0 / 0.7804);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9765 0.9765 0.9765 / 0.8);
      --accent-indicator: oklch(37.1% 0 none);
      --accent-track: oklch(37.1% 0 none);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfcfc;
  --grayscale-2: #f9f9f9;
  --grayscale-3: #f0f0f0;
  --grayscale-4: #e8e8e8;
  --grayscale-5: #e0e0e0;
  --grayscale-6: #d9d9d9;
  --grayscale-7: #cecece;
  --grayscale-8: #bbbbbb;
  --grayscale-9: #8d8d8d;
  --grayscale-10: #838383;
  --grayscale-11: #646464;
  --grayscale-12: #202020;

  --grayscale-a1: #00000003;
  --grayscale-a2: #00000006;
  --grayscale-a3: #0000000f;
  --grayscale-a4: #00000017;
  --grayscale-a5: #0000001f;
  --grayscale-a6: #00000026;
  --grayscale-a7: #00000031;
  --grayscale-a8: #00000044;
  --grayscale-a9: #00000072;
  --grayscale-a10: #0000007c;
  --grayscale-a11: #0000009b;
  --grayscale-a12: #000000df;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8d8d8d;
  --grayscale-track: #8d8d8d;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.988 0.988 0.988);
      --grayscale-2: color(display-p3 0.975 0.975 0.975);
      --grayscale-3: color(display-p3 0.939 0.939 0.939);
      --grayscale-4: color(display-p3 0.908 0.908 0.908);
      --grayscale-5: color(display-p3 0.88 0.88 0.88);
      --grayscale-6: color(display-p3 0.849 0.849 0.849);
      --grayscale-7: color(display-p3 0.807 0.807 0.807);
      --grayscale-8: color(display-p3 0.732 0.732 0.732);
      --grayscale-9: color(display-p3 0.553 0.553 0.553);
      --grayscale-10: color(display-p3 0.512 0.512 0.512);
      --grayscale-11: color(display-p3 0.392 0.392 0.392);
      --grayscale-12: color(display-p3 0.125 0.125 0.125);

      --grayscale-a1: #00000003;
      --grayscale-a2: #00000006;
      --grayscale-a3: #0000000f;
      --grayscale-a4: #00000017;
      --grayscale-a5: #0000001f;
      --grayscale-a6: #00000026;
      --grayscale-a7: #00000031;
      --grayscale-a8: #00000044;
      --grayscale-a9: #00000072;
      --grayscale-a10: #0000007c;
      --grayscale-a11: #0000009b;
      --grayscale-a12: #000000df;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.553 0.553 0.553);
      --grayscale-track: color(display-p3 0.553 0.553 0.553);
    }
  }
}


.dark {
  --accent-1: #1e1e1e;
  --accent-2: #252525;
  --accent-3: #2d2d2d;
  --accent-4: #343434;
  --accent-5: #3b3b3b;
  --accent-6: #454545;
  --accent-7: #525252;
  --accent-8: #686868;
  --accent-9: #e0e0e0;
  --accent-10: #d6d6d6;
  --accent-11: #bababa;
  --accent-12: #e7e7e7;

  --accent-a1: #00000000;
  --accent-a2: #ffffff08;
  --accent-a3: #ffffff11;
  --accent-a4: #ffffff19;
  --accent-a5: #ffffff21;
  --accent-a6: #ffffff2c;
  --accent-a7: #ffffff3b;
  --accent-a8: #ffffff54;
  --accent-a9: #ffffffdc;
  --accent-a10: #ffffffd1;
  --accent-a11: #ffffffb1;
  --accent-a12: #ffffffe4;

  --accent-contrast: #311921;
  --accent-surface: #2c2c2c80;
  --accent-indicator: #e0e0e0;
  --accent-track: #e0e0e0;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(23.5% 0 none);
      --accent-2: oklch(26.3% 0 none);
      --accent-3: oklch(29.8% 0 none);
      --accent-4: oklch(32.5% 0 none);
      --accent-5: oklch(35.3% 0 none);
      --accent-6: oklch(39% 0 none);
      --accent-7: oklch(44% 0 none);
      --accent-8: oklch(51.8% 0 none);
      --accent-9: oklch(90.7% 0 none);
      --accent-10: oklch(87.7% 0 none);
      --accent-11: oklch(78.8% 0 none);
      --accent-12: oklch(92.9% 0 none);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 1 1 1 / 0.0311);
      --accent-a3: color(display-p3 1 1 1 / 0.0667);
      --accent-a4: color(display-p3 1 1 1 / 0.0978);
      --accent-a5: color(display-p3 1 1 1 / 0.1289);
      --accent-a6: color(display-p3 1 1 1 / 0.1733);
      --accent-a7: color(display-p3 1 1 1 / 0.2311);
      --accent-a8: color(display-p3 1 1 1 / 0.3289);
      --accent-a9: color(display-p3 1 1 1 / 0.8622);
      --accent-a10: color(display-p3 1 1 1 / 0.8178);
      --accent-a11: color(display-p3 1 1 1 / 0.6933);
      --accent-a12: color(display-p3 1 1 1 / 0.8933);

      --accent-contrast: #311921;
      --accent-surface: color(display-p3 0.1725 0.1725 0.1725 / 0.5);
      --accent-indicator: oklch(90.7% 0 none);
      --accent-track: oklch(90.7% 0 none);
    }
  }
}


.dark {
  --grayscale-1: #111111;
  --grayscale-2: #191919;
  --grayscale-3: #222222;
  --grayscale-4: #2a2a2a;
  --grayscale-5: #313131;
  --grayscale-6: #3a3a3a;
  --grayscale-7: #484848;
  --grayscale-8: #606060;
  --grayscale-9: #6e6e6e;
  --grayscale-10: #7b7b7b;
  --grayscale-11: #b4b4b4;
  --grayscale-12: #eeeeee;

  --grayscale-a1: #00000000;
  --grayscale-a2: #ffffff09;
  --grayscale-a3: #ffffff12;
  --grayscale-a4: #ffffff1b;
  --grayscale-a5: #ffffff22;
  --grayscale-a6: #ffffff2c;
  --grayscale-a7: #ffffff3b;
  --grayscale-a8: #ffffff55;
  --grayscale-a9: #ffffff64;
  --grayscale-a10: #ffffff72;
  --grayscale-a11: #ffffffaf;
  --grayscale-a12: #ffffffed;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #6e6e6e;
  --grayscale-track: #6e6e6e;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.067);
      --grayscale-2: color(display-p3 0.098 0.098 0.098);
      --grayscale-3: color(display-p3 0.135 0.135 0.135);
      --grayscale-4: color(display-p3 0.163 0.163 0.163);
      --grayscale-5: color(display-p3 0.192 0.192 0.192);
      --grayscale-6: color(display-p3 0.228 0.228 0.228);
      --grayscale-7: color(display-p3 0.283 0.283 0.283);
      --grayscale-8: color(display-p3 0.375 0.375 0.375);
      --grayscale-9: color(display-p3 0.431 0.431 0.431);
      --grayscale-10: color(display-p3 0.484 0.484 0.484);
      --grayscale-11: color(display-p3 0.706 0.706 0.706);
      --grayscale-12: color(display-p3 0.933 0.933 0.933);

      --grayscale-a1: #00000000;
      --grayscale-a2: #ffffff09;
      --grayscale-a3: #ffffff12;
      --grayscale-a4: #ffffff1b;
      --grayscale-a5: #ffffff22;
      --grayscale-a6: #ffffff2c;
      --grayscale-a7: #ffffff3b;
      --grayscale-a8: #ffffff55;
      --grayscale-a9: #ffffff64;
      --grayscale-a10: #ffffff72;
      --grayscale-a11: #ffffffaf;
      --grayscale-a12: #ffffffed;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.431 0.431 0.431);
      --grayscale-track: color(display-p3 0.431 0.431 0.431);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(64, 64, 64, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: rgba(255, 255, 255, 1);
  --header-background: rgba(255, 255, 255, 1);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(224, 224, 224, 1);
  --background: rgba(30, 30, 30, 1);
  --border: initial;
  --sidebar-background: rgba(8, 9, 10, 1);
  --header-background: rgba(8, 9, 10, 1);
  --card-background: initial;
  --theme-color: #1e1e1e;
}

/* Hide branding */
.mx-auto.my-8.w-fit {
  display: none !important;
}

/* Hide first HR in changelog */
.fern-changelog > main > section + hr {
  display: none;
}

/* Make changelog entries center aligned */
.fern-changelog > main {
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-wrap: break-word;
  width: 100%;
}

.fern-changelog-entry {
  justify-content: center !important;
}

/* Reduce padding on first changelog entry */
.fern-changelog > main > section.fern-changelog-entry {
  padding-bottom: 0px;
}

/* Hide the docs sidebar tab icons container */
.flex.min-w-0.items-center.justify-start.space-x-4 > .min-w-fit {
  display: none !important;
  position: absolute !important;
  visibility: hidden !important;
}

.flex.min-w-0.items-center.justify-start.space-x-4 > span {
  margin-left: 0 !important;
}

/* Hide the icon span containing SVG inside tab links for main navigation tabs */
[role="tab"][href*="/docs/conversational-ai"] > span:has(svg),
[role="tab"][href="/docs/overview"] > span:has(svg),
[role="tab"][href*="/docs/api-reference"] > span:has(svg) {
  display: none !important;
}

/* Adjust spacing after hiding the icon for main navigation tabs */
[role="tab"][href*="/docs/conversational-ai"] > span:last-child,
[role="tab"][href="/docs/overview"] > span:last-child,
[role="tab"][href*="/docs/api-reference"] > span:last-child {
  margin-left: 0 !important;
}

/* Fix the tablist not being scrollable on mobile and hide the native scrollbar */
[role="tablist"] {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;

  /* Hide native scrollbars */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
[role="tablist"]::-webkit-scrollbar {
  display: none; /* Chrome, Safari, newer Edge */
}
[role="tablist"] h6[data-state="active"] {
  position: relative;
  z-index: 1;
  border-bottom: 2px solid currentColor !important;
}

.fern-sidebar-heading-content {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

@media (min-width: 1024px) {

  .fern-sidebar-heading {
    min-height: 30px !important;
  }

}

/* Make active sidebar links bolder with transition */
.fern-sidebar-link-container .fern-sidebar-link-text {
  font-weight: 400;
  transition: font-weight 0.15s ease;
}

/* Active state styling */
:root[class="light"] .fern-sidebar-link-container[data-state="active"] .fern-sidebar-link-text {
  font-weight: 500;
  color: #000000;
  /* or your preferred light mode active color */
}

:root[class="dark"] .fern-sidebar-link-container[data-state="active"] .fern-sidebar-link-text {
  font-weight: 500;
  color: #ffffff;
  /* or your preferred dark mode active color */
}

:root[class="light"] {
  --wave-color: blue;
}

:root[class="dark"] {
  --wave-color: gray;
}

/* Sidebar, header and header tabs styling */
.clipped-background {
  background: none !important;
  opacity: 0 !important;
}

.fern-header,
.fern-header-tabs {
  background-color: rgba(255, 255, 255, 0) !important;
}

.fern-sidebar-container,
.fern-header-container {
  backdrop-filter: blur(10px);
}

.fern-header-container {
  border-bottom-color: rgb(233, 232, 234);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  box-sizing: border-box;
}

:root[class="light"] .fern-sidebar-container,
:root[class="light"] .fern-header-container {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: #e9e8ea !important;
}

:root[class="dark"] .fern-sidebar-container,
:root[class="dark"] .fern-header-container {
  border-color: #23252a !important;
  background-color: rgba(0, 0, 0, 0.8);
}

/* Remove the bottom border on the header */
.fern-header {
  border-bottom: none !important;
}

/* Fix the logo height */
.fern-logo-container {
  height: 30px !important;
}

/* Bring TOC infront of the wave */
.fern-layout-toc {
  z-index: 1 !important;
}

elevenlabs-convai {
  --el-base: var(--sidebar-background);
  --el-base-hover: var(--accent-3);
  --el-base-active: var(--accent-4);
  --el-base-border: var(--accent-5);
  --el-base-subtle: var(--grayscale-a11);
  --el-base-primary: var(--grayscale-contrast);

  --el-accent: var(--accent);
  --el-accent-hover: var(--accent-10);
  --el-accent-active: var(--accent-10);
  --el-accent-primary: var(--accent-contrast);

  --el-button-radius: calc(var(--radius) * 2);
  --el-input-radius: calc(var(--radius) * 2);
  --el-sheet-radius: calc(var(--radius) * 3);
  --el-compact-sheet-radius: calc(var(--radius) * 3);
}

/* Constrain the ElevenAgents widget to viewport width on narrow screens */
@media (max-width: 480px) {

  elevenlabs-convai {
    max-width: calc(100vw - var(--ask-ai-panel-width, 0px)) !important;
  }

}

#fern-auth-button {
  display: none;
}

/* Keep the header "Sign up" button visible below Fern's lg breakpoint.
   Fern hides the whole navbar (`hidden lg:flex`) under 1024px and moves its
   links into the mobile menu sheet. We show the nav again but keep only the
   filled Sign up button, and let the search box give up the width it needs. */
@media (max-width: 1023px) {

  .fern-header-navbar-links {
    display: flex !important;
    flex: 0 0 auto !important;
  }

  .fern-header-navbar-links > :not(a.fern-button.filled) {
    display: none !important;
  }

  .fern-header-content .fern-header-logo-container {
    flex-shrink: 0;
  }

  /* The search wrapper has no class of its own; it is the element after the logo */
  .fern-header-content .fern-header-logo-container + div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .fern-header-content > div > div.flex.w-full.items-center {
    gap: 0.5rem !important;
  }

}

/* Below 370px the search box has no room for its label next to Sign up, so
   collapse it to the icon. The word "Search" is a bare text node inside the
   button, so it is hidden by zeroing the font size; the icon is sized in rem
   and keeps its 1rem width. */
@media (max-width: 369px) {

  #fern-search-button {
    font-size: 0 !important;
    justify-content: center !important;
  }

}

/* Light mode */
:root[class="light"] #fern-announcement a.fern-mdx-link {
  color: white !important;
}

/* Make the announcement banner taller */
#fern-announcement {
  min-height: 40px;
}

#fern-announcement > * {
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* Improve inline code readability inside the announcement banner */
:root[class="light"] #fern-announcement code,
:root[class="light"] #fern-announcement code * {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

:root[class="light"] #fern-announcement code {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

:root[class="dark"] #fern-announcement code,
:root[class="dark"] #fern-announcement code * {
  background-color: transparent !important;
  color: #0a0a0a !important;
  border-color: rgba(0, 0, 0, 0.22) !important;
}

:root[class="dark"] #fern-announcement code {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

/* ==== FERN ANNOUNCEMENT – V4 BANNER ==== */
/* Light mode */
:root[class="light"] #fern-announcement {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f0f0f0 67%,
    #00a6d4 74%,
    #890976 85%,
    #ff5500 95%
  );
  color: #000000;
}

:root[class="light"] #fern-announcement a.fern-mdx-link {
  color: #000000 !important;
  text-decoration: underline;
}

/* Dark mode */
:root[class="dark"] #fern-announcement {
  background: linear-gradient(
    135deg,
    #08090a 0%,
    #131313 67%,
    #00a6d4 74%,
    #890976 85%,
    #ff5500 95%
  );
  color: white;
}

:root[class="dark"] #fern-announcement a.fern-mdx-link {
  color: white !important;
  text-decoration: underline;
}

/*----------------------------------------
  Agents Cards Styling
----------------------------------------*/
#agents-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

/* Responsive: 1 column on smaller screens */
@media (max-width: 768px) {

  #agents-cards {
    grid-template-columns: 1fr;
  }

}

#agents-cards .agents-card {
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Border styles - light mode only */
:root[class="light"] #agents-cards .agents-card {
  border: 1px solid #e5e7eb;
}

:root[class="dark"] #agents-cards .agents-card {
  border: none;
}

/* Remove any top margin/padding from all children */
#agents-cards .agents-card > *:first-child,
#agents-cards .agents-card > div:first-child,
#agents-cards .agents-card img:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure h3 titles have uniform spacing */
#agents-cards .agents-card h3 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Make text container grow to fill space */
#agents-cards .agents-card > div:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Hover effect - subtly lighten image only */
#agents-cards .agents-card:hover .agents-card-img {
  filter: brightness(1.05);
}
#agents-cards .agents-card:focus-within .agents-card-img {
  filter: brightness(1.05);
}

/* Monitor card image is brighter, so use a subtler hover lift */
#agents-cards .agents-card.agents-card-monitor:hover .agents-card-img {
  filter: brightness(1.02);
}
#agents-cards .agents-card.agents-card-monitor:focus-within .agents-card-img {
  filter: brightness(1.02);
}

/*----------------------------------------
  Mermaid Sequence Diagrams
  Brand styling: dark actor pills, subtle
  group boxes, thin black arrows.
----------------------------------------*/
svg[aria-roledescription="sequence"] {
  font-family: inherit !important;
}

/* Actor pills */
svg[aria-roledescription="sequence"] rect.actor {
  fill: #18181b !important;
  stroke: none !important;
  rx: 8px;
  ry: 8px;
}

svg[aria-roledescription="sequence"] text.actor,
svg[aria-roledescription="sequence"] text.actor tspan {
  fill: #ffffff !important;
  stroke: none !important;
  font-weight: 500;
}

/* Lifelines */
svg[aria-roledescription="sequence"] line.actor-line {
  stroke: #e4e4e7 !important;
  stroke-width: 1px !important;
}

/* Message arrows */
svg[aria-roledescription="sequence"] line.messageLine0,
svg[aria-roledescription="sequence"] line.messageLine1,
svg[aria-roledescription="sequence"] path.messageLine0,
svg[aria-roledescription="sequence"] path.messageLine1 {
  stroke: #18181b !important;
  stroke-width: 1px !important;
}

svg[aria-roledescription="sequence"] text.messageText {
  fill: #18181b !important;
  stroke: none !important;
  font-size: 13px !important;
}

svg[aria-roledescription="sequence"] defs marker path,
svg[aria-roledescription="sequence"] .marker {
  fill: #18181b !important;
  stroke: #18181b !important;
}

/* Group boxes (e.g. "box Your Server") */
svg[aria-roledescription="sequence"] rect.rect {
  fill: #f4f4f2 !important;
  stroke: none !important;
  filter: none !important;
  rx: 10px;
  ry: 10px;
}

svg[aria-roledescription="sequence"] text.text {
  fill: #71717a !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Notes */
svg[aria-roledescription="sequence"] rect.note {
  fill: #f4f4f2 !important;
  stroke: #e4e4e7 !important;
  filter: none !important;
  rx: 6px;
  ry: 6px;
}

svg[aria-roledescription="sequence"] text.noteText,
svg[aria-roledescription="sequence"] text.noteText tspan {
  fill: #18181b !important;
  font-size: 13px !important;
}

/* Loop / alt / opt frames */
svg[aria-roledescription="sequence"] line.loopLine {
  stroke: #d4d4d8 !important;
}

svg[aria-roledescription="sequence"] .labelBox {
  fill: #f4f4f2 !important;
  stroke: none !important;
  filter: none !important;
}

svg[aria-roledescription="sequence"] text.labelText,
svg[aria-roledescription="sequence"] text.labelText tspan,
svg[aria-roledescription="sequence"] text.loopText,
svg[aria-roledescription="sequence"] text.loopText tspan {
  fill: #71717a !important;
  font-size: 13px !important;
}

/* Dark mode */
:root[class="dark"] svg[aria-roledescription="sequence"] rect.actor {
  fill: #fafafa !important;
}

:root[class="dark"] svg[aria-roledescription="sequence"] text.actor,
:root[class="dark"] svg[aria-roledescription="sequence"] text.actor tspan {
  fill: #18181b !important;
}

:root[class="dark"] svg[aria-roledescription="sequence"] line.actor-line {
  stroke: #3f3f46 !important;
}

:root[class="dark"] svg[aria-roledescription="sequence"] line.messageLine0,
:root[class="dark"] svg[aria-roledescription="sequence"] line.messageLine1,
:root[class="dark"] svg[aria-roledescription="sequence"] path.messageLine0,
:root[class="dark"] svg[aria-roledescription="sequence"] path.messageLine1 {
  stroke: #fafafa !important;
}

:root[class="dark"] svg[aria-roledescription="sequence"] text.messageText {
  fill: #e4e4e7 !important;
}

:root[class="dark"] svg[aria-roledescription="sequence"] defs marker path,
:root[class="dark"] svg[aria-roledescription="sequence"] .marker {
  fill: #fafafa !important;
  stroke: #fafafa !important;
}

:root[class="dark"] svg[aria-roledescription="sequence"] rect.rect {
  fill: rgba(255, 255, 255, 0.05) !important;
}

:root[class="dark"] svg[aria-roledescription="sequence"] text.text {
  fill: #a1a1aa !important;
}

:root[class="dark"] svg[aria-roledescription="sequence"] rect.note {
  fill: #27272a !important;
  stroke: #3f3f46 !important;
}

:root[class="dark"] svg[aria-roledescription="sequence"] text.noteText,
:root[class="dark"] svg[aria-roledescription="sequence"] text.noteText tspan {
  fill: #e4e4e7 !important;
}

:root[class="dark"] svg[aria-roledescription="sequence"] line.loopLine {
  stroke: #52525b !important;
}

:root[class="dark"] svg[aria-roledescription="sequence"] .labelBox {
  fill: #27272a !important;
}

:root[class="dark"] svg[aria-roledescription="sequence"] text.labelText,
:root[class="dark"] svg[aria-roledescription="sequence"] text.labelText tspan,
:root[class="dark"] svg[aria-roledescription="sequence"] text.loopText,
:root[class="dark"] svg[aria-roledescription="sequence"] text.loopText tspan {
  fill: #a1a1aa !important;
}

/*----------------------------------------
  Mermaid Flowcharts
  Same palette as the sequence diagrams:
  white rounded nodes, subtle dashed
  subgraphs, thin black arrows. In a
  "<b>Title</b><br/>Subtitle" label the
  subtitle is muted.
----------------------------------------*/
svg[aria-roledescription="flowchart-v2"] {
  font-family: inherit !important;
}

/* Nodes */
svg[aria-roledescription="flowchart-v2"] .node rect,
svg[aria-roledescription="flowchart-v2"] .node polygon,
svg[aria-roledescription="flowchart-v2"] .node circle,
svg[aria-roledescription="flowchart-v2"] .node ellipse,
svg[aria-roledescription="flowchart-v2"] .node path {
  fill: #ffffff !important;
  stroke: #e4e4e7 !important;
  stroke-width: 1px !important;
}

svg[aria-roledescription="flowchart-v2"] .node rect.label-container {
  rx: 10px;
  ry: 10px;
}

svg[aria-roledescription="flowchart-v2"] .node .nodeLabel {
  color: #18181b !important;
  font-size: 14px;
}

svg[aria-roledescription="flowchart-v2"] .node .nodeLabel:has(b) {
  color: #71717a !important;
}

svg[aria-roledescription="flowchart-v2"] .node .nodeLabel b {
  color: #18181b;
  font-weight: 500;
}

/* Subgraphs */
svg[aria-roledescription="flowchart-v2"] .cluster rect {
  fill: #f4f4f2 !important;
  stroke: #d4d4d8 !important;
  stroke-width: 1px !important;
  stroke-dasharray: 4 3;
  rx: 12px;
  ry: 12px;
}

svg[aria-roledescription="flowchart-v2"] .cluster-label .nodeLabel {
  color: #71717a !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Edges */
svg[aria-roledescription="flowchart-v2"] path.flowchart-link:not(.edge-thickness-invisible) {
  stroke: #18181b !important;
  stroke-width: 1px !important;
}

svg[aria-roledescription="flowchart-v2"] .arrowMarkerPath {
  fill: #18181b !important;
  stroke: #18181b !important;
}

svg[aria-roledescription="flowchart-v2"] .edgeLabel,
svg[aria-roledescription="flowchart-v2"] .labelBkg {
  background-color: #ffffff !important;
  color: #71717a !important;
}

/* Dark mode */
:root[class="dark"] svg[aria-roledescription="flowchart-v2"] .node rect,
:root[class="dark"] svg[aria-roledescription="flowchart-v2"] .node polygon,
:root[class="dark"] svg[aria-roledescription="flowchart-v2"] .node circle,
:root[class="dark"] svg[aria-roledescription="flowchart-v2"] .node ellipse,
:root[class="dark"] svg[aria-roledescription="flowchart-v2"] .node path {
  fill: #27272a !important;
  stroke: #3f3f46 !important;
}

:root[class="dark"] svg[aria-roledescription="flowchart-v2"] .node .nodeLabel,
:root[class="dark"] svg[aria-roledescription="flowchart-v2"] .node .nodeLabel b {
  color: #fafafa !important;
}

:root[class="dark"] svg[aria-roledescription="flowchart-v2"] .node .nodeLabel:has(b) {
  color: #a1a1aa !important;
}

:root[class="dark"] svg[aria-roledescription="flowchart-v2"] .cluster rect {
  fill: rgba(255, 255, 255, 0.05) !important;
  stroke: #52525b !important;
}

:root[class="dark"] svg[aria-roledescription="flowchart-v2"] .cluster-label .nodeLabel {
  color: #a1a1aa !important;
}

:root[class="dark"]
  svg[aria-roledescription="flowchart-v2"]
  path.flowchart-link:not(.edge-thickness-invisible) {
  stroke: #fafafa !important;
}

:root[class="dark"] svg[aria-roledescription="flowchart-v2"] .arrowMarkerPath {
  fill: #fafafa !important;
  stroke: #fafafa !important;
}

:root[class="dark"] svg[aria-roledescription="flowchart-v2"] .edgeLabel,
:root[class="dark"] svg[aria-roledescription="flowchart-v2"] .labelBkg {
  background-color: #1e1e1e !important;
  color: #a1a1aa !important;
}

/*----------------------------------------
  Native Connect Dropdown
----------------------------------------*/
.fern-header-navbar-links > div.fern-button.minimal.normal[aria-haspopup="menu"] {
  margin-right: 0;
  height: calc(var(--spacing) * 8);
  padding-block: calc(var(--spacing) * 1);
  padding-inline: calc(var(--spacing) * 3);
  border-radius: calc(var(--radius) * 2);
  font-size: var(--text-sm);
  font-weight: inherit;
  gap: calc(var(--spacing) * 1.5);
}

.fern-dropdown:has(.fern-dropdown-item[href='https://discord.gg/elevenlabs'])
{
  min-width: 14.5rem;
  padding: 0.375rem;
  border-radius: 0.875rem;
}

.fern-dropdown:has(.fern-dropdown-item[href='https://discord.gg/elevenlabs']) .fern-dropdown-item
{
  position: relative;
  min-height: 1.875rem;
  cursor: pointer;
  border-radius: 0.5rem;
  padding: 0.3125rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: inherit;
}

.fern-dropdown:has(.fern-dropdown-item[href='https://discord.gg/elevenlabs'])
  .fern-dropdown-item[data-highlighted] {
  color: inherit;
}

.fern-dropdown:has(.fern-dropdown-item[href='https://discord.gg/elevenlabs'])
  .fern-dropdown-item[href='https://x.com/ElevenLabs']::before,
.fern-dropdown:has(.fern-dropdown-item[href='https://discord.gg/elevenlabs'])
  .fern-dropdown-item[href='https://x.com/elevenlabsdevs']::before
{
  position: absolute;
  left: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1rem;
  opacity: 0.72;
  pointer-events: none;
}

.fern-dropdown:has(.fern-dropdown-item[href='https://discord.gg/elevenlabs'])
  .fern-dropdown-item[href='https://x.com/ElevenLabs'],
.fern-dropdown:has(.fern-dropdown-item[href='https://discord.gg/elevenlabs'])
  .fern-dropdown-item[href='https://x.com/elevenlabsdevs']
{
  margin-top: 1.75rem;
}

.fern-dropdown:has(.fern-dropdown-item[href='https://discord.gg/elevenlabs'])
  .fern-dropdown-item[href='https://x.com/ElevenLabs']::before
{
  content: "ElevenLabs";
  top: -1.125rem;
}

.fern-dropdown:has(.fern-dropdown-item[href='https://discord.gg/elevenlabs'])
  .fern-dropdown-item[href='https://x.com/elevenlabsdevs']::before
{
  content: "ElevenLabs Developers";
  top: -1.125rem;
}

:root[class='light']
  .fern-dropdown:has(.fern-dropdown-item[href='https://discord.gg/elevenlabs'])
{
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e9e8ea;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

:root[class='light']
  .fern-dropdown:has(.fern-dropdown-item[href='https://discord.gg/elevenlabs'])
  .fern-dropdown-item[data-highlighted] {
  background: rgba(15, 23, 42, 0.06);
}

:root[class='dark']
  .fern-dropdown:has(.fern-dropdown-item[href='https://discord.gg/elevenlabs'])
{
  background: rgba(17, 17, 19, 0.96);
  border: 1px solid #23252a;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

:root[class='dark']
  .fern-dropdown:has(.fern-dropdown-item[href='https://discord.gg/elevenlabs'])
  .fern-dropdown-item[data-highlighted] {
  background: rgba(255, 255, 255, 0.08);
}

/*----------------------------------------
  Help Center Table Styling
----------------------------------------*/

/* These tables are a single unlabelled column, so the Markdown header row is empty */
.help-center-table thead {
  display: none;
}

/* Table Rows Styling */
.help-center-table td {
  padding: 0;
}

/* Table Links Styling */
.help-center-table a {
  display: block;
  padding: 30px;
  /* width: 100%; */
  height: 100%;
  text-decoration: none;
  color: var(--grayscale-contrast);
}

/* Tighten padding on narrow viewports so wrapped titles keep even spacing */
@media (max-width: 640px) {

  .help-center-table a {
    padding: 20px;
  }

}

.help-center-table a:hover {
  text-decoration: underline;
  background-color: var(--grayscale-a2);
}
.help-center-table a:focus-visible {
  text-decoration: underline;
  background-color: var(--grayscale-a2);
}

.faq-link {
  display: block;
  padding: 0;
  margin: 5px 0;
  /* color: var(--grayscale-contrast); */
  text-decoration: none !important;
}

.faq-link:hover {
  text-decoration: underline !important;
}
.faq-link:focus-visible {
  text-decoration: underline !important;
}

/*----------------------------------------
  FAQ Accordion Table Styling
----------------------------------------*/

/* Strip the card chrome from accordions inside the faq table */
.faq-accordion-table td {
  padding: 0;
  /* Let td grow to fit expanded accordion content */
  overflow: visible;
}

/* Reset all card/accordion chrome — border, shadow, bg, radius, dividers */
.faq-accordion-table td .fern-accordion,
.faq-accordion-table td .fern-card {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  --tw-divide-opacity: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.faq-accordion-table td .fern-accordion > * + * {
  border-top: none !important;
}

.faq-accordion-table td .fern-accordion-item {
  border-radius: 0 !important;
  border: none !important;
}

.faq-accordion-table td .fern-accordion-trigger,
.faq-accordion-table td .fern-accordion-trigger[data-state="open"],
.faq-accordion-table td .fern-accordion-trigger[data-state="closed"] {
  border-radius: 0 !important;
  padding: 14px 16px !important;
}

/* .fern-accordion-item has overflow:hidden which clips the Radix height animation
   inside a table cell. Override the full chain to let content flow naturally. */
.faq-accordion-table td .fern-accordion-item {
  overflow: visible !important;
}

/* Radix sets height + overflow:hidden on the region during animation, and also
   injects a content-width CSS var that constrains width. Override all of it. */
.faq-accordion-table td [role="region"] {
  overflow: visible !important;
  height: auto !important;
  width: 100% !important;
  animation: none !important;
  transition: none !important;
}

.faq-accordion-table td [role="region"] > div {
  padding-top: 0 !important;
}

/* Restore Tailwind Typography (prose) spacing inside faq-accordion-table.
   .fern-table-root adds `not-prose` which has a :not() guard that blocks all
   prose margin/spacing rules even when .prose is re-applied on a child element.
   Since prose uses :where() (zero specificity), any class selector beats it. */
.faq-accordion-table [role="region"] p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.faq-accordion-table [role="region"] p:first-child {
  margin-top: 0;
}

.faq-accordion-table [role="region"] p:last-child {
  margin-bottom: 0;
}

.faq-accordion-table [role="region"] li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.faq-accordion-table [role="region"] ul,
.faq-accordion-table [role="region"] ol {
  margin-top: 1.25em;
  margin-bottom: 0.75em;
}

.faq-accordion-table [role="region"] h4 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

/*----------------------------------------
  Help Center Sidebar Styling
----------------------------------------*/

.fern-sidebar-link[href*="help-center"].fern-sidebar-level-1 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  font-weight: 400 !important;
}

a.fern-sidebar-link[href*="help-center"] {
  text-decoration-line: none !important;
}

.fern-sidebar-link[href*="help-center-directory"].fern-sidebar-level-1 {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* Even out the spacing between top-level Help Center sections. Fern groups
   consecutive collapsible sections (Account, Product) into a sub-list with no
   gap, while flat sections are direct children of the top list and each carry a
   24px block margin — so Account↔Product sit tight but everything else is spaced
   apart. Zero the top-level items' margins so all sections match Account/Product. */
ul.fern-sidebar-group.space-y-6:has(a.fern-sidebar-link[href*="help-center"]) > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Collapse the long lists of leaf FAQ articles in the Help Center sidebar: show
   only section headers and the currently-active article. Every section header
   has a child list in its <li> — either wrapped in a collapsible
   <div data-state="open|closed"> (sections that start collapsed) or as a sibling
   <ul> (sections rendered expanded). A leaf article is therefore a
   .fern-sidebar-link whose <li> contains no nested <ul>. `[href*='help-center']`
   scopes this to the Help Center sidebar; the active article and the top-level
   "Help Center Directory" link are always kept. */
li:not(:has(ul))
  > a.fern-sidebar-link[href*="help-center"]:not([data-state="active"]):not(
    [href$="help-center-directory"]
  ) {
  display: none !important;
}

/* On a section's own landing page the section auto-expands but every article is
   hidden by the rule above, which would leave an empty bordered <ul> stub. Hide
   any Help Center leaf-group (a group whose items are all articles — no nested
   sub-section <ul> or collapsible) that contains no active article. */
ul.fern-sidebar-group:has(a.fern-sidebar-link[href*="help-center"]):not(
    :has(a[data-state="active"])
  ):not(:has(li ul)):not(:has(li div[data-state])) {
  display: none !important;
}

/* A root-level leaf section renders flat (no collapsible wrapper), so Fern places
   its articles at level-1 — same indent as the header. Indent that non-collapsible
   article group (identified as the <ul> immediately following a section header,
   without the `fern-collapsible` class) so its active article sits one level in,
   matching how nested sections indent their articles. */
a.fern-sidebar-link[href*="help-center"] + ul.fern-sidebar-group:not(.fern-collapsible) {
  margin-left: 8px;
  padding-left: 4px;
  border-left: 1px solid var(--grayscale-a3);
}
a.fern-sidebar-link[href*="help-center"]
  + ul.fern-sidebar-group:not(.fern-collapsible)
  > li
  > a.fern-sidebar-link {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Leaf-only sections (containing only articles) shouldn't look collapsible —
   their articles are hidden, so a chevron would expand to nothing. Top-level
   leaf sections already render flat (no chevron) once `collapsed` is removed;
   nested ones are always collapse groups in Fern and there's no DOM signal to
   detect a collapsed leaf-only section, so hide the chevron on every Help Center
   section and re-show it only on the sections that actually contain sub-sections.
   Keep this container list in sync with docs.yml if the hierarchy changes. */
a.fern-sidebar-link[href*="help-center"] svg.expand-indicator {
  display: none !important;
}
a.fern-sidebar-link[href$="/help-center/account"] svg.expand-indicator,
a.fern-sidebar-link[href$="/help-center/product"] svg.expand-indicator,
a.fern-sidebar-link[href$="/help-center/product/voices"] svg.expand-indicator,
a.fern-sidebar-link[href$="/help-center/product/core-capabilities"] svg.expand-indicator,
a.fern-sidebar-link[href$="/help-center/product/distribution-publishing"] svg.expand-indicator,
a.fern-sidebar-link[href$="/help-center/product/mobile-apps"] svg.expand-indicator,
a.fern-sidebar-link[href$="/help-center/product/studio"] svg.expand-indicator,
a.fern-sidebar-link[href$="/help-center/product/monetization-business"] svg.expand-indicator,
a.fern-sidebar-link[href$="/help-center/product/flows-image-video"] svg.expand-indicator,
a.fern-sidebar-link[href$="/help-center/legal"] svg.expand-indicator {
  display: block !important;
}
.fern-header-tabs a[href*="help-center-directory"] {
  display: none !important;
}

/* Text to Speech docs CTA experiment (docs-tts-cta-placement).
 * Light docs use the dark CTA; dark docs invert it.
 * Loaded site-wide, but every layout rule is scoped to the CTA nodes
 * or to html.tts-cta-active, which the script sets only on the English TTS page.
 */

:root {
  --exp-neutral-950: #0a0a0a;
  --exp-neutral-900: #171717;
  --exp-neutral-800: #262626;
  --exp-neutral-700: #404040;
  --exp-neutral-500: #737373;
  --exp-neutral-400: #a3a3a3;
  --exp-neutral-300: #d4d4d4;
  --exp-emerald-400: #34d399;
  --exp-emerald-300: #6ee7b7;
  --exp-white: #ffffff;

  /*
   * CTA surface tokens.
   * Docs light mode → current dark CTAs (high contrast on light docs).
   * Docs dark mode → inverted light CTAs (see html.dark below).
   */
  --exp-cta-bg: var(--exp-neutral-900);
  --exp-cta-border: var(--exp-neutral-800);
  --exp-cta-border-strong: var(--exp-neutral-700);
  --exp-cta-fg: var(--exp-white);
  --exp-cta-fg-muted: var(--exp-neutral-400);
  --exp-cta-fg-subtle: var(--exp-neutral-500);
  --exp-cta-fg-soft: var(--exp-neutral-300);
  --exp-cta-dismiss-hover: color-mix(in srgb, var(--exp-white) 10%, transparent);
  --exp-cta-code-bg: rgb(0 0 0 / 0.4);
  --exp-cta-divider: color-mix(in srgb, var(--exp-white) 15%, transparent);
  --exp-cta-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.45);
  --exp-cta-btn-fg: var(--exp-neutral-900);
  --exp-cta-icon-tile-bg: color-mix(in srgb, var(--exp-emerald-400) 10%, transparent);
}

/* Fern docs apply class="dark" / class="light" on :root/html */
html.dark,
:root.dark,
:root[class~="dark"],
html[data-theme="dark"],
:root[data-theme="dark"] {
  --exp-cta-bg: #ffffff;
  --exp-cta-border: #e5e5e5;
  --exp-cta-border-strong: #d4d4d4;
  --exp-cta-fg: #0a0a0a;
  --exp-cta-fg-muted: #525252;
  --exp-cta-fg-subtle: #737373;
  --exp-cta-fg-soft: #404040;
  --exp-cta-dismiss-hover: rgb(0 0 0 / 0.06);
  --exp-cta-code-bg: #f5f5f5;
  --exp-cta-divider: color-mix(in srgb, #0a0a0a 12%, transparent);
  --exp-cta-shadow: 0 20px 40px -16px rgb(0 0 0 / 0.18);
  --exp-cta-btn-fg: #0a0a0a;
  --exp-cta-icon-tile-bg: color-mix(in srgb, var(--exp-emerald-400) 16%, transparent);
}

/* Explicit light keeps the current dark CTA look */
html.light,
:root.light,
:root[class~="light"],
html[data-theme="light"],
:root[data-theme="light"] {
  --exp-cta-bg: var(--exp-neutral-900);
  --exp-cta-border: var(--exp-neutral-800);
  --exp-cta-border-strong: var(--exp-neutral-700);
  --exp-cta-fg: var(--exp-white);
  --exp-cta-fg-muted: var(--exp-neutral-400);
  --exp-cta-fg-subtle: var(--exp-neutral-500);
  --exp-cta-fg-soft: var(--exp-neutral-300);
  --exp-cta-dismiss-hover: color-mix(in srgb, var(--exp-white) 10%, transparent);
  --exp-cta-code-bg: rgb(0 0 0 / 0.4);
  --exp-cta-divider: color-mix(in srgb, var(--exp-white) 15%, transparent);
  --exp-cta-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.45);
  --exp-cta-btn-fg: var(--exp-neutral-900);
  --exp-cta-icon-tile-bg: color-mix(in srgb, var(--exp-emerald-400) 10%, transparent);
}

.exp-reset,
.exp-reset * {
  box-sizing: border-box;
}

.exp-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.exp-icon-lg {
  width: 1rem;
  height: 1rem;
}

.exp-icon-tile {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--exp-cta-icon-tile-bg);
  color: var(--exp-emerald-400);
}

.exp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--exp-emerald-400);
  color: var(--exp-cta-btn-fg);
  font-size: 14px;
  line-height: 1.25rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 150ms ease;
  white-space: nowrap;
  font-family: inherit;
}

.exp-btn-primary:hover {
  background: var(--exp-emerald-300);
}

.exp-btn-primary .exp-arrow {
  transition: transform 150ms ease;
}

.exp-btn-primary:hover .exp-arrow {
  transform: translateX(2px);
}
.exp-btn-primary:focus-within .exp-arrow {
  transform: translateX(2px);
}

.exp-btn-primary.full {
  width: 100%;
}

.exp-dismiss {
  flex-shrink: 0;
  border: 0;
  border-radius: 0.375rem;
  padding: 0.375rem;
  background: transparent;
  color: var(--exp-cta-fg-subtle);
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.exp-dismiss:hover {
  background: var(--exp-cta-dismiss-hover);
  color: var(--exp-cta-fg-soft);
}

/* —— Shared CTA card shell —— */
.exp-cta-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--exp-cta-border);
  background: var(--exp-cta-bg);
  color: var(--exp-cta-fg);
  padding: 1.25rem;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.exp-cta-card:hover {
  border-color: var(--exp-cta-border-strong);
}
.exp-cta-card:focus-visible {
  border-color: var(--exp-cta-border-strong);
}

.exp-cta-title {
  font-size: 16px;
  line-height: 1.5rem;
  color: var(--exp-cta-fg);
}

.exp-cta-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.25rem;
  color: var(--exp-cta-fg-muted);
}

.exp-cta-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* A — above-the-fold banner */
.exp-slot-a {
  margin: 0 0 1.5rem;
  width: 100%;
}

.exp-cta-a {
  gap: 1rem;
}

@media (min-width: 640px) {

  .exp-cta-a {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .exp-cta-a .exp-btn-primary {
    flex-shrink: 0;
  }

}

/* B — sticky bottom bar (adapts to its own width, never ellipsizes copy) */
.exp-sticky-b {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  container-type: inline-size;
  container-name: exp-sticky-b;
  border-top: 1px solid var(--exp-cta-border);
  background: var(--exp-cta-bg);
  color: var(--exp-cta-fg);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}

.exp-sticky-b-inner {
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

.exp-sticky-b .exp-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.exp-sticky-b .exp-cta-title {
  font-size: 16px;
  line-height: 1.45;
  overflow: visible;
  white-space: normal;
  text-wrap: balance;
}

.exp-sticky-b .exp-cta-sub {
  display: block;
  margin-top: 0.25rem;
  font-size: 14px;
  line-height: 1.45;
  overflow: visible;
  white-space: normal;
}

.exp-sticky-b-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
}

/* Narrow bar (mobile iframe / small desktop): stack copy above CTA */
@container exp-sticky-b (max-width: 719px) {

  .exp-sticky-b-inner {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 0.75rem;
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }

  .exp-sticky-b .exp-icon-tile {
    margin-top: 0.125rem;
  }

  .exp-sticky-b .exp-copy {
    flex: 1 1 calc(100% - 3rem);
    padding-right: 1.75rem; /* keep title clear of top-right dismiss */
  }

  .exp-sticky-b-actions {
    flex: 1 1 100%;
    justify-content: stretch;
    padding-left: 0;
    gap: 0;
  }

  /* Park dismiss in the top-right of the bar; CTA takes the full row. */
  .exp-sticky-b-actions .exp-dismiss {
    position: absolute;
    top: 0.65rem;
    right: 0.5rem;
    z-index: 1;
  }

  .exp-sticky-b-actions .exp-btn-primary {
    flex: 1 1 100%;
    width: 100%;
  }

}

/* Fallback when container queries aren't available */
@supports not (container-type: inline-size) {

  @media (max-width: 719px) {

    .exp-sticky-b-inner {
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 1rem 0.75rem;
      padding: 1rem;
      padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    }

    .exp-sticky-b .exp-copy {
      flex: 1 1 calc(100% - 3rem);
      padding-right: 1.75rem;
    }

    .exp-sticky-b-actions {
      flex: 1 1 100%;
      justify-content: stretch;
      padding-left: 0;
      gap: 0;
    }

    .exp-sticky-b-actions .exp-dismiss {
      position: absolute;
      top: 0.65rem;
      right: 0.5rem;
      z-index: 1;
    }

    .exp-sticky-b-actions .exp-btn-primary {
      flex: 1 1 100%;
      width: 100%;
    }
  
}

}

/* C — scroll-depth card */
.exp-scroll-c {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 45;
  width: 360px;
  max-width: calc(100vw - 2.5rem);
  border-radius: 1rem;
  border: 1px solid var(--exp-cta-border);
  background: var(--exp-cta-bg);
  color: var(--exp-cta-fg);
  padding: 1.25rem;
  box-shadow: var(--exp-cta-shadow);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  transition:
    transform 500ms ease,
    opacity 500ms ease,
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}

.exp-scroll-c.hidden-anim {
  pointer-events: none;
  /* Drop out of the accessibility tree and tab order once the fade-out ends. */
  visibility: hidden;
  transform: translateY(1.5rem);
  opacity: 0;
  transition:
    transform 500ms ease,
    opacity 500ms ease,
    visibility 0s linear 500ms,
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}

.exp-scroll-c.visible-anim {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
}

.exp-scroll-c .exp-dismiss-abs {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
}

.exp-scroll-c {
  position: fixed;
}

.exp-code {
  margin-top: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--exp-cta-border);
  background: var(--exp-cta-code-bg);
  padding: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.25rem;
  overflow-x: auto;
}

.exp-code .muted {
  color: var(--exp-cta-fg-subtle);
}

.exp-code .cmd {
  color: var(--exp-cta-fg-soft);
}

.exp-code .accent {
  color: var(--exp-emerald-400);
}

/* D — inline mid-content */
.exp-slot-d {
  margin: 1.5rem 0;
  width: 100%;
}

.exp-cta-d {
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
}

.exp-cta-d-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0;
}

.exp-cta-d .exp-icon-tile {
  margin: 0;
}

.exp-cta-d .exp-cta-title {
  margin: 0.5rem 0 0;
  line-height: 1.25rem;
}

.exp-cta-d .exp-cta-sub {
  margin: 0.125rem 0 0;
  line-height: 1.25rem;
}

.exp-cta-d-list {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0 0;
  list-style: none;
  border-top: 1px dashed var(--exp-cta-divider);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.exp-cta-d-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  line-height: 1.25rem;
  color: var(--exp-cta-fg-muted);
}

.exp-cta-d-list .exp-icon {
  color: var(--exp-emerald-400);
}

@media (min-width: 640px) {

  .exp-cta-d {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .exp-cta-d .exp-btn-primary {
    flex-shrink: 0;
    width: 13rem;
  }

}

@media (max-width: 720px) {

  .exp-scroll-c {
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-width: none;
  }

}

a.exp-btn-primary,
a.exp-btn-primary:hover,
a.exp-btn-primary:focus,
a.exp-btn-primary:visited {
  color: var(--exp-cta-btn-fg);
  text-decoration: none;
}
a.exp-btn-primary:focus-visible {
  color: var(--exp-cta-btn-fg);
  text-decoration: none;
}

.exp-btn-primary:focus-visible,
.exp-dismiss:focus-visible {
  outline: 2px solid var(--exp-emerald-400);
  outline-offset: 2px;
}

/* Only while the TTS experiment is mounted. Search and the mobile menu stay above the CTA. */
html.tts-cta-active elevenlabs-convai {
  z-index: 40 !important;
}

html.tts-cta-active.exp-chrome-overlay-open elevenlabs-convai,
html.tts-cta-active.exp-chrome-overlay-open .exp-sticky-b,
html.tts-cta-active.exp-chrome-overlay-open .exp-scroll-c {
  z-index: 10 !important;
  pointer-events: none !important;
}

html.tts-cta-active.exp-chrome-overlay-open [data-radix-portal],
html.tts-cta-active.exp-chrome-overlay-open [data-radix-popper-content-wrapper],
html.tts-cta-active.exp-chrome-overlay-open [data-vaul-drawer],
html.tts-cta-active.exp-chrome-overlay-open [data-vaul-overlay],
html.tts-cta-active.exp-chrome-overlay-open div[role="dialog"],
html.tts-cta-active.exp-chrome-overlay-open div[role="alertdialog"] {
  z-index: 100000 !important;
}

@media (max-width: 1023px) {

  html.tts-cta-active.exp-chrome-overlay-open #fern-sidebar,
  html.tts-cta-active.exp-chrome-overlay-open .fern-sidebar-desktop,
  html.tts-cta-active.exp-chrome-overlay-open .fern-header,
  html.tts-cta-active.exp-chrome-overlay-open .fern-header-content {
    z-index: 100000 !important;
  }

  html.tts-cta-active.exp-chrome-overlay-open elevenlabs-convai {
    opacity: 0 !important;
    visibility: hidden !important;
  }

}