/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 40px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 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);
}


.light, :root {
  --accent-1: #fafefd;
  --accent-2: #f3fbf9;
  --accent-3: #e0f8f3;
  --accent-4: #cdf3eb;
  --accent-5: #b8eae1;
  --accent-6: #a2ded3;
  --accent-7: #85cdc0;
  --accent-8: #57b9a9;
  --accent-9: #4aad9e;
  --accent-10: #25a393;
  --accent-11: #007d70;
  --accent-12: #103d36;

  --accent-a1: #00cc9905;
  --accent-a2: #00aa800c;
  --accent-a3: #00c69d1f;
  --accent-a4: #00c29932;
  --accent-a5: #00b49447;
  --accent-a6: #00a5875d;
  --accent-a7: #01977c7a;
  --accent-a8: #00957da8;
  --accent-a9: #008c77b5;
  --accent-a10: #009381da;
  --accent-a11: #007d70;
  --accent-a12: #003029ef;

  --accent-contrast: #fff;
  --accent-surface: #f0faf8cc;
  --accent-indicator: #4aad9e;
  --accent-track: #4aad9e;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0046 181.9);
      --accent-2: oklch(98.1% 0.0088 181.9);
      --accent-3: oklch(96.1% 0.0265 181.9);
      --accent-4: oklch(93.5% 0.041 181.9);
      --accent-5: oklch(90% 0.0531 181.9);
      --accent-6: oklch(85.6% 0.063 181.9);
      --accent-7: oklch(79.7% 0.0748 181.9);
      --accent-8: oklch(72.1% 0.0953 181.9);
      --accent-9: oklch(68.5% 0.0953 181.9);
      --accent-10: oklch(64.6% 0.1075 181.9);
      --accent-11: oklch(53% 0.0953 181.9);
      --accent-12: oklch(32.7% 0.0495 181.9);

      --accent-a1: color(display-p3 0.0235 0.7569 0.5137 / 0.016);
      --accent-a2: color(display-p3 0.0196 0.6471 0.4667 / 0.044);
      --accent-a3: color(display-p3 0.0039 0.6941 0.5412 / 0.102);
      --accent-a4: color(display-p3 0.0039 0.702 0.5373 / 0.169);
      --accent-a5: color(display-p3 0.0039 0.6431 0.5098 / 0.24);
      --accent-a6: color(display-p3 0.0039 0.5647 0.451 / 0.314);
      --accent-a7: color(display-p3 0.0039 0.5098 0.4078 / 0.416);
      --accent-a8: color(display-p3 0 0.4941 0.3961 / 0.557);
      --accent-a9: color(display-p3 0 0.4549 0.3725 / 0.604);
      --accent-a10: color(display-p3 0 0.4627 0.3843 / 0.687);
      --accent-a11: color(display-p3 0 0.3451 0.2902 / 0.789);
      --accent-a12: color(display-p3 0 0.1373 0.1098 / 0.887);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9451 0.9804 0.9725 / 0.8);
      --accent-indicator: oklch(68.5% 0.0953 181.9);
      --accent-track: oklch(68.5% 0.0953 181.9);
    }
  }
}


.light, :root {
  --grayscale-1: #fbfdfc;
  --grayscale-2: #f7f9f8;
  --grayscale-3: #eef1f0;
  --grayscale-4: #e6e9e8;
  --grayscale-5: #dfe2e0;
  --grayscale-6: #d7dad9;
  --grayscale-7: #cbcfcd;
  --grayscale-8: #b8bcba;
  --grayscale-9: #868e8b;
  --grayscale-10: #7c8481;
  --grayscale-11: #5f6563;
  --grayscale-12: #1a211e;

  --grayscale-a1: #00804004;
  --grayscale-a2: #00402008;
  --grayscale-a3: #002d1e11;
  --grayscale-a4: #001f1519;
  --grayscale-a5: #00180820;
  --grayscale-a6: #00140d28;
  --grayscale-a7: #00140a34;
  --grayscale-a8: #000f0847;
  --grayscale-a9: #00110b79;
  --grayscale-a10: #00100a83;
  --grayscale-a11: #000a07a0;
  --grayscale-a12: #000805e5;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #868e8b;
  --grayscale-track: #868e8b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.986 0.992 0.988);
      --grayscale-2: color(display-p3 0.97 0.977 0.974);
      --grayscale-3: color(display-p3 0.935 0.944 0.94);
      --grayscale-4: color(display-p3 0.904 0.913 0.909);
      --grayscale-5: color(display-p3 0.875 0.885 0.88);
      --grayscale-6: color(display-p3 0.844 0.854 0.849);
      --grayscale-7: color(display-p3 0.8 0.811 0.806);
      --grayscale-8: color(display-p3 0.725 0.738 0.732);
      --grayscale-9: color(display-p3 0.531 0.556 0.546);
      --grayscale-10: color(display-p3 0.492 0.515 0.506);
      --grayscale-11: color(display-p3 0.377 0.395 0.389);
      --grayscale-12: color(display-p3 0.107 0.129 0.118);

      --grayscale-a1: #00804004;
      --grayscale-a2: #00402008;
      --grayscale-a3: #002d1e11;
      --grayscale-a4: #001f1519;
      --grayscale-a5: #00180820;
      --grayscale-a6: #00140d28;
      --grayscale-a7: #00140a34;
      --grayscale-a8: #000f0847;
      --grayscale-a9: #00110b79;
      --grayscale-a10: #00100a83;
      --grayscale-a11: #000a07a0;
      --grayscale-a12: #000805e5;

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


.dark {
  --accent-1: #0d1312;
  --accent-2: #131b1a;
  --accent-3: #162c28;
  --accent-4: #153934;
  --accent-5: #1e463f;
  --accent-6: #28544d;
  --accent-7: #33665e;
  --accent-8: #3c7b71;
  --accent-9: #4aad9e;
  --accent-10: #3ca192;
  --accent-11: #6dcebf;
  --accent-12: #b7ede2;

  --accent-a1: #00bb0003;
  --accent-a2: #40f9b60b;
  --accent-a3: #3dffcc1d;
  --accent-a4: #29ffd72b;
  --accent-a5: #4cffd839;
  --accent-a6: #63ffe048;
  --accent-a7: #70fde35c;
  --accent-a8: #72ffe572;
  --accent-a9: #67fee6a8;
  --accent-a10: #58fee49b;
  --accent-a11: #85ffebcb;
  --accent-a12: #c5fff3ec;

  --accent-contrast: #fff;
  --accent-surface: #15252180;
  --accent-indicator: #4aad9e;
  --accent-track: #4aad9e;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(17.9% 0.0095 181.9);
      --accent-2: oklch(21.5% 0.0131 181.9);
      --accent-3: oklch(27.3% 0.0294 181.9);
      --accent-4: oklch(31.7% 0.0424 181.9);
      --accent-5: oklch(36.2% 0.0466 181.9);
      --accent-6: oklch(41.4% 0.0507 181.9);
      --accent-7: oklch(47.3% 0.0574 181.9);
      --accent-8: oklch(53.9% 0.0673 181.9);
      --accent-9: oklch(68.5% 0.0953 181.9);
      --accent-10: oklch(64.6% 0.0953 181.9);
      --accent-11: oklch(78.9% 0.0953 181.9);
      --accent-12: oklch(90.5% 0.056 181.9);

      --accent-a1: color(display-p3 0 0.9412 0 / 0.009);
      --accent-a2: color(display-p3 0.4353 0.9804 0.7137 / 0.043);
      --accent-a3: color(display-p3 0.4235 0.9961 0.8235 / 0.11);
      --accent-a4: color(display-p3 0.4039 1 0.8667 / 0.164);
      --accent-a5: color(display-p3 0.4824 1 0.8627 / 0.219);
      --accent-a6: color(display-p3 0.549 1 0.8941 / 0.278);
      --accent-a7: color(display-p3 0.5922 1 0.9098 / 0.353);
      --accent-a8: color(display-p3 0.5922 1 0.9059 / 0.442);
      --accent-a9: color(display-p3 0.5765 1 0.9137 / 0.648);
      --accent-a10: color(display-p3 0.5412 1 0.9059 / 0.597);
      --accent-a11: color(display-p3 0.6431 1 0.9333 / 0.786);
      --accent-a12: color(display-p3 0.8275 1 0.9608 / 0.916);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.0941 0.1412 0.1255 / 0.5);
      --accent-indicator: oklch(68.5% 0.0953 181.9);
      --accent-track: oklch(68.5% 0.0953 181.9);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

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

.light, :root {
  color-scheme: light;
  --accent: rgba(74, 173, 158, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(74, 173, 158, 1);
  --background: rgba(17, 17, 19, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #111113;
}

@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap");

/* Custom styles for Fern Docs Starter */

/* Welcome-page gradient background */
.fern-background-image {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 50%);
}

/* Homepage: luminous teal→white gradient from the Figma design (light mode). */
html[data-orbit-route="home"]:not(.dark) .fern-background-image {
  background-image: linear-gradient(
    258.63deg,
    rgb(204, 251, 241) 7.34%,
    rgb(224, 242, 254) 22.67%,
    rgb(255, 255, 255) 90.47%
  );
  background-repeat: no-repeat;
}

/* Dark mode: mirror the light gradient with a dark green glow on the right that
   merges left into Fern's dark background. Tuned to the darkened ring teal so
   the rings dissolve smoothly into it on the right. */
html[data-orbit-route="home"].dark .fern-background-image {
  background-image: linear-gradient(
    215deg,
    #04201d 0%,
    rgba(4, 32, 29, 0.55) 30%,
    rgba(4, 32, 29, 0) 66%
  );
  background-repeat: no-repeat;
}

.fern-header-tabs {
  justify-content: center;
}

/* Hide the header search bar on the homepage only (flagged by home-route-flag.js) */
html[data-orbit-route="home"] #fern-header div:has(> div > #fern-search-button) {
  display: none;
}

/* Add 10px of breathing room above the header content */
#fern-header .width-before-scroll-bar {
  padding-top: 10px;
}

/* Single-line header (desktop): logo + tabs on the left, search/theme in the right corner.
   By default the header stacks two rows inside `.width-before-scroll-bar`:
   `.fern-header-content` (logo + search + theme, nested a few levels deep) and
   `.fern-header-tabs`. We make that wrapper a single flex row and unwrap the nested
   content wrappers with `display: contents` so the logo/search/theme promote up onto the
   same line as the tabs, then order them left-to-right. */
@media (min-width: 1024px) {

  #fern-header .width-before-scroll-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding-left: 32px;
    padding-right: 32px;
    position: relative; /* anchor for the absolutely-centered tabs */
  }

  /* Unwrap the three nested wrappers between the row and the logo/search/theme */
  #fern-header .fern-header-content,
  #fern-header .fern-header-content > div,
  #fern-header .fern-header-content > div > div:first-child {
    display: contents;
  }

  /* Fern makes these grow to fill the default row; pin them to content width so the
     tabs sit snug next to the logo and the auto margin can push the rest right. */
  #fern-header .fern-header-logo-container,
  #fern-header .fern-header-navbar-links {
    flex: 0 0 auto;
  }

  #fern-header .fern-header-logo-container {
    order: 1;
  }

  /* Left-align the tab row directly next to the logo (matches the Figma
     reference), and let the auto right margin push the search/theme group into
     the right corner. */
  #fern-header .fern-header-tabs {
    order: 2;
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    width: auto;
    margin: 0 auto 0 24px;
    padding: 0;
    justify-content: flex-start;
  }

  #fern-header div:has(> div > #fern-search-button) {
    order: 3;
    width: auto;
    max-width: 320px;
    flex: 0 0 auto;
  }

  #fern-header .fern-header-navbar-links {
    order: 4;
  }

  #fern-header .fern-header-mobile-menu-button {
    order: 5;
  }

}

/* Remove the teal underline bar beneath the active nav tab; the active tab
   text already turns teal, which serves as the selection indicator. */
#fern-header [data-radix-collection-item]::after {
  display: none !important;
}

/* Hide Search and Ask AI on the Orbit landing page. */
html[data-orbit-route="home"] .fern-header-search-bar,
html[data-orbit-route="home"] #fern-search-button,
html[data-orbit-route="home"] #fern-ask-ai-button {
  display: none !important;
}

.fern-layout-overview article > header {
  padding-top: 4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fern-layout-overview article > header > div:first-child {
  justify-content: center;
}

.fern-layout-overview article > header h1 {
  font-size: 3rem;
}

.welcome-help {
  text-align: center;
}

.welcome-buttons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: -1rem;
  padding-top: 0.5rem;
  padding-bottom: 4rem;
}

/* Left-align the homepage hero (overrides the centered overview layout).
   Scoped to the home route so other overview pages stay centered. */
html[data-orbit-route="home"] .fern-layout-overview article > header {
  text-align: left;
  align-items: flex-start;
}

html[data-orbit-route="home"] .fern-layout-overview article > header > div:first-child {
  justify-content: flex-start;
}

html[data-orbit-route="home"] .welcome-buttons {
  justify-content: flex-start;
}

html[data-orbit-route="home"] .welcome-help {
  text-align: left;
}

/* ---------- Homepage hero: layered ring + star art (from Figma) ----------
   Anchors the concentric ring artwork to the top-right of the hero, bleeding up
   behind the header and off the right edge, with the copy held in the left
   column. Scoped to the home route so other pages are untouched. */
html[data-orbit-route="home"] .fern-layout-overview article {
  position: relative;
  /* Clip the ring art's rightward bleed so it never widens the page (no
     horizontal scroll), while still allowing it to bleed upward behind the
     header. overflow-clip-margin extends the visible clip region past the
     article's content box so the art can paint into the right margin (up to the
     viewport edge) instead of hard-clipping the rings at the box edge — this
     avoids the lower-right arc of the rings being cut off in dark mode. */
  overflow-x: clip;
  overflow-y: visible;
  overflow-clip-margin: 250px;
}

/* Hold the headline, subtitle and CTAs in the left column. */
html[data-orbit-route="home"] .fern-layout-overview article > header {
  max-width: 600px;
}

/* Hold the subtitle to a comfortable measure, narrower than the headline
   column, while still reading as one flowing paragraph. */
html[data-orbit-route="home"] .fern-page-subtitle {
  max-width: 480px;
}

/* Almarai display headline to match the Figma design. */
html[data-orbit-route="home"] .fern-layout-overview article > header h1 {
  font-family: "Almarai", var(--font-body, sans-serif);
  font-weight: 300;
  font-size: clamp(36px, 3.9vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  /* Greedy wrap (override Fern's text-balance) so the column width controls the
     line break ("Turn any goal into the" / "right API calls."). */
  text-wrap: wrap;
}

.orbit-art {
  position: absolute;
  top: calc(-4rem - 20px);
  right: clamp(-230px, calc(-6vw - 30px), -94px);
  width: min(50vw, 663px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 0;
}

.orbit-art__ring,
.orbit-art__star {
  position: absolute;
  /* Fern's prose styles add a 2rem block margin to images. Reset that margin
     and encode the intended art center directly so SVG and image layers stay
     aligned at every viewport width. */
  top: calc(50% + 2rem);
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  display: block;
  height: auto;
}

.orbit-art__ring--138 { width: 100%; }
.orbit-art__ring--137 { width: 81.2%; }
.orbit-art__ring--136 { width: 58.9%; }
.orbit-art__ring--135 { width: 41.1%; }
.orbit-art__star {
  width: 20.8%;
}

/* Extend the end-to-end example from the content edge to the center of the
   responsive star artwork. */
html[data-orbit-route="home"] .e2e-example {
  width: calc(
    100% - clamp(-230px, calc(-6vw - 30px), -94px) - min(25vw, 331.5px)
  );
}

/* Below the two-column breakpoint, drop the art into the flow above the CTAs
   and let the copy span the full width. */
@media (max-width: 900px) {

  /* Center the hero copy on mobile and keep it to a shorter column that always
     fits the viewport (never wider than the screen). */
  html[data-orbit-route="home"] .fern-layout-overview article > header {
    max-width: min(30rem, 92vw);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    align-items: center;
  }

  /* Larger heading on mobile (+20px). */
  html[data-orbit-route="home"] .fern-layout-overview article > header h1 {
    font-size: clamp(46px, 12vw, 52px);
  }

  html[data-orbit-route="home"] .fern-page-subtitle {
    max-width: min(24rem, 88vw);
    margin-left: auto;
    margin-right: auto;
  }

  /* Stack the CTAs full-width instead of a single row — three buttons side
     by side don't fit any phone width, and the hero's overflow-x: clip means
     an unwrapped row silently clips rather than becoming scrollable. */
  html[data-orbit-route="home"] .welcome-buttons {
    flex-direction: column;
    align-items: stretch;
    max-width: min(30rem, 92vw);
    margin-left: auto;
    margin-right: auto;
  }

  html[data-orbit-route="home"] .welcome-buttons .fern-button {
    width: 100%;
    justify-content: center;
  }

  /* Hide the hero graphic on mobile. */
  .orbit-art {
    display: none;
  }

  html[data-orbit-route="home"] .e2e-example {
    width: 100%;
  }

}

/* ---------- Homepage CTAs (from Figma) ---------- */
html[data-orbit-route="home"] .welcome-buttons .fern-button {
  border-radius: 8px;
}

html[data-orbit-route="home"] .welcome-buttons .fern-button.filled.primary {
  background: #00413c;
  border-color: #00413c;
  color: #fff;
}

html[data-orbit-route="home"] .welcome-buttons .fern-button.filled.primary:hover {
  background: #0b7c72;
  border-color: #0b7c72;
}
html[data-orbit-route="home"] .welcome-buttons .fern-button.filled.primary:focus-visible {
  background: #0b7c72;
  border-color: #0b7c72;
}

/* Frosted ghost button — light mode only; dark mode uses Fern's default
   outlined button to match the docs page. */
html[data-orbit-route="home"]:not(.dark) .welcome-buttons .fern-button.outlined {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(13, 148, 136, 0.25);
  color: #115e59;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Accent hover for the outlined CTAs (Book a demo, Slack, Email) — matches
   Fern's native accent hover: soft teal fill, teal border, teal text/icon. */
html[data-orbit-route="home"] .welcome-buttons .fern-button.outlined {
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

html[data-orbit-route="home"]:not(.dark) .welcome-buttons .fern-button.outlined:hover {
  background: var(--accent-a3, #d6ede7);
  border-color: var(--accent-a8, #4aad9e);
  color: var(--accent-a11, #0d7d70);
}
html[data-orbit-route="home"]:not(.dark) .welcome-buttons .fern-button.outlined:focus-visible {
  background: var(--accent-a3, #d6ede7);
  border-color: var(--accent-a8, #4aad9e);
  color: var(--accent-a11, #0d7d70);
}

/* Dark mode: same hover, using the darker button teal. */
html[data-orbit-route="home"].dark .welcome-buttons .fern-button.outlined:hover {
  background: rgba(0, 65, 60, 0.55);
  border-color: #2f7d72;
  color: #7fd4c6;
}
html[data-orbit-route="home"].dark .welcome-buttons .fern-button.outlined:focus-visible {
  background: rgba(0, 65, 60, 0.55);
  border-color: #2f7d72;
  color: #7fd4c6;
}

/* ---------- Homepage cards (from Figma) ---------- */
html[data-orbit-route="home"] .fern-card {
  border-radius: 20px;
}

/* Tighten the vertical inset around the tabs in the homepage code example. */
html[data-orbit-route="home"] .e2e-example .fern-card {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Card icons: smaller (32px -> 23.1px) with a slightly thicker (0.5px) stroke. */
html[data-orbit-route="home"] .card-icon {
  width: 23.1px;
  height: 23.1px;
}

html[data-orbit-route="home"] .card-icon svg path {
  stroke: currentColor;
  stroke-width: 0.5px;
  vector-effect: non-scaling-stroke;
}

/* Card fills/borders are light-mode only; in dark mode cards fall back to
   Fern's defaults so they match the docs page. */
html[data-orbit-route="home"]:not(.dark) .fern-card {
  background: #fafdff;
  border: 1px solid #9ad9d9;
}

html[data-orbit-route="home"]:not(.dark) .fern-card.interactive:hover {
  transform: translateY(-2px);
  border-color: #0d9488;
  box-shadow: 0 12px 28px -14px rgba(13, 148, 136, 0.45);
}
html[data-orbit-route="home"]:not(.dark) .fern-card.interactive:focus-visible {
  transform: translateY(-2px);
  border-color: #0d9488;
  box-shadow: 0 12px 28px -14px rgba(13, 148, 136, 0.45);
}

/* Dark mode: dark-grey card fill. */
html[data-orbit-route="home"].dark .fern-card {
  background: #1b1b1e;
  border: 1px solid #2b2b30;
}

html[data-orbit-route="home"].dark .fern-card.interactive:hover {
  transform: translateY(-2px);
  border-color: #0d9488;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
}
html[data-orbit-route="home"].dark .fern-card.interactive:focus-visible {
  transform: translateY(-2px);
  border-color: #0d9488;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
}

/* Dark mode: luminous teal central sphere glow (ring strokes colored below). */
html[data-orbit-route="home"].dark .orbit-art__ring--135 circle:not([stroke]) {
  filter: brightness(0.78) saturate(1.35);
  opacity: 0.7;
}

/* Dark mode: ring strokes go teal (left) -> dark green (right). Each stroke
   gradient runs right(first stop)->left(last stop), so recolor the first stop
   dark green and the last stop teal. */
html[data-orbit-route="home"].dark #orbit-gradient-135 stop:first-child,
html[data-orbit-route="home"].dark #orbit-gradient-136 stop:first-child,
html[data-orbit-route="home"].dark #orbit-gradient-137 stop:first-child,
html[data-orbit-route="home"].dark #orbit-gradient-138 stop:first-child {
  stop-color: #0d3529;
}

html[data-orbit-route="home"].dark #orbit-gradient-135 stop:last-child,
html[data-orbit-route="home"].dark #orbit-gradient-136 stop:last-child,
html[data-orbit-route="home"].dark #orbit-gradient-137 stop:last-child,
html[data-orbit-route="home"].dark #orbit-gradient-138 stop:last-child {
  stop-color: #2aa392;
}

/* Fade the ring artwork out toward BOTH the right and the bottom in dark mode so
   it dissolves smoothly into the background instead of hard-clipping at the
   article's edge. Two gradients composited with intersect: a pixel is only
   visible where both are opaque, so opacity falls to 0 approaching the right and
   bottom edges while the star and upper-left rings stay crisp. */
html[data-orbit-route="home"].dark .orbit-art {
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%),
    linear-gradient(to bottom, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 55%, transparent 100%),
    linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-composite: intersect;
}

.orbit-footer {
  width: 100%;
  border-top: 1px solid #e4e4e7;
  color: #989fb3;
  font-size: 12px;
  line-height: 18px;
}

/* Dark mode: soft light-grey divider above the footer. */
html.dark .orbit-footer {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.orbit-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 8px;
  padding: 24px 32px;
  text-align: center;
}

.orbit-footer__left {
  display: flex;
  justify-content: center;
}

.orbit-footer__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.orbit-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
}

.orbit-footer__link,
.orbit-footer__button {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: #989fb3;
  font: inherit;
  text-decoration: none;
}

.orbit-footer__button {
  cursor: pointer;
}

.orbit-footer__link:hover,
.orbit-footer__button:hover {
  color: #3a3a3a;
  text-decoration: underline;
}
.orbit-footer__link:focus-visible,
.orbit-footer__button:focus-visible {
  color: #3a3a3a;
  text-decoration: underline;
}

.orbit-footer__privacy-notice {
  color: #989fb3;
}

.orbit-footer__privacy-button {
  white-space: nowrap;
}

.orbit-footer__copyright {
  margin: 0;
}

@media (min-width: 768px) {

  .orbit-footer__inner {
    grid-template-columns: 1fr 2fr 1fr;
    text-align: left;
  }

  .orbit-footer__left {
    justify-content: flex-start;
  }

  .orbit-footer__copyright {
    text-align: right;
  }

}