/*fern-site-stylesheet*/@font-face {
    font-family: 'Archia';
    src: url('/_fern-files/fiftytwo.docs.buildwithfern.com/7b4159112f4c3c22c492d7482657ff452d637040911f5606a7be90c73f95e84b/assets/fonts/archia-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-0192, U+0218-0237, U+02C7-02DD, U+0326, U+1E80-1E85, U+1EF2-1EF3, U+2116, U+2190-2199, U+25FC;
}
@font-face {
    font-family: 'Archia';
    src: url('/_fern-files/_img/7b4159112f4c3c22c492d7482657ff45-v1.latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A5, U+00A7-00AB, U+00AD-00B0, U+00B2-00B4, U+00B6-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-200A, U+2010-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202F-2030, U+2039-203A, U+2044, U+205F, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
    font-family: 'Archia Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 114.85%;
    ascent-override: 82.72%;
    descent-override: 21.77%;
    line-gap-override: 0.00%;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 960px;
  --sidebar-width: 320px;
  --page-width: 100vw;
  --logo-height: 26px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Archia', 'Archia Fallback', 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: #fafefc;
  --accent-2: #f3fbf8;
  --accent-3: #e0f8ef;
  --accent-4: #cdf3e5;
  --accent-5: #baead9;
  --accent-6: #a4deca;
  --accent-7: #88ceb6;
  --accent-8: #5eb99d;
  --accent-9: #04654f;
  --accent-10: #005640;
  --accent-11: #237760;
  --accent-12: #1e4237;

  --accent-a1: #00cc6605;
  --accent-a2: #00aa6b0c;
  --accent-a3: #00c67c1f;
  --accent-a4: #00c27b32;
  --accent-a5: #00b27345;
  --accent-a6: #01a36b5b;
  --accent-a7: #00966377;
  --accent-a8: #009064a1;
  --accent-a9: #00634cfb;
  --accent-a10: #005640;
  --accent-a11: #006147dc;
  --accent-a12: #00291ce1;

  --accent-contrast: #fff;
  --accent-surface: #f0faf6cc;
  --accent-indicator: #04654f;
  --accent-track: #04654f;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.3% 0.0048 170.9);
      --accent-2: oklch(98.2% 0.0093 170.9);
      --accent-3: oklch(96% 0.0275 170.9);
      --accent-4: oklch(93.3% 0.0432 170.9);
      --accent-5: oklch(89.9% 0.0559 170.9);
      --accent-6: oklch(85.6% 0.0661 170.9);
      --accent-7: oklch(79.8% 0.078 170.9);
      --accent-8: oklch(72.2% 0.098 170.9);
      --accent-9: oklch(45.2% 0.0873 170.9);
      --accent-10: oklch(39.7% 0.0873 170.9);
      --accent-11: oklch(51.2% 0.0873 170.9);
      --accent-12: oklch(35% 0.0465 170.9);

      --accent-a1: color(display-p3 0.0235 0.7569 0.2667 / 0.016);
      --accent-a2: color(display-p3 0.0196 0.6471 0.3765 / 0.044);
      --accent-a3: color(display-p3 0.0039 0.6941 0.3882 / 0.102);
      --accent-a4: color(display-p3 0.0039 0.702 0.4235 / 0.169);
      --accent-a5: color(display-p3 0.0039 0.6314 0.3765 / 0.232);
      --accent-a6: color(display-p3 0.0039 0.5608 0.3451 / 0.31);
      --accent-a7: color(display-p3 0.0039 0.5059 0.302 / 0.404);
      --accent-a8: color(display-p3 0 0.4784 0.298 / 0.542);
      --accent-a9: color(display-p3 0 0.2627 0.1765 / 0.832);
      --accent-a10: color(display-p3 0 0.2275 0.1373 / 0.863);
      --accent-a11: color(display-p3 0 0.2902 0.1843 / 0.761);
      --accent-a12: color(display-p3 0 0.1216 0.0784 / 0.848);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9529 0.9804 0.9647 / 0.8);
      --accent-indicator: oklch(45.2% 0.0873 170.9);
      --accent-track: oklch(45.2% 0.0873 170.9);
    }
  }
}


.light, :root {
  --grayscale-1: #fbfdfc;
  --grayscale-2: #f7f9f8;
  --grayscale-3: #eef1f0;
  --grayscale-4: #e6e9e8;
  --grayscale-5: #dfe2e0;
  --grayscale-6: #d7dad9;
  --grayscale-7: #cbcfcd;
  --grayscale-8: #b8bcba;
  --grayscale-9: #868e8b;
  --grayscale-10: #7c8481;
  --grayscale-11: #5f6563;
  --grayscale-12: #1a211e;

  --grayscale-a1: #00804004;
  --grayscale-a2: #00402008;
  --grayscale-a3: #002d1e11;
  --grayscale-a4: #001f1519;
  --grayscale-a5: #00180820;
  --grayscale-a6: #00140d28;
  --grayscale-a7: #00140a34;
  --grayscale-a8: #000f0847;
  --grayscale-a9: #00110b79;
  --grayscale-a10: #00100a83;
  --grayscale-a11: #000a07a0;
  --grayscale-a12: #000805e5;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #868e8b;
  --grayscale-track: #868e8b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.986 0.992 0.988);
      --grayscale-2: color(display-p3 0.97 0.977 0.974);
      --grayscale-3: color(display-p3 0.935 0.944 0.94);
      --grayscale-4: color(display-p3 0.904 0.913 0.909);
      --grayscale-5: color(display-p3 0.875 0.885 0.88);
      --grayscale-6: color(display-p3 0.844 0.854 0.849);
      --grayscale-7: color(display-p3 0.8 0.811 0.806);
      --grayscale-8: color(display-p3 0.725 0.738 0.732);
      --grayscale-9: color(display-p3 0.531 0.556 0.546);
      --grayscale-10: color(display-p3 0.492 0.515 0.506);
      --grayscale-11: color(display-p3 0.377 0.395 0.389);
      --grayscale-12: color(display-p3 0.107 0.129 0.118);

      --grayscale-a1: #00804004;
      --grayscale-a2: #00402008;
      --grayscale-a3: #002d1e11;
      --grayscale-a4: #001f1519;
      --grayscale-a5: #00180820;
      --grayscale-a6: #00140d28;
      --grayscale-a7: #00140a34;
      --grayscale-a8: #000f0847;
      --grayscale-a9: #00110b79;
      --grayscale-a10: #00100a83;
      --grayscale-a11: #000a07a0;
      --grayscale-a12: #000805e5;

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


.dark {
  --accent-1: #0f1612;
  --accent-2: #131b16;
  --accent-3: #152c1f;
  --accent-4: #123c26;
  --accent-5: #164a2f;
  --accent-6: #1d593a;
  --accent-7: #226945;
  --accent-8: #267d51;
  --accent-9: #00c77b;
  --accent-10: #1ab974;
  --accent-11: #2fd78a;
  --accent-12: #aff3c9;

  --accent-a1: #ed00000b;
  --accent-a2: #f35b000f;
  --accent-a3: #aff73c18;
  --accent-a4: #56fe5b29;
  --accent-a5: #52fc7139;
  --accent-a6: #59fe8549;
  --accent-a7: #57fd8f5b;
  --accent-a8: #50fd9371;
  --accent-a9: #00fe99c2;
  --accent-a10: #23fe9ab3;
  --accent-a11: #37fea0d4;
  --accent-a12: #b8ffd3f2;

  --accent-contrast: #fff;
  --accent-surface: #211f1180;
  --accent-indicator: #00c77b;
  --accent-track: #00c77b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(19.2% 0.0148 157.3);
      --accent-2: oklch(21.3% 0.0168 157.3);
      --accent-3: oklch(27% 0.0388 157.3);
      --accent-4: oklch(31.9% 0.0611 157.3);
      --accent-5: oklch(36.6% 0.0713 157.3);
      --accent-6: oklch(41.5% 0.0807 157.3);
      --accent-7: oklch(46.8% 0.0922 157.3);
      --accent-8: oklch(52.6% 0.1072 157.3);
      --accent-9: oklch(73% 0.1728 157.3);
      --accent-10: oklch(69.4% 0.1589 157.3);
      --accent-11: oklch(78% 0.1728 157.3);
      --accent-12: oklch(90.7% 0.0893 157.3);

      --accent-a1: color(display-p3 0.9843 0 0 / 0.029);
      --accent-a2: color(display-p3 0.9961 0.4118 0 / 0.049);
      --accent-a3: color(display-p3 0.8039 0.9922 0.3333 / 0.087);
      --accent-a4: color(display-p3 0.5647 0.9961 0.4353 / 0.156);
      --accent-a5: color(display-p3 0.5451 1 0.5059 / 0.216);
      --accent-a6: color(display-p3 0.5529 0.9961 0.5804 / 0.281);
      --accent-a7: color(display-p3 0.5529 1 0.6078 / 0.35);
      --accent-a8: color(display-p3 0.5451 1 0.6353 / 0.432);
      --accent-a9: color(display-p3 0.4627 1 0.6471 / 0.746);
      --accent-a10: color(display-p3 0.4824 1 0.651 / 0.686);
      --accent-a11: color(display-p3 0.502 1 0.6745 / 0.815);
      --accent-a12: color(display-p3 0.7843 1 0.8431 / 0.94);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1176 0.1176 0.0667 / 0.5);
      --accent-indicator: oklch(73% 0.1728 157.3);
      --accent-track: oklch(73% 0.1728 157.3);
    }
  }
}


.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(4, 101, 79, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(228, 233, 235, 1);
  --sidebar-background: rgba(255, 255, 255, 1);
  --header-background: rgba(255, 255, 255, 1);
  --card-background: rgba(250, 251, 251, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(0, 199, 123, 1);
  --background: rgba(5, 23, 28, 1);
  --border: rgba(18, 53, 64, 1);
  --sidebar-background: rgba(5, 23, 28, 1);
  --header-background: rgba(5, 23, 28, 1);
  --card-background: rgba(9, 38, 48, 1);
  --theme-color: #05171c;
}

/* Product Switcher Tabs Theme */
:root [data-product-switcher-theme="tabs"] .fern-product-tabs-row {
  border-bottom: 1px solid var(--border-concealed);
}

:root [data-product-switcher-theme="tabs"] .fern-product-tabs {
  display: none;
  gap: 4px;
  align-items: stretch;
  padding-inline: var(--spacing-page-margin, 1rem);
  overflow-x: auto;
  scrollbar-width: none;
}

:root [data-product-switcher-theme="tabs"] .fern-product-tabs::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {

  :root [data-product-switcher-theme="tabs"] .fern-product-tabs {
    display: flex;
  }

}

:root [data-product-switcher-theme="tabs"] .fern-product-tabs .product-tab-trigger {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--grayscale-11);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

:root [data-product-switcher-theme="tabs"] .fern-product-tabs .product-tab-trigger:not([data-active="true"]):hover {
  color: var(--grayscale-12);
}

:root [data-product-switcher-theme="tabs"] .fern-product-tabs .product-tab-trigger[data-active="true"] {
  color: var(--accent-11);
  border-bottom-color: var(--accent-9);
}

:root [data-product-switcher-theme="tabs"] .fern-product-tabs .product-tab-trigger:not([data-active="true"]):focus-visible {
  color: var(--grayscale-12);
  outline: none;
}

/* ============================================================================
   FiftyTwo / 52ViKING developer docs
   ----------------------------------------------------------------------------
   Palette sampled from api.fiftytwo.com and fiftytwo.com:
     #05323D  deep teal      -- nav, dark surfaces, light-mode headings
     #00C77B  signal green   -- CTA + accent
     #7F97A8  slate          -- secondary text
     #EE748A  pink           -- tertiary highlight
   Type: Archia (display, 400 only) + Inter (body) + JetBrains Mono (code).

   Every custom block below defines both themes. Dark mode is the anchor
   (their own developer portal is dark), and light mode is a true light
   treatment rather than a washed-out inversion.
   ========================================================================== */

:root {
  --ft-teal: #05323d;
  --ft-teal-700: #073c4a;
  --ft-teal-900: #05171c;
  --ft-green: #00c77b;
  --ft-green-ink: #04654f;      /* 7.05:1 on white -- clears WCAG AAA; #00C77B is 1.8:1 and fails */
  --ft-slate: #7f97a8;
  --ft-pink: #ee748a;

  /* Surface tokens, re-pointed per theme below. */
  --ft-bg: #ffffff;
  --ft-bg-sunken: #f6f8f8;
  --ft-panel: #ffffff;
  --ft-panel-2: #f2f6f6;
  --ft-ink: #05171c;
  --ft-ink-dim: #4d6470;
  --ft-line: #e4e9eb;
  --ft-accent: var(--ft-green-ink);
  --ft-shadow: 0 1px 2px rgba(5, 50, 61, 0.05), 0 12px 32px rgba(5, 50, 61, 0.07);

  /* Archia ships in 400 only, so headings lean on size + tracking, never
     synthetic bold. */
  --ft-display-weight: 400;
  --ft-display-track: -0.022em;
}

:is(.dark, [data-theme="dark"]) {
  --ft-bg: #05171c;
  --ft-bg-sunken: #041216;
  --ft-panel: #092630;
  --ft-panel-2: #0c2f3b;
  --ft-ink: #eaf2f2;
  --ft-ink-dim: #94aeb8;
  --ft-line: #123540;
  --ft-accent: var(--ft-green);
  --ft-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------- typography */

h1, h2, h3, .ft-display {
  font-weight: var(--ft-display-weight);
  letter-spacing: var(--ft-display-track);
}

/* Archia's lowercase runs wide; nudge caps-heavy UI text back in. */
.fern-header, .fern-sidebar-link, .fern-tab {
  letter-spacing: -0.005em;
}

/* Squarer corners echo the API portal's 4px radius. */
:root {
  --rounded-sm: 4px;
  --rounded-md: 6px;
  --rounded-lg: 10px;
  --rounded-xl: 14px;
}

/* Deprecated endpoints/sections read as muted rather than alarming. */
.fern-sidebar-link[data-deprecated="true"] .fern-sidebar-link-text {
  text-decoration: line-through;
  opacity: 0.6;
}

/* ------------------------------------------------------- landing scaffolding */

/* The landing page is `layout: custom` and carries its own hero, CTAs, and
   footer navigation, so Fern's chrome is hidden there and only there. Zeroing
   --header-height also releases the top margin `.fern-main` reserves for the
   header, rather than hiding the bar and leaving its gap behind. */
body:has(.ft-hero) {
  --header-height: 0px;
}

body:has(.ft-hero) #fern-header {
  display: none !important;
}

body:has(.ft-hero) .fern-main {
  margin-top: 0 !important;
}

.ft-landing {
  --ft-gutter: clamp(20px, 5vw, 56px);
  color: var(--ft-ink);
}

.ft-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--ft-gutter);
}

.ft-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ft-accent);
  margin: 0 0 20px;
}

.ft-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ft-green);
  box-shadow: 0 0 0 3px rgba(0, 199, 123, 0.18);
}

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

.ft-hero {
  position: relative;
  padding: clamp(56px, 9vw, 104px) 0 clamp(28px, 4vw, 44px);
  text-align: center;
  overflow: hidden;
}

/* Soft teal/green wash behind the hero -- subtle in light, luminous in dark. */
.ft-hero::before {
  content: "";
  position: absolute;
  inset: -40% 0 auto;
  height: 620px;
  background:
    radial-gradient(60% 55% at 50% 40%, rgba(0, 199, 123, 0.10), transparent 70%),
    radial-gradient(45% 45% at 78% 22%, rgba(5, 50, 61, 0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

:is(.dark, [data-theme="dark"]) .ft-hero::before {
  background:
    radial-gradient(58% 52% at 50% 36%, rgba(0, 199, 123, 0.16), transparent 70%),
    radial-gradient(46% 46% at 80% 20%, rgba(127, 151, 168, 0.12), transparent 72%);
}

.ft-hero > * { position: relative; z-index: 1; }

.ft-hero-title {
  display: block;
  font-family: var(--typography-heading-font-family, inherit);
  font-weight: var(--ft-display-weight);
  letter-spacing: var(--ft-display-track);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.03;
  margin: 0 0 20px;
  max-width: 20ch;
  margin-inline: auto;
}

.ft-hero-title > p {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.ft-hero-title em {
  font-style: normal;
  color: var(--ft-accent);
}

.ft-hero-sub {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  color: var(--ft-ink-dim);
  max-width: 62ch;
  margin: 0 auto 32px;
}

.ft-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.ft-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 8px;
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  /* Colour and shadow only on hover -- clickable things must not shift under
     the cursor. */
  transition: box-shadow 0.14s ease, background 0.14s ease,
              border-color 0.14s ease, color 0.14s ease;
}

.ft-btn:hover { text-decoration: none; }
.ft-btn:focus-visible { text-decoration: none; }

.ft-btn-primary {
  background: var(--ft-teal);
  color: #ffffff;
}
.ft-btn-primary:hover {
  background: var(--ft-teal-700);
  color: #ffffff;
  box-shadow: 0 10px 26px rgba(5, 50, 61, 0.26);
}
.ft-btn-primary:focus-visible {
  background: var(--ft-teal-700);
  color: #ffffff;
  box-shadow: 0 10px 26px rgba(5, 50, 61, 0.26);
}
:is(.dark, [data-theme="dark"]) .ft-btn-primary {
  background: var(--ft-green);
  color: #04231c;
}
:is(.dark, [data-theme="dark"]) .ft-btn-primary:hover {
  background: #17d98d;
  color: #04231c;
  box-shadow: 0 10px 28px rgba(0, 199, 123, 0.3);
}
:is(.dark, [data-theme="dark"]) .ft-btn-primary:focus-visible {
  background: #17d98d;
  color: #04231c;
  box-shadow: 0 10px 28px rgba(0, 199, 123, 0.3);
}

.ft-btn-ghost {
  background: transparent;
  color: var(--ft-ink);
  border-color: var(--ft-line);
}
.ft-btn-ghost:hover {
  border-color: var(--ft-accent);
  color: var(--ft-ink);
}
.ft-btn-ghost:focus-visible {
  border-color: var(--ft-accent);
  color: var(--ft-ink);
}

/* ------------------------------------------------- hero terminal / POS panel */

.ft-panel-shell {
  max-width: 1120px;
  margin: clamp(28px, 5vw, 52px) auto 0;
  padding: 0 var(--ft-gutter);
}

.ft-panel {
  border: 1px solid var(--ft-line);
  border-radius: 14px;
  background: var(--ft-panel);
  box-shadow: var(--ft-shadow);
  overflow: hidden;
  text-align: left;
}

.ft-panel-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--ft-line);
  background: var(--ft-panel-2);
  font-size: 0.78rem;
  color: var(--ft-ink-dim);
}

.ft-panel-bar b {
  font-weight: 600;
  color: var(--ft-ink);
  font-size: 0.82rem;
}

.ft-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--ft-line);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ft-accent);
}

.ft-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ft-green);
  animation: ft-pulse 1.8s ease-in-out infinite;
}

@keyframes ft-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}

@media (prefers-reduced-motion: reduce) {

  .ft-dot { animation: none; }

}

/* Two-up: the request/response on the left, the till receipt on the right. */
.ft-panel-body {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
}

.ft-panel-code {
  padding: 18px 20px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.79rem;
  line-height: 1.72;
  white-space: pre;
  overflow-x: auto;
  color: var(--ft-ink-dim);
  border-right: 1px solid var(--ft-line);
  background: var(--ft-bg-sunken);
  margin: 0;
}

.ft-panel-code .k { color: var(--ft-accent); }
.ft-panel-code .s { color: var(--ft-ink); }
.ft-panel-code .n { color: var(--ft-pink); }
.ft-panel-code .c { color: var(--ft-slate); opacity: 0.85; }

/* Receipt column -- tabular numbers so the totals column stays aligned. */
.ft-receipt {
  padding: 18px 20px;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
}

.ft-receipt-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ft-ink-dim);
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--ft-line);
}

.ft-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
}

.ft-line span:first-child { color: var(--ft-ink); }
.ft-line span:last-child { color: var(--ft-ink); font-weight: 500; }

.ft-line-note {
  display: block;
  font-size: 0.7rem;
  color: var(--ft-accent);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ft-line-disc span { color: var(--ft-accent) !important; }

.ft-receipt-total {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--ft-line);
  font-size: 1rem;
}

.ft-receipt-total b { font-weight: 600; }
.ft-receipt-total .ft-amount { color: var(--ft-accent); }

.ft-saved {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--ft-ink-dim);
}

@media (max-width: 860px) {

  .ft-panel-body { grid-template-columns: 1fr; }
  .ft-panel-code { border-right: 0; border-bottom: 1px solid var(--ft-line); }

}

/* ----------------------------------------------------------------- trust bar */

.ft-trust {
  padding: clamp(40px, 6vw, 64px) 0 clamp(12px, 2vw, 20px);
  text-align: center;
}

.ft-trust-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ft-ink-dim);
  margin: 0 0 22px;
}

/* Sits inside .ft-wrap so it tracks the page measure rather than bleeding the
   full viewport width, which looked stranded on wide screens. */
.ft-marquee {
  position: relative;
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ft-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ft-scroll 42s linear infinite;
}

/* Two identical groups make the -50% loop seamless. */
.ft-marquee-group {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
}

@keyframes ft-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {

  .ft-marquee-track { animation: none; }

}

/* Customer marks arrive as full-colour SVG in mixed formats -- some line art on
   transparent, some white text in a solid box. Flattening to one ink weight
   keeps the row reading as a single band.

   Dark mode uses grayscale + invert (NOT brightness(0), which crushes
   boxed marks into solid blocks). Verified against all 14 marks. */
.ft-marquee-group img {
  /* The marks are pre-trimmed to their artwork (see _scrape/trim_logos.py), so
     one box gives every mark the same optical weight: a 5:1 wordmark fits to
     the full width, a 1:1 badge fits to the full height. */
  height: 34px;
  width: 104px;
  object-fit: contain;
  object-position: center;
  flex: none;
  opacity: 0.8;
  filter: grayscale(1);
  pointer-events: none;      /* no hover target, no zoom affordance */
  user-select: none;
  transition: opacity 0.18s ease, filter 0.18s ease;
}

:is(.dark, [data-theme="dark"]) .ft-marquee-group img {
  filter: grayscale(1) invert(1);
  opacity: 0.72;
}

/* ------------------------------------------------------------------ sections */

.ft-section { padding: clamp(48px, 7vw, 84px) 0; }

.ft-section-head { max-width: 62ch; margin-bottom: 30px; }

.ft-section-title {
  display: block;
  font-family: var(--typography-heading-font-family, inherit);
  font-weight: var(--ft-display-weight);
  letter-spacing: var(--ft-display-track);
  font-size: clamp(1.65rem, 3.2vw, 2.3rem);
  line-height: 1.14;
  margin: 0 0 12px;
}

.ft-section-title > p {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.ft-section-sub {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ft-ink-dim);
  margin: 0;
}

/* API grid ----------------------------------------------------------------- */

.ft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 14px;
}

.ft-card {
  display: block;
  padding: 20px;
  border: 1px solid var(--ft-line);
  border-radius: 12px;
  background: var(--ft-panel);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease,
              background 0.16s ease;
}

.ft-card:hover {
  border-color: var(--ft-accent);
  background: var(--ft-panel-2);
  box-shadow: var(--ft-shadow);
  text-decoration: none;
}
.ft-card:focus-visible {
  border-color: var(--ft-accent);
  background: var(--ft-panel-2);
  box-shadow: var(--ft-shadow);
  text-decoration: none;
}

.ft-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ft-card-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(0, 199, 123, 0.12);
  color: var(--ft-accent);
  font-size: 0.85rem;
  flex: none;
}

.ft-card h3 {
  font-size: 1.01rem;
  margin: 0;
  color: var(--ft-ink);
}

.ft-card p {
  font-size: 0.875rem;
  line-height: 1.58;
  color: var(--ft-ink-dim);
  margin: 0 0 12px;
}

.ft-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--ft-ink-dim);
}

.ft-tag {
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--ft-line);
  letter-spacing: 0.03em;
}

.ft-tag-dep {
  border-color: rgba(238, 116, 138, 0.5);
  color: var(--ft-pink);
}

/* Stat strip -------------------------------------------------------------- */

.ft-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--ft-line);
  border: 1px solid var(--ft-line);
  border-radius: 12px;
  overflow: hidden;
}

.ft-stat {
  background: var(--ft-panel);
  padding: 22px 20px;
}

.ft-stat b {
  display: block;
  font-family: var(--typography-heading-font-family, inherit);
  font-weight: var(--ft-display-weight);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  letter-spacing: var(--ft-display-track);
  color: var(--ft-accent);
  line-height: 1.1;
}

.ft-stat span {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--ft-ink-dim);
}

/* Split feature ----------------------------------------------------------- */

.ft-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 5vw, 60px);
  align-items: center;
}

@media (max-width: 900px) {

  .ft-split { grid-template-columns: 1fr; }

}

.ft-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.ft-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 0.94rem;
  line-height: 1.58;
  color: var(--ft-ink-dim);
}

.ft-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ft-green);
}

.ft-list li b {
  color: var(--ft-ink);
  font-weight: 600;
}

/* Help-center preview card ------------------------------------------------ */

.ft-toc-preview {
  border: 1px solid var(--ft-line);
  border-radius: 12px;
  background: var(--ft-panel);
  padding: 8px;
  box-shadow: var(--ft-shadow);
}

.ft-toc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 0.87rem;
  color: var(--ft-ink-dim);
}

.ft-toc-row + .ft-toc-row { border-top: 1px solid var(--ft-line); }

.ft-toc-row b {
  color: var(--ft-ink);
  font-weight: 500;
}

.ft-toc-row .ft-count {
  margin-left: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--ft-accent);
}

.ft-toc-row-indent { padding-left: 30px; }

/* Help-center topics carry screenshots at their original width; keep them from
   blowing out the measure. */
.fern-mdx-content img {
  border-radius: 8px;
  border: 1px solid var(--ft-line);
  max-width: 100%;
  height: auto;
}

.ft-video {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--ft-line);
}

/* A tab row containing exactly one tab carries no information. The API
   Reference product needs a `tabs:` entry because Fern only allows `variants:`
   (the API dropdown) on a tab, but that lone tab then repeats the product name
   in a second header row. Hide it while it is alone; adding a second tab brings
   the row back automatically. */
.fern-header-tabs:has(> div > div[role="tablist"] > a:only-child) {
  display: none;
}

/* Same row, mobile/sidebar rendering. */
.fern-header-switchers .fern-header-tabs:has([role="tablist"] > a:only-child) {
  display: none;
}

/* ------------------------------------------------------------------- footer */

.ft-footer {
  border-top: 1px solid var(--ft-line);
  background: var(--ft-bg-sunken);
  padding: 48px 0 32px;
  font-size: 0.875rem;
}

.ft-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 820px) {

  .ft-footer-grid { grid-template-columns: 1fr 1fr; }

}

.ft-footer h4 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ft-ink-dim);
  margin: 0 0 14px;
}

.ft-footer a {
  display: block;
  color: var(--ft-ink-dim);
  text-decoration: none;
  margin-bottom: 9px;
  transition: color 0.14s ease;
}

.ft-footer a:hover { color: var(--ft-accent); text-decoration: none; }
.ft-footer a:focus-visible { color: var(--ft-accent); text-decoration: none; }

.ft-footer-wordmark {
  display: block;
  font-family: var(--typography-heading-font-family, inherit);
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--ft-ink);
  margin-bottom: 12px;
}

.ft-footer-brand p {
  color: var(--ft-ink-dim);
  line-height: 1.6;
  max-width: 34ch;
  margin: 0;
}

.ft-footer-base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--ft-line);
  color: var(--ft-ink-dim);
  font-size: 0.8rem;
}