/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 30px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 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: #fbfdff;
  --accent-2: #f5f9ff;
  --accent-3: #e9f3ff;
  --accent-4: #d9ecff;
  --accent-5: #c8e2fe;
  --accent-6: #b3d5fa;
  --accent-7: #9ac4f1;
  --accent-8: #74ace7;
  --accent-9: #0066b2;
  --accent-10: #0057a2;
  --accent-11: #096ab6;
  --accent-12: #13375a;

  --accent-a1: #0080ff04;
  --accent-a2: #0066ff0a;
  --accent-a3: #0074ff16;
  --accent-a4: #0080ff26;
  --accent-a5: #0079fb37;
  --accent-a6: #0073ef4c;
  --accent-a7: #006bdc65;
  --accent-a8: #0067d38b;
  --accent-a9: #0066b2;
  --accent-a10: #0057a2;
  --accent-a11: #0065b3f6;
  --accent-a12: #00274dec;

  --accent-contrast: #fff;
  --accent-surface: #f3f8ffcc;
  --accent-indicator: #0066b2;
  --accent-track: #0066b2;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.003 250.3);
      --accent-2: oklch(98.1% 0.0085 250.3);
      --accent-3: oklch(96.1% 0.0197 250.3);
      --accent-4: oklch(93.5% 0.0336 250.3);
      --accent-5: oklch(90.3% 0.0474 250.3);
      --accent-6: oklch(86.2% 0.0628 250.3);
      --accent-7: oklch(80.6% 0.078 250.3);
      --accent-8: oklch(73% 0.1042 250.3);
      --accent-9: oklch(50.3% 0.1438 250.3);
      --accent-10: oklch(45.4% 0.1438 250.3);
      --accent-11: oklch(51.7% 0.1438 250.3);
      --accent-12: oklch(33.1% 0.0743 250.3);

      --accent-a1: color(display-p3 0.0235 0.5137 1 / 0.016);
      --accent-a2: color(display-p3 0.0235 0.349 0.8941 / 0.036);
      --accent-a3: color(display-p3 0.0078 0.4078 0.9529 / 0.079);
      --accent-a4: color(display-p3 0.0078 0.4157 0.9451 / 0.134);
      --accent-a5: color(display-p3 0.0078 0.4039 0.9216 / 0.197);
      --accent-a6: color(display-p3 0.0039 0.3804 0.8863 / 0.271);
      --accent-a7: color(display-p3 0.0039 0.349 0.8078 / 0.361);
      --accent-a8: color(display-p3 0.0039 0.3412 0.7725 / 0.499);
      --accent-a9: color(display-p3 0 0.2706 0.6118 / 0.836);
      --accent-a10: color(display-p3 0 0.2314 0.5529 / 0.863);
      --accent-a11: color(display-p3 0 0.2784 0.6235 / 0.82);
      --accent-a12: color(display-p3 0 0.1098 0.2549 / 0.887);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9529 0.9725 0.9961 / 0.8);
      --accent-indicator: oklch(50.3% 0.1438 250.3);
      --accent-track: oklch(50.3% 0.1438 250.3);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfcfd;
  --grayscale-2: #f9f9fb;
  --grayscale-3: #f0f0f3;
  --grayscale-4: #e8e8ec;
  --grayscale-5: #e0e1e6;
  --grayscale-6: #d9d9e0;
  --grayscale-7: #cdced6;
  --grayscale-8: #b9bbc6;
  --grayscale-9: #8b8d98;
  --grayscale-10: #80838d;
  --grayscale-11: #60646c;
  --grayscale-12: #1c2024;

  --grayscale-a1: #00005503;
  --grayscale-a2: #00005506;
  --grayscale-a3: #0000330f;
  --grayscale-a4: #00002d17;
  --grayscale-a5: #0009321f;
  --grayscale-a6: #00002f26;
  --grayscale-a7: #00062e32;
  --grayscale-a8: #00083046;
  --grayscale-a9: #00051d74;
  --grayscale-a10: #00071b7f;
  --grayscale-a11: #0007149f;
  --grayscale-a12: #000509e3;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.988 0.988 0.992);
      --grayscale-2: color(display-p3 0.976 0.976 0.984);
      --grayscale-3: color(display-p3 0.94 0.941 0.953);
      --grayscale-4: color(display-p3 0.908 0.909 0.925);
      --grayscale-5: color(display-p3 0.88 0.881 0.901);
      --grayscale-6: color(display-p3 0.85 0.852 0.876);
      --grayscale-7: color(display-p3 0.805 0.808 0.838);
      --grayscale-8: color(display-p3 0.727 0.733 0.773);
      --grayscale-9: color(display-p3 0.547 0.553 0.592);
      --grayscale-10: color(display-p3 0.503 0.512 0.549);
      --grayscale-11: color(display-p3 0.379 0.392 0.421);
      --grayscale-12: color(display-p3 0.113 0.125 0.14);

      --grayscale-a1: #00005503;
      --grayscale-a2: #00005506;
      --grayscale-a3: #0000330f;
      --grayscale-a4: #00002d17;
      --grayscale-a5: #0009321f;
      --grayscale-a6: #00002f26;
      --grayscale-a7: #00062e32;
      --grayscale-a8: #00083046;
      --grayscale-a9: #00051d74;
      --grayscale-a10: #00071b7f;
      --grayscale-a11: #0007149f;
      --grayscale-a12: #000509e3;

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


.dark {
  --accent-1: #08121c;
  --accent-2: #0d1926;
  --accent-3: #052848;
  --accent-4: #003363;
  --accent-5: #003f75;
  --accent-6: #034d87;
  --accent-7: #105c9d;
  --accent-8: #126ebb;
  --accent-9: #0066b2;
  --accent-10: #095898;
  --accent-11: #6ebaff;
  --accent-12: #c9e4ff;

  --accent-a1: #002bf90a;
  --accent-a2: #0073fa15;
  --accent-a3: #0077fc3a;
  --accent-a4: #0075fd57;
  --accent-a5: #0080ff6a;
  --accent-a6: #008afd7e;
  --accent-a7: #1091fe96;
  --accent-a8: #1293ffb6;
  --accent-a9: #008fffac;
  --accent-a10: #038fff90;
  --accent-a11: #6ebaff;
  --accent-a12: #c9e4ff;

  --accent-contrast: #fff;
  --accent-surface: #0a213980;
  --accent-indicator: #0066b2;
  --accent-track: #0066b2;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(17.9% 0.0262 250.3);
      --accent-2: oklch(20.9% 0.0307 250.3);
      --accent-3: oklch(27.2% 0.07 250.3);
      --accent-4: oklch(31.7% 0.1013 250.3);
      --accent-5: oklch(36.4% 0.1108 250.3);
      --accent-6: oklch(41.2% 0.1157 250.3);
      --accent-7: oklch(46.8% 0.125 250.3);
      --accent-8: oklch(53% 0.1438 250.3);
      --accent-9: oklch(50.3% 0.1438 250.3);
      --accent-10: oklch(45.4% 0.125 250.3);
      --accent-11: oklch(77% 0.1346 250.3);
      --accent-12: oklch(90.8% 0.0494 250.3);

      --accent-a1: color(display-p3 0 0.1843 1 / 0.034);
      --accent-a2: color(display-p3 0.0196 0.4745 0.9922 / 0.077);
      --accent-a3: color(display-p3 0.051 0.4667 1 / 0.217);
      --accent-a4: color(display-p3 0.0824 0.4627 1 / 0.327);
      --accent-a5: color(display-p3 0.1294 0.5098 1 / 0.399);
      --accent-a6: color(display-p3 0.1843 0.5569 1 / 0.475);
      --accent-a7: color(display-p3 0.2431 0.5843 1 / 0.564);
      --accent-a8: color(display-p3 0.2627 0.5882 1 / 0.687);
      --accent-a9: color(display-p3 0.2196 0.5686 1 / 0.649);
      --accent-a10: color(display-p3 0.2196 0.5725 1 / 0.543);
      --accent-a11: color(display-p3 0.5137 0.7412 1 / 0.975);
      --accent-a12: color(display-p3 0.8196 0.902 1 / 0.988);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.0588 0.1255 0.2118 / 0.5);
      --accent-indicator: oklch(50.3% 0.1438 250.3);
      --accent-track: oklch(50.3% 0.1438 250.3);
    }
  }
}


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

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

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

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

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

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

.light, :root {
  color-scheme: light;
  --accent: rgba(0, 102, 178, 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(0, 102, 178, 1);
  --background: rgba(17, 17, 19, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #111113;
}

:root {
  /* Gray Scale */
  --gray-90: #0e0d0c;
  --gray-80: #12110f;
  --gray-70: #23221e;
  --gray-60: #2c2a25;
  --gray-50: #565551;
  --gray-40: #777674;
  --gray-30: #abaaa8;
  --gray-20: #d5d4d3;
  --gray-10: #eaeae9;
  --gray-0: #f4f4f4;

  /* Hero design tokens */
  --hero-citi-blue: #056DAE;
  --hero-citi-blue-700: #0A5A90;
  --hero-citi-navy: #002D5C;
  --hero-ink: #0B1F33;
  --hero-ink-2: #3A4A5C;
  --hero-ink-3: #64748B;
  --hero-line: #E3E8EF;
  --hero-line-2: #EEF2F6;
  --hero-bg-soft: #F6F9FC;
  --hero-green: #2F9E44;
  --hero-green-2: #8CE99A;
  --hero-float-amp: 1;
  --hero-float-speed: 1;
}

.landing-hero {
  min-height: 860px;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 80px;
}

/* Product switcher — 1.75x the icon size */
.fern-product-item .fern-selection-item-icon.use-icon {
  height: 63px !important;
  width: 42px !important;
}

.fern-product-item .fern-selection-item-icon svg {
  width: 28px !important;
  height: 28px !important;
}

/* Breathing animation keyframes - more subtle */
@keyframes breathe-corner-1 {

  0%,
  100% {
    opacity: 0.08;
    transform: scale(1);
  }

  50% {
    opacity: 0.15;
    transform: scale(1.05);
  }
}

@keyframes breathe-corner-2 {

  0%,
  100% {
    opacity: 0.06;
    transform: scale(1);
  }

  50% {
    opacity: 0.12;
    transform: scale(1.05);
  }
}

/* Light mode - fade out at top and bottom */
.light .landing-hero {
  position: relative;
  background:
    linear-gradient(to top, rgb(255, 255, 255) 0%, transparent 15%, transparent 90%, rgb(255, 255, 255) 100%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 30%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1602 1602'%3E%3Cdefs%3E%3Cpattern id='grid' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23000000' stroke-opacity='0.08' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3C/svg%3E") center bottom / 100% auto no-repeat,
    linear-gradient(225deg, var(--accent-a6) 0%, transparent 15%, transparent 85%, var(--accent-a6) 100%);
}

.light .landing-hero::before,
.light .landing-hero::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.light .landing-hero::before {
  background: radial-gradient(circle at top right, var(--accent-a6) 0%, transparent 40%);
  opacity: 0.15;
  animation: breathe-corner-1 8s ease-in-out infinite;
}

.light .landing-hero::after {
  background: radial-gradient(circle at bottom left, var(--accent-a6) 0%, transparent 40%);
  opacity: 0.12;
  animation: breathe-corner-2 8s ease-in-out infinite 4s;
}

/* Dark mode - fade out at top and bottom */
.dark .landing-hero {
  position: relative;
  background:
    linear-gradient(to top, var(--header-background) 0%, transparent 15%, transparent 90%, var(--header-background) 100%),
    radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 30%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1602 1602'%3E%3Cdefs%3E%3Cpattern id='grid' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23FFFFFF' stroke-opacity='0.06' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3C/svg%3E") center bottom / 100% auto no-repeat,
    linear-gradient(135deg, rgba(100, 60, 150, 0.12) 0%, transparent 15%, transparent 85%, rgba(80, 50, 130, 0.1) 100%);
}

.dark .landing-hero::before,
.dark .landing-hero::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.dark .landing-hero::before {
  background: radial-gradient(circle at top right, rgba(100, 60, 150, 1) 0%, transparent 40%);
  opacity: 0.08;
  animation: breathe-corner-1 8s ease-in-out infinite;
}

.dark .landing-hero::after {
  background: radial-gradient(circle at bottom left, rgba(80, 50, 130, 1) 0%, transparent 40%);
  opacity: 0.06;
  animation: breathe-corner-2 8s ease-in-out infinite 4s;
}

.landing-hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  max-width: 1200px;
  width: 100%;
}

.landing-hero-content {
  text-align: center;
  max-width: 800px;
  margin-bottom: 6rem;
}

.landing-hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  width: 100%;
  margin-bottom: 4rem;
}

.landing-hero-text {
  flex: 1;
  text-align: left;
  max-width: 500px;
}

.landing-hero-image-container {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.landing-hero-image {
  max-width: 90%;
  height: auto;
  border-radius: 12px;
}

.landing-hero-label {
  display: inline-block;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.landing-hero-title {
  /* color: #1f2937; */
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px 0;
}

/* Dark mode text colors */
:root[data-theme="dark"] .landing-hero-label {
  color: #A555F5;
}

:root[data-theme="dark"] .landing-hero-title {
  color: #ffffff;
}

:root[data-theme="dark"] .landing-hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
}

/* Hide anchor links on landing hero title */
.landing-hero .fern-anchor,
.landing-hero .heading-anchor,
.landing-hero a.anchor,
.landing-hero h1>a[aria-hidden="true"],
.landing-hero-title .fern-anchor,
.landing-hero-title .heading-anchor,
.landing-hero-title a.anchor,
.landing-hero-title>a[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
}

.landing-hero-subtitle {
  /* color: rgba(31, 41, 55, 0.9); */
  font-size: 20px;
  line-height: 1.6;
  margin: 0;
}

/* Landing Hero Cards */
.landing-hero-cards {
  width: 100%;
  max-width: 1000px;
}

/* Frosted glass card styling - Light mode */
.landing-hero-cards .fern-card {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.landing-hero-cards .fern-card:hover {
  transform: translateY(-2px);
}
.landing-hero-cards .fern-card:focus-visible {
  transform: translateY(-2px);
}

/* Frosted glass card styling - Dark mode */
.dark .landing-hero-cards .fern-card {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dark .landing-hero-cards .fern-card:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.dark .landing-hero-cards .fern-card:focus-visible {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.dark .landing-hero-cards .fern-card-header,
.dark .landing-hero-cards .fern-card h3,
.dark .landing-hero-cards .fern-card p,
.dark .landing-hero-cards .fern-card span,
.dark .landing-hero-cards .fern-card div {
  color: #ffffff !important;
}

.dark .landing-hero-cards .fern-card p {
  color: rgba(255, 255, 255, 0.8) !important;
}

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

  .landing-hero {
    min-height: auto;
    padding: 40px 24px;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .landing-hero-title {
    font-size: 32px;
  }

  .landing-hero-subtitle {
    font-size: 16px;
  }

  .landing-hero-container {
    gap: 30px;
  }

  .landing-hero-section {
    flex-direction: column;
    gap: 40px;
  }

  .landing-hero-text {
    text-align: center;
    max-width: 100%;
  }

  .landing-hero-image-container {
    justify-content: center;
  }

}
/* Variant Selector Styles */
.fern-variant-selector {

  .fern-selection-item {
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 8px 11px;
  }

  .fern-selection-item-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

}

.fern-selection-item .fern-selection-item-icon.use-icon {
  border: none !important;
  margin: 0 8px 0 8px !important;
  height: 36px;
  width: 24px;
}

.fern-selection-item .fern-selection-item-icon .fern-file-icon {
  height: 16px !important;
  width: 16px !important;
}

.fern-selection-item:hover .fern-file-icon,
.fern-selection-item:hover svg {
  scale: none;
}
.fern-selection-item:focus-within .fern-file-icon,
.fern-selection-item:focus-within svg {
  scale: none;
}

.fern-selection-item .fern-selection-item-title {
  font-weight: 500;
  font-size: 14px;
}

.fern-variant-selector .fern-selection-item > div {
  gap: 0 !important;
}

.fern-variant-selector-radio-group .fern-dropdown-item[role="menuitemradio"] {
  margin-bottom: 0;
  border-radius: 0;
  padding: 12px !important;
  display: flex;
  align-items: center;
}

.fern-variant-selector-radio-group .fern-dropdown-item[role="menuitemradio"]:hover {
  color: default
}
.fern-variant-selector-radio-group .fern-dropdown-item[role="menuitemradio"]:focus-visible {
  color: default
}

.fern-variant-selector-radio-group .fern-dropdown-item[role="menuitemradio"] > div {
  gap: 0 !important;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Hide the default checkmark */
.fern-variant-selector-radio-group
  .fern-dropdown-item[role="menuitemradio"]
  .lucide.lucide-check.size-icon {
  display: none;
}

/* Variant selector dropdown icon size */
.fern-variant-selector-radio-group
  .fern-dropdown-item[role="menuitemradio"]
  span {
  width: 16px !important;
  height: 16px !important;
}

.fern-variant-selector-radio-group
  .fern-dropdown-item[role="menuitemradio"]
  svg {
  width: 16px !important;
  height: 16px !important;
}

.fern-dropdown-item[role="menuitemradio"] p {
  font-weight: 500;
  font-size: 14px;
  margin: 0;
  flex: 1;
}

/* Align the end icon (chevron/check) */
.fern-selection-item-end-icon {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Variant Selector Dropdown Styles */
.fern-variant-selector-dropdown [data-radix-scroll-area-viewport] {
  padding: 0 !important;
}

.fern-variant-selector-dropdown {
  width: var(--radix-dropdown-menu-trigger-width) !important;
  max-height: none !important;
}

/* Override Radix's inline min-width on the popper wrapper */
[data-radix-popper-content-wrapper]:has(.fern-variant-selector-dropdown) {
  min-width: 0 !important;
}

/* Dropdown & selection item hover states */
.fern-variant-selector > fern-selection-item:hover,
.fern-selection-item[data-testid="variant-dropdown"]:hover,
.fern-dropdown-item:hover,
.fern-product-item > div.fern-selection-item:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}
.fern-variant-selector > fern-selection-item:focus-visible,
.fern-selection-item[data-testid="variant-dropdown"]:focus-visible,
.fern-dropdown-item:focus-visible,
.fern-product-item > div.fern-selection-item:focus-visible {
  background: rgba(0, 0, 0, 0.03) !important;
}

.fern-dropdown-item:hover {
  border: none !important;
}
.fern-dropdown-item:focus-visible {
  border: none !important;
}

.fern-dropdown-item:hover * {
  color: inherit !important;
}
.fern-dropdown-item:focus-within * {
  color: inherit !important;
}

.fern-dropdown-item[role="menuitemradio"] > div > div {
  border: none !important;
}

.fern-variant-selector > fern-selection-item:hover,
.fern-selection-item[data-testid="variant-dropdown"]:hover,
.fern-dropdown-item:hover,
.fern-product-item > div.fern-selection-item:hover {
  background: var(--gray-0) !important;
}
.fern-variant-selector > fern-selection-item:focus-visible,
.fern-selection-item[data-testid="variant-dropdown"]:focus-visible,
.fern-dropdown-item:focus-visible,
.fern-product-item > div.fern-selection-item:focus-visible {
  background: var(--gray-0) !important;
}

.fern-dropdown-item:hover {
  border: none !important;
}
.fern-dropdown-item:focus-visible {
  border: none !important;
}

.fern-dropdown-item:hover * {
  color: var(--gray-90) !important;
}
.fern-dropdown-item:focus-within * {
  color: var(--gray-90) !important;
}

/* =====================================================================
   HERO SECTION — animated three-window stage
   ===================================================================== */

/* Background glow + grid */
.landing-hero {
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 500px at 88% 28%, rgba(5,109,174,.14), transparent 60%),
    radial-gradient(700px 500px at 10% 80%, rgba(14,165,233,.08), transparent 60%);
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,23,42,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 40%, transparent 80%);
}
.landing-hero > * {
  position: relative;
  z-index: 1;
}
.dark .hero-bg::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
}

/* Eyebrow pill */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-citi-blue);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(5,109,174,.08);
  border: 1px solid rgba(5,109,174,.15);
}
.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hero-citi-blue);
  display: inline-block;
}
.eyebrow-wrap {
  margin-bottom: 18px;
}

/* Title accent gradient */
.hero-title-accent {
  background: linear-gradient(92deg, var(--hero-citi-blue), #1f8ed6 55%, var(--hero-citi-navy));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* CTA buttons */
.hero-cta-row {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none;
}
.hero-btn-primary {
  background: var(--hero-citi-navy);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 1px 2px rgba(0,45,92,.2);
}
.hero-btn-primary:hover {
  background: #001f44;
  color: #fff;
}
.hero-btn-primary:focus-visible {
  background: #001f44;
  color: #fff;
}
.hero-btn-outline {
  background: #fff;
  color: var(--hero-ink);
  border-color: var(--hero-line);
}
.hero-btn-outline:hover {
  border-color: #CBD5E1;
  background: var(--hero-bg-soft);
  color: var(--hero-ink);
}
.hero-btn-outline:focus-visible {
  border-color: #CBD5E1;
  background: var(--hero-bg-soft);
  color: var(--hero-ink);
}
.dark .hero-btn-outline {
  background: rgba(255,255,255,.06);
  color: #e5e7eb;
  border-color: rgba(255,255,255,.12);
}
.dark .hero-btn-outline:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.dark .hero-btn-outline:focus-visible {
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* Meta trust-signal row */
.hero-meta-row {
  display: flex;
  gap: 24px;
  margin-top: 32px;
  color: var(--hero-ink-3);
  font-size: 13px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hero-green);
  box-shadow: 0 0 0 3px rgba(47,158,68,.15);
  display: inline-block;
}
.dark .hero-meta-row {
  color: rgba(255,255,255,.5);
}

/* ---- Stage (three-window area) ---- */
.hero-stage {
  position: relative;
  aspect-ratio: 1 / 0.92;
  min-height: 480px;
  perspective: 1400px;
  flex: 1;
}

/* Base layer card */
.hero-layer {
  position: absolute;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 20px 40px -12px rgba(8,47,99,.22),
    0 8px 18px -10px rgba(8,47,99,.18),
    0 1px 2px rgba(8,47,99,.06);
  will-change: transform;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.06);
}
.dark .hero-layer {
  background: #1a2233;
  border-color: rgba(255,255,255,.08);
  box-shadow:
    0 20px 40px -12px rgba(0,0,0,.5),
    0 8px 18px -10px rgba(0,0,0,.4),
    0 1px 2px rgba(0,0,0,.3);
}

/* ---- Window 1: API code panel (back, largest) ---- */
.hero-w-api {
  left: 8%; top: 2%;
  width: 76%; height: 78%;
  animation: hero-float-a calc(9s / var(--hero-float-speed)) ease-in-out infinite;
}
.hero-tabs {
  display: flex;
  background: #1F2937;
  color: #E5E7EB;
  font-size: 12px;
  font-weight: 500;
  padding: 0 8px;
  height: 36px;
  align-items: stretch;
  gap: 2px;
}
.hero-tab {
  padding: 0 14px;
  display: flex;
  align-items: center;
  color: #9CA3AF;
  border-right: 1px solid rgba(255,255,255,.04);
  background: transparent;
  border-top: none;
  border-bottom: none;
  border-left: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.hero-tab:hover {
  color: #E5E7EB;
  background: rgba(255,255,255,.04);
}
.hero-tab:focus-visible {
  color: #E5E7EB;
  background: rgba(255,255,255,.04);
}
.hero-tab.active {
  background: #fff;
  color: var(--hero-ink);
  border-radius: 8px 8px 0 0;
  margin-top: 6px;
  height: calc(100% - 6px);
  border: 1px solid var(--hero-line);
  border-bottom: none;
  font-weight: 600;
}
.dark .hero-tab.active {
  background: #1a2233;
  color: #e5e7eb;
  border-color: rgba(255,255,255,.1);
}
.hero-tab:last-child {
  border-right: none;
}
.hero-code {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  padding: 18px 22px;
  color: #334155;
  background: #fff;
  height: calc(100% - 36px);
  overflow: hidden;
  position: relative;
}
.dark .hero-code {
  background: #1a2233;
  color: #cbd5e1;
}
.hero-code-panel {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
  position: absolute;
  inset: 0;
  padding: 18px 22px;
}
.hero-code-panel.active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
}
.hero-gutter {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 34px;
  border-right: 1px solid var(--hero-line-2);
  color: #B5BFCC;
  text-align: right;
  padding: 18px 8px 0 0;
  font-size: 11px;
}
.hero-lines {
  padding-left: 32px;
}
/* Code syntax colors */
.hc-key  { color: #056DAE; }
.hc-str  { color: #15803D; }
.hc-punc { color: #64748B; }
.hc-num  { color: #B45309; }
.dark .hc-key  { color: #60a5fa; }
.dark .hc-str  { color: #4ade80; }
.dark .hc-punc { color: #94a3b8; }
.dark .hc-num  { color: #fbbf24; }

/* ---- Window 2: Doc card (top-right, smaller) ---- */
.hero-w-doc {
  right: 2%; top: 16%;
  width: 44%; height: 26%;
  animation: hero-float-b calc(7.5s / var(--hero-float-speed)) ease-in-out infinite;
}
.hero-doc-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hero-line-2);
}
.dark .hero-doc-hd {
  border-color: rgba(255,255,255,.06);
}
.hero-doc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--hero-ink);
}
.dark .hero-doc-title {
  color: #e5e7eb;
}
.hero-doc-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--hero-green);
  background: rgba(47,158,68,.1);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.hero-doc-body {
  padding: 10px 14px 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--hero-ink-2);
}
.dark .hero-doc-body {
  color: rgba(255,255,255,.6);
}
.hero-doc-link {
  color: var(--hero-citi-blue);
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---- Window 3: Chart (front-left, medium) ---- */
.hero-w-chart {
  left: -2%; bottom: 0;
  width: 54%; height: 40%;
  animation: hero-float-c calc(8.5s / var(--hero-float-speed)) ease-in-out infinite;
}
.hero-chart-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px 8px;
}
.hero-chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--hero-ink);
}
.dark .hero-chart-title {
  color: #e5e7eb;
}
.hero-chart-sub {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: var(--hero-ink-3);
  margin-top: 3px;
}
.dark .hero-chart-sub {
  color: rgba(255,255,255,.4);
}
.hero-chart-menu {
  color: var(--hero-ink-3);
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
}
.hero-chart-nums {
  display: flex;
  gap: 32px;
  padding: 0 16px;
}
.hero-num-big {
  font-size: 22px;
  font-weight: 700;
  color: var(--hero-ink);
  letter-spacing: -0.02em;
}
.dark .hero-num-big {
  color: #f1f5f9;
}
.hero-num-lbl {
  font-size: 10px;
  color: var(--hero-ink-3);
  margin-top: 1px;
}
.hero-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 14px 16px 16px;
  height: calc(100% - 92px);
}
.hero-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--hero-green-2) 0%, var(--hero-green-2) 35%, var(--hero-citi-blue) 35%, var(--hero-citi-blue) 100%);
  border-radius: 2px;
  min-width: 6px;
}

/* ---- Float keyframes ---- */
@keyframes hero-float-a {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50%       { transform: translate3d(calc(-4px * var(--hero-float-amp)), calc(-10px * var(--hero-float-amp)), 0) rotate(calc(-0.25deg * var(--hero-float-amp))); }
}
@keyframes hero-float-b {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50%       { transform: translate3d(calc(6px * var(--hero-float-amp)), calc(-14px * var(--hero-float-amp)), 0) rotate(calc(0.4deg * var(--hero-float-amp))); }
}
@keyframes hero-float-c {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50%       { transform: translate3d(calc(-6px * var(--hero-float-amp)), calc(-8px * var(--hero-float-amp)), 0) rotate(calc(-0.5deg * var(--hero-float-amp))); }
}
@media (prefers-reduced-motion: reduce) {

  .hero-w-api, .hero-w-doc, .hero-w-chart { animation: none; }

}

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

  .landing-hero-section {
    flex-direction: column;
  }
  .hero-stage {
    min-height: 380px;
    width: 100%;
  }

}

/* =====================================================================
   FOOTER — compact single-row
   ===================================================================== */
.fern-footer {
  padding: 28px 0 !important;
}
.fern-footer-inner,
[class*="footer"] > [class*="inner"],
[class*="footer"] > [class*="container"] {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
/* ============================================================
   Integrate — step-through guide
   ============================================================ */
.citi-int {
  --citi-blue: #0066B2;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.citi-int-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  -webkit-mask-image: radial-gradient(120% 95% at 82% 55%, #000 16%, rgba(0,0,0,0.4) 52%, transparent 84%);
  mask-image: radial-gradient(120% 95% at 82% 55%, #000 16%, rgba(0,0,0,0.4) 52%, transparent 84%);
}
.citi-int-fade1 {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, var(--background,#fff) 0%, var(--background,#fff) 30%, transparent 78%);
}
.citi-int-fade2 {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, var(--background,#fff) 0%, transparent 20%, transparent 82%, var(--background,#fff) 100%);
}
.citi-int-content {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 6vw, 88px) clamp(24px, 6vw, 80px) clamp(64px, 8vw, 120px);
}
.citi-int-body { max-width: 620px; }
.citi-int-h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--citi-blue);
}
.citi-int-lede {
  margin: 0 0 clamp(36px, 5vw, 60px);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  opacity: 0.75;
}
.citi-int-steps { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.citi-int-num {
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--citi-blue);
}
.citi-int-rule {
  height: 1px;
  background: var(--border, rgba(0,0,0,0.12));
  margin: 12px 0 20px;
}
.citi-int-inner {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  justify-content: space-between;
}
.citi-int-text { flex: 1 1 auto; min-width: 0; }
.citi-int-text h3 {
  margin: 0;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.005em;
}
.citi-int-text p {
  margin: 12px 0 0;
  max-width: 28em;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.72;
}
.citi-int-icon { flex: 0 0 auto; color: var(--citi-blue); opacity: 0.85; }
.citi-int-cta {
  display: inline-block;
  width: fit-content;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  color: #fff !important;
  background: #0066B2;
  border: 1px solid #0066B2;
  border-radius: 8px;
  padding: 9px 16px;
  transition: filter 0.15s ease;
}
.citi-int-cta:hover { filter: brightness(1.08); }
.citi-int-cta:focus-visible { filter: brightness(1.08); }
.citi-int-cta-postman { background: #ff6c37; border-color: #ff6c37; font: inherit; font-size: 14px; font-weight: 600; }

/* Step 4 — "Select from Marketplace" always shows; the "Edit Selection" modal
   button is hidden by default and revealed by integrate.js once the cart has
   APIs (the ID+descendant selector outranks .citi-int-cta's inline-block). */
.citi-int-btnrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.citi-int-btnrow .citi-int-cta { margin-top: 0; }
.citi-int-btnrow #citi-int-select-btn { display: none; }
/* secondary (outline) variant for "Select APIs" */
.citi-int-cta[data-citi-cta="button"] {
  background: transparent;
  color: #0066B2 !important;
  border-color: #0066B2;
}
.citi-int-cta[data-citi-cta="button"]:hover { background: rgba(0,102,178,0.08); filter: none; }
.citi-int-cta[data-citi-cta="button"]:focus-visible { background: rgba(0,102,178,0.08); filter: none; }
.dark .citi-int-cta[data-citi-cta="button"] { color: #4da3e0 !important; border-color: #4da3e0; }

.citi-int-selected { margin-top: 20px; }
.citi-int-empty {
  font-size: 14px;
  opacity: 0.7;
  padding: 14px 16px;
  border: 1px dashed var(--border, rgba(0,0,0,0.18));
  border-radius: 10px;
}
.citi-int-empty a { color: var(--citi-blue); }
.citi-int-seltable {
  width: 100%;
  max-width: 460px;
  border-collapse: collapse;
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 10px;
  overflow: hidden;
}
.citi-int-seltable td {
  padding: 10px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.07));
}
.citi-int-seltable tr:last-child td { border-bottom: none; }
.citi-int-selc { text-align: right; opacity: 0.6; font-size: 12px; white-space: nowrap; }
.citi-int-seltotal {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--citi-blue);
}

/* ============================================================
   Integrate — modals (API selector + Postman provisioning)
   ============================================================ */
.citi-int-cta .citi-int-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.citi-int-seltable thead th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.1));
}
.citi-int-seltable td:first-child { width: 34px; opacity: 0.55; }

.citi-int-modal-overlay {
  --box: #ffffff; --line: rgba(0,0,0,0.12); --txt: #0c2434; --mut: #55636e;
  --accent: #0066B2; --bg2: #f1f5f8;
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.dark .citi-int-modal-overlay {
  --box: #16181c; --line: rgba(255,255,255,0.14); --txt: #f2f5f7; --mut: #9fb3c0;
  --accent: #3a9be0; --bg2: #1f232a;
}
.citi-int-modal-overlay.active { display: flex; }
.citi-int-modal-box {
  background: var(--box);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 30px 22px;
  max-width: 560px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  color: var(--txt);
}
.citi-int-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.citi-int-modal-title { margin: 0; font-weight: 650; font-size: 20px; letter-spacing: -0.01em; }
.citi-int-modal-close { background: none; border: none; font-size: 24px; line-height: 1; color: var(--mut); cursor: pointer; padding: 0; }
.citi-int-modal-close:hover { color: var(--txt); }
.citi-int-modal-close:focus-visible { color: var(--txt); }
.citi-int-modal-sub { margin: 0 0 18px; font-size: 14px; color: var(--mut); line-height: 1.55; }
.citi-int-modal-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.citi-int-modal-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: var(--txt);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.citi-int-modal-input:focus { border-color: var(--accent); }
.citi-int-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.citi-int-modal-cancel { background: none; border: none; font: inherit; font-size: 13px; font-weight: 600; color: #c0392b; cursor: pointer; padding: 0; }
.citi-int-modal-cancel:hover { opacity: 0.8; }
.citi-int-modal-cancel:focus-visible { opacity: 0.8; }
.citi-int-modal-confirm {
  background: var(--accent);
  color: #fff;
  border: none;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}
.citi-int-modal-confirm:hover { filter: brightness(1.08); }
.citi-int-modal-confirm:focus-visible { filter: brightness(1.08); }
.citi-int-modal-orange { background: #ff6c37; }

.citi-int-coll-grouphead { display: flex; align-items: center; justify-content: space-between; }
.citi-int-coll-group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 4px 0 6px; }
.citi-int-coll-selectall { background: none; border: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; padding: 0; }
.citi-int-coll-selectall:hover { opacity: 0.75; }
.citi-int-coll-selectall:focus-visible { opacity: 0.75; }
.citi-int-coll-count { font-size: 11px; color: var(--mut); margin-bottom: 8px; }
.citi-int-coll-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.citi-int-coll-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.12s; }
.citi-int-coll-item:last-child { border-bottom: none; }
.citi-int-coll-item:hover { background: var(--bg2); }
.citi-int-coll-item:focus-visible { background: var(--bg2); }
.citi-int-coll-item.checked { background: rgba(0,102,178,0.08); }
.citi-int-coll-item input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.citi-int-coll-name { font-size: 14px; font-weight: 500; }

.citi-int-selected-summary { margin-top: 16px; font-size: 13px; color: var(--mut); line-height: 1.5; }
.citi-int-selected-summary strong { color: var(--txt); }
.citi-int-selected-summary ul { margin: 6px 0 0 16px; padding: 0; }

.citi-int-modal-loading { display: flex; align-items: center; gap: 12px; padding: 24px 0; color: var(--mut); font-size: 14px; }
.citi-int-spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: citi-int-spin 0.7s linear infinite; flex-shrink: 0; }
@keyframes citi-int-spin { to { transform: rotate(360deg); } }
.citi-int-modal-note { font-size: 14px; padding: 16px 0; color: var(--mut); }
.citi-int-modal-err { color: #c0392b; }

.citi-int-progress-status { font-size: 14px; color: var(--mut); margin: 8px 0 10px; }
.citi-int-progress-track { width: 100%; height: 6px; background: var(--bg2); border-radius: 3px; overflow: hidden; }
.citi-int-progress-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease-out; }
.citi-int-progress-pct { font-size: 12px; font-weight: 700; color: var(--accent); text-align: right; margin: 6px 0 0; }

#citi-int-postman-success { display: flex; flex-direction: column; align-items: center; }
.citi-int-success-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(0,102,178,0.12); color: var(--accent); display: grid; place-items: center; font-size: 22px; font-weight: 700; margin: 12px auto 14px; }
.citi-int-success-msg { text-align: center; font-size: 15px; font-weight: 600; margin: 0 0 20px; }
.citi-int-error-msg { font-size: 14px; color: #c0392b; background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.2); border-radius: 8px; padding: 12px 16px; margin: 8px 0 16px; line-height: 1.5; }

/* Integrate — API selector row: label wrap + API Reference link */
.citi-int-coll-item { justify-content: space-between; }
.citi-int-coll-labelwrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}
.citi-int-coll-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--accent, #0066B2);
  opacity: 0.85;
  transition: opacity 0.15s;
}
.citi-int-coll-link:hover { opacity: 1; text-decoration: underline; }
.citi-int-coll-link:focus-visible { opacity: 1; text-decoration: underline; }
.citi-int-coll-link svg { flex-shrink: 0; }

/* =========================================================================
   API Marketplace (fern/components/ApiMarketplace.tsx)
   ========================================================================= */
.citi-mkt {
  font-family: inherit;
  max-width: 920px;
  margin: 0 auto;
  padding: 48px 32px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.citi-mkt-head { display: flex; flex-direction: column; gap: 10px; }
.citi-mkt-head h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
.citi-mkt-head p { margin: 0; max-width: 640px; font-size: 15px; line-height: 1.6; opacity: 0.7; }
.citi-mkt-headlink { color: #0066B2; font-weight: 500; text-decoration: none; }
.citi-mkt-headlink:hover { text-decoration: underline; }
.citi-mkt-headlink:focus-visible { text-decoration: underline; }
.dark .citi-mkt-headlink { color: #4da3e0; }

/* Postman callout */
.citi-mkt-callout {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border-radius: 12px; padding: 18px 22px;
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  background: rgba(0,0,0,0.03);
  transition: all .18s ease;
}
.citi-mkt-callout.is-active { border-color: #ff6c37; background: rgba(255,108,55,0.07); }
.citi-mkt-callout-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.citi-mkt-callout-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
  background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.55);
  transition: all .18s ease;
}
.citi-mkt-callout.is-active .citi-mkt-callout-icon { background: #ff6c37; color: #fff; }
.citi-mkt-callout-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.citi-mkt-callout-title { font-weight: 600; font-size: 15px; }
.citi-mkt-callout-sub { font-size: 13px; opacity: 0.65; }
.citi-mkt-callout-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 18px; border: none; border-radius: 8px; white-space: nowrap; text-decoration: none;
  background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.45);
  cursor: not-allowed; transition: all .18s ease;
}
.citi-mkt-callout.is-active .citi-mkt-callout-btn {
  background: #ff6c37; color: #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,108,55,0.28);
}
.citi-mkt-callout.is-active .citi-mkt-callout-btn:hover { background: #f45d24; }
.citi-mkt-callout.is-active .citi-mkt-callout-btn:focus-visible { background: #f45d24; }

/* Grid + cards */
.citi-mkt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 720px) {
 .citi-mkt-grid { grid-template-columns: 1fr; } 
}
.citi-mkt-card {
  cursor: pointer; user-select: none;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--background, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 12px; padding: 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.citi-mkt-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.07); }
.citi-mkt-card:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.07); }
.citi-mkt-card.is-selected {
  border-color: #ff6c37;
  box-shadow: 0 0 0 1px #ff6c37, 0 6px 20px rgba(255,108,55,0.12);
}
.citi-mkt-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.citi-mkt-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 9px;
  background: rgba(0,102,178,0.08); color: #0066B2;
}
.citi-mkt-check {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  border: 1.5px solid var(--border, rgba(0,0,0,0.2));
  background: transparent; color: #fff; flex-shrink: 0;
  transition: all .15s ease;
}
.citi-mkt-card.is-selected .citi-mkt-check { border-color: #ff6c37; background: #ff6c37; }
.citi-mkt-card-body { display: flex; flex-direction: column; gap: 6px; }
.citi-mkt-card-body h3 { margin: 0; font-size: 15px; font-weight: 600; }
.citi-mkt-card-body p { margin: 0; font-size: 13px; line-height: 1.55; opacity: 0.68; }
.citi-mkt-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.citi-mkt-tags li {
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 999px; padding: 2px 10px; font-size: 12px; line-height: 1.5; opacity: 0.75;
}
.citi-mkt-tag-count { border-style: dashed !important; }
.citi-mkt-ref {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  color: #0066B2; font-size: 14px; font-weight: 500; text-decoration: none; width: fit-content;
}
.citi-mkt-ref:hover { text-decoration: underline; }
.citi-mkt-ref:focus-visible { text-decoration: underline; }
.citi-mkt-status { padding: 40px 8px; text-align: center; font-size: 14px; opacity: 0.7; display: flex; align-items: center; justify-content: center; gap: 10px; }
.citi-mkt-error { color: #c0392b; opacity: 1; flex-direction: column; }
.citi-mkt-spinner {
  width: 16px; height: 16px; border-radius: 999px;
  border: 2px solid rgba(0,102,178,0.25); border-top-color: #0066B2;
  animation: citi-mkt-spin 0.7s linear infinite; display: inline-block;
}
@keyframes citi-mkt-spin { to { transform: rotate(360deg); } }
.citi-mkt-method {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; border: 1px solid; flex-shrink: 0;
}

/* dark mode */
.dark .citi-mkt-callout { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.dark .citi-mkt-callout-icon { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.dark .citi-mkt-callout-btn { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); }
.dark .citi-mkt-card { background: #17171a; border-color: rgba(255,255,255,0.1); box-shadow: none; }
.dark .citi-mkt-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
.dark .citi-mkt-card:focus-visible { box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
.dark .citi-mkt-icon { background: rgba(0,102,178,0.18); color: #4da3e0; }
.dark .citi-mkt-tags li { border-color: rgba(255,255,255,0.14); }
.dark .citi-mkt-check { border-color: rgba(255,255,255,0.2); }

/* =========================================================================
   Site-wide API cart (fern/docs/cart.js) — header icon + slide-in drawer
   ========================================================================= */
.citi-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 4px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.citi-cart-btn:hover { background: rgba(0,102,178,0.10); color: #0066B2; }
.citi-cart-btn:focus-visible { background: rgba(0,102,178,0.10); color: #0066B2; }
.citi-cart-btn.citi-cart-floating { position: fixed; top: 14px; right: 18px; z-index: 60; }
.citi-cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #ff6c37;
  border-radius: 999px;
}
.citi-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 90;
}
.citi-cart-overlay.open { opacity: 1; pointer-events: auto; }
.citi-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: var(--background, #fff);
  border-left: 1px solid var(--border, rgba(0,0,0,0.1));
  box-shadow: -8px 0 30px rgba(0,0,0,0.14);
  transform: translateX(100%);
  transition: transform 0.24s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
}
.citi-cart-drawer.open { transform: translateX(0); }
.citi-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.citi-cart-head h3 { margin: 0; font-size: 17px; font-weight: 650; }
.citi-cart-close {
  border: none; background: transparent; font-size: 26px; line-height: 1;
  cursor: pointer; color: inherit; opacity: 0.6;
}
.citi-cart-close:hover { opacity: 1; }
.citi-cart-close:focus-visible { opacity: 1; }
.citi-cart-list { flex: 1; overflow-y: auto; padding: 14px 20px; }
.citi-cart-empty { padding: 40px 8px; text-align: center; font-size: 14px; opacity: 0.7; line-height: 1.6; }
.citi-cart-empty a { color: #0066B2; }
.citi-cart-group { margin-bottom: 12px; }
.citi-cart-group-head {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-radius: 6px;
}
.citi-cart-group.has-eps .citi-cart-group-head { cursor: pointer; }
.citi-cart-group.has-eps .citi-cart-group-head:hover { color: #0066B2; }
.citi-cart-group.has-eps .citi-cart-group-head:focus-visible { color: #0066B2; }
.citi-cart-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; flex-shrink: 0; opacity: 0.5;
}
.citi-cart-group:not(.has-eps) .citi-cart-chevron { visibility: hidden; }
.citi-cart-chevron svg { transition: transform 0.15s ease; }
.citi-cart-group.is-open .citi-cart-chevron svg { transform: rotate(90deg); }
.citi-cart-group-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
.citi-cart-group-count { font-size: 11px; font-weight: 500; opacity: 0.55; }
.citi-cart-eps { display: none; padding-left: 24px; }
.citi-cart-group.is-open .citi-cart-eps { display: block; }
.citi-cart-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}
.citi-cart-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.citi-cart-item-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citi-cart-item-path { font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citi-cart-remove {
  flex-shrink: 0; border: none; background: transparent; font-size: 20px; line-height: 1;
  cursor: pointer; color: inherit; opacity: 0.45;
}
.citi-cart-remove:hover { opacity: 1; color: #c0392b; }
.citi-cart-remove:focus-visible { opacity: 1; color: #c0392b; }
.citi-cart-foot {
  display: flex; align-items: center; gap: 10px; padding: 16px 20px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
}
.citi-cart-browse {
  flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: #0066B2;
  text-decoration: none; padding: 9px 12px; border: 1px solid rgba(0,102,178,0.3); border-radius: 8px;
}
.citi-cart-browse:hover { background: rgba(0,102,178,0.08); }
.citi-cart-browse:focus-visible { background: rgba(0,102,178,0.08); }
.citi-cart-postman {
  flex: 1; text-align: center; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  color: #fff; background: #ff6c37; border: none; border-radius: 8px; padding: 10px 12px; text-decoration: none;
}
.citi-cart-postman:hover { background: #f45d24; }
.citi-cart-postman:focus-visible { background: #f45d24; }
.citi-cart-postman:disabled {
  background: rgba(0,0,0,0.10); color: rgba(0,0,0,0.4); cursor: not-allowed; box-shadow: none;
}
.dark .citi-cart-postman:disabled { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.35); }