/*fern-site-stylesheet*/@font-face {
    font-family: 'IBM Plex Serif';
    src: url('/_fern-files/zuora.docs.buildwithfern.com/41c93a5023056b0dbec473f41bb794fc8a681baf3ab161d78d8f8638951af849/assets/fonts/ibm-plex-serif-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-01B0, U+01FA-0237, U+0259, U+02C7-02DD, U+0300-0328, U+03C0, U+0400-04F9, U+0E3F, U+1E80-1EF9, U+2070-20BF, U+2113-212E, U+2150-215E, U+2190-21C6, U+2202-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+F6D7-F6D8, U+FB01-FB02;
}
@font-face {
    font-family: 'IBM Plex Serif';
    src: url('/_fern-img/41c93a5023056b0dbec473f41bb794fc-v1.latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
    font-family: 'IBM Plex Serif';
    src: url('/_fern-files/zuora.docs.buildwithfern.com/5111d4897a46fdb83b706789db66ba918eaa3a2f9f6abf8c29aeae0d8f8de5d0/assets/fonts/ibm-plex-serif-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-01B0, U+01FA-0237, U+0259, U+02C7-02DD, U+0300-0328, U+03C0, U+0400-04F9, U+0E3F, U+1E80-1EF9, U+2070-20BF, U+2113-212E, U+2150-215E, U+2190-21C6, U+2202-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+F6D7-F6D8, U+FB01-FB02;
}
@font-face {
    font-family: 'IBM Plex Serif';
    src: url('/_fern-img/5111d4897a46fdb83b706789db66ba91-v1.latin.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
    font-family: 'Founders Grotesk';
    src: url('/_fern-files/zuora.docs.buildwithfern.com/813807644710fabd930bb5086e19b588983e2a38865399ada08f87a5f99ed4a3/assets/fonts/light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-0192, U+01FA-0237, U+02C7-02DD, U+1E80-1E85, U+1EF2-1EF3, U+2153-215E, U+2248-2265, U+F6C3, U+FB00-FB04;
}
@font-face {
    font-family: 'Founders Grotesk';
    src: url('/_fern-img/813807644710fabd930bb5086e19b588-v1.latin.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A5, U+00A7-00AB, U+00AE-00B4, U+00B6-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: 'Founders Grotesk';
    src: url('/_fern-files/zuora.docs.buildwithfern.com/c000acf725075d2885ddbef58492ce4f6542f08ff4dbaec2bbb4e12b4ce65a0e/assets/fonts/regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-0192, U+01FA-0237, U+02C7-02DD, U+1E80-1E85, U+1EF2-1EF3, U+2153-215E, U+2248-2265, U+F6C3, U+FB00-FB04;
}
@font-face {
    font-family: 'Founders Grotesk';
    src: url('/_fern-img/c000acf725075d2885ddbef58492ce4f-v1.latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A5, U+00A7-00AB, U+00AE-00B4, U+00B6-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: 'Founders Grotesk';
    src: url('/_fern-files/zuora.docs.buildwithfern.com/f0e507d466bdd0a7e5609f8077e0171b9f70a684717d1bf38ddd83badb131d28/assets/fonts/medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-0192, U+01FA-0237, U+02C7-02DD, U+1E80-1E85, U+1EF2-1EF3, U+2153-215E, U+2248-2265, U+F6C3, U+FB00-FB04;
}
@font-face {
    font-family: 'Founders Grotesk';
    src: url('/_fern-img/f0e507d466bdd0a7e5609f8077e0171b-v1.latin.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A5, U+00A7-00AB, U+00AE-00B4, U+00B6-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: 'Founders Grotesk';
    src: url('/_fern-files/zuora.docs.buildwithfern.com/d787641949d859a16513c7c3973fabd8bd52bc23ac97d4959adf4a070593fc4d/assets/fonts/semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-0192, U+01FA-0237, U+02C7-02DD, U+1E80-1E85, U+1EF2-1EF3, U+2153-215E, U+2248-2265, U+F6C3, U+FB00-FB04;
}
@font-face {
    font-family: 'Founders Grotesk';
    src: url('/_fern-img/d787641949d859a16513c7c3973fabd8-v1.latin.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A5, U+00A7-00AB, U+00AE-00B4, U+00B6-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: 'Founders Grotesk';
    src: url('/_fern-files/zuora.docs.buildwithfern.com/ad6eafdb30d8b1825be71d122513616b9c3ad59187b870050281779821dccb1d/assets/fonts/bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-0192, U+01FA-0237, U+02C7-02DD, U+1E80-1E85, U+1EF2-1EF3, U+2153-215E, U+2248-2265, U+F6C3, U+FB00-FB04;
}
@font-face {
    font-family: 'Founders Grotesk';
    src: url('/_fern-img/ad6eafdb30d8b1825be71d122513616b-v1.latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A5, U+00A7-00AB, U+00AE-00B4, U+00B6-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: 'IBM Plex Serif Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 106.10%;
    ascent-override: 96.61%;
    descent-override: 25.92%;
    line-gap-override: 0.00%;
}
@font-face {
    font-family: 'Founders Grotesk Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 95.11%;
    ascent-override: 100.94%;
    descent-override: 23.13%;
    line-gap-override: 0.00%;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 28px;
  --font-body: 'IBM Plex Serif', 'IBM Plex Serif Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Founders Grotesk', 'Founders Grotesk Fallback', 'IBM Plex Serif', 'IBM Plex Serif Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

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


.light, :root {
  --accent-1: #fcfdff;
  --accent-2: #f6f9fe;
  --accent-3: #ecf3fd;
  --accent-4: #dfebfc;
  --accent-5: #d0e0f9;
  --accent-6: #bed3f3;
  --accent-7: #a7c2e8;
  --accent-8: #87a9dc;
  --accent-9: #2b5797;
  --accent-10: #1c4886;
  --accent-11: #3b68a9;
  --accent-12: #213654;

  --accent-a1: #0055ff03;
  --accent-a2: #0055e309;
  --accent-a3: #005ee513;
  --accent-a4: #0060e820;
  --accent-a5: #0057df2f;
  --accent-a6: #0053d041;
  --accent-a7: #004fbd58;
  --accent-a8: #0049b578;
  --accent-a9: #003582d4;
  --accent-a10: #003177e3;
  --accent-a11: #003b8fc4;
  --accent-a12: #00183bde;

  --accent-contrast: #fff;
  --accent-surface: #f4f8fecc;
  --accent-indicator: #2b5797;
  --accent-track: #2b5797;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0023 257.9);
      --accent-2: oklch(98.2% 0.0067 257.9);
      --accent-3: oklch(96.1% 0.0155 257.9);
      --accent-4: oklch(93.5% 0.0267 257.9);
      --accent-5: oklch(90.3% 0.0377 257.9);
      --accent-6: oklch(86.2% 0.0502 257.9);
      --accent-7: oklch(80.6% 0.0623 257.9);
      --accent-8: oklch(73% 0.0831 257.9);
      --accent-9: oklch(45.9% 0.1154 257.9);
      --accent-10: oklch(40.6% 0.1154 257.9);
      --accent-11: oklch(51.6% 0.1154 257.9);
      --accent-12: oklch(33% 0.0595 257.9);

      --accent-a1: color(display-p3 0.0235 0.349 1 / 0.012);
      --accent-a2: color(display-p3 0.0196 0.2667 0.8784 / 0.032);
      --accent-a3: color(display-p3 0.0078 0.3373 0.8353 / 0.071);
      --accent-a4: color(display-p3 0.0039 0.3373 0.8353 / 0.118);
      --accent-a5: color(display-p3 0.0039 0.2784 0.8196 / 0.173);
      --accent-a6: color(display-p3 0.0039 0.2667 0.7569 / 0.24);
      --accent-a7: color(display-p3 0.0039 0.2549 0.6902 / 0.326);
      --accent-a8: color(display-p3 0.0039 0.2314 0.6549 / 0.444);
      --accent-a9: color(display-p3 0 0.1608 0.4588 / 0.789);
      --accent-a10: color(display-p3 0 0.1451 0.4196 / 0.844);
      --accent-a11: color(display-p3 0 0.1804 0.5098 / 0.726);
      --accent-a12: color(display-p3 0 0.0706 0.2039 / 0.851);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9608 0.9725 0.9922 / 0.8);
      --accent-indicator: oklch(45.9% 0.1154 257.9);
      --accent-track: oklch(45.9% 0.1154 257.9);
    }
  }
}


.light, :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) {
    .light, :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: #09121b;
  --accent-2: #0e1924;
  --accent-3: #0b2944;
  --accent-4: #00335e;
  --accent-5: #034070;
  --accent-6: #134e81;
  --accent-7: #205f97;
  --accent-8: #2772b5;
  --accent-9: #6db3f8;
  --accent-10: #62a8ec;
  --accent-11: #73b9ff;
  --accent-12: #cae4ff;

  --accent-a1: #0045e405;
  --accent-a2: #1f99f40f;
  --accent-a3: #038cfd32;
  --accent-a4: #007ffd4f;
  --accent-a5: #008cff62;
  --accent-a6: #1b96ff75;
  --accent-a7: #2f9eff8d;
  --accent-a8: #34a0ffae;
  --accent-a9: #70b8fef8;
  --accent-a10: #69b5feeb;
  --accent-a11: #73b9ff;
  --accent-a12: #cae4ff;

  --accent-contrast: #fff;
  --accent-surface: #0f213180;
  --accent-indicator: #6db3f8;
  --accent-track: #6db3f8;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(17.6% 0.0236 249.4);
      --accent-2: oklch(21% 0.027 249.4);
      --accent-3: oklch(27.3% 0.0613 249.4);
      --accent-4: oklch(31.6% 0.0915 249.4);
      --accent-5: oklch(36.4% 0.0991 249.4);
      --accent-6: oklch(41.6% 0.1029 249.4);
      --accent-7: oklch(47.4% 0.1108 249.4);
      --accent-8: oklch(54% 0.1277 249.4);
      --accent-9: oklch(74.9% 0.1229 249.4);
      --accent-10: oklch(71.3% 0.1229 249.4);
      --accent-11: oklch(76.8% 0.1229 249.4);
      --accent-12: oklch(90.7% 0.0465 249.4);

      --accent-a1: color(display-p3 0 0.2863 0.9608 / 0.018);
      --accent-a2: color(display-p3 0.1961 0.6275 1 / 0.056);
      --accent-a3: color(display-p3 0.1608 0.5451 1 / 0.189);
      --accent-a4: color(display-p3 0.1098 0.5059 1 / 0.297);
      --accent-a5: color(display-p3 0.1725 0.5529 1 / 0.37);
      --accent-a6: color(display-p3 0.2588 0.6 1 / 0.443);
      --accent-a7: color(display-p3 0.3216 0.6314 1 / 0.537);
      --accent-a8: color(display-p3 0.3333 0.6314 1 / 0.661);
      --accent-a9: color(display-p3 0.5137 0.7294 1 / 0.945);
      --accent-a10: color(display-p3 0.502 0.7216 1 / 0.893);
      --accent-a11: color(display-p3 0.5255 0.7373 0.9961 / 0.975);
      --accent-a12: color(display-p3 0.8235 0.902 1 / 0.988);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.0784 0.1255 0.1882 / 0.5);
      --accent-indicator: oklch(74.9% 0.1229 249.4);
      --accent-track: oklch(74.9% 0.1229 249.4);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

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

.light, :root {
  color-scheme: light;
  --accent: rgba(43, 87, 151, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(109, 179, 248, 1);
  --background: rgba(13, 17, 23, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #0d1117;
}

/* Brand overrides */

.fern-sidebar-link[data-state=active] .fern-sidebar-link-title-inner {
  -webkit-text-stroke: 0px !important;
}

#fern-header [data-radix-collection-item][data-state=active]:after {
  opacity: 0 !important;
}

/* Fonts loaded via docs.yml typography config */

/* ── Hide tabs on landing page ── */

:has(.landing-hero-wrapper) header a[aria-selected] {
  display: none !important;
}

:has(.landing-hero-wrapper) header div:has(> a[aria-selected]) {
  display: none !important;
}

/* Hide the product (and version) switchers on the landing hero — there's no
   product/area context there yet. */
:has(.landing-hero-wrapper) .fern-product-selector,
:has(.landing-hero-wrapper) .fern-version-selector {
  display: none !important;
}


/* ── Landing page hero styling ── */

.unicorn-anchor .fern-page-heading,
.unicorn-anchor .fern-page-heading-wrapper,
.unicorn-anchor header.my-8 {
  display: none;
}

.unicorn-anchor {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.unicorn-anchor h1 {
  font-family: "Founders Grotesk", helvetica, sans-serif;
  font-size: clamp(2.75rem, 5.5vw, 4.75rem);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 22px;
  color: #fff;
  pointer-events: none;
  cursor: default;
  letter-spacing: -0.02em;
}

.unicorn-anchor .landing-subtitle {
  font-family: "Founders Grotesk", helvetica, sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 36px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Hero dual CTAs (mirrors zuora.com primary + secondary pattern) ── */

.landing-hero-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.hero-btn {
  display: inline-block;
  padding: 15px 38px;
  font-family: "Founders Grotesk", helvetica, sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  border-radius: 50px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Primary = teal fill, inverts to outline on hover */
.hero-btn--primary {
  background-color: #00D2B9;
  border-color: #00D2B9;
  color: #000;
}

.hero-btn--primary:hover {
  background-color: transparent;
  color: #00D2B9;
}
.hero-btn--primary:focus-visible {
  background-color: transparent;
  color: #00D2B9;
}

/* Secondary = white outline, fills white on hover */
.hero-btn--secondary {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.hero-btn--secondary:hover {
  background-color: #fff;
  border-color: #fff;
  color: #103426;
}
.hero-btn--secondary:focus-visible {
  background-color: #fff;
  border-color: #fff;
  color: #103426;
}

/* Hero sits on the page background (white in light mode), like zuora.com —
   the green card floats on it rather than a full-bleed dark band. */
.landing-hero-wrapper {
  background: transparent;
  padding: 72px 24px 56px;
}

/* Elevated hero panel — the rounded "card" treatment from zuora.com */
.landing-hero-panel {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 80px 48px 56px;
  background-color: #103426;
  border: 1px solid rgba(0, 210, 185, 0.2);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(16, 52, 38, 0.28);
  overflow: hidden;
}

@media (max-width: 640px) {

  .landing-hero-wrapper {
    padding: 40px 16px 32px;
  }
  .landing-hero-panel {
    padding: 48px 22px 32px;
    border-radius: 22px;
  }

}

/* Dark mode: page background is dark, so just soften the card shade + shadow */
.dark .landing-hero-panel {
  background-color: #0e2e21;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

/* ── Trust bar (social proof logo strip) ── */

.landing-trustbar {
  max-width: 1160px;
  margin: 56px auto 0;
  text-align: center;
}

.landing-trustbar-label {
  font-family: "Founders Grotesk Mono", "Founders Grotesk", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8a968f;
  margin: 0 0 24px 0;
}

.dark .landing-trustbar-label {
  color: rgba(255, 255, 255, 0.45);
}

/* The logo marquee lives in the CompanyMarquee component (markup + CSS animation). */

/* ── Hero quick-link cards ── */

.landing-quicklinks {
  max-width: 1160px;
  margin: 48px auto 0;
  padding-bottom: 80px;
}

.quicklinks-heading {
  font-family: "Founders Grotesk", helvetica, sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: #103426;
  text-align: left;
  margin: 40px 0 18px;
}

.quicklinks-heading:first-child {
  margin-top: 0;
}

.dark .quicklinks-heading {
  color: rgba(255, 255, 255, 0.92);
}

.dark .landing-quicklinks .fern-card {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .landing-quicklinks .fern-card:hover {
  border-color: rgba(0, 210, 185, 0.45);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.06);
}
.dark .landing-quicklinks .fern-card:focus-visible {
  border-color: rgba(0, 210, 185, 0.45);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.06);
}

/* ── Quick-link cards (light bg by default, glass in dark mode) ── */

.landing-quicklinks .fern-card {
  background-color: #ffffff;
  border: 1px solid #e6eae8;
  border-radius: 10px;
  text-align: left;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.landing-quicklinks .fern-card:hover {
  border-color: rgba(0, 210, 185, 0.6);
  box-shadow: 0 12px 32px rgba(16, 52, 38, 0.12);
}
.landing-quicklinks .fern-card:focus-visible {
  border-color: rgba(0, 210, 185, 0.6);
  box-shadow: 0 12px 32px rgba(16, 52, 38, 0.12);
}

.landing-quicklinks .fern-card .font-semibold {
  font-family: "Founders Grotesk", helvetica, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #103426;
}

.landing-quicklinks .fern-card p,
.landing-quicklinks .fern-card .t-muted {
  font-family: "IBM Plex Serif", Georgia, serif;
  color: #5b6b64;
  font-size: 0.875rem;
}

.dark .landing-quicklinks .fern-card .font-semibold {
  color: #fff;
}

.dark .landing-quicklinks .fern-card p,
.dark .landing-quicklinks .fern-card .t-muted {
  color: rgba(255, 255, 255, 0.65);
}

/* ── Landing page footer ── */

.zuora-footer {
  background-color: #103426;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 3px
  );
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 64px calc(50vw - 50%) 32px;
  margin-top: 0;
}

.zuora-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.zuora-footer-top {
  display: grid;
  grid-template-columns: 1.2fr 3fr;
  gap: 64px;
  margin-bottom: 48px;
}

@media (max-width: 900px) {

  .zuora-footer-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

}

.zuora-footer-newsletter-text {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.zuora-footer-signup {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.zuora-footer-email {
  flex: 1;
  padding: 12px 20px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  color: #fff;
  font-family: "Founders Grotesk", helvetica, sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.zuora-footer-email::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.zuora-footer-email:focus {
  border-color: rgba(255, 255, 255, 0.3);
}

.zuora-footer-signup-btn {
  padding: 12px 24px;
  background-color: #1a4a35;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  color: #00D2B9;
  font-family: "Founders Grotesk", helvetica, sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.zuora-footer-signup-btn:hover {
  background-color: #205a40;
}
.zuora-footer-signup-btn:focus-visible {
  background-color: #205a40;
}

@media (max-width: 480px) {

  .zuora-footer-signup {
    flex-direction: column;
  }

}

.zuora-footer-social h4 {
  font-family: "Founders Grotesk Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  color: #00D2B9;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 12px 0;
}

.zuora-footer-social-links {
  display: flex;
  gap: 16px;
}

.zuora-footer-social-links a {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}

.zuora-footer-social-links a:hover {
  color: #00D2B9;
}
.zuora-footer-social-links a:focus-visible {
  color: #00D2B9;
}

.zuora-footer-nav {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.5fr 1fr;
  gap: 32px;
}

@media (max-width: 768px) {

  .zuora-footer-nav {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

}

@media (max-width: 480px) {

  .zuora-footer-nav {
    grid-template-columns: 1fr;
  }

}

.zuora-footer-links h4 {
  font-family: "Founders Grotesk Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  color: #00D2B9;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.zuora-footer-links h5 {
  font-family: "Founders Grotesk Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  margin: 16px 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.zuora-footer-links h5:first-of-type {
  margin-top: 0;
}

.zuora-footer-links a {
  display: block;
  font-family: "Founders Grotesk", helvetica, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  margin-bottom: 8px;
  transition: color 0.2s ease;
}

.zuora-footer-links a:hover {
  color: #00D2B9;
}
.zuora-footer-links a:focus-visible {
  color: #00D2B9;
}

.zuora-footer a[target="_blank"] svg:last-child:not(:first-child),
.zuora-footer a[target="_blank"] .external-link-icon,
.zuora-footer a[target="_blank"]::after {
  display: none !important;
}

.zuora-footer-links a svg,
.zuora-footer-bottom a svg {
  display: none !important;
}

.zuora-footer-wordmark {
  text-align: center;
  padding: 24px 0;
  margin: -20px 0 8px;
}

.zuora-footer-wordmark svg {
  max-width: 100%;
  height: auto;
}

.zuora-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 480px) {

  .zuora-footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

}

.zuora-footer-bottom span {
  font-family: "Founders Grotesk", helvetica, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

.zuora-footer-legal {
  display: flex;
  gap: 24px;
}

.zuora-footer-legal a {
  font-family: "Founders Grotesk", helvetica, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.2s ease;
}

.zuora-footer-legal a:hover {
  color: #00D2B9;
}
.zuora-footer-legal a:focus-visible {
  color: #00D2B9;
}

/* Dark mode footer */
.dark .zuora-footer {
  background-color: #0a1a12;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.2) 0px,
    rgba(0, 0, 0, 0.2) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* ── Changelog centering ──
   Fern's changelog layout reserves an empty right aside (~260px) as a TOC
   gutter, which pins the content to the left. Drop that empty aside and
   center the article, the same way the Blog re-skin does below. Scoped to
   the real Changelog: its entry cards link to date slugs, not /whats-new/. */
.fern-main:has(.fern-changelog-overview):not(:has(.fern-changelog-card-link[href*="/whats-new/"])) > aside:not(.fern-sidebar-desktop) {
  display: none !important;
}
.fern-layout-changelog:has(.fern-changelog-overview):not(:has(.fern-changelog-card-link[href*="/whats-new/"])) {
  max-width: none;
  width: 100%;
  flex: 1 1 auto;
}
article:has(.fern-changelog-overview):not(:has(.fern-changelog-card-link[href*="/whats-new/"])) {
  max-width: 900px;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* ============================================================
   BLOG re-skin
   The "Blog" tab (/whats-new) is a changelog node under the hood
   so it gets RSS for free. These rules restyle ONLY that node into
   a blog-style card grid, leaving the real Changelog untouched.
   Scope hook: a changelog feed whose entry cards link under
   /whats-new/ (blog entry slugs are nested there).
   ============================================================ */

/* the changelog layout reserves an empty right aside (~260px) as a TOC
   gutter, which leaves the content pinned left. For the blog, drop that
   empty aside and let the wrapper grow so the centered article centers. */
.fern-main:has(.fern-changelog-card-link[href*="/whats-new/"]) > aside:not(.fern-sidebar-desktop) {
  display: none !important;
}
.fern-layout-changelog:has(.fern-changelog-card-link[href*="/whats-new/"]) {
  max-width: none;
  width: 100%;
  flex: 1 1 auto;
}
article:has(.fern-changelog-card-link[href*="/whats-new/"]) {
  max-width: 1180px;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* card grid instead of a vertical timeline */
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* kill any timeline rail / connector pseudo-elements */
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-timeline::before,
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-day-group::before,
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-day-entries::before {
  display: none !important;
}

/* hide the timeline dot marker */
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-card-marker {
  display: none !important;
}

/* each post = one grid cell (date eyebrow + card) */
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-day-group {
  display: flex;
  flex-direction: column;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* date -> small uppercase eyebrow, not a sticky heading */
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-day {
  position: static;
  top: auto;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grayscale-a10);
  margin: 0 0 0.5rem 0;
  padding: 0;
}

.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-day-entries {
  gap: 0;
  padding: 0 !important;
  border: none !important;
  flex: 1;
}

/* the blog card */
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-card {
  height: 100%;
  padding: 1.5rem !important;
  border: 1px solid var(--grayscale-a4);
  border-radius: 16px;
  background: var(--background);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.28);
  border-color: var(--accent-a8);
}
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.28);
  border-color: var(--accent-a8);
}

/* title */
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-card-title {
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 0.6rem 0;
}
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-card-title a {
  color: var(--grayscale-12);
}
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-card:hover .fern-changelog-card-title a {
  color: var(--accent-a11);
}
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-card:focus-within .fern-changelog-card-title a {
  color: var(--accent-a11);
}

/* excerpt — clamp to keep cards even */
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-card-preview {
  color: var(--grayscale-a11);
  font-size: 0.9rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* tags pinned to the bottom of the card */
.fern-changelog-feed:has(.fern-changelog-card-link[href*="/whats-new/"]) .fern-changelog-card-tags {
  margin-top: 1rem;
}

/* Spec-download buttons (API reference + API upgrade guide). Subtle neutral
   fill instead of the bright primary; shifts to an accent tint on hover.
   !important overrides Fern's .fern-button variant styles. */
.spec-dl-btn {
  background-color: var(--grayscale-a3) !important;
  color: var(--grayscale-12) !important;
  border: 1px solid var(--grayscale-a5) !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.spec-dl-btn:hover {
  background-color: var(--accent-a3) !important;
  border-color: var(--accent-a8) !important;
  color: var(--accent-a11) !important;
}
.spec-dl-btn:focus-visible {
  background-color: var(--accent-a3) !important;
  border-color: var(--accent-a8) !important;
  color: var(--accent-a11) !important;
}

/* ===== Product switcher (Docs / Developers) =====
 * Borderless trigger with a bold label (no outlined box). */
.fern-product-selector .product-dropdown-trigger,
.fern-product-selector .product-dropdown-trigger p {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* Hide the default "code" (</>) icon Fern injects into each product-switcher
 * item (trigger AND the open dropdown menu, which Radix portals out of
 * .fern-product-selector). Unscoped so it catches the portaled menu items;
 * the product switcher is the only selection list on this site. */
.fern-selection-item-icon {
  display: none !important;
}

/* DITA <shortdesc> lead paragraph on converted pages (matches docs.zuora.com) */
.dita-shortdesc {
  background-color: #B9EFE7;
  color: #1a1a1a;
  padding: 0.5rem 1rem;
}

.dark .dita-shortdesc {
  background-color: rgba(185, 239, 231, 0.15);
  color: var(--grayscale-12);
}

/* Inline DITA images (UI icons inside step text) */
.dita-inline-img,
.dita-inline-img * {
  display: inline !important;
}

.dita-inline-img img {
  height: 1.5em !important;
  width: auto !important;
  margin: 0 0.15em !important;
  vertical-align: middle;
}

/* Screenshots inside DITA table cells shrink to the cell's text width */
.dita-table-img {
  max-width: 100% !important;
  height: auto !important;
}

/* Space between paragraphs, lists and images inside table cells (Fern zeroes cell margins) */
.fern-table td > * + *,
.fern-table th > * + * {
  margin-top: 0.75em !important;
}

/* Image-only links (e.g. the Run in Postman button): keep the image at its own size,
   left-aligned like docs.zuora.com, without Fern's external-link icon */
.dita-img-link {
  display: inline-block !important;
}

.dita-img-link img {
  display: inline-block !important;
  margin: 0 !important;
}

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