/*fern-site-stylesheet*/:root {
  --header-height: 85px;
  --header-height-real: 85px;
  --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: #fdfdfe;
  --accent-2: #f7f9fd;
  --accent-3: #eef2fb;
  --accent-4: #e2eafa;
  --accent-5: #d3dff8;
  --accent-6: #c2d2f4;
  --accent-7: #adc0e9;
  --accent-8: #8fa7db;
  --accent-9: #34529a;
  --accent-10: #264289;
  --accent-11: #4362ac;
  --accent-12: #223050;

  --accent-a1: #00008002;
  --accent-a2: #0040c008;
  --accent-a3: #003cc311;
  --accent-a4: #0047d41d;
  --accent-a5: #0046d72c;
  --accent-a6: #0043d23d;
  --accent-a7: #003cbb52;
  --accent-a8: #0037ae70;
  --accent-a9: #002680cb;
  --accent-a10: #002174d9;
  --accent-a11: #002a8fbc;
  --accent-a12: #001035dd;

  --accent-contrast: #fff;
  --accent-surface: #f5f8fdcc;
  --accent-indicator: #34529a;
  --accent-track: #34529a;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.001 264.9);
      --accent-2: oklch(98.3% 0.0057 264.9);
      --accent-3: oklch(96.1% 0.0122 264.9);
      --accent-4: oklch(93.5% 0.024 264.9);
      --accent-5: oklch(90.3% 0.0363 264.9);
      --accent-6: oklch(86.3% 0.0507 264.9);
      --accent-7: oklch(80.7% 0.0616 264.9);
      --accent-8: oklch(73% 0.0804 264.9);
      --accent-9: oklch(45.4% 0.1226 264.9);
      --accent-10: oklch(40% 0.1226 264.9);
      --accent-11: oklch(51% 0.1226 264.9);
      --accent-12: oklch(31.3% 0.0607 264.9);

      --accent-a1: color(display-p3 0.0196 0.0196 0.5098 / 0.008);
      --accent-a2: color(display-p3 0.0196 0.2667 0.7569 / 0.032);
      --accent-a3: color(display-p3 0.0078 0.1922 0.6902 / 0.063);
      --accent-a4: color(display-p3 0.0039 0.2549 0.7882 / 0.11);
      --accent-a5: color(display-p3 0.0039 0.2431 0.7882 / 0.165);
      --accent-a6: color(display-p3 0.0039 0.2118 0.7608 / 0.228);
      --accent-a7: color(display-p3 0.0039 0.1804 0.6706 / 0.306);
      --accent-a8: color(display-p3 0.0039 0.1725 0.6275 / 0.42);
      --accent-a9: color(display-p3 0 0.1137 0.4588 / 0.769);
      --accent-a10: color(display-p3 0 0.098 0.4157 / 0.828);
      --accent-a11: color(display-p3 0 0.1294 0.5137 / 0.71);
      --accent-a12: color(display-p3 0 0.051 0.1882 / 0.855);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9647 0.9725 0.9922 / 0.8);
      --accent-indicator: oklch(45.4% 0.1226 264.9);
      --accent-track: oklch(45.4% 0.1226 264.9);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfcfd;
  --grayscale-2: #faf9fb;
  --grayscale-3: #f2eff3;
  --grayscale-4: #eae7ec;
  --grayscale-5: #e3dfe6;
  --grayscale-6: #dbd8e0;
  --grayscale-7: #d0cdd7;
  --grayscale-8: #bcbac7;
  --grayscale-9: #8e8c99;
  --grayscale-10: #84828e;
  --grayscale-11: #65636d;
  --grayscale-12: #211f26;

  --grayscale-a1: #55005503;
  --grayscale-a2: #2b005506;
  --grayscale-a3: #30004010;
  --grayscale-a4: #20003618;
  --grayscale-a5: #20003820;
  --grayscale-a6: #14003527;
  --grayscale-a7: #10003332;
  --grayscale-a8: #08003145;
  --grayscale-a9: #05001d73;
  --grayscale-a10: #0500197d;
  --grayscale-a11: #0400119c;
  --grayscale-a12: #020008e0;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.991 0.988 0.992);
      --grayscale-2: color(display-p3 0.98 0.976 0.984);
      --grayscale-3: color(display-p3 0.946 0.938 0.952);
      --grayscale-4: color(display-p3 0.915 0.906 0.925);
      --grayscale-5: color(display-p3 0.886 0.876 0.901);
      --grayscale-6: color(display-p3 0.856 0.846 0.875);
      --grayscale-7: color(display-p3 0.814 0.804 0.84);
      --grayscale-8: color(display-p3 0.735 0.728 0.777);
      --grayscale-9: color(display-p3 0.555 0.549 0.596);
      --grayscale-10: color(display-p3 0.514 0.508 0.552);
      --grayscale-11: color(display-p3 0.395 0.388 0.424);
      --grayscale-12: color(display-p3 0.128 0.122 0.147);

      --grayscale-a1: #55005503;
      --grayscale-a2: #2b005506;
      --grayscale-a3: #30004010;
      --grayscale-a4: #20003618;
      --grayscale-a5: #20003820;
      --grayscale-a6: #14003527;
      --grayscale-a7: #10003332;
      --grayscale-a8: #08003145;
      --grayscale-a9: #05001d73;
      --grayscale-a10: #0500197d;
      --grayscale-a11: #0400119c;
      --grayscale-a12: #020008e0;

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


.dark {
  --accent-1: #0c111d;
  --accent-2: #111726;
  --accent-3: #152549;
  --accent-4: #1a2f62;
  --accent-5: #213975;
  --accent-6: #2a4585;
  --accent-7: #34529a;
  --accent-8: #3d60b5;
  --accent-9: #34529a;
  --accent-10: #294384;
  --accent-11: #8eb4ff;
  --accent-12: #d3e2ff;

  --accent-a1: #0000f608;
  --accent-a2: #3959f912;
  --accent-a3: #2e69ff38;
  --accent-a4: #336bfd54;
  --accent-a5: #3d72ff68;
  --accent-a6: #497dff7a;
  --accent-a7: #5183ff91;
  --accent-a8: #5383feaf;
  --accent-a9: #5183ff91;
  --accent-a10: #477afd79;
  --accent-a11: #8eb4ff;
  --accent-a12: #d3e2ff;

  --accent-contrast: #fff;
  --accent-surface: #141c3680;
  --accent-indicator: #34529a;
  --accent-track: #34529a;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(18% 0.0253 264.9);
      --accent-2: oklch(20.8% 0.0306 264.9);
      --accent-3: oklch(27.2% 0.0704 264.9);
      --accent-4: oklch(31.8% 0.0957 264.9);
      --accent-5: oklch(36.2% 0.1069 264.9);
      --accent-6: oklch(40.5% 0.1129 264.9);
      --accent-7: oklch(45.4% 0.1226 264.9);
      --accent-8: oklch(50.8% 0.1402 264.9);
      --accent-9: oklch(45.4% 0.1226 264.9);
      --accent-10: oklch(40% 0.1129 264.9);
      --accent-11: oklch(77.6% 0.1263 264.9);
      --accent-12: oklch(91.1% 0.0441 264.9);

      --accent-a1: color(display-p3 0 0 0.9922 / 0.026);
      --accent-a2: color(display-p3 0.2431 0.3725 0.9922 / 0.065);
      --accent-a3: color(display-p3 0.2471 0.4275 1 / 0.211);
      --accent-a4: color(display-p3 0.2588 0.4235 1 / 0.314);
      --accent-a5: color(display-p3 0.2902 0.4549 1 / 0.391);
      --accent-a6: color(display-p3 0.3412 0.498 1 / 0.46);
      --accent-a7: color(display-p3 0.3765 0.5255 1 / 0.546);
      --accent-a8: color(display-p3 0.3843 0.5333 0.9961 / 0.657);
      --accent-a9: color(display-p3 0.3765 0.5255 1 / 0.546);
      --accent-a10: color(display-p3 0.3373 0.4863 1 / 0.455);
      --accent-a11: color(display-p3 0.6039 0.7216 0.9961 / 0.975);
      --accent-a12: color(display-p3 0.851 0.898 1 / 0.988);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.0784 0.1098 0.2039 / 0.5);
      --accent-indicator: oklch(45.4% 0.1226 264.9);
      --accent-track: oklch(45.4% 0.1226 264.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(52, 82, 154, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: rgba(14, 27, 42, 1);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(52, 82, 154, 1);
  --background: rgba(14, 18, 22, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: rgba(14, 27, 42, 1);
  --card-background: initial;
  --theme-color: #0e1216;
}

.hero-section {
  text-align: center;
  padding: 133px 20px;
  min-height: 600px;
  margin: -24px -24px 0;
  background-image: url('https://boosted.ai/wp-content/uploads/2023/12/Hero-Extended-1-Opt.png');
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Dark overlay to ensure text readability */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 17, 25, 0.7); /* Dark overlay for better text contrast */
  z-index: 1;
}

/* Ensure content stays above the overlay */
.hero-section > * {
  position: relative;
  z-index: 2;
}

/* Keep text white for contrast against dark background */
.hero-section h1,
.hero-section p {
  color: white !important;
}

.hero-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.hero-subtitle {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8) !important;  /* Slightly transparent white */
  max-width: 600px;
  margin: 0 auto 32px;
  position: relative;
  z-index: 1;
}

.button-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 32px 0;
  position: relative;
  z-index: 1;
}

/* Common button styles for both hero and CTA sections */
.button-group a {
  padding: 12px 24px;
  border-radius: 0;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-block;
}

/* Hero section specific buttons */
.hero-section .button-group a:first-child {
  background: #209CFF;
  color: white;
  box-shadow: 0 4px 15px rgba(32, 156, 255, 0.3);
}

.hero-section .button-group a:last-child {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  backdrop-filter: blur(4px);
}

/* CTA section specific buttons */
.cta-section .button-group a:first-child {
  background: var(--fern-color-accent-primary);
  color: white;
  box-shadow: 0 4px 15px rgba(32, 156, 255, 0.1);
}

.cta-section .button-group a:last-child {
  background: transparent;
  border: 1px solid var(--fern-color-accent-primary);
  color: var(--fern-color-accent-primary);
}

/* Hover effects for all buttons */
.button-group a:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}
.button-group a:focus-visible {
  transform: translateY(-2px);
  opacity: 0.9; outline: none;
}

.features-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 60px 20px;
  background: var(--fern-color-bg-primary);
}

.feature {
  padding: 32px;
  border-radius: 12px;
  background: var(--fern-color-bg-elevated);
  border: 1px solid var(--fern-color-border);
  transition: transform 0.2s;
}

.feature:hover {
  transform: translateY(-4px);
}
.feature:focus-visible {
  transform: translateY(-4px); outline: none;
}

.feature h2 {
  margin-top: 0;
  font-size: 24px;
  color: var(--fern-color-text-primary);
}

.feature p {
  color: var(--fern-color-text-secondary);
  margin: 12px 0 0;
  line-height: 1.6;
}

.cta-section {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(180deg, var(--fern-color-bg-primary) 0%, var(--fern-color-bg-secondary) 100%);
}

/* Override Fern's default button styles to make them square */
.fern-button,
.fern-mdx-link {
  border-radius: 0 !important;
}

.group.cursor-pointer.fern-button.filled.normal.primary {
  background-color: #4CAF50;
  color: white;
  border-radius: 6px !important;
  padding: 24px 40px;
  font-weight: 600;
  border: none;
  transition: opacity 0.2s;
}

/* Also target any potential inner elements that might be affecting the shape */
.group.cursor-pointer.fern-button.filled.normal.primary > * {
  border-radius: 6px !important;
}

.group.cursor-pointer.fern-button.filled.normal.primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.group.cursor-pointer.fern-button.filled.normal.primary:focus-visible {
  opacity: 0.9;
  transform: translateY(-1px); outline: none;
}

/* ========================================
   Product Switcher Styling
   ======================================== */

/* Product selector button styling */
.fern-product-selector {
  transform: translateY(2px);
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* Version selector styling (for later when we add the versioning) */
.fern-version-selector {
  transform: translateY(1px);
  border-radius: 1000px;
  border: 1px solid var(--border);
}