/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 28px;
  --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: #fbfefb;
  --accent-2: #f4fbf6;
  --accent-3: #e6f7ea;
  --accent-4: #d6f1dc;
  --accent-5: #c4e9cd;
  --accent-6: #addfb9;
  --accent-7: #8dcf9f;
  --accent-8: #5dba7a;
  --accent-9: #008744;
  --accent-10: #007937;
  --accent-11: #00823f;
  --accent-12: #1d3c26;

  --accent-a1: #00c00004;
  --accent-a2: #00a32f0b;
  --accent-a3: #00ae2919;
  --accent-a4: #00a82629;
  --accent-a5: #01a0273b;
  --accent-a6: #009c2652;
  --accent-a7: #00942972;
  --accent-a8: #00932ea2;
  --accent-a9: #008744;
  --accent-a10: #007937;
  --accent-a11: #00823f;
  --accent-a12: #00230ae2;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0051 152.2);
      --accent-2: oklch(98.2% 0.0099 152.2);
      --accent-3: oklch(96% 0.025 152.2);
      --accent-4: oklch(93.3% 0.0398 152.2);
      --accent-5: oklch(90% 0.0553 152.2);
      --accent-6: oklch(85.7% 0.0729 152.2);
      --accent-7: oklch(79.8% 0.0956 152.2);
      --accent-8: oklch(71.5% 0.1291 152.2);
      --accent-9: oklch(54.6% 0.143 152.2);
      --accent-10: oklch(50% 0.143 152.2);
      --accent-11: oklch(52.8% 0.143 152.2);
      --accent-12: oklch(32.4% 0.0537 152.2);

      --accent-a1: color(display-p3 0.2667 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.5961 0.102 / 0.087);
      --accent-a4: color(display-p3 0.0078 0.5882 0.0902 / 0.142);
      --accent-a5: color(display-p3 0.0039 0.5608 0.0784 / 0.204);
      --accent-a6: color(display-p3 0.0039 0.5451 0.0745 / 0.283);
      --accent-a7: color(display-p3 0.0039 0.502 0.0824 / 0.393);
      --accent-a8: color(display-p3 0 0.4863 0.0824 / 0.542);
      --accent-a9: color(display-p3 0 0.3804 0.0863 / 0.773);
      --accent-a10: color(display-p3 0 0.3294 0.051 / 0.797);
      --accent-a11: color(display-p3 0 0.3608 0.0706 / 0.781);
      --accent-a12: color(display-p3 0 0.102 0.0157 / 0.855);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9569 0.9804 0.9569 / 0.8);
      --accent-indicator: oklch(54.6% 0.143 152.2);
      --accent-track: oklch(54.6% 0.143 152.2);
    }
  }
}


.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, 135, 68, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: rgba(255, 255, 255, 1);
  --header-background: rgba(255, 255, 255, 1);
  --card-background: initial;
  --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: initial;
  --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;
}

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

   Gradient strategy:
     One continuous gradient on .og-landing spans the full page
     (white → brand color → white / black → brand → black).
     All sections are transparent so the gradient flows through.
     Subtle semi-transparent overlays add rhythm without breaking flow.

   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"] {
  background: linear-gradient(243.49deg, cyan 8.88%, #e5ff00 87.64%) !important;
  border-radius: 999px !important;
  border: none !important;
  color: #0D0B1E !important;
}

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

a.fern-button.filled.primary[href*="dashboard"]:hover .fern-button-text {
  color: #008744 !important;
}
a.fern-button.filled.primary[href*="dashboard"]:focus-within .fern-button-text {
  color: #008744 !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: #0D0B1E !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 — the palette is only #17132F and #00FF85.
     Light mode darkens the green for text contrast and keeps the
     bright brand green for solid fills. */
  --og-green:          #00875A;                     /* text accents — 4.6:1 on white (AA) */
  --og-green-fill:     #00FF85;                     /* solid fills — brand green */
  --og-green-dim:      rgba(0, 135, 90, 0.09);
  --og-green-glow:     rgba(0, 135, 90, 0.07);

  /* 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 */
  --og-card-sweep-from: #00FF85;
  --og-card-sweep-to:   #17132F;

  /* 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 brand lavender → white */
  background:
    linear-gradient(
      180deg,
      #FFFFFF       0%,
      #FAF8FE      18%,
      #F4F1FB      42%,
      #F4F1FB      58%,
      #FAF8FE      82%,
      #FFFFFF      100%
    );

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

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

.dark .og-landing {
  /* Brand colors */
  --og-green:          #00FF85;
  --og-green-fill:     #00FF85;
  --og-green-dim:      rgba(0, 255, 133, 0.1);
  --og-green-glow:     rgba(0, 255, 133, 0.15);

  /* Text */
  --og-text:           #FFFFFF;
  --og-muted:          rgba(255, 255, 255, 0.55);
  --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 — "to" is lifted so it stays
     visible against the dark card background */
  --og-card-sweep-from: #00FF85;
  --og-card-sweep-to:   #4A3B7C;

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

  /* Full-page gradient: near-black top → brand purple peak → footer-match bottom */
  background:
    linear-gradient(
      180deg,
      #080618       0%,
      #0C0A20      18%,
      #17132F      42%,
      #17132F      58%,
      #0C0A20      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;
}

.og-hero-glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse at 50% 30%, var(--og-green-glow) 0%, transparent 65%);
  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) 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);
}

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

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

.og-accent { color: var(--og-green); }

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

.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);
  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) 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) 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);
  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-glow {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, var(--og-green-glow) 0%, transparent 70%);
  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; }

}