/*fern-site-stylesheet*/@font-face {
    font-family: 'ABCMonumentGrotesk';
    src: url('/_fern-files/middesk.docs.buildwithfern.com/671319335260f3534fe46ed43c7e8af5b6900bf0ff26cc35678d9a659213c9c4/docs/assets/fonts/ABCMonumentGrotesk/ABCMonumentGrotesk-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ABCMonumentGrotesk';
    src: url('/_fern-files/middesk.docs.buildwithfern.com/0b9565a4c178c1494d9994f2a1ced99f07836d830f0f92aec88d2f501691f703/docs/assets/fonts/ABCMonumentGrotesk/ABCMonumentGrotesk-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ABCMonumentGrotesk';
    src: url('/_fern-files/middesk.docs.buildwithfern.com/671319335260f3534fe46ed43c7e8af5b6900bf0ff26cc35678d9a659213c9c4/docs/assets/fonts/ABCMonumentGrotesk/ABCMonumentGrotesk-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ABCMonumentGrotesk';
    src: url('/_fern-files/middesk.docs.buildwithfern.com/0b9565a4c178c1494d9994f2a1ced99f07836d830f0f92aec88d2f501691f703/docs/assets/fonts/ABCMonumentGrotesk/ABCMonumentGrotesk-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ABCMonumentGroteskMono';
    src: url('/_fern-files/middesk.docs.buildwithfern.com/92493368049d5fb689ba399a9ee31e8c9b079fd2c7919bd293466fe0d32e2e56/docs/assets/fonts/ABCMonumentGroteskMono/ABCMonumentGroteskMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 20px;
  --font-body: 'ABCMonumentGrotesk', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'ABCMonumentGrotesk', 'ABCMonumentGrotesk', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'ABCMonumentGroteskMono', 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: #e5e8e9;
  --accent-2: #dde4e5;
  --accent-3: #c9dee3;
  --accent-4: #b6d6de;
  --accent-5: #a2ccd6;
  --accent-6: #8bbfcb;
  --accent-7: #71adbb;
  --accent-8: #5894a2;
  --accent-9: #0b3139;
  --accent-10: #21454d;
  --accent-11: #1f5d6a;
  --accent-12: #173b43;

  --accent-a1: #fe9e8613;
  --accent-a2: #6e2a060d;
  --accent-a3: #07667b1e;
  --accent-a4: #02769233;
  --accent-a5: #0479944a;
  --accent-a6: #01759063;
  --accent-a7: #026d8781;
  --accent-a8: #025c709d;
  --accent-a9: #002830f3;
  --accent-a10: #002831da;
  --accent-a11: #014655dd;
  --accent-a12: #012830e6;

  --accent-contrast: #fff;
  --accent-surface: #dce1e2cc;
  --accent-indicator: #0b3139;
  --accent-track: #0b3139;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(93% 0.0034 214.6);
      --accent-2: oklch(91.3% 0.0078 214.6);
      --accent-3: oklch(88.6% 0.0231 214.6);
      --accent-4: oklch(85.5% 0.0359 214.6);
      --accent-5: oklch(81.8% 0.0465 214.6);
      --accent-6: oklch(77.2% 0.0563 214.6);
      --accent-7: oklch(71.2% 0.0657 214.6);
      --accent-8: oklch(63.1% 0.0657 214.6);
      --accent-9: oklch(29.1% 0.0438 214.6);
      --accent-10: oklch(36.8% 0.0438 214.6);
      --accent-11: oklch(44.5% 0.0657 214.6);
      --accent-12: oklch(33% 0.0438 214.6);

      --accent-a1: color(display-p3 1 0.3333 0.1412 / 0.039);
      --accent-a2: color(display-p3 0.349 0.1529 0.0078 / 0.05);
      --accent-a3: color(display-p3 0.0039 0.302 0.3882 / 0.105);
      --accent-a4: color(display-p3 0.0078 0.3922 0.5098 / 0.18);
      --accent-a5: color(display-p3 0.0039 0.4 0.5216 / 0.258);
      --accent-a6: color(display-p3 0.0039 0.3882 0.4941 / 0.345);
      --accent-a7: color(display-p3 0.0039 0.349 0.4549 / 0.45);
      --accent-a8: color(display-p3 0 0.2824 0.3765 / 0.555);
      --accent-a9: color(display-p3 0 0.1098 0.1451 / 0.904);
      --accent-a10: color(display-p3 0 0.1137 0.1529 / 0.817);
      --accent-a11: color(display-p3 0 0.2039 0.2627 / 0.787);
      --accent-a12: color(display-p3 0 0.1137 0.149 / 0.861);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.8627 0.8784 0.8863 / 0.8);
      --accent-indicator: oklch(29.1% 0.0438 214.6);
      --accent-track: oklch(29.1% 0.0438 214.6);
    }
  }
}


.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: #282e23;
  --accent-2: #2b3325;
  --accent-3: #344127;
  --accent-4: #3a4e27;
  --accent-5: #415928;
  --accent-6: #496529;
  --accent-7: #51732a;
  --accent-8: #5b842a;
  --accent-9: #a8ff1c;
  --accent-10: #a6f242;
  --accent-11: #a6f242;
  --accent-12: #d4fdad;

  --accent-a1: #fa19001f;
  --accent-a2: #fb400022;
  --accent-a3: #ff90002b;
  --accent-a4: #fbc50032;
  --accent-a5: #fce40039;
  --accent-a6: #fffd0041;
  --accent-a7: #e5ff0b52;
  --accent-a8: #d1ff1467;
  --accent-a9: #a8ff1c;
  --accent-a10: #b0ff42ef;
  --accent-a11: #b0ff42ef;
  --accent-a12: #d6ffaefd;

  --accent-contrast: #1b2510;
  --accent-surface: #4b351280;
  --accent-indicator: #a8ff1c;
  --accent-track: #a8ff1c;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(29.1% 0.0195 130.5);
      --accent-2: oklch(30.8% 0.0261 130.5);
      --accent-3: oklch(35.6% 0.0469 130.5);
      --accent-4: oklch(39.6% 0.0647 130.5);
      --accent-5: oklch(43.2% 0.0798 130.5);
      --accent-6: oklch(47% 0.0938 130.5);
      --accent-7: oklch(51.4% 0.1087 130.5);
      --accent-8: oklch(56.5% 0.1282 130.5);
      --accent-9: oklch(91% 0.2415 130.5);
      --accent-10: oklch(88% 0.2133 130.5);
      --accent-11: oklch(87.9% 0.2133 130.5);
      --accent-12: oklch(94.6% 0.1114 130.5);

      --accent-a1: color(display-p3 0.9961 0.0941 0 / 0.082);
      --accent-a2: color(display-p3 1 0.3098 0 / 0.099);
      --accent-a3: color(display-p3 1 0.6588 0 / 0.142);
      --accent-a4: color(display-p3 1 0.851 0 / 0.172);
      --accent-a5: color(display-p3 0.9961 0.949 0.0314 / 0.207);
      --accent-a6: color(display-p3 0.9765 1 0.1137 / 0.252);
      --accent-a7: color(display-p3 0.898 1 0.1725 / 0.319);
      --accent-a8: color(display-p3 0.851 1 0.2196 / 0.401);
      --accent-a9: color(display-p3 0.7412 1 0.3294 / 0.991);
      --accent-a10: color(display-p3 0.7647 1 0.3922 / 0.928);
      --accent-a11: color(display-p3 0.7647 1 0.3922 / 0.928);
      --accent-a12: color(display-p3 0.8745 1 0.7176 / 0.986);

      --accent-contrast: #1b2510;
      --accent-surface: color(display-p3 0.2667 0.2039 0.0784 / 0.5);
      --accent-indicator: oklch(91% 0.2415 130.5);
      --accent-track: oklch(91% 0.2415 130.5);
    }
  }
}


.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(11, 49, 57, 1);
  --background: rgba(227, 238, 241, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #e3eef1;
}

.dark {
  color-scheme: dark;
  --accent: rgba(168, 255, 28, 1);
  --background: rgba(11, 49, 57, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #0b3139;
}

/* ==========================================================================
   Middesk Documentation - Custom Styles (New Brand)
   ========================================================================== */

/* ABC Arizona Serif - Display/heading font (Light weight) */
@font-face {
  font-family: 'ABCArizonaSerif';
  src: url('./fonts/ABCArizonaSerif/ABCArizonaSerif-Light.woff2') format('woff2'),
       url('./fonts/ABCArizonaSerif/ABCArizonaSerif-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg-primary: #0B3139;
  --color-bg-card: rgba(255, 255, 255, 0.04);
  --color-bg-card-dark: #071E24;
  --color-bg-footer: #0B3139;
  --color-bg-button: #0B3139;
  --color-bg-button-hover: #3C5A61;
  --color-bg-button-active: #173B43;
  --color-border-primary: rgba(227, 238, 241, 0.15);
  --color-border-hover: rgba(227, 238, 241, 0.30);
  --color-text-primary: #D8E0E1;
  --color-text-secondary: #9DADB0;
  --color-text-heading: #F8F8F8;
  --color-text-bright: #F8F8F8;
  --color-text-muted: #6D8388;
  --color-accent: #A8FF1C;
  --color-notch: #A8FF1C;
  --color-code-bg: #071E24;
  --color-code-border: #3C5A61;
  --color-callout-bg: rgba(160, 193, 203, 0.06);
  --color-callout-border: #3C5A61;
  --color-success: #A7F8CB;
  --color-info: #4E9FF4;
  --color-warning: #A8FF1C;
  --color-error: #FF6B6B;
  --color-border-footer: #3C5A61;
  --color-grid: rgba(160, 193, 203, 0.08);
  --grid-opacity: 0.15;
  --gradient-card-border: none;
  --gradient-card-border-hover: none;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 80px;
  --content-max-width: 1200px;
  --grid-cell-size: 32px;
  --radius-card: 16px;
  --radius-button: 999px;
}

html.light {
  --color-bg-primary: #E3EEF1;
  --color-bg-card: #FFFFFF;
  --color-bg-card-dark: #ECF3F5;
  --color-bg-footer: #E3EEF1;
  --color-bg-button: #0B3139;
  --color-bg-button-hover: #3C5A61;
  --color-bg-button-active: #173B43;
  --color-border-primary: #DCE6E9;
  --color-border-hover: #B3CDD5;
  --color-text-primary: #3C5A61;
  --color-text-secondary: #6D8388;
  --color-text-heading: #0B3139;
  --color-text-bright: #0B3139;
  --color-text-muted: #9DADB0;
  --color-accent: #0B3139;
  --color-notch: #A8FF1C;
  --color-code-bg: #F0F0F0;
  --color-code-border: #DCE6E9;
  --color-callout-bg: #ECF3F5;
  --color-callout-border: #DCE6E9;
  --color-success: #16A34A;
  --color-info: #2563EB;
  --color-warning: #CA8A04;
  --color-error: #DC2626;
  --color-border-footer: #B3CDD5;
  --color-grid: #DCE6E9;
  --grid-opacity: 0.2;
  --gradient-card-border: none;
  --gradient-card-border-hover: none;
}


/* ==========================================================================
   2. Home Page Styles
   ========================================================================== */

body:has(.hero-section-wrapper) article > header:first-child {
  display: none !important;
}

body:has(.hero-section-wrapper) article,
body:has(.hero-section-wrapper) article .fern-prose {
  overflow-x: visible !important;
}

body:has(.hero-section-wrapper) article .fern-prose {
  max-width: none !important;
  padding: 0 !important;
}

/* Hero Section */
body:has(.hero-section-wrapper) .hero-section-wrapper {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: var(--spacing-3xl) 0;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  overflow: hidden;
}

body:has(.hero-section-wrapper) .hero-section-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 15% 20%, rgba(168, 255, 28, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 65% 50%, rgba(160, 193, 203, 0.40) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 75% 35%, rgba(91, 214, 255, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 70%, rgba(168, 255, 28, 0.10) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

body:has(.hero-section-wrapper) .hero-section-wrapper > * {
  position: relative;
  z-index: 1;
}

body:has(.hero-section-wrapper) .hero-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  align-items: center;
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  box-sizing: border-box;
}

body:has(.hero-section-wrapper) .hero-content {
  padding: var(--spacing-lg);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-self: center;
}

body:has(.hero-section-wrapper) .hero-title {
  font-family: 'ABCArizonaSerif', Georgia, 'Times New Roman', serif;
  font-size: 56px;
  font-weight: 300;
  line-height: 1.1;
  margin: 0;
  color: var(--color-text-bright);
}

body:has(.hero-section-wrapper) .hero-description {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  color: var(--color-text-primary);
  max-width: 480px;
}

body:has(.hero-section-wrapper) .hero-image {
  display: block;
  width: 100%;
  align-self: center;
}

body:has(.hero-section-wrapper) .hero-image img {
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* Get Started button - compound style with arrow */
body:has(.hero-section-wrapper) .hero-button-compound {
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  text-decoration: none !important;
  width: fit-content;
}

body:has(.hero-section-wrapper) .hero-button-compound:hover,
body:has(.hero-section-wrapper) .hero-button-compound:focus,
body:has(.hero-section-wrapper) .hero-button-compound:active,
body:has(.hero-section-wrapper) .hero-button-compound:visited {
  text-decoration: none !important;
}
body:has(.hero-section-wrapper) .hero-button-compound:focus-visible {
  text-decoration: none !important; outline: none;
}

body:has(.hero-section-wrapper) .hero-button-compound .hero-button-text {
  background-color: var(--color-bg-button);
  border: 1px solid var(--color-border-hover);
  border-right: none;
  color: var(--color-accent);
  padding: 10px 20px;
  border-radius: 10px 0 0 10px;
  font-family: 'ABCMonumentGrotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

body:has(.hero-section-wrapper) .hero-button-compound .hero-button-arrow {
  background-color: #A8FF1C;
  border: 1px solid #A8FF1C;
  color: #0B3139;
  padding: 10px 14px;
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

body:has(.hero-section-wrapper) .hero-button-compound:hover .hero-button-text {
  background-color: var(--color-bg-button-hover);
  border-color: var(--color-bg-button-hover);
}
body:has(.hero-section-wrapper) .hero-button-compound:focus-within .hero-button-text {
  background-color: var(--color-bg-button-hover);
  border-color: var(--color-bg-button-hover); outline: none;
}

body:has(.hero-section-wrapper) .hero-button-compound:hover .hero-button-arrow {
  background-color: #8FE000;
  border-color: #8FE000;
}
body:has(.hero-section-wrapper) .hero-button-compound:focus-within .hero-button-arrow {
  background-color: #8FE000;
  border-color: #8FE000; outline: none;
}

html.light body:has(.hero-section-wrapper) .hero-button-compound .hero-button-text {
  color: #FFFFFF;
  border-color: transparent;
}

html.light body:has(.hero-section-wrapper) .hero-button-compound .hero-button-arrow {
  background-color: #A8FF1C;
  border-color: #A8FF1C;
  color: #0B3139;
}

html.light body:has(.hero-section-wrapper) .hero-button-compound:hover .hero-button-arrow {
  background-color: #8FE000;
  border-color: #8FE000;
}
html.light body:has(.hero-section-wrapper) .hero-button-compound:focus-within .hero-button-arrow {
  background-color: #8FE000;
  border-color: #8FE000; outline: none;
}

/* Legacy button fallback */
body:has(.hero-section-wrapper) #get-started-button {
  display: none !important;
}

/* ==========================================================================
   Content Section & Homepage Cards (Quickstart/Core Concepts)
   ========================================================================== */

body:has(.hero-section-wrapper) .content-section-wrapper {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: var(--spacing-3xl) 0;
  box-sizing: border-box;
}

/* Secondary aurora gradient behind cards section */
body:has(.hero-section-wrapper) .content-section-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(160, 193, 203, 0.20) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 85% 80%, rgba(91, 214, 255, 0.12) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

body:has(.hero-section-wrapper) .content-section-wrapper > * {
  position: relative;
  z-index: 1;
}

body:has(.hero-section-wrapper) .quickstart-concepts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  box-sizing: border-box;
}

body:has(.hero-section-wrapper) .homepage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-card);
  padding: 32px;
  text-decoration: none;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  box-sizing: border-box;
  gap: var(--spacing-lg);
  min-height: 180px;
  overflow: hidden;
}

body:has(.hero-section-wrapper) .homepage-card::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 8px;
  height: 8px;
  background-color: var(--color-notch);
  border-radius: 2px;
}

body:has(.hero-section-wrapper) .homepage-card:hover {
  border-color: var(--color-border-hover);
  text-decoration: none;
}
body:has(.hero-section-wrapper) .homepage-card:focus-visible {
  border-color: var(--color-border-hover);
  text-decoration: none; outline: none;
}

html.light body:has(.hero-section-wrapper) .homepage-card {
  background-color: var(--color-bg-card);
  border-color: var(--color-border-primary);
}

html.light body:has(.hero-section-wrapper) .homepage-card:hover {
  border-color: var(--color-border-hover);
  text-decoration: none;
}
html.light body:has(.hero-section-wrapper) .homepage-card:focus-visible {
  border-color: var(--color-border-hover);
  text-decoration: none; outline: none;
}

body:has(.hero-section-wrapper) .homepage-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex: 1;
}

body:has(.hero-section-wrapper) .homepage-card-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  color: var(--color-text-bright);
}


body:has(.hero-section-wrapper) .homepage-card-description {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  color: var(--color-text-secondary);
}

body:has(.hero-section-wrapper) .homepage-card-link {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  transition: color 0.15s ease;
}

body:has(.hero-section-wrapper) .homepage-card:hover .homepage-card-link {
  color: var(--color-text-bright);
}
body:has(.hero-section-wrapper) .homepage-card:focus-within .homepage-card-link {
  color: var(--color-text-bright); outline: none;
}

body:has(.hero-section-wrapper) .homepage-card-arrow {
  display: none;
}

/* Card pictogram icons */
body:has(.hero-section-wrapper) .card-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  background-color: rgba(168, 255, 28, 0.10);
  border: 1px solid rgba(168, 255, 28, 0.20);
}

html.light body:has(.hero-section-wrapper) .card-icon {
  background-color: rgba(168, 255, 28, 0.12);
  border-color: rgba(168, 255, 28, 0.25);
}

body:has(.hero-section-wrapper) .card-icon svg {
  width: 28px;
  height: 28px;
  color: #A8FF1C;
}

/* ==========================================================================
   Use Case Cards
   ========================================================================== */

body:has(.hero-section-wrapper) .use-cases-wrapper {
  max-width: var(--content-max-width);
  margin: 66px auto 0 auto;
  padding: 0 var(--spacing-lg);
  box-sizing: border-box;
}

body:has(.hero-section-wrapper) .use-cases-wrapper h2 {
  font-family: 'ABCArizonaSerif', Georgia, 'Times New Roman', serif;
  font-size: 48px;
  font-weight: 300;
  color: var(--color-text-bright);
  margin: var(--spacing-md) 0 0 0;
  text-align: left;
}

body:has(.hero-section-wrapper) .use-cases-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
}

body:has(.hero-section-wrapper) .use-case-card {
  display: block;
  text-decoration: none;
  padding: 0;
  background: none;
  transition: none;
}

body:has(.hero-section-wrapper) .use-case-card:hover {
  background: none;
}
body:has(.hero-section-wrapper) .use-case-card:focus-visible {
  background: none; outline: none;
}

body:has(.hero-section-wrapper) .use-case-card-inner {
  position: relative;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-card);
  padding: var(--spacing-lg);
  min-height: 200px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.2s ease-in-out;
  overflow: hidden;
}

body:has(.hero-section-wrapper) .use-case-card-inner::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 8px;
  height: 8px;
  background-color: var(--color-notch);
  border-radius: 2px;
}

body:has(.hero-section-wrapper) .use-case-card:hover .use-case-card-inner {
  border-color: var(--color-border-hover);
}
body:has(.hero-section-wrapper) .use-case-card:focus-within .use-case-card-inner {
  border-color: var(--color-border-hover); outline: none;
}

html.light body:has(.hero-section-wrapper) .use-case-card-inner {
  background-color: var(--color-bg-card);
  border-color: var(--color-border-primary);
}

html.light
  body:has(.hero-section-wrapper)
  .use-case-card:hover
  .use-case-card-inner {
  border-color: var(--color-border-hover);
}
html.light body:has(.hero-section-wrapper) .use-case-card:focus-within .use-case-card-inner {
  border-color: var(--color-border-hover); outline: none;
}

body:has(.hero-section-wrapper) .use-case-card-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 12px 0;
  color: var(--color-text-bright);
}

body:has(.hero-section-wrapper) .use-case-card-description {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--color-text-secondary);
}

body:has(.hero-section-wrapper) .use-case-card-link {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* ==========================================================================
   Footer — Minimalist with oversized wordmark (matches Figma)
   ========================================================================== */

body:has(.hero-section-wrapper) .footer-wrapper {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 0;
  background-color: var(--color-bg-footer);
  box-sizing: border-box;
  margin-top: var(--spacing-3xl);
  overflow: hidden;
}

body:has(.hero-section-wrapper) .footer-content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  box-sizing: border-box;
}

/* Small lime accent bar at top-left */
body:has(.hero-section-wrapper) .footer-accent-bar {
  width: 32px;
  height: 4px;
  background-color: #A8FF1C;
  border-radius: 2px;
  margin-bottom: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

/* Footer top row: legal links + social icons */
body:has(.hero-section-wrapper) .footer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--spacing-md);
}

body:has(.hero-section-wrapper) .footer-legal {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

body:has(.hero-section-wrapper) .footer-legal a {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

body:has(.hero-section-wrapper) .footer-legal a:hover {
  color: var(--color-text-bright);
}
body:has(.hero-section-wrapper) .footer-legal a:focus-visible {
  color: var(--color-text-bright); outline: none;
}

body:has(.hero-section-wrapper) .footer-legal .footer-copyright {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: var(--spacing-md);
}

body:has(.hero-section-wrapper) .footer-social {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

body:has(.hero-section-wrapper) .footer-social a {
  color: var(--color-text-secondary);
  transition: color 0.15s ease;
}

body:has(.hero-section-wrapper) .footer-social a:hover {
  color: var(--color-text-bright);
}
body:has(.hero-section-wrapper) .footer-social a:focus-visible {
  color: var(--color-text-bright); outline: none;
}

body:has(.hero-section-wrapper) .footer-social svg {
  width: 18px;
  height: 18px;
}

/* Hide external link icons in footer */
body:has(.hero-section-wrapper) .footer-legal a svg {
  display: none !important;
}

body:has(.hero-section-wrapper) .footer-social a svg + svg {
  display: none !important;
}

/* Middesk wordmark */
body:has(.hero-section-wrapper) .footer-wordmark {
  width: 100%;
  margin-bottom: var(--spacing-md);
}

body:has(.hero-section-wrapper) .footer-wordmark-text {
  font-family: 'ABCMonumentGrotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 160px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: #A8FF1C;
  user-select: none;
  pointer-events: none;
}

html.light body:has(.hero-section-wrapper) .footer-wordmark-text {
  color: #0B3139;
}

/* Hide old footer nav (replaced by minimalist design) */
body:has(.hero-section-wrapper) .footer-nav {
  display: none;
}

body:has(.hero-section-wrapper) .footer-bottom {
  display: none;
}

body:has(.hero-section-wrapper) .footer-logo {
  display: none;
}

body:has(.hero-section-wrapper) .footer-logo-dark-green {
  display: none;
}

body:has(.hero-section-wrapper) .footer-logo-lime {
  display: none;
}

/* ==========================================================================
   3. Navigation Overrides
   ========================================================================== */

/* P1: Sidebar polish — active state */
.fern-sidebar-link[data-state=active] {
  background-color: rgba(255, 255, 255, 0.06);
}

html.light .fern-sidebar-link[data-state=active] {
  background-color: rgba(11, 49, 57, 0.06);
}

/* P1: Sidebar links — smooth transitions */
.fern-sidebar-link {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* P1: Sidebar section headers — slight visual distinction */
.fern-sidebar-heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

[data-radix-collection-item][data-state=active] > span,
.fern-sidebar-link[data-state=active] .fern-sidebar-link-title-inner {
  -webkit-text-stroke: 0;
}

html.light [data-radix-collection-item][data-state=active],
html.light [data-radix-collection-item][data-state=active] > span,
html.light .fern-sidebar-link[data-state=active],
html.light .fern-sidebar-link[data-state=active] .fern-sidebar-link-title-inner {
  color: inherit;
}

/* ==========================================================================
   3b. Global Typography - Arizona Serif for display headings
   ========================================================================== */

/* Apply Arizona Serif to h1 and h2 across all pages */
.fern-prose h1,
.fern-prose h2 {
  font-family: 'ABCArizonaSerif', Georgia, 'Times New Roman', serif;
  font-weight: 300;
}

/* ==========================================================================
   3c. Readability & Typography Polish
   ========================================================================== */

/* P0: Body text readability — generous line-height and consistent sizing */
.fern-prose p,
.fern-prose li {
  line-height: 1.75;
  font-size: 16px;
  font-weight: 400;
}

/* P0: Paragraph spacing — breathing room between blocks */
.fern-prose p {
  margin-bottom: 1.25em;
}

/* P0: Heading hierarchy — clear typographic scale */
.fern-prose h1 {
  font-size: 36px;
  line-height: 1.15;
  margin-bottom: 16px;
}

.fern-prose h2 {
  font-size: 28px;
  line-height: 1.2;
  margin-top: 48px;
  margin-bottom: 16px;
}

.fern-prose h3 {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  margin-top: 36px;
  margin-bottom: 12px;
}

/* Fix step number vertical alignment with heading */
.fern-anchor {
  margin-top: 0 !important;
}

.fern-prose h4 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 28px;
  margin-bottom: 8px;
}

/* P0: Max content width for optimal reading line length (~65 chars) */
.fern-prose {
  max-width: 720px;
}

/* Ensure code blocks and tables can be wider than prose max-width */
.fern-prose pre,
.fern-prose table {
  max-width: none;
}

/* P1: Smooth scroll for anchor navigation */
html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   4. Content Page Overrides (Code blocks, Callouts, Tables)
   ========================================================================== */

/* P1: Inline code / tag styling — clean 1px border, no shadow.
   Applied globally (not just .fern-prose) so API reference property badges,
   callout inline code, and all other surfaces are consistent.
   line-height accounts for padding so multi-line tags don't overlap. */
code:not(pre code) {
  background-color: rgba(160, 193, 203, 0.15);
  border: 1px solid rgba(160, 193, 203, 0.35);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 0.875em;
  color: var(--color-text-bright);
  box-shadow: none !important;
  display: inline-block;
  margin: 2px 0;
  line-height: normal;
}

html.light code:not(pre code) {
  background-color: #EDF3F5;
  border-color: #C8D6DB;
  color: #0B3139;
  box-shadow: none !important;
}

/* P0: Code block typography polish.
   Fern wraps code blocks in a parent div with rounded-3 and border-card-border,
   so we avoid adding our own border-radius or left-accent border here to prevent
   inner rounded corners and a disconnected left highlight when a title bar is present.
   Keep padding/line-height minimal so lines sit tight like the live docs. */
.fern-prose pre {
  background-color: var(--color-code-bg) !important;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Ensure code block inner tables (Fern renders lines as <pre><table>) inherit
   clean, borderless styling — no row dividers, no zebra stripes, no extra padding. */
.fern-prose pre table,
.fern-prose pre table td,
.fern-prose pre table th,
.fern-prose pre table tr {
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

.fern-prose pre table tr:nth-child(even) td {
  background: none !important;
}

.fern-prose pre table tr:hover td {
  background: none !important;
}
.fern-prose pre table tr:focus-within td {
  background: none !important; outline: none;
}

/* P2: Table styling — clean, compact rows matching live docs.
   Scoped with :not(pre table) so code block tables are unaffected. */
.fern-prose table:not(pre table) {
  border-collapse: collapse;
  width: 100%;
  border: none;
}

.fern-prose table:not(pre table) th {
  color: var(--color-text-bright);
  font-weight: 500;
  font-size: 13px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Table header bar — distinct header feel with subtle top highlight.
   Dark mode uses a slightly lifted background (lighter than page bg #0B3139)
   so the header reads as a proper bar. Light mode keeps its existing feel.
   Both get a 1px top border for definition. */
table:not(pre table) thead th {
  background-color: rgba(22, 68, 78, 0.8) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(160, 193, 203, 0.15) !important;
}

html.light table:not(pre table) thead th {
  background-color: rgba(218, 232, 237, 0.95) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(11, 49, 57, 0.1) !important;
}

.fern-prose table:not(pre table) td,
.fern-prose table:not(pre table) th {
  border: 1px solid var(--color-border-primary);
  border-left: none;
  border-right: none;
  padding: 8px 8px;
}

.fern-prose table:not(pre table) tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, 0.02);
}

html.light .fern-prose table:not(pre table) tr:nth-child(even) td {
  background-color: rgba(11, 49, 57, 0.02);
}

.fern-prose table:not(pre table) tr:hover td {
  background-color: var(--color-bg-card);
}
.fern-prose table:not(pre table) tr:focus-within td {
  background-color: var(--color-bg-card); outline: none;
}

/* P2: Blockquote refinement */
.fern-prose blockquote {
  border-left: 2px solid #A0C1CB;
  padding-left: 20px;
  color: var(--color-text-secondary);
  margin-left: 0;
  font-style: italic;
  background: rgba(160, 193, 203, 0.04);
  padding: 12px 20px;
  border-radius: 0 8px 8px 0;
}

html.light .fern-prose blockquote {
  background: rgba(160, 193, 203, 0.08);
}

.fern-prose hr {
  border: none;
  border-top: 1px solid var(--color-border-primary);
}

/* Global: remove underlines from all links on hover */
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
}

/* P1: Link styling — distinct colors with smooth transitions.
   Applied consistently across prose, callouts, and all content surfaces. */
.fern-prose a:not(.homepage-card):not(.use-case-card) {
  color: #5BD6FF;
  text-decoration: none;
  transition: color 0.2s ease;
}

.fern-prose a:not(.homepage-card):not(.use-case-card):hover {
  color: #8FE5FF;
  text-decoration: none;
}
.fern-prose a:not(.homepage-card):not(.use-case-card):focus-visible {
  color: #8FE5FF;
  text-decoration: none; outline: none;
}

html.light .fern-prose a:not(.homepage-card):not(.use-case-card) {
  color: #0B3139;
  text-decoration: none;
}

html.light .fern-prose a:not(.homepage-card):not(.use-case-card):hover {
  color: #3C5A61;
  text-decoration: none;
}
html.light .fern-prose a:not(.homepage-card):not(.use-case-card):focus-visible {
  color: #3C5A61;
  text-decoration: none; outline: none;
}

/* Callout links — same color treatment as prose links for consistency */
.fern-callout a,
[class*='callout'] a {
  color: #5BD6FF;
  text-decoration: none;
  transition: color 0.2s ease;
}

.fern-callout a:hover,
[class*='callout'] a:hover {
  color: #8FE5FF;
  text-decoration: none;
}
.fern-callout a:focus-visible,
[class*='callout'] a:focus-visible {
  color: #8FE5FF;
  text-decoration: none; outline: none;
}

html.light .fern-callout a,
html.light [class*='callout'] a {
  color: #0B3139;
  text-decoration: none;
}

html.light .fern-callout a:hover,
html.light [class*='callout'] a:hover {
  color: #3C5A61;
  text-decoration: none;
}
html.light .fern-callout a:focus-visible,
html.light [class*='callout'] a:focus-visible {
  color: #3C5A61;
  text-decoration: none; outline: none;
}

/* External link icons — always inherit the parent link's color.
   Fern adds an SVG arrow icon to external links; by default it uses a muted
   color that doesn't match the link text. This rule ensures the icon color
   stays consistent with the link text across all surfaces.
   The vertical-align: middle aligns to the font's x-height, which sits ~1.5px
   low visually. A small negative top offset centers the icon with the text. */
a svg {
  color: inherit !important;
}

.fern-prose a svg,
.fern-callout a svg,
[class*='callout'] a svg {
  position: relative;
  top: -1px;
}

/* P2: Callout/admonition box styling with brand colors */
.fern-callout,
[class*='callout'] {
  border-radius: 8px !important;
  padding: 16px 20px !important;
}

/* Fix callout icon vertical alignment — center icon with first line of text.
   Fern's text wrapper uses -my-4 (margin-top: -16px) + ::before (margin-bottom: 16px)
   to position content. But <p> elements have margin-top: 20px from prose styles,
   which collapses to max(16,20)=20px — 4px more than the -16px compensates for.
   Similarly, empty <h5> titles (no-title callouts) add spurious spacing.

   Fix: (a) zero out the first child's margin-top inside the text wrapper so the
   first visible content starts flush at flex-start, (b) give the icon div a height
   of 24px (midpoint between h5 22px and body-text 28px line-height) with flexbox
   centering so the 20px SVG lands within 1-2px of center for both content types.
   Measured: h5 diff = 1px, body-text diff = 2px. */
.fern-callout > div > div:first-child {
  margin-top: 0 !important;
  display: flex;
  align-items: center;
  height: 24px;
}

/* Zero margin-top on the first visible content inside callout text wrapper.
   Targets h5 (callout title) and the first p/ul after an empty h5. */
.fern-callout > div > div:last-child > h5:first-child {
  margin-top: 0 !important;
}
.fern-callout > div > div:last-child > h5:first-child + p,
.fern-callout > div > div:last-child > h5:first-child + ul {
  margin-top: 0 !important;
}

/* Info callout */
.fern-callout[data-type='info'],
[class*='callout-info'] {
  border-left: 3px solid #4E9FF4 !important;
  background-color: rgba(78, 159, 244, 0.06) !important;
}

/* Warning callout */
.fern-callout[data-type='warning'],
[class*='callout-warning'] {
  border-left: 3px solid #A8FF1C !important;
  background-color: rgba(168, 255, 28, 0.06) !important;
}

/* Error/Danger callout */
.fern-callout[data-type='error'],
.fern-callout[data-type='danger'],
[class*='callout-error'],
[class*='callout-danger'] {
  border-left: 3px solid #FF6B6B !important;
  background-color: rgba(255, 107, 107, 0.06) !important;
}

/* Success callout */
.fern-callout[data-type='success'],
[class*='callout-success'] {
  border-left: 3px solid #A7F8CB !important;
  background-color: rgba(167, 248, 203, 0.06) !important;
}

/* Note/Tip callout */
.fern-callout[data-type='note'],
.fern-callout[data-type='tip'],
[class*='callout-note'],
[class*='callout-tip'] {
  border-left: 3px solid #A0C1CB !important;
  background-color: rgba(160, 193, 203, 0.06) !important;
}

/* ==========================================================================
   5. API Reference Page Styles
   ========================================================================== */

body:has([class*='api-reference']) .fern-layout-footer-toolbar,
body:has([class*='api-reference']) .fern-footer-nav {
  display: none !important;
}

/* ==========================================================================
   5b. Interactive States & Micro-Interactions
   ========================================================================== */

/* P3: Global smooth transitions for interactive elements */
.fern-sidebar-link,
.fern-prose a,
button,
[role='button'] {
  transition: all 0.2s ease-in-out;
}

/* P3: Focus states for accessibility with brand colors */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[role='button']:focus-visible {
  outline: 2px solid rgba(168, 255, 28, 0.5);
  outline-offset: 2px;
}

html.light a:focus-visible,
html.light button:focus-visible,
html.light input:focus-visible,
html.light [role='button']:focus-visible {
  outline-color: rgba(11, 49, 57, 0.3);
}

/* P2: Table of contents (right sidebar) styling */
.fern-layout-toc a {
  font-size: 13px;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.fern-layout-toc a:hover {
  color: var(--color-text-bright);
}
.fern-layout-toc a:focus-visible {
  color: var(--color-text-bright); outline: none;
}

.fern-layout-toc a[data-active='true'],
.fern-layout-toc a.active {
  color: var(--color-text-bright);
  border-left: 2px solid #A8FF1C;
  padding-left: 8px;
}

html.light .fern-layout-toc a[data-active='true'],
html.light .fern-layout-toc a.active {
  border-left-color: #0B3139;
}

/* P2: Light mode card hover — subtle shadow for dimensionality */
html.light body:has(.hero-section-wrapper) .homepage-card:hover,
html.light body:has(.hero-section-wrapper) .use-case-card:hover .use-case-card-inner {
  box-shadow: 0 2px 12px rgba(11, 49, 57, 0.08);
}
html.light body:has(.hero-section-wrapper) .homepage-card:focus-visible,
html.light body:has(.hero-section-wrapper) .use-case-card:focus-within .use-case-card-inner {
  box-shadow: 0 2px 12px rgba(11, 49, 57, 0.08); outline: none;
}

/* P3: Search bar brand styling */
.fern-search-bar,
[class*='search-bar'],
.fern-header-search-bar {
  border-radius: 10px !important;
}

.fern-search-bar:focus-within,
[class*='search-bar']:focus-within {
  border-color: var(--color-border-hover) !important;
}

/* P3: "Was this page helpful?" feedback section brand styling */
.fern-feedback button,
[class*='feedback'] button {
  border-radius: 999px;
  transition: all 0.2s ease-in-out;
}

/* ==========================================================================
   6. Responsive Design
   ========================================================================== */

@media (max-width: 1024px) {

  body:has(.hero-section-wrapper) .hero-section {
    gap: var(--spacing-xl);
  }

  body:has(.hero-section-wrapper) .hero-title {
    font-size: 42px;
  }

  body:has(.hero-section-wrapper) .hero-description {
    font-size: 16px;
  }

  body:has(.hero-section-wrapper) .use-cases-wrapper h2 {
    font-size: 36px;
  }

}

@media (max-width: 768px) {

  body:has(.hero-section-wrapper) .hero-section {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
  }

  body:has(.hero-section-wrapper) .hero-title {
    font-size: 36px;
  }

  body:has(.hero-section-wrapper) .hero-description {
    font-size: 16px;
  }

  body:has(.hero-section-wrapper) .quickstart-concepts-section {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    margin-bottom: 0;
  }

  body:has(.hero-section-wrapper) .homepage-card {
    padding: var(--spacing-lg);
    min-height: auto;
  }

  body:has(.hero-section-wrapper) .homepage-card-title {
    font-size: 18px;
  }

  body:has(.hero-section-wrapper) .use-cases-wrapper {
    margin-top: var(--spacing-sm);
    padding: 0 var(--spacing-lg);
  }

  body:has(.hero-section-wrapper) .use-cases-wrapper h2 {
    margin: 0;
    font-size: 28px;
  }

  body:has(.hero-section-wrapper) .use-cases-section {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
  }

  body:has(.hero-section-wrapper) .use-case-card-inner {
    min-height: auto;
    padding: var(--spacing-lg);
  }

  body:has(.hero-section-wrapper) .footer-wrapper {
    margin-top: var(--spacing-xl);
  }

  body:has(.hero-section-wrapper) .footer-top-row {
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: flex-start;
  }

  body:has(.hero-section-wrapper) .footer-wordmark-text {
    font-size: 100px;
  }

}

@media (max-width: 480px) {

  body:has(.hero-section-wrapper) .hero-section-wrapper {
    padding: var(--spacing-xl) 0;
  }

  body:has(.hero-section-wrapper) .hero-content {
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
  }

  body:has(.hero-section-wrapper) .hero-title {
    font-size: 28px;
  }

  body:has(.hero-section-wrapper) .content-section-wrapper {
    padding: var(--spacing-sm);
  }

  body:has(.hero-section-wrapper) .quickstart-concepts-section {
    gap: 12px;
  }

  body:has(.hero-section-wrapper) .use-cases-wrapper {
    margin-top: var(--spacing-sm);
    padding: 0 var(--spacing-lg);
  }

  body:has(.hero-section-wrapper) .use-cases-section {
    gap: 12px;
    margin-top: var(--spacing-sm);
  }

  body:has(.hero-section-wrapper) .use-case-card-inner {
    padding: var(--spacing-md);
  }

  body:has(.hero-section-wrapper) .footer-wrapper {
    margin-top: var(--spacing-lg);
  }

  body:has(.hero-section-wrapper) .footer-wordmark-text {
    font-size: 72px;
  }

}

/*
  Middesk docs flowchart — shared styles
  ────────────────────────────────────────
  Scoped to .md-docs-diagram so nothing leaks into the rest of Fern.
  Drop-in for any MDX page: just wrap your SVG in <div className="md-docs-diagram">.

  Theme:
    • Dark is the default (:root / no class).
    • Light overrides live under html.light .md-docs-diagram.

  Color system (actor-semantic):
    sky    → client actions
    violet → Middesk processing
    lime   → brand accent / payoff moment
    success → approved outcome
    rose   → rejected outcome

  Typography:
    • Body/titles inherit ABCMonumentGrotesk from Fern.
    • Chips, stamps, phase labels use ABCMonumentGroteskMono.
*/

/* ───────── Container + dark-mode tokens (default) ───────── */

.md-docs-diagram {
  display: block;
  width: 100%;
  margin: 32px 0;

  --md-sky:           #4ECDC4;
  --md-sky-dim:       rgba(78, 205, 196, 0.10);
  --md-sky-border:    rgba(78, 205, 196, 0.55);

  --md-violet:        #A78BFA;
  --md-violet-dim:    rgba(167, 139, 250, 0.10);
  --md-violet-border: rgba(167, 139, 250, 0.55);

  --md-lime:          #A8FF1C;
  --md-lime-dim:      rgba(168, 255, 28, 0.10);
  --md-lime-border:   rgba(168, 255, 28, 0.55);

  --md-success:       #A7F8CB;
  --md-success-dim:   rgba(167, 248, 203, 0.10);
  --md-success-border: rgba(167, 248, 203, 0.45);

  --md-rose:          #FB7185;
  --md-rose-dim:      rgba(251, 113, 133, 0.10);
  --md-rose-border:   rgba(251, 113, 133, 0.50);

  --md-text-heading:  #F8F8F8;
  --md-text-body:     #D8E0E1;
  --md-text-muted:    #9DADB0;
  --md-surface:       rgba(255, 255, 255, 0.06);
  --md-surface-solid: #143D45;
  --md-surface-muted: rgba(255, 255, 255, 0.06);
  --md-border:        rgba(227, 238, 241, 0.15);
  --md-bg-page:       #0B3139;
}

/* ───────── Light-mode overrides ───────── */

html.light .md-docs-diagram {
  --md-sky:           #1F8C83;
  --md-sky-dim:       rgba(31, 140, 131, 0.08);
  --md-sky-border:    rgba(31, 140, 131, 0.45);

  --md-violet:        #6B4FB0;
  --md-violet-dim:    rgba(107, 79, 176, 0.10);
  --md-violet-border: rgba(107, 79, 176, 0.45);

  --md-lime:          #0B3139;
  --md-lime-dim:      rgba(11, 49, 57, 0.08);
  --md-lime-border:   rgba(11, 49, 57, 0.40);

  --md-success:       #16A34A;
  --md-success-dim:   rgba(22, 163, 74, 0.08);
  --md-success-border: rgba(22, 163, 74, 0.40);

  --md-rose:          #DC2F48;
  --md-rose-dim:      rgba(220, 47, 72, 0.06);
  --md-rose-border:   rgba(220, 47, 72, 0.35);

  --md-text-heading:  #0B3139;
  --md-text-body:     #2E4A51;
  --md-text-muted:    #5A7479;
  --md-surface:       #FFFFFF;
  --md-surface-solid: #FFFFFF;
  --md-surface-muted: #ECF3F5;
  --md-border:        #B0C4CA;
  --md-bg-page:       #E3EEF1;
}

/* ───────── SVG canvas ───────── */

.md-docs-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 640px;
  margin: 0 auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ───────── Eyebrow + title above the SVG ───────── */

.md-docs-diagram .md-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'ABCMonumentGroteskMono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--md-lime);
  margin-bottom: 10px;
}
.md-docs-diagram .md-eyebrow::before {
  content: ''; display: block; width: 20px; height: 1px; background: var(--md-lime);
}
.md-docs-diagram .md-eyebrow-title {
  font-family: inherit;
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--md-text-heading);
  margin-bottom: 24px;
}

/* ───────── Phase dividers (pill + hairline rules) ───────── */

.md-docs-diagram .md-phase-label {
  font-family: 'ABCMonumentGroteskMono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.md-docs-diagram .md-phase-label--sky    { fill: var(--md-sky); }
.md-docs-diagram .md-phase-label--violet { fill: var(--md-violet); }
.md-docs-diagram .md-phase-label--lime   { fill: var(--md-lime); }

.md-docs-diagram .md-phase-pill-bg       { fill: var(--md-surface); }
.md-docs-diagram .md-phase-pill-border--sky    { stroke: var(--md-sky-border);    stroke-width: 1; fill: none; }
.md-docs-diagram .md-phase-pill-border--violet { stroke: var(--md-violet-border); stroke-width: 1; fill: none; }
.md-docs-diagram .md-phase-pill-border--lime   { stroke: var(--md-lime-border);   stroke-width: 1; fill: none; }

.md-docs-diagram .md-phase-rule { stroke-width: 1; }
.md-docs-diagram .md-phase-rule--sky    { stroke: var(--md-sky);    stroke-opacity: 0.55; }
.md-docs-diagram .md-phase-rule--violet { stroke: var(--md-violet); stroke-opacity: 0.55; }
.md-docs-diagram .md-phase-rule--lime   { stroke: var(--md-lime);   stroke-opacity: 0.55; }

/* ───────── Node cards ───────── */

.md-docs-diagram .md-node-bg         { fill: var(--md-surface-solid); stroke: var(--md-border); stroke-width: 1; }
.md-docs-diagram .md-node-bg--sky    { stroke: var(--md-sky-border);    stroke-width: 1; }
.md-docs-diagram .md-node-bg--violet { stroke: var(--md-violet-border); stroke-width: 1; }
.md-docs-diagram .md-node-bg--lime   { stroke: var(--md-lime-border);   stroke-width: 1; }
.md-docs-diagram .md-node-bg--success { stroke: var(--md-success-border); stroke-width: 1; }
.md-docs-diagram .md-node-bg--rose   { stroke: var(--md-rose-border);    stroke-width: 1; }

.md-docs-diagram .md-node-title {
  font-family: inherit;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  fill: var(--md-text-heading);
  paint-order: stroke; stroke: none;
}
.md-docs-diagram .md-node-sub {
  font-family: inherit;
  font-size: 12px; font-weight: 400;
  fill: var(--md-text-muted);
}

/* ───────── Actor stamps ───────── */

.md-docs-diagram .md-actor-stamp {
  font-family: 'ABCMonumentGroteskMono', ui-monospace, monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.md-docs-diagram .md-actor-stamp--sky    { fill: var(--md-sky); }
.md-docs-diagram .md-actor-stamp--violet { fill: var(--md-violet); }
.md-docs-diagram .md-actor-stamp--lime   { fill: var(--md-lime); }
.md-docs-diagram .md-actor-stamp--success { fill: var(--md-success); }
.md-docs-diagram .md-actor-stamp--rose   { fill: var(--md-rose); }

/* ───────── Status chips ───────── */

.md-docs-diagram .md-chip-bg          { fill: var(--md-surface-muted); stroke: var(--md-border); stroke-width: 1; }
.md-docs-diagram .md-chip-bg--sky     { fill: var(--md-sky-dim);     stroke: var(--md-sky-border);    stroke-width: 1; }
.md-docs-diagram .md-chip-bg--violet  { fill: var(--md-violet-dim);  stroke: var(--md-violet-border); stroke-width: 1; }
.md-docs-diagram .md-chip-bg--lime    { fill: var(--md-lime-dim);    stroke: var(--md-lime-border);   stroke-width: 1; }
.md-docs-diagram .md-chip-bg--success { fill: var(--md-success-dim); stroke: var(--md-success-border); stroke-width: 1; }
.md-docs-diagram .md-chip-bg--error   { fill: var(--md-rose-dim);    stroke: var(--md-rose-border);    stroke-width: 1; }

.md-docs-diagram .md-chip-text {
  font-family: 'ABCMonumentGroteskMono', ui-monospace, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  fill: var(--md-text-heading);
}
.md-docs-diagram .md-chip-text--sky     { fill: var(--md-sky); }
.md-docs-diagram .md-chip-text--violet  { fill: var(--md-violet); }
.md-docs-diagram .md-chip-text--lime    { fill: var(--md-lime); }
.md-docs-diagram .md-chip-text--success { fill: var(--md-success); }
.md-docs-diagram .md-chip-text--error   { fill: var(--md-rose); }

/* ───────── Notch (accent dot on payoff nodes) ───────── */

.md-docs-diagram .md-notch { fill: var(--md-lime); }

/* ───────── Connectors ───────── */

.md-docs-diagram .md-connector { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.md-docs-diagram .md-connector--muted { stroke: var(--md-text-muted); opacity: 0.6; }
.md-docs-diagram .md-connector--dashed { stroke-dasharray: 8 6; }

.md-docs-diagram .md-connector-label-bg { fill: var(--md-bg-page); stroke: var(--md-border); stroke-width: 1; }
.md-docs-diagram .md-connector-label-bg--dashed { fill: var(--md-bg-page); stroke: var(--md-border); stroke-width: 1; stroke-dasharray: 6 4; }
.md-docs-diagram .md-connector-label {
  font-family: 'ABCMonumentGroteskMono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  fill: var(--md-text-body);
}

/* ───────── Swimlane headers ───────── */

.md-docs-diagram .md-swimlane-header {
  fill: var(--md-surface-solid);
  stroke: var(--md-border);
  stroke-width: 1;
}
.md-docs-diagram .md-swimlane-header--sky    { stroke: var(--md-sky-border); }
.md-docs-diagram .md-swimlane-header--violet { stroke: var(--md-violet-border); }

.md-docs-diagram .md-swimlane-label {
  font-family: 'ABCMonumentGroteskMono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.md-docs-diagram .md-swimlane-label--sky    { fill: var(--md-sky); }
.md-docs-diagram .md-swimlane-label--violet { fill: var(--md-violet); }

/* ───────── Decision diamond ───────── */

.md-docs-diagram .md-diamond-bg {
  fill: var(--md-surface-solid);
  stroke: var(--md-border);
  stroke-width: 1;
  stroke-linejoin: round;
}
.md-docs-diagram .md-diamond-bg--sky    { stroke: var(--md-sky-border); }
.md-docs-diagram .md-diamond-bg--violet { stroke: var(--md-violet-border); }

.md-docs-diagram .md-diamond-text {
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  fill: var(--md-text-heading);
}

/* ───────── Callout boxes (annotation/info) ───────── */

.md-docs-diagram .md-callout-bg {
  fill: var(--md-surface-muted);
  stroke: var(--md-border);
  stroke-width: 1;
  stroke-dasharray: 6 3;
}
.md-docs-diagram .md-callout-title {
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  fill: var(--md-text-body);
}
.md-docs-diagram .md-callout-item {
  font-family: 'ABCMonumentGroteskMono', ui-monospace, monospace;
  font-size: 12px; font-weight: 400;
  fill: var(--md-text-muted);
}

/* ───────── Sequence step annotations ───────── */

.md-docs-diagram .md-step-label {
  font-family: inherit;
  font-size: 11.5px; font-weight: 400;
  fill: var(--md-text-body);
}
.md-docs-diagram .md-step-number {
  font-family: 'ABCMonumentGroteskMono', ui-monospace, monospace;
  font-size: 11.5px; font-weight: 700;
  fill: var(--md-text-heading);
}

/* ───────── Swimlane column shading ───────── */

.md-docs-diagram .md-swimlane-col {
  opacity: 0.45;
}
.md-docs-diagram .md-swimlane-col--sky {
  fill: var(--md-sky-dim);
}
.md-docs-diagram .md-swimlane-col--violet {
  fill: var(--md-violet-dim);
}