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

/* Footer: keep the on-page feedback toolbar ("Was this page helpful?") and the
   footer-links social icons visible; hide only the previous/next navigation.
   The "Built with Fern" badge (#builtwithfern) stays visible regardless: Fern
   enforces it with a higher-specificity !important rule that CSS here cannot
   override (removing it is a plan-gated feature). */
.fern-footer-nav {
  display: none !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);
}

.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);
}

.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);
}

.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;
}

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

.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;
}

/* --- 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;
}
.dark .recipe-close-btn:hover {
  color: #e4e4e7;
}
.dark .recipe-close-btn:focus-visible {
  color: #e4e4e7;
}

/* --- 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;
}
.dark .recipe-step-card:hover {
  border-color: #3f3f46;
}
.dark .recipe-step-card:focus-visible {
  border-color: #3f3f46;
}

.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;
}
.dark .recipe-nav-btn:hover {
  color: #fafafa;
}
.dark .recipe-nav-btn:focus-visible {
  color: #fafafa;
}

/* --- 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;
}
.dark .recipe-code-tab:hover {
  color: #a1a1aa;
}
.dark .recipe-code-tab:focus-visible {
  color: #a1a1aa;
}
.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;
}
.dark .recipe-copy-btn:hover {
  color: #e4e4e7;
  border-color: #3f3f46;
}
.dark .recipe-copy-btn:focus-visible {
  color: #e4e4e7;
  border-color: #3f3f46;
}

.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;
  /* When the rail is taller than the viewport it becomes its own independent
     scroll pane: hovering over the rail and scrolling runs it all the way to
     the last filter (SDKs, API, Account, Dashboard, Webhooks) while the page
     stays put. The cap has to clear the page heading that sits above the rail
     at the top of the page (the "Release notes" H1, ~16rem down), not just the
     pinned `top` offset, otherwise at scroll 0 the pane's box extends below the
     fold and its lower filters can't be reached until the page is scrolled
     enough to pin the rail. Sizing it from the scroll-0 position keeps the pane
     and its scrollbar fully on screen at every scroll position.
     `overscroll-behavior: contain` keeps the wheel on the rail instead of
     chaining to the page before the bottom filters are revealed. */
  max-height: calc(100vh - 16rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.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);
}
.dark .fp-changelog-filter-item:hover {
  color: #b785ff;
}
.dark .fp-changelog-filter-item:focus-visible {
  color: #b785ff;
}

.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);
}
.dark .fp-changelog-rss:hover {
  color: #b785ff;
}
.dark .fp-changelog-rss:focus-visible {
  color: #b785ff;
}

/* ---------------- 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);
}
.dark .fp-changelog-timeline-year:hover {
  color: #ffffff;
}
.dark .fp-changelog-timeline-year:focus-visible {
  color: #ffffff;
}

.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);
}
.dark .fp-changelog-timeline-month:hover {
  color: #ffffff;
}
.dark .fp-changelog-timeline-month:focus-visible {
  color: #ffffff;
}

/* ---------------- 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);
}
.dark .fp-changelog-entry-title a:hover {
  color: #b785ff;
}
.dark .fp-changelog-entry-title a:focus-visible {
  color: #b785ff;
}

.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);
}
.dark .fp-changelog-detail-back:hover {
  color: #b785ff;
}
.dark .fp-changelog-detail-back:focus-visible {
  color: #b785ff;
}

.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;
}
.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;
}

.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);
}
.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;
}

/* --- 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;
}
.dark .fp-codepreview-tab:hover {
  color: #fafafa;
}
.dark .fp-codepreview-tab:focus-visible {
  color: #fafafa;
}

.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);
}
.dark .fp-codepreview-copy:hover {
  color: #b785ff;
}
.dark .fp-codepreview-copy:focus-visible {
  color: #b785ff;
}

.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);
}

.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;
}

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

.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);
}
.dark .fp-whatsnew-link:hover .fp-whatsnew-title {
  color: #b785ff;
}
.dark .fp-whatsnew-link:focus-within .fp-whatsnew-title {
  color: #b785ff;
}

/* --- 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);
}
.dark .fp-sdk-pill:hover {
  border-color: #b785ff;
}
.dark .fp-sdk-pill:focus-visible {
  border-color: #b785ff;
}

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

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

.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;
}
.dark .fp-hero-compact .fp-hero-cta-secondary:hover {
  color: #fafafa;
}
.dark .fp-hero-compact .fp-hero-cta-secondary:focus-visible {
  color: #fafafa;
}

/* --- 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);
}
.dark .fp-quickstart-card:hover {
  border-color: #b785ff;
}
.dark .fp-quickstart-card:focus-visible {
  border-color: #b785ff;
}

.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);
}
.dark .fp-quickstart-card:hover .fp-quickstart-label {
  color: #b785ff;
}
.dark .fp-quickstart-card:focus-within .fp-quickstart-label {
  color: #b785ff;
}

/* --- 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);
}
.dark .fp-concept-block-title a:hover {
  color: #b785ff;
}
.dark .fp-concept-block-title a:focus-visible {
  color: #b785ff;
}

.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;
}
.dark .fp-concept-block-links a:hover {
  color: #d4b3ff;
}
.dark .fp-concept-block-links a:focus-visible {
  color: #d4b3ff;
}

/* 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);
}
.dark .fp-featured-card:hover {
  border-color: #b785ff;
}
.dark .fp-featured-card:focus-visible {
  border-color: #b785ff;
}

.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;
}

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