/*fern-site-stylesheet*/@font-face {
    font-family: 'Figtree';
    src: url('/_fern-files/ordergroove-382439.docs.buildwithfern.com/6b96ce6d4783658f09e2b92d468da8e542d57aa6e4bc461ab2e7ae71565fdc64/docs/assets/fonts/Figtree-Variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Figtree';
    src: url('/_fern-files/ordergroove-382439.docs.buildwithfern.com/3662c283abf0e68597358415c802c2e01390e9577c170da5563709a844db45c4/docs/assets/fonts/Figtree-Italic-Variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Figtree';
    src: url('/_fern-files/ordergroove-382439.docs.buildwithfern.com/6b96ce6d4783658f09e2b92d468da8e542d57aa6e4bc461ab2e7ae71565fdc64/docs/assets/fonts/Figtree-Variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Figtree';
    src: url('/_fern-files/ordergroove-382439.docs.buildwithfern.com/3662c283abf0e68597358415c802c2e01390e9577c170da5563709a844db45c4/docs/assets/fonts/Figtree-Italic-Variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 28px;
  --font-body: 'Figtree', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Figtree', 'Figtree', 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: #fafefb;
  --accent-2: #f4fbf6;
  --accent-3: #e5f8e9;
  --accent-4: #d4f2db;
  --accent-5: #c1eacb;
  --accent-6: #abdfb9;
  --accent-7: #8ecfa0;
  --accent-8: #62ba7f;
  --accent-9: #063;
  --accent-10: #005624;
  --accent-11: #257b47;
  --accent-12: #20402a;

  --accent-a1: #00cc3305;
  --accent-a2: #00a32f0b;
  --accent-a3: #00bb281a;
  --accent-a4: #01b22a2b;
  --accent-a5: #00a92a3e;
  --accent-a6: #009e2b54;
  --accent-a7: #00932971;
  --accent-a8: #008f2f9d;
  --accent-a9: #006633;
  --accent-a10: #005624;
  --accent-a11: #006528da;
  --accent-a12: #00250cdf;

  --accent-contrast: #fff;
  --accent-surface: #f1faf4cc;
  --accent-indicator: #063;
  --accent-track: #063;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.3% 0.0055 152.7);
      --accent-2: oklch(98.2% 0.0101 152.7);
      --accent-3: oklch(96% 0.0281 152.7);
      --accent-4: oklch(93.4% 0.0445 152.7);
      --accent-5: oklch(90% 0.0599 152.7);
      --accent-6: oklch(85.7% 0.0749 152.7);
      --accent-7: oklch(79.8% 0.0935 152.7);
      --accent-8: oklch(71.9% 0.1227 152.7);
      --accent-9: oklch(44.7% 0.1159 152.7);
      --accent-10: oklch(39.2% 0.1159 152.7);
      --accent-11: oklch(51.8% 0.1159 152.7);
      --accent-12: oklch(33.9% 0.0538 152.7);

      --accent-a1: color(display-p3 0.0235 0.7569 0.0235 / 0.016);
      --accent-a2: color(display-p3 0.0235 0.6118 0.1216 / 0.04);
      --accent-a3: color(display-p3 0.0118 0.6431 0.0549 / 0.087);
      --accent-a4: color(display-p3 0.0078 0.6275 0.0902 / 0.146);
      --accent-a5: color(display-p3 0.0039 0.5961 0.0784 / 0.212);
      --accent-a6: color(display-p3 0.0039 0.5529 0.0863 / 0.287);
      --accent-a7: color(display-p3 0.0039 0.498 0.0824 / 0.389);
      --accent-a8: color(display-p3 0 0.4745 0.0902 / 0.53);
      --accent-a9: color(display-p3 0 0.2706 0.0667 / 0.836);
      --accent-a10: color(display-p3 0 0.2275 0.0314 / 0.863);
      --accent-a11: color(display-p3 0 0.302 0.0667 / 0.753);
      --accent-a12: color(display-p3 0 0.1059 0.0196 / 0.844);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9569 0.9804 0.9569 / 0.8);
      --accent-indicator: oklch(44.7% 0.1159 152.7);
      --accent-track: oklch(44.7% 0.1159 152.7);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfdfc;
  --grayscale-2: #f8faf8;
  --grayscale-3: #eff1ef;
  --grayscale-4: #e7e9e7;
  --grayscale-5: #dfe2df;
  --grayscale-6: #d7dad7;
  --grayscale-7: #cccfcc;
  --grayscale-8: #b9bcb8;
  --grayscale-9: #898e87;
  --grayscale-10: #7f847d;
  --grayscale-11: #60655f;
  --grayscale-12: #1d211c;

  --grayscale-a1: #00550003;
  --grayscale-a2: #00490007;
  --grayscale-a3: #00200010;
  --grayscale-a4: #00160018;
  --grayscale-a5: #00180020;
  --grayscale-a6: #00140028;
  --grayscale-a7: #000f0033;
  --grayscale-a8: #040f0047;
  --grayscale-a9: #050f0078;
  --grayscale-a10: #040e0082;
  --grayscale-a11: #020a00a0;
  --grayscale-a12: #010600e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #898e87;
  --grayscale-track: #898e87;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.989 0.992 0.989);
      --grayscale-2: color(display-p3 0.974 0.98 0.973);
      --grayscale-3: color(display-p3 0.939 0.945 0.937);
      --grayscale-4: color(display-p3 0.907 0.914 0.905);
      --grayscale-5: color(display-p3 0.878 0.885 0.875);
      --grayscale-6: color(display-p3 0.846 0.855 0.843);
      --grayscale-7: color(display-p3 0.803 0.812 0.8);
      --grayscale-8: color(display-p3 0.727 0.738 0.723);
      --grayscale-9: color(display-p3 0.541 0.556 0.532);
      --grayscale-10: color(display-p3 0.5 0.515 0.491);
      --grayscale-11: color(display-p3 0.38 0.395 0.374);
      --grayscale-12: color(display-p3 0.117 0.129 0.111);

      --grayscale-a1: #00550003;
      --grayscale-a2: #00490007;
      --grayscale-a3: #00200010;
      --grayscale-a4: #00160018;
      --grayscale-a5: #00180020;
      --grayscale-a6: #00140028;
      --grayscale-a7: #000f0033;
      --grayscale-a8: #040f0047;
      --grayscale-a9: #050f0078;
      --grayscale-a10: #040e0082;
      --grayscale-a11: #020a00a0;
      --grayscale-a12: #010600e3;

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


.dark {
  --accent-1: #121b14;
  --accent-2: #142017;
  --accent-3: #13311c;
  --accent-4: #0f3f21;
  --accent-5: #0e4c27;
  --accent-6: #0e5b2e;
  --accent-7: #0d6c37;
  --accent-8: #008040;
  --accent-9: #00ff85;
  --accent-10: #00f47b;
  --accent-11: #00f077;
  --accent-12: #abffc1;

  --accent-a1: #00f60009;
  --accent-a2: #00f0000f;
  --accent-a3: #00fb0021;
  --accent-a4: #00fd0030;
  --accent-a5: #00fe0f3e;
  --accent-a6: #00ff2c4e;
  --accent-a7: #00fd4561;
  --accent-a8: #00ff5476;
  --accent-a9: #00ff85;
  --accent-a10: #00fe7ef4;
  --accent-a11: #00ff7cef;
  --accent-a12: #abffc1;

  --accent-contrast: #122718;
  --accent-surface: #122d0080;
  --accent-indicator: #00ff85;
  --accent-track: #00ff85;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(20.9% 0.0188 152);
      --accent-2: oklch(22.9% 0.0255 152);
      --accent-3: oklch(28.2% 0.052 152);
      --accent-4: oklch(32.6% 0.0737 152);
      --accent-5: oklch(36.9% 0.0883 152);
      --accent-6: oklch(41.5% 0.102 152);
      --accent-7: oklch(46.7% 0.1177 152);
      --accent-8: oklch(52.6% 0.1382 152);
      --accent-9: oklch(87.6% 0.2303 152);
      --accent-10: oklch(84.5% 0.2303 152);
      --accent-11: oklch(83.3% 0.2303 152);
      --accent-12: oklch(93% 0.1172 152);

      --accent-a1: color(display-p3 0 1 0 / 0.034);
      --accent-a2: color(display-p3 0.1569 0.9882 0 / 0.056);
      --accent-a3: color(display-p3 0.2471 1 0 / 0.123);
      --accent-a4: color(display-p3 0.2588 0.9961 0 / 0.183);
      --accent-a5: color(display-p3 0.302 1 0.1451 / 0.238);
      --accent-a6: color(display-p3 0.3373 1 0.2549 / 0.301);
      --accent-a7: color(display-p3 0.3647 1 0.3373 / 0.369);
      --accent-a8: color(display-p3 0.3725 1 0.4 / 0.454);
      --accent-a9: color(display-p3 0.4667 1 0.5765 / 0.984);
      --accent-a10: color(display-p3 0.4627 1 0.5569 / 0.937);
      --accent-a11: color(display-p3 0.4588 0.9961 0.5451 / 0.92);
      --accent-a12: color(display-p3 0.7529 1 0.7843 / 0.992);

      --accent-contrast: #122718;
      --accent-surface: color(display-p3 0.0863 0.1725 0.0039 / 0.5);
      --accent-indicator: oklch(87.6% 0.2303 152);
      --accent-track: oklch(87.6% 0.2303 152);
    }
  }
}


.dark {
  --grayscale-1: #121113;
  --grayscale-2: #1a191b;
  --grayscale-3: #232225;
  --grayscale-4: #2b292d;
  --grayscale-5: #323035;
  --grayscale-6: #3c393f;
  --grayscale-7: #49474e;
  --grayscale-8: #625f69;
  --grayscale-9: #6f6d78;
  --grayscale-10: #7c7a85;
  --grayscale-11: #b5b2bc;
  --grayscale-12: #eeeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f5f4f609;
  --grayscale-a3: #ebeaf814;
  --grayscale-a4: #eee5f81d;
  --grayscale-a5: #efe6fe25;
  --grayscale-a6: #f1e6fd30;
  --grayscale-a7: #eee9ff40;
  --grayscale-a8: #eee7ff5d;
  --grayscale-a9: #eae6fd6e;
  --grayscale-a10: #ece9fd7c;
  --grayscale-a11: #f5f1ffb7;
  --grayscale-a12: #fdfdffef;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.07 0.067 0.074);
      --grayscale-2: color(display-p3 0.101 0.098 0.105);
      --grayscale-3: color(display-p3 0.138 0.134 0.144);
      --grayscale-4: color(display-p3 0.167 0.161 0.175);
      --grayscale-5: color(display-p3 0.196 0.189 0.206);
      --grayscale-6: color(display-p3 0.232 0.225 0.245);
      --grayscale-7: color(display-p3 0.286 0.277 0.302);
      --grayscale-8: color(display-p3 0.383 0.373 0.408);
      --grayscale-9: color(display-p3 0.434 0.428 0.467);
      --grayscale-10: color(display-p3 0.487 0.48 0.519);
      --grayscale-11: color(display-p3 0.707 0.7 0.735);
      --grayscale-12: color(display-p3 0.933 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f5f4f609;
      --grayscale-a3: #ebeaf814;
      --grayscale-a4: #eee5f81d;
      --grayscale-a5: #efe6fe25;
      --grayscale-a6: #f1e6fd30;
      --grayscale-a7: #eee9ff40;
      --grayscale-a8: #eee7ff5d;
      --grayscale-a9: #eae6fd6e;
      --grayscale-a10: #ece9fd7c;
      --grayscale-a11: #f5f1ffb7;
      --grayscale-a12: #fdfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.434 0.428 0.467);
      --grayscale-track: color(display-p3 0.434 0.428 0.467);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(0, 102, 51, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: rgba(255, 255, 255, 1);
  --header-background: rgba(23, 19, 47, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(0, 255, 133, 1);
  --background: rgba(23, 19, 47, 1);
  --border: initial;
  --sidebar-background: rgba(23, 19, 47, 1);
  --header-background: rgba(23, 19, 47, 1);
  --card-background: rgba(46, 42, 71, 1);
  --theme-color: #17132f;
}

/* Site-wide styles.
   Landing-page styles live in docs/assets/landing.css, scoped under .og-landing. */

/* Subtle linear gradient background */
.fern-background-image {
  background-image: linear-gradient(180deg, rgba(0, 135, 0, 0.03) 0%, transparent 50%);
}

:root.dark .fern-background-image {
  background-image: linear-gradient(180deg, rgba(112, 225, 85, 0.03) 0%, transparent 50%);
}

/* External link arrow.
   Fern appends an inline-block <svg> after outbound link text. An inline-block is
   an atomic inline box, and CSS opens a line-break opportunity after one — so a
   period or comma following the link can wrap onto the next line by itself.
   Drawing the arrow as text removes the atomic inline, and the break opportunity
   with it. U+FE0E forces text presentation so the arrow cannot render as a colour
   emoji on Windows or Android.

   :has(> svg) scopes this to links Fern actually decorated, so internal links are
   untouched. If a Fern upgrade changes this markup the selectors stop matching and
   two arrows appear — check here first. */
.fern-mdx-link > svg {
  display: none;
}

.fern-mdx-link:has(> svg)::after {
  content: "\2197\FE0E";
  margin-left: 0.15em;
}

/* Navigation bar text.
   The header is Midnight in both themes (docs.yml header-background). Fern's
   own dark-header foreground is ~72% white; this lifts the inactive tabs, the
   navbar links, and the search control to solid white. The active tab keeps the
   Groovy Green accent so the current section still reads. */
#fern-header .fern-header-tabs a[role="tab"]:not([data-state="active"]),
#fern-header .fern-button.minimal .fern-button-text,
#fern-header #fern-search-button {
  color: #FFFFFF;
}

/* Header tab icons.
   Fern draws tab icons in a 14px box. The Font Awesome icons this replaced
   filled it, but the Material glyphs are padded inside theirs and paint only
   ~11px. At 18px they paint ~14.5px, which matches the old icons, and they still
   fit Fern's 20px icon wrapper, so the tabs don't move. Fern's 14px rule sits in
   a cascade layer, so this plain rule wins. */
#fern-header .fern-header-tabs a[role="tab"] svg {
  width: 18px;
  height: 18px;
}

/* Card icons.
   Fern inlines custom SVG icons but drops their fill attribute, so the Material
   glyphs render black regardless of theme. Inherit the card's icon color, and
   use white on dark surfaces (brand rule: icons on Midnight / Dark Indigo are
   white). */
.fern-card .card-icon svg,
.fern-card .card-icon svg path {
  fill: currentColor;
}

/* Icons are UI components (3:1 bar), so light mode can use the brand Green
   #009A50 (3.66:1 on white) instead of the darker normal-text accent. */
:root:not(.dark) .fern-card .card-icon {
  color: #009A50 !important;
}

.dark .fern-card .card-icon {
  color: #FFFFFF !important;
}

/* Dark-mode text.
   Fern's dark theme renders secondary text (card descriptions, body copy,
   sidebar links, table of contents) as translucent light grey. Use solid white
   so ordinary text reads at full contrast on Midnight and Dark Indigo. */
:root.dark {
  --grayscale-a11: #FFFFFF;
  --grayscale-a12: #FFFFFF;
  --grayscale-11: #FFFFFF;
  --grayscale-12: #FFFFFF;
}

/* ============================================================
   Ordergroove Developer Docs — Landing Page Styles
   All rules scoped under .og-landing to avoid bleed.

   Palette (Ordergroove Brand Hub):
     Midnight #17132F · Dark Indigo #2E2A47 · Groovy Green #00FF85
     Intense Cyan #00FAFF · Off-White #F5F5F5 · Green #009A50
     (large text, icons, borders: 3.66:1 on white, passes the 3:1
     AA bar for those uses) · text green #006633 (normal-size text
     only: 7.12:1 on white; matches accent-primary.light in docs.yml).
     Every other value below is one of these mixed with white or
     Midnight via color-mix(); no invented hues.

   Gradient strategy:
     One continuous gradient on .og-landing spans the full page
     (white → Midnight tint → white / Midnight → Dark Indigo → Midnight).
     All sections are transparent so the gradient flows through.
     The hero carries a Gradient 3 (#00FAFF → #EAFF00) brand wash
     instead of a radial glow; the same gradient drives the card
     border sweep and the dashboard button.

   Theme strategy:
     • .og-landing        = light mode defaults
     • .dark .og-landing  = dark mode overrides (.dark added by Fern)
   ============================================================ */

/* ── Dashboard navbar button ──────────────────────────────── */

a.fern-button.filled.primary[href*="dashboard"] {
  /* Brand Gradient 3 (#00FAFF → #EAFF00); dark text on light gradients */
  background: linear-gradient(90deg, #00FAFF, #EAFF00) !important;
  border-radius: 999px !important;
  border: none !important;
  color: #17132F !important;
}

a.fern-button.filled.primary[href*="dashboard"]:hover {
  background: transparent !important;
  border: none !important;
  outline: 1.5px solid #006633 !important;
  outline-offset: -1.5px !important;
  color: #006633 !important;
}
a.fern-button.filled.primary[href*="dashboard"]:focus-visible {
  background: transparent !important;
  border: none !important;
  outline: 1.5px solid #006633 !important;
  outline-offset: -1.5px !important;
  color: #006633 !important;
}

a.fern-button.filled.primary[href*="dashboard"]:hover .fern-button-text {
  color: #006633 !important;
}
a.fern-button.filled.primary[href*="dashboard"]:focus-within .fern-button-text {
  color: #006633 !important; outline: none;
}

.dark a.fern-button.filled.primary[href*="dashboard"]:hover {
  outline-color: #00ff85 !important;
  color: #00ff85 !important;
}
.dark a.fern-button.filled.primary[href*="dashboard"]:focus-visible {
  outline-color: #00ff85 !important;
  color: #00ff85 !important;
}

.dark a.fern-button.filled.primary[href*="dashboard"]:hover .fern-button-text {
  color: #00ff85 !important;
}
.dark a.fern-button.filled.primary[href*="dashboard"]:focus-within .fern-button-text {
  color: #00ff85 !important; outline: none;
}

a.fern-button.filled.primary[href*="dashboard"] .fern-button-text {
  color: #17132F !important;
}

/* ── Animated gradient border ─────────────────────────────── */

@property --og-border-angle {

  syntax: '<angle>';
  initial-value: 135deg;
  inherits: false;

}

@keyframes og-border-spin {
  to { --og-border-angle: 495deg; }
}

/* ── Light mode (base) ────────────────────────────────────── */

.og-landing {
  /* Brand colors. Light mode splits the green by WCAG use:
       --og-green        normal-size text (#006633, 7.12:1 on white)
       --og-green-large  large text, icons, borders, dots (brand Green
                         #009A50, 3.66:1 — passes the 3:1 AA bar for
                         large text and UI, fails 4.5:1 for body text)
       --og-green-fill   solid fills (Groovy Green) */
  --og-green:          #006633;
  --og-green-large:    #009A50;
  --og-green-fill:     #00FF85;
  --og-green-dim:      color-mix(in srgb, #009A50 9%, transparent);

  /* Hero / CTA brand wash — Gradient 3 (Intense Cyan → Laser Lemon),
     faded to transparent */
  --og-gradient-from:  #00FAFF;
  --og-gradient-to:    #EAFF00;
  --og-gradient-alpha: 0.22;

  /* Text */
  --og-text:           #17132F;
  --og-muted:          rgba(23, 19, 47, 0.58);
  --og-subtle:         rgba(23, 19, 47, 0.28);

  /* Borders & overlays — all tinted from brand purple, no invented hues */
  --og-border:         rgba(23, 19, 47, 0.1);
  --og-grid-line:      rgba(23, 19, 47, 0.05);
  --og-stat-divider:   rgba(23, 19, 47, 0.08);
  --og-overlay-soft:   rgba(23, 19, 47, 0.025);     /* section rhythm overlay */
  --og-overlay-card:   rgba(255, 255, 255, 0.8);    /* card background */

  /* Animated card border sweep — Gradient 3 */
  --og-card-sweep-from: #00FAFF;
  --og-card-sweep-to:   #EAFF00;

  /* Buttons */
  --og-btn-color:      #17132F;                     /* dark on bright green — 13:1 */
  --og-outline-border: rgba(23, 19, 47, 0.22);
  --og-outline-hover:  rgba(23, 19, 47, 0.05);

  /* Full-page gradient: white → whisper of Midnight → white */
  background:
    linear-gradient(
      180deg,
      #FFFFFF                                    0%,
      color-mix(in srgb, #17132F 2%, #FFFFFF)   18%,
      color-mix(in srgb, #17132F 4%, #FFFFFF)   42%,
      color-mix(in srgb, #17132F 4%, #FFFFFF)   58%,
      color-mix(in srgb, #17132F 2%, #FFFFFF)   82%,
      #FFFFFF                                  100%
    );

  font-family: inherit;
  overflow-x: hidden;
  transition: background 0.4s ease;
}

/* ── Dark mode overrides ──────────────────────────────────── */

.dark .og-landing {
  /* Brand colors — Groovy Green reads at 13.4:1 on Midnight, so one
     token covers every use */
  --og-green:          #00FF85;
  --og-green-large:    #00FF85;
  --og-green-fill:     #00FF85;
  --og-green-dim:      rgba(0, 255, 133, 0.1);

  --og-gradient-alpha: 0.24;

  /* Text — dark mode uses solid white for body copy as well */
  --og-text:           #FFFFFF;
  --og-muted:          #FFFFFF;
  --og-subtle:         rgba(255, 255, 255, 0.28);

  /* Borders & overlays */
  --og-border:         rgba(255, 255, 255, 0.08);
  --og-grid-line:      rgba(255, 255, 255, 0.03);
  --og-stat-divider:   rgba(255, 255, 255, 0.07);
  --og-overlay-soft:   rgba(0, 0, 0, 0.18);         /* section rhythm overlay */
  --og-overlay-card:   rgba(255, 255, 255, 0.05);   /* card background */

  /* Animated card border sweep — Gradient 3 */
  --og-card-sweep-from: #00FAFF;
  --og-card-sweep-to:   #EAFF00;

  /* Buttons */
  --og-btn-color:      #17132F;
  --og-outline-border: rgba(255, 255, 255, 0.2);
  --og-outline-hover:  rgba(255, 255, 255, 0.05);

  /* Full-page gradient: Midnight → lift toward Dark Indigo → Midnight */
  background:
    linear-gradient(
      180deg,
      #17132F                                    0%,
      color-mix(in srgb, #2E2A47 25%, #17132F)  18%,
      color-mix(in srgb, #2E2A47 50%, #17132F)  42%,
      color-mix(in srgb, #2E2A47 50%, #17132F)  58%,
      color-mix(in srgb, #2E2A47 25%, #17132F)  82%,
      #17132F                                  100%
    );
}

/* ── Hide header tabs on the landing page ─────────────────── */

body:has(.og-landing) [class*="tab"][role="tablist"],
body:has(.og-landing) header [role="tablist"],
body:has(.og-landing) [data-ui="header-tabs"],
body:has(.og-landing) [class*="HeaderTab"],
body:has(.og-landing) [class*="header-tabs"],
body:has(.og-landing) nav[class*="tabs"] {
  display: none !important;
}

/* ── Smooth theme transitions ─────────────────────────────── */

.og-landing,
.og-hero,
.og-stats,
.og-section-alt,
.og-cta-section,
.og-hero-title,
.og-hero-sub,
.og-stat-num,
.og-stat-label,
.og-section-title,
.og-section-desc,
.og-eyebrow,
.og-api-card,
.og-api-icon,
.og-api-title,
.og-api-desc,
.og-badge,
.og-btn-primary,
.og-btn-outline {
  transition:
    background 0.4s ease,
    background-color 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease;
}

/* ── Hero — transparent so page gradient shows through ───── */

.og-hero {
  position: relative;
  padding: 108px 24px 88px;
  text-align: center;
  background: transparent;
  overflow: hidden;
}

/* Brand gradient wash (Gradient 2) behind the hero. The mask fades it out
   toward the edges so text and controls sit on the page surface, not on
   the gradient. */
.og-hero-gradient {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: min(960px, 140vw);
  height: 620px;
  background: linear-gradient(135deg, var(--og-gradient-from), var(--og-gradient-to));
  opacity: var(--og-gradient-alpha);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 40%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 40%, black 0%, transparent 100%);
  pointer-events: none;
}

.og-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--og-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--og-grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 0%, transparent 100%);
  pointer-events: none;
}

.og-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 16px;
  background: var(--og-green-dim);
  border: 1px solid color-mix(in srgb, var(--og-green-large) 35%, transparent);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--og-green);
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.og-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--og-green-large);
}

.dark .og-badge-dot {
  box-shadow: 0 0 6px var(--og-green-large);
}

.og-hero-title {
  position: relative;
  z-index: 1;
  font-size: clamp(40px, 5.5vw, 70px) !important;
  font-weight: 800 !important;
  color: var(--og-text) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  margin: 0 auto 22px !important;
  max-width: 820px;
}

/* Fern turns every heading into a click-to-copy anchor target: it wraps the
   element in a Radix popover and sets `cursor: pointer; padding-right: 16px`
   as INLINE styles. That's useful on content pages but surprising on the
   landing hero, where the headline looks clickable and copies a link.
   There is no child <a> to hide, and inline styles beat plain rules, so this
   has to override them directly. */
.og-hero-title {
  cursor: default !important;
  padding-right: 0 !important;
  pointer-events: none !important;
}

/* Hero accent word: 40-70px bold, so the brand Green qualifies as large text */
.og-accent { color: var(--og-green-large); }

.og-hero-cards {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  margin: 48px auto 0;
  text-align: left;
  --og-hero-card-bg: #FFFFFF;
}

.dark .og-hero-cards {
  --og-hero-card-bg: #17132F;
}

/* Gradient border on hero cards via background-clip trick */
.og-hero-cards a {
  border: 1.5px solid transparent !important;
  border-radius: 10px !important;
  background-image:
    linear-gradient(var(--og-hero-card-bg), var(--og-hero-card-bg)),
    linear-gradient(var(--og-border-angle), var(--og-card-sweep-from) 25%, var(--og-card-sweep-to) 100%) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  animation: og-border-spin 4s linear infinite;
}

/* Hero card icons: Midnight in light mode (brand rule for icons on white).
   Fern sets the icon color inline, hence !important; the :root:not(.dark)
   prefix outranks the site-wide light-mode icon rule in styles.css. Dark
   mode keeps the site-wide white. */
:root:not(.dark) .og-hero-cards .fern-card .card-icon {
  color: #17132F !important;
}

.dark .og-hero-cards .fern-card .card-icon {
  color: #FFFFFF !important;
}

.og-hero-sub {
  position: relative;
  z-index: 1;
  font-size: 18px !important;
  color: var(--og-muted) !important;
  max-width: 520px;
  margin: 0 auto 44px !important;
  line-height: 1.7 !important;
}

.og-ctas {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.og-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 26px;
  background: var(--og-green-fill);
  color: var(--og-btn-color) !important;
  font-weight: 700;
  font-size: 15px;
  border-radius: 8px;
  text-decoration: none !important;
}

.og-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--og-green-fill) 35%, transparent);
  transition: transform 0.15s, box-shadow 0.2s;
}
.og-btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--og-green-fill) 35%, transparent);
  transition: transform 0.15s, box-shadow 0.2s; outline: none;
}

.og-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 26px;
  background: transparent;
  color: var(--og-text) !important;
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid var(--og-outline-border);
  border-radius: 8px;
  text-decoration: none !important;
}

.og-btn-outline:hover {
  border-color: var(--og-subtle);
  background: var(--og-outline-hover);
}
.og-btn-outline:focus-visible {
  border-color: var(--og-subtle);
  background: var(--og-outline-hover); outline: none;
}

/* ── Stats — subtle overlay, no solid background ─────────── */

.og-stats {
  display: flex;
  background: var(--og-overlay-soft);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--og-stat-divider);
  border-bottom: 1px solid var(--og-stat-divider);
  flex-wrap: wrap;
}

.og-stat {
  flex: 1;
  min-width: 150px;
  padding: 28px 20px;
  text-align: center;
  border-right: 1px solid var(--og-stat-divider);
}

.og-stat:last-child { border-right: none; }

.og-stat-num {
  font-size: 38px;
  font-weight: 800;
  color: var(--og-green-large);
  line-height: 1;
  margin-bottom: 7px;
  letter-spacing: -0.03em;
}

.og-stat-label {
  font-size: 12px;
  color: var(--og-muted);
  font-weight: 500;
}

/* ── Sections — transparent so gradient flows through ────── */

.og-section {
  padding: 72px 40px;
  max-width: 1180px;
  margin: 0 auto;
}

.og-section-alt {
  background: var(--og-overlay-soft);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--og-border);
  border-bottom: 1px solid var(--og-border);
  padding: 72px 40px;
}

.og-section-alt-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.og-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--og-green);
  margin-bottom: 10px;
}

.og-section-title {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--og-text) !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -0.015em !important;
}

.og-section-desc {
  font-size: 16px !important;
  color: var(--og-muted) !important;
  margin: 0 0 36px 0 !important;
  max-width: 520px;
  line-height: 1.65 !important;
}

/* ── API grid ─────────────────────────────────────────────── */

.og-api-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 36px;
}

.og-api-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--og-overlay-card);
  backdrop-filter: blur(4px);
  border: 1px solid var(--og-border);
  border-radius: 10px;
  text-decoration: none !important;
}

.og-api-card:hover {
  border-color: color-mix(in srgb, var(--og-green-large) 45%, transparent);
  transform: translateY(-1px);
  transition: border-color 0.2s, transform 0.15s;
}
.og-api-card:focus-visible {
  border-color: color-mix(in srgb, var(--og-green-large) 45%, transparent);
  transform: translateY(-1px);
  transition: border-color 0.2s, transform 0.15s; outline: none;
}

.og-api-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  background: var(--og-green-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--og-green-large);
  font-size: 17px;
}

.og-api-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--og-text) !important;
  margin: 0 0 4px 0 !important;
}

.og-api-desc {
  font-size: 12px !important;
  color: var(--og-muted) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ── CTA — transparent, gradient continues beneath ───────── */

.og-cta-section {
  position: relative;
  text-align: center;
  padding: 90px 24px;
  background: transparent;
  border-top: 1px solid var(--og-border);
  overflow: hidden;
}

.og-cta-gradient {
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 140vw);
  height: 440px;
  background: linear-gradient(135deg, var(--og-gradient-from), var(--og-gradient-to));
  opacity: var(--og-gradient-alpha);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 60%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 60%, black 0%, transparent 100%);
  pointer-events: none;
}

.og-cta-title {
  position: relative;
  z-index: 1;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--og-text) !important;
  margin: 0 0 12px 0 !important;
  letter-spacing: -0.02em !important;
}

.og-cta-sub {
  position: relative;
  z-index: 1;
  font-size: 17px !important;
  color: var(--og-muted) !important;
  margin: 0 0 36px 0 !important;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {

  .og-api-grid { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 640px) {

  .og-api-grid { grid-template-columns: 1fr; }
  .og-section, .og-section-alt { padding: 52px 20px; }
  .og-stat { min-width: 130px; }
  .og-hero { padding: 72px 20px 60px; }

}