/*fern-site-stylesheet*/@font-face {
    font-family: 'UntitledSans';
    src: url('/_fern-files/methodsecurity.docs.buildwithfern.com/b662d65c323ca9ecfbcb90b4ef3fd7293614800e73b360653d362281d4ae4dd8/assets/fonts/UntitledSans-Regular.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'UntitledSans';
    src: url('/_fern-files/methodsecurity.docs.buildwithfern.com/543c764c22ef684648a3c7cb5d6071955f6e25ea3b8bbe6ca460ce3864cd0fc6/assets/fonts/UntitledSans-Medium.ttf') format('ttf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'UntitledSans';
    src: url('/_fern-files/methodsecurity.docs.buildwithfern.com/d2ec20e7304fc725acedc747971401176903d743114f6efd3c65cf42ce1a8cd3/assets/fonts/UntitledSans-RegularItalic.ttf') format('ttf');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'UntitledSans';
    src: url('/_fern-files/methodsecurity.docs.buildwithfern.com/08cd88ab2e6aef14bc63ac3b3e6cc35a13ad5bf23d5e669f178753890f79f6c1/assets/fonts/UntitledSans-MediumItalic.ttf') format('ttf');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'UntitledSans';
    src: url('/_fern-files/methodsecurity.docs.buildwithfern.com/b662d65c323ca9ecfbcb90b4ef3fd7293614800e73b360653d362281d4ae4dd8/assets/fonts/UntitledSans-Regular.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'UntitledSans';
    src: url('/_fern-files/methodsecurity.docs.buildwithfern.com/543c764c22ef684648a3c7cb5d6071955f6e25ea3b8bbe6ca460ce3864cd0fc6/assets/fonts/UntitledSans-Medium.ttf') format('ttf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'UntitledSans';
    src: url('/_fern-files/methodsecurity.docs.buildwithfern.com/d2ec20e7304fc725acedc747971401176903d743114f6efd3c65cf42ce1a8cd3/assets/fonts/UntitledSans-RegularItalic.ttf') format('ttf');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'UntitledSans';
    src: url('/_fern-files/methodsecurity.docs.buildwithfern.com/08cd88ab2e6aef14bc63ac3b3e6cc35a13ad5bf23d5e669f178753890f79f6c1/assets/fonts/UntitledSans-MediumItalic.ttf') format('ttf');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'ABCROMMono';
    src: url('/_fern-files/methodsecurity.docs.buildwithfern.com/12efd3aaba0b52ba8ec2a878cc509360633cd4df32fa21384241dd47e6330549/assets/fonts/ABCROMMono-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ABCROMMono';
    src: url('/_fern-files/methodsecurity.docs.buildwithfern.com/533c0482bed794f380efeb321fa2d69e182d988c2d5725e34e001424b3654fe1/assets/fonts/ABCROMMono-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ABCROMMono';
    src: url('/_fern-files/methodsecurity.docs.buildwithfern.com/ef4a409c40a7579939debdbc896810430c20b29471d7f258478c99e6861f4464/assets/fonts/ABCROMMono-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ABCROMMono';
    src: url('/_fern-files/methodsecurity.docs.buildwithfern.com/faff84e3b33c7454519ceffca29f66d9dcdda3e00cc12d5492a0d427539749f8/assets/fonts/ABCROMMono-RegularItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'ABCROMMono';
    src: url('/_fern-files/methodsecurity.docs.buildwithfern.com/bfccaff0beaaa241611c0dd1eb9c8e9db6f93eb852f4d912425c71cac105129b/assets/fonts/ABCROMMono-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'ABCROMMono';
    src: url('/_fern-files/methodsecurity.docs.buildwithfern.com/a734ab786fe5ab13a3f753d8286df741a34985cf744c16756316f7339e8b8305/assets/fonts/ABCROMMono-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
  --header-height: 50px;
  --header-height-real: 50px;
  --mobile-header-height-real: 50px;
  --content-width: 800px;
  --sidebar-width: 290px;
  --page-width: 100vw;
  --logo-height: 16px;
  --font-body: 'UntitledSans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'UntitledSans', 'UntitledSans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'ABCROMMono', 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: #f7f7f7;
  --accent-2: #f2f3f4;
  --accent-3: #e8e9eb;
  --accent-4: #e0e1e4;
  --accent-5: #d7d9dd;
  --accent-6: #cfd1d5;
  --accent-7: #c4c6ca;
  --accent-8: #b0b2b6;
  --accent-9: #222325;
  --accent-10: #37383a;
  --accent-11: #5c5e61;
  --accent-12: #212224;

  --accent-a1: #00000003;
  --accent-a2: #18345009;
  --accent-a3: #09163113;
  --accent-a4: #040e2a1b;
  --accent-a5: #03112d24;
  --accent-a6: #010d242c;
  --accent-a7: #050e2038;
  --accent-a8: #0209164c;
  --accent-a9: #010205dd;
  --accent-a10: #000104c7;
  --accent-a11: #02050aa2;
  --accent-a12: #010205de;

  --accent-contrast: #fff;
  --accent-surface: #f0f1f3cc;
  --accent-indicator: #222325;
  --accent-track: #222325;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(97.5% 0.0003 264.5);
      --accent-2: oklch(96.4% 0.0013 264.5);
      --accent-3: oklch(93.5% 0.0028 264.5);
      --accent-4: oklch(91% 0.0045 264.5);
      --accent-5: oklch(88.6% 0.006 264.5);
      --accent-6: oklch(86% 0.006 264.5);
      --accent-7: oklch(82.5% 0.006 264.5);
      --accent-8: oklch(76.4% 0.006 264.5);
      --accent-9: oklch(25.6% 0.004 264.5);
      --accent-10: oklch(34% 0.004 264.5);
      --accent-11: oklch(48.1% 0.006 264.5);
      --accent-12: oklch(25% 0.004 264.5);

      --accent-a1: color(display-p3 0 0 0 / 0.012);
      --accent-a2: color(display-p3 0 0.1255 0.2471 / 0.032);
      --accent-a3: color(display-p3 0 0.0549 0.1647 / 0.072);
      --accent-a4: color(display-p3 0 0.0392 0.1529 / 0.104);
      --accent-a5: color(display-p3 0 0.0588 0.1686 / 0.14);
      --accent-a6: color(display-p3 0 0.0471 0.1373 / 0.172);
      --accent-a7: color(display-p3 0 0.0392 0.1098 / 0.216);
      --accent-a8: color(display-p3 0 0.0275 0.0824 / 0.296);
      --accent-a9: color(display-p3 0 0.0039 0.0157 / 0.864);
      --accent-a10: color(display-p3 0 0.0039 0.0157 / 0.78);
      --accent-a11: color(display-p3 0 0.0118 0.0314 / 0.632);
      --accent-a12: color(display-p3 0 0.0039 0.0157 / 0.868);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9451 0.9451 0.9529 / 0.8);
      --accent-indicator: oklch(25.6% 0.004 264.5);
      --accent-track: oklch(25.6% 0.004 264.5);
    }
  }
}


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

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

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

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

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

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


.dark {
  --accent-1: #111;
  --accent-2: #191919;
  --accent-3: #222;
  --accent-4: #2a2a2a;
  --accent-5: #313131;
  --accent-6: #3a3a3a;
  --accent-7: #484848;
  --accent-8: #606060;
  --accent-9: #fff;
  --accent-10: #f6f6f6;
  --accent-11: #b4b4b4;
  --accent-12: #eee;

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

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(17.8% 0 none);
      --accent-2: oklch(21.3% 0 none);
      --accent-3: oklch(25.4% 0 none);
      --accent-4: oklch(28.3% 0 none);
      --accent-5: oklch(31.3% 0 none);
      --accent-6: oklch(34.9% 0 none);
      --accent-7: oklch(40.2% 0 none);
      --accent-8: oklch(48.8% 0 none);
      --accent-9: oklch(100% 0 none);
      --accent-10: oklch(97.3% 0 none);
      --accent-11: oklch(77% 0 none);
      --accent-12: oklch(94.9% 0 none);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 1 1 1 / 0.0336);
      --accent-a3: color(display-p3 1 1 1 / 0.0714);
      --accent-a4: color(display-p3 1 1 1 / 0.105);
      --accent-a5: color(display-p3 1 1 1 / 0.1345);
      --accent-a6: color(display-p3 1 1 1 / 0.1723);
      --accent-a7: color(display-p3 1 1 1 / 0.2311);
      --accent-a8: color(display-p3 1 1 1 / 0.3319);
      --accent-a9: color(display-p3 1 1 1);
      --accent-a10: color(display-p3 1 1 1 / 0.9622);
      --accent-a11: color(display-p3 1 1 1 / 0.6849);
      --accent-a12: color(display-p3 1 1 1 / 0.9286);

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


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

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

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

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

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

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

.light, :root {
  color-scheme: light;
  --accent: rgba(34, 35, 37, 1);
  --background: rgba(250, 250, 250, 1);
  --border: rgba(229, 231, 235, 1);
  --sidebar-background: rgba(250, 250, 250, 1);
  --header-background: rgba(244, 244, 244, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fafafa;
}

.dark {
  color-scheme: dark;
  --accent: rgba(255, 255, 255, 1);
  --background: rgba(17, 17, 17, 1);
  --border: rgba(42, 42, 42, 1);
  --sidebar-background: rgba(17, 17, 17, 1);
  --header-background: rgba(10, 10, 10, 1);
  --card-background: rgba(25, 25, 25, 1);
  --theme-color: #111;
}

:root {
    --background-color: #ffffff;

    /* Reduce global rounding to half Fern's default */
    --border-radius-sm: 0.125rem;
    --border-radius: 0.25rem;
    --border-radius-md: 0.25rem;
    --border-radius-lg: 0.375rem;
    --border-radius-xl: 0.5rem;
    --border-radius-2xl: 0.625rem;
    --border-radius-full: 9999px;
}
.dark {
    --background-color: #0a0a0a;
}

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

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

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

/* Pin sidebar and make it translucent */
.fern-sidebar-container {
    backdrop-filter: blur(10px);
    position: fixed;
}

/* Pin table of contents to the right */
.fern-layout-toc {
    position: fixed;
    right: 0;
    z-index: 1;
}

/* Enhance header with backdrop blur */
.fern-header-container {
    backdrop-filter: blur(10px);
}

/* Header */
/* Remove border above tabs */
.fern-header {
    border: none !important;
}

/* Sidebar */
/* Keep only right border */
.fern-sidebar-container {
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Fern card by defauly has different margin-top on first card. This fixes it */
.fern-card {
    margin-top: 0 !important;
    border-radius: 0.5rem !important;
    padding: 1.25rem !important;
    box-shadow: none !important;
}

/* Halve rounding on buttons and other interactive elements */
.fern-button,
button:not([class*="rounded-full"]),
[class*="fern-badge"],
[class*="fern-tag"] {
    border-radius: 0.25rem !important;
}

/* Card hover - muted gray border instead of jarring white flash */
.fern-card:hover {
    border-color: var(--grayscale-7) !important;
    box-shadow: none !important;
}
.fern-card:focus-visible {
    border-color: var(--grayscale-7) !important;
    box-shadow: none !important;
}

/* Card icons - 20% smaller and slightly muted */
.fern-card svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
    color: var(--grayscale-11) !important;
    opacity: 0.92;
}

/* More vertical breathing room between sections (replaces HR dividers) */
.prose h2 {
    margin-top: 3.5rem !important;
}

/* Landing page */
/* ------------------------------------------------------------ */
.fern-landing-page-background-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh; /* at least full viewport height, but allow it to grow */
    overflow: visible; /* allow content to extend beyond viewport */
}

.fern-landing-page-background-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh; /* ensure it covers at least the viewport */
    opacity: 0.3;
    object-fit: cover; /* ensures it fills the space without distortion */
    z-index: -1; /* puts it behind other content */
}

/* The rest of the landing page styling is in landing-page.css */

/* End of Landing page */
/* ------------------------------------------------------------ */

/* Single-row header (desktop only) */
/* ------------------------------------------------------------ */
@media (min-width: 1200px) {

    /* Make the container relative so .fern-header-tabs can overlay it */
    .fern-header-container {
        position: relative;
    }

    /* Overlay tabs on the center of the header row.
       Left offset = logo width. Right offset = search + gap + navbar-links.
       Tabs cluster to the left via justify-content: flex-start. */
    .fern-header-tabs {
        position: absolute;
        top: 0;
        left: 140px;
        right: 480px;
        height: var(--header-height, 50px);
        background-color: transparent;
        justify-content: flex-start;
        /* Transparent overlay must not block clicks on search/navbar-links */
        pointer-events: none;
    }

    /* Re-enable clicks only on actual interactive tab elements, not wrapper divs */
    .fern-header-tabs a,
    .fern-header-tabs button,
    .fern-header-tabs [role="tab"] {
        pointer-events: auto;
    }

    /* Compact search bar: fixed width, auto left-margin pushes it to the
       right of the tabs area, just before the navbar-links. */
    .fern-header-search-bar {
        flex: 0 0 200px !important;
        width: 200px !important;
        min-width: 0 !important;
        margin-left: auto !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Keep navbar-links from flex-growing (it already right-aligns its children) */
    .fern-header-navbar-links {
        flex: 0 0 auto !important;
    }

}
/* ------------------------------------------------------------ */

.lp-page-container {

    min-height: 100vh;
    position: relative;

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

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

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

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

    .main-content {
        max-width: 60rem;
        margin-top: 5rem !important;
        margin: 0 auto;
        position: relative;
        padding: 3rem 0;
        background-color: var(--background-color);
        z-index: 1;
    }

    .dark .main-content {
        background-color: var(--background-color) !important;
    }

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

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

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

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

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

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

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

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

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

    /* .dev-api-card inherits base panel styles */

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

    .card-title {

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

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

        &:hover {

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

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

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

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

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

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

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

    .language-icon {

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

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

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

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

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

    .connect-title-container {

        margin-bottom: 2rem;

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

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

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

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

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

    .specs-card {

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

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

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

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

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

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

    .connect-section {
        border-top: 1px solid var(--grayscale-5);
        padding: 3rem 2rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

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

    .a-btn {

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

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

        svg {
            display: none !important;
        }

        &.no-hover {

            cursor: default;

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

        &:hover {

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

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

    /* Responsive Design - Mobile First */
    @media (max-height: 800px) {

        .main-content {
            margin-top: 4rem !important;
        }
    
}

    @media (max-width: 640px) {

        .main-content {
            padding: 2rem 0rem;
            margin-top: 4rem !important;
        }

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

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

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

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

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

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

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

        .dev-api-card {
            padding: 2rem 1rem;
        }

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

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

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

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

        .connect-title-container {

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

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

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

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

        .connect-card-header {
            flex-direction: column;
            align-items: flex-start;
        }

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

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

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

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

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

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

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

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

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

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

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

}