/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 1408px;
  --logo-height: 22px;
  --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: #fcfcff;
  --accent-2: #f9f8ff;
  --accent-3: #f2f0ff;
  --accent-4: #e9e4ff;
  --accent-5: #dfd7ff;
  --accent-6: #d2c8ff;
  --accent-7: #c1b1ff;
  --accent-8: #aa92ff;
  --accent-9: #5d09c7;
  --accent-10: #4f00b2;
  --accent-11: #6d3dd4;
  --accent-12: #351b6d;

  --accent-a1: #0000ff03;
  --accent-a2: #2500ff07;
  --accent-a3: #2200ff0f;
  --accent-a4: #3000ff1b;
  --accent-a5: #3300ff28;
  --accent-a6: #2f00ff37;
  --accent-a7: #3500ff4e;
  --accent-a8: #3900ff6d;
  --accent-a9: #5700c5f6;
  --accent-a10: #4f00b2;
  --accent-a11: #3f00c7c2;
  --accent-a12: #1d005ce4;

  --accent-contrast: #fff;
  --accent-surface: #f8f6ffcc;
  --accent-indicator: #5d09c7;
  --accent-track: #5d09c7;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.2% 0.0038 291.4);
      --accent-2: oklch(98.3% 0.0122 291.4);
      --accent-3: oklch(96.3% 0.0256 291.4);
      --accent-4: oklch(93.4% 0.053 291.4);
      --accent-5: oklch(90.4% 0.0771 291.4);
      --accent-6: oklch(86.4% 0.0982 291.4);
      --accent-7: oklch(80.6% 0.1224 291.4);
      --accent-8: oklch(72.9% 0.1614 291.4);
      --accent-9: oklch(43.7% 0.2402 291.4);
      --accent-10: oklch(38.1% 0.2402 291.4);
      --accent-11: oklch(50.8% 0.2162 291.4);
      --accent-12: oklch(31.3% 0.1323 291.4);

      --accent-a1: color(display-p3 0.0235 0.0235 1 / 0.012);
      --accent-a2: color(display-p3 0.1608 0.0235 0.8627 / 0.028);
      --accent-a3: color(display-p3 0.1373 0.0039 0.9373 / 0.059);
      --accent-a4: color(display-p3 0.1529 0.0039 0.9294 / 0.106);
      --accent-a5: color(display-p3 0.1765 0.0039 0.9255 / 0.157);
      --accent-a6: color(display-p3 0.149 0.0039 0.9294 / 0.216);
      --accent-a7: color(display-p3 0.1569 0.0039 0.9255 / 0.302);
      --accent-a8: color(display-p3 0.1765 0.0039 0.9373 / 0.424);
      --accent-a9: color(display-p3 0.2824 0 0.7294 / 0.93);
      --accent-a10: color(display-p3 0.2549 0 0.6588 / 0.965);
      --accent-a11: color(display-p3 0.2039 0 0.7333 / 0.753);
      --accent-a12: color(display-p3 0.0941 0 0.3373 / 0.891);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9725 0.9686 1 / 0.8);
      --accent-indicator: oklch(43.7% 0.2402 291.4);
      --accent-track: oklch(43.7% 0.2402 291.4);
    }
  }
}


.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: #120f1f;
  --accent-2: #181429;
  --accent-3: #281b4e;
  --accent-4: #351d6b;
  --accent-5: #3f267b;
  --accent-6: #4a318a;
  --accent-7: #583da0;
  --accent-8: #6b4bc2;
  --accent-9: #5d09c7;
  --accent-10: #4f00b2;
  --accent-11: #b8a4ff;
  --accent-12: #e2dcff;

  --accent-a1: #3100f808;
  --accent-a2: #6f3afd13;
  --accent-a3: #733cfe3c;
  --accent-a4: #7533ff5c;
  --accent-a5: #7c42fd6e;
  --accent-a6: #8451ff7e;
  --accent-a7: #895cfe97;
  --accent-a8: #8c60ffbc;
  --accent-a9: #7507fec2;
  --accent-a10: #6e00ffaa;
  --accent-a11: #b8a4ff;
  --accent-a12: #e2dcff;

  --accent-contrast: #fff;
  --accent-surface: #1f173a80;
  --accent-indicator: #5d09c7;
  --accent-track: #5d09c7;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(18.1% 0.032 291.4);
      --accent-2: oklch(20.8% 0.0403 291.4);
      --accent-3: oklch(27.1% 0.0889 291.4);
      --accent-4: oklch(31.5% 0.1279 291.4);
      --accent-5: oklch(35.2% 0.1367 291.4);
      --accent-6: oklch(39.4% 0.1409 291.4);
      --accent-7: oklch(44.6% 0.1525 291.4);
      --accent-8: oklch(51.2% 0.1777 291.4);
      --accent-9: oklch(43.7% 0.2402 291.4);
      --accent-10: oklch(38.1% 0.2402 291.4);
      --accent-11: oklch(77.7% 0.1781 291.4);
      --accent-12: oklch(91.3% 0.0581 291.4);

      --accent-a1: color(display-p3 0.0706 0 0.9765 / 0.031);
      --accent-a2: color(display-p3 0.3882 0.2275 0.9922 / 0.074);
      --accent-a3: color(display-p3 0.4353 0.2588 1 / 0.225);
      --accent-a4: color(display-p3 0.4431 0.2157 1 / 0.345);
      --accent-a5: color(display-p3 0.4706 0.2784 0.9961 / 0.41);
      --accent-a6: color(display-p3 0.5059 0.3412 1 / 0.475);
      --accent-a7: color(display-p3 0.5333 0.3804 1 / 0.565);
      --accent-a8: color(display-p3 0.5373 0.3961 1 / 0.707);
      --accent-a9: color(display-p3 0.4353 0.0706 1 / 0.725);
      --accent-a10: color(display-p3 0.4078 0.0196 1 / 0.638);
      --accent-a11: color(display-p3 0.7294 0.6627 0.9961 / 0.975);
      --accent-a12: color(display-p3 0.8941 0.8745 1 / 0.988);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1098 0.0863 0.2118 / 0.5);
      --accent-indicator: oklch(43.7% 0.2402 291.4);
      --accent-track: oklch(43.7% 0.2402 291.4);
    }
  }
}


.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(93, 9, 199, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(228, 228, 231, 1);
  --sidebar-background: rgba(250, 250, 250, 1);
  --header-background: rgba(255, 255, 255, 1);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(93, 9, 199, 1);
  --background: rgba(17, 17, 24, 1);
  --border: rgba(39, 39, 42, 1);
  --sidebar-background: rgba(24, 24, 27, 1);
  --header-background: rgba(24, 24, 27, 1);
  --card-background: initial;
  --theme-color: #111118;
}

/* =============================================================================
   FastPix Docs — Square-inspired custom styles
   Brand: primary #5D09C7 (purple) · secondary #14CC80 (green)
   ============================================================================= */

:root {
  --fp-primary: #5d09c7;
  --fp-secondary: #14cc80;
}

/* Standard accessibility-friendly visually-hidden utility. Hides content
   from sighted users while keeping it in the accessibility tree (for
   screen readers) and the DOM (for search engines and Fern's markdown
   extractor). Used by the markdown-parity fallback blocks in:

     - docs/pages/docs-home/changelog.mdx (AUTO-GENERATED block listing
       all release-note entries so the .md version of the Release notes
       page contains them for AI agents)
     - the four Card-heavy overview pages — VOD, Live, AI, Video Data
       (manual blocks listing each Card's title + link so the .md
       versions of those pages contain the Card headings for AI agents)

   Implementation matches the WCAG-recommended pattern used by Tailwind,
   Bootstrap, and most accessibility libraries. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.fern-layout-footer.not-prose {
  display: none !important;
  visibility: hidden !important;
}

/* --- Global layout: stretch the outer layout to fill ultrawide displays ---
   Fern caps the overall page at 1408px (.max-w-page-width Tailwind utility)
   and centers it via mx-auto, which leaves large empty margins on external
   displays. Removing the cap lets the 3-column layout (nav | content | toc)
   fill the viewport; each inner column still has its own width. */
.max-w-page-width {
  max-width: none !important;
}

/* --- Sidebar refinements --- */
.fern-sidebar-section-title {
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Tab bar: clean horizontal tabs like Square --- */
.fern-tabs {
  border-bottom: 1px solid var(--border);
}

.fern-tab {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.625rem 0.875rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.fern-tab:hover {
  color: var(--accent-1);
}
.fern-tab:focus-visible {
  color: var(--accent-1); outline: none;
}

.fern-tab[data-state="active"] {
  border-bottom: 2px solid var(--accent-1);
  font-weight: 600;
}

/* --- Cards: clean borders, subtle hover --- */
.fern-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.fern-card:hover {
  border-color: var(--fp-primary);
  box-shadow: 0 2px 12px rgba(93, 9, 199, 0.15);
}
.fern-card:focus-visible {
  border-color: var(--fp-primary);
  box-shadow: 0 2px 12px rgba(93, 9, 199, 0.15); outline: none;
}

.dark .fern-card:hover {
  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.3);
}
.dark .fern-card:focus-visible {
  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.3); outline: none;
}

.fern-card-title {
  font-weight: 600;
  font-size: 1rem;
}

/* --- Landing page: wider content area --- */
.fern-layout-overview .fern-content {
  max-width: 960px;
}

/* --- Code blocks: cleaner look --- */
.fern-code-block {
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* --- Callout refinements --- */
.fern-callout {
  border-radius: 8px;
  border-left-width: 3px;
}

/* --- Page heading --- */
.fern-page-heading h1 {
  font-weight: 700;
  font-size: 1.875rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* --- Body text --- */
.fern-content p {
  line-height: 1.7;
  font-size: 0.9375rem;
}

/* --- Navbar CTA buttons — minimal pill style --- */
.fern-navbar-link[data-type="filled"],
.fern-navbar-link[data-type="outlined"] {
  border-radius: 9999px;
  font-weight: 500;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
}

.fern-navbar-link[data-type="filled"] {
  background-color: var(--fp-primary);
  color: #ffffff;
}

.fern-navbar-link[data-type="filled"]:hover {
  background-color: #4a07a0;
}
.fern-navbar-link[data-type="filled"]:focus-visible {
  background-color: #4a07a0; outline: none;
}

/* --- Minimal text links (Website, Status, Support, Discussions) --- */
.fern-navbar-link[data-type="minimal"] {
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.375rem 0.625rem;
  color: var(--text-muted, #52525b);
  transition: color 0.15s ease;
}

.fern-navbar-link[data-type="minimal"]:hover {
  color: var(--fp-primary);
}
.fern-navbar-link[data-type="minimal"]:focus-visible {
  color: var(--fp-primary); outline: none;
}

.dark .fern-navbar-link[data-type="minimal"] {
  color: #a1a1aa;
}

.dark .fern-navbar-link[data-type="minimal"]:hover {
  color: #ffffff;
}
.dark .fern-navbar-link[data-type="minimal"]:focus-visible {
  color: #ffffff; outline: none;
}

/* --- Shrink the header searchbar so navbar links fit --- */
.fern-header-searchbar,
.fern-search-bar {
  max-width: 320px;
}

/* --- Table styling --- */
.fern-content table {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.fern-content th {
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --- Scrollbar refinement (WebKit) --- */
.fern-sidebar::-webkit-scrollbar {
  width: 4px;
}

.fern-sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

/* --- Remove section dividers for cleaner sidebar --- */
.fern-sidebar-section + .fern-sidebar-section {
  border-top: none;
  margin-top: 0.25rem;
}

/* =============================================================================
   Recipe component — light / dark
   ============================================================================= */

.recipe-card {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 1.5rem 0;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  /* box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); */
}
.dark .recipe-card {
  background: #18181b;
  border-color: #27272a;
  /* box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5); */
}

/* --- Header --- */
.recipe-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e4e4e7;
}
.dark .recipe-header {
  border-bottom-color: #27272a;
}

.recipe-header-text {
  flex: 1;
  min-width: 0;
}

.recipe-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: #18181b;
}
.dark .recipe-title {
  color: #fafafa;
}

.recipe-description {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #71717a;
}
.dark .recipe-description {
  color: #a1a1aa;
}

.recipe-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  flex-shrink: 0;
  color: #a1a1aa;
}
.dark .recipe-close-btn {
  color: #71717a;
}
.recipe-close-btn:hover {
  color: #18181b;
}
.recipe-close-btn:focus-visible {
  color: #18181b; outline: none;
}
.dark .recipe-close-btn:hover {
  color: #e4e4e7;
}
.dark .recipe-close-btn:focus-visible {
  color: #e4e4e7; outline: none;
}

/* --- Body layout --- */
.recipe-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  min-height: 480px;
  max-height: 70vh;
}

/* --- Steps panel --- */
.recipe-steps-panel {
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-right: 1px solid #e4e4e7;
}
.dark .recipe-steps-panel {
  border-right-color: #27272a;
}

.recipe-step-card {
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dark .recipe-step-card {
  border-color: #27272a;
}
.recipe-step-card:hover {
  border-color: #d4d4d8;
}
.recipe-step-card:focus-visible {
  border-color: #d4d4d8; outline: none;
}
.dark .recipe-step-card:hover {
  border-color: #3f3f46;
}
.dark .recipe-step-card:focus-visible {
  border-color: #3f3f46; outline: none;
}

.recipe-step-card.active {
  border-color: var(--accent-1, #4F46E5);
  background: #f4f4f5;
}
.dark .recipe-step-card.active {
  border-color: var(--accent-1, #818cf8);
  background: #1e1e24;
}

.recipe-step-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #18181b;
}
.dark .recipe-step-title {
  color: #fafafa;
}

.recipe-step-body {
  margin-top: 0.75rem;
}

.recipe-step-desc {
  font-size: 0.8125rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #52525b;
}
.dark .recipe-step-desc {
  color: #a1a1aa;
}

.recipe-step-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.recipe-nav-btn {
  background: none;
  border: none;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  color: #71717a;
}
.dark .recipe-nav-btn {
  color: #a1a1aa;
}
.recipe-nav-btn:hover {
  color: #18181b;
}
.recipe-nav-btn:focus-visible {
  color: #18181b; outline: none;
}
.dark .recipe-nav-btn:hover {
  color: #fafafa;
}
.dark .recipe-nav-btn:focus-visible {
  color: #fafafa; outline: none;
}

/* --- Code panel --- */
.recipe-code-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.recipe-code-tabs {
  display: flex;
  padding: 0 1rem;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid #e4e4e7;
}
.dark .recipe-code-tabs {
  border-bottom-color: #27272a;
}

.recipe-code-tab {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  transition: color 0.15s, border-color 0.15s;
  color: #a1a1aa;
}
.dark .recipe-code-tab {
  color: #71717a;
}
.recipe-code-tab:hover {
  color: #52525b;
}
.recipe-code-tab:focus-visible {
  color: #52525b; outline: none;
}
.dark .recipe-code-tab:hover {
  color: #a1a1aa;
}
.dark .recipe-code-tab:focus-visible {
  color: #a1a1aa; outline: none;
}
.recipe-code-tab.active {
  font-weight: 600;
  border-bottom-color: var(--accent-1, #4F46E5);
  color: #18181b;
}
.dark .recipe-code-tab.active {
  border-bottom-color: var(--accent-1, #818cf8);
  color: #fafafa;
}

.recipe-copy-btn {
  margin-left: auto;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid #e4e4e7;
  color: #a1a1aa;
}
.dark .recipe-copy-btn {
  border-color: #27272a;
  color: #71717a;
}
.recipe-copy-btn:hover {
  color: #18181b;
  border-color: #d4d4d8;
}
.recipe-copy-btn:focus-visible {
  color: #18181b;
  border-color: #d4d4d8; outline: none;
}
.dark .recipe-copy-btn:hover {
  color: #e4e4e7;
  border-color: #3f3f46;
}
.dark .recipe-copy-btn:focus-visible {
  color: #e4e4e7;
  border-color: #3f3f46; outline: none;
}

.recipe-code-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
}

.recipe-code-block {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  padding: 1rem 0;
  min-width: max-content;
  color: #18181b;
}
.dark .recipe-code-block {
  color: #e4e4e7;
}

.recipe-code-line {
  display: flex;
  padding: 0 1rem 0 0;
  transition: background 0.15s;
}
.recipe-code-line.highlighted {
  background: rgba(79, 70, 229, 0.08);
}
.dark .recipe-code-line.highlighted {
  background: rgba(129, 140, 248, 0.1);
}

.recipe-line-number {
  width: 3rem;
  text-align: right;
  padding-right: 1rem;
  flex-shrink: 0;
  user-select: none;
  color: #000000;
}
.dark .recipe-line-number {
  color: #ffffff;
}

.recipe-line-text {
  white-space: pre;
  flex: 1;
}

/* --- Syntax token colors (light) --- */
.recipe-code-block .tok-keyword { color: #7c3aed; }
.recipe-code-block .tok-string  { color: #16a34a; }
.recipe-code-block .tok-number  { color: #d97706; }
.recipe-code-block .tok-url     { color: #2563eb; }
.recipe-code-block .tok-key     { color: #3b82f6; }
.recipe-code-block .tok-flag    { color: #db2777; }
.recipe-code-block .tok-bool    { color: #d97706; }
.recipe-code-block .tok-null    { color: #a1a1aa; }
.recipe-code-block .tok-brace   { color: #71717a; }

/* --- Syntax token colors (dark) --- */
.dark .recipe-code-block .tok-keyword { color: #c084fc; }
.dark .recipe-code-block .tok-string  { color: #86efac; }
.dark .recipe-code-block .tok-number  { color: #fbbf24; }
.dark .recipe-code-block .tok-url     { color: #60a5fa; }
.dark .recipe-code-block .tok-key     { color: #93c5fd; }
.dark .recipe-code-block .tok-flag    { color: #f472b6; }
.dark .recipe-code-block .tok-bool    { color: #fbbf24; }
.dark .recipe-code-block .tok-null    { color: #71717a; }
.dark .recipe-code-block .tok-brace   { color: #a1a1aa; }

/* --- Scrollbar for recipe panels --- */
.recipe-steps-panel::-webkit-scrollbar,
.recipe-code-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.recipe-steps-panel::-webkit-scrollbar-track,
.recipe-code-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.recipe-steps-panel::-webkit-scrollbar-thumb,
.recipe-code-wrapper::-webkit-scrollbar-thumb {
  background: #e4e4e7;
  border-radius: 3px;
}
.dark .recipe-steps-panel::-webkit-scrollbar-thumb,
.dark .recipe-code-wrapper::-webkit-scrollbar-thumb {
  background: #27272a;
}

/* =============================================================================
   Changelog component — Mux-inspired release notes
   ============================================================================= */

/* Break the changelog page out of Fern's default narrow content width so the
   entries column has room to breathe.

   Fern wraps page content in <article class="w-content-width mx-auto …">
   which caps the article at 640px and centers it. That's right for prose-
   heavy docs but leaves the changelog's filters + entries grid squashed
   into a narrow column with huge gutters. On this page, we stretch the
   article to fill its available width. */
article.w-content-width:has(.fp-changelog),
article.w-content-width:has(.fp-landing-page) {
  width: 100% !important;
}

/* Hide Fern's auto-rendered page <h1> on the landing so the only visible
   "FastPix Docs" reference is the Hero's purple eyebrow. Targets every
   plausible Fern page-header selector. */
article.w-content-width:has(.fp-landing-page) > header,
article.w-content-width:has(.fp-landing-page) > .fern-page-heading,
article.w-content-width:has(.fp-landing-page) > .fern-header,
article.w-content-width:has(.fp-landing-page) > h1:first-of-type,
.fern-prose:has(.fp-landing-page) > header:first-child,
.fern-prose:has(.fp-landing-page) > h1:first-of-type {
  display: none !important;
}

.fp-changelog {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  margin: 1rem 0 4rem;
  align-items: start;
}

@media (max-width: 900px) {

  .fp-changelog {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

}

/* ---------------- Left rail (filters) ---------------- */

.fp-changelog-filters {
  position: sticky;
  top: 5rem;
  display: flex;
  flex-direction: column;
  /* `gap` removed — vertical spacing is now controlled by the labels'
     `margin-top` so the sticky `top` offsets line up cleanly. */
  padding-right: 1rem;
  border-right: 1px solid #e4e4e7;
  font-size: 0.8125rem;
  /* Rail grows to its natural height; if the viewport is shorter than the
     rail, the *page* scrolls (matching the Mux changelog UX). No internal
     scrollbar is created here. */
}
.dark .fp-changelog-filters {
  border-right-color: #27272a;
}

@media (max-width: 900px) {

  .fp-changelog-filters {
    position: static;
    border-right: none;
    border-bottom: 1px solid #e4e4e7;
    padding: 0 0 1.25rem;
  }
  .dark .fp-changelog-filters {
    border-bottom-color: #27272a;
  }

}

/* Legacy wrapper kept as a no-op so any stale markup still renders the rail
   contents in a column flow; the labels and lists are now direct children of
   the rail and use `position: sticky` with stacked top offsets (see below). */
.fp-changelog-filter-group {
  display: contents;
}

.fp-changelog-filter-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #71717a;
  /* Position is sticky; the `top` offset comes from inline style in JSX so
     each label (TYPE, PRODUCT, …) stacks at its own offset and remains
     visible regardless of how far the rail is scrolled. */
  position: sticky;
  background: #ffffff;
  padding: 0.25rem 0;
  margin-top: 0.5rem;
}
.fp-changelog-filter-label:first-child {
  margin-top: 0;
}
.dark .fp-changelog-filter-label {
  color: #a1a1aa;
  background: #09090b;
}

/* Hairline divider between the TYPE list and the PRODUCT label, matching
   the Mux changelog's visual separation between filter sections. */
.fp-changelog-filter-list + .fp-changelog-filter-label {
  border-top: 1px solid #e4e4e7;
  padding-top: 1rem;
  margin-top: 1rem;
}
.dark .fp-changelog-filter-list + .fp-changelog-filter-label {
  border-top-color: #27272a;
}

.fp-changelog-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fp-changelog-filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  cursor: pointer;
  color: #18181b;
}
.dark .fp-changelog-filter-item {
  color: #e4e4e7;
}

.fp-changelog-filter-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--fp-primary, #5d09c7);
  cursor: pointer;
}

.fp-changelog-filter-item:hover {
  color: var(--fp-primary, #5d09c7);
}
.fp-changelog-filter-item:focus-visible {
  color: var(--fp-primary, #5d09c7); outline: none;
}
.dark .fp-changelog-filter-item:hover {
  color: #b785ff;
}
.dark .fp-changelog-filter-item:focus-visible {
  color: #b785ff; outline: none;
}

.fp-changelog-rss {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #18181b;
  text-decoration: none;
  padding-top: 0.75rem;
  border-top: 1px solid #e4e4e7;
}
.dark .fp-changelog-rss {
  color: #e4e4e7;
  border-top-color: #27272a;
}

.fp-changelog-rss:hover {
  color: var(--fp-primary, #5d09c7);
}
.fp-changelog-rss:focus-visible {
  color: var(--fp-primary, #5d09c7); outline: none;
}
.dark .fp-changelog-rss:hover {
  color: #b785ff;
}
.dark .fp-changelog-rss:focus-visible {
  color: #b785ff; outline: none;
}

/* ---------------- Right rail (timeline + entries) ---------------- */

.fp-changelog-main {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1.5rem;
  align-items: start;
  min-width: 0;
}

@media (max-width: 720px) {

  .fp-changelog-main {
    grid-template-columns: 1fr;
  }

}

/* When all filters exclude every entry, the timeline rail isn't rendered.
   Collapse the grid to a single column so the empty state spans full width
   instead of being squeezed into the 64px timeline gutter. */
.fp-changelog-main:not(:has(.fp-changelog-timeline)) {
  grid-template-columns: 1fr;
}

.fp-changelog-timeline {
  position: sticky;
  top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #71717a;
  /* Timeline grows to its natural height. If the rail exceeds the viewport,
     the page scrolls (Mux-style); we don't create an internal scrollbar. */
}
.dark .fp-changelog-timeline {
  color: #a1a1aa;
}

@media (max-width: 720px) {

  .fp-changelog-timeline {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

}

/* Legacy wrapper kept as a no-op so stale markup still renders correctly;
   year buttons are now direct children of `.fp-changelog-timeline` with each
   button stacked-sticky via an inline `top` offset (see `.fp-changelog-timeline-year`). */
.fp-changelog-timeline-year-block {
  display: contents;
}

.fp-changelog-timeline-year {
  background: #ffffff;
  border: 0;
  padding: 0.25rem 0;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  /* Position is sticky; the `top` offset comes from inline style in JSX so
     every year button stacks at its own offset and remains visible/clickable
     from any scroll position. Each year sits directly above its own months. */
  position: sticky;
  align-self: flex-start;
  width: 100%;
}
.dark .fp-changelog-timeline-year {
  background: #09090b;
}

.fp-changelog-timeline-year.active {
  color: var(--fp-primary, #5d09c7);
}
.dark .fp-changelog-timeline-year.active {
  color: #ffffff;
}

.fp-changelog-timeline-year:hover {
  color: var(--fp-primary, #5d09c7);
}
.fp-changelog-timeline-year:focus-visible {
  color: var(--fp-primary, #5d09c7); outline: none;
}
.dark .fp-changelog-timeline-year:hover {
  color: #ffffff;
}
.dark .fp-changelog-timeline-year:focus-visible {
  color: #ffffff; outline: none;
}

.fp-changelog-timeline-months {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.fp-changelog-timeline-month {
  background: none;
  border: 0;
  padding: 0.125rem 0;
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
}

.fp-changelog-timeline-month:hover {
  color: var(--fp-primary, #5d09c7);
}
.fp-changelog-timeline-month:focus-visible {
  color: var(--fp-primary, #5d09c7); outline: none;
}
.dark .fp-changelog-timeline-month:hover {
  color: #ffffff;
}
.dark .fp-changelog-timeline-month:focus-visible {
  color: #ffffff; outline: none;
}

/* ---------------- Entries column ---------------- */

.fp-changelog-entries {
  min-width: 0;
}

.fp-changelog-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  border: 1px dashed #e4e4e7;
  border-radius: 12px;
  color: #71717a;
}
.dark .fp-changelog-empty {
  border-color: #27272a;
  color: #a1a1aa;
}

.fp-changelog-empty h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #18181b;
}
.dark .fp-changelog-empty h3 {
  color: #fafafa;
}

.fp-changelog-empty p {
  margin: 0;
  font-size: 0.875rem;
}

.fp-changelog-month-section {
  display: flex;
  flex-direction: column;
}

.fp-changelog-month-header {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #71717a;
  padding: 1.5rem 0 1rem;
  border-bottom: 1px solid #e4e4e7;
  margin-bottom: 1.5rem;
}
.dark .fp-changelog-month-header {
  color: #a1a1aa;
  border-bottom-color: #27272a;
}

.fp-changelog-entry {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.5rem;
  padding: 0.5rem 0 2rem;
  border-bottom: 1px solid #e4e4e7;
  margin-bottom: 1.5rem;
}
.dark .fp-changelog-entry {
  border-bottom-color: #27272a;
}

.fp-changelog-entry:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

@media (max-width: 720px) {

  .fp-changelog-entry {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

}

.fp-changelog-entry-meta {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #71717a;
  padding-top: 0.125rem;
}
.dark .fp-changelog-entry-meta {
  color: #a1a1aa;
}

.fp-changelog-entry-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.fp-changelog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.fp-changelog-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
}

/* Type tag colors — light + dark */
.fp-changelog-tag-new         { background: #fef3c7; color: #92400e; }
.fp-changelog-tag-improvement { background: #dbeafe; color: #1d4ed8; }
.fp-changelog-tag-fix         { background: #dcfce7; color: #166534; }
.fp-changelog-tag-update      { background: #e0e7ff; color: #4338ca; }
.fp-changelog-tag-beta        { background: #f3e8ff; color: #6b21a8; }
.fp-changelog-tag-breaking    { background: #fee2e2; color: #b91c1c; }
.fp-changelog-tag-deprecated  { background: #fef2f2; color: #991b1b; }

.dark .fp-changelog-tag-new         { background: rgba(251, 191, 36, 0.15); color: #fde68a; }
.dark .fp-changelog-tag-improvement { background: rgba(96, 165, 250, 0.15); color: #bfdbfe; }
.dark .fp-changelog-tag-fix         { background: rgba(74, 222, 128, 0.15); color: #bbf7d0; }
.dark .fp-changelog-tag-update      { background: rgba(129, 140, 248, 0.18); color: #c7d2fe; }
.dark .fp-changelog-tag-beta        { background: rgba(192, 132, 252, 0.18); color: #e9d5ff; }
.dark .fp-changelog-tag-breaking    { background: rgba(248, 113, 113, 0.18); color: #fecaca; }
.dark .fp-changelog-tag-deprecated  { background: rgba(248, 113, 113, 0.10); color: #fca5a5; }

/* Product tag — neutral pill */
.fp-changelog-tag-product {
  background: #f4f4f5;
  color: #3f3f46;
  border: 1px solid #e4e4e7;
}
.dark .fp-changelog-tag-product {
  background: rgba(255, 255, 255, 0.04);
  color: #d4d4d8;
  border-color: #3f3f46;
}

.fp-changelog-entry-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: #18181b;
}
.dark .fp-changelog-entry-title {
  color: #fafafa;
}

.fp-changelog-entry-title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.fp-changelog-entry-title a:hover {
  color: var(--fp-primary, #5d09c7);
}
.fp-changelog-entry-title a:focus-visible {
  color: var(--fp-primary, #5d09c7); outline: none;
}
.dark .fp-changelog-entry-title a:hover {
  color: #b785ff;
}
.dark .fp-changelog-entry-title a:focus-visible {
  color: #b785ff; outline: none;
}

.fp-changelog-entry-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #3f3f46;
  max-width: 75ch;
}
.dark .fp-changelog-entry-desc {
  color: #a1a1aa;
}

/* =============================================================================
   ChangelogEntry — detail page layout
   ============================================================================= */

.fp-changelog-detail {
  max-width: 720px;
  margin: 0 0 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.fp-changelog-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #71717a;
  text-decoration: none;
  width: fit-content;
}
.dark .fp-changelog-detail-back {
  color: #a1a1aa;
}

.fp-changelog-detail-back:hover {
  color: var(--fp-primary, #5d09c7);
}
.fp-changelog-detail-back:focus-visible {
  color: var(--fp-primary, #5d09c7); outline: none;
}
.dark .fp-changelog-detail-back:hover {
  color: #b785ff;
}
.dark .fp-changelog-detail-back:focus-visible {
  color: #b785ff; outline: none;
}

.fp-changelog-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fp-changelog-detail-date {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #71717a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.dark .fp-changelog-detail-date {
  color: #a1a1aa;
}

.fp-changelog-detail-body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #18181b;
}
.dark .fp-changelog-detail-body {
  color: #e4e4e7;
}

/* Tighten the default Fern prose spacing inside the detail body so it sits
   well alongside the meta header. */
.fp-changelog-detail-body > :first-child {
  margin-top: 0;
}
.fp-changelog-detail-body > :last-child {
  margin-bottom: 0;
}

.fp-changelog-detail-body a {
  color: var(--fp-primary, #5d09c7);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.dark .fp-changelog-detail-body a {
  color: #b785ff;
}

.fp-changelog-detail-related {
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e4e4e7;
}
.dark .fp-changelog-detail-related {
  border-top-color: #27272a;
}

.fp-changelog-detail-related-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #71717a;
  margin-bottom: 0.75rem;
}
.dark .fp-changelog-detail-related-label {
  color: #a1a1aa;
}

.fp-changelog-detail-related ul {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.fp-changelog-detail-related li {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.fp-changelog-detail-related a {
  color: var(--fp-primary, #5d09c7);
  text-decoration: none;
}

.fp-changelog-detail-related a:hover {
  text-decoration: underline;
}
.fp-changelog-detail-related a:focus-visible {
  text-decoration: underline; outline: none;
}
.dark .fp-changelog-detail-related a {
  color: #b785ff;
}

/* =============================================================================
   Landing page — Hero, CodePreview, ProductCard, WhatsNew
   ============================================================================= */

/* --- Section header (reused by ProductGrid, WhatsNew, SectionHeader) --- */

.fp-section-header {
  margin: 0 0 1.75rem;
  max-width: 720px;
}

.fp-section-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fp-primary, #5d09c7);
  margin-bottom: 0.5rem;
}
.dark .fp-section-eyebrow {
  color: #b785ff;
}

.fp-section-title {
  margin: 0 0 0.5rem;
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #18181b;
}
.dark .fp-section-title {
  color: #fafafa;
}

.fp-section-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #52525b;
}
.dark .fp-section-desc {
  color: #a1a1aa;
}

/* --- Hero --- */

.fp-hero {
  padding: 1.5rem 0 3rem;
  border-bottom: 1px solid #e4e4e7;
  margin-bottom: 3rem;
}
.dark .fp-hero {
  border-bottom-color: #27272a;
}

.fp-hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fp-primary, #5d09c7);
  margin-bottom: 1rem;
}
.dark .fp-hero-eyebrow {
  color: #b785ff;
}

.fp-hero-title {
  margin: 0 0 1rem;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #18181b;
  max-width: 18ch;
}
.dark .fp-hero-title {
  color: #fafafa;
}

@media (max-width: 720px) {

  .fp-hero-title {
    font-size: 2rem;
  }

}

.fp-hero-tagline {
  margin: 0 0 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #52525b;
  max-width: 55ch;
}
.dark .fp-hero-tagline {
  color: #a1a1aa;
}

.fp-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.fp-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fp-hero-cta-primary {
  background: var(--fp-primary, #5d09c7);
  color: #ffffff;
}
.fp-hero-cta-primary:hover {
  background: #4a07a0;
}
.fp-hero-cta-primary:focus-visible {
  background: #4a07a0; outline: none;
}

.fp-hero-cta-secondary {
  background: transparent;
  color: #18181b;
  border: 1px solid #d4d4d8;
}
.fp-hero-cta-secondary:hover {
  border-color: var(--fp-primary, #5d09c7);
  color: var(--fp-primary, #5d09c7);
}
.fp-hero-cta-secondary:focus-visible {
  border-color: var(--fp-primary, #5d09c7);
  color: var(--fp-primary, #5d09c7); outline: none;
}
.dark .fp-hero-cta-secondary {
  color: #fafafa;
  border-color: #3f3f46;
}
.dark .fp-hero-cta-secondary:hover {
  color: #ffffff;
  border-color: #b785ff;
}
.dark .fp-hero-cta-secondary:focus-visible {
  color: #ffffff;
  border-color: #b785ff; outline: none;
}

/* --- CodePreview --- */

.fp-codepreview {
  margin: 0 0 3.5rem;
}

.fp-codepreview-header {
  margin: 0 0 1rem;
}

.fp-codepreview-title {
  margin: 0 0 0.375rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #18181b;
}
.dark .fp-codepreview-title {
  color: #fafafa;
}

.fp-codepreview-desc {
  margin: 0;
  font-size: 0.9375rem;
  color: #52525b;
}
.dark .fp-codepreview-desc {
  color: #a1a1aa;
}

.fp-codepreview-frame {
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  overflow: hidden;
  background: #fafafa;
}
.dark .fp-codepreview-frame {
  border-color: #27272a;
  background: #0c0c10;
}

.fp-codepreview-tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e4e4e7;
  background: #ffffff;
  padding: 0 0.25rem;
}
.dark .fp-codepreview-tabs {
  background: #18181b;
  border-bottom-color: #27272a;
}

.fp-codepreview-tab {
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.625rem 0.875rem;
  color: #71717a;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.dark .fp-codepreview-tab {
  color: #a1a1aa;
}

.fp-codepreview-tab.active {
  color: #18181b;
  border-bottom-color: var(--fp-primary, #5d09c7);
}
.dark .fp-codepreview-tab.active {
  color: #fafafa;
}

.fp-codepreview-tab:hover {
  color: #18181b;
}
.fp-codepreview-tab:focus-visible {
  color: #18181b; outline: none;
}
.dark .fp-codepreview-tab:hover {
  color: #fafafa;
}
.dark .fp-codepreview-tab:focus-visible {
  color: #fafafa; outline: none;
}

.fp-codepreview-copy {
  background: transparent;
  border: 0;
  margin-left: auto;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: #71717a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.dark .fp-codepreview-copy {
  color: #a1a1aa;
}

.fp-codepreview-copy:hover {
  color: var(--fp-primary, #5d09c7);
}
.fp-codepreview-copy:focus-visible {
  color: var(--fp-primary, #5d09c7); outline: none;
}
.dark .fp-codepreview-copy:hover {
  color: #b785ff;
}
.dark .fp-codepreview-copy:focus-visible {
  color: #b785ff; outline: none;
}

.fp-codepreview-pre {
  margin: 0;
  padding: 1.25rem 1.25rem;
  overflow-x: auto;
}

.fp-codepreview-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #18181b;
  white-space: pre;
}
.dark .fp-codepreview-code {
  color: #e4e4e7;
}

/* Syntax token colors — reusing the Recipe palette */
.fp-codepreview-code .tok-keyword { color: #7c3aed; }
.fp-codepreview-code .tok-string  { color: #16a34a; }
.fp-codepreview-code .tok-number  { color: #d97706; }
.fp-codepreview-code .tok-url     { color: #2563eb; }
.fp-codepreview-code .tok-comment { color: #a1a1aa; font-style: italic; }

.dark .fp-codepreview-code .tok-keyword { color: #c084fc; }
.dark .fp-codepreview-code .tok-string  { color: #86efac; }
.dark .fp-codepreview-code .tok-number  { color: #fbbf24; }
.dark .fp-codepreview-code .tok-url     { color: #60a5fa; }
.dark .fp-codepreview-code .tok-comment { color: #71717a; font-style: italic; }

/* --- ProductGrid / ProductCard --- */

.fp-product-grid-section {
  margin: 0 0 4rem;
}

.fp-product-grid {
  display: grid;
  gap: 1rem;
}

.fp-product-grid-cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.fp-product-grid-cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.fp-product-card {
  --fp-card-accent: var(--fp-primary, #5d09c7);
  display: flex;
  flex-direction: column;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  padding: 1.25rem;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.dark .fp-product-card {
  background: #18181b;
  border-color: #27272a;
}

.fp-product-card:hover {
  border-color: var(--fp-card-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.fp-product-card:focus-visible {
  border-color: var(--fp-card-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); outline: none;
}

.fp-product-card-main {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  color: inherit;
  text-decoration: none;
  margin-bottom: 0.875rem;
}

.fp-product-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fp-card-accent) 12%, transparent);
  color: var(--fp-card-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.fp-product-card-text {
  min-width: 0;
}

.fp-product-card-title {
  margin: 0 0 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #18181b;
}
.dark .fp-product-card-title {
  color: #fafafa;
}

.fp-product-card-desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #52525b;
}
.dark .fp-product-card-desc {
  color: #a1a1aa;
}

.fp-product-card-links {
  margin: 0;
  padding: 0.75rem 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-top: 1px solid #f4f4f5;
}
.dark .fp-product-card-links {
  border-top-color: #232328;
}

.fp-product-card-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fp-primary, #5d09c7);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  padding: 0.25rem 0;
}
.dark .fp-product-card-links a {
  color: #b785ff;
}

.fp-product-card-links a:hover {
  text-decoration-thickness: 2px;
}
.fp-product-card-links a:focus-visible {
  text-decoration-thickness: 2px; outline: none;
}

/* --- WhatsNew --- */

.fp-whatsnew {
  margin: 0 0 4rem;
  padding: 2rem 1.25rem;
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid #e4e4e7;
}
.dark .fp-whatsnew {
  background: rgba(255, 255, 255, 0.02);
  border-color: #27272a;
}

.fp-whatsnew-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
}

.fp-whatsnew-viewall {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fp-primary, #5d09c7);
  text-decoration: none;
  white-space: nowrap;
}
.dark .fp-whatsnew-viewall {
  color: #b785ff;
}

.fp-whatsnew-viewall:hover {
  text-decoration: underline;
}
.fp-whatsnew-viewall:focus-visible {
  text-decoration: underline; outline: none;
}

.fp-whatsnew-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.fp-whatsnew-item + .fp-whatsnew-item {
  border-top: 1px solid #e4e4e7;
}
.dark .fp-whatsnew-item + .fp-whatsnew-item {
  border-top-color: #27272a;
}

.fp-whatsnew-link {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  padding: 0.875rem 0;
  color: inherit;
  text-decoration: none;
  align-items: baseline;
}

@media (max-width: 600px) {

  .fp-whatsnew-link {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

}

.fp-whatsnew-date {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #71717a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.dark .fp-whatsnew-date {
  color: #a1a1aa;
}

.fp-whatsnew-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #18181b;
  line-height: 1.4;
}
.dark .fp-whatsnew-title {
  color: #fafafa;
}

.fp-whatsnew-link:hover .fp-whatsnew-title {
  color: var(--fp-primary, #5d09c7);
}
.fp-whatsnew-link:focus-within .fp-whatsnew-title {
  color: var(--fp-primary, #5d09c7); outline: none;
}
.dark .fp-whatsnew-link:hover .fp-whatsnew-title {
  color: #b785ff;
}
.dark .fp-whatsnew-link:focus-within .fp-whatsnew-title {
  color: #b785ff; outline: none;
}

/* --- SDKs grid (used directly in MDX, no component) --- */

.fp-sdks {
  margin: 0 0 4rem;
}

/* Div-based grid — no <ul>/<li> so no risk of stray bullet markers
   inheriting from Fern's prose styles. */
.fp-sdks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fp-sdk-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #18181b;
  text-decoration: none;
  background: #ffffff;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.dark .fp-sdk-pill {
  border-color: #27272a;
  background: #18181b;
  color: #fafafa;
}

.fp-sdk-pill:hover {
  border-color: var(--fp-primary, #5d09c7);
}
.fp-sdk-pill:focus-visible {
  border-color: var(--fp-primary, #5d09c7); outline: none;
}
.dark .fp-sdk-pill:hover {
  border-color: #b785ff;
}
.dark .fp-sdk-pill:focus-visible {
  border-color: #b785ff; outline: none;
}

/* Per-language brand-logo icon — rendered as inline SVG (via SdkIcon from
   Landing.tsx). The icon's color comes from the wrapper's `color` property
   so each language displays in its own brand color. */
.fp-sdk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.fp-sdk-icon[data-lang="node"]    { color: #339933; }
.fp-sdk-icon[data-lang="python"]  { color: #3776AB; }
.fp-sdk-icon[data-lang="go"]      { color: #00ADD8; }
.fp-sdk-icon[data-lang="java"]    { color: #007396; }
.fp-sdk-icon[data-lang="ruby"]    { color: #CC342D; }
.fp-sdk-icon[data-lang="php"]     { color: #777BB4; }
.fp-sdk-icon[data-lang="csharp"]  { color: #512BD4; }

/* --- Help / footer strip (used directly in MDX, no component) --- */

.fp-help {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  padding: 1.75rem 0 0;
  margin: 0 0 4rem;
  border-top: 1px solid #e4e4e7;
}
.dark .fp-help {
  border-top-color: #27272a;
}

.fp-help-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fp-help-item-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #71717a;
}
.dark .fp-help-item-label {
  color: #a1a1aa;
}

.fp-help-item a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fp-primary, #5d09c7);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.dark .fp-help-item a {
  color: #b785ff;
}

.fp-help-item a:hover {
  text-decoration-thickness: 2px;
}
.fp-help-item a:focus-visible {
  text-decoration-thickness: 2px; outline: none;
}

/* =============================================================================
   Landing — Convex-style refresh
   ============================================================================= */

/* --- Compact hero ------------------------------------------------------ */

.fp-hero-compact {
  padding: 0.5rem 0 2rem;
  border-bottom: 1px solid #e4e4e7;
  margin-bottom: 3rem;
}
.dark .fp-hero-compact {
  border-bottom-color: #27272a;
}

.fp-hero-compact .fp-hero-eyebrow {
  margin-bottom: 0.5rem;
}

.fp-hero-compact .fp-hero-title {
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin-bottom: 0.625rem;
}

.fp-hero-compact .fp-hero-tagline {
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-bottom: 1rem;
  max-width: 60ch;
}

/* Inline-link style CTAs — no chunky pills */
.fp-hero-compact .fp-hero-ctas {
  gap: 1.25rem;
}

.fp-hero-compact .fp-hero-cta {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fp-primary, #5d09c7);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.dark .fp-hero-compact .fp-hero-cta {
  color: #b785ff;
}

.fp-hero-compact .fp-hero-cta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fp-hero-compact .fp-hero-cta:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px; outline: none;
}

.fp-hero-compact .fp-hero-cta-secondary {
  color: #52525b;
}
.dark .fp-hero-compact .fp-hero-cta-secondary {
  color: #a1a1aa;
}
.fp-hero-compact .fp-hero-cta-secondary:hover {
  color: #18181b;
}
.fp-hero-compact .fp-hero-cta-secondary:focus-visible {
  color: #18181b; outline: none;
}
.dark .fp-hero-compact .fp-hero-cta-secondary:hover {
  color: #fafafa;
}
.dark .fp-hero-compact .fp-hero-cta-secondary:focus-visible {
  color: #fafafa; outline: none;
}

/* --- Quickstart grid --------------------------------------------------- */

.fp-quickstart-section {
  margin: 0 0 4rem;
}

.fp-quickstart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}

.fp-quickstart-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.dark .fp-quickstart-card {
  background: #18181b;
  border-color: #27272a;
}

.fp-quickstart-card:hover {
  border-color: var(--fp-primary, #5d09c7);
}
.fp-quickstart-card:focus-visible {
  border-color: var(--fp-primary, #5d09c7); outline: none;
}
.dark .fp-quickstart-card:hover {
  border-color: #b785ff;
}
.dark .fp-quickstart-card:focus-visible {
  border-color: #b785ff; outline: none;
}

.fp-quickstart-icon {
  font-size: 1rem;
  margin-bottom: 0.125rem;
}

.fp-quickstart-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #18181b;
  line-height: 1.2;
}
.dark .fp-quickstart-label {
  color: #fafafa;
}

.fp-quickstart-sublabel {
  font-size: 0.75rem;
  color: #71717a;
  letter-spacing: 0.02em;
}
.dark .fp-quickstart-sublabel {
  color: #a1a1aa;
}

.fp-quickstart-card:hover .fp-quickstart-label {
  color: var(--fp-primary, #5d09c7);
}
.fp-quickstart-card:focus-within .fp-quickstart-label {
  color: var(--fp-primary, #5d09c7); outline: none;
}
.dark .fp-quickstart-card:hover .fp-quickstart-label {
  color: #b785ff;
}
.dark .fp-quickstart-card:focus-within .fp-quickstart-label {
  color: #b785ff; outline: none;
}

/* --- Concept blocks (Convex-style sections) --------------------------- */

.fp-concept-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid #e4e4e7;
}
.dark .fp-concept-block {
  border-bottom-color: #27272a;
}

.fp-concept-block:last-child {
  border-bottom: 0;
}

@media (max-width: 720px) {

  .fp-concept-block {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

}

.fp-concept-block-text {
  min-width: 0;
}

.fp-concept-block-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #18181b;
}
.dark .fp-concept-block-title {
  color: #fafafa;
}

.fp-concept-block-title a {
  color: inherit;
  text-decoration: none;
}

.fp-concept-block-title a:hover {
  color: var(--fp-primary, #5d09c7);
}
.fp-concept-block-title a:focus-visible {
  color: var(--fp-primary, #5d09c7); outline: none;
}
.dark .fp-concept-block-title a:hover {
  color: #b785ff;
}
.dark .fp-concept-block-title a:focus-visible {
  color: #b785ff; outline: none;
}

.fp-concept-block-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #52525b;
  max-width: 50ch;
}
.dark .fp-concept-block-desc {
  color: #a1a1aa;
}

/* Sub-links — underlined, clearly clickable */
.fp-concept-block-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-self: start;
}

.fp-concept-block-links li {
  font-size: 0.9375rem;
  line-height: 1.4;
}

.fp-concept-block-links a {
  color: var(--fp-primary, #5d09c7);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
}
.dark .fp-concept-block-links a {
  color: #b785ff;
}

.fp-concept-block-links a:hover {
  text-decoration-thickness: 2px;
  color: #4a07a0;
}
.fp-concept-block-links a:focus-visible {
  text-decoration-thickness: 2px;
  color: #4a07a0; outline: none;
}
.dark .fp-concept-block-links a:hover {
  color: #d4b3ff;
}
.dark .fp-concept-block-links a:focus-visible {
  color: #d4b3ff; outline: none;
}

/* Wrapper section heading + concept blocks */
.fp-concept-section {
  margin: 0 0 4rem;
}

/* --- Page intro (Convex-style) ---------------------------------------- */

.fp-page-intro {
  margin: 0.5rem 0 2.5rem;
}

.fp-page-intro h1 {
  margin: 0 0 1.25rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #18181b;
}
.dark .fp-page-intro h1 {
  color: #fafafa;
}

.fp-page-intro p {
  margin: 0 0 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #3f3f46;
  max-width: 75ch;
}
.dark .fp-page-intro p {
  color: #d4d4d8;
}

/* --- Featured-cards row (top of page, 2 columns) ---------------------- */

.fp-featured-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 0 0 3.5rem;
}

.fp-featured-card {
  display: block;
  padding: 1.25rem 1.25rem;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease;
}
.dark .fp-featured-card {
  background: #18181b;
  border-color: #27272a;
}

.fp-featured-card:hover {
  border-color: var(--fp-primary, #5d09c7);
}
.fp-featured-card:focus-visible {
  border-color: var(--fp-primary, #5d09c7); outline: none;
}
.dark .fp-featured-card:hover {
  border-color: #b785ff;
}
.dark .fp-featured-card:focus-visible {
  border-color: #b785ff; outline: none;
}

.fp-featured-card-title {
  margin: 0 0 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  color: #18181b;
}
.dark .fp-featured-card-title {
  color: #fafafa;
}

.fp-featured-card-desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #52525b;
}
.dark .fp-featured-card-desc {
  color: #a1a1aa;
}

/* --- Sub-group label inside a section (Convex pattern) ---------------- */

.fp-subgroup-label {
  margin: 0 0 0.875rem;
  font-size: 0.9375rem;
  color: #3f3f46;
}
.dark .fp-subgroup-label {
  color: #d4d4d8;
}

.fp-subgroup + .fp-subgroup {
  margin-top: 2rem;
}

/* Section-level h2 used directly in MDX */
.fp-section-h2 {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #18181b;
}
.dark .fp-section-h2 {
  color: #fafafa;
}

/* --- Slim help line --------------------------------------------------- */

.fp-help-slim {
  padding: 1.5rem 0 0;
  margin: 0 0 4rem;
  border-top: 1px solid #e4e4e7;
  font-size: 0.875rem;
  color: #71717a;
}
.dark .fp-help-slim {
  border-top-color: #27272a;
  color: #a1a1aa;
}

.fp-help-slim a {
  color: var(--fp-primary, #5d09c7);
  text-decoration: none;
  font-weight: 500;
  margin: 0 0.125rem;
}
.dark .fp-help-slim a {
  color: #b785ff;
}

.fp-help-slim a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fp-help-slim a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px; outline: none;
}

/* --- FAQ accordion ------------------------------------------------------ */

.fp-faq {
  margin: 2rem 0;
}

.fp-faq-title {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #18181b;
}
.dark .fp-faq-title {
  color: #fafafa;
}

.fp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fp-faq-item {
  border: 1px solid #e4e4e7;
  border-radius: 0.5rem;
  padding: 0;
  background: #fff;
}
.dark .fp-faq-item {
  border-color: #27272a;
  background: #18181b;
}

.fp-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #18181b;
  cursor: pointer;
  list-style: none;
}
.fp-faq-question::-webkit-details-marker {
  display: none;
}
.dark .fp-faq-question {
  color: #fafafa;
}

.fp-faq-chevron {
  flex: none;
  color: #71717a;
  transition: transform 0.15s ease;
}
.dark .fp-faq-chevron {
  color: #a1a1aa;
}

.fp-faq-item[open] .fp-faq-chevron {
  transform: rotate(180deg);
}

.fp-faq-answer {
  padding: 0 1.125rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #3f3f46;
}
.dark .fp-faq-answer {
  color: #d4d4d8;
}

.fp-faq-answer p {
  margin: 0 0 0.75rem;
}
.fp-faq-answer p:last-child {
  margin-bottom: 0;
}

.fp-faq-answer a {
  color: var(--fp-primary, #5d09c7);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dark .fp-faq-answer a {
  color: #b785ff;
}