/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 800px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 50px;
  --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);
}


:root {
  --accent-1: #fffcfc;
  --accent-2: #fff7f6;
  --accent-3: #ffebe8;
  --accent-4: #ffdad5;
  --accent-5: #ffcbc5;
  --accent-6: #ffbab4;
  --accent-7: #fda59f;
  --accent-8: #f58983;
  --accent-9: #ee2737;
  --accent-10: #df0028;
  --accent-11: #da0025;
  --accent-12: #6b0a13;

  --accent-a1: #ff000003;
  --accent-a2: #ff1d0009;
  --accent-a3: #ff220017;
  --accent-a4: #ff1f002a;
  --accent-a5: #ff1b003a;
  --accent-a6: #ff15014b;
  --accent-a7: #fa100060;
  --accent-a8: #eb0d007c;
  --accent-a9: #eb0013d8;
  --accent-a10: #df0028;
  --accent-a11: #da0025;
  --accent-a12: #650009f5;

  --accent-contrast: #fff;
  --accent-surface: #fff5f4cc;
  --accent-indicator: #ee2737;
  --accent-track: #ee2737;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --accent-1: oklch(99.4% 0.0036 24.19);
      --accent-2: oklch(98.3% 0.0097 24.19);
      --accent-3: oklch(95.6% 0.0246 24.19);
      --accent-4: oklch(92.8% 0.0554 24.19);
      --accent-5: oklch(89.6% 0.0726 24.19);
      --accent-6: oklch(85.7% 0.0874 24.19);
      --accent-7: oklch(80.7% 0.1048 24.19);
      --accent-8: oklch(74.5% 0.1327 24.19);
      --accent-9: oklch(61.2% 0.2287 24.19);
      --accent-10: oklch(57% 0.2317 24.19);
      --accent-11: oklch(55.7% 0.2287 24.19);
      --accent-12: oklch(33.9% 0.1277 24.19);

      --accent-a1: color(display-p3 0.6745 0.0235 0.0235 / 0.012);
      --accent-a2: color(display-p3 0.8941 0.1294 0.0235 / 0.036);
      --accent-a3: color(display-p3 0.8667 0.1451 0.0118 / 0.087);
      --accent-a4: color(display-p3 0.8549 0.1255 0.0039 / 0.161);
      --accent-a5: color(display-p3 0.8588 0.1098 0.0039 / 0.22);
      --accent-a6: color(display-p3 0.8667 0.102 0.0039 / 0.287);
      --accent-a7: color(display-p3 0.8392 0.0784 0.0039 / 0.365);
      --accent-a8: color(display-p3 0.8 0.0588 0.0039 / 0.471);
      --accent-a9: color(display-p3 0.8157 0 0.0118 / 0.757);
      --accent-a10: color(display-p3 0.7608 0 0.0353 / 0.832);
      --accent-a11: color(display-p3 0.7412 0 0.0235 / 0.836);
      --accent-a12: color(display-p3 0.3255 0 0.0039 / 0.914);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9961 0.9608 0.9569 / 0.8);
      --accent-indicator: oklch(61.2% 0.2287 24.19);
      --accent-track: oklch(61.2% 0.2287 24.19);
    }
  }
}


:root {
  --grayscale-1: #fdfdfc;
  --grayscale-2: #f9f9f8;
  --grayscale-3: #f1f0ef;
  --grayscale-4: #e9e8e6;
  --grayscale-5: #e2e1de;
  --grayscale-6: #dad9d6;
  --grayscale-7: #cfceca;
  --grayscale-8: #bcbbb5;
  --grayscale-9: #8d8d86;
  --grayscale-10: #82827c;
  --grayscale-11: #63635e;
  --grayscale-12: #21201c;

  --grayscale-a1: #55550003;
  --grayscale-a2: #25250007;
  --grayscale-a3: #20100010;
  --grayscale-a4: #1f150019;
  --grayscale-a5: #1f180021;
  --grayscale-a6: #19130029;
  --grayscale-a7: #19140035;
  --grayscale-a8: #1915014a;
  --grayscale-a9: #0f0f0079;
  --grayscale-a10: #0c0c0083;
  --grayscale-a11: #080800a1;
  --grayscale-a12: #060500e3;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --grayscale-1: color(display-p3 0.992 0.992 0.989);
      --grayscale-2: color(display-p3 0.977 0.977 0.973);
      --grayscale-3: color(display-p3 0.943 0.942 0.936);
      --grayscale-4: color(display-p3 0.913 0.912 0.903);
      --grayscale-5: color(display-p3 0.885 0.883 0.873);
      --grayscale-6: color(display-p3 0.854 0.852 0.839);
      --grayscale-7: color(display-p3 0.813 0.81 0.794);
      --grayscale-8: color(display-p3 0.738 0.734 0.713);
      --grayscale-9: color(display-p3 0.553 0.553 0.528);
      --grayscale-10: color(display-p3 0.511 0.511 0.488);
      --grayscale-11: color(display-p3 0.388 0.388 0.37);
      --grayscale-12: color(display-p3 0.129 0.126 0.111);

      --grayscale-a1: #55550003;
      --grayscale-a2: #25250007;
      --grayscale-a3: #20100010;
      --grayscale-a4: #1f150019;
      --grayscale-a5: #1f180021;
      --grayscale-a6: #19130029;
      --grayscale-a7: #19140035;
      --grayscale-a8: #1915014a;
      --grayscale-a9: #0f0f0079;
      --grayscale-a10: #0c0c0083;
      --grayscale-a11: #080800a1;
      --grayscale-a12: #060500e3;

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


.dark {
  --accent-1: #000;
  --accent-2: #121211;
  --accent-3: #1f1f1d;
  --accent-4: #282826;
  --accent-5: #30302e;
  --accent-6: #3a3a37;
  --accent-7: #484845;
  --accent-8: #60605e;
  --accent-9: #fff;
  --accent-10: #f6f6f4;
  --accent-11: #b3b3b0;
  --accent-12: #eeeeec;

  --accent-a1: #00000000;
  --accent-a2: #fffff112;
  --accent-a3: #ffffef1f;
  --accent-a4: #fffff328;
  --accent-a5: #fffff530;
  --accent-a6: #fffff23a;
  --accent-a7: #fffff548;
  --accent-a8: #fffffa60;
  --accent-a9: #ffffff;
  --accent-a10: #fffffdf6;
  --accent-a11: #fffffbb3;
  --accent-a12: #fffffdee;

  --accent-contrast: #311921;
  --accent-surface: #24242280;
  --accent-indicator: #fff;
  --accent-track: #fff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.0023 106.5);
      --accent-2: oklch(18.3% 0.0022 106.5);
      --accent-3: oklch(23.9% 0.0032 106.5);
      --accent-4: oklch(27.5% 0.0036 106.5);
      --accent-5: oklch(30.8% 0.004 106.5);
      --accent-6: oklch(34.7% 0.004 106.5);
      --accent-7: oklch(40% 0.004 106.5);
      --accent-8: oklch(49% 0.004 106.5);
      --accent-9: oklch(100% 0 none);
      --accent-10: oklch(97.3% 0.0027 106.5);
      --accent-11: oklch(76.7% 0.004 106.5);
      --accent-12: oklch(94.8% 0.0027 106.5);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.9961 0.9961 0.9412 / 0.071);
      --accent-a3: color(display-p3 1 1 0.9333 / 0.122);
      --accent-a4: color(display-p3 1 1 0.9529 / 0.157);
      --accent-a5: color(display-p3 0.9961 0.9961 0.9569 / 0.189);
      --accent-a6: color(display-p3 1 1 0.949 / 0.228);
      --accent-a7: color(display-p3 1 1 0.9569 / 0.283);
      --accent-a8: color(display-p3 1 1 0.9804 / 0.377);
      --accent-a9: color(display-p3 1 1 1);
      --accent-a10: color(display-p3 1 1 0.9922 / 0.965);
      --accent-a11: color(display-p3 1 1 0.9843 / 0.702);
      --accent-a12: color(display-p3 1 1 0.9922 / 0.934);

      --accent-contrast: #311921;
      --accent-surface: color(display-p3 0.1412 0.1412 0.1333 / 0.5);
      --accent-indicator: oklch(100% 0 none);
      --accent-track: oklch(100% 0 none);
    }
  }
}


.dark {
  --grayscale-1: #111110;
  --grayscale-2: #191918;
  --grayscale-3: #222221;
  --grayscale-4: #2a2a28;
  --grayscale-5: #31312e;
  --grayscale-6: #3b3a37;
  --grayscale-7: #494844;
  --grayscale-8: #62605b;
  --grayscale-9: #6f6d66;
  --grayscale-10: #7c7b74;
  --grayscale-11: #b5b3ad;
  --grayscale-12: #eeeeec;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f4f4f309;
  --grayscale-a3: #f6f6f513;
  --grayscale-a4: #fefef31b;
  --grayscale-a5: #fbfbeb23;
  --grayscale-a6: #fffaed2d;
  --grayscale-a7: #fffbed3c;
  --grayscale-a8: #fff9eb57;
  --grayscale-a9: #fffae965;
  --grayscale-a10: #fffdee73;
  --grayscale-a11: #fffcf4b0;
  --grayscale-a12: #fffffded;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.063);
      --grayscale-2: color(display-p3 0.098 0.098 0.094);
      --grayscale-3: color(display-p3 0.135 0.135 0.129);
      --grayscale-4: color(display-p3 0.164 0.163 0.156);
      --grayscale-5: color(display-p3 0.193 0.192 0.183);
      --grayscale-6: color(display-p3 0.23 0.229 0.217);
      --grayscale-7: color(display-p3 0.285 0.282 0.267);
      --grayscale-8: color(display-p3 0.384 0.378 0.357);
      --grayscale-9: color(display-p3 0.434 0.428 0.403);
      --grayscale-10: color(display-p3 0.487 0.481 0.456);
      --grayscale-11: color(display-p3 0.707 0.703 0.68);
      --grayscale-12: color(display-p3 0.933 0.933 0.926);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f4f4f309;
      --grayscale-a3: #f6f6f513;
      --grayscale-a4: #fefef31b;
      --grayscale-a5: #fbfbeb23;
      --grayscale-a6: #fffaed2d;
      --grayscale-a7: #fffbed3c;
      --grayscale-a8: #fff9eb57;
      --grayscale-a9: #fffae965;
      --grayscale-a10: #fffdee73;
      --grayscale-a11: #fffcf4b0;
      --grayscale-a12: #fffffded;

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

:root {
  color-scheme: light;
  --accent: rgba(238, 39, 55, 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: light;
  --background: #000000;
  --accent: #ffffff;
}

/* SFA200NV Hardware Documentation Styles */

/* Main TOC Container */
.toc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* TOC Grid Layout */
.toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Section Cards */
.toc-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.toc-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-color: #0d6efd;
}
.toc-section:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-color: #0d6efd;
}

/* Section Headers */
.toc-section h3 {
  color: #0d6efd;
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e9ecef;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Section Icons */
.toc-section h3::before {
  content: "📁";
  font-size: 1.1em;
}

.toc-section[data-section="overview"] h3::before { content: "📋"; }
.toc-section[data-section="components"] h3::before { content: "🔧"; }
.toc-section[data-section="installation"] h3::before { content: "⚙️"; }
.toc-section[data-section="configuration"] h3::before { content: "🔧"; }
.toc-section[data-section="monitoring"] h3::before { content: "📊"; }
.toc-section[data-section="replacement"] h3::before { content: "🔄"; }
.toc-section[data-section="power"] h3::before { content: "⚡"; }
.toc-section[data-section="battery"] h3::before { content: "🔋"; }
.toc-section[data-section="temperature"] h3::before { content: "🌡️"; }
.toc-section[data-section="bmc"] h3::before { content: "🖥️"; }
.toc-section[data-section="vm"] h3::before { content: "💻"; }
.toc-section[data-section="support"] h3::before { content: "🆘"; }

/* Link Lists */
.toc-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-section li {
  margin-bottom: 0.5rem;
}

.toc-section a {
  color: #495057;
  text-decoration: none;
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  line-height: 1.4;
  position: relative;
  padding-left: 1.5rem;
}

.toc-section a::before {
  content: "▸";
  position: absolute;
  left: 0.5rem;
  color: #6c757d;
  transition: all 0.2s ease;
}

.toc-section a:hover {
  background-color: #e3f2fd;
  color: #0d6efd;
  transform: translateX(4px);
}
.toc-section a:focus-visible {
  background-color: #e3f2fd;
  color: #0d6efd;
  transform: translateX(4px);
}

.toc-section a:hover::before {
  color: #0d6efd;
  transform: rotate(90deg);
}
.toc-section a:focus-visible::before {
  color: #0d6efd;
  transform: rotate(90deg);
}

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

  .toc-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .toc-container {
    padding: 1rem;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  .toc-section {
    padding: 1rem;
  }

}

/* Document Header Styles */
.document-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.version-info {
  text-align: center;
  font-size: 1.1rem;
  color: #495057;
  margin-bottom: 1.5rem;
}

.version-info .version {
  font-weight: 600;
  color: #0d6efd;
}

.version-info .doc-number,
.version-info .revision {
  font-weight: 500;
}

.product-variants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.variant-group {
  text-align: center;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.variant-group h4 {
  color: #0d6efd;
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.variant {
  font-family: 'Monaco', 'Menlo', monospace;
  background: #f8f9fa;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
}

.publish-date {
  text-align: center;
  font-size: 1.1rem;
  color: #495057;
  margin-top: 1.5rem;
}

/* TOC Sections Styling */
.toc-sections {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.toc-main-sections,
.toc-appendices {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid #dee2e6;
}

.toc-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.toc-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.toc-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #0d6efd;
}
.toc-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #0d6efd;
}

.section-number {
  background: #0d6efd;
  color: white;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.section-title {
  font-weight: 600;
  color: #212529;
  font-size: 1rem;
}

.section-desc {
  font-size: 0.85rem;
  color: #6c757d;
  text-align: right;
}

/* Safety Guidelines */
.safety-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 1.5rem;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
}

.safety-category h4 {
  color: #856404;
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

.safety-category a {
  color: #856404;
  text-decoration: none;
  font-size: 0.9rem;
}

.safety-category a:hover {
  text-decoration: underline;
}
.safety-category a:focus-visible {
  text-decoration: underline;
}

.regulatory-section {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
}

.regulatory-section h4 {
  color: #0d6efd;
  margin: 1.5rem 0 1rem 0;
}

.certification-logo {
  text-align: center;
  margin: 1rem 0;
}

/* Safety Guidelines */
.safety-guidelines {
  margin: 1rem 0;
}

.safety-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  margin: 0.75rem 0;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  border-left: 4px solid #28a745;
}

.safety-item.critical {
  background: #fff3cd;
  border-color: #ffeaa7;
  border-left-color: #ffc107;
}

.safety-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.safety-content strong {
  color: #212529;
  display: block;
  margin-bottom: 0.25rem;
}

/* Responsive Design for New Elements */
@media (max-width: 768px) {

  .document-header {
    padding: 1.5rem;
  }
  
  .product-variants {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .toc-sections {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .toc-link {
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
  }
  
  .section-desc {
    display: none;
  }
  
  .safety-nav {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

}

/* Print Styles */
@media print {

  .toc-section {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
  }
  
  .toc-section a {
    color: #000 !important;
  }
  
  .document-header,
  .safety-guidelines,
  .regulatory-section {
    box-shadow: none;
    border: 1px solid #000;
  }

}


body:has(.landing-page) .fern-page-actions {
  display: none !important;
}
body:has(.landing-page) .fern-card {
  border-radius: 40px;
}


.landing-page {
  background-image: url('https://www.ddn.com/wp-content/uploads/2024/07/bg-hero-02-1920x1187.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: repeat-y !important;
  background-attachment: fixed;
  min-height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 2rem;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}


.landing-page > * {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

body:has(.landing-page) .my-8 {
   margin-block: calc(var(--spacing) * 0); 
}

/* Override the global heading font-family and font-weight rules */
body h1 {
  font-family: inherit;
}

.hero-content {
  margin-top: 9rem;
  margin-bottom: 10rem;

}
/* Hero content styling */
.hero-content h1 {
  font-size: 68px !important;
  font-weight: 600 !important;
  word-spacing: -2%;
  margin-bottom: 0.5rem;
  font-style: medium !important;
  text-align: center;
}

body:has(.landing-page) h2 {
  font-size: 30px !important;
  font-weight: 500;
  word-spacing: -2%;
  font-style: semibold;
}

.hero-content p {
  font-size: 22px;
  font-weight: 400;
}

.fern-header-content .fern-button,
.fern-header-content #fern-auth-button {
  border-radius: 99999px !important;
  padding: 1.5rem 1.4rem !important; 
}

#fern-search-button {
  border-radius: 99999px !important;
}

body:has(.landing-page) .fern-card > div > div > .jsx-395584807.text-body.text-base.font-semibold {
  font-size: 24px !important;
}

#fern-ask-ai-button {
  display: none !important;
}

#fern-search-button {
  display: none !important;
}

/* ===== DDN Dashboard-Inspired Modern Styling ===== */

/* CSS Variables for consistent design tokens - Light Mode (default) */
:root {
  --ddn-accent: #EE2737;
  --ddn-border: #E5E7EB;
  --ddn-surface: #FFFFFF;
  --ddn-bg: #F9FAFB;
  --ddn-text-primary: #0F172A;
  --ddn-text-secondary: #475569;
  --ddn-text-muted: #64748B;
  --accent-tint: rgba(238, 39, 55, 0.04);
  --accent-tint-strong: rgba(238, 39, 55, 0.08);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 10px 15px -3px rgba(16, 24, 40, 0.1);
  --shadow-lg: 0 10px 20px rgba(16, 24, 40, 0.12), 0 20px 25px -5px rgba(16, 24, 40, 0.1);
}

/* Dark Mode Overrides */
html.dark,
html[style*="color-scheme: dark"] {
  --ddn-border: #243244;
  --ddn-surface: #0F172A;
  --ddn-bg: #0B1220;
  --ddn-text-primary: #E2E8F0;
  --ddn-text-secondary: #CBD5E1;
  --ddn-text-muted: #94A3B8;
  --accent-tint: rgba(238, 39, 55, 0.12);
  --accent-tint-strong: rgba(238, 39, 55, 0.18);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45), 0 12px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Fallback for system dark mode preference */
@media (prefers-color-scheme: dark) {

  :root:not(.light) {
    --ddn-border: #243244;
    --ddn-surface: #0F172A;
    --ddn-bg: #0B1220;
    --ddn-text-primary: #E2E8F0;
    --ddn-text-secondary: #CBD5E1;
    --ddn-text-muted: #94A3B8;
    --accent-tint: rgba(238, 39, 55, 0.12);
    --accent-tint-strong: rgba(238, 39, 55, 0.18);
  }

}

/* Clean background for entire site */
body {
  background-color: var(--ddn-bg) !important;
}

/* Add subtle overlay to landing page background for cleaner look */
.landing-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.82);
  pointer-events: none;
  z-index: 1;
}

/* Dark mode overlay for landing page */
html.dark .landing-page::before,
html[style*="color-scheme: dark"] .landing-page::before {
  background: rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {

  :root:not(.light) .landing-page::before {
    background: rgba(0, 0, 0, 0.5);
  }

}

/* Ensure content is above overlay */
.landing-page > * {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

/* Enhanced Typography for Landing Page */
.landing-page h1,
.hero-content h1 {
  font-size: clamp(40px, 5vw, 56px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ddn-text-primary) !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

.landing-page h2,
body:has(.landing-page) h2 {
  font-size: clamp(18px, 2.5vw, 24px) !important;
  color: var(--ddn-text-secondary) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* Modern Card Styling - Accent on Hover Only */
body:has(.landing-page) .fern-card {
  background: var(--ddn-surface) !important;
  border: 1.5px solid var(--ddn-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 2rem !important;
  position: relative !important;
  overflow: hidden !important;
}

body:has(.landing-page) .fern-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ddn-accent) 0%, rgba(238, 39, 55, 0.5) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

body:has(.landing-page) .fern-card:hover {
  border-color: var(--ddn-accent) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) scale(1.01) !important;
}
body:has(.landing-page) .fern-card:focus-visible {
  border-color: var(--ddn-accent) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) scale(1.01) !important;
}

body:has(.landing-page) .fern-card:hover::before {
  opacity: 1;
}
body:has(.landing-page) .fern-card:focus-visible::before {
  opacity: 1;
}

/* Card Icon with Subtle Accent Background */
body:has(.landing-page) .fern-card .card-icon {
  color: var(--ddn-accent) !important;
  background: var(--accent-tint-strong) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  width: 48px !important;
  height: 48px !important;
  transition: all 0.25s ease !important;
}

body:has(.landing-page) .fern-card:hover .card-icon {
  background: rgba(238, 39, 55, 0.15) !important;
  transform: scale(1.05) !important;
}
body:has(.landing-page) .fern-card:focus-within .card-icon {
  background: rgba(238, 39, 55, 0.15) !important;
  transform: scale(1.05) !important;
}

/* Card Content Typography */
body:has(.landing-page) .fern-card .text-body.text-base.font-semibold {
  font-size: 22px !important;
  color: var(--ddn-text-primary) !important;
  font-weight: 600 !important;
  margin-top: 0.75rem !important;
  letter-spacing: -0.01em !important;
}

body:has(.landing-page) .fern-card .text-base {
  color: var(--ddn-text-muted) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-top: 0.5rem !important;
}

/* Button Styling - Neutral with Accent on Hover */
.fern-button,
#fern-auth-button {
  background: transparent !important;
  color: var(--ddn-text-primary) !important;
  border: 1.5px solid var(--ddn-border) !important;
  border-radius: 9999px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
}

.fern-button:hover,
.fern-button:focus-visible,
#fern-auth-button:hover,
#fern-auth-button:focus-visible {
  border-color: var(--ddn-accent) !important;
  background: var(--accent-tint) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

/* Keep page action buttons neutral – remove global border/shadow/hover */
.fern-page-actions .fern-button {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: inherit !important;
  transform: none !important;
}

.fern-page-actions .fern-button:hover,
.fern-page-actions .fern-button:focus-visible {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Respect grouped radius utilities overridden by global pill radius */
.fern-page-actions .fern-button.rounded-l-none {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.fern-page-actions .fern-button.rounded-r-none {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Header Styling */


/* Navigation Links with Accent on Hover */
nav[aria-label="Navbar links"] a {
  border: 1px solid transparent !important;
  border-radius: 9999px !important;
  padding: 0.5rem 1rem !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
}

nav[aria-label="Navbar links"] a:hover,
nav[aria-label="Navbar links"] a:focus-visible {
  border-color: var(--ddn-accent) !important;
  background: var(--accent-tint) !important;
  color: var(--ddn-accent) !important;
}

/* Link Hover States */
a {
  transition: color 0.15s ease !important;
}

a:hover {
  color: var(--ddn-accent) !important;
}
a:focus-visible {
  color: var(--ddn-accent) !important;
}

/* Alert/Notification Cards */
.alert-card {
  background: var(--ddn-surface) !important;
  border: 1px solid var(--ddn-border) !important;
  border-left: 4px solid var(--ddn-accent) !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  margin: 1rem 0 !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Badge/Chip Styling */
.badge,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--ddn-border);
  background: var(--ddn-surface);
  color: var(--ddn-text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.badge--accent,
.tag--accent {
  border-color: var(--ddn-accent);
  color: var(--ddn-accent);
  background: var(--accent-tint);
}

/* Metric Display Styling */
.metric-value {
  color: var(--ddn-accent) !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

.metric-label {
  color: var(--ddn-text-muted) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  margin-top: 0.5rem !important;
}

/* ========================================
   Enhanced Home Page Styles
   ======================================== */

/* Hero Section */
.ddn-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 6rem 2rem 4rem;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.ddn-hero-content {
  max-width: 600px;
}

.ddn-hero-branding {
  font-size: 0.875rem;
  color: var(--ddn-text-muted);
  margin-bottom: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.ddn-hero-title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: var(--ddn-text-primary);
}

.ddn-hero-accent {
  color: var(--ddn-accent);
}

.ddn-hero-subtitle {
  font-size: 1.125rem;
  color: var(--ddn-text-secondary);
  margin-bottom: 2rem;
  line-height: 1.7;
}

.ddn-hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.ddn-cta {
  display: inline-block;
  padding: 0.875rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  font-size: 1rem;
}

.ddn-cta-primary {
  background: var(--ddn-accent);
  color: #FFFFFF;
  border: 2px solid var(--ddn-accent);
}

.ddn-cta-primary:hover {
  background: #D91F2E;
  border-color: #D91F2E;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.ddn-cta-primary:focus-visible {
  background: #D91F2E;
  border-color: #D91F2E;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.ddn-cta-secondary {
  background: transparent;
  color: var(--ddn-text-primary);
  border: 2px solid var(--ddn-border);
}

.ddn-cta-secondary:hover {
  border-color: var(--ddn-accent);
  background: var(--accent-tint);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.ddn-cta-secondary:focus-visible {
  border-color: var(--ddn-accent);
  background: var(--accent-tint);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

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

.ddn-hero-image {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

/* Products Section */
.ddn-products-section {
  max-width: 1440px;
  margin: 6rem auto;
  padding: 0 2rem;
}

.ddn-section-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--ddn-text-primary);
  text-align: center;
}

.ddn-section-subtitle {
  font-size: 1.125rem;
  color: var(--ddn-text-secondary);
  text-align: center;
  margin-bottom: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.ddn-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.ddn-product-card-wrapper {
  text-decoration: none;
  color: inherit;
  display: block;
}

.ddn-product-card {
  background: var(--ddn-surface);
  border: 2px solid var(--ddn-border);
  border-radius: 16px;
  padding: 2.5rem;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.ddn-product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ddn-accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ddn-product-card:hover {
  border-color: var(--ddn-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.ddn-product-card:focus-visible {
  border-color: var(--ddn-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.ddn-product-card:hover::before {
  opacity: 1;
}
.ddn-product-card:focus-visible::before {
  opacity: 1;
}

.ddn-product-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.ddn-product-icon svg {
  color: var(--ddn-accent);
}

.ddn-product-card:hover .ddn-product-icon {
  background: var(--accent-tint-strong);
  transform: scale(1.1);
}
.ddn-product-card:focus-within .ddn-product-icon {
  background: var(--accent-tint-strong);
  transform: scale(1.1);
}

.ddn-product-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--ddn-text-primary);
}

.ddn-product-description {
  font-size: 1rem;
  color: var(--ddn-text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.ddn-product-link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ddn-accent);
  transition: all 0.2s ease;
}

.ddn-product-card:hover .ddn-product-link {
  transform: translateX(4px);
  display: inline-block;
}
.ddn-product-card:focus-within .ddn-product-link {
  transform: translateX(4px);
  display: inline-block;
}

/* Metrics Section */
.ddn-metrics-section {
  max-width: 1440px;
  margin: 8rem auto;
  padding: 4rem 2rem;
  background: var(--accent-tint);
  border-radius: 24px;
}

.ddn-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;
  margin-top: 3rem;
}

.ddn-metric {
  text-align: center;
}

.ddn-metric-value {
  font-size: 64px;
  font-weight: 800;
  color: var(--ddn-accent);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.ddn-metric-label {
  font-size: 1rem;
  color: var(--ddn-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Partners Section */
.ddn-partners-section {
  max-width: 1440px;
  margin: 6rem auto;
  padding: 0 2rem;
  text-align: center;
}

.ddn-partners-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 2rem;
  color: var(--ddn-text-secondary);
}

.ddn-logos-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.ddn-logo {
  height: 48px;
  display: flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  filter: grayscale(100%);
}

.ddn-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
}
.ddn-logo:focus-visible {
  opacity: 1;
  filter: grayscale(0%);
}

.ddn-logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* Solutions Section */
.ddn-solutions-section {
  max-width: 1440px;
  margin: 8rem auto;
  padding: 0 2rem;
}

.ddn-solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.ddn-solution-card {
  background: var(--ddn-surface);
  border: 2px solid var(--ddn-border);
  border-radius: 16px;
  padding: 2rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  display: block;
}

.ddn-solution-card:hover {
  border-color: var(--ddn-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  background: var(--accent-tint);
}
.ddn-solution-card:focus-visible {
  border-color: var(--ddn-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  background: var(--accent-tint);
}

.ddn-solution-icon {
  font-size: 48px;
  margin-bottom: 1rem;
  display: block;
}

.ddn-solution-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--ddn-text-primary);
}

.ddn-solution-description {
  font-size: 0.9375rem;
  color: var(--ddn-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Quote Section */
.ddn-quote-section {
  max-width: 1200px;
  margin: 8rem auto;
  padding: 4rem 2rem;
  background: var(--ddn-surface);
  border: 2px solid var(--ddn-border);
  border-radius: 24px;
}

.ddn-quote-content {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
}

.ddn-quote-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--ddn-border);
}

.ddn-quote {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ddn-text-primary);
  margin: 0 0 1rem 0;
  font-style: italic;
}

.ddn-quote-author {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ddn-quote-author strong {
  font-size: 1.125rem;
  color: var(--ddn-text-primary);
}

.ddn-quote-author span {
  font-size: 1rem;
  color: var(--ddn-text-secondary);
}

/* CTA Section */
.ddn-cta-section {
  max-width: 1440px;
  margin: 8rem auto 6rem;
  padding: 0 2rem;
  text-align: center;
}

.ddn-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

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

  .ddn-hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 4rem 1.5rem 3rem;
  }

  .ddn-hero-title {
    font-size: 36px;
  }

  .ddn-hero-subtitle {
    font-size: 1rem;
  }

  .ddn-hero-content {
    order: 0;
  }

  .ddn-hero-image-container {
    order: 1;
    margin-top: 2rem;
  }

  .ddn-hero-image {
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 8px 12px;
    background: var(--ddn-surface);
    border-radius: 12px;
  }

  .ddn-section-title {
    font-size: 32px;
  }

  .ddn-section-subtitle {
    font-size: 1rem;
  }

  .ddn-products-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .ddn-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .ddn-metric-value {
    font-size: 48px;
  }

  .ddn-logos-row {
    gap: 2rem;
  }

  .ddn-logo {
    height: 36px;
  }

  .ddn-solutions-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .ddn-quote-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ddn-quote-image {
    margin: 0 auto;
  }

  .ddn-quote {
    font-size: 20px;
  }

  .ddn-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .ddn-cta {
    width: 100%;
    text-align: center;
  }

}

@media (max-width: 480px) {

  .ddn-hero {
    padding: 3rem 1rem 2rem;
  }

  .ddn-hero-title {
    font-size: 28px;
  }

  .ddn-section-title {
    font-size: 28px;
  }

  .ddn-metrics-section {
    padding: 3rem 1.5rem;
    margin: 4rem auto;
  }

  .ddn-metrics-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ddn-metric-value {
    font-size: 40px;
  }

  .ddn-quote {
    font-size: 18px;
  }

}