/* Hide breadcrumb */
    .fern-breadcrumb-item {
      display: none;
    }

    /* Hide ApiShowcase on mobile */
    .api-showcase-wrapper {
      display: none;
      position: relative;
      z-index: 1;
    }

    @media (min-width: 640px) {
      .api-showcase-wrapper {
        display: block;
      }
    }

    .background-graphic-wrapper {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      /* Half a cell (19.68px) plus 23 cells of 39.36px: the top edge cuts
         mid-tile and the bottom edge lands on a grid line, matching the
         Figma hero clip. */
      height: 924px;
      z-index: 0;
      user-select: none;
      overflow: hidden;
    }

    /* Tile-grid background from the API-Docs-Q2 Figma (node 6025-50171):
       39.36px squares with sharp corners, outlined in 0.64px strokes of
       10% brand blue (alphas/blue/2 = rgba(74,94,224,0.1)). Each tile in
       the Figma is a boolean union, so every line is a single 0.64px
       stroke. The cross below repeats into that grid, one stroke per
       line, with no doubled edges. The Figma applies no gradient fade, so
       the grid runs uniform to the wrapper's clipped bottom edge. */
    .tile-grid {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39.36' height='39.36'%3E%3Cpath d='M0%2019.68h39.36M19.68%200v39.36' fill='none' stroke='%234a5ee0' stroke-opacity='0.1' stroke-width='0.64'/%3E%3C/svg%3E");
      background-size: 39.36px 39.36px;
    }

    /* Plain backdrop under the hero text block, from the API-Docs-Q2 Figma
       (node 6025-50172 "Blur"): a surface-colored rectangle with a 50px
       layer blur. The panel tracks the article (the .w-content-width
       column that holds the heading, subtext, and button row). The
       article is centered in the wrapper's containing block, so a
       min(700px, 100%) box centered on the wrapper matches its edges.
       The solid core (inset 50px by the blur) covers
       the heading, subtext, and the button row, which ends ~360px below
       the wrapper top; the feathered edges let the tile grid fade back
       in around the block. */
    .hero-blur {
      position: absolute;
      top: 8px;
      left: max(0px, calc(50% - 453px));
      width: min(700px, 100%);
      height: 400px;
      background: light-dark(#ffffff, #222225);
      filter: blur(50px);
    }

    @media (min-width: 1024px) {
      .hero-blur {
        top: 40px;
        height: 372px;
      }
    }

    /* Hero heading styling */
    .fern-page-heading.text-balance.break-words {
      font-family: "Lumen Sans", sans-serif !important;
      font-weight: 400 !important;
    }

    .fern-page-heading {
      font-size: 32px;
      line-height: 40px;
      font-weight: 400 !important;
      color: light-dark(#222B5F, #ffffff);
    }

    header.my-8 {
      position: relative;
      margin-top: 56px !important;
      margin-bottom: 24px !important;
      z-index: 1;
    }

    @media (min-width: 640px) {
      .fern-page-heading {
        font-size: 36px;
        line-height: 44px;
      }
      header.my-8 {
        margin-top: 64px !important;
      }
    }

    @media (min-width: 767px) {
      .fern-page-heading {
        font-size: 44px;
        line-height: 54px;
      }
    }

    @media (min-width: 1024px) {
      .fern-page-heading {
        color: light-dark(#222B5F, #ffffff);
        font-size: 48px;
        line-height: 56px;
        overflow-wrap: normal;
        text-wrap: pretty;
        max-width: 604px;
      }
      header.my-8 {
        margin-top: 80px !important;
      }
    }


    /* Styling description text */

    .welcome-subheading {
      max-width: 630px;
      margin-bottom: 56px;
      z-index: 1;
    }

    @media (min-width: 640px) {
        .welcome-subheading {
        max-width: 630px;
        margin-bottom: 56px;
      }
    }


    /* Content width fix */
    .w-content-width.max-w-full {
        width: 1000px !important;
    }

    /* Divider Line Hide */
    .bg-border-default.shrink-0.h-px.w-full {
      display: none !important;
    }

   /* Footer margin fix */
    .fern-layout-footer {
      margin: 48px 0px;
      width: 100%;
      max-width: 906px;
    }

    /* Hide "Copy page" button */
    .fern-page-actions {
      display: none;
    }

    h3 {
      margin-top: 2.0em;
      margin-bottom: 0.8em;
    }

    /*
    Hide the table of contents just for this page
    For some reason, display: none !important; affects the main content's height.
    */
    aside#fern-toc {
      width: 0;
      overflow: hidden;
      border-right: 0px !important;
    }
astro-island,astro-slot,astro-static-slot{display:contents}