/*fern-site-stylesheet*/@font-face {
    font-family: 'TWKLausannePan';
    src: url('/_fern-files/trustly.docs.buildwithfern.com/19db5afa06fe7a1e6ded0664fac85fb6cb86248966a51778164ce29ab3fa7c2a/docs/assets/TWKLausannePan-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TWKLausannePan';
    src: url('/_fern-files/trustly.docs.buildwithfern.com/092397513df9cbc8e0fb51265d859db186820ea31813a04e8361ee314b033470/docs/assets/TWKLausannePan-550.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TWKLausannePan';
    src: url('/_fern-files/trustly.docs.buildwithfern.com/092397513df9cbc8e0fb51265d859db186820ea31813a04e8361ee314b033470/docs/assets/TWKLausannePan-550.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TWKLausannePan';
    src: url('/_fern-files/trustly.docs.buildwithfern.com/092397513df9cbc8e0fb51265d859db186820ea31813a04e8361ee314b033470/docs/assets/TWKLausannePan-550.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TWKLausannePan';
    src: url('/_fern-files/trustly.docs.buildwithfern.com/18aed19ee7d8c92e327a2f091d0207b10815c95fc1a361a9cac49e7465b9144b/docs/assets/TWKLausannePan-250.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TWKLausannePan';
    src: url('/_fern-files/trustly.docs.buildwithfern.com/19db5afa06fe7a1e6ded0664fac85fb6cb86248966a51778164ce29ab3fa7c2a/docs/assets/TWKLausannePan-400.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TWKLausannePan';
    src: url('/_fern-files/trustly.docs.buildwithfern.com/092397513df9cbc8e0fb51265d859db186820ea31813a04e8361ee314b033470/docs/assets/TWKLausannePan-550.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBMPlexMono';
    src: url('/_fern-files/trustly.docs.buildwithfern.com/f5e0e7b367a02ac91b9f0e0e4aff131b2ca350471d48d7c9e46d5791bf59c430/docs/assets/IBMPlexMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 42px;
  --font-body: 'TWKLausannePan', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'TWKLausannePan', 'TWKLausannePan', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'IBMPlexMono', 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: #fcfdfc;
  --accent-2: #f7faf7;
  --accent-3: #eef2ee;
  --accent-4: #e6eae6;
  --accent-5: #dee2de;
  --accent-6: #d6dbd6;
  --accent-7: #cbd0cb;
  --accent-8: #b7bdb7;
  --accent-9: #576057;
  --accent-10: #495249;
  --accent-11: #5d665d;
  --accent-12: #1a221a;

  --accent-a1: #00550003;
  --accent-a2: #00600008;
  --accent-a3: #003c0011;
  --accent-a4: #00290019;
  --accent-a5: #001f0021;
  --accent-a6: #00200029;
  --accent-a7: #00190034;
  --accent-a8: #00160048;
  --accent-a9: #000e00a8;
  --accent-a10: #000d00b6;
  --accent-a11: #000e00a2;
  --accent-a12: #000900e5;

  --accent-contrast: #fff;
  --accent-surface: #f5f9f5cc;
  --accent-indicator: #576057;
  --accent-track: #576057;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.3% 0.0025 145.3);
      --accent-2: oklch(98.3% 0.0054 145.3);
      --accent-3: oklch(95.6% 0.0059 145.3);
      --accent-4: oklch(93.2% 0.0068 145.3);
      --accent-5: oklch(90.9% 0.0074 145.3);
      --accent-6: oklch(88.6% 0.0091 145.3);
      --accent-7: oklch(85.2% 0.0092 145.3);
      --accent-8: oklch(79.2% 0.0116 145.3);
      --accent-9: oklch(47.8% 0.0181 145.3);
      --accent-10: oklch(42.6% 0.0181 145.3);
      --accent-11: oklch(50% 0.0181 145.3);
      --accent-12: oklch(24.2% 0.0181 145.3);

      --accent-a1: color(display-p3 0.0235 0.349 0.0235 / 0.012);
      --accent-a2: color(display-p3 0.1451 0.3882 0.0196 / 0.032);
      --accent-a3: color(display-p3 0.0667 0.2392 0.0078 / 0.067);
      --accent-a4: color(display-p3 0.051 0.1686 0.0118 / 0.099);
      --accent-a5: color(display-p3 0.0353 0.1255 0.0078 / 0.13);
      --accent-a6: color(display-p3 0.0275 0.1255 0.0039 / 0.161);
      --accent-a7: color(display-p3 0.0196 0.098 0.0039 / 0.204);
      --accent-a8: color(display-p3 0.0196 0.0863 0.0039 / 0.283);
      --accent-a9: color(display-p3 0.0078 0.0471 0 / 0.655);
      --accent-a10: color(display-p3 0.0078 0.0431 0 / 0.71);
      --accent-a11: color(display-p3 0.0078 0.051 0 / 0.632);
      --accent-a12: color(display-p3 0.0039 0.0314 0 / 0.895);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9647 0.9765 0.9608 / 0.8);
      --accent-indicator: oklch(47.8% 0.0181 145.3);
      --accent-track: oklch(47.8% 0.0181 145.3);
    }
  }
}


.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: #060706;
  --accent-2: #161716;
  --accent-3: #1f221f;
  --accent-4: #262b26;
  --accent-5: #2e332e;
  --accent-6: #373e37;
  --accent-7: #444e44;
  --accent-8: #596759;
  --accent-9: #bed0be;
  --accent-10: #b4c6b4;
  --accent-11: #abbdab;
  --accent-12: #e3ede3;

  --accent-a1: #01070125;
  --accent-a2: #e8f7e811;
  --accent-a3: #e2fde21c;
  --accent-a4: #d8f9d826;
  --accent-a5: #e0fbe02e;
  --accent-a6: #defede39;
  --accent-a7: #dafcda4a;
  --accent-a8: #dbffdb63;
  --accent-a9: #e9ffe9cf;
  --accent-a10: #e7fee7c5;
  --accent-a11: #e5fee5bc;
  --accent-a12: #f4fff4ed;

  --accent-contrast: #152715;
  --accent-surface: #25272580;
  --accent-indicator: #bed0be;
  --accent-track: #bed0be;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(12.9% 0.0044 145.3);
      --accent-2: oklch(20.4% 0.0046 145.3);
      --accent-3: oklch(24.8% 0.0072 145.3);
      --accent-4: oklch(28.2% 0.0097 145.3);
      --accent-5: oklch(31.5% 0.0127 145.3);
      --accent-6: oklch(35.6% 0.0162 145.3);
      --accent-7: oklch(41.1% 0.021 145.3);
      --accent-8: oklch(49.6% 0.0273 145.3);
      --accent-9: oklch(83.9% 0.0314 145.3);
      --accent-10: oklch(80.7% 0.0314 145.3);
      --accent-11: oklch(77.9% 0.0314 145.3);
      --accent-12: oklch(93.5% 0.0171 145.3);

      --accent-a1: color(display-p3 0.0039 0.0314 0.0039 / 0.143);
      --accent-a2: color(display-p3 0.9333 0.9922 0.9333 / 0.065);
      --accent-a3: color(display-p3 0.9294 1 0.8941 / 0.109);
      --accent-a4: color(display-p3 0.8902 0.9961 0.8627 / 0.146);
      --accent-a5: color(display-p3 0.9098 1 0.8902 / 0.178);
      --accent-a6: color(display-p3 0.8941 1 0.8941 / 0.222);
      --accent-a7: color(display-p3 0.8902 1 0.8784 / 0.287);
      --accent-a8: color(display-p3 0.8902 1 0.8667 / 0.388);
      --accent-a9: color(display-p3 0.9333 1 0.9255 / 0.807);
      --accent-a10: color(display-p3 0.9255 0.9961 0.9176 / 0.767);
      --accent-a11: color(display-p3 0.9255 1 0.9137 / 0.73);
      --accent-a12: color(display-p3 0.9647 0.9961 0.9608 / 0.928);

      --accent-contrast: #152715;
      --accent-surface: color(display-p3 0.1412 0.149 0.1412 / 0.5);
      --accent-indicator: oklch(83.9% 0.0314 145.3);
      --accent-track: oklch(83.9% 0.0314 145.3);
    }
  }
}


.dark {
  --grayscale-1: #111111;
  --grayscale-2: #191919;
  --grayscale-3: #222222;
  --grayscale-4: #2a2a2a;
  --grayscale-5: #313131;
  --grayscale-6: #3a3a3a;
  --grayscale-7: #484848;
  --grayscale-8: #606060;
  --grayscale-9: #6e6e6e;
  --grayscale-10: #7b7b7b;
  --grayscale-11: #b4b4b4;
  --grayscale-12: #eeeeee;

  --grayscale-a1: #00000000;
  --grayscale-a2: #ffffff09;
  --grayscale-a3: #ffffff12;
  --grayscale-a4: #ffffff1b;
  --grayscale-a5: #ffffff22;
  --grayscale-a6: #ffffff2c;
  --grayscale-a7: #ffffff3b;
  --grayscale-a8: #ffffff55;
  --grayscale-a9: #ffffff64;
  --grayscale-a10: #ffffff72;
  --grayscale-a11: #ffffffaf;
  --grayscale-a12: #ffffffed;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.067);
      --grayscale-2: color(display-p3 0.098 0.098 0.098);
      --grayscale-3: color(display-p3 0.135 0.135 0.135);
      --grayscale-4: color(display-p3 0.163 0.163 0.163);
      --grayscale-5: color(display-p3 0.192 0.192 0.192);
      --grayscale-6: color(display-p3 0.228 0.228 0.228);
      --grayscale-7: color(display-p3 0.283 0.283 0.283);
      --grayscale-8: color(display-p3 0.375 0.375 0.375);
      --grayscale-9: color(display-p3 0.431 0.431 0.431);
      --grayscale-10: color(display-p3 0.484 0.484 0.484);
      --grayscale-11: color(display-p3 0.706 0.706 0.706);
      --grayscale-12: color(display-p3 0.933 0.933 0.933);

      --grayscale-a1: #00000000;
      --grayscale-a2: #ffffff09;
      --grayscale-a3: #ffffff12;
      --grayscale-a4: #ffffff1b;
      --grayscale-a5: #ffffff22;
      --grayscale-a6: #ffffff2c;
      --grayscale-a7: #ffffff3b;
      --grayscale-a8: #ffffff55;
      --grayscale-a9: #ffffff64;
      --grayscale-a10: #ffffff72;
      --grayscale-a11: #ffffffaf;
      --grayscale-a12: #ffffffed;

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

.light, :root {
  color-scheme: light;
  --accent: rgba(87, 96, 87, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(190, 208, 190, 1);
  --background: rgba(7, 7, 7, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #070707;
}

/* Product Switcher Toggle Theme */
:root [data-product-switcher-theme="toggle"] .fern-product-selector {
  background-color: var(--grayscale-3);
  border-radius: 9999px;
  padding: 4px;
  gap: 4px;
  height: 36px;
  align-items: center;
}

:root [data-product-switcher-theme="toggle"] .fern-product-selector .product-dropdown-trigger {
  padding: 2px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  background-color: transparent;
  color: var(--grayscale-11);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  white-space: nowrap;
  display: flex;
  align-items: center;
  text-decoration: none;
  height: 100%;
}

:root [data-product-switcher-theme="toggle"] .fern-product-selector .product-dropdown-trigger:not([data-active="true"]):hover {
  background-color: var(--grayscale-4);
}

:root [data-product-switcher-theme="toggle"] .fern-product-selector[data-state="open"] .product-dropdown-trigger,
:root [data-product-switcher-theme="toggle"] .fern-product-selector .product-dropdown-trigger[data-active="true"] {
  background-color: var(--background);
  color: var(--grayscale-12);
}

:root [data-product-switcher-theme="toggle"] .fern-product-selector .product-dropdown-trigger:not([data-active="true"]):focus-visible {
  background-color: var(--grayscale-4);
  outline: none;
}

.dark [data-product-switcher-theme="toggle"] .fern-product-selector {
  background-color: var(--grayscale-4);
}

.dark [data-product-switcher-theme="toggle"] .fern-product-selector .product-dropdown-trigger:not([data-active="true"]):hover {
  background-color: var(--grayscale-5);
}
.dark [data-product-switcher-theme="toggle"] .fern-product-selector .product-dropdown-trigger:not([data-active="true"]):focus-visible {
  background-color: var(--grayscale-5); outline: none;
}

.dark [data-product-switcher-theme="toggle"] .fern-product-selector[data-state="open"] .product-dropdown-trigger,
.dark [data-product-switcher-theme="toggle"] .fern-product-selector .product-dropdown-trigger[data-active="true"] {
  background-color: var(--grayscale-6);
}

/* Trustly Brand Overrides */

/* ─── Header ─── */
#fern-header {
  background: var(--background) !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--grayscale-a3);
}

/* On the landing page, align the header (logo + actions) with the landing
   content, which is inset 80px (24px on narrow screens) by .landing-hero. */
body:has(.landing-hero) .fern-header-content {
  padding-left: 80px !important;
  padding-right: 80px !important;
}

.fern-logo-text {
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-left: 8px !important;
  color: var(--grayscale-12) !important;
}
/* ─── Product Switcher (toggle pills) ─── */
/* Match the Business/Personal switcher on trustly.com: a pill container
   outlined in brand sage, with the active option filled sage + near-black
   text. Inactive text keeps the theme's default header color for contrast. */
.fern-product-selector {
  background: transparent !important;
  border: 1px solid #dbe5db !important;
}
.fern-product-selector .product-dropdown-trigger[aria-current="page"] {
  background: #dbe5db !important;
  color: #070707 !important;
}
.fern-product-selector .product-dropdown-trigger:not([aria-current="page"]) {
  background: transparent !important;
}
/* Language switcher */
.language-dropdown-trigger {
  box-shadow: none !important;
}

/* ─── Sidebar ─── */
.fern-sidebar-desktop {
  background: #ffffff;
  border-right: 1px solid var(--grayscale-a3);
}

:root.dark .fern-sidebar-desktop {
  background: var(--background);
}

/* Add left gutter so expand carets can hang without shifting text */
.fern-sidebar-group.space-y-6 {
  padding-left: 16px !important;
}

/* Sidebar links */
.fern-sidebar-link {
  font-weight: 500 !important;
  position: relative;
}
/* Hide left border on all collapsible sidebar groups */
.fern-sidebar-group.fern-collapsible {
  border-left: none !important;
}
.fern-sidebar-group.border-l {
  border-left: none !important;
}

.fern-sidebar-link[data-state="active"] {
  background: rgba(34, 135, 74, 0.08) !important;
  color: #22874A !important;
  font-weight: 500 !important;
  border-left: none !important;
  border-radius: 6px !important;
}
:root.dark .fern-sidebar-link[data-state="active"] {
  color: #2ACB5F !important;
  background: rgba(42, 203, 95, 0.10) !important;
}
.fern-sidebar-link[data-state="active"]::before {
  display: none !important;
}
.fern-sidebar-link[data-state="active"] .fern-sidebar-link-title-inner {
  -webkit-text-stroke: 0 !important;
}

.fern-sidebar-link[data-state="inactive"] {
  background: transparent !important;
  color: var(--grayscale-11) !important;
}

.fern-sidebar-link[data-state="inactive"]:hover {
  background: transparent !important;
  color: var(--grayscale-12) !important;
}
.fern-sidebar-link[data-state="inactive"]:focus-visible {
  background: transparent !important;
  color: var(--grayscale-12) !important;
}

/* Sidebar section headings — uppercase, muted */
.fern-sidebar-heading-content {
  color: var(--grayscale-9) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
}

/* Link-based section headers (sections with overview pages) match heading style */
.fern-sidebar-group.space-y-6 > li > a.fern-sidebar-link,
.fern-sidebar-group.space-y-6 > li > a.fern-sidebar-link[data-state="inactive"] {
  color: var(--grayscale-9) !important;
  background: transparent !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  line-height: 24px !important;
  border-left: none !important;
  padding-left: 8px !important;
  border-radius: 0 !important;
}

.fern-sidebar-group.space-y-6 > li > a.fern-sidebar-link[data-state="active"] {
  color: var(--grayscale-12) !important;
  background: transparent !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  line-height: 24px !important;
  border-left: none !important;
  padding-left: 8px !important;
  border-radius: 0 !important;
}

.fern-sidebar-group.space-y-6
  > li
  > a.fern-sidebar-link
  .fern-sidebar-link-title-inner {
  font-weight: inherit !important;
  font-size: 12px !important;
}

.fern-sidebar-group.space-y-6
  > li
  > a.fern-sidebar-link[data-state="inactive"]
  .fern-sidebar-link-title-inner {
  color: var(--grayscale-9) !important;
}

.fern-sidebar-group.space-y-6
  > li
  > a.fern-sidebar-link[data-state="active"]
  .fern-sidebar-link-title-inner {
  color: var(--grayscale-12) !important;
}

.fern-sidebar-group.space-y-6 > li > a.fern-sidebar-link:hover,
.fern-sidebar-group.space-y-6
  > li
  > a.fern-sidebar-link:hover
  .fern-sidebar-link-title-inner {
  color: var(--grayscale-11) !important;
}
.fern-sidebar-group.space-y-6 > li > a.fern-sidebar-link:focus-visible,
.fern-sidebar-group.space-y-6 > li > a.fern-sidebar-link:focus-within .fern-sidebar-link-title-inner {
  color: var(--grayscale-11) !important;
}

/* Thin divider lines between sidebar sections */
.fern-sidebar-group.space-y-6 > li + li {
  border-top: 1px solid var(--grayscale-a3);
  padding-top: 12px;
}

/* ─── Sidebar chevrons — absolutely positioned in left gutter ─── */
.fern-sidebar-link .expand-indicator {
  position: absolute !important;
  left: -14px;
  top: 50%;
  margin-top: -8px;
  transform: rotate(-90deg) !important;
  transition: transform 0.15s ease;
}

div[data-state="open"] > .fern-sidebar-link .expand-indicator {
  transform: rotate(0deg) !important;
}

/* ─── Filled button (Dashboard) ─── */
.fern-button.filled {
  background: var(--grayscale-12) !important;
  color: var(--grayscale-1) !important;
  border-radius: 9999px;
  font-weight: 500 !important;
}

.fern-button.filled:hover {
  background: var(--grayscale-11) !important;
}
.fern-button.filled:focus-visible {
  background: var(--grayscale-11) !important;
}

/* ─── Tab bar ─── */
.fern-header-tabs [data-state="active"] {
  color: var(--grayscale-12) !important;
  border-color: var(--grayscale-12) !important;
  font-weight: 500 !important;
}

/* Hide default "Built with Fern" badge on all pages (we put it in the custom footer instead) */
#builtwithfern,
a#builtwithfern,
a[id="builtwithfern"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ─── Footer visibility: multi-column on landing page, flat everywhere else ─── */
/* By default: show flat, hide full */
.trustly-footer-full {
  display: none;
}

/* On the landing page (detected by .landing-hero in the DOM) show the full footer */
:has(.landing-hero) .trustly-footer-full {
  display: flex;
}
:has(.landing-hero) .trustly-footer-flat {
  display: none;
}

/* ─── Multi-column Footer (landing page) ─── */
.trustly-footer-full {
  background: var(--grayscale-3);
  flex-direction: column;
  gap: 32px;
  padding: 48px 80px 32px;
  width: 100%;
  font-family: var(--font-body);
}

.trustly-footer-columns {
  display: flex;
  gap: 64px;
  width: 100%;
}

.trustly-footer-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 140px;
}

.trustly-footer-col-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--grayscale-10);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--grayscale-7);
}

.trustly-footer-col-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trustly-footer-link {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--grayscale-12);
  text-decoration: none;
}

.trustly-footer-link:hover {
  color: #22874A;
}
.trustly-footer-link:focus-visible {
  color: #22874A;
}

:root.dark .trustly-footer-link:hover {
  color: #2ACB5F;
}
:root.dark .trustly-footer-link:focus-visible {
  color: #2ACB5F;
}

.trustly-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.trustly-footer-divider {
  width: 100%;
  height: 1px;
  background: var(--grayscale-7);
}

.trustly-footer-legal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.trustly-footer-legal-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--grayscale-12);
  margin: 0;
}

.trustly-footer-legal-link {
  color: var(--grayscale-12);
  text-decoration: none;
}

.trustly-footer-legal-link:hover {
  color: var(--grayscale-11);
}
.trustly-footer-legal-link:focus-visible {
  color: var(--grayscale-11);
}

.built-with-fern {
  display: flex;
  align-items: center;
}

.built-with-fern-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.built-with-fern-logo {
  height: 16px;
  width: auto;
  color: inherit;
}

.built-with-fern-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: #1e1f24;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.built-with-fern-link:hover .built-with-fern-tooltip {
  visibility: visible;
  opacity: 1;
}
.built-with-fern-link:focus-within .built-with-fern-tooltip {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 768px) {

  .trustly-footer-full {
    padding: 32px 24px 24px;
    gap: 24px;
  }

  .trustly-footer-columns {
    flex-direction: column;
    gap: 24px;
  }

}

/* ─── Flat Footer Utility Bar ─── */
.trustly-footer-flat {
  border-top: 1px solid var(--grayscale-a3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 40px;
  width: 100%;
  font-family: var(--font-body);
}

.trustly-footer-flat-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.trustly-footer-flat-link {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--grayscale-12);
  text-decoration: none;
}

.trustly-footer-flat-link:hover {
  color: #22874A;
}
.trustly-footer-flat-link:focus-visible {
  color: #22874A;
}

:root.dark .trustly-footer-flat-link:hover {
  color: #2ACB5F;
}
:root.dark .trustly-footer-flat-link:focus-visible {
  color: #2ACB5F;
}

.trustly-footer-flat-sep {
  font-size: 14px;
  color: var(--grayscale-7);
}

.trustly-footer-flat-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

.trustly-footer-flat-legal-center {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.trustly-footer-flat-logo {
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
}

.trustly-footer-flat-logo-light {
  display: block;
}

.trustly-footer-flat-logo-dark {
  display: none;
}

:root.dark .trustly-footer-flat-logo-light {
  display: none;
}

:root.dark .trustly-footer-flat-logo-dark {
  display: block;
}

.trustly-footer-flat-legal-link {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--grayscale-9);
  text-decoration: none;
}

.trustly-footer-flat-legal-link:hover {
  color: var(--grayscale-11);
}
.trustly-footer-flat-legal-link:focus-visible {
  color: var(--grayscale-11);
}

.trustly-footer-flat-copyright {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--grayscale-9);
}

.trustly-footer-flat-legal .trustly-footer-flat-sep {
  font-size: 12px;
  color: var(--grayscale-6);
}

.trustly-footer-flat .built-with-fern {
  position: absolute;
  right: 0;
}

@media (max-width: 768px) {

  .trustly-footer-flat {
    padding: 16px 24px;
  }

  .trustly-footer-flat-legal {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .trustly-footer-flat-logo,
  .trustly-footer-flat .built-with-fern {
    position: static;
  }

}

/* ═══════════════════════════════════════════
   Landing Page
   ═══════════════════════════════════════════ */

/* Hero */
.landing-hero {
  background: white;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 36px 80px 32px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
}

:root.dark .landing-hero {
  background: var(--background);
}

.landing-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.landing-hero-title {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -1.26px;
  color: var(--grayscale-12);
  text-align: center;
  margin: 0;
}

.landing-hero-subtitle {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: #474747;
  text-align: center;
  margin: 0;
}

:root.dark .landing-hero-subtitle {
  color: var(--grayscale-9);
}

/* Hero search bar */
.landing-hero-search {
  width: 100%;
  max-width: 628px;
}

.landing-hero-search button#fern-search-button,
.landing-hero-search button.landing-search-input {
  width: 100% !important;
  max-width: 628px;
  border-radius: 99999px !important;
  border: 1px solid #cac6c3 !important;
  padding: 12px 20px !important;
  font-size: 16px !important;
  background: white !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-shadow: 0 0 #0000 !important;
  height: auto !important;
  justify-content: flex-start !important;
  color: #8c8988 !important;
}

.landing-hero-search .fern-kbd {
  display: none !important;
}

/* Green arrow button inside search bar */
.landing-hero-search button#fern-search-button::after,
.landing-hero-search button.landing-search-input::after {
  content: "→";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #45ed7d;
  color: #070707;
  font-size: 18px;
  font-weight: 700;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.landing-hero-search button#fern-search-button,
.landing-hero-search button.landing-search-input {
  position: relative !important;
}

:root.dark .landing-hero-search button#fern-search-button,
:root.dark .landing-hero-search button.landing-search-input {
  background: var(--grayscale-2) !important;
  border-color: var(--grayscale-5) !important;
}

/* Hide tabs on landing page (search bar stays in the header) */
body:has(.landing-hero) .fern-header-tabs {
  display: none !important;
}

/* Header search: full placeholder comes from docs.yml `settings.search-text`.
   On narrow screens, collapse it to a short "Search" so it never clips. */
@media (max-width: 900px) {

  #fern-header .fern-header-search-bar {
    font-size: 0;
  }
  #fern-header .fern-header-search-bar > svg {
    order: -1;
  }
  #fern-header .fern-header-search-bar::before {
    content: "Search";
    order: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
  }
  #fern-header .fern-header-search-bar .fern-kbd {
    font-size: 12px;
  }

}

/* Section titles */
.landing-section-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--grayscale-12);
  margin: 0;
}

/* Build and Manage cards */
.landing-cards-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.landing-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ☀️ LIGHT MODE: Explicit landing tile color rules & transition physics */
.landing-hero .landing-card,
.landing-hero .fern-card,
.landing-cards-grid .landing-card,
.landing-cards-grid .fern-card {
  background: #dbe5db !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  text-decoration: none !important;
  opacity: 1 !important;
  
  /* Restores explicit smooth transitional timing to the layout components */
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
              background-color 0.2s ease, 
              opacity 0.2s ease !important;
}

/* Light Mode Hover Dynamics */
.landing-hero .landing-card:hover,
.landing-hero .fern-card:hover,
.landing-cards-grid .landing-card:hover,
.landing-cards-grid .fern-card:hover {
  opacity: 0.90 !important;
  background: #dbe5db !important; /* Retains clean brand sage background */
  transform: translateY(-4px) !important; /* Smooth physical transition lift */
  box-shadow: 0 12px 20px -8px rgba(7, 7, 7, 0.12) !important; /* Depth drop-shadow */
}
.landing-hero .landing-card:focus-visible,
.landing-hero .fern-card:focus-visible,
.landing-cards-grid .landing-card:focus-visible,
.landing-cards-grid .fern-card:focus-visible {
  opacity: 0.90 !important;
  background: #dbe5db !important; /* Retains clean brand sage background */
  transform: translateY(-4px) !important; /* Smooth physical transition lift */
  box-shadow: 0 12px 20px -8px rgba(7, 7, 7, 0.12) !important; /* Depth drop-shadow */
}

/* 🌙 DARK MODE: Tile colors */
:root.dark .landing-hero .landing-card,
:root.dark .landing-hero .fern-card,
.dark .landing-hero .landing-card,
.dark .landing-hero .fern-card,
[data-theme="dark"] .landing-hero .landing-card,
[data-theme="dark"] .landing-hero .fern-card,
:root.dark .landing-cards-grid .landing-card,
:root.dark .landing-cards-grid .fern-card {
  background: var(--grayscale-3) !important;
  border: 1px solid var(--grayscale-a4) !important;
  box-shadow: none !important;
}

/* 🌙 DARK MODE: Hover Dynamics */
:root.dark .landing-hero .landing-card:hover,
:root.dark .landing-hero .fern-card:hover,
.dark .landing-hero .landing-card:hover,
.dark .landing-hero .fern-card:hover,
[data-theme="dark"] .landing-hero .landing-card:hover,
[data-theme="dark"] .landing-hero .fern-card:hover,
:root.dark .landing-cards-grid .landing-card:hover,
:root.dark .landing-cards-grid .fern-card:hover {
  background: var(--grayscale-4) !important;
  transform: translateY(-4px) !important;
  opacity: 1 !important;
}
:root.dark .landing-hero .landing-card:focus-visible,
:root.dark .landing-hero .fern-card:focus-visible,
.dark .landing-hero .landing-card:focus-visible,
.dark .landing-hero .fern-card:focus-visible,
[data-theme="dark"] .landing-hero .landing-card:focus-visible,
[data-theme="dark"] .landing-hero .fern-card:focus-visible,
:root.dark .landing-cards-grid .landing-card:focus-visible,
:root.dark .landing-cards-grid .fern-card:focus-visible {
  background: var(--grayscale-4) !important;
  transform: translateY(-4px) !important;
  opacity: 1 !important;
}

.landing-card-icon {
  width: auto !important;
  height: auto !important;
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
  margin-left: 0 !important;
  margin-right: auto !important;
}

:root.dark .landing-card-icon {
  filter: invert(1);
}

.landing-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-card-link {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--grayscale-12);
  text-decoration: none;
}

.landing-card-desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #777574;
  margin: 0;
}

:root.dark .landing-card-desc {
  color: var(--grayscale-9);
}

/* API + SDKs split section */
.landing-split-section {
  background: transparent;
  display: flex;
  gap: 48px;
  align-items: flex-start;
  padding: 24px 80px 40px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.landing-split-left,
.landing-split-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: flex-start;
}

.landing-api-desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: #474747;
  margin: 0;
}

:root.dark .landing-api-desc {
  color: var(--grayscale-9);
}

.landing-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #070707;
  color: white;
  padding: 11px 20px;
  border-radius: 99999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  width: fit-content;
  transition: opacity 0.15s;
}

.landing-btn-dark:hover {
  opacity: 0.85;
}
.landing-btn-dark:focus-visible {
  opacity: 0.85;
}

:root.dark .landing-btn-dark {
  background: #ffffff;
  color: #070707;
}

.landing-btn-dark svg {
  width: 14px;
  height: 14px;
}

.landing-api-link {
  color: var(--grayscale-12);
  text-decoration: underline;
  font-weight: 500;
}

.landing-api-link:hover {
  opacity: 0.7;
}
.landing-api-link:focus-visible {
  opacity: 0.7;
}

.landing-api-code {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Style Fern's built-in code block inside the landing page */
.landing-api-code .code-block-root {
  flex: 1;
  border-radius: 12px !important;
  overflow: hidden;
}

.landing-api-code pre {
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 22px !important;
  margin: 0 !important;
}

.landing-api-code code {
  font-size: 13px !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

.landing-sdks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.landing-sdk-card {
  background: #f5f5f5;
  border-radius: 12px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  text-decoration: none;
  transition: opacity 0.15s;
}

:root.dark .landing-sdk-card {
  background: rgba(255, 255, 255, 0.10);
}

.landing-sdk-card:hover {
  opacity: 0.75;
}
.landing-sdk-card:focus-visible {
  opacity: 0.75;
}

.landing-sdk-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.landing-sdk-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--grayscale-12);
  white-space: nowrap;
}

/* ─── Browse by product ─── */
.landing-browse-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 80px 64px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.landing-browse-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.landing-browse-card {
  background: var(--grayscale-2);
  border: 1px solid var(--grayscale-a3);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

:root.dark .landing-browse-card {
  background: var(--grayscale-3);
  border-color: var(--grayscale-a4);
}

.landing-browse-category {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--grayscale-12);
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--grayscale-a3);
}

.landing-browse-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Render items as a clean nav menu: drop the auto-injected list bullet. */
.landing-browse-list li {
  padding: 0;
  margin: 0;
}

.landing-browse-list li::before {
  content: none !important;
  display: none !important;
}

.landing-browse-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}

.landing-browse-item:hover {
  background: var(--grayscale-a3);
}
.landing-browse-item:focus-visible {
  background: var(--grayscale-a3);
}

.landing-browse-item-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--grayscale-12);
}

.landing-browse-item-desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #777574;
}

:root.dark .landing-browse-item-desc {
  color: var(--grayscale-9);
}

/* ─── Page-actions toolbar — accessible visual weight ─── */

.fern-page-actions {
  opacity: 1 !important; 
  transition: opacity 0.2s ease !important;
}

.fern-page-actions:hover {
  opacity: 1 !important; 
}
.fern-page-actions:focus-visible {
  opacity: 1 !important; 
}

/* ☀️ LIGHT MODE: Toolbar styles */
.fern-page-actions button,
.fern-page-actions a {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #374151 !important; 
  letter-spacing: 0.01em;
  transition: color 0.15s ease !important;
}

.fern-page-actions svg {
  width: 13px !important;
  height: 13px !important;
  color: #374151 !important; 
}

.fern-page-actions button:hover,
.fern-page-actions a:hover {
  color: var(--grayscale-12) !important;
}
.fern-page-actions button:focus-visible,
.fern-page-actions a:focus-visible {
  color: var(--grayscale-12) !important;
}

/* 🌙 DARK MODE: Toolbar Styles */
.dark .fern-page-actions button,
.dark .fern-page-actions a,
[data-theme="dark"] .fern-page-actions button,
[data-theme="dark"] .fern-page-actions a,
.dark .fern-page-actions svg,
[data-theme="dark"] .fern-page-actions svg {
  color: #9CA3AF !important; /* Silver gray layout baseline */
}

.dark .fern-page-actions button:hover,
.dark .fern-page-actions a:hover,
[data-theme="dark"] .fern-page-actions button:hover,
[data-theme="dark"] .fern-page-actions a:hover {
  color: #FFFFFF !important;
}
.dark .fern-page-actions button:focus-visible,
.dark .fern-page-actions a:focus-visible,
[data-theme="dark"] .fern-page-actions button:focus-visible,
[data-theme="dark"] .fern-page-actions a:focus-visible {
  color: #FFFFFF !important;
}

/* ─── Fern Card styling (Isolate cleanly to standard internal overview subpages) ─── */
main:not(:has(.landing-hero)) .fern-card {
  background: var(--grayscale-2) !important;
  border: 1px solid var(--grayscale-a3) !important;
  border-radius: 12px !important;
  transition: border-color 0.15s, background 0.15s !important;
}

main:not(:has(.landing-hero)) .fern-card:hover {
  border-color: var(--grayscale-a5) !important;
  background: var(--grayscale-3) !important;
}
main:not(:has(.landing-hero)) .fern-card:focus-visible {
  border-color: var(--grayscale-a5) !important;
  background: var(--grayscale-3) !important;
}

/* ═══════════════════════════════════════════
   Page Footer & Feedback Spacing Optimizations
   ═══════════════════════════════════════════ */

main, 
article, 
.prose,
.fern-mdx-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.fern-mdx-content > *:last-child,
.prose > *:last-child,
.fern-mdx-content ul,
.prose ul,
.fern-mdx-content ol,
.prose ol {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.fern-layout-footer-toolbar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  position: relative !important;
  top: -3rem !important;
  margin-bottom: -1.5rem !important;
}

div:has(+ .trustly-footer-flat),
div:has(+ * + .trustly-footer-flat),
[class*="navigation"],
[class*="pagination"] {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.trustly-footer-flat {
  margin-top: 1rem !important;
  padding-top: 1.5rem !important;
}

/* ═══════════════════════════════════════════
   Center Page Feedback Widget Natively
   ═══════════════════════════════════════════ */

.fern-layout-footer-toolbar {
  display: flex !important;
  justify-content: center !important; 
  align-items: center !important;     
  width: 100% !important;
  margin: 3rem auto 1rem auto !important; 
}

/* ─── Widescreen: keep "On this page" TOC adjacent to content ─── */
@media (min-width: 1440px) {

  .fern-main:has(> aside:not(.fern-sidebar-desktop)) .fern-layout-content-wrapper {
    flex: 0 1 768px !important;
    margin-left: auto !important;
  }

  .fern-main > aside:not(.fern-sidebar-desktop) {
    margin-right: auto !important;
  }

}

/* ═══════════════════════════════════════════
   Custom Tables (Fern Light & Dark Mode)
   ═══════════════════════════════════════════ */

.fern-main table:has(thead) {
  border-collapse: collapse;
  width: 100%;
}

.fern-main table:has(thead) th {
  background-color: #f9fafb !important;
  color: #4b5563 !important;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 12px 16px !important;
  text-align: left;
}

.fern-main table:has(thead) td {
  border: none !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 16px !important;
  vertical-align: top;
  color: #374151 !important; 
}

/* ☀️ LIGHT MODE: Restrict row colors strictly to actual table structures */
.fern-main table:has(thead) > tbody > tr > td {
  background-color: #ffffff !important;
}
.fern-main table:has(thead) > tbody > tr:nth-child(even) > td {
  background-color: #f9fafb !important;
}

/* 🌙 DARK MODE: Headers */
.dark .fern-main table:has(thead) th,
[data-theme="dark"] .fern-main table:has(thead) th {
  background-color: #111827 !important;
  color: #9ca3af !important;
  border-bottom: 1px solid #374151 !important;
}

/* 🌙 DARK MODE: Text cells & nested links/elements */
.dark .fern-main table:has(thead) td,
[data-theme="dark"] .fern-main table:has(thead) td,
.dark .fern-main table:has(thead) td *,
[data-theme="dark"] .fern-main table:has(thead) td * {
  color: #ffffff !important; 
  border-bottom: 1px solid #374151 !important;
}

/* 🌙 DARK MODE: Restrict background row colors strictly to actual table structures */
.dark .fern-main table:has(thead) > tbody > tr > td,
[data-theme="dark"] .fern-main table:has(thead) > tbody > tr > td {
  background-color: #111827 !important; 
}

.dark .fern-main table:has(thead) > tbody > tr:nth-child(even) > td,
[data-theme="dark"] .fern-main table:has(thead) > tbody > tr:nth-child(even) > td {
  background-color: #1f2937 !important; 
}

.fern-main table:has(thead) tr:last-child td {
  border-bottom: none !important;
}

/* 🌙 DARK MODE: Links */
.dark .fern-main table:has(thead) td a,
[data-theme="dark"] .fern-main table:has(thead) td a {
  text-decoration-color: currentColor !important;
  border-bottom-color: currentColor !important; 
}

/* ═══════════════════════════════════════════
   Responsive Structural Media Layouts
   ═══════════════════════════════════════════ */

@media (max-width: 1024px) {

  .landing-hero {
    padding: 40px 24px 32px;
  }

  .landing-hero-title {
    font-size: 36px;
    letter-spacing: -1.08px;
  }

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

  .landing-api-section {
    flex-direction: column;
    padding: 48px 24px;
  }

  .landing-api-code {
    width: 100%;
  }

  .landing-sdks-section {
    padding: 48px 24px;
  }

  .landing-split-section {
    flex-direction: column;
    padding: 40px 24px;
    gap: 40px;
  }

  .landing-split-left,
  .landing-split-right {
    width: 100%;
  }

  .landing-browse-section {
    padding: 24px 24px 48px;
  }

  body:has(.landing-hero) .fern-header-content {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

}

@media (max-width: 640px) {

  .landing-cards-grid {
    grid-template-columns: 1fr;
  }

  .landing-browse-grid {
    grid-template-columns: 1fr;
  }

  .landing-sdks-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .landing-sdk-card {
    padding: 16px 12px;
    min-height: 80px;
  }

  .landing-sdk-icon {
    width: 22px;
    height: 22px;
  }

  .landing-sdk-label {
    font-size: 16px;
  }

}

/* ═══════════════════════════════════════════
   Compact Task Lists (Checklists)
   ═══════════════════════════════════════════ */

.fern-mdx-content ul:has(input[type="checkbox"]),
.prose ul:has(input[type="checkbox"]) {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  padding-left: 0.5rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.25rem !important; /* Forces items closer together */
}

.fern-mdx-content li:has(input[type="checkbox"]),
.prose li:has(input[type="checkbox"]) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0.5rem !important;
  line-height: 1.5 !important;
}

.fern-mdx-content li:has(input[type="checkbox"]) input,
.prose li:has(input[type="checkbox"]) input {
  margin-top: 0.25rem !important;
  margin-right: 0.5rem !important;
}

.fern-mdx-content li:has(input[type="checkbox"])::before,
.prose li:has(input[type="checkbox"])::before,
.fern-mdx-content li:has(input[type="checkbox"])::marker,
.prose li:has(input[type="checkbox"])::marker,
li.task-list-item::before,
li.task-list-item::marker {
  content: none !important;
  display: none !important;
  color: transparent !important;
}

.fern-mdx-content li:has(input[type="checkbox"]),
.prose li:has(input[type="checkbox"]),
li.task-list-item {
  list-style: none !important;
  list-style-type: none !important;
}

/* ═══════════════════════════════════════════
   Heading TWhitespace Reduction
   ═══════════════════════════════════════════ */

.fern-mdx-content h2,
.prose h2 {
  margin-top: 2.25rem !important; 
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

.fern-mdx-content h3,
.prose h3 {
  margin-top: 1.75rem !important;
  margin-bottom: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.fern-mdx-content > h2:first-of-type,
.prose > h2:first-of-type,
.fern-mdx-content > *:first-child + h2,
.prose > *:first-child + h2 {
  margin-top: 1.5rem !important;
}