/*fern-site-stylesheet*/@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/_fern-files/moveworks.docs.buildwithfern.com/b07f829b982f6cd9fffea053209fe0d55cb9e6d72ec8573db6ee5041a6f5dd2d/docs/assets/fonts/IBM-Plex-Sans/IBMPlexSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/_fern-files/moveworks.docs.buildwithfern.com/b671eb45841ccc8422ac861314408748f0b00a208f50bad3c96bb1760aeccb7d/docs/assets/fonts/IBM-Plex-Sans/IBMPlexSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/_fern-files/moveworks.docs.buildwithfern.com/27ad6c38e08eab651555cbda1323caeaf9ebe15a1f4891ad1b85598f8229d96d/docs/assets/fonts/IBM-Plex-Sans/IBMPlexSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/_fern-files/moveworks.docs.buildwithfern.com/27ad6c38e08eab651555cbda1323caeaf9ebe15a1f4891ad1b85598f8229d96d/docs/assets/fonts/IBM-Plex-Sans/IBMPlexSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/_fern-files/moveworks.docs.buildwithfern.com/b671eb45841ccc8422ac861314408748f0b00a208f50bad3c96bb1760aeccb7d/docs/assets/fonts/IBM-Plex-Sans/IBMPlexSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    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: 30px;
  --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'IBM Plex Sans', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

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


:root {
  --accent-1: #f3f3f3;
  --accent-2: #efefef;
  --accent-3: #e5e5e5;
  --accent-4: #ddd;
  --accent-5: #d5d5d5;
  --accent-6: #cdcdcd;
  --accent-7: #c2c2c2;
  --accent-8: #aeaeae;
  --accent-9: #1d1d1d;
  --accent-10: #333;
  --accent-11: #595959;
  --accent-12: #202020;

  --accent-a1: #e8edff5e;
  --accent-a2: #b6c6ff29;
  --accent-a3: #07279b16;
  --accent-a4: #041b6d1e;
  --accent-a5: #02135226;
  --accent-a6: #010f412e;
  --accent-a7: #040e343a;
  --accent-a8: #0109224e;
  --accent-a9: #010102e2;
  --accent-a10: #000104cb;
  --accent-a11: #020309a5;
  --accent-a12: #010102df;

  --accent-contrast: #fff;
  --accent-surface: #edeef0cc;
  --accent-indicator: #1d1d1d;
  --accent-track: #1d1d1d;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --accent-1: oklch(96.4% 0 none);
      --accent-2: oklch(95.2% 0 none);
      --accent-3: oklch(92.3% 0 none);
      --accent-4: oklch(89.7% 0 none);
      --accent-5: oklch(87.3% 0 none);
      --accent-6: oklch(84.7% 0 none);
      --accent-7: oklch(81.3% 0 none);
      --accent-8: oklch(75.2% 0 none);
      --accent-9: oklch(23.1% 0 none);
      --accent-10: oklch(32.1% 0 none);
      --accent-11: oklch(46.5% 0 none);
      --accent-12: oklch(24.3% 0 none);

      --accent-a1: color(display-p3 0.9098 0.9255 1 / 0.334);
      --accent-a2: color(display-p3 0.6275 0.6902 1 / 0.112);
      --accent-a3: color(display-p3 0.0118 0.098 0.5451 / 0.081);
      --accent-a4: color(display-p3 0.0078 0.0667 0.3765 / 0.113);
      --accent-a5: color(display-p3 0.0039 0.051 0.2824 / 0.145);
      --accent-a6: color(display-p3 0.0039 0.0392 0.2235 / 0.177);
      --accent-a7: color(display-p3 0.0039 0.0314 0.1647 / 0.221);
      --accent-a8: color(display-p3 0.0039 0.0235 0.1137 / 0.302);
      --accent-a9: color(display-p3 0 0 0.0078 / 0.884);
      --accent-a10: color(display-p3 0 0.0039 0.0157 / 0.796);
      --accent-a11: color(display-p3 0 0.0078 0.0235 / 0.643);
      --accent-a12: color(display-p3 0 0 0.0078 / 0.872);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9294 0.9333 0.9412 / 0.8);
      --accent-indicator: oklch(23.1% 0 none);
      --accent-track: oklch(23.1% 0 none);
    }
  }
}


:root {
  --grayscale-1: #fcfdfc;
  --grayscale-2: #f8faf8;
  --grayscale-3: #eff1ef;
  --grayscale-4: #e7e9e7;
  --grayscale-5: #dfe2df;
  --grayscale-6: #d7dad7;
  --grayscale-7: #cccfcc;
  --grayscale-8: #b9bcb8;
  --grayscale-9: #898e87;
  --grayscale-10: #7f847d;
  --grayscale-11: #60655f;
  --grayscale-12: #1d211c;

  --grayscale-a1: #00550003;
  --grayscale-a2: #00490007;
  --grayscale-a3: #00200010;
  --grayscale-a4: #00160018;
  --grayscale-a5: #00180020;
  --grayscale-a6: #00140028;
  --grayscale-a7: #000f0033;
  --grayscale-a8: #040f0047;
  --grayscale-a9: #050f0078;
  --grayscale-a10: #040e0082;
  --grayscale-a11: #020a00a0;
  --grayscale-a12: #010600e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #898e87;
  --grayscale-track: #898e87;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --grayscale-1: color(display-p3 0.989 0.992 0.989);
      --grayscale-2: color(display-p3 0.974 0.98 0.973);
      --grayscale-3: color(display-p3 0.939 0.945 0.937);
      --grayscale-4: color(display-p3 0.907 0.914 0.905);
      --grayscale-5: color(display-p3 0.878 0.885 0.875);
      --grayscale-6: color(display-p3 0.846 0.855 0.843);
      --grayscale-7: color(display-p3 0.803 0.812 0.8);
      --grayscale-8: color(display-p3 0.727 0.738 0.723);
      --grayscale-9: color(display-p3 0.541 0.556 0.532);
      --grayscale-10: color(display-p3 0.5 0.515 0.491);
      --grayscale-11: color(display-p3 0.38 0.395 0.374);
      --grayscale-12: color(display-p3 0.117 0.129 0.111);

      --grayscale-a1: #00550003;
      --grayscale-a2: #00490007;
      --grayscale-a3: #00200010;
      --grayscale-a4: #00160018;
      --grayscale-a5: #00180020;
      --grayscale-a6: #00140028;
      --grayscale-a7: #000f0033;
      --grayscale-a8: #040f0047;
      --grayscale-a9: #050f0078;
      --grayscale-a10: #040e0082;
      --grayscale-a11: #020a00a0;
      --grayscale-a12: #010600e3;

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


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

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

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

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

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

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


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

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

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

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

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

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

:root {
  color-scheme: light;
  --accent: rgba(29, 29, 29, 1);
  --background: rgba(250, 247, 236, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #faf7ec;
}

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

/* ==========================================================================
   Moveworks Documentation - Custom Styles
   
   Table of Contents:
   0. Global Typography Fixes
   1. CSS Custom Properties (Design Tokens)
   2. Landing Page Styles
      2.1 Layout & Hero Section
      2.2 Buttons
      2.3 Products Section
      2.4 Quick Start Section
      2.5 Community Section
      2.6 Footer
   3. SVG Hero Animations
   4. Responsive Design
   ========================================================================== */

/* ==========================================================================
   0. Global Typography Fixes
   ========================================================================== */

strong,
b {
  font-weight: 700 !important;
}

/* ==========================================================================
   1. CSS Custom Properties - Design Tokens
   ========================================================================== */

:root {
  /* Moveworks brand colors */
  --mw-purple: #a0a6ff;
  --mw-purple-hover: #cfd2ff;

  /* Background colors */
  --mw-bg-primary: #ffffff;
  --mw-bg-secondary: #f8f9fa;
  --mw-bg-hero: #faf7ec;
  /* Text colors */
  --mw-text-primary: #1a1a2e;
  --mw-text-secondary: #4a5568;
  --mw-text-light: #ffffff;
  --mw-text-muted: rgba(255, 255, 255, 0.7);

  /* Border colors */
  --mw-border-light: #e2e8f0;
  --mw-border-card: #E5E0DA;

  /* Spacing scale */
  --mw-spacing-xs: 8px;
  --mw-spacing-sm: 16px;
  --mw-spacing-md: 24px;
  --mw-spacing-lg: 32px;
  --mw-spacing-xl: 48px;
  --mw-spacing-2xl: 64px;
  --mw-spacing-3xl: 80px;

  /* Layout */
  --mw-content-max-width: 1200px;

  /* Typography */
  --mw-font-family:
    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
}

/* Light mode overrides */
html.light body:has(.hero-section-wrapper) {
  --mw-bg-primary: #faf7ec;
  --mw-bg-secondary: #faf7ec;
  --mw-bg-hero: #faf7ec;
}

/* Dark mode overrides */
html.dark body:has(.hero-section-wrapper) {
  --mw-bg-primary: #0a0a0a;
  --mw-bg-secondary: #111111;
  --mw-bg-hero: #000000;
  --mw-text-primary: #ffffff;
  --mw-text-secondary: #a0a0a0;
  --mw-border-light: #333333;
  --mw-border-card: #333333;
}

html.dark body:has(.hero-section-wrapper) {
  background-color: #000000 !important;
}

/* Dark mode section backgrounds */
html.dark body:has(.hero-section-wrapper) .hero-section-wrapper {
  background-color: #000000 !important;
}

html.dark body:has(.hero-section-wrapper) .products-section-wrapper,
html.dark body:has(.hero-section-wrapper) .quickstart-section-wrapper {
  background-color: #0a0a0a !important;
}

/* Dark mode SVG illustration */
html.dark body:has(.hero-section-wrapper) .hero-svg-illustration rect:first-child {
  fill: #1a1a2e;
  stroke: #333333;
}

html.dark body:has(.hero-section-wrapper) .hero-svg-illustration text {
  fill: #ffffff;
}

html.dark body:has(.hero-section-wrapper) .hero-svg-illustration line {
  stroke: #ffffff;
}

html.dark body:has(.hero-section-wrapper) .hero-svg-illustration .hero-connection-line {
  stroke: #ffffff;
}

/* Dark mode text */
html.dark body:has(.hero-section-wrapper) h1,
html.dark body:has(.hero-section-wrapper) h2,
html.dark body:has(.hero-section-wrapper) h3,
html.dark body:has(.hero-section-wrapper) h4 {
  color: #ffffff !important;
}

html.dark body:has(.hero-section-wrapper) .hero-description,
html.dark body:has(.hero-section-wrapper) .product-card-description,
html.dark body:has(.hero-section-wrapper) .quickstart-card-description,
html.dark body:has(.hero-section-wrapper) .community-description {
  color: #a0a0a0 !important;
}

/* Dark mode cards */
html.dark body:has(.hero-section-wrapper) .product-card,
html.dark body:has(.hero-section-wrapper) .quickstart-card {
  background-color: #1a1a2e !important;
  border-color: #333333 !important;
}

html.dark body:has(.hero-section-wrapper) .product-card:hover,
html.dark body:has(.hero-section-wrapper) .quickstart-card:hover {
  border-color: #555555 !important;
}
html.dark body:has(.hero-section-wrapper) .product-card:focus-visible,
html.dark body:has(.hero-section-wrapper) .quickstart-card:focus-visible {
  border-color: #555555 !important;
}

/* Preserve colored left accent borders in dark mode */
html.dark body:has(.hero-section-wrapper) .product-card[data-accent="drift"] {
  border-left-color: #E5E0DA !important;
}
html.dark body:has(.hero-section-wrapper) .product-card[data-accent="haze"] {
  border-left-color: #A0A6FF !important;
}
html.dark body:has(.hero-section-wrapper) .product-card[data-accent="dune"] {
  border-left-color: #FFD468 !important;
}
html.dark body:has(.hero-section-wrapper) .product-card[data-accent="coral"] {
  border-left-color: #FF8668 !important;
}
html.dark body:has(.hero-section-wrapper) .product-card[data-accent="drift"]:hover { border-left-color: #E5E0DA !important; }
html.dark body:has(.hero-section-wrapper) .product-card[data-accent="drift"]:focus-visible { border-left-color: #E5E0DA !important; }
html.dark body:has(.hero-section-wrapper) .product-card[data-accent="haze"]:hover { border-left-color: #A0A6FF !important; }
html.dark body:has(.hero-section-wrapper) .product-card[data-accent="haze"]:focus-visible { border-left-color: #A0A6FF !important; }
html.dark body:has(.hero-section-wrapper) .product-card[data-accent="dune"]:hover { border-left-color: #FFD468 !important; }
html.dark body:has(.hero-section-wrapper) .product-card[data-accent="dune"]:focus-visible { border-left-color: #FFD468 !important; }
html.dark body:has(.hero-section-wrapper) .product-card[data-accent="coral"]:hover { border-left-color: #FF8668 !important; }
html.dark body:has(.hero-section-wrapper) .product-card[data-accent="coral"]:focus-visible { border-left-color: #FF8668 !important; }

html.dark body:has(.hero-section-wrapper) .product-card-title,
html.dark body:has(.hero-section-wrapper) .quickstart-card-title {
  color: #ffffff !important;
}

html.dark body:has(.hero-section-wrapper) .product-card-link,
html.dark body:has(.hero-section-wrapper) .quickstart-card-link {
  color: var(--mw-purple) !important;
}

/* Dark mode community */
html.dark body:has(.hero-section-wrapper) .community-section-wrapper {
  background-color: #0a0a0a !important;
}

html.dark body:has(.hero-section-wrapper) .community-panel {
  background-color: #111118 !important;
}

html.dark body:has(.hero-section-wrapper) .community-link-card {
  background-color: #1a1a2e !important;
  border-color: #333333 !important;
}

html.dark body:has(.hero-section-wrapper) .community-link-card:hover {
  border-color: #555555 !important;
}
html.dark body:has(.hero-section-wrapper) .community-link-card:focus-visible {
  border-color: #555555 !important;
}

html.dark body:has(.hero-section-wrapper) .community-link-card-title {
  color: #ffffff !important;
}

html.dark body:has(.hero-section-wrapper) .community-link-card-description {
  color: #a0a0a0 !important;
}

/* Dark mode buttons */
html.dark body:has(.hero-section-wrapper) .mw-button {
  background-color: var(--mw-purple) !important;
  color: #000000 !important;
  border-color: var(--mw-purple) !important;
}

html.dark body:has(.hero-section-wrapper) .mw-button-outlined {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

html.dark body:has(.hero-section-wrapper) .mw-button-outlined:hover {
  background-color: var(--mw-purple) !important;
  color: #000000 !important;
  border-color: var(--mw-purple) !important;
  border-radius: 16px !important;
}
html.dark body:has(.hero-section-wrapper) .mw-button-outlined:focus-visible {
  background-color: var(--mw-purple) !important;
  color: #000000 !important;
  border-color: var(--mw-purple) !important;
  border-radius: 16px !important;
}

/* Dark mode section eyebrow */
html.dark body:has(.hero-section-wrapper) .section-eyebrow {
  color: var(--mw-purple) !important;
}

/* ==========================================================================
   2. Landing Page Styles
   
   All styles scoped to body:has(.hero-section-wrapper) to prevent
   affecting other pages.
   ========================================================================== */

/* Hide the default page header on landing page */
body:has(.hero-section-wrapper) article > header:first-child {
  display: none !important;
}

/* Hide Fern default footer elements on landing page */
body:has(.hero-section-wrapper) .fern-layout-footer-toolbar,
body:has(.hero-section-wrapper) .fern-footer-nav,
body:has(.hero-section-wrapper) [class*="feedback"],
body:has(.hero-section-wrapper) [class*="Feedback"],
body:has(.hero-section-wrapper) [class*="pagination"],
body:has(.hero-section-wrapper) [class*="Pagination"],
body:has(.hero-section-wrapper) article > footer,
body:has(.hero-section-wrapper) .fern-page-footer {
  display: none !important;
}

/* Hide Copy page button on landing */
body:has(.hero-section-wrapper) [class*="CopyPageButton"],
body:has(.hero-section-wrapper) button[aria-label*="Copy"] {
  display: none !important;
}

/* Allow full-width sections */
body:has(.hero-section-wrapper) article .fern-prose {
  max-width: none !important;
  overflow-x: visible !important;
}

/* Apply font family to landing page */
body:has(.hero-section-wrapper) {
  font-family: var(--mw-font-family) !important;
}

body:has(.hero-section-wrapper) h1,
body:has(.hero-section-wrapper) h2,
body:has(.hero-section-wrapper) h3,
body:has(.hero-section-wrapper) h4,
body:has(.hero-section-wrapper) p,
body:has(.hero-section-wrapper) a,
body:has(.hero-section-wrapper) span,
body:has(.hero-section-wrapper) button {
  font-family: var(--mw-font-family) !important;
}

body:has(.hero-section-wrapper) h1 {
  font-size: 56px !important;
  font-weight: 700 !important;
  color: var(--mw-text-primary) !important;
  margin: 0 0 var(--mw-spacing-md) 0 !important;
  line-height: 1.1 !important;
}

body:has(.hero-section-wrapper) h2 {
  font-size: 36px !important;
  font-weight: 500 !important;
  color: var(--mw-text-primary) !important;
  margin: 0 0 var(--mw-spacing-lg) 0 !important;
  line-height: 1.2 !important;
}

/* Section eyebrow label */
body:has(.hero-section-wrapper) .section-eyebrow {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mw-purple);
  display: block;
  margin-bottom: var(--mw-spacing-sm);
}

/* --------------------------------------------------------------------------
   2.1 Layout & Hero Section
   -------------------------------------------------------------------------- */

/* Full-width wrapper that breaks out of content container */
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(--mw-spacing-3xl) 0;
  background: var(--mw-bg-hero);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* Hero section two-column layout */
body:has(.hero-section-wrapper) .hero-section {
  display: flex;
  gap: var(--mw-spacing-2xl);
  align-items: center;
  max-width: var(--mw-content-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--mw-spacing-lg);
  box-sizing: border-box;
}

body:has(.hero-section-wrapper) .hero-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0;
}

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

body:has(.hero-section-wrapper) .hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-width: 0;
}

body:has(.hero-section-wrapper) .hero-svg-illustration {
  width: 100%;
  max-width: 580px;
  height: auto;
}

/* --------------------------------------------------------------------------
   2.2 Buttons
   -------------------------------------------------------------------------- */

body:has(.hero-section-wrapper) .mw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background-color: #a0a6ff !important;
  color: #1d1d1d !important;
  padding: 12px 24px !important;
  border-radius: 40px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 1px solid #000000 !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  width: fit-content !important;
  box-shadow: none !important;
}

body:has(.hero-section-wrapper) .mw-button p {
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.hero-section-wrapper) .mw-button::after {
  content: "→" !important;
  display: inline-flex !important;
  font-size: 18px;
  font-weight: 300;
  transition: transform 0.3s ease !important;
}

body:has(.hero-section-wrapper) .mw-button:hover {
  background-color: #cfd2ff !important;
  border-radius: 16px !important;
}
body:has(.hero-section-wrapper) .mw-button:focus-visible {
  background-color: #cfd2ff !important;
  border-radius: 16px !important;
}

body:has(.hero-section-wrapper) .mw-button:hover::after {
  transform: translateX(0.2em);
}
body:has(.hero-section-wrapper) .mw-button:focus-visible::after {
  transform: translateX(0.2em);
}

body:has(.hero-section-wrapper) .mw-button-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background-color: #ffffff !important;
  color: #1d1d1d !important;
  padding: 12px 24px !important;
  border-radius: 40px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 1px solid #000000 !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  width: fit-content !important;
  box-shadow: none !important;
}

body:has(.hero-section-wrapper) .mw-button-outlined::after {
  content: "→" !important;
  display: inline-flex !important;
  font-size: 18px;
  font-weight: 300;
  transition: transform 0.3s ease !important;
}

body:has(.hero-section-wrapper) .mw-button-outlined:hover {
  background-color: #f0f0f0 !important;
  border-radius: 16px !important;
}
body:has(.hero-section-wrapper) .mw-button-outlined:focus-visible {
  background-color: #f0f0f0 !important;
  border-radius: 16px !important;
}

body:has(.hero-section-wrapper) .mw-button-outlined:hover::after {
  transform: translateX(0.2em);
}
body:has(.hero-section-wrapper) .mw-button-outlined:focus-visible::after {
  transform: translateX(0.2em);
}

/* Button Group Container */
body:has(.hero-section-wrapper) .mw-button-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Navbar Links */
.fern-button.minimal,
a.fern-button.minimal {
  font-weight: 500 !important;
  color: #1a1a2e !important;
  font-size: 16px !important;
}

/* Navbar "Get a demo" Button */
a.fern-button.primary,
.fern-button.primary,
a.fern-button[href*="demo"] {
  background-color: #9b8afb !important;
  color: #1a1a2e !important;
  padding: 8px 20px !important;
  border-radius: 40px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 1px solid #1a1a2e !important;
  cursor: pointer !important;
  transition:
    border-radius 0.15s ease-in-out,
    background-color 0.15s ease-in-out !important;
  box-shadow: none !important;
}

a.fern-button.primary:hover,
.fern-button.primary:hover,
a.fern-button[href*="demo"]:hover {
  background-color: #cfd2ff !important;
  border-radius: 8px !important;
}
a.fern-button.primary:focus-visible,
.fern-button.primary:focus-visible,
a.fern-button[href*="demo"]:focus-visible {
  background-color: #cfd2ff !important;
  border-radius: 8px !important;
}

/* --------------------------------------------------------------------------
   2.3 Products Section
   -------------------------------------------------------------------------- */

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

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

body:has(.hero-section-wrapper) .products-grid {
  display: flex;
  gap: var(--mw-spacing-md);
  flex-wrap: wrap;
}

body:has(.hero-section-wrapper) .product-card {
  flex: 1 1 calc(25% - 18px);
  min-width: 220px;
  background: #FFFFFF;
  border: 1px solid #E5E0DA;
  border-left: 4px solid #E5E0DA;
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    transform 0.2s ease;
  cursor: pointer;
}

/* Colored left border per product card */
body:has(.hero-section-wrapper) .product-card[data-accent="drift"] {
  border-left-color: #E5E0DA;
}
body:has(.hero-section-wrapper) .product-card[data-accent="haze"] {
  border-left-color: #A0A6FF;
}
body:has(.hero-section-wrapper) .product-card[data-accent="dune"] {
  border-left-color: #FFD468;
}
body:has(.hero-section-wrapper) .product-card[data-accent="coral"] {
  border-left-color: #FF8668;
}

body:has(.hero-section-wrapper) .product-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: #d1cac3;
  transform: translateY(-2px);
}
body:has(.hero-section-wrapper) .product-card:focus-visible {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: #d1cac3;
  transform: translateY(-2px);
}

/* Keep left border color on hover */
body:has(.hero-section-wrapper) .product-card[data-accent="drift"]:hover { border-left-color: #E5E0DA; }
body:has(.hero-section-wrapper) .product-card[data-accent="drift"]:focus-visible { border-left-color: #E5E0DA; }
body:has(.hero-section-wrapper) .product-card[data-accent="haze"]:hover { border-left-color: #A0A6FF; }
body:has(.hero-section-wrapper) .product-card[data-accent="haze"]:focus-visible { border-left-color: #A0A6FF; }
body:has(.hero-section-wrapper) .product-card[data-accent="dune"]:hover { border-left-color: #FFD468; }
body:has(.hero-section-wrapper) .product-card[data-accent="dune"]:focus-visible { border-left-color: #FFD468; }
body:has(.hero-section-wrapper) .product-card[data-accent="coral"]:hover { border-left-color: #FF8668; }
body:has(.hero-section-wrapper) .product-card[data-accent="coral"]:focus-visible { border-left-color: #FF8668; }

body:has(.hero-section-wrapper) .product-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  flex-shrink: 0;
}

body:has(.hero-section-wrapper) .product-card-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #000000 !important;
  margin: 0 !important;
  line-height: 24px !important;
}

body:has(.hero-section-wrapper) .product-card-description {
  font-size: 14px;
  color: #686464;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

body:has(.hero-section-wrapper) .product-card-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--mw-purple);
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   2.4 Quick Start Section
   -------------------------------------------------------------------------- */

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

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

body:has(.hero-section-wrapper) .quickstart-grid {
  display: flex;
  gap: var(--mw-spacing-md);
  flex-wrap: wrap;
}

body:has(.hero-section-wrapper) .quickstart-card {
  flex: 1 1 calc(33.333% - 16px);
  min-width: 260px;
  background: #FFFFFF;
  border: 1px solid #E5E0DA;
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    transform 0.2s ease;
  cursor: pointer;
}

body:has(.hero-section-wrapper) .quickstart-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: #d1cac3;
  transform: translateY(-2px);
}
body:has(.hero-section-wrapper) .quickstart-card:focus-visible {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: #d1cac3;
  transform: translateY(-2px);
}

body:has(.hero-section-wrapper) .quickstart-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body:has(.hero-section-wrapper) .quickstart-card-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #000000 !important;
  margin: 0 !important;
  line-height: 24px !important;
}

body:has(.hero-section-wrapper) .quickstart-card-description {
  font-size: 14px;
  color: #686464;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

body:has(.hero-section-wrapper) .quickstart-card-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--mw-purple);
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   2.5 Community Section
   -------------------------------------------------------------------------- */

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

body:has(.hero-section-wrapper) .community-section {
  max-width: var(--mw-content-max-width);
  margin: 0 auto;
  padding: 0 var(--mw-spacing-lg);
  box-sizing: border-box;
  display: flex;
  gap: var(--mw-spacing-md);
  align-items: stretch;
}

body:has(.hero-section-wrapper) .community-panel {
  flex: 1;
  background: #1a1a2e;
  border-radius: 16px;
  padding: var(--mw-spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--mw-spacing-sm);
}

body:has(.hero-section-wrapper) .community-heading {
  color: #ffffff !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

body:has(.hero-section-wrapper) .community-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 var(--mw-spacing-sm) 0;
}

body:has(.hero-section-wrapper) .community-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body:has(.hero-section-wrapper) .community-link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid #E5E0DA;
  border-radius: 16px;
  padding: 28px;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  flex: 1;
}

body:has(.hero-section-wrapper) .community-link-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body:has(.hero-section-wrapper) .community-link-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #d1cac3;
}
body:has(.hero-section-wrapper) .community-link-card:focus-visible {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #d1cac3;
}

body:has(.hero-section-wrapper) .community-link-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body:has(.hero-section-wrapper) .community-link-card-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #000000 !important;
  margin: 0 !important;
  line-height: 20px !important;
}

body:has(.hero-section-wrapper) .community-link-card-description {
  font-size: 13px;
  color: #686464;
  line-height: 16px;
  margin: 0;
}

html.dark body:has(.hero-section-wrapper) .community-link-card-icon {
  opacity: 0.85;
}

/* Hide external link icons across entire landing page */
body:has(.hero-section-wrapper) .external-link-icon,
body:has(.hero-section-wrapper) .lucide-external-link,
body:has(.hero-section-wrapper) a.fern-mdx-link > svg.lucide,
body:has(.hero-section-wrapper) .community-link-card svg.lucide,
body:has(.hero-section-wrapper) .community-section-wrapper svg.lucide {
  display: none !important;
}

/* ==========================================================================
   3. SVG Hero Animations
   ========================================================================== */

/* Pulsing accent dots */
@keyframes pulse-dot {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.5);
  }
}

/* Flowing line animation using stroke-dashoffset */
@keyframes flow-line {
  0% {
    stroke-dashoffset: 20;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Apply to SVG elements */
body:has(.hero-section-wrapper) .hero-accent-dot {
  animation: pulse-dot 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

body:has(.hero-section-wrapper) .hero-connection-line {
  stroke-dasharray: 10 10;
  animation: flow-line 2s linear infinite;
}

/* ==========================================================================
   4. Responsive Design
   ========================================================================== */

@media (max-width: 1024px) {

  body:has(.hero-section-wrapper) .hero-section {
    flex-direction: column;
    text-align: center;
  }

  body:has(.hero-section-wrapper) .hero-content {
    align-items: center;
  }

  body:has(.hero-section-wrapper) .hero-description {
    max-width: 600px;
  }

  body:has(.hero-section-wrapper) .mw-button-group {
    justify-content: center;
  }

  body:has(.hero-section-wrapper) .hero-image {
    order: -1;
    max-width: 500px;
    width: 100%;
  }

  body:has(.hero-section-wrapper) .products-grid {
    flex-wrap: wrap;
  }

  body:has(.hero-section-wrapper) .product-card {
    flex: 1 1 calc(50% - 12px);
  }

  body:has(.hero-section-wrapper) .community-section {
    flex-direction: column;
  }


}

@media (max-width: 768px) {

  body:has(.hero-section-wrapper) h1 {
    font-size: 40px !important;
  }

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

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

  body:has(.hero-section-wrapper) .product-card {
    flex: 1 1 100%;
  }

  body:has(.hero-section-wrapper) .quickstart-card {
    flex: 1 1 100%;
  }

  body:has(.hero-section-wrapper) .community-heading {
    font-size: 24px !important;
  }


}

@media (max-width: 480px) {

  body:has(.hero-section-wrapper) h1 {
    font-size: 32px !important;
  }

  body:has(.hero-section-wrapper) .mw-button-group {
    flex-direction: column;
    width: 100%;
  }

  body:has(.hero-section-wrapper) .mw-button,
  body:has(.hero-section-wrapper) .mw-button-outlined {
    width: 100% !important;
    text-align: center;
  }

}

/* Configuration Delete module coverage table — scoped so column widths don't leak to other tables */
.config-delete-table .fern-table-root {
  overflow-x: auto;
  max-width: 100%;
}

.config-delete-table .fern-table {
  min-width: max-content;
}

.config-delete-table .fern-table th,
.config-delete-table .fern-table td {
  white-space: normal;
  vertical-align: top;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

.config-delete-table .fern-table th:nth-child(1),
.config-delete-table .fern-table td:nth-child(1) {
  min-width: 60px;
}

.config-delete-table .fern-table th:nth-child(2),
.config-delete-table .fern-table td:nth-child(2) {
  min-width: 120px;
}

.config-delete-table .fern-table th:nth-child(3),
.config-delete-table .fern-table td:nth-child(3) {
  min-width: 320px;
}

.config-delete-table .fern-table th:nth-child(4),
.config-delete-table .fern-table td:nth-child(4) {
  min-width: 420px;
}

.config-delete-table .fern-table th:nth-child(5),
.config-delete-table .fern-table td:nth-child(5) {
  min-width: 180px;
}