/*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 Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 101.17%;
    ascent-override: 101.32%;
    descent-override: 27.18%;
    line-gap-override: 0.00%;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 30px;
  --font-body: 'IBM Plex Sans', 'IBM Plex Sans Fallback', 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 Fallback', 'IBM Plex Sans', 'IBM Plex Sans Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

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


: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
      0.1 Product Switcher Dropdown
   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 Architecture block (.arch: tinted layers, dark mode, responsive)
   3. SVG Hero Animations
   4. Responsive Design
   5. Plugins story animations (.plg-*, Why Plugins page)
   ========================================================================== */

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

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

/* ==========================================================================
   0.1 Product Switcher Dropdown
   ========================================================================== */

/* Fern caps .fern-dropdown at calc(302px + .5rem), which fits four product
   rows and hides the rest behind a scrollbar-less scroll area. Let the
   product switcher grow to show every product, bounded by the space the
   popper reports below the trigger so short windows still scroll. */
.fern-dropdown[data-testid="product-dropdown-content"] {
  max-height: min(var(--radix-dropdown-menu-content-available-height, 80vh), 560px) !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;
}

/* --------------------------------------------------------------------------
   2.6 Architecture block
   "Tinted layers": each band is a faint wash of its layer colour; paper
   (cards, tiles, chips) sits on it with 1px borders in a deeper tone of the
   same tint. Tokens per layer:
     --tint   band wash                 --line   borders (deeper tint)
     --accent legend colour: chip hover fill
     --ring   deeper accent for strokes: hover rings, title underlines
     --deep   AA-safe dark tone of the layer: docs links, icon strokes, focus
   Fern's .fern-mdx-link / .fern-prose a force colour inherit, underline and
   font-weight inherit with !important, so anchor colour, weight and
   decoration below carry !important too.
   -------------------------------------------------------------------------- */

body:has(.hero-section-wrapper) #platform .section-eyebrow {
  color: #4A50C8;
}

body:has(.hero-section-wrapper) #platform h2 {
  margin-bottom: 28px !important;
}

body:has(.hero-section-wrapper) .arch {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.35;
  color: #1a1a2e;
  --ink: #1a1a2e;
  --muted: #5F5B5B;
  --paper: #ffffff;
  --neutral: #F3F0E8;
  --neutral-line: #DAD3C8;
  --haze: #A0A6FF;
  --haze-line: #CDD0F4;
  --haze-deep: #4A50C8;
  --dune: #FFD468;
}

body:has(.hero-section-wrapper) .arch .bi {
  width: 16px;
  height: 16px;
  flex: none;
}

body:has(.hero-section-wrapper) .arch .bi-wide {
  width: 28px;
}

body:has(.hero-section-wrapper) .arch svg.i {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

body:has(.hero-section-wrapper) .arch svg.ia {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

body:has(.hero-section-wrapper) .arch a {
  text-decoration: none !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

body:has(.hero-section-wrapper) .arch a:focus-visible {
  outline: 2px solid var(--deep, #4A50C8);
  outline-offset: 2px;
}

/* Fern decorates MDX links with an external-link glyph; the block has its own arrows */
body:has(.hero-section-wrapper) .arch svg.lucide,
body:has(.hero-section-wrapper) .arch .external-link-icon {
  display: none !important;
}

/* bands: the three layers, each on its own tint */
body:has(.hero-section-wrapper) .arch .band {
  position: relative;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

body:has(.hero-section-wrapper) .arch .band-ew {
  --tint: #FFF4D3;
  --line: #EEDCA3;
  --accent: #FFD468;
  --ring: #D9A52A;
  --deep: #7A5D05;
}

body:has(.hero-section-wrapper) .arch .band-runtime {
  --tint: #EAF8EF;
  --line: #BFE3CC;
  --accent: #C6F2D5;
  --ring: #3FAE74;
  --deep: #1B7048;
}

body:has(.hero-section-wrapper) .arch .band-studio {
  --tint: #ECEDFF;
  --line: #CDD0F4;
  --accent: #A0A6FF;
  --ring: #7B82F0;
  --deep: #4A50C8;
}

/* band head: paper icon tile with the layer's deep stroke, 18/600 title, muted subtitle, deep docs link */
body:has(.hero-section-wrapper) .arch .band-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 32px;
}

body:has(.hero-section-wrapper) .arch .tile {
  align-self: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

body:has(.hero-section-wrapper) .arch .tile svg,
body:has(.hero-section-wrapper) .arch .tile .i {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body:has(.hero-section-wrapper) .arch .band-head .t {
  font-weight: 600 !important;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 32px;
  color: var(--ink) !important;
}

body:has(.hero-section-wrapper) .arch .band-head .t:hover {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px !important;
  text-decoration-color: var(--ring) !important;
}
body:has(.hero-section-wrapper) .arch .band-head .t:focus-visible {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px !important;
  text-decoration-color: var(--ring) !important;
}

body:has(.hero-section-wrapper) .arch .band-head .s {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

body:has(.hero-section-wrapper) .arch .go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500 !important;
  color: var(--deep) !important;
  white-space: nowrap;
}

body:has(.hero-section-wrapper) .arch .go svg {
  transition: transform 0.15s ease;
}

body:has(.hero-section-wrapper) .arch .go:hover {
  text-decoration-line: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: currentColor !important;
}
body:has(.hero-section-wrapper) .arch .go:focus-visible {
  text-decoration-line: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: currentColor !important;
}

body:has(.hero-section-wrapper) .arch .go:hover svg {
  transform: translateX(3px);
}
body:has(.hero-section-wrapper) .arch .go:focus-within svg {
  transform: translateX(3px);
}

body:has(.hero-section-wrapper) .arch .builders {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  align-self: center;
  margin-left: 4px;
}

/* access strip: a neutral bar flush on top of the EmployeeWorks band */
body:has(.hero-section-wrapper) .arch .access {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -16px -24px 0;
  padding: 10px 24px;
  background: var(--neutral);
  border-bottom: 1px solid var(--neutral-line);
  border-radius: 15px 15px 0 0;
}

body:has(.hero-section-wrapper) .arch .access-lbl {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--muted);
  margin-right: 2px;
}

body:has(.hero-section-wrapper) .arch .access .grp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

body:has(.hero-section-wrapper) .arch .access .sep {
  width: 1px;
  height: 20px;
  background: var(--neutral-line);
  margin: 0 8px;
  flex: none;
}

body:has(.hero-section-wrapper) .arch .access .chip {
  border-color: var(--neutral-line);
}

body:has(.hero-section-wrapper) .arch .access .go {
  color: var(--deep) !important;
}

/* chips: paper pills; hover fills with the layer's accent, ink text */
body:has(.hero-section-wrapper) .arch .chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

body:has(.hero-section-wrapper) .arch .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 14px;
  line-height: 18px;
  background: var(--paper);
  color: var(--ink) !important;
  white-space: nowrap;
}

body:has(.hero-section-wrapper) .arch .chip .li {
  color: var(--deep);
  transition: color 0.15s ease;
}

body:has(.hero-section-wrapper) .arch a.chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink) !important;
}
body:has(.hero-section-wrapper) .arch a.chip:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink) !important;
}

body:has(.hero-section-wrapper) .arch a.chip:hover .li {
  color: var(--ink);
}
body:has(.hero-section-wrapper) .arch a.chip:focus-within .li {
  color: var(--ink);
}

/* Conversations API: the developer path, haze-flavoured wherever it sits */
body:has(.hero-section-wrapper) .arch .chip.chip-api {
  color: var(--haze-deep) !important;
  border-color: var(--haze-line);
}

body:has(.hero-section-wrapper) .arch a.chip.chip-api:hover {
  background: var(--haze);
  border-color: var(--haze);
  color: var(--ink) !important;
}
body:has(.hero-section-wrapper) .arch a.chip.chip-api:focus-visible {
  background: var(--haze);
  border-color: var(--haze);
  color: var(--ink) !important;
}

/* ToolSmith: the one solid accent in the block */
body:has(.hero-section-wrapper) .arch .chip.chip-accent {
  background: var(--dune);
  border-color: #D9A52A;
  font-weight: 500 !important;
}

body:has(.hero-section-wrapper) .arch a.chip.chip-accent:hover {
  background: #FFE39A;
  border-color: var(--ink);
  color: var(--ink) !important;
}
body:has(.hero-section-wrapper) .arch a.chip.chip-accent:focus-visible {
  background: #FFE39A;
  border-color: var(--ink);
  color: var(--ink) !important;
}

/* Marketplace: outlined in haze so it reads as the destination of the Integrations row */
body:has(.hero-section-wrapper) .arch .chip.chip-soft {
  border-color: var(--haze);
  font-weight: 500 !important;
}

body:has(.hero-section-wrapper) .arch .chip.chip-soft .ia {
  color: var(--haze-deep);
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

body:has(.hero-section-wrapper) .arch a.chip.chip-soft:hover {
  background: var(--haze);
  border-color: var(--haze);
}
body:has(.hero-section-wrapper) .arch a.chip.chip-soft:focus-visible {
  background: var(--haze);
  border-color: var(--haze);
}

body:has(.hero-section-wrapper) .arch a.chip.chip-soft:hover .ia {
  color: var(--ink);
  transform: translateX(2px);
}
body:has(.hero-section-wrapper) .arch a.chip.chip-soft:focus-within .ia {
  color: var(--ink);
  transform: translateX(2px);
}

body:has(.hero-section-wrapper) .arch .fw-grp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

body:has(.hero-section-wrapper) .arch .chip.chip-sub {
  color: var(--muted) !important;
  background: transparent;
  border-style: dashed;
}

/* EmployeeWorks cards: paper on the dune tint */
body:has(.hero-section-wrapper) .arch .cards {
  display: grid;
  gap: 10px;
}

body:has(.hero-section-wrapper) .arch .cards.cards-ew {
  grid-template-columns: minmax(188px, 0.56fr) minmax(0, 1fr) minmax(0, 1.5fr);
  grid-template-rows: auto auto;
  align-items: stretch;
}

body:has(.hero-section-wrapper) .arch .card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

body:has(.hero-section-wrapper) .arch .card .ct {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600 !important;
  font-size: 16px;
  line-height: 20px;
  color: var(--ink) !important;
  align-self: flex-start;
}

body:has(.hero-section-wrapper) .arch .card .ct:hover,
body:has(.hero-section-wrapper) .arch a.card:hover .ct {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--ring) !important;
}
body:has(.hero-section-wrapper) .arch .card .ct:focus-visible,
body:has(.hero-section-wrapper) .arch a.card:focus-within .ct {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--ring) !important;
}

body:has(.hero-section-wrapper) .arch .card .ch {
  font-size: 14px;
  color: var(--muted);
  line-height: 20px;
  margin-top: -4px;
  max-width: 46ch;
}

body:has(.hero-section-wrapper) .arch .card .chips {
  margin-top: 0;
  gap: 6px;
}

body:has(.hero-section-wrapper) .arch a.card {
  color: inherit !important;
}

body:has(.hero-section-wrapper) .arch a.card:hover {
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
}
body:has(.hero-section-wrapper) .arch a.card:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
}

body:has(.hero-section-wrapper) .arch .card.card-apps {
  grid-row: 1 / 3;
}

body:has(.hero-section-wrapper) .arch .card.card-apps .chips {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

body:has(.hero-section-wrapper) .arch .card.card-apps .chip {
  justify-content: flex-start;
  padding: 5px 10px;
  font-size: 14px;
}

body:has(.hero-section-wrapper) .arch .card.card-apps .ch {
  display: none;
}

/* Proactivity strip: spans the two right-hand columns under the assistant cards */
body:has(.hero-section-wrapper) .arch .routines {
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--paper);
  min-width: 0;
  flex-wrap: wrap;
}

body:has(.hero-section-wrapper) .arch .routines .rt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600 !important;
  font-size: 15px;
  white-space: nowrap;
  color: var(--ink) !important;
}

body:has(.hero-section-wrapper) .arch .routines .rt .li {
  color: var(--deep);
}

body:has(.hero-section-wrapper) .arch .routines .rt:hover {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--ring) !important;
}
body:has(.hero-section-wrapper) .arch .routines .rt:focus-visible {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--ring) !important;
}

body:has(.hero-section-wrapper) .arch .routines .rs {
  font-size: 13.5px;
  line-height: 17px;
  color: var(--muted);
  flex: 1 1 260px;
  min-width: 0;
}

body:has(.hero-section-wrapper) .arch .rchips {
  gap: 6px;
}

/* Harness: mini-card stack, Reasoning Engine, Orchestrator, on the EmployeeWorks
   columns so each engine sits under the assistant it runs (EA, then PAs).
   The mini column is fixed and the two engines share the rest almost evenly so
   both rows of four callouts fit on one line at the page's max width (1086px)
   and wrap together below it. */
body:has(.hero-section-wrapper) .arch .hx {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 10px;
  align-items: stretch;
}

body:has(.hero-section-wrapper) .arch .htile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--paper);
  min-width: 0;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

body:has(.hero-section-wrapper) .arch .htile:hover {
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
}
body:has(.hero-section-wrapper) .arch .htile:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
}

body:has(.hero-section-wrapper) .arch .htt {
  font-weight: 600 !important;
  font-size: 16px;
  line-height: 20px;
  color: var(--ink) !important;
  align-self: flex-start;
}

body:has(.hero-section-wrapper) .arch .htt:hover {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--ring) !important;
}
body:has(.hero-section-wrapper) .arch .htt:focus-visible {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--ring) !important;
}

body:has(.hero-section-wrapper) .arch .hts {
  font-size: 13.5px;
  line-height: 17px;
  color: var(--muted);
}

body:has(.hero-section-wrapper) .arch .hstack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
}

body:has(.hero-section-wrapper) .arch .hmini {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink) !important;
  min-width: 0;
}

body:has(.hero-section-wrapper) .arch .hmini:hover {
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
}
body:has(.hero-section-wrapper) .arch .hmini:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
}

body:has(.hero-section-wrapper) .arch .hmt {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 18px;
}

body:has(.hero-section-wrapper) .arch .hms {
  font-size: 13.5px;
  line-height: 16px;
  color: var(--muted);
}

body:has(.hero-section-wrapper) .arch .hsub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

body:has(.hero-section-wrapper) .arch .hc {
  font-size: 14px;
  line-height: 16px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink) !important;
}

body:has(.hero-section-wrapper) .arch .hc:hover {
  background: var(--accent);
  border-color: var(--accent);
}
body:has(.hero-section-wrapper) .arch .hc:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
}

/* Tool Studio rows: label column, hairlines in the haze line tone */
body:has(.hero-section-wrapper) .arch .rows {
  display: flex;
  flex-direction: column;
}

body:has(.hero-section-wrapper) .arch .row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 10px 0;
}

body:has(.hero-section-wrapper) .arch .row + .row {
  border-top: 1px solid var(--line);
}

body:has(.hero-section-wrapper) .arch .row:first-child {
  padding-top: 0;
}

body:has(.hero-section-wrapper) .arch .row:last-child {
  padding-bottom: 0;
}

body:has(.hero-section-wrapper) .arch .row-fw {
  align-items: flex-start;
}

body:has(.hero-section-wrapper) .arch .row-fw .rl {
  line-height: 40px;
}

body:has(.hero-section-wrapper) .arch .rl {
  font-size: 15px;
  line-height: 32px;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

body:has(.hero-section-wrapper) .arch .rl:hover {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--ring) !important;
}
body:has(.hero-section-wrapper) .arch .rl:focus-visible {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--ring) !important;
}

body:has(.hero-section-wrapper) .arch .fw {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
}

body:has(.hero-section-wrapper) .arch .fwc {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink) !important;
  min-width: 0;
}

body:has(.hero-section-wrapper) .arch .fwc:hover {
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
}
body:has(.hero-section-wrapper) .arch .fwc:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
}

body:has(.hero-section-wrapper) .arch .fwt {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 18px;
}

body:has(.hero-section-wrapper) .arch .fws {
  font-size: 13.5px;
  line-height: 17px;
  color: var(--muted);
}

/* Dark mode: bands become dark washes of their layer, paper becomes the card navy,
   hover fills keep the layer colours with ink text so contrast stays above 4.5:1 */
html.dark body:has(.hero-section-wrapper) #platform .section-eyebrow {
  color: var(--mw-purple) !important;
}

html.dark body:has(.hero-section-wrapper) .arch {
  color: #ffffff;
  --ink: #ffffff;
  --muted: #a0a0a0;
  --paper: #1a1a2e;
  --neutral: #111118;
  --neutral-line: #333333;
  --haze-line: #333333;
  --haze-deep: #A0A6FF;
}

html.dark body:has(.hero-section-wrapper) .arch .band-ew {
  --tint: #15151f;
  --line: #333333;
  --ring: #FFD468;
  --deep: #FFD468;
}

html.dark body:has(.hero-section-wrapper) .arch .band-runtime {
  --tint: #121a16;
  --line: #333333;
  --ring: #8FD9B0;
  --deep: #8FD9B0;
}

html.dark body:has(.hero-section-wrapper) .arch .band-studio {
  --tint: #15152a;
  --line: #333333;
  --ring: #A0A6FF;
  --deep: #A0A6FF;
}

html.dark body:has(.hero-section-wrapper) .arch a.card:hover,
html.dark body:has(.hero-section-wrapper) .arch .htile:hover,
html.dark body:has(.hero-section-wrapper) .arch .hmini:hover,
html.dark body:has(.hero-section-wrapper) .arch .fwc:hover {
  border-color: #555555;
  box-shadow: 0 0 0 1px #555555;
}
html.dark body:has(.hero-section-wrapper) .arch a.card:focus-visible,
html.dark body:has(.hero-section-wrapper) .arch .htile:focus-visible,
html.dark body:has(.hero-section-wrapper) .arch .hmini:focus-visible,
html.dark body:has(.hero-section-wrapper) .arch .fwc:focus-visible {
  border-color: #555555;
  box-shadow: 0 0 0 1px #555555;
}

html.dark body:has(.hero-section-wrapper) .arch a.chip:hover,
html.dark body:has(.hero-section-wrapper) .arch a.chip.chip-api:hover,
html.dark body:has(.hero-section-wrapper) .arch a.chip.chip-soft:hover,
html.dark body:has(.hero-section-wrapper) .arch .hc:hover {
  color: #1a1a2e !important;
}
html.dark body:has(.hero-section-wrapper) .arch a.chip:focus-visible,
html.dark body:has(.hero-section-wrapper) .arch a.chip.chip-api:focus-visible,
html.dark body:has(.hero-section-wrapper) .arch a.chip.chip-soft:focus-visible,
html.dark body:has(.hero-section-wrapper) .arch .hc:focus-visible {
  color: #1a1a2e !important;
}

html.dark body:has(.hero-section-wrapper) .arch a.chip:hover .li,
html.dark body:has(.hero-section-wrapper) .arch a.chip.chip-soft:hover .ia {
  color: #1a1a2e;
}
html.dark body:has(.hero-section-wrapper) .arch a.chip:focus-within .li,
html.dark body:has(.hero-section-wrapper) .arch a.chip.chip-soft:focus-within .ia {
  color: #1a1a2e;
}

html.dark body:has(.hero-section-wrapper) .arch .chip.chip-accent {
  color: #1a1a2e !important;
}

html.dark body:has(.hero-section-wrapper) .arch a.chip.chip-accent:hover {
  border-color: #FFD468;
}
html.dark body:has(.hero-section-wrapper) .arch a.chip.chip-accent:focus-visible {
  border-color: #FFD468;
}

@media (prefers-reduced-motion: reduce) {

  body:has(.hero-section-wrapper) .arch a,
  body:has(.hero-section-wrapper) .arch .go svg,
  body:has(.hero-section-wrapper) .arch .htile,
  body:has(.hero-section-wrapper) .arch .chip .li,
  body:has(.hero-section-wrapper) .arch .chip.chip-soft .ia {
    transition: none;
  }

  body:has(.hero-section-wrapper) .arch .go:hover svg,
  body:has(.hero-section-wrapper) .arch a.chip.chip-soft:hover .ia {
    transform: none;
  }
body:has(.hero-section-wrapper) .arch .go:focus-within svg,
body:has(.hero-section-wrapper) .arch a.chip.chip-soft:focus-within .ia {
    transform: none;
  }

}

/* Architecture block responsive */
@media (max-width: 1200px) {

  body:has(.hero-section-wrapper) .arch .band-head .s {
    flex-basis: 100%;
    order: 3;
    padding-left: 44px;
  }

}

@media (max-width: 1024px) {

  body:has(.hero-section-wrapper) .arch .fw {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 768px) {

  body:has(.hero-section-wrapper) .arch .band {
    padding: 16px;
  }

  body:has(.hero-section-wrapper) .arch .access {
    margin: -16px -16px 0;
    padding: 10px 16px;
  }

  body:has(.hero-section-wrapper) .arch .access .grp {
    display: contents;
  }

  body:has(.hero-section-wrapper) .arch .access-lbl {
    flex-basis: 100%;
    margin-right: 0;
  }

  body:has(.hero-section-wrapper) .arch .access .go {
    margin-left: 0;
    flex-basis: 100%;
  }

  body:has(.hero-section-wrapper) .arch .access .sep {
    display: none;
  }

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

  body:has(.hero-section-wrapper) .arch .band-head .s {
    flex-basis: 100%;
    order: 3;
    padding-left: 0;
  }

  body:has(.hero-section-wrapper) .arch .builders {
    flex-basis: 100%;
    order: 4;
    margin-left: 0;
  }

  body:has(.hero-section-wrapper) .arch .band-head .go {
    order: 5;
    margin-left: 0;
    flex-basis: 100%;
  }

  body:has(.hero-section-wrapper) .arch .chip {
    white-space: normal;
  }

  body:has(.hero-section-wrapper) .arch .cards.cards-ew {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  body:has(.hero-section-wrapper) .arch .card.card-apps {
    grid-row: auto;
  }

  body:has(.hero-section-wrapper) .arch .card.card-apps .ch {
    display: block;
  }

  body:has(.hero-section-wrapper) .arch .routines {
    grid-column: 1 / -1;
  }

  body:has(.hero-section-wrapper) .arch .hx {
    grid-template-columns: 1fr;
  }

  body:has(.hero-section-wrapper) .arch .hstack {
    flex-direction: row;
    order: 3;
  }

  body:has(.hero-section-wrapper) .arch .row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body:has(.hero-section-wrapper) .arch .rl {
    line-height: 24px;
  }

  body:has(.hero-section-wrapper) .arch .fw {
    grid-template-columns: 1fr;
  }

}

/* ==========================================================================
   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;
}

/* ==========================================================================
   5. Plugins story animations (.plg-*)
   Tools > Core Concepts > Why Plugins. React components in
   fern/components/Plg*.tsx step through each panel once it scrolls into view
   and hold the last frame. Every class carries the plg- prefix. Weights stay
   at 400/700 (the 600 face in docs.yml is mis-weighted). The stage is a
   container, so the panels reflow on the content column's width.
   ========================================================================== */

.plg-stage {
  --plg-green: #63DF4E;
  --plg-red: #FF7A66;
  --plg-amber: #FFC96B;
  --plg-paper: #FBF8F1;
  --plg-ink: #1F2933;
  --plg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  container-type: inline-size;
  position: relative;
  margin: 20px 0 28px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(640px 420px at 100% 0%, rgba(12, 104, 165, 0.5), transparent 65%),
    radial-gradient(560px 380px at 0% 100%, rgba(38, 150, 96, 0.38), transparent 65%),
    #062033;
  color: #fff;
  font-family: var(--mw-font-family);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

.plg-stage *,
.plg-stage *::before,
.plg-stage *::after {
  box-sizing: border-box;
}

.plg-stage button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.plg-stage button:focus-visible {
  outline: 2px solid var(--plg-green);
  outline-offset: 2px;
  border-radius: 6px;
}

.plg-stage .plg-ic {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
}

.plg-stage code {
  font-family: var(--plg-mono);
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
}

.plg-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* controls: play / pause / replay, one dot per step, step caption */
.plg-ctl {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.plg-stage .plg-play {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: grid;
  place-items: center;
  transition: border-color 0.2s, background-color 0.2s;
}

.plg-stage .plg-play:hover {
  border-color: var(--plg-green);
  background: rgba(99, 223, 78, 0.1);
}
.plg-stage .plg-play:focus-visible {
  border-color: var(--plg-green);
  background: rgba(99, 223, 78, 0.1);
}

.plg-stage .plg-play .plg-ic {
  width: 18px;
  height: 18px;
}

.plg-dots {
  display: flex;
  gap: 2px;
}

.plg-stage .plg-dot {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

.plg-stage .plg-dot::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  transition: background-color 0.25s, transform 0.25s;
}

.plg-stage .plg-dot.is-done::before {
  background: rgba(99, 223, 78, 0.55);
}

.plg-stage .plg-dot.is-on::before {
  background: var(--plg-green);
  transform: scale(1.3);
}

.plg-ctl-lbl {
  margin-left: auto;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

/* shared reveal: chat messages, verdicts */
.plg-m {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 88%;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.plg-m.is-on {
  opacity: 1;
  transform: none;
}

.plg-m.is-user {
  align-self: flex-end;
  align-items: flex-end;
}

.plg-m-who {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6B7280;
  padding: 0 4px;
}

.plg-bb {
  font-size: 13.5px;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #DDD6C6;
  color: var(--plg-ink);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.plg-m.is-user .plg-bb {
  background: #16304F;
  border-color: #16304F;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.plg-m.is-bot .plg-bb {
  border-bottom-left-radius: 4px;
}

.plg-m.is-bot .plg-bb.is-bad {
  border-color: #E0705C;
  background: #FFF6F3;
}

.plg-bb.is-wait {
  opacity: 0;
  transform: translateY(4px);
}

.plg-m-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 0 4px;
  color: #B23A28;
}

.plg-m-tool {
  align-self: flex-start;
  font-family: var(--plg-mono);
  font-size: 11.5px;
  line-height: 1.35;
  padding: 3px 8px;
  border-radius: 6px;
  color: #4B5563;
  background: #EFEAE0;
}

.plg-verdict {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.plg-verdict.is-on {
  opacity: 1;
  transform: none;
}

.plg-verdict .plg-ic {
  width: 20px;
  height: 20px;
}

.plg-verdict.is-bad {
  background: #C94A38;
}

.plg-verdict.is-good {
  background: #2E8B57;
}

/* tool chips and skill file */
.plg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.plg-chip {
  font-family: var(--plg-mono);
  font-size: 12px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
}

.plg-chip.is-srv {
  background: rgba(160, 166, 255, 0.16);
  border-color: rgba(160, 166, 255, 0.45);
  color: #fff;
  font-weight: 700;
}

.plg-skill {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0B0F14;
  margin-bottom: 12px;
}

.plg-skill-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-family: var(--plg-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  background: #12171E;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.plg-skill-bd {
  padding: 10px 12px;
  font-family: var(--plg-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.plg-skill-l {
  padding: 0 8px;
  border-radius: 0 4px 4px 0;
  transition: background-color 0.4s, color 0.4s;
}

.plg-skill-l.is-dim {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

.plg-skill-l.is-rule {
  background: rgba(255, 122, 102, 0.12);
  box-shadow: inset 3px 0 0 var(--plg-red);
  color: #FFB4A6;
}

.plg-skill-l.is-rule.is-broken {
  background: rgba(255, 122, 102, 0.24);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 122, 102, 0.9);
}

.plg-skill-l.is-key {
  background: rgba(160, 166, 255, 0.14);
  box-shadow: inset 3px 0 0 #A0A6FF;
  color: #D9DBFF;
}

.plg-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: var(--plg-paper);
  color: var(--plg-ink);
}

/* onboarding record */
.plg-rec {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--plg-paper);
  color: var(--plg-ink);
}

.plg-rec-hd {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 6px;
}

.plg-rec-r {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 13px;
  transition: background-color 0.35s;
}

.plg-rec-i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  border: 1.5px solid #CFC7B4;
  transition: background-color 0.35s, border-color 0.35s;
}

.plg-stage .plg-rec-i .plg-ic {
  width: 14px;
  height: 14px;
}

.plg-rec-n {
  flex: 1;
  min-width: 0;
}

.plg-rec-s {
  font-size: 12px;
  font-weight: 700;
  color: #8A8475;
  white-space: nowrap;
}

.plg-rec-r.is-ok {
  background: #EDF8F0;
}

.plg-rec-r.is-ok .plg-rec-i {
  background: #2E8B57;
  border-color: #2E8B57;
  color: #fff;
}

.plg-rec-r.is-ok .plg-rec-s {
  color: #1F7A45;
}

.plg-rec-r.is-bad {
  background: #FDEEEA;
}

.plg-rec-r.is-bad .plg-rec-i {
  background: #C94A38;
  border-color: #C94A38;
  color: #fff;
}

.plg-rec-r.is-bad .plg-rec-s {
  color: #B23A28;
}

/* MCP tool call log */
.plg-log-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.plg-log-t {
  font-size: 18px;
  font-weight: 700;
  margin-top: 2px;
}

.plg-log-sub {
  font-family: var(--plg-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.plg-log-count {
  display: flex;
  gap: 6px;
  flex: none;
}

.plg-log-count span {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s;
}

.plg-log-count b {
  font-size: 14px;
  margin-right: 3px;
}

.plg-log-count .is-bad {
  color: #FF9B85;
  border-color: rgba(255, 122, 102, 0.5);
}

.plg-log-bd {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 10px;
  background: var(--plg-paper);
  color: var(--plg-ink);
}

.plg-log-q {
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #ECE7DC;
  margin-bottom: 2px;
}

.plg-log-r {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #F3C9BF;
  background: #FFF6F3;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.plg-log-r.is-on {
  opacity: 1;
  transform: none;
}

.plg-log-r.is-warn {
  border-color: #F2D7A6;
  background: #FFF9EC;
}

.plg-log-r.is-ok {
  border-color: #BFE3CC;
  background: #F1FBF4;
}

.plg-log-n {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  background: #FBDCD5;
  color: #B23A28;
}

.plg-log-r.is-warn .plg-log-n {
  background: #FBEACB;
  color: #8A5A00;
}

.plg-log-r.is-ok .plg-log-n {
  background: #CDEFD8;
  color: #1F7A45;
}

.plg-log-c {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.plg-stage .plg-log-c code {
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--plg-ink);
  white-space: normal;
  overflow-wrap: break-word;
}

.plg-log-res {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 12.5px;
  color: #B23A28;
}

.plg-log-r.is-warn .plg-log-res {
  color: #8F5B00;
}

.plg-log-r.is-ok .plg-log-res {
  color: #1F7A45;
  font-weight: 700;
}

/* purchase requisition form */
.plg-pts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}

.plg-stage .plg-pt {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px 0 5px 16px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s;
}

.plg-stage .plg-pt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: var(--plg-green);
  opacity: 0;
  transform: scaleY(0.3);
  transition: opacity 0.3s, transform 0.35s;
}

.plg-stage .plg-pt.is-done {
  color: rgba(255, 255, 255, 0.82);
}

.plg-stage .plg-pt.is-on {
  color: #fff;
}

.plg-stage .plg-pt.is-on::before {
  opacity: 1;
  transform: none;
}

.plg-form {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--plg-paper);
  color: var(--plg-ink);
  border: 1px solid #16304F;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.plg-form-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #0E2C4E;
  color: #fff;
}

.plg-form-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
  background: #fff;
  color: #0E2C4E;
}

.plg-stage .plg-form-logo .plg-ic {
  width: 18px;
  height: 18px;
}

.plg-form-t {
  font-size: 15px;
  font-weight: 700;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plg-form-chip {
  margin-left: auto;
  flex: none;
  font-family: var(--plg-mono);
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 6px;
  color: #FF9B85;
  background: rgba(255, 255, 255, 0.08);
}

.plg-form-sp {
  position: relative;
  display: flex;
  gap: 6px;
  padding: 10px 16px 12px;
  background: #0E2C4E;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.plg-form-st {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.plg-form-c {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  transition: box-shadow 0.3s, border-color 0.3s;
}

.plg-stage .plg-form-c .plg-ic {
  width: 14px;
  height: 14px;
}

.plg-form-l {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plg-form-st.is-done .plg-form-c {
  background: var(--plg-green);
  border-color: var(--plg-green);
  color: #0E2C4E;
}

.plg-form-st.is-cur {
  color: #fff;
  font-weight: 700;
}

.plg-form-st.is-cur .plg-form-c {
  background: #fff;
  border-color: #fff;
  color: #0E2C4E;
}

.plg-form-st.is-ring .plg-form-c {
  border-color: #E9962C;
  box-shadow: 0 0 0 4px rgba(233, 150, 44, 0.4);
}

.plg-form-warn {
  position: absolute;
  z-index: 6;
  top: calc(100% + 6px);
  right: 16px;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #E9962C;
  background: #FFF4E0;
  color: #8A4B00;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.plg-form-warn.is-on {
  opacity: 1;
  transform: none;
}

.plg-form-bd {
  padding: 4px 16px 14px;
}

.plg-form-sh {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3B57D4;
  margin: 12px 0 6px;
}

.plg-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 12px;
}

.plg-f {
  position: relative;
  min-width: 0;
}

.plg-f-w {
  grid-column: 1 / -1;
}

.plg-f-lab {
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4B5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plg-f-lab i {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #6B7280;
}

.plg-f-lab b {
  margin-left: 3px;
  color: #D8462E;
}

.plg-f-inp {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid #CFC7B4;
  background: #F6F1E4;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.plg-stage .plg-f-inp .plg-ic {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: #6B7280;
}

.plg-f-v {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plg-f-inp.is-ph,
.plg-f-v.is-ph {
  color: #8A8475;
}

.plg-f.is-focus .plg-f-inp {
  border-color: #3B57D4;
  box-shadow: 0 0 0 3px rgba(59, 87, 212, 0.18);
}

.plg-f.is-err .plg-f-inp {
  border-color: #D8462E;
  box-shadow: 0 0 0 3px rgba(216, 70, 46, 0.16);
}

.plg-f-x {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}

.plg-f-x s {
  color: #C2361F;
}

.plg-f-note {
  display: flex;
  gap: 5px;
  align-items: flex-start;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: #C2361F;
}

.plg-stage .plg-f-note .plg-ic {
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

.plg-f-err {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  max-height: 0;
  margin-top: -8px;
  overflow: hidden;
  opacity: 0;
  font-size: 12px;
  font-weight: 700;
  color: #C2361F;
  transition: max-height 0.35s ease, opacity 0.35s ease, margin 0.35s ease;
}

.plg-f-err.is-on {
  max-height: 60px;
  margin-top: 0;
  opacity: 1;
}

.plg-stage .plg-f-err .plg-ic {
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

.plg-dd {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  min-width: 210px;
  padding: 4px 0;
  border-radius: 9px;
  border: 1px solid #D6CFBE;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}

.plg-dd.plg-dd-up {
  top: auto;
  bottom: calc(100% + 4px);
  transform: translateY(6px) scale(0.98);
  transform-origin: bottom center;
}

.plg-dd.is-open {
  opacity: 1;
  transform: none;
}

.plg-dd-h {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid #EEE9DD;
  font-size: 11px;
  font-weight: 700;
  color: #374151;
}

.plg-dd-h i {
  font-style: normal;
  font-weight: 400;
  color: #6B7280;
}

.plg-dd-r {
  padding: 6px 12px;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.plg-stage .plg-dd-r code {
  font-size: 11.5px;
  color: #3B57D4;
  margin-right: 8px;
}

.plg-dd-r.is-hi {
  background: #EEF1FD;
  box-shadow: inset 3px 0 0 #3B57D4;
}

.plg-form-foot {
  margin-top: 12px;
  font-size: 11.5px;
  color: #6B7280;
}

.plg-cur {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.5, 0.05, 0.15, 1), opacity 0.3s;
}

.plg-cur.is-on {
  opacity: 1;
}

/* pause on the target long enough to press before moving on */
.plg-cur.is-hold {
  transition-delay: 0.22s, 0s;
}

.plg-cur.is-fade {
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.5, 0.05, 0.15, 1), opacity 0.4s ease 0.6s;
}

.plg-cur-p {
  display: block;
  transform-origin: 4px 2px;
}

.plg-cur-p.is-click {
  animation: plg-press 0.45s ease;
}

.plg-ptr {
  display: block;
  width: 22px;
  height: 22px;
  fill: #111;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.plg-cur-ring {
  position: absolute;
  left: -10px;
  top: -10px;
  z-index: 19;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(59, 87, 212, 0.8);
  pointer-events: none;
  animation: plg-ring 0.6s ease-out both;
}

@keyframes plg-press {
  0% { transform: scale(1); }
  40% { transform: scale(0.82); }
  100% { transform: scale(1); }
}

@keyframes plg-ring {
  0% { opacity: 0.8; scale: 0.3; }
  100% { opacity: 0; scale: 1.6; }
}

/* same request, two outcomes */
.plg-two-lead {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}

.plg-two-lead b {
  color: var(--plg-green);
}

.plg-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.plg-two-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--plg-paper);
  color: var(--plg-ink);
}

.plg-two-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  color: #fff;
}

.plg-two-hd b {
  font-size: 15px;
}

.plg-two-hd span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  color: rgba(255, 255, 255, 0.75);
}

.plg-two-col.is-bad .plg-two-hd {
  background: #5A2A2A;
}

.plg-two-col.is-good .plg-two-hd {
  background: #1D4B2F;
}

.plg-two-msgs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 10px 0;
}

.plg-two .plg-bb {
  font-size: 12.5px;
  padding: 7px 10px;
}

.plg-two-col.is-bad .plg-m.is-bot .plg-bb {
  border-color: #E0705C;
  background: #FFF6F3;
}

.plg-two-col.is-good .plg-m.is-bot .plg-bb {
  border-color: #4FB871;
  background: #F1FBF4;
}

.plg-two-col.is-bad .plg-m-tool {
  color: #A3261C;
  background: #FCE9E5;
}

.plg-two-col.is-good .plg-m-tool {
  color: #146B33;
  background: #E3F5E8;
}

.plg-two .plg-verdict {
  margin: 10px;
  font-size: 12.5px;
}

.plg-score {
  margin-top: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s, transform 0.45s;
}

.plg-score.is-on {
  opacity: 1;
  transform: none;
}

.plg-score-lbl {
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.plg-score-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.plg-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.plg-tile-pct {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.plg-tile-who {
  font-size: 13px;
  font-weight: 700;
}

.plg-tile-how {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}

.plg-tile.is-r .plg-tile-pct {
  color: var(--plg-red);
}

.plg-tile.is-a .plg-tile-pct {
  color: var(--plg-amber);
}

.plg-tile.is-g {
  border-color: rgba(99, 223, 78, 0.55);
  background: rgba(99, 223, 78, 0.08);
}

.plg-tile.is-g .plg-tile-pct {
  color: var(--plg-green);
}


/* one task, two APIs (light figure, matches the docs page) */
.plg-api {
  --plg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 20px 0 24px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid #E5E0DA;
  background: #fff;
  color: #1a1a2e;
  font-family: var(--mw-font-family);
  font-size: 14px;
  line-height: 1.35;
}

.plg-api .plg-ic,
.plg-sv .plg-ic {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
}

.plg-api-req {
  padding: 10px 14px;
  border-radius: 12px;
  background: #F1EEE7;
  font-size: 14px;
}

.plg-api-ar {
  color: #8A8475;
  font-size: 18px;
  display: flex;
}

.plg-api-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #E5E0DA;
  background: #FAF8F3;
  min-width: 0;
}

.plg-api-sys {
  font-family: var(--plg-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4A50C8;
}

.plg-api .plg-api-fn {
  font-family: var(--plg-mono);
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.plg-api-io {
  font-size: 12.5px;
  color: #5F5B5B;
}

.plg-api-io b {
  color: #1a1a2e;
}

.plg-api-carry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: #9A6200;
}

.plg-api-val {
  font-family: var(--plg-mono);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px dashed #D9A52A;
  background: #FFF4D3;
  white-space: nowrap;
}

.plg-api-line {
  display: flex;
  align-items: center;
  width: 100%;
}

.plg-api-line i {
  flex: 1;
  height: 0;
  border-top: 2px dashed #D9A52A;
  background-image: none;
  animation: plg-dash 1.2s linear infinite;
}

.plg-api-line .plg-ic {
  font-size: 16px;
  margin-left: -4px;
}

.plg-api-note {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

@keyframes plg-dash {
  0% { opacity: 0.55; }
  50% { opacity: 1; }
  100% { opacity: 0.55; }
}

@container (max-width: 600px) {

  .plg-api-ar,
  .plg-api-line .plg-ic {
    transform: rotate(90deg);
  }

}

@media (max-width: 760px) {

  .plg-api {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 8px;
  }

  .plg-api-ar {
    justify-self: center;
    transform: rotate(90deg);
  }

  .plg-api-carry {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  .plg-api-line {
    width: auto;
    order: 3;
  }

  .plg-api-line i {
    display: none;
  }

  .plg-api-line .plg-ic {
    transform: rotate(90deg);
    margin: 0;
  }

}

/* rule in a skill vs rule in the tool */
.plg-sv {
  margin: 20px 0 24px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #E5E0DA;
  background: #fff;
  color: #1a1a2e;
  font-family: var(--mw-font-family);
  line-height: 1.35;
}

.plg-sv-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.plg-sv-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #E5E0DA;
  background: #FAF8F3;
  min-width: 0;
}

.plg-sv-k {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4A50C8;
}

.plg-sv-rule {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.plg-sv-q {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #E5E0DA;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5F5B5B;
}

.plg-sv-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
}

.plg-sv-row.is-good {
  margin-top: auto;
  padding-top: 10px;
}

.plg-sv-n {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.plg-sv-row.is-bad .plg-sv-n {
  color: #B3261E;
}

.plg-sv-row.is-good .plg-sv-n {
  color: #1B7048;
}

.plg-sv-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.plg-sv-who span {
  font-size: 12px;
  color: #5F5B5B;
}

.plg-sv-cap {
  margin-top: 12px;
  font-size: 12.5px;
  color: #5F5B5B;
}

@media (max-width: 900px) {

  .plg-sv-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .plg-sv-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .plg-sv-row.is-good {
    margin-top: 10px;
    padding-top: 0;
  }

}

html.dark .plg-api,
html.dark .plg-sv {
  background: #111418;
  border-color: #2A2F36;
  color: #E8E8E8;
}

html.dark .plg-api-req,
html.dark .plg-api-box,
html.dark .plg-sv-card {
  background: #181C22;
  border-color: #2A2F36;
}

html.dark .plg-api .plg-api-fn,
html.dark .plg-api-io b {
  color: #fff;
}

html.dark .plg-api-io,
html.dark .plg-sv-who span,
html.dark .plg-sv-cap,
html.dark .plg-sv-q {
  color: #A9A9B3;
}

html.dark .plg-api-sys,
html.dark .plg-sv-k {
  color: #A0A6FF;
}

html.dark .plg-api-val {
  background: rgba(255, 212, 104, 0.12);
  color: #FFD468;
}

html.dark .plg-api-carry {
  color: #FFD468;
}

html.dark .plg-sv-q {
  border-color: #2A2F36;
}

html.dark .plg-sv-row.is-bad .plg-sv-n {
  color: #FF8A7A;
}

html.dark .plg-sv-row.is-good .plg-sv-n {
  color: #63DF4E;
}

/* Plugins carousel */
.plg-car-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.plg-car-top > div {
  min-width: 0;
}

.plg-stage .plg-car-top .plg-play {
  flex: 0 0 auto;
  margin-top: 4px;
}

.plg-car-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--plg-green);
}

.plg-car-sub {
  margin-top: 4px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}

.plg-car-sub b {
  color: var(--plg-green);
}

.plg-car-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.plg-car-tile.is-blue,
.plg-car-panel.is-blue {
  --hl: #5BB8E8;
}

.plg-car-tile.is-amber,
.plg-car-panel.is-amber {
  --hl: #F2B33D;
}

.plg-car-tile.is-green,
.plg-car-panel.is-green {
  --hl: #63DF4E;
}

.plg-stage .plg-car-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  min-width: 0;
  padding: 13px 11px 11px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
  opacity: 0.55;
  transition: opacity 0.2s, background-color 0.2s;
}

.plg-stage .plg-car-tile:hover {
  opacity: 0.85;
}
.plg-stage .plg-car-tile:focus-visible {
  opacity: 0.85;
}

.plg-stage .plg-car-tile.is-on {
  opacity: 1;
  background: rgba(255, 255, 255, 0.09);
}

.plg-car-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
}

.plg-car-bar > s {
  display: block;
  height: 100%;
  width: 0;
  background: var(--hl);
  text-decoration: none;
}

.plg-car-tile.is-on .plg-car-bar > s {
  width: 100%;
}

.plg-car-tile.is-run .plg-car-bar > s {
  width: 0;
  animation: plg-fill var(--plg-car-ms, 6000ms) linear forwards;
}

.plg-car-tile.is-run:hover:not(.is-go) .plg-car-bar > s,
.plg-car.is-paused .plg-car-tile.is-run .plg-car-bar > s {
  animation-play-state: paused;
}
.plg-car-tile.is-run:focus-within:not(.is-go) .plg-car-bar > s {
  animation-play-state: paused;
}

@keyframes plg-fill {
  to { width: 100%; }
}

.plg-car-ico {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--hl);
}

.plg-stage .plg-car-ico .plg-ic {
  width: 17px;
  height: 17px;
}

.plg-car-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.plg-car-txt b {
  font-size: 14.5px;
  line-height: 1.2;
  color: #fff;
}

.plg-car-txt span {
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
}

.plg-car-panels {
  position: relative;
  margin-top: 10px;
  min-height: 132px;
  border-radius: 14px;
  border: 1.5px solid rgba(99, 223, 78, 0.55);
  overflow: hidden;
}

.plg-car-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
  align-items: center;
  gap: 14px;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}

.plg-car-panel.is-on {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.plg-car-req {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.93);
  color: var(--plg-ink);
  font-size: 14.5px;
}

.plg-car-ar {
  display: flex;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
}

.plg-car-out {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.plg-car-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.3;
}

.plg-stage .plg-car-step .plg-ic {
  width: 15px;
  height: 15px;
}

.plg-car:not(.is-still) .plg-car-panel.is-on .plg-car-step {
  opacity: 0;
  animation: plg-in 0.35s ease forwards;
}

.plg-car:not(.is-still) .plg-car-panel.is-on .plg-car-step:nth-child(2) {
  animation-delay: 0.45s;
}

.plg-car:not(.is-still) .plg-car-panel.is-on .plg-car-step:nth-child(3) {
  animation-delay: 0.9s;
}

@keyframes plg-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.plg-car-step b {
  font-size: 17px;
  color: #fff;
}

.plg-stage .plg-car-step code {
  font-size: 12.5px;
  color: #FFE1A1;
}

.plg-car-step em {
  margin-left: 3px;
  font-style: normal;
  font-weight: 700;
  color: var(--plg-green);
}

.plg-car-step.is-n {
  color: rgba(255, 255, 255, 0.8);
}

.plg-car-step.is-no {
  color: #FF8F7D;
  text-decoration: line-through;
}

.plg-car-step.is-bad {
  color: #FF8F7D;
  font-weight: 700;
}

.plg-car-step.is-ok {
  color: var(--plg-green);
  font-weight: 700;
}

.plg-car-foot {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.plg-car-foot b {
  color: #fff;
}

@container (max-width: 540px) {

  .plg-car-tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .plg-stage .plg-car-tile {
    padding: 11px 10px 9px;
  }

  .plg-car-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .plg-car-ar {
    transform: rotate(90deg);
    justify-self: start;
  }

  .plg-car-title {
    font-size: 26px;
  }

}

/* narrow columns (phones): reflow inside the stage */
@container (max-width: 540px) {

  .plg-two {
    grid-template-columns: minmax(0, 1fr);
  }

  .plg-score-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .plg-tile {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
  }

  .plg-tile-pct {
    font-size: 22px;
    min-width: 70px;
  }

  .plg-form-st:not(.is-cur) .plg-form-l {
    display: none;
  }

  .plg-form-st {
    flex: 0 0 auto;
  }

  .plg-form-st.is-cur {
    flex: 1;
  }

  .plg-form-hd,
  .plg-form-sp,
  .plg-form-bd {
    padding-left: 12px;
    padding-right: 12px;
  }

  .plg-f-inp {
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  /* right-column dropdowns open toward the left so they stay inside the card */
  .plg-f-r .plg-dd {
    left: auto;
    right: 0;
    min-width: 290px;
    transform-origin: bottom right;
  }

  .plg-log-hd {
    flex-direction: column;
    gap: 8px;
  }

  .plg-stage .plg-log-c code {
    font-size: 11.5px;
  }

  .plg-form-t {
    white-space: normal;
    line-height: 1.25;
  }

  .plg-m {
    max-width: 94%;
  }

  .plg-ctl-lbl {
    display: none;
  }

}

@media (max-width: 480px) {

  .plg-stage {
    padding: 14px;
    border-radius: 12px;
  }

}

@media (prefers-reduced-motion: reduce) {

  .plg-stage *,
  .plg-stage *::before,
  .plg-stage *::after {
    transition: none !important;
    animation: none !important;
  }

  .plg-cur,
  .plg-cur-ring {
    display: none;
  }

}