/*fern-site-stylesheet*/@font-face {
    font-family: 'Source Sans 3';
    src: url('/_fern-files/avalara.docs.buildwithfern.com/0f73f35e08cde0a2f10c109c6e01d71459d97e4099ecd9a50f1b6c0209e4de2b/docs/assets/fonts/SourceSans3-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('/_fern-files/avalara.docs.buildwithfern.com/3b3a8b8e4a422ff71c9ffb0836a4d48ff337a4419b878214f65d6ebe0f59fa51/docs/assets/fonts/SourceSans3-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('/_fern-files/avalara.docs.buildwithfern.com/14527d193b0e30bc32ef931549a246cdfd286573bb12869b7e052b8101a39d38/docs/assets/fonts/SourceSans3-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('/_fern-files/avalara.docs.buildwithfern.com/ae35266f2ab0d5314ff9a04127931eb26c793e4f1269bb240046d4d2db4b7bb1/docs/assets/fonts/SourceSans3-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3 Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 93.76%;
    ascent-override: 109.21%;
    descent-override: 42.66%;
    line-gap-override: 0.00%;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 26px;
  --font-body: 'Source Sans 3', 'Source Sans 3 Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Source Sans 3', 'Source Sans 3 Fallback', 'Source Sans 3', 'Source Sans 3 Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fffcfb;
  --accent-2: #fff7f4;
  --accent-3: #ffebe4;
  --accent-4: #ffdbca;
  --accent-5: #ffccb6;
  --accent-6: #ffbda4;
  --accent-7: #f5aa8e;
  --accent-8: #eb916f;
  --accent-9: #e05200;
  --accent-10: #d14500;
  --accent-11: #cf4300;
  --accent-12: #592b19;

  --accent-a1: #ff400004;
  --accent-a2: #ff46000b;
  --accent-a3: #ff43001b;
  --accent-a4: #ff520035;
  --accent-a5: #ff4d0049;
  --accent-a6: #ff47015b;
  --accent-a7: #e9400071;
  --accent-a8: #dc3d0090;
  --accent-a9: #e05200;
  --accent-a10: #d14500;
  --accent-a11: #cf4300;
  --accent-a12: #471400e6;

  --accent-contrast: #fff;
  --accent-surface: #fff5f1cc;
  --accent-indicator: #e05200;
  --accent-track: #e05200;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.3% 0.0029 41.28);
      --accent-2: oklch(98.2% 0.0093 41.28);
      --accent-3: oklch(95.6% 0.0246 41.28);
      --accent-4: oklch(92.4% 0.0547 41.28);
      --accent-5: oklch(89.1% 0.0734 41.28);
      --accent-6: oklch(85.4% 0.0844 41.28);
      --accent-7: oklch(80.4% 0.0966 41.28);
      --accent-8: oklch(74.3% 0.1191 41.28);
      --accent-9: oklch(62.3% 0.1905 41.28);
      --accent-10: oklch(58.1% 0.189 41.28);
      --accent-11: oklch(57.5% 0.189 41.28);
      --accent-12: oklch(34.8% 0.0741 41.28);

      --accent-a1: color(display-p3 0.7569 0.2667 0.0235 / 0.016);
      --accent-a2: color(display-p3 0.9137 0.2902 0.0196 / 0.044);
      --accent-a3: color(display-p3 0.8863 0.2706 0.0039 / 0.102);
      --accent-a4: color(display-p3 0.8824 0.3137 0 / 0.2);
      --accent-a5: color(display-p3 0.8863 0.302 0.0039 / 0.275);
      --accent-a6: color(display-p3 0.8863 0.2784 0.0039 / 0.342);
      --accent-a7: color(display-p3 0.8078 0.2431 0.0039 / 0.424);
      --accent-a8: color(display-p3 0.7608 0.2314 0 / 0.542);
      --accent-a9: color(display-p3 0.7843 0.251 0 / 0.855);
      --accent-a10: color(display-p3 0.7216 0.2078 0 / 0.871);
      --accent-a11: color(display-p3 0.7137 0.2 0 / 0.875);
      --accent-a12: color(display-p3 0.2392 0.0706 0 / 0.887);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9961 0.9608 0.9529 / 0.8);
      --accent-indicator: oklch(62.3% 0.1905 41.28);
      --accent-track: oklch(62.3% 0.1905 41.28);
    }
  }
}


.light, :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) {
    .light, :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: #221b19;
  --accent-2: #291e1a;
  --accent-3: #3f2319;
  --accent-4: #54220e;
  --accent-5: #612913;
  --accent-6: #703520;
  --accent-7: #86442c;
  --accent-8: #a95636;
  --accent-9: #ff6a2c;
  --accent-10: #f25e1b;
  --accent-11: #ff9b72;
  --accent-12: #ffdbcb;

  --accent-a1: #fa00001f;
  --accent-a2: #fd0d0026;
  --accent-a3: #ff2a003c;
  --accent-a4: #fd250052;
  --accent-a5: #fd37005f;
  --accent-a6: #ff4f136e;
  --accent-a7: #fe642e85;
  --accent-a8: #ff723da8;
  --accent-a9: #ff6a2c;
  --accent-a10: #ff611bf2;
  --accent-a11: #ff9b72;
  --accent-a12: #ffdbcb;

  --accent-contrast: #fff;
  --accent-surface: #4e1c0b80;
  --accent-indicator: #ff6a2c;
  --accent-track: #ff6a2c;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(23.1% 0.0121 40.58);
      --accent-2: oklch(24.8% 0.0195 40.58);
      --accent-3: oklch(29.1% 0.0463 40.58);
      --accent-4: oklch(32.1% 0.0813 40.58);
      --accent-5: oklch(35.7% 0.0887 40.58);
      --accent-6: oklch(40.3% 0.089 40.58);
      --accent-7: oklch(46.5% 0.097 40.58);
      --accent-8: oklch(54.7% 0.1191 40.58);
      --accent-9: oklch(70.3% 0.1954 40.58);
      --accent-10: oklch(66.5% 0.1954 40.58);
      --accent-11: oklch(79.9% 0.1668 40.58);
      --accent-12: oklch(92.4% 0.0532 40.58);

      --accent-a1: color(display-p3 0.9961 0 0 / 0.087);
      --accent-a2: color(display-p3 0.9961 0.0588 0 / 0.112);
      --accent-a3: color(display-p3 1 0.2078 0 / 0.194);
      --accent-a4: color(display-p3 1 0.2 0 / 0.272);
      --accent-a5: color(display-p3 1 0.2745 0 / 0.321);
      --accent-a6: color(display-p3 1 0.3765 0.1216 / 0.379);
      --accent-a7: color(display-p3 1 0.4549 0.2314 / 0.466);
      --accent-a8: color(display-p3 1 0.502 0.2941 / 0.601);
      --accent-a9: color(display-p3 1 0.4784 0.2549 / 0.926);
      --accent-a10: color(display-p3 1 0.4471 0.2078 / 0.877);
      --accent-a11: color(display-p3 1 0.6588 0.498 / 0.943);
      --accent-a12: color(display-p3 1 0.8784 0.8196 / 0.976);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.2667 0.1176 0.051 / 0.5);
      --accent-indicator: oklch(70.3% 0.1954 40.58);
      --accent-track: oklch(70.3% 0.1954 40.58);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

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

.light, :root {
  color-scheme: light;
  --accent: rgba(224, 82, 0, 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(255, 106, 44, 1);
  --background: rgba(4, 33, 42, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #04212a;
}

/* ============================================== */
/* Avalara Developer — demo docs styles           */
/* Palette + type sampled from developer.avalara.com */
/* ============================================== */

:root {
  --ava-orange: #E05200;
  --ava-orange-light: #FF6A2C;
  --ava-teal: #044056;
  --ava-teal-deep: #032B39;
  --ava-ink: #1B252A;
  --ava-ink-soft: #4B5A61;
  --ava-line: #E2E8EA;
  --ava-surface: #F4F7F8;
  --font-body-font: "Source Sans 3", sans-serif;
  --font-headings-font: "Source Sans 3", sans-serif;
}

:root.dark {
  --ava-ink: #EAF1F3;
  --ava-ink-soft: #9FB2B9;
  --ava-line: #143540;
  --ava-surface: #06303D;
}

/* ==================== */
/* Landing              */
/* ==================== */

.ava-landing {
  width: 100%;
  color: var(--ava-ink);
}

/* Hide the header tabs on the landing page only (it has its own hero + CTAs).
   Scoped via :has() so every other page keeps its tabs. */
body:has(.ava-landing) .fern-header-tabs {
  display: none;
}

.ava-section-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

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

.ava-section-alt {
  background: var(--ava-surface);
}

/* Hero (curved, MCP) */
/* The teal curve is an SVG background-image; the area below the curve is the
   element's background-color — white in light mode, deep teal in dark mode —
   so it blends into the page instead of showing a hard dark band. */
.ava-hero {
  position: relative;
  width: 100%;
  min-height: 660px;
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSI2MzAiIHZpZXdCb3g9IjAgMCAxNDQwIDYzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMEgxNDQwVjYzMEMxNDQwIDYzMCAxMTQ4Ljc4IDUxNy4yMTkgNzIwIDUxNy4yMTlDMjkxLjIxOCA1MTcuMjE5IDAgNjMwIDAgNjMwVjBaIiBmaWxsPSIjMDQ0MDU2Ii8+Cjwvc3ZnPgo=");
  background-size: max(100%, 1553px);
  background-position: center bottom;
  background-repeat: no-repeat;
}

:root.dark .ava-hero {
  background-color: #04212A;
}

.ava-hero-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 6rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ava-hero-headline {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 0 0 1.125rem;
}

.ava-hero-sub {
  font-size: 1.25rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1.875rem;
}

/* Hero MCP card band */
.ava-hero-cards {
  position: absolute;
  left: 50%;
  bottom: 2.75rem;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  width: max-content;
  max-width: 100%;
}

.ava-hero-card-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 9.5rem;
  flex-shrink: 0;
}

.ava-hero-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  padding: 0.5rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.ava-hero-card--tilt-l { transform: rotate(-5deg); }
.ava-hero-card--tilt-r { transform: rotate(5deg); }

.ava-hero-card-icon {
  width: 78px;
  height: 78px;
  object-fit: contain;
}

.ava-hero-card--mid {
  flex-direction: column;
  gap: 0.4rem;
  width: 15rem;
  height: auto;
  min-height: 150px;
  padding: 0.85rem 0.85rem 0.7rem;
  margin-top: -1.25rem;
}

.ava-hero-card-img {
  width: 150px;
  height: auto;
  object-fit: contain;
}

.ava-hero-card-title {
  color: #5A707B;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  margin: 0;
}

/* Side-card labels sit in the below-curve area, so they follow the theme ink
   colour (dark on the white light-mode band, light on the dark-mode band). */
.ava-hero-card-label {
  margin-top: 0.75rem;
  width: 9.5rem;
  color: var(--ava-ink-soft);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
}

.ava-hero-arrow {
  width: 3.5rem;
  margin-top: 3.25rem;
  object-fit: contain;
  flex-shrink: 0;
}

.ava-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

.ava-btn-primary,
.ava-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none !important;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

.ava-btn-primary {
  background: var(--ava-orange);
  color: #FFFFFF !important;
  border: 1px solid var(--ava-orange);
}

.ava-btn-primary:hover {
  background: var(--ava-orange-light);
  border-color: var(--ava-orange-light);
}
.ava-btn-primary:focus-visible {
  background: var(--ava-orange-light);
  border-color: var(--ava-orange-light);
}

.ava-btn-secondary {
  background: transparent;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.ava-btn-secondary:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}
.ava-btn-secondary:focus-visible {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}

.ava-hero-meta {
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: #8FAAB2;
  text-transform: uppercase;
}

/* Build your integration: cards + code panel */
.ava-build-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2rem;
}

.ava-build-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ava-build-cards .ava-card {
  height: 100%;
}

.ava-build-install {
  font-family: var(--font-code-font, monospace);
  font-size: 0.85rem;
  color: var(--ava-ink-soft);
  background: var(--ava-surface);
  border: 1px solid var(--ava-line);
  border-radius: 8px;
  padding: 0.7rem 1rem;
}

.ava-build-install code {
  background: transparent;
  color: inherit;
}

.ava-build-install code::before {
  content: "$ ";
  color: var(--ava-orange);
}

/* Code panel (shared) */
.ava-code-panel {
  background: #06222C;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.ava-code-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.7rem 1rem;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ava-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.ava-dot.red { background: #FF5F57; }
.ava-dot.yellow { background: #FFBD2E; }
.ava-dot.green { background: #28C840; }

.ava-code-title {
  margin-left: 0.6rem;
  font-family: var(--font-code-font, monospace);
  font-size: 0.75rem;
  color: #7FE0C6;
  letter-spacing: 0.02em;
}

.ava-code-body {
  margin: 0;
  padding: 0.9rem 1.1rem;
  background: transparent;
  overflow-x: auto;
}

.ava-code-body code {
  font-family: var(--font-code-font, monospace);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: #B7CBD2;
  white-space: pre;
  background: transparent;
}

.ava-code-response {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  font-family: var(--font-code-font, monospace);
  font-size: 0.75rem;
}

.ava-resp-label {
  color: #04241d;
  background: #28C840;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

.ava-resp-body {
  color: #9FB6BD;
}

.ava-resp-body em {
  font-style: normal;
  color: #FFFFFF;
}

/* Stats */
.ava-section-stats {
  padding: 3rem 0;
  border-bottom: 1px solid var(--ava-line);
}

.ava-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.ava-stat {
  text-align: left;
  border-left: 3px solid var(--ava-orange);
  padding-left: 1.1rem;
}

.ava-stat-num {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ava-ink);
}

.ava-stat-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ava-ink-soft);
}

/* Section headings */
.ava-h2 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  color: var(--ava-ink);
  border-bottom: none;
}

.ava-lead {
  font-size: 1.125rem;
  color: var(--ava-ink-soft);
  margin: 0 0 2.5rem;
  max-width: 42rem;
}

/* Integration cards */
.ava-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.ava-card {
  display: block;
  padding: 1.75rem;
  border: 1px solid var(--ava-line);
  border-radius: 10px;
  background: #FFFFFF;
  text-decoration: none !important;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

:root.dark .ava-card {
  background: var(--ava-surface);
}

.ava-card:hover {
  border-color: var(--ava-orange);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(4, 64, 86, 0.1);
}
.ava-card:focus-visible {
  border-color: var(--ava-orange);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(4, 64, 86, 0.1);
}

.ava-card-kicker {
  font-family: var(--font-code-font, monospace);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ava-orange);
  margin-bottom: 0.85rem;
}

.ava-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ava-ink);
  margin-bottom: 0.5rem;
}

.ava-card-desc {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ava-ink-soft);
}

/* Product grid */
.ava-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.ava-product {
  padding: 1.5rem;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid var(--ava-line);
}

:root.dark .ava-product {
  background: var(--ava-teal-deep);
}

.ava-product-name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ava-ink);
  margin-bottom: 0.5rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--ava-orange);
}

.ava-product-desc {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ava-ink-soft);
}

/* Closing CTA */
.ava-section-cta {
  background: linear-gradient(160deg, var(--ava-teal) 0%, var(--ava-teal-deep) 100%);
  color: #FFFFFF;
}

.ava-section-cta .ava-h2 {
  color: #FFFFFF;
}

.ava-centered {
  text-align: center;
}

.ava-centered .ava-h2 {
  margin-left: auto;
  margin-right: auto;
}

.ava-centered-lead {
  margin-left: auto;
  margin-right: auto;
  color: #C6D6DC;
}

.ava-centered-row {
  justify-content: center;
}

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

  .ava-stats { grid-template-columns: repeat(2, 1fr); }
  .ava-cards { grid-template-columns: 1fr; }
  .ava-build-grid { grid-template-columns: 1fr; }
  .ava-product-grid { grid-template-columns: 1fr; }
  .ava-hero { min-height: 380px; background-size: max(180%, 1553px); }
  .ava-hero-inner { padding: 4rem 1.5rem 3.5rem; }
  .ava-hero-headline { font-size: 2.1rem; }
  .ava-hero-sub { font-size: 1.0625rem; }
  /* The floating card band is desktop-only, matching the source design. */
  .ava-hero-cards { display: none; }

}

/* ============================================================
   SDKs landing page (SdkLanding.tsx)
   ============================================================ */
.sdkl { max-width: 1160px; margin: 0 auto; padding: 2.5rem 2rem 4.5rem; }

/* ---- hero ---- */
.sdkl-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 2.5rem; align-items: center;
  padding: 3rem 3rem; border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, #04303f 0%, #065064 60%, #076a7f 100%);
}
.sdkl-hero::before {
  content: ""; position: absolute; top: -40%; right: -10%; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255,106,44,0.28), transparent 62%);
  pointer-events: none;
}
.sdkl-hero-copy { position: relative; z-index: 1; }
.sdkl-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; font-weight: 700; color: #8fe0f5; margin-bottom: 0.85rem; }
.sdkl-title { font-size: 2.6rem; line-height: 1.08; font-weight: 700; margin: 0 0 1rem; letter-spacing: -0.01em; }
.sdkl-lead { font-size: 1.0625rem; line-height: 1.6; color: rgba(255,255,255,0.86); margin: 0 0 1.75rem; max-width: 33rem; }
.sdkl-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sdkl-btn { display: inline-flex; align-items: center; padding: 0.7rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 0.95rem; text-decoration: none !important; transition: transform .12s, background .12s, border-color .12s; }
.sdkl-btn-primary { background: #FF6A2C; color: #fff !important; border: 1px solid #FF6A2C; }
.sdkl-btn-primary:hover { background: #ff7d45; transform: translateY(-1px); }
.sdkl-btn-primary:focus-visible { background: #ff7d45; transform: translateY(-1px); }
.sdkl-btn-ghost { background: rgba(255,255,255,0.06); color: #fff !important; border: 1px solid rgba(255,255,255,0.35); }
.sdkl-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.12); }
.sdkl-btn-ghost:focus-visible { border-color: #fff; background: rgba(255,255,255,0.12); }
.sdkl-metarow { margin-top: 1.5rem; font-size: 0.8125rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.55); }

/* ---- terminal / code panel ---- */
.sdkl-term { position: relative; z-index: 1; border-radius: 12px; overflow: hidden; background: #05222b; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.sdkl-term-bar { display: flex; align-items: center; gap: 7px; padding: 0.6rem 0.9rem; background: rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.07); }
.sdkl-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.sdkl-dot.r { background: #ff5f57; } .sdkl-dot.y { background: #ffbd2e; } .sdkl-dot.g { background: #28c840; }
.sdkl-term-name { margin-left: 0.5rem; font-family: var(--font-code-font, monospace); font-size: 0.75rem; color: #7fe0c6; }
.sdkl-term-body { margin: 0; padding: 1.1rem 1.25rem; overflow-x: auto; background: transparent; }
.sdkl-term-body code { font-family: var(--font-code-font, monospace); font-size: 0.8rem; line-height: 1.65; color: #cbd9de; white-space: pre; background: transparent; }
.sdkl-term-body .tk-k { color: #ff9d6c; } .sdkl-term-body .tk-s { color: #7fe0c6; }
.sdkl-term-body .tk-f { color: #8fd3ff; } .sdkl-term-body .tk-n { color: #f5c96b; } .sdkl-term-body .tk-c { color: #5f7b84; font-style: italic; }

/* ---- sections ---- */
.sdkl-section { margin-top: 3.25rem; }
.sdkl-h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.35rem; }
.sdkl-sub { font-size: 0.9375rem; color: var(--ava-ink-soft); margin: 0 0 1.4rem; }
.sdkl-grid { display: grid; gap: 1rem; }
.sdkl-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sdkl-grid-2 { grid-template-columns: repeat(2, 1fr); }

/* ---- product cards ---- */
.sdkl-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; min-height: 120px; padding: 1.35rem 1.25rem; border: 1px solid var(--ava-line); border-radius: 14px; background: var(--background, #fff); text-decoration: none; transition: border-color .12s, box-shadow .12s, transform .12s; }
.sdkl-card:hover { border-color: #FF6A2C; box-shadow: 0 8px 22px rgba(0,0,0,0.07); transform: translateY(-2px); }
.sdkl-card:focus-visible { border-color: #FF6A2C; box-shadow: 0 8px 22px rgba(0,0,0,0.07); transform: translateY(-2px); }
.sdkl-card-icon { color: #FF6A2C; }
.sdkl-card-icon svg { width: 30px; height: 30px; display: block; }
.sdkl-card-title { font-size: 0.95rem; font-weight: 600; color: var(--ava-ink); line-height: 1.3; }
.sdkl-badge { position: absolute; top: -0.6rem; left: 1.1rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: #d5f0fb; color: #0a5a78; font-size: 0.7rem; font-weight: 700; }
:root.dark .sdkl-badge { background: #0a3a4d; color: #7fd3ef; }

/* ---- language install cards ---- */
.sdkl-lang { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; border: 1px solid var(--ava-line); border-radius: 14px; background: var(--background, #fff); text-decoration: none; transition: border-color .12s, box-shadow .12s, transform .12s; }
.sdkl-lang:hover { border-color: #FF6A2C; box-shadow: 0 8px 22px rgba(0,0,0,0.07); transform: translateY(-2px); }
.sdkl-lang:focus-visible { border-color: #FF6A2C; box-shadow: 0 8px 22px rgba(0,0,0,0.07); transform: translateY(-2px); }
.sdkl-lang-icon { color: #FF6A2C; flex-shrink: 0; }
.sdkl-lang-icon svg { width: 38px; height: 38px; display: block; }
.sdkl-lang-body { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; min-width: 0; }
.sdkl-lang-name { font-size: 1rem; font-weight: 600; color: var(--ava-ink); }
.sdkl-lang-cmd { font-family: var(--font-code-font, monospace); font-size: 0.82rem; color: var(--ava-ink-soft); background: var(--ava-surface, #f4f7f8); border: 1px solid var(--ava-line); border-radius: 6px; padding: 0.35rem 0.6rem; width: fit-content; }
.sdkl-lang-arrow { color: #FF6A2C; font-size: 1.15rem; flex-shrink: 0; }

/* ---- feature cards ---- */
.sdkl-feature { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.35rem 1.25rem; border: 1px solid var(--ava-line); border-radius: 14px; background: var(--background, #fff); }
.sdkl-feature-icon { color: #FF6A2C; }
.sdkl-feature-icon svg { width: 26px; height: 26px; display: block; }
.sdkl-feature-title { font-size: 0.975rem; font-weight: 700; color: var(--ava-ink); }
.sdkl-feature-desc { font-size: 0.85rem; line-height: 1.5; color: var(--ava-ink-soft); }

/* ---- responsive ---- */
@media (max-width: 1000px) {

  .sdkl-hero { grid-template-columns: 1fr; padding: 2.25rem; }
  .sdkl-grid-4 { grid-template-columns: repeat(2, 1fr); }

}
@media (max-width: 600px) {

  .sdkl-title { font-size: 2rem; }
  .sdkl-grid-4, .sdkl-grid-2 { grid-template-columns: 1fr; }

}

/* ============================================================
   APIs landing page (ApiCatalog.tsx) — hero + search/pill filter
   ============================================================ */
.apix { max-width: 1160px; margin: 0 auto; padding: 2.5rem 2rem 4.5rem; }

/* ---- hero ---- */
.apix-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2rem; align-items: center;
  padding: 2.75rem 3rem; border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, #04303f 0%, #065064 60%, #076a7f 100%);
}
.apix-hero::before {
  content: ""; position: absolute; top: -45%; right: -8%; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(255,106,44,0.28), transparent 62%); pointer-events: none;
}
.apix-hero-copy { position: relative; z-index: 1; }
.apix-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; font-weight: 700; color: #8fe0f5; margin-bottom: 0.85rem; }
.apix-title { font-size: 2.5rem; line-height: 1.08; font-weight: 700; margin: 0 0 1rem; letter-spacing: -0.01em; }
.apix-lead { font-size: 1.0625rem; line-height: 1.6; color: rgba(255,255,255,0.86); margin: 0 0 1.75rem; max-width: 33rem; }
.apix-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.apix-btn { display: inline-flex; align-items: center; padding: 0.7rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 0.95rem; text-decoration: none !important; transition: transform .12s, background .12s, border-color .12s; }
.apix-btn-primary { background: #FF6A2C; color: #fff !important; border: 1px solid #FF6A2C; }
.apix-btn-primary:hover { background: #ff7d45; transform: translateY(-1px); }
.apix-btn-primary:focus-visible { background: #ff7d45; transform: translateY(-1px); }
.apix-btn-ghost { background: rgba(255,255,255,0.06); color: #fff !important; border: 1px solid rgba(255,255,255,0.35); }
.apix-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.12); }
.apix-btn-ghost:focus-visible { border-color: #fff; background: rgba(255,255,255,0.12); }
.apix-metarow { margin-top: 1.4rem; font-size: 0.8125rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.55); }
.apix-hero-art { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.apix-art-img { width: 260px; height: 260px; pointer-events: none; filter: drop-shadow(0 12px 30px rgba(0,0,0,0.25)); }

/* ---- controls ---- */
.apix-controls { margin-top: 2.5rem; }
.apix-search { position: relative; max-width: 420px; margin-bottom: 1rem; }
.apix-search-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ava-ink-soft); }
.apix-search-icon svg { width: 18px; height: 18px; display: block; }
.apix-search-input { width: 100%; padding: 0.65rem 0.9rem 0.65rem 2.5rem; border-radius: 10px; border: 1px solid var(--ava-line); background: var(--background, #fff); color: inherit; font-size: 0.9375rem; }
.apix-search-input:focus { outline: none; border-color: #FF6A2C; box-shadow: 0 0 0 3px rgba(255,106,44,0.15); }
.apix-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.apix-pill { padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--ava-line); background: var(--background, #fff); color: var(--ava-ink); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.apix-pill:hover { border-color: #FF6A2C; color: #FF6A2C; }
.apix-pill:focus-visible { border-color: #FF6A2C; color: #FF6A2C; }
.apix-pill.is-active { background: #FF6A2C; border-color: #FF6A2C; color: #fff; }
.apix-count { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--ava-ink-soft); }

/* ---- results ---- */
.apix-cat { margin-top: 2.25rem; }
.apix-cat-title { font-size: 1.375rem; font-weight: 700; margin: 0 0 1.1rem; }
.apix-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.apix-card { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.15rem 1.25rem; border: 1px solid var(--ava-line); border-radius: 14px; text-decoration: none; background: var(--background, #fff); transition: border-color .12s, box-shadow .12s, transform .12s; }
.apix-card:hover { border-color: #FF6A2C; box-shadow: 0 8px 22px rgba(0,0,0,0.07); transform: translateY(-2px); }
.apix-card:focus-visible { border-color: #FF6A2C; box-shadow: 0 8px 22px rgba(0,0,0,0.07); transform: translateY(-2px); }
.apix-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.apix-card-title { font-weight: 600; color: #FF6A2C; font-size: 0.9375rem; }
.apix-card-arrow { color: #FF6A2C; font-size: 1rem; flex-shrink: 0; }
.apix-card-desc { font-size: 0.875rem; line-height: 1.5; color: var(--ava-ink-soft); }

.apix-empty { margin-top: 2.5rem; padding: 2rem; text-align: center; color: var(--ava-ink-soft); border: 1px dashed var(--ava-line); border-radius: 14px; }
.apix-clear { background: none; border: none; color: #FF6A2C; font-weight: 600; cursor: pointer; padding: 0; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
 .apix-grid { grid-template-columns: repeat(2, 1fr); } 
}
@media (max-width: 900px) {
 .apix-hero { grid-template-columns: 1fr; padding: 2.25rem; } .apix-hero-art { display: none; } 
}
@media (max-width: 600px) {
 .apix-grid { grid-template-columns: 1fr; } 
}

/* ============================================================
   MCP Overview landing (McpLanding.tsx)
   ============================================================ */
.mcpx { max-width: 1160px; margin: 0 auto; padding: 2.5rem 2rem 4.5rem; }

/* hero */
.mcpx-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: center;
  padding: 2.75rem 3rem; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #04303f 0%, #065064 60%, #076a7f 100%); }
.mcpx-hero::before { content: ""; position: absolute; top: -45%; right: -8%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(255,106,44,0.28), transparent 62%); pointer-events: none; }
.mcpx-hero-copy { position: relative; z-index: 1; }
.mcpx-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; font-weight: 700; color: #8fe0f5; margin-bottom: 0.85rem; }
.mcpx-title { font-size: 2.5rem; line-height: 1.08; font-weight: 700; margin: 0 0 1rem; letter-spacing: -0.01em; }
.mcpx-lead { font-size: 1.0625rem; line-height: 1.6; color: rgba(255,255,255,0.86); margin: 0 0 1.75rem; max-width: 33rem; }
.mcpx-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.mcpx-btn { display: inline-flex; align-items: center; padding: 0.7rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 0.95rem; text-decoration: none !important; transition: transform .12s, background .12s, border-color .12s; }
.mcpx-btn-primary { background: #FF6A2C; color: #fff !important; border: 1px solid #FF6A2C; }
.mcpx-btn-primary:hover { background: #ff7d45; transform: translateY(-1px); }
.mcpx-btn-primary:focus-visible { background: #ff7d45; transform: translateY(-1px); }
.mcpx-btn-ghost { background: rgba(255,255,255,0.06); color: #fff !important; border: 1px solid rgba(255,255,255,0.35); }
.mcpx-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.12); }
.mcpx-btn-ghost:focus-visible { border-color: #fff; background: rgba(255,255,255,0.12); }
.mcpx-metarow { margin-top: 1.4rem; font-size: 0.8125rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.55); }

/* "what you can do" card in hero */
.mcpx-cando { position: relative; z-index: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 16px; padding: 1.5rem 1.6rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mcpx-cando-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; color: #fff; }
.mcpx-cando-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.mcpx-cando-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9375rem; line-height: 1.45; color: rgba(255,255,255,0.92); }
.mcpx-cando-check { flex-shrink: 0; color: #6ee7b7; width: 20px; height: 20px; margin-top: 1px; }
.mcpx-cando-check svg { width: 20px; height: 20px; display: block; }

/* sections */
.mcpx-section { margin-top: 3.25rem; }
.mcpx-h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1.4rem; color: var(--ava-ink); }

/* steps */
.mcpx-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mcpx-step { display: flex; gap: 1rem; padding: 1.4rem 1.5rem; border: 1px solid var(--ava-line); border-radius: 14px; background: var(--background, #fff); }
.mcpx-step-num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: #FF6A2C; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mcpx-step-title { font-weight: 700; color: var(--ava-ink); }
.mcpx-step-body { margin: 0.4rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--ava-ink-soft); }

/* troubleshooting */
.mcpx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mcpx-trouble { padding: 1.25rem 1.35rem; border: 1px solid var(--ava-line); border-radius: 14px; background: var(--background, #fff); }
.mcpx-trouble-title { font-weight: 700; color: var(--ava-ink); }
.mcpx-trouble-desc { margin: 0.45rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--ava-ink-soft); }
.mcpx-help { margin-top: 1.25rem; font-size: 0.9rem; color: var(--ava-ink-soft); }
.mcpx-help a { color: #FF6A2C; font-weight: 600; }

/* responsive */
@media (max-width: 1000px) {
 .mcpx-hero { grid-template-columns: 1fr; padding: 2.25rem; } .mcpx-steps, .mcpx-grid-3 { grid-template-columns: 1fr; } 
}

/* "Open in Postman" button (postman-button.js) — sizing/shape cloned from Fern's
   Try it button at runtime; only ensure the logo + label line up cleanly here. */
/* "Open in Postman" button — Postman orange, theme-aware.
   Colors use !important to override the cloned Try-it Tailwind classes. */
.postman-tryit-btn {
  text-decoration: none !important;
  margin-left: 0.5rem;
  background-color: #ff6c37 !important;
  border-color: #ff6c37 !important;
  color: #ffffff !important;
}
.postman-tryit-btn:hover {
  background-color: #f45d24 !important;
  border-color: #f45d24 !important;
}
.postman-tryit-btn:focus-visible {
  background-color: #f45d24 !important;
  border-color: #f45d24 !important;
}
.postman-tryit-btn svg { flex-shrink: 0; }
/* keep the Postman logo's circle readable on the orange pill in both themes */
.postman-tryit-btn svg path[fill="white"],
.postman-tryit-btn svg circle[fill="#fff"] { fill: #ffffff; }

/* dark mode: inverse of light — white fill with Postman-orange text + logo. */
:root.dark .postman-tryit-btn {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #ff6c37 !important;
}
:root.dark .postman-tryit-btn:hover {
  background-color: #ffe7dc !important;
  border-color: #ffe7dc !important;
}
:root.dark .postman-tryit-btn:focus-visible {
  background-color: #ffe7dc !important;
  border-color: #ffe7dc !important;
}
/* invert the Postman logo on the white pill: orange circle + white mark */
:root.dark .postman-tryit-btn svg path[fill="white"] { fill: #ff6c37 !important; }
:root.dark .postman-tryit-btn svg path[fill="#FF6C37"] { fill: #ffffff !important; }

/* ============================================================
   Product switcher dropdown — horizontal 2-col card grid, tighter spacing.
   Root is the Radix menu keyed by data-testid (there is no
   .product-dropdown-content CLASS). Items: .fern-product-item-link ->
   .fern-selection-item{,-icon,-title,-end-icon}.
   ============================================================ */
[data-testid="product-dropdown-content"] {
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14) !important;
  width: 480px;
  max-width: 92vw;
  /* match the docs body font (portal can otherwise fall back to a default) */
  font-family: "Source Sans 3", var(--font-body-font, sans-serif) !important;
}
[data-testid="product-dropdown-content"] .fern-selection-item-title,
[data-testid="product-dropdown-content"] .fern-selection-item-subtitle {
  font-family: "Source Sans 3", var(--font-body-font, sans-serif) !important;
  letter-spacing: normal;
}
/* the inner scroll viewport adds p-1; no scrollbar needed for a short grid */
[data-testid="product-dropdown-content"] .fern-scroll-area-viewport { overflow: hidden !important; }

/* lay the products out horizontally in a 2-column grid */
[data-testid="product-dropdown-content"] .fern-product-selector-radio-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
  width: 100%;
}

/* each product link fills its grid cell */
[data-testid="product-dropdown-content"] .fern-product-item-link {
  display: block;
  border-radius: 10px;
  text-decoration: none !important;
}
[data-testid="product-dropdown-content"] .fern-product-item { height: 100%; }

/* compact horizontal card (icon chip + label) */
[data-testid="product-dropdown-content"] .fern-selection-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.7rem;
  height: 100%;
  padding: 0.6rem 0.7rem !important;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-testid="product-dropdown-content"] .fern-product-item-link:hover .fern-selection-item,
[data-testid="product-dropdown-content"] .fern-product-item-link[data-state="checked"] .fern-selection-item,
[data-testid="product-dropdown-content"] .fern-product-item-link[aria-checked="true"] .fern-selection-item {
  background: var(--grayscale-a3, rgba(0, 0, 0, 0.05));
  border-color: var(--ava-line, rgba(0, 0, 0, 0.08));
}
[data-testid="product-dropdown-content"] .fern-product-item-link:focus-within .fern-selection-item {
  background: var(--grayscale-a3, rgba(0, 0, 0, 0.05));
  border-color: var(--ava-line, rgba(0, 0, 0, 0.08));
}

/* shrink the oversized icon box into a neat chip */
[data-testid="product-dropdown-content"] .fern-selection-item-icon {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--ava-line, rgba(0, 0, 0, 0.08));
  background: var(--grayscale-a2, rgba(0, 0, 0, 0.03));
  padding: 0 !important;
  font-size: 1.05rem;
  line-height: 1;
}
[data-testid="product-dropdown-content"] .fern-selection-item-icon svg {
  width: 1.1rem !important;
  height: 1.1rem !important;
}
[data-testid="product-dropdown-content"] .fern-selection-item-title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
}
/* the per-item chevron isn't useful in a grid — hide it for a cleaner look */
[data-testid="product-dropdown-content"] .fern-selection-item-end-icon { display: none !important; }

@media (max-width: 640px) {

  [data-testid="product-dropdown-content"] { width: auto; }
  [data-testid="product-dropdown-content"] .fern-product-selector-radio-group {
    grid-template-columns: 1fr;
  }

}

/* ============================================================
   Header alignment — vertically center logo, product/version switchers,
   search, and nav links on one row. Fern uses `lg:items-start` on the logo
   wrapper, which top-aligns the logo out of line with the switchers.
   ============================================================ */
/* Kill the top-aligning utility on the logo wrapper... */
.fern-header-content [class~="lg:items-start"] { align-items: center !important; }
.fern-header-content,
.fern-header-logo-container,
.fern-header-logo-container > div,
.fern-header-selectors,
.fern-header-switchers,
.fern-header-search-bar,
.fern-header-navbar-links {
  align-items: center !important;
}
/* ...and bulletproof it: margin-block auto vertically centers each header item
   inside the flex row regardless of any stray align-items upstream. */
.fern-header-logo-container,
.fern-header-logo-container a,
.fern-header-logo-container img,
.fern-header-selectors,
.fern-header-search-bar,
.fern-header-navbar-links {
  align-self: center !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
}