/*fern-site-stylesheet*/@font-face {
    font-family: 'Poppins';
    src: url('/_fern-files/arkea.docs.buildwithfern.com/3dc5d0c52428fe1696264907a1054ebbaac07f8cbe45832c105f819c2ae397c0/assets/fonts/Poppins-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('/_fern-files/arkea.docs.buildwithfern.com/289e0afc8be731a86822349e54557296f145926496bd2138db1bac0db77f77a2/assets/fonts/Poppins-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('/_fern-files/arkea.docs.buildwithfern.com/872e862918591a9e824dc03ed92f05729435ffbb8ebbb10eff7eda26592b1798/assets/fonts/Poppins-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 704px;
  --sidebar-width: 288px;
  --page-width: 1408px;
  --logo-height: 40px;
  --font-body: 'Poppins', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Poppins', 'Poppins', 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);
}


:root {
  --accent-1: #fffcfc;
  --accent-2: #fff8f7;
  --accent-3: #ffebe7;
  --accent-4: #ffdbd3;
  --accent-5: #ffccc2;
  --accent-6: #ffbbb0;
  --accent-7: #f9a699;
  --accent-8: #f08b7c;
  --accent-9: #da291c;
  --accent-10: #ca0d04;
  --accent-11: #d62418;
  --accent-12: #60221b;

  --accent-a1: #ff000003;
  --accent-a2: #ff200008;
  --accent-a3: #ff2b0018;
  --accent-a4: #ff2f002c;
  --accent-a5: #ff2a003d;
  --accent-a6: #ff24004f;
  --accent-a7: #f0210066;
  --accent-a8: #e21e0083;
  --accent-a9: #d50f00e3;
  --accent-a10: #c90900fb;
  --accent-a11: #d20d00e7;
  --accent-a12: #4d0800e4;

  --accent-contrast: #fff;
  --accent-surface: #fff6f5cc;
  --accent-indicator: #da291c;
  --accent-track: #da291c;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --accent-1: oklch(99.4% 0.0033 29.55);
      --accent-2: oklch(98.4% 0.0079 29.55);
      --accent-3: oklch(95.5% 0.0234 29.55);
      --accent-4: oklch(92.6% 0.0505 29.55);
      --accent-5: oklch(89.3% 0.067 29.55);
      --accent-6: oklch(85.3% 0.082 29.55);
      --accent-7: oklch(80.4% 0.1001 29.55);
      --accent-8: oklch(74.2% 0.1259 29.55);
      --accent-9: oklch(57.5% 0.2126 29.55);
      --accent-10: oklch(53% 0.2126 29.55);
      --accent-11: oklch(56.5% 0.2126 29.55);
      --accent-12: oklch(34.5% 0.0914 29.55);

      --accent-a1: color(display-p3 0.6745 0.0235 0.0235 / 0.012);
      --accent-a2: color(display-p3 0.8784 0.1451 0.0196 / 0.032);
      --accent-a3: color(display-p3 0.8745 0.1843 0.0118 / 0.091);
      --accent-a4: color(display-p3 0.8627 0.1882 0.0039 / 0.169);
      --accent-a5: color(display-p3 0.8667 0.1725 0.0039 / 0.232);
      --accent-a6: color(display-p3 0.8706 0.149 0.0039 / 0.299);
      --accent-a7: color(display-p3 0.8196 0.1451 0.0039 / 0.389);
      --accent-a8: color(display-p3 0.7725 0.1294 0.0039 / 0.499);
      --accent-a9: color(display-p3 0.7412 0.0824 0 / 0.832);
      --accent-a10: color(display-p3 0.6902 0.0627 0 / 0.891);
      --accent-a11: color(display-p3 0.7294 0.0745 0 / 0.844);
      --accent-a12: color(display-p3 0.2627 0.0353 0 / 0.883);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9961 0.9647 0.9608 / 0.8);
      --accent-indicator: oklch(57.5% 0.2126 29.55);
      --accent-track: oklch(57.5% 0.2126 29.55);
    }
  }
}


:root {
  --grayscale-1: #fdfdfc;
  --grayscale-2: #f9f9f8;
  --grayscale-3: #f1f0ef;
  --grayscale-4: #e9e8e6;
  --grayscale-5: #e2e1de;
  --grayscale-6: #dad9d6;
  --grayscale-7: #cfceca;
  --grayscale-8: #bcbbb5;
  --grayscale-9: #8d8d86;
  --grayscale-10: #82827c;
  --grayscale-11: #63635e;
  --grayscale-12: #21201c;

  --grayscale-a1: #55550003;
  --grayscale-a2: #25250007;
  --grayscale-a3: #20100010;
  --grayscale-a4: #1f150019;
  --grayscale-a5: #1f180021;
  --grayscale-a6: #19130029;
  --grayscale-a7: #19140035;
  --grayscale-a8: #1915014a;
  --grayscale-a9: #0f0f0079;
  --grayscale-a10: #0c0c0083;
  --grayscale-a11: #080800a1;
  --grayscale-a12: #060500e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8d8d86;
  --grayscale-track: #8d8d86;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --grayscale-1: color(display-p3 0.992 0.992 0.989);
      --grayscale-2: color(display-p3 0.977 0.977 0.973);
      --grayscale-3: color(display-p3 0.943 0.942 0.936);
      --grayscale-4: color(display-p3 0.913 0.912 0.903);
      --grayscale-5: color(display-p3 0.885 0.883 0.873);
      --grayscale-6: color(display-p3 0.854 0.852 0.839);
      --grayscale-7: color(display-p3 0.813 0.81 0.794);
      --grayscale-8: color(display-p3 0.738 0.734 0.713);
      --grayscale-9: color(display-p3 0.553 0.553 0.528);
      --grayscale-10: color(display-p3 0.511 0.511 0.488);
      --grayscale-11: color(display-p3 0.388 0.388 0.37);
      --grayscale-12: color(display-p3 0.129 0.126 0.111);

      --grayscale-a1: #55550003;
      --grayscale-a2: #25250007;
      --grayscale-a3: #20100010;
      --grayscale-a4: #1f150019;
      --grayscale-a5: #1f180021;
      --grayscale-a6: #19130029;
      --grayscale-a7: #19140035;
      --grayscale-a8: #1915014a;
      --grayscale-a9: #0f0f0079;
      --grayscale-a10: #0c0c0083;
      --grayscale-a11: #080800a1;
      --grayscale-a12: #060500e3;

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


.dark {
  --accent-1: #000;
  --accent-2: #121211;
  --accent-3: #1f1f1d;
  --accent-4: #282826;
  --accent-5: #30302e;
  --accent-6: #3a3a37;
  --accent-7: #484845;
  --accent-8: #60605e;
  --accent-9: #fff;
  --accent-10: #f6f6f4;
  --accent-11: #b3b3b0;
  --accent-12: #eeeeec;

  --accent-a1: #00000000;
  --accent-a2: #fffff112;
  --accent-a3: #ffffef1f;
  --accent-a4: #fffff328;
  --accent-a5: #fffff530;
  --accent-a6: #fffff23a;
  --accent-a7: #fffff548;
  --accent-a8: #fffffa60;
  --accent-a9: #ffffff;
  --accent-a10: #fffffdf6;
  --accent-a11: #fffffbb3;
  --accent-a12: #fffffdee;

  --accent-contrast: #311921;
  --accent-surface: #24242280;
  --accent-indicator: #fff;
  --accent-track: #fff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.0023 106.5);
      --accent-2: oklch(18.3% 0.0022 106.5);
      --accent-3: oklch(23.9% 0.0032 106.5);
      --accent-4: oklch(27.5% 0.0036 106.5);
      --accent-5: oklch(30.8% 0.004 106.5);
      --accent-6: oklch(34.7% 0.004 106.5);
      --accent-7: oklch(40% 0.004 106.5);
      --accent-8: oklch(49% 0.004 106.5);
      --accent-9: oklch(100% 0 none);
      --accent-10: oklch(97.3% 0.0027 106.5);
      --accent-11: oklch(76.7% 0.004 106.5);
      --accent-12: oklch(94.8% 0.0027 106.5);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.9961 0.9961 0.9412 / 0.071);
      --accent-a3: color(display-p3 1 1 0.9333 / 0.122);
      --accent-a4: color(display-p3 1 1 0.9529 / 0.157);
      --accent-a5: color(display-p3 0.9961 0.9961 0.9569 / 0.189);
      --accent-a6: color(display-p3 1 1 0.949 / 0.228);
      --accent-a7: color(display-p3 1 1 0.9569 / 0.283);
      --accent-a8: color(display-p3 1 1 0.9804 / 0.377);
      --accent-a9: color(display-p3 1 1 1);
      --accent-a10: color(display-p3 1 1 0.9922 / 0.965);
      --accent-a11: color(display-p3 1 1 0.9843 / 0.702);
      --accent-a12: color(display-p3 1 1 0.9922 / 0.934);

      --accent-contrast: #311921;
      --accent-surface: color(display-p3 0.1412 0.1412 0.1333 / 0.5);
      --accent-indicator: oklch(100% 0 none);
      --accent-track: oklch(100% 0 none);
    }
  }
}


.dark {
  --grayscale-1: #111110;
  --grayscale-2: #191918;
  --grayscale-3: #222221;
  --grayscale-4: #2a2a28;
  --grayscale-5: #31312e;
  --grayscale-6: #3b3a37;
  --grayscale-7: #494844;
  --grayscale-8: #62605b;
  --grayscale-9: #6f6d66;
  --grayscale-10: #7c7b74;
  --grayscale-11: #b5b3ad;
  --grayscale-12: #eeeeec;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f4f4f309;
  --grayscale-a3: #f6f6f513;
  --grayscale-a4: #fefef31b;
  --grayscale-a5: #fbfbeb23;
  --grayscale-a6: #fffaed2d;
  --grayscale-a7: #fffbed3c;
  --grayscale-a8: #fff9eb57;
  --grayscale-a9: #fffae965;
  --grayscale-a10: #fffdee73;
  --grayscale-a11: #fffcf4b0;
  --grayscale-a12: #fffffded;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.063);
      --grayscale-2: color(display-p3 0.098 0.098 0.094);
      --grayscale-3: color(display-p3 0.135 0.135 0.129);
      --grayscale-4: color(display-p3 0.164 0.163 0.156);
      --grayscale-5: color(display-p3 0.193 0.192 0.183);
      --grayscale-6: color(display-p3 0.23 0.229 0.217);
      --grayscale-7: color(display-p3 0.285 0.282 0.267);
      --grayscale-8: color(display-p3 0.384 0.378 0.357);
      --grayscale-9: color(display-p3 0.434 0.428 0.403);
      --grayscale-10: color(display-p3 0.487 0.481 0.456);
      --grayscale-11: color(display-p3 0.707 0.703 0.68);
      --grayscale-12: color(display-p3 0.933 0.933 0.926);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f4f4f309;
      --grayscale-a3: #f6f6f513;
      --grayscale-a4: #fefef31b;
      --grayscale-a5: #fbfbeb23;
      --grayscale-a6: #fffaed2d;
      --grayscale-a7: #fffbed3c;
      --grayscale-a8: #fff9eb57;
      --grayscale-a9: #fffae965;
      --grayscale-a10: #fffdee73;
      --grayscale-a11: #fffcf4b0;
      --grayscale-a12: #fffffded;

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

:root {
  color-scheme: light;
  --accent: rgba(218, 41, 28, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(227, 231, 240, 1);
  --sidebar-background: rgba(255, 255, 255, 1);
  --header-background: rgba(243, 244, 246, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: light;
  --background: #000000;
  --accent: #ffffff;
}

/* =========================================================================
   Arkéa developer portal — custom landing + products + footer styles
   Brand: red #DA291C, navy #1F2937, Poppins, sharp 2px buttons
   ========================================================================= */

:root {
  --ark-red: #da291c;
  --ark-red-dark: #b81f14;
  --ark-navy: #1f2937;
  --ark-ink: #111827;
  --ark-slate: #4b5563;
  --ark-line: #e3e7f0;
  --ark-gray-100: #f3f4f6;
}

/* ---- shared layout ---- */
.ark-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- buttons: sharp 2px corners like getarkea.com ---- */
.ark-btn {
  display: inline-block;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  padding: 14px 28px;
  border-radius: 2px;
  text-decoration: none !important;
  transition: background-color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.ark-btn--primary {
  background: var(--ark-red);
  color: #fff !important;
}
.ark-btn--primary:hover {
  background: var(--ark-red-dark);
}
.ark-btn--primary:focus-visible {
  background: var(--ark-red-dark); outline: none;
}
.ark-btn--ghost {
  background: transparent;
  color: var(--ark-red) !important;
  padding: 0;
  border-radius: 0;
  font-weight: 500;
}
.ark-btn--ghost::after { content: " →"; }
.ark-btn--ghost:hover { color: var(--ark-red-dark) !important; }
.ark-btn--ghost:focus-visible { color: var(--ark-red-dark) !important; outline: none;
}

/* =========================================================================
   Landing page
   ========================================================================= */
.ark-home { font-family: Poppins, sans-serif; color: var(--ark-ink); }
.ark-home section { padding: 72px 0; }

/* hero — full-bleed light-gray band with animated scroll arrow */
.ark-hero {
  position: relative;
  background: var(--ark-gray-100);
  padding: 96px 0 132px;
}
.ark-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.ark-hero-title {
  font-size: 56px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--ark-ink);
}
.ark-hero-copy {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ark-slate);
  margin: 0 0 32px;
  max-width: 460px;
}
.ark-hero-img { width: 100%; height: auto; }

/* animated 3-chevron scroll-down arrow (mirrors getarkea.com .arrows) */
.ark-arrows {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 60px;
  height: 72px;
  margin-left: -30px;
  transform: scale(0.9);
}
.ark-arrows path {
  stroke: var(--ark-red);
  fill: transparent;
  stroke-width: 1px;
  animation: ark-arrow 2s ease infinite;
}
.ark-arrows path.arrow1 { animation-delay: -1s; }
.ark-arrows path.arrow2 { animation-delay: -0.5s; }
.ark-arrows path.arrow3 { animation-delay: 0s; }
@keyframes ark-arrow {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  80%  { opacity: 0; }
  100% { opacity: 0; }
}

/* generic two-column feature rows */
.ark-feature-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 56px;
  align-items: center;
}
.ark-feature-inner.reverse { grid-template-columns: 0.8fr 1.2fr; }
.ark-feature-inner.reverse .ark-feature-media { order: -1; }
.ark-section-title {
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--ark-ink);
}
.ark-section-copy {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ark-slate);
  margin: 0 0 20px;
}
.ark-feature-media img { width: 100%; height: auto; }
.ark-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.ark-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 16px;
  color: var(--ark-slate);
}
.ark-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 10px;
  background: var(--ark-red);
  border-radius: 2px;
}

/* dark "Detailed resources" section */
.ark-dark {
  background: var(--ark-navy);
  color: #fff;
}
.ark-dark .ark-section-title,
.ark-dark .ark-section-copy { color: #fff; }
.ark-dark .ark-btn--ghost { color: #fff !important; }

/* =========================================================================
   Products page
   ========================================================================= */
.ark-products { font-family: Poppins, sans-serif; color: var(--ark-ink); }
.ark-products-hero {
  background: var(--ark-gray-100);
  padding: 72px 0;
}
.ark-products-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.ark-products-hero h1 {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--ark-ink);
}
.ark-products-hero p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ark-slate);
  margin: 0;
  max-width: 480px;
}
.ark-products-hero img { width: 100%; height: auto; }
.ark-products-body { padding: 72px 0; }
.ark-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ark-product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ark-line);
  border-radius: 4px;
  padding: 28px;
  background: #fff;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  text-decoration: none !important;
}
.ark-product-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.ark-product-card:focus-visible {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px); outline: none;
}
.ark-product-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 16px;
}
.ark-product-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ark-red);
  margin-bottom: 12px;
}
.ark-product-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ark-ink);
}
.ark-product-card p {
  font-size: 15px;
  color: var(--ark-slate);
  line-height: 1.6;
  margin: 0 0 20px;
  flex: 1;
}
.ark-product-cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--ark-red);
}
.ark-product-cta::after { content: " →"; }

/* =========================================================================
   CTA banner (overlapping card) + footer
   ========================================================================= */
.ark-footer-wrap { font-family: Poppins, sans-serif; }

.ark-cta {
  position: relative;
  background: #fff;
  padding-top: 24px;
}
.ark-cta-card {
  position: relative;
  z-index: 2;
  max-width: 1104px;
  margin: 0 auto -80px;      /* dip into the navy footer below */
  padding: 44px 56px;
  border-radius: 8px;
  background-color: #eef2f7;
  background-image: url(cta-wave.svg);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover;
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
}
.ark-cta-copy h2 {
  font-family: Poppins, sans-serif;
  font-size: 30px;
  font-weight: 600;
  margin: 0;
  color: var(--ark-ink);
}
.ark-cta-copy p {
  font-size: 30px;
  font-weight: 600;
  margin: 0;
  color: var(--ark-red);
}

.ark-site-footer {
  background: var(--ark-navy);
  color: #fff;
  padding: 128px 0 32px;      /* top padding leaves room for the overlap */
  font-family: Poppins, sans-serif;
}
.ark-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.ark-footer-col label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 16px;
  font-weight: 500;
}
.ark-footer-col ul { list-style: none; padding: 0; margin: 0; }
.ark-footer-col li { margin-bottom: 10px; }
.ark-footer-col a {
  color: #e5e7eb !important;
  text-decoration: none !important;
  font-size: 14px;
}
.ark-footer-col a:hover { color: #fff !important; }
.ark-footer-col a:focus-visible { color: #fff !important; outline: none;
}

.ark-footer-bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.ark-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
}
.ark-footer-social:hover { background: var(--ark-red); }
.ark-footer-social:focus-visible { background: var(--ark-red); outline: none;
}
.ark-footer-legal {
  flex: 1;
  margin: 0;
  font-size: 13px;
  color: #9ca3af;
}

/* The custom footer carries its own "Built with Fern" badge, so suppress
   Fern's default standalone one. Fern sets `#builtwithfern { display:flex }`
   with !important at equal specificity, so the extra `body` qualifier wins. */
body #builtwithfern {
  display: none !important;
}

/* Remove the header's bottom divider so the navbar blends into the hero band. */
body header {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Language selector: kill the accent-colored focus ring/box when selected. */
.fern-language-selector,
.fern-language-selector:focus,
.fern-language-selector:focus-visible,
.language-dropdown-trigger:focus,
.language-dropdown-trigger:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
}

/* Show short codes (EN / FR) on the selector button instead of full names. */
.language-dropdown-trigger > span { font-size: 0 !important; }
.language-dropdown-trigger > span::after {
  font-size: 14px;
  font-weight: 500;
}
:root[lang="en"] .language-dropdown-trigger > span::after,
html[lang="en"] .language-dropdown-trigger > span::after { content: "EN"; }
:root[lang="fr"] .language-dropdown-trigger > span::after,
html[lang="fr"] .language-dropdown-trigger > span::after { content: "FR"; }

/* Footer localization: toggle EN/FR label pairs by document language. */
.ark-fr { display: none; }
html[lang="fr"] .ark-en { display: none; }
html[lang="fr"] .ark-fr { display: inline; }

/* Navbar-link localization. Fern (localization is in beta) prefixes the link
   URLs with /fr but leaves the label text in English, so translate the labels
   via CSS on the French site — matched by stable href / button class. */
html[lang="fr"] header a[href$="/products"] .fern-button-text,
html[lang="fr"] header a[href$="/get-started"] .fern-button-text,
html[lang="fr"] header a[href$="/use-cases"] .fern-button-text {
  font-size: 0 !important;
}
html[lang="fr"] header a[href$="/products"] .fern-button-text::after,
html[lang="fr"] header a[href$="/get-started"] .fern-button-text::after,
html[lang="fr"] header a[href$="/use-cases"] .fern-button-text::after {
  font-size: 14px;
  font-weight: inherit;
}
html[lang="fr"] header a[href$="/products"] .fern-button-text::after { content: "Produits"; }
html[lang="fr"] header a[href$="/get-started"] .fern-button-text::after { content: "Commencer"; }
html[lang="fr"] header a[href$="/use-cases"] .fern-button-text::after { content: "Cas d'usage"; }

/* "Built with Fern" badge (bottom-right of the footer) */
.ark-footer-fern {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  white-space: nowrap;
  color: #9ca3af !important;
  transition: color 0.15s ease;
}
.ark-footer-fern:hover { color: #3ecf8e !important; }
.ark-footer-fern:focus-visible { color: #3ecf8e !important; outline: none;
}
.ark-footer-fern-label { font-size: 13px; }
.ark-footer-fern-logo {
  height: 13px;
  width: auto;
  display: block;
  fill: currentColor;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {

  .ark-hero-inner,
  .ark-products-hero-inner,
  .ark-feature-inner,
  .ark-feature-inner.reverse { grid-template-columns: 1fr; }
  .ark-feature-inner.reverse .ark-feature-media { order: 0; }
  .ark-hero-title { font-size: 40px; }
  .ark-products-grid { grid-template-columns: 1fr; }
  .ark-footer-cols { grid-template-columns: repeat(2, 1fr); }
  .ark-cta-card { flex-direction: column; text-align: center; margin-bottom: -60px; }

}

/* =========================================================================
   API marketplace (components/ApiMarketplace.tsx)
   ========================================================================= */
.ark-mkt {
  font-family: Poppins, sans-serif;
  color: var(--ark-ink);
}

/* ---- Postman callout ---- */
.ark-mkt-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 32px;
  padding: 18px 22px;
  border: 1px solid var(--ark-line);
  border-radius: 2px;
  background: var(--ark-gray-100);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ark-mkt-callout.is-active {
  border-color: #ff6c37;
  background: #fff7f4;
}
.ark-mkt-callout-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ark-mkt-callout-icon {
  display: inline-flex;
  color: #ff6c37;
}
.ark-mkt-callout-text {
  display: flex;
  flex-direction: column;
}
.ark-mkt-callout-title {
  font-weight: 600;
  font-size: 15px;
}
.ark-mkt-callout-sub {
  font-size: 14px;
  color: var(--ark-slate);
}
.ark-mkt-callout-btn {
  flex: none;
  font-family: inherit;
  font-weight: 500;
  font-size: 15px;
  padding: 12px 22px;
  border: 0;
  border-radius: 2px;
  background: #ff6c37;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.ark-mkt-callout-btn:hover:not(:disabled) { background: #f45d24; }
.ark-mkt-callout-btn:focus-visible:not(:disabled) { background: #f45d24; outline: none;
}
.ark-mkt-callout-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
}

/* ---- card grid ---- */
.ark-mkt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ark-mkt-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--ark-line);
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ark-mkt-card:hover {
  border-color: var(--ark-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
}
.ark-mkt-card:focus-visible {
  border-color: var(--ark-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08); outline: none;
}
.ark-mkt-card.is-selected {
  border-color: var(--ark-red);
  box-shadow: inset 0 0 0 1px var(--ark-red);
}
.ark-mkt-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ark-mkt-icon { color: var(--ark-red); }
.ark-mkt-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ark-line);
  border-radius: 2px;
  color: #fff;
}
.ark-mkt-card.is-selected .ark-mkt-check {
  background: var(--ark-red);
  border-color: var(--ark-red);
}
.ark-mkt-card-body h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}
.ark-mkt-card-body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ark-slate);
  margin: 0;
}
.ark-mkt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ark-mkt-tags li {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 2px;
  background: var(--ark-gray-100);
  color: var(--ark-slate);
}
.ark-mkt-tag-count { font-weight: 500; }
.ark-mkt-ref {
  margin-top: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--ark-red) !important;
  text-decoration: none !important;
}
.ark-mkt-ref:hover { color: var(--ark-red-dark) !important; }
.ark-mkt-ref:focus-visible { color: var(--ark-red-dark) !important; outline: none;
}

@media (max-width: 900px) {

  .ark-mkt-grid { grid-template-columns: 1fr; }
  .ark-mkt-callout { flex-direction: column; align-items: flex-start; }

}

/* =========================================================================
   Sign-in screen (pages/sign-in.mdx)

   The page is served by the docs site, so the site header, sidebar, and
   footer are hidden while it is on screen to make it read as its own auth
   screen. `:has()` scopes every rule to this one page.
   ========================================================================= */
body:has(.ark-auth) header,
body:has(.ark-auth) footer,
body:has(.ark-auth) aside,
body:has(.ark-auth) .fern-sidebar-container,
body:has(.ark-auth) .fern-header-container {
  display: none !important;
}

.ark-auth {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #F5F6F8;
}

.ark-auth-card {
  width: 100%;
  max-width: 420px;
  padding: 40px;
  background: #FFFFFF;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.08);
  text-align: center;
}

.ark-auth-logo {
  height: 36px;
  margin: 0 auto 28px;
}

.ark-auth h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ark-ink);
}

.ark-auth-lede {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ark-slate);
  margin: 0 0 28px;
}

.ark-auth-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.ark-auth-choice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ark-auth-choice:hover {
  border-color: var(--ark-red);
  background: rgba(218, 41, 28, 0.04);
}
.ark-auth-choice:focus-visible {
  border-color: var(--ark-red);
  background: rgba(218, 41, 28, 0.04); outline: none;
}

.ark-auth-choice-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ark-ink);
}

.ark-auth-choice-scope {
  font-size: 13px;
  color: var(--ark-slate);
}

.ark-auth-choice svg,
.ark-auth-foot svg {
  display: none;
}

.ark-auth-foot {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ark-slate);
  margin: 24px 0 0;
}

/* =========================================================================
   Endpoint dropdown on the marketplace cards
   ========================================================================= */
.ark-mkt-endpoints {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ark-mkt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border: 1px solid var(--ark-line);
  border-radius: 2px;
  background: #fff;
  color: var(--ark-slate);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ark-mkt-toggle:hover {
  border-color: var(--ark-red);
  color: var(--ark-red);
}
.ark-mkt-toggle:focus-visible {
  border-color: var(--ark-red);
  color: var(--ark-red); outline: none;
}
.ark-mkt-toggle svg { transition: transform 0.15s ease; }
.ark-mkt-toggle.is-open svg { transform: rotate(180deg); }

.ark-mkt-endpoint-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ark-line);
  border-radius: 2px;
}
.ark-mkt-endpoint-list li + li { border-top: 1px solid var(--ark-line); }
.ark-mkt-endpoint-list a {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 4px 10px;
  padding: 10px 12px;
  text-decoration: none !important;
  color: inherit !important;
}
.ark-mkt-endpoint-list a:hover { background: var(--ark-gray-100); }
.ark-mkt-endpoint-list a:focus-visible { background: var(--ark-gray-100); outline: none;
}
.ark-mkt-method {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 3px 0;
  border-radius: 2px;
  color: #fff;
  align-self: start;
}
.ark-mkt-method.is-get { background: #2563eb; }
.ark-mkt-method.is-post { background: #059669; }
.ark-mkt-method.is-patch,
.ark-mkt-method.is-put { background: #d97706; }
.ark-mkt-method.is-delete { background: var(--ark-red); }
.ark-mkt-endpoint-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--ark-ink);
  word-break: break-all;
}
.ark-mkt-endpoint-summary {
  grid-column: 2;
  font-size: 12px;
  color: var(--ark-slate);
}

/* =========================================================================
   Get started flow (pages/get-started.mdx)
   ========================================================================= */
.ark-flow {
  font-family: Poppins, sans-serif;
  color: var(--ark-ink);
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
.ark-flow-head { margin-bottom: 48px; }
.ark-flow-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ark-red);
  margin-bottom: 10px;
}
.ark-flow-head h1 {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.ark-flow-head p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ark-slate);
  margin: 0;
  max-width: 620px;
}

.ark-flow-step { padding-bottom: 48px; }
.ark-flow-num {
  display: block;
  font-size: 26px;
  font-weight: 600;
  color: var(--ark-ink);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ark-line);
}
.ark-flow-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding-top: 22px;
}
.ark-flow-text { max-width: 520px; }
.ark-flow-text h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px;
}
.ark-flow-text p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ark-slate);
  margin: 0 0 18px;
}
.ark-flow-btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 2px;
  background: var(--ark-red);
  color: #fff !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease;
}
.ark-flow-btn:hover { background: var(--ark-red-dark); }
.ark-flow-btn:focus-visible { background: var(--ark-red-dark); outline: none;
}
.ark-flow-icon {
  flex: none;
  display: block;
  width: 44px;
  height: 44px;
  color: var(--ark-red);
}
.ark-flow-icon svg { width: 100%; height: 100%; }
.ark-flow-step.is-last { padding-bottom: 0; }
.ark-flow-embed { margin-top: 8px; }

/* The embedded marketplace is a step in the flow, so it drops its own page
   padding and heading (see the `embedded` prop on ApiMarketplace). */
@media (max-width: 900px) {

  .ark-flow-head h1 { font-size: 32px; }
  .ark-flow-body { flex-direction: column-reverse; align-items: flex-start; }

}