/*fern-site-stylesheet*/@font-face {
    font-family: 'DMSans';
    src: url('/_fern-files/aptitude-software.docs.buildwithfern.com/dd1563c3bb43e0a5163db0d0dfe3ef4b9cd698ed4166d23ba3031e6eff00e9f5/fonts/DMSans.ttf') format('ttf');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-0192, U+01FC-0237, U+0259, U+02C7-02DD, U+0300-0328, U+03C0, U+1E80-1EBD, U+1EF2-1EF9, U+2074, U+20A8-20BD, U+2113-212E, U+2190-2199, U+2202-2265, U+25CA, U+FB01-FB02;
}
@font-face {
    font-family: 'DMSans';
    src: url('/_fern-files/_img/dd1563c3bb43e0a5163db0d0dfe3ef4b-v1.latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000D, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: 'DMSans';
    src: url('/_fern-files/aptitude-software.docs.buildwithfern.com/dd1563c3bb43e0a5163db0d0dfe3ef4b9cd698ed4166d23ba3031e6eff00e9f5/fonts/DMSans.ttf') format('ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-0192, U+01FC-0237, U+0259, U+02C7-02DD, U+0300-0328, U+03C0, U+1E80-1EBD, U+1EF2-1EF9, U+2074, U+20A8-20BD, U+2113-212E, U+2190-2199, U+2202-2265, U+25CA, U+FB01-FB02;
}
@font-face {
    font-family: 'DMSans';
    src: url('/_fern-files/_img/dd1563c3bb43e0a5163db0d0dfe3ef4b-v1.latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000D, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: 'DMSans Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 105.65%;
    ascent-override: 93.89%;
    descent-override: 29.34%;
    line-gap-override: 0.00%;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 30px;
  --font-body: 'DMSans', 'DMSans Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'DMSans', 'DMSans Fallback', 'DMSans', 'DMSans Fallback', 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: #eef3f2;
  --accent-2: #e7f0ee;
  --accent-3: #d2ece7;
  --accent-4: #bce6de;
  --accent-5: #a6ddd3;
  --accent-6: #8fd1c5;
  --accent-7: #70c0b3;
  --accent-8: #3bab9c;
  --accent-9: #01776b;
  --accent-10: #00695d;
  --accent-11: #00695e;
  --accent-12: #18433d;

  --accent-a1: #16b69608;
  --accent-a2: #07a07e0f;
  --accent-a3: #04b79525;
  --accent-a4: #03b6943c;
  --accent-a5: #03ac8d53;
  --accent-a6: #02a0836b;
  --accent-a7: #02947c8b;
  --accent-a8: #009380c2;
  --accent-a9: #00766afe;
  --accent-a10: #00695d;
  --accent-a11: #00695e;
  --accent-a12: #01312ae7;

  --accent-contrast: #fff;
  --accent-surface: #e4efeccc;
  --accent-indicator: #01776b;
  --accent-track: #01776b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(96% 0.005 182.7);
      --accent-2: oklch(94.7% 0.0096 182.7);
      --accent-3: oklch(92.2% 0.0286 182.7);
      --accent-4: oklch(89.3% 0.045 182.7);
      --accent-5: oklch(85.7% 0.0582 182.7);
      --accent-6: oklch(81.2% 0.0688 182.7);
      --accent-7: oklch(75.2% 0.0812 182.7);
      --accent-8: oklch(67.4% 0.1021 182.7);
      --accent-9: oklch(51.1% 0.0909 182.7);
      --accent-10: oklch(46.2% 0.0909 182.7);
      --accent-11: oklch(46.5% 0.0909 182.7);
      --accent-12: oklch(35% 0.0484 182.7);

      --accent-a1: color(display-p3 0.0196 0.6471 0.4902 / 0.025);
      --accent-a2: color(display-p3 0.0039 0.5608 0.4039 / 0.049);
      --accent-a3: color(display-p3 0.0078 0.6431 0.5176 / 0.123);
      --accent-a4: color(display-p3 0 0.6471 0.5098 / 0.2);
      --accent-a5: color(display-p3 0.0039 0.5961 0.4824 / 0.278);
      --accent-a6: color(display-p3 0.0039 0.549 0.4392 / 0.36);
      --accent-a7: color(display-p3 0.0039 0.498 0.4078 / 0.466);
      --accent-a8: color(display-p3 0 0.4824 0.4 / 0.621);
      --accent-a9: color(display-p3 0 0.3255 0.2784 / 0.792);
      --accent-a10: color(display-p3 0 0.2824 0.2353 / 0.821);
      --accent-a11: color(display-p3 0 0.2824 0.2392 / 0.821);
      --accent-a12: color(display-p3 0 0.1373 0.1137 / 0.854);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.898 0.9333 0.9255 / 0.8);
      --accent-indicator: oklch(51.1% 0.0909 182.7);
      --accent-track: oklch(51.1% 0.0909 182.7);
    }
  }
}


.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: #0f1716;
  --accent-2: #121d1b;
  --accent-3: #0e2e2a;
  --accent-4: #043b35;
  --accent-5: #0b4842;
  --accent-6: #165750;
  --accent-7: #1e6961;
  --accent-8: #217e74;
  --accent-9: #0eb5a6;
  --accent-10: #00a99a;
  --accent-11: #46d3c3;
  --accent-12: #aaf0e5;

  --accent-a1: #00bf6a03;
  --accent-a2: #00f8c009;
  --accent-a3: #00f9d51c;
  --accent-a4: #00fbd72a;
  --accent-a5: #00fee238;
  --accent-a6: #19ffe648;
  --accent-a7: #2efee85c;
  --accent-a8: #2ffde773;
  --accent-a9: #0bfee8af;
  --accent-a10: #00fee6a2;
  --accent-a11: #51feead0;
  --accent-a12: #b4fff3ef;

  --accent-contrast: #fff;
  --accent-surface: #10252180;
  --accent-indicator: #0eb5a6;
  --accent-track: #0eb5a6;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(19.6% 0.0121 184.4);
      --accent-2: oklch(21.9% 0.0167 184.4);
      --accent-3: oklch(27.5% 0.0374 184.4);
      --accent-4: oklch(31.8% 0.0539 184.4);
      --accent-5: oklch(36.3% 0.0593 184.4);
      --accent-6: oklch(41.4% 0.0645 184.4);
      --accent-7: oklch(47.3% 0.073 184.4);
      --accent-8: oklch(53.9% 0.0856 184.4);
      --accent-9: oklch(69.6% 0.1213 184.4);
      --accent-10: oklch(65.8% 0.1213 184.4);
      --accent-11: oklch(78.9% 0.1213 184.4);
      --accent-12: oklch(90.5% 0.0713 184.4);

      --accent-a1: color(display-p3 0 0.9569 0.5216 / 0.009);
      --accent-a2: color(display-p3 0 0.9804 0.7569 / 0.035);
      --accent-a3: color(display-p3 0.1608 1 0.8824 / 0.103);
      --accent-a4: color(display-p3 0.1333 0.9961 0.8745 / 0.159);
      --accent-a5: color(display-p3 0.2824 0.9961 0.9059 / 0.214);
      --accent-a6: color(display-p3 0.3804 1 0.9176 / 0.278);
      --accent-a7: color(display-p3 0.4392 0.9961 0.9294 / 0.351);
      --accent-a8: color(display-p3 0.4549 1 0.9255 / 0.441);
      --accent-a9: color(display-p3 0.4471 1 0.9294 / 0.671);
      --accent-a10: color(display-p3 0.4235 1 0.9255 / 0.62);
      --accent-a11: color(display-p3 0.5333 1 0.9373 / 0.8);
      --accent-a12: color(display-p3 0.7725 0.9961 0.9608 / 0.928);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.0745 0.1412 0.1255 / 0.5);
      --accent-indicator: oklch(69.6% 0.1213 184.4);
      --accent-track: oklch(69.6% 0.1213 184.4);
    }
  }
}


.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(1, 119, 107, 1);
  --background: rgba(245, 245, 245, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #f5f5f5;
}

.dark {
  color-scheme: dark;
  --accent: rgba(14, 181, 166, 1);
  --background: rgba(21, 21, 21, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #151515;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: antialiased;
  -webkit-appearance: none;
  appearance: none;

  /* Purple Accent Range - Only used for callouts with info intent */
    --purple-accent-1: #f2f1f5;
    --purple-accent-2: #efecf5;
    --purple-accent-3: #e9e1f8;
    --purple-accent-4: #e2d4f9;
    --purple-accent-5: #d9c6f9;
    --purple-accent-6: #ceb4f7;
    --purple-accent-7: #bf9df2;
    --purple-accent-8: #ad7ded;
    --purple-accent-9: #7e22ce;
    --purple-accent-10: #6f06bb;
    --purple--11: #7618c3;
    --purple--12: #43126f;
    --purple--a1: #5d2af605;
    --purple--a2: #5c10f50a;
    --purple--a3: #ceb3ff4d;
    --purple--a4: #c6a3ff66;
    --purple--a5: #af80ff66;
    --purple--a6: #3200ff33;
    --purple--a7: #5f01ec5c;
    --purple--a8: #6201e57d;
    --purple--a9: #6b00c7dc;
    --purple--a10: #6c00b9f9;
    --purple--a11: #6901bee7;
    --purple--a12: #360165ed;
    --purple--contrast: #fff;
    --purple--surface: #eeeaf5cc;
    --purple--indicator: #7e22ce;
    --purple--track: #7e22ce;

    --dark-purple--accent-1: #181220;
    --dark-purple--2: #1d1429;
    --dark-purple--3: #2e1a46;
    --dark-purple--4: #3b1d5d;
    --dark-purple--5: #46246c;
    --dark-purple--6: #522e7c;
    --dark-purple--7: #643c95;
    --dark-purple--8: #814dbf;
    --dark-purple--9: #7e22ce;
    --dark-purple--10: #7000bd;
    --dark-purple--11: #cc9eff;
    --dark-purple--12: #e9d9ff;
    --dark-purple--a1: #5500ff0c;
    --dark-purple--a2: #720afd16;
    --dark-purple--a3: #8b2cfc36;
    --dark-purple--a4: #902ffe4f;
    --dark-purple--a5: #993eff5f;
    --dark-purple--a6: #9f4dfd71;
    --dark-purple--a7: #a55dff8c;
    --dark-purple--a8: #a962feba;
    --dark-purple--a9: #9a26ffca;
    --dark-purple--a10: #9300feb8;
    --dark-purple--a11: #cc9eff;
    --dark-purple--a12: #e9d9ff;
    --dark-purple--contrast: #fff;
    --dark-purple--surface: #25143d80;
    --dark-purple--indicator: #7e22ce;
    --dark-purple--track: #7e22ce;    
}

.fern-callout[data-intent=info] {
    background-color: var(--grayscale-a2);  
    border-color: var(--grayscale-a6);
    color: var(--grayscale-a11);
}


.motivation p {
  max-width: unset !important;
}

.showcase h2 {
  margin-bottom: 0.25em;
}

:is(.dark) .showcase .logo-icon {
  filter: invert(1);
  margin-top: 0px;
  margin-bottom: 0px;
}

.logo-icon {
  margin-right: 10px;
}

.fern-header,
.fern-header-tabs {
  backdrop-filter: blur(0.5rem);
  background-color: transparent !important;
}

:is(.dark) .fern-header,
:is(.dark) .fern-header-tabs {
  background-color: transparent !important;
}

.fern-button-text {
  font-weight: 500 !important;
}

.fern-layout-footer.not-prose {
  margin-top: 4rem !important;
}

.prose {
  color: var(--grayscale-12) !important;
}

h1,
h2,
h3 {
  letter-spacing: -0.02em !important;
}

/*** START -- MERMAID DIAGRAMS STYLING ***/
#mermaid-svg {

  rect {
    stroke: var(--accent-a6) !important;
    fill: var(--accent-a3) !important;
  }

  tspan,
  text {
    font-family: var(--font-body) !important;
    color: var(--grayscale-10) !important;
  }

  line,
  .messageLine0 {
    stroke: var(--grayscale-a9) !important;
  }

  #arrowhead path {
    fill: var(--grayscale-9) !important;
    stroke: var(--grayscale-9) !important;
  }

  .actor-line {
    stroke: var(--accent-a6) !important;
  }

  .actor-top {
    rx: 1rem !important;
    ry: 1rem !important;
  }

  .actor-bottom {
    rx: 1rem !important;
    ry: 1rem !important;
  }

}

/*** END -- MERMAID DIAGRAMS STYLING ***/

/*** START -- PRODUCT SELECTOR STYLING ***/
.product-dropdown-trigger {
  display: flex;
}
@media (min-width: 1024px) {

  div[data-testid="product-dropdown-content"] {
    border-radius: 1.5rem !important;
  }

  .product-dropdown-trigger {

    svg {
      transform: translateY(2px);
    }
  
}

  .fern-product-selector {
    transform: translate(-2px, 2px);
  }

  .product-item-title {
    text-box: trim-both cap alphabetic;
    font-size: 1.25rem;
  }

  div:has(> .fern-product-selector-radio-group) {
    margin-top: 0.5rem;
  }

  div:has(> .fern-product-selector-radio-group):before {
    content: "Explore the Fynapse Platform";
    font-weight: 500;
    margin: 0.5rem 1rem 0 1rem;
  }

  .fern-product-selector-radio-group {

    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    gap: 1.5rem;
    padding: 1.25rem;
    /* height: 248px; */

    > a {

      max-width: 320px;
      margin: -0.75rem;
      position: relative;

      .fern-selection-item {
        border-radius: 1rem;
      }
    
}

    a.fern-product-item-link[href="/api"] {
      display: none;
    }

    > a[href*="home"] {
      grid-column: 1;
      grid-row: 1;
    }

    > a[href*="docs"] {
      grid-column: 1;
      grid-row: 2;
    }

    > a[href*="api/overview"]:before {
      content: "For Developers";
      font-weight: 500;
      position: absolute;
      top: -2rem;
      left: 0.5rem;
    }

    > a[href*="api/overview"] {

      grid-column: 3;
      grid-row: 1;

      .fern-selection-item-icon {
        width: 1.5rem;
        height: 1.5rem;
      }
    
}

    > a[href*="/api/developer-guides/getting-started/overview"] {

      grid-column: 3;
      grid-row: 2;
      transform: translateY(-40px);
      .fern-selection-item-icon {
        width: 1.5rem;
        height: 1.5rem;
      }
    
}

    > a[href*="/api/developer-guides/sdk-integration/quickstart"] {

      grid-column: 3;
      grid-row: 3;
      transform: translateY(-70px);

      .fern-selection-item-icon {
        width: 1.5rem;
        height: 1.5rem;
      }
    
}

    /* > a[href*="revrec"] {
      grid-column: 3;
      grid-row: 4;
      transform: translateY(-70px);

      .fern-selection-item-icon {
        width: 1.5rem;
        height: 1.5rem;
      }
    } */

    /* > a[href*="data"] {
      grid-column: 3;
      grid-row: 5;
      transform: translateY(-70px);

      .fern-selection-item-icon {
        width: 1.5rem;
        height: 1.5rem;
      }
    } */

    > a[href="/learn/api-definitions"] {
      display: none;
    }
  
}

}

@media (max-width: 640px) {

  .fern-product-selector-radio-group {
    width: 100%;
  }

  div[data-testid="product-dropdown-content"] {
    width: calc(100vw - 2rem) !important;
  }

  div.fern-scroll-area-viewport.group\/sidebar.mask-grad-y-3.sticky.overscroll-contain
    > div
    > div {
    border-top-width: 0px !important;
  }

}

:is(.dark) .fern-product-selector-radio-group a[href*="home"] img {
  content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/product-switcher-home-dark.png") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="sdks"] img {
  content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/product-switcher-sdks-dark.png") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="docs"] img {
  content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/product-switcher-docs-dark.png") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="platform"] img {
  content: url("https://fynapse-docs.s3.eu-west-2.amazonaws.com/layer-group-solid-full-dark.svg") !important;
}

:is(.light) .fern-product-selector-radio-group a[href*="platform"] img {
  content: url("https://fynapse-docs.s3.eu-west-2.amazonaws.com/layer-group-solid-full-light.svg") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="billing"] img {
  content: url("https://fynapse-docs.s3.eu-west-2.amazonaws.com/file-invoice-dollar-solid-full-dark.svg") !important;
}

:is(.light) .fern-product-selector-radio-group a[href*="billing"] img {
  content: url("https://fynapse-docs.s3.eu-west-2.amazonaws.com/file-invoice-dollar-solid-full-light.svg") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="subledger"] img {
  content: url("https://fynapse-docs.s3.eu-west-2.amazonaws.com/book-solid-full-dark.svg") !important;
}

:is(.light) .fern-product-selector-radio-group a[href*="subledger"] img {
  content: url("https://fynapse-docs.s3.eu-west-2.amazonaws.com/book-solid-full-light.svg") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="revrec"] img {
  content: url("https://fynapse-docs.s3.eu-west-2.amazonaws.com/chart-line-solid-full-dark.svg") !important;
}

:is(.light) .fern-product-selector-radio-group a[href*="revrec"] img {
  content: url("https://fynapse-docs.s3.eu-west-2.amazonaws.com/chart-line-solid-full-light.svg") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="data"] img {
  content: url("https://fynapse-docs.s3.eu-west-2.amazonaws.com/chart-bar-solid-full-dark.svg") !important;
}

:is(.light) .fern-product-selector-radio-group a[href*="data"] img {
  content: url("https://fynapse-docs.s3.eu-west-2.amazonaws.com/chart-bar-solid-full-light.svg") !important;
}

/*** END -- PRODUCT SELECTOR STYLING ***/

/*** START -- DOCS HOMEPAGE STYLING ***/
.docs-homepage {

  position: relative;
  .fern-card {

    text-decoration: none !important;

    .external-link-icon {
      display: none !important;
    }
  
}

  .dashed-pattern-left {
    position: absolute;
    left: -4rem;
    top: -8.5rem;
    height: calc(100% + 26rem);
    width: 1rem;
    opacity: 1;
    pointer-events: none;
    border-right: 1px solid var(--grayscale-5);
    mask: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .dashed-pattern-right {
    position: absolute;
    right: -4rem;
    top: -8.5rem;
    height: calc(100% + 26rem);
    width: 1rem;
    opacity: 1;
    pointer-events: none;
    border-left: 1px solid var(--grayscale-5);
    mask: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .fern-card {

    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    .card-title {
      display: flex;
      gap: 0.25rem;
      align-items: center;
    }

    img {
      transition: transform 0.15s ease-in-out;
    }

    .arrow-right {
      height: 1rem;
      opacity: 0;
      transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
      transform: translateX(0px);
    }

    &:hover {

      img {
        transform: scale(1.01);
      }

      .arrow-right {
        opacity: 1;
        transform: translateX(2px);
      }
    
}
&:focus-visible {

      img {
        transform: scale(1.01);
      }

      .arrow-right {
        opacity: 1;
        transform: translateX(2px);
      }
    
}
  
}

}
/*** END -- DOCS HOMEPAGE STYLING ***/

/*** START -- SDKS HOMEPAGE STYLING ***/
.sdks-homepage {

  position: relative;

  .changelog-button {

    display: flex;
    padding: 0.25rem 0.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease-in-out;
    position: relative;
    height: 2rem;
    text-decoration: none !important;

    img {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      position: relative;
    }

    div {
      font-size: 1rem;
      white-space: nowrap;
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      width: 0;
    }

    &:hover {

      gap: 0.25rem;
      background-color: var(--grayscale-a3);

      div {
        max-width: 200px;
        opacity: 1;
        width: fit-content;
      }
    
}
&:focus-visible {

      gap: 0.25rem;
      background-color: var(--grayscale-a3);

      div {
        max-width: 200px;
        opacity: 1;
        width: fit-content;
      }
    
}
  
}

  .dashed-pattern-left {
    position: absolute;
    left: -4rem;
    top: -8.5rem;
    height: calc(100% + 26rem);
    width: 1rem;
    opacity: 1;
    pointer-events: none;
    border-right: 1px solid var(--grayscale-5);
    mask: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .dashed-pattern-right {
    position: absolute;
    right: -4rem;
    top: -8.5rem;
    height: calc(100% + 26rem);
    width: 1rem;
    opacity: 1;
    pointer-events: none;
    border-left: 1px solid var(--grayscale-5);
    mask: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .card-group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .fern-card {

    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    text-decoration: none !important;

    .external-link-icon {
      display: none !important;
    }

    .card-title {
      display: flex;
      gap: 0.25rem;
      align-items: center;
    }

    img {
      transition: transform 0.15s ease-in-out;
    }

    .arrow-right {
      height: 1rem;
      opacity: 0;
      transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
      transform: translateX(0px);
    }

    &:hover {

      img {
        transform: scale(1.01);
      }

      .arrow-right {
        opacity: 1;
        transform: translateX(2px);
      }
    
}
&:focus-visible {

      img {
        transform: scale(1.01);
      }

      .arrow-right {
        opacity: 1;
        transform: translateX(2px);
      }
    
}
  
}

}
/*** END -- SDKS HOMEPAGE STYLING ***/

/*** START -- LANDING PAGE STYLING ***/
:is(.dark) {

  .lp-page-container {

    .dashed-gradient {
      background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_351_76922)"><rect width="100" height="100" fill="transparent"/><path d="M0 100L100 -7.07537e-07" stroke="%2362636C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_351_76922"><rect width="100" height="100" fill="white"/></clipPath></defs></svg>');
    }
  
}

  .bg-gradient-green-left {
    background-image: radial-gradient(
      farthest-side,
      var(--green-2),
      transparent
    ) !important;
  }

  .bg-gradient-blue-left {
    background-image: radial-gradient(
      farthest-side,
      var(--blue-2),
      transparent
    ) !important;
  }

  .bg-gradient-green-right {
    background-image: radial-gradient(
      farthest-side,
      var(--green-2),
      transparent
    ) !important;
  }

  .bg-gradient-blue-right {
    background-image: radial-gradient(
      farthest-side,
      var(--blue-2),
      transparent
    ) !important;
  }

}

.bg-gradient-green-left {
  top: 0;
  width: 700px;
  height: 1000px;
  position: fixed;
  transform: translate(-50%, -10%) rotate(30deg);
  background-image: radial-gradient(farthest-side, var(--green-3), transparent);
}

.bg-gradient-blue-left {
  top: 0;
  width: 800px;
  height: 600px;
  position: fixed;
  transform: translate(-60%, 50%) rotate(-30deg);
  background-image: radial-gradient(farthest-side, var(--blue-3), transparent);
}

.bg-gradient-green-right {
  top: 0;
  width: 700px;
  height: 1000px;
  position: fixed;
  right: 0;
  transform: translate(50%, -10%) rotate(-30deg);
  background-image: radial-gradient(farthest-side, var(--green-3), transparent);
}

.bg-gradient-blue-right {
  top: 0;
  width: 800px;
  height: 600px;
  position: fixed;
  right: 0;
  transform: translate(60%, 50%) rotate(30deg);
  background-image: radial-gradient(farthest-side, var(--blue-3), transparent);
}

@media (max-width: 640px) {

  .bg-gradient-blue-left,
  .bg-gradient-green-right,
  .bg-gradient-blue-right,
  .bg-gradient-green-left {
    display: none;
  }

}

.lp-page-container {

  min-height: 100vh;
  position: relative;

  /* Hide the Radix wrapper only when it contains the fern anchor */
  [data-radix-popper-content-wrapper]:has(a.fern-anchor) {
    display: none !important;
  }

  .dashed-pattern {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1rem;
    opacity: 1;
    pointer-events: none;
    mask: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .dashed-pattern-left {
    left: -1rem;
    border-right: 1px solid var(--grayscale-5);
  }

  .dashed-pattern-right {
    right: -1rem;
    border-left: 1px solid var(--grayscale-5);
  }

  .main-content {
    max-width: 60rem;
    margin: 0 auto;
    position: relative;
    padding: 3rem 0;
  }

  .hero-section {
    max-width: 80%;
    margin-bottom: 3rem;
  }

  .hero-title-container {
    margin-bottom: 2rem;
    padding: 0 2rem;
  }

  .hero-title {
    font-size: 2.25rem;
    font-weight: bold;
    letter-spacing: -0.025em;
    color: var(--grayscale-12);
  }

  .hero-description {
    font-size: 1rem;
    color: var(--grayscale-10);
  }

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  /* Reusable panel card */
  .panel-card {
    border-top: 1px solid var(--grayscale-5);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .panel-card.with-left-border {
    border-left: 1px solid var(--grayscale-5);
  }

  .sdks-card {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .docs-card {
    gap: 1rem;
    grid-row: 1 / 3;
  }

  /* .ai-search-card inherits base panel styles */

  .card-header {
    display: flex;
    flex-direction: column;
  }

  .card-title {

    font-size: 1.25rem;
    font-weight: bold;
    color: var(--grayscale-12);
    display: flex;
    gap: 0.25rem;
    align-items: center;
    text-decoration: none;

    img {
      height: 1rem;
      opacity: 0;
      transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
      transform: translateX(0px);
    }

    &:hover {

      img {
        opacity: 1;
        transform: translateX(2px);
      }
    
}
&:focus-visible {

      img {
        opacity: 1;
        transform: translateX(2px);
      }
    
}
  
}

  .card-description {
    font-size: 0.875rem;
    color: var(--grayscale-10);
  }

  .sdks-preview {
    width: 100%;
    position: relative;
  }

  .preview-img {
    width: 100%;
    object-fit: cover;
  }

  .language-icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .language-icons-label {
    font-size: 0.875rem;
    color: #62636c;
    margin-right: 0.5rem;
  }

  .language-icon {

    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    border-radius: 0.25rem;

    &:hover {
      background-color: var(--grayscale-a3);
    }
&:focus-visible {
      background-color: var(--grayscale-a3);
    }
  
}

  .language-icon-img {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
  }

  .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .action-buttons-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .community-section {

    border-top: 1px solid var(--grayscale-5);
    border-bottom: 1px solid var(--grayscale-5);
    padding: 3rem 2rem;

    &.specs {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  
}

  .community-title-container {

    margin-bottom: 2rem;

    &.specs {
      margin-bottom: 0rem;
      flex: 1;
    }
  
}

  .community-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .specs-grid {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex: 1;
    flex-wrap: wrap;
  }

  .community-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    align-items: flex-start;
  }

  .community-card-header {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .specs-card {

    flex-direction: row;
    align-items: center;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    text-decoration: none !important;

    img {
      width: 2rem;
      height: 2rem;
    }

    &:hover {
      background-color: var(--grayscale-a3);
    }
&:focus-visible {
      background-color: var(--grayscale-a3);
    }
  
}

  .community-card-title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--grayscale-12);
  }

  .community-card-description {
    font-size: 0.875rem;
    color: var(--grayscale-10);
    margin-bottom: 0.5rem;
  }

  .twitter-strikethrough {
    text-decoration: line-through;
  }

  .help-section {
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .help-buttons {
    display: flex;
    gap: 1.5rem;
  }

  .a-btn {

    text-decoration: none !important;
    font-weight: 400 !important;
    width: fit-content !important;

    img {
      transition: transform 0.15s ease-in-out;
      transform: translate(0px, 0px);
    }

    svg {
      display: none !important;
    }

    &.no-hover {

      cursor: default;

      &:hover {
        background: none !important;
        color: var(--grayscale-a11) !important;
      }
&:focus-visible {
        background: none !important;
        color: var(--grayscale-a11) !important;
      }
    
}

    &:hover {

      img:not(:first-child) {
        transform: translate(2px, 0px);
      }
    
}
&:focus-visible {

      img:not(:first-child) {
        transform: translate(2px, 0px);
      }
    
}
  
}

  /* Responsive Design - Mobile First */
  @media (max-width: 640px) {

    .main-content {
      padding: 2rem 0rem;
    }

    .dashed-pattern-left {
      left: 0px;
      display: none;
    }

    .dashed-pattern-right {
      right: 0px;
      display: none;
    }

    .hero-section {
      margin-bottom: 2rem;
    }

    .hero-title-container {
      padding: 0 1rem;
    }

    .feature-grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      gap: 0;
    }

    .sdks-card {
      padding: 2rem 1rem;
    }

    .docs-card {
      padding: 2rem 1rem;
      border-left: none;
      grid-column: 1;
      grid-row: auto;
    }

    .ai-search-card {
      padding: 2rem 1rem;
    }

    .card-title {
      font-size: 1.375rem;
    }

    /* .card-description {
      font-size: 1.0625rem;
    } */

    .language-icons-label {
      width: 100%;
    }

    .action-buttons {
      flex-direction: row;
      gap: 0.75rem;
      align-items: stretch;
      flex-wrap: wrap;
    }

    .action-buttons-vertical {
      gap: 0.75rem;
    }

    .community-section {

      padding: 2rem 1rem;

      &.specs {
        flex-direction: column;
        align-items: flex-start;
      }
    
}

    .community-title-container {

      &.specs {
        margin-bottom: 2rem;
      }
    
}

    .specs-card {
      padding-left: 0;
      padding-right: 0;
    }

    .community-grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .community-card {
      border-radius: 0.5rem;
      transition: all 0.2s ease;
    }

    .community-card-header {
      flex-direction: row;
      align-items: center;
    }

    .help-section {
      padding: 2rem 1rem;
    }

    .help-buttons {
      flex-direction: column;
      gap: 1rem;
    }
  
}

  /* Tablet breakpoint - Better use of space */
  @media (max-width: 720px) and (min-width: 481px) {

    .community-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .hero-title {
      font-size: 2rem;
    }

    .feature-grid {
      gap: 1px;
    }
  
}

  /* Very small screens */
  @media (max-width: 480px) {

    .hero-title {
      font-size: 1.75rem;
    }

    .card-title {
      font-size: 1.25rem;
    }

    .specs-grid {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }

    .language-icons-label {
      margin-right: 0;
      margin-bottom: 0.5rem;
    }
  
}

}

.sdk-rive {
  aspect-ratio: 369/93;
  width: 100%;
  display: block;
  overflow: visible; /* Changed from hidden - was clipping interactive areas */
  transform: translateY(0px);
  transition: transform 250ms ease-out !important;
  will-change: transform;
  /* Ensure click events can reach the canvas */
  pointer-events: auto;
  min-height: 104px;
}

.sdk-rive:hover {
  transform: translateY(-3px) !important;
}
.sdk-rive:focus-visible {
  transform: translateY(-3px) !important;
}

.docs-rive {
  min-height: 213px;
}

.ask-fern-rive {
  min-height: 114px;
}

@media (max-width: 640px) {

  .sdk-rive {
    min-height: inherit;
  }

  .docs-rive {
    min-height: inherit;
  }

  .ask-fern-rive {
    min-height: inherit;
  }

}

/* Ensure the canvas can receive clicks and is properly layered */
.rive-container {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  /* Ensure container doesn't block events */
  pointer-events: none;
}

/* Fade out effect for AI animation */
.rive-container.fade-bottom {
  mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 70%,
    rgba(0, 0, 0, 0) 100%
  );
}

.rive-container canvas {
  width: 100%;
  height: 100%;
  vertical-align: baseline;
  display: inline-block;
  /* Allow canvas to receive events while container doesn't */
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
  vertical-align: baseline;
  display: inline-block;
}

/*** END -- LANDING PAGE STYLING ***/

/* HACK: add a slash to markdown snippet documentation (otherwise it gets parsed by CLI) */
.modify-snippet
  tbody
  tr:nth-child(1)
  td:last-of-type
  .line
  span:last-of-type:before,
.modify-snippet
  tbody
  tr:nth-child(5)
  td:last-of-type
  .line
  span:last-of-type:before {
  content: "/";
  display: inline-block;
}

.modify-titled-snippet
  tbody
  tr:last-child
  td:last-of-type
  .line
  span:last-of-type:before {
  content: "/";
  display: inline-block;
}

/*** START -- FERN EDITOR STYLING ***/
.fe-action-button {

  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: var(--grayscale-12);

  svg.external-link-icon {
    display: none;
  }

}
/*** END -- FERN EDITOR STYLING ***/

/* HACK: hide the changelog icon for changelog pages */
.fern-sidebar-link[href$="changelog"] > svg {
  display: none;
}

/*** START -- HIGHLIGHTED FRAME STYLING ***/
/* @keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
} */

.highlight-frame {

  /* background-color: var(--accent-a2); */
  background: radial-gradient(
      circle at 20% 50%,
      hsla(109, 80%, 78%, 0.5) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 50%,
      hsla(222, 83%, 81%, 0.5) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 20%,
      hsla(108, 91%, 90%, 0.5) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 80%,
      hsla(222, 75%, 72%, 0.5) 0%,
      transparent 50%
    ),
    hsla(222, 58%, 66%, 0.5);
  background-size: 100% 100%;
  border-radius: 1rem;
  padding: 0.5rem;
  margin: 1rem 0;
  /* animation: gradient-shift 20s ease-in-out infinite; */

  .highlight-frame-content {

    padding: 1rem;
    background-color: var(--background, lightdark(#fff, #000));
    border-radius: 0.5rem;
    overflow: hidden;

    > *:first-child {
      margin-top: 0;
    }

    > *:last-child {
      margin-bottom: 0;
    }
  
}

  .highlight-frame-content-not-prose {
    padding: 0.5rem;
    background-color: var(--background, lightdark(#fff, #000));
    border-radius: 0.5rem;
    overflow: hidden;
  }

  > *:first-child {
    margin-top: 0;
  }

  > *:last-child {
    margin-bottom: 0;
  }

}
/*** END -- HIGHLIGHTED FRAME STYLING ***/

.fern-prose.prose ul {
  list-style-type: disc;
}

.fern-prose.prose ul ul {
  list-style-type: circle;
}

.fern-prose.prose ul ul ul {
  list-style-type: square;
}

.fern-prose.prose ul ul ul ul {
  list-style-type: disc;
}

.fern-prose.prose ul ul ul ul ul {
  list-style-type: circle;
}

.fern-prose.prose ul ul ul ul ul ul {
  list-style-type: square;
}

.fern-prose.prose ul ul ul ul ul ul ul {
  list-style-type: disc;
}

.\[\&\>li\]\:before\:content-\[\'⦁\'\]>li:before {
  --tw-content: "";
}

.fern-prose.prose li::marker {
  margin-right: 12px;
}

.fern-callout div.overflow-x-auto {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* .fern-prose.prose ol.mb-3.list-outside.list-decimal.\[\&_ol\]\:\!list-\[lower-roman\] > li > ol.mb-3.list-outside.list-decimal.\[\&_ol\]\:\!list-\[lower-roman\] {
  list-style-type: square !important;
} */

.fern-prose.prose ol > li > ol {
  list-style-type: lower-alpha !important; /* or whatever */
}

.fern-prose.prose ol > li > ol > li::marker {
  content: counter(list-item, lower-alpha) ". ";
}

.fern-prose.prose ol > li > ol > li > ol > li::marker {
  content: counter(list-item, lower-roman) ". ";
}

.fern-prose.prose ol > li > ol > li > ol > li > ol > li::marker {
  content: counter(list-item, decimal) ". ";
}

.fern-prose.prose ol > li > ol > li > ol > li > ol > li > ol > li::marker {
  content: counter(list-item, lower-alpha) ". ";
}

.fern-prose.prose ol > li > ol > li > ol > li > ol > li > ol > li > ol > li::marker {
  content: counter(list-item, lower-roman) ". ";
}

.fern-prose.prose ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li::marker {
  content: counter(list-item, decimal) ". ";
}
/* 


ol > li > ol > li > ol {
  list-style-type: lower-roman;
} */

/* OVERRIDES FOR FERN DEFAULT STYLES */
.fern-sidebar-link[data-state="active"] {
    letter-spacing: 0.05em;
}

.frame-highlight {
  padding: 25px 25px;
  position: relative;
  border-radius: 1rem;
}

.frame-highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, hsla(109,80%,78%,.5) 0%, transparent 50%),
              radial-gradient(circle at 80% 50%, hsla(222,83%,81%,.5) 0%, transparent 50%),
              radial-gradient(circle at 50% 20%, hsla(108,91%,90%,.5) 0%, transparent 50%),
              radial-gradient(circle at 50% 80%, hsla(222,75%,72%,.5) 0%, transparent 50%),
              hsla(222,58%,66%,.5);
}

.frame-highlight::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border-radius: 0.5rem;
  background: var(--background, #fff);
}

.frame-highlight > * {
  position: relative;
  z-index: 1; /* content above pseudo layers */
}

.frame-white {
  background: #fff;
}

.fern-callout[data-intent=info] {
    background-color: var(--purple--a2);  
    border-color: var(--purple--a6);
    color: var(--purple--a11);
}

.fern-callout[data-intent=info] svg {
    color: var(--purple--a10);
}

/* dark mode override */
html[style*="color-scheme: dark"] .fern-callout[data-intent="info"] {
  background-color: var(--dark-purple--a2);
  border-color: var(--dark-purple--a6);
  color: var(--dark-purple--a11);
}

html[style*="color-scheme: dark"] .fern-callout[data-intent="info"] svg {
  color: var(--dark-purple--a11);
}


table th,
table td {
  padding: 6px 10px;
  border-right: 1px solid var(--color-border-default);
}

table th:last-child,
table td:last-child {
  border-right: none;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  border-radius: 12px;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.fern-layout-page {

    min-height: calc(100vh - var(--header-height));
    padding-inline: var(--page-padding);
    max-width: 60rem;
    margin: 0 auto;
    position: relative;

  .dashed-pattern {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1rem;
    opacity: 1;
    pointer-events: none;
    mask: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .dashed-pattern-left {
    left: -6rem;
    border-right: 1px solid var(--grayscale-5);
  }

  .dashed-pattern-right {
    right: -6rem;
    border-left: 1px solid var(--grayscale-5);
  }

}


  .hero-section {
    max-width: 80%;
    margin-bottom: 3rem;
  }

  .hero-title-container {
    margin-bottom: 2rem;
    padding: 0 2rem;
  }

  .hero-title {
    font-size: 2.25rem;
    font-weight: bold;
    letter-spacing: -0.025em;
    color: var(--grayscale-12);
  }

  .hero-description {
    font-size: 1rem;
    color: var(--grayscale-10);
  }

  :is(.dark) {

  .fern-layout-page {

    .dashed-gradient {
      background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_351_76922)"><rect width="100" height="100" fill="transparent"/><path d="M0 100L100 -7.07537e-07" stroke="%2362636C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_351_76922"><rect width="100" height="100" fill="white"/></clipPath></defs></svg>');
    }
  
}
  
}

  
/* "Explore →" CTA rendered inside each card */
.hub-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--accent-a10);
  border: 1.5px solid var(--accent-a10);
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 1.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hub-card-cta:hover {
  background-color: #002623;
  color: #E5FFFD;
}
.hub-card-cta:focus-visible {
  background-color: #002623;
  color: #E5FFFD;
}

/* "Coming Soon" badge on the Learning card */
.hub-badge-coming-soon {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.625rem;
  background-color: #FEF3C7;
  color: #92400E;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

:is(.dark) .hub-badge-coming-soon {
  background-color: #78350F;
  color: #FDE68A;
}

/* "In Development" footer on the Learning card */
.hub-in-development {
  color: var(--grayscale-9);
  font-size: 0.875rem;
  margin-top: 1.25rem;
  text-align: center;
}

/* Back to top button */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--accent-9);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, background-color 0.15s ease;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

#back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

#back-to-top:hover {
  background-color: var(--accent-10);
}
#back-to-top:focus-visible {
  background-color: var(--accent-10);
}

#back-to-top svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* remove release notes SVG from sidebar*/

.fern-sidebar-link[href="/documentation/release-information/release-notes"] > svg {
    display: none;
}