/*fern-site-stylesheet*/@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/merge-test.docs.buildwithfern.com/dd8a4575be9806105ac3decd02805cd2782fe7c05abb02c582316bc436ce03ae/docs/assets/fonts/Inter-2.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FH Oscar Pro';
    src: url('/_fern-files/merge-test.docs.buildwithfern.com/8dd890ae41fab6de08b410c3a5c34b1644a5b4126585cae93ff5ee837d591427/docs/assets/fonts/FHOscarPro-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 912px;
  --sidebar-width: 300px;
  --page-width: 100vw;
  --logo-height: 26px;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'FH Oscar Pro', 'Inter', 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);
}


:root {
  --accent-1: #fcfcfd;
  --accent-2: #f8f9f9;
  --accent-3: #f0f0f0;
  --accent-4: #e8e8e9;
  --accent-5: #e0e1e1;
  --accent-6: #d9d9d9;
  --accent-7: #cdcece;
  --accent-8: #bbbbbc;
  --accent-9: #121314;
  --accent-10: #2b2c2d;
  --accent-11: #636364;
  --accent-12: #1e1f20;

  --accent-a1: #00005503;
  --accent-a2: #00252507;
  --accent-a3: #0000000f;
  --accent-a4: #00000c17;
  --accent-a5: #0009091f;
  --accent-a6: #00000026;
  --accent-a7: #00060632;
  --accent-a8: #00000444;
  --accent-a9: #000102ed;
  --accent-a10: #000103d4;
  --accent-a11: #0000029c;
  --accent-a12: #000102e1;

  --accent-contrast: #fff;
  --accent-surface: #f6f8f8cc;
  --accent-indicator: #121314;
  --accent-track: #121314;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --accent-1: oklch(99.2% 0.0005 248);
      --accent-2: oklch(98.1% 0.0006 248);
      --accent-3: oklch(95.5% 0.0007 248);
      --accent-4: oklch(93.1% 0.0007 248);
      --accent-5: oklch(90.9% 0.0009 248);
      --accent-6: oklch(88.5% 0.0009 248);
      --accent-7: oklch(85.1% 0.0009 248);
      --accent-8: oklch(79.2% 0.0011 248);
      --accent-9: oklch(18.6% 0.0026 248);
      --accent-10: oklch(29.1% 0.0026 248);
      --accent-11: oklch(50.1% 0.0017 248);
      --accent-12: oklch(24% 0.0026 248);

      --accent-a1: color(display-p3 0.0235 0.0235 0.349 / 0.012);
      --accent-a2: color(display-p3 0.0235 0.1608 0.1608 / 0.028);
      --accent-a3: color(display-p3 0 0 0 / 0.0588);
      --accent-a4: color(display-p3 0.0118 0.0118 0.0549 / 0.091);
      --accent-a5: color(display-p3 0.0039 0.0392 0.0392 / 0.122);
      --accent-a6: color(display-p3 0 0 0 / 0.149);
      --accent-a7: color(display-p3 0.0078 0.0275 0.0275 / 0.197);
      --accent-a8: color(display-p3 0.0039 0.0039 0.0196 / 0.267);
      --accent-a9: color(display-p3 0 0.0039 0.0078 / 0.93);
      --accent-a10: color(display-p3 0 0.0039 0.0118 / 0.832);
      --accent-a11: color(display-p3 0 0 0.0078 / 0.612);
      --accent-a12: color(display-p3 0 0.0039 0.0078 / 0.883);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9647 0.9725 0.9725 / 0.8);
      --accent-indicator: oklch(18.6% 0.0026 248);
      --accent-track: oklch(18.6% 0.0026 248);
    }
  }
}


:root {
  --grayscale-1: #fcfcfd;
  --grayscale-2: #f9f9fb;
  --grayscale-3: #f0f0f3;
  --grayscale-4: #e8e8ec;
  --grayscale-5: #e0e1e6;
  --grayscale-6: #d9d9e0;
  --grayscale-7: #cdced6;
  --grayscale-8: #b9bbc6;
  --grayscale-9: #8b8d98;
  --grayscale-10: #80838d;
  --grayscale-11: #60646c;
  --grayscale-12: #1c2024;

  --grayscale-a1: #00005503;
  --grayscale-a2: #00005506;
  --grayscale-a3: #0000330f;
  --grayscale-a4: #00002d17;
  --grayscale-a5: #0009321f;
  --grayscale-a6: #00002f26;
  --grayscale-a7: #00062e32;
  --grayscale-a8: #00083046;
  --grayscale-a9: #00051d74;
  --grayscale-a10: #00071b7f;
  --grayscale-a11: #0007149f;
  --grayscale-a12: #000509e3;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --grayscale-1: color(display-p3 0.988 0.988 0.992);
      --grayscale-2: color(display-p3 0.976 0.976 0.984);
      --grayscale-3: color(display-p3 0.94 0.941 0.953);
      --grayscale-4: color(display-p3 0.908 0.909 0.925);
      --grayscale-5: color(display-p3 0.88 0.881 0.901);
      --grayscale-6: color(display-p3 0.85 0.852 0.876);
      --grayscale-7: color(display-p3 0.805 0.808 0.838);
      --grayscale-8: color(display-p3 0.727 0.733 0.773);
      --grayscale-9: color(display-p3 0.547 0.553 0.592);
      --grayscale-10: color(display-p3 0.503 0.512 0.549);
      --grayscale-11: color(display-p3 0.379 0.392 0.421);
      --grayscale-12: color(display-p3 0.113 0.125 0.14);

      --grayscale-a1: #00005503;
      --grayscale-a2: #00005506;
      --grayscale-a3: #0000330f;
      --grayscale-a4: #00002d17;
      --grayscale-a5: #0009321f;
      --grayscale-a6: #00002f26;
      --grayscale-a7: #00062e32;
      --grayscale-a8: #00083046;
      --grayscale-a9: #00051d74;
      --grayscale-a10: #00071b7f;
      --grayscale-a11: #0007149f;
      --grayscale-a12: #000509e3;

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


.dark {
  --accent-1: #000;
  --accent-2: #121211;
  --accent-3: #1f1f1d;
  --accent-4: #282826;
  --accent-5: #30302e;
  --accent-6: #3a3a37;
  --accent-7: #484845;
  --accent-8: #60605e;
  --accent-9: #fff;
  --accent-10: #f6f6f4;
  --accent-11: #b3b3b0;
  --accent-12: #eeeeec;

  --accent-a1: #00000000;
  --accent-a2: #fffff112;
  --accent-a3: #ffffef1f;
  --accent-a4: #fffff328;
  --accent-a5: #fffff530;
  --accent-a6: #fffff23a;
  --accent-a7: #fffff548;
  --accent-a8: #fffffa60;
  --accent-a9: #ffffff;
  --accent-a10: #fffffdf6;
  --accent-a11: #fffffbb3;
  --accent-a12: #fffffdee;

  --accent-contrast: #311921;
  --accent-surface: #24242280;
  --accent-indicator: #fff;
  --accent-track: #fff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.0023 106.5);
      --accent-2: oklch(18.3% 0.0022 106.5);
      --accent-3: oklch(23.9% 0.0032 106.5);
      --accent-4: oklch(27.5% 0.0036 106.5);
      --accent-5: oklch(30.8% 0.004 106.5);
      --accent-6: oklch(34.7% 0.004 106.5);
      --accent-7: oklch(40% 0.004 106.5);
      --accent-8: oklch(49% 0.004 106.5);
      --accent-9: oklch(100% 0 none);
      --accent-10: oklch(97.3% 0.0027 106.5);
      --accent-11: oklch(76.7% 0.004 106.5);
      --accent-12: oklch(94.8% 0.0027 106.5);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.9961 0.9961 0.9412 / 0.071);
      --accent-a3: color(display-p3 1 1 0.9333 / 0.122);
      --accent-a4: color(display-p3 1 1 0.9529 / 0.157);
      --accent-a5: color(display-p3 0.9961 0.9961 0.9569 / 0.189);
      --accent-a6: color(display-p3 1 1 0.949 / 0.228);
      --accent-a7: color(display-p3 1 1 0.9569 / 0.283);
      --accent-a8: color(display-p3 1 1 0.9804 / 0.377);
      --accent-a9: color(display-p3 1 1 1);
      --accent-a10: color(display-p3 1 1 0.9922 / 0.965);
      --accent-a11: color(display-p3 1 1 0.9843 / 0.702);
      --accent-a12: color(display-p3 1 1 0.9922 / 0.934);

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


.dark {
  --grayscale-1: #111110;
  --grayscale-2: #191918;
  --grayscale-3: #222221;
  --grayscale-4: #2a2a28;
  --grayscale-5: #31312e;
  --grayscale-6: #3b3a37;
  --grayscale-7: #494844;
  --grayscale-8: #62605b;
  --grayscale-9: #6f6d66;
  --grayscale-10: #7c7b74;
  --grayscale-11: #b5b3ad;
  --grayscale-12: #eeeeec;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f4f4f309;
  --grayscale-a3: #f6f6f513;
  --grayscale-a4: #fefef31b;
  --grayscale-a5: #fbfbeb23;
  --grayscale-a6: #fffaed2d;
  --grayscale-a7: #fffbed3c;
  --grayscale-a8: #fff9eb57;
  --grayscale-a9: #fffae965;
  --grayscale-a10: #fffdee73;
  --grayscale-a11: #fffcf4b0;
  --grayscale-a12: #fffffded;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.063);
      --grayscale-2: color(display-p3 0.098 0.098 0.094);
      --grayscale-3: color(display-p3 0.135 0.135 0.129);
      --grayscale-4: color(display-p3 0.164 0.163 0.156);
      --grayscale-5: color(display-p3 0.193 0.192 0.183);
      --grayscale-6: color(display-p3 0.23 0.229 0.217);
      --grayscale-7: color(display-p3 0.285 0.282 0.267);
      --grayscale-8: color(display-p3 0.384 0.378 0.357);
      --grayscale-9: color(display-p3 0.434 0.428 0.403);
      --grayscale-10: color(display-p3 0.487 0.481 0.456);
      --grayscale-11: color(display-p3 0.707 0.703 0.68);
      --grayscale-12: color(display-p3 0.933 0.933 0.926);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f4f4f309;
      --grayscale-a3: #f6f6f513;
      --grayscale-a4: #fefef31b;
      --grayscale-a5: #fbfbeb23;
      --grayscale-a6: #fffaed2d;
      --grayscale-a7: #fffbed3c;
      --grayscale-a8: #fff9eb57;
      --grayscale-a9: #fffae965;
      --grayscale-a10: #fffdee73;
      --grayscale-a11: #fffcf4b0;
      --grayscale-a12: #fffffded;

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

:root {
  color-scheme: light;
  --accent: rgba(18, 19, 20, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: rgba(251, 252, 253, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: light;
  --background: #000000;
  --accent: #ffffff;
}

/* Product Switcher Toggle Theme */
:root [data-product-switcher-theme="toggle"] .fern-product-selector {
  background-color: var(--grayscale-3);
  border-radius: 9999px;
  padding: 4px;
  gap: 4px;
  height: 36px;
  align-items: center;
}

:root [data-product-switcher-theme="toggle"] .fern-product-selector .product-dropdown-trigger {
  padding: 2px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  background-color: transparent;
  color: var(--grayscale-11);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  white-space: nowrap;
  display: flex;
  align-items: center;
  text-decoration: none;
  height: 100%;
}

:root [data-product-switcher-theme="toggle"] .fern-product-selector .product-dropdown-trigger:not([data-active="true"]):hover {
  background-color: var(--grayscale-4);
}

:root [data-product-switcher-theme="toggle"] .fern-product-selector[data-state="open"] .product-dropdown-trigger,
:root [data-product-switcher-theme="toggle"] .fern-product-selector .product-dropdown-trigger[data-active="true"] {
  background-color: var(--background);
  color: var(--grayscale-12);
}

:root [data-product-switcher-theme="toggle"] .fern-product-selector .product-dropdown-trigger:not([data-active="true"]):focus-visible {
  background-color: var(--grayscale-4);
  outline: none;
}

.dark [data-product-switcher-theme="toggle"] .fern-product-selector {
  background-color: var(--grayscale-4);
}

.dark [data-product-switcher-theme="toggle"] .fern-product-selector .product-dropdown-trigger:not([data-active="true"]):hover {
  background-color: var(--grayscale-5);
}
.dark [data-product-switcher-theme="toggle"] .fern-product-selector .product-dropdown-trigger:not([data-active="true"]):focus-visible {
  background-color: var(--grayscale-5); outline: none;
}

.dark [data-product-switcher-theme="toggle"] .fern-product-selector[data-state="open"] .product-dropdown-trigger,
.dark [data-product-switcher-theme="toggle"] .fern-product-selector .product-dropdown-trigger[data-active="true"] {
  background-color: var(--grayscale-6);
}

/*
  Merge-branded stylesheet
  - Refined typography and spacing
  - Pill buttons and soft, elevated cards 
  - Subtle borders, generous radii, and tasteful shadows
  - Light/Dark support via CSS variables where possible
*/

/* ---------- Font Face ---------- */
@font-face {
  font-family: "FH Oscar Pro";
  src: url("./fonts/FHOscarPro-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- Brand tokens (overridable in dark) ---------- */
:root {
  /* Enable light-dark() function */
  color-scheme: light dark;

  /* Fonts */
  --font-fh-oscar-pro: "FH Oscar Pro", system-ui, -apple-system, sans-serif;

  /* Gray Scale */
  --gray-90: #0e0d0c;
  --gray-80: #12110f;
  --gray-70: #23221e;
  --gray-60: #2c2a25;
  --gray-50: #565551;
  --gray-40: #777674;
  --gray-30: #abaaa8;
  --gray-20: #d5d4d3;
  --gray-10: #eaeae9;
  --gray-0: #f4f4f4;

  /* Overriding fern-grayscale tokens - light-dark for theme support */
  --grayscale-12: light-dark(var(--gray-90), var(--gray-0));
  --grayscale-11: light-dark(var(--gray-80), var(--gray-10));
  --grayscale-10: light-dark(var(--gray-70), var(--gray-20));
  --grayscale-9: light-dark(var(--gray-60), var(--gray-30));
  --grayscale-8: light-dark(var(--gray-50), var(--gray-40));
  --grayscale-7: light-dark(var(--gray-40), var(--gray-50));
  --grayscale-6: light-dark(var(--gray-30), var(--gray-60));
  --grayscale-5: light-dark(var(--gray-20), var(--gray-70));
  --grayscale-4: light-dark(var(--gray-10), var(--gray-80));
  --grayscale-3: light-dark(var(--gray-0), var(--gray-90));
  --grayscale-2: light-dark(var(--gray-0), var(--gray-90));
  --grayscale-1: light-dark(var(--gray-0), var(--gray-90));

  --grayscale-a12: light-dark(var(--gray-90), var(--gray-0));
  --grayscale-a11: light-dark(var(--gray-80), var(--gray-10));
  --grayscale-a10: light-dark(var(--gray-70), var(--gray-20));
  --grayscale-a9: light-dark(var(--gray-60), var(--gray-30));
  --grayscale-a8: light-dark(var(--gray-50), var(--gray-40));
  --grayscale-a7: light-dark(var(--gray-40), var(--gray-50));
  --grayscale-a6: light-dark(var(--gray-30), var(--gray-60));
  --grayscale-a5: light-dark(var(--gray-20), var(--gray-70));
  --grayscale-a4: light-dark(var(--gray-10), var(--gray-80));
  --grayscale-a3: light-dark(var(--gray-0), var(--gray-90));
  --grayscale-a2: light-dark(var(--gray-0), var(--gray-90));
  --grayscale-a1: light-dark(var(--gray-0), var(--gray-90));

  /* Overriding fern-accent tokens - light-dark for theme support */
  --accent-12: light-dark(var(--gray-90), var(--gray-0));
  --accent-11: light-dark(var(--gray-80), var(--gray-10));
  --accent-10: light-dark(var(--gray-70), var(--gray-20));
  --accent-9: light-dark(var(--gray-60), var(--gray-30));
  --accent-8: light-dark(var(--gray-50), var(--gray-40));
  --accent-7: light-dark(var(--gray-40), var(--gray-50));
  --accent-6: light-dark(var(--gray-30), var(--gray-60));
  --accent-5: light-dark(var(--gray-20), var(--gray-70));
  --accent-4: light-dark(var(--gray-10), var(--gray-80));
  --accent-3: light-dark(var(--gray-0), var(--gray-90));
  --accent-2: light-dark(var(--gray-0), var(--gray-90));
  --accent-1: light-dark(var(--gray-0), var(--gray-90));

  --accent-a12: light-dark(var(--gray-90), var(--gray-0));
  --accent-a11: light-dark(var(--gray-80), var(--gray-10));
  --accent-a10: light-dark(var(--gray-70), var(--gray-20));
  --accent-a9: light-dark(var(--gray-60), var(--gray-30));
  --accent-a8: light-dark(var(--gray-50), var(--gray-40));
  --accent-a7: light-dark(var(--gray-40), var(--gray-50));
  --accent-a6: light-dark(var(--gray-30), var(--gray-60));
  --accent-a5: light-dark(var(--gray-20), var(--gray-70));
  --accent-a4: light-dark(var(--gray-10), var(--gray-80));
  --accent-a3: light-dark(var(--gray-0), var(--gray-90));
  --accent-a2: light-dark(var(--gray-0), var(--gray-90));
  --accent-a1: light-dark(var(--gray-0), var(--gray-90));

  /* Red Scale */
  --red-90: #4b1b17;
  --red-80: #672621;
  --red-70: #8b2f29;
  --red-60: #a53b30;
  --red-50: #c94432;
  --red-40: #d9655a;
  --red-30: #e48f87;
  --red-20: #f1b1a9;
  --red-10: #f5cfc9;
  --red-0: #f8e8e6;

  /* Overriding fern-red tokens to use red scale */
  --red-12: var(--red-90);
  --red-11: var(--red-80);
  /* --red-10: var(--red-70); */
  --red-9: var(--red-60);
  --red-8: var(--red-50);
  --red-7: var(--red-40);
  --red-6: var(--red-30);
  --red-5: var(--red-20);
  --red-4: var(--red-10);
  --red-3: var(--red-0);
  --red-2: var(--red-0);
  --red-1: var(--red-0);

  --red-a12: var(--red-90);
  --red-a11: var(--red-80);
  --red-a10: var(--red-70);
  --red-a9: var(--red-60);
  --red-a8: var(--red-50);
  --red-a7: var(--red-40);
  --red-a6: var(--red-30);
  --red-a5: var(--red-20);
  --red-a4: var(--red-10);
  --red-a3: var(--red-0);
  --red-a2: var(--red-0);
  --red-a1: var(--red-0);

  /* Orange Scale */
  --orange-90: #7c2d12;
  --orange-80: #9a3412;
  --orange-70: #c2410c;
  --orange-60: #f95c09;
  --orange-50: #ff6e08;
  --orange-40: #fb923c;
  --orange-30: #fdb874;
  --orange-20: #fed7aa;
  --orange-10: #ffedd5;
  --orange-0: #fff7ed;

  /* Overriding fern-orange tokens to use orange scale */
  --orange-12: var(--orange-90);
  --orange-11: var(--orange-80);
  /* --orange-10: var(--orange-70); */
  --orange-9: var(--orange-60);
  --orange-8: var(--orange-50);
  --orange-7: var(--orange-40);
  --orange-6: var(--orange-30);
  --orange-5: var(--orange-20);
  --orange-4: var(--orange-10);
  --orange-3: var(--orange-0);
  --orange-2: var(--orange-0);
  --orange-1: var(--orange-0);

  --orange-a12: var(--orange-90);
  --orange-a11: var(--orange-80);
  --orange-a10: var(--orange-70);
  --orange-a9: var(--orange-60);
  --orange-a8: var(--orange-50);
  --orange-a7: var(--orange-40);
  --orange-a6: var(--orange-30);
  --orange-a5: var(--orange-20);
  --orange-a4: var(--orange-10);
  --orange-a3: var(--orange-0);
  --orange-a2: var(--orange-0);
  --orange-a1: var(--orange-0);

  /* Overriding fern-amber tokens to use orange scale */
  --amber-12: var(--orange-90);
  --amber-11: var(--orange-80);
  --amber-10: var(--orange-70);
  --amber-9: var(--orange-60);
  --amber-8: var(--orange-50);
  --amber-7: var(--orange-40);
  --amber-6: var(--orange-30);
  --amber-5: var(--orange-20);
  --amber-4: var(--orange-10);
  --amber-3: var(--orange-0);
  --amber-2: var(--orange-0);
  --amber-1: var(--orange-0);

  --amber-a12: var(--orange-90);
  --amber-a11: var(--orange-80);
  --amber-a10: var(--orange-70);
  --amber-a9: var(--orange-60);
  --amber-a8: var(--orange-50);
  --amber-a7: var(--orange-40);
  --amber-a6: var(--orange-30);
  --amber-a5: var(--orange-20);
  --amber-a4: var(--orange-10);
  --amber-a3: var(--orange-0);
  --amber-a2: var(--orange-0);
  --amber-a1: var(--orange-0);

  /* Yellow Scale */
  --yellow-90: #7f3900;
  --yellow-80: #955400;
  --yellow-70: #c9850a;
  --yellow-60: #caed90;
  --yellow-50: #e9a947;
  --yellow-40: #f8be65;
  --yellow-30: #efcf84;
  --yellow-20: #f3dea9;
  --yellow-10: #f8eac9;
  --yellow-0: #fcf4e4;

  /* Overriding fern-yellow tokens to use yellow scale */
  --yellow-12: var(--yellow-90);
  --yellow-11: var(--yellow-80);
  /* --yellow-10: var(--yellow-70); */
  --yellow-9: var(--yellow-60);
  --yellow-8: var(--yellow-50);
  --yellow-7: var(--yellow-40);
  --yellow-6: var(--yellow-30);
  --yellow-5: var(--yellow-20);
  --yellow-4: var(--yellow-10);
  --yellow-3: var(--yellow-0);
  --yellow-2: var(--yellow-0);
  --yellow-1: var(--yellow-0);

  --yellow-a12: var(--yellow-90);
  --yellow-a11: var(--yellow-80);
  --yellow-a10: var(--yellow-70);
  --yellow-a9: var(--yellow-60);
  --yellow-a8: var(--yellow-50);
  --yellow-a7: var(--yellow-40);
  --yellow-a6: var(--yellow-30);
  --yellow-a5: var(--yellow-20);
  --yellow-a4: var(--yellow-10);
  --yellow-a3: var(--yellow-0);
  --yellow-a2: var(--yellow-0);
  --yellow-a1: var(--yellow-0);

  /* Green Scale */
  --green-90: #234224;
  --green-80: #2f512f;
  --green-70: #3b6239;
  --green-60: #407345;
  --green-50: #4f8a53;
  --green-40: #74a774;
  --green-30: #98c89a;
  --green-20: #c4dbbd;
  --green-10: #d9ebd3;
  --green-0: #edf5ea;

  /* Overriding fern-green tokens to use green scale */
  --green-12: var(--green-90);
  --green-11: var(--green-80);
  /* --green-10: var(--green-70); */
  --green-9: var(--green-60);
  --green-8: var(--green-50);
  --green-7: var(--green-40);
  --green-6: var(--green-30);
  --green-5: var(--green-20);
  --green-4: var(--green-10);
  --green-3: var(--green-0);
  --green-2: var(--green-0);
  --green-1: var(--green-0);

  --green-a12: var(--green-90);
  --green-a11: var(--green-80);
  --green-a10: var(--green-70);
  --green-a9: var(--green-60);
  --green-a8: var(--green-50);
  --green-a7: var(--green-40);
  --green-a6: var(--green-30);
  --green-a5: var(--green-20);
  --green-a4: var(--green-10);
  --green-a3: var(--green-0);
  --green-a2: var(--green-0);
  --green-a1: var(--green-0);

  /* Teal Scale */
  --teal-90: #203237;
  --teal-80: #24383d;
  --teal-70: #274249;
  --teal-60: #4c6c73;
  --teal-50: #7c9298;
  --teal-40: #9db3b7;
  --teal-30: #b6c9cb;
  --teal-20: #c4d6d8;
  --teal-10: #e1ecec;
  --teal-0: #f3f8f8;

  /* Overriding fern-teal tokens to use teal scale */
  --teal-12: var(--teal-90);
  --teal-11: var(--teal-80);
  /* --teal-10: var(--teal-70); */
  --teal-9: var(--teal-60);
  --teal-8: var(--teal-50);
  --teal-7: var(--teal-40);
  --teal-6: var(--teal-30);
  --teal-5: var(--teal-20);
  --teal-4: var(--teal-10);
  --teal-3: var(--teal-0);
  --teal-2: var(--teal-0);
  --teal-1: var(--teal-0);

  --teal-a12: var(--teal-90);
  --teal-a11: var(--teal-80);
  --teal-a10: var(--teal-70);
  --teal-a9: var(--teal-60);
  --teal-a8: var(--teal-50);
  --teal-a7: var(--teal-40);
  --teal-a6: var(--teal-30);
  --teal-a5: var(--teal-20);
  --teal-a4: var(--teal-10);
  --teal-a3: var(--teal-0);
  --teal-a2: var(--teal-0);
  --teal-a1: var(--teal-0);

  /* Blue Scale */
  --blue-90: #093e66;
  --blue-80: #0d4f84;
  --blue-70: #1160a1;
  --blue-60: #1771bb;
  --blue-50: #2f7fc2;
  --blue-40: #4e94d0;
  --blue-30: #75b0e0;
  --blue-20: #9fccec;
  --blue-10: #cde7f7;
  --blue-0: #ebf7fc;

  /* Overriding fern-blue tokens to use blue scale */
  --blue-12: var(--blue-90);
  --blue-11: var(--blue-80);
  /* --blue-10: var(--blue-70); */
  --blue-9: var(--blue-60);
  --blue-8: var(--blue-50);
  --blue-7: var(--blue-40);
  --blue-6: var(--blue-30);
  --blue-5: var(--blue-20);
  --blue-4: var(--blue-10);
  --blue-3: var(--blue-0);
  --blue-2: var(--blue-0);
  --blue-1: var(--blue-0);

  --blue-a12: var(--blue-90);
  --blue-a11: var(--blue-80);
  --blue-a10: var(--blue-70);
  --blue-a9: var(--blue-60);
  --blue-a8: var(--blue-50);
  --blue-a7: var(--blue-40);
  --blue-a6: var(--blue-30);
  --blue-a5: var(--blue-20);
  --blue-a4: var(--blue-10);
  --blue-a3: var(--blue-0);
  --blue-a2: var(--blue-0);
  --blue-a1: var(--blue-0);

  /* Purple Scale */
  --purple-90: #443a5f;
  --purple-80: #4a3c6b;
  --purple-70: #5a477d;
  --purple-60: #725b91;
  --purple-50: #8c7ba5;
  --purple-40: #b59fc3;
  --purple-30: #c8adca;
  --purple-20: #dbcdde;
  --purple-10: #f0e4f0;
  --purple-0: #f4eff4;

  /* Overriding fern-purple tokens to use purple scale */
  --purple-12: var(--purple-90);
  --purple-11: var(--purple-80);
  /* --purple-10: var(--purple-70); */
  --purple-9: var(--purple-60);
  --purple-8: var(--purple-50);
  --purple-7: var(--purple-40);
  --purple-6: var(--purple-30);
  --purple-5: var(--purple-20);
  --purple-4: var(--purple-10);
  --purple-3: var(--purple-0);
  --purple-2: var(--purple-0);
  --purple-1: var(--purple-0);

  --purple-a12: var(--purple-90);
  --purple-a11: var(--purple-80);
  --purple-a10: var(--purple-70);
  --purple-a9: var(--purple-60);
  --purple-a8: var(--purple-50);
  --purple-a7: var(--purple-40);
  --purple-a6: var(--purple-30);
  --purple-a5: var(--purple-20);
  --purple-a4: var(--purple-10);
  --purple-a3: var(--purple-0);
  --purple-a2: var(--purple-0);
  --purple-a1: var(--purple-0);

  /* Brand Tokens */
  --merge-black: #121314;
  --merge-black-hover: #2d2d2d;
  --merge-white: #ffffff;
  --merge-text: #000000;
  --merge-text-muted: #62636c;
  --merge-border: var(--gray-10);
  --merge-card: #ffffff;
  --merge-surface: #f9f9fb;

  /* Border Radius */
  --merge-radius-sm: 8px;
  --merge-radius-md: 12px;
  --merge-radius-card: 15px;
  --merge-radius-lg: 16px;
  --merge-radius-xl: 24px;
  --merge-radius-pill: 9999px;

  /* Shadows */
  --merge-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05),
    0 1px 1px rgba(0, 0, 0, 0.03);
  --merge-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.08);
  --merge-card-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05),
    0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --merge-card-hover-ring: 0px 0px 0px 5px rgba(223, 225, 228, 0.25);
  --merge-card-hover-shadow: 0px 6px 30px -2px rgba(0, 0, 0, 0.12);

  /* UI Colors */
  --sidebar-active-background-color: var(--gray-0);
  --link-color: var(--blue-60);
  --sidebar-border-color: var(--gray-10);
  --accent-indicator: #ff6e06;
  --ramp-background-color: #f6ff79;
  --opal-background-color: #ec7b8f;
  --causal-background-color: rgb(199, 216, 240);
  --assembly-background-color: rgb(240, 217, 200);
  --teamohana-background-color: rgb(254, 119, 6);
  --navan-background-color: rgb(147, 4, 248);
  --assemble-background-color: rgb(234, 241, 255);
}

:is(.dark) {
  --card-background: #23221e; /* this sets dark code blocks background color */
  --merge-black: #ffffff;
  --merge-black-hover: #e5e7eb;
  --merge-white: #121314;
  --merge-text: #ffffff;
  --merge-text-muted: #a0a0a8;
  --merge-border: #2a2a2e;
  --merge-card: #23221e;
  --merge-surface: #0f0f10;
  --merge-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --merge-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.45);
  --merge-card-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.05),
    0 1px 2px 0 rgba(255, 255, 255, 0.05);
  --merge-card-hover-ring: 0px 0px 0px 5px rgba(60, 60, 65, 0.35);
  --merge-card-hover-shadow: 0px 6px 30px -2px rgba(255, 255, 255, 0.08);
  --sidebar-active-background-color: #232323;
  --link-color: #1771bb;
  --sidebar-border-color: var(--gray-10);
}

/* ========================================
   GLOBAL STYLES
   ======================================== */

/* ---------- Global resets ---------- */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: antialiased;
  -webkit-appearance: none;
  appearance: none;
}

/* Global heading styles - Docs typography hierarchy */
/* All headings use FH Oscar Pro font with -3% letter spacing */
h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

/* Monospace typography styles */
.small-monospace {
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 14px;
  line-height: 24px;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0;
}

code {
  background-color: var(--gray-3);
  font-weight: var(--font-weight-normal);
  box-shadow: none;
}

.toc-root:before {
  background-color: var(--merge-border);
}

hr {
  border-color: var(--merge-border);
}

/* Header */
#fern-header {
  border-bottom-color: var(--gray-10);
  background-color: var(--merge-white) !important;
}
.fern-header-content {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.fern-header-tabs {
  padding-left: 16px;
}

#fern-search-button {
  box-shadow: none;
  border: 1px solid var(--merge-border);
  color: var(--gray-50);
  font-weight: var(--font-weight-normal);
  border-radius: 6px;
}

#fern-search-button svg {
  stroke: var(--gray-50);
}

.fern-kbd {
  border-color: transparent;
  color: var(--gray-50);
}

#fern-ask-ai-button {
  box-shadow: 0 0 0 1px var(--merge-border);
  font-weight: var(--font-weight-semibold);
  border-radius: 6px;
  gap: 6px;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {

  #fern-ask-ai-button .fern-button-text {
    font-size: 0;
  }
  .fern-header-logo-container img {
    width: 125px !important;
  }

  #fern-ask-ai-button .fern-button-text::after {
    content: "AI";
    font-size: 14px;
  }

}

/* On phones the full search bar left no room for the mobile menu button,
   pushing it off the right edge of the header. Let the search bar fill the
   space between the logo and the menu button instead, shrinking toward an icon
   on very narrow screens so the hamburger always stays on-screen. */
@media (max-width: 480px) {

  .fern-header-logo-container {
    flex: 0 0 auto !important;
  }
  .fern-header-content [class*="max-w-[640px]"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  #fern-search-button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .fern-header-mobile-menu-button {
    flex: 0 0 auto !important;
  }
  #fern-search-button .fern-kbd {
    display: none;
  }

}

/* Ask AI on mobile renders as a bottom sheet rather than the desktop sidebar.
   Fern pins the AI disclaimer to the top of the sheet but bottom-anchors the
   message column, so an empty conversation strands the greeting at the bottom
   of an 85dvh sheet with roughly 350px of nothing between the two. Top-anchor
   the column so the greeting sits under the disclaimer, the way every other
   mobile chat sheet reads. Messages still scroll normally once a conversation
   fills the space. */
@media (max-width: 767px) {

  [data-vaul-drawer] .flex.flex-1.flex-col.justify-end {
    justify-content: flex-start;
  }

  /* The greeting offers "Tip: You can toggle this pane with Cmd + /", which is
     a keyboard shortcut no phone can perform. */
  [data-vaul-drawer]
    div.flex.flex-row.items-center.gap-1:has(> span > kbd.fern-kbd) {
    display: none;
  }

}

/* Hide original SVG icon and replace with custom sparkle */
#fern-ask-ai-button svg {
  display: none !important;
}

#fern-ask-ai-button::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg clip-path='url(%23clip0_1786_59)'%3E%3Cpath d='M13.3335 1.99996V4.66663M14.6668 3.3333H12.0001M2.66679 11.3333V12.6666M3.33346 12H2.00012M6.62479 10.3333C6.56527 10.1026 6.44502 9.89203 6.27653 9.72355C6.10805 9.55507 5.8975 9.43481 5.66679 9.3753L1.57679 8.32063C1.50701 8.30082 1.4456 8.2588 1.40186 8.20093C1.35813 8.14305 1.33447 8.0725 1.33447 7.99996C1.33447 7.92743 1.35813 7.85687 1.40186 7.799C1.4456 7.74113 1.50701 7.6991 1.57679 7.6793L5.66679 6.62396C5.89742 6.5645 6.10792 6.44435 6.27639 6.27599C6.44486 6.10763 6.56517 5.89722 6.62479 5.66663L7.67946 1.57663C7.69906 1.50657 7.74105 1.44486 7.799 1.40089C7.85696 1.35693 7.92771 1.33313 8.00046 1.33313C8.0732 1.33313 8.14395 1.35693 8.20191 1.40089C8.25987 1.44486 8.30185 1.50657 8.32146 1.57663L9.37546 5.66663C9.43497 5.89734 9.55523 6.10789 9.72371 6.27637C9.89219 6.44486 10.1027 6.56511 10.3335 6.62463L14.4235 7.67863C14.4938 7.69803 14.5558 7.73997 14.6 7.79801C14.6442 7.85606 14.6682 7.927 14.6682 7.99996C14.6682 8.07292 14.6442 8.14387 14.6 8.20191C14.5558 8.25996 14.4938 8.3019 14.4235 8.3213L10.3335 9.3753C10.1027 9.43481 9.89219 9.55507 9.72371 9.72355C9.55523 9.89203 9.43497 10.1026 9.37546 10.3333L8.32079 14.4233C8.30118 14.4934 8.2592 14.5551 8.20124 14.599C8.14328 14.643 8.07254 14.6668 7.99979 14.6668C7.92704 14.6668 7.85629 14.643 7.79834 14.599C7.74038 14.5551 7.69839 14.4934 7.67879 14.4233L6.62479 10.3333Z' stroke='%2312110F' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1786_59'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.fern-header-navbar-links .fern-button.minimal.normal:nth-child(1) {
  font-weight: var(--font-weight-medium);
}

.fern-header-navbar-links .fern-button.minimal.normal:nth-child(2) {
  font-weight: var(--font-weight-semibold);
}

/* Resources dropdown menu spacing */
.fern-header-content [data-radix-popper-content-wrapper] [role="menu"] {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.fern-header-content [data-radix-popper-content-wrapper] [role="menu"] .fern-dropdown-item {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

article header {
  position: relative;
  margin-top: 4rem;
}

article header code {
  padding: 8px 12px !important;
}

/* content header (reference pages without code snippets only) */
/* Width is dynamically set by header-width.js based on aside position */
.fern-layout-reference:not(:has(.fern-endpoint-code-snippets)) article header {
  position: relative;
  margin-top: 4rem;
  overflow-wrap: break-word;
}

/* ========================================
   BUTTONS & INTERACTIVE ELEMENTS
   ======================================== */

.merge-button {

  background-color: var(--grayscale-12);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--grayscale-1);
  height: 2.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;

  &.outline {

    background-color: transparent;
    border: 1px solid var(--grayscale-5);
    color: var(--grayscale-12);

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

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

}

.postman-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #ed7547 !important;
  border-radius: 4px !important;
  font-weight: var(--font-weight-medium);
  font-size: 14px;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease;
}

.postman-button:hover {
  background-color: #d96a3f !important;
  color: #ffffff !important;
}
.postman-button:focus-visible {
  background-color: #d96a3f !important;
  color: #ffffff !important;
}

.postman-button svg {
  color: #ffffff;
  width: 12px;
  height: 12px;
}

.fern-button.nav-button {
  border-radius: 6px !important;
  cursor: pointer;
  padding: 1.25rem 1rem !important;
  font-weight: var(--font-weight-semibold) !important;
}

.no-underline {
  text-decoration: none;
}

.fern-button.filled.normal {
  font-weight: var(--font-weight-semibold);
  background-color: var(--gray-60);
}

.fern-button.filled.normal:hover {
  background-color: var(--gray-70);
}
.fern-button.filled.normal:focus-visible {
  background-color: var(--gray-70);
}

/* ========================================
   CARDS
   ======================================== */

/* ---------- General card styles ---------- */ /* This is problematic */
.fern-card:not(.fern-accordion):not(.borderless-image-cards) {
  border-radius: var(--merge-radius-card) !important;
  border: 1px solid var(--merge-border) !important;
  background: var(--merge-card) !important;
}

.borderless-image-cards,
.borderless-image-cards:hover,
.borderless-image-cards:focus {
  border: none !important;
  box-shadow: none !important;
}
.borderless-image-cards:focus-visible {
  border: none !important;
  box-shadow: none !important;
}

/* ---------- API cards ---------- */
.api-card {
  background: var(--merge-card);
  border: 1px solid var(--merge-border);
  border-radius: var(--merge-radius-lg);
  padding: 1rem;
  box-shadow: var(--merge-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
}

.api-card-header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-grow: 1;
}

.api-icon {
  display: none;
}

.api-title {
  font-size: 1.0625rem;
  font-weight: var(--font-weight-bold);
  color: var(--grayscale-9);
}

.api-subtitle {
  color: var(--merge-text-muted);
}

.api-card .action-buttons {
  margin-top: auto;
  align-self: flex-start;
}

.api-card .action-buttons .fern-button {
  border-radius: var(--merge-radius-pill) !important;
  border: 2px solid transparent !important;
  transition: border-color 0.2s ease !important;
}

.api-card .action-buttons .fern-button:hover {
  border-color: #ff6e08 !important;
  background: transparent !important;
}
.api-card .action-buttons .fern-button:focus-visible {
  border-color: #ff6e08 !important;
  background: transparent !important;
}

/* ---------- Feature cards ---------- */
.feature-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0;
  gap: 3rem;
  margin-bottom: 3rem;
}

.feature-content {
  flex: 1;
}

.feature-content h3 {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  margin: 0 0 1rem 0;
  line-height: 1.3;
}

.feature-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--grayscale-9);
  margin: 0 0 0.75rem 0;
}

.feature-content p:last-child {
  margin-bottom: 0;
}

.feature-content ol {
  margin: 0.75rem 0 0 0;
  padding-left: 1.5rem;
}

.feature-content ol li {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--grayscale-9);
  margin-bottom: 0.5rem;
}

.feature-content a {
  color: var(--link-color);
  text-decoration: none;
}

.feature-content a:hover {
  text-decoration: underline;
}
.feature-content a:focus-visible {
  text-decoration: underline;
}

.feature-image {
  flex: 0 0 auto;
  max-width: 50%;
}

.feature-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Remove theme-provided top margins so image top aligns with title */
.feature-card .feature-image,
.feature-card .feature-image [data-rmiz-wrap],
.feature-card .feature-image img {
  margin-top: 0 !important;
}

/* ========================================
   LANDING PAGE
   ======================================== */

/* Hide header when landing page or home page is present */
.fern-layout-guide:has(.landing-page) header,
.fern-layout-guide:has(.home-page) header {
  display: none !important;
}

/* Max width for layout guide */

.w-content-width {
  width: 1728px !important;
  margin-inline: auto;
}

.fern-layout-guide,
.fern-layout-changelog,
.fern-layout-page,
.fern-layout-overview,
.fern-layout-reference {
  padding-inline: calc(var(--page-padding) + 3rem);
}

/* Overview pages use H2 styling for the main heading instead of H1 */
div.fern-layout-overview h1,
.fern-layout-overview > h1,
.fern-layout-overview h1:first-of-type {
  font-size: 40px !important;
  line-height: 44px !important;
  letter-spacing: -0.03em !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  padding-top: 0 !important;
}

.fern-layout-overview h1 + p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Responsive padding for content width */
@media (max-width: 1024px) {

  .fern-layout-guide,
  .fern-layout-changelog,
  .fern-layout-page,
  .fern-layout-overview,
  .fern-layout-reference {
    padding-inline: calc(var(--page-padding) + 2rem);
  }

}

@media (max-width: 640px) {

  .fern-layout-guide,
  .fern-layout-changelog,
  .fern-layout-page,
  .fern-layout-overview,
  .fern-layout-reference {
    padding-inline: calc(var(--page-padding) + 1rem);
  }

}

.landing-page {

  margin-inline: auto;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    pointer-events: none !important;
  }

  .fern-card:hover {
    border-color: var(--gray-20) !important;
  }
.fern-card:focus-visible {
    border-color: var(--gray-20) !important;
  }

}

/* ---------- Landing page header ---------- */
.landing-page .merge-header {
  position: relative !important;
  display: flex;
  border-bottom: 1px solid var(--gray-10);
  gap: 4rem;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.landing-page h1.merge-unified {
  margin-top: 2rem;
}

.landing-page .merge-header-content {
  flex: 1;
  min-width: 0;
}

.landing-page.agent .merge-header-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.landing-page .merge-hero-image-container {
  flex: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.landing-page .hero-image {
  cursor: default !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.landing-page .hero-image.dark {
  display: none !important;
  filter: invert(1);
}

:is(.dark) .landing-page .hero-image.light {
  display: none !important;
}

:is(.dark) .landing-page .hero-image.dark {
  display: block !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.prose {
  color: var(--grayscale-9) !important;
}

/**
Heading values
h1 = 48px, 3rem, line height 56px
h2 = 40px, 2.5rem, line height 44px
h3 = 32px, 2rem, line height 36px
h4 = 24px, 1.5rem, line height 28px
h5 = 18px, 1.25rem, line height 26px
h6 = 16px, 1rem, line height 24px
*/

/* ---------- Landing page typography ---------- */
.landing-page h1 {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  text-align: left;
  font-size: 3rem !important;
  line-height: 56px !important;
  letter-spacing: -0.03em !important;
  margin-left: -4px !important;
}

.landing-page h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  margin-top: 0;
  letter-spacing: -0.03em !important;
}

.landing-page h3 {
  margin-bottom: 2rem;
}

.landing-page p {
  font-size: 1rem;
  font-weight: var(--font-weight-normal);
  text-align: left;
  line-height: 26px;
}

.landing-page ul {
  margin-top: 1.25rem !important;
}

.landing-page li {
  margin: 0 !important;
}

/* ---------- Landing page sections ---------- */

.landing-page .landing-body {

  margin-inline: auto;
  padding-top: 3rem;

  &.agent {
    padding-top: 0;
  }

  section {
    padding: 4rem 0;
  }

  section:not(:last-child) {
    border-bottom: 1px solid var(--gray-10) !important;
  }

}

.landing-body > h3 {
  color: var(--grayscale-7) !important;
}

.landing-body > p {
  margin-bottom: 2.5rem;
}

.landing-body-section > * + * {
  margin-top: 2.5rem;
}

.landing-body-section p strong {
  font-size: 20px;
  color: var(--gray-40);
}

.landing-page .fern-card .card-icon {
  width: 49.64px;
  height: 40px;
  margin-right: 1rem;
}

.landing-page .fern-card {
  padding: 1rem !important;
}

.landing-page .fern-card > div {
  align-items: center !important;
}

.landing-page .eyebrow {
  display: flex;
  align-items: flex-start;
  font-weight: var(--font-weight-normal);
  font-size: 14px;
}
.fern-breadcrumb {
  margin-bottom: 16px;
}
.fern-breadcrumb-item {
  font-weight: var(--font-weight-normal);
  font-size: 14px;
}

.landing-page .cta-container {
  margin-top: 2.5rem;
  display: flex;
  align-items: flex-start;
}

.landing-page #fern-sidebar {
  display: none !important;
}

/* ---------- Landing page specific behavior ---------- */
body:has(.landing-page) img {
  cursor: pointer !important;
}

body:has(.landing-page) .rm-Lightbox-trigger {
  cursor: pointer !important;
}

body:has(.landing-page) [data-rmiz-wrap="visible"],
body:has(.landing-page) [data-rmiz-wrap="hidden"] {
  cursor: pointer !important;
}

body:has(.landing-page)
  [data-radix-popper-content-wrapper]:has(span[id^="radix-"]) {
  display: none !important;
}

:is(.dark) .landing-page .merge-header-bg {
  background-color: #151515 !important;
}

/* ========================================
   GUIDES PAGE
   ======================================== */

.guides-page .hero-title {
  margin-bottom: 0.25rem;
}

.guides-page .hero-description {
  margin: 0;
}

/* ---------- Guide chips ---------- */
.guide-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}

.chip {
  border: 1px solid var(--merge-border);
  border-radius: var(--merge-radius-pill);
  padding: 0.375rem 0.75rem;
  color: var(--merge-text);
  text-decoration: none;
  background: var(--merge-card);
}

.chip:hover {
  background: var(--grayscale-a3);
}
.chip:focus-visible {
  background: var(--grayscale-a3);
}

/* ---------- Guide categories ---------- */
.guides-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.guide-category {
  background: var(--merge-card);
  border: 1px solid var(--merge-border);
  border-radius: var(--merge-radius-lg);
  padding: 1.25rem 1.25rem 1rem 1.25rem;
  box-shadow: var(--merge-shadow-sm);
}

.guide-category-title {
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  color: var(--merge-text);
  margin: 0 0 0.5rem 0;
  position: relative;
}

.guide-category-title:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 72px;
  height: 2px;
  background: linear-gradient(90deg, var(--grayscale-a7), transparent);
}

.guide-category-subtitle {
  color: var(--merge-text-muted);
  margin: 0 0 0.75rem 0;
}

/* ---------- Guide links ---------- */
.guide-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.375rem;
}

.guide-links.two-col {
  grid-template-columns: 1fr 1fr;
}

/* Remove dash-style markers that may be injected by the theme */
.guides-page .guide-links li {
  list-style: none;
  padding-left: 0;
}

.guides-page .guide-links li::marker {
  content: none;
}

.guides-page .guide-links li::before {
  content: none !important;
}

.guide-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
  color: var(--merge-text);
  padding: 0.375rem 0.5rem;
  border-radius: 8px;
}

.guide-links a:after {
  content: "→";
  opacity: 0;
  transform: translateX(-4px);
  transition: all 120ms ease;
}

.guide-links a:hover {
  background: var(--accent-a3);
}
.guide-links a:focus-visible {
  background: var(--accent-a3);
}

.guide-links a:hover:after {
  opacity: 1;
  transform: translateX(0);
}
.guide-links a:focus-visible:after {
  opacity: 1;
  transform: translateX(0);
}

/* ========================================
   APIs PAGE
   ======================================== */

.apis-page .hero-title {
  margin-bottom: 0.25rem;
}

.apis-page .hero-description {
  margin: 0;
}

.apis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* ========================================
   SIDEBAR
   ======================================== */

.fern-scroll-area-thumb {
  background-color: var(--gray-40) !important;
}
#fern-sidebar[data-viewport="desktop"] {

  border-right: 1px solid var(--sidebar-border-color);
  max-height: 100%;
  overflow-y: auto;
  padding-bottom: 0;

  #fern-sidebar-scroll-area {

    padding-left: 0 !important;
    padding-right: 0 !important;

    .fern-sidebar-group {

      padding: 0 !important;

      > li > div > div > div > .fern-collapsible:first-of-type {
        margin-left: 2rem !important;
      }
    
}

    .fern-sidebar-link.nested[data-state="active"]:before {
      left: -0px !important;
      bottom: -0px !important;
      top: -0px !important;
    }
    .fern-sidebar-heading {
      margin-bottom: 0 !important;
      margin-top: 0.25rem !important;
      padding-left: 1rem !important;
      font-size: 0.95rem !important;
      font-weight: 600 !important;
      color: var(--text-default) !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
    }
    .fern-sidebar-heading > * {
      font-size: 0.95rem !important;
      font-weight: 600 !important;
      color: var(--text-default) !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
    }

    .fern-sidebar-group > li:first-child .fern-sidebar-heading {
      margin-top: 0 !important;
    }
    .fern-sidebar-link-title-inner {
      line-height: 1.5rem;
    }
    .fern-sidebar-link {

      padding-left: 1rem !important;
      padding-right: 1rem !important;
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;

      &.nested {
        padding-left: 1rem !important;
      }
    
}
  
}

}

/* Mobile sidebar styles */
#fern-sidebar[data-viewport="mobile"] {

  background-color: white !important;

  .fern-selection-item-title{
    font-size: 16px;
    line-height: 26px;
  }

}

/* Home-page mobile nav (injected by mobile-home-nav.js).
   The landing page has no sidebar nav, so the mobile drawer would otherwise be
   empty except for the account links. This nav is inserted above them. */
.merge-home-mobile-nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px 0 8px;
}
.merge-home-mobile-nav .mhmn-products {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--gray-10);
}
.merge-home-mobile-nav .mhmn-products .mhmn-link {
  font-weight: var(--font-weight-semibold);
}
.merge-home-mobile-nav .mhmn-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 16px;
}
.merge-home-mobile-nav .mhmn-title {
  font-weight: var(--font-weight-medium);
  font-size: 12px;
  line-height: 22px;
  color: var(--gray-40);
  padding: 4px 16px;
}
.merge-home-mobile-nav .mhmn-link {
  display: block;
  font-size: 16px;
  line-height: 26px;
  color: var(--grayscale-11);
  text-decoration: none;
  padding: 5px 16px;
  border-radius: 6px;
}
.merge-home-mobile-nav .mhmn-link:hover {
  background: var(--gray-0);
}
.merge-home-mobile-nav .mhmn-link:focus-visible {
  background: var(--gray-0);
}

/* Mobile dropdown styles */
.product-dropdown-trigger .fern-selection-item-icon {
  display: none !important;
}

.fern-product-item .fern-selection-item {
  padding-top: 8px;
  padding-bottom: 8px;
}

.fern-product-item .fern-selection-item-icon {
  display: none !important;
}

.fern-product-item .fern-selection-item-title {
  font-size: 16px !important;
  line-height: 20px !important;
}


.fern-sidebar-link {
  border-radius: 0px !important;
  font-weight: var(--font-weight-normal);
}
.fern-sidebar-link svg {
  stroke: var(--gray-40) !important;
}
.fern-sidebar-link[data-state="active"] .fern-sidebar-link-title-inner {
  -webkit-text-stroke: unset;
}
[data-theme="default"]#fern-header
  [data-radix-collection-item][data-state="active"]
  > span {
  -webkit-text-stroke: unset;
}

.fern-sidebar-link[data-state="active"] {
  background: var(--gray-0);
  font-weight: var(--font-weight-medium) !important;
}

div[data-state="open"]:has(.fern-sidebar-link.nested[data-state="active"])
  > .fern-sidebar-link::before {
  display: none !important;
}

#fern-sidebar[data-viewport="desktop"] {

  & #fern-sidebar-scroll-area {

    .fern-collapsible {
      margin-left: 1.5rem !important;
    }
  
}

}

.fern-sidebar-heading-content {
  font-weight: var(--font-weight-medium);
  font-size: 12px;
  color: var(--gray-40);
  line-height: 22px;
}

/* ========================================
   UI ELEMENTS
   ======================================== */

/* ---------- Callouts ---------- */
Note,
Tip,
Warning,
Important,
Error {
  border-radius: var(--merge-radius-md);
  color: var(--grayscale-9) !important;
}

.fern-callout {
  border: 0 !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
}

.fern-callout p,
.fern-callout li {
  color: var(--grayscale-12) !important;
  font-size: 16px !important;
  line-height: 150%;
  margin: 0 !important;
}
.fern-callout ul {
  margin: 0 !important;
  padding-left: 20px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fern-callout > div {
  align-items: flex-start !important;
}
.fern-callout > div > div:first-child {
  display: none !important;
}
.fern-callout > div > div:last-child {
  margin: 0 !important;
}
.fern-callout > div > div:last-child::before,
.fern-callout > div > div:last-child::after {
  display: none !important;
}
.fern-callout > div > div:last-child > :first-child {
  color: var(--grayscale-12) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 150% !important;
}
.fern-callout > div > div:last-child > * + * {
  margin-top: 8px !important;
}
.fern-callout > div > div:last-child > :empty + * {
  margin-top: 0 !important;
}

.fern-callout[data-intent="warning"] {
  background-color: var(--yellow-0) !important;
}
.fern-callout[data-intent="note"] {
  background-color: var(--blue-0) !important;
}
.fern-callout[data-intent="info"] {
  background-color: var(--gray-0) !important;
}
.fern-callout[data-intent="tip"] {
  background-color: var(--green-0) !important;
}

.robin-note {
  background-color: var(--robin1) !important;
  border-color: var(--blue-10) !important;
}

/* ---------- Custom Aside Callouts ---------- */

/* Only apply aside offset on reference pages WITHOUT code snippets (e.g. guide-style pages) */
.fern-layout-reference-aside:not(:has(.fern-endpoint-code-snippets)) {
  margin-top: var(--merge-aside-margin-offset, -125px);
  transition: margin-top 0.15s linear;
}
.custom-aside-callouts-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 15rem;
}

@media (max-width: 1279px) {

  .fern-layout-reference-content[data-cols="2"]:has(.custom-aside-callouts-container),
  .fern-layout-reference-content[data-cols="2"]:has(.custom-aside-callout),
  .fern-layout-reference-content[data-cols="2"]:has(.key-models-fields),
  .fern-layout-reference-content[data-cols="2"]:has(.object-summary-schema-snippet) {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .fern-layout-reference-aside:has(.custom-aside-callouts-container),
  .fern-layout-reference-aside:has(.custom-aside-callout),
  .fern-layout-reference-aside:has(.key-models-fields),
  .fern-layout-reference-aside:has(.object-summary-schema-snippet) {
    margin-top: 0 !important;
  }

  /* Remove prose bottom margins so grid row-gap alone controls the spacing */
  .fern-layout-reference-content[data-cols="2"]:has(.custom-aside-callouts-container) > div,
  .fern-layout-reference-content[data-cols="2"]:has(.custom-aside-callout) > div,
  .fern-layout-reference-content[data-cols="2"]:has(.key-models-fields) > div,
  .fern-layout-reference-content[data-cols="2"]:has(.object-summary-schema-snippet) > div,
  .fern-layout-reference-content[data-cols="2"]:has(.custom-aside-callouts-container) > div > div,
  .fern-layout-reference-content[data-cols="2"]:has(.custom-aside-callout) > div > div,
  .fern-layout-reference-content[data-cols="2"]:has(.key-models-fields) > div > div,
  .fern-layout-reference-content[data-cols="2"]:has(.object-summary-schema-snippet) > div > div {
    margin-bottom: 0 !important;
  }

  .custom-aside-callouts-container {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .custom-aside-callout {
    flex: 1 1 200px;
  }

  .key-models-fields {
    width: 100%;
  }

  .object-summary-schema-snippet {
    width: 100%;
  }

}

@media (max-width: 767px) {

  /* At <768px Fern zeroes the grid gap, so restore spacing with margin-top on the aside */
  .fern-layout-reference-aside:has(.custom-aside-callouts-container),
  .fern-layout-reference-aside:has(.custom-aside-callout),
  .fern-layout-reference-aside:has(.key-models-fields),
  .fern-layout-reference-aside:has(.object-summary-schema-snippet) {
    margin-top: 48px !important;
  }

}

.custom-aside-callout {
  border-radius: 10px;
  border-width: 1px;
  padding: 20px;
}

.custom-aside-callout .header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.custom-aside-callout .header-row h5 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0;
}

.custom-aside-callout .icon-container {
  flex-shrink: 0;
}

.custom-aside-callout .icon-container svg,
.custom-aside-callout .icon-container img {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  display: block;
}

.custom-aside-callout .content {
  font-size: 14px;
  line-height: 22px;
}

.custom-aside-callout .content p {
  margin: 0 0 0.75rem 0;
}

.custom-aside-callout .links-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.custom-aside-callout .links-list .link-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.custom-aside-callout .links-list .link-label {
  font-weight: var(--font-weight-semibold);
  color: var(--grayscale-9);
  min-width: 50px;
}

.custom-aside-callout .links-list .link-row a {
  color: var(--link-color);
  text-decoration: none;
}

.custom-aside-callout .links-list .link-row a:hover {
  text-decoration: underline;
}
.custom-aside-callout .links-list .link-row a:focus-visible {
  text-decoration: underline;
}

/* ---------- Postman Callout ---------- */
.postman-callout {
  background-color: var(--yellow-0);
  border-color: var(--yellow-10);
}

.info-custom-callout {
  background-color: var(--blue-0);
  border-color: var(--blue-10);
}

.free-accounts-callout {
  background-color: var(--blue-0);
  border-color: var(--blue-10);
}

.iconless-callout .flex > div:first-child {
  display: none !important;
}

/* ---------- Links ---------- */
.fern-mdx-link {
  color: var(--link-color) !important;
}
.fern-mdx-link[target="_blank"] {
  text-decoration: none !important;
}
.external-link-icon {
  color: var(--link-color) !important;
  opacity: 1 !important;
  margin-left: calc(var(--spacing) * 1);
}

/* ---------- Tab Navigation ---------- */
div[role="tablist"] a[role="tab"] {
  color: var(--grayscale-12) !important;
  font-weight: var(--font-weight-semibold) !important;
}

/* ---------- Custom Segmented Control (Matches header/src/main.css) ---------- */

@media (min-width: 1024px) {

  .merge-product-segmented-control {
    transform: translate(2px, 0px);
    opacity: 0;
    animation: fadeInSegmentedControl 0.3s ease-in-out forwards;
  }

  .merge-product-segmented-control.no-animation {
    opacity: 1;
    animation: none;
  }

  .merge-segmented-control-container {
    display: inline-flex;
    background-color: var(--gray-10);
    border-radius: var(--merge-radius-pill);
    padding: 4px;
    gap: 4px;
    height: 36px;
  }

  .merge-segment-button {
    padding: 2px 16px;
    border-radius: var(--merge-radius-pill);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    border: none;
    background-color: transparent;
    color: var(--merge-text);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    outline: none;
    height: 28px;
    display: flex;
    align-items: center;
    text-decoration: none;
  }

  .merge-segment-button:hover {
    background-color: var(--gray-20);
  }

  .merge-segment-button.active {
    background-color: var(--merge-white);
  }

  .merge-segment-button:focus-visible {
    outline: 2px solid var(--blue-60);
    outline-offset: 2px;
  }

}

@media (min-width: 1024px) {

  .product-dropdown-trigger {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .version-dropdown-trigger {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

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

  .fern-variant-selector {

    .fern-selection-item {
      border: 1px solid var(--merge-border);
      width: 280px !important;
      margin-left: 10px;
    }
  
}

}

#radix-_r_hu_ {
  border-radius: 0.5rem !important;
}

/* ========================================
   LAYOUT
   ======================================== */

.fern-layout-footer {
  width: 100% !important;
  display: none !important;
}

@media (width >= 1280px) {

  .fern-layout-reference
    .fern-layout-reference-content:has(
      .custom-aside-callout,
      .key-models-fields
    ) {
    grid-template-columns: minmax(0, 1fr) 300px !important;
  }

}

#fern-toc {
  margin-top: 2rem;
  margin-right: 1rem;
  /* 300px (matches sidebar-width). A wider TOC (e.g. 400px) overlaps the
     side-by-side step code blocks in the ~1400-1450px range before Fern
     stacks the layout. */
  width: 300px;
}
.next-guide-container p {
  margin-bottom: 40px;
  font-size: 14px;
}
.next-guide-container h2 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.next-guide-container .eyebrow {
  font-weight: var(--font-weight-medium);
  color: var(--gray-50);
  font-size: 14px;
}

/* ========================================
   DIAGRAMS & VISUALIZATIONS
   ======================================== */

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

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

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

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

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

#mermaid-svg .actor-top,
#mermaid-svg .actor-bottom {
  rx: 1rem !important;
  ry: 1rem !important;
}

/* ========================================
   LEGACY & UTILITY
   ======================================== */

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

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

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

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* ---------- Landing page responsive ---------- */
@media (max-width: 1504px) {

  .landing-page .hero-image-container,
  .landing-page .merge-hero-image-container {
    max-width: 100%;
  }

}

@media (max-width: 1024px) {

  .landing-page .merge-header {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  .landing-body-section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .landing-page .hero-image-container,
  .landing-page .merge-hero-image-container {
    display: none !important;
  }

  .apis-grid {
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 768px) {

  .feature-card {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .feature-image {
    max-width: 100%;
    width: 100%;
  }

}

@media (max-width: 720px) {

  .guides-grid {
    grid-template-columns: 1fr;
  }

  .apis-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 640px) {

  .landing-page .merge-header {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .landing-page .merge-header h1 {
    font-size: 2.5rem !important;
  }
  .landing-page h2 {
    font-size: 2rem !important;
  }

  .landing-page .merge-header p {
    font-size: 1rem !important;
  }

  .landing-page .merge-header .max-w-4xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .landing-page .landingbody {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

}

/* ========================================
   HOME PAGE
   ======================================== */

.home-page {

  margin-inline: auto;
  padding: 4rem 3rem;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    pointer-events: none !important;
  }

}

/* ---------- Home page header ---------- */
.home-page .home-header {
  text-align: center;
  margin-bottom: 4rem;
}

.home-page .home-header h1 {
  font-size: 3.5rem;
  font-weight: var(--font-weight-bold);
  margin: 0;
  letter-spacing: -0.03em;
}

/* ---------- Home page content ---------- */
.home-page .home-content {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* ---------- Products grid ---------- */
.home-page .products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto 1fr auto auto;
  column-gap: 2rem;
  row-gap: 0;
  margin: 0 auto;
}

.home-page .product-card {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 1rem;
  border: 1px solid var(--merge-border);
  border-radius: 15px;
  padding: 2rem;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: none;
}

.home-page .product-card:hover {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  border-color: var(--gray-20);
}
.home-page .product-card:focus-visible {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  border-color: var(--gray-20);
}

.home-page .product-image-container {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  align-self: end;
  margin-top: 14px;
}

.home-page .product-image-container img {
  width: 100%;
  height: auto;
  cursor: pointer;
  display: block;
  margin: 0 !important;
}

.home-page .product-card h2 {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  margin: 0;
  letter-spacing: -0.03em;
}

.home-page .product-card h3 {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0;
  line-height: 150%;
}

.home-page .product-card p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.home-page .product-card .merge-button {
  align-self: start;
  justify-self: start;
  padding: 0.5rem 1rem !important;
  height: 2.5rem !important;
  border-radius: 6px !important;
  font-size: 0.875rem !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: 1.5rem !important;
  background-color: var(--grayscale-12) !important;
  color: var(--grayscale-1) !important;
  width: fit-content;
}

.home-page .product-card .merge-button:hover {
  background-color: var(--grayscale-8) !important;
}
.home-page .product-card .merge-button:focus-visible {
  background-color: var(--grayscale-8) !important;
}

/* ---------- Resources section ---------- */
.home-page .resources-section {
  padding-top: 60px; /*to account for border-top*/
  padding-bottom: 60px;
  border-top: 1px solid var(--merge-border);
}

.home-page .resources-section h2 {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  margin: 0 0 2.5rem 0;
  letter-spacing: -0.03em;
}

.home-page .resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.home-page .resource-card {
  border: 1px solid var(--merge-border);
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all 0.2s ease;
  box-shadow: none;
}

.home-page .resource-card:hover {
  box-shadow: var(--merge-shadow-sm);
  border-color: var(--gray-20);
}
.home-page .resource-card:focus-visible {
  box-shadow: var(--merge-shadow-sm);
  border-color: var(--gray-20);
}

.home-page .resource-card h3 {
  font-size: 1.25rem;
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.home-page .resource-card p {
  font-size: 0.875rem;
  font-weight: inherit;
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}

.home-page .resource-link {

  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-top: 1rem;

  p {
    width: fit-content;
    flex-grow: unset;
  }

}

.home-page .resource-link:hover {
  text-decoration: underline;
}
.home-page .resource-link:focus-visible {
  text-decoration: underline;
}

/* ---------- Home page responsive ---------- */
@media (max-width: 1024px) {

  .home-page {
    padding: 3rem 2rem;
  }

  .home-page .home-header h1 {
    font-size: 2.5rem;
  }

  .home-page .products-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.5rem;
    max-width: 100%;
  }

  .home-page .product-card {
    grid-row: auto;
    grid-template-rows: auto auto auto auto auto;
  }

  .home-page .resources-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

}

@media (max-width: 640px) {

  .home-page {
    padding: 2rem 1rem;
  }

  .home-page .home-header {
    margin-bottom: 3rem;
  }

  .home-page .home-header h1 {
    font-size: 2rem;
  }

  .home-page .home-content {
    gap: 3rem;
  }

  .home-page .product-card,
  .home-page .resource-card {
    padding: 1.5rem;
  }

  .home-page .resources-section h2 {
    font-size: 2rem;
  }

}
/* ---------- Step layout with side-by-side content ---------- */
/* Containment context so the step can stack based on its OWN available
   width (which already accounts for the sidebar + TOC), not the viewport.
   Scoped to steps using the side-by-side layout so plain <Steps> elsewhere
   are unaffected. */
.fern-step:has(.step-layout-container) {
  container-type: inline-size;
}

.step-layout-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.step-layout-content {
  flex: 1;
}

.step-layout-code {
  width: 500px;
  flex-shrink: 0;
}

/* Align code block with h2 and h3 headings */
.step-layout-content h2:first-child ~ *,
.step-layout-content h3:first-child ~ * {
  margin-top: 0;
}

.step-layout-content > h2:first-child,
.step-layout-content > h3:first-child {
  margin-top: 0;
}

.fern-code-group-tab[data-state="active"] {
  box-shadow: none !important;
}

/* Ensure code group header respects border radius */
.fern-code-group-header {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden;
}

.fern-api-property-key {
  font-weight: normal;
  border-radius: 3px;
  background-color: var(--gray-10);
  padding-left: 5px;
  padding-right: 5px;
}

.fern-api-property-type {
  color: var(--gray-40);
  font-weight: var(--font-weight-medium);
}
.fern-api-property-optional {
  color: var(--gray-40);
  font-weight: var(--font-weight-bold);
}
.fern-api-property-required {
  font-weight: var(--font-weight-bold);
}
.fern-explorer-auth-form > button {
  border-color: var(--red-10) !important;
}
.playground-endpoint button{
  border-radius: 0.5rem;
}
.fern-explorer-send-request-button{
  border-radius: 0.5rem;
}
.fern-explorer-api-reference-link{
  color: var(--link-color)
}
.fern-layout-reference .fern-page-heading{
  padding-bottom: 0.5rem;
}
.border-card-border {
  box-shadow: none !important;
  border: none !important;
}
.object-summary-schema-snippet .border-card-border > div:first-child {
  font-weight: 600 !important;
}
.fern-endpoint-code-snippets .border-card-border {
  border-color: transparent;
}
.fern-endpoint-response-snippet .border-card-border {
  border-color: transparent;
}
.fern-endpoint-request-snippet .border-card-border {
  border-color: transparent;
}
.fern-endpoint-request-snippet .fern-button {
  box-shadow: none !important;
}
.fern-endpoint-request-snippet a {
  background-color: lightgray !important;
  color: black !important;
}
.fern-code-header-inner {
  box-shadow: none !important;
}
.not-prose.bg-card-background:has(pre.code-block-root) {
  --card-background: #F4F4F4 !important;
}
.fern-collapsible-card {
  border-color: var(--gray-10) !important;
}
.fern-collapsible-card .fern-button-content svg {
  stroke: var(--gray-40) !important;
}
.fern-collapsible-card .fern-button-content .fern-button-text {
  color: var(--gray-40) !important;
  font-weight: var(--font-weight-bold);
}
.fern-code-group {
  box-shadow: none;
}

.fern-layout-reference-content [role="combobox"] {
  margin-bottom: -4px !important; /* offset the bottom padding from Multiple Content type options  */
  padding-bottom: 0px !important; /* Remove padding from Multiple Content type options  */
}
/* Add padding to code block when content starts with h2 or h3 */
.step-layout-container:has(.step-layout-content > h2:first-child)
  .step-layout-code {
  padding-top: 1rem;
}

.step-layout-container:has(.step-layout-content > h3:first-child)
  .step-layout-code {
  padding-top: 0.5rem;
}

/* Responsive: stack code below text when the step container is too narrow
   to fit the 500px code block plus readable prose side-by-side.
   text width = containerWidth - 500 (code) - 2rem (gap); 880px keeps the
   prose column >= ~348px before stacking. Lower this value to keep the
   side-by-side layout at narrower widths (prose gets tighter); raise it to
   stack sooner (prose gets more room). */
@container (max-width: 880px) {

  .step-layout-container {
    flex-direction: column;
    gap: 1.5rem;
  }

  .step-layout-code {
    width: 100%;
  }

}

.fern-variant-selector {

  .fern-selection-item {
    gap: 10px;
    align-items: center;
  }

  .fern-selection-item-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

}

.fern-selection-item .fern-selection-item-icon.use-icon {
  border: none !important;
  margin: 0 8px 0 8px !important;
  height: 36px;
  width: 24px;
}

.fern-selection-item .fern-selection-item-icon .fern-file-icon {
  height: 16px !important;
  width: 16px !important;
}

.fern-selection-item:hover .fern-file-icon,
.fern-selection-item:hover svg {
  scale: none;
}
.fern-selection-item:focus-within .fern-file-icon,
.fern-selection-item:focus-within svg {
  scale: none;
}
.fern-selection-item .fern-selection-item-title {
  font-weight: var(--font-weight-medium);
  font-size: 12px;
}
.fern-variant-selector .fern-selection-item > div {
  gap: 0 !important;
}
.fern-variant-selector-radio-group .fern-dropdown-item[role="menuitemradio"] {
  margin-bottom: 0;
  border-radius: 0;
  padding-right: 12px !important;
  padding-left: 4px !important;
}
.fern-variant-selector-radio-group .fern-dropdown-item[role="menuitemradio"] > div {
  gap: 0 !important;
}
.fern-variant-selector-radio-group
  .fern-dropdown-item[role="menuitemradio"]
  .lucide.lucide-check.size-icon {
  display: none;
}

/* Variant selector dropdown icon size */
.fern-variant-selector-radio-group
  .fern-dropdown-item[role="menuitemradio"]
  span {
  width: 16px !important;
  height: 16px !important;
}

.fern-variant-selector-radio-group
  .fern-dropdown-item[role="menuitemradio"]
  svg {
  width: 16px !important;
  height: 16px !important;
}

.fern-dropdown-item[role="menuitemradio"] p {
  font-weight: var(--font-weight-medium);
  font-size: 12px;
}

/* Variant Selector Styles */
.fern-variant-selector-dropdown [data-radix-scroll-area-viewport] {
  padding: 0 !important;
}

/* Override Radix's inline min-width: max-content on the popper wrapper */
[data-radix-popper-content-wrapper]:has(.fern-variant-selector-dropdown) {
  /* Center dropdown under trigger */
  margin-left: 6px !important;
}

.fern-variant-selector-dropdown {
  --radix-dropdown-menu-trigger-width: 280px !important;
  width: 280px !important;
  max-height: none !important;
}

/* Dropdown & selection item hover states */
.fern-variant-selector > fern-selection-item:hover,
.fern-selection-item[data-testid="variant-dropdown"]:hover,
.fern-dropdown-item:hover,
.fern-product-item > div.fern-selection-item:hover {
  background: var(--gray-0) !important;
}
.fern-variant-selector > fern-selection-item:focus-visible,
.fern-selection-item[data-testid="variant-dropdown"]:focus-visible,
.fern-dropdown-item:focus-visible,
.fern-product-item > div.fern-selection-item:focus-visible {
  background: var(--gray-0) !important;
}

.fern-dropdown-item:hover {
  border: none !important;
}
.fern-dropdown-item:focus-visible {
  border: none !important;
}

.fern-dropdown-item:hover * {
  color: var(--gray-90) !important;
}
.fern-dropdown-item:focus-within * {
  color: var(--gray-90) !important;
}

.fern-dropdown-item[role="menuitemradio"] > div > div {
  border: none !important;
}

.fern-variant-selector-radio-group {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media (width >= 40rem) {

  .fern-header-navbar-links .fern-button {
    height: calc(var(--spacing) * 9);
  }

}

.fern-card > div > div > div,
.fern-card > div > div > div > p {
  color: var(--grayscale-9) !important;
}

.fern-page-subtitle {
  /* to style page subtitle */
  color: var(--grayscale-9) !important;
  margin-top: 1.5rem !important;
  line-height: 150%;
}

/* main > div > article > header > .flex.flex-row.items-center.justify-between.gap-2 {
  padding-bottom: 1.5rem !important;
} */

body:has(.feature-card)
  .prose
  :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-bottom: 2.5rem !important;
  margin-top: 2.5rem !important;
}

/* The divider styling  */
.prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-bottom: 2.5rem !important;
  margin-top: 2.5rem !important;
}

body:has(.feature-card)
  .prose
  :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-bottom: 0rem !important;
}

:where(.space-y-2 > :not(:last-child)) {
  margin-block-end: 0rem !important;
}

.mb-12.space-y-12 > p:first-child {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.fern-playground-object-properties button {
  border-radius: var(--merge-radius-pill) !important;
  background-color: var(--merge-white) !important;
}
/* ========================================
   API PARAMETER FORM FIELDS
   ======================================== */

/* Match buttons to input fields in API parameter lists */
ul.list-none.space-y-8 li .fern-button.outlined.normal {
  background-color: var(--merge-white) !important;
  border: 1px var(--grayscale-5);
  text-align: left;
}

button.border-border-default.flex.h-10.w-full.shrink-0.cursor-pointer.items-center.justify-between.border-b.px-3.py-2.hover\:bg-tag-default\/50 {
  background-color: var(--grayscale-1) !important;
}

.fern-runnable-endpoint .border-border-default {
  border-color: var(--merge-border) !important;
}

/* ========================================
   LEFT ALIGN IMAGE
   ======================================== */

.left-align {
  text-align: left;
}

.left-align-img {
  display: block;
  margin-left: 0;
  margin-right: auto;
}

/* Merge Link card group */
.fern-card .card-arrow {
  color: var(--orange-9) !important;
  transition: all 0.15s ease-out;
  position: absolute;
  transform: translateX(0.75rem) !important;
}

.fern-card:hover .card-arrow {
  transform: translateX(1rem) !important;
}
.fern-card:focus-within .card-arrow {
  transform: translateX(1rem) !important;
}

.merge-link-card > div > div > div:first-child {
  font-size: 16px !important;
  font-family: FH Oscar Pro;
  letter-spacing: -0.03em;
  padding-bottom: 0.5rem;
}
.merge-link-card > div > div > div:last-child {
  color: var(--gray-50) !important;
  font-size: 14px !important;
  line-height: 150%;
}

.merge-link-card {
  padding: 1rem !important;
}

/* Table Design: Merge Link table */

.merge-link-table th:nth-child(1),
.merge-link-table td:nth-child(1) {
  width: 30%;
}

.merge-link-table th:nth-child(2),
.merge-link-table td:nth-child(2) {
  width: 10%;
}

.merge-link-table th:nth-child(3),
.merge-link-table td:nth-child(3) {
  width: 60%;
}

/* Remove outline borders, keep only bottom borders */
.fern-table table {
  border-collapse: collapse;
  border: none !important;
}

.fern-table thead tr {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

.fern-table th,
.fern-table td {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--merge-border) !important;
}

.fern-table thead th {
  background-color: var(--background) !important;
}

/* Style header text */
.fern-table th {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 24px;
  letter-spacing: 0;
  text-align: left;
  padding: 16px 16px 16px 16px;
  white-space: nowrap; /* Prevent table headers from wrapping */
}
.fern-table th:first-of-type {
  padding-left: 0 !important;
}
.fern-table td {
  padding: 16px 16px 16px 16px;
}
.fern-table td:first-of-type {
  padding-left: 0 !important;
}

.fern-table-root {
  border: none !important;
  background-color: unset !important;
}

/* End table styles  */

/* ========================================
   Key models & fields COMPONENT
   ======================================== */

.key-models-fields {
  background: var(--merge-card);
  border: 1px solid var(--merge-border);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--merge-shadow-sm);
  width: 300px;
}

.key-models-fields-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 8px;
}

.key-models-fields-header svg {
  width: 20px;
  height: 20px;
  color: var(--gray-70);
  flex-shrink: 0;
}

.key-models-fields-header h3 {
  flex: 1;
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 26px;
  letter-spacing: -0.03em;
  color: var(--gray-90);
  margin: 0;
}

.key-models-fields-section {
  margin-bottom: 16px;
}

.key-models-fields-section:last-of-type {
  margin-bottom: 0;
}

.model-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.model-title {
  flex: 1;
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  color: var(--link-color);
  text-decoration: none;
  transition: opacity 0.2s ease;
  text-transform: lowercase;
}

.model-title::first-letter {
  text-transform: uppercase;
}

.model-title:hover {
  opacity: 0.8;
}
.model-title:focus-visible {
  opacity: 0.8;
}

.method-badge {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  border-radius: 4px;
  background-color: var(--blue-0);
  color: var(--blue-70);
  line-height: 1.2;
}

.method-badge-get {
  background-color: var(--blue-0);
  color: var(--blue-70);
}

.method-badge-post {
  background-color: var(--green-0);
  color: var(--green-70);
}

.method-badge-patch,
.method-badge-put {
  background-color: var(--yellow-0);
  color: var(--yellow-70);
}

.method-badge-delete {
  background-color: var(--red-0);
  color: var(--red-70);
}

.method-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  margin-left: auto;
}

.model-fields {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.model-fields div {
  font-size: 14px;
  line-height: 24px;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0;
  color: var(--gray-50);
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  padding-left: 1rem;
}

.key-features-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  border-top: 1px solid var(--merge-border);
  margin-top: 20px;
  margin-left: -20px;
  margin-right: -20px;
}

.key-features-header svg {
  width: 20px;
  height: 20px;
  color: var(--gray-70);
}

.key-features-header h3 {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 26px;
  letter-spacing: -0.03em;
  color: var(--gray-90);
  margin: 0;
}

.feature-links {
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature-links div {
  margin: 0;
}

.feature-links ul,
.feature-links ul li {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.feature-links ul li::before {
  display: none !important;
}

.feature-links a {
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  color: var(--link-color);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.feature-links a:hover {
  opacity: 0.8;
}
.feature-links a:focus-visible {
  opacity: 0.8;
}

.key-models-fields .fern-mdx-link svg {
  display: none;
}

.key-models-fields-header h3,
.key-features-header h3 {
  pointer-events: none !important;
}

.key-models-fields-header h3 a,
.key-features-header h3 a {
  display: none !important;
  pointer-events: none !important;
}

.key-models-fields-header h3::before,
.key-features-header h3::before,
.key-models-fields-header h3::after,
.key-features-header h3::after {
  display: none !important;
}

.key-models-fields-header h3 [data-heading-hash],
.key-features-header h3 [data-heading-hash],
.key-models-fields-header h3 .heading-anchor,
.key-features-header h3 .heading-anchor {
  display: none !important;
}

/* ========================================
   FREQUENCY CALLOUT COMPONENT
   ======================================== */

.frequency-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 12px 16px;
  background: var(--gray-0);
  border-radius: var(--merge-radius-sm);
  border: 1px solid var(--merge-border);
}

.frequency-callout-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.frequency-callout-icon {
  display: none !important;
}

.frequency-callout-text {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--gray-90);
  margin: 0;
}

.frequency-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: var(--yellow-50);
  color: var(--merge-white);
  border-radius: 4px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: 0;
  flex-shrink: 0;
}

.frequency-badge svg {
  width: 12px;
  height: 12px;
  fill: var(--merge-white);
  flex-shrink: 0;
}

.frequency-badge svg path {
  fill: currentColor;
}

.frequency-badge span {
  display: inline-block;
  line-height: 1;
}

.frequency-badge p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 10px !important;
}

.frequency-badge-daily {
  background: var(--yellow-50);
}

.frequency-badge-hourly {
  background: var(--green-50);
}

.frequency-badge-highest {
  background: var(--orange-50);
}

.frequency-badge-monthly {
  background: var(--blue-50);
}

.frequency-badge-manual {
  background: var(--gray-50);
}

/* ========================================
   INDUSTRIES CALLOUT COMPONENT
   ======================================== */

.industries-callout {
  background: var(--gray-0);
  border: 1px solid var(--merge-border);
  border-radius: 10px;
  padding: 16px;
}

.industries-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.industries-header h3 {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 26px;
  letter-spacing: -0.03em;
  color: var(--gray-90);
  margin: 0;
  pointer-events: none !important;
}

.industries-header svg {
  width: 18px;
  height: 18px;
  color: var(--gray-90);
  flex-shrink: 0;
}

.industries-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.industries-list div {
  font-size: 14px;
  font-weight: var(--font-weight-normal);
  line-height: 20px;
  letter-spacing: 0;
  color: var(--gray-50);
  text-align: justify;
  margin: 0;
}

.industries-header h3 a,
.industries-header h3 [data-heading-hash],
.industries-header h3 .heading-anchor {
  display: none !important;
}

.industries-header h3::before,
.industries-header h3::after {
  display: none !important;
}

.industries-callout + h3 {
  margin-top: 40px;
}

/* ========================================
   ASIDE CARD COMPONENT
   ======================================== */

.aside-card {
  display: flex;
  gap: 0;
  background: var(--merge-card);
  border: 1px solid var(--merge-border);
  border-radius: var(--merge-radius-sm);
  padding: 0;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  overflow: hidden;
  max-height: 84px;
  margin-bottom: 8px;
}

.aside-card:last-of-type {
  margin-bottom: 0;
}

.aside-card:hover {
  box-shadow: var(--merge-shadow-md);
  border-color: var(--gray-20);
}
.aside-card:focus-visible {
  box-shadow: var(--merge-shadow-md);
  border-color: var(--gray-20);
}

.aside-card .external-link-icon {
  display: none;
}

.integration-card .external-link-icon {
  display: none;
}

.integration-widget-show-more-button {
  border-color: #e0e0e0;
}

.aside-card-image {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--gray-10);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aside-card-image-ramp {
  background: var(--ramp-background-color);
}
.aside-card-image-causal {
  background: var(--causal-background-color);
}
.aside-card-image-assembly {
  background: var(--assembly-background-color);
}
.aside-card-image-teamohana {
  background: var(--teamohana-background-color);
}
.aside-card-image-navan {
  background: var(--navan-background-color);
}
.aside-card-image-assemble {
  background: var(--assemble-background-color);
}
.aside-card-image-opal {
  background: var(--opal-background-color);
}

.aside-card-image img {
  width: 38px;
  height: 33px;
  object-fit: contain;
}

.aside-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  padding: 10px 12px 12px 12px;
}

.aside-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.aside-card-eyebrow {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  line-height: 12px;
  letter-spacing: 0;
  color: var(--gray-50);
  margin: 0;
}

.aside-card-arrow {
  width: 16px;
  height: 16px;
  color: var(--gray-40);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.aside-card:hover .aside-card-arrow {
  transform: translate(2px, -2px);
}
.aside-card:focus-within .aside-card-arrow {
  transform: translate(2px, -2px);
}

.aside-card-title {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 21px;
  letter-spacing: -0.03em;
  color: var(--gray-90);
  margin: 0;
  font-family: var(--font-fh-oscar-pro);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aside-cards-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aside-cards-section h3 {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
  color: var(--gray-90);
  margin: 0 0 8px 0;
}

/* ========================================
   RELATED USE CASES
   ======================================== */

.related-use-cases {
  margin-bottom: 32px;
  max-width: 100%;
  overflow: hidden;
}

.related-use-cases h2 {
  font-size: 40px;
  font-weight: var(--font-weight-semibold);
  line-height: 44px;
  letter-spacing: -0.03em;
  color: var(--gray-90);
  margin: 0 0 40px 0;
}

.related-use-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  max-width: 100%;
}

@media (min-width: 640px) {

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

}

@media (min-width: 900px) {

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

}

.related-use-case-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--merge-card);
  border: 1px solid var(--merge-border);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  min-width: 0;
  box-shadow: none !important;
}

.related-use-case-card:hover {
  box-shadow: var(--merge-shadow-sm) !important;
  border-color: var(--gray-20);
}
.related-use-case-card:focus-visible {
  box-shadow: var(--merge-shadow-sm) !important;
  border-color: var(--gray-20);
}

.related-use-case-card .category-badge {
  align-self: flex-end;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  background-color: var(--blue-0);
  color: var(--blue-70);
  white-space: nowrap;
}

.related-use-case-card h3 {
  font-size: 32px;
  font-weight: var(--font-weight-semibold);
  line-height: 36px;
  letter-spacing: -0.03em;
  color: var(--gray-90);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.related-use-case-card p {
  font-size: 14px;
  line-height: 21px;
  color: var(--gray-60);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ========================================
   TWO-COLUMN STEP LAYOUT
   ======================================== */

.step-two-column {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  padding: 3rem 0;
  justify-content: space-between;
}

.step-two-column-first {
  margin-top: 0 !important;
}

.step-text {
  flex: 1;
  max-width: 600px;
}

/* Override prose styles for h2 within step component */
.step-text h2 {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

.step-text h2 .step-number {
  margin-right: 0.75rem;
}

.step-visual {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}

.step-visual img {
  margin-top: 0 !important;
  width: 262px;
  height: auto;
}

.step-visual-card {
  background: var(--gray-0);
  border: 1px solid var(--merge-border);
  border-radius: var(--merge-radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.step-visual-icon {
  width: 80px;
  height: 80px;
  background: var(--merge-white);
  border: 1px solid var(--merge-border);
  border-radius: var(--merge-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-visual-icon svg,
.step-visual-icon img {
  width: 48px;
  height: 48px;
  color: var(--gray-70);
}

.step-visual-caption {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
  color: var(--gray-90);
  margin: 0;
}

@media (max-width: 1360px) {

  .step-two-column {
    flex-direction: column;
    gap: 24px;
  }

  .step-visual {
    width: 100%;
  }

  .step-visual img {
    width: 100%;
    max-width: 400px;
  }

}

body:has(.step-two-column) :where(.space-y-12 > :not(:last-child)) {
  margin-block-end: 0 !important;
}

body:has(.step-two-column) .fern-callout {
  margin-bottom: 1rem !important;
}

/* HTTP Method Badges Typography - Using global badge styles now */

/* HTTP Method Badges - Unselected State */
.fern-docs-badge[data-http-method="GET"] {
  background-color: var(--blue-0) !important;
  color: var(--blue-70) !important;
}

.fern-docs-badge[data-http-method="POST"] {
  background-color: var(--green-0) !important;
  color: var(--green-70) !important;
}

.fern-docs-badge[data-http-method="PATCH"],
.fern-docs-badge[data-http-method="PUT"] {
  background-color: var(--yellow-0) !important;
  color: var(--yellow-70) !important;
}

.fern-docs-badge[data-http-method="DELETE"] {
  background-color: var(--red-0) !important;
  color: var(--red-70) !important;
}

/* HTTP Method Badges - Selected State (active sidebar link) */
[data-state="active"] .fern-docs-badge[data-http-method="GET"] {
  background-color: var(--blue-60) !important;
  color: white !important;
}

[data-state="active"] .fern-docs-badge[data-http-method="POST"] {
  background-color: var(--green-60) !important;
  color: white !important;
}

[data-state="active"] .fern-docs-badge[data-http-method="PATCH"],
[data-state="active"] .fern-docs-badge[data-http-method="PUT"] {
  background-color: var(--yellow-70) !important;
  color: white !important;
}

[data-state="active"] .fern-docs-badge[data-http-method="DELETE"] {
  background-color: var(--red-60) !important;
  color: white !important;
}

.fern-input-right-element .fern-button.minimal.normal.square {
  background-color: unset;
}

.fern-env-switcher {
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 10px;
  padding-right: 10px;
  margin-right: 6px;

}

.iconless-card .text-body.text-base.font-semibold {
  font-size: 20px;
}

/* ========================================
   SYNC FREQUENCY TABLE COMPONENT
   ======================================== */

.sync-frequency-table {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  border: 1px solid var(--merge-border);
  border-radius: var(--merge-radius-md);
  overflow: hidden;
  box-shadow: var(--merge-shadow-md);
  background: var(--merge-white);
}

.sync-frequency-table p {
  margin-top: 0;
  margin-bottom: 0;
}

.sync-frequency-column {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--merge-border);
}

.sync-frequency-column:last-child {
  border-right: none;
}

.sync-frequency-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--merge-border);
}

.sync-frequency-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  margin: 0;
  white-space: nowrap;
}

.sync-frequency-title.highest {
  color: rgba(249, 95, 9, 1);
}

.sync-frequency-title.daily {
  color: var(--yellow-70);
}

.sync-frequency-title.monthly,
.sync-frequency-title.quarterly {
  color: rgba(44, 42, 37, 1);
}

.sync-frequency-title svg {
  width: 16px;
  height: 16px;
}

.sync-frequency-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  border-radius: 4px;
  line-height: 1;
}

.sync-frequency-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.sync-frequency-badge.automatic {
  background-color: var(--green-0);
  color: rgba(56, 98, 57, 1);
}

.sync-frequency-badge.manual {
  background-color: var(--gray-0);
  color: rgba(35, 34, 30, 1);
}

.sync-frequency-body {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-60);
  flex: 1;
}

/* Manual columns container (Monthly + Quarterly share description) */
.sync-frequency-manual-group {
  display: flex;
  flex-direction: column;
}

.sync-frequency-manual-headers {
  display: flex;
  border-bottom: 1px solid var(--merge-border);
}

.sync-frequency-manual-header {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}

.sync-frequency-manual-header:first-child {
  border-right: 1px solid var(--merge-border);
}

.sync-frequency-manual-body {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-60);
  flex: 1;
}

@media (max-width: 1024px) {

  .sync-frequency-table {
    grid-template-columns: 1fr 1fr;
  }

  .sync-frequency-column:nth-child(2) {
    border-right: none;
  }

  .sync-frequency-column:nth-child(1),
  .sync-frequency-column:nth-child(2) {
    border-bottom: 1px solid var(--merge-border);
  }

  .sync-frequency-manual-group {
    grid-column: 1 / 3;
  }

}

@media (max-width: 600px) {

  .sync-frequency-table {
    grid-template-columns: 1fr;
  }

  .sync-frequency-column {
    border-right: none !important;
    border-bottom: 1px solid var(--merge-border);
  }

  .sync-frequency-manual-group {
    grid-column: 1;
  }

  .sync-frequency-manual-headers {
    flex-direction: column;
  }

  .sync-frequency-manual-header:first-child {
    border-right: none;
    border-bottom: 1px solid var(--merge-border);
  }

}

/* ========================================
   POSTMAN SECTION LAYOUT
   ======================================== */

.postman-section {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.postman-content {
  flex: 1;
}

.postman-content h2 {
  margin-top: 0 !important;
}

.postman-aside {
  width: 490px;
  flex-shrink: 0;
}

.postman-aside-card {
  background: var(--gray-0);
  border: 1px solid var(--merge-border);
  border-radius: var(--merge-radius-md);
  padding: 20px;
}

.postman-aside-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.postman-aside-header h3 {
  font-weight: var(--font-weight-semibold);
  color: var(--gray-90);
  margin: 0;
  pointer-events: none !important;
}

.postman-aside-header a {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--link-color);
  text-decoration: none;
  white-space: nowrap;
}

.postman-aside-header a:hover {
  text-decoration: underline;
}
.postman-aside-header a:focus-visible {
  text-decoration: underline;
}

.postman-aside-card p {
  line-height: 1.5;
  color: var(--gray-60);
  margin: 0;
}

@media (max-width: 900px) {

  .postman-section {
    flex-direction: column;
  }

  .postman-aside {
    width: 100%;
  }

}

/* ---------- File Picker Demo Layout ---------- */
.file-picker-demo-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.file-picker-demo-content {
  flex: 1;
}

.file-picker-demo-image {
  flex: 1;
}

.file-picker-demo-image img {
  max-width: 100%;
  border-radius: var(--merge-radius-md);
}

@media (max-width: 768px) {

  .file-picker-demo-layout {
    flex-direction: column;
  }

}

/* ALL BADGES - Match use-cases page styling */
.fern-badge,
[class*="badge"]:not([class*="frequency-badge"]):not([data-http-method]),
article header .fern-badge:not([data-http-method]) {
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
}

/* Page-title availability badge (e.g. "Beta"). Fern centers it to the h1 line
   box, which sits a few px above the heading's visual cap-height because of the
   heading leading, so the badge reads as too high. Nudge it down to align. */
article header [data-badge-type="availability"] {
  position: relative;
  top: 4px;
}

/* HTTP Method Badges - Unified Styling */
.fern-docs-badge[data-http-method],
#fern-sidebar .fern-docs-badge[data-http-method],
.fern-sidebar-link .fern-docs-badge[data-http-method] {
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
}

/* ========================================
   CENTER ALIGN IMAGE
   ======================================== */

.center-align-img {
  display: block;
  margin: 0 auto;
  border: 1px solid #EAEAE9;
  border-radius: 12px;
}

/* ========================================
   GLOBAL PROSE SPACING FIXES
   ======================================== */

/* Tighten spacing between list items */
.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0.25em !important;
  margin-bottom: 0.25em !important;
}

/* Tighten spacing for paragraphs within list items */
.prose :where(li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0.25em !important;
  margin-bottom: 0.25em !important;
}

/* Reduce top margin for lists following paragraphs */
.prose :where(p + ul):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose :where(p + ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0.75em !important;
}

/* Reduce bottom margin for lists */
.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
}

/* Tighten paragraph spacing globally */
.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
}

/* ========================================
   404 NOT FOUND PAGE
   Scoped to .fern-main:has([id="404-background"]) to avoid any cross-page regressions.
   Text replacement is done via CSS content: on pseudo-elements (no JS).
   ======================================== */

/* Hide the warning triangle icon */
.fern-main:has([id="404-background"]) > div > svg {
  display: none;
}

/* Heading — hide Fern's default copy, inject "404 Error" via ::before */
.fern-main:has([id="404-background"]) h1 {
  font-size: 0;
}

.fern-main:has([id="404-background"]) h1::before {
  content: "404 Error";
  display: block;
  font-family: var(--font-fh-oscar-pro);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--grayscale-a12);
}

/* Hide subtitle "We've been notified so we can fix this for next time." */
.fern-main:has([id="404-background"]) h1 + p {
  display: none;
}

/* "Were you looking for one of these?" → "You could try:" via ::before */
.fern-main:has([id="404-background"]) .max-w-md > p {
  font-size: 0;
  line-height: 0;
}

.fern-main:has([id="404-background"]) .max-w-md > p::before {
  content: "You could try:";
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grayscale-a11);
}

/* Card title — larger */
.fern-main:has([id="404-background"]) > div a[href] span:first-child {
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Breadcrumb — smaller, muted */
.fern-main:has([id="404-background"]) > div a[href] span + span {
  font-size: 0.6875rem !important;
  color: var(--grayscale-a7) !important;
}

/* Increase gap between suggestion cards */
.fern-main:has([id="404-background"]) > div .max-w-md > div {
  gap: 0.75rem !important;
}

/* Individual suggestion links — Merge outline card style */
.fern-main:has([id="404-background"]) > div a[href] {
  background-color: white !important;
  border: 1px solid #EAEAE9 !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  text-decoration: none !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.fern-main:has([id="404-background"]) > div a[href]:hover {
  box-shadow: 0px 0px 0px 0.5px rgba(220, 226, 234, 0.2), 0px 3px 12px -3px rgba(0, 0, 0, 0.12) !important;
  border-color: var(--gray-20, #D5D4D3) !important;
  background-color: white !important;
}
.fern-main:has([id="404-background"]) > div a[href]:focus-visible {
  box-shadow: 0px 0px 0px 0.5px rgba(220, 226, 234, 0.2), 0px 3px 12px -3px rgba(0, 0, 0, 0.12) !important;
  border-color: var(--gray-20, #D5D4D3) !important;
  background-color: white !important;
}


/* ===== MDX Component Styles ===== */

/* Force header heights for consistency */
.header-32px-force {
  height: 32px !important;
  max-height: 32px !important;
  min-height: 32px !important;
  line-height: 32px !important;
}

.header-32px-force * {
  max-height: 32px !important;
}

.header-row-32px-force {
  height: 32px !important;
  max-height: 32px !important;
}

/* Top divider */
.supported-fields-top-divider {
  border-top: 0.5px solid var(--gray-10);
  margin: 0;
  padding: 0;
}

/* MDX table container */
.mdx-table-container {
  width: 100%;
  margin-top: 0.5rem;
}

/* MDX filters wrapper */
.mdx-filters-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: flex-end;
  overflow: visible !important;
}

.mdx-filters-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: relative;
  z-index: 100;
  overflow: visible !important;
  flex: 1 1 auto;
}

/* Above 1340px: everything on one row */
@media (min-width: 1341px) {

  .mdx-filters-group {
    gap: 1rem;
    flex-wrap: nowrap;
    align-items: flex-end;
  }
  
  .mdx-filters-group .export-button-container {
    margin-left: auto;
  }

}

/* Between 1100px and 1340px: feature selector on its own row */
@media (min-width: 1100px) and (max-width: 1340px) {

  .mdx-filters-group {
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  
  .mdx-filters-group .mdx-feature-selector-wrapper {
    flex: 1 1 100%;
    width: 100%;
    order: -1;
  }
  
  .mdx-filters-group .export-button-container {
    margin-left: auto;
  }

}

/* Export button gets margin-top at 1068px */
@media (max-width: 1099px) {

  .mdx-filters-group .export-button-container {
    margin-top: 17.5px;
  }

}

/* Cards stack vertically on mobile */
.mdx-feature-cards-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {

  .mdx-feature-cards-group {
    flex-direction: row;
  }

}

.mdx-filter-title {
  font-weight: var(--font-weight-semibold);
  color: var(--gray-60);
  font-size: 0.875rem;
}

/* Feature selector wrapper - label on top, buttons below */
.mdx-feature-selector-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.mdx-feature-selector-wrapper .mdx-filter-title {
  margin-bottom: 0.5rem;
}

/* Export button container */
.export-button-container {
  flex: 0 0 auto;
  align-self: flex-end;
}

.export-button-container .fern-button {
  height: 40px;
  white-space: nowrap;
  min-width: max-content;
}

.export-button-icon {
  margin-right: 4px;
  height: 12px;
}

/* Table scroll container - scrollable area with sticky headers inside */
.mdx-table-scroll {
  overflow: auto;
  width: 100%;
  max-width: 100%;
  max-height: 80vh;
  border: 1px solid var(--merge-border);
  border-radius: 0.5rem;
  
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.mdx-table-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Table base styles */
.mdx-supported-fields-table {
  width: auto;  
  min-width: fit-content;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--merge-card);
  margin-top: 0rem;
  margin-bottom: 0rem;
}

/* Table header - sticky within scroll container */
.mdx-table-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--merge-card);
}

/* Header row */
.mdx-header-row {
  height: 32px;
  max-height: 32px;
  min-height: 32px;
  background-color: var(--merge-card);
}


/* Merge column header */
.mdx-merge-header {
  width: 180px;
  min-width: 180px;
  height: 32px;
  padding: 3px 12px;
  display: table-cell;
  vertical-align: middle;
  box-sizing: border-box;
  position: sticky;
  left: 0;
  background-color: var(--merge-card);
  text-align: left;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.025em;
  z-index: 22;
  border-right: 1px solid var(--merge-border);
}

.mdx-merge-header-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.mdx-merge-logo {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.mdx-merge-text {
  font-weight: var(--font-weight-semibold);
  font-size: 14px;
  color: var(--grayscale-12);
  font-weight: semibold;
  letter-spacing: 0;
}

/* Integration column headers */
.mdx-integration-header {
  width: 164px;
  min-width: 164px;
  height: 24px;
  padding: 3px 12px;
  display: table-cell;
  vertical-align: middle;
  box-sizing: border-box;
  border-left: 1px solid var(--merge-border);
  color: var(--grayscale-12);
  background-color: var(--merge-card);
  text-align: center;
  font-size: 0.75rem;
  font-weight: semibold;
  letter-spacing: 0;
}

.mdx-integration-header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.mdx-integration-logo {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  object-fit: cover;
  flex-shrink: 0;
}

.mdx-integration-logo-fallback {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: semibold;
  background-color: var(--merge-border);
  color: var(--grayscale-1);
}

.mdx-integration-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: semibold;
  color: var(--grayscale-12);
}

/* Model separator rows - sticky below header */
.mdx-model-separator {
  position: sticky;
  top: 32px;
  z-index: 10;
}

.mdx-model-separator-cell {
  height: 40px;
  padding: 8px 12px;
  color: var(--grayscale-12);
  border-top: 1px solid var(--merge-border);
  border-bottom: 1px solid var(--merge-border);
  background-color: var(--merge-border);
  text-align: left;
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
}

/* Sticky first cell in model separator */
.mdx-model-separator-cell-sticky {
  position: sticky;
  left: 0;
  z-index: 11;
  width: 180px;
  min-width: 180px;
  border-right: 1px solid var(--merge-border);
}

/* Filler cells for model separator row */
.mdx-model-separator-cell-filler {
  width: 164px;
  min-width: 164px;
  border-left: 1px solid var(--merge-border);
}

/* Field rows */
.mdx-field-row {
  border-top: 1px solid var(--merge-border);
  height: 36px !important;
}

.mdx-field-row:hover,
.mdx-field-row:hover .mdx-field-name-cell {
  background-color: var(--gray-0);
}
.mdx-field-row:focus-visible,
.mdx-field-row:focus-within .mdx-field-name-cell {
  background-color: var(--gray-0);
}

/* Field name cells */
.mdx-field-name-cell {
  position: sticky;
  left: 0;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  padding: 8px 12px;
  background-color: var(--merge-card);
  color: var(--grayscale-12);
  width: 180px;
  min-width: 180px;
  z-index: 5;
  border-right: 1px solid var(--merge-border);
}

.mdx-field-name-cell-last {
  border-bottom-left-radius: 0.5rem;
  border-bottom: none;
}

.mdx-field-name-cell-normal {
  border-bottom: 1px solid var(--merge-border);
}

/* Integration support cells */
.mdx-support-cell {
  padding: 4px 8px;
  border-left: 1px solid var(--merge-border);
  text-align: center;
}

.mdx-support-cell-last {
  border-bottom-right-radius: 0.5rem;
  border-bottom: none;
}

.mdx-support-cell-normal {
  border-bottom: 1px solid var(--merge-border);
}

/* Last visible column - add right border */
.mdx-last-visible-col {
  border-right: 1px solid var(--merge-border);
}

.mdx-support-cell-content {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
}

/* Operation Tag Styles */
.operation-tag {
  display: inline-block;
  padding: 0.25rem 0.375rem;
  font-size: 10px;
  line-height: 12px;
  min-width: 32px;
  border-radius: 4px;
  font-weight: 600 !important;
  text-align: center;
}

.operation-tag-get {
  background-color: var(--blue-0);
  color: var(--blue-70);
}

.operation-tag-post {
  background-color: var(--green-0);
  color: var(--green-70);
}

.operation-tag-patch {
  background-color: var(--yellow-0);
  color: var(--yellow-70);
}

.operation-tag-delete {
  background-color: var(--red-0);
  color: var(--red-70);
}

.operation-tag-default {
  background-color: var(--gray-0);
  color: var(--gray-70);
}

/* ===== End MDX Component Styles ===== */

/* Common Model Label */
.common-model-label {
  writing-mode: vertical-rl;
  box-shadow: 0px -1px 0px var(--merge-border);
}

/* Table Cell - Base */
.table-cell {
  box-shadow: 1px 0px 0px #eaeef3, 0px 1px 0px #eaeef3;
}

/* Table Cell - Last cell but not last model */
.table-cell--last-cell:not(.table-cell--last-model) {
  box-shadow: 1px 0px 0px #eaeef3, 0px 1px 0px #C8CFDA;
}

/* Table Cell - Last cell and last model */
.table-cell--last-cell.table-cell--last-model {
  box-shadow: 1px 0px 0px #eaeef3, 0px 1px 0px #eaeef3;
  border-bottom-right-radius: 8px;
}

/* Column Header for integrations */
.integration-column-header {
  box-shadow: 1px 0px 0px #eaeef3, 0px 1px 0px #eaeef3;
}

/* Row Cell for integration support indicators */
.integration-support-row-cell {
  box-shadow: 1px 0px 0px #eaeef3, 0px 1px 0px #eaeef3;
}

.integration-support-row-cell--last-row {
  box-shadow: 1px 0px 0px #eaeef3, 0px 1px 0px #C8CFDA;
}

/* Dropdown Indicator Fade (for MultiSelectSearchBar) */
.dropdown-indicator-fade {
  background: linear-gradient(
    0deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.6) 60%,
    #fff 100%
  ) !important;
}

/* Custom Option Styles for react-select */
.custom-option-selected {
  background-color: var(--gray-0);
}

.custom-option-default {
  background-color: inherit;
}

/* React Select Custom Styles */
.supported-fields-select .react-select__indicator-separator {
  display: none;
}

.supported-fields-select .react-select__value-container {
  text-overflow: ellipsis;
  max-width: 95%;
  white-space: nowrap;
  min-width: 0px;
  overflow: hidden;
  flex-wrap: nowrap;
  max-height: 36px;
}

.supported-fields-select .react-select__control {
  box-shadow: 0px 0px 0px 0.5px rgba(220, 226, 234, 0.2), 0px 3px 12px -3px rgba(0, 0, 0, 0.12) !important;
  border: none !important;
  border-radius: 6px !important;
  max-height: 36px !important;
  min-height: 36px !important;
}

.supported-fields-select .react-select__control:hover {
  cursor: pointer;
}
.supported-fields-select .react-select__control:focus-visible {
  cursor: pointer;
}

/* React Select Menu - ensure it appears on top of table */
.supported-fields-select .react-select__menu-portal {
  z-index: 1000 !important;
}

.supported-fields-select .react-select__menu {
  z-index: 1000 !important;
}

/* Global react-select menu override */
[class*="react-select__menu"] {
  z-index: 1000 !important;
}

/* MultiValueContainer - hide when searching */
.multi-value-hidden {
  display: none;
}

/* Custom Option Styles */
.custom-option {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.custom-option:hover {
  background-color: var(--gray-0, #f9fafb);
}
.custom-option:focus-visible {
  background-color: var(--gray-0, #f9fafb);
}

.custom-option-normal {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.custom-option-select-all {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--merge-border, #e5e7eb);
}

.custom-option-checkbox {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  cursor: pointer;
}

.custom-option-label {
  font-size: 1rem;
  color: black;
}

/* SuggestedSearch Component Styles */
.suggested-search-container {
  width: 100%;
  overflow: visible !important;
}

.suggested-search-container .relative {
  position: relative;
  z-index: 10000;
  overflow: visible !important;
}

.suggested-search-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

.dark .suggested-search-label,
[class*="dark"] .suggested-search-label {
  color: #d1d5db;
}

/* Selector Container */
.selector-container {
  background-color: white;
  padding-left: 12px;
  padding-right: 12px;
  cursor: pointer;
  overflow: visible;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  border-radius: 6px;
  border: 1px solid var(--gray-10, #EAEAE9);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.selector-clear-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.5rem;
  padding: 0;
  background: none !important;
  border: none;
  cursor: pointer;
}

.selector-clear-button svg {
  width: 0.75rem;
  height: 0.75rem;
  stroke: #9ca3af;
  stroke-width: 2.5;
  transition: stroke 200ms;
}

.selector-clear-button:hover svg {
  stroke: #374151;
}
.selector-clear-button:focus-within svg {
  stroke: #374151;
}

.dark .selector-container,
[class*="dark"] .selector-container {
  background-color: #161617 !important;
}

.dark .selector-container input,
[class*="dark"] .selector-container input {
  background-color: transparent !important;
}

.dark .selector-container > div,
[class*="dark"] .selector-container > div {
  background-color: transparent !important;
}

.dark .selector-container .flex.flex-nowrap,
[class*="dark"] .selector-container .flex.flex-nowrap {
  background-color: transparent !important;
}

.selector-inner {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}

.selector-input-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
}

.selector-input {
  outline: none;
  flex: 1;
  background-color: transparent;
  color: var(--merge-text, #111827);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  max-width: calc(100% - 28px);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 0.5rem;
}

.selector-input::placeholder {
  color: var(--gray-40, #777674);
}

.dark .selector-input,
html.dark .selector-input,
body.dark .selector-input,
[class*="dark"] .selector-input {
  color: #f3f4f6;
}

.dark .selector-input::placeholder,
html.dark .selector-input::placeholder,
body.dark .selector-input::placeholder,
[class*="dark"] .selector-input::placeholder {
  color: #9ca3af;
}

.selector-chevron {
  flex-shrink: 0;
  margin-left: 0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  transition: all 200ms;
}

.selector-chevron-open {
  stroke: #374151;
}

.selector-chevron-closed {
  stroke: #9ca3af;
}

/* Dropdown */
.selector-dropdown {
  position: absolute;
  width: calc(100% - 2px);
  margin-top: 0.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding-block: 0.5rem;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  max-height: 258px;
  height: auto !important;
  min-height: auto !important;
  z-index: 9999 !important;
  left: 0;
  right: 0;
  padding: 0rem;
}

.selector-dropdown-scroll {
  overflow-y: scroll;
}

.selector-dropdown-no-scroll {
  overflow-y: hidden;
}

/* Dropdown Options */
.dropdown-option {
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: colors 150ms;
  outline: none;
  background-color: transparent;
  box-shadow: none;
  color: var(--merge-text, #111827);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.dark .dropdown-option,
[class*="dark"] .dropdown-option {
  color: #f3f4f6;
}

.dropdown-option:hover {
  background-color: var(--gray-0);
}
.dropdown-option:focus-visible {
  background-color: var(--gray-0);
}

.dark .dropdown-option:hover,
[class*="dark"] .dropdown-option:hover {
  background-color: #2a2a2b !important;
}
.dark .dropdown-option:focus-visible,
[class*="dark"] .dropdown-option:focus-visible {
  background-color: #2a2a2b !important;
}

.dropdown-option.selected {
  background-color: var(--gray0);
  color: var(--gray90);
}

.dark .dropdown-option.selected,
[class*="dark"] .dropdown-option.selected {
  background-color: #3a3a3b !important;
  color: #93c5fd;
}

.dropdown-option-content {
  display: flex;
  align-items: center;
}

.dropdown-option-checkbox-wrapper {
  margin-right: 1rem;
  display: flex;
  align-items: center;
  width: 1.5rem;
}

.dropdown-option-checkbox {
  width: 1rem;
  height: 1rem;
  border: 1px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  box-shadow: none;
  border-radius: 4px;
  background-color: white;
}

.dropdown-option .checkbox-selected {
  background-color: black !important;
  border-color: black !important;
}

.dropdown-option .checkbox-selected svg {
  color: white !important;
  width: 0.75rem;
  height: 0.75rem;
}

.dark .dropdown-option .checkbox-selected,
[class*="dark"] .dropdown-option .checkbox-selected {
  background-color: white !important;
  border-color: white !important;
}

.dark .dropdown-option .checkbox-selected svg,
[class*="dark"] .dropdown-option .checkbox-selected svg {
  color: black !important;
}

.dropdown-option-label {
  font-weight: 400;
  color: #111827;
}

.dark .dropdown-option-label,
[class*="dark"] .dropdown-option-label {
  color: #f3f4f6;
}

.dropdown-no-results {
  padding: 0.5rem 0.75rem;
  color: #6b7280;
}

.dark .dropdown-no-results,
[class*="dark"] .dropdown-no-results {
  color: #9ca3af;
}

/* Utility Classes */
.supported-fields-table-container {
  width: 100%;
  margin-top: 2.25rem;
  overflow: visible !important;
}

.supported-fields-filters-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem 0;
  margin-bottom: 18rem;
  overflow: visible !important;
}

@media (min-width: 768px) {

  .supported-fields-filters-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.5rem;
    row-gap: 0;
    margin-bottom: 18rem;
  }

}

.supported-fields-export-container {
  display: flex;
  justify-content: flex-end;
}

.supported-fields-table-wrapper {
  display: flex;
  margin: 1.5rem 0;
}

.supported-fields-merge-cell {
  background-color: white;
  height: 2.25rem;
  font-weight: 600;
  color: var(--grayscale-90, #1a1a1a);
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  margin-left: 2.25rem;
  margin-bottom: 0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.supported-fields-merge-logo {
  margin-right: 0.5rem;
}

.supported-fields-model-container {
  display: flex;
  background-color: white;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  box-shadow: 0 6px 30px -2px rgba(0, 0, 0, 0.12);
}

.supported-fields-model-label {
  display: flex;
  justify-content: flex-end;
  text-overflow: ellipsis;
  padding: 0.75rem 0.5rem;
  transform: rotate(180deg);
  width: 2.5rem;
  text-align: right;
  font-weight: 600;
  border-left: 1px solid var(--grayscale-10, #f1f3f4);
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.supported-fields-model-fields {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.supported-fields-field-cell {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  height: 2.25rem;
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-family: monospace;
  font-size: 13px;
  line-height: 24px;
  font-weight: 400;
  color: var(--slate-90, #1e293b);
}

.supported-fields-integrations-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.08);
}

.supported-fields-integrations-inner {
  display: flex;
  flex-direction: column;
}

.supported-fields-integrations-headers {
  display: flex;
}

.supported-fields-integration-header {
  width: 164px;
  height: 2.25rem;
  padding: 0.5rem 0.75rem 0.5rem 1.5rem;
  display: flex;
  font-weight: 600;
  color: var(--grayscale-90, #1a1a1a);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.supported-fields-integration-logo {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 0.25rem;
  vertical-align: middle;
  max-width: 100%;
}

.supported-fields-integration-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.supported-fields-support-cell {
  padding: 0.5rem 0.75rem;
  height: 2.25rem;
  width: 164px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.supported-fields-check-icon {
  border-radius: 9999px;
  height: 1rem;
  width: 1rem;
  background-color: var(--teal-50, #14b8a6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.supported-fields-check-icon svg {
  color: white;
}

/* Search Bar Styles */
.supported-fields-search-title {
  font-size: 0.875rem;
  color: var(--slate-90, #1e293b);
  font-weight: 600;
  margin-bottom: 0.5rem;
}


body:has(.supported-fields-page) .prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)) {
  margin-top: 0em;
}

/* Card and table links */
.mdx-card-link {
  color: var(--link-color);
  text-decoration: none;
}

.mdx-card-link:hover {
  text-decoration: underline;
}
.mdx-card-link:focus-visible {
  text-decoration: underline;
}

/* Features Table - Header with bottom border */
.mdx-table-container .mdx-header-row .mdx-merge-header,
.mdx-table-container .mdx-header-row .mdx-integration-header {
  border-bottom: 1px solid var(--merge-border);
}
/* Sync Frequency Table Styles */

/* Container */
.sync-freq-container {
  width: 100%;
  margin-top: 0.5rem;
}

/* Card styles */
.sync-freq-container .card {
  background-color: var(--merge-card);
  border: none;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sync-freq-container .table-responsive {
  overflow-x: auto;
  width: 100%;
}

/* Table base styles */
.sync-freq-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.875rem;
  color: var(--grayscale-11, #1C1B17);
}

/* Remove default Bootstrap table border */
.sync-freq-table tbody {
  border: none;
}

.sync-freq-table tbody tr:first-child .sync-freq-cell {
  border-top: none;
}

/* Header row */
.sync-freq-header-row {
  background-color: transparent;
  border-bottom: none;
}

.sync-freq-header-cell {
  padding: 0.75rem 1.5rem;
  text-align: left;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--grayscale-11, #1C1B17);
  border-bottom: none;
  white-space: nowrap;
  background-color: var(--merge-card);
}

/* Data cells */
.sync-freq-cell {
  padding: 1rem 1.5rem;
  text-align: left;
  font-size: 0.875rem;
  color: var(--grayscale-11, #1C1B17);
  border-bottom: none;
  background-color: var(--merge-card);
  transition: background-color 0.15s ease;
  line-height: 1.5;
}

/* Model column (first column) - bold */
.sync-freq-model-cell {
  font-weight: 500;
}

/* Hover effect */
.sync-freq-table tbody tr:hover .sync-freq-cell {
  background-color: var(--grayscale-2);
}
.sync-freq-table tbody tr:focus-within .sync-freq-cell {
  background-color: var(--grayscale-2);
}

body:has(.sync-freq-container) .prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)) {
  border-bottom-width: 0px !important;
}

/* API Endpoints Component Styles */

/* Container */
.api-endpoints-container {
  width: 100%;
  margin-top: 1rem;
}

/* Title */
.api-endpoints-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--grayscale-12, #0E0D0C);
  margin-bottom: 0.75rem;
}

/* Divider */
.api-endpoints-divider {
  border: none;
  border-top: 1px solid var(--grayscale-5, #D5D4D3);
  margin: 1rem 0 1.5rem 0;
}

/* Endpoint Section */
.endpoint-section {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  align-items: flex-start;
  border-bottom: 0.5px solid var(--grayscale-5, #D5D4D3);
}

.endpoint-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Endpoint Path Container */
.endpoint-path-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  min-width: 200px;
}

.endpoint-path {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--grayscale-11, #1C1B17);
  font-family: 'Courier New', monospace;
}

/* HTTP Method Badge */
.http-method-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.http-badge-get {
  color: var(--blue-60, #1771BB);
  background-color: var(--blue-0, #EBF7FC);
}

.http-badge-post {
  color: var(--green-60, #407345);
  background-color: var(--green-0, #EDF5EA);
}

.http-badge-put {
  color: var(--purple-60, #725B91);
  background-color: var(--purple-0, #F4EFF4);
}

.http-badge-patch {
  color: var(--orange-60, #F05F09);
  background-color: var(--orange-0, #FFF7ED);
}

.http-badge-delete {
  color: var(--red-60, #A53830);
  background-color: var(--red-0, #F8E8E6);
}

.http-badge-default {
  color: var(--grayscale-11, #1C1B17);
  background-color: var(--grayscale-3, #F4F4F4);
}

/* Endpoint Card */
.endpoint-card {
  width: 540px;
  background-color: var(--merge-card, #ffffff);
  border: none;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.endpoint-card-header {
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grayscale-10, #23221E);
  background-color: var(--merge-card, #ffffff);
  border-bottom: 1px solid var(--grayscale-4, #EAEAE9);
}

/* Model Accordion */
.model-accordion {
  border-bottom: 1px solid var(--grayscale-4, #EAEAE9);
}

.model-accordion:last-child {
  border-bottom: none;
}

/* Accordion Header */
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
  user-select: none;
}

.accordion-header:hover {
  background-color: var(--grayscale-2, #F8F8F8);
}
.accordion-header:focus-visible {
  background-color: var(--grayscale-2, #F8F8F8);
}

.accordion-title {
  font-size: 1rem;
  font-weight: 400;
  color: var(--grayscale-11, #1C1B17);
  flex: 1;
}

/* Chevron Icon */
.accordion-chevron {
  color: var(--grayscale-7, #777674);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.accordion-chevron.open {
  transform: rotate(90deg);
}

/* Accordion Content */
.accordion-content {
  padding: 0 1.5rem 1rem 1.5rem;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.accordion-subtitle {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--grayscale-8, #565351);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.accordion-content hr {
  border: none;
  border-top: 1px solid var(--grayscale-4, #EAEAE9);
  margin: 0.5rem 0;
}

/* Field Row */
.field-row {
  padding: 0.5rem 0;
}

.field-info {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.field-name {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875rem;
  color: var(--grayscale-11, #1C1B17);
  background-color: var(--grayscale-2, #F8F8F8);
  padding: 0.125rem 0.25rem;
  border-radius: 3px;
}

.field-type {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grayscale-7, #777674);
}

/* Use Case Filter Styles */

.use-cases-filter {
  width: 100%;
}

/* Filter Controls - Matching SuggestedSearch Styling */
.filter-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
  overflow: visible;
}

@media (min-width: 1205px) {

  .filter-controls {
    flex-direction: row;
    gap: 1rem;
  }

}

/* Dropdown styling handled by SuggestedSearch component */
/* See supported-fields-table.css for dropdown styles */

/* Featured Section - Gray Background */
.featured-section {
  margin-bottom: 4rem;
}

.note-callout {
  background-color: var(--gray-0);
  border: 1px solid var(--merge-border);
  border-radius: var(--merge-radius-md);
  padding: 1.5rem;
}

.note-callout h2 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--grayscale-9);
}

.note-callout p {
  margin: 0 0 24px 0;
  color: var(--grayscale-9);
}

.note-callout .fern-button,
.note-callout a.fern-button {
  margin-top: 0 !important;
}

/* Explore Section */
.explore-section h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--grayscale-9);
}

/* Card Grid - Matching Landing Categories Grid */
.card-group {
  display: grid;
  gap: 20px;
}

.card-group.cols-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {

  .card-group.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (min-width: 1024px) {

  .card-group.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

}

/* Card Styles - Matching unified-api-home.mdx Cards */
.card {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  background: var(--merge-card);
  border: 1px solid var(--merge-border);
  border-radius: var(--merge-radius-sm);
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: none;
}

.card:hover {
  border-color: var(--gray-20);
  box-shadow: var(--merge-shadow-sm);
}
.card:focus-visible {
  border-color: var(--gray-20);
  box-shadow: var(--merge-shadow-sm);
}

.card h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: var(--grayscale-9);
  padding-right: 4rem; /* Space for category badge */
}

.card p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.125rem;
  color: var(--grayscale-8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Category Badge */
.category-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.25rem 0.5rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* Category Badge Colors - All Blue */
.category-badge-ats,
.category-badge-hris,
.category-badge-tckt,
.category-badge-crm,
.category-badge-acct,
.category-badge-file {
  background-color: var(--blue-0);
  color: var(--blue-70);
}


/* Responsive Adjustments */
@media (max-width: 640px) {

  .filter-controls {
    gap: 0.75rem;
  }

  .featured-section {
    margin-bottom: 3rem;
  }

  .card h3 {
    padding-right: 3.5rem;
  }

  .category-badge {
    font-size: 0.625rem;
    padding: 0.2rem 0.4rem;
  }

}

/* Related Use Cases Section */
.related-use-cases {
  margin-top: 2rem;
}

.related-use-cases h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--grayscale-9);
}

.related-use-cases-grid {
  display: grid;
  gap: 40px 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {

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

}

@media (min-width: 1024px) {

  .related-use-cases-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

.related-use-case-card {
  display: block;
  position: relative;
  width: 100%;
  padding: 16px 12px;
  background: var(--merge-card);
  border: 1px solid var(--merge-border);
  border-radius: var(--merge-radius-sm);
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: none;
}

.related-use-case-card:hover {
  border-color: var(--gray-20);
  box-shadow: var(--merge-shadow-sm);
}
.related-use-case-card:focus-visible {
  border-color: var(--gray-20);
  box-shadow: var(--merge-shadow-sm);
}

.related-use-case-card h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.625;
  color: var(--grayscale-9);
  padding-right: 4rem;
}

.related-use-case-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--grayscale-8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {

  .related-use-case-card h3 {
    padding-right: 3.5rem;
  }

}

.use-case-badge-ats::after,
.use-case-badge-hris::after,
.use-case-badge-crm::after,
.use-case-badge-tckt::after,
.use-case-badge-acct::after,
.use-case-badge-file::after {
  display: inline-block;
  padding: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  background-color: var(--blue-0);
  color: var(--blue-70);
  white-space: nowrap;
  vertical-align: middle;
}

.use-case-badge-ats::after {
  content: "ATS";
}

.use-case-badge-hris::after {
  content: "HRIS";
}

.use-case-badge-crm::after {
  content: "CRM";
}

.use-case-badge-tckt::after {
  content: "TCKT";
}

.use-case-badge-acct::after {
  content: "ACCT";
}

.use-case-badge-file::after {
  content: "FILE";
}

@media (max-width: 768px) {

  .use-case-badge-ats::after,
  .use-case-badge-hris::after,
  .use-case-badge-crm::after,
  .use-case-badge-tckt::after,
  .use-case-badge-acct::after,
  .use-case-badge-file::after {
    position: static;
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.625rem;
  }

}

.no-results-container {
  background-color: var(--gray-0);
  border-radius: var(--merge-radius-md);
  padding: 1.5rem;
}

.no-results-container > p {
  margin: 0 0 1rem 0;
  color: var(--grayscale-9);
}

.no-results-container > p strong {
  font-weight: 600;
}

.request-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.request-form .form-label {
  margin: 0.5rem 0 0 0;
  font-weight: 400;
  color: var(--grayscale-9);
}

.request-input,
.request-textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--merge-text);
  background: white;
  border: 1px solid var(--gray-10, #EAEAE9);
  border-radius: 6px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  outline: none;
  transition: border-color 150ms;
}

.request-input::placeholder,
.request-textarea::placeholder {
  color: var(--gray-40, #777674);
}

.request-input:focus,
.request-textarea:focus {
  border-color: var(--gray-20);
}

.request-textarea {
  resize: vertical;
  min-height: 80px;
}

.request-submit {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: white;
  background: var(--gray-60);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 150ms;
}

.request-submit:hover {
  background: var(--gray-70);
}
.request-submit:focus-visible {
  background: var(--gray-70);
}

/* Make all "Get a demo" buttons match nav bar button styling */
.fern-button.filled.normal {
  padding: 0.5rem 1rem !important;
  height: 2.5rem !important;
  border-radius: 6px !important;
  font-size: 0.875rem !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: 1.5rem !important;
}

/* Hover states */
[data-merge-footer] [data-footer-nav-columns] a:hover {
  color: var(--merge-text-muted) !important;
}
[data-merge-footer] [data-footer-nav-columns] a:focus-visible {
  color: var(--merge-text-muted) !important;
}

[data-merge-footer] [data-footer-bottom] a:hover {
  color: var(--merge-text) !important;
}
[data-merge-footer] [data-footer-bottom] a:focus-visible {
  color: var(--merge-text) !important;
}

/* Responsive */
@media (max-width: 768px) {

  [data-merge-footer] footer {
    padding: 1rem !important;
  }

  [data-merge-footer] [data-footer-nav-columns] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    padding: 0 1rem 2rem !important;
  }

  [data-merge-footer] [data-footer-logo-section] {
    padding: 0 1rem !important;
  }

  [data-merge-footer] [data-footer-bottom] {
    padding: 1rem 1rem 0 !important;
    gap: 1rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  [data-merge-footer] [data-footer-bottom-left] {
    gap: 1rem !important;
  }

}

@media (max-width: 480px) {

  [data-merge-footer] [data-footer-nav-columns] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

}
/* ===========================================================================
   Models Explorer + Detail
   Pegged to merge-gateway-control-frontend's design tokens (literal FE hex
   values, not docs grayscale variables) so the docs match the in-product
   experience exactly. Anchors to the FE: src/components/models/*,
   @merge-api/merge-javascript-shared atoms/Card, molecules/Chips,
   atoms/TextField, typography/TextBase.
   =========================================================================== */

:root {
  --m-gray-0:  #F4F4F4;
  --m-gray-10: #EAEAE9;
  --m-gray-20: #D5D4D3;
  --m-gray-30: #ABAAA8;
  --m-gray-40: #777674;
  --m-gray-50: #565551;
  --m-gray-60: #2C2A25;
  --m-gray-70: #23221E;
  --m-gray-80: #12110F;
  --m-gray-90: #0E0D0C;
  /* FE green scale, for the promo badge (Badge color="green" resolves to
     bg-green-0 / text-green-70). */
  --m-green-0:  #EDF5EA;
  --m-green-60: #407345;
  --m-green-70: #386239;
  --m-white:   #ffffff;
  --m-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --m-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
}

/* --- Card (FE atoms/Card, md=rounded-lg, shadow variant) ----------------- */

.m-card {
  background: var(--m-white);
  border-radius: 0.5rem;          /* rounded-lg */
  box-shadow: var(--m-shadow-md); /* shadow-md */
}
.m-card--flat { box-shadow: none; border: 1px solid var(--m-gray-10); }
.m-card--p0   { padding: 0; overflow: hidden; }
.m-card--p5   { padding: 1.25rem; }    /* p-5 */

/* --- Explorer ------------------------------------------------------------ */

.models-explorer {
  width: 100%;
  background: var(--m-white);
  border-radius: 0.5rem;
  box-shadow: var(--m-shadow-md);
  overflow: hidden;
}

.models-explorer__filters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                   /* gap-3 */
  padding: 0.75rem;               /* p-3 */
  border-bottom: 1px solid var(--m-gray-10);
}
@media (min-width: 1024px) {

  .models-explorer__filters {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

}

/* FE TextField bordered variant: border border-gray-20 rounded-md focus ring */
.models-explorer__search {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--m-gray-20);
  border-radius: 0.375rem;        /* rounded-md */
  background: var(--m-white);
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.models-explorer__search:focus-within {
  border-color: var(--m-gray-30);
  box-shadow: 0 0 0 3px var(--m-gray-10);
}
.models-explorer__search svg { color: var(--m-gray-40); flex: 0 0 auto; margin-right: 0.5rem; }
.models-explorer__search input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 0.875rem;            /* text-sm */
  color: var(--m-gray-90);
  height: 100%;
  padding: 0;
}
.models-explorer__search input::placeholder { color: var(--m-gray-40); }
@media (min-width: 1024px) {

  .models-explorer__search { width: 18rem; }   /* lg:w-72 */

}

.models-explorer__select {
  appearance: none;
  width: 100%;
  height: 2.5rem;
  padding: 0 2rem 0 0.75rem;
  border: 1px solid var(--m-gray-20);
  border-radius: 0.375rem;
  background-color: var(--m-white);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777674' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  color: var(--m-gray-90);
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.models-explorer__select:hover { border-color: var(--m-gray-30); }
.models-explorer__select:focus-visible { border-color: var(--m-gray-30); }
.models-explorer__select:focus { outline: none; border-color: var(--m-gray-30); box-shadow: 0 0 0 3px var(--m-gray-10); }
@media (min-width: 1024px) {

  .models-explorer__select { width: 12rem; }   /* lg:w-48 */

}

/* FE Chips: rounded-[30px], px-4 py-2, white bg unselected, gray-60 bg selected */
.models-explorer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;                   /* gap-x-3 */
}
.models-explorer__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;           /* py-2 px-4 */
  border-radius: 30px;
  background: var(--m-white);
  color: var(--m-gray-90);
  font-size: 0.875rem;            /* text-sm, matches search + select controls above */
  line-height: 1.25rem;
  font-weight: 400;
  box-shadow: var(--m-shadow-sm);
  border: 0;
  cursor: pointer;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
  white-space: nowrap;
}
.models-explorer__chip:hover { background: var(--m-gray-10); }
.models-explorer__chip:focus-visible { background: var(--m-gray-10); }
.models-explorer__chip--active {
  background: var(--m-gray-60);
  color: var(--m-white);
}
.models-explorer__chip--active:hover { background: var(--m-gray-50); }
.models-explorer__chip--active:focus-visible { background: var(--m-gray-50); }

/* --- Table -------------------------------------------------------------- */

.models-explorer__table-wrap { overflow-x: auto; }
.models-explorer__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;            /* text-sm */
  color: var(--m-gray-90);
}

.models-explorer__th {
  text-align: left;
  padding: 0.75rem 1.25rem;       /* py-3 px-5 */
  border-bottom: 1px solid var(--m-gray-10);
  background: var(--m-white);
  white-space: nowrap;
}
.models-explorer__th--right { text-align: right; }
.models-explorer__th--chevron { width: 2rem; padding: 0; }

/* FE renders col header as Text variant="h6" (text-base font-semibold);
   inactive state adds text-gray-60. */
.models-explorer__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--m-gray-90);
  cursor: pointer;
  white-space: nowrap;
}
.models-explorer__sort--inactive { color: var(--m-gray-60); }
.models-explorer__th--right .models-explorer__sort { float: right; }

.models-explorer__row { cursor: pointer; transition: background-color 100ms ease-in-out; }
.models-explorer__row:hover { background: var(--m-gray-0); }
.models-explorer__row:focus-visible { background: var(--m-gray-0); }
.models-explorer__row td {
  padding: 1rem 1.25rem;          /* py-4 px-5 */
  border-bottom: 1px solid var(--m-gray-10);
  vertical-align: middle;
  color: var(--m-gray-90);
}
.models-explorer__row:last-child td { border-bottom: 0; }

/* Model cell: provider logo beside the name + id stack, same as the FE row
   (ProviderLogo at h-12 w-12, gap-3, min-w-0 so long ids can truncate). */
.models-explorer__model-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.models-explorer__model-text { display: flex; flex-direction: column; min-width: 0; }
.models-explorer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  overflow: hidden;
}
/* A loaded logo renders edge to edge with no backing box so the brand mark
   reads cleanly; only the monogram fallback gets a filled chip. */
.models-explorer__logo img { width: 100%; height: 100%; object-fit: contain; }
.models-explorer__logo--fallback {
  background: var(--m-gray-0);
  color: var(--m-gray-60);
  font-size: 0.875rem;
}

.models-explorer__name { color: var(--m-gray-90); font-size: 0.875rem; }
.models-explorer__model-id { font-size: 0.75rem; color: var(--m-gray-40); margin-top: 0.125rem; }
.models-explorer__num { text-align: right; white-space: nowrap; }
/* Second line under a price for vendors that bill a different rate by the
   clock, so the flat number is not read as the whole price. */
.models-explorer__peak { font-size: 0.75rem; color: var(--m-gray-40); margin-top: 0.125rem; white-space: nowrap; }
.models-explorer__launched { color: var(--m-gray-50); white-space: nowrap; }
.models-explorer__chevron { color: var(--m-gray-30); padding: 0 0.5rem; }

.models-explorer__caps { display: inline-flex; gap: 0.5rem; align-items: center; }
.models-explorer__cap { color: var(--m-gray-80); display: inline-flex; line-height: 0; }
.models-explorer__cap:not(.models-explorer__cap--active) { color: var(--m-gray-20); }

.models-explorer__empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--m-gray-40);
}

/* --- Detail page ------------------------------------------------------- */

.model-detail {
  display: flex;
  flex-direction: column;
  gap: 2rem;                      /* gap-8 */
}

.model-detail__section {}

.model-detail__heading {
  font-size: 1.125rem;            /* h5: text-lg */
  font-weight: 600;
  color: var(--m-gray-90);
  margin: 0 0 0.75rem;            /* mb-3 */
}

.model-detail__card {
  background: var(--m-white);
  border-radius: 0.5rem;
  box-shadow: var(--m-shadow-md);
  padding: 1.25rem;               /* p-5 */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;                   /* gap-5 */
}

.model-detail__group-label,
.model-detail__stat-label {
  font-size: 1rem;                /* FE uses Text variant h6 → text-base font-semibold */
  font-weight: 600;
  color: var(--m-gray-40);
  margin-bottom: 0.5rem;
}

.model-detail__badges,
.model-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* FE Badge (color="gray"): inline rounded-full bg-gray-0 text-gray-90 px-2.5 py-0.5 */
.model-detail__badge,
.model-detail__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;     /* py-0.5 px-2.5 */
  border-radius: 9999px;
  background: var(--m-gray-0);
  color: var(--m-gray-90);
  font-size: 0.75rem;             /* text-xs */
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
}
.model-detail__badge--inactive {
  text-decoration: line-through;
  opacity: 0.4;
}

.model-detail__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) {

  .model-detail__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }

}

.model-detail__stat-value {
  font-size: 0.875rem;            /* text-sm; FE uses md=text-base actually but stays tight */
  color: var(--m-gray-90);
  margin-top: 0.125rem;
}
.model-detail__stat-value--large { font-size: 1.5rem; font-weight: 600; }

/* "Back to model catalog", mirroring the product page's goBack affordance
   above its title. */
.model-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  align-self: flex-start;
  color: var(--m-gray-40);
  font-size: 0.875rem;
  text-decoration: none;
}
.model-detail__back:hover { color: var(--m-gray-90); text-decoration: none; }
.model-detail__back:focus-visible { color: var(--m-gray-90); text-decoration: none; }
/* .model-detail is a 2rem-gap column of sections. The back link is a nav
   affordance rather than a section, so it sits closer to what follows than a
   full section gap would put it. */
.model-detail__back { margin-bottom: -1rem; }

/* The four cards above the Vendors table. flex-wrap with a fixed width from
   lg up rather than a grid: a model with fewer cards should not stretch them
   to fill the row, and every model's page should size them the same. */
.model-detail__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;                   /* gap-3 */
}
.model-detail__stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;                   /* gap-1 */
  width: 100%;
  padding: 1rem;                  /* p-4 */
  background: var(--m-white);
  border-radius: 0.5rem;
  box-shadow: var(--m-shadow-md);
  overflow: hidden;
}
@media (min-width: 1024px) {

  .model-detail__stat-card { width: 15rem; flex: none; }   /* lg:w-60 lg:flex-none */

}
.model-detail__stat-card-label { font-size: 0.875rem; color: var(--m-gray-40); }
.model-detail__stat-card-value {
  font-size: 1.125rem;            /* h5 */
  font-weight: 700;               /* font-bold */
  color: var(--m-gray-90);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Vendors table: row per vendor, same shape as the product's ---------- */

.model-detail__table-wrap {
  background: var(--m-white);
  border-radius: 0.5rem;
  box-shadow: var(--m-shadow-md);
  overflow: hidden;
  overflow-x: auto;
}
.model-detail__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  color: var(--m-gray-90);
}
.model-detail__th {
  text-align: left;
  padding: 0.75rem 1.25rem;       /* py-3 px-5 */
  border-bottom: 1px solid var(--m-gray-10);
  white-space: nowrap;
}
.model-detail__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 1rem;                /* h6 */
  font-weight: 600;
  color: var(--m-gray-90);
  cursor: pointer;
  white-space: nowrap;
}
.model-detail__sort--inactive { color: var(--m-gray-60); }
.model-detail__sort--static { color: var(--m-gray-60); cursor: default; }
/* The unit sits in the header at label weight, so the cells below can stay
   bare numbers. */
.model-detail__unit { font-size: 0.75rem; font-weight: 400; color: var(--m-gray-40); }
/* The chevron keeps its slot when inactive: hiding it outright would let the
   active column claim width nothing else has and shift every column after it. */
.model-detail__chevron-idle { visibility: hidden; display: inline-flex; }

.model-detail__table tbody td {
  padding: 1rem 1.25rem;          /* py-4 px-5 */
  border-bottom: 1px solid var(--m-gray-10);
  vertical-align: middle;
}
.model-detail__table tbody tr:last-child td { border-bottom: 0; }
.model-detail__vendor-name { white-space: nowrap; }
.model-detail__num { white-space: nowrap; }
.model-detail__released { white-space: nowrap; color: var(--m-gray-50); }

.model-detail__caps-row { display: inline-flex; gap: 0.5rem; align-items: center; }
/* align-middle: an inline-flex icon otherwise sits on the text baseline
   rather than the line's vertical centre, and reads as shifted up against
   the plain text in the cells beside it. */
.model-detail__cap {
  display: inline-flex;
  vertical-align: middle;
  line-height: 0;
  color: var(--m-gray-20);
}
.model-detail__cap--active { color: var(--m-gray-80); }

/* A price plus the icons for the conditions that reprice it. The rates
   themselves live in the tooltips, so a route with neither a schedule nor a
   long-context tier leaves the row no taller than one with both. */
.model-detail__rate-cell { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.model-detail__rate-hint { display: inline-flex; color: var(--m-gray-40); line-height: 0; cursor: help; }

.model-detail__matrix-wrap {
  background: var(--m-white);
  border-radius: 0.5rem;
  box-shadow: var(--m-shadow-md);
  overflow: hidden;
  overflow-x: auto;
}
.model-detail__matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  color: var(--m-gray-90);
}
.model-detail__matrix th,
.model-detail__matrix td {
  padding: 1rem 1.25rem;          /* py-4 px-5 */
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--m-gray-10);
}
.model-detail__matrix tr:last-child td,
.model-detail__matrix tr:last-child th { border-bottom: 0; }
.model-detail__matrix-label-col { width: 12rem; }
.model-detail__matrix-vendor {
  font-weight: 600;
  font-size: 1rem;                /* h6 */
  color: var(--m-gray-90);
  background: var(--m-white);
}
.model-detail__matrix-label {
  font-weight: 600;
  font-size: 1rem;                /* h6 */
  color: var(--m-gray-90);
  white-space: nowrap;
}
.model-detail__matrix-cell { color: var(--m-gray-90); min-width: 12rem; }

.model-detail__capitalize { text-transform: capitalize; }
.model-detail__muted { color: var(--m-gray-40); }

.model-detail__error {
  padding: 2rem;
  background: var(--m-white);
  border: 1px solid var(--m-gray-10);
  border-radius: 0.5rem;
  text-align: center;
  color: var(--m-gray-40);
}

/* --- Full-width page: stretch the article container --------------------- */

/* Fern's article element constrains prose to ~57rem. Use :has() to widen only
   the pages that actually render the Models explorer or a model detail page,
   so we don't accidentally widen home/about pages that also use layout: page. */
article:has(.models-explorer),
article:has(.model-detail) {
  max-width: none !important;
  width: 100% !important;
}
article:has(.models-explorer) .fern-prose,
article:has(.model-detail) .fern-prose {
  max-width: none !important;
}

/* Promotional pricing: list struck through, promo price beside it. Used by
   both the explorer table and the vendor comparison matrix. */
.models-explorer__discounted,
.model-detail__discounted { display: inline-flex; gap: 0.375rem; align-items: baseline; }
.models-explorer__list-price,
.model-detail__list-price { color: var(--m-gray-40); text-decoration: line-through; }
.models-explorer__promo-price { font-weight: 600; }
/* On the detail table the price that bills leads in green, matching the
   product's own vendor table, with the list price struck through beside it at
   the smaller size. */
.model-detail__promo-price { color: var(--m-green-60); }
.model-detail__list-price { font-size: 0.75rem; }

/* Headline discount beside a vendor name, wherever one is named.
   FE atoms/Badge with color="green": inline-flex h-fit rounded py-0.5
   font-semibold on bg-green-0 / text-green-70. The explorer row uses the
   default md size, the detail table size="sm", same as their FE counterparts.
   (This was a bordered outline chip in greens that belong to no Merge scale.) */
.models-explorer__discount-badge,
.model-detail__discount-badge {
  display: inline-flex;
  align-items: center;
  height: fit-content;
  margin-left: 0.5rem;
  padding: 0.125rem 5px;          /* py-0.5 px-[5px] */
  border-radius: 0.25rem;         /* rounded */
  background: var(--m-green-0);
  color: var(--m-green-70);
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.models-explorer__discount-badge { font-size: 12px; line-height: 1rem; }
.model-detail__discount-badge { font-size: 10px; line-height: 14px; }

/* Connector catalog: search, type filters, and the tile grid.
   Grid rules moved here from the inline <style> block that used to live in
   connectors-marketplace.mdx, so the page stays readable. */

.connector-browser {
  width: 100%;
}

/* ---- Controls ---- */

.connector-controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0 0.75rem;
}

@media (min-width: 768px) {

  .connector-controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

}

.connector-search-wrap {
  flex: 1 1 auto;
}

.connector-search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--merge-text);
  background: var(--merge-card);
  border: 1px solid var(--merge-border);
  border-radius: 6px;
  outline: none;
  transition: border-color 150ms;
}

.connector-search::placeholder {
  color: var(--gray-40, #777674);
}

.connector-search:focus {
  border-color: var(--gray-20);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.connector-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.connector-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--grayscale-8);
  background: var(--merge-card);
  border: 1px solid var(--merge-border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 150ms;
}

.connector-filter:hover {
  border-color: var(--gray-20);
}
.connector-filter:focus-visible {
  border-color: var(--gray-20);
}

.connector-filter.is-active {
  color: var(--grayscale-9);
  background: var(--gray-0);
  border-color: var(--gray-20);
  font-weight: 600;
}

.connector-filter-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-40, #777674);
  font-variant-numeric: tabular-nums;
}

.connector-result-count {
  margin: 0;
  font-size: 13px;
  color: var(--gray-40, #777674);
  min-height: 1.25rem;
}

/* ---- Grid ---- */

.integration-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem 0 2rem;
}

.integration-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px 6px 8px;
  gap: 4px;
  margin-right: 12px;
  margin-bottom: 16px;
  width: 120px;
  height: 110px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 8px -2px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  background: var(--merge-card, #fff);
  transition: background-color 0.2s, box-shadow 0.2s;
}

.integration-card:hover {
  background-color: var(--gray-0, #f9fafb);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 10px -2px;
}
.integration-card:focus-visible {
  background-color: var(--gray-0, #f9fafb);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 10px -2px;
}

.integration-card img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.integration-card span {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
  color: var(--grayscale-9, rgb(0, 0, 0));
  overflow-wrap: anywhere;
}

/* Vendor-hosted servers carry a corner marker so the two kinds are
   distinguishable at a glance without leaving the grid. Deliberately neutral:
   the badge marks a category, it is not a status or a warning. */
.integration-card.is-generic::after {
  content: "Generic";
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 4px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: 3px;
  background-color: var(--grayscale-4, #eaeae9);
  color: var(--grayscale-10, #23221e);
}

.integration-card[hidden] {
  display: none;
}

/* ---- Empty state ---- */

.connector-empty {
  background-color: var(--gray-0);
  border: 1px solid var(--merge-border);
  border-radius: var(--merge-radius-md);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.connector-empty p {
  margin: 0 0 0.5rem 0;
  color: var(--grayscale-9);
}

.connector-empty p:last-child {
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--grayscale-8);
}

@media (max-width: 640px) {

  .integration-card {
    width: calc(50% - 12px);
  }

}

/* ---- Catalog grid ----
   Scoped to the Agent Handler catalog so the shared .integration-grid used by
   the generated category pages keeps its existing flex layout.

   Fixed-width flex tiles leave a ragged right gutter that never lines up with
   the controls row above. Auto-fill tracks divide the full content width, so
   both edges align and more tiles fit per row on wide viewports, which is what
   shortens the scroll to the search box. */
.connector-browser .integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px 12px;
}

.connector-browser .integration-card {
  margin-right: 0;
  margin-bottom: 0;
  width: auto;
}

@media (max-width: 640px) {

  .connector-browser .integration-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .connector-browser .integration-card {
    width: auto;
  }

}