/*fern-site-stylesheet*/@font-face {
    font-family: 'Roboto';
    src: url('/_fern-files/akamai.ferndocs.com/9b7e4c048bb083f9702640b8e25580f04dd7292331104c1ac5ba208d6ba8c36d/assets/Roboto.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 37px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Roboto', 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: #f4f9ff;
  --accent-3: #e8f4ff;
  --accent-4: #d9edff;
  --accent-5: #c7e3fe;
  --accent-6: #b3d6f7;
  --accent-7: #98c6ef;
  --accent-8: #70afe6;
  --accent-9: #007ac5;
  --accent-10: #006cb6;
  --accent-11: #0075bf;
  --accent-12: #0d395b;

  --accent-a1: #0080ff04;
  --accent-a2: #0074ff0b;
  --accent-a3: #0086ff17;
  --accent-a4: #0087ff26;
  --accent-a5: #0080fb38;
  --accent-a6: #0076e54c;
  --accent-a7: #0072d867;
  --accent-a8: #0071d38f;
  --accent-a9: #007ac5;
  --accent-a10: #006cb6;
  --accent-a11: #0075bf;
  --accent-a12: #002e52f2;

  --accent-contrast: #fff;
  --accent-surface: #f1f8ffcc;
  --accent-indicator: #007ac5;
  --accent-track: #007ac5;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.3% 0.0036 246.4);
      --accent-2: oklch(98.1% 0.0089 246.4);
      --accent-3: oklch(96% 0.0198 246.4);
      --accent-4: oklch(93.7% 0.0338 246.4);
      --accent-5: oklch(90.5% 0.047 246.4);
      --accent-6: oklch(86.3% 0.0596 246.4);
      --accent-7: oklch(80.8% 0.0762 246.4);
      --accent-8: oklch(73.3% 0.1039 246.4);
      --accent-9: oklch(56.3% 0.1461 246.4);
      --accent-10: oklch(51.7% 0.1461 246.4);
      --accent-11: oklch(54.6% 0.1461 246.4);
      --accent-12: oklch(33.4% 0.0757 246.4);

      --accent-a1: color(display-p3 0.0235 0.5137 1 / 0.016);
      --accent-a2: color(display-p3 0.0235 0.4157 0.9059 / 0.04);
      --accent-a3: color(display-p3 0.0078 0.4824 0.9529 / 0.083);
      --accent-a4: color(display-p3 0.0078 0.4471 0.9451 / 0.134);
      --accent-a5: color(display-p3 0 0.4314 0.9216 / 0.2);
      --accent-a6: color(display-p3 0.0039 0.3961 0.8431 / 0.271);
      --accent-a7: color(display-p3 0.0039 0.3843 0.7882 / 0.369);
      --accent-a8: color(display-p3 0 0.3647 0.7686 / 0.506);
      --accent-a9: color(display-p3 0 0.3333 0.6863 / 0.797);
      --accent-a10: color(display-p3 0 0.2902 0.6235 / 0.824);
      --accent-a11: color(display-p3 0 0.3176 0.6588 / 0.804);
      --accent-a12: color(display-p3 0 0.1294 0.2706 / 0.899);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9529 0.9725 0.9961 / 0.8);
      --accent-indicator: oklch(56.3% 0.1461 246.4);
      --accent-track: oklch(56.3% 0.1461 246.4);
    }
  }
}


.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: #000;
  --accent-2: #05131f;
  --accent-3: #002543;
  --accent-4: #003260;
  --accent-5: #004074;
  --accent-6: #004f87;
  --accent-7: #00619f;
  --accent-8: #0075bf;
  --accent-9: #007ac5;
  --accent-10: #006cb6;
  --accent-11: #65bdff;
  --accent-12: #c5e7ff;

  --accent-a1: #00000000;
  --accent-a2: #2a9dff1f;
  --accent-a3: #008dff43;
  --accent-a4: #0085ff60;
  --accent-a5: #008dff74;
  --accent-a6: #0096ff87;
  --accent-a7: #009cff9f;
  --accent-a8: #009cffbf;
  --accent-a9: #009effc5;
  --accent-a10: #0098ffb6;
  --accent-a11: #65bdff;
  --accent-a12: #c5e7ff;

  --accent-contrast: #fff;
  --accent-surface: #0a263e80;
  --accent-indicator: #007ac5;
  --accent-track: #007ac5;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.028 246.4);
      --accent-2: oklch(18.2% 0.0325 246.4);
      --accent-3: oklch(25.8% 0.0703 246.4);
      --accent-4: oklch(31% 0.1018 246.4);
      --accent-5: oklch(36.2% 0.1113 246.4);
      --accent-6: oklch(41.6% 0.1169 246.4);
      --accent-7: oklch(47.7% 0.1268 246.4);
      --accent-8: oklch(54.5% 0.1461 246.4);
      --accent-9: oklch(56.3% 0.1461 246.4);
      --accent-10: oklch(51.7% 0.1461 246.4);
      --accent-11: oklch(77.4% 0.1375 246.4);
      --accent-12: oklch(91.4% 0.056 246.4);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.2667 0.6353 1 / 0.118);
      --accent-a3: color(display-p3 0.1725 0.5569 1 / 0.255);
      --accent-a4: color(display-p3 0.1843 0.5294 1 / 0.365);
      --accent-a5: color(display-p3 0.2157 0.5647 1 / 0.44);
      --accent-a6: color(display-p3 0.2392 0.5961 1 / 0.514);
      --accent-a7: color(display-p3 0.2627 0.6196 1 / 0.604);
      --accent-a8: color(display-p3 0.2706 0.6235 1 / 0.726);
      --accent-a9: color(display-p3 0.2706 0.6275 1 / 0.75);
      --accent-a10: color(display-p3 0.2549 0.6039 1 / 0.691);
      --accent-a11: color(display-p3 0.4941 0.749 1 / 0.977);
      --accent-a12: color(display-p3 0.8039 0.9098 1 / 0.993);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.0627 0.149 0.2431 / 0.5);
      --accent-indicator: oklch(56.3% 0.1461 246.4);
      --accent-track: oklch(56.3% 0.1461 246.4);
    }
  }
}


.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, 122, 197, 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, 122, 197, 1);
  --background: #000;
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #007ac5;
}

.fern-selection-item .fern-selection-item-icon img{
    max-width: 80%;
    max-height: 80%;
}


.fern-product-selector {
    transform: translateY(8px);
    border-radius: 4px;
    border: 10px solid var(--border);
    /*pointer-events: none; /* Disable clicking */
    font-weight: bold; /* Make text bold */
}
/* 
/* Hide the dropdown arrow/icon 
.fern-product-selector svg,
.fern-product-selector .fern-dropdown-arrow,
.fern-product-selector [data-testid="dropdown-arrow"],
.fern-product-selector button svg {
    display: none !important;
}

/* Disable dropdown functionality
.fern-product-selector button {
    pointer-events: none;
    cursor: default;
}

/* Hide the dropdown menu */
.fern-product-selector-radio-group {
    /*display: none !important;*/
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
} 


#fern-announcement a {
    text-decoration: underline !important;
}

/* Filter container */
.td-filter {
    margin: 2rem 0;
  }
  
  .td-filter-body {
    display: flex;
    gap: 2rem;
    min-height: 600px;
  }
  
  .td-filter-sidebar {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid #e5e7eb;
    padding-right: 1rem;
  }
  
  .dark .td-filter-sidebar {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid #282c2f;
    padding-right: 1rem;
  }
  
  .td-sidebar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-radius: 0.375rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    color: #374151;
  }
  
  .td-sidebar-item:hover {
    background-color: #f3f4f6;
  }
.td-sidebar-item:focus-visible {
    background-color: #f3f4f6; outline: none;
}
  
  .td-sidebar-item.td-active {
    background-color: #dbeafe;
    color: #1d4ed8;
    font-weight: 500;
  }
  
  .td-icon-right {
    font-size: 1rem;
    color: #9ca3af;
  }
  
  /* Main content */
  .td-filter-main {
    flex: 1;
  }
  
  .td-fltr-hdr {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
  }
  .dark .td-fltr-hdr {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #282c2f;
  }
  
  .td-main-hdr {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 1rem;
  }
  
  /* Mobile dropdown */
  .td-mx-filter {
    display: none;
    margin-bottom: 1rem;
  }
  
  .td-mx-filter select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
  }
  
  /* Search */
  .td-main-search input,
  .search-input-with-italic-placeholder {
    width: 100%;
    max-width: 400px;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
  }
  
  .dark .td-main-search input,
  .dark .search-input-with-italic-placeholder {
    width: 100%;
    max-width: 400px;
    padding: 0.75rem 1rem;
    border: 1px solid #282c2f;
    border-radius: 0.375rem;
    font-size: 0.875rem;
  }
  
  /* Italic placeholder text */
  .search-input-with-italic-placeholder::placeholder {
    font-style: italic !important;
  }
  
  .td-main-search input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
  
  /* Fern Cards styling for filter */

  
  .td-filter-cards .fern-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  }
.td-filter-cards .fern-card:focus-visible {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important; outline: none;
}
  
  .dark .td-filter-cards .fern-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }
.dark .td-filter-cards .fern-card:focus-visible {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; outline: none;
}
  
  /* Card footer tags styling */
  .card-footer-tags {
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #e5e7eb !important;
  }
  
  .card-footer-tags .fern-button {
    padding: 0.25rem 0.75rem !important;
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    border-radius: 9999px !important;
    border: none !important;
    text-decoration: none !important;
    margin: 0 !important;
  }
  
  .card-footer-tags .fern-button:hover {
    background-color: #e5e7eb !important;
    color: #374151 !important;
  }
.card-footer-tags .fern-button:focus-visible {
    background-color: #e5e7eb !important;
    color: #374151 !important; outline: none;
}
  
  /* Hidden cards */
  .filter-card.hidden {
    display: none !important;
  }
  
  /* Responsive */
  @media (max-width: 768px) {

    .td-filter-body {
      flex-direction: column;
    }
    
    .td-filter-sidebar {
      display: none;
    }
    
    .td-mx-filter {
      display: block;
    }
    
    .td-filter-cards {
      grid-template-columns: 1fr !important;
    }
  
}

/* Home Page Styling - Moved from home.mdx */
.fern-page-actions {
  display: none !important;
}

.fern-button{
  margin: 0.25rem 0.5rem 0.25rem 0;
}

/* Base Card Styling */
.featured-card {
  border-width: 1px !important;
  border-style: solid !important;
  background-blend-mode: color, normal, normal !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06)) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Pattern Background Styling */
.featured-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: repeat;
  background-size: 20px 20px;
  background-position: 0 0;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
  border-radius: inherit;
}

.featured-card > * {
  position: relative;
  z-index: 1;
}

/* Icon Background Circle */
.td-icon-bg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.td-icon-bg img {
  width: 24px;
  height: 24px;
}

/* Light mode - white icons */
.light .featured-card .td-icon-bg img,
:root .featured-card .td-icon-bg img {
  filter: brightness(0) saturate(100%) invert(1) !important;
}

/* Dark mode - keep natural black icons (no filter needed) */
.dark .featured-card .td-icon-bg img {
  filter: none !important;
}

/* Card-specific icon backgrounds */
.cloud-computing-card .td-icon-bg {
  background-color: var(--theme-color);
}

.security-card .td-icon-bg {
  background-color: var(--theme-color);
}

.security-blue-card .td-icon-bg {
  background-color: var(--theme-color);
}

.security-yellow-card .td-icon-bg {
  background-color: var(--theme-color);
}

/* Specific Pattern Backgrounds for Each Card */
.cloud-computing-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2371AF76' fill-rule='evenodd' clip-rule='evenodd' d='M2.00014 12.0064C1.97242 7.65451 6.06443 5 10.0001 5C12.0158 5 13.52 5.73073 14.5821 6.7929C15.3982 7.60895 15.9244 8.58999 16.2483 9.51562C17.3629 9.56492 18.6063 9.74833 19.6553 10.3037C20.3212 10.6562 20.9228 11.1656 21.3519 11.8876C21.7801 12.6082 22 13.4795 22 14.5C22 15.5798 21.6865 16.4522 21.1705 17.1295C20.6645 17.7936 20.008 18.213 19.4009 18.4787C18.7943 18.7441 18.2013 18.8719 17.7694 18.9348C17.5509 18.9667 17.367 18.9829 17.2344 18.9912C17.1679 18.9954 17.1138 18.9976 17.0742 18.9987C17.0544 18.9993 17.0381 18.9996 17.0257 18.9998L17.01 19L17.0043 19L17.002 19C17.0016 19 17.0001 19 17.0001 18L17.0001 19H9.00012C6.76294 19 4.98541 18.2406 3.77153 16.9191C2.57098 15.6121 2.01191 13.8541 2.00014 12.0064ZM10.0001 7C6.7349 7 3.98195 9.14472 4.0001 11.9936C4.00944 13.4596 4.4503 14.7016 5.24446 15.5661C6.02527 16.4162 7.23719 17 9.00012 17H16.9973L17.0159 16.9996C17.0349 16.999 17.0667 16.9978 17.1096 16.9951C17.1957 16.9897 17.3243 16.9786 17.4808 16.9558C17.7989 16.9094 18.2059 16.8184 18.5992 16.6463C18.9921 16.4745 19.3356 16.2376 19.5796 15.9174C19.8135 15.6103 20 15.1702 20 14.5C20 13.7705 19.8449 13.2668 19.6325 12.9093C19.4209 12.5532 19.1162 12.2813 18.7196 12.0713C17.8861 11.63 16.7222 11.5 15.5 11.5C15.0411 11.5 14.6412 11.1877 14.5299 10.7425C14.3096 9.86159 13.8789 8.91807 13.1679 8.2071C12.4801 7.51927 11.4843 7 10.0001 7Z'/%3E%3C/svg%3E");
}

.security-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2377A9C7' fill-rule='evenodd' clip-rule='evenodd' d='M11.6672 1.55701C11.8825 1.481 12.1175 1.481 12.3328 1.55701L20.8328 4.55701C21.2326 4.69812 21.5 5.07602 21.5 5.5V12C21.5 15.4877 19.0443 18.122 16.8575 19.7944C15.7388 20.6498 14.6261 21.3037 13.796 21.7432C13.3797 21.9636 13.0314 22.1316 12.7848 22.2456C12.6614 22.3027 12.5633 22.3462 12.4946 22.3761C12.4602 22.3911 12.4332 22.4026 12.4141 22.4107L12.3913 22.4203L12.3845 22.4231L12.3822 22.4241C12.3819 22.4242 12.3807 22.4247 12 21.5C11.6193 22.4247 11.6189 22.4246 11.6186 22.4244L11.6155 22.4231L11.6087 22.4203L11.5859 22.4107C11.5668 22.4026 11.5398 22.3911 11.5054 22.3761C11.4367 22.3462 11.3386 22.3027 11.2152 22.2456C10.9686 22.1316 10.6203 21.9636 10.204 21.7432C9.37386 21.3037 8.26115 20.6498 7.14255 19.7944C4.95568 18.122 2.5 15.4877 2.5 12V5.5C2.5 5.07602 2.76737 4.69812 3.16718 4.55701L11.6672 1.55701ZM12 21.5L11.6186 22.4244C11.8625 22.5248 12.1369 22.5251 12.3807 22.4247L12 21.5ZM12 20.4049C12.2149 20.3046 12.5101 20.1609 12.8602 19.9756C13.6239 19.5713 14.6362 18.9752 15.6425 18.2056C17.7057 16.628 19.5 14.5123 19.5 12V6.20752L12 3.56046L4.5 6.20752V12C4.5 14.5123 6.29432 16.628 8.35745 18.2056C9.36385 18.9752 10.3761 19.5713 11.1398 19.9756C11.4899 20.1609 11.7851 20.3046 12 20.4049ZM16.0369 8.15634C16.5028 8.45285 16.6402 9.07093 16.3437 9.53688L12.8437 15.0369C12.6808 15.2928 12.4106 15.4609 12.1091 15.494C11.8076 15.5271 11.5074 15.4216 11.2929 15.2071L8.29289 12.2071C7.90237 11.8166 7.90237 11.1834 8.29289 10.7929C8.68342 10.4024 9.31658 10.4024 9.70711 10.7929L11.8256 12.9114L14.6563 8.46312C14.9528 7.99718 15.5709 7.85983 16.0369 8.15634Z'/%3E%3C/svg%3E");
}

.security-blue-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E6954D' fill-rule='evenodd' clip-rule='evenodd' d='M17.5 4C16.9477 4 16.5 4.44772 16.5 5C16.5 5.55228 16.9477 6 17.5 6C18.0523 6 18.5 5.55228 18.5 5C18.5 4.44772 18.0523 4 17.5 4ZM14.5 5C14.5 3.34315 15.8431 2 17.5 2C19.1569 2 20.5 3.34315 20.5 5C20.5 6.30622 19.6652 7.41746 18.5 7.82929V10.1115C20.504 10.5662 22 12.3584 22 14.5C22 16.9853 19.9853 19 17.5 19C15.8004 19 14.3208 18.0577 13.5552 16.6671L7.98911 18.2574C7.85855 19.7938 6.57014 21 5 21C3.34315 21 2 19.6569 2 18C2 16.3431 3.34315 15 5 15C6.0348 15 6.94724 15.5239 7.48651 16.321L13.0065 14.7438C13.0022 14.6631 13 14.5818 13 14.5C13 14.0365 13.0701 13.5894 13.2002 13.1686L7.67801 9.48719C7.19907 9.81094 6.62161 10 6 10C4.34315 10 3 8.65685 3 7C3 5.34315 4.34315 4 6 4C7.65685 4 9 5.34315 9 7C9 7.30542 8.95436 7.60018 8.86953 7.87783L14.2052 11.435C14.8098 10.7854 15.6041 10.3148 16.5 10.1115V7.82929C15.3348 7.41746 14.5 6.30622 14.5 5ZM6 6C5.44772 6 5 6.44772 5 7C5 7.55228 5.44772 8 6 8C6.55228 8 7 7.55228 7 7C7 6.44772 6.55228 6 6 6ZM17.5 12C16.1193 12 15 13.1193 15 14.5C15 15.8807 16.1193 17 17.5 17C18.8807 17 20 15.8807 20 14.5C20 13.1193 18.8807 12 17.5 12ZM5 17C4.44772 17 4 17.4477 4 18C4 18.5523 4.44772 19 5 19C5.55228 19 6 18.5523 6 18C6 17.4477 5.55228 17 5 17Z'/%3E%3C/svg%3E");
}

.security-yellow-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B787C7' fill-rule='evenodd' clip-rule='evenodd' d='M12 4C8.98123 4 6.5 6.50236 6.5 9.63158C6.5 11.1568 7.09074 12.5358 8.04815 13.5483C8.44562 13.9686 8.86265 14.4541 9.22349 15H14.7765C15.1373 14.4541 15.5544 13.9686 15.9518 13.5483C16.9093 12.5358 17.5 11.1568 17.5 9.63158C17.5 6.50236 15.0188 4 12 4ZM13.8938 17H10.1062C10.1756 17.3165 10.2143 17.6453 10.2143 17.9859V18.2144C10.2143 19.2006 11.0137 20 12 20C12.9863 20 13.7857 19.2006 13.7857 18.2144V17.9859C13.7857 17.6453 13.8244 17.3165 13.8938 17ZM4.5 9.63158C4.5 5.43576 7.83907 2 12 2C16.1609 2 19.5 5.43576 19.5 9.63158C19.5 11.6827 18.7033 13.5495 17.405 14.9224C16.4398 15.9433 15.7857 16.9532 15.7857 17.9859V18.2144C15.7857 20.3052 14.0908 22 12 22C9.90925 22 8.21429 20.3052 8.21429 18.2144V17.9859C8.21429 16.9532 7.56025 15.9433 6.59496 14.9224C5.29669 13.5495 4.5 11.6827 4.5 9.63158Z'/%3E%3C/svg%3E");
}

/* Dark mode pattern adjustments */
.dark .featured-card::before {
  opacity: 0.065;
  mix-blend-mode: overlay;
}

/* Dark mode specific colored patterns */
.dark .cloud-computing-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23458549' fill-rule='evenodd' clip-rule='evenodd' d='M2.00014 12.0064C1.97242 7.65451 6.06443 5 10.0001 5C12.0158 5 13.52 5.73073 14.5821 6.7929C15.3982 7.60895 15.9244 8.58999 16.2483 9.51562C17.3629 9.56492 18.6063 9.74833 19.6553 10.3037C20.3212 10.6562 20.9228 11.1656 21.3519 11.8876C21.7801 12.6082 22 13.4795 22 14.5C22 15.5798 21.6865 16.4522 21.1705 17.1295C20.6645 17.7936 20.008 18.213 19.4009 18.4787C18.7943 18.7441 18.2013 18.8719 17.7694 18.9348C17.5509 18.9667 17.367 18.9829 17.2344 18.9912C17.1679 18.9954 17.1138 18.9976 17.0742 18.9987C17.0544 18.9993 17.0381 18.9996 17.0257 18.9998L17.01 19L17.0043 19L17.002 19C17.0016 19 17.0001 19 17.0001 18L17.0001 19H9.00012C6.76294 19 4.98541 18.2406 3.77153 16.9191C2.57098 15.6121 2.01191 13.8541 2.00014 12.0064ZM10.0001 7C6.7349 7 3.98195 9.14472 4.0001 11.9936C4.00944 13.4596 4.4503 14.7016 5.24446 15.5661C6.02527 16.4162 7.23719 17 9.00012 17H16.9973L17.0159 16.9996C17.0349 16.999 17.0667 16.9978 17.1096 16.9951C17.1957 16.9897 17.3243 16.9786 17.4808 16.9558C17.7989 16.9094 18.2059 16.8184 18.5992 16.6463C18.9921 16.4745 19.3356 16.2376 19.5796 15.9174C19.8135 15.6103 20 15.1702 20 14.5C20 13.7705 19.8449 13.2668 19.6325 12.9093C19.4209 12.5532 19.1162 12.2813 18.7196 12.0713C17.8861 11.63 16.7222 11.5 15.5 11.5C15.0411 11.5 14.6412 11.1877 14.5299 10.7425C14.3096 9.86159 13.8789 8.91807 13.1679 8.2071C12.4801 7.51927 11.4843 7 10.0001 7Z'/%3E%3C/svg%3E");
}

.dark .security-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23A7C7E7' fill-rule='evenodd' clip-rule='evenodd' d='M11.6672 1.55701C11.8825 1.481 12.1175 1.481 12.3328 1.55701L20.8328 4.55701C21.2326 4.69812 21.5 5.07602 21.5 5.5V12C21.5 15.4877 19.0443 18.122 16.8575 19.7944C15.7388 20.6498 14.6261 21.3037 13.796 21.7432C13.3797 21.9636 13.0314 22.1316 12.7848 22.2456C12.6614 22.3027 12.5633 22.3462 12.4946 22.3761C12.4602 22.3911 12.4332 22.4026 12.4141 22.4107L12.3913 22.4203L12.3845 22.4231L12.3822 22.4241C12.3819 22.4242 12.3807 22.4247 12 21.5C11.6193 22.4247 11.6189 22.4246 11.6186 22.4244L11.6155 22.4231L11.6087 22.4203L11.5859 22.4107C11.5668 22.4026 11.5398 22.3911 11.5054 22.3761C11.4367 22.3462 11.3386 22.3027 11.2152 22.2456C10.9686 22.1316 10.6203 21.9636 10.204 21.7432C9.37386 21.3037 8.26115 20.6498 7.14255 19.7944C4.95568 18.122 2.5 15.4877 2.5 12V5.5C2.5 5.07602 2.76737 4.69812 3.16718 4.55701L11.6672 1.55701ZM12 21.5L11.6186 22.4244C11.8625 22.5248 12.1369 22.5251 12.3807 22.4247L12 21.5ZM12 20.4049C12.2149 20.3046 12.5101 20.1609 12.8602 19.9756C13.6239 19.5713 14.6362 18.9752 15.6425 18.2056C17.7057 16.628 19.5 14.5123 19.5 12V6.20752L12 3.56046L4.5 6.20752V12C4.5 14.5123 6.29432 16.628 8.35745 18.2056C9.36385 18.9752 10.3761 19.5713 11.1398 19.9756C11.4899 20.1609 11.7851 20.3046 12 20.4049ZM16.0369 8.15634C16.5028 8.45285 16.6402 9.07093 16.3437 9.53688L12.8437 15.0369C12.6808 15.2928 12.4106 15.4609 12.1091 15.494C11.8076 15.5271 11.5074 15.4216 11.2929 15.2071L8.29289 12.2071C7.90237 11.8166 7.90237 11.1834 8.29289 10.7929C8.68342 10.4024 9.31658 10.4024 9.70711 10.7929L11.8256 12.9114L14.6563 8.46312C14.9528 7.99718 15.5709 7.85983 16.0369 8.15634Z'/%3E%3C/svg%3E");
}

.dark .security-blue-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFB366' fill-rule='evenodd' clip-rule='evenodd' d='M17.5 4C16.9477 4 16.5 4.44772 16.5 5C16.5 5.55228 16.9477 6 17.5 6C18.0523 6 18.5 5.55228 18.5 5C18.5 4.44772 18.0523 4 17.5 4ZM14.5 5C14.5 3.34315 15.8431 2 17.5 2C19.1569 2 20.5 3.34315 20.5 5C20.5 6.30622 19.6652 7.41746 18.5 7.82929V10.1115C20.504 10.5662 22 12.3584 22 14.5C22 16.9853 19.9853 19 17.5 19C15.8004 19 14.3208 18.0577 13.5552 16.6671L7.98911 18.2574C7.85855 19.7938 6.57014 21 5 21C3.34315 21 2 19.6569 2 18C2 16.3431 3.34315 15 5 15C6.0348 15 6.94724 15.5239 7.48651 16.321L13.0065 14.7438C13.0022 14.6631 13 14.5818 13 14.5C13 14.0365 13.0701 13.5894 13.2002 13.1686L7.67801 9.48719C7.19907 9.81094 6.62161 10 6 10C4.34315 10 3 8.65685 3 7C3 5.34315 4.34315 4 6 4C7.65685 4 9 5.34315 9 7C9 7.30542 8.95436 7.60018 8.86953 7.87783L14.2052 11.435C14.8098 10.7854 15.6041 10.3148 16.5 10.1115V7.82929C15.3348 7.41746 14.5 6.30622 14.5 5ZM6 6C5.44772 6 5 6.44772 5 7C5 7.55228 5.44772 8 6 8C6.55228 8 7 7.55228 7 7C7 6.44772 6.55228 6 6 6ZM17.5 12C16.1193 12 15 13.1193 15 14.5C15 15.8807 16.1193 17 17.5 17C18.8807 17 20 15.8807 20 14.5C20 13.1193 18.8807 12 17.5 12ZM5 17C4.44772 17 4 17.4477 4 18C4 18.5523 4.44772 19 5 19C5.55228 19 6 18.5523 6 18C6 17.4477 5.55228 17 5 17Z'/%3E%3C/svg%3E");
}

.dark .security-yellow-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D4A7E7' fill-rule='evenodd' clip-rule='evenodd' d='M12 4C8.98123 4 6.5 6.50236 6.5 9.63158C6.5 11.1568 7.09074 12.5358 8.04815 13.5483C8.44562 13.9686 8.86265 14.4541 9.22349 15H14.7765C15.1373 14.4541 15.5544 13.9686 15.9518 13.5483C16.9093 12.5358 17.5 11.1568 17.5 9.63158C17.5 6.50236 15.0188 4 12 4ZM13.8938 17H10.1062C10.1756 17.3165 10.2143 17.6453 10.2143 17.9859V18.2144C10.2143 19.2006 11.0137 20 12 20C12.9863 20 13.7857 19.2006 13.7857 18.2144V17.9859C13.7857 17.6453 13.8244 17.3165 13.8938 17ZM4.5 9.63158C4.5 5.43576 7.83907 2 12 2C16.1609 2 19.5 5.43576 19.5 9.63158C19.5 11.6827 18.7033 13.5495 17.405 14.9224C16.4398 15.9433 15.7857 16.9532 15.7857 17.9859V18.2144C15.7857 20.3052 14.0908 22 12 22C9.90925 22 8.21429 20.3052 8.21429 18.2144V17.9859C8.21429 16.9532 7.56025 15.9433 6.59496 14.9224C5.29669 13.5495 4.5 11.6827 4.5 9.63158Z'/%3E%3C/svg%3E");
}

/* Cloud Computing Card - Green Theme */
.light .cloud-computing-card, :root .cloud-computing-card {
  --accent: rgba(113, 175, 118, 1);
  --theme-color: #71AF76;
  background: linear-gradient(45deg, #FFFFFF 0%, #FFFFFF 50%, #B7DFBA80 100%), 
              radial-gradient(131.54% 107.07% at 66.88% -9.43%, rgba(183, 223, 186, 0.50) 0%, rgba(255, 255, 255, 0.00) 100%), 
              linear-gradient(240deg, rgba(255, 255, 255, 0.00) -19.21%, #FFF 90.9%) !important;
  border-color: #D7E5D9 !important;
}

.dark .cloud-computing-card {
  --accent: rgba(183, 223, 186, 1);
  --theme-color: #B7DFBA;
  background: linear-gradient(45deg, #1a1a1a 0%, #1a1a1a 50%, #B7DFBA30 100%), 
              radial-gradient(131.54% 107.07% at 66.88% -9.43%, rgba(183, 223, 186, 0.20) 0%, rgba(26, 26, 26, 0.00) 100%), 
              linear-gradient(240deg, rgba(26, 26, 26, 0.00) -19.21%, #1a1a1a 90.9%) !important;
  border-color: #2a3a2b !important;
}

/* Security Card - Blue Theme */  
.light .security-card, :root .security-card {
  --accent: rgba(119, 169, 199, 1);
  --theme-color: #77A9C7;
  background: linear-gradient(45deg, #FFFFFF 0%, #FFFFFF 50%, #A7C7E780 100%), 
              radial-gradient(131.54% 107.07% at 66.88% -9.43%, rgba(167, 199, 231, 0.50) 0%, rgba(255, 255, 255, 0.00) 100%), 
              linear-gradient(240deg, rgba(255, 255, 255, 0.00) -19.21%, #FFF 90.9%) !important;
  border-color: #C1D4E8 !important;
}

.dark .security-card {
  --accent: rgba(167, 199, 231, 1);
  --theme-color: #A7C7E7;
  background: linear-gradient(45deg, #1a1a1a 0%, #1a1a1a 50%, #A7C7E730 100%), 
              radial-gradient(131.54% 107.07% at 66.88% -9.43%, rgba(167, 199, 231, 0.20) 0%, rgba(26, 26, 26, 0.00) 100%), 
              linear-gradient(240deg, rgba(26, 26, 26, 0.00) -19.21%, #1a1a1a 90.9%) !important;
  border-color: #2a3d4a !important;
}

/* Security Blue Card - Orange Theme */
.light .security-blue-card, :root .security-blue-card {
  --accent: rgba(230, 149, 77, 1);
  --theme-color: #E6954D;
  background: linear-gradient(45deg, #FFFFFF 0%, #FFFFFF 50%, #FFB36680 100%), 
              radial-gradient(131.54% 107.07% at 66.88% -9.43%, rgba(255, 179, 102, 0.50) 0%, rgba(255, 255, 255, 0.00) 100%), 
              linear-gradient(240deg, rgba(255, 255, 255, 0.00) -19.21%, #FFF 90.9%) !important;
  border-color: #FFD4B3 !important;
}

.dark .security-blue-card {
  --accent: rgba(255, 179, 102, 1);
  --theme-color: #FFB366;
  background: linear-gradient(45deg, #1a1a1a 0%, #1a1a1a 50%, #FFB36630 100%), 
              radial-gradient(131.54% 107.07% at 66.88% -9.43%, rgba(255, 179, 102, 0.20) 0%, rgba(26, 26, 26, 0.00) 100%), 
              linear-gradient(240deg, rgba(26, 26, 26, 0.00) -19.21%, #1a1a1a 90.9%) !important;
  border-color: #4a3a2a !important;
}

/* Security Yellow Card - Purple Theme */
.light .security-yellow-card, :root .security-yellow-card {
  --accent: rgba(183, 135, 199, 1);
  --theme-color: #B787C7;
  background: linear-gradient(45deg, #FFFFFF 0%, #FFFFFF 50%, #D4A7E780 100%), 
              radial-gradient(131.54% 107.07% at 66.88% -9.43%, rgba(212, 167, 231, 0.50) 0%, rgba(255, 255, 255, 0.00) 100%), 
              linear-gradient(240deg, rgba(255, 255, 255, 0.00) -19.21%, #FFF 90.9%) !important;
  border-color: #E6C7F0 !important;
}

.dark .security-yellow-card {
  --accent: rgba(212, 167, 231, 1);
  --theme-color: #D4A7E7;
  background: linear-gradient(45deg, #1a1a1a 0%, #1a1a1a 50%, #D4A7E730 100%), 
              radial-gradient(131.54% 107.07% at 66.88% -9.43%, rgba(212, 167, 231, 0.20) 0%, rgba(26, 26, 26, 0.00) 100%), 
              linear-gradient(240deg, rgba(26, 26, 26, 0.00) -19.21%, #1a1a1a 90.9%) !important;
  border-color: #3a2a4a !important;
}

/* Custom Hover States */
/* Cloud Computing Card Hover - Green */
.light .cloud-computing-card button[data-intent="primary"]:hover,
.light .cloud-computing-card .fern-button[data-intent="primary"]:hover,
.light .cloud-computing-card a[href*="edge-workers"]:hover:not([data-outlined]):not(.outlined),
:root .cloud-computing-card button[data-intent="primary"]:hover,
:root .cloud-computing-card .fern-button[data-intent="primary"]:hover,
:root .cloud-computing-card a[href*="edge-workers"]:hover:not([data-outlined]):not(.outlined) {
  background-color: #5a8f5f !important;
  background: #5a8f5f !important;
  border-color: #5a8f5f !important;
}
.light .cloud-computing-card button[data-intent="primary"]:focus-visible,
.light .cloud-computing-card .fern-button[data-intent="primary"]:focus-visible,
.light .cloud-computing-card a[href*="edge-workers"]:focus-visible:not([data-outlined]):not(.outlined),
:root .cloud-computing-card button[data-intent="primary"]:focus-visible,
:root .cloud-computing-card .fern-button[data-intent="primary"]:focus-visible,
:root .cloud-computing-card a[href*="edge-workers"]:focus-visible:not([data-outlined]):not(.outlined) {
  background-color: #5a8f5f !important;
  background: #5a8f5f !important;
  border-color: #5a8f5f !important; outline: none;
}

.dark .cloud-computing-card button[data-intent="primary"]:hover,
.dark .cloud-computing-card .fern-button[data-intent="primary"]:hover,
.dark .cloud-computing-card a[href*="edge-workers"]:hover:not([data-outlined]):not(.outlined) {
  background-color: #9bc49e !important;
  background: #9bc49e !important;
  border-color: #9bc49e !important;
}
.dark .cloud-computing-card button[data-intent="primary"]:focus-visible,
.dark .cloud-computing-card .fern-button[data-intent="primary"]:focus-visible,
.dark .cloud-computing-card a[href*="edge-workers"]:focus-visible:not([data-outlined]):not(.outlined) {
  background-color: #9bc49e !important;
  background: #9bc49e !important;
  border-color: #9bc49e !important; outline: none;
}

/* Security Card Hover - Blue */
.light .security-card button[data-intent="primary"]:hover,
.light .security-card .fern-button[data-intent="primary"]:hover,
.light .security-card button:hover:not([data-outlined]):not(.outlined),
.light .security-card a:hover:not([data-outlined]):not(.outlined),
.light .security-card [role="button"]:hover:not([data-outlined]):not(.outlined),
:root .security-card button[data-intent="primary"]:hover,
:root .security-card .fern-button[data-intent="primary"]:hover,
:root .security-card button:hover:not([data-outlined]):not(.outlined),
:root .security-card a:hover:not([data-outlined]):not(.outlined),
:root .security-card [role="button"]:hover:not([data-outlined]):not(.outlined) {
  background-color: #6289b3 !important;
  background: #6289b3 !important;
  border-color: #6289b3 !important;
}
.light .security-card button[data-intent="primary"]:focus-visible,
.light .security-card .fern-button[data-intent="primary"]:focus-visible,
.light .security-card button:focus-visible:not([data-outlined]):not(.outlined),
.light .security-card a:focus-visible:not([data-outlined]):not(.outlined),
.light .security-card [role="button"]:focus-visible:not([data-outlined]):not(.outlined),
:root .security-card button[data-intent="primary"]:focus-visible,
:root .security-card .fern-button[data-intent="primary"]:focus-visible,
:root .security-card button:focus-visible:not([data-outlined]):not(.outlined),
:root .security-card a:focus-visible:not([data-outlined]):not(.outlined),
:root .security-card [role="button"]:focus-visible:not([data-outlined]):not(.outlined) {
  background-color: #6289b3 !important;
  background: #6289b3 !important;
  border-color: #6289b3 !important; outline: none;
}

.dark .security-card button[data-intent="primary"]:hover,
.dark .security-card .fern-button[data-intent="primary"]:hover,
.dark .security-card button:hover:not([data-outlined]):not(.outlined),
.dark .security-card a:hover:not([data-outlined]):not(.outlined),
.dark .security-card [role="button"]:hover:not([data-outlined]):not(.outlined) {
  background-color: #8bb4d1 !important;
  background: #8bb4d1 !important;
  border-color: #8bb4d1 !important;
}
.dark .security-card button[data-intent="primary"]:focus-visible,
.dark .security-card .fern-button[data-intent="primary"]:focus-visible,
.dark .security-card button:focus-visible:not([data-outlined]):not(.outlined),
.dark .security-card a:focus-visible:not([data-outlined]):not(.outlined),
.dark .security-card [role="button"]:focus-visible:not([data-outlined]):not(.outlined) {
  background-color: #8bb4d1 !important;
  background: #8bb4d1 !important;
  border-color: #8bb4d1 !important; outline: none;
}

/* Security Blue Card Hover - Orange */
.light .security-blue-card button[data-intent="primary"]:hover,
.light .security-blue-card .fern-button[data-intent="primary"]:hover,
.light .security-blue-card button:hover:not([data-outlined]):not(.outlined),
.light .security-blue-card a:hover:not([data-outlined]):not(.outlined),
.light .security-blue-card [role="button"]:hover:not([data-outlined]):not(.outlined),
:root .security-blue-card button[data-intent="primary"]:hover,
:root .security-blue-card .fern-button[data-intent="primary"]:hover,
:root .security-blue-card button:hover:not([data-outlined]):not(.outlined),
:root .security-blue-card a:hover:not([data-outlined]):not(.outlined),
:root .security-blue-card [role="button"]:hover:not([data-outlined]):not(.outlined) {
  background-color: #cc7a3d !important;
  background: #cc7a3d !important;
  border-color: #cc7a3d !important;
}
.light .security-blue-card button[data-intent="primary"]:focus-visible,
.light .security-blue-card .fern-button[data-intent="primary"]:focus-visible,
.light .security-blue-card button:focus-visible:not([data-outlined]):not(.outlined),
.light .security-blue-card a:focus-visible:not([data-outlined]):not(.outlined),
.light .security-blue-card [role="button"]:focus-visible:not([data-outlined]):not(.outlined),
:root .security-blue-card button[data-intent="primary"]:focus-visible,
:root .security-blue-card .fern-button[data-intent="primary"]:focus-visible,
:root .security-blue-card button:focus-visible:not([data-outlined]):not(.outlined),
:root .security-blue-card a:focus-visible:not([data-outlined]):not(.outlined),
:root .security-blue-card [role="button"]:focus-visible:not([data-outlined]):not(.outlined) {
  background-color: #cc7a3d !important;
  background: #cc7a3d !important;
  border-color: #cc7a3d !important; outline: none;
}

.dark .security-blue-card button[data-intent="primary"]:hover,
.dark .security-blue-card .fern-button[data-intent="primary"]:hover,
.dark .security-blue-card button:hover:not([data-outlined]):not(.outlined),
.dark .security-blue-card a:hover:not([data-outlined]):not(.outlined),
.dark .security-blue-card [role="button"]:hover:not([data-outlined]):not(.outlined) {
  background-color: #e09852 !important;
  background: #e09852 !important;
  border-color: #e09852 !important;
}
.dark .security-blue-card button[data-intent="primary"]:focus-visible,
.dark .security-blue-card .fern-button[data-intent="primary"]:focus-visible,
.dark .security-blue-card button:focus-visible:not([data-outlined]):not(.outlined),
.dark .security-blue-card a:focus-visible:not([data-outlined]):not(.outlined),
.dark .security-blue-card [role="button"]:focus-visible:not([data-outlined]):not(.outlined) {
  background-color: #e09852 !important;
  background: #e09852 !important;
  border-color: #e09852 !important; outline: none;
}

/* Security Yellow Card Hover - Purple */
.light .security-yellow-card button[data-intent="primary"]:hover,
.light .security-yellow-card .fern-button[data-intent="primary"]:hover,
.light .security-yellow-card button:hover:not([data-outlined]):not(.outlined),
.light .security-yellow-card a:hover:not([data-outlined]):not(.outlined),
.light .security-yellow-card [role="button"]:hover:not([data-outlined]):not(.outlined),
:root .security-yellow-card button[data-intent="primary"]:hover,
:root .security-yellow-card .fern-button[data-intent="primary"]:hover,
:root .security-yellow-card button:hover:not([data-outlined]):not(.outlined),
:root .security-yellow-card a:hover:not([data-outlined]):not(.outlined),
:root .security-yellow-card [role="button"]:hover:not([data-outlined]):not(.outlined) {
  background-color: #9b6bb3 !important;
  background: #9b6bb3 !important;
  border-color: #9b6bb3 !important;
}
.light .security-yellow-card button[data-intent="primary"]:focus-visible,
.light .security-yellow-card .fern-button[data-intent="primary"]:focus-visible,
.light .security-yellow-card button:focus-visible:not([data-outlined]):not(.outlined),
.light .security-yellow-card a:focus-visible:not([data-outlined]):not(.outlined),
.light .security-yellow-card [role="button"]:focus-visible:not([data-outlined]):not(.outlined),
:root .security-yellow-card button[data-intent="primary"]:focus-visible,
:root .security-yellow-card .fern-button[data-intent="primary"]:focus-visible,
:root .security-yellow-card button:focus-visible:not([data-outlined]):not(.outlined),
:root .security-yellow-card a:focus-visible:not([data-outlined]):not(.outlined),
:root .security-yellow-card [role="button"]:focus-visible:not([data-outlined]):not(.outlined) {
  background-color: #9b6bb3 !important;
  background: #9b6bb3 !important;
  border-color: #9b6bb3 !important; outline: none;
}

.dark .security-yellow-card button[data-intent="primary"]:hover,
.dark .security-yellow-card .fern-button[data-intent="primary"]:hover,
.dark .security-yellow-card button:hover:not([data-outlined]):not(.outlined),
.dark .security-yellow-card a:hover:not([data-outlined]):not(.outlined),
.dark .security-yellow-card [role="button"]:hover:not([data-outlined]):not(.outlined) {
  background-color: #c091d1 !important;
  background: #c091d1 !important;
  border-color: #c091d1 !important;
}
.dark .security-yellow-card button[data-intent="primary"]:focus-visible,
.dark .security-yellow-card .fern-button[data-intent="primary"]:focus-visible,
.dark .security-yellow-card button:focus-visible:not([data-outlined]):not(.outlined),
.dark .security-yellow-card a:focus-visible:not([data-outlined]):not(.outlined),
.dark .security-yellow-card [role="button"]:focus-visible:not([data-outlined]):not(.outlined) {
  background-color: #c091d1 !important;
  background: #c091d1 !important;
  border-color: #c091d1 !important; outline: none;
}

/* Dark Mode Primary Button Text Colors */
.dark .cloud-computing-card button[data-intent="primary"],
.dark .cloud-computing-card .fern-button[data-intent="primary"],
.dark .cloud-computing-card a[href*="edge-workers"]:not([data-outlined]):not(.outlined) {
  color: #000000 !important;
}

.dark .security-card button[data-intent="primary"],
.dark .security-card .fern-button[data-intent="primary"],
.dark .security-card button:not([data-outlined]):not(.outlined),
.dark .security-card a:not([data-outlined]):not(.outlined) {
  color: #000000 !important;
}

.dark .security-blue-card button[data-intent="primary"],
.dark .security-blue-card .fern-button[data-intent="primary"],
.dark .security-blue-card button:not([data-outlined]):not(.outlined),
.dark .security-blue-card a:not([data-outlined]):not(.outlined) {
  color: #000000 !important;
}

.dark .security-yellow-card button[data-intent="primary"],
.dark .security-yellow-card .fern-button[data-intent="primary"],
.dark .security-yellow-card button:not([data-outlined]):not(.outlined),
.dark .security-yellow-card a:not([data-outlined]):not(.outlined) {
  color: #000000 !important;
}

/* Dark Mode Primary Button Text Colors on Hover */
.dark .cloud-computing-card button[data-intent="primary"]:hover,
.dark .cloud-computing-card .fern-button[data-intent="primary"]:hover,
.dark .cloud-computing-card a[href*="edge-workers"]:hover:not([data-outlined]):not(.outlined) {
  color: #000000 !important;
}
.dark .cloud-computing-card button[data-intent="primary"]:focus-visible,
.dark .cloud-computing-card .fern-button[data-intent="primary"]:focus-visible,
.dark .cloud-computing-card a[href*="edge-workers"]:focus-visible:not([data-outlined]):not(.outlined) {
  color: #000000 !important; outline: none;
}

.dark .security-card button[data-intent="primary"]:hover,
.dark .security-card .fern-button[data-intent="primary"]:hover,
.dark .security-card button:hover:not([data-outlined]):not(.outlined),
.dark .security-card a:hover:not([data-outlined]):not(.outlined) {
  color: #000000 !important;
}
.dark .security-card button[data-intent="primary"]:focus-visible,
.dark .security-card .fern-button[data-intent="primary"]:focus-visible,
.dark .security-card button:focus-visible:not([data-outlined]):not(.outlined),
.dark .security-card a:focus-visible:not([data-outlined]):not(.outlined) {
  color: #000000 !important; outline: none;
}

.dark .security-blue-card button[data-intent="primary"]:hover,
.dark .security-blue-card .fern-button[data-intent="primary"]:hover,
.dark .security-blue-card button:hover:not([data-outlined]):not(.outlined),
.dark .security-blue-card a:hover:not([data-outlined]):not(.outlined) {
  color: #000000 !important;
}
.dark .security-blue-card button[data-intent="primary"]:focus-visible,
.dark .security-blue-card .fern-button[data-intent="primary"]:focus-visible,
.dark .security-blue-card button:focus-visible:not([data-outlined]):not(.outlined),
.dark .security-blue-card a:focus-visible:not([data-outlined]):not(.outlined) {
  color: #000000 !important; outline: none;
}

.dark .security-yellow-card button[data-intent="primary"]:hover,
.dark .security-yellow-card .fern-button[data-intent="primary"]:hover,
.dark .security-yellow-card button:hover:not([data-outlined]):not(.outlined),
.dark .security-yellow-card a:hover:not([data-outlined]):not(.outlined) {
  color: #000000 !important;
}
.dark .security-yellow-card button[data-intent="primary"]:focus-visible,
.dark .security-yellow-card .fern-button[data-intent="primary"]:focus-visible,
.dark .security-yellow-card button:focus-visible:not([data-outlined]):not(.outlined),
.dark .security-yellow-card a:focus-visible:not([data-outlined]):not(.outlined) {
  color: #000000 !important; outline: none;
}

/* Filter Section Dark Mode Styling */
.dark .td-filter {
  color: #ffffff !important;
}

.dark .td-filter .td-main-hdr {
  color: #ffffff !important;
}

.dark .td-filter .td-sidebar-item {
  color: #e0e0e0 !important;
}

.dark .td-filter .td-sidebar-item.td-active {
  color: #007ac5 !important;
  background-color: rgba(0, 122, 197, 0.1) !important;
}

.dark .td-filter #main-search {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #444444 !important;
}

.dark .td-filter #main-search::placeholder {
  color: #a0a0a0 !important;
  font-style: italic !important;
}

/* Light mode placeholder styling */
.td-filter #main-search::placeholder {
  font-style: italic !important;
}

.dark .td-filter #mx-filter-dropdown {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #444444 !important;
}

/* Filter Sidebar Hover States for Dark Mode */
.dark .td-filter .td-sidebar-item:hover {
  background-color: rgba(0, 122, 197, 0.15) !important;
  color: #ffffff !important;
}
.dark .td-filter .td-sidebar-item:focus-visible {
  background-color: rgba(0, 122, 197, 0.15) !important;
  color: #ffffff !important; outline: none;
}

.dark .td-filter .td-sidebar-item:hover .td-icon {
  color: #007ac5 !important;
}
.dark .td-filter .td-sidebar-item:focus-within .td-icon {
  color: #007ac5 !important; outline: none;
}

/* Card dividers and borders in dark mode should remain subtle */
.dark .filter-card {
  border-color: #444444 !important;
}

/* Card hover states for dark mode */
.dark .filter-card:hover {
  border-color: #666666 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.dark .filter-card:focus-visible {
  border-color: #666666 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; outline: none;
}

/* Show More Button Styling - simple and clean */
.show-more-button:hover {
  border-color: #bbb !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
}
.show-more-button:focus-visible {
  border-color: #bbb !important;
  background-color: rgba(0, 0, 0, 0.02) !important; outline: none;
}

.dark .show-more-button {
  border-color: #555 !important;
}

.dark .show-more-button:hover {
  border-color: #777 !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
}
.dark .show-more-button:focus-visible {
  border-color: #777 !important;
  background-color: rgba(255, 255, 255, 0.03) !important; outline: none;
}

/* Dark Mode Outlined Button Styling for Cards */
.dark .filter-card button[data-outlined],
.dark .filter-card .fern-button[data-outlined],
.dark .filter-card button.outlined,
.dark .filter-card .fern-button.outlined {
  background-color: var(--grayscale-a3) !important;
  border-color: var(--grayscale-a6) !important;
  color: var(--grayscale-a11) !important;
}

.dark .filter-card button[data-outlined]:hover,
.dark .filter-card .fern-button[data-outlined]:hover,
.dark .filter-card button.outlined:hover,
.dark .filter-card .fern-button.outlined:hover {
  background-color: var(--grayscale-a4) !important;
  border-color: var(--grayscale-a7) !important;
  color: var(--grayscale-a12) !important;
}
.dark .filter-card button[data-outlined]:focus-visible,
.dark .filter-card .fern-button[data-outlined]:focus-visible,
.dark .filter-card button.outlined:focus-visible,
.dark .filter-card .fern-button.outlined:focus-visible {
  background-color: var(--grayscale-a4) !important;
  border-color: var(--grayscale-a7) !important;
  color: var(--grayscale-a12) !important; outline: none;
}

/* Dark Mode Outlined Button Styling for Featured Cards */
.dark .featured-card button[data-outlined],
.dark .featured-card .fern-button[data-outlined],
.dark .featured-card button.outlined,
.dark .featured-card .fern-button.outlined {
  background-color: var(--grayscale-a3) !important;
  border-color: var(--grayscale-a6) !important;
  color: var(--grayscale-a11) !important;
}

.dark .featured-card button[data-outlined]:hover,
.dark .featured-card .fern-button[data-outlined]:hover,
.dark .featured-card button.outlined:hover,
.dark .featured-card .fern-button.outlined:hover {
  background-color: var(--grayscale-a4) !important;
  border-color: var(--grayscale-a7) !important;
  color: var(--grayscale-a12) !important;
}
.dark .featured-card button[data-outlined]:focus-visible,
.dark .featured-card .fern-button[data-outlined]:focus-visible,
.dark .featured-card button.outlined:focus-visible,
.dark .featured-card .fern-button.outlined:focus-visible {
  background-color: var(--grayscale-a4) !important;
  border-color: var(--grayscale-a7) !important;
  color: var(--grayscale-a12) !important; outline: none;
}

/* Dark Mode Card Footer Divider Lines */
.dark .card-footer-tags {
  border-top-color: #e5e7eb !important;
}

/* Dark Mode - Comprehensive border color override */
.dark .filter-card *,
.dark .fern-card *,
.dark .td-filter-cards * {
  border-color: #e5e7eb !important;
}

/* Dark Mode - Target specific white/light borders */
.dark .filter-card *[style*="border"],
.dark .fern-card *[style*="border"] {
  border-color: #e5e7eb !important;
}

/* Dark Mode - Use grayscale variables for borders */
.dark .filter-card,
.dark .filter-card *,
.dark .fern-card,
.dark .fern-card * {
  border-color: var(--grayscale-a6) !important;
}

/* React Filter Component Styles */
.react-filter-component {
  /* Container for React components */
}

.show-more-btn {
  text-align: center;
  margin: 2rem 0;
}

.show-more-button {
  margin: 2rem auto;
  display: block;
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
  font-family: inherit;
  color: inherit;
}

.show-more-button:hover {
  background-color: #f5f5f5;
  border-color: #999;
}
.show-more-button:focus-visible {
  background-color: #f5f5f5;
  border-color: #999; outline: none;
}

.show-more-button:active {
  transform: translateY(1px);
}

/* Ensure filter cards have proper transitions */
.filter-card {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.filter-card.hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

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

  .show-more-button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

}