/*fern-site-stylesheet*/@font-face {
    font-family: 'AtlasGrotesk';
    src: url('/_fern-files/dropbox-api.docs.buildwithfern.com/43693f7bdd6146e783fab3f75ba0a51aa3cf9530adbf790dbd686fc8a17aa3db/docs/assets/fonts/AtlasGrotesk-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AtlasGrotesk';
    src: url('/_fern-files/dropbox-api.docs.buildwithfern.com/b5db3e633ec765fc01a19c06b0955d56c2503285e59d8d348d08ec34abbfeaf3/docs/assets/fonts/AtlasGrotesk-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SharpGrotesk';
    src: url('/_fern-files/dropbox-api.docs.buildwithfern.com/40d852f2a2082060963bf762ef7e69a938d0b8acf3885de575594c197e6f16d8/docs/assets/fonts/SharpGrotesk-Medium20.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SharpGrotesk';
    src: url('/_fern-files/dropbox-api.docs.buildwithfern.com/00f90db31f42975fcdc5fa1f70660568be68792ec11be2aac36362f435a6e555/docs/assets/fonts/SharpGrotesk-Book20.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: 864px;
  --sidebar-width: 288px;
  --page-width: 1472px;
  --logo-height: 28px;
  --font-body: 'AtlasGrotesk', system-ui, sans-serif, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'SharpGrotesk', system-ui, sans-serif, 'AtlasGrotesk', system-ui, sans-serif, 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: #fcfdff;
  --accent-2: #f5faff;
  --accent-3: #eaf3ff;
  --accent-4: #daebff;
  --accent-5: #c7e0ff;
  --accent-6: #b2d3ff;
  --accent-7: #98c1ff;
  --accent-8: #73a7ff;
  --accent-9: #0061ff;
  --accent-10: #0055e4;
  --accent-11: #055ae9;
  --accent-12: #0c2d6a;

  --accent-a1: #0055ff03;
  --accent-a2: #0080ff0a;
  --accent-a3: #006eff15;
  --accent-a4: #0076ff25;
  --accent-a5: #0072ff38;
  --accent-a6: #006eff4d;
  --accent-a7: #0066ff67;
  --accent-a8: #005fff8c;
  --accent-a9: #0061ff;
  --accent-a10: #0055e4;
  --accent-a11: #0057e9fa;
  --accent-a12: #002363f3;

  --accent-contrast: #fff;
  --accent-surface: #f3f9ffcc;
  --accent-indicator: #0061ff;
  --accent-track: #0061ff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0024 261.4);
      --accent-2: oklch(98.3% 0.0106 261.4);
      --accent-3: oklch(96.1% 0.0224 261.4);
      --accent-4: oklch(93.6% 0.0437 261.4);
      --accent-5: oklch(90.4% 0.0655 261.4);
      --accent-6: oklch(86.3% 0.0893 261.4);
      --accent-7: oklch(80.7% 0.1103 261.4);
      --accent-8: oklch(73.1% 0.1459 261.4);
      --accent-9: oklch(55.4% 0.2465 261.4);
      --accent-10: oklch(50.8% 0.2279 261.4);
      --accent-11: oklch(52.3% 0.2279 261.4);
      --accent-12: oklch(31.6% 0.1142 261.4);

      --accent-a1: color(display-p3 0.0235 0.349 1 / 0.012);
      --accent-a2: color(display-p3 0.0235 0.4588 0.8941 / 0.036);
      --accent-a3: color(display-p3 0.0078 0.3725 0.949 / 0.075);
      --accent-a4: color(display-p3 0.0078 0.3882 0.9451 / 0.134);
      --accent-a5: color(display-p3 0 0.3725 0.9412 / 0.2);
      --accent-a6: color(display-p3 0.0039 0.3686 0.9451 / 0.279);
      --accent-a7: color(display-p3 0.0039 0.3412 0.949 / 0.373);
      --accent-a8: color(display-p3 0 0.3137 0.949 / 0.506);
      --accent-a9: color(display-p3 0 0.2549 0.9569 / 0.844);
      --accent-a10: color(display-p3 0 0.2275 0.8431 / 0.867);
      --accent-a11: color(display-p3 0 0.2353 0.8627 / 0.851);
      --accent-a12: color(display-p3 0 0.098 0.3451 / 0.918);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9569 0.9765 1 / 0.8);
      --accent-indicator: oklch(55.4% 0.2465 261.4);
      --accent-track: oklch(55.4% 0.2465 261.4);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfcfd;
  --grayscale-2: #faf9fb;
  --grayscale-3: #f2eff3;
  --grayscale-4: #eae7ec;
  --grayscale-5: #e3dfe6;
  --grayscale-6: #dbd8e0;
  --grayscale-7: #d0cdd7;
  --grayscale-8: #bcbac7;
  --grayscale-9: #8e8c99;
  --grayscale-10: #84828e;
  --grayscale-11: #65636d;
  --grayscale-12: #211f26;

  --grayscale-a1: #55005503;
  --grayscale-a2: #2b005506;
  --grayscale-a3: #30004010;
  --grayscale-a4: #20003618;
  --grayscale-a5: #20003820;
  --grayscale-a6: #14003527;
  --grayscale-a7: #10003332;
  --grayscale-a8: #08003145;
  --grayscale-a9: #05001d73;
  --grayscale-a10: #0500197d;
  --grayscale-a11: #0400119c;
  --grayscale-a12: #020008e0;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.991 0.988 0.992);
      --grayscale-2: color(display-p3 0.98 0.976 0.984);
      --grayscale-3: color(display-p3 0.946 0.938 0.952);
      --grayscale-4: color(display-p3 0.915 0.906 0.925);
      --grayscale-5: color(display-p3 0.886 0.876 0.901);
      --grayscale-6: color(display-p3 0.856 0.846 0.875);
      --grayscale-7: color(display-p3 0.814 0.804 0.84);
      --grayscale-8: color(display-p3 0.735 0.728 0.777);
      --grayscale-9: color(display-p3 0.555 0.549 0.596);
      --grayscale-10: color(display-p3 0.514 0.508 0.552);
      --grayscale-11: color(display-p3 0.395 0.388 0.424);
      --grayscale-12: color(display-p3 0.128 0.122 0.147);

      --grayscale-a1: #55005503;
      --grayscale-a2: #2b005506;
      --grayscale-a3: #30004010;
      --grayscale-a4: #20003618;
      --grayscale-a5: #20003820;
      --grayscale-a6: #14003527;
      --grayscale-a7: #10003332;
      --grayscale-a8: #08003145;
      --grayscale-a9: #05001d73;
      --grayscale-a10: #0500197d;
      --grayscale-a11: #0400119c;
      --grayscale-a12: #020008e0;

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


.dark {
  --accent-1: #121b25;
  --accent-2: #141e2b;
  --accent-3: #122b4a;
  --accent-4: #0b3463;
  --accent-5: #123f74;
  --accent-6: #1d4c85;
  --accent-7: #285b9b;
  --accent-8: #306db8;
  --accent-9: #2787f5;
  --accent-10: #147ae7;
  --accent-11: #7cb7ff;
  --accent-12: #cce3ff;

  --accent-a1: #002ef20d;
  --accent-a2: #0050ff13;
  --accent-a3: #006bfd36;
  --accent-a4: #006bfd52;
  --accent-a5: #0677fd65;
  --accent-a6: #2084fd78;
  --accent-a7: #338eff90;
  --accent-a8: #3a93ffb0;
  --accent-a9: #288cfff4;
  --accent-a10: #1485fee5;
  --accent-a11: #7cb7ff;
  --accent-a12: #cce3ff;

  --accent-contrast: #fff;
  --accent-surface: #0f223c80;
  --accent-indicator: #2787f5;
  --accent-track: #2787f5;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(21.8% 0.0246 255.2);
      --accent-2: oklch(23.1% 0.0286 255.2);
      --accent-3: oklch(28.7% 0.0651 255.2);
      --accent-4: oklch(32.6% 0.095 255.2);
      --accent-5: oklch(36.9% 0.1036 255.2);
      --accent-6: oklch(41.6% 0.1081 255.2);
      --accent-7: oklch(47.1% 0.1167 255.2);
      --accent-8: oklch(53.4% 0.1343 255.2);
      --accent-9: oklch(62.8% 0.1859 255.2);
      --accent-10: oklch(58.6% 0.1859 255.2);
      --accent-11: oklch(77% 0.1266 255.2);
      --accent-12: oklch(90.8% 0.0469 255.2);

      --accent-a1: color(display-p3 0 0.1922 0.9961 / 0.044);
      --accent-a2: color(display-p3 0 0.3294 1 / 0.07);
      --accent-a3: color(display-p3 0.0667 0.4157 1 / 0.201);
      --accent-a4: color(display-p3 0.0784 0.4235 1 / 0.306);
      --accent-a5: color(display-p3 0.1569 0.4784 1 / 0.376);
      --accent-a6: color(display-p3 0.2431 0.5294 1 / 0.45);
      --accent-a7: color(display-p3 0.298 0.5647 1 / 0.542);
      --accent-a8: color(display-p3 0.3216 0.5804 0.9961 / 0.669);
      --accent-a9: color(display-p3 0.2863 0.5569 1 / 0.922);
      --accent-a10: color(display-p3 0.2392 0.5255 0.9961 / 0.865);
      --accent-a11: color(display-p3 0.549 0.7255 1 / 0.974);
      --accent-a12: color(display-p3 0.8275 0.898 1 / 0.987);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.0706 0.1255 0.2196 / 0.5);
      --accent-indicator: oklch(62.8% 0.1859 255.2);
      --accent-track: oklch(62.8% 0.1859 255.2);
    }
  }
}


.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(0, 97, 255, 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(39, 135, 245, 1);
  --background: rgba(26, 26, 26, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #1a1a1a;
}

/* Dropbox Developer Portal Landing Page Styles */
/* .gradient-container {
  /* position: relative; */
  /* width: 100%;
  background-image:
    radial-gradient(ellipse at bottom left, rgba(0, 97, 255, 0.18) 0%, transparent 40%),
    radial-gradient(ellipse at top right, rgba(0, 97, 255, 0.18) 0%, transparent 40%);
} */ 

/* Shared page bounds. The landing container and the footer bands both size
   their content off this so the two line up horizontally. */
:root {
  --dbx-content-max: 1200px;
  --dbx-content-gutter: 2rem;
}

.landing-container {
  max-width: var(--dbx-content-max);
  margin: 0 auto;
  padding: 4rem var(--dbx-content-gutter);
}

/* ── Hero ── */


.hero-section {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--card-background);
  border-radius: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  margin-bottom: 0;
}

.hero-section .hero-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grayscale-10);
  margin-bottom: 1.25rem;
}

.hero-section h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: var(--grayscale-12);
  background: none;
  -webkit-text-fill-color: unset;
}

.hero-section p {
  font-size: 1.125rem;
  color: var(--grayscale-11);
  max-width: 580px;
  margin: 0 auto 2rem;
  line-height: 1.65;
}

.hero-buttons {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-buttons a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: opacity 0.15s ease;
}

.hero-buttons a:hover {
  opacity: 0.85;
}
.hero-buttons a:focus-visible {
  opacity: 0.85; outline: none;
}

.hero-buttons .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: #0061FF;
  color: #ffffff;
  border-radius: 4px;
}

.hero-buttons .btn-link {
  color: var(--grayscale-12);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Section wrappers ── */
.section-cream {
  background: var(--card-background);
  margin: 0 -1rem;
  padding: 4rem 2rem;
}

.section-white {
  padding: 4rem 0;
}

/* ── Section headers ── */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.15;
  color: var(--grayscale-12);
}

.section-header p {
  color: var(--grayscale-11);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Community stats ── */
.community-section .stats-bar {
  text-align: center;
}

.stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.stat-item {
  text-align: center;
  padding: 0;
}

.stat-item .stat-number {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--grayscale-12);
  display: block;
  margin-bottom: 0.5rem;
}

.stat-item .stat-label {
  font-size: 0.9rem;
  color: var(--grayscale-11);
  line-height: 1.5;
}

/* ── CTA section ── */
/* Full-bleed band: background spans the viewport, content is held to
   --dbx-content-max by .cta-inner. */
.cta-section {
  padding: 4rem 0;
  background: #1E1919;
  border-radius: 0;
  text-align: left;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
  max-width: var(--dbx-content-max);
  margin: 0 auto;
  padding: 0 var(--dbx-content-gutter);
}

.cta-section h2 {
  color: #ffffff;
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.15;
  max-width: 500px;
  flex: 1;
}

.cta-section p {
  display: none;
}

.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.cta-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.cta-buttons a:hover {
  opacity: 0.85;
}
.cta-buttons a:focus-visible {
  opacity: 0.85; outline: none;
}

.cta-buttons .cta-primary {
  padding: 0.875rem 1.75rem;
  background: #0061FF;
  color: #ffffff;
  border-radius: 4px;
}

.cta-buttons .cta-secondary {
  background: transparent;
  color: #ffffff;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Footer ── */
/* Same band treatment as .cta-section, and the same #1E1919 so the two read as
   one continuous surface — the old 1px #3A3332 border-top made them look like
   two panels in slightly different shades. */
.site-footer {
  background: #1E1919;
  padding: 3rem 0 2rem;
}

/* In dark mode the site background is #1A1A1A, so a hard-coded #1E1919 band
   lands 4/1/1 off it and reads as an accidental shade rather than a deliberate
   one. Bind to Fern's --background (set from colors.background.dark in
   docs.yml) so the bands sit flush. Light mode keeps the dark band on purpose. */
:is(.dark, [data-theme="dark"]) .cta-section,
:is(.dark, [data-theme="dark"]) .site-footer {
  background: var(--background);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  max-width: var(--dbx-content-max);
  margin: 0 auto;
  padding: 0 var(--dbx-content-gutter);
}

.footer-column h4 {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 0.5rem;
}

.footer-column a {
  color: #B0AAA6;
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-column a:hover {
  color: #ffffff;
}
.footer-column a:focus-visible {
  color: #ffffff; outline: none;
}

/* Hide external link icons added by Fern on footer links */
.site-footer a svg,
.site-footer a .external-link-icon,
.site-footer a[target="_blank"]::after,
.site-footer a::after {
  display: none !important;
  content: none !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {

  :root {
    --dbx-content-gutter: 1.5rem;
  }

  .hero-section {
    padding: 3rem 1.5rem;
  }

  .hero-section h1 {
    font-size: 2rem;
  }

  .stats-bar {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .section-header h2 {
    font-size: 1.6rem;
  }

  .cta-section {
    text-align: center;
    padding: 3rem 0;
  }

  .cta-inner {
    flex-direction: column;
  }

  .cta-section h2 {
    font-size: 1.75rem;
  }

  .cta-buttons {
    align-items: center;
  }

  .section-cream {
    padding: 3rem 1.5rem;
  }

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

}

@media (max-width: 480px) {

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

}

/* Multi-column lists, mirroring `column-count` on Dropbox's own file-type lists
   (e.g. the Chooser's supported extensions). Collapses to fewer columns on
   narrow viewports; the column count itself is set inline per list. */
.dbx-columns ul,
.dbx-columns ol {
  column-gap: 2rem;
  margin-top: 0.5rem;
}

.dbx-columns li {
  break-inside: avoid;
}

@media (max-width: 768px) {

  .dbx-columns {
    column-count: 2 !important;
  }

}

/* ── Dropbox Drop-ins: Chooser / Saver / Embedder (components/DropboxDropins.tsx) ── */
.dbx-dropin {
  border: 1px solid var(--grayscale-a4, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  overflow: hidden;
  margin: 1.5rem 0;
  font-size: 0.875rem;
}

.dbx-dropin__row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--grayscale-a3, rgba(0, 0, 0, 0.06));
}

.dbx-dropin__row--top {
  border-top: 0;
  background: var(--grayscale-a2, rgba(0, 0, 0, 0.03));
}

.dbx-dropin__label {
  color: var(--grayscale-a11, rgba(0, 0, 0, 0.55));
  font-weight: 500;
}

.dbx-dropin__inline {
  display: flex;
  gap: 1.5rem;
}

.dbx-dropin__row--returns {
  align-items: start;
}

.dbx-dropin__returns {
  min-width: 0;
  color: var(--grayscale-a11, rgba(0, 0, 0, 0.55));
}

.dbx-dropin__returns pre {
  margin: 0;
  max-height: 16rem;
  overflow: auto;
  font-size: 0.8125rem;
}

.dbx-dropin__notice {
  margin: 0;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--grayscale-a3, rgba(0, 0, 0, 0.06));
  background: var(--grayscale-a2, rgba(0, 0, 0, 0.03));
  font-size: 0.8125rem;
}

@media (max-width: 640px) {

  .dbx-dropin__row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

}

.dbx-dropin__field {
  min-width: 0;
}

.dbx-dropin__inline {
  display: flex;
  gap: 1.5rem;
}

.dbx-dropin__input {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--grayscale-a5, rgba(0, 0, 0, 0.15));
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-code, monospace);
  font-size: 0.8125rem;
  color: inherit;
}

.dbx-dropin__embed {
  box-sizing: border-box;
  height: 26rem;
  max-width: 100%;
  border-top: 1px solid var(--grayscale-a3, rgba(0, 0, 0, 0.06));
  padding: 0.75rem 1rem;
  color: var(--grayscale-a11, rgba(0, 0, 0, 0.55));
}

.dbx-dropin__embed:first-child {
  border-top: 0;
}

.dbx-dropin__embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Sidebar: expandable sections should look clickable ─────────────────────
   Sections with a `summary:` page render as <a> (pointer cursor); sections
   without one render as <button>, which defaults to cursor: default even
   though clicking still expands the group. Fern also sets cursor: default on
   the chevron itself, so both need overriding. */
button.fern-sidebar-link {
  cursor: pointer;
}

a.fern-sidebar-link .expand-indicator,
button.fern-sidebar-link .expand-indicator {
  cursor: inherit;
}

/* ── Product switcher ────────────────────────────────────────────────────────
   Styling for the header product selector (Dropbox API / Dropbox Sign) and its
   dropdown. The docs render in dark mode, so colors lean on Fern's grayscale
   alpha vars (with rgba fallbacks) rather than hard-coded values.
   Classes per Fern's "Customize selector styling" docs. */
.fern-product-selector {
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
  transition: background 0.15s ease;
}

.fern-product-selector:hover {
  background: var(--grayscale-a3, rgba(255, 255, 255, 0.06));
}
.fern-product-selector:focus-visible {
  background: var(--grayscale-a3, rgba(255, 255, 255, 0.06)); outline: none;
}

/* Dropdown panel: two-column grid, rounded, with a soft shadow so it reads as a card. */
.fern-product-selector-radio-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0.375rem;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* Round the individual product rows and give the hovered/selected one a tint. */
.fern-product-selector-radio-group [role="radio"] {
  border-radius: 8px;
  transition: background 0.12s ease;
}

.fern-product-selector-radio-group [role="radio"]:hover,
.fern-product-selector-radio-group [role="radio"][aria-checked="true"] {
  background: var(--grayscale-a3, rgba(255, 255, 255, 0.06));
}
.fern-product-selector-radio-group [role="radio"]:focus-visible {
  background: var(--grayscale-a3, rgba(255, 255, 255, 0.06)); outline: none;
}

/* Drop the boxed border around the product icons and keep the glyph centered
   in its slot (Fern's .use-icon adds a 1px border + padding). */
.fern-product-selector .fern-selection-item-icon,
.fern-product-selector-radio-group .fern-selection-item-icon {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fern-product-selector .fern-selection-item-icon svg,
.fern-product-selector-radio-group .fern-selection-item-icon svg {
  margin: auto;
}

/* Inline-SVG product icons get double-shrunk (span + svg both 50%); let the svg fill its span. */
.fern-product-selector .fern-selection-item-icon .fern-file-icon svg,
.fern-product-selector-radio-group .fern-selection-item-icon .fern-file-icon svg {
  width: 100%;
  height: 100%;
}

/* ── Landing page: hide the header tabs ─────────────────────────────────────
   The tabs are Fern chrome in the site header (layout.tabs-placement: header),
   so they render on the landing page too, where they're clutter. Fern has no
   per-page way to hide them - `disable-header` is site-wide only - so scope by
   detecting the landing markup with :has(), matching the other demos
   (conductorai hides .fern-header-tabs; okx and onedoc hide
   .fern-header-selectors the same way). */
body:has(.landing-container) .fern-header-tabs,
body:has(.landing-container) [class*="fern-header-tab"] {
  display: none !important;
}