/* ==========================================================================
   LaunchPad Marketing Site — Design Tokens & Base Styles
   ==========================================================================
   Aesthetic: Linear/Vercel hybrid — dark-first, monochrome + indigo accent,
   dense typography via Geist, frosted glass used surgically.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT FACE DECLARATIONS — Geist Sans & Geist Mono
   --------------------------------------------------------------------------
   Loaded from jsDelivr CDN. Four weights: Regular (400), Medium (500),
   Semibold (600), Bold (700). These match the weight usage defined in the
   LaunchPad UI spec.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Geist Sans";
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Sans";
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Sans";
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-SemiBold.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Sans";
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-SemiBold.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Bold.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. CSS CUSTOM PROPERTIES — Design Tokens
   --------------------------------------------------------------------------
   All tokens from the LaunchPad UI spec centralized here. Dark mode is the
   default; light mode values override via .light class or media query.
   -------------------------------------------------------------------------- */

:root {
  /* --- Surfaces --- */
  --color-root: #09090b;
  --color-surface: #111113;
  --color-elevated: #1a1a1d;
  --color-overlay: #222225;
  --color-input: #19191b;
  --color-glass: rgba(17, 17, 19, 0.72);

  /* --- Text --- */
  --color-text-primary: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-text-tertiary: #63636a;
  --color-text-ghost: #3f3f46;

  /* --- Borders --- */
  --color-border: #27272a;
  --color-border-subtle: #1e1e21;
  --color-border-strong: #3f3f46;
  --color-border-accent: #6366f1;

  /* --- Accent (Indigo) --- */
  --color-accent: #6366f1;
  --color-accent-hover: #818cf8;
  --color-accent-press: #4f46e5;
  --color-accent-muted: rgba(99, 102, 241, 0.1);
  --color-accent-glow: rgba(99, 102, 241, 0.15);

  /* --- Status --- */
  --color-success: #22c55e;
  --color-success-text: #4ade80;
  --color-error: #ef4444;
  --color-error-text: #f87171;
  --color-warning: #f59e0b;
  --color-warning-text: #fbbf24;

  /* --- Shadows --- */
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--color-accent-glow);

  /* --- Layout --- */
  --sidebar-width: 240px;
  --sidebar-collapsed: 56px;
  --topbar-height: 56px;
  --content-max-width: 1200px;
  --nav-height: 56px;

  /* --- Radius --- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* --- Typography --- */
  --font-sans: "Geist Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", "Fira Code", monospace;

  /* --- Transitions --- */
  --transition-fast: 150ms ease-out;
  --transition-normal: 200ms ease-out;
  --transition-slow: 300ms ease-out;
  --transition-slower: 400ms ease-out;
}

/* --------------------------------------------------------------------------
   3. BASE STYLES
   -------------------------------------------------------------------------- */

html {
  font-family: var(--font-sans);
  background-color: var(--color-root);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background-color: var(--color-root);
  line-height: 1.6;
  font-size: 16px;
}

/* Prevent FOUC on dark mode — the anti-flicker script adds .dark immediately,
   but we also need a CSS-level guarantee. */
html:not(.light) {
  color-scheme: dark;
}

html.light {
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   4. SELECTION & SCROLLBAR
   -------------------------------------------------------------------------- */

::selection {
  background-color: rgba(99, 102, 241, 0.3);
  color: var(--color-text-primary);
}

/* Thin scrollbars that match the dark aesthetic */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* --------------------------------------------------------------------------
   5. CODE BLOCK THEME
   --------------------------------------------------------------------------
   VS Code dark-inspired syntax highlighting. Applied to <pre><code> blocks
   and inline <code> elements. Works with both manual syntax spans and
   highlight.js class names.
   -------------------------------------------------------------------------- */

code,
pre {
  font-family: var(--font-mono);
}

/* Inline code */
:not(pre) > code {
  background-color: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
  font-size: 0.875em;
  color: var(--color-accent-hover);
}

/* Code blocks */
pre {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.65;
  position: relative;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: var(--color-text-primary);
}

/* --- Syntax token colors (VS Code Dark+ inspired) --- */

/* Comments */
.hljs-comment,
.hljs-quote,
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6a737d;
  font-style: italic;
}

/* Keywords, tags */
.hljs-keyword,
.hljs-selector-tag,
.hljs-type,
.token.keyword,
.token.tag,
.token.important {
  color: #c678dd;
}

/* Strings */
.hljs-string,
.hljs-template-variable,
.token.string,
.token.attr-value {
  color: #98c379;
}

/* Numbers, booleans */
.hljs-number,
.hljs-literal,
.token.number,
.token.boolean {
  color: #d19a66;
}

/* Functions */
.hljs-title,
.hljs-section,
.token.function {
  color: #61afef;
}

/* Variables, attributes */
.hljs-attr,
.hljs-variable,
.token.attr-name,
.token.variable {
  color: #e5c07b;
}

/* Operators, punctuation */
.hljs-symbol,
.hljs-bullet,
.token.operator,
.token.punctuation {
  color: #abb2bf;
}

/* Built-in, class names */
.hljs-built_in,
.hljs-builtin-name,
.token.class-name,
.token.builtin {
  color: #e5c07b;
}

/* Shell/bash prompts */
.hljs-meta,
.token.shell-symbol {
  color: var(--color-accent-hover);
}

/* Regex, special */
.hljs-regexp,
.token.regex {
  color: #56b6c2;
}

/* Deleted/inserted (diffs) */
.hljs-deletion,
.token.deleted {
  color: var(--color-error-text);
  background-color: rgba(239, 68, 68, 0.1);
}

.hljs-addition,
.token.inserted {
  color: var(--color-success-text);
  background-color: rgba(34, 197, 94, 0.1);
}

/* Code block header (language label) */
pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.25rem 0.75rem;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--color-text-tertiary);
  background-color: var(--color-elevated);
  border-bottom-left-radius: var(--radius-md);
  border-top-right-radius: calc(var(--radius-lg) - 1px);
  border-left: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   6. GLASS EFFECTS
   --------------------------------------------------------------------------
   Frosted glass used surgically: nav bar, command palette overlay, modals.
   NOT on every card.
   -------------------------------------------------------------------------- */

.glass {
  background-color: var(--color-glass);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--color-border);
}

.glass-strong {
  background-color: rgba(9, 9, 11, 0.85);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   7. ANIMATION KEYFRAMES
   -------------------------------------------------------------------------- */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 8px var(--color-accent-glow);
  }
  50% {
    box-shadow: 0 0 20px var(--color-accent-glow);
  }
}

/* Staggered fade-up for hero and feature sections */
.stagger > * {
  opacity: 0;
  animation: fadeUp 0.5s ease-out forwards;
}
.stagger > *:nth-child(1) {
  animation-delay: 0ms;
}
.stagger > *:nth-child(2) {
  animation-delay: 80ms;
}
.stagger > *:nth-child(3) {
  animation-delay: 160ms;
}
.stagger > *:nth-child(4) {
  animation-delay: 240ms;
}
.stagger > *:nth-child(5) {
  animation-delay: 320ms;
}
.stagger > *:nth-child(6) {
  animation-delay: 400ms;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .stagger > *,
  [x-transition],
  .transition-all {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   8. UTILITY CLASSES
   -------------------------------------------------------------------------- */

/* Gradient text (used for hero headings) */
.gradient-text {
  background: linear-gradient(
    135deg,
    var(--color-text-primary) 0%,
    var(--color-accent-hover) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtle accent gradient for hero backgrounds */
.gradient-bg-accent {
  background: radial-gradient(
    ellipse 80% 60% at 50% -20%,
    rgba(99, 102, 241, 0.12) 0%,
    transparent 70%
  );
}

/* Dot grid background pattern */
.dot-grid {
  background-image: radial-gradient(
    circle,
    var(--color-border) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}

/* Accent border glow (for focused cards, active nav items) */
.border-glow {
  box-shadow: var(--shadow-glow);
  border-color: var(--color-border-accent);
}

/* Card hover lift */
.hover-lift {
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Smooth accordion/collapsible panel height */
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}
.accordion-panel[data-open="true"],
.accordion-panel.open {
  grid-template-rows: 1fr;
}
.accordion-panel > div {
  overflow: hidden;
}

/* Copy button feedback */
.copy-feedback {
  animation: fadeIn 150ms ease-out;
}

/* Active nav indicator — left bar accent */
.nav-active {
  position: relative;
}
.nav-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   9. DOCS SIDEBAR STYLES
   -------------------------------------------------------------------------- */

.docs-sidebar {
  width: var(--sidebar-width);
  min-height: calc(100vh - var(--nav-height) - 2rem);
}

.docs-sidebar-group-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
}

.docs-sidebar-link {
  display: block;
  padding: 0.375rem 0.75rem;
  font-size: 14px;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
  cursor: pointer;
}

.docs-sidebar-link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-overlay);
}

.docs-sidebar-link.active {
  color: var(--color-text-primary);
  background-color: var(--color-accent-muted);
}

/* --------------------------------------------------------------------------
   10. FOCUS STYLES
   --------------------------------------------------------------------------
   Visible only on keyboard navigation (focus-visible). Indigo ring to
   match the accent system.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Remove outline for mouse clicks */
:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   11. RESPONSIVE OVERRIDES
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .docs-sidebar {
    width: 100%;
    min-height: auto;
  }

  pre {
    font-size: 12px;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
  }
}

/* ==========================================================================
   SHARED HTML PATTERNS — Reference
   ==========================================================================

   FLOATING GLASS NAV:
   -------------------------------------------------------------------------
   <nav class="fixed top-4 left-4 right-4 z-50 glass rounded-xl px-4 lg:px-6"
        style="height: var(--nav-height)">
     <div class="max-w-7xl mx-auto h-full flex items-center justify-between">
       <!-- Logo -->
       <a href="/" class="flex items-center gap-2 cursor-pointer">
         <img src="/assets/images/favicon.svg" alt="LaunchPad" class="w-7 h-7">
         <span class="text-lg font-semibold text-white">LaunchPad</span>
       </a>

       <!-- Desktop links -->
       <div class="hidden md:flex items-center gap-6">
         <a href="/features" class="text-sm text-zinc-400 hover:text-white transition-colors cursor-pointer">Features</a>
         <a href="/docs" class="text-sm text-zinc-400 hover:text-white transition-colors cursor-pointer">Docs</a>
         <a href="https://github.com/..." class="text-sm text-zinc-400 hover:text-white transition-colors cursor-pointer">GitHub</a>
       </div>

       <!-- Right side: dark mode toggle + mobile menu -->
       <div class="flex items-center gap-3">
         <button @click="$store.darkMode.toggle()"
                 class="p-2 rounded-md text-zinc-400 hover:text-white hover:bg-white/5 transition-colors cursor-pointer"
                 aria-label="Toggle theme">
           <!-- Sun/Moon icon swap -->
         </button>
         <button @click="$store.mobileMenu.toggle()"
                 class="md:hidden p-2 rounded-md text-zinc-400 hover:text-white cursor-pointer"
                 aria-label="Toggle menu">
           <!-- Hamburger icon -->
         </button>
       </div>
     </div>
   </nav>

   <!-- Mobile menu panel (below nav) -->
   <div x-show="$store.mobileMenu.open"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 -translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 -translate-y-2"
        class="fixed top-20 left-4 right-4 z-40 glass rounded-xl p-4 md:hidden">
     <div class="flex flex-col gap-2">
       <a href="/features" class="block px-3 py-2 text-sm rounded-md ...">Features</a>
       <a href="/docs" class="block px-3 py-2 text-sm rounded-md ...">Docs</a>
       <a href="https://github.com/..." class="block px-3 py-2 text-sm rounded-md ...">GitHub</a>
     </div>
   </div>


   FOOTER:
   -------------------------------------------------------------------------
   <footer class="border-t border-zinc-800 mt-24">
     <div class="max-w-7xl mx-auto px-4 lg:px-6 py-12">
       <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
         <!-- Column: Product -->
         <div>
           <h4 class="text-sm font-semibold text-white mb-4">Product</h4>
           <ul class="space-y-2">
             <li><a href="/features" class="text-sm text-zinc-400 hover:text-white transition-colors cursor-pointer">Features</a></li>
             <li><a href="/docs" class="text-sm text-zinc-400 hover:text-white transition-colors cursor-pointer">Documentation</a></li>
             <li><a href="/changelog" class="text-sm text-zinc-400 hover:text-white transition-colors cursor-pointer">Changelog</a></li>
           </ul>
         </div>
         <!-- Column: Resources -->
         <div>
           <h4 class="text-sm font-semibold text-white mb-4">Resources</h4>
           <ul class="space-y-2">
             <li><a href="/docs/getting-started" class="text-sm text-zinc-400 hover:text-white transition-colors cursor-pointer">Getting Started</a></li>
             <li><a href="/docs/architecture" class="text-sm text-zinc-400 hover:text-white transition-colors cursor-pointer">Architecture</a></li>
             <li><a href="/docs/troubleshooting" class="text-sm text-zinc-400 hover:text-white transition-colors cursor-pointer">Troubleshooting</a></li>
           </ul>
         </div>
         <!-- Column: Community -->
         <div>
           <h4 class="text-sm font-semibold text-white mb-4">Community</h4>
           <ul class="space-y-2">
             <li><a href="https://github.com/..." class="text-sm text-zinc-400 hover:text-white transition-colors cursor-pointer">GitHub</a></li>
             <li><a href="https://github.com/.../issues" class="text-sm text-zinc-400 hover:text-white transition-colors cursor-pointer">Issues</a></li>
             <li><a href="https://github.com/.../discussions" class="text-sm text-zinc-400 hover:text-white transition-colors cursor-pointer">Discussions</a></li>
           </ul>
         </div>
         <!-- Column: Legal -->
         <div>
           <h4 class="text-sm font-semibold text-white mb-4">Legal</h4>
           <ul class="space-y-2">
             <li><a href="/privacy" class="text-sm text-zinc-400 hover:text-white transition-colors cursor-pointer">Privacy</a></li>
             <li><a href="/license" class="text-sm text-zinc-400 hover:text-white transition-colors cursor-pointer">License</a></li>
           </ul>
         </div>
       </div>
       <div class="mt-12 pt-8 border-t border-zinc-800 flex flex-col md:flex-row items-center justify-between gap-4">
         <div class="flex items-center gap-2">
           <img src="/assets/images/favicon.svg" alt="" class="w-5 h-5">
           <span class="text-sm text-zinc-500">LaunchPad</span>
         </div>
         <p class="text-sm text-zinc-500">&copy; 2026 LaunchPad. All rights reserved.</p>
       </div>
     </div>
   </footer>


   DOCS SIDEBAR:
   -------------------------------------------------------------------------
   <aside class="docs-sidebar shrink-0 py-6 pr-6 hidden lg:block">
     <nav class="sticky top-24 space-y-6">
       <!-- Section: Getting Started -->
       <div>
         <p class="docs-sidebar-group-title">Getting Started</p>
         <ul class="space-y-0.5">
           <li><a href="/docs/installation" class="docs-sidebar-link" :class="{ 'active': currentPage === 'installation' }">Installation</a></li>
           <li><a href="/docs/quick-start" class="docs-sidebar-link" :class="{ 'active': currentPage === 'quick-start' }">Quick Start</a></li>
         </ul>
       </div>
       <!-- Section: Features -->
       <div>
         <p class="docs-sidebar-group-title">Features</p>
         <ul class="space-y-0.5">
           <li><a href="/docs/dashboard" class="docs-sidebar-link" :class="{ 'active': currentPage === 'dashboard' }">Dashboard</a></li>
           <li><a href="/docs/job-management" class="docs-sidebar-link" :class="{ 'active': currentPage === 'job-management' }">Job Management</a></li>
           <li><a href="/docs/scheduling" class="docs-sidebar-link" :class="{ 'active': currentPage === 'scheduling' }">Scheduling</a></li>
         </ul>
       </div>
       <!-- Section: API -->
       <div>
         <p class="docs-sidebar-group-title">API</p>
         <ul class="space-y-0.5">
           <li><a href="/docs/api-reference" class="docs-sidebar-link" :class="{ 'active': currentPage === 'api-reference' }">API Reference</a></li>
           <li><a href="/docs/cli" class="docs-sidebar-link" :class="{ 'active': currentPage === 'cli' }">CLI Commands</a></li>
         </ul>
       </div>
       <!-- Section: Architecture -->
       <div>
         <p class="docs-sidebar-group-title">Architecture</p>
         <ul class="space-y-0.5">
           <li><a href="/docs/architecture" class="docs-sidebar-link" :class="{ 'active': currentPage === 'architecture' }">Overview</a></li>
           <li><a href="/docs/security" class="docs-sidebar-link" :class="{ 'active': currentPage === 'security' }">Security Model</a></li>
         </ul>
       </div>
       <!-- Section: Troubleshooting -->
       <div>
         <p class="docs-sidebar-group-title">Troubleshooting</p>
         <ul class="space-y-0.5">
           <li><a href="/docs/faq" class="docs-sidebar-link" :class="{ 'active': currentPage === 'faq' }">FAQ</a></li>
           <li><a href="/docs/common-issues" class="docs-sidebar-link" :class="{ 'active': currentPage === 'common-issues' }">Common Issues</a></li>
         </ul>
       </div>
     </nav>
   </aside>

   ========================================================================== */